/**
 * This file is a container for custom CSS. You can use it to override the default styles of the theme.
 *
 * 1. Copy the file "SAMPLE.custom.css" and rename it to "custom.css".
 *    Otherwise this file will not be loded by Magento.
 * 2. Enable it in the admin panel.
 * 3. Uncomment slected sample styles or add your own CSS to override the default styles of the theme.
 *
 * Please refer to the user guide for more details.
 *
 */

/** Wytze Jan Riedstra 16-05-2017 Responsive YouTube iframe in Ves/Blog module 
 * ------------------------------------------------------------
 */
 
 .intrinsic-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
 
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
	padding-bottom: 56.25%;
}
 
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
	padding-bottom: 75%;
}
 
.intrinsic-container iframe {
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}

/** Wytze Jan Riedstra 30-05-2017  Checkout Terms & Conditions
 * ------------------------------------------------------------
 */
 
#checkout_terms_and_conditions { display:none; }
#checkout_terms_and_conditions { position:fixed; width:100%; height:100%; top:0; left:0; background:rgba(0, 0, 0, .35); z-index:100; }

#checkout_terms_and_conditions .tac-content { position:fixed; background:#fff; width:310px; height:auto; left:50%; top:50%; transform: translate(-50%, -50%); padding:8px 8px 12px; border: 1px solid #b6b6b6; z-index:200; }

#checkout_terms_and_conditions .tac-close { float:right; }

#checkout_terms_and_conditions a.button { text-decoration:none !important; cursor:pointer !important; background:none !important; }
#checkout_terms_and_conditions a.button span { display:block; height:19px; border:1px solid #de5400; background:#f18200; padding:0 8px; font:bold 12px/19px Arial, Helvetica, sans-serif; text-align:center; white-space:nowrap; color:#fff; }
#checkout_terms_and_conditions a.button span span { border:0; padding:0; }

/**
 * Wytze Jan Riedstra 30-05-2017 Checkout Terms & Conditions / Place terms and conditions in center of the screen.
 * ------------------------------------------------------------
 */
 
#checkout-step-payment #paymentguarantee_terms_and_conditions .tac-content { top:50% !important; margin-left: 0px !important; transform: translate(-50%, -50%);}

/**
 * Scroll-to-top button in purple and onhover in orange.
 * Not displaying if screen is smaller than 1199px.
 * (WJR 20-06-2017)
 * --------------------------------------------------------------
 */

#scroll-to-top {
    background-color:#4a2268 !important;
    color:#ffffff !important; 
}
#scroll-to-top:hover {
    background-color:#f68519 !important;
}

@media only screen and (max-width: 1199px) {
    #scroll-to-top {
        display: none !important;
    }
}

/**
 * FontAwesome Plus/Minus Icons Product Text (21-06-2017)
 * ------------------------------------------------------------- 
 */

ul.wk_odoo_plus, ul.wk_odoo_minus { /* padding-left:20px; */ list-style: none; }
/* ul.wk_odoo_plus > li, ul.wk_odoo_minus > li { margin-bottom:10px; } */
ul.wk_odoo_plus > li:before {
    font-family: 'FontAwesome';
    content: '\f055';
    color: green;
    /* margin:0 5px 0 -30px; /* -15px ; */
    margin:0 0px 0 0px;
    position: absolute;
    left: 6px;
}
ul.wk_odoo_minus > li:before {
    font-family: 'FontAwesome';
    content: '\f056';
    color: red;
    /* margin:0 5px 0 -30px; /* -15px ; */
    margin:0 0px 0 0px;
    position: absolute;
    left: 6px;
}
/* Below code replaces the normal bullet point for the plus/minus sign */
.product-view, box-tabs, .tabs-panels ul.wk_odoo_plus li, ul.wk_odoo_minus li {
    background-image:none !important;
    position: relative;
    padding: 0 0 0 0px;
}

/**
 * Align Payment Methods Checkout (21-06-2017)
 * -------------------------------------------
 */

.sp-methods dd {
    margin: 0px 0 0px !important;
}
.sp-methods dt {
	margin: 0px 0 0 !important;
}
fieldset.form-list {
    padding: 0px 10px 0px 22px !important;
}
.payment_logo {
    width: 60px !important;
}
.payment_method_wrapper {
    display: table;
    width: 100%;
}
.payment_method_wrapper_contents {
    vertical-align: middle;
}

#checkout-payment-method-load label {
    padding: 0 10px 0 0 !important;
}

/**
 * Disable color swatches block on mobile devices in list mode (06-07-2017)
 * Set on max-width: 1023px. Swatches block is not displayed for everything below this width.
 * ------------------------------------------------------------------------------------------
 */
@media only screen and (max-width: 1023px) {
	.products-grid .amconf-block {
		display: none;
	}
}

/**
 * Set color of custom stock status on product page to black (26-09-2017)
 * ----------------------------------------------------------------------
 */
p.availability.in-stock {
    color: #000000;
    font-weight: bold;
}

/**
 * Place searchautocomplete-loader in the middle of the search bar
 * And other search functionalities
 * ---------------------------------------------------------------
 */
 .searchautocomplete-loader {
    top: 6px !important;
}

/* remove schadow from inner box */
.form-search .search-autocomplete ul {
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 0px 0px 0px 0px;
}

.form-search .search-autocomplete li {
    line-height: 16px;
}

/* set width of box to auto if screen is smaller than 406px */
@media screen and (max-width: 423px) {
    div#search_autocomplete {
        width: auto !important;
    }
}

/* set width of box to auto if screen is between 770px and ?px */
@media screen and (min-width: 770px) {
    div#search_autocomplete {
        left: -100px !important; /* set box to left side otherwise it displays out of the screen */
    }
    .searchautocomplete .searchautocomplete-placeholder:before {
        left: 130px !important; /* set icon on top of the box in middle of the box */
    }
}

/* remove schadow from box and make box bigger */
.searchautocomplete .searchautocomplete-placeholder {
    box-shadow: none;
    -webkit-border-radius: 0px 0px 0px 0px;
    -border-radius: 0px 0px 0px 0px;
    padding: 10px 10px 5px 10px;
}

/* remove margin */
.searchautocomplete .searchautocomplete-placeholder .all {
    margin: 0px 5px 0px 0px;
}

/* change background-color active selection and remove box-shadow */
.searchautocomplete .searchautocomplete-placeholder ul li.active {
    background-color: #f4f4f4;
    box-shadow: none;
}

/**
 * ------------------------------------------------------------------------
 */

/**
 * Remove margin-bottom from product-primary-column (product page)
 * ------------------------------------------------------------------------
 */
 @media only screen and (max-width: 767px) {
    .product-primary-column {
        margin-bottom: 0px !important;
    }
 }

/**
 * Mobile suitable product page
 * ------------------------------------------------------------------------
 */

/**
 * Mobile suitable product page => small product title
 * ------------------------------------------------------------------------
 */

@media only screen and (max-width: 991px) {
    h1 {
        font-size: 2.0rem !important;
    }
}

/**
 * Responsive quantity wrapper and add-to-cart button for different sizes
 * ------------------------------------------------------------------------
 */

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .qty-wrapper {
        float: right;
    }
    button#product-addtocart-button {
        float: left;
        min-width: 0px !important;
    }
}

@media only screen and (max-width: 479px) {
    .qty-wrapper {
        float: right;
        margin-bottom: 15px !important; /* equal space above and below border in between add-to-cart and wishlist/compare/gift */
    }
    button#product-addtocart-button {
        width: auto !important;
        min-width: 175px !important;
    }
}

/**
 * Narrow spaces between blocks
 * ------------------------------------------------------------------------
 */

.action-box.clearer {
    float: left; /* move wishtlist/compare/gift to left side of product page always */
    margin: 0px 0 !important; /* narrow space between add-to-cart button and wishlist/compare/gift */
    margin-bottom: 0px !important;  /* narrow space between wishlist/compare/gift and product description */
}

.container1-wrapper {
    padding-bottom: 0px !important; /* for config product: narrow space between add-to-cart button and wishlist/compare/gift */
}

.collateral-container.box-tabs {
    margin-bottom: 0px !important; /* narrow space between product tabs and footer */
}

.links-wrapper-separators {
    padding: 0px 0 !important; /* narrow space between product info and footer */
}

.box-collateral.box-upsell {
    margin-bottom: 0px !important; /* narrow space between upsell products and footer/related */
}

.product-secondary-column {
    margin-bottom: 0px !important; /* narrow space between related products and footer */
}

/**
 * Space between CTA-button and wishlist/compare/gift in case of disabled add-to-cart button
 * ------------------------------------------------------------------------------------------
 */

.disable-add-to-cart-button {
    margin-bottom: 10px;
}

/**
 * Swatches of Amasty in square (no border-radius) for product page and listing
 * one class for a color container and one for a swatch with an image
 * ----------------------------------------------------------------------------
 */

.amconf-color-container {
    border-radius: 0px !important;
}
.amconf-image {
    border-radius: 0px !important;
}

/**
 * Indication active swatch change from yellow to Babycare-purple with a dotted line
 * ---------------------------------------------------------------------------------
 */
.amconf-image-selected { 
    outline: 2px dotted #4a2268 !important;
}