@charset "UTF-8";

/* Base styles*/
html { overflow-y: auto; }
html, body { height: 100%; }
body { color: #636363; font-size: 14px; line-height: 1.571em; font-family: Arial, Helvetica, Verdana, sans-serif; -webkit-font-smoothing: antialiased; position: relative; }

h1, h2 { color: #636363; font-family: 'OSP-DIN'; line-height: 0.9em; font-weight: normal; text-transform: uppercase; }
h1 { font-size: 60px; letter-spacing: -1px; }
h2 { font-size: 30px; }
h3 { font-family: ropa; font-size: 18px; line-height: 20px; font-weight: normal; text-transform: uppercase; }
p, ul, ol { margin: 0 0 1.571em; }
ul, ol { padding-left: 1.25em; }
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
hr { border-color: #636363; clear: both; }
blockquote { display: inline-block; margin-bottom: 20px; color: #828282; font-style: italic; font-weight: bold; }
blockquote p { margin-bottom: 1em; }
blockquote strong { font-size: 1.25em; color: #4d4d4d; }
em { font-style: italic; }

a, a:visited { color: #ff0000; }
a:hover { text-decoration: none; }

/* Commons */
.clear { clear: both; }
.clear.large { height: 5px; }
.fleft { float: left; }
.fright { float: right; }
.center { text-align: center; }

.group:after {
  content: "";
  display: table;
  clear: both;
}

.col { float: left; }

/* Wrapper */
.wrapper { min-height: 100%; }

/* Header */
.header { height: 45px; padding: 30px 0 10px 0; text-align: right; }
.l_display .header { width: 960px; margin: 0 auto; padding-left: 56px; }
.s_display .header { width: 726px; margin-left: 272px; }
.header .facebook { display: block; width: 20px; height: 20px; margin-top: 5px; background: url('/static/images/frontend/facebook_icon.png') center center no-repeat; text-align: left; text-indent: -9999em; float: right; }

/* Footer */
.footer { width: 100%; height: 21px; margin-top: -45px; padding: 12px 0; background: #e7e8e9; font-size: 12px; text-transform: uppercase; clear: both; }

/* small display specific */
.s_display .wrapper { width: 1024px; margin: 0 auto; }
.s_display .wrapper .aside { float:left; }
.s_display .wrapper .content { float: left; width: 726px; padding-left: 30px; padding-bottom: 80px; }
.s_display .footer > div { width: 726px; padding-left: 298px; margin: 0 auto; }

/* large display specific */
.l_display .wrapper .aside { position: fixed; left: 0; }
.l_display .wrapper .content { width: 960px; padding-left: 56px; padding-bottom: 80px; margin: 0 auto; }
.l_display .footer > div { width: 960px; padding-left: 56px; margin: 0 auto; }

/* Aside & navigation */
.wrapper > .aside { width: 242px; text-align: center; line-height: 1em; }
.wrapper > .aside .navigation { width: 240px; margin: 35px 1px 0 1px; padding: 0; border-top: 1px solid #4d4d4d; list-style-type: none; }
.wrapper > .aside .navigation li { font-family: ropa; font-size: 18px; line-height: 20px; border-bottom: 1px solid #4d4d4d; text-transform: uppercase;  }
.wrapper > .aside .navigation li a { display: block; padding: 12px 0 11px; text-decoration: none; color: #4d4d4d; }
.wrapper > .aside .navigation li:hover a, .wrapper > .aside .navigation li.on a { background-color: #828282; color: #fff; }

/* Content */
.wrapper .content { min-height: 720px; }
.page_title { min-height: 166px; padding: 115px 0 20px; text-align: center; }
.page_title h1 { margin-bottom: 0; }
.page_title h2 { font-size: 18px; font-family: ropa; text-transform: uppercase; }

/* Accueil */
.home_banner { width: 100%; margin-bottom: 40px; }
.home_banner img, .home_banner a { max-width: 100%; display: block; }
.s_display .home_banner img { width: 726px; }
.home_content .col { width: 47%; }
.home_content .col.left { margin-right: 6%; }
.home_content .col_head { padding: 12px 0 11px; border-top: 1px solid #636363; font-size: 18px; font-family: ropa; text-transform: uppercase; letter-spacing: 0; }
.home_content .col_head .archives { font-size: 12px; float: right; color: #636363; font-family: Arial, Helvetica, Verdana, sans-serif; text-transform: none; }

.home_content .col_head .events_icons { display: block; width: 19px; height: 18px; margin-left: 10px; text-indent: -9999em; outline: none; background-image: url('/static/images/frontend/calendar_tabs.png'); background-repeat: no-repeat; float: right; }
.home_content .col_head .icon_calendar { background-position: -19px 0; }
.home_content .col_head .icon_calendar:hover { background-position: -19px -18px; }
.home_content .col_head .icon_list { background-position: 0 0; }
.home_content .col_head .icon_list:hover { background-position: 0 -18px; }

.home_content #liste ul { border-top: 0; }
.home_content #liste ul li { padding: 20px 0; border-bottom: 0; border-top: 1px solid #636363; }
.home_content #liste ul li div[data-content='start'] { width: 100%; margin-bottom: 3px; padding: 0; font-size: 12px; line-height: 1.25em; font-family: Arial, Helvetica, Verdana, sans-serif; text-align: left; text-transform: none; float: none; }
.home_content #liste ul li h2 { width: 100%; font-family: ropa; font-size: 18px; line-height: 1.2em; float: none; }

.home_content #listeNouvelles ul li { padding: 20px 0; }
.home_content #listeNouvelles ul li div[data-content='start'] { width: 100%; margin-bottom: 3px; padding: 0; font-size: 12px; line-height: 1.25em; font-family: Arial, Helvetica, Verdana, sans-serif; text-align: left; text-transform: none; float: none; }
.home_content #listeNouvelles ul li h2 { width: 100%; font-family: ropa; font-size: 18px; line-height: 1.2em; float: none; }

#listeNouvelles ul { margin: 0; padding: 0; list-style-type: none; }
#listeNouvelles ul li { padding: 32px 0; border-top: 1px solid #636363; font-size: 18px; font-family: ropa; text-transform: uppercase;  }
#listeNouvelles ul li h2 { width: 50%; font-weight: normal; float: left;}
#listeNouvelles ul li div[data-content='start'] { width: 49%; padding-left: 1%; text-align: right; float: left; }
#listeNouvelles ul li a { color: #4d4d4d; }
#listeNouvelles ul li a:hover { text-decoration: none; }

#listeNouvelles ul li.event_class div[data-content='start'], .event_header .event_class { color: #ff0000; }
#listeNouvelles ul li.event_competition div[data-content='start'], .event_header .event_competition { color: #0000cc; }
#listeNouvelles ul li.event div[data-content='start'], .event_header .event { color: #00a651; }
#listeNouvelles ul li.event_parascolaire div[data-content='start'], .event_header .event_parascolaire { color: #FF9900; }
#listeNouvelles ul li.event_sport div[data-content='start'], .event_header .event_sport { color: #EECE00; }

.home_content .feed.facebook { margin-bottom: 60px; padding: 0; list-style-type: none; }
.home_content .feed.facebook > li { padding: 15px 0; border-top: 1px solid #636363; font-size: 14px; line-height: 1.571em; }
.home_content .feed.facebook > li .post_date { margin-bottom: 8px; font-family: ropa; text-transform: uppercase; }
.home_content .feed.facebook > li .infos { margin-bottom: 5px; }
.home_content .feed.facebook > li .image { max-width: 154px; margin: 0 20px 5px 0; float: left; }
.home_content .feed.facebook .feed_link { white-space: pre-wrap; }

.home_content #calendrier { display: none; }

.s_display .fb-like-box iframe { width: 339px !important; }
.l_display .fb-like-box iframe { width: 452px !important; }

/* À propos */
.about_selector { padding: 0; list-style-type: none; }
.about_selector li { color: #dcddde; font-size: 115px; font-family: 'OSP-DIN'; line-height: 0.85em; text-align: center; text-transform: uppercase; cursor: pointer; }
.about_selector li:hover { color: #636363; }

.about_section { display: none; position: relative; }
.about_section .close { width: 44px; height: 44px; text-align: left; text-indent: -9999em; background: #f5f5f6 url('/static/images/frontend/cross.png') center center no-repeat; cursor: pointer; position: absolute; right: 0; top: 0; z-index: 2; }
.section_banner { margin-bottom: 40px; position: relative; }
.section_banner > img { display: block; }
.section_banner h1 { width: 100%; margin-top: -0.5em; position: absolute; left: 0; top: 50%; color: #fff; font-size: 48px; text-align: center; }
.section_content { -moz-column-count: 2; -moz-column-gap: 50px; -webkit-column-count: 2; -webkit-column-gap: 50px; }

/* Nouvelles */
.news_header .btn_back { font-size: 12px; }
.news_header .btn_back > span { display: inline-block; width: 14px; height: 11px; margin-right: 5px; text-indent: -9999em; background: url('/static/images/frontend/arrows_small.png') 0 -11px no-repeat; cursor: pointer; vertical-align: middle; }
.news_header h1 { margin-bottom: 5px; }

/* Vidéos */
#video_player { display: none; margin-bottom: 40px; }
#video_player > iframe { width: 100%; margin-bottom: 5px; }
.l_display #video_player > iframe { height: 540px; }
.s_display #video_player > iframe { height: 425px; }

.video_list { padding: 0; list-style-type: none; }
.video_list li { margin: 0 0 20px 15px; float: left; cursor: pointer; }
.video_list li:nth-child(3n+1) { margin-left: 0; clear: left; }
.video_list li:hover .video_title { color: #ff0000; }
.l_display .video_list li { width: 310px; }
.s_display .video_list li { width: 232px; }
.video_list .video_thumb { margin-bottom: 5px; text-align: center; }
.video_list .video_thumb img { max-width: 100%; }
.video_list .video_title { font-family: ropa; font-size: 18px; line-height: 1.1em; text-transform: uppercase; }

/* Calendrier */
.page_title .date { width: 260px; margin: 15px auto 0; padding: 0 20px; color: #4d4d4d; font-family: ropa; font-size: 18px; text-transform: uppercase;  position: relative; }
.page_title .date .arrow { display: block; width: 14px; height: 11px; border: 5px solid #fff; text-indent: -9999em; background-image: url('/static/images/frontend/arrows_small.png'); background-repeat: no-repeat; cursor: pointer; position: absolute; top: -2px;
	user-select: none;
	-webkit-user-select: none;
    -moz-user-select: none; 
    -ms-user-select: none;
}
.page_title .date .arrow.prev { background-position: 0 0; left: 0; }
.page_title .date .arrow.prev:hover { background-position: 0 -11px; }
.page_title .date .arrow.next { background-position: -14px 0; right: 0; }
.page_title .date .arrow.next:hover { background-position: -14px -11px; }

.tabs .tabs-header { padding: 12px 0 11px; border-top: 1px solid #636363; color: #4d4d4d; font-family: ropa; font-size: 18px; text-transform: uppercase; }
.tabs .tabs-header > ul { float: right; margin: 0; list-style-type: none; }
.tabs .tabs-header > ul > li { margin-left: 10px; float: left; }
.tabs .tabs-header > ul > li a { display: block; width: 19px; height: 18px; text-indent: -9999em; outline: none; background-image: url('/static/images/frontend/calendar_tabs.png'); background-repeat: no-repeat; }
.tabs .tabs-header > ul > li a[href='#calendrier'] { background-position: -19px 0; }
.tabs .tabs-header > ul > li a[href='#calendrier']:hover,
.tabs .tabs-header > ul > li.ui-tabs-active a[href='#calendrier'] { background-position: -19px -18px; }
.tabs .tabs-header > ul > li a[href='#liste'] { background-position: 0 0; }
.tabs .tabs-header > ul > li a[href='#liste']:hover,
.tabs .tabs-header > ul > li.ui-tabs-active a[href='#liste'] { background-position: 0 -18px; }

#liste ul { padding: 0; border-top: 1px solid #636363; list-style-type: none; }
#liste ul li { padding: 32px 0; border-bottom: 1px solid #636363; font-size: 18px; font-family: ropa; text-transform: uppercase;  }
#liste ul li h2 { font-weight: normal; float: left;}
#liste ul li div[data-content='start'] { width: 49%; padding-left: 1%; text-align: right; float: left; }
#liste ul li a { color: #4d4d4d; }
#liste ul li a:hover { text-decoration: none; }

#liste ul li.event_class div[data-content='start'], .event_header .event_class { color: #00a651; }
#liste ul li.event_competition div[data-content='start'], .event_header .event_competition { color: #0000cc; }
#liste ul li.event div[data-content='start'], .event_header .event { color: #ff0000; }
#liste ul li.event_parascolaire div[data-content='start'], .event_header .event_parascolaire { color: #ff9900; }
#liste ul li.event_sport div[data-content='start'], .event_header .event_sport { color: #EECE00; }

/* Évènement */
.event_header .btn_back { font-size: 12px; }
.event_header .btn_back > span { display: inline-block; width: 14px; height: 11px; margin-right: 5px; text-indent: -9999em; background: url('/static/images/frontend/arrows_small.png') 0 -11px no-repeat; cursor: pointer; vertical-align: middle; }
.event_header h1 { margin-top: 20px; font-size: 115px; }
.event_header h2 { font-family: ropa; text-transform: none; }
.event_header h2 strong { font-family: 'OSP-DIN'; font-weight: normal; text-transform: uppercase; }

/* Fullcalendar custom styles */
.fc .fc-day-header { padding: 12px 0 11px; border-left: 0; border-right: 0; color: #4d4d4d; font-family: ropa; font-size: 18px; font-weight: normal; text-transform: uppercase;  }
.fc .fc-widget-header, .fc .fc-day { border-color: #636363; }
.fc .fc-first { border-left: 0; }
.fc .fc-last { border-right: 0; }
.fc tr.fc-last td { border-bottom: 0; }
.fc .fc-grid .fc-day-number { padding: 3px 5px 0 5px; color: #4d4d4d; font-family: ropa; font-size: 16px; text-transform: uppercase;  float: left; }
.fc .fc-grid .fc-other-month .fc-day-number { opacity: 0.4; filter: alpha(opacity=40); }
.fc .fc-today { background: #eeeeee; }
.fc .fc-today .fc-day-number { /*text-decoration: underline;*/ }

.fc .fc-event { background: #fff; font-family: ropa; font-size: 14px; text-transform: uppercase;  cursor: pointer; }
.fc .fc-event.event_class { border-color: #00a651; color: #00a651; }
.fc .fc-event.event_competition { border-color: #0000cc; color: #0000cc; }
.fc .fc-event.event { border-color: #ff0000; color: #ff0000; }
.fc .fc-event.event_parascolaire { border-color: #ff9900; color: #ff9900; }
.fc .fc-event.event_sport { border-color: #EECE00; color: #EECE00; }

/* Tarifs et inscription */
.prices_table { width: 100%; margin-bottom: 0.5em; }
.prices_table th { background: #f5f5f6; }
.prices_table th, .prices_table td {  font-family: ropa; font-size: 18px; text-align: left; text-transform: uppercase; }
.prices_table th { padding: 12px 0 10px; font-weight: normal; }
.prices_table td { padding: 12px 0; font-size: 0.95em; }
.prices_table td:first-child { text-align: left; font-weight: bold; }
.prices_table + hr { margin: 0 !important; }
.prices_table + hr + p { font-size: 0.8em; }

.prices strong, .prices h3 { font-size: 18px; font-family: ropa; font-weight: normal; text-transform: uppercase; }
.prices strong.no-format { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 14px; font-weight: bold; text-transform: none; }
.prices h3 { margin: 0 0 0.5em; }
.prices hr { margin: 2em 0; }
.prices .form_link { font-size: 40px; letter-spacing: -1px; color: #636363; font-family: 'OSP-DIN'; line-height: 0.9em; font-weight: normal; text-align: center; text-transform: uppercase; text-decoration: none; }
.prices .form_link:hover { color: red; }

/* Subscription: General */
form.subscription { padding-top: 20px; border-top: 1px solid #636363; }
form.subscription h3 { padding: 5px; border-bottom: 1px solid #636363; background: #F5F5F6; }
form.subscription h3.active { background: #828282; color: #FFF; }
form.subscription .step > div { padding: 5px; border-bottom: 1px solid #636363; }
form.subscription .description { font-size: 0.9em; line-height: 1.4em; background: #f5f5f6; padding: 10px; margin: 5px 0 10px -2px; }
form.subscription p { margin: 0; font-size: 0; }
form.subscription label, form.subscription h3 { font-family: ropa; font-size: 17px; font-weight: normal; text-transform: uppercase;  }
form.subscription label { display: inline-block; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
form.subscription label + input + label { text-align: right; padding: 0 5px 0 0; }
form.subscription input[type="text"],
form.subscription input[type="email"] { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; background: #f5f5f6; margin: 0 ; padding: 13px 10px; border: 0; outline: 0; color: #636363; font-size: 14px; line-height: 18px; }
form.subscription label.error { color: red; }
form.subscription input.error { border: 1px red solid; background: #FFEFEF; color: red; }
form.subscription div.last { border-bottom: 1px solid #636363; margin: 0 }

/* Subscription: Select2 custom styles */
form.subscription .select2-container { margin-left: -1px; }
form.subscription .select2-container .select2-choice { height: auto; margin: 0; padding: 13px 50px 13px 10px; background-image: none; filter: none; background: #f5f5f6; border: 0; outline: 0; border-radius: 0; -moz-border-radius: 0; -webkit-border-radius: 0; font-size: 14px; line-height: 18px; }
form.subscription .select2-container .select2-choice .select2-arrow { width: 40px; height: 30px; margin-top: -15px; top: 50%; background: transparent; background-image: none; filter: none; border-left: 1px solid #acacac; }
form.subscription .select2-container .select2-choice .select2-arrow b { background: url('/static/images/frontend/select.png') center center no-repeat !important; }
form.subscription .select2-container-active .select2-choice { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.select2-drop.select2-drop-active { border: 0; }
.select2-drop.select2-drop-active .select2-highlighted { background: #636363; }

/* Subscription: iCheck custom styles */
form.subscription .icheckbox_minimal { float: left; }
form.subscription .icheckbox_minimal + label { padding-left: 5px; width: auto !important; font-size: 0.9em; }

/* Subscription: Step options */
form.subscription .options { float: right; margin-top: 5px; }
form.subscription .options > div { float: left; padding: 0 5px; margin-left: 15px; background: #f5f5f6; font-family: ropa; font-size: 16px; line-height: 24px; text-transform: uppercase; cursor: pointer; }
form.subscription .options > div:hover { background: #828282; color: #fff; }
form.subscription .options > div.disabled { cursor: default; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; }
form.subscription .options > div.disabled:hover { background: #f5f5f6; color: #636363;}

/* Subscription: Step 1 */
form.subscription .step_1 label { width: 25%; }
form.subscription .step_1 input[type=text] { width: 25%; }
form.subscription .step_1 .full input { width: 74%; }
form.subscription .step_1 .subscriptions_list .item { position: relative; padding-top: 5px; border-top: 1px solid #636363; }
form.subscription .step_1 .subscriptions_list .item:first-child { border-top: 0; }
form.subscription .step_1 .subscriptions_list .item > div { margin-bottom: 5px; }
form.subscription .step_1 .subscriptions_list .item > div.price { position: absolute; right: 5px; top: 170px; font-size: 1.4em; }
form.subscription .step_1 .subscriptions_list .item > div.price span.label { margin-right: 10px; text-transform: uppercase; font-size: 0.5em; }
form.subscription .step_1 .subscriptions_list .item > div.delete { display: none; margin-bottom: 0; background: #F5F5F6; text-transform: uppercase; font-size: 0.8em; text-align: center; cursor: pointer; }
form.subscription .step_1 .subscriptions_list .item > div.delete:hover { background: #828282; color: #fff; }

form.subscription .step_1 .total { padding: 5px; margin-top: 5px; font-size: 1.4em; font-weight: bold; text-align: right; text-transform: uppercase; background: #F5F5F6; }
form.subscription .step_1 .total > span.label { margin-right: 10px; text-transform: uppercase; font-size: 0.5em; }

/* Subscription: Step 2 */
form.subscription .step_2 fieldset > div { margin-bottom: 5px; }
form.subscription .step_2 label { width: 15%; }
form.subscription .step_2 input[type=text] { width: 34%; }
form.subscription .step_2 #postalcode{ text-transform: uppercase; }
form.subscription .step_2 .full input { width: 84%; }
form.subscription .step_2 .radio_cont { padding: 5px 0 10px 0; }
form.subscription .step_2 .radio_cont > label { font-size: 0.9em; margin-bottom: 5px; }
form.subscription .step_2 .radio_cont > div { width: auto; float: left; }
form.subscription .step_2 .radio_cont > div .iradio_minimal { float: left; }
form.subscription .step_2 .radio_cont > div label { width: auto; margin: 0 30px 0 5px; }

/* Subscription: Step 3 */
form.subscription .step_3 > div { position: relative; }
form.subscription .step_3 .infos_facturation { margin: 5px 0; padding: 5px 0; border-bottom: 1px solid #636363; }
form.subscription .step_3 .infos_facturation h4 { font-size: 1.2em; text-transform: uppercase; font-family: ropa; }
form.subscription .step_3 .infos_facturation div { font-size: 0.9em; line-height: 1.5em; }
form.subscription .step_3 table { width: 100%; }
form.subscription .step_3 table thead tr { border-bottom: 1px solid #636363; }
form.subscription .step_3 table thead th { padding: 5px; font-family: ropa; font-weight: normal; text-transform: uppercase; text-align: center; }
form.subscription .step_3 table thead tr > th:first-child { text-align: left; }
form.subscription .step_3 table tbody tr { border-top: 1px solid #636363; }
form.subscription .step_3 table tbody tr:first-child { border: 0; }
form.subscription .step_3 table tbody td { text-align: center; padding: 5px; vertical-align: middle; }
form.subscription .step_3 table tbody tr > td:first-child { text-align: left; font-size: 0.8em; line-height: 1.0em; }
form.subscription .step_3 table tbody tr.total { background: #F5F5F6; border: 0; }
form.subscription .step_3 table tbody tr.total td { padding-top: 15px; font-size: 0.8em; font-weight: bold; text-transform: uppercase; text-align: right; }
form.subscription .step_3 table tbody tr.total td span { font-size: 1.7em; margin-left: 10px; }
form.subscription .step_3 .options .next_step { background: #828282; color: #fff; }

/* Paypal */
form.subscription .paypal { margin-top: 15px; text-align: center; }

/* Contact */
#map_canvas { height: 470px; margin: 0 auto 26px; }
#map_canvas img { max-width: none; }
.contact_info { -moz-column-count: 2; -moz-column-gap: 50px; -webkit-column-count: 2; -webkit-column-gap: 50px; }
.contact_info strong { font-size: 18px; font-family: ropa; font-weight: normal; text-transform: uppercase; }

/* Datepicker styles override */
.ui-datepicker,
.ui-datepicker .ui-datepicker-header { border-radius: 0 !important; -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; -khtml-border-radius: 0 !important; }
.ui-datepicker .ui-datepicker-header { background-color: #828282 !important; border-color: #828282 !important; background-image: none !important; }
.ui-datepicker .ui-datepicker-calendar thead th { font-family: ropa; }
.ui-datepicker .ui-state-default { background-image: none !important; background-color: #f5f5f6 !important; border-color: #f5f5f6 !important; }
.ui-datepicker .ui-state-highlight { border-color: #828282 !important; background-color: #828282 !important; color: #fff !important; }
.ui-datepicker .ui-state-default:hover { border-color: #828282 !important; }