/*	phpBB3 Style Sheet
	--------------------------------------------------------------
	phpBB Extension Name:	Basic Footer Socials
	Extension Developer:	ForumFlair (https://forumflair.co.uk)
	Compatible Style:		Prosilver_Dark
	--------------------------------------------------------------
*/

/* Prosilver RTL Bug Fix -------------------------------------------- */
/* Fixes icon padding mistake found in prosilver bidi.css file */
.rtl .bscftrscls-social .icon { padding: 0; }
/* Can Be Removed When Bug Is Fixed --------------------------------- */

/* Defaults */
.bscftrscls		{ margin: 0 0 6px 0; }
.bscftrscls ul	{ display: flex; flex-wrap: wrap; justify-content: center; }
.bscftrscls li	{ list-style: none; }
.bscftrscls a	{ display: flex; align-items: center; justify-content: center; margin: 8px; text-decoration: none; }

/* Icon Defaults */
.bscftrscls .icon::before { padding: 0; }

/* Hover Transform Effects Defaults */
.spn-hvr-scls .scl:hover .icon, .spn-hvr-scls .scl:focus .icon	{ transform: rotateZ(360deg); }
.zm-hvr-scls .scl:hover .icon, .zm-hvr-scls .scl:focus .icon	{ transform: scale(0.8); }

/* Socials Corners */
.flt-scls .scl	{ border-radius: 0; }
.rndd-scls .scl { border-radius: 5px; }
.rnd-scls .scl	{ border-radius: 50%; }

/* Socials Size */
.sml-scls .scl { height: 40px; width: 40px; }
.mdm-scls .scl { height: 46px; width: 46px; }
.lrg-scls .scl { height: 52px; width: 52px; }

/* Socials FA Icon Size */
.sml-scls .icon	{ font-size: 20px; }
.mdm-scls .icon	{ font-size: 24px; }
.lrg-scls .icon	{ font-size: 28px; }

/* Socials Styling Defaults */
.scl		{ background-color: #171B24; border: 2px solid transparent; transition: all 0.4s ease-out; }
.scl:hover	{ outline-color: transparent; transition: all 0.4s ease-out; }
.scl:focus	{ outline: 5px solid transparent; transition: all 0.4s ease-out; }
.scl .icon	{ transition: all 0.4s ease-out; }

/* Socials Colours */
.wbst-scl		{ border-color: #18992C; }
.fcbk-scl		{ border-color: #376ACC; }
.twtr-scl		{ border-color: #00ACED; }
.insta-scl		{ border-color: #A929D7; }
.pntrst-scl		{ border-color: #B81621; }
.tmblr-scl		{ border-color: #4A75A6; }
.ytube-scl		{ border-color: #DF1C31; }
.twtch-scl		{ border-color: #9147FF; }
.steam-scl		{ border-color: #327491; }
.wrdprs-scl		{ border-color: #2184B0; }
.lnkdn-scl		{ border-color: #0A66C2; }
.drbl-scl		{ border-color: #D74579; }
.cdpen-scl		{ border-color: #5D6679; }
.gthub-scl		{ border-color: #7C7C7C; }
.amazn-scl		{ border-color: #F99000; }
.ebay-scl		{ border-color: #B39212; }
.etsy-scl		{ border-color: #F1641E; }
.pypl-scl		{ border-color: #2555C6; }

/* Socials Focus State Colours */
.wbst-scl:focus		{ outline-color: #18992C8F; }
.fcbk-scl:focus		{ outline-color: #376ACC8F; }
.twtr-scl:focus		{ outline-color: #00ACED8F; }
.insta-scl:focus	{ outline-color: #A929D78F; }
.pntrst-scl:focus	{ outline-color: #B816218F; }
.tmblr-scl:focus	{ outline-color: #4A75A68F; }
.ytube-scl:focus	{ outline-color: #DF1C318F; }
.twtch-scl:focus	{ outline-color: #9147FF8F; }
.steam-scl:focus	{ outline-color: #3274918F; }
.wrdprs-scl:focus	{ outline-color: #2184B08F; }
.lnkdn-scl:focus	{ outline-color: #0A66C28F; }
.drbl-scl:focus		{ outline-color: #D745798F; }
.cdpen-scl:focus	{ outline-color: #5D66798F; }
.gthub-scl:focus	{ outline-color: #7C7C7C8F; }
.amazn-scl:focus	{ outline-color: #F990008F; }
.ebay-scl:focus		{ outline-color: #B392128F; }
.etsy-scl:focus		{ outline-color: #F1641E8F; }
.pypl-scl:focus		{ outline-color: #2555C68F; }

/* Socials Background Hover Effect Hover & Focus State Colours */
.bgrnd-hvr-scls .wbst-scl:hover, .bgrnd-hvr-scls .wbst-scl:focus		{ background-color: #18992C; }
.bgrnd-hvr-scls .fcbk-scl:hover, .bgrnd-hvr-scls .fcbk-scl:focus		{ background-color: #376ACC; }
.bgrnd-hvr-scls .twtr-scl:hover, .bgrnd-hvr-scls .twtr-scl:focus		{ background-color: #00ACED; }
.bgrnd-hvr-scls .insta-scl:hover, .bgrnd-hvr-scls .insta-scl:focus		{ background-color: #A929D7; }
.bgrnd-hvr-scls .pntrst-scl:hover, .bgrnd-hvr-scls .pntrst-scl:focus	{ background-color: #B81621; }
.bgrnd-hvr-scls .tmblr-scl:hover, .bgrnd-hvr-scls .tmblr-scl:focus		{ background-color: #4A75A6; }
.bgrnd-hvr-scls .ytube-scl:hover, .bgrnd-hvr-scls .ytube-scl:focus		{ background-color: #DF1C31; }
.bgrnd-hvr-scls .twtch-scl:hover, .bgrnd-hvr-scls .twtch-scl:focus		{ background-color: #9147FF; }
.bgrnd-hvr-scls .steam-scl:hover, .bgrnd-hvr-scls .steam-scl:focus		{ background-color: #327491; }
.bgrnd-hvr-scls .wrdprs-scl:hover, .bgrnd-hvr-scls .wrdprs-scl:focus	{ background-color: #2184B0; }
.bgrnd-hvr-scls .lnkdn-scl:hover, .bgrnd-hvr-scls .lnkdn-scl:focus		{ background-color: #0A66C2; }
.bgrnd-hvr-scls .drbl-scl:hover, .bgrnd-hvr-scls .drbl-scl:focus		{ background-color: #D74579; }
.bgrnd-hvr-scls .cdpen-scl:hover, .bgrnd-hvr-scls .cdpen-scl:focus		{ background-color: #5D6679; }
.bgrnd-hvr-scls .gthub-scl:hover, .bgrnd-hvr-scls .gthub-scl:focus		{ background-color: #7C7C7C; }
.bgrnd-hvr-scls .amazn-scl:hover, .bgrnd-hvr-scls .amazn-scl:focus		{ background-color: #F99000; }
.bgrnd-hvr-scls .ebay-scl:hover, .bgrnd-hvr-scls .ebay-scl:focus		{ background-color: #B39212; }
.bgrnd-hvr-scls .etsy-scl:hover, .bgrnd-hvr-scls .etsy-scl:focus		{ background-color: #F1641E; }
.bgrnd-hvr-scls .pypl-scl:hover, .bgrnd-hvr-scls .pypl-scl:focus		{ background-color: #2555C6; }

/* Socials FA Icon Colours */
.wbst-scl .icon		{ color: #18992C; }
.fcbk-scl .icon		{ color: #376ACC; }
.twtr-scl .icon		{ color: #00ACED; }
.insta-scl .icon	{ color: #A929D7; }
.pntrst-scl .icon	{ color: #B81621; }
.tmblr-scl .icon	{ color: #4A75A6; }
.ytube-scl .icon	{ color: #DF1C31; }
.twtch-scl .icon	{ color: #9147FF; }
.steam-scl .icon	{ color: #327491; }
.wrdprs-scl .icon	{ color: #2184B0; }
.lnkdn-scl .icon	{ color: #0A66C2; }
.drbl-scl .icon		{ color: #D74579; }
.cdpen-scl .icon	{ color: #5D6679; }
.gthub-scl .icon	{ color: #7C7C7C; }
.amazn-scl .icon	{ color: #F99000; }
.ebay-scl .icon		{ color: #B39212; }
.etsy-scl .icon		{ color: #F1641E; }
.pypl-scl .icon		{ color: #2555C6; }

/* Socials Background Hover Effect Hover & Focus State Colours */
.bgrnd-hvr-scls .scl:hover .icon, .bgrnd-hvr-scls .scl:focus .icon	{ color: #FFFFFF; }