@charset "utf-8";
/* CSS Document */



body{
    font-family:'Muli', sans-serif;
    overflow: hidden;
    height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
}

.section{
    height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
}

/* Style for our header texts
	* --------------------------------------- */
	h1{
        font-family:'Muli', sans-serif;
		font-size: 5em;
		color: #fff;
		margin:0;
		padding:0;
	}

	/* Centered texts in each section
	* --------------------------------------- */
	.section{
		text-align:center;
	}


	/* Backgrounds will cover all the section
	* --------------------------------------- */
	#section0,
	#section1,
	#section2,
	#section3,
    #slide1,
    #slide2{
		background-size: cover;
		background-attachment: fixed;
	}

	/* Defining each sectino background and styles
	* --------------------------------------- */
	#section0{
		background: #000;
	}
	#section0 h1{
		top: 50%;
		transform: translateY(-50%);
		position: relative;
	}

	#section3 h1{
		color: #000;
	}



.split {
    height: 100%;
    width: 50%;
    position: absolute;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
    padding-top: 20px;
}

.left {
    left: 0;
    background-color: #111;
}

.right {
    right: 0;
}

.blackBg{
    background: #000;
}
.introTxt{
    color: #d9b451;
    line-height: 2em;
    font-size: 18px;
}
.centered {
    position: absolute;
    top: 50%;
    left: 40%;
    transform: translate(-20%, -50%); 
}

.centered.center-left {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-80%, -50%); 
}

a.goldLink, a{
   color: #d9b451;
    display: inline-block;
    position: relative;
    transition: all ease-in .2s;
    text-decoration: none;
}
a.goldLink:hover, a:hover{
    color: #d8c38d;
}
a.goldLink i{
    margin-right: 10px;
}
address{
    margin-top:10%;
}

address i{
    line-height: inherit !important;
    margin-right: 18px;
}
address i, address span{
  float: left;
}
address span{
    width:80%;
}


/*
a.goldLink:after{
    border-top:2px solid #d9b451;
    width:10px;
    content: '';
    position: absolute;
    right:0;
    top:0;
}
*/


#introBg{
    background: url("../img/intro-bryan.jpg") no-repeat center 70%;

}
#contactBg{
    background: url("../img/contact-bg.jpg") no-repeat center 55%;

}
.contactTxt{
    color: #d9b451;
    line-height: 2em;
    font-size: 18px;
}
svg {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}





.path {
	animation: turn 5.25s linear;
	fill-opacity: 0;
  animation-fill-mode: forwards;
}

.path1 {
	animation: draw 3s linear;
	fill-opacity: 0;
    animation-fill-mode: forwards;
}
.path2 {
	animation: move-l-r 3s linear;
	fill-opacity: 0;
    opacity: 0;
    animation-fill-mode: forwards;
}

.t1 {
  opacity: 0;
  animation-name: show;
  animation-delay: 2.25s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

.t2 {
  opacity: 0;
  animation-name: show;
  animation-delay: 2.5s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;

}

.t3 {
  opacity: 0;
  animation-name: show;
  animation-delay: 2.75s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

.t4 {
  opacity: 0;
  animation-name: show;
  animation-delay: 3s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}

.t5 {
  opacity: 0;
  animation-name: show;
  animation-delay: 3.25s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}
.t6 {
  opacity: 0;
  animation-name: show;
  animation-delay: 3.5s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}
.t7 {
  opacity: 0;
  animation-name: show;
  animation-delay: 3.75s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}
.t8 {
  opacity: 0;
  animation-name: show;
  animation-delay: 4s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}
.t9 {
  opacity: 0;
  animation-name: show;
  animation-delay: 4.25s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}
.t10 {
  opacity: 0;
  animation-name: show;
  animation-delay: 4.5s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}
.t11 {
  opacity: 0;
  animation-name: show;
  animation-delay: 4.75s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
}
.t12.line{
  opacity: 0;
  animation-name: expand;
  animation-delay: 4.90s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
     width: 1px;
    height: 0;
    border-right:1px solid #d8b351;
    top: 64%;
    position: absolute;
    left: 0;
    right: 0;

    margin: 0 auto;
}
@keyframes draw {
	0%{fill-opacity: 0; opacity: 0}
	100%{fill-opacity: 1; opacity: 1}
}

@keyframes turn {
	20%{fill-opacity: 0; transform:rotateY(40deg);}
	100%{fill-opacity: 1;}
}
@keyframes move-l-r {
	20%{fill-opacity: 0; opacity: 0; transform:translateX(-40px);}
	100%{fill-opacity: 1; opacity: 1; transform:translateX(0px);}
}
@keyframes show {
  to {
    opacity: 1;
  }
}

@keyframes expand {
 0%{opacity: 0; height: 0}
100%{opacity: 1; height: 400px;}
}

@media only screen and (orientation: portrait) {

  svg {
      transform: scale(2);
      viewBox: 960 540 1920 1080;
    }
}


.contactLogo{
    margin-bottom: 10%;
    
}
.socialMedia{
    padding: 0;
    margin: 0;
}
.socialMedia li{
    display: inline-block;
    color: #d9b451;
    margin-right: 20px;
}

.projectBg{
    width: 100%;
    height: 100vh; 
    position: relative
}

.projectBg:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.6);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
}

#project1{
    background: url("../img/foresta/cover.jpg") center center no-repeat;
    background-size: cover;
}
#project2{
    background: url("../img/kiaramas/cover.jpg") center center no-repeat;
    background-size: cover;
}
#project3{
    background: url("../img/scoop/cover.jpg") center center no-repeat;
    background-size: cover;
}
#project4{
    background: url("../img/vortex/cover.jpg") center center no-repeat;
    background-size: cover;
}
#project5{
    background: url("../img/poolvilla/cover.jpg") center center no-repeat;
    background-size: cover;
}

.img-responsive{
    max-width: 101.5%;
    height: auto;
}

.h33vh{
    height: 33vh
}

.nopd{
    padding: 0  !important;
}

.nomg{
    margin: 0 !important;
}

.projectContent{
    position: relative;
    z-index: 1;
    width:80%;
    top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
    text-align:left;
    color: #d9b451;
}

.projectContent h1{
    color: #d9b451;
    font-size: 3.5vw;
    text-transform: uppercase;
    font-weight: 600;
    
}

.projectContent p{
    font-size: 1.5vw;
    text-transform: uppercase;
    font-weight: 300;
}

.grayscale img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.grayscale:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

/* Zoom In #1 */
.hover01 div{
    overflow: hidden;
}




.hover01 img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .7s ease-in;
	transition: .7s ease-in;
}
.hover01 div:hover img {
	-webkit-transform: scale(1.05);
	transform: scale(1.05);
}

#loading {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: #fff;
   z-index: 99;
   text-align: center;
}

#loading-image {
  position: absolute;
  top: 100px;
  left: 240px;
  z-index: 100;
}

.copyright{
    font-size:10px;
}


#fp-nav ul li a span, .fp-slidesNav ul li a span{
    background: #d9b451
}
#custo{
    position: relative
}

.logoCenter{
    width:300px;
    height: 218px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom:0;
    margin: auto;
}

.logoCenter img{
    max-width:40%;
    height: auto;
}
.row6project div{
    height: 33.33%;
     overflow: hidden
}
.row8project div{
    height: 25vh;
    overflow: hidden
}
/*.row8project img{
    margin-top:-8%
}*/
.row6project img.center{
   margin-top: -25%
}

.mg-l-10{
    margin-left: 10px;
}

.mg-r-10{
    margin-right:10px;
}

.mg-lr-10{
    margin-left:10px;
    margin-right: 10px;
}