@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,400,300,300italic,700,500,500italic|Montserrat:400,700);
@import url(btn-animation.css);
@import url(page-animation.css);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);

body{ margin:0; padding:0; background:#000; }
body:before {  }
.page { width:100%; position:relative; float:left; }
.page:after { background:url(../images/body-bg.jpg) center center no-repeat; background-size:cover; opacity:0.22; position:absolute; left:0; top:0; height:100%; content:''; width:100%; }
.main-div { position:relative; z-index:1; float:left; width:100%; padding:0 0 150px 0; }
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;}
ul{ margin:0; padding:0; list-style:none;}
a{ text-decoration:none; outline:none;  -webkit-transition: all .2s ease-out; -moz-transition: all .2s linear;  transition: all .2s linear;}
h1,h2,h3,h4,h5,h6,p{ margin:0; padding:0;}
.clear{ clear:both;}
#header{ width:100%; float:left; padding:70px 6%;}
textarea{resize:none}
input,textarea{ outline:none}
.site-logo{ float:left; width:100%; text-align:center; }
.header-nav{ text-align:center; width:100%; float:left;}
.header-nav ul{ text-align:center; width:100%; float:left;}
.header-nav ul li{ display:inline-block; float:none; padding:0 30px;}
.header-nav ul li a{ position:relative; text-transform:uppercase; font-size:13px; font-family:'Montserrat'; color:rgba(250,250,250, 0.5); padding:17px 0; }
.header-nav ul li.current a:after{ position:absolute; bottom:0; left:50%; margin-left:-3px; width:6px; height:6px; background:#39baff; content:''; border-radius:50%;}
.header-nav ul li a:hover,
.header-nav ul li.current a{ color:#fff;}
.social-share{ float:right; text-align:right; margin-top:-33px; }
.social-share li{ display:inline-block; padding:0 5px}
.social-share li a{ color:rgba(255,255,255, 0.3); font-size:19px;}
.social-share li a:hover{ color:#fff;}
.container{ max-width:800px; margin:0 auto}
#main{ width:100%; float:left;}

.contentarea { padding-top:0;}
.page-contact .contentarea { padding-top:10px; }
.contentarea h1{ color:#fff; font-size:36px; font-family:'Roboto'; font-weight:500; font-style:italic; padding:0 0 27px 0;}
.contentarea p{ color:#fff; font-size:22px; font-style:italic; font-weight:300; line-height:24px; font-family:'Roboto'; padding:0 0 40px 0; }

ul.list-01 { padding:0; margin:0 auto; max-width:1080px; width:100%; }
ul.list-01 li { padding:50px 50px 10px 50px; margin:0; float:left; width:50%; text-align:center; }
ul.list-01 li img { max-width:100%; width:100%; }
ul.list-01 li b { font-family:'Montserrat'; font-size:13px; color:#fff; text-transform:uppercase; display:inline-block; padding-top:30px; }
ul.list-01 li .thumb { float:left; position:relative; }
ul.list-01 li .thumb:before { position:absolute; width:100%; height:100%; content:''; background:rgba(0,0,0, 0.7); -moz-transition: all .3s linear; -webkit-transition: all .3s linear; opacity:0; }
ul.list-01 li:hover .thumb:before { opacity:1; }
ul.list-01 li .btn-view { position:absolute; width:100%; left:0; top:50%; margin-top:-22px; }
ul.list-01 li .btn-view a { height:44px; line-height:44px; background:#fff; padding:0 30px; display:inline-block; font-size:13px; color:#000; font-family:'Montserrat'; font-weight:400; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; opacity:0; text-transform:uppercase; }
ul.list-01 li .btn-view a:hover { background:#39baff; color:#fff; }
ul.list-01 li:hover .btn-view a { opacity:1; }

.note { width:100%; text-align:center; color:#fff; font-family:'Roboto'; font-weight:300; font-style:italic; padding:60px 20px 0 20px; } 
.note a { color:#fff; }
.note a:hover { color:#39baff; }

#footer{ width:100%; float:left; padding:0 6% 0 6%; position:absolute; left:auto; bottom:6%; width:100%; }

#footer .copy { color:rgba(255,255,255, 0.5); font-weight:700; font-size:14px; font-family:'Montserrat';}
.text-center{ text-align:center}


@media only screen and (max-width: 1500px){
#footer { margin-top:0; padding-top:20px; }
}

@media only screen and (max-width: 999px){
.container{ max-width:700px;}

ul.list-01 li { padding:20px 30px; }
.contentarea { padding-left:20px; padding-right:20px; }

}

@media only screen and (max-width: 783px){
ul.list-01 li { width:100%; text-align:center; }
ul.list-01 li .thumb { width:100%; }

.site-logo { float:left; width:auto; }
.social-share { margin-top:0; }

}

@media only screen and (max-width: 768px){
#footer { bottom:50px; }
}

@media only screen and (max-width: 500px){
}

@media only screen and (max-width: 480px){
.site-logo { width:100%; text-align:center; padding-bottom:20px; }
.social-share { width:100%; text-align:center; }

}
@media only screen and (max-width: 340px){
}