/******************************************************

		Font family: Cabin Condensed

		Kolory: #fff    - biały
                #000    - czarny
                #212121 - ciemny szary
                #03AAF8 - niebieski
                #004990 - ciemny niebieski
                #ed1c24 - czerwony

*******************************************************/

/* general settings */

html, body {
	height: 100%;
}

body {
    font-family: 'Roboto Condensed', sans-serif !important;
    background-color: #fff;
}

p {
	color: #000;
	font-size: 15px;
}

h1 {
	text-transform: uppercase;
}

/*====================================================
                        HOME
======================================================*/
#home-title-logo{
    margin: 40px 0 0 0;
    text-align: center;
}

#home-content-title h1 {
    color: #000;
    font-size: 55px;
    font-weight: 700;
    margin: 80px 0 0 0;
    text-align: center;
}

#home-content-title h2 {
    color: #212121;
    font-size: 25px;
    font-weight: 400;
    margin: 0px 0 80px 0;
    text-align: center;
}

.home-content-image {
    margin-bottom: 30px;
    text-align: center;
}

.home-icon {
    text-align: center;
    color: #004990;
    margin: 30px 0 0 0;
}

.home-text {
    text-align: justify;
}

.home-title h2 {
    text-transform: uppercase;
    color: #ed1c24;
    font-size: 20px;
    font-weight: 400;
    margin: 0px 0 50px 0;
    text-align: center;
}

/*====================================================
                        PARALLAX IMAGE
======================================================*/
#parallax-cover {
  animation-duration: 3s;
  animation-delay: 0.5s;
}

#title-logo {
  animation-duration: 2s;
  animation-delay: 1.5s;
}

#parallax-image {
    height: 100%;
}

#parallax-cover {
    height: 100%;
    background-image: url("../img/home/home3.jpg");
}

/*====================================================
                        PARALLAX (efekt)
======================================================*/

.bg-parallax {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/*====================================================
                    O VALVOLINE
======================================================*/

.info-valvoline-text h2 {
    text-align: center;
    text-transform: uppercase;
    font-size: 30px;
    color: #03AAF8;
    font-weight: 400;
    margin-bottom: 30px;
}

.info-valvoline-text {
    text-align: justify;
}

/*====================================================
                       SKLEP
======================================================*/

.content-title {
    background-image: url("../img/bg2.jpg");
}

.content-title-produkty {
    background-image: url("../img/bg2.jpg");
    margin-bottom: 50px;
}

.content-title h1 {
    color: #fff;
    text-shadow: 1px 1px 5px #000;
    font-size: 50px;
    font-weight: 700;
    margin: 0 0 30px 0;
    text-align: center;
}

.content-title-produkty h1 {
    color: #fff;
    text-shadow: 1px 1px 5px #000;
    font-size: 50px;
    font-weight: 700;
    margin: 0 0 30px 0;
    text-align: center;
}

.shop-img {
    margin: 30px 0 10px 0;
}

#shop-text {
    margin-top: 30px;
    text-align: center;    
}

#shop-text p {
    text-align: justify;
}

#shop-text h2 {
    text-transform: uppercase;
    color: #212121;
    font-size: 25px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 20px;
}

.shop-btn {
    margin-top: 30px;
    text-align: center;
}


/*====================================================
                       PRODUKTY
======================================================*/

.product-title h2 {
    text-transform: uppercase;
    color: #212121;
    font-size: 25px;
    font-weight: 400;
    text-align: center;
}

.product-image {
    margin-bottom: 20px;
}

.product-image img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.product-image:hover img {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

.product-text {
    text-align: justify;
    margin-top: 20px;
}

.product-return h2,
.product-return-2 h2,
.product-return-3 h2 {
    text-transform: uppercase;
    color: #ed1c24;
    margin-top: 20px;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
}

.product-return:hover a,
.product-return-2:hover a,
.product-return-3:hover a {
    text-decoration: none;
}

/*====================================================
                       GALLERY
======================================================*/

.gallery-slide {
    margin-top: 30px;
}

.gallery-slide img {
    padding: 3px;
}

/*====================================================
                       LOGO
======================================================*/

#logo {
    background-color: #f1f1f1;
    text-align: center;
}

/*====================================================
                    KONTAKT - FOOTER
======================================================*/

#contact {
    background: rgba(15,18,51,1);
    background: -moz-linear-gradient(top, rgba(15,18,51,1) 0%, rgba(73,155,234,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(15,18,51,1)), color-stop(100%, rgba(73,155,234,1)));
    background: -webkit-linear-gradient(top, rgba(15,18,51,1) 0%, rgba(73,155,234,1) 100%);
    background: -o-linear-gradient(top, rgba(15,18,51,1) 0%, rgba(73,155,234,1) 100%);
    background: -ms-linear-gradient(top, rgba(15,18,51,1) 0%, rgba(73,155,234,1) 100%);
    background: linear-gradient(to bottom, rgba(15,18,51,1) 0%, rgba(73,155,234,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f1233', endColorstr='#499bea', GradientType=0 );
}

#contact-logo {
    text-align: center;
    padding-top: 15px;
}

#contact-adress {
    margin: 15px 0 0 0;
}

#contact-adress p {
    color: #fff;
    text-align: center;
    line-height: 15px;
    font-size: 12px;
}

#contact-adress a {
    text-decoration: none;
    color: #fff;
}

#contact-news p {
    color: #fff;
    text-align: left;
    line-height: 20px;
    margin-top: 25px;
    padding-left: 15px;
}

#contact-download {
    margin-top: 30px;
}

#contact-download p {
    text-align: left;
    line-height: 10px;
    margin-top: 17px;
    padding-left: 15px;
}

#contact-download p a,
#contact-news p a{
    text-decoration: none;
    color: #fff;
    font-size: 15px;
}

#contact-download p a:hover {
    color: #ed1c24;
}

#contact-news h4,
#contact-download h4 {
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    margin: 10px 0 0 0;
    color: #03AAF8;
    text-shadow: 1px 1px 5px #000;
    text-transform: uppercase;
}

/*====================================================
                    PROMOCJA
======================================================*/

.promotions-image {
    -moz-box-shadow: 0 0 5px #ccc;
    -webkit-box-shadow: 0 0 5px #ccc;
    border: 5px solid #fff;
    border-radius: 2px;
    background: #fff;
}

.promotions-desc {
    text-align: center;
    font-weight: 700;
}

.promotions-desc p {
    color: red;
}

/*====================================================
                        GALERIA
======================================================*/

.comming {
    color: #000;
    font-size: 50px;
    font-weight: 700;
    margin: 0 0 30px 0;
    text-align: center;
}

/*====================================================
                    KONTAKT SITE
======================================================*/

.contact-title h1 {
    color: #000;
    font-size: 30px;
    font-weight: 400;
    margin: 0 0 30px 0;
    text-align: center;
}

.contact-table table {
    text-align: center;
    margin-bottom: 80px;
}

.contact-table table a {
    text-decoration: none;
}

.contact-table table thead {
    text-align: center;
    background-color: rgba(0, 0, 0, 0.3);
    color: #000;
}

.contact-table table thead tr{
    line-height: 10px;
}

.contact-table table td {
    border-bottom: 1px solid #000;
}

#contact-logo {
    margin-bottom: 15px;
}

.contact-title-adress h2 {
    text-transform: uppercase;
    color: #004990;
    font-size: 25px;
    font-weight: 400;
    text-align: left;
    margin: 20px 0 20px 0;
}

#contact-box-1 {
    margin-bottom: 40px;
}

.contact-p p {
    text-align: left;
    line-height: 10px;
    margin-bottom: 20px;
}

#contact-map {
    padding: 10px;
}

.collapse-box {
    text-align: left;
    margin-bottom: 15px;
}

h4.panel-title {
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0);
    font-size: 15px;
    padding: 2px;
    text-decoration: underline;
}

h4.panel-title a {
    text-decoration: none;
    color: #000;
    background-color: rgba(0, 0, 0, 0);
}

h4.panel-title a:hover {
    text-decoration: none;
    color: #004990;
    background-color: rgba(0, 0, 0, 0);
}

.panel-body p {
    line-height: 10px;
}

.panel-body p a {
    text-decoration: none;
}

.panel-heading {
    margin: 20px 0 20px 0;
}

.contact-title-1 h1 {
    color: #000;
    font-size: 20px;
    font-weight: 400;
    margin: 50px 0 30px 0;
    text-align: left;
}

.contact-title-t h1 {
    color: #ed1c24;
    font-size: 20px;
    font-weight: 400;
    margin: 25px 0 30px 0;
    text-align: left;
}

.mail-color {
    color: #03AAF8;
}

/*====================================================
                        RAMKA
======================================================*/

.ramka {
  -moz-box-shadow: 0 0 5px #ccc;
  -webkit-box-shadow: 0 0 5px #ccc;
  border: 5px solid #fff;
  border-radius: 2px;
  background: #fff;
}

.pad {
    padding: 5px;
}

/*====================================================
                       ANIMACJA
======================================================*/

#home-cover,
#home-heading,
#home-logo {
    -webkit-animation-duration: 1s;
            animation-duration: 1s;
}

#home-cover {
    -webkit-animation-delay: 0.7s;
            animation-delay: 0.7s;
}

#home-logo {
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
}

#home-heading {
    -webkit-animation-delay: 1.5s;
            animation-delay: 1.5s;
}

/*====================================================
                       TYTUŁ SCHEMAT
======================================================*/

.content-box {
    padding: 30px 0 60px 0;
}

.content-box-2 {
    padding: 30px 0 10px 0;
}

.content-box-logo {
    padding: 0 0 15px 0;
}

.content-box-contact {
    padding: 0;
    margin: 0;
}

.content-title-underline {
    width: 70%;
    height: 3px;
    background-color: #ed1c24;
    margin: 20px auto 20px auto;
}

.content-title-underline-2 {
    width: 100%;
    height: 3px;
    background-color: #ed1c24;
    margin: 80px auto 0 auto;
}

.content-title-underline-3 {
    width: 100%;
    height: 3px;
    background-color: #004990;
    margin: 0px auto 0 auto;
}

.content-title-underline-4 {
    width: 100%;
    height: 3px;
    background-color: #004990;
    margin: 0px auto 0 auto;
}

/*====================================================
                       BTN
======================================================*/

.opis-btn h5 {
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    margin: 0 0 30px 0;
    color: #fff;
    text-shadow: 1px 1px 5px #000;
}

.btn-primary {
    text-transform: uppercase;
}

.btn-primary.btn-val,
.btn-primary.btn-ene {
    background-color: #03AAF8;
    border: 0.5px solid #000;
}

.btn-primary.btn-val:hover,
.btn-primary.btn-val:focus {
    background-color: #004990;
    color: #fff;
}

.btn-primary.btn-ene:hover,
.btn-primary.btn-ene:focus {
    background-color: #ec6806;
    color: #fff;
}

.btn-primary.btn-gdzie {
    background-color: rgba(255, 255, 255, 0.3);
    border: 0.5px solid #000;
}

.btn-primary.btn-gdzie:hover,
.btn-primary.btn-gdzie:focus {
    background-color: #e71d36;
    color: #fff;
}

.btn-back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 22px;
    padding: 3px 15px;
    border-radius: 0;
    display: none;
}

/*====================================================
                       SIDEBAR
======================================================*/

.navbar {
    padding: 15px 10px;
    background: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 0;
    margin-bottom: 40px;
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

.btn-menu {
    background-color: rgba(0, 0, 0, 0.3);
    color: #fff;
    width: 90px;
}

.btn-menu:hover {
    background-color: #004990;
    color: #fff;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

#sidebar {
    width: 120px;
    position: fixed;
    top: 0;
    left: -250px;
    height: 100vh;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    transition: all 0.3s;
    overflow-y: scroll;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

#sidebar.active {
    left: 0;
}

.overlay {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 998;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}
.overlay.active {
    display: block;
    opacity: 1;
}

#sidebar .sidebar-header {
    padding: 10px;
    background: rgba(0, 0, 0, 0);
    margin-top: 50px;
    color: #fff;
    text-shadow: 1px 1px 5px #000;
    font-size: 50px;
    font-weight: 700;
    text-align: center;
}

#sidebar ul.components {
    padding: 20px 0;
    border-bottom: 0px solid #47748b;
    height: 700px;
}

#sidebar ul p {
    color: #fff;
    padding: 10px;
}

.sidebar-icon {
    text-align: center;
}

.sidebar-icon .flaticon-home::before,
.sidebar-icon .flaticon-oil::before,
.sidebar-icon .flaticon-discount::before,
.sidebar-icon .flaticon-photograph::before,
.sidebar-icon .flaticon-question::before,
.sidebar-icon .flaticon-shopping-cart::before,
.sidebar-icon .flaticon-gift::before,
.sidebar-icon .flaticon-facebook::before,
.sidebar-icon .flaticon-oil-1::before {
    font-size: 35px;
}

.sidebar-icon .flaticon-oil-1::before {
    margin-left: 10px;
}

#sidebar .on-site p {
    color: #ed1c24;
}

#sidebar ul li p {
    padding: 5px;
    font-size: 12px;
    display: block;
    color: #fff;
    text-shadow: 1px 1px 5px #000;
    font-weight: 400;
    text-align: center;
}

#sidebar ul li a {
    font-size: 12px;
    display: block;
    color: #fff;
    text-shadow: 1px 1px 5px #000;
    font-weight: 400;
    text-align: center;
}

#sidebar ul li a:hover {
    color: #ed1c24;
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
}

#sidebar ul li.active>a,
a[aria-expanded="true"] {
    color: #fff;
    background: #6d7fcc;
}

a[data-toggle="collapse"] {
    position: relative;
}

.dropdown-toggle::after {
    display: block;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
}

ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    background: #6d7fcc;
}

ul.CTAs {
    padding: 20px;
}

ul.CTAs a {
    text-align: center;
    font-size: 0.9em !important;
    display: block;
    border-radius: 5px;
    margin-bottom: 5px;
}

a.download {
    background: #fff;
    color: #7386D5;
}

a.article,
a.article:hover {
    background: #6d7fcc !important;
    color: #fff !important;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

.navbar > .container-fluid {
    padding-left: 0;
}

#content {
    width: 100%;
    min-height: 100vh;
    transition: all 0.3s;
    top: 0;
    right: 0;
}

/* ---------------------------------------------------
                    FOOTER
----------------------------------------------------- */

#font-credits {
    text-align: center;
    margin: 0;
    background: rgba(0, 73, 144, 0.8);
}

#font-credits p a {
    text-decoration: none;
    color: #000;
}

#font-credits p {
    margin: 0;
    font-size: 12px;
}

/*====================================================
                        APLIKACJA
======================================================*/
#app-title-logo {
    margin: 10px 0 0 0;
    text-align: center;
}

.btn-group-vertical img {
    height: 50px;
    margin-right: 10px;
}

.btn-app {
    width: 100%;
    display: inline-block;
    font-weight: 400;
    color: #fff;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 20px;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    margin-top: 5px;
    text-transform: uppercase;
}

.btn-primary-app {
    background-color: #0093d0;
    border: 0.5px solid rgb(0, 0, 0);
}

.btn-primary-app:hover,
.btn-primary-app:focus {
    background-color: #004990;
    color: #fff;
    text-decoration: none;
}