$orange: #F19300; $dark_orange: #f15a21; $title_font : "din-condensed-web", sans-serif; @import "jquery.bxslider"; @import "redactor"; @import "fontawesome/font-awesome"; @import "qi_grids"; @import "popover"; @import "public/petitions"; @import "public/menu_item_link_contents"; @import "public/menus"; @import "public/slippry"; @import "public/timeline"; @import "public/articles"; @import "public/bottom2"; @import "public/dons"; @import "public/press_release"; @import "public/specific_map"; @import "public/flexslider"; @import "public/label"; @import "public/print"; @import "public/forum"; @import "public/boutique"; //@import "vendor/jquery.socialfeed"; .petition_thank{ .donate_block{ h2{ font-size:1.8em; padding:20px 0; padding-top:0; } background: url("/don2.jpg") no-repeat center center; background-size:100%; background-size:cover; color:white; margin-left:0; margin-right:0; padding:50px 10px; .inner{ max-width:900px; width:100%; .left{ width:50%; float:left; } .right{ width:50%; float:right; img{ max-width:300px; margin-top:20px; } } } } } .image_actu_index_block{ text-align:center; img{ margin:10px; display:inline-block; &:hover{ opacity:0.9; } } } #image_actu_container{ position:fixed; top:0; left:0; right:0; bottom:0; z-index:105; } #image_actu_overlay{ background:rgba(0,0,0,0.8); z-index:104; position:fixed; top:0; left:0; right:0; bottom:0; } .image_actu_show{ max-width:1100px; background:white; margin:auto; margin-top:100px; background:white; position:relative; //min-height:800px; box-shadow:0 0 10px rgba(0,0,0,0.5); .image{ float:left; width:70%; text-align:center; img{ display:block; margin:auto; } } .description{ margin-left:70%; padding:20px; h1{ font-size:2em; margin-top:0; } } } #image_actu_albums_menu{ text-align:center; padding:2em 0; a { display:inline-block; border:1px solid $orange; padding:5px 10px; border-radius:20px; margin:2px 2px; &.active{ background:$orange; color:white; } } } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #home_slider{ background:black; height:640px; } #newsletter_large_place{ position:absolute; left:0; right:0; width:100%; z-index:1000; .cancel{ display:inline !important; } box-shadow:0 0 15px rgba(0,0,0,0.6); } #newsletter_large{ .cancel{ display:none; } .header{ padding:20px; background:$orange; color:white; } .center{ max-width:700px; margin:auto; } } #registrant_large_form{ padding:20px; background:white; fieldset{ border:0; padding:0; } .input{ &.has-error{ .form-control{ border: 1px solid red; } } .control-label{ display:block; font-size:0.9em; } .form-control{ display:block; box-sizing:border-box; width:100%; padding:5px; font-size:1em; } .help-block{ display:block; color:red; font-size:0.9em; } } .btn{ box-sizing:border-box; width:100%; font-size:1em; padding:10px 20px; border:1px solid gray; display:inline-block; color:white; width:auto; font-size:1em; background:orange; border-color:transparent; margin:0 !important; margin-top:10px !important; cursor:pointer; &:hover{ background:rgba(80,80,80,1); } } } .article_comments{ margin:auto; max-width:650px; .form_place{ .cancel{ display:none; } } } .comment{ .header{ font-style:italic; margin-bottom:0; } blockquote{ margin:0; margin-top:5px; padding:0; background:rgba(245,244,244,1); padding:1px 10px; } } .child_comments{ padding-left:30px; } .comment_form_container{ padding:10px; margin-top:20px; background: rgba(250,250,250,1); margin-bottom:20px; fieldset{ border:0; padding:0; } .input{ &.has-error{ .form-control{ border: 1px solid red; } } .control-label{ display:block; font-size:0.9em; } .form-control{ display:block; box-sizing:border-box; width:100%; padding:5px; font-size:1em; } .help-block{ display:block; color:red; font-size:0.9em; } } .btn{ box-sizing:border-box; width:100%; font-size:1em; padding:10px 20px; border:1px solid gray; display:inline-block; color:white; width:auto; font-size:1em; background:orange; border-color:transparent; margin:0 !important; margin-top:10px !important; cursor:pointer; &:hover{ background:rgba(80,80,80,1); } } } #large{ .links{ color:white; padding-top:15px; text-align:right; float:right; a{ color:white; padding:5px; font-size:1.3em; } } .video_container{ h3{ text-align:left; display:block; font-size:1.3em; padding-top:15px; margin-top:0; } } } .video_expand{ cursor:pointer; background-color:#323131; h4{ margin-top:auto !important; position:absolute; bottom:0px; left:0px; padding:5px; padding-top:15px; text-align:left; font-size:1em; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 99%, rgba(0, 0, 0, 0.5) 100%); right: 0px; } } #assurance{ max-width:700px; margin:auto; padding:10px 50px; } .assurance-vie-container{ background:center center no-repeat; background-size:100%; background-size:cover; padding:50px; background-image:url('/assurance-fond.jpg'); .inner{ margin:auto; max-width:700px; padding:20px; box-shadow:0 0 20px rgba(0,0,0,0.1); background:white; border-radius:5px; .row_50{ width:50%; float:left; box-sizing:border-box; } } } .press_release_large{ max-width:700px; margin:auto; .back{ margin-top:30px; } } #press_releases{ h1{ font-size:2em; margin-bottom:50px; } h2{ margin:10px 0; margin-top:5px; padding:0; font-weight:bold; font-size:1.3em; line-height:1.2em; } margin:auto; max-width:700px; margin-top:50px; .press_release{ margin-bottom:50px; .date{ max-width:300px; padding-bottom:5px; border-bottom:1px solid rgb(242, 242, 242); } } } .video_content{ background:#323131; padding:20px; margin:20px 0; h2{ margin-top:10px; color:white; } .links{ color:white; padding-top:20px; text-align:right; a{ color:white; padding:5px; font-size:1.3em; } } } .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .socials_links{ position:fixed; bottom:300px; right:0; .link{ display:block; width:50px; text-align:center; padding:12px 0; position:relative; color:white; font-size:1.2em; &.twitter{ background:rgba(54,174,218,1); } &.facebook{ background:rgba(60,90,150,1); } } .top_link{ opacity:0; transition-duration:0.5s; padding:3px 7px; font-size:2.5em; display:block; cursor:pointer; color:rgba(215,215,215,1); &:hover{ color:rgba(180,180,180,1); } } } @media screen and (max-width:1320px) { .socials_links{ position:fixed; bottom:0px; right:100px; width:150px; text-align:right; opacity:1; &:hover{ opacity:1; } .link{ float:left; } .top_link{ float:left; } } } .detail_download_content{ margin:10px 0; margin-bottom:5px; background:rgba(250,250,250,1); padding:10px; #color:white; img{ float:left; margin-right:0; width:150px; } h4,.desc,.links{ margin-left:160px; } h4{ font-weight:bold; margin-top:0; } .links{ a{ display:inline-block; color:$orange; padding:5px 10px; border:1px solid $orange; margin-right:10px; margin-bottom:5px; width:auto; font-size:1em; background:transparent; border-radius:0; cursor:pointer; &:hover{ background:rgba(80,80,80,1); } } } } .bx-wrapper img{ display:block; max-width: 100%; } body{ font-family:"lato", Arial, sans-serif; line-height:1.4em; text-align:left; font-weight:300; padding:0; margin:0; padding-top:80px; font-size:16px; color:#333333; background:rgba(248,248,248,1); } .slider{ img{ max-width:100%; } } a{ cursor:pointer; img{ border:0; } } img{ max-width:100%; } a{ color:$orange; text-decoration:none; &:hover{ color:$orange; text-decoration:none; } } .clear{ clear:both; } .center{ max-width:1100px; margin:auto; } .blanc_encadre{ //font-family:"din_alternatebold", Arial, sans-serif; background:white; background:rgba(255,255,255,0.90); padding:25px; margin:auto; max-width:500px; h2{ margin-top:0; padding-top:0; } } .center_block{ text-align:center; img{ margin:0 5px; } } .quote{ padding:10px 10px; position:relative; .guillemet{ font-family:palatino; opacity:0.6; font-size:3em; position:absolute; &.top_corner{ top:5px; left:5px; padding-top:15px; padding-left:5px; } &.bottom_corner{ bottom:5px; right:5px; } } .quote_content{ font-family:Stylograph; font-size:1.6em; padding-top:45px; text-align:center; line-height:1.3em; } .author{ padding-right:50px; font-size:1em; text-align:right; opacity:0.8; } } .article_panel{ border-bottom:1px solid rgba(190,189,190,1); margin:10px 0; h2{ margin-top:0; padding-top:20px; } img{ width:40%; margin:20px; } &.left { img{ float:left; display:block; margin-right:20px; } padding-right:20px; } &.right{ img{ float:right; margin-left:20px;} padding-left:20px; } color:black; } h1,h2,h3,h4{ font-family:$title_font; font-weight:300; } h1{ font-size:50px; } @media screen and (min-width:1300px) { .width_sidebar{ //max-width:1250px; margin:0 2%; #sidebar{ .inner{ margin:auto; } } } } @media screen and (max-width:600px) { .top{ #logo, &.move_top #logo{ position:static; display:block; float:none; margin:10px auto; } .contact{ display:none; }} } @media screen and (max-width:800px) { body{ padding-top:0 !important; } .petition_bottom{ .inner{ padding:0; } } .petition_large_content{ padding:20px 0 !important; } #sidebar{ ul{ a{ padding:10px 20px !important; } } } .sub_menu_bar{ padding:0; border-top:1px solid rgba(255,255,255,0.2); ul{ padding:0; margin:0; } li{ display:block !important; a{ display:block !important; padding:10px 20px !important; border-bottom:1px solid rgba(255,255,255,0.2); font-size:1em; border-radius:0 !important; color:white; } } } .sub_bottom{ a{ display:block !important; padding:10px 20px; border-bottom:1px solid rgba(255,255,255,0.2); margin:0 -10px !important; } padding:30px 20px; p{ max-width:100% !important; } } #sidebar, .menu_content_inner, .side_menu{ float:none; width:auto !important; display:block; } .menu_content_inner{ width: 100% !important; } .menu_item_children_small{ .menu_itemlink_content{ display:block; width:auto; } } #menu_top_container{ position:relative; #menu{ text-align:center; .content, .sub_content, #logo, &.move_top #logo{ position:static; display:block; float:none; margin:10px auto; } .sub_content{ display: none !important; } .donate{ display: block !important; margin-top:10px; a{ border-bottom:0px solid white !important; } } .content{ padding:0; border-top:1px solid rgba(255,255,255,0.2); ul{ padding:0; margin:0; } li{ display:block !important; a{ display:block !important; padding:10px 20px; border-bottom:1px solid rgba(255,255,255,0.2); } } .home_link{ display:none !important; } } } } .petition_form_inner{ padding:0; } .petition{ margin:0; border-radius:0; .content{ width:auto; float:none; } .form{ margin:0; } } .petition_large{ .petition_large_content{ .inner_left{ width:auto; } .inner_right{ width:auto; } } } .donate_block{ .inner{ width:auto; } } .columns{ width:auto !important; float:none; display:block; } .article-2x{ width:auto !important; float:none; display:block; .inner{ height:auto; .img, .description{ width:auto !important; float:none !important; margin:0; text-align:center; } .img{ margin-bottom:10px; } } } .bottom{ display:none; } .sub_content{ display:none; } .donate_bottom{ display:block !important; padding-bottom:30px; padding-top:0; text-align:center; a{ text-transform:uppercase; color:white; margin-left:5px; padding:6px 20px; font-size:0.95em; $bg_color:#f5911f; background:url('/logo_fade_w.png') no-repeat bottom right $bg_color; background-size: auto 100%; font-weight:500; &:hover{ background-color:darken($bg_color,5); } } } } .donate_bottom{ display:none; } .active{ color:rgba(253,164,40,1); } .breadcrumb{ margin:20px 25px; color:rgba(150,150,150,1); *{ color:rgba(150,150,150,1); } } .photo_credits{ font-size:0.9em; margin:20px 25px; color:rgba(150,150,150,1); } .menu_item_content{ min-height:500px; padding-bottom:50px; position:relative; p{ text-align:justify; } .center{ max-width:650px; padding: 0 20px; margin:auto; } } .admin_panel{ position:fixed; bottom:0px; left:20px; a{ display:inline-block; padding:10px 20px; color:white; background:rgba(253,164,40,1); } } .main_container{ max-width:1200px; margin:auto; overflow:hidden; position:relative; } #logo_slider{ position:absolute; top:90px; left:50px; z-index:10; width:230px; } .first_title{ h1{ margin-top:0; color:$orange; text-align:center; padding-top:30px; font-size:2em; } } .menu_content_inner{ .inner{ background:white; margin:20px; margin-right:0; margin-top:0; padding-bottom:20px; } &.index{ .menu_item_top{ //margin:20px; margin-bottom:0; margin-bottom:20px; h1{ text-align:center; left:20px; } .gradient{ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 99%, rgba(0, 0, 0, 0.5) 100%); height: 250px; position: absolute; bottom: 0; left: 0px; right: 0px; } } } } h1{ line-height:1.2em; } .comment_rules_container{ display:none; background:white; padding: 10px; margin-bottom:10px; .inner{ } } .politique_message{ padding:30px 70px; background:rgba(234,234,234,1); //color:white; .form{ font-weight:bold; float:left; width:300px; } .recipient_list{ background:white !important; padding:5px; font-weight:normal; font-size:0.9em; } .message_container{ margin-left:320px; position:relative; .message{ padding:0 10px; } .gradient{ display:none; position:absolute; bottom:0; left:-10px; right:-10px; background:gray; height:150px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eaeaea+0,eaeaea+88,eaeaea+100&0+0,1+87,1+100 */ background: -moz-linear-gradient(top, rgba(234,234,234,0) 0%, rgba(234,234,234,1) 87%, rgba(234,234,234,1) 88%, rgba(234,234,234,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(234,234,234,0) 0%,rgba(234,234,234,1) 87%,rgba(234,234,234,1) 88%,rgba(234,234,234,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(234,234,234,0) 0%,rgba(234,234,234,1) 87%,rgba(234,234,234,1) 88%,rgba(234,234,234,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00eaeaea', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */ } &.with_gradient{ .gradient{ display:block; } .message{ height:300px; overflow:hidden; } } } .message{ } .name{ font-size:1em; padding:5px 10px; } .message_content{ color:black; padding:10px; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,0.2); margin:10px 0; background:white; } .send_button{ display:inline-block; background:$orange !important; padding: 5px 10px; color:white; border:0; margin-bottom:3px; } .send_buttons{ margin:10px 0; } .object{ margin:10px 0; } .recipients{ margin:10px 0; margin-bottom:7px; .recipient{ display:inline-block; border-radius:4px; padding:2px 8px; margin-bottom:3px; background:#d3e7fa; font-size:0.8em; } } .content{ padding:0 10px; border-top:1px solid gray; padding-bottom:10px; } } @media screen and (max-width:800px) { .article_top h1, .menu_item_top h1{ font-size:30px; bottom:10px; } } @media screen and (max-width:600px) { .article_top h1, .menu_item_top h1{ font-size:23px; bottom:10px; } } .search_top{ form{ display:inline; .search_input{ color:rgba(255, 255, 255, 0.7); border:1px solid rgba(0,0,0, 0.4); padding:2px 2px; border-radius:2px; text-align:center; &:focus{ border:1px solid rgba(0,0,0, 0.7); background:white; color:black; } background:transparent; } .search_send{ margin-left:-5px; } } } .petitions_large_view_container{ background:rgba(5, 5, 5, 0.03); } .petitions_large_view{ h4{ color:#fba33a; margin:10px 0; } padding:10px 10px; padding-bottom:15px; text-align:center; .petition_small{ display:block; text-align:center; color:black; width:20%; box-sizing:border-box; padding:10px; float:left; .inner{ margin-top:5px; font-size:0.9em; } .image{ height:130px; background: center center no-repeat; background-size:100%; background-size:cover; } }} #image_actu_albums{ .image_actu_album{ margin-bottom:20px; padding:10px; } } #slider_banner{ background:rgb(50,50,50); border-bottom:5px solid $orange; //margin-left:-10px; //margin-right:-10px; #clip_button{ border:2px solid white; padding:8px 15px; border-radius:25px; color:white; font-size:1.1em; font-weight:bold; margin-bottom:10px; margin-top:0px; display:inline-block; } .bx-pager{ display:none; } .bx-wrapper{ margin:0 auto; } #slider_left{ max-width:75%; float:left; padding:20px; box-sizing:border-box; } #slider_right{ width:25%; position:absolute; top:0; right:0; text-align:center; background:white; h1{ font-size:2.2em; color:$orange; } .socials{ a{ width:1.2em; line-height:1.2em; font-size:1.2em; padding:10px; display:inline-block; background:rgba(0,0,0,0.8); color:white; border-radius:50%; margin:0 5px; } } } } .shortcut_row{ margin:20px -10px; .shortcut{ padding:0 10px; width:33.33%; float:left; box-sizing:border-box; .title{ font-family:$title_font; color:white; padding:10px; //padding-right:5px; font-size:1.3em; background:$orange; background:rgba($orange, 0.9); position:absolute; top:0; left:0; .right_container{ position:absolute;top:0;bottom:0;right:-15px;width:20px;overflow:hidden; .oblique{ position:absolute;top:-10px;left:-10px;width:20px;height:60px;overflow:hidden;background:rgba($orange, 0.9); transform: rotate(16deg); } } } .inner{ position:relative; min-height:200px; background:center center no-repeat black; background-size:100%; background-size:cover; } } } .row_actus{ h2{ margin-top:0; } .home_image_actus{ width:33.33%; float:left; box-sizing:border-box; .row{ .image_actu{ width:45%; &.img_2{ width:55%; } } } .row_alternate{ .image_actu{ width:55%; &.img_2{ width:45%; } } } .image_actus{ margin:-5px -5px; .image_actu{ float:left; .inner{ margin:5px; background:center center no-repeat black; background-size:100%; background-size:cover; height:100px; } } } .inner{ padding:20px; background:$orange; box-sizing:border-box; margin-right:10px; h2{ color:white; } } } .home_articles{ width:66.66%; box-sizing:border-box; float:left; .inner{ margin-left:10px; background:white; box-sizing:border-box; padding:20px; padding-bottom:10px; } } } .follow_row_container{ margin:20px 0; padding:20px 0; background:white; } .follow_row{ .left_follow{ width:22%; float:left; min-height:400px; background:black; position:relative; .title{ font-size:2em; position:absolute; padding:20px; padding-bottom:0; text-align:center; color:white; bottom:0; left:0; right:0; } .gradient{ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 99%, rgba(0, 0, 0, 0.5) 100%); height: 80px; position: absolute; bottom: 0; left: 0px; right: 0px; } } .right_follow{ width:78%; float:left; .inner{ margin:-10px; margin-left:10px; .element{ width:33.33%; float:left; } .menu_itemlink_content{ margin:10px; } } } } @media screen and (max-width:600px) { #bxslider .inner{ width:100% !important; max-width:100% !important; } .petitions_large_view .petition_small{ width:50%; } .no_mobile{ display:none; } #slider_left{ float:none !important; max-width:100% !important; } #slider_right{ float:none !important; width:100% !important; display:none; margin-left: 0 !important; } .shortcut_row .shortcut{ float:none !important; width:auto !important; margin:20px !important; } .index_category .article_header .image{ margin-bottom:10px; } .home_image_actus{ float:none !important; width:100% !important; .inner{ margin-right:0 !important; } } .home_articles{ float:none !important; width:100% !important; } .left_follow{ float:none !important; width:100% !important; margin-bottom:20px; } .right_follow{ float:none !important; width:100% !important; .inner{ margin-right:10px !important; } .element{ width:50% !important; } } } .timeline_container{ .inner{ background:transparent; } } .blog_content_show, .menu_content_inner{ a{ &:hover{ text-decoration:underline; } } } .newsletter_list{ padding:10px 20px; margin-bottom:20px; background:white; padding-bottom:30px; display:block; h2{ margin-bottom:0; } p.date{ float:right; padding-top:5px; color:black; } } a.newsletter_list{ &:hover{ h2{ text-decoration:underline; } border-left:5px solid $orange; } text-decoration:none !important; span{ } } .flashs{ position:fixed; bottom:10px; right:10px; max-width:600px; width:50%; z-index:3; .error, .notice, .alert{ padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; .remove{ padding-right:7px; cursor:pointer; } } .error{ color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .notice{ color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .alert{ color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; } }