/* Start:/design/style.css?177123961311268*/
input, p, ul, textarea, select {
    margin-bottom: 10px !important;
}

button {
    border: none;
    width: 100%;
    margin-top: 10px;
    max-width: 100% !important;
}

label {
    font-size: 12px;
}
    
.design-title {
    margin-bottom: 40px;
}

.design-text {
    color: #848484;
    font-size: 14px;
    font-family: 'Roboto';
}

.design-text b{
    color: #000;
}
    
.red {
    color: #E9453F;
}

#header-banner {
    background-image: url('/design/cozy-lively-home-interior-design 1.png');
    background-position: center;
    background-size: cover;
    height: 581px;
    width: 100%;
    padding: 0;
    margin: 0;
}

#header-banner-wrap {
    background-color: rgba(0, 0, 0, 0.5);
    height: 581px;
    width: 100%;
    padding: 0;
    margin: 0;
}

.about-thumb-img {
    /*margin: 30px;*/
}

.divider {
    width: 100%;
    height: 30px;
}

.design__btn {
    font-weight: bold;
    transition: 1s ease-in-out;
}

.design__btn:hover {
    color: #fff;
    background-color: #FF7D49;
}

.our-projects-card {
    height: 400px;
    border-radius: 20px;
    background-position: center;
    background-size: 100%;
    transition: background-size 2s ease-in-out;
    position: relative;
    font: 'Roboto';
    margin-bottom: 20px;
}

.our-projects-card:hover {
    background-size: 150%;
}

.our-projects-card-price {
    float: right;
    color: #fff;
    text-align: right;
    padding: 20px;
}

.our-projects-card-price-big {
    font-size: 48px;
    font-weight: bold;
}

.our-projects-card-title {
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: #fff;
}

.our-projects-card-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
    border: solid 1px #fff;
    border-radius: 50px;
    text-decoration: none;
    color: #fff;
    text-align: center;
    padding: 10px 30px;
    transition: 1s ease-in-out;
}

.our-projects-card-button:hover {
    color: #E9453F;
    border: solid 1px #E9453F;
}

@media screen and (max-width: 600px) {
    .our-projects-card {
        background-size: cover;
    }

    .our-projects-card-title {
        bottom: 80px;
    }
} 

.calculator-wrapper, .calculator-wrapper.section, .calculator-wrapper.section.wrap {
    background-color: #2F3031;
    color: #fff;
}

.calculator-wrapper h2 {
        color: #fff;
}

.calculator-wrapper p {
    font-size: 14px;
    font-family: 'Roboto';
}

    .way-to-card{
                    border-radius: 20px;
                    background-color: #fff;
                    color: #000;
                    margin-bottom: 25px;
                    padding: 30px;
                    background-size: cover;
                    background-position: center;
                    position: relative;
                }

                .way-to-card-small {
                    height: 272px;
                }

                .way-to-card-big {
                    height: 570px;
                }

                .triangle-right {
                    position: absolute;
                    top: 100px;
                    left: 0;
                    width: 0;
                    height: 0;
                    border-top: 25px solid transparent;
                    border-left: 25px solid rgba(0,0,0,0.5);
                    border-bottom: 25px solid transparent;
                }

                .triangle-left {
                    position: absolute;
                    top: 100px;
                    right: 0;
                    width: 0;
                    height: 0;
                    border-top: 25px solid transparent;
                    border-right: 25px solid rgba(0,0,0,0.5);
                    border-bottom: 25px solid transparent;
                }

                .big-number {
                    position: absolute;
                    bottom: -30px;
                    left: 0;
                    font-size: 100px;
                    font-weight: 900;
                    opacity: 0.1;
                    font-family: 'Roboto';
                }

.how-we-work-card {
    border-radius: 20px;
    background-position: left bottom;
    background-repeat: no-repeat;
    box-shadow: 0px 0px 8px 1px rgba(34, 60, 80, 0.2);
    padding: 10px 30px;
}

.sl-container {
                border: 0px solid #BFE2FF;
                margin: 20px auto;
                overflow: hidden;
                position: relative;
                width: 640px;
                height: 420px;
                box-sizing: border-box;
            }
            .sl-container .view {
                position: absolute;
                top: 0;
                left: 0;
                overflow: hidden;
            }
            .sl-container .view img {
                width: 640px;
                max-width: 640px;
            }
            .sl-container .view-before {
                z-index: 100;
            }
            .sl-container .view-after {
                width: 100px;
                z-index: 200;
            }
            .sl-container .dragme {
                position: absolute;
                width: 10px;
                height: 100%;
                top: 0px;
                left: 100px;
                background-color: #E9453F;
                cursor: pointer;
                z-index: 300;
            }
            .sl-container .dr-circle {
                position: absolute;
                top: calc(50% - 20px);
                left: -15px;
                border-radius: 100%;
                width: 40px;
                height: 40px;
                text-align: center;
                background-color: #E9453F;
                cursor: pointer;
                z-index: 300;
            }
            .sl-container .dr-circle i {
                line-height: 40px;
                font-size: 20px;
                color: #E9453F;
                font-weight: bold;
            }
            @media screen and (max-width: 600px) {
                .sl-container {
                    width: 320px;
                    height: 210px;
                }
                .sl-container .view img {
                    width: 320px;
                    max-width: 320px;
                }
            } 

                .the-thing {
                    position: relative;
                    /*width: 800px;*/
                    height: 400px;
                    color^ #fff;
                }

                .circle1 {
                    position: absolute;
                    /*top: 300px;
                    left: 300px;*/
                    width: 405px; 
                    height: 405px; 
                    animation: circle1 12s linear infinite;
                    background:
                        radial-gradient(#FF7D49, #FF7D49 50px, transparent 52px),
                        radial-gradient(circle at center, transparent, transparent 30px, transparent 31px, transparent 49px, transparent 50px, transparent 100%);
                    background-position: 0 -135px, 0 0;
                    }

                    @keyframes circle1 {0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);}
                }

                .circle2 {
                    position: absolute;
                    /*top: 300px;
                    left: 300px;*/
                    width: 405px; 
                    height: 405px; 
                    animation: circle2 12s linear infinite;
                    background:
                        radial-gradient(#E9453F, #E9453F 50px, transparent 52px),
                        radial-gradient(circle at center, transparent, transparent 30px, transparent 31px, transparent 49px, transparent 50px, transparent 100%);
                    background-position: 0 -135px, 0 0;
                    }

                    @keyframes circle2 {0% {transform: rotate(120deg);} 100% {transform: rotate(480deg);}
                }

                .circle3 {
                    position: absolute;
                    /*top: 300px;
                    left: 300px;*/
                    width: 405px; 
                    height: 405px; 
                    animation: circle3 12s linear infinite;
                    background:
                        radial-gradient(#C43D39, #C43D39 50px, transparent 52px),
                        radial-gradient(circle at center, transparent, transparent 30px, transparent 31px, transparent 49px, transparent 50px, transparent 100%);
                    background-position: 0 -135px, 0 0;
                    }

                    @keyframes circle3 {0% {transform: rotate(240deg);} 100% {transform: rotate(600deg);}
                }

                .circle4 {
                    position: absolute;
                    top: 65px;
                    left: 65px;
                    opacity: 0.7;
                   /*backdrop-filter: blur(10px);*/
                }

                .circle5 {
                    position: absolute;
                    top: 100px;
                    left: 300px;
                    opacity: 0.7;
                    /*backdrop-filter: blur(10px);*/
                }

                .circle6 {
                    position: absolute;
                    top: 230px;
                    left: 40px; 
                    opacity: 0.7;
                    /*backdrop-filter: blur(10px);*/
                }

                .circle-content1 {
                    position: absolute;
                    top: 100px;
                    left: 170px; 
                }

                .circle-content2 {
                    position: absolute;
                    top: 100px;
                    left: 335px; 
                }

                .circle-content3 {
                    position: absolute;
                    top: 230px;
                    left: 70px; 
                }

                .seven {
                    font-size: 100px;
                    font-weight: bold;
                }

                .zero {
                    font-size: 50px;
                    font-weight: bold;
                }
                
.face-card img {
                border-radius: 20px;
            }

.big {
                font-size: 100px;
            }
            
    #footer-banner {
        background-image: url('/design/Rectangle 95.png');
        background-position: center;
        background-size: cover;
        height: 349px;
        width: 100%;
        padding: 0;
        margin: 0;
        color: #fff;
    }

    #footer-banner-wrap {
        background-color: rgba(0, 0, 0, 0.5);
        height: 581px;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    #footer-map {
        background-image: url('/design/image 32.png');
        background-position: center;
        background-size: cover;
        height: 533px;
        width: 100%;
    }            

    .popup-dialog {
        border-radius: 20px;
    }
/* End */


/* Start:/local/templates/ceramicclub/components/wst/wst.comments/reviews2/style.min.css?164668283394*/
.review-add{margin-top:29px}.reviews{height:440px;overflow:auto;border-bottom:1px dashed #eee}
/* End */


/* Start:/local/templates/ceramicclub/components/wst/wst.comments.list/reviews2/style.css?1647287473728*/
.youtube {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: inline-block;
    overflow: hidden;
    transition: all 200ms ease-out;
    cursor: pointer;
}
.youtube .play {
    background: url('/local/templates/ceramicclub/components/wst/wst.comments.list/reviews2/youtube-play-btn.png') no-repeat; /*ВАЖНО: здесь укажите адрес до изображения*/
    background-position: 0 -50px;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
    position: absolute;
    height: 50px;
    width: 69px;
    transition: none;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}
.youtube:hover .play {
    background-position: 0 0;
}
/* End */
/* /design/style.css?177123961311268 */
/* /local/templates/ceramicclub/components/wst/wst.comments/reviews2/style.min.css?164668283394 */
/* /local/templates/ceramicclub/components/wst/wst.comments.list/reviews2/style.css?1647287473728 */