*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
    --bg-color: white;
    --bg-content: #F2F2F2;
    --color: #707070;
    --color2: white;
    --red: #CB0001;
    --color-hover: #333;
    --padding: 30px;
    --padding-wide: 200px;
    --padding-medium: 120px;
    --padding-item: 2rem;
    --tablet: 768px;
    --screen: 992px;
    --wide: 1280px;
    --header-full: 188px;/*228px;*/
    --header-mobile: 180px;
    --header-tiny: 92px;
    --font-size: 18px;
    --font-size-h1: 40px;
    --line-height: 28px;
    --opacity-box: 0.8;
    --opacity-bg: 0.5;
}

html, body {
  background: var(--bg-color);
  font-family: 'dinpro';
  width: 100%;
  overflow-x: hidden;
  color: var(--color);
}

main{
    margin-top: var(--header-tiny);
}
@media only screen and (min-width : 1280px) {
    main{
        margin-top: var(--header-full);
    }
}

.no-relative{
    /*position: unset;*/
}

.no-scroll{
    overflow: hidden;
    height: 100vh;
}

.red{
    color: var(--red);
}

/* EXPAND */
.expand{
    width: 32px;
    height: 32px;
    color: var(--red);
    cursor: pointer;
    background: url("../../images/icons/expand.png") no-repeat center center;
}
/* CLOSE */
.close {
    position: absolute;
    width: 32px;
    height: 32px;
    color: var(--red);
    cursor: pointer;
}
.close:before, .close:after {
    position: absolute;
    left: 10px;
    content: ' ';
    height: 33px;
    width: 4px;
    background-color: var(--red);
}
.close:before {
    transform: rotate(45deg);
}
.close:after {
    transform: rotate(-45deg);
}

.btn{
    color: var(--color2);
    background-color: var(--red);
    cursor: pointer;
    text-decoration: none;
    padding: 0.5rem 1rem;
    font-size: 16px;
    font-weight: bold;
    -moz-transition: background-color 0.3s;
    -webkit-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    transition: background-color 0.3s, padding 0.3s;
    display: inline-block;
}
.btn:hover{
    background-color: var(--color-hover);
    padding: 0.5rem 1.5rem;
    -moz-transition: background-color 0.3s;
    -webkit-transition: background-color 0.3s;
    -o-transition: background-color 0.3s;
    transition: background-color 0.3s, padding 0.3s;
}
.btn2{
    color: var(--red);
    background-color: #F2F2F2;
}
.btn-white{
    color: white;
    border: 1px solid white;
}
.btn:hover{
    color: var(--color2);
}

.price{
    font-size: 42px;
    font-weight: bold;
}

.block h2{
    font-size: 28px;
    font-weight: bold;
    /*color: var(--red);*/
    margin-bottom: 1rem;
}

.inside{
    padding: 0 var(--padding);
}
@media only screen and (min-width : 1280px) {
    .inside{
        padding: 0 var(--padding-medium);
    }
}
@media only screen and (min-width : 1920px) {
    .inside{
        padding: 0 var(--padding-wide);
    }
}

.outside{
    margin: 0 var(--padding);
}
@media only screen and (min-width : 1280px) {
    .outside{
        margin: 0 var(--padding-medium);
    }
}
@media only screen and (min-width : 1920px) {
    .outside{
        margin: 0 var(--padding-wide);
    }
}

.linside{
    padding-left: var(--padding);
}
@media only screen and (min-width : 1280px) {
    .linside{
        padding-left: var(--padding-medium);
    }
}
@media only screen and (min-width : 1920px) {
    .linside{
        padding-left: var(--padding-wide);
    }
}

.loutside{
    margin-left: var(--padding);
}
@media only screen and (min-width : 1280px) {
    .loutside{
        margin-left: var(--padding-medium);
    }
}
@media only screen and (min-width : 1920px) {
    .loutside{
        margin-left: var(--padding-wide);
    }
}

.rinside{
    padding-right: var(--padding);
}
@media only screen and (min-width : 1280px) {
    .rinside{
        padding-right: var(--padding-medium);
    }
}
@media only screen and (min-width : 1920px) {
    .rinside{
        padding-right: var(--padding-wide);
    }
}

.routside{
    margin-right: var(--padding);
}
@media only screen and (min-width : 1280px) {
    .routside{
        margin-right: var(--padding-medium);
    }
}
@media only screen and (min-width : 1920px) {
    .routside{
        margin-right: var(--padding-wide);
    }
}

.block_middle{
    padding-top: var(--padding-medium);
    padding-bottom: var(--padding-medium);
}
.block_top{
    padding-bottom: var(--padding-medium);
}
.block_bottom{
    padding-top: var(--padding-medium);
}

.double{
    gap: var(--padding);
}
@media only screen and (min-width : 1280px) {
    .double{
        gap: var(--padding-medium);
    }
}
@media only screen and (min-width : 1920px) {
    .double{
        gap: var(--padding-wide);
    }
}

.webform-confirmation
{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 20rem;
    flex-direction: column;
}