/*@font-face{font-family:trade gothic lt std;font-style:normal;font-weight:400;src:local('Trade Gothic LT Std'),url(https://fonts.cdnfonts.com/s/14462/trade-gothic-lt-std-58a78e64434a9.woff) format('woff')}@font-face{font-family:trade gothic lt std;font-style:normal;font-weight:700;src:local('Trade Gothic LT Std'),url(https://fonts.cdnfonts.com/s/14462/trade-gothic-lt-std-bold-condensed-no-20-5872def1d27d8.woff) format('woff')}
*/

@font-face{
  font-family:trade gothic lt std;
  font-style:normal;
  font-weight:400;
  src:local('Trade Gothic LT Std'),
  url(https://www.ucc-coffee.ch/shop/font/trade-gothic-lt-std-58a78e64434a9.woff) format('woff')
}

@font-face{
  font-family:trade gothic lt std;
  font-style:normal;
  font-weight:700;
  src:local('Trade Gothic LT Std'),
  url(https://www.ucc-coffee.ch/shop/font/trade-gothic-lt-std-bold-condensed-no-20-5872def1d27d8.woff) format('woff')
}

@font-face{font-family:avenir;font-style:normal;font-weight:400;src:local('Avenir'),url(https://www.ucc-coffee.ch/shop/font/avenir_roman_12.woff) format('woff')}
/*
@font-face {
  font-family: 'Trade Gothic LT Std';
  src: url('https://ucc-coffee.ch/shop/font/TradeGothicLTStd-BdCn20.otf') format('opentype'),
  url('https://ucc-coffee.ch/shop/font/TradeGothicLTStd-BdCn20.woff2') format('woff2'),
  url('https://ucc-coffee.ch/shop/font/TradeGothicLTStd-BdCn20.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}*/

* {
  padding: 0px;
  margin: 0px;
}

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

body {
  font-family: "Avenir";
  font-size: 12px;
}


header {
  display: flex;
  padding: 2em;
  flex-wrap: wrap;
}

header img {
  display: block;
  height: 15vh;
  min-height: 120px;
  object-fit: cover;
  object-position: 50%;
}

header > div:last-child {
  width: 80%;
  padding-left: 4em;
  flex: 1 1 1070px;
}

header h1 {
  font-size: 5em;
  font-weight: bold;
}

header p {
  font-size: 1.5em;
  border: 0.2em solid #000000;
  width: 32em;
  padding: 0.0em 0.5em;
  margin-left: 1em;
  background-color: #ffffff;
}

.red-border {
  border: 0.2em solid #c0392b;
  height: 2.5em;
  width: 15%;
  position: relative;
  top: -2.4em;
  left: 1em;
  z-index: -1;
}

main {
  padding-left: 4em;
  padding-right: 4em;
  display: flex;
  margin-top: 1em;
  margin-bottom: 1em;
  flex-wrap: wrap;
}

main > div, main > aside {
  width: 50%;
  max-height: 52em;
  min-width: 600px;
  flex: 1 1 600px;
}

main div:first-child {
  margin-top: 3em;
  padding-right: 2em;
}

.black-line {
  margin-top: 2em;
  margin-bottom: 2em;
  display: block;
  border: 0.2em solid #000000;
  width: 80%;
}

main h2 {
  font-size: 4em;
  color: #C33027;
  font-weight: bold;
}

main p {
  font-size: 2.5em;
  width: 90%;
}

main img {
  width: 90%;
  max-height: 32em;
  object-fit: cover;
  object-position: 50%;
  right: 4em;
  float: right;
  position: relative;
  top: -5.5em;
}

.black-border {
  border: 0.4em solid #000000;
  position: relative;
  right: 2.8em;
  margin-left: auto;
  left: auto;
  width: 15em;
  height: 6em;
}


a {
  text-decoration: none;
  position: relative;
  top: -3em;
  left: -0.5em;
  background-color: #c0392b;
  color: white;
  border: none;
  border-radius: 1em;
  font-size: 2.6em;
  font-weight: bold !important;
  padding: 1.5em 1em;
  cursor: pointer;
  box-shadow: 0 0.5em 0.75em rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, border-radius 0.3s ease;
}

a:hover {
  background-color: #a93226;
  border-radius: 0.1em;
}


footer {
  display: flex;
  background-color: #c0392b;
  color: #ffffff;
  margin-top: -0.5%;
  padding-top: 1em;
  vertical-align: center;
  justify-content: center;
  flex-wrap: wrap;
}

footer div {
  width: 50%;
  min-width: 600px;
  flex: 1 1 600px;
}

footer div:nth-child(2) {
  display: flex;
}

footer h3 {
  border-left: 8px solid #ffffff;
  width: 48%;
  font-size: 3em;
  font-weight: bold;
  margin: 0.5em 0em;
  padding-left: 1.5em;
  vertical-align: center;
}

footer p {
  position: relative;
  margin: 1em 0em;
  font-size: 1.8em;
}

footer > div:first-child {
  display: flex;
  text-align: center;
  vertical-align: center;
  justify-content: center;
}

footer img {
  max-width: 16%;
  height: fit-content;
  padding-right: 2em;
  min-width: 140px;
  flex: 1 1 140px;
}

footer img:nth-child(3){
  max-width: 15%;
}

h1, h2, h3, a, a {
  font-family: "Trade Gothic LT Std";
  font-style: normal;
  font-weight: normal;
}

@media (max-width: 600px) {
  body {
    font-size: 0.5em !important;
    overflow-x: hidden;
  }

  main{
    overflow-x: hidden;
    padding-left: 1em;
    padding-right: 1em;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  main > div, main > aside, main p {
    width: 450px;
  }

  a {
    left: 0;
  }

  footer div{
    width: 100% !important;
  }

  footer img {
    max-width: 15%;
  }

  footer div:last-child {
    display: flex;
    flex-wrap: wrap;
  }

  footer h3, footer p {
    flex: 1 1 300px;
    padding-left: 3em;
  }

  footer p{
    padding-left: 5.8em;
  }

}


@media (max-width: 1600px) and (min-width: 900px)
{
  footer, main, header {
    zoom: 0.6;
  }
}

@media (max-width: 900px) and (min-width: 500px)
{
  footer, main, header {
    zoom: 0.4;
  }
}

@media (max-width: 500px) {
  body {
    font-size: 0.5em !important;
    overflow-x: hidden;
    zoom: 0.93;
  }

  header h1 {
    font-size: 4.8em;
  }

  header p {
    width: auto;
  }

  header > div {
    padding-left: 1em !important;
  }

  main{
    overflow-x: hidden;
    padding-left: 1em;
    padding-right: 1em;
    width: 120vw;
    min-width: 0;
    max-width: 100vw;
  }

  main > div, main > aside, main p, main h2{
    width: 100vw;
  }

  main h2 {
    font-size: 3em;
  }

  footer {
    width: 100%;
    display: block;
  }

  footer div{
    width: 100vw !important;
    min-width: 100vw;
    padding-bottom: 2em;
  }

  footer > div:first-child {
    display: block;
  }

  footer div:last-child {
    width: 100vw;
    display: block;
  }



  footer h3, footer p, footer div {
    padding-left: 3em;
  }

  footer p{
    padding-left: 5.8em;
  }

}