/* CSS portail Vietnam Tailor 10/2019 */
/* Pink : #f44336 | Green : #4caf50 | grab green #00b14f */

html { scroll-behavior: smooth; }

@font-face {
    font-family: "Tailor_VN";
	src: url('../../themes/vietnam-tailor/ThuPhapThienAn.ttf');
}

body {
	background-color:#fff;
	font-family: 'Be Vietnam Pro', sans-serif;
	font-size: 1em;
	width: 100%;
 	margin: 0; /* pour éviter les marges */
	text-align: center; /* pour corriger le bug de centrage IE */
    }

h1 { font-size:1.5em; text-align:center; } 
h2 { font-size:1.1em; white-space:nowrap; overflow: hidden;}
h3 { font-size:1em; color:#4caf50; white-space:nowrap; overflow: hidden;}

A { text-decoration: none; padding:2px }
A:link { color:#000 }
A:visited { color:#000; }
A:active { color:#000; }
A:hover { color:#f44336; }

img { border:0px; padding:0px; margin:0px; max-width:100%; max-height:100%; }

.photo { border:1px solid #5d5e5e; }
.return  { clear: both }
.center { margin:auto; text-align: center; }
.mini { font-size:0.7em }
.big { font-size:2em; color:#f44336; }
.zoom:hover { -webkit-transform:scale(1.1); transform:scale(1.1); }
.icon { width: 24px; vertical-align: middle;}

.bouton { font-size:1.1em; text-align:center; margin:auto;}
.display { display:none; }
hr { border-top:1px solid #4caf50; }
table { border-collapse:collapse; display:block; }
tr,td,th { border:1px solid #4caf50; }
th { text-align:center; color:#4caf50 }

/*  entete  */
#header { width:100%; margin:0px; border-bottom:2px dashed #fff; background-color:#00b14f; }
#claim { font-family:'Passions Conflict', cursive; float:left;font-size:2em; margin:0.5%; letter-spacing:2px; color:#fff; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.logo { margin:auto; font-family:'Passions Conflict', cursive; letter-spacing:2px; font-size:3.5em;}
#titre { font-family: 'Passions Conflict', cursive; font-size:3.5em;  letter-spacing:1px; position:relative; margin:auto; text-align:center; width:270px; border-bottom: solid 1px #000; margin-top: 0; }
#titre a:hover { color:#dfd; }

/* -- bloc account --
#bloc_account { text-align:center; float:right; margin:0.5%; height:32px; } */
#bloc_account img { width:32px; vertical-align:middle; }
.bloc_account { border: 1px dashed #4caf50; border-radius: 10px; background-color: #dfd; }

#bloc_lg { text-align:center; float:right; margin:0.5%; height:32px;font-size:0.7em; }
#bloc_lg li { display: inline-block; list-style-type:none; }
#bloc_lg ul { color:#f44336; padding:0; margin:0; }
#bloc_lg img { width:30px; margin-right:5px; }

#menu { clear:both; text-align:center; width:98%; margin:1%; padding:0; z-index: 10;   }
#menu ul { display:bloc; margin:0; padding:0; }
#menu li { display: inline-block; padding:2px; margin:2px; background-color:#dfd; border-radius:10px; border: 1px dashed #00b14f; }
#menu li:hover { border: 1px solid #dfd; }

/*  content main { } */

#content { clear:both; width:100%; text-align:center; margin:auto; padding:0%; }
#bloc { clear:both; width:100%; text-align:center; margin:auto; vertical-align:top; padding:0%;}

/* --- Page d'accueil - Home page -----------------------------------------*/
.box { width:100%; margin:0%; color:#00b14f; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #dfd; } 
#mini_box1 { animation:anim1 7s; }
#mini_box2 { animation:anim2 7s; }
#mini_box3 { animation:anim3 7s; }
#mini_box1, #mini_box2, #mini_box3 { margin:0.1%; width:33%; height:250px ;float: left; animation-iteration-count:1; animation-fill-mode: forwards;}
#mini_box1 p, #mini_box2 p, #mini_box3 p { text-align: center; margin-top: 70px; font-family:'Passions Conflict', cursive; font-size:4em; letter-spacing:3px;  }

/* -------------------------------------------------------------------------- */
	@-webkit-keyframes anim1 {
		0% {
			background-image:url("../../images/cover/img_1.jpg"); background-position: right top; animation-timing-function: ease-in;
		  }

		100% {
			background-image:url("../../images/cover/img_1.jpg"); animation-timing-function: ease-in; background-size:cover; 
		}
	}
	@keyframes anim1 {
		0% {
			background-image:url("../../images/cover/img_1.jpg"); background-position: right top; animation-timing-function: ease-in;
		  }

		100% {
			background-image:url("../../images/cover/img_1.jpg"); animation-timing-function: ease-in;background-size: cover; 
		}
	}
/* -------------------------------------------------------------------------- */
	@-webkit-keyframes anim2 {
		0% {
			background-image:url("../../images/cover/img_2.jpg"); background-position: left bottom;	animation-timing-function: ease-in;background-size: cover
		  }

		100% {
			background-image:url("../../images/cover/img_2.jpg"); animation-timing-function: ease-in;background-size: cover
		}
	}
	@keyframes anim2 {
		0% {
			background-image:url("../../images/cover/img_2.jpg"); background-position: left bottom; animation-timing-function: ease-in;background-size: cover
		  }

		100% {
			background-image:url("../../images/cover/img_2.jpg"); animation-timing-function: ease-in;background-size: cover
		}
	}
/* -------------------------------------------------------------------------- */
	@-webkit-keyframes anim3 {
		0% {
			background-image:url("../../images/cover/img_3.jpg"); opacity: 1; background-position: left top;
			animation-timing-function: ease-in;
		  }

		100% {
			background-image:url("../../images/cover/img_3.jpg"); opacity: 1; background-position: right top; background-size: cover;
			animation-timing-function: ease-in;
		}
	}
	@keyframes anim3 {
		0% {
			background-image:url("../../images/cover/img_3.jpg"); opacity: 1; background-position: left center;
			animation-timing-function: ease-in;
		  }

		100% {
			background-image:url("../../images/cover/img_3.jpg"); opacity: 1; background-position: right center; background-size: cover;
			animation-timing-function: ease-in;
		}
	}
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */

#bloc_100 { width:99%; margin:auto; padding:0%; display:inline-block; border-top:1px dotted black; vertical-align:top; text-align:left; }

#bloc_A, #bloc_B, #bloc_AB { background-color:rgba(245, 245, 245, 0.7); width:45%; margin:0.2%; padding:0.5%; display:inline-block; border-radius:5px; border:1px dotted black; vertical-align:top; text-align:left; }

#bloc_AB { width:91.8%; }

#col_3 { display:none; }
#col_2 { float:right; width:255px; padding:5px; margin:0; text-align:center; margin-bottom:5px; border-left:1px #7bc142 solid;}
#col_1b { margin:0; padding:0; margin-right:270px; white-space:normal; }
#col_1 { max-width:1020px; margin:auto; text-align:left; }
/*#col_1 img { border-radius:5px; }*/

/*.bloc_3 { background-color:rgba(245, 245, 245,0.7); width:31%; margin:0.5%; padding:0.5%; display:inline-block; float:left; border-radius:5px; border:1px dotted black; vertical-align:top; text-align:left; height:210px }  /*ex bloc_290*/

.bloc_4 { background-color:#dfd; width:24%; margin:0.5%; padding:0%; float:left; border-radius:5px; vertical-align:middle; text-align:left; height:160px; text-align:center; overflow:hidden; border: 0px;} /*ex bloc_190*/
.bloc_4 img { width: 100%; }

#bloc_project { width:41%; background-image: url(../../themes/vietnam-tailor/imgs/bloc_project.jpg); background-repeat:no-repeat; background-size:cover; border: 1px dashed #4caf50; border-radius: 10px;}
#bloc_provider { width:41%; background-image: url(../../themes/vietnam-tailor/imgs/bloc_provider.jpg); background-repeat:no-repeat;background-size:cover; background-position: right top;border: 1px dashed #4caf50; border-radius: 10px;}
#bloc_provider p, #bloc_project p { line-height:2em; font-size:2em; color:#000; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }

#bloc_tellus { width:25%; }
#bloc_wefind { width:25%; }
#bloc_deal { width:25%; }

.bloc_vignettes { float:left; margin:3%; padding:1%; text-align:center; list-style-type:none;}
.bloc_vignettes h3 { color:#fff; background-color: #4caf50; line-height:1em; padding: 2px; border-radius: 10px;}
.bloc_vignettes ul { list-style-type:none; margin:0; padding:0;}

#menu ul { display:bloc; margin:0; padding:0; }
#menu li { display: inline-block; }
#menu li:hover { border: 1px solid #dfd; }

/*.bloc_0 { clear:both; width:96%; margin:auto; text-align:center; font-size:1.1em}*/

#search_bar { text-align:right; height:38px; }
#search_bar img { border:0px; margin:0 }

.promo { background-color:#f44336; color:#fff; padding:3px; border:1px solid #4caf50; border-radius:50%; }
.compare {width:32px; }

.bloc_photo {width:33%; float:left; overflow: hidden; }
.bloc_shop { width:65%; float:right; }
.photo_art { width:33% }

/*.bloc_shop1 { min-height:230px; font-size:1em; }
.photo_art1 { width:319px; margin-right:2px; float:left; }
.bloc_shop3 { min-height:210px; width:48%; padding:1px; margin:1px; font-size:0.9em; float:left; }
.photo_art3 { float:left; width:220px; margin-right:2px; }*/

.bloc_shop2 { width:24%; height: calc(250px + 50px); padding:0.2%; margin:0.3%; font-size:0.9em; float:left; }
.bloc_shop2 h2 { margin:0; color: #00b14f; }
.bloc_photo2 { width:100%; height: calc(100% - 25%);  border-radius:5px; overflow:hidden; }
.photo_art2 { width:100%; height: auto;}

.bloc_button { padding:4px; margin:auto; background-color:#dfd; border-radius:10px; border: 1px dashed #00b14f; text-align:center; }
.bloc_button2 { clear:both; padding:0.5%; background-color:#dfd; border-radius:10px; border: 1px dashed #00b14f; text-align:center; display:block; width:90%; margin:auto; }

.line_art { margin:0; height:0px; border-top: 1px dashed #4caf50; content: '\002665'\; }
.rate_art { height:16px; width:80px; margin:3px; float:right; }

.pagination { margin:auto; text-align:center; clear:both; margin-top:50px; width: 100%;}
.pagination a { display: inline-block; padding: 4px 8px; text-decoration: none; transition: background-color .3s; margin:2px; }
.pagination a.active { background-color: #4caf50; color: white; }
.pagination a:hover:not(.active) { background-color: #ddd; }

#bloc_annonce { background-color:#3339; border:1px solid #333; width:98%; padding:2%; position:fixed; bottom:0; right:0; text-align:center; display:none; font-size:0.95em; }
/*#ann2 { background-color: #d3d3d2; width:fit-content; margin:auto; padding:0.5%; }*/
#b_ok a { float:right; background-color:#5d5e5e; color:#F78000; }
#b_ok a:hover { background-color:#F78000; color:#5d5e5e }

/* --- account administration --- */

#product ul, #quot ul { list-style-type: none; display:bloc; padding: 0;}
#avatar { float:right;width:120px; height:120px; border:1px solid #cfa0e9;border-radius:100%; overflow:hidden; text-align:center; display:table-cell; vertical-align:top; }

/* --- pied de page --- */
#footer { clear:both; width:98%; margin-top:20px; text-align:left; border-top:2px dashed #dfd; padding:1%; background-color:#00b14f; color:#fff }
#newsletter { width: 96%; border: 1px dashed #dfd; margin:1%; border-radius: 5px; padding:0.5%; text-align: center;}
#bloc_b1 { width:32%; text-align:center; float:left; margin:auto; font-size: 0.9em;}
#bloc_b1 ul { list-style-type: none; display:bloc; padding: 0; }
#bloc_b1 li { display: inline-block; padding:2px; margin:2px; background-color:#dfd; border-radius:10px; border: 1px dashed #00b14f; max-height: 30px; }
#bloc_b1 li:hover { border: 1px solid #dfd; }
#bloc_b2, #bloc_b3 { width:33%; text-align:left; vertical-align:top; float:left; background-color:#dfd; margin-left:1%; border-radius:10px; }
#bloc_b2 ul, #bloc_b3 ul { list-style-type:none; }

#mentions { margin:10%;}
#mentions img { vertical-align: middle; height:32px; }

#flexisite { clear:both; margin:auto; margin-top:50px; font-size:0.7em; font-family: 'Arial', sans-serif; text-align:center; float:right;}
#flexisite img { vertical-align: middle; }

/* --- pour les rollovers bas de page --- */
.rollover1 { background:url("../../themes/vietnam-tailor/imgs/round_facebook.svg") 0 0 no-repeat; }
/*.rollover10 { background:url("../../themes/vietnam-tailor/imgs/footer-gplus.png") 0 0 no-repeat; }*/
.rollover3 { background:url("../../themes/vietnam-tailor/imgs/round_twitter.svg") 0 0 no-repeat; }
.rollover4 { background:url("../../themes/vietnam-tailor/imgs/round_linkedin.svg") 0 0 no-repeat; }
.rollover5 { background:url("../../themes/vietnam-tailor/imgs/round_youtube.svg") 0 0 no-repeat; }
.rollover6 { background:url("../../themes/vietnam-tailor/imgs/round_pinterest.svg") 0 0 no-repeat; }
.rollover7 { background:url("../../themes/vietnam-tailor/imgs/round_instagram.svg") 0 0 no-repeat; }
.rollover8 { background:url("../../themes/vietnam-tailor/imgs/footer-skype.png") 0 0 no-repeat; }
.rollover9 { background:url("../../themes/vietnam-tailor/imgs/footer-yahoo.png") 0 0 no-repeat; }
.rollover2 { background:url("../../themes/vietnam-tailor/imgs/round_zalo.svg") 0 0 no-repeat; }

.rollover1, .rollover2, .rollover3, .rollover4, .rollover5, .rollover6, .rollover7, .rollover8, .rollover9, .rollover10 { display:inline-block; width:30px; height:30px; margin:0; padding:0; }

.rollover1:hover, .rollover2:hover, .rollover3:hover, .rollover4:hover, .rollover5:hover, .rollover6:hover, .rollover7:hover, .rollover8:hover, .rollover9:hover, .rollover10:hover {  -webkit-transform:scale(1.05); transform:scale(1.05); transform: rotateZ(-30deg); }

.rollover1 span, .rollover2 span, .rollover3 span, .rollover4 span, .rollover5 span, .rollover6 span, .rollover7 span , .rollover8 span, .rollover9 span, .rollover10 span { display:none }

/* --- formulaires --- */
fieldset { border-radius:10px; background-color:#dfd; margin:auto; width:90%; margin-top:12px; border:1px solid #4caf50; }
legend { font-weight: bold; color:#4caf50; }

form input[type=submit] { border-radius:10px; margin:auto; margin-top:15px; background-color:#dfd; }
form input[type=submit]:hover { inset; color:#f44336; border-color: #f44336; }

form label { display: inline; width: 15rem; }
form label[type=radio] { background-color:#f44336; }
form textarea { width: 90%; border-radius:10px; background-color:#FAFAFA;  border:2px solid #5d5e5e}
form SELECT { border-radius:10px; background-color:#FAFAFA; }
form input { width:90%; border-radius:10px; background-color:#FAFAFA; display:inline; }
form#newsletter input { width:auto; border-radius:10px; background-color:#FAFAFA; display:inline; }

form input[type=date] { width:35%; }
form input[type=radio] { width:auto; }
form input[type=checkbox] { width:auto; }
form input[type=checkbox]:hover { width:auto; border-color:#f44336;background-color: #f44336; }
form input[type=file] { width:auto; border-color:#f44336; border-radius:10px;background-color:#FAFAFA; }
form SELECT:focus, SELECT:hover { color:#000; border-color:#f44336; }
form textarea:focus, textarea:hover { color:#000; border-color:#f44336; }
form input:hover, input:hover { border-color:#f44336; }
form input[type=submit] { width:auto; margin:auto; margin-top:15px; }

.tab_col_1 { border:1px solid; width:15%;}

/** sharing bouton **/
#share-buttons { text-align:left; float:right; }
#share-buttons a { background-color:transparent; }
#share-buttons img { width: 32px; padding:0px; border:0; display:inline; margin: -2px;}
#share-buttons img:hover {-webkit-transform:scale(1.2); transform:scale(1.2);}

/** comment box **/
#com_art { min-width:300px; max-width:600px; padding:0;   }
#com_art fieldset { padding:5px; background-color:#fff; }
#com_art input[type=submit] { margin: 0 auto; }
#com_art input[type=text] { max-width:350px; }
#com_art input[type=email] { max-width:350px; }
#com_show { min-width:300px; max-width:800px; margin:10px; }
#com_line { margin-left:4px; color:#f44336; font-weight: bold;}
#com_text { border-bottom:1px dashed #4caf50; border-left:5px solid #4caf50 ; padding:2px; margin:2px; }

/** -------------------------------------------- **/
/** pour les petits �crans quelques adaptations **/
/** -------------------------------------------- **/


@media screen and (max-width: 650px) {
	#header { width:100%; margin:0px; }
	#titre { position:relative; letter-spacing:2px; clear:both; width:250px ;margin-bottom:3%; }
	#claim { font-size:0.8rem; margin:2px; letter-spacing:2px; display:none; }
	#menu ul {}
	
	/*#bloc_social { }*/
	.hidden, .no_mobile { display:none; }
	.display { display:inline; }
	.mobile { width:90%; clear:both; margin:auto; }

	h1 { font-size:1.3rem; }
	/*h2 { font-size:1.2rem; }*/
	h3 { font-size:1.1rem; }
	body { font-size:0.9em; }
	#content, #bloc_100, #bloc_A, #bloc_B, #bloc_AB { width:99%; margin:0.5%; padding:0 }
	#footer { width:98%; padding-top:3%; }
	#col_2 { display:none; }
	#col_1b { margin:0; width:98% }

	.bloc_shop,.photo_art { width:100% ;}
	.bloc_shop1, .bloc_shop2 { width:32%; height:calc(420px); }
	.bloc_photo2 { height:calc(100% - 25%); }

	/*.bloc_shop1 h2 { clear:both; }
	.bloc_shop3 { height:270px; width:48%; padding:0px; margin:3px; font-size:0.9em; overflow:hidden; }
	.bloc_shop3 h2 { margin:0; font-size:0.9em;}
	.photo_art1, .photo_art2, .photo_art3 { float:none; clear:both; margin:auto; width:100% }*/

	#bloc_b1 { width:100%; }
	#bloc_b2, #bloc_b3 { display:none; }
}

#adm_tailor { }
@media screen and (max-width: 1024px) {
	.bloc_shop2 { width:32%; height:240px; }
	.bloc_photo2 { height:auto; }
}
/** ------------------------------------------- **/
@media screen and (max-width: 400px) {
	h2 { font-size: 1em; }
	/*#titre { margin:1px; letter-spacing:2px; text-align:left }
	#claim { font-size:0.8em; display:none; }*/
	#bloc_lg img, #bloc_account img {width:24px;}
	/*#bloc_titre { font-size:2em; width:50%;position:relative; } #titre { margin-right:-2em ;}fieldset { width:60%} */
	form#form_mail input[type=date] { width: 40%; }
	.bloc_shop1, .bloc_shop2 { width:49%; height: calc(210px); }
	.bloc_photo2 { height: auto; }
}

@media screen and (min-width: 400px) {
	/*#claim { font-size:1.7em;   }
	#bloc_1, #bloc_2, #bloc_3, #bloc_4, #bloc_5, #bloc_6, #bloc_7 { margin: 4%;padding:2%; }
	.bloc_shop1, .bloc_shop2 { width:49%; margin:0; padding: 0; overflow: hidden;}
	.bloc_shop2 { width:49%; height: calc(100%); }
	.bloc_photo2 { height: calc(50%); }*/
}

@media print {
	body {
	  width: 100%;
	  margin: 0;
	  color: #000;
	  background-color: #fff;
	  text-shadow: none ;
	  font-size: 10pt;
	}
	#header, #footer, #bloc_annonce, #share-buttons { display:none; }
	.noprint { display:none; }
	#col_2 { display:none; }
	#col_1b { margin:0; width:98% }
	.photo_art {width: 39%;}
	
	#print-footer { display:block ;position: absolute; width:100%; bottom: 0cm; font-size:7pt; } 
}