/*Font size guide
    "coolvetica" 300, 400, 500, 700 y 900 font-style: normal;
    "fira-sans" 400 y 700 font-style: normal - "fira-sans" 400 y 700 font-style: italic;
    "fira-sans-2" 500 font-style: normal;
/*----------------------------------------------Variable Colors--------------------------------------*/
:root {--emphasis: #4D4ABB}
/*----------------------------------------------General----------------------------------------------*/
body{
    width: 100%; margin: 0; padding: 0; background-color: #eee; font-family: 'fira-sans', sans-serif; 
    font-weight: 400; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; 
    font-smooth: antialiased; text-rendering:optimizeLegibility !important;}
.AnchoCuerpo{ width: 100%; max-width: 1000px; margin: auto;}
.headline{ display: block; width: 100%; text-align: center;}
.headline img{width: 100%;}
h1, h2, h3, h4, h5 {font-family: 'coolvetica';}
h1{ margin: 15px 0; font-weight: 900; font-size: 3em;}
h2{ margin: 12px 0; font-weight: 700; font-size: 2.5em;}
h3{ margin: 10px 0; font-weight: 500; font-size: 2em; color: var(--emphasis);}
h4{ margin: 5px 0; font-weight: 400; font-size: 1.5em; color: gray;}
h5{ margin: 5px 0; font-weight: 300; font-size: 1.2em;}
p, ul{font-family: 'fira-sans'; font-weight: 400;}
p{ margin: 10px 0; letter-spacing: -0.7px; font-size: 1em;}
.subHead{font-family: 'fira-sans'; margin: 10px 0; font-weight: 700; font-size: 1.4em; 
    font-style: italic; color: var(--emphasis);}
.bold{font-family: 'fira-sans'; font-weight: 700;}
.name{font-family: 'fira-sans'; font-weight: 700; font-size: 1.2em; letter-spacing: -1px; padding: 0;}
.button{
    display: flex; width:fit-content; text-decoration: none; margin: 30px auto; font-family: 'fira-sans'; 
    font-weight: 400; color: white; background-color: gray; font-size: 1em; padding: 10px 25px; 
    border-radius: 25px; transition: all 300ms;}
.button:hover{background-color: var(--emphasis); box-shadow: 2px 0 8px rgba(0, 0, 0, .3); 
    transition: all 300ms;}
.Title1{ width: 70%; margin: 150px auto; text-align: center;}
.Title2{ width: 70%;margin: 180px auto 50px auto; border-left: 10px solid var(--emphasis); 
    padding-left: 20px;}
.Title3{ width: 80%; margin: 0 auto; align-self: center;}
#mainTitle{margin-top: 0;}
/*----------------------------------------------Navigation----------------------------------------------*/
header {position: sticky; box-shadow: 1px 0 16px rgba(0, 0, 0, .1); width: 100%;
    background-color: white; top: 0; left: 0; z-index: 10;}
.navbar{ display: flex; align-items: center; justify-content: space-between; margin: 0 auto; padding: 0; 
    max-width: 1000px;}
.nav-list{ display: flex; list-style: none; width:fit-content; padding: 5px; background-color: #ddd;
    border-radius: 25px; box-shadow: inset -1px 1px 3px rgba(0, 0, 0, .3); margin: 10px 0; gap:5px;}
.nav-link, .buttonActive{ text-decoration: none; font-size: 1em; text-align: center;
    font-family: 'coolvetica'; font-weight: 400;} 
.mobileMenu{ display: none; position: fixed; width: 100%; height: 100%; top: 0; left: 0;
    background-color: rgba(255, 255, 255, 0.8); justify-content: center; margin: 0 auto;
    vertical-align: middle; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 10;}
.nav-container-mobile{ display: flex; flex-direction: column;
    background-color: white; height: fit-content; padding: 10px 20px; border-radius: 10px; margin: auto;
    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.15);}
.nav-list-mobile{ list-style: none; display: flex; flex-direction: column; gap: 5px; margin: 10px auto; 
    padding: 0; font-family: 'coolvetica';}
.nav-link-mobile, .nav-sublink-mobile{text-decoration: none; color: gray;}
.nav-link-mobile, .buttonActiveMobileL {font-size: 1.1em; font-weight: 500;}
.buttonActiveMobileS{font-weight: 500; margin-left: 12px;}
.nav-link-mobile:hover, .nav-sublink-mobile:hover, .buttonActiveMobile{color: var(--emphasis);}
.nav-sublink-mobile{margin-left: 12px;}
#cerrarMobile{ display: flex; align-self:flex-end; width:min-content; justify-content: center; margin: 0; 
    padding: 0; border-radius: 5px; transition: all 300ms ease-out;}
#cerrarMobile:hover{ box-shadow: -1px 1px 8px rgba(0, 0, 0, 0.3);}
#cerrarMobile img{margin: 0; padding: 0; cursor: pointer;}
.closeMenuMobile{width: 100%; text-align: right;}
#iconMenu{display: none; margin-left: 20px; cursor: pointer;}
/*----------------------------------------------Proyect Cards----------------------------------------------*/
.container { width: 100%; border-radius: 18px; margin-top: 100px; margin-bottom: 150px;}
.carousel{ display:grid; grid-template-columns: auto; row-gap: 20px;}
.cards{ display: flex; align-items: center; border-radius: 10px; background: #F9F9F9;    
    box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.15);}
.cardImgR{border-radius: 10px; margin: 5px;}
.cardImgL{border-radius: 10px; margin: 5px;}
.cardTxtR{ display: flex; padding: 0 50px; flex-direction: column; vertical-align: middle;
    gap: 0;}
.cardTxtR h2{margin: 5px 0;}
.cardTxtR h3, .cardTxtR p{margin: 3px 0;}
.cardTxtR .button{margin: 15px 0 0 auto;}
.tech{ text-align: center; width: 96%; padding: 2%; margin: 0;
    background-image: url("../galeries/1/tech.webp"); background-size: cover; background-position: center;
    border-radius: 10px;}
.fiveColums{ width: 100%; display: grid; grid-template-columns: auto auto auto auto auto;
    gap: 10px; color: white;}
.fiveColums div h3{color: gray;}
/*----------------------------------------------Footer----------------------------------------------*/
footer, footer p{ text-align: center; color: gray; font-family: 'coolvetica'; font-weight: 700;}
footer{ padding: 20px 0;background-color: white;}
.logos{ width:fit-content; margin: auto; padding: 5px; background-color: #ddd; border-radius: 20px;
    box-shadow: inset -1px 1px 3px rgba(0, 0, 0, .3);}
.logos a{ width: 90px; display: flex; vertical-align: bottom;}
.logos a, .nav-link, .buttonActive{ font-size: .9em; transition: all 500ms; display: inline-block;
    padding: 5px 15px; border-radius: 15px; text-decoration: none; color: black;
    background-color: transparent;}
.logos a:hover, .nav-link:hover, .buttonActive{ transition: all 500ms; color: white;
    background-color: var(--emphasis); box-shadow: -1px 1px 3px rgba(0, 0, 0, .3);}
.logos a img{ position: relative; margin: 0 5px; width: 1em; bottom: -1px;}
/*----------------------------------------------Galery Min----------------------------------------------*/
.imgGridContainer { width: 98%; bottom: 0; border-radius: 18px; padding: 1%; margin: 0;
    background-color: whitesmoke;}
.imgGrid{ display:grid; grid-template-columns: 24.25% 24.25% 24.25% 24.25%; column-gap: 1%;
    row-gap: 10px; margin: 0;}
.imgItem { transition: all 300ms; display: flex; position: relative; height: 200px;
    font-family: 'fira-sans-2'; font-weight: 500; border-radius: 10px; text-align: center;
    background-size: cover; color: rgba(255, 255, 255, 0); background-color: white;
    background-blend-mode: luminosity;}
.imgItem:hover{ transition: all 300ms; box-shadow: 2px 0 8px rgba(0, 0, 0, .3);
    background-blend-mode: normal;}
/*----------------------------------------------Audio----------------------------------------------*/
.audioContainer{ display: flex; align-items: center; margin-bottom: 20px;}
audio{ width: 38%; margin-right: 2%;}
.audioInfo{ width: 59%; border-left: 2px solid silver; padding-left: 1%;}
/*----------------------------------------------Video----------------------------------------------*/
.videoContainer{ display: grid; grid-template-columns: 49.5% 49.5%; gap: 1%;}
video{ width: 100%; border-radius: 10px;}
/*----------------------------------------------Text+Pictures----------------------------------------------*/
.pic1{width: 100%; margin: 0;padding: 0;}
.pic1 img{width:100%; margin: 0 0 4px 0; padding: 0; border-radius: 10px;cursor: zoom-in;}
.pic2{ display:grid; grid-template-columns: 49.7% 49.7%; gap: .6%; margin-bottom: .6%;}
.pic3, .pic4{ display: grid; gap: .6%; margin-bottom: .6%;}
.pic3{grid-template-columns: auto 28.8% auto;}
.pic4{grid-template-columns: auto auto auto auto;}
.pic2 img, .videoPic img, .pic3 img, .pic4 img{width: 100%; margin: 0; padding: 0; 
    border-radius: 10px;cursor: zoom-in;}
.pic2 .Title2 {margin: 0;}
.videoPic{display:grid; grid-template-columns: 29.7% 69.7%; gap: .6%; margin-bottom: .6%;
    align-items: center;}
.endNavButtons{ display: flex; width: fit-content; gap: 5px; margin: 150px auto;
    background-color: #ccc; padding: 5px; border-radius: 25px;}
.endNavButtons .button{margin: 0;}
.endNavButtons a img, .button img{width:1.2em; margin-right: 5px;}
.comment{width: 50%; margin: 40px auto; border-left: 2px solid silver; padding-left: 20px;}
/*----------------------------------------------Contact----------------------------------------------*/
form{margin: 0 auto 150px auto; font-family: 'fira-sans'; font-size: 1em;}
input, textarea{ background-color: white; border: 0; padding: 7px; font-size: 1em; 
    border-radius: 10px; margin: 0;}
input{border-style: none;}
.formGroup, #mensaje, #errores{margin: 0 auto 10px auto;}
label, .labelForm{display: block; margin-bottom: 10px;font-family: 'coolvetica'; font-weight: 300;}
.TextInputs{display: flex; justify-content: space-between;}
#mensaje{display: block; text-align: center; font-family: 'fira-sans';}
#mensaje textarea{width:96%; height: 70px; margin: 0 auto; font-family: 'fira-sans'; font-size: 1em;}
#errores{max-width: 96%; margin-bottom: 30px; font-family: 'fira-sans';}

/*----------------------------------------------Responsive----------------------------------------------*/
@media all and (max-width : 1200px ){
    .Title1{margin: 70px auto; text-align: left;}
    .Title2{margin: 100px auto 30px auto;}
    h1, h2, h3, h4 {text-align: left;}
    .container{width: 96%; margin: 100px 2% 70px 2%;}
    .cardImgR, .cardImgL{border-radius: 10px; margin: 5px;}
    .cardTxtR{padding: 20px;}
    .navbar{display: block;text-align: center;padding: 1px 0 10px 0;}
    .nav-list{margin: 0 auto;}
    .audioContainer{display: block; margin: auto; margin-bottom: 50px; border-left: 2px solid silver; 
        width: 96%; text-align: center;}
    audio{width: 90%;margin-right: 0;margin: 0 auto;}
    .audioInfo{width: 90%; border-left: 0;padding-left: 0;margin: auto;}
    .videoContainer{grid-template-columns: 100%;}
    video{width: 98%;margin: auto;}
    .endNavButtons{margin: 70px auto;}
    .pic1, .pic2, .pic3, .pic4{grid-template-columns: 100%; gap: 0; margin: 0;}
    .pic1 img, .pic2 img, .pic3 img, .pic4 img{width: 98%; margin: 0 1%; margin-bottom: 10px;}
    .TextInputs{flex-direction: column;}
    #mensaje textarea{width:50%; margin-top: 10px;}
    .tech h4{text-align: center;}
}
@media all and (max-width : 700px){
    .Title1{width: 80%;}
    .Title2{width: 80%;}
    .Title3{width: 90%;}
    .cards{flex-direction: column; width: fit-content; margin: auto;}
    #mainTitle{border: none; padding-left: 0;}
    #txt2, #txt4, #txt6, #txt8{order: 5;}
    #img2, #img4, #img6, #img8{order: -1;}
    .cardImgR, .cardImgL{margin: 0; margin-top: 20px;}
    .cardTxtR{width: 400px; margin: 0 auto;}
    .cardTxtR h2, .cardTxtR h3, .cardTxtR p {text-align: left;}
    .tech{max-width: 420px; margin: auto;}
    .fiveColums{grid-template-columns: auto auto auto;}
    .imgGridContainer {width: 96%;margin: auto;}
    .imgGrid{grid-template-columns: 49.5% 49.5%;row-gap: 5px;}
    .pic1 img, .pic2 img, .pic3 img, .pic4 img{margin-bottom: 6px;}
    #subTitleMain{text-align: center;}
}
@media all and (max-width : 470px){
    .navbar{display: flex; padding: 5px 20px;}
    #iconMenu{display: flex;}
    .Title1,.Title2, .Title3 {max-width: 340px;}
    .cards{width: 340px;}
    .cardTxtR{width: 300px; margin: 0 auto;}
    .tech{max-width: 320px;margin: auto;}
    .cardImgL, .cardImgR {width: 300px;}
    .nav-list{display: none;}
    .fiveColums{grid-template-columns: auto auto;}
}