/**** VARIABLES ****/
:root {
    --side-spacing-mobile: 5%;
    --side-spacing-desktop: 5%;
    --vert-spacing-mobile: 35px;
    --vert-spacing-desktop: 50px;

    /* colors */
    --white: #ffffff;
}

/**** VARIABLES END  ****/

html,
body {
    height: 100%;
    color: #333333;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    background-color: #EEE;
}

/****  ****/
/**** END  ****/

/**** GLOBALS ****/

h1 {
    color: #19324F;
    font-family: 'Crimson Text', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 38px;
    line-height: 46px;
    letter-spacing: 0em;
    text-align: left;
}

h2 {
    color: #2E598A;
    font-family: 'Crimson Text', sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0em;
    text-align: left;

    border-bottom: 3px solid #19324F;
    margin-bottom: 26px;
}

h3 {
    color: #2E598A;
    font-family: 'Crimson Text', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0em;
    text-align: left;

}

p {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    margin-bottom: 1.5rem;
}

p:last-child {
    margin-bottom: 0;
}

ul {
    margin-bottom: 20px;
    padding-left: 1.5rem;
}

ul li {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: 0em;
    text-align: left;
    margin-bottom: 20px;
}

ul,
ul li:last-child {
    margin-bottom: 0;
}

.container {
    padding: 0;
    width: 100%;
    max-width: 1500px;
    margin: auto;
    background-color: #FFF;
}

.img-full {
    width: 100%;
    height: auto;
    border-radius: 12px; margin-bottom: 12px;
}


a.social-btn .img-full {
    width: 100%;
    height: auto;
    border-radius: 0px; margin-bottom: 0;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.no-gutters>.col,
.no-gutters>[class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}


@media (min-width: 992px) {
    h1 {
        font-size: 61px;
        line-height: 82px;
    }

    h2 {
        font-size: 28px;
        line-height: 38px;
    }
}

/**** END GLOBALS ****/

/**** Lightbox ****/
/* LIGHTBOX */

#lightbox {
    height: 100%;
    position: fixed;
    top: -100%;
    transition: top .85s;
    width: 100%;
    z-index: 3;
}

#lightbox>span {
    background-color: rgba(35, 35, 35, .8);
    cursor: pointer;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
}

#lightbox>span span {
    color: #fff;
    font-size: 3.6em;
    line-height: .4em;
    padding: 15px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 5;
}

#lightbox div {
    box-shadow: 0 8px 15px 0 #000;
    margin: -120px auto 0;
    max-height: 80%;
    overflow: auto;
    position: relative;
    transform: rotateX(90deg) translateY(-160px);
    transition: .24s;
    width: 88%;
}

#lightbox img {
    display: block;
    width: 100%;
    background: white;
    padding: 15px;
}

#lightbox.on {
    top: 0;
}

#lightbox.on div {
    margin-top: 50px;
    transition: .8s ease-out .32s;
    transform: rotateX(0deg) translateY(0px);
}

.lightbox {
    cursor: pointer;
}

/**** END Lightbox ****/

/**** Header ****/
.header {
    background-color: #FFF;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: var(--side-spacing-mobile);
    padding-right: var(--side-spacing-mobile);
}

.header h2 {
    margin-bottom: 0;
    border-bottom: 0;
    padding-bottom: 0;
}

.banner {

    display: inline-block;
    font-size: 14pt;
    border-bottom: 1px solid #8A0000;
    color: #8A0000;
    margin-top: 0.5em;
    padding: 0.5em;
}

.banner a {
    color: #8A0000;
    font-style: italic;
}

.banner i {
    margin: 0 0.35em 0 0.5em;
}

p.split {width: 48%; margin-right: 1%; display: inline-block;}


@media (max-width: 640px) {
    p.split {width: 100%;}
}

@media (min-width: 992px) {
    .header {
        padding-left: var(--side-spacing-desktop);
        padding-right: var(--side-spacing-desktop);
    }
}

/**** END Header ****/

/**** Footer ****/
.footer {
    background-color: #19324F;
    padding-top: 50px;
    padding-bottom: 15px;
    padding-left: var(--side-spacing-mobile);
    padding-right: var(--side-spacing-mobile);
}


.footer h2, .footer p, .footer a, .footer span {
    color: #FFF;
}

.footer h2 {
    display: inline-block;
    border-bottom: 1px solid #FFF;
    margin-bottom: 10px;
}

.footer .bettendorf-logo {
    display: block;
    margin: auto;
}

.footer .footer-copy {
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0em;
}

.footer .footer-copy span, .footer .footer-copy a {
    padding-left: 5px;
    padding-right: 8px;
    border-right: 1px solid #FFF;
}

.footer .footer-copy span:first-child, .footer .footer-copy a:first-child {
    padding-left: 0;
    text-decoration: none;
}

.footer .footer-copy span:last-child, .footer .footer-copy a:last-child {
    border-right: 0;
}

.footer .social-row {
    text-align: center;
    margin-bottom: 30px;
}

.footer .social-row .social-link {
    margin: 0 20px;
    text-decoration: none;
}

.footer .social-row .social-link:first-child {
    margin-left: 0;
}

.footer .social-row .social-link:last-child {
    margin-right: 0;
}

.footer .copyright {
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 21px;
    letter-spacing: 0em;
    color: #FFF;
    margin-top: 35px;
}

@media (min-width: 992px) {
    .footer {
        padding-left: var(--side-spacing-desktop);
        padding-right: var(--side-spacing-desktop);
    }

    .footer .social-row {
        text-align: left;
        margin-bottom: 0;
    }

    .footer .bettendorf-logo {
        display: block;
        margin-left: auto;
        margin-right: 0;
    }
}
/**** END Footer ****/

/**** Hero section ****/
.hero {
    min-height: 366px;
    margin-bottom: var(--vert-spacing-mobile);
    margin-left: var(--side-spacing-mobile);
    margin-right: var(--side-spacing-mobile);
    padding-top: var(--vert-spacing-mobile);
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    background-color: #19324F;
    border-radius: 20px;
    background-image: url('../assets/images/banner.svg');
    background-size: cover;
}

.hero h1 {
    background-color: #19324F;
    color: #FFF;
    margin-bottom: 20px;
    padding-left: var(--vert-spacing-mobile);
    padding-right: var(--vert-spacing-mobile);
}

.hero .social-container {
    background-color: #FFF;
    border-radius: 15px;
    display: flex;
    border-radius: 15px;
    margin-left: var(--vert-spacing-mobile);
}

.hero .social-container .vert-banner {
    display: inline-block;
    width: 35px;
    writing-mode: vertical-lr;
    text-orientation: mixed;
    color: #19324F;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    background-color: #E6E0D4;
    padding: 20px 6px;
    border-radius: 15px 0 0 0;
}

.hero .social-container .social-content {
    display: inline-block;
    padding: 20px;
    background-color: #FFF;
    width: 100%;
}

.hero .social-container .social-content h2 {
    font-size: 22px;
    font-weight: 600;
    line-height: 30px;
    padding-bottom: 0;
    border-bottom: 1px solid #C4C4C4;
    margin-bottom: 30px;
}

.hero .social-container .social-content .social-row {
    display: flex;
    justify-content: space-around;
}

.hero .social-container .social-content .social-row .social-btn {
    display: block;
    cursor: pointer;
    background-color: #19324F;
    height: 35px;
    width: 35px;
    padding: 5px;
    transition: 0.5s ease-in-out;
}

.hero .social-container .social-content .social-row .social-btn:hover {
    background-color: #8A0000;
}


@media (min-width: 992px) {
    .hero {
        position: relative;
        margin-bottom: 10px;
        margin-left: var(--side-spacing-desktop);
        margin-right: var(--side-spacing-desktop);
        padding-top: 75px;
        padding-bottom: 75px;
        padding-left: 75px;
        padding-right: 35%;
        background-image: url('../assets/images/banner.svg');
        background-size: cover;

    }

    .hero h1 {
        max-width: 430px;
        margin-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .hero .social-container {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 35%;
        border-radius: 15px 0 0 0;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0px;
        margin-right: 0px;
    }

    .hero .social-container .vert-banner {
        border-radius: 15px 0 0 0;
    }

    .hero .social-container .social-content h2 {
        font-size: 24px;
        line-height: 33px;
    }

  
}

/**** END Hero section ****/

/* ANNOUNCEMENT */
.announcement {background-color: #FFBE0B; margin-left: var(--side-spacing-desktop); margin-right: var(--side-spacing-desktop);
}
.announcement-img {display: inline-block; text-align: center;}
.announcement-img img {width: 8%; padding: 15px; vertical-align: middle;}
.announcement-img h3 {display: inline-block; padding: 15px 0; margin: 0;vertical-align: middle;}
button.om {background-color: #2E598A; border: none; margin: 0 0 0 15px; padding: 15px; vertical-align: middle; border-radius: 5px;}
button.om a {color: #fff; text-decoration: none; font-weight: bold;}
button.om:hover {background-color:seagreen; transition: 0.5s all;}

@media (max-width: 992px) {
    .announcement-img img {width: 25%; padding: 15px 15px 15px 0; vertical-align: middle;}
    button.om {background-color: #2E598A; border: none; margin: 15px 0; padding: 15px; vertical-align: middle; border-radius: 5px;}
}

/**** White Section ****/
.white-section {
    color: #342B15;
    margin-top: var(--vert-spacing-mobile);
    margin-bottom: var(--vert-spacing-mobile);
    margin-left: var(--side-spacing-mobile);
    margin-right: var(--side-spacing-mobile);
}

.white-section .first-col {
    margin-bottom: 25px;
}

.white-section section {
    margin-bottom: var(--vert-spacing-mobile);
}

.white-section section:last-of-type {
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .white-section {
        margin-top: var(--vert-spacing-desktop);
        margin-bottom: var(--vert-spacing-desktop);
        margin-left: var(--side-spacing-desktop);
        margin-right: var(--side-spacing-desktop);
    }

    .white-section .first-col {
        margin-bottom: 0;
        padding-right: 45px;
    }

    .white-section .last-col {
        padding-left: 45px;
        border-left: 1px solid #C4C4C4;
    }

    .white-section section {
        margin-bottom: var(--vert-spacing-desktop);
    }
}

/**** END White Section ****/

/**** Blue Section ****/
.blue-section {
    background-color: #2E598A;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='%23f6f6f6' fill-opacity='0.04'%3E%3Cpath fill-rule='evenodd' d='M29.42 29.41c.36-.36.58-.85.58-1.4V0h-4v26H0v4h28c.55 0 1.05-.22 1.41-.58h.01zm0 29.18c.36.36.58.86.58 1.4V88h-4V62H0v-4h28c.56 0 1.05.22 1.41.58zm29.16 0c-.36.36-.58.85-.58 1.4V88h4V62h26v-4H60c-.55 0-1.05.22-1.41.58h-.01zM62 26V0h-4v28c0 .55.22 1.05.58 1.41.37.37.86.59 1.41.59H88v-4H62zM18 36c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H20a2 2 0 0 1-2-2zm0 16c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H20a2 2 0 0 1-2-2zm16-26a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zM34 58a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v4a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-4zM34 78a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-6zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-6zM34 4a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2V4zm16 0a2 2 0 0 1 2-2 2 2 0 0 1 2 2v6a2 2 0 0 1-2 2 2 2 0 0 1-2-2V4zm-8 82a2 2 0 1 1 4 0v2h-4v-2zm0-68a2 2 0 1 1 4 0v10a2 2 0 1 1-4 0V18zM66 4a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0V4zm0 72a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0v-8zm-48 0a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0v-8zm0-72a2 2 0 1 1 4 0v8a2 2 0 1 1-4 0V4zm24-4h4v2a2 2 0 1 1-4 0V0zm0 60a2 2 0 1 1 4 0v10a2 2 0 1 1-4 0V60zm14-24c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H58a2 2 0 0 1-2-2zm0 16c0-1.1.9-2 2-2h10a2 2 0 1 1 0 4H58a2 2 0 0 1-2-2zm-28-6a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm8 26a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM36 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-8-8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 68a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16-34a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm16-12a2 2 0 1 0 0 4 6 6 0 1 1 0 12 2 2 0 1 0 0 4 10 10 0 1 0 0-20zm-64 0a2 2 0 1 1 0 4 6 6 0 1 0 0 12 2 2 0 1 1 0 4 10 10 0 1 1 0-20zm56-12a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 48a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-48 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0-48a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm24 32a10 10 0 1 1 0-20 10 10 0 0 1 0 20zm0-4a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm36-36a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM10 44c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm56 0c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm8 24c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zM3 68c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4H5a2 2 0 0 1-2-2zm0-48c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4H5a2 2 0 0 1-2-2zm71 0c0-1.1.9-2 2-2h8a2 2 0 1 1 0 4h-8a2 2 0 0 1-2-2zm6 66a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zM8 86a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0-68A6 6 0 1 1 8 2a6 6 0 0 1 0 12zm0-4a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm36 36a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/g%3E%3C/svg%3E");
    color: #FFF;
    border-radius: 8px;
    margin-top: var(--vert-spacing-mobile);
    margin-bottom: var(--side-spacing-mobile);
    margin-left: calc(var(--side-spacing-mobile)/2);
    margin-right: calc(var(--side-spacing-mobile)/2);

    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: calc(var(--side-spacing-mobile)/2);
    padding-right: calc(var(--side-spacing-mobile)/2);
}

.blue-section h2 {
    color: #FFF;
}

.blue-section .first-col {
    margin-bottom: 25px;
}

.blue-section section {
    margin-bottom: var(--vert-spacing-mobile);
}

.blue-section section:last-of-type {
    margin-bottom: 0;
}

@media (min-width: 992px) {
    .blue-section {
        margin-top: 90px;
        margin-bottom: var(--vert-spacing-desktop);
        margin-left: calc(var(--side-spacing-desktop)/2);
        margin-right: calc(var(--side-spacing-desktop)/2);

        padding-left: calc(var(--side-spacing-desktop)/2);
        padding-right: calc(var(--side-spacing-desktop)/2);
    }

    .blue-section .first-col {
        margin-bottom: 0;
        padding-right: 45px;
    }

    .blue-section .last-col {
        padding-left: 45px;
        border-left: 1px solid #C4C4C4;
    }

    .blue-section section {
        margin-bottom: var(--vert-spacing-desktop);
    }
}

/**** END Blue Section ****/

/**** Map and Copy Block ****/
.map-and-copy .map-container {
    padding: 0 15px;
    margin-top: 45px;
}

.map-and-copy .copy-container {
    background-color: #f2f2f2;
    padding-left: var(--side-spacing-mobile);
    padding-right: var(--side-spacing-mobile);
    padding-bottom: 30px;
    padding-top: 90px;
    margin-top: -80px;
    border-radius: 5px;
}

.map-and-copy .copy-container p {
    padding-left: var(--side-spacing-mobile);
    padding-right: var(--side-spacing-mobile);
}

.map-container img:hover {box-shadow: 0 8px 10px 0 #333; transition: 0.5s all;}

.renderings > div.row {margin-bottom: 25px;}
.renderings div img {width: 100%; padding-bottom: 15px;}
.renderings div img:hover {box-shadow: 0 8px 10px 0 #333; transition: 0.5s all;}

@media (min-width: 992px) {
    .map-and-copy .map-container {
        padding: 0 30px;
    }

    .map-and-copy .copy-container {
        padding-left: var(--side-spacing-desktop);
        padding-right: var(--side-spacing-desktop);
    }

    .map-and-copy .copy-container p {
        padding-left: var(--side-spacing-desktop);
        padding-right: var(--side-spacing-desktop);
    }

}

/**** END Map and Copy Block ****/

/**** Five Item Icon Row Block ****/
.five-item-icon-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 30px;
}

.five-item-icon-row .icon-container {
    width: 50%;
    padding: 0 20px;
    margin-bottom: 20px;
}

.five-item-icon-row .icon-container .icon {
    margin-bottom: 15px;
    width: auto;
    height: 91px;
}

.five-item-icon-row .icon-container .icon:hover {
    transform: scale(1.02);
    transition: all 0.3s ease-in-out;
}

@media (min-width: 992px) {
    .five-item-icon-row {
        margin-top: 55px;
    }

    .five-item-icon-row .icon-container {
        width: 20%;
        margin-bottom: 0px;
    }

    .five-item-icon-row .icon-container:first-child {
        padding-left: 0;
    }

    .five-item-icon-row .icon-container:last-child {
        padding-right: 0;
    }
}

/**** END Four Item Icon Row Block ****/

/**** FAQ Accordion ****/

.faq-accordion .accordion-item {
    margin-bottom: 20px;
}

.faq-accordion .accordion-item:last-child {
    margin-bottom: 0px;
}

.faq-accordion .accordion-button {
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 21px;
    letter-spacing: 0em;
    text-align: left;
    color: #2E598A;
    position: relative;
    border: 0;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 1.5rem;
    padding-right: 0;
}

.faq-accordion .accordion-button::after {
    background-image: url('../assets/images/garnish/triangle-arrow.svg');
    background-size: 0.8rem;
    width: 0.8rem;
    height: 1rem;
    top: 5px;
    left: 0;
    position: absolute;
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(90deg);
}

.faq-accordion .accordion-button:focus {
    border: 0;
    box-shadow: none;
}

.faq-accordion .accordion-button:hover {
    text-decoration: underline;
}

.faq-accordion .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: #2E598A;
}

.faq-accordion .accordion-body {
    padding-bottom: 0;
}

.faq-accordion .accordion-collapse {
    border: 0;
}

@media (min-width: 992px) {}

/**** END FAQ Accordion ****/
#process {margin-top: 50px;}
#process img {width: 100%; margin: 0 auto; display: block;}


/**** Four Square ****/
.four-square .square-row {
    display: flex;
    flex-wrap: wrap;
}

.four-square .square-row .square {
    width: 100%;
    margin-bottom: 40px;
}

.four-square .square-row .square:hover {
    transform: scale(1.02);
    transition: all 0.3s ease-in-out;
}


.four-square .square-row .square .square-content {
    background-color: #E6E0D4;
    padding: 40px;
    color: #19324F;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}

.four-square .square-row .square .square-content.red-square h3,
.four-square .square-row .square .square-content.red-square .notice {
    color: #8A0000;
    border-color: #8A0000;
}

.four-square .square-row .square .square-content.red-square::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 45px 45px 0 0;
    border-color: #8A0000 transparent transparent transparent;
    left: 0;
    top: 0;
    position: absolute;
}

.four-square .square-row .square .square-content.red-square::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 45px 45px;
    border-color: transparent transparent #8A0000 transparent;
    right: 0;
    bottom: 0;
    position: absolute;
}

.four-square .square-row .square .square-content.gray-square::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 45px 45px 0 0;
    border-color: #C4C4C4 transparent transparent transparent;
    left: 0;
    top: 0;
    position: absolute;
}

.four-square .square-row .square .square-content.gray-square::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 45px 45px;
    border-color: transparent transparent #C4C4C4 transparent;
    right: 0;
    bottom: 0;
    position: absolute;
}

.four-square .square-row .square .square-content.transparent-square::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 45px 45px 0 0;
    border-color: #19324F transparent transparent transparent;
    left: 0;
    top: 0;
    position: absolute;
}

.four-square .square-row .square .square-content.transparent-square {
    background-color: transparent;
}

.four-square .square-row .square .square-content.transparent-square h3,
.four-square .square-row .square .square-content.transparent-square p {
    color: #FFF;
}

.four-square .square-row .square .square-content.transparent-square::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 45px 45px;
    border-color: transparent transparent #19324F transparent;
    right: 0;
    bottom: 0;
    position: absolute;
}


.four-square .square-row .square .square-content h3 {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 25px;
    letter-spacing: 0em;
    text-align: left;
    padding-bottom: 4px;
    border-bottom: 1px solid #19324F;
    position: relative;
}

.four-square .square-row .square .square-content h3.with-icon {
    padding-left: 45px;
}

.four-square .square-row .square .square-content h3.with-icon::after {
    content: '';
    background-image: url('../assets/images/icons/construction_r.svg');
    position: absolute;
    left: 0;
    top: -10px;
    width: 38px;
    height: 38px;
}

.four-square .square-row .square .square-content.accordion h3.with-icon::after {
    content: '';
    background-image: url('../assets/images/icons/construction_b.svg')!important;
    position: absolute;
    left: 0;
    top: -10px;
    width: 38px;
    height: 38px;
}

.four-square .square-row .square .square-content .main-content {
    margin-bottom: 20px;
}

.four-square .square-row .square .square-content img {
    width: 100%;
    border-radius: 12px;
}

.four-square .square-row .square .square-content .notice {
    margin-top: auto;
    font-weight: 600;
}

/* Accordions */
.accordion h3.with-icon {border-bottom: none!important; margin-bottom: 0;}
button.accordion-header {background-color: transparent; border: none;}
.accordion-header { cursor: pointer; }
.accordion-header i { font-size: .5em; margin-left: 12px; transition: .45s; vertical-align: middle; }
.opened .accordion-header i { margin-top: -4px; transform: rotate(180deg); }
.accordion > div { padding: 15px 1%; }

/* Tablet Style Changes on Up */
@media (min-width: 768px) {
    .four-square .square-row {
        margin-bottom: 50px;
    }

    .four-square .square-row .square {
        width: 100%;
        margin-bottom: 25px;
    }

    /* .four-square .square-row .square:first-child {
        padding-right: 20px;
    }

    .four-square .square-row .square:last-child {
        padding-left: 20px;
    } */
}

/**** END Four Square ****/