@import url(normalize.min.css);
@import url(slick.css);
@import url(plugins/tooltipster.css);
@import url(plugins/tooltipster-noir.css);

/* Windows Phone 8 and Internet Explorer 10 Fix */
@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width:auto!important; width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

@font-face {
    font-family: 'TrashHand';
    src: url('fonts/trashhand-webfont.eot');
    src: url('fonts/trashhand-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/trashhand-webfont.woff') format('woff'),
         url('fonts/trashhand-webfont.ttf') format('truetype'),
         url('fonts/trashhand-webfont.svg#trashhandregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Aller';
    src: url('fonts/aller_rg-webfont.eot');
    src: url('fonts/aller_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/aller_rg-webfont.woff') format('woff'),
         url('fonts/aller_rg-webfont.ttf') format('truetype'),
         url('fonts/aller_rg-webfont.svg#allerregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Aller';
    src: url('fonts/aller_bd-webfont.eot');
    src: url('fonts/aller_bd-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/aller_bd-webfont.woff') format('woff'),
         url('fonts/aller_bd-webfont.ttf') format('truetype'),
         url('fonts/aller_bd-webfont.svg#allerbold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Aller';
    src: url('fonts/aller_lt-webfont.eot');
    src: url('fonts/aller_lt-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/aller_lt-webfont.woff') format('woff'),
         url('fonts/aller_lt-webfont.ttf') format('truetype'),
         url('fonts/aller_lt-webfont.svg#aller_lightregular') format('svg');
    font-weight: 200;
    font-style: normal;
}

/*********  Global *********/
.clear { clear:both; }
.blague { display: none; }

body { background:#f5f5f5 url(../files/design/background_page.png) no-repeat 50% 190px !important; font-family: 'Aller'; color:#87888a; padding-top: 0px !important; }
body.alias_home { background:#f5f5f5 url(../files/design/background_home.png) no-repeat 50% 190px !important; }

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

#wrapper { width:1140px; margin:auto; position: relative; }

/********  Header *********/
#header { position: relative; height:160px; }

#logo { margin-top: 45px; }

#menu { position: absolute; right: 0px; bottom: 10px; }
#menu li { float:left; list-style: none; margin-left: 20px; }
#menu li a { position: relative; color: #87888A; text-transform: uppercase; font-size: 14px; font-weight: bold; margin-left:0; display: block; height: 21px; line-height: 19px; padding-left: 30px; }

#menu li a.menu_home { background:url(../files/design/icon_home.png) no-repeat 0% 0%;  }
#menu li a.menu_about { background:url(../files/design/icon_about.png) no-repeat 0% 0%;  }
#menu li a.menu_find_epn { background:url(../files/design/icon_map.png) no-repeat 0% 0%;  }
#menu li a.menu_get_label { background:url(../files/design/icon_label.png) no-repeat 0% 0%;  }
#menu li a.menu_blog { background:url(../files/design/menu_blog_double.png) no-repeat 0% 0%;  }
#menu li a.menu_contact { background:url(../files/design/icon_contact.png) no-repeat 0% 0%;  }

/*#menu li a:after{
        height: 2px; width: 100%; left: 0; background: #a3067b; display: block; position: absolute; content: ""; margin-top: 5px; 
        -webkit-transition: all 500ms ease-out;
        -moz-transition: all 500ms ease-out;
        -ms-transition: all 500ms ease-out;
        -o-transition: all 500ms ease-out;
        transition: all 500ms ease-out;
        opacity: 0
    }
 #menu li a:hover:after, #menu li a.menu_current:after{
        opacity: 1;
}*/

/*#menu li a.menu_current:after{
    opacity: 1;
}*/

#menu li a.menu_about:before {height: 5px; width: 20px; background: #a3067b; display: block; position: absolute;   }
#menu li a.menu_find_epn:before {height: 5px; width: 20px; background: #a3067b; display: block; position: absolute; }
#menu li a.menu_get_label:before { height: 5px; width: 20px; background: #a3067b; display: block; position: absolute;  }
#menu li a.menu_contact:before { height: 5px; width: 20px; background: #a3067b; display: block; position: absolute;  }

#menu li a:hover, #menu li a.menu_current { background-position: 0% 100%; }

/*#menu li a.menu_home:hover, #menu li a.menu_home.menu_current { background:url(../files/design/menu_home_color.png) no-repeat 0% 50%;  }
#menu li a.menu_about:hover, #menu li a.menu_about.menu_current { background:url(../files/design/menu_about_color.png) no-repeat 0% 50%;  }
#menu li a.menu_find_epn:hover, #menu li a.menu_find_epn.menu_current { background:url(../files/design/menu_find_epn_color.png) no-repeat 0% 50%;  }
#menu li a.menu_get_label:hover, #menu li a.menu_get_label.menu_current { background:url(../files/design/menu_get_label_color.png) no-repeat 0% 50%;  }
#menu li a.menu_contact:hover, #menu li a.menu_contact.menu_current { background:url(../files/design/menu_contact_color.png) no-repeat 0% 50%;  }*/

#menu li a.menu_current, #menu li a:hover { color:#a3067b; }
/*#menu li a:focus { background-color:yellow; }*/

#menu_second { position: absolute; right: 0px; top: -30px; }
#menu_second li { margin-left: 15px;  float:left; list-style: none;}
#menu_second li a { /*opacity: 0.5;*/ display:block; padding-left: 43px; width:43px; height: 43px; line-height: 32px; font-family: 'TrashHand'; font-size:17px; color:#87888a; letter-spacing: 1.5px;  position: relative; text-indent: -9900px; }
#menu_second li a.link_youtube { background:url(../files/design/icon-youtube.png) no-repeat 0 0; }
#menu_second li a.link_formation { background:url(../files/design/icon-technofutur-big.png) no-repeat 0 0; }
#menu_second li a.link_ning { background:url(../files/design/icon-ning-big.png) no-repeat 0 0; }
#menu_second li a.link_twitter { background:url(../files/design/icon-twitter-big.png) no-repeat 0 0; }
#menu_second li a.link_blog { background:url(../files/design/icon-blog-big.png) no-repeat 0 0; }
#menu_second li a:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; 
       opacity: 0; position: absolute; top:0; left:0;
       -webkit-transition: opacity 500ms ease-in-out;
        -moz-transition: opacity 500ms ease-in-out;
        -ms-transition: opacity 500ms ease-in-out;
        -o-transition: opacity 500ms ease-in-out;
        transition: opacity 500ms ease-in-out;
}
#menu_second li a:hover:after { opacity: 1; }
#menu_second li a.link_youtube:after { background:url(../files/design/icon-youtube_hover.png) no-repeat 0 0; }
#menu_second li a.link_formation:after { background:url(../files/design/icon-technofutur-big-hover.png) no-repeat 0 0; }
#menu_second li a.link_ning:after { background:url(../files/design/icon-ning-big-hover.png) no-repeat 0 0; }
#menu_second li a.link_twitter:after { background:url(../files/design/icon-twitter-big-hover.png) no-repeat 0 0; }
#menu_second li a.link_blog:after { background:url(../files/design/icon-blog-big-hover.png) no-repeat 0 0; }
/*#menu_second li a:focus { background-color:yellow; }*/

/*********  Footer *********/
#footer { height: 200px; margin-top: 50px; padding-top: 10px; background: url(../files/design/footer_bg.png) repeat-x 0 0;  }
#footer.footer_home { background:none;  }

.tooltipster-epn {
	-webkit-border-radius: 5px;
	border-radius: 5px; 
	border: 3px solid #fff;
	background: #87888A;
	color: #FFFFFF;
	max-width:300px;
	text-align: center;
}
.tooltipster-epn .tooltipster-content {
	font-size: 14px;
	line-height: 16px;
	padding: 8px 10px;
}

#copyright { text-align: center; font-size: 10px; }

/*
#anysurfer { text-align: center; }
#copyright { margin-top: 40px; margin-bottom: 100px; }
#logo_aki { display: block; opacity: 0.5; height:34px; width: 116px; margin: auto;
background: url(../files/design/aki_logo.png) no-repeat 0% 0%;
    -webkit-transition: opacity 500ms ease;
    -moz-transition: opacity 500ms ease;
    -ms-transition: opacity 500ms ease;
    -o-transition: opacity 500ms ease;
    transition: opacity 500ms ease;
}

#copyright #logo_aki:after 
{
    content:''; display:block; width:0%; height:100%; background: url(../files/design/aki_logo_hover.png) no-repeat 0% 0px; 
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
}
#copyright #logo_aki:hover { opacity: 1; }
#copyright #logo_aki:hover:after { width:100%; }
*/

/*********  Homepage *********/
#home_content { position: relative; padding-top: 80px; height:700px; background:url(../files/design/arrow_home.png) no-repeat 0 110px; padding-left: 45px; }

#home_introduction { color:#f5f5f5; font-size: 22px; width:490px; }
#home_nb_epn { font-family: 'TrashHand'; color:#FFFFFF; font-size:30px; letter-spacing: 1.5px; }
#find_epn_button { margin-left: 80px; margin-top: 50px; }
#find_epn_button a { position:relative; background:url(../files/design/find_epn.png) no-repeat 0 0; display: block; width:299px; height:87px; text-indent: -9990px;  }
#find_epn_button a:after { content:''; display:block; width:100%; height:100%; background:url(../files/design/find_epn.png) no-repeat 100% 100%;
opacity:0;
-webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    position: absolute;
    top: 0;
}
#find_epn_button a:hover:after { opacity:1; }
#epn_button_blog { margin-bottom: 40px; text-align: center; }
#epn_button_blog #find_epn_button { margin: 0; /*margin-left: 25px;*/ }

#mac { position:absolute; right:-47px; top:-30px; width:700px; height:746px; }
#mac img.mac { position: absolute; width: 100%; }
#mac_slider { position:relative; top: 0px; left: 0px; width: 100%; height:100%; }
#mac_glare { position: absolute; top: 0px; left: 0px; z-index: 2000; width:100%; height:100%; }
#mac_glare img { width: 100%; }

#home_sponsors { margin-top: 60px; padding: 0; width: 1140px; margin: auto; margin-bottom: 60px; height: 130px; }
#home_sponsors li { position: relative; list-style: none; width: 25%; float: left;  font-size: 12px; text-transform: uppercase; 
	text-align: center; }
#home_sponsors li.sponsor_last { }
#home_sponsors li img { display: block; margin: auto; }
#home_sponsors li .footer_item { display: inline-block; position: relative; margin: auto; }
#home_sponsors li .footer_item img.color { position: absolute; top: 0px; left:0; opacity: 0;
-webkit-transition: all 300ms ease-in;
-moz-transition: all 300ms ease-in;
-ms-transition: all 300ms ease-in;
-o-transition: all 300ms ease-in;
transition: all 300ms ease-in;
 }
#home_sponsors li .footer_item:hover img.color { opacity: 1; }
#home_sponsors li p { margin: 44px 0px; padding-right: 10px; }

/*********  Internal *********/
#page_content { min-height: 400px; }
#page_content h1 { color:#FFFFFF;  font-family: 'TrashHand'; letter-spacing: 1.5px; font-size:35px; margin: 35px 0px; font-weight: normal;  }
#page_content h1 a { color:#FFFFFF; font-family: 'Aller'; font-size: 20px; }

#col_left, #col_right { width:548px; min-height: 1px; float:left; }

#page_content #col_left {  font-size:16px; line-height: 23px; margin-right: 44px; }
#page_content h2 { position:relative; color:#a3067b; min-height: 30px; font-size:25px; font-weight: normal; margin-top: 0px; }
#page_content h2:before { content:''; display: block; position:absolute; left: -20px; width:6px; height:100%; background: #a3067b; -webkit-border-radius: 10px; border-radius: 10px; }
#page_content h3 { color:#a3067b; font-size:19px; font-weight: normal; margin-top: 24px; margin-bottom: 5px;  }
#page_content p { margin-top: 0; }
#page_content p.headline { font-weight: bold; }

#col_right .graph { background: #FFF; width:100%; margin-bottom: 20px; text-align: center; padding:30px; }
#col_right .graph img { width:100%; }

#page_content .block { background-color: white; padding: 25px; -moz-box-shadow: 0px 0px 4px 1px #DBDBDB; -webkit-box-shadow: 0px 0px 4px 1px #DBDBDB; box-shadow: 0px 0px 4px 1px #DBDBDB; -webkit-border-radius: 5px; border-radius: 5px; }
#page_content .block.article { padding-bottom: 0px; }
.fb_iframe_widget_fluid { display: block; }
.fb-comments span { margin-top: 20px; }
#page_content .block.block_search { height:230px; }
#page_content .block.block_search#block_search_map {
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out; }

#page_content .block.block_search#block_search_map:hover { 
    cursor:pointer;
    -moz-box-shadow: 0px 0px 10px 2px #A3067B; 
    -webkit-box-shadow: 0px 0px 10px 2px #A3067B;
    box-shadow: 0px 0px 10px 2px #A3067B; 
}
#page_content .block h2 {  }
#page_content .block.block_search h2 { background: none; left:0px; padding-left: 0px; }
#page_content .block.block_search h2:before { display: none; }
#page_content .block.block_image { padding:5px; margin-bottom: 30px; }
#page_content .block.block_image img { width:100%; display: block; }

/******* Find EPN ***********/
/****************************/
#epn_results { margin-top: 50px; }
#page_content p.letter_alpha { background:#a3067b; font-size:40px; color:#ffffff; -webkit-border-radius: 100%; border-radius: 100%; display: block; margin: auto; width:60px; height:60px; line-height: 60px; text-align: center; font-weight: 200; }
#page_content .block.block_commune { margin: 20px 0px; padding: 10px 0px; text-align: center; }
#page_content .block.block_commune#block_map_inner { padding: 0px; }
#page_content .block.block_commune h2 { margin:0; display: inline; }

#form_localite_wrapper { text-align: center; }
#form_localite { display: inline-block; margin: auto; margin-top: 20px; }
#search_localite { width: 270px; height: 60px; background: #c2c2c3; padding: 10px; color:white; border:none; -webkit-border-radius: 5px; border-radius: 5px; }
#search_localite::-webkit-input-placeholder { color:white; }
#search_localite:-moz-placeholder { color:white; }
#submit_localite { background: #a3067b url(../files/design/search_localite.png) no-repeat 50% 50%; padding: 10px; color:white; border:none; -webkit-border-radius: 5px; border-radius: 5px; width:80px; height: 60px; text-indent: -9900px;  }
#map_interactive { text-align: center; }

.results_commune { text-align: center; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.results_commune p.address { font-weight: bold; font-size: 16px; }

#block_map { height:0px; overflow: hidden; } 
#block_map_inner { margin-bottom: 20px; } 
#block_map iframe { width: 100%; } 

/******* Blog ***********/
/****************************/
.block_right_blog { margin-bottom: 40px; }

#page_content .block#current_search { padding: 10px; /*background: yellow;*/ }
.search_close { float: right; display: block; width:24px; height: 24px; background: url(../files/design/search_close.png) no-repeat 0 0; }

.list_categories { float: left; /*width: 50%;*/ margin: 0; padding: 0; padding-left: 20px; }
.blog_author { font-size:12px; position: relative; top: -10px; }
#block_blog_search { position: relative; }
#block_blog_search form { position: relative; }
#block_blog_search input.text { width: 100%; padding: 7px; border: 2px solid #CECECE; outline:none; }
#block_blog_search input.text:focus { border: 2px solid #A3067B;  }
#block_blog_search input.btn { position: absolute; right:5px; top:50%; margin-top: -12px; background: url(../files/design/epn_search.png) no-repeat 0 0; width:24px; height: 24px; text-indent: -9900px; }
#page_content #block_listing_categories h2:before, #page_content #block_same_articles h2:before { display: none; }
#page_content #block_listing_categories a { color: #87888A; }
#page_content #block_listing_categories a:hover { color: #A3067B; }
#page_content ul { padding-left: 20px; }

#block_same_articles ul { list-style: none; padding-left: 10px; }
#block_same_articles li { margin-bottom: 10px; }
#block_same_articles li a { position: relative; font-size: 21px; color: #87888A; }
#block_same_articles li a:hover { color: #A3067B; }
#block_same_articles li a:before { content:''; display: block; position:absolute; left: -20px; width:7px; height:100%; background: #a3067b; -webkit-border-radius: 10px; border-radius: 10px; }

.article { margin-bottom: 40px; }
#page_content .article h2 { margin-bottom: 0px; margin-left: 20px; font-weight: bold; margin-bottom: 40px; }
#page_content .article h3 { font-family: 'Aller'; color: #A3067B;  font-size: 20px; font-weight: normal;
margin: 10px 0px; }
.article_content { margin: 10px 0px; font-size: 15px; line-height: 22px; }
.article_author { margin: 0; text-align: left; font-size: 13px; line-height: 30px; }
.article_pic {  }

#page_content #col_left.col_left_blog     { width:65%; margin-right: 5% }
#page_content #col_right.col_right_blog   { width: 30%; }

#block_cc { text-align: center;}
#block_cc p { margin: 0; }

#page_content ul.btn_share { padding: 0; margin: 0; }
#page_content ul.btn_share li {  list-style: none; margin: 0; padding: 0; float:left; padding-right: 10px; }
#page_content ul.btn_share li.share_first { position: relative; top: -3px; }

#page_content .block#block_blog_rss { padding:0;  }
#page_content .block#block_blog_rss a { display: block; background: #FFF url(../files/design/rss-icon-48.png) no-repeat 20px 50%;  width: 100%; line-height: 48px; padding: 10px 20px 10px 80px; }
#page_content .block#block_blog_rss a:hover { background-color: #F8F8F8; }

/******* Contact ***********/
/****************************/

#page_content #contact_page .headline { font-size: 16px; font-weight: 200;  }
#contact_page h2 { color:#a3067b; font-size: 16px; font-weight: bold; line-height: 16px; min-height: 0; margin: 20px 0px; }
#contact_page h2:before { display: none; }
#contact_page .btn { padding: 7px 8px; background: #f5f5f5; border:2px solid #a3067b; color: #a3067b; -webkit-border-radius: 5px; border-radius: 5px; display: inline-block; height: 43px; }
#contact_page .btn:hover { background: white; }
#contactForm .error {color:red;}
#contactForm label, #contactForm .formOutro { display: inline-block; width:150px; }
#contactForm .formCourt, #contactForm .formLarge { padding:0px 0px 15px; }
#contactForm .error { padding:0px; }
#contactForm input[type=text], #contactForm textarea { width: 100%; background: #A3067B; border: 2px solid #A3067B; padding: 10px; -webkit-border-radius: 5px; border-radius: 5px; outline: none; color: #FFF; }
#contactForm label.contactMissing { color:red; }
#contactForm input[type=text].contactMissing, #contactForm textarea.contactMissing { background: #FFA8A8; border: 2px solid #F00; }
#contactForm input[type=text]:focus, #contactForm textarea:focus { border: 2px solid #9E9E9E; }
#contactForm input[type=text]:-moz-placeholder, #contactForm textarea:-moz-placeholder { color: #FFF;}
#contactForm input[type=text]::-webkit-input-placeholder, #contactForm textarea::-webkit-input-placeholder { color: #FFF; }
#contactForm textarea { height:140px; }
#contact_page #col_right { line-height: 20px; }
#contact_page #col_right #find_epn_button { margin-left: 0px; }
#contact_page #col_right a { color: #87888A; }
#contact_page #col_right a:hover { color: #A3067B; }
#contact_page #contactForm .btn { float: right; }

/*.fb_iframe_widget_fluid > span { height: 100px !important; }*/
.btn { background: #A3067B; color: #FFF; padding: 5px 10px; border: none; }

.captchaContainer {
    background: #fff;
    border-radius: 5px;
    float:left;
    margin-right: 20px;
    margin-bottom: 15px;
}

#contactForm .form_captcha label {
    width: 240px;
    clear: both;
    display: block;
}


/*** 15/09/2020 ***/
.home_illu {
    position: absolute;
    top: -10px;
    right: 0;
    width: 660px;
}

.contact_persos {
    width: 210px;
    margin-top: 30px;
    margin-left: 60px;
}

.label_illu {
    text-align: center;
}
.label_illu img {
    width: 300px;
}

/******* Media Queries ******/
/****************************/

@media screen and (max-width: 1140px) {
 
    #wrapper { width:100%; overflow: hidden;  padding: 0px 20px;}

    /* Home */
    #home_introduction, #mac { width:50%; }
    #mac { margin-right: 30px; }
}

@media screen and (max-width: 1000px) {
    body { background: #F5F5F5 !important; }
    body.alias_home {background: #F5F5F5 !important; }

    #header { height:auto;}
    #logo { margin: 50px 0px; text-align: center; }

    #menu_wrapper { text-align: center; }
    #menu_second { position: absolute; right: 0px; top: -60px; }
    #menu { display:inline-block; position: relative;right: auto;bottom: auto;padding: 0; height: 30px; }
    #menu li { margin: 0px 10px; }

    #home_introduction { text-align: center; }
    #home_introduction, #mac {width: 100%;}
    .home_illu { display: none; }
    #mac { display: none; }
    #home_content { padding: 20px; background: #A3067B; height: auto; margin-top: 20px; }
    #home_nb_epn {text-align: center;}
    #find_epn_button { margin: 0; }
    #find_epn_button a {margin: auto; width: 100%; }

    #epn_results { margin-top: 20px; }
    #home_sponsors li { width:100%; margin:0; margin-bottom: 20px; }
    #home_sponsors li.sponsor_last { margin: 0; }

    #page_content h1 {background: #A3067B;margin: 0;padding: 5px;padding-left: 20px;margin-bottom: 20px;position: relative;left: -20px;width: 120%;}

    #col_left, #col_right { width:100%; }

    #page_content .block.block_search { margin-bottom: 20px; }
    #page_content .block.block_search {height: auto;}
}

@media screen and (max-width: 480px) {
    
    #menu { height: auto; }
    #menu li {float: none;margin-left: 0px;text-align: center;}

    #menu_second li a, #menu_second li a:hover, #menu_second li a:after { font-size: 19px; background: none !important; padding-left: 0; }
    /*#menu_second li a.link_twitter { background: none; padding-left: 0; }
    #menu_second li a.link_ning { background: none; padding-left: 0; }
    #menu_second li a.link_blog { background: none; padding-left: 0; }*/

    #footer { height: auto; }
    #home_sponsors { width: 100%; }

    #page_content #col_left.col_left_blog, #page_content #col_right.col_right_blog, .article_pic { width: 100%; margin: 0%; }

}