/*----- ESTILOS GENERALES -----*/
html, body {
height: 100%;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
font-family: 'Open Sans' , sans-serif;
}
.container {
width: 100%;
max-width: 1366px;
margin: 0 auto;
}
header {
position: absolute;
z-index: 900;
-webkit-filter: none;
filter: none;
height: 50px;
width: 100%;
}
.icono {
z-index: 1000;
position: absolute;
float: left;
-webkit-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
background-size: contain;
background-repeat: no-repeat;
width: 10%;
height: 63.5%;
margin-top: 8px;
left: 1%;
top: 0;
}
#logo {
padding: 1em 0;
float: left;
}
#infoContacto {
float: right;
margin-top: 12px;
}
#infoContacto i {
color: black;
margin-right: 12px;
font-size: 1.20rem;
}
/*-----
SECCIÓN 1 - CABECERA
-----*/
article > section:nth-child(1) {
position: relative;
background-size: cover;
background-image: -webkit-gradient( linear, left top, right top, from(rgba(22, 21, 21, 1)) , to(rgba(44,42,42,0.1))), url(../images/about/horizontal0.jpg);
background-image: -o-linear-gradient( left, rgba(22, 21, 21, 1) , rgba(44,42,42,0.1)), url(../images/about/horizontal0.jpg);
background-image: linear-gradient( to right, rgba(22, 21, 21, 1) , rgba(44,42,42,0.1)), url(../images/about/horizontal0.jpg);
width: 100%;
left: 0;
top: 0%;
background-position-y: 60%;
background-repeat: no-repeat;
}
@-webkit-keyframes bgmove {
0% {background-size: 100%;}
100% {background-size: 125%;}
}
@keyframes bgmove {
0% {background-size: 100%;}
100% {background-size: 125%;}
}
#linkedin, #sobre {
padding: 0 20px;
}
#logo {
-webkit-filter: invert(100%);
filter: invert(100%);
top: 5%;
position: absolute;
text-align: center;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
float: center;
width: 40px;
}
#intro {
z-index: 20;
padding: 0 0;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
#descripcion {
position: absolute;
z-index: 30;
width: 50%;
height: 70%;
left: 0;
-webkit-transition-duration:1000ms;
-o-transition-duration:1000ms;
transition-duration:1000ms;
margin: 0px 0;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
z-index: 20;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
padding: 3em 3em;
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
font-size: .9em;
color: #fff;
font-weight: 100;
letter-spacing: 300;
font-family: arial, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
}
h1 {
-webkit-transition-duration:2000ms !important;
-o-transition-duration:2000ms !important;
transition-duration:2000ms !important;
z-index: 20;
text-align: left;
font-size: 2.2rem;
font-family: 'Montserrat', sans-serif;
margin-bottom: 25px;
}
#descripcion p {
text-align: left;
z-index: 20;
margin-bottom: 30px;
width: 50%;
line-height: 1.2;
font-family: 'Montserrat', sans-serif;
}
#emoji {
position: relative;
top: 0;
font-size: 1.5em;
background-size: contain;
}
.infoContacto1, .infoContacto2, .infoContacto3 {
z-index: 20;
padding: 0 .5em;
font-weight: 100;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.infoContacto1:hover {
color: white;
-webkit-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.infoContacto2:hover {
color: white;
-webkit-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.infoContacto3:hover {
color: white;
-webkit-transition: all .1s ease;
-o-transition: all .1s ease;
transition: all .1s ease;
}
.button {
font-family: 'Montserrat', sans-serif;
position: absolute;
width: 10%;
text-decoration: none;
color: white;
margin-bottom: -20%;
padding: 1em 1em;
left: 4%;
border: 1px solid white;
border-radius: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-weight: 600;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.button:hover {
background-color: white;
color: black;
-webkit-transition: color 1s ease;
-o-transition: color 1s ease;
transition: color 1s ease;
}
.button2 {
font-family: 'Montserrat', sans-serif;
position: absolute;
width: 20%;
text-decoration: none;
font-weight: 600;
color: white;
margin-bottom: -20%;
padding: 1em 1em;
left: 30%;
border: 1px solid white;
border-radius: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.button2:hover {
background-color: white;
color: black;
-webkit-transition: color 1s ease;
-o-transition: color 1s ease;
transition: color 1s ease;
}
/*----- FOOTER -----*/
footer {
z-index: 100;
position: static;
z-index: 50;
padding: 20px 0;
}
#icons {
width: 100%;
display:flex;
text-align: center;
align-items: center;
justify-content: space-between;
margin: .5em 0 .5em 0;
}
.mail, .telefono, .linkedin2, .cv, .instagram {color: #fff;}
.copyright {
text-align: center;
float: right;
color: white;
padding-top: 8px;
}
.nav {
float: left;
}
#pieDePagina {
overflow: hidden;
}
.nav li {
display: inline-block;
font-size: 0.80rem;
padding: 12px 0 0;
}
.nav li a {
color: white;
text-decoration: none;
padding-right: 1.5rem;
}
.nav li a:hover {
text-decoration: underline;
}
#developed {
font-size: .6rem;
opacity: .5;}
/*------
MEDIA QUERIES
---------*/
@media screen and (max-width: 3840px){
.container {
width: 90%;
max-width: 3840px;
}
}
@media screen and (max-width: 1920px){
.container {
max-width: 1920px;
}
#intro {
height: 900px !important;
}
#descripcion {
width: 100%;
-webkit-transform: translateY(10%);
-ms-transform: translateY(10%);
transform: translateY(10%);
}
.button {
width: 20%;
}
}
@media screen and (min-width: 960px) and (max-width: 1199px){
article > section:nth-child(1) {
background-image: -webkit-gradient( linear, left top, right top, from(rgba(22, 21, 21, 1)) , to(rgba(44,42,42,0))), url(../images/about/horizontal0.jpg);
background-image: -o-linear-gradient( left, rgba(22, 21, 21, 1) , rgba(44,42,42,0)), url(../images/about/horizontal0.jpg);
background-image: linear-gradient( to right, rgba(22, 21, 21, 1) , rgba(44,42,42,0)), url(../images/about/horizontal0.jpg);
background-position-x: 70%;
}
.col h3 {
font-size: 1.05rem;
}
h2 {
font-size: 1.43rem;
}
#descripcion {
-webkit-transform: translateY(11%);
-ms-transform: translateY(11%);
transform: translateY(11%);
font-size: .9em;
}
}
@media screen and (max-width: 959px){
article > section:nth-child(1) { padding: 0; margin: 0;}
article > section:nth-child(1) {
background-image: -webkit-gradient( linear, left top, right top, from(rgba(22, 21, 21, 1)) , to(rgba(44,42,42,0))), url(../images/about/horizontal.jpg);
background-image: -o-linear-gradient( left, rgba(22, 21, 21, 1) , rgba(44,42,42,0)), url(../images/about/horizontal.jpg);
background-image: linear-gradient( to right, rgba(22, 21, 21, 1) , rgba(44,42,42,0)), url(../images/about/horizontal.jpg);
background-position-x: 60%;
}
.container {
width: 93%;
}
header {
width: 100%;
}
#intro{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column wrap;
flex-flow: column wrap;
}
h1 {
font-size: 3.3rem;
}
#descripcion {
-webkit-transition-duration: 1000ms;
-o-transition-duration: 1000ms;
transition-duration: 1000ms;
z-index: 20;
width: 100%;
-webkit-transform: translateY(10%);
-ms-transform: translateY(10%);
transform: translateY(10%);
padding: 2em 2em;
left: 0;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#descripcion p {
font-size: .8em;
font-weight: 500;
}
h1 {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-size: 2.2rem;
}
}
@media screen and (max-width: 659px){
section {
width: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
background-position: center;
}
article > section:nth-child(1) {
background-image: -webkit-gradient( linear, left top, left bottom, from(rgba(22, 21, 21, 0.6)) , to(rgba(44,42,42,0.1))), url(../images/about/vertical.jpg);
background-image: -o-linear-gradient( top, rgba(22, 21, 21, 0.6) , rgba(44,42,42,0.1)), url(../images/about/vertical.jpg);
background-image: linear-gradient( to bottom, rgba(22, 21, 21, 0.6) , rgba(44,42,42,0.1)), url(../images/about/vertical.jpg);
background-position: center;
}
@-webkit-keyframes bgmove2 {
0% {transform: scale(1);}
100% {transform: scale(2);}
}
@keyframes bgmove2 {
0% {transform: scale(1);}
100% {transform: scale(2);}
}
header {
width: 100%;
height: 100px;
}
#infoContacto {
position: absolute;
top: 60%;
width: 100%;
text-align: center;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.icono {
height: 32.5%;
top: 5%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
left: 50%;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: absolute;
float: center;
width: 30px;
}
/*SECCION 1*/
article > section:nth-child(1) {
height: 100%;
}
#descripcion {
left: 0;
-webkit-transition-duration:1000ms;
-o-transition-duration:1000ms;
transition-duration:1000ms;
margin: 0px 0;
-webkit-transform: translateY(10%);
-ms-transform: translateY(10%);
transform: translateY(10%);
z-index: 20;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
padding: 2em 3em;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#intro {
height: 1300px !important;
}
h1 {
-webkit-transition-duration:2000ms !important;
-o-transition-duration:2000ms !important;
transition-duration:2000ms !important;
z-index: 20;
text-align: center;
font-size: 1.7rem;
font-family: arial, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
margin-bottom: 25px;
margin-top: 20px;
}
#descripcion p {
text-align: center;
z-index: 20;
font-size: .8rem;
width: 100%;
margin-bottom: 30px;
line-height: 1.3;
font-weight: 300;
font-family: 'Montserrat', sans-serif;
}
.button {
width: 300px;
left: 50%;
-webkit-transform: translateX(-50%) !important;
-ms-transform: translateX(-50%) !important;
transform: translateX(-50%) !important;
}
.button2 {
width: 300px;
left: 50%;
margin-top: 12%;
-webkit-transform: translateX(-50%) !important;
-ms-transform: translateX(-50%) !important;
transform: translateX(-50%) !important;
}
#scroll1, #scroll2 {
z-index: 20;
position: absolute;
background-position: center;
height: 10%;
width: 100%;
margin-bottom: -10px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
left: 0;
}
/*pie de pagina*/
#pieDePagina {
text-align: center;
}
.nav {
float: none;
}
.nav li {
display: block;
margin: 20px 0;
}
.copyright {
float: none;
border-top: 1px solid #fff;
margin-top: 30px;
}
#icons {
display:flex;
text-align: center;
align-items: center;
justify-content: space-around;
padding: 0 2em 0 2em;
margin: 1em 0 1em 0;
}
}
@media screen and (max-width: 659px){
#descripcion {
padding: 0 2em;
}
.button {transform: translateX(-50%)translateY(-35%) !important;}
#icons {
display:flex;
text-align: center;
align-items: center;
justify-content: space-around;
margin: 1em 0 1em 0;
}
}
@media screen and (max-width: 480px){
.nav li a {
padding-right: 0rem;
}
#icons {
display:flex;
text-align: center;
align-items: center;
justify-content: space-around;
margin: 1em 0 1em 0;
}
}