/** general **/

@font-face {
    font-family: 'lato-light';
    src:url('../css/fonts/lato/lato-light.ttf');
}

@font-face {
    font-family: 'lato-regular';
    src:url('../css/fonts/lato/lato-regular.ttf');
}

*
{
    font-family: Open Sans;
    font-size: 14px;
}

.col-sm-4
{
    width: 25% !important;
}

.light
{
    font-family: lato-light;
}

.italic
{
    font-family: Open Sans;
    font-style: italic;
}

.bold
{
    font-family: Open Sans;
    font-weight: bold;
}

a.bold
{
    color: white;
}

.title
{
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 35px;
    display: block;
    text-align: center;
    margin-bottom: 20px;
    color: white;
}

.blue-bg
{
    background-color: #0c4c88;
}

span.p-title
{
    text-transform: uppercase;
    font-size: 30px;
    letter-spacing: 3px;
    display: block;
    width: 500px;
    padding: 5px;
    background-color: white;
    color: #8ca9c7;
    margin-bottom: 15px;;
}

.btn
{
    font-family: lato-light;
    text-transform: uppercase;
    font-size: 20px;
    background-color: white;
    color: #2b5d8d;
    border-radius: 10px;
    text-align: center;
    padding: 15px;
    width: 240px;
    margin-top: 15px;
}

div.right-box
{
    width: 450px;
    padding: 25px;
    float: right;
}


.visible-xxs
{
    background-color: transparent;
    display: none;
}

/** / genral **/




/** top header **/
#top-header
{
    background-color: #8cbceb;
    position: fixed;
    top: 0;
    width: 100%;
    border-bottom-style: solid;
    border-bottom-color: #4e8ac2;
    border-bottom-width: 1px;
    z-index: 999;
}

span#top-logo-name, span#top-logo-name-mobile
{
    color: white;
    text-transform: uppercase;   
    margin-left: 15px;
    font-size: 18px;
    letter-spacing: 3px;
}

img#top-logo, img#top-logo-mobile
{
    height: 32px;
    width: 40px;
    vertical-align: bottom;
}

span#top-logo-name-mobile
{
    letter-spacing: 1px;
    margin-left: 5px;
}

#logo-mobile
{
    float: right;
    margin-right: 8px;
    margin-top: 6px;
}

#to-hide
{
    position: absolute;
    right: 0;
    width: 100px;
    opacity: 0;
}

.navbar-default .navbar-nav > li > a.top-menu-link
{
    color: white;
    text-transform: uppercase;
}

/** /top header **/


/** bg1 **/

div#bg1
{
    background: url('../images/bg1.jpg') no-repeat;
    background-size: 100% 100%;
    height: 670px;
}

div#middle-text
{
    text-align: center;
    width: 400px;
    margin: auto;
    position: absolute;
    top: 35%;
    left: 35%;
}

img#logo-center
{
    width: 95px;
    height: 85px;
}

span#logo-name-center
{
    display: block;
    color: white;
    font-size: 37px;
    margin-top: 15px;
    letter-spacing: 3px;
}

span#slogan-center
{
    display: block;
    color: white;
    font-size: 40px;
    margin-top: 8px;
    letter-spacing: 6px;
    text-transform: uppercase;
}


a#arrow-bottom
{
    display: block;
    margin-top: 10px;
}

a#arrow-bottom img
{
    width: 50px;
    height: 45px;
}

/** / bg1 **/

/** bg2 **/

div#bg2
{
    background: url('../images/bg2.jpg') no-repeat;
    background-size: 100% 100%;
    height: 500px;
    padding-left: 10%;
    padding-top: 40px;
}

#bg2 .parag
{
    width: 300px;
}

/** /bg2 **/

/** bg3 **/

div#bg3
{
    background: url('../images/bg3.jpg') no-repeat;
    background-size: 100% 100%;
    height: 940px;
    padding-right: 9%;
    padding-left: 10%;
    padding-top: 40px;
}

#bg3 .parag
{
    width: 380px;
    color: white;
} 



#bg3 .title
{
    text-align: left;  
}

/** /bg3 **/

/** bg4**/

div#bg4
{
    background-color: #5182b0;
    height: 1200px;
    padding-left: 10%;
    padding-top: 40px;
    padding-right: 9%;
}

#bg4 .parag
{
    color: white;
    width: 100%;
}

img.blue-square
{
    width: 200px !important;
    height: 200px;
}



#features
{
    margin-top: 50px;
    margin-bottom: 30px;
}

.btn2, 
#video-btn 
 {
    border: 3px solid #fff;
    border-radius: 20px;
    color: #fff;
    display: block;
    margin: 10px auto;
    padding: 10px;
    text-align: center;
	width:450px;
}
.btn2:hover {
	color:#fff;
	}


/** /bg4 **/


/* bg5 **/

div#bg5
{
    background: url('../images/bg5.jpg') no-repeat;
    background-size: 100% 100%;
    height: 1300px;
    padding-left: 10%;
    padding-top: 40px;
    padding-right: 9%;
}

#bg5 .parag
{
    color: white;
}

#bg5 .p-title
{
    color: #5f7030;
    width: 580px;
}

.light-box-row
{
    margin-top: 20px;
    margin-bottom: 20px;
}

.small-title
{
    font-family: lato-light;
    text-transform: uppercase;
    font-size: 23px;
    color: white;
    letter-spacing: 3px;
    display: block;
    margin-bottom: 8px;
}

a.fresco img
{
    width: 100%;
}

/** /bg5 **/


/** bg6 **/  

div#bg6
{
    background: url('../images/bg6.jpg') no-repeat;
    background-size: 100% 100%;
    height: 650px;  
    padding-left: 10%;
    padding-top: 40px;
    padding-right: 9%;
}

#bg6 .title
{
    text-align: left;
}

#bg6 .parag
{
    color: white;
}

/** /bg6 **/



/** bg7 **/

div#bg7
{
    background-color: #2b5d8d;
    height: 760px;
    padding-left: 10%;
    padding-top: 40px;
    padding-right: 9%;
}

#bg7 .parag
{
    text-align: center;
    color: white;
}


table#contact-form
{
    margin: auto;
    width: 700px;
    margin-top: 50px;
}

table#contact-form td
{
    padding: 8px;
    color: white;
}

input.form-input, textarea.form-input
{
    border: none;
    border-radius: 4px;
    background-color: #4b759e;
    padding: 15px;
    color: white;
    width: 300px;
}

textarea.form-input
{
    height: 120px; 
}

table#contact-form td .btn
{
    width: 300px;
    border-radius: 5px;
    color: #2b5d8d ;
}

/** /bg7 **/

/** footer **/
footer
{
    background-color: #8cbceb;
    padding-left: 10%;
    padding-top: 15px;
    padding-bottom: 10px;
    font-size: 12px;
    color: white;
    font-family: Montserrat;
}

/** /footer*/

@media (min-width: 992px) {

    div#bg4
    {
        height: 1180px;
    }

    div#bg5 {
        height: 1480px;
    }

}

@media (max-width: 992px) {

    #top-header .container
    {
        width: 100% !important;
    }
}

@media (max-width: 835px) {

    div#middle-text
    {
        left: 30%;
    }

    span.p-title
    {
        font-size: 20px;   
        width: 350px;
    }

    table#contact-form, input.form-input, textarea.form-input
    {
        width: 100%;
    }

}

@media (max-width: 768px) {
    #bg5 .p-title, span.p-title
    {
        width: 100%;
        font-size: 15px;
    }

    table#contact-form td .btn
    {
        width: 100%;
    }

    div#bg7, div#bg6, div#bg5, div#bg4, div#bg3, div#bg2
    {
        padding-left: 3%;
        padding-right: 3%;
    }
    
    div#bg6
    {
        background-size: 175% 100%;
    }

    div#middle-text
    {
        left: 5%;
        width: 90%;
    }

    #bg3 .parag {
        width: 100%;
    }

    div.right-box
    {
        width: 95%;
    }

    img.blue-square
    {
        width: 100%;
        height: auto;
    }
    
    

}

@media (max-width: 430px)
{
    .visible-xxs
    {
        display: block;
    }

    .hidden-xxs
    {
        display: none;
    }

    img#logo-center {
        width: 80px;
        height: 70px;
    }

    span#slogan-center {
        font-size: 30px;
    }

    .title {
        letter-spacing: 2px;
        font-size: 25px;
    }

    .btn
    {
        font-size: 14px;
        padding: 10px;
        width: 100%;
    }

    div#bg1
    {
        height: 550px;
        background-size: 180% 100%;
    }

    div#bg2
    {
        background-size: 150% 100%;
    }


    div#bg3
    {
        height: 1200px;
    }

    div#bg4
    {
        height: 1440px;
    }

    div#bg5
    {
        height: 1300px;
    }

    div#bg5 .p-title, span.p-title {
        font-size: 12px;
        letter-spacing: 2px;
    }

    div#bg6
    {
        background-size: 200% 100%;
    }

    div#bg6 div.right-box {
        width: 100%;
    }

    div#bg7
    {
        height: 960px;
    }

    div#bg7 .visible-xxs .col-xs-12
    {
        margin-top: 10px;
        text-align: center;
        color: white;
    }

    div#bg7 input.form-input, textarea.form-input {
        width: 100%;
        padding: 10px;
        margin-top: 10px;
    }

    img.blue-square
    {
        width: 130% !important;
    }
    
    html
    {   
    overflow-x:hidden;
    }

}

@media (max-width: 330px) 
{

    div#bg3 {
        height: 1400px;
    }

    div#bg4
    {
        height: 1560px;
    }
}