.sponsorship_animal_show{ .inner{ margin:20px auto; max-width:980px; padding:0 20px; margin-bottom:80px; .img{ float:left; img{ width:230px; border-radius:50%; } } .description{ margin-left:250px; } } } .sponsorship_form{ margin-bottom:80px; } .sponsorship_animal{ margin-bottom:80px; .img{ float:left; img{ width:230px; border-radius:50%; } } .description{ margin-left:270px; p{ margin-left:0; } } } .dons2{ table { width:100%; border-collapse: collapse; border-spacing: 0px; td{ padding:0; } } .donate_panel_large{ max-width:700px; margin:30px auto; padding:20px; background:#E5EFF0; .title{ background:white; padding:10px; color:#027878; font-size:33px; border : 1px solid #027878; text-align:center; font-family:$serif; } } .panel_large{ max-width:700px; margin:30px auto; background:#E5EFF0; .inner{ padding:20px; } .title{ background:white; padding:10px; color:#027878; font-size:33px; border : 1px solid #027878; text-align:center; font-family:$serif; } } #validate_don{ font-size:1.1em; cursor:pointer; } .dons_top{ max-width:1200px; margin:0 auto; } .donate_panel{ position:relative; float:left; width:33.33%; padding:5px; box-sizing:border-box; min-height:500px; box-sizing:border-box; #don_ponctuel, #don_reccurent{ text-align:center; display:block; margin-left:6px; margin-right:6px; } .infos_utilisation{ background:$orange; text-align:center; color:white; padding:1px 10px; font-size:0.8em; margin:auto; max-width:80%; margin-top:40px; } .inner{ padding:15px; padding-bottom:60px; background:#E5EFF0; } .title{ background:white; padding:10px; color:#027878; font-size:33px; border : 1px solid #027878; text-align:center; font-family:$serif; } .radio{ display:block; margin-bottom:10px; } .actions{ position:absolute; bottom:10px; right:10px; } td{ vertical-align:top; } .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; margin-bottom:4px; font-size:1em; } .help-block{ display:block; color:red; font-size:0.9em; } } fieldset{ border:0; padding:0; } } .fiscal{ display:block; font-size:0.8em; font-weight:normal; padding:10px; border:1px solid $orange; background:white; margin:20px 0; margin-top:10px; } .donate_grid{ padding-top:10px; .amount, .personalized_amount_container{ margin-right:13px; margin-left:1px; display:inline-block; cursor:pointer; margin-bottom:13px; padding-right:0px; .price{ display:inline-block; padding:6px 10px; background:white; color:black; } &.active{ .price, .personalized_amount{ // border:2px solid black; } } } .personalized_amount_ponctuel_container, .personalized_amount_mensuel_container{ display:inline; } .personalized_amount{ display:inline-block; width:100% !important; box-sizing:border-box; padding:8px 10px; font-size:1em; &.active{ border:2px solid black; } } } .donate_content{ .donate_bottom_text{ margin:30px 0; padding:15px; background:rgba(239,239,239,1); h2{ margin-top:0; } } .donate_panel{ .inner{ background:rgba(239,239,239,1); } h2{ margin-top:0; } } .orange{ .inner{ background:$orange; color:white; h2{ color:white; } } } h2{ font-weight:900; line-height:1.2em; font-size:1.1em; color:$orange; } } .donate_month{ h4{ font-weight:bold; margin-top:0; margin-bottom:10px; margin:0; padding:0; } img{ float:left; width:120px; margin-left:10px; margin-bottom:10px; } p{ margin:2px 0; font-size:0.9em; } .desc{ margin-left:140px; } } .sponsorship_animal{ img{ width:290px; float:left; border-radius:50%; margin:30px; } margin-bottom:20px; h3{ font-weight:bold; color:$orange; } .inner{ padding:10px; margin-left:350px; } a{ display:inline-block; color:$orange; padding:10px 20px; border:1px solid $orange; } } #sponsorship_donate{ float:right; #donate_panel{ .steps{ border-top:0; } position:relative; background:white; border-top:2px solid $orange; width:550px; padding-left:20px; padding-right:20px; box-shadow:0 0 0 white; &:after{ content: ''; position: absolute; border: 15px solid transparent; top: 40%; left: 0; border-color: transparent; border-left-color: $orange; } } } .sponsor_container{ background:$orange; border-bottom:2px solid $orange; } .sponsorship_animal_show{ margin-right:550px; background:$orange; color:white; .inner{ max-width:500px; margin:auto; padding:20px 10px; } img{ border-radius:50%; display:block; margin:auto; } text-align:center; } .bloc-grille-dons{ .header{ input{ display:none; //margin-right:10px; } label{ display:block; color:white; text-align:center; padding:10px; cursor:pointer; font-size : 22px; } } .content{ padding:10px 0; } } .bloc-recurrent{ .header{ background:$vert; } .personalized_amount_mensuel_container{ &.active{ #personalized_amount_mensuel{ border:4px solid $vert ;} } } .amount{ &.active{ .price{ background:$vert; color:white;} } } } .bloc-ponctuel{ .header{ background:$vert; } .personalized_amount_ponctuel_container{ &.active{ #personalized_amount_ponctuel{ border:4px solid $vert ;} } } .amount{ &.active{ .price{ background:$vert; color:white;} } } } .donate_infos{ font-size:0.9em; line-height:1.3em; p{ margin:0; } p:first-child{ margin-bottom:5px; } p:last-child{ margin-bottom:0; } padding-top:5px; //padding-bottom:10px; } .top{ background:rgba(255,255,255,0.85); img{ height:100px; padding:20px 10px; float:left; } h2{ font-size:2em; line-height:1em; text-align:center; margin:0; padding:30px; padding-top:60px; } } .top_desc{ background:rgba($orange, 0.85); padding:15px; color:white; margin-bottom:30px; p{ margin:5px 0; line-height:1.4em; } padding-bottom:10px; } @media screen and (max-width:600px) { .dons_top{ padding:0; } #donate_panel{ width:auto; } .adhesion_top{ #donate_panel{ width:auto; } } .donate_months, .donate_content{ display:none; } #sponsorship_donate{ float:none; #donate_panel{ width:auto; .actions{ position:static; text-align:center; padding-top:20px; } &:after{ display:none; } } } .sponsorship_animal{ img{ width:200px; float:none; display:block; margin:auto; margin-bottom:0; } .inner{ margin-left: 0px; } margin-bottom:30px; h3{ margin-top:0; } } .sponsorship_center{ width:auto !important; text-align:center; padding:10px; } .sponsorship_animal_show{ margin:0; img{ width:150px; } } } } @media screen and (max-width:1010px) { .dons2 .top h2{ padding-top:0px; } .dons2 .donate_panel{ float:none; min-height:auto !important; width:100%; .inner{ height:auto !important; } } }