/* --------layout------- */
body{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}
#principal {
    width: 100%;
    margin: auto;
}
.fila{
    display: flex;
    flex-wrap: wrap;
}
.columna{
    width: 100%;
}
img{
    max-width: 100%;
    height: auto;
}
/* --------tipografia-------- */
h1,h2,h3,h4,h5,h6{
    text-align: center;
}
/* --------menus-------- */
.menu {
	margin: 0;
	padding: 0;
}
.menu li {
	list-style-type: none;
    position: relative;
}
nav{
    background-color: #019b86;
}
.menu a{
    text-decoration: none;
    color: white;
    padding: 10px 20px;
    display: inline-block;
}
.menu a:hover{
    background-color: rgb(38, 38, 38);
}
.submenu {
    position: absolute;
    left: 0;
    padding: 0;
    display: none;
    width: 140px;
}
li:hover .submenu{
    display: block;
}
/* -----Media Queries----- */
/* movil grande */
@media screen and (min-width: 576px) {
    #principal {
        width: 540px;
    }
    .doce-movil{
        width: 100%;
    }
    .once-movil{
        width: 91.6667%;
    }
    .diez-movil{
        width: 83.3333%;
    }
    .nueve-movil{
        width: 75%;
    }
    .ocho-movil{
        width: 66.6667%;
    }
    .siete-movil{
        width: 58.3333%;
    }
    .seis-movil{
        width: 50%;
    }
    .cinco-movil{
        width: 41.6667%;
    }
    .cuatro-movil{
        width: 33.3333%;
    }
    .tres-movil{
        width: 25%;
    }
    .quinto-movil{
        width: 20%;
    }
    .dos-movil{
        width: 16.6667%;
    }
    .uno-movil{
        width: 8.3333%;
    }
}

/* tablet */
@media screen and (min-width: 768px) {
    #principal {
        width: 720px;
    }
    .doce-tablet{
        width: 100%;
    }
    .once-tablet{
        width: 91.6667%;
    }
    .diez-tablet{
        width: 83.3333%;
    }
    .nueve-tablet{
        width: 75%;
    }
    .ocho-tablet{
        width: 66.6667%;
    }
    .siete-tablet{
        width: 58.3333%;
    }
    .seis-tablet{
        width: 50%;
    }
    .cinco-tablet{
        width: 41.6667%;
    }
    .cuatro-tablet{
        width: 33.3333%;
    }
    .tres-tablet{
        width: 25%;
    }
    .quinto-tablet{
        width: 20%;
    }
    .dos-tablet{
        width: 16.6667%;
    }
    .uno-tablet{
        width: 8.3333%;
    }
    .menu li {
        float: left;
    }
}

/* tablet horizontal */
@media screen and (min-width: 992px) {
    #principal {
        width: 960px;
    }
    .doce-tablet-horizontal{
        width: 100%;
    }
    .once-tablet-horizontal{
        width: 91.6667%;
    }
    .diez-tablet-horizontal{
        width: 83.3333%;
    }
    .nueve-tablet-horizontal{
        width: 75%;
    }
    .ocho-tablet-horizontal{
        width: 66.6667%;
    }
    .siete-tablet-horizontal{
        width: 58.3333%;
    }
    .seis-tablet-horizontal{
        width: 50%;
    }
    .cinco-tablet-horizontal{
        width: 41.6667%;
    }
    .cuatro-tablet-horizontal{
        width: 33.3333%;
    }
    .tres-tablet-horizontal{
        width: 25%;
    }
    .quinto-tablet-horizontal{
        width: 20%;
    }
    .dos-tablet-horizontal{
        width: 16.6667%;
    }
    .uno-tablet-horizontal{
        width: 8.3333%;
    }
}

/* laptop */
@media screen and (min-width: 1200px) {
    #principal {
        width: 1140px;
    }
    .doce-laptop{
        width: 100%;
    }
    .once-laptop{
        width: 91.6667%;
    }
    .diez-laptop{
        width: 83.3333%;
    }
    .nueve-laptop{
        width: 75%;
    }
    .ocho-laptop{
        width: 66.6667%;
    }
    .siete-laptop{
        width: 58.3333%;
    }
    .seis-laptop{
        width: 50%;
    }
    .cinco-laptop{
        width: 41.6667%;
    }
    .cuatro-laptop{
        width: 33.3333%;
    }
    .tres-laptop{
        width: 25%;
    }
    .quinto-laptop{
        width: 20%;
    }
    .dos-laptop{
        width: 16.6667%;
    }
    .uno-laptop{
        width: 8.3333%;
    }
}

/* desktop */
@media screen and (min-width: 1400px) {
    #principal {
        width: 1320px;
    }
    .doce-escritorio{
        width: 100%;
    }
    .once-escritorio{
        width: 91.6667%;
    }
    .diez-escritorio{
        width: 83.3333%;
    }
    .nueve-escritorio{
        width: 75%;
    }
    .ocho-escritorio{
        width: 66.6667%;
    }
    .siete-escritorio{
        width: 58.3333%;
    }
    .seis-escritorio{
        width: 50%;
    }
    .cinco-escritorio{
        width: 41.6667%;
    }
    .cuatro-escritorio{
        width: 33.3333%;
    }
    .tres-escritorio{
        width: 25%;
    }
    .quinto-escritorio{
        width: 20%;
    }
    .dos-escritorio{
        width: 16.6667%;
    }
    .uno-escritorio{
        width: 8.3333%;
    }
}