.main_block_calc {
    max-width: 960px;
    display: block;
    margin: 0 auto;
    
}

.block_calc_wrapper {

    background: #fff;
}

.calc_block1 {
    display: flex;
    flex-wrap: wrap;
    padding-top: 50px;
    padding: 30px 20px;
}

.calc_block_grey {
    background: #f3f3f3;
}

.calc_title {
    color: #2e4c6d;
    font-size: 30px;
    font-weight: 500;
    width: 100%;
}

.calc_num_inputs {
    display: flex;
    padding-top: 20px;
}

.num_input {
    width: 150px;
}

.num_input span {
    padding-right: 10px;
}

.tile_choose, .choose_color_title {
    color: #396EB0;
    font-size: 24px;
    padding-top: 20px;
}







.my-custom-label {
    display:inline-block;
    width: 280px;
    height: 140px;
    line-height: auto;
    text-align: center;
    margin-top: 20px;
}

.my-custom-label>div {
    margin-top: 20px;
}

.my-custom-label > input[type=radio] {
    display: none;
}

.my-custom-label > input[type=radio]:checked + span {
    border: solid 3px #396EB0;
}


.typeroof {
    border: solid 3px transparent;
    display:inline-block;
    width: 250px;
    height: 127px;
    border-radius: 10px;
    vertical-align:middle;
}
    
.typeroof1 {
            background: url(../img/roof1.jpg) no-repeat center;
}

.typeroof2 {
            background: url(../img/roof2.jpg) no-repeat center;
}
    
.typeroof3 {
            background: url(../img/roof3.jpg) no-repeat center;
}
    
.typeroof4 {
            background: url(../img/roof4.jpg) no-repeat center;
}
    
.typeroof5 {
            background: url(../img/roof5.jpg) no-repeat center;
}


.typeroof:hover, .typeroof:focus {
    cursor:pointer;
}

.my-custom-label_tiles {
    width: 140px;
}

.type_tile {
    border: solid 5px #e7e7e7;
    display:inline-block;
    width: 100px;
    height: 100px;
    border-radius: 10px;
    vertical-align:middle;
    background-size: 300%;
    background-repeat: no-repeat;
    background-position: center;
}

.type_tile1 {background-image: url(../img/typetile1.jpg);}
.type_tile2 {background-image: url(../img/typetile2.jpg);}
.type_tile3 {background-image: url(../img/typetile3.jpg);}
.type_tile4 {background-image: url(../img/typetile4.jpg);}
.type_tile5 {background-image: url(../img/typetile5.jpg);}
.type_tile6 {background-image: url(../img/typetile6.jpg);}
.type_tile7 {background-image: url(../img/typetile7.jpg);}
.type_tile8 {background-image: url(../img/typetile8.jpg);}

.my-custom-label_color {
    width: 50px;
    height: 40px;
    font-size: 14px;
}

.my-custom-label_color.color_similar {
    width: 70px;
    height: 40px;
}


.color_tile {
    border: solid 3px #ebe9e9;
    display:inline-block;
    width: 46px;
    height: 46px;
    border-radius: 5px;
    vertical-align:middle;
    background-repeat: no-repeat;
    background-position: center;
}

.color_tile1 {background: #f6f3ee;}
.color_tile2 {background: #ffffff;}
.color_tile3 {background: #e9e9eb;}
.color_tile4 {background: #f7ecd8;}
.color_tile5 {background: #faf6eb;}
.color_tile6 {background: #ffe536;}
.color_tile7 {background: #ff6600;}
.color_tile8 {background: #ab1f39;}
.color_tile9 {background: #823441;}
.color_tile10 {background: #883638;}
.color_tile11 {background: #ad312f;}
.color_tile12 {background: #d60000;}
.color_tile13 {background: #264796;}
.color_tile14 {background: #0066b0;}
.color_tile15 {background: #33b2c1;}
.color_tile16 {background: #72bbe8;}
.color_tile17 {background: #0ca040;}
.color_tile18 {background: #235c3c;}
.color_tile19 {background: #c9dfae;}
.color_tile20 {background: #444c35;}
.color_tile21 {background: #056e4f;}
.color_tile22 {background: #b0b0b2;}
.color_tile23 {background: #5e605f;}
.color_tile24 {background: #343633;}
.color_tile25 {background: #b13b17;}
.color_tile26 {background: #45271d;}
.color_tile27 {background: #1c4a25;}
.color_tile28 {background: #4c5457;}
.color_tile29 {background: #953133;}
.color_tile30 {background: #ab2d2e;}
.color_tile31 {background: #482b1b;}
.color_tile32 {background: url(../img/color32.jpg);}

.color_tile33 {background: url(../img/color-wood.png);}
.color_tile34 {background: url(../img/color-brick.png);}
.color_tile35 {background: url(../img/color-stone.png);}


.result_line {
    width: 100%;
    display: block;
    font-size: 24px;
    padding: 10px 0px;
    color: #2e4c6d;
}

.result_bold {font-weight: 700;}

.displaynone {display: none;}

.type_tile_name {

}

.color_similar {
    padding: 0px 10px;
}

.calc_message {
    background: #fff;
    border: 10px;
    padding: 15px 25px;
    width: calc(100% - 50px);
}

@media screen and (max-width: 800px) {
    .radioboxpic {text-align: center;}
    .calc_num_inputs {flex-wrap: wrap;}
    .num_input {margin: 0 auto; padding-top: 15px;}
}

@media screen and (max-width: 500px) {
    .calc_title {font-size: 24px;}
    .num_input {width: 130px;}
    .tile_choose, .choose_color_title {font-size: 20px;}
}