/*
Theme Name: TheGem Child
Description: Multi-Purpose Wordpress Theme
Author: Codex Themes.
Theme URI: http://codex-themes.com/thegem/
Author URI: http://codex-themes.com/thegem/
Template: thegem
Version: 1.0
Tags: one-column, two-columns, left-sidebar, right-sidebar, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, featured-images, flexible-header, full-width-template, theme-options, translation-ready, dark, light
License: GNU General Public License
License URI: license.txt
*/

@media only screen and (min-width: 961px) {
	body { font-size:16px !important; }
}

@media only screen and (max-width: 960px) {
	body { font-size:15px !important; }
}

@media only screen and (max-width: 768px) {
	body { font-size:14px !important; }
}


@media only screen and (max-width: 500px) {
	body { font-size:13px !important; }
}

/*.gem-button { display:none; }*/

.fluidImgVert {width:auto; height:100%; border:0; padding:0; display:block; }

.flexslider .slides img { height:auto !important; }

.txt-shadow { text-shadow: 2px 2px 2px rgba(42,18,11,0.6); }

.visible-desktop { display: block; }
.visible-tablet-mobile { display: none; }

@media (max-width: 768px) {
   .visible-desktop { display: none; }
	.visible-tablet-mobile { display: block; }
}

@media (max-width: 1199px) {
	.wpb_row > * { margin-top: 0 !important;	}
}

.wpb_single_image .vc_single_image-wrapper  { width:100%; }
.wpb_single_image .vc_figure { width:100%; }
.wpb_single_image img { width:100%; }

/* noticias grid item */
/*.vc-gitem-zone-height-mode-auto::before { padding-top:300px !important; }*/
.vc_btn3-container { margin-bottom: 0 !important; }

.iada-product-category .img-responsive {margin:0 auto !important;}

/*
#primary-menu.no-responsive li ul {width: 280px !important;}
#primary-menu.no-responsive > li.megamenu-enable.megamenu-style-default > ul > li span.megamenu-column-header a{
	padding: 15px 30px !important;
}
*/
#primary-menu.no-responsive > li.megamenu-enable.megamenu-style-default > ul > li span.megamenu-column-header a{
	padding: 15px 30px !important;
}
#primary-menu.no-responsive > li.megamenu-enable.megamenu-style-default > ul > li span.megamenu-column-header{
	margin: 0 !important;
	padding: 0 !important;
}
#primary-menu.no-responsive > li.megamenu-enable.megamenu-style-default > ul > li.megamenu-first-element{width: 100%}
#primary-menu li ul {padding-left: 0 !important;}
#primary-menu li ul li a:hover{border-color: #e00023;}
.header-style-3 #primary-menu.no-responsive > li.menu-item-active > a { border: 2px solid rgba(235,235,235,0) !important; }
.header-style-3 #primary-menu.no-responsive > li.menu-item-current > a { border: 2px solid rgba(235,235,235,0) !important; }

.iada-breadcrumbs{margin-bottom: 3rem;}
.iada-breadcrumbs a{color: #000 !important;}
.iada-breadcrumbs .divider .bc-devider:before {color: #e00023;}
.item-name-breadcrumb{color: #e00023;}

.single-product-content .product_title{line-height: 24px;}



/* ------------- Página Historia - Timeline ------------- */

/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: #eeeeee;
  top: 15px;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.tlContainer {
  padding: 10px 30px 20px 0;
  position: relative;
  background-color: inherit;
  width: 50%;
}

.tlContainer.tlBoxRight { padding: 10px 0 20px 30px; }

/* The circles on the timeline */
.tlContainer::after {
  content: '';
  position: absolute;
  width: 36px;
  height: 36px;
  right: -18px;
  background-color: #e10023;
  border: 8px solid #FFF;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.tlBoxLeft {
  left: 0;
}

/* Place the container to the right */
.tlBoxRight {
  left: 50%;
}

.tlYear { position:absolute; z-index:100; top:22px; color: #e10023; font-size:1.5em; line-height:1; font-weight:bold; padding:0; width:auto; background:rgba(255,255,255,0); }
.tlBoxLeft .tlYear { text-align:left;  left:auto; right:-85px; }
.tlBoxRight .tlYear { text-align:right; left:-85px; right:auto; }

.tlImg { width:auto; height:190px; }
.tlBoxLeft .tlImg { order:2; margin-left:1em; margin-right:0;  }
.tlBoxRight .tlImg { order:1; margin-left:0; margin-right:1em; }

.tlTxt { width:auto; font-size:0.85em; line-height:1.2; text-align:justify; }
.tlBoxLeft .tlTxt { order:1; }
.tlBoxRight .tlTxt { order:2; }



/* Add arrows to the left container (pointing right) */
.tlBoxLeft::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 20px;
  border: medium solid #eeeeee;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #eeeeee;
}

/* Add arrows to the right container (pointing left) */
.tlBoxRight::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 20px;
  border: medium solid #eeeeee;
  border-width: 10px 10px 10px 0;
  border-color: transparent #eeeeee transparent transparent;
}

/* Fix the circle for containers on the right side */
.tlBoxRight::after {
  left: -18px;
}

/* The actual content */
.tlContent {
  padding: 1em;
  background-color: #eeeeee;
  position: relative;
  border-radius: 6px;
  display:flex;
  align-items: center;
}


/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 960px) {
	.tlImg { height:170px; }
}

@media screen and (max-width: 820px) {

/* Place the timelime to the left */
  .timeline::after {
    left: 68px;
  }

/* Full-width containers */
  .tlContainer {
    width: 100%;
  }

/* Make sure that all arrows are pointing leftwards */
  .tlContainer::before {
    left: 90px;
    border: medium solid #eeeeee;
    border-width: 10px 10px 10px 0;
    border-color: transparent #eeeeee transparent transparent;
  }
  
  .tlYear { top:22px; font-size:1.3em; }
  .tlBoxLeft .tlYear { text-align:right; left:0; right:auto; }
  .tlBoxRight .tlYear { text-align:right; left:0; right:auto; }
  
  .tlContainer.tlBoxLeft { padding: 10px 0 20px 100px; }
  .tlContainer.tlBoxRight { padding: 10px 0 20px 100px; }
  
  .tlImg { height:160px; }
  .tlBoxLeft .tlImg { order:1; margin-left:0; margin-right:1em; }
  .tlBoxRight .tlImg { order:1; margin-left:0; margin-right:1em; }

  .tlBoxLeft .tlTxt { order:2; }
  .tlBoxRight .tlTxt { order:2; }

  /* Make sure all circles are at the same spot */
  .tlBoxLeft::after, .tlBoxRight::after {
    left: 50px;
  }

  /* Make all right containers behave like the left ones */
  .tlBoxRight {
    left: 0%;
  }
}

@media screen and (max-width: 660px) {
	.tlImg { height:140px; }
}



@media screen and (max-width: 480px) {
	.timeline::after { left: 16px;}
	
	/* The circles on the timeline */
	.tlContainer::after { display:none; }
	
	.tlContainer.tlBoxLeft { padding: 10px 0 20px 45px; }
    .tlContainer.tlBoxRight { padding: 10px 0 20px 45px; }
	
	.tlBoxLeft::before { display:none; }
	.tlBoxRight::before { display:none; }
	
	.tlImg { height:110px; }
    .tlBoxLeft .tlImg { margin-left:0; margin-right:0.6em; }
    .tlBoxRight .tlImg { margin-left:0; margin-right:0.6em; }
	.tlYear { top:12px; font-size:1.05em; padding:3px 0; width:46px; background:rgba(255,255,255,1); border:1px solid #e10023; }
	.tlBoxLeft .tlYear { text-align:center; left:-7px; }
	.tlBoxRight .tlYear { text-align:center; left:-7px; }
	
	.tlContent { padding: 0.6em; }
}