@charset "UTF-8";
/* CSS Document */



.clase {
   // propiedades comunes a todos los medios aqui.
}

@media screen and (width <= 640px) {
  .clase {
    // propiedades para mobiles aqui.
  }
}  

@media screen and (width > 640px) {
  .clase {
    // propiedades de escritorio aqui
  }
} 

@media print {
  .clase {
    // propiedades impresora aqui.
  }
} 

@media (orientation:portrait) { 
   // el celular o tableta esta en modo retrato
}

@media (orientation:landscape) { 
   // el celular o tableta esta apaisado
}






body {
	margin:0;
	padding:0;
	background:#000;
	color:#CCC;
	width:100%;
	text-align:center;	
		font-size: 14px;
	line-height: 18px;
	font-family: Arial, Helvetica, sans-serif;
	
	}
	
	a {
	text-decoration: none;
	color: #f48222;
	  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
		}
		
		a:hover {
			color:#FFF;
	
		}
	
ul, li {
	margin:0;
	padding:0;
	list-style-type: none;	
	}

#contenedor  {
	width:960px;
	text-align:left;
	margin:auto;
	overflow:visible;
	}


#header {
	width: 100%;
	height: 130px;
	background-image: url(../images/fondo-header.png);
	background-position: center top;
	overflow: visible;
	z-index: 999;
	
	}
	#contenido {
	width:100%;
	overflow:visible;
		}
	
	#footer {
	width: 100%;
	float:left;
	margin-top: 20px;
	margin-bottom: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #CCC;
	font-size:12px;
			}
			
			#cats{
	width: 960px;
	float:left;
	margin-top:20px;
	margin-bottom:20px;
	
				}
			
	#cats a:hover img {
			color: #f48222;
	  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;		
		}
		
			#cats a img:hover {
	 /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
		}
	
.logo {
	width:254px;
	height:12px;
	float:left;
	position:relative;
	z-index:999;
	}
	
	.menu {
	float: right;
	text-align:right; 
	font-family: 'CubanoRegular';
	font-size:16px;
	margin-top:90px;
	}
.menu li {
	display:inline;
		list-style-type: none;
		color: #f48222;
		
	}
	
	.menu li a {
	
	}

.footer-tel {
	float: left;	
	}
.footer-nikit {
	float:right;	
	}

#banner{
	width:960px;
	height:540px;
		}
		
	#cont-interior {
	width: 960px;
	display: block;
	float: left;
	background-image: url(../images/fondo.jpg);
	background-repeat: no-repeat;
	background-position: 150px -20px;
	overflow:visible;
		}
		
		#cont-interior-acerca {
	width: 960px;
	display: block;
	float: left;
	background-image: url(../images/fondo-acerca-de.jpg);
	background-repeat: no-repeat;
	background-position: 150px -20px;
	overflow:visible;
		}
	
#mascara-banner {
	background-image:url(../images/mascara-banner.png);
	z-index:999;
	position:absolute;
	width:960px;
	height:395px;
	}
#video {
	width:960px;
	height:540px;
	
	}

.col-1 {
	width: 475px;
	height: 240px;
	float: left;
	margin-right: 6px;
		margin-top:16px;
	background-color: #404040;
	border: 1px solid  #404040;

		}
.col-2 {
	width: 475px;
	height: 240px;
	float: left;
	background-image: url(../images/fondo-suscripcion.jpg);
	background-repeat: no-repeat;
		margin-top:16px;
	background-color: #404040;
	border: 1px solid  #404040;
		}
		
		.col-1-interior {
	width: 420px;
	float: left;
	margin-right: 6px;
		margin-top:60px;
	
		}
.col-2-interior {
	width: 450px;
	float: right;
			margin-top:400px;
						}
		
		form {
			display:block;
			float:left;
			width:100%;
			
			}
		.form-suscripcion {
			margin-top:168px;
			margin-left:25px;
			height:70px;
			}
			
			.datos {
				color:#99cc66;
				text-transform:uppercase;
				padding:3px;
				float:left;
				width:290px;
						}
				
						
			.datos input {
				color:#9999;
				text-transform:lowercase;
				background-color: #FFF;
				border:#FFF;
		     	padding:3px;
				margin-left:5px;
				margin-bottom:5px;
				}
				
				.boton-susc {
					font-family: 'CubanoRegular';
					font-size:20px;
	color: #FFF;
	text-transform: uppercase;
	margin-left: 5px;
	height: 46px;
	width: 105px;
	float: left;
	background: #99cc66;
	margin-top: 2px;
	margin-right: 0px;
	margin-bottom: 0px;
	border:none;
	
	    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
	cursor: pointer;
				}
				
				
				
						.boton-susc:hover {
	background-color: #9CE061;
					}
				
							.boton-contacto {
	font-family: 'CubanoRegular';
	font-size: 20px;
	color: #FFF;
	text-transform: uppercase;
	margin-left: 0px;
	height: 46px;
	width: 105px;
	float: left;
	margin-top: 2px;
	margin-right: 0px;
	margin-bottom: 0px;
	border: none;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	cursor: pointer;
	background-color: #FF9900;
				}
				
	.boton-contacto:hover {
	background-color: #FFCC00;
				}
				
h1 {
	color:#FFF;
	font-family: 'CubanoRegular';
					font-size:22px;
					 font-weight: normal;
    font-style: normal;
	margin:0;
	padding:0;

	
	}
	
	blockquote {
		color:#FFF;
		font-size:16px;
		font-style:italic;
		margin-left:10px;
		margin-top:25px;
		margin-bottom:25px;
		}


 /* Tamaño estandard para escritorio */
    .col-1 {width: 33.33%;}
    .col-2 {width: 33.33%;}
    .col-3 {width: 33.33%;}

img, video, object, embed {
    max-width:100%;         /* Aquí el tamaño máximo de tus imágenes */
    height:auto;            /* No es necesario, sólo para clarificar */
}

@media screen and (max-width:640px) {
    /* reglas CSS */
}
@media screen and (max-width:1024px) and (min-width:640px) {
    /* reglas CSS */
}
@media screen and (min-width:1024px) {
    /* reglas CSS */
}    



    @media only screen and (max-width: 768px) {
        /* Moviles y tablets: */
        [class*="col-"] {
            width: 100%; /* todas las columnas ocupan el 100% creando 3 filas */
        }
    }
    
    @media only screen and (max-width: 1499px) and (min-width: 800px) {
    	/* tamaño de pantalla mediana / pequeña */
        .col-1 {width: 50.00%;}
        .col-2 {width: 50.00%;}
        .col-3 {width: 100.00%;}
    }