@font-face {
    font-family: Gilroy-Light;
    src: url(../fonts/Gilroy-Light.otf);
}

@font-face {
    font-family: Gilroy-Bold;
    src: url(../fonts/Gilroy-ExtraBold.otf);
}

html,body{
	margin:0px;
	padding: 0px;
	font-family: 'Zilla Slab', Serif;
	font-size: 16px;
	color:#ff786b;
}

section{
	height: 100vh;
}

::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
    background: transparent;
}

a{
	text-decoration: none;
	color: inherit;
}

.mobile{
	display: none;
}

#top{
	overflow: hidden;
	position: relative;
}

.dev{
	width: 68%;
	background-color: #3d4858;
	display: inline-block;
	height: 100%;
	float: right;
	padding: 5%;
}

.item.active span{
	border-bottom: solid 2px #65819c;
}

.others a{
	color: #3d4858;
	position: relative;
}

.others .text{
	color: #3d4858;
    font-size: 13px;
    line-height: 17px;
    letter-spacing: 0.5px;
    padding: 10px;
    text-align: left;
}

.others .text a{
	color: #ff7c5a;
	line-height: 18px;
	-webkit-font-smoothing:antialiased;
	-moz-font-smoothing:antialiased;
	-o-font-smoothing:antialiased;
	font-smoothing:antialiased;
}

.others .menu{
	width: 100%;
    font-size: 1.1em;
    font-weight: 100;
    box-sizing: border-box;
    text-align: left;
    padding: 10%;
}

.others .menu div{
	margin-bottom: 5px;
	cursor: pointer;
}

.others{
	width: 22%;
    background-color: #ececec;
	display: inline-block;
	height: 100%;
	float: left;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.close{
	position: absolute;
    right: 40px;
    top: 40px;
    font-size: 20px;
    color: #ff7c5a;
    cursor: pointer;
    font-family: 'Gilroy-Bold';
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing:antialiased;
	font-smoothing:antialiased;
}

.portfolio-web{
	position: relative;
    /* background-color: #fff; */
    border: 7px solid #ff7c5a;
    width: 90%;
    height: 500px;
    top: 7%;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    left: 100vw;
    font-size: 30px;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

.portfolio-web .wrapper{
	padding: 0px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.square{
	width: 60px;
    height: 60px;
    position: absolute;
    top: 32%;
    left: 28.5%;
    border: 1px solid #ff7c5a;
}

.circle{
	width: 60px;
    height: 60px;
    position: absolute;
    bottom: 22%;
    right: 6%;
    border: 1px solid #ff7c5a;
    border-radius: 100%;
}

.lil-circle{
	width: 20px;
    height: 20px;
    position: absolute;
    top: 28.5%;
    left: 58%;
    border: 1px solid #ff7c5a;
    border-radius: 100%;
}


.line-full{
	width: 150px;
    height: 15px;
    position: absolute;
    top: 30%;
    right: 6%;
    /*border: 1px solid #ff786b;*/
    background-color: #ff7c5a;
}

.vertical-line{
	width: 10px;
    height: 60px;
    position: absolute;
    bottom: 22%;
    left: 31%;
    /*border: 1px solid #ff786b;*/
    background-color: #ff7c5a;
}

.line-empty{
	width: 100px;
    height: 10px;
    position: absolute;
    bottom: 25.4%;
    left: 56%;
    border: 1px solid #ff7c5a;
}

.portfolio-web .cover{
	width: 50%;
	float: left;
    display: inline-block;
    height: 50%;
    margin: 0px;
    background-color: #f9f9f9;
    position: relative;
    overflow: hidden;
    background-color: #3d4858;
}


.portfolio-web .cover img{
	width: 190%;
    position: absolute;
    opacity: 0.6;
    top: 46%;
   	-webkit-filter: grayscale(100%) contrast(65%);
   	-moz-filter: grayscale(100%) contrast(65%);
   	-o-filter: grayscale(100%) contrast(65%);
   	filter: grayscale(100%) contrast(65%);
    left: 50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
}

.portfolio-web .cover img:hover{
	-webkit-filter: grayscale(100%) contrast(100%);
	-moz-filter: grayscale(100%) contrast(100%);
	-o-filter: grayscale(100%) contrast(100%);
	filter: grayscale(100%) contrast(100%);
}

.portfolio-web.visible{
	left: 5.1%;
}

.detail{
	position: absolute;
	z-index: 4000;
    width: 100%;
    height: 100vh;
    left: 0px;
    top: 100vh;
    overflow: hidden;
    padding: 10px;
    color: #3d4858;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    -o-font-smoothing: antialiased;
    font-smoothing: antialiased;
    padding: 5%;
    box-sizing: border-box;
    background-color: #fbfbfb;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.detail.visible{
	top: 0px;
}

.detail .site{
	float: right;
    color: #ff786b;
}

.detail img{
	width: 100%;
}

.detail .img-wrapper{
	width: 70%;
	height: calc(100vh - 150px);
	overflow:scroll;
	margin-bottom: 10px;
	float: right;
    width: 70%;
}

.detail h1{
	margin-top: 0px;
    margin-bottom: 4px;
    font-size: 20px;
}

.detail .description{
	margin-bottom: 20px;
    width: 26%;
    float: left;
}


.selfie{
	position: absolute;
    width: 400px;
    left: 45%;
    /*top: 17%;*/
    top: 100vh;
    height: 400px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.selfie.visible{
	top: 25%;
}

.selfie img{
	position: absolute;
}

#pelo, #rostro, #ojoizq, #ojoder, #cejaizq, #cejader, #nariz{
	-webkit-filter: url(#blue);
	-moz-filter:url(#blue);
	-o-filter:url(#blue);
  	filter:  url(#blue);
}

.contacto{
	position: absolute;
    width: 500px;
    height: 400px;
    top: 100vh;
    left: 49%;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.contacto.visible{
	top: 25%;
}

#mail, #phone{
	position: absolute;
	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

#mail{
	width: 60%;
	top: 10%;
	-webkit-filter: url(#red);
	-moz-filter:url(#red);
	-o-filter:url(#red);
  	filter:  url(#red);
}

#mail.animated{
	top: 20%;
}

#phone{
	width: 40%;
    left: 37%;
    top: 0%;
	-webkit-filter: url(#blue);
	-moz-filter:url(#blue);
	-o-filter:url(#blue);
  	filter:  url(#blue);
}

#phone.animated{
	top: 5%;
	transform: rotate(6deg);
}

#boca{
	-webkit-filter:url(#red);
	-moz-filter:url(#red);
	-o-filter:url(#red);
	filter:url(#red);
}

#pelo{
	height: 100%;
	top: 0%;
}

#pelo.animated{
	top: 4%;
}

#cejaizq{
	width: 28%;
    top: 33%;
    left: 17%;
}

#cejader{
	width: 28%;
    top: 36%;
    right: 17%;
}

#rostro{
	width: 62%;
    top: 38%;
    left: 19.3%;
}

#rostro.animated{
	top: 32%;
}

#anteojos{
	width: 67%;
    top: 42%;
    left: 17.3%;
    -webkit-filter:url(#yellow);
	-moz-filter:url(#yellow);
	-o-filter:url(#yellow);
	filter:url(#yellow);
}

#anteojos, #pelo{
	-webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	-o-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
}

#ojoizq, #ojoder, #cejaizq, #cejader, #boca, #rostro{
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

#anteojos.animated{
	top: 46%;
}

#ojoizq.animated{
	top: 49%;
}


#ojoder.animated{
	top: 57%;
}

#cejaizq.animated{
	top: 36%;
}


#cejader.animated{
	top: 39%;
}


#ojoizq{
	width: 6%;
    top: 54%;
    left: 35%;
}

#ojoder{
	width: 6%;
    top: 54%;
    right: 33%;
}

#nariz{
	top: 50%;
    width: 4%;
    left: 49%;
}

#boca{
	top: 73%;
    width: 22%;
    left: 42%;
}

#boca.animated{
	top: 76%;
	left: 45%;
}

.logo{
	position: absolute;
    font-family: 'Gilroy-Bold', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing:antialiased;
    -o-font-smoothing:antialiased;
	font-smoothing:antialiased;
    font-weight: 900;
    font-size: 80px;
    line-height: 90%;
    color: #fff;
    left: 50%;
    top: 39%;
    letter-spacing: 4px;
    width: 321px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.logo.bottom{
	color: #3d4858;
	font-size: 40px;
	width: 170px;
	height: 105px;
	position: absolute;
	z-index: 5000;
	top: calc(100vh - 20%);
	left: inherit;
	left: 4.5%;
}

.logo.bottom .sub{
	font-size: 11.6px;
	letter-spacing: 1px;
}

.logo.bottom .line{
	height: 7px;
    margin-top: 4px;
}



.logo .sub{
    font-size:17.6px;
    font-family: 'Gilroy-Light', sans-serif;
    line-height: initial;
    margin-top: 3%;
    color: #7391af;
}

.hidden{
	display: none;
}

.logo .line{
	height: 15px;
    background-color: #ff7c5a;
    width: 0%;
    margin-top: 4%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.logo .line.animated{
	width: 97%;
}

@media (max-width: 700px){

	.selfie{
		width: 150px;
    	height: 150px;
		left: 50%;
		transform: translateX(-50%);
	}

	.selfie.visible{
		top: 14vh;
	}

	.logo{
		width: 250px;
		font-size: 62px;
		left: 48%;
		transform: translateX(-50%);
	}

	.logo.bottom{
		color: #fff;
		font-size: 20px;
		width: 80px;
		top: 88vh;
		z-index: 3000;
		left: 20vw;
		letter-spacing: 1px;
	}

	.mobile{
		display: block;
	}

	.menu-mobile{
		color: #fff;
	    background-color: #3d4858;
	    padding: 20px 5px;
	    overflow: auto;
	}

	.menu-mobile div{
		display: inline-block;
		margin-left: 20px;
		cursor: pointer;
	}

	.mobabout-text, #mobcontact-text{
		display: block !important;
		padding: 10%;
		color:#fff;
		background-color: #3d4858;
		position: absolute;
		bottom: 100vh;
		-webkit-transition: all 0.2s ease-in;
		-moz-transition: all 0.2s ease-in;
		-o-transition: all 0.2s ease-in;
		transition: all 0.2s ease-in;
	}

	.mobabout-text.visible, #mobcontact-text.visible{
		bottom: 10%;
	}

	#mobcontact-text a{
		color: #ff7c5a;
	}

	.dev .menu {
	    width: 99%;
	}

	.detail{
		width: 100%;
    	height: 100vh;
	}

	.detail.visible{
		top: 0vh;
		overflow: scroll;
	}

	.detail .img-wrapper{
		width: 100%;
		height: auto;
	}

	.detail img{
		width: 100%;
		left: 0%;
		margin: 0px;
	}

	.detail .description{
		margin-bottom: 40px;
		width: 100%;
		margin-top: 20%;
	}
	
	.logo .line{
		height: 10px;
	}

	.logo.bottom .line{
		height: 4px;
	}

	.logo .sub{
		display: none;
	}

	.text{
		font-size: 12px;
	}

	.portfolio-web .cover{
		display: inline-block;
		width: 100%;
	}

	.portfolio-web .cover img{
		width: 300%;
	}

	.dev{
		width: 100%;
		overflow-x: hidden;
		overflow-y: scroll;
	}

	.portfolio-web{
		height: inherit;
		left: 120vw;
		overflow: auto;
		margin-bottom: 20vh;
		border: 2px solid #ff7c5a;
	}

	.portfolio-web.visible{
		left: 9.5%;
		top:0%;
	}

	.contacto.visible{
		width: 70%;
    	height: 30%;
		left: 60%;
		top: 25%;
		transform: translateX(-50%);
	}

	.portfolio-web .wrapper{
		height: 100%;
		box-sizing: border-box;
	}

	.portfolio-web .cover{
		margin:0px !important;
	}

	.logo .line.animated{
		width: 104%;
		margin-right: 0px;
	}

}

@media (min-width: 413px) and (max-width: 700px){

}

@media (min-width: 1200px) and (max-width: 1300px){
	.detail.visible {
	    top: 0px;
	}

}

@media (min-width: 1800px){
	.logo{
		left: 53%;
	}

	.selfie{
		left: 50%;
	}

	.portfolio-web{
		overflow: auto;
	    position: relative;
	    box-sizing: border-box;
	    height: 70vh;
    	top: 6vh;
	}

	.portfolio-web .wrapper{
		height: 100%;
	}

	.detail.visible {
	    top: 0px;
	}

	.detail{
		height: 85%;
	}
}

@media (min-width: 1900px){
	.logo{
		left: 55%;
	}

	.detail.visible {
	    top: 0px;
	}
}