.wrapper_block{max-width:1000px;margin:0 auto;position:relative}
a{transition:all .3s}
a:hover,a:focus{text-decoration:none}
.no-webp .section_1{background-image:url(https://d1hh4docq72mg3.cloudfront.net/assets/images/profiles_h_bgr-1.jpg);background-position:bottom center;background-size:cover;padding:120px 0 240px;background-repeat:no-repeat;position:relative;color:#fff;text-align:center}
.webp .section_1{background-image:url(https://d1hh4docq72mg3.cloudfront.net/assets/images/profiles_h_bgr-1.webp);background-position:bottom center;background-size:cover;padding:120px 0 240px;background-repeat:no-repeat;position:relative;color:#fff;text-align:center}
.background_overlay{background-color:transparent;height:100%;width:100%;top:0;left:0;position:absolute}
.section_1 .background_overlay{background-image:linear-gradient(250deg,#a0266b 0%,#db3393 94%);opacity:.81}
.bg_shape{overflow:hidden;position:absolute;left:0;width:100%;line-height:0;direction:ltr}
.section_1 .bg_shape{bottom:-1px}
.bg_shape svg{display:block;position:relative;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width:calc(200% + 1.3px);height:470px}
.shape_fill{fill:#fff}
.section_1 h2{font-size:65px;font-weight:400;margin-bottom:0;margin-top:10px;font-family:"Roboto Slab",Sans-serif}
.section_1 p{font-size:22px;font-weight:700;font-family:"PT Sans",Sans-serif;padding:0 18%}
.separator{border-top-style:solid;border-top-width:3px;border-top-color:#fff;width:5%;margin:44px auto}
.section_2{margin-top:-200px;margin-bottom:0;padding:0 0 90px}
.card_row{display:flex;width:100%}
.card_custom{width:33.3333%;padding:60px 40px;margin:20px;background-color:#fff;border-style:solid;border-width:1px;border-color:#d8d8d8;border-radius:5px 5px 5px 5px;box-shadow:0 0 30px 0 rgba(0,0,0,0.1);text-align:center;transition:background .3s,border .3s,border-radius .3s,box-shadow .3s,-webkit-border-radius .3s,-webkit-box-shadow .3s}
.card_custom:hover{box-shadow:0 0 35px 0 rgba(0,0,0,0.36)}
.box_icon{margin-bottom:25px;display:inline-block}
.box_icon i{font-size:50px;width:50px;height:50px;position:relative;display:block}
.card_body_facebook .box_icon a{color:#3b5998;border-color:#3b5998}
.card_body_instagram .box_icon a{color:#ce465c;border-color:#ce465c}
.card_body_twitter .box_icon a{color:#007eed;border-color:#007eed}
.card_body h3{font-size:24px;margin-bottom:25px;font-family:"Roboto Slab",Sans-serif;font-weight:400;margin-top:0}
.card_body p{margin-bottom:0;font-family:"PT Sans",Sans-serif}
.card_body_facebook h3 a{color:#3b5998}
.card_body_instagram h3 a{color:#ce465c}
.card_body_twitter h3 a{color:#007eed}
.section_3{background-color:#fff;padding:0 0 150px}
.section_3 .wrapper_block_sm{max-width:900px;margin:0 auto 50px}
.section_3 h2{color:#f12184;font-family:"Roboto Slab",Sans-serif;font-size:43px;font-weight:400;text-transform:capitalize;margin:20px 0;line-height:1;text-align:center}
.section_3 h3{color:#9f0c77;font-family:"Roboto Slab",Sans-serif;font-size:32px;font-weight:400;text-transform:capitalize;margin:65px 0 20px;line-height:1;text-align:center}
.section_3 p{font-family:"PT Sans",Sans-serif;font-size:16px;line-height:1.8em}
.section_3 h2 span{color:#3a95cd}
.section_3 .box_icon{color:#db3393;margin-top:10px;margin-bottom:50px}
.section_3 p a{color:#DA4453}
.section_3 p a:hover,.section_3 p a:focus{color:#DADADA}
.button_link{font-weight:700;text-transform:uppercase;background-color:#db3393;border-radius:0 3px 4px 0;box-shadow:0 4px 10px 0 #474747;font-size:18px;padding:20px 40px;color:#fff;display:inline-block;line-height:1}
.button_link:hover,.button_link:focus{background-color:#a0266b;color:#fff}
.button_link i{margin-right:8px}
.block_button_link{text-align:center;margin-top:20px;margin-bottom:30px}
.no-webp .section_4{background-position:center center;background-size:cover;background-image:url(https://d1hh4docq72mg3.cloudfront.net/assets/images/Hearts-MyTransgenderCupid.jpg);padding:0 0 150px;background-repeat:no-repeat;position:relative}
.webp .section_4{background-position:center center;background-size:cover;background-image:url(https://d1hh4docq72mg3.cloudfront.net/assets/images/Hearts-MyTransgenderCupid.webp);padding:0 0 150px;background-repeat:no-repeat;position:relative}
.bg_shape_top{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}
.section_4 .background_overlay{background-image:linear-gradient(130deg,#a0266b 0%,#db3393 100%);opacity:.9}
.section_4 .bg_shape{top:-1px}
.wrapper_video{margin:-150px 0 0;border-style:solid;border-width:10px;border-color:#fff;box-shadow:0 0 30px 0 rgba(0,0,0,0.2);overflow:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);padding-bottom:56.25%;transition:background .3s,border .3s,border-radius .3s,box-shadow .3s,-webkit-border-radius .3s,-webkit-box-shadow .3s}
.wrapper_video:hover{box-shadow:0 0 35px 0 rgba(0,0,0,0.34)}
.video_iframe{max-width:100%;width:100%;margin:0;line-height:1;border:none;position:absolute;top:0;left:0;height:100%;background-color:#000}
@media (max-width: 768px) {
.card_row{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
.card_custom{width:100%}
.section_1 h2{font-size:47px}
.section_1 p{padding:0}
.section_2{padding:0 0 20px}
.section_3{text-align:center;padding:0}
.bg_shape_top{height:0}
.wrapper_video{margin:0}
.section_4{padding:30px 5px}
}
figure.divider{width:100%;height:522px;position:relative;clear:both;background-repeat:no-repeat;background-position:50% 0;background-size:cover;overflow:hidden}
figure.divider div{position:absolute;height:100%;left:55%;display:table}
.cont_quote div blockquote{color:#d0d0d0;font-size:2.4em;text-align:center;text-shadow:1px 1px 4px rgba(0,0,0,0.4);border-left:hidden;margin:30px 0px 50px;display:block;display:table-cell;vertical-align: middle}
.cont_quote div blockquote:before, div blockquote:after{font-family:Arial;font-size:3.4em;position:absolute}
.cont_quote div blockquote:before{content:open-quote;left:-40px;margin-top:10px}
.cont_quote div blockquote:after{content:close-quote;margin-top:60px;right:-40px}
.cont_quote div.center{margin:0 auto;position:relative;left:auto;right:auto;width:80%;max-width:1120px}
blockquote{font-size:2.9em;text-align:left;padding-left:0;margin:30px 0;font-family:"Segoe UI Light","Segoe","Segoe UI","Helvetica Neue",sans-serif;line-height:1.3em;margin-bottom:50px;quotes:"“" "”" "‘" "’";display:table-cell;vertical-align:middle;position:relative}
@media only screen and (max-width:1250px){
blockquote{font-size:2.4em}
figure.divider{background-position:100% 0}
}
@media only screen and (max-width:1034px){
blockquote{font-size:2em}
}
@media only screen and (max-width:615px){
figure.divider div.center{width:220px}
figure.divider div blockquote:after{margin-top:30px}
blockquote{margin-top:0;font-size:1.6em;margin-bottom:30px}
figure.divider{margin:30px 0;height:222px}
figure.divider div{margin-left:0;left:0;width:230px;margin:0 auto;position:relative}
figure.divider div.center{font-size:0.8em}
figure.divider div blockquote{font-size:1.3em;width:230px}
}
.webp .cont_quote {background-image:url(https://d1hh4docq72mg3.cloudfront.net/assets/images/profiles_bg.webp);background-position:50% 50%;background-size:cover;height:522px}
.no-webp .cont_quote {background-image:url(https://d1hh4docq72mg3.cloudfront.net/assets/images/profiles_bg.jpg);background-position:50% 50%;background-size:cover;height:522px}
.webp .cont_bg {background-image:url(https://d1hh4docq72mg3.cloudfront.net/assets/images/trans-dating-uk.webp);background-position:50% 100%;background-size:cover}
.no-webp .cont_bg {background-image:url(https://d1hh4docq72mg3.cloudfront.net/assets/images/trans-dating-uk.jpg);background-position:50% 100%;background-size:cover}
.cont_bg p {color:#fff;font-size:18px}
.cont_bg h3 {color:#fff}
.cont_quote a {color:#fff;font-weight:700}
.quotation{font-size: 30px !important;margin: 0 auto;quotes: "\201C""\201D""\2018""\2019";padding: 10px 20px;line-height: 1.4}
.quotation:before {content:open-quote;display:inline;height:0;line-height:0;left:-10px;position:relative;top:30px;color:#ccc;font-size:3em}
.quotation::after {content:close-quote;display:inline;height:0;line-height:0;left:10px;position:relative;top:35px;color:#ccc;font-size:3em}
.quotation p{font-size:30px}
#blog .section_1{padding:120px 0 40px}
#blog .section_1 p{padding:0}
.cont_bg h3, .cont_bg h2 {color:#fff}
.rounded-list p{position:relative;display:block;padding:.4em .4em .4em 2em;margin:.5em 0;background:#ddd;color:#444;text-decoration:none;border-radius:.3em;transition:all .3s ease-out;margin-right:1.5em;left:1.5em}
.rounded-list p:hover{background:#eee}
.rounded-list p:hover:before{transform:rotate(360deg)}
.rounded-list p:before{content:counter(li);counter-increment:li;position:absolute;left:-1.6em;top:50%;margin-top:-1.3em;background:#db3393;color:#fff;height:3em;width:3em;line-height:2.5em;border:.3em solid #fff;text-align:center;font-weight:bold;border-radius:2em;transition:all .3s ease-out;}
ol {counter-reset:li;list-style: none;*list-style: decimal;font: 15px 'trebuchet MS', 'lucida sans';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5)}
ol ol {margin:0 0 0 2em}
HTML  CSS Result
EDIT ON
body, .patterns{background-image:url(../images/symphony.png);background-position:bottom;animation:24s linear 0s infinite bp;display:flex;align-items:center;justify-content:center}
@keyframes bp {
from {background-position:198px 0}
to {background-position:0 198px}
}
.text {font:900 18px Ruda;color:#C08;background:white;display:inline-block;padding:1rem}
[data-aos][data-aos][data-aos-duration="400"],body[data-aos-duration="400"] [data-aos]{transition-duration:.4s}[data-aos][data-aos][data-aos-delay="400"],body[data-aos-delay="400"] [data-aos]{transition-delay:0}[data-aos][data-aos][data-aos-delay="400"].aos-animate,body[data-aos-delay="400"] [data-aos].aos-animate{transition-delay:.4s}[data-aos^=fade][data-aos^=fade]{opacity:0;transition-property:opacity,transform}[data-aos^=fade][data-aos^=fade].aos-animate{opacity:1;transform:translate(0)}[data-aos=fade-up]{transform:translateY(100px)}[data-aos=fade-down]{transform:translateY(-100px)}
.margin-r-100 {margin-right:100px}
.row-flex {display: flex;flex-wrap: wrap;align-items: stretch}
.row-flex > [class*="col-"] {float: none; display: flex; flex-direction: column}
.row-flex .well {display: flex;flex-direction: column;flex: 1 1 auto}
.row-flex .well > *:last-child {margin-top: auto}
.row-flex > .col-xs-12 { flex: 0 0 100%; max-width: 100%}
@media (min-width: 768px) {
  .row-flex > .col-sm-6 { flex: 0 0 50%;  max-width: 50%}
}
@media (min-width: 992px) {
  .row-flex > .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%}
}
.row-flex > [class*="col-"] { padding-left: 15px; padding-right: 15px}
.mtc-equal-panel .panel-body{min-height:310px}
.mtc-panel-title{min-height:42px;line-height:1.2;margin-bottom:10px}
.mtc-panel-text{margin-bottom:0}
.mtc-card{padding:24px;border-radius:20px;background-image:linear-gradient(to bottom left,#e0e4e5,#f2f6f9);color:#444447;box-shadow:inset -2px 2px #ffff -20px 20px 40px #0000002e}
.mtc-card-contact:after{content:"";display:block;height:2px;margin-top:16px;background-image:linear-gradient(90deg,#db3393,#27ae60)}
.mtc-card-head{margin-bottom:14px}
.mtc-card-title{float:left;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:40px}
.mtc-card-icon{float:right;width:40px;height:40px}
.mtc-card-icon img{display:block;width:40px;height:40px}
.mtc-card-body p{margin:0 0 10px}
.mtc-card-body p:last-child{margin-bottom:0}
@media (max-width: 767px) {
.mtc-card-title,.mtc-card-icon{float:none;text-align:center}
.mtc-card-title{line-height:1.2;margin-bottom:10px}
.mtc-card-icon{margin:0 auto 10px}