@charset "UTF-8";
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/*
// ----------------------------------------------
// Usage example:
// For IE set $mq-support to false.
// Set the fixed value.
// Then use mixins to test whether styles should be applied.
// ----------------------------------------------

$mq-support: false;
$mq-fixed-value: 1024;

// Renders at fixed value
@include bp (min-width, 300px) { 
    div { color:#000; }
}

// Doesn't render without MQ support
@include bp (min-width, 1200px) { 
    div { color:#FFF; }
}

// Doesn't render without MQ support
@include bp (max-width, 300px) { 
    div { color:#444; }
}

// Renders at fixed value
@include bp (max-width, 1200px) { 
    div { color:#888; }
}

// ----------------------------------------------
*/
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/*! normalize.css v2.0.1 | MIT License | git.io/normalize */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/*
 * Corrects `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

/*
 * Corrects `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video {
  display: inline-block;
}

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/*
 * Addresses styling for `hidden` attribute not present in IE 8/9.
 */
[hidden] {
  display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */
/*
 * 1. Sets default font family to sans-serif.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
}

/*
 * Removes default margin.
 */
body {
  margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */
/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */
/*
 * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
 * Safari 5, and Chrome.
 */
h1 {
  font-size: 2em;
}

/*
 * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/*
 * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/*
 * Addresses styling not present in Safari 5 and Chrome.
 */
dfn {
  font-style: italic;
}

/*
 * Addresses styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/*
 * Corrects font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/*
 * Sets consistent quote types.
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

/*
 * Addresses inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */
/*
 * Removes border when inside `a` element in IE 8/9.
 */
img {
  border: 0;
}

/*
 * Corrects overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */
/*
 * Addresses margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */
/*
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}

/*
 * 1. Corrects font family not being inherited in all browsers.
 * 2. Corrects font size not being inherited in all browsers.
 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
 */
button,
input,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */
}

/*
 * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}

/*
 * Re-set default cursor for disabled elements.
 */
button[disabled],
input[disabled] {
  cursor: default;
}

/*
 * 1. Addresses box sizing set to `content-box` in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
 * Removes inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE 8/9.
 * 2. Improves readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */
/*
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* ============================================ *
 * Reset
 * ============================================ */
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-tap-highlight-color: transparent;
  /* Prevent tap highlight on iOS/Android */
  -webkit-text-size-adjust: 100%;
  /* Prevent automatic scaling on iOS */
}

body {
  background: #FFFFFF;
  color: #000000;
  line-height: 1;
}

html,
body,
img,
fieldset,
abbr,
acronym {
  border: 0;
}

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

th,
code,
cite,
caption {
  font-weight: normal;
  font-style: normal;
  text-align: left;
}

address {
  font-style: normal;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

img {
  display: block;
}

ol,
ul {
  list-style: none;
}

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

input:focus,
input[type="search"]:focus {
  outline-offset: -2px;
}

input[type="search"] {
  -webkit-appearance: none;
  /* 1 */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  /* 2 */
  box-sizing: border-box;
}

/* Common

Common

Styleguide 0
*/
/* ============================================ *
 * Base Styles
 * ============================================ */
@-ms-viewport {
  width: device-width;
}
@-o-viewport {
  width: device-width;
}
@viewport {
  width: device-width;
}
a, button {
  -ms-touch-action: manipulation;
  touch-action: manipulation;
}

body,
button,
input,
select,
table,
textarea {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  color: #373737;
  font-size: 13px;
  line-height: 1.5;
}

a {
  color: #f46c00;
  text-decoration: none;
}

a:hover {
  color: #db6100;
  text-decoration: none;
}

a:focus {
  outline-color: #e76600;
  color: #5b2800;
}

ol,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ============================================ *
 * Typography
 * ============================================ */
/* Common Typography

Markup: <p class="{$modifiers}">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam in semper orci, vitae porttitor lectus.</p>

.h1 - h1 or class
.h2 - h2 or class
.h3 - h3 or class
.h4 - h4 or class
.h5 - h5 or class
.h6 - h6 or class
.availability.in-stock - In stock
.availability.out-of-stock - Out of stock
.success - Success
.error - Error
.notice - Notice

Styleguide 0.1
*/
h1, .h1 {
  margin: 0;
  margin-bottom: 0.7em;
  color: #d2421f;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 28px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  text-rendering: optimizeLegibility;
  text-transform: uppercase;
}

h2, .h2 {
  margin: 0;
  margin-bottom: 0.5em;
  color: #d2421f;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  text-rendering: optimizeLegibility;
  text-transform: uppercase;
}

h3, .h3 {
  margin: 0;
  margin-bottom: 10px;
  color: #d2421f;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  text-transform: uppercase;
}

h4, .h4 {
  margin: 0;
  margin-bottom: 10px;
  color: #d2421f;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  text-transform: uppercase;
}

h5, .h5 {
  margin: 0;
  margin-bottom: 10px;
  color: #d2421f;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  text-transform: uppercase;
}

h6, .h6 {
  margin: 0;
  margin-bottom: 5px;
  color: #d2421f;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  text-transform: uppercase;
}

/* ============================================ *
 * Shared Classes
 * ============================================ */
.address-list address {
  margin-bottom: 1em;
}

.availability {
  margin-bottom: 0;
  font-size: 12px;
  text-transform: uppercase;
}

.availability .label {
  display: none;
}

.availability.in-stock {
  color: #11B400;
}

.availability.available-soon,
.availability.out-of-stock {
  color: #FF0000;
}

.availability-only {
  color: #FF0000;
  margin-bottom: 10px;
}

/* -------------------------------------------- *
 * Page Titles
 */
/* Common Titles

Markup: <div class="page-title">
    <h1>Lorem ipsum</h1>
</div>

Styleguide 0.2
*/
.page-title h1,
.page-title h2,
.product-name h1,
.product-name .h1 {
  text-transform: uppercase;
  font-size: 45px;
  font-weight: 600;
  color: #f26c00;
  border-bottom: 1px solid #EDEDED;
  padding-bottom: 3px;
  margin-bottom: 15px;
  text-transform: uppercase;
}

/* -------------------------------------------- *
 * Lists
 */
/* Common Lists

Markup: <ul class="{$modifiers}">
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
</ul>

.theme - themes
.arrow - arrow

Styleguide 0.3
*/
ul {
  list-style: none;
}
ul.theme li, ul.theme h3 {
  color: #5a8aba;
  font-size: 17px;
  text-transform: uppercase;
}
ul.arrow li {
  position: relative;
  padding-left: 10px;
}
ul.arrow li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 3px solid #f46c00;
  border-right: none;
  border-left: 6px solid #f46c00;
}

/* -------------------------------------------- *
 * Block Module
 */
/* Common Blocks Module

Markup: <div class="block">
    <div class="block-title">
        <strong>Block title</strong>
    </div>
    <div class="block-content">
        <p class="block-subtitle">Block subtitle</p>
        <ul>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
            <li>Lorem ipsum</li>
        </ul>
    </div>
</div>

Styleguide 0.4
*/
.block,
.col-left-first {
  margin-bottom: 20px;
}

.col-left-first .block:last-of-type {
  margin-bottom: 0;
}

.block-title {
  position: relative;
  padding: 10px 0 0;
  margin-bottom: 5px;
  border-top: 1px solid #CCCCCC;
}
.block-title h2,
.block-title h3,
.block-title strong {
  margin: 0;
  margin-bottom: 10px;
  color: #d2421f;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  text-transform: uppercase;
  color: #5a8aba;
  margin-bottom: 0;
  text-transform: uppercase;
  font-weight: 600;
}
.block-title small {
  font-size: 100%;
  font-weight: normal;
  color: #a2a2a2;
}

body:not(.customer-account) .block:first-child .block-title {
  border-top: none;
  padding-top: 0;
}

.block-subtitle {
  font-weight: bold;
  margin-bottom: 7px;
}

.block-content {
  margin-top: 5px;
}

.block-content.unpad {
  padding: 0;
}

.block-content li.item {
  margin: 0 0 10px 9px;
}

.block-content li.item:last-child {
  margin-bottom: 0;
}

.block .actions {
  margin: 10px 0 0;
}
.block .actions:after {
  content: '';
  display: table;
  clear: both;
}
.block .actions a {
  float: left;
}
.block .actions .button {
  float: right;
}

.col-left .block .actions .button ~ a,
.col-right .block .actions .button ~ a {
  line-height: 33px;
  margin-right: 5px;
}

/* -------------------------------------------- *
 * Secondary Navigation
 */
.block-account .block-title,
.block-cms-menu .block-title {
  padding-top: 0;
  border-top: none;
}
.block-account li,
.block-cms-menu li {
  text-transform: uppercase;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  margin: 7px 0;
}
.block-account li strong,
.block-cms-menu li strong {
  font-weight: 400;
  color: #f46c00;
}
.block-account li a,
.block-cms-menu li a {
  color: #373737;
}
.block-account li a:hover,
.block-cms-menu li a:hover {
  color: #f46c00;
}

/* ============================================ *
 * Buttons
 * ============================================ */
/* Common Buttons

Markup: <div>
    <button type="button" class="{$modifiers}">
        <span>Lorem ipsum</span>
    </button>
</div>

.button - Primary
.button.button-secondary - Secondary
.button2 - Button2
.button.disabled - Disabled
.button.place - Place
.button.gradient - Gradient
.button.arrow - Arrow
.button.brown - brown
.button.gray - gray
.button.orange - orange
.button.taupe - taupe
.button.last-minute - last-minute
.button.radius - border radius
.button.refresh - refresh
.button.back - back
.button.bold - bold
.button.yellow - yrllow
.button.loading - loading

Styleguide 0.5
*/
/* Secondary Buttons */
.cart .buttons-set .button,
.cart-table .button,
.sidebar .actions .button,
.button.button-secondary {
  background: #DDDDDD;
  color: #373737;
  padding: 7px 15px;
}
.cart .buttons-set .button:hover,
.cart-table .button:hover,
.sidebar .actions .button:hover,
.button.button-secondary:hover {
  background: #d0d0d0;
  cursor: pointer;
}
.cart .buttons-set .button:active,
.cart-table .button:active,
.sidebar .actions .button:active,
.button.button-secondary:active {
  background: #c4c4c4;
  color: #373737;
}
.cart .buttons-set .button:focus,
.cart-table .button:focus,
.sidebar .actions .button:focus,
.button.button-secondary:focus {
  color: #373737;
  background: #c4c4c4;
  outline: none;
}

/* Primary Buttons */
.button,
.cart-table .product-cart-actions .button,
#co-shipping-method-form .buttons-set .button,
.footer .button {
  background: #5a8aba;
  display: inline-block;
  padding: 7px 15px;
  border: 0;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: normal;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  line-height: 19px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.button:hover,
.cart-table .product-cart-actions .button:hover,
#co-shipping-method-form .buttons-set .button:hover,
.footer .button:hover {
  background: #4a7db1;
  cursor: pointer;
}
.button:active,
.cart-table .product-cart-actions .button:active,
#co-shipping-method-form .buttons-set .button:active,
.footer .button:active {
  background: #42719f;
  color: #FFFFFF;
}
.button:focus,
.cart-table .product-cart-actions .button:focus,
#co-shipping-method-form .buttons-set .button:focus,
.footer .button:focus {
  background-color: #42719f;
  outline: none;
  color: #FFFFFF;
}

a.button {
  text-decoration: none;
}

a.button:hover {
  color: #FFFFFF;
}

/* Disabled - class for anchor, state for form elements */
.button.disabled,
.button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Adjacent buttons */
.button + .button {
  margin-left: 5px;
}

.button.place {
  color: #5a8aba;
  background: rgba(255, 255, 255, 0.5);
}
.button.place:hover {
  color: #fff;
}

.gradient {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y0NmMwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2QyNDIxZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f46c00), color-stop(100%, #d2421f));
  background-image: -moz-linear-gradient(#f46c00, #d2421f);
  background-image: -webkit-linear-gradient(#f46c00, #d2421f);
  background-image: linear-gradient(#f46c00, #d2421f);
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  font-weight: bold;
}
.gradient:hover {
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QyNDIxZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Y0NmMwMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d2421f), color-stop(100%, #f46c00));
  background-image: -moz-linear-gradient(#d2421f, #f46c00);
  background-image: -webkit-linear-gradient(#d2421f, #f46c00);
  background-image: linear-gradient(#d2421f, #f46c00);
}

.button.radius {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.button.arrow {
  padding: 2px 40px 2px 4px;
  color: #fff;
  background: #384043;
  position: relative;
  text-transform: none;
}
.button.arrow:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 9px solid #fff;
  border-right: none;
  right: 7px;
  top: 7px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.button.arrow:hover {
  background-color: #f46c00;
}

.button.brown {
  background-color: #712621;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.button.gray {
  background-color: #707070;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.button.gray:hover {
  background-color: #575757;
}

.button.orange {
  background-color: #f46c00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.button.orange:hover {
  background-color: #d2421f;
}

.button.taupe {
  background-color: #aea499;
}
.button.taupe:hover {
  background-color: #8e8975;
}

.button.refresh {
  padding: 7px 20px;
}
.button.refresh span {
  padding-left: 24px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 -1762px no-repeat;
  font-weight: bold;
}

.button.back {
  color: #fff;
  background: #5a8aba;
  position: relative;
  text-transform: none;
}
.button.back:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 9px solid #fff;
  border-left: none;
  left: 7px;
  top: 50%;
  margin-top: -4px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.button.back:hover {
  background-color: #f46c00;
}

.button.bold {
  cursor: auto;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 17px;
}

.button.yellow {
  cursor: auto;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 17px;
  background: #f8b502;
}

.button.last-minute {
  padding: 7px 8px;
  background-color: #f8b502;
  cursor: pointer;
  font-size: 14px;
}
.button.last-minute span {
  padding-left: 24px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 -1879px no-repeat;
  font-weight: 600;
}

.button.new-destination {
  padding: 6px 10px;
  margin-bottom: 15px;
  cursor: default;
  font-size: 14px;
}

.button.loading {
  background-image: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/ajax-loader.gif") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  text-indent: -9999px;
  background-size: 22px !important;
}

.button2 {
  border: 0;
  padding: 0 5px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
}

.button2:focus {
  outline: none;
}

.button2 span,
.button2 span span {
  line-height: 30px;
  height: 30px;
  text-decoration: underline;
  text-transform: uppercase;
  display: inline-block;
  color: #f46c00;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}
.button2 span:hover,
.button2 span span:hover {
  text-decoration: none;
  color: #a84a00;
}

/* -------------------------------------------- *
 * Paypal Button
 */
.paypal-logo.paypal-after {
  float: left;
}

.paypal-after .paypal-or {
  float: left;
}

.paypal-or {
  line-height: 40px;
  margin: 0px 10px 5px;
}

.paypal-after .paypal-button {
  float: left;
}

.paypal-button {
  line-height: 0px;
}

.paypal-button img {
  display: inline;
}

/* VCS Reduction

Markup: <span class="reduction {$modifiers}">-30%</span>

.big - Big
.grey - Grey border

Styleguide 0.5.1
*/
.reduction {
  display: inline-block;
  text-align: center;
  font-size: 17px;
  color: #fff;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  height: 55px;
  width: 55px;
  background: #f8b502;
  border: 2px solid rgba(0, 0, 0, 0.1);
  line-height: 50px;
  vertical-align: middle;
  font-weight: bold;
}
.reduction.big {
  height: 65px;
  width: 65px;
  line-height: 60px;
  font-size: 22px;
}
.reduction.grey {
  border: 3px solid #d6d6d6;
}

/* VCS Offer Buttons

Markup: <div class="offer-button">
    <span class="reduction">-30%</span>
    <span>Votre séjour tout compris :</span>
    <span class="price"><b>758 €</b> / personne</span>
</div>

Styleguide 0.5.2
*/
/* Vcs Buttons */
.offer-button {
  position: relative;
  display: inline-block;
  color: #fff;
  background: #f46c00;
  -moz-border-radius: 50px 0 0 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px 0 0 50px;
  padding: 5px 20px 5px 75px;
  min-height: 55px;
  font-size: 12px;
}
.offer-button .reduction {
  position: absolute;
  left: 0;
  top: 0;
}
.offer-button .reduction.big {
  left: -3px;
  top: -5px;
}
.offer-button .price {
  display: block;
  font-weight: bold;
  line-height: 22px;
  font-size: 13px;
}
.offer-button .price b {
  font-size: 24px;
}

/* -------------------------------------------- *
 * Button Sets
 */
/* Common Button Set

Markup: <div class="buttons-set">
    <p class="back-link"><a href="#"><small>&laquo; </small>Back</a></p>
    <button type="button" class="button"><span><span>Continue</span></span></button>
    <button type="button" class="button"><span><span>Back</span></span></button>
    <p class="required">Required</p>
</div>

Styleguide 0.6
*/
.buttons-set {
  clear: both;
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid #EDEDED;
  text-align: right;
}
.buttons-set p.required {
  margin: 0;
  margin-left: 10px;
  line-height: 33px;
  float: right;
}
.buttons-set .back-link {
  float: left;
  margin: 0;
  line-height: 33px;
}
.buttons-set button.button {
  float: right;
  margin-left: 5px;
  min-width: 140px;
}
.buttons-set:after {
  content: '';
  display: table;
  clear: both;
}

/* -------------------------------------------- *
 * Icons
 */
.icon-sprite, .btn-remove2, .ratings .rating-box, .ratings .rating-box .rating, .sorter > .sort-by .sort-by-switcher, .sorter > .view-mode .grid,
.sorter > .view-mode .list, .skip-nav .icon, .skip-search .icon, .skip-account .icon, .skip-cart .icon, .header-minicart a .icon, .sharer-block .sharing-links a, .review-summary-table .rating-box .rating-number:after, .rating-box, .rating-box .rating {
  background-image: url(https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/icon_sprite.png);
  background-repeat: no-repeat;
  text-indent: -9999px;
}

@media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 4 / 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
  .icon-sprite, .btn-remove2, .ratings .rating-box, .ratings .rating-box .rating, .sorter > .sort-by .sort-by-switcher, .sorter > .view-mode .grid,
  .sorter > .view-mode .list, .skip-nav .icon, .skip-search .icon, .skip-account .icon, .skip-cart .icon, .header-minicart a .icon, .sharer-block .sharing-links a, .review-summary-table .rating-box .rating-number:after, .rating-box, .rating-box .rating {
    background-image: url(https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/icon_sprite@2x.png);
    background-size: 100px 1000px;
  }
}
/* -------------------------------------------- *
 * Breadcrumbs
 */
/* Common Breadcrumbs

Markup: <div class="breadcrumbs">
    <ul>
        <li class="home">
            <a href="#" title="Go to Home Page">Home</a>
            <span>/ </span>
        </li>
        <li class="category4">
            <a href="#" title="">Women</a>
            <span>/ </span>
        </li>
        <li class="category10">
            <strong>New Arrivals</strong>
        </li>
    </ul>
</div>

Styleguide 0.7
*/
.breadcrumbs {
  overflow: hidden;
  margin: -15px 0 30px;
}

.breadcrumbs li {
  float: left;
  font-size: 11px;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  text-transform: uppercase;
}

.breadcrumbs a {
  float: left;
  color: #373737;
}

.breadcrumbs a:hover {
  color: #f46c00;
}

.breadcrumbs strong {
  color: #373737;
  font-weight: normal;
}

.breadcrumbs span {
  float: left;
  padding: 0 7px;
  font-size: 11px;
  text-transform: uppercase;
}

.breadcrumbs a span,
.breadcrumbs strong span {
  padding: 0;
  text-transform: uppercase;
  font-size: 11px;
}

/* -------------------------------------------- *
 * Button - Remove / Previous
 */
/* Common Button Remove / Previous

Markup: <div>
    <a href="#" class="{$modifiers}">Lorem ipsum</a>
</div>

.btn-remove - Remove
.btn-remove.btn-remove2 - Remove2
.btn-previous - Previous

Styleguide 0.8
*/
.btn-remove,
.btn-previous {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid #EDEDED;
  text-align: center;
  /* Hide text */
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  position: relative;
}
.btn-remove:hover,
.btn-previous:hover {
  background-color: #f46c00;
  border-color: #f46c00;
}

.btn-remove:after {
  content: 'X';
  color: #f46c00;
  height: 20px;
  line-height: 20px;
  width: 100%;
  font-size: 10px;
  font-family: Arial, "Open Sans", Verdana, Arial, sans-serif;
  font-weight: bold;
}
.btn-remove:hover:after {
  color: #FFFFFF;
  text-decoration: none;
}

.btn-remove2 {
  background-position: 4px -648px;
  border: none;
  vertical-align: top;
}
.btn-remove2:after {
  display: none;
}
.btn-remove2:hover {
  background-color: transparent;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
}

.btn-previous:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 4px solid #f46c00;
  border-left: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -2px;
  margin-top: -4px;
}
.btn-previous:hover:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 4px solid #FFFFFF;
  border-left: none;
}

.block-layered-nav .currently .btn-remove,
.block-layered-nav .currently .btn-previous,
.mini-products-list .btn-remove,
.mini-products-list .btn-previous,
#compare-items .btn-remove,
#compare-items .btn-previous {
  float: right;
  margin-left: 6px;
}

/* -------------------------------------------- *
 * Checkout Agreements
 */
.checkout-agreements li {
  margin-bottom: 20px;
}

.checkout-agreements .agreement-content {
  overflow-y: auto;
  max-width: 670px;
  max-height: 125px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #CCCCCC;
  background: #F4F4F4;
}

/* -------------------------------------------- *
 * CVV Security Code
 */
.cvv-what-is-this {
  margin-left: 10px;
  font-size: 12px;
  line-height: 24px;
}

/* -------------------------------------------- *
 * Container
 */
.main,
.footer-inner {
  position: relative;
  max-width: 1060px;
  margin: 0 auto;
  padding: 15px;
  padding: 15px 0;
}
.main:after,
.footer-inner:after {
  content: '';
  display: table;
  clear: both;
}

.main-container {
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/background.gif") 0 40px no-repeat;
  /* older browsers */
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/background.gif") 0 40px no-repeat, url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/background-line.gif") right 0 no-repeat;
}

.footer-inner {
  padding: 0 30px;
}

.main-container,
.footer-container {
  padding-top: 0px;
  background-color: #384043;
  padding: 0;
  max-width: 100%;
}

.main-container {
  background-color: #fff;
}

.main-container {
  padding: 30px;
}

.footer-inner {
  padding: 0 30px;
}

/* -------------------------------------------- *
 * Column Layouts
 */
.main:after,
.col-wrapper:after {
  content: '';
  display: table;
  clear: both;
}

.col-left,
.col-right,
.col-main {
  padding: 0 10px;
}

.col-left {
  float: left;
  width: 25%;
  padding-left: 0;
  /* Remove the 15px padding */
  clear: left;
}
.col-left img {
  max-width: 100%;
}

.col-right {
  float: right;
  width: 32%;
  padding-right: 0;
  /* Remove the 15px padding */
}
.col-right img {
  max-width: 100%;
}

.col-main {
  float: left;
  width: 75%;
}

.col1-layout .col-main {
  float: none;
  width: auto;
  padding: 0;
  /* Remove the 15px padding */
}

.col2-left-layout .col-main {
  float: right;
  padding-right: 0;
  /* Remove the 15px padding */
}

.col2-right-layout .col-main {
  padding-left: 0;
  /* Remove the 15px padding */
  width: 68%;
}

.col2-right-layout-custom .col-main {
  float: none;
  width: auto;
  padding: 0;
  /* Remove the 15px padding */
}
.col2-right-layout-custom .col-main .content {
  float: left;
  padding-right: 10px;
  padding-left: 0;
  /* Remove the 15px padding */
  width: 68%;
}
.col2-right-layout-custom .adfab-push-carousel {
  margin-bottom: 30px;
}

.col3-layout .col-right {
  width: 20.83333%;
}
.col3-layout .col-wrapper {
  float: left;
  width: 79.16667%;
}
.col3-layout .col-wrapper .col-main {
  float: right;
  width: 73.68421%;
}
.col3-layout .col-wrapper .col-left {
  width: 26.31579%;
}

/* Content Columns */
.col2-set {
  width: 100%;
}
.col2-set .col-1,
.col2-set .col-2 {
  width: 50%;
  padding: 20px;
}
.col2-set .col-1 {
  float: left;
  padding-left: 0;
}
.col2-set .col-2 {
  float: right;
  padding-right: 0;
}
.col2-set .narrow {
  width: 33%;
}
.col2-set .wide {
  width: 65%;
}
.col2-set:after {
  content: '';
  display: table;
  clear: both;
}

/* -------------------------------------------- *
 * Top Container
 */
.top-container {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 30px;
}

/* -------------------------------------------- *
 * Global Site Notice
 */
/* Common Global Site Notice

Markup: <div class="global-site-notice">
    <div class="notice-inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet placerat mi. Vivamus ac posuere est.</p>
    </div>
</div>

Styleguide 0.9
*/
.global-site-notice {
  background: #676157;
  color: #E6E6E6;
  font-size: 10px;
}
.global-site-notice .notice-inner {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  line-height: 10px;
  min-height: 40px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.global-site-notice p {
  margin-bottom: 0;
}

/* -------------------------------------------- *
 * Promotional Message Banner
 */
.promo-msg {
  color: #5a8aba;
  text-align: center;
  margin: 10px;
  text-transform: uppercase;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}

/* -------------------------------------------- *
 * Grid
 */
.grid:after {
  content: '';
  display: table;
  clear: both;
}

/* -------------------------------------------- *
 * Messages
 */
.success {
  color: #11B400;
}

.error {
  color: #FF0000;
  font-weight: bold;
}

.notice {
  color: #E26703;
  font-weight: bold;
}

/* -------------------------------------------- *
 * Messages
 */
/* Common Messages List

Markup: <ul class="messages">
    <li class="{$modifiers}">
        <ul>
            <li>
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
            </li>
            <li>
                <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
            </li>
        </ul>
    </li>
</ul>

.success-msg - Success Message
.error-msg - Error Message
.notice-msg - Notice Message

Styleguide 0.10
*/
.messages {
  margin-bottom: 10px;
  margin-top: 10px;
}

.messages li li {
  position: relative;
  margin-bottom: 5px;
  padding: 0;
  color: #f26c00;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
}

.order-list-grid .col-1 {
  width: 30%;
}

.order-list-grid .col-2 {
  width: 50%;
  padding-right: 20px;
}

.order-list-grid .col-3 {
  clear: none;
  width: 20%;
  padding-top: 0;
}

/* -------------------------------------------- *
 * Page Popup
 */
.page-popup {
  padding: 20px;
  background: #FFFFFF;
  height: auto;
}

.page-popup h1 {
  margin: 0 0 0.5em;
  font-size: 36px;
}

/* -------------------------------------------- *
 * Payment Methods
 */
.payment-methods {
  margin-bottom: 20px;
}

.payment-methods dt {
  padding: 5px 0;
}

.payment-methods dd {
  padding-top: 10px;
}

.payment-methods .form-list {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 5px 15px 15px;
  padding: 15px;
  border: 1px solid #CCCCCC;
  background: #F4F4F4;
}

.payment-methods .form-list:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #CCCCCC;
  border-top: none;
  top: -11px;
  left: 30px;
}

.payment-methods .form-list:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #F4F4F4;
  border-top: none;
  top: -10px;
  left: 30px;
}

.payment-methods .form-list li:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------- *
 * Please Wait (Loading Indicator)
 */
.please-wait {
  display: inline-block;
  margin-left: 10px;
  margin-top: 5px;
  line-height: 24px;
  height: 24px;
  white-space: nowrap;
  /* Prevent the linebreak in the HTML from causing layout issues */
}
.please-wait img {
  float: left;
  margin-right: 5px;
  width: 24px;
}

/* -------------------------------------------- *
 * Price Box - Standard
 */
/* Common Price Box

Markup: <div class="price-box">
    <span class="{$modifiers}">
        <span class="label">Price Label:</span>
        <span class="price">$99</span>
    </span>
</div>

.price-excluding-tax - Excl Tax
.price-including-tax - Incl Taw
.old-price - Old Price
.special-price - Special price
.minimal-price-link - Minimal Price Link

Styleguide 0.11
*/
.price-box {
  margin: 7px 0;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}

.price-box p {
  margin-bottom: 0;
}

.price-notice {
  color: #a2a2a2;
}

.price-box .price {
  color: #f26c00;
  font-size: 15px;
}

.price-box .price,
.price {
  white-space: nowrap;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}

.price-box .price-label {
  color: #a2a2a2;
  white-space: nowrap;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}

.price-box .minimal-price-link {
  padding-left: 1em;
  color: #5a8aba;
  display: block;
  /* We want this to show on its own line, otherwise the layout looks funky */
}
.price-box .minimal-price-link .label {
  color: #a2a2a2;
}

/* -------------------------------------------- *
 * Price Box - Special
 */
.price-box .old-price,
.price-box .special-price {
  display: inline-block;
}
.price-box .old-price .price,
.price-box .special-price .price {
  display: inline-block;
  color: #000000;
}

.price-box .old-price .price {
  color: #000000;
  text-decoration: line-through;
}
.price-box .old-price .price-label {
  color: #000000;
}

.price-box .special-price {
  color: #5a8aba;
  padding-left: 1em;
}
.price-box .special-price .price-label {
  color: #D84D3C;
}

/* -------------------------------------------- *
 * Price Box - Taxes
 */
.price-box .price-excluding-tax,
.price-box .price-including-tax {
  display: block;
}

/* -------------------------------------------- *
 * Tier Prices
 */
/* Common Tiers Prices

Markup: <ul class="tier-prices product-pricing">
    <li>
        Buy 3 with $10 discount each
        <strong class="benefit">5%</strong>
    </li>
</ul>

Styleguide 0.12
*/
.product-pricing,
.tier-prices,
.tier-prices-grouped {
  display: inline-block;
  padding: 4px 8px;
  background: #FBF4DE;
  border: 1px solid #E2D4C7;
  margin-top: 7px;
}
.product-pricing li,
.tier-prices li,
.tier-prices-grouped li {
  font-size: 11px;
}
.product-pricing .benefit,
.tier-prices .benefit,
.tier-prices-grouped .benefit {
  font-style: italic;
}
.product-pricing .price,
.tier-prices .price,
.tier-prices-grouped .price {
  font-weight: bold;
}

/* ============================================ *
 * Item Options
 * ============================================ */
.item-options {
  font-size: 13px;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}
.item-options:after {
  content: '';
  display: table;
  clear: both;
}
.item-options dt {
  float: left;
  clear: left;
  font-weight: 600;
  padding-right: 5px;
  font-style: italic;
}
.item-options dt:after {
  content: ': ';
}
.item-options dd {
  float: left;
  padding-left: 10px;
  margin: 0 0 6px;
}

.truncated,
.truncated a.dots {
  cursor: help;
}

.truncated a.details {
  cursor: help;
  height: 16px;
  line-height: 16px;
}
.truncated a.details:hover {
  text-decoration: none;
}

.truncated .truncated_full_value {
  position: relative;
  z-index: 300;
}

.truncated .truncated_full_value .item-options {
  display: none;
  position: absolute;
  z-index: 300;
  width: 200px;
  padding: 8px;
  border: 1px solid #f46c00;
  background-color: #F6F6F6;
  top: 21px;
  left: -100px;
}
.truncated .truncated_full_value .item-options:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #f46c00;
  border-top: none;
  left: 97px;
  top: -7px;
}

.truncated .truncated_full_value .item-options > p {
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.truncated .show .item-options {
  display: block;
}

/* -------------------------------------------- *
 * Printer Friendly Page
 */
.page-print {
  width: 6.5in;
  margin: 20px;
  background: #FFFFFF;
}

/* -------------------------------------------- *
 * Add to links
 */
.add-to-links {
  margin: 7px 0;
}
.add-to-links input {
  top: 3px;
  position: relative;
  left: 3px;
}
.add-to-links a {
  display: inline-block;
  font-weight: normal;
  padding: 0px 3px 3px;
  color: #000000;
  font-size: 12px;
  text-decoration: underline;
}
.add-to-links a.link-wishlist {
  padding-left: 20px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 -1817px no-repeat;
}
.add-to-links a.link-share {
  padding-left: 20px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/email-orange.png") 0 4px no-repeat;
}

.add-to-links .separator {
  display: none;
}

/* -------------------------------------------- *
 * Product Image
 */
.product-image,
.no-touch .product-img-box .product-image:not(.zoom-available):hover {
  position: relative;
  display: block;
  border: 1px solid #EDEDED;
}

.no-touch .product-image:hover {
  border-color: #dc5528;
}

/* -------------------------------------------- *
 * Ratings
 */
.ratings {
  margin: 7px 0;
}
.ratings .rating-box,
.ratings .rating-links {
  margin: 5px 0;
}
.ratings .rating-box {
  width: 65px;
  height: 13px;
  background-repeat: repeat-x;
  background-position: 0 -615px;
  overflow: hidden;
}
.ratings .rating-box .rating {
  float: left;
  height: 13px;
  background-repeat: repeat-x;
  background-position: 0 -600px;
}
.ratings .amount {
  display: block;
  margin: 5px auto;
}
.ratings .rating-links .separator {
  margin: 0 3px;
}

/* -------------------------------------------- *
 * Standard Formatted Text Block
 */
.std p {
  margin: 0 0 1.5em;
  font-size: 14px;
}

.std ol {
  list-style: decimal outside;
  margin-bottom: 1.5em;
}

.std ol li {
  margin-left: 2em;
}

.std ul {
  list-style: disc outside;
  margin-bottom: 1.5em;
}

.std ul li {
  margin-left: 2em;
}

.std .note {
  color: #a2a2a2;
  font-size: 12px;
}

.std h3 {
  color: #5a8aba;
}

.std hr {
  border: 0;
  border-bottom: 1px dotted #000000;
  margin: 10px 0 25px 0;
}

/* -------------------------------------------- *
 * Tabs
 */
.tabs {
  margin-bottom: 10px;
  background: #FFFFFF;
}
.tabs img {
  max-width: 100%;
  margin: 10px;
}

/* -------------------------------------------- *
 * Toolbar
 */
.toolbar {
  margin-top: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid #CCCCCC;
  border-top: 1px solid #CCCCCC;
  background: #F4F4F4;
  padding: 5px 10px 0px 10px;
}
.toolbar:after {
  content: '';
  display: table;
  clear: both;
}

.pager-no-toolbar {
  margin-bottom: 10px;
}

.pager-no-toolbar ~ .pager-no-toolbar {
  margin-top: 10px;
}

.toolbar,
.pager {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  color: #373737;
  line-height: 30px;
  font-size: 11px;
}

.toolbar label,
.pager-no-toolbar label {
  font-weight: normal;
  text-transform: uppercase;
}

.sorter {
  float: left;
  margin-bottom: 5px;
}
.sorter label {
  float: left;
  margin-right: 5px;
}
.sorter label:after {
  content: ':';
}

.sorter > .sort-by {
  float: left;
  margin-right: 5px;
  height: 30px;
}
.sorter > .sort-by .sort-by-switcher {
  width: 30px;
  height: 30px;
  display: inline-block;
}
.sorter > .sort-by .sort-by-switcher--asc {
  background-position: 4px -542px;
}
.sorter > .sort-by .sort-by-switcher--asc:hover {
  background-position: -46px -542px;
}
.sorter > .sort-by .sort-by-switcher--desc {
  background-position: 4px -567px;
}
.sorter > .sort-by .sort-by-switcher--desc:hover {
  background-position: -46px -567px;
}

.sorter > .view-mode {
  float: right;
}
.sorter > .view-mode .grid,
.sorter > .view-mode .list {
  float: left;
  width: 30px;
  height: 30px;
}
.sorter > .view-mode .grid {
  margin-right: 5px;
  background-position: 8px -492px;
}
.sorter > .view-mode strong.grid,
.sorter > .view-mode a.grid:hover {
  background-position: -42px -492px;
}
.sorter > .view-mode .list {
  background-position: 11px -517px;
}
.sorter > .view-mode strong.list,
.sorter > .view-mode a.list:hover {
  background-position: -39px -517px;
}

.pager {
  float: right;
  overflow: hidden;
}
.pager > .count-container {
  float: left;
}
.pager .amount {
  float: left;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  white-space: nowrap;
  margin: 0 15px 0 0;
}
.pager .limiter {
  float: left;
  height: 30px;
  line-height: 30px;
}
.pager .limiter > label {
  padding-right: 5px;
}
.pager .limiter > label:after {
  content: ':';
}
.pager .amount,
.pager .limiter,
.pager .pages {
  margin-bottom: 5px;
}

.pages {
  float: right;
  overflow: hidden;
  margin-left: 15px;
}
.pages strong {
  display: none;
}

.pages li {
  float: left;
}

.pages a,
.pages .current {
  display: inline-block;
  border: 0;
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 30px;
  width: 25px;
  height: 30px;
  padding: 0;
  color: #f46c00;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}

.pages .current,
.pages .current:hover {
  color: #373737;
  border: 1px solid #CCCCCC;
  width: 30px;
  background-color: #FFFFFF;
  cursor: default;
}

.pages .next,
.pages .previous {
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  background-color: transparent;
  position: relative;
}
.pages .next:hover,
.pages .previous:hover {
  border: 1px solid #f46c00;
}

.pages .next:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #f46c00;
  border-right: none;
  top: 50%;
  margin-top: -3px;
  left: 50%;
  margin-left: -2px;
}
.pages .next:hover:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #a84a00;
  border-right: none;
}

.pages .previous:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 4px solid #f46c00;
  border-left: none;
  top: 50%;
  margin-top: -3px;
  left: 50%;
  margin-left: -2px;
}
.pages .previous:hover:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-right: 4px solid #a84a00;
  border-left: none;
}

.toolbar .view-mode > label {
  display: none;
}

/* ============================================ *
 * Tax - Full Tax Summary
 * ============================================ */
#checkout-review-table .summary-collapse,
#shopping-cart-totals-table .summary-collapse,
body.customer-account .data-table .summary-collapse {
  position: relative;
  cursor: pointer;
}
#checkout-review-table .summary-collapse:before,
#shopping-cart-totals-table .summary-collapse:before,
body.customer-account .data-table .summary-collapse:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-top: 7px solid #5a8aba;
  border-bottom: none;
  position: static;
  display: inline-block;
  margin-right: 5px;
}
#checkout-review-table .summary-collapse:hover:before,
#shopping-cart-totals-table .summary-collapse:hover:before,
body.customer-account .data-table .summary-collapse:hover:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-top: 7px solid #a84a00;
  border-bottom: none;
  position: static;
  display: inline-block;
  margin-right: 5px;
}
#checkout-review-table .show-details .summary-collapse:before,
#shopping-cart-totals-table .show-details .summary-collapse:before,
body.customer-account .data-table .show-details .summary-collapse:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #5a8aba;
  border-top: none;
  position: static;
  display: inline-block;
  margin-right: 5px;
}
#checkout-review-table .show-details .summary-collapse:hover:before,
#shopping-cart-totals-table .show-details .summary-collapse:hover:before,
body.customer-account .data-table .show-details .summary-collapse:hover:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #a84a00;
  border-top: none;
  position: static;
  display: inline-block;
  margin-right: 5px;
}

#shopping-cart-totals-table tfoot td .summary-collapse:before, #shopping-cart-totals-table tfoot td .summary-collapse:hover:before {
  margin-bottom: 5px;
}

/* ============================================ *
 * Widgets
 * ============================================ */
.widget .pager {
  float: none;
  width: 100%;
}

/* ============================================ *
 * Magento Helpers
 * ============================================ */
.a-center {
  text-align: center;
}

.a-right,
.align-right {
  text-align: right;
}

.no-display {
  display: none !important;
}

.nobr,
.nowrap {
  white-space: nowrap;
}

.width-full {
  width: 100%;
}

/* ============================================ *
 * Custom Helpers
 * ============================================ */
.hidden {
  display: none;
}

/* ============================================ *
 * Responsive Helpers
 * ============================================ */
.mobile-visible {
  display: none;
}

.mobile-hidden {
  display: block;
}

/* ============================================ *
 * Print Styles
 * ============================================ */
.page-print .print-head {
  margin: 0 0 15px;
}

.page-print .print-head .logo {
  float: none;
  max-height: 50px;
  width: auto;
}

/* ============================================ *
 * Weather Widget
 * ============================================ */
#weather_block {
  position: relative;
}
#weather_block > h3 {
  position: absolute;
  right: 0px;
  width: 262px;
  text-align: center;
  display: none;
}
#weather_block > h3.wrd {
  display: block;
}
#weather_block .weather_content {
  float: right;
  margin-top: 40px;
  width: 262px;
}
#weather_block .weather_content img {
  margin: 0;
}
#weather_block .weather_content .weather_header {
  width: 250px;
  height: 65px;
}
#weather_block .weather_content .weather_header .weather_temp {
  font-size: 40px;
  font-weight: bold;
  height: 100%;
  text-align: center;
  width: 200px;
}
#weather_block .weather_content .weather_header .weather_img > img {
  position: absolute;
  top: 7px;
  right: 45px;
  width: 75px;
  height: 42px;
}
#weather_block .weather_content .weather_other_day > div {
  width: 25%;
  padding: 2%;
  display: inline-block;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
#weather_block .weather_content .weather_other_day > div > img {
  margin-left: -3px;
}

/* Forms

Forms

<h1>Result</h1>

Markup: <form action="" method="">
    <div class="form-list">
        <p class="legend">Legend</p>
        <label>Text</label>
        <div class="input-box">
            <input type="text" class="input-text"name="">
            <p class="input-hint">Input Hint</p>
            <input type="text" class="input-text validation-failed" name="">
        </div>
        <div class="input-box fieldset">
          <input type="text" class="input-text" name="">
          <p class="required">Required</p>
        </div>
        <div class="input-box">
          <input type="text" class="input-text" name="">
          <p class="required">Required</p>
        </div>
        <label>Select</label>
        <div class="input-box">
            <select>
              <option>Option</option>
              <option>Option</option>
              <option>Option</option>
              <option>Option</option>
            </select>
        </div>
        <label>Textarea</label>
        <div class="input-box">
            <textarea class="input-text"></textarea>
        </div>
        <label>Range</label>
        <div class="input-range">
            <input type="text" maxlength="50" class="input-text" name="">
            <input type="text" maxlength="50" class="input-text" name="">
        </div>
        <div class="fields">
            <div class="field">
                <label class="required">Text Field</label>
                <div class="input-box">
                    <input type="text" class="input-text required-entry" name="">
                </div>
            </div>
            <div class="field">
                <label class="required">Text Field</label>
                <div class="input-box">
                    <input type="text" class="input-text required-entry" name="">
                </div>
            </div>
        </div>
        <div class="wide">
            <label>Wide Input</label>
            <div class="input-box">
                <input type="text" class="input-text" name="">
            </div>
        </div>
        <div class="control">
            <input class="checkbox" type="checkbox" checked="checked" name="">
            <label>Check</label>
        </div>
        <div class="control">
            <input class="radio" type="radio" value="value">
            <label>Radio</label>
        </div> 
    </div>
    <p class="form-instructions">Form instruction</p>
    <div class="custom-control">
        <input type="checkbox" name="" id="check"/>
        <label for="check">Check</label>
    </div>
    <div class="custom-control brown">
        <input type="checkbox" name="" id="check-2"/>
        <label for="check-2">Check</label>
    </div>
    <div class="custom-radio season">
        <div class="radio summer">
            <input type="radio" name="season" class="season-summer" value="Saison été" checked="checked" />
            <label for="season">Saison été</label>
        </div>
        <div class="radio winter">
            <input type="radio" name="season" class="season-winter" value="Saison hiver" />
            <label for="season">Saison hiver</label>
        </div>
    </div>
    <div class="custom-select">
        <select name="">
            <option value="lorem">Lorem</option>
            <option value="ipsum">Ipsum</option>
            <option value="doloris">Doloris</option>
            <option value="amet">Amet</option>
        </select>
    </div>
</form>

Styleguide 1
*/
/* ============================================ *
 * FORMS - COMMON
 * ============================================ */
.fieldset p {
  margin-bottom: 7px;
}
.fieldset p.required {
  margin-bottom: 5px;
  float: right;
  font-size: 11px;
  margin-top: 0px;
}

.fieldset + .fieldset {
  margin-top: 5px;
}

form .legend {
  margin: 0;
  margin-bottom: 10px;
  color: #d2421f;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  text-transform: uppercase;
  margin-bottom: 15px;
  padding-bottom: 7px;
  border-bottom: 1px dotted #000;
  color: #f26c00;
  font-size: 14px;
  font-weight: 700;
}

i.input-info {
  display: block;
  font-size: 11px;
  color: #7D7D7D;
  white-space: nowrap;
}

/* -------------------------------------------- *
 * Input Box
 */
.input-box {
  padding-top: 2px;
}
.input-box:after {
  content: '';
  display: table;
  clear: both;
}

/* For adjacent select inputs. */
/* Example: credit card expiration month and year. */
.input-box .v-fix {
  float: left;
  margin-right: 5px;
}

/* -------------------------------------------- *
 * Labels
 */
label {
  display: inline-block;
  font-size: 12px;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-weight: 600;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

label.required:after,
span.required:after {
  content: ' *';
  font-weight: normal;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 11px;
}

label.required em,
span.required em {
  display: none;
}

/* -------------------------------------------- *
 * Hints
 */
.input-hint {
  color: #a2a2a2;
  font-size: 11px;
}

/* -------------------------------------------- *
 * Select
 */
select {
  font-size: 14px;
}

select + select {
  margin-left: 5px;
}

select[multiple] {
  width: 270px;
  border: 1px solid #C0C0C0;
  font-size: 14px;
  padding: 5px;
}

.custom-select {
  margin: 7px 0;
}
.custom-select select {
  padding: 4px 30px 4px 4px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") right -679px #f46c00 no-repeat;
  border: 0;
  color: #fff;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  text-indent: 0.01px;
}
.custom-select select option {
  padding-right: 7px;
}

/* -------------------------------------------- *
 * Textarea
 */
textarea {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  max-width: 100%;
  width: 450px;
  padding: 5px;
}

/* -------------------------------------------- *
 * Inputs
 */
.input-text {
  -moz-appearance: none;
  -webkit-appearance: none;
  border: 1px solid #C0C0C0;
  background: #FFFFFF;
  font-size: 14px;
}
.input-text:focus {
  border: 1px solid #5a8aba;
}

.input-text.validation-failed {
  border-color: #FF0000;
}

.input-text.validation-failed:focus {
  outline-color: #ff8080;
}

input[type=email],
input[type=search],
input[type=number],
input[type=password],
input[type=tel],
input[type=text] {
  height: 30px;
  padding: 0 8px;
  border-left-width: 2px;
  border-top-width: 2px;
}

input[type=email],
input[type=search],
input[type=number],
input[type=password],
input[type=tel],
input[type=text] {
  width: 365px;
  max-width: 100%;
}

/* Only show on iPhones (not iPads or any other device) */
@media only screen and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 0) {
  input[type=email],
  input[type=search],
  input[type=number],
  input[type=password],
  input[type=tel],
  input[type=text],
  select {
    font-size: 16px;
    /* Prevent from zooming on focus */
  }
}
.ie8 .input-text {
  max-width: none;
}

/* -------------------------------------------- *
 * Inputs - Quantity
 */
input[type=number].qty,
input[type=text].qty {
  width: 3em;
  text-align: center;
  vertical-align: middle;
}

/* -------------------------------------------- *
 * Placeholder
 */
::-webkit-input-placeholder {
  color: #a2a2a2;
}

input:-moz-placeholder {
  color: #a2a2a2;
}

/* -------------------------------------------- *
 * Checkbox And Radio
 */
.checkbox,
.radio {
  position: relative;
  top: -1px;
  display: inline-block;
}

.checkbox + label,
.radio + label {
  width: auto;
  max-width: 85%;
  padding: 0 0 0 8px;
  font-size: 13px;
  font-weight: normal;
  vertical-align: top;
}

/* -------------------------------------------- *
 * Validation
 */
p.required,
.validation-advice {
  margin: 5px 0 0;
  color: #FF0000;
  font-size: 12px;
}

/* ============================================ *
 * Form List
 * ============================================ */
.form-list > li {
  margin-bottom: 10px;
}
.form-list select {
  margin-top: 4px;
  width: 365px;
  max-width: 100%;
}
.form-list .input-range .input-text {
  width: 74px;
}
.form-list .field,
.form-list .wide,
.form-list .control {
  margin-bottom: 10px;
}

/* Turn the label of controls (radio/checkbox) into a button style that wraps the input */
.form-list .control,
.sp-methods dt,
#checkout-shipping-method-load .sp-methods dd,
#co-shipping-method-form .sp-methods dd,
.product-options ul.options-list {
  /* When a label is next to an input that is set to not display, we should style the label in a non-clickable state */
}
.form-list .control div.input-box,
.sp-methods dt div.input-box,
#checkout-shipping-method-load .sp-methods dd div.input-box,
#co-shipping-method-form .sp-methods dd div.input-box,
.product-options ul.options-list div.input-box {
  display: inline;
  float: left;
}
.form-list .control div.input-box:after,
.sp-methods dt div.input-box:after,
#checkout-shipping-method-load .sp-methods dd div.input-box:after,
#co-shipping-method-form .sp-methods dd div.input-box:after,
.product-options ul.options-list div.input-box:after {
  display: none;
}
.form-list .control input.radio,
.form-list .control input.checkbox,
.sp-methods dt input.radio,
.sp-methods dt input.checkbox,
#checkout-shipping-method-load .sp-methods dd input.radio,
#checkout-shipping-method-load .sp-methods dd input.checkbox,
#co-shipping-method-form .sp-methods dd input.radio,
#co-shipping-method-form .sp-methods dd input.checkbox,
.product-options ul.options-list input.radio,
.product-options ul.options-list input.checkbox {
  float: left;
  margin-right: -40px;
  margin-top: 10px;
  margin-left: 15px;
}
.form-list .control label,
.sp-methods dt label,
#checkout-shipping-method-load .sp-methods dd label,
#co-shipping-method-form .sp-methods dd label,
.product-options ul.options-list label {
  color: #373737;
  background-color: #F4F4F4;
  padding: 5px 10px;
  display: inline-block;
  width: auto;
  max-width: none;
  min-width: 250px;
  float: none;
  padding: 6px 10px 6px 40px;
}
.form-list .control label:hover,
.sp-methods dt label:hover,
#checkout-shipping-method-load .sp-methods dd label:hover,
#co-shipping-method-form .sp-methods dd label:hover,
.product-options ul.options-list label:hover {
  background-color: #e8e8e8;
}
.form-list .control .no-display + label,
.sp-methods dt .no-display + label,
#checkout-shipping-method-load .sp-methods dd .no-display + label,
#co-shipping-method-form .sp-methods dd .no-display + label,
.product-options ul.options-list .no-display + label {
  padding-left: 10px;
  background-color: transparent;
}
.form-list .control .no-display + label:hover,
.sp-methods dt .no-display + label:hover,
#checkout-shipping-method-load .sp-methods dd .no-display + label:hover,
#co-shipping-method-form .sp-methods dd .no-display + label:hover,
.product-options ul.options-list .no-display + label:hover {
  background-color: transparent;
}

.product-options ul.options-list label,
.col2-set .form-list .control label {
  min-width: inherit;
  width: 250px;
  max-width: 100%;
}

.form-list .control.remember-me-box label {
  width: auto;
  max-width: none;
  min-width: inherit;
}

.form-list .control {
  margin-top: 10px;
}
.form-list .control label {
  float: none;
}
.form-list .control .radio,
.form-list .control .checkbox {
  margin-right: 6px;
}
.form-list .control .input-box {
  clear: none;
  display: inline-block;
  width: auto;
  padding: 0;
}

.custom-control {
  margin-bottom: 8px;
}
.custom-control label {
  position: relative;
  padding: 2px 0 2px 5px;
}
.custom-control.brown input[type="checkbox"] {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  visibility: hidden;
}
.custom-control.brown label {
  padding-left: 32px;
  margin-left: -15px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 -749px no-repeat;
}
.custom-control.brown label.checked {
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 -829px no-repeat;
}

.custom-radio.season {
  position: relative;
  text-transform: uppercase;
  font-size: 12px;
  color: #a2a2a2;
  font-weight: 400;
}
.custom-radio.season:before {
  content: '';
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 -901px no-repeat;
  width: 23px;
  height: 42px;
  position: absolute;
  top: 0;
  left: 0;
}
.custom-radio.season input[type="checkbox"] {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  visibility: hidden;
}
.custom-radio.season input[type="radio"] {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  cursor: pointer;
}
.custom-radio.season .radio {
  display: block;
  padding-left: 5px;
  margin-bottom: 2px;
}
.custom-radio.season .radio.checked {
  color: #373737;
}
.custom-radio.season .radio.summer.checked label {
  background-position: -2px -957px;
}
.custom-radio.season .radio.winter.checked label {
  background-position: -2px -998px;
}
.custom-radio.season .radio.checked label {
  background-image: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png");
  background-repeat: no-repeat;
}
.custom-radio.season label {
  padding-left: 23px;
  margin-left: -18px;
  cursor: pointer;
}

form .form-instructions {
  font-style: italic;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-size: 12px;
  color: #a2a2a2;
}

/* Contact Form

Contact Form

<h1>Result</h1>

Markup: <form action="" class="vsc-contact-form" method="post" id="form-validate">
    <!--Contact Form -> General Block Start-->
    <div class="fieldset">
        <input name="form_key" value="ozI7Tqbdpy4Glpse" type="hidden">
        <input name="success_url" value="" type="hidden"> <input name="error_url" value="" type="hidden">
        <!--Contact Form -> Personal Informations Block Start-->
        <ul class="form-list">
            <li class="fields">
                <!-- Personal Informations -> Gender Start -->
                <!-- Personal Informations -> Gender End -->
                <!-- Personal Informations -> Name Start -->
                <div class="field customer-name">
                    <div class="customer-name">
                        <div class="field name-firstname">
                            <label for="firstname" class="required"><em>*</em>Prénom</label>
                            <div class="input-box">
                                <input id="firstname" name="firstname" value="" title="Prénom" maxlength="255" class="input-text required-entry" type="text">
                            </div>
                        </div>
                        <div class="field name-lastname">
                            <label for="lastname" class="required"><em>*</em>Nom de famille</label>
                            <div class="input-box">
                                <input id="lastname" name="lastname" value="" title="Nom de famille" maxlength="255" class="input-text required-entry" type="text">
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Personal Informations -> Name Start -->
            </li>
            <li class="fields">
                <!-- Personal Informations -> Phone Start -->
                <div class="field first tel">
                    <label for="telephone">Téléphone fixe<em>*</em><em>*</em></label>
                    <div class="input-box">
                        <input name="telephone" value="" title="Téléphone fixe" class="input-text validate-phoneStrict  required-entry" id="telephone" type="tel">
                        <!-- In case of error -> Display Message Start -->
                        <div style="display:none" id="advice-validate-phoneStrict-telephone" class="validation-advice">Merci de saisir un numero de téléphone valide</div>
                        <div style="display:none" id="advice-required-entry-telephone_port" class="validation-advice">Merci de saisir votre numéro de téléphone ou votre numéro de téléphone mobile.</div>
                        <!-- In case of error -> Display Message End -->
                    </div>
                </div>
                <!-- Personal Informations -> Phone End -->
                <!-- Personal Informations -> Mobile Phone Start -->
                <div class="field mobile_tel">
                    <label for="telephone_port">Téléphone portable<em>*</em><em>*</em></label>
                    <div class="input-box">
                        <input name="telephone_port" id="telephone_port" title="Téléphone portable" value="" class="input-text required-entry validate-phoneStrict" type="tel">
                        <!-- In case of error -> Display Message Start -->
                        <div style="display:none" id="advice-required-entry-telephone_port" class="validation-advice">Merci de saisir votre numéro de téléphone ou votre numéro de téléphone mobile.</div>
                        <div style="display:none" id="advice-validate-phoneStrict-telephone_port" class="validation-advice">Merci de saisir un numero de téléphone mobile valide</div>
                        <!-- In case of error -> Display Message End -->
                    </div>
                </div>
                <!-- Personal Informations -> Mobile Phone End -->
                <!-- Personal Informations -> Email Address Start -->
                <div class="field email_add">
                    <label for="email_address" class="required"><em>*</em>Adresse email</label>
                    <div class="input-box">
                        <input name="email" id="email_address" value="" title="Adresse email" class="input-text required-entry validate-email" type="text">
                        <!-- In case of error -> Display Message Start -->
                        <div style="display:none" id="advice-required-entry-email_address" class="validation-advice">Merci de saisir un email.</div>
                        <div style="display:none" id="advice-validate-email-email_address" class="validation-advice">Merci de saisir un email valide.</div>
                        <!-- In case of error -> Display Message End -->
                    </div>
                </div>
                <!-- Personal Informations -> Email Address End -->
            </li>
        </ul>
        <!--Contact Form -> Personal Informations Block End-->
    </div>
    <!--Contact Form -> Support Block Start-->
    <div class="fieldset support">
        <label for="support" class="required"><em>*</em>Comment avez vous connu les Villages Clubs du Soleil ?</label>
        <div class="input-box">
            <select id="support" name="support" title="Support" class="validate-select">
                <option value="1">NON QUALIFIE</option>
                <option value="2">PAR RELATION</option>
                <option value="3">PRESSE</option>
                <option value="4">COMITE D'ENTREPRISE</option>
                <option value="5">OFFICE DU TOURISME</option>
                <option value="6">SALON</option>
                <option value="7">CHEQUES VACANCES</option>
                <option value="8">UNAT</option>
                <option value="9">INTERNET</option>
                <option value="10">AGENCE DE VOYAGES</option>
                <option value="11">COURRIER</option>
                <option value="12">PROSPECT VILLAGE</option>
                <option value="13">SEJOUR VILLAGE</option>
                <option value="14">COUPON COTE SOLEIL</option>
                <option value="15">CNAS</option>
                <option value="16">FICHE DE SATISFACTION</option>
                <option value="17">FICHIERS</option>
                <option value="18">CONGRES CNAS 2012</option>
                <option value="19">REDUCT-ANCV MGT</option>
                <option value="20">CONSODATA HIV 06/07</option>
                <option value="21">AFFICHE ETE 98</option>
            </select>
        </div>
    </div>
    <!--Contact Form -> Support Block Start-->
    <!--Contact Form -> Purpose Block Start-->
    <div class="fieldset">
        <label for="contact_purpose" class="required"><em>*</em>Objet de votre demande</label>
        <div class="input-box">
            <select name="type_contact" class="required-entry" id="contact_purpose" value="" title="Contact Purpose">
                <option value="message">Message</option>
                <option value="catalog">Recevoir les catalogues</option>
                <option value="group">Groupe : Demande de devis</option>
                <option value="institution">Collectivité : Demande de devis</option>
            </select>
            <!-- In case of error -> Display Message Start -->
            <div style="display:none" id="advice-required-entry-contact_purpose" class="validation-advice">You must select the purpose of your request..</div>
            <!-- In case of error -> Display Message End -->
        </div>
    </div>
    <!--Contact Form -> Purpose Block End-->
    <!--Contact Form -> General Block End-->
    <!--Contact Form -> Spécific Blocks Start-->
    <div class="fieldms">
        <!--Contact Form -> Message Block Start-->
        <div class="fieldset message-form">
            <h2>Message</h2>
            <ul class="form-list">
                <li class="fields">
                    <label for="msg" class="required"><em>*</em>Message</label>
                    <div class="input-box">
                        <textarea name="msg" title="Message" id="msg"></textarea>
                    </div>
                </li>
            </ul>
        </div>
        <!--Contact Form -> Message Block End-->
        <!--Contact Form -> Catalog Block Start-->
        <div class="fieldset catalog-form" style="display:none">
            <!--Catalog Page Title Start-->
            <h2>Recevoir les catalogues par courrier</h2>
            <!--Catalog Page Title End-->
            <!--Catalog Page SubTitle Start-->
            <p><b>Pour recevoir gratuitement un catalogue par courrier, merci de renseigner le formulaire ci-dessous</b></p>
            <!--Catalog Page SubTitle End-->
            <!--Catalog -> Show Winter And Summer Catalog Start-->
            <fieldset id="cat-view">
                <legend>Catalogue(s) souhaité(s)</legend>
                <div class="field first">
                    <div class="input-box cat-box">
                        <input name="summer" value="1" type="checkbox">
                    </div>
                    <div class="cat-img">
                        <img src="../media/wysiwyg/widget/catalog.png" alt="ÉtÉ">
                    </div>
                    <div class="cat-lab">
                        <label for="summer">ÉtÉ </label>
                    </div>
                </div>
                <div class="field">
                    <div class="input-box cat-box">
                        <input name="winter" value="1" type="checkbox">
                    </div>
                    <div class="cat-img">
                        <img src="../media/wysiwyg/widget/catalog.png" alt="Hiver">
                    </div>
                    <div class="cat-lab">
                        <label for="winter">Hiver</label>
                    </div>
                </div>
            </fieldset>
            <!--Catalog -> Show Winter And Summer Catalog End-->
            <!--Catalog -> Personal Informations Block Start-->
            <fieldset>
                <ul class="form-list">
                    <li class="wide fields">
                        <!-- Personal Informations -> Apartment/Stairs/Floor Start -->
                        <div class="field">
                            <label for="billing:street5">Appartement/Escalier/Etage</label>
                            <div class="input-box">
                                <input name="street[4]" value="" title="Adresse municipale 5" id="street_5" class="input-text" type="text">
                            </div>
                        </div>
                        <!-- Personal Informations -> Apartment/Stairs/Floor End -->
                        <!-- Personal Informations -> Building Start -->
                        <div class="field">
                            <label for="billing:street3">Batiment/Immeuble</label>
                            <div class="input-box">
                                <input name="street[2]" value="" title="Adresse municipale 3" id="street_3" class="input-text" type="text">
                            </div>
                        </div>
                        <!-- Personal Informations -> Building End -->
                        <!-- Personal Informations -> Residence/ZI Start -->
                        <div class="field first">
                            <label for="billing:street2">Résidence/ZI</label>
                            <div class="input-box">
                                <input name="street[1]" value="" title="Adresse municipale 2" id="street_2" class="input-text" type="text">
                            </div>
                        </div>
                        <!-- Personal Informations -> Residence/ZI End -->
                    </li>
                    <li class="fields">
                        <!-- Personal Informations -> N° Start -->
                        <div class="field first nb_street">
                            <label for="billing:street4" class="required"><em>*</em>N°</label>
                            <div class="input-box">
                                <input name="street[3]" value="" title="Adresse municipale 3" id="street_4" class="input-text required-desac validate-digits" type="text">
                                <!-- In case of error -> Display Message Start -->
                                <div style="display:none" id="advice-required-entry-street_4" class="validation-advice">Merci d'indiquer votre adresse.</div>
                                <!-- In case of error -> Display Message End -->
                            </div>
                        </div>
                        <!-- Personal Informations -> N° End -->
                        <!-- Personal Informations -> Street Start -->
                        <div class="field">
                            <label for="billing:street1" class="required"><em>*</em>Voie</label>
                            <div class="input-box">
                                <input name="street[0]" value="" title="Voie" id="street_1" class="input-text required-desac" type="text">
                                <!-- In case of error -> Display Message Start -->
                                <div style="display:none" id="advice-required-entry-street_1" class="validation-advice">Merci d'indiquer votre adresse.</div>
                                <!-- In case of error -> Display Message End -->
                            </div>
                        </div>
                        <!-- Personal Informations -> Street End -->
                    </li>
                    <li class="fields">
                        <!-- Personal Informations -> Zip/Postal Code Start -->
                        <div class="field first">
                            <label for="zip" class="required"><em>*</em>Code postal</label>
                            <div class="input-box">
                                <input name="postcode" value="" title="Code postal" id="zip" class="input-text validate-digits validate-zip-international  required-entry" type="text">
                                <!-- In case of error -> Display Message Start -->
                                <div style="display:none" id="advice-required-entry-zip" class="validation-advice">Merci d'indiquer votre code postal.</div>
                                <!-- In case of error -> Display Message End -->
                            </div>
                        </div>
                        <!-- Personal Informations -> Zip/Postal Code End -->
                        <!-- Personal Informations -> City Start -->
                        <div class="field">
                            <label for="city" class="required"><em>*</em>Ville</label>
                            <div class="input-box">
                                <input name="city" value="" title="Ville" class="input-text  required-entry" id="city" type="text">
                                <!-- In case of error -> Display Message Start -->
                                <div style="display:none" id="advice-required-entry-city" class="validation-advice">Merci d'indiquer votre ville.</div>
                                <!-- In case of error -> Display Message End -->
                            </div>
                        </div>
                        <!-- Personal Informations -> City End -->
                        <!-- Personal Informations -> Country Start -->
                        <div class="field">
                            <label for="country" class="required"><em>*</em>Pays</label>
                            <div class="input-box">
                                <select name="country_id" id="country" class="validate-select" title="Pays"><option value=""> </option><option value="AF">Afghanistan</option><option value="ZA">Afrique du Sud</option><option value="AL">Albanie</option><option value="DZ">Algérie</option><option value="DE">Allemagne</option><option value="AD">Andorre</option><option value="AO">Angola</option><option value="AI">Anguilla</option><option value="AQ">Antarctique</option><option value="AG">Antigua-et-Barbuda</option><option value="AN">Antilles néerlandaises</option><option value="SA">Arabie saoudite</option><option value="AR">Argentine</option><option value="AM">Arménie</option><option value="AW">Aruba</option><option value="AU">Australie</option><option value="AT">Autriche</option><option value="AZ">Azerbaïdjan</option><option value="BS">Bahamas</option><option value="BH">Bahreïn</option><option value="BD">Bangladesh</option><option value="BB">Barbade</option><option value="BY">Bélarus</option><option value="BE">Belgique</option><option value="BZ">Belize</option><option value="BJ">Bénin</option><option value="BM">Bermudes</option><option value="BT">Bhoutan</option><option value="BO">Bolivie</option><option value="BA">Bosnie-Herzégovine</option><option value="BW">Botswana</option><option value="BR">Brésil</option><option value="BN">Brunéi Darussalam</option><option value="BG">Bulgarie</option><option value="BF">Burkina Faso</option><option value="BI">Burundi</option><option value="KH">Cambodge</option><option value="CM">Cameroun</option><option value="CA">Canada</option><option value="CV">Cap-Vert</option><option value="CL">Chili</option><option value="CN">Chine</option><option value="CY">Chypre</option><option value="CO">Colombie</option><option value="KM">Comores</option><option value="CG">Congo</option><option value="KP">Corée du Nord</option><option value="KR">Corée du Sud</option><option value="CR">Costa Rica</option><option value="CI">Côte d’Ivoire</option><option value="HR">Croatie</option><option value="CU">Cuba</option><option value="DK">Danemark</option><option value="DJ">Djibouti</option><option value="DM">Dominique</option><option value="EG">Égypte</option><option value="SV">El Salvador</option><option value="AE">Émirats arabes unis</option><option value="EC">Équateur</option><option value="ER">Érythrée</option><option value="ES">Espagne</option><option value="EE">Estonie</option><option value="VA">État de la Cité du Vatican</option><option value="FM">États fédérés de Micronésie</option><option value="US">États-Unis</option><option value="ET">Éthiopie</option><option value="FJ">Fidji</option><option value="FI">Finlande</option><option value="FR" selected="selected">France</option><option value="GA">Gabon</option><option value="GM">Gambie</option><option value="GE">Géorgie</option><option value="GS">Géorgie du Sud et les îles Sandwich du Sud</option><option value="GH">Ghana</option><option value="GI">Gibraltar</option><option value="GR">Grèce</option><option value="GD">Grenade</option><option value="GL">Groenland</option><option value="GP">Guadeloupe</option><option value="GU">Guam</option><option value="GT">Guatemala</option><option value="GG">Guernesey</option><option value="GN">Guinée</option><option value="GW">Guinée-Bissau</option><option value="GQ">Guinée équatoriale</option><option value="GY">Guyana</option><option value="GF">Guyane française</option><option value="HT">Haïti</option><option value="HN">Honduras</option><option value="HU">Hongrie</option><option value="BV">Île Bouvet</option><option value="CX">Île Christmas</option><option value="IM">Île de Man</option><option value="NF">Île Norfolk</option><option value="AX">Îles Åland</option><option value="KY">Îles Caïmans</option><option value="CC">Îles Cocos - Keeling</option><option value="CK">Îles Cook</option><option value="FO">Îles Féroé</option><option value="HM">Îles Heard et MacDonald</option><option value="FK">Îles Malouines</option><option value="MP">Îles Mariannes du Nord</option><option value="MH">Îles Marshall</option><option value="UM">Îles Mineures Éloignées des États-Unis</option><option value="SB">Îles Salomon</option><option value="TC">Îles Turks et Caïques</option><option value="VG">Îles Vierges britanniques</option><option value="VI">Îles Vierges des États-Unis</option><option value="IN">Inde</option><option value="ID">Indonésie</option><option value="IQ">Irak</option><option value="IR">Iran</option><option value="IE">Irlande</option><option value="IS">Islande</option><option value="IL">Israël</option><option value="IT">Italie</option><option value="JM">Jamaïque</option><option value="JP">Japon</option><option value="JE">Jersey</option><option value="JO">Jordanie</option><option value="KZ">Kazakhstan</option><option value="KE">Kenya</option><option value="KG">Kirghizistan</option><option value="KI">Kiribati</option><option value="KW">Koweït</option><option value="LA">Laos</option><option value="LS">Lesotho</option><option value="LV">Lettonie</option><option value="LB">Liban</option><option value="LR">Libéria</option><option value="LY">Libye</option><option value="LI">Liechtenstein</option><option value="LT">Lituanie</option><option value="LU">Luxembourg</option><option value="MK">Macédoine</option><option value="MG">Madagascar</option><option value="MY">Malaisie</option><option value="MW">Malawi</option><option value="MV">Maldives</option><option value="ML">Mali</option><option value="MT">Malte</option><option value="MA">Maroc</option><option value="MQ">Martinique</option><option value="MU">Maurice</option><option value="MR">Mauritanie</option><option value="YT">Mayotte</option><option value="MX">Mexique</option><option value="MD">Moldavie</option><option value="MC">Monaco</option><option value="MN">Mongolie</option><option value="ME">Monténégro</option><option value="MS">Montserrat</option><option value="MZ">Mozambique</option><option value="MM">Myanmar</option><option value="NA">Namibie</option><option value="NR">Nauru</option><option value="NP">Népal</option><option value="NI">Nicaragua</option><option value="NE">Niger</option><option value="NG">Nigéria</option><option value="NU">Niue</option><option value="NO">Norvège</option><option value="NC">Nouvelle-Calédonie</option><option value="NZ">Nouvelle-Zélande</option><option value="OM">Oman</option><option value="UG">Ouganda</option><option value="UZ">Ouzbékistan</option><option value="PK">Pakistan</option><option value="PW">Palaos</option><option value="PA">Panama</option><option value="PG">Papouasie-Nouvelle-Guinée</option><option value="PY">Paraguay</option><option value="NL">Pays-Bas</option><option value="PE">Pérou</option><option value="PH">Philippines</option><option value="PN">Pitcairn</option><option value="PL">Pologne</option><option value="PF">Polynésie française</option><option value="PR">Porto Rico</option><option value="PT">Portugal</option><option value="QA">Qatar</option><option value="HK">R.A.S. chinoise de Hong Kong</option><option value="MO">R.A.S. chinoise de Macao</option><option value="CF">République centrafricaine</option><option value="CD">République démocratique du Congo</option><option value="DO">République dominicaine</option><option value="CZ">République tchèque</option><option value="RE">Réunion</option><option value="RO">Roumanie</option><option value="GB">Royaume-Uni</option><option value="RU">Russie</option><option value="RW">Rwanda</option><option value="EH">Sahara occidental</option><option value="BL">Saint-Barthélémy</option><option value="SH">Sainte-Hélène</option><option value="LC">Sainte-Lucie</option><option value="KN">Saint-Kitts-et-Nevis</option><option value="SM">Saint-Marin</option><option value="MF">Saint-Martin</option><option value="PM">Saint-Pierre-et-Miquelon</option><option value="VC">Saint-Vincent-et-les Grenadines</option><option value="WS">Samoa</option><option value="AS">Samoa américaines</option><option value="ST">Sao Tomé-et-Principe</option><option value="SN">Sénégal</option><option value="RS">Serbie</option><option value="SC">Seychelles</option><option value="SL">Sierra Leone</option><option value="SG">Singapour</option><option value="SK">Slovaquie</option><option value="SI">Slovénie</option><option value="SO">Somalie</option><option value="SD">Soudan</option><option value="LK">Sri Lanka</option><option value="SE">Suède</option><option value="CH">Suisse</option><option value="SR">Suriname</option><option value="SJ">Svalbard et Île Jan Mayen</option><option value="SZ">Swaziland</option><option value="SY">Syrie</option><option value="TJ">Tadjikistan</option><option value="TW">Taïwan</option><option value="TZ">Tanzanie</option><option value="TD">Tchad</option><option value="TF">Terres australes françaises</option><option value="IO">Territoire britannique de l'océan Indien</option><option value="PS">Territoire palestinien</option><option value="TH">Thaïlande</option><option value="TL">Timor oriental</option><option value="TG">Togo</option><option value="TK">Tokelau</option><option value="TO">Tonga</option><option value="TT">Trinité-et-Tobago</option><option value="TN">Tunisie</option><option value="TM">Turkménistan</option><option value="TR">Turquie</option><option value="TV">Tuvalu</option><option value="UA">Ukraine</option><option value="UY">Uruguay</option><option value="VU">Vanuatu</option><option value="VE">Venezuela</option><option value="VN">Viêt Nam</option><option value="WF">Wallis-et-Futuna</option><option value="YE">Yémen</option><option value="ZM">Zambie</option><option value="ZW">Zimbabwe</option>
                                </select>
                                <!-- In case of error -> Display Message Start -->
                                <div style="display:none" id="advice-validate-select-country" class="validation-advice">Merci d'indiquer votre pays.</div>
                                <!-- In case of error -> Display Message End -->
                            </div>
                        </div>
                        <!-- Personal Informations -> Country Start -->
                    </li>
                </ul>
            </fieldset>
            <!--Catalog -> Personal Informations Block End-->                
        </div>
        <!--Contact Form -> Catalog Block End-->
        <!--Contact Form -> Quote Block Start-->
        <div class="fieldset quote-form" style="display:none">
            <!--Quote Page Title Start-->
            <h2>Groupe : Demande de devis</h2>
            <!--Quote Page Title End-->
            <ul class="form-list">
                <li class="fields group-informations">
                    <!--Catalog -> Personal Informations Group Name Start-->
                    <div class="field first ">
                        <label for="group_name" class="required"><em>*</em>Nom de groupe</label>
                        <div class="input-box">
                            <input id="group_name" name="group_name" title="Nom de groupe" class="required-desac" type="text">
                            <!-- In case of error -> Display Message Start -->
                            <div style="display:none" id="advice-required-entry-group_name" class="validation-advice">Merci d'indiquer le nom de votre groupe</div>
                            <!-- In case of error -> Display Message End -->
                        </div>
                    </div>
                    <!--Catalog -> Personal Informations Group Name End-->
                    <!--Catalog -> Personal Informations Number of persons Start-->
                    <div class="field">
                        <label for="person_nb" class="required"><em>*</em>Nombre de personne</label>
                        <div class="input-box">
                            <input id="person_nb" class="required-desac validate-digits validate-not-negative-number" name="person_nb" title="Person Nb" type="text">
                            <!-- In case of error -> Display Message Start -->
                            <div style="display:none" id="advice-required-entry-person_nb" class="validation-advice">Merci d'indiquer le noimbre de personnes composant le groupe.</div>
                            <!-- In case of error -> Display Message End -->
                        </div>
                    </div>
                    <!--Catalog -> Personal Informations Number of persons End-->
                </li>
                <li class="fields group-informations-des">
                    <!--Catalog -> Personal Informations Destination Start-->
                    <div class="field">
                        <label for="village" class="required"><em>*</em>Destination</label>
                        <div class="input-box">
                            <select id="village" name="village" title="Village" class="validate-select">
                                <option value="" selected="selected">select</option>
                                <option value="MONTGENEVRE">MONTGENEVRE</option>
                                <option value="MONTGENEVRE">MONTGENEVRE</option>
                                <option value="ORCIERES 1850">ORCIERES 1850</option>
                                <option value="ORCIERES 1850">ORCIERES 1850</option>
                                <option value="LE REVERDI">LE REVERDI</option>
                                <option value="LE REVERDI">LE REVERDI</option>
                                <option value="ARC 1800">ARC 1800</option>
                                <option value="ARC 1800">ARC 1800</option>
                                <option value="VARS">VARS</option>
                                <option value="VARS">VARS</option>
                                <option value="VALMOREL LA BELLE">VALMOREL LA BELLE</option>
                                <option value="VALMOREL LA BELLE">VALMOREL LA BELLE</option>
                                <option value="SUPERBAGNERES">SUPERBAGNERES</option>
                                <option value="SUPERBAGNERES">SUPERBAGNERES</option>
                                <option value="OZ EN OISANS">OZ EN OISANS</option>
                                <option value="OZ EN OISANS">OZ EN OISANS</option>
                                <option value="FLAINE">FLAINE</option>
                                <option value="FLAINE">FLAINE</option>
                                <option value="LES MENUIRES">LES MENUIRES</option>
                                <option value="LES MENUIRES">LES MENUIRES</option>
                                <option value="MORZINE">MORZINE</option>
                                <option value="MORZINE">MORZINE</option>
                                <option value="BOIS D'AMONT">BOIS D'AMONT</option>
                                <option value="BOIS D'AMONT">BOIS D'AMONT</option>
                                <option value="LA BAULE">LA BAULE</option>
                                <option value="LA BAULE">LA BAULE</option>
                            </select>
                        </div>
                    </div>
                    <!--Catalog -> Personal Informations Destination End-->
                    <!--Catalog -> Personal Informations Destination Start-->
                    <div class="field">
                        <label for="start_date" class="required"><em>*</em>Date</label>
                        <div class="input-box">
                            <input name="start_date" class="required-desac validate-date hasDatepicker" placeholder="JJ/MM/YYYY" title="Date" id="start-date" type="date">
                            <!-- In case of error -> Display Message Start -->
                            <div style="display:none" id="advice-validate-date-start-date" class="validation-advice">You must indicate a valid departure date.</div>
                            <div style="display:none" id="advice-required-entry-start-date" class="validation-advice">Merci d'indiquer votre date de départ.</div>
                            <!-- In case of error -> Display Message End -->
                        </div>
                    </div>
                    <!--Catalog -> Personal Informations Destination End-->
                </li>
                <li class="fields">
                    <label for="length" class="required"><em>*</em>Durée</label>
                    <div class="input-box">
                        <select name="length" title="Durée" id="length" class="required-desac validate-duration">
                            <option value="">Select</option>
                            <option value="2 jours">2 jours</option>
                            <option value="3 jours">3 jours</option>
                            <option value="1 week">1 semaine</option>
                            <option value="2 weeks">2 semaines</option>
                        </select>
                        <!-- In case of error -> Display Message Start -->
                        <div style="display:none" id="advice-required-entry-length" class="validation-advice">Merci d'indiquer la durée de votre séjour.</div>
                        <!-- In case of error -> Display Message End -->
                    </div>
                </li>
                <li class="fields">
                    <label for="msg_quote" class="required"><em>*</em>Message</label>
                    <div class="input-box">
                        <textarea name="msg_quote" class="required-desac validate-no-html-tags" title="Message" id="msg"></textarea>
                        <!-- In case of error -> Display Message Start -->
                        <div style="display:none" id="advice-required-entry-msg" class="validation-advice">Merci de saisir un message.</div>
                        <!-- In case of error -> Display Message End -->
                    </div>
                </li>
            </ul>
        </div>
        <!--Contact Form -> Quote Block Start-->
    </div>
    <!--Contact Form -> Spécific Blocks End-->
    <!--Contact Form -> Footer Blocks Start-->
    <div class="buttons-set">
        <input name="hideit" id="hideit" value="" style="display:none !important;" type="text">
        <button type="submit" title="Envoyer" class="button orange">
        <span><span>Envoyer</span></span>
        </button>
        <input name="msg-copy" value="1" checked="" type="checkbox">
        <label for="msg-copy">Je souhaite recevoir une copie du message envoyé</label>
        <!--Contact Form -> Mention Start-->
        <div class="mention-asterix">
            <div class="required">* Champs obligatoires</div>
            <div class="required">** Un des deux champ obligatoire.</div>
        </div>
        <!--Contact Form -> Mention End-->
    </div>
    <!--Contact Form -> Footer Blocks End-->
</form>
<!--Contact Javascript Start-->
    <script type="text/javascript">
        //<![CDATA[
            var contactForm = new VarienForm('form-validate', true);
            jQuery("#start-date").datepicker(
                { dateFormat: '<?php echo $this->__('mm/dd/yy'); ?>' }
            );
            Validation.add('validate-phoneStrict','',function(temp){
                var regex = /^0[0-9]([-. ]?\d{2}){4}[-. ]?$/;
                if(regex.test(temp)){
                    return true;
                }else{
                    return false;
                }
            });
        //]]>
    </script>
<!--Contact Javascript End-->

Styleguide 1.1
*/
/* -------------------------------------------- *
 * Vsc Contact From
 -----------------------------------------------*/
.page-subtitle_contact {
  font-size: 18px;
  margin: 25px 0px;
}

.contact-index-index h1 {
  border: 0;
}

.vsc-contact-form {
  max-width: 660px;
  padding: 0px;
  /* -------------------------------------------- *
   * Button - Float (Spécifique)
   ---------------------------------------------- */
  /* -------------------------------------------------------- *
   * Mention > Asterix - Multiple Implementations (Spécifique)
   ---------------------------------------------------------- */
}
.vsc-contact-form .fieldset {
  margin: 8px;
  /* ---------------------------------------------------- *
   * Inputs/Select - Implementation du Style (General)
   ------------------------------------------------------ */
  /* --------------------------------------------------- *
   * Inputs/Select -Implementation des Size (Spécifique)
   ----------------------------------------------------- */
  /* ------------------------------------------------------ *
   * Responsive Action -> fieldset -> Input Select 
   -------------------------------------------------------- */
  /* ------------------------------------------------------ *
   * Label - Implementaiton du Background/Color (Spécifique)
   -------------------------------------------------------- */
  /* -------------------------------------------- *
   * Field - Multiple implementations (General)
   -----------------------------------------------*/
  /* ------------------------------------------------------ *
   * Catalogue - Multiple Implementations (Spécifique)
   -------------------------------------------------------- */
}
.vsc-contact-form .fieldset input[type=email],
.vsc-contact-form .fieldset input[type=search],
.vsc-contact-form .fieldset input[type=number],
.vsc-contact-form .fieldset input[type=password],
.vsc-contact-form .fieldset input[type=tel],
.vsc-contact-form .fieldset input[type=text],
.vsc-contact-form .fieldset input[type=date],
.vsc-contact-form .fieldset select {
  height: 28px;
  line-height: 28px;
  border: 1px solid #D6D6D6;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 0px #DDD inset;
  background: none repeat scroll 0% 0% #F8F8F8;
  color: #384043;
  margin-top: 0px;
}
.vsc-contact-form .fieldset #firstname,
.vsc-contact-form .fieldset #lastname {
  width: 140px;
}
.vsc-contact-form .fieldset #gender {
  width: 100px;
  margin-top: 0;
}
.vsc-contact-form .fieldset #advice-validate-select-gender {
  width: 100px;
}
.vsc-contact-form .fieldset .field.tel,
.vsc-contact-form .fieldset .field.mobile_tel,
.vsc-contact-form .fieldset #telephone,
.vsc-contact-form .fieldset #telephone_port,
.vsc-contact-form .fieldset #street_5 {
  width: 180px;
}
.vsc-contact-form .fieldset #contact_purpose,
.vsc-contact-form .fieldset #length,
.vsc-contact-form .fieldset #support {
  max-width: 640px;
  width: 100%;
}
.vsc-contact-form .fieldset .field.email_add,
.vsc-contact-form .fieldset #email_address {
  width: 260px;
}
.vsc-contact-form .fieldset #msg {
  width: 640px;
  height: 200px;
}
.vsc-contact-form .fieldset #street_2 {
  width: 300px;
}
.vsc-contact-form .fieldset #street_3 {
  width: 145px;
}
.vsc-contact-form .fieldset .field.nb_street,
.vsc-contact-form .fieldset #street_4 {
  width: 55px;
}
.vsc-contact-form .fieldset #street_1 {
  width: 575px;
}
.vsc-contact-form .fieldset #zip {
  width: 85px;
}
.vsc-contact-form .fieldset #city,
.vsc-contact-form .fieldset #country {
  width: 175px;
}
.vsc-contact-form .fieldset.support-abn {
  /* ------------------------------------------------------ *
   * Responsive Action -> support-abn -> Input 
   -------------------------------------------------------- */
}
.vsc-contact-form .fieldset.support-abn li .control {
  padding: 3px 0px 3px 30px;
}
.vsc-contact-form .fieldset.support-abn label {
  background: none !Important;
  color: #6395C6;
  padding: 0;
}
.vsc-contact-form .fieldset.support-abn label[for="internal"], .vsc-contact-form .fieldset.support-abn label[for="external"] {
  text-transform: uppercase;
}
.vsc-contact-form .fieldset .field {
  display: inline-block;
  vertical-align: top;
  margin: 0px 2px 5px;
  /* ------------------------------------------------------- *
   * Field->Input - Implementation DisplayInline (Spécifique)
   --------------------------------------------------------- */
}
.vsc-contact-form .fieldset .field .first {
  margin-left: 0px;
}
.vsc-contact-form .fieldset .field .gender,
.vsc-contact-form .fieldset .field .customer-name {
  display: inline-block;
}
.vsc-contact-form .fieldset.catalog-form {
  /* ----------------------------------------------------------------- *
   * Catalogue > Catalogue exposé- Multiple Implementations (Spécifique)
   ------------------------------------------------------------------- */
  /* --------------------------------------------------------------- *
   * Catalogue > Adresse - Multiple Implementations (Spécifique)
   ----------------------------------------------------------------- */
}
.vsc-contact-form .fieldset.catalog-form > p {
  font-size: 16px;
  margin: 25px 12px;
}
.vsc-contact-form .fieldset.catalog-form #cat-view {
  margin: 12px;
}
.vsc-contact-form .fieldset.catalog-form #cat-view > legend {
  margin-bottom: 15px;
}
.vsc-contact-form .fieldset.catalog-form #cat-view .field {
  width: 48%;
  margin-left: 5px;
  margin-bottom: 15px;
}
.vsc-contact-form .fieldset.catalog-form #cat-view .field .cat-lab,
.vsc-contact-form .fieldset.catalog-form #cat-view .field .cat-img,
.vsc-contact-form .fieldset.catalog-form #cat-view .field .cat-box {
  display: inline-block;
}
.vsc-contact-form .fieldset.catalog-form #cat-view .field .cat-img img {
  width: 75px;
}
.vsc-contact-form .fieldset.catalog-form #cat-view .field .cat-box {
  width: 20px;
  vertical-align: top;
  line-height: 60px;
}
.vsc-contact-form .fieldset.catalog-form #cat-view .field .cat-box .validation-advice {
  line-height: 18px;
}
.vsc-contact-form .fieldset.catalog-form #cat-view .field .cat-lab {
  vertical-align: top;
  width: auto;
  text-align: center;
  margin-top: 12px;
}
.vsc-contact-form .fieldset.catalog-form #cat-view .field .cat-lab label {
  font-size: 15px;
  text-transform: uppercase;
  color: #6395C6;
}
.vsc-contact-form .fieldset.catalog-form > fieldset .wide.fields {
  margin-bottom: 20px;
}
.vsc-contact-form .button {
  float: left !Important;
}
.vsc-contact-form .group-informations .field,
.vsc-contact-form .institution-informations .field {
  display: inline-block;
  width: 45%;
}
.vsc-contact-form .mention-asterix {
  margin-top: 20px;
}
.vsc-contact-form .mention-asterix > div {
  float: none;
  color: #000;
  text-align: left;
}
.vsc-contact-form .fieldms {
  margin: 25px 0px;
}
.vsc-contact-form .fieldms h2 {
  color: #f26c00;
}

/* Magento - Calendar

Magento Calendar

<h1>Result</h1>

Markup: <!-- click on it -->
<input type="type" class="datepicker" />
<script>
  window.onload = function(){
    jQuery('.datepicker').datepicker(({ minDate: -20, maxDate: "+1M +10D" }));
  };
</script>

Styleguide 1.1
*/
/* ============================================ *
 * Calendar
 * ============================================ */
/*! jQuery UI - v1.10.4 - 2014-06-09
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.datepicker.css
* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
  display: none;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
}

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse;
}

.ui-helper-clearfix:after {
  clear: both;
}

.ui-helper-clearfix {
  min-height: 0;
  /* support: IE7 */
}

.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter: Alpha(Opacity=0);
}

.ui-front {
  z-index: 100;
}

/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
  cursor: default !important;
}

/* Icons
----------------------------------*/
/* states and images */
.ui-icon {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
}

/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ui-datepicker {
  width: 18em;
  padding: 0 15px 15px 15px;
  display: none;
}

.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 0;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 1.5em;
  height: 1.5em;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
  top: 1px;
}

.ui-datepicker .ui-datepicker-prev {
  left: 2px;
}

.ui-datepicker .ui-datepicker-next {
  right: 2px;
}

.ui-datepicker .ui-datepicker-prev-hover {
  left: 1px;
}

.ui-datepicker .ui-datepicker-next-hover {
  right: 1px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  top: 50%;
  margin-top: -8px;
}

.ui-datepicker .ui-datepicker-title {
  margin: 0;
  line-height: 1.5em;
  text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 49%;
}

span.ui-datepicker-month {
  text-transform: uppercase;
}

.ui-datepicker table {
  width: 100%;
  font-size: .9em;
  border-collapse: collapse;
  margin: 0 0 .4em;
}

.ui-datepicker th {
  padding: .7em .3em;
  text-align: center;
  font-weight: bold;
  border: 0;
}

.ui-datepicker td {
  border: 0;
  padding: 1px;
}

.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: .1em;
  text-align: center;
  text-decoration: none;
}

.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: .7em 0 0 0;
  padding: 0 .2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: .5em .2em .4em;
  cursor: pointer;
  padding: .2em .6em .3em .6em;
  width: auto;
  overflow: visible;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
  width: auto;
}

.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}

.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto .4em;
}

.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}

.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}

.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}

.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}

.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}

.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
  direction: rtl;
}

.ui-datepicker-rtl .ui-datepicker-prev {
  right: 2px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next {
  left: 2px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-prev:hover {
  right: 1px;
  left: auto;
}

.ui-datepicker-rtl .ui-datepicker-next:hover {
  left: 1px;
  right: auto;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane {
  clear: right;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button {
  float: left;
}

.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
  float: right;
}

.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}

/* VCS THEME*/
.ui-widget {
  background: #fff;
}

.ui-datepicker {
  padding: 5px;
  background: #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.ui-datepicker .ui-datepicker-title {
  color: #5a8aba;
  font-weight: bold;
}
.ui-datepicker .ui-datepicker-prev-hover {
  left: 2px;
}
.ui-datepicker .ui-datepicker-next-hover {
  right: 2px;
}
.ui-datepicker .ui-datepicker-prev span {
  background-position: -96px 0;
}
.ui-datepicker table {
  margin: 0;
}
.ui-datepicker th {
  padding: 1em 0;
  color: #5a8aba;
  font-weight: 400;
  font-size: 13px;
  border: none;
}
.ui-datepicker td {
  border: none;
  padding: 2px;
}

.ui-datepicker-header {
  border: none;
  background: transparent;
  font-weight: normal;
  font-size: 15px;
}
.ui-datepicker-header .ui-state-hover {
  background: transparent;
  border-color: transparent;
  cursor: pointer;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}

td .ui-state-default {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: #f46c00;
  text-align: center;
  padding: .5em;
  font-weight: 600;
  color: #fff;
  font-size: 14px;
}

.ui-state-disabled {
  opacity: 1;
}
.ui-state-disabled .ui-state-default {
  color: #5a8aba;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background: #f8f8fa;
  border: 1px solid #CCCCCC;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover,
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev {
  top: 0;
  border: none;
  color: #5a8aba;
  display: block;
}

.ui-datepicker .ui-datepicker-next span,
.ui-datepicker .ui-datepicker-prev span {
  background-image: url(https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/lib/jquery-ui/ui-icons_ffffff_256x240.png);
  background-position: 0 -238px;
  margin-top: 0;
  top: 0;
  font-weight: normal;
  height: 20px;
  width: 20px;
}

.ui-datepicker .ui-datepicker-next span {
  background-position: -103px -238px;
}

td .ui-state-active,
td .ui-state-hover {
  opacity: 0.8;
}

/* Table

Table

<h1>Result</h1>

Markup: <table class="{$modifiers}">
    <thead>
        <tr>
            <th>Label</th>
            <th>Label</th>
            <th>Label</th>
            <th>Label</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
        </tr>
        <tr class="even">
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
        </tr>
        <tr class="last odd">
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
            <td>Value</td>
        </tr>
    </tbody>
</table>

.data-table - data table
.zebra-table - zebra table

Styleguide 2
*/
.hide-th {
  text-indent: -9999px;
}

/* ============================================ *
 * Data Table
 * ============================================ */
.data-table {
  width: 100%;
}

.data-table td,
.data-table th {
  padding: 10px;
  vertical-align: top;
}

.data-table th {
  background: #F4F4F4;
  text-transform: uppercase;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  line-height: 1.4;
  white-space: nowrap;
}

.data-table thead th,
.data-table tbody td {
  border-bottom: 1px solid #C0C0C0;
}

.data-table tbody td,
.data-table tfoot td {
  font-family: Georgia, Times, "Times New Roman", serif;
}

.data-table tfoot tr {
  background: #F4F4F4;
}

.data-table tbody td .item-options {
  margin-left: 20px;
  margin-top: 10px;
}
.data-table tbody td .item-options dt:after {
  content: ':';
}

/* ============================================ *
 * Zebra-Stripe Table
 * ============================================ */
.zebra-table tr:first-child,
.zebra-table th:first-child {
  border-top: 1px solid #C0C0C0;
}
.zebra-table td,
.zebra-table th {
  border-bottom: 1px solid #C0C0C0;
  padding: 6px;
  background-color: transparent;
}
.zebra-table tr {
  background-color: #EEEDED;
}
.zebra-table tr:nth-child(odd) {
  background-color: #F8F7F5;
}

/* ============================================ *
 * Linearize Table
 * ============================================ */
.linearize-table .linearize-collapse {
  display: none;
}

@font-face {
  font-family: 'Open Sans';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Light-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Light-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Light-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Light-webfont.svg#open_sanslight") format("svg");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-LightItalic-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-LightItalic-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-LightItalic-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-LightItalic-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-LightItalic-webfont.svg#open_sanslight_italic") format("svg");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Open Sans';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Regular-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Regular-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Italic-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Italic-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Italic-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Italic-webfont.svg#open_sansitalic") format("svg");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Open Sans';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Semibold-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Semibold-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Semibold-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Semibold-webfont.svg#open_sanssemibold") format("svg");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-SemiboldItalic-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-SemiboldItalic-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-SemiboldItalic-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-SemiboldItalic-webfont.svg#open_sanssemibold_italic") format("svg");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: 'Open Sans';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Bold-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Bold-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Bold-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Bold-webfont.svg#open_sansbold") format("svg");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-BoldItalic-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-BoldItalic-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-BoldItalic-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic") format("svg");
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'Open Sans';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBold-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBold-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBold-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBold-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBold-webfont.svg#open_sansextrabold") format("svg");
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBoldItalic-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBoldItalic-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBoldItalic-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansextrabold_italic") format("svg");
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: 'Open Sans Condensed';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLight-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLight-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLight-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLight-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLight-webfont.svg#open_sanscondensed_light") format("svg");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans Condensed';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLightItalic-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLightItalic-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLightItalic-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLightItalic-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLightItalic-webfont.svg#open_sansCnLtIt") format("svg");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Open Sans Condensed';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondBold-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondBold-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondBold-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondBold-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondBold-webfont.svg#open_sans_condensedbold") format("svg");
  font-weight: bold;
  font-style: normal;
}
/* IE8 fix */
@font-face {
  font-family: 'Open Sans Light';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Light-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Light-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Light-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Light-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Light-webfont.svg#open_sanslight") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans Light Italic';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-LightItalic-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-LightItalic-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-LightItalic-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-LightItalic-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-LightItalic-webfont.svg#open_sanslight_italic") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans Regular';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Regular-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Regular-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Regular-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Regular-webfont.svg#open_sansregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans Italic';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Italic-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Italic-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Italic-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Italic-webfont.svg#open_sansitalic") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans Semibold';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Semibold-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Semibold-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Semibold-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Semibold-webfont.svg#open_sanssemibold") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans Semibold Italic';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-SemiboldItalic-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-SemiboldItalic-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-SemiboldItalic-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-SemiboldItalic-webfont.svg#open_sanssemibold_italic") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans Bold';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Bold-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Bold-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Bold-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-Bold-webfont.svg#open_sansbold") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans Bold Italic';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-BoldItalic-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-BoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-BoldItalic-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-BoldItalic-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-BoldItalic-webfont.svg#open_sansbold_italic") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans Extrabold';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBold-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBold-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBold-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBold-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBold-webfont.svg#open_sansextrabold") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans Extrabold Italic';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBoldItalic-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBoldItalic-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBoldItalic-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBoldItalic-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-ExtraBoldItalic-webfont.svg#open_sansextrabold_italic") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans Condensed Light';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLight-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLight-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLight-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLight-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLight-webfont.svg#open_sanscondensed_light") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans Condensed Light Italic';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLightItalic-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLightItalic-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLightItalic-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLightItalic-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondLightItalic-webfont.svg#open_sansCnLtIt") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Open Sans Condensed Bold';
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondBold-webfont.eot");
  src: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondBold-webfont.eot?#iefix") format("embedded-opentype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondBold-webfont.woff") format("woff"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondBold-webfont.ttf") format("truetype"), url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/fonts/OpenSans-CondBold-webfont.svg#open_sans_condensedbold") format("svg");
  font-weight: normal;
  font-style: normal;
}
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* ============================================ *
 * Global
 * ============================================ */
html,
body {
  height: 100%;
  -webkit-font-smoothing: antialiased;
}

.wrapper {
  min-width: 320px;
  min-height: 100%;
  margin: 0 auto;
  background: #FFFFFF;
}

.wrapper:after {
  content: '';
  display: table;
  clear: both;
}

iframe {
  border: none;
}

.popin {
  display: none;
  max-width: 700px;
  width: 80%;
  height: auto;
  padding: 10px;
  position: fixed;
  top: 20px;
  left: 0;
  right: 0;
  background: #fff;
  border: 3px solid #d6d6d6;
  margin: auto;
  z-index: 110;
}
.popin .close {
  color: #384043;
  cursor: pointer;
  text-align: right;
  display: block;
  padding-bottom: 15px;
}

.video-responsive {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}
.video-responsive iframe, .video-responsive object, .video-responsive embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.after_content_sidebar {
  clear: both;
  padding-top: 20px;
  display: block;
  overflow: hidden;
  margin-top: 20px;
  border-top: 1px dotted #000;
}

.main-container {
  border-top: 1px dotted #000;
  margin-top: 30px;
}
.main-container .main {
  padding-top: 0;
}

.cms-index-index .main-container {
  border: 0;
  margin-top: 0;
}
.cms-index-index .main-container .main {
  padding-top: 15px;
}

.book-result-index h1,
.checkout-cart-index h1,
.checkout-onepage-index h1,
.sponsor-index-index h1 {
  border-bottom: 0;
  font-weight: 300;
  margin-bottom: 5px;
}
.book-result-index .main-container .sidebar,
.checkout-cart-index .main-container .sidebar,
.checkout-onepage-index .main-container .sidebar,
.sponsor-index-index .main-container .sidebar {
  padding-top: 62px;
}
.book-result-index .main-container .sidebar #reservation-vertical,
.checkout-cart-index .main-container .sidebar #reservation-vertical,
.checkout-onepage-index .main-container .sidebar #reservation-vertical,
.sponsor-index-index .main-container .sidebar #reservation-vertical {
  margin-top: 0;
}

.checkout-cart-index #button-resa,
.checkout-onepage-index #button-resa,
.book-result-index #button-resa {
  display: none;
}

/* Header

Styleguide 4
*/
/* Header switcher

Header switcher
<h1>Result</h1>

Markup: <div class="header-language-background">
    <div class="header-language-container">
      <div class="pull-left">
          <div class="store-language-container">
              <div class="form-language">
                  <select id="select-language" title="Your Language">
                      <option value="" selected="selected">FR</option>
                      <option value="">UK</option>
                  </select>
              </div>
          </div>
          <span class="phone">0 825 802 805</span>
          <span class="phone-price">0,15 € TTC / min</span>
          <a class="call" href="#">Rappelez-moi gratuitement</a>
      </div>
      <div class="pull-right">
          <span class="newsletter"><a href="#">Newsletter</a></span>
          <div class="search-block">
              <div class="skip-links">
                  <a href="#header-search" class="skip-link skip-search">
                      <span class="icon"></span>
                      <span class="label">Search</span>
                  </a>
              </div>
              <div id="header-search" class="skip-content">
                  <!-- SEARCH -->
                  <form id="search_mini_form" action="" method="get">
                      <div class="input-box">
                          <label for="search">Search:</label>
                          <input id="search" type="search" name="q" value="Rechercher" class="input-text required-entry" maxlength="128" autocomplete="off"/>
                          <button type="submit" title="Search" class="button search-button"><span><span>Search</span></span></button>
                      </div>
                  </form>
              </div>
          </div>
          <p class="welcome-msg">
              <a href="#">Inscription / Connexion</a>
          </p>
      </div>
    </div>
</div>

Styleguide 4.1
*/
/* ============================================ *
 * Header
 * ============================================ */
.page-header {
  max-width: 1060px;
  margin: 0 auto;
  padding: 10px 30px 0 30px;
}

.page-header-container {
  position: relative;
}

.header-language-container,
.page-header {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}

/* ============================================ *
 * Language switcher + welcome message
 * ============================================ */
.header-language-background {
  padding: 0;
  background: #2e63a5;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlNjNhNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iIzVhOGFiYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzVhOGFiYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyZTYzYTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(left, #2e63a5 0%, #5a8aba 40%, #5a8aba 60%, #2e63a5 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #2e63a5), color-stop(40%, #5a8aba), color-stop(60%, #5a8aba), color-stop(100%, #2e63a5));
  background: -webkit-linear-gradient(left, #2e63a5 0%, #5a8aba 40%, #5a8aba 60%, #2e63a5 100%);
  background: -o-linear-gradient(left, #2e63a5 0%, #5a8aba 40%, #5a8aba 60%, #2e63a5 100%);
  background: -ms-linear-gradient(left, #2e63a5 0%, #5a8aba 40%, #5a8aba 60%, #2e63a5 100%);
  background: linear-gradient(to right, #2e63a5 0%, #5a8aba 40%, #5a8aba 60%, #2e63a5 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e63a5', endColorstr='#2e63a5',GradientType=1 );
  text-transform: uppercase;
  position: relative;
}
.header-language-background:before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  width: 100%;
  height: 8px;
}
.header-language-background .header-language-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  line-height: 33px;
}
.header-language-background .header-language-container .pull-left {
  float: left;
  width: 50%;
}
.header-language-background .header-language-container .pull-right {
  float: right;
  width: 45%;
  text-align: right;
}
.header-language-background .header-language-container .pull-right .skip-link {
  background: transparent;
  width: auto;
  height: auto;
  float: none;
}
.header-language-background .header-language-container .pull-right.logged {
  text-align: right;
}
.header-language-background .header-language-container .pull-right.logged .welcome-msg {
  background: none;
  padding: 0;
}
.header-language-background .header-language-container .pull-right.logged .welcome-msg .customer {
  text-transform: none;
  margin-left: 20px;
}
.header-language-background .header-language-container .pull-right.logged .welcome-msg a {
  background: #f46c00;
  padding: 2px 27px 0 10px;
  position: relative;
  display: inline-block;
  margin-left: 10px;
}
.header-language-background .header-language-container .pull-right.logged .welcome-msg a:after {
  content: '';
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 5px solid #fff;
  border-bottom: none;
  position: absolute;
  top: 16px;
  right: 10px;
}
.header-language-background .header-language-container .phone {
  padding-left: 30px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 -37px no-repeat;
  margin-right: 5px;
  font-size: 20px;
  font-weight: 300;
  position: relative;
  float: left;
}
.header-language-background .header-language-container .phone-price {
  color: #bcdfff;
  font-size: 10px;
  text-transform: none;
  padding-top: 6px;
  line-height: 28px;
  float: left;
  margin-right: 15px;
}
.header-language-background .header-language-container .call {
  font-size: 12px;
  padding: 0 18px 0 0;
  position: relative;
  float: left;
  margin-top: 6px;
  line-height: 28px;
  text-decoration: none;
}
.header-language-background .header-language-container .call:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #fff;
  border-right: none;
  border-left: 7px solid #fff;
  right: 5px;
  top: 11px;
}
.header-language-background .header-language-container .newsletter {
  padding: 1px 18px 0 10px;
  position: relative;
  border-left: 1px dotted #fff;
  border-right: 1px dotted #fff;
  margin-right: 0;
  display: inline-block;
}
.header-language-background .header-language-container .newsletter a {
  text-decoration: none;
}
.header-language-background .header-language-container .newsletter:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #fff;
  border-right: none;
  border-left: 7px solid #fff;
  right: 5px;
  top: 14px;
}
.header-language-background .header-language-container .heart {
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 -95px no-repeat;
  padding: 0 11px;
  position: relative;
  margin: 0 10px;
}
.header-language-background .header-language-container .heart span {
  position: absolute;
  height: 14px;
  width: 14px;
  line-height: 11px;
  background: #ff0000;
  font-size: 10px;
  top: -4px;
  right: -8px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
.header-language-background:after {
  content: '';
  display: table;
  clear: both;
}
.header-language-background .form-language,
.header-language-background .currency-switcher {
  float: left;
  margin: 0 10px;
}
.header-language-background .form-language {
  position: relative;
  width: 90px;
}
.header-language-background .form-language:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 4px solid #fff;
  border-bottom: none;
  border-top: 7px solid #fff;
  left: 21px;
  top: 13px;
}
.header-language-background .form-language select {
  background: none;
  border: 0;
  color: #fff;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  text-transform: uppercase;
  text-indent: 0.01px;
  text-overflow: '';
  font-size: 12px;
}
.header-language-background .form-language select option {
  padding-right: 7px;
  color: #000;
}
.header-language-background .form-language select:hover {
  cursor: pointer;
}
.header-language-background .form-language select:focus {
  outline: none;
}
.header-language-background .search-block {
  position: relative;
  /*display:inline-block;*/
  display: none;
  vertical-align: top;
  margin-left: 7px;
  width: 30%;
  text-align: left;
}
.header-language-background .welcome-msg {
  float: right;
  background: #f46c00;
  padding: 1px 10px 0;
}
.header-language-background .welcome-msg a {
  color: #fff;
  font-size: 12px;
  line-height: 32px;
  font-weight: 600;
  text-decoration: none;
}

.page-header-container .mobile-call {
  display: none;
  position: absolute;
  right: 27px;
  top: 42px;
}
.page-header-container .mobile-call a {
  display: block;
  height: 20px;
  width: 22px;
  text-indent: -9999px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0px -2493px no-repeat;
}
.page-header-container .store-language-container {
  float: right;
  max-width: 35%;
  padding: 13px 15px 10px 10px;
}
.page-header-container .store-language-container label {
  display: none;
}
.page-header-container .store-language-container select {
  max-width: 100%;
}

.header-language-background,
.header-language-background a {
  color: #fff;
}

.header-language-background a {
  text-decoration: underline;
}

/* ============================================ *
 * Logo
 * ============================================ */
/* Header Logo

Header Logo

<h1>Result</h1>

Markup: <a class="logo" href="#">
    <img src="http://placehold.it/272x90" alt="" class="large">
    <img src="http://placehold.it/453x44" alt="" class="small">
</a>

Styleguide 4.3
*/
.logo {
  display: block;
  float: left;
  width: 65%;
  min-width: 100px;
  min-height: 44px;
  text-align: center;
  padding: 10px 10px 10px 0;
}
.logo img {
  max-width: 100%;
}
.logo .small {
  display: block;
}
.logo .large {
  display: none;
}

.logo:hover {
  opacity: 0.8;
}

.logo {
  max-width: 300px;
  min-height: 90px;
}
.logo .small {
  display: none;
}
.logo .large {
  display: block;
}

/* ============================================ *
 * Skip Links
 * ============================================ */
.skip-links {
  clear: both;
  overflow: hidden;
  background: #fff;
}

.skip-links {
  border: 0;
}

/* -------------------------------------------- *
 * Skip - Link
 */
.skip-link {
  position: relative;
  float: left;
  width: 20%;
  height: 44px;
  background: #FFFFFF;
  color: #373737;
  line-height: 42px;
  text-align: center;
}

a.skip-link {
  text-decoration: none;
}

.skip-link:not(.skip-active):hover {
  opacity: 0.8;
}

.skip-link {
  width: 25%;
}

/* -------------------------------------------- *
 * Skip Link - Active
 */
/* -------------------------------------------- *
 * Skip Link - Icon
 */
.skip-link .icon, .header-minicart a .icon {
  display: inline-block;
  width: 20px;
  height: 23px;
  vertical-align: middle;
}

.skip-link.skip-nav .icon,
.skip-link.skip-cart:not(.no-count) .icon {
  margin-right: 3px;
}

.skip-link .icon, .header-minicart a .icon {
  margin-right: 3px;
}

/* -------------------------------------------- *
 * Skip Link - Label
 */
.skip-link .label {
  display: none;
}

.skip-link .label {
  display: inline;
}

/* ============================================ *
 * Skip Content
 * ============================================ */
.skip-content {
  display: none;
}

.skip-content.skip-active {
  display: block;
}

/* ============================================ *
 * Global Header Navigation
 * ============================================ */
.header-language-background .form-language {
  width: 6%;
}
.header-language-background .header-language-container .pull-right {
  width: 44%;
}

/* ============================================ *
 * Glass animation
 * ============================================ */
.glass-anim {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 9999;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}
.glass-anim img {
  position: absolute;
}
.glass-anim img:last-child {
  width: 100%;
}
.glass-anim .impact-1 {
  top: 0;
  left: 0;
  display: none;
  z-index: 9000;
}
.glass-anim .impact-2 {
  top: 0;
  left: 765px;
  display: none;
  z-index: 9000;
}
.glass-anim .desc {
  display: none;
  top: 50%;
  z-index: 9000;
  left: 50%;
  margin-left: -150px;
  margin-top: -150px;
  max-width: 300px;
}
.glass-anim canvas {
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
}

/* Header Nav

Header Nav

<h1>Result</h1>

Markup: <!-- Navigation -->
<div style="position:relative;">
    <div class="skip-links">
        <a href="#header-nav" class="skip-link skip-nav">
            <span class="icon"></span>
            <span class="label">Menu</span>
        </a>
    </div>
    <div id="header-nav" class="skip-content" style="position:relative;top:0;left:0;">
        <nav id="nav">
            <ol class="nav-primary">
                <li class="level0 nav-1 first parent">
                    <a href="#" class="level0 has-children">Nos destinations</a>
                    <ul class="level0">
                        <li class="level1 nav-1-1 first parent">
                            <a href="#" class="level1 has-children">Séjour à la Mer</a>
                            <ul class="level1">
                                <li class="level2 nav-1-1-1 first last">
                                    <a href="#" class="level2 ">Les ménuires</a>
                                </li>
                            </ul>
                        </li>
                        <li class="level1 nav-1-2 parent">
                            <a href="#" class="level1 has-children">Séjour Montagne</a>
                            <ul class="level1">
                                <li class="level2 nav-1-2-1 first">
                                    <a href="#" class="level2">Flaine</a>
                                </li>
                                <li class="level2 nav-1-2-3">
                                    <a href="#" class="level2 ">Flaine</a>
                                </li>
                                <li class="level2 nav-1-2-4">
                                    <a href="#" class="level2 ">Flaine</a>
                                </li>
                                <li class="level2 nav-1-2-5">
                                    <a href="#" class="level2 ">Flaine</a>
                                </li>
                                <li class="level2 nav-1-2-6">
                                    <a href="#" class="level2 ">Flaine</a>
                                </li>
                                <li class="level2 nav-1-2-7 last">
                                    <a href="#" class="level2 ">Flaine</a>
                                </li>
                            </ul>
                        </li>
                        <li class="level1 nav-1-3 parent">
                            <a href="#" class="level1 has-children">Partez comme vous êtes</a>
                            <ul class="level1">
                                <li class="level2 nav-1-3-1 first">
                                    <a href="#" class="level2">Flaine</a>
                                </li>
                                <li class="level2 nav-1-3-3">
                                    <a href="#" class="level2 ">Flaine</a>
                                </li>
                                <li class="level2 nav-1-3-4">
                                    <a href="#" class="level2 ">Flaine</a>
                                </li>
                            </ul>
                        </li>
                        <a href="#" class="button arrow">Tous les villages</a>
                    </ul>
                </li>
                <li class="level0 nav-2">
                    <a href="#" class="level0">Nos offres tout compris</a>
                </li>
                <li class="level0 nav-3 parent">
                    <a href="#" class="level0">Promotions</a>
                </li>
                <li class="level0 nav-4 last">
                    <a href="#" class="level0 ">Qui sommes-nous ?</a>
                </li>
            </ol>
        </nav>
    </div>
</div>

Styleguide 4.4
*/
/* ============================================ *
 * Nav - Skip Link
 * ============================================ */
.skip-nav {
  width: 40%;
}
.skip-nav:not(.skip-active):hover {
  text-decoration: none;
}

.skip-nav .label {
  display: inline;
}

.skip-nav .icon {
  background-position: -46px 4px;
}

.skip-nav {
  width: 25%;
}

.skip-nav {
  display: none;
}

/* ============================================ *
 * Nav - Skip Content
 * ============================================ */
#header-nav .mobile-account .button {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  display: block;
  font-size: 17px;
  font-weight: 600;
  padding: 20px 0;
  margin: 15px;
  white-space: normal;
}
#header-nav .mobile-account p {
  font-size: 16px;
  padding: 10px 10px 10px 45px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 14px -2481px no-repeat;
  font-weight: bold;
}
#header-nav .mobile-account p a[href^="tel"] {
  color: #373737;
}
#header-nav .mobile-account p span {
  font-size: 11px;
  margin-left: 5px;
  font-weight: normal;
}
#header-nav .mobile-footer {
  margin-top: 20px;
  background-color: #384043;
}
#header-nav .mobile-footer a {
  color: #fff;
  text-transform: uppercase;
  display: block;
  font-weight: bold;
  font-size: 17px;
  padding: 10px 0;
}
#header-nav .mobile-footer .footer-top {
  background-color: #6395c6;
  padding: 10px;
}
#header-nav .mobile-footer .footer-top > p {
  padding-bottom: 10px;
}
#header-nav .mobile-footer .footer-top a {
  padding: 0;
  display: none;
}
#header-nav .mobile-footer .footer-top a:last-child, #header-nav .mobile-footer .footer-top a.practical-info {
  display: block;
  line-height: 18px;
}
#header-nav .mobile-footer .footer-bottom {
  padding: 10px;
}
#header-nav .mobile-footer .footer-bottom a {
  font-weight: 300;
  font-size: 19px;
}
#header-nav .mobile-footer .footer-bottom li:nth-child(6), #header-nav .mobile-footer .footer-bottom li:nth-child(7) {
  display: none;
}
#header-nav .mobile-footer .footer-bottom .links {
  float: none;
  width: 100%;
}
#header-nav .mobile-footer .footer-bottom .links .social-media {
  margin: 20px 0 0 0;
  padding: 0;
}
#header-nav .mobile-footer .footer-bottom .links .social-media p {
  margin-top: 15px;
}
#header-nav .mobile-footer .footer-bottom .links .social-media p a {
  display: inline;
  font-size: 34px;
}

#header-nav {
  display: block;
  /* Force visibility */
  position: absolute;
  top: 30px;
  left: 200px;
}

/* ============================================ *
 * Nav Primary
 * ============================================ */
.nav-primary {
  display: block;
  margin-top: 15px;
}

/* ============================================ *
 * General Navigation Styles
 * ============================================ */
.nav-primary {
  position: relative;
}
.nav-primary a {
  text-decoration: none;
  position: relative;
  display: block;
  color: #515151;
  line-height: 30px;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  text-transform: uppercase;
}
.nav-primary li.level0 a {
  font-size: 15px;
  line-height: 30px;
  font-weight: 600;
}
.nav-primary li.level0 li.col ul {
  display: block;
}

.nav-primary .menu-active > ul.level0,
.nav-primary li.level0 li.sub-menu-active > ul {
  display: block;
}

.nav-primary li.level0 > a {
  text-transform: uppercase;
}

/* ============================================ *
 * Small Viewports - Accordion Style Menu
 * ============================================ */
/* ============================================ *
 * Large Viewports - Dropdown Menu
 * ============================================ */
.nav-primary {
  /* Default styles for 1+ drop-down menus */
  /* Level 2+ */
  /* Class for js to add briefly to evaluate element positioning. */
  /* Correct menus that will hang off the page (class added by js) */
  /* Level 1+ */
  /* col */
  /* third col */
}
.nav-primary li.level0 ul.level0 {
  background: #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 20px 15px 25px 15px;
  margin-top: 10px;
}
.nav-primary a.level0 {
  padding: 0 15px;
}
.nav-primary a.level0.active {
  color: #5a8aba;
}
.nav-primary li.level0,
.nav-primary a.level0 {
  display: inline-block;
  line-height: 25px;
  padding-bottom: 15px;
  position: relative;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.nav-primary li.level0 > a {
  position: relative;
}
.nav-primary li.level0 > a:after {
  position: absolute;
  content: '';
  right: 0;
  border-right: 1px dotted #d2421f;
  height: 18px;
  width: 1px;
  top: 7px;
  display: block;
}
.nav-primary li.level0.last > a:after {
  display: none;
}
.nav-primary li:last-child > a {
  border-bottom: none;
}
.nav-primary a:hover,
.nav-primary li:hover > a {
  color: #5a8aba;
}
.nav-primary .menu-active,
.nav-primary li.level0:hover {
  z-index: 200;
}
.nav-primary .level0:hover a.level0.has-children {
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") center -360px no-repeat;
}
.nav-primary ul.level0 {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  -moz-column-rule: 1px dotted black;
  -webkit-column-rule: 1px dotted black;
  column-rule: 1px dotted black;
  -moz-column-gap: 40px;
  -webkit-column-gap: 40px;
  column-gap: 40px;
  min-width: 520px;
}
.nav-primary .no-column ul.level0 {
  -moz-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1;
  min-width: 290px;
}
.nav-primary li.level0 ul {
  position: absolute;
  left: 0;
  top: 30px;
  /* Height of ".nav-primary a.level0" */
  z-index: 10;
  padding-right: 10px;
  display: none;
  /* Hide until displayed. */
}
.nav-primary li.level0 ul a.arrow {
  position: absolute;
  bottom: 20px;
  left: 15px;
  font-size: 14px;
  color: #fff;
  font-weight: normal;
  text-transform: none;
  line-height: 21px;
  background: #5a8aba;
}
.nav-primary li.level0 ul a.arrow:after {
  top: 8px;
}
.nav-primary li.level1 a.has-children + ul {
  position: relative;
  display: block;
  top: 0;
  left: 0;
}
.nav-primary li.level0 li.parent > a.has-children {
  color: #5a8aba;
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  padding: 6px 0;
}
.nav-primary li.level1 {
  min-width: 255px;
}
.nav-primary li a.level2 {
  font-weight: 700;
  font-size: 13px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") no-repeat left -2051px;
  line-height: 16px;
  padding: 5px 10px;
}
.nav-primary li a.level2:hover {
  color: #f46c00;
}
.nav-primary li a.level2.has-children {
  background: none;
}
.nav-primary li a.level2 span {
  font-size: 11px;
}
.nav-primary li a.level3 {
  font-weight: 700;
  font-size: 13px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") no-repeat left -2051px;
  line-height: 16px;
  padding: 5px 10px;
}
.nav-primary li a.level3:hover {
  color: #f46c00;
}
.nav-primary li.level0 ul.level0.position-test {
  display: block;
}
.nav-primary li.level0 ul.level0.spill {
  right: 0;
  left: auto;
}
.nav-primary li.level0 li.parent > a {
  position: relative;
}
.nav-primary li.col ul {
  left: 266.66667px;
  border-left: 1px solid #4f5b5f;
  border-right: 1px solid #4f5b5f;
  width: 266.66667px;
}
.nav-primary li.col.third-col ul {
  left: 533.33333px;
  border: 0;
  text-align: right;
}
.nav-primary li.col.third-col ul img {
  text-align: center;
  display: inline;
  margin-bottom: 8px;
}
.nav-primary.nav-primary-cms li.level0 ul.level1 {
  position: relative;
  top: 0;
  display: block;
}
.nav-primary.nav-primary-cms li.level1 a.parent {
  color: #5a8aba;
  font-weight: 400;
  font-size: 16px;
  line-height: 18px;
  padding: 6px 0;
}

.no-touch li:hover > ul {
  display: block;
  /* Force display */
}

/* Header search

Header search

<h1>Result</h1>

Markup: <!-- adding a div in relative for the exemple -->
<div style="position:relative;background-color:#5a8aba;display:inline-block;width:20%;padding:10px 20px;line-height:34px;">
    <div class="skip-links">
        <a href="#header-search" class="skip-link skip-search">
            <span class="icon"></span>
            <span class="label">Search</span>
        </a>
    </div>
    <div id="header-search" class="skip-content">
        <!-- SEARCH -->
        <form id="search_mini_form" action="" method="get">
            <div class="input-box">
                <label for="search">Search:</label>
                <input id="search" type="search" name="q" value="Rechercher" class="input-text required-entry" maxlength="128" autocomplete="off"/>
                <button type="submit" title="Search" class="button search-button"><span><span>Search</span></span></button>
            </div>
            <div id="search_autocomplete" class="search-autocomplete">
                <ul>
                    <li style="display:none" class=""></li>
                    <li title="tori" class="even first selected">
                        <span class="amount">1</span>tori
                    </li>
                    <li title="Tori Tank" class="odd last">
                        <span class="amount">1</span>Tori Tank</li>
                    </ul>
            </div>
        </form>
    </div>
</div>

Styleguide 4.5
*/
/* ============================================ *
 * Search - Skip Link
 * ============================================ */
.skip-search:not(.skip-active):hover .icon {
  background-position: -46px -146px;
}
.skip-search .icon {
  background-position: 4px -146px;
}

.skip-search {
  display: none;
}

/* ============================================ *
 * Search - Skip Content
 * ============================================ */
#header-search {
  padding: 20px;
}

#header-search {
  display: block;
  padding: 0;
}

/* ============================================ *
 * Search Input
 * ============================================ */
#search_mini_form .input-box {
  position: relative;
  padding-top: 0;
  width: 93%;
}
#search_mini_form .input-box input {
  color: #fff;
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0.25);
  border: 0;
  font-size: 11px;
  line-height: 1em;
  border: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.logged #search_mini_form .input-box {
  width: 100%;
}

#search_mini_form label {
  display: none;
}

#search {
  width: 90%;
  height: 24px;
  padding-right: 10px;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}

#search_mini_form .search-button {
  text-indent: -9999px;
  position: absolute;
  top: 0;
  right: 0;
  height: 8px;
  width: 8px;
  border: 0;
  background: none;
}

#search_mini_form .search-button:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-top: -8px;
  margin-left: 5px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 -137px no-repeat;
}

#search_mini_form .search-button:hover:before {
  opacity: 0.8;
}

/* Header account

Header account (click on it)

<h1>Result</h1>

Markup: <!-- adding a div in relative for the exemple -->
<div style="position:relative;height:200px;">
  <div class="skip-links">
      <a href="#header-account" class="skip-link skip-account skip-active">
          <span class="icon"></span>
          <span class="label">Account</span>
      </a>
  </div>
  <!-- ACCOUNT -->
  <div id="header-account" class="skip-content skip-active">
      <div class="links">
          <ul>
              <li class="first"><a href="http://demo.magentocommerce.com/customer/account/" title="My Account">My Account</a></li>
              <li><a href="#" title="My Wishlist">My Wishlist</a></li>
              <li><a href="#" title="My Cart (1 item)" class="top-link-cart">My Cart (1 item)</a></li>
              <li><a href="#" title="Checkout" class="top-link-checkout">Checkout</a></li>
              <li><a href="#" title="Register">Register</a></li>
              <li class="last"><a href="#" title="Log In">Log In</a></li>
         </ul>
     </div>
  </div>
</div>

Styleguide 4.6
*/
/* ============================================ *
 * Header - Account
 * ============================================ */
/* -------------------------------------------- *
 * Skip Link - Account
 */
.skip-account:not(.skip-active):hover .icon {
  background-position: -46px -44px;
}
.skip-account .icon {
  background-position: 4px -44px;
}

#header-account.skip-active {
  background: #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  display: block;
  position: absolute;
  z-index: 200;
  top: 40px;
  right: 115px;
  width: 200px;
}

#header-account a {
  display: block;
  padding: 5px 10px;
  color: #373737;
  line-height: 2;
}

#header-account a:hover {
  color: #f46c00;
}

/* -------------------------------------------- *
 * Account Links
 */
#header-account {
  padding: 5px 0;
}

#header-account.skip-active {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: 100% !important;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
}
#header-account.skip-active .youama-login-window {
  position: fixed;
  left: 50%;
  margin-left: -288px;
  top: 25%;
  background: #fff;
  width: 576px;
  border: 2px solid #f4e1c0;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
#header-account.skip-active .youama-window-outside .close {
  font-size: 20px;
  font-weight: 700;
  color: #CF5050;
  width: 35px;
  top: -20px;
  right: -20px;
}
#header-account.skip-active .youama-window-title > div {
  color: #5a8aba;
  font-size: 24px;
}
#header-account.skip-active .youama-window-box {
  margin-top: 0;
}
#header-account.skip-active .youama-window-box .youama-window-content {
  overflow: hidden;
  display: block;
}
#header-account.skip-active .youama-window-box .box-contents-button {
  margin-top: 10px;
}
#header-account.skip-active .youama-window-box .box-contents-button button {
  font-size: 14px;
  font-weight: 700;
}
#header-account.skip-active .youama-window-box .youama-forgot-password {
  display: inline-block;
  margin-top: 0;
}
#header-account.skip-active .youama-window-box .youama-forgot-password a {
  line-height: 28px;
  color: #f46c00;
  text-decoration: underline;
}
#header-account.skip-active .youama-window-box .input-fly {
  width: 50%;
  float: left;
}
#header-account.skip-active .youama-window-box .input-fly label {
  font-size: 12px;
}
#header-account.skip-active .youama-window-box .input-fly input[type="text"],
#header-account.skip-active .youama-window-box .input-fly input[type="password"] {
  font-size: 13px;
  height: 32px;
  border: 1px solid #c2c2c2;
  width: 95%;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #f8f8f8;
}
#header-account.skip-active .youama-window-box .youama-fb-connexion {
  display: block;
  margin-top: 20px;
}
#header-account.skip-active .youama-window-box .youama-fb-connexion a {
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/fb-connexion.jpg") no-repeat center center;
  width: 239px;
  height: 36px;
  overflow: hidden;
  display: inline-block;
  text-indent: 241px;
}
#header-account.skip-active .youama-window-box .youama-fb-connexion a img {
  display: inline;
}
#header-account.skip-active .youama-window-box.register {
  border-top: 1px dotted #000;
  margin-top: 25px;
  padding-top: 20px;
  padding-bottom: 10px;
}
#header-account.skip-active .youama-window-box.register .box-contents-button a {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #f46c00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  line-height: 19px;
  padding: 7px 15px;
  display: inline-block;
  text-transform: uppercase;
}
#header-account.skip-active .youama-window-box.register .box-contents-button a:hover {
  background: #d2421f;
}
#header-account.skip-active.logged {
  position: absolute;
  right: -100px;
  top: -10px;
  background: #fff;
  border: 2px solid #d6d6d6;
  border-top: 0;
  max-width: 150px;
  left: auto;
  height: auto;
  border-radius: 0 0 5px 5px;
}
#header-account.skip-active.logged ul {
  padding: 0 10px;
}
#header-account.skip-active.logged a {
  line-height: 1.5;
  padding: 2px 10px;
  border-top: 1px dotted #d6d6d6;
}
#header-account.skip-active.logged li.first a {
  border: 0;
}

.youama-login-window.maintenance .youama-showhideme {
  width: 100% !important;
  float: none !important;
}
.youama-login-window.maintenance p {
  margin-bottom: 20px;
}
.youama-login-window.maintenance #youama-email {
  width: 60% !important;
  margin-left: 10px;
}
.youama-login-window.maintenance .optin-maintenance-wrapper {
  margin-top: 15px;
}
.youama-login-window.maintenance .optin-maintenance-wrapper input {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.youama-login-window.maintenance .msg-maintenance {
  margin-top: 20px;
}
.youama-login-window.maintenance .msg-maintenance > div {
  display: none;
  font-weight: 600;
  color: #f46c00;
}

#header-account a {
  position: relative;
  display: block;
  padding: 0 10px;
  line-height: 33px;
  text-align: center;
}

#header-account a:hover {
  color: #f46c00;
}

/* Header cart

Header cart (click on it)

<h1>Result</h1>

Markup: <!-- adding a div in relative for the exemple -->
<div style="position:relative;height:200px;">
  <div class="header-minicart">
        <a href="#header-cart" class="skip-link skip-cart no-count">
           <span class="icon"></span>
            <span class="label">Cart</span>
            <span class="count">0</span>
        </a>
        <div id="header-cart" class="block block-cart skip-content">
            <!-- adding display block to show message -->
            <div id="minicart-error-message" class="minicart-message" style="display:block;">Error message</div>
            <!-- adding display block to show message -->
            <div id="minicart-success-message" class="minicart-message" style="display:block;">Success message</div>
            <div class="minicart-wrapper">
               <p class="block-subtitle">
                   Recently added item(s)
                   <a class="close skip-link-close" href="#" title="Close">×</a>
               </p>
               <p class="empty">You have no items in your shopping cart.</p>
               <div>
                    <ul id="cart-sidebar" class="mini-products-list">
                      <li class="item last odd">
                        <a href="#" title="Chelsea Tee" class="product-image">
                          <img src="http://placehold.it/50x50" width="50" height="50" alt="Chelsea Tee">
                        </a>
                        <div class="product-details">
                          <p class="product-name">
                            <a href="#">Chelsea Tee</a>
                          </p>
                          <table class="info-wrapper">
                            <tbody>
                              <tr>
                                <th>Price</th>
                                <td>
                                  <span class="price">$75.00</span>
                                </td>
                              </tr>
                              <tr class="qty-wrapper">
                                <th>Qty</th>
                                <td>
                                  <input id="qinput-4746" data-link="#" data-item-id="#" class="qty cart-item-quantity" name="" value="1">
                                  <button id="qbutton-4746" data-item-id="4746" disabled="disabled" data-update="" class="button quantity-button">ok</button>
                                </td>
                              </tr>
                            </tbody>
                          </table>
                          <a href="#" title="Edit item" class="btn-edit">Edit item</a>
                          |
                          <a href="#" title="Remove This Item" data-confirm="Are you sure you would like to remove this item from the shopping cart?" class="remove">Remove Item</a>
                          <div class="truncated">
                            <div class="truncated_full_value">
                              <dl class="item-options">
                                <dt>Color</dt>
                                <dd>Black</dd>
                                <dt>Size</dt>
                                <dd>S</dd>
                              </dl>
                            </div>
                            <a href="#" onclick="return false;" class="details">Details</a>
                          </div>
                        </div>
                      </li>
                        </ul>
                  </div>
                  <script type="text/javascript">
                    window.onload = function() {
                      $j('document').ready(function() {
                          var minicartOptions  = {
                              formKey: ""
                          }
                          var Mini = new Minicart(minicartOptions);
                          Mini.init();
                      });
                    };
                  </script>
                  <div id="minicart-widgets"></div>
                  <div class="block-content">
                    <p class="subtotal">
                      <span class="label">Cart Subtotal:</span> <span class="price">$75.00</span>
                    </p>
                  </div>
                  <div class="minicart-actions">
                    <a class="cart-link" href="#">View Shopping Cart</a>
                    <ul class="checkout-types minicart">
                      <li>
                        <a title="Checkout" class="button checkout-button" href="#">Checkout</a>
                      </li>
                    </ul>
                  </div> 
            </div>
        </div>
    </div>
</div>

Styleguide 4.7
*/
/* ============================================ *
 * Header - Cart
 * ============================================ */
/* -------------------------------------------- *
 * Skip Link - Cart
 */
.skip-cart, .header-minicart a {
  right: -100px;
}
.skip-cart:not(.skip-active):hover .icon, .header-minicart a:not(.skip-active):hover .icon {
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 -1574px no-repeat;
}
.skip-cart .icon, .header-minicart a .icon {
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 -1574px no-repeat;
}

.skip-cart, .header-minicart a {
  position: absolute;
  top: 0;
  width: auto;
  padding: 0 10px;
}

#header-cart.skip-active {
  background: #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  display: block;
  position: absolute;
  z-index: 200;
  top: 40px;
  right: -100px;
  width: 320px;
  background: white;
}

.current-resa {
  padding: 0;
}

.skip-cart, .header-minicart a {
  right: -20px;
}

/* -------------------------------------------- *
 * Skip Cart Notifier
 */
.skip-cart .count {
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  display: inline-block;
  top: -6px;
  position: relative;
  z-index: 5;
  width: 22px;
  height: 22px;
  background: rgba(244, 108, 0, 0.9);
  color: #FFFFFF;
  font-size: 10px;
  line-height: 22px;
  text-align: center;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}

.skip-link.skip-active .count {
  color: white;
}

.skip-cart.no-count .count {
  display: none;
}

.skip-cart, .header-minicart a {
  color: #f46c00;
  text-transform: uppercase;
}
.skip-cart:hover, .header-minicart a:hover {
  text-decoration: none;
}
.skip-cart .count, .header-minicart a .count {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  color: #f46c00;
  position: static;
  background: none;
  margin-left: 0px;
  font-size: 13px;
}
.skip-cart .count:before, .header-minicart a .count:before {
  content: '(';
}
.skip-cart .count:after, .header-minicart a .count:after {
  content: ')';
}

.skip-cart .count.empty {
  display: none;
}

/* -------------------------------------------- *
 * Mini Cart - Empty
 */
.cart-menu .empty {
  padding: 20px;
  text-align: center;
}

/* -------------------------------------------- *
 * Mini Cart - Full
 */
/* Actions */
.cart-menu .actions {
  overflow: hidden;
  padding: 15px;
}

.cart-menu .actions .button {
  float: left;
  width: 48%;
}

.cart-menu .actions .button + .button {
  margin-left: 4%;
}

/* Subtotal */
.cart-menu .subtotal {
  padding: 0 15px 15px;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 24px;
  line-height: 1.2;
}

/* List */
.mini-cart-list {
  margin-bottom: 5px;
}

.mini-cart-list li {
  position: relative;
  min-height: 90px;
  padding: 15px 15px 15px 90px;
  border-top: 1px solid #CCCCCC;
  font-size: 12px;
  line-height: 1.35;
}

.mini-cart-list .product-name {
  display: inline-block;
}

.mini-cart-list .product-image {
  position: absolute;
  left: 15px;
  top: 15px;
}

.mini-cart-list .product-image img {
  width: 60px;
  height: 60px;
}

.mini-cart-list .has-options {
  margin-bottom: 0;
  color: #a2a2a2;
  font-size: 11px;
}

/* Too full - additional items will be shown in cart */
.cart-menu .last-added {
  padding: 10px 15px 15px;
  border-top: 1px solid #CCCCCC;
  font-size: 12px;
}

/* Footer

Footer

Styleguide 3
*/
/* ============================================ *
 * Footer
 * ============================================ */
/* -------------------------------------------- *
 * Footer
 */
/* Footer Useful Link

Useful Link

<h1>Result</h1>

Markup: <div class="footer-container">
      <div class="footer">
          <div class="footer-inner">
              <div id="footer-useful-links">
                  <a href="#">Cgos</a>
                  <a href="#">Cnas</a>
                  <a href="#">Parrainage</a>
                  <a href="#">Offre et promotions</a>
                  <a href="#">La boutique</a>
                  <a href="#">Groupes et collectivités</a>
                  <a href="#">Vcs pratique</a>
              </div>
          </div>
      </div>
      <div class="footer"></div>
</div>

Styleguide 3.1
*/
/* Footer blocks

Footer blocks

<h1>Result</h1>

Markup: <div class="footer-container">
    <div class="footer"></div>
    <div class="footer">
        <div class="footer-inner">
           <div class="links">
                <div class="block-title">
                    <strong><span>Company</span></strong>
                </div>
                <ul>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                    <li><a href="#">Customer Service</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

Styleguide 3.2
*/
/* Footer social

Footer social

<h1>Result</h1>

Markup: <div class="footer-container">
    <div class="footer"></div>
    <div class="footer">
        <div class="footer-inner">
            <div class="links social-media">
                <ul>
                    <li><a href="#" class="facebook">Facebook</a></li>
                    <li><a href="#" class="twitter">Twitter</a></li>
                    <li><a href="#" class="youtube">YouTube</a></li>
                </ul>
                <p><a href="#">Le blog</a></p>
            </div>
        </div>
    </div>
</div>

Styleguide 3.3
*/
/* Footer Copyright

Footer Copyright

<h1>Result</h1>

Markup: <div class="footer-container">
    <div class="footer"></div>
    <div class="footer">
        <address>
            &copy; Villages Clubs du soleil 2014
            <a href="#">Mentions légales</a>
            <a href="#">Crédits</a>
            <a href="#">Partenaires</a>
        </address>
    </div>
</div>

Styleguide 3.2
*/
/* Footer subscribe

Footer subscribe

<h1>Result</h1>

Markup: <div class="footer-container">
    <div class="footer"></div>
    <div class="footer">
        <div class="footer-inner">
            <div class="block block-subscribe">
                <div class="block-title">
                    <strong><span>Newsletter</span></strong>
                </div>
                <form action="#" method="post" id="newsletter-validate-detail">
                    <div class="block-content">
                        <div class="form-subscribe-header">
                            <label for="newsletter">Sign Up for Our Newsletter:</label>
                        </div>
                        <div class="input-box">
                          <input type="email" autocapitalize="off" autocorrect="off" spellcheck="false" name="email" id="newsletter" title="Sign up for our newsletter" class="input-text required-entry validate-email">
                        </div>
                        <div class="actions">
                            <button type="submit" title="Subscribe" class="button"><span><span>Subscribe</span></span></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Styleguide 3.5
*/
.footer,
.footer button {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}

.footer-container .footer:first-child {
  background-color: #6395c6;
  margin-bottom: 10px;
}

#footer-useful-links {
  padding-top: 30px;
  padding-bottom: 10px;
  text-align: center;
}
#footer-useful-links a {
  color: #fff;
  display: inline-block;
  text-transform: uppercase;
  font-weight: bold;
  padding-left: 5.18868%;
  padding-bottom: 20px;
}
#footer-useful-links a:first-child {
  padding-left: 0;
}

.footer {
  clear: both;
  width: 100%;
  margin: 0 auto;
  /* -------------------------------------------- *
   * Others links
   */
  /* -------------------------------------------- *
   * Social icons
   */
}
.footer .block-title {
  border: 0;
  padding: 0;
  margin-bottom: 0;
  margin-top: 30px;
}
.footer .block-title a {
  margin-bottom: 10px;
  display: block;
}
.footer .block-title strong {
  font-weight: 300;
  font-size: 17px;
  color: #fff;
  margin-bottom: 0;
  padding-bottom: 0;
}
.footer .footer-inner.last {
  position: relative;
}
.footer .footer-inner.last:before {
  content: '';
  border-top: 1px dotted #6a797f;
  width: calc(100% - 60px);
  height: 1px;
  left: 50%;
  top: 0;
  position: absolute;
  transform: translateX(-50%);
}
.footer .links {
  float: left;
  width: 33%;
  padding: 0 30px 0 0;
  margin-bottom: 30px;
}
.footer .links li {
  word-break: break-all;
  line-height: 1.4;
  padding: 4px 0 1px 8px;
  font-weight: bold;
}
.footer .links li a {
  font-size: 10px;
}
.footer .links a {
  color: #bcdfff;
}
.footer .links a:hover {
  color: #f46c00;
}
.footer .links.two-col-list {
  width: 28.30189%;
}
.footer .links.two-col-list li {
  display: inline-block;
  width: 49%;
}
.footer .links:first-child {
  margin-left: 8%;
}
.footer .links:last-child {
  width: 25%;
}
.footer .block-subscribe {
  float: right;
  width: 320px;
  margin-bottom: 30px;
}
.footer .links,
.footer .block-subscribe {
  text-transform: uppercase;
  font-size: 11px;
}
.footer .form-subscribe-header {
  display: none;
}
.footer .links.others {
  margin-top: 15px;
}
.footer .links.others li {
  padding: 0;
}
.footer .links.others li a {
  font-weight: 300;
  font-size: 17px;
  color: #fff;
  margin-bottom: 0;
  padding-bottom: 0;
  margin-top: 15px;
  display: block;
}
.footer .links.others li:first-child a {
  margin-top: 0;
}
.footer .links.others-social {
  margin-top: 15px;
  padding-right: 0;
}
.footer .links.others-social .others {
  margin-bottom: 40px;
  margin-top: 15px;
}
.footer .links.others-social .others a {
  color: #fff;
  font-weight: 300;
  font-size: 14px;
}
.footer .links.others-social .social-media li {
  display: inline-block;
  padding: 0;
  margin-bottom: 10px;
}
.footer .links.others-social .social-media li a {
  background-image: url(https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/social_icons.png);
  background-repeat: no-repeat;
  width: 38px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 3px;
  text-indent: -9999px;
}
.footer .links.others-social .social-media p {
  margin-top: 30px;
}
.footer .links.others-social .social-media p a {
  font-size: 40px;
  color: #fff;
  position: relative;
  font-family: "Open Sans Condensed", Verdana, Arial, sans-serif;
  line-height: 20px;
  display: inline-block;
}
.footer .links.others-social .social-media p a:after {
  content: '';
  position: absolute;
  right: -20px;
  top: -12px;
  height: 25px;
  width: 18px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 0 no-repeat;
}
.footer .links.others-social .social-media p a span {
  color: #bcdfff;
  font-size: 11px;
  font-weight: 700;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}
.footer .links.social-media li {
  display: inline-block;
  padding: 0;
  margin-bottom: 10px;
}
.footer .links.social-media li a {
  background-image: url(https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/social_icons.png);
  background-repeat: no-repeat;
  width: 38px;
  vertical-align: middle;
  display: inline-block;
  margin-right: 3px;
  text-indent: -9999px;
}
.footer .links.social-media p {
  margin-top: 30px;
}
.footer .links.social-media p a {
  font-size: 40px;
  color: #fff;
  position: relative;
  font-family: "Open Sans Condensed", Verdana, Arial, sans-serif;
  line-height: 20px;
  display: inline-block;
}
.footer .links.social-media p a:after {
  content: '';
  position: absolute;
  right: -20px;
  top: -12px;
  height: 25px;
  width: 18px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 0 no-repeat;
}
.footer .links.social-media p a span {
  color: #bcdfff;
  font-size: 11px;
  font-weight: 700;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}
.footer .links .social-media a.facebook {
  background-position: -0px 0;
  height: 38px;
}
.footer .links.social-media a.facebook {
  background-position: -0px 0;
  height: 38px;
}
.footer .links .social-media a.twitter {
  background-position: -86px 0;
  height: 38px;
}
.footer .links.social-media a.twitter {
  background-position: -86px 0;
  height: 38px;
}
.footer .links .social-media a.youtube {
  background-position: -162px 0;
  height: 38px;
}
.footer .links.social-media a.youtube {
  background-position: -162px 0;
  height: 38px;
}
.footer .block-subscribe .input-box {
  float: left;
  width: 65.625%;
  padding-top: 0;
}
.footer .block-subscribe .input-text {
  width: 100%;
  border-right: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}
.footer .block-subscribe .block-content {
  padding-top: 7px;
}
.footer .block-subscribe .block-content:after {
  content: '';
  display: table;
  clear: both;
}
.footer .block-subscribe .actions {
  float: left;
  width: 34.375%;
  margin: 0;
}
.footer .block-subscribe .actions .button {
  height: 30px;
  line-height: 17px;
  float: left;
}
.footer .bugs,
.footer address {
  clear: both;
}
.footer .bugs {
  display: none;
}
.footer .form-language,
.footer .currency-switcher,
.footer .store-switcher {
  clear: both;
  margin-bottom: 10px;
}
.footer .form-language,
.footer .currency-switcher {
  display: none;
}
.footer address {
  text-align: center;
  width: 100%;
  font-size: 12px;
  margin-top: 30px;
  padding: 5px 0;
  color: #a2a2a2;
  background-color: #1b1f20;
}
.footer address p {
  display: inline;
}
.footer address a {
  color: #a2a2a2;
  padding-left: 30px;
}
.footer address a:hover {
  color: #a2a2a2;
}
.footer .links {
  width: 30.20833%;
  padding-right: 0;
  margin-right: 0;
}
.footer .block-subscribe {
  clear: both;
  float: none;
  margin: 0 auto 30px auto;
}
.footer .footer_seo {
  padding: 0 30px;
  position: relative;
  max-width: 1060px;
  margin: 0 auto;
}
.footer .footer_seo .widget {
  border-top-color: #6a797f;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 30px;
  margin-top: 0;
}
.footer .footer_seo .widget h1, .footer .footer_seo .widget h2, .footer .footer_seo .widget h3, .footer .footer_seo .widget h4, .footer .footer_seo .widget h5, .footer .footer_seo .widget p, .footer .footer_seo .widget li {
  color: #fff;
  opacity: .5;
}
.footer .footer_seo .widget a, .footer .footer_seo .widget a:hover, .footer .footer_seo .widget:focus, .footer .footer_seo .widget:active {
  color: #fff;
}
.footer .footer_seo .widget a:hover, .footer .footer_seo .widget a:active, .footer .footer_seo .widget a:focus {
  text-decoration: underline;
}
.footer .footer_seo .widget h1, .footer .footer_seo .widget h2 {
  font-size: 14px;
  margin-bottom: 0.7em;
}
.footer .footer_seo .widget h3 {
  font-size: 13px;
}
.footer .footer_seo .widget h4, .footer .footer_seo .widget h5 {
  font-size: 12px;
}
.footer .footer_seo .widget p, .footer .footer_seo .widget li {
  font-size: 11px;
  line-height: 1.3;
  margin-bottom: 10px;
}

/* Scroll to top

Scroll to top

<h1>Result</h1>

Markup: <!-- style for example -->
<div id="scroll-to-top" style="position:relative!important;display:block!important;">
  <div class="arrow">Scroll to top</div>
</div>

Styleguide 3.6
*/
#scroll-to-top {
  text-indent: -9999px;
  height: 60px;
  width: 60px;
  position: relative;
  background: rgba(0, 0, 0, 0.4);
  cursor: pointer;
  position: fixed;
  right: 30px;
  bottom: 140px;
  opacity: 0;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
#scroll-to-top .arrow {
  position: relative;
  height: 60px;
  width: 60px;
}
#scroll-to-top .arrow:after {
  left: 50%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: #fff;
  border-width: 15px;
  margin-left: -15px;
  margin-top: -25px;
}
#scroll-to-top.visible {
  opacity: 1;
}

/* Product list

Product list grid

<h1>Result</h1>

Markup: <!-- products-grid--max-4-col : number of col (defined in backoffice)-->
<ul class="products-grid products-grid--max-4-col first last odd">
    <li class="item last">
        <a href="#" title="Product name" class="product-image">
            <img src="http://placehold.it/210x210" id="product-collection-image-417" alt="Product name"> 
        </a>
        <div class="product-info">
            <h2 class="product-name">
                <a href="#" title="Product name">Product name</a>
            </h2>
            <div class="price-box">
                <span class="regular-price" id="product-price-417">
                    <span class="price">$150.00</span>
                </span>
            </div>
            <div class="actions">
                <a title="View Details" class="button" href="#">View Details</a>
                <ul class="add-to-links">
                    <li><a href="#" class="link-wishlist">Add to Wishlist</a></li>
                    <li><span class="separator">|</span> <a href="#" class="link-compare">Add to Compare</a></li>
                </ul>
            </div>
        </div>
    </li>
</ul>

Styleguide 5
*/
/* Product list

Product list list

<h1>Result</h1>

Markup: <ol class="products-list" id="products-list">
    <li class="item odd {$modifiers}">
        <div class="f-fix">
          <div class="button last-minute"><span>Dernière minute</span></div>
          <h2 class="product-name"><a href="#" title="Product name">Product name <span>- Savoie</span></a></h2>
          <a href="#" title="Product name" class="product-image">
              <img id="product-collection-image-417" src="http://placehold.it/190x130" alt="Product name">
          </a>
          <div class="product-shop">
                <div class="product-desc">
                    <div class="desc std orange-points">
                        <p>Votre séjour tout compris :</p>
                        <ul>
                          <li>du 12/07/2014 au 19/07/2014</li>
                          <li>8 jours / 7 nuits</li>
                          <li>2 adultes et 2 enfants</li>
                        </ul>
                        <p class="desc">Une chambre de 4 personnes composée d'un lit double et de 2 lits superposés.</p>
                        <ul class="facilities">
                           <li class="tooltip active">
                                <div>Appartement 2 pièces</div>
                                <img alt="Bâtiment annexe" src="http://recette.villagesclubsdusoleil.com/media/adfab/villages/equipment/bat-principal-png">
                            </li>
                            <li class="tooltip">
                                <div>Lit double</div>
                                <img alt="Bâtiment annexe" src="http://recette.villagesclubsdusoleil.com/media/adfab/villages/equipment/bat-principal-png">
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="product-secondary">
                    <b>Prix total du dossier :</b>
                    <div class="price-box">
                        <span class="regular-price" id="product-price-417">
                            <span class="price">$150.00</span>
                        </span>
                        <span class="old-price">
                            <span class="label">Au lieu de</span>
                            <span class="price">$99</span>
                        </span>
                        <p class="action">
                            <a title="View Details" class="button" href="#">Réservez</a>
                        </p>
                    </div>
                </div>
                <div class="product-tertiary">
                    <ul class="add-to-links">
                        <li><a href="#" class="link-compare">Comparer</a></li>
                        <li><a href="#" class="link-wishlist">wishlist</a></li>
                    </ul>
                </div>
          </div>
        </div>
    </li>
</ol>

.favorite - favorite
.last-minute-product - last minute product

Styleguide 5.1
*/
/* ================================================= *
 * General Product List Styles (not module-specific)
 * ================================================= */
/* -------------------------------------------- *
 * Product List General
 */
.category-title h1,
body.catalogsearch-result-index .page-title h1 {
  border-bottom: none;
}

.category-title h1 {
  font-size: 45px;
  color: #f46c00;
  margin-bottom: 0;
  line-height: 46px;
}

.category-description h2, .category-title h2 {
  font-size: 28px;
  font-weight: 300;
  color: #f46c00;
  border-bottom: 0;
  line-height: 30px;
  padding-bottom: 0;
}

.category-ventes-flash .category-title h2,
.category-dernieres-minutes .category-title h2 {
  background: #6395c6;
  font-weight: bold;
  color: #fff;
  font-size: 20px;
  padding: 0 10px;
}

.category-image {
  margin-bottom: 1.5em;
}

/* -------------------------------------------- *
 * Product Name
 */
h2.product-name,
h3.product-name,
h4.product-name,
h5.product-name,
p.product-name {
  margin: 0;
  margin-bottom: 0.5em;
  color: #d2421f;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  text-rendering: optimizeLegibility;
  text-transform: uppercase;
  font-size: 12px;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.4;
}
h2.product-name a,
h3.product-name a,
h4.product-name a,
h5.product-name a,
p.product-name a {
  color: #373737;
}
h2.product-name a:hover,
h3.product-name a:hover,
h4.product-name a:hover,
h5.product-name a:hover,
p.product-name a:hover {
  color: #f46c00;
  text-decoration: none;
}

.products-grid .product-name,
.products-list .product-name {
  text-transform: uppercase;
  margin-bottom: 5px;
  font-size: 17px;
  margin: 0;
}
.products-grid .product-name a,
.products-list .product-name a {
  font-weight: 700;
  color: #f46c00;
}
.products-grid .product-name a > img,
.products-list .product-name a > img {
  display: inline-block;
  vertical-align: middle;
}
.products-grid .product-name a:hover,
.products-list .product-name a:hover {
  color: #dc5528;
}
.products-grid .product-name a span,
.products-list .product-name a span {
  font-size: 17px;
  text-transform: none;
}
.products-grid .product-name a span.stat-visitor,
.products-list .product-name a span.stat-visitor {
  float: right;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 2px 10px;
  display: inline-block;
  margin-bottom: 10px;
  line-height: 1.5;
}

/* -------------------------------------------- *
 * Facilities
 */
ul.facilities {
  font-weight: 600;
  margin-bottom: 0 !important;
}
ul.facilities li {
  padding-left: 0 !important;
  list-style: none;
  margin: 5px 0 0 0 !important;
  width: 20px;
  line-height: 20px;
  display: inline-block;
  text-indent: -9999px;
}
ul.facilities li:before {
  display: none;
}
ul.facilities .balcony {
  background-position: 0 -1943px;
}
ul.facilities .handicap {
  background-position: 0 -2000px;
}

/* ============================================ *
 * Product Grid
 * ============================================ */
.products-grid {
  position: relative;
}

.products-grid:after {
  content: '';
  display: table;
  clear: both;
}

.products-grid > li {
  position: relative;
  margin-bottom: 20px;
  text-align: center;
}
.products-grid > li:after {
  content: '';
  display: table;
  clear: both;
}

.products-grid .product-image {
  width: 100%;
  margin-bottom: 15px;
}

.products-grid .product-image img {
  width: 100%;
  height: auto;
}
.products-grid .product-image img:hidden {
  display: none;
}

.products-grid .product-info {
  position: relative;
  padding-bottom: 95px;
}

.products-grid .actions {
  padding-top: 10px;
  position: absolute;
  bottom: 0px;
  min-height: 85px;
  width: 100%;
}

.products-grid .ratings .rating-box {
  margin: 0 auto;
}

.products-grid .ratings .amount {
  display: none;
}

.products-grid .price-box {
  color: #a2a2a2;
  font-size: 12px;
  margin: 0 0 5px;
}

.products-grid .add-to-links {
  margin-bottom: 0;
}

/* Config: Two columns + flexible gutter */
.products-grid > li {
  float: left;
  width: 47.72727%;
  margin-right: 4.54545%;
}

.products-grid > li:nth-child(odd) {
  clear: left;
}

.products-grid > li:nth-child(even) {
  margin-right: 0;
}

.products-grid .product-image {
  margin-bottom: 5px;
}
.products-grid .product-image:before, .products-grid .product-image:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: none;
}
.products-grid .product-image:before {
  background-color: white;
  opacity: 0.8;
  z-index: 2;
}
.products-grid .product-image:after {
  background-image: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/opc-ajax-loader.gif");
  background-repeat: no-repeat;
  background-position: center;
  z-index: 3;
}
.products-grid .product-image.loading {
  position: relative;
}
.products-grid .product-image.loading:before, .products-grid .product-image.loading:after {
  display: block;
}

/* Config: Three columns + flexible gutter */
.products-grid {
  /* Undo two-column config */
  /* Set three-column config */
}
.products-grid > li:nth-child(odd) {
  clear: none;
}
.products-grid > li:nth-child(even) {
  margin-right: 3.7037%;
}
.products-grid > li {
  width: 30.8642%;
  margin-right: 3.7037%;
}
.products-grid > li:nth-child(3n+1) {
  clear: left;
}
.products-grid > li:nth-child(3n) {
  margin-right: 0;
}

/* Config: Columns + flexible gutter */
/* Undo three-column config */
.products-grid--max-4-col > li:nth-child(odd) {
  clear: none;
}

.products-grid--max-4-col > li:nth-child(3n+1) {
  clear: none;
}

.products-grid--max-4-col > li:nth-child(even),
.products-grid--max-4-col > li:nth-child(3n) {
  margin-right: 2.22222%;
}

/* Set column config */
.products-grid--max-4-col > li {
  margin-right: 2.22222%;
}

.products-grid--max-4-col > li {
  width: 23.33333%;
  margin-right: 2.22222%;
}

.products-grid--max-4-col > li:nth-child(4n+1) {
  clear: left;
}

.products-grid--max-4-col > li:nth-child(4n) {
  margin-right: 0;
}

/* Config: Columns + flexible gutter */
/* Undo three-column config */
.products-grid--max-5-col > li:nth-child(odd) {
  clear: none;
}

.products-grid--max-5-col > li:nth-child(3n+1) {
  clear: none;
}

.products-grid--max-5-col > li:nth-child(even),
.products-grid--max-5-col > li:nth-child(3n) {
  margin-right: 2.22222%;
}

/* Set column config */
.products-grid--max-5-col > li {
  margin-right: 2.22222%;
}

.products-grid--max-5-col > li {
  width: 18.22222%;
  margin-right: 2.22222%;
}

.products-grid--max-5-col > li:nth-child(5n+1) {
  clear: left;
}

.products-grid--max-5-col > li:nth-child(5n) {
  margin-right: 0;
}

/* Config: Columns + flexible gutter */
/* Undo three-column config */
.products-grid--max-6-col > li:nth-child(odd) {
  clear: none;
}

.products-grid--max-6-col > li:nth-child(3n+1) {
  clear: none;
}

.products-grid--max-6-col > li:nth-child(even),
.products-grid--max-6-col > li:nth-child(3n) {
  margin-right: 2.22222%;
}

/* Set column config */
.products-grid--max-6-col > li {
  margin-right: 2.22222%;
}

.products-grid--max-6-col > li {
  width: 14.81481%;
  margin-right: 2.22222%;
}

.products-grid--max-6-col > li:nth-child(6n+1) {
  clear: left;
}

.products-grid--max-6-col > li:nth-child(6n) {
  margin-right: 0;
}

/* ============================================ *
 * Product List
 * ============================================ */
.products-list {
  margin-top: 20px;
  margin-bottom: 40px;
  max-width: 690px;
}
.products-list > li {
  padding: 0;
  margin-bottom: 15px;
  border: 4px solid #ffdcc1;
  position: relative;
  background: #fff;
}
.products-list > li .f-product {
  display: table;
  width: 100%;
}
.products-list > li .f-left, .products-list > li .f-right {
  display: table-cell;
  vertical-align: top;
  padding: 15px 12px;
}
.products-list > li .f-left {
  width: 73%;
}
.products-list > li .f-right {
  width: 27%;
  background: #f0f0f0;
}
.products-list > li .p-left, .products-list > li .p-right {
  display: table-cell;
  vertical-align: top;
}
.products-list > li .p-left {
  width: 40%;
}
.products-list > li .p-left img {
  width: 100%;
  max-width: 100%;
}
.products-list > li .p-right {
  width: 60%;
  padding-left: 15px;
}
.products-list > li .p-right li {
  margin-top: 2px;
}
.products-list > li .p-right li:first-child {
  margin-top: 0;
}
.products-list > li .p-right li svg {
  margin-right: 10px;
  display: inline-block;
  vertical-align: middle;
}
.products-list > li .p-right li span {
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  font-weight: 600;
}
.products-list > li .p-right li.p-board span {
  font-size: 14px;
  font-weight: 700;
}
.products-list > li .p-right li.p-notation {
  margin-top: 9px;
}
.products-list > li .p-right li.p-notation span {
  font-size: 10px;
  margin-left: 5px;
  padding-top: 4px;
}
.products-list > li .p-stock {
  position: absolute;
  top: -10px;
  background: #5a8aba;
  color: #fff;
  border-radius: 2px;
  padding: 2px 5px 1px;
  font-size: 13px;
  right: 12px;
  font-weight: 600;
}
.products-list > li .product-name {
  margin-bottom: 7px;
}
.products-list > li .product-name a {
  font-size: 22px;
}
.products-list > li .product-name a span {
  font-size: 12px;
  color: #384043;
}
.products-list > li .product-name svg path {
  fill: #f46c00;
}
.products-list > li .p-board {
  color: #5a8aba;
}
.products-list > li .p-board svg path {
  fill: #5a8aba;
}
.products-list > li .p-notation svg path {
  fill: #766657;
}
.products-list > li .p-notation .rating-box {
  display: inline-block;
  vertical-align: middle;
}
.products-list > li .p-notation span {
  color: #766657;
}
.products-list > li .p-visitors span {
  color: #f46c00;
}
.products-list > li .p-desc {
  margin-top: 10px;
}
.products-list > li .p-desc .p-desc-toggle {
  font-size: 14px;
  font-weight: 600;
  color: #373737;
  outline: none;
}
.products-list > li .p-desc .p-desc-toggle .down, .products-list > li .p-desc .p-desc-toggle .up {
  padding-left: 20px;
  position: relative;
  text-decoration: underline;
}
.products-list > li .p-desc .p-desc-toggle .down:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid #f46c00;
  border-right: none;
  border-left-width: 10px;
  top: 3px;
}
.products-list > li .p-desc .p-desc-toggle .up {
  display: none;
}
.products-list > li .p-desc .p-desc-toggle .up:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #f46c00;
  border-top: none;
  border-bottom-width: 12px;
  top: 4px;
}
.products-list > li .p-desc .p-short-desc {
  display: none;
  font-size: 12px;
  font-weight: normal;
  margin-top: 15px;
}
.products-list > li .p-stay {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 5px;
}
.products-list > li .p-stay span {
  font-size: 14px;
  font-weight: normal;
}
.products-list > li .button.last-minute {
  position: absolute;
  top: 15px;
  right: 0;
  padding: 5px 4px 3px;
}
.products-list > li .button.last-minute span {
  padding-left: 20px;
}
.products-list > li .price-box {
  text-align: center;
  margin-top: 10px;
}
.products-list > li .price-box .price {
  font-size: 25px;
  font-weight: 700;
}
.products-list > li .price-box .price span {
  font-size: 14px;
  font-weight: normal;
  margin-left: 2px;
}
.products-list > li .price-box .regular-price {
  line-height: 1;
}
.products-list > li .price-box .old-price {
  line-height: 1;
}
.products-list > li .price-box .old-price .price {
  font-size: 14px;
  font-weight: normal;
}
.products-list > li .price-box .old-price .price span {
  font-size: 14px;
  margin-left: 0;
}
.products-list > li .price-box .btn-cart {
  font-size: 14px;
  font-weight: 700;
  border-radius: 3px;
  display: inline-block;
  background: #f46c00;
  min-width: 140px;
  margin-top: 20px;
}
.products-list > li .product-tertiary {
  margin-top: 20px;
  text-align: center;
}
.products-list > li .product-tertiary .add-to-links a.link-share {
  font-size: 12px;
  text-decoration: none;
  background: none;
  padding-left: 0;
}
.products-list > li .product-tertiary .add-to-links a.link-share svg {
  margin-right: 5px;
}
.products-list > li .product-tertiary .add-to-links a.link-share svg path {
  fill: #373737;
}
.products-list > li.favorite {
  border-color: #6395c6;
}
.products-list > li.favorite .product-shop .price-box .regular-price .price, .products-list > li.last-minute-product .product-shop .price-box .regular-price .price {
  color: #f8b502;
}
.products-list.no-result {
  border-bottom: 1px dotted #f26c00;
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.products-list.no-result .call-back {
  margin-bottom: 15px;
  font-size: 16px;
}
.products-list.no-result .call-back a {
  text-transform: uppercase;
  position: relative;
  padding-right: 20px;
  text-decoration: none;
  outline: none;
  font-size: 20px;
  color: #f46c00;
}
.products-list.no-result .call-back a:hover, .products-list.no-result .call-back a:focus, .products-list.no-result .call-back a:active {
  color: #f46c00;
}
.products-list.no-result .call-back a:before {
  content: '';
  position: absolute;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #f46c00;
  border-right: none;
  border-left: 10px solid #f46c00;
  right: 0;
  top: 9px;
}
.products-list.no-result #call-us {
  margin-bottom: 15px;
  font-size: 16px;
}
.products-list.no-result #call-us .phone {
  font-size: 18px;
  font-weight: 600;
}
.products-list.no-result #call-us .phone-price {
  font-size: 11px;
}
.products-list.no-result h3 {
  font-size: 28px;
  color: #474747;
  text-transform: none;
}
.products-list.no-result ul {
  list-style: disc inside;
}
.products-list.no-result li {
  color: #f26c00;
}
.products-list.no-result li a {
  text-decoration: underline;
}

body.catalog-category-view .msg-display {
  display: none;
}

.msg-display > div.open {
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  z-index: 999;
}
.msg-display > div.open ul li {
  color: #f26c00;
  font-weight: 600;
}
.msg-display .messages {
  position: absolute;
  top: 220px;
  left: 50%;
  width: 500px;
  background: #fff;
  padding: 30px;
  margin-left: -250px !important;
  z-index: 1000;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
}
.msg-display .messages h3 {
  color: #f46c00;
}
.msg-display .messages li li {
  text-transform: none;
}
.msg-display .messages li li span {
  text-transform: none;
}
.msg-display .messages ul li {
  border: 0;
  padding: 0;
  font-size: 14px;
  text-align: center;
}
.msg-display .messages ul li:before {
  border: 0;
}
.msg-display .messages li.close {
  text-align: right;
  margin-bottom: 13px;
  color: #f26c00;
}
.msg-display .messages a {
  color: #6395c6;
}
.msg-display .quote-gender {
  width: 19%;
  display: inline-block;
  vertical-align: top;
}
.msg-display .quote-gender select {
  height: 32px;
  line-height: 32px;
  border: 1px solid #d6d6d6;
  border-radius: 3px;
  box-shadow: inset 1px 1px 1px 0 #DDDDDD;
  background: #f8f8f8;
  width: 100%;
  max-width: 65px;
}
.msg-display .quote-name {
  width: 80%;
  display: inline-block;
  vertical-align: top;
}
.msg-display .quote-phone, .msg-display .quote-email {
  margin-top: 20px;
  display: inline-block;
  vertical-align: top;
}
.msg-display .quote-phone {
  width: 49%;
}
.msg-display .quote-phone .input-box {
  padding-top: 0;
}
.msg-display .quote-email {
  width: 50%;
}
.msg-display .quote-callback input, .msg-display .quote-optin input {
  display: inline-block;
  margin-right: 10px;
  vertical-align: baseline;
}
.msg-display .quote-callback label, .msg-display .quote-optin label {
  display: inline-block;
  vertical-align: top;
  max-width: 90%;
}
.msg-display .quote-callback {
  margin-top: 20px;
}
.msg-display .quote-optin {
  margin-bottom: 20px;
  margin-top: 20px;
}
.msg-display .quote-disclaimer {
  font-size: 10px;
  font-weight: 500;
  color: #373737;
  margin-top: 20px;
}
.msg-display .quote-disclaimer a {
  color: #373737;
  text-decoration: underline;
}
.msg-display .input-text {
  height: 32px;
  line-height: 32px;
  border: 1px solid #d6d6d6;
  border-radius: 3px;
  box-shadow: inset 1px 1px 1px 0 #DDDDDD;
  background: #f8f8f8;
  width: 100%;
}
.msg-display .input-text.validation-failed {
  border-color: #FF0000;
}

.book-result-index .category-products h2 {
  color: #384043;
  text-transform: none;
  font-size: 26px;
  margin: 20px 0 0;
}
.book-result-index .category-products h2 strong, .book-result-index .category-products h2 .orange {
  color: #f46c00;
}
.book-result-index .category-products .counter-offer {
  color: #384043;
  text-transform: none;
}
.book-result-index .category-products .counter-offer img {
  display: inline;
  vertical-align: sub;
}
.book-result-index .category-products .sorters-toolbar {
  margin: 10px 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px dotted #f26c00;
}
.book-result-index .category-products .sorters-toolbar .filter-title {
  text-transform: uppercase;
  font-weight: 600;
  color: #f26c00;
  font-size: 16px;
}
.book-result-index .category-products .sorters-toolbar .filter-title.first {
  position: relative;
  padding-right: 20px;
  cursor: pointer;
}
.book-result-index .category-products .sorters-toolbar .filter-title.first span {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 6px solid #f26c00;
  border-bottom: none;
  border-top-width: 8px;
  top: -2px;
  position: relative;
  display: inline-block;
  margin-left: 10px;
}
.book-result-index .category-products .sorters-toolbar .filter-title.first.open span {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-bottom: 6px solid #f26c00;
  border-top: none;
  border-bottom-width: 8px;
  top: -2px;
  position: relative;
  display: inline-block;
  margin-left: 10px;
}
.book-result-index .category-products .sorters-toolbar .filters {
  display: none;
  font-size: 13px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.book-result-index .category-products .sorters-toolbar .filters .filter-title {
  padding-bottom: 5px;
  margin-bottom: 10px;
}
.book-result-index .category-products .sorters-toolbar .filters .custom-control {
  display: inline-block;
  vertical-align: top;
  width: 47%;
}
.book-result-index .category-products .sorters-toolbar .filters .custom-control label {
  padding: 0;
  display: inline-block;
  vertical-align: top;
  width: 90%;
  cursor: pointer;
}
.book-result-index .category-products .sorters-toolbar .filters .custom-control input {
  display: inline-block;
  vertical-align: top;
  width: 5%;
}
.book-result-index .category-products .sorters-toolbar .filters .custom-control.disabled {
  color: #afaeae;
}
.book-result-index .category-products .sorters-toolbar .filters .custom-control.disabled input, .book-result-index .category-products .sorters-toolbar .filters .custom-control.disabled label {
  cursor: not-allowed;
}
.book-result-index .category-products .sorters-toolbar .sorters {
  padding-top: 10px;
  font-size: 13px;
  border-top: 1px dotted #d6d6d6;
}
.book-result-index .category-products .sorters-toolbar .sorters > div {
  display: inline-block;
  vertical-align: baseline;
  margin-right: 15px;
  margin-bottom: 0;
}
.book-result-index .category-products .sorters-toolbar .sorters label {
  padding: 0;
  cursor: pointer;
  font-size: 13px;
}
.book-result-index .category-products .sorters-toolbar .sorters label.checked {
  font-weight: 700;
}
.book-result-index .category-products .sorters-toolbar .sorters input {
  opacity: 0;
}
.book-result-index .similar-deals {
  border-top: 1px dotted #000000;
  margin-top: 50px;
  margin-bottom: 15px;
}
.book-result-index .similar-deals .toggle-list {
  position: relative;
  padding-left: 25px;
  cursor: pointer;
  text-transform: none;
  font-size: 22px;
  line-height: 32px;
  margin-bottom: 0;
  color: #373737;
}
.book-result-index .similar-deals .toggle-list span {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #373737;
  border-right: none;
  border-left-width: 10px;
  left: 0;
  top: 10px;
}
.book-result-index .similar-deals .toggle-list.active span {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 6px solid #373737;
  border-bottom: none;
  border-top-width: 10px;
  top: 12px;
}
.book-result-index .similar-deals .products-list {
  display: none;
}
.book-result-index .similar-deals .products-list.duration-differ-list > li .p-right li.p-duration {
  color: #f46c00;
}
.book-result-index .similar-deals .products-list.duration-differ-list > li .p-right li.p-duration svg path {
  fill: #f46c00;
}
.book-result-index .similar-deals .products-list.duration-differ-list > li .p-right li.p-duration span {
  font-weight: 700;
  font-size: 14px;
}
.book-result-index .similar-deals .products-list.date-differ-list > li .p-right li.p-calendar {
  color: #f46c00;
}
.book-result-index .similar-deals .products-list.date-differ-list > li .p-right li.p-calendar svg path {
  fill: #f46c00;
}
.book-result-index .similar-deals .products-list.date-differ-list > li .p-right li.p-calendar span {
  font-weight: 700;
  font-size: 14px;
}
.book-result-index .similar-deals.no-exact-deal {
  border-top: none;
  margin-top: 0;
}
.book-result-index .loading-other-results {
  margin-bottom: 50px;
  margin-top: 50px;
}
.book-result-index .loading-other-results img {
  display: inline-block;
}
.book-result-index .loading-other-results span {
  display: block;
  text-transform: uppercase;
  font-size: 14px;
  margin-top: 10px;
}

.store-rfr.book-result-index .products-list .product-name,
.store-ren.book-result-index .products-list .product-name,
.store-rcgos.book-result-index .products-list .product-name,
.store-rcnas.book-result-index .products-list .product-name {
  margin-bottom: 15px;
}

.products-list .product-shop {
  float: left;
  width: 67%;
}
.products-list .product-shop .product-name {
  margin-bottom: 0;
}
.products-list .product-shop .ratings {
  margin: 0;
}
.products-list .product-shop .ratings .rating-box,
.products-list .product-shop .ratings .rating-links {
  float: left;
  margin-right: 7px;
}
.products-list .product-shop .ratings .rating-links {
  margin-top: 4px;
}
.products-list .product-shop .price-box {
  margin: 0;
  font-weight: 400;
}
.products-list .product-shop .price-box .regular-price .price {
  font-size: 35px;
  color: #f46c00;
  line-height: 36px;
  font-weight: 300;
}
.products-list .product-shop .price-box .regular-price .price span {
  font-size: 13px;
}
.products-list .product-shop .price-box .regular-price.yellow .price {
  color: #f8b502;
}
.products-list .product-shop .price-box .old-price, .products-list .product-shop .price-box .special-price {
  font-weight: 400;
  font-size: 14px;
}
.products-list .product-shop .price-box .old-price .price, .products-list .product-shop .price-box .special-price .price {
  color: #000000;
  font-size: 14px;
}
.products-list .product-shop .action {
  margin: 7px 0;
}
.products-list .product-shop .action .button {
  background-color: #f26c00;
  font-size: 14px;
  width: 90%;
  padding: 7px 0;
  font-weight: bold;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.products-list .product-shop .action .button:hover {
  background-color: #d2421f;
}
.products-list .product-shop .desc {
  font-weight: bold;
}
.products-list .product-shop .desc p {
  margin: 0;
  font-size: 13px;
}
.products-list .product-shop .desc p.desc {
  font-size: 15px;
}
.products-list .product-shop .desc ul {
  margin-bottom: 10px;
}
.products-list .product-shop .desc ul li {
  margin: 0;
  font-size: 12px;
  padding-left: 10px;
}
.products-list .product-shop .desc ul li:before {
  top: 7px;
  height: 4px;
  width: 4px;
}
.products-list .product-shop .product-desc {
  width: 71%;
  padding-right: 2%;
  display: table-cell;
  vertical-align: top;
}
.products-list .product-shop .product-desc .desc {
  margin-top: -4px;
}
.products-list .product-shop .product-secondary {
  height: 100%;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  overflow: hidden;
  position: relative;
}
.products-list .product-shop .product-secondary b {
  font-size: 12px;
}
.products-list .product-shop .product-secondary .old-price .price-label {
  font-weight: normal;
  font-size: 12px;
}
.products-list .product-shop .product-secondary .add-to-links {
  position: absolute;
  bottom: -35px;
  right: 0;
}
.products-list .product-shop .product-secondary .add-to-links li {
  display: inline-block;
}
.products-list .product-shop .product-tertiary {
  float: right;
  width: 25%;
  text-align: right;
  clear: right;
  display: block;
}
.products-list .product-shop .product-tertiary .add-to-links {
  position: absolute;
  bottom: -35px;
  right: 0;
}
.products-list .product-shop .product-tertiary .add-to-links li {
  display: inline-block;
  margin-left: 10px;
}

.products-list .product-name a {
  font-size: 26px;
  font-weight: 600;
}

/* ============================================ *
 * Mini Product List
 * ============================================ */
.mini-products-list .product-image {
  float: left;
  min-width: 50px;
}
.mini-products-list .product-details {
  margin-left: 60px;
}
.mini-products-list .product-details .product-name {
  padding-top: 10px;
}
.mini-products-list li {
  margin-bottom: 10px;
  clear: both;
}
.mini-products-list li:after {
  content: '';
  display: table;
  clear: both;
}

.mini-products-images-list:after {
  content: '';
  display: table;
  clear: both;
}
.mini-products-images-list li.item {
  float: left;
  width: 50%;
  margin: 0;
  padding: 0 5px 10px 0;
}
.mini-products-images-list li.item:nth-child(even) {
  padding-right: 0;
  padding-left: 5px;
}
.mini-products-images-list li.item .product-image {
  display: block;
}
.mini-products-images-list li.item .product-image img {
  width: 100%;
  max-width: 100%;
}

/* ============================================ *
 * Catalog - List
 * ============================================ */
.category-image {
  border: 1px solid #CCCCCC;
  padding: 10px;
}
.category-image img {
  width: 100%;
  max-width: 100%;
}
.category-image img:hidden {
  display: none;
}

/* ============================================ *
 * Layered Navigation
 * ============================================ */
.block-layered-nav .block-subtitle--filter {
  display: none;
  margin: 0;
  margin-bottom: 10px;
  color: #d2421f;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  text-transform: uppercase;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  font-weight: 600;
  margin-bottom: 4px;
  padding: 12px 10px 12px 24px;
  position: relative;
  background-color: #f26c00;
  text-align: center;
  font-size: 21px;
  color: #fff;
  cursor: pointer;
}
.block-layered-nav .block-subtitle--filter:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 4px solid #f46c00;
  border-bottom: none;
  left: 10px;
  top: 50%;
  margin-top: -3px;
}

.block-layered-nav .block-content .toggle-tabs {
  display: none;
}
.block-layered-nav .block-content > dl > dt {
  margin: 0;
  margin-bottom: 10px;
  color: #d2421f;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  text-transform: uppercase;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  font-weight: 600;
  margin-bottom: 4px;
  padding: 12px 10px 12px 24px;
  position: relative;
  background-color: #f26c00;
  text-align: center;
  font-size: 21px;
  color: #fff;
  display: block;
}
.block-layered-nav .block-content > dl > dt:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 4px solid #f46c00;
  border-bottom: none;
  left: 10px;
  top: 50%;
  margin-top: -3px;
}
.block-layered-nav .block-content > dl > dd {
  padding: 10px;
  margin: 0;
}
.block-layered-nav .block-content > dl > dd:last-child {
  border-width: 0 1px 1px 1px;
}

.block-layered-nav dl dd {
  margin-bottom: 10px;
  margin-top: 10px;
}
.block-layered-nav dl dd ol > li > span, .block-layered-nav dl dd ol > li > a {
  padding: 5px 15px;
  display: block;
}
.block-layered-nav dl dd ol > li > a .count {
  color: #a2a2a2;
}

.block-layered-nav .block-content > dl > dt {
  padding-left: 10px;
}
.block-layered-nav .block-content > dl > dt:after {
  display: none;
}

.block-layered-nav .currently .block-subtitle {
  display: block;
  margin: 0;
  margin-bottom: 10px;
  color: #d2421f;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  text-transform: uppercase;
}
.block-layered-nav .currently ol {
  padding-left: 10px;
  margin-bottom: 10px;
}
.block-layered-nav .currently ol li {
  margin-bottom: 5px;
}
.block-layered-nav .currently ol li .label {
  font-weight: bold;
}
.block-layered-nav .currently ol li:after {
  content: '';
  display: table;
  clear: both;
}

.block-layered-nav .actions {
  text-align: right;
  margin-bottom: 7px;
}

/* ============================================ *
 * Catalog Event
 * ============================================ */
.event-container {
  clear: both;
  border: 1px solid #5a8aba;
  position: relative;
  z-index: 2;
  border-width: 1px 1px;
  margin-top: 7px;
  height: 59px;
}
.event-container:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 10px solid #5a8aba;
  border-bottom: none;
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
}
.event-container .event {
  padding-bottom: 18px;
  margin-bottom: -18px;
  padding-top: 5px;
  height: 52px;
  line-height: 50px;
  text-align: center;
  width: auto;
  position: relative;
  z-index: 2;
  border-bottom: 0 !important;
}
.event-container .event .event-ticker {
  display: inline;
  font-size: 28px;
  height: auto;
}
.event-container .event .event-ticker span {
  line-height: 50px;
  height: 50px;
  padding: 0;
}
.event-container .container {
  display: inline;
  margin: 0;
  padding: 0;
  background: none;
}
.event-container .status {
  display: inline;
  margin: 0 10px 0 0;
  background: none;
  font-size: 22px;
}
.event-container .event-dates {
  display: inline;
  font-size: 22px;
  height: auto;
}
.event-container .event-dates div,
.event-container .event-dates p {
  display: inline;
}
.event-container .event-dates .time-part {
  font-size: 14px;
}

/* Last minute product hub

<h1>Result</h1>

Markup: <div class="last-minute-product-hub">
  <h3>Alpe d'huez - oz en oisans</h3>
  <p class="title">Du samedi 31 mai au samedi 7 juin 2017</p>
  <p>
    <span class="button yellow">-20% de réduction</span> <b>sur votre séjour en formule tout compris</b> <small>(8 jours / 7 nuits)</small>
  </p>
  <div class="content-promo">
    <img src="http://placehold.it/320x160" alt=""/>
    <div>
      <p>
        Au coeur de l'immensité des "3 vallées", le plus vaste domaine skiable du monde, votre village Club des Ménuires idéalement siuté sur les pistes,...<br/>
        <a href="#">En savoir plus sur ce village-club</a>
      </p>
    </div>
  </div>
  <div class="price-box">
      <p class="special-price">
         <span class="price-label">Adulte</span>
         <span class="price">1600 € <small>TTC</small></span>
      </p>
      <p class="old-price">
        <span class="price-label">au lieu de</span>
        <span class="price">1400 €</span>
      </p>
   </div>
   <div class="price-box">
      <p class="special-price">
         <span class="price-label">Enfant de 6 à - de 13 ans</span>
         <span class="price">1400 € <small>TTC</small></span>
      </p>
      <p class="old-price">
        <span class="price-label">au lieu de</span>
        <span class="price">1200 €</span>
      </p>
   </div>
   <a href="#" class="button orange">Réservez maintenant</a>
</div>

Styleguide 5.2
*/
.last-minute-product-hub {
  border-top: 1px dotted #000000;
  padding: 15px 0;
  max-width: 660px;
  position: relative;
  z-index: 0;
  /* price box */
}
.last-minute-product-hub h3 {
  color: #f8b502;
  font-size: 31px;
  text-transform: uppercase;
  font-weight: bold;
  margin-bottom: 0;
}
.last-minute-product-hub a {
  display: block;
  text-decoration: underline;
}
.last-minute-product-hub p {
  margin-bottom: 20px;
  font-size: 14px;
}
.last-minute-product-hub small {
  font-weight: 600;
}
.last-minute-product-hub .content-promo {
  margin-bottom: 20px;
}
.last-minute-product-hub .content-promo p {
  margin-bottom: 0;
}
.last-minute-product-hub .content-promo img {
  display: inline-block;
  width: 47%;
  margin-right: 2%;
  vertical-align: middle;
}
.last-minute-product-hub .content-promo > div > div {
  display: inline-block;
  width: 50%;
  vertical-align: middle;
}
.last-minute-product-hub .content-promo .little {
  width: 100%;
}
.last-minute-product-hub .content-promo .little > div {
  display: inline-block;
  width: 67%;
  vertical-align: middle;
}
.last-minute-product-hub .content-promo .little img {
  width: 30%;
}
.last-minute-product-hub .title {
  font-size: 21px;
  margin-bottom: 10px;
}
.last-minute-product-hub .button.yellow {
  margin-right: 5px;
}
.last-minute-product-hub .button.orange {
  font-weight: bold;
  font-size: 15px;
  text-decoration: none;
  display: inline-block;
  margin-bottom: 30px;
}
.last-minute-product-hub .price-box {
  margin: 0;
}
.last-minute-product-hub .price-box p {
  margin: 0;
  font-size: 15px;
}
.last-minute-product-hub .price-box .special-price {
  padding-left: 0;
}
.last-minute-product-hub .price-box .special-price .price-label {
  font-weight: bold;
  color: #384043;
  width: 240px;
  position: relative;
  display: inline-block;
}
.last-minute-product-hub .price-box .special-price .price-label:after {
  content: '.............................................................';
  font-size: 12px;
}
.last-minute-product-hub .price-box .special-price .price {
  color: #f26c00;
  font-size: 32px;
  font-weight: 400;
  background: #fff;
  position: relative;
  z-index: 2;
}
.last-minute-product-hub .price-box .special-price .price small {
  color: #f26c00;
  font-size: 12px;
}
.last-minute-product-hub .price-box .old-price .price-label {
  font-weight: normal;
  text-transform: lowercase;
  color: #384043;
  font-size: 13px;
  background: #fff;
  position: relative;
  z-index: 2;
}
.last-minute-product-hub .little .price-box {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 5px;
}
.last-minute-product-hub .little .price-box .special-price .price-label {
  width: 235px;
}
.last-minute-product-hub .little .price-box .special-price .price-label:after {
  display: none;
}
.last-minute-product-hub .little .price-box .special-price .price {
  font-size: 24px;
}

.widget-search {
  position: relative;
  z-index: 2;
}

.tooltip {
  position: relative;
}
.tooltip > div {
  z-index: 10;
  display: none;
  padding: 5px;
  margin-top: -40px;
  width: 140px;
  line-height: 16px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  text-indent: 0;
  font-weight: normal;
}
.tooltip.active > div, .tooltip:hover > div {
  display: inline;
  position: absolute;
  color: #fff;
  background: #f26c00;
  font-size: 11px;
  color: #fff;
  text-align: center;
  left: -60px;
}
.tooltip.active > div:after, .tooltip:hover > div:after {
  border: solid;
  border-color: #f26c00 transparent;
  border-width: 6px 6px 0 6px;
  bottom: -6px;
  content: "";
  display: block;
  left: 65px;
  position: absolute;
  z-index: 99;
}
.tooltip.certification > div {
  bottom: 100px;
  left: -102px;
  width: 250px;
}
.tooltip.certification > div:after {
  left: 124px;
}

.form-share {
  display: none;
}

.popin .form-share {
  display: none;
}

/* Product view

Product view

Styleguide 6
*/
/* ============================================ *
 * Catalog - Product
 * ============================================ */
/* Product view shop

Product view shop

<h1>Result</h1>

Markup: <div class="product-view">
    <div class="product-shop">
        <div class="product-name">
            <span class="h1">Tori Tank</span>
        </div>
        <div class="price-info">
            <div class="price-box">
                <span class="regular-price" id="product-price-418">
                    <span class="price">$60.00</span>
                </span>      
            </div>
        </div>
        <div class="extra-info">
            <p class="availability in-stock">
              <span class="label">Availability:</span>
              <span class="value">In stock</span>
            </p>
        </div>
        <div class="short-description">
            <div class="std">A simple ribbed cotton tank. Great for layering.</div>
        </div>
            <div class="product-options" id="product-options-wrapper">
            <dl class="last">
                <dt><label class="required"><em>*</em>Color</label></dt>
                <dd>
                    <div class="input-box">
                      <select name="super_attribute[92]" id="attribute92" class="required-entry super-attribute-select">
                          <option value="">Choose an Option...</option>
                          <option value="26" price="0">Indigo</option>
                      </select>
                    </div>
                </dd>
                <dt><label class="required"><em>*</em>Size</label></dt>
                <dd class="last">
                    <div class="input-box">
                        <select name="super_attribute[180]" id="attribute180" class="required-entry super-attribute-select">
                            <option value="">Choose an Option...</option>
                            <option value="79" price="0">M</option>
                            <option value="78" price="0">L</option>
                            <option value="77" price="0">XL</option>
                        </select>
                    </div>
                </dd>
                    </dl>
            <p class="required">* Required Fields</p>
        </div>
        <div class="product-options-bottom">
            <div class="price-box">
                <span class="regular-price" id="product-price-418_clone">
                    <span class="price">$60.00</span>
                </span>
            </div>
            <div class="add-to-cart">
                <div class="qty-wrapper">
                    <label for="qty">Qty:</label>
                    <input type="text" pattern="\d*" name="qty" id="qty" maxlength="12" value="1" title="Qty" class="input-text qty"/>
                </div>
                <div class="add-to-cart-buttons">
                    <button type="button" title="Add to Cart" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span>Add to Cart</span></span></button>
                </div>
            </div>
            <ul class="add-to-links">
                <li><a href="#" class="link-wishlist">Add to Wishlist</a></li>
                <li><span class="separator">|</span> <a href="#" class="link-compare">Add to Compare</a></li>
            </ul>
            <div class="sharer-block">
                <ul class="sharing-links">
                   <li><a href="#" class="link-email-friend" title="Email to a Friend">Email to a Friend</a></li>
                   <li><a href="#" target="_blank" title="Share on Facebook" class="link-facebook">Share Facebook</a></li>
                   <li><a href="#" target="_blank" title="Share on Twitter" class="link-twitter">Share on Twitter</a></li>
                </ul>
              <p>Partager</p>
            </div>
        </div>
    </div>
</div>

Styleguide 6.1
*/
.product-view .product-essential .extra-info .ratings .rating-box,
.product-view .product-essential .extra-info .ratings .amount {
  float: left;
}
.product-view .product-essential .extra-info .ratings .rating-box {
  margin-top: 8px;
  margin-right: 10px;
}
.product-view .product-essential .extra-info .ratings:after {
  content: '';
  display: table;
  clear: both;
}
.product-view .product-essential:after {
  content: '';
  display: table;
  clear: both;
}
.product-view .product-shop .product-name .h1,
.product-view .product-img-box .product-name h1 {
  color: #f46c00;
  margin-bottom: 10px;
  border: 0;
}
.product-view .product-shop {
  width: 50%;
  float: right;
}
.product-view .product-shop .product-name {
  display: none;
  float: left;
}
.product-view .product-shop .product-name .h1 {
  float: left;
  margin-bottom: 5px;
}
.product-view .product-shop .extra-info {
  float: left;
  padding-right: 15px;
  clear: left;
}
.product-view .product-shop .price-info {
  float: right;
  padding-left: 15px;
  text-align: right;
}
.product-view .product-shop .extra-info,
.product-view .product-shop .price-info {
  max-width: 50%;
  margin-bottom: 10px;
}
.product-view .product-shop .short-description {
  margin-bottom: 10px;
  clear: both;
}
.product-view .product-shop .ratings {
  margin-bottom: 8px;
}
.product-view .product-shop .availability {
  font-size: 15px;
}
.product-view .product-shop .price-box {
  margin-top: 0;
}
.product-view .product-shop .price-box .old-price,
.product-view .product-shop .price-box .special-price,
.product-view .product-shop .price-box .regular-price {
  padding-right: 0;
  line-height: 1.2;
}
.product-view .product-shop .price-box .regular-price .price,
.product-view .product-shop .price-box .special-price .price,
.product-view .product-shop .price-box .full-product-price .price {
  color: #f46c00;
  font-size: 24px;
}
.product-view .product-shop .price-box .special-price .price-label {
  font-size: 15px;
  text-transform: uppercase;
}
.product-view .product-shop .price-box .price-excluding-tax,
.product-view .product-shop .price-box .price-including-tax {
  display: block;
  line-height: 1.2;
}
.product-view .product-shop .price-box .price-excluding-tax .label,
.product-view .product-shop .price-box .price-including-tax .label {
  font-size: 15px;
  font-weight: 300;
}
.product-view .product-shop .price-box .price-excluding-tax .price,
.product-view .product-shop .price-box .price-including-tax .price {
  font-size: 20px;
}
.product-view .old-price .price-label {
  display: none;
}
.product-view .add-to-cart-wrapper,
.product-view .block-related {
  width: 50%;
  float: right;
  clear: right;
}

/* Product view image box

Product view image box

<h1>Result</h1>

Markup: <div class="product-img-box">
    <div class="product-name">
      <h1>Product name</h1>
    </div>
    <div class="product-image product-image-zoom zoom-available">
        <div class="product-image-gallery">
            <img id="image-main" class="gallery-image visible" src="http://placehold.it/600x900" alt="Tori Tank" title="Tori Tank">
            <img id="image-0" class="gallery-image" src="http://placehold.it/600x900" data-zoom-image="http://placehold.it/600x900"/>
            <img id="image-1" class="gallery-image" src="http://placehold.it/600x900/000000" data-zoom-image="http://placehold.it/600x900/000000"/>
        </div>
    </div>
    <div class="more-views">
        <h2>More Views</h2>
        <ul class="product-image-thumbs">
            <li>
                <a class="thumb-link" href="#" title="" data-image-index="0">
                    <img src="http://placehold.it/75x75" width="75" height="75" alt="">
                </a>
            </li>
            <li>
                <a class="thumb-link" href="#" title="" data-image-index="1">
                    <img src="http://placehold.it/75x75/000000" width="75" height="75" alt="">
                </a>
            </li>
        </ul>
    </div>
</div>

Styleguide 6.2
*/
.product-img-box {
  width: 50%;
  float: left;
}
.product-img-box .product-name h1 {
  border: 0;
}
.product-img-box .product-image {
  margin-bottom: 10px;
}
.product-img-box .product-image img {
  max-width: 100%;
  max-height: 750px;
  margin: 0px auto;
}

.product-image-gallery {
  position: relative;
}
.product-image-gallery .gallery-image {
  display: none;
}
.product-image-gallery .gallery-image.visible {
  display: block;
}
.product-image-gallery .gallery-image.visible.hidden {
  visibility: hidden;
}
.product-image-gallery:before, .product-image-gallery:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: none;
}
.product-image-gallery:before {
  background-color: white;
  opacity: 0.8;
  z-index: 2;
}
.product-image-gallery:after {
  background-image: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/opc-ajax-loader.gif");
  background-repeat: no-repeat;
  background-position: center;
  z-index: 3;
}
.product-image-gallery.loading {
  position: relative;
}
.product-image-gallery.loading:before, .product-image-gallery.loading:after {
  display: block;
}

.product-image-thumbs li {
  display: inline-block;
}
.product-image-thumbs li:first-child {
  margin-left: -1px;
}
.product-image-thumbs a {
  display: inline-block;
  border: 1px solid transparent;
}

.no-touch .product-image-thumbs a:hover {
  border-color: #c7c7c7;
}

.product-view .product-shop,
.product-view .add-to-cart-wrapper,
.product-view .block-related {
  padding-left: 15px;
}

.product-img-box {
  padding-right: 15px;
}

.product-view .product-shop,
.product-img-box,
.product-collateral,
.product-view .block-related,
.box-collateral {
  margin-bottom: 10px;
}

.product-view {
  /* Set a min-height so that the floated elements break appropriately */
}
.product-view .add-to-box:after,
.product-view .add-to-cart:after {
  content: '';
  display: table;
  clear: both;
}
.product-view .add-to-cart {
  padding-bottom: 3px;
  margin-bottom: 10px;
  border-bottom: 1px solid #CCCCCC;
}
.product-view .add-to-cart .qty-wrapper,
.product-view .product-options-bottom .price-box,
.product-view .add-to-cart-buttons {
  min-height: 40px;
}
.product-view .product-options-bottom .price-box,
.product-view .add-to-cart .qty-wrapper,
.product-view .add-to-cart-buttons .button,
.product-view .add-to-cart-buttons .paypal-logo {
  margin-bottom: 10px;
}
.product-view .add-to-cart .qty-wrapper,
.product-view .add-to-cart .qty-wrapper label {
  margin-right: 7px;
  float: left;
}
.product-view .add-to-cart .qty-wrapper label {
  line-height: 40px;
}
.product-view .add-to-cart .qty-wrapper .qty {
  float: left;
  height: 40px;
}
.product-view .add-to-cart-buttons {
  float: left;
  margin-right: 10px;
}
.product-view .add-to-cart-buttons .paypal-logo {
  clear: left;
  text-align: center;
}
.product-view .add-to-cart-buttons .paypal-logo .paypal-button {
  margin: 0 auto;
  display: block;
  width: 145px;
}
.product-view .add-to-cart-buttons .paypal-logo .bml_button {
  display: block;
  width: 150px;
  margin: 0 auto;
}
.product-view .add-to-cart-buttons .paypal-logo .bml_button a {
  text-align: center;
}
.product-view .add-to-cart-buttons .paypal-logo .paypal-or {
  display: block;
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 0;
  line-height: 1;
  text-align: center;
}
.product-view .add-to-cart-buttons .button {
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  padding: 0px 30px;
  float: left;
  min-width: 160px;
  width: 100%;
}

/* This is the "or" that separates the "Add to Cart" and "Add to X" links */
.add-to-box .or {
  display: none;
}

.product-view .add-to-links {
  clear: both;
  margin-top: 0px;
  margin-right: 15px;
  float: left;
}
.product-view .add-to-links:after {
  content: '';
  display: table;
  clear: both;
}
.product-view .add-to-links li {
  float: left;
}
.product-view .add-to-links a {
  padding: 2px 7px 2px 0px;
  margin-left: 7px;
  border-right: 1px solid #CCCCCC;
}
.product-view .add-to-links li:first-child a {
  margin-left: 0px;
}
.product-view .add-to-links li:last-child a {
  border-right: 0px;
}

/* Product view sharing links

Product view sharing links

<h1>Result</h1>

Markup: <div class="sharer-block">
    <ul class="sharing-links">
        <li><a href="#" class="link-email-friend" title="Email to a Friend">Email to a Friend</a></li>
        <li><a href="#" target="_blank" title="Share on Facebook" class="link-facebook">Share Facebook</a></li>
        <li><a href="#" target="_blank" title="Share on Twitter" class="link-twitter">Share on Twitter</a></li>
    </ul>
    <p>Partager</p>
</div>

Styleguide 6.3
*/
.sharer-block {
  position: relative;
  float: right;
}
.sharer-block > p {
  color: #5a8aba;
  cursor: pointer;
  padding: 5px 33px 5px 0;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") right -1362px no-repeat;
  font-size: 14px;
  display: inline-block;
}
.sharer-block:after {
  content: '';
  display: table;
  clear: both;
}
.sharer-block .sharing-links {
  background: #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 10px 0 0 10px;
  position: absolute;
  width: 140px;
  right: -4px;
  top: -62px;
  display: none;
  border: 4px solid #E6E6E6;
}
.sharer-block .sharing-links:after {
  clear: both;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-top: 8px solid #E6E6E6;
  border-bottom: none;
  top: 46px;
  right: 5px;
}
.sharer-block .sharing-links li {
  float: left;
  padding: 0px 7px 7px;
}
.sharer-block .sharing-links a {
  text-indent: -9999px;
  display: block;
  width: 26px;
  height: 26px;
}
.sharer-block .sharing-links a:hover {
  opacity: 0.8;
}
.sharer-block .sharing-links a.link-wishlist {
  background-position: 0px -225px;
}
.sharer-block .sharing-links a.link-compare {
  background-position: 0px -250px;
}
.sharer-block .sharing-links a.link-email-friend {
  background-position: 0px -322px;
}
.sharer-block .sharing-links a.link-facebook {
  background-position: 0px -425px;
}
.sharer-block .sharing-links a.link-twitter {
  background-position: 0px -372px;
}

/* Product view collateral

Product view collateral

<h1>Result</h1>

Markup: <div class="product-collateral toggle-content tabs">
    <dl id="collateral-tabs" class="collateral-tabs">
        <!-- don't forget to add data-name which is the name that will be display in url -->
        <dt class="tab current">
            <span data-name="description">Description</span>
        </dt>
        <dd class="tab-container current">
            <div class="tab-content">
                <h2>Details</h2>
                <div class="std">
                    Loose fitting from the shoulders, open weave knit top. Semi sheer.
                    Slips on. Faux button closure detail on the back. Linen/Cotton. Machine wash.
                </div>
            </div>
         </dd>
         <dt class="tab">
            <span data-name="additional-information">Additional Information</span>
        </dt>
        <dd class="tab-container">
            <div class="tab-content">
                <h2>Additional Information</h2>
                <table class="data-table" id="product-attribute-specs-table">
                    <colgroup>
                        <col width="25%">
                        <col>
                    </colgroup>
                    <tbody>
                        <tr class="first odd">
                            <th class="label">Occasion</th>
                            <td class="data last">Casual</td>
                        </tr>
                        <tr class="even">
                            <th class="label">Type</th>
                            <td class="data last">Knits</td>
                        </tr>
                        <tr class="last odd">
                            <th class="label">Gender</th>
                            <td class="data last">Female</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </dd>
        <dt class="tab last">
            <span data-name="reviews">Reviews</span>
        </dt>
        <dd class="tab-container last">
            <div class="tab-content">
                <div class="box-collateral box-reviews" id="customer-reviews">
                    <p class="no-rating"><a href="#">Be the first to review this product</a></p>
                </div>
            </div>
        </dd>
    </dl>
</div>

Styleguide 6.4
*/
.product-collateral {
  clear: both;
  margin-bottom: 20px;
  overflow: hidden;
}

.box-collateral {
  clear: both;
}

.tab-content:after {
  content: '';
  display: table;
  clear: both;
}

.product-collateral .toggle-tabs {
  display: table;
  width: 100%;
  position: relative;
  background-color: #e8e8e8;
  color: #000000;
  font-weight: 700;
}
.product-collateral .toggle-tabs li {
  display: table-cell;
  vertical-align: middle;
  border-left: 1px solid #fff;
  line-height: 55px;
  text-align: center;
  cursor: pointer;
}
.product-collateral .toggle-tabs li > span {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  display: inline-block;
  padding: 0 15px;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 12px;
  position: relative;
  vertical-align: middle;
  text-align: center;
  line-height: normal;
}
.product-collateral .toggle-tabs li.current {
  position: relative;
}
.product-collateral .toggle-tabs li.current:after {
  bottom: -8px;
  left: 50%;
  margin-left: -4px;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
  border-top: 8px solid #f46c00;
  border-bottom: none;
}
.product-collateral .toggle-tabs li.current > span {
  z-index: 5;
}
.product-collateral .toggle-tabs li.current,
.product-collateral .toggle-tabs li:hover {
  color: #fff;
  background-color: #f46c00;
}
.product-collateral .toggle-tabs li:first-child {
  border-left: none;
}
.product-collateral .toggle-tabs:after {
  content: '';
  display: table;
  clear: both;
}
.product-collateral > dl {
  width: 100%;
}
.product-collateral > dl > dt {
  display: none;
}
.product-collateral > dl > dd {
  width: 100%;
  display: none;
  padding-top: 35px;
}
.product-collateral > dl > dd.current {
  display: block;
}

.product-view .product-shop .product-name {
  display: block;
}

.product-img-box .product-name {
  display: none;
}

.product-view .ratings .rating-links {
  clear: left;
  float: left;
  margin-top: 0;
}

#product-attribute-specs-table {
  max-width: 50em;
  border: 1px solid #C0C0C0;
}
#product-attribute-specs-table th {
  border-right: 1px solid #C0C0C0;
  border-bottom: 1px solid #C0C0C0;
}

/* -------------------------------------------- *
 * Catalog - Grouped Product List
 */
.grouped-items-table-wrapper {
  border: solid 1px #C0C0C0;
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
}
.grouped-items-table-wrapper tbody tr:last-child td {
  border-bottom: none;
}

.grouped-items-table .name-wrapper {
  color: #5a8aba;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}
.grouped-items-table .qty-wrapper {
  padding-top: 7px;
}
.grouped-items-table .qty-label {
  margin-left: 7px;
}
.grouped-items-table td {
  padding: 4px;
}

/* -------------------------------------------- *
 * Catalog - Product Options
 */
.product-options {
  width: 100%;
  margin: 10px 0 0;
  padding: 10px 15px 15px;
  border: 1px solid #CCCCCC;
  clear: both;
  position: relative;
}

.product-options p.required {
  position: absolute;
  top: 6px;
  right: 15px;
}

.product-options dt {
  margin: 10px 0 3px;
  font-weight: normal;
}

.product-options dt:first-child {
  margin-top: 0;
}

.product-options dd .qty-holder {
  display: block;
  padding: 10px 0 0 0;
}

.product-options dd .qty-holder .qty {
  width: 3em;
}

.product-options dd .qty-holder label {
  vertical-align: middle;
}

.product-options dd .qty-disabled {
  background: none;
  border: 0;
  padding: 0 2px;
}

.product-options dd {
  padding: 0 0 10px 0;
  margin: 0 0 5px;
  border-bottom: 1px solid #EDEDED;
}

.product-options dl.last dd.last {
  border-bottom: 0;
  padding-bottom: 5px;
  margin-bottom: 0;
}

.product-options dd .input-text {
  width: 98%;
}

.product-options dd .input-box {
  padding-top: 0;
}

.product-options dd input.datetime-picker {
  width: 150px;
}

.product-options dd .time-picker {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  padding: 2px 0;
  vertical-align: middle;
}

.product-options dd textarea {
  width: 98%;
  height: 8em;
}

.product-options dd select {
  width: 330px;
  max-width: 100%;
}

.product-options ul.options-list {
  margin-right: 5px;
}

.product-options ul.options-list li {
  line-height: 1.5;
  margin-bottom: 7px;
}

.product-options ul.options-list li:last-child {
  margin-bottom: 0;
}

.product-options ul.options-list .radio,
.product-options ul.options-list .checkbox {
  float: left;
  margin-top: 5px;
}

.product-options ul.options-list .label {
  display: block;
}

.product-options ul.options-list label {
  font-weight: normal;
}

.product-options p.note {
  margin: 0;
  font-size: 10px;
}

.product-options-bottom {
  background-color: #F4F4F4;
  padding: 15px 20px;
  border: 1px solid #CCCCCC;
  border-top: 0;
  margin-bottom: 10px;
}

.product-options-bottom:after {
  content: '';
  display: table;
  clear: both;
}

.product-options-bottom .product-pricing,
.product-options-bottom .tier-prices {
  float: right;
  margin: 0;
  padding: 0 0 10px;
  border: 0;
  background: 0;
  color: #373737;
}

.product-options-bottom .tier-prices li {
  background: 0;
  padding: 2px 0;
}

.product-options-bottom .tier-prices .price,
.product-options-bottom .tier-prices .benefit {
  color: #373737;
}

/* "display: none" should be removed if products on site have a long list of product options and those product options */
/*  affect the price so that the customer can see the updated price close to the "Add to Cart" button */
.product-options-bottom .price-box {
  display: none;
  float: right;
  margin: 0 0 10px;
  padding: 0;
}

.product-options-bottom .price-tax {
  float: left;
}

/* -------------------------------------------- *
 * Related Products
 */
/* Block: Related */
/* Product view related product

Product view related product

<h1>Result</h1>

Markup: <div class="block block-related">
    <div class="block-title">
        <h2>Related Products</h2>
    </div>
    <div class="block-content">
        <p class="block-subtitle">
            Check items to add to the cart or&nbsp;
            <a href="#" onclick="selectAllRelated(this); return false;">select all</a>
        </p>
        <ol class="mini-products-list" id="block-related">
            <li class="item odd">
                <input type="checkbox" class="checkbox related-checkbox" id="related-checkbox554" name="related_products[]" value="554" />
                <div class="product">
                    <a href="#" title="Swiss Movement Sports Watch" class="product-image">
                        <img src="http://placehold.it/75x75" width="75" height="75" alt="Swiss Movement Sports Watch">
                    </a>
                    <div class="product-details">
                        <p class="product-name">
                            <a href="#">Swiss Movement Sports Watch</a>
                        </p>                  
                        <div class="price-box">
                            <span class="regular-price" id="product-price-554-related">
                                <span class="price">$500.00</span>
                            </span>
                        </div>
                        <a href="#" class="link-wishlist">Add to Wishlist</a>
                    </div>
                </div>
            </li>
            <li class="item last even">
                <input type="checkbox" class="checkbox related-checkbox" id="related-checkbox553" name="related_products[]" value="553" />
                <div class="product">
                    <a href="#" title="Silver Desert Necklace" class="product-image">
                        <img src="http://placehold.it/75x75" width="75" height="75" alt="Silver Desert Necklace">
                    </a>
                    <div class="product-details">
                        <p class="product-name">
                            <a href="#">Silver Desert Necklace</a>
                        </p>
                        <div class="price-box map-info">
                          <a href="#" id="msrp-click-553y0G1zSrCgD7Hw4fZjzo1">Click for price</a>
                        </div>
                        <a href="#" class="link-wishlist">Add to Wishlist</a>
                    </div>
                </div>
            </li>
        </ol>
    </div>
</div>

Styleguide 6.5
*/
.block-related li {
  margin-bottom: 7px;
}
.block-related .block-title {
  border-bottom: none;
}
.block-related .block-title h2 {
  margin: 0;
  margin-bottom: 0.5em;
  color: #d2421f;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  text-rendering: optimizeLegibility;
  text-transform: uppercase;
  margin-bottom: 0;
}
.block-related .block-subtitle {
  margin-bottom: 7px;
}
.block-related .product {
  margin-left: 20px;
  position: relative;
}
.block-related .checkbox {
  float: left;
  margin-top: 36px;
}
.block-related .product-details {
  margin-left: 90px;
}
.block-related .product-name {
  margin-bottom: 3px;
}
.block-related .product-details .price-box {
  margin: 2px 0 3px;
}
.block-related .product-details .price-box a,
.block-related .product-details .price-box p,
.block-related .product-details .price-box span {
  float: left;
  margin-left: 3px;
}
.block-related .product-details .price-box a:first-child,
.block-related .product-details .price-box p:first-child,
.block-related .product-details .price-box span:first-child {
  margin-left: 0;
}
.block-related .product-details .price-box:after {
  content: '';
  display: table;
  clear: both;
}
.block-related .link-wishlist {
  display: none;
}

/* -------------------------------------------- *
 * Upsell Products
 */
.box-up-sell {
  margin-top: 20px;
}
.box-up-sell .ratings {
  display: none;
}

/* Catalog MSRP

Catalog MSRP

<h1>Result</h1>

Markup: <!-- adding a div in relative for the exemple -->
<div style="position:relative;height:580px;"> 
    <div id="map-popup" class="map-popup">
        <a href="#" class="map-popup-close" id="map-popup-close">×</a>
        <div class="map-popup-heading">
            <h3 id="map-popup-heading">Silver Desert Necklace</h3>  
        </div>
        <div class="map-popup-content" id="map-popup-content" style="visibility: visible;">
            <div class="map-popup-msrp" id="map-popup-msrp-box">
              <span class="label">Price:</span>
              <span style="text-decoration:line-through;" id="map-popup-msrp">$99</span>
            </div>
            <div class="map-popup-price" id="map-popup-price-box">
                <span class="label">Actual Price:</span>
                <span id="map-popup-price">
                    <div class="price-box">
                        <span class="regular-price" id="product-price-553-related">
                            <span class="price">$210.00</span>
                        </span>
                    </div>
                </span>
            </div>
            <div class="map-popup-checkout">
                <form action="#" method="POST" id="product_addtocart_form_from_popup">
                    <input type="hidden" name="product" class="product_id" value="553" id="map-popup-product-id"/>
                    <div class="additional-addtocart-box"></div>
                    <button type="button" title="Add to Cart" class="button btn-cart" id="map-popup-button"><span><span>Add to Cart</span></span></button>
                </form>
            </div>
        </div>
        <div class="map-popup-text map-popup-only-text" id="map-popup-text">
            Our price is lower than the manufacturer's "minimum advertised price."  As a result, we cannot show you the price in catalog or the product page. <br><br>
            You have no obligation to purchase the product once you know the price. You can simply remove the item from your cart.
        </div>
        <div class="map-popup-text" id="map-popup-text-what-this">
            Our price is lower than the manufacturer's "minimum advertised price."  As a result, we cannot show you the price in catalog or the product page. <br><br>
            You have no obligation to purchase the product once you know the price. You can simply remove the item from your cart.
        </div>
    </div>
</div>

Styleguide 7
*/
/* ============================================ *
 * Catalog - MSRP MAP Popup
 * ============================================ */
.cart-msrp-totals {
  color: red;
  font-size: 12px !important;
  font-weight: bold;
  margin: 10px 10px 0;
  padding: 10px;
  text-align: right;
  text-transform: uppercase;
}

.map-cart-sidebar-total {
  color: red;
  display: block;
  font-size: 10px;
  font-weight: bold;
  text-align: left;
  padding: 2px 5px;
}

.map-popup {
  background: #FFFFFF;
  border: 5px solid #CCCCCC;
  margin: 12px 0 0;
  position: absolute;
  text-align: left;
  width: 450px;
  z-index: 100;
}
.map-popup.map-popup-right {
  left: 10px !important;
}
.map-popup.map-popup-left {
  left: auto !important;
  right: 10px !important;
}
.map-popup .map-popup-heading {
  padding: 8px 10px;
  margin-right: 40px;
  width: auto;
}
.map-popup .map-popup-heading h3 {
  font-size: 13px;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: break-word;
  text-align: left;
  text-overflow: ellipsis;
}
.map-popup .map-popup-close {
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 36px;
  width: 36px;
  font-size: 20px;
  line-height: 32px;
  text-align: center;
}
.map-popup .map-popup-content {
  border-top: 1px solid #EDEDED;
  padding: 10px;
  margin: 0 10px;
  overflow: hidden;
  text-align: left;
}
.map-popup .map-popup-checkout {
  padding: 10px 0;
}
.map-popup .map-popup-checkout form:after {
  content: '';
  display: table;
  clear: both;
}
.map-popup .map-popup-checkout span {
  display: block;
}
.map-popup .map-popup-checkout .button {
  float: left;
  margin: 0 2px;
  clear: left;
}
.map-popup .map-popup-checkout .additional-addtocart-box {
  float: left;
  min-width: 210px;
}
.map-popup .map-popup-checkout .additional-addtocart-box li {
  list-style-type: none;
}
.map-popup .map-popup-checkout .paypal-logo {
  width: auto;
}
.map-popup .map-popup-checkout .paypal-logo a {
  display: inline-block;
  float: left;
  clear: left;
}
.map-popup .map-popup-checkout .paypal-logo .paypal-or {
  float: left;
  text-align: center;
  padding: 5px 15px;
  clear: left;
}
.map-popup .map-popup-checkout .paypal-logo:after {
  content: '';
  display: table;
  clear: both;
}
.map-popup .map-popup-checkout .paypal-logo .bml_button a {
  clear: left;
}
.map-popup .map-popup-checkout:after {
  content: '';
  display: table;
  clear: both;
}
.map-popup .map-popup-price {
  padding: 10px 0;
}
.map-popup .map-popup-price .price-box,
.map-popup .map-popup-price .price-box .special-price {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.map-popup .map-popup-text {
  padding: 10px 0;
  margin: 0 10px;
  word-wrap: break-word;
}
.map-popup .map-popup-text,
.map-popup .map-popup-only-text {
  border-top: 1px solid #EDEDED;
}

/* Compare

Compare

<h1>Result</h1>

Markup: <table class="data-table compare-table" id="product_comparison">
  <colgroup>
    <col width="1">
    <col width="50%">
    <col width="50%">
  </colgroup>
  <thead>
    <tr class="first last">
      <th>&nbsp;</th>
      <td class="a-center"><a href="#" class="btn-remove" title="Remove This Item">Remove This Item</a></td>
      <td class="a-center"><a href="#" class="btn-remove" title="Remove This Item">Remove This Item</a></td>
    </tr>
  </thead>
  <tbody>
    <tr class="product-shop-row top first odd">
      <th>&nbsp;</th>
      <td>
        <h2 class="product-name">
          <a href="#" title="Isla Crossbody Handbag">Isla Crossbody Handbag</a>
        </h2>
        <a class="product-image" href="#" title="Isla Crossbody Handbag">
          <img src="http://placehold.it/180x120/" width="180" height="120" alt="Isla Crossbody Handbag">
        </a>
      </td>
      <td class="last">
        <h2 class="product-name">
          <a href="#" title="Flatiron Tablet Sleeve">Flatiron Tablet Sleeve</a>
        </h2>
        <a class="product-image" href="#" title="Flatiron Tablet Sleeve">
          <img src="http://placehold.it/180x120/" width="180 height="120" alt="Flatiron Tablet Sleeve">
        </a>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr class="odd">
      <th>
        <span class="nobr">Classement</span>
      </th>
      <td>
        <div class="std">
           <img src="../../skin/frontend/rwd/vcs/images/village-certification-small-3.png"/>
        </div>
      </td>
      <td class="last">
        <div class="std">
           <img src="../../skin/frontend/rwd/vcs/images/village-certification-small-3.png"/>
        </div>
      </td>
    </tr>
    <tr class="even">
      <th>
        <span class="nobr">Description</span>
      </th>
      <td>
        <div class="std">
           Pebbled leather. Contrast stitching. Fold over flap with Fasten closure. Crossbody strap. 6" x 8" x 0.75".
        </div>
      </td>
      <td class="last">
        <div class="std">
           Pebble textured leather tabled case. Top zip closure. Exterior zipper pocket. Fully lined with back wall slip pocket. 8.75" x 11" x .5". Imported.
        </div>
      </td>
    </tr>
    <tr class="odd">
      <th>
        <span class="nobr">Short Description</span>
      </th>
      <td>
        <div class="std">
           Form follows function with this decidedly chic mini bag.
        </div>
      </td>
      <td class="last">
        <div class="std">
           Protect your tablet with our minimal tablet sleeve.
        </div>
      </td>
    </tr>
    <tr class="even">
      <th>
        <span class="nobr">SKU</span>
      </th>
      <td>
        <div class="std">
           abl000
        </div>
      </td>
      <td class="last">
        <div class="std">
           abl002
        </div>
      </td>
    </tr>
    <tr class="odd">
      <th>
        <span class="nobr">Color</span>
      </th>
      <td>
        <div class="std">
           Black
        </div>
      </td>
      <td class="last">
        <div class="std">
           Black
        </div>
      </td>
    </tr>
    <tr class="even">
      <th>
        <span class="nobr">Équipement</span>
      </th>
      <td class="on">
        <div class="std">
           On
        </div>
      </td>
      <td class="last off">
        <div class="std">
           Off
        </div>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr class="add-to-row last odd">
      <th>&nbsp;</th>
      <td>
        <p>Votre séjour tout compris :</p>
        <div class="price-box">
          <span class="regular-price" id="product-price-370-compare-list-bottom">
          <span class="price">$290.00</span></span>
        </div>
        <p>
          <button type="button" title="Add to Cart" class="button btn-cart orange"><span><span>Add to Cart</span></span></button>
        </p>
      </td>
      <td class="last">
        <p>Votre séjour tout compris :</p>
        <div class="price-box">
          <span class="regular-price" id="product-price-372-compare-list-bottom">
            <span class="price">$150.00</span>
          </span>
        </div>
        <p>
          <button type="button" title="Add to Cart" class="button btn-cart orange"><span><span>Add to Cart</span></span></button>
        </p>
      </td>
    </tr>
  </tbody>
</table>

Styleguide 18
*/
/* ============================================ *
 * Catalog - Compare
 * ============================================ */
.catalog-product-compare-index .page-title h1 {
  font-size: 45px;
  border: none;
  color: #f26c00;
}

.block-compare .product-name:after {
  content: '';
  display: table;
  clear: both;
}

.compare-table .product-image {
  display: inline-block;
}

.compare-table {
  text-align: center;
  border: 5px solid #d3e1ef;
}
.compare-table .btn-remove {
  color: #1a1a1a;
  border: none;
  text-decoration: underline;
  font-size: 11px;
  line-height: 13px;
  height: auto;
  width: auto;
  position: relative;
}
.compare-table .btn-remove:after {
  display: none;
}
.compare-table .btn-remove:before {
  content: '×';
  width: 100%;
  font-size: 8px;
  font-weight: bold;
  color: #000000;
  position: absolute;
  left: -9px;
  top: 0;
  text-align: left;
}
.compare-table .btn-remove:hover {
  background: none;
}
.compare-table .price-box {
  margin: 0 0 9px 0;
}
.compare-table .price {
  font-size: 37px;
  line-height: 37px;
}
.compare-table .product-name {
  font-weight: bold;
}
.compare-table .rel {
  position: relative;
}
.compare-table .on, .compare-table .off {
  text-indent: -9999px;
}
.compare-table .on .std, .compare-table .off .std {
  height: 11px;
  width: 15px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 2px -2099px no-repeat;
  margin: 0 auto;
}
.compare-table .off .std {
  background-position: 0 -2153px;
}
.compare-table .std.tooltip {
  position: relative;
  display: inline-block;
  margin-top: 5px;
}
.compare-table tbody td:nth-child(even) {
  background: #e6eef6;
}
.compare-table tbody tr {
  border-top: 1px dotted #000000;
}
.compare-table thead th, .compare-table tbody td {
  border: none;
  padding: 6px;
  vertical-align: middle;
}
.compare-table thead tr td {
  padding-top: 25px;
}
.compare-table th {
  color: #dc5528;
  font-weight: 700;
}
.compare-table th, .compare-table .add-to-row td {
  background: none;
}
.compare-table .add-to-row td {
  padding-top: 15px;
  padding-bottom: 35px;
}
.compare-table p {
  font-weight: bold;
  font-size: 11px;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}
.compare-table .btn-cart {
  font-weight: bold;
}
.compare-table .std img {
  margin: 0 auto;
}

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* ============================================ *
 * Checkout - Layout
 * ============================================ */
.cart-totals,
.cart-forms .discount,
.cart-forms .giftcard,
.cart-forms .shipping {
  padding: 10px;
  background-color: #F4F4F4;
  border: 1px solid #CCCCCC;
}

.cart-table,
.cart-totals,
.cart-forms .discount,
.cart-forms .giftcard,
.cart-forms .shipping {
  margin-bottom: 20px;
}

.display-both-prices .cart-table {
  float: none;
  width: 100%;
}
.display-both-prices .cart-forms {
  float: left;
  padding-right: 10px;
  padding-left: 0;
}
.display-both-prices .cart-totals-wrapper,
.display-both-prices .crosssell {
  padding-left: 10px;
}
.display-both-prices .cart-forms,
.display-both-prices .cart-totals-wrapper,
.display-both-prices .crosssell {
  width: 50%;
}
.display-both-prices .crosssell {
  clear: right;
  float: right;
}

/* ============================================ *
 * Checkout - Cart
 * ============================================ */
.checkout-cart-index .page-title {
  border-bottom: 0;
}
.checkout-cart-index .page-title:after {
  content: '';
  display: table;
  clear: both;
}
.checkout-cart-index .checkout-types button {
  font-weight: 700;
  height: 35px;
}

.prev-link {
  display: inline-block;
  vertical-align: middle;
}
.prev-link a {
  display: block;
  line-height: 35px;
  text-decoration: underline;
}

.checkout-types {
  float: right;
  text-align: right;
  max-width: 100%;
  /* We always want this shipping method to display on its own line */
}
.checkout-types li {
  vertical-align: top;
  margin: 0 0 5px 5px;
}
.checkout-types li:after {
  content: '';
  display: table;
  clear: both;
}
.checkout-types li img {
  display: inline;
  vertical-align: top;
}
.checkout-types li:first-child {
  margin-left: 0;
}
.checkout-types .method-checkout-cart-methods-multishipping {
  display: block;
}
.checkout-types.top li {
  display: inline-block;
}
.checkout-types.top .bml_button {
  display: inline-block;
  vertical-align: top;
}
.checkout-types.top .bml_button img {
  display: block;
}
.checkout-types.bottom .paypal-logo a, .checkout-types.minicart .paypal-logo a {
  display: block;
}
.checkout-types.bottom .paypal-or, .checkout-types.minicart .paypal-or {
  margin: 0px;
  width: 150px;
  display: block;
  text-align: center;
  float: right;
}

.cart-totals .checkout-types .btn-checkout {
  margin-bottom: 7px;
}

.cart-table {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}
.cart-table th,
.cart-table td,
.cart-table tbody td {
  border-bottom: none;
  vertical-align: top;
}
.cart-table h2 {
  color: #d2421f;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 0;
}
.cart-table thead th,
.cart-table tbody td {
  background-color: transparent;
  padding: 10px 5px;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}
.cart-table .product-cart-info,
.cart-table .product-cart-actions {
  padding-left: 15px;
}
.cart-table tr {
  border-bottom: 1px solid #C0C0C0;
}
.cart-table tfoot tr {
  background: none;
}
.cart-table tfoot tr > td:after {
  content: '';
  display: table;
  clear: both;
}
.cart-table span.or {
  font-size: 9px;
  padding: 0 5px;
  text-transform: uppercase;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}
.cart-table .product-cart-image .cart-links,
.cart-table .product-cart-info .btn-remove,
.cart-table .product-cart-actions .button {
  display: none;
}
.cart-table .product-cart-image {
  padding-left: 0;
  padding-right: 0;
}
.cart-table .product-cart-image .product-image img {
  max-width: 100%;
  width: 100%;
}
.cart-table .product-cart-image a.cart-edit {
  display: none;
}
.cart-table .product-cart-sku {
  font-family: Georgia, Times, "Times New Roman", serif;
  font-style: italic;
  font-size: 11px;
  margin: 5px 0 12px;
}
.cart-table .product-cart-sku .label {
  font-weight: 600;
}
.cart-table .btn-empty {
  float: left;
}
.cart-table .product-cart-total,
.cart-table .product-cart-price {
  text-align: center;
}
.cart-table .cart-tax-total {
  position: relative;
  cursor: pointer;
}
.cart-table .cart-tax-total:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 6px solid #5a8aba;
  border-left: none;
  position: absolute;
  top: 3px;
  right: -11px;
}
.cart-table .cart-tax-total.cart-tax-total-expanded:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 6px solid #5a8aba;
  border-bottom: none;
  right: -15px;
  top: 6px;
}
.cart-table .cart-links > li {
  white-space: nowrap;
  line-height: 1.3;
  margin-bottom: 5px;
  min-width: 65px;
  font-size: 12px;
}
.cart-table .cart-links > li > a {
  display: block;
}
.cart-table .cart-links > li:last-child {
  margin-bottom: 0;
}
.cart-table .product-cart-actions {
  min-width: 60px;
  text-align: center;
}
.cart-table .product-cart-actions .qty {
  height: 30px;
  border-color: #C0C0C0;
  border-radius: 0;
  margin-bottom: 10px;
  text-align: center;
  width: 3em;
}
.cart-table .product-cart-actions .button {
  margin-bottom: 5px;
}
.cart-table .item-options {
  padding-left: 15px;
}

/* ============================================ *
 * Checkout - Estimate Shipping and Tax
 * ============================================ */
.shipping h2 {
  font-size: 11px;
  font-weight: bold;
  margin: 0 0 5px;
}
.shipping select {
  max-width: 100%;
  height: 30px;
  display: block;
  border: 1px solid #C0C0C0;
}
.shipping select.validation-failed {
  border-color: #FF0000;
}
.shipping .shipping-desc {
  display: none;
}
.shipping .buttons-set {
  border: none;
  margin: 0;
  padding: 0;
}
.shipping .form-list:after {
  content: '';
  display: table;
  clear: both;
}
.shipping .form-list li {
  float: left;
  margin: 5px 2% 10px 0;
}
.shipping .form-list .shipping-country {
  width: 37%;
}
.shipping .form-list .shipping-region {
  width: 41%;
}
.shipping .form-list .shipping-postcode {
  margin-right: 0;
  width: 18%;
}
.shipping .form-list .shipping-postcode input {
  margin-top: 4px;
}
.shipping .form-list .input-box {
  padding-top: 0;
}
.shipping .form-list input {
  height: 30px;
  margin-top: 4px;
}
.shipping .form-list label {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}
.shipping .sp-methods {
  padding: 10px 0 0;
  text-align: left;
}
.shipping .sp-methods dd {
  margin-bottom: 10px;
}
.shipping .sp-methods label {
  font-family: Georgia, Times, "Times New Roman", serif;
  font-size: 11px;
  font-style: italic;
  min-width: 100px;
}
.shipping .sp-methods label span {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-weight: bold;
  font-style: normal;
}
.shipping #co-shipping-method-form .buttons-set .button {
  float: left;
  margin-left: 0;
}
.shipping #co-shipping-method-form .sp-methods dd label {
  border: 1px solid #CCCCCC;
  background-color: #e8e8e8;
  min-width: 220px;
}
.shipping #co-shipping-method-form .sp-methods dd label:hover {
  background-color: gainsboro;
}

.cart .cart-totals {
  text-align: right;
}
.cart .cart-totals:after {
  content: '';
  display: table;
  clear: both;
}
.cart .cart-totals table {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 11px;
  margin-bottom: 20px;
  text-transform: uppercase;
  width: 100%;
}
.cart .cart-totals table td {
  padding: 2px 0px;
}
.cart .cart-totals table td:first-child {
  padding-right: 10px;
  min-width: 120px;
}
.cart .cart-totals table tbody tr:last-child td,
.cart .cart-totals table tbody tr:last-child th {
  padding-bottom: 10px;
}
.cart .cart-totals table tfoot {
  border-top: 1px solid #E6E6E6;
  border-bottom: 1px solid #E6E6E6;
}
.cart .cart-totals table tfoot td {
  font-size: 24px;
  padding: 2px 5px;
  vertical-align: top;
}
.cart .cart-totals table tfoot strong span,
.cart .cart-totals table tfoot span.price {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}
.cart .cart-totals table tfoot strong {
  font-weight: 400;
}

.discount-form:after,
#giftcard-form:after {
  content: '';
  display: table;
  clear: both;
}

#discount-coupon-form,
.cart .giftcard {
  width: 100%;
}
#discount-coupon-form h2,
.cart .giftcard h2 {
  display: none;
}
#discount-coupon-form label,
.cart .giftcard label {
  text-align: left;
  display: inline-block;
  margin-right: 10px;
}
#discount-coupon-form .field-wrapper,
.cart .giftcard .field-wrapper {
  display: inline-block;
}
#discount-coupon-form .validation-advice,
.cart .giftcard .validation-advice {
  display: inline;
}
#discount-coupon-form .button-wrapper,
.cart .giftcard .button-wrapper {
  display: inline-block;
  vertical-align: bottom;
}
#discount-coupon-form .button-wrapper > button,
.cart .giftcard .button-wrapper > button {
  float: left;
}
#discount-coupon-form .input-text,
.cart .giftcard .input-text {
  border-radius: 0;
  height: 30px;
  margin: 4px 10px 0 0;
  width: 190px;
}

.cart .giftcard p {
  margin-bottom: 7px;
}

.cart .giftcard .check-gc-status {
  float: left;
  padding: 0px;
}
.cart .giftcard .check-gc-status > span > span {
  font-size: 13px;
  text-transform: none;
}

/* ============================================ *
 * Checkout - Cart Cross sell
 * ============================================ */
.crosssell h2 {
  color: #5a8aba;
}
.crosssell #crosssell-products-list .button,
.crosssell #crosssell-products-list .add-to-links {
  display: none;
}

#popin_crosssell {
  display: none;
}
#popin_crosssell .messages {
  top: 50%;
  transform: translate(-50%, -50%);
  margin-left: 0 !important;
}
#popin_crosssell div[id^="prestation-"] > strong {
  color: #5a8aba;
}
#popin_crosssell div[id^="participant-prestation"] {
  color: #373737;
  margin-top: 15px;
}
#popin_crosssell div[id^="participant-prestation"] + div[id^="participant-prestation"] {
  margin-top: 20px;
}
#popin_crosssell select {
  margin-left: 20px;
  font-size: 13px;
  border: 1px solid #CCCCCC;
  padding: 0 5px;
}
#popin_crosssell .success-msg > p {
  font-size: 14px;
  color: #f46c00;
  line-height: 1.5;
  margin-bottom: 20px;
}
#popin_crosssell .success-msg .description-level {
  font-weight: 500;
  margin-top: 10px;
  font-size: 12px;
  color: #676767;
}
#popin_crosssell .success-msg > div > div + div {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dotted #CCCCCC;
}
#popin_crosssell .success-msg > div + div {
  text-align: center;
  margin-top: 20px;
}
#popin_crosssell #valid-ski {
  font-size: 14px;
  font-weight: 700;
  border-radius: 3px;
  display: inline-block;
  background: #f46c00;
  min-width: 140px;
  margin-top: 20px;
  border: 0;
  color: #fff;
  padding: 7px 15px;
  line-height: 19px;
  text-align: center;
  text-transform: uppercase;
}

/* Change the layout to 2 columns at a breakpoint that is higher than a 3 columns layout would normally break */
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* ============================================ *
 * Checkout - One Page
 * ============================================ */
.checkout-onepage-index .col-left {
  display: none;
}

.checkout-onepage-index .col-main {
  width: auto;
  float: none;
}

.child-birthdate-display {
  line-height: 2.6;
}

.checkout-onepage-index .col-main {
  float: left;
  width: 68.75%;
  padding-right: 20px;
}
.checkout-onepage-index .col-right,
.checkout-onepage-index .col-left {
  width: 31.25%;
  display: block;
}
.checkout-onepage-index .col-right {
  padding-left: 0;
}

.opc select {
  width: 365px;
}

/* -------------------------------------------- *
 * Section Styling - Default
 */
.opc .section .step-title {
  width: 100%;
  border-top: 1px solid #ECECEC;
  position: relative;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.opc .section .step-title:after {
  content: '';
  display: table;
  clear: both;
}

.opc .section.allow:not(.active) .step-title {
  cursor: pointer;
}

/* Using .no-touch since touch devices emulate hover, thereby making steps look active that are not */
.no-touch .opc .section.allow:not(.active) .step-title:hover {
  background-color: #F4F4F4;
}

.opc .section.active .step-title {
  border-bottom: 1px solid #ECECEC;
}

.opc .section .step-title a {
  display: none;
}

.opc .section.allow:not(.active) .step-title a {
  display: block;
  float: right;
  line-height: 40px;
  height: 40px;
  padding: 0px 10px;
}

.no-touch .opc .section .step-title a:hover {
  text-decoration: none;
}

.opc .section .step-title .number,
.opc .section.allow.active .step-title .number,
.no-touch .opc .section.allow:hover .step-title .number {
  width: 26px;
  height: 26px;
  text-align: center;
  color: #FFFFFF;
  line-height: 26px;
  background-color: #f46c00;
  display: block;
  position: absolute;
  top: 50%;
  left: 10px;
  margin-top: -13px;
}

.opc .section.allow .step-title .number {
  background-color: #fab680;
}

.opc .section.allow .step-title h2 {
  color: #a2a2a2;
}

.opc .section.allow .step-title:hover h2,
.opc .section.active .step-title h2 {
  color: #5a8aba;
}

.opc .section .step-title h2 {
  font-size: 15px;
  font-weight: 400;
  line-height: 40px;
  height: 40px;
  float: left;
  margin: 0px 4px 0px 45px;
}

.opc .section .step {
  padding: 20px;
}
.opc .section .step:after {
  content: '';
  display: table;
  clear: both;
}

.opc h3 {
  font-weight: 500;
}

.opc .buttons-set {
  text-align: left;
}
.opc .buttons-set button.button {
  float: left;
  margin-left: 0;
  margin-right: 10px;
  margin-bottom: 0;
}
.opc .buttons-set p.required {
  float: right;
  margin-left: 5px;
  margin-bottom: 0;
}
.opc .buttons-set .back-link {
  float: right;
  margin: 0;
}
.opc .buttons-set a {
  line-height: 20px;
  display: inline-block;
  padding: 5px 5px 5px 0;
}

.opc #opc-login .step {
  padding: 0px;
}
.opc #opc-login .buttons-set {
  border-top: 0;
  padding-top: 5px;
}

.checkout-cart-index .please-wait {
  float: right;
  margin-left: 40%;
}

#checkout-step-login h3 {
  font-weight: 600;
  font-size: 29px;
  color: #f26c00;
  margin-top: 30px;
}
#checkout-step-login .checkout-login,
#checkout-step-login .checkout-register {
  border: 2px solid #f4e1c0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 20px;
  background: #fff;
}
#checkout-step-login .checkout-login input,
#checkout-step-login .checkout-register input {
  height: 32px;
  line-height: 32px;
  border: 1px solid #d6d6d6;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: inset 1px 1px 1px 0 #ddd;
  -webkit-box-shadow: inset 1px 1px 1px 0 #ddd;
  -o-box-shadow: inset 1px 1px 1px 0 #ddd;
  box-shadow: inset 1px 1px 1px 0 #ddd;
  background: #f8f8f8;
  color: #384043;
  margin-top: 0;
}
#checkout-step-login .checkout-login input:focus, #checkout-step-login .checkout-login input:active, #checkout-step-login .checkout-login input:hover,
#checkout-step-login .checkout-register input:focus,
#checkout-step-login .checkout-register input:active,
#checkout-step-login .checkout-register input:hover {
  outline: none;
}
#checkout-step-login .checkout-register .name-firstname {
  margin-left: 0;
}
#checkout-step-login .checkout-register #email_address {
  width: 258px;
}
#checkout-step-login .checkout-register #password,
#checkout-step-login .checkout-register #confirmation,
#checkout-step-login .checkout-register #street_5 {
  width: 170px;
}
#checkout-step-login .checkout-register #street_1 {
  width: 558px;
}
#checkout-step-login .checkout-register #street_3 {
  width: 132px;
}
#checkout-step-login .checkout-register .fb-login {
  margin-bottom: 10px;
}
#checkout-step-login .checkout-login li {
  width: 40%;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
}
#checkout-step-login .checkout-login li.error-msg {
  width: 100%;
}
#checkout-step-login .buttons-set {
  display: inline-block;
  vertical-align: top;
  border: 0;
  margin: 10px 0 0;
  padding: 0;
  width: 100%;
}
#checkout-step-login .buttons-set button {
  font-weight: 700;
  margin-left: 0;
  float: right;
  height: 35px;
  font-size: 14px;
}
#checkout-step-login .forgot-password-link {
  display: inline-block;
  vertical-align: middle;
  line-height: 35px;
  margin-top: 10px;
  font-size: 14px;
  margin-left: 10px;
  text-decoration: underline;
}
#checkout-step-login .fb-login {
  margin-top: 20px;
}
#checkout-step-login .required {
  color: #000;
}
#checkout-step-login .checkout-register .fb-login {
  margin-top: 10px;
}
#checkout-step-login .checkout-register .fb-login p {
  margin-bottom: 10px;
}

#checkout-step-billing h3 {
  font-weight: 600;
  font-size: 29px;
  color: #f26c00;
  margin-top: 30px;
}
#checkout-step-billing .buttons-set {
  width: 100%;
}
#checkout-step-billing .buttons-set button {
  float: right;
}
#checkout-step-billing .buttons-set .please-wait {
  float: right;
}
#checkout-step-billing #billing-form {
  border: 2px solid #f3e2c2;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 20px;
  background: #fff;
  /*.messages{
    width:75%;
  }*/
}
#checkout-step-billing #billing-form input {
  height: 32px;
  line-height: 32px;
  border: 1px solid #d6d6d6;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: inset 1px 1px 1px 0 #ddd;
  -webkit-box-shadow: inset 1px 1px 1px 0 #ddd;
  -o-box-shadow: inset 1px 1px 1px 0 #ddd;
  box-shadow: inset 1px 1px 1px 0 #ddd;
  background: #f8f8f8;
  color: #384043;
  margin-top: 0;
}
#checkout-step-billing #billing-form input:focus, #checkout-step-billing #billing-form input:active, #checkout-step-billing #billing-form input:hover {
  outline: none;
}
#checkout-step-billing #billing-form .name-firstname {
  margin-left: 0;
}
#checkout-step-billing #billing-form #email_address {
  width: 258px;
}
#checkout-step-billing #billing-form .email-field {
  margin: 0;
}
#checkout-step-billing #billing-form #password,
#checkout-step-billing #billing-form #confirmation,
#checkout-step-billing #billing-form #street_5 {
  width: 170px;
}
#checkout-step-billing #billing-form #street_1 {
  width: 558px;
}
#checkout-step-billing #billing-form #street_3 {
  width: 132px;
}

#checkout-step-vacationer h3 {
  font-weight: 600;
  font-size: 29px;
  color: #f26c00;
  margin-top: 30px;
}
#checkout-step-vacationer #checkout-vacationer-load input {
  height: 32px;
  line-height: 32px;
  border: 1px solid #d6d6d6;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: inset 1px 1px 1px 0 #ddd;
  -webkit-box-shadow: inset 1px 1px 1px 0 #ddd;
  -o-box-shadow: inset 1px 1px 1px 0 #ddd;
  box-shadow: inset 1px 1px 1px 0 #ddd;
  background: #f8f8f8;
  color: #384043;
  margin-top: 0;
}
#checkout-step-vacationer #checkout-vacationer-load input:focus, #checkout-step-vacationer #checkout-vacationer-load input:active, #checkout-step-vacationer #checkout-vacationer-load input:hover {
  outline: none;
}
#checkout-step-vacationer #checkout-vacationer-load .buttons-set {
  border: 0;
}
#checkout-step-vacationer #checkout-vacationer-load .buttons-set .button {
  font-weight: bold;
}
#checkout-step-vacationer #checkout-vacationer-load .buttons-set #vacationer-please-wait {
  margin-left: 60%;
}
#checkout-step-vacationer #checkout-vacationer-load .vacationer-complete {
  border: 2px solid #f4e1c0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 20px;
  background: #fff;
  margin-bottom: 10px;
}
#checkout-step-vacationer #checkout-vacationer-load .vacationer-complete .content,
#checkout-step-vacationer #checkout-vacationer-load .vacationer-complete .change-vacationer {
  display: inline-block;
  vertical-align: baseline;
}
#checkout-step-vacationer #checkout-vacationer-load .vacationer-complete .content {
  color: #000;
  font-weight: 700;
}
#checkout-step-vacationer #checkout-vacationer-load .vacationer-complete .change-vacationer {
  text-decoration: underline;
}
#checkout-step-vacationer #checkout-vacationer-load h4 {
  font-size: 20px;
  color: #5a8aba;
  font-weight: 400;
}
#checkout-step-vacationer #vacationers-fieldset .form-item {
  border: 2px solid #f4e1c0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 20px;
  background: #fff;
  margin-bottom: 10px;
}
#checkout-step-vacationer #vacationers-fieldset .fieldset p {
  font-weight: 600;
}
#checkout-step-vacationer #vacationers-fieldset .fieldset.choose label {
  line-height: 30px;
  font-weight: 600;
  font-size: 13px;
}
#checkout-step-vacationer #vacationers-fieldset .fieldset.choose .input-box {
  display: inline-block;
  vertical-align: top;
  padding-top: 0;
  padding-left: 10px;
}
#checkout-step-vacationer #vacationers-fieldset .fieldset.choose .input-box select {
  width: 335px;
}
#checkout-step-vacationer #vacationers-fieldset .fieldset .field {
  display: inline-block;
  vertical-align: top;
}
#checkout-step-vacationer #vacationers-fieldset .fieldset .field.name-name, #checkout-step-vacationer #vacationers-fieldset .fieldset .field.name-firstname, #checkout-step-vacationer #vacationers-fieldset .fieldset .field.name-birthdate {
  margin-left: 10px;
}
#checkout-step-vacationer #vacationers-fieldset .fieldset label {
  font-size: 12px;
  font-weight: 600;
}
#checkout-step-vacationer #vacationers-fieldset .fieldset select {
  height: 32px;
  line-height: 32px;
  border: 1px solid #d6d6d6;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: inset 1px 1px 1px 0 #ddd;
  -webkit-box-shadow: inset 1px 1px 1px 0 #ddd;
  -o-box-shadow: inset 1px 1px 1px 0 #ddd;
  box-shadow: inset 1px 1px 1px 0 #ddd;
  background: #f8f8f8;
  color: #384043;
}
#checkout-step-vacationer #vacationers-fieldset .fieldset select:focus, #checkout-step-vacationer #vacationers-fieldset .fieldset select:active, #checkout-step-vacationer #vacationers-fieldset .fieldset select:hover {
  outline: none;
}
#checkout-step-vacationer #vacationers-fieldset .fieldset .input-text {
  width: 180px;
  padding: 0 8px;
  color: #3d3d3d;
  font-weight: 700;
}
#checkout-step-vacationer #vacationers-fieldset .fieldset .input-text[name$="[gender]"] {
  width: 60px;
}
#checkout-step-vacationer #vacationers-fieldset .fieldset .input-text.disabled {
  opacity: 0.6;
}
#checkout-step-vacationer #vacationers-fieldset .add-vacationer {
  margin-top: 15px;
  font-size: 14px;
  font-weight: 700;
}

.checkout-onepage-index #ui-datepicker-div.vacationer-picker .ui-datepicker-prev, .checkout-onepage-index #ui-datepicker-div.vacationer-picker .ui-datepicker-next {
  display: none;
}

#checkout-step-payment h3,
#checkout-step-review h3 {
  font-weight: 600;
  font-size: 29px;
  color: #f26c00;
  margin-top: 30px;
}
#checkout-step-payment h4,
#checkout-step-review h4 {
  font-size: 20px;
  color: #5a8aba;
  font-weight: 400;
}
#checkout-step-payment h5,
#checkout-step-review h5 {
  font-size: 15px;
}
#checkout-step-payment #crosssell-insurance-list .item,
#checkout-step-review #crosssell-insurance-list .item {
  border-top: none;
}
#checkout-step-payment .summary,
#checkout-step-review .summary {
  border: 2px solid #f4e1c0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 10px 20px;
  background: #fff;
  margin-bottom: 10px;
}
#checkout-step-payment .summary.orange-points li,
#checkout-step-review .summary.orange-points li {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 13px;
}
#checkout-step-payment .summary .all-include,
#checkout-step-review .summary .all-include {
  margin-top: 20px;
  margin-bottom: 10px;
  padding-bottom: 0;
  border: none;
}
#checkout-step-payment .summary .all-include p,
#checkout-step-review .summary .all-include p {
  font-size: 12px;
  margin-bottom: 5px;
}
#checkout-step-payment .summary .all-include .title,
#checkout-step-review .summary .all-include .title {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  cursor: pointer;
  color: #f26c00;
  position: relative;
  margin-bottom: 10px;
  margin-top: 10px;
  padding-left: 12px;
}
#checkout-step-payment .summary .all-include .title:before,
#checkout-step-review .summary .all-include .title:before {
  content: '';
  width: 17px;
  height: 30px;
  position: absolute;
  top: 50%;
  margin-top: -5px;
  left: 13px;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #f26c00;
  border-right: none;
  border-left: 8px solid #f26c00;
  left: 0px;
}
#checkout-step-payment .summary .all-include .content-inner,
#checkout-step-review .summary .all-include .content-inner {
  display: none;
}
#checkout-step-payment .summary .all-include .content-inner h3, #checkout-step-payment .summary .all-include .content-inner h4, #checkout-step-payment .summary .all-include .content-inner h5,
#checkout-step-review .summary .all-include .content-inner h3,
#checkout-step-review .summary .all-include .content-inner h4,
#checkout-step-review .summary .all-include .content-inner h5 {
  font-size: 14px;
  margin: 15px 0 5px 0;
}
#checkout-step-payment .summary .all-include .content-inner ul li,
#checkout-step-review .summary .all-include .content-inner ul li {
  font-size: 12px;
}
#checkout-step-payment .summary .all-include.active .title:before,
#checkout-step-review .summary .all-include.active .title:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 4px solid #f26c00;
  border-bottom: none;
  border-top: 8px solid #f26c00;
  left: 0;
}
#checkout-step-payment .summary .customer,
#checkout-step-review .summary .customer {
  display: inline-block;
  vertical-align: top;
  width: 68%;
  padding-top: 5px;
}
#checkout-step-payment .summary .customer p,
#checkout-step-review .summary .customer p {
  font-weight: 600;
  color: #000;
}
#checkout-step-payment .summary .price-box,
#checkout-step-review .summary .price-box {
  display: inline-block;
  vertical-align: top;
  width: 30%;
  text-align: right;
  margin: 0;
}
#checkout-step-payment .summary .price-box p,
#checkout-step-review .summary .price-box p {
  font-size: 12px;
  color: #000;
}
#checkout-step-payment .summary .price-box p.price,
#checkout-step-review .summary .price-box p.price {
  font-weight: 300;
  color: #f26c00;
}
#checkout-step-payment .summary .price-box p.price span,
#checkout-step-review .summary .price-box p.price span {
  font-size: 35px;
  line-height: 35px;
}
#checkout-step-payment .summary img,
#checkout-step-review .summary img {
  height: 150px;
  max-height: 150px;
  float: left;
  margin-right: 15px;
}
#checkout-step-payment .summary h5,
#checkout-step-review .summary h5 {
  color: #5a8aba;
  font-weight: normal;
  text-transform: none;
  margin: 20px 0 0;
}
#checkout-step-payment .summary h5.first,
#checkout-step-review .summary h5.first {
  margin: 0;
}
#checkout-step-payment .summary.stay p,
#checkout-step-review .summary.stay p {
  font-weight: 600;
}
#checkout-step-payment .summary.stay p.town, #checkout-step-payment .summary.stay p.arrival, #checkout-step-payment .summary.stay p.duration,
#checkout-step-review .summary.stay p.town,
#checkout-step-review .summary.stay p.arrival,
#checkout-step-review .summary.stay p.duration {
  text-transform: uppercase;
}
#checkout-step-payment .summary.stay li,
#checkout-step-review .summary.stay li {
  font-weight: 600;
}
#checkout-step-payment .summary.stay .options li,
#checkout-step-review .summary.stay .options li {
  text-transform: uppercase;
}
#checkout-step-payment .fieldset,
#checkout-step-review .fieldset {
  border: 2px solid #f4e1c0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 10px 20px;
  background: #fff;
  margin-bottom: 10px;
}
#checkout-step-payment .fieldset dt,
#checkout-step-review .fieldset dt {
  margin: 0;
  font-weight: 600;
}
#checkout-step-payment .fieldset dt label,
#checkout-step-review .fieldset dt label {
  background: none;
  font-weight: 600;
  color: #000;
  font-size: 14px;
}
#checkout-step-payment .fieldset dt label:hover, #checkout-step-payment .fieldset dt label:active, #checkout-step-payment .fieldset dt label:focus,
#checkout-step-review .fieldset dt label:hover,
#checkout-step-review .fieldset dt label:active,
#checkout-step-review .fieldset dt label:focus {
  background: none;
}
#checkout-step-payment .fieldset dd .form-list,
#checkout-step-review .fieldset dd .form-list {
  background: #fff;
  margin-bottom: 20px;
  border: 5px solid #d7e1eb;
  padding: 10px 20px;
}
#checkout-step-payment .fieldset dd label,
#checkout-step-review .fieldset dd label {
  color: #5a8aba;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 15px;
}
#checkout-step-payment .fieldset dd table,
#checkout-step-review .fieldset dd table {
  width: 100%;
}
#checkout-step-payment .fieldset dd thead,
#checkout-step-review .fieldset dd thead {
  line-height: 30px;
}
#checkout-step-payment .fieldset dd thead th,
#checkout-step-review .fieldset dd thead th {
  font-weight: 600;
  font-size: 14px;
}
#checkout-step-payment .fieldset dd tbody tr,
#checkout-step-payment .fieldset dd tfoot tr,
#checkout-step-review .fieldset dd tbody tr,
#checkout-step-review .fieldset dd tfoot tr {
  border-top: 1px dotted #000;
  height: 35px;
}
#checkout-step-payment .fieldset dd tbody th,
#checkout-step-review .fieldset dd tbody th {
  font-weight: 600;
  font-size: 14px;
}
#checkout-step-payment .fieldset dd tbody td,
#checkout-step-review .fieldset dd tbody td {
  color: #5a8aba;
  font-weight: 600;
  font-size: 14px;
}
#checkout-step-payment .fieldset dd tbody td.amount,
#checkout-step-review .fieldset dd tbody td.amount {
  font-weight: 700;
}
#checkout-step-payment .fieldset dd tfoot td.total,
#checkout-step-review .fieldset dd tfoot td.total {
  color: #f26c00;
}
#checkout-step-payment .buttons-set,
#checkout-step-review .buttons-set {
  border: none;
}
#checkout-step-payment .buttons-set .cgv,
#checkout-step-review .buttons-set .cgv {
  display: inline-block;
  float: left;
  margin-top: 8px;
}
#checkout-step-payment .buttons-set .cgv input,
#checkout-step-review .buttons-set .cgv input {
  display: inline-block;
  vertical-align: top;
  margin-top: 4px;
}
#checkout-step-payment .buttons-set .cgv label,
#checkout-step-review .buttons-set .cgv label {
  vertical-align: top;
  margin-left: 5px;
  font-weight: 600;
  font-size: 14px;
}
#checkout-step-payment .buttons-set .orange,
#checkout-step-review .buttons-set .orange {
  position: relative;
  z-index: 2;
  font-weight: 700;
}

#checkout-review-table-wrapper {
  border: 2px solid #f4e1c0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 10px 20px;
  background: #fff;
  margin-bottom: 10px;
}

#checkout-step-payment {
  position: relative;
}
#checkout-step-payment #payment-please-wait, #checkout-step-payment #addcart-please-wait {
  position: absolute;
  bottom: -5px;
  right: 0;
}
#checkout-step-payment .buttons-set {
  padding-bottom: 30px;
}
#checkout-step-payment #checkout-review-submit {
  position: absolute;
  bottom: -7px;
  right: 0;
}
#checkout-step-payment #review-buttons-container .orange {
  display: block;
}
#checkout-step-payment #review-buttons-container .f-left {
  display: none;
}
#checkout-step-payment button {
  font-weight: 700;
  font-size: 14px;
}

#checkout-step-review button {
  font-weight: 700;
  font-size: 14px;
}
#checkout-step-review #review-buttons-container .f-left {
  display: none;
}

#opc-payment .note {
  padding: 10px;
}

/* -------------------------------------------- *
 * This section hides everything but the "Checkout Method" step of the checkout process and fades in the content
 * once the customer progresses to the next step. The purpose of this is to simplify what the customer has to focus on.
 * It is limited to larger viewports since smaller devices are inherently going to be focused solely on the
 * "Checkout Method" step.
 */
.opc.opc-firststep-login .section:not(#opc-login) .step-title,
.opc-block-progress-step-login {
  -moz-transition: opacity 300ms 0;
  -o-transition: opacity 300ms 0;
  -webkit-transition: opacity 300ms 0;
  transition: opacity 300ms 0;
}

.opc.opc-firststep-login .section#opc-login .step-title .number {
  -moz-transition: width 80ms 0;
  -o-transition: width 80ms 0;
  -webkit-transition: width 80ms 0;
  transition: width 80ms 0;
}

.opc.opc-firststep-login .section#opc-login .step-title h2 {
  -moz-transition: margin-left 80ms 0;
  -o-transition: margin-left 80ms 0;
  -webkit-transition: margin-left 80ms 0;
  transition: margin-left 80ms 0;
}

/* When a user progresses from the "Checkout Method" to "Billing Information" for the first time, the              */
/* "opc-has-progressed-from-login" class gets added to the body. Also, the .opc element will only have the         */
/* "opc-firststep-login" class if the first step of the checkout is the "Checkout Method" (eg, not when logged in) */
body:not(.opc-has-progressed-from-login) .opc.opc-firststep-login .section:not(#opc-login) .step-title,
body:not(.opc-has-progressed-from-login) .opc-block-progress-step-login {
  opacity: 0;
}

body:not(.opc-has-progressed-from-login) .opc.opc-firststep-login .section#opc-login .step-title .number {
  width: 0px;
  overflow: hidden;
}

body:not(.opc-has-progressed-from-login) .opc.opc-firststep-login .section#opc-login .step-title h2 {
  margin-left: 0px;
}

/* -------------------------------------------- *
 * Shipping and Payment methods
 */
.sp-methods {
  margin: 0 0 8px;
}
.sp-methods dt {
  margin: 13px 0 5px;
  font-weight: bold;
}
.sp-methods dt:first-child {
  margin: 0 0 5px;
}
.sp-methods dd li {
  margin: 5px 0;
}
.sp-methods label img {
  float: left;
}
.sp-methods label a {
  margin-top: 6px;
  float: right;
  margin-left: 10px;
}
.sp-methods .price {
  font-weight: bold;
}
.sp-methods .form-list {
  padding-left: 20px;
}
.sp-methods .form-list li {
  margin: 0 0 8px;
}
.sp-methods select.month {
  width: 120px;
  margin-right: 10px;
}
.sp-methods select.year {
  width: 96px;
}
.sp-methods input.cvv {
  width: 4em !important;
}
.sp-methods .checkmo-list li {
  margin: 0 0 5px;
  content: '';
  display: table;
  clear: both;
}
.sp-methods .checkmo-list label {
  width: 165px;
  padding-right: 15px;
  text-align: right;
  float: left;
}
.sp-methods .checkmo-list address {
  float: left;
}
.sp-methods .release-amounts {
  margin: 0.5em 0;
}
.sp-methods .release-amounts button {
  float: left;
  margin: 5px 10px 0 0;
}

/* One Page Checkout */
.block-progress {
  border: 0;
  margin: 0;
  border-left: 1px solid #CCCCCC;
  padding-left: 20px;
}
.block-progress .block-content {
  font-size: 12px;
}
.block-progress dt {
  padding-top: 6px;
  margin: 0;
  margin-bottom: 10px;
  color: #d2421f;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  text-transform: uppercase;
  margin-bottom: 6px;
  text-transform: uppercase;
  font-weight: normal;
  color: #a2a2a2;
}
.block-progress dt.complete {
  color: #d2421f;
}
.block-progress dd {
  padding-left: 15px;
  margin-bottom: 10px;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-style: italic;
}
.block-progress dd address {
  font-style: italic;
}
.block-progress #payment-progress-opcheckout .subtitle {
  margin-bottom: 3px;
}
.block-progress .payment-info dt {
  padding: 0;
  margin: 0 0 3px 0;
  color: #373737;
  font-family: Georgia, Times, "Times New Roman", serif;
  text-transform: none;
  font-style: italic;
  float: left;
  clear: both;
  font-size: 12px;
}
.block-progress .payment-info dt:after {
  content: ': ';
}
.block-progress .payment-info dd {
  float: left;
  margin-bottom: 3px;
  font-size: 12px;
}
.block-progress .payment-info:after {
  content: '';
  display: table;
  clear: both;
}

/* review step */
#checkout-review-table .btn-remove img {
  display: none;
}

/* show/hide "change" link for progress step depend on complete status
 * should be placed in .css file */
.opc-block-progress dt.complete a,
.opc-block-progress dt.complete .separator {
  display: inline;
}

.opc-block-progress dt a,
.opc-block-progress dt .separator {
  display: none;
}

/* On small screens, the progress review content will be moved to the review step via JS. Styled via this CSS: */
#checkout-step-review .opc-block-progress {
  border-left: none;
  padding-left: 0;
}
#checkout-step-review .opc-block-progress .block-title {
  display: none;
}
#checkout-step-review .opc-block-progress .block-content {
  display: block !important;
  padding: 0;
}
#checkout-step-review .opc-block-progress .block-content > dl > div {
  float: left;
  width: 50%;
}
#checkout-step-review .opc-block-progress .block-content .changelink {
  display: none;
}

#checkout-step-review .centinel > p {
  margin-bottom: 10px;
}
#checkout-step-review .centinel iframe {
  width: 100%;
  min-height: 400px;
}

/* Gift options */
.gift-messages-form .item {
  content: '';
  display: table;
  clear: both;
  margin-top: 30px;
}
.gift-messages-form .item h5 {
  font-weight: bold;
}
.gift-messages-form .item .product-img-box {
  width: auto;
  float: left;
  padding-right: 15px;
}
.gift-messages-form .item .details {
  float: left;
}

.gift-message-form .inner-box > div {
  content: '';
  display: table;
  clear: both;
  width: 100%;
  margin-top: 15px;
}
.gift-message-form .inner-box > div.extra-options-container p {
  margin-bottom: 15px;
}
.gift-message-form .gift-wrapping-form label {
  margin-right: 10px;
}
.gift-message-form .gift-wrapping-form img {
  float: left;
}
.gift-message-form .gift-wrapping-form .gift-wrapping-design {
  height: 75px;
}
.gift-message-form .gift-wrapping-form .gift-wrapping-design:after {
  content: '';
  display: table;
  clear: both;
}
.gift-message-form .gift-wrapping-form .gift-wrapping-design .image-box {
  margin-right: 5px;
}
.gift-message-form .gift-item {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: solid 1px #ECECEC;
}
.gift-message-form .gift-item:after {
  content: '';
  display: table;
  clear: both;
}
.gift-message-form .gift-item .product-img-box {
  width: 200px;
}
.gift-message-form .gift-item .product-img-box .product-image {
  width: 75px;
  margin-left: auto;
  margin-right: auto;
}
.gift-message-form .gift-item .product-img-box .product-name {
  display: block;
}
.gift-message-form .gift-item .fieldset {
  margin-left: 200px;
}

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* ============================================ *
 * Checkout - Success
 * ============================================ */
.checkout-onepage-success .col-main {
  padding: 0;
}
.checkout-onepage-success .buttons-set {
  margin: 10px 0;
}
.checkout-onepage-success .buttons-set button {
  float: none;
}

.checkout-onepage-success h1 {
  border-bottom: none;
  font-weight: 300;
  margin-bottom: 5px;
  text-align: left;
}
.checkout-onepage-success h2 {
  margin-top: 30px;
  padding-top: 20px;
  font-weight: 600;
  text-align: left;
  color: #f26c00;
  border-top: 1px dotted #f26c00;
  font-size: 28px;
}
.checkout-onepage-success p {
  text-align: left;
}
.checkout-onepage-success .buttons-set {
  border: 0;
  border-bottom: 1px dotted #f26c00;
  padding-bottom: 20px;
  margin-bottom: 20px;
  text-align: left;
}
.checkout-onepage-success .buttons-set button {
  font-weight: 600;
  font-size: 14px;
}
.checkout-onepage-success .modal-confirm-payment {
  display: none;
  z-index: 211;
  position: fixed;
  top: 220px;
  left: 50%;
  transform: translateX(-50%);
}
.checkout-onepage-success .modal-confirm-payment .modal-body {
  background-color: #fff;
  padding: 30px;
}
.checkout-onepage-success .modal-confirm-payment .modal-body p {
  padding-bottom: 15px;
  color: #f26c00;
  font-weight: 600;
  font-size: 14px;
}
.checkout-onepage-success .modal-confirm-payment .modal-close {
  text-align: right;
}
.checkout-onepage-success .modal-confirm-payment .close-popin {
  color: #6395c6;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 13px;
  display: inline-block;
}

.overlay-confirm-payment {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 210;
}

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/**
 * @category   Mage
 * @package    ConfigurableSwatches
 */
/* Clears */
.clearfix:after,
.configurable-swatch-list:after,
.product-view .product-options .swatch-attr:after {
  display: block;
  content: ".";
  clear: both;
  font-size: 0;
  line-height: 0;
  height: 0;
  overflow: hidden;
}

.product-view .product-options .swatch-attr {
  float: none;
  display: block;
  clear: both;
  border: 0;
}

.product-view .product-options dt.swatch-attr label {
  display: block;
  line-height: 1.3;
}

/* General Swatch Styling */
.configurable-swatch-list {
  margin-left: -3px;
  zoom: 1;
  clear: both;
}

.configurable-swatch-list li {
  float: left;
  zoom: 1;
  margin: 0 0 0 3px;
}

#narrow-by-list dd .configurable-swatch-list li {
  margin: 0 0 0 3px;
  width: 47%;
}

.swatch-link img {
  border-radius: 3px;
}

.swatch-link,
.swatch-label {
  display: block;
  border-radius: 3px;
  font-size: 14px;
  text-align: center;
  color: #666666;
  text-decoration: none;
  box-sizing: content-box;
}

.swatch-link {
  border: 1px solid #bbbbbb;
  margin: 0 0 3px;
}

#narrow-by-list dd .swatch-link {
  float: left;
  margin-right: 2px;
  padding: 0;
}

.currently .swatch-link {
  display: inline-block;
  margin: 0 0 0 10px;
}

.swatch-label {
  border: 1px solid #fff;
  margin: 0;
  white-space: nowrap;
  background: #efefef;
}

.swatch-link:hover {
  cursor: pointer;
}

.currently .swatch-link:hover {
  cursor: default;
}

.swatch-link .x {
  display: none;
  text-indent: -999em;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: url(https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/bg_x.png) center no-repeat transparent;
  z-index: 10;
}

.configurable-swatch-list .not-available .x {
  display: block;
}

.configurable-swatch-list .not-available .swatch-link {
  border-color: #e6e6e6;
  position: relative;
}

.configurable-swatch-list .not-available .swatch-label {
  color: #aaa;
  background: #fff;
}

/* Image Swatches */
.swatch-link.has-image .swatch-label {
  position: relative;
}

.swatch-link.has-image img {
  position: absolute;
  top: 0;
  left: 0;
}

.configurable-swatch-list .not-available .swatch-link.has-image img {
  opacity: 0.4;
  filter: alpha(opacity=40);
}

/* Other Swatch States */
.configurable-swatch-list .hover .swatch-link,
.configurable-swatch-list .selected .swatch-link,
.swatch-link:hover {
  border-color: #44f;
}

.currently .swatch-link:hover {
  border-color: #bbbbbb;
}

.configurable-swatch-list .wide-swatch .swatch-label {
  padding: 0 6px;
}

.configurable-swatch-box {
  background: none !important;
}

.configurable-swatch-box select.swatch-select {
  display: none;
}

.configurable-swatch-box .validation-advice {
  margin: 0 0 5px;
  background: #D91A00;
  padding: 2px 5px !important;
  font-weight: bold;
  color: #fff !important;
  float: left;
  display: block;
  border-radius: 3px;
}

/* CUSTOM */
.availability.out-of-stock span {
  color: #333;
}

.product-view .add-to-cart button.out-of-stock {
  background-position: -80px -362px;
  cursor: default;
}

.product-view .product-options dd .input-box {
  width: auto;
  height: auto;
}

.product-options .select-label {
  display: none;
}

.product-options dt.swatch-attr label,
.product-options dt.swatch-attr .select-label {
  font-size: 12px;
}

.product-options dt.swatch-attr .select-label {
  display: inline;
  font-weight: normal;
  color: #00acb1;
  padding-left: 5px;
}

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* ============================================ *
 * Customer
 * ============================================ */
.customer-account-login h1 {
  font-weight: 600;
  font-size: 45px;
  color: #f26c00;
  border-bottom: 0;
  margin-bottom: 0;
}
.customer-account-login h1.small-title {
  font-size: 36px;
}
.customer-account-login h2 {
  margin: 0 0 10px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  text-transform: uppercase;
  font-size: 20px;
  color: #5a8aba;
}
.customer-account-login input {
  height: 32px;
  line-height: 32px;
  border: 1px solid #d6d6d6;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: inset 1px 1px 1px 0 #ddd;
  -webkit-box-shadow: inset 1px 1px 1px 0 #ddd;
  -o-box-shadow: inset 1px 1px 1px 0 #ddd;
  box-shadow: inset 1px 1px 1px 0 #ddd;
  background: #f8f8f8;
  color: #384043;
}
.customer-account-login input:focus, .customer-account-login input:active, .customer-account-login input:hover {
  outline: none;
}
.customer-account-login .f-left.forgot {
  line-height: 28px;
  color: #f46c00;
  text-decoration: underline;
}
.customer-account-login p.required {
  margin: 10px 0 0 0;
  color: #373737;
  font-weight: 600;
}
.customer-account-login form .form-instructions {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 14px;
}
.customer-account-login .col2-set .buttons-set {
  text-align: left;
  border-top: 0;
}
.customer-account-login .col2-set .buttons-set button,
.customer-account-login .col2-set .buttons-set .button {
  float: none;
  margin: 0;
  font-weight: 700;
  font-size: 14px;
}
.customer-account-login .col2-set .col-1 ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.customer-account-login .col2-set .col-1 ul li {
  font-size: 14px;
  margin: 8px 0;
  padding-left: 15px;
  position: relative;
}
.customer-account-login .col2-set .col-1 ul li:before {
  content: "";
  background: #f26c00;
  border-radius: 3px;
  position: absolute;
  top: 8px;
  left: 0;
  width: 6px;
  height: 6px;
}
.customer-account-login .fb-connect {
  margin-top: 20px;
}
.customer-account-login .account-login .messages .error-msg li {
  border: 0;
  padding: 0;
}
.customer-account-login .account-login .messages .error-msg li:before {
  border-width: 0;
}
.customer-account-login .account-login .messages .error-msg li span {
  color: #FF0000;
  text-transform: uppercase;
  font-weight: 700;
}
.customer-account-login .col2-set .col-1,
.customer-account-login .col2-set .col-2 {
  padding-top: 0;
  margin-top: 20px;
}
.customer-account-login .col2-set .col-1 {
  padding-right: 20px;
}
.customer-account-login .col2-set .col-2 {
  padding-left: 20px;
  border-left: 1px solid #EDEDED;
}
.customer-account-login .col2-set .col-1 {
  padding-right: 0;
}
.customer-account-login .col2-set .col-2 {
  padding-left: 60px;
  border-left: 1px solid #EDEDED;
}

.customer-account-create .scaffold-form label:first-child {
  width: 140px;
}

.opc #opc-login p:not(.required) {
  font-style: italic;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-size: 12px;
  color: #a2a2a2;
}

.remember-me-box a.hide {
  display: none;
}
.remember-me-box .link-tip {
  font-size: 12px;
  padding-left: 10px;
}

.remember-me-popup {
  display: none;
  border: 1px solid #CCCCCC;
  padding: 10px;
  position: relative;
}
.remember-me-popup.show {
  display: block;
}
.remember-me-popup p {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}
.remember-me-popup .remember-me-popup-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  font-size: 11px;
}
.remember-me-popup .remember-me-popup-close-button {
  display: none;
}

.customer-account-create .fieldset .hidden {
  display: none;
}
.customer-account-create #remember-me-popup {
  max-width: 455px;
}

.customer-account-forgotpassword .fieldset,
.customer-account-forgotpassword .buttons-set {
  margin-left: 30px;
  max-width: 400px;
}
.customer-account-forgotpassword .fieldset .input-box input.input-text {
  width: 100%;
}

/* ============================================ *
 * My Account Global Styles
 * ============================================ */
body.customer-account .my-account .page-title h1 {
  border: 0;
  text-align: left;
}
body.customer-account .my-account .title-buttons {
  position: relative;
  text-align: right;
}
body.customer-account .my-account .title-buttons h1 {
  text-align: left;
}
body.customer-account .my-account .title-buttons .button {
  position: absolute;
  right: 0;
  top: 0;
}
body.customer-account .my-account .title-buttons a,
body.customer-account .my-account .title-buttons span.separator {
  position: relative;
  top: -42px;
}
body.customer-account .my-account .fieldset h2,
body.customer-account .my-account .addresses-list h2,
body.customer-account .my-account .order-details h2 {
  width: 100%;
  display: inline-block;
}
body.customer-account .my-account .addresses-list h3 {
  font-size: 13px;
  font-weight: 600;
}
body.customer-account .my-account .fieldset {
  margin-top: 30px;
  margin-bottom: 30px;
}
body.customer-account .data-table {
  margin-top: 5px;
}
body.customer-account .data-table td a {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  text-transform: uppercase;
  font-style: normal;
  font-size: 12px;
}
body.customer-account .sidebar .block ol#compare-items li {
  margin: 10px 0;
}
body.customer-account .sidebar .block .block-content p.block-subtitle {
  margin-bottom: 15px;
}
body.customer-account .sidebar .block .block-content .actions {
  margin-top: 30px;
}
body.customer-account .sidebar ol#cart-sidebar-reorder li {
  margin-top: 10px;
  margin-bottom: 0;
}
body.customer-account .sidebar ol#cart-sidebar-reorder p.product-name {
  display: inline-block;
  margin-bottom: 0;
}
body.customer-account .sidebar .block-cart .summary {
  margin-bottom: 15px;
}
body.customer-account .sidebar .block-reorder ol#cart-sidebar-reorder li {
  margin-top: 10px;
  margin-bottom: 0;
}
body.customer-account .sidebar .block-reorder ol#cart-sidebar-reorder li input {
  margin-right: 10px;
}
body.customer-account .sidebar .block-reorder ol#cart-sidebar-reorder p.product-name {
  display: inline;
  margin-bottom: 0;
}

.form-list .customer-dob .dob-month,
.form-list .customer-dob .dob-day {
  width: 40px;
  float: left;
  margin-right: 10px;
}
.form-list .customer-dob .dob-year {
  width: 80px;
  float: left;
}

/* ============================================ *
 * Dashboard
 * ============================================ */
.dashboard .box-head {
  margin-top: 15px;
  padding-bottom: 5px;
}
.dashboard .box-head h2 {
  font-size: 29px;
  font-weight: 600;
  margin-bottom: 0;
  color: #f26c00;
}
.dashboard .box-head a {
  padding: 10px;
}
.dashboard .box-title a,
.dashboard .box-head a {
  text-transform: uppercase;
  font-size: 11px;
}
.dashboard .box-account {
  padding-bottom: 20px;
  border-bottom: 1px dotted #000;
}
.dashboard .box-account p,
.dashboard .box-account address {
  font-family: Georgia, Times, "Times New Roman", serif;
  font-style: italic;
}
.dashboard .col2-set .col-1,
.dashboard .col2-set .col-2 {
  padding-right: 12.09677%;
  padding-bottom: 0;
}
.dashboard .col2-set .col-1 .box-title,
.dashboard .col2-set .col-2 .box-title {
  position: relative;
  padding-bottom: 10px;
}
.dashboard .col2-set .col-1 .box-title h2,
.dashboard .col2-set .col-1 .box-title h3,
.dashboard .col2-set .col-2 .box-title h2,
.dashboard .col2-set .col-2 .box-title h3 {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 0;
}
.dashboard .col2-set .col-1 .box-title a,
.dashboard .col2-set .col-2 .box-title a {
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 10px;
  line-height: 18.2px;
}
.dashboard .box-reviews.box-account {
  padding-bottom: 0;
}
.dashboard .box-reviews li {
  padding: 10px 0;
  border-top: 1px solid #EDEDED;
}
.dashboard .box-reviews li:first-child {
  border-top: 0;
}
.dashboard .box-reviews li .number {
  margin-right: -20px;
  float: left;
  line-height: 1.4;
  font-size: 12px;
}
.dashboard .box-reviews li .details {
  margin-left: 20px;
}
.dashboard .box-reviews li .details .ratings {
  content: '';
  display: table;
  clear: both;
  margin-bottom: 0;
}
.dashboard .box-reviews li .details .ratings strong {
  float: left;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 12px;
  margin-right: 5px;
}
.dashboard .box-reviews li .details .ratings .rating-box {
  float: left;
  margin: 3px 0 0 0;
}

/* ============================================ *
 * Address Book
 * ============================================ */
.my-account .addresses-list {
  font-family: Georgia, Times, "Times New Roman", serif;
}
.my-account .addresses-list .col-1,
.my-account .addresses-list .col-2 {
  padding-bottom: 0;
}
.my-account .addresses-list .item {
  margin: 0 0 30px 0;
}
.my-account .addresses-list .item p {
  margin-top: 10px;
}

/* ============================================ *
 * Order View
 * ============================================ */
.order-info {
  padding-bottom: 10px;
  border-bottom: 1px solid #EDEDED;
  width: 100%;
  margin-bottom: 30px;
}
.order-info dt,
.order-info dd,
.order-info ul,
.order-info li {
  display: inline;
}
.order-info dt {
  margin-right: 20px;
}
.order-info li {
  margin: 0 0 0 20px;
}
.order-info li.current {
  font-weight: 600;
}
.order-info li:first-child {
  margin-left: 0;
}

.order-date {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  text-transform: uppercase;
}

.order-info-box {
  margin-bottom: 40px;
  margin-top: 20px;
}
.order-info-box + .order-info-box {
  padding-bottom: 40px;
  border-bottom: 1px solid #EDEDED;
}
.order-info-box .col-1 {
  padding-right: 0;
  width: 48%;
}
.order-info-box .col-2 {
  width: 52%;
}
.order-info-box .col-1,
.order-info-box .col-2 {
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}
.order-info-box .box-title {
  width: 150px;
  padding-right: 10px;
  float: left;
}
.order-info-box .box-title h2 {
  font-size: 13px;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-weight: bold;
  line-height: 1.5;
}
.order-info-box .box-title h2:after {
  content: ':';
}
.order-info-box .box-content {
  float: left;
  font-family: Georgia, Times, "Times New Roman", serif;
}
.order-info-box .box-content td,
.order-info-box .box-content th {
  font-family: Georgia, Times, "Times New Roman", serif;
  line-height: 1.3;
}
.order-info-box .box-content th {
  padding-top: 10px;
}
.order-info-box .box-content td {
  padding-left: 15px;
}
.order-info-box .box-content strong {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-weight: normal;
  text-transform: uppercase;
}

#my-orders-table .option-label {
  margin-left: 10px;
  font-weight: 600;
  font-style: italic;
}
#my-orders-table .option-value {
  margin-left: 20px;
}
#my-orders-table tr.bundle:not(:last-child) td {
  border-bottom: none;
  border-top: none;
}

ol#cart-sidebar-reorder li {
  margin-top: 10px;
  margin-bottom: 0;
}
ol#cart-sidebar-reorder li input {
  margin-right: 10px;
}
ol#cart-sidebar-reorder p.product-name {
  display: inline;
}

.order-additional {
  margin: 40px 0;
}

.order-gift-message dd {
  margin-top: 10px;
}

.dashboard .col2-set .col-1,
.dashboard .col2-set .col-2 {
  padding-right: 30px;
  padding-bottom: 0;
}

/* ============================================ *
 * Newsletter Subscriptions
 * ============================================ */
body.newsletter-manage-index .my-account .fieldset {
  margin-bottom: 20px;
}
body.newsletter-manage-index .my-account .fieldset h2 {
  display: none;
}
body.newsletter-manage-index .my-account .form-list {
  border-top: 1px solid #EDEDED;
  padding-top: 10px;
}

.loader-field {
  max-width: 22px;
  position: absolute;
  right: -30px;
  margin-top: 10px;
}

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* ============================================ *
 * Contacts
 * ============================================ */
.contacts-index-index .buttons-set {
  margin-left: 30px;
  max-width: 435px;
}
.contacts-index-index .buttons-set p.required {
  float: left;
}

.contact-callback-index h1 {
  border: none;
  margin-bottom: 0;
}
.contact-callback-index h2 {
  font-size: 28px;
  font-weight: 300;
  color: #f26c00;
  border-bottom: 0;
  line-height: 30px;
  padding-bottom: 0;
}
.contact-callback-index .intro {
  margin-bottom: 20px;
  font-size: 16px;
}
.contact-callback-index .vsc-contact-form .fieldset {
  margin: 0 0 15px;
}
.contact-callback-index .infos .fields.civility, .contact-callback-index .infos .fields.name {
  display: inline-block;
  vertical-align: top;
}
.contact-callback-index .infos .fields.civility {
  width: 16%;
}
.contact-callback-index .infos .fields.name {
  width: 82%;
}
.contact-callback-index .infos .fields.name > .field, .contact-callback-index .infos .fields.name .customer-name {
  width: 100%;
}
.contact-callback-index .infos .fields.name .name-firstname, .contact-callback-index .infos .fields.name .name-lastname {
  width: 48%;
}
.contact-callback-index .infos .fields #firstname, .contact-callback-index .infos .fields #lastname {
  width: 100%;
}
.contact-callback-index .infos textarea {
  height: 32px;
  line-height: 32px;
  border: 1px solid #d6d6d6;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: inset 1px 1px 1px 0 #ddd;
  -webkit-box-shadow: inset 1px 1px 1px 0 #ddd;
  -o-box-shadow: inset 1px 1px 1px 0 #ddd;
  box-shadow: inset 1px 1px 1px 0 #ddd;
  background: #f8f8f8;
  color: #384043;
  min-height: 180px;
  height: auto;
  width: 100%;
  line-height: 18px;
  padding: 10px;
}
.contact-callback-index .infos textarea:focus, .contact-callback-index .infos textarea:active, .contact-callback-index .infos textarea:hover {
  outline: none;
}
.contact-callback-index .be-called {
  margin-top: 10px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px dotted #000;
}
.contact-callback-index .be-called p {
  margin: 0;
  font-size: 12px;
}
.contact-callback-index .be-called label {
  padding: 0 0 0 5px;
  background: none;
}
.contact-callback-index .be-called label:hover, .contact-callback-index .be-called label:active, .contact-callback-index .be-called label:focus {
  background: none;
}
.contact-callback-index .be-called .control {
  margin-bottom: 0;
}
.contact-callback-index .be-called .control label {
  color: #5a8aba;
  text-transform: uppercase;
}
.contact-callback-index .be-called input.radio {
  float: none;
  margin-right: 0;
  margin-top: 5px;
  margin-left: 0;
}
.contact-callback-index .be-called .extra-fields {
  margin-top: 10px;
  display: none;
}
.contact-callback-index .be-called .extra-fields label {
  padding: 0;
}
.contact-callback-index .be-called .extra-fields input {
  padding: 0 10px;
}
.contact-callback-index .be-called .extra-fields select {
  width: 60px;
}
.contact-callback-index .be-called .extra-fields .fields {
  display: inline-block;
  vertical-align: top;
  margin-left: 10px;
}
.contact-callback-index .be-called .extra-fields .fields.first {
  margin-left: 0;
}
.contact-callback-index .be-called .extra-fields .field {
  margin-left: 10px;
}
.contact-callback-index .be-called .extra-fields .field.first {
  margin-left: 0;
}
.contact-callback-index .buttons-set {
  border: 0;
  margin: 0 0 20px;
  padding: 0;
  text-align: left;
}
.contact-callback-index .buttons-set button.button {
  float: none !important;
  font-weight: 700;
  font-size: 14px;
  margin-left: 0;
}
.contact-callback-index .buttons-set .mention-asterix {
  font-size: 12px;
  margin-top: 10px;
}
.contact-callback-index .warnings p {
  font-size: 12px;
  color: #7D7D7D;
}

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* ============================================ *
 * PayPal
 * ============================================ */
.paypal-review-order .info-set {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #EDEDED;
}
.paypal-review-order .buttons-set {
  margin-top: 0px;
  padding-top: 0px;
  border: 0;
}
.paypal-review-order .buttons-set button {
  margin-bottom: 10px;
}

.bml-ad {
  display: none;
}
.bml-ad.small img {
  margin: auto;
  max-width: 100%;
}

.bml-ad.large {
  display: block;
}

div.paypal-logo {
  text-align: center;
  margin: 15px 0;
  max-width: 100%;
}
div.paypal-logo span {
  display: block;
  width: 100%;
}
div.paypal-logo span a {
  display: inline-block;
  max-width: 100%;
}
div.paypal-logo span a img {
  max-width: 100%;
}
div.paypal-logo span > img {
  display: none;
}

.checkout-types div.paypal-logo {
  text-align: right;
}

.bml-checkout-type {
  list-style-type: none;
}

/* Reviews

Reviews

<h1>Result</h1>

Markup: <div id="top-review">
  <div id="review-brown" ref="#customer-reviews" class="active">Les avis <span>(37)</span></div>
  <div id="review-trip" ref="#tripadvisor-reviews">
    <img src="../../skin/frontend/rwd/vcs/images/trip.jpg" alt=""/>
  </div>
</div>
<div class="box-collateral box-reviews" id="customer-reviews">
    <dl>
        <dt>
            <a href="http://demo.magentocommerce.com/review/product/view/id/44/">Need better material</a>
        </dt>
        <dd>
            <span class="quote-first"></span>Cute dress, exacly what I was looking for, but the material is wayy too thin. This would have been perfect if it was lined or even just a heavier knit.<span class="quote-last"></span>
            <span class="review-meta">
              Review by Erin B / (Posted on 5/28/2013)
            </span>
            <table class="ratings-table">
              <colgroup>
                <col width="1"></col>
              </colgroup>
              <tbody>
                <tr>
                  <td>
                    <div class="rating-box">
                      <div class="rating" style="width:60%;"></div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
        </dd>
    </dl>
</div>

Styleguide 15
*/
/* Village Reviews Block

Village Reviews Block

<h1>Result</h1>

Markup: <div class="village-block small reviews">
    <span class="title">Avis</span>
    <div class="content-inner">
        <div class="rating-box">
            <div class="rating" style="width: 60%;"></div>
        </div>
        <p class="review"><span class="quote-first"></span>Retour des Menuires, pour la 2ème année nous nous sommes régalés de votre accueil, vos services et équipements, de la gentillesse et du dévouement du personnel et de l’équipe de direction ! Merci<span class="quote-last"></span></p>
        <span class="review-meta">Isabelle, séjour aux Ménuires, décembre 2013</span>
        <a class="link" href="#">Voir tous les avis (260)</a>
    </div>
</div>

Styleguide 15.1
*/
#top-review {
  margin-bottom: 20px;
  width: 100%;
}
#top-review > div {
  display: inline-block;
  height: 80px;
  width: 49.7%;
  line-height: 80px;
  vertical-align: top;
  text-align: center;
  cursor: pointer;
  position: relative;
}
#top-review > div img {
  margin: 5px auto 0 auto;
  width: 150px;
}
#top-review > div span {
  font-weight: normal;
}
#top-review > div.wide {
  width: 100%;
}
#top-review #review-brown {
  background: #766657;
  text-transform: uppercase;
  position: relative;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
}
#top-review #review-brown.active:after {
  bottom: -7px;
  left: 50%;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-top: 7px solid #766657;
  border-bottom: none;
}
#top-review #review-trip {
  border: 7px solid #56973d;
}
#top-review #review-trip .tripadvisor-small #CDSWIDSSP {
  background: transparent !important;
}
#top-review #review-trip .tripadvisor-small #CDSWIDSSP .widSSPData {
  background: transparent;
}
#top-review #review-trip .tripadvisor-small #CDSWIDSSP .widSSPData .widSSPInformation {
  text-align: center;
}
#top-review #review-trip .tripadvisor-small #CDSWIDSSP .widSSPData .widSSPInformation .widSSPPopIdx var {
  float: none;
}
#top-review #review-trip .tripadvisor-small #CDSWIDSSP .widSSPSingle {
  background: none;
  padding-left: 0;
}
#top-review #review-trip .tripadvisor-small #CDSWIDSSP .widSSPData .widSSPLegal {
  display: none;
}
#top-review #review-trip.active:after {
  bottom: -12px;
  left: 50%;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-top: 7px solid #56973d;
  border-bottom: none;
}

.village-review .box-collateral {
  display: none;
}
.village-review .box-collateral.active {
  display: block;
}

.village-block.reviews {
  float: left;
  margin-top: 7px;
}
.village-block.reviews:after {
  content: '';
  display: table;
  clear: both;
}
.village-block.reviews .title {
  font-weight: 300;
}
.village-block.reviews .review {
  font-size: 16px;
  font-style: italic;
  line-height: 20px;
  color: #766657;
  margin-bottom: 5px;
  margin-top: 5px;
  height: 80px;
}
.village-block.reviews .link {
  font-size: 14px;
  text-decoration: underline;
  font-weight: 600;
}

/* Tripadvisor

Tripadvisor Block

<h1>Result</h1>

Markup: <div id="TA_selfserveprop649" class="TA_selfserveprop tripadvisor-small">
    <ul id="oSzkjah1TR" class="TA_links pXeJXJU8W7nc">
        <li id="WCV9xmLs03J" class="8PeocqkbMzhM">
            <a target="_blank" href="http://www.tripadvisor.fr/"><img src="http://www.tripadvisor.fr/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor"/></a>
        </li>
    </ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=selfserveprop&amp;uniq=649&amp;locationId=1854064&amp;lang=fr&amp;rating=false&amp;nreviews=0&amp;writereviewlink=false&amp;popIdx=true&amp;iswide=false&amp;border=false&amp;langversion=2"></script>

Styleguide 15.2
*/
.tripadvisor-big #CDSWIDSSP {
  width: 100% !important;
}

.tripadvisor-small {
  cursor: pointer;
}
.tripadvisor-small #CDSWIDERR .widErrBx {
  width: 330px !important;
}
.tripadvisor-small #CDSWIDSSP.widSSPnarrow {
  width: 330px !important;
  font-size: 14px;
}
.tripadvisor-small #CDSWIDSSP.widSSPnarrow .widSSPData .widSSPAll {
  display: none;
}
.tripadvisor-small #CDSWIDSSP .widSSPData {
  padding: 5px 0;
}
.tripadvisor-small #CDSWIDSSP .widSSPData .widSSPBranding, .tripadvisor-small #CDSWIDSSP .widSSPData .widSSPComponent {
  display: none;
}
.tripadvisor-small #CDSWIDSSP .widSSPData .widSSPReviews {
  border: 0;
  padding: 0;
}
.tripadvisor-small #CDSWIDSSP .widSSPData .widSSPInformation {
  border: 0;
  padding: 0;
}
.tripadvisor-small #CDSWIDSSP .widSSPData .widSSPInformation .widSSPPopIdx > span {
  border-bottom: 1px solid;
}
.tripadvisor-small #CDSWIDSSP .widSSPData .widSSPInformation .widSSPPopIdx > span i {
  border-bottom: 1px solid;
}
.tripadvisor-small #CDSWIDSSP .widSSPData .widSSPInformation .widSSPPopIdx var {
  font-weight: normal;
  margin-right: 0;
  padding-right: 3px;
}
.tripadvisor-small #CDSWIDSSP .widSSPData .widSSPInformation .widSSPPopIdx var.widSSPDig1 b * {
  font-size: 12px;
  font-weight: normal;
  line-height: 15px;
}
.tripadvisor-small #CDSWIDSSP .widSSPData .widSSPInformation .widSSPPopIdx > b {
  display: none;
}
.tripadvisor-small #CDSWIDSSP .widSSPData .widSSPInformation .widSSPPopIdx.widSSPSingle {
  width: 100%;
}
.tripadvisor-small #CDSWIDSSP .widSSPSingle {
  padding-left: 45px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 -2416px no-repeat;
  padding-top: 5px;
  min-height: 30px;
  margin: 0 !important;
}
.tripadvisor-small #CDSWIDSSP .widSSPnarrow .widSSPData .widSSPAll, .tripadvisor-small #CDSWIDSSP .widSSPnarrow .widSSPData .widSSPH18 {
  display: none;
}
.tripadvisor-small #CDSWIDSSP .widSSPnarrow .widSSPData .widSSPBranding, .tripadvisor-small #CDSWIDSSP .widSSPnarrow .widSSPData .widSSPInformation {
  border: 0;
  padding: 0;
}

/* ============================================ *
 * Review - Customer
 * ============================================ */
#customer-reviews {
  width: auto;
  float: none;
}
#customer-reviews .review-heading {
  border-top: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
  padding: 10px 0 5px;
}
#customer-reviews .review-heading:after {
  content: '';
  display: table;
  clear: both;
}
#customer-reviews .review-heading h2 {
  float: left;
  display: block;
}
#customer-reviews .review-heading .pager {
  clear: none;
  float: right;
  width: auto;
}
#customer-reviews .review-heading .pager .count-container .limiter {
  margin-bottom: 0;
}
#customer-reviews .review-heading .pager .count-container .limiter label {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
}
#customer-reviews .review-heading .pager .amount {
  display: none;
}
#customer-reviews .disclamer-title {
  text-transform: uppercase;
  margin-bottom: 10px;
  color: #5a8aba;
  font-weight: 300;
  font-size: 20px;
}
#customer-reviews h2 {
  color: #5a8aba;
  font-size: 11px;
  text-transform: uppercase;
}
#customer-reviews h2 span {
  color: #373737;
}
#customer-reviews h3 {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: normal;
  text-transform: uppercase;
}
#customer-reviews h3 span {
  color: #5a8aba;
}
#customer-reviews .fieldset {
  padding-top: 25px;
  width: 470px;
}
#customer-reviews .fieldset h4 {
  border-bottom: 1px solid #CCCCCC;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: normal;
  padding-bottom: 5px;
  text-transform: uppercase;
}
#customer-reviews .fieldset h4 em {
  display: none;
}
#customer-reviews .fieldset .form-list {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: normal;
  margin: 10px 0;
  text-transform: uppercase;
  width: 470px;
}
#customer-reviews .fieldset .form-list .inline-label:after {
  content: '';
  display: table;
  clear: both;
}
#customer-reviews .fieldset .form-list label {
  font-size: 11px;
  font-weight: normal;
}
#customer-reviews .fieldset .form-list textarea {
  border: 1px solid #CCCCCC;
  border-radius: 0;
  min-width: 100%;
  -webkit-appearance: none;
}
#customer-reviews .fieldset .form-list input {
  border: 1px solid #CCCCCC;
  border-radius: 0;
}
#customer-reviews .fieldset .form-list input[type="text"] {
  width: 100%;
}
#customer-reviews .buttons-set {
  border: none;
  margin: 0;
  width: 470px;
}
#customer-reviews dl, #customer-reviews .item {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 11px;
  font-weight: normal;
  margin-bottom: 10px;
}
#customer-reviews dl dt, #customer-reviews dl .itemreviewed, #customer-reviews .item dt, #customer-reviews .item .itemreviewed {
  margin: 0;
  text-transform: uppercase;
}
#customer-reviews dl dt a, #customer-reviews dl dt span, #customer-reviews dl .itemreviewed a, #customer-reviews dl .itemreviewed span, #customer-reviews .item dt a, #customer-reviews .item dt span, #customer-reviews .item .itemreviewed a, #customer-reviews .item .itemreviewed span {
  color: #766657;
  text-transform: none;
  font-size: 15px;
  font-weight: bold;
}
#customer-reviews dl dd, #customer-reviews dl .comment, #customer-reviews .item dd, #customer-reviews .item .comment {
  font-size: 17px;
  margin: 0 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 1px dotted #dc5528;
  color: #766657;
  font-style: italic;
  position: relative;
  overflow: hidden;
}
#customer-reviews dl dd .more-expander, #customer-reviews dl .comment .more-expander, #customer-reviews .item dd .more-expander, #customer-reviews .item .comment .more-expander {
  display: block;
  height: 2em;
  line-height: 1.4em;
  padding-right: 18px;
  text-align: right;
  cursor: pointer;
  position: relative;
  z-index: 1;
}
#customer-reviews dl dd .review-description, #customer-reviews dl dd .review-response, #customer-reviews dl .comment .review-description, #customer-reviews dl .comment .review-response, #customer-reviews .item dd .review-description, #customer-reviews .item dd .review-response, #customer-reviews .item .comment .review-description, #customer-reviews .item .comment .review-response {
  max-height: 7.5em;
  display: block;
  overflow: hidden;
}
#customer-reviews dl dd .review-description.expanded, #customer-reviews dl dd .review-response.expanded, #customer-reviews dl .comment .review-description.expanded, #customer-reviews dl .comment .review-response.expanded, #customer-reviews .item dd .review-description.expanded, #customer-reviews .item dd .review-response.expanded, #customer-reviews .item .comment .review-description.expanded, #customer-reviews .item .comment .review-response.expanded {
  max-height: none;
  transition: all 500ms ease 0s;
}
#customer-reviews dl dd .review-response, #customer-reviews dl dd .review-response-from, #customer-reviews dl .comment .review-response, #customer-reviews dl .comment .review-response-from, #customer-reviews .item dd .review-response, #customer-reviews .item dd .review-response-from, #customer-reviews .item .comment .review-response, #customer-reviews .item .comment .review-response-from {
  padding-left: 2em;
}
#customer-reviews dl dd .ratings-table, #customer-reviews dl .comment .ratings-table, #customer-reviews .item dd .ratings-table, #customer-reviews .item .comment .ratings-table {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 11px;
  width: 70%;
  float: left;
}
#customer-reviews dl dd .ratings-table tr, #customer-reviews dl .comment .ratings-table tr, #customer-reviews .item dd .ratings-table tr, #customer-reviews .item .comment .ratings-table tr {
  float: left;
  margin-right: 15px;
}
#customer-reviews dl dd .report-abuse-block, #customer-reviews dl .comment .report-abuse-block, #customer-reviews .item dd .report-abuse-block, #customer-reviews .item .comment .report-abuse-block {
  float: right;
  width: 30%;
  text-align: right;
  margin: 12px 0 15px;
  padding-right: 18px;
  line-height: 15px;
}
#customer-reviews dl dd .report-abuse-block a, #customer-reviews dl .comment .report-abuse-block a, #customer-reviews .item dd .report-abuse-block a, #customer-reviews .item .comment .report-abuse-block a {
  text-decoration: underline;
  font-size: 11px;
}
#customer-reviews dl dd table, #customer-reviews dl .comment table, #customer-reviews .item dd table, #customer-reviews .item .comment table {
  margin: 15px 0;
}

.popin-report-abuse-overlay {
  position: fixed;
  top: 0;
  left: 0;
  background: #000000;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  z-index: 999;
  display: none;
}
.popin-report-abuse-overlay .popin-report-abuse {
  position: absolute;
  top: 220px;
  left: 50%;
  width: 500px;
  background: #fff;
  padding: 30px 30px 40px;
  margin-left: -250px !important;
  z-index: 1000;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
}
.popin-report-abuse-overlay .close {
  text-align: right;
  margin-bottom: 13px;
  color: #6395c6;
  font-weight: 600;
}
.popin-report-abuse-overlay .close span {
  cursor: pointer;
}
.popin-report-abuse-overlay .msg {
  color: #f26c00;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}

/****** REVIEW PAGER *********/
#customer-reviews .pager {
  float: none;
}
#customer-reviews .pager .count-container {
  display: none;
}
#customer-reviews .pager .pages {
  float: none;
  margin: 0;
}
#customer-reviews .pager .pages a {
  vertical-align: top;
  color: #5a8aba;
  text-decoration: underline;
  width: 15px;
}
#customer-reviews .pager .pages .next:before, #customer-reviews .pager .pages .previous:before {
  content: '>';
  color: #5a8aba;
  border: none;
  font-size: 13px;
  line-height: 8px;
}
#customer-reviews .pager .pages .previous:before {
  content: '<';
}
#customer-reviews .pager .pages .next:hover, #customer-reviews .pager .pages .previous:hover {
  border: none;
}
#customer-reviews .pager ol {
  list-style: none;
}
#customer-reviews .pager ol li {
  margin-left: 4px;
  color: #5a8aba;
  text-decoration: underline;
  width: 15px;
}
#customer-reviews .pager ol li.current {
  color: #000000;
  vertical-align: top;
  border: none;
  text-decoration: none;
  width: 15px;
}

.reviews .review-meta,
#customer-reviews .review-meta {
  font-size: 12px;
  color: #756658;
  display: block;
  font-style: normal;
}
.reviews .quote-first:before,
#customer-reviews .quote-first:before {
  content: '\00ab ';
}
.reviews .quote-last,
#customer-reviews .quote-last {
  margin-right: 5px;
}
.reviews .quote-last:after,
#customer-reviews .quote-last:after {
  content: '\00bb ';
}

#customer-reviews .rating-table {
  padding-bottom: 25px;
}
#customer-reviews .review-meta {
  margin-top: 5px;
  color: #f26c00;
}
#customer-reviews .review-meta em {
  font-style: normal;
}

.reviews .rating-box {
  margin-top: 10px;
}

.review-summary-table {
  border-bottom: 1px solid #CCCCCC;
  margin: 0 0 10px;
}
.review-summary-table thead {
  background: transparent;
}
.review-summary-table thead th {
  background: transparent;
  border: none;
  padding: 15px 7px 10px 8px;
}
.review-summary-table tbody th {
  background: #FFFFFF;
  font-size: 11px;
}
.review-summary-table tbody td {
  border: none;
  text-align: center;
  padding: 0;
}
.review-summary-table tbody td label {
  width: 100%;
  display: block;
  padding: 11px 0;
}
.review-summary-table .rating-box .rating-number {
  display: none;
}
.review-summary-table .rating-box .rating-number:after {
  content: "";
  display: inline-block;
  background-position: 0px -599px;
  width: 13px;
  height: 13px;
  margin-left: 5px;
  position: relative;
  top: 2px;
}

/* ============================================ *
 * Ratings - Global
 * ============================================ */
.ratings-table {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
}
.ratings-table th {
  padding-right: 10px;
}

.rating-box {
  background-position: 0 -615px;
  background-repeat: repeat-x;
  height: 14px;
  overflow: hidden;
  text-indent: -9999px;
  width: 82px;
}
.rating-box .rating {
  background-position: 0 -600px;
  background-repeat: repeat-x;
  float: left;
  height: 13px;
  text-indent: -9999px;
}

/* ============================================ *
 * Review View Page
 * ============================================ */
.review-product-view .product-review .product-details h2 {
  border-bottom: none;
}
.review-product-view .product-review .product-img-box {
  width: auto;
  max-width: 50%;
}
.review-product-view .product-review .product-img-box > a {
  width: 100%;
}
.review-product-view .product-review .product-img-box .product-image {
  width: 100%;
}

.review-summary-table tbody tr.first th {
  width: 130px;
  white-space: normal;
}

.customer-account .ratings .rating-box {
  width: 82px;
}

/* Slideshow

Slideshow

<h1>Result</h1>

Markup:
<div class="slideshow-container">
    <ul class="slideshow">
        <li>
            <a href="#">
                <img src="http://placehold.it/350x170/cccccc" alt="" />
            </a>
            <div class="banner-msg">
                <h2>Title</h2>
                <p>Content</p>
            </div>
        </li>
        <li>
            <a href="#">
                <img src="http://placehold.it/350x170/000000" alt="" />
            </a>
            <div class="banner-msg">
                <h2>Title</h2>
                <p>Content</p>
            </div>
        </li>
    </ul>
    <span class="slideshow-prev">&nbsp;</span>
    <span class="slideshow-next">&nbsp;</span>
</div>

Styleguide 8
*/
/* Slideshow Home

Slideshow Home

<h1>Result</h1>

Markup: <div class="cms-index-defaultindex">
    <div class="after-header-container">
        <div class="slideshow-container">
            <ul class="slideshow">
                <li>
                    <a href="#">
                        <img src="http://placehold.it/350x170/cccccc" alt="" />
                    </a>
                    <div class="banner-msg">
                        <a href="#" class="button place">Lorem</a>
                        <h2>Valmorel la belle</h2>
                        <h3>La séduction au naturel</h3>
                        <div class="offer-button">
                            <span class="reduction big">-30%</span>
                            <span>Votre séjour tout compris</span>
                            <span class="price">à partir de 758 €</span>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">
                        <img src="http://placehold.it/350x170/000000" alt="" />
                    </a>
                    <div class="banner-msg">
                        <a href="#" class="button place">Lorem</a>
                        <h2>Lorem ipsum dolor sit amet</h2>
                        <div class="content">
                            <p><em>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</em></p>
                            <p><a href="#">Lorem ipsum</a></p>
                        </div>
                    </div>
                </li>
            </ul>
            <span class="slideshow-prev">&nbsp;</span>
            <span class="slideshow-next">&nbsp;</span>
        </div>
    </div>
</div>

Styleguide 8.1
*/
/* ============================================ *
 * Slideshow
 * ============================================ */
.slideshow-container {
  position: relative;
  display: block;
  width: 100%;
  margin: 10px 0 0 0;
}
.slideshow-container .cursor {
  cursor: pointer;
}
.slideshow-container .slideshow {
  width: 100%;
  padding: 0;
  position: relative;
  margin: 0;
  overflow: hidden;
}
.slideshow-container .slideshow > li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  padding: 0 !important;
  margin: 0 !important;
  height: 100%;
}
.slideshow-container .slideshow > li:before {
  display: none;
}
.slideshow-container .slideshow > li:first-child {
  position: static;
  z-index: 100;
}
.slideshow-container .slideshow > li img {
  max-width: 100%;
  width: 100%;
}
.slideshow-container .slideshow > li .content {
  background: rgba(255, 255, 255, 0.7);
  padding: 15px;
  font-size: 14px;
  margin-top: 10px;
  width: 65%;
}
.slideshow-container .slideshow > li .content p {
  margin-bottom: 10px;
  font-weight: 600;
}
.slideshow-container .slideshow > li .content p:last-child {
  margin-bottom: 0;
}
.slideshow-container .slideshow > li .content p:last-child a {
  font-weight: 400;
}

.slideshow-pager {
  text-align: center;
  width: 100%;
  z-index: 115;
  position: absolute;
  bottom: 0px;
  top: auto;
  overflow: hidden;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.slideshow-pager span {
  font-family: arial;
  width: 44px;
  height: 44px;
  display: inline-block;
  color: #DDDDDD;
  cursor: pointer;
}
.slideshow-pager span:before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  left: 50%;
  top: 50%;
  margin-left: -8px;
  margin-top: -8px;
  border-radius: 1px;
  background-color: #FFFFFF;
  position: relative;
}
.slideshow-pager span:hover:before {
  background-color: #4a7db1;
}
.slideshow-pager span.cycle-pager-active:before {
  background-color: #42719f;
}
.slideshow-pager > * {
  cursor: pointer;
}

.slideshow-prev,
.slideshow-next {
  position: absolute;
  top: 5%;
  width: 15%;
  max-width: 80px;
  height: 80%;
  opacity: 0.6;
  z-index: 110;
  cursor: pointer;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.slideshow-prev:before,
.slideshow-next:before {
  content: '';
  height: 60px;
  width: 26px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 -197px no-repeat;
  position: absolute;
  display: block;
  top: 0;
  margin-top: -15px;
}
.slideshow-prev:hover,
.slideshow-next:hover {
  opacity: 1;
}
.slideshow-prev.disabled,
.slideshow-next.disabled {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
  cursor: default;
}

.slideshow-prev {
  left: 8px;
}
.slideshow-prev:before {
  top: 50%;
  left: 10px;
}

.slideshow-next {
  right: 8px;
}
.slideshow-next:before {
  background-position: 0 -285px;
  top: 50%;
  right: 10px;
}

.cycle-caption {
  position: absolute;
  color: white;
  bottom: 15px;
  right: 15px;
  z-index: 110;
}

.cycle-overlay {
  font-family: tahoma, arial;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 120;
  background: black;
  color: white;
  padding: 15px;
  opacity: .5;
}

/* Slideshow List Media

Slideshow List Media

<h1>Result</h1>
Markup: <div id="wrap-slideshows">
    <div id="main-list-slider" class="slideshow-container">
        <div id="cycle-1" class="cycle-slideshow slideshow"
            data-cycle-slides="> img, > a"
            data-cycle-timeout="0"
            data-cycle-caption="#main-list-slider .custom-caption"
            data-cycle-fx="scrollHorz"
            data-cycle-youtube="true"
            data-cycle-prev="#main-list-slider .cycle-prev"
            data-cycle-next="#main-list-slider .cycle-next"
            data-cycle-youtube-autostart="false"
            >
            <img src="http://placehold.it/350x170/cccccc" alt="" />
            <img src="http://placehold.it/350x170/000000" alt="" />
            <a href="http://www.youtube.com/v/f7AU2Ozu8eo">Paul Irish</a>
            <img src="http://placehold.it/350x170/000000" alt="" />
            <img src="http://placehold.it/350x170/cccccc" alt="" />
            <img src="http://placehold.it/350x170/000000" alt="" />
            <img src="http://placehold.it/350x170/cccccc" alt="" />
            <img src="http://placehold.it/350x170/000000" alt="" />
            <img src="http://placehold.it/350x170/cccccc" alt="" />
            <img src="http://placehold.it/350x170/000000" alt="" />
        </div>
        <a href="#" class="cycle-prev">&nbsp;</a>
        <a href="#" class="cycle-next">&nbsp;</a>
    </div>
    <div id="list-slider" class="slideshow-container">
        <div id="cycle-2" class="cycle-slideshow slideshow"
            data-cycle-slides="> img"
            data-cycle-timeout="0"
            data-cycle-prev="#list-slider .cycle-prev"
            data-cycle-next="#list-slider .cycle-next"
            data-cycle-caption="#list-slider .custom-caption"
            data-cycle-fx="carousel"
            data-cycle-carousel-visible="8"
            data-allow-wrap="false"
            >
            <img src="http://placehold.it/350x170/cccccc" width=95 height=65 />
            <img src="http://placehold.it/350x170/000000" width=95 height=65 />
            <img src="http://placehold.it/350x170/cccccc" width=95 height=65 />
            <img src="http://placehold.it/350x170/000000" width=95 height=65 />
            <img src="http://placehold.it/350x170/cccccc" width=95 height=65 />
            <img src="http://placehold.it/350x170/000000" width=95 height=65 />
            <img src="http://placehold.it/350x170/cccccc" width=95 height=65 />
            <img src="http://placehold.it/350x170/000000" width=95 height=65 />
            <img src="http://placehold.it/350x170/cccccc" width=95 height=65 />
            <img src="http://placehold.it/350x170/000000" width=95 height=65 />
        </div>
        <a href="#" class="cycle-prev">&nbsp;</a>
        <a href="#" class="cycle-next">&nbsp;</a>
    </div>
</div>
<script>
window.onload = function(){
jQuery(document).ready(function(){
        var slideshows = jQuery('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
        slideshows.not(this).cycle('goto', opts.currSlide);
    });
jQuery('#cycle-2 .cycle-slide').click(function(){
    var index = jQuery('#cycle-2').data('cycle.API').getSlideIndex(this);
    slideshows.cycle('goto', index);
});
});
};
</script>

Styleguide 8.2
*/
#wrap-slideshows {
  position: relative;
  overflow: hidden;
}
#wrap-slideshows .cycle-prev, #wrap-slideshows .cycle-next {
  position: absolute;
  z-index: 100;
  top: 50%;
  height: 40px;
  width: 40px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 10px -1451px rgba(0, 0, 0, 0.4) no-repeat;
  display: block;
  margin-top: -20px;
}
#wrap-slideshows .cycle-next {
  left: auto;
  right: 0;
  background-position: 14px -1500px;
}
#wrap-slideshows #main-list-slider .cycle-prev, #wrap-slideshows #main-list-slider .cycle-next {
  display: none;
}
#wrap-slideshows #main-list-slider a.cycle-slide {
  width: 100%;
}
#wrap-slideshows #main-list-slider img {
  max-width: 100%;
  width: 100%;
}
#wrap-slideshows #show-thumbnail {
  position: absolute;
  z-index: 99;
  bottom: 0;
  height: 105px;
  left: 0;
  width: 100%;
  cursor: pointer;
}
#wrap-slideshows #list-slider {
  position: absolute;
  bottom: -105px;
  background: rgba(0, 0, 0, 0.7);
  height: 105px;
  z-index: 100;
  -moz-transition-property: bottom;
  -o-transition-property: bottom;
  -webkit-transition-property: bottom;
  transition-property: bottom;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  display: none;
}
#wrap-slideshows #list-slider img {
  margin: 0 3px;
  cursor: pointer;
}
#wrap-slideshows #list-slider .slideshow {
  margin: 18px auto 0 auto;
}
#wrap-slideshows #list-slider .cycle-slide-active {
  border: 4px solid #f46c00;
}
#wrap-slideshows #list-slider .cycle-slide-active.yt-thumb {
  border: 0;
}
#wrap-slideshows #list-slider .cycle-slide-active.yt-thumb img {
  border: 4px solid #f46c00;
}
#wrap-slideshows #list-slider .cycle-prev, #wrap-slideshows #list-slider .cycle-next {
  margin: 0;
  left: 35px;
  top: 45px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 10px 8px 0;
  border-color: transparent #f46c00 transparent transparent;
  background: none;
}
#wrap-slideshows #list-slider .cycle-prev.disabled, #wrap-slideshows #list-slider .cycle-next.disabled {
  display: block !important;
}
#wrap-slideshows #list-slider .cycle-next {
  left: auto;
  right: 35px;
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent #f46c00;
}
#wrap-slideshows #list-slider .yt-thumb {
  position: relative !important;
}
#wrap-slideshows #list-slider .yt-thumb:after {
  margin-left: -8px;
  margin-top: -15px;
  left: 50%;
  top: 50%;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid #d2421f;
  border-right: none;
}
#wrap-slideshows #list-slider.show {
  bottom: 0;
}
#wrap-slideshows:hover #main-list-slider .cycle-prev, #wrap-slideshows:hover #main-list-slider .cycle-next {
  display: block;
}

.cycle-slide {
  background-size: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.cycle-youtube {
  width: 100%;
  height: 100%;
}
.cycle-youtube iframe,
.cycle-youtube object,
.cycle-youtube video,
.cycle-youtube embed {
  width: 100%;
  height: 100%;
  display: none;
}

.has-youtube-img a {
  display: block;
  position: relative;
}
.has-youtube-img .player-btn {
  width: 85px;
  height: 58px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/player-yt.png") center center no-repeat;
}

#popin-player {
  z-index: 111;
  position: fixed;
  height: 80%;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
#popin-player .close-popin {
  color: #fff;
  cursor: pointer;
  text-align: right;
  display: block;
  position: fixed;
  right: 0;
  top: -40px;
  font-size: 14px;
}
#popin-player .popin-content {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#popin-player iframe {
  width: 100%;
}

.overlay-video {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 110;
}

.has-youtube {
  background-color: #fff;
}
.has-youtube .cycle-youtube {
  min-height: 370px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/player-yt.png") center center no-repeat;
}

.cycle-youtube.cycle-slide:after {
  content: '';
  height: 100px;
  width: 100px;
  display: block;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/player-yt.png") center center no-repeat;
  left: 43%;
  position: absolute;
  top: 32%;
}
.cycle-youtube.cycle-slide.has-youtube-img:after {
  display: none;
}

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* ============================================ *
 * Wishlist
 * ============================================ */
#wishlist-table th {
  text-align: center;
}
#wishlist-table.clean-table {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  width: 100%;
}
#wishlist-table.clean-table th {
  border-bottom: 1px solid #C0C0C0;
}
#wishlist-table.clean-table td {
  padding: 15px;
  vertical-align: top;
}
#wishlist-table.clean-table thead th {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
}
#wishlist-table .product-name {
  font-size: 15px;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  margin-bottom: 0;
  text-transform: uppercase;
}
#wishlist-table .product-name a {
  color: #f46c00;
}
#wishlist-table .wishlist-sku {
  font-size: 10px;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  margin: 5px 0;
}
#wishlist-table textarea {
  border: 1px solid #C0C0C0;
  width: 100%;
  height: 45px;
  font-size: 10px;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}
#wishlist-table textarea::-webkit-input-placeholder {
  text-transform: uppercase;
}
#wishlist-table textarea:-moz-placeholder {
  text-transform: uppercase;
}
#wishlist-table textarea::-moz-placeholder {
  text-transform: uppercase;
}
#wishlist-table textarea:-ms-input-placeholder {
  text-transform: uppercase;
}
#wishlist-table textarea:focus {
  border: 1px solid #5a8aba;
}
#wishlist-table .item-manage {
  text-align: right;
  max-width: 450px;
  padding-top: 5px;
}
#wishlist-table .item-manage .button {
  color: #FFFFFF;
  font-size: 10px;
  padding: 3px 5px;
}
#wishlist-table .cart-cell {
  text-align: center;
}
#wishlist-table td.customer-wishlist-item-image {
  width: 113px;
}
#wishlist-table td.customer-wishlist-item-quantity {
  width: 3em;
}
#wishlist-table td.customer-wishlist-item-price {
  width: 120px;
  text-align: center;
}
#wishlist-table td.customer-wishlist-item-cart {
  width: 150px;
}
#wishlist-table td.customer-wishlist-item-cart .button {
  font-size: 11px;
  margin-bottom: 10px;
  padding: 3px 5px;
  width: 100%;
}
#wishlist-table td.customer-wishlist-item-cart .truncated {
  margin-bottom: 10px;
}
#wishlist-table td.customer-wishlist-item-cart > p {
  margin-bottom: 0;
}
#wishlist-table td.customer-wishlist-item-cart .remove-whishlist-item {
  text-align: center;
}
#wishlist-table td.customer-wishlist-item-cart .btn-remove {
  vertical-align: top;
}
#wishlist-table td.customer-wishlist-item-remove {
  width: 20px;
}
#wishlist-table .price-box {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 11px;
}
#wishlist-table .price-box .price {
  color: #373737;
}
#wishlist-table .giftregisty-add {
  margin-top: 5px;
}
#wishlist-table .giftregisty-add .change {
  display: none;
}
#wishlist-table .giftregisty-add li {
  cursor: pointer;
  color: #f46c00;
  margin-bottom: 3px;
}
#wishlist-table .truncated .details {
  background: none;
  color: #f46c00;
}

.wishlist-annotations {
  font-size: 18px;
  line-height: 1.3;
}

#wishlist-table.clean-table td {
  padding-left: 10px;
  padding-right: 10px;
}

/* ============================================ *
 * Wishlist Sidebar
 * ============================================ */
.block-wishlist .mini-products-list > li:not(:last-child) {
  padding-bottom: 5px;
}
.block-wishlist .product-details .product-name {
  padding-top: 0;
  margin-bottom: 5px;
}
.block-wishlist .price-box {
  float: left;
  margin: 0;
}
.block-wishlist .price-box,
.block-wishlist .price-box .price,
.block-wishlist .link-cart {
  font-size: 11px;
}
.block-wishlist .link-cart {
  float: left;
  text-transform: uppercase;
  margin-right: 7px;
  padding-right: 7px;
  border-right: 1px solid #EDEDED;
}

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* ============================================ *
 * Checkout - Mini cart
 * ============================================ */
.header-minicart .minicart-message {
  display: block;
  padding: 10px;
}
.header-minicart .minicart-wrapper {
  clear: both;
  position: relative;
}
.header-minicart .minicart-wrapper:before, .header-minicart .minicart-wrapper:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: none;
}
.header-minicart .minicart-wrapper:before {
  background-color: white;
  opacity: 0.8;
  z-index: 2;
}
.header-minicart .minicart-wrapper:after {
  background-image: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/opc-ajax-loader.gif");
  background-repeat: no-repeat;
  background-position: center;
  z-index: 3;
}
.header-minicart .minicart-wrapper.loading {
  position: relative;
}
.header-minicart .minicart-wrapper.loading:before, .header-minicart .minicart-wrapper.loading:after {
  display: block;
}
.header-minicart .block-cart {
  display: none;
}
.header-minicart .block-subtitle {
  color: #50A4CF;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  line-height: 1.4;
  padding: 5px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 0px;
}
.header-minicart .block-subtitle .close {
  width: 40px;
  float: right;
  display: block;
  color: #373737;
  text-decoration: none;
  font-weight: normal;
  font-size: 30px;
  position: absolute;
  top: -8px;
  right: -3px;
}
.header-minicart .mini-products-list {
  padding: 10px;
  padding-top: 0px;
}
.header-minicart .mini-products-list li {
  padding: 8px 5px 8px 11px;
  border-bottom: 1px solid #DDDDDD;
  position: relative;
}
.header-minicart .mini-products-list li.last {
  border: none;
}
.header-minicart .mini-products-list li .product-details {
  position: relative;
}
.header-minicart .product-details .product-name {
  padding-top: 0px;
  font-weight: bold;
}
.header-minicart .product-details .product-name a {
  color: #f46c00;
}
.header-minicart .info-wrapper {
  margin-bottom: 0.5em;
}
.header-minicart .info-wrapper th {
  text-transform: uppercase;
  padding-right: 10px;
}
.header-minicart .info-wrapper td {
  color: #5a8aba;
  clear: right;
}
.header-minicart .info-wrapper .qty-wrapper td {
  height: 33px;
  line-height: 33px;
}
.header-minicart .info-wrapper .qty {
  padding-left: 4px;
  padding-right: 4px;
  margin-right: 2px;
  width: 30px;
}
.header-minicart .info-wrapper .quantity-button {
  opacity: 0;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -moz-transition-duration: 100ms;
  -o-transition-duration: 100ms;
  -webkit-transition-duration: 100ms;
  transition-duration: 100ms;
}
.header-minicart .info-wrapper .quantity-button[disabled] {
  cursor: default;
}
.header-minicart .info-wrapper .quantity-button.visible {
  opacity: 1;
}
.header-minicart .subtotal {
  background-color: #DDDDDD;
  text-align: center;
  line-height: 2em;
}
.header-minicart .subtotal .label {
  color: white;
  text-transform: uppercase;
}
.header-minicart .subtotal .price {
  color: #5a8aba;
}
.header-minicart .minicart-actions {
  padding: 10px;
  margin-top: 0px;
  overflow: hidden;
  position: relative;
}
.header-minicart .minicart-actions .checkout-button {
  min-width: 145px;
}
.header-minicart .minicart-actions .cart-link {
  height: 33px;
  line-height: 39px;
  text-transform: uppercase;
  display: block;
  font-size: 12px;
  left: 10px;
  bottom: 17px;
  position: absolute;
}
.header-minicart .minicart-actions .paypal-logo .paypal-or {
  line-height: 1.6;
}
.header-minicart #minicart-error-message {
  text-align: center;
  color: red;
  display: none;
}
.header-minicart #minicart-success-message {
  text-align: center;
  color: green;
  display: none;
}
.header-minicart .jcarousel-control-prev,
.header-minicart .jcarousel-control-next {
  display: none;
}

.header-minicart.skip-active .block-cart,
.block-cart.skip-active {
  display: block;
}

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* ============================================ *
 * Search - Auto Suggest
 * ============================================ */
.search-autocomplete {
  left: 0 !important;
  overflow: visible !important;
  position: relative !important;
  top: 15px !important;
  width: 100% !important;
  z-index: 200;
}
.search-autocomplete ul {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background-color: #FFFFFF;
  border: 1px solid #f46c00;
  left: 0;
  padding-left: 0;
  position: absolute;
  top: 0;
  width: 90%;
}
.search-autocomplete ul li {
  border-bottom: 1px solid #F4F4F4;
  color: #f46c00;
  cursor: pointer;
  font-size: 11px;
  padding: 4px 6px;
  text-align: left;
  line-height: 18px;
}
.search-autocomplete ul li:hover {
  color: #db6100;
}
.search-autocomplete ul li.selected {
  background-color: #f46c00;
  color: white;
}
.search-autocomplete ul li .amount {
  float: right;
  font-weight: bold;
}
.search-autocomplete ul li:last-child {
  border-bottom: none;
}
.search-autocomplete:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-bottom: 7px solid #f46c00;
  border-top: none;
  left: 40%;
  top: -7px;
}

/* ============================================ *
 * Search - Advanced
 * ============================================ */
.advanced-search {
  background: #F4F4F4;
  border: 1px solid #EDEDED;
  padding: 30px;
}
.advanced-search select.multiselect option {
  border-bottom: 1px solid #EDEDED;
  padding: 2px 5px;
}

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* ============================================ *
 * Account - Reviews
 * ============================================ */
.product-review .product-img-box p.label {
  border-bottom: 1px solid #CCCCCC;
  font-size: 15px;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  margin-top: 20px;
  padding-bottom: 10px;
  text-transform: uppercase;
}
.product-review .product-img-box .rating-box {
  margin: 15px 0;
}
.product-review .product-details h2 {
  border-bottom: 1px solid #CCCCCC;
  color: #3399CC;
  font-size: 15px;
  font-weight: 600;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  padding-bottom: 10px;
}
.product-review .ratings-table {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}
.product-review .ratings-table th {
  padding-right: 10px;
}
.product-review .ratings-table tr {
  float: left;
  font-size: 11px;
  margin-right: 10px;
  text-transform: uppercase;
}
.product-review .ratings-description dt {
  border-bottom: 1px solid #CCCCCC;
  font-size: 15px;
  font-weight: 400;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  margin-top: 20px;
  padding: 10px 0;
  text-transform: uppercase;
}
.product-review .ratings-description dd {
  color: #737373;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 12px;
}

.product-review .ratings-table tr {
  float: none;
}

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* ============================================ *
 * CMS Pages
 * ============================================ */
.cms-page-view .page-title h1,
.cms-page-view .page-title h3,
.cms-page-view .page-head h1,
.cms-page-view .page-head h3,
.cms-no-route .page-title h1,
.cms-no-route .page-title h3,
.cms-no-route .page-head h1,
.cms-no-route .page-head h3 {
  border: none;
}
.cms-page-view .page-title h1,
.cms-no-route .page-title h1 {
  color: #f26c00;
  font-size: 43px;
  margin-bottom: 0;
}
.cms-page-view .page-title h2,
.cms-no-route .page-title h2 {
  font-size: 28px;
  font-weight: 300;
  color: #f26c00;
  border-bottom: 0;
  line-height: 30px;
  padding-bottom: 0;
}
.cms-page-view .std img,
.cms-no-route .std img {
  max-width: 100%;
}
.cms-page-view .std p,
.cms-no-route .std p {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  line-height: 24px;
}
.cms-page-view .std h1,
.cms-no-route .std h1 {
  color: #5a8aba;
}
.cms-page-view .std h2,
.cms-no-route .std h2 {
  color: #5a8aba;
}
.cms-page-view .std li,
.cms-no-route .std li {
  color: #373737;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 13px;
  line-height: 24px;
}
.cms-page-view .col-left:after,
.cms-no-route .col-left:after {
  content: '';
  display: table;
  clear: both;
}

.cms-no-route .std img {
  width: 100%;
}

.cms-home .std, .cms-home .page-title {
  display: none;
}

.cms-page-view .std .messages,
.cms-home .std .messages,
.cms-no-route .std .messages {
  margin-bottom: 10px;
}
.cms-page-view .std .messages ul,
.cms-home .std .messages ul,
.cms-no-route .std .messages ul {
  margin-bottom: 0;
}
.cms-page-view .std .messages li,
.cms-home .std .messages li,
.cms-no-route .std .messages li {
  list-style: none;
  margin-left: 0;
  font-style: normal;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}

#accordion .toggle-tabs {
  display: none;
}
#accordion > dl > dt {
  margin: 0;
  margin-bottom: 10px;
  color: #d2421f;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 14px;
  font-weight: bold;
  font-style: normal;
  line-height: 1.4;
  text-rendering: optimizeSpeed;
  text-transform: uppercase;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  font-weight: 600;
  margin-bottom: 4px;
  padding: 12px 10px 12px 24px;
  position: relative;
  background-color: #f26c00;
  text-align: center;
  font-size: 21px;
  color: #fff;
  display: block;
}
#accordion > dl > dt:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 4px solid #f46c00;
  border-bottom: none;
  left: 10px;
  top: 50%;
  margin-top: -3px;
}
#accordion > dl > dd {
  padding: 10px;
  margin: 0;
}
#accordion > dl > dd:last-child {
  border-width: 0 1px 1px 1px;
}
#accordion li {
  position: relative;
  overflow: hidden;
}
#accordion li .plusimage h2 {
  margin-right: 10px;
}

.page-sitemap .links {
  display: block;
  text-align: right;
  margin: 0 20px 0 0;
}
.page-sitemap .links a {
  position: relative;
}
.page-sitemap .sitemap {
  padding: 0 20px;
  margin: 15px 0;
  font-size: 11px;
}
.page-sitemap .sitemap li {
  margin: 3px 0;
}

.contacts-index-index h1 {
  border: none;
}

#contactForm {
  padding-left: 40px;
}
#contactForm h2 {
  display: none;
}
#contactForm:after {
  content: '';
  display: table;
  clear: both;
}
#contactForm .fieldset .legend + .required {
  margin: 0;
}

.cms-espace-presse .sharer-block {
  margin-bottom: 10px;
}
.cms-espace-presse .contact-press {
  clear: both;
  padding: 20px;
  background: black;
  background: rgba(0, 0, 0, 0.7);
  margin: 10px 0 15px;
  display: block;
  overflow: hidden;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.cms-espace-presse .contact-press h3 {
  color: #fff;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 20px;
}
.cms-espace-presse .contact-press p {
  color: #fff;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
}
.cms-espace-presse .contact-press p a {
  color: #fff;
  text-decoration: underline;
}

.cms-page-view.cms-espace-presse .sidebar #reservation-vertical {
  margin-top: 0;
}

#popin-offers {
  display: none;
}
#popin-offers em {
  font-style: normal;
}
#popin-offers .open {
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  z-index: 999;
}
#popin-offers .popin-inner {
  position: absolute;
  top: 220px;
  left: 50%;
  width: 500px;
  background: #fff;
  padding: 30px;
  margin-left: -250px !important;
  z-index: 1000;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
}
#popin-offers .close {
  display: inline-block;
  float: right;
  color: #6395c6;
  font-weight: 600;
  margin-bottom: 13px;
}
#popin-offers .popin-content {
  clear: both;
}
#popin-offers .popin-intro,
#popin-offers .offers-rgpd {
  margin-bottom: 20px;
}
#popin-offers .offers-rgpd {
  margin-top: 20px;
}
#popin-offers #popin-offers-validate {
  font-size: 14px;
  font-weight: 700;
}
#popin-offers .popin-offers-msg {
  margin-top: 20px;
}
#popin-offers .popin-offers-msg > div {
  display: none;
}
#popin-offers #popin-offers-email {
  font-size: 13px;
  height: 32px;
  border: 1px solid #c2c2c2;
  width: 60%;
  border-radius: 3px;
  background: #f8f8f8;
  margin-left: 10px;
}

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* ============================================ *
 * Pricing Conditions
 * ============================================ */
.price-box.map-info .old-price {
  display: none;
}
.price-box .minimal-price-link .label {
  color: #CF5050;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
}

.conditions {
  border-top: 1px dotted #000000;
  padding-top: 15px;
  color: #a2a2a2;
  font-size: 12px;
}

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* ============================================ *
 * Cookies
 * ============================================ */
.notice-cookie .notice-inner {
  padding-bottom: 0;
}
.notice-cookie .notice-inner a {
  color: #fff;
  text-decoration: underline;
}
.notice-cookie .notice-inner:after {
  content: '';
  display: table;
  clear: both;
}
.notice-cookie .notice-text {
  float: left;
  max-width: 90%;
  padding-top: 4px;
  text-align: left;
}
.notice-cookie .notice-text p {
  padding-bottom: 15px;
  line-height: 1.3;
}
.notice-cookie .actions {
  float: right;
  text-align: right;
  padding-bottom: 15px;
}

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* ============================================ *
 * Calendar styles (restore styles from /js/calendar)
 * ============================================ */
div.calendar table {
  border-collapse: separate;
}
div.calendar table td.button {
  display: table-cell;
  background: inherit;
  color: inherit;
  text-transform: none;
}

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* ============================================ *
 * Homepage
 * ============================================ */
/* -------------------------------------------- *
 * Primary Banner
 */
.cms-home .reservation form > .title {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  color: #fff;
  text-transform: none;
  font-weight: 400;
  font-size: 27px;
  margin: 0 0 10px 0;
  line-height: 1.4;
  font-style: normal;
  text-rendering: optimizeLegibility;
}
.cms-home .reservation form > .title br {
  display: none;
}

.cms-home .main-container,
.cms-index-defaultindex .main-container {
  padding-top: 20px;
}
.cms-home .adfab-push-carousel,
.cms-index-defaultindex .adfab-push-carousel {
  background: none;
  clear: both;
  min-height: 200px;
}
.cms-home .adfab-push-carousel .slideshow-container .slideshow > li,
.cms-index-defaultindex .adfab-push-carousel .slideshow-container .slideshow > li {
  background: #fff;
}
.cms-home .slideshow .banner-msg,
.cms-index-defaultindex .slideshow .banner-msg {
  text-align: left;
  left: 10%;
  top: 20px;
}
.cms-home .slideshow .banner-msg .place,
.cms-index-defaultindex .slideshow .banner-msg .place {
  background: rgba(0, 0, 0, 0.2);
  color: white;
  font-weight: 600;
  padding: 0 5px;
}
.cms-home .widget-static-block,
.cms-index-defaultindex .widget-static-block {
  border-top: 1px dotted #000;
  margin-top: 40px;
  padding-top: 10px;
}
.cms-home .seo_hp,
.cms-index-defaultindex .seo_hp {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.cms-home .seo_hp .widget-static-block,
.cms-index-defaultindex .seo_hp .widget-static-block {
  padding-top: 35px;
  padding-left: 150px;
  padding-right: 150px;
}
.cms-home .seo_hp .widget-static-block h1,
.cms-index-defaultindex .seo_hp .widget-static-block h1 {
  text-transform: uppercase;
  font-size: 16px;
  color: #5a8aba;
  font-weight: 300;
}
.cms-home .seo_hp .widget-static-block h2,
.cms-index-defaultindex .seo_hp .widget-static-block h2 {
  text-transform: uppercase;
  font-size: 22px;
  color: #5a8aba;
  font-weight: 300;
  margin-top: 25px;
}
.cms-home .seo_hp .widget-static-block p,
.cms-index-defaultindex .seo_hp .widget-static-block p {
  font-size: 12px;
  margin-bottom: 10px;
  color: #717171;
}
.cms-home .reservation,
.cms-index-defaultindex .reservation {
  z-index: 110;
  margin-top: -113px;
  position: relative;
  margin-bottom: 30px;
}
.cms-home .locations,
.cms-index-defaultindex .locations {
  display: inline-block;
  float: right;
  max-width: 320px;
}
.cms-home .locations .title,
.cms-index-defaultindex .locations .title {
  display: block;
  text-transform: uppercase;
  font-size: 22px;
  color: #5a8aba;
  font-weight: 300;
}
.cms-home .locations .content-block img,
.cms-index-defaultindex .locations .content-block img {
  width: 300px;
}

.cms-home .adfab-push-carousel,
.cms-index-defaultindex .adfab-push-carousel {
  padding: 0;
}

.slideshow .banner-msg {
  position: absolute;
  text-align: center;
  width: 100%;
  top: 30%;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  max-width: 450px;
}

.slideshow .banner-msg h2,
.slideshow .banner-msg h3 {
  text-transform: uppercase;
  color: #FFFFFF;
  font-size: 45px;
  font-weight: 600;
  line-height: 48px;
  margin-bottom: 0;
}

.slideshow .banner-msg h3 {
  font-size: 28px;
  padding-bottom: 0;
  font-weight: 300;
  line-height: 30px;
  margin-bottom: 0;
}

.slideshow .offer-button {
  margin-top: 20px;
}

.slideshow .offer-button .reduction.big {
  font-size: 24px;
  font-weight: 600;
}

.slideshow .offer-button .price {
  line-height: 22px;
  font-weight: 700;
  font-size: 20px;
}

.slideshow .banner-msg h2 strong {
  font-weight: bold;
  display: block;
  font-size: 36px;
}

/* -------------------------------------------- *
 * Promotion Banner Section
 */
.promos {
  margin: 0 0 10px 0;
  padding: 0;
  width: 100%;
}

.promos:after {
  content: '';
  display: table;
  clear: both;
}

/* Specifying the body only in order to override the .std ul li styling */
body .promos > li {
  margin: 0 0 10px 0;
  list-style: none;
  text-align: center;
  position: relative;
  border: 1px solid #CCCCCC;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.promos > li:last-child {
  margin-bottom: 0;
}

.promos img {
  max-width: 100%;
  width: 100%;
}

.promos a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: block;
}

.promos span {
  color: #FFFFFF;
  text-transform: uppercase;
  position: absolute;
  display: block;
  width: 100%;
  top: 10%;
  font-weight: 500;
  font-size: 20px;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  text-shadow: 1px 1px 3px #555555;
}

.promos strong {
  font-weight: 600;
  font-size: 26px;
  display: block;
}

.promos span {
  font-size: 16px;
}

.promos strong {
  font-size: 17px;
}

/* Config: Three columns + flexible gutter */
body .promos > li {
  float: left;
  width: 31.74603%;
  margin-right: 2.38095%;
}

.promos > li:nth-child(3n) {
  margin-right: 0;
}

.promos span {
  font-size: 18px;
}

.promos strong {
  font-size: 24px;
}

/* -------------------------------------------- *
 * New Products Section
 */
/* Hiding the reviews content via CSS because we can't modify the template, */
/* since it may be used in other places where those elements are needed */
.cms-index-index .products-grid .ratings,
.cms-index-index .products-grid .actions,
.cms-index-noroute .products-grid .ratings,
.cms-index-noroute .products-grid .actions,
.cms-index-index #button-resa {
  display: none;
}

.cms-index-index h2.subtitle {
  padding: 6px 0;
  text-align: center;
  color: #5a8aba;
  font-weight: 600;
  border-bottom: 1px solid #CCCCCC;
  border-top: 1px solid #CCCCCC;
}

.cms-index-noroute h2.subtitle {
  display: none;
}

.prehome-content {
  position: absolute;
  top: 50px;
  left: 0;
  z-index: 211;
  text-align: center;
  width: 100%;
}
.prehome-content > div {
  position: relative;
  display: inline-block;
}
.prehome-content > div span {
  position: absolute;
  right: 0;
  top: 0;
  color: #000;
  background: #fff;
  z-index: 2;
}
.prehome-content > div.video {
  min-width: 70%;
}
.prehome-content img {
  margin: 0 auto;
  max-width: 100%;
}
.prehome-content p {
  text-align: center;
  color: #fff;
  font-size: 20px;
  margin-bottom: 20px;
}
.prehome-content a.button {
  margin-top: 40px;
  display: inline-block;
  font-weight: bold;
}
.prehome-content.simple-popin {
  display: none;
  position: fixed;
  background: #fff;
  padding: 15px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  width: 80%;
  max-width: 500px;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}
.prehome-content.simple-popin .button {
  top: -15px;
  right: -15px;
  background: #f46c00;
  color: #fff;
}
.prehome-content.simple-popin .simple-popin-content strong {
  display: block;
  margin-bottom: 15px;
}
.prehome-content.simple-popin .simple-popin-content p {
  color: #000;
  font-size: 16px;
}
.prehome-content.simple-popin + #overlay-simple-popin {
  display: none;
}

#overlay-content {
  position: fixed;
}
#overlay-content #loading {
  margin-bottom: 20px;
}
#overlay-content img {
  max-width: 550px;
}
#overlay-content > div.video {
  min-width: 0;
  max-width: 550px;
  width: 70%;
}
#overlay-content > div p {
  color: #000;
}

.overlay-prehome {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.3);
  z-index: 210;
}

.prehome {
  display: none;
}

.partners {
  display: inline-block;
  width: 49%;
  vertical-align: top;
  color: #000;
  padding-right: 15px;
  margin-bottom: 20px;
}
.partners a {
  color: #000;
  outline: 0;
}
.partners .title {
  display: block;
  color: #5a8aba;
  font-size: 20px;
  margin-bottom: 10px;
}
.partners div span,
.partners img {
  display: inline-block;
  vertical-align: top;
}
.partners div span {
  width: 100%;
}
.partners img {
  max-width: 105px;
  height: auto;
  width: 30%;
  margin-right: 4%;
}
.partners img + span {
  width: 60%;
}

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_default
 * @copyright   Copyright (c) 2014 Magento Inc. (http://www.magentocommerce.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */
/* ============================================ *
 * Category Landing Pages
 * ============================================ */
.category-image {
  position: relative;
}

.categorylandingMainblock {
  border: 1px solid #E2E2E2;
  padding: 7px;
}

.catblocks {
  float: left;
  padding: 0 0 20px 0;
  width: 100%;
}

.catblocks li {
  position: relative;
  float: left !important;
  width: 23% !important;
  margin-right: 2.66667% !important;
  margin-bottom: 10px;
  border: 1px solid #CCCCCC;
  padding: 10px;
}

.catblocks li:hover {
  border-color: #5a8aba;
}

.catblocks li:last-child {
  margin-right: 0 !important;
}

.catblocks li img {
  width: 100%;
  max-width: 100%;
}

.catblocks li a span {
  color: #FFFFFF;
  position: absolute;
  background-color: #7B7C7B;
  font-family: raleway;
  font-size: 17px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  bottom: 0px;
  left: 0px;
  width: 100%;
  padding: 5px 10px;
  margin-right: 10px;
}

.catblocklinks a {
  color: #FFFFFF;
  text-decoration: none;
}

.catlandingbottomPromoblock {
  float: left;
  width: 100%;
  border: 1px solid #E2E2E2;
  margin-bottom: 100px;
}

.catalog-category-view div.categoryland-caption {
  display: block;
  margin: 0;
  position: absolute;
  color: #000000;
  font-size: 30px;
  font-weight: 500;
  line-height: 36px;
  text-align: center;
}

.catalog-category-view div.categoryland-caption span.blue-big-text {
  color: #3399CC;
  font-size: 50px;
  font-weight: 800;
  padding: 0 0 0 8px;
}

.catalog-category-view div.categoryland-caption span.blue-big-text {
  padding: 0 !important;
}

.catalog-category-view div.categoryland-caption span.three-dots {
  background: url(https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/bg_threeDots.png) no-repeat center center;
  display: block;
  height: 20px;
}

.catalog-category-view div.categoryland-caption p.desc {
  font: italic 18px/28px Georgia, "Times New Roman", Times, serif;
  color: #656565;
}

.cms-home #homepage-main-slides div.slides_control div div.slideshow-caption a.link:hover,
.cms-home #homepage-main-slides div.slides_control div div.slideshow-caption span.link:hover {
  text-decoration: underline;
  color: #1189C5;
}

.cms-home #homepage-main-slides div.slides_control div div.slideshow-caption span.blue-big-text,
.catalog-category-view div.categoryland-caption span.blue-big-text {
  color: #3399CC;
  font-size: 50px;
  font-weight: 800;
  padding: 0 0 0 8px;
}

.catalog-category-view div.categoryland-caption span.blue-big-text {
  padding: 0 !important;
}

.cms-home #homepage-main-slides div.slides_control div div.slideshow-caption span.three-dots,
.catalog-category-view div.categoryland-caption span.three-dots {
  background: url(https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/bg_threeDots.png) no-repeat center center;
  display: block;
  height: 20px;
}

.cms-home #homepage-main-slides div.slides_control div div.slideshow-caption p.desc,
.catalog-category-view div.categoryland-caption p.desc {
  font: italic 18px/28px Georgia, "Times New Roman", Times, serif;
  color: #656565;
}

.catalog-category-view .col-right .reservation {
  margin-bottom: 20px;
}

.thematic-villages .season {
  margin: 8px 0;
}
.thematic-villages .product-collateral {
  overflow: visible;
  padding-top: 60px;
}
.thematic-villages .product-collateral .toggle-tabs li {
  position: relative;
}
.thematic-villages .product-collateral .toggle-tabs li div {
  position: absolute;
  top: -110%;
  width: 100%;
}
.thematic-villages .product-collateral .toggle-tabs li div img {
  margin: 0 auto;
  width: 50px;
}
.thematic-villages .village-block ul {
  margin: 10px 0;
}
.thematic-villages .village-block a {
  text-decoration: underline;
}
.thematic-villages .village-block.dotted {
  padding-bottom: 20px;
}
.thematic-villages .content {
  font-size: 14px;
  margin: 15px 0;
}
.thematic-villages .content .description {
  margin: 15px 0;
}
.thematic-villages .content img {
  max-width: 100%;
  margin: 10px;
}
.thematic-villages .content .description img {
  margin: 0 0 10px 0;
}
.thematic-villages .villages-list .title {
  line-height: 30px;
  margin-bottom: 15px;
}
.thematic-villages .villages-list .title span {
  font-weight: 400;
  font-size: 16px;
  text-transform: none;
}
.thematic-villages .villages-list .content-block {
  margin: 10px 45px 15px 0;
  padding: 0;
}
.thematic-villages .villages-list .content-block img {
  width: 100%;
  margin: 0 0 10px 0;
}
.thematic-villages .villages-list .content-block:nth-child(2n) {
  margin-right: 0;
}
.thematic-villages .villages-list .strength li {
  display: inline;
  vertical-align: top;
  margin-bottom: 3px;
  padding: 0 4px 0 14px;
  position: relative;
  margin-left: 0;
  font-size: 13px;
  font-weight: 600;
}
.thematic-villages .villages-list .strength li:before {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  content: '';
  background: black;
  width: 4px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
}
.thematic-villages .villages-list .village.infos-block .category-village-description {
  font-size: 13px;
  margin-bottom: 3px;
}

/* Reservation

Reservation
<h1>Result</h1>

Markup: <div id="reservation" class="reservation">
    <form action="#" method="POST">
        <h3>Votre séjour tout compris :</h3>
        <div class="drop destination">
            <span>Destinations...</span>
            <div class="down">
                <div class="search-advanced">
                    <div class="custom-radio season">
                        <div class="radio summer">
                            <input type="radio" name="season" class="season-summer" value="Saison été" checked="checked" />
                            <label for="season">Saison été</label>
                        </div>
                        <div class="radio winter">
                            <input type="radio" name="season" class="season-winter" value="Saison hiver" />
                            <label for="season">Saison hiver</label>
                        </div>
                    </div>
                    <p>Choisissez ci-dessous vos critères de sélection :</p>
                    <div class="custom-control winter">
                        <input type="checkbox" name="" id="eq-1"/>
                        <label for="eq-1">Equipement hiver</label>
                    </div>
                    <div class="custom-control winter">
                        <input type="checkbox" name="" id="eq-2"/>
                        <label for="eq-2">Equipement hiver</label>
                    </div>
                    <div class="custom-control summer">
                        <input type="checkbox" name="" id="eq-3"/>
                        <label for="eq-3">Equipement été</label>
                    </div>
                    <div class="custom-control summer">
                        <input type="checkbox" name="" id="eq-4"/>
                        <label for="eq-4">Equipement été</label>
                    </div>
                    <a href="#" class="button radius back">Retour</a>
                </div>
                <div class="simple-search">
                    <p>Sélectionnez les Villages Clubs correspondants à vos critères :</p>
                    <!-- don't forget to respect input id and label for -->
                    <div class="thematique">
                        <div class="custom-control parent">
                            <input type="checkbox" name="thematique" id="theme-1"/>
                            <label for="theme-1">Séjour à la mer</label>
                        </div>
                        <div class="custom-control">
                            <input type="checkbox" name="d[]" id="dest-1"/>
                            <label for="dest-1">Les ménuires</label>
                        </div>
                        <div class="custom-control">
                            <input type="checkbox" name="d[]" id="dest-2"/>
                            <label for="dest-2">Flaine</label>
                        </div>
                    </div>
                    <div class="thematique">
                        <div class="custom-control parent">
                            <input type="checkbox" name="thematique" id="theme-2"/>
                            <label for="theme-2">Séjour à la montagne</label>
                        </div>
                        <div class="custom-control">
                            <input type="checkbox" name="d[]" id="dest-3"/>
                            <label for="dest-3">Alpe d'Huez - Oz en Oisans</label>
                        </div>
                        <div class="custom-control">
                            <input type="checkbox" name="d[]" id="dest-4"/>
                            <label for="dest-4">Vars</label>
                        </div>
                        <div class="custom-control">
                            <input type="checkbox" name="d[]" id="dest-5"/>
                            <label for="dest-5">Les ménuires</label>
                        </div>
                        <div class="custom-control">
                            <input type="checkbox" name="d[]" id="dest-6"/>
                            <label for="dest-6">Flaine</label>
                        </div>
                        <div class="custom-control">
                            <input type="checkbox" name="d[]" id="dest-7"/>
                            <label for="dest-7">Alpe d'Huez - Oz en Oisans</label>
                        </div>
                        <div class="custom-control">
                            <input type="checkbox" name="d[]" id="dest-8"/>
                            <label for="dest-8">Vars</label>
                        </div>
                    </div>
                    <div class="custom-control select-all">
                        <input type="checkbox" name="destination-all" id="dest-all"/>
                        <label for="dest-all">Tout sélectionner</label>
                    </div>
                    <a href="#" class="button orange inactive">Ajouter ces destinations</a>
                    <a href="#" class="button radius">Recherche avancée</a>
                </div>
            </div>
        </div>
        <div class="drop participant">
            <span>Participants...</span>
            <div class="down">
                <div class="input-box">
                    <select name="adults">
                        <option value="1">1</option>
                        <option value="2">2</option>
                    </select>
                    <label><span>Adulte(s)</span> (18 ans et +)</label>
                </div>
                <div class="input-box">
                    <select name="children">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                    <label><span>Enfant(s)</span> (-18 ans)</label>
                </div>
                <div class="dob-children">
                    <p>Merci de saisir la date de naissance des enfants :</p>
                    <div class="dob-child" id="dobchild-1"> 
                        <input type="text" value="" placeholder="JJ" class="childday" maxlength="2"/> /
                        <input type="text" value="" placeholder="MM" class="childmonth" maxlength="2"/> /
                        <input type="text" value="" placeholder="AAAA" class="childyear" maxlength="4"/>
                        <input type="hidden" class="dobchild" name="dobchild[]" value="" /> 
                    </div>
                </div>
                <a href="#" class="button orange">Ajouter ces participants</a>
            </div>
        </div>
        <div class="drop small duration">
            <span>Durée...</span>
            <div class="down">
                <div class="input-box">
                    <input type="radio" name="i" id="one-day" value="1 jour"/>
                    <label for="one-day">1 jour</label>
                </div>
                <div class="input-box">
                    <input type="radio" name="i" id="two-days" value="2 jours" />
                    <label for="two-days">2 jours</label>
                </div>
                <div class="input-box">
                    <input type="radio" name="i" id="one-week" value="1 semaine"/>
                    <label for="one-week">1 semaine</label>
                </div>
            </div>
        </div>
        <div class="drop calendar small">
            <span>Date d'arrivée</span>
            <div class="down">
                <div class="reservation-datepicker"></div>
                <p>Dates disponibles pour cette durée</p>
            </div>
            <input type="hidden" value="" name="a" />
        </div>
        <button type="submit" class="button radius">Rechercher</button>
    </form>
</div>

Styleguide 9
*/
.reservation {
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.7);
  max-width: 1060px;
  width: 100%;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.reservation .drop {
  position: relative;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") right -377px no-repeat #fff;
  display: inline-block;
  vertical-align: middle;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  color: #a2a2a2;
  padding: 0;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 10px;
}
.reservation .drop:hover {
  cursor: pointer;
  /*.down{
    display:block;
    z-index:2;
  }*/
}
.reservation .drop > span {
  display: block;
  padding: 7px 28px 7px 15px;
}
.reservation .drop > span.done {
  color: #f46c00;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
}
.reservation .drop .down {
  display: none;
  position: absolute;
  top: 41px;
  left: 0;
  padding: 15px;
  min-width: 100%;
  color: #5a8aba;
  -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.3);
  background: #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.reservation .drop .down .custom-control label {
  text-transform: uppercase;
  padding-top: 0;
  font-size: 13px;
  font-weight: 400;
  color: #384043;
}
.reservation .drop .down .custom-control label.checked {
  color: #f46c00;
}
.reservation .drop .down .custom-control label span {
  font-size: .8em;
}
.reservation .drop .down .custom-control.parent label {
  color: #5a8aba;
}
.reservation .drop .down .custom-control:last-child {
  margin-bottom: 10px;
}
.reservation .drop .down .orange, .reservation .drop .down .radius {
  width: 100%;
  margin: 4px auto;
  font-weight: 600;
  font-size: 14px;
}
.reservation .drop .down .select-all {
  color: #1b1f20;
  font-size: 12px;
}
.reservation .drop .down .select-all input {
  opacity: 0;
}
.reservation .drop .down .select-all label {
  text-transform: none;
  font-size: 12px;
  text-decoration: underline;
  margin-left: -20px;
  cursor: pointer;
}
.reservation .drop .down .custom-select {
  color: #f46c00;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 12px;
}
.reservation .drop .down .custom-select span {
  font-size: 15px;
  font-weight: bold;
}
.reservation .drop .down .dob-children {
  color: #373737;
  min-width: 250px;
  padding-bottom: 10px;
  border-bottom: 1px dotted #f46c00;
  margin-bottom: 10px;
  display: none;
}
.reservation .drop .down .dob-children p {
  font-size: 12px;
  font-weight: 400;
  padding-top: 5px;
  border-top: 1px dotted #f46c00;
  margin-top: 10px;
  margin-bottom: 10px;
}
.reservation .drop .down .dob-children .dob-child {
  margin-bottom: 5px;
}
.reservation .drop .down .dob-children input {
  background: #f8f8f8;
  color: #384043;
  font-weight: 600;
  border: 1px solid #CCCCCC;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 4px;
  width: 40px;
  margin-bottom: 5px;
  text-align: center;
  font-size: 14px;
}
.reservation .drop .down .dob-children input[name^="child-year"],
.reservation .drop .down .dob-children input[class^="childyear"] {
  width: 95px;
  text-align: left;
}
.reservation .drop .down .dob-children .error-dobyear {
  display: none;
  margin-bottom: 10px;
  color: #CF5050;
  font-size: 13px;
  line-height: 1.2;
  margin-top: 5px;
}
.reservation .drop .down .reservation-datepicker .ui-datepicker {
  padding: 0;
  box-shadow: none;
}
.reservation .drop .down.active {
  display: block;
  z-index: 2;
}
.reservation .drop.destination p {
  color: #384043;
  font-size: 12px;
  padding: 10px 0;
  line-height: 17px;
  font-weight: 600;
}
.reservation .drop.destination .custom-control {
  margin-left: 25px;
  margin-bottom: 3px;
}
.reservation .drop.destination .custom-control.parent {
  margin-left: 5px;
}
.reservation .drop.destination .custom-control input, .reservation .drop.destination .custom-control label {
  display: inline-block;
  vertical-align: middle;
}
.reservation .drop.destination .custom-control input {
  width: 7%;
}
.reservation .drop.destination .custom-control label {
  width: 90%;
  line-height: 1.1em;
}
.reservation .drop.destination .search-advanced,
.reservation .drop.destination .simple-search {
  display: inline-block;
  vertical-align: top;
  width: 250px;
}
.reservation .drop.destination .simple-search p {
  display: none;
}
.reservation .drop.destination .search-advanced {
  border-right: 1px dotted #f46c00;
  width: 255px;
  padding-right: 25px;
  padding-left: 0;
  display: none;
}
.reservation .drop.destination .search-advanced.summer {
  display: inline;
}
.reservation .drop.destination .search-advanced.winter {
  display: none;
}
.reservation .drop.destination .search-advanced .custom-radio .winter,
.reservation .drop.destination .search-advanced .custom-radio .summer {
  display: block;
}
.reservation .drop.destination .search-advanced .button.back {
  display: inline-block;
  width: auto;
  padding-left: 40px;
}
.reservation .drop.destination .search-advanced .button.back:after {
  left: 15px;
}
.reservation .drop.destination .custom-radio .winter,
.reservation .drop.destination .custom-radio .summer {
  display: block;
}
.reservation .drop.destination .advanced {
  min-width: 550px;
}
.reservation .drop.destination .advanced .search-advanced {
  display: inline-block;
}
.reservation .drop.destination .advanced .simple-search {
  padding-left: 15px;
  padding-top: 25px;
}
.reservation .drop.destination .advanced .simple-search .radius {
  display: none;
}
.reservation .drop.destination .button.inactive {
  background: #f8b57f;
  color: #fcdabf;
}
.reservation .drop.destination .button.inactive:hover {
  background: #f8b57f;
  color: #fcdabf;
}
.reservation .drop.participant .down label {
  font-size: 14px;
  font-weight: 400;
}
.reservation .drop.participant .down label span {
  text-transform: uppercase;
}
.reservation .drop.participant .input-box {
  margin-bottom: 10px;
  margin-left: 5px;
}
.reservation .drop.participant select {
  min-width: 40px;
}
.reservation .drop.duration .down {
  min-width: 100%;
}
.reservation .drop.duration a {
  display: block;
  font-size: 15px;
  color: #d6d6d6;
  margin-bottom: 6px;
}
.reservation .drop.duration a.active, .reservation .drop.duration a:hover {
  color: #f46c00;
}
.reservation .drop.duration .input-box {
  margin-bottom: 5px;
}
.reservation .drop.duration label {
  text-transform: uppercase;
  font-size: 14px;
  margin-left: 5px;
}
.reservation .drop.calendar {
  background-position: right -444px;
  min-width: 160px;
}
.reservation .drop.calendar p {
  border-top: 1px dotted #f46c00;
  padding-left: 35px;
  position: relative;
  color: #1b1f20;
  font-size: 12px;
  margin-left: 2px;
  padding-top: 14px;
  margin-bottom: 5px;
  margin-top: 12px;
  font-weight: 400;
}
.reservation .drop.calendar p:before {
  position: absolute;
  content: '';
  left: 0;
  top: 10px;
  height: 25px;
  width: 30px;
  background: #f46c00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.reservation .drop.calendar .down {
  padding: 10px;
  right: 0;
  left: auto;
}
.reservation h1, .reservation h3, .reservation .title.hp {
  color: #fff;
  text-transform: none;
  font-weight: 400;
  font-size: 27px;
  margin-bottom: 10px;
  line-height: 1.4;
}
.reservation h1 span, .reservation h3 span, .reservation .title.hp span {
  color: #f46c00;
}
.reservation .discount-group a {
  color: #fff;
  display: inline-block;
  text-decoration: underline;
  outline: none;
}
.reservation .discount-group .input-group {
  display: none;
}
.reservation .discount-group .input-group input {
  border: none;
}

#reservation h3 span {
  font-weight: 500;
  font-size: 29px;
}
#reservation .drop {
  margin-right: 4px;
  width: calc(17% - 4px);
  float: left;
}
#reservation .drop > span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding: 7px 28px 7px 10px;
}
#reservation .error {
  color: #fff;
  margin-top: 8px;
  font-weight: 500;
  display: none;
}
#reservation .close {
  display: none;
}
#reservation .discount-group {
  display: inline-block;
  vertical-align: middle;
  width: 32%;
}
#reservation .discount-group > div {
  display: inline-block;
  vertical-align: middle;
  float: left;
  width: calc(50% - 2px);
}
#reservation .discount-group > div .input-group {
  text-align: left;
}
#reservation .discount-group a {
  margin-bottom: 5px;
  margin-left: 10px;
  line-height: 35px;
  text-align: center;
}
#reservation .discount-group .promo-group + .partner-group {
  margin-left: 4px;
}
#reservation .discount-group .input-text {
  border-radius: 5px;
  font-weight: 700;
  line-height: 35px;
  height: auto;
  color: #a2a2a2;
  font-size: 14px;
  outline: none;
}
#reservation .actions {
  display: inline-block;
  vertical-align: top;
  width: 100%;
}
#reservation button[type="submit"] {
  vertical-align: top;
  padding: 8px 15px 9px;
  width: 100%;
  font-size: 15px;
  font-weight: 700;
  background: #dc5528;
}

/* Reservation Vertical

Reservation Vertical (it's the same HTML that #reservation)
<h1>Result</h1>

Markup: <!-- adding a sidebar for the example -->
<div class="col2-right-layout">
  <div class="col-right sidebar">
    <div id="reservation-vertical" class="reservation">
        <form action="#" method="POST">
            <h3>Votre séjour <span>tout compris :<span></h3>
            <div class="drop destination">
                <span>Destinations...</span>
                <div class="down">
                    <div class="search-advanced">
                        <div class="custom-radio season">
                            <div class="radio summer">
                                <input type="radio" name="season" class="season-summer" value="Saison été" checked="checked" />
                                <label for="season">Saison été</label>
                            </div>
                            <div class="radio winter">
                                <input type="radio" name="season" class="season-winter" value="Saison hiver" />
                                <label for="season">Saison hiver</label>
                            </div>
                        </div>
                        <p>Choisissez ci-dessous vos critères de sélection :</p>
                        <div class="custom-control winter">
                            <input type="checkbox" name="" id="eq-1"/>
                            <label for="eq-1">Equipement hiver</label>
                        </div>
                        <div class="custom-control winter">
                            <input type="checkbox" name="" id="eq-2"/>
                            <label for="eq-2">Equipement hiver</label>
                        </div>
                        <div class="custom-control summer">
                            <input type="checkbox" name="" id="eq-3"/>
                            <label for="eq-3">Equipement été</label>
                        </div>
                        <div class="custom-control summer">
                            <input type="checkbox" name="" id="eq-4"/>
                            <label for="eq-4">Equipement été</label>
                        </div>
                        <a href="#" class="button radius">Recherche simple</a>
                    </div>
                    <div class="simple-search">
                        <p>Sélectionnez les Villages Clubs correspondants à vos critères :</p>
                        <!-- don't forget to respect input id and label for -->
                        <div class="thematique">
                            <div class="custom-control parent">
                                <input type="checkbox" name="thematique" id="theme-1"/>
                                <label for="theme-1">Séjour à la mer</label>
                            </div>
                            <div class="custom-control">
                                <input type="checkbox" name="d[]" id="dest-1"/>
                                <label for="dest-1">Les ménuires</label>
                            </div>
                            <div class="custom-control">
                                <input type="checkbox" name="d[]" id="dest-2"/>
                                <label for="dest-2">Flaine</label>
                            </div>
                        </div>
                        <div class="thematique">
                            <div class="custom-control parent">
                                <input type="checkbox" name="thematique" id="theme-2"/>
                                <label for="theme-1">Séjour à la montagne</label>
                            </div>
                            <div class="custom-control">
                                <input type="checkbox" name="d[]" id="dest-3"/>
                                <label for="dest-3">Alpe d'Huez - Oz en Oisans</label>
                            </div>
                            <div class="custom-control">
                                <input type="checkbox" name="d[]" id="dest-4"/>
                                <label for="dest-4">Vars</label>
                            </div>
                            <div class="custom-control">
                                <input type="checkbox" name="d[]" id="dest-5"/>
                                <label for="dest-5">Les ménuires</label>
                            </div>
                            <div class="custom-control">
                                <input type="checkbox" name="d[]" id="dest-6"/>
                                <label for="dest-6">Flaine</label>
                            </div>
                            <div class="custom-control">
                                <input type="checkbox" name="d[]" id="dest-7"/>
                                <label for="dest-7">Alpe d'Huez - Oz en Oisans</label>
                            </div>
                            <div class="custom-control">
                                <input type="checkbox" name="d[]" id="dest-8"/>
                                <label for="dest-8">Vars</label>
                            </div>
                        </div>
                        
                        <div class="custom-control select-all">
                            <input type="checkbox" name="destination-all" id="dest-all"/>
                            <label for="dest-all">Tout sélectionner</label>
                        </div>
                        <a href="#" class="button orange inactive">Ajouter ces destinations</a>
                        <a href="#" class="button radius">Recherche avancée</a>
                    </div>
                </div>
            </div>
            <div class="drop participant">
                <span>Participants...</span>
                <div class="down">
                    <div class="input-box">
                        <select name="adults">
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
                        <label><span>Adulte(s)</span> (18 ans et +)</label>
                    </div>
                    <div class="input-box">
                        <select name="children">
                            <option value="0">0</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                        </select>
                        <label><span>Enfant(s)</span> (-18 ans)</label>
                    </div>
                    <div class="dob-children">
                        <p>Merci de saisir la date de naissance des enfants :</p>
                        <div class="dob-child" id="dobchild-1">
                            <input type="text" value="" placeholder="JJ" class="childday" maxlength="2"/> /
                            <input type="text" value="" placeholder="MM" class="childmonth" maxlength="2"/> /
                            <input type="text" value="" placeholder="AAAA" class="childyear" maxlength="4"/>
                            <input type="hidden" class="dobchild" name="dobchild[]" value="" />
                        </div>
                    </div>
                    <a href="#" class="button orange">Ajouter ces participants</a>
                </div>
            </div>
            <div class="drop small duration">
                <span>Durée...</span>
                <div class="down">
                    <div class="input-box">
                        <input type="radio" name="i" id="one-day" value="1 jour"/>
                        <label for="one-day">1 jour</label>
                    </div>
                    <div class="input-box">
                        <input type="radio" name="i" id="two-days" value="2 jours" />
                        <label for="two-days">2 jours</label>
                    </div>
                    <div class="input-box">
                        <input type="radio" name="i" id="one-week" value="1 semaine"/>
                        <label for="one-week">1 semaine</label>
                    </div>
                </div>
            </div>
            <div class="drop calendar small">
                <span>Date d'arrivée</span>
                <div class="down">
                    <div class="reservation-datepicker"></div>
                    <p>Dates disponibles pour cette durée</p>
                </div>
                <input type="hidden" value="" name="a" />
            </div>
            <button type="submit" class="button radius">Rechercher</button>
        </form>
    </div>
  </div>
</div>

Styleguide 9.1
*/
.reservation-like h3, .reservation-like .title,
.seminar-like h3,
.seminar-like .title,
#reservation-vertical h3,
#reservation-vertical .title {
  font-size: 20px;
  line-height: 26px;
  margin: 10px 0 25px 10px;
  color: #fff;
}
.reservation-like h3 span, .reservation-like .title span,
.seminar-like h3 span,
.seminar-like .title span,
#reservation-vertical h3 span,
#reservation-vertical .title span {
  font-size: 30px;
  display: block;
  font-weight: 400;
  color: #fff;
}
.reservation-like .custom-control,
.seminar-like .custom-control,
#reservation-vertical .custom-control {
  margin-bottom: 0;
}
.reservation-like .drop,
.seminar-like .drop,
#reservation-vertical .drop {
  width: 100%;
  line-height: 35px;
  background-position: right -370px;
}
.reservation-like .drop > span,
.seminar-like .drop > span,
#reservation-vertical .drop > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.reservation-like .drop .down,
.seminar-like .drop .down,
#reservation-vertical .drop .down {
  left: auto;
  right: 0;
}
.reservation-like .drop .down .dob-children p,
.seminar-like .drop .down .dob-children p,
#reservation-vertical .drop .down .dob-children p {
  line-height: 18px;
}
.reservation-like .drop .custom-radio,
.seminar-like .drop .custom-radio,
#reservation-vertical .drop .custom-radio {
  line-height: 18px;
}
.reservation-like .drop.aprticipant .input-box,
.seminar-like .drop.aprticipant .input-box,
#reservation-vertical .drop.aprticipant .input-box {
  margin-bottom: 0;
}
.reservation-like .drop.duration .down,
.seminar-like .drop.duration .down,
#reservation-vertical .drop.duration .down {
  min-width: 100%;
}
.reservation-like .drop.duration .input-box,
.seminar-like .drop.duration .input-box,
#reservation-vertical .drop.duration .input-box {
  margin-bottom: 0;
  padding-top: 0;
}
.reservation-like .drop.calendar,
.seminar-like .drop.calendar,
#reservation-vertical .drop.calendar {
  background-position: right -437px;
}
.reservation-like .radius,
.seminar-like .radius,
#reservation-vertical .radius {
  width: 100%;
}
.reservation-like button[type="submit"].radius, .reservation-like button[type="submit"].orange,
.seminar-like button[type="submit"].radius,
.seminar-like button[type="submit"].orange,
#reservation-vertical button[type="submit"].radius,
#reservation-vertical button[type="submit"].orange {
  font-size: 23px;
  padding: 14px 0;
  font-weight: 600;
  background: #dc5528;
  margin: 10px 0;
  width: 100%;
  color: #fff;
}
.reservation-like .error,
.seminar-like .error,
#reservation-vertical .error {
  text-align: center;
  color: #fff;
  font-weight: 400;
  display: none;
  margin-bottom: 10px;
}
.reservation-like .close,
.seminar-like .close,
#reservation-vertical .close {
  font-weight: 500;
  text-transform: uppercase;
  text-align: right;
  display: none;
}
.reservation-like .close a,
.seminar-like .close a,
#reservation-vertical .close a {
  color: #fff;
}
.reservation-like .discount-group,
.seminar-like .discount-group,
#reservation-vertical .discount-group {
  margin-bottom: 5px;
}
.reservation-like .discount-group .promo-group,
.seminar-like .discount-group .promo-group,
#reservation-vertical .discount-group .promo-group {
  margin-bottom: 10px;
}
.reservation-like .discount-group .promo-group a,
.seminar-like .discount-group .promo-group a,
#reservation-vertical .discount-group .promo-group a {
  margin-top: 10px;
}
.reservation-like .discount-group > div,
.seminar-like .discount-group > div,
#reservation-vertical .discount-group > div {
  text-align: center;
}
.reservation-like .discount-group .input-text,
.seminar-like .discount-group .input-text,
#reservation-vertical .discount-group .input-text {
  border-radius: 5px;
  font-weight: 700;
  padding: 7px 15px;
  line-height: 35px;
  display: block;
  height: auto;
}
.reservation-like .discount-group .input-text.has-value,
.seminar-like .discount-group .input-text.has-value,
#reservation-vertical .discount-group .input-text.has-value {
  color: #f46c00;
}

#button-resa {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 0;
  background: #f26c00;
  font-size: 18px;
  font-weight: 500;
  width: 120px;
  box-sizing: border-box;
  z-index: 9;
  text-align: center;
  height: 40px;
  line-height: 40px;
  opacity: .7;
  border-radius: 5px 0 0 5px;
}
#button-resa a {
  color: #fff;
  text-transform: uppercase;
}
#button-resa a:hover, #button-resa a:active, #button-resa a:focus {
  outline: 0;
}

.cms-page-view .sidebar #reservation-vertical, .col2-right-layout .sidebar #reservation-vertical {
  margin-top: 100px;
}

.reservation-like {
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.7);
  max-width: 1060px;
  width: 100%;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

/* Reservation Vertical

Reservation Vertical
<h1>Result</h1>

Markup: <!-- adding a sidebar for the example -->
<div class="col2-right-layout">
    <div class="col-right sidebar">
        <div class="reservation">
            <div class="reservation-contact">
                <p class="question">Une question ? Appelez-nous</p>
                <p class="phone">0825 802 805</p>
                <p class="cost">info/réservations - 0,15€ / min.</p>
                <p>Vous souhaitez être rappelé par un conseiller de séjour ?</p>
                <p class="call"><a href="#">Rappelez moi gratuitement</a></p>
            </div>
        </div>
    </div>
</div>

Styleguide 9.2
*/
.reservation-contact {
  border-top: 1px dotted #fff;
  color: #fff;
  text-align: center;
  padding: 0 20px;
}
.reservation-contact .question {
  font-size: 12px;
  padding-top: 15px;
  text-transform: uppercase;
}
.reservation-contact .phone {
  font-size: 29px;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 30px;
  margin-top: 5px;
}
.reservation-contact .cost {
  font-size: 11px;
  color: #f46c00;
  margin-bottom: 10px;
}
.reservation-contact .call {
  margin: 5px 0 20px;
  text-transform: uppercase;
}
.reservation-contact .call a {
  text-decoration: underline;
  color: #fff;
}

/* Reservation Vertical Tunnel

Reservation Vertical Tunnel
<h1>Result</h1>

Markup: <!-- adding a sidebar for the example -->
<div class="col2-right-layout">
    <div class="col-right sidebar">
        <div id="result-reservation" class="reservation">
            <h3>Votre séjour <span>tout compris<span></h3>
            <div class="destination">
                <span>Votre village :</span>
                <div class="result">Valmorelle</div>
            </div>
            <div class="calendar small">
                <span>Début du séjour :</span>
                <div class="result">21 septembre 2014</div>
            </div>
            <div class="duration small">
                <span>Durée du séjour</span>
                <div class="result">Une semaine</div>
            </div>
            <div class="participant">
                <span>Participants :</span>
                <div class="result">2 adultes et 2 enfants <span>(2 ans / 5 ans)</span></div>
            </div>
            <div class="room">
                <span>Votre chambre :</span>
                <div class="result">Une chambre de <span>4 personnes</span> composée d'un <span>lit double</span> et de <span>2 lits superposés</span>.</div>
            </div>
            <div class="options">
                <span>Vos options :</span>
                <div class="result">
                    <ul>
                        <li><span>2 x carnet rando <span>(+12 €)</span></span><span class="delete"><a href="#" title="Delete">x</a></span></li>
                        <li><span>Assurance annulation <span>(+62€)</span></span><span class="delete"><a href="#" title="Delete">x</a></span></li>
                    </ul>
                </div>
            </div>
            <div class="formule">
                <span>Votre séjour tout compris :</span>
                <div class="result">
                    <ul class="room">
                        <li><span>Prix du séjour</span><span class="price">1789,00 €</span></li>
                        <li><span>Supp. Chambre simple</span><span class="price">+ 20%</span></li>
                    </ul>
                    <ul class="discounts">
                        <li><span>Votre code promo</span><span class="price">- 25,00 €</span></li>
                        <li><span>Réduction VCS pour CGOS</span><span class="price">- 25,00 €</span></li>
                        <li><span>Offre 1 enfant gratuit</span><span class="price">- 25,00 €</span></li>
                    </ul>
                    <ul class="options">
                        <li><span>2 x carnet rando</span><span class="price">12,00 €</span></li>
                        <li><span>Assurance annulation</span><span class="price">62,00 €</span></li>
                    </ul>
                    <ul class="taxes">
                        <li><span>Frais de dossier</span><span class="price">12,00 €</span></li>
                        <li><span>Taxes de séjours</span><span class="price">20,00 €</span></li>
                    </ul>
                    <div class="totals">
                        <span>Total</span><span class="price">2011,00 €</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Styleguide 9.3
*/
#result-reservation h3 {
  font-size: 20px;
  line-height: 26px;
  margin: 10px 0 25px;
}
#result-reservation h3 span {
  font-size: 30px;
  display: block;
  font-weight: 400;
  color: #fff;
}
#result-reservation > div {
  color: #fff;
  margin-bottom: 5px;
}
#result-reservation > div > span {
  color: #5a8aba;
  font-size: 12px;
  display: block;
}
#result-reservation > div > div {
  text-transform: uppercase;
  font-weight: 600;
}
#result-reservation > div.participant > div span {
  font-size: 11px;
  font-weight: 400;
}
#result-reservation > div.room > div {
  text-transform: none;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
}
#result-reservation > div.room > div span {
  font-weight: 600;
}
#result-reservation > div.options {
  border-top: 1px dotted #fff;
  padding-top: 10px;
  margin-top: 15px;
}
#result-reservation > div.options span > span {
  font-weight: 400;
}
#result-reservation > div.options .delete {
  float: right;
  text-transform: none;
}
#result-reservation > div.formule {
  color: #4c4c4c;
  border-top: 1px dotted #fff;
  padding-top: 10px;
  margin-top: 15px;
}
#result-reservation > div.formule > div {
  background: #fff;
  margin-top: 5px;
  margin-bottom: 10px;
  padding: 15px 10px;
  font-size: 11px;
  line-height: 13px;
}
#result-reservation > div.formule > div > ul,
#result-reservation > div.formule > div > div {
  border-top: 1px dotted #4c4c4c;
  margin-top: 10px;
  padding-top: 10px;
}
#result-reservation > div.formule > div > ul:first-child {
  border-top: 0;
  margin: 0;
  padding: 0;
}
#result-reservation > div.formule > div li {
  margin-bottom: 5px;
}
#result-reservation > div.formule > div li span:first-child {
  max-width: 74%;
  display: inline-block;
  vertical-align: top;
}
#result-reservation > div.formule > div .price {
  float: right;
}
#result-reservation > div.formule > div .discounts li {
  margin-bottom: 1px;
}
#result-reservation > div.formule > div .discounts span:first-child {
  background: #f8b502;
  color: #fff;
  padding: 5px 5px 3px;
}
#result-reservation > div.formule > div .discounts .price {
  padding: 5px 0 3px;
}
#result-reservation > div.formule > div .totals {
  font-size: 16px;
  line-height: 1.5;
  color: #f26c00;
  font-weight: 700;
}
#result-reservation > div.formule > div .totals span {
  font-size: 12px;
}
#result-reservation > div.formule > div .totals .price {
  font-size: 20px;
  line-height: 21px;
}

.reservation-btn {
  text-align: right;
  margin-bottom: 20px;
}
.reservation-btn a {
  background: #dc5528;
  text-transform: uppercase;
  color: #fff;
  display: inline-block;
  padding: 5px 30px;
  font-weight: 600;
  font-size: 18px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.widget-search .title {
  color: #fff;
  font-size: 27px;
  margin: 0 0 10px 0;
  line-height: 1.4;
}
.widget-search.widget-search-button .discount-group {
  margin-bottom: 10px;
}
.widget-search.widget-search-button .discount-group > div {
  display: inline-block;
  vertical-align: top;
}
.widget-search.widget-search-button .discount-group .promo-group + .partner-group {
  margin-left: 7px;
}
.widget-search.widget-search-button .discount-group a {
  margin-bottom: 5px;
}
.widget-search.widget-search-button .discount-group .input-text {
  border-radius: 5px;
  font-weight: 700;
  width: 165px;
}
.widget-search.widget-search-button .actions .error {
  font-weight: 500;
  margin-top: 8px;
}
.widget-search.widget-search-big .title br {
  display: none;
}
.widget-search.widget-search-big .search-promo-code {
  padding-left: 30px;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 700;
}
.widget-search.widget-search-big .search-promo-code span {
  background-color: #fff;
  color: #f46c00;
  border-radius: 5px;
  padding: 7px 10px;
  margin-left: 8px;
  display: inline-block;
  line-height: 1.5;
  min-width: 200px;
}
.widget-search.widget-search-big .drop {
  margin-right: 4px;
  float: left;
}
.widget-search.widget-search-big .drop.destination {
  width: calc(17% - 4px);
}
.widget-search.widget-search-big .drop.destination > span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.widget-search.widget-search-big .drop.calendar {
  width: calc(17% - 4px);
}
.widget-search.widget-search-big .drop.participant {
  width: calc(17% - 4px);
}
.widget-search.widget-search-big .drop.small {
  width: calc(17% - 4px);
}
.widget-search.widget-search-big .actions {
  display: inline-block;
  vertical-align: top;
  width: 100%;
}
.widget-search.widget-search-big .actions .button {
  padding: 8px 15px 9px;
}
.widget-search.widget-search-big .actions .error {
  font-weight: 500;
  margin-top: 8px;
}
.widget-search.widget-search-big .discount-group {
  display: inline-block;
  vertical-align: middle;
  width: 32%;
}
@media (max-width: 1024px) {
  .widget-search.widget-search-big .discount-group {
    width: 31%;
  }
}
.widget-search.widget-search-big .discount-group > div {
  display: inline-block;
  vertical-align: middle;
  float: left;
  width: calc(50% - 2px);
}
.widget-search.widget-search-big .discount-group > div .input-group {
  text-align: left;
}
.widget-search.widget-search-big .discount-group a {
  margin-bottom: 5px;
  margin-left: 10px;
  line-height: 35px;
  text-align: center;
}
.widget-search.widget-search-big .discount-group .promo-group + .partner-group {
  margin-left: 4px;
}
.widget-search.widget-search-big .discount-group .input-text {
  border-radius: 5px;
  font-weight: 700;
  line-height: 35px;
  height: auto;
  color: #a2a2a2;
  font-size: 14px;
  outline: none;
}
.widget-search.widget-search-big .discount-group .input-text.has-value {
  color: #f46c00;
}
.widget-search.widget-search-big .discount-group input::placeholder,
.widget-search.widget-search-big .discount-group input::-webkit-input-placeholder,
.widget-search.widget-search-big .discount-group input::-moz-placeholder,
.widget-search.widget-search-big .discount-group input:-ms-input-placeholder,
.widget-search.widget-search-big .discount-group input:placeholder-shown {
  color: #a2a2a2;
}
.widget-search .reservation .drop.destination p {
  margin-top: 15px;
}
.widget-search .reservation .drop {
  width: 160px;
}
.widget-search a.search {
  font-weight: bold;
  margin-bottom: 20px;
  background: #f26c00;
}
.widget-search .actions button {
  font-weight: bold;
  display: block;
  font-size: 15px;
  width: 100%;
  background: #dc5528;
}
.widget-search .error {
  color: #fff;
}

.widget-search .reservation .drop > span {
  padding: 7px 28px 7px 10px;
}

.widget-search .msg-display-maintenance li::before {
  content: none !important;
}

.reservation-like .msg-display-maintenance .close,
#reservation-vertical .msg-display-maintenance .close,
#reservation .msg-display-maintenance .close {
  display: block;
  color: #6395c6;
}

.msg-display-maintenance p {
  color: #373737;
  font-weight: 500;
  margin-bottom: 20px;
}
.msg-display-maintenance #maintenance-email {
  font-size: 13px;
  height: 32px;
  border: 1px solid #c2c2c2;
  width: 60%;
  border-radius: 3px;
  background: #f8f8f8;
  margin-left: 10px;
}
.msg-display-maintenance label {
  color: #373737;
}
.msg-display-maintenance #maintenance-validate {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 700;
}
.msg-display-maintenance .optin-maintenance-wrapper {
  margin-top: 15px;
}
.msg-display-maintenance .optin-maintenance-wrapper input {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
}
.msg-display-maintenance .msg-maintenance {
  margin-top: 20px;
}
.msg-display-maintenance .msg-maintenance > div {
  display: none;
}

/* Content Block

Content Block

Styleguide 10
*/
/* Content Block Title

Content Block title

<h1>Result</h1>

Markup: <div class="content-block {$modifiers}">
    <span class="title">Lorem ipsum</span>
</div>

.blog-block - Blog
.news-block - Actualités
.promo-block - Promo
.last-minute-block - Last minute
.flash-block - Flash

Styleguide 10.1
*/
.content-block {
  padding: 10px;
  width: 100%;
  max-width: 320px;
  margin-bottom: 10px;
  min-height: 305px;
  display: inline-block;
  vertical-align: top;
  max-width: 298px;
}
.content-block .title {
  display: block;
  text-transform: uppercase;
  font-size: 22px;
  color: #5a8aba;
  font-weight: 300;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 35px no-repeat;
}
.content-block div.title {
  margin: 0;
  line-height: inherit;
}
.content-block.blog-block .title {
  font-family: "Open Sans Condensed", Verdana, Arial, sans-serif;
  background-position: 0 6px;
  padding-left: 20px;
}
.content-block.news-block .title {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  background-position: 0 6px;
  padding-left: 20px;
}
.content-block.promo-block .title {
  padding-left: 30px;
  background-position: 0 -1064px;
}
.content-block.last-minute-block .title {
  padding-left: 30px;
  background-position: 0 -1171px;
}
.content-block.flash-block .title {
  padding-left: 30px;
  background-position: 0 -1256px;
}

/* Content Classic Block

Content Classic Block

<h1>Result</h1>

Markup: <!-- change classic-block max-width to get on column --> 
<div class="content-block classic-block">
      <span class="title">L'offre tout compris</span>
      <div class="content-inner">
          <div>
              <img src="../../skin/frontend/rwd/vcs/images/all-inclusive.jpg" alt=""/>
          </div>
          <div>
              <p class="dotted-border">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Suspendisse tincidunt psum <b>dolor sit amet</b>.
                  Uspendisse tincidunt psum dolor sit amet
              </p>
              <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                  Suspendisse tincidunt psum dolor sit amet.
                  Uspendisse tincidunt psum dolor sit amet
              </p>
              <a href="#" class="button arrow">Lorem ipsum</a>
          </div>
      </div>
</div>

Styleguide 10.2
*/
.classic-block {
  padding: 0;
  max-width: 650px;
  width: auto;
  display: inline-block;
  vertical-align: top;
}
.classic-block .title {
  background: none;
}
.classic-block.locations {
  float: right;
}
.classic-block p {
  font-size: 14px;
  margin-bottom: 15px;
}
.classic-block .content-inner > div {
  display: inline-block;
  vertical-align: middle;
  max-width: 320px;
}
.classic-block .content-inner > div > img {
  padding-bottom: 10px;
  max-width: 100%;
}
.classic-block .content-inner > div:last-child, .classic-block .content-inner > div.last-child {
  padding-left: 15px;
  max-width: 305px;
}
.classic-block .content-inner > div.second-offer {
  margin-top: 10px;
}
.classic-block .dotted-border {
  border-top: 1px dotted #000;
  border-bottom: 1px dotted #000;
  padding: 15px 0;
  color: #5a8aba;
}
.classic-block .arrow {
  font-size: 15px;
  line-height: 24px;
}
.classic-block .arrow:after {
  top: 9px;
}
.classic-block .arrow, .classic-block .arrow:hover {
  background: #5a8aba;
}
.classic-block:after {
  content: '';
  display: table;
  clear: both;
}

/* Content Block Wrapper

Content Block Wrapper

<h1>Result</h1>

Markup: <div class="content-block-wrapper">
</div>

Styleguide 10.3
*/
.content-block-wrapper {
  position: relative;
  border-top: 1px dotted #000;
  margin-top: 20px;
  padding-top: 35px;
  min-height: 30px;
}
.content-block-wrapper.promos-block {
  padding-top: 10px;
}
.content-block-wrapper.promos-block .content-block {
  margin: 0 10px 10px;
}
.content-block-wrapper.promos-block .content-block:first-child {
  margin-left: 10px;
}
.content-block-wrapper .content-block {
  display: inline-block;
  vertical-align: top;
  margin-left: 10px;
}
.content-block-wrapper .content-block img {
  max-width: 100%;
}
.content-block-wrapper .content-block:first-child {
  margin-left: 0;
}
.content-block-wrapper:after {
  content: '';
  display: table;
  clear: both;
}

/* Content Promo Block

Content Promo Block

<h1>Result</h1>

Markup: <!-- add link in setLocation() -->
<div class="content-block promo-block block {$modifiers} onclick="setLocation('')">
    <span class="title">Lorem Title</span>
    <div class="content-inner">
          <img src="../../skin/frontend/rwd/vcs/images/catalog-2.jpg" alt=""/>
          <div>
              <span class="reduction big">-30% de réduction</span>
              <h4> à 4 ou en famille au Reverdi</h4>
              <p>
                  Du Samedi 07 juin au Samedi 14 Juin 2014<br/>
                  Séjour en formul Tout-Compris 8J / 7 N
              </p>
          </div>
          <a href="#" class="button arrow">Lorem ipsum</a>
    </div>
</div>

.last-minute-block - Dernière minute

Styleguide 10.4
*/
.promo-block {
  min-height: 320px;
  cursor: pointer;
  padding: 0;
}
.promo-block:nth-child(2n) {
  margin-left: 20px;
}
.promo-block.first {
  margin-left: 0;
}
.promo-block .content-inner {
  min-height: 320px;
  position: relative;
}
.promo-block .content-inner > div {
  background: #fff;
  padding: 8px 0;
  margin-bottom: 40px;
}
.promo-block .content-inner .arrow {
  padding: 4px 26px 4px 8px;
  background: #f8b502;
  font-size: 14px;
  margin-bottom: 5px;
  min-width: 185px;
  text-align: left;
  position: absolute;
  bottom: 10px;
  left: 0;
}
.promo-block .content-inner .arrow:after {
  top: 9px;
}
.promo-block .content-inner .arrow:hover {
  background: rgba(0, 0, 0, 0.2);
}
.promo-block .content-inner .offer-button {
  display: block;
  width: 250px;
  margin: 10px auto 0 auto;
}
.promo-block .content-inner .see-all {
  color: #000;
  text-decoration: underline;
  font-size: 12px;
  text-align: center;
  margin-top: 8px;
  display: block;
}
.promo-block .content-inner p {
  margin-bottom: 5px;
  font-size: 14px;
}
.promo-block .content-inner p b, .promo-block .content-inner p strong {
  display: block;
  font-size: 13px;
}
.promo-block .content-inner h4 {
  display: inline-block;
  width: 75%;
  margin-left: 10px;
  color: #f8b502;
  font-size: 24px;
  line-height: 1.1;
  vertical-align: middle;
}
.promo-block .content-inner h4 b, .promo-block .content-inner h4 strong {
  display: inline;
  font-weight: 900;
}
.promo-block .content-inner .reduction {
  margin-bottom: 10px;
}
.promo-block.block .content-inner > div {
  padding: 12px 0 8px;
  position: relative;
}
.promo-block.block .content-inner > div.button {
  padding: 4px 26px 4px 8px;
}
.promo-block.block .content-inner .reduction {
  margin: 0;
  display: inline-block;
  border-radius: 0;
  width: auto;
  height: auto;
  border: 0;
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 30px;
  padding: 0 5px;
  position: absolute;
  top: -30px;
}
.promo-block.block .content-inner h4 {
  margin-left: 0;
  display: block;
  width: 100%;
}
.promo-block.block .content-inner .label {
  font-size: 16px;
  color: #f8b502;
  text-transform: uppercase;
  font-weight: 600;
}

.promo-block.summer + .promo-block.summer {
  background: url(https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/promo-summer.jpg) 0 bottom;
}

.promo-block.winter + .promo-block.winter {
  background: url(https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/promo-winter.jpg) 0 bottom;
}

.col2-right-layout .col-main .promo-block:nth-child(1n) {
  margin-left: 0;
  margin-right: 20px;
}

/* Content Promo Flash Block

Content Promo Flash Block

<h1>Result</h1>

Markup: <!-- add link in setLocation() -->
<div class="content-block promo-block {$modifiers} onclick="setLocation('')">
    <span class="title">Lorem Title</span>
    <div class="content-inner">
        <img src="../../skin/frontend/rwd/vcs/images/catalog-2.jpg" alt=""/>
        <div>
            <p><b>Profitez de - 10 % par personne sur le prix de votre séjour, à partir de 4 personnes dans le même logement.</b></p>
            <p>
                Du Samedi 07 juin au Samedi 14 Juin 2014<br/>
                Séjour en formul Tout-Compris 8J / 7 N
            </p>
        </div>
        <a href="#" class="button arrow">Lorem ipsum</a>
    </div>
</div>

.flash-block - Vente flash

Styleguide 10.4.1
*/
.promo-block.flash-block .content-inner p b,
.promo-block.flash-block .content-inner p strong {
  font-size: 14px;
  line-height: 18px;
}

/* Content Promo List Block

Content Promo List Block

<h1>Result</h1>

Markup: <!-- add link in setLocation() -->
<div class="content-block promo-block list {$modifiers} onclick="setLocation('')">
    <a href="#">
      <span class="title">Lorem ipsum</span>
      <span class="content-inner">
          <span>
              <span class="reduction big">-30% de réduction</span>
              <h4> Do you do you St-tropez ?</h4>
              <p>Sur les hauteurs du prestigieux Golfe de Saint-Tropez et niché dans un écrin de verdure...</p>
          </span>
      </span>
   </a>
</div>

.last-minute-block - Dernière minute

Styleguide 10.4.2
*/
.promo-block.list {
  min-height: 0;
  border-top: 1px dotted #f8b502;
  padding-top: 10px;
  margin-top: 0;
  margin-left: 0;
}
.promo-block.list .title {
  font-size: 18px;
  line-height: 35px;
}
.promo-block.list .content-inner {
  min-height: 0;
}
.promo-block.list .content-inner > div {
  padding-top: 0;
  margin-bottom: 0;
}
.promo-block.list .content-inner .reduction {
  margin: 0 0 7px;
  display: inline-block;
  border-radius: 0;
  width: auto;
  height: auto;
  border: 0;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 30px;
  padding: 0 5px;
  text-decoration: none;
  color: #fff;
}
.promo-block.list .content-inner h4 {
  display: block;
  width: 100%;
  margin-left: 0;
  font-size: 18px;
  margin-bottom: 0;
  line-height: 25px;
}
.promo-block.list .content-inner p {
  font-size: 13px;
  line-height: 16px;
}
.promo-block.list .content-inner a, .promo-block.list .content-inner span {
  text-decoration: underline;
  color: #f26c00;
}

/* Content Promo List Flash Block

Content Promo List Flash Block

<h1>Result</h1>

Markup: <!-- add link in setLocation() -->
<div class="content-block promo-block list {$modifiers} onclick="setLocation('')">
    <span class="title">Lorem ipsum</span>
    <div class="content-inner">
        <div class="no-reduc">
            <p><b>Profitez de - 10 % par personne sur le prix de votre séjour, à partir de 4 personnes dans le même logement.</b></p>
            <p>Sur les hauteurs du prestigieux Golfe de Saint-Tropez et niché dans un écrin de verdure...</p>
        </div>
    </div>
</div>

.flash-block - Vente flash

Styleguide 10.4.3
*/
.promo-block.list.flash-block .content-inner p b {
  font-size: 13px;
  line-height: 16px;
}
.promo-block.list .content-inner .no-reduc h4 {
  width: 100%;
  margin-left: 0;
  margin-bottom: 0;
}

/* Content reinsurance Block

Content reinsurance Block

<h1>Result</h1>

Markup: <div class="content-block reinsurance-block">
      <span class="title">Lorem Title</span>
      <!-- remove if not phone -->
      <span class="phone">
          0825 802 805
          <span>infos/réservations - 0,15€ / min.</span>
      </span>
      <!-- // -->
      <!-- remove if not catalog -->
      <img src="../../skin/frontend/rwd/vcs/images/catalog.png" alt=""/>
      <!-- // -->
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <a href="#" class="button">Lorem ipsum</a>
</div>

Styleguide 10.5
*/
.reinsurance-block {
  position: relative;
  max-width: 245px;
  min-height: 200px;
  font-size: 14px;
  padding: 0;
  line-height: 19px;
  max-width: 230px;
}
.reinsurance-block .title {
  padding-bottom: 15px;
  padding-left: 0;
  background: none;
}
.reinsurance-block .phone {
  color: #f46c00;
  font-size: 37px;
  font-weight: 300;
}
.reinsurance-block .phone span {
  color: #bdbdbd;
  font-size: 11px;
  -webkit-text-fill-color: initial;
  display: block;
  padding-bottom: 15px;
  font-weight: 700;
}
.reinsurance-block iframe {
  margin-left: -8px;
}
.reinsurance-block img {
  float: left;
  margin-right: 11px;
}
.reinsurance-block p {
  padding-bottom: 10px;
}
.reinsurance-block .button {
  position: absolute;
  bottom: 0;
  padding: 4px 8px;
  text-transform: none;
  font-size: 14px;
  left: 0;
}

/* Content reinsurance Facepile Block

Content reinsurance Facepile Block

<h1>Result</h1>

Markup: <div class="content-block reinsurance-block">
      <span class="title">Suivez-nous</span>
      <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fvillagesclubsdusoleil&amp;width=235&amp;height=175&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false&amp;appId=410890112378762" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:235px; height:258px;" allowTransparency="true"></iframe>
</div>

Styleguide 10.6
*/
/* Content Color Block

Content Color Block

<h1>Result</h1>

Markup: <!-- add link in setLocation -->
<div class="content-block content-block-color {$modifiers}" onclick="setLocation('')">
      <span class="title">Lorem ipsum</span>
      <div class="content-inner">
          <img src="../../skin/frontend/rwd/vcs/images/catalog-2.jpg" alt=""/>
          <div>
              <h4>Lorem ipsum dolor</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              Suspendisse tincidunt psum dolor sit amet...</p>
              <!-- add link if needed (for homepage) -->
              <a href="#" class="button arrow">Lorem ipsum</a>
          </div>
      </div>
</div>

.blog - Blog
.news-block - Actualité

Styleguide 10.7
*/
.content-block-color {
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}
.content-block-color .content-inner {
  position: relative;
  overflow: hidden;
  min-height: 250px;
}
.content-block-color .content-inner > div {
  padding: 10px 15px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.content-block-color h4 {
  color: #fff;
  text-transform: uppercase;
  border-top: 1px dotted #fff;
  border-bottom: 1px dotted #fff;
  font-size: 24px;
  padding: 2px 0;
  font-weight: 400;
  margin-bottom: 4px;
}
.content-block-color p {
  margin-bottom: 10px;
  font-weight: 300;
}
.content-block-color img {
  position: absolute;
  top: 0;
  left: 0;
}
.content-block-color .arrow {
  padding: 4px 26px 4px 8px;
  background: rgba(0, 0, 0, 0.2);
  font-size: 14px;
}
.content-block-color .arrow:after {
  top: 9px;
}
.content-block-color .arrow:hover {
  background: rgba(0, 0, 0, 0.2);
}
.content-block-color.blog-block .content-inner {
  min-height: 305px;
}
.content-block-color.blog-block .content-inner > div {
  background-color: #d2421f;
}
.content-block-color.news-block .content-inner {
  min-height: 315px;
  background-color: #dc5528;
}
.content-block-color.news-block .content-inner > div {
  min-height: 193px;
  padding-bottom: 43px;
  width: 100%;
}
.content-block-color.news-block .content-inner.blue {
  background-color: #5a8aba;
}
.content-block-color.news-block h4, .content-block-color.news-block .label {
  color: #fff;
  text-transform: uppercase;
  border: none;
  font-size: 24px;
  padding: 2px 0;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.1;
}
.content-block-color.news-block .arrow {
  padding-right: 70px;
  background: rgba(0, 0, 0, 0.15);
  position: absolute;
  bottom: 10px;
  left: 15px;
  font-weight: 300;
}

.cms-page-view .col-main .content-block-color.news-block {
  max-width: 329px;
  margin: 0 5px 30px 5px;
}
.cms-page-view .col-main .content-block-color.news-block img {
  width: 100%;
}
.cms-page-view .col-main .content-block-color.news-block .content-inner > div {
  padding-bottom: 35px;
}

/* Content Virtual Visit Block

Content Virtual Visit Block

<h1>Result</h1>

Markup: <div class="content-block virtual-block">
      <span class="title">Visite virtuelle</span>
      <div class="content-inner">
          <img src="../../skin/frontend/rwd/vcs/images/virtual-visit.jpg" alt=""/>
      </div>
      <div class="content-popin">
        <div class="video-responsive">
                <!-- copy paste from youtube or embed for fash for instance -->
                <iframe width="560" height="315" src="//www.youtube.com/embed/6oTAmqLWpLM" frameborder="0" allowfullscreen></iframe>
         </div>
      </div>
</div>

Styleguide 10.8
*/
.virtual-block {
  min-height: auto;
  cursor: pointer;
  float: left;
  padding: 0;
  margin-right: 25px;
  min-width: 50%;
}
.virtual-block .content-block {
  padding: 0;
}
.virtual-block .content-inner {
  position: relative;
}
.virtual-block .content-inner:after {
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -15px;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 35px solid transparent;
  border-bottom: 35px solid transparent;
  border-left: 35px solid transparent;
  border-right: none;
  border-left: 50px solid rgba(229, 50, 45, 0.8);
}
.virtual-block .content-inner img {
  margin: 0;
  width: 100%;
}
.virtual-block .content-popin {
  display: none;
}

/* CMS block

CMS block

Styleguide 19
*/
/* Partez comme vous êtes

Partez comme vous êtes

<h1>Result</h1>

Markup: <div class="like-you-want">
    <h4>Lorem ipsum</h4>
    <p>Vous voulez savoir quelles destinations vous correspondent ?</p>
    <a href="#">Découvrez-le ici</a>
</div>

Styleguide 19.1
*/
.like-you-want {
  min-height: 140px;
  border-top: 1px dotted #000000;
  border-bottom: 1px dotted #000000;
  padding: 10px 0 20px 330px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/partez-comme-vous-etes.jpg") 0 center no-repeat;
  max-width: 690px;
  font-size: 14px;
  font-weight: 600;
}
.like-you-want h1, .like-you-want h2, .like-you-want h3, .like-you-want h4, .like-you-want h5, .like-you-want h6 {
  margin-top: 10px;
  margin-bottom: 0;
  color: #f26c00;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 17px;
}
.like-you-want p {
  margin-bottom: 10px;
}
.like-you-want a {
  display: inline-block;
  padding: 7px 15px;
  border: 0;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  font-family: "Open Sans", Verdana, Arial, sans-serif;
  line-height: 19px;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  background-color: #f46c00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.like-you-want a:hover {
  background-color: #d2421f;
}

/* Telechargement

Téléchargement

<h1>Result</h1>

Markup: <div class="dw-list {$modifiers}">
    <span>Télécharger...</span>
    <a href="#" target="_blank">Nom du fichier à télécharger</a>
</div>

.dw-type-1 - The text will be : Télécharger...
.dw-type-2 - The text will be : Lire aussi..
.dw-type-3 - The text will be : Pour aller plus loin...

Styleguide 19.2
*/
.dw-list {
  border-bottom: 1px dotted #000000;
  border-top: 1px dotted #000000;
  padding: 15px 0 15px 25px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 -2180px no-repeat;
  margin-top: -1px;
}
.dw-list span {
  display: block;
  color: #a3a3a3;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 11px;
}
.dw-list span.date {
  font-weight: 400;
  display: inline-block;
  float: right;
  line-height: 14px;
  margin-right: 20px;
  margin-top: 5px;
  border-right: 1px solid #a3a3a3;
  padding-right: 8px;
}
.dw-list a {
  color: #000000;
  font-size: 15px;
}
.dw-list a.button {
  color: #fff;
  display: inline-block;
  font-size: 13px;
}
.dw-list.dw-type-2 {
  background-position: 0 -2248px;
}
.dw-list.dw-type-3 {
  background-position: 0 -2314px;
}
.dw-list.dw-type-catalog {
  background: none;
  border: none;
  display: inline-block;
  padding: 0;
  width: 45%;
  margin-bottom: 35px;
}
.dw-list.dw-type-catalog img, .dw-list.dw-type-catalog > div {
  display: inline-block;
  vertical-align: middle;
  width: 45%;
}
.dw-list.dw-type-catalog > div {
  margin-left: 2%;
}
.dw-list.dw-type-catalog > div.title {
  color: #5a8aba;
  margin: 0 0 10px;
  display: block;
  font-size: 18px;
  font-weight: 400;
  text-transform: uppercase;
  width: 100%;
}
.dw-list.dw-type-catalog .button + .button {
  margin: 0;
}
.dw-list.dw-type-catalog .button {
  min-width: 120px;
  margin-bottom: 10px;
  font-weight: bold;
}
.dw-list.dw-type-press {
  padding: 15px 0;
  background: none;
}
.dw-list.dw-type-press a.dw,
.dw-list.dw-type-press a.preview {
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 -2204px no-repeat;
  height: 20px;
  width: 20px;
  text-indent: -9999px;
  display: inline-block;
  float: right;
}
.dw-list.dw-type-press a.preview {
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 -2271px no-repeat;
  margin-right: 12px;
}
.dw-list.dw-type-press a.preview.hidden {
  visibility: hidden;
}

.cms-groupes .col-right,
.cms-partenaires .col-right,
.cms-collectivites .col-right {
  position: relative;
}
.cms-groupes .col-right .sharer-block,
.cms-partenaires .col-right .sharer-block,
.cms-collectivites .col-right .sharer-block {
  position: absolute;
  top: 50px;
  right: 0px;
}
.cms-groupes .reservation-like,
.cms-partenaires .reservation-like,
.cms-collectivites .reservation-like {
  margin-top: 100px;
}
.cms-groupes .reservation-like,
.cms-groupes #reservation-vertical,
.cms-partenaires .reservation-like,
.cms-partenaires #reservation-vertical,
.cms-collectivites .reservation-like,
.cms-collectivites #reservation-vertical {
  margin-bottom: 20px;
}
.cms-groupes .reservation-like .global-contact,
.cms-groupes #reservation-vertical .global-contact,
.cms-partenaires .reservation-like .global-contact,
.cms-partenaires #reservation-vertical .global-contact,
.cms-collectivites .reservation-like .global-contact,
.cms-collectivites #reservation-vertical .global-contact {
  text-align: center;
}
.cms-groupes .reservation-like .global-contact h3,
.cms-groupes #reservation-vertical .global-contact h3,
.cms-partenaires .reservation-like .global-contact h3,
.cms-partenaires #reservation-vertical .global-contact h3,
.cms-collectivites .reservation-like .global-contact h3,
.cms-collectivites #reservation-vertical .global-contact h3 {
  text-transform: uppercase;
  font-size: 12px;
  line-height: 20px;
  font-weight: 700;
  margin: 10px 0 15px;
}
.cms-groupes .reservation-like .global-contact h3 span,
.cms-groupes #reservation-vertical .global-contact h3 span,
.cms-partenaires .reservation-like .global-contact h3 span,
.cms-partenaires #reservation-vertical .global-contact h3 span,
.cms-collectivites .reservation-like .global-contact h3 span,
.cms-collectivites #reservation-vertical .global-contact h3 span {
  text-transform: uppercase;
  font-weight: 300;
  margin-top: 5px;
}
.cms-groupes .reservation-like .global-contact p,
.cms-groupes #reservation-vertical .global-contact p,
.cms-partenaires .reservation-like .global-contact p,
.cms-partenaires #reservation-vertical .global-contact p,
.cms-collectivites .reservation-like .global-contact p,
.cms-collectivites #reservation-vertical .global-contact p {
  color: #fff;
}
.cms-groupes .reservation-like .global-contact p.store-phone,
.cms-groupes #reservation-vertical .global-contact p.store-phone,
.cms-partenaires .reservation-like .global-contact p.store-phone,
.cms-partenaires #reservation-vertical .global-contact p.store-phone,
.cms-collectivites .reservation-like .global-contact p.store-phone,
.cms-collectivites #reservation-vertical .global-contact p.store-phone {
  font-size: 30px;
  font-weight: 300;
  line-height: 32px;
}
.cms-groupes .reservation-like .global-contact p.infos-resa,
.cms-groupes #reservation-vertical .global-contact p.infos-resa,
.cms-partenaires .reservation-like .global-contact p.infos-resa,
.cms-partenaires #reservation-vertical .global-contact p.infos-resa,
.cms-collectivites .reservation-like .global-contact p.infos-resa,
.cms-collectivites #reservation-vertical .global-contact p.infos-resa {
  color: #f26c00;
}
.cms-groupes .reservation-like .salesperson-contact,
.cms-groupes #reservation-vertical .salesperson-contact,
.cms-partenaires .reservation-like .salesperson-contact,
.cms-partenaires #reservation-vertical .salesperson-contact,
.cms-collectivites .reservation-like .salesperson-contact,
.cms-collectivites #reservation-vertical .salesperson-contact {
  border-top: 1px dotted #fff;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-top: 15px;
  color: #fff;
  text-align: center;
}
.cms-groupes .reservation-like .salesperson-contact .input-box label,
.cms-groupes #reservation-vertical .salesperson-contact .input-box label,
.cms-partenaires .reservation-like .salesperson-contact .input-box label,
.cms-partenaires #reservation-vertical .salesperson-contact .input-box label,
.cms-collectivites .reservation-like .salesperson-contact .input-box label,
.cms-collectivites #reservation-vertical .salesperson-contact .input-box label {
  text-align: left;
}
.cms-groupes .reservation-like .salesperson-contact .country label,
.cms-groupes #reservation-vertical .salesperson-contact .country label,
.cms-partenaires .reservation-like .salesperson-contact .country label,
.cms-partenaires #reservation-vertical .salesperson-contact .country label,
.cms-collectivites .reservation-like .salesperson-contact .country label,
.cms-collectivites #reservation-vertical .salesperson-contact .country label {
  display: block;
  margin-bottom: 3px;
}
.cms-groupes .reservation-like .salesperson-contact .country select,
.cms-groupes #reservation-vertical .salesperson-contact .country select,
.cms-partenaires .reservation-like .salesperson-contact .country select,
.cms-partenaires #reservation-vertical .salesperson-contact .country select,
.cms-collectivites .reservation-like .salesperson-contact .country select,
.cms-collectivites #reservation-vertical .salesperson-contact .country select {
  width: 100%;
  border: 0;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  height: 28px;
}
.cms-groupes .reservation-like .salesperson-contact .region,
.cms-groupes #reservation-vertical .salesperson-contact .region,
.cms-partenaires .reservation-like .salesperson-contact .region,
.cms-partenaires #reservation-vertical .salesperson-contact .region,
.cms-collectivites .reservation-like .salesperson-contact .region,
.cms-collectivites #reservation-vertical .salesperson-contact .region {
  text-align: left;
  margin-top: 15px;
}
.cms-groupes .reservation-like .salesperson-contact .region label,
.cms-groupes #reservation-vertical .salesperson-contact .region label,
.cms-partenaires .reservation-like .salesperson-contact .region label,
.cms-partenaires #reservation-vertical .salesperson-contact .region label,
.cms-collectivites .reservation-like .salesperson-contact .region label,
.cms-collectivites #reservation-vertical .salesperson-contact .region label {
  line-height: 28px;
  width: 48%;
}
.cms-groupes .reservation-like .salesperson-contact .region .input-box,
.cms-groupes #reservation-vertical .salesperson-contact .region .input-box,
.cms-partenaires .reservation-like .salesperson-contact .region .input-box,
.cms-partenaires #reservation-vertical .salesperson-contact .region .input-box,
.cms-collectivites .reservation-like .salesperson-contact .region .input-box,
.cms-collectivites #reservation-vertical .salesperson-contact .region .input-box {
  text-align: left;
  display: inline-block;
  vertical-align: top;
  width: 50%;
  float: right;
}
.cms-groupes .reservation-like .salesperson-contact .region .input-box select,
.cms-groupes #reservation-vertical .salesperson-contact .region .input-box select,
.cms-partenaires .reservation-like .salesperson-contact .region .input-box select,
.cms-partenaires #reservation-vertical .salesperson-contact .region .input-box select,
.cms-collectivites .reservation-like .salesperson-contact .region .input-box select,
.cms-collectivites #reservation-vertical .salesperson-contact .region .input-box select {
  border: 0;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  height: 28px;
  width: 100%;
}
.cms-groupes .reservation-like .salesperson-contact .results,
.cms-groupes #reservation-vertical .salesperson-contact .results,
.cms-partenaires .reservation-like .salesperson-contact .results,
.cms-partenaires #reservation-vertical .salesperson-contact .results,
.cms-collectivites .reservation-like .salesperson-contact .results,
.cms-collectivites #reservation-vertical .salesperson-contact .results {
  background: #fff;
  text-align: left;
  margin-top: 18px;
  color: #1b1f20;
  width: 100%;
  padding: 20px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.cms-groupes .reservation-like .salesperson-contact .results p,
.cms-groupes #reservation-vertical .salesperson-contact .results p,
.cms-partenaires .reservation-like .salesperson-contact .results p,
.cms-partenaires #reservation-vertical .salesperson-contact .results p,
.cms-collectivites .reservation-like .salesperson-contact .results p,
.cms-collectivites #reservation-vertical .salesperson-contact .results p {
  font-weight: 300;
}
.cms-groupes .reservation-like .salesperson-contact .results .business-card,
.cms-groupes #reservation-vertical .salesperson-contact .results .business-card,
.cms-partenaires .reservation-like .salesperson-contact .results .business-card,
.cms-partenaires #reservation-vertical .salesperson-contact .results .business-card,
.cms-collectivites .reservation-like .salesperson-contact .results .business-card,
.cms-collectivites #reservation-vertical .salesperson-contact .results .business-card {
  font-weight: 400;
}
.cms-groupes .reservation-like .salesperson-contact .results .business-card p,
.cms-groupes #reservation-vertical .salesperson-contact .results .business-card p,
.cms-partenaires .reservation-like .salesperson-contact .results .business-card p,
.cms-partenaires #reservation-vertical .salesperson-contact .results .business-card p,
.cms-collectivites .reservation-like .salesperson-contact .results .business-card p,
.cms-collectivites #reservation-vertical .salesperson-contact .results .business-card p {
  font-weight: 400;
}
.cms-groupes .reservation-like .salesperson-contact .results .business-card a,
.cms-groupes #reservation-vertical .salesperson-contact .results .business-card a,
.cms-partenaires .reservation-like .salesperson-contact .results .business-card a,
.cms-partenaires #reservation-vertical .salesperson-contact .results .business-card a,
.cms-collectivites .reservation-like .salesperson-contact .results .business-card a,
.cms-collectivites #reservation-vertical .salesperson-contact .results .business-card a {
  text-decoration: underline;
}
.cms-groupes .reservation-like .salesperson-contact .no-result,
.cms-groupes #reservation-vertical .salesperson-contact .no-result,
.cms-partenaires .reservation-like .salesperson-contact .no-result,
.cms-partenaires #reservation-vertical .salesperson-contact .no-result,
.cms-collectivites .reservation-like .salesperson-contact .no-result,
.cms-collectivites #reservation-vertical .salesperson-contact .no-result {
  background: #fff;
  text-align: left;
  margin-top: 18px;
  color: #1b1f20;
  width: 100%;
  padding: 20px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
.cms-groupes .reservation-like .salesperson-contact .no-result p,
.cms-groupes #reservation-vertical .salesperson-contact .no-result p,
.cms-partenaires .reservation-like .salesperson-contact .no-result p,
.cms-partenaires #reservation-vertical .salesperson-contact .no-result p,
.cms-collectivites .reservation-like .salesperson-contact .no-result p,
.cms-collectivites #reservation-vertical .salesperson-contact .no-result p {
  text-align: left;
}
.cms-groupes #reservation-vertical,
.cms-partenaires #reservation-vertical,
.cms-collectivites #reservation-vertical {
  margin-top: 50px !important;
}

.seminar-like {
  margin-bottom: 30px;
  margin-top: 100px;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.7);
  max-width: 1060px;
  width: 100%;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.seminar-like .seminar-number {
  text-align: center;
}
.seminar-like .seminar-number h3 {
  text-transform: uppercase;
  font-size: 12px;
  line-height: 20px;
  font-weight: 700;
  margin: 10px 0 15px;
}
.seminar-like .seminar-number h3 span {
  text-transform: uppercase;
  font-weight: 300;
  margin-top: 5px;
}
.seminar-like .seminar-number p {
  color: #fff;
}
.seminar-like .seminar-number p.store-phone {
  font-size: 30px;
  font-weight: 300;
  line-height: 32px;
  color: #f46c00;
}
.seminar-like .seminar-email, .seminar-like .seminar-form {
  border-top: 1px dotted #fff;
  margin-top: 15px;
  margin-bottom: 15px;
  padding-top: 15px;
  color: #fff;
  text-align: center;
}
.seminar-like .seminar-email p, .seminar-like .seminar-form p {
  color: #fff;
}
.seminar-like .seminar-email p.store-email, .seminar-like .seminar-form p.store-email {
  font-size: 15px;
  font-weight: 300;
  line-height: 32px;
}
.seminar-like .seminar-email p.store-email a, .seminar-like .seminar-form p.store-email a {
  color: #f46c00;
}
.seminar-like .seminar-email p a, .seminar-like .seminar-form p a {
  color: #f46c00;
}
.seminar-like .seminar-form .store-form a {
  background: #f46c00;
  padding: 5px 10px;
  border-radius: 5px;
  text-transform: uppercase;
  color: #fff;
  font-size: 18px;
  margin-top: 10px;
  display: inline-block;
}

.seminaires-map {
  width: 100%;
}
.seminaires-map .content-seminaires-map {
  text-align: center;
  position: relative;
}
.seminaires-map .content-seminaires-map img {
  display: inline-block;
  margin-left: -70px;
}
.seminaires-map .content-seminaires-map ul {
  position: absolute;
  top: 0;
  left: 50%;
  text-align: left;
  display: inline-block;
  transform: translateX(-50%);
  list-style: none;
  padding: 0;
  margin: 0 0 0 -35px;
  width: 100%;
  max-width: 387px;
  height: 100%;
}
.seminaires-map .content-seminaires-map ul img {
  margin-left: 0;
}
.seminaires-map .content-seminaires-map li {
  margin: 0 !important;
  padding: 0 !important;
  color: #fff;
  display: inline-block;
  position: absolute !important;
}
.seminaires-map .content-seminaires-map li:before {
  content: '';
  background: #f26c00 !important;
  border-radius: 100% !important;
  width: 10px !important;
  height: 10px !important;
  display: block;
  position: absolute !important;
  top: auto !important;
  left: auto !important;
  bottom: -14px;
}
.seminaires-map .content-seminaires-map li a {
  color: #fff;
  display: block;
  position: relative;
}
.seminaires-map .content-seminaires-map li a:before {
  bottom: -7px;
}
.seminaires-map .content-seminaires-map li .preview,
.seminaires-map .content-seminaires-map li .city {
  display: inline-block;
  vertical-align: middle;
}
.seminaires-map .content-seminaires-map li .preview {
  font-size: 0;
  line-height: 1;
}
.seminaires-map .content-seminaires-map li .city {
  background: #5a8aba;
  height: 40px;
  padding: 5px 10px 4px;
}
.seminaires-map .content-seminaires-map li .city-name,
.seminaires-map .content-seminaires-map li .region {
  display: block;
  text-transform: uppercase;
  line-height: 1.4;
}
.seminaires-map .content-seminaires-map li .city-name {
  font-size: 11px;
  font-weight: 600;
}
.seminaires-map .content-seminaires-map li .region {
  font-size: 9px;
}
.seminaires-map .content-seminaires-map .la-baule {
  left: -12%;
  top: 30%;
}
.seminaires-map .content-seminaires-map .la-baule:before {
  right: 20px;
}
.seminaires-map .content-seminaires-map .la-baule a:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 5px solid #5a8aba;
  border-bottom: none;
  border-top-width: 7px;
  right: 20px;
}
.seminaires-map .content-seminaires-map .arc-1800 {
  right: -4%;
  top: 48%;
}
.seminaires-map .content-seminaires-map .arc-1800:before {
  right: 50px;
}
.seminaires-map .content-seminaires-map .arc-1800 a:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 5px solid #5a8aba;
  border-bottom: none;
  border-top-width: 7px;
  right: 50px;
}
.seminaires-map .content-seminaires-map .orcieres {
  right: 11.7%;
  top: 61%;
}
.seminaires-map .content-seminaires-map .orcieres:before {
  right: 5px;
}
.seminaires-map .content-seminaires-map .orcieres a:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 5px solid #5a8aba;
  border-bottom: none;
  border-top-width: 7px;
  right: 6px;
}
.seminaires-map .content-seminaires-map .le-reverdi {
  right: -30%;
  top: 73%;
}
.seminaires-map .content-seminaires-map .le-reverdi:before {
  left: 1px !important;
}
.seminaires-map .content-seminaires-map .le-reverdi a:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 5px solid #5a8aba;
  border-bottom: none;
  border-top-width: 7px;
  left: 0;
}
.seminaires-map .content-seminaires-map .val-louron {
  left: 11%;
  top: 79%;
}
.seminaires-map .content-seminaires-map .val-louron:before {
  right: 20px;
}
.seminaires-map .content-seminaires-map .val-louron a:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 5px solid #5a8aba;
  border-bottom: none;
  border-top-width: 7px;
  right: 21px;
}
.seminaires-map .content-seminaires-map .marseille {
  right: -1%;
  top: 88%;
}
.seminaires-map .content-seminaires-map .marseille:before {
  right: 81px;
  bottom: auto;
  top: -14px !important;
}
.seminaires-map .content-seminaires-map .marseille a:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-bottom: 5px solid #5a8aba;
  border-top: none;
  border-bottom-width: 7px;
  right: 82px;
  top: -7px;
}
@media (max-width: 630px) {
  .seminaires-map {
    transform: scale(0.8);
  }
}
@media (max-width: 520px) {
  .seminaires-map .content-seminaires-map li .preview {
    display: none;
  }
  .seminaires-map .content-seminaires-map .la-baule {
    left: -1%;
  }
  .seminaires-map .content-seminaires-map .le-reverdi {
    right: -20%;
  }
  .seminaires-map .content-seminaires-map .val-louron {
    left: 21%;
  }
}
@media (max-width: 400px) {
  .seminaires-map .content-seminaires-map li .city {
    height: 35px;
    padding: 3px 5px 2px;
  }
  .seminaires-map .content-seminaires-map .la-baule {
    left: 1%;
  }
  .seminaires-map .content-seminaires-map .arc-1800 {
    right: -5%;
  }
  .seminaires-map .content-seminaires-map .le-reverdi {
    right: -20%;
  }
  .seminaires-map .content-seminaires-map .marseille {
    right: -2%;
  }
  .seminaires-map .content-seminaires-map .val-louron {
    left: 23%;
  }
}
@media (max-width: 320px) {
  .seminaires-map .content-seminaires-map .la-baule {
    left: 0%;
    top: 28%;
  }
  .seminaires-map .content-seminaires-map .la-baule:before {
    right: 28px;
  }
  .seminaires-map .content-seminaires-map .la-baule a:before {
    right: 27px;
  }
  .seminaires-map .content-seminaires-map .arc-1800 {
    right: -8%;
    top: 45%;
  }
  .seminaires-map .content-seminaires-map .arc-1800:before {
    right: 48px;
  }
  .seminaires-map .content-seminaires-map .arc-1800 a:before {
    right: 47px;
  }
  .seminaires-map .content-seminaires-map .le-reverdi {
    right: -24%;
    top: 70%;
  }
  .seminaires-map .content-seminaires-map .le-reverdi:before {
    left: 5px !important;
  }
  .seminaires-map .content-seminaires-map .le-reverdi a:before {
    left: 5px;
  }
  .seminaires-map .content-seminaires-map .orcieres {
    right: 12%;
    top: 59%;
  }
  .seminaires-map .content-seminaires-map .marseille {
    right: -8%;
  }
  .seminaires-map .content-seminaires-map .val-louron {
    left: 20%;
    top: 76%;
  }
}

.container_brochurescms {
  border-radius: 5px;
  background: #e8e8e8;
  padding: 15px;
  margin-bottom: 30px;
}
.container_brochurescms .title-brochures {
  font-size: 24px;
  color: #f46c00;
  padding-bottom: 10px;
  text-align: center;
  text-transform: uppercase;
}
.container_brochurescms > p {
  margin-bottom: 15px;
}
.container_brochurescms .dw-list.dw-type-catalog {
  width: 49%;
  text-align: center;
  margin-bottom: 15px;
}
.container_brochurescms .dw-list.dw-type-catalog > div {
  display: block;
  width: 100%;
  margin-left: 0;
  margin-top: 5px;
}
.container_brochurescms .dw-list.dw-type-catalog > div.title {
  font-size: 14px;
  color: #373737;
  margin-top: 0;
  margin-bottom: 5px;
  line-height: 1.2;
  font-weight: 700;
}
.container_brochurescms .dw-list.dw-type-catalog > img {
  width: 60%;
}
.container_brochurescms .dw-list.dw-type-catalog .button {
  min-width: 100px;
  font-size: 12px;
  padding: 5px;
  font-weight: 600;
  margin-bottom: 0;
}
.container_brochurescms .dw-list.dw-type-catalog .cat-column {
  display: inline-block;
  text-align: center;
  position: relative;
  width: 60%;
}
.container_brochurescms .dw-list.dw-type-catalog .cat-column img {
  width: 100%;
}
.container_brochurescms .dw-list.dw-type-catalog .cat-column:before {
  content: '';
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  transition: all .4s;
}
.container_brochurescms .dw-list.dw-type-catalog .cat-column span {
  opacity: 0;
  display: inline-block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  transition: all .6s;
  color: #fff;
}
.container_brochurescms .dw-list.dw-type-catalog .cat-column:hover:before {
  width: 100%;
  height: 100%;
}
.container_brochurescms .dw-list.dw-type-catalog .cat-column:hover span {
  opacity: 1;
}

/* Villages Map

Villages Map

Styleguide 11
*/
/* Thematic menu links

Thematic menu links
<h1>Result</h1>

Markup: <div class="villages">
    <div class="thematic-menu">
        <ul class="theme">
            <li>
                Séjour à la campagne
                <ul class="arrow">
                    <li><a href="#">Les Ménuires</a></li>
                    <li><a href="#">Flaine</a></li>
                    <li><a href="#">Alpe d'huez - Oz en Oisans</a></li>
                    <li><a href="#">Vars</a></li>
                </ul>
            </li>
            <li>
                Séjour à la mer
                <ul class="arrow">
                    <li><a href="#">Montgenèvre</a></li>
                    <li><a href="#">Orcières 1850</a></li>
                    <li><a href="#">Superbagnères</a></li>
                    <li><a href="#">Arc 1800</a></li>
                    <li><a href="#">Valmorel</a></li>
                    <li><a href="#">Le reverdi</a></li>
                    <li><a href="#">Montgenèvre</a></li>
                    <li><a href="#">Orcières 1850</a></li>
                    <li><a href="#">Alpe d'huez - Oz en Oisans</a></li>
                    <li><a href="#">Arc 1800</a></li>
                    <li><a href="#">Valmorel</a></li>
                    <li><a href="#">Le reverdi</a></li>
                    <li><a href="#">Montgenèvre</a></li>
                    <li><a href="#">Orcières 1850</a></li>
                </ul>
            </li>
            <li>
                Séjour montagne
                <ul class="arrow">
                    <li><a href="#">Montgenèvre</a></li>
                    <li><a href="#">Orcières 1850</a></li>
                    <li><a href="#">Superbagnères</a></li>
                    <li><a href="#">Arc 1800</a></li>
                    <li><a href="#">Le reverdi</a></li>
                    <li><a href="#">Montgenèvre</a></li>
                    <li><a href="#">Orcières 1850</a></li>
                    <li><a href="#">Superbagnères</a></li>
                    <li><a href="#">Arc 1800</a></li>
                    <li><a href="#">Valmorel</a></li>
                    <li><a href="#">Le reverdi</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

Styleguide 11.1
*/
.thematic-menu {
  clear: both;
}
.thematic-menu .theme li {
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
  margin-right: 20px;
}
.thematic-menu .theme .arrow {
  margin-top: 10px;
}
.thematic-menu .theme .arrow li, .thematic-menu .theme .arrow > div {
  display: block;
  color: #373737;
  font-size: 13px;
  font-weight: 600;
  margin: 8px 0;
  padding-left: 10px;
  position: relative;
}
.thematic-menu .theme .arrow li:before, .thematic-menu .theme .arrow > div:before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 3px solid #f46c00;
  border-right: none;
  border-left: 6px solid #f46c00;
}
.thematic-menu .theme .arrow li a, .thematic-menu .theme .arrow > div a {
  color: #373737;
}
.thematic-menu .theme .arrow li a:hover, .thematic-menu .theme .arrow li a.active, .thematic-menu .theme .arrow > div a:hover, .thematic-menu .theme .arrow > div a.active {
  color: #f46c00;
}

/* Village infos block

Village infos block
<h1>Result</h1>

Markup: <div class="villages">
    <div class="village infos-block content-block">
        <div class="region">Savoie</div>
        <div class="title">Les arc 1800</div>
        <div class="custom-radio season">
            <div class="radio summer">
                <input type="radio" name="season" class="season-summer" value="Saison été" checked="checked" />
                <label for="season">Saison été</label>
            </div>
            <div class="radio winter">
                <input type="radio" name="season" class="season-winter" value="Saison hiver" />
                <label for="season">Saison hiver</label>
            </div>
        </div>
        <div class="infos summer">
            <img src="../../skin/frontend/rwd/vcs/images/catalog-2.jpg" />
            <p>Au cœur de l’immensité des “3 vallées”, le plus vaste domaine skiable du monde, votre village Club des Menuires idéalement situé sur les pistes, vous attend pour un séjour mémorable ! À vous tous les bonheurs du grand ski (600 km de pistes), la terrasse ensoleillée dominant la vallée et les soirées animées à partager, ...</p>
            <a href="#" class="button arrow">En savoir +</a>
        </div>
        <div class="infos winter">
            <img src="../../skin/frontend/rwd/vcs/images/catalog-3.jpg" />
            <p>Au cœur de l’immensité des “3 vallées”, le plus vaste domaine skiable du monde, votre village Club des Menuires idéalement situé sur les pistes, vous attend pour un séjour mémorable...</p>
            <a href="#" class="button arrow">En savoir +</a>
        </div>
    </div>
</div>

Styleguide 11.2
*/
.village.infos-block .region {
  background: #5a8aba;
  display: inline-block;
  padding: 0 5px;
  color: #fff;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
}
.village.infos-block .title {
  font-size: 29px;
  color: #f46c00;
  font-weight: 600;
  background: none;
}
.village.infos-block .season {
  margin-bottom: 10px;
}
.village.infos-block img {
  margin-bottom: 10px;
  max-width: 100%;
  width: 100%;
}
.village.infos-block .category-village-description,
.village.infos-block p {
  font-size: 14px;
  margin-bottom: 10px;
}
.village.infos-block .button {
  background: #5a8aba;
  font-size: 14px;
  padding: 5px 50px 5px 10px;
}
.village.infos-block .button:after {
  top: 10px;
}
.village.infos-block .button:active, .village.infos-block .button:focus, .village.infos-block .button:hover {
  background: #f26c00;
}

/* Villages Map block

Villages Map block
<h1>Result</h1>

Markup: <div class="villages">
    <div class="map-block content-block">
        <img src="../../skin/frontend/rwd/vcs/images/villages-map.png" alt="Carte des villages"/>
        <ul class="content-inner">
            <li class="flaine">
                <span class="picto"></span>
                <a href="#"><span>Haute Savoie</span> Flaine</a>
            </li>
            <li class="morzine">
                <span class="picto"></span>
                <a href="#"><span>Haute Savoie</span> Morzine</a>
            </li>
            <li class="alpe-dhuez">
                <span class="picto"></span>
                <a href="#"><span>Isère</span> Alpe d'Huez - Oz en Oisans</a>
            </li>
            <li class="orcieres">
                <span class="picto"></span>
                <a href="#"><span>Hautes Alpes</span> Orcières 1850</a>
            </li>
            <li class="montgenevre">
                <span class="picto"></span>
                <a href="#"><span>Hautes Alpes</span> Montgenèvre</a>
            </li>
            <li class="vars">
                <span class="picto"></span>
                <a href="#"><span>Hautes Alpes</span> Vars</a>
            </li>
            <li class="arc-1800">
                <span class="picto"></span>
                <a href="#"><span>Savoie</span> Arc 1800</a>
            </li>
            <li class="valmorel-la-belle">
                <span class="picto"></span>
                <a href="#"><span>Savoie</span> Valmorel la Belle</a>
            </li>
            <li class="les-menuires">
                <span class="picto"></span>
                <a href="#"><span>Savoie</span> Les Ménuires</a>
            </li>
            <li class="superbagneres">
                <span class="picto"></span>
                <a href="#"><span>Pyrénées</span> Superbagnères</a>
            </li>
            <li class="le-reverdi">
                <span class="picto"></span>
                <a href="#"><span>Golfe de St Tropez</span> Le Reverdi</a>
            </li>
            <li class="bois-damont">
                <span class="picto"></span>
                <a href="#"><span>Haut Jura</span> Bois d'Amont</a>
            </li>
            <li class="la-baule">
                <span class="picto"></span>
                <a href="#"><span>Côte Atlantique</span> La Baule</a>
            </li>
        </ul>
    </div>
</div>

Styleguide 11.3
*/
.map-block {
  position: relative;
  overflow: hidden;
  max-width: 320px;
}
.map-block li {
  position: absolute;
  height: 45px;
}
.map-block li .picto {
  background: #5a8aba;
  height: 10px;
  width: 10px;
  display: block;
  vertical-align: top;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.map-block li a {
  display: none;
  background: #f46c00;
  color: #FFF;
  padding: 5px 40px 5px 10px;
  z-index: 1;
  position: relative;
  top: -60px;
  white-space: nowrap;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  right: 80%;
  min-height: 45px;
}
.map-block li a:after {
  content: '';
  width: 12px;
  height: 10px;
  position: absolute;
  top: 50%;
  right: 10px;
  margin-top: -5px;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #fff;
  border-right: none;
  border-left: 10px solid #fff;
}
.map-block li a span {
  display: block;
  font-weight: 300;
  font-size: 11px;
}
.map-block li.left a {
  right: 10%;
}
.map-block li.active .picto {
  background: #f46c00;
}
.map-block li.active .picto:before {
  content: '';
  width: 12px;
  height: 10px;
  position: absolute;
  top: -7px;
  right: 0;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 5px solid #f46c00;
  border-bottom: none;
  border-top: 10px solid #f46c00;
}
.map-block li.active a {
  display: inline-block;
  z-index: 3;
}
.map-block li.flaine {
  top: 170px;
  left: 273px;
}
.map-block li.morzine {
  top: 180px;
  left: 260px;
}
.map-block li.alpe-dhuez {
  top: 205px;
  left: 250px;
}
.map-block li.orcieres {
  top: 225px;
  left: 260px;
}
.map-block li.montgenevre {
  top: 215px;
  left: 268px;
}
.map-block li.vars {
  top: 230px;
  left: 275px;
}
.map-block li.arc-1800 {
  top: 190px;
  left: 270px;
}
.map-block li.valmorel-la-belle {
  top: 195px;
  left: 258px;
}
.map-block li.les-menuires {
  top: 205px;
  left: 262px;
}
.map-block li.superbagneres {
  top: 290px;
  left: 120px;
}
.map-block li.le-reverdi {
  top: 265px;
  left: 265px;
}
.map-block li.bois-damont {
  top: 160px;
  left: 255px;
}
.map-block li.la-baule {
  top: 130px;
  left: 60px;
}

.villages-map h1 {
  font-size: 45px;
  color: #f26c00;
  margin-bottom: 0;
  line-height: 46px;
  font-weight: 600;
  padding-bottom: 3px;
}
.villages-map h2 {
  font-size: 28px;
  font-weight: 300;
  color: #f26c00;
  border-bottom: 0;
  line-height: 30px;
  padding-bottom: 0;
  margin-bottom: 15px;
}
.villages-map .category-description {
  font-size: 15px;
  margin-bottom: 15px;
}
.villages-map .map-block {
  padding: 0;
  margin-top: 20px;
  margin-bottom: 40px;
  max-width: 100%;
}
.villages-map.left {
  width: 55%;
  float: left;
}
.villages-map .right {
  display: none;
  float: right;
  width: 45%;
  margin-top: 20px;
}
.villages-map .right .certif {
  display: inline-block;
  margin-left: 8px;
}
.villages-map .right .certif .tooltip {
  display: inline-block;
  vertical-align: text-bottom;
}
.villages-map .right .certif .tooltip.certification > div {
  text-transform: none;
  bottom: 40px;
  left: -122px;
}
.villages-map .right .certif img {
  width: auto;
}

.villages-map.left {
  width: 60%;
}
.villages-map .right {
  width: 40%;
}

/* Village

Village

Styleguide 12
*/
.village-block {
  display: block;
  overflow: hidden;
}
.village-block.large {
  max-width: 690px;
}
.village-block.small {
  max-width: 320px;
}
.village-block.dotted {
  margin-bottom: 15px;
  border-bottom: 1px dotted #000;
}

/* Village Title Block

Village Title Block
<h1>Result</h1>

Markup: <div class="village-block {$modifiers}">
    <span class="title">Les services</span>
</div>

.large - Large block
.small - Small block
.dotted - Dotted block

Styleguide 12.1
*/
.village-block h3, .village-block .title {
  color: #5a8aba;
  text-transform: uppercase;
  display: block;
  font-weight: 300;
}
.village-block.large h3, .village-block.large .title {
  font-size: 20px;
  margin-bottom: 10px;
}
.village-block.small h3, .village-block.small .title {
  font-size: 22px;
  line-height: 24px;
  margin-bottom: 5px;
}

/* Village Tags Block

Village Tags Block
<h1>Result</h1>

Markup: <div class="village-block large tags">
    <span class="title">Les services</span>
    <div class="content-inner">
        <ul>
            <li>Bar</li>
            <li>terrasse solarium</li>
            <li>internet wifi gratuit au bar et à la réception</li>
            <li>Accès handicapés</li>
            <li>Parking couvert payant (60€/sem en pré réservation ou sur place)</li>
            <li>Parking découvert gratuit à proximité</li>
        </ul>
    </div>
    <a href="#" class="link">Voir tous les services</a>
</div>

Styleguide 12.2
*/
.village-block.tags .content-inner {
  font-size: 14px;
}
.village-block.tags .content-inner ul li {
  display: inline;
  vertical-align: top;
  margin-bottom: 3px;
  padding: 0 4px 0 14px;
  position: relative;
  margin-left: 0;
}
.village-block.tags .content-inner ul li:before {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  content: '';
  background: black;
  width: 4px;
  height: 4px;
  position: absolute;
  top: 7px;
  left: 0;
}
.village-block.tags .content-inner ul li:first-child {
  margin-left: 0;
  padding-left: 0;
}
.village-block.tags .content-inner ul li:first-child:before {
  content: '';
  background: none;
}
.village-block.tags a {
  font-size: 14px;
  display: inline-block;
  vertical-align: top;
  text-decoration: underline;
}
.village-block.tags a.blue {
  color: #5a8aba;
}

/* All Include Block

All Include Block
<h1>Result</h1>

Markup: <div class="village-block large all-include">
    <span class="title">La formule "Tout compris" comprend...</span>
    <div class="content-inner">
        <h3>Chambres</h3>
        <p>Chambres à disposition du jour d'arrivée 17h au jour de départ 10h.<br>Avec baignoire ou douche, wc, télévision à écran plat avec 80 chaînes françaises et étarngères, téléphone.<br>Linge de toilette et lits faits à l'arrivée<br>Ménage et lits faits une fois par semaine
        </p>
        <h3>La table</h3>
        <p>Pension complète&nbsp;du jour d’arrivée dîner inclus au jour de départ petit-déjeuner inclus (vin aux repas compris)
        </p>
        <h3>Restauration en buffet à volonté</h3>
        <p>Le Village Club met à votre disposition un espace restaurant&nbsp;familles et un Restopuce™&nbsp;pour les&nbsp;enfants.<br>Chaque matin, buffet "pique-nique" afin de préparer un panier repas (selon effectif). Les sandwichs le jour de départ ne sont pas compris dans la prestation.
        </p>
        <h3>Clubs enfants - 6 ans</h3>
        <p>Ouverts du 05 juillet au 30 août 2014, 6J/7&nbsp;(fermés le samedi)&nbsp;
        </p>
        <p>. Clubs des Câlins : nurserie pour les bébés de 3 mois à - 3 ans <br>. Club des Malins : pour les enfants de 3 ans à - 6 ans
        </p>
        <h3>Clubs enfants + 6 ans</h3>
        <p>Ouverts du 05 juillet au 30 août 2014, 6J/7&nbsp;(fermés le samedi).
        </p>
        <p>. Club des Copains : pour les enfants de 6 ans à - 11 ans<br>. Club Jeunes : point de rencontre pour les pré-ados et les ados de 11 ans à 17 ans
        </p>
        <h3>Ecole Française de la Montagne™</h3>
        <p>Accès au téléphérique (du 05 juillet au 24 août 2014 - sous réserve) pour rejoindre les Grandes Platières&nbsp;et accès aux remontées mécaniques des Carroz et de Samoëns (sous réserve).
        </p>
        <p><strong>Espace Montagne</strong>
        </p>
        <p>. Conseils et fiches topos<br>. Cartes et guides en consultation<br>. Prêt de matériel : chaussures de montagne du 36 au 46, sac à dos, bâtons, gourdes, porte-bébé.
        </p>
        <p><strong>Randonnées</strong>
        </p>
        <p>. Randonnées moyenne montagne réservées aux adultes, à la journée ou à la demi-journée avec accompagnateurs.<br>. Randonnées famille avec enfants à partir de 8 ans (sorties encadrées avec distances et dénivelés appropriés), à la journée ou à la demi- journée avec accompagnateurs.<br>. Sorties "nature" faune &amp; flore avec nos accompagnateurs.<br>. Sorties marche nordique avec nos accompagnateurs.<br>. Sentier géologique des Grands Platières : sentier éducatif pour les familles et les enfants.<br>. Soirée thématique Montagne<br><em>Pré-acheminement éventuel en voiture personnelle.</em>
        </p>
        <p><strong>VTT</strong>
        </p>
        <p>. Activité réservée aux adultes, aux jeunes de +16 ans et aux enfants à partir de 11 ans dans le cadre des activités de leur club<br>. Sorties tous niveaux avec accompagnateurs et prêt de matériel (VTT, casque et protection).<br>. Parcours d’initiation pour découvrir l’activité VTT.<br>Local vélo fermé la nuit pour matériel personnel. Cadenas non fourni.<br><em>Prêt de vélos et de casques uniquement dans le cadre des sorties accompagnées.<br>Pré-acheminement éventuel en voiture personnelle.</em>
        </p>
        <h3>Autres activités</h3>
        <p>Sur le village&nbsp;: Salle cardio-training
        </p>
        <p>Sur la station : piscine couverte en accès payant (incluant l'accès à l'espace forme / spa de la piscine), tennis, beach-volley, terrain de pétanque, beach-soccer, ping-pong, volley, big air bag à partir de 8 ans, châteaux gonflables pour les enfants de 3 à 12 ans, basket, badminton, initiation au tir à l'arc, mini golf, mur d'escalade intérieur et extérieur.
        </p>
        <p>Prêt de matériel pour toutes les activités (matériel non fourni pour l'escalade).
        </p>
        <h3>Activités* proposées par nos partenaires</h3>
        <p>Golf, tennis, activités eaux-vives.
        </p>
        <p><em>Pré-acheminement éventuel en voiture personnelle.</em>
        </p>
        <h3>Espace "Détente et Bien-Etre" sur le Village Club</h3>
        <p>Espace Détente et Bien-être réservé aux adultes et aux enfants de +16 ans accompagnés d'un adulte) avec sauna, hammam, bains à remous, salle de repos &amp; tisanerie.<br>Inscription obligatoire pour les massages* esthétiques ou de confort.<br>Fermé le samedi et le dimanche.
        </p>
        <h3>Découvertes touristiques</h3>
        <p>Programme de visites et de découvertes du pays d'accueil avec accompagnateur (<em>avec ou sans supplément selon les sorties</em> - <em>Pré-acheminement éventuel en voiture personnelle</em>).<br>Ex: Chamonix, la mer de glace, Annecy, sa vieille ville et son lac...<br><em>Sous réserve d'un nombre minimum de participants</em>
        </p>
        <h3>Animations intérieures</h3>
        <p>Jeux, soirée à thème, soirée dansante, cabaret, spectacle...
        </p>
        <h3>A votre disposition</h3>
        <p>Bar*, terrasse-solarium,&nbsp;Informations Touristiques, machines* à laver et à sécher, fers et tables à repasser, prêt de sèche-cheveux, coffre à la réception, accès internet wifi gratuit au bar et à l'accueil, prêt de jeux de société, de cartes et de livres. Baignoire bébé sur demande, lit bébé à réserver et sur demande aux clubs enfants : poussette- canne de dépannage.&nbsp;<br><br>Parking gratuit&nbsp;découvert à proximité&nbsp;du club. <br>Parking gratuit handicapés face au Village Club.
        </p>
        <p>*payant</p>
    </div>
</div>

Styleguide 12.3
*/
.village-block.all-include {
  margin-bottom: 10px;
  padding-bottom: 0;
  border: none;
}
.village-block.all-include p {
  font-size: 12px;
  margin-bottom: 5px;
}
.village-block.all-include .title {
  font-weight: 600;
  font-size: 18px;
  background: #f26c00;
  cursor: pointer;
  color: #fff;
  padding: 15px 25px 15px 35px;
  position: relative;
  margin-bottom: 10px;
}
.village-block.all-include .title:before {
  content: '';
  width: 17px;
  height: 30px;
  position: absolute;
  top: 50%;
  margin-top: -5px;
  left: 13px;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #fff;
  border-right: none;
  border-left: 10px solid #fff;
}
.village-block.all-include .title span {
  position: absolute;
  font-size: 13px;
  text-decoration: underline;
  right: 13px;
  font-weight: normal;
  text-transform: none;
  top: 19px;
}
.village-block.all-include .content-inner {
  display: none;
}
.village-block.all-include.active .title:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 6px solid #fff;
  border-bottom: none;
  border-top: 10px solid #fff;
}
.village-block.director {
  margin-bottom: 30px;
}
.village-block.director:after {
  content: '';
  display: table;
  clear: both;
}
.village-block.director img {
  margin-left: 0;
}
.village-block.director .director-picture {
  float: left;
  margin-right: 20px;
  max-width: 110px;
}
.village-block.director .director-text {
  float: left;
  margin-top: 15px;
  max-width: 80%;
}
.village-block.director .director-text p {
  margin-bottom: 2px;
}

/* Village Reassurance Block

Village Reassurance Block
<h1>Result</h1>

Markup: <div class="village-block reassurances">
    <ul>
        <li class="experience">Plus de <strong>50 ans</strong> d'expérience</li>
        <li class="confiance"><strong>55 000</strong> vacanciers accueillis<br/>
        cet hiver, <strong>98%</strong> souhaitent revenir<br/>
        aux Villages Clubs du Soleil</li>
        <li class="engagement">Engagement qualité</li>
    </ul>
</div>

Styleguide 12.4
*/
.village-block.reassurances {
  color: #7d7d7d;
  text-align: center;
}
.village-block.reassurances li {
  background-image: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/village-footer.png");
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: top;
  padding-top: 105px;
  min-width: 220px;
  font-size: 14px;
  margin: 0 15px;
}
.village-block.reassurances .experience {
  background-position: 65px 0;
}
.village-block.reassurances .confiance {
  background-position: -180px 0;
}
.village-block.reassurances .engagement {
  background-position: -425px 0;
}

/* Village Strong Points Block

Village Strong Points Block
<h1>Result</h1>

Markup: <div class="village-block large orange-points">
    <span class="title">Les points forts</span>
    <ul class="content-inner">
        <li>Nouvellement classé village vacances 3 étoiles</li>
        <li>Chambres, restaurant et accueil rénovés</li>
        <li>Village Club au cœur du plus grand domaine skiable du monde : Les 3 Vallées (600 km de pistes)</li>
        <li>Village Club sur les pistes</li>
        <li>Départ et retour skis aux pieds</li>
        <li>Vue exceptionnelle sur les massifs environnants</li>
    </ul>
</div>

Styleguide 12.5
*/
.cms-page-view .std ul,
.orange-points ul {
  list-style: none;
}
.cms-page-view .std ul li,
.orange-points ul li {
  font-size: 14px;
  margin: 8px 0 8px 0;
  padding-left: 15px;
  position: relative;
}
.cms-page-view .std ul li:before,
.orange-points ul li:before {
  content: '';
  background: #f26c00;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  position: absolute;
  top: 8px;
  left: 0;
  width: 6px;
  height: 6px;
}

/* Village Table Prices Block

Village Table Prices Block
<h1>Result</h1>

Markup: <div class="category-village">
  <div class="village-block table-prices">
      <span class="title">Tableau prix / dispos<span> Prix par personne pour une semaine</span></span>
      <div class="content-inner">
          <table >
              <thead>
                  <tr>
                     <th></th>
                     <th>Adulte</th>
                     <th>Enfant 6 ans > - 13 ans</th>
                     <th>Enfant 2 ans > - 6 ans</th>
                     <th>Enfant 3 mois > - 2 ans</th>
                  </tr>
              </thead>
              <tbody>
                  <tr>
                      <td class="date">Du 21/21 au 28/12</td>
                      <td class="col-2">1045 €</td>
                      <td>815 €</td>
                      <td class="col-4">730 €</td>
                      <td>420 €</td>
                  </tr>
                  <tr>
                      <td class="date">Du 21/21 au 28/12</td>
                      <td class="col-2">1045 €</td>
                      <td>815 €</td>
                      <td class="col-4">730 €</td>
                      <td>420 €</td>
                  </tr>
                  <tr>
                      <td class="date">Du 21/21 au 28/12</td>
                      <td class="col-2">1045 €</td>
                      <td>815 €</td>
                      <td class="col-4">730 €</td>
                      <td>420 €</td>
                  </tr>
                  <tr>
                      <td class="date">Du 21/21 au 28/12</td>
                      <td class="col-2">1045 €</td>
                      <td>815 € <span>Complet</span></td>
                      <td class="col-4">730 €</td>
                      <td>420 €</td>
                  </tr>
                  <tr>
                      <td class="date">Du 21/21 au 28/12</td>
                      <td class="col-2">1045 €</td>
                      <td>815 €</td>
                      <td class="col-4">730 €</td>
                      <td>420 €</td>
                  </tr>
                  <tr>
                      <td class="date">Du 21/21 au 28/12</td>
                      <td class="col-2">1045 €</td>
                      <td>815 €</td>
                      <td class="col-4">730 €</td>
                      <td>420 €</td>
                  </tr>
                  <tr>
                      <td class="date">Du 21/21 au 28/12</td>
                      <td class="col-2">1045 €</td>
                      <td>815 €</td>
                      <td class="col-4">730 €</td>
                      <td>420 €</td>
                  </tr>
                  <tr>
                      <td class="date">Du 21/21 au 28/12</td>
                      <td class="col-2">1045 €</td>
                      <td>815 €</td>
                      <td class="col-4">730 €</td>
                      <td>420 €</td>
                  </tr>
                  <tr>
                      <td class="date">Du 21/21 au 28/12</td>
                      <td class="col-2">1045 €</td>
                      <td>815 € <span>Complet</span></td>
                      <td class="col-4">730 €</td>
                      <td>420 €</td>
                  </tr>
                  <tr>
                      <td class="date">Du 21/21 au 28/12</td>
                      <td class="col-2">1045 €</td>
                      <td>815 €</td>
                      <td class="col-4">730 €</td>
                      <td>420 €</td>
                  </tr>
                  <tr>
                      <td class="date">Du 21/21 au 28/12</td>
                      <td class="col-2">1045 €</td>
                      <td>815 € <span>Complet</span></td>
                      <td class="col-4">730 €</td>
                      <td>420 €</td>
                  </tr>
                  <tr>
                      <td class="date">Du 21/21 au 28/12</td>
                      <td class="col-2">1045 €</td>
                      <td>815 €</td>
                      <td class="col-4">730 €</td>
                      <td>420 €</td>
                  </tr>
              </tbody>
          </table>
          <a href="#" class="more">Semaines suivantes</a>
      </div>
      <div class="desc">
        <p><i>Le logement est attribué en fonction de la composition familiale. Les enfants de moins de 13 ans logent obligatoirement dans le logement des parents.</i></p>
        <p><strong>Sur demande et suivant disponibilité :</strong><br/>
        +10% pour 2 personnes dans un logement de 4 personnes ou plus<br/>
        Chambre pour 1 personne selon disponibilité : tarifs adultes + 20 %<br/>
        + 5% pour chambres communicantes</p>
        <p><strong>Ajouter par dossier : </strong><br/>
        Frais d’inscription 28€/dossier (5 personnes maximum)<br/>
        Taxe de séjour<br/>
        Package Assurance Annulation – Rapatriement – Garantie Neige : 70€/dossier (5 personnes maximum)<br/>
        Caution 230€/logement à régler sur place au début du séjour</p>
      </div>
  </div>
</div>

Styleguide 12.6
*/
.village-block h3, .village-block h4, .village-block h5 {
  color: #5a8aba;
  font-weight: 300;
}
.village-block.table-prices {
  max-width: 100%;
}
.village-block.table-prices .title {
  font-size: 22px;
  font-weight: 300;
}
.village-block.table-prices .title > span,
.village-block.table-prices .title > div {
  text-transform: none;
  color: #000;
  font-weight: 600;
  font-size: 13px;
  display: inline-block;
  vertical-align: baseline;
}
.village-block.table-prices .title > span .control,
.village-block.table-prices .title > div .control {
  display: inline-block;
  vertical-align: bottom;
  margin-left: 15px;
}
.village-block.table-prices .title > span .control input,
.village-block.table-prices .title > div .control input {
  display: inline-block;
  vertical-align: bottom;
  height: 18px;
}
.village-block.table-prices .title > span .control label,
.village-block.table-prices .title > div .control label {
  display: inline-block;
  vertical-align: baseline;
  padding-left: 5px;
  max-width: 100%;
}
.village-block.table-prices .content-inner {
  border: 5px solid #d7e1eb;
  padding: 15px;
  margin-bottom: 30px;
  display: none;
}
.village-block.table-prices table {
  width: 100%;
}
.village-block.table-prices tr {
  border-bottom: 1px dotted #000;
}
.village-block.table-prices tr.next {
  cursor: pointer;
}
.village-block.table-prices th {
  color: #f26c00;
  text-transform: uppercase;
  width: 16%;
  font-weight: 600;
  padding-left: 10px;
}
.village-block.table-prices td {
  height: 30px;
  vertical-align: middle;
  font-weight: 600;
  padding-left: 10px;
  position: relative;
}
.village-block.table-prices td.date {
  color: #f26c00;
  text-transform: uppercase;
  font-weight: 600;
  padding-left: 0;
}
.village-block.table-prices td .hover-stock {
  position: absolute;
  background: #f46c00;
  color: #fff;
  padding: 5px 10px;
  text-align: center;
  font-size: 11px;
  line-height: 1.3;
  right: -100px;
  max-width: 120px;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);
}
.village-block.table-prices td .hover-stock:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 7px solid #f46c00;
  border-left: none;
  top: 50%;
  margin-top: -7px;
  left: -7px;
}
.village-block.table-prices td.col-2, .village-block.table-prices td.col-4 {
  background: #ebf0f5;
}
.village-block.table-prices td span.free, .village-block.table-prices td span.full {
  color: #fe0000;
  text-transform: uppercase;
  font-weight: 600;
}
.village-block.table-prices td span.free {
  color: #f26c00;
}
.village-block.table-prices tbody tr {
  display: none;
}
.village-block.table-prices .before,
.village-block.table-prices .more {
  font-weight: normal;
  color: #000;
  text-decoration: underline;
  font-size: 12px;
  padding-left: 20px;
  position: relative;
  margin-top: 10px;
  display: inline-block;
}
.village-block.table-prices .before:before,
.village-block.table-prices .more:before {
  content: '';
  position: absolute;
  top: 4px;
  left: 0;
}
.village-block.table-prices .before {
  margin-top: 0px;
}
.village-block.table-prices .before:before {
  top: 14px;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-bottom: 6px solid #f26c00;
  border-top: none;
  border-bottom: 10px solid #f26c00;
}
.village-block.table-prices .more:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 6px solid #f26c00;
  border-bottom: none;
  border-top: 10px solid #f26c00;
}
.village-block.table-prices .desc p {
  font-size: 13px;
  color: #7d7d7d;
  margin-bottom: 10px;
  line-height: 16px;
}
.village-block.table-prices .desc p strong {
  font-weight: 600;
}

.category-village .category-title {
  position: relative;
}
.category-village .category-title .pull-left {
  width: 70%;
  float: left;
}
.category-village .category-title .pull-right {
  width: 28%;
  float: right;
}
.category-village .category-title .pull-right .price-box {
  clear: both;
  text-align: right;
  margin-top: 50px;
}
.category-village .category-title .pull-right .price-box p:first-child {
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
}
.category-village .category-title .pull-right .price-box span:first-child {
  font-size: 12px;
  display: inline-block;
  vertical-align: top;
  padding-top: 5px;
}
.category-village .category-title .pull-right .price-box .price {
  font-size: 45px;
  font-weight: 600;
  color: #f46c00;
  line-height: 45px;
}
.category-village .category-title .pull-right .price-box .price-condition {
  font-size: 12px;
  color: #f46c00;
}
.category-village .category-title .pull-right .price-box .view-more {
  display: block;
  color: #4c4c4c;
  text-decoration: underline;
}
.category-village .category-title .seasons label span {
  text-transform: none;
}
.category-village .category-title .seasons a {
  color: #9e9e9e;
}
.category-village .category-title .seasons a:hover, .category-village .category-title .seasons a:active, .category-village .category-title .seasons a:focus {
  color: #dc5528;
}
.category-village .category-title .seasons a label {
  cursor: pointer;
}
.category-village .category-title .seasons .custom-radio.season .radio {
  padding-left: 21px;
}
.category-village .category-title .seasons .custom-radio.season .radio.checked a {
  color: #373737;
}
.category-village .category-title .seasons .custom-radio.season .radio.checked a:hover, .category-village .category-title .seasons .custom-radio.season .radio.checked a:active, .category-village .category-title .seasons .custom-radio.season .radio.checked a:focus {
  color: #373737;
}
.category-village .page-title > div {
  display: inline-block;
  vertical-align: top;
}
.category-village .page-title > div.certification {
  margin-left: 10px;
  margin-top: 2px;
  margin-bottom: 15px;
}
.category-village .sharer-block {
  margin-top: -15px;
}
.category-village .adfab-push-carousel {
  clear: both;
}
.category-village .maps-google img {
  margin: 10px 0 0 0;
  width: 100%;
}
.category-village .maps-google iframe {
  width: 100%;
}

/* Village drop down

<h1>Result</h1>

Markup: <div class="village-block large dropdown-block">
    <h3>Glisse / Activités neige : les ménuires</h3>
    <h4>Inclus dans le tout compris :</h4>
    <h5>Forfait et matériel ski</h5>
    <p>- Votre forfait ski 6 jour du lendemain du jour d'arrivée</p>
    <p>Test <span>Test</span></p>
    <h3>Glisse / Activités neige : les ménuires</h3>
    <h4>Inclus dans le tout compris :</h4>
    <h5>Forfait et matériel ski</h5>
    <p>- Votre forfait ski 6 jour du lendemain du jour d'arrivée</p>
    <a href="#">Découvrez</a>
    <h3>Glisse / Activités neige : les ménuires</h3>
    <h4>Inclus dans le tout compris :</h4>
    <h5>Forfait et matériel ski</h5>
    <p>- Votre forfait ski 6 jour du lendemain du jour d'arrivée</p>
    <a href="#">Découvrez</a>
</div>

Styleguide 12.7
*/
.dropdown-block > * {
  display: none;
}
.dropdown-block h3 {
  color: #f46c00;
  font-size: 17px !important;
  margin: 0 !important;
  display: block !important;
  font-weight: bold;
  cursor: pointer;
  border-top: 1px dotted #000;
  margin-bottom: 0;
  padding: 20px 0 20px 25px;
  position: relative;
}
.dropdown-block h3:after {
  top: 25px;
  left: 0;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid #f26c00;
  border-right: none;
}
.dropdown-block h3.active:after {
  border: none;
  top: 29px;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-top: 7px solid #f26c00;
  border-bottom: none;
}
.dropdown-block h3:first-child {
  border: none;
  margin-top: 0;
}
.dropdown-block h4 {
  color: #f26c00;
  font-size: 17px;
  font-weight: normal;
  margin-top: 8px;
  font-weight: 300;
}
.dropdown-block h5 {
  color: #5a8aba;
  font-size: 17px;
  text-transform: none;
  font-weight: normal;
  margin-bottom: 0;
  font-weight: 300;
}
.dropdown-block p {
  margin-bottom: 8px;
}
.dropdown-block a {
  text-decoration: underline;
  margin-bottom: 8px;
}

.village-block .ma2-widgettabs-wrapper .tabsData .active {
  background-color: transparent;
}
.village-block .ma2-widgettabs-wrapper .tabsData dt {
  color: #5a8aba;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}
.village-block .ma2-widgettabs-wrapper .tabsData dt:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #f46c00;
  border-right: none;
  position: relative;
  display: inline-block;
  left: auto;
  bottom: auto;
  margin-left: 10px;
}
.village-block .ma2-widgettabs-wrapper .tabsData dt.active:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 5px solid #f46c00;
  border-bottom: none;
  position: relative;
  display: inline-block;
  left: auto;
  bottom: auto;
  margin-left: 10px;
  padding-bottom: 3px;
}
.village-block .ma2-widgettabs-wrapper .tabsData dd {
  color: #373737;
  font-weight: 500;
}
.village-block .ma2-widgettabs-wrapper .tabsData dd.active {
  display: block;
}
.village-block .ma2-widgettabs-wrapper .tabsData dd.active:after {
  display: none;
}
.village-block .ma2-widgettabs-wrapper .tabvillage-container {
  display: none;
}

/* Progress bar

Progress bar
<h1>Result</h1>

Markup: <ul class="progress-bar">
    <li class="current"><span>1.</span> Séjour</li>
    <li><span>2.</span> Options</li>
    <li><span>3.</span> Informations</li>
    <li><span>4.</span> Récapitulatif</li>
    <li><span>5.</span> Paiement</li>
</ul>

Styleguide 13
*/
.progress-bar {
  background-color: #e8e8e8;
  color: #000000;
  text-transform: uppercase;
  line-height: 52px;
  font-size: 15px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  display: block;
  clear: both;
}
.progress-bar li {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  float: left;
  border-right: 1px solid #fff;
  padding: 0;
  max-width: 24.8%;
}
.progress-bar li a {
  padding: 2px 18px;
  height: 60px;
  display: block;
  color: #000;
}
.progress-bar li span.nb {
  font-weight: 700;
}
.progress-bar li#opc-vacationer {
  display: none;
}
.progress-bar li.current {
  color: #fff;
  background: #f46c00;
}
.progress-bar li.current:after {
  background-position: 0 -1697px;
}
.progress-bar li.current a {
  color: #fff;
}
.progress-bar li:after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  margin-top: -6px;
  height: 15px;
  width: 10px;
  z-index: 1;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/vcs_icon_sprite.png") 0 -1722px no-repeat;
}
.progress-bar li:last-child {
  border: none;
}
.progress-bar li:last-child:after {
  display: none;
}
.progress-bar li.wide a {
  line-height: 1.4;
  padding-top: 9px;
}
.progress-bar li.wide a span {
  display: inline-block;
  vertical-align: top;
  width: 85%;
}
.progress-bar li.wide a span.nb {
  width: 11%;
  margin-top: 8px;
}

/* Discount code

Discount code

<h1>Result</h1>

Markup: <form id="discount-code">
    <p>Vous possédez un code promotionnel ou un code partenaire ?</p>
    <label>Indiquez-le ici :</label>
    <input type="text" class="input-text" name="discount-code" value="" placeholder="Code promotionnel" />
    <input type="text" class="input-text" name="discount-partner" value="" placeholder="Code partenaire" />
    <button type="submit" class="button gray refresh"><span>Appliquer</span></button>
</form>

Styleguide 14
*/
#discount-code,
#discount-coupon-form {
  display: block;
  color: #000000;
  padding: 10px 10px 30px;
  max-width: 100%;
  position: relative;
  border-bottom: 1px dotted #f26c00;
  background: none;
  margin: 0;
}
#discount-code p,
#discount-coupon-form p {
  padding-bottom: 5px;
}
#discount-code label,
#discount-coupon-form label {
  font-size: 13px;
  font-weight: normal;
}
#discount-code input[type="text"],
#discount-coupon-form input[type="text"] {
  width: 160px;
  margin: 0 10px;
  background: #e8e8e8;
  color: #1b1f20;
  font-size: 13px;
}
#discount-code button,
#discount-coupon-form button {
  margin-top: -3px;
  float: right;
  font-size: 14px;
  background: #999;
}
#discount-code .input-group,
#discount-coupon-form .input-group {
  display: inline-block;
  vertical-align: top;
}
#discount-code.has-coupon-code,
#discount-coupon-form.has-coupon-code {
  padding: 10px 10px 50px;
}
#discount-code.has-coupon-code .cancel-coupon,
#discount-coupon-form.has-coupon-code .cancel-coupon {
  min-width: 143px;
  margin-top: 8px;
}

.overlay-partner {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 210;
}

.modal-partner {
  display: none;
  z-index: 211;
  position: fixed;
  top: 220px;
  left: 50%;
  width: 670px;
  transform: translateX(-50%);
}
.modal-partner .modal-body {
  background-color: #fff;
  padding: 30px;
}
.modal-partner .modal-body p {
  padding-bottom: 15px;
  color: #f26c00;
  font-weight: 600;
  font-size: 14px;
}
.modal-partner .modal-body p.msg-error {
  color: red;
}
.modal-partner input[type="text"] {
  width: 220px;
  padding-right: 25px;
  height: 33px;
  margin: 0 10px 0 0;
  background: #e8e8e8;
  color: #1b1f20;
  font-size: 13px;
}
.modal-partner .button-group {
  display: inline-block;
  vertical-align: middle;
  float: right;
  position: relative;
}
.modal-partner .button-group.show .button span {
  opacity: 0;
}
.modal-partner .button-group.show .please-wait {
  display: block;
}
.modal-partner .button {
  margin-top: 0;
  background-color: #f26c00;
  float: right;
  font-size: 14px;
}
.modal-partner .please-wait {
  display: none;
  position: absolute;
  margin: 0;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.2);
  width: 100%;
  height: 100%;
  text-align: center;
  border-radius: 4px;
  padding-top: 5px;
}
.modal-partner .please-wait img {
  float: none;
  margin: 0;
  display: inline-block;
}
.modal-partner .modal-close {
  text-align: right;
}
.modal-partner .close-popin {
  color: #6395c6;
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 13px;
  display: inline-block;
}
.modal-partner .input-group {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.modal-partner .help {
  position: absolute;
  right: 10px;
  top: 0;
  height: 33px;
}
.modal-partner .help i {
  line-height: 33px;
  width: 25px;
  display: inline-block;
  text-align: center;
  font-style: normal;
  font-weight: bold;
  cursor: pointer;
}
.modal-partner .help span {
  display: none;
  position: absolute;
  z-index: 99;
  width: 300px;
  padding: 10px 15px;
  left: 50%;
  top: calc(100% + 10px);
  background-color: #4c4c4c;
  color: #fff;
  transform: translateX(-50%);
  font-size: 12px;
  line-height: 1.2;
}
.modal-partner .help span:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #4c4c4c;
  border-top: none;
  left: calc(50% - 10px);
  top: -10px;
}
.modal-partner .help:hover span {
  display: inline-block;
}

/* Customer account

Customer account

Styleguide 16
*/
/* Edit infos

Edit infos
<h1>Result</h1>

Markup: <div class="customer-account">
    <!-- col-main need to be removed when integrated -->
    <div class="col-main" style="width:660px; padding:0;">
        <div class="page-title">
          <h1>Vos coordonnées</h1>
        </div>
        <form action="" method="post" id="form-validate" class="scaffold-form" enctype="multipart/form-data">
            <div class="fieldset">
                <input name="form_key" value="" type="hidden">
                <input name="success_url" value="" type="hidden">
                <input name="error_url" value="" type="hidden">
                <ul class="form-list">
                    <li class="fields">
                        <div class="field">
                            <label for="gender">Civilité :</label>
                            <div class="input-box">
                                <select id="gender" name="gender" title="Gender">
                                    <option value="1" selected="selected">M.</option>
                                    <option value="2">Mme</option>
                                </select>
                            </div>
                        </div>
                        <div class="field name-firstname">
                            <label for="firstname" class="required"><em>*</em>Prénom :</label>
                            <div class="input-box">
                                <input id="firstname" name="firstname" value="" title="Prénom" maxlength="255" class="input-text required-entry" type="text">
                            </div>
                        </div>
                        <div class="field name-lastname">
                            <label for="lastname" class="required"><em>*</em>Nom :</label>
                            <div class="input-box">
                                <input id="lastname" name="lastname" value="" title="Nom" maxlength="255" class="input-text required-entry" type="text">
                            </div>
                        </div>
                    </li>
                    <li class="wide fields">
                        <div class="field">
                            <label for="billing:street2">Résidence / ZI :</label>
                            <div class="input-box">
                                <input name="street[1]" value="" title="Résidence / ZI" id="street_2" class="input-text " type="text">
                            </div>
                        </div>
                        <div class="field">
                            <label for="billing:street3">Batiment / Immeuble : </label>
                            <div class="input-box">
                                <input name="street[2]" value="" title="Batiment / Immeuble" id="street_3" class="input-text " type="text">
                            </div>
                        </div>
                    </li>
                    <li class="fields">
                        <div class="field">
                            <label for="billing:street4">N°</label>
                            <div class="input-box">
                                <input name="street[3]" value="" title="Numéro" id="street_4" class="input-text " type="text">
                            </div>
                        </div>
                        <div class="field">
                            <label for="billing:street1" class="required"><em>*</em>Voie :</label>
                            <div class="input-box">
                                <input name="street[0]" value="" title="Adresse" id="street_1" class="input-text  required-entry" type="text">
                            </div>
                        </div>
                    </li>
                    <li class="fields">
                        <div class="field">
                            <label for="billing:street5">Apartment/Escalier/Etage :</label>
                            <div class="input-box">
                                <input name="street[4]" value="" title="Apartment/Escalier/Etage" id="street_5" class="input-text " type="text">
                            </div>
                        </div>
                        <div class="field">
                            <label for="zip" class="required"><em>*</em>Code Postal</label>
                            <div class="input-box">
                                <input name="postcode" value="" title="Code Postal" id="zip" class="input-text validate-zip-international  required-entry" type="text">
                            </div>
                        </div>
                        <div class="field">
                            <label for="city" class="required"><em>*</em>Ville :</label>
                            <div class="input-box">
                                <input name="city" value="" title="Ville" class="input-text  required-entry" id="city" type="text">
                            </div>
                        </div>
                        <div class="field">
                            <label for="country" class="required"><em>*</em>Pays :</label>
                            <div class="input-box">
                                <select name="country_id" id="country" class="validate-select" title="Pays">
                                    <option value="AF">Afghanistan</option>
                                    <option value="ZA">Afrique du Sud</option>
                                    <option value="AL">Albanie</option>
                                    <option value="DZ">Algérie</option>
                                    <option value="DE">Allemagne</option>
                                    <option value="AD">Andorre</option>
                                    <option value="AO">Angola</option>
                                    <option value="AI">Anguilla</option>
                                    <option value="AQ">Antarctique</option>
                                    <option value="SV">El Salvador</option>
                                    <option value="ES">Espagne</option>
                                    <option value="EE">Estonie</option>
                                    <option value="FJ">Fidji</option>
                                    <option value="FI">Finlande</option>
                                    <option value="FR" selected="selected">France</option>
                                    <option value="GA">Gabon</option>
                                    <option value="GM">Gambie</option>
                                    <option value="GH">Ghana</option>
                                </select>
                            </div>
                        </div>
                    </li>
                    <li class="fields">
                        <div class="field">
                            <label for="telephone" class="required">Téléphone fixe<em>**</em> :</label>
                            <div class="input-box">
                                <input name="telephone" value="" title="Téléphone fixe" class="input-text required-entry" id="telephone" type="tel">
                            </div>
                        </div>
                        <div class="field">
                            <label for="telephone_port">Téléphone portable<em>**</em> :</label>
                            <div class="input-box">
                                <input name="telephone_port" id="telephone_port" title="Téléphone portable" value="" class="input-text  required-entry" type="tel">
                            </div>
                        </div>
                        <div class="field">
                            <label for="address-email" class="required">E-mail<em>*</em> :</label>
                            <div class="input-box">
                                <input name="address-email" id="address-email" title="Email" value="l" class="input-text required-entry" type="email">
                            </div>
                        </div>
                    </li>
                </ul>
                <input name="default_billing" value="1" type="hidden">
                <input name="default_shipping" value="1" type="hidden">
            </div>
            <div class="buttons-set">
                <button type="submit" title="Sauvegarder l'adresse" class="button orange"><span><span>Modifier</span></span></button>
                <p class="required">* champ obligatoire ** un ou 2 champs obligatoires</p>
            </div>
        </form>
    </div>
</div>

Styleguide 16.1
*/
.customer-account .page-title h1,
.customer-account .page-title h2 {
  color: #f26c00;
  font-size: 28px;
  border-bottom: 0;
}
.customer-account .page-title h2 {
  margin-bottom: 10px;
}
.customer-account .col-main form {
  border: 2px solid #f4e1c0;
  background: #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.customer-account .col-main form .fieldset {
  padding: 0 7px;
  margin: 20px 0;
}
.customer-account .col-main form .buttons-set {
  border-top: 0;
  text-align: left;
  margin: 0 6px 20px;
}
.customer-account .col-main form .buttons-set button.button {
  float: none;
  font-weight: 700;
  margin-left: 7px;
  min-width: 50px;
  font-size: 14px;
}
.customer-account .col-main form .buttons-set p.required {
  float: none;
  color: #444;
}
.customer-account .col-main form .messages {
  margin: 0 15px 20px;
}
.customer-account .col-main .form-list select {
  width: auto;
  height: 32px;
  line-height: 32px;
  border: 1px solid #d6d6d6;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: inset 1px 1px 1px 0 #ddd;
  -webkit-box-shadow: inset 1px 1px 1px 0 #ddd;
  -o-box-shadow: inset 1px 1px 1px 0 #ddd;
  box-shadow: inset 1px 1px 1px 0 #ddd;
  background: #f8f8f8;
  color: #384043;
  margin-top: 0;
  padding: 0 6px;
}
.customer-account .col-main .form-list select:focus, .customer-account .col-main .form-list select:active, .customer-account .col-main .form-list select:hover {
  outline: none;
}
.customer-account .col-main .form-list select#gender {
  width: 75px;
}
.customer-account .col-main .form-list select#country {
  width: 160px;
}
.customer-account .col-main .form-list .fields {
  margin-bottom: 15px;
}
.customer-account .col-main .form-list .customer-name {
  display: inline-block;
  vertical-align: top;
  margin: 0;
}
.customer-account .col-main .form-list .field {
  display: inline-block;
  vertical-align: top;
  margin: 0 7px;
}
.customer-account .col-main .form-list .field label {
  display: block;
  float: none;
}
.customer-account .col-main .form-list .field .input-box {
  display: block;
  float: none;
  padding-top: 0;
}
.customer-account .col-main .form-list .field .input-box input {
  height: 32px;
  line-height: 32px;
  border: 1px solid #d6d6d6;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: inset 1px 1px 1px 0 #ddd;
  -webkit-box-shadow: inset 1px 1px 1px 0 #ddd;
  -o-box-shadow: inset 1px 1px 1px 0 #ddd;
  box-shadow: inset 1px 1px 1px 0 #ddd;
  background: #f8f8f8;
  color: #384043;
  max-width: 100%;
  padding: 0 6px;
}
.customer-account .col-main .form-list .field .input-box input:focus, .customer-account .col-main .form-list .field .input-box input:active, .customer-account .col-main .form-list .field .input-box input:hover {
  outline: none;
}
.customer-account .col-main .form-list .field .input-box input#firstname {
  width: 250px;
}
.customer-account .col-main .form-list .field .input-box input#lastname {
  width: 298px;
}
.customer-account .col-main .form-list .field .input-box input#street_2 {
  width: 342px;
}
.customer-account .col-main .form-list .field .input-box input#street_3 {
  width: 298px;
}
.customer-account .col-main .form-list .field .input-box input#street_4 {
  width: 55px;
}
.customer-account .col-main .form-list .field .input-box input#street_1 {
  width: 585px;
}
.customer-account .col-main .form-list .field .input-box input#street_5 {
  width: 170px;
}
.customer-account .col-main .form-list .field .input-box input#zip {
  width: 95px;
}
.customer-account .col-main .form-list .field .input-box input#city {
  width: 180px;
}
.customer-account .col-main .form-list .field .input-box input#telephone {
  width: 232px;
}
.customer-account .col-main .form-list .field .input-box input#telephone_port {
  width: 232px;
}
.customer-account .col-main .form-list .field .input-box input#address-email {
  width: 232px;
}
.customer-account .col-main .form-list .field .input-box input#dob {
  width: 232px;
}
.customer-account .ui-datepicker select.ui-datepicker-month,
.customer-account .ui-datepicker select.ui-datepicker-year {
  position: relative;
  z-index: 2;
}
.customer-account .rgpd-mentions p {
  font-size: 12px;
  margin: 0 14px 30px;
}

/* Customer navigation */
.customer-account .col2-right-layout {
  border-top: 1px dotted #000;
  margin-top: 30px;
}
.customer-account .block-account .block-title {
  font-weight: 700;
  font-size: 45px;
  color: #f26c00;
  text-transform: uppercase;
  line-height: 30px;
  margin-bottom: 0;
  padding-bottom: 0;
}
.customer-account .block-account .infos {
  margin: 0 0 20px;
}
.customer-account .block-account .infos span {
  font-weight: 300;
  font-size: 28px;
  text-transform: uppercase;
  color: #f26c00;
}
.customer-account .block-account .infos a {
  font-weight: 300;
  color: #f26c00;
  text-decoration: underline;
  text-transform: uppercase;
}
.customer-account .block-account .infos ul {
  position: absolute;
  top: 0;
  right: 15px;
  text-align: right;
}
.customer-account .block-account .infos li {
  text-transform: none;
  margin: 0;
  font-size: 14px;
  position: relative;
  padding-left: 15px;
}
.customer-account .block-account .infos li strong {
  font-weight: 600;
  color: #373737;
}
.customer-account .block-account .infos li:before {
  content: '';
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 7px;
  left: 0;
}
.customer-account .block-account .navigation {
  width: 100%;
  display: table;
}
.customer-account .block-account .navigation li {
  display: table-cell;
  vertical-align: middle;
  background: #E8E8E8;
  padding: 15px;
  text-align: center;
  border-left: 1px solid #fff;
  position: relative;
}
.customer-account .block-account .navigation li:first-child {
  border-left: 0;
}
.customer-account .block-account .navigation li a {
  font-weight: 600;
  font-size: 12px;
}
.customer-account .block-account .navigation li.current {
  background: #f26c00;
}
.customer-account .block-account .navigation li.current a {
  color: #fff;
}
.customer-account .block-account .navigation li.current:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  bottom: -10px;
  margin-left: -5px;
  display: block;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 5px solid #f46c00;
  border-bottom: none;
  border-top-width: 10px;
}
.customer-account .block-account .navigation li:hover {
  background: #f26c00;
}
.customer-account .block-account .navigation li:hover a {
  color: #fff;
}
.customer-account .dashboard {
  margin-top: 20px;
}
.customer-account .dashboard .welcome-msg {
  border-bottom: 1px dotted #000;
  padding-bottom: 30px;
}
.customer-account .loading-others-tabs {
  text-align: center;
  display: none;
  padding: 40px 0;
}
.customer-account .loading-others-tabs img {
  display: inline-block;
}
.customer-account .loading-others-tabs span {
  display: block;
}

.dashboard .box-account .col1-set {
  border: 2px solid #f4e1c0;
  background: #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 20px;
}
.dashboard .box-account .col1-set p {
  font-size: 14px;
}
.dashboard .box-account p {
  font-family: "Open Sans", Verdana, Arial, sans-serif;
}
.dashboard .box-fidelity-sponsorship .intro {
  border-bottom: 1px dotted #000;
  padding-bottom: 15px;
  margin-bottom: 15px;
}
.dashboard .box-fidelity-sponsorship .intro p {
  font-style: normal;
}
.dashboard .box-fidelity-sponsorship .intro p span {
  font-weight: 600;
}
.dashboard .box-fidelity-sponsorship .intro li {
  position: relative;
  padding-left: 15px;
}
.dashboard .box-fidelity-sponsorship .intro li:before {
  content: '';
  background: #f26c00;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 7px;
  left: 0;
}
.dashboard .box-fidelity-sponsorship .content li {
  text-transform: uppercase;
  color: #5a8aba;
  font-size: 20px;
}
.dashboard .box-fidelity-sponsorship .content li span {
  color: #f26c00;
  font-size: 26px;
  font-weight: 300;
  line-height: 20px;
}
.dashboard .box-fidelity-sponsorship .content .button {
  margin-top: 20px;
  font-weight: 700;
}

.account-password {
  margin-top: 25px;
}
.account-password input {
  width: 320px;
}

.vacationers {
  margin-top: 25px;
}
.vacationers .col2-set {
  border: 2px solid #f4e1c0;
  background: #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 20px;
}
.vacationers .button {
  margin-top: 20px;
  font-weight: 700;
}
.vacationers .messages li {
  padding: 0;
}
.vacationers .messages li:before {
  background: none;
}
.vacationers .messages li span {
  color: #f26c00;
  text-transform: uppercase;
  font-weight: 700;
}
.vacationers li {
  position: relative;
  padding-left: 15px;
  font-size: 14px;
  font-weight: 600;
}
.vacationers li:before {
  content: '';
  background: #f26c00;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 7px;
  left: 0;
}
.vacationers li span.buttons {
  float: right;
  width: 40%;
}
.vacationers li span .remove-vacationer {
  position: relative;
  padding-left: 15px;
  margin-left: 5px;
}
.vacationers li span .remove-vacationer:before {
  content: '';
  background: #f26c00;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 7px;
  left: 0;
}

.people-vacationer-edit.customer-account h2 {
  margin: 0 10px 15px;
  width: auto !important;
  display: block !important;
}
.people-vacationer-edit.customer-account .col-main form .form-list .field {
  margin-bottom: 10px;
}
.people-vacationer-edit.customer-account .col-main form .buttons-set .back-link {
  margin-left: 10px;
}
.people-vacationer-edit.customer-account .col-main form .buttons-set button.button {
  float: right;
  margin-right: 10px;
}
.people-vacationer-edit.customer-account #ui-datepicker-div.vacationer-picker .ui-datepicker-prev, .people-vacationer-edit.customer-account #ui-datepicker-div.vacationer-picker .ui-datepicker-next {
  display: none;
}

.my-account .people-account-newsletter h2 {
  margin-top: 30px;
}
.my-account .people-account-newsletter label {
  color: #5a8aba;
  font-weight: 600;
  vertical-align: top;
  margin-left: 7px;
}
.my-account .people-account-newsletter .form-list {
  margin: 0 10px;
}
.my-account .people-account-newsletter input[type="checkbox"] {
  height: 20px;
}
.my-account .people-account-newsletter li label {
  text-transform: uppercase;
}
.my-account .people-account-newsletter li.control {
  margin-left: 30px;
}
.my-account .people-account-newsletter li.control label {
  text-transform: none;
  background: none;
  padding: 0;
  margin: 0 0 0 7px;
}
.my-account .people-account-newsletter .legend {
  border: 0;
  margin: 0;
  padding: 0;
}
.my-account .people-account-newsletter .legend .messages {
  margin: 0 15px 20px;
}

.account-create .page-title {
  margin-bottom: 20px;
}
.account-create h1 {
  font-weight: 600;
  font-size: 45px;
  color: #f26c00;
  border-bottom: 0;
  margin-bottom: 0;
}
.account-create h2 {
  font-size: 28px;
  font-weight: 300;
  color: #f26c00;
  margin-bottom: 0;
  border-bottom: 0;
}
.account-create h3, .account-create h4 {
  font-size: 20px;
  color: #5a8aba;
}
.account-create h4 {
  font-weight: 400;
}
.account-create .form-list li {
  margin-bottom: 25px;
}
.account-create .form-list li .field {
  display: inline-block;
  vertical-align: top;
  margin: 0 7px;
}
.account-create .form-list li .field.first {
  margin-left: 0;
}
.account-create .form-list li .field.mobile-phone {
  max-width: 50%;
}
.account-create .fieldset {
  border-bottom: 1px dotted #000;
  padding-bottom: 25px;
  margin-bottom: 25px;
}
.account-create .fieldset p {
  font-size: 14px;
}
.account-create .fieldset select,
.account-create .fieldset input {
  height: 32px;
  line-height: 32px;
  border: 1px solid #d6d6d6;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: inset 1px 1px 1px 0 #ddd;
  -webkit-box-shadow: inset 1px 1px 1px 0 #ddd;
  -o-box-shadow: inset 1px 1px 1px 0 #ddd;
  box-shadow: inset 1px 1px 1px 0 #ddd;
  background: #f8f8f8;
  color: #384043;
  margin-top: 0;
}
.account-create .fieldset select:focus, .account-create .fieldset select:active, .account-create .fieldset select:hover,
.account-create .fieldset input:focus,
.account-create .fieldset input:active,
.account-create .fieldset input:hover {
  outline: none;
}
.account-create .fieldset.address-infos .field.customer-name {
  margin: 0;
}
.account-create .fieldset.address-infos, .account-create .fieldset.additional, .account-create .fieldset.support, .account-create .fieldset.newsletter {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
.account-create .fieldset.newsletter {
  margin-top: 25px;
}
.account-create .fieldset.newsletter input {
  height: auto;
}
.account-create .fieldset.newsletter label {
  text-transform: uppercase;
  font-weight: 600;
  color: #5a8aba;
  margin-left: 5px;
}
.account-create .fieldset.newsletter .control {
  margin-left: 40px;
  margin-bottom: 0;
  margin-top: 0;
}
.account-create .fieldset.newsletter .control label {
  text-transform: none;
  background: none;
  font-weight: 600;
  color: #5a8aba;
  margin-left: 5px;
  padding: 5px 0;
}
.account-create .buttons-set {
  text-align: left;
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.account-create .buttons-set button.button {
  float: none;
  margin-left: 0;
  font-weight: 700;
}
.account-create .buttons-set .required {
  float: none;
  margin: 0;
  color: #373737;
  font-weight: 600;
}
.account-create input[type="checkbox"] {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  vertical-align: middle;
}
.account-create #email_address {
  width: 268px;
}
.account-create #password {
  width: 190px;
}
.account-create #confirmation {
  width: 190px;
}
.account-create #gender {
  width: 75px;
}
.account-create #firstname {
  width: 250px;
}
.account-create #lastname {
  width: 323px;
}
.account-create #street_2 {
  width: 300px;
}
.account-create #street_3 {
  width: 158px;
}
.account-create #street_5 {
  width: 190px;
}
.account-create #street_4 {
  width: 60px;
}
.account-create #street_1 {
  width: 606px;
}
.account-create #zip {
  width: 90px;
}
.account-create #city {
  width: 200px;
}
.account-create #country {
  width: 180px;
}
.account-create #telephone {
  width: 190px;
}
.account-create #telephone_port {
  width: 190px;
}
.account-create #support {
  width: 99%;
}
.account-create.checkout-billing .form-list li {
  margin-bottom: 15px;
}
.account-create.checkout-billing #lastname {
  width: 284px;
}
.account-create.checkout-billing input[type="email"] {
  width: 229px;
}
.account-create #advice-validate-select-gender {
  width: 75px;
}
.account-create #advice-validate-email-email_address {
  width: 268px;
}
.account-create #advice-validate-password-password {
  width: 190px;
}
.account-create #advice-validate-cpassword-confirmation {
  width: 190px;
}
.account-create #advice-required-entry-zip {
  width: 90px;
}

#popin-confirm-specials-offers {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  z-index: 999;
}
#popin-confirm-specials-offers .inner {
  position: absolute;
  top: 220px;
  left: 50%;
  width: 500px;
  background: #fff;
  padding: 30px;
  margin-left: -250px !important;
  z-index: 1000;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
}
#popin-confirm-specials-offers .content p {
  color: #f46c00;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  margin-bottom: 20px;
}
#popin-confirm-specials-offers .content .answers {
  text-align: center;
}
#popin-confirm-specials-offers .content .answers a {
  display: inline-block;
  vertical-align: middle;
  padding: 5px 10px;
  margin: 0 5px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 7px;
  min-width: 50px;
  font-weight: 600;
  font-size: 14px;
  outline: 0;
}
#popin-confirm-specials-offers .content .answers a:hover {
  background-color: #000;
}
#popin-confirm-specials-offers .content .answers a.yes {
  background-color: #f46c00;
}
#popin-confirm-specials-offers .content .answers a.yes:hover {
  background-color: #d2421f;
}

/*** Sales Orders History ***/
.my-account .sales-order-history h2 {
  color: #384043;
  text-transform: none;
  font-size: 34px;
}
.my-account .sales-order-history .past-stays-title {
  padding-top: 10px;
  border-top: 1px dotted #000;
  margin-top: 30px;
}
.my-account .sales-order-history .stays h3 {
  color: #f26c00;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 26px;
  margin: 0;
}
.my-account .sales-order-history .stays h3 span {
  text-transform: none;
  font-size: 18px;
  font-weight: 400;
}
.my-account .sales-order-history .stays li.stay {
  border: 2px solid #f4e1c0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 20px;
  background: #fff;
  margin-bottom: 10px;
}
.my-account .sales-order-history .stays li.stay .dates {
  color: #fff;
  padding: 3px 7px;
  background: #5a8aba;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  font-size: 18px;
  margin: 0 0 20px;
}
.my-account .sales-order-history .stays li.stay a.more {
  display: block;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 14px;
  padding: 0 0 0 18px;
  position: relative;
}
.my-account .sales-order-history .stays li.stay a.more:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-top: 5px solid #f26c00;
  border-bottom: none;
  border-width: 11px 5px;
  left: 0;
  top: 4px;
}
.my-account .sales-order-history .stays li.stay a.more.active:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  display: block;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  border-bottom: 5px solid #f26c00;
  border-top: none;
  border-width: 11px 5px;
  left: 0;
  top: 4px;
}
.my-account .sales-order-history .stays li.stay a.more:active, .my-account .sales-order-history .stays li.stay a.more:focus, .my-account .sales-order-history .stays li.stay a.more:hover {
  color: #f26c00;
  outline: none;
}
.my-account .sales-order-history .stays li.stay div.more {
  display: none;
}
.my-account .sales-order-history .stays li.stay div.more h4 {
  text-transform: uppercase;
  color: #5a8aba;
  font-weight: 400;
  font-size: 20px;
}
.my-account .sales-order-history .stays li.stay div.more > div {
  border-top: 1px dotted #f26c00;
  padding-top: 20px;
  margin-top: 20px;
}
.my-account .sales-order-history .stays li.stay div.more > div.town {
  margin-top: 5px;
}
.my-account .sales-order-history .stays li.stay .town {
  position: relative;
}
.my-account .sales-order-history .stays li.stay .town img {
  display: inline-block;
  vertical-align: top;
  width: 27%;
  margin-right: 10px;
}
.my-account .sales-order-history .stays li.stay .town > div {
  padding-bottom: 30px;
  display: inline-block;
  vertical-align: top;
  width: 70%;
}
.my-account .sales-order-history .stays li.stay .town > div.large {
  width: 100%;
}
.my-account .sales-order-history .stays li.stay .case {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 15px;
}
.my-account .sales-order-history .stays li.stay .case span {
  color: #f26c00;
}
.my-account .sales-order-history .stays li.stay .all-inclusive {
  margin-bottom: 15px;
}
.my-account .sales-order-history .stays li.stay .all-inclusive p {
  font-size: 14px;
  font-weight: 600;
}
.my-account .sales-order-history .stays li.stay .all-inclusive ul {
  font-size: 12px;
}
.my-account .sales-order-history .stays li.stay .all-inclusive ul li {
  display: inline-block;
  vertical-align: baseline;
  position: relative;
  padding-left: 10px;
  padding-right: 3px;
}
.my-account .sales-order-history .stays li.stay .all-inclusive ul li:before {
  content: '';
  background: #f26c00;
  width: 4px;
  height: 4px;
  position: absolute;
  left: 0;
  top: 7px;
  border-radius: 2px;
}
.my-account .sales-order-history .stays li.stay .all-inclusive ul li:first-child {
  padding-left: 0;
}
.my-account .sales-order-history .stays li.stay .all-inclusive ul li:first-child:before {
  background: none;
}
.my-account .sales-order-history .stays li.stay .desc p {
  line-height: 1.2;
  margin-bottom: 10px;
}
.my-account .sales-order-history .stays li.stay .desc .infras {
  display: block;
  overflow: hidden;
  margin-bottom: 5px;
}
.my-account .sales-order-history .stays li.stay .desc .infras img {
  max-height: 20px;
  float: left;
  margin-right: 10px;
  max-width: 20px;
}
.my-account .sales-order-history .stays li.stay .options p {
  font-weight: 600;
}
.my-account .sales-order-history .stays li.stay .options ul {
  font-size: 12px;
}
.my-account .sales-order-history .stays li.stay .options ul li {
  padding-left: 10px;
  position: relative;
}
.my-account .sales-order-history .stays li.stay .options ul li:before {
  content: '';
  background: #f26c00;
  width: 4px;
  height: 4px;
  position: absolute;
  left: 0;
  top: 7px;
  border-radius: 2px;
}
.my-account .sales-order-history .stays li.stay .pay {
  position: absolute;
  bottom: 0;
  right: 0;
}
.my-account .sales-order-history .stays li.stay .pay a {
  background: #f26c00;
  padding: 5px 10px;
  border-radius: 3px;
  font-weight: 600;
  color: #fff;
}
.my-account .sales-order-history .stays li.stay .confirm h4,
.my-account .sales-order-history .stays li.stay .bill h4,
.my-account .sales-order-history .stays li.stay .certificate h4,
.my-account .sales-order-history .stays li.stay .review h4 {
  display: inline-block;
  vertical-align: baseline;
  margin-right: 20px;
}
.my-account .sales-order-history .stays li.stay .confirm a,
.my-account .sales-order-history .stays li.stay .bill a,
.my-account .sales-order-history .stays li.stay .certificate a,
.my-account .sales-order-history .stays li.stay .review a {
  text-decoration: underline;
  margin: 0 20px 0 0;
}
.my-account .sales-order-history .stays li.stay .documents .list {
  margin-bottom: 15px;
}
.my-account .sales-order-history .stays li.stay .documents .list a {
  display: inline-block;
  color: #f46c00;
  vertical-align: top;
  width: 45%;
  text-decoration: underline;
}
.my-account .sales-order-history .stays li.stay .documents .links a {
  text-decoration: underline;
  font-size: 12px;
  margin-right: 20px;
}
.my-account .sales-order-history .stays li.stay .documents .links .all {
  color: #384043;
  display: inline-block;
  margin-right: 20px;
  margin-left: -13px;
  font-size: 12px;
}
.my-account .sales-order-history .stays li.stay .documents .links .all input {
  opacity: 0;
}
.my-account .sales-order-history .stays li.stay .documents .links .all label {
  text-decoration: underline;
}
.my-account .sales-order-history .stays li.stay .functions a {
  text-decoration: underline;
  font-size: 12px;
  margin-right: 20px;
}
.my-account .sales-order-history .stays li.stay .status > div {
  width: 100%;
  background: #fff;
  margin-bottom: 15px;
  border: 5px solid #d7e1eb;
  padding: 10px 20px;
}
.my-account .sales-order-history .stays li.stay .status table {
  width: 100%;
}
.my-account .sales-order-history .stays li.stay .status th, .my-account .sales-order-history .stays li.stay .status td {
  padding: 5px 0;
  text-align: center;
}
.my-account .sales-order-history .stays li.stay .status th {
  font-weight: 600;
  font-size: 14px;
}
.my-account .sales-order-history .stays li.stay .status tbody tr {
  border-top: 1px dotted #000;
}
.my-account .sales-order-history .stays li.stay .status tbody th {
  text-align: left;
}
.my-account .sales-order-history .stays li.stay .status tbody td {
  color: #5a8aba;
}
.my-account .sales-order-history .stays li.stay .status tbody td.amount {
  font-weight: 700;
}
.my-account .sales-order-history .stays li.stay .status tbody td.state {
  color: #fff;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
  text-align: right;
}
.my-account .sales-order-history .stays li.stay .status tbody td.state > div,
.my-account .sales-order-history .stays li.stay .status tbody td.state > a {
  display: inline-block;
  border-radius: 3px;
  padding: 5px 10px;
  text-align: center;
  min-width: 145px;
}
.my-account .sales-order-history .stays li.stay .status tbody td.state .done {
  background: #bcbcbc;
}
.my-account .sales-order-history .stays li.stay .status tbody td.state .todo {
  background: #f26c00;
  color: #fff;
}
.my-account .sales-order-history .stays li.stay .status tbody td.with-overlay {
  position: relative;
  height: 100px;
}
.my-account .sales-order-history .stays li.stay .status tbody td.with-overlay .overlay {
  position: absolute;
  right: 0;
  top: 10px;
  width: calc(200% - 5px);
  height: calc(100% - 20px);
  background-color: rgba(0, 0, 0, 0.8);
}
.my-account .sales-order-history .stays li.stay .status tbody td.with-overlay .overlay span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}
.my-account .sales-order-history .stays li.stay .status tbody td.with-overlay .overlay .dismiss-overlay {
  margin-top: 5px;
  border: 0;
  background: #f46c00;
  color: #fff;
  padding: 2px 10px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 12px;
}
.my-account .sales-order-history .stays li.stay .status tfoot {
  border-top: 1px dotted #000;
}
.my-account .sales-order-history .stays li.stay .status tfoot th {
  text-align: left;
  font-weight: 400;
}
.my-account .sales-order-history .stays li.stay .status tfoot .amount {
  color: #f26c00;
}
.my-account .sales-order-history .stays.past li.stay .review-summary-table tbody tr.first th {
  width: 208px;
  margin-bottom: 7px;
}
.my-account .sales-order-history .stays.past li.stay .dates {
  background: none;
  color: #999;
  padding: 0;
}
.my-account .sales-order-history .stays.past li.stay .bill h4,
.my-account .sales-order-history .stays.past li.stay .certificate h4,
.my-account .sales-order-history .stays.past li.stay .review h4 {
  margin-bottom: 0;
}
.my-account .sales-order-history .stays.past li.stay .review h2 {
  text-transform: uppercase;
  color: #5a8aba;
  font-weight: 400;
  font-size: 20px;
}
.my-account .sales-order-history .stays.past li.stay .review form {
  border: 0;
  position: relative;
}
.my-account .sales-order-history .stays.past li.stay .review .fieldset {
  padding: 0;
  margin: 0;
}
.my-account .sales-order-history .stays.past li.stay .review input,
.my-account .sales-order-history .stays.past li.stay .review textarea {
  height: 32px;
  line-height: 32px;
  border: 1px solid #d6d6d6;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: inset 1px 1px 1px 0 #ddd;
  -webkit-box-shadow: inset 1px 1px 1px 0 #ddd;
  -o-box-shadow: inset 1px 1px 1px 0 #ddd;
  box-shadow: inset 1px 1px 1px 0 #ddd;
  background: #f8f8f8;
  color: #384043;
  width: 100%;
  font-size: 13px;
  font-weight: 600;
}
.my-account .sales-order-history .stays.past li.stay .review input:focus, .my-account .sales-order-history .stays.past li.stay .review input:active, .my-account .sales-order-history .stays.past li.stay .review input:hover,
.my-account .sales-order-history .stays.past li.stay .review textarea:focus,
.my-account .sales-order-history .stays.past li.stay .review textarea:active,
.my-account .sales-order-history .stays.past li.stay .review textarea:hover {
  outline: none;
}
.my-account .sales-order-history .stays.past li.stay .review textarea {
  line-height: 1.5;
  height: auto;
}
.my-account .sales-order-history .stays.past li.stay .review thead {
  display: none;
}
.my-account .sales-order-history .stays.past li.stay .review tbody th {
  padding: 0 10px 0 0;
  font-size: 14px;
  color: #6e6b66;
  text-transform: none;
  display: inline-block;
  vertical-align: top;
  line-height: 28px;
}
.my-account .sales-order-history .stays.past li.stay .review tbody td {
  width: 24px;
  height: 24px;
  display: inline-block;
  vertical-align: top;
}
.my-account .sales-order-history .stays.past li.stay .review tbody input {
  opacity: 0;
  z-index: 1;
  margin-left: 1px;
  height: 24px;
  width: 24px;
  cursor: pointer;
}
.my-account .sales-order-history .stays.past li.stay .review tbody label {
  height: 24px;
  width: 24px;
  padding: 0;
  margin: 0;
  position: relative;
  cursor: pointer;
}
.my-account .sales-order-history .stays.past li.stay .review tbody label span {
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/stars.png") no-repeat -36px 0;
  display: block;
  overflow: hidden;
  width: 24px;
  height: 24px;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
}
.my-account .sales-order-history .stays.past li.stay .review tbody label.active span {
  background-position: 0 0;
}
.my-account .sales-order-history .stays #advice-required-entry-validate_rating {
  position: absolute;
  bottom: 66px;
  right: 0px;
}
.my-account .sales-order-history .buttons-set {
  border: 0;
}
.my-account .buttons-set {
  border: 0;
}

/*** Sponsorship ***/
.my-account .auguria-sponsorship-points-accumulated.std .page-title h1 {
  font-size: 18px;
}
.my-account .auguria-sponsorship-points-accumulated.std h2 {
  color: #5a8aba;
  font-size: 16px;
}
.my-account .auguria-sponsorship-points-accumulated.std p strong {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  color: #f26c00;
}
.my-account .auguria-sponsorship-points-accumulated.std p a {
  text-decoration: underline;
}
.my-account .auguria-sponsorship-points-accumulated.std p a.button {
  text-decoration: none;
  font-weight: 600;
}

/*** Logout Page ***/
.customer-account-logoutsuccess .main-container {
  border-top: 1px dotted #000;
  margin-top: 30px;
  min-height: 500px;
}
.customer-account-logoutsuccess h1 {
  line-height: 46px;
  border: 0;
}
.customer-account-logoutsuccess h2 {
  font-size: 28px;
  font-weight: 300;
  border-bottom: 0;
  line-height: 30px;
  padding-bottom: 50px;
}
.customer-account-logoutsuccess p {
  font-size: 14px;
}

.people-newsletter-index h1 {
  font-size: 43px;
  border: 0;
}
.people-newsletter-index #newsletter-validate-detail .field.phone {
  max-width: 57%;
}
.people-newsletter-index #newsletter-validate-detail .buttons-set {
  border: 0;
  text-align: left;
}
.people-newsletter-index #newsletter-validate-detail .buttons-set button.button {
  font-size: 14px;
  margin-left: 0;
  float: none !important;
  font-weight: 700;
}
.people-newsletter-index #newsletter-validate-detail .legend {
  border: 0;
  margin: 0;
  padding: 0;
}
.people-newsletter-index #newsletter-validate-detail .legend .messages {
  margin: 10px 0;
}
.people-newsletter-index #newsletter-validate-detail .legend .messages li li {
  padding: 0;
}
.people-newsletter-index #newsletter-validate-detail .legend .messages .error-msg li {
  border: 0;
}
.people-newsletter-index #newsletter-validate-detail .legend .messages .error-msg li:before {
  border: 0;
}

.sponsor-index-index .page-title h1 {
  font-size: 45px;
  font-weight: 600;
  color: #f26c00;
  padding-bottom: 0;
  margin-bottom: 0;
  text-transform: uppercase;
  border: 0;
}
.sponsor-index-index .page-title h2 {
  font-weight: 300;
  font-size: 28px;
  text-transform: uppercase;
  color: #f26c00;
  border: 0;
  padding-bottom: 0;
}
.sponsor-index-index .col-main h3 {
  color: #f26c00;
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 20px;
}
.sponsor-index-index .col-main h4 {
  color: #5a8aba;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 0;
  margin-top: 20px;
}
.sponsor-index-index .col-main h4.sponsor {
  margin-top: 40px;
}
.sponsor-index-index .col-main .success-msg {
  font-weight: 600;
  text-transform: uppercase;
  color: #f26c00;
}
.sponsor-index-index .col-main form {
  border-top: 1px dotted #000;
  margin-top: 25px;
  padding-top: 25px;
}
.sponsor-index-index .col-main form p {
  font-size: 14px;
}
.sponsor-index-index .col-main form p strong {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  color: #f26c00;
}
.sponsor-index-index .col-main form p a {
  text-decoration: underline;
}
.sponsor-index-index .col-main form input,
.sponsor-index-index .col-main form select {
  height: 32px;
  line-height: 32px;
  border: 1px solid #d6d6d6;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: inset 1px 1px 1px 0 #ddd;
  -webkit-box-shadow: inset 1px 1px 1px 0 #ddd;
  -o-box-shadow: inset 1px 1px 1px 0 #ddd;
  box-shadow: inset 1px 1px 1px 0 #ddd;
  background: #f8f8f8;
  color: #384043;
  margin-top: 0;
  width: auto;
}
.sponsor-index-index .col-main form input:focus, .sponsor-index-index .col-main form input:active, .sponsor-index-index .col-main form input:hover,
.sponsor-index-index .col-main form select:focus,
.sponsor-index-index .col-main form select:active,
.sponsor-index-index .col-main form select:hover {
  outline: none;
}
.sponsor-index-index .col-main form label {
  display: block;
}
.sponsor-index-index .col-main form .form-list .gender select {
  width: 90%;
}
.sponsor-index-index .col-main form .form-list.sponsor .field {
  width: 28%;
  display: inline-block;
  vertical-align: top;
}
.sponsor-index-index .col-main form .form-list.sponsor .field.first {
  width: 12%;
}
.sponsor-index-index .col-main form .form-list.sponsor .field input {
  width: 95%;
}
.sponsor-index-index .col-main form .form-list.godson .row-1 .field {
  width: 28%;
  display: inline-block;
  vertical-align: top;
}
.sponsor-index-index .col-main form .form-list.godson .row-1 .field.gender {
  width: 12%;
}
.sponsor-index-index .col-main form .form-list.godson .row-1 .field input {
  width: 95%;
}
.sponsor-index-index .col-main form .form-list.godson .field > div {
  display: inline-block;
  vertical-align: top;
}
.sponsor-index-index .col-main form .form-list.godson span {
  font-weight: 600;
  font-size: 12px;
  margin: 0 5px 0 0;
  line-height: 28px;
}
.sponsor-index-index .col-main form .form-list.godson .dates input {
  margin-right: 5px;
  padding: 0 8px;
}
.sponsor-index-index .col-main form .form-list.godson .copie {
  margin-top: 20px;
}
.sponsor-index-index .col-main form .form-list.godson .copie label {
  display: inline;
  color: #5a8aba;
  text-transform: uppercase;
}
.sponsor-index-index .col-main form .form-list.godson .copie input {
  height: auto;
}
.sponsor-index-index .col-main form .form-list.godson #godson-stay {
  width: 96%;
}
.sponsor-index-index .col-main form .buttons-set {
  text-align: left;
  border: 0;
  margin-top: 25px;
}
.sponsor-index-index .col-main form .buttons-set button {
  font-weight: 600;
  font-size: 14px;
  float: none;
  margin: 0 0 10px;
}
.sponsor-index-index .col-main form .buttons-set p {
  font-size: 12px;
}
.sponsor-index-index .col-main form .conditions {
  border: 0;
  padding-top: 25px;
}
.sponsor-index-index .col-main form .conditions p {
  font-size: 12px;
}
.sponsor-index-index .desc ul {
  list-style: disc inside none;
  margin-left: 25px;
}
.sponsor-index-index .desc img {
  max-width: 100%;
}
.sponsor-index-index .desc .short-desc {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.sponsor-index-index .desc p {
  margin-bottom: 10px;
}

/* Tunnel de réservation

Tunnel de réservation

Styleguide 17
*/
/* Options

Options
<h1>Result</h1>

Markup: <div class="checkout crosssell">
    <form action="" method="post" enctype="multipart/form-data">
        <div class="fieldset form-options">
            <div class="item rando">
                <h2>Carnet rando</h2>
                <span class="price">+ 12,00 €</span>
                <div class="left">
                    <img src="../../skin/frontend/rwd/vcs/images/rando.jpg" border="0" />
                </div>
                <div class="right">
                    <div class="field">
                        <label for="persons">Choix des personnes :</label>
                        <div class="input-box">
                            <select id="persons" name="persons" title="Choix des personnes">
                                <option value="">Sélectionner...</option>
                                <option value="1">1 adulte</option>
                                <option value="2">2 adultes</option>
                                <option value="3">1 enfant</option>
                                <option value="4">2 enfants</option>
                            </select>
                        </div>
                    </div>
                    <p>Au cœur de l’immensité des “3 vallées”, le plus vaste domaine skiable du monde, votre village Club des Menuires idéalement situé sur les pistes, vous attend pour un séjour mémorable ! À vous tous les bonheurs du grand ski (600 km de pistes), la terrasse ensoleillée dominant la vallée et les soirées animées à partager, ...</p>
                    <a href="#" class="link-more">en savoir +</a>
                    <div class="more">
                        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ligula ante, dignissim ac sagittis in, lacinia sed enim. Suspendisse ut diam diam. Integer tincidunt nisl vel dapibus placerat. Vestibulum libero justo, vulputate id porta varius, eleifend id urna. Integer vel dignissim quam. Fusce tincidunt pretium nunc non lacinia. Sed ultricies lobortis sapien dictum aliquam. Quisque facilisis, mauris vitae feugiat auctor, odio elit cursus justo, quis vulputate lectus enim et lorem. Nullam ut rutrum arcu. Sed sed sagittis purus, ac commodo ipsum.</p>
                        <p>Praesent gravida, erat congue auctor consectetur, massa sapien vulputate dui, sed aliquet metus velit vel turpis. Etiam et orci quis felis porta adipiscing a sed arcu. Curabitur orci sem, mattis sit amet sapien ut, sagittis ornare dolor. Ut massa massa, venenatis ac neque faucibus, consequat fringilla ligula. Nullam semper neque in nunc consectetur condimentum. Proin at dolor magna. Nunc id tincidunt urna.</p>
                        <p>Donec tincidunt nibh ultrices rutrum lacinia. Nulla malesuada nisl elit, eu consequat nisi ornare fringilla. Donec eget sapien ut elit tincidunt feugiat. Sed non augue purus. Nam pretium convallis libero. Nulla facilisi. Ut at ante dolor. Etiam accumsan pellentesque bibendum. Curabitur convallis augue eget adipiscing auctor. Curabitur erat ligula, consectetur sit amet vestibulum sed, fermentum non mauris. Etiam sed eros sit amet sapien pharetra porta interdum rhoncus ipsum.</p> 
                    </div>
                </div>
            </div>
            <div class="option insurance">
                <h2>Assurance annulation</h2>
                <span class="price">+ 62,00 €</span>
                <img src="../../skin/frontend/rwd/vcs/images/logo-mondial-assistance.jpg" border="0" />
                <div class="field checkbox">
                    <label for="cancellation-insurance">
                        <input type="checkbox" name="cancellation-insurance" /> Pack assurance annulation / rapatriement avec Mondial Assistance<br/>
                          <span class="small">(par dossier de 5 personnes max.)</span>
                    </label>
                </div>
                <p>Au cœur de l’immensité des “3 vallées”, le plus vaste domaine skiable du monde, votre village Club des Menuires idéalement situé sur les pistes, vous attend pour un séjour mémorable ! À vous tous les bonheurs du grand ski (600 km de pistes), la terrasse ensoleillée dominant la vallée et les soirées animées à partager, ...</p>
                <a href="#" class="link-more">les conditions du pack</a>
                <div class="more">
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ligula ante, dignissim ac sagittis in, lacinia sed enim. Suspendisse ut diam diam. Integer tincidunt nisl vel dapibus placerat. Vestibulum libero justo, vulputate id porta varius, eleifend id urna. Integer vel dignissim quam. Fusce tincidunt pretium nunc non lacinia. Sed ultricies lobortis sapien dictum aliquam. Quisque facilisis, mauris vitae feugiat auctor, odio elit cursus justo, quis vulputate lectus enim et lorem. Nullam ut rutrum arcu. Sed sed sagittis purus, ac commodo ipsum.</p> 
                    <p>Praesent gravida, erat congue auctor consectetur, massa sapien vulputate dui, sed aliquet metus velit vel turpis. Etiam et orci quis felis porta adipiscing a sed arcu. Curabitur orci sem, mattis sit amet sapien ut, sagittis ornare dolor. Ut massa massa, venenatis ac neque faucibus, consequat fringilla ligula. Nullam semper neque in nunc consectetur condimentum. Proin at dolor magna. Nunc id tincidunt urna.</p>
                    <p>Donec tincidunt nibh ultrices rutrum lacinia. Nulla malesuada nisl elit, eu consequat nisi ornare fringilla. Donec eget sapien ut elit tincidunt feugiat. Sed non augue purus. Nam pretium convallis libero. Nulla facilisi. Ut at ante dolor. Etiam accumsan pellentesque bibendum. Curabitur convallis augue eget adipiscing auctor. Curabitur erat ligula, consectetur sit amet vestibulum sed, fermentum non mauris. Etiam sed eros sit amet sapien pharetra porta interdum rhoncus ipsum.</p> 
                </div>
            </div>
        </div>
        <div class="buttons-set">
            <button type="submit" title="Étape suivante" class="button orange">Étape suivante</button>
            <p class="previous"><a href="#">Étape précédente</a></p>
        </div>
    </form>
</div>

Styleguide 17.1
*/
.checkout.crosssell {
  max-width: 100%;
  width: 100%;
}
.checkout.crosssell .insurance-alert-msg {
  display: none;
  color: #CF5050;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  margin-top: 25px;
  margin-bottom: -10px;
}
.checkout.crosssell .item {
  border: 2px solid #f4e1c0;
  background: #fff;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  display: block;
  margin: 25px 0;
  padding: 20px;
}
.checkout.crosssell .item h2 {
  font-size: 29px;
  font-weight: 600;
  color: #f26c00;
  width: 80%;
}
.checkout.crosssell .item .price {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 18px;
  color: #f26c00;
  font-weight: 600;
}
.checkout.crosssell .item .price:before {
  content: '+';
  margin-right: 5px;
}
.checkout.crosssell .item select {
  width: 228px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #d6d6d6;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: inset 1px 1px 1px 0 #ddd;
  -webkit-box-shadow: inset 1px 1px 1px 0 #ddd;
  -o-box-shadow: inset 1px 1px 1px 0 #ddd;
  box-shadow: inset 1px 1px 1px 0 #ddd;
  background: #f8f8f8;
  color: #384043;
  margin-top: 0;
  margin-bottom: 10px;
  padding: 0 6px;
}
.checkout.crosssell .item select:focus, .checkout.crosssell .item select:active, .checkout.crosssell .item select:hover {
  outline: none;
}
.checkout.crosssell .item select:focus {
  outline: none;
}
.checkout.crosssell .item .checkbox {
  margin-bottom: 10px;
}
.checkout.crosssell .item .checkbox label {
  font-size: 13px;
  font-weight: 600;
  color: #5a8aba;
  text-transform: uppercase;
}
.checkout.crosssell .item .checkbox label input {
  margin-right: 5px;
}
.checkout.crosssell .item .checkbox label .small {
  text-transform: none;
  margin-left: 20px;
}
.checkout.crosssell .item.rando > .left {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  margin-right: 2%;
}
.checkout.crosssell .item.rando > .left img {
  max-width: 100%;
}
.checkout.crosssell .item.rando > .right {
  display: inline-block;
  vertical-align: top;
  width: 72%;
}
.checkout.crosssell .item.rando > .right .field {
  margin-bottom: 7px;
}
.checkout.crosssell .item.insurance a {
  display: block;
}
.checkout.crosssell .item.insurance h2 {
  display: inline-block;
  vertical-align: top;
  margin-right: 15px;
  width: 60%;
}
.checkout.crosssell .item.insurance img {
  display: inline-block;
  vertical-align: top;
  margin-left: 20px;
  max-width: 130px;
  max-height: 100px;
}
.checkout.crosssell .item.insurance input {
  vertical-align: top;
  margin-top: 4px;
  opacity: 0;
}
.checkout.crosssell .item.insurance label {
  margin-left: 20px;
}
.checkout.crosssell .item.insurance label .small {
  margin-left: 0;
}
.checkout.crosssell .item.insurance .field {
  display: block;
}
.checkout.crosssell .item.insurance .field:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border: 1px solid #373737;
  border-radius: 1px;
}
.checkout.crosssell .item.insurance .field.active:after {
  content: '';
  position: absolute;
  left: -4px;
  top: 4px;
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/checked.png") no-repeat center center;
  width: 30px;
  height: 22px;
}
.checkout.crosssell .item.insurance .price {
  top: 0;
  right: 0;
}
.checkout.crosssell .item.insurance .cancellation-insurance-desc {
  padding: 0 35px;
}
.checkout.crosssell .item.insurance .cancellation-insurance-desc a {
  display: inline;
  text-decoration: underline;
}
.checkout.crosssell .item.insurance .cancellation-insurance-desc ul {
  list-style: disc outside;
  margin-left: 12px;
  margin-bottom: 15px;
}
.checkout.crosssell .item.insurance .cancellation-insurance-desc p {
  font-size: 13px;
  margin-bottom: 15px;
}
.checkout.crosssell .item.insurance #cancellation-insurance-field:before {
  top: 9px;
}
.checkout.crosssell .item.insurance #cancellation-insurance-field input {
  margin-top: 10px;
}
.checkout.crosssell .item.insurance #cancellation-insurance-field label {
  font-size: 22px;
  font-weight: 600;
  color: #f26c00;
}
.checkout.crosssell .item.insurance #no-cancellation-insurance-field {
  margin-top: 30px;
}
.checkout.crosssell .item.insurance #no-cancellation-insurance-field.active:after {
  top: -5px;
}
.checkout.crosssell .item.insurance #no-cancellation-insurance-field input {
  margin-top: 1px;
}
.checkout.crosssell .item.insurance #no-cancellation-insurance-field label {
  text-transform: none;
  color: #373737;
  font-size: 13px;
  font-weight: 500;
}
.checkout.crosssell .item p {
  font-size: 15px;
}
.checkout.crosssell .item .link-more {
  color: #f26c00;
  text-decoration: underline;
  margin-bottom: 10px;
  display: inline-block;
}
.checkout.crosssell .item .link-more:hover {
  color: #d2421f;
}
.checkout.crosssell .item .more {
  display: none;
}
.checkout.crosssell .item input {
  vertical-align: middle;
  margin: 2px 0;
}
.checkout.crosssell .buttons-set {
  border-top: 0;
  text-align: left;
  margin: 0 0 20px;
  padding-top: 0;
}
.checkout.crosssell .buttons-set button.button {
  font-weight: 700;
  min-width: 50px;
  font-size: 14px;
  padding: 7px 30px;
  background: #f26c00;
  color: #fff;
}
.checkout.crosssell .buttons-set .previous a {
  text-decoration: underline;
}
.checkout.crosssell.upsell #crosssell-products-list,
.checkout.crosssell.upsell #crosssell-insurance-list {
  border: 2px solid #f4e1c0;
  border-radius: 5px;
  background: #fff;
}
.checkout.crosssell.upsell .item {
  border: 0;
  border-radius: 0;
  margin: 0 20px;
  padding: 20px 0;
  border-top: 1px dotted #373737;
}
.checkout.crosssell.upsell .item:first-child {
  border-top: 0;
}
.checkout.crosssell.upsell .item h2 {
  font-size: 20px;
  font-weight: normal;
  color: #6395c6;
}
.checkout.crosssell.upsell .item .price {
  color: #6395c6;
  font-size: 20px;
  right: 0;
}
.checkout.crosssell.upsell .item .price .small {
  font-size: 12px;
}
.checkout.crosssell.upsell .item p {
  font-size: 12px;
}
.checkout.crosssell.upsell .item .fields label {
  font-size: 12px;
}
.checkout.crosssell.upsell .item .fields li {
  display: inline-block;
  vertical-align: top;
  width: 32%;
}
.checkout.crosssell.upsell .item.insurance h2 {
  display: inline;
}
.checkout.crosssell.upsell .item .checkbox {
  margin-top: 10px;
}
.checkout.crosssell.upsell .item .checkbox label {
  color: #373737;
}
.checkout.crosssell.upsell .item .checkbox label .small {
  font-size: 12px;
}
.checkout.crosssell.no-additional-service {
  margin-top: 50px;
}
.checkout.crosssell.no-additional-service .no-additional-service__block {
  margin-bottom: 50px;
}
.checkout.crosssell.no-additional-service .next-step {
  text-align: center;
}

.show-group-1 {
  display: none;
}

.group-1 .hide-group-1 {
  display: none;
}
.group-1 .show-group-1 {
  display: inherit;
}

.show-group-2 {
  display: none;
}

.group-2 .hide-group-2 {
  display: none;
}
.group-2 .show-group-2 {
  display: inherit;
}

.show-group-3 {
  display: none;
}

.group-3 .hide-group-3 {
  display: none;
}
.group-3 .show-group-3 {
  display: inherit;
}

.show-group-4 {
  display: none;
}

.group-4 .hide-group-4 {
  display: none;
}
.group-4 .show-group-4 {
  display: inherit;
}

.show-group-5 {
  display: none;
}

.group-5 .hide-group-5 {
  display: none;
}
.group-5 .show-group-5 {
  display: inherit;
}

.show-group-6 {
  display: none;
}

.group-6 .hide-group-6 {
  display: none;
}
.group-6 .show-group-6 {
  display: inherit;
}

.show-group-7 {
  display: none;
}

.group-7 .hide-group-7 {
  display: none;
}
.group-7 .show-group-7 {
  display: inherit;
}

.show-group-8 {
  display: none;
}

.group-8 .hide-group-8 {
  display: none;
}
.group-8 .show-group-8 {
  display: inherit;
}

.show-group-9 {
  display: none;
}

.group-9 .hide-group-9 {
  display: none;
}
.group-9 .show-group-9 {
  display: inherit;
}

.show-group-10 {
  display: none;
}

.group-10 .hide-group-10 {
  display: none;
}
.group-10 .show-group-10 {
  display: inherit;
}

/* SPECIFIC OVERRIDE */
.category-selon-vos-envies .col1-layout .village-block.large {
  max-width: 100%;
}
.category-selon-vos-envies .col1-layout .village-block .content-block {
  margin-right: 30px;
}
.category-selon-vos-envies .col1-layout .village-block .content-block:nth-child(2n) {
  margin-right: 30px;
}
@media only screen and (max-width: 770px) {
  .category-selon-vos-envies .col1-layout .village-block .content-block:nth-child(2n) {
    margin-right: 0;
  }
}
.category-selon-vos-envies .col1-layout .village-block .content-block:nth-child(3n) {
  margin-right: 0;
}
@media (max-width: 1036px) {
  .category-selon-vos-envies .col1-layout .village-block .content-block:nth-child(3n) {
    margin-right: 30px;
  }
}

.store-cnas .block-account .infos .sun-points,
.store-cgos .block-account .infos .sun-points,
.store-rcgos .block-account .infos .sun-points,
.store-rcnas .block-account .infos .sun-points {
  display: none !important;
}
.store-cnas .block-account .navigation li.tab-accumulated_points,
.store-cgos .block-account .navigation li.tab-accumulated_points,
.store-rcgos .block-account .navigation li.tab-accumulated_points,
.store-rcnas .block-account .navigation li.tab-accumulated_points {
  display: none !important;
}
.store-cnas .page-header-container,
.store-cgos .page-header-container,
.store-rcgos .page-header-container,
.store-rcnas .page-header-container {
  min-height: 40px;
}
.store-cnas #contact-head-block,
.store-cgos #contact-head-block,
.store-rcgos #contact-head-block,
.store-rcnas #contact-head-block {
  float: right;
}
.store-cnas #contact-head-block p, .store-cnas #contact-head-block a,
.store-cgos #contact-head-block p,
.store-cgos #contact-head-block a,
.store-rcgos #contact-head-block p,
.store-rcgos #contact-head-block a,
.store-rcnas #contact-head-block p,
.store-rcnas #contact-head-block a {
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/cgos-sprite.png") 0 0 no-repeat;
  margin-bottom: 20px;
  display: block;
  color: #f26c00;
  padding-left: 27px;
}
.store-cnas #contact-head-block p,
.store-cgos #contact-head-block p,
.store-rcgos #contact-head-block p,
.store-rcnas #contact-head-block p {
  font-weight: bold;
}
.store-cnas #contact-head-block p span,
.store-cgos #contact-head-block p span,
.store-rcgos #contact-head-block p span,
.store-rcnas #contact-head-block p span {
  display: block;
  font-size: 20px;
}
.store-cnas #contact-head-block p span.phone-price,
.store-cgos #contact-head-block p span.phone-price,
.store-rcgos #contact-head-block p span.phone-price,
.store-rcnas #contact-head-block p span.phone-price {
  font-weight: normal;
  font-size: 12px;
}
.store-cnas #contact-head-block a,
.store-cgos #contact-head-block a,
.store-rcgos #contact-head-block a,
.store-rcnas #contact-head-block a {
  text-decoration: underline;
  background-position: 0 -114px;
  padding-bottom: 3px;
}
.store-cnas #header_cgos,
.store-cgos #header_cgos,
.store-rcgos #header_cgos,
.store-rcnas #header_cgos {
  cursor: pointer;
  background: transparent;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.store-cnas #header_cgos:before, .store-cnas #header_cgos:after,
.store-cgos #header_cgos:before,
.store-cgos #header_cgos:after,
.store-rcgos #header_cgos:before,
.store-rcgos #header_cgos:after,
.store-rcnas #header_cgos:before,
.store-rcnas #header_cgos:after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  background-color: #0cbe9e;
  display: inline-block;
  z-index: 1;
}
.store-cnas #header_cgos:before,
.store-cgos #header_cgos:before,
.store-rcgos #header_cgos:before,
.store-rcnas #header_cgos:before {
  left: 0;
  height: 118px;
}
.store-cnas #header_cgos:after,
.store-cgos #header_cgos:after,
.store-rcgos #header_cgos:after,
.store-rcnas #header_cgos:after {
  right: 0;
  height: 100%;
}
.store-cnas #header_cgos #header_cgos_inner,
.store-cgos #header_cgos #header_cgos_inner,
.store-rcgos #header_cgos #header_cgos_inner,
.store-rcnas #header_cgos #header_cgos_inner {
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/header-cgos.jpg") 0 center no-repeat transparent;
  background-size: cover;
  max-width: 990px;
  width: 100%;
  margin: 0 auto;
  height: 190px;
  z-index: 2;
  position: relative;
}
.store-cnas #header_cgos #header_cgos_inner > div,
.store-cgos #header_cgos #header_cgos_inner > div,
.store-rcgos #header_cgos #header_cgos_inner > div,
.store-rcnas #header_cgos #header_cgos_inner > div {
  width: 58%;
  float: right;
}
.store-cnas #header_cgos #header_cgos_inner > div > div,
.store-cgos #header_cgos #header_cgos_inner > div > div,
.store-rcgos #header_cgos #header_cgos_inner > div > div,
.store-rcnas #header_cgos #header_cgos_inner > div > div {
  margin-top: 35px;
  margin-right: 50px;
}
.store-cnas #header_cgos #header_cgos_inner .header_cgos_desc,
.store-cgos #header_cgos #header_cgos_inner .header_cgos_desc,
.store-rcgos #header_cgos #header_cgos_inner .header_cgos_desc,
.store-rcnas #header_cgos #header_cgos_inner .header_cgos_desc {
  position: absolute;
  bottom: 15px;
  left: 240px;
  display: inline-block;
  max-width: 440px;
}
.store-cnas #header_cgos #logo_cgos,
.store-cgos #header_cgos #logo_cgos,
.store-rcgos #header_cgos #logo_cgos,
.store-rcnas #header_cgos #logo_cgos {
  position: absolute;
  top: 10px;
  max-width: 170px;
}
.store-cnas #header_cgos #contact-head-block p,
.store-cgos #header_cgos #contact-head-block p,
.store-rcgos #header_cgos #contact-head-block p,
.store-rcnas #header_cgos #contact-head-block p {
  background-image: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/phone-cgos.png");
  background-position: 0 5px;
  padding-left: 40px;
  color: #fff;
}
.store-cnas #header_cgos #contact-head-block a,
.store-cgos #header_cgos #contact-head-block a,
.store-rcgos #header_cgos #contact-head-block a,
.store-rcnas #header_cgos #contact-head-block a {
  background-image: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/email-cgos.png");
  background-position: 0 0;
  padding-left: 40px;
  color: #fff;
}
.store-cnas #header_cnas,
.store-cgos #header_cnas,
.store-rcgos #header_cnas,
.store-rcnas #header_cnas {
  cursor: pointer;
  width: 100%;
  max-width: 1060px;
  margin: 48px auto 0 auto;
  height: 120px;
  position: relative;
}
.store-cnas #header_cnas #logo_cnas,
.store-cgos #header_cnas #logo_cnas,
.store-rcgos #header_cnas #logo_cnas,
.store-rcnas #header_cnas #logo_cnas {
  margin-left: 35px;
}
.store-cnas #header_cnas img,
.store-cgos #header_cnas img,
.store-rcgos #header_cnas img,
.store-rcnas #header_cnas img {
  display: block;
  width: 189px;
  vertical-align: middle;
  float: left;
}
.store-cnas #header_cnas .header-minicart, .store-cnas #header_cgos .header-minicart,
.store-cgos #header_cnas .header-minicart,
.store-cgos #header_cgos .header-minicart,
.store-rcgos #header_cnas .header-minicart,
.store-rcgos #header_cgos .header-minicart,
.store-rcnas #header_cnas .header-minicart,
.store-rcnas #header_cgos .header-minicart {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.store-cnas #header_cnas .header-minicart a, .store-cnas #header_cgos .header-minicart a,
.store-cgos #header_cnas .header-minicart a,
.store-cgos #header_cgos .header-minicart a,
.store-rcgos #header_cnas .header-minicart a,
.store-rcgos #header_cgos .header-minicart a,
.store-rcnas #header_cnas .header-minicart a,
.store-rcnas #header_cgos .header-minicart a {
  right: -10px;
  top: 5px;
}
.store-cnas #header_cnas .header-minicart a,
.store-cgos #header_cnas .header-minicart a,
.store-rcgos #header_cnas .header-minicart a,
.store-rcnas #header_cnas .header-minicart a {
  right: -80px;
  top: -45px;
}
.store-cnas .skip-links .header-minicart,
.store-cgos .skip-links .header-minicart,
.store-rcgos .skip-links .header-minicart,
.store-rcnas .skip-links .header-minicart {
  display: none;
}
.store-cnas.privateweb-index-index form,
.store-cgos.privateweb-index-index form,
.store-rcgos.privateweb-index-index form,
.store-rcnas.privateweb-index-index form {
  min-height: 340px;
}
.store-cnas.privateweb-index-index label,
.store-cgos.privateweb-index-index label,
.store-rcgos.privateweb-index-index label,
.store-rcnas.privateweb-index-index label {
  margin-right: 15px;
  min-width: 40px;
  text-align: right;
  line-height: 28px;
}
.store-cnas.privateweb-index-index .input-box,
.store-cgos.privateweb-index-index .input-box,
.store-rcgos.privateweb-index-index .input-box,
.store-rcnas.privateweb-index-index .input-box {
  padding-top: 0;
  display: inline-block;
  vertical-align: top;
}
.store-cnas.privateweb-index-index .buttons-set,
.store-cgos.privateweb-index-index .buttons-set,
.store-rcgos.privateweb-index-index .buttons-set,
.store-rcnas.privateweb-index-index .buttons-set {
  padding-left: 55px;
}
.store-cnas.privateweb-index-index .buttons-set button.button,
.store-cgos.privateweb-index-index .buttons-set button.button,
.store-rcgos.privateweb-index-index .buttons-set button.button,
.store-rcnas.privateweb-index-index .buttons-set button.button {
  display: inline-block;
  vertical-align: top;
}
.store-cnas.privateweb-index-index ul.messages,
.store-cgos.privateweb-index-index ul.messages,
.store-rcgos.privateweb-index-index ul.messages,
.store-rcnas.privateweb-index-index ul.messages {
  display: inline-block;
  vertical-align: top;
  margin-left: 15px;
  margin-bottom: 0;
}
.store-cnas.privateweb-index-index ul.messages .error-msg li,
.store-cgos.privateweb-index-index ul.messages .error-msg li,
.store-rcgos.privateweb-index-index ul.messages .error-msg li,
.store-rcnas.privateweb-index-index ul.messages .error-msg li {
  color: #FF0000;
  text-transform: uppercase;
  font-weight: 700;
  border: 0;
  line-height: 32px;
  margin-bottom: 0;
  padding: 0;
  font-size: 14px;
}
.store-cnas.privateweb-index-index ul.messages .error-msg li:before,
.store-cgos.privateweb-index-index ul.messages .error-msg li:before,
.store-rcgos.privateweb-index-index ul.messages .error-msg li:before,
.store-rcnas.privateweb-index-index ul.messages .error-msg li:before {
  border: 0;
}
.store-cnas.privateweb-index-index h1,
.store-cgos.privateweb-index-index h1,
.store-rcgos.privateweb-index-index h1,
.store-rcnas.privateweb-index-index h1 {
  font-weight: 600;
  font-size: 45px;
  color: #f26c00;
}
.store-cnas.privateweb-index-index .buttons-set,
.store-cgos.privateweb-index-index .buttons-set,
.store-rcgos.privateweb-index-index .buttons-set,
.store-rcnas.privateweb-index-index .buttons-set {
  border: 0;
  text-align: left;
}
.store-cnas.privateweb-index-index .buttons-set button.button,
.store-cgos.privateweb-index-index .buttons-set button.button,
.store-rcgos.privateweb-index-index .buttons-set button.button,
.store-rcnas.privateweb-index-index .buttons-set button.button {
  float: none;
  margin: 0;
  font-weight: 600;
  font-size: 14px;
}
.store-cnas.privateweb-index-index .buttons-set .required,
.store-cgos.privateweb-index-index .buttons-set .required,
.store-rcgos.privateweb-index-index .buttons-set .required,
.store-rcnas.privateweb-index-index .buttons-set .required {
  float: none;
  margin: 0;
  color: #373737;
  font-weight: 600;
}
.store-cnas.privateweb-index-index .fieldset p,
.store-cgos.privateweb-index-index .fieldset p,
.store-rcgos.privateweb-index-index .fieldset p,
.store-rcnas.privateweb-index-index .fieldset p {
  font-size: 16px;
  padding-bottom: 20px;
}
.store-cnas.privateweb-index-index .input-box input,
.store-cgos.privateweb-index-index .input-box input,
.store-rcgos.privateweb-index-index .input-box input,
.store-rcnas.privateweb-index-index .input-box input {
  height: 32px;
  line-height: 32px;
  border: 1px solid #d6d6d6;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: inset 1px 1px 1px 0 #ddd;
  -webkit-box-shadow: inset 1px 1px 1px 0 #ddd;
  -o-box-shadow: inset 1px 1px 1px 0 #ddd;
  box-shadow: inset 1px 1px 1px 0 #ddd;
  background: #f8f8f8;
  color: #384043;
}
.store-cnas.privateweb-index-index .input-box input:focus, .store-cnas.privateweb-index-index .input-box input:active, .store-cnas.privateweb-index-index .input-box input:hover,
.store-cgos.privateweb-index-index .input-box input:focus,
.store-cgos.privateweb-index-index .input-box input:active,
.store-cgos.privateweb-index-index .input-box input:hover,
.store-rcgos.privateweb-index-index .input-box input:focus,
.store-rcgos.privateweb-index-index .input-box input:active,
.store-rcgos.privateweb-index-index .input-box input:hover,
.store-rcnas.privateweb-index-index .input-box input:focus,
.store-rcnas.privateweb-index-index .input-box input:active,
.store-rcnas.privateweb-index-index .input-box input:hover {
  outline: none;
}

.store-cgos #header .logo,
.store-cnas #header .logo,
.store-rcgos #header .logo,
.store-rcnas #header .logo {
  display: none;
}
.store-cgos.customer-account-login ul.form-list h3,
.store-cnas.customer-account-login ul.form-list h3,
.store-rcgos.customer-account-login ul.form-list h3,
.store-rcnas.customer-account-login ul.form-list h3 {
  color: #5a8aba;
}
.store-cgos.customer-account-login .col2-set .col-1,
.store-cnas.customer-account-login .col2-set .col-1,
.store-rcgos.customer-account-login .col2-set .col-1,
.store-rcnas.customer-account-login .col2-set .col-1 {
  width: 33%;
  float: right;
}
.store-cgos.customer-account-login .col2-set .col-1 .benefits,
.store-cnas.customer-account-login .col2-set .col-1 .benefits,
.store-rcgos.customer-account-login .col2-set .col-1 .benefits,
.store-rcnas.customer-account-login .col2-set .col-1 .benefits {
  display: none;
}
.store-cgos.customer-account-login .col2-set .col-1.loading,
.store-cnas.customer-account-login .col2-set .col-1.loading,
.store-rcgos.customer-account-login .col2-set .col-1.loading,
.store-rcnas.customer-account-login .col2-set .col-1.loading {
  position: relative;
}
.store-cgos.customer-account-login .col2-set .col-1.loading:before,
.store-cnas.customer-account-login .col2-set .col-1.loading:before,
.store-rcgos.customer-account-login .col2-set .col-1.loading:before,
.store-rcnas.customer-account-login .col2-set .col-1.loading:before {
  content: '';
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/black.png") repeat center center;
  position: absolute;
  width: 106%;
  height: 106%;
  top: -3%;
  left: -3%;
  display: block;
  z-index: 2;
}
.store-cgos.customer-account-login .col2-set .col-1.loading .loader-field,
.store-cnas.customer-account-login .col2-set .col-1.loading .loader-field,
.store-rcgos.customer-account-login .col2-set .col-1.loading .loader-field,
.store-rcnas.customer-account-login .col2-set .col-1.loading .loader-field {
  max-width: 48px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -24px;
  margin-left: -24px;
}
.store-cgos.customer-account-login .col2-set .col-2,
.store-cnas.customer-account-login .col2-set .col-2,
.store-rcgos.customer-account-login .col2-set .col-2,
.store-rcnas.customer-account-login .col2-set .col-2 {
  width: 63%;
  float: left;
  padding-left: 0;
  border-right: 1px solid #ededed;
  border-left: 0;
}
.store-cgos.customer-account-login .col2-set .col-2 input,
.store-cnas.customer-account-login .col2-set .col-2 input,
.store-rcgos.customer-account-login .col2-set .col-2 input,
.store-rcnas.customer-account-login .col2-set .col-2 input {
  max-width: 100%;
}
.store-cgos.customer-account-login .col2-set .registered-users > div > .form-list + h2,
.store-cnas.customer-account-login .col2-set .registered-users > div > .form-list + h2,
.store-rcgos.customer-account-login .col2-set .registered-users > div > .form-list + h2,
.store-rcnas.customer-account-login .col2-set .registered-users > div > .form-list + h2 {
  display: none;
}
.store-cgos.customer-account-login .col2-set .registered-users > div > .form-list + h2 + p,
.store-cnas.customer-account-login .col2-set .registered-users > div > .form-list + h2 + p,
.store-rcgos.customer-account-login .col2-set .registered-users > div > .form-list + h2 + p,
.store-rcnas.customer-account-login .col2-set .registered-users > div > .form-list + h2 + p {
  display: none;
}
.store-cgos.customer-account-login .col2-set .registered-users > div > .form-list + h2 + p + ul > li ~ li,
.store-cnas.customer-account-login .col2-set .registered-users > div > .form-list + h2 + p + ul > li ~ li,
.store-rcgos.customer-account-login .col2-set .registered-users > div > .form-list + h2 + p + ul > li ~ li,
.store-rcnas.customer-account-login .col2-set .registered-users > div > .form-list + h2 + p + ul > li ~ li {
  display: none;
}
.store-cgos.customer-account-login .col2-set .registered-users.col-1 ul li,
.store-cnas.customer-account-login .col2-set .registered-users.col-1 ul li,
.store-rcgos.customer-account-login .col2-set .registered-users.col-1 ul li,
.store-rcnas.customer-account-login .col2-set .registered-users.col-1 ul li {
  padding-left: 0;
}
.store-cgos.customer-account-login .col2-set .registered-users.col-1 ul li:before,
.store-cnas.customer-account-login .col2-set .registered-users.col-1 ul li:before,
.store-rcgos.customer-account-login .col2-set .registered-users.col-1 ul li:before,
.store-rcnas.customer-account-login .col2-set .registered-users.col-1 ul li:before {
  display: none;
}
.store-cgos #header-account.skip-active.logged,
.store-cnas #header-account.skip-active.logged,
.store-rcgos #header-account.skip-active.logged,
.store-rcnas #header-account.skip-active.logged {
  top: -200px;
}
.store-cgos #header-nav,
.store-cnas #header-nav,
.store-rcgos #header-nav,
.store-rcnas #header-nav {
  top: -10px;
}

.store-cnas #contact-head-block,
.store-rcnas #contact-head-block {
  margin-top: -25px;
}
.store-cnas #contact-head-block img,
.store-rcnas #contact-head-block img {
  display: block;
  float: none;
  width: 90px;
  margin-bottom: 10px;
  margin-left: 0;
}
.store-cnas #contact-head-block p,
.store-rcnas #contact-head-block p {
  margin-bottom: 10px;
}
.store-cnas #header-account.skip-active.logged,
.store-rcnas #header-account.skip-active.logged {
  top: -170px;
}

.store-rcgos #contact-head-block p, .store-rcgos #contact-head-block a,
.store-rcnas #contact-head-block p,
.store-rcnas #contact-head-block a {
  background: url("https://www.villagesclubsdusoleil.com/skin/frontend/rwd/vcs/images/rcgos-sprite.png") 0 0 no-repeat;
}
.store-rcgos #contact-head-block a,
.store-rcnas #contact-head-block a {
  background-position: 0 -114px;
}