/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */



/*

 * What follows is the result of much research on cross-browser styling.

 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,

 * Kroc Camen, and the H5BP dev community and team.

 */



/* ==========================================================================

   Base styles: opinionated defaults

   ========================================================================== */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i');

/* font-family: 'Open Sans', sans-serif;  */



html {

    color: #222;

    font-size: 1em;

    line-height: 1.4;

	font-family: 'Open Sans', sans-serif;

}

body, p, h1, h2, h3, h4, h5, a {font-family: 'Open Sans', sans-serif; color:#4c4c4c}

/*

 * Remove text-shadow in selection highlight:

 * https://twitter.com/miketaylr/status/12228805301

 *

 * These selection rule sets have to be separate.

 * Customize the background color to match your design.

 */



::-moz-selection {

    background: #b3d4fc;

    text-shadow: none;

}



::selection {

    background: #b3d4fc;

    text-shadow: none;

}



/*

 * A better looking default horizontal rule

 */



hr {

    display: block;

    height: 1px;

    border: 0;

    border-top: 1px solid #ccc;

    margin: 1em 0;

    padding: 0;

}



/*

 * Remove the gap between audio, canvas, iframes,

 * images, videos and the bottom of their containers:

 * https://github.com/h5bp/html5-boilerplate/issues/440

 */



audio,

canvas,

iframe,

img,

svg,

video {

    vertical-align: middle;

}



/*

 * Remove default fieldset styles.

 */



fieldset {

    border: 0;

    margin: 0;

    padding: 0;

}



/*

 * Allow only vertical resizing of textareas.

 */



textarea {

    resize: vertical;

}



/* ==========================================================================

   Browser Upgrade Prompt

   ========================================================================== */



.browserupgrade {

    margin: 0.2em 0;

    background: #ccc;

    color: #000;

    padding: 0.2em 0;

}



/* ==========================================================================

   Author's custom styles

   ========================================================================== */



	.menu { list-style:none; margin:10px auto;}

	.menu li { display:inline-block}

	.menu li a { color:#fff; font-weight:bold; transition:all 0.4s ease; border-radius:20px;   padding: 4px 8px;}

	.menu li a:hover,  .menu>li.active>a { color:#b30000 ; background:#fff;  }
	.menu li a:focus {color: #fff; background:none;}
	
	
	

	.beseoil-menu  li a:hover, .beseoil-menu li a:focus, .beseoil-menu>li.active>a {

    color: #03791f;

    background: #fff ;

}

.beseoil-menu li a:focus {color: #fff; background:none;}

	footer { background:#b30000; }

	.contact-blog { background:#03791f; color:#fff; padding:15px; display: none}

	.baseoil-blog { background:#b30000; color:#fff; padding:15px;}

	.contact-blog img { width:28px}

	#owl1 img { width:100px  }

	.contact-blog ul { list-style:none; margin-top:15px; }

	.contact-blog ul li {margin-bottom:10px}

	h2 {  margin-bottom:30px}

.container { width:1000px}

.footer-menu { list-style:none; margin-right:0; margin-top:12px; padding-right:0; font-size:12px; position: relative;     text-align: right;

     }

.footer-menu li { display:inline-block; }

.footer-menu li a { color:#fff; padding:3px 5px}

.footer-menu li a:hover, .footer-menu li a:focus, .footer-menu li.active a { color:#fff; background:none; }

.fees {  margin-bottom:40px}

.fees td { padding:8px 12px}



.body-height>div { min-height:1280px; margin-bottom:20px}



.fees-box td{ padding:5px; background:none !important; text-align:left !important}





.fees-box td { font-size:13px}



.navbar-collapse { padding-left:0; padding-right:0;}

[href="../amea-bitumen-gallery.html"] { display:none}



/* ==========================================================================

   Helper classes

   ========================================================================== */



/*

 * Hide visually and from screen readers

 */



.hidden {

    display: none !important;

}



/*

 * Hide only visually, but have it available for screen readers:

 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

 */



.visuallyhidden {

    border: 0;

    clip: rect(0 0 0 0);

    height: 1px;

    margin: -1px;

    overflow: hidden;

    padding: 0;

    position: absolute;

    width: 1px;

}



/*

 * Extends the .visuallyhidden class to allow the element

 * to be focusable when navigated to via the keyboard:

 * https://www.drupal.org/node/897638

 */



.visuallyhidden.focusable:active,

.visuallyhidden.focusable:focus {

    clip: auto;

    height: auto;

    margin: 0;

    overflow: visible;

    position: static;

    width: auto;

}



/*

 * Hide visually and from screen readers, but maintain layout

 */



.invisible {

    visibility: hidden;

}



/*

 * Clearfix: contain floats

 *

 * For modern browsers

 * 1. The space content is one way to avoid an Opera bug when the

 *    `contenteditable` attribute is included anywhere else in the document.

 *    Otherwise it causes space to appear at the top and bottom of elements

 *    that receive the `clearfix` class.

 * 2. The use of `table` rather than `block` is only necessary if using

 *    `:before` to contain the top-margins of child elements.

 */



.clearfix:before,

.clearfix:after {

    content: " "; /* 1 */

    display: table; /* 2 */

}



.clearfix:after {

    clear: both;

}



/* ==========================================================================

   Filter

   ========================================================================== */

   .filter { list-style:none; margin:auto; display:block; text-align:center;}

   .filter li  { display:inline-block;  margin-bottom:40px; margin-top:40px;}

   .filter li a { padding:8px 20px; margin-right: 10px;}

   .project-item {width:100px; height:100px; margin-right:10px; margin-bottom:4px; text-align:center}

	.project-item h1 { margin-top:20px;     font-size: 14px;}

	
	.dropdown-menu {    background-color: #b30000;}
	.dropdown-menu li { margin:2px 5px}
	
	.dropdown-menu { min-width:120px}
	.dropdown-submenu .dropdown-menu { min-width:80px}
	
	ul.nav>li.dropdown:hover>ul.dropdown-menu{
    display: block;    
}
	ul li.dropdown-submenu:hover ul.dropdown-menu { display:block}
 

a.menu:after, .dropdown-toggle:after {
  content: none;
}
.nav .open>a, .nav .open>a:focus, .nav .open>a:hover {color: #b30000;}

.dropdown-submenu:hover>a:after {    border-left-color: #b30000;}

.dropdown-submenu{ position: relative; }
.dropdown-menu {
    margin: -2px 0 0 0 !important;
}

.dropdown-submenu>.dropdown-menu{
  top:0;
  left:100%;
  margin-top:-6px;
  margin-left:-1px;
  -webkit-border-radius:0 6px 6px 6px;
  -moz-border-radius:0 6px 6px 6px;
  border-radius:0 6px 6px 6px;
}

.dropdown-submenu>a:after{
  display:block;
  content:" ";
  float:right;
  width:0;
  height:0;
  border-color:transparent;
  border-style:solid;
  border-width:5px 0 5px 5px;
  border-left-color:#ffffff;
  margin-top:5px;margin-right:-10px;
}
.dropdown-submenu.open>a:after{  border-left-color:#b30000;}
.dropdown-submenu:hover>a:after{
  border-left-color:#b30000;
}
.dropdown-submenu.pull-left{ float: none; }
.dropdown-submenu.pull-left>.dropdown-menu{
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px;
}

.d-flex {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
}
.justify-content-end {
    -webkit-box-pack: end!important;
    -ms-flex-pack: end!important;
    justify-content: flex-end!important;
}
.top-menu-bar ul {
    padding-left: 0;
    list-style: none;
}
.top-menu-bar {
    width: 100%;
    height: 36px;
}

.top-menu-bar ul li {
    padding: 6px 8px;
    margin-left: 15px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 500;
    color: rgb(255 255 255);
}
.top-menu-bar ul li i {
    margin-right: 4px;
}

.row.body-height > .col-sm-8 {border-right:1px solid #ccc; } 
.row.body-height > .col-sm-4 {border-left:1px solid #ccc; margin-left:-1px } 


/* ==========================================================================

   EXAMPLE Media Queries for Responsive Design.

   These examples override the primary ('mobile first') styles.

   Modify as content requires.

   ========================================================================== */



@media only screen and (min-width: 35em) {

    /* Style adjustments for viewports that meet the condition */

}



@media print,

       (-webkit-min-device-pixel-ratio: 1.25),

       (min-resolution: 1.25dppx),

       (min-resolution: 120dpi) {

    /* Style adjustments for high resolution devices */

}



/* ==========================================================================

   Print styles.

   Inlined to avoid the additional HTTP request:

   http://www.phpied.com/delay-loading-your-print-css/

   ========================================================================== */



@media print {

    *,

    *:before,

    *:after,

    *:first-letter,

    *:first-line {

        background: transparent !important;

        color: #000 !important; /* Black prints faster:

                                   http://www.sanbeiji.com/archives/953 */

        box-shadow: none !important;

        text-shadow: none !important;

    }



    a,

    a:visited {

        text-decoration: underline;

    }



    a[href]:after {

        content: " (" attr(href) ")";

    }



    abbr[title]:after {

        content: " (" attr(title) ")";

    }



    /*

     * Don't show links that are fragment identifiers,

     * or use the `javascript:` pseudo protocol

     */



    a[href^="#"]:after,

    a[href^="javascript:"]:after {

        content: "";

    }



    pre,

    blockquote {

        border: 1px solid #999;

        page-break-inside: avoid;

    }



    /*

     * Printing Tables:

     * http://css-discuss.incutio.com/wiki/Printing_Tables

     */



    thead {

        display: table-header-group;

    }



    tr,

    img {

        page-break-inside: avoid;

    }



    img {

        max-width: 100% !important;

    }



    p,

    h2,

    h3 {

        orphans: 3;

        widows: 3;

    }



    h2,

    h3 {

        page-break-after: avoid;

    }

}

.website-registration { display: none}

.nav-down { position: sticky;    top: 0;     z-index: 999;
    transition: top 0.4s ease-in-out;
   }

.nav-up {
    position: sticky;    top: -60px;     z-index: 999;  transition: top 0.4s ease-in-out;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .nav-up, .nav-down {
    position: relative;    top: 0;     z-index: 999;  transition: top 0.4s ease-in-out;
}

.nav-down.boom { position: fixed; width:100%;    top: 0;     z-index: 999;
    transition: top 0.4s ease-in-out;
   }

.nav-up.boom {
    position: fixed; width:100%;   top: -60px;     z-index: 999;  transition: top 0.4s ease-in-out;
}


}