/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');

body, html, a, ul, li, img{ padding:0px; margin:0px; border:0px; list-style-type:none; text-decoration:none;}
a, button, a img, a:hover, button:hover, a:hover > img{transition : all 0.2s linear;}
body{ font:14px/22px 'Roboto', sans-serif; font-weight:300;color:#565552;}
a{ text-decoration:none;color:#565552;}img{ border:0px;}
body, html{ min-height:100%; float: left; min-width: 100%; height: 100%; width: 100%; display: block; position: relative;}

	.row{width: 100%; display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex; display: flex !important;  -webkit-flex-direction: row;  -moz-flex-direction: row;  -ms-flex-direction: row;  flex-direction: row !important; float: none; display: inline-block; position: relative;}
 	.row .case1{ flex: 1;display: inline-block; position: relative; }.row .case2{ flex: 2;display: inline-block; position: relative; }.row .case3{ flex: 3; display: inline-block; position: relative;}.row .case4{ flex: 4; display: inline-block; position: relative;}.row .case5{ flex: 5; }.row .case6{ flex: 6; max-width: 50%;}.row .case7{ flex: 7; }.row .case8{ flex: 8; }.row .case9{ flex: 9; }.row .case10{ flex: 10; }.row .case11{ flex: 11; }.row .case12{ flex: 12; }
	
	.column{width: 100%; max-width: 100% !important; display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex; display: flex !important;  -webkit-flex-direction: row;  -moz-flex-direction: row;  -ms-flex-direction: row;  flex-direction:column ; float: none; min-height: 100%; height: 100%; }
	.column.column100{height: 100%;}
 	.column .case1{ flex: 1; flex-direction: column;}.column .case2{ flex: 2;flex-direction: column; }.column .case3{ flex: 3;flex-direction: column; }.column .case4{ flex: 4;flex-direction: column; }.column .case5{ flex: 5;flex-direction: column; }.column .case6{ flex: 6; flex-direction: column; max-width: 100% !important;  }.column .case7{ flex: 7; flex-direction: column;}.column .case8{ flex: 8; flex-direction: column;}.column .case9{ flex: 9;flex-direction: column; }.column .case10{ flex: 10;flex-direction: column; }.column .case11{ flex: 11; flex-direction: column;}.column .case12{ flex: 12; flex-direction: column;}
	
	.row > div, .column > div{position: relative;}	

.hauteur100{width: 100%; height: 100%;}

.padding10{ padding: 10px;}
.margin10{ margin: 10px;}
.row.margin10{width: calc(100% - 20px);}
.case6.padding10{width: auto; padding: 10px;}

.case_table{display:table !important;height:100%; width: 100%;}.case_table .vertical_align{display:table-cell;vertical-align:middle; text-align: center; width: 100%;}

.case_design{background: #FFFFFF; margin: 10px; width: calc(100% - 42px); /*height: calc(100% - 42px);*/ border-radius: 10px; border: 1px solid #dadada; padding: 10px; box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;}
.case_titre{ border-bottom: 1px solid #dadada; padding-bottom: 5px; margin-bottom: 10px;}

.txtcenter {text-align: center;}
.txtright {text-align: right;}

/* Titre */
h1.titre1{ font: 24px/34px 'Roboto', sans-serif; font-weight: 700; margin: 0px; padding: 0px; text-transform: uppercase;}
h2{color:#554944; margin: 0px; padding: 0px; text-transform: uppercase; font: 20px/30px 'Roboto', sans-serif; text-align: left;}

a.IconeAction{ position: relative;  display: inline-flex;  padding: 2px; width: 20px; height: 20px; text-align: left; background: none; border: none; margin: 2px;}
a.ImgCancel{background: #e05f69; border-radius: 12px;}
a.ImgCancel::before{content: ""; -webkit-mask: url('../img/icone-suppr.svg') no-repeat 50% 50%;  mask: url('../img/icone-suppr.svg') no-repeat 50% 50%; position: absolute; width: 20px; height: 20px; background: #ffffff; top: 2px; left: 2px; pointer-events: none;} 

a.img{border: 4px solid #FFFFFF; display: inline-block;}
a.img:hover{border: 4px solid #ffabbc;}

/* Formulaire */
form{ text-align: left;}
form label{letter-spacing: 1px; font: 14px/20px 'Roboto', sans-serif; font-weight: 100; width: 100%; margin: 10px; display: block; color:#575656; text-transform: uppercase;}
form input{ background: #f2f2f2; border: 1px solid #575656; display: block; height: 20px;width: calc(100% - 32px); padding: 0px 5px 0px 5px;}
form input[type=checkbox], form input[type=radio]{ display: inline-block; width: auto;}
form textarea{ background: #f2f2f2; border: 1px solid #575656; display: block; height: 60px;width: calc(100% - 32px); padding: 0px 5px 0px 5px;}
form select{ width: calc(100% - 19px); padding: 0px 5px 0px 5px;}
form button.btn1{  color:#ffabbc; background: #FFFFFF; width: calc(100% - 22px); margin: 10px; letter-spacing: 1px; font: 14px/20px 'Roboto', sans-serif; font-weight: 700;  border: 1px solid #ffabbc; text-align: center; text-transform: uppercase;}
form button.btn1:hover{ background: #ffabbc; color:#FFFFFF;   }

.btn1{display: inline-block; border-bottom: 2px solid #ffabbc; font: 14px/30px 'Roboto', sans-serif; letter-spacing: 1px; font-weight: 900; text-transform: uppercase; padding: 5px;}
.btn1:hover{background: #ffabbc; color:#FFFFFF;}

/*
* Design fenetre formulaire
*/
.fenetre{position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 999999; background: rgba(0,0,0,0.80); overflow: scroll; display: none;}
.fenetre .fenetre_enfant{background: #FFFFFF; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); position: absolute; width: 420px; height: auto;}

@media screen and (max-width: 500px) 
{
	.fenetre .fenetre_enfant{ width: 100%;}
}

.case3{padding: 10px;}
.case3 img{width: calc(100% - 20px); max-width: 100%; height: auto; max-height: 280px;}
@media screen and (max-width: 500px) 
{
	.case3 img{ padding: 2px;width: calc(100% - 4px);}
}