/*------------------------------------------------------------
-------- DEMO Code
------------------------------------------------------------*/
 
.wrap {
text-align:left;
	
}

/*----- Toggle Button -----*/
.toggle-nav {
	display:none;

}

/*----- Menu -----*/
@media screen and (min-width: 860px) {
	.menu {
		width:100%; 
		background:#242727;
	    color:white; 
		float:left;
	}
	
	/*------------------------------------------------------------EMPIEZA 1 -----*/
	.logo {
	 width:400px;
	 height:180px;
	}
	.cinco {
	width:200px;
	height:55px;
	}
	.chat1{
		width:120px;
	    height:120px;
	}
	.chat2{
	font-weight:bold; 
	font-size:28px;
	}
	.bienvenido1 {
		width: 270px;
	    height:40px;
		
	}
	
	.b11 {	 
	     width: 60px;
	     height:174px;
	 }
    .b12 {	 
	     width: 60px;
	     height:174px;
	 }

	 .cuadro2{
	 text-align:center;
	 }
	 .b21 {	 
	     width: 60px;
	     height:174px;
	 }
    .b22 {	 
	     width: 60px;
	     height:174px;
	 }
	 
	 .bienvenido2 {
	 height:250px;
	 width:1100px; 
	 }
	 
	.letras1{
	font-size:20px;
	}
		 .cuadro3{
	 text-align:center;

	
	 }
	 .cuadro3b {
	   width:40%;
	        color:white;
	 font-size:20px;
      border: 1px solid;
	   
	 }
	 
	 
	 .s1{
	 width:350px; 
	 height:350px;
	 }
	 
	 
	 
}

.menu ul {
	display:inline-block;

}
 
.menu li {
	 padding-left:18px;
	float:left;
	list-style:none;
	font-size:22px;
	 font-weight:400;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

.menu li:last-child {
	margin-right:10px;
}

.menu a {
	 
	color:#ffffff;
	 text-decoration:none;
	
}

.menu a:hover, .menu .current-item a {
	text-decoration:none;
	color:#242727;
	background-color:#f6d11a;
	
	
	
 
}

/*----- Search -----*/
 
 

/*----- Responsive -----*/
@media screen and (max-width: 1150px) {
	.wrap {
		width:90%;
		 z-index:4;
	}
	/*------------------------------------------------------------EMPIEZA 2 -----*/
	.logo {
	 width:200px;
	 height:147px;
	}
	
	.cinco {
	width:120px;
	height:35px;
	}
		.chat1{
		width:80px;
	    height:80px;
	}
		.chat2{
	font-weight:bold; 
	font-size:18px;
	}
	
	.bienvenido1 {
		width: 170px;
	    height:20px;
		
		
	}
	
	.b11 {	 
	     width: 30px;
	     height:90px;
	 }
    .b12 {	 
	     width: 30px;
	     height:90px;
	 }

	 .cuadro2{
	text-align:left;
	 }
	 	.b21 {	 
	     width: 30px;
	     height:160px;
	 }
    .b22 {	 
	     width: 30px;
	     height:160px;
	 }
	  .bienvenido2 {
	 height:200px;
	 width:800px; 
	 }
		.letras1{
	font-size:16px;
	}
	
	.s1{
	 width:250px; 
	 height:250px;
	 }
	 
}

@media screen and (max-width: 970px) {
	.search-form input {
		width:180px;
		 z-index:4;
	}
	/*------------------------------------------------------------EMPIEZA 3 -----*/
	.logo {
	 width:200px;
	 height:147px;
	}
		.cinco {
	width:120px;
	height:35px;
	}
		.chat1{
		width:80px;
	    height:80px;
	}
		.chat2{
	font-weight:bold; 
	font-size:18px;
	}
	  .bienvenido2 {
	 height:150px;
	 width:800px; 
	 }
	 
	  .cuadro2{
	text-align:left;
	 }
	 .b21 {	 
	     width: 30px;
	     height:120px;
	 }
    .b22 {	 
	     width: 30px;
	     height:120px;
	 }
	 	.letras1{
	font-size:14px;
	}
	
	.s1{
	 width:250px; 
	 height:250px;
	 }
	 
}
/*------------------------------------------------------------EMPIEZA 4 -----*/
@media screen and (max-width: 860px) {
	.menu {
		position:relative;
		display:inline-block;
		 z-index:4;
	}
	.logo {
	 width:200px;
	 height:147px;
	}
	
	 
		.cinco {
	width:120px;
	height:35px;
	}
		.chat1{
		width:80px;
	    height:80px;
	}
		.chat2{
	font-weight:bold; 
	font-size:18px;
	}
	
	
	  .bienvenido2 {
	 height:150px;
	 width:600px; 
	 }
	 	 	.b21 {	 
	     width: 30px;
	     height:110px;
	 }
    .b22 {	 
	     width: 30px;
	     height:110px;
	 }
 .cuadro2{
	text-align:left;
	 }
	 
	 	.letras1{
	font-size:12px;
	}
	 .s1{
	 width:250px; 
	 height:250px;
	 }
	 
	.menu ul.active {
		display:none;
		 z-index:4;
	}

	.menu ul {
		width:100%;
		position:absolute;
		top:120%;
		left:0px;
		padding:10px 18px;
		box-shadow:0px 1px 1px rgba(0,0,0,0.15);
		border-radius:3px;
		background:#242727;
		/* menu flotante */
		 z-index:4;
	}

	.menu ul:after {
		width:0px;
		height:0px;
		position:absolute;
		top:0%;
		left:22px;
		content:'';
		transform:translate(0%, -100%);
		border-left:7px solid transparent;
		border-right:7px solid transparent;
		border-bottom:7px solid #303030;
		 z-index:4;
	}

	.menu li {
		 
		float:none;
		display:block;
		 z-index:4;
		 font-size:18px;
	 font-weight:200;
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
	}

	.menu a {
		display:block;
		 z-index:4;
	}

	.toggle-nav {
		padding:20px;
		float:left;
		display:inline-block;
		 
		border-radius:3px;
		background:#242727;
		 
		color:#000000;
		font-size:20px;
		 
	 z-index:4;
	}

	.toggle-nav:hover, .toggle-nav.active {
		text-decoration:none;
		color:#cccccc;
		 z-index:4;
	}
 
}