/********** ESTILOS GENERALES DE PLANTILLA **********/
:root {
    --primaryColor: #7648E0;
    --secundaryColor: #8F5EFF;
    --terColor: #9d78bd;
    --sectionTransparent: rgba(229, 234, 245,1);
    --matGradient: linear-gradient(to left, #000000, #434343);;
}
*{
    margin: 0;
    padding: 0;
    word-wrap: break-word;
    box-sizing: border-box;
}
a{
    text-decoration: none;
}

/***************** ANIMATIONS ************/
@keyframes hoverMove{
    0%{
        transform: rotate(0deg) scale(1);
    }25%{
        transform: rotate(-10deg) scale(1.1);
    }50%{
        transform: rotate(10deg) scale(1.1);
    }100%{
        transform: rotate(0deg) scale(1);
    }
}
@keyframes hoverBig{
    0%{
        transform: scale(1);
    }25%{
        transform: scale(1.13);
    }50%{
        transform: scale(1);
    }75%{
        transform: scale(1.13);
    }100%{
        transform: scale(1);
    }
}
@keyframes hiddenFromLeft{
    0%{
        transform: translateX(-200%);
    }100%{
        transform: translateX(0%);
    }
}
@keyframes hiddenFromRight{
    0%{
        transform: translateX(200%);
    }100%{
        transform: translateX(0%);
    }
}
@keyframes hiddenFromTop{
    0%{
        transform: translateY(-200%);
    }100%{
        transform: translateY(0%);
    }

}
summary{
    list-style-image: none;
}

/***************** NAVIGATION BAR ************/
.navigation{
    background-color: var(--primaryColor);
    display: flex;
    justify-content: space-around;
    padding: 5px;
}
.logo img{
    width: 50%;
}
.logo img:hover{
    animation-name: hoverMove;
    animation-iteration-count: infinite;
    animation-duration: 3s;

}
.menuNav{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 55%;
}
.menuNav .element{
    display: flex;
    align-items: center;
    margin: auto;
}
.element a {
    font-size: 1.3em;
    color: white;
    font-family: 'Oswald', sans-serif;

    padding: 15px;
    border-bottom: 2px solid var(--secundaryColor)
}
.element a:hover{
    background-color: var(--secundaryColor);
    transition: 0.5s all;
    border: 1px solid white;
    border-radius: 15px;
    transform: scale(1.15);
}
.activePage{
    background-color: var(--secundaryColor);
    transition: 0.5s all;
    border: 1px solid white;
    border-radius: 15px;
}
body{
    background-color: #dce2ee;
}
.banner img{
    width: 100%;
    height: 50vh;
}


/********************** COURSES ********************/
.messageCourses{
    width: 80%;
    font-size: 1.6em;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    margin: 25px auto;
    overflow: hidden;
    text-shadow: 2px 2px 2px var(--secundaryColor);
    animation: hoverBig linear 3s infinite;
}
.courses{
    width: 95%;
    margin: 1% auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    animation-name: hiddenFromLeft;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-timing-function: ease-in-out;
}
.courses img{
    width: 100%;
}
.courses img:hover{
    animation-name: hoverMove;
    animation-iteration-count: infinite;
    animation-duration: 2s;
}


/************************ FOOTER *******************/
footer{
    background-color: var(--primaryColor);
    display: flex;
    flex-flow: column wrap;
}
.menuFooter{
    width: 90%;
    margin: 1.5% auto;
    text-align: center;
    font-size: 1.2em;
}
.menuFooter *{
    margin: 10px;
}
.menuFooter p,
.menuFooter > a{
    color: white;
}
.menuFooter iframe{
    width: 100%;
    height: 250px;
    margin: 0 auto;
}
.menuFooter .social a{
    font-size: 2.3em;
    color: white;
}
.menuFooter .social a:hover{
    background-color: var(--secundaryColor);
    transition: 1s all;
    border: 1px solid white;
    border-radius: 50%;
}
.menuFooter > a{
    text-decoration: underline;
    font-size: 1.2em;
}
.goStart{
    width: 8%;
    padding: 10px;
    font-size: 1em;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    text-align: center;
    color: white;
    text-shadow: 2px 2px 2px black;
    background-color: var(--secundaryColor);
    border:1px solid black;
    box-shadow: 1px 1px 1px var(--secundaryColor);
    border-radius: 100%;
    position: fixed;
    left: 90%;
    top: 90%;
    animation: hoverBig linear 3s infinite;
}
/**************************************************/



/**************** SECTION INDEX *******************/
section{
    width: 90%;
    margin: 1.5% auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: #f7f7f8;
    box-shadow: 1px 1px 4px gray;
    overflow: hidden;
}
.containerPrincipal .title{
    font-size: 1.7em;
    left: -200%;
    position: relative;
    font-family: 'Ubuntu', sans-serif;
}
.containerPrincipal .description{
    font-size: 1.1em;
    left: -200%;
    position: relative;
    font-family: 'Oswald', sans-serif;
}
section .info{
    background-color: white;
    margin: 0 auto 1.5% auto;
    background-image: url("img/content/foto1.jpg");
    overflow: hidden;
}
section .info, .form{
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: center;
    height: auto;
}
section .info *{
    padding: 25px;
    width: 25%;
    
}
section .element{
    padding: 1%;
    margin: 1.5% auto;
    width: 47%;
    overflow:hidden;
}
section .element .title{
    text-align: center;
}
section .element .description{
    margin: 20px;
}
section .comments{
    width: 90%;
    display: flex;
    flex-flow: row wrap;
    margin: 0 auto 30px auto;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    background-color: var(--sectionTransparent);
    box-shadow: -1px -1px 10px #ccc;
    border-radius: 50px;
    padding: 10px;
    right: -200%;
    position: relative;
}
section .comments > div{
    width: 100%;
}
section .comments > div .messageCourses{
    font-size: 1.3em;
    margin-top: 10px;
}
section .comments .score{
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
section .comments .score .icon-star,
section .comments .score .icon-star-empty{
    color: var(--secundaryColor);
    font-size: 1.5em;
}
section .comments h4,
section .comments blockquote{
    margin: 15px auto;
    text-transform: uppercase;
    font-weight: bold;
}
.comments .name{
    letter-spacing: 5px;
}
section .comments img{
    height: 200px;
    width: 200px;
    border-radius: 100%;
    border: 5px solid var(--primaryColor);
    box-shadow: 1px 1px 1px black;
}
.form{
    display: flex;
    justify-content: flex-end;
    width: 90%;
    margin: 1.5% auto;
    background-image: url("img/content/foto2.jpg");
    position: relative;
    opacity: 0;
}
.form form{
    display: flex;
    flex-flow: column wrap;
    padding: 25px;
    width: 30%;
    background-color: lightskyblue;   
}
.form form *{
    margin: 5px auto; 
    width: 100%;
    text-align: center;
    font-family: 'Oswald', sans-serif; 
}
.form .titleForm{
    font-size: 1.9em;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
}
.form form input[type='submit']{
    background-color: var(--secundaryColor);
    color: white;
    border: 3px solid var(--primaryColor);
    padding: 10px;
}
form input[type="text"],
form input[type="email"]{
    height: 2.5em;
}




/******** PAGINA CAPACITACION Y COACHING ***************/
section .container{
    display: grid;
    grid-gap: 25px;
    grid-template-areas: 
    "menuContainer"
    "course"
    "presentation"
    "material";
    overflow: hidden;
}
.menuContainer{
    grid-area: menuContainer;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin-top: 25px;
    position: relative;
    right: -200%;
}
.menuContainer a{
    color: color;
    font-size: 1em;
    border:1px solid var(--secundaryColor);
    border-radius: 15px;
    padding: 15px;
    margin: 5px 10px;
    font-family: 'Oswald', sans-serif;
}
.menuContainer a:hover{
    transform: scale(1.1);
    transition: 0.5s all;
}
.activeMaterial{
    border: 1px solid white;
    color: white;
    background-color: var(--secundaryColor);
}
.container .course{
    grid-area: course;
    display: grid;
    grid-template-columns: 70% 30%;
    margin: 15px;
    position: relative;
    left: -200%;
}
.container .course img{
    width: 100%;
    border-radius: 15px;
}
.container .course div{
    color: white;
    display: flex;
    align-items: center;
    border-radius: 0 15px 15px 0;
}
.container .course .resume{
    background-image: var(--matGradient);
    padding: 20px;
    height: auto;
    width: 100%;
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
}
.container .course .resume .titleResume{
    font-weight: bold;
    font-family: 'Ubuntu', sans-serif;
    font-size: 1.1em;
}
.container .course .resume ul > li{
    list-style: disc;
    margin-left: 15px;
    font-size: 0.9em;
    font-family: 'Oswald', sans-serif;

}
.container .course .resume ul ul li{
    list-style: circle;
    margin-left: 30px;
    
}

.container .presentation{
    grid-area: presentation;
    justify-self: center;
    margin: 0 auto;
    width: 90%;
}
.container .presentation .titleParrafo{
    font-weight: bold;
    font-size: 1.4em;
    margin: 15px auto;
    position: relative;
    left: -200%;   
    font-family: 'Ubuntu', sans-serif;
}
.container .presentation .description{
    font-size: 1.1em; 
    font-family: 'Ubuntu', sans-serif;
    position: relative;
    right: -200%;
    text-align: justify;
    margin: 15px auto;
}
.container .presentation span{
    font-weight: bold;
}
.container .presentation ul li{
    margin: 10px 25px;
    font-size: 1.1em; 
    font-family: 'Ubuntu', sans-serif;
    text-align: justify;
}
.container .presentation #uls, 
.container .presentation #ols{
    position: relative;
    left: -200%;
}

.container .material{
    grid-area: material;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin: 1% 0 5% 0;
}
.container .material ol{
    width: 35%;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    position: relative;
    left: -200%;
    font-size: 1.1em; 
    font-family: 'Ubuntu', sans-serif;
}
.container .material ol li{
    padding: 20px;
    list-style: none;
    text-transform: uppercase;
    text-align: center;
    border-radius: 15px;
    border: 1px solid var(--secundaryColor);
}
.container .material ol li:hover{
    transform: scale(1.1);
    transition: 0.5s all;
}

.container .material .content{
    width: 55%;
    text-align: center;
    position: relative;
    right: -200%;
}
.container .material .content p{
    font-size: 1.1em; 
    font-family: 'Ubuntu', sans-serif;
}

.container .material .content img{
    width: 45%;
}
.container .material .content div{
    text-align: justify;
}
.container .material .content div .important{
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
}
.container .material .content ul li{
    margin-left: 30px;
    font-size: 1.1em; 
    font-family: 'Oswald', sans-serif;
}

/************ PAGE DICCIONARIOS ***************/
.containerSimple{
    width: 100%;
    overflow: hidden;
}
.containerSimple .menuContainerSimple{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    margin-top: 15px;
    position: relative;
    left: -200%;
}
.menuContainerSimple a{
    font-size: 1em;
    border: 1px solid var(--secundaryColor);
    border-radius: 15px;
    padding: 15px;
    margin: 5px 20px;
    font-size: 1em; 
    font-family: 'Oswald', sans-serif;
}
.menuContainerSimple a:hover{
    transform: scale(1.1);
    transition: 0.5s all;
}
.containerSimple .courseSimple{
    display: flex;
    flex-flow: column wrap;
}
.containerSimple .courseSimple img{
    width: 50%;
    margin: 15px;
    border-radius: 50px;
}
#imgCourseSimple1, #imgCourseSimple2{
    position: relative;
    left: -200%;
}
.containerSimple .courseSimple .goToImage{
    width: 25%;
    position: absolute;
    transform: translate(160%, -100%);
    opacity: 0;
    z-index: 1;
}
.containerSimple .presentationSimple{
    margin: 15px 50px;
}
.containerSimple .presentationSimple .titleParrafo{
    font-weight: bold;
    font-size: 1.4em;
    font-family: 'Ubuntu', sans-serif;
    position: relative;
    left: -200%;

}
.containerSimple .presentationSimple span,
.container .presentation span{
    font-weight: bold;
}
.containerSimple .presentationSimple .description {
    font-size: 1.1em; 
    font-family: 'Oswald', sans-serif;
    position: relative;
    right: -200%;
    text-align: justify;
}
.containerSimple .presentationSimple ul li,
.containerSimple .presentationSimple ol li{
    font-size: 1.1em; 
    font-family: 'Oswald', sans-serif;
    margin-left: 30px;
}
.containerSimple .presentationSimple #ols{
    position: relative;
    left: -200%;
}




/****************** PAGE EVALUATIONS ***************/
.eval{
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    overflow: hidden;
}
section .containerEvaluations{
    display: grid;
    grid-gap: 5px;
    width: 100%;
    margin:auto;
    grid-template-columns: 1fr 1fr;
    text-align: center;
}
section .containerEvaluations a img{
    width: 100%;
    padding: 5px;
}
section .containerEvaluations a img:hover{
    transform: scale(1.07);
    transition: all 0.8s;
}

/****************** PAGE JOBS ***************/
.jobs{
    display: flex;
    flex-flow: column wrap;
    width: 90%;
    overflow: hidden    ;
}
.jobs > .avise{
    font-size: 1.3em;
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;
    text-decoration: underline;
    margin: 15px 40px;
    text-align: center;
}
.jobs .declaration,
.jobs li{
    margin: 10px auto;
    width: 85%;
    font-family: 'Oswald', sans-serif;
    font-size: 0.9em;

}
.jobs ul ul li{
    list-style: disc;
}
.liLetter{
    list-style: upper-latin;
}
.jobs .declaration{
    text-align: justify;
}
.jobs a,
.jobs span{
    text-decoration: underline;
    font-weight: bold;
}
.jobs li{
    margin-left: 10%;
    text-align: justify;
    margin: 0 auto;
}
.form-job{
    background-image: url("img/content/jobs.png");
}
.form-job *{
    font-family: 'Oswald', sans-serif;
}
.form-job .title{
    font-weight: bold;
    font-size: 1.4em;
}
.form-job .eleccion{
    font-size: 0.9em;
    font-weight: bold;
}
.form-job div{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}
.form-job div *{
    width: 15%;
    margin: 0;
}





/* ======================================================
============= RESPONSE DESIGN ============================
====================================================== */
@media (max-width: 1168px){
    .element a{
        font-size: 1.2em;
    }
}
@media (max-width: 1088px){
    .element a{
        font-size: 1.1em;
    }
    .info h1,
    .info p{
        width: 40%;
    }
    .container .course{
        grid-template-columns: 100%;
    }
    .container .course div{
        border-radius: 0 0 15px 15px;
        width: 75%;

    }
    .container .course img{
        width: 80%;
    }
}
@media (max-width: 1016px){
    .logo a{
        display: flex;
        justify-content: center;
    }
    .logo img{
        width: 60%;
    }
    .navigation{
        flex-flow: column wrap;
        align-items: center;
        justify-content: center;
    }
    .menuNav{
        width: 100%;
        font-size: 1em;
        margin: 25px auto;
    }

}
@media (max-width: 975px){
    #contact form{
        width: 55%;
    }
    .form-job form{
        width: 55%;
    }
    .course > div .resume{
        width: 100%;
    }
}

@media (max-width: 885px){
    .info h1,
    .info p{
        width: 60%;
    }
    .container .material{
        flex-flow: column wrap;
        align-items: center;
    }
    .material li{
        margin: 5px;
    }
    .container .presentation{
        width: 90%;
    }
    .container .material #tabs,
    .container .material .content{
        width: 90%;
        margin: 15px auto;
    }
    .container .material .content img{
        width: 250px;
    }
    .container .material .content .desContent{
        width: 100%;
    }
    .containerSimple .courseSimple img{
        width: 80%;
        margin: 15px auto;
    }
    .containerSimple .courseSimple .goToImage {
        transform: translate(150%, -50%);
    }
    .goStart{
        width: 10%;
        left: 99%;
    }
}
@media (max-width: 800px){
    .container .course{
        grid-template-columns: 90%;
        justify-content: center;
    }
    .container .course div, 
    .container .course img{
        width: 100%;
        align-self: center;
        justify-self: center;
    }
    .eval .containerEvaluations{
        grid-template-columns: 100%;
    }
    .eval .messageCourses{
        font-size: 1.2em;
    }
}
@media (max-width: 699px){
    .goStart{
        width: 12%;
        left: 87%;
    }
}
@media (max-width: 580px){
    .goStart{
        width: 13%;
        left: 86%;
    }
}
@media (max-width: 530px){
    section .element,
    #contact form{
        width: 100%;
    }
    .form-job form{
        width: 100%;
    }
    .container .material .content img{
        width: 200px;
    }
    section .containerEvaluations a img{
    height: 25vh;
    }
    .goStart{
        width: 15%;
        left: 84%;
    }
}
@media (max-width: 458px){
    .logo img{
        width: 40%;
    }
    .menuNav{
        margin: 15px auto;
    }
    #imgBanner{
        height: 30vh;
    }
    .courses a{
        width: 32%;
    }
    .info h1,
    .info p{
        width: 100%;
    }
    .goStart{
        font-size: 0.9em;
        width: 16%;
        left: 82%;
    }
}
@media (max-width: 394px){
    .menuNav{
        font-size: 0.8em;
    }
    .goStart{
        font-size: 0.7em;
        width: 18%;
        left: 80%;
    }
}