@font-face {
  font-family: 'Cera Pro';
  src: url('../font/CeraPro-Italic.eot');
  src: local('Cera Pro Italic'), local('../font/CeraPro-Italic'),
      url('../font/CeraPro-Italic.eot?#iefix') format('embedded-opentype'),
      url('../font/CeraPro-Italic.woff') format('woff'),
      url('../font/CeraPro-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Cera Pro';
  src: url('../font/CeraPro-Regular.eot');
  src: local('Cera Pro Regular'), local('../font/CeraPro-Regular'),
      url('../font/CeraPro-Regular.eot?#iefix') format('embedded-opentype'),
      url('../font/CeraPro-Regular.woff') format('woff'),
      url('../font/CeraPro-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Cera Pro';
  src: url('../font/CeraPro-Light.eot');
  src: local('Cera Pro Light'), local('../font/CeraPro-Light'),
      url('../font/CeraPro-Light.eot?#iefix') format('embedded-opentype'),
      url('../font/CeraPro-Light.woff') format('woff'),
      url('../font/CeraPro-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Cera Pro';
  src: url('../font/CeraPro-Black.eot');
  src: local('Cera Pro Black'), local('../font/CeraPro-Black'),
      url('../font/CeraPro-Black.eot?#iefix') format('embedded-opentype'),
      url('../font/CeraPro-Black.woff') format('woff'),
      url('../font/CeraPro-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Cera Pro';
  src: url('../font/CeraPro-Bold.eot');
  src: local('Cera Pro Bold'), local('../font/CeraPro-Bold'),
      url('../font/CeraPro-Bold.eot?#iefix') format('embedded-opentype'),
      url('../font/CeraPro-Bold.woff') format('woff'),
      url('../font/CeraPro-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Cera Pro';
  src: url('../font/CeraPro-Medium.eot');
  src: local('Cera Pro Medium'), local('../font/CeraPro-Medium'),
      url('../font/CeraPro-Medium.eot?#iefix') format('embedded-opentype'),
      url('../font/CeraPro-Medium.woff') format('woff'),
      url('../font/CeraPro-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
*, ul{
    margin: 0;
    padding: 0;  
    box-sizing: border-box;   
}
::selection{background-color:#000000; color:#009ecf !important;}
::-moz-selection{background-color:#000000; color:#009ecf !important;}

/* width */
::-webkit-scrollbar {
  width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
  background: #eee;
}
/* Handle */
::-webkit-scrollbar-thumb {
  background: #008dcf;
  transition: all 300ms ease-out;
  cursor: pointer;
  opacity: 0.9;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  opacity: 1;
}

body{
  width: 100%;
  font-size: 18px;
  line-height: 1.4;
  font-family: 'Cera Pro';
  font-weight: normal;
  font-style: normal;
  color: #000;
}
.layout-container{
  overflow: hidden;
  position: relative;
}
h1, h2, h3, h4{
  margin: 0 0 20px;
  font-weight: 500;
}
h1{
  margin-bottom: 30px;
}


form select{
  padding: 10px;
  border: none;
  border-bottom: 1px solid #000;
  font-size: 15px;
  width: 100%;
}
form .js-form-type-select label{
  margin-bottom: 0;
}
form .form-actions input{
  display: inline-block;
  width: auto;
  cursor: pointer;
  background-color: #fff;
}

a{
  color: inherit;
  text-decoration: none;
  outline: none;
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
.formatxt a{
  opacity: 0.85;
  text-decoration: underline;
}
.formatxt a:hover{
  opacity: 1;
}
.region-help{
  text-align: center;
}
.region-help div[data-drupal-messages]{
  position: absolute;
  left: 0;
  top: 0;
  padding: 10px 20px;
  z-index: 100;
  background-color: #000;
  color: #fff;
  font-size: 16px;
}
#block-fth-primary-local-tasks > ul{
  display: flex;
  list-style: none;
  margin: 10px 0;
}
#block-fth-primary-local-tasks > ul a{
  padding: 10px 15px;
  background-color: #ccc;
  display: block;
  margin-right: 2px;
}
#block-fth-primary-local-tasks > ul a:hover{
  background-color: #ddd;
}
img{
  max-width: 100%;
  height: auto;
}
.name-field-media-image img{
  width: 100%;
  display: block;
}
.formatxt > *,
.formatxt > div> *{
  margin-bottom: 20px;
}
.formatxt > *:last-child,
.formatxt > div > *:last-child{
  margin-bottom: 0;
}
.name-field-media-video-file{
    text-align: center;
}
.name-field-media-video-file video{
    width: auto;
    height: auto;
    display: inline-block;
    max-width: 100%;
}
.name-field-poster{
    display: none;
}

nav ul{
  list-style: none;
}
.formatxt li{
  margin: 10px 0 10px 25px;
  list-style-position: outside;
  line-height: 1.3;
}
.formatxt hr{
  margin: 30px 0;
  border: none;
  border-top: 2px solid #ccc;
}

form label{
  display: block;
  margin-bottom: 10px;
  line-height: 1;
  text-transform: uppercase;
  font-weight: 500;
}
form input,
form textarea{
  font-size: 18px;
  display: inline-block;
  color: inherit;
  border: none;
  border-bottom: 1px solid #009ecf;
  padding: 3px 0;
  transition: all 300ms ease-out;
  width: 100%;
  font-size: inherit;
  font-family: inherit;
}
form textarea{
  border: 2px solid #009ecf;
}
form label,
form input,
form textarea{
  font-size: 18px;
}
form .form-item{
  margin-bottom: 25px;
  position: relative;
}
form .description{
  font-size: 16px;
  margin-top: 4px;
}
form .description a{
  text-decoration: underline;
}

form input[type="checkbox"],
form input[type="radio"]{
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
}
form label.option{
  padding-left: 30px;
  margin-bottom: 0;
  text-align: left;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
.js-form-type-checkbox .description,
.js-form-type-radio .description{
  margin-left: 30px;
}

.tablewrap{
  overflow-x: auto;
}
table{
  border-collapse: collapse;
  border-spacing: 0;
  line-height: 1.3;
  border: 1px solid #009ecf;
}
table th,
table td{
  border: none;
  border-left: 1px solid #009ecf;
  border-top: 1px solid #009ecf;
  padding: 5px 25px;
}
.handle{
  box-sizing: content-box;
}

.blink{
  display: block;
}
.blink img{
  display: block;
  transition: all 3s ease-out;
  transform: scale(1);
}
.blink:hover img{
  transform: scale(1.04);
}
a.buy,
.name-field-links a,
form .form-actions input{
  margin-top: 30px;
  border: 1px solid  #009ecf;
}
a.buy,
.name-field-links a,
form .form-actions input{
  display: inline-block;
  padding: 10px 20px;
  line-height: 1;
}
a.buy:hover,
.name-field-links a:hover,
form .form-actions input:hover{
  background-color: #009ecf;
  color: #fff;
}
.hasbkg a.buy:hover,
.hasbkg .name-field-links a:hover,
.slithumb .name-field-links a:hover{
  background-color: #000;
}
.goback{
  cursor: pointer;
  position: relative;
  display: block;
  width: 25px;
  height: 25px;
  position: absolute;
  right: 20px;
  top: 40px;
}
.goback::after{
  content: " ";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #333;
  transition: all 300ms ease-out;
  clip-path: polygon(5% 10%,10% 5%,50% 45%,90% 5%,95% 10%,55% 50%,95% 90%,90% 95%,50% 55%,10% 95%,5% 90%,45% 50%);
}
.goback:hover::after{
  background-color: #009ecf;
}


/* edit links */
.edit-node a,
.views-field-edit-node a,
.views-field-edit-taxonomy-term a{
  display: none;
  position: absolute;
  right: unset;
  left: 0;
  top: 0;
  font-size: 8px;
  color: rgba(0,0,0,0) !important;
  background-color: #fff;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-image: url('../imgs/pencil.svg');
  background-repeat: no-repeat;
  background-position: center;
  border: 2px solid #ccc;
}
.grow:hover .edit-node a,
.views-row:hover .views-field-edit-node a,
.views-row:hover .views-field-edit-taxonomy-term a{
  display: block;
}
#edit-preview,
.contextual{
  display: none;
}
.contextual[data-contextual-id^="node:"],
.contextual[data-contextual-id^="taxonomy_term:"]{
  display: block;
}
.views-field-operations li{
  margin: 0;
}
.views-field-operations .dropbutton-wrapper{
  display: inline-block;
  font-size: 15px;
}

/* general layout */
.layout-container{
  max-width: 1340px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

form{
  max-width: 500px;
}
header, main, footer{
  margin: 50px 0;
}
.region-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu--main > .menu{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
header .menu--main > .menu > li a{
  display: block;
  line-height: 1;
}
header .menu--main > .menu > li > a{
  padding: 20px 10px;
  position: relative;
}
header .menu--main > .menu > li > a::after{
  content: "";
  display: block;
  width: 0;
  height: 5px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  transition: all 300ms ease-out;
  background-color: #008dcf;
}
header .menu--main > .menu > li > a:hover::after,
header .menu--main > .menu > li > a.is-active::after,
header .menu--main > .menu .menu-item--active-trail > a::after,
header .menu--main > .menu > .menu-item--expanded:hover > a::after{
  width: calc(100% - 20px);
}
.logo{
  display: block;
  width: 200px;
}
.txtwrap{
  max-width: 600px;
}
.withmedia > .wrap{
  display: flex;
  justify-content: space-between;
}
.withmedia > .wrap > div{
  width: 45%;
}
.view-products > .view-content{
  display: flex;
  flex-wrap: wrap;
}
.prow{
  width: 22%;
  margin: 30px 4% 30px 0;
}
.prow:nth-child(4n+4){
  margin-right: 0;
}

/* social menu */
.menu--social .menu{
  position: relative;
  left: -10px;
  display: flex;
}
.menu--social .menu a{
  display: block;
  width: 30px;
  height: 30px;
  color: transparent !important;
  overflow: hidden;
  background-image: url(../imgs/socials.svg);
  background-repeat: no-repeat;
  background-position: 0 center;
}
.menu--social .menu a[href*="facebook"]{
  background-position: left center;
}
.menu--social .menu a[href*="linked"]{
  background-position: -30px center;
}
.menu--social .menu a[href*="youtube"]{
  background-position: -60px center;
}
.menu--social .menu a[href*="instagram"]{
  background-position: -90px center;
}
.menu--social .menu a[href*="twitter"]{
  background-position: -120px center;
}
.menu--social .menu a[href^="mailto:"]{
  background-position: -150px center;
}
.menu--social .menu a[href^="tel:"]{
  background-position: -180px center;
}
.menu--social .menu a[href*="maps"]{
  background-position: right center;
}


/* footer */