/* 256c7c */
@import "../font/font_ari.css";
body, html {
  height: 100%;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  color: #777;
  font-size: 14px;
}

.email:before{
  content: attr(data-website) "\0040" attr(data-user);
            unicode-bidi: bidi-override;
            direction: rtl;
}


  .preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #000;
    /* change if the mask should have another color then white */
    z-index: 200;
    /* makes sure it stays on top */
  }

  .animation {
    width: 360px;
    height: 360px;
    position: absolute;
    left: 50%;
    top: 50%;
    background-repeat: no-repeat;
    background-position: center;
    margin: -180px 0 0 -180px;
  }

  #tri .st1, #ari .st1 {

    stroke-dasharray: 10;
    stroke-dashoffset: 100;
    stroke-width:2;
    stroke:white;
    stroke-opacity:0;


    -webkit-animation-name: strokeoffset;
    -moz-animation-name: strokeoffset;
    -o-animation-name: strokeoffset;
    animation-name: strokeoffset;

    -webkit-animation-duration: 4s;
    -moz-animation-duration: 4s;
    -o-animation-duration: 4s;
    animation-duration: 4s;

    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;

    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    animation-fill-mode: forwards;

  }


    @-moz-animation-keyframes strokeoffset{
    30%{
      stroke-dasharray: 250;
      stroke-opacity:0.3;
    }

       65%{
         fill:rgba(255,255,255,0.05);
       }


      100% {
        fill:rgba(255,255,255,1);
        stroke-dasharray: 525;
        stroke-dashoffset: 0;
        stroke-opacity:1;
      }

    }


    @-webkit-keyframes strokeoffset {
    30%{
      stroke-dasharray: 250;
      stroke-opacity:0.3;
    }

       65%{
         fill:rgba(255,255,255,0.05);
       }


      100% {
        fill:rgba(255,255,255,1);
        stroke-dasharray: 520;
        stroke-dashoffset: 0;
        stroke-opacity:1;
      }

    }


    @-o-keyframes strokeoffset {
    30%{
      stroke-dasharray: 250;
      stroke-opacity:0.3;
    }

       65%{
         fill:rgba(255,255,255,0.05);
       }


      100% {
        fill:rgba(255,255,255,1);
        stroke-dasharray: 520;
        stroke-dashoffset: 0;
        stroke-opacity:1;
      }

    }

    @keyframes strokeoffset {
    30%{
      stroke-dasharray: 250;
      stroke-opacity:0.3;
    }

       65%{
         fill:rgba(255,255,255,0.05);
       }


      100% {
        fill:rgba(255,255,255,1);
        stroke-dasharray: 520;
        stroke-dashoffset: 0;
        stroke-opacity:1;
      }

    }

.st2{
  fill:none;
  stroke: white;
  stroke-width: 8;
  stroke-opacity: 1;

  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;

  -webkit-animation-name: outline;
  -moz-animation-name: outline;
  -o-animation-name: outline;
  animation-name: outline;

  -webkit-animation-duration: 4s;
  -moz-animation-duration: 4s;
  -o-animation-duration: 4s;
  animation-duration: 4s;

  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;

  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;

  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@-webkit-keyframes outline {

/* 50%{
  stroke-opacity:1;
} */

100% {
  stroke-opacity:1;
  stroke-dashoffset: 0;
}
}



@-o-keyframes outline {

/* 50%{
  stroke-opacity:1;
} */

100% {
  stroke-opacity:1;
  stroke-dashoffset: 0;
}
}

@-moz-keyframes outline {

50%{
  stroke-opacity:1;
}

100% {
  stroke-opacity:1;
  stroke-dashoffset: 0;
}
}

@keyframes outline {
/*
50%{
  stroke-opacity:1;
} */

100% {
  stroke-opacity:1;
  stroke-dashoffset: 0;
}
}





.bgimg-1,
.bgimg-2,
.bgimg-3,
.bgimg-4,
.bgimg-5 {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

a {
  text-decoration: none;
  color: rgba(37, 108, 124, 0.6);
}

a:hover {
  text-decoration: none;
  color: rgba(37, 108, 124, 0.9);
}

ul {
  list-style-type: none;
  padding-left: 0;

}
h1{
  font-family: 'REIS';
  font-size: 1px;
  opacity: 0;
  padding: 0;
}
h2{
  font-family: 'REIS';
  font-size: 6em;
}

h3{
  font-size: 14px;
}

h5 {
  font-size: 12px;
}

h6 {
  font-size: 10px;
}

.text-white{
  font-size: 4px;
}




#hero {
  position: relative;
  height: 100vh;
  background-color: #000;
  width: 100%;
}

#hero video {
  height: 100vh;
  width: 100%;
  object-fit: cover;
  /* font-family: 'object-fit: cover; '; /*object-position: left top; */
   z-index: 10;
  background-position: absolute;
}

#hero .row {
  z-index: 30;
  width: 100%;
  position: absolute;
  bottom: 10%;
  background-color: none;
}

.about{
  position: relative;
  height: 100vh;
  width: 100%;
  min-height:850px;
  z-index: 10;
  background-color: white;
  color:black;
  background-image: linear-gradient(to top, rgba(117,79,255,0.2), rgba(191,122,132,0.3));
}

.about h2{
  font-size: 10vw;
}

.about h3{
    font-size: 1.5vw;
    opacity: 0.6;
}

.abouttext{
  height:100vh;
min-height:850px;
z-index:11;
}

.abouttext p{
   width: 90%;
  margin-left: 10px;

}



.aboutbild img{
  position: absolute;
  right: 0;
  height:100%;
  width: auto;

  /* overflow-x:hidden; */

}

.about_thumbnail{
  width:20%;
  border-color:black;
  border: solid 2px;
}

.social{
  position: absolute;
  bottom: 30px;
  left: 25px;
}

.socialline{
  width: 220px;
}
.socialbuttons{
  height: 30px;
  margin-left: 10px;
}

.socialbuttons{
  opacity: 0.6;
}

.socialbuttons:hover{
  opacity: 0.9;
}

.aboutimagegrid {
  display: grid;
  grid-template-columns: 10px 40% 10px;
  grid-template-rows: 10px auto;
  justify-content: center;

}
.outer{
  grid-column: 2/3;
  grid-row: 2 ;
}

.outer img{
  height:auto;
  width: 102%;
}

.frame{
  grid-column: 1/3;
  grid-row: 1 / 2;
  z-index: 3;


}

.outer .below {
  z-index: 1;
}
.outer .top {
  z-index: 2;
  justify-self: center;

}



.aboutimagegrid:hover{
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  /* Firefox 10+, Firefox on Android */
  -webkit-filter: grayscale(70%);
  -moz-filter: grayscale(70%);
  -ms-filter: grayscale(70%);
  filter: grayscale(70%);
  filter: gray;
  color: rgba(255,255,255,0.6);
  /* IE 6-9 */
}

 /* .aboutimagegrid{
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
  color: rgba(255,255,255,0.9);
} */



.inqueres_text {
  position: absolute;
  top: 16vh;
  padding:20px;
  height:auto;
  max-width: 60vw;
  left: 5vw;
  z-index: 30;
  color: black;
  background: rgba(255, 255, 255, 0.8);
}

#button_white a {
  display: inline-block;
  border-radius: 50%;
  z-index: 30;
}

#button_white a:hover .bottom {
  opacity: 0.5
}

#button_white a:hover .bottom:after {
  opacity: 0.5
}

#button_white .bottom {
  text-align: center;
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 2px solid #fff;
  border-radius: 100%;
  margin-left: 0.em;
}

#button_white .bottom:after {
  content: '';
  display: inline-block;
  margin-top: 5px;
  width: 18px;
  height: 18px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

.header {
  width: 100%;
  height: 15vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  background-color: transparent !important;
  border-color: transparent;
  background-image: none;
  box-shadow: none;
}



.header .navbar li a {
  font-size: 48px;
  font-family: 'REIS';
  color: #000;
  margin-left: 30px;
}

.header .navbar li:hover a:hover {
  opacity: 0.5;
  /* text-decoration: line-through; */
}

.header .navbar a {
  font-size: 30px;
  color: #fff;
}

.header .navbar a:hover {
  opacity: 0.5;
}

.header .navbar-toggle {
  margin: 10px 0;
  background-color: none;
  color: #FFF;
  z-index: 30
}




/* The sidebar menu */
.sidebar {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 100; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #111; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}

/* The sidebar links */
.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 11px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidebar a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

/* The button used to open the sidebar */
.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left .5s; /* If you want a transition effect */
  padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidebar {padding-top: 15px;}
  .sidebar a {font-size: 18px;}
}

.Privacy h2{
  font-family: 'Open Sans';
  font-size:2.5em;
}





#instafeed a img, .youtubeimg1 img, .youtubeimg2 img, .youtubeimg3 img {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
  /* Firefox 10+, Firefox on Android */
  -webkit-filter: grayscale(70%);
  -moz-filter: grayscale(70%);
  -ms-filter: grayscale(70%);
  filter: grayscale(70%);
  filter: gray;
  color: rgba(255,255,255,0.6);
  /* IE 6-9 */
}

#instafeed a:hover img:hover, .youtubeimg1 img:hover, .youtubeimg2 img:hover, .youtubeimg3 img:hover {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
  color: rgba(255,255,255,0.9);
}

.instagram_gallery{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 200px);
  grid-gap: 10px;

}

.gridimg1 {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.gridimg2 {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.gridimg3 {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.gridimg4 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

.gridimg5 {
  grid-column: 4 / 5;
  grid-row: 1 / 2;
}

.gridimg6 {
  grid-column: 4 / 5;
  grid-row: 2 / 3;
}

.gridimg7 {
  grid-column: 5 / 6;
  grid-row: 1 / 2;
}

.gridimg8 {
  grid-column: 6 / 7;
  grid-row: 1 / 2;
}

.gridtext {
  grid-column: 5 / 7;
  grid-row: 2 / 3;
  font-size: 42px;
  text-align: center;
  margin: auto;
  font-family: 'REIS'
}

.gridimg1 img, .gridimg4 img, .gridimg2 img, .gridimg3  img, .gridimg5 img, .gridimg6  img, .gridimg7 img, .gridimg8 img {
  object-fit: cover;
   height: 100%;
   width: 100%;
}

.carousel-inner {
  height: 100vh;
}



.carousel-caption{
  margin-bottom:12%;
  font-size: 20px;

  color:white;
}

.partner h3{
  font-family: 'REIS';
  font-weight:normal;
  font-size: 28px;
}



/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 200px;
  height: 200px;
  /* border: 1px solid #f1f1f1; */
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
  margin-left: 25px;
  margin-right: 25px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #fff;
  opacity: 0.5;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  /* IE 6-9 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.flip-card-front img {
  max-width: 150px;
}

.arva img{
  max-width: 180px;
  width: 107%;
}

.flip-card-back a{
  color:black;
}

/* Style the back side */
.flip-card-back {
  background-color: white;
  color: black;
  transform: rotateY(180deg);
  font-size:11;
}


.social_button {
  display: inline-block;
  border-radius: 50%;
  background-color: rgba(37, 108, 124, 0.3);
  height: 2.5em;
  width: 2.5em;
  color: white;
  line-height: 1.8em;
  vertical-align: middle;
  text-align: center;
}

.social_button:hover {
  background-color: rgba(37, 108, 124, 0.8);
}



.modal-dialog {
  max-width: 85vw;
  margin: 30px auto;

}



.modal-body {
  position: relative;
  padding: 0px;
}

.close {
  position: absolute;
  right: -30px;
  top: 0;
  z-index: 999;
  font-size: 2rem;
  font-weight: normal;
  color: #fff;
  opacity: 1;
}



.cite{
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 10vh;
  width: 35vw;
  height: auto;
  /* background-color: rgba(255,255,255,0.3); */
  left: 60vw;
  font-size: 3em;
  margin-top: 20px;
  padding:10px;
  color:white;
  font-family: 'REIS';
  font-style: normal;
}

.citecontent{
  display: grid;
  grid-template-columns: 35px auto;

}

.quote{
  grid-column: 1/2;
  /* border-right: 1px solid;
  border-color: gray; */
  color:black;
  opacity: 0.5;
}
.quote img{
  width: 100%;
}

.quotetext{
  grid-column: 2/3;
  padding-left: 10px;
  font-size: 80px;
  color: #353845;
}


.gridwrapper{

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 200px);
  grid-gap: 10px;
}

.youtubeimg1{
  grid-column: 1 / 3;
  grid-row: 1 / 3;

}


.youtubeimg2{
   grid-column: 3 / 4;
   grid-row: 1 / 2;

 }

 .youtubeimg3{
    grid-column: 4 / 5;
    grid-row: 1 / 2;

  }

  .youtubetext {
    grid-column: 3 / 5;
    grid-row: 2 / 3;
    align-self: center;
    justify-self: center;
    text-align: center;




  }

  .subscribe a{
    color: white;
    background-color: red;
    height: 40px;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    font-size:22px;
    opacity: 0.6;
  }

    .subscribe a:hover{
      opacity: 0.9;
    }



  .youtubeimg1 img, .youtubeimg2 img, .youtubeimg3 img{
    width:100%;
    height:100%;
    overflow: hidden;
    object-fit: cover;

  }

  .ChannelIcon a{
    opacity: 0.6;
  }
  .ChannelIcon a:hover{
    opacity: 0.9;
  }

  .ChannelIcon span{
    padding-left: 1px;
    font-size: 18px;


  }

  .playbutton i{
    font-size: 4em;
    color: white;
    opacity: 0.95;
  }

  .playbutton_small i{
    font-size: 3em;
    margin-top: 25px;
    color: white;
    opacity: 0.80;
  }







  .ChannelIcon img{
    width: 30%;
    /* min-width: 25%; */
  }


.carousel{
  background-color: black;
}

  .carousel-caption{
    display: none;
    opacity: 0;
  }

  .carousel-item{
    overflow: hidden;
    height: auto;
    object-fit: cover;

  }


  /* Error Page */
  .error-bg{
      background-image: url('../images/error/astronautStars.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
  }
  .spaceSpacer{
    height: 25vh;
  }
  .spaceGrid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 16vh 9vh 3vh auto auto;
  }

  .earth{
    grid-column: 2;
    grid-row: 2;

    align-items: end;
    justify-content: center;
    display: flex;
  }


  .rocket{
    grid-column: 3;
    grid-row: 1/3;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .astro{
    grid-column: 4;
    grid-row: 2;
    align-items: center;
    display: flex;
    justify-content: center;
  }

  .spaceText{
    grid-row: 5;
    grid-column: 2/5;
    text-align: center;
  }

  .spaceText h3{
    font-size: 22px;
  }

  .space_social_wrapper{

    display: grid;
    grid-row: 6;
    grid-column: 2/5;
    grid-template-columns: repeat(4, 60px);
    grid-template-rows: 60px;
    place-self:center;
  }

  .earth img{
    width:50%;
    min-width: 40px;
    max-width: 85px;
  }

  .rocket img{
  width:60%;
  min-width: 60px;
  max-width: 200px;

  }
  .astro img{
  width:45%;
  min-width:55px;
  max-width:180px;


  }

  .socialbutton a {
    font-size: 2em;
    display: flex;
    place-content: center;
    align-items: center;
    height:90%;
  }


  .socialbutton img{
    width: 65%;
    margin-left: -5px;
    opacity: 60%;
    display: flex;
    justify-content: center;
  }


  .socialbutton:hover .redbullBottom{
    opacity: 60%;
  }

  .rotate {
    animation: rotation 60s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }

  .rotationCW{
    animation: rotationCW 40s infinite linear;
  }


  @keyframes rotation{
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(359deg);
    }
  }

  @keyframes rotationCW{
    from {
      transform: rotate(359deg);
    }
    to {
      transform: rotate(0deg);
    }
  }

/* Turn off parallax scrolling for tablets and phones */
 @media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5{
    background-attachment: scroll;
    background-size: cover;
  }
}



/* Tablet */
@media only screen and (max-width: 992px) {
    .flip-card {
    height: 150px;
    }

    .about, .abouttext{
      height: 113vh;
      min-height: 969px;
    }


   .abouttext h3{
      font-size: 3vw;
    }

    .abouttext p{
      width: 97%;
      margin-left: 10px;
    }


  .instagram_gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, 200px);
    grid-gap: 10px;
  }


  .gridimg5 {
    grid-column: 4 / 5;
    grid-row: 1 / 2;
  }

  .gridimg6 {
    grid-column: 5 / 6;
    grid-row: 1 / 2;
  }

  .gridimg7 {

    display:none;
  }

  .gridimg8 {
    display:none;
  }

  .gridtext {
    grid-column: 4 / 6;
    grid-row: 2 / 3;
    font-size: 38px;
    text-align: center;
    margin: auto;
  }

  .gridwrapper{

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto repeat(2, 200px);
    grid-gap: 20px;
  }

  .youtubeimg1{
    grid-column: 1 / 3;
    grid-row: 1 / 2;

  }


  .youtubeimg2{
     grid-column: 1/ 2;
     grid-row: 2/3;

   }

   .youtubeimg3{
      grid-column: 2 / 3;
      grid-row: 2/3;

    }

    .youtubetext {
      grid-column: 1 / 3;
      grid-row: 3/4;
      align-self: center;
      justify-self: center;
      text-align: center;
      font-size: 15px;
      padding: 5px;


    }
    /* .youtubetext2 {
      grid-column: 2 / 3;
      grid-row: 4;
      font-size: 15px;
      align-self: center;
      justify-self: center;

    } */

    .playbutton i{
      font-size: 2em;

    }

    .playbutton_small i{
      font-size: 1.5em;
      margin-top: 12px;
      
    }



    #inqueres .container {
      top: 14vh;
      max-width: 50vw;
      background: rgba(255, 255, 255, 0.6);
    }





}

/* Phone */
@media only screen and (max-width: 768px) {
.flip-card {
    height:100px;
    width:300px
}

h2{
  font-size: 4em;
}


.abouttext h3{
  font-size: 2.5vw;
}

  .instagram_gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 200px);
    grid-gap: 10px;
  }


  .gridimg1 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }

  .gridimg2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
  }

  .gridimg3 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  .gridimg4 {
    display:none;
  }

  .gridimg5 {
    display:none;

  }

  .gridimg6 {
    display:none;

  }

  .gridimg7 {

    display:none;
  }

  .gridimg8 {
    display:none;
  }

  .gridtext {
    grid-column: 2 /4;
    grid-row: 2 / 3;
    font-size: 38px;
    text-align: center;
    margin: auto;
  }



  .keyfacts h4{
    font-size:16px;
  }

  .about h2{
    font-size: 20vw;
  }

  .aboutfooter{
  max-height: 75px;

  }


    .cite{
      position: absolute;
      top: 3%;
      width: 40%;
      height: auto;
      /* background-color: rgba(255,255,255,0.3); */
      left: 50%;
      font-size: 3em;
      margin-top: 20px;
      padding:10px;
      color:white;
      font-family: 'REIS';
      font-style: normal;
    }

    .quotetext{
      font-size: 40px;
    }



  #inqueres  {
  height: 200vh;
  }


}

@media only screen and (max-width: 450px) {
  #inqueres  {
  height: 100vh;
  }

  .cite{
    position: absolute;
    top: 5%;
    width: 90%;
    height: auto;
    /* background-color: rgba(255,255,255,0.3); */
    left: 5vw;
    font-size: 3em;
    margin-top: 40px;
    padding:10px;
    color:white;
    font-family: 'REIS';
    font-style: normal;
  }

  .quotetext{
    font-size: 32px;
  }

    #inqueres .container {
      top: 14vh;
      max-width: 80vw;
      background: rgba(255, 255, 255, 0.75);

    }

  }