.bc{
    display: grid;
    grid-template-columns: 40% 40%;
    justify-content: center;
    padding-top: 100px;
    padding-bottom: 70px;
}

.bc .left img{
    width: 100%;
}

.title {
    display: flex;
    align-items: center;
    column-gap: 7px;
}

.title div img{

    width: 100%;
}


.title span{
    padding-top: 10px;
}
.bc .right{
    margin-left: 10%;
}
.bc .right .title{
    text-transform: uppercase;
    font-family: 'l-regular';
}

.bc .right .subtitle{
    font-family: 'l-bold';
    font-size: 2.5rem;
    margin-top: 10px;
    margin-bottom: 10px;
}

.bc .right .text p{
    margin-bottom: 10px;
}

.bc .right .text ul {
    list-style: none;
    margin-top: 25px;
}

.bc .right .text ul li{
   margin-bottom: 25px;
   display: flex;
   align-items: center;
   column-gap: 10px;
}

.bc .bottom{
    display: grid;
    grid-template-columns: 30% 30% 30%;
    column-gap: 5%;
    align-items: center;
    padding-top: 30px;
}

.bc .bottom img{
    width: 80%;

}

.bc .bottom{
    grid-column: 1 / span 3;
}


@media only screen and (max-width: 1000px) {

    .bc{
        display: grid;
        grid-template-columns: 80%;
        justify-content: center;
        padding-top: 50px;
        padding-bottom: 70px;
    }

    .bc .left {
      
        order: 2;
    }
    
    .bc .right{
        margin-left: 0%;
        order: 1;
    }

    .bc .bottom{
        grid-column: 1 / span 1;
        order: 3;
    }

    .bc .bottom {
        display: flex;
        row-gap: 50px;
        grid-template-columns: 30% 30% 30%;
        flex-direction: column;
        column-gap: 5%;
        align-items: center;
        padding-top: 30px;
    }

    .bc .bottom img{
        width: 50%;
    }
    

}



        .box {
            position: relative;
            display: inline-block;
            margin: 20px 80px;
            vertical-align: top;
            padding: 10px;
            text-align: center;
            cursor: default;
            max-width: 300px;
            font-size: 18px;
            color: #333;
            border-radius: 5px;
            border: 1px solid #f3f3f3;
            min-height: 200px;
            min-width: 340px;
            /*background-color: rgba(229, 143, 39, 0.71);*/
            background: linear-gradient(90deg, #ffffff 0%, #dcdcdc 100%);
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }

        input.opener {
            position: relative;
            display: inline-block;
            margin: 10px 150px;
            padding: 10px;
            text-align: left;
            cursor: default;
            border: 1px solid #999;
            background: rgba(250, 250, 250,.6);
            max-width: 300px;
            color: #333;
        }

        ::-webkit-input-placeholder {
            color: rgba(0, 0, 0, 0.46);
            font-size: 150%;
        }

        ::-moz-placeholder {
            color: rgba(0, 0, 0, 0.46);
            font-size: 150%;
        }

        .balloon-large {
            font-size: 350%;
            text-align: center;
            font-weight: 100;
            line-height: 1;

        }

        .mbBalloonOverlay {
            /*background: linear-gradient(135deg, rgba(229, 143, 39, 0.70) 0%, rgba(242, 190, 1, 0.70) 100%);*/
            background-color: rgba(33, 33, 33, 0.84);
        }

        @media only screen
        and (min-device-width: 320px)
        and (max-device-width: 480px) {

            .box {
                position: relative;
                display: inline-block;
                margin: 20px 0;
                vertical-align: top;
                padding: 10px;
                text-align: center;
                cursor: default;
                max-width: 220px;
                font-size: 18px;
                color: #333;
                border-radius: 5px;
                border: 1px solid #f3f3f3;
                min-height: 200px;
                min-width: 340px;
                /*background-color: rgba(229, 143, 39, 0.71);*/
                background: linear-gradient(90deg, #ffffff 0%, #dcdcdc 100%);
                box-shadow: 0 0 10px rgba(0,0,0,0.3);
            }

        }

        .mbBalloonOpener.highlight{
            box-shadow: 0 0 30px 3px rgba(255, 255, 255, 0.90);
        }

        #forkOnGit{position: fixed;height: 150px;width: 150px;overflow:hidden;padding: 0;margin: 0;top:0;right: 0;z-index: 1;}
        #forkOnGit a{display: block;width: 150%;font-size: 14px;font-family: Frutiger, "Frutiger Linotype", "Helvetica Neue", Helvetica, Arial, sans-serif;background-color: #333;color: #FFF;word-spacing: 2px;text-decoration: none;padding: 5px 15px 5px 25px;position:relative;left: 25px;top: -40px;text-align: center;transform-origin: 0 0 ;transform:rotate(45deg);}
        #forkOnGit a:hover {background-color: #000;}