/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */
 
/* Webbax - tuto 39 - optimisation mobile */

/* Mobile large */
@media(max-width:600px){

    #main .products .product-miniature {float:left;width:46%;margin-right:2%}
    #main .products .product-miniature .thumbnail-container{width:100%;height:240px;margin-bottom:15px;}
    #main .products .product-description{width:100%;height:100px;}
    #main .products .product-miniature .thumbnail-container img{width:95%;}
    #main .products .product-flag{padding:3px!important;min-height:inherit!important;font-size:9px!important;height:25px} 
    #main .products .discount-percentage{padding:3px!important;min-height:inherit!important;font-size:12px;} 

}

/* Mobile small */
@media(max-width:320px){
    
    #main .products .product-miniature .thumbnail-container{height:270px;}
    #main .products .product-description{height:120px;}
    
}

/* Webbax - tuto 27 */
#homepage img{max-width:100%;}
#homepage a img:hover{opacity: 0.8;filter: alpha(opacity=80);}
#homepage #banner{margin-bottom:30px;}
#homepage #arguments h2{margin-top:20px;margin-bottom:20px;}
#homepage #arguments p{font-size:14px;}

/* Tuto 31 */
/* @import url('https://fonts.googleapis.com/css?family=Gochi+Hand'); */
@import url('https://fonts.googleapis.com/css?family=Kdam+Thmor|Montserrat|PT+Sans+Narrow|Paytone+One|Roboto|Roboto+Mono|Spirax|Ubuntu|Unlock|Yanone+Kaffeesatz:700');
body{font-family: 'Roboto Mono', monospace;!important;}
h1{font-family: 'Ubuntu', sans-serif;!important}
a.dropdown-item{font-family: 'PT Sans Narrow', sans-serif;!important}
h1.h1.products-section-title.text-uppercase{font-family: 'PT Sans Narrow', sans-serif;!important}
h1.h1{font-family: 'Ubuntu', sans-serif;!important}
h2{font-family: 'Ubuntu', sans-serif;!important}
p{font-family: 'Roboto', sans-serif;!important}
a{font-family: 'Roboto', sans-serif;!important}
a.btn.btn-primary{font-family: 'Kdam Thmor', cursive;!important}
a._gray-darker.search-link.js-search-link{font-family: 'Yanone Kaffeesatz', sans-serif;!important;}

/* Webbax - Tuto 37 - microbanner */
#header-microbanner{background-color:#333;color:#fff;font-size:13px;text-align:center;}
#header-microbanner span{margin-right:20px;margin-left:20px;}

#header-microbanner-v2{background-color:red;color:#fff;font-size:10px;text-align:center;padding-left:5px;padding-right:5px;}

/* Mobile */
@media(max-width:500px){
   #header-microbanner span{margin-right:5px;margin-left:5px;}
   #header-microbanner .mb_span2, #header-microbanner .mb_sep2{display:none;}
}

/*Style du bloc des tabs de la fiche produit*/
#product_tabs_block{
	margin-bottom: 2rem;
}

/* Webbax - Tuto 36 - Popup */
#Everpopup_block_center img{width:100%!important;height:auto!important;}
#Everpopup_block_center #everpopup_image_legend{display:none!important;}
#Everpopup_block_center h1, #Everpopup_block_center h2{display:none!important;}
#Everpopup_block_center .rte{display:none!important;}
.fancybox-slide>*{padding:0!important;margin:0!important;width:60%!important;}
.fancybox-slide{padding:0 30%!important;}

/* Ipad */
@media(max-width:1024px){
    .fancybox-slide{padding:0 0%!important;}
}

/* Mobile */
@media(max-width:500px){
   .fancybox-slide>*{width:80%!important;}
   .fancybox-slide{padding:0 10%!important;}
}


/* 15.02.18 - Webbax - TUTO 46 */
#product #customer_info{
    padding:10px;border:1px solid #d5bb08;
    background-color:#fbf1ae;
    text-align:center;-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#product #customer_info .name{font-weight:bold;}
#product #customer_info img{width:40px;}
#product #customer_info #block1{float:left;}
#product #customer_info #block2{float:left;text-align:left;padding-left:20px;}
#product #customer_info #block2 .havebuy{font-style:italic;}

@import url('https://fonts.googleapis.com/css?family=Karma');
body{font-family: 'Karma', serif;}

/* 29.03.18 - Webbax / TUTO 49 */
#pagenotfound .page-not-found{max-width:100%;}
#pagenotfound .products{margin-top:20px;text-align:center;}
#pagenotfound .products article{display:inline-block;margin-right:5px;}
#pagenotfound .page-content .img-header{width:100%;margin-bottom:20px;}
#pagenotfound .page-content h4{padding-left:20%;padding-right:20%;}
#pagenotfound .page-content p{text-align:center;}
#pagenotfound .page-content #search_widget{text-align:center;}

/* mobile */
@media(max-width:600px){
    #pagenotfound .products{display:none;}
}

/* Webbax - TUTO 51 */

/* impact sur le prix */
@keyframes bounceIn {
    0% {
      transform: scale(0.1);
      opacity: 0;
    }
    60% {
      transform: scale(1.2);
      opacity: 1;
    }
    100% {
      transform: scale(1);
    }
}

#product .current-price{font-size:35px;}
#product .current-price{
    animation-duration: 2s;
    animation-name: bounceIn;
}
#product .current-price{
    animation: bounceIn 2s;
}

/* impact sur le bouton d'achat */
@keyframes pulse_animation {
    0% { transform: scale(1); }
    30% { transform: scale(1); }
    40% { transform: scale(1.08); }
    50% { transform: scale(1); }
    60% { transform: scale(1); }
    70% { transform: scale(1.05); }
    80% { transform: scale(1); }
    100% { transform: scale(1); }
}
#product .add-to-cart{
    animation-name: pulse_animation;
    animation-duration: 10000ms;
    transform-origin:70% 70%;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
/* Webbax - Tuto SEO 17 */
#category #category-description{background-color:#fff;font-size:12px;padding:20px;margin-bottom:30px;}