/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.inicio h1{
  display: none;
}

.background{
  background: url('/img/fondoWasu.jpg');
  background-repeat: no-repeat;
  background-position: 40% 0%;
  background-size: cover;
}

.black{
  color: black;
}

#my_arrow{
  cursor: pointer;
}

.all{
  width: 100vw;
  height: 45vw;
}

.ban-center{
  width: 100%;
  position: absolute;
  top: 30%;
}

#block_center{
  font-family: CharcuterieBlock;
  font-size: 30px;
  color: white;
}

#block_center a{
  color: white;
}
/*****************************************************************************
*
*******************				Fuentes usadas 
*
*****************************************************************************/

@font-face {
    font-family: CharcuterieBlock;
    src: url('/../fonts/CharcuterieBlock.otf');
}

@font-face {
    font-family: CharcuterieBlockBold;
    src: url('/../fonts/CharcuterieBlock-Bold.otf');
    font-weight: bold;
}

@font-face {
    font-family: CharcuterieBlockOblique;
    src: url('/..fonts/CharcuterieBlock-Oblique.otf');
    font-style: oblique;

}

@font-face {
    font-family: CharcuterieBlockBoldOblique;
    src: url('/..fonts/CharcuterieBlock-BoldOblique.otf');
    font-weight: bold;
    font-style: oblique;
}

@font-face {
    font-family: MrEavesSanOTBold;
    src: url('/../fonts/MrEavesSanOT-Bold.otf');
    font-weight: bold;
}

@font-face {
    font-family: MrEavesSanOTRegitalic;
    src: url('/../fonts/MrEavesSanOT-RegItalic.otf');
}

@font-face {
    font-family: MrEavesSanOTBoldItalic;
    src: url('/../fonts/MrEavesSanOT-BoldItalic.otf');
    font-weight: bold;
}

@font-face {
    font-family: MrEavesSanOTHeavyItalic;
    src: url('/../fonts/MrEavesSanOT-HeavyItalic.otf');
}

/******************************** fin fuentes ************************************/



section{
	width: 100%;
}

/* Remove the navbar's default margin-bottom and rounded borders */ 
.navbar {
  margin-bottom: 0;
  border-radius: 0;
  background-color: transparent;
  border-width: 0px;
}

.navbar i{
  color: white;
}

/* Add a gray background color and some padding to the footer */
footer {
  background-color: rgb(37,17,10);
  padding: 25px;
  font-family: CharcuterieBlock;
  font-size: 15px;
  color: white;
}

.right{
  display: block;
  float: right;
}

.right2{
  display: block;
  float: right;
  margin-right: 50px;
}

.ours{
  font-family: CharcuterieBlock;
  color: rgb(37,17,10);
  font-size: 30px;
}

footer a{
  color:white;
}

footer a:hover{
  color: #edcd62;
}

/* *********************************************************************
*
* Clases agregadas despues de la plantilla
*
* ***********************************************************************/

/* Breve animación de entrada del titulo */

.animation {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

/* Fin de la animación */

/* Color */
.cafecini{
	width: 100%;
	background-color: rgba(37,17,10,0.8);
}

/*  *************************************************
**           Sección de Menú
 ************************************************* */

 #menu{
    min-height: 500px;
    /* Set background image to fixed (don't scroll along with the page) */
    background-attachment: fixed;
    /* Center the background image */
    background-position: center;
    /* Set the background image to no repeat */
    background-repeat: no-repeat;
    /* Scale the background image to be as large as possible */
    background-size: cover;
 }

 .animation img{
    width: 60%;
    margin: auto;
 }

 .cutting{
  width: 100%;
 }

  .space-background{
    height: 600px;
  }

  .flotante {
    float: left;
    height: 30%;
    width: 100%;
    margin-bottom: -50px;
  }

 .msg-welcome{
    font-family: CharcuterieBlock;
    color: white;
    font-size: 30px;
    margin-top: 5%;
 }

 .msg-arrow{
    font-family: CharcuterieBlock;
    font-size: 30px;
    margin-top: 2%;
 }

.space-background i{
  color: white;
}
/*  *************************************************
**           Sección de carrusel 
 ************************************************* */
#carrusel{
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.carousel-inner figure {
  width: 100vw;
  height: 100vw;
}

.carousel-inner img {
  width: 33%; /* Set width to 100% */
  margin: auto;
  height: 33%;
}

.img-cebada {
  width: 25%; /* Set width to 100% */
  height: 70%; /* Set width to 100% */
}

.carousel-control.left, .carousel-control.right {
   background-image:none !important;
   filter:none !important;
}

.beer-title {
  font-family: CharcuterieBlock;
  font-size: 50px;
  position: absolute;
  top: -600px;
  left: -100px;
}

.beer-text-left{
  font-family: MrEavesSanOTBoldItalic;
  font-size: 25px;
  position: absolute;
  top: -300px;
  left: -160px;
}

.beer-text-right1{
  font-family: MrEavesSanOTBoldItalic;
  font-size: 30px;
  position: absolute;
  top: -600px;
  right: -140px;
}

.beer-text-right2{
  font-family: MrEavesSanOTBoldItalic;
  font-size: 25px;
  position: absolute;
  top: -300px;
  right: -140px;
}


/* Para cambiar de color los titulos y textos dentro de la cerveza */

.titulo1{
  color: #403B7E;
}

.texto1{
  color: #2E373C;
}

.titulo2{
  color: #4F3526;
}

.titulo3{
  color: #0F2027;
}

.titulo4{
  color: #70090C;
}

.titulo5{
  color: #141855;
}

.titulo6{
  color: #0093A0;
}

/*  *************************************************
**           Sección de ventas 
 ************************************************* */
#sales{
  margin-top:5%;
}

#sales h3{
	padding-top: 2%;
	padding-bottom: 2%;
	font-family: CharcuterieBlock;
	font-size: 60px;
	color: white;
}

#sales img{
	margin-bottom: 2%;
}

#sales .container{
	padding-left: 10%;
}

/*  *************************************************
**           Sección de ventas 
 ************************************************* */
#videos{
  margin-top: 5%;
}

#videos h3{
  padding-top: 2%;
  padding-bottom: 2%;
  font-family: CharcuterieBlock;
  font-size: 40px;
  color: white;
}

#videos .container{
  padding-top: 3%;
}

#menu-descarga h3{
  padding-top: 2%;
  padding-bottom: 2%;
  font-family: CharcuterieBlock;
  font-size: 40px;
  color: white;
}

#menu-descarga a{
  color: white;
}
/* *************************************************
**          Sección de contacto 
****************************************************/

#contact {
	margin-top: 5%;
}

#contact h3{
	padding-left: 5%;
	font-family: CharcuterieBlock;
	font-size: 45px;
	color: rgb(37,17,10);
}

.wasu-input{
  width: 70%;
  height: 60px;
  background-color: rgba(37,17,10,0.8);
  font-family: MrEavesSanOTBold;
  color: white;
  font-color: white;
  font-size: 30px;
  margin-bottom: 5%;
  margin-left: 8%;
  border-radius: 0px;
}

#contact textarea{
  border-radius: 0px;
  width: 70%;
  height: 330px;
  background-color: rgba(37,17,10,0.8);
  font-family: MrEavesSanOTBold;
  color: white;
  font-color: white;
  font-size: 30px;
  margin-left: 2%;
}

.wasubtn{
  width: 20%;
  height: 60px;
  background-color:rgba(37,17,10,0.8);
  font-family: MrEavesSanOTBold;
  color: white;
  font-color: white;
  font-size: 30px;
  margin-top: 5%;
  margin-left: 52%;
  border-radius: 0px;
}

/*  **************************************************
**              Sección de mapa
 **************************************************** */

#mymap{
	margin-top: 5%;
}

#map{
  width: 100%;
  height: 600px;
}