/* Frontend editor */ .ct-widget.ct-ignition { position:fixed; left:auto; top:auto; right:20px; bottom:20px; z-index:10000; transition:all 0.5s ease 0s; } .ct-widget.ct-ignition .ct-ignition__button { position:static; margin-top:10px;} .ce-element { outline:2px dashed rgba(243, 156, 18, 0.5); } .ce-element--focused, .ce-element:focus { outline:2px dashed rgba(243, 156, 18, 1); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100; src: url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-100.eot'); src: local('Roboto Thin'), local('Roboto-Thin'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-100.eot?#iefix') format('embedded-opentype'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-100.woff2') format('woff2'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-100.woff') format('woff'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-100.ttf') format('truetype'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-100.svg#Roboto') format('svg'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300; src: url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-300.eot'); src: local('Roboto Light'), local('Roboto-Light'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-300.eot?#iefix') format('embedded-opentype'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-300.woff2') format('woff2'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-300.woff') format('woff'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-300.ttf') format('truetype'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-300.svg#Roboto') format('svg'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-regular.eot'); src: local('Roboto'), local('Roboto-Regular'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-regular.woff2') format('woff2'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-regular.woff') format('woff'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-regular.ttf') format('truetype'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-regular.svg#Roboto') format('svg'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; src: url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-500.eot'); src: local('Roboto Medium'), local('Roboto-Medium'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-500.woff2') format('woff2'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-500.woff') format('woff'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-500.ttf') format('truetype'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-500.svg#Roboto') format('svg'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-700.eot'); src: local('Roboto Bold'), local('Roboto-Bold'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-700.woff2') format('woff2'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-700.woff') format('woff'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-700.ttf') format('truetype'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-700.svg#Roboto') format('svg'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 900; src: url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-900.eot'); src: local('Roboto Black'), local('Roboto-Black'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-900.eot?#iefix') format('embedded-opentype'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-900.woff2') format('woff2'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-900.woff') format('woff'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-900.ttf') format('truetype'), url('../themes/pellegrini/assets/fonts/roboto/roboto-v20-latin-900.svg#Roboto') format('svg'); } /** * General Elements **/ html { font-size:10px; } :focus, button:focus { outline:none; } body{ font-family: 'Roboto', sans-serif; font-size: 1.6rem; line-height: 3rem;} /* Images */ img, svg { max-width:100%; height:auto; } [data-sizes] { display:block; width:100%; } [data-bg] { background-size:cover; background-repeat:no-repeat; background-position:center center; } .imgfond img /* Paragraphs */ p { margin-bottom:1em; } p:last-child { margin-bottom:0; } /* Link */ a { color:inherit; } a:hover { text-decoration:none; } /* Lists */ ul, ol { margin-bottom:0; padding:0; list-style:none; } li {list-style: inside; font-size: 1.6rem;} h2{font-size: 4.5rem; line-height : 4.5rem; font-family: 'Roboto', sans-serif; font-weight: 900; margin: 1.5em 0 1.2em;} h2:after {content: ""; height: 6px; width: 45px; background-color: #f7e922; margin-top: 40px; display: block;} h3{font-family: 'Roboto', sans-serif;margin: 1.5em 0 0.8em;} .etiquette{ background-color: #f7e922; padding: 1.2rem; display: inline-block;} h4{font-size: 2.1rem; font-weight: bold; margin: 1.5em 0 0.8em;} h5{font-size: 1.9rem;position :relative; z-index :2; left: 50%; transform: translate(-50%,0%);margin: 1.5em 0 0.8em;} h5:after{content:"";height: 25px;width: 85px;display: block;background-color: #f7e922; margin-top: -18px; position:absolute; z-index:-1;} figcaption{font-size: 2rem; font-weight: bold; margin: 0.8em 0; } /* Forms */ .invalid-feedback.visible { display:block !important; } .legal {padding-top: 17rem;} .legal h1 {color: #000;} .casper{ display: none; } /*.fond:after {content:"";position:domaine absolute; width: 100%; height: 100%;background: linear-gradient(to right,#000000b3, rgba(0,0,0,0));}*/ #menu { overflow:scroll; position:fixed; right:0; top:0; width:500px; max-width: 90%; height:100%; transform : translateX(120%); background:#292929; z-index:1; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; pointer-events:none; overflow-y; color: #fff;transition:all 0.7s ease 0s;} #menu .menu {height: 100% ;} #menu li {line-height: 2.6rem; list-style: none;} #header a:hover {color: #f7e922;} #menu ul, #menu ol {padding-left: 0rem;} #menu .mentions li{color: #8f8f8f; font-size: 1.2rem;} #menu ul.mentions { padding: 4rem 0; } #header .liens li {padding-top: 15px;} #menu h3 {font-family: 'Roboto', sans-serif; font-size: 3.2rem;} #menu h3:after {content: ""; height: 6px; width: 45px; background-color: #f7e922; margin-top: 20px; margin-bottom: 30px; display: block;} body.open #menu { top:0; pointer-events:auto; transform: translateX(0%); display:flex; flex-direction:column;padding-left:5vw; padding-top:2.5vw; } .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before {background-color:#fff;} #menu .item {margin-left: 0px !important;} #menu svg{fill: #000 !important;} #menu .yt img{ min-width: 5rem; width: 5rem; } #menu .tel{color: black;} #menu .telmarge{ margin: 2rem 0; } .tel img{ transform: rotate(90deg); } /** * Layout **/ /* Global */ #page { position:relative; width:100%; overflow:hidden; } #main{ margin-top: 150px; } #intro .image {padding: 40px 20px 1px; box-shadow: 1px 1px 12px #e6e6e6; width:100%; height: 100%;} #intro img {width: 100%;} #intro .rea {display: flex; flex-direction: row; justify-content: space-around;padding-top: 100px;} #intro .realisation{position: relative;} #intro .rea .realisation:nth-child(odd):after{ content: ""; width: 10px; height: 30px; background-color: #f7e922; display: block;position: absolute;right: 90px; bottom:-14px;} #intro .rea .realisation:nth-child(odd):before{ content: ""; width: 30px; height: 10px; background-color: #f7e922; display: block;position: absolute;top:14px; left:-14px;} #intro .rea .realisation:nth-child(even):after{ content: ""; width: 30px; height: 10px; background-color: #f7e922; display: block;position: absolute;right: -14px; bottom:14px;} #intro .rea .realisation:nth-child(even):before {content: "";width: 10px;height: 30px; background-color: #f7e922;display: block;position: absolute;left: 40px;top:-14px;} #intro h4{font-size: 1.7rem;} a.btn { display: block; max-width: 250px; margin: 8rem auto 0; text-align: center; font-size: 1.8rem; padding: 25px 35px; font-weight:500; background-color: #f7e922; white-space: nowrap; text-decoration: none; border: 1px solid transparent; } a.btn:hover{color:black; border-color: gray; } a.btn.gris { display: inline-block; max-width: none; padding: 20px 35px; margin: 3.5rem 0; text-align: left; background-color: transparent; border-color: gray; } a.btn.gris:hover{background-color: #f7e922; } .video a.btn {margin: 0; margin-top: 3vh; max-width: 190px; padding: 15px;} .alert{ margin: 1rem 0; } .alert .close{ display: none; border: 0; background: 0; float: right; } .alert .close p{ clear: both; } #accueil #realisation {background-image: url('../themes/pellegrini/assets/images/fond.png');padding-top: 80px; padding-bottom:80px;} #accueil .realisation-logos { justify-content: space-around; } #accueil #realisation .logo {display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align:center; min-width: 155px;} #accueil #realisation .logo img{ max-width: 110px; max-height: 80px; width: auto; height: 100%; } #accueil #realisation p {padding-top: 30px; text-transform: uppercase; font-weight:bold;} #accueil #realisation p:after{content:"";height: 25px;width: 90%;display: block;background-color: #f7e922; margin-top: -18px; margin-left: 5px;} #realisation .txtrea {padding-bottom: 40px;} #realisation h3 {font-size: 3.7rem;} #realisation li { list-style: inside;} #accueil #actus {padding-top: 80px; padding-bottom: 80px; background-color: #292929;} #accueil #actus h2 {color: #fff;} #accueil #actus .actus {background-image: url(../themes/pellegrini/assets/images/fond.png); padding: 70px 0;} #accueil #actus h3{font-size: 3rem; font-weight:900;} #accueil #actus .date {padding-bottom: 30px; font-style:italic;} #accueil #actus .date:after {content:"";height: 25px;width: 16%;display: block;background-color: #f7e922; margin-top: -18px; margin-left: 5px;} #accueil #actus .desc {padding: 10px 75px 20px 0;} #accueil #actus .swiper-button-next, #accueil #actus .swiper-button-prev { top: 100%;margin-top:-30px; left: 50%;margin-left:30px;background-color: #b1b2b5; color: black; padding: 30px; z-index:155; position:absolute; } #accueil #actus .swiper-button-next:hover, #accueil #actus .swiper-button-prev:hover{ background-color: #f7e922; } #accueil #actus .swiper-button-prev{ margin-left:-30px; } #accueil #actus .swiper-button-next:after, #accueil #actus .swiper-button-prev:after { font-size: x-large;} #accueil #actus .swiper-button-next.swiper-button-disabled, #accueil #actus .swiper-button-prev.swiper-button-disabled {opacity: 1;} #accueil #actus .parentswipper {position: relative;} #accueil #actus .swiper-container{height: 100%;} #accueil #actus .row{margin-right: 0; margin-left: 0;} #accueil .trucjaune{background-image: url('../themes/pellegrini/assets/images/sableaccueil.png'); background-size: 100%; max-height: 300px;width: 100%; height: 100%; position: absolute; bottom: -1px; left: -0; background-repeat: no-repeat; background-position: bottom;} #accueil #nosrealisation {position: relative;} #realisations #nosrealisation{ background-image:url(../themes/pellegrini/assets/images/fond.png); padding-bottom: 80px; padding-top: 0; } /* #nosrealisation fieldset{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 2rem 0; } #nosrealisation .form-check{ padding: 0.5rem; } #nosrealisation .form-check-input{ display: none; } #nosrealisation .form-check-label{ display: block; padding: 0.5em 1em; background-color: #f7e922; border-radius: 2em; font-weight: bold; text-transform: uppercase; font-size: 1.4rem; border: 1px solid transparent; cursor: pointer; } #nosrealisation .form-check-input:checked + .form-check-label, #nosrealisation .form-check-label:hover{ border-color: grey; }*/ #nosrealisation .filters{ padding: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 2rem 0; } #nosrealisation .filters li{ list-style: none; margin: 7px; } #nosrealisation .filters li a{ display: block; text-decoration: none; padding: 0.5em 1em; background-color: #f7e922; border-radius: 2em; font-weight: bold; text-transform: uppercase; font-size: 1.4rem; border: 1px solid transparent; cursor: pointer; } #nosrealisation .filters li a.active, #nosrealisation .filters li a:hover{ border-color: grey; color: inherit; } #nosrealisation { padding-top: 80px; padding-bottom: 80px;} #nosrealisation .images{padding-bottom: 15px;} #nosrealisation .image{ position: relative; background-color: #000; } #nosrealisation .image > a { display: block; opacity: 0.9; } #nosrealisation .image h3{ pointer-events: none; position: absolute; color: white; text-transform: uppercase; font-size: 2rem; text-align: right; margin: 0; transition: all .2s ease-out; display: flex; align-items: center; justify-content: space-between; bottom: 0; min-height: 6vw; width: 100%; flex-direction: row-reverse; } #nosrealisation .image h3:after {content:""; display: block; width:6vw; min-width: 6vw; height:6vw; background: #f7e922 url(../themes/pellegrini/assets/images/+.png) no-repeat 50% 50%; background-size: 49%; opacity: 0; transition: all .2s ease-out; } #nosrealisation .image h3 span{ padding: 0 5%; display: block; } #nosrealisation .image img { width: 100%; } #nosrealisation .image:hover > a { opacity: 1; transition: all 0.2s ease-out; } #nosrealisation .image:hover h3{background-color: rgb(0, 0, 0, 0.5); } #nosrealisation .image:hover h3:after{ opacity:1; } #nosrealisation .image:hover img{ position:relative; } #nosrealisation .btnrea {padding: 50px 0 260px 0; text-align:center; } #expertise #intro {padding-top: 80px; padding-bottom: 80px;} #domaine{padding-top: 80px; padding-bottom: 100px; background-image: url(../themes/pellegrini/assets/images/fond.png);position:relative;} #domaine img{max-width: 20px;} #domaine a{background-color: #f7e922; padding:45px; text-decoration:none; white-space: nowrap;} #domaine a:hover{color:#000 !important;} #domaine .btn-jaune{padding-top: 100px;margin-bottom: 100px; text-align: center; position: relative; z-index: 1; } #domaine .btn-text {text-decoration: none; padding-left:40px; padding-right: 40px;} #domaine .btn-phone:after{content:"";width: 1px; height: 77px; background-color: #cdc11c; position:absolute; margin-top:-25px; margin-left:15px;} #domaine .btn-mail:after{content:"";width: 1px; height: 77px; background-color: #cdc11c; position:absolute; margin-top:-25px; margin-left:-40px;} .blanc {background-color: #FFF;padding: 0 50px 50px;} #domaine .imgrse {display: flex; justify-content: center;} #domaine .imgrse img{max-width: 100%; max-height: 100%;} #domaine .imgrse a {background-color: transparent; text-align: center;} #domaine .trucjaune{background-image: url('../themes/pellegrini/assets/images/sable.png'); background-size: 100%;width: 100%; max-width: 750px; max-height: 220px; height: 100%; position: absolute; bottom: -1px; left: -0; background-repeat: no-repeat; background-position: bottom;} #intro {padding-top: 80px; padding-bottom: 80px;} #intro h3{font-size: 21px; font-weight: bold; padding-top: 50px;} h1.entete {color: #747474; font-size: 2.1rem; font-style: italic; font-weight: normal; margin: 0;} h1.entete + h2{ margin-top: 0.5em; } #entreprise #equipe {padding-top: 50px;} figure{ box-shadow: 1px 1px 12px #e6e6e6; position:relative; padding: 30px 20px 1px; } .imgequipe .imgfond:before {display: none;} #entreprise #equipe .imgfond{ margin-top: 0; height: 70vmin; } #entreprise #equipe .imgfond:after{content: none; } #entreprise #equipe .imgequipe p{ font-weight: bold; margin-top: 30px; } #entreprise #equipe{padding-bottom: 50px;} #entreprise #adjectif {background-color: #292929;} #entreprise #adjectif h2{ display: inline-block; margin: auto; color: #fff; } #entreprise #adjectif .adj ul{ display: flex; flex-direction: row; justify-content: space-around; align-items: center; padding: 50px; flex-wrap: wrap; } #entreprise #adjectif .adj li{ display: flex; flex-direction:column; align-items: center; text-align: center; justify-content: space-between; height: 5em; line-height: 1.2em; font-size: 3.5rem; font-weight: bold; color:white; margin: 1em 0; padding: 0 1em; } #entreprise #adjectif .adj li:before, #entreprise #adjectif .adj li:after{content:"";height: 7px; width: 45px; display: block; background-color: #f7e922; } #entreprise #organisation {padding-bottom: 100px; padding-top: 60px;} #entreprise #organisation h2{padding-top: 40px;} #entreprise #organisation h3{padding-bottom: 30px; font-weight: bold; font-size: 2.1rem;} #entreprise #organisation p {line-height: 3.7rem;} #entreprise #organisation img{max-width: 20px;} #entreprise #organisation a{background-color: #f7e922; padding:45px; text-decoration:none;} #entreprise #organisation a:hover{color:#000 !important;} #entreprise #organisation .btn-jaune{padding-top: 100px;} #entreprise #organisation .btn-text {text-decoration: none; padding-left:40px; padding-right: 40px;} #entreprise #organisation .btn-phone:after{content:"";width: 1px; height: 77px; background-color: #cdc11c; position:absolute; margin-top:-25px; margin-left:15px;} #entreprise #organisation .btn-mail:after{content:"";width: 1px; height: 77px; background-color: #cdc11c; position:absolute; margin-top:-25px; margin-left:-40px;} #entreprise #organisation{padding-top: 80px; padding-bottom: 280px; background-image: url(../themes/pellegrini/assets/images/fond.png);position:relative;} .quote{ margin-bottom: 2em !important; padding-right: 1em; font-size: 2.3rem; margin-left: 1em; font-style: italic; text-align: right; position: relative; } .quote:after { content: ""; height: 45px; width: 6px; background-color: #f7e922; position: absolute; right: 0; top: 0; } .quote strong{ font-weight: bold; display: block; margin-top: 0.5em; } .quote strong:before{ content: '- '; } #entreprise #patrons figure{ padding: 10px 10px 1px; margin-bottom: 2em; } #entreprise #patrons figcaption{ font-weight: normal; } #entreprise #patrons figcaption strong{ display: block; } #entreprise #histoire .date p{font-weight: bold;margin-left:30px;} #entreprise #histoire {padding-top: 100px; padding-bottom: 100px; background-image:url(../themes/pellegrini/assets/images/fond.png);} #entreprise #histoire .center {display:flex; flex-direction: column; align-items: center; justify-content:flex-start;position:relative;} #entreprise #histoire .center:after {content:"";width: 4px; height: 100%; background-color: #292929; display:block; position:absolute;} #entreprise h2.title{background-color: #292929; padding: 30px 45px; margin-top: 0; text-align:center; z-index:156; color: white; font-size: 3rem; font-weight: bold; } #entreprise h2.title:after{display:none;} #entreprise #histoire .trait {height: 200px;} #entreprise #histoire .trait:after {content:"";width: 4px; height: 100%; background-color: #292929; display:block; margin-left:50%;} #entreprise #histoire .row {justify-content: center; width:100%; padding-top: 50px;} #entreprise #histoire .date:nth-child(odd){display:flex; flex-direction:column; align-items:flex-end; order: 1;} #entreprise #histoire .desc{display:flex; flex-direction:column; justify-content:center; align-items: flex-start;padding-left: 35px; order: 2;position:relative;} #entreprise #histoire .row:nth-child(even) .circle {height: 90px; width: 90px; display: flex; align-items: center; justify-content: center; background-color: #f7e922;position: relative; padding-right:35px;border-radius:100%; border: 2px solid #f7e922; margin-right:25px; } #entreprise #histoire .row:nth-child(odd) .circle {height: 90px; width: 90px; display: flex; align-items: center; justify-content: center; background-color: #f7e922;position: relative; padding-right:35px;border-radius:100%; border: 2px solid #f7e922; margin-left:25px; } #entreprise #histoire .row:nth-child(odd) .circle:after {content:"";display: block; position: absolute; width: 20px; height: 20px; border: 2px solid yellow; border-radius: 100%; background-color:white; left: -37px;z-index:5;} #entreprise #histoire .row:nth-child(even) .circle:after {content:"";display: block; position: absolute; width: 20px; height: 20px; border: 2px solid yellow; border-radius: 100%; background-color:white; right: -37px;z-index:5;} #entreprise #histoire .row:nth-child(odd) .circle:before{content:"";display: block; position: absolute; width: 25px; height: 3px; background-color:#f7e922;left:-25px;} #entreprise #histoire .row:nth-child(even) .circle:before{content:"";display: block; position: absolute; width: 25px; height: 3px; background-color:#f7e922;right:-25px;} #entreprise #histoire .cadre {background-color: white; padding: 30px; width:100%; position:relative;} #entreprise #histoire .row:nth-child(even) .cadre:after {display:inline-block; position:absolute; left:-15px; top:35px;content:"";border-top : 10px solid transparent; border-right : 15px solid white; border-bottom : 10px solid transparent;} #entreprise #histoire .row:nth-child(odd) .cadre:after {display:inline-block; position:absolute; right:-15px; top:35px;content:"";border-top : 10px solid transparent; border-left : 15px solid white; border-bottom : 10px solid transparent;} #entreprise #histoire .row:nth-child(odd) .date{display:flex; flex-direction:column; align-items:flex-start; order: 2;} #entreprise #histoire .row:nth-child(odd) .desc{padding-right: 35px;padding-left: 0px; order: 1;} #equipe .txtrea {padding: 40px 0;} /*#entreprise #histoire .row:nth-child(odd) .desc:after{content:"";width: 4px; height: 100%; background-color: #292929; position:absolute;right:0;top:0;} #entreprise #histoire .row:nth-child(even) .desc:before{content:"";width: 4px; height: 100%; background-color: #292929; position:absolute;left:0;top:0;}*/ #realisation #nosrealisation {padding-top: 160px; background-image:url(../themes/pellegrini/assets/images/fond.png);} #realisation #nosrealisation .btnrea {padding-top: 150px;} #realisation #nosrealisation .select {width: 100%; border: none; background-color: #f7e922; font-weight: 600; text-align:center; border-radius: 50px; cursor:pointer;overflow: hidden;position:relative; } #realisation #nosrealisation select {background-color: #f7e922; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 15px 30px; cursor:pointer; } #realisation #nosrealisation .select:after {content:url(../themes/pellegrini/assets/images/svgselect.png); position: absolute; right: 10px; top:14px; pointer-events: none; } #realisation #nosrealisation .rea {display: flex; flex-direction: column;align-items: center; padding-bottom: 50px;} #realisation #nosrealisation .nosrea { width: 33%;} #realisation #nosrealisation .btn-txt {background-color: #f7e922; border:none; padding: 20px 30px;} #contact h1{position: relative;} #contact #formulaire { background-image:url(../themes/pellegrini/assets/images/fond.png); padding-bottom: 80px;} #contact .form-control{ opacity: 0.6; padding: 20px 30px 0px; font-size: 1.8rem; height: 3.5em; } #contact .form-control:focus{ opacity: 1; border-color: #c1c1c1; box-shadow: 0 0 0 0.25rem rgb(0 0 0 / 10%); } #contact .btn-primary{background-color: #292929; border:none;padding: 15px 35px;} #contact .btn-group-lg>.btn, .btn-lg{border-radius: 0;} #contact .form-floating>label {padding-left: 40px;} #contact #coordoner{padding-top: 80px;} #contact .carte {text-align: center;} #contact .coordoner { text-align: left; background-color: #292929; color: white; margin-bottom: -230px; position: relative; z-index: 4;} #contact .coordoner p { padding: 8rem 7.5rem; font-size: 2.2rem; line-height: 2em;} #contact .demmande {display: flex; flex-direction: row; padding-top: 25px; padding-bottom: 25px;} #contact .listradio{display: flex; flex-direction: column;} #contact label {padding-bottom: 10px;} #contact .surligne {font-weight: bold; } #contact .surligne:after { content: ""; height: 22px; width: 70%; margin-left: 10px; margin-top: -19px; background-color: #f7e922; display: block;} #contact .trucjaune{background-image: url('../themes/pellegrini/assets/images/sableaccueil.png'); background-size: 100%;width: 100%; max-width: 2500px; max-height: 320px; height: 100%; position: absolute; bottom: -1px; left: -0; background-repeat: no-repeat;background-position: bottom;} #contact #coordoner .row {position: relative;padding-bottom: 340px;} #contact .g-recaptcha{ display: flex; justify-content: center; } /* Header */ #header { position:fixed; top:0; z-index:1999; width:100%; background-color:white; height: 150px;} #header .mainrow {display: flex; flex-direction: row; justify-content: space-between; flex-wrap: nowrap;align-items: center; height: 100%; padding: 0 20px;} #header .mainrow > .yt { width: 30%; text-align: center; height: 70%; max-height: 60px; } #header .mainrow > .yt a{ display: flex; flex-direction: column; text-transform: uppercase; font-weight: bold; font-size: 0.85em; align-items: center; justify-content: center; } #header .mainrow > .yt a:hover{ color: #ff0002; } #header .wrapper { display:flex; flex-direction:row; align-items:center; justify-content:flex-end;font-weight: bold; text-transform: uppercase;} #header .logo{ height: 100%; display: flex; align-items: center; padding: 5px 0; } #header .logo img{ max-height: 100%; width: auto; display: block; } #header .item { margin: 0 2vw; } #header a {text-decoration:none; white-space: nowrap;} #header .hover{position: relative; } #header .hover:after {content:""; position: absolute; height: 7px; width: 50px; background-color: #FFF; bottom: 0; left: 50%; transform: translateX(-50%);} #header .hover:hover:after{background-color:#f7e922;} #header .item a:hover {color:black !important;} #header .hamburger {display: flex;} #header .text {padding-right: 20px;} #header .yt a{ display: block; height: 100%; } #header .yt img{ height: 100%; width: auto; display: inline-block;} #header .tel{margin-bottom: 8px;background-color: #f7e922; padding: 15px 25px 15px 20px;border-radius: 35px;white-space: nowrap;} #header .wrapper img{fill: #FFF;width: 20px;} #header .menuindex {z-index: 121262;} #header .atel { padding-left: 12px; } #head {height: calc(100vmin - 150px);position: relative;} .imgfond {position: relative; height: 100%; overflow: hidden; } .imgfond img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-height: 100%; min-width: 100%; max-height: inherit; max-width: inherit; object-fit: cover; } .imgfond .titleheader { font-size: 5rem; color: #FFF; position: absolute; top: 0; z-index: 3; line-height: 1.2em; font-weight: 600; margin: 0; width: 100%; height: 100%; padding-left: 50vmin; display: flex; align-items: center; } .imgfond:after { z-index: 1; opacity: 0.7; position: absolute; content: ""; width: 100%; height: 100%;background: linear-gradient(to right,#000000b3, rgba(0,0,0,0)); top: 0; left: 0; } .img65ans { z-index: 2; position: absolute; content: ""; width: 100%; height: 100%; background: rgb(132 125 124 / 62%); top: 0; left: 0; clip-path: polygon(0 0, 56vmin 0, 20vmin 100%, 0 100%); } .text65ans{ position: absolute; top: 55vmin; left: 0; display: block; content: ""; background: url("../themes/pellegrini/assets/images/65ans-noir.svg") no-repeat 50% 50%; background-size: contain; width: 55vmin; height: 20vmin; z-index: 3; opacity: 1; transform: rotate(-65deg); transform-origin: 0 0; text-indent: 100%; white-space: nowrap; overflow: hidden; } /* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ .imgfond > img.lazyloaded + .titleheader{ animation: outLeft2 0.9s ease-out 1.5s 1 normal forwards; } .imgfond > img.lazyloaded + .titleheader + .img65ans{ animation: outLeft 0.9s ease-out 1.5s 1 normal forwards; } @keyframes outLeft { from { left: 0; } to { left: -60vmin; } } @keyframes outLeft2 { from { left: 0; } to { left: -40vmin; } } /* Footer */ #footer { color: #fff; position: relative;} #footer .left {background-color: #1e1e1e;padding-top: 80px; padding-bottom: 80px;} #footer .left h3, #footer .left p {padding-left:400px;} #footer .right {background-color: #292929;padding-top: 80px; padding-bottom: 80px;} #footer h3 {font-family: 'Roboto', sans-serif; font-size: 3.2rem;} #footer h3:after {content: ""; height: 6px; width: 45px; background-color: #f7e922; margin-top: 20px; margin-bottom: 30px; display: block;} #footer li { line-height: 2.6rem; list-style: none; } #footer li:hover {color: #f7e922;} #footer img {fill: #f7e922;max-width:20px;} #footer span {padding-left: 10px; } #footer .logo{padding-left: 400px; display: flex; flex-direction:row; align-items:center;padding-top:5px;} #footer .img{position: absolute; bottom:0;right:-10px;} #footer .mentions {padding-top: 90px;color:#8f8f8f;} #footer a{background-color: #292929; text-decoration:none;} #footer a:hover {color: #f7e922;} .column {display: flex; flex-direction: column;} /** * XXL **/ @media (min-width: 1600px) { .container-fluid { padding-left:400px !important; padding-right:400px !important; } } @media (min-width: 1400px) { .container-fluid { padding-left:200px !important; padding-right:200px !important; } } /** * XL **/ @media (max-width: 1399px) { .titleheader{font-size: 5rem;} h2{font-size:3.5rem;} #footer .left h3, #footer .left p, #footer .logo{padding-left: 200px;} #domaine .row {padding: 15px;} #contact .coordoner p{padding: 60px 40px;} #contact #coordoner .row {padding-bottom: 290px;} } /** * LG **/ @media (max-width: 1199px) { .titleheader{font-size: 4rem;} h2{font-size:3rem;} #footer .left h3, #footer .left p,#footer .logo{padding-left: 150px;} #nosrealisation .btnrea { padding: 50px 0 150px 0;} } /** * MD **/ @media (max-width: 991px) { #accueil #intro p{padding-top: 0;} #footer .left h3, #footer .left p,#footer .logo{padding-left: 75px;} #header .item.tel, #header .item.hover{display: none;} /* body.open #menu{padding-left:50px;} */ #contact .coordoner{margin-bottom: -170px;} #contact .coordoner p{font-size: 1.5rem;} #contact #coordoner .row { padding-bottom:200px;} #nosrealisation .btnrea { padding: 50px 0 80px 0;} } /** * SM **/ @media (max-width: 767px) { .titleheader{font-size: 3.1rem;} h2{font-size:2.5rem; line-height:3rem ;} #head br {display:none;} #accueil #realisation p{padding-bottom:30px; padding-top:15px;} #accueil #actus .swiper-button-prev, .swiper-container-rtl #accueil #actus .swiper-button-next {margin-left: -64px} #accueil #actus .swiper-button-next, #accueil #actus .swiper-container-rtl #accueil #actus .swiper-button-prev{margin-left:-4px;} #accueil #actus .actus {text-align:center;padding: 40px;} #accueil #actus .desc {padding: 15px 10px;} #accueil #actus .date:after{margin-left:42%;} #accueil #actus {padding-top: 40px;} #footer .logo{display: flex; flex-direction: row; justify-content: center;} #footer .row {text-align:center;} #footer h3:after {margin-left: 46%;} #footer .left h3, #footer .left p, #footer .logo {padding-left: 0;} #footer .right, #footer .left {padding-top:40px ; padding-bottom: 40px;} #footer .mentions{padding-top:20px;} .imgfond .titleheader {padding: 0 10px;} #menu h3{font-size: 2.2rem;} #menu li {font-size: 1.2rem;} #header .liens li{padding-top: 5px;} #intro .rea{flex-direction: column; align-items: center; padding-top: 40px;} #intro .realisation {padding-bottom: 40px;} #intro .rea .realisation:nth-child(odd):after {bottom:25px;} #intro .rea .realisation:nth-child(even):after{bottom: 65px;} #intro .button {padding-top:10px;} #intro{padding: 40px 20px !important;} #intro h3{padding-top: 25px !important;} #entreprise #adjectif .adj li{font-size: 2.5rem; width: 50%; } #entreprise #organisation{padding: 40px 20px 80px 20px; text-align: center;} #entreprise #organisation h2:after{margin-left: 45%; margin-top: 30px; margin-bottom: 30px;} #realisation h3 {font-size: 2.7rem;} #contact .coordoner p{display: none;} #contact #coordoner .row {padding-bottom: 140px;} #contact .coordoner{margin-bottom:0;} #contact .surligne:after{width: 80%;} #contact label{padding-left: 15px;} #contact #formulaire{padding: 20px 0;} .img65ans, .imgfond:before{display: none;} .imgfond > img.lazyloaded + .titleheader {animation: none;} } /** * XS **/ @media (max-width: 575px) { #header .text{ display: none; } #head{ height: 70vmin; min-height: 0; } .imgfond .titleheader{ font-size: 3.5rem; } #intro span {padding: 15px 25px;} #accueil #intro {padding-top: 40px; padding-bottom: 40px;} #accueil #realisation{padding-top: 40px; padding-bottom: 40px;} #accueil #actus h3{font-size: 2.5rem;} #header .tel {display:none; padding: 10px 30px 10px 20px; margin-bottom: 0;} #header #menu .tel {display: block;} #header img {max-width:70%;} #header .mainrow > .yt span{ display: none; } #expertise p.entete{font-size:1.3rem;} #intro .rea .realisation:nth-child(odd):after {right: 30px;} #intro h4 {font-size: 1.3rem;} #domaine .blanc{padding: 20px;} #domaine a, #entreprise #organisation a{padding: 30px; font-size: 1.2rem;} #domaine{padding-bottom: 125px; padding-top: 20px;} #domaine .btn-jaune, #entreprise #organisation .btn-jaune{padding-top: 65px;} #domaine .btn-mail:after,#entreprise #organisation .btn-mail:after,#entreprise #organisation .btn-phone:after, #domaine .btn-phone:after{height: 50px; margin-top: -13px; } #domaine .row {padding-bottom: 50px;} #entreprise #histoire .date:nth-child(odd),#entreprise #histoire .row:nth-child(odd) .date {align-items:center;} #entreprise #histoire .center:after, #entreprise #histoire .row:nth-child(even) .circle:after, #entreprise #histoire .row:nth-child(even) .circle:before, #entreprise #histoire .row:nth-child(odd) .circle:before, #entreprise #histoire .row:nth-child(odd) .circle:after{content: none;} #entreprise #histoire .row:nth-child(odd) .circle{margin-left: 0px;} #entreprise #histoire .row:nth-child(even) .circle{margin-right: 0;} #entreprise #histoire .row:nth-child(odd) .date{order: 1;} #entreprise #histoire .row:nth-child(odd) .desc{order: 2;} #entreprise #histoire .row:nth-child(even) .cadre:after, #entreprise #histoire .row:nth-child(odd) .cadre:after{border-top: 0px solid transparent; border-bottom: 0px solid transparent; border-bottom : 15px solid white; border-left : 10px solid transparent;border-right: 10px solid transparent;} #entreprise #histoire .desc:nth-child(even){padding-left:0; padding: 20px 20px;} #entreprise #histoire .row:nth-child(even) .cadre:after{top:-15px;left:48%;} #entreprise #histoire .row:nth-child(odd) .cadre:after{right: 46%; top:-15px;} #entreprise #histoire .row{padding-top: 0;} #entreprise #histoire .title {margin-bottom: 40px;} #entreprise #histoire {padding-top:40px; padding-bottom: 40px;} #entreprise #organisation a{padding: 30px; font-size: 1.2rem;} #entreprise #organisation h2{padding-top: 20px;} #entreprise #organisation h3{padding-bottom: 20px;} #entreprise #organisation .btn-text{ padding-left: 30px; padding-right: 30px;} #entreprise #adjectif .adj li{font-size: 2.5rem; width: 100%; height: 3em; margin-top: 0; } #entreprise #adjectif .adj li:after{ content: none; } #contact #coordoner .row{padding-bottom:80px;} #contact .surligne{font-size: 1.2rem;} #contact #coordoner{padding-top: 30px;} #equipe .txtrea{text-align: start;} #nosrealisation .btnrea { padding: 50px 0 30px 0;} #nosrealisation .image h3{ min-height: 12vw; } #nosrealisation .image h3:after { width:12vw; min-width: 12vw; height:12vw; } #menu h3:after {margin-bottom: 8px; margin-top: 10px;} }