@import url('//fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
@import url('//fonts.googleapis.com/css2?family=Questrial&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Lexend:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
  --color-negro: rgb(0,0,0);
  --color-blanco: rgb(255,255,255);
  --color-rojo: rgb(239,76,77);
  --color-naranja: rgb(254,130,88);
  --color-gris: rgb(170,170,170);
  
  --font-roboto: 'Roboto';
  --font-questrial: 'Questrial';
  --font-raj: 'Rajdhani';

  --color-cremita1: #EAE2D5;
  --color-cremita2: #F5F1EB;
  --color-cafe1: #52413C;
  --color-naranja1: #E74224;
  --color-naranja2: #EC6524;
  --font-anton: "Anton";
  --font-lexend: "Lexend";
}

html, body {
	margin: 0px;
	padding: 0px;
	font-family: var(--font-lexend), cursive;
	background: #FFFFFF;
	color:var(--color-cafe1);
}

#header {
  padding: 0;
  height: 110px;
  position: fixed;
  left: 0;
  /*top: 10px;*/
  right: 0;
  z-index: 99999;
  /*background-color: transparent;*/
  background: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,0));
  background: -prefix-linear-gradient(top, rgba(0,0,0,.9), rgba(0,0,0,0));
  
  -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.logo-menu{
	width: 100px;
}

.encabezado-sinfondo{
	background-color: transparent;
	-webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.encabezado-fondo{
	background-color: rgba(0,0,0,.8);
	padding-top: 0px;
	/*min-height:100vh;*/
	-webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

/* ----- HEADER ---*/
#row-menu{
		display:block;
	}
	
.nav-link{
	font-size: 14px;
	color: var(--color-blanco);
	font-family: var(--font-anton) !important;
	border-bottom: 2px solid transparent;
}

.nav-link:hover{
	border-bottom: 2px solid var(--color-rojo);
	color: var(--color-blanco);
}

.nav-link:visited {
	color: var(--color-blanco);
}

.linea{
	background-image:url("../img/linea.png");
	background-position: center center;
	background-size:  auto 100%   ;
}


/* ----- CAROUSEL ---*/
#carousel{
	padding: 0px;
	margin: 0px;
	
}

#carousel .carousel-inner{
	
    /*height: 530px;*/
	/*background-image:url("../img/carousel/SLIDER  - LA TRAGONERA - 01.jpg");*/
	background-repeat: no-repeat;
	background-position: top center;
	background-size:  100% auto   ;
	background-attachment: fixed;
}

#carousel .carousel-item {
  width: 100%;
  height: 100%;
  
}

#carousel .carousel-img img{
	width: 100%;
    /*height: 100%;*/
}

#carousel .carousel-caption{
	top:200px;
}

#carousel .carousel-caption h1{
	font-family: var(--font-roboto), cursive;
	font-weight:bolder;
	font-size: 20px;
	line-height: 0px;
}

#carousel .carousel-caption h2{
	font-family: var(--font-roboto), cursive;
	font-weight:bolder;
	font-size: 30px;
}

/* ----- SECCION PIZZA HISTORIA  ---*/
#historia{
	
	/*background-color: var(--color-blanco);*/
	/*background-image:url("../img/secciones/bkg-textura-negra-la-tragonera.jpg");*/

	background-color:var(--color-cremita1);
	background-repeat: no-repeat;
	background-position: center center;
	background-size:  100% auto;
	background-attachment: fixed;
}
#historia h4{
	color: var(--color-naranja1);
	font-family: var(--font-anton);
}

#historia p{
	font-size: 13px;
	text-align: justify;
}

#historia .img-historia{
	width: 300px;
	
}

#historia h6{
	color: var(--color-naranja1);
}

/* ----- SECCION PIZZA ESPECIALIDADES ---*/
#pizza-espacialidades{
	/*background-color: var(--color-blanco);
	background-image:url("../img/secciones/bkg-textura-blanco-la-tragonera.jpg");*/

	background-color:var(--color-cremita2);
	background-repeat: no-repeat;
	background-position: center center;
	background-size:  100% auto;
	background-attachment: fixed;
}

#pizza-espacialidades img{
	width: 100%;
}

#pizza-espacialidades h1{
	font-size: 40px;
	line-height: 15px;
	font-family: var(--font-anton);
	color: var(--color-naranja1);
}

#pizza-espacialidades .subtitulo{
	font-size: 16px;
	border: 1px solid var(--color-naranja1);
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 2px;
	padding-bottom: 2px;
}

#pizza-espacialidades h2{
	font-family: var(--font-anton);
	color: var(--color-naranja2);
	position: relative;
	top:15px;
	font-size: 25px;
}

#pizza-espacialidades h3{
	font-size: 10px;
}

#pizza-espacialidades h6{
	font-size: 13px;
	letter-spacing: 0px;
}

#pizza-espacialidades .precio{
	color: var(--color-naranja2);
	font-weight: bold;
}

#pizza-espacialidades .nota{
	color: var(--color-naranja2);
	font-size: 16px;
	font-weight: bold;
}


/* ----- SECCION PIZZAS CLASICAS ---*/
#pizzas-clasicas{
	/*background-color: var(--color-blanco);
	background-image:url("../img/secciones/bkg-textura-negra-la-tragonera.jpg");*/

	background-color:var(--color-cremita1);
	background-repeat: no-repeat;
	background-position: center center;
	background-size:  100% auto   ;
	background-attachment: fixed;
}

#pizzas-clasicas img{
	width: 100%;
}

#pizzas-clasicas h1{
	font-size: 40px;
	line-height: 15px;
	font-family: var(--font-anton);
	color: var(--color-naranja1);
}

#pizzas-clasicas .subtitulo{
	font-size: 16px;
	border: 1px solid var(--color-naranja2);
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 2px;
	padding-bottom: 2px;
}

#pizzas-clasicas h2{
	font-family: var(--font-anton);
	color: var(--color-naranja2);
	position: relative;
	top:15px;
	font-size: 25px;
}

#pizzas-clasicas h3{
	font-size: 10px;
}

#pizzas-clasicas h6{
	font-size: 13px;
	letter-spacing: 0px;
}

#pizzas-clasicas .precio{
	color: var(--color-naranja2);
	font-weight: bold;
}

#pizzas-clasicas .nota{
	color: var(--color-naranja2);
	font-size: 16px;
	font-weight: bold;
	position: relative;
	top: 15px;
	
}

#pizzas-clasicas .nota2{
	background-color: var(--color-naranja2);
	font-size: 14px;
	font-weight: bold;
	position: relative;
	top: 15px;
	z-index: 10000;
	line-height: 15px;
	padding: 2px;
}

#pizzas-clasicas .marco-naranja{
	border: 1px solid var(--color-naranja2);
	padding: 12px;
	position: relative;
	top: -10px;
	font-size: 14px;
	
}

/* ----- SECCION COMPLEMENTOS ---*/
#complementos{
	/*background-color: var(--color-blanco);
	background-image:url("../img/secciones/bkg-textura-blanco-la-tragonera.jpg");*/

	background-color:var(--color-cremita2);
	background-repeat: no-repeat;
	background-position: center center;
	background-size:  100% auto   ;
	background-attachment: fixed;
	color: #000000;
}

#complementos h1{
	font-family: var(--font-anton);
	color: var(--color-naranja1);
	font-size: 40px;
	line-height: 15px;
}

#complementos .subtitulo{
	font-size: 16px;
	border: 1px solid var(--color-naranja1);
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 1px;
	padding-bottom: 1px;
	font-weight: bold;
	background-color: var(--color-naranja1);
	color: #FFFFFF;
}

#complementos h2{
	font-family: var(--font-anton);
	color: var(--color-naranja2);
	position: relative;
	top:12px;
	font-size: 25px;
}

#complementos h3{
	font-family: var(--font-anton);
	color: var(--color-naranja2);
	font-size: 16px;
}

.borde_naranja_izquierda
{
 	border-left: 2px solid var(--color-naranja1);
}

.borde_naranja_abajo
{
 	border-bottom: 1px solid var(--color-naranja1);
}
#complementos p{
	font-size: 13px;
	letter-spacing: 0px;
}

#complementos .precio{
	color: var(--color-naranja);
	position: relative;
	top:18px;
	font-weight: bold;
}

#complementos .nota{
	color: var(--color-naranja);
	font-size: 16px;
	font-weight: bold;
	position: relative;
	top: 15px;
	background-color: rgba(0,0,0,.1);
}

/* ----- SECCION DELAGRANJA ---*/
#delagranja{
	/*background-color: var(--color-blanco);
	background-image:url("../img/secciones/bkg-textura-negra-la-tragonera.jpg");*/

	background-color:var(--color-cremita1);
	background-repeat: no-repeat;
	background-position: center center;
	background-size:  100% auto   ;
	background-attachment: fixed;
	
}

#delagranja .imagen{
	/*margin-bottom: -120px;
	margin-top: -50px;*/
	/*width: 75%;*/
}

#delagranja .imagen-caja{
	/*overflow: hidden;*/
}

#delagranja h1{
	font-family: var(--font-anton);
	color: var(--color-naranja1);
	font-size: 40px;
	line-height: 35px;
}

#delagranja .subtitulo{
	font-size: 16px;
	border: 1px solid var(--color-naranja2);
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 0px;
	padding-bottom: 0px;
	font-weight: bold;
}

#delagranja h2{
	font-family: var(--font-anton);
	color: var(--color-naranja2);
	font-size: 25px;
	position: relative;
	top:10px;
}

#delagranja h3{
	font-family: var(--font-anton);
	color: var(--color-naranja2);
	font-size: 15px;
	line-height: 20px;
}

#delagranja p{
	font-size: 12px;
	letter-spacing: 0px;
}

#delagranja .precio{
	color: var(--color-naranja2);
	position: relative;
	top:15px;
	font-weight: bold;
}

#delagranja .nota{
	color: var(--color-naranja2);
	font-size: 16px;
	font-weight: bold;
	position: relative;
	top: 15px;
}

/* ----- SECCION DELAGRANJA ---*/
#boneless{
	/*background-color: var(--color-blanco);
	background-image:url("../img/secciones/bkg-textura-blanco-la-tragonera.jpg");*/

	background-color:var(--color-cremita2);
	background-repeat: no-repeat;
	background-position: center center;
	background-size:  100% auto   ;
	background-attachment: fixed;
	
}

#boneless .imagen{
	margin-bottom: -120px;
	margin-top: -50px;
	position: relative;
	top: -50px;
}

#boneless h1{
	font-family: var(--font-anton);
	color: var(--color-naranja2);
	font-size: 40px;
	line-height: 20px;
}

#boneless .subtitulo{
	font-size: 16px;
	border: 1px solid var(--color-naranja2);
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 0px;
	padding-bottom: 0px;
	font-weight: bold;
}

#boneless h2{
	font-family: var(--font-anton);
	color: var(--color-naranja2);
	font-size: 23px;
	position: relative;
	top:10px;
}



#boneless p{
	font-size: 12px;
	letter-spacing: 0px;
}

#boneless .precio{
	color: var(--color-naranja2);
	position: relative;
	top:15px;
	font-weight: bold;
}

#boneless .nota{
	color: var(--color-naranja1);
	font-size: 16px;
	font-weight: bold;
	position: relative;
	top: 15px;
}

#boneless .bkg{
	background-image:url("../img/secciones/ensaladas/NUGGETS- LA TRAGONERA.png");
	background-repeat: no-repeat;
	background-position: left -20px;
	background-size:  75% auto   ;
	height: 300px;
}


/* ----- SECCION HAMBURGUESAS ---*/
#hamburguesas{
	/*background-color: var(--color-blanco);
	background-image:url("../img/secciones/bkg-textura-negra-la-tragonera.jpg");*/

	background-color:var(--color-cremita2);
	background-repeat: no-repeat;
	background-position: center center;
	background-size:  100% auto   ;
	background-attachment: fixed;
	
}


#hamburguesas .bkg{
	background-color:var(--color-cremita2);
	background-image:url("../img/secciones/hamburguesa.png");
	background-repeat: no-repeat;
	background-position: center top;
	background-size:  auto 100%   ;
}

#hamburguesas .imagen{
	margin-bottom: -120px;
	margin-top: -50px;
	position: relative;
	top: -50px;
}

#hamburguesas h1{
	font-family: var(--font-anton);
	color: var(--color-naranja2);
	font-size: 40px;
	line-height: 20px;
}

#hamburguesas .subtitulo{
	font-size: 18px;
	border: 1px solid var(--color-naranja1);
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 0px;
	padding-bottom: 0px;
	font-weight: bold;
	background-color: var(--color-naranja1);
	color: #FFFFFF;
}

#hamburguesas h2{
	font-family: var(--font-anton);
	color: var(--color-naranja2);
	font-size: 23px;
	position: relative;
	top:10px;
}

#hamburguesas p{
	font-size: 13px;
	letter-spacing: 0px;
}

#hamburguesas .precio{
	color: var(--color-naranja);
	position: relative;
	top:15px;
	font-weight: bold;
}

#hamburguesas .nota{
	color: var(--color-naranja);
	font-size: 16px;
	font-weight: bold;
	position: relative;
	top: 15px;
}


/* ----- SECCION POSTRES---*/
#postres{
	background-color: var(--color-blanco);
	background-image:url("../img/secciones/bkg-textura-negra-la-tragonera.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size:  100% auto   ;
	background-attachment: fixed;
	color: #FFFFFF;
	
}

#postres h1{
	font-size: 40px;
	line-height: 20px;
}

#postres .subtitulo{
	font-size: 16px;
	border: 1px solid var(--color-rojo);
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 0px;
	padding-bottom: 0px;
}

#postres h2{
	font-family: var(--font-anton);
	color: var(--color-naranja2);
	font-size: 18px;
	position: relative;
	top:10px;
}

#postres h6{
	font-size: 15px;
	letter-spacing: 0px;
	font-family: var(--font-roboto);
}

#postres .precio{
	color: var(--color-naranja);
	position: relative;
	top:15px;
	font-weight: bold;
}

#postres .nota{
	color: var(--color-naranja);
	font-size: 16px;
	font-weight: bold;
	position: relative;
	top: 15px;
}

/* ----- SECCION BEBIDAS---*/
#bebidas{
	/*background-color: var(--color-blanco);
	background-image:url("../img/secciones/BEBIDAS - LA TRAGONERA.jpg");*/

	background-color:var(--color-cremita1);
	background-repeat: no-repeat;
	background-position: center top;
	background-size:  100% auto;
	background-attachment: fixed;
	color: #FFFFFF;
	height: 450px;
}

#bebidas .subtitulo{
	font-size: 24px;
	background-color: #000000;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 0px;
	padding-bottom: 0px;
}

/* ----- SECCION POSTRES---*/
#cocteleria{
	/*background-color: var(--color-blanco);
	background-image:url("../img/secciones/bkg-textura-blanco-la-tragonera.jpg");*/

	background-color:var(--color-cremita2);
	background-repeat: no-repeat;
	background-position: center center;
	background-size:  100% auto   ;
	background-attachment: fixed;
	color: #000;
	
}

#cocteleria h1{
	font-size: 40px;
	line-height: 20px;
	font-family: var(--font-anton);
	color: var(--color-naranja1);
}

#cocteleria .subtitulo{
	font-size: 16px;
	background-color: var(--color-naranja1);
	font-family: var(--font-anton);
	color: #FFFFFF;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 0px;
	padding-bottom: 0px;
}

#cocteleria h2{
	font-family: var(--font-anton);
	color: var(--color-naranja2);
	font-size: 23px;
	position: relative;
	top:10px;
}

#cocteleria h6{
	font-size: 15px;
	letter-spacing: 0px;
}

#cocteleria .precio{
	color: var(--color-naranja);
	position: relative;
	top:15px;
	font-weight: bold;
}

#cocteleria .nota{
	color: var(--color-naranja);
	font-size: 16px;
	font-weight: bold;
	position: relative;
	top: 15px;
}

#cocteleria .titulo-chico{
	font-size: 10px;
	min-height: 15px;
}

#cocteleria .precio2{
	color: var(--color-naranja);
	position: relative;
	top:10px;
	font-weight: bold;
}

/* ----- SECCION sinalcohol  ---*/
#sinalcohol {
	background-color: var(--color-blanco);
	background-image:url("../img/secciones/bkg-textura-negra-la-tragonera.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size:  100% auto   ;
	background-attachment: fixed;
	color: #FFFFFF;
	
}


#sinalcohol  .bkg{
	background-image:url("../img/secciones/PINIADA - LA TRAGONERA.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size:   100% auto  ;
}

#sinalcohol  .imagen{
	margin-bottom: -120px;
	margin-top: -50px;
	position: relative;
	top: -50px;
}

#sinalcohol  h1{
	font-size: 40px;
	line-height: 20px;
	font-family: var(--font-anton);
	color: var(--color-naranja1);
	
}

#sinalcohol .titulo-chico{
	font-size: 10px;
}

#sinalcohol  .subtitulo{
	font-size: 18px;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 0px;
	padding-bottom: 0px;
	font-weight: bold;
	background-color: var(--color-naranja1);
	font-family: var(--font-anton);
}

#sinalcohol  h2{
	font-size: 20px;
	position: relative;
	top:10px;
}

#sinalcohol  h6{
	font-size: 15px;
	letter-spacing: 0px;
}

#sinalcohol  .precio{
	color: var(--color-naranja);
	position: relative;
	top:18px;
	font-weight: bold;
}

#sinalcohol  .nota{
	color: var(--color-naranja);
	font-size: 16px;
	font-weight: bold;
	position: relative;
	top: 15px;
}


/* ----- SECCION extras ---*/
#extras {
	background-color: var(--color-blanco);
	background-image:url("../img/secciones/bkg-textura-blanco-la-tragonera.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size:  100% auto   ;
	background-attachment: fixed;
	color: #000;
	
}

#extras  h1{
	font-size: 40px;
	line-height: 20px;
	font-family: var(--font-anton);
	color: var(--color-naranja2);
}

#extras .subtitulo{
	font-size: 16px;
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 0px;
	padding-bottom: 0px;
	font-family: var(--font-anton);
	font-weight: bold;
}

#extras  h2{
	font-size: 20px;
	position: relative;
	top:10px;
	color: var(--color-naranja2);
}

#extras  h6{
	font-size: 15px;
	letter-spacing: 0px;
}

#extras  .precio{
	color: var(--color-naranja2);
	position: relative;
	top:15px;
	font-weight: bold;
}

#extras  .nota{
	color: var(--color-naranja1);
	font-size: 16px;
	font-weight: bold;
	position: relative;
	top: 15px;
}


/* ----- SECCION contacto ---*/
#contacto {
	background-color: var(--color-blanco);
	color: var(--color-gris);
	font-family: var(--font-raj);
	
}

#contacto  h1{
	font-size: 30px;
	padding-top:30px;
	color: var(--color-rojo);
}

#contacto h2{
	font-size: 15px;
	color: var(--color-rojo);
	font-family: var(--font-questrial);
}

#contacto  p{
	font-size: 12px;
	color: var(--color-gris);
	font-family: var(--font-questrial);
}

#contacto a{
	text-decoration:none;
	color: var(--color-gris);
	-webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

#contacto a:hover{
	-webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
	color: var(--color-rojo);
}

#contacto span i:hover{
	color: var(--color-rojo);
	-webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

@media screen and (max-width:800px ) {
	/*#header {
	  position: relative;
	  background-color: rgba(0,0,0,1);
	  
	  -webkit-transition: all .5s;
	    -moz-transition: all .5s;
	    -o-transition: all .5s;
	    transition: all .5s;
	}
	*/
	
	/*#encabezado {
	  background-color: rgba(0,0,0,1);
	  
	  -webkit-transition: all .5s;
	    -moz-transition: all .5s;
	    -o-transition: all .5s;
	    transition: all .5s;
	}*/
	#row-menu{
		display:none;
	}
	
	.nav-link{
		font-size: 20px !important;
		color: var(--color-blanco);
		font-family: var(--font-questrial), cursive;
		border-bottom: 2px solid transparent;
		padding: 15px !important;
	}
	
	#carousel .carousel-item {
	  height: 140px;
	}
	
	#carousel .carousel-img img{
		width: 100%;
	    height: auto;
	}
	
	#historia{
	
		/*background-color: var(--color-blanco);
		background-image:url("../img/secciones/bkg-textura-negra-la-tragonera.jpg");*/
		background-position: center center;
		background-size:   auto 100%  ;
	}

	#pizza-espacialidades h2{
		position: relative;
		top:10px;
		font-size: 20px;
		font-weight: bold;
	}
	
	#pizza-espacialidades, #pizzas-clasicas, #complementos, #delagranja, #postres, #hamburguesas, #boneless, #bebidas, #cocteleria,#sinalcohol,#extras{
		background-position: center center;
		background-size:  auto 100%;
	}
	
	#pizzas-clasicas h2{
		position: relative;
		top:10px;
		font-size: 20px;
		font-weight: bold;
	}
	
	#delagranja h1{
		font-size: 40px;
		line-height: 30px;
	}
	
	#delagranja .imagen{
		width: 100%;
	}
	
	#delagranja .imagen-caja{
		/*height: 110px;*/
	}

	#boneless .bkg{
		background-image:url("../img/secciones/ensaladas/NUGGETS- LA TRAGONERA.png");
		background-repeat: no-repeat;
		background-position: center 100px;
		background-size:  100% auto   ;
		height: 250px;
	}
	
	#boneless h2{
		font-size: 23px;
		position: relative;
		top:10px;
	}
	
	#hamburguesas .bkg{
		background-image:url("../img/secciones/hamburguesa.png");
		background-repeat: no-repeat;
		background-position: center top;
		background-size:  auto 100%    ;
		height: 250px;
	}
	
	
	
}