/*///////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////*/
.blogbanner {
  position: relative;
  top: calc(-1 * var(--nav-height));
  height: 100vh;
  transition: 999s;
}

.blogbannercontainer {
  position: sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  top: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100vh;
  width: 100%;
  transition: 999s;
  opacity: calc(1 - var(--scrollPosition) / var(--viewporth));
}

@media only screen and (max-width: 769px) {
  .blogbannercontainer {
    background-size: auto 100%;
  }
}
/* USE BLOGBANNER IN HTML LIKE THIS:
USE BLOGBANNER IN HTML LIKE THIS:
USE BLOGBANNER IN HTML LIKE THIS:
USE BLOGBANNER IN HTML LIKE THIS:
USE BLOGBANNER IN HTML LIKE THIS:
USE BLOGBANNER IN HTML LIKE THIS:
USE BLOGBANNER IN HTML LIKE THIS:
USE BLOGBANNER IN HTML LIKE THIS:
USE BLOGBANNER IN HTML LIKE THIS:
USE BLOGBANNER IN HTML LIKE THIS:
USE BLOGBANNER IN HTML LIKE THIS:
USE BLOGBANNER IN HTML LIKE THIS:
USE BLOGBANNER IN HTML LIKE THIS:
USE BLOGBANNER IN HTML LIKE THIS:

<div class="blogbanner">

    <div class="blogbannercontainer" style="background-image: url(/b/2020/20_07_08_Elysium_conquers_Briesen/pictures/01.jpg);">        

      <div class="mousescrollcontainer"> <div class="mousescroll"></div> </div>


        <!-- TITLE / HEADING -->

        <div style="
            padding-top: 45vh;
            list-style: none;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 999s;">


                <div style="
                    border-radius: 20px;
                    background-color: black;
                    width: 75%;
                    height: max-content;
                    line-height: 8vw;
                    text-align: left;
                    font-size: 6vw;
                    font-weight: 500;"> <p>Elysium Kollektiv conquers rural Berlin</p>
                </div>

        </div>


    </div>

</div>



/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////*/
.blog_content {
  display: grid;
  position: relative;
  margin-top: 25px;
  grid-template-columns: 1fr 0.5in [start] 1.25in 6in 1.25in [end] 0.5in 1fr;
  /* star means "apply an all children of that class" */
}
.blog_content .blog_title {
  font-family: "heavitas", poppins, Helvetica, Arial, sans-serif;
  text-align: right !important;
  line-height: 1.5;
  grid-column: 1/7;
  font-size: calc(4.1vw + 21px);
  text-align: center;
  margin-top: 4rem;
  margin-bottom: 4rem;
  font-weight: 720;
}
.blog_content .blog_subtitle {
  font-family: "heavitas", poppins, Helvetica, Arial, sans-serif;
  text-align: right !important;
  grid-column: 1/end;
  font-size: calc(2vw + 15px);
  text-align: center;
  margin-top: -2.8rem;
  margin-bottom: 6rem;
  font-weight: 500;
}
.blog_content h1 {
  font-family: "heavitas", poppins, Helvetica, Arial, sans-serif;
  color: whitesmoke;
  margin-top: 8rem;
  margin-bottom: 2.5rem;
  transition: 999s;
  text-align: right;
  font-size: calc(2vw + 20px);
  font-weight: 650;
  line-height: 1.6;
}
.blog_content h1 .h2sub {
  padding-bottom: 15px;
  font-size: calc(1.5vw + 8px);
}
.blog_content h2 {
  font-family: "heavitas", poppins, Helvetica, Arial, sans-serif;
  margin-top: 6rem;
  font-size: calc(2vw + 20px);
  font-weight: 550;
  margin-bottom: 3rem;
}
.blog_content h2 .h2sub {
  padding-bottom: 15px;
  font-size: calc(1.5vw + 8px);
}
.blog_content h3 {
  font-family: "heavitas", poppins, Helvetica, Arial, sans-serif;
  margin-top: 6rem;
  font-size: calc(1.5vw + 15px);
  padding-left: 0%;
  font-weight: 550;
  margin-bottom: 3rem;
  line-height: 1.5;
}
.blog_content h3 .h3sub {
  font-family: "heavitas", poppins, Helvetica, Arial, sans-serif;
  padding-bottom: 15px;
  font-size: calc(1.2vw + 7px);
  font-weight: 600;
}
.blog_content p {
  grid-column: start/end;
  text-align: justify;
  font-size: 22px;
  font-weight: 350;
  margin: 0;
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
  /* unvisited link */
  /* visited link */
  /* mouse over link */
  /* selected link */
}
.blog_content p a:link {
  color: var(--accent-col);
  text-decoration: none !important;
  cursor: pointer;
}
.blog_content p a:visited {
  color: var(--accent-col);
}
.blog_content p a:hover {
  color: hotpink;
}
.blog_content p a:active {
  color: white;
}
.blog_content * {
  grid-column: start/end;
}

@media (max-width: 8.3in) {
  .blog_content p {
    font-size: 15px;
  }
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*                            GALLERY                              */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.captioncontainer {
  display: block;
  width: 100%;
  margin-bottom: 3rem;
  margin-top: 3rem;
}
.captioncontainer .gallerycaption {
  grid-column: 2/7;
  padding-left: 7vw;
  padding-right: 7vw;
  text-align: center;
  margin-top: 1.25em;
  font-weight: 300;
}

.gallerycinema {
  position: relative;
  /* background-color: red; */
  grid-column: 1/8;
  transition: 999s;
  width: 100%;
  padding-top: 42%; /* Aspect ratio of 100% / 42% = 2.38:1 */
  overflow: hidden;
  border-radius: 9px;
}
.gallerycinema img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 9px;
}

/* 3/2 aspect ratio for mobile when cinema is active */
@media only screen and (max-width: 769px) {
  .gallerycinema {
    padding-top: 66.66%;
  }
}
.gallery16to9 {
  position: relative;
  /* background-color: red; */
  grid-column: 1/8;
  transition: 999s;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
  border-radius: 9px;
}
.gallery16to9 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 9px;
}

.gallery3to2 {
  position: relative;
  /* background-color: red; */
  grid-column: 1/8;
  transition: 999s;
  width: 100%;
  padding-top: 66.66%;
  overflow: hidden;
  border-radius: 9px;
}
.gallery3to2 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 9px;
}

.galleryportrait {
  position: relative;
  /* background-color: red; */
  grid-column: 2/7;
  height: 90vh;
  transition: 999s;
  width: 100%;
  overflow: hidden;
  border-radius: 9px;
}
.galleryportrait img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 9px;
}

/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/*                          MEDIA QUERIES                          */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
@media (max-width: 9.5in) {
  .blog_content {
    grid-template-columns: 1fr 5% [start] 15% 60% 15% [end] 5% 1fr;
  }
}/*# sourceMappingURL=blog.css.map */