body{
background: #5a79ab;
font-family: henderson-slab-basic,serif; 
color: #f3f2f2;  
min-height: 75rem;
padding-top: 4.5rem;
}

.navbar-item {
color: chartreuse !important;
}
.svg-black{
  fill: black;
}
/*Gallery*/
.top-image {
    text-align: center; 
    margin-top: 2rem;
}
.label-text {
    text-align: center;
    margin: 1rem 30% 0rem 30%;
}

.card {
background: #d1d1d1;
width: 18rem; 
padding: .5rem; 
border-radius: 10px; 
margin: 2rem 1rem;
}
/*Home*/
.container-home{
    background-image: url(/images//Yaket-Group.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    height: fit-content;
    margin:-3rem 0rem 4rem 0rem;
    }

  .container-home img{
  margin-left: -6rem;
  width: 30rem;
   } 

   .container-blurb{
    color: white;
    font-size: 1.2rem;
    width: 70%; 
    text-align: center;
    text-shadow: 0px 0px 20px rgb(0, 0, 22), 0 0 25px rgb(0, 0, 158), 0 0 20px darkblue;
    margin: -10rem auto 0rem auto;        
  }

  .container-list{
    width:60%;
    margin: 2rem 0rem 0rem 30%;
    }
    
    .container-list li{
    color: white;
    margin: 0rem 0rem 1rem 0rem;
     }
    
    .container-features{
    color: white;
   
    }

    .img-f-top{
        margin: 0rem 0rem 6rem 3rem;
      
      }
      .title-gal{
        text-align: center;
        margin: 4rem 0rem .5rem 2rem;
      } 
      .row-video {
      height: 100vh; 
      background-color: #0d4e32;
      }
      #video {
      width:60%; 
      margin: auto; 
      padding: 10rem 0rem 10rem 0rem;
      }


/* MEDIA BREAKS--------------------------------------------------------------------*/

/* +++++++++  Phone portrait++++++++++++ */
@media screen and  (max-width: 540px){
  .container-home{
    background-image: url(/images/Logo-on-BGtop-mobile2.png);
    background-size: cover;
    margin: 0rem 0rem 0rem 0rem;
    text-align: center;
    width: 100%;
    height: 100%;
    }
 .container-home img{
    margin-left: -4rem;
    width: 20rem;
   } 
   .container-blurb{
    color: rgb(255, 255, 255);
    font-size: .8rem;
    width: 70%; 
    text-align: center;
    text-shadow: 0px 0px 20px rgb(0, 0, 22), 0 0 25px rgb(0, 0, 158), 0 0 20px darkblue;
    padding-top: 0rem; 
    margin: auto;         
  }


  .container-list{
    width: 100%;
    margin: 2rem 0rem 0rem 1rem;
   }

   .container-list li{
    margin: 0rem 0rem 1rem 1rem;
    }

  .img-f-top{
    margin: -2rem 0rem 6rem 3.5rem;
  }

  .row-video {
    height: 40vh; 
    background-color: #0d4e32;
    }

    #video {
      width:100%; 
      margin: auto; 
      padding: 1rem;
      
      }
}
/* +++++++++  Phone wide/ ipad mini++++++++++++ */
@media screen and  (min-width: 540px) and (max-width: 800px) {
    .container-home{
      background-image: url(/images/Yaket-Group.png);
      background-size: cover;
      margin: -3rem 0rem 20rem 0rem;
      text-align: center;
      width: 100%;
      height: 100%;
      }
   .container-home img{
      margin-left: -4rem;
      width: 20rem;
     } 

   .container-blurb{
    color: rgb(255, 255, 255);
    font-size: .8rem;
    width: 80%; 
    text-align: center;
    text-shadow: 0px 0px 20px rgb(0, 0, 22), 0 0 25px rgb(0, 0, 158), 0 0 20px darkblue;
    margin: -4rem auto 0rem auto;         
 }
 .container-list{
    width:60%;
    margin: 2rem 0rem 0rem 30%;

    }
    .container-list h2{
      font-size: 1.5rem;
        
        }
    
    .container-list li{
    color: white;
    margin: 0rem 0rem 1rem 0rem;
    font-size: .9rem;
     }
    
    .container-features{
    margin-top: -20rem;
   
    }
    
    .img-f-top{
      margin: 0rem 0rem 6rem 0rem;
      
    }
   .title-gal{
        text-align: center;
        margin: 4rem 0rem .5rem 2rem;
      } 
      .row-video {
     
      background-color: #0d4e32;
      margin: auto;
     
      }
      #video {
      width:60%;
      margin: auto;
      }

      .footnote {
      margin-top: 14rem;
      

      }
  }

/* +++++++++  ipad++++++++++++ */
@media screen and (min-width: 800px) and  (max-width: 1200px){

  .container-blurb{
    color: rgb(255, 255, 255);
    font-size: .9rem;
    width: 70%; 
    text-align: center;
    text-shadow: 0px 0px 20px rgb(0, 0, 22), 0 0 25px rgb(0, 0, 158), 0 0 20px darkblue;
    margin: 10rem auto 0rem auto;         
 }
}
/* +++++++++  ipad  pro ++++++++++++ */
@media screen and (min-width: 1200px) and  (max-width: 1400px){

  .container-blurb{
    color: rgb(255, 255, 255);
    font-size: 1.2rem;
    width: 70%; 
    text-align: center;
    text-shadow: 0px 0px 20px rgb(0, 0, 22), 0 0 25px rgb(0, 0, 158), 0 0 20px darkblue;
    margin: 15rem auto 0rem auto;         
 }


}
/* +++++++++  laptop++++++++++++ */
@media screen and (min-width: 1400px) and  (max-width: 1800px){

  .container-blurb{
    color: rgb(255, 255, 255);
    font-size: 1.2rem;
    width: 70%; 
    text-align: center;
    text-shadow: 0px 0px 20px rgb(0, 0, 22), 0 0 25px rgb(0, 0, 158), 0 0 20px darkblue;
    margin: 10rem auto 0rem auto;         
 }


}
/* +++++++++  iMac++++++++++++ */
@media screen and  (min-width: 1800px){

  .container-blurb{
    color: rgb(255, 255, 255);
    font-size: 1.5rem;
    width: 70%; 
    text-align: center;
    text-shadow: 0px 0px 20px rgb(0, 0, 22), 0 0 25px rgb(0, 0, 158), 0 0 20px darkblue;
    margin: 30rem auto 0rem auto;         
 }


}