banner@charset "UTF-8";

html,body{ height:100%; margin:0; padding:0; }
body { font-size: 15px; background-color:#000000; height:100%; margin:0; padding:0; color:#ffffff;  font-family: 'Lato', sans-serif;}

.white{color:#ffffff}
.blue{color:#00b4ff}
.cen{text-align:center}
img{box-shadow: #000 0 0 0}

.s10{font-size:10px} .s12{font-size:12px} .s14{font-size:14px} .s16{font-size:16px} .s18{font-size:18px} .s19{font-size:19px} .s20{font-size:20px} .s22{font-size:22px} .s24{font-size:24px} .s28{font-size:28px}.s32{font-size:32px}

.fw300{ font-weight:300;} .fw400{ font-weight:400;} .fw500{ font-weight:500;}.fw700{ font-weight:700;}
.response-only { display:none; }

h1{ margin:0px 0px 10px 0px; padding:0; display:block; font-size:60px; line-height:1.1em; }
h2{ margin:0px 0px 10px 0px; padding:0; display:block; font-size:30px; line-height:1.1em; font-weight:300; color:#00b4ff}
h3{ margin:0px 0px 0px 0px; padding-top:250px; display:block; font-size:50px; line-height:1.1em; font-weight:300; text-shadow: 1px 1px #000000; }
h4{ margin:0px 0px 0px 0px; padding:0; display:block; color:#00b4ff; font-size:30px;font-weight:300; }
h5{ margin:0px 0px 0px 0px; padding:0; display:block; color:#ffffff; font-size:16px;font-weight:normal; }

.content{width:100%; display:block; margin: 100px auto 0px auto; }

header{width:100%; clear:both; padding:0px 0px 15px 0px; top:0px;z-index:2000 ; position:fixed; top:0px; background-color:#000000 }
.headleft{ float:left; width:25%; padding-left:10px; padding-top:15px; }
.headright{ float:right; width:70%; text-align:right; height:40px; }

a:link, .btn { text-decoration: none; color:#00b4ff;  -webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;	transition: all 0.3s ease-in-out;}
a:hover {text-decoration: none;color:#00b4ff;}
a:visited{color:#00b4ff}
a:focus, a:active, input:focus, input:active{ outline:0; border:none;}
.clear{ clear:both; overflow:hidden; height:0px;}

ul {margin:0px 0px 0px 0px; padding:0px 0px 0px 0px;list-style: none;}
li {margin:0px; padding:0px 0px 0px 0px;list-style-position: outside; }

/*-------nav-------*/
.trigger{display:none;}
#menu{width:675px; position:absolute; right:0px; top:20px; padding-right:10px;}
ul#nav{	margin:0px;padding:0px ;list-style-type:none;}
li#nav{	margin:0px;padding:0px ;list-style-type:none;}
#nav li{margin:0px; padding:0px;list-style:none;display:inline-block; }
#nav a{display: block; float:left; color:#ffffff; padding:0px 0px 0px 13px; font-size:18px; font-family: 'Lato', sans-serif; font-weight:300 }
#nav a:hover{ color:#00b4ff;}
#nav a.selected{display: block; float:left; color:#00b4ff; padding:0px 0px 0px 13px;font-size:18px; font-family: 'Lato', sans-serif; font-weight:300}

/*-------top section-------*/
#homesection {width:100%; top:100px;z-index:1500; position:absolute}
#topsection {width:100%; height:1000px;  text-align:center; z-index:1000;}
#subsection {width:95%; margin:20px auto 10px auto; font-size:20px; font-family: 'Lato', sans-serif; font-weight:300 }
a.thumb{ width:137px; height:137px; float:left; margin-right:10px; margin-bottom:10px;  -moz-opacity: 0.7; opacity:.70;filter: alpha(opacity=70);}
a.thumb img { width:100%; height:100%; }
a.thumb:hover{  -moz-opacity: 1; opacity:1;filter: alpha(opacity=100);}
a.thumbbig{ width:237px; height:237px; float:left; margin-right:10px; margin-bottom:10px;  -moz-opacity: 0.7; opacity:.70;filter: alpha(opacity=70);}
a.thumbbig img { width:100%; height:100%; }
a.thumbbig:hover{  -moz-opacity: 1; opacity:1;filter: alpha(opacity=100);}


/*-------map-------*/
#contact {width:85%; margin:20px auto 10px auto; font-size:20px; font-family: 'Lato', sans-serif; font-weight:300; text-align:center }
#map{width:100%; height:800px; display:block; padding-top:56px; margin:20px auto 0px auto}
div.infoBubble{ color:#ffffff; font-size:10px; }
.col{float: left; padding-right:30px;}
/*------------------- transition between full and tablet.-------------------  */
@media screen and (min-width:960px) and (max-width:1064px) {	
#nav a,#nav a.selected{padding:0px 0px 0px 10px; font-size:1em;}
#topsection {height:900px;}

a.thumb { width:13.3%; margin-right:1.1%; margin-bottom:1.1%}
a.thumb:nth-child(7n+2) { margin-right:0%}
a.thumbbig { width:13.3%; margin-right:1.1%; margin-bottom:1.1%}
a.thumbbig:nth-child(7n+2) { margin-right:0%}
}

@media screen and (min-width:769px) and (max-width:959px) {	
#nav a,#nav a.selected{padding:0px 0px 0px 10px; font-size:0.8em;}
#menu{width:540px; }
h1{ font-size:45px;}
#menu h2{ font-size:22px; }
#topsection {height:500px;}

}

@media screen and (max-width: 800px) {
a.thumb, a.thumb:nth-child(7n+2){ width:19%; margin-right:1.25%; margin-bottom:1.25%}
a.thumb:nth-child(5n+2) { margin-right:0%}
a.thumbbig, a.thumbbig:nth-child(7n+2){ width:25%; margin-right:1.25%; margin-bottom:1.25%}
a.thumbbig:nth-child(5n+2) { margin-right:0%}
}

/*------------------- TABLET max width of 768 pixels.-------------------  */
@media screen and (max-width: 768px) {
#nav a,#nav a.selected{padding:0px 0px 0px 10px; font-size:0.8em;}
#menu{width:540px; }
h1{ font-size:45px;}
#menu h2{ font-size:22px; }
#map{height:700px;}
#topsection {height:500px;}
	
a.thumbbig, a.thumbbig:nth-child(7n+2){ width:33%; margin-right:1.25%; margin-bottom:1.25%}
a.thumbbig:nth-child(5n+2) { margin-right:1.25%}

}

/*------------------- TABLET max width of 700 pixels.-------------------  */
@media screen and (max-width: 700px) {
#nav li{margin:0px 0px 0px 0px; padding:0px;list-style:none;display:block;float:none; text-align:right }
#nav a,#nav a.selected{padding:0px; margin-top:5px; font-size:0.9em;display: block; float:none;}
#menu h2{ display:none;}
.toggle_container {position:absolute;  right: 0px; top:50px; margin: 0px; /*for full menu inc about clients blog height: 210px;*/height:215px;padding:0px;overflow: hidden;clear: both; width:25%; display:none; background-color:#000000; z-index:1900 }
.trigger{margin-top: 10px;height: 44px;width: 50px; float:right; margin-right:10px; display:block;}
.trigger a {height: 35px; text-decoration: none; display: block; padding:0px 0px 0px 28px; background:url(media/menunav-bg.png) no-repeat right 0px;background-size: 35px 35px; }
.trigger a:hover,.trigger a.opened:hover { -moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80); }
.trigger a.opened { height: 44px; text-decoration: none; display: block;  padding:0px 0px 0px 28px; background:url(media/menunav-bg-closed.png) no-repeat right 0px;background-size: 35px 35px; }
h3{  padding-top:200px; font-size:40px; }
#topsection {height:500px;}
#map{height:700px;}

}

/*------------------- MOBILE max width of 480 pixels.-------------------  */
@media screen and (max-width: 480px) {
#nav li{margin:0px 0px 0px 0px; padding:0px;list-style:none;display:block;float:none; text-align:right }
#nav a,#nav a.selected{padding:0px; margin-top:5px; font-size:0.9em;display: block; float:none;}
#menu h2{ display:none;}
#menu{width:480px; position:absolute; right:0px; top:20px; padding-right:10px; }
.toggle_container {position:absolute;  right: 0px; top:50px; margin: 0px; height:210px;padding:0px;overflow: hidden;clear: both; width:30%; display:none; }
.trigger{margin-top: 10px;height: 44px;width: 50px; float:right; margin-right:10px; display:block;}
.trigger a {height: 44px; text-decoration: none; display: block; padding:0px 0px 0px 28px; background:url(media/menunav-bg.png) no-repeat right 0px;background-size: 35px 35px; }
.trigger a:hover,.trigger a.opened:hover { -moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80); }
.trigger a.opened { height: 44px; text-decoration: none; display: block;  padding:0px 0px 0px 28px; background:url(media/menunav-bg-closed.png) no-repeat right 0px;background-size: 35px 35px; }
#map{height:500px;}
h3{  padding-top:100px; font-size:30px; }
#topsection {height:200px;}
#contact { font-size:16px;}

a.thumb, a.thumb:nth-child(7n+2), a.thumb:nth-child(5n+2) { width:32.2%; margin-right:1.7%; margin-bottom:1.7%}
a.thumb:nth-child(3n+2) { margin-right:0%}
a.thumbbig, a.thumbbig:nth-child(7n+2), a.thumbbig:nth-child(5n+2) { width:48.3%; margin-right:1.7%; margin-bottom:1.7%}
a.thumbbig:nth-child(3n+2) { margin-right:1.7%}


}
/*------------------- MOBILE max width of 320 pixels.-------------------  */
@media screen and (max-width: 320px) {
#nav li{margin:0px 0px 0px 0px; padding:0px;list-style:none;display:block;float:none; text-align:right }
#nav a,#nav a.selected{padding:0px; margin-top:5px; font-size:0.9em;display: block; float:none;}
#menu h2{ display:none;}
#menu{width:320px; position:absolute; right:0px; top:20px; padding-right:10px;  }
.toggle_container {position:absolute;  right: 0px; top:50px; margin: 0px; height:210px;padding:0px;overflow: hidden;clear: both; width:45%; display:none; }
.trigger{margin-top: 10px;height: 44px;width: 50px; float:right; margin-right:10px; display:block;}
.trigger a {height: 44px; text-decoration: none; display: block; padding:0px 0px 0px 28px; background:url(media/menunav-bg.png) no-repeat right 0px;background-size: 35px 35px; }
.trigger a:hover,.trigger a.opened:hover { -moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80); }
.trigger a.opened { height: 44px; text-decoration: none; display: block;  padding:0px 0px 0px 28px; background:url(media/menunav-bg-closed.png) no-repeat right 0px;background-size: 35px 35px; }
.headleft h1{ font-size:30px}
#map{height:500px;}
h3{  padding-top:80px; font-size:25px; }
#topsection {height:200px;}
#contact { font-size:16px;}

}

#accordion li div.accordioncontent { -webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out; }


#accordion{
    width: 33%;
    margin: 0px;
    padding: 0px;
    list-style: none;
    position: fixed;
  top: 17%;
  left: 33.33%;

}
#accordion h2{
    font-size: 12pt;
    margin: 0px;
    padding: 10px;
    background: #000;
    color:#00a3e8;
    border-bottom: 1px solid #fff;
    border-radius: 25px;
}
#accordion li div.accordioncontent{
    display: none;
    padding: 10px;
    background: #000;
    border: 1px solid #ddd;
    border-radius: 25px;
    color: #00a3e8;
}
#accordion li:hover div.accordioncontent{
    display: inherit;
}