/*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: 1440px !important;
	margin: 0px auto;
	margin: 0px auto;
	position: relative;
}
.page_small {
	max-width: 940px !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 BUTTONS XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/* To apply these styles, add "{name}_button" (ie. "content_button") to the Stylesheet Class under the advanced link tab.  */

.content_button, .content_button:visited {
    padding: 8px 16px;
    color: #000000;
    text-decoration: none;
    position: relative;
    background-color: #ff9a00;
    border-radius: 3px;
    display: inline-block;
    transition: .4s;
}
.content_button:hover {
    opacity: .6;
    transition: .4s;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

.top_bar_container {
    background-color: #150b0a;
}
.top_bar {
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: space-between;
    padding: 4px 20px;
}
.top_bar p {
    margin: 0 40px 0px 0px;
}
.top_bar_plugin {
    display: flex;
    align-content: center;
    justify-content: flex-start;
    align-items: center;    
}
.top_bar_plugin img {
    width: 25px;
    height: auto;
    margin-right: 10px;
}
.header_container {
    position: relative;
    z-index: 900 !important;
    width: 100%;
}    
.header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "header_logo navigation";
    align-items: center;
    background-color: #fff;
    border-bottom: 1px solid #dddddd;
    z-index: 900 !important;
} 
.navigation {
    display: flex;
    z-index: 800 !important;
    flex-wrap: wrap;
    justify-content: space-between;
    flex-direction: column-reverse;
    transition: all 1s;
    left: 0;
    width: 100% !important;
}   
.header_logo {
    padding: 20px;
    height: auto;
    max-width: 200px;
    position: relative;
    z-index: 900 !important;
    transition: .4s;
    grid-area: header_logo;
}   
.header_logo p {
    margin: 0px;
}
.header_logo img {
    width: 100%;
    height: auto;
}
.header_logo-shrink {
    padding: 10px 20px;
    height: auto;
    max-width: 200px;
    position: relative;
    z-index: 9100 !important;
    transition: .4s;
    grid-area: header_logo;
}   
.social_media {
    display: flex !important;
    align-content: center;
    justify-content: flex-end;
    margin-top: 0;
    top: 1px;
    position: relative;
    transition: all 1s;
}  
.social_media p {
    margin: 0;
    padding: 0;
    display: flex;
    align-content: center;
    align-items: center;    
}
.social_media a, .social_media a:visited {
    padding: 5px 10px;
    color: #000;
    text-decoration: none;
    position: relative;
    background-color: #ff9a00;
    border-radius: 3px;
    margin-bottom: 2px;
}
.social_media a:nth-child(1) {
  margin-left: 10px;
}
.social_media a:hover {
    text-decoration: none;
    opacity: .6;
}
.rotator_2021 {
    position: relative;
    background-color: #ddd;
    min-height: 100px;
}
@media (max-width: 810px) {  
.header {
    grid-template-areas: "header_logo" "navigation";
}  
.header-shrink {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "header_logo" "navigation";
    align-items: center;
}     
.navigation {
    padding-right: 0px;
    width: 100%;
    position: absolute;
}   
.hnav {
    width: 100%;
}
.header_logo, .header_logo-shrink {
    width: 125px;
    padding: 10px 20px;
}
}
/*XXXXXXXX  HOVER OPACITY  XXXXXXX*/
.quicklinks_container {
    width: 100%;
    background-color: #fff;
    overflow: clip;
}
.links {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    padding: 0;    
}
.links ul {
    list-style-type: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.links li {
    display: flex;
    flex-grow: 1;
    height: 100%;
}
.links a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 80%;
    height: auto;
    text-decoration: none;
    font-size: 1.2em;
    line-height: 1.4em;
    transition: .2s;
    padding: 10%;   
}
.links a:hover {
    transition: .2s;
}
.links a img {
    margin-bottom: 20px;
    max-width: 60px;
    height: auto;
}
a, li, ul {
    padding: 0;
    margin: 0;
}
.quicklinks_one, .quicklinks_two, .quicklinks_three, .quicklinks_four {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position:relative;
	float:left;
	width:100%;
	min-height:30px;
	text-align:center;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0;   
    opacity: 1;
    color: #000;
}
.plugin_one p, .plugin_two p, .plugin_three p, .plugin_four p {
    margin: 0px;
}
.plugin_one, .plugin_two, .plugin_three, .plugin_four {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 20px;
    color: #fff;
    text-align: center;
    transition: .2s;
}
.plugin_one {
    background-color: #150b0a;
}
.plugin_two {
    background-color: #c4ccd0; 
}
.plugin_three {
    background-color: #ff2b01;
}
.plugin_four {
    background-color: #d0929f;
}
.plugin_one:hover, .plugin_two:hover, .plugin_three:hover, .plugin_four:hover {
    opacity: .6;
}
.plugin_one a, .plugin_one a:visited  {
    color: #fff;
}
.plugin_two a, .plugin_three a, .plugin_four a, .plugin_two a:hover, .plugin_thre a:hover, .plugin_four a:hover, .plugin_two a:visited, .plugin_three a:visited, .plugin_four a:visited  {
    color: #000;
}
.plugin_one a:hover  {
    color: #fff;
}
@media (max-width: 810px) {
.links {
    grid-template-columns: 1fr;
}    
.links a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 90%;
    height: auto;
    text-decoration: none;
    font-size: 1em;
    line-height: 1.4em;
    transition: .2s;
    padding: 5%;   
}  
}
.content_container_home {
    background-color: #fff;
    text-align: center;
}
.content_container {
    background-color: #fff;
}
.content_container_inner {
    background-color: #fff;
}
.container {
    display: flex;
    align-content: space-between;
    padding: 60px;
}
.content {
    padding: 60px;
    overflow: auto;
}
.content_inner {
    margin-right: 100px;
    width: 100%;
}
.sidebar_container {
    min-width: 300px;
    max-width: 300px;
}
.sidebar_space {
    min-width: 300px;
    max-width: 300px;    
}
.sidebar_plugin1, .sidebar_plugin2, .sidebar_plugin3, .sidebar_plugin4, .sidebar_plugin5, .sidebar_plugin6 { 
    display: flex;
    margin-bottom: 60px; 
}
@media (max-width: 810px) {
.content_container {
    background-color: #fff;
    margin-top: 0px;
}
.container {
    flex-wrap: wrap;
    padding: 40px;
}
.content_inner {
    margin-right: 0px;
    margin-bottom: 40px;
}    
.sidebar_container {
    min-width: inherit;
    max-width: inherit;
    width: 100%;
}    
}
.section_a {
    display: grid;
    padding: 40px;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 40px;
}
.left, .middle, .right {
    display: grid;
    align-content: center;
    align-items: center;
    justify-content: center;
    grid-template-rows: 250px 1fr;
    box-shadow: 0px 0px 8px #efefef;
}
.left_image {
    background-image:url("/photos/custom/quicklinks/left_image.jpg");
    background-size: cover;
    background-position: center;
    height: 250px;
}
.middle_image {
    background-image:url("/photos/custom/quicklinks/middle_image.jpg");
    background-size: cover;
    background-position: center;
    height: 250px;
}
.right_image {
    background-image:url("/photos/custom/quicklinks/right_image.jpg");
    background-size: cover;
    background-position: center;
    height: 250px;
}
.section_plugin {
    text-align: center;
    padding: 20px;
}
@media (max-width: 1000px) {
.section_a {
    grid-template-columns: 1fr 1fr;
}    
}
@media (max-width: 810px) {
.section_a {
    grid-template-columns: 1fr;
}    
}
.map_container {
    margin-bottom: -40px;
    z-index: 500;
    position: relative;    
    padding-top: 40px;
}
#map {
    display:flex;   
    margin: 0px 40px;
    border: 4px solid #fff;
}
.scrolloff iframe   {
        pointer-events: none ;
}
.footer_container {
    background-color: #d0929f;
    width: 100%;
}
.footer {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-column-gap: 80px;
    padding: 80px 40px 40px 40px;
    color: #000;
}
.footer_inner {
    display: grid;
    grid-template-columns: 1fr auto auto;
    grid-column-gap: 80px;
    padding: 40px;
    color: #000;
}
.footer_logo {
    max-width: 200px;
    height: auto; 
    padding-bottom: 20px;
}
.footer_logo img {
    width: 100%;
    height: auto;
}
.footer a, .footer a:visited, .footer_inner a, .footer_inner a:visited  {
    color: #000;
    text-decoration: none
}
.footer a:hover, .footer_inner a:hover {
    opacity: .6;
}
.footer_button {
    padding: 8px 16px;
    color: #000;
    text-decoration: none;
    position: relative;
    background-color: #fff;
    border-radius: 3px;
    display: inline-block;
    transition: .4s;
}
.footer_button:hover {
    opacity: .6;
    transition: .4s;
}
.copyright_container {
    background-color: #150b0a;
}
.copyright {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 40px;
    font-size: 12px;
    color: #fff;
}
.copyright_text {
    font-size: 12px;
    color: #fff;
}
.copyright a, .copyright a:visited {
    color: #fff;
    text-decoration: none
}
.copyright a:hover {
    opacity: .6;
}
.copyright p {
    margin: 0;
}
.copyright_social_media {
    text-align: right;
}
.copyright_social_media p {
    margin: 0px;
} 
@media (max-width: 810px){
.footer {
    grid-template-columns: 1fr;
    text-align: center;
}
.footer_logo {
  margin: 0px auto;
}
}