body {
	font-family: 'Calibri';
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
	background: #000 url(IMG/body_background_dark.png) repeat scroll top left;
	margin: 0px;
	padding: 0px;
	color: #FFF;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
	padding: 0;
	margin: 0;
}
h1 {
	font-weight: normal;
	font-stretch:narrower;
	font-family: 'Calibri';
	font-size: 22px;
	line-height: 1;
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px;
}
h2 {
	margin-top: 0;
	margin-left: 80px;
	font-size: 36px;
	font-stretch:narrower;
	font-variant:small-caps;
	text-transform: uppercase;
	padding-right: 15px;
	padding-left: 15px;
    color:#fef200;
}
h3 {
	margin-top: 0;
	margin-left: 80px;
	font-size: 36px;
	font-stretch:narrower;
	font-variant:small-caps;
	text-transform: uppercase;
	padding-right: 15px;
	padding-left: 15px;
}
h4 {
	margin-top: 0;
	margin-left: 10px;
	font-size: 30px;
	font-variant:small-caps;
	text-transform: uppercase;
	padding-right: 15px;
	padding-left: 15px;
}
h5 {
    position:relative;
    display:block;
    width:80%;
    margin:0 auto;
    padding:10px 0;
    font-family: 'Calibri';
    font-weight:normal;
    font-size:1.5rem;
    color:#FFF;
    text-transform:uppercase;
    letter-spacing:3px;
}
h5:after {
    content:'';
    position:absolute;
    visibility:visible;
    top:500;
    left:0;
    width:0%;
    height:1px;
    background:white;
    -webkit-transition:width 0s;
    -moz-transition:width 0s;
    -o-transition:width 0s;
    transition:width 0s;
}
p {
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px; 
}
a img { 
	border: none;
}
a:link {
	color: #fef200;
	text-decoration:none;
}
a:visited {
	color: #fef200;
	text-decoration:none;
}
a:hover, a:active, a:focus { 
	color:#fef100;
	text-decoration:none;
}
li {
	background:#FFF;
	color:#000;
	list-style:none;
	border: #373026 thin solid;
}
li h1{
	padding: 10px 200px 10px 200px;
	letter-spacing:1px;
}
li h2{
	padding: 10px 200px 10px 200px;
}
hr.style1 { 
  border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #000, #FFF, #000);
  background-image: -moz-linear-gradient(left, #000, #FFF, #000);
  background-image: -ms-linear-gradient(left, #000, #FFF, #000);
  background-image: -o-linear-gradient(left, #000, #FFF, #000); 
}
/* ~~ container surrounds the other divs ~~ */
.container {
	font-family: 'Calibri';
	letter-spacing:1px;
	width: 80%;
	background: #000;
	margin: 0 auto;
}
.header {
	padding-top:10px;
	text-align: center;
	visibility:visible;
	background: #000;
}
/* ~~ misc div placements ~~ */
.yellow {
	color: #fef100;
}
.dropdown {
	text-align: center;
	visibility:visible;
	background: #000;
}
.commer {
	width: 100%;
	padding-bottom:2%;
	background: url(IMG/commercial_bg.jpg) top center no-repeat;
}
.resi {
	width: 100%;
	padding-bottom:2%;
	background: url(IMG/RES_033.jpg) top center no-repeat;
}
.tops {
	margin-top:-112px;
}
.bottoms {
	margin-bottom:0px;
}
.tops2{
	margin-top:0;
}
.content {
	width:50%;
	float:left;
}
.blog {
	width:50%;
	float:right;
}
.pright {
	width:58%;
	float:right;
	padding: 2%;
}
.pleft {
	width:38%;
	float:left;
	padding: 2%;
	white-space:nowrap;
}
.contact {
	font-size:20px;
	width:auto;
	border: #FFF thin solid;
}
.legals {
	width:100%;
	position:relative;
	bottom:0 auto;
	float:right;
	color:#CCC;
}
/* ~~ The footer ~~ */
.footer {
	width: 0 auto;
	margin-bottom: 0 auto;
	color:#F5F5F5;
	padding: 0;
	background: #000;
}
.smlist {
	text-align:left;
	margin: 0 auto;
	width: 60%;
	background:#000;
	color:#FFF;
}
.smlist2 {
	list-style-type: square;
	line-height:110%;
	text-align:left;
	margin: 0 auto;
	width: 80%;
	background:#FFF;
	color:#000;
}
.box {
    position: relative;
    margin: 10px 10px 10px 10px;
    text-align:center;
    background: #000;
	color:#FFF;	
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px; 
	border-radius: 8px; 
	border: #373026 thin solid; 
}
.box img{
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px; 
	border-radius: 8px; 
	border: #FFF thin solid;
	white-space:nowrap;
	padding: 4px 4px 4px 4px;
	vertical-align:middle;
}
.box p{
	padding-left:200px;
	padding-right:200px;
}
.box2 {
    margin-left: auto;
    margin-right: auto;
	padding-left:.4%;
	white-space:nowrap;
    position:relative;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px; 
	border-radius: 8px;  
}
.on{
	white-space:nowrap;
	color:#000;
	background: #444;
    display: block;
    font: 'Calibri';
	font-size:2vw;
	font-style: oblique;
    padding: 0;
    text-align: center;
}
/* ~~ menu list ~~ */
nav ul {
	white-space:nowrap;
	-webkit-font-smoothing:antialiased;
	color:#fef200;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
	overflow: hidden;
}
nav li {
	white-space:nowrap;
    float:left;
    margin: 0;
    padding: 0;
    position: relative;
    width: 33.33%;
	overflow: hidden;
}
nav a {
	white-space:nowrap;
	background: #333;
    display: block;
    font: 'Calibri';
	font-size: 2vw; 
    padding: 0;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}
nav .dropdown:after {
}
nav .dropdown:hover:after{
}
nav li:hover a {
	white-space:nowrap;
    background: #444;
}
nav li ul {
	white-space:nowrap;
	overflow: hidden;
	background: #333;
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}
nav li:hover ul {
	white-space:nowrap;
	overflow: hidden;
    opacity: 1;
    top: 50px;
    visibility: visible;
}
nav li ul li {
	white-space:nowrap;
	overflow: hidden;
    float: none;
    width: 100%;
}
nav li ul a:hover {
	white-space:nowrap;
    background: #444;
	overflow: hidden;
}
/* contact form */
form.email p {
font-size: 18px;
padding: 0 0 10px 0;
margin: 0;
}
form.email input, form.email textarea {
font-family: 'Calibri';
font-size: 18px;
margin: 0 0 20px 0;
}
form.email input {
background: #f5f5f5;
padding: 5px;
border: 1px solid #bbb;
border-radius: 5px;
}
form.email textarea {
background: #f5f5f5;
padding: 5px;
border: 1px solid #bbb;
border-radius: 5px;
width: 400px;
height: 220px;
}
form.email input.send {
color: #fff;
background: #222;
border: #000;
padding: 10px 25px 10px 25px;
cursor: pointer;
}
/* Clearfix */
.cf:after, .cf:before {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
}​
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  
	float: right;
	margin-left: 8px;
}
.fltlft { 
	float: left;
	margin-right: 8px;
}
.clearfloat { 
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
/* floating images */
*, *:before, *:after {
    margin:0;
    padding:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
#gallery {
	background: #FFF;
	white-space:nowrap;
    position:relative;
    width:88%;
    height:90%;
    top: 20px;
    margin:0 auto;
    overflow:hidden;
    padding-top:75px;
    -webkit-transform:translate3d(0, 0, 0);
    -moz-transform:   translate3d(0, 0, 0);
    -ms-transform:    translate3d(0, 0, 0);
    -o-transform:     translate3d(0, 0, 0);
    transform:        translate3d(0, 0, 0);
}
#gallery h6 {
    position:absolute;
    top:50px;
    left:0;
    right:0;
    text-align:center;
    font-family: 'Calibri';
    font-size:2rem;
    line-height:3rem;
    font-weight:300;
    color:#333;
    text-transform:uppercase;
    letter-spacing:3px;
}
#gallery h6 span  {
    display:block;
    background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#333), to(#333));
    background-image:-webkit-linear-gradient(#333, #333);
    background-image:-moz-linear-gradient(#333, #333);
    background-image:-o-linear-gradient(#333, #333);
    background-image:linear-gradient(#333, #333);
    background-size:90px 1px;
    background-repeat:no-repeat;
    background-position:50% 100%;
}
#gallery > figure {
	white-space:nowrap;
    position:absolute;
    width:100%;
    height:100%;
}
button {
	white-space:nowrap;
    position:absolute;
    top:-70px;
    width:25%;
    height:50px;
    border:0;
    background:#333;
    cursor:pointer;
    font-family: 'Calibri';
    font-size:2rem;
    font-weight:200;
    color:#CCC;
    z-index:9;
    -webkit-transition:all .15s;
    -moz-transition:all .15s;
    -o-transition:all .15s;
    transition:all .15s;
}
.one button {left:0;}
.two button {left:25%;}
.three button {left:50%;}
.four button {left:75%;}
.five button {left:67%;}
.six button {left:83%;}
.one figcaption,
.two figcaption,
.three figcaption,
.four figcaption,
.five figcaption, 
.six figcaption
{
    position:absolute;
    width:100%;
    display:block;
    top:0;
    text-align:center;
    z-index:2;
    -webkit-transform:translateY(100%);
    -moz-transform:translateY(100%);
    -ms-transform:translateY(100%);
    -o-transform:translateY(100%);
    transform:translateY(100%);
    -webkit-transition:all .25s;
    -moz-transition:all .25s;
    -o-transition:all .25s;
    transition:all .25s;
}
figure img {
	width:100%;
	height:100%;
    position:absolute;
    top:-20px;
	padding-bottom:5%;
    left:0;
    right:0;
    -webkit-transform:translateY(100%);
    -moz-transform:translateY(100%);
    -ms-transform:translateY(100%);
    -o-transform:translateY(100%);
    transform:translateY(100%);
    -webkit-transition:all .1s;
    -moz-transition:all .1s;
    -o-transition:all .1s;
    transition:all .1s;
}
button:focus {
    outline:none;
    color:rgba(255,255,255,1);
}
button::-moz-focus-inner {
    border: 0;
}
button:focus ~ img {
    -webkit-transform:translateY(0px);
    -moz-transform:translateY(0px);
    -ms-transform:translateY(0px);
    -o-transform:translateY(0px);
    transform:translateY(0px);
}
button:focus ~ figcaption {
    -webkit-transform:translateY(0px);
    -moz-transform:translateY(0px);
    -ms-transform:translateY(0px);
    -o-transform:translateY(0px);
    transform:translateY(0px);
    -webkit-transition:all .25s .12s;
    -moz-transition:all .25s .12s;
    -o-transition:all .25s .12s;
    transition:all .25s .12s;
}
button:focus ~ figcaption h4:after {
    width:100%;
    -webkit-transition:all .15s .5s;
    -moz-transition:all .15s .5s;
    -o-transition:all .15s .5s;
    transition:all .15s .5s;
}
/* ~~ image slider ~~*/
#slider {
    height:300px;
    width:100%;
    overflow:hidden;
    position:relative;
}
#images {
    width:500%;
    height:100%;
    margin:0 auto;
    position: absolute;
    animation: slide 20s infinite ease-in-out alternate;
}
#images li {
    float:left;
    width:20%;
    height:100%;
    margin-left:0px;
    list-style:none;
  /* Not Part of Slider */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
@keyframes slide {
	  0% { margin-left: 0%; }
   14% { margin-left: 0%; }
	 20% { margin-left: -100%; }
   34% { margin-left: -100%; }
	 40% { margin-left: -200%; }
   54% { margin-left: -200%; }
   	 60% { margin-left: -300%; }
   74% { margin-left: -300%; }
     80% { margin-left: -400%; }
   100% { margin-left: -400%; }
}