@charset "utf-8";

/*Si quieres cambiar el tamaño de la fuente en el elemento html, hazlo con un valor em o rem pues el tamaño de la fuente raíz será un múltiplo del tamaño de la fuente del navegador del usuario.*/

@media all and (max-width:650px){ 
  }
@import url('https://fonts.googleapis.com/css?family=Macondo');  /*para importar fuente de servidor externo*/

.container{   
   margin:15px;
   font-family: "Lucida" Grande, Macondo, sans-serif; 
   background:#ffd8ca;
   /*height:900px;*/
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
     
}
header{
  /*height:150px;*/
  height:10%;
  background:pink;
}
h1{
  font-size:1rem;
}  
.menu{
  /*height:10%;*/
  background:red;
  height:10%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: space-around;
  -ms-flex-pack: justify;
  justify-content: space-around;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  font-family:'Macondo',cursive; /*fuente importada*/
  font-size: 0.8rem;
}

.caja{
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}  
  

.video{
  width:35%;
  /*background:white;*/
  float:left; /*para juntar páginas*/
 /* height:70%; quito para que imagen fondo llegue hasta final sigo en pantalla pequeñas queda corto */
  -webkit-border-radius: 0.5em; /*borde caja*/
  border-radius: 0.5em;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,7db9e8+100&1+0,0+100;Blue+to+Transparent */
  background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26 +, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */
  
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
 -webkit-justify-content: space-around;
  -ms-flex-pack: justify;
  justify-content: space-around;
  -webkit-align-content: center;
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

.texto{
  background:blue;
  color:white;
  font-size:0.7rem;
  text-align: center;
	overflow:auto;
  width:29.5%;
  /*max-width: 50rem; se acomoda el ancho de la caja a al de la pantalla pero el texto en IE11 sigue expandiéndose*/
  float:left;
  height:70%; /*aquí no hay problema de que caja quede mas pequeña px el texto se acomoda en ventana con scroll*/
  /*-webkit-border-radius: 10px;
  border-radius: 10px;*/
  -webkit-transition: background 5s ease-in-out; /*no parece funcionar sería un efecto de transición del color*/
  -moz-transition: background 5s ease-in-out; /*de fondo al posicionar el ratón encima*/
  -ms-transition: background 5s ease-in-out; /*idem*/
  -o-transition: background 5s ease-in-out; /*idem*/
  transition: background 5s ease-in-out; /*idem*/
  /*border: 1px solid #666;*/
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  /*-webkit-justify-content: center; /*space-around; con esta opción la foto se solapa sobre el foot*/
  /*-ms-flex-pack: center; /*justify; idem ant*/
  /*justify-content: center; /*space-around; idem ant*/
  
}

.texto p{
  width: inherit;
  text-align: center; /*necesario si no se alinea a izq*/
  margin:auto; /*sin esta linea el texto se acomoda con menos margen a los lados y en IE11 da problemas px se alinean totalmt a izq*/
}


.imagenes{
   width:35%;
   background:orange;
   float:left;
   /*height:70%; quito para que imagen fondo llegue hasta final sigo en pantalla pequeñas queda corto */
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   -webkit-align-content: center;
   -ms-flex-line-pack: center;
   align-content: center;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-justify-content: center; /*space-around; con esta opción la foto se solapa sobre el foot*/
   -ms-flex-pack: center; /*justify; idem ant*/
   justify-content: center; /*space-around; idem ant*/
   -webkit-flex-wrap: nowrap; /*wrap sale bien en Chrome en el resto se alinean*/
   -ms-flex-wrap: nowrap;
   flex-wrap: nowrap;
}
/*.imagenes img{
  margin:auto;
}*/
.foot{
  height:10%;
  background:grey;
  clear:both; /*así ocupa toca la pantalla*/
  
}