html { -webkit-font-smoothing: antialiased; }

::-webkit-input-placeholder { color: #243046; opacity: 0.5; }
::-moz-placeholder { color: #243046; opacity: 0.5; }
:-ms-input-placeholder { color: #243046; opacity: 0.5; }
:-moz-placeholder { color: #243046; opacity: 0.5; }

input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button {  -webkit-appearance: none; }

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

video { width: 100% !important; height: auto !important; }

input[type=text],
input[type=email],
input[type=number],
input[type=password],
textarea,
select { -webkit-appearance: none; width: 100%; font-family: inherit; font-size: inherit; color: inherit; border-radius: 2px; padding: 0 25px; height: 50px; background-color: #fff; border: 1px solid #ccc; }

textarea { resize: none; height: auto; padding-top: 15px; padding-bottom: 15px; display: block; }

input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=password]:focus,
select:focus,
textarea:focus{ border: 1px solid rgba(77,77,77,0.3); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05); }

form .alert{ border: 1px solid rgba(210,15,20,0.5)!important; box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05); background-color: #FAF6F6!important; color: #D20F14; }
form .valid{ border: 1px solid rgba(15,210,88,0.5); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05); background-color: #ECFFF3!important; }

form .field{ margin-bottom: 1.5em; }
form .field > label{ display: block; margin-bottom: 7px; }
form .field label > em{ color: #D20F14!important; }

input[type=email]::-ms-clear,
input[type=text]::-ms-clear { display: none; }

select {-webkit-appearance: none; background: none; }
select::-ms-expand {  display: none; }

.select { position: relative; }
.select select { position: relative; z-index: 2; width: 100%; background: none!important; }
.select:after { content: ""; display: block; position: absolute; top: 50%; right: 15px; line-height: 0; z-index: 1; background: url(chevron-down.svg); width: 24px; height: 24px; margin-top: -12px; }
.select { width: 100%; background: #fff; }

.ease{ transition: all 0.3s ease; }
.multiply{ mix-blend-mode: multiply; }

body.fixed{ overflow: hidden; }
.left{ float: left; }
.right{ float: right; }
.clear{ clear: both ;}
.alignright{ text-align: right; }
.alignleft{ text-align: left; }
.cursor{ cursor: pointer; }
.center{ text-align: center; }
.abscenter{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.relative{ position:relative; } 
.ucase{ text-transform: uppercase; }
.capitalize{ text-transform: capitalize; }

.table{ display: table; }
.table-row{ display: table-row; }
.cell{ display: table-cell; vertical-align: top; }
.bottom{ vertical-align: bottom!important; }
.middle{ vertical-align: middle!important; }

img, svg, iframe, picture{ vertical-align: middle; }

article ul li{ padding-left: 15px; }
article ul li:before { content:"•"; font-family: arial; font-size:15px; display: block; position: absolute; top: 0; left: 0; }

ol{ margin-left: 17px; }
ol li{ margin-bottom: 17px; }

strong,b{ font-weight: 700; }

table.collapse{ border-collapse: collapse; }
table td, table th{ padding: 0; }

.radio-list .radio{ margin-bottom: 15px; }
.radio-list .radio:last-child{ margin: 0; }

.radio label{ cursor: pointer; padding-left: 48px; position: relative; line-height: 22px; display: inline-block; }
.radio input[type=radio]{ display: none; }
.radio input[type=radio] + label:before{ content: ""; display: block; height: 22px; width: 22px; background-color: #F6F6F6; cursor: pointer; position: absolute; top: 0; left: 0; border-radius: 50%; border: 5px solid #F6F6F6; }
.radio input[type=radio]:checked  + label:before{ background-color: #D20F14;  }

.checkbox label:before,
.radio label:before { display: inline-block; }

.checkbox label{ cursor: pointer; padding-left: 48px; position: relative; line-height: 26px; display: inline-block; }
.checkbox input[type=checkbox]{ display: none; }
.checkbox input[type=checkbox] + label:before{ content: ""; display: block; height: 30px; width: 30px; background-color: #F6F6F6; cursor: pointer; position: absolute; top: -2px; left: 0; border: 1px solid #103c4c; border-radius: 2px; }
.checkbox input[type=checkbox]:checked  + label:before{ background: url(check-mark.svg) center center no-repeat; background-size: 16px 16px; background-color: #74b84f; }

.checkbox-list .checkbox{ margin-bottom: 15px; }
.checkbox-list .checkbox:last-child{ margin: 0; }

.checkbox label a{ border-bottom: 1px solid #aaa; }

.dd{ display: block; position: relative; color: inherit; z-index: 3; text-align: left!important; }
.dd > label{ cursor: pointer; background-color: #fff; line-height: 60px; display: block; color: inherit; padding: 0 25px; }
.dd > label + input[type=hidden]{ display: none; }
.dd > label em{ display: none!important; }
.dd > label::after{ content: ""; display: block; position: absolute; top: 50%; right: 15px; margin-top: -12px; width: 24px; height: 24px; background: url(chevron-down.svg); background-size: cover; transition: all .2s ease; }
.dd.clicked > label::after{ transform: rotate(180deg); }
.dd > label.alert{ color: #D20F14; }
.dd > label.alert::after{ background: url(chevron-down.svg); background-size: cover; }
.dd > ul{ position: absolute; width: 100%; top: 100%; background-color: #fff; display: none; border: 1px solid #F6F6F6; max-height: 300px; overflow: auto; }
.dd > ul li{ padding: 17px 25px; background: rgba(246,246,246,.5); }
.dd > ul li + li{ margin-top: 1px; }
.dd > ul li:hover{ transition: all .3s ease; background: rgba(246,246,246,1); cursor: pointer; }

span.x{ width: 16px; height: 16px; position: absolute; right: 0; display: block; background: url(white-x.svg) no-repeat; top: -25px; cursor: pointer; }
.fs-video .container span.x{ top: -25px; right: 15px; z-index: 2; }

form .disabled{ position: relative; z-index: 1; display: block; }
form .disabled:before{ content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; }
form .disabled *{ opacity: 0.5; }

form .placeholder{ position: relative; z-index: 1; }
form .placeholder label{ position: absolute; top: 23px; color: #666; left: 25px; transition: all 0.3s ease; line-height: 1em; z-index: -1; }
form .placeholder input[type=text],
form .placeholder input[type=email],
form .placeholder textarea,
form .placeholder select{ background: none; }
form .placeholder { position: relative; background: #ffF; }
form .placeholder label.active,
form .placeholder input[type=text]:focus + label,
form .placeholder input[type=email]:focus + label,
form .placeholder input[type=number]:focus + label,
form .placeholder input[type=password]:focus + label,
form .placeholder textarea:focus + label{ top: -7px; transition: all 0.3s ease; font-size: 80%; color: #bbb; z-index: 1; }

form .placeholder label.active::after,
form .placeholder input:focus + label::after,
form .placeholder textarea:focus + label:after{ content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-color: #fff; z-index: -1; }

div.spinners-wrapper{ position: relative; z-index: 1; display: inline-block; width: 130px; vertical-align: top; }
div.spinners-wrapper {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

div.spinners{ position: absolute; top: 0; right: 10px; height: 100%; width: 30px; z-index: 2; }
div.spinners a{ display: block; position: absolute; right: 0; width: 30px; height: 30px; background: url(chevron-down.svg) center center; background-size: 24px 24px; }
div.spinners a:first-child{ top: 0; transform: rotate(180deg); }
div.spinners a:last-child{ bottom: 0;  }

div.spinners-wrapper  input{ border-color: #111; }

div.spinners-wrapper + a.button{ line-height: 46px; margin-left: 20px; }

.mb-default{ margin-bottom: 1em; }
.mb-default2x{ margin-bottom: 2em; }
.mb-default3x{ margin-bottom: 3em; }	
.mb-default4x{ margin-bottom: 4em; }

.video-frame { overflow: hidden; padding-top: 56.25%; position: relative; }
.video-frame iframe,
.video-frame video { border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.video-frame-4x3 { padding-top: 75%; }

.custom-overlay { max-width: 600px; background: #fff; border-radius: 3px; overflow: hidden; }
.custom-overlay .content{ padding: 30px; min-width: 420px; }
.custom-overlay .buttons{ border-top: 1px solid #ccc; padding: 30px; text-align: right; background: rgba(246,246,246,.75); border-radius: 0 0 3px 3px; overflow: hidden; }

.custom-overlay .buttons.center{ text-align: center!important; }
.custom-overlay .buttons a.cancel{ background: #222222; color: #ffffff !important; margin-right: 10px; }
.custom-overlay .buttons a.cancel:hover{ background: #444444; }
.custom-overlay .buttons a,
.custom-overlay .buttons button.submit{ line-height: 32px; padding: 0 15px; width: unset; }

.play svg{ width: 100px; height: 80px; opacity: .5; }
.play svg path{ transition: all .3s }

dialog{ top: 50%; transform: translateY(-50%); max-width: 100%; margin: 0  auto; border: none; background: none; padding: 0; overflow: visible; }
dialog::backdrop { background: rgb(0 0 0 / 0.75); }
dialog[open] .content{ max-height: calc(100dvh - 100px); overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; max-width: calc(100vw - var(--bs-gutter-x)); background-color: #fff;; margin: 0 auto; }

article figure img{ max-width: 100%; height: auto; }

section.CTA{ background-color: #437e7e; border-bottom: 4px solid #206056; padding: 40px 0; color: #ccc; font-family: 'Ubuntu', sans-serif; font-size: 14px; }
section.CTA h3{ margin-bottom: 1px; color: #fff; font-size: 22px; font-weight: 400; }

section.CTA div.cta{ padding-left: 70px; position: relative; display: inline-block; text-align: left; }
section.CTA div.cta::before{ content: ""; display: inline-block;  position: absolute; }

div.envelope::before{ width: 48px; height: 48px; background: url(envelope.svg) no-repeat; top: 1px; left: 0; }
div.comment::before{ width: 46px; height: 48px; background: url(comment.svg) no-repeat; position: absolute; top: 1px; left: 0; }
div.phone::before{ width: 42px; height: 48px; background: url(phone.svg) no-repeat; top: 3px; left: 0; }

section.teasers{ padding-bottom: 40px; }
section.teasers .teaser { text-align: center; background-color: #fff; position: relative; z-index: 1; margin-bottom: 35px; }

section.teasers .teaser  .image > a{ display: block; }
section.teasers .teaser  .image img{ transition: all .2s ease-out; width: 100%; max-width: none; height: auto; }
section.teasers .teaser label{ font-family: 'Ubuntu', sans-serif; font-size: 18px; margin-bottom: 0; position: absolute; top: 0; left: 0; padding: 10px 20px; z-index: 2; }
section.teasers .teaser div.name{ text-align: center; padding: 10px 0; font-size: 14px; }

section.teasers .teaser .nophoto{ position: relative; background-color: #f8f8f8; padding-bottom: 100%; }
section.teasers .teaser h3{ font-size: 14px; padding: 10px 0; }

section.teasers .case .nophoto { position: relative; background-color: #f8f8f8; padding-bottom: 58.37837837837838%; border: 1px solid #f8f8f8; }
section.teasers .case h3{ font-size: 18px; font-weight: 700; margin: 10px 0; }
section.teasers .case{ margin-bottom: 30px; font-size: 14px; }

form .user input,
form .envelope input,
form .comment textarea{ padding-left: 65px; }
form .user::before,
form .envelope::before,
form .comment::before{ content: ""; display: block; width: 24px; height: 24px; background-size: contain; opacity: 0.35; position: absolute; top: 14px; left: 40px; }

form .user::before{ background: url(svg/user.svg) no-repeat; }
form .envelope::before{ background: url(svg/envelope.svg) no-repeat; }
form .comment::before{ background: url(svg/comment.svg) no-repeat; }

@media (min-width: 1200px){
  #sticky_menu_wrapper{ display: none; }
}

@media (max-width: 1199px){

  nav#sticky_menu_wrapper a.haschild{ padding: 0; }
  nav#sticky_menu_wrapper ul li > a:first-child{ padding-right: 40px; }
  nav#sticky_menu_wrapper .tools{ position: absolute; bottom: 24px; right: 50px; }
  nav#sticky_menu_wrapper .tools{  }
  nav#sticky_menu_wrapper .tools a{ width: 25px; height: 28px; display: inline-block; overflow: hidden; padding: 0; margin: 0 15px; }
  nav#sticky_menu_wrapper .tools a svg{ width: 20px; height: 20px; position: relative; top: 4px; }
  nav#sticky_menu_wrapper .tools a.phone svg{ transform: rotate(110deg); }  
  nav#sticky_menu_wrapper > .container{ padding: 0; }

  header{ height: auto; }

  .panel a.logo,
  header a.logo{ padding: 15px 0; }

  .panel a.logo img,
  header a.logo img{ height: 40px; width: auto; }

  header .tools{ right: 90px; top: 50%; margin-top: -9px; }

  header nav{ display: none; }

  ul.burger { position: absolute; right: 15px; cursor: pointer; }
  ul.burger { background: rgba(0,0,0,0); padding: 0; width: 30px; height: 20px; top: 50%; margin-top: -15px; display: block; }
  ul.burger li{ display: block; height: 4px; background: #00263A; margin: 0; padding: 0; border-radius: 2px; }
  ul.burger li:nth-child(2){ margin: 4px 0; transition: all 0.3s ease; }

  ul.burger.open li:nth-child(1){ -webkit-transform: rotate(45deg); transform: rotate(45deg); transition: all 0.3s ease; position: relative; top: 8px; }
  ul.burger.open li:nth-child(2){ display: none; } 
  ul.burger.open li:nth-child(3){ -webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition: all 0.3s ease; position: relative; top: 4px; }	

  nav#sticky_menu_wrapper { width: 250px; height: 100vh; overflow: auto; }

  nav#sticky_menu_wrapper .panel{ border-bottom: 2px solid #000; }

  #page.shifted { box-shadow: 0 0 20px rgba(0,0,0,.3); margin-left: 100%!important; }

  nav#sticky_menu_wrapper h3{ padding: 13px 15px 11px 15px; margin: 0; font-weight: 500; font-size: 16px; line-height: 90px; }
  nav#sticky_menu_wrapper a.close-menu{ position: absolute; top: 0; right: 0; width: 40px; text-align: center; padding: 7px 0 6px 0; }
  nav#sticky_menu_wrapper a.close-menu svg{ fill: #222; }

  nav#sticky_menu_wrapper > .container ul a:not(.haschild){ padding: 16px 15px 14px 15px; display: inline-block; line-height: 1; }
  nav#sticky_menu_wrapper > ul  > li > a.True{ background-color: #f3f3f3; }
  nav#sticky_menu_wrapper a.True{ color: #0f5b5c; }
  nav#sticky_menu_wrapper > .container ul { width: 100%; overflow-y: auto; border-bottom }
  nav#sticky_menu_wrapper ul li{ position: relative; }
  nav#sticky_menu_wrapper a.haschild{ position: absolute; height: 24px; width: 24px; top: 11px; right: 15px; font-weight: normal!important; background: url(chevron-down.svg);  }
  nav#sticky_menu_wrapper a.haschild.True{ transform: rotate(180deg); -webkit-transform: rotate(180deg); transition: all .2s ease; }
  nav#sticky_menu_wrapper ul ul a.haschild { right: 9px; }
  
  nav#sticky_menu_wrapper ul ul{ display: none; }
  nav#sticky_menu_wrapper ul a.haschild.True + ul{ display: block; }

  nav#sticky_menu_wrapper > .container > ul > li{ border-bottom: 1px solid #f1f1f1; }
  nav#sticky_menu_wrapper > .container > ul > li > a{ text-transform: uppercase; font-weight: 500; }
  nav#sticky_menu_wrapper ul ul li > a{ padding-left: 30px!important; text-transform: none; font-weight: 500; }
  nav#sticky_menu_wrapper ul ul ul li > a{ padding-left: 45px!important; text-transform: none; font-weight: 400; }
  nav#sticky_menu_wrapper ul ul ul ul li > a{ padding-left: 60px!important; }  

}

@media (max-width: 1200px){

	section.teasers .col-xl-4 .teaser{ margin: 25px 0; }
	section.teasers{ padding: 50px 0; }

}

@media (max-width: 991px){

	article .col-lg-6 + .col-lg-6{ margin-top: 2em; }
	
	section.CTA div.cta{ padding-left: 0; text-align: center; }
	section.CTA div.cta::before{ content: ""; display: block; position: static; margin: 0 auto; margin-bottom: 10px; }	
	
	div.scroller{ overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	div.scroller > table{ width: 960px!important; }


	
}

@media (max-width: 767px) {

	section.teasers{ padding: 25px 0; }
	section.CTA{ padding: 15px 0 10px 0; }
	section.CTA div.cta::before{ content: ""; display: block; position: static; margin: 0 auto; transform: scale(0.85); margin-bottom: 5px; }	
	section.CTA div.cta h3{ font-size: 18px; }
	
	header .call-us{ max-width: calc(100% - 215px)!important; }

	body{ padding-bottom: 31px; }
	header #loggedinas {
		position: fixed;
		top: auto;
		bottom: 0;
		right: 0;
		width: 100%;
		background-color: #eee;
		padding: 5px 15px;
		text-align: center;
		z-index: 2;
	}	
	
	article.white + article.orders.white { margin-top: 0!important; }
	article.white + section.teasers.white { margin-top: -20px; }


  
  article.orders.white table.collapse > tbody > tr > td { padding: 13px 10px; }
  article.orders.white table.collapse td.open table.products { display: block; margin: 10px -10px; width: unset; }
  article.orders.white table.collapse td.open table.products tbody tr { padding: 13px 10px; }

  article.orders.white table.collapse table.products td:nth-child(2){ text-align: left!important;  }

  article.orders.white table.collapse table.products td { width: 33.333333%; }
  article.orders.white table.collapse table.products td:first-child { width: 100%; }
  article.orders.white table.collapse table.products td:last-child { width: 66.666666%; }

  article.orders.white table.collapse table.products tr + tr { border-top: 1px solid #eee; }

  table.responsive{ display: block; }
  table.responsive thead{ display: none; }
  table.responsive tbody{ display: block; border-top: 1px solid #eee; }
  table.responsive tbody tr{ display: flex; flex-wrap: wrap; /*border-bottom: 1px solid #999; padding: 5px 0;*/ }
  table.responsive tbody tr td:nth-child(1){ font-weight: bold; }
  table.responsive tbody tr td{ width: 100%; border: none; padding: 0; height: unset!important; padding: 5px 0; }
  table.responsive tbody tr td::before{ content: attr(data-label); display: block; font-weight: normal; opacity: .7; font-size: 12px; }

}

@media (max-width: 575px){

	section.teasers{ padding: 0; }
	section.teasers .teaser { min-height: 0; }
		
	.image img{ height: auto; }
	
	body section.teasers .teaser{ min-height: 0!important;  }
	
	section.CTA div.cta label{ display: none; }
	section.CTA div.cta::before{ content: ""; display: block; position: static; margin: 0 auto; transform: scale(0.65); margin-bottom: 0px; }	
	section.CTA div.cta h3{ font-size: 12px; }
	
	header .basket-wrap{ position: relative; top: 4px; font-size: 11px; }
	header .basket-wrap img { width: 24px; height: 24px; }
	
	article.white + section.search { margin-top: -25px; }
	article.intro + section.teasers { margin-top: -10px; }
	
	section.teasers .teaser label{ font-size: 13px; }
	section.teasers .teaser div.name{ font-size: 12px; }
	section.teasers  + section.teasers { margin-top: 0px; }
	
	.downloads{ margin: 15px 0; }

	article.white + article.orders.white { margin-top: 0; }
	
	.custom-overlay .content { padding: 30px; min-width: 0; }
	.custom-overlay .buttons { padding: 20px; }
	
	
}

@media (min-device-width: 1024px){


	
}