@import url('/cms/core/components/tinymce/inc.editor.css');
@import url('/core/styles/shares.css');
@import url('/core/styles/forms.css');
body, html {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    background-color: #333333;
    font-weight: 400;
    color: #333333;
    font-size:100%
}
h1, h2, h3, h4, h5, h6 { text-transform: capitalize; color: orange }
#content h1:first-of-type { margin-top: 0 }
img { margin-bottom: -4px; max-width: 100%; height: auto }
.skip { position: absolute; top: -1000px }
.pad { padding: 30px; box-sizing: border-box; transition: .5s }
.constrain { max-width: 1200px; margin: auto }
#top, #content { background-color: white }
#menu { 
    background: rgb(127,127,127);
    background: -moz-linear-gradient(top,  rgba(127,127,127,1) 0%, rgba(104,104,104,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(127,127,127,1) 0%,rgba(104,104,104,1) 100%);
    background: linear-gradient(to bottom,  rgba(127,127,127,1) 0%,rgba(104,104,104,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f7f7f', endColorstr='#686868',GradientType=0 );
}
.shadow { box-shadow:0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19) }

#top .constrain { display: table; width: 100% }
#top .constrain div { display: table-cell; vertical-align: middle }
#top .constrain div:first-child { width: 100px }
#top .constrain div:last-child { padding-left: 20px }
#top .constrain div img { width: 100%; height: auto }
#top .constrain div span:first-child {
	display: block;
	text-transform: uppercase;
	font-size: 200%;
	font-weight: 700;
	color: #666666
}
#top .constrain div span:last-child {
	text-transform: capitalize;
	font-size: 100%;
}

.full { width: 100% }
.nowrap { white-space: nowrap }

#menu ul ul { display: none }
#menu ul { margin: 0; padding: 0; list-style: none }
#menu li { display: inline }
#menu a, #menu a:visited { 
	text-decoration: none; 
	display: inline-block;
	color: white;
	text-transform: uppercase;
	padding-right: 20px;
}
#menu a:hover { text-decoration: underline }
#menu .constrain { display: table; width: 100% }
#menu .constrain nav, #menu .constrain div { display: table-cell; vertical-align: middle }
#menu .constrain nav div { padding-right: 20px }
#menu .constrain nav div:last-child { padding-right: 0 }

.banner { position: relative; height: 350px; overflow: hidden; background-color: white }
.banner img { width: 100%; height: auto }
.banner_header { background-color: white; text-align: center }
.banner_header h1, .banner_header h2 { margin: 0 }
.banner_header h1 { color: orange }

.box_home { text-align: center; color: black }
.box_home h1 { margin-top: 0; color: orange }
.box_home h2 { margin-top: 0; color: grey }

.shares { background-color: #f2f2f2; border-top: 1px solid #cccccc; text-align: center }

.follow a, .follow a:visited {
    display: inline-block;
    height: 30px;
    width: 30px;
    margin-right: 5px;
    background-position: right center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 0;
    transition:.5s;
}
.follow a:last-child { margin-right: 0 }
.follow a:hover { transform:scale(.8) }
.follow .facebook { background-image:url(/core/modules/follow/facebook.png) }
.follow .instagram { background-image:url(/core/modules/follow/instagram.png) }
.follow .linkedin { background-image:url(/core/modules/follow/linkedin.png) }
.follow .twitter { background-image:url(/core/modules/follow/twitter.png) }

.grid { box-sizing: border-box }
.grid a, .grid a:visited {
    display: inline-block;
    position: relative;
    width: 29.27%;
    padding-bottom: 29.27%;
    margin: 0 3% 5% 3%;
    background-position: center center;
    background-size: cover;
    box-sizing: border-box;
    border-radius: 10px;
    overflow: hidden;
    color: white;
    text-decoration: none;
    transition: .5s
}
.grid a:hover { transform: scale(0.9) }
.grid a:nth-child(3n+1) { margin-left: 0; clear: both }
.grid a:nth-child(3n+3) { margin-right: 0 }
.box_underlay { position: absolute; top: 0; bottom: 0; width: 100%; background-color: RGBA(0,0,0,0.4); z-index: 1 }
.box_details { position: absolute; width: 100%; bottom: 0; z-index: 2; padding: 15px; box-sizing: border-box }
.box_details h2 { 
    margin: 0; font-weight: 400; font-size: 125%; display: block; padding-bottom: 5px; 
    margin-bottom: 5px; border-bottom: 1px solid white; color: white !important
}
.spacer { height: 30px; clear: both }


.services { display: table; width: 100%; background-color: #f2f2f2; border-top: 1px solid grey }
.services .row { display: table-row }
.services .row .cell { 
    display: table-cell; vertical-align: middle; width: 33.33%; padding-bottom: 10%;
    background-position: center center; background-size: cover
}
.services .row .cell h2 { margin-top: 0; font-size: 120% }
.services .row .cell p { margin-top: 0 }

.button, .button:visited {
    display: inline-block;
    padding: 8px 10px 8px 10px;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 5px;
    background: rgb(255,48,25);
    background: -moz-linear-gradient(top,  rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
    transition: .5s
}
.button:hover { transform: scale(0.9) }

table { display: table; border: none }
tr { display: table-row; border: none }
td { display: table-cell; border: none; border: 1px solid #cccccc; border-bottom: none; border-right: 0; padding: 10px }
tr td:last-child { border-right: 1px solid #cccccc }
tr:last-child td { border-bottom: 1px solid #cccccc }
tr:nth-child(odd) td { background-color: #cccccc }
tr:nth-child(even) td { background-color: #f2f2f2 }

#footer { text-align: center; color: #f2f2f2 }
#footer p { margin: 0 0 10px 0 }
#footer img { margin: 10px 0 10px 0 }
#footer a, #footer a:visited { color: white }

.form { display: table;  }
.form .row { display: table-row }
.form .row .cell { display: table-cell; vertical-align: top }
.contact_form input, .contact_form textarea { margin: 0; width: 100% }
.contact_form .cell { padding: 0 30px 30px 0 }
.contact_form .row .cell:last-child { padding-right: 0 }

.contact_details, .contact_form { display: table-cell; vertical-align: top }
.contact_details { width: 30%; background-color: #f2f2f2 }
.contact_details p:first-of-type { margin-top: 0 }
.contact_form { padding-left: 30px }

input:required, select:required, textarea:required { border-left: 2px solid red }

.hidden {
    opacity: 0;
    transform: translate(0, 30px);
    transition:all 1s
}
.visible {
    opacity: 1;
    transform:translate(0, 0)
}

.nice_loader { position: fixed; z-index: 30; background-color: white; top: 0; right: 0; left: 0; bottom: 0 }

label { display: block; padding-bottom: 5px; font-style: italic }
.required_field { color: red; font-size: 85% }

.load_mobile { display: none }

@media screen and ( max-width: 1024px ) {
	.pad { padding: 20px }
}
@media screen and ( max-width: 768px ) {
    body, html {
        font-size:90%;
        color: black
    }
   // div { border: 1px solid red; box-sizing: border-box }
	.pad { padding: 10px }
    h1, h2, h3, h4, h5, h6 { font-size: 120% }
    #top {
       background: rgb(255,255,255);
       background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 48%, rgba(255,221,221,1) 100%);
       background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 48%,rgba(255,221,221,1) 100%);
       background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 48%,rgba(255,221,221,1) 100%);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffdddd',GradientType=0 );
    }
    #top .constrain div { display: block; padding: 0 !important; width: 100% !important; text-align: center }
    
    #top .constrain div img { height: 50px; width: auto; margin-bottom: 10px }
    #top .constrain div span { padding: 0 }
    #top .constrain div span:first-child { font-size: 100% }
    #menu { display: none }
    .shadow { box-shadow:none }
    .load_mobile { display: block; background-color: white }
    .mobile_menu { display: none }
    .open_menu { display: block; background-color: maroon; color: white; text-decoration: none; text-align: center }
    
    .mobile_menu { background-color: #f2f2f2; border-bottom: 1px solid #cccccc }
    
    .banner { height: 150px }
    .banner img { height: 100%; width: auto }
    .banner_header { display: none }
    
    .grid { box-sizing: border-box }
    .grid a, .grid a:visited {
        width: 50%;
        margin: 0;
        padding-bottom: 40%;
        border-radius: 0;
        box-sizing: border-box;
        border: 5px solid white;
        border-bottom-width: 3px !important
    }
    .grid a:nth-child(2n+1) { border-left: none }
    .grid a:nth-child(2n+2) { border-right: none }
    .grid a:hover { transform: none }
    .box_details h2 { font-size: 100% }
    
    .services { display: block; border-top: none }
    .services .row { display: block }
    .services .row .cell { display: block; width: 100%; padding: 10%; text-align: center }
    
    .main_content img { width: 100%; height: auto; margin-bottom: 30px; border-radius: 10px }
    
    table { margin: auto}
    
    
    
    
    .form { display: table;  }
    .form .row { display: block }
    .form .row .cell { display: block; vertical-align: top }
    .contact_form .cell { padding: 0 0 30px 0 }
    
    .contact_details, .contact_form { display: block }
    .contact_details { width: 100%; background-color: #f2f2f2; margin-bottom: 30px }
    .contact_form { padding-left: 0 }
    
    .shares a { display: block; width: 100%; margin-bottom: 5px }
    
    
    
    
}