@font-face {
    font-family: 'Nexa Bold';
    src: url('../Fonts/nexa/NexaBold.eot');
    src: url('../Fonts/nexa/NexaBold.eot?#iefix') format('embedded-opentype'),
    url('../Fonts/nexa/NexaBold.woff') format('woff'),
    url('../Fonts/nexa/NexaBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Nexa Light';
    src: url('../Fonts/nexa/NexaLight.eot');
    src: url('../Fonts/nexa/NexaLight.eot?#iefix') format('embedded-opentype'),
    url('../Fonts/nexa/NexaLight.woff') format('woff'),
    url('../Fonts/nexa/NexaLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

body {
    margin-top: 20px;
    height: 200px
}

a {
    color: inherit;
}

a:hover {
    text-decoration: none;
}

.header_top {
    margin-top: 75px;
    margin-bottom: -75px;
    border-top: solid 3px #CCC;
}

.header_img {
    padding-left: 0px;
}

.callout {
    margin-top: 150px;
    background-color: white;
    border: solid 2px #CCC;
    padding: 25px;
    text-align: center;
    height: 235px;
    border-radius: 5px;
}

.callout :hover {
    color: white;
    text-decoration: none;
}

.callout > .brand_title {
    font-size: 21pt;
    font-family: 'Nexa Bold', sans-serif;
    color: #4D4D4E;
    margin-top: 15px;
}

.callout > .brand_component {
    font-size: 15pt;
    font-family: 'Nexa Light', sans-serif;
    color: #4D4D4E;
}

.callout > hr {
    width: 140px;
    size: 2;
    color: #CCCCCC;
}

.callout > .sm_box {
    background-color: white;
    color: #4D4D4E;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    font-family: 'Nexa Bold', sans-serif;
    font-size: 12pt;
    text-decoration: none;
    border-radius: 5px;
    height: 40px;
}

.callout > .sm_box:hover {
    color:white;
    text-decoration: none;
}

.callout > .sm_box > .sm_launch {
    font-size: 12pt;
    font-family: 'Nexa Bold', sans-serif;
    color: #4D4D4E;
    margin-top: 9px;
}

.callout > .sm_box > .sm_launch:hover {
    color:white;
    text-decoration: none;
}

#juniper { border: solid 2px #6FCCDD; }
#juniper:hover { background-color: #6FCCDD; }

#hickory { border: solid 2px #B0D358; }
#hickory:hover { background-color: #B0D358; }

#walnut { border: solid 2px #F3AE20; }
#walnut:hover { background-color: #F3AE20; }

#redwood { border: solid 2px #F0494B; }
#redwood:hover { background-color: #F0494B; }

#maple { border: solid 2px #A87AB6; }
#maple:hover { background-color: #A87AB6; }

#sycamore { border: solid 2px #7E8DC7; }
#sycamore:hover { background-color: #7E8DC7; }



/* footer */

.divider {
    padding-top: 80px;
    border-bottom: solid #CCC 3px;
}

h2 {
    font-family: 'Nexa Bold', sans-serif;
    font-size: 20px;
}

.section {
    border-right: solid 2px #CCC;
    text-align: center;
    height: 160px;
}

.footer-sections {
    padding-top: 20px;
}

.footer-sections > div:last-child {
    border-right: none;
}

#section_title1 { color: #6FCCDD; }
#section_title2 { color: #B0D358; }
#section_title3 { color: #F3AE20; }
#section_title4 { color: #F0494B; }
#section_title5 { color: #A87AB6; }
#section_title6 { color: #7E8DC7; }

.section_title {
    font-size: 30px;
}

.section_title:hover {
    text-decoration: underline;
    /* text-decoration-thickness: 5px; */
    text-decoration-color: inherit;
    /* text-decoration-style: solid;
    text-underline-position: under; */
}

.sub_content > a {
    font-family: 'Nexa Light', sans-serif;
    color: #4D4D4E;
    line-height: 8px;
}

.sub_content > a:hover {
    font-family: 'Nexa Bold', sans-serif;
    text-decoration: underline;
}

@media (max-width: 1024px) {
    #header_top {
        display:none;
    }
}


@media (max-width: 736px) {
    .section {
        border-right: none;
        height: 80px;
    }
}