@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900,400italic,700italic);

* {font-family: "lato", sans-serif}

body {width: 80%; margin: 0 auto; padding: 0}

header {overflow: hidden;
        display: block;
        width: 100%;
        margin-top: 5%}

/*---------------- MAIN -----------------*/

main {padding-top: 2%}

main nav ul {list-style: none}

main nav ul li a {text-decoration: none;
                    color: #fff;
                background-color: #e80000;
                font-weight: 300;
                padding: 1.25em;
                display: block;
                margin-bottom: 1%;
                font-size: 0.7rem}

#info {font-weight: 600;
        font-size: 0.9em;
        color: #1f1f1f;
        font-style: normal;
        background-color: #fff;
        padding: 2%;
        margin-top: 2%;}

#info h1 {font-size: 1.3em}

#gallery h3{font-weight: 700;
    color: #e80000;
    font-size: 2em;
    letter-spacing: 0.2em;}

h2{ color: black;
    font-style: oblique;
    text-decoration: underline;}


/*---------------- MAIN -----------------*/

img#mgral {padding-left: 10%}

img#marq {padding-left: 10%}

img#murb {padding-left: 10%}

aside {clear: both;}

#bxslider {width: 70%; margin:0;
float: left}

.bxslider {margin: 0}
.slidermorfos {margin: 0}
  
.d1 {font-size: 0.8rem;
        font-weight: 400;
        font-style: italic;
        color: #e00000;}
.d2 {font-size: 0.8rem;
        font-weight: 400;
        font-style: italic;
        color: #435cba;}
.d3 {font-size: 0.8rem;
        font-weight: 400;
        font-style: italic;
        color: #989600;}

#link a{list-style: none;
        color: #1f1f1f;
        font-weight: 700;
        font-style: normal;
        font-size: 1.2em}

.enhtml a{background-color: #fff;
        color: #e80000;
        font-weight: 700}
    
#slidermorfos {width:70%;}

img#gif {
margin-left: 5%;
margin-top: -5%}


img#m2{clear: both; width: 20%; margin-left: 10%}
img#m1 { width: 20%; margin-left: 10%}

#title {color: #e00000;
    font-weight: 900;
    font-style: italic;
        font-size: 2.5em; margin-top: 2%; margin-left: 2%}

img#calendario {width: 28%; float: left; margin-top: 6%; margin-left: 4%}

#cron {margin-left: 40%; margin-top: -5.5%; border-left-color: #555; border-left-style: ridge; padding-left: 10%; width: 80%; font-size: 1em}

.mg {font-size: 1.2rem;
        font-weight: 400;
        font-style: italic;
        color: #e00000;
        text-decoration: underline}

.ma {font-size: 1.2rem;
        font-weight: 400;
        font-style: italic;
        color:  #435cba;
        text-decoration: underline}

.mu {font-size: 1.2rem;
        font-weight: 400;
        font-style: italic;
        color:  #989600;
        text-decoration: underline}

.d4 {font-size: 1rem;
        font-weight: 600;
        font-style: normal;
        color: #000;}

.d5 {font-size: 1.2rem;
        font-weight: 600;
        font-style: normal;
        color: #000;}

#nov {background-color: #e00000; padding: 2%; width: 34%; float: left; color: white; font-weight:700; padding-top: 3%; padding-bottom: 4%}
#nov h{font-weight: 900; font-size: 2.2em}
#cronev {border: #e00000; border-style: ridge; padding: 2.1%; width: 56%; margin-left: 40%; margin-bottom: 5%}

#sociales a {text-decoration: none; list-style: none; color: #e00000; font-weight: 700}

#contacto {width: 50%; margin-left: 2%; margin-top: -1%}
#contacto h4 {font-weight: 900; font-size: 1.5em}
.contacto {border-color: black; border-style: inset; margin-left: 60%; padding: 3%; color: #e00000; font-weight: 700; width: 32%; margin-top: -23%; margin-bottom: 5%}
#bloque {width: 100%}
img#frase {margin-top: 4%; clear: both; float: left; width: 80%; margin-left: 7%}

#mu, #ma {width: 40%; padding: 2%; float: left; border-color: black; border-style: ridge; margin: 1%}
#mg  {width: 40%; padding: 2%; float: left; border-color: black; border-style: ridge; margin: 1%}
#pa {background-color: #e00000;color: white; padding:6%; width: 84%; float: left; margin-top: 1%; padding-left:8%; padding-right:8%;}

.jornadas {font-weight: 800;
        font-style: normal;
        color: #e80000;
        font-size: 2.5em;
        letter-spacing: 0.1em;
        margin-left: 20%
            ;
}

#forma {border-right-style: ridge; 
        border-color: black;
        padding: 2%;
        margin: 1%;
        width: 18%;
        float: left;
        font-style: normal;
    margin-bottom: 5%;
       



}
.forma { font-style: italic;
    font-size: 1.2em;
    font-weight: 700;
    color: #e80000;

    
}
#fecha { margin-left: 25%;
}
div#videoresponsive {
width: 80%;
height: auto; margin-left: 15%
}

img#doc {float: left;
width: 110%;}
#imgd1 { width: 40%;}
#info1 {margin-top: -2%; margin-left: 50%; }
#info1 h1 {color: #e00000}

#info2 {clear: both; width: 45%; float: left}
#info2 h1 {color: #e00000}

#info3 {margin-top: 8%; margin-left: 50%; }

#grande {border-top-color: #e00000; border-top-style: ridge}

.d6 {font-style: italic; font-weight: 200}

img.fd {width: 15%;}

img.fd1 {width: 10%; float: left; margin-left: 10%}

#tit {color: #e00000; font-size: 3em; font-weight: 700; float: left; font-style: italic}

.doc1 h1{padding-left: 3%; float: left; margin-top: -0.2%}

#fuc {padding-left: 49%; margin-top: 4%}

.doc {float: left; width: 50%; color: #e00000; font-style: italic}
.doc2 {float: right; width: 50%; color: #e00000; font-style: italic}

aside#docentes {margin-bottom: 50%}
#titular1{ width: auto;}

#intro {width: 45%; float: left; font-size: 2.1em; font-style: italic; font-weight: bold; color: #e00000; margin-top: 2%}
.firma {width: 45%; float: left; font-size: 0.5em; font-style: italic; font-weight: bold; color: #262626}

.experiencia {border-color: black; border-style: inset; margin-left: 50%; padding: 3%; color: #e00000; font-weight: 700; width: 44%; margin-top: 2%; margin-bottom: 5%}

aside#foro {width: 60%; margin: 0 auto; background-color: #e5e5e5; padding: 2%; margin-bottom: 8%}

#al {background-color: #efefef; padding: 1%; margin-top: 1%}

img#fa {width: 20%; float: left}

#al h1 {padding-left: 25%;}
#al p {padding-left: 25%;}

img#refe {float: left; width: 35%}

.a {float: left; width: 40%; margin-bottom: 5%; margin-left: 5%}

.a h3 {margin-left: 40%}

.a h4 {margin-left: 40%}

.a p {margin-left: 40%}

#nose {clear: both; margin-bottom: 5%; margin-top: 3%; font-size: 1.1em; font-weight: 600}

#grande2 {margin-top: 10%; border-top-color: #333; border-top-style: ridge; padding-bottom: 5%; padding-top: 5%; border-bottom-color: #333; border-bottom-style: ridge;}

#grande3 {border-bottom-color: #333; border-bottom-style: ridge; padding-bottom: 5%}

#grande1 {margin-top: 32%}

#info4 {margin-left: 50%; }

#boton {list-style: none; text-decoration: none; color: #e00000; font-size: 1em; font-weight: 800;margin-left: 10%}

#botones {margin-bottom: 5%}


/*----------------------------------------------CELULAR: PANTALLA PEQUEÑA------------------------------------------------*/


@media screen and (min-width:240px){

body {width: 95%; margin: 0 auto}
    
    
#navegador {margin-left: -4%}
    
main nav {width: 100%; margin-left: -4%}

#info {clear: both}
    
img#logo {display: block;
        margin: auto; 
        width: 70%}
img#mgral {width: 70%;
        margin:0 auto; 
            padding-left: 15%}
img#marq {width: 70%;
        clear: both;
        margin:0 auto; 
            padding-left: 15%}
img#murb {width: 70%;
        clear: both;
        margin:0 auto; 
            padding-left: 15%} 

#navegador {width: 100%;}
    
footer {font-size: 0.7rem;
        font-weight: 100;
        clear: both;
        margin: 0 auto}
    
#fadu{display: none}
    
#dgpc {display: none}
    
#bxslider {display: none}
#slidermorfos {display: none}
    
img#gif {display: none}    
    
img#gif1{clear: both;
        width: 100%;
    margin-top: 10%}

img#fb {float: right; margin-top: 5%; list-style: none; text-decoration: none}

#legales {margin: 0 auto}

#sociales {float: left}
    
img#morfologias1 {width: 100%; margin: 0 auto }

}




/*-----------------------------------------TABLET: PANTALLA MEDIANA-----------------------------------------------------------*/
@media screen and (min-width: 400px){

body {width: 80%; margin: 0 auto}
    
img#logo {width: 30%;
        float: left; display: block;
        margin-left: 5%}

header {border-bottom-style: ridge;
border-bottom-color: #2a2a2a;
    padding-bottom: 2em;
        margin-bottom: 0%}

#navegador {width: 45%; 
            float: left; 
            margin-left: -4%;
            margin-top: 0%}

#info {width: 55%;
        clear: none;
        margin-left: 40%;
        margin-top: 2%}
    
img#mgral {width: 15%;
            padding-left: 5%; margin-top: 30px}
img#marq {width: 15%;
        clear: both;
            padding-left: 1%; margin-top: 30px}
img#murb {width: 15%;
        clear: both;
            padding-left: 1%; margin-top: 30px} 

aside {clear: both;
    padding-top: 3.75em;}
    
footer {width: 100%}

#legales {width: 30%;
    float: left;
    margin-right: 3%}
    
#logosfooter {width: 30%;
            float: left;
margin-right: 3%}
    
#fadu{ width: 10em;
    clear: both;
display: block;
margin: 0 auto;
    padding-top: 15%}
    
#dgpc {clear: both;
    width: 8em;
display: block;
margin: 0 auto;
padding: 2px}
    
#sociales {width: 30%; font-size: 1.3em;
    float: left}
    
img#fb {float: right; margin-top: 5%; display: block}

#bxslider {width: 70%;
        margin: 0; display: block; float: left}

#slidermorfos {width:100%;display: block}
    
.morfologias {margin-left:40%;
            width: 100%; margin-top: -5%; margin-bottom: 5%}
    
img#gif {width: 25%;
margin-left: 5%;
margin-top: 0%;
display: block; float: right}
    
img#gif1{float: left;
        width: 40%;
    margin-top: -3%}
        
img#morfologias1 {float: left; width: 40%;
margin-top:2%;}    
}



/*-------------------------------------------------------PC: PANTALLA GRANDE-----------------------------------------------------*/
@media screen and (min-width: 950px) {
    
body {width: 65%; margin: 0 auto}

img#logo {width: 20%;
    display: block;
        float: left;
        margin-left: 2%}
    
#navegador {width: 40%; 
            float: left; 
            margin-left: -2%;
            margin-top: 0%}
    
main nav ul li a {font-size: 1rem}

#info {width: 55%;
        clear: none;
        margin-left: 42%;
        margin-top: 2%}

img#mgral {width: 18%;
            padding-left: 3%;}
img#marq {width: 18%;
            padding-left: 2%; }
img#murb {width: 18%;
            padding-left: 2%; } 

aside {clear: both;
    padding-top: 3.75em}

img#fb {display: block; float: right; margin-top: 5%}
    
#bxslider {width: 70%;
        margin: 0; display: block}
img#gif {display: block}

img#gif1{float: left;
        width: 35%;
    margin-top: 0%}
    
img#morfologias1 {width: 30%}    
    
}