/* global */

html {
    scroll-behavior: smooth !important;
}

.xlp.container {
    border: 0;
    border-radius: 0;
}

.xlp .container {
    position: relative;
    z-index: 4 !important;
}

.xlp .container-fluid {
    position: relative;
    z-index: 4 !important;
}

.xlp .row {
    position: relative;
    z-index: 3;
}

.xlp section {
    padding: 60px 0;
}

.xlp .products {
    padding-bottom: 25px;
}

.xlp .products #grid {
    position: relative;
}

.xlp .products #grid:after {
    content: "";
    flex: auto;
}

.xlp .link {
    color: #000;
    font-weight: 600;
}

.xlp .smallest {
    font-size: 1rem;
}

.xlp .no-br {
    white-space: nowrap;
}


/* header */

.xlp .main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 500;
    padding: 30px 0;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0);
    transition: all 300ms ease-in-out;
}

.xlp .main-header .logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    transform: translateY(-4px);
    transition: all 300ms ease-in-out;
}

.xlp .main-header .logo:after {
    content: "szkoła zdalnego nauczania";
    font-weight: 600;
    font-size: 14px;
    position: absolute;
    bottom: -25px;
    transition: all 300ms ease-in-out;
    opacity: 1;
    width: 100%;
}

.xlp .main-header .logo .brand {
    max-height: 45px;
    margin-right: 20px;
    transition: all 300ms ease-in-out;
}

.xlp .main-header .logo .tagline {
    font-size: 52px;
    font-weight: 600;
    transition: all 300ms ease-in-out;
}

.xlp .main-header .logo .tagline i {
    font-style: normal;
}

.xlp .main-header .logo .additional-brand {
    font-size: 24px;
}

.xlp .main-header .main-nav {
    float: right;
}

.xlp .main-header .main-nav ul {
    padding: 0;
    margin: 0;
}

.xlp .main-header .main-nav ul li {
    float: left;
    padding: 0;
    margin: 0 10px;
    list-style-type: none;
}

.xlp .main-header .main-nav ul li:last-child {
    margin-right: 0;
}

.xlp .main-header .main-nav ul li a {
    margin: 0;
    font-size: 1rem;
    padding: 11px 36px 11px 36px;
}


/* sticky header */

.xlp .main-header.sticky {
    padding: 15px 0;
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 1);
}

.xlp .main-header.sticky .logo {
    transform: translateY(0)
}

.xlp .main-header.sticky .logo:after {
    opacity: 0;
}

.xlp .main-header.sticky .logo .brand {
    max-height: 35px;
}

.xlp .main-header.sticky .logo .tagline {
    font-size: 38px;
    transition: all 300ms ease-in-out;
}


/* typography */

.xlp p.bigger {
    font-size: 24px;
    line-height: 1.414;
}

.xlp ul.bigger {
    font-size: 24px;
    line-height: 1.414;
    font-weight: 300;
    color: #212529;
}

.xlp .nobr {
    white-space: nowrap;
}

.xlp h1 {
    font-size: 54px;
    font-weight: 600;
}

.xlp h2 {
    font-size: 50px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .xlp h2 {
        font-size: 30px;
        line-height: 36px;
    }
    .xlp .products .col-xs-6 {
        flex-basis: calc(50% - 15px);
        max-width: calc(50% - 15px);
    }
    .xlp .single-box .content h3 .spec {
        display: none;
    }
    .xlp .single-box .content.product .price {
        font-size: 16px !important;
    }
}

@media (max-width: 420px) {
    .xlp .products .col-xs-6 {
        flex-basis: 100%;
        max-width: 100%;
    }
}


/* colors */

.xlp .bg-white {
    background: #fff;
    position: relative;
    overflow: hidden;
}

.xlp .bg-gray {
    background: #f3f3f3;
    position: relative;
    overflow: hidden;
}

.xlp .bg-dgray {
    background: #e9e9e9;
    position: relative;
    overflow: hidden;
}

.xlp .blog.bg-gray:before {
    content: url("../img/section-wave-white.svg");
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    width: inherit;
    z-index: 0
}

.xlp .products.bg-gray:before {
    content: url("../img/section-wave-dgray.svg");
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    width: inherit;
    z-index: 1
}

.xlp .packages.bg-dgray:before {
    content: url("../img/section-wave-lgray.svg");
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    width: inherit;
    z-index: 0
}


/* icons */

.xlp .icon-graduation {
    width: 65px;
}


/* sections */

.xlp .start {
    padding: 100px 0;
    min-height: 660px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.xlp .start .parallax {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.xlp .start .personAnim svg {
    max-height: 480px;
    margin-top: 100px;
}

.xlp .group {
    padding: 60px 0 100px;
    min-height: 580px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.xlp .soon-text {
    position: absolute;
    top: 30px;
    right: 0;
    font-size: 40px;
    font-weight: 600;
}

.xlp .single-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.xlp .single-box .image-rounded {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    position: relative;
    overflow: hidden;
    z-index: 15;
}

.xlp .single-box .image-rounded img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 105%;
    height: 105%;
    object-fit: cover;
    transition: all 300ms ease-in-out;
}

.xlp .single-box .image-rounded:hover img {
    width: 115%;
    height: 115%;
    object-fit: cover;
}

.xlp .single-box .image-rounded.light-border {
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.xlp .blog .single-box .content {
    box-shadow: 20px 20px 60px #ededed, -20px -20px 60px #ffffff;
}

.xlp .single-box .content {
    background: #fff;
    border-radius: 20px;
    padding: 130px 30px 30px 30px;
    margin-top: -100px;
    text-align: center;
    transition: all 300ms ease-in-out;
    position: relative;
}

.xlp .products .single-box .content a {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #000 !important;
}

.xlp .single-box .content h3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    font-size: 19px;
    text-align: center;
    padding: 0;
    line-height: 1.414;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    height: 72px;
    font-weight: 600;
    padding: 15px 0;
}

.xlp .single-box .content h3 .spec {
    font-size: 14px;
    font-weight: 300;
    padding: 8px 0;
}

.xlp .single-box .content h3 a {
    color: #000;
    transition: all 200ms ease-in-out;
    font-weight: 700;
}

.xlp .single-box .content h3 a:hover {
    color: #0082fa;
    text-decoration: none;
}

.xlp .single-box .content p {
    padding: 10px 20px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: 72px;
}

.xlp .single-box .content.product {
    padding: 30px;
    margin: 0;
    width: 100%;
}

.xlp .single-box .content.product p {
    -webkit-line-clamp: 2;
}

.xlp .single-box .content.product .image-product {
    max-width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    margin-bottom: 0;
    position: relative;
    top: -10px;
}

.xlp .single-box .content.product .image-product img {
    width: 100%;
}

.xlp .single-box .content.product .price {
    font-size: 24px;
    width: 100%;
    text-align: center;
    font-weight: 600;
    display: flex;
    justify-content: center;
}

.xlp .single-box:hover .content {
    box-shadow: 20px 20px 60px #cfcfcf, -20px -20px 60px #ffffff;
}

.xlp .single-package {
    background: #fff;
    border-radius: 20px;
    padding: 50px 30px;
    transition: all 300ms ease-in-out;
}

.xlp .single-package:hover {
    box-shadow: 20px 20px 60px #cfcfcf, -20px -20px 60px #ffffff;
}

.xlp .single-package .steps-icon {
    width: 80px;
    height: 65px;
    object-fit: contain;
    margin: 0 auto 15px;
}

.xlp .single-package .product-photo {
    max-height: 320px;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.xlp .single-package .classic-list {
    padding: 0;
}

.xlp .single-package .classic-list li {
    line-height: 1.5;
    font-weight: 300;
    position: relative;
    list-style-type: none;
    padding-left: 20px;
}

.xlp .single-package .classic-list li:before {
    content: '-';
    position: absolute;
    left: 0;
    top: 11px;
    transform: translateY(-50%);
}

.xlp .single-package.related-package {
    position: relative;
}

.xlp .single-package.related-package:after {
    content: url("../img/related-star.svg");
    width: 30px;
    position: absolute;
    top: 30px;
    right: 30px;
}

.xlp .package-contact ul {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    margin-top: 30px;
}

.xlp .package-contact ul li {
    list-style: none;
    float: left;
    margin: 0 20px;
}


/* owl carousel */


/* .owl-carousel,
.owl-carousel .owl-stage-outer,
.owl-carousel .owl-stage-outer .owl-stage, */

.owl-carousel .owl-item {
    overflow: visible;
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.owl-carousel .owl-item:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

.owl-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 30px;
}

.owl-carousel .owl-dots .owl-dot {
    background: #dddddd;
    width: 14px;
    height: 14px;
    border-radius: 100%;
    margin: 0 4px;
    outline: none;
    transition: all 200ms ease-in-out;
}

.owl-carousel .owl-dots .owl-dot.active {
    background: #0082fa;
}


/* letters && lines && animations */

.xlp .personAnim {
    position: relative;
    z-index: 2;
}

.xlp .line,
.letter {
    position: absolute;
}

.xlp .letter.letter-e {
    top: 50%;
    left: -120px;
    transform: translateY(-50%);
}

.xlp .letter.letter-x {
    top: 50%;
    left: -120px;
    transform: translateY(-50%);
}

.xlp .line.line-left {
    left: 3vw;
    bottom: 0;
    width: 30vw;
}

.xlp .line.line-right {
    left: 80vw;
    bottom: 3vh;
    width: 25vw;
}

.xlp .start .line.line-dotted {
    left: 50vw;
    top: 18vh;
    width: 40vw;
    z-index: 2;
}

.xlp .line.line-dotted {
    left: 0;
    top: 15vh;
    width: 50vw;
}

.xlp .line-background {
    position: relative;
}

.xlp .line.line-illustration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.xlp .parallax {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.xlp .parallax .par {
    position: absolute;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: top center;
}

.xlp .parallax .par.layer1 {
    top: 20%;
    left: 28%;
}

.xlp .parallax .par.layer2 {
    top: 30%;
    left: 70%
}

.xlp .parallax .par.layer4 {
    top: 10vh;
    left: -5vw
}

.xlp .parallax .par.layer5 {
    top: 85vh;
    left: 93vw
}

.xlp .parallax .par.layer6 {
    bottom: 100vh;
    left: -5vw
}

.xlp .parallax .par.layer7 {
    bottom: 40vh;
    left: 93vw
}

.xlp .parallax .par.layer8 {
    top: 24vh;
    left: 15vw
}

.xlp .parallax .par.layer9 {
    bottom: 20vh;
    left: 93vw
}


/* footer */

.xlp .main-footer {
    background: #fff;
    padding: 40px 0;
}

.xlp .main-footer .footer-logo {
    max-height: 35px;
}

.xlp .main-footer a {
    width: 46px;
    margin: 0 7px;
    filter: grayscale(1);
    transition: .1s ease;
    display: inline-flex;
}

.xlp .main-footer a:hover {
    filter: grayscale(0);
    transform: translateY(-6px);
}


/* responsive */

@media (max-width: 1440px) {
    .xlp .main-header .logo .brand {
        max-height: 35px;
    }
    .xlp .main-header .logo .tagline {
        font-size: 42px;
    }
    .xlp .main-header .logo:after {
        font-size: 14px;
    }
    .xlp .main-header .main-nav ul li a {
        font-size: 1rem;
    }
}

@media (max-width: 1280px) {
    .xlp .main-header .logo .tagline img {
        display: block !important;
    }
    .xlp .main-header .logo .tagline i {
        display: none !important;
    }
    .xlp .main-header .logo:after {
        display: none;
    }
}

@media (max-width: 1200px) {
    .xlp .main-header {
        padding-bottom: 0;
        background: #fff;
    }
    .xlp .main-header.active {
        box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
    }
    .xlp .main-header .hamburger {
        float: right;
    }
    .xlp .main-header.sticky {
        padding-bottom: 0;
    }
    .xlp .main-header .logo:after {
        display: none;
    }
    .xlp .main-header .nav-list {
        max-height: 0;
        transition: max-height 0.15s ease-out;
        overflow: hidden;
        margin-top: 20px;
    }
    .xlp .main-header .nav-list.is-visible {
        max-height: 500px;
        transition: max-height 0.25s ease-in;
    }
    .xlp .main-header .main-nav {
        width: 100%;
        border-top: 2px solid #f3f3f3;
        border-bottom: 2px solid #f3f3f3;
        padding: 30px 0;
    }
    .xlp .main-header .main-nav ul li {
        width: 100%;
        margin: 15px;
    }
    .xlp .main-header .main-nav ul li a {
        width: calc(100% - 30px);
    }
}

@media (min-width: 1200px) and (max-width: 1440px) {
    .xlp .main-header .main-nav ul li a {
        padding: 11px 20px;
        font-size: .9rem;
    }
}

@media (max-width: 992px) {
    .xlp .single-package {
        text-align: center;
    }
    .xlp .single-package .classic-list {
        max-width: 60%;
        margin: 0 auto;
        text-align: initial;
    }
}

@media (max-width: 720px) {
    .xlp .parallax .par.layer1 {
        top: 20%;
        left: -20%;
    }
}

@media (max-width: 480px) {
    .xlp .single-package .classic-list {
        max-width: 100%;
    }
}