@charset "UTF-8";
/*
  # Kirby Starterkit
  
  This CSS file handles all of the styling in of Kirby’s
  Starterkit. Feel free to tinker around with it and
  adjust it according to your needs.  
  
  ## Color Definitions
  
  The following colors used in the Starterkit. If you want
  to use this CSS file as a starting point for your own
  project, you can do a simple search & replace to adjust
  the color scheme to your needs.
  
  - Background:            white
  - Text:                  black
  - Hovered Links:         #128DCD
  - Active Button BG:      #128DCD
  - Caption BG in projects
    showcase:              rgba(38, 30, 102, .95)

  - Highlight, Selection,
    Link Underline:        #cfdcad
  - Tap color
    (touch devices):       rgba(113, 239, 172, .5)
  - Marked Text BG,
    Callout Boxes BG:      #eafded

  - Menu Separator,
    <hr> in text:          #a8a5be
  - Blockquote BG:         #fffffd
  
  ## Table of Contents
  
  1 Global Rules & Definitions
  1.1 Font Definitions
  1.2 Reset & Normalization
  1.3 General Typography
  1.4 Images & Figures
  
  2 Layout Helpers & Reusable Components
  2.1 Kirbytext
  2.2 Button
  2.3 Grid & Layout
  2.4 Pagination
  2.5 Projects Showcase
  
  3 Site Layout
  3.1 Header
  3.2 Menu
  3.3 Sticky Footer
  3.4 Main Content
  
  4 Template-specific Components
  4.1 Homepage
  4.2 Blog Article
  4.3 Team
  4.4 Contact
  
*/

/* =====  1 Global Rules & Definitions  ===================================== */

/* -----  1.1 Font Definitions  --------------------------------------------- */

/* roboto-slab-500 - latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-slab-v24-latin-500.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-slab-v24-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-slab-v24-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-slab-v24-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-slab-v24-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-slab-v24-latin-500.svg#RobotoSlab') format('svg'); /* Legacy iOS */
}
/* roboto-slab-600 - latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/roboto-slab-v24-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-slab-v24-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-slab-v24-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-slab-v24-latin-600.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-slab-v24-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-slab-v24-latin-600.svg#RobotoSlab') format('svg'); /* Legacy iOS */
}
/* roboto-slab-700 - latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-slab-v24-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-slab-v24-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-slab-v24-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-slab-v24-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-slab-v24-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-slab-v24-latin-700.svg#RobotoSlab') format('svg'); /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v30-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/roboto-v30-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/roboto-v30-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/roboto-v30-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/roboto-v30-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}


/* -----  1.2 Reset & Normalization  ---------------------------------------- */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  list-style: none;
}

article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section, summary {
  /* Add correct display for IE 9- and some newer browsers */
  display: block;
}

::-moz-selection {
  background: #cfdcad;
  color: black;
}

::selection {
  background: #128DCD30;
  color: black;
}

/* -----  1.3 General Typography  ------------------------------------------- */

h1, h2, h3, h4, h5, h6,
p, ul, ol, figure, pre {
  /* Reset font-sizes and normalize margins */
  font-size: inherit;
  line-height: inherit;
  margin: 0 0 1rem;
}

/* Headings */
h1, h2, h3 {
  font-family: 'Roboto Slab', Times, serif;
}

h1 {
  font-weight: 500;
  font-size: 2.2rem;
  line-height: 1.25;
}

h2 {
  font-size: 1.75rem;
  line-height: 2rem;
  color: #4A4A4A;
  font-weight: 400;
}

h3 {
  font-size: 1.15em;
  line-height: 1.3;
  font-weight: 400;
  color: #4A4A4A;
}

h4 {
  font-size: 1.3em;
  color: #4A4A48;
}

.small {
  font-size: .7rem !important;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
}

a:hover, a:focus, a:active {
  color: black;
}

.nav_mini > a:hover, a:focus, a:active {
  color: black;
}

.nav_mini > ul > li > a:hover, a:focus, a:active {
  color: black;
}

#nav-mobile {
  text-transform: uppercase;
}

/* Misc */
hr {
  font-size: 1.25rem;
  font-weight: 500;
  height: 1.5rem;
  text-align: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: #696969;
}



}

h1 + hr,
.intro + hr {
  /* Shift a <hr> right after an `.intro`
     or <h1> block one line up. */
  margin-top: -1.5rem;
}

i, em {
  font-weight: 400;
  font-style: italic;
}

em > p {
  margin-bottom: 0;
}

b, strong {
  font-weight: 600;
}

mark {
  padding: .1em .05em;
  margin: -.1em 0;
  color: black;
  background: #eafded;
}

/* --------- forms ------------- */

input:not([type="radio"]), textarea {
    display: block;
}


.uniform__potty {
    position: absolute;
    left: -9999px;
}

.error {
   /* border: 1px solid red; */
}
.error-text {
    color: red;
    font-size: .8rem;
}
input, textarea
{
  background: transparent;
  border:0px;
  border: 1px solid black;
  padding: 0.5rem 0rem 0.5rem .75rem;
  font-size:1rem;
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
  width: 100%;
  height: 45px;
  resize: none;
}

.input-text {
  width: 100%;
  background-color: red;
}

input[type="submit"]
{
  color: white;
  font-weight: bold;
  border: 0px;
  cursor:pointer;
  text-align: left;
  font-size: 1.1rem;

}

select {
  border: 0px;
  border-bottom: 1px solid black;
  padding: 0.5rem 0rem 0.5rem 0rem;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  font-family: 'Roboto', sans-serif;
  color: grey;
  width: 70% ;
  background-color: white;
}


textarea:focus, input:focus{
    outline: none;
}

textarea{
  height: 150px;
}

.inline{
  display: table;
  width: 100%;
}
.inline div {
  display: table-cell;
  width: 50%;
}

.inline div:last-of-type{
  padding-left: 10px;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: grey;
}
::-moz-placeholder { /* Firefox 19+ */
  color: grey;
}
:-ms-input-placeholder { /* IE 10+ */
  color: grey;
}
:-moz-placeholder { /* Firefox 18- */
  color: grey;
}


.g-recaptcha {
  margin: 1rem 0;
}


.specs table {
  width: 100%;
}

.specs tbody tr td {
  vertical-align: text-top;
  font-size: .8rem;
}

.specs tbody td:nth-child(2) {
  color: black;
}

.priceconditions {
  flex-basis: 100%;
}

.priceconditions:first-of-type {
  flex-basis: 100%;
  margin-top: 2.2rem;
}

@media all and (min-width: 38em) {
 

}

@media all and (max-width: 56em) {
  
  input, textarea, select {
    width: 100%;
  }

  .priceconditions {
    flex-basis: calc(50% - 2px);
  }

}

@media all and (min-width: 56em) {
 
 .priceconditions:first-of-type {
  flex-basis: calc(25% - 24px);
  text-align: right;
  }

 .priceconditions {
    margin-top: 2.2rem;
    flex-basis: calc(25% - 24px);
  }

}
@media all and (min-width: 75em) {
 

}

@media all and (min-width: 90em) {

}

@media all and (min-width: 100em) {

}

@media all and (min-width: 150em) {

}


/* -----  1.4 Images & Figures  --------------------------------------------- */

img {
  border-style: none;
  max-width: 100%;
  height: auto;
}

figcaption {
  font-size: .75rem;
  line-height: 1.5rem;
}


/* =====  2 Layout Helpers & Reusable Components  =========================== */

/* The Clearfix™: A classic … */
.cf::after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

  *:focus {
    outline: none;
  }


/* -----  2.1 Kirbytext  ---------------------------------------------------- */

.intro {
  text-align: center;
  font-weight: 500;
  font-size: 1.125rem;
  margin-bottom: 3rem;
}

h1 + .intro {
  margin-top: -2.25rem;
}

.text h2, .text h3 {
}

.text ul, .text ol {
  margin-left: 1em;
}

.text ul {
  list-style: none;
}

.text ul > li::before {
  content: "–";
  display: inline-block;
  position: relative;
  width: 1.25em;
  margin-right: -1.25em;
  left: -1.25em;
  padding-left: .25em;
}

.text ol > li {
  list-style: decimal;
}

.text pre, .text code {
  background-color: #eafded;
  font-family: Courier, monospace;
  font-size: .75rem;
}

.text code {
  margin: -.25em 0;
  padding: .25em .15em;
  position: relative;
  bottom: .05em;
}

.text pre > code {
  display: block;
  margin: 0;
  padding: .8em;
  position: static;
  bottom: auto;
  overflow-x: auto;
}


@supports (-webkit-overflow-scrolling: touch) {
  .text pre > code {
    /* Enables smoother scrolling for code sections on
       mobile (i.e. touch) devices. */
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }
}

.text kbd {
  padding: 3px 7px;
  margin: -3px 2px;
  font-size: 75%;
  line-height: 1;
  background: #e9e9e9;
  border-radius: 4px;
  box-shadow: 0 2px 0 #c9c7d4;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  position: relative;
  bottom: 2px;
}

.text blockquote {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  border-left: 2px solid #a8a5be;
  padding: .75rem;
  background: #fffffd;
}

.text blockquote :last-child {
  margin-bottom: 0;
}

.one-third {
  float: left; 
  width: 100%;
  display: inherit;
  margin-right: 1.5rem;
  line-height: 1.4rem;
}

.one-third:last-of-type {
  margin-right: 0;
}

.two-third {
  flex-basis: 100%;
}
.content {
  float: left; 
  width: 70%;
  margin-bottom: 2rem;
}


.two-third   ul  li {
  list-style-position: outside;
  display: list-item;
}

.two-third   ol  li {
  list-style-type: decimal !important;
  list-style-position: outside;
  display: list-item;
}

.two-third iframe {
  width: 100%;
}


p > a {
  color: #293240;
}

.list_top {
  margin-top: 2.25rem;
}

.list_top2 {
    margin-right: 1rem;
    display: inline-block;
    margin-top: 0rem;
    vertical-align: top;
    top: 0px;
  }

  summary::-webkit-details-marker {
    display: none;
    flex-wrap: nowrap;
  }
  
  details[open] summary:before {
  }


  details > summary {
    cursor: pointer;
    list-style: none;
    
  }
  .summary {
    display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
    display: -moz-box;      /* OLD: Firefox (buggy) */
    display: -ms-flexbox;   /* MID: IE 10 */
    display: -webkit-flex;  /* NEW, Chrome 21?28, Safari 6.1+ */
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

  details > summary::-webkit-details-marker {
    display: none;
  }

  details[open] summary .plus {
    display: none;
  }
  details[open] summary .minus {
    display: block;
  }

  details summary .minus {
    display: none;
  }

  .details_list {
    width: 100%;
  }


@media all and (min-width: 38em) {

  



}

@media all and (min-width: 56em) {
  
  .one-third {
    flex-basis: 31%;
  }
  
  .two-third {
    flex-basis: 60%;
  }



}

@media all and (min-width: 120em) {

}

/* -----  2.2 Button  ------------------------------------------------------- */

.btn {
  display: inline-block;
  border: 2px solid;
  padding: .6em .75em;
  white-space: nowrap;
  font-size: .75em;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  line-height: 1;
  font-weight: 400;
}

.btn:hover, .btn:focus {
  background: black;
  border-color: black;
  color: white;
}

.btn:active {
  background: white;
  border-color: white;
}

.btn-shipping {
  background: yellow;
}

.btn-remove {
  background-color: white; 
  vertical-align: middle;
  cursor: pointer;

}

.btn-style{
  font-size : 1.2rem;
  color : #ffffff;
  background-color : #293240;
  width: 100%;
  height: 50px;
  font-family: 'Roboto Slab';
  letter-spacing: 1px;
  cursor: pointer;
}

.btn-grey{
  font-size : 1rem;
  color : #ffffff;
  background-color : #4A4A4A;
  height: 45px;
  cursor: pointer;
  padding: 0 1rem;
  vertical-align: text-top;
}

.btn-grey:not([disabled]) {
    cursor: pointer;
    -webkit-transition-duration: 150ms;
    transition-duration: 150ms;
    -webkit-transition-property: background-color;
    transition-property: background-color;
}

.btn-grey::after {
    content: '';
}

/* -------- ISOTOPE -------------------------- */

.filter-select {
  width: 100%;
}

.grid {
  margin-top: 2rem;
}


/* -----  2.3 Grid & Layout  ------------------------------------------------ */

.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.flex-start {
  justify-content: flex-start;
}

.flex-basis-half {
  flex-basis: 49%;
}

.column {
  position: relative;
  display: inline-block;
  width: 100%;
  font-size: 1rem;
  vertical-align: top;
  margin-bottom: .5rem;
}


.subnav_column {
  text-align: left;
  line-height: 2rem;
}

.subnav_column > a {
  font-size: .8rem !important;
}

.subnav_column:last-of-type > a > h3 {
  margin-bottom: 0;
}

.halfcolumns div:last-of-type {
  margin-right: 0;
}

.halfcolumn {
  flex-basis: 100%;
  margin-bottom: 1rem;
}

.halfcolumns{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.wrap {
  box-sizing: content-box;
  margin: 0 auto;
  padding-left: .75rem;
  padding-right: .75rem;
}



@media all and (min-width: 31.5em) {
  .wrap:not(.wide) {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}


@media all and (min-width: 38.25em) {
  .wrap {
    padding-left: 0rem;
    padding-right: 0rem;
  }
  .wrap.wide {
    padding-left: 5rem;
    padding-right: 5rem;
  }



}
@media all and (min-width: 56em) {

  .wrap.wide {
    padding-left: 3.5rem;
    padding-right: 3rem;
  }


}
@media all and (min-width: 64em) {

  .halfcolumns {
    flex-wrap: wrap;
  }

  .halfcolumn {
    flex-basis: 48%;
  }
}

@media all and (min-width: 75em) {

  

}

@media all and (min-width: 90em) {
  .wrap.wide {
    padding-left: 7.5rem;
    padding-right: 7rem;
  }
}



@media all and (min-width: 100em) {
  .wrap.wide {
    padding-left: 8.5rem;
    padding-right: 8rem;
  }
}

@media all and (min-width: 150em) {
  .wrap.wide {
    padding-left: 35.5rem;
    padding-right: 35rem;
  }
}


/* ----- 2.5 Projects Showcase ---------------------------------------------- */

.category {
  position: relative;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.category-item {
  list-style: none;
  margin: 1rem .25rem 0 .25rem;
  position: relative;
  width: 100%;
  border-top: 1px solid dimgrey;
  padding: 2rem 0rem .5rem 0rem;
}

.category-item:first-of-type {
 
  border-top: 0px solid dimgrey;
}

.category-text {
  width: 100%;
}

.category-image {
  display: block;
  width: 50%;
}

.category-form {
  flex-direction: column; 
  text-align: left;
  flex-basis: 100%;
}

.category-input {
  justify-content: flex-start;
}

.category-button {
  width: 140px;
}

.categories-download {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.category-download {
  margin: 0 0 1rem 0;
  flex-basis: 100%;
}

 .category-image-text {
    justify-content: flex-start; 
    width: 100%;
  }


@media all and (min-width: 38em) {
  .category-image {
    width: 200px;
    margin-right: 2rem;

  }

  .category-button {
    width: 100px;
  } 

}

@media all and (min-width: 56em) {
 .home {
    flex-basis: 31% !important;
  }

  .category-image-text {
    justify-content: flex-start; 
    flex-basis: 67%;
  }

  .category-item {
      flex-basis: 46%;

  }

  .category-text {
    flex-basis: 56%;
  }

  .category-form {
    flex-direction: column; 
    text-align: right;
    flex-basis: 32%;
  }

  .home:last-of-type {
    margin-right: 0;
  }


}

@media all and (min-width: 60em) {
  .category-item {
    margin: .5rem .9rem 0 0;

  }


  .category-download {
  flex-basis: 49%;
  }
}

@media all and (min-width: 90em) {
  .category-item {
    margin: .5rem 1rem .75rem 0;
  }

  .category-text {
  }

  .category-form {
  flex-basis: 25% !important;
  }


  .category-image-text {
    flex-basis: 70%;
  }
  .category-text {
    flex-basis: 70%;
  }
}

@media all and (min-width: 1900px) {

}

.category-link {
  display: block;
  position: relative;
  /* padding-top: 72%; */
  z-index: 0;
  border-bottom: 0;
}

.category-caption {
  position: absolute;
  top: .75rem;
  left: .75rem;
  right: .75rem;
  bottom: .5rem;
  background: rgba(38, 30, 102, .95);
  color: #eafded;
  letter-spacing: .05em;
  opacity: 1;
  -webkit-transition: .25s opacity;
  transition: .25s opacity;
  will-change: opacity;
}

.category-title {
  margin-bottom: .5rem;
  width: 100%;


}

.category-image {
  display: block;
}

.category-link:hover .category-caption,
.category-link:focus .category-caption {
  opacity: 1;
}

@media (any-hover: none) {
  .category-caption {
    /* The media query, enclosing these rules matches only
       touch-screen devices that do not support hover due
       to the lack of a pointing device like a mouse.
       It does not work in all mobile browsers, but
       progressively enhances the experience on supported
       devices. Tested in Safari (iOS) 9.3 */
    opacity: 1.0;
    /* Reset will-change property to keep it from eating
       up unneccessary resources on touch-only devices */
    will-change: auto;
  }
  .category-title {
  }
}

/* =====  3 Site Layout  ==================================================== */

html {
  height: 100%;
  background: white;
  color: dimgrey;
  font: normal 400 1em/1.5 'Roboto', sans-serif;
  /* Always show the vertical scrollbar to prevent `jumps`
     of page content after navigating from a very short page
     that does not scroll to a long pager */
  overflow-y: scroll;
  /* Setting this to `default` prevents the cursors from
     changing when hovering blocks of text or whitespace,
     which is less distracting */
  /*cursor: default;*/
  /* Neccessary for sticks footer. */
  position: relative;
  min-height: 100%;
  /* Prevent adjustments of font size after orientation
     changes in IE and iOS. */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* Highlight color for WebKit-bases touch devices. */
  -webkit-tap-highlight-color: rgba(113, 239, 172, .5);
}

@media all and (max-width: 30em) {
  html {
    /* We decrease the font-size a little-bit for tiny
       screens. Because this stylesheet uses relative units
       everywhere, everything scales nicely. */
    font-size: 0.9em;
    line-height: 1em;
  }
}

@media all and (max-width: 38em) {
  html {
    /* We decrease the font-size a little-bit for tiny
       screens. Because this stylesheet uses relative units
       everywhere, everything scales nicely. */
    font-size: 1em;
    line-height: 1.3em;
  }
}

@media all and (min-width: 75em) {
  html {
    /* We decrease the font-size a little-bit for tiny
       screens. Because this stylesheet uses relative units
       everywhere, everything scales nicely. */
    font-size: 1.2em;
    line-height: 1.4em;
  }
}

body {
  padding-top: 100px;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ----- 3.1  Header  ------------------------------------------------------- */

.header {
   height:90px;
   position: fixed;
   top:0;
   right:0;
   left:0;
   transition: transform .25s .1s ease-in-out;
   z-index: 1;
   background-color: #293240;
}

.header div {
  /* height: 100px; /* <-- zum Testen die Höhe hier beliebig anpassen */
}

.down .header {
   transform: translate3d(0, -230%, 0); // um die Höhe (variabel) nach oben verschieben
}

.logo {
  margin: 1rem;
  text-align: center;
  width: 60%;
}

.languages > li:first-of-type::after {
  content: " /";
 

}

.onlyDesktop {
  display: inherit;
  }

.onlyTablet {
  display: none;

}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    overflow-x: hidden;
    transition: 0.3s;
    background: #293240;
}

.sidenav a {
    padding: 0px;
    text-decoration: none;
    display: block;
    transition: 0.2s;
}

.sidenav a:hover {
    color: rgba(0,255,208, 0.5);
}

.sidenav .closebtn {
    font-size: 18px;
    color: grey;
}


@media all and (min-width: 38em) {


}

@media only screen and (min-width: 56em) {

}

@media only screen and (min-width: 64em) {

}

@media only screen and (min-width: 75em) {


  .onlyMobile {
    display: none;
  }

  .onlyTablet {
    display: none;
  }

}

@media only screen and (min-width: 90em) {
 
}

@media only screen and (min-width: 100em) {
 
}

/* -----  3.2 Menu  --------------------------------------------------------- */

.menu-toggle {
  display: flex;
  align-items: flex-end;
  padding-bottom: 0.8rem;
  margin-top: 1.75rem;
}

.menu {
  font-weight: 500;
  vertical-align: middle;
}

.menu-item {
  display: inline-block;
  padding-left: 1.75rem;
}

.menu-item:not(:last-child)::after {
  display: inline-block;
  font-size: .75em;
  padding: 0 1em;
  color: #a8a5be;
}

.menu-item a {
  border-bottom: 0;
  font-size: 0.8rem;
  color: white;
  text-transform: uppercase;

}

.subnav-flex a {
  text-transform: none;
}

.menu-item.is-active a {
  color: white;
}

.menu .menu-item ul {
  display: none;

}

.menu-desktop-item {
  display: inline-block;
  padding-left: 1.75rem;
}

.menu-desktop-item:not(:last-child)::after {
  display: inline-block;
  font-size: .75em;
  padding: 0 1em;
  color: #a8a5be;
}

.menu-desktop-item a {
  border-bottom: 0;
  font-size: 0.8rem;
}

.menu-desktop-item.is-active a {
  border-bottom: 2px solid #128DCD;
}

.menu .menu-desktop-item ul {
  display: none;

}

.menu .menu-subnav {
  position: absolute;
  display: none;
}

.menu > .menu-subnav a {
  display: inline-block;
}

.subnav_a.is-active a {
  color: white;
}

.subnav-flex {
  display: flex; 
  flex-direction: column; 
  margin-bottom: 1rem;
  padding-left: 1rem;
  border-left: 1px solid white;

}

.subnav-first {
  margin-left: 0;
}

.subnav-border {
  margin: 0 1rem 0 0rem;
}

#nav-desktop{
  display: none;
}
.mobile {
  cursor: pointer;
}

nav{
  width: 100% !important;

}


nav ul
{
  display: none;
  transition: all 500ms ease;
}
nav .mobile
{
  display: inline-block;
  float: right;
  padding-right: 15px;      
}





.navbar {
  -moz-transition: all 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -webkit-transition: all 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 150ms cubic-bezier(0.165, 0.84, 0.44, 1);
  flex-direction: row-reverse;
}


.subnav {
  float: right;
  background: #128DCD;
  color: white;
  padding-top: 2rem;
  padding-bottom: 2rem;
  font-size: 0.9rem;
  width: 100%;
  display: none;
}

.menu-icon {
  cursor: pointer;
  z-index: 1;
  margin-top: .4rem;
  display: flex;
  align-items: center;
}

.banner {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: #E7E6E8;
  font-size: 0.8rem;
  width: 100%;
  padding: 2rem .75rem 2rem .75rem;
}


.nav_mini {
  flex-direction: column;
  display: none;

}


.nav_mini:first-of-type {
  padding-left: 0;
}

.nav_mini:last-of-type {
  padding-right: 0;
}

.nav_mini > h3 {
  color: #128DCD;
}


.navColumn {
  margin: 1rem 1rem 0 4rem;
}

.adress {
  padding-right: 2rem;
  line-height: 1.2rem;
  display: inline-block;
  min-width: 28%;
  text-align: center;

}

.adress > p {
  margin-bottom: 0;
}

.orientation {
  width: 100%;
  padding-bottom: 1rem;
}

@media all and (min-width: 38em) {


.nav_mini {
    display: flex;
    margin-bottom: 1rem;
  }
.nav_mini img {
  max-width: 100% ;
}
.menu-item a {
  border-bottom: 0;
  font-size: .95rem;
}

.menu-item.current > a {  /* Marks the current target group item as active */
  color: #128DCD;
}

.banner {
    padding: 2rem 5rem 2rem 5rem ;
}

.subnav {
  position: absolute;
  right: 0rem;
}

.subnav-background {
  display: flex; 
  justify-content: space-between; 
  padding: 1rem 0;
  margin-top: .8rem;
  opacity: 1;
  background-color: #293240;
  color: white
}

.subnav-flex:first-of-type {
  padding-left: 1rem;
}

}

@media all and (min-width: 56em) {


  .banner {
    padding: 2rem 3rem 2rem 3.5rem ;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: column;

  }

  .nav_mini {
    padding: 0 2rem;
    margin-bottom: 0;

  }

  .border-left {
        border-left: 1px solid darkgrey;
  }

  .subnav-border {
      border-left: 1px solid darkgray;
  }


}

@media all and (min-width: 64em) {

  #nav-mobile {
    display: none;
  }

  #nav-desktop {
    display: inherit;
  }

  .sidenav {
    display: none !important;
  }

 .menu-icon {
    display: none;
  }

  nav {
  top: 30px;
  }


  nav ul {
    display: inherit;
    transition: all 500ms ease;
  }

  nav .mobile {
    display: none;      
  }
  .subnav_a {
    text-align: left;
    float: left;
    width: 100%;
    margin-top: 1rem;
  }

  .subnav_a > a {
    padding-right: 2rem;
    font-size: 0.9em;
  }

  .subnav_a > a:hover, a:focus, a:active {
    color: white;
  }

 .subnav-flex {
    border-left: 0;
    margin-bottom: 0;

  }

  .subnav-flex li a {
    font-size: .8rem;
  }

}


@media all and (min-width: 75em) {

  .menu-item a {
  border-bottom: 0;
  }

 .subnav_column > a {
    font-size: .8rem !important;
  }

  .banner {
    padding: 2rem 8rem 2rem 8.5rem ;

  }

  .adress {
    min-width: 28%;
  }

}

@media all and (min-width: 90em) {
  .banner {
    padding: 2rem 12rem 2rem 12.5rem ;

  }
}

@media all and (min-width: 100em) {

 .banner {
    padding: 2rem 16rem 2rem 16.5rem ;

  }

}

@media all and (min-width: 150em) {
  .banner {
    padding-left: 35.5rem;
    padding-right: 35rem;
  }

}

/* -----  3.3 Sticky Footer  ------------------------------------------------ */

.sticky {
  flex-shrink: 0;
  margin-top: 2rem;
}


.footer {
  font-size: .8rem;
  margin: .5rem 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.footer p {
  margin-bottom: 0;
}

.footer-copyright {
  width: 100%;
  text-align: center;
  padding-top: 2rem;
}

@media all and (min-width: 38em) {

}

/* -----  3.4 Main Content  ------------------------------------------------- */


.main {
    width:100%;
    flex: 1 0 auto;
    margin-top: 5rem;

}

/* =====  4 Template-specific Components ==================================== */


.maps {
  margin-top: 100px;
  position: relative;
  padding-bottom: 50%; 
  height: 0;
  overflow: hidden;
}

.maps iframe {
  position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 97% !important;
}

@media all and (min-width: 75em) {
  .maps {
  padding-bottom: 30%; 

}

  .maps iframe {
    height: 92% !important;
}


}

/* ------ 4.5 Gallery ------------------------------------------------------------ */

.gallery{
  width: 100%;
  height: 190px;
  position: relative;
  z-index: 0;
  margin-bottom: 1rem;

}
.slide{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}
.bx-viewport, .bx-wrapper{
  -webkit-box-shadow: none!important;
  -moz-box-shadow: none!important;
  box-shadow: none!important;
  border: none!important;
  width:100%;
  /*max-width: 1024px;*/
  height: 100%;
  margin: 0 auto;

}
.bx-viewport{
    left:0px!important;
}
.bxslider li{
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
     background-size: cover;
} 
.bxslider, .bxslider li{
    height: 100% !important;
}

.lazyload,
.lazyloading {
  opacity: 1;
}

.lazyloading {
  opacity: 1;
  transition: opacity 300ms;
  background: #f7f7f7 url(images/loader.gif) no-repeat center;
}

.lazyloaded {
  opacity: 1;
  transition: opacity 300ms;
}

img.lazyload:not([src]) {
  visibility: hidden;
}

.lightbox-section {
  margin: 2rem 0;
}

.lightbox-section:first-of-type {
  margin-top: 0;
}

.zoom {
  position: absolute;
  bottom: 7px;
  right: 0px;
  color: white;
  background-color: #4A4A4A;
  padding: .4rem .1rem 0 .2rem;
  height: 45px;
  width: 45px;
  text-align: center;
}

.imagesamount {
  position: absolute;
  bottom: 7px;
  right: 45px;
  color: white;
  background-color: #4A4A4A;
  padding: .25rem 1rem .5rem 1rem;
  width: 45px;
  text-align: center;
  height: 45px;
  font-size: 1.2rem;
}

@media screen and (min-width: 38em) {
  .gallery{
    height: 310px;
  }

}

@media screen and (min-width: 42em) {
  .gallery{
    height: 350px;   
  }

}

@media screen and (min-width: 48em) {
  .gallery{
    height: 400px;   
  }

}

@media screen and (min-width: 56em) {
  .gallery{
    height: 430px;    
  }

}

@media screen and (min-width: 60em) {
  .gallery{
    height: 470px;   
  }
  .quotes {
    padding: 3rem 3rem 2rem 3rem;
  }

}

@media screen and (min-width: 70em) {


}
@media screen and (min-width: 75rem) {

}


@media screen and (min-width: 85rem) {


}

@media screen and (min-width: 90em) {

}

@media screen and (min-width: 100rem) {

}

@media screen and (min-width: 1800px) {

  .gallery{
    height: 700px; 
  }

}


/* -------- cart ------- */

.details-table {
  width: 100%;
  padding-bottom: 2rem;

}

.cartCounter {
  font-size: .6rem;
}

.cartCounterBackground {
    border-radius: 50%;
    width: 25px;
    height: 25px;
    padding: 0px;
    background: #fff;
    color: #293240;
    text-align: center;
    font-weight: 600;


}

.cart {
    position: relative;
}

.cart table {
    display: block;
    width: 100%;
    border-spacing: 0;

}

.cart thead {
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: 13px;
}

.cart thead, .cart tbody {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
}

.cart thead th {
    padding-bottom: 20px;
    font-weight: 400;
    text-align: left;
}

.cart thead td {
    padding-bottom: 20px;
    font-weight: 400;
    text-align: left;
}


.cart thead th, .cart thead td, .cart tbody th, .cart tbody td {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: left;
  flex-basis: 20%;

}
.cart thead th:first-child {
  flex-basis: 94%;
}
.cart thead th:nth-child(2) {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    text-align: center;
}
.cart thead th:nth-child(3) {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    text-align: center;
}
.cart thead th:nth-child(4) {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    text-align: center;
}

.cart thead th:nth-child(5) {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    text-align: right;
}

.cart tbody th:first-child {
  flex-basis: 90%;
}
.cart tbody td:nth-child(2) {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    text-align: center;
}
.cart tbody td:nth-child(3) {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    text-align: center;
}
.cart tbody td:nth-child(4) {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    text-align: center;
}
.cart tbody td:nth-child(5) {
    -webkit-flex-basis: 20%;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    text-align: right;
}

.cart thead tr, .cart tbody tr {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
  -moz-box-align: baseline;
  -ms-flex-align: baseline;
  align-items: baseline;
}  

.cart-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 90px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    padding-bottom: 20px;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -moz-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

.cart-item th {
  position: relative;
  -webkit-flex-basis: 40%;
  -ms-flex-preferred-size: 40%;
  flex-basis: 40%;
  padding-left: 64px;
  text-align: left;
  font-weight: 400;
}

.cart-image {
  position: absolute;
  top: 0;
  left: 0;
}

.cart tfoot {
    display: block;
    width: 100%;
    border-top: 1px solid #000;
    padding-top: 20px;
    margin-bottom: 1rem;
}

.cart tfoot tr {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-pack: flex-end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.cart tfoot th, .cart tfoot td {
    padding-top: 5px;
}

.cart tfoot tr>*:last-child {
    padding-left: 8px;
    -webkit-flex-basis: 88px;
    -ms-flex-preferred-size: 88px;
    flex-basis: 88px;
}

.cart tfoot th:last-child, .cart tfoot td:last-child {
    text-align: right;
}

.form-checkout {
    position: relative;
    margin-top: 2rem;
    margin-bottom:2rem;
  
}

.form-shipping {
  margin: 0 2rem 1rem 0 !important;

}


.input-shipping {
  margin-right: 8rem !important;
  text-align: center !important;
}

.input-shipping-active {
  background: #696969 !important;
  color: white !important;
}


.flex-shipping {
  justify-content: flex-start;
}
.form-checkout__section, .form-checkout__section--payment-selection {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.form-checkout label {
    margin-top: 1rem;
    -webkit-flex-basis: -webkit-calc(50% - 24px);
    -ms-flex-preferred-size: calc(50% - 24px);
    flex-basis: calc(50% - 24px);
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
    -moz-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
}

.form-checkout label.is-full {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
}
.form-checkout label.is-1-4 {
    -webkit-flex-basis: -webkit-calc(25% - 24px);
    -ms-flex-preferred-size: calc(25% - 24px);
    flex-basis: calc(25% - 24px);
}
.form-checkout label.is-1-3 {
    -webkit-flex-basis: -webkit-calc(33.33% - 24px);
    -ms-flex-preferred-size: calc(33.33% - 24px);
    flex-basis: calc(33.33% - 24px);
}

.form-checkout label.is-2-3 {
    -webkit-flex-basis: -webkit-calc(66.66% - 24px);
    -ms-flex-preferred-size: calc(66.66% - 24px);
    flex-basis: calc(66.66% - 24px);
}

.form-checkout__section[hidden], .form-checkout__section--payment-selection[hidden] {
    display: none;
}

.form-checkout label.is-checkbox, .form-checkout label.is-option {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-basis: auto;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    margin-right: 36px;
}

.form-checkout label.is-checkbox:last-of-type, .form-checkout label.is-option:last-of-type {
    margin-right: 0;
}

.form-checkout input[type="checkbox"]:checked, .form-checkout .StripeElement[type="checkbox"]:checked, .form-buy input[type="checkbox"]:checked {
    background-image: url(../images/checkmark.svg);
}

.form-checkout label.is-checkbox input, .form-checkout label.is-option input {
    margin-right: 12px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.form-checkout input[type="checkbox"], .form-checkout .StripeElement[type="checkbox"], .form-buy input[type="checkbox"] {
    height: 24px;
    width: 24px;
    background-repeat: no-repeat;
    background-position: center;
}

.form-checkout input, .form-checkout .StripeElement, .form-buy input {
    display: block;
    height: 42px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    padding-right: 8px;
    text-indent: 8px;
    font-family: inherit;
    font-size: 17px;
    color: inherit;
    border: 1px solid #666;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background-color: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-checkout label.is-checkbox em {
    -webkit-flex-basis: -webkit-calc(100% - 36px);
    -ms-flex-preferred-size: calc(100% - 36px);
    flex-basis: calc(100% - 36px);
}

.form-checkout label.is-checkbox em, .form-checkout label.is-option em {
    font-style: normal;
}

.form-checkout__section--payment-selection {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.form-checkout__section, .form-checkout__section--payment-selection {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.form-checkout h2 {
  margin-top: 2rem;
}


.form-checkout label.is-checkbox, .form-checkout label.is-option {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-basis: auto;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
    margin-right: 36px;
}

.form-checkout label.is-option {
    margin-top: 20px;
}

.form-checkout label.is-checkbox input, .form-checkout label.is-option input {
    margin-right: 12px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.form-checkout input[type="radio"]:checked, .form-checkout .StripeElement[type="radio"]:checked, .form-buy input[type="radio"]:checked {
    background-image: -webkit-radial-gradient(#000, #000 40%, #fff 41%, #fff);
    background-image: -moz-radial-gradient(#000, #000 40%, #fff 41%, #fff);
    background-image: radial-gradient(#000, #000 40%, #fff 41%, #fff);
    background-position: center;
}

.form-checkout input[type="radio"], .form-checkout .StripeElement[type="radio"], .form-buy input[type="radio"] {
    height: 24px;
    width: 24px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

.form-checkout__submit {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    margin-top: 50px;
}



.form-checkout__submit .btn-grey {
    -webkit-transition-delay: 150ms;
    transition-delay: 150ms;
}


.cart__update-overlay::after, .btn-grey::after {
    position: absolute;
    left: -webkit-calc(50% - 12px);
    left: calc(50% - 12px);
    top: -webkit-calc(50% - 12px);
    top: calc(50% - 12px);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    border: 2px solid transparent;
    border-top-color: #fff;
    opacity: 0;
    -webkit-animation-name: loading;
    animation-name: loading;
    -webkit-animation-duration: 450ms;
    animation-duration: 450ms;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-transition-duration: 150ms;
    transition-duration: 150ms;
    -webkit-transition-property: opacity;
    transition-property: opacity;
}

.form-checkout {
  position: relative;
  max-width: rem(864);
  margin-top: rem(50);
  margin-bottom: rem(50);
  margin-left: auto;
  margin-right: auto;

  &::after {
    content: ' ';
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: transparentize($color: $color--lightgray-bg, $amount: 0.2);
    animation: fade-in $transition-duration * 2 ease-out forwards;
  }

  
  h2 {
    flex-basis: 100%;
    margin-bottom: 0;
    font-size: rem($font-size--h2);
  }

  > div {
    width: 100%;
  }

  label {
    @extend %label;
    margin-top: rem(35);
    flex-basis: calc(50% - #{rem(48 * 0.5)});
    flex-grow: 0;

    &.is-full {
      flex-basis: 100%;
    }

    &.is-1-3 {
      flex-basis: calc(33.33% - #{rem(48 * 0.5)});
    }

    &.is-2-3 {
      flex-basis: calc(66.66% - #{rem(48 * 0.5)});
    }

    &.is-option {
      margin-top: rem(20);
    }
  }

  input {
    @extend %input;
  }

  .StripeElement {
    @extend %input;
    padding-left: rem(16);
    padding-top: rem(9);
  }

  .error {
    margin-top: rem(10);
  }

  &.is-loading {
    label {
      opacity: 0.7;
    }
  }

  &.is-deactivated {
    &::after {
      display: block;
    }
  }

  @media (max-width: em(640)) {


    label {
      flex-basis: 100%;

      &.is-full,
      &.is-1-3,
      &.is-2-3 {
        flex-basis: 100%;
      }
    }
  }
}



.form-checkout__section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  a {
    text-decoration: underline;
    color: inherit;
  }

  &[hidden] {
    display: none;
  }

  &--payment-selection {
    @extend .form-checkout__section;
    justify-content: flex-start;
  }

  @media (max-width: em(512 - 1)) {
    &--payment-selection {
      display: block;
    }
  }
}


.form-checkout__submit {
  flex-basis: 100%;
  margin-top: rem(50);

  .error {
    margin-top: 0;
    margin-bottom: rem(10);
  }

  .button {
    transition-delay: $transition-duration;
  }

  .form-checkout.is-loading & {
    .button {
      color: transparent;
      transition-delay: 0s;

      &::after {
        opacity: 1;
        transition-delay: $transition-duration;
      }
    }
  }
}

.form-checkout__error {
  margin-top: rem(50);
  flex-basis: 100%;
  color: red;
}


.form-checkout__payment-method {
  flex-basis: 100%;

  > div {
    margin-top: rem(40);
    // border: rem(1) solid $color--gray;
  }
}


@media screen and (max-width: 900px) {
  .input-shipping {
  margin-right: 0rem !important;
  text-align: center !important;
}
  .cart thead {
    display: none;
  }
  .cart-item {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .cart-item th {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100% !important;

  }
  .cart-item td {
      display: block;
      text-align: left !important;
      padding-left: 64px;
      -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
      flex-basis: 100% !important;
  }
  .cart--checkout .cart-item th:nth-child(1) {
    border-top: 1px solid;
    padding-top: 1rem;
  }
   .cart--checkout .cart-item td:nth-child(2) {
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: space-around;
  }
   .cart--checkout .cart-item td:nth-child(3) {
    padding-top: 6px;
    padding-bottom: 6px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: center;
  }
 .cart--checkout .cart-item td:nth-child(4) {
  display: flex;
  justify-content: space-between;
   }

 .cart--checkout .cart-item td:nth-child(5) {
  display: flex;
  justify-content: space-between;
  }
  .cart tfoot tr {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
  .cart tfoot tr>*:first-child {
    -webkit-flex-basis: 180px;
    -ms-flex-preferred-size: 180px;
    flex-basis: 180px;
    text-align: left;
  }
  .cart tfoot tr>*:last-child {
    -webkit-flex-basis: 72px;
    -ms-flex-preferred-size: 72px;
    flex-basis: 72px;
  }
  .form-checkout label {
    -webkit-flex-basis: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }

  .form-checkout label.is-1-4 {
    flex-basis: 100%;
  }

  .cart-image {
    padding-top: 1rem;

  }
}

@media screen and (min-width: 901px) {
  small {
    display: none;
  }
}