@font-face {
    font-family: Primary;
    src: url('../fonts/Primary.ttf');
}

body{
    color: whitesmoke;
    font-family: Primary, monospace;
    margin:0;
    padding:0;
    text-align: center;
}

h1{
    margin-top: 12rem;
}

h2{
    margin-bottom: 2rem;
}

header{
    text-align: left;
}

html{
    cursor: hand;
    font-size: 16px;
}

section{
    margin:0;
    padding:0;
}

.container-fluid{
    padding: 0;
}

.fixed-top{
    background: rgba(4,4,111,0.8);
}

.navbar-inverse .navbar-brand{
    color: whitesmoke;
    font-size: 1.3rem;
    text-transform: capitalize;
}

.navbar-inverse .navbar-nav .nav-link:focus, .navbar-inverse .navbar-nav .nav-link:hover, .navbar-inverse .navbar-nav .active{
    background: #0275d8;
    color: whitesmoke;
}

.navbar-inverse .navbar-nav .nav-item {
    margin: 0.2rem 0;
}

.navbar-inverse .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.8);
}

.navbar-toggler{
    font-size: 1rem;
}

.navbar-inverse .navbar-nav .nav-link, .navbar-inverse .navbar-nav .active{
    border-radius: 0.5rem;
    text-align: center;
}

.welcome{
    background: url("../images/cubos1.jpeg") no-repeat;
    background-size: 100% 100%;
    height: 100vh;
    overflow: hidden;
}

.welcome .btn{
    text-shadow: 1px 1px 5px #1d1e1f;
    vertical-align: middle;
}

.welcome .btn p{
    display: inline-block;
    margin: 0;
    padding: 0.5rem 0 0 0.3rem;
    vertical-align: top;
}



/* Estilos para Que es Aula Matmigo*/
.whatis{
    background: #024379;
    padding: 5em 0;
}

.whatis .h3{
    font-weight: bold;
}

.whatis .h4{
    line-height: 3rem;
}

.whatis .img-fluid{
    margin-bottom: 2rem;
    transition: all 0.3s ease;
    transform: rotate(10deg);
}

.whatis .img-fluid:hover{
    transform: rotate(-10deg);
}


/*Estilos para Ventajas*/
.features{
    background: whitesmoke;
    color: #1d1e1f;
    padding: 5rem 0
}

.features .fa{
    color: #014c8c;
    margin: 1rem 0;
}

.features .h4{
    font-weight: bold;
}

.features .h5{
    font-weight: initial;
}

.features i{
    transition: all 0.3s ease;
}

.features i:hover{
    transform: scale(1.3);
}

.features img{
    aspect-ratio: 16 / 9;
    height: auto;
    width: 100%;
}

.image-center{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*Estilos para Contenidos*/
.contents{
    background: #00223F;
    padding: 5rem 0;
}

.contents .row{
    margin: 0;
    max-width: 100%;
    width: 100%;
}



.contents .img-fluid{
    /*background: #5bc0de;*/
    border-radius: 0.5rem;
    margin: 1rem 0;
    opacity: 0.9;
    padding: 1rem 0;
    transition: all 0.3s ease;
    transform: scale(0.8);
}

.contents .img-fluid:hover{
    opacity: 1;
    transform: scale(1.2) rotate(10deg);
}



/*Estilos para formulario*/
#contact{
    background: #024379;
    height: 90vh;
    overflow: hidden;
    padding: 5rem 0;
}

#contact .h4{
    margin-bottom: 2rem;
}

#contact input, #contact button, #contact textarea{
    display: inline-block;
    font-family: Primary, monospace;
}


/*Estilos para mensajes*/
#messages{
    margin:0;
    padding:0;
}

#messages .alert{
    margin:0;
    position: fixed;
    top: 70%;
    visibility: hidden;
    width: 100%;
}


@media(max-width: 500px){
    .labelhidden{
        height: 0;
        visibility: hidden;
    }

    .whatis .h4{
        font-size: 1.5rem;
        line-height: 2.5rem;
    }

}