* { margin: 0; padding: 0; outline: 0; }

/* HTML5 tags */


@font-face { font-family: Neutra; src: url(../fonts/fontastique.ttf) format("truetype") }
@font-face { font-family: Brandon; src: url(../fonts/Brandon_light.otf) format("opentype") }
@font-face { font-family: Brandonb; src: url(../fonts/Brandon_bld.otf) format("opentype") }

* { font-family: Neutra, Arial;}
p { font-family: Brandon, Arial;}

::selection { background-color: rgba(204,102,0,0.5); }
::-moz-selection { background-color: rgba(204,102,0,0.5); }

a { text-decoration: none;}
#contentcontainer {width: 100%; margin: 0 auto; position: relative;  float: none; padding-top: 0px; }
section { margin-bottom: 0px; float: left; }


.boton-subir{
  border: 0;
  position: fixed;
  left: 15px;
  bottom:15px;
  z-index: 999999999;
  box-align:center;
}
/*--------------------------INICIO----------------------*/
#intro {  background: #fff; width:100%; padding:0; overflow:hidden;}
#intro div.d{ width:30%; text-align:center; padding:5% ; position:absolute; z-index:20000; right:0;}
#intro div.i{ width:100%; padding:0;}

/*--------------------------SERVICIO----------------------*/
#Valor { background: #fff; width:100%; padding:0;}
#Valor h2{ font-size:36px; float:left; width:90%; padding:10px 5%; color:#fff;font-family: Neutra, Arial;}
#Valor p{ font-size:20px; float:left; width:90%; padding:5%; color:#fff; text-align:center;}
#Valor div.c{ width:21%; padding: 5% 2%; display:table-cell; text-align:center; vertical-align:text-top;}
#Valor .gr{ background: #060;}
#Valor .or{ background: #f90;}

/*-------------------------- Platillos menu ----------------------*/ /*----por hacer---*/
#Platos { width:90%; padding: 5%;}
#Platos div.c{ width:70%; margin: 10px 15%; float:left; }

#Platos h2 { color:#F60; font-size:60px; margin: 0 5%; padding-bottom:30px; text-align:center;}
#Platos p.l{ font-size: 24px; text-align:center; margin:5px 5%; color:#F90;font-family: Neutra, Arial;}
#Platos p.ds{ font-size: 12px; text-align:center; padding:2px 5px; color:#093;}
#Platos p.pr{ font-size: 11px; text-align:center; padding:2px; color:#000;}
#Platos p a{color:#777;}

/*--------------------------SERVICIO----------------------*/
#planes { background: #fff; width:100%; padding:0;}
#planes h2 {font-size:60px; padding:30px 5%; text-align:center;}
#planes h2.pl{ font-size:40px; float:left; width:90%; padding:10px 5%;}
#planes p{ font-size:150px; float:left; width:90%; padding:5%; text-align:center;font-family: Brandonb, Arial;}
#planes p.t{ font-size:30px; float:left; width:90%; padding:0 5%; text-align:center;font-family: Neutra, Arial;}
#planes div.c{ width:29%; padding: 5% 2%; display:table-cell; text-align:center; vertical-align:text-top;}
#planes .bg2{ background: #060; color:#fff;}
#planes .bg1{ background: #f90; color:#000;}
#planes .bg3{ background: #FC0; color:#000;}

/*--------------------------Clientes----------------------*/
#clientes { background: #fff; width:100%; padding:5% 0;}
#clientes h2 { color:#F60; font-size:60px; margin: 0 5%; padding-bottom:100px; text-align:center;}
#clientes div.c{ width:16%; display:table-cell; text-align:center; padding:1%; vertical-align:text-top;}
#clientes div.d{ width:2%; display:table-cell;}

#clientes .bg2{ background: #060; color:#fff;}
#clientes .bg1{ background: #f90; color:#000;}
#clientes .bg3{ background: #FC0; color:#000;}

#clientes h2.t{ font-size:30px; padding:15px 0;}
#clientes p{ padding:15px; text-align:center; font-size:24px;}
#clientes img{border-radius:50% 50%; z-index:10; margin-top:-80px;}
#clientes img.b1{ border:5px solid #f90;}
#clientes img.b2{ border:5px solid #060;}
#clientes img.b3{ border:5px solid #FC0;}
/*--------------------------Resdes Sociales----------------------*/
#redes { background: #f90;  width:100%; padding: 5% 0;}
#redes h2{ font-size:30px; float:left; width:90%; padding:0 5% 10px; color:#000;}
#redes div.c{ width:29%; padding: 0 2%; float:left; text-align:center;}
#redes div.v{ width:58%; padding: 4% 2% 0; float:left; text-align:center;}

/*--------------------------Contacto----------------------*/
#Cont { background:#fff; width:100%; padding: 5% 0 0;}
#Cont div.txt{ width:31%;text-align:center; float:left; padding:1%;}
#Cont p{ color:#000; font-size:16px;}
#Cont p.f{ color:#000; font-size:24px;}
#Cont p a{ color:#ccc;}

#Cont form { text-align:center;}
#Cont input, #Cont textarea {background:#F90; padding: 10px; color: #000; font-size: 16px; border: 2px solid #fff;  margin-bottom: 5px; margin-top: 5px;}

#Cont input:hover, #Cont textarea:hover { background:#fff; border: 2px solid #F90;}

#Cont input:focus{ border: 2px solid #090;}
#Cont textarea:focus {border: 2px solid #090;}

#Cont input[type="text"],#Cont input[type="email"] { width: 91%;}
#Cont textarea { width: 91%; border-radius:none;}

#Cont input[type="submit"] { background:#567; color:#fff; font-size:18px; cursor: pointer; padding:8px 15px; border: 2px solid #567; }
#Cont input[type="submit"]:hover { background:#F90;color:#FFF; border: 2px solid #F90;}
#Cont input[type="submit"]:focus { background:#F90;color:#FFF; border: 2px solid #F90;}

#Cont .modal{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background:#F90;
	background:rgba(255,153,0,0.8);
	z-index:999;
}

#Cont .modal .modal-container{
	position:absolute;
	width:440px; height:auto;
	left:50%; margin-left:-220px;
	top:20%; background:#fff;
}
#Cont .modal div{ text-align:center; }
#Cont .modal .modal-content{ width:calc(100%-10px);	padding: 0 5px;}

#Cont .modal .modal-content p{
	font-size:34px;
	color:#090;
	padding:5%;
}
#Cont div.close{
	top:15px;
	right:15px;
	padding:6px;
}
	
#Cont div.close:before{
	float:right;
	width:21px;
	height:21px;
	content: url(../img/cross.png);
	cursor:pointer;
}

/*---------------------------------------------------------------------------------- Paginas Formulario ------*/
#Introp {  background: #fff; width:90%; padding:1% 5%; overflow:hidden;}
#Introp div.i{ width:30%; float:left; text-align:center;}
#Introp div.d{ width:70%; float:right;}

#Introp h2{ font-size:80px; text-align:center; width:98%; padding:5% 1%; color:#f90; float:left;}

#Freg { width:100%; padding:0;}

#Freg div.D{width:70%; display:table-cell; background: #f90; padding:2% 0;}
#Freg div.I{width:30%; display:table-cell; background: #f90; padding:0; vertical-align:top; text-align:center;}

#Freg div.txtP{width:21%; padding:1% 2%; float:left; text-align:left;}
#Freg div.txtC{width:29%; padding:1% 2%; float:left; text-align:left;}
#Freg div.txtM{width:46%; padding:1% 2%; float:left; text-align:left;}
#Freg div.txtD{width:98%; padding:1% 1%; float:left; text-align:left;}
#Freg div.txtImg{width:98%; padding:5% 1%; float:left; text-align:center;}

#Freg h2{ font-size:30px; text-align:center; width:98%; padding:1% 1%; color:#f90; float:left;}
#Freg div.txtM p, div.txtD p, div.txtC p{ font-size: 24px; text-align:justify; width:96%; padding:0 2%; color:#000; float:left;}

#Freg div.txtM span, div.txtD span, div.txtC span{ font-size: 14px; color:#f00;}

#Freg input[type=text], input[type=password], textarea, select{ background:#fff; border: 5px solid #FC0; padding: 10px; color: #000; font-size: 20px; -webkit-border-radius: 5px; margin: 10px 0;  }
#Freg textarea {  height: 100px; font-size: 20px;font-family: trebuc, Arial, sans-serif;}
#Freg input[type=text]:hover, input[type=password]:hover,textarea:hover,select:hover { border: 5px solid #f90; }
#Freg input[type=text]:focus, input[type=password]:focus,textarea:focus,select:focus { border: 5px solid #f90; }

#Freg .tl{ width:90%;}
#Freg .tl2{ width:96%;}
#Freg .tc{ width:85%;}
#Freg textarea {  height: 100px; }

#Freg input[type="submit"] {  width: 38%; padding:1%; margin:0 30%; font-size: 30px; border:0; background:#fc0; text-align:center; color:#000; float:left;  -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}

#Freg input[type="submit"]:hover { background:#ff0;}


@media all and (max-width: 1024px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
	

/*--------------------------SERVICIO----------------------*/
#Valor h2{ font-size:34px;}
#Valor p{ font-size:18px;}


/*-------------------------MENU DEL DIA----------------------*/
#Platos h2 { color:#F60; font-size:40px;}
#Platos p.l{ font-size: 20px; }


/*--------------------------PLANES----------------------*/
#planes h2 {font-size:40px;}
#planes h2.pl{ font-size:30px; }
#planes p{ font-size:100px;}

/*--------------------------Clientes----------------------*/
#clientes h2{font-size:40px;}
#clientes h2.t{ font-size:24px;}
#clientes p{font-size:20px;}
/*--------------------------Resdes Sociales----------------------*/
#redes { background: #f90;  width:100%; padding: 5% 0;}
#redes h2{ font-size:23px;}
#redes div.v{ width:58%; padding: 2% 2% 0; float:left; text-align:center;}
#redes div.v video{ height:250px;}


/*---------------------------------------------------------------------------------- Paginas Formulario ------*/
#Introp h2{ font-size:50px;}

#Freg { width:100%; padding:5% 0;}

#Freg div.D{width:70%; display:table-cell; background: #f90; padding:5% 0;}
#Freg div.I{width:30%; display:table-cell; background: #f90; padding:0; vertical-align:top}

#Freg div.txtM span, div.txtD span, div.txtC span{ font-size: 14px; color:#f00;}

#Freg input[type=text], input[type=password], textarea, select{ padding: 5px;}

}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 768px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 768px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 768px), only screen and (min-device-pixel-ratio: 2) and (max-width: 768px), only screen and (min-resolution: 192dpi) and (max-width: 768px), only screen and (min-resolution: 2dppx) and (max-width: 768px) {


/*--------------------------SERVICIO----------------------*/
#Valor h2{ font-size:24px;}
#Valor p{ font-size:12px;}


/*-------------------------MENU DEL DIA----------------------*/
#Platos h2 { font-size:30px;}
#Platos p.l{ font-size: 14px; }


/*--------------------------PLANES----------------------*/
#planes h2 {font-size:30px;}
#planes h2.pl{ font-size:24px; }
#planes p{ font-size:80px;}

/*--------------------------Clientes----------------------*/
#clientes h2{font-size:30px;}
#clientes h2.t{ font-size:20px;}
#clientes p{font-size:14px;}
/*--------------------------Resdes Sociales----------------------*/
#redes { background: #f90;  width:100%; padding: 5% 0;}
#redes h2{ font-size:18px;}
#redes div.v{ width:58%; padding: 0 2% 0; float:left; text-align:center;}
#redes div.v video{ height:200px;}

/*--------------------------Pie----------------------*/

#Cont p{ color:#000; font-size:12px;}
#Cont p.f{ color:#000; font-size:14px;}

#Cont input, #Cont textarea {padding: 5px 10px; font-size: 12px; margin-bottom: 2px; margin-top: 2px;}
#Cont input[type="submit"] { font-size:12px;padding:4px 15px; }
/*---------------------------------------------------------------------------------- Paginas Formulario ------*/
#Introp h2{ font-size:40px;}

#Freg { width:100%; padding:5% 0;}


#Freg div.D{width:50%; display:table-cell; background: #f90; padding:5% 0;}
#Freg div.I{width:50%; display:table-cell; background: #f90; padding:0; vertical-align:top}

#Freg div.txtP{width:90%; padding:0 5%; float:left; text-align:left;}
#Freg div.txtC{width:90%; padding:0 5%; float:left; text-align:left;}
#Freg div.txtM{width:90%; padding:0 5%; float:left; text-align:left;}
#Freg div.txtD{width:90%; padding:0 5%; float:left; text-align:left;}

#Freg div.txtM p, div.txtD p, div.txtC p{ font-size: 18px;}

#Freg div.txtM span, #Freg div.txtD span, #Freg div.txtC span, #Freg div.txtD span{ font-size: 12px; color:#f00;}

#Freg input[type=text], input[type=password], textarea, select{ font-size: 15px;  padding: 5px;}

#Freg .tl{ width:90%;}
#Freg .tl2{ width:90%;}
#Freg .tc{ width:80%;}

#Freg input[type="submit"] {  width: 90%; padding:1%; margin:0 4%; font-size: 30px; border:0; background:#fc0; text-align:center; color:#000; float:left;  -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}

#Freg input[type="submit"]:hover { background:#ff0;}
} 

@media all and (max-width: 479px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 479px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 479px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 479px), only screen and (min-device-pixel-ratio: 2) and (max-width: 479px), only screen and (min-resolution: 192dpi) and (max-width: 479px), only screen and (min-resolution: 2dppx) and (max-width: 479px) {


/*--------------------------INICIO----------------------*/
#intro div.d{  width:70%; padding: 2% 15%; float:left; text-align:center; background:#fff; position:relative;}
#intro div.d img{  width:70%; height:auto;}
#intro div.i{  width:100%; padding: 0; float:left; text-align:center;}

/*--------------------------SERVICIO----------------------*/
#Valor h2{ font-size:36px; }
#Valor p{ font-size:25px;}
#Valor div.c{ width:90%; padding: 5%; float:left; text-align:center;}

/*-------------------------- Platillos menu ----------------------*/
#Platos { width:80%; padding: 5% 10%;}

/*--------------------------SERVICIO----------------------*/
#planes h2 {font-size:30px}
#planes h2.pl{ font-size:30px;}
#planes p{ font-size:100px;}
#planes p.t{ font-size:30px;}
#planes div.c{ width:90%; padding: 5%; float:left; text-align:center;}

/*--------------------------Clientes----------------------*/
#clientes h2 { font-size:30px;  width:90%; margin: 0; padding:5%; text-align:center;}
#clientes div.c{  width:90%;text-align:center; float:left; margin:5%; margin-top:80px;}
#clientes div.d{ width:0; float:left;}
#clientes h2.t{ font-size:30px; padding:15px 0;}
#clientes p{ padding:15px; text-align:center; font-size:24px;}

/*--------------------------Resdes Sociales----------------------*/
#redes { width:100%; padding: 1% 0; height:auto;}
#redes h2{ font-size:20px; }
#redes div.c{ width:90%; padding: 5%; float:left; text-align:center;}
#redes div.v{ width:90%; padding: 5%; float:left; text-align:center;}

/*--------------------------Contacto----------------------*/
#Cont { background:#fff; width:100%; padding: 5% 0;}
#Cont div.txt{ width:90%;text-align:center; float:left; padding:5%;}
#Cont p a{ color:#666;}
#Cont p{ color:#000; font-size:16px;}
#Cont p a{ color:#ccc;}


/*---------------------------------------------------------------------------------- Paginas Formulario ------*/
#Introp div.i{ width:90%; float:left; padding:1% 5%;}
#Introp div.d{ width:90%; float:right; padding:1% 5%;}

#Introp div.i img{ width:90%; height:auto;}
#Introp h2{ font-size:30px;padding:1%;}

#Freg { width:100%; padding:5% 0;}

#Freg div.D{width:90%; float:left; background: #f90; padding:5%;}
#Freg div.I{width:100%; float:left; background: #f90; padding:0; vertical-align:top}

#Freg div.txtP{width:90%; padding:1% 5%; float:left; text-align:left;}
#Freg div.txtC{width:90%; padding:1% 5%; float:left; text-align:left;}
#Freg div.txtM{width:90%; padding:1% 5%; float:left; text-align:left;}
#Freg div.txtD{width:90%; padding:1% 5%; float:left; text-align:left;}

#Freg h2{ font-size:30px; text-align:center; width:98%; padding:1% 1%; color:#f90; float:left;}
#Freg div.txtM p, div.txtD p, div.txtC p{ font-size: 24px; text-align:justify; width:100%; padding:0; color:#000; float:left;}

#Freg div.txtM span, #Freg div.txtD span, #Freg div.txtC span, #Freg div.txtD span{ font-size: 14px; color:#f00;}
#Freg div.txtM div, #Freg div.txtD div, #Freg div.txtC div, #Freg div.txtD div{ width:100%; padding:0; margin:0;}

#Freg input[type=text], input[type=password], textarea, select{ font-size: 20px; }

#Freg .tl{ width:90%;}
#Freg .tl2{ width:90%;}
#Freg .tc{ width:80%;}
#Freg textarea {  height: 100px; }

#Freg input[type="submit"] {  width: 90%; padding:1%; margin:0 4%; font-size: 30px;}


}