a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:after, blockquote:before, q:after, q:before { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } @font-face { font-family: 'Lato'; src: url('/include/fonts/Lato-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Lato'; src: url('/include/fonts/Lato-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Lato'; src: url('/include/fonts/Lato-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; } @font-face { font-family: 'Lato'; src: url('/include/fonts/Lato-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Lato'; src: url('/include/fonts/Lato-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; } @font-face { font-family: 'Lato'; src: url('/include/fonts/Lato-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Lato'; src: url('/include/fonts/Lato-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Lato Hairline'; src: url('/include/fonts/Lato-HairlineItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Lato'; src: url('/include/fonts/Lato-BoldItalic.ttf') format('truetype'); font-weight: bold; font-style: italic; } @font-face { font-family: 'Lato Hairline'; src: url('/include/fonts/Lato-Hairline.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('/include/fonts/Montserrat-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('/include/fonts/Montserrat-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('/include/fonts/Montserrat-ExtraBoldItalic.ttf') format('truetype'); font-weight: 800; font-style: italic; } @font-face { font-family: 'Montserrat'; src: url('/include/fonts/Montserrat-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('/include/fonts/Montserrat-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; } @font-face { font-family: 'Montserrat'; src: url('/include/fonts/Montserrat-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; } @font-face { font-family: 'Montserrat'; src: url('/include/fonts/Montserrat-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('/include/fonts/Montserrat-Italic.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Montserrat'; src: url('/include/fonts/Montserrat-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('/include/fonts/Montserrat-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('/include/fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('/include/fonts/Montserrat-BlackItalic.ttf') format('truetype'); font-weight: 900; font-style: italic; } @font-face { font-family: 'Montserrat'; src: url('/include/fonts/Montserrat-BoldItalic.ttf') format('truetype'); font-weight: bold; font-style: italic; } @font-face { font-family: 'Montserrat'; src: url('/include/fonts/Montserrat-Bold.ttf') format('truetype'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('/include/fonts/Montserrat-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; } @font-face { font-family: 'Montserrat'; src: url('/include/fonts/Montserrat-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Montserrat'; src: url('/include/fonts/Montserrat-Black.ttf') format('truetype'); font-weight: 900; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('/include/fonts/Montserrat-ExtraLightItalic.ttf') format('truetype'); font-weight: 200; font-style: italic; } header { background-color: white; height: 60px; } header nav { margin-top: 20px; margin-right: 30px; float: right; } header nav a { font-family: 'Lato'; cursor: pointer; text-decoration: none; color: black; font-weight: bold; margin: 10px 10px; font-size: 20px; } @media screen and (min-width: 0px) and (max-width: 620px) { header nav { margin-right: 10px; } header nav a { font-size: 16px; } } #banniere { width: 100%; } #logo { margin-top: 100px; float: right; margin-right: 150px; } @media screen and (min-width: 0px) and (max-width: 1100px) { #logo { margin-right: 50px; } } @media screen and (min-width: 0px) and (max-width: 700px) { #logo { width: 200px; } } #pblock { margin-top: 100px; position: relative; } #pblock .content { margin-left: 100px; } #pblock .content h1 { font-family: 'Lato'; font-size: 26px; margin-bottom: 50px; } #pblock .content p { font-family: 'Lato'; font-size: 16px; line-height: 20px; color: #676666; display: inline-block; } #pblock .content a { font-family: 'Lato'; display: inline-block; margin-left: 150px; color: black; text-decoration: none; font-size: 18px; cursor: pointer; } #pblock .content a span { color: #95989a; font-size: 20px; } #pblock #elem1 { position: absolute; top: 100px; right: 0px; z-index: 200; } @media screen and (min-width: 0px) and (max-width: 1290px) { #pblock #elem1 { display: none; } } @media screen and (min-width: 0px) and (max-width: 1490px) { #pblock .content a { margin-left: 0px; margin-top: 20px; display: block; } } @media screen and (min-width: 0px) and (max-width: 740px) { #pblock .content { width: calc(100% - 40px); margin: 0px auto; } #pblock .content p { text-align: justify; } } #sblock { background-color: #eae7e7; -webkit-transform: skew(0deg, -10deg); transform: skew(0deg, -10deg); margin-top: 100px; } #sblock h1.deux { font-family: 'Montserrat'; position: relative; bottom: -130px; } #sblock h1 { font-family: 'Montserrat'; padding-top: 50px; font-size: 30px; } #sblock #elem2 { position: absolute; width: 350px; top: 30px; left: 0px; z-index: 200; } #sblock #sblock_content { -webkit-transform: skew(0deg, 10deg); transform: skew(0deg, 10deg); width: 1250px; margin: 0px auto; } #sblock #services_container { width: 800px; margin-right: 50px; float: right; } #sblock #services_container .service { position: relative; width: 250px; height: 250px; display: inline-block; margin-top: 20px; margin-right: 80px; margin-bottom: 100px; } #sblock #services_container .service .leftrect { width: 150px; height: 100%; background-color: #0c88a5; } #sblock #services_container .service img { position: absolute; top: -30px; right: -20px; height: 220px; } #sblock #services_container .service .txt_container { font-family: 'Lato'; text-align: left; position: absolute; line-height: 20px; width: 200px; background-color: white; top: 200px; left: 50px; padding: 10px; font-size: 18px; height: 80px; } #sblock #services_container .service .txt_container hr { width: 50%; text-align: left; margin-left: 0px; } @media screen and (min-width: 0px) and (max-width: 1290px) { #sblock h1 { margin-bottom: 100px; } #sblock #sblock_content { width: 1000px; } #sblock #elem2 { display: none; } } @media screen and (min-width: 0px) and (max-width: 1150px) { #sblock h1.deux { position: relative; bottom: -110px; } #sblock #sblock_content { width: calc(100% - 50px); } } @media screen and (min-width: 0px) and (max-width: 950px) { #sblock #services_container { width: 700px; margin-right: 0px; } } @media screen and (min-width: 0px) and (max-width: 850px) { #sblock #services_container { width: 650px; } #sblock #services_container .service:nth-child(even) { margin-right: 0px; } #sblock h1.deux { bottom: -80px; } } @media screen and (min-width: 0px) and (max-width: 750px) { #sblock #services_container { width: 100%; } #sblock h1.deux { bottom: -60px; } } @media screen and (min-width: 0px) and (max-width: 670px) { #sblock #services_container { width: 400px; margin: 0px auto; } } #prblock { margin-top: 200px; } #prblock #pblock_content { width: 700px; margin: 0px auto; text-align: center; } #prblock #pblock_content .produit { width: 200px; height: 200px; border: 3px solid black; margin: 5px; display: inline-block; } #prblock #pblock_content .produit img { width: 200px; height: 200px; } @media screen and (min-width: 0px) and (max-width: 800px) { #prblock { margin-top: 100px; } #prblock #pblock_content { width: calc(100% - 50px); } } #gblock { margin-top: 100px; background-color: #eae7e7; -webkit-transform: skew(0deg, -10deg); transform: skew(0deg, -10deg); } #gblock h1.deux { font-family: 'Montserrat'; position: relative; bottom: -170px; } #gblock #gblock_content { width: 1250px; text-align: center; margin: 0px auto; padding: 50px 0px; -webkit-transform: skew(0deg, 10deg); transform: skew(0deg, 10deg); } #gblock h1 { font-family: 'Montserrat'; padding-top: 30px; font-size: 30px; text-align: left; } @media screen and (min-width: 0px) and (max-width: 1490px) { #gblock #gblock_content { width: 1000px; } #gblock #gblock_content .slider { margin-top: 50px; } } @media screen and (min-width: 0px) and (max-width: 1150px) { #gblock h1.deux { position: relative; bottom: -120px; } #gblock h1 { padding-top: 20px; margin-left: 25px; } #gblock #gblock_content { width: 100%; } } @media screen and (min-width: 0px) and (max-width: 1000px) { #gblock h1 { padding-top: 10px; } } @media screen and (min-width: 0px) and (max-width: 870px) { #gblock h1 { padding-top: 0px; } } #cblock { margin-top: 200px; margin-bottom: 100px; overflow: hidden; } #cblock #contactform { font-family: 'Lato'; width: 450px; float: right; margin-right: 200px; } #cblock #contactform ::-webkit-input-placeholder { color: black; } #cblock #contactform ::-moz-placeholder { color: black; } #cblock #contactform :-ms-input-placeholder { color: black; } #cblock #contactform :-moz-placeholder { color: black; } #cblock #contactform .form_error { color: red; } #cblock #contactform .form_success { display: block; width: 100%; color: #01ad23; } #cblock #contactform #form_message { margin-bottom: 20px; } #cblock #contactform input { display: block; height: 30px; margin-bottom: 10px; border: 1px solid black; color: black; width: 250px; } #cblock #contactform textarea { width: calc(100% - 4px); min-width: calc(100% - 4px); max-width: calc(100% - 4px); border: 1px solid black; color: black; height: 100px; min-height: 100px; } #cblock #contactform button { border: 1px solid #000; font-size: 16px; background-color: white; float: right; margin-top: 20px; cursor: pointer; transition-duration: 0.3s; } #cblock #contactform button:hover { background-color: #f7f4f4; } @media screen and (min-width: 0px) and (max-width: 730px) { #cblock #contactform { float: none; margin: 0px auto; } } iframe { width: 100%; } footer { font-family: 'Lato'; padding: 20px 0px; display: flex; } footer div { flex-grow: 1; } footer .left { text-align: left; margin-left: 100px; position: relative; } footer .left img { width: 130px; top: calc(50% - (35px/2)); position: absolute; } footer .center { text-align: left; } footer .center .content { height: 50%; margin-left: calc(50% - 120px); } footer .center a { text-decoration: none; color: black; } footer .center a:hover { text-decoration: underline; } footer .center span { font-size: 16px; line-height: 25px; vertical-align: top; } footer .center img { width: 25px; } footer .right { margin-right: 100px; } footer .right .content { float: right; } footer .right img { width: 25px; display: block; margin: 18px 0px; cursor: pointer; } @media screen and (min-width: 0px) and (max-width: 830px) { footer { flex-direction: column; } footer .center .content { width: 350px; margin-left: calc(50% - 160px); } footer .left { position: static; text-align: center; margin: 0px; } footer .left img { position: static; margin-bottom: 30px; } footer .right { margin: 0px; margin-top: 30px; } footer .right .content { float: none; text-align: center; } footer .right .content img { display: inline; margin: 0px 10px; } } .slider { width: 600px; position: relative; margin: 0 auto; } .slider .img_container img { width: 100%; display: none; } .slider .img_container img:first-of-type { display: inline-block; } .slider .prev, .next { cursor: pointer; position: absolute; top: calc(50% - 33.5px); width: auto; margin-top: -25px; padding: 16px; color: rgba(0, 0, 0, 0.5); font-weight: bold; font-size: 50px; transition: 0.6s ease; border-radius: 0 3px 3px 0; } .slider .prev:hover, .next:hover { color: rgba(0, 0, 0, 0.7); } .slider .next { right: -60px; border-radius: 3px 0 0 3px; } .slider .prev { left: -60px; border-radius: 0 3px 3px 0; } .slider .slider-bar { text-align: center; margin-top: 10px; } .slider .slider-bar .dot { cursor: pointer; height: 15px; width: 15px; margin: 0 2px; background-color: transparent; border: 1px solid #95989a; border-radius: 50%; display: inline-block; transition: background-color 0.6s ease; } .slider .slider-bar .active, .dot:hover { background-color: #333; border: 1px solid #333; } .slider img.fade { -webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s; } @-webkit-keyframes fade { from { opacity: 0.4; } to { opacity: 1; } } @keyframes fade { from { opacity: 0.4; } to { opacity: 1; } } @media screen and (min-width: 0px) and (max-width: 740px) { .slider { width: 100%; } .slider .img_container { width: 100%; } .slider .next { right: 10px; color: rgba(73, 73, 73, 0.8); } .slider .prev { left: 10px; color: rgba(73, 73, 73, 0.8); } }