/*
Theme Name:   Urban Habitats
Description:  Urban Habitats
Author:       Beans & Rice
Author URI:   beansandrice.co.nz
Version:      1.0.0

*/


/* ============================================================ */
/* ====================== File Directory ====================== */
/* ============================================================ */
/*

- Variables
- Type
- Grid
- Layouts
- Header
- Footer
- Pages
- Responsive

*/



/* =================================================== */
/* ==================== Variables ==================== */
/* =================================================== */

:root{
	--body_bg: #E3E8EB;
	--dark: #343A40;
	--darker: #373536;
	--primary: #F4801F;
	--secondary:#4B3F55;
	--link: #F4801F;
	--grey: #979797;
}



/* ========================================== */
/* ============= Helpers ==================== */
/* ========================================== */
.bg-dark{
	background-color: var(--dark) !important;
}

.bg-darker{
	background-color: var(--darker);
}

.bg-primary{
	background-color: var(--primary) !important;
}

.text-primary{
	color: var(--primary) !important;
}

.bg-shadow{
	-webkit-box-shadow: 10px 30px 50px 0 rgba(0,0,0,.1);
	-moz-box-shadow: 10px 30px 50px 0 rgba(0,0,0,.1);
	box-shadow: 10px 30px 50px 0 rgba(0,0,0,.1);
}



img{
	max-width: 100%;
}



/* ============================================== */
/* ==================== Type ==================== */
/* ============================================== */


h1{
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	color: var(--secondary);
	text-transform: uppercase;
	font-size: 3rem;
}

h1:not('.text-white') span,
h2:not('.text-white') span,
h3:not('.text-white') span,
h4:not('.text-white') span,
h5:not('.text-white') span,
h6:not('.text-white') span{
	color: var(--primary);
}

h2{
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 2.625rem;
	margin-bottom: 2.5rem;
}

h3{
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 1.5rem;
}

h4{
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 1.375rem;
	line-height: 1.454545;
	margin-bottom: 1.5rem;
	color: var(--primary);
}

h5{
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	font-size: 1.5rem;
}

h6{
	font-family: 'Montserrat', sans-serif;

}

b, strong{
	font-family: 'Montserrat', sans-serif;

}

i{
	font-family: 'Noto Serif', serif;
	font-weight: normal;
}

p{
	
}


@media( max-width: 768px){

	body{
		font-size: 0.875rem;
	}

	h1{
		font-size: 2rem;
	}
	h2{
		font-size: 1.5rem;
	}
	h3{
		font-size: 1.4rem;
	}
	h4{
		font-size: 1.3rem;
	}
	h5{
		font-size: 1.2rem;
	}


}

.link{
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
	color: var(--link);
	text-transform: uppercase;
	display: inline-block;
	max-width: 190px;
	letter-spacing: 1.9px;
	margin: 1.5rem 0;
	position: relative;
}
.link:after{
	content: '';
	display: inline-block;
	width: 80px;
	height: 12.8px;
	position: absolute;
	right: -100px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	background: url(assets/img/arrow.svg) no-repeat;
	-webkit-transition: right ease-in-out 0.5s;
	-o-transition: right ease-in-out 0.5s;
	-moz-transition: right ease-in-out 0.5s;
	transition: right ease-in-out 0.5s;
}
.link:hover{
	cursor: pointer;
}
.link:hover:after{
	right: -120px;
}

.link:focus{
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
}

input[type=button].link{
	-webkit-appearance: none;
	border: none;
	padding-left: 0;
	text-align: left;
}

a{
	color: var(--secondary);
}

a:hover{
	color: var(--link);
	text-decoration: none;
}

li{

}


.btn{
	font-family: 'Montserrat', sans-serif;
	text-transform: uppercase;
	font-weight: bold;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	padding: 1rem 2rem;
}

.btn.focus, 
.btn:focus{
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.btn.d-block{
	width: 100%;
}

.btn.btn-default{
	color: var(--secondary);
	border-color: #fff;
}

.btn.btn-primary:active,
.btn.btn-primary{
	background-color: var(--secondary);
	border-color: var(--secondary);
	color: #fff;
}
.btn.btn-primary:hover{
	background-color: var(--primary);
	border-color: var(--primary);
}

.btn.active{
	font-weight: 600;
	background-color: var(--dark);
	color: var(--primary);
}


/* ==================== Phone ==================== */
@media( max-width: 768px){
	.btn{
		font-size: .875rem;
	}
}







/* =============================================== */
/* ==================== Forms ==================== */
/* =============================================== */

.form-group{
	margin-bottom: 2rem;
}
.form-group.link{
	display: block;
}
.form-group.link:after{
	right: 0;
}
.form-group.link:hover:after{
	right: -20px;
}
.form-group.checkbox{
	margin-bottom: 1rem;
}
.form-group.checkbox span.wpcf7-list-item{
	margin-left: 0;
	margin-right: 1rem;
}
.form-group.checkbox input[type="checkbox"],
.form-group.checkbox input[type="radio"]{
	margin-right: 20px;
}
.form-control:not(.wpcf7-submit){
	font-size: 12px;
	border: none;
	border-bottom: solid thin var(--body_bg);
	padding-left: 0;
	padding-bottom: 1rem;
	-webkit-appearance: none;
}
select.form-control{
	text-transform: uppercase;
	color: var(--grey);
}
input[type="submit"].form-control{
	border:none;
	text-align: left;
	margin:0;
	padding-left: 0;
	padding-right: 3rem;
	z-index: 2;
	background: transparent;
}
.form-control:focus{
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
}
.form-control::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	color: var(--grey);
}
.form-control::-moz-placeholder { /* Firefox 19+ */
	color: var(--grey);
}
.form-control:-ms-input-placeholder { /* IE 10+ */
	color: var(--grey);
}
.form-control:-moz-placeholder { /* Firefox 18- */
	color: var(--grey);
}
textarea.form-control{
	height: 150px;
}



/* ==================== File ==================== */
div.wpcf7 input[type="file"]{

}


/* ==================== Checkbox ==================== */
.wpcf7-form .wpcf7-checkbox label,
.wpcf7-form .wpcf7-radio label {
	position: relative;
	cursor: pointer;
}

.wpcf7-form .wpcf7-checkbox input[type=checkbox],
.wpcf7-form .wpcf7-radio input[type="radio"] {
	position: relative;
	visibility: hidden;
}

.wpcf7-form .wpcf7-checkbox input[type=checkbox] + span,
.wpcf7-form .wpcf7-radio input[type="radio"]  + span{
	color: var(--grey);
}

.wpcf7-form .wpcf7-checkbox input[type=checkbox] + span:before,
.wpcf7-form .wpcf7-radio input[type="radio"] + span:before {
	display: block;
	position: absolute;
	content: '';
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	height: 22px;
	width: 22px;
	top: 5px;
	border: 2px solid var(--grey);
}

.wpcf7-form .wpcf7-checkbox input[type=checkbox] + span:after,
.wpcf7-form .wpcf7-radio input[type="radio"] + span:after {
	display: block;
	position: absolute;
	content: '\2713';
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	height: 10px;
	width: 10px;
	top: 2px;
	left: 5px;
	visibility: hidden;
	font-size: 16px;
}

.wpcf7-form .wpcf7-checkbox input[type=checkbox]:checked + span:before,
.wpcf7-form .wpcf7-radio input[type="radio"]:checked + span:before {
	border: 2px solid var(--primary);
	background: var(--primary);
}

.wpcf7-form .wpcf7-checkbox input[type=checkbox]:checked + span:after,
.wpcf7-form .wpcf7-radio input[type="radio"]:checked + span:after {
	visibility: visible;
	color: #fff;
}



/* ============================================= */
/* ================= Structure ================= */
/* ============================================= */

body{
	font-family: 'Lato', sans-serif;
	background-color: var(--body_bg);
	color: var(--secondary);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
}


main:not(#fullpage){
	padding: 5rem 0;
	overflow: hidden;
}

@media (min-width: 1200px){
	.container {
		max-width: 1240px;
	}

	.home .container-fluid{
		padding-right: 3rem;
		padding-left: 3rem;
	}

	.home  .container-content{
		padding-right: 2rem;
		padding-left: 2rem;
	}

}

.container-content.full-height{
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-moz-box-orient: vertical;
	-moz-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	-moz-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	height: auto;
	min-height: 80vh;
	padding-top: -webkit-calc(8rem + 40px + 80px) ;
	padding-top: -moz-calc(8rem + 40px + 80px) ;
	padding-top: calc(8rem + 40px + 80px) ;
	padding-bottom: 8rem;
}


/* ============================================================ */
/* ========================== Layouts ========================= */
/* ============================================================ */



/* ============================================================ */
/* ======================= Intro Heading ====================== */
/* ============================================================ */

.intro-heading{
	padding: 6rem 0;
	margin-top: -webkit-calc(80px);
	margin-top: -moz-calc(80px);
	margin-top: calc(80px);
	background-color: #fff;
}
.intro-heading h1{
	margin-bottom: 2rem;
}
.intro-heading p{
	margin-bottom: 0rem;
}



/* ============================================================ */
/* ====================== Project Slider ====================== */
/* ============================================================ */
.project-slider{
	min-height: 500px;
}
.project-slider div {
	height: 100%;
	min-height: 500px;
}


/* ====================== Slick ====================== */
.project-slider .slick-prev, 
.project-slider .slick-next{
	width: 20px;
	height: 33px;
	z-index: 2;
}
.project-slider .slick-next:before,
.project-slider .slick-prev:before{
	content: '';
	display: block;
	width: 20px;
	height: 33px;
}
.project-slider .slick-next{
	right: 1rem;
}
.project-slider .slick-prev{
	left: 1rem;
}
.project-slider .slick-next:before{
	background: url(assets/img/ios-arrow-right.svg);
}
.project-slider .slick-prev:before{
	background: url(assets/img/ios-arrow-left.svg);
}
.project-slider .slick-dots{
	right: 1rem;
	bottom: 1rem;
	text-align: right;
	width: auto;
	display: inline-block !important;
	background-color: rgba(52, 58, 64, 0.8);
	padding: 0.7rem 1rem 0.7rem 1rem;
}

.project-slider .slick-dots li button:before{
	color: transparent;
	border: solid thin #fff;
	height: 12px;
	width: 12px;
	font-family: none;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	opacity: 1;
}
.project-slider .slick-dots li.slick-active button:before{
	color: var(--primary);
	background-color:  var(--primary);
	border: solid thin var(--primary);
}



/* ================================================== */
/* ====================== Card ====================== */
/* ================================================== */

.card{
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: none;
	padding: 3rem;
}
.card strong{
	color: var(--primary);
	margin-bottom: 1rem;
	font-size: 0.875rem;
}

.card h3{
	margin-bottom: 3rem;
}

.card.offset-top,
.card .offset-image-top{
	margin-top:  -webkit-calc(-4rem - 30px);
	margin-top:  -moz-calc(-4rem - 30px);
	margin-top:  calc(-4rem - 30px);
}


.parallax-mirror{
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}


@media( max-width: 768px){
	.card .offset-image-top{
		margin-top: 0;
		margin-bottom: 2rem;
	}
}


/* =========================================================== */
/* ====================== Content Block ====================== */
/* =========================================================== */

.content-block{
	padding: 5rem 0;
}


/* ================================================= */
/* ====================== CTA ====================== */
/* ================================================= */

.cta{
	padding: 5rem 0 0rem;
}


/* ======================================================== */
/* ====================== Supporters ====================== */
/* ======================================================== */

.supporters{

}


/* ======================================================== */
/* =================== Related Projects =================== */
/* ======================================================== */
.related-projects{

}

.related-projects .project-item{
	position: relative;
	width: 100%;
	height: 252.8px;
}




/* ================================================== */
/* ================== Social Links ================== */
/* ================================================== */


.social-links{
	padding: 0;
	margin-bottom: 0;
	list-style: none;
}

.social-links li{
	display: inline-block;
	padding: 1rem;
}
.social-links li a{
	font-size: 1.2rem;
	color: #fff;
}


/* ================================================= */
/* ================== Back To Top ================== */
/* ================================================= */
.back-to-top{
	display: none;
	position: fixed;
	bottom: 0rem;
	right: 1rem;
	background-color: var(--primary);
	padding: 0.5rem 1rem;
	cursor: pointer;
	z-index: 100;
}

.back-to-top i{
	position: relative;
	top: 2px;
	-webkit-transition: top ease-in-out 0.2s;
	-o-transition: top ease-in-out 0.2s;
	-moz-transition: top ease-in-out 0.2s;
	transition: top ease-in-out 0.2s;
}

.back-to-top:hover i{
	top: -1px;
}






/* =============================================== */
/* =================== Loading =================== */
/* =============================================== */
.loading{
	background-color: var(--body_bg);
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 2000;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-moz-box-orient: vertical;
	-moz-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}
.spinner {
	width: 70px;
	text-align: center;
}
.spinner > div {
	width: 18px;
	height: 18px;
	background-color: var(--primary);
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	-moz-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	-o-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
	animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
	-webkit-animation-delay: -0.32s;
	-moz-animation-delay: -0.32s;
	-o-animation-delay: -0.32s;
	animation-delay: -0.32s;
}
.spinner .bounce2 {
	-webkit-animation-delay: -0.16s;
	-moz-animation-delay: -0.16s;
	-o-animation-delay: -0.16s;
	animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% {
	-webkit-transform: scale(0) }
	40% {
		-webkit-transform: scale(1.0)
	}
}
@-moz-keyframes sk-bouncedelay { 0%, 80%, 100% { 
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		-moz-transform: scale(1.0);
		transform: scale(1.0);
	}
}
@-o-keyframes sk-bouncedelay { 0%, 80%, 100% { 
	-webkit-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		-o-transform: scale(1.0);
		transform: scale(1.0);
	}
}
@keyframes sk-bouncedelay { 0%, 80%, 100% { 
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	} 40% { 
		-webkit-transform: scale(1.0);
		-moz-transform: scale(1.0);
		-o-transform: scale(1.0);
		transform: scale(1.0);
	}
}





/* ============================================ */
/* ================ Top Bar =================== */
/* ============================================ */

/*.top-bar{
	font-family: 'Montserrat', sans-serif;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 200;
	background-color: var(--primary);
	padding: 0.375rem 0;
}
.top-bar ul{
	margin-bottom: 0;
}
.top-bar ul li{
	display: inline-block;
	margin-left: 1rem;
}
.top-bar ul li a{
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.5px;
	color: #fff;
}
.top-bar ul li a i{
	font-size: 12px;
	color: #fff;
	margin-right: 5px;
}
*/

/* ============================================ */
/* ================== Header ================== */
/* ============================================ */


header{
	background-color: var(--dark);
	/*	background-color: rgb(52, 58, 64, 0.5);*/
	padding: 16px 0;
}

header.header-fixed{
	position: fixed;
	width: 100%;
	top: 0px;
	left: 0;
	z-index: 200;
}

nav.navbar{
	padding: 0;
}

header .navbar-brand img{
	width: 340px;
	-webkit-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	transition: all ease 0.5s;
}
header .navbar-brand img.sm{
	width: 300px;
}

nav .navbar-nav .nav-item .nav-link{
	font-family: 'Montserrat', sans-serif;
	font-weight: normal;
	color: #fff;
	padding: .625rem 1rem;
}
nav .navbar-nav .nav-item.active .nav-link{
	color: var(--primary);
}

nav .navbar-nav .nav-item .nav-link i{
	font-size: 1.2rem;
}

.dropdown-menu{
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	padding: 0;
	background-color: var(--primary);
	border: none;
}
.dropdown-menu .dropdown-item{
	color: #fff;
	padding: .5rem 1.5rem;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item:focus,
.dropdown-menu .dropdown-item:hover{
	background-color: var(--dark);
	color:  var(--primary);
	outline: none;
}



/* ============================================ */
/* ================== Footer ================== */
/* ============================================ */

footer{
	padding: 1rem 0;
	font-size: 14px;
	background-color: var(--dark);
}
footer .social-links li{
	padding: 0rem 1rem;
}
footer .social-links li a{
	font-size: 2rem;
}
footer a{
	color: #fff;
}









/* ================================================ */
/* ================== Bottom Bar ================== */
/* ================================================ */

.bottom-bar .contact-details .details .text p,
.bottom-bar .contact-details .details{
	margin-bottom: 0;
}

.bottom-bar .contact-details .details{
	display: inline-block;
	margin: auto;
	max-width: 350px;
	padding: 2rem 0.5rem;
	-webkit-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	transition: all ease 0.5s;
}

.bottom-bar .contact-details .text a:hover{
	color: #fff;
}

.bottom-bar .contact-details .icon i{
	color: #fff;
}

.bottom-bar .contact-details .bg-dark:hover{
	background-color: var(--primary) !important;
}










/* ============================================ */
/* =================== Home =================== */
/* ============================================ */

#fullpage{
	opacity: 0;
	-webkit-transition: opacity 1s ease;
	-o-transition: opacity 1s ease;
	-moz-transition: opacity 1s ease;
	transition: opacity 1s ease;
}
#fullpage.show{
	opacity: 1;
}

#fullpage h1{
	font-size: 3rem;
	margin: 2rem 0;
}

#fullpage .section .slide{
	padding: 0 3rem;
}

#fullpage .section .bg-image{
	width: 100%;
	padding-bottom: 99%;
}

#fullpage .section .bg-image.full-height{
	width: -webkit-calc(100% + 6rem);
	width: -moz-calc(100% + 6rem);
	width: calc(100% + 6rem); 
	padding-bottom: 100vh;
}

#fullpage #section1 .fp-tableCell{
	vertical-align: bottom;
}

#fullpage #section1 .slide{
	padding: 0 0rem;
}

#fullpage #section1 .fp-tableCell h6{
	display: inline-block;
	padding: 1rem;
	margin-bottom: 1rem;
}





/* =================== Testimonials =================== */
#fullpage .section.testimonials h2{

}

/* =================== Contact =================== */
.contact-details .details{
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 1rem;
}
.contact-details .icon{
	display: inline-block;
	vertical-align: top;
	text-align: center;
	width: 80px;
}
.contact-details .icon i{
	font-size: 2rem;
	color: var(--primary);
}
.contact-details .text{
	display: inline-block;
	vertical-align: top;
	color: #fff;
}
.contact-details .text a{
	color: #fff;
}
.contact-details .text a:hover{
	color: var(--primary);
}
.contact-details .text h6{
	text-transform: uppercase;
	font-weight: normal;
}


/* =================== Dots =================== */
#fullpage .fp-slidesNav.fp-bottom{
	bottom: 0rem;
	padding: 1rem;
}
#fullpage .fp-slidesNav.fp-bottom ul{
	display: inline-block;
	background-color: rgba(52, 58, 64, 0.8);
	padding: 0.7rem 1rem 0.7rem 1rem;
}
#fullpage .fp-slidesNav ul li{
	margin-top: 0;
	margin-bottom: 0;
}
#fullpage .fp-slidesNav ul li a{
	display: inline;
}

#fullpage .fp-slidesNav ul li a span{
	background-color: transparent;
	border: solid thin #fff;
	height: 12px;
	width: 12px;
	margin: 0;
}
#fullpage .fp-slidesNav ul li a.active span{
	background-color:  var(--primary);
	border: solid thin var(--primary);
	margin: 0;
}

/* =================== Arrows =================== */
#fullpage .fp-controlArrow.fp-prev{
	background: url(assets/img/ios-arrow-left.svg);
	border: none;
	width: 20px;
	height: 33px;
}

#fullpage .fp-controlArrow.fp-next{
	background: url(assets/img/ios-arrow-right.svg);
	border: none;
	width: 20px;
	height: 33px;
}









/* ============================================= */
/* ================== Projects ================== */
/* ============================================= */

.filter-wrapper{
	padding: 0rem 0 3rem;
}

.filter-wrapper button{
	margin-bottom: 2rem;
	padding: 1rem;
	font-size: 0.875rem;
}

.projects{
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
}

.project-list{
	margin-right: -7.5px;
	margin-left: -7.5px;
	min-height: 100vh;
}

.project-item{
	position: relative;
	float: left;
	background: #eee;
	margin: 7.5px 0;
}

.project-item.grid-square{
	width: -webkit-calc(33.333333% - 15px);
	width: -moz-calc(33.333333% - 15px);
	width: calc(33.333333% - 15px);
	height: 393.33px;
}
.project-item.grid-tall{
	width: -webkit-calc(33.333333% - 15px);
	width: -moz-calc(33.333333% - 15px);
	width: calc(33.333333% - 15px);
	height: 801.66px;
}
.project-item.grid-long{
	width: -webkit-calc(66.666667% - 15px);
	width: -moz-calc(66.666667% - 15px);
	width: calc(66.666667% - 15px);
	height: 393.33px;
}

.project-item .bg{
	display: block;
	position: relative;
	top: 0;
	height: 100%;
	width: 100%;
	-webkit-filter: grayscale(1);
	filter: grayscale(1);
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
}

.project-item .bg:hover,
.project-item .bg:hover h4,
.project-item .bg:hover:after{
	opacity: 1;
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
	background-color: transparent;
}
.project-item .bg:after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	background: -moz-linear-gradient(bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 30%);
	background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.1) 30%);
	background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.5)),color-stop(30%, rgba(0,0,0,0.1)));
	background: -moz-linear-gradient(bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.1) 30%);
	background: -o-linear-gradient(bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.1) 30%);
	background: linear-gradient(to top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.1) 30%);

}
.project-item .bg h4{
	position: absolute;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	bottom: 30px;
	left: 30px;
	margin-bottom: 0;
	z-index: 3;
	color: #fff;
	opacity: 0;
}




/* =================== Phone =================== */
@media( max-width: 768px){

	.project-item.grid-square {
		width: -webkit-calc(50% - 15px);
		width: -moz-calc(50% - 15px);
		width: calc(50% - 15px);
	}
	.project-item.grid-tall{
		width: -webkit-calc(50% - 15px);
		width: -moz-calc(50% - 15px);
		width: calc(50% - 15px);
	}
	.project-item.grid-long{
		width: -webkit-calc(100% - 15px);
		width: -moz-calc(100% - 15px);
		width: calc(100% - 15px);
	}


}

/* =================== Phone =================== */
@media( max-width: 485px){


	.project-item.grid-long,
	.project-item.grid-square,
	.project-item.grid-tall{
		width: -webkit-calc(100% - 15px);
		width: -moz-calc(100% - 15px);
		width: calc(100% - 15px);
	}

}

/* ============================================================ */
/* ====================== Single Project ====================== */
/* ============================================================ */


.single-projects .project-slider div{
	min-height: 750px;
	height: 75vh;
}


.single-projects .project-slider .stop-start i{
	position: absolute;
	top: 7px;
	left: 0;
	font-size: 1.1rem;
	color: #fff;
}
.single-projects .project-slider .stop-start[data-state="play"] .fa-play-circle{
	display: none;
}
.single-projects .project-slider .stop-start[data-state="pause"] .fa-pause-circle{
	display: none;
}



/* ========================================================= */
/* ====================== Our Process ====================== */
/* ========================================================= */


/* ====================== All ====================== */
.our-process{
	padding: 5rem 0;
}

.our-process .container>.card{
	position: relative;
	min-height: 560px;
	background-color: transparent;
}
.our-process .container>.card:after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(244, 128, 31, 0.8);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.our-process .container>.card h1{
	position: relative;
	z-index: 10;
	font-size: 9rem;
	font-style: italic;
	font-weight: bolder;
}

.our-process .container>.card .card{
	position: relative;
	z-index: 10;
}

/* ====================== First ====================== */
.our-process:nth-child(odd) h1 span{
	color: #fff;
}

/* ====================== Second ====================== */


/* ========== Number ========== */
.our-process:nth-child(even) .container>.card .row>div:first-child{
	text-align: right;
	-webkit-box-ordinal-group: 3;
	-webkit-order: 2;
	-moz-box-ordinal-group: 3;
	-ms-flex-order: 2;
	order: 2;
}
/* ========== Card ========== */
.our-process:nth-child(even) .container>.card .row>div:last-child{
	-webkit-box-ordinal-group: 2;
	-webkit-order: 1;
	-moz-box-ordinal-group: 2;
	-ms-flex-order: 1;
	order: 1;
}


.our-process:nth-child(even) .container>.card:after{
	background-color: rgba(52, 58, 64, 0.8);
}

.our-process:nth-child(even) .container>.card h1{
	color: #fff;
}






/* =========================================================== */
/* ====================== Our Expertise ====================== */
/* =========================================================== */

/* ====================== All ====================== */
.our-expertise{
	padding: 5rem 0;

}
.our-expertise .container>.card{
	position: relative;
	min-height: 560px;
	background-color: #eee;
}
.our-expertise .container>.card .card{
	position: relative;
	z-index: 10;
}
.our-expertise .project-slider{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.our-expertise .project-slider .project-image{
	padding: 1rem;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.our-expertise .project-slider .project-image a{
	position: absolute;
	z-index: 100;
	left: 1rem;
}

.our-expertise .project-slider .project-image:after{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 33%;
	height: 100%;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	z-index: 0;

	background-color: rgba(000, 000, 000, 0.2);
	background: -moz-linear-gradient(left, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
	background: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0.2)),to(rgba(0,0,0,0)));
	background: -moz-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(left, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to right, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
}


.our-expertise .project-slider .slick-dots{
	right: auto;;
	left: 1rem;
	text-align: left;
}



/* ====================== First ====================== */
.our-expertise:nth-child(odd){

}


/* ====================== Second ====================== */


.our-expertise:nth-child(even) .project-slider .project-image:after{
	left: auto;
	right: 0;
	background-color: rgba(000, 000, 000, 0.2);
	background: -moz-linear-gradient(right, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(right, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
	background: -webkit-gradient(linear, right top, left top, from(rgba(0,0,0,0.2)),to(rgba(0,0,0,0)));
	background: -moz-linear-gradient(right, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
	background: -o-linear-gradient(right, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to left, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0) 100%);
}

.our-expertise:nth-child(even) .project-slider .project-image a{
	left: auto;
	right: 1rem;
}

.our-expertise:nth-child(even) .project-slider .slick-dots{
	left: auto;
	right: 1rem;
	bottom: 1rem;
	text-align: right;
}

/* ========== Number ========== */
.our-expertise:nth-child(even) .container>.card .row>div:first-child{
	text-align: right;
	-webkit-box-ordinal-group: 3;
	-webkit-order: 2;
	-moz-box-ordinal-group: 3;
	-ms-flex-order: 2;
	order: 2;
}
/* ========== Card ========== */
.our-expertise:nth-child(even) .container>.card .row>div:last-child{
	-webkit-box-ordinal-group: 2;
	-webkit-order: 1;
	-moz-box-ordinal-group: 2;
	-ms-flex-order: 1;
	order: 1;
}










/* ============================================================ */
/* ======================== Responsive ======================== */
/* ============================================================ */




/* ============================================ */
/* ================== Medium ================== */
/* ============================================ */
@media( max-width: 1199px){


	.container {
		max-width: 100%;
	}


	/* ================== Navbar ================== */


	.navbar-toggler{
		border: none;
	}
	.navbar-toggler:hover,
	.navbar-toggler:active,
	.navbar-toggler:focus{
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		outline: none;
	}
	.navbar-toggler i{
		font-size: 1.5rem;
		padding: 1rem;
		color: #fff;
	}
	.navbar-toggler i:before{
		content: '\f00d';
	}
	.navbar-toggler.collapsed i:before{
		content: '\f0c9';
	}

	.navbar-collapse{
		border-top: solid thin #fff;
		margin-left: -15px;
		margin-right: -15px;
		padding: 1rem 2rem;
	}
	nav .navbar-nav .nav-item .nav-link{
		font-size: 1.5rem;
	}
	.navbar-nav .dropdown-menu{
		background-color: var(--dark);
		padding: 1rem;
	}
	.dropdown-menu .dropdown-item{
		position: relative;
		font-size: 1.2rem;
	}
	.dropdown-menu .dropdown-item:before{
		content: '';
		position: absolute;
		width: 5px;
		height: 1px;
		left: 0;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
		background-color: rgba(255,255,255,0.8);

	}

	/* ================== Home ================== */

	#section0 .row>div:nth-child(2){

	}
	#section0 img{
		display: none;
	}
	#section0 p{
		display: none;
	}

	

}

@media (max-height: 950px) {
	#section4  .row>div:nth-child(2){
		display: none;
	}
}


/* ============================================ */
/* ================== Tablet ================== */
/* ============================================ */
@media (max-width: 991px) {

	.container{
		max-width: 100%;
	}

}


/* ============================================ */
/* ================== Mobile ================== */
/* ============================================ */
@media (max-width: 767px) {


	header .navbar-brand img{
		width: 250px;
	}
	header .navbar-brand img.sm{
		width: 220px;
	}

	nav .navbar-nav .nav-item .nav-link{
		font-size: 1.2rem !important;
	}

	.navbar-collapse{
		padding: 1rem !important;
	}

	.dropdown-menu .dropdown-item{
		font-size: 1rem;
	}

	#fullpage h1{
		font-size: 3rem;
	}

	#fullpage #section1 .fp-tableCell h6{
		margin-bottom: 5rem;
	}

	#fullpage .container-content.full-height{
		padding: 4rem 0;
	}

	#section0 .container-fluid{
		padding: 6rem 15px 0 15px ;
	}

	#section0 .row>div:nth-child(2),
	#section2 .row>div:nth-child(2),
	#section3 .row>div:nth-child(2),
	#section4  .row>div:nth-child(2){
		display: none;
	}


	.our-process:nth-child(odd) .container>.card .row>div:first-child,
	.our-process:nth-child(even) .container>.card .row>div:first-child{
		display: none;
	}

	.our-process .container>.card{
		padding: 1rem;
	}


	.our-expertise .project-slider{
		display: none;
	}
	.our-expertise .container>.card{
		padding: 0;
		min-height: auto;
		background: transparent;
	}


	.single-projects .project-slider div{
		min-height: 60vh;
		height: 60vh;
	}


	.project-item .bg{
		-webkit-filter: grayscale(0);
		filter: grayscale(0);
	}


}