@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic); body { background-image: url(fond_cs-ingenierie.jpg); } html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } h1{ font-size:36px; margin:0.4em 0; font-family: p8; letter-spacing: 1px; line-height: 34px; } #espacetitre{ height:3px; } input, textarea { -webkit-appearance: none; -webkit-border-radius: 0; } button, html input[type="button"],/* 1 */ input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; *overflow:visible; } body, img,.commentys-form input[type="text"],.commentys-form input[type="email"],.commentys-form input[type="url"],.commentys-form textarea { transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; -webkit-transition: all .2s linear; } html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, input, main { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; vertical-align: baseline; border: 0; outline: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, img, main { display: block } audio, canvas, video { display: inline-block; *display:inline; *zoom:1 } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } .clear { clear: both; line-height: 0; height: 0; } a { text-decoration: none; outline: none; color: #010101; transition-delay: 0s; transition-duration: 0.6s; transition-property: all; transition-timing-function: ease; } a:focus, img:focus, button:focus, .btn:focus {outline: none;} ::-moz-selection {background-color:#fb5353;color:#fff;text-shadow:none;} ::selection {background-color: #fb5353;color: #fff;text-shadow: none;} @font-face {font-family: 'Open Sans', sans-serif;} /*===== Header ===*/ header{ padding-top:20px; padding-bottom:39px} header h1{ padding:0; margin:0} header h1 > a{ max-width:66px; display:block; float:left} header nav{ padding-top:10px;transition-delay: 0s; transition-duration: 0.6s;transition-property: all;transition-timing-function: ease;} header nav ul{ display:none; position: fixed; z-index:60; text-align:center; width:100%; height:100%; top:0; left:0; right:0; background-color:rgba(255,255,255,0.8); padding:0; margin:0; padding-top:199px;} header nav ul > li{ font-weight:800; font-size:42px; display:block} header nav ul > li > a{ display:block; line-height:72px; color:#404040} header nav ul > li:hover a,header[role="header"] nav ul > li.nav-active a{ text-decoration:none; color:#fb5353} header nav #menu-button {width: 31px;font-size: 0;float: right;height: 19px;position: relative; z-index:70; -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer;} header nav #menu-button span {display: block;position: absolute;z-index: 60;height: 3px; width: 100%;background: #111111;opacity: 1;left: 0; -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg); transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;} header nav #menu-button span {background: #010101;} header nav #menu-button span:nth-child(1) {top:0px;} header nav #menu-button span:nth-child(2) {top:7px;} header nav #menu-button span:nth-child(3) {top:14px;} header nav #menu-button.open span:nth-child(1) {top: 10px; -webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-o-transform: rotate(135deg);transform: rotate(135deg);} header nav #menu-button.open span:nth-child(2) {opacity: 0;left: -60px;} header nav #menu-button.open span:nth-child(3) {top: 10px; -webkit-transform: rotate(-135deg);-moz-transform: rotate(-135deg);-o-transform: rotate(-135deg);transform: rotate(-135deg);} /*===== main ===*/ main { padding-bottom:90px} main article{ padding-left:11px; padding-right: 17px; } main article header,main article header{ padding-bottom:19px; padding-top:43px} main article header h2,main article header h2{ font-size:20px; line-height:normal; color:#404040; font-weight:800} main article header h2 ,main article header h2{ display:block; font-size:24px; color:#990000; padding-bottom:1px} main article p,main article p{ font-size:20px; line-height:30px; color:#454545; font-family: "Open sans"; text-align: justify; } main article h4,main article h4{ font-size:30px; line-height:30px; letter-spacing:2px; font-family: "p8"; } main article[role="pge-title-content"] h5,main[role="main-inner-wrapper"] article[role="pge-title-content"] h5{ font-size:23px; line-height:30px; color:#454545; letter-spacing:1px; font-family: "p8"; text-align: left; }main article[role="pge-title-content"] h6,main[role="main-inner-wrapper"] article[role="pge-title-content"] h6{ font-size:21px; line-height:30px; color:#454545; letter-spacing:1px; font-family: "p8"; text-align: left; } /*===== footer ===*/ footer{ background-color:#FFF; padding-top:50px; padding-bottom:7px} footer> h1 a{ margin:0 auto; display:block; max-width:66px;} footer nav{ padding-top:3px; padding-bottom:3px} footer nav > ul{ text-align:center; padding:0; margin:0} footer nav > ul > li{ display: inline-block; text-transform:uppercase; font-size:16px; margin:0 1px} footer nav > ul > li > a{ color:#555; line-height: 35px;font-weight:normal; padding:20px;box-shadow: 3px 1px 5px #777; -webkit-box-shadow: 3px 1px 5px #777; -moz-box-shadow: 3px 1px 5px #777;} footer nav > ul > li:hover a{ text-decoration:none; color:#fff;background-color:#111; font-weight:400; } footer ul[role="social-icons"]{ padding:0; margin:0; text-align:center; padding-bottom:40px;} footer ul[role="social-icons"] > li{ display: inline-block; margin:0 6.5px} footer ul[role="social-icons"] > li > a{ display:block; width:42px; height:42px; background-color:#bbbbbb; color:#FFF; line-height:42px; font-size:20px; border-radius:100%; text-align:center} footer ul[role="social-icons"] > li:hover a{ background-color:#fb5353} footer .copy-right{ text-align:center; display:block; font-size:12px; line-height:13px; color:#9c9c9c} /*===== Aboutbackground-color:#fb5353; ===*/ main .about-content{ padding-top:4%; padding-left:8%; padding-right:8%; padding-bottom:12%; background-image: url(../images/fd_about.png); background-size: cover;} main .about-content2{ padding-top:11%; padding-left:8%; padding-right:8%; background-size: 100%; padding-bottom:9%; background-image: url(../images/fd_gris0.jpg); } main .about-content p{ font-size:17px; line-height:30px; color:#fff;text-shadow: 1px 1px 0px #111; padding-bottom:20px} main .about-content2 p{ font-size:17px; line-height:30px; color:#fff; padding-bottom:20px} main.thumbnails-pan{ padding-top:30px} main .thumbnails-pan section figure{ background-color:#FFF; position:relative; overflow:hidden; cursor:pointer} main .thumbnails-pan section figure,main .thumbnails-pan section figure, img,main .thumbnails-pan section figure figcaption,section.blog-content figure,section.blog-content figure img,section.blog-content article{transition-delay: 0s;transition-duration: 0.6s;transition-property: all;transition-timing-function: ease;} main[role="main-inner-wrapper"] .thumbnails-pan section figure figcaption{ position:absolute; bottom:-50%; left:0; right:0; background-color:#fb5353; margin:0 69px; text-align:center; color:#FFF; padding-top:16px; padding-bottom:27px} main .thumbnails-pan section figure:hover figcaption h2{ font-size:21px; line-height:22px; font-weight:300} main.thumbnails-pan section figure:hover figcaption p{ text-transform:uppercase; font-size:13px; line-height:14px; font-weight:bold} main .thumbnails-pan section figure:hover,section.blog-content:hover article{ background-color:#fb5353; color:#FFF} main.thumbnails-pan section figure:hover img,section.blog-content:hover figure img{-webkit-transform: scale3d(1.08,1.08,2);transform: scale3d(1.08,1.08,2); opacity:0.5} main .thumbnails-pan section figure:hover figcaption{ bottom:0;} /*===== Blog ===*/ article[role="pge-title-content"].blog-header{ padding-bottom:218px} section.blog-content{ margin-bottom:29px} section.blog-content figure{ overflow:hidden; position:relative;background-color: rgba(255,255,255,0.4); cursor:pointer} section.blog-content figure .post-date{ text-align:center; color:#FFF; font-weight:800; font-size:14px; line-height:18px; text-transform:uppercase; display:block; background-color:#fb5353; width:130px; height:130px; position:absolute; left:0; top:0; padding-top:41px; z-index:50} section.blog-content figure .post-date span{ font-size:50px; line-height:35px; display:block} section.blog-content article{ font-size:21px; line-height:30px; color:#606060; font-weight:800; color:#999; padding-left:42px; padding-top:33px; padding-bottom:31px;} section.blog-content:hover figure img{ opacity:0.5} /*===== Contact ===*/ article[role="pge-title-content"].contact-header{ padding-bottom:218px} article[role="pge-title-content"].contact-header p a{ color:#343434; padding-right:34px} article[role="pge-title-content"].contact-header p a:hover{color:#fb5353; text-decoration:none} .demo-wrapper {width: 100%;margin: 0 auto;height:499px;} #surabaya {width: 100%;height: 100%;} .error_message{ color:#e84d49} #success_page h3,#success_page p{color:#60ca6f } .contat-from-wrapper{ padding:0 69px; margin-top:48px} .contat-from-wrapper input[type="text"],.contat-from-wrapper input[type="email"],.contat-from-wrapper textarea{ width:100%; display:block; outline:none; border-bottom:1px solid #bbbbbb; background-color:inherit; color:#404040; font-size:21px; line-height:23px; padding-bottom:24px; font-family: p8; } .contat-from-wrapper input[type="text"]:focus,.contat-from-wrapper input[type="email"]:focus,.contat-from-wrapper textarea:focus{ border-bottom-color:#9f9e9e; font-family: "p8"; } .contat-from-wrapper form ::-webkit-input-placeholder { color:#404040; } .contat-from-wrapper form ::-moz-placeholder { color:#404040; } /* firefox 19+ */ .contat-from-wrapper form :-ms-input-placeholder { color:#404040; } /* ie */ .contat-from-wrapper form input:-moz-placeholder { color:#404040; } .contat-from-wrapper textarea{ border-bottom:1px solid #bbbbbb; border-left:none; border-right:none; border-top:none; height:77px; margin-top:56px} .contat-from-wrapper input[type="submit"]{ display:block; border:none; outline:none; width:200px; line-height:60px; text-transform:uppercase; font-size:21px; color:#FFF; font-weight:800; letter-spacing:2px; background-color:#e84d49; margin:41px auto; margin-bottom:0} .contat-from-wrapper input[type="submit"]:hover{background-color:#f8524e} /*== Work Details ==*/ .work-details,.blog-details{ padding:0 69px; margin-top:43px; } .work-details header h2{ color:#343434; font-size:24px; font-weight:800} .work-details header a{ display:inline-block; color:#fb5353; font-size:18px;font-weight:800;padding-top:3px} .work-details header a i{ color:#0d0d0d; padding-left:10px} .work-details header a:hover{ color:#0d0d0d; text-decoration:none} .work-details header a:hover i{ color:#fb5353} .work-details p{ font-size:16px; color:#666666; line-height:30px; margin-bottom:20px; font-weight:300} .work-details p strong{ font-weight:800} .work-images{ margin-top:46px} .work-images li{ margin-bottom:50px} /*== Blog Details ==*/ .bog-header { padding-bottom:62px} .bog-header h3,.comments-pan h3,.commentys-form h4{ color:#404040;font-weight:800; padding-bottom:24px; display:block} .bog-header h3 span{ color:#fb5353} .bog-header h2{ font-size:36px; font-weight:normal} .blog-details .enter-content{ margin-top:62px; } .blog-details .enter-content p{ font-size:18px; line-height:30px; color: #333333; } .blog-details p{ font-size:20px; line-height:30px; color: #333333; } .enter-content p{ font-size:18px; line-height:30px; color: #333333; } .comments-pan{border-top:2px solid #dedede; padding-top:15px} .comments-pan h3{border-bottom:2px solid #dedede; padding-bottom:34px; margin-bottom:52px} .comments-reply,.reply-pan{ padding:0; margin:0; list-style:none} .comments-reply li{ display:block; border-bottom:2px solid #dedede; overflow:hidden; padding-bottom:51px; margin-bottom:39px} .comments-reply li figure{ float:left; width:70px; background-color:#000} .comments-reply li section{ float:left; padding-left:30px; font-size:16px; line-height:30px; font-weight:300; color:#343434;width: 92%;} .comments-reply li section .date-pan{ font-size:14px; line-height:18px; padding-bottom:25px} .comments-reply li section h4{font-weight:800; color:#404040; font-size:21px; margin-bottom:6px; margin-top:0} .comments-reply li section h4 a{ font-size:16px; color:#fb5353;font-weight:400; display:inline-block; padding-left:20px} .reply-pan{ clear:both; display:block; margin-left:100px;padding-top:39px } .reply-pan li{ border-bottom:none;border-top:2px solid #dedede; padding-bottom:0; margin-bottom:0;padding-top:38px;} .commentys-form h4{ font-size:24px} .commentys-form form{ margin-top:30px} .commentys-form input[type="text"],.commentys-form input[type="email"],.commentys-form input[type="url"],.commentys-form textarea{ font-size:21px; line-height:22px; color:#404040; padding-bottom:26px; border-bottom:2px solid #bbbbbb; width:100%; display:block; border-left:none; border-right:none; border-top:none; background-color:transparent; outline:none} .commentys-form textarea{ margin-top:57px} .commentys-form input[type="text"]:focus,.commentys-form input[type="email"]:focus,.commentys-form input[type="url"]:focus,.commentys-form textarea:focus{ border-bottom-color:#000} .commentys-form input[type="button"]{ padding:0 36px; text-transform:uppercase; display:inline-block; font-size:21px; line-height:60px; color:#FFF; font-weight: bold; text-align:center; border:none; outline:none; background-color:#fb5353; margin-top:50px} .commentys-form input[type="button"]:hover{ background-color:#ff5c5c} .cache{ visibility: hidden; display: none; } .deco{ background-image: url(../images/fd_gris02.png); position:absolute; top:0; left:0; right:0; z-index: 5; width: 100%; height:150px; background-repeat: no-repeat; } #opoibi { animation: bounceInDown 2.5s; position:absolute; width:100px; height: 65px; top:314px; right:-230px; z-index: 7852; border: 1px solid black; visibility: visible; } #ecriture { position:absolute; width:135px; height:auto; top:280px; left:-220px; z-index: 7852; } #espaceintro_rea{width:100%; height:155px; } #rdv { position:absolute; top:10px; margin-bottom: 0; right: 51px; width: 135px; display: block; font-family:"p8"; } #rdv span{ color: #33333; } .ribbon { background-color: #5bc8f7; } .ribbon::before { border-style: dotted; } #fondrdv{ position:absolute; top:17px; margin-bottom: 0; color: #FFFfff; right: 36px; text-align: center; width: 147px; height: 118px; display: block; overflow: visible; z-index:2; } #fondrdv::before{ -webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; z-index: 58; content : url(); } #fondrdv:hover:before{ -webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; z-index: 58; content : url()} @keyframes float { 0% { box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); transform: translatey(0px); } 50% { box-shadow: 0 18px 15px 0px rgba(0,0,0,0.2); transform: translatey(12px); } 100% { box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); transform: translatey(0px); } } #logo1 { font-size: 36px; position:absolute; left:44px; top:18px; margin-bottom: 0; color: #FFFFFF; } .espaceintro{width:100%;height:50px; } #stat { position:fixed; width:100%; height: 140px; z-index:646; top: -10px; box-shadow: 3px 1px 5px #444444; -webkit-box-shadow: 3px 1px 5px #444444; -moz-box-shadow: 3px 1px 5px #444444; background-color: #FFFFFF; } #b1b { animation: bounceInDown 0.5s; opacity:0.7; position:absolute; width:141px; height: 61px; top:57px; left: -281px; z-index: 12; -webkit-transition: all 3.2s ease-in; -moz-transition: all 3.2s ease-in; -o-transition: all 3.2s ease-in; transition: all 3.2s ease-in; bottom: -6px; }#b2b { animation: bounceInDown 0.5s; opacity:0.7; position:absolute; width:101px; height: 61px; top:57px; left: -231px; z-index: 2; -webkit-transition: all 3.2s ease-in; -moz-transition: all 3.2s ease-in; -o-transition: all 3.2s ease-in; transition: all 3.2s ease-in; bottom: -6px; }#b3b { animation: bounceInDown 0.5s; opacity:0.7; position:absolute; width:151px; height: auto; top:200px; left: -220px; z-index: 2; -webkit-transition: all 3.2s ease-in; -moz-transition: all 3.2s ease-in; -o-transition: all 3.2s ease-in; transition: all 3.2s ease-in; bottom: -6px; } #titr2{ margin-left:auto; width:10%; text-align:center; margin-top: 5px; text-decoration: none; height: auto; margin-bottom: 1px; position:relative; z-index: 52; overflow: visible; top: 30px; margin-right: auto; } #cadre1{ padding: 45px 30px; float:left; width: 50%; height: auto; overflow: hidden; font-size: 24px; padding-left: 9%; }#cadre1 p{ font-size:20px; line-height:30px; color:#454545; font-family: "Open sans"; text-align: justify; }#cadre1 div h4{ text-align: left; } #cadre2{ padding: 25px 26px; float:left; width: 50%; overflow: hidden; height: auto; z-index: 4; } #cadre2 p{ font-size:20px; line-height:30px; color:#454545; font-family: "Open sans"; text-align: justify; } #telephone1 { font-size: 18px; position:relative; text-align: center; width: 200px; float:left; height: auto; font-family:"p8"; letter-spacing:1px; box-sizing: border-box; border: 5px white solid; border-radius: 10px; z-index: 7; color: #990000; font-variant: small-caps; } #telephone1 a{ font-size: 16px; font-family:"p8"; } #telephone2 a{ font-size: 16px; font-family:"p8"; } #telephone2 { color: #990000; font-size: 18px; position:relative; float:right; text-align: center; width: 200px; height: auto; font-family:"p8"; letter-spacing:1px; box-sizing: border-box; border: 5px white solid; border-radius: 10px; z-index: 7; font-variant: small-caps; } body { background-image: url(fond_cs-ingenierie.jpg); } @keyframes float { 0% { box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); transform: translatey(0px); } 50% { box-shadow: 0 15px 15px 0px rgba(0,0,0,0.2); transform: translatey(-20px); } 100% { box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); transform: translatey(0px); } } #titr3b{ display: none;} #titr2b{ display: block;} .ctainer {text-decoration: none; display: flex; width: 390px; height: 170px; font-family: 'p8'; }.avtartransp { width: 110px; height: 60px; margin-left: 10px; }.avtartransp2 { width: 110px; height: 60px; margin-left: 10px;animation: float 6s ease-in-out infinite;img { width: 100%; height:auto;  } } .avtar { background-color: #FFFFFF; font-family: 'p8';font-variant: small-caps; text-decoration: none; margin-left: 10px; width: 110px; height: 60px; box-sizing: border-box; font-family: 'p8'; font-size: 16px; border: 5px white solid; border-radius: 10px; color: #555; font-weight: bold; overflow: hidden; box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); transform: translatey(0px); animation: float 6s ease-in-out infinite; img {  width: 100%; height:auto;  } } .avtar:hover { -webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; z-index: 58;border: 5px black solid; color:#FFF; background-color: #000; } .ctainer2{ color: #990000; display: flex; width: 390px;text-decoration: none; height: 170px; font-family: 'p8'; margin-top: -100px; } .avtar3 { text-decoration: none; font-family: 'p8'; margin-left: 10px; width: 110px; height: 80px; box-sizing: border-box; font-size: 16px; border: 5px white solid; border-radius: 10px; color: #999999; font-weight: bold; overflow: hidden; box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); transform: translatey(0px); animation: float 6s ease-in-out infinite; img { width: 100%; height: auto;} } .avtar2:hover { text-decoration: none; background-color: #990000; } } @font-face { font-family: 'p8'; src: url('fonts/apollo-webfont.eot'); src: url('fonts/apollo-webfont.woff') format('woff'), url('fonts/apollo-webfont.ttf') format('truetype'), url('fonts/apollo-webfont.svg#webfontNwkXRkFW') format('svg'); font-weight: normal; font-style: normal; } #cadremenucs { animation: bounceInDown 1.5s; margin-top: 35px; position:absolute; width:340px; height: auto; top:60px; left: -150px; z-index: 5; } #cadremenucs2 {animation: bounceInDown 1.5s; position:absolute; width:320px; height: auto; top:81px; left: 272px; z-index: 2; } #map { width:340px; height: auto; z-index: 2; margin-right: auto; margin-left: auto; position: relative; text-align: center; } #pointcarte {animation: bounceInDown 2.5s; position:absolute; width:90px; height: 90px; top:60px; left: 223px; z-index: 2; } #pointcarte2 {animation: bounceInDown 2.5s; position:absolute; width:90px; height: 90px; top:187px; left: 222px; z-index: 2; } #fdanim { opacity:1; position:absolute; width:620px; height: auto; top:185px; left: -250px; z-index: 2; } #fdanim2 { opacity:1; position:absolute; width:620px; height: auto; top:192px; left: -250px; z-index: -62; } h6{padding-top:10px;text-shadow: 1px 1px 0px #111; font-size:21px; line-height:30px; color:#E1E1E1; letter-spacing:1px; font-family: "Open sans"; text-align: left; } #thermique {animation: bounceInDown 5.5s; opacity:0.7; position:absolute; width:120px; height: 93px; top:-90px; left: 48px; z-index: -22; } #thermique2 {animation: bounceInDown 5.5s; opacity:1; position:absolute; width:120px; height: 93px; top:95px; left: 204px; z-index: 2; } #fluides {animation: bounceInDown 5.5s; opacity:0.7; position:absolute; width:120px; height: 88px; top:-110px; left: 36px; z-index: -12; } #textintro{ display:block; } #textintro2{ display:none; } #textintro3{ display:none; } #nicebelfort{ display:none; } #demandedinfo{ width: 200px; display:none; margin-right:auto; margin-left:auto; margin-top: 40px; margin-bottom: 50px; } .texttitre{ position: absolute; left:-146px; width: 416px; height: 49px; top: 67px; z-index: 8; font-size: 18px; color: #333333; font-variant: small-caps; font-family: p8; } #nav1 { position:relative; width:613px; font-family: prest; float: left; font-weight: bold; height: 112px; background-repeat: repeat-y; margin-top: 5px; top:423px; left: 827px; z-index: 852; color: #000000; background-color: #FF9900; } #flechhaut a img{ margin-right:auto; margin-left:auto; display:none; width: 60px; height:60px; position: relative; } #maison1 { position:absolute; width:200px; font-family: prest; float: left; font-weight: bold; height: 109px; background-repeat: repeat-y; margin-top: 5px; padding-top: 40px; top:70px; left: -220px; z-index: 12; } #maison1 div { /*perspective*/ -webkit-perspective:550px; -moz-perspective:550px; -ms-perspective:550px; -o-perspective:550px; perspective:550px; /*perspective-origin*/ -webkit-perspective-origin:50% 0; -moz-perspective-origin:50% 0; -ms-perspective-origin:50% 0; -o-perspective-origin:50% 0; perspective-origin:50% 0; } #maison1 div p { /*animation*/ -webkit-animation:rot 4s ease-in-out 1s backwards; -moz-animation:rot 4s ease-in-out 1s backwards; -ms-animation:rot 4s ease-in-out 1s backwards; -o-animation:rot 4s ease-in-out 1s backwards; animation:rot 4s ease-in-out 1s backwards; /*transform-origin*/ -webkit-transform-origin: 0 90%; -moz-transform-origin: 0 90%; -ms-transform-origin: 0 90%; -o-transform-origin: 0 90%; transform-origin: 0 90%; } #maison1 div p img{ font-size:17px; font-weight:bold; text-align:center; /*animation*/ -webkit-animation:rot 4s ease-in-out 1s backwards; -moz-animation:rot 4s ease-in-out 1s backwards; -ms-animation:rot 4s ease-in-out 1s backwards; -o-animation:rot 4s ease-in-out 1s backwards; animation:rot 4s ease-in-out 1s backwards; /*transform-origin*/ -webkit-transform-origin: 0 90%; -moz-transform-origin: 0 90%; -ms-transform-origin: 0 90%; -o-transform-origin: 0 90%; transform-origin: 0 90%; } #maison1 div:first-child p { height:200px; /*animation-delay*/ -webkit-animation-delay:.1s; -moz-animation-delay:.1s; -ms-animation-delay:.1s; -o-animation-delay:.1s; animation-delay:.1s; } #maison1:hover { transform: rotateX(30deg); top:90px; -webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; z-index: 58; } #maison1:hover:nth-child(1) div { transform: rotateX(30deg); /*animation-delay*/ -webkit-animation-delay:.1s; -moz-animation-delay:.1s; -ms-animation-delay:.1s; -o-animation-delay:.1s; animation-delay:.1s; } #maison1:hover:nth-child(2) div { transform: rotateX(30deg); /*animation-delay*/ -webkit-animation-delay:.1s; -moz-animation-delay:.1s; -ms-animation-delay:.1s; -o-animation-delay:.1s; animation-delay:.1s; } #maison1 div p:hover { filter: invert(75%); transform: rotateX(30deg); /*animation-delay*/ -webkit-animation-delay:.1s; -moz-animation-delay:.1s; -ms-animation-delay:.1s; -o-animation-delay:.1s; animation-delay:.1s; } #2pie{ position:relative; width:68px; height: 79px; z-index: 9962; margin-right: auto; margin-left: auto; top: 301px; background-color: #FF6666; } #bat1 div p img{ font-size:17px; font-weight:bold; text-align:center; /*animation*/ -webkit-animation:rot 4s ease-in-out 1s backwards; -moz-animation:rot 4s ease-in-out 1s backwards; -ms-animation:rot 4s ease-in-out 1s backwards; -o-animation:rot 4s ease-in-out 1s backwards; animation:rot 4s ease-in-out 1s backwards; /*transform-origin*/ -webkit-transform-origin: 0 90%; -moz-transform-origin: 0 90%; -ms-transform-origin: 0 90%; -o-transform-origin: 0 90%; transform-origin: 0 90%; } #bat3 { position:absolute; width:190px; font-family: prest; float: left; font-weight: bold; height: auto; background-repeat: repeat-y; top:120px; left: 121px; z-index: 9; } #bat3 div { /*perspective*/ -webkit-perspective:550px; -moz-perspective:550px; -ms-perspective:550px; -o-perspective:550px; perspective:550px; /*perspective-origin*/ -webkit-perspective-origin:50% 0; -moz-perspective-origin:50% 0; -ms-perspective-origin:50% 0; -o-perspective-origin:50% 0; perspective-origin:50% 0; } #bat3 div p { /*animation*/ -webkit-animation:rot 4s ease-in-out 1s backwards; -moz-animation:rot 4s ease-in-out 1s backwards; -ms-animation:rot 4s ease-in-out 1s backwards; -o-animation:rot 4s ease-in-out 1s backwards; animation:rot 4s ease-in-out 1s backwards; /*transform-origin*/ -webkit-transform-origin: 0 90%; -moz-transform-origin: 0 90%; -ms-transform-origin: 0 90%; -o-transform-origin: 0 90%; transform-origin: 0 90%; } #bat3:hover { transform: rotateX(30deg); top:130px; -webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; z-index: 58; } #bat3:hover:first-child div { transform: rotateX(30deg); top:-36px; /*animation-delay*/ -webkit-animation-delay:.1s; -moz-animation-delay:.1s; -ms-animation-delay:.1s; -o-animation-delay:.1s; animation-delay:.1s; } #bat3:hover:nth-child(1) div { transform: rotateX(30deg); top:-36px; /*animation-delay*/ -webkit-animation-delay:.1s; -moz-animation-delay:.1s; -ms-animation-delay:.1s; -o-animation-delay:.1s; animation-delay:.1s; } #bat3:hover:nth-child(2) div { transform: rotateX(30deg); top:-36px; /*animation-delay*/ -webkit-animation-delay:.1s; -moz-animation-delay:.1s; -ms-animation-delay:.1s; -o-animation-delay:.1s; animation-delay:.1s; } #bat3 div p img{ /*animation*/ -webkit-animation:rot 4s ease-in-out 1s backwards; -moz-animation:rot 4s ease-in-out 1s backwards; -ms-animation:rot 4s ease-in-out 1s backwards; -o-animation:rot 4s ease-in-out 1s backwards; animation:rot 4s ease-in-out 1s backwards; /*transform-origin*/ -webkit-transform-origin: 0 90%; -moz-transform-origin: 0 90%; -ms-transform-origin: 0 90%; -o-transform-origin: 0 90%; transform-origin: 0 90%; } #bat3 div p:hover { filter: invert(75%); transform: rotateX(30deg); /*animation-delay*/ -webkit-animation-delay:.1s; -moz-animation-delay:.1s; -ms-animation-delay:.1s; -o-animation-delay:.1s; animation-delay:.1s; } #bat4 div p img{ /*animation*/ -webkit-animation:rot 4s ease-in-out 1s backwards; -moz-animation:rot 4s ease-in-out 1s backwards; -ms-animation:rot 4s ease-in-out 1s backwards; -o-animation:rot 4s ease-in-out 1s backwards; animation:rot 4s ease-in-out 1s backwards; /*transform-origin*/ -webkit-transform-origin: 0 90%; -moz-transform-origin: 0 90%; -ms-transform-origin: 0 90%; -o-transform-origin: 0 90%; transform-origin: 0 90%; } #bat4 { position:absolute; width:200px; font-family: prest; float: left; font-weight: bold; height: 98px; background-repeat: repeat-y; top:100px; left: -41px; z-index: 7; } #bat4 div { -webkit-perspective:550px; -moz-perspective:550px; -ms-perspective:550px; -o-perspective:550px; perspective:550px; -webkit-perspective-origin:50% 0; -moz-perspective-origin:50% 0; -ms-perspective-origin:50% 0; -o-perspective-origin:50% 0; perspective-origin:50% 0; } #bat4 div p { -webkit-animation:rot 4s ease-in-out 1s backwards; -moz-animation:rot 4s ease-in-out 1s backwards; -ms-animation:rot 4s ease-in-out 1s backwards; -o-animation:rot 4s ease-in-out 1s backwards; animation:rot 4s ease-in-out 1s backwards; /*transform-origin*/ -webkit-transform-origin: 0 90%; -moz-transform-origin: 0 90%; -ms-transform-origin: 0 90%; -o-transform-origin: 0 90%; transform-origin: 0 90%; } #bat4:hover { transform: rotateX(30deg); top:110px; -webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; z-index: 58; } #bat4:hover:first-child div { transform: rotateX(30deg); top:-26px; /*animation-delay*/ -webkit-animation-delay:.1s; -moz-animation-delay:.1s; -ms-animation-delay:.1s; -o-animation-delay:.1s; animation-delay:.1s; } #bat4 div p:hover { filter: invert(75%); transform: rotateX(30deg); /*animation-delay*/ -webkit-animation-delay:.1s; -moz-animation-delay:.1s; -ms-animation-delay:.1s; -o-animation-delay:.1s; animation-delay:.1s; } #fond { position:absolute; width:80%; font-family: prest; float: left; font-weight: bold; height: 84px; background-repeat: repeat-y; margin-top: -90px; margin-left: 0%; padding-top: 0px; top:7px; left: 16%; z-index: -30; } .style15 { color: #999999; letter-spacing: 0px; font-size: 16px; font-family: "Open sans"; font-weight: normal; } .style16 { color: #999999; letter-spacing: 0px; font-size: 16px; font-family: "Open sans"; font-weight: normal; } .style16b { color: #999999; letter-spacing: 0px; font-size: 16px; font-family: "Open sans"; font-weight: normal; } #nav_bas{display:block;} .style16b { display: none; } #titrepartenaires { margin-left:auto; margin-right:auto; color: #000000; font-family: 'p8'; font-size: 44px; text-align: center; } #fig-espacetitre{ height:40px; } .style17b { display: none; } .style18b { display:block; } #cter { text-align: center; margin-left:auto; margin-right:auto; width: 210px; } /*neon txt*/ svg { font-family: "p8", sans-serif; width: 100%; height: 170px; margin-right: auto; margin-left: auto; } svg text { animation: stroke 5s infinite alternate; stroke-width: 1; stroke: #fff; font-size: 70px; } @keyframes stroke { 0% { fill: #fff; stroke: #111; stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 2; } 10% {fill:#fff; stroke: #111; } 94% {fill: #fff; stroke: rgba(160,22,45,1); stroke-width: 3; } 100% { fill: #fff; stroke: #111; stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 1; } } #cnt { width: 420px; margin-right: auto; margin-left: auto; } /*neon txt*/ #maison1b { position:absolute; width:200px; font-family: prest; float: left; font-weight: bold; height: 109px; background-repeat: repeat-y; margin-top: 5px; padding-top: 70px; top:120px; left: 0px; z-index: -1; } #maison1b div p img{ font-size:17px; font-weight:bold; text-align:center; /*neon txtanimation:rot 4s ease-in-out 1s infinite; transform-origin: 0 90%; */ } #cadro{ animation:portecadranim 30s infinite alternate; background-image: url(../pexels0.webp); background-size:cover; position:relative; height:300px; width:200px; margin-left:auto; margin-right:auto; color: #000000; font-family: 'p8'; font-size: 44px; z-index:2; text-align: center; padding-bottom: 40px; background-repeat: no-repeat; transition:2s all ease;} #cadro:hover{ filter: brightness(120%); transition:2s all ease; } @keyframes cadrhover { 0% { filter: brightness(100%);} 50% { filter: brightness(120%);} 90% { filter: brightness(120%);} 100% { filter: brightness(100%);} } #equerre{ animation:equerre 8s infinite alternate; position:absolute; height:30px; width:20px; left:00px; top:167px; transition:2s all ease; z-index: -52; } #equerre img{ height:20px; width:11px; } @keyframes equerre { 0% { left:177px;} 50% { left:189px;} 90% { left:189px;} 100% { left:177px;} } .switch{ height:30px; width:20px; position:absolute; right:-49px; border-radius:5px; cursor:pointer; top: 146px; } .switch::before{ content:""; position:absolute; top:50%; left:50%;font-family:'p8'; z-index:3; height:10px; width:10px; background-image:linear-gradient(to right, orange, red); transform:translate(-50%,-50%); border-radius:50%; box-shadow:2px 1px 5px #555; } .switch::after{font-family: "open sans"; content:"NOS REALISATIONS"; color:#333; font-size:20px; position:absolute; width:120px; height:50px; left:200%; } .text{ width:200px; height:100px; position:absolute; transform:translate(-50%.-50%); color: #fff; font-size:24px; padding-top:30px; font-family: "Open sans"; font-weight: bold; font-variant: small-caps;text-shadow: 2px 3px 8px #111; } #sepia2{ background-size: cover; background-color: #999999; } .frame{ perspective:1000px; position:relative; width:200px; height:350px; border:5px solid #777; border-bottom:1px solid #777; } .front{ transform-style: preserve-3d; position:absolute; z-index:7; top:0; left:0; height:100%; width:100%; background-image:url(../logocs3b.png); padding:100px 20px; text-align:center; color:#fff; font-size:20px; backface-visibility:hidden; } .back{ position:absolute; z-index:4; top:0; left:0; height:100%; width:100%; } .back img{ position:absolute; z-index:7; top:20px; left:25px; height:auto; width:70%; } .door{ animation: porte 8s infinite linear; position:relative; width:100%;animation-timing-function: linear; height:100%; transform-origin:left center; transform:rotate3d(0,1,0,0deg); box-shadow:5px 1px 3px #364050; transition:0.8s all ease; } .front img{ position:absolute; z-index:7; top:20px; left:30px;animation-timing-function: linear; animation:portelogo 8s infinite linear; height:auto; width:70%; } /**/ .knob{ animation:poigne 8s infinite linear; transform-origin: center right 60px; position:absolute; z-index:8; top:50%; left:77%; background-color:#333333; width:32px; height:7px; border-radius:30px; box-shadow:inset 5px 5px 10px #777; background-image: url(../poignee.png); } #arbre2 { animation: bounceInDown 4.5s; opacity:0.7; position:absolute; width:141px; height: 61px; top:1px; left: 27px; z-index: -12; -webkit-transition: all 3.2s ease-in; -moz-transition: all 3.2s ease-in; -o-transition: all 3.2s ease-in; transition: all 3.2s ease-in; bottom: -6px; } #equerre{ animation:equerre 8s infinite alternate; position:absolute; height:30px; width:20px; left:00px; top:167px; transition:2s all ease; z-index: -52; } #equerre img{ height:20px; width:11px; } @keyframes equerre { 0% { left:177px} 50% { left:191px;;} 90% { left:191px} 100% { left:177px;;} } @keyframes porte { 0% { transform:rotate3d(0, 1, 0, 0deg);} 20% { transform:rotate3d(0, 1, 0, -85deg);} 43% { transform:rotate3d(0, 1, 0, -120deg);} 51% { transform:rotate3d(0, 1, 0, -120deg);} 69% { transform:rotate3d(0, 1, 0, -85deg);} 70% { transform:rotate3d(0, 1, 0, -85deg);} 100% { transform:rotate3d(0, 1, 0, 0deg);} } @keyframes portelogo { 0% { transform: scaleX(1);} 19.9% { transform: scaleX(1); } 20% { transform: scaleX(-1);} 69% { transform: scaleX(-1);} 70% { transform: scaleX(1);} 77% { transform: scaleX(1);} 100% { transform: scaleX(1); } } @keyframes poigne { 0% { transform:rotate(0deg);} 50% { transform:rotate(-60deg);} 90% { transform:rotate(0deg);} 100% { transform:rotate(0deg);} } @-moz-keyframes poigne { 0% { transform:rotate(0deg);} 50% { transform:rotate(-60deg);} 90% { transform:rotate(0deg);} 100% { transform:rotate(0deg);} } @-o-keyframes poigne { 0% { transform:rotate(0deg);} 50% { transform:rotate(-60deg);} 90% { transform:rotate(0deg);} 100% { transform:rotate(0deg);} } @-webkit-keyframes poigne { 0% { transform:rotate(0deg);} 50% { transform:rotate(-60deg);} 90% { transform:rotate(0deg);} 100% { transform:rotate(0deg);} } @-ms-keyframes poigne { 0% { transform:rotate(0deg);} 50% { transform:rotate(-60deg);} 90% { transform:rotate(0deg);} 100% { transform:rotate(0deg);} } @keyframes portecadranim { 0% { background-position: 5% 30%;} 50% { background-position: 35% 30%;} 100% { background-position: 5% 30%;} } @keyframes portecadranim { 0% { background-position: 5% 30%;} 50% { background-position: 35% 30%;} 100% { background-position: 5% 30%;} } @-moz-keyframes portecadranim { 0% { background-position: 5% 30%;} 50% { background-position: 35% 30%;} 100% { background-position: 5% 30%;} } @-o-keyframes portecadranim { 0% { background-position: 5% 30%;} 50% { background-position: 35% 30%;} 100% { background-position: 5% 30%;} } @-webkit-keyframes portecadranim { 0% { background-position: 5% 30%;} 50% { background-position: 35% 30%;} 100% { background-position: 5% 30%;} } @-ms-keyframes portecadranim { 0% { background-position: 5% 30%;} 50% { background-position: 35% 30%;} 100% { background-position: 5% 30%;} } @-webkit-keyframes rot { from { -webkit-transform:rotateX(-90deg); } 50% { -webkit-transform:rotateX(45deg); } 70% { -webkit-transform:rotateX(-23deg); } to { -webkit-transform:rotateX(0); } } @-moz-keyframes rot { from { -moz-transform:rotateX(-90deg); } 50% { -moz-transform:rotateX(45deg); } 70% { -moz-transform:rotateX(-23deg); } to { -moz-transform:rotateX(0); } } @-ms-keyframes rot { from { -ms-transform:rotateX(-90deg); } 50% { -ms-transform:rotateX(45deg); } 70% { -ms-transform:rotateX(-23deg); } to { -ms-transform:rotateX(0); } } @-o-keyframes rot { from { -o-transform:rotateX(-90deg); } 50% { -o-transform:rotateX(45deg); } 70% { -o-transform:rotateX(-23deg); } to { -o-transform:rotateX(0); } } @keyframes rot { from { transform:rotateX(-90deg); } 50% { transform:rotateX(45deg); } 70% { transform:rotateX(-23deg); } to { transform:rotateX(0); } } @media screen and (max-width:1190px) { #cadre1{ padding: 25px 30px; float:left; width: 100%; height: auto; overflow: hidden; } #cadre2{ padding: 25px 30px; float:left; width: 100%;background-color: #f6f6f6; overflow: hidden; height: auto; } footer nav > ul > li > a{font-size:15px; color:#555; line-height: 35px;font-weight:normal; box-shadow: none;border:1px solid #bbbbbb; padding:5px;box-shadow: 2px 1px 2px #777; -webkit-box-shadow: 2px 1px 2px #777; -moz-box-shadow: 2px 1px 2px #777;} #textintro3{display:block;font-size: 16px; font-family:"p8";} #textintro{display:none;}#titr2{top: -60px;} #textintro2{display:block;} .style17b { display:block; } .style18b { display:none; } #cadre1 div h4{ text-align: center; } #rdv { right:30px; } } @media screen and (max-width:980px) { #rdv { display: none; font-size: 16px; position:absolute; top:35px; margin-bottom: 0; color: #FFFF; right: 50px; text-align: center; width: 135px; height: -5px; } #demandedinfo{ display:block; } #logo1 img{ width: 135px; height: auto; } #logo1 { font-size: 36px; position:absolute; left:34%; top:10px; margin-bottom: 0; color: #FFFFFF; } #fondrdv{ display: none; } .style16b { display: block; } #stat { position:fixed; width:100%; height: 110px; z-index:646; top: -10px; box-shadow: 3px 1px 5px #444444; -webkit-box-shadow: 3px 1px 5px #444444; -moz-box-shadow: 3px 1px 5px #444444; background-color: #FFFFFF; } footer{ background-color:#FFF; padding-top:10px; padding-bottom:7px} footer > h1 a{ margin:0 auto; display:block; max-width:60px;} footer nav{ padding-top:10px;transition-delay: 0s; transition-duration: 0.6s;transition-property: all;transition-timing-function: ease;} footer nav ul{ display:none; position: fixed; z-index:60; text-align:center; width:100%; height:100%; top:0; left:0; right:0; background-color:rgba(255,255,255,1); padding:0; margin:0; padding-top:130px;} footer nav ul > li{ font-weight:800; font-size:35px; display:block} footer nav ul > li > a{ display:block; line-height:65px; color:#404040} footer nav ul > li:hover a,header[role="header"] nav ul > li.nav-active a{ text-decoration:none; color:#fb5353} footer nav #menu-button {width: 31px;font-size: 0;float: right;height: 19px;position: relative; z-index:70; -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer;} footer nav #menu-button span {display: block;position: absolute;z-index: 60;height: 3px; width: 100%;background: #111111;opacity: 1;left: 0; -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg); transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;} footer nav #menu-button span {background: #010101;} footer nav #menu-button span:nth-child(1) {top:0px;} footer nav #menu-button span:nth-child(2) {top:7px;} footer nav #menu-button span:nth-child(3) {top:14px;} footer nav #menu-button.open span:nth-child(1) {top: 10px; -webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-o-transform: rotate(135deg);transform: rotate(135deg);} footer nav #menu-button.open span:nth-child(2) {opacity: 1;left: -60px;} footer nav #menu-button.open span:nth-child(3) {top: 10px; -webkit-transform: rotate(-135deg);-moz-transform: rotate(-135deg);-o-transform: rotate(-135deg);transform: rotate(-135deg);} #nav_bas{display: none;} } @media screen and (max-width:720px){ #espaceintro_rea{width:100%; height:5px; } #ecriture { position:absolute; width:135px; height:auto; top:280px; left:-175px; z-index: 7852; } #titr2b{ margin-top:-160px; top:-160px; display: none;} #titr3b{display: block; } svg text { animation: stroke 5s infinite alternate; stroke-width: 1; stroke: #A0162D; font-size: 40px; } #cnt { width: 250px; margin-right: auto; margin-left: auto; } #fdanim2 { opacity:1; position:absolute; width:620px; height: auto; top:130px; left: -250px; z-index: -62; } #maison1b { position:absolute; width:150px; font-family: prest; float: left; font-weight: bold; height: 100px; background-repeat: repeat-y; margin-top: 5px; padding-top:60px; top:60px; left: 0px; z-index: -1; } #equerre{ animation:equerre 8s infinite alternate; position:absolute; height:30px; width:20px; left:00px; top:140px; transition:2s all ease; z-index: -52; } #equerre img{ height:20px; width:11px; } @keyframes equerre { 0% {left:137px;} 50% { left:144px;} 90% { left:144px;} 100% {left:137px; } } .frame{ perspective:500px; position:relative; width:150px; height:290px; border:3px solid #444; border-bottom:1px solid #444; } #cadro{ padding-bottom: 80px; height:200px; width:150px; } .knob{ left:70%; width:22px; height:5px; } .front{ transform-style: preserve-3d; position:absolute; z-index:7; top:0; left:-30; height:100%; width:100%; padding:100px 20px; text-align:center; color:#fff; font-size:20px; backface-visibility:hidden; } .front img{ position:absolute; z-index:7; top:20px; left:22px; height:auto; width:70%; } .back{ position:absolute; z-index:4; top:0; left:-30; height:100%; width:100%; } #maison1 { width:180px; height: auto; top:80px; left: -195px; } .switch::before{ content:""; position:absolute; top:35%; left:-10px;font-family:'p8'; z-index:3; height:10px; width:10px; background-image:linear-gradient(to right, orange, red); transform:translate(-50%,-50%); border-radius:50%; box-shadow:2px 1px 5px #555; } .switch::after{font-family: "open sans"; content:"NOS REALISATIONS"; color:#333; font-size:14px; position:absolute; width:100px; height:50px; left:-20px; } .text{ width:140px; height:130px; position:absolute; transform:translate(-50%.-50%); color: #fff; font-size:20px; padding-top:20px; font-family: "p8"; }#arbre2 { animation: bounceInDown 4.5s; opacity:0.7; position:absolute; width:141px; height: 61px; top:-21px; left: 2px;bottom: -6px; z-index: -12; } } @media screen and (max-width:520px){ #opoibi {right: -150px;} .texttitre{font-variant: small-caps; position: absolute; left:-190px; width: 416px; height: 49px; top: 67px; z-index: 8; font-size: 17px; } #thermique {left:28px; } #thermique2 {} #fluides {left: -15px;top:-130px;} #arbre1 {} #bat4 { width:140px; height: auto; left: -35px; } #bat3 { width:140px; height: auto; top: 150px; left: 100px;} #bat3:hover {top: 160px;} #bat3 fluides:hover {top: 60px; } h1{ font-size:36px; font-family: p8; letter-spacing: 1px; line-height: 35px; } .enter-content p{ font-size:24px; line-height:30px; color: #333333; } .espaceintro{width:100%;height:60px; } #nicebelfort{ margin-bottom:20px;display:block;} .work-details,.blog-details{ padding:0 69px; margin-top:93px} #telephone1 { font-size: 16px; } #telephone1 a{ font-size: 16px; font-family:"p8"; } #telephone2 a{ font-size: 16px; font-family:"p8"; } #telephone2 { color: #990000; font-size: 16px;} #flechhaut a img{ margin-right:auto; margin-left:auto; display:block; width: 60px; position: relative; } #b1b { width:141px; height: 61px; top:100px; left: -230px; z-index:3; bottom: -6px; } .avtar { background-color: #FFFFFF; font-family: 'p8';font-variant: small-caps; text-decoration: none; margin-left: 10px; padding-top:5px; width: 84px; height: 58px; box-sizing: border-box; font-family: 'p8'; font-size: 14px; border: 3px white solid; border-radius: 10px; color: #555; font-weight: bold; overflow: hidden; box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6); transform: translatey(0px); animation: float 6s ease-in-out infinite; img {width: 100%; height: auto;} } .front{ transform-style: preserve-3d; position:absolute; z-index:7; top:0; left:-30; height:100%; width:100%; padding:100px 20px; text-align:center; color:#fff; font-size:20px; backface-visibility:hidden; } .back{ position:absolute; z-index:4; top:0; left:-30; height:100%; width:100%; } #cadro{ padding-bottom: 80px; height:200px; width:150px; } #maison1 { width:180px; height: auto; top:80px; left: -195px; } .switch::before{ content:""; position:absolute; top:35%; left:-10px;font-family:'p8'; z-index:3; height:10px; width:10px; background-image:linear-gradient(to right, orange, red); transform:translate(-50%,-50%); border-radius:50%; box-shadow:2px 1px 5px #555; } .switch::after{font-family: "open sans"; content:"NOS REALISATIONS"; color:#333; font-size:14px; position:absolute; width:100px; height:50px; left:-20px; } .avtar:hover { background-color: #000000;text-decoration: none;} .ctainer2{ color: #990000; display: flex; width: 320px;text-decoration: none; height: 170px; font-family: 'p8'; margin-top: -100px; }} @media screen and (max-width:420px) { #cadremenucs { animation: bounceInDown 1.5s; margin-top: 55px; position:absolute; width:320px; height: auto; top:30px; left: -125px; z-index: 24; } .ctainer {text-decoration: none; display: flex; width: 320px; height: 170px; font-family: 'p8'; } #fig-espacetitre{ height:10px; } @keyframes porte { 0% { transform:rotate3d(0, 1, 0, 0deg);} 20% { transform:rotate3d(0, 1, 0, -85deg);} 43% { transform:rotate3d(0, 1, 0, -120deg);} 51% { transform:rotate3d(0, 1, 0, -120deg);} 69% { transform:rotate3d(0, 1, 0, -85deg);} 70% { transform:rotate3d(0, 1, 0, -85deg);} 100% { transform:rotate3d(0, 1, 0, 0deg);} } } @media screen and (max-width:380px) {.style15 { display: none;} .texttitre{font-variant: small-caps; position: absolute; left:-200px; width: 416px; height: 49px; top: 67px; z-index: 8; font-size: 14px; } .deco{z-index: -5;} #ecriture { position:absolute; width:135px; height:auto; top:280px; left:-155px; z-index: 7852; } #ecriture img{ width:100px; } #opoibi {right: -140px;} #b1b { left: -210px;} #b3b {left: -190px;} } @media screen and (max-width:350px) { #ecriture { position:absolute; width:135px; height:auto; top:280px; left:-147px; z-index: 7852; } .fnc-slide__action-btn { margin-left: -14px; } #fig-espacetitre{ height:-11px; } } @media screen and (max-width:920px) and (orientation : landscape){ footer nav ul{ display:none; position: fixed; z-index:60; text-align:center; width:100%; height:100%; top:0; left:0; right:0; background-color:rgba(255,255,255,0.8); padding:0; margin:0; padding-top:100px;} footer nav ul > li{ font-weight:800; font-size:22px; display:block} footer nav ul > li > a{ display:block; line-height:42px; color:#404040} footer nav ul > li:hover a,header[role="header"] nav ul > li.nav-active a{ text-decoration:none; color:#fb5353} } @media screen and (max-width:920px) and (orientation : landscape){ }