@charset "UTF-8";


@font-face {
  font-family: 'ArialNarrow';
  src: url(../fonts/Arial-Narrow.woff) format("woff");
  font-style: normal;
}

@font-face {
  font-family: 'ArialNarrowItalic';
  src: url(../fonts/Arial-Narrow-Italic.woff) format("woff");
  font-style: normal;
}

@font-face {
  font-family: 'ArialNarrowBold';
  src: url(../fonts/Arial-Narrow-Bold.woff) format("woff");
  font-style: normal;
}

@font-face {
  font-family: 'ArialNarrowBoldItalic';
  src: url(../fonts/Arial-Narrow-Bold-Italic.woff) format("woff");
  font-style: normal;
}

html header body{
  margin: 0;
  padding: 0;
}

.gallery{
  width: 100vw;
  height: auto;
  padding-left: 0.5rem;
  float: left;
}

.caption{
margin-top:-0.2rem;
margin-bottom: 0.8rem;

}

.imageandcaption{
margin-bottom: 5px;

}

h5{
  font-family: ArialNarrow, sans-serif;
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 1.05;
  letter-spacing: 0.015rem;
}

.galleryimage{
  width: 100%;
  float: left;
  position: relative;
  padding: 0px 10px 0px 0px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

.bg-img{
width: 100%;
height: 100vh;
}

#uncut{
  background-color: black;
  
}

.project{
  padding: 1rem;
  margin: 0px 1px 2px 1px;
  border-radius: 35px 40px 90px 60px;
  background-color: white;
color: black;
  width: auto;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}


.text-bubble-75{
  width: 100%;
  float: left;
  padding: 0rem 1rem 1rem 1rem;
}

.day-image{
    float: left; 
    overflow: hidden;
    width: 5%;
    height: 30%;
    margin: 1px 0 0 2px;
}

.day-image-small{
    float: left; 
    overflow: hidden;
    width: 100%;
    height: 30%;
    margin: 1px 0 0 2px;
}

.talk-text-bubble{
width: 100%;
float: left;
display: flex;
  margin: 0px 1px 2px 1px;
  padding: 1rem 1rem 1.75rem 1rem;
  text-align: left;
  background: white;
  overflow: auto;
  color: black;
  border-radius: 45px 35px 80px 90px;
  -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

.talk-text-bubble-right{
width: 100%;
float: right;
display: flex;
  margin: 0px 1px 2px 1px;
  padding: 1rem 1rem 1.75rem 1rem;
  text-align: left;
  background: white;
  overflow: auto;
  color: black;
  border-radius: 45px 35px 80px 90px;
  -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

.daytalk-image{
    float: left; 
    overflow: hidden;
    width: 100%;
    height: 30%;
    margin: 1px 0 0 2px;
}


.backbutton {
  position: fixed;
  bottom: 1rem;
  border-radius: 62px 90px 80px 100px;
  padding: 0.7rem 1.2rem 0.7rem 1.2rem;
  border: solid black 2px;
  margin-left:50%;
  transform: translateX(-50%);
  z-index: 99999;
  background: white;
}

body{
 letter-spacing: 0.01rem;
}

body#article, #intro, #default, #lexicon, #material{
  background-color:black;

}

body#schedule{
  background-color:white;
}

.safe-bubble{
width: 100%;
height: auto;
}

.leftpadding{
  padding: 1rem;
  padding-bottom: 0rem;
  float: left;
  width: auto;
  margin-bottom: 1rem;
  width: 100%;

}

.bubble50{
  padding: 1rem;
  padding-bottom: 0rem;
  float: left;
  width: 100%;
  z-index: 1;
}

.info-bubble{
  background-color: white;
  color: black;
  width: 75%;
  float: left;
  border-radius: 60px 25px 130px 40px;
  padding: 1rem;
  margin: 2px 2px 2px 2px;
}

.text-bubble-black{
  width: 99.5%;
  margin: 2px 0px 2px 2px;
  padding: 1rem 1rem 1.75rem 1rem;
  border-radius: 20px 60px 100px 80px;
  background: black;
  overflow: auto;
  color: white;
  float: left;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    page-break-after: avoid;
    margin-bottom: 2px;
    margin-right: 2px;
  -webkit-transition: border-radius 10s;
}

.text-bubble-black:nth-child(1n+0){
  border-radius: 30px 60px 80px 70px;
}

.text-bubble-black:nth-child(2n+0){
  border-radius: 50px 20px 30px 60px;
}


.text-bubble-black:nth-child(3n+0){
  border-radius: 40px 60px 50px 20px;
}

.text-bubble-black:nth-child(4n+0){
  border-radius: 60px 10px 50px 40px;
}


.text-bubble-black:hover{
 border-radius: 75px 90px 130px 110px;
  -moz-transition: all 2s;
  -o-transition: all 2s;
  -webkit-transition: all 2s;
  transition: all 2s;
}

.empty{
  width: 66.666%;
  margin-left: 2px;
  margin-right: 2px;
  padding: 1rem;
  padding-top: 40px;
  border-radius: 80px 120px 200px 70px;
  overflow: auto;
  color: white;
  margin-left: auto;
  margin-right: auto; 
}

.bubble{
  width: 99vw;
  margin-left: 10px;
  margin-right: 2px;
  padding: 1rem;
  padding-top: 40px;
  background-color: black;
  border-radius: 80px 120px 200px 70px;
  overflow: auto;
  color: white;
  margin-left: auto;
    margin-right: auto; 
}

.bubble2{
  width: auto;
  height: 25vh;
  margin: 2px;
  padding: 1rem;
  text-align: left;
  background-color: black;
  color: white;
}

.b-one{
  border-radius: 30px 40px 90px 50px;
}

.b-two{
  border-radius: 50px 20px 30px 60px;
}

.b-three{
  border-radius: 30px 40px 60px 30px;
}

.b-four{
  border-radius: 50px 20px 40px 40px;
}

.b-five{
  border-radius: 40px 20px 50px 70px;
}

.b-six{
  border-radius: 50px 40px 30px 60px;
}

.b-seven{
  border-radius: 60px 10px 30px 70px;
}

.b-eight{
  border-radius: 30px 20px 40px 50px;
}

.b-nine{
  border-radius: 50px 40px 70px 20px;
}

.b-ten{
  border-radius: 30px 20px 30px 20px;
}

.b-eleven{
  border-radius: 20px 40px 50px 40px;
}

.b-twelve{
  border-radius: 40px 40px 30px 40px;
}


.article-date {
  float: left;
  width: 99.5%;
  color: white;
  margin: 1px 2px 1px 2px; 
  background: black;
  border-radius: 50px;
  border-radius: 62px 28px 37px 100px;
  padding: 1rem;
}

.conference-article-date {
  float: left;
  width: 100%;
  color: white;
margin: 1px 1px 1px 1px;
  background: black;
  border-radius: 62px 28px 37px 100px;
  padding: 1rem;
}

.conference-article-container {
width: 99.5%;
background-color: red;
}


.title-time{
  width: 99.5%;
/*  Remove this to make them fill: */
  display: flex;
  margin: 0 2px 0 2px;

}

.article-title{
  background-color: black;
  border-radius: 20px 10px 40px 65px;
  color: white;
  margin: 1px 1px 1px 0;
  width: 100%;
  float: left;
  padding: 1rem 1rem 1.75rem 2rem;
  -webkit-transition: border-radius 10s;
}

.conference-article-title{
  background-color: black;
  border-radius: 20px 10px 40px 65px;
  color: white;
  margin: 1px 1px 1px 0;
  width: 100%;
  float: left;
  padding: 1rem 1rem 1.75rem 1rem;
  -webkit-transition: border-radius 10s;
}

.article-title-feeling{
  background-color: black;
  border-radius: 20px 10px 40px 65px;
  color: white;
  margin: 1px 1px 1px 0;
  width: 100%;
  float: right;
  padding: 1rem 1rem 1.75rem 2rem;
  -webkit-transition: border-radius 10s;
}



.article-title:hover{
 border-radius: 75px 90px 130px 110px;
  -moz-transition: all 2s;
  -o-transition: all 2s;
  -webkit-transition: all 2s;
  transition: all 2s;
}


/*  BLOG  */

.blog-intro{
  margin: 0px 0px 2px 2px;
  padding: 1rem 1rem 1.75rem 1rem;
  text-align: left;
  background: white;
  overflow: auto;
  color: black;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  page-break-inside: avoid; /* Firefox */
  break-inside: avoid; /* IE 10+ */
  page-break-after:avoid;
  float: left;
}

.blogimage{
    float: right;
    overflow: hidden;
    height: auto;
    margin: 1px 2px 0 0px;
}

/*  S   A   F   E       B   U   B   B   L   E   */

.safe-bubble{
  width: 100%;
  height: auto;
  overflow: hidden;
  
}


.blog-article-title{
  background-color: black;
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
     border: 2px solid rgb(255, 255, 255);
  border-radius: 20px 50px 40px 65px;
  color: white;
  margin: 0px 0px 2px 0px;
  width: 100%;
  float: right;
  padding: 1rem 1rem 1.5rem 1rem;

  -webkit-transition: border-radius 10s;
}

.blog-article-title:hover{
  background-color: white;
  color: black;
}

.blog-title-bubble{
  background-color: white;
  color: black;
  border-radius: 20px 50px 40px 65px;
  margin: 1px 1px 1px 1px;
  width: 99.8%;
  float: left;
  padding: 1rem 1rem 1.5rem 1rem;
}

.blog-content-bubble{
  background-color: white;
  color: black;
  border-radius: 20px 50px 40px 65px;
  margin: 1px 1px 1px 1px;
  width: 99.8%;
  float: left;
  padding: 1rem 1rem 1.5rem 1rem;
}


.article-time {
  text-align: left;
  height: auto;
  margin-bottom: 1px;
  background-color: black;
  border-radius: 50px;
  color: white;
  padding: 1rem;
  border-radius: 20px 50px 10px 70px;
  float: left;
  margin-left: 1px;
  display: none;
}

.article-time-2 {
  text-align: left;
  height: auto;
  margin-bottom: 1px;
  background-color: black;
  border-radius: 50px;
  color: white;
  padding: 1rem;
  border-radius: 20px 50px 10px 70px;
  float: left;
  margin-left: 1px;
}

.article-time-new{
  float: left;
  color: white;
  padding:1rem;
  background-color: black;
  border-radius: 10px 30px 7px 10px;
}

.date-time {
  text-align: left;
  height: auto;
  margin: 1px;
  background-color: black;
  color: white;
  padding: 1rem;
  border-radius: 20px 50px 10px 70px;
  float: left;
}

.text-bubble{
  width: auto;
  margin: 0px 1px 2px 1px;
  padding: 1rem 1rem 1.75rem 1rem;
  text-align: left;
  background: white;
  overflow: auto;
  color: black;
  -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

.text-bubble-link{
  width: auto;
  margin: 0px 0px 2px 2px;
  padding: 1rem 1rem 1.75rem 1rem;
 border-radius: 20px 40px 15px 60px;
  text-align: left;
  background: white;
  overflow: auto;
  color: black;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  page-break-inside: avoid; /* Firefox */
  break-inside: avoid; /* IE 10+ */
  page-break-after:avoid;

  -webkit-transition: border-radius 10s;
}

.text-bubble-link:hover{
 border-radius: 75px 90px 130px 110px;
  -moz-transition: all 2s;
  -o-transition: all 2s;
  -webkit-transition: all 2s;
  transition: all 2s;
}

.blogpost-bubble{
  width: 100%;
  margin: 0px 0px 2px 2px;
  padding: 1rem 1rem 1.75rem 1rem;
 border-radius: 20px 40px 15px 60px;
  text-align: left;
  background: black;
  overflow: auto;
  color: white;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  page-break-inside: avoid; /* Firefox */
  break-inside: avoid; /* IE 10+ */
  page-break-after:avoid;

  -webkit-transition: border-radius 10s;
}

.blogpost-bubble:hover{
   border-radius: 75px 90px 130px 110px;
  -moz-transition: all 2s;
  -o-transition: all 2s;
  -webkit-transition: all 2s;
  transition: all 2s;
}

.blogpost-bubble-50{
  width: 49%;
  margin: 0px 0px 2px 2px;
  padding: 1rem 1rem 1.75rem 1rem;
 border-radius: 20px 40px 15px 60px;
  text-align: left;
  float: left;
  background: black;
  overflow: auto;
  color: white;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
  page-break-inside: avoid; /* Firefox */
  break-inside: avoid; /* IE 10+ */
  page-break-after:avoid;

  -webkit-transition: border-radius 10s;
}

.blogpost-bubble-50:nth-child(1n+0){
  border-radius: 10px 60px 80px 100px;
}

.blogpost-bubble-50:nth-child(2n+0){
  border-radius: 50px 20px 30px 60px;
}


.blogpost-bubble-50:nth-child(3n+0){
  border-radius: 40px 60px 50px 20px;
}

.blogpost-bubble-50:nth-child(4n+0){
  border-radius: 60px 10px 50px 40px;
}



.text-bubble:nth-child(1n+0){
  border-radius: 10px 60px 80px 100px;
}

.text-bubble:nth-child(2n+0){
  border-radius: 50px 20px 30px 60px;
}


.text-bubble:nth-child(3n+0){
  border-radius: 40px 60px 50px 20px;
}

.text-bubble:nth-child(4n+0){
  border-radius: 60px 10px 50px 40px;
}

.invert{
  background: white;
  color: black;
  margin-bottom: 2px;
}


img{
  overflow: hidden;
  border-radius: 60px 10px 50px 40px;
  width: 100%;
  padding: 0;
  margin: 0;
  height: auto;
  -webkit-transition: border-radius 10s;
}

img:hover{
  overflow: hidden;
  border-radius: 180px 320px 200px 250px;
  width: 100%;
  padding: 0;
  margin: 0;
  height: auto;
    -moz-transition: all 2s;
  -o-transition: all 2s;
  -webkit-transition: all 2s;
  transition: all 2s;      
}


@media only screen and (min-width: 1000px) {
  .bubble2{
    height: 10vh;
    border-radius: 55px 70px 90px 80px;
    -webkit-transition: border-radius 10s;
}

.talk-text-bubble{
width: 100%;
float: left;
display: flex;
  margin: 0px 1px 2px 1px;
  padding: 1rem 1rem 1.75rem 1rem;
  text-align: left;
  background: white;
  overflow: auto;
  color: black;
  border-radius: 45px 35px 80px 90px;
  -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

.talk-text-bubble-right{
width: 100%;
float: right;
display: flex;
  margin: 0px 1px 2px 1px;
  padding: 1rem 1rem 1.75rem 1rem;
  text-align: left;
  background: white;
  overflow: auto;
  color: black;
  border-radius: 45px 35px 80px 90px;
  -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

.article-title-feeling{
width: 75%;
}

  .bubble2:hover{
     border-radius: 75px 90px 130px 110px;
  -moz-transition: all 2s;
  -o-transition: all 2s;
  -webkit-transition: all 2s;
  transition: all 2s;
}

.blogpost-bubble{
  width: 49.7%;
  float: left; 
}

.single-bubble{
  width: 66.3%;
}

.column{
  width: 49.7%;
  float: left;
}



.column2{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    column-gap: 0px;
}

.column-element{
  page-break-inside: avoid;
}

.blog-article-title{
  width: 75%;
}

  .blog-intro{
    width: 75.5%;
}

.blogimage{
      width: 12%;
}

}


@media only screen and (min-width: 768px) {

.leftpadding{
  width: 33%;
}

  .daydescription{
    padding-left: 0rem;
    padding-right: 0rem;
}

.conference-article-title{
  width: 50%;
}

.day-image-small{
    float: left; 
    overflow: hidden;
    width: 23%;
    height: 30%;
    margin: 1px 0 0 2px;
}

.text-bubble-75{
  width: 50%;
}

.talk-text-bubble{
width: 66.66%;
float: left;
display: flex;
  margin: 0px 1px 2px 1px;
  padding: 1rem 1rem 1.75rem 1rem;
  text-align: left;
  background: white;
  overflow: auto;
  color: black;
  border-radius: 45px 35px 80px 90px;
  -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

.talk-text-bubble-right{
width: 66.66%;
float: right;
display: flex;
  margin: 0px 1px 2px 1px;
  padding: 1rem 1rem 1.75rem 1rem;
  text-align: left;
  background: white;
  overflow: auto;
  color: black;
  border-radius: 45px 35px 80px 90px;
  -webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

    .column4{
    -webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
    column-count: 4;
    column-gap: 0;
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
    page-break-inside: avoid; /* Firefox */
    break-inside: avoid-column;
    page-break-after: avoid;
    margin-bottom: 2px;
    

}

    .column3{
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    column-gap: 0;
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
    page-break-inside: avoid; /* Firefox */
    break-inside: avoid; /* IE 10+ */
    page-break-after:avoid;
    margin-bottom: 2px;
}

    .column2{
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    column-gap: 0;
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
    page-break-inside: avoid; /* Firefox */
    break-inside: avoid; /* IE 10+ */
    page-break-after:avoid;
    margin-bottom: 2px;
}

.article-column{
  margin-top: 1px;
  width: 44.9%;
  float: left;
}

.image{
    float: left;
    overflow: hidden;
    width: 10%;
    height: auto;
    margin: 1px 0 0 2px;
}

.day-image{
    float: left; 
    overflow: hidden;
    width: 50%;
    height: 30%;
    margin: 1px 0 0 2px;
}


.blogimage{
    float: left;
    overflow: hidden;
    height: auto;
 
}

.image2{
    overflow: hidden;
    float: right;
    width: 66%;
    margin: 0px 0px -8px 0px;
}

.daytalk-image{
    float: left; 
    overflow: hidden;
    width: 32.5%;
    height: 30%;
    margin: 1px 0 0 2px;
}



}

/* -----  1.3 General Typography  ------------------------------------------- */


p{
  margin-bottom: 1rem;
  font-size: 1.2rem;
  padding: 0;
  margin: 0;
  font-weight: normal;
  line-height: 1.2;
}



/* Headings */
h1, h2, h3, h4 {
  font-family: ArialNarrow, sans-serif;
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 1.20;
  letter-spacing: 0.015rem;
}

/* Menu and content heading */
h1{
  margin: 1em 1em 0.5em 1em;
}

/* title */
h2{
  font-family: ArialNarrowItalic; 
  margin-bottom: 0;
}

/* name menu */
h3{
  margin-top: 0;
  padding: 0;
}

h6{
  font-family: ArialNarrow, sans-serif;
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 1.20;
  letter-spacing: 0.015rem;
  margin-left: 1.5rem;
}


.white{
  color: white;
  font-weight: 300;
}

.indent{
  color: black;
  padding-left: 2rem;
  text-indent: -1rem;
}


.material{
  font-size: 1.2rem;
  line-height: 1.2;
  color: black;
}


/* Links */
a {
  color: inherit;
  text-decoration: none;
  font-size: 1.2rem;
  padding: 0;
  margin: 0;
  font-weight: normal;
  line-height: 1.2;
}

a:hover, a:focus, a:active {
  text-decoration: none;
}

.videocontainer{
    page-break-inside:avoid;
      background: white;
      padding: 0;
      margin: 0px 1px 2px 1px;
      padding: 1rem;
      -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
    page-break-inside: avoid; /* Firefox */
    break-inside: avoid; /* IE 10+ */
    page-break-after:avoid;
    margin-bottom: 2px;
}


.videoWrapper {
  background: black;
    margin-top: 0.5rem;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  padding-top: 25px;
  height: 0;
  frameborder="0";
  page-break-inside: avoid;

}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

video::-webkit-media-controls-start-playback-button {
    display: none;
    pointer-events: none;
}



.videocontainer:nth-child(1n+0){
  border-radius: 10px 60px 40px 20px;
}

.videocontainer:nth-child(2n+0){
  border-radius: 50px 20px 30px 60px;
}

.videocontainer:nth-child(3n+0){
  border-radius: 40px 60px 50px 40px;
}

.videocontainer:nth-child(4n+0){
  border-radius: 10px 60px 50px 40px;
}


.wrap-whitebg{
  background-color: white;
}



/* -----  1.2 Reset & Normalization  ---------------------------------------- */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  list-style: none;
}

article, aside, details, figcaption, figure,
footer, header, main, menu, nav, section, summary {
  /* Add correct display for IE 9- and some newer browsers */
  display: block;
}

::-moz-selection {
  color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
  background: white;
}

::selection {
  color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
  background: white;
}


/* =====  2 Layout Helpers & Reusable Components  =========================== */

/* The Clearfix™: A classic … */
.cf::after {
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
  clear: both;
}

/* =====  3 Site Layout  ==================================================== */

html {
  font: normal 400 1.5em/1.5 ArialNarrow;
  /* Always show the vertical scrollbar to prevent `jumps`
     of page content after navigating from a very short page
     that does not scroll to a long pager */
  overflow-y: scroll;
  /* Setting this to `default` prevents the cursors from
     changing when hovering blocks of text or whitespace,
     which is less distracting */
  cursor: default;
  /* Neccessary for sticks footer. */
  position: relative;
  min-height: 100%;
  /* Prevent adjustments of font size after orientation
     changes in IE and iOS. */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* Highlight color for WebKit-bases touch devices. */
  -webkit-tap-highlight-color: rgba(113, 239, 172, .5);
}

@media all and (max-width: 30em) {
  html {
    /* We decrease the font-size a little-bit for tiny
       screens. Because this stylesheet uses relative units
       everywhere, everything scales nicely. */
    font-size: 1.25em;

  }
}