/* =============================================== Hide Slideshow/Carousel Tablets Down - ap === */

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  
  .homepage .slideShow { display: none; }
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  
 .homepage .slideShow { display: none; }
}

/* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  
  .homepage .slideShow { display: none; }
  
}

/* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  
 .homepage .slideShow { display: none; }
  
}

/* =====================================  Video Box - ap - 5/2/18  ============= */

@media (max-width: 767px) {	
	.video-box { margin: 24px 36px 0; width: 100%; }	
	
	 /* Internet Explorer 10+ */
		_:-ms-lang(x), .video-box  { max-width: 500px; } _:-ms-lang(x), .col-lg-8  { width: 100%; } 
}

@media (min-width: 768px) and (max-width: 1200px) { 
.button-bar { width: 100%; } 
.video-box { margin: 0 18%; } 

   /* Internet Explorer 10+ */
		_:-ms-lang(x), .video-box  { margin:0; } _:-ms-lang(x), .col-lg-8  { width: 100%; } 
  }
  
@media (min-width: 1201px)  { 
/* Adjusted width of column with buttons for SAFARI */
.video-container .col-lg-4.button-bar {  width: 33.00%;}

 /* Internet Explorer 10+ */
		_:-ms-lang(x), .video-box  { width: auto; } 
  }


/* ================================================== */

.home-box-wrap {
margin-left: -15px;
margin-right: -15px;
padding-left: 0;
padding-right: 0;

}

.home-box-wrap p.lead { font-size: 1rem; letter-spacing: .03rem; line-height: 1.65rem; margin-top: .25rem; margin-bottom: 0; text-align: justify; }

.card-section *, .card-section ::after, .card-section ::before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

main.content.homepage  {
    padding-top: 67px;
}
@media (min-width: 992px){
main.content.homepage {
    padding-top: 100px;
}
}


main.card-section {
    background-color: #f1f1f0;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .card-section section {
        display: block;
        padding-top: 3rem;
    }

    .card-section .main-cards {
        margin-top: 3rem;
    }

    .card-section .content-area {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

.card-section h1 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: .05rem;
    color: inherit;
}

.card-section h4 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
    font-size: 1.5rem;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
}

.card-section h5 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

.card-section p {
    font-family: Roboto,sans-serif;
    font-size: .8rem;
    line-height: 1.2rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

.card-section a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
    color: #333;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

.card-section a:hover {
    color: #666;
}

    .card-section a:active, .card-section  a:hover {
        outline-width: 0;
    }
    .card-section a:focus {
        color: #333333;
    }
    .card-section a, .card-section a:focus, .card-section a:hover {
        text-decoration: none;
    }


/* /////////////////
     BROWSE BUTTON
////////////////// */


        .card-section a.btn {
            background-color: transparent;
            background-image: none;
            border: 1px solid #8c8c8c;
            border-radius: 0;
            color: #777777;
            cursor: pointer;
            display: inline-block;
            font-family: "Roboto Condensed",sans-serif;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.1;
            margin: 0.375em;
            margin-top: 1rem;
            padding: 1rem 2.2rem;
            text-transform: uppercase;
            text-align: center;
            -ms-touch-action: manipulation;
            touch-action: manipulation;
            vertical-align: middle;
            white-space: nowrap;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
            position: relative;
            transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
            overflow-wrap: break-word;
            -webkit-transition: all .2s ease-in-out;
            -o-transition: all .2s ease-in-out;
            transition: all .2s ease-in-out;
        }

            .card-section a.btn:hover {
                background-color: #f7f7f7;
                border-color: #4285f4;
                color: #4285f4 !important;
                text-decoration: none;
                box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.18), 0 4px 10px 0 rgba(0, 0, 0, 0.15);
               

            }

            .card-section a.btn:active {
                background-color: #f7f7f7;
                border-color: #4285f4;
                color: #4285f4 !important;
                box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.18), 0 4px 10px 0 rgba(0, 0, 0, 0.15);
            }

            .card-section a.btn:focus {
                border-color: #4285f4;
                outline: 0 none;
                outline-width: 0;
                text-decoration: none;
                background-color: #f7f7f7;
               color: #4285f4 !important;
             box-shadow: 0 0 0 1px rgba(2, 117, 216, 0.5);
            }


            .card-section a.btn::after {
                box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2), 0 5px 10px 5px rgba(0, 0, 0, 0.18);
                content: "";
                font-family: "Roboto Condensed",sans-serif;
                height: 100%;
                left: 0;
                opacity: 0;
                position: absolute;
                top: 0;
                transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
                width: 100%;
                z-index: -1;
                outline: 0 none;
            }


/* /////////////////// 
     LAYOUT/GRID
/////////////////// */

.card-section .container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px) {
    .card-section .container {
        padding-right: 15px;
        padding-left: 15px;
        width: 540px;
        max-width: 100%;
    }
}
@media (min-width: 768px) {
    .card-section .container {
        padding-right: 15px;
        padding-left: 15px;
        width: 720px;
        max-width: 100%;
    }
}
@media (min-width: 992px) {
    .card-section .container {
        padding-right: 15px;
        padding-left: 15px;
        width: 960px;
        max-width: 100%;
    }
}

@media (min-width: 1200px) {
    .card-section .container {
        padding-right: 15px;
        padding-left: 15px;
        width: 1140px;
        max-width: 100%;
    }
}

.card-section  .row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

@media (min-width: 576px) {
    .card-section .row {
        margin-right: -15px;
        margin-left: -15px;
    }
}

@media (min-width: 768px) {
    .card-section .row {
        margin-right: -15px;
        margin-left: -15px;
    }
}

@media (min-width: 992px) {
    .card-section .row {
        margin-right: -15px;
        margin-left: -15px;
    }
}

@media (min-width: 1200px) {
    .card-section .row {
        margin-right: -15px;
        margin-left: -17px; /* RR edited -15 */
    }
}

.card-section .col-md-12, .card-section  .col-md-3 {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
 }

@media (min-width:576px) {
    .card-section .col-md-12, .card-section .col-md-3 {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (min-width:768px) {
    .card-section .col-md-12, .card-section .col-md-3 {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (min-width:992px) {
    .card-section .col-md-12, .card-section .col-md-3 {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (min-width:1200px) {
    .card-section .col-md-12, .card-section .col-md-3 {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media (min-width:768px) {
    .card-section .col-md-3 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 24.95%; /* AP Edited was 25% */
        -ms-flex: 0 0 24.95%; /* AP Edited 25% */
        flex: 0 0 24.95%; /* AP Edited 25% */
        max-width: 24.95%; /* AP Edited 25% */
    }

    .card-section .col-md-12 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 100%;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.card-section .col-md-15 {
    position: relative;
    min-height: 1px;
    padding-right: 0.3rem;
    padding-left: 0.3rem; /* RR edited .3125 */
}

@media (min-width: 992px) {
 .card-section .col-md-15 {
        width: 19.95%; /* AP edited was 20% */
        float: left;
    }
}



/* Flexbox */
.card-section .d-flex {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

/* Alignment */
.card-section .text-center {
    text-align: center !important;
}


/* /////////////////////////////
       COMPONENTS
/////////////////////////////*/

.card {
    margin: 0 auto;
    position: relative;
    padding: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: #fff;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    
}

.card-block {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}

    .card-section .view.overlay.hm-white-slight {
        height: 2.5rem;
    }

    .card-section .card-title {
        font-family: 'Roboto', sans-serif;
        font-size: 1.4rem;
        font-weight: 700;
        letter-spacing: -.03rem;
        color: #fff;
        margin: 0;

        padding-left: .25rem;
        padding-right: .25rem;
    }


        .card-section .card-title span {
            font-size: 1rem;
            display: inline-block;
        }

        .card-section .card-title a {
            color: #fff;
        }

            .card-section .card-title a:hover {
                color: #ccc;
            }

    .card-section .card-5 .card-block {
        padding-top: 0;
        padding-bottom: 0;
    }

        .card-section .card-5 .card-block:nth-child(6n+1) {
            padding-top: 1.25rem;
        }

        .card-section .card-5 .card-block:nth-child(6n+6) {
            padding-bottom: 1.25rem;
        }

    .card-section .card-5 .card-title {
        font-size: 1rem;
        letter-spacing: -.02rem;
        margin-top: .3rem;
        padding: 0;
    }

    .card-section[class^="card-"] {
        border-top: none;
    }

.card-1, .card-1 .card-block {
    background-color: #577a7a;
}

.card-2, .card-2 .card-block {
    background-color: #368b9c;
}

.card-3, .card-3 .card-block {
    background-color: #84569b;
}

.card-4, .card-4 .card-block {
    background-color: #768086;
}

.card-5, .card-5 .card-block:nth-child(5n+5) {
    background-color: #a24f60;
}

.card-1 .card-block {
    border-bottom: 8px solid #2a5656;
}

.card-2 .card-block {
    border-bottom: 8px solid #006c81;
}

.card-3 .card-block {
    border-bottom: 8px solid #632980;
}

.card-4 .card-block {
    border-bottom: 8px solid #515e66;
}

.card-5 .card-block:nth-child(6n+6) {
    border-bottom: 8px solid #892035;
}

.card-section img {
    border-style: none;
    vertical-align: middle;
}

.card-section .card img, .card-section .img-fluid, .card-section .section .view {
    display: block;
    max-width: 100%;
    height: auto;
}


.view {
    overflow: hidden;
    position: relative;
    cursor: default;
}

@media (min-width: 992px) { /*COA Boxes Colors Borders - HOME PAGE*/
    .card-section .card-title {
        font-size: 1.4rem;
        font-weight: 700;
        letter-spacing: -.03rem;
        color: #fff;
        margin: 0;
       margin-bottom: 0.35rem;
        padding: 1rem 0 .25rem; /* AP Edited was 1rem .35rem .25rem */
    }

        .card-section .card-title span {
            font-size: 1rem;
            display: block;
        }

    .card-section .card-block {
        border-bottom: none;
    }

    .card-section .card-5 .card-block {
        padding-top: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    .card-section .card-5 .card-title {
        font-size: .9rem;
        letter-spacing: -.02rem;
        margin-top: .2rem;
        padding: 0 .25rem;
    }

    .card-1 {
        border-top: 8px solid #2a5656;
    }

    .card-2 {
        border-top: 8px solid #006c81;
    }

    .card-3 {
        border-top: 8px solid #632980;
    }

    .card-4 {
        border-top: 8px solid #515e66;
    }

    .card-5, .card-6 {
        border-top: 8px solid #892035;
    }
}

.card-section .card-title span {
    font-size: 1rem;
    display: inline-block;
}


.card-section .card-title a:hover {
    color: #ccc;
}

.card-section .card-5 .card-block {
    padding-top: 0;
    padding-bottom: 0;
}

    .card-section .card-5 .card-block:nth-child(6n+1) {
        padding-top: 1.25rem;
    }

    .card-section .card-5 .card-block:nth-child(6n+6) {
        padding-bottom: 1.25rem;
    }

.card-section .card-5 .card-title {
    font-size: 1.1rem;
    letter-spacing: -.02rem;
    margin-top: .3rem;
    padding: 0;
}

.card-section[class^="card-"] {
    border-top: none;
}

.card-1, .card-1 .card-block {
    background-color: #577a7a;
}

.card-2, .card-2 .card-block {
    background-color: #368b9c;
}

.card-3, .card-3 .card-block {
    background-color: #84569b;
}

.card-4, .card-4 .card-block {
    background-color: #768086;
}

.card-5, .card-5 .card-block:nth-child(6n+6) {
    background-color: #a24f60;
}

.card-6, .card-6 .card-block {
    background-color: #a24f60;
}

.card-1 .card-block {
    border-bottom: 8px solid #2a5656;
}

.card-2 .card-block {
    border-bottom: 8px solid #006c81;
}

.card-3 .card-block {
    border-bottom: 8px solid #632980;
}

.card-4 .card-block {
    border-bottom: 8px solid #515e66;
}

.card-6 .card-block {
    border-bottom: 8px solid #892035;
}

.card-5 .card-block:nth-child(6n+6) {
    border-bottom: 8px solid #892035;
}



.card-section .panel {
    padding-right: .5rem;
    padding-left: .5rem;
}

/* //////////////////// */
/* Vertical Separators */
/* //////////////////// */

.card-section .row.vertical-divider {
    margin-top: 3rem;
    margin-bottom: 3rem;
    padding-right: 1rem;
    padding-left: 1rem;    
}

.card-section .row.vertical-divider > div[class^="col-"] {
    border-top: 1px solid #ccc;
    padding-top: 1rem;
}

.card-section  .row.vertical-divider div[class^="col-"]:first-child {
    border-top: none;
}

.card-section .row.vertical-divider div[class^="col-"]:last-child {
    border-right: none;
}

@media (min-width: 768px) {
    .card-section .row.vertical-divider > div[class^="col-"] {
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-right: none;
        padding-top: .25rem;
    }

    .card-section .row.vertical-divider div[class^="col-"]:first-child {
        border-left: none;
    }

    .card-section .row.vertical-divider div[class^="col-"]:last-child {
        border-right: none;
    }

    .card-section .row.vertical-divider div[class^="col-"] {
        border-top: none;
    }
}