/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */


/*  Changing color for majority of the website
    Default color Classic Theme : #2fb5d2
    La Lupita color : #d23d3c
 */


/* #header .header-nav .cart-preview.active {
    background: #d23d3c;
} */


/* .footer-container li a:hover {
    color: #2fb5d2;
} */


/* Changing font for the whole website */

body {
    font-family: 'Raleway', sans-serif !important;
}

#products .highlighted-informations .quick-view:hover,
.featured-products .highlighted-informations .quick-view:hover,
.product-accessories .highlighted-informations .quick-view:hover,
.product-miniature .highlighted-informations .quick-view:hover,
.footer-container li a:hover,
.tabs .nav-tabs .nav-link.active,
a:hover {
    color: #d23d3c;
}

.product-price {
    color: #d23d3c;
    display: inline-block;
}

#header a:hover,
#header .top-menu a[data-depth="0"]:hover,
#dropdown-item a:hover {
    text-decoration: none;
    color: #d23d3c;
}

#header .header-nav .cart-preview.active,
.btn-primary {
    color: #fff;
    background-color: #d23d3c;
    border-color: transparent;
}


/* Remove the border from the top Navigation header */

#header .header-nav {
    margin-bottom: 0px;
    border-bottom: 0px;
}

.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover {
    border: none;
    border-bottom: 3px solid #d23d3c;
}

#wrapper {
    padding-top: 0px;
}


/* To put a full width image on the home page */

.banner {
    left: 50%;
    margin-left: -45vw;
    margin-right: -45vw;
    max-width: 90vw;
    position: relative;
    right: 50%;
    width: 90vw;
    text-align: center;
    height: 40vw;
    overflow: hidden;
}


/* Changes to the main category image cover */

#products .thumbnail-container .product-thumbnail img,
.featured-products .thumbnail-container .product-thumbnail img,
.product-accessories .thumbnail-container .product-thumbnail img,
.product-miniature .thumbnail-container .product-thumbnail img {
    max-width: 100%;
    /* width: 300px;
    height: 300px; */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin-top: 0px;
    margin-bottom: 0px;
}

#products .thumbnail-container .product-thumbnail:hover img,
.featured-products .thumbnail-container .product-thumbnail:hover img,
.product-accessories .thumbnail-container .product-thumbnail:hover img,
.product-miniature .thumbnail-container .product-thumbnail:hover img {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    opacity: 0.7;
}

#products .thumbnail-container:hover>a,
.featured-products .thumbnail-container:hover>a,
.product-accessories .thumbnail-container:hover>a,
.product-miniature .thumbnail-container:hover>a {
    overflow: hidden;
    background-color: black;
}


/* .product .product-thumb:hover > a:after {
    opacity: 1;
} */


/* to make the product thumbnails bigger, look for 300px in this custom code


body.tax-display-enabled #products .product-description,
body.tax-display-enabled .featured-products .product-description,
body.tax-display-enabled .product-accessories .product-description {
    width: 300px;
}

body.tax-display-enabled #products .highlighted-informations,
body.tax-display-enabled .featured-products .highlighted-informations,
body.tax-display-enabled .product-accessories .highlighted-informations {
    width: 300px;
} */


/* to lower part of the thumbnail block for the product list on the category page */

#products .product-description,
.featured-products .product-description,
.product-accessories .product-description,
.product-miniature .product-description {
    position: absolute;
    z-index: 3;
    background: #fff;
    width: 250px;
    bottom: 0;
    top: 260px;
    height: 70px;
}


/* to remove the box shadow around the thumbnail container */

body.tax-display-enabled #products .thumbnail-container,
body.tax-display-enabled .featured-products .thumbnail-container,
body.tax-display-enabled .product-accessories .thumbnail-container {
    height: 358px;
    border-radius: 15px;
    box-shadow: none;
    /* height: 300px;
    width: 300px; */
}


/* to make the backround color of the wrapper -> white */

#wrapper {
    background-color: white;
    box-shadow: unset;
}


/* to make the block with the category image cover be bigger on the page */

.col-md-9 {
    float: left;
    width: 100%;
}


/* to hide the navigation block on the left of the category page */

#left-column {
    display: none;
}


/*
* to hide the breadcrumb path
*/

#wrapper .breadcrumb {
    display: none;
}


/* to make the border of the product thumbnail round and to remove the box shadow around the thumbnail container 

body.tax-display-enabled .thumbnail-container,
body.tax-display-enabled .featured-products .thumbnail-container,
body.tax-display-enabled .product-accessories .thumbnail-container {
    height: 358px;
    border-radius: 15px;
    box-shadow: none;
    height: 300px;
    width: 300px;
}
*/


/* to make the image category cover take more space on the page */

.block-category .block-category-inner .category-cover img {
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    margin-bottom: 15px;
}


/* to center the image for the category image cover and remove the box-shadow */

.card-block {
    text-align: center;
    box-shadow: none;
    padding-left: 00px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    border: none;
    min-height: 5rem;
}

.page-header h1,
.block-category h1
{
    text-align: center;
    font-size: 30px;
    position: relative;
    /* top: 285px; */
    color:#d23d3c;
    /* background: linear-gradient(90deg, hsl(350, 100%, 88%), hsl(350, 100%, 68%), hsl(350, 100%, 88%)); */
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.block-category .block-category-inner {
    display: inline
}


/* Size of the Logo on the home page */

.col-md-2 {
    float: none;
    width: 25%;
    margin-left: auto;
    margin-right: auto;
}

.col-md-10 {
    float: left;
    width: 100%;
    margin-top: 20px;
}


/* LOGO */

#header .header-top .menu {
    /* padding-left: 20%;
    padding-top: 10px;
    margin-bottom: .375rem; */
    text-align: center;
    width: 100%;
}

#header .header-top {
    /* margin-top: 2px;
    padding-top: 30px; */
    padding-bottom: 30px;
}


/* .container .col-md-2 h1 {
    border: solid;
    opacity: 1;
    border-color: #d23d3c;
} */

#header .logo {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: white;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.block-category .block-category-inner #category-description p:first-child {
    margin-bottom: 0px;
}

.product-images>li.thumb-container>.thumb.selected,
.product-images>li.thumb-container>.thumb:hover {
    border: 3px solid #d23d3c;
}

#product-modal .modal-content .modal-body .product-images img:hover {
    border: 3px solid #d23d3c;
}


/* Layout and style of the 3 homeblock modules on the homepage
    Module source : https://contentbox.org */

.homeblock {
    color: white;
    width: 30%;
    height: 333px;
}

#homeblock1 {
    float: left;
}

#homeblock2 {
    float: right;
}

#homeblock3 {
    margin: 0 auto;
}

#homeblock4 {
    padding-top: 40px;
}


/* Footer */

.footer-container {
    background-color: #e2e2e2
}

.col-md-6.links {
    width: 30%;
}

.col-md-6.wrapper {
    width: 100%;
}

.col-md-3.links.wrapper {
    float: right;
    width: 30%;
}

.block-contact.col-md-3.links.wrapper {
    margin: 0 auto;
    width: 30%;
}

/* Remove box-shadow on the product information page */

.product-information .tabs {
    box-shadow: none;
}

/* Remove the "print this page" button */

.btn-secondary {
    display: none;
}

.product-flags li.product-flag.on-sale {

    background: #D23D3C;
    color: white;
}


/* MOBILE VERSION CSS */
@media (max-width: 767px) {
	* {
		box-sizing: border-box;
	}
	
	/* passer body (et tous les éléments de largeur fixe) en largeur automatique */

	body {
		width: auto;
		margin: 0;
		padding: 0;
    }
    
    /* taille du logo */


    #header .header-nav .top-logo a img {
        max-height: 100px;
        max-width: 100%;
    }

    .homeblock {
		height: 100px;
	}
	
	/* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
    video {
		max-width: 100%;
	}
	
	/* conserver le ratio des images */

	img {
		height: auto;
	}
	
	/* gestion des mots longs */

	textarea,
	table,
	td,
	th,
	code,
	pre,
	samp {
		-webkit-hyphens: auto; /* césure propre */
		-moz-hyphens: auto;
		hyphens: auto;
		word-wrap: break-word; /* passage à la ligne forcé */
	}
	
	code,
	pre,
	samp {
		white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
	}
	
	/* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */

	.element1,
	.element2 {
		float: none;
		width: auto;
	}
	
	/* masquer les éléments superflus */

	.hide_mobile {
		display: none !important;
	}

	/* afficher l'image de categorie */

	.category-cover {

		display: block!important;

	}
}