body, html{height: 100%; overflow-x:hidden;}
body{font-family: proxima-nova, sans-serif;  padding:0; color:#333; font-size:16px;}
h1, h2, h3{ font-weight:200;}
h3{font-size:24px; color:#000; margin:0 0 15px;}
h2{font-size: 30px; color:#000; margin: 0 0 35px}
a, a img, button, input, select{outline:none !important;}
a:hover, a:focus{text-decoration:none;}
input, select, textarea, buttonP{outline: none !important;}
.wcontainer{width: 1062px; margin: 0 auto;}
.header{width: 100%; background:#fff; float:left;}
.homepage{margin:75px 0 0;}
.homepage .header{position: fixed; z-index: 100; top: 0;}
.logo{float: left; margin: 16px 0 13px;}
.navigation{float:right;}
.navigation ul{margin: 0; padding: 0;}
.navigation li{font-size: 20px; font-weight: 300; float:left; list-style: none;}
.navigation li a{color: #333; padding:23px 20px; float:left}
.navigation li:nth-last-child(1) a{padding-right:0}
.navigation li:nth-child(1) a, .navigation li:nth-child(1) a:hover{cursor: pointer}
.navigation li a:hover, .navigation li .active{color: #00acda;}
  .circle {
      width: 300px;
      height: 300px;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;  /* Optional border */
    }

  .square {
      width: 225px;
      height: 225px;
      border-radius: 50%;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;  /* Optional border */
    }

.page1{background: url(../images/slider9.jpg) no-repeat; background-size:cover !important;  background-position: center; background-attachment: fixed}
.page2{background: url(../images/slider8.jpg) no-repeat; background-size:cover !important;  background-position: center; background-attachment: fixed}
.page3{background:url(../images/slider4.jpg) no-repeat; background-size:cover !important;  background-position: center; background-attachment: fixed}
.page4{background:url(../images/slider5.jpg) no-repeat; background-size:cover !important;  background-position: center; background-attachment: fixed}
.page5{background:url(../images/slider6.jpg) no-repeat; background-size:cover !important;  background-position: center; background-attachment: fixed}
.page6{background:url(../images/slider1.jpg) no-repeat; background-size:cover !important;  background-position: center; background-attachment: fixed}
.page7{background:url(../images/slider2.jpg) no-repeat; background-size:cover !important;  background-position: center; background-attachment: fixed}


.blue2{font-size:30px; font-weight: 400; color: #00acda; line-height: 57px; margin: 40px 0 5px; } 
.blue3{font-size:72px; font-weight: 300; color: #00acda; line-height: 65px; margin: 160px 0 120px; }

.regular {font-weight: 300; line-height: 32px;}

.superscript {position: relative; bottom: 0.5em; font-size: 0.6em; font-weight: 400;}
.light {font-weight: 300;}
.img_width{width: 100%;}
.footer{padding: 22px 0 18px; bottom:-60px; right:0; width:100%; left:0;  opacity: 0; position: fixed;   z-index: 100; background: #fff; transition:all 0.2s ease-in; border-top: 1px solid #ddd}
.footer.open, .ipages_f{opacity:1; bottom:0;}
.ipages_f{position: relative; display: inline-block; bottom: 0 !important}
.socialmedia{float:left}
.socialmedia a{margin-right:25px}
.footer_info{float:right; font-size: 16px;}
.footer_info .separator{padding: 0 15px;}
.footer_info a{color:#333;}
.footer_info a:hover{color: #000}
.pt-section {display: table; height: 100%;}
.nav_toggle{display:none;}
#fp-nav.right{right:25px;}
#fp-nav ul li{margin-bottom: 13px;}
#fp-nav ul li a span, #fp-nav ul li a.active span, #fp-nav ul li a:hover span, #fp-nav ul li a.active:hover span{ width: 18px; height: 18px; margin: 0; background: none; border:2px solid #bababa}
#fp-nav ul li a.active span{background: #bababa; border-color:#bababa;}
.footer_nav{position:fixed; right:0; background:#f1f1f1;  padding:20px; margin:10px 0 0 0; display:block; bottom:0; z-index: 101;}
.footer_nav img{transition:all 0.2s ease-in; }
.footer_nav.rotate img{transform: rotate(180deg); transition:all 0.2s ease-in;}
.clients, .ourwork{width: 100%; float:left;  background: #fff;}
.clients ul{  padding: 0; display: table; background:#b7b7b7; margin: 0; border-collapse: separate; border-spacing: 0;  border-bottom:1px solid #b7b7b7;}
.clients li{list-style: none;  float:left; width:25%; background: #fff; border-top:1px solid #b7b7b7; border-right:1px solid #b7b7b7;  text-align: center; display: table-cell;}
.clients li img{ padding: 76px 10px; filter: grayscale(1);}
.clients li img:hover{filter: grayscale(0);}
.ourwork ul{margin: 0; padding: 0}
.ourwork li{list-style: none; width: 33.33%; float: left; position:relative; overflow: hidden}
.ourwork li .overlay{background:rgba(0,108,176,0.8); width: 100%; float:left; position:absolute; top:0; left: 0; right:0; bottom: 0; transition:all 0.2s ease-in-out; opacity:0;  }
.ourwork li:nth-child(2) .overlay{background: rgba(124,163,50,0.9);}
.ourwork li:nth-child(3) .overlay{background: rgba(215,27,36,0.9);}
.ourwork li:nth-child(4) .overlay{background: rgba(0,191,111,0.8);}
.ourwork li:nth-child(5) .overlay{background: rgba(0,108,176,0.8);}
.ourwork li:nth-child(6) .overlay{background: rgba(203,27,67,0.9);}
.ourwork li:nth-child(7) .overlay{background: rgba(0,108,176,0.8);}
.ourwork li:nth-child(8) .overlay{background: rgba(233,146,26,0.8);}
.ourwork li:nth-child(9) .overlay{background: rgba(0,108,176,0.8);}
.ourwork li:nth-child(10) .overlay{background: rgba(186,88,72,0.6);}
.ourwork li:nth-child(11) .overlay{background: rgba(203,27,67,0.9);}
.ourwork li:nth-child(12) .overlay{background: rgba(0,108,176,0.8);}




.ourwork li:hover .overlay{opacity:1; transform: scale(1)}

.ourwork li img{width: 100%;  }
.ourwork p{font-size: 30px; color: #fff; font-weight: 200; position: absolute; margin:0; bottom: 25px; left: 30px;}
.ourwork a{color: #fff;}
.contact h2{font-size: 50px; margin: 0; font-weight: 300;}
.contact h3{font-size: 30px; margin: 0 0 50px;}
.contact{width: 100%; float:left; padding: 60px 0 50px;}
.input_dv{ border:1px solid #b7b7b7; width: 33.33%; margin: 0 5px; padding:0 25px; color:#898989; display: table-cell;}
.input_dv input[type=text], .input_dv input[type=tel], .input_dv input[type=email],.input_dv textarea{border: none; font-family: proxima-nova, sans-serif; font-weight: 300; font-size: 20px; color: #666; width: calc(100% - 45px); padding: 27px 0 25px;}
.input_dv textarea{width: calc(100% - 45px)}
.input_dv .fa{font-size:30px;  width:38px; margin:25px 0; vertical-align: top;}
.input_dv .fa-envelope{font-size:26px;}
.float{width: 100%; float:left;}
.input_container{width:calc(100% + 20px); margin: 0 -10px; display:table; border-spacing: 10px 6px; }
.button{width:347px; height: 89px; cursor: pointer; border:none;  color:#fff; font-size: 24px; font-weight:300; background: #00acda; text-transform: uppercase}
.button:hover{background:#0bbae9}
.address{margin-top:50px; width: 100%; float:left; font-size: 20px; color:#000; font-weight: 200;}
.address h3{font-size: 24px; margin: 0; font-weight: 500; color:#000;}
.address p{margin: 20px 0; line-height: 28px;}
.address p a{color: #000;}
.address p a:hover{color:#333;}
.address .socialmedia{float: none;}
.proj_img{width: 100%; float: left; margin-bottom: 54px;}
.proj_img img{width: 100%;}
.project_page{padding: 0px 0; font-weight: 300;}
.project_page p{font-size: 20px; line-height:28px; font-weight: 300;}
.anchor_links{font-size: 24px; text-align: center; margin: 0px 0 0; padding: 15px 0; top:-60px; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea;}
.anchor_links ul{margin: 0; padding: 0;}
.anchor_links li{list-style: none; display: inline-block;}
.anchor_links a{margin: 0 28px; color:#888}
.anchor_links a:hover, .anchor_links .active{color: #000;}
.fixedlinks{position: fixed; top: 0; margin-top: 0; width: 100%; background: #fff; transition:top 0.3s ease-in;}
.margin_bottom_10{margin-bottom: 10px !important;}
.proj_cont{margin:42px 0 42px;}
.proj_cont p{padding: 0 128px;}
.fixed { position: fixed;  top: 0}

.homepage.gallery {overflow: hidden; height: 100%}
.homepage.gallery #projects {height: 100%}
.homepage.gallery #projects .slide {position: absolute; background-attachment: fixed; height: 0; -moz-transition: height 0.9s cubic-bezier(0.63, 0.64, 0.3, 1); -o-transition: height 0.9s cubic-bezier(0.63, 0.64, 0.3, 1); -webkit-transition: height 0.9s cubic-bezier(0.63, 0.64, 0.3, 1); transition: height 0.9s cubic-bezier(0.63, 0.64, 0.3, 1);}
.homepage.gallery #projects .slide.no-animation {-moz-transition: none !important; -o-transition: none !important;  -webkit-transition: none !important;  transition: none !important}
.homepage.gallery #projects .slide.active {height: 100%}
.homepage.gallery #projects nav {opacity: 1; display: block}
.homepage #wrap {top: 0; width: 100%;  height: 100%;
    -moz-transition: top 0.9s cubic-bezier(0.7, 0.01, 0.3, 1);
    -o-transition: top 0.9s cubic-bezier(0.7, 0.01, 0.3, 1);
    -webkit-transition: top 0.9s cubic-bezier(0.7, 0.01, 0.3, 1);
    transition: top 0.9s cubic-bezier(0.7, 0.01, 0.3, 1)
}

.homepage #projects { width: 100%}
.homepage #projects .slide { overflow: hidden; height: 100%; width: 100%;}
.homepage #projects .slide:nth-child(1) {z-index: 10}
.homepage #projects .slide:nth-child(2) {z-index: 9}
.homepage #projects .slide:nth-child(3) {z-index: 8}
.homepage #projects .slide:nth-child(4) {z-index: 7}
.homepage #projects .slide:nth-child(5) {z-index: 6}
.homepage #projects .slide:nth-child(6) {z-index: 5}
.homepage #projects .slide:nth-child(7) {z-index: 4}
.homepage #projects .slide:nth-child(8) {z-index: 3}
.homepage #projects .slide:nth-child(9) {z-index: 2}
.homepage #projects .slide:nth-child(10) {z-index: 1}
.homepage #projects nav {position: absolute; right: 24px; top: 40%; width: 18px; z-index: 1000; display: none;transition: opacity 0.5s}
.homepage #projects nav span {margin-bottom:6px; background-color:transparent}
.homepage #projects nav span.active {background: #ddd; }
.homepage #projects nav span.active:after {background-color: #ddd}
#projects nav span, .carousel nav span {cursor: pointer; display: inline-block; background-color: transparent;  height: 18px; width: 18px; border-radius: 50%; position: relative; -moz-transition: border-color 0.5s; -o-transition: border-color 0.5s; -webkit-transition: border-color 0.5s; transition: border-color 0.5s}
#projects nav span.active:after, .carousel nav span.active:after {background-color: transparent}
#projects nav span:after, .carousel nav span:after {height:18px; width:18px; position: absolute;    display: block; content: "";  background-color:transparent; border:2px solid #ddd; border-radius: 50%; transition: background-color 0.5s; }

.scrolltop{position:fixed; right:0; background:#f1f1f1;  width:60px; height: 60px; line-height: 58px; text-align: center; margin:10px 0 0 0;  bottom:20px; right:20px; z-index: 101; border-radius:100%; transition:all 0.5s ease-in-out; opacity: 0; cursor: default}
.anchor{height: 70px; margin-top:-70px; content: ''; visibility: hidden; display: block;}
/*.slide::before {content: ''; position: absolute; width: 100%; height: 100%; right: 0;  bottom: 0; left: 0; background: -moz-linear-gradient(top, transparent 60%, rgba(0, 0, 0, 0.65) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(100%, rgba(0, 0, 0, 0.65)));
  background: -webkit-linear-gradient(top, transparent 60%, rgba(0, 0, 0, 0.65) 100%);
  background: -o-linear-gradient(top, transparent 60%, rgba(0, 0, 0, 0.65) 100%);
  background: -ms-linear-gradient(top, transparent 60%, rgba(0, 0, 0, 0.65) 100%);
  background: linear-gradient(to bottom, transparent 60%, rgba(0, 0, 0, 0.65) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); 
}*/
.slide_caption{position: absolute; bottom: 100px; width: 100%; text-align: center;}
.slide_caption h2{color: #fff; font-size: 40px; margin: 0 0 5px;}
.slide_caption h3{color:#fff;}
.fullwidth{width: 100%;float: left;}
#map_container{position: relative;}
#map{height: 0; overflow: hidden; padding-bottom: 30.25%; padding-top: 30px; position: relative;}
.livemap{width: 100%; float:left;}
.livemap iframe{width: 100%; height: 500px; }
.width50{width: 50%}
.width33{width: 33.3333%;}
.arrow_down{display: none;}
.work_tbl{display: table; width: calc(100% - 30px); height: calc(100% - 30px);}
.work_tbl a{width: 100%; height: 100%; display: table-cell; vertical-align: bottom;}


div#sc_desktopView{
	display:block;
}

div#sc_mobileView{
	display:none; 
}

@media screen and (min-width:768px){
	.navigation{display:block !important;}
    .page8 h1, .page8 h3{padding-right: 210px;}
    .page8 h1{font-size:56px; color: #00acda; line-height: 57px; margin: 120px 0 26px; }
    .blue{font-size:56px; font-weight: 200; color: #00acda; line-height: 57px; margin: 50px 0 26px; }
    .page8 h3{margin: 0;}
    .narrow-block{max-width: 50%;}
}


@media screen and (max-width:1220px){
	.footer_info{padding-right: 60px;}
	.clients li img{width: 100%;}
    .page8 h1, .page8 h3{padding-right: 210px;}
    .page8 h1{font-size:56px; color: #00acda; line-height: 57px; margin: 120px 0 26px; }
    .blue{font-size:56px; font-weight: 200; color: #00acda; line-height: 57px; margin: 50px 0 26px; }
    
    .page8 h3{margin: 0;}
    
    
	
}
@media screen and (max-width:1120px){
	.wcontainer{width: 100%; padding-left:20px; padding-right:20px;} 
	.page5 h1, .page5 h3{padding-right:20px;}
	.clients li img{ padding: 46px 10px; }
	.page1{display: table;}
	.page5 .wcontainer{display: table-cell; vertical-align: middle;}
	.page5 h1{line-height: 36px; font-size: 32px;}
	.homepage.gallery #projects .slide.active {height:calc(100% - 75px)}
	.page5 h1, .page5 h3{padding-right:50px;}
    .page8 h1, .page8 h3{padding-right: 210px;}
    .page8 h1{font-size:56px; color: #00acda; line-height: 57px; margin: 120px 0 26px; }
    .blue{font-size:56px; font-weight: 200; color: #00acda; line-height: 57px; margin: 50px 0 26px; }
    .page8 h3{margin: 0;}
    
	
}
@media screen and (max-width:940px){
.page3{background-color: #f7f8f8;}
	.page4{background-color: #fffff;}
	.ourwork li{width: 50%;}
	.input_dv input[type=text], .input_dv textarea{padding:15px 0; font-size:18px;}
	.input_dv .fa{margin: 15px 0; font-size: 25px; width:30px;}
	.input_dv .fa-envelope{margin-top: 17px; font-size: 20px;}
	.input_dv{padding: 0 15px;}
	.proj_cont p{padding: 0;}
    .page8 h1, .page8 h3{padding-right: 210px;}
    .page8 h1{font-size:40px; color: #00acda; line-height: 40px; margin: 120px 0 26px; }
    .blue{font-size:40px; font-weight: 200; color: #00acda; line-height: 40px; margin: 120px 0 26px; }
    .page8 h3{margin: 0;}
    
}


@media screen and (max-width:767px){
	.navigation{width:100%; float:left; display:none;}
	.navigation li{width:100%; border-bottom:1px solid #dadada}
	.navigation li a{padding:8px 0; display: block; width: 100%;}
	.navigation li:nth-last-child(1){border-bottom: none;}
	.nav_toggle{position:absolute; cursor: pointer; right:20px; background:#1da3dd; border-radius:5px; padding:5px; margin:17px 0 0 0; display:block; }
	.footer .socialmedia, .footer_info{width:100%; text-align:center}
	.footer_info{margin-top:10px;}
	.footer{padding:15px 0;}
	.socialmedia a{margin: 0 12px;}
	.page5 h1, .page5 h3{padding-right:0;}
	.header{background: #fff; width: 100%; float:left;}
	#fp-nav{display: none;}
	.page5 h1{font-size: 28px !important; line-height: 32px; margin:0 0 15px}
	.page5 h3{font-size: 20px; }
	.footer_info{padding-right: 0;}
	.clients, .ourwork{margin: 0;}
	.clients li{width: 50%;}
	.footer_nav{background: #fff;}
	.ourwork li{width: 100%;}
	.input_dv{width: 100%; float: left; margin: 0 0 10px;}
	.input_container{border-spacing: 0}
	.address .col-sm-6 {margin-bottom: 30px;}
	.address .socialmedia a{margin:0 20px 0 0}
	.button{width: 100%; margin-top: 10px; height:60px}
	.homepage.gallery #projects .slide.active {height:calc(100% - 63px) !important}
	.footer{bottom:-80px;}
	.clients li img{  filter: grayscale(0);}
	/*.page2{background-attachment: fixed !important; background-size: auto !important}*/
	.anchor_links{visibility: hidden; font-size: 10px; margin: 0; position:relative}
	.slide_caption{bottom: 20px;}
	.homepage.gallery #projects nav{display: none;}
	.arrow_down{display: block;   background: url(../images/arrow_back.png) no-repeat left 7px bottom 12px; position: absolute; bottom: 8px; left: 50%; margin-left: -10px; z-index: 100; background-color: #fff; transform: rotate(180deg); text-align: left; width:34px; height: 34px; border-radius:3px;}
	.homepage.gallery{overflow: unset;}
	.footer_nav{display: none;}
	.footer{position:inherit; opacity: 1; float: left;}
	.homepage #wrap{height: calc(100% - 63px);}
	.page5{display: table;}
	.homepage .header{border-bottom: 1px solid #ddd;}
	.not-active { pointer-events: none; cursor: default;}
	.work_tbl{display: inherit; width: auto; height: auto;}
	.work_tbl a{width: auto; height: auto; display: inherit;}
    .page8 h1, .page8 h3{padding-right: 0px;}
    .page8 h1{font-size:40px; color: #00acda; line-height: 40px; margin: 120px 0 26px; }
    .blue{font-size:40px; font-weight: 200; color: #00acda; line-height: 40px; margin: 120px 0 26px; }
    .page8 h3{margin: 0;}
	div#sc_desktopView{
		display:none !important;
	}
	div#sc_mobileView{
		display:block !important; 
	}

}
@media screen and (max-width:600px){
	.footer_info a{display: block;}
	.footer_info .separator{display: none;}
	.footer_nav{padding: 5px 8px;}
	.footer{bottom:-120px;}
	#projects nav span:after, #projects nav span{width: 10px; height: 10px}
	.homepage #projects nav{width: 10px; right: 15px;}
	.width50, .width33{width: 100%}
	.page5 h1{margin-top: 0;}
    .page8 h1, .page8 h3{padding-right: 0px;}
    .page8 h1{font-size:32px !important; color: #00acda; line-height: 32px; margin: 60px 0 26px; }
    .blue{font-size:32px; font-weight: 200; color: #00acda; line-height: 32px; margin: 60px 0 26px; }
    .page8 h3{margin: 0;}
    
    

}
@media screen and (max-width:479px){
	.clients li{width: 100%; border:1px solid #b7b7b7; border-bottom: none;}
	.clients ul{display: block; margin:10px auto; width: 90%;}
	.ourwork p{bottom:15px; left:20px;}
    .slide .page5{font-size: 12px;}
    .page8 h1, .page8 h3{padding-right: 0px;}
    .page8 h1{font-size:32px !important; color: #00acda; line-height: 32px; margin: 60px 0 26px; }
    .blue{font-size:32px; font-weight: 200; color: #00acda; line-height: 48px; margin: 60px 0 26px; }
    .page8 h3{margin: 0;}
   .

	
}