/* Global Resetting */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin: 0; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; }

fieldset, img { border: 0; }

address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: normal; }

ol, ul { list-style: none; }

caption, th { text-align: left; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }

q:before, q:after { content: ''; }

abbr, acronym { border: 0; }

/* Layout CSS */
.conteneur1 { text-align: center; background-color: #e9f1f3;}
.conteneur1 .centre2 { margin-left: auto; margin-right: auto; width: 1024px; text-align: left;  overflow: hidden; }

.header { background: url(../images/blossommassage-sprites.jpg) no-repeat 0 0; height: 192px; }
.header h1 { margin: 0; font-family: 'Buda', sans-serif; padding: 23px 0 0 38px; color: white; font-size: 44px; line-height: 1; text-shadow: #6374AB 2px 2px 1px; zoom: 1; filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#6374AB); letter-spacing: 3px; }
.header h3 { margin: 0px; font-family: Arial, sans-serif; padding-left: 38px; color: white; font-size: 17px; letter-spacing: 6.85px; margin-bottom: -36px; text-transform: lowercase; text-shadow: #333 1px 1px 0px; }
.header ul.nav { height: 28px; width: 937px; background: url(../images/blossommassage-sprites.jpg) no-repeat 0px -285px; position: relative; top: 69px; left: 40px; }
.header ul.nav li { height: 28px; float: left; }
.header ul.nav li a { font-family: 'Reenie Beanie', cursive; font-size: 24px; color: #222; }
.header ul.nav li .clickable-home { display: block; width: 40px; height: 28px; text-indent: -999em; }
.header ul.nav li.section { padding-right: 13px; padding-left: 13px; background: url(../images/blossommassage-sprites.jpg) no-repeat right -313px; }

.main .middle, .footer .middle {
    display: flex;
    position: relative;
    left: 3px;
    background-color: #f3f8fb;
    border-left: #a88b8f solid 1px;
    border-right: #a88b8f solid 1px;
    width: 936px;
    overflow: hidden;
}

.main { position: relative; left: 38px; top: -45px; }
.main .top { width: 942px; height: 42px; background: url(../images/blossommassage-sprites.jpg) no-repeat 0px -210px; }
.main .middle div.article {
    display: flex;
    flex: 1 1 100%;
    margin: 0 15px 0 25px;
    width: 457px;
    float: left;
    gap: 12px;
    flex-direction: row;
}
.main .middle div.article .content {
    display: flex;
    flex-direction: column;
}
.main .middle div.article h2.title { font-family: 'Reenie Beanie', cursive; line-height: 1; padding-bottom: 12px; font-size: 40px; }
.main .middle div.article .more-info { background-color: #dde8ee; -moz-border-radius: 3px; border-radius: 3px; margin-bottom: 1em; padding: 8px 12px; }
.main .middle div.article #ShareThis { float: right; margin-bottom: 12px; /*.fb_edge_widget_with_comment{
	top: -192px !important;
	left: -148px !important;
}*/ }
.main .middle div.article #ShareThis .st_fblike_hcount { width: 32px; }
.main .middle .gallery { width: 182px; float: left; }
.main .middle .gallery img { margin-bottom: 4px; }
.main .middle .ancilary { width: 232px; float: left; margin: 0 25px 0 0; }
.main .bottom { width: 100%; height: 5px; background: url(../images/blossommassage-sprites.jpg) no-repeat 0px -205px; position: relative; left: 3px; }

p.tabbed-title { width: 232px; height: 18px; background: url(../images/blossommassage-sprites.jpg) no-repeat -86px -255px; float: left; margin-bottom: 5px; }
p.tabbed-title .title { height: 18px; background: url(../images/blossommassage-sprites.jpg) no-repeat -330px -255px; padding-right: 4px; float: left; color: #682b2b; font-size: 14px; text-transform: lowercase; font-family: Arial; }
p.tabbed-title .tab { height: 18px; width: 5px; background: url(../images/blossommassage-sprites.jpg) no-repeat -580px -255px; float: left; }

.contact form { float: left; width: 232px; }

.footer { position: relative; left: 41px; top: -34px; font-size: 13px; }
.footer .top { width: 100%; height: 3px; background: url(../images/blossommassage-sprites.jpg) no-repeat 0px -200px; }
.footer .middle { left: 0px; text-align: center; }
.footer .middle ul { margin: 0 auto; }
.footer .middle ul li { display: inline; }
.footer .middle ul li.sep:after { content: "\A0\A0\A0\A0|\A0\A0\A0\A0"; }
.footer .bottom { width: 100%; height: 3px; background: url(../images/blossommassage-sprites.jpg) no-repeat 0px -205px; }

.testimonials, .contact { margin-bottom: 10px; float: left; }

.testimonial .testimonee { font-weight: bold; float: right; margin-bottom: 15px; }
.testimonial blockquote { float: left; margin-bottom: 5px; width: 232px; }
.testimonial blockquote p { font-size: 11px; }
.testimonial blockquote:before { line-height: 1; float: left; }
.testimonial blockquote:after { line-height: 1; }

.HomePage .main .middle-wide { left: -20px; position: relative; width: 984px; height: 362px; border-radius: 3px; }
.HomePage .main .middle-wide li { width: 984px; height: 362px; }
.HomePage .main .middle-wide h2 { font-family: 'Buda', sans-serif; padding: 63px 0 0 38px; color: white; font-size: 64px; text-transform: capitalize; line-height: 1; text-shadow: #6374AB 2px 2px 1px; zoom: 1; filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#6374AB); }
.HomePage .main .middle-wide h4 { font-family: 'Reenie Beanie', cursive; color: white; float: right; padding-right: 70px; font-size: 54px; text-shadow: #6374AB 2px 2px 1px; zoom: 1; filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#6374AB); }
.HomePage .main .hero-item-panels { margin-bottom: 10px; float: left; width: 100%; }
.HomePage .main .hero-item-panels li { float: left; }
.HomePage .main .hero-item-panels li .hero-item-panel { background-color: #8a9fa9; border-radius: 3px; -moz-border-radius: 3px; margin: 25px 0px 0px 10px; }
.HomePage .main .hero-item-panels li .hero-item-panel .wrapper { padding: 20px; }
.HomePage .main .hero-item-panels li .hero-item-panel a:hover { text-decoration: none; }
.HomePage .main .hero-item-panels li .hero-item-panel h3 a { font-family: 'Buda', sans-serif; color: white; font-size: 24px; }
.HomePage .main .hero-item-panels li .hero-item-panel h4 a { font-family: 'Reenie Beanie', cursive; color: white; font-size: 24px; }
.HomePage .main .hero-item-panels li .hero-item-panel p a { font-family: 'Arial', 'sans-serif'; color: white; }
.HomePage .main .hero-item-panels li.first .hero-item-panel { margin-left: 10px; }
.HomePage .main .hero-item-panels li.last .hero-item-panel { margin-right: 10px; }
.HomePage .main .hero-item-panels.count-2 li { width: 49.9%; }
.HomePage .main .hero-item-panels.count-3 li { width: 33.3%; }
.HomePage .main .hero-item-panels.count-4 li { width: 24.9%; }
.HomePage .main .hero-item-panels.count-5 li { width: 19.9%; }

#calendar { float: left; margin: 20px; }

.ui-widget-header { background-image: none !important; background-color: #dce7ed !important; }

#Form_BookOnlineForm { width: 335px; }
#Form_BookOnlineForm label { width: 105px; }
#Form_BookOnlineForm input { width: 227px; }
#Form_BookOnlineForm .Actions input { margin-left: 280px; }

#Form_BookOnlineForm .Actions input, #Form_ContactForm .Actions input { width: 55px; }

#Form_ContactForm .Actions input { margin-left: 177px; }

div.newsletter form .Actions input { margin-left: 157px; width: 75px; }


.nav-open-button {
	display: none;
}
#media-query-trigger {
	visibility: hidden;
}
.mobile-only {
    display: none;
    visibility: hidden;
}

.book-now {
    text-align: right;
}

/* when changing the breakpoint below, change it ito the same value in the script.js file as well */
@media only screen and (max-width: 1024px) {
    body {
        max-width: 1024px;
    }
    #media-query-trigger {
        visibility: visible;
    }

    .header h1 {
        font-size: 38px;
    }

    .mobile-only {
        display: inherit;
        visibility: visible;
    }
    .desktop-only {
        display: none;
        visibility: hidden;
    }
	.conteneur1 .centre2 {
		max-width: 1024px;
		width: auto;
	}

    .book-now {
        z-index: 100;
        position: absolute;
        right: 20px;
        top: 115px;
    }

	.nav-open-button {
        z-index: 100;
        width: 20px;
        height: 20px;
        position: absolute;
        right: 20px;
        top: 35px;
        display: block;
        cursor: pointer;
        margin-top: 0;
        padding: 0;
        background: none;
		border: none;
		color: white;
    }

	.header .primary {
		background: white;
		position: absolute;
		top: 66px;
		right: 62px;
		display: block;
		height: fit-content;
		width: 226px;
	}
	
	.header ul.nav {
		position: absolute;
		top: -5px;
		right: 0px;
		height: auto;
		z-index: 1;
		width: 216px;
		background: white;
		border-radius: 5px;
		padding: 5px;
	}
	.header ul.nav li.section {
		height: 28px;
		display: block;
		float: none;
		background: none;
	}

    .main {
        left: 0;
        padding: 0 10px;
    }

    .main .top, .main .bottom, .footer .top, .footer .bottom {
        background: none;
        width: 100%;
    }

    .main .middle, .footer .middle { 
        width: 100%;
        left: 0;
        border: #a88b8f solid 1px;
        border-radius: 5px;
    }

    .main .middle div.article {
        width:auto;
        padding-top: 20px;
        flex-direction: column;
    }

    .widgets {
        display: flex;
        flex-direction: row;
        gap: 12px;
    }

    .widgets .gallery, .widgets .ancilary, .main .middle .ancilary , .testimonial blockquote, p.tabbed-title {
        width: auto !important;
    }

    .HomePage .main .hero-item-panels li {
        width: 100% !important;
    }

    .HomePage .main .hero-item-panels li .hero-item-panel {
        margin: 10px;
    }

    .footer {
        left: 0;
        margin: 0 10px;
    }

    .footer .middle ul li {
        display: block;
    }

    .footer .middle ul li.sep:after {
        display: none;
    }
}