* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body{
    margin: 0;
    font-family: Georgia, 'Times New Roman', Times, serif;
    background: #fcfcfc;
    
   
}


.main{

	padding-top: 5em;  /**80  separar la caja fija del area principal de la pagina**/
	padding-left: 3em;
	width: 95%;
	max-width: 95%;
	flex-wrap: wrap;
	

}





.modal {
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.8);
    
    position: fixed;
    top: 0;
    left: 0;
    
    display: flex;
    
    animation: modal 2s 2s forwards;
    visibility: hidden;
    opacity: 0;
    z-index: 8;
}

.contenido {
    margin: auto;
    width: 45%;  /**40**/
    height: 55%; /**40**/
    background: white;
    border-radius: 10px;
    z-index: 9;
}

#cerrar {
    display: none;
}

#cerrar + label {
    position: fixed;
    color: #fff;
    font-size: 15px;
    z-index: 10;
    background: darkred;
    height: 45px;
    width: 45px;
    line-height: 40px;
    border-radius: 50%;
    right: 150px;
    top: 150px;
    cursor: pointer;
    
    animation: modal 2s 2s forwards;
    visibility: hidden;
    opacity: 0;
}

#cerrar:checked + label, #cerrar:checked ~ .modal {
    display: none;
}

@keyframes modal {
    100% {
        visibility: visible;
        opacity: 1;
    }
}




#principal {
    
    width: 90%;
    max-width: 100%;
    margin: 0px auto;
    
    background: #032955;
    
   
    
}

main principal{
    background-image: url("img/logo5.png");
}








#titulo{
    background: #823131;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: brown;
    font-size: 8px;
    display: flex;   /**comando oque centra en una sola linea el texto  o imagen**/
	justify-content: space-between; /** comando que reparte el espacio entre los componentes que se centran**/
    text-shadow: 0px 0px 20px black;
    padding-inline: 10px;
    padding: 20px;
    display: flex;
   flex-wrap: wrap; 
}

.centra{
    background: white;
   
   
    display: flex;   /**comando oque centra en una sola linea el texto  o imagen**/
	justify-content: space-between; /** comando que reparte el espacio entre los componentes que se centran**/
    text-shadow: 0px 0px 20px black;
    padding-inline: 10px;
    padding: 20px;
    display: flex;
   flex-wrap: wrap; 
}

#header{

    width:100%;
    height: 7%;
    background: rgb(209, 216, 218);
    color: white;
    text-align: center;
    line-height: 0px;
    display: flex;
}


#menu {
    width: 90%;
    margin: 0px auto;
   

}
ul, ol {
    list-style:none;
    display: flex;    /** aca hace flexbox el **/
    flex-wrap: wrap;    /** menu de navegacion en forma general es decir que se ajuste con wrap**/
    
}


#menu li ul li {
    position:relative;
    
    
}




#menu ul{
    display: flex; /** hace que aparezcan los objetos ocultos**/
    background-color: #ccc;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-shadow: 0px 1px 0px white;
   
  
}






#menu li:hover > ul {
      display: grid;   /*grid se utiliza para hacer aparecer el submenu el forma de lista*/
      color: #111011;
}

#menu li > ul a{
    
    color: #111011;
}









#menu li ul {
    display:none;
    position:absolute;
    min-width: 100px;  /** EL ANCHO DE LOS SUBMENUS**/
   
}







#menu ul li{
    /**display: inline-block;**/
    display: block;
    float: left;   /** HACE QUE LOS ELEMENTOS DEL MENU SE VAYAN A LA IZQUIERDA O ALINEADOS**/
    
    border-right: 1px solid #eee;
}

#menu ul li a{
    color: rgb(22, 22, 83);
    padding: 13px;
    display: block;
    line-height: 34px;/** CENTRA  en medio DE FORMA HORIZONTAL DE ARRIBA ABAJO LOS TEXTOS U OBJETOS**/
    
}

#menu ul li img{
    padding: 6px 3px 2px 3px;
    
   
    line-height: 100px;/** CENTRA  en medio DE FORMA HORIZONTAL DE ARRIBA ABAJO LOS TEXTOS U OBJETOS**/
    
}


#menu .interno li{
   
    padding: 2px;
    display: block;
    border-bottom: 1px solid #eee;
    
}

#menu .interno li a{
    color: rgb(123, 123, 128) !important;
    padding: 12px 11PX;  /**CORRIGUE EL PADING DE LOS SUBMENUS**/
    line-height: 5px;  /** CENTRA DE FORMA HORIZONTAL DE ARRIBA ABAJO LOS TEXTOS U OBJETOS**/
}


#menu .interno li:hover a{
    color: rgb(253, 253, 255) !important;
   
}



#menu ul li:hover{
    background: #823131;
    cursor: pointer;
    
}

#menu ul li:hover a{
    color: #f7f7f7;
    text-shadow: 0px 0px 0px white;
    
}

.clearfix{
    float: none;
    clear: both;
}


h1{
    color: white;
    text-align: center;
    

}



#form-register{
    width: 100%;
    max-width: 550px;
    margin: auto;
    background: white;
    box-shadow: 10px 10px 5px rgb(17, 17, 17);;
    border-radius: 7px;
    margin-bottom: 30px;
}


.form-titulo{
    background: rgb(83, 149, 236);
    color: white;
    padding: 20px;
    text-align: center;
    font-weight: 100;
    font-size: 30px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
}

.contenedor-inputs{
    padding: 10px 30px;
    /**display: flex;  de aqi el  orignal . se le quitan y se acomodan en los individuales class=largos para que asi funcione y no se salga
   flex-wrap: wrap;    de contenedro y haga el flex wrap de reducir sino se hace se pasa del contenedor **/
   
   /**justify-content: space-between;   centra todos las cojas y les da espacio en el contenedor**/


}

.mat {
   
    color: rgb(14, 1, 1);
    padding: 10px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    text-align: center;
    font-weight: 10;
    font-size: 15px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    display: flex;
   flex-wrap: wrap; 
    margin-left: 15px;
    justify-content: center;
}

.mat h4 {
    margin-top: 13px;
    margin-left: 15px;
}


.largos {
   
    color: rgb(14, 1, 1);
    padding: 2px 0px 5px 3px;  /** 4 0 10 3**/
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   
    font-weight: 10;
    font-size: 15px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
      display: flex;
   flex-wrap: wrap;  
    
    
}

.largos h5 {
    margin-top: 1px;
    margin-left: 1px;
    display: flex;
    flex-wrap: wrap;  
}

.ct {
   
    color: rgb(14, 1, 1);
    padding: 4px 0px 10px 3px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   
    font-weight: 10;
    font-size: 15px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    display: flex;
   flex-wrap: wrap;  
    justify-content: space-between;
    
}





.centra{
    
    color: rgb(14, 1, 1);
    padding: 0px 0px 10px 3px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   
    font-weight: 10;
    font-size: 15px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
   display: flex;
   flex-wrap: wrap;  
    /**justify-content: center;**/
    
    
    
}

.centrat{
    
    color: rgb(14, 1, 1);
    padding: 0px 0px 0px 3px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   
    font-weight: 10;
    font-size: 15px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    /**display: flex;*/
   /**flex-wrap: wrap;  **/
    text-align: center;
    
    
    
}





















.ct h4 {
    width: 48%;
    margin-top: 1px;
    margin-left: 1px;
    display: flex;
   flex-wrap: wrap;  
    justify-content: space-between;
    
}



.ct2 h4 {
    width: 30%;
    margin-top: 1px;
    margin-left: 10px;
    display: flex;
   flex-wrap: wrap;  
    justify-content: space-between;
    
    
}


.ct2 {
   
    color: rgb(14, 1, 1);
    padding: 4px 0px 10px 3px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   
    font-weight: 10;
    font-size: 15px;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    display: flex;
   flex-wrap: wrap;  
    justify-content: space-between;
    
}



.input-100{
    width: 242%;
    height: 40px;
}


.input-50{
    width: 48%;
    height: 40px;
   
}

.input-30{
    width: 40%;
    height: 40px;
    margin-left: 10px;
}



.input-20{
    width: 30%;
    height: 40px;
    margin-left: 1px;
}




input:invalid {
  border: 1px solid red;
}

input:valid {
  border: 1px solid darkgray;
}



input::placeholder {    /**cambia el tamaño de letra de la casilla imput**/
  
  font-size: 0.8em;
 
}

input[name="Verificar"]{
    margin-bottom: 15px;
    padding: 15px 15px 15px 15px;
    border-radius: 3px;
    border: 1px solid darkgray;
} 

input[name="Verificar"]:hover {  color: red; 
    display: flex;
    border: 1px solid darkgray;
    padding: 15px;
    transform: translateY(-0.2em) scale(1);
   

    
}


input[name="Guardar"]{
    margin-bottom: 15px;
    padding: 15px 15px 15px 15px;
    border-radius: 3px;
    border: 1px solid darkgray;
} 



input[name="Guardar"]:hover {  color: red; 
    display: flex;
    border: 1px solid darkgray;
    padding: 15px;
    transform: translateY(-0.2em) scale(1);
   

    
}




.bnt_enviar {
    margin: 0em 10rem 0rem 15em;

    
}


.bnt_enviar2 {
    margin: 0em 10rem 0rem 15em;

    
}




.caja2{
    text-decoration: none;
}


.caja2{
    display: flex;
    position: relative;
    background-image: url("img/logo5.png");
    background-repeat: repeat;
     border: 2px solid rgb(186, 186, 192);
    width:300px;
     height: 150px;
     padding:300px;
     background-clip: border-box;
}


.demo {
            
          display: none;
           visibility: hidden;
           
        }


.slides {
			display: none;
           visibility: hidden;

}

#demo .slides {
			display: none;
           visibility: hidden;

}



@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation:landscape){   /**modifica el landscape**/
    
    .contenido {
    
     top:10px;
            width: 50%;  /**40**/
            height: 76%;
            
    }
    
    #cerrar + label {
        
        right: 100px;
        top: 50px;
    
    }
    
    .demo {
            
         display: none;
           visibility: hidden;
           
        }


.slides {
		display: none;
           visibility: hidden;

}

#demo .slides {
			display: none;
           visibility: hidden;

}

    
    
    
    
}






@media (min-width:300px) and (max-width:980px) and (orientation: portrait) { 
    .contenido {
           
    		margin: auto;
            width: 50%;  /**40**/
            height: 20%;
            
            
            
    }
    
    #cerrar + label {
        top: 400px;
        right: 150px;
        
    
    }


   .demo {
            display: block;
            visibility: visible;
            margin:auto;
            /**margin: 0em 0rem 0rem 17em;  0  0  0  2*/
            visibility: visible;
            width: 40rem;
            height: 21rem;
            overflow: hidden;
            border: 10px solid #fefefe;
            box-shadow: 4px 4px 8px 2px rgba(0, 0, 0, .4);
            z-index: 0;
           
        }

       

.slides {

			z-index: 0;
			display: block;
           visibility: visible;

}

#demo .slides {
		z-index: 0;
			display: block;
           visibility: visible;

}




   
}