/*

Theme Name: Free Skateshop

Theme URI: 

Author: 

Author URI: 

Description: 2021 responsive theme with Bootstrap4. HTML5, CSS3 and Javascript.

Version: 1.0

*/



@charset "utf-8";

/* CSS Document */



body{

    margin: 0; 

    font-size: 16px;

    color: #0c1529;

    line-height: 1.7em;

    font-weight: 400;

    -webkit-font-smoothing: antialiased;

    background: rgb(255 255 255);

    font-family:'Conv_Proxima Nova Font',Sans-Serif;

}



.sectiongap{

    padding: 70px 0 70px 0; 

    position: relative;

    z-index: 0;

}



li{list-style: none;}

a{color: unset;}

a:hover{text-decoration: none; color: unset;}



h1, h2, h3{

    font-family:'Conv_Proxima Nova Font',Sans-Serif;

}



p{

    color: #212121;

    font-weight: 500;

    font-size: 15px;

}



ul{

    margin: 0;

    padding: 0;

}







input{

  height: 50px;

}

.btn-textual{

  background: #ff5924;

  color:#fff;

}

.btn-textual:hover{

  background: #333;

  color:#fff;

}



.menubutton a{

      background: #cc333f;

    padding: 9px 28px;

    display: block;

    border-radius: 25px;

    color: #fff;

    margin-left: 70px;

}

.menubutton a:hover{

  background: #ff9800;

  box-shadow: 0 0 20px -10px rgb(120 120 120 / 80%);

}

.skate-figer{

    position: relative;

      left: 38px;

      bottom: -30px;

  }









/*Menu Bar style start*/

/*.menu-light{

    background: #fff;

   border-bottom: 1px solid hsl(99deg 57% 43% / 20%);

    box-shadow: 0px 0px 6px 0px hsl(99deg 57% 43% / 40%);

}

*/



/*--------------Menu Section Start--------------*/

.menumain{

    position: fixed;

    width: 100%;

    z-index: 9999;

     transition: all .5s ease;

}



.menumain nav.navbar{

    padding: 6px 0;

    transition: all .5s ease;

}



.menumain .navbar-nav{ flex-direction: inherit; }



.t-logo img {

  width: 136px;

}



.sochalicon a{

    color: #415aa7;

    padding: 0 6px;

    font-size: 18px;

}

.sochalicon a:hover{

  color: #ff5924;

}



/*sticky header*/

.sticky {

    position: fixed;

    top: 0;

    width: 100%;

    transition: all .5s ease;

    z-index:999;

    background-color: #131d31; 

    box-shadow: 0 0 20px -10px rgb(0 0 0 / 80%);

}



.sticky .t-logo img{

    width: 80px;

}

.sticky nav.navbar {

    padding: 6px 0;

    transition: all .5s ease;

}





/*.sticky + .banner{

    margin-top: 99px;

}*/

/*Sticky Header End*/



/*--------------Menu Section End--------------*/



/*--------------Animation Satrt--------------*/

.spiner{

    position: absolute;

    bottom: 0;

}

.dot-style{

    left: 6%;

    bottom: 5%;

    z-index: 0;

}

.dot-style img{

    width: 98%;

}

.cloud {

    left: 15%;

    bottom: 25%;

    z-index: 0;

}

.pattern{

    left: 0;

    top: 0;

    z-index: 0;

}

.pattern-2{

    right: 0;

    top: 0;

    z-index: 0;

}

.ring{

    left: 20px;

    top: 180px;

    z-index: 0;

}

.dot-gray {

    left: -42px;

    bottom: -55px;

    z-index: 0;

    position: absolute;

}

.partanw{

    left: 0;

    bottom: 0;

    z-index: 0;

}



/*.dote-design{

    width: auto !important;

    z-index: 0 !important;

    box-shadow: unset !important;

}*/



.scale {

  animation: scale 8s alternate infinite;

  webkit-animation: scale 2s alternate infinite;

}

@-webkit-keyframes scale {

  0% {

    transform: scale(0.8);

    -webkit-transform: scale(0.8);

  }

  100% {

    transform: scale(1);

    -webkit-transform: scale(1);

  }

}



.dance {

  -webkit-animation: dance 4s alternate infinite;

}

@keyframes dance {

  0% {

    -webkit-transform: translate3d(0, 0, 0);

  }

  50% {

    -webkit-transform: translate3d(15px, -15px, 0);

  }

  100% {

    -webkit-transform: translate3d(0, -15px, 15px);

  }

}



.up-down {

  animation: up-down 4s alternate infinite;

  -webkit-animation: up-down 4s alternate infinite;

}

@keyframes up-down {

  0% {

    transform: translateY(30px);

    -webkit-transform: translateY(0);

  }

  50% {

    transform: translateY(-5px);

    -webkit-transform: translateY(-5px);

  }

  100% {

    transform: translateY(0);

    -webkit-transform: translateY(0);

  }

}



@-webkit-keyframes up-down {

  0% {

    transform: translateY(30px);

    -webkit-transform: translateY(0);

  }

  50% {

    transform: translateY(-5px);

    -webkit-transform: translateY(-5px);

  }

  100% {

    transform: translateY(0);

    -webkit-transform: translateY(0);

  }

}





.up-down-new {

  animation: up-down-new 4s alternate infinite;

  -webkit-animation: up-down-new 4s alternate infinite;

}

@keyframes up-down-new {

  0% {

    transform: translateY(30px);

    -webkit-transform: translateY(0);

  }

  50% {

    transform: translateY(-10px);

    -webkit-transform: translateY(-10px);

  }

  100% {

    transform: translateY(0);

    -webkit-transform: translateY(0);

  }

}



@-webkit-keyframes up-down-new {

  0% {

    transform: translateY(30px);

    -webkit-transform: translateY(0);

  }

  50% {

    transform: translateY(-50px);

    -webkit-transform: translateY(-50px);

  }

  100% {

    transform: translateY(0);

    -webkit-transform: translateY(0);

  }

}



/*--------------Animation End--------------*/

/*--------------left right section--------------*/

.sectiongap.sec45{

    background: rgb(255,255,255);

    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 45%, rgba(16,25,41,1) 45%, rgba(16,25,41,1) 100%);

    color: #fff !important;

  }

  .sectiongap.sec53 p, .full-darkbg p{

    color: #fff;

  }

  .sectiongap.sec53 h5, .full-darkbg h5{

    color: #ff9800 !important;

  }



  .sectiongap.sec53{

    background: rgb(16 25 41);

    color: #fff !important;

  }



  .sectiongap.sec53 .redmore-btn, .full-darkbg .redmore-btn{

    background: #cc333f;

  }



  .sectiongap.sec53 .redmore-btn:hover, .full-darkbg .redmore-btn:hover{

    background: #ff5722;

  }



  .footer-logo{

    width: 100px;

    margin-bottom: 10px;

  }

  .socialicon ul li{

    display: inline-block;

  }

  .socialicon ul li a {

      color: #cc333f;

      border: solid 2px #262e3c;

      width: 40px;

      height: 40px;

      display: inline-block;

      line-height: 40px;

      text-align: center;

      border-radius: 50px;

      font-size: 14px;

      margin: 0 2px;

  }

  .socialicon ul li a:hover{

    background: #cc333f;

    color: #fff; 

  }

  /*--------------leftright section end--------------*/



/*--------------Banner Section Start--------------*/

.banner{

    background: #111a2b;

    position: relative;

}

.banner-text{

    color: #f8f8f8;

    position: absolute;

    z-index: 99;

    top: 0;

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    padding-top: 30px;

}



.banner-text h2{

  font-family:'Conv_Boiling-BlackDemo',Sans-Serif;

  font-size: 170px;

  line-height: 160px;

}

.banner-text p {

  font-size: 35px;

  color: #fff;

  line-height: 40px;

}



.redmore-btn{

    background: #ff9800;

    padding: 12px 28px;

    border-radius: 25px;

    color: #fff;

    font-size: 16px;

    display: inline-block;

}

.redmore-btn:hover{

  color: #fff;

  background: #333;

}

.banner-img {

    margin-top: 30px;

    margin-bottom: -115px;

    position: relative;

}

.banner-img img{

    width: 90%;

    z-index: 2;

    position: relative;

    box-shadow: 0 0 20px -10px rgb(0 0 0 / 80%);

}



/*--------------Banner Section End--------------*/







.section-title h2{

    font-size: 35px;

    position: relative;

    margin-bottom: 15px;

}

.section-title h5{

    font-size: 18px;

    color: #cc333f;

    margin-bottom: 20px;

}



/*---------About Main Satrt---------*/

.about-main{

    position: relative;

    padding: 315px 0 200px 0;

}

.aboutimg{

    position: relative;

}

.about-mainimg{

    z-index: 1;

    position: relative;

}

.about-text p{

    font-size: 14px;

}

/*---------About Main End---------*/

/* ---------service section Satrt ---------*/

.service-box {

    padding: 15px 15px 20px 15px;

    /*box-shadow: 5px 5px 15px 0px rgb(0 0 0 / 10%);*/

    border-style: solid;

    border-width: 0px;

    border-color: #e9e9e994;

    border-radius: 0;

    margin: 10px;

    background-color: #f8f8f8;

    text-align: center;

}

.service-box h3 {

    font-size: 16px;

    font-weight: 500;

    color: #0c232e;

}

.service-box h5 {

    font-size: 16px;

    font-weight: 600;

    color: #ff9800;

}

.service-box p{

    line-height: 25px;

    font-size: 14px;

}

.amazonicon{

    margin-bottom: 5px;

}

.servicemain .no-gutters{

      margin-right: -15px;

    margin-left: -15px;

}



.left-afterbg{

  position: relative;

}

.sectiongap.sec45 .img-outer{ position: relative; }

.sectiongap.sec45 .img-outer:after{

    position: absolute;

    content: '';

    width: 100%;

    height: 84%;

    background: #f2df0b;

    left: 27%;

    top: 50%;

    transform: translateY(-50%);

}



.sectiongap.sec53 .img-outer{ position: relative; }

.sectiongap.sec53 .img-outer:after{

    position: absolute;

    content: '';

    width: 100%;

    height: 84%;

    background: #f2df0b;

    left: 27%;

    top: 50%;

    transform: translateY(-50%);

}

.sectiongap.sec53 .img-outer:after{

  background: #cc333f;

}



/* ---------service section End ---------*/





/*---------Backto Top Start---------*/

    #backto-top {

      display: inline-block;

       background-color: #cc333f;

      width: 50px;

      height: 50px;

      position: fixed;

      bottom: 30px;

      right: 30px;

      transition: background-color .3s, 

      opacity .5s, visibility .5s;

      opacity: 0;

      visibility: hidden;

      z-index: 1000;

      text-align: center;

      box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 24%);

      border-radius: 25px;

    }

    #backto-top i{

      color: #fff;

      line-height: 50px;

    }



    #backto-top:hover {

      cursor: pointer;

      background-color: #333;

    background-image: linear-gradient(  90deg ,#333, #333);

    }

    #backto-top:active {

      background-color: #555;

    }

    #backto-top.show {

      opacity: 1;

      visibility: visible;

    }



/*---------Backto Top End---------*/







/*----------Footer Satrt-----------*/

footer{

  background: #101929;

}

.footer-main{

    padding: 70px 0;

    background: #101929;

    color: #fff;

  }

  .footer-main h3{

    font-size: 18px;

    font-weight: 800;

    margin-bottom: 20px;

  }

  .footer-main p{

    color: #939298;

    font-size: 14px;

    line-height: 23px;



      font-weight: 400;

  }

  footer .info {

      margin: 0;

      padding: 0;

      list-style: none;

  }

  footer .info li {

      position: relative;

      margin-bottom: 5px;

      line-height: 24px;

      padding-left: 28px;

      font-size: 14px;



      font-weight: 400;

  }

  footer .info li i {

      position: absolute;

      top: 6px;

      left: 0;

      

  }

  footer .info li:last-child {

    margin-bottom: 0;

  }

  .usefull-link a {

      color: #939298;

      display: block;

      margin-bottom: 0px;

      font-size: 14px;

      line-height: 24px;

  }

  .footer-btm{

    background: #101929;

    padding: 20px 0;

    border-top: solid 1.5px #212938;

}

.footer-copyright {

    color: #939298;

    font-size: 14px;

}

/*----------Footer End-----------*/





.sectiongap.sec45 .about-text{ order: 2; padding-left: 40px; }

.sectiongap.sec45 .aboutimg{ padding-right: 120px; }

.sectiongap.sec53 .aboutimg{ padding-right: 120px; }





.subscribe-wrap{ position: relative; }

.subscribe-wrap input[type="email"]{ height: 50px; border-radius: 5px; padding-right: 50px;}

.subscribe-wrap input[type="submit"]{ font-size: 0px; width: 40px; height: 34px; position: absolute; top: 8px; right: 5px; background-image: url(../images/subs-btn.png); background-repeat: no-repeat; background-size: 100% 100%; padding: 0px;

 }



iframe{ width: 100%; }





 /* ------------- inner banner ---------------------- */



ul.breadcrumbs{}

ul.breadcrumbs li{ display: inline-block; padding: 0px 5px; }



.innerBanner{ position: relative; }

.innerBanner img{ width: 100%; max-width: 100%; max-height: 400px; height: 400px; object-fit: cover; }

.title_breadcrumb-inner{ position: absolute; width: 100%; bottom: -30px; left: 0; }

.title_breadcrumb-inner span{     display: inline-block;  background-color: #131d31; padding: 15px; width: 100%; text-align: center; color: #000; 

  -webkit-box-shadow: 3px 3px 10px 0px rgba(102,102,102,1);

-moz-box-shadow: 3px 3px 10px 0px rgba(102,102,102,1);

box-shadow: 3px 3px 10px 0px rgba(102,102,102,1);

}

.title_breadcrumb-inner span h1{ color: #fff; font-size: 40px; line-height: 30px; padding-bottom: 10px;  font-weight: 700;  margin-bottom: 0px; }

.breadcrumb_bottom{  }

.breadcrumb_bottom ul{ text-align: center; margin-bottom: 0px;}

.breadcrumb_bottom ul li{ font-weight: 500; color: #fff; }

.breadcrumb_bottom ul li strong{ font-weight: 400 !important; }

.breadcrumb_bottom ul li a{ color: #fff;  font-weight: 600;}

.inner-cont{ padding: 100px 0px 50px 0px; }



.inner-cont h2{ font-size: 35px;  position: relative;  margin-bottom: 15px; }

.inner-cont h3{ font-size: 22px;  position: relative;  margin-bottom: 15px; }

.inner-cont ul{ margin-left:15px; margin-bottom: 20px;}

.inner-cont ul li{ list-style: disc;}



/*------------------------*/







.blog-box{ margin-bottom: 30px; 

	-webkit-box-shadow: 0px 0px 10px 0px rgba(221,221,221,1);

-moz-box-shadow: 0px 0px 10px 0px rgba(221,221,221,1);

box-shadow: 0px 0px 10px 0px rgba(221,221,221,1);

}

.blog-box .blog-thumb{ position: relative; }

.blog-box .blog-thumb img{ height: 220px; width: 100%; object-fit: cover; }

.blog-date{ position: absolute; background-color: #cc333f; padding: 10px; top: 0; left: 0; color: #fff; border-radius: 0px 0px 10px 0px; }

.blog-date span{ display: block; text-align: center; line-height: 22px; font-weight: 600; }

.blog-info{ background-color: #f5f5f5; padding: 15px; }

.blog-box .blog-title{ margin-bottom: 10px; }

.blog-box .blog-title a{ display: inline-block; font-size: 18px; font-weight: 600; line-height: 22px; 

	display: block;

display: -webkit-box;

-webkit-line-clamp: 2;  

-webkit-box-orient: vertical;

overflow: hidden;

text-overflow: ellipsis;

}

.blog-des{ font-size: 14px; line-height:20px; margin-bottom: 15px;  }



.top-btn{}

.top-btn a{ background: #ff9800; padding: 10px 25px; line-height: 20px; border-radius: 25px; color: #fff; font-size: 16px; display: inline-block; }

.top-btn a:hover{ background: #cc333f; }











/*------------ Single Blog --------------*/







.single-blog-wrap .content-img {

    padding-bottom: 20px;

}

.single-blog-wrap .content-img img {

    width: 100%;

    max-width: 100%;

    max-height: 450px;

    object-fit: cover;

}

.single-blog-wrap{}

.single-blog-wrap h3{  font-size: 22px; line-height: 25px; color: #000; padding-bottom: 0px; margin-bottom: 0px; text-transform: uppercase;  font-weight: 700; }

.single-blog-wrap .blog-date{ padding-bottom: 15px; }

.comments-area {

     padding: 20px;

     background: #f5f5f5;

     margin-top: 20px;

     border: #ddd solid 1px;

 }

 .single-post .comments-area h2 {

     font-size: 18px;

     font-weight: bold;

     color: #000;

     margin-bottom: 15px;

 }

 .comments-area .comment-respond .comment-form input[type="text"],

 .comments-area .comment-respond .comment-form input[type="email"],

 .comments-area .comment-respond .comment-form input[type="url"],

 .comments-area .comment-respond .comment-form textarea {

     display: block;

     border: 2px solid #d1d1d1;

     height: 50px;

     line-height: 50px;

     width: 100%;

     padding: 0 10px;

 }

 .comments-area .comment-respond .comment-form textarea {

     height: 80px;

 }

 body.single-post .comments-area .comment-form-comment textarea {

     margin-bottom: 10px !important; resize: none;

 }

 body.single-post .comment-form-cookies-consent input[type="checkbox"] {

     margin-right: 10px;

 }

 body.single-post .comments-area input[id="submit"] {

     background: #ff9800;

     border:none;

     padding: 14px 30px;

     position: relative;

     line-height: 100%;

     border-radius: 50px;

     color: #fff;

     font-size: 15px;

     font-weight: 500;

     display: inline-block;

 }

 body.single-post .comments-area input[id="submit"]:hover,

 body.single-post .comments-area input[id="submit"]:focus {

     background: #cc333f;

     color: #fff;

     outline: none;

     border:none;

 }

 .comment-form-comment label{ position: relative; }

.comment-form-comment label:before{ content: '*'; position: absolute; top: 0; right: -10px; }

ol.comment-list{}

ol.comment-list li{}

ol.comment-list li ol.children{ margin-left: 30px; }

ol.comment-list li .reply{ padding: 10px 0px; }

ol.comment-list li .reply a{ display: inline-block; background-color: #0070c0; padding: 5px 10px; border-radius: 3px; color: #fff; line-height: 15px; }

ol.comment-list li .comment-author{ padding-bottom: 10px; }

a#cancel-comment-reply-link{  display: inline-block; margin: 0px 5px; background-color: #0070c0; padding: 5px 10px; border-radius: 3px; color: #fff; line-height: 15px; font-size:13px; }

.navigation.post-navigation{ display: none; }

.blog-sidebar{ background-color: #131d31; }

.blog-sidebar section.widget{ margin-bottom: 30px; }

.blog-sidebar h2{ color: #fff; font-size: 22px; line-height: 30px; font-weight: 700; padding: 10px 15px; margin: 0px; }

.blog-sidebar ul{ list-style-type: none; height: auto !important;  } 

.blog-sidebar ul li{ color: #d9d9d9;  font-size: 13px;  border-top: #5a5958 dotted 1px; font-weight: 500; padding-left: 0px !important; margin-bottom: 0px !important;}

.blog-sidebar ul li a{ display: inline-block; color: #fff;  font-size: 13px; line-height: 20px; padding: 10px; } 

.blog-sidebar ul li a:hover{ color: #ff9800; }

.blog-sidebar ul li:before{ content: none !important; }

.single-blog-wrap .blog-date{ position: relative; background-color: transparent; font-weight: 500; font-size: 13px; color: #666; padding: 0px 0px 30px 0px; }

.single-blog-wrap .blog-date span{ display: inline-block; }



.comment-form-cookies-consent input{ height: auto; }



/* --------------------------------- */





.frm-wrap{ background-color: #ff9800; padding: 30px 20px; border-radius: 10px; }

.frm-wrap input[type="text"]{ background-color: #f1cf9c; border:none; width: 100%; height: 45px; border-radius: 50px; margin-bottom: 0px;}

.frm-wrap input[type="email"]{ background-color: #f1cf9c; border:none; width: 100%; height: 45px; border-radius: 50px; margin-bottom: 0px;}

.frm-wrap textarea{ background-color: #f1cf9c; border:none; width: 100%; height: 120px; resize: none; border-radius: 10px; margin-bottom: 0px;}



.frm-wrap input[type="submit"]{ background: #cc333f; padding: 9px 28px;  border-radius: 25px; color: #fff;}

.wpcf7-not-valid-tip{ font-size: 13px !important; }

.f-logo{ text-align: center; }

.product-img img {height:250px; object-fit: contain;}



.reled-prod{}
.reled-prod h2{ margin-bottom: 0px; padding-bottom: 20px; font-weight: 700; color: #000; font-size: 20px; } 
.reled-prod .service-box{ padding: 5px; }
.reled-prod .product-img img{ height: 120px; }
.reled-prod .service-box{ margin: 0px 0px 15px 0px; }
.reled-prod .service-box h3{ font-size: 13px !important;
  display: block;
display: -webkit-box;
-webkit-line-clamp: 2;  
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.reled-prod .cus-col{ padding: 0px 5px; }
.reled-prod .service-box:hover h3{ color: #ff9800; }


/*backto-top*/
    #backto-top {
      display: inline-block;
       background-color: #525252;
      width: 65px;
      height: 65px;
      text-align: center;
      border-radius: 50%;
      position: fixed;
      bottom: 25px;
      right: 90px;
      transition: background-color .3s, 
        opacity .5s, visibility .5s;
      opacity: 0;
      visibility: hidden;
      z-index: 1000;
      text-align: center;
    }
    #backto-top i{
      color: #fff;
      line-height: 65px;
      font-size: 24px;
    }

    #backto-top:hover {
      cursor: pointer;
      background-color: #11ba99;
    }
    #backto-top:active {
      background-color: #555;
    }
    #backto-top.show {
      opacity: 1;
      visibility: visible;
    }

    /*backto-top end*/

.wp-block-buttons{ justify-content: center;}