/* ********************************************************  */
/* Summary Page */
/* ********************************************************  */

.shadow-rounded {
    border-radius: 10px;
}

.img-container {
    height: 250px;
}

.img-rounded {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    height: 230px;
}

.content-container {
    height: calc(100% - 250px);
}

.content-rounded {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    max-height: none;
    height: 100%;
    position: relative;
}


/* ********************************************************  */
/* Article Page */
/* ********************************************************  */

.intro-paragraph {
    font-weight: 300;
    font-size: 22px;
    color: #0078b8;
    text-align: center;
    line-height: 1.4;
    margin-bottom: 40px;
}

.section-head {
    margin-bottom: 30px;
    font-size: 36px;
    font-weight: 300;
    text-align: left;
    max-width: 650px;
}

.read-more {
    position: absolute;
    bottom: 0;
    right: 35px;
    margin-bottom: 15px;
    z-index: 500;
}

/* ********************************************************  */
/* Article Specific Elements */
/* ********************************************************  */

/* ********************************************************  */
/* Website Design Principles */
/* ********************************************************  */

.design-element {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: #eee;
    margin: 15px auto;
    text-align: center;
    padding: 50px 55px;
}

    .design-element .title {
        text-transform: lowercase;
        color: #0078b8;
        font-size: 28px;
        font-weight: 300;
        margin-bottom: 5px;
        margin-top: 5px;
    }

    .design-element .content {
        text-transform: lowercase;
        font-size: 14px;
        font-weight: 300;
    }

/* ********************************************************  */
/* Best Website Type */
/* ********************************************************  */

    table.table-comparison td {
        padding: .65rem;
    }

    .table.table-comparison tbody > tr:hover {
        background-color: #efefef;
    }

    .content-area {
        max-height: 105px;
        overflow: hidden;
        -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
        margin-bottom: 60px;
    }

/* ********************************************************  */
/* Image Types Explained */
/* ********************************************************  */

.image-tool {
    width: 900px;
    padding: 20px;
}

.btn-tool,
.btn-btn-tool:active {
    background-color: #F34D2A;
    border-color: #F34D2A;
    color: #ffffff;
    transition: all ease-in .2s;
}

.btn-tool:hover,
.btn-tool:active {
    background-color: #c74023;
    border-color: #c74023;
    color: #ffffff;
    transition: all ease-in .2s;
}

    .btn-tool.change-image.active,
    .btn-tool.change-background.active,
    .btn-tool.change-scale.active,
    .btn-tool.change-type.active,
    .btn-tool.change-compression.active,
    .btn-tool.change-mask.active {
        background-color: #0078b8;
        border-color: #0078b8;
    }


.option-col {
    max-width: 450px;
}
.option-container {
    border: 1px solid #d3d3d3;
    padding: 10px 5px;
    width: 430px;
    text-align: center;
}
.option-container:not(first-child) {
    margin-bottom: 10px;
}
.option-container:not(:first-child) {
    margin: 10px 0;
}

.option-title {
    font-family: "Raleway",Helvetica,Arial,sans-serif;
    -webkit-font-feature-settings: "lnum";
    -moz-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
    color: #0078b8;
    font-weight: 400;
    text-transform: lowercase;
    font-size: 18px;
    line-height: 22px;
    margin: 0 0 15px 0;
}

.change-image.disabled,
.change-background.disabled,
.change-scale.disabled,
.change-type.disabled,
.change-compression.disabled,
.change-mask.disabled {
    cursor: not-allowed !important;
    pointer-events: none;
    opacity: 0.25;
}

.btn.active {
    background-color: #F34D2A;
}

.btn.img-tool {
    border-radius: 15px;
    padding: 5px 0;
    width: 90px;
    margin: 0 5px;
}

#DragImage {
    position: absolute;
    
}

.type-container {
    display: block;
    align-content: center;
    justify-content: center;
    height: 585px;
    width: 610px;
    overflow: hidden;
    transition: all 0.5s;
    position: relative;
    cursor: grab;
    box-sizing: border-box;
    border: 1px solid #d3d3d3;
}

    .type-container:active {
        cursor: grabbing;
    }


    .type-container.white {
        background-color: #ffffff;
    }
.type-container.orange { background-color: #f34d2a;}
.type-container.blue { background-color: #0078b8;}
.type-container.gray { background-color: #d1d1d1; }

.type-example {}
.type-example.img-x0_5 { height: 293px; width: 305px; left: 25%; top: 25%; transform: translate(-25%,-25%);}
.type-example.img-x1 { height: 585px; width: 610px; }
.type-example.img-x2 { height: 1170px; width: 1220px; left: -50%; top: -50%; transform: translate(50%,50%);}
.type-example.img-x5 { height: 2925px; width: 3050px; left: -240%; top: -180%; transform: translate(240%,180%);}



/* ********************************************************  */
/* Media Tags */
/* ********************************************************  */
/* X SMALL */
@media (max-width: 576px) {
}


/* SMALL */
@media only screen and (min-width: 576px) {
    .img-container,
    .content-container {
        height: auto;
    }

    .img-rounded {
        border-top-left-radius: 10px;
        border-top-right-radius: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 0;
        min-height: 250px;
        height: 100%;
    }

    .content-rounded {
        border-top-left-radius: 0;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 10px;
    }

    .intro-paragraph {
        text-align: justify;
    }
}

/* MEDIUM */
@media only screen and (min-width: 768px) {

}

/* LARGE */
@media only screen and (min-width: 992px) {
    .img-container {
        height: 250px;
    }
    .img-rounded {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        height: 230px;
    }

    .content-container {
        height: calc(100% - 250px);
    }

    .content-rounded {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

}


/* X-LARGE */
@media only screen and (min-width: 1200px) {
    .image-tool {
        width: 1100px;
    }

}