* {
  margin: 0;
  padding: 0;
}

:root {

  --black: #000;
  --white: #fff;
  --chartreuse: #F4FF2A;
  --rosa: #FF98CB;
  --magenta: #FF64F3;
  --knallMagenta:#FF42F0;
  --rouge: #FF0045;
  --lila: #B14EFF;
  --starklila: #A300FF;
  --glowinthedark: #F9FFA6;
  --grau: #FAFAFA;
  --orange: #FFCC00;

  --project-col: var(--lila);
  --active-col:var(--knallMagenta);
  --title-col:var(--black);

  --content-width: 70rem;
  --bg-col: transparent;
  --schwarz: #000000;
}

html {
  font-family: 'jost', sans-serif, 'CCSymbols';
  color: var(--black);
}

.dark .pagecontent{
  color: var(--white);
}
img {
  max-width:100%;
  display:block;
}

.imgRound img{
 border-radius:50%;

}

.imgOutline img{
 outline:0.35rem solid black;
}

.imgBorder img{
  border:0.35rem solid black;
}

body {

}
li {
  list-style: none;
}
a {
  color: currentColor;
  text-decoration: none;

}

p{
  font-size:1.2em;
  line-height:1.6em;
  margin-bottom:1em;
}

.textCentered p{
  text-align:center;
}

.blocktype-markdown li{
  font-family: 'jost', sans-serif, 'CCSymbols';
  font-size:1.2em;
  line-height:1.6em;
  margin-bottom:1em;
  list-style:disc;
  list-style-position: outside;
  margin-left:2em;
}

strong{
  font-weight:400;
  font-family: 'jost', sans-serif, 'CCSymbols';
  background-color:#D6AAFF;
}

strong::before{
  content:"\00a0";
  background-color:#D6AAFF;
}

strong::after{
  content:"\00a0";
  background-color:#D6AAFF;
}

h1{
  font-size:1.8rem;
  font-weight:600;
  font-family:'bagnard', serif, 'CCSymbols';
  margin-bottom:.3em;
  margin-top:2em;
}

@media screen and (min-width: 850px) {
  h1{
    font-size:2.5rem;
  }
}

h2{
  margin-top:1.5em;

  font-weight:700;
  font-family: 'jost', sans-serif, 'CCSymbols';
}

h3{
  margin-top:1em;

  font-weight:700;
  font-family: 'jost', sans-serif, 'CCSymbols';
}

* > h1:first-child,
* > h2:first-child,
* > h3:first-child{
  margin-top:0;
}

h4{
  font-size:1.2rem;
  font-weight:700;
  font-family: 'jost', sans-serif, 'CCSymbols';

}

.textCentered h1,
.textCentered h2,
.textCentered h3,
.textCentered h4{
  text-align:center;
}

blockquote{
  font-family:'jost', sans-serif, 'CCSymbols';
  font-size:1.8rem;
  font-weight:300;
  font-style:italic;
}

.textCentered blockquote{
  text-align:center;
}

@media screen and (min-width: 850px) {
  blockquote{
    font-size:2.5rem;
  }
}

main.loading{
display:none;
}

/*-----------------------------NAVIGATION------------------------*/
header.navigation {
  position:relative;
  background-color:var(--black);
  border-bottom: 0.25rem solid var(--black);
  width:100%;
  z-index:300;

  font-family: 'Jost', sans-serif, 'CCSymbols';
  font-size: 1.2rem;
  font-weight:700;
  text-transform:uppercase;


}

.nav-list{
  list-style:none;
  display:flex;
  flex-wrap: wrap;
  gap:0.25rem;
}

.nav-list li{
  flex-grow: 1;
  background-color:var(--chartreuse);

  text-align:center;
  cursor:pointer;
  transition: all .5s;
}

.nav-list li a {
    display:block;
    padding: .75rem 1rem;
}

.nav-list li.title{

  flex-grow: 1;
  flex-shrink: 0;
  flex-basis:90%;
  text-align:left;
}

.nav-list li:hover{
  background-color:var(--knallMagenta);
}

.nav-list li.active{

  outline:0;
  background-color:var(--active-col);
}

.nav-logo {
  margin:-.75rem 0;
  height:calc(100% + .75rem);
  width:auto;
  display:inline-block;
}

.nav-logo.defaultLogo{
display:inline-block;
}

 .nav-logo.darkLogo{
display:none;
}


@media (min-width: 850px) {

.dark  .nav-logo.defaultLogo{
 display:none;
 }

 .dark  .nav-logo.darkLogo{
  display:inline-block;
  }

}






@media (min-width: 850px) {
  header.navigation {
    position:fixed;
    background-color:transparent;
    border-bottom: none;
  }

  .nav-list li.title{
    flex-basis:20rem;
  }
  .nav-list li{
    flex-grow: 0;
    background-color:transparent;
  }
  .nav-list li:hover{
    background-color:var(--chartreuse);
  }

  .nav-list li.active{
    outline:0.2rem solid var(--black);
    outline-offset: -.5rem;
    background-color:transparent;
  }

  header.navigation.dark   .nav-list li.active{
    outline:0.17rem solid var(--white);
  }

}

@media (min-width: 850px) {
  header.navigation.dark .nav-list li{
    color: var(--white);
  }
}
/*---------------------------ContentLinks----------------------------*/
.content a {
  color: currentColor;
  text-decoration: underline;

}

 a.superlink{
  color: var(--schwarz);
  display:inline-block;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight:400;
  background-color:var(--actionlink-col);
  padding:.25em 1em;
  margin-top:1em;
  border:0.2rem solid black;
  box-shadow: 0px 0px 0px #000;
}

 a.superlink:hover {
    background-color:var(--actionlink-hover-col);
    translate:3px -6px;
    box-shadow: -3px 6px 0px #000;
}


.dark a.superlink{
  background-color:var(--dark-actionlink-col);
}

.dark a.superlink:hover {
  background-color:var(--dark-actionlink-hover-col);
}



/*---------------------------HomeLinks----------------------------*/

.pagelink a{
  color: currentColor;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight:400;
  font-size:1.2em;
}

.pagelink a:hover {
  color: currentColor;
  background-color:var(--chartreuse);
  padding:.25em;
  text-decoration: none;
  outline:0.2rem solid black;
  margin-left:-.25em;

}


.thepagelink svg{
  display:inline-block;
  translate: 0em 1.2rem;
}

.thepagelink:hover svg{
  transition: all 0.5s ease;
  display:inline-block;
  translate: .5em 1.2rem;
}





/*--------------------------MAINCONTENT---------------------*/



section.strip{
  background-color: var(--bg-col);
  padding-top: 4em;
  padding-bottom:4em;
  overflow:hidden;
  z-index:-200;
}

section.strip.kontaktstrip{

  padding-top: 2em;
  padding-bottom:2em;

}

section.strip.title + section.strip{
    padding-top: 1em;
    padding-bottom:4em;
  }

.dark section.strip.kontaktstrip{
  background-color: var(--dark-bg-col);
}

@media screen and (min-width: 850px) {
  section.strip{
    padding-top: 5em;
    padding-bottom:5em;
  }

section.strip.title + section.strip{
    padding-top: 1em;
    padding-bottom:5em;
  }
}

section.reel{
height:66vh;
padding:0;
position:relative;
background-color: var(--lila);
background: linear-gradient(0deg, rgba(214,170,255,1) 0%, rgba(163,0,255,1) 22%, rgba(163,0,255,1) 57%, rgba(214,170,255,1) 100%);
background: radial-gradient(circle, rgba(163,0,255,1) 10%, rgba(163,0,255,1) 37%, rgba(214,170,255,1) 100%);
}

@media screen and (min-width: 850px) {
  section.reel{
    height:100vh;
  }
}

section.strip.title{
  background-color: var(--project-col);
  text-align:center;
  text-transform:uppercase;
  padding-top:4em;
  padding-bottom:1em;

}

@media screen and (min-width: 850px) {
  section.strip.title{
    padding-top:5em;
    padding-bottom:2em;
  }
}

section.strip.title h1{
font-size:4rem;
font-family: 'jost', sans-serif, 'CCSymbols';

}



.content-wrapper{
  padding: 0;
  max-width: var(--content-width);
  margin: 0 auto;
}


section.grid{
position:relative;
z-index:100;
}

section.grid.noSpace{
position:relative;
height:0;
z-index:100;
}

section.grid.noSpace figure{
position:absolute;
pointer-events:none;
top:0;
-webkit-transform: translate(0,-50%);
-moz-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
transform:translate(0,-50%);

}


.sectionBG{
  position:absolute;
  background-color: var(--section-bg-col);
  top:0;
  left: 0;
  width:100%;
  height:100%;
  z-index:-100;
}

section.grid.fullwidthBG{
  padding-top:2em;
  padding-bottom:2em;
}

.fullwidthBG .sectionBG{
  margin-left: 50%;
  -webkit-transform: translate(-50%, 0);
     -moz-transform: translate(-50%, 0);
     -ms-transform: translate(-50%, 0);
  transform:translate(-50%,0);
  width:100vw;
}

.grid{
  display:grid;
  gap:1em;

}

@media screen and (min-width: 850px) {
  .grid {
    grid-auto-flow:column;
    grid-auto-columns: 1fr;
  }
}



@media screen and (min-width: 850px) {
  .grid .column{
    grid-column: span var(--span);
    /*flex: var(--span) 1 30ch;*/
  }
}

.grid.fullwidth .column{
width:100vw;
margin-top:5em;
margin-bottom:5em;
margin-left: 50%;
-webkit-transform: translate(-50%, 0);
   -moz-transform: translate(-50%, 0);
   -ms-transform: translate(-50%, 0);
transform:translate(-50%,0)
}

.grid.fullwidth.noMarginTop .column{

margin-top:0;

}

.grid.fullwidth.noMarginBottom .column{

margin-bottom:0;

}

.grid.fullwidth img{
width:100%;
}

.grid .column figure{
  max-width:100%;
}

.block{

  margin:0 auto;
  padding: 2rem 3rem;
}

.textwidth .block{
  max-width: 70ch;
}

.block.blocktype-markdown,
.block.blocktype-quote,
.block.blocktype-text{
  max-width: 70ch;
}

.grid.contentwidth .block.blocktype-markdown,
.grid.contentwidth .blocktype-quote,
.grid.contentwidth .block.blocktype-text{
  max-width:100%;
}

.block.blocktype-image,
.block.blocktype-multiimage{
  padding:0;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
}

.imgPaddingAll .block.blocktype-image,
.imgPaddingAll .block.blocktype-multiimage{
 padding: 2rem 3rem;
}


.imgPadding .block.blocktype-image,
.imgPadding .block.blocktype-multiimage{
 padding: 0 3rem;
}

figure.showL{
display:none;
}

figure.showS{
display:block;
}

figure.viewwidth{
  width:100vw;
  max-width:100vw;
}

figure.viewwidth img{
  width:100%;
}

@media screen and (min-width: 850px) {
  figure.showL{
  display:block;
  }
  figure.showS{
  display:none;
  }
}
@media screen and (min-width: 850px) {
  .imgAlignR .block.blocktype-image,
  .imgAlignR .block.blocktype-multiimage{
    justify-content: right;
  }

  .imgAlignL .block.blocktype-image,
  .imgAlignL .block.blocktype-multiimage{
    justify-content: left;
  }

  .imgPadding .block.blocktype-image,
  .imgPadding .imgPadding .block.blocktype-multiimage{
   padding: 2rem 0;
  }
}







.block.blocktype-video{
  padding:0;
  margin-bottom:1rem;
}

.block.blocktype-video figure{
padding-bottom: 56.25%;
position:relative;
}

.block.blocktype-video iframe{
  position: absolute;
  top: 0;
  left:0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  border:0;
}

section.strip.gallery{
  background-color: var(--grau);

}

.block.blocktype-gallery {
margin:0 auto;
margin-bottom: 1rem;
padding:0;

/*background-color:var(--project-col);*/
/*border: .3rem solid var(--project-col);*/
}


.block.blocktype-gallery img{
max-width:auto;
width: auto;
}

/* normal gallery */
.block.blocktype-gallery .galleryContainer.normal ul{
display:flex;
flex-wrap:wrap;
gap: 1rem;
justify-content:center;
}




.block.blocktype-gallery .galleryContainer.normal ul li{


  cursor: pointer;
  position: relative;

  flex-grow:1;
  flex-shrink:1;
  flex-basis:0;
}

.block.blocktype-gallery .galleryContainer.normal ul li img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

/* strip gallery */

.block.blocktype-gallery.imagestrip{


height: calc(33vh - 1px);
width:100%;
max-width:100%;
/*width:100vw;
margin-left: 50%;
-webkit-transform: translate(-50%, 0);
   -moz-transform: translate(-50%, 0);
   -ms-transform: translate(-50%, 0);
transform:translate(-50%,0);
*/
overflow:hidden;
}


.block.blocktype-gallery.imagestrip.viewwidth{

max-width:100vw;
width:100vw;
margin-left: 50%;
-webkit-transform: translate(-50%, 0);
   -moz-transform: translate(-50%, 0);
   -ms-transform: translate(-50%, 0);
transform:translate(-50%,0);

}

.block.blocktype-gallery.imagestrip .bigspace{
  width:50000px;
}


.block.blocktype-gallery .galleryContainer.imagestrip ul{

  --dur:60s;
height: 33vh;
display:inline-block;

animation-name: slide;
animation-duration: var(--dur);
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: forwards;


}

.block.blocktype-gallery .galleryContainer.imagestrip:hover ul{
animation-play-state: paused;
}

@keyframes slide {
  from {transform: translateX(0%);}
  to {transform: translateX(-100%);}
}

@keyframes slideSteps {
  0% {transform: translateX(0%);}
  10% {transform: translateX(-20%);}
  20% {transform: translateX(-20%);}
  30% {transform: translateX(-40%);}
  40% {transform: translateX(-40%);}
  50% {transform: translateX(-60%);}
  60% {transform: translateX(-60%);}
  70% {transform: translateX(-80%);}
  80% {transform: translateX(-80%);}
  90% {transform: translateX(-100%);}
  100% {transform: translateX(-100%);}
}


.block.blocktype-gallery .galleryContainer.imagestrip ul li{

height: 100%;
float:left;
margin-right:1rem;

}

.block.blocktype-gallery .galleryContainer.imagestrip ul li img {

height: 100%;


}


/*--------------------------BACKGROUND VIDEO---------------------*/

.preloader{
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  overflow:hidden;
  background-color:var(--bg-col);
  z-index:250;
}

.preloaderani{
  max-width:400px;
  max-height:300px;

  width:80%;
  height:100%;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  transition: all 1s ease;
  opacity:0;
  animation:fadeIn 1s ease 1 forwards;
}

.preloaderani.done{
  top:100%;
}

.preloaderani svg{
  width:100%;
  height:100%;
}


/*---------------------------FOOTER----------------------------*/
section.strip.footer{
  background-color:var(--bg-col);
  padding-bottom: 1em;
}

.strip.footer.dark{
    background-color:var(--dark-bg-col);
}

.strip.footer.dark.customFooterCol{
  background-color:var(--bg-col);
}

.footer ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2em;
}




.footer a:hover{
  text-decoration:underline;

}

.footer .spacer{

}

.footerani{
  width:100%;

  max-width:350px;
  margin:0 auto;
  margin-bottom:4em;
}

.footerani svg{
  width:100%;
  height: auto;

}





/*---------------------------PROJECTS----------------------------*/

/*
section.strip.propre  {
background-image:url('../images/dotpattern_blackdot.svg');
background-attachment:fixed;
}

*/


section.strip.propre .content-wrapper{
margin-bottom:5rem;
}

section.propre-home{
margin-bottom:2rem;
}

.flex{
  display:flex;
  gap:3rem;
  flex-wrap:wrap;
  justify-content: center;
}

.projectCard{
  border:.3rem solid black;
  width:20rem;
  max-width:100%;
  position:relative;
  transition: all .3s;


}

.projectCard:hover {

  //box-shadow: 0 0 10px #000;
  border-radius: 50%;
}

.projectCard .imageContainer{
  overflow:hidden;
  outline:.1rem solid black;
  transition: all .3s;
}

.projectCard:hover .imageContainer{
  overflow:hidden;
  border-radius: 50%;
}

.projectCard .showtitle{

  position:absolute;
  bottom:15%;
  left:50%;
  transform: translate(-50%,0);
  transition: all .5s ease;
}

.projectCard:hover .showtitle{

  bottom:30%;
}


.projectCard .showtitle h2{
  padding: .2em .5em;
  border:.3rem solid black;
  background:var(--chartreuse);
  text-align:center;
  text-transform:uppercase;

  font-weight:600;
  font-family:'jost', sans-serif, 'CCSymbols';
}

.projectCard .subtitle{

  position:absolute;
  top:100%;
  left:3%;
  right:3%;
  transform: translate(0,-1em);
  padding: .2em .5em;
  border:.3rem solid black;
  background:var(--chartreuse);

  transition: all .5s ease;
}


.projectCard:hover .subtitle{
    --transi:calc(-100% - 1rem);
    transform: translate(0,var(--transi));
}


.projectCard .subtitle p{
  text-align:center;
  font-weight:600;
  font-family:'jost', sans-serif, 'CCSymbols';
  line-height:1.2em;
  margin-bottom:0;
}

/*------------------------------------------------------- PROJECT SITES---------------------*/


.titleImgContainer{
  position:relative;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:-100;
}

.projecttitle img{
width:100%;
height:100%;
object-fit: cover;

animation: zoomOut 1.5s 1 ease-out forwards;

}

section.strip.projecttitle{
  background-color: var(--project-col);
  text-align:center;
  text-transform:uppercase;
  padding-top:0;
  padding-bottom:0;
 height:50vh;
 position:relative;
 z-index:-120;

}

@media screen and (min-width: 850px) {
  section.strip.projecttitle{
    height:100vh;
  }
}

.projecttitle .projectinfo{
position:absolute;
width:100%;

text-align:center;
margin-top:5em;
z-index:0;
}

@media screen and (min-width: 850px) {
.projecttitle .projectinfo{
    margin-top:10em;
  }
}


section.strip.projecttitle h1{
font-size:3rem;
font-family: 'jost', sans-serif, 'CCSymbols';
color: var(--title-col);
margin-bottom:0;
}

section.strip.projecttitle h2{
font-size:1.3rem;
font-family: 'jost', sans-serif, 'CCSymbols';
font-weight:500;
color: var(--title-col);
margin-top:0;
}

.projectinfo.shadow h1{
  text-shadow: 0px 0px 15px rgba(0,0,0,0.3);
}

.projectinfo.shadow h2{
  text-shadow: 0px 0px 12px rgba(0,0,0,0.3);
}

@media screen and (min-width: 850px) {
  section.strip.projecttitle h1{
  font-size:6rem;
  }

  section.strip.projecttitle h2{
  font-size:2rem;
  }
}

/*---------------------------LIGHTBOX--------------------------------------*/

.lightbox{
  position:fixed;
  top:0;
  left:0;
  width:calc(100% - 2rem);
  height:calc(100vh - 2rem);
  visibility: hidden;
  padding:1rem;
  background: rgba(0,0,0,0.9);
  opacity:0;
  transition:all .3s ease-out;
  z-index:800;

}

.lightbox.show{
  visibility:visible;
  opacity:1;
}

.lightbox-close{
  width:60px;
  height:60px;
  position:absolute;
  top:1rem;
  right:2rem;
  z-index:200;
  cursor:pointer;
}

.lightbox img{

  width:100%;
  height:100%;
  object-fit: contain;
  opacity:0;
  transition:all .5s ease;
  transform:scale(1.5);
  pointer-events:none;
  z-index:100;
}

.lightbox.show img{


  opacity:1;
  transform:scale(1);
}



/*--------------------------BACKGROUND VIDEO---------------------*/


video {
  position:relative;
  width:100%;
  height:100%;
  object-fit: cover;
  overflow:hidden;
  opacity:0;
  animation: fadeIn 6s 2s 1 forwards;
}

@keyframes fadeIn {
  from {opacity:0;}
  to {opacity:1;}
}

.hello-image-wrapper{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

.hello-image{
  width:100%;
  height:100%;
  object-fit: contain;
  animation: up 1s cubic-bezier(.2,1.42,.39,1) 1 forwards;
}
/* cubic-bezier(.62,1.69,.55,1.01) */

@keyframes popUp {
  0% {transform:scale(0.5);}
  100% {transform:scale(1);}
}

@keyframes up {
  0% {transform:translateY(20%);}
  100% {transform:translateY(0);}
}

.hello-image-bg{
  width:100%;
  height:100%;
  object-fit: cover;
  position:absolute;
  visibility:hidden;
}

.arrow{
  width:100%;
  height:0;
  padding:0;
  margin:0;
  position:absolute;
  pointer-events:none;
}

.arrow img{
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%,-50%);
  max-width:20vw;

}

/*--------------------------WEBFONTS---------------------*/

::-moz-selection { /* Code for Firefox */
  color: var(--chartreuse);
  background:var(--schwarz);

}

::selection {
  color: var(--chartreuse);
  background:var(--schwarz);

}

/*--------------------------WEBFONTS---------------------*/

@font-face {
    font-family: 'bagnard';
    src: url('../fonts/bagnard-webfont.woff2') format('woff2'),
         url('../fonts/bagnard-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'jost';
    src: url('../fonts/jost-300-light-webfont.woff2') format('woff2'),
         url('../fonts/jost-300-light-webfont.woff') format('woff');
    font-weight: 300;
    font-style: normal;

}




@font-face {
    font-family: 'jost';
    src: url('../fonts/jost-300-lightitalic-webfont.woff2') format('woff2'),
         url('../fonts/jost-300-lightitalic-webfont.woff') format('woff');
    font-weight: 300;
    font-style: italic;

}




@font-face {
    font-family: 'jost';
    src: url('../fonts/jost-400-book-webfont.woff2') format('woff2'),
         url('../fonts/jost-400-book-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;

}




@font-face {
    font-family: 'jost';
    src: url('../fonts/jost-400-bookitalic-webfont.woff2') format('woff2'),
         url('../fonts/jost-400-bookitalic-webfont.woff') format('woff');
    font-weight: 400;
    font-style: italic;

}




@font-face {
    font-family: 'jost';
    src: url('../fonts/jost-500-medium-webfont.woff2') format('woff2'),
         url('../fonts/jost-500-medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;

}




@font-face {
    font-family: 'jost';
    src: url('../fonts/jost-500-mediumitalic-webfont.woff2') format('woff2'),
         url('../fonts/jost-500-mediumitalic-webfont.woff') format('woff');
    font-weight: 500;
    font-style: italic;

}




@font-face {
    font-family: 'jost';
    src: url('../fonts/jost-600-semi-webfont.woff2') format('woff2'),
         url('../fonts/jost-600-semi-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;

}




@font-face {
    font-family: 'jost';
    src: url('../fonts/jost-600-semiitalic-webfont.woff2') format('woff2'),
         url('../fonts/jost-600-semiitalic-webfont.woff') format('woff');
    font-weight: 600;
    font-style: italic;

}




@font-face {
    font-family: 'jost';
    src: url('../fonts/jost-700-bold-webfont.woff2') format('woff2'),
         url('../fonts/jost-700-bold-webfont.woff') format('woff');
    font-weight: 700;
    font-style: normal;

}




@font-face {
    font-family: 'jost';
    src: url('../fonts/jost-700-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/jost-700-bolditalic-webfont.woff') format('woff');
    font-weight: 700;
    font-style: italic;

}




@font-face {
    font-family: 'jost';
    src: url('../fonts/jost-800-heavy-webfont.woff2') format('woff2'),
         url('../fonts/jost-800-heavy-webfont.woff') format('woff');
    font-weight: 800;
    font-style: normal;

}




@font-face {
    font-family: 'jost';
    src: url('../fonts/jost-800-heavyitalic-webfont.woff2') format('woff2'),
         url('../fonts/jost-800-heavyitalic-webfont.woff') format('woff');
    font-weight: 800;
    font-style: italic;

}

@font-face {
  font-display: swap;
  font-family: CCSymbols;
  font-synthesis: none;
  src: url('../fonts/CCSymbols.woff2') format('woff2'),
       url('../fonts/CCSymbols.woff')  format('woff');
  unicode-range: u+a9, u+229c,
                 u+1f10d-1f10f,
                 u+1f16d-1f16f;
}

/*--------------------------------ANIMATION-----------------------------------------------*/

@keyframes zoomOut {
  0%    {transform:scale(1.05); }
  100%   { transform:scale(1.0); }
}

/*  temporary ------------------------------------------------------------------*/

/*
header{
  outline:1px solid red;
}

main{
  outline: 1px solid green;
}

footer{
  outline: 1px solid purple;
}

.content-wrapper{
  outline:1px solid orange;
}

.grid{
  outline:1px solid black;
}

.grid .column{
  outline:1px solid yellow;
}


.block{
  outline: 1px solid red;
}

*/