body{font-family: 'Montserrat', sans-serif;}

.row{
  margin:0px !important;
  padding:0px !important;
}


@media(min-width:320px) and (max-width:1000px){
.banner img{
  width:100%;
  height:350px !important;
}
  .contactus {
    bottom: 300px !important;
}
   
.icon-bar-p {
  position: fixed;
  top: 280px !important;
  right: 0;
  padding: 0;
  list-style: none;
  z-index: 99;
}  
.icon-bar-p a {
  display: block;
  text-align: center;
  padding: 8px !important;
  transition: all 0.3s ease;
  color: white;
  font-size: 12px !important;
}  
.carousel-control.right{
  background-image:none !important;
     
}
.carousel-control.left{
  background-image:none !important;
     
}
   .kalaa{font-family: pristina;
      font-size: 30px !important;
      font-weight: 600 !important;
      position: relative;
       top: 7px;
      color:#ff5000;
      }

    .history{padding-top: 0px !important;
         font-size: 20px;
         font-weight: 500;
        color: #333;}

    .r8{position: relative;
        bottom: 80px;
      font-size: 18px;
      font-weight: 300;
    }

    #colophon{margin-top: 0px;}

    .other{text-align: center;
      position:absolute;
      top: -19px;
      font-size: 16px !important;
      color: #fff;
     font-weight: 500;
     }
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px !important;
    height: 2px !important;
    border-radius: 1px !important;
    background-color: #bbbbbb !important;
}
.navbar-toggle {
    position: relative !important;
    float: right;
    padding: 9px 10px !important;
    margin-top: 8px;
    margin-right: 15px !important;
    margin-bottom: 8px !important;
    background-color: transparent;
    background-image: none;
    border: 1px solid #bbbbbb !important;
    border-radius: 4px !important;
}
.carousel-control.right{
  background-image:none !important;
}
.carousel-control.left{
  background-image:none !important;
}

 .contactus {
    position: fixed;
    background-color: #ff5000;opacity:0.7;
    bottom: 140px;
    height: auto;
    width: auto;
    left: 0px;
    padding: 10px 10px 10px 10px;
    z-index: 9999;
    border-radius: 3px;
    font-size: 17px;
    font-weight: 500;
}

.welcome{padding-bottom: 10px;
	       font-size: 43px;
         font-weight: 800;
         color:#fff;}

.btn-primary{font-size: 17px;
	         margin-top:10px;
	        font-weight: 500;
	        background-color: #fff;
	        border: 1px solid #fff;
	        color: #222;
	       border-radius: 0px;
	       }
.btn-primary:hover{background-color: #ff5000;
                  border: 1px solid #ff5000;}

.education{padding-bottom:110px;
	      font-size: 17px;
         font-weight: 400;
         color:#fff;}

.navbar-brand{position: relative;
              bottom: 14px;}

.navbar-nav{margin-left: 20px;
            }

.navbar-default{padding: 7px 20px;
                background-color: #fff;
                box-shadow: 10px 10px 12px 2px rgba(0,0,0,.11);}


.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom:0px;
    border: 1px solid transparent;
}

.kalaa{font-family: pristina;
      font-size: 30px;
      font-weight: 600;
      position: relative;
      top: 7px;
      color:#ff5000;
   }
   
.kalaa:hover{font-family: pristina;
      text-decoration-line: none;
      font-size: 30px;
      font-weight: 600;
      position: relative;
      top: 7px;
      color:#d34c0f;
   }

.navbar-default .navbar-nav>.active>a{
    color: #222;
    background-color: #edebeb;}

.navbar-default .navbar-nav>.active>a:hover{
    color:#ff5000;
    }

.navbar-default .navbar-nav>li>a:hover{color:#ff5000;}

.dropdown-menu>li>a:hover{color:#ff5000;} 

.icon-bar-p {
  position: fixed;
  top: 57%;
  right: 0;
  padding: 0;
  list-style: none;
  z-index: 99;
}

.icon-bar-p a {
  display: block;
  text-align: center;
  padding: 14px;
  transition: all 0.3s ease;
  color: white;
  font-size: 15px;
}

.icon-bar-p a:hover {
    background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}

.about-img{padding-top: 20px;}

.about-img2{position: relative;
            bottom:110px;
            left: 75px;
           -webkit-box-shadow: -1px 4px 46px -3px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 4px 46px -3px rgba(0,0,0,0.75);
box-shadow: -1px 4px 46px -3px rgba(0,0,0,0.75);
          }

.about-text{padding-top:15px;
            font-size: 15px;
               color: #6d6c6b;
            font-weight: 500;
              text-align: justify;
            }

.history{padding-top:45px;
         font-size: 20px;
         font-weight: 500;
        color: #333;}

.history:hover{color:#ff5000;}

#colophon {
        margin-top:0px;
    background: #f7f7f7;
    border-top: 4px solid #c6c6c6!important;
    color: #5c5c5c;
}
.site-footer-inner {
    padding: 30px 0;
}
.site-footer-inner {
    padding-bottom: 10px!important;
}
.clearfix {
    zoom: 1;
}
.fcc h5 {
    font-weight: 700;
}
.site-footer-inner i {
    font-size: 14px;
    margin-right: 5px;
}
#colophon a {
    color: #5c5c5c;
}
.fb_iframe_widget {
    display: inline-block;
    position: relative;
}
.fb_iframe_widget span {
    display: inline-block;
    position: relative;
    text-align: justify;
}
.bfl {
    text-align: right;
    color: #5c5c5c;
}
#footer-info p {
    margin: 0;
    color: #5c5c5c;
}
#footer-info {
    background: #c6c6c6;
    padding: 15px 0;
    font-size: 13px;
}

.mt-20 {
    margin-top: 20px !important;
    padding-top: 7px;
}
.widget-dark{padding-top: 10px;}

.fa-envelope-o{padding-top: 7px;
              padding-left: 0px;} 

.fa-globe{padding-top: 7px;}

.mt-10 {
    margin-top: 10px !important;}

.kalaa3{font-family: pristina;
      position: absolute;
      bottom: 135px;
      left: 80px;
      font-size: 30px;
      font-weight: 600;
      color:#ff5000 !important;
   }
   
.kalaa3:hover{font-family: pristina;
      text-decoration-line: none;
      font-size: 30px;
      font-weight: 600;
      color:#d34c0f !important;
   }

.about-text2{padding-top:15px;
            font-size: 15px;
              color: #6d6c6b;
            font-weight: 500;
              text-align: justify;}

.history2{padding-top: 60px;
         font-size: 20px;
         font-weight: 500;
        color: #333;}

.history2:hover{color:#ff5000;}

.about-img3{margin-top: 0px;
          margin-left:0px;
          }


.about-img4{position: relative;
            bottom:110px;
            left: 75px;
           -webkit-box-shadow: -1px 4px 46px -3px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 4px 46px -3px rgba(0,0,0,0.75);
box-shadow: -1px 4px 46px -3px rgba(0,0,0,0.75);
          }

@media(min-width:320px) and (max-width:1000px){

    .kalaa3{font-family: pristina;
      position: absolute;
      bottom: 150px;
      left: 100px;
      font-size: 30px;
      font-weight: 600;
      color:#ff5000 !important;
   }
  }

.r7{padding-top: 40px;}

.r8{padding-top: 70px;
            font-size: 15px;
            color: #6d6c6b;
            font-weight: 500;
            text-align: justify;
    }

#colophon{margin-top: 50px;}

.art-camps{padding-top: 40px;}

.camps3{font-size: 16px;
       padding-top: 20px;
      color:#222;
      }


#demo h1 /* delet it */
{
    text-align:center;
    color:#888;
    padding-bottom:5px;
}


#demo .row /* delet it */
{
    padding-top:20vh;
    padding-bottom:40px;
}

#demo img
{
    box-shadow:1px 1px 5px #000;
    max-height:15em; /* delet it */
}

#demo img:hover
{
    transition:all 0.6s; /* Change Speed */
    -ms-transform: scale(2, 2); /* IE 9 */
    -webkit-transform: scale(2, 2); /* Safari */
    transform: scale(2, 2); /* Change Size */
    overflow:visible;
    z-index:1 !important; /* you can change it, but better let this in default */
}


#demo .item-1:hover
{
  
    z-index:2; /* you can change it, but better let this in default */
}

#demo .item-2:hover
{
    z-index:2; /* you can change it, but better let this in default */
}

#demo .item-3:hover
{
    
    z-index:2; /* you can change it, but better let this in default */
}

#demo{padding-top: 10px;}

.demo2{font-size: 15px !important;
               color: #6d6c6b;
            font-weight: 500;
              text-align: justify;}

.item-1 {padding-top: 24px;}
.item-2 {padding-top: 24px;}
.item-3 {padding-top: 24px;}

.conversation{padding-top: 35px;
              font-size: 15px;
              color: #6d6c6b;
              font-weight: 500;
              text-align: justify;}

.conversation2{padding-top: 35px;
              }
.conversation3{padding-top: 60px;
              font-size: 15px;}

.conversation4{padding-top: 60px;
              font-size: 15px;
              color: #6d6c6b;
              font-weight: 500;
              text-align: justify;
              }

#bug{padding-top:60px;}

.other{text-align: center;
      position: relative;
      bottom: 55px;
      font-size: 25px;
      color: #fff;
     font-weight: 500;
     }

.gallery a {
  position: relative;
  display: block;
}

.overlay {
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 100px;
    height: 100%;
  width: 100%;
    padding-top:40px;
    top: 0;
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    text-align: center;
    transition: all 0.5s ease 0s;
    z-index: 20;
}

.overlay2{
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    cursor: pointer;
    display: block;
    font-size: 100px;
    height: 100%;
  width: 100%;
    padding-top:100px;
    top: 0;
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    text-align: center;
    transition: all 0.5s ease 0s;
    z-index: 20;
}

.gallery a:hover .overlay ,
.gallery a:hover .overlay2 {
    opacity: 0.8;
}

.img-space{
    margin:20px 0px;
}
.peragraph-art{font-size: 15px;
               color: #6d6c6b;
            font-weight: 500;
              text-align: justify;
            }

#demo {
  height:100%;
  position:relative;
  overflow:hidden;
}


.green{
  background-color:#6fb936;
}
        .thumb{
            margin-bottom: 20px;
        }
        
        .page-top{
            margin-top:40px;
        }
  
img.zoom {
    width: 250px;
    height: 200px;
    
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
}
        
 
.transition {
    -webkit-transform: scale(1.2); 
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
    .modal-header {
   
     border-bottom: none;
}
    .modal-title {
        color:#000;
    }
    .modal-footer{
      display:none;  
    }

.our-shadow{background-color: #84487f;
            min-height: 190px;
          }
.our-shadow-p{background-color: #84487f;
            min-height: 250px;
          }

#our3{padding-top: 30px;}

.text-behind{text-align: center;
            padding-top: 20px;
            font-size: 18px;
            color:#fff;
           font-weight: 400;}

.peragraph-our{padding-top: 15px;
               font-size: 13px;
               color: #fff;
               font-weight: 400;
              text-align: center;
            }
.our-shadow-p{padding-top: 10px;}

#art-p{padding-top: 30px;}

.art-p2{padding-top: 40px;
      font-size: 30px;
    font-weight: 500;
    text-align: center;}

.drawing-p{font-size: 15px;
               color: #6d6c6b;
            font-weight: 500;
              text-align:justify;}

.drawing{padding-top: 30px;
        font-size: 25px;
        font-weight: 500;
        color: #222;
        float: left;}

.from-p{text-align: center;
      padding-top: 10px;}

#ba-round{background-color: #444;
        min-height: 880px;
      margin-top: 30px;}

#ba-round-h{background-color: #444;
        min-height: 680px;
      margin-top: 30px;}

#ba-round-o{background-color: #444;
        min-height: 600px;
      margin-top: 30px;}

#ba-round-q{background-color: #444;
        min-height: 760px;
      margin-top: 30px;}

#ba-round-5{background-color: #444;
        min-height: 1050px;
      margin-top: 30px;}

#ba-round-p{background-color: #444;
        min-height: 1080px;
      margin-top: 30px;}

#ba-round-p2{background-color: #444;
        min-height: 990px;
      margin-top: 30px;}

.bark{padding-top: 50px;}

.one-year{color:#fff;
         font-size: 15px;
      font-weight: 400;
      padding-top: 70px;
      }
.shorter{padding-top: 50px;}

.one-year2{color:#fff;
         font-size: 15px;
      font-weight: 400;
      padding-top: 100px;
      }

.shorter2{padding-top: 80px;}

#call-color{background-color: #fff;
           padding: 43px 0;}

.upcoming-event-image{padding-top: 40px;}

.art-space{padding-top: 40px;}

/*back css*/
#demo {
  height:100%;
  position:relative;
  overflow:hidden;
}


.green{
  background-color:#6fb936;
}
        .thumb{
            margin-bottom: 20px;
        }
        
        .page-top{
            margin-top:150px;
        }
 
img.zoom {
    width: 250px;
    height: 200px;
    
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
}
        
 
.transition {
    -webkit-transform: scale(1.2); 
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
    .modal-header {
   
     border-bottom: none;
}
    .modal-title {
        color:#000;
    }
    .modal-footer{
      display:none;  
    }

/*art gallery css */
.card-product .img-wrap {
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    position: relative;
    height: 220px;
    text-align: center;
}
.card-product .img-wrap img {
    max-height: 100%;
    max-width: 100%;
    object-fit: cover;
}
.card-product .info-wrap {
    overflow: hidden;
    padding: 15px;
    border-top: 1px solid #eee;
    text-align: center;

}
.card-product .bottom-wrap {
     text-align: center;
}

.label-rating { margin-right:10px;
    color: #333;
    display: inline-block;
    vertical-align: middle;
}

.card-product .price-old {
    color: #999;
}
.btn-green{
  background:#ff5000;
  color:#fff;
  font-weight: 500;
  font-size:18px !important;
  padding:10px 40px !important;
  border-radius:0px !important;
  margin-bottom:80px !important;
  text-align: center !important;
}
.btn-green:hover{
  color:#fff !important;
  font-size:18px !important;
  padding:10px 40px !important;
  border-radius:0px !important;
  text-align: center;
}