.kalkulator-lepesek h1{
    color: #479fc8 !important;
    margin-bottom:0px;
}
.kalkulator-lepesek a {
    font-size: 0.8em;    
}
.kalkulator-lepesek .box {
    display:table;
    background:white;
    border:2px solid lightgray;
    width:100%;
    margin-bottom:5px;
    margin-bottom:20px;
}
.kalkulator-lepesek .box a{
    cursor: not-allowed;
    opacity: 0.5;
    text-decoration: none;
    pointer-events: none;
}
.kalkulator-lepesek .box-active {
    display:table;
    background:lightgray;
    border:2px solid lightgray;
    margin-bottom:20px;
}
.kalkulator-lepesek .box-active a,.kalkulator-lepesek .box-active h1 {
    font-weight: bold;
}

.kalkulator-lepesek .lepes-szam,.kalkulator-lepesek .lepes-nev {
    vertical-align: middle;
    display:inline-block;
    
}


 
/* Extra small devices (phones, less than 768px) */
@media (max-width: 767px) {
    .valasztott-kapu-container{
        width:100%;
        height:250px;
        /*border:2px solid lightgray;*/
        padding:2px;
        position:relative;
        margin-bottom:50px;
    }
    .valasztott-kapu{
        position:absolute;
        top:40px;
        left:0px;
        padding-left:25px;
        padding-right:25px;
    }
    .garazskapu-keret{
        position:absolute;
        top:40px;
        left:0px;
        width:100%;
    }
    .valasztott-tipus{
        position:absolute;
        bottom:70px;
        left:calc((100% - 150px) / 2);
        font-weight:bold;
        background:lightgray;
        opacity:0.9;
        padding:3px;
        width:150px;
    }
    .valasztott-szin{
        position:absolute;
        bottom:20px;
        left:calc((100% - 150px) / 2);
        font-weight:bold;
        background:lightgray;
        opacity:0.9;
        padding:3px;
        width:150px;
    }
    .valasztott-szelesseg{
        position:absolute;
        top:13px;
        left:calc((100% - 120px) / 2); 
        background:lightgray;
        padding:3px;
        width:120px;
        text-align:center;
        color:#337ab7;
    }
    .valasztott-magassag{
        position:absolute;
        top:calc((100% - 120px) / 2);
        right:-5px; 
        background:lightgray;
        padding:3px;
        height:120px;
        text-align:center;
        color:#337ab7; 
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }   
    .valasztott-meghajtas{
        position:absolute;
        top:47px;
        left:25px;
        background:lightgray;
        padding:3px;
        width:70px;
    }  
            
}


@media (min-width: 768px) and (max-width: 991px) {
    .valasztott-kapu-container{
        width:100%;
        height:450px;
        border:2px solid lightgray;
        padding:2px;
        position:relative;
        margin-bottom:50px;
    }
    .valasztott-kapu{
        position:absolute;
        top:20px;
        left:0px;
        padding-left:50px;
        padding-right:50px;
    }
    .garazskapu-keret{
        position:absolute;
        top:20px;
        left:0px;
        width:100%;
    }
    .valasztott-tipus{
        position:absolute;
        top:120px;
        left:calc((100% - 150px) / 2);
        font-weight:bold;
        background:lightgray;
        opacity:0.9;
        padding:3px;
        width:150px;
    }
    .valasztott-szin{
        position:absolute;
        top:150px;
        left:calc((100% - 150px) / 2);
        font-weight:bold;
        background:lightgray;
        opacity:0.9;
        padding:3px;
        width:150px;
    }
    .valasztott-szelesseg{
        position:absolute;
        top:3px;
        left:calc((100% - 120px) / 2); 
        background:lightgray;
        padding:3px;
        width:120px;
        text-align:center;
        color:#337ab7;
    } 
    .valasztott-magassag{
        position:absolute;
        top:calc((100% - 120px) / 2);
        right:13px; 
        background:lightgray;
        padding:3px;
        height:120px;
        text-align:center;
        color:#337ab7; 
        writing-mode: vertical-rl;
        text-orientation: mixed;
    } 
    .valasztott-meghajtas{
        position:absolute;
        top:37px;
        left:55px;
        background:lightgray;
        padding:3px;
        width:70px;
    }    
                        
}


@media (min-width: 992px) and (max-width: 1200px) {
    .valasztott-kapu-container{
        width:100%;
        height:421px;
        border:2px solid lightgray;
        padding:2px;
        position:relative;
        margin-bottom:50px;
    }
    .valasztott-kapu{
        position:absolute;
        top:20px;
        left:0px;
        padding-left:50px;
        padding-right:50px;
    }
    .garazskapu-keret{
        position:absolute;
        top:20px;
        left:0px;
        width:100%;
    }
    .valasztott-tipus{
        position:absolute;
        top:120px;
        left:calc((100% - 150px) / 2);
        font-weight:bold;
        background:lightgray;
        opacity:0.9;
        padding:3px;
        width:150px;
    }
    .valasztott-szin{
        position:absolute;
        top:150px;
        left:calc((100% - 150px) / 2);
        font-weight:bold;
        background:lightgray;
        opacity:0.9;
        padding:3px;
        width:150px;
    }
    .valasztott-szelesseg{
        position:absolute;
        top:3px;
        left:calc((100% - 120px) / 2); 
        background:lightgray;
        padding:3px;
        width:120px;
        text-align:center;
        color:#337ab7;
    } 
    .valasztott-magassag{
        position:absolute;
        top:calc((100% - 120px) / 2);
        right:13px; 
        background:lightgray;
        padding:3px;
        height:120px;
        text-align:center;
        color:#337ab7; 
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }  
    .valasztott-meghajtas{
        position:absolute;
        top:37px;
        left:55px;
        background:lightgray;
        padding:3px;
        width:70px;
    }   
}


@media (min-width: 1200px){
    .valasztott-kapu-container{
        width:100%;
        height:421px;
        border:2px solid lightgray;
        padding:2px;
        position:relative;
        margin-bottom:50px;
    }
    .valasztott-kapu{
        position:absolute;
        top:25px;
        left:0px;
        padding-left:50px;
        padding-right:50px;
    }
    .garazskapu-keret{
        position:absolute;
        top:20px;
        left:0px;
        width:100%;
    }
    .valasztott-tipus{
        position:absolute;
        top:120px;
        left:calc((100% - 150px) / 2);
        font-weight:bold;
        background:lightgray;
        opacity:0.9;
        padding:3px;
        width:150px;
    }
    .valasztott-szin{
        position:absolute;
        top:150px;
        left:calc((100% - 150px) / 2);
        font-weight:bold;
        background:lightgray;
        opacity:0.9;
        padding:3px;
        width:150px;
    }
    .valasztott-szelesseg{
        position:absolute;
        top:3px;
        left:calc((100% - 120px) / 2); 
        background:lightgray;
        padding:3px;
        width:120px;
        text-align:center;
        color:#337ab7;
    }
    .valasztott-magassag{
        position:absolute;
        top:calc((100% - 120px) / 2);
        right:13px; 
        background:lightgray;
        padding:3px;
        height:120px;
        text-align:center;
        color:#337ab7; 
        writing-mode: vertical-rl;
        text-orientation: mixed;
    } 
    .valasztott-meghajtas{
        position:absolute;
        top:37px;
        left:55px;
        background:lightgray;
        padding:3px;
        width:70px;
    }    
}