@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;600;700;800;900&display=swap');


body, section, input, h1, h2, h3, h4, h5, ul, ul li{
    padding: 0;
    margin: 0;
    list-style: none;
    border: none;
    font-weight: normal;
  -webkit-appearance: none;
}


html, body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  -webkit-appearance: none;
}

html::-webkit-scrollbar, .caselist::-webkit-scrollbar {
    width: 0;
    height: 0;
}


html {
    overflow-x: hidden;
  -webkit-appearance: none;
}

a, img {
    transition: all 0.4s;
    -ms-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    text-decoration: none;
}

body::-webkit-scrollbar {
    width: 0.3em;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

body::-webkit-scrollbar-thumb {
    background-color: #000;
    outline: 0px solid #000;
}


body::-moz-scrollbar {
    width: 0.3em;
}

body::-moz-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

body::-moz-scrollbar-thumb {
    background-color: #c8baad;
    outline: 0px solid #000;
}

::selection {
    background: #fff;
    color: #000;
}
::-moz-selection {
    background: #fff;
    color: #000;
}



body {
    overflow-x: hidden;
    -webkit-appearance: none;
    font-family: Nunito;
    background: #fff;
    color: #333;
}


.clear {
    clear: both;
}


.wrap {
    display: block;
    margin: 0 auto;
    width: 85%;
}


.homebox {
    display: block;
    padding: 2vw 0;
    background: #FFFAFF url(img/pattern1.png) center center no-repeat;
    background-size: 90%;
    overflow-x: hidden;
    width: 100vw;
}


.logo {
    display: block;
    float: left;
    width: 7.5vw;
    height: 5vw;
    background: url(img/logo.png) top left no-repeat;
    background-size: cover;
}


.topmenu {
    display: block;
    float: left;
    width: 80%;
    text-align: center;
    margin: 1vw 0 0 0;
}

.topmenu ul li {
    display: inline-block;
}

.topmenu ul li a {
    display: block;
    color: #000;
    font-size: 1.3vw;
    margin: 0 1vw;
}

.topmenu ul li a:hover {
    color: #8B559D;
}


.langer {
    display: block;
    width: 10%;
    float: right;
    text-align: right;
}


.langer a {
    display: inline-block;
    color: #666;
    font-size: 1.3vw;
    padding: 0.5vw 1vw;
    margin: 0.5vw 0;
    cursor: pointer;
}


.langer a.activelang {
    background: #F2E5F6;
    color: #000;
    border-radius: 0.5vw;
}


.hometext {
    display: block;
    width: 45%;
    float: left;
    padding: 7vw 0;
}


.homeimg {
    display: block;
    float: right;
    width: 50%;
}


.hometext h1 {
    display: block;
    color: #000;
    font-size: 4.5vw;
    line-height: 4.5vw;
    font-weight: 700;
}

.hometext p {
    display: block;
    font-size: 1.4vw;
    line-height: 2.3vw;
    color: #000;
    font-weight: 400;
    margin: 2vw 0 3vw 0;
    width: 85%;
}


.butter {
    background: #A372B5 url(img/arrow.svg) center right no-repeat;
    background-position: 90% center;
    background-size: 1.1vw;
    color: #fff;
    font-size: 1.5vw;
    border-radius: 0.5vw;
    padding: 1vw 4vw 1vw 1.5vw;
}

.butter:hover {
     background: #8B559D url(img/arrow.svg) center right no-repeat;
     background-position: 92% center;
}



.const-left input[type=submit] {
    background: #A372B5 url(img/arrow.svg) center right no-repeat;
    cursor: pointer;
    width: 100%;
    background-position: 90% center;
    background-size: 1.1vw;
    color: #fff;
    font-size: 1.5vw;
    border-radius: 0.5vw;
    padding: 1vw 4vw 1vw 1.5vw;
}


.const-left input[type=submit]:hover {
     background: #8B559D url(img/arrow.svg) center right no-repeat;
     background-position: 92% center;
}





.homeimg img {
    display: block;
    width: 100%;
    height: auto;
}


footer {
    display: block;
    padding: 4vw 0;
    background: #FFFAFF;
}


footer .activelang {
        width: 104%;
}

.preims, .gifts, .constructor {
    display: block;
    padding: 6vw 0;
}


h2 {
    display: block;
    text-align: center;
    color: #000;
    font-size: 3.4vw;
    font-weight: 700;
    margin: 0 0 2vw 0;
}


.preim {
    display: block;
    width: 25%;
    float: left;
    text-align: center;
    margin: 2vw 0;
    min-height: 20vw;
}

.gift {
    display: block;
    width: 33%;
    float: left;
    text-align: center;
    margin: 2vw 0;
    min-height: 16vw;
    cursor: pointer;
}


.preim img {
    display: block;
    margin: 0 auto 1vw auto;
    height: 5vw;
}

.preim h3, .gift h3 {
    display: block;
    width: 80%;
    margin: 0 auto;
    color: #000;
    font-size: 2vw;
    line-height: 2.5vw;
    font-weight: 700;
}

.preim p, .gift p {
    display: block;
    width: 80%;
    margin: 1vw auto;
    font-size: 1.2vw;
    line-height: 2vw;
    color: #666;
}

.stepes {
    background: #FFFAFF url(img/pattern2.png) center center no-repeat;
    background-size: 90%;
}

.podz {
    display: block;
    text-align: center;
    font-size: 1.2vw;
    line-height: 2vw;
    color: #666;
    margin: -1.5vw 0 4vw 0;
}

.gift img {
    display: block;
    margin: 0 auto;
    width: 85%;
    transform: rotateZ(-10deg);
}

.gift:hover img {
    transform: rotateZ(0deg);
}



.gift span {
    background: #B88AB4;
    color: #fff;
    font-size: 1vw;
    font-weight: 700;
    position: absolute;
    margin: -15vw 7.5vw;
    padding: 0.2vw 0.7vw;
    border-radius: 0.3vw;
}


.imgboxer {
    margin-bottom: 4vw;
}

.imgboxer img {
    box-shadow: 0 1vw 2vw rgba(0,0,0,0.07);
}





.owl-nav {
    font-size: 8vw !important;
    color: #B88AB4;
}

.owl-next {
    position: absolute !important;
    right: -4vw !important;
    margin-top: -22vw !important;
}

.owl-prev {
    position: absolute !important;
    left: -4vw !important;
    margin-top: -22vw !important;
}


.owl-nav button:hover {
    background: none !important;
    color: #8B559D !important;
}



/* ----- Overlay ---- */

.overlayd {
    display: none;
    position: fixed;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 500;
    width: 100%;
}

.popup {
    display: block;
    background: #fff;
    width: 30vw;
    padding: 2vw 2vw;
    border-radius: 1vw;
    margin: 5vw auto;
}

.popname {
    display: block;
    font-weight: 800;
    font-size: 2vw;
    color: #444;
    float: left;
}


.close {
    display: block;
    height: 2vw;
    float: right;
    background-size: 1.5vw;
    background: url(img/close.svg) center center no-repeat;
    width: 2vw;
    cursor: pointer;
}

.popup form input[type=text] {
    display: block;
    font-size: 1vw;
    border: 1px rgba(0,0,0,0.15) solid;
    border-radius: 0.5vw;
    padding: 1vw 0 1vw 5%;
    outline: none;
    margin: 1vw 0;
    width: 95%;
}

.popup form input[type=submit] {
    display: block;
    width: 101%;
    background: none;
    font-size: 1.2vw;
    padding: 1.2vw 0;
    border-radius: 0.5vw;
    color: #fff;
    outline:none;
    background: #A372B5;
    cursor: pointer;
}

.popup form input[type=submit]:hover {
    opacity: 0.8;
}


.warning-ok img {
    display: block;
    width: 10vw;
    margin: 2vw auto;
}

.warning-ok span {
    display: block;
    font-size: 1.5vw;
    font-weight: 700;
    text-align: center;
}


.const-left {
    display: block;
    width: 40%;
    float: left;
}


.const-right {
    display: block;
    float: right;
    width: 50%;
}


.const-left h2 {
    text-align: left;
}


.poder {
    display: block;
    color: #999;
    font-size: 1.4vw;
    font-weight: 600;
    padding: 2vw 0 1vw 0;
}

.const-left input[type=text] {
    display: block;
    font-size: 1.3vw;
    border: 1px #E4E4E4 solid;
    padding: 1.2vw 5%;
    width: 90%;
    color: #666;
    outline: none;
}

.inselect {
    display: block;
    width: 100%;
    overflow-x: hidden;
    border: 1px #E4E4E4 solid;
    background: url(img/open.svg) center right no-repeat;
    background-position: 95% center;
    background-size: 1.2vw;
    color: #666;
}


.inselect select {
    display: block;
    font-size: 1.3vw;
    padding: 1.2vw 5%;
    width: 140%;
    border: none;
    outline: none;
    background: none;
}



.avaboxer {
    display: block;
    border: 2px #A372B5 dotted !important;
    width: 100%;
    overflow: hidden;
    margin: 0.5vw 2% 0.5vw 0;
        background: url(img/cloud.svg) center center no-repeat;
    background-position: 95% center;
    background-size: 2vw;
}

.uploades {
    display: block;
    outline: none;
    font-size: 0;
    width: 180%;
    height: 3.7vw;
    background: none;
    cursor: pointer;
    border: none;
    margin: 0px 0 0 -40%;
    position: relative;
    border: none;
}

.picnames {
    display: block;
    margin: -2.2vw 0 1.3vw 2vw;
    color: #A372B5;
    font-weight: 600;
    overflow: hidden;
}


.const-left .butter {
    max-width: 40%;
    cursor: pointer;
    margin: 4vw 0;
    float: right;
}






.prevstep {
    background:  url(img/arrow2.svg) center right no-repeat;
    background-position: 0 center;
    background-size: 1.1vw;
    color: #A372B5;
    font-size: 1.5vw;
    border-radius: 0.5vw;
    padding: 1vw 1.5vw 1vw 2vw;
    margin: 4vw 0;
    max-width: 40%;
    cursor: pointer;
    float: left;
}

.const-left h3 {
    display: block;
    font-weight: 700;
    font-size: 2vw;
    margin: 5vw 0 0 0;
}



.play {
    display: block !important;
}


.stop {
    display: none !important;
}




.step2, .step3, .step4, .step5 {
    display: none;
}





/* ------------- Constructor details --------------- */

.imagev1 {
    display: block;
    width: 25vw;
    margin: 5vw auto 2vw auto;
    height: 32vw;
    border: 1.2vw #000 solid;
    box-shadow: 0 2vw 3vw rgba(0,0,0,0.07) !important;
    padding: 1vw;
}


.bgimage1 {
    display: block;
    background: #d9d9d9;
    width: 100%;
    height: 100%;
}


.photodev img {
    display: block;
    margin: 0 auto;
    padding: 4vw 0 0 0;
    width: 50%;
}


.fotodata {
    display: block;
    width: 100%;
    padding: 1vw 0 0 0;
    height: 2vw;
    background: url(img/data.png) center center no-repeat;
    background-size: 6vw;
}

.fototext {
    display: block;
    width: 100%;
    padding: 0vw 0 0 0;
    height: 5vw;
    background: url(img/podpis.png) center center no-repeat;
    background-size: 5.5vw;
}

.primertext {
    display: block;
    text-align: center;
    font-size: 1.2vw;
    line-height: 2vw;
    color: #666;
}


.fotka3 {
    display: block;
    width: 100%;
    height: 100%;
    background: url(img/grup.png) center center no-repeat;
    background-size: 90%;
}

.fotka1 {
    display: block;
    width: 100%;
    height: 100%;
    background: url(img/grup-notext.png) center center no-repeat;
    background-size: 90%;
}

.fotka2 {
    display: block;
    width: 100%;
    height: 100%;
    background: url(img/grup-onlydata.png) center center no-repeat;
    background-size: 90%;
}

.fotka5 {
    display: block;
    width: 100%;
    height: 100%;
    background: url(img/grup-data.png) center center no-repeat;
    background-size: 90%;
}

.fotka777 {
    display: block;
    width: 100%;
    height: 100%;
    background: url(img/fullheight.png) center center no-repeat !important;
    background-size: cover !important;
}


.fh2 {
    display: block;
    width: 100%;
    height: 100%;
    background: url(img/fh2.png) center center no-repeat !important;
    background-size: cover !important;
}



.fotka000 {
    display: block;
    width: 100%;
    height: 100%;
    background: url(img/imgone1.png) center center no-repeat;
    background-size: 100%;
}



.gray {
    background: #d9d9d9 !important;
}

.white {
    background: #fff !important;
}

.pink {
    background: #fceffb !important;
}

.blue {
    background: #b3c9cf !important;
}

.yellow {
    background: #fefdce !important;
}




#fotodata1, #fotodata2, #fotodata3, #fotodata4, #fotodata5, #fotodata6, #fototext1, #fototext2, #fototext3, #fototext4, #fototext5, #fototext6 {
    display: none;
}


.moneybox {
    display: block;
    font-weight: 700;
    font-size: 1.3vw;
}

.moneybox span {
    color: #A372B5;
}


.imagecat {
    width: 90% !important;
    padding: 8vw 0 0 0 !important;
}




.twodate888 {
    display: none;
    height: 2vw;
    background: url(img/date36.png) center center no-repeat;
    background-size: 40%;
    width: 100%;
    margin: -6vw 0 0 0;
}

.twonadpis888 {
    display: none;
    background: url(img/podpis36.png) center center no-repeat;
    height: 3vw;
    background-size: 40%;
    width: 100%;
}


/* ------------------------------------------------------------------------------------------------------------------------- */










@media (max-width: 700px) {


.topmenu {
    display: none;
}

.logo {
    width: 15vw;
    height: 10vw;
}

.langer {
    width: 30%;
    }

    .langer {
    display: block;
    width: 30%;
}

.langer a {
    font-size: 4vw;
    padding: 1vw 2vw;
    }

.hometext {
    width: 70%;
    padding: 14vw 0;
}

.hometext h1 {
    font-size: 9vw;
    line-height: 10vw;
}

.hometext p {
    font-size: 3.4vw;
    line-height: 5vw;
    margin: 4vw 0 6vw 0;
    width: 100%;
}

.butter, .butter:hover, .const-left input[type=submit], .const-left input[type=submit]:hover {
    background: #A372B5 url(img/arrow.svg) center right no-repeat;
    background-size: 2.5vw;
    background-position: 90% center;
    font-size: 4vw;
    border-radius: 1vw;
    padding: 2.3vw 8vw 2.3vw 4vw;
}



.homeimg {
    right: 0%;
    position: absolute;
    overflow-x: hidden !important;
    width: 47%;
}


.homeimg img {
    width: 50vw;
    margin: 10vw 0% 0 18%;
    height: auto;
}

.homebox {
    padding: 4vw 0;
    background: #FFFAFF url(img/pattern1.png) top right no-repeat;
    background-size: 200%;
}


.preims {
    padding: 12vw 0;
}

h2 {
    font-size: 7vw;
    margin: 0 0 4vw 0;
}

.preim {
    width: 49%;
    float: left;
    margin: 7vw 0;
    min-height: auto;
}

.preim img {
    margin: 0 auto 2vw auto;
    height: 15vw;
}

.preim h3, .gift h3 {
    width: 90%;
    font-size: 4vw;
    line-height: 5vw;
}

.preim p, .gift p {
    width: 90%;
    margin: 2vw auto;
    font-size: 3vw;
    line-height: 4.5vw;
        height: 5vw;
}

.podz {
    font-size: 3vw;
    line-height: 4vw;
    margin: -3vw 0 0 0;
}

.gift {
    width: 100%;
    float: none;
    margin: 8vw 0;
    min-height: auto;
}

.gift span {
    background: #B88AB4;
    color: #fff;
    font-size: 3.5vw;
    font-weight: 700;
    position: absolute;
    margin: -45vw 20vw;
    min-width: 17vw;
    padding: 0.5vw 0.7vw;
    text-align: center;
    border-radius: 1vw;
}


.imgboxer {
    margin: 4vw 0;
}


.owl-nav {
    display: none !important;
}


.popup {
    display: block;
    background: #fff;
    width: 80vw;
    padding: 4vw 4vw;
    border-radius: 1vw;
}

.popname {
    display: block;
    font-weight: 800;
    font-size: 6vw;
    margin: 0 0 3vw 0;
}

.close {
    display: block;
    height: 5vw;
    float: right;
    background-size: 5vw;
    width: 5vw;
}

.popup form input[type=text] {
    display: block;
    font-size: 3.5vw;
    border: 1px rgba(0,0,0,0.15) solid;
    border-radius: 0.5vw;
    padding: 2vw 0 2vw 5%;
    outline: none;
    margin: 4vw 0;
    width: 95%;
}

.popup form input[type=submit] {
    display: block;
    width: 101%;
    background: none;
    font-size: 4vw;
    padding: 3vw 0;
    border-radius: 1vw;
    color: #fff;
    outline: none;
    background: #B88AB4;
    cursor: pointer;
}

.warning-ok img {
    display: block;
    width: 30vw;
}

.warning-ok span {
    font-size: 5vw;
}


.cardpetinfo85 {
    top: 67%;
}


.const-left, .const-right {
    float: none;
    width: 100%;
    margin: 0 0 4vw 0;
}

.poder {
    font-size: 3.5vw;
    padding: 3vw 0 2vw 0;
}

.const-left input[type=text] {
    font-size: 3.8vw;
    padding: 2.5vw 5%;
}

.inselect select {
    font-size: 3.8vw;
    padding: 2.5vw 5%;
}

.inselect {
    background-size: 3.5vw;
}

.picnames {
    margin: -4.7vw 0 2vw 5vw;
    font-weight: 600;
}

.uploades {
    height: 7.9vw;
    }

.avaboxer {
    background-size: 6vw;
}

.prevstep {
    font-size: 4vw;
    border-radius: 1vw;
    border-radius: 4vw;
    background-size: 2vw;
    padding: 2vw 8vw 2vw 4vw;
}


.imagev1 {
    display: block;
    width: 50vw;
    margin: 10vw auto 4vw auto;
    height: 64vw;
    border: 2.4vw #000 solid;
    padding: 2vw;
}



.photodev img {
    padding: 8vw 0 0 0;
    }


.fotodata {
    padding: 2vw 0 0 0;
    height: 4vw;
    background-size: 12vw;
}

.fototext {
    display: block;
    width: 100%;
    padding: 0vw 0 0 0;
    height: 10vw;
    background: url(img/podpis.png) center center no-repeat;
    background-size: 11vw;
}

.const-left h3 {
    font-size: 4vw;
    margin: 10vw 0 0 0;
}

.primertext {
    font-size: 2.4vw;
    line-height: 4vw;
}


.moneybox {
   font-size: 4vw;
}

.hometext {
    z-index: 3;
    width: 60%;
}


.imagecat {
    padding: 8vw 0 0 0 !important;
}


footer .activelang {
    width: 125%;
    text-align: center;
}



.twodate888 {
    height: 4vw;
    background: url(img/date36.png) center center no-repeat;
    background-size: 40%;
    width: 100%;
    margin: -12vw 0 0 0;
}

.twonadpis888 {
    background: url(img/podpis36.png) center center no-repeat;
    height: 6vw;
    background-size: 40%;
    width: 100%;
}



}







/* --------- */