/*------------for laptop up to 1200px----------------------*/
@media only screen and (max-width:1200px){
    
  .row{padding:0 2%;}

    html{overflow-x: hidden;}

  .head h2{font-size:1.5rem ;}
}


/*------------for laptop up to 1023px-----------------------*/


@media only screen and (max-width:1023px){

  body{font-size: 18px;}

  section{padding:30px} 
}


/*------------for tabs up to 767px---------------*/

@media only screen and (max-width:767px){
    
  .row{
    padding:0 2%;
    flex-direction: column;
  }

  .span-1-of-2 {width: 100%; }

  .span-1-of-3 {width: 100%;}

  .span-1-of-4 {width: 100%;}

  .head h2{font-size:1.2rem;}

  /*--------------------header-----------------------------*/

  .head{
    border-bottom:1px solid #e67e21;
    height:100px;
  }
  .head-pic{width:100px;}

  .head-image-left,
  .head-image-right{
    width: 25%;
    height:20%;
  }

  .head-image-left{
    left:0px;
    top:100px;
  }


  .header{
    height:100vh;
  }

  .head-image-right{
    bottom:0;
  }
  


  .lightBox-content {
    width: 100%;
  }

.prev,
.next {
  top: 65%;
  padding: 10px;
  margin-top: -50px;
  font-size: 15px;

}

  
    
  /*---------------------nav-------------------------------*/

  .main-nav  {
    display:none;
    flex-direction:column;
    margin-top:20px;}

  .main-nav a{
    width: 100%;
    display: block;
    text-align: center;
  }

  .sticky .main-nav {margin-top:0px;}

  .main-nav li a:link,
  .main-nav li a:visited{
    border:0;
  }

  .nav-mob{display:block;}

  .sticky 
  .nav-mob{
    display:block;
  }


  /*----------------------section-history-----------------------------------------------------*/

  .section-about p,
  .section-history p{
    margin-top:10px;
    text-align:justify;
    text-justify: distribute;
    word-spacing:-2px;
    font-size:0.8rem;
  }

  .section-about p{margin-top:10px;}


  /*-------------------------section-location-----------------------------------------------*/

  .section-location h3{margin-top:10px;}


  /*-----section-donation----------------------------------------------------------------------*/

  .donate-box img{
    width: 120px;
    height:120px;
    margin-top:20px;
  }

  .donate-description p{margin-top:20px;
    word-spacing: -4px;
  }
    
  .btn-full{
      margin-top:10px;
      width:80%;
    }


  /*----------------------footer-------------------------*/

  footer{padding:30px 80px;}
    
  .footer-about{width:100%;}
    
  .contact-info .info-group .text p,
  .quick-links ul li a,
  .footer-about p{
      font-size:1rem;
    }
    
  .contact-info h2,
  .quick-links h2,
  .footer-about h2{
      font-size:1.1rem;
      margin-bottom: 8px;
    }
    
  .contact-info .info-group .icons{display: none;}

  .contact-info .info-group .title{font-size: 1rem;}

  .footer-about,
  .contact-info{
        margin-top:10px;
  }


  /*---------------------section-gallery---------------------------*/

  .column {
    width: 100%;
    margin:15px auto;
  }

  
  .lightBox {
    padding: 30px;
    width: 100%;
    height: 100%;
  }
  
  .lightBox-content {
    top:50%;
    transform: translate(0,-50%);
  }
    
  /*---------section-place--------------------------------------*/

  .place{flex-direction: column;}

  .place-content{
    border-bottom-left-radius: 10px;
    border-bottom-right-radius:10px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    
  }

  .place-img {
    height: 50%;
    border-top-left-radius: 10px;
    border-top-right-radius:10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius:0;
  }
   
}

@media only screen and (max-width:480px){


  .row{
    padding:0 2%;
    flex-direction: column;
  }

  section{padding:10px}

 
  .head-pic{width:70px;}

  .head-image-left,
  .head-image-right{
    width: 40%;
    height:30%;
  }

  
  .head h2{font-size:1.1rem;}

  .tag-line h2{
    font-size:1.2rem; 
  }

  .tag-line span{
    display: block;
  }

  .devider img,
  .devider-head img{
    width:300px;
  }
  
  .row-heading h2{font-size:1.2rem;}

  .section-about p{margin-top:10px;}

  .section-location h3{margin-top:10px;}

  .button{
    width: 55%;
    font-size:0.7rem ;
  }

  .btn-full{
    font-size:0.7rem;
    padding:5px 10px;
  }

  .donate-box img{
    width: 100px;
    height:100px;
    margin-top:20px;
  }

  .modal-header h2 {
    font-size: 1rem;
    margin-left: 0;
  }

  .modal-header img{width:130px; }

  .prev,
  .next {
    top: 75%;
  
  }



  /*----------footer------------------------*/

  footer{padding:30px 30px;}
    
  .footer-about{width:100%;}
    
  .contact-info .info-group .text p{font-size:0.8rem;}
    
  .quick-links ul li a{
      font-size:0.8rem;
      margin-bottom:5px;
  }

  .footer-about p{font-size:0.8rem;}

  .contact-info h2,
  .quick-links h2,
  .footer-about h2{
    font-size:0.9rem;
    margin-bottom: 8px;

  }

  .footer-about,
  .contact-info{
    margin-top:15px;
  }

  .contact-info h2:after,
  .quick-links h2:after,
  .footer-about h2:after{
    width:50px;
  }

  .contact-info .info-group{padding:5px;}

  .contact-info .info-group .icons{display: none;}

  .contact-info .info-group .title{
    display:inline;
    color: #999;
    font-size: 0.85rem;
  }

  .social-links{margin-top:10px;}

  .copiright-text {
    width:100%;
    padding:5px 10px;
  }
  .copiright-text p{font-size:0.6rem;}

}


@media only screen and (max-width:350px){

  .head h2{font-size:0.9rem ;}

  .head-pic{width:50px;}

  .head-image-left,
  .head-image-right{
    width: 40%;
    height:25%;
  }

  .tag-line h2{
    font-size:1rem; 
  }

}