/*HOJA DE ESTILOS DE LA PAGINA DE INICIO*/

/*Mini Banner para el eslogan*/
#contenedoreslogan{
    height: 400px;
    width: 100%;
    background-image: url("../Media_Resources/Images/Eslogan_Fondo.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
.contenidocontenedoreslogan{
    height: 400px;
    width: 100%;
}
/*Titulo del eslogan*/
.eslogan{
    color: white;
    text-transform: uppercase;
    margin-left: 40px;
    margin-top: 15px;
    font-size: 45px;
    font-style: italic;
}
/*SubTitulo del eslogan*/
.subeslogan{
    margin-left: 40px;
    margin-right: 40px;
    margin-top: 5px;
    font-size: 20px;
    font-style: oblique;
    color:white;
}
/*Boton del header del eslogan*/
.btneslogan{
    margin-left: 35px;
    margin-top: 20px;
}
/*Sobre Nosotros*/
#contenedorquienessomos{
    width: 100%;
    height: 450px;
    display: inline-block;
    background-color: whitesmoke;
}
.contenidoquienessomos{
    text-align: center;
}
.contenidoquienessomos>img{
    height: 200px;
    width: 300px;
    margin-top: 20px;
}
.contenidoquienessomos>h1{
    margin-bottom: 20px;
    font-size: 45px;
    text-transform: uppercase;
}
.contenidoquienessomos>p{
    margin-bottom: 30px;
    font-size: 20px;
}
.contenidoquienessomos>.btn{
    border: 2px solid rgb(27, 27, 27);
    color:black;
}
.contenidoquienessomos>.btn:hover{
    border: 2px solid rgb(255, 132, 0);
    color: white;
}
/*Nuestro Panel*/
.nuestropanelizquierda{
    background-color: rgb(27, 27, 27);
    width: 40%;
    height: 500px;
    float: left;
    color: white;
    text-align: center;
}
.nuestropanelderecha{
    background-image: url("../Media_Resources/Images/NuestroPanel_Fondo.jpg");
    background-position: center;
    background-repeat: no-repeat;
    /*background-attachment: fixed;*/ /*No me termina de convencer como queda, hay que hecharle un ojo en otro momento*/
    background-size: cover;
    width: 60%;
    height: 500px;
    float: right;
}
.nuestropanellogotb{
    height: 150px;
    width: 150px;
    margin-top: 30px;
}
.titulonuestropanel{
    margin-top: 30px;
    font-size: 45px;
    text-transform: uppercase;
    font-weight: bold;
}
.descripcionnuestropanel{
    margin-top: 30px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 20px;
}
/*Nuestro Conductor*/
#contenedornuestroconductor{
    background-color: whitesmoke;
    display: inline-block;
    width: 100%;
    height: 250px;
}
.contenidonuestroconductor{
    text-align: center;
}
.titulonuestroconductor{
    font-size: 45px;
    text-transform: uppercase;
    margin-top: 30px;
}
.descripcionnuestroconductor{
    font-size: 20px;
    margin-top: 30px;
    margin-left: 10px;
    margin-right: 10px;
}
/*Nuestro Discord*/
.contenidonuestrodiscord{
    height: 500px;
    width: 100%;
    background-image: url("../Media_Resources/Images/NuestroDiscord_Fondo.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    text-align: center;
}
.nuestrodiscordlogodiscord{
    height: 150px;
    width: 150px;
    margin-top: 30px;
}
.titulonuestrodiscord{
    margin-top: 30px;
    font-size: 45px;
    text-transform: uppercase;
    font-weight: bold;
}
.descripcionnuestrodiscord{
    margin-top: 30px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 20px;
}
.contenidonuestrodiscord>.btn{
    margin-top: 20px;
}
/*Empieza tu Jornada con Nosotros*/
.contenidoetjcn{
    height: 150px;
    width: 100%;
    text-align: center;
}
.tituloetjcn{
    margin-top: 30px;
    font-size: 45px;
    text-transform: uppercase;
    font-weight: bold;
}
.contenidoetjcn>.btn{
    margin-top: 20px;
    color: black;
    border: 2px solid black;
}
.contenidoetjcn>.btn:hover{
    border: 2px solid rgb(255, 132, 0);
    color: white;
}
/*MEDIA QUERYS*/
@media(max-width:992px){

    /*RESPONSIVE DEL MINI BANNER DEL ESLOGAN*/
    /*El tamaño del mini banner*/
    #contenedoreslogan{
        height: 300px;
    }
    /*El tamaño de la fuente del titulo del eslogan*/
    .eslogan{
        font-size: 30px;
    }
    /*El tamaño de la fuente del subtitulo del eslogan*/
    .subeslogan{
        font-size: 15px;
    }
    /*El tamaño de la fuente del boton del mini banner del eslogan*/
    .btneslogan{
        font-size: 15px;
    }
    /*RESPONSIVE DE SOBRE NOSOTROS*/
    /*Sobre Nosotros*/
    #contenedorquienessomos{
    width: 100%;
    height: fit-content;
    background-color: whitesmoke;
    }
    .contenidoquienessomos{
    text-align: center;
    }
    .contenidoquienessomos>img{
    height: 150px;
    width: 200px;
    }
    .contenidoquienessomos>h1{
        font-size: 30px;
    }
    .contenidoquienessomos>p{
        font-size: 15px;
        margin-left: 8px;
        margin-right: 8px;
    }
    .contenidoquienessomos>a.btn{
        margin-bottom: 20px;
    }
    /*RESPONSIVE NUESTRO PANEL*/
    /*Nuestro Panel*/
    /*Nuestro Panel*/
.nuestropanelizquierda{
    background-color: rgb(27, 27, 27);
    width: 60%;
    height: 500px;
    float: left;
    color: whitesmoke;
    text-align: center;
}
.nuestropanelderecha{
    width: 40%;
    height: 500px;
    float: right;
}
.nuestropanellogotb{
    height: 100px;
    width: 100px;
    margin-top: 30px;
}
.titulonuestropanel{
    margin-top: 30px;
    font-size: 35px;
    text-transform: uppercase;
    font-weight: bold;
}
.descripcionnuestropanel{
    font-size: 15px;
}
/*RESPONSIVE NUESTRO CONDUCTOR*/
/*Nuestro Conductor*/
#contenedornuestroconductor{
    width: 100%;
    height: fit-content;
    background-color: whitesmoke;
}
.contenidonuestroconductor{
    text-align: center;
}
.titulonuestroconductor{
    font-size: 35px;
    text-transform: uppercase;
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
}
.descripcionnuestroconductor{
    font-size: 15px;
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
}
/*RESPONSIVE NUESTRO DISCORD*/
/*Nuestro Discord*/
.contenidonuestrodiscord{
    width: 100%;
    height: fit-content;
}
.titulonuestrodiscord{
    font-size: 35px;
}
.descripcionnuestrodiscord{
    font-size: 15px;
}
.nuestrodiscordlogodiscord{
    height: 100px;
    width: 100px;
}
.contenidonuestrodiscord>.btn{
    font-size: 15px;
    margin-bottom: 20px;
}
/*Empieza tu Jornada con Nosotros*/
.contenedortjcn{
    height: fit-content;
    width: 100%;
    background-color: whitesmoke;
}
.contenidoetjcn{
    height: fit-content;
}
.tituloetjcn{
    font-size: 35px;
    margin-left: 10px;
    margin-right: 10px;
}
.contenidoetjcn>.btn{
    font-size: 15px;
    margin-bottom: 20px;
}
}