@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700|Montserrat:600&display=swap');

*{
	box-sizing:border-box;
	pointer-events:none;
}

body {
  background: #eee;
  font-family: 'Lato', sans-serif;  
  margin: 0;
  padding: 0;
  color: #7F7F7F;
  font-size: 1vw;
  background-color: #EEE;
  transition: background-color .5s;
}

/*colors*/

:root {
  --homeColor: #BC0501;	
  --proj1Color: #383838;
  --proj2Color: #32E476;
  --proj3Color: #0FA6A1;
  --proj4Color: #14B14F;
  --proj5Color: #EB2427;
  --proj6Color: #FF4D00;
  --contactColor: #373737;
}

.swiper-slide{pointer-events:all;}
#arrowButton{pointer-events:all;}
#arrowButtonAbout{pointer-events:all;}
.swiper-slide-active .iconImage{pointer-events:all;}

/*body colors*/

body.slide0{
	background-color: var(--homeColor);
}

body.slide1{
	background-color: var(--proj1Color);
}

body.slide2{
	background-color: var(--proj2Color);
}

body.slide3{
	background-color: var(--proj3Color);
}

body.slide4{
	background-color: var(--proj4Color);
}

body.slide5{
	background-color: var(--proj5Color);
}

body.slide6{
	background-color: var(--proj6Color);
}

body.slide7{
	background-color: var(--contactColor);
}

/*arrow colors*/

#arrowButton.slide1{
	background-color: var(--proj1Color);
}

#arrowButton.slide2{
	background-color: var(--proj2Color);
}

#arrowButton.slide3{
	background-color: var(--proj3Color);
}

#arrowButton.slide4{
	background-color: var(--proj4Color);
}

#arrowButton.slide5{
	background-color: var(--proj5Color);
}

/* icons */

.projIcon #iconWrapper.slide1, #titleWrapper.slide1, #descWrapper.slide1{
	transform: translate3d(0,0,0);
}

.projIcon #iconWrapper.slide2, #titleWrapper.slide2, #descWrapper.slide2{
	transform: translate3d(0,-100%,0);
}

.projIcon #iconWrapper.slide3, #titleWrapper.slide3, #descWrapper.slide3{
	transform: translate3d(0,-200%,0);
}

.projIcon #iconWrapper.slide4, #titleWrapper.slide4, #descWrapper.slide4{
	transform: translate3d(0,-300%,0);
}

.projIcon #iconWrapper.slide5, #titleWrapper.slide5, #descWrapper.slide5{
	transform: translate3d(0,-400%,0);
}

.projIcon #iconWrapper.slide6, #titleWrapper.slide6, #descWrapper.slide6{
	transform: translate3d(0,-500%,0);
}

/*home*/
#slide0{
	background-image: url('../img/interface/bg-home.jpg');
	background-size: cover;
	background-position: center bottom;
	padding: 6vw;
	font-size: 1vw;
}

#slide0 .wrapper{
	width: 100%;
	height: 100%;
	position: relative;
}

.logotype{
	position: absolute;
    left: 0px;
    top: calc(50% - 1vw);
    height: 3.2vw;
    opacity: 1;
    transition: all .5s;
    transition-delay: .5s;
}

.home{
	transition: all .5s !important;
	opacity: 1;
}

.home.fade{
	opacity: 0;
}

.home.fade .logotype, .home.fade .subtitle, .home.fade .btLatestWork, .home.fade .aboutme, .home.fade #arrowButton, .home.fade #arrowButtonAbout{
	opacity: 0 !important;
}

.home h3.subtitle{
	font-family: "Montserrat";
    font-size: 1.3em;
    font-weight: 600;
    letter-spacing: .2em;
    color: white;
    position: absolute;
    width: 100%;
    bottom: .3em;
    transition: all .5s;
    transition-delay: 1s;

}

.home #arrowButton{
	transform: translate3d(0%, 0, 0) !important;
	opacity: 1 !important;
	background-color: #C80501;
	pointer-events: all !important;
	transition: all .5s;
    transition-delay: 1.5s;
}

.home #arrowButtonAbout{
	transform: translate3d(0%, 0, 0) !important;
	opacity: 1 !important;
	background-color: #C80501;
	pointer-events: all !important;
	transition: all .5s, transform .5s;
    transition-delay: 1.5s, 0s;
}

.home #arrowButton:hover{
	transform: translate3d(0%, 0, 0) scale(1.1, 1.1) !important;
	
}

.home #arrowButtonAbout:hover{
	
	transform: translate3d(0%, 0, 0) scale(1.1, 1.1) !important;
	
}

.btaboutWrapper{
	position: relative;
}

h3.aboutme{
	font-family: "Montserrat";
    font-weight: 600;
    color: white;
    position: relative;
    border: 0px solid green;
    position: absolute;
    right: 11em;
    top: calc(50% - 2.2em);
    letter-spacing: .2em;
    line-height: 3em;
    font-size: 1em;
    transition: all .5s;
    transition-delay: 1.5s;
}

.btLatestWork{
	font-family: "Montserrat";
    font-weight: 600;
    color: white;
    border: .2em solid white;
    padding: 1em 2em;
    border-radius: 3em;
    display: inline-block;
    font-size: 1em;
    width: 14em;
    position: absolute;
    left: calc(50% - 7em);
    bottom: -3.8em;
    pointer-events: all;
    transition: all .3s;
    letter-spacing: .1em;
    cursor: pointer;
    transition: all .5s;
    transition-delay: 1s;
}

.btLatestWork:hover{
	background-color: white;
	color: #BC0501;
}

/* Interface */

.frame{
	width: 100%;
    height: 100%;
    border: 6em solid rgba(0,0,0,.05);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    pointer-events:none;
    transition: all .5s;
}

.bgBlackFade{
	position: fixed;
	z-index: 1;
	bottom:0px;
	left: 0px;
	width: 100%;
	height: 80%;
	transition: all .3s;
}

.projIcon{
	width: 7em;
    height: 7em;
    position: fixed;
    background-color: transparent;
    left: calc(50% - 2em);
    bottom: calc(0% + 2.5em);
    z-index: 150;
    overflow: hidden;
    transition: all .5s;
    pointer-events:none;
}

.projectTitle{
	position: fixed;
    left: 48%;
    top: calc(50% - 9.25em);
    width: 50%;
    height: 12em;
    z-index: 200;
    overflow: hidden;
    pointer-events:none;
    transition: all .5s;
    display: block;
}

.projectTitle.hidden{
	display: none;
}

.projectDesc{
	position: fixed;
    left: 48%;
    top: calc(50% - 9.25em + 14em);
    width: 40%;
    height: 4em;
    z-index: 200;
    overflow: hidden;
    pointer-events:none;
    transition: all .5s;
    display: block;
}

.projectDesc.hidden{
	display: none;
}

#titleWrapper{
	width: 100%;
	height: 100%;
	transition: transform .5s;
}

#descWrapper{
	width: 100%;
	height: 100%;
	transition: transform .5s;
}

#titleWrapper .title, #descWrapper .desc{
	width: 100%;
	height: 100%;
}

.projectTitle h1{
	color:white;
	font-family: 'Montserrat', sans-serif;
	text-align: left;
	font-size: 5em;
	margin:0;
	pointer-events: none;
}

.projectDesc h2{
	color:white;
	font-family: 'Lato', sans-serif;
	text-align: left;
	font-size: 1.5em;
	margin:0;
	pointer-events: none;
	font-weight: 300;
}

#arrowButton{
	width: 10em;
	height: 10em;
	border-radius: 10em;
	position: fixed;
	top: calc(50% - 5em);
	right: 4em;
	z-index: 200;
	transition: all .5s, transform .3s;
	cursor: pointer;
	display: block;
}

#arrowButton.hidden{
	display: none;
}

#arrowButtonAbout{
	width: 10em;
	height: 10em;
	border-radius: 10em;
	position: fixed;
	top: calc(50% - 5em);
	right: 4em;
	z-index: 200;
	transition: all .5s, transform .3s;
	cursor: pointer;
}

#arrowButton:hover{
	transform: scale(1.1, 1.1);
}

#arrowButtonAbout:hover{
	transform: scale(1.1, 1.1);
}

#arrowButton img{
	width: 100%;
	height: 100%;
}

#arrowButtonABout img{
	width: 100%;
	height: 100%;
}



.projIcon img{
	width: 100%;
	height: 100%;
	display: block;
	pointer-events:none;
}

.projIcon #iconWrapper{
    height: 100%;
    width: 100%;
    transition: transform .5s;
}

.menu-icon{
	position: fixed;
    width: 3.8vw;
    height: auto;
    margin-top: -1.5vw;
    top: 50%;
    left: 1vw;
    z-index: 100;
    cursor: pointer;
    transition: all .4s;
    -webkit-transition: all .4s;
    z-index: 900;
    /*display: none;*/
    pointer-events: all;
}

.menu-icon.open{
	/*left:calc(100vw - 1vw - 3.8vw);*/
	transform: translate3d(calc(100vw - 2vw - 3.8vw),0,0px);
}

.main-logo{
	width: 3.5vw;
    height: auto;
    top: 1.4vw;
    left: 1.1vw;
    position: fixed;
    z-index: 100;
    transition: all .4s;
    -webkit-transition: all .4s;
    z-index: 900;
}

.main-logo.open{
	/*left:calc(99vw - 50px);*/
	transform: translate3d(calc(100vw - 3.5vw - 2.8vw),0,0px);
}

@media screen and (orientation:portrait) and (max-width: 600px){
	.menu-icon {
		position: fixed;
		width: 13vw;
		height: auto;
		margin-top: -6.5vw;
		top: 50%;
		left: -0.5vw;
		z-index: 900;
		cursor: pointer;
		transition: all .4s;
	}


	.menu-icon.open{
		/*left:calc(100vw - 1vw - 12.5vw);*/
		transform: translate3d(calc(100vw + 1vw - 13vw),0,0px);
	}

	.main-logo {
	    width: 9.5vw;
	    height: auto;
	    top: 2.0vw;
	    left: 1.5vw;
	    position: fixed;
	    z-index: 900;
	    transition: all .4s;
	}

	.main-logo.open{
		/*left:calc(99vw - 50px);*/
		transform: translate3d(calc(100vw - 11vw - 3vw),0,0px);
	}
}

@media screen and (orientation:portrait) and (min-width: 601px){
	.menu-icon {
		position: fixed;
		width: 8vw;
		height: auto;
		margin-top: -4vw;
		top: 50%;
		left: -0vw;
		z-index: 100;
		cursor: pointer;
		transition: all .4s;
	}

	.menu-icon.open{
		/*left:calc(100vw - 1vw - 7.5vw);*/
		transform: translate3d(calc(100vw - 0vw - 8vw),0,0px);
	}

	.main-logo {
	    width: 6.5vw;
		height: auto;
		top: 1.2vw;
		left: 1.0vw;
		position: fixed;
		z-index: 100;
		transition: all .4s;
	}

	.main-logo.open{
		/*left:calc(99vw - 50px);*/
		transform: translate3d(calc(100vw - 6.5vw - 2vw),0,0px);
	}	
}



.close-icon{
	width: 3.5vw;
    height: 3.5vw;
    top: 1.4vw;
    right: calc(.9vw + 6px);
    position: fixed;
    z-index: 100;
    transition: all .4s;
    -webkit-transition: all .4s;
    cursor: pointer;
    transform: rotate(0deg) translate3d(0%, 0px, 0px);
}

.close-icon.inVideo{
	/*transform: translate(0%, 0%) rotate(-90deg);
	-webkit-transform: translate(0%, 0%) rotate(-90deg);*/
	transform: rotate(-90deg) translate3d(0%, 0px, 0px);
}

.close-icon.out{
    top: 1.4vw;
    right: calc(1.4vw + 6px);
    position: fixed;
    z-index: 100;
    transition: all .4s;
    -webkit-transition: all .4s;
    cursor: pointer;
    transform: rotate(0deg) translate3d(150%, 0px, 0px);
}

@media screen and (orientation:portrait){
	.close-icon {
	    width: 10.5vw;
	    height: 10.5vw;
	        width: 9.5vw;
		    height: 9.5vw;
		    right: 1.4vw;
	}

	.close-icon.out{
		/*right: -14vw;
		transform: translate(0%, 0%) rotate(90deg);
		-webkit-transform: translate(0%, 0%) rotate(90deg);*/
		transform: rotateZ(0deg) translate3d(150%, 0px, 0px);
	}
}

@media screen and (orientation:portrait) and (min-width: 600px){
	.close-icon {
	    width: 7vw;
	    height: 7vw;
	    top: 0.4vw;
	    right: calc(1vw + 6px);
	}
}

/* Swipper slides */

html, body {
  position: relative;
  height: 100%;
}

.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-wrapper{
	display: block;
}

.swiper-wrapper.hidden{
	display: none;
}


.swiper-slide {
  text-align: center;
  font-size: 18px;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-container-vertical>.swiper-pagination-progressbar {
    width: 4px;
    height: 100%;
    left: initial !important;
    right:0 !important;
    top: 0;

    transition: all .3s;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #FFF !important;
}

.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-container-vertical>.swiper-pagination-progressbar {
    width: 10px !important;
}

.swiper-slide .iconImage{
	width: 50%;
	margin-right: 34.5%;
	transition: all .5s;
	cursor: grab;
}

.swiper-slide .iconImage:active{
	cursor: grabbing;
}

.swiper-slide.swiper-slide-prev .iconImage{
	transform:rotate(65deg);
}

.swiper-slide.swiper-slide-active .iconImage{
	transform:rotate(0deg);

}

.swiper-slide.swiper-slide-next .iconImage{
	transform:rotate(-65deg);
}


/* Out animaton */
body.out .swiper-slide .iconImage{
    width: 50%;
    margin-right: 0%;
    transform:scale(1.1,1.1);
    transform:rotate(40deg);

}

body.out .swiper-slide .iconImage.out{
    transform:scale(.5,.5) rotate(179deg);
    opacity: 0;
}

body.out.color{
	background-color: #EEEEEE;
}

body.out.color .main-logo{
	filter: brightness(0);
}

body.out.color .menu-icon{
	filter: brightness(0);
}

body.out.color .bgBlackFade{
	opacity: 0;
}

body.out.color .swiper-container-vertical>.swiper-pagination-progressbar {
    transform: translate3d(100%, 0,0);
}

body.out .projectTitle, body.out .projectDesc {
    transform: translate3d(20%, 0, 0);
    opacity: 0;
}

body.out #arrowButton{
	transform: translate3d(40%, 0, 0);
    opacity: 0;
    pointer-events:none;
}

body.out #arrowButtonAbout{
	transform: translate3d(40%, 0, 0);
    opacity: 0;
    pointer-events:none;
}

body.out .frame{
    border: 0em solid rgba(0,0,0,.05);
}

body.out .projIcon {
    bottom: calc(0% - 7em);
}

@media screen and (orientation:portrait){
	.swiper-container-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite, .swiper-container-vertical>.swiper-pagination-progressbar {
	    width: 5px !important;
	}

	.frame {
	    width: calc(100% - 5px);
    	border: 12em solid rgba(0,0,0,.05);
	}

	.swiper-slide .iconImage {
	    width: 90%;
	    height: auto;
	    margin-right: 0;
	    margin-top: -40%;
	    transition: all .5s;
	}

	.projectTitle h1 {
	    color: white;
	    font-family: 'Montserrat', sans-serif;
	    text-align: center;
	    font-size: 8em;
	    margin: 0;
	    pointer-events: none;
	}

	.projectTitle {
	    position: fixed;
	    left: -5px;
	    top: calc(57%);
	    width: 100%;
	    height: 20em;
	    z-index: 200;
	    overflow: hidden;
	    transition: all .5s;
	}

	#arrowButton, #arrowButtonAbout {
	    width: 15em;
	    height: 15em;
	    border-radius: 15em;
	    position: fixed;
	    top: calc(50% - 7.5em);
	    right: 4em;
	    z-index: 200;
	    transition: all .5s, transform .3s;
	}

	.projIcon {
    	width: 18em;
	    height: 18em;
	    position: fixed;
	    background-color: transparent;
	    left: calc(50% - 9em);
	    bottom: calc(0% + 3em);
	    z-index: 150;
	    overflow: hidden;
	    transition: all .5s;
	}


	/*out animations*/
	body.out .projIcon {
	    bottom: calc(0% - 18em);
	}

	body.out .swiper-slide .iconImage {
	    width: 90%;
	    margin-right: 0%;
	    margin-top: 0%;
	    transform: scale(1.1,1.1);
	    transform: rotate(40deg);
	}

	.projectDesc h2 {
	    color: white;
	    font-family: 'Lato', sans-serif;
	    text-align: center;
	    font-size: 4em;
	    margin: 0;
	    pointer-events: none;
	    font-weight: 300;
	}

	.projectDesc h2 br{
		display: none;
	}

	.projectDesc {
	    position: fixed;
	    left: 20%;
	    top: calc(57% + 22em);
	    width: 60%;
	    height: 16em;
	    z-index: 200;
	    overflow: hidden;
	    transition: all .5s;
	}
}

@media screen and (orientation:portrait) and (min-width: 600px){

	.frame {
	    width: calc(100% - 5px);
	    border: 8em solid rgba(0,0,0,.05);
	}

	.projIcon {
	    width: 12em;
	    height: 12em;
	    position: fixed;
	    background-color: transparent;
	    left: calc(50% - 6em);
	    bottom: calc(0% + 2em);
	    z-index: 150;
	    overflow: hidden;
	    transition: all .5s;
	}

	.projectDesc {
	    position: fixed;
	    left: 20%;
	    top: calc(57% + 22em);
	    width: 60%;
	    height: 4em;
	    z-index: 200;
	    overflow: hidden;
	    transition: all .5s;
	}

	.projectDesc h2 {
	    color: white;
	    font-family: 'Lato', sans-serif;
	    text-align: center;
	    font-size: 3em;
	    margin: 0;
	    pointer-events: none;
	    font-weight: 300;
	}
	
	.projectDesc {
	    position: fixed;
	    left: 20%;
	    top: calc(57% + 22em);
	    width: 60%;
	    height: 8em;
	    z-index: 200;
	    overflow: hidden;
	    transition: all .5s;
	}
}


/*Contact--------------------*/

.contactWrapper {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 6vw;
    transition: all .5s;
}

.contactWrapper a{
    pointer-events: all;
}

.contactWrapper .maillWrapper{
	pointer-events: all;
}

.contactWrapper.fade a{
    pointer-events: none;
}


.contactWrapper.fade{
	opacity: 0;
	transform: translate3d(0,10em,0);
}


.socialWrapper{
	width: 50%;
	height: 100%;
	float: left;
}

.maillWrapper{
	width: 50%;
	height: 100%;
	float: right;
	background-image: url('../img/interface/contact-mail.png');
	background-size: 110%;
	background-position: center center;
	transition: all .3s;
	cursor: pointer;
}


.social{
	width: 49%;
	height: 49.5%;
	float: left;
	margin: 0 1% 1% 0;
	
	transition: all .3s;
	cursor: pointer;
	pointer-events: all;

	background-size: 158%;
    background-position: -90%;
}

.clicable .social, .clicable .maillWrapper {
	pointer-events: all;
}

.in .social{
	background-size: 110%;
	background-position: 50%;
}

.social:hover{
	background-size: 125%;
}

.maillWrapper:hover{
	background-size: 125%;
}


.social.social1{
	/* Linkedin */
	background-color: #0077b5;
	background-image: url('../img/interface/contact-linkedin.jpg');
}

.social.social2{
	/* behance */
	background-color: #191919;
	background-image: url('../img/interface/contact-behance.jpg');
}

.social.social3{
	/* Twitter */
	background-color: #48a0ec;
	background-image: url('../img/interface/contact-twitter.jpg');
}

.social.social4{
	/* dribbble */
	background-color: #ea4c89;
	background-image: url('../img/interface/contact-dribbble.jpg');
}

@media screen and (orientation:portrait){
	.socialWrapper {
	    width: 100%;
	    height: 50%;
	    float: left;
	}

	.maillWrapper {
	    width: 99%;
	    height: 49%;
	    margin-bottom: 1%;
	    float: left;
	}

	.logotype {
	    position: absolute;
	    left: 0px;
	    top: calc(50% - 3vw);
	    height: 7.2vw;
	}

	#slide0 {
	    padding: 13vw;
	    background-position: 44% bottom;
	}

	.aboutme, .home #arrowButton, .home #arrowButtonABout{
		display: none
	}

	.btLatestWork {
		font-size: 3em;
		bottom: -1em;
	}

	.home h3.subtitle {
	    font-size: 2.5em;
	    bottom: 4.5em;
	}

	.contactWrapper {
		padding: 2.6em;
	}
}