@charset "utf-8";

/* Requiere once the Google Font stylesheets */
@import url('https://fonts.googleapis.com/css?family=Bree+Serif:600|Fondamento|Itim|Joti+One|Love+Ya+Like+A+Sister|Marmelad|Mogra|Risque|Salsa|Delius|Open+Sans:600|Sofadi+One'); */
/* Requiere once the Font Awesome stylesheets */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

/* List of selected Google fonts properties
font-family:'Bree Serif', serif;
font-family:'Fondamento', cursive;
font-family:'Itim', cursive;
font-family:'Joti One', cursive;
font-family:'Love Ya Like A Sister', cursive;
font-family:'Marmelad', sans-serif;
font-family:'Mogra', cursive;
font-family:'PT Serif', serif;
font-family:'Risque', cursive;
font-family:'Salsa', cursive;
font-family:'Open Sans', sans serif;
font-family:'Delius', cursive;
font-family:'Sofadi One', cursive;
*/

/* Fonte Florales pour univers Nelson
@font-face {
    font-family: 'floralessregular';
    src: url('/wp-content/themes/kidz-child/fonts/floraless/floraless-webfont.eot');
    src: url('/wp-content/themes/kidz-child/fonts/floraless/floraless-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/kidz-child/fonts/floraless/floraless-webfont.woff2') format('woff2'),
         url('/wp-content/themes/kidz-child/fonts/floraless/floraless-webfont.woff') format('woff'),
         url('/wp-content/themes/kidz-child/fonts/floraless/floraless-webfont.ttf') format('truetype'),
         url('/wp-content/themes/kidz-child/fonts/floraless/floraless-webfont.svg#floralessregular') format('svg');
    font-weight: normal;
    font-style: normal;
} */
@font-face {
    font-family: 'floralessregular';
    src: url('/wp-content/themes/kidz-child/fonts/floraless/floraless.eot');
    src: url('/wp-content/themes/kidz-child/fonts/floraless/floraless.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/kidz-child/fonts/floraless/floraless.woff2') format('woff2'),
         url('/wp-content/themes/kidz-child/fonts/floraless/floraless.woff') format('woff'),
         url('/wp-content/themes/kidz-child/fonts/floraless/floraless.ttf') format('truetype'),
         url('/wp-content/themes/kidz-child/fonts/floraless/floraless.svg#floralessregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*
Vert: #30a3b5;
Rose: #fc548b;
*/

.single_add_to_cart_button_kustom{
	background-color: #ff4081 !important;
	float: none;
	padding: 14px 20px 14px 35px!important;
	color: #fff !important;
	margin-bottom: 20px;
	border-radius: 3px;
	border: none;
	outline: 0!important;
	font-size: 13px;
	line-height: 13px!important;
	text-transform: uppercase;
	vertical-align: top;
	letter-spacing: 1px;
	cursor: pointer;
	position: relative;
	font-family: inherit;
	text-decoration: none;
	overflow: visible;
	font-weight: 700;
	left: auto;
	white-space: nowrap;
	display: inline-block;
}

.single_add_to_cart_button::before{
		font-family: "kidzstickers";
		content: "\e807";
		margin-right: 7px;
		z-index: 90;
	}


#overlay{
display:none;
	position:fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.65);
	z-index: 1500;
}

#loader{
	position: fixed;
	left: calc(50% - 50px);
	top: calc(50% - 50px);
	display:none;
	background: url('loader.svg');
	width: 100px;
	height: 100px;
	z-index: 1600;
}

/* ---------- Interface ---------- */

/* Bloc principal contenant le plugin */
#kp-wrapper{
    width: 100%;
    max-width: 1300px;
    margin: 30px 0 80px 0;
    clear: both;
    background-color: #fff;
	border-radius: 6px;
    display: flex;
}
h2#kp-main-title{
	color: #30a3b5;
	margin-bottom: -20px;
}

/* Colonne de gauche */
#kp-wrapper #kp-left-col{
    /*background-color: #f4f4f4;*/
	/*border-radius: 6px;*/
    /*padding: 15px;*/
    width: 45%;
	float: left;
    color: #666;
    margin-right: 20px;
	border-radius: 0px 0px 6px 6px;
    background-color: #fff;
    padding: 0px;
}

/* Colonne de droite */
#kp-wrapper #kp-right-col{
    /*border-radius: 6px;*/
	/*padding: 15px;*/
	box-sizing: border-box;
    width: 55%;
    display: inline-block;
    text-align: center;
    background-color: #f4f4f4 !important;
   /* background: url('https://www.kidzstickers.ch/wp-content/uploads/2018/07/fond-kz-2.png') no-repeat;*/
    background-position: center;
	border-radius: 0px 0px 6px 6px;
	padding: 8px 14px;
}

/* ---------- Colonne de gauche ---------- */

/* Titres dans la colonne de gauche */
#kp-wrapper #kp-left-col h3{
    /*padding: 6px 6px 6px 16px;*/
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 15px 0px 15px 0px;
    background-color: #30a3b5;
    color: #fff;
    border-radius: 5px;
    clear:left;
	padding: 4px 6px 4px 11px;
}

/* Supprime le margin top sur le premier titre */
#kp-wrapper #kp-left-col h3:first-child{
	margin-top: 0px;
}
#kp-wrapper #kp-left-col h3 {
    font-size: 22px;
}

/* Classe kp-form */
#kp-wrapper #kp-left-col .form{
	box-sizing: border-box;
	width: 100%;
	margin: 0px;
}

/* Bloc de la liste des licences */
#kp-wrapper #kp-left-col #kp-licence{
	box-sizing: border-box;
	width: 100%;
	height: auto;
	list-style-type: none;
	margin: 0px 0px 30px 0px;
	padding:0;
}

/* <li> du bloc de licences */
#kp-wrapper #kp-left-col #kp-licence li{
	width: 100px;
	height: 100px;
	background-repeat: no-repeat;
	background-position: bottom center;
	box-sizing: border-box;
	display: inline-block;
	position:relative;
	padding-bottom:15px;
	margin-left:0px !important;
	margin-right: 25px;
	cursor: pointer;
	border-radius: 8px;
	border: solid #ccc 3px;
  opacity: 0.8;
}

/* Version active d'un élément du bloc de licence */
#kp-wrapper #kp-left-col #kp-licence li.active,#kp-wrapper #kp-left-col #kp-licence li:hover{
	border: solid #fc548b 3px;
  opacity: 1;
	position: relative;
}

/* FLèche sous l'élément de licence actif */
#kp-wrapper #kp-left-col #kp-licence li.active:after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 13px 13px 0 13px;
	border-color: #fc548b transparent transparent transparent;
	position: absolute;
	left: 50%;
	margin-left: -13px;
	bottom: -13px;
}

/* Bloc de l'univers */
#kp-wrapper #kp-left-col .kp-univers{
	display:none;
	box-sizing: border-box;
	width: 100%;
	height: 80px;
	list-style-type: none;
	margin: 0;
	padding:0;
}

/* Elément <li> de l'univers */
#kp-wrapper #kp-left-col .kp-univers li{
	width: 65px;
	height: 65px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	box-sizing: border-box;
	float: left;
	position:relative;
	margin-left:0px !important;
	margin-right: 15px;
	margin-bottom: 15px;
	border-radius: 8px;
	border: solid #ccc 2px;
	cursor: pointer;
  opacity: 0.8;
}

/* Variante active du l'univers */
#kp-wrapper #kp-left-col .kp-univers li.active, #kp-wrapper #kp-left-col .kp-univers li:hover{
	border: solid #fc548b 2px;
  opacity: 1;
}

/* Champ de formulaire input */
#kp-wrapper #kp-left-col #kp-text-form input {
    overflow: hidden;
    white-space: nowrap;
    resize: none;
    display: block;
    padding: 7px 12px;
    color: #555;
    font-size: 20px;
    line-height: 1.35em;
    width: 75%;
    font-weight: 400;
    background-color: #fff;
    border: 2px solid #ccc;
    border-radius: 6px;
    min-width: 320px;
    letter-spacing: 1px;
}

/* Fonte de démonstration */
#kp-wrapper #kp-left-col .kpFontDemo {
	/*line-height: 38px;*/
    font-size: 27px;
    color: #333;
    margin-right: 0.2em;
    margin-bottom: 0.3em;
    cursor: pointer;
    display: inline-block;
    border: 2px solid #ccc;
    padding: inherit;
    border-radius: 6px;
    height: 38px;
    vertical-align: middle;
    width: 75px;
    text-align: center;
    padding: 4px 0px;
    opacity: 0.8;
    font-weight: 400;
	line-height: 27px;
}

/* Changement de couleur de la fonte de demonstration */
.kp-label-container .kpFontDemo:hover{
	color: #333;
}

/* Variante active du l'univers */
#kp-wrapper #kp-left-col .kpFontDemo.active,#kp-wrapper #kp-left-col .kpFontDemo:hover{
	border: 2px solid #fc548b;
  opacity: 1
}

/* ---------- Colonne de droite ---------- */


/* Order */

.woocommerce div.product #kp-wrapper form.cart .button {
    vertical-align: middle;
    float: none;
    margin-top: 12px;
}
#kp-wrapper #kp-order {
    text-align: center;
    font-weight: 600;
    font-size: 20px;
}

/* ---------- Etiquette ---------- */

/* Bloc contenant l'étiquette */
#kp-wrapper #kp-right-col .kp-label-wrapper{
	margin-right: 30px;
    margin-top: 20px;
    margin-bottom: 30px;
    display: inline-block;
    margin-left: 30px;
    vertical-align: middle;
}
@media screen and (max-width: 1235px) {
#kp-wrapper #kp-right-col .kp-label-wrapper{
	margin-right: 15px;
    margin-left: 15px;
}}
@media screen and (max-width: 1180px) {
#kp-wrapper #kp-right-col .kp-label-wrapper{
	margin-right: 8px;
    margin-left: 8px;
}}

/* L'étiquette en elle-même */
#kp-wrapper #kp-right-col .kp-label{
	z-index:-9999;
	-webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.2);
	-moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.2);
	box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.2);
	display: inline-block;
	vertical-align: middle;
}

/* Emplacement du texte */
#kp-wrapper #kp-right-col .kp-text-container{
	position:relative;
	z-index: 0;
	overflow: hidden;
	white-space: nowrap;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	line-height: 1.1em;
	font-weight: 400;
}

/* Span de texte (ligne) */
#kp-wrapper #kp-right-col .kp-text{
	display: block;
	vertical-align: middle;
	line-height: 1.1em;
	z-index: 0;
}


/* ---------- Eléments masqués, utiles à la technique ---------- */
.kp-json{
	display:none;
}

.kp-font-selector-title-toggle{
	display: none;
}

/* ---------- Mobile ---------- */

@media screen and (max-width: 800px){
	
	/* Formulaire commande sur mobile */
	#order-mobile .single_add_to_cart_button_kustom{
		margin-bottom: 0px;
		border-radius: 3px;
		box-shadow: #999 0px 2px 10px;
		width:100%;
		box-shadow: none;
		padding: 13px 0px !important;
		text-transform: none;
		font-size: 14px;
	}
		
	/* Icône panier */
	#order-mobile .single_add_to_cart_button_kustom::before{
		font-family: "kidzstickers";
		content: "\e807";
		margin-right: 7px;
		z-index: 90;
	}
	
	#order-mobile .price del{
		font-size: 13px !important;
	}
	
	.kp-order-section-fixed{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		box-shadow: 2px 1px 9px 2px rgba(0,0,0,0.1);
		height: 57px;
		padding-top: 0px;
		z-index: 90;
	}
	
	#order-mobile .price{
		display: inherit;
    	margin-bottom: -38px;
    	margin-left: 15px;
    	padding-top: 15px;
    	text-align: center;
    	margin-right: 216px;
	}
	
	#order-mobile ins .woocommerce-Price-amount {
			color: #ff4081;
		font-weight: 700 !important;
	}
	
	#order-mobile form{
		width: 180px;
		float: right;
		margin: 4px 15px 4px 10px;
		border-radius: 3px;
	}	
	
	
	
	#kp-wrapper{
		display: block;
	}
	#kp-wrapper #kp-left-col, #kp-wrapper #kp-right-col{
		width: 100%;
	}
	.woocommerce #content div.product .woocommerce-tabs ul.tabs li, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li{
		display: inline-block;
	}
	h3, .entry-content h3{
		margin-bottom: 5px;
	}	
	#kp-wrapper #kp-left-col .kp-univers li{
		width: 60px;
		height: 60px;
		margin-left: 0px !important;
		margin-right: 7px;
		margin-bottom: 7px;
	}
	#kp-wrapper #kp-left-col #kp-licence{
		margin: 0px 0px 15px 0px;
	}	
	#kp-wrapper #kp-left-col #kp-licence li{
		width: 88px;
		height: 88px;
		background-size: cover;
	}
	#kp-wrapper #kp-left-col #kp-text-form input{
		width: 100%;
		margin-bottom: 5px;
	}
	#kp-wrapper #kp-left-col .kpFontDemo{
		margin-right: 0.15em;
	}
	#kp-wrapper #kp-left-col h3{
		background-color: #30a3b5;	
	}
	#tab-description p{
		margin-bottom: 0.6em;
	}
	#kp-wrapper #kp-right-col{
		background: none;
		margin-top: -15px;
		padding:5px;
	}	
	#kp-wrapper #kp-right-col .kp-label-wrapper{
		margin-right: 5px;
		margin-left: 5px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.woocommerce ul.products.columns-3 li.product, .woocommerce-page ul.products.columns-3 li.product{
		width: 100%;
		margin-right: 0px !important;
	}
	#kp-wrapper #kp-left-col .kpFontDemo{
		width: 76px;
	}
	#kp-font-selectors{
		display: none;
	}
	#kp-font-selector-title{
		cursor: pointer;
		color: #fc548b;
		margin-top: -20px;
		margin-bottom: 5px;
	}
	.kp-font-selector-title-toggle{
		font-weight: 600;
	}
	.kp-font-selector-title-toggle.plus{
		display: inline;
	}
	.kp-font-selector-title-toggle.minus{
		display: none;
	}
	
	#kp-text-form-title{
		margin-top: 8px;
	}
}



