﻿
.main {
    width: 100%;
    display: table;
    position: relative;
    background: url(/assets/images/young-professionals-new-min.jpg) no-repeat;
    background-position: 50% 35%;
    background-size: cover;
}

.main-filter {
    padding: 60px 0;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.75+33,0.3+100 */
    background: -moz-linear-gradient(left, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 33%, rgba(0,0,0,0.3) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 33%,rgba(0,0,0,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 33%,rgba(0,0,0,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#4d000000',GradientType=1 ); /* IE6-9 */
}

.main .main-text {
    color: #ccc;
    position: relative;
    padding-right: 100px;
}

.main .main-text {
    font-size: 1.50em;
    line-height: 1.25;
}

    .main .main-text h2 {
        font-size: 2.75rem;
        line-height: 1.2;
        margin-top: 4rem;
    }


    .main .main-text h1,
    .main .main-text h2 {
        color: #fff;
    }



.main-text p strong {
    color: #fff;
}

.main .form {
    /*position: absolute;
    top: 40px;
    right: 40px;
    width: 40%;*/
    background: #eee;
    padding: 25px;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.35);
}

    .main .form form {
        padding: 0;
    }


    .main .form select option {
        background: #fff;
    }

    .main .form .country {
        position: relative;
    }

    .main .form input,
    .main .form select {
        width: 100%;
        /*padding: 10px;*/
        margin-bottom: 15px;
        border-radius: 0px;
        border: solid 1px #666;
        color: #333;
    }

        .main .form select option {
            color: #333;
        }

        .main .form select:invalid,
        select option[value=""] {
            color: #999;
        }

        .main .form input.btn {
            padding: 15px;
            margin-bottom: 0px;
            color: #fff;
            border: 0;
            font-size: 2rem;
            font-weight: 600;
        }


.home-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 30px !important;
}

.licensed-hr2 {
    border: 0;
    margin: 5px 0;
    border-top: #00558cbf 1px solid !important;
    border-bottom: #fff 1px solid;
}

.licensed-hr3 {
    border: 0;
    margin: 30px 0;
    border-top: #00558cbf 2px solid !important;
    border-bottom: #f8e605ba 2px solid;
}

.licensed-h2 {
    font-size: 2.5em;
    margin-top: 50px;
    margin-left: 15px
}

.licensed-h2a {
    font-size: 2.5em;
    margin-top: 50px;
}

.spacer-para {
    padding-bottom: 30px;
}

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700 !important;
}

.videos {
    padding: 80px 0 80px;
    width: 100%;
}

.text-muted {
    color: #000;
}

.home-hero {
    display: flex;
}

.topten-width {
    max-width: 800px;
}



.main h1.join-us {
    font-weight: 700;
    font-size: 2.5em;
    line-height: 1.05em;
}

.globe-absolute {
    background: url('/assets/images/globe2.png') no-repeat #fff;
    background-position-x: calc(100% + 250px);
    background-position-y: calc(100% + 250px);
}

#footer.licensed-agents-footer {
    border-top: 5px solid #ffdc4f;
}






@media (max-width: 1299px) {
    .globe-absolute {
        background-size: 45%;
        background-position-x: calc(100% + 125px);
        background-position-y: calc(100% + 125px);
    }
}




@media (max-width: 991px) {
    .globe-absolute {background: none;}

    .main .main-text h2 { font-size: 2.2rem;}

    .main-filter {
        padding: 30px 0;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.75+33,0.3+100 */
        background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 33%, rgba(0,0,0,0.3) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 33%,rgba(0,0,0,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%,rgba(0,0,0,0.75) 33%,rgba(0,0,0,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#4d000000',GradientType=0 ); /* IE6-9 */
    }

    .main {background-position: 100% 0%;}
    .main .form {margin-top: 40px;}

    .videos .row div:first-child {margin-bottom: 30px;}

    #topNav {z-index: 0;}
    #topNav > .container {height: 90px;}

    



}

@media screen and (max-width: 700px) {
    .home-hero {
        flex-direction: column;
    }
}


@media screen and (max-width: 480px) {
    .main .form {
        padding: 15px;
    }
    .main h1.join-us {
        font-size: 1.75em;
    }

    .main .main-text {
        padding: 0;
        font-size: 1.25em;
    }
}





/* TEAL BG BLOCK w VIDEO GALLERY PLAYER */

.full-teal {
    margin: 3rem 0;
    display: flex;
    overflow: hidden;
    position: relative;
    border-radius: 0% 100% 0% 100% / 79% 0% 100% 12%;
    background: -moz-radial-gradient(center, ellipse cover, rgba(174, 228, 227, 1) 0%, rgba(100, 204, 201, 1) 44%, rgba(100, 204, 201, 1) 100%);
    /* ff3.6+ */
    background: -moz-radial-gradient(center, ellipse cover, rgba(174, 228, 227, 1) 0%, rgba(100, 204, 201, 1) 85%, rgba(100, 204, 201, 1) 100%);
    /* ff3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(174, 228, 227, 1)), color-stop(85%, rgba(100, 204, 201, 1)), color-stop(100%, rgba(100, 204, 201, 1)));
    /* safari4+,chrome */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(174, 228, 227, 1) 0%, rgba(100, 204, 201, 1) 85%, rgba(100, 204, 201, 1) 100%);
    /* safari5.1+,chrome10+ */
    background: -o-radial-gradient(center, ellipse cover, rgba(174, 228, 227, 1) 0%, rgba(100, 204, 201, 1) 85%, rgba(100, 204, 201, 1) 100%);
    /* opera 11.10+ */
    background: -ms-radial-gradient(center, ellipse cover, rgba(174, 228, 227, 1) 0%, rgba(100, 204, 201, 1) 85%, rgba(100, 204, 201, 1) 100%);
    /* ie10+ */
    background: radial-gradient(ellipse at center, rgba(174, 228, 227, 1) 0%, rgba(100, 204, 201, 1) 85%, rgba(100, 204, 201, 1) 100%);
    /* w3c */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aee4e3', endColorstr='#64ccc9', GradientType=1);
    /* ie6-9 */
    background-position: -30rem -10rem;
}

.full-teal-left {
    align-self: flex-end;
}

    .full-teal-left .globe {
        max-width: 100%;
        position: relative;
        left: -7rem;
        bottom: -6rem;
        transition: .3s;
    }

        .full-teal-left .globe:hover {
            transform: scale(1.05) rotate(2deg);
        }

.full-teal-mid {
    text-align: right;
    padding-top: 3rem;
    width: 38vw;
}

    .full-teal-mid h2 {
        margin-top: 3rem;
        font-size: 3.4vw;
        line-height: 1.1;
        font-weight: 900;
        letter-spacing: -2px;
        color: #00558C;
    }

    .full-teal-mid p {
        font-size: 1.8vw;
        font-weight: 700;
        color: white;
        line-height: 2.5vw;
        text-shadow: 0 0 20px rgba(0, 85, 140, .5);
    }

.full-teal-right {
    width: 43vw;
    margin: 3rem 3rem 1rem;
}

@media all and (max-width: 1100px) {
    .full-teal {
        flex-direction: column;
        padding: 0 2rem 2rem;
        border-radius: 0;
        margin-bottom: 2rem;
    }

    .full-teal-left {
        display: none;
    }

    .full-teal-mid {
        text-align: left;
        width: 100%;
        margin-bottom: 0;
    }

        .full-teal-mid h2 {
            margin-top: 1rem;
            font-size: 3rem;
            line-height: 1.2;
            letter-spacing: -.5px;
        }

        .full-teal-mid p {
            font-size: 1.25rem;
            line-height: 1.3;
        }

    .full-teal-right {
        width: 100%;
        margin: 0;
    }
}
/* VIDEO PLAYER  */
/* top player box */
.full-teal .vimeo-gallery {
    box-shadow: 6px 6px 0px rgba(0,0,0,.1)
}

    .full-teal .vimeo-gallery .embed-container {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        max-width: 100%;
    }

        .full-teal .vimeo-gallery .embed-container iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: white;
            background-image: url('/assets/images/gear-loading..gif');
            background-repeat: no-repeat;
            background-position: center center;
        }
/* slider */
.full-teal .sldr {
    position: relative;
    overflow: hidden;
    margin: 1rem 0;
}

.full-teal .slides {
    position: relative;
    display: flex;
    width: 10000px;
    box-sizing: border-box;
}

.full-teal .slide {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.full-teal .slide-thumb {
    cursor: pointer;
    border: 2px solid transparent;
    width: 30%;
    max-width: 300px;
    padding: 3px;
    opacity: .7;
}

    .full-teal .slide-thumb.selected {
        border-color: #00558C;
        background-color: white;
        filter: none;
        opacity: 1;
    }

/* arrows */
.full-teal .sldr-nav {
    position: absolute;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
    color: #00558C;
    padding: 8px 0;
    font-size: 2rem;
}

.full-teal .sldr-nav-l {
    left: 0;
}

.full-teal .sldr-nav-r {
    right: 0;
}

@media all and (max-width: 500px) {
    .full-teal .sldr-nav {
        font-size: 1rem;
    }
}