@media only screen and (max-width : 2400px)  { :root { --sfs: 1.1vw !important; --sms: 1.6vw !important; --shs: 2.5vw !important; --sshs: 3.5vw !important;} }
@media only screen and (max-width : 1600px)  { :root { --sfs: 1.3vw !important;  --sms: 1.5vw !important; --shs: 3vw !important; --sshs: 3.5vw !important;}}
@media only screen and (max-width : 1200px)  { :root { --sfs: 1.5vw !important;  --sms: 2.4vw !important; --shs: 3vw !important; --sshs: 4vw !important;}}
@media only screen and (max-width : 1024px)  { :root { --sfs: 1.8vw !important;  --sms: 2.5vw !important; --shs: 3vw !important; --sshs: 4vw !important;}}
@media only screen and (max-width : 880px)  { :root { --sfs: 1.8vw !important;  --sms: 2.5vw !important; --shs: 3vw !important; --sshs: 4vw !important;}}
@media only screen and (max-width : 500px)  { :root { --sfs: 4vw !important;  --sms: 5vw !important; --shs: 6vw !important; --sshs: 7vw !important;}}

*, a {font-family: 'Montserrat', sans-serif; font-size: var(--sfs); color: #000;}


h1, h2 {font-size: var(--shs);}
h2 {font-size: var(--sms);}
h3 {font-size: var(--sms);}
.logo {position: absolute; top: 4vw; right: 4vw; width: 20vw; }
.logo2 {position: relative;  width: 30vw; opacity: 0.1; }

.inbox {float: left; width: 100%; position: relative; padding: 2vw 5vw;}
.inbox-1 {margin-top: 15vw;}
.inbox-30 {float: left; width: 30%; position: relative;}
.inbox-35 {float: left; width: 35%; position: relative;}
.inbox-40 {float: left; width: 40%; position: relative;}
.inbox-45 {float: left; width: 45%; position: relative;}
.inbox-50 {float: left; width: 50%; position: relative;}
.inbox-55 {float: left; width: 55%; position: relative;}
.inbox-60 {float: left; width: 60%; position: relative;}
.inbox-65 {float: left; width: 65%; position: relative;}
.inbox-70 {float: left; width: 70%; position: relative;}

.image-overflow {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 20;}
.text-overflow {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 21;}
.text-overflow p, .text-overflow li, .text-overflow em  {color: white !important;}

.margin-left-35 {margin-left: 35vw;}
.margin-left-50 {margin-left: 50vw;}
.margin-left-60 {margin-left: 60vw;}

.bigger-font p {font-size: var(--shs);}

.arrow-down {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-2vw);
  }
  60% {
    transform: translateY(-1vw);
  }
}

.icon64 {width: 48px;}

.margin-top-5 {margin-top: 5vw;}
.margin-top-10 {margin-top: 10vw;}

.height-25 {height: 25vw;}
.height-10 {height: 10vw;}
.height-15 {height: 15vw;}

.page-header {margin-top: 10vw; text-align: center; font-size: 4vw; font-weight: bold;}
.page-header-sub {text-align: center; font-size: var(--sms); font-weight: normal;}

.color-yellow {color: #f68029 !important;}
.orange {color: #f68029 !important;}

.language-selector {position: absolute; top: 2.2vw; left: 8vw; z-index: 50; }
.language-selector a:link, .language-selector a:visited {font-size: 1.8vw; font-weight: 700; transition: 0.2s; text-decoration: none;}
.language-selector a.active:link, .language-selector a.active:visited {color: #f68029; }
.language-selector a:hover {color: #f68029;}

.box-container {float: left; width: 100%; position: relative; padding: 7vw 0;}
.box-contact {background-color: #f68029;}
.box-23 {background-color: #f2f2f2;}

.menu-toggler {background: rgba(0,0,0,1); position: fixed; top: 2vw; left: 0; z-index: 100; width: 4vw; height: 4vw; border-top-right-radius: 0.3vw; border-bottom-right-radius: 0.3vw; padding: 1vw; transition: 0.2s;}
.menu-toggler img {width: 100%; float: left; opacity: 0.7; transition: 0.2s; cursor: pointer;}
.menu-toggler img:hover {opacity: 1; }
.menu-toggler-active {left: 24.5vw;}
 
.close-toggler {left: auto; right: 0;  border-top-left-radius: 0.3vw; border-bottom-left-radius: 0.3vw; border-top-right-radius: 0vw; border-bottom-right-radius: 0vw;}

.underline {position: absolute; bottom: -2vw; width: 5vw; height: 0.5vw; background-color: #ddd; display: block;}
.r-underline {right: 5vw;}

.materialy-top-margin {margin-top: -8vw;}

.team-box-container {width: 80vw; margin-top: 5vw;}
.contact-box-container {width: 80vw; margin-top: 5vw; background-color: #f2f2f2; border-radius: 2vw;}

.team-box-item {width: calc(33.33% - 4vw); float: left; margin: 5vw 2vw; background-color: #f2f2f2; padding: 3vw; padding-top: 10vw; color: #000; border-radius: 2vw; font-size: var(--sfs); z-index: 5; position: relative;}
.team-box-item h3 {  text-align: center; margin-bottom: 2vw;} 
.team-box-item-image {position: absolute; top: -7.5vw; right: 4vw; border-radius: 15vw; width: 15vw; height: 15vw; overflow: hidden; box-shadow: 0vw 0.5vw 2vw -0.5vw rgba(0,0,0,0.27);}
.team-box-item-image img {float: left; width: 100%;  height: 100%;   }

.big-text-1 {font-size: 5vw; position: relative; z-index: 5; font-weight: bold; line-height: 100%; padding-left: 5vw; margin-top: 5vw;}
.big-text-1 span {font-size: 5vw;}
.big-text-2 {position: relative; z-index: 5;  padding-left: 5vw; margin-top: 4vw; width: 60vw;}
.big-text-2 p, .big-text-2 strong {font-size: var(--sms); line-height: 120%; margin-top: 2vw; }

h1.header-text-2 {font-size: var(--sshs); position: relative; z-index: 5; line-height: 100%; padding-left: 5vw; color: #f68029;}
h1.header-text-3 {font-size: var(--sshs); position: relative; z-index: 5; line-height: 100%; padding-right: 5vw; color: #f68029; text-align: right; width: 100%;}
h1.header-text-6 {font-size: var(--sshs); position: relative; z-index: 5; line-height: 100%; padding-left: 5vw; color: #fff; margin-bottom: 4vw;}

.td-map-box {position: relative;}
.td-map-cover {position: absolute; z-index: 500; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0.2; cursor: pointer;}
iframe {filter: grayscale(100);}

.block-text-2 {padding-left: 5vw; margin-top: 4vw; width: 50vw;}
.block-text-2 p, .block-text-2 li {font-size: var(--sfs);}
.block-text-2 ul {margin-top: 5vw;}


.block-text-3 {padding-left: 5vw; margin-top: 4vw; width: 50vw;}
.block-text-3 p, .block-text-3 li, a.menu-item {font-size: var(--sfs);}

.menu-box {background: rgba(0,0,0,1); width: 25vw;  position: fixed; top: 2vw; left: -25vw;  border-bottom-right-radius: 0.3vw; padding: 4vw; z-index: 5000; transition: 0.2s;}
a.menu-item {float: left; width: 100%; cursor: pointer; color: #fff !important; transition: 0.2s; padding: 0.5vw; text-transform: uppercase;}
a.menu-item:hover {color: #f68029 !important;}
.menu-box-active {left: 0;}

.l-arrow-1 {position: absolute; top: -5vw; left: 0vw; width: 60vw; z-index: -1;}
.r-arrow-1 {position: absolute; top: 10vw; right: 0vw; width: 30vw; z-index: 5; }
.r-arrow-2 {position: absolute; top: 15vw; right: 0vw; width: 45vw; z-index: 4;}
.l-arrow-2 {position: absolute; top: -5vw; left: 0vw; width: 50vw; z-index: -1;}
.r-arrow-3 {position: absolute; top: 55vw; right: 0vw; width: 25vw; z-index: 2;}
.recycling-1 {position: absolute; top: 30vw; right: 25vw; width: 30vw; z-index: -1;}
.recycling-2 {position: absolute; top: 40vw; right: 5vw; width: 50vw; z-index: 0; opacity: 0.1;}
.recycling-3 {position: absolute; top: -5vw; right: 5vw; width: 35vw; z-index: 0; }

.side-padding {padding: 0 2.5vw;}
.box-contact-padding {margin: 4vw 0;}

.frame-box {width: 33.33%; padding: 2.5vw; float: left;}
.frame-box h2 {margin-top: 3vw; color: #f68029; margin-bottom: 3vw;}
.frame-box-inner {font-size: var(--sfs);}
.img-box {overflow: hidden; float: left; width: 70%; border-radius: 50%;}
.img-box:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.img-box img {float: left; width: 100%;}

footer {background-color: #333; color: #fff;float: left; width: 100%;}
footer .container div {float: left; width: 100%; text-align: center; color: #fff; padding: 10px 10px;}
footer .container a {color: #fff;}
.arrow-down {position: absolute; bottom: -2vw; left: calc(50% - 2vw); width: 4vw; cursor: pointer; transition: 200ms; z-index: 50;}
.arrow-down:hover  {transform: scale(1.2);}

.display-grid {display: grid !important; grid-auto-flow: column;}
.display-inline-grid {display: inline-grid !important;}

.td-whitefield {position: fixed; width: 100%; height: 100%; background-color: rgba(202, 174, 70, 0.95); z-index: 101; display: flex; justify-content: center; align-items: center; display: none; }

/* LOGO BOX */
.logo-box {background-color: #f68029;  width: 100%; height: 25vw; margin-top: -3vw;}
.logo-y {width: 25vw;}

/* CONTACT */

.contact-box {width: 50vw;}

body {overflow-x: hidden;}

@media only screen 
and (max-width : 1524px)  { 
  #formular {height: 65vw;}
}


@media only screen 
and (max-width : 1290px)  { 
  #formular {height: 70vw;}
}

@media only screen 
and (max-width : 1110px)  { 
  #formular {height: 80vw;}
}

@media only screen 
and (max-width : 880px)  { 
  #formular {height: 100vw;}
}


@media only screen 
and (min-device-width : 300px) 
and (max-device-width : 736px) 
and (orientation : portrait) { 
  #formular {height: 270vw;}

  .language-selector a:link, .language-selector a:visited { font-size: 3.5vw;}
  .language-selector {font-size: 2vw; left: 17vw;}

  .menu-toggler {width: 12vw;height: 12vw;  padding: 3vw;}
  .menu-box { width: 50vw;  left: -50vw;  padding: 8vw;}
  .menu-toggler-active { left: 49.5vw;}
  .menu-box-active {    left: 0;}

  a.menu-item {font-size: 4vw !important; padding: 2vw 0.5vw;}

  .frame-box {    width: 100vw;}
  .materialy-top-margin {margin-top: 5vw;}
.logo {width: 28vw;}
.contact-box {width: 80vw;}
.r-arrow-2 {top: 25vw; right: -10vw;}
.r-arrow-3 {top: 65vw; right: 0vw;}
.recycling-3 {right: -56vw;top: 8vw; width: 85vw; }
.block-text-2 {width: 70vw;}

.arrow-down {display: none;}
.box-container {overflow: hidden;}
.text-overflow {padding: 5vw;}
.text-overflow .bigger-font {text-align: center;}
.underline { display: none;}

input, textarea {font-size: var(--sfs) !important;}

.img-banner {min-height: 75vw; overflow: hidden;;}
.img-banner img {position: absolute; height: 75vw; top: 50%; left: 50%; transform: translate(-50%, -50%); width: auto !important;}

.logo-box {background-color: #EDC538;  width: 100%; height: 60vw; margin-top: -3vw;}
.logo-y {width: 50vw;}


.team-box-item { width: calc(100% - 4vw); margin-top: 35vw; padding-top: 35vw;}
.team-box-item-image {position: absolute; top: -25vw; right: 13vw; border-radius: 50vw; width: 50vw; height: 50vw; overflow: hidden; box-shadow: 0vw 0.5vw 2vw -0.5vw rgba(0,0,0,0.27);}
.team-box-item-image img {float: left; width: 100%;  height: 100%;   }
.big-text-1 { margin-top: 13vw;}

.menu-toggler {border-top-right-radius: 1.3vw; border-bottom-right-radius: 1.3vw;}
.menu-box {  border-bottom-right-radius: 1.3vw; }

}