/*Size guide
    font-family: "coolvetica", sans-serif; font-weight: 300; font-style: normal;
    font-family: "coolvetica", sans-serif; font-weight: 400; font-style: normal;
    font-family: "coolvetica", sans-serif; font-weight: 500; font-style: normal;
    font-family: "coolvetica", sans-serif; font-weight: 700; font-style: normal;
    font-family: "coolvetica", sans-serif; font-weight: 900; font-style: normal;
    font-family: "fira-sans", sans-serif; font-weight: 400; font-style: normal;
    font-family: "fira-sans", sans-serif; font-weight: 400; font-style: italic;
    font-family: "fira-sans", sans-serif; font-weight: 700; font-style: normal;
    font-family: "fira-sans", sans-serif; font-weight: 700; font-style: italic;
    font-family: "fira-sans-2", sans-serif; font-weight: 500; font-style: normal;
/*----------------------------------------------General----------------------------------------------*/
body{
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #0F0920;
    font-family: 'fira-sans', sans-serif;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smooth: antialiased;
    text-rendering:optimizeLegibility !important;
}
.AnchoCuerpo{
    max-width: 1000px;
    margin: auto;
}
h1{font-family: 'coolvetica'; font-weight: 700; margin: 15px 0; font-size: 3.5em; text-shadow: 0 0 20px rgba(138, 127, 255, .95);}
h2{font-family: 'coolvetica'; font-weight: 600; margin: 12px 0; font-size: 2.5em; text-shadow: 0 0 16px rgba(138, 127, 255, .85);}
h3, .subHeader {font-family: 'coolvetica'; font-weight: 500; margin: 10px 0; font-size: 1.8em; color: silver; text-shadow: -1px 1px 2px rgba(0, 0, 0, .4);}
p, ul{font-family: 'fira-sans'; font-weight: 400; color: #dbdbdb;}
p{ margin: 10px 0; font-size: 1em; text-shadow: -1.3px 1.3px 1.5px #0F0920;}
.bold{font-family: 'fira-sans'; font-weight: 700;}
.name{font-family: 'fira-sans'; font-weight: 600; font-size: 1.3em;}  
.button{
    display: flex; 
    width:fit-content;
    text-decoration: none;
    margin: 30px auto; 
    font-family: 'fira-sans'; font-weight: 500;
    color: white; 
    background-color: gray; 
    font-size: 1em; 
    padding: 10px 25px; 
    border-radius: 25px;
    transition: all 300ms;}
.button:hover{background-color: #4c61b6; box-shadow: 2px 0 8px rgba(0, 0, 0, .3); transition: all 300ms;}
.Title1{
    width: 70%;
    margin: auto;
    text-align: center;
    margin: 170px auto;
}
.Title1 p{text-align: left;}
.Title1 img{display: block;margin: 0 auto;width: 100%;}

.Title1{
    width: 60%;
    margin: 150px auto;
    text-align: center;
}
.Title2{
    width: 60%;
    margin: 180px auto 20px auto;
    padding-left: 20px;
}
.Title3{
    width: 80%;
    margin: 0 auto;
    align-self: center;
}

.TitleL {
    display:flex;
    max-width: 1000px;
    height: 480px;
    margin-bottom: 100px;
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    border-radius: 10px;
}
.TitleL .Text{
    position: relative;
    width: 400px;
    margin: auto 0;
}
.TitleLR {
    display:flex;
    max-width: 1000px;
    height: 500px;
    margin-bottom: 100px;
    background-repeat: no-repeat;
    background-position: left top;
    background-size:80%;
}
.TitleRL {
    display:flex;
    max-width: 1000px;
    height: 500px;
    margin-bottom: 100px;
    background-repeat: no-repeat;
    background-position: right top;
    background-size:80%;
}
.TitleLR .Text{
    position: relative;
    width: 400px;
    margin: auto 0 auto auto;
}
.TitleRL .TextL{
    position: relative;
    width: 400px;
    margin: auto 0 auto 0;
}
.TitleR {
    display:flex;
    max-width: 1000px;
    height: 480px;
    margin-bottom: 100px;
    background-repeat: no-repeat;
    background-position: left;
    background-size: contain;
    border-radius: 10px;
}
.TitleR .Text{
    position: relative;
    width: 400px;
    margin: auto 0 auto auto;
}
video{border-radius: 10px;}
.video{margin-bottom: 100px;}
/*----------------------------------------------Navigation----------------------------------------------*/
header {
    background-color: rgba(7, 1, 22, .8);
    position: fixed;
    top: 0;left: 0;
    width: 100%;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
.containerNav {
    display: flex;
    margin: 0 auto;
    max-width: 1000px;
}
.navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.menu-container{display: flex;gap: 7px;}
.nav-list, .nav-list-lang{
    display: flex;
    list-style: none;
    width:fit-content;
    padding: 5px;
    background-color: #1d1730;
    border-radius: 20px;
    gap: 5px;
    box-shadow: inset -1px 1px 3px rgba(0, 0, 0, .3);
}
.nav-list-lang .nav-link, .nav-list-lang .buttonActive{ width: auto;}
.nav-list-lang .nav-link img, .nav-list-lang .buttonActive img{margin: auto 5px;padding: 0;vertical-align: bottom;}
.nav-link, .buttonActive{
    text-decoration: none;
    font-size: 1em;
    width: 80px;
    text-align: center;
    font-family: 'coolvetica'; font-weight: 600;
}
/*----------------------------------------------Footer----------------------------------------------*/
footer, footer p{
    text-align: center;
    color: gray;
    font-family: 'coolvetica'; font-weight: 500;
}
footer{padding: 20px 0;background-color: #070116;}
.logos{
    width:fit-content;
    margin: auto;
    padding: 5px;
    background-color: #1d1730;
    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: 1em;
    transition: all 500ms;
    display: inline-block;
    padding: 7px 9px;
    border-radius: 20px;
    text-decoration: none;
    color: white;
    background-color: transparent;
}
.logos a:hover, .nav-link:hover, .buttonActive{
    transition: all 500ms;
    color: white;
    background-color: #4D4ABB;
    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: #1d1730;
}
.imgGrid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    margin: 0;
}
.imgItem {
    display: flex;
    font-family: Agdasima;
    color: rgba(255, 255, 255, 0);
    opacity: 30%;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 10px;
}
.imgItem img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.imgItem:hover{
    transition: all 300ms;
    box-shadow: 2px 0 8px rgba(0, 0, 0, .3);
    opacity: 100% ;
}
/*----------------------------------------------Audio----------------------------------------------*/
.audioContainer{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    border-radius: 10px;
    border: solid 5px #1d1730;
}
audio{
    width: 26%;
    padding: 2%;
}
.audioInfo{
    width: 66%;
    padding: 2%;
    background-color: #1d1730;
}
/*----------------------------------------------Video----------------------------------------------*/
.videoContainer{
    display: grid;
    grid-template-columns: 49.5% 49.5%;
    gap: 1%;
}
video{
    width: 100%;
    height: 100%;
    border-radius: 10px;
}
.videoDemoContainer{display: none; position: fixed; z-index: 2; width: 100%; height: 100%; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); background-color: rgba(7, 1, 22, .8); top: 0; left: 0;}
.videoDemoContainer video{ width: 98%; height: 98%; max-width: 1280px; max-height: 720px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.videoDemoContainer .contenedorBtnGalGde{z-index: 4; bottom: auto; top: 20px; left: auto; right: 40px;}
.tituloVideo{z-index: 4;}
.tituloVideo{display: block;position: fixed; top: 20px; left: 40px; font-family: 'fira-sans'; font-weight: 500; font-size: 1.2em; padding: 7px 15px; border-radius: 18px;
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: white; background-color: rgba(7, 1, 22, .5); box-shadow: 1px 0 4px rgba(0, 0, 0, .3);
}
/*----------------------------------------------Text+Pictures (Sections)----------------------------------------------*/
.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: #1d1730;
    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-weight: 400; 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;}
label{display: block; margin-bottom: 10px;}
.TextInputs{display: flex; justify-content: space-between;}
#mensaje{display: block; text-align: center;}
textarea{width:96%; margin: 0 auto; font-family: 'fira-sans'; font-weight: 400; font-size: 1em;}
#errores{max-width: 96%; margin-bottom: 30px;}
/*----------------------------------------------BacksIndex----------------------------------------------*/
#Back1{background-image: url("../img/Grading.webp");}
#Back2{background-image: url("../img/Logic.webp");}
#Back3{background-image: url("../img/Motion.webp");}
#Back4{background-image: url("../img/Transitions.webp");}
#Back5{background-image: url("../img/Formats.webp");}
#proyBack1{background-image: url("../video/min01Alexa.webp");}
#proyBack2{background-image: url("../video/min02Burukas.webp");}
#proyBack3{background-image: url("../video/min03Inter.webp");}
#proyBack4{background-image: url("../video/min04Pao.webp");}
#proyBack5{background-image: url("../video/min05Boda.webp");}
/*----------------------------------------------Responsive----------------------------------------------*/
@media all and (max-width : 1000px ){
    #Back1{background-image: url("../img/GradingMob.webp");}
    #Back2{background-image: url("../img/LogicMob.webp");}
    #Back3{background-image: url("../img/MotionMob.webp");}
    #Back4{background-image: url("../img/TransitionsMob.webp");}
    #Back5{background-image: url("../img/FormatsMob.webp");}
    .TitleL, .TitleLR, .TitleR, .TitleRL {height:600px; background-size: 80%; background-position: top center;}
    .TitleL .Text, .TitleLR .Text, .TitleR .Text{margin: 80px 15% 180px auto;top: 120px;}
    .TitleRL .TextL{margin: 80px auto 180px 15%; top: 120px;}
    .video{width: 96%;margin: 0 auto 100px auto;}
    .containerNav {flex-direction: column;}
    .name{margin-bottom: 0;margin-top: 15px;}
    .audioContainer{flex-direction: column; width: 94%; margin: 0 auto 10px auto;}
    audio{width: 96%; margin: 0 auto;}
    .audioInfo{width: 96%; 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;}
    .nav-link, .buttonActive{width:fit-content;padding-left: 15px;padding-right: 15px;}
}
@media all and (max-width : 700px ){
    .TitleL, .TitleLR, .TitleR, .TitleRL {height:500px;background-size: 94%;}
    .TitleL .Text, .TitleLR .Text, .TitleR .Text{margin: 100px auto;top: 60px;}
    .TitleRL .TextL{margin: 100px auto;top: 60px;}
    .video{width: 94%;}
    .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;}*/
}