/* --------------------------------------------------
	Project Name: The Andrews School - Back40 Design
	Developer: Brady Christopher
	Date: May, 2020
-------------------------------------------------- */

/* Fonts
-------------------------------------------------- */
@font-face {
	font-family: 'CrimsonSemiboldItalic';
	src: url('../fonts/Crimson-SemiboldItalic-webfont.eot');
	src: url('../fonts/Crimson-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/Crimson-SemiboldItalic-webfont.woff') format('woff'), url('../fonts/Crimson-SemiboldItalic-webfont.ttf') format('truetype'), url('../fonts/Crimson-SemiboldItalic-webfont.svg#CrimsonSemiboldItalic') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'BebasNeueRegular';
	src: url('../fonts/BebasNeue-webfont.eot');
	src: url('../fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/BebasNeue-webfont.woff') format('woff'), url('../fonts/BebasNeue-webfont.ttf') format('truetype'), url('../fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Global
-------------------------------------------------- */
body {
    background: #ECE6E0 url('../images2/body-bg.png') top repeat-x;
}

body.nav-is-active {
    overflow: hidden;
}

a, a:visited {
	color: #2B5C22;
	font-style: italic;
	text-decoration: none;
}

a:hover {
    color: #71AB67;
    text-decoration: none;
}

h1 {
    font: bold 24px/1.5 Helvetica, Arial, sans-serif;
}

h2 a, legend {
	margin-bottom: 8px;
	color: #1F2529;
	font: 24px/1.5 'BebasNeueRegular', Georgia, 'Times New Roman', Times, serif;
	letter-spacing: 1px;
}

h3 a {
    font: bold 16px/1.5 Helvetica, Arial, sans-serif;
}

h4, h4 a, h5, h5 a, h6, h6 a {
    font: bold 14px/1.5 Helvetica, Arial, sans-serif;
}

p, pre, hr, ul, ol, dl, table, fieldset {
    margin-bottom: 16px;
}

h2, h3, h4, h5, h6 {
    padding-bottom: 4px;
    color: #3e4449;
}

hr {
    border-color: #D5CBBF;
}

.mobile {
    display: none;
}

a.button {
    display: inline-block;
    background: rgb(112,168,101);
    background: -moz-linear-gradient(180deg, rgba(112,168,101,1) 0%, rgba(44,94,35,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(112,168,101,1) 0%, rgba(44,94,35,1) 100%);
    background: linear-gradient(180deg, rgba(112,168,101,1) 0%, rgba(44,94,35,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#70a865",endColorstr="#2c5e23",GradientType=1);
    color: #fff;
    font-family: 'Crimson Text';
    font-size: 16px;
    font-style: italic;
    font-weight: bold;
    border: 1px solid #33642C;
    padding: 15px;
    text-align: center;
    transition: opacity .2s ease;
}

a.button:hover {
    opacity: .8;
}

@media (max-width: 992px) {
    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }
}

/* Bootstrap Containers
-------------------------------------------------- */
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 960px;
    }
}

/* Header
-------------------------------------------------- */
.site-header {
    background-image: url('../images2/header-bg.png');
    background-position: top center;
    background-repeat: no-repeat;
    text-align: center;
}

.nav-is-active .site-header {
    background: #fff;
}

.header-row {
    position: relative;
    padding: 25px 0;
}

.logo {
    display: inline-block;
}

.social-icons {
    margin: 0;
    position: absolute;
    top: 0;
    right: 10px;
    display: flex;
}

.social-icons li {
    list-style: none;
    margin-right: 10px;
}

.social-icons a {
    width: 40px;
    height: 40px;
    background: url('../images2/social-icons.jpg') no-repeat;
    text-indent: -9999px;
    display: block;
}
    
.social-facebook a	{
    background-position: 0 0;
}

.social-rss a {
    background-position: -40px 0;
}

.social-email a	{
    background-position: -80px 0;
}

.social-facebook a:hover {
    background-position: 0 -40px;
}

.social-rss a:hover {
    background-position: -40px -40px;
}

.social-email a:hover {
    background-position: -80px -40px;
}

.social-icons.mobile {
    display: none;
    position: relative;
    right: unset;
    padding-left: 20px;
    margin-right: 15px;
}

.top-nav {
    margin: 0;
    display: flex;
    position: absolute;
    right: 10px;
    bottom: 25px;
}

.top-nav li {
    list-style: none;
    padding: 0 12px 0 6px;
    background: url('../images2/pipe.png') right 10px no-repeat;
}

.top-nav li:last-of-type {
    background: none;
}

.top-nav a {
    color: #9F927B;
    font-size: 12px;
}

.top-nav a:hover {
    color: #3E4449;
}

.top-nav.mobile {
    display: none;
    position: relative;
    right: unset;
    top: unset;
    margin-top: 60px;
    margin-bottom: 60px;
    padding-left: 45px;
}

.top-nav.mobile li {
    background: none;
    padding: 0;
    margin-bottom: 15px;
}

.top-nav.mobile li a {
    font-size: 16px;
    color: #fff;
}

.mobile-contact {
    display: none;
}

.mobile-phone {
    font-size: 22px;
    font-family: 'Crimson Text';
    font-style: italic;
    color: #fff;
}

.mobile-phone img {
    height: 32px;
    width: auto;
    margin-right: 5px;
}

@media (max-width: 992px) {

    .site-header {
        text-align: left;
        background-position: top right;
    }

    .site-header .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .site-header .social-icons,
    .site-header .top-nav {
        display: none;
    }

    .site-header .top-nav.mobile {
        display: block;
    }

    .site-header .social-icons.mobile {
        display: flex;
    }

    .mobile-contact {
        display: flex;
        align-items: flex-end;
    }

}

@media (max-width: 545px) {

    .site-header {
        background-position-x: 70%;
    }

}

/* Navicon
-------------------------------------------------- */
.navicon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
    display: none;
}

.navicon .icon-close {
    padding: 0;
    width: 20px;
    height: 20px;
    display: block;
}

.navicon .icon-close:before,
.navicon .icon-close:after {
    content: '';
    height: 3px;
    transition: transform .3s ease-in-out, box-shadow .3s ease-in-out, 
                background-color .3s ease-in-out, width .3s ease-in-out;
    background-color: #2c5c22;
    display: block;
    position: relative;
}

.navicon .icon-close:before {
    box-shadow: 0 6px 0 #2c5c22;
    margin-bottom: 9px;
}

.navicon .icon-close:after {
    width: 70%;
}

.nav-is-active .navicon .icon-close:before {
    box-shadow: 0 0 0 #2c5c22;
    transform: translateY(6px) rotate(45deg);
    background-color: #2c5c22;
}

.nav-is-active .navicon .icon-close:after {
    transform: translateY(-6px) rotate(-45deg);
    background-color: #2c5c22;
    width: 100%;
}

@media (max-width: 992px) {

    .navicon {
        display: block;
    }

}

/* Nav Menu
-------------------------------------------------- */
.main-nav {
    background: url('../images2/nav-bg.png') 0 0 repeat-x;
}

.main-menu {
    margin: 0;
    display: flex;
    padding: 0;
    position: relative;
}

.main-menu li {
    list-style: none;
}

.main-menu > li {
    border-right: 1px solid #1F2529;
}

.main-menu li:last-of-type {
    border-right: 0;
}

.main-menu a {
    padding: 0 22px;
	color: #FFF;
	font: 20px/44px 'CrimsonSemiboldItalic', Georgia, 'Times New Roman', Times, serif;
    display: flex;
    height: 100%;
}

/* Second Level Navigation */
.main-menu div {
    width: 100%;
    padding-left: 238px;
    text-align: left;
    background: url('../images2/bg_nav_menu.jpg') top left no-repeat;
    background-size: cover;
    display: none;
    position: absolute;
    top: 44px;
    left: 0;
    z-index: 1;
}

.main-menu ul {
    width: 200px;
    margin: 20px 10px 20px 10px;
    border-right: 1px solid #2C3237;
    padding-left: 0;
}

.main-menu ul.last {border: 0;}
.main-menu ul li {
    display: block;
    float: none;
}

.main-menu ul a {
    width: 176px;
    padding: 4px 12px;
    color: #B7BCC1;
    font: italic 14px/1.5 Arial, Helvetica, sans-serif;
    display: block;
}

.main-menu ul a:hover {
    background: none;
    color: #FFF;
}

@media (min-width: 993px) {

    .main-menu a:hover {
        background: url('../images2/nav-bg.png') 0 -44px repeat-x;
    }

    .main-menu > li:hover div {
        display: flex;
    }    
}

@media (max-width: 992px) {
    .main-nav {
        display: none;
        position: fixed;
        z-index: 99;
        top: 116px;
        left: 0;
        width: 100%;
        height: 100%;
        overflow-y: scroll;
        padding-bottom: 265px;
        background: rgb(60,66,71);
        background: -moz-linear-gradient(180deg, rgba(60,66,71,1) 0%, rgba(32,37,41,1) 100%);
        background: -webkit-linear-gradient(180deg, rgba(60,66,71,1) 0%, rgba(32,37,41,1) 100%);
        background: linear-gradient(180deg, rgba(60,66,71,1) 0%, rgba(32,37,41,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3c4247",endColorstr="#202529",GradientType=1);
    }

    .nav-is-active .main-nav {
        display: block;
    }

    .main-menu {
        flex-direction: column;
    }

    .main-menu > li {
        position: relative;
        border: none;
        background: rgb(60,66,71);
        background: -moz-linear-gradient(180deg, rgba(60,66,71,1) 0%, rgba(32,37,41,1) 100%);
        background: -webkit-linear-gradient(180deg, rgba(60,66,71,1) 0%, rgba(32,37,41,1) 100%);
        background: linear-gradient(180deg, rgba(60,66,71,1) 0%, rgba(32,37,41,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3c4247",endColorstr="#202529",GradientType=1);
    }

    .main-menu > li:after,
    .main-menu > li.active:before {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 20px;
        height: 20px;
        width: 20px;
        background-image: url('../images2/caret-right.png');
        background-size: cover;
        background-repeat: no-repeat;
    }

    .main-menu > li.active:after {
        display: none;
    }

    .main-menu > li.active:before {
        left: 20px;
        right: auto;
        background-image: url('../images/caret-left.png');
    }

    .main-menu > li > a {
        padding-left: 45px;
    }

    .main-menu > li.active {
        position: absolute;
        z-index: 10;
        top: 0;
        left: 0;
        width: 100%;
        padding-left: 30px;
    }

    .main-menu > li.active > div {
        display: block;
    }

    .main-menu div {
        display: none;
        position: absolute;
        top: 45px;
        width: 100%;
        height: 100vh;
        padding: 15px;
        padding-top: 20px;
        background: rgb(101,107,111);
        background: -moz-linear-gradient(180deg, rgba(101,107,111,1) 0%, rgba(64,68,72,1) 100%);
        background: -webkit-linear-gradient(180deg, rgba(101,107,111,1) 0%, rgba(64,68,72,1) 100%);
        background: linear-gradient(180deg, rgba(101,107,111,1) 0%, rgba(64,68,72,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#656b6f",endColorstr="#404448",GradientType=1);
    }

    .main-menu ul {
        margin: 0;
        width: 100%;
        border-right: 0;
    }

    .main-menu div > ul {
        padding: 0;
        margin: 0;
    }

    .main-menu div > ul li {
        margin-bottom: 15px;
        border-right: 0;
    }

    .main-menu div > ul a {
        color: #E1E1E1;
        font-size: 16px;
        width: 100%;
    }
}

/* Homepage
-------------------------------------------------- */
.hero .content-col {
    display: flex;
    padding-right: 0;
}

.hero .image-col {
    padding-left: 0;
}

.hero-content {
    background: #1F4918 url('../images2/hero-bg.png') top repeat-x;
    color: #fff;
    padding: 30px 40px;
}

.hero-content h2 {
    color: #fff;
}

.hero-content p {
    margin-bottom: 40px;
}

.hero-image {
    background-image: url('../images2/hero.jpg');
    background-size: cover;
    min-height: 365px;
}

.hero-cta {
    font: 28px 'CrimsonSemiboldItalic', Georgia, 'Times New Roman', Times, serif;
    text-shadow: 0 0 5px #2B5C22;
    color: #fff;
    display: block;
}

.hero-cta .icon-phone {
    margin-right: 5px;
}

.services {
    margin-top: 30px;
    margin-bottom: 80px;
}

.services [class*='col-'] {
    padding-left: 40px;
    padding-right: 40px;
    position: relative;
}

.services [class*='col-']:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 1px;
    background-color: #DAD2C6;
}

.services [class*='col-']:last-of-type:after {
    display: none;
}

.services h2,
.contact h2 {
    font: 26px/26px 'BebasNeueRegular', Georgia, 'Times New Roman', Times, serif;
}

.services p {
    margin-bottom: 5px;
}

.services a {
    font-weight: bold;
}

.coding-heading,
.billing-heading {
    margin-bottom: 36px;
}

.contact {
    padding: 40px 25px;
    border-top: 1px solid #DAD2C6;
    border-bottom: 1px solid #DAD2C6;
    font-size: 12px;
}

.contact strong {
    font-size: 14px;
}

.contact p {
    margin-bottom: 15px;
}

.contact p:last-of-type {
    margin-bottom: 0;
}

.search {
    height: 24px;
}

.search form {
    display: flex;
}

.contact .search p {
    font-size: 14px;
    margin-bottom: 8px;
}

.search input {
    border: 0;
    outline: 0;
}

.search-field {
    width: 200px;
    height: 25px;
    margin: 0;
    padding: 0 10px;
    background: url('../images2/bg_search_field.gif') no-repeat;
    color: #3E4449;
    font: 12px/25px Arial, Helvetica, sans-serif;
}

.search-btn {
    width: 25px;
    height: 25px;
    padding: 0;
    background: url('../images2/search-btn.png') no-repeat;
}

@media (max-width: 992px) {
    .hero {
        flex-direction: column-reverse;
    }

    .hero .image-col,
    .hero .content-col {
        padding-right: 0;
        padding-left: 0;
    }

    .hero-image {
        min-height: 500px;
    }

    .hero-cta {
        text-align: center;
    }

    .coding-heading,
    .billing-heading {
        margin-bottom: 8px;
    }

    .services {
        margin-top: 60px;
        margin-bottom: 0;
    }

    .services [class*='col-'] {
        margin-bottom: 40px;
        padding-bottom: 40px;
        border-bottom: 1px solid #DAD2C6;
        padding-left: 15px;
        padding-right: 15px;
    }

    .services [class*='col-']:after {
        display: none;
    }

    .contact {
        border: 0;
        padding: 0;
    }

    .contact .col-lg-8,
    .contact form {
        border-bottom: 1px solid #DAD2C6;
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

}

@media (max-width: 600px) {
    .hero-image {
        min-height: 300px;
    }
}

/* Interior Page
-------------------------------------------------- */
.page-main {
    padding-bottom: 60px;
}

.page-title-wrap {
    color: #fff;
    padding: 30px 40px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 45px;
    background: rgb(79,110,43);
    background: -moz-linear-gradient(180deg, rgba(79,110,43,1) 0%, rgba(14,46,9,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(79,110,43,1) 0%, rgba(14,46,9,1) 100%);
    background: linear-gradient(180deg, rgba(79,110,43,1) 0%, rgba(14,46,9,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4f6e2b",endColorstr="#0e2e09",GradientType=1);
}

.page-title-wrap a {
    font: 26px 'CrimsonSemiboldItalic', Georgia, 'Times New Roman', Times, serif;
    text-shadow: 0 0 5px #2B5C22;
    color: #fff;
}

.page-title {
    font: 26px/1.5 'BebasNeueRegular', Georgia, 'Times New Roman', Times, serif;
    letter-spacing: 1px;
}

.page-title-wrap a:hover {
    color: #71AB67;
}

.page-title-contact {
    display: flex;
}

.chat-btn {
    background: rgb(112,168,101);
    background: -moz-linear-gradient(180deg, rgba(112,168,101,1) 0%, rgba(44,94,35,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(112,168,101,1) 0%, rgba(44,94,35,1) 100%);
    background: linear-gradient(180deg, rgba(112,168,101,1) 0%, rgba(44,94,35,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#70a865",endColorstr="#2c5e23",GradientType=1);
    border: 1px solid #33642C;
    font-size: 0;
    text-indent: -9999px;
    height: 45px;
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;
    transition: opacity .2s ease;
}

.chat-btn:hover {
    opacity: .8;
}

.main-content {
    padding-left: 30px;
    border-left: 1px solid #DAD2C6;
}

.main-content img {
    max-width: 100%;
    height: auto;
}

.spacer {
    display: block;
    height: 70px;
}

.steps {
    margin-top: 35px;
}

.step {
    display: flex;
    align-items: flex-start;
    position: relative;
    margin-bottom: 30px;
}

.step:after {
    content: '';
    position: absolute;
    left: 42px;
    top: 145px;
    height: calc(100% - 145px);
    width: 2px;
    background-color: #2c5c22;
}

.step-image {
    margin-right: 35px;
}

.step h2 {
    font: 40px/1.1 'BebasNeueRegular', Georgia, 'Times New Roman', Times, serif;
    text-transform: uppercase;
    color: #3e4449;
    margin-top: 45px;
    margin-bottom: 30px;
}

.step-content > p:last-of-type {
    margin-bottom: 0;
}

@media (max-width: 992px) {

    .page-main {
        padding-bottom: 15px;
    }
    
    .page-title-wrap {
        padding: 20px;
    }

    .page-title-phone {
        display: none;
    }

    .spacer {
        height: 30px;
    }

    .main-content {
        padding-left: 15px;
        border-left: none;
    }
}

@media (max-width: 545px) {
    .page-title-wrap {
        margin-left: -15px;
        margin-right: -15px;
    }

    .step-image {
        width: 60px;
        height: auto;
        margin-right: 20px;
    }

    .step h2 {
        margin-top: 0;
        margin-bottom: 10px;
    }

    .step:after {
        top: 110px;
        height: calc(100% - 110px);
        left: 29px;
    }
}

/* Subnav
-------------------------------------------------- */
.subnav {
    padding: 0;
    padding-right: 30px;
    margin: 0;
}

.subnav li {
    list-style: none;
    margin-bottom: 30px;
}

.subnav > li > ul {
    padding-left: 30px;
    margin-top: 15px;
}

.subnav > li > ul > li {
    margin-bottom: 10px;
}

@media (max-width: 992px) {
    .sidebar {
        display: none;
    }
}

/* Footer
-------------------------------------------------- */
.site-footer {
    background: url('../images2/footer-bg.png') top repeat-x;
    color: #9F927B;
    font-size: 12px;
    padding-top: 30px;
    padding-bottom: 50px;
}

.inside-page .site-footer .container {
    border-top: 1px solid #DAD2C6;
    padding-top: 30px;
}

.bbb-col {
    text-align: center;
}

.footer-nav {
    margin: 0;
    padding: 0;
    margin-bottom: 30px;
    display: flex;
}

.footer-nav li {
    list-style: none;
    padding: 0 12px 0 6px;
    background: url('../images2/pipe.png') right 5px no-repeat;
}

.footer-nav li:first-of-type {
    padding-left: 0;
}

.footer-nav li:last-of-type {
    background: none;
}

.footer-nav a {
    color: #9F927B;
    font-size: 12px;
}

.footer-nav a:hover {
    color: #3E4449;
}

@media (max-width: 992px) {
    .site-footer {
        text-align: center;
    }

    .bbb-col {
        margin-top: 80px;
        margin-bottom: 30px;
    }

    .inside-page .bbb-col {
        margin-top: 15px;
    }

    .footer-nav {
        justify-content: center;
    }

    .copyright strong {
        display: block;
        margin-top: 5px;
    }
}