/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */ /* * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */ /* ========================================================================== FONTS ========================================================================== */ @font-face { font-family: 'HelveticaNeue-Thin'; src: url('http://www.galenic.fr/cell-capital/fonts/HelveticaNeueLTStd-Th.eot#iefix') format('embedded-opentype'), url('http://www.galenic.fr/cell-capital/fonts/HelveticaNeueLTStd-Th.otf') format('opentype'), url('http://www.galenic.fr/cell-capital/fonts/HelveticaNeueLTStd-Th.woff') format('woff'), url('http://www.galenic.fr/cell-capital/fonts/HelveticaNeueLTStd-Th.ttf') format('truetype'), url('http://www.galenic.fr/cell-capital/fonts/HelveticaNeueLTStd-Th.svg#HelveticaNeueLTStd-Th') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'HelveticaNeue-Light'; src: url('http://www.galenic.fr/cell-capital/fonts/HelveticaNeueLTStd-Lt.eot#iefix') format('embedded-opentype'), url('http://www.galenic.fr/cell-capital/fonts/HelveticaNeueLTStd-Lt.otf') format('opentype'), url('http://www.galenic.fr/cell-capital/fonts/HelveticaNeueLTStd-Lt.woff') format('woff'), url('http://www.galenic.fr/cell-capital/fonts/HelveticaNeueLTStd-Lt.ttf') format('truetype'), url('http://www.galenic.fr/cell-capital/fonts/HelveticaNeueLTStd-Lt.svg#HelveticaNeueLTStd-Lt') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'HelveticaNeue-Bold'; src: url('http://www.galenic.fr/cell-capital/fonts/helveticaneueltstd-bd.eot'); src: url('http://www.galenic.fr/cell-capital/fonts/helveticaneueltstd-bd.eot') format('embedded-opentype'), url('http://www.galenic.fr/cell-capital/fonts/helveticaneueltstd-bd.woff2') format('woff2'), url('http://www.galenic.fr/cell-capital/fonts/helveticaneueltstd-bd.woff') format('woff'), url('http://www.galenic.fr/cell-capital/fonts/helveticaneueltstd-bd.ttf') format('truetype'), url('http://www.galenic.fr/cell-capital/fonts/helveticaneueltstd-bd.svg#HelveticaNeueLTStd75Bold') format('svg'); font-weight: normal; font-style: normal; } /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ html, button, input, select, textarea { color: #222; } html { font-size: 1em; line-height: 1.4; -webkit-font-smoothing: antialiased; } /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection rule sets have to be separate. * Customize the background color to match your design. */ ::-moz-selection { background: #A8E3AB; text-shadow: none; } ::selection { background: #A8E3AB; text-shadow: none; } /* * A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* * Remove the gap between images, videos, audio and canvas and the bottom of * their containers: h5bp.com/i/440 */ audio, canvas, img, video { vertical-align: middle; -webkit-transform-style: preserve-3d; } /* * Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } /* * Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /* ========================================================================== Browse Happy prompt ========================================================================== */ .browsehappy { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== GENERAL ========================================================================== */ body, html{ height: 100%; } body{ /*font-family: 'HelveticaNeue-Light', Arial, Helvetica, sans-serif;*/ font-family: HelveticaNeueLT-Light; font-weight: normal; font-style: normal; font-size: 16px; min-height: 100%; /*overflow:hidden;*/ background: #000; } body.bodymenu{ overflow: hidden; } body.bodymenu .container_frame{ /*-webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9);*/ left: -100%; } /* IE */ .ie_back{ display: none; } .preload_img, .preload_img img{ display: none; } #main{ min-height: 100%; } .container_frame{ height: 100%; min-height: 690px; } .frame{ width: 100%; min-height: 100%; max-height: 100%; /*background: #fbfbfb;*/ overflow: hidden; position: relative; opacity: 0; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .frame.frame_active{ opacity: 1; } .bl, .br, header, footer{ position: fixed; background: #FFF; z-index: 40; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .bl, .br{ width: 48px; height: 100%; top:0; } .bl{ left: 0; } .br{ right: 0; } header{ width: 100%; height: 100px; top: 0; } footer{ width: 100%; height: 48px; bottom: 0; } .left, .right{ width: 50%; float: left; height: 100%; min-height: 100px; } .left .content{ /* margin: 100px 0 48px 48px;*/ margin: 0 0 0 48px; } .right .content{ /* margin: 100px 48px 48px 0;*/ margin: 0 48px 0 0; } .frame .content{ /* position: relative; top: 150px;*/ opacity: 1; filter: alpha(opacity = 100); -webkit-transition:opacity 0.4s ease-in-out 0.2s; -moz-transition:opacity 0.4s ease-in-out 0.2s; -ms-transition:opacity 0.4s ease-in-out 0.2s; -o-transition:opacity 0.4s ease-in-out 0.2s; transition:opacity 0.4s ease-in-out 0.2s; } .frame_active .content{ /*top: 0;*/ opacity: 1; filter: alpha(opacity = 100); } /*PAS DE VIDEO*/ .content a.play_video_home_mob, .content a.Vvideo_mob{ display: none; } html.no-video .play_video_home, html.no-video .Vvideo, html.no-video .overlay_image, html.no-video .contains{ display: none !important; } /*LIENS ENCADRES*/ .centre a, .content a{ font-family: Arial, Helvetica, sans-serif; border: 1px solid rgba(255,255,255,0.6); text-transform: uppercase; color: #FFF; font-size: 16px; text-decoration: none; padding: 8px 16px; display: inline-block; margin: 0 auto; position: relative; } .content a.img_exp, .content a.img_exp_mob{ border: none; background: transparent; padding: 0; display: inline-block; /* margin-bottom: 50px;*/ } .content a.img_exp_mob{ display: none; } .content a.form2, .content a.form_achat2 .line_submit a.aj_link{ border: 1px solid rgba(0,0,0,0.4); color: #000; } .submit{ border: 1px solid rgba(0,0,0,0.4); text-transform: uppercase; color: #000; font-size: 16px; text-decoration: none; padding: 0; display: inline-block; margin: 0 auto; position: relative; } .centre a .abt, .centre a .abr, .centre a .abb, .centre a .abl, .content a .abt, .content a .abr, .content a .abb, .content a .abl{ position: absolute; background:#FFF; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } /*.submit .abt, .submit .abr, .submit .abb, .submit .abl, .content a.form2 .abt, .content a.form2 .abr, .content a.form2 .abb, .content a.form2 .abl, .line_submit a.aj_link .abt, .line_submit a.aj_link .abr, .line_submit a.aj_link .abb, .line_submit a.aj_link .abl, .send .abt, .send .abr, .send .abb, .send .abl,*/ .submit > span, .content a.form2 > span, .content a.form_achat2 > span, .line_submit a.aj_link > span, .send > span, #preuve .line2 .btn_parc > span{ position: absolute; background:#000; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .centre a .abt, .content a .abt, .submit .abt, .send .abt, #preuve .line2 .btn_parc .abt{ width: 0; height: 1px; top: -1px; left: 0; /*transition:0.1s;*/ } .centre a .abb, .content a .abb, .submit .abb, .send .abb, #preuve .line2 .btn_parc .abb{ width: 0; height: 1px; bottom: -1px; right: 0; /*transition:0.1s all 0.2s;*/ } .centre a .abr, .content a .abr, .submit .abr, .send .abr, #preuve .line2 .btn_parc .abr{ width: 1px; height: 0; top: 0px; right: -1px; /*transition:0.1s all 0.1s;*/ } .centre a .abl, .content a .abl, .submit .abl, .send .abl, #preuve .line2 .btn_parc .abl{ width: 1px; height: 0; bottom: 0px; left: -1px; /*transition:0.1s all 0.3s;*/ } .centre a:hover .abt, .centre a:hover .abb, .content a.onHover .abt, .content a.onHover .abb, .content a:hover .abt, .content a:hover .abb, .submit:hover .abt, .submit:hover .abb, .line_submit a.aj_link:hover .abt, .line_submit a.aj_link:hover .abb, .send:hover .abb, .send:hover .abt, #preuve .line2 .btn_parc:hover .abb, #preuve .line2 .btn_parc:hover .abt{ width: 100%; } .centre a:hover .abl, .centre a:hover .abr, .content a.onHover .abl, .content a.onHover .abr, .content a:hover .abl, .content a:hover .abr, .submit:hover .abl, .submit:hover .abr, .line_submit a.aj_link:hover .abl, .line_submit a.aj_link:hover .abr, .send:hover .abl, .send:hover .abr, #preuve .line2 .btn_parc:hover .abl, #preuve .line2 .btn_parc:hover .abr{ height: 100%; } /*CUR*/ .cur{ opacity: 0; filter: alpha(opacity = 0); position: absolute; bottom:-84px; left: 50%; margin-left: -42px; width: 84px; height: 84px; /*background: url(http://www.galenic.fr/cell-capital/img/sprite.png) -20px 20px no-repeat #FFF;*/ /*background: #FFF;*/ background: #FFF; -webkit-border-radius: 42px; -moz-border-radius: 42px; border-radius: 42px; -webkit-box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.2); z-index: 5; -webkit-transition: .4s ease-in-out; -moz-transition: .4s ease-in-out; -ms-transition: .4s ease-in-out; -o-transition: .4s ease-in-out; transition: .4s ease-in-out; } #home_prod .cur img{ /* animation : bouge 0.7s infinite;*/ margin-top: 15px; /*margin-left: 30px;*/ -webkit-animation: bouge .7s linear infinite alternate; -moz-animation: bouge .7s linear infinite alternate; -o-animation: bouge .7s linear infinite alternate; -ms-animation: bouge .7s linear infinite alternate; animation: bouge .7s linear infinite alternate; } .cur img{ /*display:none; margin-bottom:-10px; margin-left: 30px; */ margin-top: 20px; -webkit-transition: .4s ease-in-out; -moz-transition: .4s ease-in-out; -ms-transition: .4s ease-in-out; -o-transition: .4s ease-in-out; transition: .4s ease-in-out; /*-webkit-transition: .4s ease-in-out; -moz-transition: .4s ease-in-out; -ms-transition: .4s ease-in-out; -o-transition: .4s ease-in-out; transition: .4s ease-in-out;*/ } .cur:hover img{ opacity: 0.4; } .frame_active .cur{ opacity: 1; filter: alpha(opacity = 100); bottom: 6px; text-align: center; } .frame_active .cur:hover{ /*animation : bouge 0.7s infinite;*/ } @keyframes bouge{ from {margin-top:15px; opacity: 0.2; } to {margin-top:25px; opacity: 1; } } @-webkit-keyframes bouge{ from {margin-top:15px; opacity: 0.2; } to {margin-top:25px; opacity: 1; } } @-moz-keyframes bouge{ from {margin-top:15px; opacity: 0.2; } to {margin-top:25px; opacity: 1; } } @-o-keyframes bouge{ from {margin-top:15px; opacity: 0.2; } to {margin-top:25px; opacity: 1; } } @keyframes bouge{ from {margin-top:15px; opacity: 0.2; } to {margin-top:25px; opacity: 1; } } /*SIDE NAV*/ .side{ position: fixed; top: 50%; margin-top: -37px; right: -84px; z-index: 35; opacity: 0; filter: alpha(opacity = 0); -webkit-transition: .4s ease-in-out; -moz-transition: .4s ease-in-out; -ms-transition: .4s ease-in-out; -o-transition: .4s ease-in-out; transition: .4s ease-in-out; } .side.onview{ right: 84px; opacity: 1; filter: alpha(opacity = 100); } .side ul{ margin: 0; padding: 0; } .side ul li{ display: block; height: 18px; margin-bottom: 8px; } .side ul li.hid{ display: none; } .side ul li a{ /*display: block; height: 13px; width: 13px; border-radius: 18px; padding: 2px; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -ms-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; border: 1px solid transparent; margin: 0 auto; position: relative;*/ } .side ul li a{ border: 1px solid transparent; border-radius: 18px; display: block; height: 13px; margin: 0 0 0 auto; overflow: hidden; padding: 2px; position: relative; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; width: 13px; z-index: 2; background: rgba(0,0,0,0); } .side ul li.select a{ border: 1px solid rgba(255,255,255,0.8); } a .titre_page{ /*position: absolute; right: 0; padding-right: 22px; text-align: right; top: 0; width: 200px; height: 0; text-decoration: none; text-transform: uppercase; color:#FFF; overflow: hidden; opacity: 0; filter: alpha(opacity = 0); font-size: 13px;*/ -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; color: #000; font-size: 9px; opacity: 1; filter: alpha(opacity = 100); overflow: hidden; position: absolute; right: 15px; /*padding: 0 21px;*/ text-align: center; text-decoration: none; /*text-transform: uppercase;*/ top: 0; width: 0; z-index: 2; } .inner { /*overflow: hidden;*/ font-family: Arial, Helvetica, sans-serif; position: relative; width: auto; padding: 0 10px; text-transform: uppercase; /*border: 1px solid #4d4d4d; background: #000;*/ margin-top: 2px; line-height: 13px; letter-spacing: 0.05em; -webkit-transition: 0.3s ease-in-out; -moz-transition: 0.3s ease-in-out; -ms-transition: 0.3s ease-in-out; -o-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out ; } .inner:after { /* content: ' '; position: absolute; display: block; height: 1px; width: 13px; background: #4d4d4d; right: -13px; top: 7px;*/ } /*.type2 .inner { color:#000; background: #FFF; border: 1px solid #4d4d4d; } .type2 .inner:after { background: #4d4d4d; }*/ .no-touch .side ul li a:hover{ border: 1px solid #FFf; /* opacity: 1; filter: alpha(opacity = 100);*/ /*width: 200px; height: 18px;*/ /*background: rgba(0,0,0,0.9);*/ background: #FFF; } .no-touch .side ul li a:hover .titre_page{ opacity: 1; filter: alpha(opacity = 100); } .side ul li a .rond{ width: 9px; height: 9px; background: #FFF; border-radius: 12px; border: 1px solid #000; display: block; margin: 1px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; /**/ position: absolute; top: 2px; right: 2px; overflow: hidden; } .side ul li a .rond_2{ /*position: absolute; width: 12px; height: 12px; /*bottom: -12px;*/ bottom: 0; opacity: 0; background: #000; left: 0; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;*/ } .no-touch .side ul li a:hover{ /*background: rgba(0,0,0,0.9);*/ background: #FFF; border: 1px solid #FFF; /* border: 1px solid rgba(255,255,255,0.3);*/ } .no-touch .side ul li a:hover .rond{ background: #000; } .side ul li a:hover .rond .rond_2{ /*bottom: 0; opacity: 1;*/ } .side ul li:last-child { display: none; -webkit-transition: -webkit-transform 0.3s ease; transition: transform 0.3s ease; z-index: 1; } .side ul li:last-child a { position: absolute; /*background: none repeat scroll 0 0 #000;*/ background: rgba(0,0,0,0.5); border: 1px solid #fff; right: 0; margin: 0; } /*.side ul li.select:first-child ~ li:last-child { -webkit-transform: translateY(-156px); transform: translateY(-156px); } .side ul li.select:nth-child(2) ~ li:last-child { -webkit-transform: translateY(-130px); transform: translateY(-130px); } .side ul li.select:nth-child(3) ~ li:last-child { -webkit-transform: translateY(-104px); transform: translateY(-104px); } .side ul li.select:nth-child(4) ~ li:last-child { -webkit-transform: translateY(-78px); transform: translateY(-78px); } .side ul li.select:nth-child(5) ~ li:last-child { -webkit-transform: translateY(-52px); transform: translateY(-52px); } .side ul li.select:nth-child(6) ~ li:last-child { -webkit-transform: translateY(-26px); transform: translateY(-26px); } .side ul li a { -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }*/ .no-touch .side ul li.puce_dd a:hover{width: 78px;} .no-touch .side ul li.puce_dd a:hover .titre_page{width: 65px;} .no-touch .side ul li.puce_dd a .titre_page .inner{width: 48px;} .no-touch .side ul li.puce_fil a:hover{width: 178px;} .no-touch .side ul li.puce_fil a:hover .titre_page{width: 165px;} .no-touch .side ul li.puce_fil a .titre_page .inner{width: 150px;} .no-touch .side ul li.puce_ga a:hover{width: 163px;} .no-touch .side ul li.puce_ga a:hover .titre_page {width: 150px;} .no-touch .side ul li.puce_ga a .titre_page .inner{width: 135px;} .no-touch .side ul li.puce_pro a:hover{width: 128px;} .no-touch .side ul li.puce_pro a:hover .titre_page{width: 115px;} .no-touch .side ul li.puce_pro a .titre_page .inner{width: 100px;} .no-touch .side ul li.puce_cor a:hover{ width: 163px;} .no-touch .side ul li.puce_cor a:hover .titre_page{ width: 150px;} .no-touch .side ul li.puce_cor a .titre_page .inner{ width: 135px;} .no-touch .side ul li.puce_car a:hover{ width: 203px;} .no-touch .side ul li.puce_car a:hover .titre_page{ width: 190px;} .no-touch .side ul li.puce_car a .titre_page .inner{ width: 175px;} .side.type2 ul li a { /*background: rgba(0,0,0,0.8);*/ background: transparent; border-color: transparent; } .side.type2 ul li.select a { border-color: rgba(0,0,0,1); } .side.type2 ul li a .titre_page { color: #FFF; } .side.type2 ul li a .rond { background: none repeat scroll 0 0 #000; /*background: rgba(0,0,0,0.8);*/ border-color: transparent; } /*.side.type2 ul li a .rond .rond_2{ background: none repeat scroll 0 0 #FFF; }*/ .no-touch .side.type2 ul li a:hover .rond { background: #FFF; } .no-touch .side.type2 ul li a:hover { background: #000; border-color: rgba(0,0,0,1); } /*HEADER*/ header{ text-align: center; } .logo a{ padding: 11px 20px 7px; display: block; margin: 0 auto; width: 150px; } .menu, .go_home{ display: none; } header nav.mobile, .fond_menu_phone { display: none; } .fond_menu_phone { position: fixed; top: 0; left: 0; background: rgba(255,255,255,0.7); width: 100%; height: 100%; z-index: 4; } header nav ul{ list-style: none; padding: 0; margin: 0; background: url(http://www.galenic.fr/cell-capital/img/nav_bg.png) center center / 88% 100% no-repeat transparent; padding: 0 0; /*font-size: 14px;*/ font-size: 11px; line-height: 13px; text-transform: uppercase; letter-spacing: 0.1em; font-family: Arial, Helvetica, sans-serif; } header nav ul li{ display: inline-block; padding: 14px 0 13px; /*color: #000;*/ /*color: #4d4d4d;*/ color:#5d5d5d; margin-left: -5px; /* -webkit-transition: color 0.4s; -moz-transition: color 0.4s; -ms-transition: color 0.4s; -o-transition: color 0.4s; transition: color 0.4s;*/ } header nav ul li:last-child a, header nav ul li:last-child:hover a{ border-right: none; background: none; } header nav ul li a{ text-decoration: none; color: inherit; /*padding: 0 22px 0 20px;*/ padding: 0 16px; /*border-right: 1px solid #ddd;*/ background: url(http://www.galenic.fr/cell-capital/img/br.png) right center no-repeat; position: relative; height: 13px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } header nav ul li a:after{ /*content: ' '; position: absolute; width: auto; left: 20px; right: 100%; height: 1px; background: #000; bottom:0px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s;*/ } header nav ul li:hover{ /* background: #000; color:#FFF;*/ } header nav ul li:hover a{ /* border-right: 1px solid transparent;*/ color: #000; } header nav ul li a:hover:after{ /* width: 100%;*/ right: 22px; } header nav ul:hover > li a:hover { opacity: 1; filter: alpha(opacity = 100); } header nav ul:hover > li a { opacity: 0.60; filter: alpha(opacity = 60); } footer{ /*color: #010101;*/ color: #7c7c7c; } .foot1{ /*width: 740px; margin: 0 auto; text-align: center;*/ float: left; left: 50%; /*margin-left: -305px;*/ margin-left: -345px; position: relative; text-align: center; /*width: 710px;*/ width: 690px; } .foot1 .f1_left{ float: left; margin-top: 15px; } .foot1 ul{ float: left; list-style: none; font-size: 10px; text-transform: uppercase; margin: 18px 0 0; padding: 0 16px; } .foot1 ul li{ display: inline; padding: 0 8px; } .foot1 ul li a{ text-decoration: none; color: inherit; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .foot1 ul li a:hover{ color: #000; } .foot1 .f1_right{ float: right; margin-top: 12px; } .foot1 .f1_right .fb{ display: inline-block; background: url(http://www.galenic.fr/cell-capital/img/rs.png) left top no-repeat; width: 24px; height: 24px; } .remerciements .pt2 a.fb{ background: url(http://www.galenic.fr/cell-capital/img/rs.png) left top no-repeat; width: 24px; height: 24px; border: none; padding: 0; margin-bottom: -6px; } .foot1 .f1_right .yt{ display: inline-block; background: url(http://www.galenic.fr/cell-capital/img/rs.png) -33px top no-repeat; width: 24px; height: 24px; margin-left: 6px; } .foot1 .f1_right a{ -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .foot1 .f1_right a:hover{ opacity: 0.7; filter: alpha(opacity = 70); } .foot2{ /* position: absolute; font-size: 11px; line-height: 14px; left: 77%; left: calc(100% - 550px); top: 6px;*/ /*float: left;*/ font-size: 10px; /*left: 50%;*/ line-height: 14px; position: relative; margin:6px 0 0 30px; float: right; margin-right: 48px; } /*CREDITS*/ #credits{ position: fixed; top:100%; left: 0; background: rgba(255,255,255,0.95); width: 100%; height: 100%; -webkit-transition: all .7s ease-in-out; -moz-transition: all .7s ease-in-out; -ms-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; transition: all .7s ease-in-out; /*opacity: 0;*/ z-index: 36; } #credits.open{ top: 0%; /*opacity: 1;*/ } .popin_credits{ background: none repeat scroll 0 0 #fff; left: 50%; position: absolute; top: 50%; padding: 0; width: 444px; margin-left: -222px; height: 550px; -webkit-transition: all .8s ease-in-out .1s; -moz-transition: all .8s ease-in-out .1s; -ms-transition: all .8s ease-in-out .1s; -o-transition: all .8s ease-in-out .1s; transition: all .8s ease-in-out .1s; } #credits.open .popin_credits{ margin-top: -250px; } .wrapp-credits{ height: 100%; position: relative; width: 100%; } .close_credits{ display: block; margin: 35px auto 0; width: 34px; height: 34px; background: url(http://www.galenic.fr/cell-capital/img/close_credits.png) center center no-repeat; cursor: pointer; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; } .close_credits:hover{ opacity: 0.6; } .part_c{ position: relative; text-align: center; margin-top: 28px; opacity: 0; top: 25%; } .part_c.pf_credits{ -webkit-transition: .8s ease-in-out .4s; -moz-transition: .8s ease-in-out .4s; -ms-transition: .8s ease-in-out .4s; -o-transition: .8s ease-in-out .4s; transition: .8s ease-in-out .4s; } #credits.open .part_c.pf_credits{ opacity: 1; top: 0; } .part_c.fk_credits{ -webkit-transition: .8s ease-in-out .5s; -moz-transition: .8s ease-in-out .5s; -ms-transition: .8s ease-in-out .5s; -o-transition: .8s ease-in-out .5s; transition: .8s ease-in-out .5s; } #credits.open .part_c.fk_credits{ opacity: 1; top: 0; } .part_c > img, .part_c > a{ display: block; } .part_c > img{ margin: 0 auto; } .part_c > a{ text-transform: uppercase; font-size: 13px; color: #000; text-decoration: none; margin-top: 25px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .part_c > a:hover{ color: #636363; } .part_c > p{ color: #636363; font-size: 13px; margin-top: 5px; } /*SEMANTIQUE*/ .centre.no-rel{ position: static; } /* ========================================================================== PRE-HOME ========================================================================== */ #pre-home{ /*background: url(http://www.galenic.fr/cell-capital/img/bg_pre-home.jpg) center center no-repeat; background-size: cover;*/ /*background: url(http://www.galenic.fr/cell-capital/img/bg_pre-home.jpg) left 100px no-repeat; /*background-size: auto 70%;*/ /*background-size: auto 91%;*/ } #pre-home .sequence-canvas li{ /*position: relative; height: 100%;*/ } .cell{ position: absolute; right: 48px; max-width: 60%; height: 1050px; top: 50%; margin-top: -525px; overflow: hidden; z-index: 0; background: url(http://www.galenic.fr/cell-capital/img/cell.png) center center no-repeat; background-size: 100% auto; /*width: 60%;*/ width: 50%; } .cell img{ max-width: 100%; vertical-align: middle; } .centre{ padding-top: 100px; color: #FFF; text-align: center; position: relative; z-index: 1; } .centre h1{ text-align: center; text-transform: uppercase; font-weight: normal; font-size: 55px; line-height: 50px; text-shadow: 0 0 20px rgba(0,0,0,0.8); margin-top: 45px; } .centre h1 span{ /*font-family: 'HelveticaNeue-Thin', Arial, Helvetica, sans-serif;*/ font-family: HelveticaNeueLT-Thin; font-weight: normal; font-style: normal; font-size: 25px; line-height: 19px; display: block; margin-bottom: 30px; } .centre h1 span:last-child{ font-size: 20px; margin-top: 10px; letter-spacing: 0.03em; } .centre a{ background: rgba(0,0,0,0.4); } .portrait_studio{ width: 350px; margin: 70px auto 0; } .mobile_xperience{ text-transform: uppercase; /*font-family: 'HelveticaNeue-Thin', Arial, Helvetica, sans-serif;*/ font-family: HelveticaNeueLT-Thin; font-weight: normal; font-style: normal; font-size: 12px; line-height: 18px; letter-spacing: 0.15em; color: #FFF; text-align: center; /*position: absolute; bottom: 6%; left: 50%; margin-left: -130px;*/ z-index: 2; } .mobile_xperience p{ margin: 3% 0 0 0; } .mobile_xperience a{ border: none; padding: 0; /*width: 45px; height: 45px;*/ display: inline-block; margin: 5px; } .mobile_xperience a.itunes{ /*background: url(http://www.galenic.fr/cell-capital/img/sprite.png) left -50px no-repeat transparent;*/ } .mobile_xperience a.android{ margin: 9px 5px; } .image_back{ position: absolute; top: 0; left: 0; width: 100%; height: auto; } #pre-home .content{ text-align: center; position: relative; z-index: 2; } #home_cc .content{ padding-top: 0 !important; } #home_vid .content{ text-transform: uppercase; color: #FFF; z-index: 3; position: relative; } #home_vid .content p{ margin-bottom: 30px; font-size: 30px; } #home_ps .content p{ color: #FFF; font-size: 22px; text-transform: uppercase; position: relative; } #home_vid .content p span, #home_ps .content p span{ font-size: 15px; display: block; margin-top: 10px; } #pre-home .video_container{ background: transparent; } .sequence-pagination{ position: absolute; text-align: center; width: 100%; /*bottom: 10%;*/ bottom: 75px; z-index: 5; margin: 0; padding: 0; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out; } .sequence-pagination li{ width: 10px; height: 10px; margin: 2px; border-radius:100%; padding: 1px; position: relative; display: inline-block; border: 1px solid rgba(125, 156, 178, 0.6); background: #FFF; cursor: pointer; } .sequence-pagination li .rond{ width: 10px; height: 10px; border-radius:100%; background: #FFF; -webkit-transition: 0.3s ease-in; -moz-transition: 0.3s ease-in; -ms-transition: 0.3s ease-in; -o-transition: 0.3s ease-in; transition: 0.3s ease-in; } .sequence-pagination li:hover .rond, .sequence-pagination li.current .rond{ background: #000; } #home_vid .contains{ -webkit-transform-style: preserve-3d; /*opacity: 0;*/ -webkit-transition: 0.2s ease-in; -moz-transition: 0.2s ease-in; -ms-transition: 0.2s ease-in; -o-transition: 0.2s ease-in; transition: 0.2s ease-in; } #pre-home .overlay{ /*background: url("http://www.galenic.fr/cell-capital/img/texture.png") repeat scroll left top transparent;*/ background: rgba(0,0,0,0.15); z-index: 1; } #home_vid.vuvid .contains{ opacity: 1; } #home_vid.vuvid .overlay{ opacity: 0; } #pre-home.playing .sequence-pagination{ bottom: -5%; } #pre-home.playing .sequence-prev{ left: -5%; } #pre-home.playing .sequence-next{ right: -5%; } #home_ps .overlay_image{ background: transparent; } #home_vid .overlay_image{ background: transparent; } .content a.lien_exp_mob{ display: none; } /* ========================================================================== MODIFACE EXPERIENCE ========================================================================== */ #experience{ overflow: auto; min-height: 1023px !important; } .iframe_cont{ margin: 100px 48px 48px; min-height: 875px; position: relative; width: auto; height: auto; } .iframe_cont iframe{ position: absolute; height: 100%; width: 100%; } .overlay{ background: url(http://www.galenic.fr/cell-capital/img/texture.png) top left repeat rgba(0,0,0,0.2); position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #video .overlay{ background: url(http://www.galenic.fr/cell-capital/img/texture02.png) top left repeat transparent; } .overlay_image{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; /*background: url(http://www.galenic.fr/cell-capital/img/bg_video.jpg) center center / cover transparent;*/ background:url("http://www.galenic.fr/cell-capital/img/bg_video.jpg") no-repeat scroll center center / 100% auto #000; margin-top: 100px; } /* ========================================================================== PRODUITS ========================================================================== */ /*HOME PRODUITS*/ #home_prod{ /*background: url(http://www.galenic.fr/cell-capital/img/bg_home_prod.jpg) center center no-repeat; background-size: cover;*/ background: url(http://www.galenic.fr/cell-capital/img/bg_home_prod.jpg) left 100px no-repeat; background-size: auto 91%; color: #FFF; text-transform: uppercase; } #home_prod .right{ text-align: center; padding-right: 48px; } #home_prod p.p_h1{ font-size: 30px; text-transform: uppercase; } #home_prod h1{ /*font-size: 71px;*/ font-size: 56px; line-height: 70px; font-weight: normal; text-shadow: 0 0 20px rgba(0,0,0,0.8); /*margin-right: 48px;*/ letter-spacing: 0.01em; margin-bottom: 25px; margin-top: 30px; } #home_prod h1 span{ font-size: 16px; display: block; line-height: 34px; letter-spacing: 0.05em; } #home_prod h2:before{ content: ' '; position: absolute; background: #FFF; width: 30px; margin-left: -15px; left: 50%; top: 0; height: 1px; } #home_prod h2{ margin-top: 0; font-size: 16px; line-height: 24px; font-weight: normal; text-shadow: 0 0 20px rgba(0,0,0,0.8); /*margin-right: 48px;*/ letter-spacing: 0.05em; padding-top: 30px; position: relative; margin-bottom: 25px; } #home_prod p{ text-transform: none; font-size: 14px; letter-spacing: 0.05em; line-height: 20px; margin-top: 0; } #home_prod .content{ margin-left: -100px; } /*VIDEO*/ .video-js{ height: 100%; width: 100%; } #video{ background: none; background: url(http://www.galenic.fr/cell-capital/img/bg_video.jpg) center center no-repeat; background-size: cover; } #video .close_vid, #pre-home .close_vid{ position: absolute; width: 46px; height: 46px; background: url(http://www.galenic.fr/cell-capital/img/close_vid.png) top left no-repeat; cursor: pointer; top: 120px; right: 71px; opacity: 0; filter: alpha(opacity = 0); z-index: 2; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } #video.playing .close_vid, #pre-home.playing .close_vid{ opacity: 0.6; filter: alpha(opacity = 60); } #video.playing .close_vid:hover, #pre-home.playing .close_vid:hover{ opacity: 1; filter: alpha(opacity = 100); } .no-touch .video_container, .no-touch .contains{ /* display:none;*/ } .contains{ position: absolute; top: 100px; width: 100%; height: 100%; left: 0; z-index: 0; background: #000; } .contains.c_home{ opacity: 0; filter: alpha(opacity = 0); z-index: 0; background: #000; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .contains.c_home.vu{ opacity: 1; filter: alpha(opacity = 100); } .video_container { position: relative; /*top: 100px; width: calc(100%-50px); left: 25px;*/ padding-top: 56.25%; margin: 0 48px; background: #000; } #pre-home .video_container { padding-top: 0; } .video_container #video_prod, .video_container #video_home, .video_container #video_fond, .video_container #video_fond_cc, .video_container #video_fond_exp { display: block; position: absolute; width: 100%; height: 100%; top: 0; } /*#video_prod{ position: absolute; width: 924px; left: 25px; height: auto; top: 100px; }*/ #video a.mobile_vid{ display: none; } #video .content{ position: relative; z-index: 2; color: #FFF; text-align: center; } .touch #video .content{ /* position: absolute; top: 0; width: 100%;*/ } #video .content h1{ text-transform: uppercase; font-size: 40px; line-height: 45px; font-weight: normal; letter-spacing: 0.05em; margin-bottom: 40px; } #video .content h1 span{ font-size: 20px; display: block; line-height: 30px; letter-spacing: 0.15em; } #video .content p.p1:before{ content:' '; position: absolute; width: 32px; left: 50%; margin-left: -16px; top: -15px; height: 1px; background: #FFF; } #video .content p.p1{ text-transform: uppercase; font-size: 14px; line-height: 24px; position: relative; letter-spacing: 0.15em; padding-top: 20px; margin-bottom: 25px; } #video .content p.p2{ text-transform: none; font-size: 12px; line-height: 22px; letter-spacing: 0.15em; margin: 30px 0 40px; } #video .content p.p3{ font-size: 12px; letter-spacing: 0.15em; margin-top: 30px; } #video .cur.cache{ opacity: 0; filter: alpha(opacity = 0); bottom:-48px; } #video .content{ /* margin-top: 0; -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -ms-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; transition: 0.4s ease-in-out;*/ } #video.frame_active .content.vuvid{ /*margin-top: -100px;*/ -webkit-transform: translateY(-10%); -moz-transform: translateY(-10%); -ms-transform: translateY(-10%); -o-transform: translateY(-10%); transform: translateY(-10%); opacity: 0; filter: alpha(opacity = 0); } /*GLOBAL*/ #global .left{ background:#FFF; color: #000; text-align: center; text-transform: uppercase; } #global .right{ background:#000; } #global a{ color: #000; } #global a .abt, #global a .abr, #global a .abb, #global a .abl{ background: #000; } #global h1{ font-size: 50px; font-weight: normal; margin-bottom: 25px; } #global h1 span{ font-size: 20px; display: block; line-height: 16px; } #global h2{ font-size: 50px; font-weight: normal; position: relative; margin: 0 0 10px 0; padding: 31px 0 0 0; } #global h2:before{ content:' '; position: absolute; width: 40px; left: 50%; margin-left: -20px; top: 0; height: 1px; background: #a9a5a5; } #global p{ margin: 10px 0 40px; font-size: 15px; letter-spacing: 0.1em; } #global .right{ text-align: center; } #global .content a{ border-color: #aaa; } .produits{ display: inline-block; /*margin: 71px auto 0;*/ /*margin: 90px auto 0;*/ margin: 100px auto 0; /*max-width: 100%;*/ /*width: 87%;*/ /*max-width: 75%;*/ max-width: 65%; } .produits:hover > .prod:hover { opacity: 1; filter: alpha(opacity = 100); } .produits:hover > .prod { opacity: 0.75; filter: alpha(opacity = 75); } .prod{ float: left; padding: 0 6px; position: relative; /*max-width: 20%;*/ /*max-width: 22%;*/ max-width: 22%; display: block; opacity: 1; filter: alpha(opacity = 100); -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .prod img{ max-width: 100%; -webkit-transform: rotate(0), scale(1); -moz-transform: rotate(0), scale(1); -ms-transform: rotate(0), scale(1); -o-transform: rotate(0), scale(1); transform: rotate(0), scale(1); -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .prod:hover img{ -webkit-transform: rotate(0) scale(1.05); -moz-transform: rotate(0) scale(1.05); -ms-transform: rotate(0) scale(1.05); -o-transform: rotate(0) scale(1.05); transform: rotate(0) scale(1.05); } .prod:nth-child(3){ padding-right: 0; } .prod:last-child{ padding: 0; } .prod .more{ position: absolute; background: url(http://www.galenic.fr/cell-capital/img/sprite.png) top left no-repeat; width: 40px; height: 40px; left: 50%; margin-left: -20px; bottom:8%; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .prod:hover .more{ /*-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);*/ } .prod .more .arcContain { width:40px; height:40px; position: relative; } .prod .more .arc { width:40px; height:40px; } .prod:hover .archide, .prod:hover .archideLeft{ -webkit-animation: appear .3s ease-out forwards; -moz-animation: appear .3s ease-out forwards; -o-animation: appear .3s ease-out forwards; animation: appear .3s ease-out forwards; } /*GAMME*/ #gamme h1{ font-weight: normal; font-size: 20px; letter-spacing: 0.05em; margin-bottom: 45px:; } #gamme h2:before{ content:' '; position: absolute; width: 40px; left: 50%; margin-left: -20px; top: 0; height: 1px; background: #a9a5a5; } #gamme h2:after{ content:' '; position: absolute; width: 40px; left: 50%; margin-left: -20px; bottom: 0; height: 1px; background: #a9a5a5; } #gamme h2{ font-weight: normal; font-size: 34px; letter-spacing: 0.05em; line-height: 40px; position: relative; padding: 30px 0 20px; margin-top: 26px; margin-bottom: 28px; } #gamme h2 span{ display: block; font-size: 15px; letter-spacing: 0.15em; /*margin-top: 10px;*/ } #gamme p{ font-size: 15px; text-transform: none; margin-bottom: 30px; } #gamme h3{ font-weight: normal; font-size: 15px; letter-spacing: 0.05em; position: relative; margin-bottom: 35px; padding-bottom: 35px; } #gamme h3:after{ content:' '; position: absolute; width: 40px; left: 50%; margin-left: -20px; bottom: 0; height: 1px; background: #a9a5a5; } #gamme a{ border-color: #aaa; color: #000; } #gamme a .abt, #gamme a .abr, #gamme a .abb, #gamme a .abl{ background: #000; } #gamme a.voir_avis, #gamme .voir_avis{ display: block; padding: 0; text-decoration: underline; border: none; font-size: 12px; margin-top: 30px; } #gamme .voir_avis{ text-decoration: none; text-transform: none; } #gamme .slider{ } #gamme .slide .left{ background: #FFF; text-align: center; text-transform: uppercase; } #gamme .slide .right{ background: #000; text-align: center; text-transform: uppercase; } #gamme .backg{ position: absolute; top: 0; height: 100%; left: 50%; width: 50%; background: rgba(0,0,0,1); } #corpo{ text-align: center; } #corpo .backg{ position: absolute; top: 0; height: 100%; left: 0; width: 50%; background: rgba(0,0,0,1); } #corpo .slide .left, #corpo .left{ background: #000; color: #FFF; text-align: center; text-transform: uppercase; } #corpo .slide .right, #corpo .right{ background: #f6f6f6; text-align: center; text-transform: uppercase; overflow: hidden; } #corpo .right img{ /*max-width: 80%;*/ max-width: 70%; } #corpo h1{ /*font-size: 50px; line-height: 56px; letter-spacing: 0.1em;*/ font-weight: normal; text-transform: uppercase; margin-bottom: 20px; font-size: 34px; letter-spacing: 0.05em; line-height: 40px; } #corpo h2{ font-size: 15px; line-height: 20px; font-weight: normal; text-transform: uppercase; letter-spacing: 0.15em; margin-top: 0; } #corpo p:before{ content:' '; position: absolute; width: 40px; left: 50%; margin-left: -20px; top: 0; height: 1px; background: #FFF; } #corpo p{ font-size: 15px; text-align: center; width: 90%; padding: 35px; margin: 35px auto 20px; position: relative; text-transform: none; } /*#corpo p:after{ content:' '; position: absolute; width: 40px; left: 50%; margin-left: -20px; bottom: 0; height: 1px; background: #FFF; }*/ /*SEquence*/ #sequence, #sequence22, #sequence_home { width: 100%; height: 100%; position: relative; /* required */ min-height: 690px; } #sequence_home.etat1 .sequence-prev{ display: none !important; } #sequence_home.etat3 .sequence-next{ display: none !important; } #sequence > .sequence-canvas, #sequence2 > .sequence-canvas, #sequence_home > .sequence-canvas{ margin: 0; padding: 0; list-style: none; background: #FFF; } #sequence_home > .sequence-canvas{ background: transparent; } #corpo #sequence2 > .sequence-canvas{ background: #f6f6f6; } #sequence > .sequence-canvas li > .slide, #sequence2 > .sequence-canvas li > .slide, #sequence_home > .sequence-canvas li > .slide{ /* required */ position: absolute; width: 100%; height: 100%; /*left:10%;*/ opacity: 0; filter: alpha(opacity = 0); -webkit-transition: .6s ease-in-out; -moz-transition: .6s ease-in-out; -ms-transition: .6s ease-in-out; -o-transition: .6s ease-in-out; transition: .6s ease-in-out; } #sequence_home > .sequence-canvas li > .slide{ opacity: 1; } #sequence > .sequence-canvas li > .slide .right, #sequence2 > .sequence-canvas li > .slide .right{ position: relative; -webkit-transition: .6s ease-in-out; -moz-transition: .6s ease-in-out; -ms-transition: .6s ease-in-out; -o-transition: .6s ease-in-out; transition: .6s ease-in-out; } #sequence > .sequence-canvas li > .slide .right img, #sequence2 > .sequence-canvas li > .slide .right img{ left: 50%; margin-top: 120px; position: relative; /*-webkit-transition: .8s ease-in-out; -moz-transition: .8s ease-in-out; -ms-transition: .8s ease-in-out; -o-transition: .8s ease-in-out; transition: .8s ease-in-out;*/ opacity: 0; filter: alpha(opacity = 0); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } #sequence > .sequence-canvas li > .slide .left, #sequence2 > .sequence-canvas li > .slide .left{ opacity: 0; filter: alpha(opacity = 0); top: -30%; position: relative; -webkit-transition: .7s ease-in-out; -moz-transition: .7s ease-in-out; -ms-transition: .7s ease-in-out; -o-transition: .7s ease-in-out; transition: .7s ease-in-out; } #sequence > .sequence-canvas li > .slide .left .second, #sequence2 > .sequence-canvas li > .slide .left .second{ opacity: 0; filter: alpha(opacity = 0); top: -30%; position: relative; -webkit-transition: .7s ease-in-out 0.3s; -moz-transition: .7s ease-in-out 0.3s; -ms-transition: .7s ease-in-out 0.3s; -o-transition: .7s ease-in-out 0.3s; transition: .7s ease-in-out 0.3s; } #sequence > .sequence-canvas, #sequence2 > .sequence-canvas, #sequence_home > .sequence-canvas { /* required */ height: 100%; width: 100%; } #sequence_home > .sequence-canvas li{ /* left: 100%;*/ opacity: 0; -webkit-transition: .5s ease-out; -moz-transition: .5s ease-out; -ms-transition: .5s ease-out; -o-transition: .5s ease-out; transition: .5s ease-out; } #sequence_home > .sequence-canvas li.animate-in{ /*left: 0; */ opacity: 1; } #sequence > .sequence-canvas li.animate-in > .slide .right img, #sequence2 > .sequence-canvas li.animate-in > .slide .right img{ left: 0; opacity: 1; filter: alpha(opacity = 100); /*margin-top: 120px;*/ -webkit-transition: .8s ease-in-out; -moz-transition: .8s ease-in-out; -ms-transition: .8s ease-in-out; -o-transition: .8s ease-in-out; transition: .8s ease-in-out; } #sequence > .sequence-canvas li.first > .slide .right img, #sequence2 > .sequence-canvas li.first > .slide .right img{ left: 0; } #sequence > .sequence-canvas li.animate-out > .slide .right img, #sequence2 > .sequence-canvas li.animate-out > .slide .right img{ left: -50%; opacity: 0; filter: alpha(opacity = 0); -webkit-transition: .8s ease-in-out; -moz-transition: .8s ease-in-out; -ms-transition: .8s ease-in-out; -o-transition: .8s ease-in-out; transition: .8s ease-in-out; } #sequence > .sequence-canvas li.animate-in > .slide, #sequence2 > .sequence-canvas li.animate-in > .slide { opacity: 1; filter: alpha(opacity = 100); } #sequence > .sequence-canvas li.animate-in > .slide .left, #sequence2 > .sequence-canvas li.animate-in > .slide .left, #sequence > .sequence-canvas li.animate-in > .slide .left .second, #sequence2 > .sequence-canvas li.animate-in > .slide .left .second{ opacity: 1; filter: alpha(opacity = 100); top: 0; } #sequence > .sequence-canvas li.animate-in > .slide .right, #sequence2 > .sequence-canvas li.animate-in > .slide .right{ left: 0; } #sequence > .sequence-canvas li.animate-out > .slide .right, #sequence2 > .sequence-canvas li.animate-out > .slide .right{ opacity: 0; filter: alpha(opacity = 0); } #sequence > .sequence-canvas > li, #sequence2 > .sequence-canvas > li, #sequence_home > .sequence-canvas > li { /* required */ position: absolute; width: 100%; height: 100%; z-index: 1; display: block; margin: 0; padding: 0; } .sequence-next, .sequence-prev { opacity: 0; filter: alpha(opacity = 0); position: absolute; -webkit-transition: 0.4s; -moz-transition: 0.4s; -ms-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; } .frame_active .sequence-next, .frame_active .sequence-prev{ opacity: 1; filter: alpha(opacity = 100); } .arcContain { width:50px; height:50px; position: relative; } .arcContain:after, .arcContain:before { content: ' '; display: block; position: absolute; height: 2px; background: #FFF; border-radius:1px; -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #sequence2 .arcContain:after, #sequence2 .arcContain:before { background: #000; } .sequence-prev .arcContain:after{ left: 19px; top: 24px; width: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .sequence-prev .arcContain:before{ left: 19px; top: 24px; width: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .sequence-next .arcContain:after{ right: 19px; top: 24px; width: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .sequence-next .arcContain:before{ right: 19px; top: 24px; width: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } .arc { width:50px; height:50px; border-radius:50%; border:2px solid #FFF; position: absolute; top: 0; right: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #sequence2 .arc { border:2px solid rgba(0,0,0,0.6); } .archideLeft .arc { top: auto; bottom: 0; right: auto; left: 0; } .archide { width:50%; height:0%; position: absolute; top: 0; right: 0; overflow: hidden; } .archideLeft { top: auto; bottom: 0; right: auto; left: 0; } .no-touch .sequence-next:hover .archideLeft, .no-touch .sequence-prev:hover .archideLeft{ -webkit-animation: appear .25s ease-in .25s forwards; -moz-animation: appear .25s ease-in .25s forwards; -o-animation: appear .25s ease-in .25s forwards; animation: appear .25s ease-in .25s forwards; } .no-touch .sequence-next:hover .archide, .no-touch .sequence-prev:hover .archide { -webkit-animation: appear .25s ease-out forwards; -moz-animation: appear .25s ease-out forwards; -o-animation: appear .25s ease-out forwards; animation: appear .25s ease-out forwards; } .no-touch .sequence-prev:hover .arcContain:before { width: 16px; left: 17px; top: 19px; } .no-touch .sequence-next:hover .arcContain:before { width: 16px; right: 17px; top: 19px; } .no-touch .sequence-prev:hover .arcContain:after{ width: 16px; left: 17px; top: 30px; } .no-touch .sequence-next:hover .arcContain:after{ width: 16px; right: 17px; top: 30px; } @-webkit-keyframes appear { to { height: 100%; } } @-moz-keyframes appear { to { height: 100%; } } @-o-keyframes appear { to { height: 100%; } } @keyframes appear { to { height: 100%; } } #sequence .sequence-next, #sequence2 .sequence-next, #sequence_home .sequence-next { right: 10%; /*background: url(http://www.galenic.fr/cell-capital/img/sprite.png) -150px top no-repeat transparent;*/ } #sequence .sequence-next:after, #sequence2 .sequence-next:after, #sequence_home .sequence-next:after { content: ""; opacity: 0.8; filter: alpha(opacity = 80); top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; } #sequence_home .sequence-next:after { opacity: 0.15; filter: alpha(opacity = 15); } #sequence2 .sequence-next:after { content: ""; opacity: 0.5; filter: alpha(opacity = 50); } #sequence .sequence-next:after, #sequence_home .sequence-next:after { background: url(http://www.galenic.fr/cell-capital/img/sprite.png) -150px top no-repeat transparent; } #sequence2 .sequence-next:after { background: url(http://www.galenic.fr/cell-capital/img/sprite.png) -150px -50px no-repeat transparent } #sequence .sequence-prev, #sequence2 .sequence-prev{ left: 57%; /*background: url(http://www.galenic.fr/cell-capital/img/sprite.png) -100px top no-repeat transparent;*/ } #sequence_home .sequence-next { right: 7.5%; } #sequence_home .sequence-prev { left: 7.5%; } #sequence .sequence-prev:after, #sequence2 .sequence-prev:after, #sequence_home .sequence-prev:after { content: ""; opacity: 0.8; filter: alpha(opacity = 80); top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; } #sequence_home .sequence-prev:after { opacity: 0.15; filter: alpha(opacity = 15); } #sequence2 .sequence-prev:after { content: ""; opacity: 0.5; filter: alpha(opacity = 50); } #sequence .sequence-prev:after, #sequence_home .sequence-prev:after { background: url(http://www.galenic.fr/cell-capital/img/sprite.png) -100px top no-repeat transparent; } #sequence2 .sequence-prev:after { background: url(http://www.galenic.fr/cell-capital/img/sprite.png) -100px -50px no-repeat transparent; } /*#sequence2 .sequence-prev { left: 53%; ; }*/ .sequence-next, .sequence-prev { color: white; cursor: pointer; display: none; font-weight: bold; height: 50px; width: 50px; margin-top: 0; padding: 0; position: absolute; top: 50%; z-index: 30; /*background: #ACF;*/ } /*FINAL*/ #final { text-align: center; } #final .left{ background: url(http://www.galenic.fr/cell-capital/img/bg_final_left.jpg) center center; background-size: cover; color:#FFF; } #final .right, #final.limit .content{ background: url(http://www.galenic.fr/cell-capital/img/bg_final_right.jpg) center center; background-size: cover; color:#000; } #final .right a, #final.limit a{ color: #000; border-color: #AAA; } #final .right a .abt, #final .right a .abb, #final .right a .abr, #final .right a .abl, #final.limit a .abt, #final.limit a .abb, #final.limit a .abr, #final.limit a .abl{ background: #000; } #final .right .overlay, #final.limit .overlay{ background: url(http://www.galenic.fr/cell-capital/img/texture2.png) top left repeat transparent; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #final h1{ text-transform: uppercase; font-weight: normal; /*font-size: 35px;*/ font-size: 32px; line-height: 36px; letter-spacing: 0.1em; } #final .right h1{ margin-top: 33px; } #final h1 span{ font-size: 18px; display: block; padding: 0 40px; letter-spacing: 0.1em; line-height: 24px; margin-top: 30px; } #final .left .icon{ background: url(http://www.galenic.fr/cell-capital/img/sprite.png) -300px top no-repeat; width: 50px; height: 120px; margin: 0 auto; } #final .right .icon, #final.limit .icon{ background: url(http://www.galenic.fr/cell-capital/img/sprite.png) -200px top no-repeat; width: 100px; height: 95px; /*margin: 35px auto 0;*/ margin: 18px auto 17px; } /*FORMS*/ #echantillon, #avis_page, #final, #vos_avis, #preuve{ background: rgb(251,251,251); background: -moz-linear-gradient(top, rgba(251,251,251,1) 0%, rgba(251,251,251,1) 0%, rgba(244,244,244,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,251,251,1)), color-stop(0%,rgba(251,251,251,1)), color-stop(100%,rgba(244,244,244,1))); background: -webkit-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(251,251,251,1) 0%,rgba(244,244,244,1) 100%); background: -o-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(251,251,251,1) 0%,rgba(244,244,244,1) 100%); background: -ms-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(251,251,251,1) 0%,rgba(244,244,244,1) 100%); background: linear-gradient(to bottom, rgba(251,251,251,1) 0%,rgba(251,251,251,1) 0%,rgba(244,244,244,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#f4f4f4',GradientType=0 ); } #echantillon .left{ background: url(http://www.galenic.fr/cell-capital/img/bg_echantillon.jpg) center center no-repeat; background-size: cover; position: relative; } #avis_page .left{ /*background: url(http://www.galenic.fr/cell-capital/img/new_york.jpg) center center no-repeat;*/ background: url(http://www.galenic.fr/cell-capital/img/new_york.jpg) center bottom no-repeat; background-size: cover; position: relative; } #avis_page .left.time2015{ /*background: url(http://www.galenic.fr/cell-capital/img/new_york.jpg) center center no-repeat;*/ background: url(http://www.galenic.fr/cell-capital/img/avis_2015_3.jpg) center top no-repeat; background-size: cover; position: relative; } .prod_ech{ position: absolute; /*bottom:20px; bottom:100px;*/ width: 100%; width: calc(100% - 48px); text-align: center; margin-top: -300px; top: 50%; } .prod_ech img{ min-height: 80%; } .form_back{ padding: 11px; background: rgba(0,0,0,0.3); border-radius: 2px; margin: 0 5%; } form{ border-radius: 2px; background: #f4f4f4; box-shadow: 0 0 6px rgba(0,0,0,0.3); padding: 2.5% 1% 1% 1%; } #offre_essai{ padding-top: 2.5%; } .line{ float: left; width: 45%; padding: 0 2.5%; margin-bottom: 2.5%; position: relative; } .line2, .line3, .line4{ padding: 0 2.5%; margin-bottom: 2.5%; position: relative; } .line4{ margin-bottom: 0; } .sep{ background: #dedede; width: 95%; margin: 1.5% 2.5% 2.5% 2.5%; height: 1px; } .content.form h2, .content.form2 h2{ text-transform: uppercase; font-weight: normal; /*font-size: 34px;*/ font-size: 30px; text-align: center; letter-spacing: 0.05em; margin-bottom: 3%; } .content.form2 .content_avis{ margin-top: 40px; } .content.form2 .content_avis h2{ font-size: 22px; margin: 3% 0 1.5%; } .content.form h2.pharma{ margin: 25px auto 10px; font-size: 15px; } .store_loc{ margin-top: 10px; } .content.form h2 span, .content.form2 h2 span{ display: block; font-size: 12px; margin-top: 10px; letter-spacing: 0.1em; } .content_bot{ text-align: center; } .content_bot a{ color: #000; border: 1px solid rgba(0,0,0,0.4); } .content_bot a .abt, .content_bot a .abb, .content_bot a .abl, .content_bot a .abr, .content a.show_chance span{ background: #000; } form .line label, form .line3 label, form .line4 label{ display: block; /*font-family: 'HelveticaNeue-Thin', Arial, Helvetica, sans-serif;*/ font-family: HelveticaNeueLT-Thin; font-weight: normal; font-style: normal; text-transform: uppercase; font-size: 13px; letter-spacing: 0.1em; /*padding-left: 20px;*/ margin-bottom: 5px; color: #000; } form .line4 label{ width: 50%; float: left; } form .line2{ text-align: center; } form .line2 label{ /*display: block;*/ /*font-family: 'HelveticaNeue-Thin', Arial, Helvetica, sans-serif;*/ font-family: HelveticaNeueLT-Thin; font-weight: normal; font-style: normal; /*text-transform: uppercase;*/ font-size: 13px; letter-spacing: 0.15em; /*padding-left: 20px;*/ margin:0 0 5px; color: #000; /*float: left; width: 92%;*/ padding-left: 1%; text-align: center; } form .line2.full label{ letter-spacing: 0; } form .line2 label a{ color: inherit; text-transform: inherit; padding: 0; border: none; text-decoration: underline; font-size: inherit; font-family: inherit; } form .line2 input{ /* float: left;*/ margin-top: 3px; } form .line2 label span{ white-space: nowrap; } form input[type="text"], /*form select,*/ form textarea{ width: 96%; /*padding: 2%;*/ padding: 3px 2%; border: 1px solid #c6c6c6; background: #f4f4f4; border-radius: 4px; -webkit-appearance:none; /*font-family: 'HelveticaNeue-Thin', Arial, Helvetica, sans-serif;*/ font-family: HelveticaNeueLT-Thin; font-weight: normal; font-style: normal; /* box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;*/ line-height: 22px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; outline: none; font-size: 13px; letter-spacing: 0.05em; } form input[type="text"], form select{ height: 22px; padding: 3px 2%; /*-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;*/ } #preuve .chercher_sl{ /* margin-top: -2px;*/ } #preuve .select_date .selform select { /* padding: 3.4%;*/ } form .selform{ width: 100%; padding: 0; border: 1px solid #c6c6c6; background: #f4f4f4; border-radius: 4px; -webkit-appearance:none; /*font-family: 'HelveticaNeue-Thin', Arial, Helvetica, sans-serif;*/ font-family: HelveticaNeueLT-Thin; font-weight: normal; font-style: normal; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; line-height: 22px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; background: url(http://www.galenic.fr/cell-capital/img/sel.jpg) right center no-repeat; overflow: hidden; position: relative; } form select{ width: 110%; background: transparent; border:none; /*padding: 2%;*/ line-height: 22px; -webkit-appearance:none; box-sizing: content-box; /*font-family: 'HelveticaNeue-Thin', Arial, Helvetica, sans-serif;*/ font-family: HelveticaNeueLT-Thin; font-weight: normal; font-style: normal; outline: none; font-size: 13px; } form .line3 select{ padding: 1%; } form textarea{ height: 120px; } ::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder { font-style: italic; } p.avert{ text-align: center; font-size: 11px; margin: 2.5%; letter-spacing: 0.05em; } .line_submit{ text-align: center; margin: 2% 0 1%; } .submit{ width: 110px; margin: 0 auto; } form input[type="submit"]{ text-align: center; border: none; padding: 8px 16px; text-transform: uppercase; font-size: 16px; line-height: 22.4px; background: none; -webkit-appearance:none; outline: none; } form input[type="submit"]:focus{ -webkit-appearance:none; outline: none; } .line label.error, .line2 label.error, .line3 label.error, .line4 label.error, .line span, .line2 span, .line3 span, .line4 span{ bottom: -14px; margin-bottom: 0; font-size: 10px; left: 0; position: absolute; text-transform: none; color:red; opacity: 0.6; filter: alpha(opacity = 60); -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; padding-left: 18px; } .line span, .line2 span, .line3 span, .line4 span { opacity: 0; filter: alpha(opacity = 0); padding-left: 18px; } .line-peau span { padding-left: 0; } .line.error span, .line2.error span, .line3.error span, .line4.error span{ opacity: 0.6; filter: alpha(opacity = 60); } form .line-peau label{ padding-left: 0; text-transform: none; float: left; width: 49%; margin-right: 1%; line-height: 15px; display: inline-block; font-size: 12px; } form .line-peau .choix{ width: 49%; margin-left: 1%; float: left; position: relative; } form input[type="text"].error, /*form select.error,*/ form textarea.error, form .error input[type="text"], /*form .error select,*/ form .error textarea{ border: 1px solid red; } form .selform.error, form .error .selform{ border: 1px solid red; } #avis_page h1{ text-transform: uppercase; color: #FFF; font-size: 40px; letter-spacing: 0.15em; font-weight: normal; text-align: center; top: 20%; position: absolute; left: 0; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 48px; margin-top: 32px; } #avis_page h1 span{ display: block; font-size: 25px; } #avis_page h1 span.lot2{ display: block; margin-top: 25px; font-size: 20px; letter-spacing: 0.1em; } #avis_page .legend{ font-size: 10px; letter-spacing: 0.05em; color:#888; text-align: center; position: absolute; bottom: 60px; text-shadow: 0 0 3px #000; width: 80%; margin: 0 10%; padding-left: 0; left: 0; background: rgba(0,0,0,0.5); } #avis_page .legend a{ border: none; text-decoration: underline; text-transform: none; padding: 0; color:#888; font-size: inherit; } #avis_page .legend_right{ padding: 0 10px; font-size: 9px; letter-spacing: 0.05em; text-align: center; display: none; color:#555; } #avis_page .legend_right a{ border: none; text-decoration: underline; text-transform: none; padding: 0; color:#555; font-size: inherit; } .line_submit a{ margin: 0 35px; } #avis_page .content_avis{ margin: 0 5%; text-align: center; } #avis_page .content_avis #container_avis{ height: 85px; margin: 1% 0; } .content.remerciements a, .content .content_avis a{ border-color: #AAA; text-align: center; color: #000; } .content.remerciements a > span, .content .content_avis a > span{ background: #000; } /*REMERCIEMENTS*/ #echantillon .remerciements{ display: none; } .remerciements, .remerciementslimit{ text-align: center; } .remerciements h3, .remerciementslimit h3{ font-size: 20px; text-transform: uppercase; font-weight: normal; position: relative; margin: 0; padding: 30px 0; letter-spacing: 0.05em; } .remerciements h3:after, .remerciementslimit h3:after{ content:' '; position: absolute; width: 92px; left: 50%; margin-left: -46px; bottom: 0; height: 1px; background: #a9a5a5; } .remerciements .pt1, .remerciementslimit .pt1{ font-size: 15px; line-height: 19px; text-transform: none; font-weight: normal; position: relative; letter-spacing: 0.1em; margin: 0; padding: 30px 0; } .remerciements .pt1:after, .remerciementslimit .pt1:after{ content:' '; position: absolute; width: 22px; left: 50%; margin-left: -11px; bottom: 0; height: 1px; background: #a9a5a5; } .remerciements .pt2, .remerciementslimit .pt2{ font-size: 15px; line-height: 20px; letter-spacing: 0.05em; margin-top: 30px; text-transform: uppercase; margin-left: 10%; width: 80%; } .remerciements .pt3, .remerciementslimit .pt3{ font-size: 20px; line-height: 25px; text-transform: uppercase; letter-spacing: 0.1em; margin-left: 10%; text-transform: uppercase; width: 80%; } .remerciements .pt3 span, .remerciementslimit .pt3 span{ font-size: 15px; } .content a.show_chance{ color: #000; border-color: #aaa; margin: 10px; } #avis_page #container_avis .avis.vis{ padding-top: 5px; border-bottom: none; background: url(http://www.galenic.fr/cell-capital/img/bg_container_avis2.png) center bottom no-repeat; } .chances{ /*margin: 0 30px;*/ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.9); text-align: center; display: none; } .chances .close_chance{ position: absolute; width: 46px; height: 46px; background: url(http://www.galenic.fr/cell-capital/img/close_chance.png) top left no-repeat; cursor: pointer; top: 120px; right: 68px; } .chances.visible{ display: block; } .b_chance{ position: relative; /* background: #FFF;*/ padding-top: 40px; margin-top: 40px; } .b_chance p{ font-size: 15px; letter-spacing: 0.1em; margin: 5px 0; } .b_chance .fb_send p{ /* display: inline;*/ } .content .b_chance .fb_send a{ padding: 0; border: none; } .b_chance:before{ content: ' '; display: block; height: 1px; margin-left: -46px; left: 50%; width: 92px; background: #a9a5a5; position: absolute; top: 0; } .content_chance{ position: relative; border-radius: 2px; padding: 11px; } .fb_send, .email_send, .numero_send{ text-align: center; margin: 15px 0; } .b_chance input[type="text"]{ width: 175px; padding: 10px 5px; border: 1px solid #c6c6c6; background: #f4f4f4; border-radius: 4px; -webkit-appearance:none; /*font-family: 'HelveticaNeue-Thin', Arial, Helvetica, sans-serif;*/ font-family: HelveticaNeueLT-Thin; font-weight: normal; font-style: normal; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; line-height: 18px; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; margin: 0 10px 5px; text-align: left; } .b_chance .send{ background: none repeat scroll 0 0 rgba(0, 0, 0, 0); /*border: medium none;*/ font-size: 16px; padding: 8px 16px; text-align: center; text-transform: uppercase; cursor:pointer; position: relative; display: inline-block; border:1px solid #aaa; margin: 10px; } .fb-send, .fb-send span, .fb-send span iframe{ min-height: 22px; min-width: 69px; } .fb-send{ margin: 0 auto; } #avis_page .remerciements .pt3{ font-size: 20px; line-height: 25px; letter-spacing: 0.15em; margin-top: 40px; margin-bottom: 0; } #avis_page .remerciements h3{ padding-bottom: 40px; } .thx{ display: none; } .thx.show{ display: block; } /*PAGE CONSULTATIONS AVIS*/ #vos_avis{ text-align: center; } #vos_avis.inverse .left, #vos_avis.inverse .right { float: right; } #vos_avis.inverse .left .content { margin: 0 48px 0 0; } #vos_avis.inverse .right .content { margin: 0 0 0 48px; } #vos_avis a.aj_link{ border-color: #aaa; color: #000; text-align: center; margin-top: 50px; margin: 50px auto 0; } #vos_avis .right a .abt, #vos_avis .right a .abb, #vos_avis .right a .abr, #vos_avis .right a .abl { background: none repeat scroll 0 0 #000; } #vos_avis .left{ background: url(http://www.galenic.fr/cell-capital/img/bg_vos_avis.jpg) center center no-repeat; background-size: cover; position: relative; } #vos_avis h2{ text-transform: uppercase; font-size: 30px; text-align: center; font-weight: normal; letter-spacing: 0.1em; margin: 0 0 15px 0; } #vos_avis .head_avis p{ font-size: 12px; text-align: center; letter-spacing: 0.15em; position: relative; padding-top: 15px; margin-top: 15px; width: 80%; margin-left: 10%; } #vos_avis .head_avis p:before { background: none repeat scroll 0 0 #a9a5a5; content: " "; height: 1px; left: 50%; margin-left: -16px; position: absolute; top: -5px; width: 32px; } .filtres{ text-align: center; margin: 25px 0 40px; height: 24px; } .filtres a{ border: none; text-transform: none; color:#000; padding: 3px 12px 3px 25px; font-size: 12px; letter-spacing: 0.15em; background: url(http://www.galenic.fr/cell-capital/img/filtres.png) left 3px no-repeat; height: 18px; position: relative; } .filtre:before{ opacity: 0; filter: alpha(opacity = 0); content: ' '; position: absolute; left: 4px; top: 6px; width: 9px; height: 10px; background: #6a6a6a; border-radius: 2px; -webkit-transform: scale(0) rotate(0deg); -moz-transform: scale(0) rotate(0deg); -ms-transform: scale(0) rotate(0deg); -o-transform: scale(0) rotate(0deg); transform: scale(0) rotate(0deg); -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .filtre:hover:before{ opacity: 0.2; filter: alpha(opacity = 20); -webkit-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } .filtre_actif.filtre:before{ opacity: 1; filter: alpha(opacity = 100); -webkit-transform: scale(1) rotate(0deg); -moz-transform: scale(1) rotate(0deg); -ms-transform: scale(1) rotate(0deg); -o-transform: scale(1) rotate(0deg); transform: scale(1) rotate(0deg); } #container_avis{ height: 450px; max-height: 450px; margin: 0 4% 0 2%; /*font-family: 'HelveticaNeue-Light', Arial, Helvetica, sans-serif;*/ font-family: HelveticaNeueLT-Light; font-weight: normal; font-style: normal; text-align: left; /*padding: 10px 0 0 0;*/ background: url(http://www.galenic.fr/cell-capital/img/bg_container_avis.png) center top no-repeat; position: relative; } #vos_avis #container_avis:after{ content: ' '; position: absolute; background: url(http://www.galenic.fr/cell-capital/img/SHADOW.png)no-repeat center top / 100% 100% transparent; height: 55px; width: 100%; z-index: 2; top: 0; left: 0; } #avis_page #container_avis{ padding-top: 10px; } #container_avis .avis.vis{ overflow: hidden; height: auto; max-height: 250px; opacity: 1; filter: alpha(opacity = 100); /*background: rgba(0,120,255,0.2);*/ border-bottom: 1px solid #d6d4d4; padding-top:25px; } #container_avis .avis{ max-height: 0; opacity: 0; filter: alpha(opacity = 0); overflow: hidden; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } #container_avis .avis .nom{ float: left; padding: 0 10px 20px; width: 100px; font-size: 13px; text-align: left; letter-spacing: 0.05em; } #container_avis .avis .nom p{ margin: 0; text-transform: uppercase; } #container_avis .avis .nom .prod-test{ text-transform: capitalize; text-align: left; display: block; padding-left: 8px; } #container_avis .avis .avis_content{ overflow: hidden; border-left: 1px solid #a9a5a5; padding: 0 0 10px 10px; margin-bottom: 10px; font-size: 12px; } #container_avis .avis .avis_content p{ margin: 0; text-align: left; } /*PAGE PREUVE*/ #preuve{ background: linear-gradient(to bottom, rgba(251, 251, 251, 1) 0%, rgba(251, 251, 251, 1) 0%, rgba(244, 244, 244, 1) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); } #preuve .right{ background: url(http://www.galenic.fr/cell-capital/img/bg_preuve.jpg) center center no-repeat; background-size: cover; } #preuve .fileUpload { /* position: relative;*/ overflow: hidden; margin: 0 10px 10px; } #preuve .fileUpload input.upload { position: absolute; top: 0; left: 0; margin: 0; padding: 0; font-size: 20px; z-index: 2; cursor: pointer; opacity: 0; filter: alpha(opacity = 0); line-height: 22px; outline: medium none; padding: 1%; transition: all 0.2s ease 0s; width: 47.5%; } #preuve input#uploadFile{ background: none repeat scroll 0 0 #f4f4f4; border: 1px solid #c6c6c6; border-radius: 4px; box-sizing: border-box; /*font-family: "HelveticaNeue-Thin",Arial,Helvetica,sans-serif;*/ font-family: HelveticaNeueLT-Thin; font-weight: normal; font-style: normal; line-height: 22px; outline: medium none; /*padding: 1%;*/ padding: 3px 5px; margin-top: 7px; transition: all 0.2s ease 0s; width: 47.5%; font-size: 13px; float: left; } .line2.up label{ text-transform: none; } #preuve .line2 .btn_parc{ opacity: 1; filter: alpha(opacity = 100); position: relative; padding: 0; color: #000; background: none repeat scroll 0 0 rgba(0, 0, 0, 0); border: medium none; font-size: 16px; text-align: center; text-transform: uppercase; border: none; display: inline-block; width: auto; margin-top: 7px; margin-left: 2%; cursor: pointer; } #preuve .line2 .btn_parc > span{ opacity: 1; filter: alpha(opacity = 100); padding-left: 0; bottom: auto; left: auto; } #preuve .lieu_achat input{ width: 50%; float: left; } #preuve .chercher_sl{ padding: 0; border: none; width: 33px; height: 30px; background: url(http://www.galenic.fr/cell-capital/img/chercher_sl.png) left top no-repeat; /* margin-top: -2px;*/ margin-left: 1.5%; cursor: pointer; } form .line2.line-pdv{ text-align: left; } #pdv{ background: none repeat scroll 0 0 #f4f4f4; border: 1px solid #c6c6c6; border-radius: 4px; box-sizing: border-box; /*font-family: "HelveticaNeue-Thin",Arial,Helvetica,sans-serif;*/ font-family: HelveticaNeueLT-Thin; font-weight: normal; font-style: normal; line-height: 22px; outline: medium none; padding: 1.5%; transition: all 0.2s ease 0s; width: 100%; height: 140px; overflow: hidden; } #pdv p{ color: #afafaf; font-size: 14px; /*font-family: "HelveticaNeue-Thin",Arial,Helvetica,sans-serif;*/ font-family: HelveticaNeueLT-Thin; font-weight: normal; font-style: normal; margin: 0; letter-spacing: 0.05em; } #pdv .pdv{ cursor: pointer; } #pdv .pdv p{ /*color:#000;*/ display: inline; letter-spacing: 0.05em; line-height: 20px; font-size: 14px; } #pdv .pdv p { /* color: #555;*/ color: #afafaf; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } #pdv .pdv:hover p, #pdv .pdv.on{ color: #000; } #pdv .pdv.on p{ /*font-family: "HelveticaNeue-Light",Arial,Helvetica,sans-serif;*/ font-family: HelveticaNeueLT-Light; font-weight: normal; font-style: normal; color: #000; } #pdv .pdv{ padding: 8px 0; border-bottom: 1px solid #ccc; margin-right: 15px; } #pdv .pdv:last-child{ border-bottom: none; } #preuve .select_date .selform{ width: 45%; float: left; } #preuve .select_date .selform select{ width: 120%; /* padding: 3.4%;*/ padding: 3px 5px; } #preuve .select_date .selform:last-child{ margin-left: 10%; } #preuve .line_file{ text-align: left; } #preuve .line_file.error #uploadFile, .error #pdv{ border-color: red; } .line span.tc{ font-size: 9px; left: 110px; line-height: 10px; opacity: 1; position: absolute; top: 0; color: #555; } #preuve .errorl span{ opacity: 0.6; filter: alpha(opacity = 60); } #preuve .form_achat2{ color: #000; border-color: #aaa; } form .line2.full, form .line2.full label{ text-align: left; margin-bottom: 0; } /* ========================================================================== Helper classes ========================================================================== */ /* * Image replacement */ .ir { background-color: transparent; border: 0; overflow: hidden; /* IE 6/7 fallback */ *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%; } /* * Hide from both screenreaders and browsers: h5bp.com/u */ .hidden { display: none !important; visibility: hidden; } /* * Hide only visually, but have it available for screenreaders: h5bp.com/v */ .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* * Extends the .visuallyhidden class to allow the element to be focusable * when navigated to via the keyboard: h5bp.com/p */ .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* * Hide visually and from screenreaders, but maintain layout */ .invisible { visibility: hidden; } /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .clearfix:before, .clearfix:after { content: " "; /* 1 */ display: table; /* 2 */ } .clearfix:after { clear: both; } /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .clearfix { *zoom: 1; } /*ANIMS*/ #pre-home, #home_prod, #big-video-wrap{ opacity: 0; filter: alpha(opacity = 0); -webkit-transition: 0.45s; -moz-transition: 0.45s; -ms-transition: 0.45s; -o-transition: 0.45s; transition: 0.45s; /*-webkit-transform: translateY(10%); -moz-transform: translateY(10%); -ms-transform: translateY(10%); -o-transform: translateY(10%); transform: translateY(10%);*/ } #experience{ opacity: 0; filter: alpha(opacity = 0); -webkit-transition: 0.45s; -moz-transition: 0.45s; -ms-transition: 0.45s; -o-transition: 0.45s; transition: 0.45s; top:10%; } #big-video-wrap{ opacity: 0; filter: alpha(opacity = 0); -webkit-transition: -webkit-transform 0.45s both, opacity 0.45s; -moz-transition:-moz-transform 0.45s both, opacity 0.45s; -ms-transition: -ms-transform 0.45s both, opacity 0.45s; -o-transition: -o-transform 0.45s both, opacity 0.45s; transition: transform 0.45s both, opacity 0.45s; -webkit-transform: translateY(10%); -moz-transform: translateY(10%); -ms-transform: translateY(10%); -o-transform: translateY(10%); transform: translateY(10%); } #pre-home.frame_active, #home_prod.frame_active, #big-video-wrap.f_a{ opacity: 1; filter: alpha(opacity = 100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } #experience.frame_active{ opacity: 1; filter: alpha(opacity = 100); top:0; } /*.frame.trans{ -webkit-transform: translateY(-10%); -moz-transform: translateY(-10%); -ms-transform: translateY(-10%); -o-transform: translateY(-10%); transform: translateY(-10%); }*/ #pre-home .centre, #home_prod .right .content, #video .content, #final.limit .content{ opacity: 0; filter: alpha(opacity = 0); -webkit-transition:opacity 0.8s ease, transform 0.8s ease; -moz-transition:opacity 0.8s ease, transform 0.8s ease; -ms-transition:opacity 0.8s ease, transform 0.8s ease; -o-transition:opacity 0.8s ease, transform 0.8s ease; transition:opacity 0.8s ease, transform 0.8s ease; -webkit-transform: translateY(30%); -moz-transform: translateY(30%); -ms-transform: translateY(30%); -o-transform: translateY(30%); transform: translateY(30%); } #pre-home .centre .second, #home_prod .right .content .second, #video .content .second, #final.limit .content .second{ opacity: 0; filter: alpha(opacity = 0); -webkit-transition:opacity 0.8s ease .2s, transform 0.8s ease .2s; -moz-transition:opacity 0.8s ease .2s, transform 0.8s ease .2s; -ms-transition:opacity 0.8s ease .2s, transform 0.8s ease .2s; -o-transition:opacity 0.8s ease .2s, transform 0.8s ease .2s; transition:opacity 0.8s ease .2s, transform 0.8s ease .2s; -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); -o-transform: translateY(20%); transform: translateY(20%); } #echantillon .left, #avis_page .left, #preuve .left, #global .left, #gamme .left, #corpo .left, #final .left, #vos_avis .left, #vos_avis.inverse .right{ opacity: 0; filter: alpha(opacity = 0); -webkit-transition: opacity 0.6s ease, transform 0.6s ease; -moz-transition: opacity 0.6s ease, transform 0.6s ease; -ms-transition: opacity 0.6s ease, transform 0.6s ease; -o-transition: opacity 0.6s ease, transform 0.6s ease; transition: opacity 0.6s ease, transform 0.6s ease; -webkit-transform: translateY(30%); -moz-transform: translateY(30%); -ms-transform: translateY(30%); -o-transform: translateY(30%); transform: translateY(30%); } #echantillon .left .second, #avis_page .left .second, #preuve .left .second #global .left .second, #gamme .left .second, #corpo .left .second, #vos_avis .left .second, #vos_avis.inverse .right .second{ opacity: 0; filter: alpha(opacity = 0); -webkit-transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; -moz-transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; -ms-transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; -o-transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); -o-transform: translateY(20%); transform: translateY(20%); } #final .left .second{ opacity: 0; filter: alpha(opacity = 0); -webkit-transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; -moz-transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; -ms-transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; -o-transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; transition: opacity 0.8s ease 0.2s, transform 0.8s ease 0.2s; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } #echantillon .right, #avis_page .right, #global .right, #preuve .right, #gamme .right, #gamme .backg, #corpo .right, #final .right, #vos_avis .right, #vos_avis.inverse .left{ opacity: 1; filter: alpha(opacity = 100); -webkit-transition: opacity 0.9s ease, transform 0.9s ease; -moz-transition: opacity 0.9s ease, transform 0.9s ease; -ms-transition: opacity 0.9s ease, transform 0.9s ease; -o-transition: opacity 0.9s ease, transform 0.9s ease; transition: opacity 0.9s ease, transform 0.9s ease; -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); } #final .right .second{ opacity: 0; filter: alpha(opacity = 0); -webkit-transition: opacity 0.9s ease 0.2s, transform 0.9s ease 0.2s; -moz-transition: opacity 0.9s ease 0.2s, transform 0.9s ease 0.2s; -ms-transition: opacity 0.9s ease 0.2s, transform 0.9s ease 0.2s; -o-transition: opacity 0.9s ease 0.2s, transform 0.9s ease 0.2s; transition: opacity 0.9s ease 0.2s, transform 0.9s ease 0.2s; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } #echantillon .right, #avis_page .right{ background: rgb(251,251,251); background: -moz-linear-gradient(top, rgba(251,251,251,1) 0%, rgba(251,251,251,1) 0%, rgba(244,244,244,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251,251,251,1)), color-stop(0%,rgba(251,251,251,1)), color-stop(100%,rgba(244,244,244,1))); background: -webkit-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(251,251,251,1) 0%,rgba(244,244,244,1) 100%); background: -o-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(251,251,251,1) 0%,rgba(244,244,244,1) 100%); background: -ms-linear-gradient(top, rgba(251,251,251,1) 0%,rgba(251,251,251,1) 0%,rgba(244,244,244,1) 100%); background: linear-gradient(to bottom, rgba(251,251,251,1) 0%,rgba(251,251,251,1) 0%,rgba(244,244,244,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#f4f4f4',GradientType=0 ); } #video.frame_active .content, #final.limit.frame_active .content, #echantillon.frame_active .left, #echantillon.frame_active .right, #preuve.frame_active .left, #preuve.frame_active .right, #pre-home.frame_active .centre, #home_prod.frame_active .right .content, #echantillon.frame_active .right, #echantillon.frame_active .right, #avis_page.frame_active .right, #global.frame_active .right, #gamme.frame_active .right, #gamme.frame_active .backg, #corpo.frame_active .right, #final.frame_active .right, #echantillon.frame_active .left, #avis_page.frame_active .left, #global.frame_active .left, #gamme.frame_active .left, #corpo.frame_active .left, #final.frame_active .left, #final.frame_active .right .second, #vos_avis.frame_active .left, #vos_avis.frame_active .right, #vos_avis.inverse.frame_active .right, #vos_avis.inverse.frame_active .left, #echantillon.frame_active .left .second, #avis_page.frame_active .left .second, #global.frame_active .left .second, #gamme.frame_active .left .second, #corpo.frame_active .left .second, #final.frame_active .left .second, #vos_avis.frame_active .left .second, #vos_avis.inverse.frame_active .right .second, #pre-home.frame_active .centre .second, #home_prod.frame_active .right .content .second, #video.frame_active .content .second, #final.limit.frame_active .content .second{ opacity: 1; filter: alpha(opacity = 100); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ /*@media only screen and (max-width: 1315px), screen and (max-height: 1050px) { */ /*@media only screen and (max-width: 1315px){*/ @media only screen and (max-width: 1415px){ /*.foot1 { left: 48px; margin-left: 0; } .foot2 { left: auto; margin-right: 48px; float: right; }*/ #home_prod h1 { /* font-size: 50px; line-height: 45px; margin-bottom: 75px;*/ font-size: 35px; } #global h1 { font-size: 34px; } #global h2 { font-size: 34px; } #global p { font-size: 12px; } #gamme h1 { font-size: 14px; } #gamme h2 { font-size: 30px; line-height: 34px; } #gamme p { font-size: 13px; } #corpo h1 { /*font-size: 46px; line-height: 50px;*/ font-size: 34px; line-height: 40px; } #final h1 { font-size: 30px; } #final h1 span { display: block; font-size: 18px; padding: 0 40px; } .content.form h2 span, .content.form2 h2 span{ width: 80%; text-align: center; margin-left: 10%; } #sequence > .sequence-canvas li > .slide .right img{ width: 120px; } #avis_page .remerciements .pt3{ font-size: 13px; line-height: 18px; margin-top: 20px; } #avis_page .remerciements .pt3 br{ display: none; } .b_chance { margin-top: 10px; padding-top: 10px; } .b_chance input[type="text"] { line-height: 22px; margin: 0 10px; padding: 3px 5px; } } @media only screen and (max-width: 1300px){ #avis_page h1{ font-size: 35px; } .remerciements .pt2, .remerciementslimit .pt2 { font-size: 13px; letter-spacing: 0.03em; line-height: 18px; } .remerciements .pt3, .remerciementslimit .pt3 { font-size: 18px; letter-spacing: 0.04em; line-height: 24px; } #avis_page .remerciements .pt3{ font-size: 13px; line-height: 18px; margin-top: 20px; } #avis_page .remerciements .pt3 br{ display: none; } .b_chance { margin-top: 10px; padding-top: 10px; } .b_chance input[type="text"] { line-height: 22px; margin: 0 10px; padding: 3px 5px; } } @media only screen and (max-width: 1250px){ #global h1 { font-size: 34px; } #global h1 span{ font-size: 14px; } #global h2 { font-size: 34px; } #global p{ font-size: 12px; } .foot1 { left: 48px; margin-left: 0; } .foot2 { left: auto; margin-right: 48px; float: right; } #corpo p br { display: none; } } @media only screen and (max-width: 1150px){ form .line-peau label{ font-size: 11px; line-height: 15px; } } @media only screen and (max-height: 1050px) { .mobile_xperience{ left: 6%; margin-left: 0; } #avis_page .remerciements h3{ padding: 20px 0; } .fb_send, .email_send, .numero_send{ margin: 10px 0; } } @media only screen and (max-height: 960px) { .content_bot{ display: none; } .content_avis h2, .content_avis #container_avis{ display: none; } .content .content_avis a { margin-top: 15px; } /*.centre h1 span{ font-size: 18px; line-height: 16px; } .centre h1{ font-size: 50px; line-height: 55px; margin-bottom: 25px; } .centre h1 span:last-child { font-size: 15px; margin-top: 6px; }*/ .centre a, .content a/*, #preuve .line2 .btn_parc*/{ font-size: 13px; padding: 6px 14px; } /*#preuve .line2 .btn_parc{ width: 76px; }*/ .content .filtres a{ padding: 3px 12px 3px 25px; } .portrait_studio{ margin-top: 5px; } .prod_ech { top: auto; margin-top: 0; bottom: 20px; } .prod_ech img { width: 120px; } } /*DESKTOP PORTABLE PETIT FORMAT*/ @media only screen and (max-height: 850px) { form textarea { height: 120px; } .content.form h2, .content.form2 h2{ margin-top: 60px; } #avis_page h1{ margin-top: 64px; } .sep{ display: none; } #container_avis{ height: 340px; } #vos_avis a.aj_link{ margin-top: 20px; } #vos_avis h2{ margin-top: 40px; } .filtres { height: 24px; margin: 15px 0 30px; } } @media only screen and (max-height: 740px) { .bl, .br { /* width: 25px;*/ width: 30px; } .video_container{ margin: 0 25px; } .iframe_cont { height: auto; margin: 100px 30px 25px; } .right .content { margin: 0 30px 0 0; } .left .content{ margin: 0 0 0 30px; } #video .close_vid{ right: 45px; } #avis_page .legend{ bottom: 40px; } .frame_active .cur{ bottom: -20px; } .side.onview{ right: 40px; } footer{ /*height: 25px;*/ height: 25px; padding: 3px 0 2px; } /*.foot1 { left: 25px; }*/ .foot1 .f1_left{ margin-top: 3px; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } .foot1 ul{ margin-top: 8px; font-size: 9px; } .foot1 .f1_right{ margin-top: 1px; } .foot1 .f1_right a{ -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } .foot2 { display: none; margin-right: 25px; line-height: 14px; margin-top: 0; font-size: 9px; } .foot2 p{ margin: 5px 0; } .content a.img_exp, .content a.img_exp_mob{ /*width: 290px;*/ width: 250px; height: auto; } .content a.img_exp img, .content a.img_exp_mob img{ max-width: 100%; height: auto; } /**/ #video .content h1{ font-size: 35px; } #video .content p.p1{ font-size: 12px; } /**/ #home_prod .content{ margin-left: -150px; } /* #home_prod h1 span { font-size: 18px; }*/ /*#home_prod h1{ font-size: 70px; line-height: 55px; margin-bottom: 80px; }*/ /* #home_prod h2{ font-size: 30px; margin-bottom: 80px; } #home_prod h2 span { font-size: 15px; } #home_prod p{ font-size: 12px; }*/ .prod_ech img{ width: 100px; height: auto; min-height: 0; } /**/ .line{ width: 48%; padding: 0 1%; } .form_back{ /*margin: 0 1%;*/ margin: 0 2.5%; } .content_bot{ display: none; } #preuve form .line2 label{ text-transform: none; font-size: 11px; padding-left: 0; width: 100%; } form .line2 label.infos span{ text-transform: uppercase; position: static; } form .line label, form .line3 label { padding-left: 0; font-size: 11px; letter-spacing: 0.1em; margin-bottom: 3px; } form .line label.error, form .line3 label.error { padding-left: 5px; } .line2, .line3 { padding: 0 1%; } .sep{ margin: 1.5% 2.5% 2%; } .line2, .line3, .line4 { margin-bottom: 1.5%; } p.avert { font-size: 10px; letter-spacing: 0.05em; margin: 1.5%; } form .line-peau label { float: left; font-size: 11px; } form input[type="text"], form select{ padding: 1.5%; height: 20px; line-height: 20px; width: 97%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } form #date_a{ width: 96%; } form textarea{ padding: 1.5%; height: 100px; line-height: 20px; width: 96.2%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .content.form h2, .content.form2 h2 { /*font-size: 13px;*/ font-size: 28px; margin-bottom: 10px; } .content.form2 h2 span br{ display: none; } form .line2 label{ font-size: 11px; } #pdv{ height: 100px; } #pdv p{ line-height: 17px; } .popin_credits{ height: 420px; } #credits.open .popin_credits{ margin-top: -177px; } .part_c > a{ margin-top: 15px; } .part_c { margin-top: 0; } } /*IPAD VERTICAL*/ @media only screen and (max-width: 1100px) { header nav ul { letter-spacing: 0.05em; } .bl, .br { /*width: 25px;*/ width: 30px; } .iframe_cont { height: auto; margin: 100px 25px 25px; } .video_container{ margin: 0 30px; } .right .content { margin: 0 30px 0 0; } .left .content{ margin: 0 0 0 30px; } #video .close_vid{ right: 45px; } #avis_page .legend{ bottom: 40px; } .frame_active .cur{ bottom: -20px; } .side.onview{ right: 40px; } footer{ /*height: 25px;*/ height: 25px; padding: 3px 0 2px; } .foot1 { left: 30px; } /*.foot1 .f1_left{ margin-top: 3px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); }*/ .foot1 ul{ margin-top: 8px; font-size: 8px; } .foot1 .f1_right{ margin-top: 1px; } .foot1 .f1_right a{ -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); } .foot1 .f1_left{ margin-top: 4px; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); -webkit-transform-origin: 0; -moz-transform-origin: 0; -ms-transform-origin: 0; -o-transform-origin: 0; transform-origin: 0; } .foot2 { display: none; margin-right: 30px; line-height: 14px; margin-top: 0; font-size: 9px; } .foot2 p{ margin: 5px 0; } .left .content{ margin-left: 25px; } /*PRE HOME*/ .cell{ right: 25px; } .cell img{ /*padding-top: 70px;*/ } .centre h1 span{ /*font-size: 18px; line-height: 16px;*/ } .centre h1{ /*font-size: 50px; line-height: 55px; margin-bottom: 25px;*/ } .centre h1 span:last-child { font-size: 15px; margin-top: 0px; } .centre a, .content a{ font-size: 13px; height: 13px; line-height: 13px; padding: 8px 14px; /* background: gold; vertical-align: bottom;*/ box-sizing: content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; } .portrait_studio{ margin-top: 5px; } .content a.img_exp{ /*width: 290px;*/ width: 225px; height: auto; } .content a.img_exp img{ max-width: 100%; height: auto; } .sequence-pagination{ bottom: 45px; } #home_vid .content p{ font-size: 26px; } #home_vid .content p span, #home_ps .content p span { display: block; font-size: 14px; } #home_ps .content p { color: #fff; font-size: 21px; } /**/ #video .content h1{ font-size: 35px; } #video .content p.p1{ font-size: 12px; } /* */ #home_prod { /*background: url("http://www.galenic.fr/cell-capital/img/bg_home_prod.jpg") no-repeat scroll -126px center / cover rgba(0, 0, 0, 0);*/ background: url("http://www.galenic.fr/cell-capital/img/bg_home_prod.jpg") no-repeat scroll left 100px / auto 85% rgba(0, 0, 0, 0); } #home_prod .content{ margin-left: -150px; } #home_prod h1 span { font-size: 14px; } #home_prod h1{ font-size: 52px; line-height: 54px; margin-top: 110px; } #home_prod h2{ font-size: 24px; } #home_prod h2 span { font-size: 14px; line-height: 16px; } #home_prod p{ font-size: 12px; } /**/ #video .content h1{ margin-bottom: 45px; } #video .content p.p1{ font-size: 14px; } /**/ .produits { display: inline-block; margin: 71px auto 0; max-width: 95%; } .prod{ max-width: 17%; padding: 0 1%; } .prod:first-child{ margin-left: 10%; } .prod .more{ bottom: 2%; transform: scale(0.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } /**/ #gamme h1 { font-size: 14px; } #gamme h2, #corpo h1 { font-size: 34px; line-height: 40px; margin-left: 10%; width: 80%; } #gamme h2{ padding: 20px 0; } #gamme h2 span{ font-size: 15px; } #gamme p{ font-size: 12px; } #gamme .right img, #sequence > .sequence-canvas li.animate-in > .slide .right img, #sequence > .sequence-canvas li > .slide .right img/*, #sequence2 > .sequence-canvas li.animate-in > .slide .right img, #sequence2 > .sequence-canvas li > .slide .right img*/{ position: relative; /*width: 115px; margin-top: 130px;*/ width: 100px; margin-top: 140px; } #sequence .sequence-next, #sequence .sequence-prev, #sequence2 .sequence-next, #sequence2 .sequence-prev { top: auto; bottom: 45px; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } #sequence .sequence-next, #sequence2 .sequence-next{ right: 22%; } #sequence .sequence-prev, #sequence2 .sequence-prev { left: 69%; } /**/ #final h1{ font-size: 26px; line-height: 31px; } #final h1 span{ font-size: 16px; margin-top: 15px; } /**/ .prod_ech img{ width: 85px; height: auto; min-height: 0; } .remerciements .pt1, .remerciementslimit .pt1 { padding: 20px; } .remerciements .pt1 br, .remerciementslimit .pt1 br{ display: none; } /**/ .line{ width: 48%; padding: 0 1%; } .form_back{ /* margin: 0 1%;*/ margin: 0 4%; } .content_bot{ display: none; } #preuve form .line2 label{ text-transform: none; font-size: 11px; width: 100%; padding-left: 0; } form .line2 label{ text-transform: none; } p.avert{ font-size: 9px; } p.avert br{ display: none; } form .line label, form .line3 label { padding-left: 0; font-size: 10px; letter-spacing: 0.05em; } form .line span.tc{ left: 75px; } form .line label.error, form .line3 label.error { padding-left: 5px; } .line2, .line3, .line4 { padding: 0 1%; } form .line2 label{ font-size: 11px; } form .line2 label{ } .line2, .line3, .line4 { margin-bottom: 1.5%; } p.avert { font-size: 8px; letter-spacing: 0.05em; margin: 1.5%; } /*#avis_page .content{ margin: 0 25px; }*/ #avis_page h1{ font-size: 28px; letter-spacing: 0.1em; } #avis_page h1 span{ font-size: 18px; } .content.form h2, .content.form2 h2 { /*font-size: 13px;*/ font-size: 24px; margin-bottom: 10px; line-height: 30px; } .content.form2 .content_avis h2{ font-size: 22px; } .content.form h2 span, .content.form2 h2 span{ font-size: 11px; line-height: 16px; } .content.form2 h2 span br{ display: none; } form textarea{ height: 100px; } .sep{ margin: 1% 2.5% 2.5%; } #echantillon .right .content, #avis_page .right .content, #preuve .right .content{ margin-top: 60px; } #avis_page .right .content, #echantillon .right .content, #preuve .left .content { margin-top: 30px; } #avis_page .right .content h2, #echantillon .right .content h2, #preuve .left .content h2{ margin-bottom: 32px; } #avis_page .left h1{ margin-top: 61px; } /**/ #container_avis{ height: 310px; margin: 0 2%; } #vos_avis .head_avis p br{ display: none; } #vos_avis .right .content{ margin-top: 50px; } #vos_avis a.aj_link{ margin-top: 20px; } .filtres{ margin: 10px 0 20px; } .content .filtres a{ padding: 3px 6px 3px 25px; } /*.content .filtre:before{ top: 4px; }*/ /**/ #corpo h1{ font-size: 34px; line-height: 40px; padding-top: 50px; } #corpo p { font-size: 14px; margin: 45px auto 20px; padding: 45px 20px 20px; position: relative; text-align: center; text-transform: none; width: 75%; } #corpo .right img { padding-top: 50px; } #pdv{ height: 100px; } /**/ #final h1 { font-size: 24px } #final h1 span { font-size: 14px; } /**/ #preuve input#uploadFile { width: 48.6%; } #preuve .select_date .selform:last-child { margin-left: 4%; } #preuve .select_date .selform { float: left; width: 48%; } } @media only screen and (max-width: 1100px) { .foot1{ width: 620px; width: calc(100% - 60px); } .foot1 ul{ padding: 0 5px; } .foot1 ul li { padding: 0 4px; } .foot2 p { width: 120px; line-height: 9px; margin-top: 3px; margin-bottom: 0; } } @media only screen and (max-width: 1024px) { .centre h1 { font-size: 41px; margin-top: 25px; } .centre h1 span{ font-size: 17px; margin-bottom: 10px; } .container_frame { min-height: 672px; } #avis_page .left, #vos_avis .left, #echantillon .left, #preuve .left, #avis_page .right, #vos_avis .right, #echantillon .right, #preuve .right { margin-top: 100px; min-height: 572px; } .frame_active .cur{ bottom: -16px; } /*.sequence-pagination{ bottom: 60px; }*/ #sequence, #sequence22, #sequence_home { min-height: 672px; } /*.overlay_image { display: none; height: 0; width: 0; }*/ .overlay_image { /* display: none;*/ } #pre-home{ /* background: url("http://www.galenic.fr/cell-capital/img/bg_slide1_ip1.jpg") no-repeat scroll center center / cover rgba(0, 0, 0, 0);*/ background: #000; } #home_ps .overlay_image, #home_ps .overlay_image video{ /*background: url(http://www.galenic.fr/cell-capital/img/bg_slide2.jpg);*/ background: transparent; } #home_vid .contains{ opacity: 0; } #home_vid .overlay_image, #home_vid .overlay_image video{ /* background: url(http://www.galenic.fr/cell-capital/img/bg_slide3_ip.jpg);*/ background: transparent; } .touch #home_vid .overlay_image{ display: none; } form .line2 > div{ float: left; } form .line2 label{ display: inline-block; width: 94%; font-size: 10px; text-align: left; } /* .content a.play_video_home_mob, .content a.Vvideo_mob{ display: inline-block; } .content a.play_video_home, .content a.Vvideo{ display: none; }*/ } @media screen and (max-height: 860px) { } /*IPAD VERTICAL*/ @media only screen and (max-width: 860px) { header nav ul li a{ padding: 0 12px 0 10px; } header nav ul{ font-size: 9px; } .side.type2 ul li a { /*background: rgba(0,0,0,0.8);*/ background: transparent; border-color: transparent; } .side.type2 ul li.select a { border-color: rgba(0,0,0,0.7); } .side.type2 ul li a .titre_page { color: #FFF; } .side.type2 ul li a .rond { background: #FFF; /*background: rgba(0,0,0,0.8);*/ border-color: rgba(0,0,0,1); } /*VERTICAL LAYOUT*/ .left, .right{ float: none; width: 100%; } .left{ margin-top: 100px; } #gamme .slide .left, #sequence > .sequence-canvas, #sequence2 > .sequence-canvas, .left{ background: #f7f7f7; } .left .content, .right .content{ margin:0 25px; } #sequence > .sequence-canvas .left .content, #sequence2 > .sequence-canvas .left .content{ padding: 0 !important; } /**/ .foot1{ left: 30px; } .foot2{ margin-left: 0; margin-right: 5px; } #pre-home{ /* background: url("http://www.galenic.fr/cell-capital/img/bg_slide1_ip1.jpg") no-repeat scroll center center / cover rgba(0, 0, 0, 0);*/ background: #000; } #pre-home .content{ width: 70%; margin: 0 15%; } .portrait_studio { margin-top: 150px; } .cell{ width: 75%; max-width: 75%; top: 0; margin-top: 0; height: 100%; background: url("http://www.galenic.fr/cell-capital/img/cell.png") no-repeat scroll center 185px / 100% auto rgba(0, 0, 0, 0); } .cell img{ position: relative; bottom: 0; } /**/ #home_prod{ background: url("http://www.galenic.fr/cell-capital/img/bg_home_prod_ip.jpg") no-repeat scroll left bottom #000; } #home_prod h1{ font-size: 49px; } #home_prod h1 span{ line-height: 20px; } #home_prod h2{ padding-top: 25px; } #home_prod p{ display: none; } #home_prod .left{ display: none; } #home_prod .right{ float: none; width: 100%; padding-top: 105px !important; } #home_prod .content { margin-left: 25px; } #home_prod h1{ margin-bottom: 20px; margin-top: 40px; font-size: 47px; } .centre h1 { font-size: 50px; margin-top: 50px; } .centre h1 span { font-size: 20px; margin-bottom: 20px; } .centre h1 span:last-child { font-size: 18px; margin-top: 4px; } #home_prod h2, #home_prod h2 span { margin-bottom: 20px; font-size: 13px; } #home_vid .content p{ width: 84%; margin-left: 8%; } #home_vid .content p span{ margin-left: -3%; width: 106%; } #home_ps .content p{ width: 96%; margin-left: 2%; } /**/ #corpo .right img{ width: 75%; padding-top: 0; } /**/ .produits{ height: 85%; width: auto; margin-top: 4%; } .prod{ height: 100%; width: auto; max-width: 23%; } .prod:first-child{ margin-left: 0; } .prod img{ max-height: 100%; width: auto; } .prod .more{ bottom: 10%; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); } .prod:hover .more{ -webkit-transform: rotate(0deg) scale(0.75); -moz-transform: rotate(0deg) scale(0.75); -ms-transform: rotate(0deg) scale(0.75); -o-transform: rotate(0deg) scale(0.75); transform: rotate(0deg) scale(0.75); } /**/ #corpo h1{ margin-top: 0; } #corpo p{ margin-bottom: 0; } /**/ #gamme .backg{ bottom:-37px; width: 100%; height: 50%; left: 0; top: auto; } #corpo .backg{ bottom:auto; width: 100%; height: 50%; left: 0; top: 0; } #gamme .right .content, #corpo .right .content{ height: 100%; } #gamme .right img, #sequence > .sequence-canvas li.animate-in > .slide .right img, #sequence > .sequence-canvas li > .slide .right img, #corpo .right img, #sequence2 > .sequence-canvas li.animate-in > .slide .right img, #sequence2 > .sequence-canvas li > .slide .right img { margin-top: 3%; max-height: 100%; width: auto; } #gamme h2, #corpo h1 { padding: 25px 0; margin: 10px 10% 20px; font-size: 30px; } #corpo h1{ margin-top: 0; margin-bottom: 0; padding-bottom: 1px; } #corpo p{ margin-top: 25px; padding-top: 30px; } #gamme h1{ padding-top: 25px; } #gamme h3, #corpo h3 { margin-bottom: 25px; padding-bottom: 25px; } #sequence .sequence-next, #sequence .sequence-prev, #sequence2 .sequence-next, #sequence2 .sequence-prev { bottom: 25%; margin-bottom: -30px; } #sequence .sequence-next, #sequence2 .sequence-next{ right:45px; } #sequence .sequence-prev, #sequence2 .sequence-prev{ left:45px; } /**/ #final h1{ margin-top: 0; } #final .right .overlay{ bottom: 0; height: 100%; left: 0; top: auto; width: 100%; } #final .right .icon{ margin-top: 0; } #final .left .icon{ margin-bottom: 15px; } /**/ #video h1{ margin: 26px 80px 40px; } #video .second{ margin: 0 80px; } .overlay_image { background:url("http://www.galenic.fr/cell-capital/img/bg_video.jpg") no-repeat scroll center center / 100% auto #000; } #video .content p.p1{ width: 92%; margin-left: 4%; } /**/ #global h1{ margin-top: 0; margin-bottom: 14px; } #global h2{ padding-top: 18px; } /**/ #avis_page .left, #echantillon .left, #vos_avis .left, #preuve .right{ display: none; } #avis_page .right, #echantillon .right, #vos_avis .right, #preuve .left{ height: auto !important; } .content.form h2, .content.form2 h2{ font-size: 28px; margin: 170px 50px 70px; } .content.form2 h2{ font-size: 28px; margin-bottom:30px; } #echantillon .content.form h2{ margin-top: 215px; } #preuve .content.form h2, #avis_page .content.form2 h2{ margin-top: 235px; } .content.form2 .content_avis h2{ margin: 3% 0 1.5%; } #vos_avis h2 { margin: 170px 50px 30px; } #avis_page h1{ padding-left:25px; } #avis_page .legend_right{ display: block; } .filtres { margin: 25px 0 40px; } .content.form h2 span, .content.form2 h2 span, #vos_avis h2 span{ font-size: 15px; } .form_back{ /*margin: 0 3%;*/ margin: 0 2.5%; } form .line label, form .line3 label{ font-size: 12px; } form .line span.tc{ left: 90px; top: 2px; } form .line-peau label { float: left; font-size: 11px; } form .selform{ width: 99%; } form input[type="text"], form textarea { width: 95%; } .line.lieu_achat{ padding-left: 0; } .sep{ margin: 1% 1% 2.5%; width: 97.5%; } /**/ #container_avis{ height: 430px; } #vos_avis.inverse .right .content{ margin: 0 30px; } } @media screen and (max-height: 690px) { #avis_page, #vos_avis, #echantillon{ /*min-height: 630px;*/ min-height: 590px; /*overflow: auto;*/ } .content_form .sep:first-child{ display: none; } .sep{ display: none; } #avis_page .left, #vos_avis .left, #echantillon .left, #preuve .left, #avis_page .right, #vos_avis .right, #echantillon .right, #preuve .right{ /* min-height: 630px;*/ min-height: 690px; margin-top: 100px; } #avis_page .left, #echantillon .left, #preuve .right, #avis_page .left{ padding: 0 !important; } #avis_page .left h1{ top: 0; /* margin-top: 15px;*/ margin-top: 30px; } #preuve .right{ background: url("http://www.galenic.fr/cell-capital/img/bg_preuve.jpg") no-repeat scroll center -125px / cover rgba(0, 0, 0, 0); } #avis_page .left { background: url("http://www.galenic.fr/cell-capital/img/new_york.jpg") no-repeat scroll center -125px / cover rgba(0, 0, 0, 0); } form textarea { height: 110px; } #container_avis{ height: 290px; } /*#video .content h1{ margin-bottom: 30px; }*/ /*.portrait_studio a{ position: absolute; right: 10%; bottom: 10%; }*/ #sequence > .sequence-canvas li > .slide .right img{ width: 100px; margin-top: 130px; } #gamme h2{ margin-bottom: 31px; margin-top: 31px; padding-bottom: 20px; padding-top: 30px; } .produits{ /*margin: 120px auto 0; max-width: 70%;*/ margin: 130px auto 0; max-width: 70%; } .remerciements .pt1, .remerciementslimit .pt1{ font-size: 13px; } .content.form h2, .content.form2 h2{ margin-top: 12px; } #avis_page h1{ top: 3%; font-size: 30px; } #avis_page h1 span{ font-size: 22px; } #avis_page h1 span.lot2 { font-size: 18px; } #avis_page .legend { /*bottom: 150px;*/ bottom: 160px; } #pdv{ height: 100px; } .line_submit{ margin: 1.5% 0 1%; } .prod_ech{ /*bottom: 20px;*/ /*bottom: 65px;*/ bottom: 100px; } } @media only screen and (max-width: 640px) { header nav{ display: none; } .play_video_home, .Vvideo, .overlay_image, .contains{ display: none !important; } .content a.play_video_home_mob, .content a.lien_exp_mob, .content a.Vvideo_mob{ display: inline-block; } .content a.play_video_home, .content a.Vvideo{ display: none; } .content a.lien_exp, .content a.play_video_home{ display: none; } .container_frame{ left: 0; -webkit-transition: left 0.3s ease-out; -moz-transition:left 0.3s ease-out; -ms-transition:left 0.3s ease-out; -o-transition:left 0.3s ease-out; transition:left 0.3s ease-out; } /*MENU MOBILE*/ .menu{ display: block; position: absolute; top: 19px; right: 10px; width: 32px; padding: 0; z-index: 2; } .gohome{ display: none; position: absolute; top: 10px; left: 14px; width: 27px; height: 30px; padding: 0; z-index: 2; background: url(http://www.galenic.fr/cell-capital/img/home.png) center center no-repeat; } .lines { background-color: #717271; display: inline-block; height: 4px; position: relative; transition: all .3s ease-out; -moz-transition: all .3s ease-out; -webkit-transition: all .3s ease-out; width: 25px; } .lines:before, .lines:after { background-color: #717271; content: ""; display: inline-block; height: 4px; left: 0; position: absolute; -webkit-transform-origin: 0.28571rem center 0; -moz-transform-origin: 0.28571rem center 0; -o-transform-origin: 0.28571rem center 0; transform-origin: 0.28571rem center 0; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; width: 25px; } .lines:before { top: 8px; } .lines:after { top: -8px; } .menuopen .lines{ background: transparent; } .menuopen .lines:before, .menuopen .lines:after { top: 0; -webkit-transform-origin: 50% 50% 0; -moz-transform-origin: 50% 50% 0; -o-transform-origin: 50% 50% 0; transform-origin: 50% 50% 0; width: 25px; } .menuopen .lines:before { -webkit-transform: rotate3d(0, 0, 1, 45deg); -moz-transform: rotate3d(0, 0, 1, 45deg); -o-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); } .menuopen .lines:after { -webkit-transform: rotate3d(0, 0, 1, -45deg); -moz-transform: rotate3d(0, 0, 1, -45deg); -o-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); } header nav.mobile{ display: block; height: 100%; left: 0; overflow: hidden; position: fixed; left: 100%; top: 65px; transition: all 0.3s ease-out 0s; width: 100%; background: #f4f4f4; } header nav.mobile ul{ background: transparent; /*font-size: 17px; line-height: 20px;*/ font-size: 14px; line-height: 18px; } nav.mobile ul li { color: #000; text-transform: uppercase; text-align: center; background: #F4F4F4; display: block; padding: 15px 0 13px; position: relative; font-size: 12px; /*border-bottom: 1px solid #000;*/ } nav.mobile ul li:before{ content:' '; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: rgb(238,238,238); /* Old browsers */ background: -moz-linear-gradient(left, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 50%, rgba(238,238,238,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(238,238,238,1)), color-stop(50%,rgba(204,204,204,1)), color-stop(100%,rgba(238,238,238,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 50%,rgba(238,238,238,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 50%,rgba(238,238,238,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 50%,rgba(238,238,238,1) 100%); /* IE10+ */ background: linear-gradient(to right, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 50%,rgba(238,238,238,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#eeeeee',GradientType=1 ); /* IE6-9 */ } nav.mobile ul li:first-child { /*border-top: 1px solid #000;*/ } nav.mobile ul li:last-child { /*border-bottom: none;*/ } header nav.mobile ul li a, header nav ul li a { padding: 0; border-right: none; background: none; } .opeen nav.mobile{ /*height: 375px;*/ left: 0; } html, body{ /* height: auto;*/ min-height: 100%; } body{ overflow: auto; /*height: auto; min-height: 100%;*/ } .container_frame { height: auto; min-height: 100%; position: relative; } .frame{ /*padding: 41px 0 25px;*/ padding: 65px 0 0; min-height: 414px; min-height: 100%; /*fallback*/ min-height: calc(100% - 65px); /*the title is 60px tall*/ } #pre-home.frame{ padding-top: 0; } .bl, .br { display: none; } .side, .cur{ display: none; } header{ height: 65px; position: absolute; top: 0; } .logo a{ padding: 8px 0 7px; margin-top: 8px; } .logo img{ width: 120px; } footer{ display: none; position: relative; bottom:auto; margin-top: -25px; } .foot1 { left: 0; width: 100%; } .foot1 ul{ font-size: 9px; text-transform: none; color: #bcbdbd; padding: 0 2px; } .foot1 ul li{ padding: 0 0 0 2px; border-right: 1px solid #bcbdbd; float: left; } .foot1 ul li:last-child{ border-right: none; } .foot1 ul li a{ padding: 0 2px 0 0; } .f1_left, .reseaux.f1_right, .foot2{ display: none; } #big-video-wrap{ display: none !important; } .left .content, .right .content { margin: 0 10px; } /**/ #pre-home .sequence-next, #pre-home .sequence-prev{ display: none !important; } #pre-home .centre h1 { font-size: 30px; line-height: 35px; margin-top: 85px; } #pre-home .centre h1 span{ font-size: 12px; margin-bottom: 5px; margin-top: 0; } #pre-home .content { margin: 0 5%; width: 90%; } #pre-home { /* background: url("http://www.galenic.fr/cell-capital/img/bg_home_prod_sm.jpg") no-repeat scroll center center / cover rgba(0, 0, 0, 0);*/ background: #000; } #home_vid .content p { font-size: 20px; } #home_ps .content p{ font-size: 13px; } #home_ps .content p br{ display: none; } #home_vid .content p span, #home_ps .content p span { display: block; font-size: 12px; } .content a.img_exp{ /*width: 290px;*/ display: none; /*width: 225px; height: auto;*/ } .content a.img_exp_mob{ display: inline-block; width: 120px; height: auto; margin-top: 32px; } .content a.img_exp_mob img{ max-width: 100%; height: auto; } .centre { padding-top: 0; } .portrait_studio{ height: 278px; overflow: hidden; margin: 15px auto 20px; } .portrait_studio img{ } .centre a, .cell{ display: none; } #home_vid .content p { width: 90%; margin-left: 5%; } #home_vid .content p br{ display: none; } .sequence-pagination { bottom: 10px; } /**/ #home_prod { background: url("http://www.galenic.fr/cell-capital/img/bg_pre-home_sm.jpg") no-repeat scroll center center / cover rgba(0, 0, 0, 0); } #home_prod .right{ height: auto !important; padding-top: 25px !important; } #home_prod .content{ margin: 0; } #home_prod h1 { /*font-size: 34px; line-height: 35px;*/ font-size: 28px; line-height: 32px; letter-spacing: 0.05em; margin-top: 0; } #home_prod h1 span { font-size: 12px; margin-top: 10px; line-height: 14px; /*width: 210px;*/ margin: 10px auto; } #home_prod h2 { font-size: 10px; margin-bottom: 80px; padding-top: 20px; /*display: none;*/ } #home_prod h2 br{ display: none; } #home_prod h2 span{ display: block; font-size: 10px; line-height: 15px; text-shadow: 0 0 10px rgba(0, 0, 0, 0.9); width: 300px; margin: 0 auto; } #home_prod p{ display: none; } #global p br{ display: none; } .prod .more { bottom: 4%; } /**/ #video { background: url("http://www.galenic.fr/cell-capital/img/bg_video_sm.jpg") no-repeat scroll center center / cover rgba(0, 0, 0, 0); } #video .content p, #video .overlay, #video .overlay_image, .video_container, .contains{ display: none; } #video .content{ padding: 80px 0 40px; } #video .content h1{ font-size: 20px; line-height: 28px; margin: 20px 30px 0; padding-bottom: 15px; } #video .content h1 span{ font-size: 14px; line-height: 20px; } #video a.Vvideo{ display: none; } #video a.mobile_vid{ display: none; /*display: block;*/ border: none; margin-bottom: 97px; } #video .content .second{ margin: 0 10px; } #video .content p.p1{ display: block; font-size: 9px; line-height: 14px; width: 100%; margin: 0 auto 25px; padding-top: 20px; width: 280px; } #video .content p.p1:before{ top: 0; } #video .content p.p1 br:nth-child(1){ display: none; } /**/ #global, #global .left{ background: #f7f7f7; } #global .left{ height: auto !important; margin: 20px 0; } #global .right{ padding: 20px 0; height: auto !important; } /*#global .left { margin: 20px 0; }*/ #global h1 { margin-top: 35px; margin-bottom: 10px; } #global h2 { font-size: 20px; padding-top: 5px; margin-bottom: 0; } #global p{ margin-top: 25px; margin-bottom: 25px; margin-top: 18px; } #global .content a{ margin-bottom: 15px; } #global .produits{ max-width: 90%; margin-top: 25px; } #global .produits .prod{ width: 21%; padding: 0 1%; } #global .produits .prod:first-child > .more{ left: 60%; } #global .produits .prod:first-child{ padding-left: 7%; } #global .produits .prod:nth-child(3){ padding-right: 0; } #global .produits .prod:nth-child(4){ padding-left: 0; } /**/ #sequence, #sequence22, #sequence_home { height: 100%; min-height: 100px; } #gamme{ background: #FFF; } #gamme .left{ background: #FFF; } #gamme .left, #gamme .right{ margin-top: 0; height: auto !important; float: left; width: 50%; } #gamme .backg { bottom: auto; height: 100%; left: 50%; top: 0; width: 50%; } #gamme #sequence .sequence-next:after { background: url(http://www.galenic.fr/cell-capital/img/sprite.png) -150px -50px no-repeat transparent } #gamme #sequence .sequence-prev:after { background: url(http://www.galenic.fr/cell-capital/img/sprite.png) -100px -50px no-repeat transparent; } #gamme #sequence .sequence-next, #gamme #sequence .sequence-prev{ -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6); } #gamme #sequence .sequence-next{ right: auto; left: 24%; } #gamme #sequence .sequence-prev{ left: 11%; } #gamme .right img, #gamme .right img, #sequence > .sequence-canvas li.animate-in > .slide .right img, #sequence > .sequence-canvas li > .slide .right img { margin-top: 43px; max-height: auto; height: auto; width: 100%; max-width: 80px; } #gamme h1{ margin-top: 15px; font-size: 16px; } #gamme h2 { font-size: 12px; line-height: 16px; width: 100%; margin-left:0; margin-bottom: 15px; margin-top: 15px; padding-bottom: 15px; padding-top: 18px; } #gamme h2 span{ text-transform: none; font-size: 12px; } #gamme p, #gamme h3{ display: none !important; } #gamme .right .content { margin: 0 45px; } #gamme #sequence{ margin-bottom: -75px; } #gamme .content a{ font-size: 11px; padding: 6px 12px; } /**/ #corpo .left{ margin-top: 0; height: auto !important; } #corpo h1{ font-size: 24px;right line-height: 30px; margin-top: 20px; } #corpo p{ font-size: 12px; margin: 20px auto 10px; padding: 20px 10px; position: relative; text-align: center; text-transform: none; width: auto; } #corpo .left{ padding-bottom: 20px !important; } #corpo .right{ padding: 20px 0 !important; height: 220px !important; margin: 0; } #corpo .right img{ max-width: 100%; } #corpo #sequence2{ height: auto; } /**/ #final .left{ height: auto !important; padding: 20px 0 !important; margin: 0; } #final .left .icon{ width: 40px; height: 100px; margin: 10px auto 25px; background:url("http://www.galenic.fr/cell-capital/img/sprite.png") no-repeat scroll -252px top / 900% auto rgba(0, 0, 0, 0);; } #final .right{ padding: 20px 0 !important; height: auto !important; margin: 0; } #final h1{ font-size: 18px; line-height: 1.2em; margin-top: 15px; } #final h1 span { font-size: 13px; line-height: 1.2em; padding: 0 20px; } /**/ #avis_page .left, #vos_avis .left, #echantillon .left, #preuve .left, #avis_page .right, #vos_avis .right, #echantillon .right, #preuve .right{ margin-top: 20px; min-height: 100px; } #vos_avis .right .content{ padding-bottom: 25px; } #echantillon .right .content, #avis_page .right .content, #preuve .right .content{ margin-top: 15px; } /*.content.form h2, .content.form2 h2,*/ #echantillon .content.form h2, #preuve .content.form h2, #avis_page .content.form2 h2{ margin-top: 15px; font-size: 20px; } #avis_page .content.form2 h2{ width: 258px; margin: 15px auto; } #preuve .content.form h2 span{ width: 210px; margin: 10px auto 0; } .content.form h2 span, .content.form2 h2 span { line-height: 1.3em; font-size: 11px; width: 100%; margin-left: 0; } .content.form h2, .content.form2 h2{ font-size: 25px; line-height: 1.3em; margin-bottom: 30px; } #avis_page .right .content h2, #echantillon .right .content h2, #preuve .left .content h2{ margin-bottom: 15px; } .content.form h2, .content.form2 h2, #vos_avis h2{ margin: 15px ; } #avis_page .content.form2 .content_avis{ margin-bottom: 20px; } .form_back{ padding: 0; background: transparent; margin: 3% 0; } #avis_page .form_back{ position: relative; padding-bottom: 1px; margin-bottom: 10px; } #avis_page .form_back:after{ /*background: none repeat scroll 0 0 #a9a5a5; content: " "; height: 1px; margin-left: 5%; position: absolute; bottom: 0; width: 90%;*/ } .line2 label br{ display: none; } form{ padding: 0; box-shadow: none; background: transparent; margin: 0 0 20px 0; } .line, .line2, .line3{ float: none; width: auto; margin-bottom: 4%; } form input[type="text"], form textarea { background: none repeat scroll 0 0 #f5f5f5; } form .selform{ background: url("http://www.galenic.fr/cell-capital/img/sel.jpg") no-repeat scroll right center #f5f5f5; } p.avert{ margin: 2.5% 0 4%; } p.avert br{ display: none; } .line_submit a { margin: 0 10px; } #container_avis{ height: auto; max-height: 100%; margin: 0; } #container_avis .avis .nom{ float: none; width: 100%; padding: 0 10px 5px; } #container_avis .avis .avis_content{ border-left: none; padding: 0 0 7px 10px; } #container_avis .avis.vis{ padding-top: 15px; } #container_avis .avis .nom .prod-test{ text-align: left; } .filtre:before { top: 3px; } form .line-peau.line4 label, form .line-peau .choix { float: none; width: 100%; } form .line-peau .choix { margin-bottom: 15px; } form .line2 input{ float: left; } form .line2 label{ display: block; float: left; width: 92%; padding-left: 2%; text-align: left; } #pdv p{ font-size: 12px; line-height: 16px; } } @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } /* ========================================================================== PLUGINS ========================================================================== */ /*VIDEO*/ #big-video-wrap{overflow:hidden;position:fixed;height:100%;width:100%;top:0;left:0; opacity:0;} #big-video-vid,#big-video-image{position:absolute;} #big-video-control-container{position:fixed;bottom:0;padding:10px;width:100%;background:rgba(0,0,0,.25); -webkit-transition-duration:0.6s;-moz-transition-duration:0.6s;-ms-transition-duration:0.6s;-o-transition-duration:0.6s;transition-duration:0.6s;} #big-video-control{width:100%;height:16px;position:relative;} #big-video-control-middle{margin: 0 56px 0 24px;} #big-video-control-bar{width:100%;height:16px;position:relative;cursor:pointer;} #big-video-control-progress{position:absolute;top:7px;height:3px;width:0%;background:#fff;} #big-video-control-track{position:absolute;top:8px;height:1px;width:100%;background:#fff;} #big-video-control-bound-left{left:0;} #big-video-control-bound-right{right:-1px} #big-video-control-track .ui-slider-handle {opacity:0;} #big-video-control-playhead{left:30%;} #big-video-control-play{position:absolute;top:0;left:0;height:16px;width:16px;background-image:url('http://www.galenic.fr/cell-capital/css/bigvideo.png');} #big-video-control-timer{position:absolute;top:1px;right:0;color:#fff;font-size:11px;} #big-video-control-playhead,#big-video-control-bound-left,#big-video-control-bound-right{position:absolute;top:0;height:16px;width:1px;background:#fff;} #big-video-control .ui-slider-handle{border-left:solid 1px #fff; width:16px;height:16px;position:absolute;top:-8px;} .transparent{-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);-moz-opacity:0;-khtml-opacity:0;opacity:0;} .vjs-big-play-button, .vjs-control-bar{display:none !important;} /*! jQuery UI - v1.11.1 - 2014-09-02 * http://jqueryui.com * Includes: core.css, datepicker.css, theme.css * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS%2CTahoma%2CVerdana%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=gloss_wave&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=highlight_soft&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=glass&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=glass&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=highlight_soft&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=diagonals_thick&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=diagonals_thick&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=flat&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px * Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */ .ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-datepicker{width:17em;padding:.2em .2em 0;display:none}.ui-datepicker .ui-datepicker-header{position:relative;padding:.2em 0}.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;top:2px;width:1.8em;height:1.8em}.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:1px}.ui-datepicker .ui-datepicker-prev{left:2px}.ui-datepicker .ui-datepicker-next{right:2px}.ui-datepicker .ui-datepicker-prev-hover{left:1px}.ui-datepicker .ui-datepicker-next-hover{right:1px}.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px}.ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center}.ui-datepicker .ui-datepicker-title select{font-size:1em;margin:1px 0}.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:45%}.ui-datepicker table{width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em}.ui-datepicker th{padding:.7em .3em;text-align:center;font-weight:bold;border:0}.ui-datepicker td{border:0;padding:1px}.ui-datepicker td span,.ui-datepicker td a{display:block;padding:.2em;text-align:right;text-decoration:none}.ui-datepicker .ui-datepicker-buttonpane{background-image:none;margin:.7em 0 0 0;padding:0 .2em;border-left:0;border-right:0;border-bottom:0}.ui-datepicker .ui-datepicker-buttonpane button{float:right;margin:.5em .2em .4em;cursor:pointer;padding:.2em .6em .3em .6em;width:auto;overflow:visible}.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left}.ui-datepicker.ui-datepicker-multi{width:auto}.ui-datepicker-multi .ui-datepicker-group{float:left}.ui-datepicker-multi .ui-datepicker-group table{width:95%;margin:0 auto .4em}.ui-datepicker-multi-2 .ui-datepicker-group{width:50%}.ui-datepicker-multi-3 .ui-datepicker-group{width:33.3%}.ui-datepicker-multi-4 .ui-datepicker-group{width:25%}.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header{border-left-width:0}.ui-datepicker-multi .ui-datepicker-buttonpane{clear:left}.ui-datepicker-row-break{clear:both;width:100%;font-size:0}.ui-datepicker-rtl{direction:rtl}.ui-datepicker-rtl .ui-datepicker-prev{right:2px;left:auto}.ui-datepicker-rtl .ui-datepicker-next{left:2px;right:auto}.ui-datepicker-rtl .ui-datepicker-prev:hover{right:1px;left:auto}.ui-datepicker-rtl .ui-datepicker-next:hover{left:1px;right:auto}.ui-datepicker-rtl .ui-datepicker-buttonpane{clear:right}.ui-datepicker-rtl .ui-datepicker-buttonpane button{float:left}.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,.ui-datepicker-rtl .ui-datepicker-group{float:right}.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header{border-right-width:0;border-left-width:1px}.ui-widget{font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;font-size:1.1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;font-size:1em}.ui-widget-content{border:1px solid #ddd;background:#eee url("http://www.galenic.fr/cell-capital/css/images/ui-bg_highlight-soft_100_eeeeee_1x100.png") 50% top repeat-x;color:#333}.ui-widget-content a{color:#333}.ui-widget-header{border:1px solid #e78f08;background:#f6a828 url("http://www.galenic.fr/cell-capital/css/images/ui-bg_gloss-wave_35_f6a828_500x100.png") 50% 50% repeat-x;color:#fff;font-weight:bold}.ui-widget-header a{color:#fff}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #ccc;font-weight:bold;color:#1c94c4}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited{color:#1c94c4;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{border:1px solid #fbcb09;background:#fdf5ce url("http://www.galenic.fr/cell-capital/css/images/ui-bg_glass_100_fdf5ce_1x400.png") 50% 50% repeat-x;font-weight:bold;color:#c77405}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited{color:#c77405;text-decoration:none}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid #fbd850;background:#fff url("http://www.galenic.fr/cell-capital/css/images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x;font-weight:bold;color:#eb8f00}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#eb8f00;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #fed22f;background:#ffe45c url("http://www.galenic.fr/cell-capital/css/images/ui-bg_highlight-soft_75_ffe45c_1x100.png") 50% top repeat-x;color:#363636}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#363636}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #cd0a0a;background:#b81900 url("http://www.galenic.fr/cell-capital/css/images/ui-bg_diagonals-thick_18_b81900_40x40.png") 50% 50% repeat;color:#fff}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#fff}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#fff}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url("http://www.galenic.fr/cell-capital/css/images/ui-icons_222222_256x240.png")}.ui-widget-header .ui-icon{background-image:url("http://www.galenic.fr/cell-capital/css/images/ui-icons_ffffff_256x240.png")}.ui-state-default .ui-icon{background-image:url("http://www.galenic.fr/cell-capital/css/images/ui-icons_ef8c08_256x240.png")}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon{background-image:url("http://www.galenic.fr/cell-capital/css/images/ui-icons_ef8c08_256x240.png")}.ui-state-active .ui-icon{background-image:url("http://www.galenic.fr/cell-capital/css/images/ui-icons_ef8c08_256x240.png")}.ui-state-highlight .ui-icon{background-image:url("http://www.galenic.fr/cell-capital/css/images/ui-icons_228ef1_256x240.png")}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url("http://www.galenic.fr/cell-capital/css/images/ui-icons_ffd27a_256x240.png")}.ui-icon-blank{background-position:16px 16px}.ui-icon-carat-1-n{background-position:0 0}.ui-icon-carat-1-ne{background-position:-16px 0}.ui-icon-carat-1-e{background-position:-32px 0}.ui-icon-carat-1-se{background-position:-48px 0}.ui-icon-carat-1-s{background-position:-64px 0}.ui-icon-carat-1-sw{background-position:-80px 0}.ui-icon-carat-1-w{background-position:-96px 0}.ui-icon-carat-1-nw{background-position:-112px 0}.ui-icon-carat-2-n-s{background-position:-128px 0}.ui-icon-carat-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-64px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-64px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:0 -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:4px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:4px}.ui-widget-overlay{background:#666 url("http://www.galenic.fr/cell-capital/css/images/ui-bg_diagonals-thick_20_666666_40x40.png") 50% 50% repeat;opacity:.5;filter:Alpha(Opacity=50)}.ui-widget-shadow{margin:-5px 0 0 -5px;padding:5px;background:#000 url("http://www.galenic.fr/cell-capital/css/images/ui-bg_flat_10_000000_40x100.png") 50% 50% repeat-x;opacity:.2;filter:Alpha(Opacity=20);border-radius:5px} .ui-datepicker-prev, .ui-datepicker-next{display: none;} .ui-widget{ /*font-family: "HelveticaNeue-Thin",Arial,Helvetica,sans-serif;*/ font-family: HelveticaNeueLT-Thin; font-weight: normal; font-style: normal; font-size: 13px; padding: 4px; } .ui-datepicker .ui-widget-header{ background: transparent; border-color: #c6c6c6; border-left:none; border-right: none; border-top: none; border-radius:0; padding-bottom: 6px; } .ui-widget-content{ background: none repeat scroll 0 0 #F9F9F9; border-radius: 2px; box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); } .ui-widget-content .ui-state-default{ color:#000; -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active{ border: 1px solid #ccc; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); background: #FFF; } .ui-state-default.ui-state-hover{ border: 1px solid #ccc; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); background: #FCFCFC; } .ui-datepicker .ui-datepicker-title select.ui-datepicker-month, .ui-datepicker .ui-datepicker-title select.ui-datepicker-year{ background: none repeat scroll 0 0 #f4f4f4; border: 1px solid #c6c6c6; border-radius: 4px; box-sizing: border-box; /*font-family: "HelveticaNeue-Thin",Arial,Helvetica,sans-serif;*/ font-family: HelveticaNeueLT-Thin; font-weight: normal; font-style: normal; line-height: 22px; padding: 2%; transition: all 0.2s ease 0s; /*width: 96%;*/ margin: 0 2.5%; } .ui-datepicker th{ padding: 4px 0.3em; } .ui-datepicker td span, .ui-datepicker td a { text-align: center; } /*CUSTOM SCROLL AVIS*/ /* == malihu jquery custom scrollbar plugin == Plugin URI: http://manos.malihu.gr/jquery-custom-content-scroller */ /* CONTENTS: 1. BASIC STYLE - Plugin's basic/essential CSS properties (normally, should not be edited). 2. VERTICAL SCROLLBAR - Positioning and dimensions of vertical scrollbar. 3. HORIZONTAL SCROLLBAR - Positioning and dimensions of horizontal scrollbar. -> Not load 4. VERTICAL AND HORIZONTAL SCROLLBARS - Positioning and dimensions of 2-axis scrollbars. 5. TRANSITIONS - CSS3 transitions for hover events, auto-expanded and auto-hidden scrollbars. 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS 6.1 THEMES - Scrollbar colors, opacity, dimensions, backgrounds etc. via ready-to-use themes. -> Not load */ /* ------------------------------------------------------------------------------------------------------------------------ 1. BASIC STYLE ------------------------------------------------------------------------------------------------------------------------ */ .mCustomScrollbar{ -ms-touch-action: none; touch-action: none; /* MSPointer events - direct all pointer events to js */ } .mCustomScrollbar.mCS_no_scrollbar{ -ms-touch-action: auto; touch-action: auto; } .mCustomScrollBox{ /* contains plugin's markup */ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr; } .mCSB_container{ /* contains the original content */ overflow: hidden; width: auto; height: auto; } /* ------------------------------------------------------------------------------------------------------------------------ 2. VERTICAL SCROLLBAR y-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_inside > .mCSB_container{ margin-right: 20px; } /*.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } non-visible scrollbar */ .mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */ .mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ position: absolute; width: 10px; height: auto; left: auto; top: 0; right: 0; bottom: 0; z-index: 3; } .mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */ .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */ right: auto; left: 0; } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */ .mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; } .mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; } .mCSB_scrollTools .mCSB_draggerRail{ width: 10px; height: 100%; margin: 0 auto; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .mCSB_scrollTools .mCSB_dragger{ /* the draggable element */ cursor: pointer; width: 100%; height: 30px; /* minimum dragger height */ z-index: 1; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */ position: relative; width: 10px; height: 100%; margin: 0 auto; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; text-align: center; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 10px; /* auto-expanded scrollbar */ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown{ display: block; position: absolute; height: 20px; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 4. VERTICAL AND HORIZONTAL SCROLLBARS yx-axis ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_container_wrapper{ position: absolute; height: auto; width: auto; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; margin-right: 30px; margin-bottom: 30px; } .mCSB_container_wrapper > .mCSB_container{ padding-right: 30px; padding-bottom: 30px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 20px; } .mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 20px; } /* non-visible horizontal scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom: 0; } /* non-visible vertical scrollbar/RTL direction/left-side scrollbar */ .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal, .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right: 0; } /* RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 20px; } /* non-visible scrollbar/RTL direction/left-side scrollbar */ .mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left: 0; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 30px; } .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; /* non-visible scrollbar */ margin-left: 0; } /* non-visible horizontal scrollbar */ .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom: 0; } /* ------------------------------------------------------------------------------------------------------------------------ 5. TRANSITIONS ------------------------------------------------------------------------------------------------------------------------ */ .mCSB_scrollTools, .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown, .mCSB_scrollTools .mCSB_buttonLeft, .mCSB_scrollTools .mCSB_buttonRight{ -webkit-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: opacity .2s ease-in-out, background-color .2s ease-in-out; transition: opacity .2s ease-in-out, background-color .2s ease-in-out; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */ .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, .mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{ -webkit-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -moz-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; -o-transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; transition: width .2s ease-out .2s, height .2s ease-out .2s, margin-left .2s ease-out .2s, margin-right .2s ease-out .2s, margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s, opacity .2s ease-in-out, background-color .2s ease-in-out; } /* ------------------------------------------------------------------------------------------------------------------------ 6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS ------------------------------------------------------------------------------------------------------------------------ */ /* ---------------------------------------- 6.1 THEMES ---------------------------------------- */ /* default theme ("light") */ .mCSB_scrollTools{ opacity: 0.75; filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; } .mCS-autoHide > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 0; filter: alpha(opacity = 0); filter: "alpha(opacity=0)"; -ms-filter: "alpha(opacity=0)"; } .mCustomScrollbar > .mCustomScrollBox > .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollbar > .mCustomScrollBox ~ .mCSB_scrollTools.mCSB_scrollTools_onDrag, .mCustomScrollBox:hover > .mCSB_scrollTools, .mCustomScrollBox:hover ~ .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox > .mCSB_scrollTools, .mCS-autoHide:hover > .mCustomScrollBox ~ .mCSB_scrollTools{ opacity: 1; filter: alpha(opacity = 100); filter: "alpha(opacity=100)"; -ms-filter: "alpha(opacity=100)"; } .mCSB_scrollTools .mCSB_draggerRail{ background-color: #cbcbcb; /*background-color: rgba(0,0,0,0.4); filter: "alpha(opacity=40)"; -ms-filter: "alpha(opacity=40)"; */ } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /*background-color: #fff; background-color: rgba(255,255,255,0.75); filter: "alpha(opacity=75)"; -ms-filter: "alpha(opacity=75)"; */ background: #737373; } .mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ /*background-color: #fff; background-color: rgba(255,255,255,0.85); filter: "alpha(opacity=85)"; -ms-filter: "alpha(opacity=85)"; */ } .mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar, .mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ /*background-color: #fff; background-color: rgba(255,255,255,0.9); filter: "alpha(opacity=90)"; -ms-filter: "alpha(opacity=90)"; */ } @media only screen and (max-width: 500px) { .mCSB_inside > .mCSB_container{ margin-right: 0; } } /* ------------------------------------------------------------------------------------------------------------------------ LOADER ------------------------------------------------------------------------------------------------------------------------ */ #loader{ height: 100%; left: 0; position: fixed; top: 0; width: 100%; opacity: 0; z-index: -1; -webkit-transition: 0.1s; -moz-transition: 0.1s; -ms-transition: 0.1s; -o-transition: 0.1s; transition: 0.1s; } #loader.inload{ display: block; z-index: 2; } #loader.inload2{ opacity: 1; } .spinner { height: 60px; left: 50%; margin: -30px 0 0 -30px; position: absolute; top: 50%; width: 60px; } .container1 > div, .container2 > div, .container3 > div { width: 12px; height: 12px; background-color: #165f42; border-radius: 100%; position: absolute; } .inload .container1 > div, .inload .container2 > div, .inload .container3 > div { -webkit-animation: bouncedelay 1.2s infinite ease-in-out; animation: bouncedelay 1.2s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both; } .spinner .spinner-container { position: absolute; width: 100%; height: 100%; } .container2 { -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .container3 { -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } .circle1 { top: 0; left: 0; } .circle2 { top: 0; right: 0; } .circle3 { right: 0; bottom: 0; } .circle4 { left: 0; bottom: 0; } .inload .container2 .circle1 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .inload .container3 .circle1 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .inload .container1 .circle2 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .inload .container2 .circle2 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .inload .container3 .circle2 { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .inload .container1 .circle3 { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .inload .container2 .circle3 { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .inload .container3 .circle3 { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .inload .container1 .circle4 { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .inload .container2 .circle4 { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .inload .container3 .circle4 { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); } } /* Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }