body, html {height: 100%; font-family: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;}
    a {color:inherit;}
    a:focus {outline: none !important;}
    a:hover {text-decoration: none;	color: #e65540;}
    ul, li {margin: 0px; list-style-type: none;}
    button {outline: none !important; border: none; background: transparent;}
    button:hover {cursor: pointer;}

    .hdr {height: 125px; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; font-size:1rem;}
    .hdrMenu {width: 100%; top: 0; left: 0; position: fixed; z-index: 1100; box-shadow: 0 1px 5px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 5px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 5px 0px rgba(0,0,0,0.2); -o-box-shadow: 0 1px 5px 0px rgba(0,0,0,0.2); -ms-box-shadow: 0 1px 5px 0px rgba(0,0,0,0.2);}
    .hdrBar {height: 45px; background-color: #72aad0; position: relative; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center;}
    .hdrBarSocial {position: absolute; height: 100%; top: 0; left: 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; padding-left: 40px;}
    .hdrBarSocial a {font-size: 18px; color: #ffffff; padding: 10px;}
    .hdrBarSocial a:hover {color: #ffcc22;}  
    .hdrBarContact {position: absolute; height: 100%; top: 0; right: 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; flex-wrap: wrap; padding-right: 38px; font-size: 20px; color: #ffffff;}
    .hdrBarContact p {margin-left:10px; margin-bottom:0; color:#ffffff; font-size:1rem;}
    .hdrBarContact i {margin-left:20px;}
    .wrap_header {display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; width: 100%; height: 80px; background-color: white; justify-content: flex-end; align-items: center; position: relative; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; padding-right:30px;}
    .fixed-header .wrap_header {height: 65px;}
    .fixed-header .logo img {height:65px;}
    .logo {display: block; position: absolute; left: 20px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
    .logo img {max-height: 80px;}

    .main_menu {list-style-type: none; margin: 0px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; align-items: center;  justify-content: center;}
    .main_menu > li {display: block; position: relative; padding-top: 20px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px;}
    .main_menu > li > a {font-size: 15px; color: #333333; padding: 0;  border-bottom: 1px solid transparent;}
    li.onlineStore > a {color: #e65540; font-weight:bold;}
    .main_menu > li:hover > a {text-decoration: none; border-bottom: 1px solid #333333;}
    .main_menu li {position: relative;}
    .main_menu > li:hover > .sub_menu {visibility: visible; opacity: 1;}
    .sub_menu {list-style-type: none; position: absolute; z-index: 1100; top:0; left:100%; width: 225px; background-color: #222222; opacity: 0; visibility: hidden; padding-top: 10px;  padding-bottom: 10px; transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s;}
    .main_menu > li > .sub_menu {top:100%; left: 0; position: absolute;}
    .sub_menu li:hover > .sub_menu {visibility: visible; opacity: 1;} 
    .sub_menu li {transition: all 0.3s; -webkit-transition: all 0.3s;  -o-transition: all 0.3s; -moz-transition: all 0.3s;}
    .sub_menu li, .sub_menu a {padding: 0; font-size: 13px; color: white;}
    .sub_menu > li:hover > a {color: #e65540; text-decoration: none;}

    .hdrMobileTop {display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; display: none; height: 45px; background-color: #72aad0; position: relative; justify-content: space-between; align-items: center;}
    .hdrMobileSocial {position: absolute; height: 100%; top: 0; left: 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; padding-left: 5%;}
    .hdrMobileSocial a {font-size: 18px; color: #ffffff; padding: 10px;}
    .hdrMobileSocial a:hover {color: #ffcc22;}  
    .hdrMobileContact {position: absolute; height: 100%; top: 0; right: 0; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; flex-wrap: wrap; padding-right: 5%; font-size: 20px; color: #ffffff;}
    .hdrMobileContact p {margin-left:10px; margin-bottom:0; color:#ffffff; font-size:1rem;}
    .hdrMobileContact i {margin-left:20px;}
	@media (max-width:640px){
		.hdrMobileSocial a {padding:5px;}
	}

    .hdrMobile {display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap;  align-items: center; justify-content: space-between; min-height: 80px; background-color: white; display: none; width:90%; margin:auto;}
    .hdrMobileLogo {display: block;}
    .hdrMobileLogo img {max-height: 80px;}
    .hdrMobileShow {display: -webkit-box; display: -webkit-flex;  display: -moz-box; display: -ms-flexbox; display: flex; height: 100%; justify-content: center; align-items: center;}
    .hamburger {-webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); margin-top: 5px;}
    .hdrMobileMenu {width: 100%; background-color: white; display: none; border-top: 1px solid #ececec;}
    .hdrMobileNav {width: 100%;}
    .hdrMobileNav li {list-style-type: none;}
    .hdrMobileNav .hdrMobileUl {margin-bottom: 0; padding:0; background:#72aad0;}
    .hdrMobileBar {padding:8 20 8 0; border-bottom: 1px solid #ececec; color:#ffffff;}
    .hdrMobileContact {display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; flex-wrap: wrap; color:#ffffff; font-size:15px;}
    .hdrMobileContact a, .hdrMobileContact i, .hdrMobileContact p  {font-size:15px; color:#ffffff;}
    .hdrMobileContact a:hover {color:#ffcc22;}
    .hdrMobileItem {background-color: #72aad0;}
    .hdrMobileNav .hdrMobileUl > li > a {padding-left: 20px;  font-size: 15px;  color: white;  line-height: 2.86;}
    .hdrMobileNav .hdrMobileUl > li {color: white; position: relative;}
    .hdrMobileNav .hdrMobileUl .arrow-main-menu {font-size: 14px;  position: absolute; right: 20px; top: 5px; padding: 10px;  -webkit-transition: all 0.4s !important; -o-transition: all 0.4s !important; -moz-transition: all 0.4s !important; transition: all 0.4s !important;}
    .hdrMobileNav .hdrMobileUl .arrow-main-menu:hover {cursor: pointer;}
    .turn-arrow {-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg);-ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);}
    .hdrMobileNav .sub-menu a {padding-left: 20px; font-size: 13px;  color: #333333; line-height: 2.5;}
    .hdrMobileNav .sub-menu > li {padding-left: 12px; padding-top:}
    .hdrMobileNav .sub-menu a:hover {text-decoration: none;  padding-left: 20px; color: #e65540 !important;}
    .hdrMobileNav .sub-menu {background-color: white;  display: none;}
    @media (min-width: 992px){
        .hdrMobileMenu {display: none;}}
    @media (max-width: 992px){
        .hdrMobile, .hdrMobileTop {display: -webkit-box; display: -webkit-flex;    display: -moz-box; display: -ms-flexbox; display: flex !important;}
        .wrap_header {display: none;}
        .hdrMenu {display: none;}
        .top-bar {display: none;}
        header {height: auto !important;}}

    .prdCatHero {margin:30px auto; box-shadow: 0 5px 25px 0 rgba(214, 215, 216, 0.6);}
    .prdCatHero h1 {font-size: 50px; font-weight: 600;  margin-bottom: 20px; padding-bottom: 0; color: #3e8abe; font-weight:bold; text-transform: uppercase; font-family: 'IBM Plex Sans', sans-serif;}
    .prdCatHero p {margin-bottom: 10px; text-align: left; color: #666;}
    .prdCatHero img {padding: 15px 0; width:100%;}
    .btnCatHero {margin:10px 5px; background:#3e8abe; font-weight:bold; color:#ffffff;}
    .btnCatHero:hover {background:#ffcc22; color:#ffffff;}
    .btnCatHero a:hover {color:#ffffff;}
    .section_title{margin: 30px 0;}
    .product_sorting{display: inline-block; border-radius: 3px margin-top: 20px; overflow: visible;}
    .grid_sorting_button{height: 40px; min-width: 102px; padding-left: 25px; padding-right: 25px; cursor: pointer; border: solid 1px #3e8abe;	font-size: 14px; text-transform: uppercase;	background: #FFFFFF; border-radius: 3px; margin: 0; float: left;	margin-left: -1px;}
    .grid_sorting_button:first-child {margin-left: 0px;}
    .grid_sorting_button:last-child {}
    .grid_sorting_button.active:hover {background: #ffcc22 !important; border-color:#ffcc22;}
    .grid_sorting_button.active {color: #FFFFFF;	background: #3e8abe;}
    
    .grid {width: 100%; max-width: 1200px; margin: 30px auto;}
    .grid:after {content: ''; display: block; clear: both;}
    .grid-item {float: left; width: 20%; margin:5px 0 10px 0; font-size:16pt;}
    .grid-item:hover {cursor: pointer;}
    .grid-item:hover::after {box-shadow: 0 25px 29px rgba(63, 78, 100, 0.15); border: solid 2px rgba(235,235,235,1);}
    .grid-item img {width: 100%; height: auto;}
        
    .product {width: 100%; height: auto; border-right: solid 1px #e9e9e9;}
    .product_image{width: 100%; text-align:center;}
    .product_image img{width: 95%; padding: 10px 0;}
    .product_info {text-align: center; padding: 10px; height:100px;}
    .product_name {font-family:'IBM Plex Sans', sans-serif; font-size:1rem; font-weight:bold; line-height:1.1rem;}
    .product_name a {color: #1e1e27; line-height: 1.1rem;}
    .product_name:hover a {color: #b5aec4;}
    .prdCode {font-size:0.7rem;}

    .prdListBtns {padding:0 10px; margin-bottom:10px; font-size: 1rem; text-align: center;}
    .prdListBtns i {margin-right:3px;}
    .prdListBuy, .prdListInfo {float: right; flex-direction: column; justify-content: center; align-items: center; width: 47.5%; height: auto; background: #3e8abe; border-radius: 3px; padding:5px; color: #FFFFFF; line-height: 0; text-transform: uppercase;}
    .prdListInfo{float: left;}
    .prdListBuy:hover, .prdListInfo:hover {background: #ffcc22 !important;}
    .prdListBuy a, .prdListInfo a, button.prdListinfo {display: block; width: 100%; color: #FFFFFF; line-height: 0; font-size:1rem;}
    .infoMore{width:100% !important;}
    .item-content {display: none; width:80%; padding:0 10px;}
    .item-content h1 {margin-bottom:5px; font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; text-transform: uppercase;}
    .item-content p {margin:0 0 15px 0; font-size:0.9rem;}
    .item-content table {font-size: 0.9rem;}

    .grid-item.gigante {width: 100%; background-color: white; margin: 0; padding-bottom: 20px; display:flex;}
    .grid-item.gigante .item-content {display: flex; flex-flow: wrap; justify-content: space-between; width:80%;}
    .grid-item.gigante .item-cover {width:20%;}
    .grid-item.gigante .btnOpen {display:none;}
    .btnClose {display:none;}
    .grid-item.gigante .btnClose {display:inline;}
    .gigante.grid-item::after {border:none;}

        @media only screen and (max-width: 991px){
            .grid-item, .grid-item.gigante .item-cover {width: 25%; font-size:14pt;}}
        @media only screen and (max-width: 767px){
            .grid-item, .grid-item.gigante .item-cover{width: 33.333333333333%;}
            .grid_sorting_button{font-size: 13px;padding-left: 20px;	padding-right: 20px;min-width: 80px;}
            .grid-item .item-content {width:66%}}
        @media only screen and (max-width: 575px){
            .grid-item, .grid-item.gigante .item-cover{width: 50%;}
            .grid-item .item-content {width:50%}}
        @media only screen and (max-width: 479px){
            .grid_sorting_button{font-size: 12px;padding-left: 10px;	padding-right: 10px;min-width: 60px;height: 35px;}}

    .ftrHero {padding:0 5%;}
    .ftrHero a {font-size:0.7rem; line-height:0.7rem;}
    .ftrText {font-size:0.7rem; line-height:1rem;}
    .ftrTop {height:auto; background:#72aad0; color:#ffffff; padding:30px 0; box-shadow: 0 0 5px 1px rgba(0,0,0,0.2); -moz-box-shadow: 0 0 5px 1px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 5px 1px rgba(0,0,0,0.2); -o-box-shadow: 0 0 5px 1px rgba(0,0,0,0.2); -ms-box-shadow: 0 0 5px 1px rgba(0,0,0,0.2); color:#ffffff;}
    .ftrTop .ftrLink {font-size:0.8rem; line-height:0.8rem;}
    .ftrTop .ftrLink a {display:block;}
    .ftrLink a:hover {color:#ffcc22;}
    .ftrTop h1 {margin:15px 0 5px 0; font-size:1rem; font-weight:bold;}
    .ftrTop img {width:100%;}
    .ftrTop p {margin:10px 0; text-align: center; color:#ffffff;}
    .ftrSocial {height:auto; margin:20px 0 15px 0;}
    .ftrSocial a {margin: 0 5px; font-size:1.2rem; color:#ffffff;}
    .ftrSocial a:hover {color: #ffcc22;}
    .ftrBottom {width:100%; background:#ffcc22; font-size:0.7rem; color:#000000;}
    .ftrPay {width:100%; font-size:2rem; background:#ffcc22; color:#000000;}
    .ftrPay i {margin:0 10px; font-size:2rem;}
    .ftrBottom p {width:auto; margin:0 auto; border-top:1px solid black; color:#000000; padding:10px 0 10px 0;}

    .btnTop {display: none; position: fixed; width: 40px;  height: 40px; bottom: 40px; right: 40px; background-color: black; opacity: 0.5; justify-content: center; align-items: center; z-index: 1000; border-radius: 4px; transition: all 0.4s; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s;}
    .btnTopIcon {font-size: 40px; color: white;  line-height: 1em;}
    .btnTop:hover {opacity: 1; cursor: pointer; background:#ffcc22;}
    .btnTopIcon:hover {color:#72aad0;}
    @media (max-width: 576px) {
        .btnTop {bottom: 15px; right: 15px;}}