/*
------------------------------------------------------------------------------------
COM.EZZATO.DEV
By : Andre Lorenzoni at andre@ezzato.com
------------------------------------------------------------------------------------
*/	

/*
vars
*/

:root {
   --text-color:#333;
   --text-color-invert:#fff;
   --page-background-color:#fff;
   --border-color:#D9D9D9;
   --menu-over-color:#F5F6F6;
   --detail-color:#CC0000;
   --link-color:#0071B8;
   --content-width:1330px;
   --content-width-negative:-1330px;
   --background-color:#D9DBDC;
   --light-background-color:#F5F6F6;
   --dark-background-color:#6B6B6B;
   --dark-border-color:#323232;
   --header-background-color:#fff;
   --input-background-color:#fff;
   --input-text-color:#333;
   --button-background-color:#009BD4;
   --button-text-color:#fff;
   --button-hover-background-color:#323232;
   --button-hover-text-color:#fff;
   --dot-background-color:#fff;
   --dot-border-color:#D9D9D9;
   --dot-active-background-color:#CC0000;
   --dot-active-border-color:#CC0000;
   --loader-background-color:#fff;
   --loader-content-color:#CC0000;
   --loader-size:62px;
}

/*
fonts
*/

@font-face {
   font-family: 'Material Icons';
   src: url('../../fonts/MaterialIcons-Regular.eot');
   src: url('../../fonts/MaterialIcons-Regular.eot?#iefix') format('embedded-opentype'),
       url('../../fonts/MaterialIcons-Regular.woff') format('woff'),
       url('../../fonts/MaterialIcons-Regular.ttf') format('truetype'),
       url('../../fonts/MaterialIcons-Regular.svg') format('svg');
   font-weight: normal;
   font-style: normal;
}

@font-face {
	font-family: 'Socicon';
	src:  url('../../fonts/Socicon.eot?87visu');
	src:  url('../../fonts/Socicon.eot?87visu#iefix') format('embedded-opentype'),
	  url('../../fonts/Socicon.woff2?87visu') format('woff2'),
	  url('../../fonts/Socicon.ttf?87visu') format('truetype'),
	  url('../../fonts/Socicon.woff?87visu') format('woff'),
	  url('../../fonts/Socicon.svg?87visu#Socicon') format('svg');
	font-weight: normal;
	font-style: normal;
  }
  
  [class^="socicon-"], [class*=" socicon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'Socicon' !important;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
  
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@font-face {
   font-family: 'Gotham-Thin';
   src: url('../../fonts/Gotham-Thin.eot');
   src: url('../../fonts/Gotham-Thin.eot?#iefix') format('embedded-opentype'),
       url('../../fonts/Gotham-Thin.woff') format('woff'),
       url('../../fonts/Gotham-Thin.ttf') format('truetype'),
       url('../../fonts/Gotham-Thin.svg#Gotham-Thin') format('svg');
   font-weight: 100;
   font-style: normal;
}

@font-face {
   font-family: 'Gotham-Bold';
   src: url('../../fonts/Gotham-Bold.eot');
   src: url('../../fonts/Gotham-Bold.eot?#iefix') format('embedded-opentype'),
       url('../../fonts/Gotham-Bold.woff') format('woff'),
       url('../../fonts/Gotham-Bold.ttf') format('truetype'),
       url('../../fonts/Gotham-Bold.svg#Gotham-Bold') format('svg');
   font-weight: bold;
   font-style: normal;
}

@font-face {
   font-family: 'Gotham-Book';
   src: url('../../fonts/Gotham-Book.eot');
   src: url('../../fonts/Gotham-Book.eot?#iefix') format('embedded-opentype'),
       url('../../fonts/Gotham-Book.woff') format('woff'),
       url('../../fonts/Gotham-Book.ttf') format('truetype'),
       url('../../fonts/Gotham-Book.svg#Gotham-Book') format('svg');
   font-weight: 500;
   font-style: normal;
}

@font-face {
   font-family: 'Gotham-Light';
   src: url('../../fonts/Gotham-Light.eot');
   src: url('../../fonts/Gotham-Light.eot?#iefix') format('embedded-opentype'),
       url('../../fonts/Gotham-Light.woff') format('woff'),
       url('../../fonts/Gotham-Light.ttf') format('truetype'),
       url('../../fonts/Gotham-Light.svg#Gotham-Light') format('svg');
   font-weight: 300;
   font-style: normal;
}

@font-face {
   font-family: 'Gotham-Black';
   src: url('../../fonts/Gotham-Black.eot');
   src: url('../../fonts/Gotham-Black.eot?#iefix') format('embedded-opentype'),
       url('../../fonts/Gotham-Black.woff') format('woff'),
       url('../../fonts/Gotham-Black.ttf') format('truetype'),
       url('../../fonts/Gotham-Black.svg#Gotham-Black') format('svg');
   font-weight: 500;
   font-style: normal;
}

@font-face {
   font-family: 'Gotham-Medium';
   src: url('../../fonts/Gotham-Medium.eot');
   src: url('../../fonts/Gotham-Medium.eot?#iefix') format('embedded-opentype'),
       url('../../fonts/Gotham-Medium.woff') format('woff'),
       url('../../fonts/Gotham-Medium.ttf') format('truetype'),
       url('../../fonts/Gotham-Medium.svg#Gotham-Medium') format('svg');
   font-weight: 500;
   font-style: normal;
}

/*
normatizer
*/

* {
	margin:0px;
	padding:0px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	/*font-family: 'Open Sans', sans-serif;*/
	/*font-family: 'Montserrat', sans-serif;*/
   font-family: 'Gotham-Book';
	/*font-size: 0px;*/
   font: normal 12px/1.5 'Gotham-Book';
}


.page * {
   font-size: 0px;
}


*:focus {
    outline: none;
}

@-ms-viewport {
	width: device-width;
}

html {
	position: relative;
	height: 100%;
	/*
	-webkit-user-select: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-o-user-select: none;
	*/
}

a {
	cursor: pointer;
}

body {
	margin-left: 0px; 
	margin-top: 0px;	
	margin-right: 0px;	
	margin-bottom: 0px;
	-webkit-overflow-scrolling: touch;
	/*background-color:#000000;*/
}

.body-noscroll {
  /* position:fixed!important;*/
   overflow:hidden!important;
}

table {
	border:0px;
	border-spacing:0px;
	border-collapse:collapse;	
}

img {
	display: inline-block;
	-ms-interpolation-mode: bicubic;
	border:0;
	vertical-align:middle;
}

a {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	text-decoration:none!important;
	color:inherit;
	font-size:inherit;
	font-family:inherit;
	outline:0;
}

strong,
b {
	font-weight: bold!important;
	font-size: inherit!important;
	color: inherit!important;
	font-family: inherit!important;
}

.disable-hover {
	pointer-events: none;
}

.noselect {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
    -o-user-select: none;
}

.selection {
	color:currentColor;
	background:transparent;
}

.nobreak {
	display:inline-table;
	white-space:nowrap;
}

.curved {
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

.transparent {
	filter: alpha(opacity=0); 	
	-khtml-opacity: 0;      	
	-moz-opacity: 0;       		
	opacity: 0;      
}

.transform {
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
}

.transition {
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
}

.delay {
	-webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
    animation-delay: 2s;
}

.no-transition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

.invisible {
	display: none!important;
}

.hidden {	
	z-index: -1!important;	
	position: fixed!important;
	top: -200vh!important;
	left: -200vh!important;
}

.calc {
	width: -moz-calc(100% - 10px);
    width: -webkit-calc(100% - 10px);
    width: calc(100% - 10px);
}

.bold {
	font-family: 'Open Sans', sans-serif;
	font-weight:700;
	color:inherit;
	font-size:inherit;
}

.normal {
	font-family: 'Open Sans', sans-serif;
	font-weight:400;
	color:inherit;
	font-size:inherit;
}

.light {
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	color:inherit;
	font-size:inherit;
}

.hide-me {
	display:none!important;
}

.disable-me {
	opacity: .2;
	pointer-events: none;
}

/*
.default {
	position:relative;
	display: inline-block;
	text-align: right;
	right: 0px;
	position: relative;
}
*/

.spacer {
	position:relative;
	display:block;
	height:20px;
}

.uppercase {
	text-transform: uppercase;
}

.lowercase {
	text-transform: lowercase;
}

.b {
	color:#282828!important;
}

.w {
	color:#ffffff!important;
}

.spacer {
	position:relative;
	display:table;
	width:100%;
	height:10px;
}

.table {
	position:relative;
	display:table;
	margin:0 auto;
}

.table.full {
	width: 100%;
}

.col {
	position:relative;
	display:table-cell;
	/*padding:10px;*/
}

/*
.col-inline {
	position: relative;
	display: inline-block;;
	vertical-align: middle;
};
*/


div,
a,
ul,
li,
input,
select,
table,
tr,
td,
body,
section,
textarea {
	box-sizing: border-box;
	/*
	ms-box-sizing: border-box;	
	webkit-box-sizing: border-box;	
	moz-box-sizing: border-box;
	*/
}

.max-width {
    position:relative;
    max-width:980px;
    margin:0 auto;
}

a img {
	outline: none !important;
	border:0;
	border:none;
}

button:active {
	outline: none;
	border: none;
}

.no-space {
	padding:0px!important;
	margin:0px!important;
}

.page.error  {
	position: relative;
	display: table;
	width: 100vw;
	height: 100vh;
	text-align: center;
}
.page.error > h1 {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	font-size: 50px;
	line-height: 50px;
	text-align:center;
	/*border: solid 1px #777777;*/
	color: #777777;;
	padding: 10px;
}

.page.error > h1:after {
	position: relative;
	display: block;
	font-size: inherit;
	color:inherit;
	font-family: "Material Icons";
	content:'';
}

.page.error > h1 > span {
	position: relative;
	display: block;
	text-align: center;
	color:inherit;
	font-size: 18px;
	padding: 0px;
	margin: 0px;
}

.hide-before-load {
	display: none!important;
}

/*
page
*/

.page {
   overflow: hidden;
}

.wrapper {
   position: relative;
   display: block;
   margin: 0 auto;
}

/*
buttons
*/

button.button, a.button, .col a.button {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  font-weight: bold;
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  font-size: 12px;
  padding: 5px 20px;
  border-radius: 30px;
  -o-transition: .4s;
  -ms-transition: .4s;
  -moz-transition: .4s;
  -webkit-transition: .4s;
  transition: .4s;
  cursor: pointer;
  margin: 5px 5px 0px 0px;
}

button.button:hover,
a.button:hover {
   background-color: var(--button-hover-background-color);
   color: var(--button-hover-text-color); 
}

button.button:not(.clean):after,
a.button:not(.clean):after {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   font-size: 20px;
   color: var(--text-color-invert);
   font-family: "Material Icons";
   content: '';
   transform: rotate(180deg);
   padding-right: 5px;

   margin: -5px 0px;
   line-height: 0px;
   top: -1px;
   font-weight: normal;
}

button.button:not(.clean).invert:after,
a.button:not(.clean).invert:after {
   content: '';
   transform:none;
   padding-right: 0px;
   padding-left: 5px;
}

button.button {
   border: none;
}

a.button.buy {
   border: solid 2px var(--button-background-color);
}

a.button.buy:hover {
   border-color:var(--dark-border-color);
}


a.button.buy:before {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   font-size: 20px;
   color: var(--text-color-invert);
   font-family: "Material Icons";
   content: '';
   padding-right: 5px;
   margin: -10px 0px -10px -8px;
}

a.button.clean:before,
a.button.clean:after,
a.button.buy:after {
   display: none;
}

a.button.compare:after,
a.button.lead:after,
a.button.evaluate:after {
   display: none;
}

a.button.compare {
   background-color:  var(--text-color-invert);
   border: solid 2px var(--button-background-color);
   color:var(--button-background-color);
}

a.button.compare:hover {
   background-color:  var(--button-background-color);
   border: solid 2px var(--button-background-color);
   color:var(--text-color-invert);
}

a.button.lead {
   background-color:  var(--text-color-invert);
   border: solid 2px var(--button-background-color);
   color:var(--button-background-color);
}

a.button.lead:hover {
   background-color:  var(--button-background-color);
   border: solid 2px var(--button-background-color);
   color:var(--text-color-invert);
}

a.button.evaluate {
   background-color: var(--detail-color);
   color: var(--text-color-invert);
   border: solid 2px var(--detail-color);
}

a.button.evaluate:hover {
   background-color: var(--text-color-invert);
   color: var(--detail-color);
   border: solid 2px var(--detail-color);
}

a.button.evaluate:before {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   font-size: 20px;
   color: inherit;
   font-family: "Material Icons";
   content: '';
   padding-right: 5px;
   margin: -10px 0px -10px -8px;
}

a.button.compare::before {
   display: none;
 }

a.button.lead::before {
   display: none;
 }

 a.button.buy::before {
   position: relative;
   display: inline-block;
   vertical-align: middle;
   font-size: 20px;
   color: var(--text-color-invert);
   font-family: "Material Icons";
   content: '';
   padding-right: 5px;
   margin: -10px 0px -10px -8px;
   top: -1px;
   font-weight: normal;
 }
/*
spacer
*/

div.spacer {
   position: relative;
   display: block;
   clear: both;
   height: 10px;
   width: 10px;
}

div.spacer.doble {
   width: 20px;
   height: 20px;
}

/*
text
*/

.page h2 {
   position: relative;
   display: block;
   font-size: 36px;
   font-weight: bold;
   color: var(--text-color);
   text-align: left;
   text-transform: uppercase;
   padding: 20px 0px;
}

.center {
   text-align: center;
}

.page h4 {
   position: relative;
   display: block;
   font-size: 16px;
   font-weight: bold;
   color: var(--text-color);
   text-align: left;
   text-transform: uppercase;
   padding-top: 10px;
}

.page h5 {
   position: relative;
   display: block;
   margin: 0 auto;
   font-size: 17px;
   font-weight: bold;
   color: var(--text-color);
   text-align: center;
   text-transform: uppercase;
   padding: 10px 0px;
}

.page h5.numbered {
   position: relative;
   display: block;
   margin: 0 auto;
   font-size: 17px;
   font-weight: bold;
   color: var(--text-color);
   text-align: left;
   text-transform: uppercase;
   padding: 10px 0px;
}

.page h5.numbered > span {
   position: relative;
   display: inline-block;
   text-transform: uppercase;
   font-weight: bold;
   background-color: var(--button-background-color);
   border-radius: 100%;
   color: var(--button-text-color);
   font-size: 16px;
   -o-transition: .4s;
   -ms-transition: .4s;
   -moz-transition: .4s;
   -webkit-transition: .4s;
   transition: .4s;
   width: 34px;
   height: 34px;
   text-align: center;
   line-height: 34px;
   margin-right: 5px;
}

.page p {
   position: relative;
   display: block;
   font-size: 12px;
   color: var(--text-color);
   
   text-align: left;
   padding: 10px 0px;
   line-height: 120%;
}

.default-text,
.default-text * {
   font-size: 12px;
   color: var(--text-color);
   line-height: 120%;
}

.default-text ul > li {
   padding: 2px 0px
}

a.text {
   position: relative;
   display: block;
   font-size: 12px;
   color: var(--text-color);
   
   text-align: left;
   padding: 10px 0px;
   line-height: 120%;

}

a.text:hover {
   text-decoration: underline!important;
}

/*
spacers
*/

.center-narrow {
   position: relative;
   display: block;
   margin: 0 auto;
   max-width: 60%;
}

/*
table
*/

.table {
   position: relative;
   display: block;
}

.table.half-size {
   width: 50%;
   margin: 0 auto
}

.table.third-size {
   width: 60%;
   margin: 0 auto
}

.table > .col {
   position: relative;
   display: inline-block;
   width: 100%;
}

.table.top > .col {
   vertical-align: top;
}

.table.middle > .col {
   vertical-align: middle;
}

.table.bottom > .col {
   vertical-align: bottom;
}

.table.cols-2 > .col {
   width: 50%;
}

.table.cols-3 > .col {
   width: 33.3%;
}

.table.cols-4 > .col {
   width: 25%;
}

.table.cols-5 > .col {
   width: 20%;
}

.table.cols-2.first-small > .col:nth-child(1) {
   width: 20%;
}
.table.cols-2.first-small > .col:nth-child(2) {
   width: 80%;
}

.table > .col.spaced {
   padding: 10px;
}

.table > .col.spaced-right {
   padding-right: 20px;
}

a.link {
   text-decoration: underline!important;
}

.onetrust-consent-sdk * {
   font-size: 14px;
} @media only screen and (min-width: 800px) and (max-width: 10000px) {  .mobile {
    display: none!important;
 }

 div.wrapper {
   width: var(--content-width);
}

 /*
 animaton
 */

 .animated-e {
    -o-transition:1.2s;
    -ms-transition:1.2s;
    -moz-transition:1.2s;
    -webkit-transition:1.2s;
    transition:1.2s;
 }

 .animated-d {
    -o-transition:1s;
    -ms-transition:1s;
    -moz-transition:1s;
    -webkit-transition:1s;
    transition:1s;
 }

 .animated-c {
    -o-transition:.8s;
    -ms-transition:.8s;
    -moz-transition:.8s;
    -webkit-transition:.8s;
    transition:.8s;
 }

 .animated-b {
    -o-transition:.6s;
    -ms-transition:.6s;
    -moz-transition:.6s;
    -webkit-transition:.6s;
    transition:.6s;
 }

 .animated-a {
    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;
 }

 .scroll-hide {
    opacity: 0;
    top: 100px;

    /*
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);
    */
 }

 .scroll-show {
    opacity: 1;
    top: 0px;

    /*
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);
    */
 } }  @media only screen and (min-width: 20px) and (max-width: 800px) {  /*
vars
*/

:root {
   --content-width: 100%;
   --content-width-negative: -100%;
    --header-height:59px;
}

/*
globals
*/

.desktop {
    display: none!important;
}

div.wrapper {
    width:100%;
}

/*
*/


.page h2 {
    font-size: 24px;
    padding: 10px 0px;
    text-align: center;
 }
 

 
 .page h4 {
    font-size: 14px;
    padding-top: 10px;
 }
 
 .page h5 {
    font-size: 14px;
    padding: 5px 0px;
 }
 
 .page p {
    font-size: 12px;
    color: var(--text-color);
    padding: 5px 0px;
    line-height: 120%;
 }
 
 a.text {
    font-size: 12px;
    padding: 5px 0px;
    line-height: 120%;
 
 }

 
/*
table
*/

.center-narrow {
   position: relative;
   display: block;
   margin: 0 auto;
   max-width: 100%;
}

.table {
    position: relative;
    display: block;
 }
 
 .table.half-size {
    width: 100%;
    margin: 0 auto
 }
 
 .table.third-size {
    width: 100%;
    margin: 0 auto
 }
 
 .table > .col {
    position: relative;
    display: block;
 }
 
 .table.cols-2 > .col {
    width: 100%;
 }
 
 .table.cols-3 > .col {
    width: 100%;
 }
 
 .table.cols-4 > .col {
    width: 100%;
 }
 
 .table.cols-5 > .col {
    width: 100%;
 }
 
 .table.cols-2.first-small > .col:nth-child(1) {
    width: 100%;
 }
 .table.cols-2.first-small > .col:nth-child(2) {
    width: 100%;
 }
 
 .table > .col.spaced {
    padding: 10px;
 }
 
 .table > .col.spaced-right {
    padding-right: 20px;
 } }  @media only screen and (min-width: 800px) and (max-width: 1330px) {  /*
vars
*/

:root {
    --content-width:calc(100vw - 20px);
}
 } .product-catalog {
    position: relative;
    display: block;
    width: 100%;
}

.product-catalog > ul {
    position: relative;
    display: block;
    width: 100%;
}

.product-catalog > ul > li {
    position: relative;
    display: block;
    width: 100%;
    border-top: solid 1px var(--border-color);
}

.product-catalog > ul > li > div {
    position: relative;
    display: block;
    padding: 20px 20px;
}

.product-catalog > ul > li > div > h2 {
    position: relative;
    display: block;
    font-size: 24px;
    color: var(--text-color);
    text-transform: none;
    padding: 0px;
    font-family: "Gotham-Bold";
}

.product-catalog > ul > li > div > h3 {
    position: relative;
    display: block;
    font-size: 18px;
    color: var(--text-color);
}

.product-catalog > ul > li > div > figure {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 0px 10px;
    width: 70px;
}

.product-catalog > ul > li > div > figure > a {
    position: relative;
    display: block;
}

.product-catalog > ul > li > div > figure > a > img {
    position: relative;
    display: block;
    max-width: 100%;
}

.product-catalog > ul > li > div > h3 {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    color: var(--text-color);
    width: calc(50% - 90px);
}

.product-catalog > ul > li > div > h3 > a {
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
    text-decoration: underline!important;
}

.product-catalog > ul > li > div > div.actions {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    text-align: left;
}

.product-catalog > ul > li > div > div.actions > span,
.product-catalog > ul > li > div > div.actions > a {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
}

.product-catalog > ul > li > div > div.actions > .button.buy {
    float: right;
} @media only screen and (min-width: 20px) and (max-width: 800px) {  .product-catalog > ul > li > div > h2 {
    text-align: center;
}

.product-catalog > ul > li > div > div.actions {
    text-align: center;
}

.product-catalog > ul > li > div > div.actions > .button.buy {
    float: none;
}

.product-catalog > ul > li > div > h3 {
    text-align: center;
}

.product-catalog > ul > li > div > h3 {
    width: 100%;
}

.product-catalog > ul > li > div > div.category {
    width: 100%;
} } /*
header
*/

header.college > .wrapper.go_back {
    background-color: transparent;
    padding: 0px 0px;
}

header.college > .wrapper.go_back > a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    color: var(--text-color);
    text-transform: uppercase;
}

header.college > .wrapper.go_back > a:after {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-family: "Material Icons";
    font-size: 28px;
    color: inherit;
    content:'';
}

header.college > .wrapper {
    background-color: var(--detail-color);
}

header.college > .wrapper > div.top {
    padding: 20px;
}

header.college > .wrapper > div.top > a.logo {
    width: auto;
}

header.college > .wrapper > div.top > a.logo > figure {
    max-width: 30vw;
}

header.college > .wrapper > div.top > nav {
    position: relative;
    display:inline-block;
    vertical-align: middle;
    width: calc(70% - 314px);
}

header.college > .wrapper > div.top > nav > ul {
    position: relative;
    display: block;
    text-align: center;
}

header.college > .wrapper > div.top > nav > ul > li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 0px 20px;

    -o-transition: .4s;
    -ms-transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    transition: .4s;
}

header.college > .wrapper > div.top > nav > ul > li > a {
    position: relative;
    display: block;
    font-size: 16px;
    color: var(--text-color-invert);
    text-transform: uppercase;
    font-family: "Gotham-Bold";

    -o-transition: .4s;
    -ms-transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    transition: .4s;
}

header.college > .wrapper > div.top > nav > ul > li > a:hover,
header.college > .wrapper > div.top > nav > ul > li > a.active {
    background-color: #fff;
    color: var(--detail-color);
    padding: 15px;
}

header.college  div.search {
    position: relative;
    display:inline-block;
    vertical-align: middle;
    width: 30%;
}

header.college  div.search > form {
    position: relative;
    display: block;
}

header.college  div.search > form > fieldset {
    position: relative;
    display: table;
    background-color: var(--text-color-invert);
}

header.college  div.search > form > fieldset > input {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: var(--detail-color);
    text-transform: uppercase;
    background-color: transparent;
    width: calc(100% - 130px);
    width: calc(100% - 130px);
    font-family: "Gotham-Bold";
    padding: 5px 20px;
}

header.college  div.search > form > fieldset > a.button {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background-color: var(--detail-color);
    color: var(--text-color-invert);
    font-weight: 14px;
    text-transform: uppercase;

}

/*
section
*/

section.college {
    padding: 150px 0px 20px;
}

section.college > .wrapper > .block.first {
    padding-top: 0px;
}

section.college > .wrapper > .block > .box-tile > div {
    width: 25%;
}

section.college > .wrapper > .block > div.college_info {
    position: relative;
    display: block;
}

section.college > .wrapper > .block > div.college_info > div.title {
    position: relative;
    display: block;
    background-color: var(--light-background-color);
    padding: 20px;
}

section.college > .wrapper > .block > div.college_info > div.title > h1 {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 36px;
    color: var(--text-color);
    width: 50%;
    font-family: "Gotham-Bold";
    font-style: italic;

}

section.college > .wrapper > .block > div.college_info > div.title.internal > h1  {
    font-size: 22px;
}

section.college > .wrapper > .block > div.college_info > div.title > div.filter {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    text-align: right;
}

section.college > .wrapper > .block > div.college_info > div.title > div.filter > form {
    position: relative;
    display: block;
}

section.college > .wrapper > .block > div.college_info > div.title > div.filter > form > fieldset {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 10px;
}

section.college > .wrapper > .block > div.college_info > div.title > div.filter > form > fieldset > label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    color: var(--text-color);
    padding: 10px;
    text-transform: uppercase;
    font-family: "Gotham-Bold";
}

section.college > .wrapper > .block > div.college_info > div.title > div.filter > form > fieldset > span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

section.college > .wrapper > .block > div.college_info > div.title > div.filter > form > fieldset > span > select {
    position: relative;
    display: block;
    font-size: 16px;
    background-color: var(--page-background-color);
    border: none;
    padding: 10px;
}

section.college > .wrapper > .block > div.college_info > div.title > div.filter > form > fieldset > span > select > option {
    position: relative;
    display: block;
    font-size: 14px;
    color: var(--text-color);
    font-family: inherit;
}

section.college > .wrapper > .block > div.college_info > div.title > div.filter > form > div.button_container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

section.college > .wrapper > .block > div.college_info > div.title > div.filter > form > div.button_container > a.button {
    background-color: var(--dark-background-color);
    color: var(--text-color-invert);
}

section.college > .wrapper > .block > div.college_info > div.info {
    position: relative;
    display: block;
    padding: 20px;
    border-bottom: solid 10px var(--light-background-color);
}

section.college > .wrapper > .block > div.college_info > div.info > div {
    position: relative;
    display: inline-block;
    width: 50%;
    vertical-align: middle;
}

section.college > .wrapper > .block > div.college_info > div.info > div.paginator {
    text-align: right;
    padding: 0px;
}

section.college > .wrapper > .block > div.college_info > div.info > div > h2 {
    position: relative;
    display: block;
    font-size: 22px;
    color: var(--text-color);
    text-transform: none;
    padding: 0px;
    font-family: "Gotham-Bold";
}

section.college > .wrapper > .block > div.college_info > div.info > div > h2 > span {
    color: var(--detail-color);
    font-size: inherit;
    font-family: inherit;
}

section.college > .wrapper > .block > div.college_info > div.info > div > h3 {
    position: relative;
    display: block;
    font-size: 18px;
}

section.college > .wrapper > .block > article {
    position: relative;
    display: block;
}

section.college > .wrapper > .block > article > h1 {
    position: relative;
    display: block;
    padding: 20px 0px;
    font-size: 36px;
    font-family: "Gotham-Bold";
    font-style: italic;
    color: var(--text-color);
    max-width: 80%;
}

section.college > .wrapper > .block > article > div.article-level {
    position: relative;
    display: block;
    border-bottom: solid 4px #909090;
    text-align: right;
}

section.college > .wrapper > .block > article > div.article-level > span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: var(--text-color-invert);
    font-size: 16px;
    padding: 8px 50px;
    background-image: url(../../../../../files/img/frontend/canon_cut_grey.svg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100%;
    text-transform: uppercase;
    font-family: "Gotham-Bold";
}


section.college > .wrapper > .block > article > .block > figure,
section.college > .wrapper > .block > article > figure {
    position: relative;
    display: block;
    width: 100%;
}

section.college > .wrapper > .block > article > .block > figure > img,
section.college > .wrapper > .block > article > figure > img {
    position: relative;
    display: block;
    max-width: 100%;
    width: 100%;
}

section.college > .wrapper > .block > article > text {
    position:relative;
    display: block;
    padding: 20px 0px;
}

section.college > .wrapper > .block > article > text * {
    font-size: 14px;
    color: var(--text-color);
    line-height: 120%;
}

section.college > .wrapper > .block > article > text p {
    padding: 10px 0px;
}

section.college > .wrapper > .block > article > div > div > div > iframe,
section.college > .wrapper > .block > article > div > div > iframe,
section.college > .wrapper > .block > article > div > iframe,
section.college > .wrapper > .block > article > iframe {
    position: relative;
    display: block;
    width: 100%;
    height: 80vh;
    height: calc( var(--content-width) * .57);

    max-width: 110vh;
    text-align: center;
    max-height: calc(110vh / 1.8 );
    margin: 0 auto;
}
 @media only screen and (min-width: 20px) and (max-width: 800px) {  /*
header
*/

header.college > .wrapper.go_back {
    background-color: transparent;
    padding: 0px 10px;
}

header.college > .wrapper.go_back > a {
    font-size: 10px;
}

header.college > .wrapper.go_back > a:after {
    font-size: 20px;
}

header.college > .wrapper {
    padding: 10px 0px;
}

header.college > .wrapper > div.top {
    padding: 0px;
}

header.college.active > .wrapper.go_back > a {
    color: var(--text-color-invert);
    z-index: 2;
}

header.college > .wrapper > div.top > div.search > form {
    display: none;
}

header.college > .wrapper > div.top > div.search:after {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 32px;
    color: var(--text-color-invert);
    font-family: "Material Icons";
    content: '';
}

header.college > .wrapper > div.top > a.drop::before {
    color: var(--text-color-invert);
}

header.college > .wrapper > div.top > a.logo {
    width: 200px;
    text-align: center;
    z-index: 1;
}

header.college > .wrapper > div.top > a.logo > figure {
    display: inline-block;
    max-width: initial;
}

header.college > .wrapper > div.top > div.search {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 1;
    width: auto;
    cursor: pointer;
}

header.college > .wrapper > div.top > nav {
    display: block;
    left: -100vw;
    width: 100%;
    height: 100%;
    top: 0px;
    background-color: var(--detail-color);
    position: fixed;
    -o-transition: .4s;
    -ms-transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    transition: .4s;

}

header.college.active > .wrapper > div.top > nav {
    left: 0px;
}

header.college > .wrapper > div.top > nav > ul {
    position: relative;
    display: block;
    padding-top: 100px;
}

header.college > .wrapper > div.top > nav > ul > li {
    position: relative;
    display: block;
}

header.college > .wrapper > div.top > nav > ul > li > div.search {
    width: 100%;
    margin-bottom: 30px;
}

header.college > .wrapper > div.top > nav > ul > li > a {
    position: relative;
    display: block;
    font-size: 24px;
    padding: 10px;
    border-bottom: solid 1px var(--text-color-invert);
    text-align: left;
}

/*
section
*/

section.college {
    padding: 70px 0px 20px;
}

section.college > .wrapper > .block > .box-tile {
    padding: 0px;
}

section.college > .wrapper > .block > .box-tile > div {
    width: 50%;
    display: inline-block;
}

section.college > .wrapper > .block > .box-tile > div > span {
    padding: 5px;
}

section.college > .wrapper > .block > .box-tile > div > span > h4 {
    font-size: 12px;
}

section.college > .wrapper > .block > .box-tile > div > span > p {
    display: none;
}

section.college > .wrapper > .block > div.college_info > div.title {
    padding: 10px 10px 30px 10px;
}

section.college > .wrapper > .block > div.college_info > div.title.internal > h1 {
    font-size: 18px;
}

section.college > .wrapper > .block > div.college_info > div.title > h1 {
    font-size: 22px;
    text-align: center;
    width: 100%;
    display: block;
}


section.college > .wrapper > .block > div.college_info > div.title > div.filter {
    display: block;
    width: 100%;
    text-align: center;
}

section.college > .wrapper > .block > div.college_info > div.title > div.filter > form > fieldset > label,
section.college > .wrapper > .block > div.college_info > div.title > div.filter > form > fieldset > span {
    display: block;
    text-align: left;
}

section.college > .wrapper > .block > div.college_info > div.title > div.filter > form > div.button_container {
    display: block;
    width: 100%;
    text-align: center;
}

section.college > .wrapper > .block > div.college_info > div.title > div.filter > form > div.button_container > a.button {
    display: inline-block;
}

section.college > .wrapper > .block > div.college_info > div.title > div.filter > form > fieldset > span > select {
    font-size: 12px;
}

section.college > .wrapper > .block > div.college_info > div.info {
    padding: 10px;
}

section.college > .wrapper > .block > div.college_info > div.info > div {
    display: block;
    width: 100%;
    text-align: center;
}

section.college > .wrapper > .block > div.college_info > div.info > div > h2,
section.college > .wrapper > .block > div.college_info > div.info > div > h3 {
    text-align: left;
}

section.college > .wrapper > .block > div.college_info > div.info > div > h2 {
    font-size: 16px;
}

section.college > .wrapper > .block > div.college_info > div.info > div > h3 {
    font-size: 12px;
}

section.college > .wrapper > .block > div.college_info > div.title.internal {
    padding: 10px;
}

section.college > .wrapper > .block > article {
    padding: 10px;
}

section.college > .wrapper > .block > article > h1 {
    font-size: 22px;
    text-align: center;
    max-width: 100%;
    padding: 10px 0px;
}

section.college > .wrapper > .block > article  iframe {
    height:80vw!important;
}

section.college > .wrapper > .block > article > div.article-level > span {
    font-size: 12px;
} }  @media only screen and (min-width: 800px) and (max-width: 1330px) {  header.college > .wrapper.go_back {
    padding-left: 10px;
}

header.college > .wrapper > div.top > a.logo {

}

header.college > .wrapper > div.top > nav {
   width: calc(70% - 30vw);
}

header.college > .wrapper > div.top > nav > ul > li {
    padding: 0px 10px;
}

header.college > .wrapper > div.top > nav > ul > li > a {
    font-size: 14px;
}

header.college > .wrapper > div.top > div.search {
    width: calc(30% );
}

header.college > .wrapper > div.top > div.search > form > fieldset > a.button {
    font-size: 0px;
}

header.college > .wrapper > div.top > div.search > form > fieldset > a.button:after {
    margin: 0px;
    line-height: 100%;
}

header.college > .wrapper > div.top > div.search > form > fieldset > input {
    width: calc(100% - 70px);
}

section.college > .wrapper > .block > article > div > div > div > iframe,
section.college > .wrapper > .block > article > div > div > iframe,
section.college > .wrapper > .block > article > div > iframe,
section.college > .wrapper > .block > article > iframe {
    position: relative;
    display: block;
    
    /*
    width: 100%;
    height: 55vw;
    */

    max-width: 110vh;
    text-align: center;
    max-height: calc(110vh / 1.8 );
    margin: 0 auto;
} } .compare-lightbox {
    position: fixed;
    top: 100vh;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.6);
    z-index: -1;
    display: table;
    pointer-events: none;

    -o-transition:.6s;
    -ms-transition:.6s;
    -moz-transition:.6s;
    -webkit-transition:.6s;
    transition:.6s;
}

.compare-lightbox.active {
    top: 0px;
    z-index: 10;
    pointer-events: all;
}

.compare-lightbox > .container {
    position: relative;
    display: table-cell;
    height: 100%;
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

.compare-lightbox > .container > .content {
    position: relative;
    display: table;
    max-width: 900px;
    vertical-align: middle;
    background-color: var(--page-background-color);
    width: auto;
    padding: 20px;
    margin: 0 auto;
}

.compare-lightbox > .container > .content > a.close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    cursor: pointer;
    text-decoration: none !important;
}

.compare-lightbox > .container > .content > a.close:after {
    position: relative;
    display: block;
    content: '';
    color: var(--text-color);
    font-size: 32px;
    font-family: "Material Icons";
}

.compare-lightbox > .container > .content > form {
    position: relative;
    display: block;
}

.compare-lightbox > .container > .content > form > h3 {
    position: relative;
    display: block;
    color: var(--text-color);
    font-size: 22px;
    text-align: center;
    text-transform: uppercase;
    padding: 0px 0px 20px 0px;
    font-weight: bold;
}

.compare-lightbox > .container > .content > form > div.head {
    position: relative;
    display: block;
    text-align: left;
    font-size: 0px;
    padding: 20px 0px;
}

.compare-lightbox > .container > .content > form > div.head > div {
    position: relative;
    display: inline-block;
    width: 50%;
    vertical-align: middle;
}

.compare-lightbox > .container > .content > form > div.head > div:nth-child(2)::before {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-family: "Material Icons";
    color: var(--text-color);
    font-size: 30px;
    content:'';
}

.compare-lightbox > .container > .content > form > div.head > div > figure {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: auto;
}

.compare-lightbox > .container > .content > form > div.head > div > figure > img {
    position: relative;
    display: block;
    max-width: 100%;
}

.compare-lightbox > .container > .content > form > div.head > div > h4 {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: var(--text-color);
    font-size: 22px;
    text-align: center;
    font-weight: bold;
}

.compare-lightbox > .container > .content > form > div.head > div > p  {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: var(--text-color);
    font-size: 14px;
    text-align: left;
    padding: 10px;
}

.compare-lightbox > .container > .content > form > div.list {
    position: relative;
    display: block;
}

.compare-lightbox > .container > .content > form > div.list > div.container {
    position: relative;
    display: block;
    height: 210px;
    overflow-y: auto;
}

.compare-lightbox > .container > .content > form > div.list > div.container > ul {
    position: relative;
    display: block;
    font-size: 0px;
    text-align: left;
    padding: 0px 10px 0px 0px;
    border-top: solid 4px var(--border-color);
}

.compare-lightbox > .container > .content > form > div.list > div.container > ul > li {
    position: relative;
    display: inline-block;
    padding: 10px 0px;
    vertical-align: bottom;
    width: 50%;
    border-bottom: solid 1px var(--border-color);

    -o-transition: .4s;
    -ms-transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    transition: .4s;
}

.compare-lightbox > .container > .content > form > div.list > div.container > ul > li.check_lock {
    opacity: .4;
}

.compare-lightbox > .container > .content > form > div.list > div.container > ul > li > div {
    position: relative;
    display: block;
}

.compare-lightbox > .container > .content > form > div.list > div.container > ul > li > div > fieldset {
    position: relative;
    display: inline-block;
    vertical-align:middle;
}

.compare-lightbox > .container > .content > form > div.list > div.container > ul > li > div > fieldset > input {
    position: relative;
    display: block;
}

.compare-lightbox > .container > .content > form > div.list > div.container > ul > li > div > figure {
    position: relative;
    display: inline-block;
    vertical-align:middle;
    width: 60px;
    padding: 0px 10px;
}

.compare-lightbox > .container > .content > form > div.list > div.container > ul > li > div > figure > img {
    position: relative;
    display: block;
    max-width: 100%;
}

.compare-lightbox > .container > .content > form > div.list > div.container > ul > li > div > h4 {
    position: relative;
    display: inline-block;
    vertical-align:middle;
    font-weight: bold;
    font-size: 16px;
    color: var(--text-color);
}

.compare-lightbox > .container > .content > form > div.button-container {
    position: relative;
    display: block;
    padding: 20px 0px 10px 0px;
    text-align: right;
}

.compare-lightbox > .container > .content > form > div.button-container > button {
    display: inline-block;
}


#form-compare-product input[type="checkbox"] {
    pointer-events: none;
}

/*
existing
*/

section > .wrapper > .block > .product-specs.to-compare > ul > li > ul > li > div {
    vertical-align: top;
}

section > .wrapper > .block > .product-specs.to-compare > ul > li > ul > li > div > span {
    padding-right: 5px;
}

section > .wrapper > .block > .product-specs.to-compare > ul > li > ul > li {
    padding-right: 0px;
}

.product-list:not(.to-compare) > ul > li > div > a.button,
.product-list:not(.to-compare) > ul > li > div > p {
    display: none;
}

.product-list.to-compare > ul > li:first-child {

}

.product-list.to-compare > ul > li > div {
    border-bottom: solid 10px var(--border-color);
    padding-bottom: 20px;
}


section > .wrapper > .block > .product-specs.to-compare {
    width: 100%;
    max-width: 100%;
}


.product-list.to-compare  {
    -o-transition: .4s;
    -ms-transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    transition: .4s;
}


.page:not(.scrolled) .product-list.to-compare > ul > li > div.add_product > figure {
    margin-bottom: 10px;
}

.page:not(.scrolled) .product-list.to-compare > ul > li > div.add_product > figure,
.product-list.to-compare > ul > li > div.add_product {
    border: none;
}

/*
.page .product-list.to-compare > ul > li > div.add_product {
    background-color: var(--background-color);
}
*/

.page .product-list.to-compare > ul > li > div.add_product > figure {
    background-color: transparent;
}

.page .product-list.to-compare > ul > li > div.add_product > a {
    margin: 0 auto;
    text-align: center;
}

.page.scrolled .product-list.to-compare > ul > li > div.add_product > figure {
    padding: 0px!important;
}


.page.scrolled .product-list.to-compare > ul > li > div:not(.add_product) > a {
    display: inline-block;
} @media only screen and (min-width: 800px) and (max-width: 10000px) {  /*
animation
*/

.page .product-list > ul > li > div,
.page .product-list > ul > li > div > figure,
.page .product-list > ul > li > div > h4 {
    -o-transition: .4s;
    -ms-transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    transition: .4s;    
}

/*
scrolled
*/

.page.scrolled .product-list.to-compare.to-compare {
    z-index: 6;
    background-color: var(--page-background-color);
}

.page.scrolled .product-list.to-compare.to-compare.fixed {
    position: fixed;
    top: 0px;
    width: var(--content-width);
}

.page.scrolled .product-list.to-compare.to-compare.fixed + .fix_block {
    display: block;
    height: 227px;
 }

.page.scrolled .product-list.to-compare > ul > li > div > figure {
    display: inline-block;
    vertical-align: middle;
    width: 120px;
    border:none;
    padding-top: 10px;
}

.page.scrolled .product-list.to-compare > ul > li > div > h4 {
    font-size: 16px;
    width: calc(100% - 120px);
    display: inline-block;
    vertical-align: middle;
}

.page.scrolled .product-list.to-compare > ul > li > div > figure > a.evaluate {
    display: none;
}

/*
.page.scrolled .product-list.to-compare > ul > li > div > a.button {
    display: inline-block;
}
*/

.page.scrolled .product-list.to-compare > ul > li > div > figure > span {
    font-size: 10px;
    padding: 5px;
}

.page.scrolled .product-list.to-compare > ul {
    min-height: initial!important;
}

.product-list.to-compare > ul > li > div.add_product .button {
    /*margin: 0 auto;*/
    vertical-align: middle;
}


.product-list.to-compare > ul > li > div.add_product {
    text-align: center;
}

/*
.page .block_scroll_holder {
    height: 1px;
    position: relative;
    display: block;
}

.page.scrolled .block_scroll_holder {
    height: 200px;
    position: relative;
    display: block;
*/ }  @media only screen and (min-width: 20px) and (max-width: 800px) {  .compare-lightbox > .container > .content {
    max-width: initial;
    width: 100%;
    height: 100%;
    padding: 15px;
}

.compare-lightbox > .container > .content > form > h3 {
    text-align: left;
}

.compare-lightbox > .container > .content > form > div.head > div {
    display: block;
    width: auto;
}

.compare-lightbox > .container > .content > form > div.head > div > figure {
    width: 70px;
}

.compare-lightbox > .container > .content > form > div.head > div > h4 {
    font-size: 18px;
    max-width: 65%;
    text-align: left;
    line-height: 100%;
    padding-left: 10px;
}

.compare-lightbox > .container > .content > form > div.list > div.container > ul > li  {
    display: block;
    width: 100%;
}

.compare-lightbox > .container > .content > form > div.list > div.container > ul > li > div > figure {
    width: 40px;
    padding: 0px 5px;
}

.compare-lightbox > .container > .content > form > div.list > div.container > ul > li > div > h4 {
    max-width: 50%;
    text-align: left;
    line-height: 100%;
    padding-left: 5px;
    font-weight: 14px;
}

.compare-lightbox > .container > .content > form > div.list > div.container {
    height: calc(100vh - 300px);
}

.compare-lightbox > .container > .content > form > div.button-container {
    text-align: center;
}


/*
*/

.content-slider.two-cols.to-compare .slider-parent > .slider-child:nth-child(1) {
    left: 0px!important;
    z-index: 2;
}

.content-slider.two-cols.to-compare .slider-parent > .slider-child {
    width: calc((var(--content-width)/2) )!important;;
}

.content-slider.two-cols.to-compare .slider-parent > .slider-child:nth-child(n+2) {
    left: calc((var(--content-width-negative)/2) * 6);
    opacity: 0;
}
.content-slider.two-cols.to-compare .slider-parent > .slider-child:nth-child(n+2)[data-depth="-5"] {
    left: calc((var(--content-width-negative)/2) * 5);
    opacity: 0;
}
.content-slider.two-cols.to-compare .slider-parent > .slider-child:nth-child(n+2)[data-depth="-4"] {
    left: calc((var(--content-width-negative)/2) * 4);
    opacity: 0;
}
.content-slider.two-cols.to-compare .slider-parent > .slider-child:nth-child(n+2)[data-depth="-3"] {
    left: calc((var(--content-width-negative)/2) * 3);
    opacity: 0;
}
.content-slider.two-cols.to-compare .slider-parent > .slider-child:nth-child(n+2)[data-depth="-2"] {
    left: calc((var(--content-width-negative)/2) * 2);
    opacity: 0;
}
.content-slider.two-cols.to-compare .slider-parent > .slider-child:nth-child(n+2)[data-depth="-1"] {
    left: calc((var(--content-width-negative)/2) * 1);
    opacity: 0;
}
.content-slider.two-cols.to-compare .slider-parent > .slider-child:nth-child(n+2)[data-depth="0"] {
    left: calc(var(--content-width)/2);
    opacity: 0;
}
.content-slider.two-cols.to-compare .slider-parent > .slider-child:nth-child(n+2)[data-depth="1"] {
    left: calc(var(--content-width)/2);
    opacity: 1;
}
.content-slider.two-cols.to-compare .slider-parent > .slider-child:nth-child(n+2)[data-depth="2"] {
    left: calc((var(--content-width)/2) * 2);
    opacity: 0;
}
.content-slider.two-cols.to-compare .slider-parent > .slider-child:nth-child(n+2)[data-depth="3"] {
    left: calc((var(--content-width)/2) * 3);
    opacity: 0;
}
.content-slider.two-cols.to-compare .slider-parent > .slider-child:nth-child(n+2)[data-depth="4"] {
    left: calc((var(--content-width)/2) * 4);
    opacity: 0;
}
.content-slider.two-cols.to-compare .slider-parent > .slider-child:nth-child(n+2)[data-depth="5"] {
    left: calc((var(--content-width)/2) * 5);
    opacity: 0;
}
.content-slider.two-cols.to-compare .slider-parent > .slider-child:nth-child(n+2)[data-depth="6"] {
    left: calc((var(--content-width)/2) * 6);
    opacity: 0;
}
.content-slider.two-cols.to-compare .slider-parent > .slider-child:nth-child(n+2)[data-depth="6"] ~ .slider-child {
    left: calc((var(--content-width)/2) * 7);
    opacity: 0;
}

/*
*/

.content-slider.two-cols.to-compare > .dot-navigator {
    display: none;
}

/*
*/

.to-compare > .navigation {
    position: relative;
    display: block;
    padding: 10px 0px;
    text-align: right;
}

.to-compare > .navigation > a.arrow {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.to-compare > .navigation > a.arrow:after {
    position: relative;
    display: block;
    font-family: "Material Icons";
    font-size: 42px;
    color: var(--text-color);
    font-weight: normal;
}

.to-compare > .navigation > a.arrow.left:after {
    content: '';
}

.to-compare > .navigation > a.arrow.right:after {
    content: '';
}

section > .wrapper > .block > .product-specs > ul > li > ul > li > div.not_visible {
    display: none;
}

/*
animation
*/

.page .product-list > ul > li > div,
.page .product-list > ul > li > div > figure,
.page .product-list > ul > li > div > h4 {
    -o-transition: .4s;
    -ms-transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    transition: .4s;    
}


/*
scrolled
*/

.page.scrolled .product-list.to-compare {
    z-index: 6;
    background-color: var(--page-background-color);
}

.page.scrolled .product-list.to-compare.fixed {
    position: fixed;
    top: 0px;
    width: var(--content-width);
}

.page.scrolled .product-list.to-compare.fixed + .fix_block {
    display: block;
    height: 227px;
 }

 .page.scrolled .product-list.to-compare > ul > li > div:not(.add_product) > figure {
    display: inline-block;
    vertical-align: middle;
    width: 40%;
    border:none;
    padding-top: 20px;
}

.page.scrolled .product-list.to-compare > ul > li > div > h4 {
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    width: 60%;
    padding-top: 50px;
}


.page.scrolled .product-list.to-compare > ul > li > div.add_product > figure {
    display: block;
    width: 50%;
    border:none;
    margin: 0 auto;
}



.page.scrolled .product-list.to-compare > ul > li > div > figure > a.evaluate {
    display: none;
}

.page.scrolled  .product-list > ul > li > div > figure > span {
    font-size: 10px;
    padding: 5px;
}

/*
.page.scrolled .product-list.to-compare > ul {
    min-height: initial!important;
}*/

.page.scrolled  .product-list.to-compare > .navigation {
    padding: 0px 10px;
}

.page.scrolled  .product-list.to-compare > .navigation > a.arrow:after {
    line-height: 100%;
}
 } div.product-evaluation {
    position: relative;
    display: block;
    border-top: solid 2px var(--border-color);
}

div.product-evaluation > div.product-evaluation-list > div.head > h3, 
div.product-evaluation > div.product-evaluation-form  > h3 {
    position: relative;
    display: block;
    margin: 0 auto;
    font-size: 17px;
    font-weight: bold;
    color: var(--text-color);
    text-align: left;
    text-transform: uppercase;
    padding: 10px 0px;
    display: inline-block;
}

div.product-evaluation > div.product-evaluation-form  > h3 {
    padding: 20px 0px 35px 20px;
}

div.product-evaluation > div.product-evaluation-form {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 30%;
    padding-right: 50px;
}

div.product-evaluation > div.product-evaluation-form > form {
    border-top: solid 8px var(--light-background-color);
    border-bottom: solid 8px var(--light-background-color);
}

div.product-evaluation > div.product-evaluation-form > form > div.field-block {
    padding: 5px 20px;
}

div.product-evaluation > div.product-evaluation-form > form > div.field-block > fieldset {
    padding: 5px 0px;
}

div.product-evaluation > div.product-evaluation-form > form > div.field-block > fieldset > label {
    font-weight: bold;
}

div.product-evaluation > div.product-evaluation-form > form > div.button-container {
    position: relative;
    display: block;
    text-align: left;
    border-top: none;
    padding: 20px 20px;
}

div.product-evaluation > div.product-evaluation-form > form > div.button-container > button {
    display: inline-block;
}

div.product-evaluation > div.product-evaluation-list {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 70%;
}

div.product-evaluation > div.product-evaluation-list > div.head {
    position: relative;
    display: block;
    /*
    padding: 10px 0px;
    */
}

div.product-evaluation > div > div.head > h3 {
    display: inline-block;
    width: 50%;
}

div.product-evaluation > div > div.head > div.paginator {
    display: inline-block;
    width: 50%;
    text-align: right;
    padding: 0px;
}

div.product-evaluation > div.product-evaluation-list > div.scroll-list {
    position: relative;
    display: block;
    height: 480px;
    overflow-y: auto;
    /*padding: 10px 0px;*/
}

div.product-evaluation > div.product-evaluation-list > div.scroll-list > ul {
    position: relative;
    display: block;
    padding: 0px 10px 0px 0px;
    height: 100%;
}

div.product-evaluation > div.product-evaluation-list > div.scroll-list > ul > li {
    position: relative;
    display: block;
    padding: 5px 0px;
}

div.product-evaluation > div.product-evaluation-list > div.scroll-list.no-result > ul > li:nth-child(1) {
    height: inherit;
}

div.product-evaluation > div.product-evaluation-list > div.scroll-list.no-result > ul > li:nth-child(n+2) {
    display: none;
}

div.product-evaluation > div.product-evaluation-list > div.scroll-list > ul > li > div {
    position: relative;
    display: table;
    padding: 20px;
    background-color: var(--light-background-color);
    height: 100%;
    width: 100%;
}

div.product-evaluation > div.product-evaluation-list > div.scroll-list > ul > li > div > div {
    position: relative;
    display: table-cell;
    vertical-align: middle;
}

div.product-evaluation > div.product-evaluation-list > div.scroll-list > ul > li > div > div > h4 {
    position: relative;
    display: block;
    margin: 0 auto;
    font-size: 17px;
    font-weight: bold;
    color: var(--text-color);
    text-align: left;
    text-transform: uppercase;
    padding: 0px 0px;
}

div.product-evaluation > div.product-evaluation-list > div.scroll-list > ul > li > div > div > p {
    position: relative;
    display: block;
    margin: 0 auto;
    font-size: 14px;
    color: var(--text-color);
    text-align: left;
    padding: 2px 0px;
}

div.product-evaluation > div.product-evaluation-list > div.foot {
    position: relative;
    display: block;
    padding: 10px 0px;
    text-align: right;
}

div.product-evaluation > div.product-evaluation-list > div.foot > div.paginator {
    padding: 0px;
    display: inline-block;
}

div.rating {
    position: relative;
    display: block;
}

div.rating > input {
    display: none;
}

div.rating > ul {
    display: block;
}

div.rating > ul > li {
    display: inline-block;
    vertical-align: middle;
}

div.rating > ul > li:after {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    content: '';
    color: var(--text-color);
    font-size: 24px;
    font-family: "Material Icons";
    font-weight: normal;
}

div.rating > input[value="5"] + ul > li:after,
div.rating > input[value="4"] + ul > li:nth-child(-n+4):after,
div.rating > input[value="3"] + ul > li:nth-child(-n+3):after,
div.rating > input[value="2"] + ul > li:nth-child(-n+2):after,
div.rating > input[value="1"] + ul > li:nth-child(1):after {
    content: '';
}

div.rating.interactive > ul > li {
    cursor: pointer;
}

div.rating.interactive > ul:hover > li:after {
    content: '';
}

div.rating.interactive > ul > li:hover ~ li:after {
    content: '';
}

/*
*/

div.product-evaluation-list[data-paginate] > div.scroll-list > ul > li:not(.active) {
    display: none!important;
}

div.product-evaluation-list[data-paginate] > div.scroll-list > ul > li.active {
    display: block;
} @media only screen and (min-width: 20px) and (max-width: 800px) {  div.product-evaluation {
    display: flex;
    flex-direction: column-reverse;
}

div.product-evaluation > div.product-evaluation-form,
div.product-evaluation > div.product-evaluation-list {
    display: block;   
    width: 100%;
    padding: 0px;
}

div.product-evaluation > div.product-evaluation-list > div.head > h3, 
div.product-evaluation > div.product-evaluation-form > h3 {
    text-align: center;
}

div.product-evaluation > div > div.head > h3,
div.product-evaluation > div > div.foot > div.paginator,
div.product-evaluation > div > div.head > div.paginator {
    display: block;
    text-align: center;
    width: 100%;
}

div.product-evaluation > div > div.head > div.paginator {
    display: none;
}

div.product-evaluation > div.product-evaluation-form > h3 {
    padding: 20px;
    text-align: center;
    width: auto;
    display: block;
}

div.product-evaluation > div.product-evaluation-form > form > div.button-container {
    text-align: center;
}

div.product-evaluation > div.product-evaluation-list > div.scroll-list.no-result {
    height: auto;
}

div.product-evaluation > div.product-evaluation-list > div.scroll-list.no-result > ul > li > div > div > p,
div.product-evaluation > div.product-evaluation-list > div.scroll-list.no-result > ul > li > div > div > h4 {
    text-align: center;
} } /*
footer
*/

footer {
    position: relative;
    display: block;
}

footer > div.wrapper {
    position: relative;
    display: block;
    width: var(--content-width);
    margin: 0 auto;
    border-top: solid 2px var(--border-color);
    padding: 20px;
}

footer > div.wrapper > div {
    position: relative;
    display: block;
    padding: 10px 0px;
}

footer > div.wrapper > div.bottom {
    padding-top:50px;
}

footer > div.wrapper > div > h3 {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 10px 0px;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--text-color);
    font-weight: bold;
    text-align: left;
}

footer > div.wrapper > div > span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    color: var(--text-color);
    text-align: left;
}

footer > div.wrapper > div > a.back-to-top {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: var(--text-color);
    text-transform: uppercase;
    float: right;
}

footer > div.wrapper > div > a.back-to-top:after {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 30px;
    color: var(--text-color);
    font-family: "Material Icons";
    content: '';
}

footer > div.wrapper > div > a.back-to-top:hover {
    text-decoration: underline!important;
}

footer > div.wrapper > div > .social {
    position: relative;
    display: inline-block;
    float: right;
    padding-right: 120px;
}

footer > div.wrapper > div > .social > ul {
    position: relative;
    display: block;
}

footer > div.wrapper > div > .social > ul > li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 5px;
}

footer > div.wrapper > div > .social > ul > li > a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    text-transform: uppercase;
    color:var(--detail-color);
    font-weight: bold;
    cursor: pointer;
}

footer > div.wrapper > div > .social > ul > li > a:hover {
    text-decoration: underline!important;
}

footer > div.wrapper > div > .social > ul > li > a:before {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 22px;
    color:var(--detail-color);
    font-family: "Socicon";
    padding-right: 8px;
    font-weight: normal;
}

footer > div.wrapper > div > .social > ul > li.location > a:before {
    content:''
}

footer > div.wrapper > div > .social > ul > li.facebook > a:before {
    content:''
}

footer > div.wrapper > div > .social > ul > li.instagram > a:before {
    content:''
}


footer > div.wrapper > div > .social > ul > li.linkedin > a:before {
    content:''
}


footer > div.wrapper > div > .social > ul > li.youtube > a:before {
    content:''
}


footer > div.wrapper > div > .social > ul > li.twitter > a:before {
    content:''
}


footer > div.wrapper > nav {
    position: relative;
    display: block;
}

footer > div.wrapper > nav > div {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding-right: 60px;
}

footer > div.wrapper > nav > div:last-child {
    padding-left: 140px;
}

footer > div.wrapper > nav > div > h4 {
    position: relative;
    display:block;
    padding-bottom: 10px;
    vertical-align: middle;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-color);
    font-weight: bold;
    text-align: left;
}

footer > div.wrapper > nav > div > ul {
    position: relative;
    display: block;
}

footer > div.wrapper > nav > div > ul > li {
    position: relative;
    display: block;
    padding: 5px 0px;
    max-width: 180px;
}

footer > div.wrapper > nav > div > ul > li > a {
    position: relative;
    display: block;
    font-size: 12px;
    color: var(--text-color);
    text-align: left;
}

footer > div.wrapper > nav > div > ul > li > a:hover {
    text-decoration: underline!important;
} @media only screen and (min-width: 800px) and (max-width: 10000px) {  /*
footer
*/

footer {
    position: relative;
    display: block;
}

 }  @media only screen and (min-width: 20px) and (max-width: 800px) {  /*
footer
*/

footer {
    position: relative;
    display: block;
}

footer > div.wrapper > div > a.back-to-top {
    display: none;
}

footer > div.wrapper > nav > div:last-child {
    padding-left: 0px;
}

footer > div.wrapper > div > .social {
    float: none;
    
}

footer > div.wrapper > div > .social > ul > li.location,
footer > div.wrapper > div > span {
    display: none;
}

footer > div.wrapper > nav > div > ul > li {
    padding: 4px 0px;
}

footer > div.wrapper > nav > div > ul > li > a {
    font-weight: 300;
}

footer > div.wrapper > nav > div > h4 {
    font-size: 20px;
} } fieldset {
    position: relative;
    border: none;
    padding: 10px 0px;
}

.page fieldset > input,
.page fieldset > textarea,
.page fieldset > select ,
fieldset > input,
fieldset > textarea,
fieldset > select {
    position: relative;
    display: block;
    font-size: 14px;
    color: var(--text-color);
    background-color: var(--light-background-color);
    padding: 5px;
    border: none;
    width: auto;
}

.page fieldset > select > option,
fieldset > select > option {
    font-size: inherit;
    font-family: inherit;
    color: inherit;
}

.page-form {
    position: relative;
    display: block;
}

.page-form > h1 {
    position: relative;
    display: block;
    color: var(--text-color);
    font-size: 36px;
    font-weight: 400;
    padding: 10px 20px 20px;
    border-bottom: solid 2px var(--border-color);
}

.page-form > form {
    position: relative;
    display: block;
}

.page-form > form > label {
    position: relative;
    display: block;
    font-size: 20px;
    text-transform: uppercase;
    color: var(--text-color);
    font-weight: bold;
    text-align: left;
    padding: 40px 0px 10px 20px;
    border-bottom: solid 2px var(--border-color);
}

.page-form > form > .field-block {
    position: relative;
    display: block;
    padding: 20px;
}

.page-form > form > .field-block > fieldset {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.page-form > form > .field-block > fieldset.full {
    width: 100%;
}

.page-form > form > .field-block > fieldset > label {
    position: relative;
    display: block;
    font-size: 14px;
    color: var(--text-color);
    padding: 5px 0px;
    text-transform: uppercase;
}

.page-form > form > .field-block > fieldset > span {
    position: relative;
    display: block;
    padding-right: 5px;
}

.page-form > form > .field-block > fieldset > span > input,
.page-form > form > .field-block > fieldset > span > select,
.page-form > form > .field-block > fieldset > span > textarea {
    position: relative;
    display: block;
    border: solid 1px var(--border-color);
    padding: 6px;
    color: var(--text-color);
    font-size: 14px;
    background-color: var(--page-background-color);
    width: 100%;
    line-height: 120%;
}

.page-form > form > .field-block > fieldset > span > input[type="file"] {
    display: none;
}
.page-form > form > .field-block > fieldset > span > input[type="file"] + label {
    font-size: 14px;
    color: var(--button-text-color);
    background-color: var(--button-background-color);
    width: auto;
    position: relative;
    display: block;
    padding: 7px;
    text-transform: uppercase;
    line-height: 120%;
}

.page-form > form > .field-block > fieldset > span > select > option {
    font-size: 14px;
}

.page-form > form > .button-container {
    position: relative;
    display: block;
    margin-top: 20px;
    border-top: solid 2px var(--border-color);
    padding: 40px 0px;
    text-align: right;
}

.page-form > form > .button-container > button:not(.button) {
    position: relative;
    display: inline;
    text-transform: uppercase;
    font-weight: bold;
    border: none;
    background-color: var(--detail-color);
    color: var(--button-text-color);
    font-size: 14px;
    padding: 10px 40px;
    border-radius: 30px;
    -o-transition: .4s;
    -ms-transition: .4s;
    -moz-transition: .4s;
    -webkit-transition: .4s;
    transition: .4s;
    min-width: 240px;
 }
 
 .page-form > form > .button-container > button:not(.button):hover {
    background-color: var(--button-hover-background-color);
    color: var(--button-hover-text-color); 
 }

.button-container > button.button {
    border: none;
 }

.button-container > button.button:after {
    margin: -5px 0px -5px 0px;
 }

 /*
 */
/*
 fieldset.birthday > span:after {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(../../../../../files/img/frontend/ico-calendar.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
 }
*/

.wait-for-yes:not(.active) {
    display: none!important;
}

wait-for-yes.active {
    display: block;
} @media only screen and (min-width: 800px) and (max-width: 10000px) {  
 /*
 */

 fieldset.select.half > span {
    width: 50%;
 }

 /*
 */

 fieldset.name {
    width: 50%;
 }
 fieldset.email {
    width: 30%;
 }
 fieldset.phone {
    width: 20%;
 }

 fieldset.birthday {
    width: 15%;
 }
 fieldset.zipcode {
    /*width: 15%;*/
    width: 30%;
 }
 fieldset.state {
    width: 35%;
 }
 fieldset.city {
    width: 35%;
 }

 fieldset.address {
    width: 60%;
 }
 fieldset.address_num {
    width: 10%;
 }
 fieldset.address_district {
    width: 30%;
 }

 fieldset.lang_1 {
    width: 35%;
 }
 fieldset.lang_1_level {
    width: 15%;
 }
 fieldset.lang_2 {
    width: 35%;
 }
 fieldset.lang_2_level {
    width: 15%;
 }

 fieldset.occupation {
    width: 30%;
 }
 fieldset.area {
    width: 20%;
 }
 fieldset.indicated {
    width: 20%;
 }

 fieldset.job {
    width: 30%;
 }
 fieldset.resume {
    width: 20%;
 }
 fieldset.parent {
    width: 40%;
 } }  @media only screen and (min-width: 20px) and (max-width: 800px) {  .page-form > h1 {
    font-size: 24px;
    text-align: center;
}

.page-form > form > label {
    font-size: 18px;
    padding-top: 20px;
}

.page-form > form > .field-block > fieldset {
    display: block;
    width: auto;
}

.page-form > form > .button-container {
    text-align: center;
} } 
/*
header
*/

header {
	position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 6;
    background-color: var(--header-background-color);
}

header > .wrapper {
    position: relative;
    display: block;;
}

header > .wrapper > div.top {
    position: relative;
    display: block;
}

header > .wrapper > div.top > a.logo {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 130px;
    padding: 15px 0px;
}

header > .wrapper > div.top > a.logo > figure {
    position: relative;
    display: block;
}

header > .wrapper > div.top > a.logo > figure > img {
    position: relative;
    display: block;
    max-width: 100%;
}

header > .wrapper > div.top > div.commands {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    float: right;
}

header > .wrapper > div.top > div.commands > .bt {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding-right: 5px;
    border-left: solid 1px var(--border-color);
    padding: 0px 10px;

    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;
}

header > .wrapper > div.top > div.commands > .bt:nth-child(1) {
    border-left: none;
}

header > .wrapper > div.top > div.commands > .bt > span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: var(--text-color);
    font-size: 11px;
    text-transform: uppercase;
    text-align: center;
    padding: 5px 5px;
    cursor: pointer;
}

header > .wrapper > div.top > div.commands > .bt:hover > span > span {
    text-decoration: underline!important;
}

header > .wrapper > div.top > div.commands > .bt > span > span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: var(--text-color);
    font-size: 11px;
    text-transform: uppercase;
    width: 60px;
    text-align: center;
    padding: 10px 5px;
}

header > .wrapper > div.top > div.commands > .bt > span > div.ico {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100% ;
    width: 30px;
    height: 25px;;
    content: '';
    padding: 0px 5px;
}


header > .wrapper > div.top > div.commands > .bt.search > span > div.ico {
    background-image: url(../../../../../files/img/frontend/ico-search.svg);
}

header > .wrapper > div.top > div.commands > .bt:hover {
    background-color: var(--light-background-color);
}

header > .wrapper > div.top > div.commands > .bt.cart > span > div.ico{
    background-image: url(../../../../../files/img/frontend/ico-cart.svg);
}

header > .wrapper > div.top > div.commands > .bt > div {
    position: fixed;
    display: block;
    width: var(--content-width);
    z-index: 4;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--light-background-color);
    padding: 20px;

    opacity: 0;
    pointer-events: none;
    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;
    
}

header > .wrapper > div.top > div.commands > .bt:hover > div {
    display: block;
    opacity: 1;
    pointer-events: all;
}

header > .wrapper > div.top > div.commands > .bt > div > form {
    position: relative;
    display: block;
}

header > .wrapper > div.top > div.commands > .bt > div > form > fieldset {
    position: relative;
    display: block;
    background-color: var(--background-color);
    padding: 10px;
}

header > .wrapper > div.top > div.commands > .bt > div > form > fieldset:before {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 40px;
    color:var(--text-color-invert);
    font-family: "Material Icons";
    content:'';
}

header > .wrapper > div.top > div.commands > .bt > div > form > fieldset > input {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    border: none;
    padding: 10px;
    background-color: var(--input-background-color);
    color: var(--input-text-color);
    font-size: 14px;
    width: calc(100% - 50px);
}

header > .wrapper > div.top > div.commands > .bt > div > ul {
    position: relative;
    display: block;
    max-height: 50vh;
    overflow: auto;
    margin-top: 20px;
}

header > .wrapper > div.top > div.commands > .bt > div > ul > li {
    position: relative;
    display: block;
    border-bottom: solid 2px var(--border-color);
    padding: 5px 0px;
}

header > .wrapper > div.top > div.commands > .bt > div > ul > li > div {
    position: relative;
    display: block;
}

header > .wrapper > div.top > div.commands > .bt > div > ul > li > div > figure {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background-color: var(--background-color);
    width: calc(  (var(--content-width)*.1) );
    width: 90px;
    margin-right: 20px;
    text-align: center;
}

header > .wrapper > div.top > div.commands > .bt > div > ul > li > div > figure > img {
    position: relative;
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

header > .wrapper > div.top > div.commands > .bt > div > ul > li > div > h3 {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    color: var(--text-color);
    font-weight: bold;
    width: calc(  (var(--content-width)*.2) );
}

header > .wrapper > div.top > div.commands > .bt > div > ul > li > div > div {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: var(--text-color);
}

header > .wrapper > div.top > div.commands > .bt > div > ul > li > div > div > span {
    position: relative;
    display: inline-block;
    margin: 5px;
    padding: 5px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--text-color-invert);
}

header > .wrapper > div.top > div.commands > .bt > div > ul > li > div > div > span.new {
    background-color: var(--detail-color);
}

header > .wrapper > div.top > div.commands > .bt > div > ul > li > div > div > span.legacy {
    background-color: var(--dark-background-color);
}

header > .wrapper > div.top > div.commands > .bt > div > ul > li > div > div > a.button {
    position: relative;
    display: inline-block;
    background-color: var(--button-background-color);
    color: var(--button-text-color);
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    border-radius: 30px;
    max-width: 165px;
}

header > .wrapper > div.top > div.commands > .bt > div > ul > li > div > div > a.button:hover {
    background-color: var(--button-hover-background-color);
    color: var(--button-hover-text-color); 
 }
 

header > .wrapper > div.top > div.commands > .bt > div > ul > li > div > div.breadcrumb {
    width: calc(  (var(--content-width)*.30) );
}

header > .wrapper > div.top > div.commands > .bt > div > ul > li > div > div.category {
    width: calc(  (var(--content-width)*.15) );
    text-align: center;
}

header > .wrapper > div.top > div.commands > .bt > div > ul > li > div > div.action {
    width: calc(  (var(--content-width)*.2) );
    text-align: right;
}

/*
header > .wrapper > div.top > div.commands > .bt > div > ul > li > div > div.action > a {
    display: inline-block;
}
*/

header > .wrapper > nav {
    position: relative;
    display: block;
    border-bottom: solid 1px var(--dark-border-color);
}

header > .wrapper > nav > ul {
    position: relative;
    display: table;
    border-top: solid 1px var(--border-color);
    width: 100%;
}

header > .wrapper > nav > ul > li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 25%;
    text-align: center;
    padding: 15px;

    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;
}

header > .wrapper > nav > ul > li.mark,
header > .wrapper > nav > ul > li.active,
header > .wrapper > nav > ul > li:hover {
    background-color: var(--menu-over-color);
}

header > .wrapper > nav > ul > li > a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
    color: var(--text-color);
}

header > .wrapper > nav > ul > li:after  {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    color: var(--text-color);
    font-family: "Material Icons";
    content:"";
    font-size: 24px;
    line-height: 30px;
    padding: 0px 20px;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

header > .wrapper > nav > ul > li:hover:after  {
    content:"";
}

header > .wrapper > nav > ul > li > nav {
    position: fixed;
    display: block;
    background-color: var(--menu-over-color);
    width: var(--content-width);
    transform: translateX(-50%);
    left: 50%;
    margin-top: 15px;
    z-index: 5;

    opacity: 0;
    pointer-events: none;
    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;
}

header > .wrapper > nav > ul > li > nav > div > nav {
    display: block;
}

header > .wrapper > nav > ul > li:hover > nav,
header > .wrapper > nav > ul > li.active > nav {
    display: block;
    opacity: 1;
    pointer-events: all;
}

header > .wrapper > nav > ul > li > nav > div > nav > div ,
header > .wrapper > nav > ul > li > nav > div {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

header > .wrapper > nav > ul > li > nav > div > nav > div > h3,
header > .wrapper > nav > ul > li > nav > div > h3 {
    position: relative;
    display: block;
    font-size: 18px;
    text-transform: uppercase;
    color: var(--text-color);
    font-weight: bold;
    text-align: left;
    margin: 20px 20px;
    border-bottom: solid 2px var(--detail-color);
    padding-bottom: 10px;
}

header > .wrapper > nav > ul > li > nav > div > nav > div > ul,
header > .wrapper > nav > ul > li > nav > div > ul {
    position: relative;
    display: block;
    padding: 0px 20px;
}

header > .wrapper > nav > ul > li > nav > div > nav > div > ul > li,
header > .wrapper > nav > ul > li > nav > div > ul > li {
    position: relative;
    display: inline-block;
    vertical-align: top;

    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;
}

header > .wrapper > nav > ul > li > nav > div > nav > div > ul > li > a ,
header > .wrapper > nav > ul > li > nav > div > ul > li > a {
    position: relative;
    display: block;
}

header > .wrapper > nav > ul > li > nav > div > nav > div > ul > li > a > div ,
header > .wrapper > nav > ul > li > nav > div > ul > li > a > div {
    position: relative;
    display: block;
    padding: 5px;
}

header > .wrapper > nav > ul > li > nav > div > nav > div > ul > li > a > div > figure,
header > .wrapper > nav > ul > li > nav > div > ul > li > a > div > figure {
    position: relative;
    display: block;
}

header > .wrapper > nav > ul > li > nav > div > nav > div > ul > li > a > div > figure > img,
header > .wrapper > nav > ul > li > nav > div > ul > li > a > div > figure > img {
    position: relative;
    display: block;
    max-width: 100%;
    margin: 0 auto;

    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;
}

header > .wrapper > nav > ul > li > nav > div > nav > div > ul > li:hover > a > div > figure > img,
header > .wrapper > nav > ul > li > nav > div > ul > li:hover > a > div > figure > img {
    transform: scale(1.05);
}

header > .wrapper > nav > ul > li > nav > div > nav > div > ul > li > a > div > figure > figcaption,
header > .wrapper > nav > ul > li > nav > div > ul > li > a > div > figure > figcaption {
    position: relative;
    display: block;
    font-size: 16px;
    color: var(--text-color);
    font-weight: bold;
    padding: 10px;
    max-width: 150px;
    margin: 0 auto;
    text-align: center;
}

header > .wrapper > nav > ul > li > nav > div > nav > div > ul > li:hover > a > div > figure > figcaption,
header > .wrapper > nav > ul > li > nav > div > ul > li:hover > a > div > figure > figcaption {
    text-decoration: underline!important;
}

/*
list
*/

header > .wrapper > nav > ul > li > nav > div.list {
    max-width:310px
 }

header > .wrapper > nav > ul > li > nav > div.list > ul {
    text-align: left;
}

header > .wrapper > nav > ul > li > nav > div.list > ul > li {
    position: relative;
    display: none;    
    padding-bottom: 10px;
}

header > .wrapper > nav > ul > li > nav > div.list > ul > li.active ,
header > .wrapper > nav > ul > li > nav > div.list > ul > li.active + li {
    display: block;
}

header > .wrapper > nav > ul > li > nav > div.list > ul > li > a > div > figure > img,
header > .wrapper > nav > ul > li > nav > div.list > ul > li > a > div > figure > figcaption {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 45%;
}

header > .wrapper > nav > ul > li > nav > div.list > ul > li > a > div > figure > figcaption {
    color: var(--link-color);
}

/*
sub-nav
*/

header > .wrapper > .sub-nav {
    position: relative;
    display: table;
    text-align: center;
    margin: 0 auto;
}

header > .wrapper > .sub-nav > ul {
    position: relative;
    display: block;
}

header > .wrapper > .sub-nav > ul > li {
    position: relative;
    display: inline-block;
    padding: 20px;
    width: 200px;
    vertical-align: middle;

    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;
}

header > .wrapper > .sub-nav > ul > li.active,
header > .wrapper > .sub-nav > ul > li:hover {
    border-bottom: solid 3px var(--detail-color);
}

header > .wrapper > .sub-nav > ul > li > a {
    position: relative;
    display: block;
    font-size: 16px;
    color: var(--text-color);
    text-align: center;

    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;
}

/*
breadcrumb
*/

header > .wrapper > .breadcrumb {
    position: relative;
    display: block;
    padding: 20px;
    border-bottom: solid 3px var(--detail-color);
    font-size: 14px;
    color: var(--text-color);

}

header > .wrapper > .breadcrumb > span,
header > .wrapper > .breadcrumb > a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: inherit;
    color: inherit;
}

header > .wrapper > .breadcrumb > a:hover {
    text-decoration: underline!important;
}

/*
product_head
*/

 .product_head {
    position: relative;
    display: block;
    padding: 20px 0px;
}

 .product_head > figure {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: calc(  (var(--content-width)*.1)  );
    text-align: center;
}

 .product_head > figure > img {
    position: relative;
    display: block;
    max-width: 100%;
    margin: 0 auto;
    max-width: 50px;
}

 .product_head > h2 {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 36px;
    color: var(--text-color);
    font-weight: normal;
    text-transform: none;
    width: calc(  (var(--content-width)*.7)  );
}

.product_head > h3 {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    color: var(--text-color);
    font-weight: bold;
    width: calc(  (var(--content-width)*.25)  );
}

 .product_head > div {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: var(--text-color);
}

 .product_head > div > span {
    position: relative;
    display: inline-block;
    margin: 5px;
    padding: 5px 30px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--text-color-invert);
    border-radius: 20px;
}

 .product_head > div > span.new {
    background-color: var(--detail-color);
}

 .product_head > div > span.legacy {
    background-color: var(--dark-background-color);
}

 .product_head > div.category {
    width: calc(  (var(--content-width)*.25) );
}

 .product_head > div.action {
    width: calc(  (var(--content-width)*.40)  );
    text-align: right;
}

 .product_head > div.action > a {
    display: inline-block;
} @media only screen and (min-width: 800px) and (max-width: 10000px) {  
/*
header
*/

header {
	
}

/*
*/

header.produto.produto > .wrapper > .product_head ,
header.produto > .wrapper > .top,
header.produto > .wrapper > nav,
header.produto > .wrapper > .breadcrumb {
    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;
    top: 0px;
}

header.produto.scrolled > .wrapper > .top,
header.produto.scrolled > .wrapper > nav,
header.produto.scrolled > .wrapper > .breadcrumb {
    /*display: none;*/
    position: relative;
    top: -190px;
}

header.produto.produto.scrolled > .wrapper > .product_head  {
    top: -170px;
    margin-bottom: -170px;
}

header.scrolled > .wrapper {
    max-height: auto;
}

header.produto > .wrapper > .product_head > .action > .button.top {
    display: none;
}

header.produto.scrolled > .wrapper > .product_head > .action > .button.top {
    display: inline-block;
    
}

header.produto > .wrapper > .product_head > .action > .button {
    margin: 5px 0px 5px 5px;
}

header.produto.scrolled > .wrapper > .product_head {
    border-bottom: solid 1px var(--border-color);
}

a.button.top::after {
    display: none;
}
a.button.top:before {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 20px;
    color: var(--text-color-invert);
    font-family: "Material Icons";
    content: '';
    padding-right: 5px;
    transform: none;
    margin: -10px 0px -10px -10px;
 }

 /*
 */

 header > .wrapper > nav > ul > li > nav.content-slider {
    
 }

 /*
 header > .wrapper > nav > ul > li > nav > div {
    padding: 0px 20px;
 }
 */

 header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul {
    width: calc(var(--content-width) - 100px);
    text-align: left;
    padding: 0px;
    margin:0px 50px;
    overflow: hidden;
 }


 header > .wrapper > nav > ul > li > nav.content-slider.swiping > div:not(.dot-navigator) > ul {
    overflow: visible;
 }

 header > .wrapper > nav > ul > li > nav.content-slider.swiping > div > nav.content-slider > div:not(.dot-navigator) > ul {
    overflow: visible;
 }


 header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li {
    -o-transition:1.2s;
    -ms-transition:1.2s;
    -moz-transition:1.2s;
    -webkit-transition:1.2s;
    transition:1.2s;

    width: 14%;
}


header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li:not(.active) {
    /*display: none;*/
    position: absolute;
    /*left: calc(( var(--content-width-negative) - 20px ) / 3);*/
}

header > .wrapper > nav > ul > li > nav > div > nav.content-slider > div:not(.dot-navigator) > ul > li:not(.active) {
    /*display: none;*/
    position: absolute;
    /*left: calc(( var(--content-width-negative) - 20px ) / 3);*/
}


header > .wrapper > nav > ul > li > nav > div > nav.content-slider > div:not(.dot-navigator) > ul > li + li + li,
header > .wrapper > nav > ul > li > nav > div > nav.content-slider > div:not(.dot-navigator) > ul > li + li,
header > .wrapper > nav > ul > li > nav > div > nav.content-slider > div:not(.dot-navigator) > ul > li.active ,


header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li + li + li,
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li + li,
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li.active {
    display: inline-block;
    position: relative;
}

header > .wrapper > nav > ul > li > nav > div > nav.content-slider > div:not(.dot-navigator) > ul > li.active,
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li.active {
    /*left:0px;*/
    position: relative;
}

header > .wrapper > nav > ul > li > nav > div > nav.content-slider > .paginator,
header > .wrapper > nav > ul > li > nav.content-slider > .paginator {
    padding: 0px;
    width: 100%;
    top: 50%;
    position: absolute;
    left: 0px;
}

header > .wrapper > nav > ul > li > nav > div > nav.content-slider > .paginator > input,
header > .wrapper > nav > ul > li > nav.content-slider > .paginator > input {
    display: none;
}

header > .wrapper > nav > ul > li > nav > div > nav.content-slider > .paginator >  a.arrow.left,
header > .wrapper > nav > ul > li > nav.content-slider > .paginator > a.arrow.left {
    position: absolute;
    left: 0px;
}

header > .wrapper > nav > ul > li > nav > div > nav.content-slider > .paginator >  a.arrow.right,
header > .wrapper > nav > ul > li > nav.content-slider > .paginator > a.arrow.right {
    position: absolute;
    right: 0px;
}

header > .wrapper > nav > ul > li > nav > div > nav.content-slider > .paginator > a.arrow.left:after,
header > .wrapper > nav > ul > li > nav > div > nav.content-slider > .paginator > a.arrow.right:after ,
header > .wrapper > nav > ul > li > nav.content-slider > .paginator > a.arrow.left:after,
header > .wrapper > nav > ul > li > nav.content-slider > .paginator > a.arrow.right:after {
    color: var(--detail-color);
}
 
 header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li {
    left: calc((( var(--content-width-negative) - 100px )/7) * 16);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-15"] {
    left: calc((( var(--content-width-negative) - 100px )/7) * 15);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-14"] {
    left: calc((( var(--content-width-negative) - 100px )/7) * 14);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-13"] {
    left: calc((( var(--content-width-negative) - 100px )/7) * 13);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-12"] {
    left: calc((( var(--content-width-negative) - 100px )/7) * 12);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-11"] {
    left: calc((( var(--content-width-negative) - 100px )/7) * 11);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-10"] {
    left: calc((( var(--content-width-negative) - 100px )/7) * 10);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-9"] {
    left: calc((( var(--content-width-negative) - 100px )/7) * 9);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-8"] {
    left: calc((( var(--content-width-negative) - 100px )/7) * 8);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-7"] {
    left: calc((( var(--content-width-negative) - 100px )/7) * 7);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-6"] {
    left: calc((( var(--content-width-negative) - 100px )/7) * 6);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-5"] {
    left: calc((( var(--content-width-negative) - 100px )/7) * 5);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-4"] {
    left: calc((( var(--content-width-negative) - 100px )/7) * 4);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-3"] {
    left: calc((( var(--content-width-negative) - 100px )/7) * 3);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-2"] {
    left: calc((( var(--content-width-negative) - 100px )/7) * 2);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-1"] {
    left: calc((( var(--content-width-negative) - 100px )/7) * 1);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="0"] {
    left: 0;
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="1"] {
    left: calc(( var(--content-width) - 100px )/7);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="2"] {
    left: calc((( var(--content-width) - 100px )/7) * 2);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="3"] {
    left: calc((( var(--content-width) - 100px )/7) * 3);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="4"] {
    left: calc((( var(--content-width) - 100px )/7) * 4);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="5"] {
    left: calc((( var(--content-width) - 100px )/7) * 5);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="6"] {
    left: calc((( var(--content-width) - 100px )/7) * 6);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="7"] {
    left: calc((( var(--content-width) - 100px )/7) * 7);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="8"] {
    left: calc((( var(--content-width) - 100px )/7) * 8);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="9"] {
    left: calc((( var(--content-width) - 100px )/7) * 9);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="10"] {
    left: calc((( var(--content-width) - 100px )/7) * 10);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="11"] {
    left: calc((( var(--content-width) - 100px )/7) * 11);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="12"] {
    left: calc((( var(--content-width) - 100px )/7) * 12);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="13"] {
    left: calc((( var(--content-width) - 100px )/7) * 13);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="14"] {
    left: calc((( var(--content-width) - 100px )/7) * 14);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="15"] {
    left: calc((( var(--content-width) - 100px )/7) * 15);
}
header > .wrapper > nav > ul > li > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="15"] ~ li {
    left: calc((( var(--content-width) - 100px )/7) * 15);
}

/*
*/

header > .wrapper > nav > ul > li > nav > div > nav.content-slider > div:not(.dot-navigator) > ul {
    width: calc(var(--content-width) - 500px);
    text-align: left;
    padding: 0px;
    margin:0px 50px;
    overflow: hidden;
 }


header > .wrapper > nav > ul > li > nav > div > nav.content-slider > div:not(.dot-navigator) > ul > li {
    -o-transition:1.2s;
    -ms-transition:1.2s;
    -moz-transition:1.2s;
    -webkit-transition:1.2s;
    transition:1.2s;

    width: 20%;
}

header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li {
    left: calc((( var(--content-width-negative) - 500px )/5) * 16);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-15"] {
    left: calc((( var(--content-width-negative) - 500px )/5) * 15);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-14"] {
    left: calc((( var(--content-width-negative) - 500px )/5) * 14);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-13"] {
    left: calc((( var(--content-width-negative) - 500px )/5) * 13);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-12"] {
    left: calc((( var(--content-width-negative) - 500px )/5) * 12);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-11"] {
    left: calc((( var(--content-width-negative) - 500px )/5) * 11);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-10"] {
    left: calc((( var(--content-width-negative) - 500px )/5) * 10);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-9"] {
    left: calc((( var(--content-width-negative) - 500px )/5) * 9);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-8"] {
    left: calc((( var(--content-width-negative) - 500px )/5) * 8);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-7"] {
    left: calc((( var(--content-width-negative) - 500px )/5) * 7);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-6"] {
    left: calc((( var(--content-width-negative) - 500px )/5) * 6);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-5"] {
    left: calc((( var(--content-width-negative) - 500px )/5) * 5);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-4"] {
    left: calc((( var(--content-width-negative) - 500px )/5) * 4);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-3"] {
    left: calc((( var(--content-width-negative) - 500px )/5) * 3);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-2"] {
    left: calc((( var(--content-width-negative) - 500px )/5) * 2);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-1"] {
    left: calc((( var(--content-width-negative) - 500px )/5) * 1);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="0"] {
    left: 0;
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="1"] {
    left: calc(( var(--content-width) - 500px )/5);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="2"] {
    left: calc((( var(--content-width) - 500px )/5) * 2);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="3"] {
    left: calc((( var(--content-width) - 500px )/5) * 3);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="4"] {
    left: calc((( var(--content-width) - 500px )/5) * 4);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="5"] {
    left: calc((( var(--content-width) - 500px )/5) * 5);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="6"] {
    left: calc((( var(--content-width) - 500px )/5) * 6);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="7"] {
    left: calc((( var(--content-width) - 500px )/5) * 7);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="8"] {
    left: calc((( var(--content-width) - 500px )/5) * 8);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="9"] {
    left: calc((( var(--content-width) - 500px )/5) * 9);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="10"] {
    left: calc((( var(--content-width) - 500px )/5) * 10);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="11"] {
    left: calc((( var(--content-width) - 500px )/5) * 11);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="12"] {
    left: calc((( var(--content-width) - 500px )/5) * 12);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="13"] {
    left: calc((( var(--content-width) - 500px )/5) * 13);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="14"] {
    left: calc((( var(--content-width) - 500px )/5) * 14);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="15"] {
    left: calc((( var(--content-width) - 500px )/5) * 15);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="15"] ~ li {
    left: calc((( var(--content-width) - 500px )/5) * 15);
}


header > .wrapper > nav > ul > li > nav > div.list {
    width:310px;
} }  @media only screen and (min-width: 20px) and (max-width: 800px) {   /*
header
*/

header > .wrapper {
    padding: 20px 10px;
}

header > .wrapper > div.top {
    text-align: center;
}

header > .wrapper > div.top > a.logo {
    width: 95px;
    padding: 0px;
}

header > .wrapper > div.top > a.drop {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    z-index: 1;
}

header > .wrapper > div.top > a.drop:before {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 32px;
    color: var(--text-color);
    font-family: "Material Icons";
    content:"";

}

header.active > .wrapper > div.top > a.drop:before {
    content:'';
}

header > .wrapper > div.top > div.commands {
    position: absolute;
    top: -10px;
    right: 0px;
}

/*
header > .wrapper > div.top > div.commands > .bt:before {
    transform: translateY(-50%);
}
*/

header > .wrapper > div.top > div.commands > .bt > span > span {
    display: none;
}

header > .wrapper > div.top > div.commands > .bt:hover {
    background-color: transparent;
}

header > .wrapper > div.top > div.commands > .bt > div {
    background-color: transparent;
    opacity: 1;
    pointer-events: all;
}

header:not(.search) > .wrapper > div.top > div.commands > .bt > div {
    /*display: none!important;*/
    top: -100vh;
}

header.search > .wrapper > div.top > div.commands > .bt > div {
    display: block!important;
    background-color: var(--light-background-color);
    top: calc( var(--header-height) - 15px);

    -o-transition:.6s;
    -ms-transition:.6s;
    -moz-transition:.6s;
    -webkit-transition:.6s;
    transition:.6s;
}

header > .wrapper > div.top > div.commands > .bt > div > ul > li > div > div.breadcrumb,
header > .wrapper > div.top > div.commands > .bt > div > ul > li > div > div.category,
header > .wrapper > div.top > div.commands > .bt > div > ul > li > div > div.action {
    display: none;
}

header > .wrapper > div.top > div.commands > .bt > div > form > fieldset::before {
    display: none;
}

header > .wrapper > div.top > div.commands > .bt > div > form > fieldset:after {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    color: var(--text-color);
    font-family: "Material Icons";
    content:'';
    font-size: 22px;
}

header > .wrapper > div.top > div.commands > .bt > div > ul > li > div > h3 {
    width: calc(90% - 100px);
    text-align: left;
}

header > .wrapper > div.top > div.commands > .bt > div > form > fieldset {
    padding: 0px;
    border: solid 1px var(--border-color);
}

header > .wrapper > div.top > div.commands > .bt > div > form > fieldset > input {
    width: 100%;
}

header > .wrapper > div.top > div.commands > .bt > div > ul > li > div > figure {
    background-color: transparent;
}

header > .wrapper > div.top > div.commands > .bt > div > ul {
    background-color: var(--page-background-color);
    margin-top: 0px;
    max-height: calc( 100vh - (var(--header-height) + 55px) );
}

/**/

header > .wrapper > nav {
    /*display: none;*/
    height: 0px;
    overflow: auto;
    top: -100vh;

    -o-transition:.6s;
    -ms-transition:.6s;
    -moz-transition:.6s;
    -webkit-transition:.6s;
    transition:.6s;
}

header.search ,
header.active {
    background-color: var(--light-background-color);
}

header.active > .wrapper > nav {
    display: block;
    height: calc(100vh - var(--header-height));
    top: 20px;
}

header > .wrapper > nav > ul > li {
    display: block;
    width: auto;
    text-align: left;
    border-top: solid 1px var(--border-color);
}

header > .wrapper > nav > ul > li.active,
header > .wrapper > nav > ul > li:hover {
    background-color: transparent;
}

header > .wrapper > nav > ul > li:hover:after  {
    content:"";
}

header > .wrapper > nav > ul > li > a {
    color: var(--detail-color);
    font-size: 20px;
    font-weight: 600;
}

header > .wrapper > nav > ul > li > nav > div > nav,
header > .wrapper > nav > ul > li > nav {
    position: relative;
    width: auto;
    left: initial;
    transform: initial;
    text-align: left;
    display: block;
    background-color: transparent;
    opacity: 1;
    pointer-events: all;
 
}

header > .wrapper > nav > ul > li > nav > div > nav > div,
header > .wrapper > nav > ul > li > nav > div {
    display: block;
}

header > .wrapper > nav > ul > li > nav > div > nav > div > h3:not(.more),
header > .wrapper > nav > ul > li > nav > div > h3:not(.more) {
    display: none;
}

header > .wrapper > nav > ul > li > nav > div > nav > div > h3.more,
header > .wrapper > nav > ul > li > nav > div > h3.more {
    font-size: 14px;
    text-transform: uppercase;
    padding: 10px 15px;
    margin: 0px;
    border: none;
}

header > .wrapper > nav > ul > li > nav > div > nav > div > ul,
header > .wrapper > nav > ul > li > nav > div > ul {
    padding: 0px;
}

header > .wrapper > nav > ul > li >  nav > div > nav > div.list > .dot-navigator,
header > .wrapper > nav > ul > li > nav > div.list > .dot-navigator {
    display: none;
}

header > .wrapper > nav > ul > li > nav > div > nav > div.list > ul > li,
header > .wrapper > nav > ul > li > nav > div.list > ul > li {
    display: block!important;
}

header > .wrapper > nav > ul > li > nav > div > nav > div > ul > li,
header > .wrapper > nav > ul > li > nav > div > ul > li {
    display: block;
    border-top: solid 1px var(--border-color);
}


header > .wrapper > nav > ul > li > nav > div > nav > div > ul > li > a > div > figure > img,
header > .wrapper > nav > ul > li > nav > div > ul > li > a > div > figure > img {
    display: none!important;
}

header > .wrapper > nav > ul > li > nav > div > nav > div > ul > li > a > div > figure > figcaption,
header > .wrapper > nav > ul > li > nav > div > ul > li > a > div > figure > figcaption {
    margin: 0;
    max-width: initial;
    font-size: 20px;
    width: auto !important;
    color: var(--text-color) !important;
    text-align: left;
}

header .paginator,
header .dot-navigator {
    display: none!important;
}

/*
*/

header > .wrapper > .sub-nav {
    display: none;
}

/*
*/

header > .wrapper > .breadcrumb {
    display: none;
}

header > .wrapper > .product_head {
    display: none;
}

 .product_head {
    text-align: center;
    padding: 10px 0px 0px;
    display: block;
}

 .product_head > figure {
    width: 80px;
    padding-bottom: 10px;
}

 .product_head > figure > img {
    max-width: 72px;
}

 .product_head > h3 {
    max-width: 320px;
    width: auto;
    padding-bottom: 10px;
}

.product_head > h2 {
    max-width: 320px;
    width: auto;
    padding-bottom: 10px;
    font-size: 24px;
}

 .product_head > div.action,
 .product_head > div.category {
    display: block!important;
    margin: 0 auto;
    text-align: center;
    width: auto;
}

.product_head > div.action > a, 
.product_head > div.category > a {
    margin: 5px;
} }  @media only screen and (min-width: 800px) and (max-width: 1330px) {  
/*
*/

header > .wrapper > nav > ul > li > nav > div > nav.content-slider > div:not(.dot-navigator) > ul {
    width: calc(var(--content-width) - 500px);
 }


header > .wrapper > nav > ul > li > nav > div > nav.content-slider > div:not(.dot-navigator) > ul > li {
    width: 50%;
}

header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li {
    left: calc((( var(--content-width-negative) - 500px )/2) * 16);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-15"] {
    left: calc((( var(--content-width-negative) - 500px )/2) * 15);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-14"] {
    left: calc((( var(--content-width-negative) - 500px )/2) * 14);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-13"] {
    left: calc((( var(--content-width-negative) - 500px )/2) * 13);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-12"] {
    left: calc((( var(--content-width-negative) - 500px )/2) * 12);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-11"] {
    left: calc((( var(--content-width-negative) - 500px )/2) * 11);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-10"] {
    left: calc((( var(--content-width-negative) - 500px )/2) * 10);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-9"] {
    left: calc((( var(--content-width-negative) - 500px )/2) * 9);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-8"] {
    left: calc((( var(--content-width-negative) - 500px )/2) * 8);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-7"] {
    left: calc((( var(--content-width-negative) - 500px )/2) * 7);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-6"] {
    left: calc((( var(--content-width-negative) - 500px )/2) * 6);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-5"] {
    left: calc((( var(--content-width-negative) - 500px )/2) * 5);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-4"] {
    left: calc((( var(--content-width-negative) - 500px )/2) * 4);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-3"] {
    left: calc((( var(--content-width-negative) - 500px )/2) * 3);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-2"] {
    left: calc((( var(--content-width-negative) - 500px )/2) * 2);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="-1"] {
    left: calc((( var(--content-width-negative) - 500px )/2) * 1);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="0"] {
    left: 0;
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="1"] {
    left: calc(( var(--content-width) - 500px )/2);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="2"] {
    left: calc((( var(--content-width) - 500px )/2) * 2);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="3"] {
    left: calc((( var(--content-width) - 500px )/2) * 3);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="4"] {
    left: calc((( var(--content-width) - 500px )/2) * 4);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="5"] {
    left: calc((( var(--content-width) - 500px )/2) * 5);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="6"] {
    left: calc((( var(--content-width) - 500px )/2) * 6);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="7"] {
    left: calc((( var(--content-width) - 500px )/2) * 7);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="8"] {
    left: calc((( var(--content-width) - 500px )/2) * 8);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="9"] {
    left: calc((( var(--content-width) - 500px )/2) * 9);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="10"] {
    left: calc((( var(--content-width) - 500px )/2) * 10);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="11"] {
    left: calc((( var(--content-width) - 500px )/2) * 11);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="12"] {
    left: calc((( var(--content-width) - 500px )/2) * 12);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="13"] {
    left: calc((( var(--content-width) - 500px )/2) * 13);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="14"] {
    left: calc((( var(--content-width) - 500px )/2) * 14);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="15"] {
    left: calc((( var(--content-width) - 500px )/2) * 15);
}
 header > .wrapper > nav > ul > li > nav > div > nav.content-slider  > div:not(.dot-navigator) > ul > li[data-depth="15"] ~ li {
    left: calc((( var(--content-width) - 500px )/2) * 15);
} } div.lightbox.preview-pic {
    position: fixed;
    /*display: none;*/
    top: 100vh;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(255,255,255,.9);


    -o-transition:.8s;
    -ms-transition:.8s;
    -moz-transition:.8s;
    -webkit-transition:.8s;
    transition:.8s;
}

div.lightbox.preview-pic.active {
    display: block;
    top: 0px;
}

div.lightbox.preview-pic > .wrapper {
    position: absolute;
    display: table;
    top: 50%;
    left: 50%;
    width: auto;
    transform: translateX(-50%) translateY(-50%);

}

div.lightbox.preview-pic > .wrapper > h3 {
    position: relative;
    display: table;
    font-size: 20px;
    font-weight: bold;
    color: var(--text-color);
    text-align: left;
    text-transform: uppercase;
    padding: 20px 0px;
    margin: 0 auto;
}

div.lightbox.preview-pic > .wrapper > figure {
    position: relative;
    display: table;
}

div.lightbox.preview-pic > .wrapper > figure > img {
    position: relative;
    display: none;
    width: 100%;
    max-height: 80vh;
}

div.lightbox.preview-pic > .wrapper > figure > img.active {
    display: table;
}

div.lightbox.preview-pic > .wrapper > figure > a.close {
    position: relative;
    display: table;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

div.lightbox.preview-pic > .wrapper > figure > a.close:after {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: var(--text-color);
    font-size: 26px;
    font-family: "Material Icons";
    content:'';
}

/*
video
*/

div.lightbox.video {
    position: fixed;
    /*display: none;*/
    top: 100vh;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(255,255,255,.9);


    -o-transition:.8s;
    -ms-transition:.8s;
    -moz-transition:.8s;
    -webkit-transition:.8s;
    transition:.8s;
}

div.lightbox.video.active {
    display: block;
    top: 0px;
}

div.lightbox.video > .wrapper {
    position: absolute;
    display: table;
    top: 50%;
    left: 50%;
    width: auto;
    transform: translateX(-50%) translateY(-50%);

}

div.lightbox.video > .wrapper > h3 {
    position: relative;
    display: table;
    font-size: 20px;
    font-weight: bold;
    color: var(--text-color);
    text-align: left;
    text-transform: uppercase;
    padding: 20px 0px;
    margin: 0 auto;
}

div.lightbox.video > .wrapper > .iframe-container {
    position: relative;
    display: table;
}

div.lightbox.video > .wrapper > .iframe-container > iframe {
    position: relative;
    display: block;
    width: 90vw;
    height: 40vw;
    max-height: 90vh;
}

div.lightbox.video > .wrapper > figure {
    position: absolute;
    display: table;
    top: 0px;
    right: 0px;
}

div.lightbox.video > .wrapper > figure > a.close {
    position: relative;
    display: table;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
}

div.lightbox.video > .wrapper > figure > a.close:after {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    color: var(--text-color);
    font-size: 26px;
    font-family: "Material Icons";
    content:'';
}
/*
------------------------------------------------------------------------------------
EZZATO.CLOUD
By : Andre Lorenzoni at andre@ezzato.com
------------------------------------------------------------------------------------
*/	

/*  loader  */

.loader {
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    /*background-color:#F3F4F3;*/
    background-color:var(--loader-background-color);
    background-size:100%;
    background-repeat:no-repeat;
    background-position:center center;
    display:table;
    vertical-align:middle;
    text-align:center;
    z-index:10;
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
	filter: alpha(opacity=100); 	
	-khtml-opacity: 1;      	
	-moz-opacity: 1;       		
	opacity: 1;
}

.loader-to-back {
    z-index:-1;
    opacity: 1;
}

.loader-hide {
	filter: alpha(opacity=0); 	
	-khtml-opacity: 0;      	
	-moz-opacity: 0;       		
	opacity: 0;
}

.loader > .loader-container {
    position:relative;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

.loader > .loader-container > .icon {
    position: relative;
    text-align: center;
    display: table;
    width: 60px;
    height: 60px;
    margin: 0 auto;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
}

.loader > .loader-container > figure {
    position: relative;
    display: block;
    max-width: 50px;
    margin: 0 auto;
}

.loader > .loader-container > figure > img {
    position: relative;
    display: block;
    max-width: 100%;
    width: 100%;
}

.loader:not(.loader-hide) > .loader-container > .icon {
    -webkit-animation:spin 1s ease-out 10ms infinite;
    -moz-animation:spin 1s ease-out 10ms infinite;
    animation:spin 1s ease-out 10ms infinite;
}

.loader > .loader-container > .icon:after {
	position: relative;
    display: table-cell;
    font-size: 81px;
    content: '';

    font-size: 38px;
    content: '';
    font-family: "Material Icons";
    color: var(--loader-content-color);
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.loader > .loader-container > .message {
    position:relative;
    display:block;
    text-align:center;
    color:var(--loader-content-color);
    text-transform:uppercase;
    font-size:12px;
    padding:5px 0px;

    display: none;
}

/* Loader 2 */

.processing:after {
    position: absolute;
    content:'restart_alt';
    font-size: 20px;
    font-family: "Material Icons";
    display: block;
      
      -webkit-animation: loader-2-1 3s linear infinite;
              animation: loader-2-1 3s linear infinite;
}
.loader-2 {
    display: block;
      height: 32px;
      width: 32px;
      content:'';
      -webkit-animation: loader-2-1 3s linear infinite;
              animation: loader-2-1 3s linear infinite;
  }
  @-webkit-keyframes loader-2-1 {
      0%   { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes loader-2-1 {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  .loader-2 span {
      display: block;
      position: absolute;
      top: 0; left: 0;
      bottom: 0; right: 0;
      margin: auto;
      height: 32px;
      width: 32px;
      clip: rect(16px, 32px, 32px, 0);
      -webkit-animation: loader-2-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
              animation: loader-2-2 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
  }
  @-webkit-keyframes loader-2-2 {
      0%   { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes loader-2-2 {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  .loader-2 span::before {
      content: "";
      display: block;
      position: absolute;
      top: 0; left: 0;
      bottom: 0; right: 0;
      margin: auto;
      /*height: 32px;
      width: 32px;*/
      border: 3px solid transparent;
      border-top: 3px solid var(--loader-content-color);;
      border-radius: 50%;
      -webkit-animation: loader-2-3 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
              animation: loader-2-3 1.5s cubic-bezier(0.770, 0.000, 0.175, 1.000) infinite;
  }
  @-webkit-keyframes loader-2-3 {
      0%   { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes loader-2-3 {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }
  .loader-2 span::after {
      content: "";
      display: block;
      position: absolute;
      top: 0; left: 0;
      bottom: 0; right: 0;
      margin: auto;
      border: 3px solid var(--loader-content-color);;
      border-radius: 50%;
  }
  
  .loader > .loader-container > .icon:after {
      font-size: 0px;
  }
 
  /*thinking*/
 
  .thinking {
    opacity: .4;
    pointer-events: none;
  }

  /* lds-ripple */

  .lds-ripple {
    display: inline-block;
    position: relative;
    width: calc(var(--loader-size));
    height:calc(var(--loader-size));
  }
  .lds-ripple div {
    position: absolute;
    border: 4px solid var(--loader-content-color);;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  }
  .lds-ripple div:nth-child(2) {
    animation-delay: -0.5s;
  }
  @keyframes lds-ripple {
    0% {
      top: calc(var(--loader-size)/2);
      left: calc(var(--loader-size)/2);
      width: 0;
      height: 0;
      opacity: 0;
    }
    4.9% {
      top: calc(var(--loader-size)/2);
      left: 36px;
      width: 0;
      height: 0;
      opacity: 0;
    }
    5% {
      top: calc(var(--loader-size)/2);
      left: calc(var(--loader-size)/2);
      width: 0;
      height: 0;
      opacity: 1;
    }
    100% {
      top: 0px;
      left: 0px;
      width: calc(var(--loader-size));
      height:calc(var(--loader-size));
      opacity: 0;
    }
  }.page-form.news {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.page-form.news > h1 {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    border: none;
}

.page-form.news > form {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

.page-form.news > form > .icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
    width: 30px;
    height: 25px;
    content: '';
    padding: 0px 5px;
    background-image: url(../../../../../files/img/frontend/ico-search.svg);
}

.page-form.news > form > fieldset {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 10px;
}

.page-form.news > form > fieldset > input {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    border: solid 1px #B8B8B8;
    background-color: transparent;
    padding: 4px;
    color: var(--text-color);
    width: 300px;
    border-radius: 4px;
}

.page-form.news > form > a {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.page-form.news > form > a > span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.page-form.news > form > a > span:after {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 22px;
    color: #fff;
    content: '';
    font-family: "Material Icons";
}

/*
item
*/

section > .wrapper > .block > .news_item {
    position: relative;
    display: block;
    background-color: #F5F6F6;
}

section > .wrapper > .block > .news_item > div {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

section > .wrapper > .block > .news_item > div > .content_wrapper {
    position: relative;
    display: block;
}

section > .wrapper > .block > .news_item > div > figure {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

section > .wrapper > .block > .news_item > div > figure > img {
    position: relative;
    display: block;
    max-width: 100%;
}

/*
*/

.page-form.news > .news_title > span.time,
section > .wrapper > .block > .news_item > div > .content_wrapper > span.time {
    position: relative;
    display: block;
    font-size: 14px;
    font-family: 'Gotham-Bold';
    color:var(--button-background-color);
}

.page-form.news > .news_title > span.time:before,
section > .wrapper > .block > .news_item > div > .content_wrapper > span.time:before {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding-right: 5px;
    font-size: 22px;
    content: '';
    font-family: "Material Icons";
    color: inherit;
    font-weight: normal;
}

section > .wrapper > .block > .news_item > div > .content_wrapper > h2 {
    position: relative;
    display: block;
    line-height: 110%;
    font-size: 20px;
    font-family: 'Gotham-Bold';
    color: var(--text-color);
    text-align: left;
    text-transform: uppercase;
    padding-top: 5px;
    padding-bottom: 5px;
}

.page-form.news > .news_title > div.news_category,
section > .wrapper > .block > .news_item > div > .content_wrapper > div.news_category {
    position: relative;
    font-family: 'Gotham-Bold';
    font-size: 12px;
    color:var(--button-background-color);
    color: var(--text-color);
    text-transform: uppercase;
}

section > .wrapper > .block > .news_item > div > div.news_picture {
    position: relative;
    display: block;
    padding: 5px 0px;
}

section > .wrapper > .block > .news_item > div > div.news_picture > figure {
    position: relative;
    display: block;
    background-color: #D9DBDC;
}

section > .wrapper > .block > .news_item > div > div.news_picture > figure > img {
    position: relative;
    display: block;
    width: 100%;
}

/*
*/

section > .wrapper > .block.news_list_container > .paginator.top {
    border-top: solid 1px #323232;
}

section > .wrapper > .block.news_list_container > .paginator.top > div {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}

section > .wrapper > .block.news_list_container > .paginator.top > div > div:nth-child(1) {
    position: relative;
    display: block;
    font-size: 22px;
    color: var(--text-color);
    font-family: "Gotham Bold";
    font-style: italic;
    text-align: left;
}

section > .wrapper > .block.news_list_container > .paginator.top > div > div > span {
    font-size: 22px;
    font-family: inherit;
    color:#009BD4;
    font-size: inherit;
}

section > .wrapper > .block.news_list_container > .paginator.top > div > div:nth-child(2) {
    position: relative;
    display: block;
    font-size: 18px;
    color: var(--text-color);
    text-align: left;
}

/*
news
*/

.page-form.news > .news_title {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    width: 80%;
}

.page-form.news > .news_title > h1 {
    position: relative;
    display: block;
    color: var(--text-color);
    font-size: 36px;
    line-height: 110%;
    font-weight: 400;
    padding: 0px;
}
/*
*/

section.noticia > .wrapper > .block > article > figure {
    position: relative;
    display: block;
    width: 100%;
}

section.noticia > .wrapper > .block > article > figure > img {
    position: relative;
    display: block;
    max-width: 100%;
    width: 100%;
}

section.noticia > .wrapper > .block > article > text {
    position:relative;
    display: block;
    padding: 20px 0px;
}

section.noticia > .wrapper > .block > article > text * {
    font-size: 14px;
    color: var(--text-color);
    line-height: 120%;
}

section.noticia > .wrapper > .block > article > text p {
    padding: 10px 0px;
}

section.noticia > .wrapper > .block > article > div > div > div > iframe,
section.noticia > .wrapper > .block > article > div > div > iframe,
section.noticia > .wrapper > .block > article > div > iframe,
section.noticia > .wrapper > .block > article > iframe {
    position: relative;
    display: block;
    width: 100%;
    height: 80vh;
}


/*
news_paginator
*/

.news_list_container[data-paginate] > .news_list.news_item {
    display: none;
}

.news_list_container[data-paginate] > .news_list.news_item.active {
    display: block;
}

 @media only screen and (min-width: 800px) and (max-width: 10000px) {  section > .wrapper > .block > .news_header > div:nth-child(1) {
    width: 66.6%;
}

section > .wrapper > .block > .news_header > div:nth-child(2) {
    width: 33.3%;
    padding: 50px;
}

/*
block_list
*/

section > .wrapper > .block > .news_item.news_block_list {
    position: relative;
    display: inline-block;
    width: 33.3%;
}

section > .wrapper > .block.news_block_list_container {
    position: relative;
    display: flex!important;
    padding: 10px 0px;
    column-gap: 20px;
    column-count: 3;
}

section > .wrapper > .block > .news_item.news_block_list {
    position: relative;
    display: flex!important;
    column-gap: 40px;
}

section > .wrapper > .block > .news_item.news_block_list > div  {
    padding: 20px 0px;
}

section > .wrapper > .block > .news_item.news_block_list > div > .content_wrapper {
    padding: 0px 20px;
    
}

section > .wrapper > .block > .news_item.news_block_list > div > .content_wrapper > a,
section > .wrapper > .block > .news_item.news_block_list > div > .content_wrapper > p,
.page-form.news > .news_title > div.news_category,
section > .wrapper > .block > .news_item.news_block_list > div > .content_wrapper > div.news_category,
section > .wrapper > .block > .news_item.news_block_list > div > .content_wrapper > h2,
section > .wrapper > .block > .news_item.news_block_list > div > .content_wrapper > span.time {
    margin: 5px 0px;
}

section > .wrapper > .block > .news_item.news_block_list > div > a {
    margin: 20px;
}

/*
news_list
*/

section > .wrapper > .block.news_list_container {
    padding-top: 0px;
}

section > .wrapper > .block.news_list_container > .paginator {
    text-align: right;
}

section > .wrapper > .block.news_list_container > .paginator.top > div:nth-child(1) {
    width: 60%;
    text-align: left;
    padding-left: 20px;
}

section > .wrapper > .block.news_list_container > .paginator.top > div:nth-child(2) {
    width: 40%;
    text-align: right;
}

section > .wrapper > .block > .news_item.news_item.news_list {
    margin: 10px 0px;
}

section > .wrapper > .block > .news_item.news_item.news_list > div > div.news_picture  {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 0px;
    background-color: #D9DBDC;
    width: 170px;
    min-height: 216px;
}

section > .wrapper > .block > .news_item.news_item.news_list > div > .content_wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    /*
    width: calc(100% - 360px);
    */
    width: calc(var(--content-width) - 360px);
    padding: 0px 40px;
}

section > .wrapper > .block > .news_item.news_item.news_list > div > .content_wrapper * {
    max-width: 70%;
}

section > .wrapper > .block > .news_item.news_item.news_list > div > a.button {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

/*
*/

.page-form.news > .news_title {
    padding-bottom: 20px;
    padding-left: 20px;
}
 }  @media only screen and (min-width: 20px) and (max-width: 800px) {  .page-form.news > h1 {
    position: relative;
    display: block;
    margin: 0 auto;
    border: none;
    border-top: solid 3px var(--detail-color);
}

.page-form.news > form {
    position: relative;
    display: block;
    margin: 0 auto;
    text-align: center;
}

.page-form.news > h1 {
    padding-bottom: 00px;
}

.page-form.news > form > .icon {
    display: none;
}

.page-form.news > form > fieldset > input {
    width: auto;
}

.page-form.news > form > a.search {
    font-size: 0px;
}

.page-form.news > form > a > span:after {
    line-height: 100%;
    padding: 0px;
    margin: 0px;
}

section > .wrapper > .block > .news_item > div > .content_wrapper > div.news_category {
    font-size: 11px;
}

/*
header
*/

section > .wrapper > .block > .news_header > div:nth-child(2) {
    padding: 20px 20px;
}

section > .wrapper > .block > .news_item > div {
    display: block;
    width: 100%;
}

section > .wrapper > .block > .news_item.news_header > div > .content_wrapper > h1 {
    font-size: 20px;
}

/*
block_list
*/

section > .wrapper > .block > .news_item.news_block_list {
    padding: 10px 0px;
}

section > .wrapper > .block > .news_item.news_block_list > div  {
    padding: 0px 0px;
}

section > .wrapper > .block > .news_item.news_block_list > div > .content_wrapper {
    padding: 0px 20px;
}

section > .wrapper > .block > .news_item.news_block_list > div > .content_wrapper > h1 {
    font-size: 16px;
}

section > .wrapper > .block > .news_item.news_block_list > div > .content_wrapper > a, 
section > .wrapper > .block > .news_item.news_block_list > div > .content_wrapper > p, 
section > .wrapper > .block > .news_item.news_block_list > div > .content_wrapper > div.news_category, 
section > .wrapper > .block > .news_item.news_block_list > div > .content_wrapper > h1, 
section > .wrapper > .block > .news_item.news_block_list > div > .content_wrapper > span.time {
    margin: 5px 0px;
}

section > .wrapper > .block > .news_item.news_block_list > div > a {
    margin: 10px;
}


/*
news_list
*/

section > .wrapper > .block.news_list_container {
    padding-top: 0px;
}

section > .wrapper > .block.news_list_container > .paginator {
    text-align: center;
}

section > .wrapper > .block > .news_item.news_item.news_list {
    margin: 10px 0px;
}

section > .wrapper > .block > .news_item.news_item.news_list > div > div.news_picture  {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding: 0px;
    background-color: #D9DBDC;
    width: 170px;
    min-height: 216px;

    width: 80px;
    min-height: 95px;
}

section > .wrapper > .block > .news_item.news_item.news_list > div > .content_wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 170px);
    width: calc(100% - 95px);
    padding: 20px;
}

section > .wrapper > .block > .news_item.news_list > div > a.button {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 20px;
}

section > .wrapper > .block > .news_item.news_list > div > .content_wrapper > h1 {
    font-size: 16px;
}

/*
*/

section > .wrapper > .block.news_list_container > .paginator.top > div > div:nth-child(1) {
    font-size: 16px;
    text-align: center;
}

section > .wrapper > .block.news_list_container > .paginator.top > div > div > span {
    font-size: 14px;
}

section > .wrapper > .block.news_list_container > .paginator.top > div > div:nth-child(2) {
    font-size: 12px;
    text-align: center;
}

/*
*/

.page-form.news > .news_title {
    width: auto;
    display: block;
    padding: 10px 0px;
    border-top: solid 1px #323232;
}

.page-form.news > form {
    display: block;
    margin: 0px;
    text-align: left;
}

.page-form.news > .news_title > h1 {
    font-size: 18px;
}

/*
*/

section.noticia > .wrapper > .block > article {
    padding: 10px 0px;
}

section.noticia > .wrapper > .block > article > h1 {
    font-size: 22px;
    text-align: center;
    max-width: 100%;
    padding: 10px 0px;
}

section.noticia > .wrapper > .block > article > iframe {
    height: 80vw;
}

section.noticia > .wrapper > .block > article > div.article-level > span {
    font-size: 12px;
} }  @media only screen and (min-width: 800px) and (max-width: 1330px) {  .page-form.news > form > fieldset > input {
    width: auto;
}

section > .wrapper > .block > .news_header > div:nth-child(1) {
    width: 50%;
}

section > .wrapper > .block > .news_header > div:nth-child(2) {
    width: 50%;
    padding: 20px;
}

/*
block_list
*/

section > .wrapper > .block > .news_item.news_block_list > div  {
    padding: 20px 0px;
}

section > .wrapper > .block > .news_item.news_block_list > div > .content_wrapper > h2 {
    font-size: 16px;
}

section > .wrapper > .block > .news_item.news_block_list > div > .content_wrapper > a, 
section > .wrapper > .block > .news_item.news_block_list > div > .content_wrapper > p, 
.page-form.news > .news_title > div.news_category,
section > .wrapper > .block > .news_item.news_block_list > div > .content_wrapper > div.news_category, 
section > .wrapper > .block > .news_item.news_block_list > div > .content_wrapper > h2, 
section > .wrapper > .block > .news_item.news_block_list > div > .content_wrapper > span.time {
    margin: 5px 00px;
}
 } 
.paginator {
    position: relative;
    display: block;
    padding: 20px 0px;
    text-align: center;
}

.paginator > .paginator_container {
    position: relative;
    display: block;
}

.paginator > .paginator_container a.arrow,
.paginator > a.arrow {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    padding: 5px;
}

.paginator > .paginator_container a.arrow:after,
.paginator > a.arrow:after {
    position: relative;
    display: block;
    color: var(--text-color);
    font-family: "Material Icons";
    font-size: 40px;
    z-index: 2;
}

.paginator > .paginator_container > a.arrow.left:after,
.paginator > a.arrow.left:after {
    content: '';
}

.paginator > .paginator_container > a.arrow.right:after,
.paginator > a.arrow.right:after {
    content: '';
}

.paginator > .paginator_container > input,
.paginator > input {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    color: var(--text-color);
    background-color: var(--background-color);
    padding: 5px;
    border: none;
    width: 60px;
    text-align: center;
}
/*
product-list
*/

.product-list {
    position: relative;
    display: block;
}

.product-list > ul {
    position: relative;
    display: block;
}

.product-list > ul > li {
    position: relative;
    display: inline-block;
    width: 33.3%;
    padding: 10px;
}

.product-list > ul > li > div {
    position: relative;
    display: block;
}

.product-list > ul > li > div > figure {
    position: relative;
    display: block;
    border: solid 1px var(--border-color);
    text-align: center;
    width: 100%;
    background-color: var(--page-background-color);
}

.product-list > ul > li > div > figure > a {
    position: relative;
    display: block;
    padding: 10px;
}

.product-list > ul > li > div > figure > a > img,
.product-list > ul > li > div > figure > img {
    position: relative;
    display: block;
    margin: 0 auto;
    max-width: 100%;

    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;
}

.product-list > ul > li:hover > div > figure > a > img,
.product-list > ul > li:hover > div > figure > img {
    transform: scale(1.05);
}

.product-list > ul > li > div > figure > span {
    position: absolute;
    top: 10px;
    left: -10px;
    font-size: 12px;
    font-weight: bold;
    color: var(--text-color-invert);
    text-transform: uppercase;
    padding: 10px;
}

.product-list > ul > li > div > figure > span.new {
    background-color: var(--detail-color);
}

.product-list > ul > li > div > figure > span.new:after {
    bottom: -9px;
    left: 0px;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #960000 transparent transparent;
    content: '';
}

.product-list > ul > li > div > figure > span.legacy {
    background-color: var(--dark-background-color);
}

.product-list > ul > li > div > figure > span.legacy:after {
    bottom: -9px;
    left: 0px;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #000000 transparent transparent;
    content: '';
}

.product-list > ul > li > div > figure > a.evaluate {
    display: table;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.product-list > ul > li > div > a.remove-compare {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
   /*
    z-index: 2;
    */
}

.product-list > ul > li > div > a.remove-compare:after {
    position: relative;
    display: block;
    content: '';
    color: var(--text-color);
    font-size: 28px;
    font-family: "Material Icons";
}

.product-list > ul > li > div > h4 {
    position: relative;
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
    text-align: left;
    text-transform: uppercase;
    padding-top: 10px;
}

.product-list > ul > li > div > h4 > a {
    font-size: inherit;
    color: inherit;
    text-transform: inherit;
    text-transform: inherit;
}

.product-list > ul > li > div > p {
    position: relative;
    display: block;
    font-size: 12px;
    color: var(--text-color);
    
    text-align: left;
    padding: 10px 0px;
    line-height: 120%;
}

.product-list > ul > li > div > p > a {
    font-size: inherit;
    color: inherit;
    text-transform: inherit;
    text-transform: inherit;
}

/*
product-video
*/

section > .wrapper > .block > .product-video {
    position: relative;
    display: block;
}

section > .wrapper > .block > .product-video > div {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

section > .wrapper > .block > .product-video > div > iframe {
    position: relative;
    display: block;
    width: 100%;
    height: 500px;
}

section > .wrapper > .block > .product-video > div:nth-child(1) {
    width: 70%;
}

section > .wrapper > .block > .product-video > div:nth-child(2) {
    width: 30%;
    padding-left: 30px;
}

section > .wrapper > .block > .product-video > div > figure {
    position: relative;
    display: block;
}

section > .wrapper > .block > .product-video > div > figure > img {
    position: relative;
    display: block;
    max-width: 100%;
}

/*
box-tile
*/

section > .wrapper > .block > .box-tile {
    position: relative;
    display: block;
    padding: 20px 0px;
}

section > .wrapper > .block > .box-tile > div {
    position: relative;
    display: inline-block;
    width: 33.3%;
    padding: 10px;
    vertical-align: top;
}

section > .wrapper > .block > .box-tile > div > span {
    position: relative;
    display: block;
    padding: 20px;
    background-color: var(--light-background-color);
    border-radius: 10px;   
}

section > .wrapper > .block > .box-tile > div > span > figure {
    position: relative;
    display: block;
    width: 100%;
}

section > .wrapper > .block > .box-tile > div > span > figure > img {
    position: relative;
    display: block;
    max-width: 100%;
    width: 100%;
}

section > .wrapper > .block > .box-tile > div > span > p.category {
    position: relative;
    display: block;
    color: #fff;
    padding: 10px;
    width: auto;
    font-size: 14px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}

section > .wrapper > .block > .box-tile > div > span > p.category.tips {
    background-color: #712a2a;
}

section > .wrapper > .block > .box-tile > div > span > p.category.blog {
    background-color: #f35758;
}

section > .wrapper > .block > .box-tile > div > span > p.category.tutorial {
    background-color: #cc0001;
}

/*
product figure
*/

section > .wrapper > .block > .product-figure {
    position: relative;
    display: block;
}

section > .wrapper > .block > .product-figure > div {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

section > .wrapper > .block > .product-figure > div > figure {
    position: relative;
    display: block;
}

section > .wrapper > .block > .product-figure > div > figure > img {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
}

section > .wrapper > .block > .product-figure > div:nth-child(2) {
    width: 70%;
}

section > .wrapper > .block > .product-figure > div:nth-child(1) {
    width: 30%;
    padding-left: 30px;
}

/*
text
*/

section > .wrapper > .block > h4 {
    position: relative;
    display: block;
    margin: 0 auto;
    font-size: 30px;
    font-weight: bold;
    color: var(--text-color);
    text-align: center;
    padding: 42px 0px;
    text-transform: none;
}

/*
tech
*/

section > .wrapper > .block > .product-tech > .paginator {
    display: none;
}

section > .wrapper > .block > .product-tech > ul {
    position: relative;
    display: block;
}

section > .wrapper > .block > .product-tech > ul > li {
    position: relative;
    display: inline-block;
    width: 33.3%;
    vertical-align: top;
    padding: 20px 0px;
}

section > .wrapper > .block > .product-tech > ul > li > div {
    position: relative;
    display: block;
}

section > .wrapper > .block > .product-tech > ul > li > div > figure {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 20%;
}

section > .wrapper > .block > .product-tech > ul > li > div > figure > img {
    position: relative;
    display: block;
    max-width: 100%;
}

section > .wrapper > .block > .product-tech > ul > li > div > span {
    position: relative;
    display: inline-block;
    vertical-align: top;
    padding:0px 20px;
    width:calc(80% - 40px);
}

section > .wrapper > .block > .product-tech > ul > li > div > span > h5 {
    position: relative;
    display: block;
    margin: 0 auto;
    font-size: 20px;
    font-weight: bold;
    color: var(--text-color);
    text-align: left;
    text-transform: uppercase;
}

section > .wrapper > .block > .product-tech > ul > li > div > span > p {
    position: relative;
    display: block;
    font-size: 12px;
    color: var(--text-color);
    text-align: left;
    padding: 10px 0px;
    line-height: 120%;
}

/*
specs
*/

section > .wrapper > .block > .product-specs {
    position: relative;
    display: block;
    text-align: right;
    max-width: 80%;
    margin: 0 auto;
}


section > .wrapper > .block > .product-specs > a.expand-all {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 12px;
    color: var(--text-color);
}

section > .wrapper > .block > .product-specs > a.expand-all:after {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 28px;
    color: var(--text-color);
    font-family: "Material Icons";
    content: '';
}

section > .wrapper > .block > .product-specs > ul {
    position: relative;
    display: block;
    text-align: left;
}

section > .wrapper > .block > .product-specs > ul > li {
    position: relative;
    display: block;
    padding-bottom: 2px;
}

section > .wrapper > .block > .product-specs > ul > li > h2 {
    position: relative;
    display: block;
    background-color: var(--light-background-color);
    cursor: pointer;
    padding: 0;

    -o-transition:.8s;
    -ms-transition:.8s;
    -moz-transition:.8s;
    -webkit-transition:.8s;
    transition:.8s;
}

section > .wrapper > .block > .product-specs > ul > li.active > h2 ,
section > .wrapper > .block > .product-specs > ul > li:hover > h2 {
    background-color: var(--detail-color);
}

section > .wrapper > .block > .product-specs > ul > li.active > h2 > span ,
section > .wrapper > .block > .product-specs > ul > li:hover > h2 > span {
    color: var(--text-color-invert);
}

section > .wrapper > .block > .product-specs > ul > li > h2:after {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 18px;
    font-family: "Material Icons";
    color: var(--text-color);
    content:"";
}

section > .wrapper > .block > .product-specs > ul > li:hover > h2:after ,
section > .wrapper > .block > .product-specs > ul > li.active > h2:after {
    color: var(--text-color-invert);
}

section > .wrapper > .block > .product-specs > ul > li.active > h2:after {
    content: '';
}

section > .wrapper > .block > .product-specs > ul > li > h2 > span {
    position: relative;
    display: block;
    padding: 20px;
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
}

section > .wrapper > .block > .product-specs > ul > li > ul {
    position: relative;
    display: none;
}

section > .wrapper > .block > .product-specs > ul > li.active > ul {
    display: block;
}

section > .wrapper > .block > .product-specs > ul > li > ul > li {
    position: relative;
    display: block;
    padding: 10px 20px;
}

section > .wrapper > .block > .product-specs > ul > li > ul > li:nth-child(even) {
    background-color: var(--light-background-color);
}


section > .wrapper > .block > .product-specs > ul > li > ul > li > span  {
    position: relative;
    display: inline-block;
    width: 50%;
    position: relative;
    font-size: 12px;
    color: var(--text-color);
    text-align: left;
    line-height: 120%;
    
}

section > .wrapper > .block > .product-specs > ul > li > ul > li > div > span:nth-child(1) ,
section > .wrapper > .block > .product-specs > ul > li > ul > li > span:nth-child(1) {
    font-weight: bold;
}

/*
compare
*/

section > .wrapper > .block > .product-specs > ul > li > ul > li > div {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    max-width: 33.3%;
    width: 33.3%;
}

section > .wrapper > .block > .product-specs > ul > li > ul > li > div > span {
    position: relative;
    display: block;
    width: auto;
    position: relative;
    font-size: 12px;
    color: var(--text-color);
    text-align: left;
    line-height: 120%;
}


/*
doc-slider
*/

section > .wrapper > .block > .doc-slider {
    position: relative;
    display: block;
    padding: 20px 80px;
}

section > .wrapper > .block > .doc-slider > div.container {
    position: relative;
    display: block;
    background-color: var(--light-background-color);
    /*padding: 20px 60px;*/
    overflow: hidden;
    border: solid 20px var(--light-background-color);
}

section > .wrapper > .block > .doc-slider > div.container > ul {
    position: relative;
    display: block;
    /*overflow: hidden;*/
}

section > .wrapper > .block > .doc-slider > div.container > ul > li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    background-color: transparent;
}

section > .wrapper > .block > .doc-slider > div.container > ul > li > figure {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 100px;
}

section > .wrapper > .block > .doc-slider > div.container > ul > li > figure > img {
    position: relative;
    display: block;
    max-width: 100%;
}

section > .wrapper > .block > .doc-slider > div.container > ul > li > span {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 100px);
}

/*
sample-slider
*/

section > .wrapper > .block > .sample-slider {
    position: relative;
    display: block;
    padding: 20px 80px;
}

section > .wrapper > .block > .sample-slider > div.container {
    position: relative;
    display: block;
    /*padding: 20px 60px;*/
    overflow: hidden;
}

section > .wrapper > .block > .sample-slider > div.container > ul {
    position: relative;
    display: block;
    min-height: 260px;
    
}

section > .wrapper > .block > .sample-slider > div.container > ul > li {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 50%;
    background-color: var(--page-background-color);
    padding: 20px;
}

section > .wrapper > .block > .sample-slider > div.container > ul > li > figure {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 200px;
    background-color: var(--light-background-color);
}

section > .wrapper > .block > .sample-slider > div.container > ul > li > figure > img {
    position: relative;
    display: block;
    max-width: 100%;
}

section > .wrapper > .block > .sample-slider > div.container > ul > li > figure > figcaption {
    position: relative;
   display: block;
   font-size: 12px;
   color: var(--text-color);
   
   text-align: left;
   padding: 10px 0px;
   line-height: 120%;
   text-transform: uppercase;
   background-color: var(--page-background-color);
}

section > .wrapper > .block > .sample-slider > div.container > ul > li > span {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 240px);
    padding: 0px 20px;
}

section > .wrapper > .block > .sample-slider > div.container > ul > li > span > a {
    display: block;
    margin: 10px 0px;
    width: 150px !important;
    text-align: center;
}


/*
cartridge-list
*/

.cartridge-list {
    position: relative;
    display: block;
}

.cartridge-list > ul {
    position: relative;
    display: block;
}

.cartridge-list > ul > li {
    position: relative;
    display: inline-block;
    width: 33.3%;
    padding: 10px;
}

.cartridge-list > ul > li.selected {
    opacity: 1;
}

.cartridge-list:not(.no-mark) > ul > li.not-selected {
    opacity: .3;
}

.cartridge-list > ul > li > div {
    position: relative;
    display: block;
}

.cartridge-list > ul > li > div > figure {
    position: relative;
    display: block;
    text-align: center;
    padding: 10px;
    background-color: var(--page-background-color);
}

.cartridge-list > ul > li > div > figure > a {
    position: relative;
    display: block;
}

.cartridge-list > ul > li > div > figure > a > img,
.cartridge-list > ul > li > div > figure > img {
    position: relative;
    display: block;
    margin: 0 auto;
    max-width: 100%;

    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;

    max-width: 60%;
    margin: 0 auto;
}

.cartridge-list > ul > li:hover > div > figure > a > img,
.cartridge-list > ul > li:hover > div > figure > img {
    transform: scale(1.05);
}

.cartridge-list > ul > li > div > figure > span {
    position: absolute;
    top: 10px;
    left: -10px;
    font-size: 12px;
    font-weight: bold;
    color: var(--text-color-invert);
    text-transform: uppercase;
    padding: 10px;
}

.cartridge-list > ul > li > div > figure > span.new {
    background-color: var(--detail-color);
}

.cartridge-list > ul > li > div > figure > span.new:after {
    bottom: -10px;
    left: 0px;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #960000 transparent transparent;
    content: '';
}

.cartridge-list > ul > li > div > figure > span.legacy {
    background-color: var(--dark-background-color);
}

.cartridge-list > ul > li > div > figure > span.legacy:after {
    bottom: -10px;
    left: 0px;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 0;
    border-color: transparent #000000 transparent transparent;
    content: '';
}

.cartridge-list > ul > li > div > h4 {
    position: relative;
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: var(--text-color);
    text-align: center;
    padding-top: 10px;
    text-transform: none;
}

.cartridge-list > ul > li > div > h4 > a {
    font-size: inherit;
    color: inherit;
    text-transform: inherit;
    text-transform: inherit;
}

.cartridge-list > ul > li > div > p {
    position: relative;
    display: block;
    font-size: 12px;
    color: var(--text-color);
    
    text-align: left;
    padding: 10px 0px;
    line-height: 120%;
}

.cartridge-list > ul > li > div > p > a {
    font-size: inherit;
    color: inherit;
    text-transform: inherit;
    text-transform: inherit;
}

.cartridge-list > .paginator {
    position: absolute;
    pointer-events: none;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translateY(-50%) translateX(-50%);
    display: block !important;
}

.cartridge-list > .paginator > input {
    display: none;
}

.cartridge-list > .paginator > a.arrow {
    pointer-events: all;
    position: absolute;
}

.cartridge-list > .paginator > a.arrow:after {
    font-size: 80px;
}

.cartridge-list > .paginator > a.arrow.left {
    left: 10px;
}

.cartridge-list > .paginator > a.arrow.right {
    right: 10px;
} @media only screen and (min-width: 800px) and (max-width: 10000px) {  section > .wrapper > .block > .box-tile  {
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    overflow: hidden;
    padding: 20px 0px;
}

section > .wrapper > .block > .box-tile > div {
    position: relative;
    width: 33.3%;
    padding: 10px;
    vertical-align: top;
    float: left;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

section > .wrapper > .block > .box-tile > div > span {
    width: 100%;
} }  @media only screen and (min-width: 20px) and (max-width: 800px) {  section > .wrapper > .block > .product-video > div {
    display: block;
    width: 100%!important;
}

section > .wrapper > .block > .box-tile > div {
    display: block;
    width: 100%;
}

.product-list > ul > li > div > h4 {
    padding-bottom: 20px;
}



.product-list > ul > li > div > figure > span {
    font-size: 11px;
}

section > .wrapper > .block > .product-figure > div {
    display: block;
    width: 100% !important;
    text-align: center;
    padding: 10px!important;
}

section > .wrapper > .block > h4 {
    font-size: 24px;
}

/*
*/

section > .wrapper > .block > .product-specs {
    max-width: 100%;
}

section > .wrapper > .block > .product-specs > ul > li > h2 > span {
    padding: 10px;
    text-align: left;
    font-size: 14px;
}

section > .wrapper > .block > .product-specs > ul > li > ul > li > div {
    width: 50%;
    max-width: 50%;
}

/*
*/

section > .wrapper > .block > .doc-slider {
    padding: 0px;
}

/*
samples
*/

section > .wrapper > .block > .sample-slider {
    padding: 0px;
}

section > .wrapper > .block > .sample-slider > div.container > ul > li > span,
section > .wrapper > .block > .sample-slider > div.container > ul > li > figure {
    width: 100%;
    display: block;
    margin: 10px 0px;
    padding-left: 0px;
}

section > .wrapper > .block > .sample-slider > div.container > ul > li > figure > img {
    width: 100%;
}

section > .wrapper > .block > .sample-slider > div.container > ul > li > span > a {
    margin: 10px auto;
} } 
/*
section
*/

section {
    padding: 98px 0px 20px;
}

section.produto {
    padding: 240px 0px 20px;
}

section.produtos {
    padding: 176px 0px 20px;
}

section.cartucho {
    padding: 280px 0px 20px;
}

section.breadcrumb {
    padding: 166px 0px 20px;
}

section > .wrapper {
    position: relative;
    display: block;
}

section > .wrapper > .block {
    position: relative;
    display: block;
    padding: 10px 0px;
}


section  > .wrapper.wrapper-expander > .block {
    position: relative;
    display: none;
    padding: 10px 0px;
}


section > .wrapper.wrapper-expander > .block.active {
    display: block;
}

section > .wrapper > .block * {
    /*font-size: 12px;*/

}

section > .wrapper > .block.no-space {
    padding: 0px;
}

section > .wrapper > .block > h1 {
    position: relative;
    display: block;
    margin: 0 auto;
    font-size: 20px;
    font-weight: bold;
    color: var(--text-color);
    text-align: center;
    text-transform: uppercase;
    padding: 10px 0px;
}

section > .wrapper > .block > figure {
    position: relative;
    display: block;
    padding: 20px 0px;
    text-align: center;
}

section > .wrapper > .block > figure > img {
    position: relative;
    display: block;
    margin: 0 auto;
    max-width: 100%;
 
}

section > .wrapper > .block > figure.full-size > img {
    width: 100%;
}

/*
article preview
*/

.article-preview {
    position: relative;
    display: block;
    padding: 10px;
    background-color: var(--page-background-color);
}

.article-preview > figure {
    position: relative;
    display: block;
}

.article-preview > figure > img {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 20px;

    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;
}

.article-preview:hover > figure > img {
    transform: scale(1.02);
}/*
section
*/


section {

}
 @media only screen and (min-width: 20px) and (max-width: 800px) {  /*
section
*/

section.produto,
section.produtos,
section.breadcrumb,
section.cartucho,
section {
    padding: var(--header-height) 10px 20px;
  } } /*
carousel
*/

.carousel {
    position: relative;
    display: block;
    width: 100%;
}

.carousel > .container {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
}

.carousel > .container > .slider {
    position: relative;
    display: block;
    width: 100%;
    background-color: var(--dark-border-color);
}

.carousel > .container > .slider > ul {
    position: relative;
    display: block;
    width: 100%;
    -o-transition:1.2s;
    -ms-transition:1.2s;
    -moz-transition:1.2s;
    -webkit-transition:1.2s;
    transition:1.2s;
    transform-origin: center;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    perspective: 800px;
}

.carousel > .container > .slider > ul > li {
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    width: var(--content-width);
    height: auto;
    left: 0px;
    left: var(--content-width-negative);
    -o-transition:1.2s;
    -ms-transition:1.2s;
    -moz-transition:1.2s;
    -webkit-transition:1.2s;
    transition:1.2s;
    height: inherit;
}

.carousel > .container > .slider > ul > li.first {
    z-index: 2;
}

.carousel > .container > .slider > ul > li.active + li {
    left: var(--content-width);
}

.carousel > .container > .slider > ul > li.active + li + li {
    left: calc(var(--content-width) * 2);
}

.carousel > .container > .slider > ul > li.active + li + li + li {
    left: calc(var(--content-width) * 3);
}

.carousel > .container > .slider > ul > li.active + li + li + li + li {
    left: calc(var(--content-width) * 4);
}

.carousel > .container > .slider > ul > li.active + li + li + li + li ~ li {
    left: calc(var(--content-width) * 5);
}

.carousel > .container > .slider > ul > li.active {
    position: relative;
    left: 0px;
}

.carousel > .container > .slider > ul > li > figure,
.carousel > .container > .slider > ul > li > a {
    position: relative;
    display: block;
}

.carousel > .container > .slider > ul > li > figure {
	margin: 0 0 0rem !important;
}

.carousel > .container > .slider > ul {
	padding-left: 0rem !important;
}


.carousel > .container > .slider > ul > li > a > figure {
    position: relative;
    display: block;
    width: 100%;
	margin: 0px 0px 0px -9px !important;
}

.carousel > .container > .slider > ul > li > figure > img ,
.carousel > .container > .slider > ul > li > a > figure > img {
    position: relative;
    display: block;
    width: 100%;
}

.carousel > .container > .dot-navigator {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
}

.carousel > .container > .dot-navigator > ul > li {
    padding: 5px 10px;
}

.carousel > .container > a.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
}

.carousel > .container > a.arrow:after {
    position: relative;
    display: block;
    
    /*color: var(--text-color-invert);*/
	
	color: #c00;
    font-family: "Material Icons";
    font-size: 40px;
}

.carousel > .container > a.arrow.left {
    left: 10px;
}

.carousel > .container > a.arrow.left:after {
    content:'';    
}

.carousel > .container > a.arrow.right {
    right: 10px;
}

.carousel > .container > a.arrow.right:after {
    content: '';
}

/*
dot-navigator
*/

.dot-navigator {
    position: relative;
    display: block;
}

.dot-navigator > ul {
    position: relative;
    display: block;
    padding: 10px 0px;
    text-align: center;
}

.dot-navigator > ul > li {
    position: relative;
    display: inline-block;
    padding: 5px;
}

.dot-navigator > ul > li.hidded {
    display: none;
}

.dot-navigator > ul > li > a {
    position: relative;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: var(--dot-background-color);
    border: solid 2px var(--dot-border-color);

    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;
}

.dot-navigator > ul > li:hover > a,
.dot-navigator > ul > li.active > a {
    background-color: var(--dot-active-background-color);
    border: solid 1px var(--dot-active-border-color);
}

/*
content slider slider
*/

.content-slider {
    overflow: hidden;
}

.content-slider > .dot-navigator {
    display: none;
}

/*
*/
/*
.slider-parent {
    overflow: hidden;
}
*/

/*
*/

/*
.to_turn {
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%);
}
.to_turn[data-direction="left"] {
    transform: rotateY(5deg);
    -webkit-transform: rotateY(5dfeg);
    -ms-transform: rotateY(5deg);
}
.to_turn[data-direction="right"] {
    transform: rotateY(-5deg);
    -webkit-transform: rotateY(-5deg);
    -ms-transform: rotateY(-5deg);
}
*/

.content-swiper {
    cursor: grab!important;
}

.slider > li.slider-child {
    height: inherit!important;
}


.slider > .slider-child > div > figure > a {
    position: relative;
    display: block;
    background-color: transparent;
    padding: 0px;
}

.slider > .slider-child > div > figure > a:after,
.slider > .slider-child > div > figure > a:before {
    display: none;
}

.slider > .slider-child > div > figure > a > img {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
} @media only screen and (min-width: 800px) and (max-width: 10000px) {  
/*
article slider
*/

.article-list > .table .col {
    -o-transition:1.2s;
    -ms-transition:1.2s;
    -moz-transition:1.2s;
    -webkit-transition:1.2s;
    transition:1.2s;
}

.article-list > .table .col:not(.active) {
    /*display: none;*/
    position: absolute;
    /*left: calc(var(--content-width-negative) / 3);*/
}

.article-list > .table .col.active + .col + .col,
.article-list > .table .col.active + .col,
.article-list > .table .col.active {
    display: inline-block;
}

.article-list > .table .col.active {
    /*left:0px;*/
    position: relative;
}

.article-list > .table .col {
    left: calc((var(--content-width-negative)/3) * 5);
}
.article-list > .table .col[data-depth="-5"] {
    left: calc((var(--content-width-negative)/3) * 5);
}
.article-list > .table .col[data-depth="-4"] {
    left: calc((var(--content-width-negative)/3) * 4);
}
.article-list > .table .col[data-depth="-3"] {
    left: calc((var(--content-width-negative)/3) * 3);
}
.article-list > .table .col[data-depth="-2"] {
    left: calc((var(--content-width-negative)/3) * 2);
}
.article-list > .table .col[data-depth="-1"] {
    left: calc((var(--content-width-negative)/3) * 1);
}
.article-list > .table .col[data-depth="0"] {
    left: 0;
}
.article-list > .table .col[data-depth="1"] {
    left: calc(var(--content-width)/3);
}
.article-list > .table .col[data-depth="2"] {
    left: calc((var(--content-width)/3) * 2);
}
.article-list > .table .col[data-depth="3"] {
    left: calc((var(--content-width)/3) * 3);
}
.article-list > .table .col[data-depth="4"] {
    left: calc((var(--content-width)/3) * 4);
}
.article-list > .table .col[data-depth="5"] {
    left: calc((var(--content-width)/3) * 5);
}
.article-list > .table .col[data-depth="6"] {
    left: calc((var(--content-width)/3) * 6);
}
.article-list > .table .col[data-depth="6"] ~ .col {
    left: calc((var(--content-width)/3) * 7);
}

/*
product slider
*/

.product-list > ul > li {
    -o-transition:1.2s;
    -ms-transition:1.2s;
    -moz-transition:1.2s;
    -webkit-transition:1.2s;
    transition:1.2s;
}

.product-list > ul > li:not(.active) {
    /*display: none;*/
    position: absolute;
}

.product-list > ul > li.active + li + li,
.product-list > ul > li.active + li,
.product-list > ul > li.active {
    display: inline-block;
}

.product-list > ul > li.active {
    left:0px;
    position: relative;
}

.product-list > ul > li {
    left: calc((var(--content-width-negative)/3) * 5);
}
.product-list > ul > li[data-depth="-5"] {
    left: calc((var(--content-width-negative)/3) * 5);
}
.product-list > ul > li[data-depth="-4"] {
    left: calc((var(--content-width-negative)/3) * 4);
}
.product-list > ul > li[data-depth="-3"] {
    left: calc((var(--content-width-negative)/3) * 3);
}
.product-list > ul > li[data-depth="-2"] {
    left: calc((var(--content-width-negative)/3) * 2);
}
.product-list > ul > li[data-depth="-1"] {
    left: calc((var(--content-width-negative)/3) * 1);
}
.product-list > ul > li[data-depth="0"] {
    left: 0;
}
.product-list > ul > li[data-depth="1"] {
    left: calc(var(--content-width)/3);
}
.product-list > ul > li[data-depth="2"] {
    left: calc((var(--content-width)/3) * 2);
}
.product-list > ul > li[data-depth="3"] {
    left: calc((var(--content-width)/3) * 3);
}
.product-list > ul > li[data-depth="4"] {
    left: calc((var(--content-width)/3) * 4);
}
.product-list > ul > li[data-depth="5"] {
    left: calc((var(--content-width)/3) * 5);
}
.product-list > ul > li[data-depth="6"] {
    left: calc((var(--content-width)/3) * 6);
}
.product-list > ul > li[data-depth="6"] ~ li {
    left: calc((var(--content-width)/3) * 7);
}

/*
doc slider
*/

section > .wrapper > .block > .doc-slider > div.container > ul > li {
    /*display: none;*/
    -o-transition:1.2s;
    -ms-transition:1.2s;
    -moz-transition:1.2s;
    -webkit-transition:1.2s;
    transition:1.2s;
}

section > .wrapper > .block > .doc-slider > div.container > ul > li:not(.active) {
    position: absolute;
}

section > .wrapper > .block > .doc-slider > div.container > ul > li.active + li,
section > .wrapper > .block > .doc-slider > div.container > ul > li.active {
    display: inline-block;
}

section > .wrapper > .block > .doc-slider > div.container > ul > li.active {
    position: relative;
}

section > .wrapper > .block > .doc-slider > div.container > ul > li {
    left: calc((var(--content-width-negative)/2) * 5);
}
section > .wrapper > .block > .doc-slider > div.container > ul > li[data-depth="-5"] {
    left: calc((var(--content-width-negative)/2) * 5);
}
section > .wrapper > .block > .doc-slider > div.container > ul > li[data-depth="-4"] {
    left: calc((var(--content-width-negative)/2) * 4);
}
section > .wrapper > .block > .doc-slider > div.container > ul > li[data-depth="-3"] {
    left: calc((var(--content-width-negative)/2) * 3);
}
section > .wrapper > .block > .doc-slider > div.container > ul > li[data-depth="-2"] {
    left: calc((var(--content-width-negative)/2) * 2);
}
section > .wrapper > .block > .doc-slider > div.container > ul > li[data-depth="-1"] {
    left: calc((var(--content-width-negative)/2) * 1);
}
section > .wrapper > .block > .doc-slider > div.container > ul > li[data-depth="0"] {
    left: 0;
}
section > .wrapper > .block > .doc-slider > div.container > ul > li[data-depth="1"] {
    left: calc(var(--content-width)/2);
}
section > .wrapper > .block > .doc-slider > div.container > ul > li[data-depth="2"] {
    left: calc((var(--content-width)/2) * 2);
}
section > .wrapper > .block > .doc-slider > div.container > ul > li[data-depth="3"] {
    left: calc((var(--content-width)/2) * 3);
}
section > .wrapper > .block > .doc-slider > div.container > ul > li[data-depth="4"] {
    left: calc((var(--content-width)/2) * 4);
}
section > .wrapper > .block > .doc-slider > div.container > ul > li[data-depth="5"] {
    left: calc((var(--content-width)/2) * 5);
}
section > .wrapper > .block > .doc-slider > div.container > ul > li[data-depth="6"] {
    left: calc((var(--content-width)/2) * 6);
}
section > .wrapper > .block > .doc-slider > div.container > ul > li[data-depth="6"] ~ li {
    left: calc((var(--content-width)/2) * 7);
}

/*
image sample slider
*/

section > .wrapper > .block > .sample-slider > div.container > ul > li {
    /*display: none;*/
    -o-transition:1.2s;
    -ms-transition:1.2s;
    -moz-transition:1.2s;
    -webkit-transition:1.2s;
    transition:1.2s;
}

section > .wrapper > .block > .sample-slider > div.container > ul > li:not(.active) {
    position: absolute;
}

section > .wrapper > .block > .sample-slider > div.container > ul > li.active {
    position: relative;
}

section > .wrapper > .block > .sample-slider > div.container > ul > li {
    left: calc((var(--content-width-negative)/2) * 5);
}
section > .wrapper > .block > .sample-slider > div.container > ul > li[data-depth="-5"] {
    left: calc((var(--content-width-negative)/2) * 5);
}
section > .wrapper > .block > .sample-slider > div.container > ul > li[data-depth="-4"] {
    left: calc((var(--content-width-negative)/2) * 4);
}
section > .wrapper > .block > .sample-slider > div.container > ul > li[data-depth="-3"] {
    left: calc((var(--content-width-negative)/2) * 3);
}
section > .wrapper > .block > .sample-slider > div.container > ul > li[data-depth="-2"] {
    left: calc((var(--content-width-negative)/2) * 2);
}
section > .wrapper > .block > .sample-slider > div.container > ul > li[data-depth="-1"] {
    left: calc((var(--content-width-negative)/2) * 1);
}
section > .wrapper > .block > .sample-slider > div.container > ul > li[data-depth="0"] {
    left: 0;
}
section > .wrapper > .block > .sample-slider > div.container > ul > li[data-depth="1"] {
    left: calc(var(--content-width)/2);
}
section > .wrapper > .block > .sample-slider > div.container > ul > li[data-depth="2"] {
    left: calc((var(--content-width)/2) * 2);
}
section > .wrapper > .block > .sample-slider > div.container > ul > li[data-depth="3"] {
    left: calc((var(--content-width)/2) * 3);
}
section > .wrapper > .block > .sample-slider > div.container > ul > li[data-depth="4"] {
    left: calc((var(--content-width)/2) * 4);
}
section > .wrapper > .block > .sample-slider > div.container > ul > li[data-depth="5"] {
    left: calc((var(--content-width)/2) * 5);
}
section > .wrapper > .block > .sample-slider > div.container > ul > li[data-depth="6"] {
    left: calc((var(--content-width)/2) * 6);
}
section > .wrapper > .block > .sample-slider > div.container > ul > li[data-depth="6"] ~ .col {
    left: calc((var(--content-width)/2) * 7);
}

/*
section > .wrapper > .block > .sample-slider > div.container > ul > li.active + li {
    left: calc(var(--content-width)/2);
}

section > .wrapper > .block > .sample-slider > div.container > ul > li.active + li + li {
    left: calc(var(--content-width)/2 * 2);
}

section > .wrapper > .block > .sample-slider > div.container > ul > li.active + li + li ~ li {
    left: calc(var(--content-width)/2 * 3);
}
*/

/*
product slider
*/

.cartridge-list > ul > li {
    -o-transition:1.2s;
    -ms-transition:1.2s;
    -moz-transition:1.2s;
    -webkit-transition:1.2s;
    transition:1.2s;
}

.cartridge-list > ul > li:not(.active) {
    /*display: none;*/
    position: absolute;
}

.cartridge-list > ul > li.active + li + li,
.cartridge-list > ul > li.active + li,
.cartridge-list > ul > li.active {
    display: inline-block;
}

.cartridge-list > ul > li.active {
    position: relative;
}

.cartridge-list > ul > li {
    left: calc((var(--content-width-negative)/3) * 5);
}
.cartridge-list > ul > li[data-depth="-5"] {
    left: calc((var(--content-width-negative)/3) * 5);
}
.cartridge-list > ul > li[data-depth="-4"] {
    left: calc((var(--content-width-negative)/3) * 4);
}
.cartridge-list > ul > li[data-depth="-3"] {
    left: calc((var(--content-width-negative)/3) * 3);
}
.cartridge-list > ul > li[data-depth="-2"] {
    left: calc((var(--content-width-negative)/3) * 2);
}
.cartridge-list > ul > li[data-depth="-1"] {
    left: calc((var(--content-width-negative)/3) * 1);
}
.cartridge-list > ul > li[data-depth="0"] {
    left: 0;
}
.cartridge-list > ul > li[data-depth="1"] {
    left: calc(var(--content-width)/3);
}
.cartridge-list > ul > li[data-depth="2"] {
    left: calc((var(--content-width)/3) * 2);
}
.cartridge-list > ul > li[data-depth="3"] {
    left: calc((var(--content-width)/3) * 3);
}
.cartridge-list > ul > li[data-depth="4"] {
    left: calc((var(--content-width)/3) * 4);
}
.cartridge-list > ul > li[data-depth="5"] {
    left: calc((var(--content-width)/3) * 5);
}
.cartridge-list > ul > li[data-depth="6"] {
    left: calc((var(--content-width)/3) * 6);
}
.cartridge-list > ul > li[data-depth="6"] ~ li {
    left: calc((var(--content-width)/3) * 7);
}


 }  @media only screen and (min-width: 20px) and (max-width: 800px) {  .carousel > .container > .slider > ul > li {
    -o-transition:.8s;
    -ms-transition:.8s;
    -moz-transition:.8s;
    -webkit-transition:.8s;
    transition:.8s;
}

.content-slider:not(.no-mobile) {
    position: relative;
    display: block;
}

.content-slider:not(.no-mobile) .slider-parent {
    position: relative;
}

.content-slider:not(.no-mobile) .slider-parent > .slider-child {
    position: absolute!important;
    display: inline-block!important;
    vertical-align: middle;
    width: var(--content-width)!important;;
    /*height: auto!important;;*/
    background-color: var(--page-background-color);
    -o-transition:.8s;
    -ms-transition:.8s;
    -moz-transition:.8s;
    -webkit-transition:.8s;
    transition:.8s;
}

.content-slider:not(.no-mobile) .slider-parent > .slider-child.active {
    position: relative!important;;
}

.content-slider:not(.no-mobile) .slider-parent > .slider-child {
    left: calc((var(--content-width-negative)/1) * 5);
}
.content-slider:not(.no-mobile) .slider-parent > .slider-child[data-depth="-5"] {
    left: calc((var(--content-width-negative)/1) * 5);
}
.content-slider:not(.no-mobile) .slider-parent > .slider-child[data-depth="-4"] {
    left: calc((var(--content-width-negative)/1) * 4);
}
.content-slider:not(.no-mobile) .slider-parent > .slider-child[data-depth="-3"] {
    left: calc((var(--content-width-negative)/1) * 3);
}
.content-slider:not(.no-mobile) .slider-parent > .slider-child[data-depth="-2"] {
    left: calc((var(--content-width-negative)/1) * 2);
}
.content-slider:not(.no-mobile) .slider-parent > .slider-child[data-depth="-1"] {
    left: calc((var(--content-width-negative)/1) * 1);
}
.content-slider:not(.no-mobile) .slider-parent > .slider-child[data-depth="0"] {
    left: 0;
}
.content-slider:not(.no-mobile) .slider-parent > .slider-child[data-depth="1"] {
    left: calc(var(--content-width)/1);
}
.content-slider:not(.no-mobile) .slider-parent > .slider-child[data-depth="2"] {
    left: calc((var(--content-width)/1) * 2);
}
.content-slider:not(.no-mobile) .slider-parent > .slider-child[data-depth="3"] {
    left: calc((var(--content-width)/1) * 3);
}
.content-slider:not(.no-mobile) .slider-parent > .slider-child[data-depth="4"] {
    left: calc((var(--content-width)/1) * 4);
}
.content-slider:not(.no-mobile) .slider-parent > .slider-child[data-depth="5"] {
    left: calc((var(--content-width)/1) * 5);
}
.content-slider:not(.no-mobile) .slider-parent > .slider-child[data-depth="6"] {
    left: calc((var(--content-width)/1) * 6);
}
.content-slider:not(.no-mobile) .slider-parent > .slider-child[data-depth="6"] ~ .slider-child {
    left: calc((var(--content-width)/1) * 7);
}

.content-slider:not(.no-mobile) > .paginator {
    display: none;
}

.content-slider:not(.no-mobile) > .dot-navigator {
    display: block;
}

/*
two-cols
*/

.content-slider.two-cols .slider-parent > .slider-child {
    width: calc((var(--content-width)/2) )!important;;
}

.content-slider.two-cols .slider-parent > .slider-child {
    left: calc((var(--content-width-negative)/2) * 5);
}
.content-slider.two-cols .slider-parent > .slider-child[data-depth="-5"] {
    left: calc((var(--content-width-negative)/2) * 5);
}
.content-slider.two-cols .slider-parent > .slider-child[data-depth="-4"] {
    left: calc((var(--content-width-negative)/2) * 4);
}
.content-slider.two-cols .slider-parent > .slider-child[data-depth="-3"] {
    left: calc((var(--content-width-negative)/2) * 3);
}
.content-slider.two-cols .slider-parent > .slider-child[data-depth="-2"] {
    left: calc((var(--content-width-negative)/2) * 2);
}
.content-slider.two-cols .slider-parent > .slider-child[data-depth="-1"] {
    left: calc((var(--content-width-negative)/2) * 1);
}
.content-slider.two-cols .slider-parent > .slider-child[data-depth="0"] {
    left: 0;
}
.content-slider.two-cols .slider-parent > .slider-child[data-depth="1"] {
    left: calc(var(--content-width)/2);
}
.content-slider.two-cols .slider-parent > .slider-child[data-depth="2"] {
    left: calc((var(--content-width)/2) * 2);
}
.content-slider.two-cols .slider-parent > .slider-child[data-depth="3"] {
    left: calc((var(--content-width)/2) * 3);
}
.content-slider.two-cols .slider-parent > .slider-child[data-depth="4"] {
    left: calc((var(--content-width)/2) * 4);
}
.content-slider.two-cols .slider-parent > .slider-child[data-depth="5"] {
    left: calc((var(--content-width)/2) * 5);
}
.content-slider.two-cols .slider-parent > .slider-child[data-depth="6"] {
    left: calc((var(--content-width)/2) * 6);
}
.content-slider.two-cols .slider-parent > .slider-child[data-depth="6"] ~ .slider-child {
    left: calc((var(--content-width)/2) * 7);
}

/*
*/ }