/* //////////////////////////////////////////////// */
/* .mydiv */
/* //////////////////////////////////////////////// */
@font-face {
    font-family: 'brandon_grotesquemedium';
    src: 	url("//db.onlinewebfonts.com/t/3ce7ed5e528eca5c8baeff28f6a29369.eot");
	src: 	url("//db.onlinewebfonts.com/t/3ce7ed5e528eca5c8baeff28f6a29369.eot?#iefix") format("embedded-opentype"),
			url("//db.onlinewebfonts.com/t/3ce7ed5e528eca5c8baeff28f6a29369.woff2") format("woff2"),
			url("//db.onlinewebfonts.com/t/3ce7ed5e528eca5c8baeff28f6a29369.woff") format("woff"),
			url("//db.onlinewebfonts.com/t/3ce7ed5e528eca5c8baeff28f6a29369.ttf") format("truetype"),
			url("//db.onlinewebfonts.com/t/3ce7ed5e528eca5c8baeff28f6a29369.svg#Brandon Grotesque Medium") format("svg");
    font-weight: normal;
    font-style: normal;
}


*{
	box-sizing:border-box;
}

.mydiv {
    background-color: #FFF;
    color: white;
}

.hometb{
	border-collapse: separate;
	border-spacing: 10px;
	margin:0 auto;
}

.hometb td{
	width: 250px;
	height:250px;
	font-size:28px;
	line-height:28px;
	padding:20px;
	position: relative;
}

.hometb td span{
	display:block;
	font-size:45px;
	line-height:45px;
	margin-bottom:0px;
}

.hometb td.tdh1{background-color:#007eef;}
.hometb td.tdh2{background-color:#006cce;}
.hometb td.tdh3{background-color:#0154a0;}
.hometb td.tdh4{background-color:#aeaeae;}

.hometb td a{
	display:block;
	color:white;
}
.hometb td a:hover{
	text-decoration:none;
	color:#333;
}
.hometb td:hover{
	background-color:#c9c9c9;
}




	
	h2 {
		font-family: 'brandon_grotesquemedium';
		font-size: 25px;
		text-transform: uppercase;
		color: #003e7a;
		text-align: center;
		margin: 40px 0 0 2px;
		/* margin-top: 40px; */
		font-weight: bold;
	}
	.accroche{
		 color:#b1b1b1; 
		 text-align:center; 
		 font-size:16px;
	}
	
	.type_cartes{
		width:255px;
		height:160px; 
		/* float:left; */
		display: inline-block;
		text-align:center;
		position:relative;
		padding:10px;
		margin:auto;
	}
	 
	.type_cartes .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000;
		top: 0;
    left: 0;
    opacity: 0;
		transition: opacity .5s ease-in-out;
		border-radius:10px;
	}
	.type_cartes .overlay:hover{
		opacity: 1;
	}
	.type_cartes .overlay p{
		padding:15px;
		font-size: 18px ;
		color: #ffffff ;
		text-align: center ;
	}
	
	.anniversaire{background: #f29400;}
	.cadeau{background: #005680;}
	.superheros{background: #fab500;}
	.coeur{background: #e8a1bf;}
	.fdm{background: #E276A5;}
	.fdp{background: #79AAF0;}
	.merciM{background: #2B2B2B;}
	.atelier{background: #CA713E;}
	.academie{background: #75A3FF;}
	.retraite{background: #5DA55D;}
	.naissance{background: #AAB3B7;}
	.rdc{background: #4d7a90;}
	.jungle{background: #046d31;}
	.chaussette{ background: #C61A2C;} 
	.bonnefete{ background: #A48E4F;} 
	.ours{ background: #009274;} 

	.btn_offre{
		border-radius:5px; 
		background:#f36f21; 
		font-size:25px; 
		color:#FFF; 
		text-align:center; 
		padding:10px 30px;
		text-decoration:none;
	}
	.btn_offre:hover{ 
		background:#ffffff;
		border:solid 1px #f36f21;
		color:#f36f21; 
		text-decoration:none;
	}
	
	#zone_video, #zone_contact{ 
		background:#e8f8ff; 
		padding:20px 0;
		margin:30px 0;
		text-align:center;
	}
	
	#zone_reassurance{
		width:900px;
		margin:10px auto;
	}
	.reassurance{
		width:20%; 
		float:left; 
		text-align:center;
	}
		
	.reassurance p{
		color:#afafaf;
		text-transform:uppercase;
		font-size:14px;
		line-height:normal;
	}
	
	#zone_pro_solde{
		 width:780px; 
		 margin:10px auto 30px auto;
	}
	#espace_pro{
		background: url(../img/home/espace_pro.png) no-repeat right #003e7a;
		width:47%;
		float:left;
		padding:10px 20px;
		text-align:center;
		margin:10px 5px;
	}
	#espace_pro .btn{
		border-radius:5px; 
		background:#ffffff; 
		font-size:18px; 
		color:#003e7a; 
		text-align:center; 
		padding:10px;
		text-decoration:none;
		margin-bottom:20px;
	}
	#espace_pro .btn:hover{
		background:#f36f21;
		color:#ffffff;
	}
	
	#espace_pro h3, #solde_carte h3{
		font-family:'brandon_grotesquemedium';
		font-size:25px;
		text-transform:uppercase;
		font-weight:bold;
		margin:10px;
	}
	
	#solde_carte{
		background: url(../img/home/solde_carte.png) no-repeat right #7ab9d5;
		width:47%;
		float:left;
		padding:10px 20px;
		text-align:center;
		margin:10px 5px;
	}
	#solde_carte .btn{
		border-radius:5px; 
		background:#ffffff; 
		font-size:18px; 
		color:#7ab9d5; 
		text-align:center; 
		padding:10px;
		text-decoration:none;
		margin-bottom:20px;
	}
	#solde_carte .btn:hover{
		background:#f36f21;
		color:#ffffff;
	}
	
	#zone_edito{margin-bottom:40px;}
	#zone_edito p{
		text-align:center; 
		color:#003e7a; 
		font-size:16px;
	}
        
        .btn_decouvre{
		border-radius:5px; 
		background:#173f75; 
		font-size:25px; 
		color:#FFF; 
		text-align:center; 
		padding:10px 30px;
		text-decoration:none;
	}
        
        .btn_decouvre:hover{ 
		background:#ffffff;
		border:solid 1px #173f75;
		color:#173f75; 
		text-decoration:none;
	}




@media (max-width: 1199px) {

	.hometb td{
	width: 210px;
	height:210px;
	font-size:18px;
	line-height:18px;
	}
	.hometb td span{
	font-size:36px;
	line-height:36px;
	}
	
	.type_cartes{
		width:225px;
		margin:10px 5px;
		padding:0;
	}
	.type_cartes .overlay p{font-size:16px;}

}
	
	

@media (max-width: 992px) {
	
	.hometb td{
	width: 180px;
	height:180px;
	font-size:16px;
	line-height:16px;
	}
	.hometb td span{
	font-size:26px;
	line-height:26px;
	}
	#zone_reassurance{width:100%;}

}



@media (max-width: 767px) {

	.hometb td{
	display: block;
	vertical-align:middle;
	width: 100%;
	min-height:300px;
	font-size:20px;
	line-height:20px;
	text-align:center;
	margin-bottom:10px;
	}
	.hometb td a{
	width:100%;
	height:100%;
	margin-top:30%;
	}
	
	.hometb td span{
	font-size:36px;
	line-height:36px;
	}
	
	#zone_reassurance{width:100%;}
	#zone_pro_solde{width:100%}
	#espace_pro .btn, #solde_carte .btn{font-size:14px;}

}

@media (max-width: 430px) {

	.hometb td{
	width: 235px;
	min-height:235px;
	}
	.hometb .tdh3 a{margin-top:20%;}
	
	#zone_reassurance{width:inherit;}
	.reassurance{width:inherit;float:none;}
	#zone_pro_solde{width:100%}
	#espace_pro,#solde_carte{width:100%; float:none; margin:10px auto}
	

}