#Home div {
    font-size: 22px;
}

/*** Title ***/

#dvTitle1 {
    padding: 30px;
    margin: auto;
    margin-top: 50px;
    border: 5px solid #cfd6e3;
    border-radius: 50%;
    text-align: center;
    width: 450px;
    max-width: 90%;
}

#dvTitle2 {
    padding: 30px;
    margin: auto;
    margin-top: 50px;
    border: 5px solid #cfd6e3;
    border-radius: 50%;
    text-align: center;
    width: 450px;
    max-width: 90%;
}

.dvImgTitle {
    text-align: center;
    margin: auto;
    margin-top: 50px;
}

.flex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.flex-items:nth-child(1) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
}

.flex-items:nth-child(2) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
}

.flex-items:nth-child(3) {
    display: block;
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: auto;
    align-self: auto;
    order: 0;
}

#imgOut {
    border-radius: 15%;
    max-width: 90%;
}

#Right .summaryBoxGeneral, #Monit .summaryBoxGeneral {
    min-height: 600px !important;
}

#Monit, #Right {
    margin-left: 20px;
    margin-right: 20px;
}

#Car, #Parallel, #Mediation {
    margin-left: 10px;
    margin-right: 10px;
}

#imgMonit {
    margin: 30px auto;
    border-radius: 50%;
    max-width: 200px;
    max-height: 200px;
    margin: auto;
}

#imgRight {
    margin: 20px auto;
    border-radius: 25%;
    max-width: 200px;
    max-height: 200px;
    margin: auto;
}

#Car, #Parallel, #Mediation {
    height: 450px;
}

/***** Summary *****/

.dvSummary {
    background-color: #EDEBEC;
    padding: 50px;
    font-size: 20px;
}

.summaryBox {
    position: relative;
    min-height: 420px;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 20px;
    margin: auto;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 10px;
    margin-bottom: 25px;
    background-color: #FFFFFF;
    color: #808080;
}

    .summaryBox p {
        margin: 20px;
    }

.borderTopRed {
    border-top: 5px solid red;
}

.borderTopBlue {
    border-top: 5px solid blue;
}

.borderTopGreen {
    border-top: 5px solid green;
}

.borderTopPurple {
    border-top: 5px solid purple;
}

.borderTopBurlywood {
    border-top: 5px solid burlywood;
}

.summaryBtn {
    border-radius: 4px;
    border: none;
    text-align: center;
    font-size: 20px;
    padding: 10px;
    width: 150px;
    transition: all 0.5s;
    cursor: pointer;
    margin-top: 50px;
    position: absolute;
    left: 0px;
    bottom: 0px;
    background-color: #FFFFFF;
}

    .summaryBtn span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

        .summaryBtn span:after {
            content: '\00bb';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }

    .summaryBtn:hover span {
        padding-right: 25px;
    }

        .summaryBtn:hover span:after {
            opacity: 1;
            right: 0;
        }

@media screen and (max-width: 360px) {
    #Car {
        margin-top: 150px !important;
    }
}

@media screen and (max-width: 400px) {
    .summaryBox p {
        font-size: 18px !important;
    }

    .summaryBoxGeneral p {
        font-size: 18px !important;
    }

    ul li {
        font-size: 18px !important;
    }

    #Monit, #Right, #Car, #Parallel {
        margin: 20px 5px;
    }

    #Parallel {
        margin-bottom: 80px !important;
    }
}

@media screen and (max-width: 600px) {
    #Home div {
        font-size: 20px;
    }

    .dvSummary {
        padding: 50px 20px;
    }

    .dvBody {
        margin-top: 45px;
    }
}

@media screen and (max-width: 1200px) {
    .summaryBox {
        height: auto;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
    .summaryBox {
        height: 500px;
    }
}

/***** Shake *****/

.summaryBox:hover, .summaryBoxGeneral:hover, #dvHome1:hover, #dvHome2:hover {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

/***** Monit *****/

.summaryBoxGeneral {
    position: relative;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 20px;
    margin: auto;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 10px;
    margin-bottom: 25px;
    background-color: #FFFFFF;
    color: #808080;
}

    .summaryBoxGeneral p {
        margin: 20px;
        font-size: 20px;
    }

        .summaryBoxGeneral p ul li {
            font-size: 20px;
        }

.summaryBtnGeneral {
    border-radius: 4px;
    border: none;
    text-align: center;
    font-size: 20px;
    padding: 10px;
    /*width: 300px;*/
    max-width: 90%;
    transition: all 0.5s;
    cursor: pointer;
    margin-top: 50px;
    background-color: #FFFFFF;
}

    .summaryBtnGeneral span {
        cursor: pointer;
        display: inline-block;
        position: relative;
        transition: 0.5s;
    }

        .summaryBtnGeneral span:after {
            content: '\00bb';
            position: absolute;
            opacity: 0;
            top: 0;
            right: -20px;
            transition: 0.5s;
        }

    .summaryBtnGeneral:hover span {
        padding-right: 25px;
    }

        .summaryBtnGeneral:hover span:after {
            opacity: 1;
            right: 0;
        }