/* 256c7c */

@import "../font/font.css";

  .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: 540px;
    height: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    background-repeat: no-repeat;
    background-position: center;
    margin: -250px 0 0 -250px;
    /* text-align: center; */
  }

  .animation h2{
    font-size: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
    font-family: 'Open Sans Animation';
    /* font-weight: 700; */
    text-align: center;
    text-transform: uppercase;
    background: linear-gradient(90deg, #000, #256c7c, #000);
    letter-spacing: 4px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    background-size: 80%;
    animation: shine 5.0s linear infinite;


  }



  @keyframes shine {
    0% {
      background-position-x: -400%;
    }
    100% {
      background-position-x: 400%;
    }
  }

  .loader_bautstein {
    stroke: #256c7c;
    stroke-width: 1;
    stroke-opacity: 0.0;
    fill-opacity: 0;
    fill: #256c7c;
    stroke-dasharray: 1400;
    stroke-dashoffset: 2000;

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

    -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;
  }

  @-webkit-keyframes jakob_intro {

    2%{
      stroke-opacity: 0;
    }

    40% {
      stroke-opacity: 1;
    }

    50% {
      fill-opacity: 0.1;
      stroke-opacity: 1;
    }

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

    75% {
      fill-opacity: 0.35;
    }

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



  @-o-keyframes jakob_intro {
  40% {
    stroke-opacity: 1;
  }

  50% {
    fill-opacity: 0.1;
    stroke-opacity: 1;
  }

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

  75% {
    fill-opacity: 0.35;
  }

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

  @-moz-keyframes jakob_intro {
  40% {
    stroke-opacity: 1;
  }

  50% {
    fill-opacity: 0.1;
    stroke-opacity: 1;
  }

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

  75% {
    fill-opacity: 0.35;
  }

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


  @keyframes jakob_intro {
  40% {
    stroke-opacity: 1;
  }

  50% {
    fill-opacity: 0.1;
    stroke-opacity: 1;
  }

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

  75% {
    fill-opacity: 0.35;
  }

  100% {
    stroke-opacity: 0;
    fill-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;

}

body, html {
  height: 100%;
  margin: 0;
  font-family: 'Open Sans';
  
  color: #777;
  font-size: 14px;
}

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, h2{
  font-size: 30px;
}

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: 104vh;
  min-height:1020px;
  width: 100%;
  z-index: 10;
   /* height:100vh;  */
  background-color: white;
}

.aboutheader{
  padding-top:45px;
  padding-bottom: 25px;
}

.aboutfooter{
position: absolute;
bottom: 0;
width: 100%;
max-height: 20vh;
overflow: hidden;
z-index:10;
}

.abouttext, .keyfacts{
  z-index:20;
  height:60vh;
  min-height:600px;
  /* padding-right: 50px; */


}

.graph_container{
    max-width: 400px;
    min-width: 220px;

}




.scrollbar-abouttext::-webkit-scrollbar-track {
/* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 1);  */
background-color: #ffffff;
border-right:solid 1px;
border-color: rgba(37, 108, 124,0.1);
border-radius: 0, important!;
}

.scrollbar-abouttext::-webkit-scrollbar {
width: 5px;
background-color: #F5F5F5; }

.scrollbar-abouttext::-webkit-scrollbar-thumb {
border-radius: 3px;

/* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2); */
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0)), to(#256c7c));
background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,0) 20%, #256c7c 100%);
background-image: linear-gradient(to top, rgba(0,0,0,0) 20%, #256c7c 100%); }


.abouttext i{
  border-top: dotted 1px;
  border-color: #777;
  margin-top: 10px;
  color:#777;
  padding:5px;
}



.keyfacts h3, .keyfacts h4{
  /* height:50vh; */
  padding-top: 14px;

}

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

.table th, .table td{
  /* font-size: 12px; */
  font-weight: 400;
  padding: 0;
  color: #777;
}

.table td{
  padding-left:20px;
}



.about span {
  font-size: 15px;
  text-align: right;
}

.about i {
  /* margin-right: 10px; */
  color: #777;
}

.abouttextbox{
  overflow:scroll;
}


#inqueres {
  position: relative;
  height: 100vh;
  width: 100%;
  z-index: 10;
  background-color: white;
}


#inqueres .container {
  position: absolute;
  bottom: 20vh;
  height:auto;
  max-width: 37vw;
  left: 5vw;
  z-index: 30;
  color: black;
  background: rgba(255, 255, 255, 0.4);
}

#inqueres p{
  padding-top: 10px;
}

#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;
}

.h-10{
  height:10vh;
}

.w-40{
  width: 40%;
}


.header .navbar li a {
  font-size: 19px;
  color: #fff;
  margin-left: 16px;
}

.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
}

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


/* The sidebar menu */
.sidebar {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */

  z-index: 200; /* 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;}
}





#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: 24px;
  text-align: center;
  margin: auto;
}

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



/* 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, .flip-card-major {
  background-color: transparent;

  height: 200px;
  /* border: 1px solid #f1f1f1; */
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}

.flip-card {
  width: 220px;
}

.flip-card-major {
  width: 330px;
  margin-left: 0.6rem;
  margin-right: 0.6rem;
}
/* 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, .flip-card-major: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-major > .flip-card-inner > .flip-card-back p{
  width: 75%;
}


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

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


.flip-card-major img{
      max-width: 280px;
      width: 260px;
  }

/* 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);
} */



.social_wrapper, .social_wrapper_footer {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  grid-template-rows: 50px;
  grid-gap: 10px;
  /* align-items: center;
  place-items: center; */
}

.social_wrapper_footer{
  place-content:center;
}

.socialbutton {
  border-radius: 50%;
  background-color: rgba(37, 108, 124, 0.4);
  height: 100%;
  width: 100%;
  display: flex;
  place-content: center;
  align-items: center;

  font-size: 17px;


  border: 2px solid;
  border-color: rgba(255, 255, 255, 0);

}

 .socialbutton i{
  color: white;

}

.socialbutton:hover {
  background-color: rgba(0, 0, 0, 0.7);
  border-color: rgba(37, 108, 124, 0.9);
}


.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: 400;
  color: #fff;
  opacity: 1;
}

.bloggrid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 250px);
  grid-gap: 20px;
}

.container_header{
  padding-top:10px;
  padding-bottom:10px;
  text-align: center;
}

.blogtext{
  grid-column: 1/ 3;
  grid-row: 1 / 2;
  color: black;
  text-align: center;
  align-self: center;
  justify-content: center;
  /* z-index:35; */
}

.blogtextbox{
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  color: black;
  text-align: center;
  justify-self: center;

}

.blogtextbox h3, .blogtextbox h4{
  color: rgb(37, 108, 124);
}


.blogtextbox p{
  /* width:500px; */
  padding-left: 10px;
  padding-right: 10px;
  text-align: center;
  padding-top: 10px;
}

.blogbottom{
  position: relative;
  /* z-index:20; */
  background-color: none;
  height:80px;
}


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

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

}

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

.bloglink1{
  grid-column: 4 / 5;
  grid-row: 2 / 3;
  height:100%;
  color: rgba(37, 108, 124, 0.6);
  background-color: white;
}

 .bloglink2, .bloglink3, .bloglink4{
  overflow: hidden;
  background-color: rgba(37, 108, 124,1);
  position: relative;

}



.roundimg{
  min-width:200px;
  width: 23%;
  max-width:30%;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid;
  border-color: rgba(37, 108, 124, 0.8);
  z-index:1;
}

.japan{
  width:50px;
  height: auto;
  margin: 15px;
}

.blogimg{
  position: absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  object-fit: cover;
  z-index: 10;
  transition: .5s ease;
  -webkit-transition: .5s ease;
  backface-visibility: hidden;
  opacity: 1;
}

.bloglink2:hover .blogimg, .bloglink3:hover .blogimg, .bloglink4:hover .blogimg{
      -webkit-transform: scale(1.2);
       transform: scale(1.2);
       opacity: 0.25;
}

 .bloglink2:hover .overfooter, .bloglink3:hover .overfooter, .bloglink4:hover .overfooter{
      display:none;
}


.overlaytext{
  text-align: center;
  margin-top:100px;
}

.overlaytext h5{
  color:white;
  margin-top: 40px;
  font-size: 1.2em;
}

.overlaytext span{
  color:white;
  padding: 10px;
  border: solid 2px;
     border-color: white;
  font-size: 1.5em;
}

.overlaytext_green span{
    color: rgba(37, 108, 124, 0.6);
    font-size: 24px;
    border: solid 0px;


}
.overlaytext_green:hover span{
    color: rgba(37, 108, 124, 0.9);
}

.overfooter{
  z-index:10;
  position: absolute;
  bottom: 10px;
  left:20px;
  transition: .5s ease;
  -webkit-transition: .5s ease;
  backface-visibility: hidden;

}

.overfooter h3{
  font-size: 1.4em;
  color:white;
}



.gridwrapper{

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* grid-template-rows: repeat(2, 220px); */
  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;

  }

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




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

    align-self: center;
    justify-self: center;

  }

  .subscribe a{
    color: white;
    background-color: red;
    height: 40px;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    font-size:18px;
    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: 24px;


  }

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

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


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

  .error-bg{
      background-image: url('https://jakob-schubert.com/jakob/error/astronautStars.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
  }

  .spaceSpacer{
    height: 20vh;
  }
  .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;
    grid-gap: 10px;
  }

  .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%;
    color: black;
    opacity: 60%;
  }


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


  .socialbutton a:hover{
    opacity: 90%;
  } */



  .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: 1024px) {
    .flip-card, .flip-card-major {
    height: 150px;
    }
    .flip-card {
        width:198px;
    }

    .flip-card-major > .flip-card-inner > .flip-card-back p{
      width: 100%;
    }


  .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: 24px;
    text-align: center;
    margin: auto;
  }

  .gridwrapper{

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

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

  }


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

   }

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

    }

    .youtubetext1 {
      grid-column: 1 / 2;
      grid-row: 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;

    }


    .bloggrid{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 250px 110px 250px 250px;
      grid-gap: 20px;
    }

    .blogtext{
      grid-column: 1/ 3;
      grid-row: 1 / 2;
      color: black;
      text-align: center;
      align-self: center;
      justify-content: center;
      /* z-index:35; */
    }

    .blogtextbox{
      grid-column: 1 / 3;
      grid-row: 2 / 3;
      color: black;
      text-align: center;
      justify-self: center;

    }


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

      }

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

    }

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

    }

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

    #inqueres .container {
      bottom: 15vh;
      max-width: 40vw;
      left: 3vw;
      background: rgba(255, 255, 255, 0.6);
    }

    .bgimg-3{
        min-height: 110%;
        /* height:200%; */
        background-position: center;
        /* height:170vh; */
    }







}

/* Phone */
@media only screen and (max-width: 768px) {

.bgimg-2{
  background-position: 55% 0;
}
.bgimg-4{
  background-position: 37% 0;
}

  .animation {
    width: 350px;
    height: 500px;
    margin: -150px 0 0 -175px;
  /* text-align: center; */
  }

.animation h2{
  padding-top: 10px;
  font-size: 19px;
  padding-bottom: 12px;

}

.flip-card {
    height:100px;
    width:400px;
}

.flip-card-major{
  height:120px;
  width:400px;
}
  .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: 24px;
    text-align: center;
    margin: auto;
  }

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

  .about h1{
    font-size: 30px;
  }

  .aboutfooter{
  max-height: 75px;

  }




  /* #inqueres  {
  height: 100vh;
  } */


  .social_wrapper, .social_wrapper_footer {
    display: grid;
    grid-template-columns: repeat(3, 40px);
    grid-template-rows: 40px;
    grid-gap: 10px;
    /* align-items: center;
    place-items: center; */
  }

  .socialbutton{
    font-size: 14px;
  }

  .bgimg-3{
      min-height: 900px;
      /* height:200%; */
      background-position: center;
      /* height:170vh; */
  }

  #inqueres .container {
    bottom:  5vh;
    left: 3vw;
    max-width: 75vw;
    width: 70vw;
    /* max-height:24vh; */
    background: rgba(255, 255, 255, 0.75);
    /* height: 24vh; */
  }

  /* .about{
    height:160%;
  } */





}

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

  .bgimg-3{
      min-height: 160%;
      /* height:200%; */
      background-position: 50% -20px;
      /* height:170vh; */
  }

  #inqueres .container {
    bottom: 5vh;
     max-width: 90vw;
     width: 90vw;
    /* max-height:24vh; */
    background: rgba(255, 255, 255, 0.75);
    /* height: 24vh; */

  }

  .about{
    height:150%;
  }




  }

  /* smartphones, touchscreens */
@media (hover: none) and (pointer: coarse) {

   .bloglink2 .blogimg, .bloglink3 .blogimg, .bloglink4 .blogimg{
        -webkit-transform: scale(1);
         transform: scale(1);
         opacity: 0.25;
  }

 .bloglink2 .overfooter, .bloglink3 .overfooter, .bloglink4 .overfooter{
        display:block;
  }

  .blogimg{

    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;


  }





  .overfooter{
    z-index:2;
    position: absolute;
    bottom: 5px;
    left:20px;


  }

  .overfooter h3{
    font-size: 1.2em;
    color:white;
  }


  .overlaytext{
    text-align: center;
    margin-top:60px;
  }

  .overlaytext h6{
    color:white;
    margin-top: 40px;
    font-size: 1.0em;
    padding-left: 3px;
    padding-right: 3px;
  }

  .overlaytext span{
    color:white;
    padding: 8px;
    border: solid 1px;
    border-color: white;
    font-size: 1.3em;
  }

  .overlaytext_green span{
      color: rgba(37, 108, 124, 0.9);
  }


}