body { font-family: 'Roboto', sans-serif; color: #2e2e2e; min-width: 330px; }

.logoDivider { background: url('images/logo-circles.png') no-repeat 50% 50% transparent; background-size: 50px auto; height: 50px; position: relative; margin: 45px 0; }
.logoDivider:before { content: ""; height: 1px; position: absolute; left: 2%; right: calc(50% + 33px); top: 50%; background-color: #d3d3d3; }
.logoDivider:after { content: ""; height: 1px; position: absolute; right: 2%; left: calc(50% + 33px); top: 50%; background-color: #d3d3d3; }

.vidbox { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; background: url('images/loader.gif') no-repeat 50% 50% transparent; } 
.vidbox iframe, .vidbox object, .vidbox embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

h1.bigSectionTitle { text-align: center; font-size: 36px; font-weight: 100; }
h2.bigSectionTitle { border-bottom: 1px dashed #ccc; font-size: 36px; font-weight: 600; margin-bottom: 23px; padding-bottom: 20px; text-align: center; }
p.bigSectionSubtitle { text-align: center; font-size: 17px; }

@media (max-width: 761px) { 
	h2.bigSectionTitle { font-size: 25px; }
	p.bigSectionSubtitle { font-size: 15px; }
}

/* ** HEADER ** */

.topBlackBar { background-color: #202020; font-size: 14px; line-height: 30px; }
.topBlackBar a { color: #fff; margin-right: 5px; }
.topBlackBar a:hover { text-decoration: none; color: #bcbcbc; }
.topBlackBar .fa { font-size: 18px; vertical-align: top; padding: 5px 0 0; }
.topBlackBar .top-phone { text-align: right; }
.topBlackBar .top-phone a { margin-right: 0; }
.topBlackBar .top-phone .fa { padding-left: 5px; }

.navbar-brand { float: none; margin: 0 auto; display: block; width: 100px; margin-top: 15px; }
.navbarHead { text-align: center; margin: 30px 0 15px; }
.navbar #main-menu { float: none; display: inline-block; text-align:center; border-top: 1px solid #d3d3d3; border-bottom: 1px solid #d3d3d3; letter-spacing: 1px; }
.navbar-nav .nav-item { float: none; display: inline-block; text-transform: uppercase; }
.nav-link { margin-left: .8rem; margin-right: .8rem; }
.navbar-light .navbar-nav .nav-link { color: #4b4b4b;font-size: 13px }

.navbar-toggle .icon-bar { background-color: #232323; }

@media (max-width: 761px) { 
	.topBlackBar { font-size: 12px; }
}

/* ** FOOTER ** */

#wrapper-footer { background-color: #202020; }
#footer-menu { padding: 0; margin: 0; }
#footer-menu .menu-item { float: none; display: block; list-style: none; }
#footer-menu .menu-item .nav-link { color: #c8c8c8; font-size: 14px; text-transform: uppercase; font-weight: 100; }
#footer-menu .menu-item .nav-link:hover { color: #0083ff; }
.footerLogo { text-align: right; }
.footerLogo img { width: 105px; max-width: 100%; height: auto; margin-bottom: 20px; }
.footerLogo p { color: #fff; text-transform: uppercase; font-weight: 100; font-size: 12px; margin: 0; }
.footerLogo p a { display: block; color: #a0a0a0; font-size: 18px; line-height: 21px; }
.footerLogo p a:hover { text-decoration: none; }
#wrapper-subfooter { text-align: right; }
#wrapper-subfooter p.footerAddress { font-size: 15px; margin-bottom: 4px; }
#wrapper-subfooter p.footerCopyright { font-size: 11px; text-transform: uppercase; }
@media (max-width: 543px) {
  #footer-menu { margin-bottom: 35px; }
}

/* ** HOMEPAGE ** */

#topFullVideoPlayer { width: 100% !important; height: auto !important; }
.homeVidBox { width: 100%; height: 0; padding-bottom: 49.815%; background-color: #242424; position: relative; }
.homeVidBox.hidePlayer #topFullVideoPlayer { display: none; }
.homeVidBox > video { display: block; }
.vidPlayBtn { display: none; }
.vidPlayBtn.active { display: block; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 5; }
.vidPlayBtn.active:before { content: "\f144"; font-family: FontAwesome; text-align: center; position: absolute; top: 50%; left: 50%; font-size: 60px; color: #fff; margin-left: -30px; margin-top: -35px; }
.vidPlayBtn.active.playShow { background-color: transparent; }
.vidPlayBtn.active.playShow:before { content: ""; }
@media (min-width: 544px) { 
	.homeVidBox { padding-bottom: 35.354%; }
}
@media (min-width: 992px) { 
	.homeVidBox { padding-bottom: 25%; }
}

#slick-top-slider { }
#slick-top-slider .slick-center .slide-h3 { color: #FFF; }
#slick-top-slider .slider { width: 100%; text-align: center; }
#slick-top-slider .slide-h3{ width: 1040px; background: #008ed6; border-left: 2px solid #fff; border-right: 2px solid #fff; }

#slick-top-slider .slick-slide{ opacity: 0.6; }
#slick-top-slider .slick-center{ display: block; opacity: 1; }

.introArea { margin-top: 40px; margin-bottom: 40px; text-align: center; }
.introArea h2 { margin-bottom: 25px; font-size: 36px; font-weight: 600; }
.introArea p { max-width: 80%; margin: 0 auto; }

.sub-heroes > div { padding: 0; border-left: 2px solid #fff; border-right: 2px solid #fff; border-top: 4px solid #fff; }
.sub-heroes h2,
.sub-heroes a,
.sub-heroes-text { margin-left: 15px; margin-right: 15px; }
.sub-heroes h2 { font-size: 17px; font-weight: 600; margin-top: 15px; margin-bottom: 15px; display: block; }
.sub-heroes-text { font-size: 13px; line-height: 1.4; margin-bottom: 14px; min-height: 120px; }
.sub-heroes a { text-transform: uppercase; font-size: 13px; color: #767676; }
.sub-heroes img { width: 100%; }

#clients-tiles { padding-bottom: 40px; }
.clients-tiles a:focus { outline: none; }
.clients-tiles img { -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: gray; opacity: 0.6; }
.clients-tiles img:hover { -webkit-filter: none; filter: none; filter: none; opacity: 1; }

#project-slider .slide-h3 { width: 1100px; }
#project-slider .slider > div { margin-right: 5px; }
#project-slider .slick-slide { opacity: 0.4;  }
#project-slider .slick-slide img { -webkit-filter: grayscale(100%); filter: grayscale(100%); filter: gray;  }
#project-slider .slick-center { display: block; opacity: 1; }
#project-slider .slick-center img { -webkit-filter: none; filter: none; filter: none; }

#project-slider .ps-row { padding: 0; border-top: 4px solid #fff; border-right: 4px solid #fff; border-left: 2px solid #fff; }
#project-slider .ps-row .ps-item:nth-child(1) { border-right: 2px solid #fff; }
#project-slider .ps-row .ps-item:nth-child(2) { border-left: 2px solid #fff; }
#project-slider .ps-item { padding: 0; }
#project-slider .ps-item-right { float:right; border-top: 4px solid #fff; border-right: 2px solid #fff; }

@media (max-width: 1199px) {  
	#slick-top-slider .slide-h3{ width: 820px; }
	#project-slider .slide-h3 { width: 960px; }
	.sub-heroes h2 { min-height: 42px; }
	.sub-heroes-text { min-height: 150px; }
}
@media (max-width: 991px) { 
	#slick-top-slider .slide-h3{ width: 640px; }
	.sub-heroes > div:nth-child(3),
	.sub-heroes > div:nth-child(4) { margin-top: 35px; }
	#project-slider .slide-h3 { width: 740px; }
	.sub-heroes h2 { min-height: auto; }
	.sub-heroes-text { min-height: 95px; }
}
@media (max-width: 761px) {  
	#slick-top-slider .slide-h3{ width: 500px; }
	#project-slider .slide-h3 { width: 530px; }
	#project-slider .ps-item-right { float:left; border-right: 4px solid #fff; border-left: 2px solid #fff; }
	.sub-heroes-text { min-height: 130px; }
	
	.introArea h2 { font-size: 25px; }
	.introArea p { max-width: 100%; font-size: 15px; }
	
	#slick-logo-slider { padding-left: 30px; padding-right: 30px; }
}
@media (min-width: 544px) { 
	#project-slider .ps-item-right { height:280px; }
	#project-slider .ps-row .ps-item { height:125px; }
}
@media (max-width: 543px) { 
	#slick-top-slider .slide-h3{ width: 86vw; }
	#project-slider .slide-h3 { /*width: 300px;*/ width: 86vw; }
	#project-slider .ps-row { border-left: 2px solid #fff; }
	#project-slider .ps-item-right { border-left: 2px solid #fff; }
	/*#project-slider .ps-row .ps-item:nth-child(1) { border-bottom: 4px solid #fff; border-right: 0; }
	#project-slider .ps-row .ps-item:nth-child(2) { border-left: 0; }*/
	
	#project-slider .ps-item-right { height: 150px !important; }
	#project-slider .ps-row .ps-item:nth-child(1),
	#project-slider .ps-row .ps-item:nth-child(2) { height: 74px !important; }
	
	.sub-heroes-text { min-height: auto; }
	.sub-heroes > div { margin-top: 35px; }
}


/* ** PORTFOLIO PAGE ** */

.backPortList { background-color: #e6e6e6; padding: 15px 0; text-align: center; }

.single-portfolio .entry-title { margin: 10px 0 40px; text-align: center; font-weight: 100; }

.port-slider .slick-slide { position: relative; }
.port-slider .slick-slide .port-slider-caption { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; background-color: rgba(255,255,255,0.65); padding: 10px 20px; font-weight: 600; color: #000; }
.port-slider-nav { border-top: 4px solid #fff; padding-bottom: 10px; }
.port-slider-nav .slick-slide { border-left: 2px solid #fff; border-right: 2px solid #fff; }
.port-slider-nav .slick-dots li { font-size: 12px; }
.port-slider-nav .slick-dots li button:before { font-size: 12px; }
.port-slider-nav .slick-dots li.slick-active button:before { color: #0083ff; }

.portLowerRow { margin: 40px 0; }


/* ** MODALS ** */

.modal-content { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
.modal-header { position: relative; border-color: #d3d3d3; }
.modalPostCat { position: absolute; left: 0; top: 0; background-color: #d8d8d8; font-weight: 100; padding: 4px 15px; }
.port-modal .modal-title { margin-top: 25px; width: calc(100% - 50px); float: left; }
.port-modal .close { font-size: 3.5rem; }
.port-modal .modal-footer .btn { background-color: #e6e6e6; font-weight: 100; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; }
.port-modal .modal-footer .moreBtn { background-color: #0183fd; color: #fff; }
.modal-footer { border-color: #d3d3d3; }

.modal-dialog { z-index: 10; }
.modalCloser { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; }

/* Full page with slider */

.page-template-fullwidthpage-withslider #full-width-page-wrapper.wrapper {padding:0}
.page-template-fullwidthpage-withslider h1 {margin-bottom:30px}
.page-template-fullwidthpage-withslider #main {margin:50px 30px }

.related-projects {margin-bottom:50px}
.related-projects h2 {margin-bottom:}
.related-projects div {position:relative;cursor:pointer;margin-bottom: 11px;}
.related-projects .project-pane {padding:3px; border:1px solid #ccc; height:200px;background-size:cover}
.related-projects span { background-color: #202020;bottom: 10px;  color: #fff; display: block; font-size: 14px; padding: 5px 10px 5px 11px; position: absolute; right: 0;}

.social-icons{
text-align:left;
font-size: 33px;
}
.social-icons a{display:inline-block;margin-right:6px}
.social-icons a > i {color:#202020}
.social-icons a:hover > i {color:#FD0000}

/* Slider general styles */

.slick-slide.slick-active { position: relative; }
.clients-tiles .slick-slide.slick-active:before,
.slick-slide.slick-active.slick-current:before { display: none; }
.slick-slide.slick-active:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer; z-index: 1; }

.slick-prev, .slick-next { width: 25px; height: 25px; }
.slick-prev:before, .slick-next:before { color: #7f7f7f; opacity: 1; font-size: 24px; font-family: FontAwesome; }
.slick-prev:before { content: "\f137"; }
.slick-next:before { content: "\f138"; }
.slick-prev:focus:before, .slick-next:focus:before { color: #7f7f7f; }
.slick-prev:hover:before, .slick-next:hover:before { color: #0183ff; }

.slider { height: 0; padding-bottom: 26%; background-color: #f0f0f0; overflow: hidden; }
.slider.homeMaSl,
.slider.noGrab { padding-bottom: 18%; background-color: #fff; }
.slider * { opacity: 0; }
.slider.slick-initialized { height: auto; padding-bottom: 0; background-color: transparent; overflow: visible; }
.slider.slick-initialized * { opacity: 1; }

/* Contact Page */

.contactArea > .row { margin-bottom: 20px; }
.contactArea a { color: #2e2e2e; }
.contactArea .fa { font-size: 20px; vertical-align: text-top; color: #0384ff; }
.contactArea .fa.fa-map-marker { color: #ff0101; }
.contactArea .wpcf7-form { }
.contactArea .wpcf7-form input,
.contactArea .wpcf7-form textarea { width: 90%; border: 1px solid #e3e3e3; background-color: #f9f9f9; margin-bottom: 10px; padding: 5px 10px; }
.contactArea .wpcf7-form input.wpcf7-submit { background-color: #02d13c; border: 1px solid #048127; text-transform: uppercase; color: #fff; letter-spacing: 1px; font-weight: 600; font-size: 20px; }

@media (max-width: 544px) { 
	.contactArea .wpcf7-form input,
	.contactArea .wpcf7-form textarea { width: 100%; }
}