/*
Template:  Webster - Responsive Multi-purpose HTML5 Template
Author: potenzaglobalsolutions.com
Design and Developed by: potenzaglobalsolutions.com

NOTE: This file contains the styling for the skateboard Template. You can edit/add anything in this file!
*/
 
h1, h2, h3, h6 { font-family: 'Permanent Marker', cursive; letter-spacing: 0.5px; }

h2 { font-size: 30px; line-height: 40px; font-weight: 300; margin-bottom: 4px;}

h4 { font-family: 'Poppins', sans-serif; font-size: 15px; letter-spacing: 0.1px; margin-bottom: 4px;font-weight: 400; }

h5 { font-family: 'Poppins', sans-serif; font-weight: 300; font-size: 17px; letter-spacing: 0.1em; margin-bottom: 0px; text-transform: uppercase;}

.button { border-radius: 3px; }
.mega-menu .menu-logo img { height: 80px; }


.img-responsive#imgblue { border: 5px solid #597387; z-index: 99}
.img-responsive#imggreen { border: 5px solid #7a9a5f; z-index: 99}
.img-responsive#imgpink { border: 5px solid #ba83bc; z-index: 99}
.img-responsive#imgyellow { border: 5px solid #d7ae6d; z-index: 99}

.quoter-icon {

}

.bg-overlay-theme2-50:before {  background: rgb(208, 200, 191, 0.5); content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0; }

.bg-top-before, .bg-bottom-before { position: relative; }
.bg-top-before:before { background-image: url(../../../demo-categories/skateboard/images/bg-02.png); top: 0; background-repeat: no-repeat;  content: ""; position: absolute; height: 110px; width: 100%; }
.bg-bottom-before:before { background-image: url(../../../demo-categories/skateboard/images/bg.png); bottom: 0; background-repeat: no-repeat;  content: ""; position: absolute; height: 110px; width: 100%; }

/*banner */
.skateboard-banner .container, .skateboard-banner .row { height: 100%; }
.skateboard-banner .slider-content-image {  position: absolute; bottom: -50px; }
.skateboard-banner .slider-content-text { z-index: 5; display: inline-block;  position: absolute; top: 60%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%);  }
.skateboard-banner h1 { font-size: 72px; line-height: 60px; }
.skateboard-banner p { font-size: 21px; font-weight: 300; letter-spacing: 0.1em;  }
.highlight {
background: url(../../../demo-categories/skateboard/images/brush1.png);
background-repeat: no-repeat;
background-size: 100% 90%;
padding: 4px 6px;
}
.highlight2 {
background: url(../../../demo-categories/skateboard/images/brush2.png);
background-repeat: no-repeat;
background-size: 100% 90%;
padding: 4px 6px;
}
.highlight3 {
background: url(../../../demo-categories/skateboard/images/brush3.png);
background-repeat: no-repeat;
background-size: 100% 90%;
padding: 4px 6px;
}
.highlight4 {
background: url(../../../demo-categories/skateboard/images/brush4.png);
background-repeat: no-repeat;
background-size: 100% 95%;
padding: 4px 6px;
}



/*architecture-about*/
.skateboard-about h2 { font-size: 50px; line-height: 60px;  }
.skateboard-about .about-image { width: 100%; position: relative; height: 430px; }
.skateboard-about .about-image-01 { background-size: cover; display: table-cell; width: 30%;  height: 440px; margin-top: 20px; position: absolute; right: 0; transition: all 1s cubic-bezier(.165,.84,.44,1);background-size: cover;background-position: center; }
.skateboard-about .about-image-02 {background-size: cover; display: table-cell; width: 70%; height: 480px; position: absolute; left: 0; transition: all 1s cubic-bezier(.165,.84,.44,1);background-size: cover;background-position: center; }
.skateboard-about .about-image .about-image-01:hover { width: 70%; height: 480px; margin-top: 0; }
.skateboard-about .about-image .about-image-01:hover + .about-image-02 { width: 30%; height: 440px; margin-top: 20px; }

.skateboard-about .bg-top-before:before  { top: 80px; z-index: 9; }

/*skateboard gallery*/
.skateboard-gallery { padding-top: 130px; }
.skateboard-gallery .section-title h2 { font-size: 48px; line-height: 60px; }
.skateboard-gallery { position: relative; }
.skateboard-gallery .skateboard-gallery-top {  position: relative; }
.skateboard-gallery .owl-carousel { position: relative;  bottom: -40px; }
.skateboard-gallery .owl-carousel .owl-nav i { background: #ffffff !important; color: #323232 !important; }

/*skateboard-box*/
.skateboard-box { padding: 30px 30px 30px 0px; position: relative; opacity:1;}
.skateboard-box h2 { display: block;  font-size: 44px;}
.skateboard-box strong { display: block;  font-size: 20px; line-height: 0.85;}
.skateboard-box .skateboard-box-image { position: absolute; bottom: 0; padding-left:30px;}
.skateboard-box .skateboard-box-content { padding-left: 25px; position: relative; z-index: 1; }
.skateboard-box:hover .skateboard-box-content { padding-left: 18px; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; }

.skateboard-box:hover { cursor: pointer; opacity:0.9;}
.skateboard-box:hover .skateboard-box-image { padding-left:10px; -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; -ms-transition: all 0.5s ease-in-out 0s; -o-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s;}


.skateboard-box > .skateboard-box-content > a.button { opacity: 0;}
.skateboard-box:hover > .skateboard-box-content > a.button { opacity: 0; }

.skateboard-box:hover .button { background: transparent; border: 2px solid transparent; color: #fff;}
.skateboard-box:hover a { background: transparent; border: 2px solid transparent; color: #fff;}



/*skateboard-product*/
.skateboard-product { padding-top: 200px; }
.skateboard-product .product-item { text-align: center; position: relative;  }
.skateboard-product .product-item .product-title a { font-size: 18px; font-weight: 500; margin: 20px 0px 10px; display: block; }
.skateboard-product .product-item .product-price del { background: transparent; color: #323232; font-size: 13px; }
.skateboard-product .product-item .product-price ins { text-decoration: none; font-size: 16px; font-weight: bold; }
.skateboard-product .product-item .product-rating { margin-bottom: 10px; }
.skateboard-product .product-item .product-rating i { color: #353535; }


/*skateboard-video*/
.skateboard-video .js-video { position: relative; margin-bottom: -100px; }
.footer-widget { border-top: 0; }