@charset "UTF-8";
/* Theme Name: Oh happy day
Theme URI: http://ohhappyday.lu */


/* ==========================================================================
   REMISE A ZERO DES STYLES DE BASE
   ========================================================================== */
   
html,button,input,select,textarea { color: #222; }
body {  }
::-moz-selection { background: #b3d4fc; text-shadow: none; }
::selection { background: #b3d4fc; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
img { vertical-align: middle;}
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
ul {margin: 0; padding: 0;}
a {outline: none;}


.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }


/* ==========================================================================
   GENERALITY
   ========================================================================== */
   
html, body {height: 100%;}

body {background-color: #fff; color: #989c9a; font-family: 'Myriad Pro', Helvetica, Arial, sans-serif; font-size: 13px; line-height: 17px; background-repeat: repeat-y; background-position: center top;
	background-image: url(../img/bg-body.gif);  
	background-image: -webkit-image-set(url(../img/bg-body.gif) 1x, url(../img/bg-body@2x.gif) 2x);  
	background-image: image-set("../img/bg-body.gif" 1x, "../img/bg-body@2x.gif" 2x);
}

/* Contenu principal */ 
.content {width: 983px; margin: 0 auto; padding: 0 15px; position: relative; background-color: #fff; border-right: 2px solid #adb1af; border-left: 2px solid #adb1af;}   


/* ==========================================================================
   HEADER
   ========================================================================== */
   
header a {color: #989c9a; text-decoration: none;}
header a:hover, header a:active {color: #6c6f6e;}

/* menu langues */
.lang ul {width: 100%; text-align: right; padding-top: 60px; font-size: 19px;}
.lang li {display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; text-transform:uppercase; font-size: 12px; padding: 0 2px;}
.lang li:last-child {margin-right: 15px;}
.lang .active a, .lang a:hover {color: #6c6f6e;}

/* logo */
.brand {display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; background-repeat: no-repeat; width: 314px; height: 412px; position: absolute; top: 60px; left: -24px;
	background-image: url(../img/logo.png);  
	background-image: -webkit-image-set(url(../img/logo.png) 1x, url(../img/logo@2x.png) 2x);  
	background-image: image-set("../img/logo.png" 1x, "../img/logo@2x.png" 2x);
}

/* menu principal */
.main-menu {width: 100%; border-top: 2px solid #b8decd; border-bottom: 2px solid #b8decd; text-transform: uppercase; font-size: 15px; margin-top: 339px;}
.main-menu ul {text-align: center; position: relative; z-index: 5;}
.main-menu li {display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; padding: 20px;}
.main-menu li.star-menu, 
.footer-menu li.star-menu {background-repeat: no-repeat; background-position: center;
	background-image: url(../img/star-menu.gif); width: 17px; height: 16px; 
	background-image: -webkit-image-set(url(../img/star-menu.gif) 1x, url(../img/star-menu@2x.gif) 2x);  
	background-image: image-set("../img/star-menu.gif" 1x, "../img/star-menu@2x.gif" 2x);
}
.main-menu a {color: #989c9a; background-color: #fff;}
.main-menu .active a, .main-menu a:hover {color: #b8decd;}


/* ==========================================================================
   CONTENT HOME
   ========================================================================== */
   
/* title */
.site-title {width: 100%; text-align: center; margin-top: 40px; margin-bottom: 50px;}
	background-image: url(../img/title.jpg);
	background-image: -webkit-image-set(url(../img/title.jpg) 1x, url(../img/titler@2x.jpg) 2x);  
	background-image: image-set("../img/title.jpg" 1x, "../img/title@2x.jpg" 2x);
}
.site-title {width: 100%; height: 160px;}
.site-title img {width: 100%; height: auto;}
.site-title:hover {background-image: url(../img/title-opacity.jpg);}

   
 
.main {text-align: center; margin: -10px 0 45px;}   
.main div {width: 31%; margin-right: 2%; min-height: 454px; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }
.main div:last-child {margin-right: 0;}
.main div a {display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; background-repeat: no-repeat; background-position: center top;width: 100%; min-height: 454px;}
.img-babyshower { 
	background-image: url(../img/img-babyshower.jpg); 
	background-image: -webkit-image-set(url(../img/img-babyshower.jpg) 1x, url(../img/img-babyshower@2x.jpg) 2x);  
	background-image: image-set("../img/img-babyshower.jpg" 1x, "../img/img-babyshower@2x.jpg" 2x);
}
.img-babyshower:hover {background-image: url(../img/img-babyshower-on.jpg);}

.img-firstbirthday {
	background-image: url(../img/img-firstbirthday.jpg); 
	background-image: -webkit-image-set(url(../img/img-firstbirthday.jpg) 1x, url(../img/img-firstbirthday@2x.jpg) 2x);  
	background-image: image-set("../img/img-firstbirthday.jpg" 1x, "../img/img-firstbirthday@2x.jpg" 2x);
}
.img-firstbirthday:hover {background-image: url(../img/img-firstbirthday-on.jpg);}

.img-birthday {
	background-image: url(../img/img-birthday.jpg); 
	background-image: -webkit-image-set(url(../img/img-birthday.jpg) 1x, url(../img/img-birthday@2x.jpg) 2x);  
	background-image: image-set("../img/img-birthday.jpg" 1x, "../img/img-birthday@2x.jpg" 2x);
}
.img-birthday:hover {background-image: url(../img/img-birthday-on.jpg);}


/* ==========================================================================
   CONTENT ACCUEIL
   ========================================================================== */

/* texte */ 

.title_accueil {text-align: center; margin-left: 25px; margin-top: 20px;}
.text_accueil {text-align: center; margin: 50px;font-size: 16px; line-height: 25px; background-color: #e6f3ed; border: 15px #e6f3ed solid; border-radius: 12px;}
.banniere_babyshower {margin-left: -35px;}
.banniere_firstbirthday {margin-left: -35px;}
.banniere_birthday {margin-left: -35px;}

h1, h2, h3, h4 {font-weight: normal;}



/* ==========================================================================
   CONTENT FORMULES
   ========================================================================== */

/* texte */   

.text {text-align: center; margin: 50px;font-size: 16px; line-height: 25px;}

.main {text-align: center; margin: -10px 0 45px;}   
.main div {width: 31%; margin-right: 2%; min-height: 454px; display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; }
.main div:last-child {margin-right: 0;}
.main div a {display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; background-repeat: no-repeat; background-position: center top;width: 100%; min-height: 454px;}
.img-babyshower-on { 
	background-image: url(../img/img-babyshower-on.jpg); 
	background-image: -webkit-image-set(url(../img/img-babyshower-on.jpg) 1x, url(../img/img-babyshower-on@2x.jpg) 2x);  
	background-image: image-set("../img/img-babyshower-on.jpg" 1x, "../img/img-babyshower-on@2x.jpg" 2x);
}
.img-babyshower-on:hover {background-image: url(../img/img-babyshower-form.jpg);}

.img-firstbirthday-on {
	background-image: url(../img/img-firstbirthday-on.jpg); 
	background-image: -webkit-image-set(url(../img/img-firstbirthday-on.jpg) 1x, url(../img/img-firstbirthday-on@2x.jpg) 2x);  
	background-image: image-set("../img/img-firstbirthday-on.jpg" 1x, "../img/img-firstbirthday-on@2x.jpg" 2x);
}
.img-firstbirthday-on:hover {background-image: url(../img/img-firstbirthday-form.jpg);}

.img-birthday-on {
	background-image: url(../img/img-birthday-on.jpg); 
	background-image: -webkit-image-set(url(../img/img-birthday-on.jpg) 1x, url(../img/img-birthday-on@2x.jpg) 2x);  
	background-image: image-set("../img/img-birthday-on.jpg" 1x, "../img/img-birthday-on@2x.jpg" 2x);
}
.img-birthday-on:hover {background-image: url(../img/img-birthday-form.jpg);}

.delai {text-align: center; margin: 50px;font-size: 16px; line-height: 25px;}

.prix {font-size: 12px;}

/* ==========================================================================
   CONTENT FORMULES BABYSHOWER
   ========================================================================== */
   
/* texte */   

.text-babyshower {text-align: center; margin: 50px; font-size: 16px; line-height: 25px;}
.form-babyshower-essential {text-align: center; margin: 30px; font-size: 16px; line-height: 25px; background-color: #e6f3ed; border: 15px #e6f3ed solid; border-radius: 12px;}
.form-babyshower-star {text-align: center; margin: 30px; font-size: 16px; line-height: 25px; background-color: #fad4ba; border: 15px #fad4ba solid; border-radius: 12px;}
.form-babyshower-gold {text-align: center; margin: 30px; font-size: 16px; line-height: 25px; background-color: #fbef99; border: 15px #fbef99 solid; border-radius: 12px;}

/* image */
   
.babyshower div {margin-top: 20px; margin-left: 37%; display: inline-block;}

/* ==========================================================================
   CONTENT FORMULES FIRST BIRTHDAY
   ========================================================================== */
   
/* texte */   

.text-firstbirthday {text-align: center; margin: 50px; font-size: 16px; line-height: 25px;}
.form-firstbirthday-essential {text-align: center; margin: 30px; font-size: 16px; line-height: 25px; background-color: #e6f3ed; border: 15px #e6f3ed solid; border-radius: 12px;}
.form-firstbirthday-star {text-align: center; margin: 30px; font-size: 16px; line-height: 25px; background-color: #fad4ba; border: 15px #fad4ba solid; border-radius: 12px;}
.form-firstbirthday-gold {text-align: center; margin: 30px; font-size: 16px; line-height: 25px; background-color: #fbef99; border: 15px #fbef99 solid; border-radius: 12px;}
.form-firstbirthday h3 {text-align: center; margin-left: 350px; margin-right: 350px; background-color: #fff; border: 8px #fff solid; border-radius: 12px;}

/* image */
   
.firstbirthday div {margin-top: 20px; margin-left: 37%; display: inline-block;}

/* ==========================================================================
   CONTENT FORMULES BIRTHDAY
   ========================================================================== */
   
/* texte */   

.text-birthday {text-align: center; margin: 50px; font-size: 16px; line-height: 25px;}
.form-birthday-essential {text-align: center; margin: 30px; font-size: 16px; line-height: 25px; background-color: #e6f3ed; border: 15px #e6f3ed solid; border-radius: 12px;}
.form-birthday-star {text-align: center; margin: 30px; font-size: 16px; line-height: 25px; background-color: #fad4ba; border: 15px #fad4ba solid; border-radius: 12px;}
.form-birthday-gold {text-align: center; margin: 30px; font-size: 16px; line-height: 25px; background-color: #fbef99; border: 15px #fbef99 solid; border-radius: 12px;}
.options {text-align: center; margin: 0px; font-size: 16px; line-height: 25px; background-color: #e6f3ed; border: 15px #e6f3ed solid; border-radius: 12px;}
.options li {text-decoration: underline;}
.form-birthday h3 {text-align: center; margin-left: 350px; margin-right: 350px; background-color: #fff; border: 8px #fff solid; border-radius: 12px;}


/* image */
   
.birthday div {margin-top: 20px; margin-left: 37%; display: inline-block;}

/* ==========================================================================
   CONTENT GALERIE PHOTOS
   ========================================================================== */
.galerie {margin-top: 20px; margin-bottom: 30px; margin-left: 138px; display: inline-block; background-color: #FFFFFF;}

#galerie_photos {position: relative; float: left; padding: 20px;}   
   
.im1 {width: 180px; height: 180px; border: 8px #fff solid; border-radius: 12px; box-shadow: 1px 1px 10px #b8decd;}
.im2 {width: 180px; height: 180px; border: 8px #fff solid; border-radius: 12px; box-shadow: 1px 1px 10px #b8decd;}
.im3 {width: 180px; height: 180px; border: 8px #fff solid; border-radius: 12px; box-shadow: 1px 1px 10px #b8decd;}
.im4 {width: 180px; height: 180px; border: 8px #fff solid; border-radius: 12px; box-shadow: 1px 1px 10px #b8decd;}
.im5 {width: 180px; height: 180px; border: 8px #fff solid; border-radius: 12px; box-shadow: 1px 1px 10px #b8decd;}
.im6 {width: 180px; height: 180px; border: 8px #fff solid; border-radius: 12px; box-shadow: 1px 1px 10px #b8decd;}
.im7 {width: 180px; height: 180px; border: 8px #fff solid; border-radius: 12px; box-shadow: 1px 1px 10px #b8decd;}
.im8 {width: 180px; height: 180px; border: 8px #fff solid; border-radius: 12px; box-shadow: 1px 1px 10px #b8decd;}
.im9 {width: 180px; height: 180px; border: 8px #fff solid; border-radius: 12px; box-shadow: 1px 1px 10px #b8decd;}

/* ==========================================================================
   CONTENT CONTACT
   ========================================================================== */
   
/* texte */   

.text-contact {text-align: center; margin: 50px;font-size: 16px; line-height: 25px;}   

/* image */
   
.contact div {margin-top: 20px; margin-left: 36%; display: inline-block;}

/* formulaire */

.formulaire {margin-top: 10px; margin-bottom: 30px; margin-left: 18%; display: inline-block; background-color: #dcdedd; border: 15px #dcdedd solid; border-radius: 12px;}

.input_form {color: #989c9a; font-family: 'Myriad Pro', Helvetica, Arial, sans-serif; font-size: 13px;}

/* ==========================================================================
   FOOTER
   ========================================================================== */

/* bas de page formules */ 
   
.autres-formules {text-align: center; margin-top: 10px; margin-left: 800px; margin-right:30px; margin-bottom: 20px; font-size: 13px; text-transform: uppercase; color: #989c9a; background-color: #dcdedd; border: 6px #dcdedd solid; border-radius: 6px;} 
a:link {color: #989c9a; text-decoration: none;}
a:visited {color: #989c9a; text-decoration: none;}
a:hover {color: #ffffff; text-decoration: none;}

/* footer */   
   
footer {width: 100%; border-top: 2px solid #b8decd; border-bottom: 2px solid #b8decd; padding: 30px 0;}  

/* menu footer */
.footer-menu {float: left;}
.footer-menu li {display: inline-block; *display: inline; *zoom: 1; vertical-align: middle; padding: 13px 52px 0;}
.footer-menu a {color: #989c9a; text-decoration: none;}
.footer-menu a:hover, .footer-menu a:active, .footer-menu .active a {color: #6c6f6e;}

/* menu reseaux sociaux */
.social {float: right; margin-right: 67px;}
.social li {display: inline-block; *display: inline; *zoom: 1; vertical-align: bottom;}
.fb, .instagram, .pinterest {display: inline-block; *display: inline; *zoom: 1; vertical-align: bottom; width: 42px; height: 42px; background-repeat: no-repeat;}
.fb {
	background-image: url(../img/ico-fb.png); 
	background-image: -webkit-image-set(url(../img/ico-fb.png) 1x, url(../img/ico-fb@2x.png) 2x);  
	background-image: image-set("../img/ico-fb.png" 1x, "../img/ico-fb@2x.png" 2x);
	 
}
.instagram {margin-left: 27px;
	background-image: url(../img/ico-instagram.png); 
	background-image: -webkit-image-set(url(../img/ico-instagram.png) 1x, url(../img/ico-instagram@2x.png) 2x);  
	background-image: image-set("../img/ico-instagram.png" 1x, "../img/ico-instagram@2x.png" 2x);
	
}
.pinterest {margin-left: 27px;
	background-image: url(../img/ico-pinterest.png); 
	background-image: -webkit-image-set(url(../img/ico-pinterest.png) 1x, url(../img/ico-pinterest@2x.png) 2x);  
	background-image: image-set("../img/ico-pinterest.png" 1x, "../img/ico-pinterest@2x.png" 2x);
	
}
.social a:hover {opacity: .8;
	-webkit-transition: all .2s ease-out; 
			transition: all .2s ease-out;
}

/* ==========================================================================
   MEDIA QUERIES 
   ========================================================================== */


/* ==========================================================================
   Large Devices, Wide Screens
   ========================================================================== */

@media only screen and (max-width : 1200px) {

}


/* ==========================================================================
   Medium Devices, Desktops
   ========================================================================== */
   
@media only screen and (max-width : 979px) {

}


/* ==========================================================================
   Small Devices, Tablets
   ========================================================================== */
   
@media only screen and (max-width : 767px) {

}


/* ==========================================================================
  Extra Small Devices, Phones
   ========================================================================== */
@media only screen and (max-width : 480px) {

}


/* ==========================================================================
   Custom, iPhone Retina
   ========================================================================== */
   
@media only screen and (max-width : 320px) {

}