/*
    Theme Name:     CFI
    Author:         Flying Hippo
    Author URI:     http://flyinghippo.com
    Template:       cfi
    Version:        1.0.0
*/

/* Header */
.header .bg-header-hack {
    background-image: url(images/bg-header-large.png);
}

/* Background */

body.home.custom-background{background-image:none !important;}
body .wave {display:block; background:url('images/watermark-wave.svg') no-repeat; padding-bottom:100px; background-position-y: 210px;}



body.home #hero-carousel .slick-arrow{
    z-index: 2;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background:transparent;
    border:0;
    text-indent: -9999px;
    overflow: hidden;
    width:50px;
    height:50px;
}

body.home #hero-carousel .slick-arrow:focus{outline:none;}

body.home #hero-carousel .slick-prev{
    left:0;
    background: url('images/left-arrow.svg') center center no-repeat;

}

body.home #hero-carousel .slick-next{
    right:0;
    background: url('images/right-arrow.svg') center center no-repeat;
}

body.home #hero-carousel .slick-prev:hover,
body.home #hero-carousel .slick-next:hover {opacity:.7;}

body.home #hero-carousel .slick-slide{
    position:relative;
    background-size: cover;
    background-position: center center;
    z-index: 1;

}

body.home #hero-carousel .slick-slide .content-block{
    position: absolute;
    top: calc(50% - 50px);
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 3;
}

body.home #hero-carousel .slick-slide .content-block h1{font-size:48px; text-transform: uppercase; text-shadow: 0 2px 14px rgba(0,0,0,0.50); position:relative;}
body.home #hero-carousel .slick-slide .content-block h1:after{content:''; width:50px; height:4px; background-color: white; display:block; left:50%; bottom:-15px; transform: translateX(-50%); position: absolute;}
body.home #hero-carousel .slick-slide .content-block p{font-size:20px; font-weight:500; letter-spacing: 1.68px;text-align: center; text-shadow: 0 2px 8px rgba(0,0,0,0.50);}

body.home #hero-carousel .slick-slide .overlay::before{
    content:'';
    background-color: rgba(0,0,0,.4);
    position: absolute;
    top:0;
    left:0;
    right:0;
    height:100%;
    width:100%;
    display:block;
    z-index: 2;

}


body .home-top-callout h3,
body .home-bottom-callout h3{
    font-size: 26px;
    letter-spacing: 2.28px;
    text-align: center;
    line-height: 26px;
    font-style: normal;
    text-transform: uppercase;
}


body #home-top-callout-wrapper{display:flex; flex-direction: row; max-width:1140px;margin:-160px auto auto auto;}

body .home-top-callout{
    max-width:350px;
    width:33.33%;
    padding:30px 20px;
    margin:15px;
    background: #FFFFFF;
    box-shadow: 0 2px 34px 0 rgba(0,0,0,0.23);
    font-family: "freight-sans-pro",sans-serif;
    font-style: normal;
    min-height:360px;
    position: relative;
}


body .home-top-callout h3{
    color: #C0B800;
}

body .home-top-callout p{
    font-size: 16px;
    color: #373935;
    letter-spacing: 1.4px;
    text-align: center;
    font-style: normal;
}

body.home a.btn{
    font-weight:500;
    font-size: 18px;
    color: #FFFFFF;
    letter-spacing: 1.58px;
    text-align: center;
    width:100%;
    padding:10px;
    max-width:222px;
    background: #005486;
    border-radius: 8px;
    display:block;
    margin:auto;
    text-transform: uppercase;
    font-style: normal;
}

body.home a.btn:hover{
    background: #00436B;

}

body .home-top-callout a.btn{
    position: absolute;
    bottom:40px;
    left:50%;
    transform: translateX(-50%);
}


body #home-bottom-callout-wrapper{display:flex; flex-direction: row; max-width:calc(1140px - 60px); margin:auto; padding:40px 15px;}

body .home-bottom-callout{
    max-width:520px;
    width:50%;
    margin:15px;
    box-shadow: 0 2px 34px 0 rgba(0,0,0,0.23);
    font-family: "freight-sans-pro",sans-serif;
    font-style: normal;
    min-height:470px;
    position: relative;
    background: url('images/two-cta-background.svg') #025687 right top no-repeat; background-size: contain;
}

body .home-bottom-callout .content-block *{
    text-align: left;
}

body .home-bottom-callout .content-block{padding:20px; text-align: left; display:block; max-width:356px; }
body .home-bottom-callout .callout-img{background-size:cover !important;padding-bottom:38.31%;width:100%;display:block;}
body .home-bottom-callout h3{
    color: #fff;
}

body .home-bottom-callout a.btn{
    position: relative;
    left:unset;
    transform: unset;
    margin:30px 0;
    color:#005486;
    background-color: #fff;
}

body .home-bottom-callout a.btn:hover{
    background-color: #D4D4D4;
}

.footer-bg {
    background-image:none !important;
    background-position:left top;
    background-repeat: no-repeat;
}


/* Responsive Styles */

@media (min-width: 1200px) {
    .nav-menu {
        width: 82%;
    }

}


@media (max-width: 1199px) and (min-width: 700px){
    .header .header-int {
        width: 100%;
        max-width:960px;

    }
    .flags {
        position: absolute;
        right: 13.6em;
        text-align: center;
        top: -1.25em;
        width: auto;
    }
    .header .search-module {
        top: -15px;
    }

    .header .nav-menu {
        top: 30px;
        right: 0;
        font-size: .75em;
    }
}


@media (max-width: 960px) {
    body.home #hero-carousel .slick-slide .content-block h1{font-size:30px;}
    body.home #hero-carousel .slick-slide .content-block p{font-size:16px;}
    body.home #hero-carousel .slick-slide .content-block{width:100%; max-width: 400px;}

    body #home-top-callout-wrapper,
    body #home-bottom-callout-wrapper{flex-direction: column;}

    body .home-top-callout{width:calc(100% - 40px); max-width:700px; margin-left:auto; margin-right:auto; min-height: unset;}
    body .home-top-callout a.btn{position:relative; bottom:unset; left:unset; transform: unset; margin-top:30px;}

    body .home-bottom-callout{max-width:calc(100% - 30px); width:100%;}

}

@media (max-width: 500px) {

    body.home #hero-carousel .slick-slide .content-block{width:100%; max-width: 300px;}
    .header{background-color: #fff;}
    .header .header-curve {
        height:114px;
        background-size: 2300px 100px;
    }
    body #home-top-callout-wrapper{margin-top:-30px;}
    body.home #hero-carousel .slick-slide .content-block{top:50%;}
}