/* PAGE FLIP */
#magazine{
    width:1132px;
    height:335px;
}
#magazine .turn-page{
    background-color:#ccc;
    background-size:100% 100%;
}

/* FULL SCREEN VIDEO */
/*
 * If developing a full page background the styles from .video-background will be required.
 * The classname itself is unimportant.
 *
 */
.video-background {
    position: static;
    top: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    z-index: 0;
    /*max-height: 800px;*/
}
.video-background video {
    min-height: 100%; 
    min-width:100%; 
}
.ui-video-background {
    top: 55px;
}


/*************************/

body {
    font-family: "Droid Sans";
}
@font-face {
    font-family: "centabel";
    src: url(https://oceansdistillery.com/default_public/fuentes/centabel/centabel.ttf) format("truetype");
}
@font-face {
    font-family: "magnolia";
    src: url(https://oceansdistillery.com/default_public/fuentes/magnolia/Magnolia.ttf) format("truetype");
}


#intro { 
    background-image: url(https://oceansdistillery.com/default_public/default_public/images/intro.png);
    background-position; 50% 0;
    /*background- fixed; */
    height: auto;  
    margin: 0 auto; 
    width: 100%; 
    position: relative; 
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    padding: 100px 0;
}
#homes { 
    background-image: url("https://oceansdistillery.com/default_public/default_public/images/catalogo.jpeg");
    background-size: cover;
    background-position; 0% 0;
    /*background- fixed; */
    height: auto;  
    margin: 0 auto; 
    width: 100%; 
    position: relative; 
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    padding: 200px 0;
    /*background-size: cover;*/
}
#home2 { 
    background-image: url(https://oceansdistillery.com/default_public/default_public/images/home2.jpg);
    background-position; 50% 0;
    /*background- fixed; */ 
    height: auto;  
    margin: 0 auto; 
    width: 100%; 
    position: relative; 
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    padding: 200px 0;
}
#about { 
    background-image: url(https://oceansdistillery.com/default_public/default_public/images/about.jpg);
    background-position; 50% 0;
    /*background- fixed; */ 
    height: auto;
    margin: 0 auto; 
    width: 100%; 
    position: relative; 
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    padding: 100px 0;
    color: #fff;
}


.row.destacados .thumbnail, .row.destacados .thumbnail * {
  outline: none !important;
  text-decoration: none !important;
}
/* Non-essential demo stuff */
.hero-unit {
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
.media-object { width: 64px; height: 64px; padding-bottom: 30px }

/*
 * Style twaks
 * --------------------------------------------------
 */
body {
  padding-top: 70px;
}
footer {
  padding-left: 15px;
  padding-right: 15px;
}

h2, h3 {
    font-family: centabel;  /*color: white;*/
}

/**
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.15s ease-out !important;
    -moz-transition: all 0.15s ease-out !important;
    transition: all 0.15s ease-out !important;
  }

  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -80%; /* 6 columns */
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -80%; /* 6 columns */
  }

  .row-offcanvas-right.active {
    right: 80%; /* 6 columns */
  }

  .row-offcanvas-left.active {
    left: 80%; /* 6 columns */
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 80%; /* 6 columns */
  }
}

/**************/
.modal {
    left: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 50px;
    z-index: 1040;
}
.modal .modal-header button {
  background: #999;
}
.modal-header {
    border-bottom: 1px solid #444444;
    color: #F5DEB3;
    font-family: centabel;
}
.btn-modal { 
    background-color: #424242;
    border-color: #424242;
    color: #FFFFFF;
}

/**
*
* BOTELLAS QUE SUBEN
*
*/
.span4.well {
    transition: all 1.0s ease-in-out 0s;
    opacity: 0;
}
.span4.well.active {
    transition: all 1.0s ease-in-out 0s;
    opacity: 1;
}
/***************/
#slogan-section-2 {
    overflow: hidden;
    background: url("https://oceansdistillery.com/default_public/default_public/images/fondo-madera-8.jpg") repeat fixed 50% 0 #020403;
    color: #FFFFFF;
    margin: 0 auto;
    max-width: 100%;
    min-height: 400px;
    padding: 40px 0;
    width: 100%;
    z-index: 200;
    /*background-size: cover;*/
    /*box-shadow: 0 0 40px 20px #000 inset;*/
}
.parallax-point-event {
    height: 100%;
    min-height: 100%;
    width: 100%;
}
.bg {
/*  background: url("https://oceansdistillery.com/default_public/default_public/images/logo.png") repeat fixed 50% 0 transparent;*/
    height: 100%;
    width: 100%;
}
#slogan-section-2 .parallax-point-event .container {
    display: block;
    height: 100%;
    min-height: 500px;
    position: relative;
}
.browser-shot-2 {
    bottom: -200%;
    /*box-shadow: 0 0 12px rgba(50, 50, 50, 0.75);*/
    left: 0;
    margin: 0;
    max-width: 30%;
    overflow: hidden;
    padding: 0;
    position: absolute;
    transition: all 0.2s ease-in-out 0s;
    width: 30%;
    z-index: 9;
    opacity: 0.9;
}
.browser-shot-2.active {
    bottom: -60px;
}.browser-shot-1 {
    bottom: -200%;
    left: 35%;
    margin: 0;
    max-width: 55%;
    overflow: hidden;
    padding: 0;
    position: absolute;
    transition: all 0.2s ease-in-out 0s;
    width: 30%;
    z-index: 10;
}
.browser-shot-1.active {
    bottom: -60px;
}
.browser-shot-3 {
    bottom: -200%;
    /*box-shadow: 0 0 12px rgba(50, 50, 50, 0.75);*/
    margin: 0;
    max-width: 30%;
    /*overflow: hidden;
    padding: 0;*/
    position: absolute;
    right: 0;
    transition: all 0.2s ease-in-out 0s;
    width: 30%;
    z-index: 9;
    opacity: 0.9;
}
.browser-shot-3.active {
    bottom: -60px;
}
@media screen and (max-width: 767px) {
    .browser-shot-2, .browser-shot-1, .browser-shot-3 {
        position: relative;
        left:  0;
        margin-bottom: 20px;
        width: 100%;
        max-width: 100%;
    }
    .browser-shot-3 {
        margin-bottom: 50px;
        margin-top: 50px;
    }
}

.browser-shot-2:hover {
    bottom: -40px;
}
.browser-shot-1:hover {
    bottom: -40px;
    cursor: pointer;
}
.browser-shot-3:hover {
    bottom: -40px;
}


/********************************/

        .activadores-botellas {
            height: 100%; width: 33%;display: inline-block; position: absolute; top:0; display: block;
            
            /*background: red; opacity: 0.4;*/
            
        }
/*********************** GLOBAL ************************/


@font-face {
    font-family: "centabel";
    src: url(../../fuentes/centabel/centabel.ttf) format("truetype");
}
@font-face {
    font-family: "magnolia";
    src: url(../../fuentes/magnolia/Magnolia.ttf) format("truetype");
}

.btn-receta {
	background: url(../images/negro03.png) repeat scroll 0% 0% transparent; border: 1px solid rgb(51, 51, 51); box-shadow: 0px 0px 3px rgb(34, 34, 34) inset; color: rgb(238, 238, 238);
}

.thumbnail {
	padding: 15px; 
	text-align: left;
}
.thumbnail {
	background: url("../images/pergamino5.jpg") repeat scroll 0 0 / cover #8b5d3b;
	box-shadow: 0 2px 4px #000, 0 11px 1px -5px #333;
	border:0;
	border-radius: 2px;
}

.thumbnail img {border: 1px solid #ccc;}
/*.thumbnail * {color: white;}*/
li.list-group-item {
	background: url(../images/negro03.png) repeat scroll 0% 0% transparent;
	border: 1px solid #333333;
}

.thumbnail img {
	border: 0;
}
.thumbnail img.cocktail {
	border: 0;
	box-shadow: 0 0 4px #000000;
}

.thumbnail .caption p {
	margin-left: 45px;
}

.thumbnail .caption h3 {
	margin-left: 45px;
	margin-bottom: 0px;
}

.viga1 {
	background: url(../images/viga2.jpg) #333333; width: 100%; height: 50px; border-top: 2px solid #0a0a0a; border-bottom: 2px solid #0a0a0a; box-shadow: 0 0 10px black; position: relative;
}


.viga2 {
	background: url(../images/viga2.jpg) #333333; width: 100%; height: 50px; border-top: 2px solid #0a0a0a; border-bottom: 2px solid #0a0a0a; box-shadow: 0 0 10px black; position: relative;
}






/********************** INTRO RESUMEN ********************/
.intro-resumen {
    background: url(../images/curved3.jpg) repeat scroll 50% bottom / cover   #5D4235;

    background-color: #5D4235;
    background-image: url("../images/curved3.jpg");
    background-position: 50% bottom;
    background-repeat: repeat;
    background-size: cover;

}
    .intro-resumen .row {
        overflow: hidden; 
        padding-top: 200px;
    }
        .intro-resumen .row .thumbnail.bitacoras {
            position: relative;
            bottom: 0px; 
            height: 400px;

    background-color: transparent;
    background-image: url(../images/pergamino3.jpg);
    background-position: 0 0;
    background-repeat: repeat;


            border: 0 none;
            border-radius: 2px;
            box-shadow: 0 2px 4px #000000, 0 11px 1px -5px #333333;
            padding: 15px;
        }
            .intro-resumen .row .thumbnail.bitacoras .timon {
                width: 36px; 
                float: left;
            }

        .intro-resumen .row .central {
            height: 400px;
        }

        .intro-resumen .row .thumbnail.recetas {
            position: relative;
            bottom: 0px; 
            height: 400px;
            background: url(../images/pergamino5.jpg) repeat scroll 0 0 / cover #8b5d3b;

    background-color: #8b5d3b;
    background-image: url(../images/pergamino5.jpg);
    background-position: 0 0;
    background-repeat: repeat;
    background-size: cover;

            border: 0 none;
            border-radius: 2px;
            box-shadow: 0 2px 4px #000000, 0 11px 1px -5px #333333;
        }
            .intro-resumen .row .thumbnail.recetas .clip {
                position: absolute; 
                top: -20px; 
                left: 30px; 
                height: 120px;
                border:0; 
                width: 40px;
            }

			/*.intro-resumen .row .thumbnail:hover {
				bottom: 0px;
			}*/



	.bitacoras-cont{
		position: absolute; left: 0px; width: 100%; bottom: -20px; padding: 15px;
	}
	.rones-cont {
		position: absolute; width: 100%; left: 0px; bottom: -20px; padding: 15px;
	}
	.recetas-cont {
		position: absolute; width: 100%; left: 0px; bottom: -40px; padding: 15px;
	}

	.row.destacados .thumbnail {
		cursor: pointer;
	}

	.enlace-catalogo.movil {
		display: none;
	}





/******************* INTRO CONTACTO *******************/
.intro-contacto {
	box-shadow: none; 
	/*border-bottom: 20px solid rgb(18, 18, 18); 
	border-top: 20px solid rgb(18, 18, 18); */
	background: url(../images/wood-background.jpg) repeat scroll 50% 0 / cover #222222; 

    background-color: #222222;
    background-image: url(../images/wood-background.jpg);
    background-position: 50% 0;
    background-repeat: repeat;
    background-size: cover;


	padding-top: 50px; 
	padding-bottom: 50px;
}
	.intro-contacto .container {
		position: relative; 
		z-index: 99;
	}
		.intro-contacto .container .row {
			padding-top: 20px; 
			padding-bottom: 20px; 
			background-color: rgba(0, 0, 0, 0.4);
			box-shadow: 0px 0px 8px rgb(0, 0, 0) inset; 
			border-radius: 2px;
		}
			.intro-contacto .container .row .contacto {
				text-align: ceter; 
				font-family: centabel; 
				font-size: 20px; 
				color: rgb(221, 221, 221);
			}
				.intro-contacto .container .row .contacto .p {
					line-height: 38px; 
					display: inline; 
					color: rgb(245, 222, 179);
				}

			.intro-contacto .container .row .catalogo {
				text-align: ceter; 
				font-family: centabel; 
				font-size: 20px; 
				color: rgb(221, 221, 221);
			}
				.intro-contacto .container .row .catalogo .p {
					line-height: 38px; 
					display: inline; 
					color: rgb(245, 222, 179);
				}

			.intro-contacto .container .row .revista {
				height: 335px; 
				width: 1132px; 
				clear: both;
			}				
				.intro-contacto .container .row .revista .enlace-catalogo {
					background: url(../images/negro03.png) repeat scroll 0% 0% transparent;

				    left: 65%;
				    padding: 10px 20px 35px 0;
				    position: absolute;
				    top: 40%;
				}				
					.intro-contacto .container .row .revista .enlace-catalogo a {
						width: 250px;
						color: orange;
						font-size: 20px;
					}

		.intro-contacto .container .row.destacados {
			background: rgba(0, 0, 0, 0.4);
		    border: 1px solid #181818;
		    box-shadow: 0 0 8px #000,  0 0 4px #000;
		    margin-bottom: 50px;
		    padding-bottom: 50px;
		    padding-top: 50px;
		}
			.intro-contacto .container .row.destacados .thumbnail {
				box-shadow: 0 2px 4px #000000, 0 11px 1px -5px #222222;
			}
				.intro-contacto .container .row.destacados .thumbnail .caption p {
					margin-left: 0px;
				}



/******************* EXTRA RESPONSIVITY ******************/



@media (max-width: 768px) {
	.intro-resumen .row {
		padding-top: 20px;
	}
		.intro-resumen .row .central {
			height: auto;
		}
			.bitacoras-cont, .rones-cont, .recetas-cont {
				position: static;
			}

			.rones-cont img {
				margin-top: -35px;
			}

				.intro-resumen .row .thumbnail.recetas, .intro-resumen .row .thumbnail.bitacoras {
					height: auto;
				}
	.row.destacados .thumbnail {
		margin-bottom: 20px;
	}

	.texto-enlace-contacto {
		margin-bottom: 50px;
	}
}

@media (max-width: 1199px) {

	.intro-contacto .row .revista {
		display: none;
	}
	
	.enlace-catalogo.movil {
		display: block;
	}
	
	.texto-enlace-catalogo {
		display: none;
	}
	
	.enlace-catalogo.desktop {
		display: none;
	}
}