body {
    width: 100%;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    background-color:#fdf8f7;
    overflow-x: hidden;
}

/* h1{
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    font-size: 4.2vw;
    text-align: center;
    line-height: 3.4vw;
    color: rgba(255, 255, 255, 0.7);
    padding: 7.5vw 0 20px 0;
} */

h1 {
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    font-size: 4.2vw;
    text-align: center;
    line-height: 3.4vw;
    color: rgba(255, 255, 255, 0.8);
    padding: 1.1vw 0 15.1vw 0;
}

h2{
    font-size: 22px;
    font-weight: 400;
    line-height: 32px;
    margin-top: 0px;
    margin-bottom: 15px;
}

h3{
    font-family: 'Jost', sans-serif;

}

.data{
    font-weight: 500;
    font-size: 19px;
}

#header{
            /* background-image: url(../img/bg-hader.jpg); */
    background-color: rgba(82, 52, 55, 0.31);
    height: 50.5vw;
    min-height: 700px;
    background-position: top center;
    margin-bottom: -2px;
    z-index: 1;
    position: absolute;
    top: 0;
    margin: auto;
    width: 100%;
}

.carousel {
    position: relative;
    height: 50.5vw;
    overflow: hidden;
    width: 100%;
    min-height: 700px;
}

.menu{
    width: 100%;
    display: flex;
    padding: 10px 0 0 0;
}

.menu ul{
    float: left;
    padding: 20px 51px 24px 52px;
    font-size: 17px;
}

.menu ul li{
    float: left;
    padding: 20px 30px 24px 30px;
    font-size: 17px;
    list-style-type: none;
}

.menu ul li a{
    color: #ffdfe2;
}

.menu ul li a:hover{
    color: #fff;
    transition: 0.3s;
}

.menu ul .tittle-merryd{
    color: #fff !important;
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    font-size: 41px;
    padding: 0px 108px 10px 108px;
    list-style-type: none;
}

.menu ul .tittle-merryd a{text-decoration: none !important; color: #fff !important;}

.menu ul .tittle-merryd span{
    color: #ffdfe2;
}

.tegs{
    font-size: 18px;
    color: #fff;
    font-weight: 300;
    text-align: center;
    padding: 20px 0 40px 0;
    border-top: 1px solid #ccc;
    width: 20%;
    margin: auto;
    margin-top: 60px;
    line-height: 38px;
}

#timers{
    background-color: #fff;
    text-align: center;
    padding: 0 0 70px 0;
}

.name-col{
    font-size: 20px;
    font-weight: 300;
    color: #000000;
    text-transform: uppercase;
    text-align: center;
    padding: 70px 0 0 0;
}

.name-col p{
    padding: 0 0 30px 0;
    margin: 0;
}

.name-col svg{
    margin-bottom: 20px;
}

.name-col svg path{
    fill: #00b999;
}

.info-col {
    text-align: center;
}

.info-col p{
    font-size: 18px;
    font-weight: 300;
    color: #000;
}

.foto-morawell .img-col{
    margin-bottom: 0px;
    margin-top: 30px;
    transition: 0.1s;
}

.foto-morawell .img-col:hover{
    opacity: 0.8;
    transition: 0.3s;
}

.foto-morawell{
    display: table;
    padding-bottom: 30px;
}

.link-in-map{text-align: center;}

.link-in-map a{
    color: #d60064;
    font-size: 16px;
    padding: 10px;
    text-decoration: underline;
}

.link-in-map a:hover{
    color: #7b003a;
    transition: 0.3s;
}

#where-when{
    padding: 0 0 70px 0;
}

#dress-code, #details{
    background-color:#fff;
    padding-bottom: 70px;
}

#dress-code .colors{
    padding: 30px 0 40px 0;
}

#dress-code .colors .color-s{
    max-width: 100px;
    height: 95px;
    border-radius: 60px;
    padding-right: 3px;
    padding-left: 3px;
    margin-right: 70px;
    margin-bottom: 30px;
}

.col-color-1{
    background-color:#ffdfe2;
}
.col-color-2{
    background-color:#df6da1;
}
.col-color-3{
    background-color:#d60064;
}
.col-color-4{
    background-color:#00b999;
}
.col-color-5{
    background-color:#aee4ff;
}

.time-letter p{
    font-size: 18px;
    font-weight: 300;
    text-align: center;
    padding: 45px 5px;
    border: 2px dashed #ffdfe2;
    background-color:#fff;
    transition: 0.3s;
}

.time-letter p:hover{
    background-color: #ffdfe2;
    transition: 0.3s;
}

.time-letter p svg{
    float: left;
    margin: -10px -40px 0 40px;
}

.time-letter p svg path{color:#afafaf}

.details-info{
    padding: 30px 0 0 0;
    margin: 0 0 -20px 0;
}

.details-info a{
    color: #df6da1;
    font-weight: 500;
    text-decoration: none;
    }

    .details-info a:hover{
        color: #7b003a;
        transition: 0.3s;
    }

.details-info p{
    padding: 20px 120px 20px 45px;
    font-size: 18px;
    font-weight: 300;
    line-height: 25px;
}

.details-info p svg{
    float: left;
    margin-right: 20px;
}

.details-info p svg path, .details-info p b{
    fill:#df6da1;
    color:#df6da1;
}

#gallerys{
    padding-bottom: 70px;
}

.col-anketa{
    background-color: #fff;
    padding: 50px 80px;
    margin-bottom: 80px;
    margin-top: 20px;
}

.col-anketa p{
    font-size: 15px;
    color: #df6da1;
    margin: 0 0 5px 0;
}

.radio-cheks{
    display: grid;
    margin-bottom: 14px;
    padding: 0px 0px 12px 0px;
    border-bottom: 1px solid #efefef;
}

.groups label{
    font-size: 16px;
    font-weight: 400;
}

.groups div{
    padding-left: 0px;
    padding-right: 0px;
}

.col-anketa .name{
    margin-bottom: 20px;
    display: grid;
}

.name-in{
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 15px;

}

.groups textarea{
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 3px;
    height: 200px;
    padding: 15px;
}

.btn-anketa{
    text-align: center;
}

.btn-anketa-lg{
    text-align: center;
    background-color: #00b999;
    color: #fff;
    padding: 13px 130px;
    font-weight: 300;
    font-size: 17px;
    border: none;
    transition: 0.1s;
}

.btn-anketa-lg:hover{
    transition: 0.3s;
    background-color: #00a085;
}

/* -------------- время до свадьбы ------------------ */

  .countdown {
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
    margin-top: -30px;
  }
  
  .countdown-number {
    padding: 0 30px;
    display: inline-block;
  }
  
  .countdown-time {
    padding: 2px 0px;
    font-size: 90px;
    width: 110px;
    border-radius: 3px;
    background: #fff;
    font-family: 'Jost', sans-serif;
    display: inline-block;
    color: #df6da1;
  }
  
  .countdown-text {
    display: block;
    font-size: 15px;
    color: #000;
    font-weight: 100;
    margin: -15px 0 0 0;
  }

  /* -------------- END время до свадьбы ------------------ */

  .back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    color: #fff;
    background-color: #df6da1;
    border-color: #df6da1;
    padding: 9px 11px 7px 11px;
    font-size: 18px;
    border-radius: 30px;
    transition: 0.1s;
}

.back-to-top:hover, .back-to-top:focus {
    background-color: #df6da1;
    border-color: #df6da1;
    opacity: 0.8;
    transition: 0.3s;
}


  #foteer-col{
    background-image: url(../img/5m.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 51vw;
    background-position: center;
    color: #fff;
    text-align: center;
}

#foteer-col h3{
    font-size: 5vw;
    font-weight: 600;
    padding: 20vw 0 0 0;
}

.plans{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.plans em{
    font-style: normal;
    padding: 20px 0 0 0;
    color: #df6da1;
}

.plnas__col div{
    margin: 0 0 15px 0;
    line-height: 21px;
    font-size: 17px;
    font-weight: 300;
    padding: 0 10px;
}

.plans .plnas__col{
    border: 1px solid #e8e8e8;
    flex-basis: 20%;
    text-align: center;
}

.plans .plnas__col:hover{
    background-color:#fdf8f7;
    transition: 0.4s;
}

.plans .plnas__col hr{
    margin-top: 7px;
    margin-bottom: 7px;
    border-top: none;
}

.plans h3{
    font-weight: 500;
}

  @media screen and (max-width: 1199px){
    .menu ul li {
        padding: 16px 20px;
        font-size: 17px;    
    }

    .plans p {
        line-height: 26px;
        font-size: 15px;
        flex-wrap: wrap;
    }

    .menu ul .tittle-merryd {
        font-size: 40px;
        padding: 0px 50px;
    }

    h1 {
        font-size: 62px;
        line-height: 52px;
        padding: 11vw 0 10px 0;
    }

    .tegs {
        padding: 15px 0;
        width: 25%;
    }

    .name-col {
        padding: 50px 0 0 0;
    }

    .foto-morawell .img-col img{
        width: 100%;
    }

    #dress-code .colors .color-s {
        height: 78px;
    }
    
    #anketa, #dress-code, #details, #gallerys, #where-when{
        padding-left: 0;
        padding-right: 0;
    }

    #header {
        padding-right: 0px;
        padding-left: 0px;
    }

    .carousel-inner {
        width: 107vw;
    }
}

@media screen and (max-width: 991px){
    .menu ul li {
        padding: 12px 15px;
        font-size: 15px;
    }

    .plans .plnas__col hr{
        margin-top: 7px;
        margin-bottom: 7px;
        border-top: 1px solid #f5f5f5;
    }

    .plnas__col div {
        line-height: 22px;
        font-size: 15px;
        padding: 0 14px;
    }


    .plans p {
        line-height: 20px;
        font-size: 16px;
        padding: 0 10px;
        flex-wrap: wrap;
    }

    .carousel-inner {
        position: relative;
        width: 137.5vw;
        margin-left: -14vw;
        overflow: hidden;
        min-height: 690vw;
    }

    .menu ul .tittle-merryd {
        font-size: 30px;
        padding: 2px 14px;
    }

    h1 {
        font-size: 59px;
        line-height: 54px;
        padding: 16vw 0 10px 0;
    }

    h2 {
        font-size: 21px;
        line-height: 26px;
    }

    .tegs {
        padding: 15px 0;
        width: 33%;
    }

    #dress-code .colors .color-s {
        height: 98px;
        margin-right: 31px;
    }

    .col-anketa {
        padding: 40px;
    }

    .time-letter p {
        padding: 45px 55px;
    }

    .time-letter p svg {
        margin: -10px 0px 0 0px;
    }

    .name-col p {
        padding: 0 0 20px 0;
    }

    .name-col svg {
        margin-bottom: 10px;
    }

    .details-info p {
        padding: 20px 54px 20px 54px;
    }
}


@media screen and (max-width: 767px){
    h1 {
        font-size: 3.4em;
        line-height: 46px;
        padding: 10vw 0 10px 0;
    }

    .plans .plnas__col {
        flex-basis: 100%;
        margin-bottom: 15px;
    }

    .plnas__col div {
        line-height: 23px;
        font-size: 17px;
        padding: 0;
    }

    .plans .plnas__col hr {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .carousel-inner {
        position: relative;
        width: 103.5vw;
        margin-left: -2vw;
        overflow: hidden;
        min-height: 43.5vw;
    }

    .tegs {
        padding: 10px 0;
        width: 80%;
        line-height: 27px;
        font-size: 17px;
    }

    .countdown-time {
        padding: 2px 0px;
        font-size: 79px;
        width: 90px;
    }

    #dress-code .colors .color-s {
        height: 15vw;
        margin-right: 1.3%;
        padding-left: 0px;
        max-width: 80px;
        margin-left: 2%;
    }

    .btn-anketa-lg {
        padding: 13px 10px;
        width: 100%;
    }

    .col-anketa {
        padding: 15px;
        margin-bottom: 20px;
        margin-left: -15px;
        margin-right: -15px;
    }

    #dress-code, #details {
        background-color: #fff;
        padding-bottom: 10px;
    }

    .groups label {
        font-size: 15px;
        font-weight: 400;
        margin: 0 0 10px 3px;
    }

    .countdown-number {
        padding: 0 20px;
    }

    input[type=checkbox], input[type=radio] {
        margin: 2px 4px 1px 0px;
        margin-top: 1px\9;
        line-height: normal;
        width: 17px;
        float: left;
        height: 16px;
    }

    .time-letter p {
        padding: 30px;
    }

    #timers, #where-when {
        padding: 0 0 50px 0;
    }

    .time-letter p svg {
        margin: -10px 0px 0 0px;
        display: none;
    }

    .details-info p {
        padding: 0px 15px 0px 15px;
        margin-bottom: 50px;
    }

    .details-info p svg {
        float: left;
        margin-right: 20px;
        margin-bottom: 7vw;
    }

    .menu ul {
        float: left;
        padding: 0;
        font-size: 17px;
        text-align: center;
    }

    .tittle-merryd {
        color: #fff !important;
        font-family: 'Jost', sans-serif;
        font-weight: 600;
        font-size: 32px;
        padding: 0px 5px 15px 5px;
        list-style-type: none;
        text-align: center;
        margin-top: 25vw;
    }

    .tittle-merryd a{color:#fff}

    .nav {
        top: -8px;
        position: absolute;
        width: 100%;
    }
    .nav>li>a:hover, .nav>li>a:focus, .nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
        background: #df6da1;
    }
    .dropdown {
        background: #df6da1;
        width: 100%;
    }

    .dropdown-menu {
        padding: 0;
    }

    .dropdown-menu>li>a {
        color: #ffffff;
        background-color: #d26496;
        padding: 13px 15px 13px 15px !important;
        border-bottom: 1px solid #e079a8 !important;
    }
    .dropdown ul.dropdown-menu {
        border-radius:4px;
        box-shadow:none;
        margin-top:20px;
        width:300px;
    }
    .dropdown ul.dropdown-menu:before {
        content: "";
        border-bottom: 10px solid #fff;
        border-right: 10px solid transparent;
        border-left: 10px solid transparent;
        position: absolute;
        top: -10px;
        right: 16px;
        z-index: 10;
    }
    .dropdown ul.dropdown-menu:after {
        content: "";
        border-bottom: 12px solid #ccc;
        border-right: 12px solid transparent;
        border-left: 12px solid transparent;
        position: absolute;
        top: -12px;
        right: 14px;
        z-index: 9;
    }
    .navbar-nav>li>a {
        color: #ffffff;
        background-color: #df6da1;
        padding: 13px 15px 13px 15px !important;
        border-bottom: 1px solid #df6da1 !important;
    }

    .dropdown svg{
        float: right;
        margin: -2px 0 0 0;
    }

    .carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
        display: block;
        max-width: 280%;
        height: auto;
        margin-left: -80vw;
    }

    #header {
        height: 4vw;
        min-height: 177.7vw;
        background-position: top center;
        margin-bottom: 0px;
    }

    .carousel {
        position: relative;
        height: 51.7vw;
        overflow: hidden;
        width: 100vw;
        min-height: 177.8vw;
    }

    #foteer-col {
        height: 131.1vw;
    }

    #foteer-col h3 {
        font-size: 10vw;
        padding: 56vw 0 0 0;
    }
}