/* CSS Document */
.welcome-to-pnp-text {
    margin-bottom: 0px ;
    font-size: 22px ;
    font-weight: 600 ;
    color: #01365b ;
    margin-top: 5px;

}

header nav > article > .btn-group > a span.small-n {text-transform: lowercase!important;}

strong { font-weight:bold!important}


.banner-intro {font-size: 45px;
    color: #fff;
    border-bottom: 2px solid #fff;
    margin-bottom: 20px;
    line-height: 1.2;
    padding-bottom: 20px;
    text-transform: uppercase;}

.list{margin:1em 0;padding:0;margin-left: 0px;}
.list li{list-style-type:none;padding-left: 15px;position:relative;line-height: 1.4;}
.list li:before{content: "";position: absolute;top: 9px;left: 0;width: 5px;height: 5px;background: #00294b;border-radius: 50%;}

button.toggleBtn{
    width: fit-content;
    color: #3378bc;
    border: 2px solid #3378bc;
}
button.toggleBtn:hover{
    background-color: #01365B;
}
.list-blue-grey{margin:1em 0;padding:0;margin-left: 0px;}
.list-blue-grey li{list-style-type:none;padding-left: 15px;position:relative;line-height: 1.4; color: #787776;}
.list-blue-grey li:before{content: "";position: absolute;top: 9px;left: 0;width: 5px;height: 5px;background: #00294b;border-radius: 50%;}


.listNum{margin:1em 0;padding:0;margin-left: 15px;}
.listNum li{padding-left: 15px;position:relative;line-height: 1.4;margin-bottom: 10px;}
/*HOME PAGE
-------------*/
.margin-13L{margin-left: 13px;}
.responsive-banner{display:none;}
.responsive-center{display:block;}
.investor-suite-sec{background:#fff;/*border:1px solid #707070*/box-shadow: 1px 3px 6px rgb(15 37 63 / 20%);padding:35px;margin-right: 18px;min-height: 100%;}
.spn-algn {
    /* position: relative; */
    top: -7px;
    top: 37%!important;
}
.grp-overview-bord{border-bottom: 1px dashed #808080;margin-top:25px;}
.investor-suite-sec h2{color:#003359;font-size:26px;font-weight: 400;height: 100%;}
.read-more-icon{margin-top:25px;color:#003359;}
.read-more-icon:before {	
    content: "\e93c";
    font-size: 10px;
    font-weight: 600;
    position: absolute;
    width: 20px;
    height: 20px;
    padding: 2px 5px 3px 4px;
    border: 2px solid #003359;
    font-family: 'icomoon';
    color: #003359;
    top: 5px;
    margin-right: 10px;
    transition: .3s all;
    left: 0;
}

.corporate-strategy-banner {background: url(https://www.picknpayinvestor.co.za/images/banner/banner-corporate-strategy.jpg) no-repeat;}
.main-banner-bg {background-size:100%}
.home-banner {background: url(https://www.picknpayinvestor.co.za/images/banner/home-pnp-banner.jpg) no-repeat;}

.results-pnp-banner{background: url(https://www.picknpayinvestor.co.za/images/banner/results-pnp-banner.jpg) no-repeat; background-size:100%;background-position: center;}

.people-planet-section{background:url("https://www.picknpayinvestor.co.za/images/cover-flowers.jpg") no-repeat;/*background-position: 450px;*/position: relative;background-position:right;min-height:486px;margin-bottom: 60px; margin-top: 30px}
/*.people-planet-section:before{content:'';position:absolute;width:568px;height:487px; background:#83C4BD;border:8px solid #fff;}*/
.people-planet-info {
    height: 487px;
    color: #fff;
    background: unset;
    border: unset;
    position: relative;
    padding: unset;
}

.people-planet-info p {
    font-size: 45px;
    color: #003359;
    font-family: 'Panton';
    font-weight: 500;
    text-align: left;
    padding: 20px 20px 20px 20px;
    line-height: 1.2;
    top: 50%;
    position: absolute;
    transform: translate(0, -50%);
    border-bottom: 2px solid #fff;
    padding-left: 0;
}



.people-planet-bord{ padding: 0; margin: 0 auto;}
.intro{font-size:22px;color:#83C4BD;font-family: 'Arvo', serif;font-weight:600;margin-top:0px;margin-bottom: 0;}
.intro-med{font-size:20px;color:#003359;font-family:'Panton';font-weight:normal;margin-top:15px;}
.intro-sml{font-size:20px;color:#fff;margin: 36px 0px 60px 0px;}
.key-sus-commitments{font-size:22px;color:#003359;font-family: 'Arvo', serif;font-weight:normal;/* margin-top:30px; *//*position:relative;left: 20%;top: 25px;*/}
.key-sus-commitments-sub{top:0;}
/*.key-sus-commitments img{padding: 0px 20px 0px 15px;}*/
.lft-images{position:absolute;left:0px}
.wrapper-sus-esg{background:#83C4BD;}
.switch-white{color:#fff !important}

.investor-heading{font-size: 30px;color:#003359;font-weight:600;}

.hm-button{border:2px solid #fff;text-decoration: none;color: #fff;padding: 7px 20px 5px 20px;	font-size: 18px;background: rgba(0,50,105,0);
position: relative;	font-weight: 500;	margin: 0px 0 20px 0;border-radius: 10px; display:inline-block;width:300px}
.hm-button i{float: right; position: relative;  right: 15px; color: #fff; -moz-transition: all 0.3s ease;  -o-transition: all 0.3s ease;  -webkit-transition: all 0.3s ease;   transition: all 0.3s ease;   top: 3px;}


.hm-button-investor{border:2px solid #AE303C;text-decoration: none;color: #AE303C;padding: 7px 20px 5px 20px;font-size: 18px;position: relative;font-weight: 500;margin: 0px 0 30px 0;border-radius: 10px;width: 280px;display:inline-block;/*transition: all 0.3s ease;  */ transition: .3s all;}
.hm-button-investor i{float: right; position: relative;  right: 15px; color: #AE303C; -moz-transition: all 0.3s ease;  -o-transition: all 0.3s ease;  -webkit-transition: all 0.3s ease;   transition: all 0.3s ease;   top: 3px;}
.hm-button-investor a:visited{color:#AE303C;}

.hm-button-investor:hover{color: #fff;background:#AE303C;text-decoration:none;text-decoration: none;transition: all 0.3s ease;}
.hm-button-investor:hover i{right: 10px;transition:  all 0.5s ease;color: #fff}
.hm-button-investor a{text-decoration: none;color:#AE303C;font-size:18px; }

.button-investor{border:2px solid #3378BC;text-decoration: none;color: #3378BC;padding: 7px 45px 5px 20px;font-size: 18px;position: relative;font-weight: 500;margin: 0px 0 30px 0;border-radius: 10px;display:inline-block;background: #fff;transition: 0.5s ease-in-out;}
.button-investor i{position: absolute;right: 23px;color: #3378BC;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;-webkit-transition: all 0.3s ease;transition: all 0.5s ease; top: 50%; transform: translateY(-50%);}
.button-investor a:visited{color:#3378BC;}
.button-investor:hover{color: #fff!important;background:#3378BC;text-decoration:none;text-decoration: none;transition: 0.5s ease-in-out;}
.button-investor:hover i{right: 10px; transition: 0.5s ease-in; color: #fff}

.grey-bg{padding: 50px 0; background: #F8F8F8}
		.case-block{padding: 20px 20px 20px 65px; border: 1px solid #003359; border-radius: 0px 15px 15px 15px; background: #fff; position: relative; height: 100%}
		.case-block img{ position: absolute; top: 0; left: 0;}
		.cmargin-40B{margin-bottom: 40px!important}


ul.social-block-align{position: relative;margin-left: 0px;padding-left: 0px;float: right;left: 20px}

.hm-button a:link{text-decoration: none;  color: #fff;}
.hm-button a:link, a:visited{text-decoration: none; }
.hm-button:hover i{right: 10px; transition: 0.5s ease-in; color: #fff}
.hm-button:hover {color: #fff;background:#96CDC7;text-decoration: none;}
.button-investor:hover{color: #3378BC;}


.align-links-ft{float: right;}
.bg-blue-glance {
    background: #01365B;
    padding: 50px;
    margin-bottom: 60px;
}
.main-banner-bg{position:relative;min-height:460px; background-size: cover;}

.banner-bkr{ position:relative;/* padding:30px;padding-left: 0;*/    padding:110px 30px 40px 0px;}
/*.main-banner-bg:before{ position:absolute; content:''; height: 100%;width: 39.4%;background:rgba(1,54,91, 0.9); left:0px; top:0; padding:30px}*/
.banner-bkr-longer{padding:40px 30px 40px 0px!important;}


.home-bigintro{ font-size:45px; color:#fff; border-bottom:2px solid #fff; margin-bottom:20px;line-height: 1.4;padding-bottom: 20px;text-transform:uppercase;}
.switch-white{ color:#fff!important}
.home-btn{color: #fff; list-style: none; margin-bottom: 35px; padding: 8px 0 8px 15px; font-size:16px; position: relative;display: inline-block; border: 2px solid #fff; width: 305px; margin-right:10px; margin-top: 20px; border-radius:10px;transition: .3s all;}
.home-btn:hover{background: #AE303C; color: #fff;border:2px solid #fff;}
.home-btn:hover i{right: 10px; transition: 0.5s ease-in; color: #fff}
.home-btn i {float: right;position: relative;right: 15px;color: #fff;-moz-transition: all 0.3s ease;  -o-transition: all 0.3s ease;    -webkit-transition: all 0.3s ease;   transition: all 0.3s ease; top: 3px}

.switch-red{ color:#BE1D37!important}
/*.social-block .youtube-icon:hover{color:#FF0000!important;transition: 0.3s ease;}
.twitter-icon:hover{olor: #1da0f2!important;}
.fb-icon:hover{}*/
/*.read-more-icon:hover:before{font-weight:600;transition: all 0.3s ease;color:#AE303C;border: 2px solid #AE303C;}*/
.read-more-icon:hover{color:#AE303C;/* transform: scale(1.1);transition: .3s all;*/}
.read-more-icon{transition: .3s all; position: relative;padding-left: 30px;
}

/*.read-more-icon:hover:before{color:#AE303C;-webkit-transform: scale(1.1);transform: scale(1.1);transition: .3s all; padding:6px}*/

.download-button{border: 2px solid #4775b7;text-decoration: none;color: #4775b7;padding: 10px 96px 10px 20px;font-size: 18px;background: rgba(0,50,105,0);position: relative;font-weight: 500;margin: 0px 0 20px 0;border-radius: 10px;display: inline-block;transition:0.5s ease-in-out}
.download-button i{    position: absolute;
right: 13px;

-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
top: 10px;}

.download-button i img{width:20px}

a.download-button:hover {
color: #3675BC;
text-decoration: none;
}

.download-button:hover{background: #DAE0F1;transition:0.5s ease-in-out}


.download-button span {position: absolute;right: 51px;top: 18%;}
.investor-col {background: #fff;box-shadow: 1px 3px 6px rgb(15 37 63 / 20%);padding: 35px 20px 75px;margin-right: 0px;height: 100%;}
.investor-col-adjust {padding-bottom: 5px!important;}
.investor-col-adjust-calendar {padding-bottom: 50px!important;}
.currentyear{font-size:65px;color:#DAE0F1;    line-height: 1;}
.investor-col img{    position: absolute;
right: 38px;
bottom: 22px;}
		.finrow{background: #E6E7E8;    color: #002F67;border-top:1px solid #002F67;border-bottom:1px solid #002F67;    padding: 8px 3px!important;}
.finrow1{background: #01365b !important;  color: #fff;border-top:2px solid #000;border-bottom:2px solid #000;    padding: 8px 3px!important; font-weight: 500}

.dashedrow{padding-bottom:15px;margin-bottom:15px;border-bottom:2px dashed #3378BC}
.dashedrow p{margin-bottom:0px;}
.scroll-block>div:last-of-type{border-bottom:none;    margin-bottom: 0;    padding-bottom: 0;}
.scroll-block>div:first-of-type{margin-top: 13px;}

.scroll-block{height: 299px;overflow: auto;padding-right: 15px;}

.scroll-block::-webkit-scrollbar {
    width: 4px;
    border-radius: 31px;
    /* background-color: #3378bc; */
    border-left: 0;
}

.scroll-block::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}

.scroll-block::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 10px rgb(0 0 0 / 50%);
    background-color: #dae0f1;
}
/*::-webkit-scrollbar{width:1px;border-left:1px solid #ff;}
::-webkit-scrollbar-thumb{background-color:#fff;}
*/

#accordion .accordion-button{display: block;color: #3378bc;font-size: 18px;/* font-weight: 600; */width: 100%;text-align: left;position: relative;text-transform: uppercase;background: none;outline: none;padding: 15px 15px;border: 2px solid #3378bc;padding-right: 65px;border-radius: 10px;}
#accordion .accordion-button:not(.collapsed){background: #01365b;color:#fff}
#accordion .accordion-button:not(.collapsed) i{ color:#fff}
#accordion .accordion-button i{ position: absolute; left: 15px; border-radius: 50%; font-style: normal;  color: #F05033; text-align: center; font-size: 57px; top: 2px; font-weight: 700 }
#accordion .accordion-body{  padding:30px 40px; }
#accordion .accordion-button:before{content:url("https://www.picknpayinvestor.co.za/images/icons/close-icon.svg");right:9px;top:50%;width:35px;height:35px;position:absolute; transform: translateY(-50%);}
#accordion .accordion-button.collapsed:before{content:url("https://www.picknpayinvestor.co.za/images/icons/open-icon.svg");right:9px;top:50%;width:35px;height:35px;position:absolute;  transform: translateY(-50%);}
.caption-intro{
padding: 64px 0;
text-align: center;
color: #01365b;
font-size: 22px;
}

.fin-tbl tr:hover {background:#E6E7E8; } /*TABLE ON HOVER BACKGROUND COLOUR AND TEXT COLOUR*/
tr.no-hover:hover {color:#000!important;} /*TABLE ON HOVER HIGHLIGHTED COLOUMN TEXT COLOUR TO REMAIN STAT*/
.fin-tbl {width:100%; margin:0 0 0 0; padding:0 0px;margin-bottom:5px} /*THE COMPLETE TABLE TO BE GIVEN 100% WIDTH; O MARGINS AND O PADDING*/
.fin-tbl tr td {padding: 0px 7px 0px 3px;} /*EACH CELL IN TABLE TO HAVE A PADDING OF 3 AROUND CONTENT*/
.fin-tbl th {background-color: #e6e7e8;padding: 0px 7px 0px 3px;line-height:1.4;font-weight: normal;} /*THE HIGHLIGHTED COLUMN BACKGROUND COLOUR; TEXT COLOUR; PADDING AND A FONT WEIGHT IF NEEDED*/
.fin-tbl td[width="1"] { padding:3px}
.finheader{background:  #003878;color:#fff;}
.fin-tbl ul{margin-top:0}

.finthin{border-bottom: 1px solid #002F67;}
.finthick{border-bottom: 2px solid #002F67;}

ul.list li ul  {    margin-left: -39px;}
ul.list li ul li:after {content: '';position: absolute;left: 0px;top: 9px;width:8px;height:1px;background-color: #003878;}
ul.list li ul li:before{content:none;}

/*TABBED ACCORDION*/
ul.tabs {width:100%;padding:1em 0 0 0;margin-bottom:0 !important;display: flex;}
ul.tabs li {cursor: pointer;padding: 13px 11px;border-bottom:none;text-decoration:none;background: #dae0f1;color: #003359;list-style-type:none;border-top-left-radius: 10px;border-top-right-radius: 10px;text-align: center;margin-right: 1%;flex-basis: 2;-ms-flex-positive: 1;flex-grow: 1;font-size: 16px;}
ul.tabs li:last-of-type {
margin-right: 0%;
}
ul.tabs li:hover {background: #00294b;color:#fff}
ul.tabs li.active {background:#fff;background: #00294b;color: #ffffff;font-weight:bold;border-radius: 10px;}
.tab-container {clear:both;float:left;width:99.7894737%;background:#fff;overflow:auto;} /*948 divide 950 = 99.7894737%*/
.tab-drawer-heading {display:none;}
.tab-drawer-content {padding:1em;display:none;}

.white-blockbg{background:#fff;padding:30px 40px;position: relative;padding-bottom: 0;}
.zips{position:relative}
.zips label { color: #002F67;font-weight:bold;    position: relative;    padding-bottom: 38px;    padding-left: 15px;}
.zips label span {display:block;color:#787776;font-weight:normal;    position: absolute;}

.zips label.recording {     padding-left: 31px;}
.zips label.recording img{    position: absolute;    left: -2px;}
.zips  button.downloadfile {
-webkit-appearance: button;
outline: none;
border: 1px solid #fff;
/* float: right; */
position: absolute;
right: 13px;
background: #fff;
cursor: pointer;
bottom: 114px;
}

button	span{ padding-right: 15px; color: #BE1D37;/*opacity:0;*/transition: 2s ease-in-out}
button:hover	span{transition: 2s ease-in-out;opacity:1;}
.cal-block div:nth-last-of-type(1) .dashedrow{ border-bottom:none}
.investor-col a{color: inherit!important; font-weight: inherit!important;}
.investor-col a:hover{color: #be1d37!important;}

.zips input[type='checkbox'] {	margin-top: -30px;}
.zips input[type='checkbox'] {width: 13px;height: 13px;margin: 0;margin-right: 1px;display: block;float: left;position: relative;cursor: pointer;border-radius:10px;margin-top: 10px;}
.zips input[type='checkbox']:after {/* content: ""; */vertical-align: middle;text-align: center;line-height: 13px;position: absolute;cursor: pointer;height: 15px;width: 15px;left: -2px;top: -2px;font-size: 16px;border: 1px solid  #002F67;/* border-radius: 50%; */content: "";font-family: 'Linearicons';color:  #002F67;padding-top: 4px;background: #fff;transition: 1s ease;}

.zips input[type='checkbox']:checked:after {background:  #002F67;color: #fff;transition: 1s ease;}
	.dashedrow a{color:inherit!important;font-weight:inherit!important}

/*RESETS*/
.no-margin{margin: 0!important;}
.no-marginT{margin-top: 0!important;}
.no-marginB{margin-bottom: 0!important;}
.no-marginL{margin-left: 0!important;}
.no-marginR{margin-right: 0!important;}

.no-padding{padding: 0!important;}
.no-paddingT{padding-top: 0!important;}
.no-paddingB{padding-bottom: 0!important;}
.no-paddingL{padding-left: 0!important;}
.no-paddingR{padding-right: 0!important;}
.no-paddingB5{padding-bottom: 5px!important;}
.no-paddingT5{padding-top: 5px!important;}

.padding-30{padding: 30px;}
.padding-40{padding: 40px 20px;}




.padding-50{padding: 50px 0px;}
.padding-30L{padding-left: 30px!important;}
.padding-30R{padding-right: 30px!important;}
.padding-30T{padding-top: 30px!important;}
.padding-30B{padding-bottom: 30px!important;}

.padding-20{padding: 20px!important;}
.padding-20L{padding-left: 20px!important;}
.padding-20R{padding-right: 20px!important;}
.padding-20T{padding-top: 20px!important;}
.padding-20B{padding-bottom: 20px!important;}

.padding-15{padding: 15px!important;}
.padding-15L{padding-left: 15px!important;}
.padding-15R{padding-right: 15px!important;}
.padding-15T{padding-top: 15px!important;}
.padding-15B{padding-bottom: 15px!important;}

.margin-30{margin: 30px!important;}
.margin-30L{margin-left: 30px!important;}
.margin-30R{margin-right: 30px!important;}
.margin-30T{margin-top: 30px!important;}
.margin-40T{margin-top: 40px!important;}
.margin-30B{margin-bottom: 30px!important;}
.margin-60B{margin-bottom: 60px!important;}

.margin-20{margin: 20px!important;}
.margin-20L{margin-left: 20px!important;}
.margin-20R{margin-right: 20px!important;}
.margin-20T{margin-top: 20px!important;}
.margin-20B{margin-bottom: 20px!important;}

.margin-25{margin: 25px!important;}
.margin-25L{margin-left: 25px!important;}
.margin-25R{margin-right: 25px!important;}
.margin-25T{margin-top: 25px!important;}
.margin-25B{margin-bottom: 25px!important;}

.margin-15{margin: 15px!important;}
.margin-15L{margin-left: 15px!important;}
.margin-15R{margin-right: 15px!important;}
.margin-15T{margin-top: 15px!important;}
.margin-15B{margin-bottom: 15px!important;}

.margin-10B{margin-bottom: 10px!important;}
.margin-10T{margin-top: 10px!important;}

.margin-5{margin: 5px!important;}
.margin-5L{margin-left: 5px!important;}
.margin-5R{margin-right: 5px!important;}
.margin-5T{margin-top: 5px!important;}
.margin-5B{margin-bottom: 5px!important;}
.no-marginB{ margin-bottom:0!important;}

.no-margB{ margin-bottom:0!important;}


.rgt {float: right;}

.commitment-highlights-blocks strong{font-size: 40px; }
.commitment-highlights-blocks p{font-size: 18px; padding-top: 12px;    font-family: 'Arvo', serif; color:#002F67}
					
.switch-turquoise {color:#83C4BD!important}
					
.border-bottom-comm{border-top:2px solid #003359}
					

/**corporate social start**/
.corporate-list {
padding: 0px;
margin: 0px;
}

.corporate-list li {
list-style: none;
font-size: 20px;
padding: 15px 0px;
border-bottom: 1.5px dashed #4677B7;
}

.focus-area-blocks {
border: 1px solid #003359;
border-radius: 0px 30px;
padding: 30px 20px;
height: calc(100% - 20px);
margin-bottom: 20px;
}

.focus-area-blocks p {
font-size: 18px;
font-weight: 500;
color: #003359;
}

.focus-area-blocks p:last-child {
margin-bottom: 0px;
}

.focus-area-blocks .focus-number {
font-size: 65px;
color: #DAE0F1;
}

.corporate-model-mobile-icons {
display: none
}

.corporate-model-container {
position: relative;
}

.corporate-model-container .corporate-model-btn {
transition: 0.6s ease-in-out;
background-color: #01365B;
color: #FFF;
width: 30px;
height: 30px;
border-radius: 50%;
position: absolute;
cursor: pointer;
font-size: 16px;
}
.corporate-model-info .icon-cross{    position: absolute;    right: 22px;    top: 17px;    font-size: 22px;    color: #ad0529;}
.corporate-model-container .corporate-model-btn:hover,
.corporate-model-btn-active {
background-color: #6DC6BD !important;
border: solid 1.5px #01365B !important;
width: 35px !important;
height: 35px !important;
}

.corporate-model-container .corporate-model-btn span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}



.corporate-model-btn::after {
content: "";
width: 0%;
height: 1px;
background-color: #003359;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: 0.6s ease-in-out;
}



.corporate-model-info {
display: none;
width: 33%;
position: absolute;
z-index: 99;
}

.corporate-model-info-active {
display: block;
}

.corporate-model-info .corporate-model-info-content {
border: 1px solid #003359;
border-radius: 0px 30px;
padding: 30px 20px;
font-size: 16px;
text-align: left;
background-color: #FFF;
}

.corporate-model-info .corporate-model-info-content p:first-child {
font-size: 18px;
font-weight: 600;
color: #003359;
}

.corporate-model-info .corporate-model-info-icons {
display: inline-block;
margin-left: auto;
padding: 5px;
background-color: #003359;
float: right;
border-radius: 0px 0px 15px 15px;
}

#corporate-model-info-1 {
bottom: 0px;
left: 0px
}


#corporate-model-btn-1 {
bottom: 22%;
left: 37%;
}

#corporate-model-btn-1.corporate-model-btn-active::after {
width: 200%;
left: -200%;
}

#corporate-model-info-2 {
top: 0px;
left: 0px
}

#corporate-model-btn-2 {
top: 21%;
left: 42%;
}

#corporate-model-btn-2.corporate-model-btn-active::after {
width: 500%;
left: -500%;
}


#corporate-model-info-3 {
bottom: 0px;
right: 0px
}

#corporate-model-btn-3 {
bottom: 22%;
right: 37%;
}

#corporate-model-btn-3.corporate-model-btn-active::after {
width: 200%;
right: -200%;
}


#corporate-model-info-4 {
top: 50%;
transform: translateY(-50%);
left: -8%;
}

#corporate-model-btn-4 {
top: 40%;
right: 68%;
}

#corporate-model-btn-4.corporate-model-btn-active::after {
width: 200%;
left: -200%;
}


#corporate-model-info-5 {
top: 50%;
transform: translateY(-50%);
right: -3%;
}

#corporate-model-btn-5 {
top: 44%;
left: 63%;
}

#corporate-model-btn-5.corporate-model-btn-active::after {
width: 200%;
right: -200%;
}


#corporate-model-info-6 {
top: 0px;
left: 0px
}

#corporate-model-btn-6 {
top: 10%;
left: 35%;
}

#corporate-model-btn-6.corporate-model-btn-active::after {
width: 500%;
left: -500%;
}


/**corporate social end**/
/*	  .esg-ov-width{width: 330px;}*/



/**page banners**/
.banner-pnp-at-a-glance	{background: url("https://www.picknpayinvestor.co.za/images/banner/at-a-glance-banner.jpg") no-repeat top right!important;}	
.banner-corporate-strategy {background: url("https://www.picknpayinvestor.co.za/images/banner-corporate-strategy.jpg") no-repeat top right!important;}	
.banner-investor-overview {background: url("https://www.picknpayinvestor.co.za/images/banner/banner-investor-overview.jpg") no-repeat top right;}
.banner-board-and-committees {background: url("https://www.picknpayinvestor.co.za/images/banner/banner-board-and-committees.jpg") no-repeat top right;}
.banner-investor-calendar {background: url("https://www.picknpayinvestor.co.za/images/banner/banner-investor-calendar.jpg") no-repeat top right!important; }
.banner-investment-case {background: url("https://www.picknpayinvestor.co.za/images/banner/banner-investment-case.jpg") no-repeat top right!important; min-height: 611px!important;}
.banner-investor-contacts {background: url("https://www.picknpayinvestor.co.za/images/banner/banner-investor-contacts.jpg") no-repeat top right;}
.banner-reports-results {background: url("https://www.picknpayinvestor.co.za/images/banner/banner-reports-results.jpg") no-repeat top right;}
.banner-sens {background: url("https://www.picknpayinvestor.co.za/images/banner/banner-sens.jpg") no-repeat top right;}
.banner-share-price {background: url("https://www.picknpayinvestor.co.za/images/banner/banner-share-price.jpg") no-repeat top right;}
.banner-our-commitment {background: url("https://www.picknpayinvestor.co.za/images/banner/banner-our-commitment.jpg") no-repeat top right!important;}
.banner-governance {background: url("https://www.picknpayinvestor.co.za/images/banner/banner-governance.jpg") no-repeat top right!important;}
.banner-small-business {background: url("https://www.picknpayinvestor.co.za/images/banner/banner-small-business.jpg") no-repeat bottom right!important;}
.banner-sustainability-reports {background: url("https://www.picknpayinvestor.co.za/images/banner/banner-sustainability-reports.jpg") no-repeat top right!important;;}
.banner-media-releases {background: url("https://www.picknpayinvestor.co.za/images/banner/banner-media-releases.jpg") no-repeat top right!important;}
.banner-contact-us {background: url("https://www.picknpayinvestor.co.za/images/banner/banner-contact-us.jpg") no-repeat top right!important;}
.page-banner-covid-19 {background: url("https://www.picknpayinvestor.co.za/images/banner/page-banner-covid-19.jpg") no-repeat top right!important;}
.page-banner-ackerman {background: #fff!important;}

/**carousel**/
.carousel-control-prev{left: 0;}
.carousel-control-next {
    right: 0;
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 40px;
    height: 40px;
}

/*.carousel-control-prev-icon {background-image: url("../images/download-previous.svg");stroke-width: 3px;}*/

.carousel-indicators li{    
	width: 11px;
    height: 11px;
    border-radius: 50%;
}

/*.carousel-control-prev-icon {opacity: 1;}*/

.carousel-control-next, .carousel-control-prev{opacity: 1!important}
/**carousel**/


.carousel-indicators li {
    background-color: #00294B;
    border: 2px solid #fff;
}


.corporate-image-curve {    border-bottom-left-radius: 35px;
    border-top-right-radius: 35px;}


.reduce-margin-bottom{margin-bottom: 10px!important;}
#banner-bkr-slide1 {padding-top: 130px!important;}

.banner-bkr-ackerman {padding: 0!important}

.people-planet-section{position: relative}
.people-planet-section:before{position: absolute; width: 46%;}
.position-relative {
    position: relative!important;
    right: 0!important;
}
.download-button-small-business{ 
	border: 2px solid #fff!important;
	color: #fff!important;
}

a.download-button-small-business:hover {
    color: #3675BC!important;
    border: 2px solid #3675BC!important;
    text-decoration: none;
}
.download-button-small-business .blue-img{display: none}
a.download-button-small-business:hover .white-img{display: none}
a.download-button-small-business:hover .blue-img{display: block}

.fin-tbl-glanse th {
    background: none!important;
    color: #3777BC!important;
}
.fin-tbl-glanse .switch-blue{color: #3777BC!important;}
.caption {color: #23201f!important; font-size: 15px; font-style: italic}


.button-download {
    border: 2px solid #4775b7;
    text-decoration: none;
    color: #4775b7;
    padding: 10px 96px 10px 20px;
    font-size: 18px;
    background: rgba(0,50,105,0);
    position: relative;
    margin: 0px 0 20px 0;
    border-radius: 10px;
    display: inline-block;
    transition: 0.5s ease-in-out;
	display: block;
	max-height: 76px;
	
}
	
.button-download a {
    font-weight: normal;
    color: #4775b7;
    position: relative;
    display: block;
	transition: 0.8s ease-in-out;
	
}
	
.button-download a:hover {
    font-size: 18.5px;
	transition: 0.8s ease-in-out;
}	
	
	
	
	
	
.button-download:hover {
    color: #3675BC;
    text-decoration: none;
    background: #DAE0F1;
    transition: 0.5s ease-in-out;	
}	

.button-download a span {
    position: absolute;
    right: -45px;
    top: 18%;
}
	
.button-download i {
    position: absolute;
    right: -84px;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    top: 5px;
}	
	
.button-download .top-button span {top: 4%!important;}	
.button-download .top-button i {top: -1px!important;}	

.no-scroll-block{
 height: unset!important; 
 overflow: unset!important; 
}

.reports-page .zips  button.downloadfile {
    border: none!important;
    background: #F8F8F8!important;
}

.results-tabs-adjust label {width: 60%!important}


body #small-n {text-transform: lowercase!important; font-weight: normal!important;}


					.readmore-text {
						margin-top: 25px;
						color: #003359;
						list-style: none;
						padding-left: 0;
					}

					.readmore-text li {
						position: relative;
						padding-left: 25px;
						margin-bottom: 15px;
					}

					.readmore-text li:before {
						content: "\e93c";
						font-size: 10px;
						font-weight: 600;
						position: absolute;
						width: 21px;
						height: 21px;
						padding: 2px;
						border: 2px solid #003359;
						font-family: 'icomoon';
						color: #003359;
						top: 3px;
						margin-right: 10px;
						transition: .3s all;
						left: -4px;
					}

					.readmore-text li p {
						color: #01365b;
						font-weight: bold;
						margin-bottom: 0;
					}

					.readmore-text li p span {
						font-weight: normal !important;
					}
					
				
					
		

	.reports-page .readmore {
				margin-top: 25px;
				color: #003359;
				list-style: none;
				padding-left: 0;
			}

			.reports-page .readmore li a span {
				font-weight: 100 !important;
				color: #23201f;
				display: block
			}

			.reports-page .readmore li {
				position: relative;
				padding-left: 25px;
				margin-bottom: 15px;
			}

			.reports-page .readmore li:before {
				content: "\e93c";
				font-size: 10px;
				font-weight: 600;
				position: absolute;
				width: 21px;
				height: 21px;
				padding: 2px;
				border: 2px solid #003359;
				font-family: 'icomoon';
				color: #003359;
				top: 3px;
				margin-right: 10px;
				transition: .3s all;
				left: -4px;
			}


            /* AT A GLANCE */
           
    .footer-block2 img {width: 30px}



@media screen and (max-width: 2560px){
	.banner-bkr{padding: 110px 0px 30px 0px;margin-right: 80px;}/*.main-banner-bg:before{width: 39.3%;}*/


}
@media screen and (max-width: 1536px){
	.main-banner-bg:before{width: 40%;} 


}

@media screen and (max-width: 1450px){
	
	

}



@media screen and (max-width: 1440px){
	.banner-bkr{padding: 50px 0px 0px 0px;margin-right: 178px;}
	.main-banner-bg:before{width: 40%!important;height: 100%;}


}

@media screen and (max-width: 1436px){
	.home-bigintro{font-size: 40px;}
}

@media screen and (max-width: 1400px){
.our-brands-copy .intro-size-reduced {
    font-size: 14px!important;
}
}



@media screen and (max-width: 1366px){.main-banner-bg:before{ width:40%;}}


@media screen and (max-width:1300px) {

    .lrg-facts-txt {
        font-size: 36px;
    }

    .txt-circle {
        padding-left: 14%;
    }

    ul.tabs li {
        min-width: 33% !important;
        margin-left: 2%;
        margin-right: 0;
    }

}


@media screen and (max-width: 1237px){
.our-brands-copy .intro-size-reduced {
    font-size: 13px !important;
}
}

@media screen and (max-width: 1200px){

    .banner-intro{font-size: 30px;}
    .our-brands-copy .intro-size-reduced {
        font-size: 12px!important;
    }
}

@media screen and (max-width:1040px){
.banner-bkr{margin-right: 0px;}
/*.main-banner-bg{background: url(../images/banner-top.jpg) no-repeat;}*/
.main-banner-bg:before{ position:absolute; content:''; height: 100%;width: 60%;background:rgba(1,54,91, 0.9); left:0px; top:0; padding:30px}
.key-sus-commitments{left: 30%;}.key-sus-commitments span{display: block;padding-left:0%;}.key-sus-commitments img{position:absolute;width:50px}.hm-button-investor{width:230px;    padding: 7px 20px 5px 8px;}.hm-button i{right: -5px}.icon-arrow-resp{top: -11px;}
.main-banner-bg {  background-size: cover; }
.main-banner-bg:before {    width: 70%;}
.home-bigintro {  font-size: 25px;}
.banner-bkr-home {margin-left: 30px;}	
	
}

@media screen and (max-width: 1024px){.main-banner-bg:before{height:100%}.margin-13L{margin-left:0px;}}



@media screen and (max-width: 1199px){
	.main-banner-bg:before {
		width: 48%!important;
	}
	
	
	
}

@media screen and (max-width: 999px){

    .main-banner-bg:before{ width:100%;}
	.scroll-block {
    height: auto;
    overflow: auto;
    padding-right: 15px;
}
	
	.investor-col {

    height: 93%;
    margin-top: 35px;
}
}

@media screen and (max-width: 991px){
    .banner-intro{padding-bottom: 10px;}


    .download-button span{float: none; margin-left: 15px; font-weight: 600; position: unset;}
    .download-button i{top: 50%; transform: translateY(-50%);}
	
	.investor-suite-sec { margin-bottom: 2em; }
		.our-brands-copy .intro-size-reduced {
			font-size: 16px!important;
		}
	.full-pageheader .welcome-to-pnp-text{margin-top:unset; font-size: 18px;margin-bottom: 0;}
.download-ht {max-height: unset!important;}
.people-planet-section:before {
    width: 100%;
}	
	
}

@media screen and (max-width:990px) {
	.case-block{height: auto; margin-bottom: 25px}
			.cmargin-40B{margin-bottom: 0px!important}
.mpa-img {
display: none;
}

.corporate-model-btn {position: relative !important;left: 0px !important;right: 0px !important;top: 0px !important;bottom: 0px !important;display: flex !important;transform: none !important;width: 100% !important;border-radius: 0px 15px 0px 0px !important;text-align: left;height: auto !important;background-color: #003359 !important;border: 1px solid #003359;margin-top: 20px;padding: 10px 20px;padding-right: 72px;}

.corporate-model-container .corporate-model-btn span {position: relative;top: 0%;left: 0%;transform: none;font-size: 30px;color: #FFF;font-size: 24px;}

.corporate-model-mobile-icons {
display: block;
margin-left: auto;
}

.corporate-model-mobile-icons-close {width: 25px;height: 25px;display: inline-block;border: solid 2px #FFF;border-radius: 5px;margin-left: 20px;position: absolute;top: 13%;transition: 0.6s ease-in-out;right: 31px;}

.corporate-model-info-icons {
display: none !important;
}

.corporate-model-info {
width: 100%;
position: relative;
z-index: 99;
top: 0px !important;
bottom: 0px !important;
left: 0px !important;
right: 0px !important;
transform: none !important;
}

.corporate-model-info .corporate-model-info-content {
border-radius: 0px 0px 30px 30px;
}

.corporate-model-container .corporate-model-btn:hover,
.corporate-model-btn-active {
background-color: #6DC6BD !important;
border: solid 1.5px #01365B !important;
width: 100% !important;
height: auto !important;
}

.corporate-model-btn::after {
display: none;
}

.corporate-model-mobile-icons-close::before {
content: "";
height: 10px;
width: 2px;
background-color: #FFF;
position: absolute;
top: 50%;
left: 3px;
transform: rotate(45deg) translateY(-50%);
}

.corporate-model-mobile-icons-close::after {
content: "";
height: 10px;
width: 2px;
background-color: #FFF;

position: absolute;
top: 50%;
right: 3px;
transform: rotate(-45deg) translateY(-50%);
}

.corporate-model-btn-active .corporate-model-mobile-icons-close {
transform: rotate(180deg);
}
	
.banner-bkr-home {margin-left: unset;}	
	
	
}


 .custom-row{
      --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1* var(--bs-gutter-y));
    margin-right: calc(-.5* var(--bs-gutter-x));
    margin-left: calc(-.5* var(--bs-gutter-x));
	margin:15px 15px;
 }
        .custom-col-6 {
        flex: 0 0 auto;
        width:50%;
    }
    @media screen and (max-width:991px){
        .custom-col-6 {
        flex: 0 0 auto;
        width:100%;
    }
    }

@media screen and (max-width:900px) {

    ul.tabs li.active {
        background: #E6E7E7 !important;
        color: #ffffff;
        font-weight: bold;
        border-radius: 10px;
        text-align: center;
    }


    ul.tabs li {
        cursor: pointer;
        padding: 10px 13px !important;
        border-bottom: none;
        text-decoration: none;
        background: #F8F8F8 !important;
        color: #01365B !important;
        list-style-type: none;
        border-radius: 10px;
        text-align: left;
        flex: 0 0 24.2%;
        margin-right: 6%;
        min-width: 30% !important;
        margin-left: 0%;
        text-align: center;
    }

    .format-bdr {

        margin-top: 10px;
    }

    .mrg-tp-lst {
        margin-top: 0px;
    }

}
/* END OF AAG */

@media screen and (max-width:768px){.key-sus-commitments span{display: block;padding-left:0%;}.key-sus-commitments img{position:absolute;width: 42px}.people-planet-info{ height: 238px;  border: none;}.responsive-banner{display:block}.people-planet-section{min-height: 178px;margin-top: 0px;}.people-planet-info p{font-size:30px;}.cont-responsive{padding-left:0;}.mb-5-res{margin-bottom: 1rem!important;}.margin-60B{margin-bottom:30px!important;}.intro-res{margin-top:30px;}ul.social-block-align{left:0;}.main-banner-bg:before{height:100%}
		
    .banner-intro{font-size: 26px;}
.tabs {display: none!important;}
.tab-drawer-heading {background:#edece8;color: #00294b;margin:0;padding:.5em;display: block;cursor: pointer;-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;font-weight: 300;
       font-size: 20px;
    border-radius: 15px;
    margin-bottom: 15px;margin-bottom:15px}
.d-active {background-color: #00294b;color: #fff;}
.tab-drawer-heading:before {float:right; content:'+';speak: none;padding-right:.25em}
.d-active:before {float:right; content:'-';speak: none;padding-right:.25em}
}

@media screen and (max-width:767px){
	.download-button {padding: 7px 24px 26px 20px;display: block;}
	.download-button span {
    position: relative;
    right: 0;
    top: 45%;
}
	
	.spn-algn {
    /* position: relative; */
    top: -7px;
    top: 45%!important;
}
	
	.download-button i {
    position: absolute;
    }
	
	@media screen and (max-width: 767px){
		.button-download {
	     max-height: unset; 
		}
	}	
	
	

}















@media screen and (max-width:700px){
.hm-button,.hm-button-investor{ width:auto; display:block}
.rgt{float: none;}
ul.social-block {  float: left;  margin-top: 20px;padding-left: 0;}
.lft-images{position: relative;}.key-sus-commitments{top: -51px;left: 23%;margin-top: 15px;}.responsive-center{display:block}.responsive-banner{display:block}.people-planet-section{min-height: 187px;margin-top: 20px;}.people-planet-info p{font-size:24px;padding: 20px 20px 20px 0px;}.people-planet-info{height: 245px;padding: 10px 20px 20px 20px;}.cont-responsive{padding-left:0;}.people-planet-bord{padding-top:0;margin-right: 40px;}.investor-suite-resp{margin-top:20px;}.investor-suite-sec{margin-right:0;}}


@media screen and (max-width:602px) {
    .full-pageheader .welcome-to-pnp-text {
        font-size: 16px!important; margin-bottom: 0;
    }
    ul.tabs li {
        display: none;
    }

    .lrg-facts-txt {

        padding-top: 0px;
    }

    .lblue-lg-txt {
        font-size: 30px;

    }

}

@media screen and (max-width: 600px) {
	.bg-blue-glance {  padding:20px; padding-left:0}

	.zips  button.downloadfile {position:relative}

}


@media screen and (max-width:425px){.img-icon{margin-top:25px;}#accordion .accordion-button.collapsed.mob-icon:before{top:28px!important}.mob-mt-60{margin-top: 60px!important;} .footer-block2 img{margin-bottom: 15px;}}

@media screen and (max-width:375px){.lft-images{right: 39px;}.footer-block2 p{font-size: 15px;}.people-planet-info p{font-size:24px;}.people-planet-info{height: 245px;}.responsive-banner{display:block}.people-planet-section{min-height: 188px;}.people-planet-bord{padding-top:0;}.download-button {
    padding: 7px 38px 26px 15px;}}

@media screen and (max-width:320px){.key-sus-commitments{font-size: 18px;}.people-planet-section{min-height: 192px;margin-top: 20px;}#accordion .accordion-body {
    padding: 25px 25px;}.mob-mt-2{margin-top:1rem!important;}.mob-mt-60{margin-top: 60px!important;}}

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){

  html,
  body{
    width:100%;
    overflow-x:hidden;
  }
}