#default_image{ background: center center ; height:600px; background-size:100%; background-size:cover; max-width:1200px; margin:10px auto; position:relative; border-radius:5px; cursor:pointer; } #default_image_container{ margin-top:-10px; position:relative; overflow:hidden; //background:#383F42; } #default_image_blur{ position:absolute; top:-30px; left:-30px; right:-30px; bottom:-30px; -webkit-filter: blur(20px); -moz-filter: blur(20px); -o-filter: blur(20px); -ms-filter: blur(20px); filter: blur(20px); background: #383F42 center center ; background-size:100%; background-size:cover; } .annonce_header_container{ height:50px; .annonce_header{ padding:0 10px; h1{ font-size:23px; } &.move_top{ background:white; background:rgba(255,255,255,0.95); box-shadow:0 0 5px rgba(0,0,0,0.5); position:fixed; top:0; left:0; right:0; max-width:none; z-index:10; h1{ margin:0; padding:10px; } .price{ padding:10px 10px; padding-left:20px; } .localisation{ padding:15px 10px; } } .localisation{ padding:5px 10px; float:right; } .price{ text-align:right; font-size:1.5em; font-weight:600; float:right; padding-left:20px; } .fav{ float:none; position:static; display:inline; cursor:pointer; } } } #annonce{ max-width:1200px; margin:auto; .annonce_link{ margin:10px 0; padding:10px; display:block; text-align:center; } #corps{ background:white; position:relative; float:left; width:70%; padding:10px; margin-left:10px; min-height:300px; margin-top:10px; margin-bottom:20px; h1{ margin-top:0; } .rea-gal img{ height:165px; } } #infos{ .annonce_owner{ background:white; padding:10px; padding-top:20px; .head{ text-align:center; } img{ width:60px; border-radius:50%; display:block; margin:auto; } .security_panel{ padding:10px; h3{ margin-top:0; display:none; } ul{ list-style:none; padding:0; } } } width:25%; float:right; padding:10px 0px; } .annonce_photos{ margin-bottom:1em; } } #annonce_photos{ .annonce_photo{ float:left; height:220px; width:250px; text-align:center; margin:5px; background:white; img{ max-width:100%; max-height:200px; padding:5px; display:block; margin:auto; } } } .annonce_line{ color:black; cursor:pointer; background:rgba(247,249,250,1); margin:10px 14px; border:2px solid white; position:relative; display:block; .price{ float:right; } h3{ margin-top:0px; font-size:16px; color:rgba(0,0,0,0.7); } .urgent{ position:absolute; top:-2px; left:-2px; width:160px; } .default_image{ width:250px; height:160px; float:left; background-position:center center; background-repeat:no-repeat; background-size:100%; background-size:cover; background-color:rgba(200,203,204,1); } .infos{ height:80px; padding:10px; padding-top:15px; padding-left:260px; color:rgba(0,0,0,0.5); } .specific{ font-style:italic; font-size:13px; } &.highlight{ background:rgba(0,0,0,0.7); box-shadow:0 0 15px rgba(0,0,0,0.5); .infos{ color:white; } h3{ color:white; } } &.big{ &.big{ .default_image{ //border-right:2px solid white; } } .default_image{ width:400px; float:left; height:280px; } .infos{ padding-left:410px; } } &:hover{ color:black; border-color:rgba(64,138,199,1); text-decoration:none; } } .search_results{ padding:5px 6px; } .annonce_list{ color:black; //border-radius:5px; float:left; width:30%; cursor:pointer; max-width:450px; margin:10px 8px; //background:white; position:relative; //box-shadow:0 0 20px rgba(0,0,0,0.1); .price{ position:absolute; bottom:100px; right:0; background:rgba(0,0,0,0.7); padding:5px 10px; color:white; .fav{ display:inline; position:static; padding:0; padding-left:5px; } } .avatar img{ position:absolute; bottom:90px; left:10px; border-radius:50%; width:50px; border:2px solid rgba(255,255,255,0.8); } h3{ margin-top:0px; font-size:15px; padding-top:0; color:rgba(0,0,0,0.7); } .urgent{ position:absolute; top:-2px; left:-2px; width:160px; } .default_image{ //border-radius:5px 5px 0 0; height:250px; background-position:center center; background-repeat:no-repeat; background-size:100%; background-size:cover; background-color:rgba(200,203,204,1); } .infos{ height:80px; padding:0px; padding-top:10px; left:0; right:0; color:rgba(0,0,0,0.5); } .specific{ font-style:italic; font-size:13px; } &.highlight{ background:rgba(253,121,57,1); .default_image{ border:5px solid rgba(253,121,57,1); border-bottom:0px; } box-shadow:0 0 20px rgba(0,0,0,0.5); .price{ background:rgba(253,121,57,0.8); } .infos{ color:white; padding-left:5px; padding-right:5px; } h3{ color:white; } } &.big{ width:100%; max-width:100%; margin-top:20px; margin-bottom:40px; &.big{ .default_image{ //border-right:2px solid white; } } .default_image{ width:60%; float:left; height:400px; } .infos{ margin-left:60%; } } &:hover{ color:black; border-color:rgba(64,138,199,1); text-decoration:none; } } #annonce_form_large{ padding:20px 10px; } #specific_large{ padding:20px 10px; } #annonce_photos_large{ background:rgba(0,0,0,0.7); padding:10px; color:white; } #annonce_save{ h3{ text-align:left; } &.fixed{ position:fixed !important; top:30px !important; z-index:10; } } .first_cats{ text-align:center; background:$blue; padding:1em 0; h3{ color:white; text-align:center; padding:0; margin:0; margin:10px 0; } a{ display:inline-block; color:white; .icon{ font-size:3em; background:white; color:$blue; width:100px; text-align:center; height:100px; border-radius:50%; margin:auto; margin-bottom:5px; padding-top:15px; } text-align:center; width:20%; margin:2%; } } #photo_preview{ position:relative; overflow:hidden; cursor:pointer; img{ position:relative; display:block; margin:auto; max-width:100%; max-height:500px; } .default_image_blur{ background:no-repeat center center; background-size:100%; background-size:cover; position:absolute; top:-20px; left:-20px; right:-20px; bottom:-20px; opacity:1; -webkit-filter: blur(20px); -moz-filter: blur(20px); -o-filter: blur(20px); -ms-filter: blur(20px); filter: blur(20px); } margin-bottom:10px; }