/*
Sitio escrito y diseñado por Carlos Hernandez
Nueva Escuela Tecnologica Ixtapaluca © 2018
TW:carl_hernaa IG:carl_hernaa
*/
*{
	margin: 0;
	padding: 0;
}

@font-face{
    font-family:Roboto;
    src: url("Roboto-Thin.ttf");
}

section#Banner{
	width: 100%;
	background-image: url(../../Recursos_Img/Woman_03.jpg);
	background-attachment: contain;
	background-position: center;
	background-repeat: no-repeat;
}

section#Banner_02{
	width: 100%;
	background-image: url(../../Recursos_Img/Book.jpg);
	background-attachment: contain;
	background-position: center;
	background-repeat: no-repeat;
}

section#Banner_03{
	width: 100%;
	background-image: url(../../Recursos_Img/Woman_11.jpg);
	background-attachment: contain;
	background-position: center;
	background-repeat: no-repeat;
}

section#Banner_04{
	width: 100%;
	background-image: url(../../Recursos_Img/Hands_01.jpg);
	background-attachment: contain;
	background-position: center;
	background-repeat: no-repeat;
}

section#Banner_05{
	width: 100%;
	background-image: url(../../Recursos_Img/Waters.jpg);
	background-attachment: contain;
	background-position: center;
	background-repeat: no-repeat;
}

section#Banner_06{
	width: 100%;
	background-image: url(../../Recursos_Img/Fountain.jpg);
	background-attachment: contain;
	background-position: center;
	background-repeat: no-repeat;
}

section#Banner_07{
	width: 100%;
	background-image: url(../../Recursos_Img/Sleep.jpg);
	background-attachment: contain;
	background-position: center;
	background-repeat: no-repeat;
}

body::-webkit-scrollbar{
  width: 5px;
  background:rgb(0,0,0);
}

body::-webkit-scrollbar-thumb{
  background:rgb(255,255,255);
  border-radius: 5px;
}

header{
  margin-top: 20px;
  position: fixed;
  width: 100%;
  height: 3.7vw;
	background-color: rgba(13, 13, 13, 0.5);
  -webkit-transition: background-color .5s;
}

nav{
  display: flex;
  margin: auto;
  height: 40px;
  margin-top: 3px;
  -webkit-transition: margin-left .5s;
}

div#Header{
    margin: 0 auto;
}

ul li{
  display: block;
  float: left;
  list-style: none;
  margin: 10px;
  padding: 2px;
}

img#Logo{
    width: 17.5vw;
    height: 17.5vw;
  float: left;
  display: block;
	margin-top: 17vw;
  margin-right: 200px;
  -webkit-transition: width .5s, height .5s, margin-right .5s, margin-top .5s;
}

ul a{
  color: #ffffff;
  font-size: 1.7vw;
  font-family: 'Roboto', sans-serif;
}

table#T_Letras{
  margin: 0 auto;
  width: 100%;
  background-color: rgba(0,0,0,.5);
  height: 50vw;
}

table#T_Letras div{
  text-align: right;
}

img#Letras{
  width: 47%;
  margin-top: 5%;
  margin-right: 10%;
}

table#T_Bien_T{
    background-color: rgba(0,0,0,.4);
    border-radius: 0 0 25px 0;
}

a#T_Bien_L{
    font-family: 'Roboto', sans-serif;
    font-size: 6vw;
    color: white;
    padding-left: 10vw;
}

table#L_Bien_T{
  background-color: rgba(0,0,0,.5);
  width: 50%;
  margin: 0 auto;
  border-radius: 25px 0 25px 0;
}

a#L_Bien_L{
  font-size: 1.7vw;
  font-family: 'Roboto', sans-serif;
  color: white;
}

table#T_Mod_T{
    background-color: rgba(0,0,0,.4);
    border-radius: 0 0 25px 0;
}

a#T_Mod_L{
    font-family: 'Roboto', sans-serif;
    font-size: 6vw;
    color: white;
    padding-left: 10vw;
}

a#L_Mod_L{
    font-family: 'Roboto', sans-serif;
    font-size: 1.7vw;
    color: white;
    padding-right: 30px;
}

table#L_Mod_T{
    width: 50vw;
    margin: 0 auto;
    background-color: rgba(0,0,0,.5);
    border-radius: 25px 0 25px 0;
    padding: 5px;
}

a#T_Cer_L{
    font-family: 'Roboto', sans-serif;
    font-size: 6vw;
    padding-left: 10vw;
}

table#T_Cer_T{
    background-color: rgba(255,255,255,.4);
    border-radius: 0 0 25px 0;
}

a#L_Cer_L{
    font-family: 'Roboto', sans-serif;
    font-size: 1.7vw;
    padding-right: 30px;
}

table#L_Cer_T{
    width: 50vw;
    margin: 0 auto;
    background-color: rgba(255,255,255,.6);
    border-radius: 25px 0 25px 0;
    padding: 5px;
}

a#T_Mis_L{
    font-family: 'Roboto', sans-serif;
    font-size: 6vw;
    padding-left: 10vw;
    color: white;
}

table#T_Mis_T{
    background-color: rgba(0,0,0,.4);
    border-radius: 0 0 25px 0;
}

a#L_Mis_L{
    font-family: 'Roboto', sans-serif;
    font-size: 1.7vw;
    padding-right: 30px;
    color: white;
}

table#L_Mis_T{
    width: 50vw;
    margin: 0 auto;
    background-color: rgba(0,0,0,.5);
    border-radius: 25px 0 25px 0;
    padding: 5px;
}

/************END***************/
section#Banner_End{
    background-color: rgb(245,245,245);
}

table#T_End_T_Mobil{
    display: none;
}

table#T_End_T{
    margin: 0 auto;
}

a#End{
    font-family: 'Roboto', sans-serif;
    font-size: 1.7vw;
    padding: 1.5vw 1.5vw .1vw .1vw;
    text-decoration: none;
    color: black;
}

a#T_End{
    font-family: 'Roboto', sans-serif;
    font-size: 2.2vw;
    padding: 1.5vw 1.5vw .1vw .1vw;
}

@media(max-width: 1000px) and (min-width:768px){
    a#End{
        font-size: 2.2vw;
    }
    
    a#T_End{
        font-size: 3vw;
    }
}

@media(max-width: 767px) and (min-width:501px){
    a#End{
        font-size: 3vw;
    }
    
    a#T_End{
        font-size: 3.5vw;
    }
}


@media(max-width: 500px){
    table#T_End_T_Mobil{
        display: unset;
    }
    
    div#D_End_T_Mobil{
        width: 67vw;
        margin: 0 auto;
        align-content: center;
    }

    table#T_End_T{
        display: none;
    }
    
    a#End_Mobil{
        font-family: 'Roboto', sans-serif;
        font-size: 20px;
        padding: 5px 15px 5px;
        text-decoration: none;
        color: black;
    }
    
    a#End_Mobil_01{
        font-family: 'Roboto', sans-serif;
        font-size: 20px;
        text-decoration: none;
        color: black;
    }

    a#T_End_Mobil{
        font-family: 'Roboto', sans-serif;
        font-size: 32px;
        padding: 1.5vw 1.5vw .1vw .1vw;
    } 
    
    img#Img_M{
        width: 30px;
    }
}


/************END***************/


@media(max-width: 1000px) and (min-width:768px){
    header{
        height: 4.6vw;
    }
    
    ul a{
        font-size: 2.2vw;
    }
    
    img#Logo{
        display: none;
    }
    
    table#T_Letras div{
        text-align: center;
    }
    
    
    a#T_Bien_L{
        font-size: 7vw;
    }
    
    table#L_Bien_T{
        width: 65vw;
    }
    
    a#L_Bien_L{
        font-size: 2.2vw;
    }
    
    a#T_Mod_L{
        font-size: 7vw;
    }
    
    a#L_Mod_L{
        font-size: 2.2vw;
    }
    
    table#L_Mod_T{
        width: 65vw;
    }
    
    a#T_Cer_L{
        font-size: 7vw;
    }
    
    a#L_Cer_L{
        font-size: 2.2vw;
    }
    
    table#L_Cer_T{
        width: 65vw;
    }
    
    a#T_Mis_L{
        font-size: 7vw;
    }
    
    a#L_Mis_L{
        font-size: 2.2vw;
    }
    
    table#L_Mis_T{
        width: 65vw;
    }
    
    
}


@media(max-width: 767px) and (min-width:501px){
    header{
        height: 6.2vw;
    }
 
    ul a{
        font-size: 3vw;
    }
    
    img#Logo{
        display: none;
    }
    
    table#T_Letras div{
        text-align: center;
    }
    
    a#T_Bien_L{
        font-size: 8vw;
    }
    
    table#L_Bien_T{
        width: 65vw;
    }
    
    a#L_Bien_L{
        font-size: 3vw;
    }
    
    a#T_Mod_L{
        font-size: 8vw;
    }
    
    a#L_Mod_L{
        font-size: 3vw;
    }
    
    table#L_Mod_T{
        width: 65vw;
    }
    
    a#T_Cer_L{
        font-size: 8vw;
    }
    
    a#L_Cer_L{
        font-size: 3vw;
    }
    
    table#L_Cer_T{
        width: 65vw;
    }
    
    a#T_Mis_L{
        font-size: 8vw;
    }
    
    a#L_Mis_L{
        font-size: 3vw;
    }
    
    table#L_Mis_T{
        width: 65vw;
    }
    
    
}

@media(max-width: 500px){
    header{
  	height: 30px;
  	margin-top: 20px;
    }
    
    table#T_Letras{
        height: 100vh;
    }
    
    img#Logo{
        display: none;
    }
 
    img#Letras{
        width: 90%;
    }
    
    ul a{
  	    font-size: 3.4vw;
    }
    
    table#T_Letras div{
        text-align: center;
    }
    
    
    a#T_Bien_L{
        font-size: 10vw;
    }
    
    table#L_Bien_T{
        width: 85vw;
    }
    
    a#L_Bien_L{
        font-size: 18px;
    }
    
    a#T_Mod_L{
        font-size: 10vw;
    }
    
    a#L_Mod_L{
        font-size: 18px;
    }
    
    table#L_Mod_T{
        width: 85vw;
    }
    
    a#T_Cer_L{
        font-size: 10vw;
    }
    
    a#L_Cer_L{
        font-size: 18px;
    }
    
    table#L_Cer_T{
        width: 85vw;
    }
    
    a#T_Mis_L{
        font-size: 10vw;
    }
    
    a#L_Mis_L{
        font-size: 18px;
    }
    
    table#L_Mis_T{
        width: 85vw;
    }
    
    
}