$orange: #FF931E; $blue: #2BAADA; $dark_orange: #E94F25; $title_font : "Lato", sans-serif; $sans_serif_font:"Lato", Arial, sans-serif; $serif_font : "Roboto Slab", serif; $cursive_font : 'Galada', cursive; $gris_fonce: #333333; $green:#6BA747; @import "jquery.bxslider"; @import "redactor"; @import "fontawesome/font-awesome"; @import "qi_grids"; @import "popover"; @import "public/flexslider"; @import "vendor/flipclock"; @import "vendor/jquery.cookiebar"; body{ padding:0; font-family:lato; width:100%; margin:0; } h1,h2{ text-transform:uppercase; font-weight:500; text-align:center; } .slide_home_wrapper{ position:relative; background:no-repeat center center; background-size:100%; background-size:cover; .bx-wrapper{ margin:0; } .bx-controls{ position:absolute; bottom:40px; left:0; right:0; } .slide{ .link_overlay{ position:absolute; top:0; left:0; right:0; bottom:0; } position:relative; overflow:hidden; .description{ position:absolute; bottom:0px; right:0px; width:350px; padding-right:50px; height:140px; text-align:right; } .description_background{ background:rgba(255,255,255,0.85); width:470px; height:220px; transform: rotate(-5deg); position:absolute; bottom:-50px; right:-50px; } h3{ font-weight:normal; padding:0; margin:0; margin-bottom:5px; font-size:30px; font-family:"Stylograph", sans-serif; } a{ color:$green; text-decoration:none; } .content{ color:black; } } } .stylo{ font-family:"Stylograph", sans-serif;font-weight:normal; } .slide{ background:no-repeat center center; } .clear{ clear:both; } .center{ max-width:1010px; margin:auto; } .btn{ display:inline-block; width:auto !important; text-transform:uppercase; color:black; border:2px solid black !important; padding:6px 12px; margin:0 5px; text-decoration:none; cursor:pointer; } #main_content{ margin:auto; max-width:720px; padding:20px 60px; padding-top:0; width:100%; min-height:600px; position:relative; z-index:2; top:-68px; background:rgba(255,255,255,1); } #footer{ padding:20px 0; background:no-repeat top right; background-color:#4D4D4D; background-image:url('/lines.png'); background-size: auto 100%; h2{ color:white; } fieldset{ border:0; padding:0; margin:0; } table{ width:600px !important; max-width:100%; border-collapse:collapse; td{ padding-bottom:12px; } } input, textarea{ box-sizing:border-box; padding:12px 15px; font-size:1em; width:100%; border:0; } .error{ color:red; } .submit{ width:600px; max-width:100%; text-align:right; padding:14px 0; padding-top:0px; } .btn{ border-color:white !important; color:white; background:transparent; } } #contacts{ background:$gris_fonce; padding:15px 0; color:white; text-align:center; a{ text-decoration:none; color:white; } } #menu_top{ background:$gris_fonce; padding:15px 0; color:white; text-align:center; a{ color:white; text-decoration:none; display:inline-block; padding:0 10px; } } #top_gradient{ z-index:11; position:absolute; top:0; left:0; right:0; background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.25) 30%,rgba(0,0,0,0) 100%); height:100px; } #logo_container{ z-index:11; text-align:center; position:absolute; top:0; left:0; right:0; img{ width:80%; max-width:380px; padding:5px; margin:10px; } } #services-img{ position:fixed; z-index:12; top:0; left:0; width:240px; } .rea-gal img { width: 14.28%; display: block; float: left; } img { max-width: 100%; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } @media screen and (max-width: 880px) { #menu_top .sub_menu { font-size: 11px; position: absolute; bottom: -60%; color: black; left: 5%; right: 5%; } #logo_fond { height: 15%; } .center_block { margin-top: 0px !important; } .columns.span_3 { width: auto !important; } .btn { padding: 6px 12px; margin: 5% 20%; text-decoration: none; cursor: pointer; display: flex; } .span_12 { padding-bottom: 30px !important; } #left_actus, #right_actus { float: left !important; width: auto !important; } .actu .description { margin-left: auto; } #actus { text-align: center; padding: 0px; img { position: relative; left: 20%; right: 20%; } } .actu .img { width: 100%; margin-bottom: 20px; } .menu { display: none; } //general h2 { margin-bottom: 30px; } p { margin: 30px; } //formulaire #footer table { width: auto !important; max-width: auto; border-collapse: collapse; } #footer .submit { width: auto; max-width: auto; } .center { margin: 20px; } #footer { margin-top: 0px; } #sub_footer #logos img { height: 75px; margin: 0 10px; } #sub_footer { padding: 5px 0 !important; text-align: center; #logos { padding: 20px; img { margin: 5px 12px !important; } } #place { padding-right: 5% !important; padding-left: 0% !important; } img { height: 70px !important; } } .breve { margin-bottom: 35px; } .slide_home_wrapper .slide .logo { width: 20%; } .slide_home_wrapper .slide .description { position: absolute; bottom: 50px; right: 10%; top: 10%; background: rgba(255, 255, 255, 0.85); width: 300px; height: 130px; } .slide_home_wrapper .slide .content { } #menu_top { position: absolute; top: 5px; font-size: 11px; padding: 10px; background: none; } .slide_home_wrapper #cinquante { width: 40%; } .slide_home_wrapper .slide .content { position: absolute; top: 5px; left: 40px; padding: 6px 0; color: black; font-size: 9px; padding-left: 30px; } .slide_home_wrapper .slide .content .view_site { margin-top: 5px; font-size: 8px; text-align: right; } .sub_bar { font-size: 9px; } .description img { display: none; } .blog_content_show { h1 { font-size: 15px; margin-top: 20%; } } #main_content { padding: 0px; margin-top: 20%; } }