/* Theme Name:France Digitale Theme URI:http://www.spin-interactive.com/ Author:SPIN INTERACTIVE TEAM Author URI:http://www.spin-interactive.com/ Description:France Digitale thème Version:1.0 Text Domain:frdigitale */ /************************************************************************************************************************** TO READ THIS CSS : 1 - GENERAL 2 - SOUS MODULES 3 - BLOCS 4 - GENERAL PAGE 5 - SPECIFIC PAGES 6 - MEDIA QUERIES 7 - ANIMS **************************************************************************************************************************/ /*************************************************************/ /************************** 1 ********************************/ /*********************** GENERAL *****************************/ /*************************************************************/ /** GENERAL - RESET CSS **/ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0; font-size:100%; font:inherit; vertical-align:baseline; margin:0; padding:0; -webkit-tap-highlight-color:rgba(0, 0, 0, 0);}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}table{border-collapse:collapse; border-spacing:0;}textarea:focus,input[type="text"]:focus{outline:none;}*{outline:none;} /** FONTS **/ @font-face {font-family:'cabin'; src:url('fonts/cabin-medium-webfont.eot'); src:url('fonts/cabin-medium-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/cabin-medium-webfont.woff') format('woff'), url('fonts/cabin-medium-webfont.ttf') format('truetype'), url('fonts/cabin-medium-webfont.svg#cabin') format('svg'); font-weight:normal; font-style:normal; } @font-face {font-family:'cabin'; src:url('fonts/cabin-italic-webfont.eot'); src:url('fonts/cabin-italic-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/cabin-italic-webfont.woff') format('woff'), url('fonts/cabin-italic-webfont.ttf') format('truetype'), url('fonts/cabin-italic-webfont.svg#cabin') format('svg'); font-weight:normal; font-style:italic; } @font-face {font-family:'titillium'; src:url('fonts/titilliumweb-light-webfont.eot'); src:url('fonts/titilliumweb-light-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/titilliumweb-light-webfont.woff') format('woff'), url('fonts/titilliumweb-light-webfont.ttf') format('truetype'), url('fonts/titilliumweb-light-webfont.svg#titilliumweb') format('svg'); font-weight:normal; font-style:normal; } @font-face {font-family:'titillium-semibold'; src:url('fonts/titilliumweb-semibold-webfont.eot'); src:url('fonts/titilliumweb-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/titilliumweb-semibold-webfont.woff') format('woff'), url('fonts/titilliumweb-semibold-webfont.ttf') format('truetype'), url('fonts/titilliumweb-semibold-webfont.svg#titilliumweb') format('svg'); font-weight:normal; font-style:normal; } @font-face {font-family:'fdfont'; src:url('fonts/fdfont.eot'); src:url('fonts/fdfont.eot?#iefix') format('embedded-opentype'), url('fonts/fdfont.woff') format('woff'), url('fonts/fdfont.ttf') format('truetype'), url('fonts/fdfont.svg#fdfont') format('svg'); font-weight:normal; font-style:normal; } /** GENEREAL **/ html, body{font-family:"titillium"; color:#2d3036; font-size:20px; line-height:1.2em; width:100%; height:100%; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; text-rendering:optimizeLegibility; position:relative;} h1{font-size:54px; line-height:98px; text-transform:uppercase; letter-spacing:0.2em; color:white; font-family:"cabin";} h2{font-size:36px; line-height:54px; text-transform:uppercase; letter-spacing:0.2em; font-family:"cabin";} h3{font-size:36px; line-height:54px; text-transform:uppercase; letter-spacing:0.2em; font-family:"cabin";} h4{font-size:37px; line-height:1.2em;} hr{width:75px; margin:40px auto; border:0; border-top:2px solid #2d3036;} hr.big{margin:55px auto;} strong{font-weight: bold;} .image hr.border-white{border-top:2px solid white;} .image hr, hr.transparent{border-top:2px solid rgba(0, 0, 0, 0);} a,a:hover{color:inherit; text-decoration:none;} .desktop a{transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .fdfont{font-family:"fdfont";} .color-placeholder{color:#bfbfbf!important;} input[type="text"],input[type="submit"],input[type="button"] textarea, select {-webkit-appearance:none;} form textarea{font-size:14px; line-height:normal; padding:12px;} form input{font-size:14px; line-height:55px; padding:0 12px; font-size:17px; box-sizing: border-box;} .ie9 form input{height:55px;} form input[type="submit"]{text-transform:uppercase; font-size:14px;} form input{border:none; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;} blockquote{quotes: "\201C""\201D""\2018""\2019"; position:relative;} blockquote:before{font-family:Arial; content:open-quote; font-size:9em; position:absolute; left:-2.5rem; top:0.5rem;} blockquote:after{font-family:Arial; content:close-quote; font-size:9em; position:absolute; right:-2.5rem; bottom:-2.5rem;} .logo-orange-frandedi{float:left; width:100%; text-align:center; margin:48px 0 -32px 0;} .kill_padding_top{padding-top:0!important;} /* il y a un important car le padding top est ajouté en js */ .hidden-text{clear:both;float:left;width:100%;text-align: center;display: none;} .continue-reading{clear:both;float:left;position:relative;z-index:2;width:100%;margin-top:20px;margin-bottom:0px;text-align: center;-webkit-box-shadow:0px -60px 120px 30px rgba(255,255,255,1);-moz-box-shadow:0px -60px 120px 30px rgba(255,255,255,1);box-shadow:0px -60px 120px 30px rgba(255,255,255,1);} .continue-reading [role="button"]{cursor: pointer;} .no-visible{visibility: hidden;} .sn_link{cursor:pointer;} /*************************************************************/ /************************** 2 ********************************/ /********************* SOUS MODULES **************************/ /*************************************************************/ /** SOUS MODULE BUTTON **/ a[role="button"]{text-decoration:none; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; padding:0 20px; text-transform:uppercase; letter-spacing:0.025em; font-family:"cabin"; display:inline-block; height:55px; font-size:14px; line-height:55px; vertical-align:middle; min-width:210px; cursor:pointer;} a[role="button"].orange{background:#f2903f; color:white;} .desktop a[role="button"].orange:hover{background:#e86a13;} a[role="button"].blue{background:#268ece; color:white;} .desktop a[role="button"].blue:hover{background:#1c6b9b;} a[role="button"].transparent{background:white; color:#2d3036; border:2px solid white;} .desktop a[role="button"].transparent:hover{border:2px solid white; color:white; background:none;} /** SOUS MODULE RESEAU SOCIAUX **/ .rs-picto{padding:10px; font-size:18px; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; color:white;} .desktop .rs-picto:hover{color:white;} .fb_back{background:rgba(62, 91, 153, 1); color:white; border:2px solid #3E5B99; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .tw_back{background:rgba(58, 188, 220, 1); color:white; border:2px solid #3ABCDC; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .in_back{background:rgba(2, 116, 179, 1); color:white; border:2px solid #0274b3; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .sl_back{background:rgba(12, 169, 171, 1); color:white; border:2px solid #0CA9AB; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .dm_back{background:rgba(204, 24, 30, 1); color:white; border:2px solid #CC181E; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .it_back{background:rgba(108, 171, 54, 1); color:white; border:2px solid #6cab36; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .dl_back{background:rgba(234, 86, 28, 1); color:white; border:2px solid #ea561c; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .is_back{background:rgba(248, 127, 46, 1); color:white; border:2px solid #F87F2E; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .desktop .fb_back:hover{background:rgba(62, 91, 153, 0); color:#3E5B99;} .desktop .tw_back:hover{background:rgba(58, 188, 220, 0); color:#3ABCDC;} .desktop .in_back:hover{background:rgba(2, 116, 179, 0); color:#0274b3;} .desktop .sl_back:hover{background:rgba(12, 169, 171, 0); color:#0CA9AB;} .desktop .dm_back:hover{background:rgba(204, 24, 30, 0); color:#CC181E;} .desktop .it_back:hover{background:rgba(108, 171, 54, 0); color:#6cab36;} .desktop .dl_back:hover{background:rgba(234, 86, 28, 0); color:#ea561c;} .desktop .is_back:hover{background:rgba(248, 127, 46, 0); color:#F87F2E;} .desktop .image .fb_back:hover{background:rgba(255, 255, 255, 1); color:#3E5B99;} .desktop .image .tw_back:hover{background:rgba(255, 255, 255, 1); color:#3ABCDC;} .desktop .image .in_back:hover{background:rgba(255, 255, 255, 1); color:#0274b3;} .desktop .image .sl_back:hover{background:rgba(255, 255, 255, 1); color:#0CA9AB;} .desktop .image .dm_back:hover{background:rgba(255, 255, 255, 1); color:#CC181E;} .desktop .image .it_back:hover{background:rgba(255, 255, 255, 1); color:#6cab36;} .desktop .image .dl_back:hover{background:rgba(255, 255, 255, 1); color:#ea561c;} .desktop .image .is_back:hover{background:rgba(255, 255, 255, 1); color:#F87F2E;} /** SOUS MODULE 3 COLONNES **/ ul.by3{float:left; width:100%; font-size:0; line-height:0; text-align:center;} ul.by3 li{display:inline-block; width:31%; margin:0 1%; vertical-align:top; padding:5px 0 15px 0;text-align: center;} ul.by3 li .round-img{display: inline-block; overflow:hidden; position:relative; width:90%; max-width: 210px; margin:0 5%; background-size:cover; background-position:center center; background-repeat:no-repeat; -webkit-border-radius:1000px; -moz-border-radius:1000px; border-radius:1000px;} ul.by3 li .round-img img{width:100%;} ul.by3 li .round-img span{opacity:0;font-size:100px;color:#FFFFFF;font-weight:900;position:absolute; left:0; top:0; width:100%; padding-bottom:40%;padding-top:45%; height:15%; background:rgba(38, 142, 206, 0.5); -webkit-border-radius:1000px; -moz-border-radius:1000px; border-radius:1000px; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .desktop ul.by3 li:hover .round-img span{opacity:1;} ul.by3 li .titre{/*margin-top:20px;*/font-family:"titillium-semibold"; font-size:20px; line-height:1em; padding:15px 0; min-height:40px; color:#268ece;} ul.by3 li .text{font-size:16px; line-height:1.2em;} /** SOUS MODULE 3 COLONNES BONC PLANS **/ ul.by3.bonsplans{font-size:24px; line-height:1.3em;} ul.by3.bonsplans li{width:30%; margin:0 1% 50px 1%; padding:30px 0; background:white; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; color:#1e2531} ul.by3.bonsplans li figure{width:90%; margin:0 5%; height:130px; text-align:center;} ul.by3.bonsplans li figure img{max-width:100%; max-height:100%; display:inline-block; vertical-align:center;} ul.by3.bonsplans li p{display:inline-block; width:90%; margin:0 5%;} ul.by3.bonsplans li .title{font-size:20px; line-height:24px; height:50px; margin:20px 5% 0 5%; font-family:"titillium-semibold";} ul.by3.bonsplans li .desc{font-size:16px; line-height:24px; margin:5px 5% 0 5%; min-height:120px;} ul.by3.bonsplans li a{font-size:16px; line-height:normal; margin:0; color:#268ece;} ul.by3.bonsplans li .remise{font-size:14px; line-height:normal; margin:10px 5%;} ul.by3.bonsplans li .remise span{font-size:35px; line-height:35px;} ul.by3.bonsplans li .code{font-size:12px; line-height:normal;} ul.by3.bonsplans li .code input{padding:5px 10px; margin:0 5px; border:1px solid #d4d4d4; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; cursor:text;} /** SOUS MODULE 4 COLONNES **/ ul.by4{float:left; width:100%; font-size:0; line-height:0; text-align:center;} ul.by4 li{display:inline-block; width:22%; margin:0 1%; vertical-align:top; padding:5px 0 15px 0;} ul.by4 li .fdfont{font-size:60px; line-height:100px;} ul.by4 li .square-img{max-width:100%; height:auto;} ul.by4 li .title{font-family:"titillium-semibold"; font-size:20px; line-height:1em; padding:15px 0;} ul.by4 li .sub_title{font-family:"cabin"; font-size:14px; line-height:1em; text-transform:uppercase; letter-spacing:0.05em; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto; word-wrap: break-word; overflow:hidden;} ul.by4 li .little_sub_title{font-family:"cabin"; font-size:14px; line-height:1.2em;margin-top:10px;} ul.by4 li a[role="button"]{max-width:100%; margin:15px 0; padding:15px 20px; box-sizing:border-box; min-height:55px; height:auto; line-height:25px;} /** SOUS MODULE 5 COLONNES **/ ul.by5{float:left; width:100%; font-size:0; line-height:0; text-align:center;} ul.by5 li{display:inline-block; width:16%; margin:0 2%; vertical-align:middle; position:relative;} .desktop ul.by5 li:hover .color-img{opacity:1;} ul.by5 li img{max-width:100%;} ul.by5 li .color-img{width:100%; height:100%; position:absolute; left:0; top:0; opacity:0; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} /** SOUS MODULE CITATION **/ ul.citation{float:left; width:100%; text-align:center; font-size:0; line-height:0;padding-bottom:40px;} ul.citation li{display:inline-block; width:70%; vertical-align:middle;} ul.citation li.arrow{width:10%; margin:0 3% 0 2%; cursor:pointer;} ul.citation li.arrow:first-child{margin:0 2% 0 3%;} ul.citation li.citation-item{display:none;} ul.citation li:nth-child(2){display:inline-block;} ul.citation .slogan{font-size:24px; line-height:1.3em;} ul.citation .autor{font-size:24px; font-family:'titillium-semibold'; padding:15px 0 0 0; line-height:1.3em;} /* SOUS-MODULE FILTERS STYLE */ .filter{float:left; width:100%; margin:0 0 50px 0; text-align:center; line-height:0; font-size:0;} .filter .filters{display:inline-block; margin:20px 0;} .filter .filters li{display:inline-block; padding:17px 20px 15px 20px; font-family:"cabin"; font-size:14px; line-height:20px; text-transform:uppercase; letter-spacing:0.05em; cursor:pointer; border-bottom:3px solid rgba(39, 141, 205, 0.5); transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .image .filter .filters li{border-bottom:3px solid rgba(31, 37, 49, 0.5);} .desktop .filter .filters li:hover,.filter .filters li.selected{border-bottom:3px solid rgba(39, 141, 205, 1);} .desktop .image .filter .filters li:hover,.image .filter .filters li.selected{border-bottom:3px solid rgba(31, 37, 49, 1);} .filtering_list .content .load{float:left; width:100%; text-align:center; display:none;} .filtering_list .content .load.loading{display:block;} /* .image .filters li{border-bottom:3px solid rgba(255, 255, 255, 0.5);} .image .filter .filters li.selected{border-bottom:3px solid rgba(255, 255, 255, 1);} .image .filter .filters:hover li, .filter .filters:hover li.selected{border-bottom:3px solid rgba(255, 255, 255, 0.5);} .image .filter .filters:hover li:hover, .filter .filters:hover li.selected:hover{border-bottom:3px solid rgba(255, 255, 255, 1);} */ /** SOUS MODULE MESSAGE BOX????? **/ .message-box{clear:both; float:left; width:100%; background:#FFFFFF; color:#000000; font-family:'cabin'; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;} .message-box.success{background:#25c119; color:#FFFFFF;} .message-box.error{background:#FFFFFF; color:#cb3636;} .message-box .title{clear:both; float:left; width:100%; text-align:center; padding:20px 0px; font-size:18px;} .message-box ul{clear:both; float:left; width:100%; text-align:left; margin-bottom:20px; margin-top:-10px;} .message-box ul li{clear:both; float:left; margin:15px 40px 0px 40px; font-size:15px; line-height:normal;} .message-box ul li:before{content:'- ';} /*************************************************************/ /************************** 3 ********************************/ /************************ BLOCS ******************************/ /*************************************************************/ /** BLOC EN 2 PARTIES */ #main>article.by2 .left{float:left; width:45%; margin:0 5% 0 0;} #main>article.by2 .right{float:right; width:45%; margin:0 0 0 5%;} #main>article.by2-loc .left{float:left; width:21%; text-align:center;} #main>article.by2-loc .right{float:right; width:79%;} /** BLOC PUSH INTRO **/ #intro{float:left; width:100%; position:relative; background:grey; z-index:1;} #intro>div{position:absolute; width:100%; height:100%; left:0; top:0; background-size:cover; background-position:center center; opacity:0; transition:all .5s linear; -webkit-transition:all .5s linear;} #intro>div.active{opacity:1; visibility:visible;} #intro .back_img{z-index:0; visibility:hidden;} #intro .push-overlay{z-index:1;opacity: 1;} .bloc_intro{float:left; position:relative; width:90%; padding:0 5%; color:#2d3036; background-size:cover; background-position:center center; z-index:2;} .bloc_intro *{line-height:1.3em;} .bloc_intro>span{display:inline-block; vertical-align:middle; text-align:center; width:100%;} .bloc_intro>span *{line-height:1.3em;} .bloc_intro ul{position:relative; float:left; width:100%; text-align:center; line-height:0; font-size:0; margin:60px 0 0 0;} .bloc_intro ul li{display:inline-block; margin:20px;} .bloc_intro ul li a{display:inline-block; height:55px; font-size:14px; line-height:55px; vertical-align:middle;} .bloc_intro ul li h1{text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);} .bloc_intro ul li .title{text-shadow: 0px 0px 10px rgba(0, 0, 0, 1); font-size:54px; text-transform:uppercase; letter-spacing:0.2em; color:white; font-family:"cabin";} .bloc_intro ul li .sub_title{font-size:28px; line-height:34px; font-style:italic; font-family:"cabin"; text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);} .bloc_intro .push-slide{float:left; width:100%; text-align:center; font-size:0; line-height:0;} .bloc_intro .push-slide li{display:inline-block; width:73%; vertical-align:middle; opacity:0; visibility:hidden; transition:all .5s linear; -webkit-transition:all .5s linear;} .bloc_intro .push-slide li.active{opacity:1; visibility:visible;} .bloc_intro .push-slide li.absolute{position:absolute; left:13%; width:74%; margin:20px 0;} .bloc_intro .push-slide li.arrow{width:7%; margin:0 3% 0 2%; cursor:pointer; text-shadow: 0px 0px 10px rgba(0, 0, 0, 1); opacity:1; visibility:visible} .bloc_intro .push-slide li.arrow:first-child{margin:0 2% 0 3%;} .bloc_intro .push-slide li.arrow span{font-size:50px; line-height:50px;} .bloc_intro .push-slide li.text-intro{margin:0;} .bloc_intro .push-slide li:nth-child(2){display:inline-block;} .bloc_intro .buttons{float:left; position:relative; width:100%;} .bloc_intro .buttons ul{opacity:0; visibility:hidden; transition:all .5s linear; -webkit-transition:all .5s linear;} .bloc_intro .buttons ul.active{opacity:1; visibility:visible;} .bloc_intro .buttons ul.absolute{position:absolute; top:0;} .bloc_intro ul.arrow{position:absolute; bottom:8%; margin:0; left:0;z-index:2; text-shadow: 0px 0px 10px rgba(0, 0, 0, 1);} .bloc_intro ul.arrow li{margin:0; color:#FFFFFF;} .bloc_intro ul.arrow li span{display:block; width:65px; height:65px; line-height:67px; font-size:23px; border-radius:67px; border:2px solid rgba(255, 255, 255, 0.5); font-family:'fdfont'; cursor:pointer; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .desktop .bloc_intro ul.arrow li:hover span{background:rgba(255, 255, 255, 1); border:2px solid rgba(255, 255, 255, 1); color:#1f2531; text-shadow: 0px 0px 10px rgba(0, 0, 0, 0);} /** BLOC ABOUT **/ .bloc_about{background:white; text-align:center;} .bloc_about ul{margin:55px 0 0 0;} .bloc_about time{line-height:2em; color:#888888; font-family:'titillium-semibold';} .bloc_about p{padding:0 0 15px 0; width:82%; margin:0 9%; line-height:1.42em;} .bloc_about p iframe{max-width:100%!important;} .bloc_about img{max-width:100%; height:auto; margin:40px 0;} .bloc_about ul{list-style-type:disc;} .bloc_about ul li{} .bloc_about ol{list-style-type:decimal;} .bloc_about ol li{} .bloc_about a{color:#c6600c;} .bloc_about strong, .bloc_about b{font-family:'titillium-semibold';} .bloc_about .about_links{position:absolute; right:5%; top:-30px; font-size:0; line-height:0;} .bloc_about .about_links li{display:inline-block; font-size:20px; line-height:20px; padding:10px; margin:0 5px; cursor:pointer; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} /** BLOC NEWS **/ .bloc_news{background:white; text-align:center; z-index:-1;} .bloc_news ul{margin:20px 0 30px;} /* PAGE EDITO */ .bloc_newsletter {background:#268ece; text-align:center;} .bloc_newsletter form{width:100%; margin:0;} .bloc_newsletter form input {width:45%; margin:0 1% 35px 1%;} .ie11 .bloc_newsletter form input[type="email"],.ie10 .bloc_newsletter form input[type="email"]{padding-bottom:20px;} .ie11 .bloc_newsletter form input, .ie10 .bloc_newsletter form input {line-height:23px; padding:15px 19px;} .bloc_newsletter form input[type="submit"]{width:auto;text-decoration:none; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; padding:0 20px; text-transform:uppercase; letter-spacing:0.025em; font-family:"cabin"; display:inline-block; height:55px; font-size:14px; line-height:55px; vertical-align:top; min-width:210px;cursor: pointer;background:#f2903f; color:white; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .desktop .bloc_newsletter form input[type="submit"]:hover{background:#e86a13;} .bloc_newsletter .response{font-size:16px;margin-top:-14px;} .bloc_newsletter ul{display:inline-block; width:100%; text-align:center; } .bloc_newsletter ul li{display:inline-block; font-size:35px; line-height:35px; margin:0 8px;} .bloc_newsletter ul li span{cursor:pointer; display:block; font-size:35px; line-height:35px; padding:15px;} /** TIMER / PROGRAM > TIMER **/ .timer {width:100%; font-size:0; line-height:0;} .timer li {display:inline-block; width:200px; height:150px; margin:12px; padding:25px 0; text-align:center; background:rgba(0,0,0, 0.5); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;} .timer li .number{font-size:71px; line-height:normal; vertical-align:middle;} .timer li.nb-days-container .number{color:#f2903f; vertical-align:middle;} .timer li.nb-hours-container .number{color:#268ece; vertical-align:middle;} .timer li .label{font-size:32px; line-height:normal; font-weight:normal;} /** TIMER / PROGRAM > PROGRAM **/ .bloc_program{text-align:center; background-image:url("images/program.jpg"); background-size:cover; background-position:center center;} /** BLOC SPEAKERS **/ .bloc_speakers{text-align:center; background-color:#268ece;} .bloc_speakers ul.by4 li .sub_title{color:#125077;} .page_event .bloc_speakers ul{margin:12px 0 0 0;} .page_program .bloc_speakers{background-image:url('images/backArrowDownWhite.png'); background-position:center -1px; background-repeat:no-repeat;} /** BLOC TELECHARGEMENT **/ .page_event .bloc_download{background:#268ece; text-align:center;} .page_event .bloc_sponsors{background:white;} /** BLOC SOCIALS NETWORKS **/ .bloc_social{text-align:center;} .bloc_social img{color:#464646; padding-bottom:38px; max-width:100%;} .bloc_social .right, .bloc_social .left{text-align:center;} .bloc_social .right iframe, .bloc_social .left iframe{margin:0 auto;} /** BLOC LOCATION **/ .bloc_location{float:left; background:#268ece; width:100%!important; position:relative; color:#FFFFFF!important; padding:0!important;} .bloc_location .address{float:left; width:30%; text-align:center;} .mobile .bloc_location .address{padding-top:107px; padding-bottom:107px;} .bloc_location .map{width:70%; position:absolute; right:0; height:100%; z-index:1;} .bloc_location .map .google-maps-antiscroll{background:transparent; position:absolute; width:100%; height:490px; bottom:0px; left:0; z-index:2;} .bloc_location .title-society{font-family:"cabin"; font-size:18px; line-height:1em; text-transform:uppercase; letter-spacing:0.2em; padding:0 0 19px 0;} .bloc_location p{font-size:20px; line-height:1.5em; padding:0;} .bloc_location a {margin-top:10px;margin-bottom:10px;} .bloc_location p.fdfont{font-size:47px; padding-top:26px; line-height:1em; padding-bottom:0px;} .bloc_location iframe{position:absolute; width:100%; height:100%;} /** BLOC SPONSORS **/ .bloc_sponsors{background-color:#faf9f9; text-align:center;} .bloc_sponsors ul{margin-top:40px;} .bloc_sponsors li img{width:100%;} /** BLOC MOSAIC **/ .bloc_mosaic{float:left; width:100%; position:relative; background:url('images/bandeau-mosaic.jpg') repeat-x; height:250px;} /** BLOC MEDIAS QUOTES **/ .bloc_media{text-align:center; background-color:#f2903f;} .mobile .bloc_media{padding-top:107px; padding-bottom:0!important;} /** BLOC INSCRIPTION **/ #main>article.bloc_inscription{float:left;width:100%;text-align:center;position: static;width: 100%;padding: 0!important;} .bloc_inscription .register, .bloc_inscription .speaker{float: left;text-align: center;width: 50%;padding:37px 0; cursor:pointer;border-right:1px solid #b4b4b4;border-bottom:1px solid #b4b4b4;background-color:#faf8f6; height:26px;} .bloc_inscription.solo .register{width:100%;} .bloc_inscription .register{margin-left:-1px;} .bloc_inscription .speaker{border-right:0;} .desktop .bloc_inscription .register:hover,.desktop .bloc_inscription .speaker:hover,.bloc_inscription .selected{background-color:#4b4b4b;color:white;} .bloc_inscription h3{font-size:24px; padding:0 15px;} #main .bloc_inscription .inscription-part{display:none;clear:both;float:left;background-color:#faf8f6;width:100%;padding: 77px 0;opacity: 1;height:auto;} .bloc_inscription .register-part,.bloc_inscription .speaker-part{clear:both;float:left;display:inline-block;width:100%;text-align: center;opacity: 0;} .bloc_inscription .register-part iframe{display:inline-block;width:600px;min-height:270px;} .bloc_inscription .speaker-part .speaker-part-container{display:inline-block;width:37%;} /* .bloc_inscription .speaker-part form{display:block;width:100%;} .bloc_inscription .speaker-part form p{clear:both;float:left;width:100%;} .bloc_inscription .speaker-part form input, .bloc_inscription .speaker-part form textarea{clear:both;float:left;width:100%;padding:12px 12px;-webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;font-family:"cabin";font-size:17px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} .ie11 .bloc_inscription .speaker-part form input, .bloc_inscription .speaker-part form textarea{line-height:17px;} .ie9 .bloc_inscription .speaker-part form input{padding:0 12px;} .bloc_inscription .speaker-part form input[type="text"], .bloc_inscription .speaker-part form input[type="email"],.bloc_inscription .speaker-part form textarea{display:inline-block;margin-bottom:25px;border:1px solid #c5c5c3;} .bloc_inscription .speaker-part form textarea{min-height:200px;} .bloc_inscription .speaker-part form input[type="submit"]{border:0;background:#268ece; color:#FFFFFF;cursor: pointer } .bloc_inscription .speaker-part form input[type="text"].error,.bloc_inscription .speaker-part form input[type="email"].error,.bloc_inscription .speaker-part form textarea.error{background:#cb3636;color:white;} .bloc_inscription .speaker-part form input::-webkit-input-placeholder,.bloc_inscription .speaker-part form textarea::-webkit-input-placeholder {color:#bfbfbf!important;} .bloc_inscription .speaker-part form input:-moz-placeholder,.bloc_inscription .speaker-part form textarea:-moz-placeholder {color:#bfbfbf!important;} .bloc_inscription .speaker-part form input::-moz-placeholder,.bloc_inscription .speaker-part form textarea::-moz-placeholder {color:#bfbfbf!important;} .bloc_inscription .speaker-part form input:-ms-input-placeholder,.bloc_inscription .speaker-part form textarea:-ms-input-placeholder {color:#bfbfbf!important;} .bloc_inscription .speaker-part form input.error::-webkit-input-placeholder,.bloc_inscription .speaker-part form textarea.error::-webkit-input-placeholder {color:#FFFFFF;} .bloc_inscription .speaker-part form input.error:-moz-placeholder,.bloc_inscription .speaker-part form textarea.error:-moz-placeholder {color:#FFFFFF;} .bloc_inscription .speaker-part form input.error::-moz-placeholder,.bloc_inscription .speaker-part form textarea.error::-moz-placeholder {color:#FFFFFF;} .bloc_inscription .speaker-part form input.error:-ms-input-placeholder,.bloc_inscription .speaker-part form textarea.error:-ms-input-placeholder {color:#FFFFFF;} .bloc_inscription .message-box,.bloc_inscription .message-box ul{display:none;} */ .bloc_inscription form{display:block; width:100%; margin:0 0;} .bloc_inscription form ul{float:left; width:100%; margin:50px 0 25px;} .bloc_inscription form ul li{text-align:left; margin:25px 1% 0 1%; width:30%; height:55px; padding:0 20px; display:inline-block; vertical-align:middle; background:#268ece; font-family:"cabin"; font-size:14px; line-height:55px; color:white; letter-spacing:0.025em; text-transform:uppercase; cursor:pointer; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} .bloc_inscription form ul li input[type="radio"]{width:14px; height:14px; margin:0 10px 0 0; display:inline-block; float:none; vertical-align:middle;} .ie10 .bloc_inscription form ul li input[type="radio"], .ie9 .bloc_inscription form ul li input[type="radio"]{width:auto; height:auto;} .bloc_inscription form ul li span{width:70%;display:inline-block; vertical-align:middle;} .bloc_inscription form ul li.selected{background:#1c6b9b;} .desktop .bloc_inscription form ul li:hover{background:#1c6b9b;} .desktop .bloc_inscription form ul li.selected:hover{background:#1c6b9b;} .bloc_inscription form p{clear:both; float:left; width:100%;} .bloc_inscription form input,.bloc_inscription form textarea{clear:both; float:left; width:100%; margin:0 2%; font-size: 18px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; font-family:"cabin"; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .bloc_inscription form input[type="text"],.bloc_inscription form input[type="email"],.bloc_inscription form textarea{display:inline-block; margin-bottom:13px; margin-top:13px; border:1px solid #c5c5c3;} .ie11 .bloc_inscription form input[type="text"], .ie11 .bloc_inscription form input[type="email"], .ie11 .bloc_inscription form textarea{padding-bottom:31px;} .ie .bloc_inscription form input[type="text"], .ie .bloc_inscription form input[type="email"], .ie .bloc_inscription form textarea{height:55px;} .bloc_inscription form textarea{min-height:200px;} .bloc_inscription form .error_msg{float:left; width:96%; margin:15px 2% 20px; background:#cb3636; color:white; padding:10px 0; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;} .bloc_inscription form input[type="submit"]{border:0; background:#268ece; color:#FFFFFF; cursor:pointer; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .desktop .bloc_inscription form input[type="submit"]:hover{background:#1c6b9b;} .bloc_inscription form input[type="text"].error,.bloc_inscription form input[type="email"].error,.bloc_inscription form textarea.error{background:#cb3636; color:white;} .bloc_inscription form input::-webkit-input-placeholder,.bloc_inscription form textarea::-webkit-input-placeholder {color:#bfbfbf!important;} .bloc_inscription form input:-moz-placeholder,.bloc_inscription form textarea:-moz-placeholder {color:#bfbfbf!important;} .bloc_inscription form input::-moz-placeholder,.bloc_inscription form textarea::-moz-placeholder {color:#bfbfbf!important;} .bloc_inscription form input:-ms-input-placeholder,.bloc_inscription form textarea:-ms-input-placeholder {color:#bfbfbf!important;} .bloc_inscription form input.error::-webkit-input-placeholder,.bloc_inscription form textarea.error::-webkit-input-placeholder {color:#FFFFFF;} .bloc_inscription form input.error:-moz-placeholder,.bloc_inscription form textarea.error:-moz-placeholder {color:#FFFFFF;} .bloc_inscription form input.error::-moz-placeholder,.bloc_inscription form textarea.error::-moz-placeholder {color:#FFFFFF;} .bloc_inscription form input.error:-ms-input-placeholder,.bloc_inscription form textarea.error:-ms-input-placeholder {color:#FFFFFF;} .bloc_inscription form .error-contact{font-size:14px;display:inline-block;} .bloc_inscription form .champ-oblig{font-size:14px;text-align:left;padding:17px;} .bloc_inscription .message-box,.bloc_inscription .message-box ul{display:none;} /* BLOC CATEGORY */ .bloc_category{background:#faf8f6;} .bloc_category .content article{opacity:0; float:left; width:70%; margin:50px 0; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .bloc_category .content article.displayed{opacity:1;} .bloc_category .content article.no_article{width:100%;} .bloc_category .content article.no_article>h2{font-size:20px; color:#268ece; line-height:35px; text-align:center;} .bloc_category .content article.masked{opacity:0; display:none;} .bloc_category .content .left{float:left; width:30%; vertical-align:top; padding:5px 0 15px 0; text-align:center; cursor:pointer; line-height:0; font-size:0; -webkit-border-radius:1000px; -moz-border-radius:1000px; border-radius:1000px; overflow:hidden;} .bloc_category .content .left .round-img{display: inline-block; overflow:hidden; position:relative; width:90%; max-width: 210px; margin:0 5%; background-size:cover; background-position:center center; background-repeat:no-repeat; -webkit-border-radius:1000px; -moz-border-radius:1000px; border-radius:1000px;} .bloc_category .content .left .round-img img{width:100%;} .bloc_category .content .left .round-img span{opacity:0;font-size:100px;color:#FFFFFF;font-weight:900;position:absolute; left:0; top:0; width:100%; padding-bottom:40%;padding-top:45%; height:15%; background:rgba(38, 142, 206, 0.5); -webkit-border-radius:1000px; -moz-border-radius:1000px; border-radius:1000px; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .desktop .bloc_category .content .left:hover .round-img span{opacity:1;} .bloc_category .content .right{float:left; width:67%; margin:0 0 0 3%;} .bloc_category .content .right h2{font-size:20px; color:#268ece; line-height:35px;} .bloc_category .content .right h3{font-family:'titillium'; text-transform:none; letter-spacing:0; font-size:14px; line-height:20px;} .bloc_category .content .right hr{margin:20px 0; border-top:1px solid #eeeeee; border-bottom:1px solid #2d3036;} .ie9 .bloc_category .content .right hr{float:left;} .bloc_category .content .right p{font-size:16px; line-height:24px;} .bloc_category .content .right .socials{float:left; width:100%; font-size:0; line-height:0; margin:20px 0;} .bloc_category .content .right .socials li{display:inline-block; cursor:pointer; font-size:15px; line-height:15px; padding:10px; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; margin:0 10px 0 0;} .bloc_category .content .right .socials li.is_back{font-size:20px; line-height:20px; padding:7px 8px 8px 7px; margin:0 10px 0 0; transform:translate(0, 1px); -webkit-transform:translate(0, 1px);} .ie .bloc_category .content .right .socials li.is_back{padding:8px 7px 7px 8px;} .webkit .bloc_category .content .right .socials li.is_back{transform:translate(0, 2px); -webkit-transform:translate(0, 2px);} .page_search .bloc_category .content .right .socials li{padding:10px 10px 10px 0;} .bloc_category .content .right .socials li a{display:inline-block; background:#dddddd; padding:10px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;} .bloc_category .content .right .socials li a span{display:inline-block; font-size:10px; padding:0 10px 0 0; transition:transform .3s ease-in-out; -webkit-transition:-webkit-transform .3s ease-in-out;} .desktop .bloc_category .content .right .socials li a:hover{background:#1F2531; color:white;} .desktop .bloc_category .content .right .socials li a:hover span{transform:translate(5px, 0); -webkit-transform:translate(5px, 0);} .bloc_category .content .more{float:left; width:100%; text-align:center;} /* BLOCK EQUIPE */ .bloc_equipe{background:#268ece;} .bloc_equipe .by4{margin:12px 0 0 0;} /* BLOC MASCOTTE (HOME) */ #mascotte{float:left; width:100%; position:relative; z-index:1;margin-bottom:20px;} .bloc_mascotte{float:left; position:static; width:90%; padding:0 5%; color:white; background:#f2903f; text-align:center;} .bloc_mascotte .image{position:absolute; min-height:113%; min-width:37%; left:2%; bottom:0; background-image:url("images/mascotte.png"); background-size:contain; background-repeat:no-repeat; background-position:right bottom;} .bloc_mascotte blockquote{margin:0 3% 0 47%; width:50%;} .bloc_mascotte .logo-orange-frandedi{position:absolute; margin:0; width:100%; text-align:center; bottom:-38px; left:0; z-index:101;} /* BLOCK BONS PLANS */ .bloc_bonsplans{background:#268ece; text-align:center;} .bloc_bonsplans hr{border:2px solid white;margin: 40px auto 58px auto;} .bloc_bonsplans a{margin-top:50px;} /* BLOCK A PROPOS ORANGE */ .bloc_about_orange{text-align:center; background-color:#f2903f;padding-bottom:0!important;} .mobile .bloc_about_orange{padding-top:107px; padding-bottom:0!important;} .bloc_about_orange hr{border:2px solid white;} .bloc_about_orange a{color:#c6600c;} .bloc_about_orange img{height:auto;margin:0;padding: 100px 0px 13px 0px;} .bloc_about_orange .logo-orange-frandedi{position:static;float: left;width: 100%;text-align: center;margin: 48px 0 -32px 0;bottom:0;left:0} .bloc_about_orange .logo-orange-frandedi img{margin:0;position:relative;z-index:100;padding:0;} /*************************************************************/ /************************** 4 ********************************/ /******************** GENERAL PAGE ***************************/ /*************************************************************/ /** HEADING **/ #heading{position:fixed; width:100%; top:0; padding:0; z-index:10; font-family:"cabin"; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjQiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.4)), color-stop(100%,rgba(0,0,0,0))); background: -webkit-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%,rgba(0,0,0,0) 100%);} .admin-bar #heading{margin-top:32px;} #heading .back{position:absolute; height:100%; width:100%; background:#1f2531; z-index:2; opacity:0; transition:all .3s linear; -webkit-transition:all .3s linear;} .desktop #heading:hover .back,.show-back{opacity:1!important;} #heading .back.displayed{opacity:1;} #heading .back.research{opacity:1!important;} #heading #logo{position:relative; float:left; line-height:58px; margin:0 0 0 3%; text-align:center; z-index:3;} #heading #logo img{display:inline-block; max-height:45px; width:auto; vertical-align:middle;} #heading #menu{float:left; width:100%; z-index:2;} #heading .menu{position:relative; z-index:3;} #heading .menu nav{float:left; margin:0 2% 0 6%; text-transform:uppercase;} #heading .menu nav ul{float:left; font-size:0; line-height:0; color:white;} #heading .menu nav ul li{display:inline-block; line-height:65px; font-size:14px; letter-spacing:0.05em; margin:0 20px 0 0; vertical-align:middle;} #heading .menu nav ul li.current_page_item a,#heading .menu nav ul li.current-menu-ancestor a{color:#f2903f;} #heading .menu nav ul li.active a, #heading .menu nav ul li.active-event a{color:#f2903f;} #heading .menu nav ul li.button a{background:#f2903f; color:white; text-decoration:none; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; padding:0 15px; display:inline-block; line-height:35px; vertical-align:middle;} #heading .menu nav ul li.button.current_page_item a{background: #EB7722;} #heading .menu nav ul li.rounded,.rounded{font-size:13px; line-height:65px;} #heading .menu nav ul li.rounded a, .rounded a{cursor:pointer; display:inline-block; vertical-align:middle; text-align:center; width:35px; height:35px; border:2px solid white; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; line-height:35px; transition:all .3s linear; -webkit-transition:all .3s linear;} .desktop #heading .menu nav ul li.rounded a:hover,.rounded a:hover{color:#1f2531; background:white;} #heading .menu ul.right{float:right; margin:0 3% 0 0; color:white;} #heading .menu ul.right.loop{margin:0;} #heading .menu ul.right li{float:left; font-size:13px; margin:0 12px 0 0; line-height:65px;} #heading .menu ul.right li a, #heading .menu ul.right.event li span{cursor:pointer; display:inline-block; vertical-align:middle; text-align:center; width:35px; height:35px; border:2px solid white; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; line-height:35px; transition:all .3s linear; -webkit-transition:all .3s linear;} #heading .menu ul.right li a.current{background:white; color:#1f2531;} #heading .menu ul.right .loop-search{margin-right:19px; cursor:pointer; transition:all .3s linear; -webkit-transition:all .3s linear;} #heading .menu ul.right .loop-search.selected{background:#313743;} #heading .menu ul.right .loop-search span{line-height:9px; padding:0 27px; font-size:18px; vertical-align:middle;} .desktop #heading .menu ul.right .loop-search span:hover{background:none; color:white;} .desktop #heading .menu nav ul:hover li a{color:white;} .desktop #heading .menu nav ul li:hover a{color:#f2903f;} .desktop #heading .menu nav ul li.button:hover a{background:#e86a13; color:white;} .desktop #heading .menu ul.right li a:hover, #heading .menu ul.right.event li span:hover{color:#1f2531; background:white;} .desktop #heading .menu ul.right .loop-search:hover{background:#313743;} #heading .mobile_loop, #heading .mobile_menu_button{display:none;} #heading .event-back-button{float:left;color:white;position:relative;z-index:3;text-align:center;padding-left:3%} .menu .event-back-button-mobile{display: none!important;} /** MENU - BARRE SEARCH **/ #heading .barre-search{width:100%; background:#313743; visibility:hidden; position:absolute; z-index:1; transition:transform .3s linear; -webkit-transition:-webkit-transform .3s linear;} #heading .barre-search form{float:right;} #heading .barre-search form input[type="text"]{display:inline-block; width:526px; border:none; background:#3d434f; padding:0 20px; color:white; font-size:20px; font-family:'titillium'; margin:10px 0 10px 0; -webkit-border-top-left-radius:4px; -webkit-border-bottom-left-radius:4px; -moz-border-radius-topleft:4px; -moz-border-radius-bottomleft:4px; border-top-left-radius:4px; border-bottom-left-radius:4px; } .ie11 #heading .barre-search form input[type='text'], .ie10 #heading .barre-search form input[type='text']{padding:14px 20px;line-height:20px;} /*.ie9 #heading .barre-search form input[type='text']{height:63px;}*/ #heading .barre-search form input::-webkit-input-placeholder{color:#b0b2b5;} #heading .barre-search form input:-moz-placeholder{color:#b0b2b5;} #heading .barre-search form input::-moz-placeholder{color:#b0b2b5;} #heading .barre-search form input:-ms-input-placeholder{color:#b0b2b5;} #heading .barre-search .enter-search{display:inline-block; background:#3d434f; padding:8px 0; margin:10px 10px 10px -5px; vertical-align:top; -webkit-border-top-right-radius:4px; -webkit-border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -moz-border-radius-bottomright:4px; border-top-right-radius:4px; border-bottom-right-radius:4px;} #heading .barre-search .enter-search input[type="submit"]{border:none; background:none; font-size:19px; line-height:19px; vertical-align:middle; color:white; padding:10px 12px; border-left:1px solid #FFFFFF; cursor:pointer; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px;} .ie9 #heading .barre-search .enter-search input[type="submit"]{height:39px;} /** MAIN **/ #main{position:relative; float:left; width:100%; z-index:1;} #main>article{position:relative; float:left; width:90%; padding:0 5%; color:#2d3036;} .mobile #main>article{padding-top:107px; padding-bottom:107px;} #main article.image{color:white;} #main article .content{clear:both; max-width:1000px; margin:0 auto; width:100%;} #main article .content.space{padding:50px 0 0 0;} /** FOOTER **/ #footer{clear:both; float:left; width:100%; padding-top:55px; padding-bottom:60px; background:#FFFFFF;} #footer .left{clear:both; float:left; width:40%;} #footer .left ul{clear:both; float:left; width:100%; margin-top:55px; margin-left:37px;} #footer .left ul li{float:left; width:38px; margin:0 10px 0 0; line-height:normal; height:38px; padding:0;} #footer .left .copyright{clear:both; float:left; width:100%; margin-left:37px; margin-top:18px; font-size:18px; color:#444444; font-family:'cabin'; line-height:normal;} #footer .left .fd-site{clear:both; float:left; width:100%; margin-left:37px; margin-top:4px; font-size:14px; color:#444444; font-family:'cabin'; line-height:normal;} #footer .left .by-spin{clear:both; float:left; width:100%; margin-left:37px; margin-top:4px; font-size:14px; color:#777777; font-family:'cabin'; line-height:normal;} #footer .right{float:right; width:60%;} #footer .right .twitter-footer{float:right; width:290px; margin-right:25px; font-size:0;} #footer .right .slideshare-footer{float:right; width:290px; margin-right:37px;} #footer .right .slideshare-footer div{display:none;} #footer .right iframe{float:left; width:100%; height:238px; border:0!important;} /*************************************************************/ /************************** 5 ********************************/ /******************** SPECIFIC PAGES *************************/ /*************************************************************/ /* PAGE MISSIONS */ .page_missions .bloc_projets{background:#faf8f6; text-align:center;} .page_missions .bloc_projets ul{margin:15px 0 15px 0;} .page_missions .bloc_projets ul:last-child{margin:15px 0 60px 0;} .page_missions .bloc_soutenir{background:#268ece; text-align:center;} /* PAGE COMMUNAUTE */ .page_communaute .bloc_sponsors a.orange[role="button"]{margin-top:51px;} /* PAGE EDITO */ .page_edito .bloc_about{background:#faf8f6;} .page_edito .bloc_download{background:#268ece; text-align:center;} /* PAGE BONSPLANS */ .page_bonsplans{} .page_bonsplans .bloc_bonsplans{background:#268ece; text-align:center;} .page_bonsplans form{display:block; width:100%; padding:20px 0 50px 0;} .page_bonsplans form input{display:inline-block; width:30%; margin:0 1%; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; font-family:"cabin"; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} .page_bonsplans form input[type="text"],.page_bonsplans form input[type="email"]{display:inline-block; margin-bottom:25px; border:1px solid #c5c5c3;} .page_bonsplans form input[type="submit"]{border:0; background:#f2903f; color:#FFFFFF; cursor:pointer; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .desktop .page_bonsplans form input[type="submit"]:hover{background:#e86a13;} .page_bonsplans form input[type="text"].error,.page_bonsplans form input[type="email"].error{background:#cb3636; color:white;} .page_bonsplans form input::-webkit-input-placeholder{color:#bfbfbf!important;} .page_bonsplans form input:-moz-placeholder{color:#bfbfbf!important;} .page_bonsplans form input::-moz-placeholder{color:#bfbfbf!important;} .page_bonsplans form input:-ms-input-placeholder{color:#bfbfbf!important;} .page_bonsplans form input.error::-webkit-input-placeholder{color:#FFFFFF;} .page_bonsplans form input.error:-moz-placeholder{color:#FFFFFF;} .page_bonsplans form input.error::-moz-placeholder{color:#FFFFFF;} .page_bonsplans form input.error:-ms-input-placeholder{color:#FFFFFF;} /* PAGE CONTACT */ .page_contact{} .page_contact .bloc_contact{text-align:center; background:#faf8f6;} .page_contact .bloc_contact .message{background:#CB3636;width: 76.5%;margin: 58px 11.5% 0px 11.5%;padding: 20px 0px;color: white;font-size:20px;} .page_contact .bloc_contact .alert-success{margin-top: 73px;background: #9CCD8A;padding: 20px;color: white;} .page_contact .bloc_contact form{display:block; width:80%; margin:0 10%;} .page_contact .bloc_contact form ul{float:left; width:100%; margin:50px 0 25px;} .page_contact .bloc_contact form ul li{text-align:left; margin:25px 1% 0 1%; width:30%; height:55px; padding:0 20px; display:inline-block; vertical-align:middle; background:#268ece; font-family:"cabin"; font-size:14px; line-height:55px; color:white; letter-spacing:0.025em; text-transform:uppercase; cursor:pointer; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} .page_contact .bloc_contact form ul li input[type="radio"]{width:14px; height:14px; margin:0 10px 0 0; display:inline-block; float:none; vertical-align:middle;} .ie10 .page_contact .bloc_contact form ul li input[type="radio"], .ie9 .page_contact .bloc_contact form ul li input[type="radio"]{width:auto; height:auto;} .page_contact .bloc_contact form ul li span{width:70%;display:inline-block; vertical-align:middle;} .page_contact .bloc_contact form ul li.selected{background:#1c6b9b;} .desktop .page_contact .bloc_contact form ul li:hover{background:#1c6b9b;} .desktop .page_contact .bloc_contact form ul li.selected:hover{background:#1c6b9b;} .page_contact .bloc_contact form p{clear:both; float:left; width:100%;} .page_contact .bloc_contact form input,.page_contact .bloc_contact form textarea{clear:both; float:left; width:96%; margin:0 2%; font-size: 18px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; font-family:"cabin"; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .page_contact .bloc_contact form input[type="text"],.page_contact .bloc_contact form input[type="email"],.page_contact .bloc_contact form textarea{display:inline-block; margin-bottom:13px; margin-top:13px; border:1px solid #c5c5c3;} .ie11 .page_contact .bloc_contact form input[type="text"], .ie11 .page_contact .bloc_contact form input[type="email"], .ie11 .page_contact .bloc_contact form textarea{padding-bottom:31px;} .ie .page_contact .bloc_contact form input[type="text"], .ie .page_contact .bloc_contact form input[type="email"], .ie .page_contact .bloc_contact form textarea{height:55px;} .page_contact .bloc_contact form textarea{min-height:200px;} .page_contact .bloc_contact form .error_msg{float:left; width:96%; margin:15px 2% 20px; background:#cb3636; color:white; padding:10px 0; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;} .page_contact .bloc_contact form input[type="submit"]{border:0; background:#268ece; color:#FFFFFF; cursor:pointer; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .desktop .page_contact .bloc_contact form input[type="submit"]:hover{background:#1c6b9b;} .page_contact .bloc_contact form input[type="text"].error,.page_contact .bloc_contact form input[type="email"].error,.page_contact .bloc_contact form textarea.error{background:#cb3636; color:white;} .page_contact .bloc_contact form input::-webkit-input-placeholder,.page_contact .bloc_contact form textarea::-webkit-input-placeholder {color:#bfbfbf!important;} .page_contact .bloc_contact form input:-moz-placeholder,.page_contact .bloc_contact form textarea:-moz-placeholder {color:#bfbfbf!important;} .page_contact .bloc_contact form input::-moz-placeholder,.page_contact .bloc_contact form textarea::-moz-placeholder {color:#bfbfbf!important;} .page_contact .bloc_contact form input:-ms-input-placeholder,.page_contact .bloc_contact form textarea:-ms-input-placeholder {color:#bfbfbf!important;} .page_contact .bloc_contact form input.error::-webkit-input-placeholder,.page_contact .bloc_contact form textarea.error::-webkit-input-placeholder {color:#FFFFFF;} .page_contact .bloc_contact form input.error:-moz-placeholder,.page_contact .bloc_contact form textarea.error:-moz-placeholder {color:#FFFFFF;} .page_contact .bloc_contact form input.error::-moz-placeholder,.page_contact .bloc_contact form textarea.error::-moz-placeholder {color:#FFFFFF;} .page_contact .bloc_contact form input.error:-ms-input-placeholder,.page_contact .bloc_contact form textarea.error:-ms-input-placeholder {color:#FFFFFF;} .page_contact .bloc_contact form .error-contact{font-size:14px;display:inline-block;} .page_contact .bloc_contact form .champ-oblig{font-size:14px;text-align:left;padding:17px;} .bloc_inscription .message-box,.bloc_inscription .message-box ul{display:none;} /* PAGE ANNUAIRE */ .page_annuaire{} .page_annuaire .bloc_annuaire{text-align:center; background:#faf8f6;} .page_annuaire .bloc_annuaire .content ul{float:left; width:100%; font-size:0; line-height:0;} .page_annuaire .bloc_annuaire .content ul li{text-transform:uppercase; cursor:pointer; display:inline-block; vertical-align:top; width:20%; font-size:16px; line-height:25px; padding-bottom:15px;margin-top:20px;margin-bottom:20px; border-bottom:2px solid rgba(242, 144, 43, 0); transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} .desktop .page_annuaire .bloc_annuaire .content ul li:hover{border-bottom:2px solid rgba(242, 144, 43, 1);} /* PAGE ADHESION */ .page_adhesion .bloc_about .orange{margin-top:10px;} /* PAGE PROGRAM */ .page_program{} .page_program .program{float:left; width:100%; border-top:1px solid rgba(0, 0, 0, .5);} .page_program .program .content{} .page_program .program .content>ul{float:left; width:100%; margin:30px 0 50px 0; text-align:center; font-size:0; line-height:0;} .page_program .program .content>ul>li{display:inline-block; margin:0 10px; font-size:20px; line-height:28px; cursor:pointer; border-bottom:2px solid white; font-weight:bold; transition:.2s all ease-in-out; -webkit-transition:.2s all ease-in-out;} .page_program .program .content>ul>li.selected{border-bottom:2px solid #268ECE; color:#268ECE;} .page_program .program .content .arene{float:left; width:100%;} .page_program .program .content .experts{float:left; width:100%; display:none;} .page_program .program .content .big_part{float:left; width:100%;} .page_program .program .content .big_part>.hour{float:left; width:20%; max-width:120px; color:#268ECE;} .page_program .program .content .big_part .step{position:relative; float:left; width:50%; padding:0 0 40px 5%; overflow:hidden;} .page_program .program .content .big_part .step .opener{cursor:pointer; transition:.2s all ease-in-out; -webkit-transition:.2s all ease-in-out;} .page_program .program .content .big_part .step .opener:hover{text-decoration:underline} .page_program .program .content .big_part .step>h2{display:block; float:left; font-weight:bold; color:#F2903F; font-size:20px; line-height:28px; padding:0 0 15px 0; text-transform:none;} .page_program .program .content .big_part .step>ul{float:left; width:100%; padding:0 0 10px 20px; list-style-type:disc; box-sizing:border-box;} .page_program .program .content .big_part .step>ul>li{float:left; width:100%; padding:0 0 5px 0; color:#268ECE;} .page_program .program .content .big_part .step>ul>li>h3{font-size:16px; line-height:24px; text-transform:none; } .page_program .program .content .big_part .step>figure{float:left; width:100%;} .page_program .program .content .big_part .step>figure .mask{float:left; width:40px; margin:0 5px 5px 5px;} .page_program .program .content .big_part .step>figure .mask:first-child{margin:0 5px 0 0;} .page_program .program .content .big_part .step>figure .mask:first-child{margin:0 0 0 5px;} .page_program .program .content .big_part .step>figure .mask .mask_content{position:relative; width:100%; } .page_program .program .content .big_part .step>figure .mask .mask_content .ie{position:relative; width:100%;} .page_program .program .content .big_part .step>figure .mask .mask_content .moving_img{transform-origin:50% 50%; -webkit-transform-origin:50% 50%;} .page_program .program .content .big_part .step>.line{position:absolute; left:0; top:0; width:5%; height:100%;} .page_program .program .content .big_part .step>.line .dot{position:absolute; top:8px; left:50%; width:10px; height:10px; background:#F2903F; z-index:2; transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0);} .page_program .program .content .big_part .step>.line .border{position:absolute; top:0; left:50%; width:1px; height:100%; background:#268ECE; transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0);} .page_program .program .content .big_part.first>.step .line .border{transform:translate(-50%, 15px); -webkit-transform:translate(-50%, 15px);} .page_program .program .content .big_part.last>.step .line .border{height:15px; transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0);} .page_program aside{position:fixed; width:50%; right:0; height:100%; transform:translate(100%, 0); -webkit-transform:translate(100%, 0); background:white; z-index:2;} .page_program aside .pop{position:absolute; width:100%; height:100%; background:white; border-left:1px solid #1F2531; box-sizing:border-box; transition:.3s all ease-in-out; -webkit-transition:.3s all ease-in-out;} .page_program aside .pop>div{position:relative; float:left; width:100%; padding:65px 0;} .page_program aside .pop>div>.description{float:left; width:90%; margin:45px 5% 0 5%; padding:0 0 25px; border-bottom:1px solid rgba(0, 0, 0, .3);} .page_program aside .pop>div ul{float:left; width:90%; margin:25px 5% 0 5%;} .page_program aside .pop>div ul li{float:left; width:100%; padding:0 0 15px 0; min-height:113px;} .page_program aside .pop>div ul li .mask{position:absolute; width:100px; height:auto;} .page_program aside .pop>div ul li .mask_content{position:relative; width:100%; } .page_program aside .pop>div ul li .mask_content .ie{position:relative; width:100%;} .page_program aside .pop>div ul li .mask_content .moving_img{transform-origin:50% 50%; -webkit-transform-origin:50% 50%;} .page_program aside .pop>div ul li>p{display:block; float:left; width:100%; padding:0 0 0 115px; box-sizing:border-box;} .page_program aside .pop>div ul li>p.name{color:rgba(0, 0, 0, .5);} .page_program aside .pop>div ul li>p.fonction{font-weight:bold;} .page_program aside .pop>div ul li>.description{display:block; float:left; width:100%; padding:10px 0 10px 115px; box-sizing:border-box;} .page_program aside .close{position:absolute; background:white; left:0; top:65px; width:35px; height:35px; cursor:pointer; border-left:1px solid black; border-bottom:1px solid black;-webkit-border-bottom-left-radius:3px; -moz-border-radius-bottomleft:3px; border-bottom-left-radius:3px; transition:.3s all ease-in-out; -webkit-transition:.3s all ease-in-out;} .page_program aside .close span{position:absolute; left:50%; top:50%; width:80%; height:2px; background:#1F2531;} .page_program aside .close span:first-child{transform:translate(-50%, -50%) rotate(45deg); -webkit-transform:translate(-50%, -50%) rotate(45deg);} .page_program aside .close span:last-child{transform:translate(-50%, -50%) rotate(-45deg); -webkit-transform:translate(-50%, -50%) rotate(-45deg);} .page_program aside .pop.opened{transform:translate(-100%, 0); -webkit-transform:translate(-100%, 0);} .page_program aside.visible .close{transform:translate(-100%, 0); -webkit-transform:translate(-100%, 0);} @media screen and (max-width:1528px) { .page_program aside .pop>div{padding:50px 0;} .page_program aside .close{top:50px;} } @media screen and (max-width:900px) { .page_program .program .content .big_part .step{width:75%;} .page_program aside{width:100%;} } #awwwards{transition:.3s all ease-in-out; -webkit-transition:.3s all ease-in-out;} #awwwards.masqued{transform:translate(100%, 0); -webkit-transform:translate(100%, 0);} /*************************************************************/ /************************** 6 ********************************/ /******************** MEDIA QUERIES **************************/ /*************************************************************/ /** DESKTOP **/ @media screen and (min-width:767px) { .desktop_el_header{display:block;} .mobile_el_header{display:none;} .mobile_el{display:none!important;} } /** REPLACE LA FLECHE SUR LES ECRANS TROP PETITS */ @media screen and (max-height:700px) { /** INTRO : REPLACE LA FLECHE SUR LES ECRANS TROP PETITS **/ .bloc_intro ul.arrow{bottom:6%;} .bloc_intro ul.arrow li{width:10%;} .bloc_intro ul{margin:30px 0px;} .bloc_intro ul li{margin:10px;} } /** SAUT FOOTER TABLETTE **/ @media screen and (min-width:768px) and (max-width:1069px) { .bloc_inscription .speaker-part .speaker-part-container{width:60%;} /** PAGE CONTACT **/ .page_contact .bloc_contact form ul li span{font-size:11px;} /** FOOTER **/ #footer{padding-top:25px;} #footer .left,#footer .right{clear:both; float:left; width:100%; text-align:center;} #footer .left ul, #footer .left ul li{float:none; text-align:center; display:inline-block;} #footer .left ul, #footer .left p{margin-left:0!important;} #footer .right .slideshare-footer, #footer .right .twitter-footer{float:left; display:block; width:50%; margin:50px 0 20px 0; text-align:center;} #footer .right .slideshare-footer iframe, #footer .right .twitter-footer iframe{float:none; display:inline-block; width:290px; margin:0 auto;} } /************************************************************* ****************** SAUT HEADER MOBILE *********************** *************************************************************/ @media screen and (max-width:1528px) { /** **/ #heading .mobile_loop, #heading .mobile_menu_button{display:block;} #heading{position:fixed; top:0; left:0; width:100%; height:50px;} #heading .back{position:fixed; z-index:2; right:-100%; width:100%; height:100%; background:rgba(0, 0, 0, 0.4); opacity:1!important; transition:all .4s linear; -webkit-transition:all .4s linear;} .iphone #heading .back{background:none;} #heading .back.displayed{transform:translate(-100%, 0); -webkit-transform:translate(-100%, 0);} #heading .mobile_menu_button{position:absolute; right:0; z-index:5; width:25px; height:100%; line-height:40px; cursor:pointer;} #heading .mobile_menu_button>div{display:inline-block; vertical-align:middle; width:100%;} #heading .mobile_menu_button span{display:block; width:100%; height:3px; margin:5px 0 0 0; background:rgba(255, 255, 255, 0.5)} #heading .event-back-button {display: none;} .menu .event-back-button-mobile {display: block!important;} #heading #logo{position:absolute; background:#1f2531; z-index:4; width:100%; height:100%; margin:0; line-height:46px;} #heading #logo img{max-height:40px;} #heading .menu{position:fixed; top:0; right:-70%; width:70%; height:100%; display:block; overflow:hidden; background:#1F2531; transition:all .4s linear; -webkit-transition:all .4s linear;} /*.iphone #heading .menu{transition:all 0s linear; -webkit-transition:all 0s linear;}*/ #heading .menu.opened{transform:translate(-100%, 0); -webkit-transform:translate(-100%, 0);} #heading .menu .iscrollingmenu{position:absolute; width:100%;} #heading .menu nav{margin:0; float:left; width:100%; padding:50px 0 0 0; position:relative;} #heading .menu nav ul{float:left; width:100%;} #heading .menu nav ul li{border-bottom:1px solid #faf8f6; line-height:20px; background:#1F2531; display:block; margin:0;} #heading .menu nav ul li a{display:block; text-decoration:none; font-size:14px; letter-spacing:0.05em; font-family:"cabin"; text-transform:uppercase; padding:25px 5%;} #heading .menu nav ul li.button a{background:#f2903f; color:white; display:block; text-decoration:none; font-size:14px; line-height:20px; letter-spacing:0.05em; font-family:"cabin"; text-transform:uppercase; padding:25px 5%; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px;} #heading .menu nav ul li.active a{color:white;} #heading .menu nav ul li.activated a{color:#f2903f;} #heading .menu ul.right{float:left; width:100%; margin:0; text-align:center;} #heading .menu ul.right li{display:inline-block; float:none;} #heading .menu ul.right.loop{display:none;} #heading .mobile_loop{position:absolute; left:0; top:0; z-index:5;} #heading .mobile_loop li{float:left; font-size:20px; width:48px; line-height:48px; color:rgba(255, 255, 255, 0.5); text-align:center; cursor:pointer; transition:all .3s linear; -webkit-transition:all .3s linear;} #heading .mobile_loop li.selected{background:#313743;} /** MENU - BARRE SEARCH **/ #heading .barre-search{width:100%; background:#313743; visibility:hidden; position:absolute; z-index:1; transition:transform .3s linear; -webkit-transition:-webkit-transform .3s linear;} #heading .barre-search form{float:left; width:100%;} #heading .barre-search form input[type="text"]{display:block; float:left; width:100%; border:none; background:none; padding:0 65px 0 20px; box-sizing:border-box; color:white; font-size:20px; font-family:'titillium'; margin:0; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px;} #heading .barre-search form input::-webkit-input-placeholder{color:#b0b2b5;} #heading .barre-search form input:-moz-placeholder{color:#b0b2b5;} #heading .barre-search form input::-moz-placeholder{color:#b0b2b5;} #heading .barre-search form input:-ms-input-placeholder{color:#b0b2b5;} #heading .barre-search .enter-search{position:absolute; right:0; top:0; background:none; padding:8px 0; margin:0; vertical-align:top; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px;} #heading .barre-search .enter-search button{border:none; background:none; font-size:19px; vertical-align:middle; color:white; padding:8px 12px; border-left:1px solid #FFFFFF; cursor:pointer;} .chrome #heading .barre-search .enter-search button{padding:10px 12px 9px 12px;} } /************************************************** ******************** 8 6 5 ************************ **************************************************/ @media screen and (max-width:865px) { /** LOCATION **/ .bloc_location .address{clear:both; float:left; width:100%; position:relative;} .bloc_location .map,.bloc_location iframe{clear:both; float:left; width:100%; height:450px; position:static;} } /************************************************** ******************** 8 0 0 ************************ **************************************************/ @media screen and (max-width:800px) { /** SOUS MODULE 3 COLONNES BONC PLANS **/ ul.by3.bonsplans{font-size:24px; line-height:1.3em;} ul.by3.bonsplans li{width:80%; margin:0 10% 50px 10%; padding:30px 0; background:white; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; color:#1e2531} ul.by3.bonsplans li figure{width:90%; margin:0 5%; height:100px; text-align:center;} ul.by3.bonsplans li figure img{max-width:100%; max-height:100%; display:inline-block; vertical-align:center;} ul.by3.bonsplans li p{display:inline-block; width:90%; margin:0 5%;} ul.by3.bonsplans li .title{font-size:20px; line-height:24px; height:auto; margin:20px 5% 0 5%; font-family:"titillium-semibold";} ul.by3.bonsplans li .desc{font-size:16px; line-height:24px; margin:5px 5% 0 5%; min-height:0;} ul.by3.bonsplans li a{font-size:16px; line-height:normal; margin:0; color:#268ece;} ul.by3.bonsplans li .remise{font-size:14px; line-height:normal; margin:10px 5%;} ul.by3.bonsplans li .remise span{font-size:35px; line-height:35px;} ul.by3.bonsplans li .code{font-size:12px; line-height:normal;} ul.by3.bonsplans li .code input{padding:5px 10px; margin:0 5px; border:1px solid #d4d4d4; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; cursor:text;} /* BLOC CATEGORY */ .bloc_category{background:#faf8f6;} .bloc_category .content article{float:left; width:100%; margin:0 0 30px 0;} .bloc_category .content .left{float:left; width:100%; vertical-align:top; padding:5px 0 15px 0; text-align:center; cursor:pointer; line-height:0; font-size:0; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; overflow:hidden;} .bloc_category .content .left .round-img{display: inline-block; overflow:hidden; position:relative; width:100%; max-width:100%; max-height:150px; margin:0; background-size:cover; background-position:center center; background-repeat:no-repeat; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px;} .bloc_category .content .left .round-img img{width:100%;} .bloc_category .content .left .round-img span{display:none;} .bloc_category .content .right{float:left; width:100%; margin:0; text-align:center;} .bloc_category .content .right h2{font-size:20px; color:#268ece; line-height:35px;} .bloc_category .content .right h3{font-family:'titillium'; text-transform:none; letter-spacing:0; font-size:12px; line-height:18px;} .bloc_category .content .right hr{margin:5px auto; opacity:0;} .bloc_category .content .right p{font-size:16px; line-height:24px; text-align:center;} .bloc_category .content .right .socials{float:left; width:100%; font-size:0; line-height:0; margin:10px 0; text-align:center} .bloc_category .content .right .socials li{display:inline-block; cursor:pointer; font-size:15px; line-height:15px; padding:10px; -webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px; margin:0 10px 10px 0;} .bloc_category .content .right .socials li:last-child{} .bloc_category .content .right .socials li a{display:inline-block; background:#dddddd; padding:10px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;} .bloc_category .content .right .socials li a span{display:inline-block; font-size:10px; padding:0 10px 0 0; transition:transform .3s ease-in-out; -webkit-transition:-webkit-transform .3s ease-in-out;} } /************************************************** ******************** 7 6 7 ************************ **************************************************/ @media screen and (max-width:767px) { /** GENERAL **/ .desktop_el{display:none!important;} .mobile_el{display:block!important;} html, body{font-size:18px; line-height:1.4em;} ul.by4 li{display:inline-block; width:46%; margin:0 2%; vertical-align:top;} h1{font-size:40px; line-height:70px; text-transform:uppercase; letter-spacing:0.1em; color:white; font-family:"cabin";} h2{font-size:30px; line-height:54px; text-transform:uppercase; letter-spacing:0.1em; font-family:"cabin";} h3{font-size:30px; line-height:54px; text-transform:uppercase; letter-spacing:0.1em; font-family:"cabin";} h4{font-size:25px; line-height:1.2em;} #main>article.by2 {background-image:none; padding-top:0!important; padding-bottom:0!important; padding:0!important; width:100%!important;} #main>article.by2 .left,#main>article.by2 .right{clear:both; float:left; width:90%; margin:0; padding:90px 5%;} /** BLOC PUSH INTRO **/ .bloc_intro ul.arrow li{width:20%;} #intro{float:left; width:100%; position:relative; background:grey; z-index:1;} #intro>div{position:absolute; width:100%; height:100%; left:0; top:0; background-size:cover; background-position:center center; opacity:0; transition:all .5s linear; -webkit-transition:all .5s linear;} #intro>div.active{opacity:1;} .bloc_intro{float:left; position:relative; width:100%; padding:0; color:#2d3036; background-size:cover; background-position:center center;} .bloc_intro *{line-height:1.3em;} .bloc_intro>span{display:inline-block; vertical-align:middle; text-align:center; width:100%;} .bloc_intro>span *{line-height:1.3em;} .bloc_intro time{font-size:28px; line-height:34px; font-style:italic; font-family:"cabin";} .bloc_intro .sub_title{font-size:28px; line-height:34px; font-style:italic; font-family:"cabin";} .bloc_intro ul{float:left; width:100%; text-align:center; line-height:0; font-size:0; margin:60px 0 0 0;} .bloc_intro ul li{display:inline-block; margin:20px;} .bloc_intro ul li a{display:inline-block; font-size:13px;vertical-align:middle; width:210px;} .bloc_intro ul li .title{font-size:40px; letter-spacing:0.1em;} .bloc_intro .push-slide{float:left; width:100%; text-align:center; font-size:0; line-height:0;} .bloc_intro .push-slide li{display:inline-block; width:80%; vertical-align:middle;} .bloc_intro .push-slide li.absolute{position:absolute; left:10%; width:80%; margin:20px 0;} .bloc_intro .push-slide li.arrow{width:10%; margin:0; cursor:pointer;text-align:center;} .bloc_intro .push-slide li.arrow span{font-size:25px; line-height:25px;} .bloc_intro .push-slide li.arrow:first-child{margin:0;} .bloc_intro .push-slide li.text-intro{margin:0;} .bloc_intro .push-slide li:nth-child(2){display:inline-block;} .mobile .bloc_intro ul.arrow{display:none;} .bloc_intro ul.arrow li{margin:0; color:#FFFFFF;} .bloc_intro ul.arrow li a{width:65px; height:65px; line-height:67px; font-size:23px; border-radius:67px; border:2px solid rgba(255, 255, 255, 0.5); font-family:'fdfont';} /** TIMER / PROGRAM > PROGRAM **/ .bloc_program .left {background-image:url("images/program.jpg"); background-size:cover; background-position:top left;} .bloc_program .right {background-image:url("images/nuages2.jpg"); background-size:cover; background-position:bottom right;} /** SOCIALS NETWORKS **/ .bloc_social .right {padding-top:0!important;} /** PAGE CONTACT **/ .page_contact .bloc_contact form ul li{width:96%;margin: 25px 2% 0px;} /** INSCRIPTION **/ .bloc_inscription h3{font-size:18px; line-height:25px;} .bloc_inscription .speaker-part .speaker-part-container{display:inline-block; width:80%; margin:0 10%;} #main .bloc_inscription .inscription-part.register-part{display:none!important;} #main .bloc_inscription .register.selected{background-color:#faf8f6; color:#2D3036;} /* BLOC MASCOTTE (HOME) */ #mascotte{float:left; width:100%; position:relative; z-index:1;margin-bottom:20px;} .bloc_mascotte{float:left; position:static; width:90%; padding:0 5%; color:white; background:#f2903f; text-align:center;} .bloc_mascotte .image{display:none} .bloc_mascotte blockquote{margin:0 5% 0 5%; width:90%;font-size:24px;line-height: 31px;} .bloc_mascotte blockquote:before{content:'';} /* PAGE ANNUAIRE*/ .page_annuaire .bloc_annuaire .content ul li {width:25%;} /** FOOTER **/ #footer{padding-top:25px;} #footer .left,#footer .right{clear:both; float:left; width:100%; text-align:center;} #footer .left ul, #footer .left ul li{float:none; text-align:center; display:inline-block;} #footer .left ul, #footer .left p{margin-left:0!important;} #footer .right .slideshare-footer, #footer .right .twitter-footer{float:left; display:block; width:100%; margin:50px 0 20px 0; text-align:center;} #footer .right .slideshare-footer iframe, #footer .right .twitter-footer iframe{float:none; display:inline-block; width:290px; margin:0 auto;} } /************************************************** ******************** 7 0 0 ************************ **************************************************/ @media screen and (max-width:700px) { /** SOUS MODULE 3 COLONNES **/ ul.by3{float:left; width:100%; font-size:0; line-height:0; text-align:center;} ul.by3 li{display:inline-block; width:80%; margin:0 10% 30px 10%; vertical-align:top; padding:5px 0 15px 0;text-align: center;} ul.by3 li:last-child{margin:0 10% 0 10%;} ul.by3 li .round-img{display: inline-block; overflow:hidden; position:relative; width:90%; max-width: 210px; margin:0 5%; background-size:cover; background-position:center center; background-repeat:no-repeat; -webkit-border-radius:1000px; -moz-border-radius:1000px; border-radius:1000px;} ul.by3 li .round-img img{width:100%;} ul.by3 li .round-img span{opacity:0;font-size:100px;color:#FFFFFF;font-weight:900;position:absolute; left:0; top:0; width:100%; padding-bottom:40%;padding-top:45%; height:15%; background:rgba(38, 142, 206, 0.5); -webkit-border-radius:1000px; -moz-border-radius:1000px; border-radius:1000px; transition:all .3s ease-in-out; -webkit-transition:all .3s ease-in-out;} ul.by3 li .titre{/*margin-top:20px;*/font-family:"titillium-semibold"; font-size:20px; line-height:1em; padding:15px 0; min-height:40px; color:#268ece;} ul.by3 li .text{font-size:16px; line-height:1.5em;} } /************************************************** ******************** 5 5 9 ************************ **************************************************/ @media screen and (max-width:559px) { /* PAGE EQUIPE */ .bloc_equipe ul.by4 li{width:96%;margin-bottom:50px;} .bloc_equipe ul.by4 li a[role="button"]{width:65%;} /* PAGE ANNUAIRE*/ .page_annuaire .bloc_annuaire .content ul li {width:50%;} /* PAGE EDITO */ .bloc_newsletter {background:#268ece; text-align:center;} .bloc_newsletter form{width:100%; margin:0;} .bloc_newsletter form input {width:250px; margin:0 auto 35px auto; text-align:center;} .bloc_newsletter form input[type="submit"]{text-decoration:none; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; padding:0 20px; text-transform:uppercase; letter-spacing:0.025em; font-family:"cabin"; display:inline-block; height:55px; font-size:14px; line-height:55px; vertical-align:middle; min-width:250px; cursor:pointer; background:#f2903f; color:white;} .bloc_newsletter .response{font-size:16px;margin-top:-14px;} .bloc_newsletter ul{display:inline-block; width:100%; text-align:center;} .bloc_newsletter ul li{display:inline-block; font-size:18px; line-height:18px; margin:0 8px 16px 8px;} .bloc_newsletter ul li span{cursor:pointer; display:block; font-size:18px; line-height:18px; padding:10px;} } /************************************************** ******************** 504 ************************ **************************************************/ @media screen and (max-width:504px) { .bloc_inscription .register h3 span{display:block; clear:both;} } /************************************************** ******************** 4 0 0 ************************ **************************************************/ @media screen and (max-width:400px) { h1{font-size:30px; line-height:54px; text-transform:uppercase; letter-spacing:0.1em; color:white; font-family:"cabin";-webkit-hyphens: auto;-moz-hyphens: auto;-ms-hyphens: auto;-o-hyphens: auto; hyphens: auto;word-wrap: break-word;} h2{font-size:25px; line-height:45px; text-transform:uppercase; letter-spacing:0.1em; font-family:"cabin";} h3{font-size:25px; line-height:45px; text-transform:uppercase; letter-spacing:0.1em; font-family:"cabin";} h4{font-size:20px; line-height:1.2em;} .bloc_intro ul li .title{font-size:30px;} .bloc_about p{padding:0 0 15px 0; width:100%; margin:0;} } /*************************************************************/ /************************** 7 ********************************/ /************************ ANIMS ******************************/ /*************************************************************/ .magictime05 { -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; animation-fill-mode:both; animation-timing-function:linear; -webkit-animation-timing-function:linear; } .magictimeArrow { -webkit-animation-duration:5s; animation-duration:5s; -webkit-animation-fill-mode:both; animation-fill-mode:both; animation-timing-function:ease-in-out; -webkit-animation-timing-function:ease-in-out; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; animation-delay:2s; -webkit-animation-delay:2s; } .animScaleIn { -webkit-backface-visibility:visible !important; backface-visibility:visible !important; -webkit-animation-name:animScaleIn; animation-name:animScaleIn; } @-webkit-keyframes animScaleIn { 0% { height:0px; padding:0px 0px; -webkit-transform:scale(0); opacity:0; transform-origin:top center; -webkit-transform-origin:top center; } 100% { height:auto; padding:77px 0; -webkit-transform:scale(1); opacity:1; transform-origin:top center; -webkit-transform-origin:top center; } } @keyframes animScaleIn { 0% { height:0px; padding:0px 0px; transform:scale(0); opacity:0; transform-origin:top center; -webkit-transform-origin:top center; } 100% { height:auto; padding:77px 0; transform:scale(1); opacity:1; transform-origin:top center; -webkit-transform-origin:top center; } } .animScaleOut { -webkit-backface-visibility:visible !important; backface-visibility:visible !important; -webkit-animation-name:animScaleOut; animation-name:animScaleOut; } @-webkit-keyframes animScaleOut { 0% { height:auto; padding:77px 0; -webkit-transform-origin:top center; -webkit-transform:scale(1); opacity:1; -webkit-transform-origin:top center; } 100% { height:0px; padding:0px 0px; -webkit-transform-origin:top center; -webkit-transform:scale(0); opacity:0; -webkit-transform-origin:top center; } } @keyframes animScaleOut { 0% { height:auto; padding:77px 0; transform-origin:top center; transform:scale(1); opacity:1; transform-origin:top center; } 100% { height:0px; padding:0px 0px; transform-origin:top center; transform:scale(0); opacity:0; transform-origin:top center; } } .animArrow { -webkit-backface-visibility:visible !important; backface-visibility:visible !important; -webkit-animation-name:animArrow; animation-name:animArrow; } @-webkit-keyframes animArrow { 0% { -webkit-transform:translate(0, 0) scale(1); } 8% { -webkit-transform:translate(0, 20px) scale(0.9); } 12% { -webkit-transform:translate(0, 0); } 100% { -webkit-transform:translate(0, 0); } } @keyframes animArrow { 0% { transform:translate(0, 0) scale(1); } 8% { transform:translate(0, 20px) scale(0.9); } 12% { transform:translate(0, 0); } 100% { transform:translate(0, 0); } }