/*

Theme Name: RoletySmart
Description: Landing Page RoletySmart
Author: StudioGo
Author URI: https://www.studiogo.pl/
Version: 1.0

*/

@font-face {
    font-family: Lato;
    src: URL(fonts/Lato-Regular.ttf);
}

@font-face {
    font-family: Lato-Bold;
    src: URL(fonts/Lato-Bold.ttf);
}

@font-face {
    font-family: Lato-Black;
    src: URL(fonts/Lato-Black.ttf);
}

@font-face {
    font-family: Inter;
    src: URL(fonts/Inter-Regular.ttf);
}

html, body {
    max-width: 100vw!important;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.noPadding {
    padding-top: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
 }

h1 {
    font-family: 'Lato-Black';  
    font-size: 36px;
    color: #165F7A;
}

.wkrotce-otwarcie {
    font-family: 'Lato-Bold';
    font-size: 56px;
    color: #33BFF2;
}

.skorzystaj {
    font-family: 'Lato-Bold';
    font-size: 32px;
    margin-bottom: 0px;
    color: #1E1E1E;
}

.w-dniu {
    font-family: 'Lato';
    font-size: 16px;
    color: #1E1E1E;
}

.strzalki, .promocja-info, .do, .dwa, .zero, .procent {
    display: inline-block;
}

.strzalki img {
    max-width: 58px;
    margin-top: 1em;
    margin-left: 1em;
}

.promocja {
    min-width: 420px;
}

.promocja-info {
    margin-top: -4em;
}

.do {
    font-family: 'Lato-Black';
    font-size: 64px;
    color: #33BFF2;
    -webkit-text-stroke: 1px #FFFFFF;
}

.dwa, .zero, .procent {
    position: relative;
    font-family: 'Lato-Black';
}

.dwa {
    font-size: 146px;
    letter-spacing: -0.2em;
    color: #165F7A;
    -webkit-text-stroke: 1px #ffffff00;
    z-index: 3;
}

.zero {
    font-size: 146px;
    letter-spacing: -0.3em;
    color: #165F7A;
    -webkit-text-stroke: 1px #FFFFFF;
    z-index: 2;
}

.procent {
    font-size: 186px;
    color: #165F7A;
    -webkit-text-stroke: 1px #FFFFFF;
    z-index: 1;
}

.zapisz-sie {
    display: none;
    max-width: 150px;
    padding: 10px;
    margin: auto;
    background: #165F7A;
    box-shadow: 0px 0px 48px rgba(0, 0, 0, 0.20);
    border-radius: 0px 20px 20px 20px;
}

.info a, a:hover, .info a:hover {
    color: #FFFFFF;
    text-decoration: none;
}

.newsletter {
    display: block;
}

.newsletter-mobile {
    display: none;
}

.img-newsletter {
    max-width: 100%;
    border-width: 0px 27px 27px 0px;
    border-style: solid;
    border-color: #165F7A;
    border-radius: 0px 176px 176px 0px;
}

.formularz {
    background-color: #FFFFFF;
    margin-left: -28vw;
    border-radius: 0px 176px 176px 0px;
    box-shadow: 0px 4px 100px rgba(0, 0, 0, 0.06);
    padding: 3vw;
}

.formularz-naglowek {
    min-width: 400px;
}

.img-zapisz {
    margin-top: -3em;
    display: inline-block;
}

.formularz h2 {
    font-family: 'Lato-Bold';
    font-size: 24px;
    color: #1E1E1E;
    margin-top: -0.5em;
    color: #1E1E1E;
}

.formularz h5 {
    font-family: 'Lato';
    font-size: 16px; 
    margin-bottom: 1em;
    color: #1E1E1E;
    margin-top: 0.3em;
}

input[type=text], input[type=email] {
    width: 100%;
    border: none;
    border-bottom: 1px solid #E5E5E5 !important;
    background-color: #FFFFFF !important;
}

.formularz label {
    font-family: 'Lato' !important;
    font-size: 16px;
    font-weight: 400 !important;
    padding: 15px;
    color: #1E1E1E !important;
}

.formularz label:last-child {
    padding: 30px 10px;
    font-family: 'Lato' !important;
    font-size: 10px;
    color: #000000 !important;
}

input[type=checkbox] {
    margin-right: 10px;
}

input[type=submit] {
    max-width: 150px;
    font-size: 16px;
    font-family: 'Lato';
    padding: 15px 30px !important;
    background-color: #165F7A !important;
    color: #FFFFFF;
    box-shadow: 0px 0px 48px rgba(0, 0, 0, 0.20);
    border: none;
    border-radius: 0px 20px 20px 20px;
}

.napisz {
    margin-top: 4em;
}

.napisz a {
    font-family: 'Inter';
    font-size: 10px;
    color: #D8D8D8; 
}

.napisz a:hover {
    color: #D8D8D8; 
    text-decoration: none;
}

.zdjecie {
    height: 35vw;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border-radius: 176px;
    box-shadow: 0px 0px 48px rgba(0, 0, 0, 0.20);
    text-align: center;
}

.rolety {
    background-image: url(./images/rolety.png);
    margin-top: -5vw;
}

.zaluzje {
    background-image: url(./images/zaluzje.png);
    margin-top: -25vw;
}

.plisy {
    background-image: url(./images/plisy.png);
    margin-top: -20vw;
}

.zdjecie span {
    font-family: 'Lato';
    font-size: 16px;
    text-transform: uppercase;
    color: #103157;
    text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
}

.zdjecie div {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #FFFFFF;
    backdrop-filter: blur(2px);
    border-radius: 19px;
    padding: 8px;
    margin: auto;
    position: relative;
}

.rolety div {
    top: 20vw;
    max-width: 10vw;
    border-radius: 30px;
}

.zaluzje div {
    top: 15vw;
    max-width: 10vw;
}

.plisy div {
    top: 25vw;
    max-width: 10vw;
}

.oferta {
    margin-top: -8vh;
}

.strzalka {
    display: block;
    margin-left: 7vw;
}

.oferta .img-responsive {
    padding: 20px 10px 20px 20px;
}

.oferta h5 {
    font-family: 'Lato-Bold';
    font-size: 12px;
    color: #165F7A;
}

.oferta ul {
    list-style-type: square;
    font-family: 'Lato';
    font-size: 14px;
    text-transform: uppercase;
    color: #103157;
    text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
}

.oferta li {
    padding: 11px 4px;
}

footer {
    margin-top: 1em;
    text-align: center;
    padding: 20px;
}

footer span {
    font-family: 'Lato';
    font-size: 10px;
    color: #000000;
}

/* background */
.ksztalt {
    position: absolute;
    z-index: -10;
}

.ksztalt1 {
    display: block;
    top: 15em;
}

.ksztalt2 {
    top: 24em;
}

.ksztalt3 {
    top: 38vw;
    left: 3em;
}

.ksztalt4 {
    top: 0px;
    left: -2em;
}

.ksztalt5 {
    top: 0px;
}

.ksztalt6 {
    display: block;
    top: -3vw;
}

.ksztalt7 {
    display: none;
}

.ksztalt8 {
    display: none;
}

/* mobile */
@media only screen and (max-width: 767px) {
    .info {
        text-align: center;
    }

    h1 {
        font-size: 36px;
    }
    
    .wkrotce-otwarcie {
        font-size: 16px;
    }
    
    .skorzystaj {
        font-size: 32px;
    }
    
    .w-dniu {
        font-size: 16px;
        margin-left: 8em;
    }

    .promocja {
        min-width: 210px;
    }

    .strzalki {
        display: none;
    }

    .promocja-info {
        margin-top: -0.3em !important;
        margin: auto;
    }

    .do {
        font-size: 36px;
    }
    
    .dwa, .zero {
        font-size: 96px;
    }

    .zero {
        letter-spacing: -0.2em;
    }
    
    .procent {
        font-size: 90px;
    }

    .zapisz-sie {
        display: block;
    }

    .newsletter {
        display: none;
    }

    .newsletter-mobile {
        display: block;
    }

    .formularz {
        margin-left: 0px !important;
        margin-top: -3em;
    }
    
    .formularz label:last-child {
        font-size: 12px;
        color: #BBBBBB !important;
    }
    
    input[type=submit] {
        font-size: 16px;
        display: block; 
        margin: auto !important;
    }

    .napisz {
        text-align: center;
        margin-top: 3em;
        margin-bottom: 2em;
    }

    .zdjecia {
        max-width: 90%;
        left: 5%;
    }

    .zdjecie {
        height: 80vw;
    }
    
    .rolety {
        margin-top: 15vw;
    }
    
    .zaluzje {
        margin-top: -40vw;
    }
    
    .plisy {
        margin-top: -130vw;
    }

    .zdjecie div {
        display: none;
    }

    .oferta {
        max-width: 220px;
        margin-top: 55vw !important;
        margin: auto;
    }

    .strzalka {
        display: none;
    }

    .oferta h5 {
        font-size: 16px;
    }

    .oferta ul {
        font-size: 16px;
    }

    /* background */
    .ksztalt img {
        max-width: 100vw;
    }

    .ksztalt1 {
        display: none;
    }

    .ksztalt2 {
        top: 230vw;
        right: 0;
    }

    .ksztalt3 {
        display: none;
    }

    .ksztalt4 {
        top: 125vw;
    }

    .ksztalt6 {
        display: none;
    }

    .ksztalt7 {
        display: block;
        top: 200vw;
    }

    .ksztalt7 img {
        max-width: 40vw;
    }

    .ksztalt8 {
        display: block;
        top: 118vw;
        right: 0;
    }
}

@media only screen and (min-width: 1600px) {
    .oferta {
        margin-top: -18vh;
    }

    .ksztalt2 {
        left: 3vh;
    }

    .ksztalt3 {
        top: 40vw;
        left: 5.5em;
    }

    .ksztalt6 {
        display: block;
        top: 6vw;
    } 
}

@media only screen and (max-width: 1167px) {
    .formularz {
        margin-left: -38vw;
    }

    .img-zapisz {
        max-width: 70px;
        margin-left: -1em;
    }

    .oferta {
        margin-top: 10vh;
    }

    .ksztalt1 {
        margin-top: 6em;
    }

    .ksztalt2 {
        margin-top: 6em;
    }

    .ksztalt3 {
        top: 32vw;
        left: 2.9em;
    }
}

@media only screen and (max-width: 380px) {
    .w-dniu {
        margin-left: 0em;
    }

    .img-zapisz {
        display: none;
    }

    .ksztalt2 {
        top: 320vw;
    }

    .ksztalt2 img {
        max-width: 40vw;
    }

    .ksztalt4 img, .ksztalt8 img {
        max-width: 70px;
    }

    .ksztalt4 {
        top: 165vw;
		left: 0;
    }

    .ksztalt7 {
        top: 320vw;
    }

    .ksztalt7 img {
        max-width: 30vw;
    }

    .ksztalt8 {
        top: 150vw;
    }
}

@media only screen and (max-width: 500px) {
    .ksztalt2 {
        top: 270vw;
    }

    .ksztalt2 img {
        max-width: 40vw;
    }

    .ksztalt7 {
        top: 260vw;
    }

    .ksztalt7 img {
        max-width: 35vw;
    }
}

@media only screen and (max-width: 380px) {
    .w-dniu {
        margin-left: 0em;
    }

    .img-zapisz {
        display: none;
    }

    .ksztalt2 {
        top: 320vw;
    }

    .ksztalt2 img {
        max-width: 40vw;
    }

    .ksztalt4 img, .ksztalt8 img {
        max-width: 70px;
    }

    .ksztalt4 {
        top: 165vw;
		left: 0;
    }

    .ksztalt7 {
        top: 320vw;
    }

    .ksztalt7 img {
        max-width: 30vw;
    }

    .ksztalt8 {
        top: 150vw;
    }
}

@media only screen and (max-width: 300px) {
    .ksztalt2 {
        top: 360vw;
    }

    .ksztalt4 {
        top: 200vw;
    }

    .ksztalt7 {
        top: 380vw;
    }

    .ksztalt8 {
        top: 180vw;
    }
}

@media only screen and (max-width: 260px) {
	.ikona {
        display: none;
    }
	
    .ksztalt2 {
        display: none;
    }

    .ksztalt4 {
        display: none;
    }

    .ksztalt7 {
        display: none;
    }

    .ksztalt8 {
        display: none;
    }
}