.a-to-z .header1 { display: table; width: 100%; height: auto; background: #b81355; }
.a-to-z .header1 .header1-left { width: 50%; display: table-cell; vertical-align: middle; background: url(/img/a-to-z/a-z-meaning.png) center center no-repeat; background-size: contain; }
.a-to-z .header1 .header1-right { width: auto; display: table-cell; background: #b81355; }

.a-to-z .heading { text-align: center; padding: 30px 20px 0 20px; }
.a-to-z #main .heading h5 { margin: 0 0 10px 0; font-size: 3em; color: #b81355; }
.a-to-z #main .heading p { margin: 0; padding: 0; font-size: 2.3em; }

.a-to-z .local-services { text-align: center; padding: 0 20px 15px 20px; }
.a-to-z .boroughs { text-align: center; padding: 0 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 23px; }
.a-to-z .boroughs a { display: inline-block; position: relative; background: #902c8e; border-radius: 8px; text-align: left; color: #fff; text-decoration: none; font-size: 2.2em; line-height: 1; padding: 9px 4px 12px 60px; width: 16.66%; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; }
.a-to-z .boroughs a:before { border-radius: 8px 0 0 8px; position: absolute; top: 0; bottom: 0; margin: auto; left: 12px; width: 20px; height: 30px; display: inline-block; content: ''; background: url(/img/a-to-z/pin.png) 0 0 no-repeat; background-size: 20px 30px; z-index: 1; }
.a-to-z .boroughs a:after { border-radius: 8px 0 0 8px; position: absolute; top: 0; left: 0; width: 52px; height: 100%; display: inline-block; content: ''; background: #d70; z-index: 0; -webkit-clip-path: polygon(0 0, 100% 0, 74% 100%, 0% 100%);clip-path: polygon(0 0, 100% 0, 74% 100%, 0% 100%); }
.a-to-z .boroughs a:hover, .a-to-z .boroughs a:active, .a-to-z .boroughs a:focus { background: #d100cd; }

.a-to-z .sections { text-align: center; padding: 75px 60px 150px 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 50px; -webkit-box-align: stretch;-ms-flex-align: stretch;align-items: stretch; }
.a-to-z .sections .section { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; background: #fcd5e5; border: 5px solid #860035; border-radius: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
.a-to-z .sections .section-content { padding: 25px 25px 30px 25px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.a-to-z #main p.image { padding: 0; margin: 0; }
.a-to-z .section p.image img { border-radius: 20px 20px 0 0; }
.a-to-z #main .section h3 { font-size: 2.7em; color: #860035; margin: 0 0 20px 0; }
.a-to-z #main .section p { margin: 0; padding: 0; }
.a-to-z #main .section p.cta { padding: 25px 0 40px 0; }
.a-to-z .section p.cta a { display: inline-block; background: #b81355; color: #fff; text-decoration: none; padding: 10px; border-radius: 20px; width: 190px; font-size: 1.2em; line-height: 1; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; }
.a-to-z .section p.cta a:hover, .a-to-z .section p.cta a:active, .a-to-z .section p.cta a:focus { background: #860035; }
.a-to-z #main p.possible { max-width: 220px; margin: 0 auto 15px auto; }

.a-to-z .sections .page-links a { display: block; text-align: left; width: 100%; background: #ea9037; border-radius: 10px; color: #fff; text-decoration: none; font-size: 1.8em; margin: 0 0 10px 0; padding: 9px 50px 14px 20px; line-height: 1.3; position: relative; -webkit-transition: all .2s; -o-transition: all .2s; transition: all .2s; }
.a-to-z .sections .page-links a:after { position: absolute; content: ''; right: 15px; top: 0; bottom: 0; margin: auto; width: 0px; height: 0px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; }

.a-to-z .sections .page-links a:hover, .a-to-z .sections .page-links a:active, .a-to-z .sections .page-links a:focus { background: #b36617; }

.a-to-z .top-sections { padding: 30px 60px 70px 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 40px; }
.a-to-z .top-sections a { display: inline-block; width: 290px; position: relative; min-height: 260px; border-radius: 25px; padding: 15px; color: #fff; text-decoration: none; font-size: 2.5em; line-height: 1.2; -webkit-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
.a-to-z .top-sections a span { display: block; }

.a-to-z .top-sections a:after { position: absolute; bottom: 0; right: -20px; width: 240px; height: 150px; display: inline-block; content: ''; background: url(/img/a-to-z/mesh.png) 0 0 no-repeat; background-size: 240px 150px; z-index: 1; opacity: 0.4; }

.a-to-z .top-sections a.emotional { background: #75569d; }
.a-to-z .top-sections a.health { background: #a0be4c; }
.a-to-z .top-sections a.sexual { background: #ea9037; }
.a-to-z .top-sections a.relationship { background: #d83e66; }
.a-to-z .top-sections a.gender { background: #e7bc00; }
.a-to-z .top-sections a.online { background: #205da1; }
.a-to-z .top-sections a.drugs { background: #51adc7; }
.a-to-z .top-sections a.services { background: #b81355; }

.a-to-z .top-sections a.emotional:before { position: absolute; bottom: 0; right: 0; width: 135px; height: 225px; display: inline-block; content: ''; background: url(/img/a-to-z/icon-emotional.png) 0 0 no-repeat; background-size: 135px 225px; z-index: 2; opacity: 0.5; }
.a-to-z .top-sections a.health:before { position: absolute; bottom: 16px; right: 20px; width: 145px; height: 170px; display: inline-block; content: ''; background: url(/img/a-to-z/icon-health.png) 0 0 no-repeat; background-size: 145px 170px; z-index: 1; opacity: 0.5; }
.a-to-z .top-sections a.sexual:before { position: absolute; bottom: 20px; right: 22px; width: 115px; height: 210px; display: inline-block; content: ''; background: url(/img/a-to-z/icon-sexual.png) 0 0 no-repeat; background-size: 115px 210px; z-index: 1; opacity: 0.5; }
.a-to-z .top-sections a.relationship:before { position: absolute; bottom: 10px; right: 15px; width: 150px; height: 200px; display: inline-block; content: ''; background: url(/img/a-to-z/icon-relationship.png) 0 0 no-repeat; background-size: 150px 200px; z-index: 1; opacity: 0.5; }
.a-to-z .top-sections a.gender:before { position: absolute; bottom: 10px; right: 20px; width: 190px; height: 150px; display: inline-block; content: ''; background: url(/img/a-to-z/icon-gender.png) 0 0 no-repeat; background-size: 190px 150px; z-index: 1; opacity: 0.5; }
.a-to-z .top-sections a.online:before { position: absolute; bottom: 25px; right: 30px; width: 100px; height: 190px; display: inline-block; content: ''; background: url(/img/a-to-z/icon-online.png) 0 0 no-repeat; background-size: 100px 190px; z-index: 1; opacity: 0.5; }
.a-to-z .top-sections a.drugs:before { position: absolute; bottom: 20px; right: 15px; width: 165px; height: 165px; display: inline-block; content: ''; background: url(/img/a-to-z/icon-drugs.png) 0 0 no-repeat; background-size: 165px 165px; z-index: 1; opacity: 0.5; }
.a-to-z .top-sections a.services:before { position: absolute; bottom: 20px; right: 20px; width: 125px; height: 185px; display: inline-block; content: ''; background: url(/img/a-to-z/icon-services.png) 0 0 no-repeat; background-size: 125px 185px; z-index: 1; opacity: 0.5; }

.a-to-z .top-sections a:hover, .a-to-z .top-sections a:focus { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); }

@media screen and (max-width: 1400px) {
.a-to-z .boroughs { gap: 15px; }
.a-to-z .boroughs a { font-size: 1.8em; padding: 9px 4px 12px 52px; }
.a-to-z .boroughs a:before { width: 16px; height: 24px; background-size: 16px 24px; }
.a-to-z .boroughs a:after { width: 45px; }
.a-to-z .sections { padding: 45px 60px 50px 60px; gap: 20px; }
.a-to-z .sections .section-content { padding: 10px 25px 20px 25px; }
.a-to-z .section p.image img { width: 100%; }
.a-to-z .heading.help-advice { padding: 0 20px 0 20px; }
.a-to-z .top-sections { padding: 40px 60px 50px 60px; gap: 25px; }
.a-to-z .top-sections a { width: calc(25% - 19px); min-height: 250px; font-size: 2.2em; }
.a-to-z .top-sections a:before { transform: scale(0.8); transform-origin: right bottom; }
.a-to-z .top-sections a:after { transform: scale(0.8); transform-origin: right bottom; right: 0; }


}

@media screen and (max-width: 1350px) {
.a-to-z .section p.image img { width: auto; }
}




@media screen and (max-width: 1200px) {
.a-to-z .boroughs { gap: 10px; }
.a-to-z .boroughs a { font-size: 1.7em; }
.a-to-z .sections .section-content { padding: 20px 20px 20px 20px; }
.a-to-z #main .section h3 { font-size: 2.3em; margin: 0 0 15px 0; }
.a-to-z .section p.cta a { padding: 8px 10px 11px 10px; width: 180px; font-size: 1.1em; }
.a-to-z #main .section p { font-size: 1.6em; } 
.a-to-z #main .section p.cta { padding: 20px 0 30px 0; } 
.a-to-z .sections .page-links a { font-size: 1.6em; padding: 7px 40px 12px 15px; }
.a-to-z .sections .page-links a:after { right: 10px; border-width: 7px 0 7px 13px; }


}

@media screen and (max-width: 1100px) {
.a-to-z .boroughs { gap: 23px; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.a-to-z .boroughs a { font-size: 2.2em; padding: 9px 4px 12px 60px; width: 240px; }
.a-to-z .boroughs a:before { width: 20px; height: 30px; background-size: 20px 30px; }
.a-to-z .boroughs a:after { width: 52px; }
.a-to-z #main .heading h5 { font-size: 2.7em; }
.a-to-z #main .heading p { font-size: 2em; }
.a-to-z .top-sections { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.a-to-z .top-sections a { width: calc(33.33% - 17px); min-height: 210px; font-size: 2em; }

.a-to-z .sections { padding: 40px 30px 40px 30px; gap: 15px; }


}




@media screen and (max-width: 900px) {
.a-to-z .boroughs { padding: 0 30px; }
.a-to-z .top-sections { padding: 30px 30px 40px 30px; gap: 20px; }
.a-to-z .top-sections a { width: calc(33.33% - 14px); }


.a-to-z .sections { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 45px; }
.a-to-z .sections .section { max-width: 400px; margin: 0 auto; -webkit-box-flex: 1;-ms-flex: auto;flex: auto; }

}



@media screen and (max-width: 830px) {
.a-to-z .boroughs { gap: 17px; }
.a-to-z .boroughs a { width: calc(33.3% - 16px); }


}





@media screen and (max-width: 768px) {
.a-to-z #main h1 { font-size: 2.7em; }
.a-to-z .header1 { display: block; }
.a-to-z .header1 .header1-left { background-size: 70%; width: 100%; display: block; min-height: 40vw; }
.a-to-z .header1 .header1-right { width: 100%; display: block; padding-bottom: 0; }
.a-to-z ul.letters { margin: 20px auto 10px auto; }
.a-to-z .boroughs { padding: 0 24px; }
.a-to-z .boroughs a { font-size: 1.8em; padding: 9px 4px 12px 52px; }
.a-to-z .boroughs a:before { width: 16px; height: 24px; background-size: 16px 24px; }
.a-to-z .boroughs a:after { width: 45px; }


.a-to-z .top-sections { max-width: 610px; margin: 0 auto; padding: 30px 24px 40px 24px; }
.a-to-z .top-sections a { width: calc(50% - 10px); }
}

@media screen and (max-width: 600px) {
.a-to-z .boroughs a { font-size: 1.9em; padding: 14px 4px 17px 52px; width: calc(50% - 9px); }
.a-to-z .top-sections a:before { transform: scale(0.7); }
}


@media screen and (max-width: 500px) {
.a-to-z #main .heading h5 { font-size: 2.3em; }
.a-to-z #main .heading p { font-size: 1.7em; }
.a-to-z .top-sections a { width: 100%; max-width: 300px; }
}

@media screen and (max-width: 450px) {
.a-to-z .boroughs a { width: 100%; max-width: 270px; }
}

@media screen and (min-width: 700px) and (max-width: 768px) {
.a-to-z .header1 .header1-right img { width: 100%; }
}