@import url(https://fonts.googleapis.com/css?family=Tillana);
@import url(https://fonts.googleapis.com/css?family=Ubuntu);

@media only screen and (min-device-width : 481px){

body {  
              margin                   : 0;
              background-color         : #000000;
} 

A {      
              text-decoration          : none;
}
.container {
              display                  : flex;
              flex-flow                : column wrap;
              justify-content          : center;
              align-content            : center;
              align-items              : center;
              height                   : calc(100vh - 0px);
              margin                   : 0px;  
              background-color         : #005996;
            
}

.container2 {
              display                  : flex;
              flex-flow                : column wrap;
              flex-direction           : column;
              align-content            : center;
              align-items              : center;
              height                   : calc(100vh - 0px);  
              background-color         : #005996;
            
}

.container_boton {             
              width                    : 100%;                      
              justify-content          : center;      
              margin-top               : 30px;                 
              display                  : flex;
              flex-direction           : row;
              flex-flow                : row wrap;
}

.caja_secundaria {
              display                  : flex;  
              flex-flow                : column wrap;
              justify-content          : center;  
              align-content            : center;
              align-items              : center;
              margin-top               : 30px;
              max-width                : 300px;
              min-width                : 100px;
              text-align               : center;  
}


.caja_secundaria input[type=text]{
         -moz-appearance               : none;
      -webkit-appearance               : none;
              appearance               : none;
              display                  : inline-block;
              height                   : 40px;
              padding                  : 0 10px;
              margin                   : 0;
              background               : #B4E6F9;     
              font-size                : 22px;
              color                    : rgb(58,69,89);
}

.descripcion {
              display                  : flex;
              align-content            : flex-start;
              flex-flow                : row wrap;             
              width                    : 50%; 
              margin-top               : 30px;
              margin-left              : 0px;
              justify-content          : center; 
              align-items              : center;
              height                   : 186px;
              background-color         : #E1F5FD;                        
}
}


@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

body {	
              margin                   : 0;
              background-color         : #005996;
} 

A {      
              text-decoration          : none;
}


.container {
              display                  : flex;
              flex-flow                : column wrap;
              justify-content          : center;
              align-content            : center;
              align-items              : center;
              height                   : calc(100vh - 0px);
              margin                   : 0px;  
              background-color         : #005996;
            
}

.container2 {
              display                  : flex;
              flex-flow                : column wrap;
              justify-content          : space-between;
              align-content            : center;
              align-items              : center;
              height                   : calc(100vh - 0px);  
              background-color         : #005996;
            
}



.caja_secundaria {
              display                  : flex;  
              flex-flow                : column wrap;
              justify-content          : center;  
              align-content            : center;
              align-items              : center;
              margin-top               : 30px;
              max-width                : 300px;
              min-width                : 100px;
              text-align               : center;  

}


.caja_secundaria input[type=text]{
         -moz-appearance               : none;
      -webkit-appearance               : none;
              appearance               : none;
              display                  : inline-block;
              height                   : 40px;
              padding                  : 0 10px;
              margin                   : 0;
              background               : #B4E6F9;     
              font-size                : 22px;
              color                    : rgb(58,69,89);
}

.descripcion {
              display                  : flex;
              align-content            : flex-start;
              flex-flow                : row wrap;
               width                    : 100%; 
              justify-content          : center; 
              align-items              : center;
              height                   : calc(60vh);
              background-color         : #E1F5FD;   

}



}



.button:hover {
              text-decoration          : none;
}

.button:active {
              position                 : relative;
              top                      : 1px;
}

.medium {
              font-size                : 24px;
              font-family              : "Ubuntu", Arial, Helvetica, cursive;
              padding                  : .4em 1.5em .42em;
}

.peque {
              font-size                : 16px;             
              overflow                 : hidden;
              font-family              : "Ubuntu", Arial, Helvetica, cursive;
              padding                  : 5px 5px 5px 5px;       
              display                  : block;
              margin                   : 15px;       
              width                    : 310px;      
              text-align               : center;
}


.rojo {
              color                    : rgb(255,255,255);
              border                   : solid 0px #17212B;
              font-weight              : 600;
              background               : #C82E00;
         -moz-border-radius            : 200px 200px 200px 200px;
      -webkit-border-radius            : 200px 200px 200px 200px;
              border-radius            : 200px 200px 200px 200px;
}

.rojo:hover {
              color                    : rgb(255,255,255);
              border                   : solid 0px #B33C31;
         -moz-border-radius            : 200px 200px 200px 200px;
      -webkit-border-radius            : 200px 200px 200px 200px;
              border-radius            : 200px 200px 200px 200px;
              background               : -webkit-gradient(linear, left top, left bottom, from(#EE4502), to(#FF52OE));
              background               : -moz-linear-gradient(top,  #EE4502,  #FF52OE);
              filter                   :  progid:DXImageTransform.Microsoft.gradient(startColorstr='#EE4502', endColorstr='#FF52OE');
}

.rojo:active {
              color                    : #FFFFFF;
              background               : -webkit-gradient(linear, left top, left bottom, from(#EE4502), to(#FF52OE));
              background               : -moz-linear-gradient(top,  #EE4502,  #FF52OE);
              filter                   :  progid:DXImageTransform.Microsoft.gradient(startColorstr='#EE4502', endColorstr='#FF52OE');
}



.Bdos {
              color                    : #005996;
              border                   : solid 0px #17212B;
              font-weight              : 600;
              background               : #FFFFFF; 
         -moz-border-radius            : 10px 10px 10px 10px;
      -webkit-border-radius            : 10px 10px 10px 10px;
              border-radius            : 10px 10px 10px 10px;
}

.Bdos:hover {
              color                    : #C82E00;
              border                   : solid 0px #B33C31;
         -moz-border-radius            : 10px 10px 10px 10px;
      -webkit-border-radius            : 10px 10px 10px 10px;
              border-radius            : 10px 10px 10px 10px;
              background               : -webkit-gradient(linear, left top, left bottom, from(#EE4502), to(#FF52OE));
              background               : -moz-linear-gradient(top,  #EE4502,  #FF52OE);
              filter                   :  progid:DXImageTransform.Microsoft.gradient(startColorstr='#EE4502', endColorstr='#FF52OE');
}

.Bdos:active {
              color                    : #C82E00;
              background               : -webkit-gradient(linear, left top, left bottom, from(#EE4502), to(#FF52OE));
              background               : -moz-linear-gradient(top,  #EE4502,  #FF52OE);
              filter                   :  progid:DXImageTransform.Microsoft.gradient(startColorstr='#EE4502', endColorstr='#FF52OE');
}


.letra1{
              color                    : #E1F5FD;
              font-size                : 28px;
              font-family              : "Tillana", Arial, Helvetica, cursive;
              text-align               : center;
              border-width             : 1px;
       }  

.letra2{
              color                    : #078BCC;
              font-family              : "Ubuntu", Arial, Helvetica, cursive;
              font-size                : 24px;
              text-align               : center;
              border-width             : 1px;
       }  


.letra3{
              color                    : #E03D00;
              font-family              : "Ubuntu", Arial, Helvetica, cursive;
              font-size                : 26px;
              text-align               : center;
              border-width             : 1px;
       }  


.letra4{
              color                    : #000000;
              font-family              : "Ubuntu", Arial, Helvetica, cursive;
              font-size                : 20px;
              text-align               : center;
              font-weight              : bold;
              border-width             : 1px;
       }  

.letra5{
              color                    : #E1F5FD;
              font-weight              : 600;
              font-size                : 22px;
              text-align               : center;
              border-width             : 1px;
       }  

.letra6{
              color                    : #FEDE03;
              font-weight              : 400;
              font-size                : 14px;
              text-align               : center;
              border-width             : 5px;
       }  

.letra7{
              color                    : #005996;
              font-family              : "Ubuntu", Arial, Helvetica, cursive;
              font-weight              : 400;
              font-size                : 16px;
              text-align               : center;
              border-width             : 5px;
       }  

#marco_img{        
              border                   : solid 4px #078BCC;
       }