/**
 * The cards
 *
 * Each card plays home to a front and back. I've set them up as squares here
 * by using the padding technique, but you may set them up in any dimensions
 * you like based on your site design.
 */
.card {
  position: relative;
  float: left;
  padding-bottom: 22%;
  width: 25%;
  text-align: center;
  overflow:hidden;

}

#tab_default_2 .div5{width:14%; float:left;}
#tab_default_1 .div5{
	width:14%; float:left;
}
.left1{
	margin-left:23%;
}
/* card fronts and backs */
.card__front,
.card__back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor:default;
}

.card__front,
.card__back {
  -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.3s;
          transition: transform 0.3s;
}

.card__front {
 background-size:cover;
}

.card__back {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
		  background-size:cover;
}





/* random effect */
.card.effect__random.flipped .card__front {
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
}

.card.effect__random.flipped .card__back {
  -webkit-transform: rotateY(0);
          transform: rotateY(0);
}



.overlay{display:none}
.card__front:hover .overlay{display:block !important;  background-color:rgba(104,67,42,.8); color:white}
.card__back:hover .overlay{display:block !important; background-color:rgba(104,67,42,.8); height: 700px ;}

#demo:hover .card__back {
  -webkit-transform: rotateY(0) !important;
          transform: rotateY(0) !important;
		   -webkit-transition: -webkit-transform 0s !important;
          transition: transform 0s !important;
} 
/* Card fotos front*/
.cardf1{background-image:url(../sources/images/img-process-blueagave.jpg);}
.cardb1{background-image:url("../sources/images/img_process_blueagave.png");}



.cardf2{background-image:url(../sources/images/img-process-jima.jpg);}
.cardb2{background-image:url(../sources/images/img_process_jima.png);}

.cardf3{background-image:url(../sources/images/img-process-cooking.jpg);}
.cardb3{background-image:url(../sources/images/img_process_cooking.png);}


.cardf4{background-image:url(../sources/images/img-process-tahona.jpg);}
.cardb4{background-image:url(../sources/images/img_process_Tahona.png);}

.cardf5{background-image:url(../sources/images/img-process-fermentation.jpg);}
.cardb5{background-image:url(../sources/images/img_process_Fermentation.png);}

.cardf6{background-image:url(../sources/images/img-process-distillation.jpg);}
.cardb6{background-image:url(../sources/images/img_process_Destillation.png);}

.cardf7{background-image:url(../sources/images/img-process-logo-2.jpg); background-size:contain !important}
.cardb7{background-image:url(../sources/images/img_process_logo.png); background-size:contain !important}

.cardf8{background-image:url(../sources/images/img-process-bottling.jpg);}
.cardb8{background-image:url(../sources/images/img_process_bottling.png);}

.footer_bottom{color:white; text-align:center; padding:20px 0px; background-color:#5f462e;}
.footer_bottom p, .footer_bottom a{color:white}
a:hover{color:white !important; opacity:.8; text-decoration:none !important}

#Video1 {width:800px; position:relative;left:50%; margin-left:-400px; margin-top:50px; margin-bottom:50px}

#banner {background-image:url(../sources/images/img-banner-01.jpg);height: 900px;

background-size: cover;}
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
    color: white;
    padding-top: 20px;
    text-align: center;
    position: absolute;
    z-index: 99999;
    width: 540px;
    left: 50%;
    margin-left: -270px;

}
.nav a{color:white; font-size:18px; font-family:"Montserratbold"; margin-left:20px}
#premios{
	    background-color: white;
    padding: 50px 80px;
}
.txtpremios{
	width: 60%;
margin-left: 20%;
text-align: justify;
}
#premios .customNavigation_3 {
    width: 105%;
    margin-left: -2.5% !important;
    
    top: 100px;
    
}
#premios .customNavigation_3 .fa{
	color: #9ddae8;
font-size: 40px;
}


.tabbable-panel {
  border:1px solid #eee;
  padding: 10px;
}

/* Default mode */
.tabbable-line > .nav-tabs {
  border: none;
  margin: 0px;
}
.tabbable-line > .nav-tabs > li {
  margin-right: 2px;
}
.tabbable-line > .nav-tabs > li > a {
  border: 0;
  margin-right: 0;
  color: #737373;
}
.tabbable-line > .nav-tabs > li > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover {
  border-bottom: 4px solid #fbcdcf;
}
.tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a {
  border: 0;
  background: none !important;
  color: #333333;
}
.tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i {
  color: #a6a6a6;
}
.tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu {
  margin-top: 0px;
}
.tabbable-line > .nav-tabs > li.active {
  border-bottom: 4px solid #f3565d;
  position: relative;
}
.tabbable-line > .nav-tabs > li.active > a {
  border: 0;
  color: #333333;
}
.tabbable-line > .nav-tabs > li.active > a > i {
  color: #404040;
}
.tabbable-line > .tab-content {
  margin-top: -3px;
  background-color: #fff;
  border: 0;
  border-top: 1px solid #eee;
  padding: 15px 0;
}
.portlet .tabbable-line > .tab-content {
  padding-bottom: 0;
}

/* Below tabs mode */

.tabbable-line.tabs-below > .nav-tabs > li {
  border-top: 4px solid transparent;
}
.tabbable-line.tabs-below > .nav-tabs > li > a {
  margin-top: 0;
}
.tabbable-line.tabs-below > .nav-tabs > li:hover {
  border-bottom: 0;
  border-top: 4px solid #fbcdcf;
}
.tabbable-line.tabs-below > .nav-tabs > li.active {
  margin-bottom: -2px;
  border-bottom: 0;
  border-top: 4px solid #f3565d;
}
.tabbable-line.tabs-below > .tab-content {
  margin-top: -10px;
  border-top: 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 15px;
}

#premios .tab-content img{
	width:auto;
	margin:auto;
}
.wine img{
	    width: 85% !important;
    margin-top: 15px !important;
}
#premios .tabbable-panel{
	width:100% ;
	margin-left:0% ;
	border:none !important;
}
#premios .tabbable-line > .nav-tabs > li.active {
    border-bottom: 2px solid #02a3b6 !important;
}
#premios .tabbable-line > .nav-tabs > li{
	
	    list-style: none !important;
    width: 48% !important;
    margin-left: 1%;
}
.tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover{
	border-bottom:2px  solid #aaaaaa !important;
}
#premios .nav-tabs li.active{
	background-color:#02a3b6 !important;
	    padding: 10px;
			border:2px solid #02a3b6;
    text-align: center;
}
#premios .nav-tabs li.active strong, #premios .nav-tabs li.active a{
	color:white !important;
	    text-decoration: none !important;
}
#premios .nav-tabs li{
	background-color:#fff !important;
	    padding: 10px;
    text-align: center;
	border:2px solid #aaaaaa;
	color:#aaaaaa !important;
	    margin-bottom: 50px;
	
}
#premios .nav-tabs li strong, #premios .nav-tabs li a{
	color:#aaaaaa !important;
}
#premios .nav-tabs {
	    width: 55%  ;
    margin-left: 22.5%;
	margin-top:50px !important;
}
#premios .tabbable-line > .tab-content{
	border:0px !important;
}
.noleft{
	float:none !important;
}