/* Theme Name: Color Skip Bins Theme URI: Color Skip Bins Description: Color Skip Bins Author: Color Skip Bins Author URI: Color Skip Bins Version: 1.0 License: Color Skip Bins License URI: Color Skip Bins Tags:Color Skip Bins */
.bs-slider{
     overflow: hidden;
     max-height: 700px;
     position: relative;
     background: #08b1f2;
    /* height: 700px;
     */
     padding-top: 116px;
}
 .bs-slider:hover {
     cursor: -moz-grab;
     cursor: -webkit-grab;
}
 .bs-slider:active {
     cursor: -moz-grabbing;
     cursor: -webkit-grabbing;
}
 .bs-slider .bs-slider-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.40);
}
 .bs-slider > .carousel-inner > .item > img, .bs-slider > .carousel-inner > .item > a > img {
     margin: auto;
     width: 100% !important;
}
/******************** *****Slide effect **********************/
 .fade {
     opacity: 1;
}
 .fade .item {
     top: 0;
     z-index: 1;
     opacity: 0;
     width: 100%;
     position: absolute;
     left: 0 !important;
     display: block !important;
     -webkit-transition: opacity ease-in-out 1s;
     -moz-transition: opacity ease-in-out 1s;
     -ms-transition: opacity ease-in-out 1s;
     -o-transition: opacity ease-in-out 1s;
     transition: opacity ease-in-out 1s;
}
 .fade .item:first-child {
     top: auto;
     position: relative;
}
 .fade .item.active {
     opacity: 1;
     z-index: 2;
     -webkit-transition: opacity ease-in-out 1s;
     -moz-transition: opacity ease-in-out 1s;
     -ms-transition: opacity ease-in-out 1s;
     -o-transition: opacity ease-in-out 1s;
     transition: opacity ease-in-out 1s;
}
/*---------- LEFT/RIGHT ROUND CONTROL ----------*/
 .control-round .carousel-control {
     top: 47%;
     opacity: 0;
     width: 45px;
     height: 45px;
     z-index: 100;
     color: #ffffff;
     display: block;
     font-size: 24px;
     cursor: pointer;
     overflow: hidden;
     line-height: 43px;
     text-shadow: none;
     position: absolute;
     font-weight: normal;
     background: transparent;
     -webkit-border-radius: 100px;
     border-radius: 100px;
}
 .control-round:hover .carousel-control{
     opacity: 1;
}
 .control-round .carousel-control.left {
     left: 1%;
}
 .control-round .carousel-control.right {
     right: 1%;
}
 .control-round .carousel-control.left:hover, .control-round .carousel-control.right:hover{
     color: #fdfdfd;
     background: rgba(0, 0, 0, 0.5);
     border: 0px transparent;
}
 .control-round .carousel-control.left>span:nth-child(1){
     left: 45%;
}
 .control-round .carousel-control.right>span:nth-child(1){
     right: 45%;
}
/*---------- INDICATORS CONTROL ----------*/
 .indicators-line > .carousel-indicators{
     right: 45%;
     bottom: 3%;
     left: auto;
     width: 90%;
     height: 20px;
     font-size: 0;
     overflow-x: auto;
     text-align: right;
     overflow-y: hidden;
     padding-left: 10px;
     padding-right: 10px;
     padding-top: 1px;
     white-space: nowrap;
}
 .indicators-line > .carousel-indicators li{
     padding: 0;
     width: 15px;
     height: 15px;
     border: 1px solid rgb(158, 158, 158);
     text-indent: 0;
     overflow: hidden;
     text-align: left;
     position: relative;
     letter-spacing: 1px;
     background: rgb(158, 158, 158);
     -webkit-font-smoothing: antialiased;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     margin-right: 5px;
     -webkit-transition: all 0.5s cubic-bezier(0.22,0.81,0.01,0.99);
     transition: all 0.5s cubic-bezier(0.22,0.81,0.01,0.99);
     z-index: 10;
     cursor:pointer;
}
 .indicators-line > .carousel-indicators li:last-child{
     margin-right: 0;
}
 .indicators-line > .carousel-indicators .active{
     margin: 1px 5px 1px 1px;
     box-shadow: 0 0 0 2px #fff;
     background-color: transparent;
     position: relative;
     -webkit-transition: box-shadow 0.3s ease;
     -moz-transition: box-shadow 0.3s ease;
     -o-transition: box-shadow 0.3s ease;
     transition: box-shadow 0.3s ease;
     -webkit-transition: background-color 0.3s ease;
     -moz-transition: background-color 0.3s ease;
     -o-transition: background-color 0.3s ease;
     transition: background-color 0.3s ease;
}
 .indicators-line > .carousel-indicators .active:before{
     transform: scale(0.5);
     background-color: #fff;
     content:"";
     position: absolute;
     left:-1px;
     top:-1px;
     width:15px;
     height: 15px;
     border-radius: 50%;
     -webkit-transition: background-color 0.3s ease;
     -moz-transition: background-color 0.3s ease;
     -o-transition: background-color 0.3s ease;
     transition: background-color 0.3s ease;
}
/*---------- SLIDE CAPTION ----------*/
 .slide_style_left {
     text-align: left !important;
}
 .slide_style_right {
     text-align: right !important;
}
 .slide_style_center {
     text-align: center !important;
}
 .slide-text {
     left: 50%;
     top: 25%;
     background: rgba(8, 8, 8, 0.68);
     right: 50px;
     margin: auto;
     padding: 10px;
     position: absolute;
     text-align: left;
     padding: 32px 40px;
}
 .slide-text > h1 {
     padding: 0;
     color: #ffffff;
     font-size: 70px;
     font-style: normal;
     line-height: 84px;
     margin-bottom: 10px;
     letter-spacing: 1px;
     display: inline-block;
     -webkit-animation-delay: 0.7s;
     animation-delay: 0.7s;
}
 .slide-text > p {
     padding: 0;
     color: #ffffff;
     font-size: 20px;
     line-height: 24px;
     font-weight: 300;
     margin-bottom: 20px;
     letter-spacing: 1px;
     -webkit-animation-delay: 1.1s;
     animation-delay: 1.1s;
}
 .slide-text > a.btn-default{
     color: #000;
     font-weight: 400;
     font-size: 13px;
     line-height: 15px;
     margin-right: 10px;
     text-align: center;
     padding: 17px 30px;
     white-space: nowrap;
     letter-spacing: 1px;
     display: inline-block;
     border: none;
     text-transform: uppercase;
     -webkit-animation-delay: 2s;
     animation-delay: 2s;
     -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
     transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
 .slide-text > a.btn-primary{
     color: #ffffff;
     cursor: pointer;
     font-weight: 400;
     font-size: 13px;
     line-height: 15px;
     margin-left: 10px;
     text-align: center;
     padding: 11px 18px;
     white-space: nowrap;
     letter-spacing: 1px;
     background: #cc0000;
     display: inline-block;
     text-decoration: none;
     text-transform: uppercase;
     border: none;
     -webkit-animation-delay: 2s;
     animation-delay: 2s;
     -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
     transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}
 .slide-text > a:hover, .slide-text > a:active {
     color: #ffffff;
     background: #222222;
     -webkit-transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
     transition: background 0.5s ease-in-out, color 0.5s ease-in-out;
}
/*------------------------------------------------------*/
/* RESPONSIVE 
/*------------------------------------------------------*/
 @media (max-width: 991px) {
     .slide-text h1 {
         font-size: 40px;
         line-height: 50px;
         margin-bottom: 20px;
    }
     .slide-text > p {
         font-size: 18px;
    }
}
/*---------- MEDIA 480px ----------*/
 @media (max-width: 768px) {
     .slide-text {
         padding: 10px 50px;
    }
     .slide-text h1 {
         font-size: 30px;
         line-height: 40px;
         margin-bottom: 10px;
    }
     .slide-text > p {
         font-size: 14px;
         line-height: 20px;
         margin-bottom: 20px;
    }
     .control-round .carousel-control{
         display: block;
    }
     .bs-slider {
         overflow: hidden;
         max-height: 700px;
         position: relative;
         background: #08b1f2;
        /* height: 700px;
         */
         padding-top:0px;
    }
}
 @media (max-width: 480px) {
     .slide-text {
         left: 10%;
         top: 13%;
         right: 38%;
         margin: auto;
         padding: 10px;
         position: absolute;
         text-align: left !important;
    }
     .slide-text h1 {
         font-size: 14px;
         line-height: 25px;
         margin-bottom: 5px;
    }
     .slide-text > p {
         font-size: 8px;
         line-height: 18px;
         margin-bottom: 10px;
    }
     .slide-text > a.btn-default, .slide-text > a.btn-primary {
         font-size: 10px;
         line-height: 10px;
         margin:0px;
         text-align: center;
         padding: 10px 15px;
    }
     .indicators-line > .carousel-indicators{
         display:none;
    }
}
.parallax {
     width: 100%;
     height: 100%;
     margin: 0 auto;
     background-size: cover;
     background-attachment: fixed;
     background-repeat: repeat-y;
     background-position: top center;
}
 table.hovertable {
     font-family: 'PT Sans', sans-serif;
     font-size: 14px;
     text-align: justify;
     color: #343434;
     border-width: 1px;
     border-color: #999999;
     border-collapse: collapse;
     width: 100%;
}
 table.hovertable th {
     background-image:url(../images/table-strip.jpg);
     background-repeat:repeat-x;
     height:25px;
     border-width: 1px;
     padding: 8px;
     border-style: solid;
     border-color: #eaeaea;
     font-weight:normal;
     font-family: 'PT Sans', sans-serif;
     font-size: 17px;
     color:#970808;
     text-transform:uppercase;
     line-height:25px;
}
 table.hovertable tr {
     background-color:#fbfcfd;
}
 table.hovertable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #eaeaea;
    line-height: 25px;
    vertical-align: text-top;
}

 table.hovertable td p {
    position: relative;
    line-height: 1.5;
    text-align: justify;
    color: #333;
    font-size: 15px;
}

table.hovertable td span {
    color: #ff0000;
    font-size: 12px;
}

 .layer-overlay::before {
     content: " ";
     height: 100%;
     left: 0;
     position: absolute;
     top: 0;
     width: 100%;
     z-index: 0;
}
/* The container */
 #parada {
     display: block;
     position: relative;
     padding-left: 2em;
     cursor: pointer;
     font-size: 1.2em;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
     color: #333;
     background: transparent;
}
/* Hide the browser's default radio button */
 #parada input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
}
/* Create a custom radio button */
 .checkmark {
     position: absolute;
     top: 0;
     left: 0;
     height: 20px;
     width: 20px;
     border: 1px solid #7f7f7f;
    /* background: #fff;
     */
     border-radius: 50%;
     margin-top: 2px;
}
/* On mouse-over, add a grey background color */
 #parada:hover .checkmark, #parada:focus .checkmark, #parada:active .checkmark {
     background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
 #parada:hover .checkmark, #parada:focus .checkmark, #parada:active .checkmark {
     background-color: #8fae1b;
     border-color: #8fae1b;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
 .checkmark:after {
     content: "";
     position: absolute;
     display: none;
}
/* Show the indicator (dot/circle) when checked */
 #parada:hover .checkmark:after, #parada:focus .checkmark:after, #parada:active .checkmark:after {
     display: block;
}
/* Style the indicator (dot/circle) */
 #parada .checkmark:after {
     top: 5.3px;
     left: 5.5px;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: white;
}
 input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
     opacity: 1;
}
 .hovertable tr th {
     color: #fff;
     font-size: 1.5em;
     background: #8fae1b;
     text-transform: capitalize;
}
 .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
     border: 1px solid #eceef0;
     outline: none;
     font-size: 14px !important;
     color: #848688;
     display: block;
     background: #f8fafc;
     padding: 1em;
}
 ul.pro_list {
     position: relative;
     display: block;
     width: 100%;
     padding: 1.2em 0;
     border-top: 1px solid #333;
     border-bottom: 1px solid #333;
}
 ul.pro_list li {
     float: none;
     display: block;
     list-style-type: none;
     padding-bottom: .4em;
     margin-bottom: .6em;
     border-bottom: 1px solid #f4f8f8;
}
 ul.pro_list li button {
     font-size: 1em !important;
}
 .bor_gr {
     padding: 2em;
     border-radius: 5px;
     border: 1px solid #8fae1b;
     box-shadow: 0px 0px 76px -33px #333;
}
 .bin_pic {
     margin-top: 7em;
     display: inline-block;
}
 .select2-container--default .select2-selection--single {
     height: 2.5em !important;
     padding-top: 0.4em !important;
     border: 1px solid #eceef0 !important;
     outline: none !important;
     font-size: 14px !important;
     color: #848688 !important;
     display: block !important;
     background: #f8fafc !important;
     margin-bottom: 1px !important;
     border-radius: 0 !important;
}
.step_1 {
   width: auto;
   padding: 20px;
   background: #1e3c57;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   margin: 6px 10px 0;
   text-align: center;
   font-size: 15px;
   line-height: 19px;
   color: #fff;
   z-index: 1;
   box-sizing: content-box;
   -moz-box-sizing: content-box;
   -webkit-box-sizing: content-box;
   margin-top: 7%;
}
.step_1 h3 i {
   color: #8fae1b;
}
.step_1 .pin_block {
   background-color: #8fae1b;
   padding: 15px;
   border-radius: 5px;
   margin-top: 1em;
   width: 80%;
   display: inline-block;
}
.step_1 .pin_block span {
   color: #1e3c57;
   font-size: 1.6em;
   margin-right: 0.3em;
}
.step_1 .pin_block input {
   border: 0;
   background: #fff;
   border-radius: 4px;
   height: 2.3em;
   color: #333;
}
.step_1 .pin_block a {
   border: 0;
   color: #fff;
   background: #1e3c57;
   line-height: 1;
   padding: 9px 16px;
   border-radius: 3px;
}
.shipping, .woocommerce-shipping-fields {
display: none;
}
.about-title{
	font-size: 28px;
	color: #2c2c2c;
	line-height: 1.2;
	padding-bottom: 20px;
	position: relative;
}
.about-title:after{
	width: 55px;
	height: 3px;
	background: #111111;
	position: absolute;
	bottom: 0;
	left: 0;
	content: "";
}
.about-text{
	font-size: 16px;
    color: #0d0d0d;
    padding-top: 20px;
	line-height: 1.5;
}
.about-text p{
	font-size: 16px;
    color: #0d0d0d;
	line-height: 1.5;
}
.about-right img{
	width: 100%;
}
.mt-5{
 margin-top:40px;	
}