/*
  Name: Derma Shield - Main (Internet Explorer)
  Date: June 2018
  description: Derma Shield Website
  Version: 1.1
  Author: David Banwell-Clode
  Autor URI: -
  Minified using https://cssminifier.com/
*/


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    
	header i {
		color: #00b1b0;
	}

	header i:hover {
		color: #00d5d3;
	}

	i.material-icons.md-18 {
		color: #00c2c0;
	}

	i.material-icons.md-12 {
		color: #00b1b0;
	}

	i.material-icons.md-10 {
		color: #00b1b0!important;
	}

	#cart_container:hover .cart_count,
	#cart_container:hover i {
		color: #00d5d3;
	}

	/* Main Nav */
	#banner nav {
		background: #00b1b0;
	}

	/* Sub Nav */
	#banner .sub-menu,
	nav.woocommerce-MyAccount-navigation {
		background:  #00817f;
	}
	div#ss-search-page-form span {
		color: #00b1b0;
	}

	.searchbutton {
		color: #00b1b0;
	}

	.searchbutton:hover {
		color: #00d5d3;
	}

	.search-post-title {
		color: #00b1b0;
	}

	.search-post-title:hover {
		color: #00d5d3;
	}

	#title_center div p {
		color: #98CF68;
	}

	div.middle {
		left: 0;
	}

	#logo_container {
		width: 93px;
	}

	#title span h1 {
		color: #00b1b0;
	}

	.title_side:hover #logo_bsi {
			opacity: 0.3;
		}

	.title_side:hover .middle {
			opacity: 1;
		}
		
	div.title_side #logo_bsi {
		width: auto;
	}
	
	#splashBSIlogo {
	    min-height: 100px;
	}
	
	.splash img {
	    flex: 0 0 auto;
	}

	.learn_more {
		background-color: #00b1b0;
	}
	
	#content {
	    flex-shrink: 0;
	}

	h1 {
    color:  #00817f;
	}

	h2 {
		color: #98CF68;
	}

	h3 {
		color: #00b1b0;
	}

	a {
		color: #00c2c0;
	}

	em {
		color: #00b1b0;
	}

	/* Body */

	body hr {
		color: #00b1b0;
		/* old IE */
		background-color: #00b1b0;
	}

	/*** RFT Page ***/
	a.next_button,
	#rft-submit {
		background-color: #00b1b0;
	}

	a.next_button:hover {
		background-color: #00c2c0;
	}

	.wpcf7 form .wpcf7-response-output {
		background-color: #f7f6f7;
		color: #00b1b0;
	}

	.wpcf7-form-control.wpcf7-submit {
		background-color: #00b1b0;
	}

	.wpcf7-form-control.wpcf7-submit:hover:not(:disabled),
	#rft-submit:hover:not(:disabled) {
		background-color: #00c2c0 !important;
	}

	div.wpcf7 .wpcf7-submit:disabled,
	#rft-submit:disabled {
		background-color: #dad8da;
	}

	div.left_block ul#address li:before {
		color: #00b1b0;
	}

	table#cookies_table thead th {
		background-color: #00b1b0;
	}

	div.cookie-notice-container .cookie_button {
		color: #00b1b0;
	}

	/* Footer */
	footer {
		background: #00b1b0;
	}
	
	/* WooCommerce Modifications */
	.woocommerce-store-notice.demo_store {
        background-color: #00b1b0;
    }
	
	.woocommerce li.product img {
		border-color: #00b1b0;
	}

	.woocommerce .product .add_to_cart_button.button {
		background-color: #00b1b0;
	}

	/* buttons are here */
	.woocommerce .single_add_to_cart_button.button.alt,
	.woocommerce .checkout-button.button.alt,
	.woocommerce form.checkout div.woocommerce-checkout-review-order div.woocommerce-checkout-payment button.button.alt {
		background-color: #00b1b0;
	}
	
	.woocommerce .button.button.alt:hover {
    background-color: #00d5d3 !important;
	}

	.woocommerce .product_meta a {
		color: #00c2c0;
	}

	.woocommerce .single_title_guarantee span {
		color: #00b1b0;
	}

	/* Woocommerce banner */
	div.woocommerce-message,
	div.woocommerce-info {
		color: #00b1b0;
	}

	div.woocommerce-message::before,
	div.woocommerce-info::before {
		color: #00b1b0;
	}

	/***/

	/* Banner button */
	.woocommerce div.single-product div.woocommerce-message a.button.wc-forward,
	.woocommerce div.woocommerce-MyAccount-content div.woocommerce-message a.woocommerce-button.button {
		background-color: #00b1b0;
	}

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

	/* Account Page */
	.woocommerce nav.woocommerce-MyAccount-navigation {
		background: #016D6B;
	}

	.woocommerce fieldset {
		border-color: #00b1b0;
	}

	.woocommerce fieldset legend {
		color: #00b1b0;
	}

	.woocommerce form.woocommerce-cart-form table.shop_table img {
		border-color: #00b1b0;
	}

	.woocommerce form.woocommerce-cart-form table.shop_table tbody tr td a.remove {
		color:  #00817f !important;
	}

	.woocommerce form.woocommerce-cart-form table.shop_table tbody tr td a.remove:hover {
		background:  #00817f;
	}

	/** Order Pay Page **/
	.woocommerce div#payment {
		background: #ebe9eb;
	}

	.woocommerce div#payment ul.payment_methods {
		border-bottom: 1px solid #d3ced2;
	}

	.woocommerce div#payment div.payment_box {
		background-color: #dfdcde;
		color: #515151;
	}

	.woocommerce div.woocommerce-order .woocommerce-thankyou-order-received {
		color:  #00817f;
	}

	/**** Quantity on checkout page ****/
	.input-text.qty.text {
		background-color: #00b1b0;
	}

	/***** Mega Menu *****/
	.mega_menu_container {
		display: none;
	}
	
	/****** Product Info Pages ******/
	.tag-line {
		color:  #00817f;
	}

	.quotation {
		border-color:  #00817f;
	}
	/*====== Product Info Pages END ======*/
	
	table.derma_table thead th,
	.woocommerce table.shop_table thead,
	.woocommerce .woocommerce-orders-table.account-orders-table thead {
		background-color: #00b1b0;
	}

	#content .woocommerce table.shop_table.cart tbody tr {
		border-left: 1px solid #00b1b0;
		border-right: 1px solid #00b1b0;
	}

	#content .woocommerce table.shop_table.cart tbody tr:last-of-type {
		border-bottom: 1px solid #00b1b0;
	}

	#benefits_table .benefits_table th {
		color: #015857;
	}

	#benefits_table .benefits_table tr:nth-of-type(even) td {
		background-color: #98CF68;
	}

	#benefits_table .benefits_table tr:nth-of-type(odd) td {
		background-color: #00b1b0;
	}
	/*====== Tables style END ======*/

	/******* FAQs Page ******/

	ul.display-posts-listing li.listing-item div.faq_wrap {
		background-color: #00b1b0;
	}

    div.tooltip {
        direction: rtl;
    } 

	.tooltip .tooltiptext {
		background-color: #00b1b0;
		direction: ltr;
	}

	.tooltip .tooltiptext::after {
		border-color: #00b1b0 transparent transparent transparent;
	}

	/*====== FAQs Page END ======*/

	/****** Woocommerce Buttons ******/

	#content .woocommerce a.button,
	.woocommerce .woocommerce-button.button,
	.woocommerce .woocommerce-Button.button,
	div.woocommerce button.button:not(:disabled) {
		background-color: #00b1b0;
	}

	#content .woocommerce a.button:hover,
	.woocommerce .woocommerce-button.button:hover,
	.woocommerce .woocommerce-Button.button:hover,
	div.woocommerce button.button:hover {
		background-color: #00d5d3;
	}

	/*======= Woocommerce Buttons ENDS =======*/
	label#show-more-label, label#show-less-label {
		color: #00b1b0;
	}
}

@media screen and (min-width: 871px) and (-ms-high-contrast: active), 
(min-width: 871px) and (-ms-high-contrast: none) {

 #banner .menu > .current_page_item > a:active,
    #banner .menu > .current_page_item > a:link,
    #banner .menu > .current_page_item > a:visited,
    #banner .current-menu-ancestor > a,
    #banner .current-page-ancestor > a {
        background: #00817f;
        color: #fff;
        text-shadow: none !important;
    }

    #banner .menu > li > a:hover {
        background: #015857;
    }


    #banner .menu > li.menu-item-has-children:not(.current_page_item):not(.current-menu-ancestor):hover > .sub-menu {
        display: block;
        position: absolute;
        left: 0;
        z-index: 10;
        background: #015857;
        transition: 5s ease;
    }

    #banner .menu > li.menu-item-has-children:not(.current_page_item):not(.current-menu-ancestor):hover {
        background: #015857;
    }

    #banner .current_page_item .sub-menu,
    #banner .current-menu-ancestor .sub-menu {
        position: absolute;
        left: 0;
        display: block;
    }

    #banner nav .mobile_menu {
        display: none;
    }

    #banner nav .account_menu {
        display: inline-block;
        visibility: hidden;
        width: 0;
    }

    #banner nav .account_menu > a {
        display: none;
    }

    #banner nav .account_menu > ul {
        visibility: visible;
        top: 100%;
    }

    #benefits_table table.benefits_table tr td:first-of-type {
        padding-left: 20px;
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;
    }

    #benefits_table .benefits_table tr td:last-of-type {
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
    }
}

@media screen and (min-width : 871px) and (-ms-high-contrast: active),
(min-width : 871px) and (-ms-high-contrast: none)
/*    only screen and (min-width: 858px) {*/
    {

    #banner .sub-menu a:hover,
    nav.woocommerce-MyAccount-navigation a:hover,
    nav.woocommerce-MyAccount-navigation a:active {
        background: #015857;
    }

    #banner .menu li.menu-item-has-children:not(.current_page_item):not(.current-menu-ancestor) .sub-menu a:hover {
        background: #004746;
    }
}



@media screen and (max-width : 375px) and (-ms-high-contrast: active), 
(max-width : 375px) and(-ms-high-contrast: none) {
    .learn_more {
        font-size: 50%;
    }
}


/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width : 800px) and (-ms-high-contrast: active), 
(max-width : 800px) and(-ms-high-contrast: none) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}


@media screen and (min-width : 871px) and (-ms-high-contrast: active), 
(min-width : 871px) and(-ms-high-contrast: none) {
    .woocommerce div.woocommerce-product-gonly screenery--columns-4 {
        width: 36% !important;
        margin-bottom: 0 !important;
    }
}



@media screen and (min-width: 871px) and (-ms-high-contrast: active), 
(min-width: 871px) and (-ms-high-contrast: none) {
    .mega_menu_container {
        display: flex;
        align-content: flex-start;
        width: 100%;
        background-color: #015857;
        position: absolute;
        left: 0;
        top: 70px;
        z-index: 99;
        opacity: 1;
        visibility: hidden;
    }

    .mega_menu_container.two-col .v1,
    .mega_menu_container.two-col .v3 {
        visibility: hidden !important;
    }

    .mega_menu_container:hover {
        visibility: visible !important;
    }

    .mega_menu {
        list-style: none;
        padding-left: 0;
        font-family: 'Roboto', sans-serif;
        color: #fff;
        margin: 0 0 auto 0 !important;
        width: 25%;
        display: block;
        float: left;
    }

    .mega_menu_item {
        text-align: center;
        line-height: 40px;
        width: 100%;
    }

    .mega_menu a {
        text-decoration: none;
        color: #fff;
    }

    .mega_menu_item:hover {
        background-color: #004746;
    }

    /* Vertical Seperators */
    .v1 {
        position: absolute;
        left: 25%;
        top: 10%;
        bottom: 10%;
        border-left: 1px solid white;
    }

    .v2 {
        position: absolute;
        left: 50%;
        top: 10%;
        bottom: 10%;
        border-left: 1px solid white;
    }

    .v3 {
        position: absolute;
        left: 75%;
        top: 10%;
        bottom: 10%;
        border-left: 1px solid white;
    }
}

/*====== Mega Menu END ======*/

/****** Tables style ******/

@media screen and (min-width : 689px) and (-ms-high-contrast: active), 
(min-width : 689px) and(-ms-high-contrast: none) {

    #technical div .derma_table tr td,
    #technical div .derma_table tr th {
        text-align: center;
    }

    :not(#chemical-list) > .derma_table.align_last tr td:last-child,
    :not(#chemical-list) > .derma_table.align_last tr th:last-child {
        text-align: right;
    }
}



/****** Mobile adjustments ******/

@media screen and (max-width : 1055px) and (-ms-high-contrast: active), 
(max-width : 1055px) and(-ms-high-contrast: none) {
    #title_center h1 {
        font-size: 18pt;
    }

    #title_center p {
        font-size: 8pt;
    }
}


/** Mobile adjustments **/
@media screen and (max-width : 871px) and (-ms-high-contrast: active), 
(max-width : 871px) and(-ms-high-contrast: none) {
    #content {
        margin-top: 0;
    }

    #banner nav div.menu-main_menu-container {
        height: 100%;
        width: 80%;
        max-width: 300px;
        position: fixed;
        z-index: 99;
        top: 0;
        left: 0;
        background-color: #fff;
        overflow-x: hidden;
        transition: 0.5s;
        display: none;
    }

    #banner nav div.menu-main_menu-container li,
    #banner nav div.menu-main_menu-container .sub-menu li,
    #banner nav div.menu-main_menu-container .sub-menu .sub-menu li {
        display: block;
        margin-left: 0;
        text-align: left;
        position: relative;
    }

    #banner nav a:hover {
        color: #00d5d3 !important;
    }

    #banner nav .menu > li > a:link,
    #banner nav .menu > li > a:visited {
        color: gray;
        border-bottom: 1px solid rgba(0, 177, 176, 0.2);
        margin-left: 4px;
        background-color: #fff;
    }

    #banner .menu > .current-menu-ancestor > a,
    #banner .menu > .current-menu-item > a {
        background-color: #fff;
        margin-left: 0 !important;
        border-left: 4px solid #00b1b0;
        color: #00b1b0 !important;
    }

    #banner .menu-item-has-children::after {
		display: block;
        content: 'expand_more';
        font-family: 'Material Icons';
        position: absolute;
        top: 0;
        right: 0;
        padding: 5px 10px 5px 50px;
        color: #00b1b0;
    }

    #banner .current_page_item.menu-item-has-children::after,
    #banner .menu .current-menu-ancestor::after,
    #banner .menu .sub-menu .current-menu-ancestor::after {
        content: 'expand_less';
    }

    #banner nav .menu-item-has-children::after {
        content: 'expand_more';
    }

    #banner nav .menu-item-has-children:not(.closed)::after {
        content: 'expand_less';
    }

    #banner nav .closed::after {
        content: 'expand_more' !important;
    }

    #banner nav div.mobile_menu {
        display: block;
    }

    #banner nav div.menu_overlay {
        background-color: black;
        opacity: 0.3;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 98;
        top: 0;
        right: 0;
        display: none;
    }

    .mobile_menu i {
        color: white;
        font-size: 24pt;
        line-height: 40px;
    }

    #banner .current_page_item .sub-menu,
    #banner .current-menu-ancestor .sub-menu {
        display: block;
    }

    #banner nav .sub-menu {
        height: auto;
        width: 100%;
        position: relative;
    }

    #banner nav .sub-menu a {
        margin-left: 10px;
    }

    #banner nav .sub-menu .sub-menu {
        background-color: #015857;
    }

    #banner nav .sub-menu .sub-menu a {
        margin-left: 20px;
    }

    .menu_button {
        cursor: pointer;
    }

    #banner nav .sub-menu > .current-menu-parent .sub-menu {
        display: block;
    }

    #banner nav .account_menu {
        display: block;
    }

    /* Mobile Splash Page */

    .splash span h1 {
        font-size: 5vw;
        margin: 0 10px;
    }

    #splashcontainer {
        margin: 10px 0;
    }

    .inner_splash {
        min-width: 155px;
    }

    img.can_50,
    img.can_500 {
        display: none;
    }

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

    div#content {
        width: 95%;
        padding-left: 0;
        padding-right: 0;
    }

    div#content span {
        word-wrap: break-word;
    }

    /***** Woocommerce mobile *****/
    #content div.woocommerce ul.products li.product-category.product {
        width: 45%;
    }

    :not(#content) > div.woocommerce {
        margin-top: 0;
    }

    .woocommerce div.single-product div.summary.entry-summary {
        width: 95% !important;
        margin-left: auto;
        margin-right: auto;
    }

    .woocommerce section.related.products {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        float: none;
    }

    /** Contact Page **/
    .contact_sub_title {
        width: 85%;
    }

    /******/

    /** RFT Form **/
    div#content div#rft-form {
        width: 95%;
    }

    /******/
    
    /** FAQ Share Button **/
    
    .tooltip .tooltiptext {
        margin-right: 0;
    }
    
    .tooltip .tooltiptext::after {
        left: 90%;
        margin-left: 0;
    }
    /******/
}

@media screen and (max-width : 842px) and (-ms-high-contrast: active), 
(max-width : 842px) and(-ms-high-contrast: none) {
    #title_center div p {
        display: none;
    }
}

@media screen and (max-width : 750px) and (-ms-high-contrast: active), 
(max-width : 750px) and(-ms-high-contrast: none) {
    #title #s {
        display: none;
    }

    div.title_side:first-of-type {
        margin-right: 0;
        margin-left: 5px;
    }
}

@media screen and (max-width : 504px) and (-ms-high-contrast: active), 
(max-width : 504px) and(-ms-high-contrast: none) {

    #title .title_side:first-of-type a,
    #title .title_side:first-of-type div {
        /*        display: none;*/
    }

    #title .title_side {
        flex-direction: column;
        align-items: flex-end;
    }
}

/* Woocommerce table width */
@media screen and (max-width : 768px) and (-ms-high-contrast: active), 
(max-width : 768px) and(-ms-high-contrast: none) {
    #content .woocommerce table.shop_table.cart tbody tr:last-of-type {
        border-bottom: none;
    }

    #content .woocommerce table.shop_table.cart tbody tr {
        border-left: none;
        border-right: none;
    }

    #coupon_code {
        margin-right: 10px;
    }
}

/* Adjust Technical table to fit mobile */
@media screen and (max-width : 688px) and (-ms-high-contrast: active), 
(max-width : 688px) and(-ms-high-contrast: none) {

    /* Force table to not be like tables anymore */
    div#technical table,
    div#technical thead,
    div#technical tbody,
    div#technical th,
    div#technical td,
    div#technical tr,
    #cookies_table,
    #cookies_table thead,
    #cookies_table tbody,
    #cookies_table th,
    #cookies_table td,
    #cookies_table tr {
        display: block;
    }

    div#technical table {
        background: linear-gradient(90deg, #00b1b0 45%, white 45%);
    }

    table#cookies_table {
        background: linear-gradient(90deg, #00b1b0 35%, white 35%);
    }

    div#technical tr,
    table#cookies_table tr {
        border-bottom: 5px solid white;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    div#technical thead tr,
    #cookies_table thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    div#technical .derma_table td,
    #cookies_table td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: none;
        position: relative;
        padding: 5px;
        padding-left: 50%;
        text-align: left;
        font-size: 10pt;
    }

    #cookies_table td {
        overflow-wrap: break-word;
        padding-left: 40%;
    }

    div#technical td:before,
    #cookies_table td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        color: white;
        font-weight: 700;
    }

    /*
	Label the data
	*/
    div#technical td:nth-of-type(1):before {
        content: "File Name";
    }

    div#technical td:nth-of-type(2):before {
        content: "Description";
    }

    div#technical td:nth-of-type(3):before {
        content: "Language";
    }

    div#technical td:nth-of-type(4):before {
        content: "Revision";
    }

    #cookies_table td:nth-of-type(1):before {
        content: "Cookie";
    }

    #cookies_table td:nth-of-type(2):before {
        content: "Expiration Time";
    }

    #cookies_table td:nth-of-type(3):before {
        content: "Description";
    }

}

/*====== Mobile Adjustments END ======*/