/*
Theme Name: FVRCCS-Theme
Template Name: Front Page
Author: Terry van Oort
Description: FVRCCS Template
Version: 0.1
Tags: bootstrap
*/



 /*-----------------------------------------------------------------------------
     Body STYLES 
 -------------------------------------------------------------------------------*/ 
    body {
        text-align: left;
        -font: 16px 'Lato', sans-serif;
        font: 16px 'Trebuchet MS', Helvetica, sans-serif;        
        -webkit-font-smoothing: antialiased;

        background: #fff;
        height: 100%;     
        
    }


/*-----------------------------------------------------------------------------
    GENERAL STYLES 
-------------------------------------------------------------------------------*/

    h1 {
        margin: 50px 0 10px 0px;
        -font-family: 'Raleway', sans-serif;
        font-weight: normal;
        -text-transform: uppercase;
        font-size: 40px;
    }
    h2 {
        color: #0d6235;
        margin: 25px 0 10px 0px;
        font-size: 30px;
    }
    h3 {
        color: #0d6235;
        margin: 20px 0 0px 0px;
        font-size: 25px;
    }
    h4 {
        color: #b08600;
        margin: 5px 0 0px 0px;
        font-size: 22px;
    }
    h5 {
        color: #0d6235;
        margin: 5px 0 0px 0px;
    }
    p {
        color: #333;
        font-size: 20px;
        line-height: 28px;
        margin: 0px 0 10px 0px;
    }

    a {
        color: #b08600;
    }
    a:hover {
        color: #dcb76e;
        text-decoration: none;
    }
    
    
    .content {
        -background-color: #eef;
        margin-bottom: 50px !important;
    }
    


    .content ul, .content ol{ 
        -background-color: #ccc;
        margin: 10px 0px 20px 20px;
        padding: 0;
    }

    .content ul li { 
        -height: 20px; 
        color: #555;
        font-size: 18px;
        line-height: 22px;
        margin: 10px 0 0 20px;
        list-style: square;
        text-align: left;
    }
    .content ol li { 
        -height: 20px; 
        color: #555;
        font-size: 18px;
        line-height: 22px;
        margin: 10px 0 0 20px;
        text-align: left;
    }
    
    .photo-borderless {
        border: #000 solid 0px !important;
        -margin: 10px 0 10px 0px;
    }
    .photo {
        border: #000 solid 1px;
        margin: 5px 0 10px 0px;
    }
    .photo-right {
        float: right;
        border: #000 solid 1px;
        margin: 5px 0 10px 20px;
    }
    .photo-left {
        float: left;
        border: #000 solid 1px;
        margin: 5px 20px 10px 0;
    }
    .clear {
        clear: both;
    }

    .content {
        margin-bottom: 70px;
    }


    /* tables still need cellspacing="0" in the markup */
    table {
        border-collapse: collapse; border-spacing: 0;
        font-size: inherit; font: 100%;
        margin: 10px 0 20px 0;
        width: 100%;
    }
    tr{
        
    }
    th {
        /*font-weight: bold; vertical-align: bottom;*/
        background-color: #eccf89;
        /*border-bottom: 0px solid #eccf89;*/
        border: 0 !important;
        padding: 5px 10px;
        /*border-bottom: 2px solid #ff0 !important;*/
    }
    td {
        /*font-weight: normal; vertical-align: top;*/
        /*border-bottom: 1px solid #eccf89;*/
        padding: 5px 10px;
    }

    article {
        margin: 0px 0 40px 0;
    }


    
 /*-----------------------------------------------------------------------------
     HEADER STYLES 
 -------------------------------------------------------------------------------*/


    /* Header */
    .header {
        background:  #092f0e !important;
        border-bottom:  #092f0e solid 15px;
    }

    /* topbar */
    .header .topbar {
        height: 4px;
    }


    /* Navigation */
    .header .navbar {
        background: #fff !important;     
        padding: 10px 0 !important; 
    }

    .header .navbar .logo {
        padding: 0 !important;
    }
    .header .navbar .logo img {
        margin: -0px 0 0 0px;
        height: 120px;
    }

    .header .navbar-collapse{
        -background: #ffd !important;
    }



    .header .navbar-nav {
        margin: 0px 0px 0px 0px;
        -background: #fdd !important;
    }    


    .header .navbar-nav .nav-item {
        -background: #ff6 !important;
    } 
    

    .header .navbar-nav .nav-item a {
        color: #666 !important;
        font-size: 22px;
        font-weight: normal;
        text-transform: uppercase;
        text-align: center;
        height: 50px;
        -border-radius: 3px;
        padding: 5px 15px !important;
        border-top:  #fff solid 4px;
     }
     
    .header .navbar-nav .nav-item a:hover {
        -color: #fff !important;
        -background: #092f0e ;
        border-top:  #092f0e solid 4px;
        -border-top:  #FEFB78 solid 4px;

    }
    
    /* Navbar Dropdown Menu */
    .header .navbar-nav > .open > a,
    .header .navbar-nav > .open > a:hover,
    .header .navbar-nav > .open > a:focus {
        color: #fff !important;
        background: #ccc !important;
        border-left: none ;
        border-right: none;
    }

    .header .dropdown:hover>.dropdown-menu {
        display: block;
    }


    .header .navbar-nav .dropdown .dropdown-menu {
        -background: #ff0 !important;
        border-radius: 0px;
        color: #004d00;
        color: #333;  
        border: 1px solid #666;
        margin-top: -1px;
        padding:0;
        -width: 280px;
    } 
    
    .header .products .dropdown-menu { width: 280px; left: 0px;}
    .header .about  { width: 350px; right: 0px;}  
    
    .header .navbar-nav .dropdown .dropdown-menu a,
    .header .navbar-nav .dropdown .dropdown-menu div { 
        display: block;
        border-bottom: 0px solid #ccc !important; 
        -background: #eef !important; 
        color: #666 !important;
        font-size: 16px;
        font-weight: normal;
        text-align: left;
        text-transform:none;
        height: 40px;
        padding: 12px 10px 0 10px !important;
    }
    .header .navbar-nav .dropdown .dropdown-menu a:hover,
    .header .navbar-nav .dropdown .dropdown-menu div:hover {
        -background: #ccc !important; 
        color: #fff !important;
        -opacity: 0.6;
        border: 0;
    } 
    
    
    /* Navbar Toggler */
/*    .header .navbar .navbar-toggler- {
        -background-color: #eee;
        height: 40px;
        border-color: #666;
        margin-top: 5px;
    }
*/









 /*-----------------------------------------------------------------------------
     FOOTER STYLES 
 -------------------------------------------------------------------------------*/

    /* Sticky footer */
    html {
        position: relative;
        min-height: 100%;
    }
    body {
        /* Margin bottom by footer height */
        margin-bottom: 160px;
    }
    .footer-spacer {
        -background-color: #eee;
        height: 100px;
        width: 100%;
    }    
    .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        /* Set the fixed height of the footer here */
        height: 160px;
        background-color: #092f0e;
        -border-top: #CA0638 2px solid;
    }
 
    /* Footer Contact */
    .footer .contact {
        --background-color: #eee !important;
        float:left;
        margin:  20px 0 0px 0;
    }
   .footer .contact ul {
        display: block;
        --background-color: #ddd;
        float: left; 
        margin: 40px 0px 0 0px;
        padding: 0;  
        width: 350px;     
   }
   .footer .contact ul li { 
        color: #fff;
        font-size:18px;
        height: 20px; 
        margin: 0px 0 5px 0;
        list-style: none;
        text-align: left;
   }
   .footer .contact ul li a {
        color: #fff;
        text-decoration: none;
   }
   .footer .contact ul li a:hover {
       background-color: transparent;
       text-decoration: underline;
   }
    
    
    
    
    
    /* Footer Contact Info */
    .footer .contact-info {
        -background-color: #eee !important;
        float:right;
        margin:  20px 0 0px 0;
    }
   .footer .contact-info .logo {
        height: 100px;
        float: right;    
   }

    








 /***********************
 *  Extra small devices (portrait phones, less than 544px) 
 ************************/
 /*@media (min-width: 401px) and (max-width: 575px) {  */
@media (max-width: 575px) { 
    body {
        -background: #ddd;
    }

    .header .navbar .logo img {
        margin: -0px 0 0 0px;
        height: 90px;
    }  


    /* mobile menu */
    .header .navbar-nav .nav-item a {
        color: #666 !important;
        padding: 12px 0!important;
        border-top:  0;
     }
    .header .navbar-nav .nav-item a:hover {
        color: #fff !important;
        background: #666 ;
        border-top:  0;
    }

    .wp-block-cover .wp-block-cover__inner-container p {
        font-size: 48px !important;
        line-height: 50px !important;
    }


}


/***********************
 *  Small devices (landscape phones, 544px and up)
 ************************/
@media (min-width: 576px) and (max-width: 767px) {  
    body {
        -background: #ccc;
    }

    /* mobile menu */
    .header .navbar-nav .nav-item a {
        color: #666 !important;
        padding: 12px 0!important;
        border-top:  0;
     }
    .header .navbar-nav .nav-item a:hover {
        color: #fff !important;
        background: #666 ;
        border-top:  0;
    }

    .wp-block-cover .wp-block-cover__inner-container p {
        -color: #fff !important;
        font-size: 54px !important;
        line-height: 60px !important;
    }

}

/***********************
 *  Medium devices (tablets, 768px and up)
 ************************/
@media (min-width: 768px) and (max-width: 991px) {
    body {
        -background: #ccc;
    }
  
    /* mobile menu */
    .header .navbar-nav .nav-item a {
        color: #666 !important;
        padding: 12px 0!important;
        border-top:  0;
     }
    .header .navbar-nav .nav-item a:hover {
        color: #fff !important;
        background: #666 ;
        border-top:  0;
    }

}


/***********************
 *  Large devices (desktops, 992px and up)
 ************************/
@media (min-width: 992px) and (max-width: 1199px) { 
    body {
        -background: #ddd !important;
    }
    
    


}

/***********************
 *  Extra Large devices (large desktops, 1200px and up)
 ************************/

@media (min-width: 1200px) { 
    body {
        -background: #ccc !important;
    }
    

    
    
}