/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXX                                                                      XXXX
XXXX                      SITEAPEX STARTER TEMPLATE                       XXXX
XXXX                            MARCH 12, 2013                            XXXX
XXXX                          OSM NETWORKS INC.                           XXXX
XXXX                                                                      XXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/


body {
	margin: 0px;
}
.page {
	max-width: 1390px !important;
	margin: 0px auto;
	position: relative;
}
.page_small {
	max-width: 800px !important;
	margin: 0px auto;
	position: relative;
}
.page_medium {
	max-width: 1000px !important;
	margin: 0px auto;
	position: relative;
}
.page_large {
	max-width: 1800px !important;
	margin: 0px auto;
	position: relative;
}
#wrapper {
    position: relative;
	height: 100%;
	width: 100%;
    overflow-x: hidden; /* USE THIS TO FIX MOBILE MENU WITE BLOWOUT */
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXX  SPLASH  XXXXXXXXXXXXXXXXXXXXXXXXX*/

#splash_wrapper {
    position: relative;
	height: 100vh;
	width: 100%;
    overflow-x: hidden; /* USE THIS TO FIX MOBILE MENU WITE BLOWOUT */
    background-color: #444;
    /*background-image: url("/images/COMP-splash-background.jpg");*/
    background-image: url("/images/2023/HomepageBackground2023.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    /*display: grid;
    grid-template-rows: auto auto 1fr auto;*/
}
.splash_overlay {
    height: 100vh;
	width: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-row-gap: 40px;
    background-color: rgba(0,10,0,0.65);
}
.splash_logo {
    position: relative;
    padding: 40px 20px 0px 20px;
    margin: 0px auto;
    width: 450px;
}   
.splash_logo img {
    width: 100%;
    height: auto;   
}
.instructions {
    padding: 0px 40px;
    text-align: center;
    font-size: 1.35em;
    margin: 0px auto;
    color: #fff;
}
.section_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
}
.sections_grid {
    display: grid;
    grid-gap: 40px;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
    padding: 0px 40px;
}
.section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color: #fff;
    text-align: center;
}
.section img {
    max-width: 100%;
    height: auto;
}
.white_button img {
    margin-left: 10px;
}
.white_button:hover > img {
    filter: invert(100%) sepia(3%) saturate(7493%) hue-rotate(298deg) brightness(105%) contrast(104%);
    transition: .4s;
}
@media (max-width: 768px) {
.splash_overlay {
    grid-row-gap: 20px;    
}    
.splash_logo {
    padding: 40px 20px 20px 20px;
    width: 350px;    
}
.instructions {
    font-size: 1em;
}  
.sections_grid {
    grid-template-columns: 1fr;
    grid-gap: 0px;    
}
.section .white_button {
    padding: 8px 20px;
    font-size: .8em!important;
}    
}
@media (max-width: 440px) { 
#splash_wrapper {
    height: 100vh;
} 
.splash_overlay {
    height: 100%;
    grid-row-gap: 0px;
}     
.splash_logo {
    padding: 20px;
    width: 200px;   
}
.section_container {
    gap: 0px;
}    
.instructions {
    font-size: 1em;
    padding: 0px 20px 20px 20px;
}
.sections_grid {
  grid-gap: 0px;
}    
.description {
    font-size: 0em;
    display: none;
}  
.splash_copyright_container {
    padding-top: 40px;
}    
}

/*XXXXXXXXXXXXXXXXXXXXX  BUTTON STYLES  XXXXXXXXXXXXXXXXXXXXXXXXX*/

.content_button {
    background-color: #c73806;
    border: 1px solid #c73806;
    color: #fff!important;
    text-decoration: none;
    padding: 10px 40px;
    line-height: inherit;
    display: inline-block;
    border-radius: 8px;
    white-space: nowrap;
    transition: .4s;
}
.content_button:hover {
    background-color: transparent;
    color: #c73806!important;
    transition: .4s;
}
.white_button, .quicklinks_hover a, .quicklinks_hover a:visited {
    background-color: #fff;
    border: 1px solid #fff;
    color: #000!important;
    text-decoration: none;
    padding: 10px 40px;
    line-height: inherit;
    border-radius: 8px;
    transition: .4s;
    display: flex;
    align-content: center;
    align-items: center;    
    white-space: nowrap;
}
.white_button:hover, .quicklinks_hover a:hover {
    background-color: transparent;
    color: #fff!important;
    transition: .4s;
}