{@media (min-width:168px) and (max-width:1260px)}



/*index*/


body{
  background-color: #1D3354;
  font-family: 'Montserrat', sans-serif;
    margin: auto;
}

#cauce{
font-size: 30px;
    text-align: center;
    color: #ffffff;
    font-weight: normal;
    padding: 1;
    margin: 1em 0 0 1em; 
    
}

.imagen{
    padding: 2em 0;
    text-align: center;
    
    }
#logo{
   width: 17em; 
    height: 17em; 
    border-radius: 17em; 
    box-shadow: 0 0.35em 0.5em rgba(0, 0, 0, .35); 
    }
 .botones{
    padding: 2em;
     text-align: center;}
#causa{
    margin: 1.5em auto 0; 
    color:#ffffff;
}
#botones{
    padding: 0;
}
#botones p{
    display: block;
    margin: 2em;
}
 p #boton-invitado{
    font-family: 'Montserrat' , sans-serif;
    font-size: 18px;
    font-weight:normal;
    background: #F43E43;
    color: #FFFFFF;
    border-radius: 1em;
    text-decoration: none;
    padding: 12px 18px;
    width: 250px;
      height: 25px;
    margin: 0 auto;
    display: block;
    text-align: center;
     box-shadow: 0 0.35em 0.5em rgba(0, 0, 0, .35);
      }
p #boton-usuario{
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight:normal;
    background: #F43E43;
    color: #FFFFFF;
    border-radius: 1em;
    text-decoration: none;
    padding: 12px 18px;
   width: 250px;
      height: 25px;
    margin: 0 auto;
    display: block;
    text-align: center;
     box-shadow: 0 0.35em 0.5em rgba(0, 0, 0, .35);
}   
     


@media all and (max-width:640px) 
{
    
    body{
        font-size: 10px;
        margin: 0;
        padding: 0px;
        
    }
    #cauce{
font-size: 25px;
    text-align: center;
    color: #ffffff;
    font-weight: normal;
        margin: -1em 1em 1.5em 1em; }
    
    #causa{
    margin: 3em 1em 0 2em; 
    color:#ffffff;
        text-align: left;
            font-size: 17px;
}
    
    .imagen{
    padding: 5em 0;
    text-align: center;
    
    }
#logo{
   width: 15em; 
    height: 15em; 
    border-radius: 15em; 
    box-shadow: 0 0.35em 0.5em rgba(0, 0, 0, .35); 
    }
    .botones{
        margin-top: 0px;
    }
    
    .botones{
    padding: 0;
     text-align: center;}
    
  p #boton-invitado{
   
    font-size: 18px;
    font-weight:normal;
    padding: 15px 18px;
    width: 250px;
      height: 25px;
      }

p #boton-usuario{
  
    font-size: 18px;
    font-weight:normal;
   padding: 15px 18px;
    width: 250px;
      height: 25px;
    margin: 1em 0.5em 2em;
    }   
}




/*intro*/




header{
    background-color: #197699;
     height: 6em;
     padding: 2em;
    margin: -1em 0;
    position: fixed;
    width: 100%;
    top:0
    
}

.png{
    padding: 0;
    text-align: center;
    margin-top: -0.5em;
    margin-left: -4em;
    
    }
#app{
   width: 17em; 
    height: 8.5em; 
}
h1{
    text-align: center;
    color: #ffffff;
    padding: 1;
    margin: 6em -0.5em 0 0; 
}
h2{
    
    text-align: center;
    color: #ffffff;
    font-weight: lighter;
    font-style: italic;

}

#section1{
    padding: 1em;
    margin: 1em 1em 1em 2em;
}
p#parrafo-intro{
    color:#ffffff;
    margin: 2em auto;
    text-align: justify-all;
    font-size: 20px;
    font-weight:lighter;
    
}

#boton-asociar{
  
    font-size: 18px;
    font-weight:normal;
    background: #F43E43;
    color: #FFFFFF;
    border-radius: 1em;
    text-decoration: none;
    padding: 13px 18px;
    width: 250px;
    height: 35px;
    margin: 0 auto 2em;
    display: block;
    text-align: center;
     box-shadow: 0 0.35em 0.5em rgba(0, 0, 0, .35);
}
@media all and (max-width:640px) 
{
	header{
		height:4px;
	}

	#content{
		margin-top:4px;
	}
}
@media all and (max-width:640px) 
{
    header{
     padding: 4.5em;
    }
    .png{
    padding: 0;
    text-align: center;
    margin-top: -3em;
    margin-left: -9em;
    }
    
    #app{
   width: 15em; 
        height: 8em; 
    }
    h1{
    text-align: left;
    margin: 5em 0 0 1em; 
    font-size:25px;    
        
    }
}
    /*menu*/


    
    
    h2{
        
    text-align: center;
    margin: 0.5em 0 0 1.2em; 
     font-size:22px; 
        
}
    #section1{
    padding: 0.5em;
        margin: -0.5em 5em 0 2em;
    }
p#parrafo-intro{
    margin: 2em 0em 1.5em;
    text-align: justify-all;
    font-size: 17px;
   
    }
@media all and (max-width:640px) 
{
     h2{
    text-align: left; 
}
}
/*formulario*/

#form-contact table{
    margin: auto;
}
form{
   
    margin: 0 0 24px;
    padding: 2em;
}

td
{
    display: block; 
    margin-right: 12px;
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    
}
td input{
    background-color: #ffffff;
    padding: 10px;
    width: 100%;
    }

#boton-enviar{
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
    font-weight:normal;
    background: #F43E43;
    color: #FFFFFF;
    border-radius: 1em;
    text-decoration: none;
    padding: 13px 18px;
    width: 300px;
    height: 35px;
    margin: 0 auto;
    display: block;
    text-align: center;
     box-shadow: 0 0.35em 0.5em rgba(0, 0, 0, .35);
    }

@media all and (max-width:640px) 
{
    form{
   
    margin: 0 24px;
    padding: 1em;
}
    form{
   
    margin: 0px 0px -0.5px;
    padding: 2em;
        margin-top: 2px;
        margin-bottom: auto;
}
    td
{ 
    margin-right: 1px;
    color: #ffffff;
    font-size:14px;
    margin-left: 5px;
    margin-right: 60px;
}
    td input{
    padding: 5px;
    width: 120%;
    }
    
    #boton-enviar{
   
 
    width: 250px;
    }

}

/*formulario1*/

#boton-entrar{
    font-family: 'Montserrat', sans-serif;
    font-size: 19px;
    font-weight:normal;
    background: #F43E43;
    color: #FFFFFF;
    border-radius: 1em;
    text-decoration: none;
    padding: 13px 18px;
    width: 300px;
    height: 35px;
    margin: 5em auto;
    display: block;
    text-align: center;
     box-shadow: 0 0.35em 0.5em rgba(0, 0, 0, .35);
}

@media all and (max-width:640px) 
{
    #boton-entrar{
   
 
    width: 250px;
    }
}


/*pagina1*/

.hamburger{
	position:fixed;
  background-color:transparent;
	left:0;
	top:0;
	height:30px;
	width:30px;
	padding:2em;
	-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
	-webkit-transition:-webkit-transform 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
	transition:transform 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
	z-index:1002;
	cursor:pointer;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none
}
.hamburger.is-active{
  background-color:none;
}
._layer{
	background:#FFFFFF;
	margin-bottom:4px;
	border-radius:2px;
	width:28px;
	height:4px;
	opacity:1;
	-webkit-transform:translate3d(0, 0, 0);
	transform:translate3d(0, 0, 0);
	-webkit-transition:all 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
	transition:all 0.25s cubic-bezier(0.05, 1.04, 0.72, 0.98);
}
.hamburger:hover .-top{
	-webkit-transform:translateY(-100%);
	-ms-transform:translateY(-100%);
	transform:translateY(-100%);
}
.hamburger:hover .-bottom{
	-webkit-transform:translateY(100%);
	-ms-transform:translateY(100%);
	transform:translateY(100%);
	}
.hamburger.is-active .-top{
	-webkit-transform:translateY(200%) rotate(45deg) !important;
	-ms-transform:translateY(200%) rotate(45deg) !important;
	transform:translateY(200%) rotate(45deg) !important;
}
.hamburger.is-active .-mid{
	opacity:0;
}
.hamburger.is-active .-bottom{
	-webkit-transform:translateY(-200%) rotate(135deg) !important;
	-ms-transform:translateY(-200%) rotate(135deg) !important;
	transform:translateY(-200%) rotate(135deg) !important;
}

.menuppal.is_active{
  transform: translate3d(0px, 0px, 0px);
}
.menuppal{
   background-color:#F43E43;
    bottom: 0;
    height: 100%;
    left: 0;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    transform: translate3d(0px, -100%, 0px);
    transition: transform 0.35s cubic-bezier(0.05, 1.04, 0.72, 0.98) 0s;
    width: 30%;
    z-index: 1001;
    opacity: 0.6;
}

.menuppal ul li { 
  list-style: none;
	
	font-family: 'Roboto', sans-serif;
	font-size:1.5rem;
	height:3em;
	text-transform:none;
	font-weight:bold;
    padding: 1.5em;
    margin: 0 auto;
}
.menuppal ul li a{
  text-decoration:none;
  color:#ffffff;
}
.menuppal ul li a:hover{
  text-decoration:none;
  color:#333;
}

@media all and (max-width:640px) 
{

.menuppal{
	width: 80%;
    opacity: 0.8;
}
  
    .menuppal ul li { 
  list-style: none;
	
	font-family: 'Roboto', sans-serif;
	font-size:1rem;
	height:2em;
	text-transform:none;
	font-weight:bold;
    padding: 2em;
    margin: 0 auto;
}
    #ubicacion{
        text-align: left;
    margin: 0.5em 5em 9px 1em; 
     font-size:22px; 
    }
}
    
/*OBJETIVOS*/

#section2{
    padding: 1em;
    margin: 9em 1em 1em 2em;
    text-align: center;
}
p#parrafo-intro1{
    color:#ffffff;
    margin: 2em auto;
    text-align: justify-all;
    font-size: 20px;
    font-weight:lighter;
}

@media all and (max-width:640px) 
{
      #section2{
    padding: 0;
        margin: 12em 5em 0 2em;
          text-align: left;
    }
p#parrafo-intro1{
    margin: 2em 1em 1em;
    text-align: justify-all;
    font-size: 17px;
   
    }
}
/*galeria*/

.foto{
    padding: 3em;
    text-align: center;
}

#foto{
   width: 45em; 
    height: 25em; 
    box-shadow: 0 0.35em 0.5em rgba(0, 0, 0, .35); 
    margin: -1em;
    margin-top: 1em;
}
@media all and (max-width:640px) 
{
    #foto{
   width: 30em; 
    height: 15em;
        margin-top: 0em;
    }
}

/*sala*/

#problema{
     text-align: center;
    font-weight: normal;
    font-style:normal;
    margin: 2em 0px -2em 0px;
}
@media all and (max-width:640px) 
{
      #problema{
    text-align: left;
    margin: 2em 0 -0.5em 1.4em; 
     font-size:22px; 
}  
}

/*Gracias*/

.imagen1{
    padding: 0;
    text-align: center;
    
    }
#logo1{
   width: 17em; 
    height: 17em; 
    border-radius: 17em; 
    box-shadow: 0 0.35em 0.5em rgba(0, 0, 0, .35); 
}
    #section3{
    padding: 1em;
    margin: 1em 1em 1em 2em;
    text-align: center;
}
p#parrafo-intro2{
    color:#ffffff;
    margin: 2em auto;
    text-align: justify-all;
    font-size: 20px;
    font-weight:lighter;
}

@media all and (max-width:640px) 
{
         #section3{
    padding: 0;
        margin: -0.em 5em 0 2em;
          text-align: left;
    }
p#parrafo-intro2 {
    margin: 2em 0em 1.5em;
    text-align: justify-all;
    font-size: 17px;
    margin-left: 11px;
    margin-right: 14px;
   
    }
}

@media all and (max-width:640px) 
{
    .imagen1{
    padding: 1em 0;
    }
}


/*menu*/

#boton-menu{
  
    font-size: 18px;
    font-weight:normal;
    background: #F43E43;
    color: #FFFFFF;
    border-radius: 1em;
    text-decoration: none;
    padding: 13px 18px;
    width: 250px;
    height: 35px;
    margin: 0 auto 2em;
    display: block;
    text-align: center;
     box-shadow: 0 0.35em 0.5em rgba(0, 0, 0, .35);
}

@media all and (max-width:640px) 
{
  #boton-menu{
      margin-left: 0.5em;
    }
}

#section4{
    padding: 1em;
    margin: 1em 3em 1em 2em;
    text-align: center;
}
p#parrafo-intro4{
    color:#ffffff;
    margin: 2em auto;
    text-align: justify-all;
    font-size: 20px;
    font-weight:lighter;
}

/*conocelo*/

main iframe{
  
    padding: 1em;
    margin: 0px 0px -2em 0px;
  
}

#video{
    text-align: center;
}
    
    
@media all and (max-width:640px) 
{
    main iframe{
  
        padding: 2em;
    margin: 0px 0px -2em 0px;
    }
    iframe{
  width: 29em;
        height: 16em;
    }
}


 aside h2 #h21{
    text-decoration: none;
     color: #ffffff;
    margin-top: 2em;
}

/*sala*/

#form-sala table{
    margin: auto;
    
}


#td-sala
{
    display: block; 
    margin-right: 12px;
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    width: 20em;
    
}
#td-sala textarea{
    background-color: #ffffff;
    width: 100%;
    height: 12em
    
    }
@media all and (max-width:640px) 
{
    #td-sala textarea{
          width: 102%;
         height: 10em;
    }
}

/*footer*/

#socialnav {
          text-align: center;
    margin-left: -2.5em;
    text-decoration: none;
    margin-top: 7em;
    }  

    #socialnav ul li {
        display: inline;
        
      }

    #socialnav ul li{
        margin: 10px;
        
    }

@media all and (max-width:640px) 
{
    #socialnav {
    margin-left: -4em;   
        padding: 2.5em;
        margin-top: 3em;
}