*{box-sizing: border-box;margin: 0;}
.main{  margin: auto;  min-height: 100vh;padding-top: 2vh; 
     background-color: rgb(3, 0, 8);    width:100%;

flex-wrap: wrap;    justify-content: center; top: 0%;left: 0%; background-position:top; position: relative;  background-size: cover;   ; 
  }
#container{ z-index: 999999999999999;}
/* ::-webkit-scrollbar {  display: none;} */
/* Set the width of the scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

/* Set the background color of the scrollbar track */
::-webkit-scrollbar-track {
  background-color: grey;
}

/* Set the color and shape of the scrollbar thumb */
::-webkit-scrollbar-thumb {
  background-color: rgb(9, 43, 87);
  border-radius: 8px;
}

/* Set the color of the scrollbar thumb on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: yellow;
}

@keyframes slideInFromLeft { 0% { opacity:0; transform: scale(.5);}100% {opacity:1;transform: scale(1); }}
@keyframes sliders {20%{background-position: center; } 75%{background-image: url(img/slide_1.JPG);} 100%{background-position: bottom;}}
@keyframes slider-text1 {100%{opacity: 0;}}@keyframes slider-text2 {100%{ opacity: 1;}}
@keyframes slider-text3 {100%{opacity: 1; }}

#text3{position: absolute;  align-self: center;}
.header{
  z-index: 9999;
    background-image: linear-gradient(to right, transparent);
    width:90%; height:7%;margin: auto; left: 0;right: 0;
    display: flex; animation: 1.5s ease-in-out 1s 1 slideInFromLeft;
    justify-content:space-between; color:rgba(212, 211, 195, 0.884);
    font-family:sans-serif; font-size: .35em; position:fixed;
    border-radius: 14px; 
}
.header div{height:99%;display: flex; align-items: center;justify-content: center;}
.header-right div{padding:10px; font-family:Arial, Helvetica, sans-serif;}

.header-right div :hover{color: yellow; cursor: pointer;}

#home {border-bottom: yellow solid 1px; }
.triangle{ height: 100%; width:50%;background-color: thistle;transform: rotate(20deg); float: right;}
/* .slide{width:45.4%; height:380px;  position: absolute; top: 20%;
left: 45%; background-size: cover;border-radius: 4px;
} */

 .about{flex: 1.4;  height:100%;color: thistle; font-family: sans-serif;}
 .about-content{padding: 8px; font-size: .9em; font-weight: bold;line-height:1.5;width: 80%; cursor: pointer;}
 .title{padding: 8px; }

 .title h1{ font-size: 1em;}

.logo{font-size: 3.3em; color: thistle ; padding-left:auto ; font-family: sans-serif; }

.home{width:90%;padding-top: 10vh; height:80vh;display: flex; justify-content: space-around;align-items: center; margin: auto;flex-wrap:wrap;}











.hidden {
    opacity:0;  }
  .console-container {
       font-family:sans-serif;    font-size:1.4em; font-weight: bolder; flex: 1;margin-left: -20%;
    text-align:center;  width: 100%;   position:relative;    color:thistle;  
  align-self: center;
  }  .console-underscore {
     display:inline-block;    position:relative;    top:-0.14em;    left:10px; }


.animated-intro{ position: relative;  flex: 2; height: 100%;float :right;}




.contact{display: flex;  justify-content:space-between; width:7vh;margin-bottom:-6%;}
#hide{display: none;}


.shownSection{
  display:inherit;
}
.hiddenSection{
  display:none;
}





.recent{  display:none;font-family: sans-serif;padding: 80px; margin-top: 2%;display: none; }
/* .recent-title h1 {
  background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
  background-size: cover;
  color: transparent;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  font-size: 3em;
  line-height: .75;
  margin: 20px 0;font-weight: bold;
} */

.recent-content{display: flex; flex-wrap: wrap; position: relative; margin-top: 10px;}


.promised {position: relative; transition-duration: 1s;;

   background-size: cover;
  min-height: 250px;  flex: 2;margin: 4px;  border-radius: 10px;
}.promised img{width: 100%;height: 100%;border-radius: 10px;}
.promised:hover{opacity: .7;cursor: pointer; transform: translateY(-10px);}
#promised{background-image:url('img/The\ Promised\ Land.png');}
#sanergy{background-image:url('img/GOALKEEPERS\ NEW\ PNG.jpg');}
#global{background-image:url('img/global.jpeg');}
#educate{background-image: url('img/Educate!\ .jpg'); background-position: center;}
#hood{background-image: url('img/BIKERS.png'); background-position: center; ;}

#agriculture{background-image:url('img/Technology\ in\ Agriculture\ \(1\).png'); background-position: center;}
#mkenya{background-image:url('img/MKENYA\ DAIMA.png'); background-position: center;}
#makueni{background-image:url('img/makueni.png'); background-position: center;}
#nhif1 {
  background-image: url('img/supercover.jpg');
  transition: background-image 3s;
}


#dragon{background-image: url('img/RETRACING\ THE\ DRAGON\ FLY\ SEA\ BROADCAST.00_00_32_08.Still001.png');}


#fam{background-image: url('img/beans\ 2.jpeg');}

#ssc{background-image: url('img/Swahili\ Sea\ Connection.jpeg');}
#educate{background-image: url('img/Educate!\ .jpg');}





.promised div {text-align: center; position: absolute; top:50%;left: 0%; width: 100%;height: 20%;}

.promised div h1{font-size: 1em ;padding: 3px; }



.modal{background-color: rgb(3, 0, 8);position: sticky;height: 0px; position: -webkit-sticky;top:0; left: 0;right: 0; overflow: hidden; margin-left: auto;margin-right: auto; width: 60%; display: block;z-index: 99999999;}
.modal-content{ width: 70%; height:90%;position:relative;margin: auto;overflow: hidden;margin-top: 5%;}



.back{border-radius: 15px;margin: 10px; cursor: pointer; padding: 6px;display: flex; position:absolute;top: 0%;left:0% ; background-color: rgb(22, 1, 22);}

.responsive-iframe {
  position: absolute;
  top: 0%;
  left: 0%;

  width: 100%;
  height: 100%;
}

.reel{animation: rec 5s; display:none;font-family: sans-serif; position: relative;width: 100%;}
.reel-content{  left: 0; width: 60%;
 
  right: 0; 
  margin-left: auto; 
  margin-right: auto;}
.reel-item{position: relative; transition-duration: 1s;

   background-size: cover;
  flex: 2; 
}

.docs{animation: rec 3s ; display: none; font-family: sans-serif;padding: 80px; margin-top: 2%; height: 94%;}
.docs-content{ padding-top: 1%;}

.docs-bottom{display: flex; }
.doc-item{position: relative; ; transition-duration: 1s; 


  background-size: cover;
  min-height: 250px;  flex: 2;margin: 6px;  border-radius: 5px;
}
.doc-item:hover{
  cursor: pointer;
  transform: translateY(-10px);
}

#theatre{background-image:url('img/THEATRE\ RENAISSANCE\ IN\ NIGERIA\ option\ 1.jpeg');}
#olympic{background-image:url('img/olympic.jpg');}
#diplomat{background-image:url('img/The\ Super\ Diplomat.jpeg');}
#promised{background-image:url('img/The\ promised\ land.jpeg');}
#nhif{background-image:url('img/nhif.png'); background-position: center;}


#elephants{background-image:url('img/DAPHNE.jpeg');background-position: right;}
#owuor{background-image:url('img/Yvonne\ Adhiambo\ 2.jpg');}
.shows{font-family: sans-serif; display: none;padding: 60px; margin-top: 2%; position: relative;}

.doc-item div {font-family: sans-serif;  display: flex; align-items: center;justify-content: center; 
  /* background: rgb(1,0,8); */
  /* background: linear-gradient(0deg, rgba(1,0,8,0.9360119047619048) 1%, rgba(1,1,15,0.8463760504201681) 27%, rgba(1,2,22,0.7371323529411764) 46%, rgba(231,237,238,0) 79%); */



   position: absolute; top:80%;left: 0%; width: 100%;height: 20%;}




.doc-item div h1{font-size: 1em ;padding-top: 7px; font-weight: bold; color: yellow;text-shadow: 2px 2px 4px #000; }
.comm{animation:rec 3s; display:none; font-family:sans-serif;padding: 80px; margin-top: 2%; height: 94%;}
.film{display: none; font-family: sans-serif;padding: 80px; margin-top: 3%; height: 94%;}
.coorp{animation:rec 3s; display: none; font-family: sans-serif;padding: 80px; margin-top: 2%; height: 94%;}
.serv{animation:rec 3s; display: none; font-family: sans-serif;padding: 80px; margin-top: 3%; height: 94%}

.serv-content{ display: flex; flex-wrap: wrap;height: auto;
  
    border-radius: 15px;
}
.serv-item{

  height: 250px;padding: 15px;
    border-radius: 15px; width:24%; background-color: rgb(8, 8, 8);margin: 4px;transition-duration: 1s;
}
.desc p{font-size: .8em; color: thistle;font-weight: bold;}
.lab h4{color: thistle;}

.serv-item:hover {
transform: translateY(-30px);
  

}

.shows{ margin: auto;  }

.doc-item1{position: relative; ; transition-duration: 1s; min-width: 33%;

  background-size: cover;
  min-height: 200px; margin: 6px;  border-radius: 5px;}

.doc-item1 div {font-family: sans-serif;  display: flex; align-items: center;justify-content: center; 
  background: rgb(1,0,8);
  background: linear-gradient(0deg, rgba(1,0,8,0.9360119047619048) 1%, rgba(1,1,15,0.8463760504201681) 27%, rgba(1,2,22,0.7371323529411764) 46%, rgba(231,237,238,0) 79%);



   position: absolute; top:80%;left: 0%; width: 100%;height: 20%;}




.doc-item1 div h1{font-size: 1em ;padding-top: 7px; font-weight: bold; color: thistle; }

.wrapper {
  animation: scroll 60s linear infinite;
  background: url("img/start.jpg"), #030111;
  color: #eee;

 

  perspective: 0px;
  perspective-origin: -250% 350%;
  
}

@keyframes scroll {
   100%{
    background-position:0px -3000px;
  }
}

@media (prefers-reduced-motion) {
  .wrapper {
    animation: scroll 200s linear infinite;
  }
}

@media (min-width: 670px) {
  .title {
    font-size: 3rem;
  }
}






/* @media only screen and (min-width: 468px) {
  .logo-retouch{display: none;}.about-content{width: 100%;}
  .header{background-color: black;}
  .main{overflow: scroll;} .recent{display: inherit;}
  .header-right div{ display: none;}
  .about{width:90%; margin: auto; margin-top: 10px;}
  .animated-intro{position: relative; width: 100%;margin-top: 10%;height: 60vh;margin-bottom: 40%;}
  .slide{width: 90%;left: 0%;height: 90%;position: relative;margin:auto}
  .console-container {position:relative; left:-50%;right: 0;top: 25%; margin: auto;height:80px; width: 100%;color: red; }
  .recent-content{display: block; width:90%; margin: auto;}.recent{padding: 4px;;}
  .promised{width:100%; margin: 8px; }.recent-title{padding: 20px;}
  /* .recent{display: inherit; width: 100%;}.recent-content{width: 100%;}.promised{width: 90%; margin: auto;} */
  /* .film{display: none; padding: 8px;height:auto}.docs-bottom-bottom{display: inline;}
  .serv{display: inherit; padding: 2px; height: auto;} .serv-content{display: inline-block;}.serv-item{width: 90%; margin:auto; margin-bottom: 10px;}
}
 */

 

.cnt{color: thistle;}


.flexer{
  display: flex;
 align-items: center;
 cursor: pointer;

}




  @media only screen and (max-width: 868px) {
    .about{font-size: 1.5em;}.logo{flex: 1;}.doc-item{background-position: center;}
    .animated-intro{display: none;}
    .about-content{width: 100%;}
    .header{background-color: black;}.cnt{font-size: .7em ;}
    .main{overflow: scroll;} .recent{display: inherit;}
    .header-right div{ display: none;}.home{display: inline-block; height: auto;}
    .about{width:90%;left: 0;right: 0; margin: auto; text-align: center;padding: 10px; }
    /* .animated-intro{position: relative; width: 100%;margin-top: 4%;height: 60vh;} */
    .slide{width: 90%;left: 0%;height: 100%;position: relative;margin:auto}
    .console-container {text-align: left; height: 10%;margin:0px;min-width: 100%;left:4% }
    .docs-bottom{flex-direction: column;  margin: auto;}.recent{padding: 8px ;}
    .promised{width:100%; margin: 8px; }.recent-title{padding: 20px;}
    /* .recent{display: inherit; width: 100%;}.recent-content{width: 100%;}.promised{width: 90%; margin: auto;} */
    .film{display: none; padding: 8px;height:auto}.docs-bottom-bottom{display: inline;}
    .serv{display: inherit; padding: 2px; height: auto;} .serv-content{display: inline-block;}.serv-item{width: 90%; margin:auto; margin-bottom: 10px;}
  }


  
  @media only screen and (max-width: 1260px) {
    
    .logo{font-size: 2em;}
    .header-right{font-size: .7em;}
    .about-content{font-size: .6em;}.reel{margin-top: -10%;}
.reel-content{margin-top: 10vh;}.doc-item{min-height: 250px;}.doc-item1{min-height: 300px;}
      }
    

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

.header-right{font-size: 1.6em;} .about-content{font-size: 1.27em;}
.logo{font-size: 5.7em;}.reel-content{margin-top: 10vh;}.doc-item{min-height: 430px;}.doc-item1{min-height: 300px;}
.logo-retouch{margin-top: 10%;}
.console-container{font-size: 2em;margin-top: 3%;}
  }







   /* .title {
    background-image: url(https://media.giphy.com/media/26BROrSHlmyzzHf3i/giphy.gif);
    background-size: cover;
    color: transparent;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    line-height: .75;
    padding: 10px 0;
    font-size: 2em;
 }