/*****************************************************
        DEFAULT VALUES:
        FONT FAMILY:           Ovo, Open Sans (google fonts)
        FONT VALUES:
            blue from image     #8292ab      (icons, buttons, links, etc)
            green from image    #4a564c      (titles)
            tan from home image #a79b8a      (paragraphs)
            other green         #293f01     (background for footer)
            white               #fff         (text with dark background)
            black               #000 
            brown from image   #5a2f2b      (lines)   


******************************************************/

/*****************************************************

GENERAL CSS

*****************************************************/

body {
    font-family: "Ovo", serif;
    font-family: "Open Sans", sans-serif;
}

html,
body {
    height: 100%;
}

p {
    color: #a79b8a;
    font-size: 16px;
    font-weight: 300;

}

h3 {
    font-family: serif;
    text-transform: uppercase;
    color: #4a564c;
}

/***************************************************

HOME SECTION 

****************************************************/

#home {
    height: 100%;

}

#home-cover {
    height: 100%;
    background-image: url("../img/bg-home.jpg");
}

#home-content-box {
    width: 100%;
    height: 100%;
    display: table;
}

#home-content-box-inner {
    display: table-cell;
    vertical-align: middle;
    /*text-align:center;*/
}

#home-heading h3 {

    color: #fff;
    font-size: 55px;
    font-weight: 700;
    margin: 20px 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/*******************************************
    PARALLAX (General) Class
*******************************************/

.bg-parallax {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.bg-test {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.2;
}

/*******************************************
    BUTTONS classes
*******************************************/

.btn-general {

    border-width: 2px;
    border-radius: 0;
    padding: 12px 26px 12px 26px;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
}

.btn-white {
    border-color: #fff;
    color: #fff;
}

.btn-white:hover,
.btn-white:focus {
    background-color: #fff;
    color: #8292ab;
}

.btn-blue {
    border-color: #8292ab;
    color: #8292ab;
}

.btn-blue:hover,
.btn-blue:focus {
    background-color: #8292ab;
    color: #fff;
}

/**************************************************************
    ANIMATION (animate.css)
https://daneden.github.io/animate.css/
An assumption here is that all browsers support this
So no need for vendor prefixes that the documentation suggests
***************************************************************/

#home-cover,
#home-heading,
#home-btn {
    animation-duration: .5s;
}

#home-cover {

    animation-delay: .1s;
}

#home-heading {

    animation-delay: .5s;
}

#home-btn {

    animation-delay: 1s;
}


/*******************************************
    CONTENT (generic) classes
*******************************************/

.content-box {
    padding: 60px 0 60px 0;
}

.content-title h3 {
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 30px 0;
}

.content-title-underline {
    width: 40px;
    height: 3px;
    background-color: #5a2f2b;
    margin: 0 auto 30px auto;
}

/*******************************************
            SERVICES
*******************************************/

.service-item {
    /*padding is INSIDE the item*/
    padding: 20px 0 20px 0;
    /*margin-bottom is UNDER the item (space between rows)*/
    margin-bottom: 20px;
    cursor: pointer;
}

.service-item-icon i {
    color: #8292ab;
    float: left;
    padding: 15px;
    margin-right: 25px;
    width: 75px;
    height: 75px;
    text-align: center;
}

.service-item:hover .service-item-icon i {
    color: #fff;
    background-color: #8292ab;
}

.service-item-title h3 {
    font-size: 20 px;
    font-weight: 400;
    margin: 0 0 10px 0;
}

.service-item-description p {
    margin: 0;
    padding-left: 85px;
}


/*******************************************
            ABOUT
*******************************************/

#about-bg-diagonal {
    width: 60%;
    height: 700px;
    float: right;
    background-image: url(../img/bg-about.jpg);
    border-left: 200px solid white;
    border-top: 700px solid transparent;
}

#about-content-box {
    float: left;
    height: 700px;

}

/*these 2 divs and styling are here to get the vertical and maybe horiz alignments*/

#about-content-box-outer {
    width: 100%;
    height: 100%;
    display: table;
}

#about-content-box-inner {
    display: table-cell;
    vertical-align: middle;

}

#about .content-title h3 {

    text-align: left;
}

#about .content-title-underline {
    margin: 0 0 30px 0
}

#about-desc p {
    margin-bottom: 30px;

}

/*******************************************
            WORK
*******************************************/

.row.no-gutters [class*=col-] {
    padding-left: 0;
    padding-right: 0;
}

.img-wrapper {
    overflow: hidden;
}

.img-wrapper img {
    transition: transform .5s ease;
}

.img-wrapper img:hover {
    transform: scale(1.5);
    /* change the cursor so user knows they can zoon */
    cursor: zoom-in;
}

/*******************************************
            TEAM
*******************************************/

.team-member {
    /*if only 2 arguments they are top/bottom and left/right*/
    margin: 0 15px;
}

.team-member-info {
    padding: 10px 0 30px 0;
}

h4.team-member-name {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 1px;
    padding-top: 20px;
}

h4.team-member-designation {
    color: #8292ab;
    font-size: 15px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 1px;
    margin-top: 5px;
}

/*******************************************
            SOCIAL ICONS
*******************************************/

.social-list {
    padding-left: 0;
}

.social-list li {
    list-style: none;
    /*that took away the default bullets*/
    display: inline-block;
    /*that made  the list items display on the same line*/
    width: 32px;
    height: 32px;
    margin-right: 6px;
    margin-top: 10px;
}

.social-icon i {
    font-size: 17px;
    /*a way to nuance the size of font awesome icons more than the built-in sizes */
}

.icon-gray i {
    color: #a79b8a;
}

.icon-white i {
    color: #fff;
}

.social-icon i:hover {
    color: #8292ab;

}

/*******************************************
            TESTIMONIALS
*******************************************/

#testimonials-cover {
    background-image: url("../img/bg-testimonials.jpg");
}

#testimonials .content-box {
    /*rgba lets you set the color followed by the alpha value = transparency, between zero and one*/
    background-color: rgba(0, 0, 0, 0.1);
}

.content-title-white h3 {
    color: #fff;
}

#customers-testimonials {
    padding: 50px, 0;
}

.testimonial img {
    max-width: 120px;
    /*technique to center and auto-adjust margins*/
    margin: 0 auto 0 auto;
}

.testimonial blockquote {
    border: 0;
    /*font-family: Georgia, sans-serif;*/
    font-style: italic;
    color: #fff;
    padding: 6px 150px;
    position: relative;
}

.testimonial blockquote p {
    /* color property not inherited, need to set manually */
    color: #fff;
}

.testimonial blockquote::before,
.testimonial blockquote::after {
    font-size: 80px;
    font-style: normal;
    line-height: 1;
    width: 20px;
    height: 20px;
    position: absolute;
}

.testimonial blockquote::before {
    /*code for left quotation mark, find under CSS quotes property on w3 schools */
    content: "\201C";
    top: 0;
    left: 100px;
}

.testimonial blockquote::after {
    content: "\201D";
    bottom: 0;
    right: 100px;
}

.testimonial-author p {
    color: #fff;
    font-size: 17px;
}

.testimonial-author p strong {
    display: block;
}


/*******************************************
            STATS
*******************************************/

#stats-cover {
    background-image: url("../img/bg-stats.jpg");
}

#stats .content-box {
    background-color: rgba(0, 0, 0, .8);
}

.stats-item {
    padding: 100px 0;
}

.stats-item i {
    color: #8292ab;
}

.stats-item h2 {
    color: #fff;
    font-size: 35px;
    font-weight: 700;
    margin-top: 15px;
    margin-bottom: 1px;
}

.stats-item p {
    color: #fff;
    text-transform: uppercase;
    font-weight: 300;
    margin-top: 0;
}


/*******************************************
            CONTACT
*******************************************/

footer {
    background-color: #293f01;
    padding-top: 30px;
    border-top: 5px solid rgba(0, 0, 0, 0.1);
}

#contact-left h3,
#contact-right h3 {
    color: #fff;
    font-size: 27px;
    font-weight: 700;
}

#contact-left p {
    color: #fff;
    margin-bottom: 30px;
}

#contact-info {
    background-image: url("../img/world-map.png");
    background-repeat: no-repeat;
    background-size: contain;
}

address {
    color: #fff;
}

address strong,
#phone-fax-email strong {
    letter-spacing: 1px;
}

/*style the custom class .form-control*/

form .form-control {
    background: transparent;
    border-radius: 0;
    /*removes rounded corners*/
    border-color: #fff;
    font-size: 17px;
    font-weight: 300;
    padding: 8px 16px;
    margin-bottom: 20px;
    color: #fff;
}
#memberships p, a {
    color: #fff;
    font-size: 14px;
}
#licenses p, a {
    color: #fff;
    font-size: 12px;
    font-weight:300;
    padding-top: 20px;
}

/*******************************************
            COPYRIGHT
*******************************************/

#footer-bottom {
    background-color: rgba(0, 0, 0, 0.1);
    padding: 20px 0;
    margin-top: 40px;
}

#footer-copyrights p {
    margin: 0;
    color: #fff;
    font-weight: 200;
    font-size: 12px;
}

#footer-menu {
    float: left;
    color: #fff;
    font-size: 16px;
    font-weight: 300;
}

#footer-menu ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

#footer-menu ul li {
    display: inline-block;
}

#footer-menu a {
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    margin: 0 10px;
    text-decoration: none;
}

#footer-menu a:hover {
    color: #8292ab;
}

/*******************************************
            NAVIGATION
*******************************************/

.navbar {
    padding: 20px 0;
}
.vesco-top-nav {
    background: rgba(0, 0, 0, 0.7);
    padding: 7px 0;
}
.vesco-nav-wrapper {
    padding: 0 85px;
}
.navbar-nav {
    float: right;
}
.navbar-nav > li > a {
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
.navbar-nav > li > a:focus {
    background: none;
    color: #8292ab;
}
.navbar-nav > li > a:hover {
    background: none;
    color: #8292ab;
}
.navbar-toggle {
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid #fff;
    border: radius: 0;
}
.navbar-toggle .icon-bar {
    background-color: #fff;
}
.navbar-collapse {
    max-height: none !important;
}
.vesco-top-nav ul.navbar-nav > li.active > a {
    color: #8292ab;
}