/*
Theme Name: Tinacos de México
*/

* {margin: 0; padding: 0}
.block {margin-bottom: 50px}
.clear {clear: both;}
p {font-size: 18px}
h4 {font-weight: bold; font-size: 20px; text-transform: uppercase; color: #8db724}
.block {margin-bottom: 90px}

body {background: #edf3f7; font-family: lato}

.desktop {display: block; visibility: visible;}
.mobile {display: none; visibility: hidden;}

/*header*/
#header h1 {float: left;}
#header h1 img {max-width: 250px; width: 100%; height: 196px;}
#menu-block {float: right; margin-top: 45px}
.menu-main-menu-container {float: left;}
#top-ws {float: right; margin-left: 10px}
#top-ws img {width: 35px; height: 35px}
#logo a {width: 100%; height: 100%; display: block;}
#header #menu-block li {margin-right: 25px; padding-top: 8px}
#header #menu-block li a {
	padding: 0;
	font-size: 16px;
	color: #535252;
	text-transform: uppercase;
	all 0.2s ease;
}
#header #menu-block li:hover a {
	color: #8db724;
	border-bottom: solid 3px #8db724;
	padding-bottom: 5px;
	transition: all 0.2s ease;
}
#header #menu-block li.current_page_item a {
	color: #8db724;
	border-bottom: solid 3px #8db724;
	padding-bottom: 5px;
}

#responsive-menu {background: rgba(255, 255, 255, 0.95); position: fixed; width: 100%; height: 100vh; top: 0; left: 0; z-index: 9999}
#r-menu {
  float: right;
  padding-top: 30px;
}
#float-menu {width: 500px; max-width: 80%; margin: 50px auto; text-align: center; position: relative;}
#close-menu {position: absolute; top: 0; right: 0}
#float-menu li {display: block; float: none; font-size: 18px}
#float-menu ul {float: none !important;}
#float-menu ul li a {
	background: 0 none;
	color: #454545;
	text-transform: uppercase;
	transition: all 0.3s ease;
}
#float-menu ul li.current_page_item a, #float-menu ul li:hover a {color: #8db724;}
#float-menu .menu-main-menu-container {float: none;}
}
#float-menu ul li a:hover {
	background: 0 none;
	color: #db1f25;
  transition: all 0.3s ease;
}
#r-menu input[type="button"] {
	border: 0 none;
	background-color: transparent;
	background-image: url(images/bars.svg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 22px;
	height: 22px;
	font-size: 0px;
}
#header .container {position: relative;}
#r-menu input[type="button"]:hover {background-color: transparent}
#float-menu input[type="button"] {
	border: 0 none;
	background-color: transparent;
	background-image: url(images/close.svg);
	background-repeat: no-repeat;
	background-size: cover;
	width: 22px;
	height: 22px;
	font-size: 0px;
}
#float-menu input[type="button"]:hover {background-color: transparent}

/*home page*/
#home-top h2#slogan {
  font-size: 31px;
  color: #555;
  text-transform: inherit;
  font-weight: bold;
  margin-top: 20px;
  max-width: 240px;
  text-align: center;
}
#home-top h2#slogan span {color: #8db724;font-size: 30px}
#home-top h2 {font-size: 42px; color: #005790; text-transform: uppercase; font-weight: bold; margin-top: 70px}
p.big-btn {text-align: center;}
p.big-btn a {
	background: rgb(0,87,144);
	background: linear-gradient(0deg, rgba(0,87,144,1) 0%, rgba(0,212,255,1) 100%);
	display: inline-block;
	padding: 0 30px;
	height: 52px;
	line-height: 52px;
	font-size: 20px;
	color: #fff;
	text-align: center;
	font-weight: bold;
	border-radius: 50px;
	transition: all 0.3s ease;
	text-decoration: none;
}
#home-top .big-btn {margin-top: 30px}

/* Dropdown Button */
.dropbtn {
  background-color: #dbe3e9;
  color: #8a8a8a;
  padding: 16px;
  font-size: 16px;
  border: none;
  width: 100%;
  border-bottom: solid 1px #edf3f7;
}
.first-drop-down {margin-top: 350px}
.dropdown {
  position: relative;
  display: inline-block;
  width: 100%;
  transition: all 0.3s ease;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 100%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: #8a8a8a;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: all 0.3s ease;
}
.dropdown-content a:hover {background-color: #ddd; color: #666; transition: all 0.3s ease;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #00b9e8; color: #fff; transition: all 0.3s ease;}

.page-template-home-page h3 {
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 36px;
	color: #005790;
}
#home-categories h4 {text-align: center; margin-top: 25px}
#home-categories h4 a {color: #8db724}
#home-productos {text-align: justify;}
#home-productos .box {text-align: center;}
#home-productos h5 {margin-bottom: 0; color: #005790; font-weight: bold; font-size: 20px; margin-top: 25px; text-align: center;}
#home-productos p {text-align: center;}
.home-prod-thumbs {height: 400px; display: flex;}
.home-prod-thumbs a {display: flex; width: 100%}
.home-prod-thumbs img {max-width: 200px; display: inline-block; align-self: flex-end; margin: 0 auto;}
#home-categories h3, #home-como h3 {margin-bottom: 30px}

#home-como h4 {margin-top: 60px}

/*product*/
.page-template-product-page-cisternas #header, .page-template-product-page-tinacos #header {margin-bottom: 50px}
.breadcrumb-product {display: none; visibility: hidden;}
#product-details h1 {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 36px;
	color: #005790;
}
#product-details h2, #extras h2, #realated-products h2, #landing-desc h3, #contact-desc h2 {
	font-weight: bold;
	font-size: 28px;
	text-transform: uppercase;
	color: #8db724
}
#product-details ul, #extras ul, #realated-products ul, #product-details ol, #extras ol, #realated-products ol {margin-left: 15px}
#product-details li, #extras li, #realated-products li {font-size: 18px; margin-bottom: 10px}
#realated-products h2 {text-align: center;}
td {border-bottom:solid 1px #ccc; padding:4px; text-align:center}
table td.odd {background:#f1f1f1}
table th {background:#89b01a; color:#fff; padding:4px; font-weight:normal; text-align:center}
table {width:100%; margin: 20px 0}
#prodSlide div {text-align: center;}
.bx-wrapper #prodSlide img {display: inline-block;}
#tinaco-selector .bx-wrapper {box-shadow: 0 0 0 #fff; border: 0 none; background: 0 none}
#tinaco-selector * {text-align: center; box-shadow: 0 0 0 #fff !important}
#tinaco-selector img {display: inline-block}
#tinaco-selector .bx-controls {display:block !important; visibility:visible !important}
#tinaco-selector .bx-prev, #tinaco-selector .bx-next {display: none !important; visibility: hidden !important}
#tinaco-selector .bx-wrapper .bx-pager {background: #ededed !important; display: inline-block; margin: 30px auto 0; padding: 15px 20px; border-radius: 100px; width: auto; bottom: inherit; left: inherit; position: inherit; height: 70px;}
#tinaco-selector .bx-wrapper .bx-pager.bx-default-pager a {width: 38px; height: 38px; border-radius: 50px; border: solid 2px #fff}
#tinaco-selector .bx-wrapper .bx-pager.bx-default-pager .bx-pager-item:nth-child(1) a {background: #000 !important}
#tinaco-selector .bx-wrapper .bx-pager.bx-default-pager .bx-pager-item:nth-child(2) a {background: #c9b695 !important}
#tinaco-selector .bx-wrapper .bx-pager.bx-default-pager .bx-pager-item:nth-child(3) a {background: #0079b7 !important}
#tinaco-selector .bx-wrapper .bx-pager.bx-default-pager .bx-pager-item:nth-child(4) a {background: #fff !important}  #accesorios-product img {max-width: 100%; height: auto}

/*PAGES*/
.page-template-default #primary {margin-top: 50px}
.page-template-default h1.entry-title {
  font-size: 42px;
  color: #005790;
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 0;
}
.page-template-default #home-productos h2 {
  color: #005790;
  text-transform: uppercase;
  font-weight: bold;
}
.landing-desc {margin-bottom: 60px}
#extras {margin-top: 28px}
#info-product {margin-top: 90px}
#extras li {font-size: 18px}
#info-product, #extras {margin-bottom: 60px}
#primary #home-productos p {text-align: left;}
#primary #home-productos .box p {text-align: center;}
#primary #home-productos h2, #primary #home-productos h3 {text-align: left;}
/*CONTACT*/
#contact-desc {margin-top: 50px}
.office-box {width: 80%; box-shadow: 1px 1px 5px #ccc; margin: 50px auto}
.office-info {padding: 100px 40px 50px; text-align: center; z-index: 10; position: relative;}
.office-info h2 {color: #80bc00; font-size: 24px; font-weight: 400; margin-bottom: 0}
.office-info h3 {color: #004876; font-size: 20px; font-weight: 600; margin-bottom: 0; margin-bottom: 20px}
.office-info p {line-height: 20px}
.office-info p:last-child {margin-bottom: 0}
.office-box {position: relative;}
.office-box .deco {border: solid 2px #70a42e; width: 92%; height: 92%; position: absolute; top: 4%; left: 4%; z-index: 1}
.office-info .address::before, .office-info .phone::before, .office-info .cel::before, .office-info .email::before {position: initial;; top: initial; left: initial; margin-right: 5px}
.office-image {height: 200px; width: 100%; position: relative; background: url(images/office-img.jpg) no-repeat center center;}
.office-image iframe {position: absolute; width: 70%; height: 120px; bottom: -80px; left: 15%}
.office-image.cdmx {background: url(img/cdmx.jpg) no-repeat center; background-size: cover}
.page-template-contact-page #home-desc {padding-bottom: 0; background: 0 none}
.page.page-template-contact-page #home-form {background: 0 none}
#contact-desc.contact-page {margin-bottom: 50px}
#extras img {max-width: 100%}

/*footer*/
#foot-contact {background: url(images/foot-contact-bg.jpg) no-repeat center center; background-size: cover; padding: 30px; color: #fff}
#foot-contact img {margin-left: -85px; margin-bottom: -100px}
#legales {
	background: #4c4b4b;
	padding: 30px 0;
	color: #fff;
}
.foot-call {text-align: right;}
.foot-call a {color: #fff; margin: 0 10px; display: inline-block;}

#foot-contact input {width: 400px; height: 48px; line-height: 48px; padding: 0 15px; border-radius: 5px; border: 0 none; background: #fff; color: #666}
#foot-contact input[type="submit"] {width: 300px; height: 48px; line-height: 48px; padding: 0 15px; border-radius: 5px; border: 0 none; background: #00b9e8; color: #fff; text-align: center;}
#foot-contact textarea {width: 400px; height: 48px; line-height: 48px; padding: 0 15px; border-radius: 5px; border: 0 none; background: #fff; color: #666}

@media (max-width: 1200px) {
}
@media (max-width: 991px) {
	#home-top img {width: 350px; height: auto; display: block; margin: 30px auto 0;}
	.first-drop-down {margin-top: 50px;}
	#home-categories .col-xs-6.col-sm-4 {float: none; width: 100%; text-align: center; margin-bottom: 50px}
	#home-categories .col-xs-6.col-sm-4:last-child {margin-bottom: 0}
	#home-categories .col-xs-6.col-sm-4 img {max-width: 80%}
	#home-como img {width: 350px; max-width: 80%}
	#home-productos .col-xs-6.col-sm-3.thumb-home-list, #primary .col-xs-6.col-sm-3 {width: 50%}
	#foot-contact .col-xs-6 {float: none; width: 100%}
	#foot-contact img {margin: 0 auto; display: block; max-width: 100%}
	#foot-contact textarea, #foot-contact input {max-width: 100%}
	#main .col-xs-6 {float: none; width: 100%}
	.contact-page .col-xs-6 {float: none; width: 100%}
	.dropdown {display: none; visibility: hidden;}
}
@media (max-width: 800px) {
	.mobile {display: block; visibility: visible;}
	.desktop {display: none; visibility: hidden;}
	#legales .col-xs-6 {width: 100%; float: none; text-align: left;}
	#legales .col-xs-6:first-child {margin-bottom: 30px}
}
@media (max-width: 600px) {
	#header h1 img {
	  max-width: 180px;
	  width: 100%;
	  height: 155px;
	}
	#home-productos .col-xs-6.col-sm-3.thumb-home-list, #primary .col-xs-6.col-sm-3 {width: 100%; float: none;}
}