/* Custom CSS
   1. Margin and Padding Helpers
   2. Navigation
   3. Homepage
   4. FAQs
   5. Breadcrumbs
   6. Parallax Slider
   7. Contact
   8. SPT
   9. Footer
   10. Accessories
   11. Header Images
   12. Privacy Page
   13. Proline Page
   14. Modal Video
   15. Image Hover Zoom

*/

body {
    height: auto !important;
}


/* 1. Margin and Padding Helpers
--------------------------------------------*/
.pt-20 {
    padding-top: 20px;
}

.pt-50 {
    padding-top: 50px;
}

.pt-135 {
    padding-top: 135px;
}

.pb-30 {
    padding-bottom: 30px;
}

.margin-0-auto {
    margin: 0 auto;
}

.mb-15 {
    margin-bottom: 15px;
}

.mt-50 {
    margin-top: 50px;
}

.list-tab li {
    padding-left: 30px;
}

/* 2. Navigation
--------------------------------------------*/
.navbar-brand {
    text-align: center;
    padding: 0;
}

.shopping-cart a {
    color: #fff;
}

    .shopping-cart a:hover {
        font-weight: 700;
        transition: all 0.3s ease-in-out;
    }

.header-v6.header-border-bottom .navbar {
    background: #000;
    opacity: .8;
}

.header-fixed .header-v6.header-border-bottom.header-fixed-shrink .navbar {
    background: #000;
    opacity: .8;
}

.header-fixed .header-v6.header-fixed-shrink li.menu-icons i.menu-icons-style {
    color: #fff;
    opacity: .8;
}

.header-fixed .header-v6.header-fixed-shrink .sliding-panel__btn .icon-bar {
    background: #fff;
    opacity: .8;
}

.breadcrumb-logo img {
    top: 12vh;
    position: relative;
}

.nav-tabs {
    margin-bottom: 50px;
}

.tab-v1 .nav-tabs > li > a {
    padding: 15px 0px;
    font-size: 18px;
    margin: 0px 2px;
}

.header-inner-center {
    text-align: right;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .header-inner-center {
        text-align: center;
        margin: 0 auto;
    }
}

.header-inner-center a {
    top: 20px;
    font-size: 20px;
}

.header-inner-center .btn-u {
    padding: 15px 25px;
}

.header-fixed-shrink .header-inner-center a {
    top: 8px;
    font-size: 16px;
}

/* 3. Homepage
--------------------------------------------*/
.flat-service img {
    margin: 0 auto;
}

/* 4. FAQ-page
-------------------------------------------*/
.faq-breadcrumb {
    text-align: center;
    position: relative;
    background: url('../img/sliders/faq_top.jpg') no-repeat center bottom;
}

    .faq-breadcrumb:before {
        left: 0;
        width: 100%;
        height: 100%;
        content: " ";
        position: absolute;
        background: rgba(0,0,0,0.3);
    }

.blank-breadcrumb {
    text-align: center;
    position: relative;
    background: url('../img/sliders/blank_top.jpg') repeat-y center bottom;
}

    .blank-breadcrumb:before {
        left: 0;
        width: 100%;
        height: 100%;
        content: " ";
        position: absolute;
        background: rgba(0,0,0,0.3);
    }

.faq-page .tab-v1 {
    margin-top: 19px;
}

    .faq-page .tab-v1 .panel-title {
        text-transform: uppercase;
    }

/*Check-style*/
.faq-page .check-style {
    margin-bottom: 0;
}

    .faq-page .check-style li {
        margin-bottom: 10px;
    }

        .faq-page .check-style li:last-child {
            margin-bottom: 0;
        }

    .faq-page .check-style i {
        font-size: 18px;
        font-weight: 600;
        vertical-align: middle;
    }

/*Check-style in Responsive*/
@media (max-width: 450px) {
    .faq-page .main-check .col-xs-6 {
        width: 100%;
    }
}

/*Faq-add*/
.faq-page .faq-add {
    padding: 15px;
    margin-bottom: 20px;
    border: 2px solid #eee;
}

.faq-page .top-part i {
    float: left;
    color: #777;
    font-size: 20px;
    padding-top: 3px;
    margin-right: 10px;
}

.faq-page .new-title {
    color: #9aba1c;
    font-size: 18px;
    margin-bottom: 5px;
}

.faq-page .faq-add p {
    line-height: 1.5;
}

/* 5. Breadcrumbs
-------------------------------------------*/
.breadcrumbs-v2-in {
    padding: 180px 0;
}

.breadcrumbs-v2-in.breadcrumbs-blank {
    padding: 140px 0px 40px 0px
}

/* 6. Parallax Slider
-------------------------------------------*/
.da-dots {
    top: 15px;
}

#home-slider .da-slider {
    width: 100%;
    height: 100vh;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    background: transparent url(../img/bg.jpg) repeat 0% 0%;
}

/* 7. Contact Page
-------------------------------------------*/
.map {
    width: 100%;
    height: 350px;
    border-top: solid 1px #eee;
    border-bottom: solid 1px #eee;
}

    /* important! bootstrap sets max-width on img to 100% which conflicts with google map canvas*/
    .map img {
        max-width: none;
    }

.map-box {
    height: 250px;
}

.map-box-space {
    margin-top: 15px;
}

.map-box-space1 {
    margin-top: 7px;
}

/*Custom Sky Forms (Advanced Contacts Page)*/
.sky-changes-3.sky-form,
.sky-changes-3.sky-form footer {
    border: none;
}

    .sky-changes-3.sky-form footer,
    .sky-changes-3.sky-form fieldset {
        padding: 0;
        background: none;
    }

/* 8. SPT Page
-------------------------------------------*/
#spt-graph-1 {
    background-color: #000000;
    padding: 50px;
}

    #spt-graph-1 p {
        color: #CCCCCC;
        font-size: 18px;
    }

#spt-graph-2 {
    background-color: #FFFFFF;
    padding: 20px;
}

    #spt-graph-2 p {
        color: #333333;
        font-size: 18px;
    }

/* 9. Footer
-------------------------------------------*/
.footer-v1 {
    position: relative;
    bottom: 0;
}

/* 10. Accessories
-------------------------------------------*/
#accessories {
    margin: 50px 0px;
}

#powerpacks img, #bigfoot img {
    margin: 0 auto;
}

/* 11. Header Images
-------------------------------------------*/
.header-img {
    position: relative;
}

.caption {
    text-align: center;
}

.header-img .caption h1 {
    position: absolute;
    top: 25%;
    left: 0;
    width: 100%;
    color: #fff;
    font-size: 40px;
}

.header-img .caption h5 {
    position: absolute;
    top: 35%;
    left: 0;
    width: 100%;
    color: #fff;
    font-size: 24px;
}

.header-img .caption a {
    width: auto;
    color: #fff;
    font-size: 24px;
    text-align:center;
    margin: 0 auto;
}

.header-img .caption .banner-btn {
    position: absolute;
    bottom: 5%;
    width: 100%;
}

/***** MEDIA QUERIES *****/
@media (max-width: 767px) {
    .header-img .caption a {
        font-size: 16px;
        padding: 5px 10px;
    }
    .header-img .caption h5 {
       top: 25%;
       font-size: 20px !important;
       line-height: 22px !important;
   }
    .header-img .caption h1 {
       top: 10%;
       font-size: 30px;
   }
}

/* 12. Privacy Page
-------------------------------------------*/
.privacy-breadcrumb {
    text-align: center;
    position: relative;
    background: url('../img/sliders/combination-safe.jpg') no-repeat center;
}

    .privacy-breadcrumb:before {
        left: 0;
        width: 100%;
        height: 100%;
        content: " ";
        position: absolute;
        background: rgba(0,0,0,0.3);
    }

/* 13. Proline Page
-------------------------------------------*/
.proline h1 {
    text-decoration: underline;
}

.proline h5 {
  font-size: 50px !important;
  line-height: 60px;
  text-transform: uppercase;
  font-weight: 700;
}

 @media only screen and (max-width: 641px) {
   .proline h5 {
     top:45% !important;
     font-size: 22px !important;
     line-height: normal;
     text-transform: uppercase;
     font-weight: 700;
   }
 }

.feature-list ol li {
    font-size: 24px;
    line-height: 30px;
}

tbody tr {
    text-align: center;
}

    tbody tr td {
        border-right: 1px dashed #c2c2c2;
    }

    tbody tr td img {
        margin: 0 auto;
    }

/* 14. Modal Video
------------------------------------------*/

/***** MODAL PROPERTIES *****/
 .modal-content {
    -webkit-box-shadow: none;
    box-shadow: none;
    background:transparent;
    border:none;
    outline:none;
}
.modal-content iframe {
    border:none;
    padding:0;
    margin:0;
}
.close {
    font-size: 80px;
    margin:-20px 0 0 0;
}
/***** MEDIA QUERIES *****/
 @media only screen and (max-width: 641px) {
    /***** MODAL PROPERTIES *****/
    .modal-body {
        height:100px;
        padding:0;
        margin: 0;
    }
    .modal-content {
        padding:0;
        margin: 0;
    }
    .modal-dialog {
        position: relative;
        width: auto;
        margin: 15px;
    }
    .close {
        margin:-12px 0 0 0;
    }
}
@media only screen and (min-width: 768px) {
    /***** MODAL PROPERTIES *****/
    .close {
        font-size: 80px;
        margin:30px -43px -20px 100px;
    }
}

/* 15. Image Hover Zoom
------------------------------------------*/

.img-hover img {
    -webkit-transition: all .3s ease; /* Safari and Chrome */
  	-moz-transition: all .3s ease; /* Firefox */
  	-o-transition: all .3s ease; /* IE 9 */
  	-ms-transition: all .3s ease; /* Opera */
  	transition: all .3s ease;
}
.img-hover img:hover {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform:translateZ(0) scale(1.20); /* Safari and Chrome */
    -moz-transform:scale(1.20); /* Firefox */
    -ms-transform:scale(1.20); /* IE 9 */
    -o-transform:translatZ(0) scale(1.20); /* Opera */
    transform:translatZ(0) scale(1.20);
}