body 	{
	height: 100%;
	width:100vw;
	margin:0;
	padding:0;
font-family: calluna, serif;
font-weight: 400;
font-style: normal;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
background-color: #DDE3EB !important!
	}


div.#aww-toolbar-window.aww-toolbar.aww-not-touch 
{
    background:blue !important;
  background-color:blue !important;
}
/*@keyframes color {
	0% 	{background: DarkSlateBlue;}
	50% 	{background:SkyBlue;}
	0% 	{background:DarkSlateBlue;}
}*/



h1, h2, h3, a:link, a:visited, body, html {
  color: inherit;
  text-decoration: none;
}

.grid 	{
  	display: grid;
  	grid-template-columns: 12.5vw 12.5vw 12.5vw 12.5vw 12.5vw 12.5vw 12.5vw 12.5vw;
  	grid-template-rows: 25vh 25vh 25vh 25vh 25vh 25vh 25vh 25vh  ;
    font-size: 5vh;
  	line-height: 0.85;
  	color: #24FF00;
	}


.item-a {
  	grid-column: 1/7 ;
  	grid-row: 1/5;
   	mix-blend-mode: multiply;
    	}

.video {
	position:absolute;
	width:75vw;
  height: 100vw;
	object-fit: cover;
	}

  .img  {
  height:100vh;
    position: absolute;
   /* clip: rect(0px, 50vw, 100vw, 0px);*/
  }

          /*TEXTSCROLL*/
            .item-b {
              	display:flex;
               	flex-flow: column wrap;
               	text-align: left;
               	justify-content: center;
             	  grid-column: 7/9 ;
              	grid-row: 2/5;
              	font-size: 3.5vh;
              	line-height: 1;
              	background-color:#B3C2D7;
               	z-index: 100000;
             	  color:#24FF00;
            	 }

              #container {
              overflow: hidden;
              width:25vw; /*marquee width */
              height:70vh; /*marquee height */
              padding: 40px;
              }

              #textscroll {
              width:25vw;
              height:5vh;
              }

              button {
              border-radius: 0px;
              border:none;
              background-color: #302243;
              color: #24FF00;
              font-family: calluna, serif;
              font-weight: 400;
              font-style: normal;
              font-size: 3.5vh;
               outline:none;
              }
              


            /*--------------------*/

/*WEBSITELINK*/
.item-c {
	top:0;
  left:0;
	grid-column: 1/9 ;
  grid-row: 9;
  z-index: 1000;
  object-fit: cover;
  background-color: #DBEE06;
  height:10vh;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6C00FF;
  font-size:8vh;

	}

  .stream {
    border: 10px solid #24FF00;
    transform: rotate(-90deg);
    width:624px;
    height:360px;
    left:calc(180px - 312px);
    bottom:calc(312px - 180px);
    position: absolute;
    z-index: 100000000;

  }

.item-d {
 grid-column: 7/9 ;
  	grid-row: 1/2;
   	z-index: 10000000;

	}

.item-e { 
 	grid-column: 1/5 ;
  	grid-row: 1/5;

	}

.item-f { 
 	grid-column: 1/3 ;
  	grid-row: 5;
  	height: 100vh;
    position: relative;

	}

/*FOTOS TEIL II*/
.item-h { 
  grid-column: 7/9 ;
    grid-row: 10;
   background-color: #DDE3EB;
    height:inherit;
    position: relative;
    object-fit: cover;
  }

  .collage {
    object-fit: cover;
    height:180vh;
  }


/*FOTOS TEIL II*/
.item-i { 
  grid-column: 1/7 ;
    grid-row: 10;
    background-color: #DDE3EB;
    position: relative;
    
  }

  .item-j { 
  grid-column: 3/9 ;
    grid-row: 12;
    background-color:#3835F6;
    height: inherit;
    position: relative;
     z-index: 9999999999;
 
  }

/*WEBSITELINK*/
.item-k {
  top:0;
  left:0;
  grid-column: 1/9 ;
  grid-row: 11;
  z-index: 1000;
  object-fit: cover;
  background-color: #DBEE06;
  height:10vh;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
    color: #6C00FF;
  font-size:8vh;
  }





/*FUCK COHERENCY*/

                      .item-m {
                      top:0;
                      left:0;
                      grid-column: 1/9 ;
                      grid-row: 14;
                      z-index: 1000;
                      object-fit: cover;
                      background-color: #DBEE06;
                      height:10vh;
                      text-align: center;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                        color: #6C00FF;
                      font-size:8vh;
                    }
                    .item-l { 
                    grid-column: 1/7 ;
                    grid-row: 15;
                    background-color:#DDE3EB;
                    height: inherit;
                    position: relative;
                    height:100vh;
                    
                    font-size:2vh;
                    display: inline-block;

                    }

                    .item-v {
                    grid-column: 7/9 ;
                    grid-row: 15;
                
                    position: relative;

                    }

                    .turned-right {
                    position: absolute; /* only handy here because its parent is set to `position: relative;` */
                 color: #DDE3EB;
                    top: 0px;
                    /* writing-mode: sideways-lr;   /* Webkit browsers don't support `sideways-lr` yet */
                    writing-mode: vertical-rl;  /* `vertical-rl` and a rotation will achieve the same effect */
                    transform: scaleX(1) scaleY(1);
                    height: 100%;
                    text-align: center;
                    width:25vw;
                    z-index: 100000;
                   padding-top:40px;
padding-bottom:40px;
                    font-size: 2.3vw;
                    display: flex;
                    align-items: center;
                    background-color:#6C00FF;
                    }


                    .fck {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                   padding:20px 10px 10px 10px;
                justify-content: space-around;
                
               
                    }

                    .img-fck {
                    width:calc(37.5vw - 30px);
                    height:calc(50vh - 10px);
                    object-fit: cover;
                    padding-bottom:20px;

                
                    }
/*----------------------*/




/*REMEMEBR*/
            .item-n { 
            grid-column: 1/5 ;
            grid-row: 17;
            background-color:#DDE3EB;
            height: inherit;
            position: relative;
            padding:20px;
            }

            .item-S { 
            grid-column: 5/9 ;
            grid-row: 17;
            background-color:#DDE3EB;
            color: #6C00FF;
            height: inherit;
            position: relative;
                font-size:2vh;
            line-height: 1;
            -moz-column-count: 2;
            -webkit-column-count: 2;
            column-count: 2;
            -webkit-column-break-inside: avoid; /* Chrome, Safari */
            page-break-inside: avoid;           /* Theoretically FF 20+ */
            break-inside: avoid-column;         /* IE 11 */
            display: inline-block;
            padding:40px;
            }

            .item-s p {
                text-indent: 2em;
                margin:0;
                padding:0;
            }

            .remember {
            width: 50vw;
            padding-bottom:20px;
           
            }

            .portrait {
                width:calc(25vw - 30px);
                height:inherit;

                 object-fit: cover;
                  display: flex;
            
            flex-direction: row;

           margin-right: 20px;
            }

/*---------------*/


  .item-o {
  top:0;
  left:0;
  grid-column: 1/9 ;
  grid-row: 16;
  z-index: 1000;
  object-fit: cover;
  background-color: #DBEE06;
  height:10vh;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6C00FF;
  font-size:8vh;
  }


  /*FOREST*/

                .item-p { 
                grid-column: 3/9 ;
                grid-row: 19;
                background-color:#C882DA;
                height: inherit;
                position: relative;
                z-index: 9999999999;
               
                }


                .item-t {
                        grid-column: 1/3 ;
                grid-row: 19;
                background-color:#C882DA;
                height: inherit;
                position: relative;

                
                }


    /*--------------*/


  .item-q {
  top:0;
  left:0;
  grid-column: 1/9 ;
  grid-row: 18;
  z-index: 1000;
  object-fit: cover;
  background-color: #DBEE06;
  height:10vh;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
   color: #6C00FF;
  font-size:8vh;
  }

  .item-r {

  grid-column: 1/3 ;
    grid-row: 12;

    height: inherit;
    position: relative;
  
  }



.drawing {
	width: 75vw;
	height:100vh;
	overflow: hidden;
	}

  .turned {
  position: absolute; /* only handy here because its parent is set to `position: relative;` */
padding-top:40px;
padding-bottom:40px;
    top: 0px;
    /* writing-mode: sideways-lr;   /* Webkit browsers don't support `sideways-lr` yet */
    writing-mode: vertical-rl;  /* `vertical-rl` and a rotation will achieve the same effect */
    transform: scaleX(-1) scaleY(-1);
    height: 100%;
   background-color:#6C00FF;
   color:#DDE3EB;
  text-align: center;
  width:25vw;
z-index: 100000;
font-size: 2.3vw;
 display: flex;
 align-items: center;

  }

    .turned-demon {
  position: absolute; /* only handy here because its parent is set to `position: relative;` */
padding-top:40px;
padding-bottom:40px;
    top: 0px;
    /* writing-mode: sideways-lr;   /* Webkit browsers don't support `sideways-lr` yet */
    writing-mode: vertical-rl;  /* `vertical-rl` and a rotation will achieve the same effect */
    transform: scaleX(-1) scaleY(-1);
    height: 100%;
   background-color:#B3C2D7;
   color:#24FF00;
  text-align: center;
  width:25vw;
z-index: 100000;
font-size: 2.3vw;
 display: flex;
 align-items: center;

  }

  .scrolltext {
    width: 20vw;
    height:75vh;
  }

  .clacking-text {
    padding:40px;
      background-color:#DDE3EB;
            color: #6C00FF;
    font-size:2vh;
    line-height: 1;
     -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
     -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display: inline-block;

  }


 .clacking-text p{
    text-indent: 2em;

  }
 }
  .no-indent span{
    text-indent: 0em;
  }

    .clacking-text p {
margin:0;
padding:0;

  }

iframe {
  	overflow: hidden;
	}

	.cp-app-whiteboard #cp-app-whiteboard-container {
    flex: 1;
    display: flex;
    overflow: hidden !important;
    flex-flow: column;
}

#cp-app-whiteboard-controls {
	display: none !important;
}

video {
    z-index: 9999999999;
    border:none;
    outline:none;
}
@media only screen and (max-width: 1500px) {
  .stream {
 
/*  width:320px;
    height:180px;*/
/*    left:calc(90px - 160px);
    bottom:calc(160px - 90px);*/
    width:25.7rem;
    height:15rem;
    left:calc(7.5rem - 12.85rem);
    bottom:calc(12.85rem - 7.5rem);


  }
}