/*responsiveness*/

@media(max-width:1024px) {
.logo {
  top: 0;
  margin-top: 10px;
}
header nav .logo img{
  width: 30%;
  margin-left: 20px;
  margin-top: 19px;
}
header #top_header{
  display: none;
}
header nav{
  padding: 0;
  font-size: 18px;
}
header nav ul {
  max-height: 0;
  background: #00001d;;
  display: none;
}
header nav ul li.current{
  background: #2d00cf;
}
.showing{
  max-height: 500em;
  display: block;
  width: 100%;
}
header nav ul ul{
  display: none;
}
header nav ul li {
  display: block;
  text-align: center;
  border-bottom: 1px dotted #565656;
}

.menu-icon{
  width: 50%;
  display: inline-block;
  margin-top: 0px;
}

.menu-icon p a{
  margin-top: 0px;
  float: left;
  margin-left: 200px;
}
.no-wrap {
  background: #00012c;
  margin-top: -20px;
  height: 95px;
}
.menu-icon p a{
  font-size: 20px;
  color: #fff;
}
}

@media(max-width:500px) {
  header nav .logo img{
    width: 43%;
    margin-left: 20px;
    margin-top: 22px;
  }

.logo {
  width: 100%;
}

.menu-icon{
  margin-top: -15px;
}
.no-wrap {
  background: #00012c;
  margin-top: -20px;
  height: 80px;
}
.menu-icon p a{
  margin-top: 7px;
  margin-left: 20px;
  font-size: 30px;
}

header nav .logo span img{
  display: block;
  padding: 5px;
  margin-top: 12px;
}
}

@media(max-width:380px) {
  header nav .logo span img {
    width: 20%;
}
}

/*FlexSlide*/

@media(max-width:1024px) {
  .slider1 .flex-caption{
    float:left;
    margin-top: 20%;
    padding: 20px;
  }

.slider1  .flex-caption h3{
  float: none;
  width: 100%;
  font-size: 20px;
  margin-top: -5%;
}

.slider1  .flex-caption ul{
  float: none;
  width: 100%;
  font-size: 20px;
  margin-top: -5%;
  text-align: left;
  
  }
.slider1  .flex-caption p{
float: none;
width: 100%;
font-size: 16px;
}


  .slider1  .flex-caption button{
    margin-left: 10px;
    float: left;
  }
  .slider1  .flex-caption button a{
  color: white;
  }

  .flexslider .slides img {
    float: right;
    width: 45%;
    height: auto;
  }
  .flexslider .slides {
    height: 500px;
  }
}

@media(max-width:800px) {
  .slider1 .flex-caption{
    float:left;
    margin-top:20%;
    text-align: left;
    padding: 20px;
  }


  .slider1  .flex-caption button{
    margin: 0;
    float: left;
  }
  .slider1  .flex-caption button a{
  color: white;
  }
  .flexslider .slides {
    height: 400px;
    margin-top: 10%;
}
.slider1  .flex-caption p{
  font-size: 14px;
  }
  

  .flexslider .slides img {
    float: right;
    width: 45%;
    height: 400px;
}
}

@media(max-width:600px) {
  .slider1 .flex-caption{
    margin-top: 0%;
    width: 100%;
    height: auto;
  }
  .flexslider {
    margin: 0 0 60px;
    background-size: cover;
    background-position: left;
  }

  .flexslider .slides img {
    width: 100%;
    padding: 20px;
    margin-left: 0px;
    margin-top: 10%;
    float: none;
    display: block;
  }
  .flexslider .slides {
    height: 750px;
  }

  .slider1  .flex-caption h3{
    margin-top: -20px;
    padding: 10px;
    font-size: 20px;
  }

  .slider1  .flex-caption button {
  margin-left: 40px;
}
}
@media(max-width:380px) {
  .slider1 .flex-caption{
    margin-top: 0%;
    padding: 10px;
  }
  .slider1  .flex-caption h3{
    font-size: 20px;
    margin-top: 0px;
  }
  .flexslider .slides img {
    width: 100%;
    height: 350px;
    padding: 10px;
    margin-left: 0px;
    margin-top: 50px;
    float: none;
    display: block;
  }
  .slider1 .flex-caption ul {
    margin-top: 15%;
}
  .slider1  .flex-caption button a {
  font-size: 16px;
  }

  .slider1  .flex-caption button{
      margin-left: 20px;
  }

  .flexslider .slides {
    height: 700px;
  }
  #demo {
    margin-top: -70px;
    float: left;
    width: 100%;
}
}

/*Section */
    @media(max-width: 1080px){
      #about{
        padding-top: 70px;
      }
      #about p{
        float: none;
        width: 100%;
        margin-top: 5px;
      }
      #about img{
        margin-bottom: 10px;
        margin-top: -20px;
        width: 50%;

      }
    }
    @media(max-width: 1024px){
      #about{
        padding: 80px;
      }
      #about .full-content{
        float: right;
        margin-top: 5px;
      }
      #about img{
        margin-top: 70px;
        width: 40%;
        padding: 10px;
      }
      #about .full-content h1{
        font-size: 25px;
      }
      #about a {
        display: block;
        margin-top: 12px;
        border-radius: 20px;
        margin-left: 0px;
    }

    }

    @media(max-width: 800px){
      #about,#our-story{
        padding: 0px 60px;
      }
      #about .full-content h1{
        font-size: 20px;
      }
    
      #about .full-content h2,.story h4{
        font-size: 20px;
      }

      #about .full-content{
        padding: 20px 5px;
      }
    }

    @media(max-width: 670px){
      #about .full-content,.story{
        float: right;
        margin-top: 5px;
        width: 100%;
        padding: 20px;
      }

      #about .full-content h1 {
        font-size: 25px;
    }

      #about img{
        margin-bottom: 10px;
        margin-top: 5px;
        width: 50%;
        float: none;
        margin-left: 90px;
      }
      #our-story img{
        margin-bottom: 10px;
        margin-top: 5px;
        width: 70%;
        float: none;
        margin-left: 0px;
      }
    }
    @media(max-width: 500px){
      #about,#our-story{
        padding: 0px;
      }
      .story h2{
        font-size: 40px;
      }
      #about img{
        width: 100%;
        margin-left: 0px;
      }
        #about p,#about h2,#about h3{
          width: 100%;
          float: none;
        }
        #about h2{
          font-size: 25px;
        }
        #about h3{
          font-size: 18px;
        }
        #about h3 span{
          font-size: 25px;
        }
    }
    @media(max-width: 380px){
      #about{
       padding: 0px;
      }
      #about .full-content, .story {
        padding: 10px;
      }
      
      #about .full-content h1 {
        font-size: 24px;
    }

      #about content h2{
        font-size: 20px;
      }

      #about .content2 h3{
        font-size: 16px;
      }

      #about img{
        width: 100%;
        margin-left: 0px;
        padding: 0px;
      }
      
    }
/*breadcrumb*/
    @media(max-width: 1024px){
      #mu-page-breadcrumb .mu-page-breadcrumb-area{
        padding: 20px;
      }

      .mu-page-breadcrumb-area li {
       margin-top: 80px;
      }
      }

      @media(max-width: 500px){
        #mu-page-breadcrumb .mu-page-breadcrumb-area {
          padding: 20px;
          margin-top: 70px;         
        }
  
        .mu-page-breadcrumb-area li {
         margin-top: 0px;
         display: inline-block;
        }
        }

        @media(max-width: 425px){
          #mu-page-breadcrumb {
            margin-top: 0%;
            }
            }
          
  
/*About*/
@media(max-width: 1024px){
  .home-service{
    width:48%;
    padding: 0px;
  }
  .home-service img {
  width: 90%;
	height: 250px;
}
}
  @media(max-width: 800px){
    .home-service{
      width:47%;
      padding: 0px;
    }
    #service {
      width: 100%;
      margin: 0;
      padding: 20px;
      float: left;
      background: #eee;
  }
  }

    @media(max-width:500px){
        #service{
          padding: 0px;
        }

      .home-service{
      	width:100%;
        padding: 10px;
      }
        .home_page1{
          padding: 5px;
        }
      .home_page1 h2{
      font-size: 30px;
      }
      .home_page1 p,.home_page1 h4{
        padding: 10px;
      }
      .services .grid-item1 {
        margin-left: 0px;
      }
    }

    @media(max-width:  375px){
      .home-service img {
        width: 100%;
        margin: 0;
        height: 200px;
      }
    }

    /*Solar*/
@media(max-width: 1024px){
#solar-services .grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}
  /* ==============================
	 RESPONSIVE DESIGN
	 ============================== */
   @media (max-width: 768px) {
    #solar-services {
      padding: 60px 15px;
    }
    
    .grid-item img {
      height: 180px;
    }
    
    .solar-benefits {
      padding: 60px 15px;
    }
    
    .solar-cta h2 {
      font-size: 1.6rem;
    }
    }
  
    
@media(max-width: 500px){
  .hero-section {
    width: 100%;
    float: left;
}
.hero-section img {
  height: auto;
}
#solar-services .grid{
  display: block;
}
#solar-services .grid-item{
padding: 10px;
}
.solar-about-section {
  padding: 10px 20px;
  width: 100%;
}
#solar-services {
  padding: 10px 15px;
}
.grid-item img {
  width: 100%;
  height: 250px;
  margin-bottom: 0px;
}
  }
/*Landing page*/
@media(max-width: 1024px){
  #landing .container_land {
    padding: 0px 76px;
    margin-top: -116px;
}
#landing .land_page {
  width: 47%;
}
}
@media(max-width: 768px){
#landing .page-container h1 {
  font-size: 27px;
}
#landing .page-container p {
  line-height: 1;
}
}
@media (max-width: 500px) {
  #landing .container_land {
      padding: 0px;
      margin-top: 0px;
  }
  #landing .page-container h1 {
    font-size: 20px;
    margin: 20px 0px 20px 0px;
}
#landing .land_page {
  width: 100%;
  margin: 0px;
}
#landing .land_page a {
  margin-top: 20px;
}
}
/*Portfolio*/
    @media(max-width: 768px){
         
		#port1{
      padding: 30px;
      }

    .port3{
      float:none;
      width: 49%;
      }
    }

    @media(max-width: 500px){
      #port1{
        padding: 10px;
        }
      .port3 img{
        height: 150px;
        }
      }
  
      @media(max-width: 320px){
        .port3 img{
          height: 100px;
          }
        }

/*counter*/
  @media(max-width:1024px){
  #counter .Label{
  width: 20%;
  }
  }
  @media(max-width:768px){
  #counter .Label{
  width: 30%;
  margin-left: 80px;
  }
  }

  @media(max-width:1024px){
    #counter .Label{
    width:28%;
    margin-left: 30px;
    }
    #counter .Label h3 span{
    font-size: 45px;
      }
    #counter .Label p{
    margin-top: 1px;
    font-size: 20px;
      }
    }

  @media(max-width:780px){
    #counter {
      padding: 0px;
    }
  #counter .Label{
  width: 40%;
  margin-left: 30px;
  }
  #counter .Label h3 span{
  font-size: 45px;
    }
  #counter .Label p{
  margin-top: 1px;
    }
  }

  @media(max-width:500px){
    #counter {
      padding: 0px;
    }
  #counter .Label{
  width: 45%;
  margin-left: 0px;
  }
  #counter .Label h3 span{
  font-size: 45px;
    }
  #counter .Label p{
  margin-top: 1px;
  font-size: 15px;
    }
  }

  @media(max-width:375px){
  #counter .Label{
  width: 100%;
  margin-left: 0px;
  }
  #counter .Label h3 span{
  font-size: 50px;
    }
  #counter .Label p{
  margin-top: 1px;
  font-size: 20px;
  font-weight: 400;
    }
  }

  
  /*Blog*/
  @media(max-width:1128px){
    .new .grid-item{
    width: 25%;
    }
    }
    @media(max-width:1024px){
    .new .grid-item{
    width: 30%;
    margin: 0;
    margin-left: 20px;
    }
    .new{
      margin-top: 100px;
      padding: 10px;
    }
    .new .grid-item img {
        height:170px;
        width: 100%;
    }
    }
    @media(max-width:970px){
      .new .grid-item{
      width: 30%;
      float: left;
      }
      .new .grid-item img {
          height:170px;
          width: 100%;
      }
      }
    @media(max-width:820px){
      .new .grid-item{
      width: 42%;
      margin-left: 40px;
      }
      .new .grid-item img {
          height:170px;
          width: 100%;
      }
      .new .grid-item h3{
        font-size: 15px;
      }
      .new .grid-item p{
        font-size: 15px;
      }
    }
    @media(max-width:560px){
      .new .grid-item{
      width: 100%;
      margin-left: 0px;
      }
      .new .grid-item img {
          height:200px;
          width: 100%;
      }
      .news{
        padding: 20px;
      }
    }
    @media(max-width:425px){
    .new .grid-item {
    width: 100%;
    padding: 0;
    margin-left: -4px;
        margin-top: 25px;
}
      .new .grid-item img {
          height:200px;
          width: 100%;
      }
      .new{
        padding: 0px;
        width: 105%;
        margin-left: -5px;
      }
    }
    /*Full Blog*/
      @media(max-width: 820px){
        #full-blog{
          margin: 0;
          padding: 60px;
        }
        #full-blog .blog-post{
          padding: 30px;
        }
        #full-blog .blog-post img{
          width: 100%;
        }
      }
  
      @media(max-width: 500px){
        #full-blog {
          margin: 0;
          padding: 10px;
          width: 100%;
      }
      #full-blog .blog-content {
        width: 100%;
        float: left;
    }
  
        #full-blog .blog-post h3{
          font-size: 18px;
        }
        #full-blog .blog-post ul li{
          font-size: 14px;
        }
        #full-blog .blog-content .blog-title h1 {
          font-size: 30px;
          font-weight: 600;
      }
      }
      @media(max-width: 500px){
      #full-blog .blog-content ul {
        list-style: none;
        margin-left: 1px;
        padding: 20px;
    }
  }
  
      /*Request*/
      @media(max-width:1024px){
        #request .request1 .request-content a {
          width: 100%;
          display: block;
          margin-bottom: 20px;
          float: none;
          margin-left: 0px;
        }
    }

@media(max-width:900px){
  #request .request1 .request-img {
    width: 100%;
    float: left;
    border-radius: 30px;
}
  #request .request1 {
    padding: 30px;
}
#request .request1 .request-content {
  width: 100%;
  float: none;
}
}
     
/*Testimonial*/
@media(max-width:900px){
  #request .request1 .request-content {
    width: 100%;
    float: none;
  }
}
@media(max-width:500px){
  #request .request1 .request-content h2 {
    font-size: 27px;
    color: #000269;
}
#request .request1 .request-content a {
  margin-left: 0px;
  margin-bottom: 10px;
  width: 100%;
  text-align: center;
  float: left;
}
#testimonail-area .testimonials h3 {
  font-size: 30px;
}
}

  /* Responsive */
  @media (max-width: 480px) {
    #chat-box {
      width: 90%;
      right: 5%;
    }
    }
    
    /*Footer*/
@media(max-width: 1024px){
  #customers-testimonials .item {
  padding: 0px 71px;
}
}
@media(max-width: 500px){
  #customers-testimonials .item {
  padding: 0px 10px;
}
.shadow-effect{
  padding: 10px;
}

#testimonail-area {
  margin-bottom: 14px;
  padding: 10px;
}
.testimonials p {
  padding: 0px;
}
}


@media(max-width: 1024px){
.news-let{
margin: 0px;
width: 100%;
float: left;
}
.news-let input[type="email"],.news-let form button {
width: 80%;
margin-top: 10px;
}
.address{
  width: 100%;
  padding: 0px;
  margin-right: 0px;
}
.address .address-grid {
  width: 47%;
  margin-left: 21px;
  float: left;
  display: inline-grid;
  padding: 10px;
}
}

@media(max-width: 820px){
   form{
    width: 100%;
  }
   .address{
    width: 100%;
    margin-right: 0px;
  }
  .news-let input[type="email"],.news-let form button {
    width: 100%;
    margin-top: 10px;
    }
    .address .address-grid {
      width: 46%;
      padding: 15px;
  }
}

@media(max-width: 500px){
  #contact {
    padding: 0px;
  }
     form , .address{
  width: 100%;
  float: none;
  padding: 10px;
  }

   .address i{
    font-size: 20px;
  }
  .address .address-grid {
    width: 100%;
    margin-left: 0px;
    padding: 15px;
}
.address i {
  font-size: 28px;
}
   form h4,  .address h4 {
 font-size: 22px;
}
.news-let input[type="email"],.news-let form button {
width: 100%;
margin-top: 10px;
}
}

@media(max-width: 380px){
   form button{
  width: 100%;
  }
   .address i{
    font-size: 18px;
  }
   .address i span{
    margin-left: 0px;
  }
  .address .address-grid a {
    font-size: 17px;
    color: #2b2b2b;
}
}


/*Footer*/
@media(max-width: 790px){
  ul.footer-list-top{
    margin:0px;
    padding: 20px;
  }
  .footer-list-top{
  width:45%;
  text-align: left;
  margin-left: 0%;
  font-size: 25px;
  }
.footer-list-top:nth-child(1){
  width: 100%;
  margin-left: 0px;
}

.footer-list-header {
font-size: 10em;
width: 100%;
}

.bottom p, .bottom a{
  font-size: 12px;
}
}


@media(max-width: 450px){
  ul.footer-list-top{
    margin:0px;
    padding: 20px;
  }
  .footer-list-top{
  width:100%;
  text-align: left;
  margin-left: 0%;
  font-size: 25px;
  }
}