/*
Theme Name: Cube
Theme URI: http://cubemedia.nz
Author: Hanyu Zhang
Description: Theme For Cube Media Company website
*/
@import url('https://fonts.googleapis.com/css?family=Exo+2:500,600,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');

html, body{
	overflow-x: hidden;
}
body{
	margin: 0 auto;
}
img{
	max-width: 100%;
	display: block;
	height: auto;
}
h1, h2, h3, h4, h5, h6, a{
	font-family: 'Exo 2', sans-serif;
}
p, ul, li{
	font-family: 'Open Sans', sans-serif;
}
.header-container{
	max-width: 1230px;
	padding-left: 15px;
	padding-right: 15px;
	display: block;
	margin: 0 auto;
}
.page-container{
	max-width: 1105px;
	padding-left: 15px;
	padding-right: 15px;
	display: block;
	margin: 0 auto;
}
.top-bar{
	background-color: #f8bb00;
	height: 40px;
}
.bar p {
	font-family: 'Exo 2';
	color: #ffffff;
	line-height: 38px;
	font-size: 17px;
	font-weight: 500;
	margin-bottom: 0px;
	text-align: right;
}
.bar p a{
	font-family: 'Exo 2';
	color: #ffffff;
	line-height: 20px;
	font-size: 18px;
	font-weight: 700;
}
.bar p a:hover{
	text-decoration: none;
}
.cutting-line{
	padding-left: 10px;
	padding-right: 10px;
}
.site-header{
	padding-top: 10px;
	padding-bottom: 10px;
	width: 100%;
	clear: both;
	display: table;
}
.site-branding{
	width: 30%;
	float: left;
	display: table;
}
#site-navigation{
	width: 70%;
	float: left;
	display: table;
}
ul#primary-menu{
	list-style-type: none;
	padding-left: 0px;
	float: right;
}
ul#primary-menu li{
	display: inline-block;
}
ul#primary-menu li a{
	padding: 10px 20px;
	font-family: 'Exo 2';
	color: #000000;
	font-size: 14px;
	font-weight: 700;
	line-height: 15px;
	letter-spacing: 1px;
}
ul#primary-menu li:last-child a{
	padding-right: 0px;
}
ul#primary-menu li a:hover{
	text-decoration: none;
	color: #f8bb00;
}
#site-navigation .menu-page-menu-container{
	display: table-cell;
	vertical-align: middle;
}
.site-footer{
	background-color: #2c2f36;
}
.footer-1, .footer-2, .footer-3{
	display: block;
	float: left;
}
.footer-1{
	width: 34%;
}
.footer-2, .footer-3{
	width: 33%;
}
.footer-inner{
	max-width: 900px;
	display: table;
	margin: 0 auto;
	width: 100%;
	padding-top: 80px;
	padding-bottom: 80px;
}
.footer-1 a img{
	width: 169px;
	height: 97px;
	display: block;
}
.footer-2 p > strong, .footer-3 p > strong{
	color: #fdfdfd;
	font-size: 16px;
	line-height: 26px;
	font-weight: 700;
}
.footer-2 p{
	font-family: 'Open Sans';
	color: #fdfdfd;
	font-size: 16px;
	line-height: 26px;
	font-weight: 400;
}
.footer-3 p a{
	font-family: 'Open Sans';
	color: #fdfdfd;
	font-size: 16px;
	line-height: 26px;
	font-weight: 600;
}
.footer-2 p a:hover, .footer-3 p a:hover{
	text-decoration: none;
}
.footer-bottom p, .footer-bottom a{
	color: #919191;
	font-size: 14px;
	font-weight: 400;
	line-height: 26px;
	text-align: center;
}
.footer-bottom{
	padding-top: 25px;
	padding-bottom: 25px;
	border-top: 1px solid #929292;
}
.banner-content{
	max-width: 830px;
	display: block;
	margin: 0 auto;
	padding-left: 15px;
	padding-right: 15px;
	height: 100%;
	position: relative;
}
.banner-content h1{
	color: #ffffff;
	font-size: 65px;
	font-weight: 700;
	line-height: 67px;
	position: absolute;
	bottom: 100px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.CTA{
	background-color: #2c2f36;
}
.CTA .page-container{
	display: table;
	padding-top: 40px;
	padding-bottom: 40px;
}
.CTA-left{
	width: 60%;
	display: block;
	float: left;
}
.CTA-left p{
	color: #f8bb00;
	font-size: 30px;
	font-weight: 500;
	line-height: 35px;
}
.CTA-right{
	width: 40%;
	display: table;
	float: left;
}
.CTA-right p{
	margin-bottom: 0px;
	display: table-cell;
	vertical-align: middle;
}
.CTA-right p a{
	color: #fefefe;
	font-size: 20px;
	font-weight: 700;
	line-height: 20px;
	display: block;
	border-radius: 3px;
	background-color: #f8bb00;
	border: 1px solid #f8bb00;
	padding: 15px 40px;
	max-width: 222px;
	margin: 0 auto;
	letter-spacing: 1px;
}
.CTA-right p a:hover{
	text-decoration: none;
	border: 1px solid #f8bb00;
	color: #f8bb00;
	background-color: unset;
}
.main-content{
	padding-top: 80px;
	padding-bottom: 65px;
}
.main-content p{
	color: #2c2f36;
	font-size: 26px;
	font-weight: 400;
	line-height: 36px;
}
.page-container .main-content {
	padding-left: 40px;
	padding-right: 40px;
}
.services{
	padding-top: 55px;
	padding-bottom: 100px;
}
.services h2{
	color: #f8bb00;
	font-size: 50px;
	font-weight: 700;
	line-height: 60px;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
}
.services-lists{
	width: 100%;
	display: table;
	padding-top: 65px;
}
.service{
	width: calc(50% - 20px);
	float: left;
	display: block;
}
.service:nth-of-type(2n){
	margin-left: 20px;
}
.service:nth-of-type(2n+1){
	margin-right: 20px;
}
.service .service-inner{
	padding-left: 75px;
	padding-right: 75px;
}
.service .service-inner h2{
	color: #ffffff;
	font-size: 50px;
	font-weight: 700;
	line-height: 60px;
	margin-top: 0px;
	margin-bottom: 30px;
}
.service .service-inner p{
	color: #ffffff;
	font-size: 18px;
	font-weight: 400;
	line-height: 27px;
	margin-bottom: 30px;
	text-align: center;
	letter-spacing: 1px;
}
.service .service-inner a{
	color: #f8bb00;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	display: block;
	margin: 0 auto;
	width: 110px;
	letter-spacing: 1px;
}
.service .service-inner a:hover{
	text-decoration: none;
}
.service-content{
	display: table-cell;
	vertical-align: middle;
}
.service-inner:hover{
	opacity: 0.9;
} 
.benefits{
	background-color: #f5f5f5;
	padding-top: 85px;
	padding-bottom: 85px;
}
.benefits h2{
	color: #f8bb00;
	font-size: 50px;
	font-weight: 700;
	line-height: 60px;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
}
.benefit-lists{
	display: table;
	width: 100%;
	padding-top: 50px;
}
.benefit-lists .benefit{
	width: 33.3334%;
	display: block;
	float: left;
}
.benefit .benefit-inner{
	max-width: 315px;
	margin: 0 auto;
}
.benefit .benefit-inner h4{
	color: #2c2f36;
	font-size: 30px;
	font-weight: 600;
	line-height: 35px;
}
.benefit .benefit-inner p{
	color: #2c2f36;
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
}
.project{
	padding-top: 80px;
	padding-bottom: 120px;
	display: table;
	width: 100%;
	background-color: #f5f5f5;
}
.project-inner{
	padding-top: 60px;
}
.project h2{
	color: #f8bb00;
	font-size: 50px;
	font-weight: 700;
	line-height: 60px;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
}
.gallery-lists{
	padding-top: 65px;
	display: table;
	width: calc(100% + 30px);
	padding-bottom: 85px;
	margin-left: -15px;
	margin-right: -15px;
}
.imglist-div{
	padding-left: 15px; 
	padding-right: 15px;
	width: 33.3333%;
	display: block;
	float: left;
	margin-top: 15px;
	margin-bottom: 15px;
}
.singleImage:before{
	background-color: rgba(9, 12, 13, 0.35);
    bottom: 0;
    content: "";
    left: 15px;
    position: absolute;
    right: 15px;
    top: 0;
    visibility: hidden;
}
.imglist-div{
	position: relative;
}
.imglist-div img{
	display: table-cell;
    left: calc((100% - 51px) / 2);
    position: absolute;
    top: calc((100% - 51px) / 2);
    vertical-align: middle;
    z-index: 9;
    visibility: hidden;
}
.imglist-div:hover .singleImage:before{
	visibility: visible;
}
.imglist-div:hover img{
	visibility: visible;
}
.compensate-for-scrollbar {
    margin-right: 0px !important;
}
.button-close,
.button-previous,
.button-next {
  position: absolute;
  width: 44px;
  height: 44px;
  text-align: center;
  line-height: 44px;
  color: #fff;
  text-decoration: none;
  border-radius: 50%;
  font-size: 16px;
}
.button-previous,
.button-next {
  top: 50%;
  margin-top: -22px;
  line-height: 42px;
}
.button-previous {
    left: 30px;
}
.button-next {
    right: 30px;
}
.button-close {
  top: 30px;
  right: 30px;
  font-size: 22px;
  color: rgba(255,255,255,0.8);
}
.fancybox-stage{
	left: 15px !important;
	right: 15px !important;
}
.content-header{
	width: 100%;
	padding-top: 105px;
	padding-bottom: 105px;
	background-color: #2c2f36;
}
.content-header .page-container h1{
	color: #f8bb00;
	font-size: 30px;
	font-weight: 500;
	line-height: 35px;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 0px;
}
.content-page{
	padding-top: 60px;
	padding-bottom: 120px;
}
.content-page h1{
	color: #2c2f36;
	font-size: 65px;
	font-weight: 700;
	line-height: 67px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.content-page p{
	color: #2c2f36;
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
}
.content-page ul{
	padding-left: 15px;
}
.content-page ul li{
	color: #2c2f36;
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
	padding-bottom: 15px;
}
.content-page ul li:last-child{
	padding-bottom: 0px;
}
.content-page h3{
	font-family: 'Open Sans';
	color: #2c2f36;
	font-size: 26px;
	font-weight: 400;
	line-height: 36px;
	margin-top: 50px;
	margin-bottom: 50px;
}
.two-image-columns{
	width: 100%;
	display: table;
	margin-top: 45px;
}
.image-box{
	display: block;
	float: left;
	width: calc(50% - 20px);
}
.image-box:nth-of-type(1){
	margin-right: 20px;
}
.image-box:nth-of-type(2){
	margin-left: 20px;
}
.animate1 {
    -webkit-transition: all 800ms linear 400ms;
    transition: all 800ms linear 400ms;
    -webkit-transform: translateY(0vw);
    transform: translateY(0vw);
    opacity: 1; 
}
.animate1.queued {
  	-webkit-transform: translateY(5vw);
  	transform: translateY(5vw);
  	opacity: 0; 
}
.animate2 {
    -webkit-transition: all 800ms linear 400ms;
    transition: all 800ms linear 400ms;
    -webkit-transform: translateY(0vw);
    transform: translateY(0vw);
    opacity: 1; 
}
.animate2.queued {
  	-webkit-transform: translateY(5vw);
  	transform: translateY(5vw);
  	opacity: 0; 
}
.page-template-tpl-project .project-inner{
	padding-top: 30px;
}
ul#primary-menu li.current-menu-item a{
	color: #f8bb00;
}
.bar p{
	letter-spacing: 1px;
}
.two-column{
	display: table;
	width: 100%;
}
.column-left{
	padding-right: 15px;
}
.column-right{
	padding-left: 15px;
}
.column-left, .column-right{
	width: 50%;
	float: left;
	display: block;
}
.content-page h2{
	color: #f8bb00;
	font-size: 30px;
	font-weight: 600;
	line-height: 35px;
	margin-bottom: 35px;
	margin-top: 35px;
}
.content-page p strong{
	color: #f8bb00;
	font-weight: 400;
}
.content-page p a{
	color: #2c2f36;
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
}
.content-page p a:hover{
	text-decoration: none;
}
#input_1_4, #input_1_2, #input_1_1 {
    height: 35px !important;
}
#input_1_4, #input_1_2, #input_1_1, #gform_1 textarea {
    width: 100% !important;
    border-width: 1px !important;
    border-color: #d9d9d9 !important;
    border-style: solid !important;
    background-color: #f9f9f9 !important;
}
#gform_submit_button_1 {
    color: #fefefe;
    font-size: 18px;
    font-weight: 700;
    line-height: 20px;
    display: block;
    border-radius: 3px;
    background-color: #f8bb00;
    border: 1px solid #f8bb00;
    padding: 10px 15px;
    max-width: 222px;
    letter-spacing: 1px;
}
#gform_submit_button_1:hover{
	background-color: white;
	color: #f8bb00;
	border: 1px solid #f8bb00;
}
label.gfield_label{
	color: #2c2f36 !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 30px !important;
	font-family: 'Exo 2', sans-serif !important;
}
.testimonials{
	padding-top: 60px;
	padding-bottom: 60px;
}
.testimonials h2{
	color: #414141;
	font-size: 36px;
	font-weight: 700;
	line-height: 35px;
	margin-top: 0px;
	margin-bottom: 30px;
}
.testimonials p{
	color: #2c2f36;
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
	max-width: 720px;
	width: 100%;
	margin: 0 auto;
	margin-bottom: 10px;
}
.testimonials p strong{
	color: #2c2f36;
	font-size: 18px;
	line-height: 30px;
	font-weight: 700;
	margin-top: 20px;
	margin-bottom: 20px;
	display: block;
}
.testimonials a{
	color: #f8bb00;
	font-size: 18px;
	font-weight: 400;
	line-height: 35px;
	display: block;
	text-align: center;
	width: 225px;
	margin: 15px auto;
}
.testimonials a:hover{
	text-decoration: none;
}
div#testimonials-slider.carousel.slide ol.carousel-indicators li{
	border-width: 2px;
	border-color: #f8bb00;
	border-style: solid;
	width: 10px;
	height: 10px;
	border-radius: 0px;
}
div#testimonials-slider.carousel.slide ol.carousel-indicators li.active{
	width: 10px;
	height: 10px;
	background-color: #f8bb00;
	margin: 1px;
}
div#testimonials-slider .carousel-indicators{
	bottom: 0px;
}
div#testimonials-slider.carousel.slide ol.carousel-indicators{
	max-width: 720px;
	width: 100%;
	display: block;
	margin: 0 auto;
	position: relative;
	left: unset;
}
ul#primary-menu.menu li{
	position: relative;
}
ul#primary-menu.menu li > ul.sub-menu{
	width: 210px;
	list-style-type: none;
	padding-left: 0px;
	/*border-bottom: 1px solid #ececec;*/
	position: absolute;
	z-index: 10;
	top: 28px;
	visibility: hidden;
	left: -45px;
}
ul#primary-menu.menu li:hover > ul.sub-menu{
	visibility: visible;
}
ul#primary-menu.menu li > ul.sub-menu li{
	display: block;
	clear: both;
    border-bottom: 1px solid #ececec;
	width: 100%;
	margin-bottom: 0px;
}
ul#primary-menu.menu li > ul.sub-menu li:last-child{
	border-bottom: 0px;
}
ul#primary-menu.menu li > ul.sub-menu li a{	
	background-color: #f8bb00;
	color: white;
	text-align: center;
	display: block;
	width: 100%;
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
    padding-bottom: 10px !important;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 10px !important;
    text-transform: capitalize;
    padding-top: 8px;
    padding-bottom: 8px;
}
ul#primary-menu.menu li > ul.sub-menu li a:hover{
	background-color: #e7aa01;
}
.mobmenu_content #mobmenuright .sub-menu{
	padding-left: 0px !important;
}
.mob-expand-submenu i{
	top: 20px !important;
}
.mobmenu .sub-menu li a{
	padding-left: 35px !important;
}
.mob-menu-slideout-over .mobmenu_content{
	padding-top: 55px !important;
}
@media(max-width: 1100px){
	.CTA-left p{
		font-size: 27px;
	}	
	#site-navigation{
		width: 75%;
	}
	.site-branding{
		width: 25%;
	}
	ul#primary-menu li a{
		padding-left: 13px;
		padding-right: 13px;
	}
}
@media(max-width: 900px){
	ul#primary-menu li a{
		padding-left: 10px;
		padding-right: 10px;
	}
	ul#primary-menu li a{
		padding-left: 5px;
		padding-right: 5px;
	}
}
@media(max-width: 991px){
	.CTA-left p{
		font-size: 27px;
	}
	.home-banner{
		height: 500px !important;
	}
	.banner-content h1{
		font-size: 55px;
	    margin-left: auto;
	    margin-right: auto;
	    position: relative;
	    line-height: 60px;
	    top: calc(50% - 100px);
	}
	.service{
		width: 520px;
		float: none;
		clear: both;
		margin-right: auto !important;
		margin-left: auto !important;
		margin-bottom: 30px;
	}
	.benefit-lists .benefit{
		width: 100%;
		float: none;
		clear: both;
	}
	.benefit .benefit-inner{
		margin: 0 auto;
		max-width: 320px;
		margin-bottom: 30px;
	}
	.benefit .benefit-inner h4, .benefit .benefit-inner p{
		text-align: center;
	}
	.imglist-div{
		width: 50%;
	}
}
@media(max-width: 767px){
	.column-left, .column-right{
		float: none;
		display: block;
		width: 100%;
		padding-left: 0px;
		padding-right:0px;
	}
	.singleImage:before{
		max-width: 320px;
    	margin: 0 auto;
		left: 0;
		right: 0;
	}
	.image-box{
		width: 100%;
		float: none;
		clear: both;
		margin-right: auto !important;
		margin-left: auto !important;
		max-width: 450px;
		margin-bottom: 25px;
	}
	.content-page h3{
		margin-bottom: 30px;
		margin-top: 30px;
	}
	.content-page h1{
		font-size: 50px;
    	line-height: 55px;
	}
	.mobmenu-push-wrap{
		padding-top: 0px !important;
	}
	.mob-menu-header-holder{
		position: absolute !important;
		height: 0px !important;
	}
	.mob-menu-logo-holder{
		display: none !important;
	}
	.site-branding{
		width: 100%;
	}
	.site-branding a img{
		margin: 0 auto;
	}
	.main-content{
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.services {
		padding-top: 30px;
		padding-bottom: 40px;
	}
	.services-lists{
		padding-top: 40px;
	}
	.benefits{
		padding-top: 45px;
		padding-bottom: 45px;
	}
	.benefit-lists{
		padding-top: 25px;
	}
	.project{
		padding-top: 30px;
		padding-bottom: 55px;
	}
	.project-inner{
		padding-top: 30px;
	}
	.CTA-left p{
		text-align: center;
	}
	.CTA .page-container{
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.CTA-left, .CTA-right{
		width: 100%;
		float: none;
		display: table;
	}
	.imglist-div{
		width: 100%;
		padding-left: 0px;
		padding-right: 0px;
	}
	.singleImage{
		max-width: 320px;
		margin: 0 auto;
	}
	.benefits h2, .project h2, .services h2{
		font-size: 40px;
		line-height: 40px;
	}
	.CTA-right p{
		display: table;
		margin: 0 auto;
		margin-top: 20px;
	}
	.CTA-right{
		height: unset !important;
	}
	.CTA-right p a{
		display: table;
		width: 225px;
	}
	.banner-content h1{
		line-height: 55px;
		font-size: 50px;
	}
	.footer-1, .footer-2, .footer-3{
		width: 100%;
		float: none;
		clear: both;
		display: block;  
		max-width: 220px;
    	margin: 30px auto;
	}
	.footer-inner{
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.footer-1 a img{
		margin: 0 auto;
	}
}
@media(max-width: 660px){
	.home-banner{
		height: 400px !important; 
	}
	.banner-content h1{
		font-size: 40px;
		line-height: 45px;
		top: calc(50% - 65px);
	}
	.cutting-line, .email-span{
		display: none;
	}
	.bar p{
		text-align: center;
	}
}
@media(max-width: 550px){
	.content-page h1 {
	    font-size: 40px;
	    line-height: 45px;
	}
	.service{
		width: 100%; 
	}
	.services-lists{
		display: block;
	}
	.service .service-inner{
		padding-left: 25px;
		padding-right: 25px;
	}
	.service .service-inner h2{
		font-size: 35px;
		line-height: 40px;
	}
	.page-container .main-content{
		padding-left: 0px;
		padding-right: 0px;
	}
	.main-content p{
		font-size: 22px;
		line-height: 28px;
	}
	.banner-content h1{
		font-size: 35px;
		line-height: 40px;
		top: calc(50% - 60px);
	}
}
#field_1_5 label{
	display: none;
}
#site-navigation{
	height: 91px;
}