/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/roboto-v30-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-300.svg#Roboto') 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-900 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/roboto-v30-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/roboto-v30-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/roboto-v30-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/roboto-v30-latin-900.woff') format('woff'), /* Modern Browsers */
       url('fonts/roboto-v30-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/roboto-v30-latin-900.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* titillium-web-900 - latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 900;
  src: url('fonts/titillium-web-v15-latin-900.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/titillium-web-v15-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/titillium-web-v15-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/titillium-web-v15-latin-900.woff') format('woff'), /* Modern Browsers */
       url('fonts/titillium-web-v15-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/titillium-web-v15-latin-900.svg#TitilliumWeb') format('svg'); /* Legacy iOS */
}
*{
  position: relative;
  margin: 0; padding: 0;
  box-sizing: border-box;
  border: none;
  outline: none;
  user-select: none;
  text-rendering: geometricPrecision;
}
body{
  background: #09152D url(img/bg-top.jpg) no-repeat top center;
  background-size: contain;
  font-size: 3.5vw;
  color: #09152D;
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  text-decoration: none;
}
main{

}
section{
  padding: 2em 1em;
  width: 100%;
}
.logo{
  font-size: 1.5em;
  color: #E20048;
}
.s-1{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border:none;
  padding-bottom: 0;
}
img{
  display: block;
  width: 100%;
}
h1{
  font-weight: 900;
  margin-bottom: .25em;
  font-size: 3.5em;
  font-family: 'Titillium Web', sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  line-height: .8em;
}
i{
  display: block;
  font-style: normal;
  color: #E20048;
}
h2{
  font-weight: 700;
  font-size: 1em;
  margin-bottom: 2em;
}
p{
  line-height: 1.5em;
  margin-bottom: 2em;
  font-weight: 300;
}
ul{
  padding: 0 0 2em 2em;
}
.btn{
  display: inline-block;
  border-radius: 10em;
  padding: 1em 2em .9em;
  text-transform: uppercase;
  font-weight: 900;
}
.btn-a{
  background: #E20048;
  border: .2em solid #E20048;
}
.btn-b{
  color: #E20048;
  border: .2em solid #E20048;
}
.btn-c{
  color: #FFFFFF;
  border: .2em solid #FFFFFF;
}
nav{
  display: flex;
  gap: 2em;
  font-weight: bold;
}
nav.top{ display: none;}
a{
  color: #FFFFFF;
  text-decoration: none;
}
.section.s-1{
  padding-bottom: 0;
}
.s-2 {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
}
.s-2 p{color: #FFFFFF}
.s-3 {
  display: grid;
  align-items: center;
  justify-content: center;
  grid-template-areas:
  'design'
  'marketing'
  'talents';
}
#b-design{
  grid-area: design;
}
#b-marketing{
  grid-area: marketing;
}
#b-talents{
  grid-area: talents;
}
.ibox{display: none;}
.box{
  background: #E20048;
  color: #fff;
  height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-shadow: 0 0 0em rgba(0, 0, 0, 0.31);
}
.box, .box *{
  transition: opacity .5s ease-in-out,
              height .5s ease-in-out,
              width .25s ease-in-out,
              box-shadow .5s ease-in-out,
              transform .5s ease-in-out,
              padding .25s ease-in-out;
}
.box .img{
  width: 100%; height: 100%;
  background-position: center;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.box h2{
  font-size: 1.5em;
  margin-bottom: 1em;
  text-transform: uppercase;
}
#b-marketing .img{background-image: url(img/bg-1.jpg)}
#b-design .img{background-image: url(img/bg-2.jpg)}
#b-talents .img{background-image: url(img/bg-3.jpg)}
.box .teaser{
  padding: 0em;
  width: 0; height: 100%;
  overflow: hidden;
  transform: scale(0);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}
.box h1{
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 1em;
  padding: 0.9em;
  margin: 0;
  background: #b9053e;
  position: absolute; top: 0; left: 0em;
  width: 100%; height: 2.5em;
  overflow: hidden;
}
.box label{
  position: absolute; top: 0; left: 0; bottom: 0; right: 0;
  background: rgba(0,0,0,0.35);
}
#o-marketing:checked ~ #b-marketing label,
#o-design:checked ~ #b-design label,
#o-talents:checked ~ #b-talents label{
  display: none;
}
#o-marketing:checked ~ #b-marketing h1,
#o-design:checked ~ #b-design h1,
#o-talents:checked ~ #b-talents h1{
  opacity: 0;
}
#o-marketing:checked ~ #b-marketing .teaser,
#o-design:checked ~ #b-design .teaser,
#o-talents:checked ~ #b-talents .teaser{
  width: 25em; height: 25em; padding: 1em; transform: scale(1);
}
#o-marketing:checked ~ #b-marketing.box,
#o-design:checked ~ #b-design.box,
#o-talents:checked ~ #b-talents.box{
  width: 40em; height: 25em; box-shadow: 0 0 1em rgba(0, 0, 0, 0.31); z-index: 1; max-width: 100vw;}
.s-4{
  color: #FFF;
}
.s-7{
  background: #FFFFFF;
}
.icon-boxes{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}
.icon-boxes div{
  background: #09152D;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 2em 0 0;
}
.icon-boxes div h2{
  text-transform: uppercase;
  font-size: 1.3em;
}
.icon-boxes div img{
  width: 60%;
}
.pricing-boxes{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em;
}
.pricing-boxes div{
  background: #09152D;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  aspect-ratio: 1.2/1;
  padding: 2em;
}
.pricing-boxes div h2{
  text-transform: uppercase;
}
.pricing-boxes div small{
  display: block;
}
.portfolio-boxes{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1em;
}

.footer{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: .5em;
  flex-direction: column;
  gap: 1em;
}

.footer nav{
  font-size: .8em;
  color:#FFFFFF;
}
.footer .logo{
  color: #FFFFFF;
}
.overlay{
  position: fixed; top: 0; left: 0; bottom: 0; right: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(1em);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1em;
  z-index: 2;
}
.overlay a{
  color: #09152D;
  text-decoration: underline;
}
.overlay .modal{
  background: #FFF;
  padding: 3em 1em 1em;
  overflow-x: auto;
  max-height: 100%;
  max-width: calc(2200px - 8em);
}
.overlay .modal label{
  display: flex;
  align-items: center;
  justify-content: center;
  position:absolute; top: 0; right: 0;
  padding: .5em;
  font-size: 2em;
  width: 1em; height: 1em;
  background: rgb(11,13,19);
  color: #FFFFFF;
  z-index: 1
}
/******************************************************************************** nav ***/
label{cursor: pointer;}
.nav{display: none;}
#contact,
#imprint,
#privacy{
  display: none;
}
#o-contact:checked ~ #contact{display: flex;}
#o-imprint:checked ~ #imprint{display: flex;}
#o-privacy:checked ~ #privacy{display: flex;}
/******************************************************************************** desktop ***/
@media only screen and (min-width: 768px) {
  body{
      font-size: 1.40vw;
  }
  main{
    text-align: left;
  }
  section{
    padding: 4em;
  }
  .section.s-1{
    padding-bottom: 0;
  }
  nav.top{ display: flex;}
  .s-2 {
    display: flex;
    flex-direction: row;
  }
  .s-2 p{color: #09152D}
  .s-2 > div{
    width: 100%;
  }
  .s-2 > article{
    width: 47em;
  }
  .s-2 > article p{
    width: 20em;
  }
  .s-3 {
    grid-template-areas: 'marketing design talents';
    grid-auto-columns: 1fr 1fr 1fr;
    height: 25em;
  }
  .box{
    height: 20em;
  }
  .box h1{
    display: block;
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
    padding: 0.9em;
    margin: 0;
    background: #b9053e;
    transform-origin: top left;
    transform: rotate(90deg);
    position: absolute; top: 0; left: 2.5em;
    width: 20em; height: 2.5em;
    overflow: hidden;
  }
  .s-4{
    display: grid;
    grid-template-areas:
    'design marketing'
    'talents talents';
    gap: 2em;
  }
  .s-7 article{
    width: 30em;
  }
  .s-7 article p{
    width: 20em;
  }
  .portfolio article,
  .portfolio article p{
    width: 50em;
  }
  .icon-boxes{
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .pricing-boxes{
    grid-template-columns: 1fr 1fr 1fr;
  }
  .portfolio-boxes{
    grid-template-columns: 1fr 1fr;
  }
  #design{
    grid-area: design;
  }
  #marketing{
    grid-area: marketing;
  }
  #talents{
    grid-area: talents ;
  }
  .footer{
    flex-direction: row;
    gap: 1em;
  }
}