@font-face {
font-family:'Lato';
font-style:normal;
font-weight:300;
src:local("Lato Light"), local("Lato-Light"), url(https://fonts.gstatic.com/s/lato/v13/IY9HZVvI1cMoAHxvl0w9LVKPGs1ZzpMvnHX-7fPOuAc.woff2) format("woff2");
unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF
}
@font-face {
font-family:'Lato';
font-style:normal;
font-weight:300;
src:local("Lato Light"), local("Lato-Light"), url(https://fonts.gstatic.com/s/lato/v13/22JRxvfANxSmnAhzbFH8PgLUuEpTyoUstqEm5AMlJo4.woff2) format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215
}
@font-face {
font-family:'Lato';
font-style:normal;
font-weight:400;
src:local("Lato Regular"), local("Lato-Regular"), url(https://fonts.gstatic.com/s/lato/v13/8qcEw_nrk_5HEcCpYdJu8BTbgVql8nDJpwnrE27mub0.woff2) format("woff2");
unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF
}
@font-face {
font-family:'Lato';
font-style:normal;
font-weight:400;
src:local("Lato Regular"), local("Lato-Regular"), url(https://fonts.gstatic.com/s/lato/v13/MDadn8DQ_3oT6kvnUq_2r_esZW2xOQ-xsNqO47m55DA.woff2) format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215
}
@font-face {
font-family:'Lato';
font-style:normal;
font-weight:700;
src:local("Lato Bold"), local("Lato-Bold"), url(https://fonts.gstatic.com/s/lato/v13/rZPI2gHXi8zxUjnybc2ZQFKPGs1ZzpMvnHX-7fPOuAc.woff2) format("woff2");
unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF
}
@font-face {
font-family:'Lato';
font-style:normal;
font-weight:700;
src:local("Lato Bold"), local("Lato-Bold"), url(https://fonts.gstatic.com/s/lato/v13/MgNNr5y1C_tIEuLEmicLmwLUuEpTyoUstqEm5AMlJo4.woff2) format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215
}
@font-face {
font-family:'Merriweather';
font-style:normal;
font-weight:300;
src:local("Merriweather Light"), local("Merriweather-Light"), url(https://fonts.gstatic.com/s/merriweather/v15/ZvcMqxEwPfh2qDWBPxn6nrMRY-O9-Xp5ppZeqcQcMH8.woff2) format("woff2");
unicode-range:U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F
}
@font-face {
font-family:'Merriweather';
font-style:normal;
font-weight:300;
src:local("Merriweather Light"), local("Merriweather-Light"), url(https://fonts.gstatic.com/s/merriweather/v15/ZvcMqxEwPfh2qDWBPxn6nhBw1OMgj265uIpoXHqn6zY.woff2) format("woff2");
unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}
@font-face {
font-family:'Merriweather';
font-style:normal;
font-weight:300;
src:local("Merriweather Light"), local("Merriweather-Light"), url(https://fonts.gstatic.com/s/merriweather/v15/ZvcMqxEwPfh2qDWBPxn6nrsKtFnhOiVZh9MDlvO1Vys.woff2) format("woff2");
unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF
}
@font-face {
font-family:'Merriweather';
font-style:normal;
font-weight:300;
src:local("Merriweather Light"), local("Merriweather-Light"), url(https://fonts.gstatic.com/s/merriweather/v15/ZvcMqxEwPfh2qDWBPxn6nkZRWJQ0UjzR2Uv6RollX_g.woff2) format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215
}
@font-face {
font-family:'Merriweather';
font-style:normal;
font-weight:400;
src:local("Merriweather"), local("Merriweather-Regular"), url(https://fonts.gstatic.com/s/merriweather/v15/RFda8w1V0eDZheqfcyQ4EA7aC6SjiAOpAWOKfJDfVRY.woff2) format("woff2");
unicode-range:U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F
}
@font-face {
font-family:'Merriweather';
font-style:normal;
font-weight:400;
src:local("Merriweather"), local("Merriweather-Regular"), url(https://fonts.gstatic.com/s/merriweather/v15/RFda8w1V0eDZheqfcyQ4EBdwxCXfZpKo5kWAx_74bHs.woff2) format("woff2");
unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}
@font-face {
font-family:'Merriweather';
font-style:normal;
font-weight:400;
src:local("Merriweather"), local("Merriweather-Regular"), url(https://fonts.gstatic.com/s/merriweather/v15/RFda8w1V0eDZheqfcyQ4EIjoYw3YTyktCCer_ilOlhE.woff2) format("woff2");
unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF
}
@font-face {
font-family:'Merriweather';
font-style:normal;
font-weight:400;
src:local("Merriweather"), local("Merriweather-Regular"), url(https://fonts.gstatic.com/s/merriweather/v15/RFda8w1V0eDZheqfcyQ4EBampu5_7CjHW5spxoeN3Vs.woff2) format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215
}
@font-face {
font-family:'Merriweather';
font-style:normal;
font-weight:700;
src:local("Merriweather Bold"), local("Merriweather-Bold"), url(https://fonts.gstatic.com/s/merriweather/v15/ZvcMqxEwPfh2qDWBPxn6nlPfeBX0b_nUXzRxYCltCF0.woff2) format("woff2");
unicode-range:U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F
}
@font-face {
font-family:'Merriweather';
font-style:normal;
font-weight:700;
src:local("Merriweather Bold"), local("Merriweather-Bold"), url(https://fonts.gstatic.com/s/merriweather/v15/ZvcMqxEwPfh2qDWBPxn6noS3435hDhFFCA6hA_HcfZQ.woff2) format("woff2");
unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116
}
@font-face {
font-family:'Merriweather';
font-style:normal;
font-weight:700;
src:local("Merriweather Bold"), local("Merriweather-Bold"), url(https://fonts.gstatic.com/s/merriweather/v15/ZvcMqxEwPfh2qDWBPxn6nkqWMeizceScn2Xpn1ZpsKI.woff2) format("woff2");
unicode-range:U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF
}
@font-face {
font-family:'Merriweather';
font-style:normal;
font-weight:700;
src:local("Merriweather Bold"), local("Merriweather-Bold"), url(https://fonts.gstatic.com/s/merriweather/v15/ZvcMqxEwPfh2qDWBPxn6nshHwsiXhsDb0smKjAA7Bek.woff2) format("woff2");
unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215
}
@-moz-keyframes spin {
0% {
-moz-transform:rotate(0deg);
transform:rotate(0deg)
}
100% {
-moz-transform:rotate(359deg);
transform:rotate(359deg)
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
100% {
-webkit-transform:rotate(359deg);
transform:rotate(359deg)
}
}
@keyframes spin {
0% {
-moz-transform:rotate(0deg);
-ms-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
100% {
-moz-transform:rotate(359deg);
-ms-transform:rotate(359deg);
-webkit-transform:rotate(359deg);
transform:rotate(359deg)
}
}
@-moz-keyframes shrink {
0% {
transform:scale(1)
}
25% {
transform:scale(0.95)
}
50% {
opacity:1;
transform:scale(1.1)
}
100% {
opacity:0;
transform:scale(0.3)
}
}
@-webkit-keyframes shrink {
0% {
transform:scale(1)
}
25% {
transform:scale(0.95)
}
50% {
opacity:1;
transform:scale(1.1)
}
100% {
opacity:0;
transform:scale(0.3)
}
}
@keyframes shrink {
0% {
transform:scale(1)
}
25% {
transform:scale(0.95)
}
50% {
opacity:1;
transform:scale(1.1)
}
100% {
opacity:0;
transform:scale(0.3)
}
}
@-moz-keyframes grow {
0% {
opacity:0;
transform:scale(0.3)
}
25% {
opacity:1;
transform:scale(1.1)
}
50% {
transform:scale(0.95)
}
100% {
transform:scale(1)
}
}
@-webkit-keyframes grow {
0% {
opacity:0;
transform:scale(0.3)
}
25% {
opacity:1;
transform:scale(1.1)
}
50% {
transform:scale(0.95)
}
100% {
transform:scale(1)
}
}
@keyframes grow {
0% {
opacity:0;
transform:scale(0.3)
}
25% {
opacity:1;
transform:scale(1.1)
}
50% {
transform:scale(0.95)
}
100% {
transform:scale(1)
}
}
html.popup-visible, body.popup-visible {
	overflow:hidden !important
}
.header-building {
	display:flex;
	justify-content:center;
	align-items:center;
	min-height:33px;
	margin-top:60px
}
.header-building .logo-building {
	margin-left:30px
}
.hp-section {
	background-color:#fff;
	position:relative;
	height:650px;
	text-align:center;
	display:flex;
	align-items:center
}
@media (max-width: 960px) {
.hp-section {
padding-top:3rem;
padding-bottom:3rem;
min-height:600px;
height:auto
}
}
.hp-section>.inner {
	max-width:770px;
	margin:0 auto;
	z-index:1
}
.hp-section.section-1 {
	background-image:url("https://www.hooplaloans.co.za/images/bg-skyline-combined.svg");
	background-repeat:no-repeat;
	background-position:center bottom 193px;
	margin-bottom:-100px;
	height:90vh;
	min-height:680px;
	max-height:800px;
	overflow:hidden;
	z-index:0
}
.hp-section.section-1 .clouds {
	position:absolute;
	top:25%;
	left:0;
	height:161px;
	width:100%
}
.hp-section.section-1 .clouds .clouds-bg {
	position:absolute;
	right:-1600px;
	left:0;
	bottom:0;
	top:0;
	background:url("../images/bg-clouds.png") 0% 0% repeat;
	z-index:-1;
	background-size:contain;
	-moz-animation:MOVE-BG 60s infinite linear;
	-webkit-animation:MOVE-BG 60s infinite linear;
	animation:MOVE-BG 60s infinite linear
}
.hp-section.section-1>.inner {
	margin-top:-193px
}
.hp-section.section-1 .btn-pink {
	padding:0 45px;
	font-size:18px
}
.hp-section.section-1 h1 {
	padding-bottom:20px
}
.hp-section.section-1 p {
	padding-bottom:75px
}
.hp-section.section-1 p span {
	display:inline-block
}.hp-section.section-1 {
  background-size: auto 35%;
}
.hp-section.section-1 .in-the-press {
	background:#F7F7F7 url("../images/bg-in-the-press.png") center center no-repeat;
	background-size:contain;
	position:absolute;
	z-index:1;
	height:93px;
	width:100%;
	left:0;
	bottom:100px
}
.hp-section.section-1 .desc-green {
	color:#61D32F;
	font-weight:700;
	padding-top:15px;
	display:inline-block
}

/*.hp-section.section-1:before, .hp-section.section-1:after {
content:"";
position:absolute;
background-image:url("../images/bg-skyline-combined.svg");
bottom:49px;
height:252px;
width:705px
}
.hp-section.section-1:before {
left:0;
background-position:left bottom
}
.hp-section.section-1:after {
right:0;
background-position:right bottom
}*/
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.hp-section.section-1 {
justify-content:flex-start;
align-items:flex-start;
background-image:none;
height:100vh
}
.hp-section.section-1>.inner {
margin-top:30px
}
.hp-section.section-1:before, .hp-section.section-1:after {
content:"";
position:absolute;
background-image:url("https://www.hooplaloans.co.za/images/bg-skyline-combined.svg");
bottom:193px;
height:252px;
width:705px
}
.hp-section.section-1:before {
left:-140px;
background-position:left bottom
}
.hp-section.section-1:after {
right:-120px;
background-position:right bottom
}
}
@media (max-width: 767px) {
.hp-section.section-1 {
background-size:auto 23vh;
height:100vh;
min-height:initial;
align-items:flex-start;
padding-top:30px;
margin-bottom:0;
background-position:right bottom 50px;
z-index:1
}
.hp-section.section-1 .clouds {
top:35%
}
.hp-section.section-1>.inner {
margin-top:0
}
.hp-section.section-1 h1 {
padding:0 20px 15px 20px
}
.hp-section.section-1 p {
padding-bottom:45px
}
.hp-section.section-1 .in-the-press {
background-size:683px;
height:50px;
bottom:0
}
}
@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-min-device-pixel-ratio: 4) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) {
.hp-section.section-1 h1 {
font-size:26px
}
.hp-section.section-1 p {
padding:0 60px 30px 60px
}
.hp-section.section-1 .link-video {
margin-top:10px
}
}
@media screen and (device-width: 360px) and (device-height: 640px) {
.hp-section.section-1 p {
padding-bottom:30px
}
}
@media only screen and (min-width: 375px) and (max-width: 767px) {
	.hp-section .title-lrg {
  font: 700 32px/40px "Lato","Helvetica Neue",Arial,sans-serif!important;
}
.hp-section.section-1 {
background-size:auto 35%
}
}
@media only screen and (min-device-width: 319px) and (max-device-width: 321px) and (-webkit-min-device-pixel-ratio: 2) {
.hp-section.section-1 {
padding-top:20px
}
.hp-section.section-1 h1 {
font-size:24px
}
.hp-section.section-1 p {
padding:0 40px 30px 40px;
font-size:16px;
line-height:21px
}
}
.hp-section.section-2 {
	background:url("../images/bg-flood.jpg") center top no-repeat, url("../assets/home/index/bg-flood-water-3b0c3da2115c72c9038d6a94286470c63165ce8a38dd8a0eb1043deb9c9f09a5.html") center bottom -2px repeat-x;
	background-size:1281px 680px, 1366px 140px;
	align-items:flex-start;
	height:680px;
	padding-top:55px;
	border-bottom:2px #4A4A4A solid
}
.hp-section.section-2>.inner {
	max-width:720px
}
.hp-section.section-2 p {
	padding:0 30px
}
@media (max-width: 1280px) {
.hp-section.section-2 {
background-position:right top, center bottom -2px
}
.hp-section.section-2>.inner {
padding:0 30px
}
}
@media (max-width: 767px) {
.hp-section.section-2 {
padding-top:50px;
background-position:right -220px top, center bottom -2px
}
.hp-section.section-2 p {
padding:0
}
}
@media only screen and (min-device-width: 319px) and (max-device-width: 321px) and (-webkit-min-device-pixel-ratio: 2) {
.hp-section.section-2 p {
padding:0 10px
}
}
.hp-section.section-3 {
	height:700px;
	padding-top:55px;
	padding-bottom:0;
	flex-direction:column;
	justify-content:space-between;
	border-bottom:1px #DADADA solid
}
.hp-section.section-3 .link-video {
	margin-top:10px
}
.hp-section.section-3 .app-sketch {
	background:transparent url("https://www.hooplaloans.co.za/assets/home/index/bg-app-sketch-388bff588657844adc7f9afadf7a23c3ebde8426e94e06f48282aa19bcd82ce4.svg") center bottom -2px no-repeat;
	position:relative;
	width:463px;
	height:442px
}
.hp-section.section-3 .app-sketch span {
	font-size:28px;
	position:absolute
}
.hp-section.section-3 .app-sketch span:before {
	content:"";
	background:transparent url("https://www.hooplaloans.co.za/assets/global/icn-sprite-50-29244f57373dfae7d173ef1e68bf988c3852fd5ba0ddfc51d127bba5e992e408.svg") no-repeat -272px -50px;
	background-size:350px 100px;
	position:absolute;
	z-index:1;
	display:block;
	overflow:hidden;
	width:28px;
	height:32px
}
.hp-section.section-3 .app-sketch span.get-paid {
	top:90px;
	right:-170px
}
.hp-section.section-3 .app-sketch span.get-paid:before {
	left:-15px;
	bottom:-45px
}
.hp-section.section-3 .app-sketch span.get-insured {
	top:125px;
	left:-220px
}
.hp-section.section-3 .app-sketch span.get-insured:before {
	right:-25px;
	bottom:-45px;
	-moz-transform:scaleX(-1);
	-ms-transform:scaleX(-1);
	-webkit-transform:scaleX(-1);
	transform:scaleX(-1)
}
.hp-section.section-3 .app-sketch span strong {
	display:block
}
@media (max-width: 960px) {
.hp-section.section-3 {
height:auto;
min-height:800px
}
.hp-section.section-3 p {
padding-left:50px;
padding-right:50px
}
.hp-section.section-3 .link-video {
margin-bottom:20px
}
.hp-section.section-3 .app-sketch {
min-height:550px
}
.hp-section.section-3 .app-sketch span:before {
display:none
}
.hp-section.section-3 .app-sketch span.get-paid {
top:90px;
right:30px
}
.hp-section.section-3 .app-sketch span.get-insured {
top:10px;
left:40px
}
}
@media (max-width: 767px) {
.hp-section.section-3 {
padding-top:50px;
min-height:initial
}
.hp-section.section-3 .link-video {
margin-bottom:0
}
.hp-section.section-3 .app-sketch {
min-height:480px;
background-size:343px 329px;
width:100%
}
.hp-section.section-3 .app-sketch span {
font-size:20px
}
.hp-section.section-3 .app-sketch span.get-paid {
top:130px;
left:50%;
right:initial;
padding-left:50px
}
.hp-section.section-3 .app-sketch span.get-insured {
top:68px;
right:50%;
left:initial;
padding-right:10px
}
}
@media only screen and (min-device-width: 319px) and (max-device-width: 321px) and (-webkit-min-device-pixel-ratio: 2) {
.hp-section.section-3 {
min-height:initial
}
.hp-section.section-3 p {
padding-left:40px;
padding-right:40px
}
.hp-section.section-3 .app-sketch {
background-size:263px 252px;
min-height:340px;
height:auto
}
.hp-section.section-3 .app-sketch span {
font-size:18px
}
.hp-section.section-3 .app-sketch span.get-insured {
top:30px;
width:120px;
padding-right:0
}
.hp-section.section-3 .app-sketch span.get-paid {
top:76px;
padding-left:45px
}
}
.hp-section.section-4 {
	padding-top:55px;
	padding-bottom:70px;
	height:auto;
	border-bottom:1px #DADADA solid
}
.hp-section.section-4 .list-insurance {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-content:space-between
}
.hp-section.section-4 .list-insurance li {
	background:#F7F7F7;
	max-width:340px;
	border:1px #DADADA solid;
	padding:25px 45px;
	margin:20px 20px 40px 20px;
	border-radius:5px
}
.hp-section.section-4 .list-insurance li h3 {
	font-size:30px;
	line-height:30px;
	font-weight:400;
	color:#4A4A4A;
	padding:0 10px 20px 10px
}
.hp-section.section-4 .list-insurance li small {
	font-size:1.4rem;
	text-transform:uppercase;
	color:#B7B7B7
}
.hp-section.section-4 .list-insurance li em {
	font:500 58px/73px "Merriweather", Georgia, serif;
	color:#4A4A4A;
	display:block;
	padding:10px 0 30px 0
}
.hp-section.section-4 .list-insurance li .btn-standard {
	padding:0;
	line-height:52px;
	height:52px;
	display:block
}
.hp-section.section-4 h2 {
	padding-bottom:35px
}
@media (max-width: 767px) {
.hp-section.section-4 {
padding-top:50px
}
.hp-section.section-4 h2 {
padding:0 20px 30px 20px
}
.hp-section.section-4 strong {
display:none
}
.hp-section.section-4 .list-insurance li {
margin:20px;
max-width:320px
}
}
@media only screen and (min-device-width: 319px) and (max-device-width: 321px) and (-webkit-min-device-pixel-ratio: 2) {
.hp-section.section-4 .list-insurance li {
margin:10px;
max-width:280px
}
}
.hp-section.section-switching {
	height:auto;
	padding:49px 0;
	border-bottom:1px #DADADA solid
}
.hp-section.section-switching>.inner {
	max-width:1200px
}
.hp-section.section-switching h2 {
	padding-left:30px;
	padding-right:30px
}
.hp-section.section-switching p {
	max-width:990px;
	margin:0 auto
}
.hp-section.section-switching .btn-standard {
	height:52px;
	line-height:52px;
	padding:0 20px
}
.hp-section.section-switching .bg-switching {
	background:url("../images/bg-switching.png") 0 0 no-repeat;
	margin:20px auto 40px auto;
	width:584px;
	height:309px
}
@media (max-width: 620px) {
.hp-section.section-switching .bg-switching {
background-image:url("../images/bg-switching-mobile.png");
background-size:347px 512px;
width:347px;
height:512px
}
}
@media (max-width: 320px) {
.hp-section.section-switching .bg-switching {
background-size:300px 455px;
width:300px;
height:455px
}
}
.hp-section.section-5 {
	height:auto;
	padding:35px 0
}
.hp-section.section-5>.inner {
	max-width:1200px
}
.hp-section.section-5 h2 {
	padding-left:30px;
	padding-right:30px ; padding-bottom:20px;
}
.hp-section.section-5 p {
	max-width:990px;
	margin:0 auto
}
.hp-section.section-5 p.desc-sml {
	font-size:16px;
	padding-top:40px
}
.hp-section.section-5 p em {
	color:#8fba27
}
.hp-section.section-5 p a {
	display:inline-block;
	margin-top:5.5rem;
	font-size:1.6rem
}
.hp-section.section-5 .slices {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-content:space-between;
	padding-bottom:55px;
	padding-top:55px
}
.hp-section.section-5 .slices li {
	position:relative;
	font-size:20px;
	min-width:260px;
	padding:140px 20px 0 20px
}
.hp-section.section-5 .slices li:before {
	content:"";
	background:transparent url("https://www.hooplaloans.co.za/images/bg-slices-2.svg") 0 0 no-repeat;
	position:absolute;
	top:0;
	left:0;
	width:195px;
	height:125px
}
.hp-section.section-5 .slices li.slice-fee:before {
	left:46px;
	width:182px;
	height:113px;
	background-position:-5px 0
}
.hp-section.section-5 .slices li.slice-claims:before {
	left:47px;
	width:164px;
	height:113px;
	background-position:-226px 0
}
.hp-section.section-5 .slices li.slice-giveback:before {
	left:35px;
	width:170px;
	height:107px;
	background-position:-428px 0
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.hp-section.section-5 h2 {
padding-left:60px;
padding-right:60px
}
.hp-section.section-5 p {
padding:10px 100px 0 100px
}
.hp-section.section-5 .slices li {
margin:20px
}
}
@media (max-width: 767px) {
.hp-section.section-5 {
padding-top:60px;
height:auto
}
.hp-section.section-5 .slices {
padding-top:40px
}
.hp-section.section-5 .slices li {
-moz-transform:scale(0.8);
-ms-transform:scale(0.8);
-webkit-transform:scale(0.8);
transform:scale(0.8)
}
}
@media (max-width: 414px) {
.hp-section.section-5 p {
padding-bottom:1rem;
padding-top:2rem
}
.hp-section.section-5 .slices li {
padding-top:130px;
padding-right:20px;
padding-left:20px;
height:220px;
-moz-transform:scale(1);
-ms-transform:scale(1);
-webkit-transform:scale(1);
transform:scale(1)
}
.hp-section.section-5 .slices li.slice-fee:before, .hp-section.section-5 .slices li.slice-claims:before, .hp-section.section-5 .slices li .slice-giveback:before {
left:49px
}
}
.hp-section.section-6 {
	background:#F7F7F7;
	height:auto;
	min-height:initial;
	padding:49px 0;
	border-top:1px #DADADA solid
}
.hp-section.section-6>.inner {
	max-width:1000px;
	width:100%
}
.hp-section.section-6 ul {
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	width:100%
}
.hp-section.section-6 ul li {
	width:50%;
	padding:0 30px 0 165px;
	text-align:left;
	position:relative
}
.hp-section.section-6 ul li:before {
	content:"";
	position:absolute;
	left:30px;
	top:10px;
	background:transparent url("../images/bg-rated.png") 0 0 no-repeat;
	background-size:211px 88px
}
.hp-section.section-6 ul li.a-rated:before {
	background-position:-116px 0;
	width:95px;
	height:89px
}
.hp-section.section-6 ul li.social-impact:before {
	width:103px;
	height:88px
}
.hp-section.section-6 ul li h4 {
	font-size:20px;
	padding-bottom:5px
}
.hp-section.section-6 ul li p {
	font-size:16px;
	line-height:22px;
	padding:0
}
@media (max-width: 767px) {
.hp-section.section-6 ul {
flex-wrap:wrap
}
.hp-section.section-6 ul li {
width:100%;
max-width:initial;
padding-top:30px;
padding-bottom:30px
}
.hp-section.section-6 ul li:before {
top:30px
}
}
@media only screen and (min-width: 375px) and (max-width: 767px) {
.hp-section.section-6 ul li {
padding-top:130px;
padding-left:30px;
text-align:center
}
.hp-section.section-6 ul li:before {
top:20px;
left:50%
}
.hp-section.section-6 ul li.a-rated:before {
margin-left:-47px
}
.hp-section.section-6 ul li.social-impact:before {
margin-left:-52px
}
}
@media only screen and (min-device-width: 319px) and (max-device-width: 321px) and (-webkit-min-device-pixel-ratio: 2) {
.hp-section.section-6 ul li {
padding-top:130px;
padding-left:30px;
text-align:center
}
.hp-section.section-6 ul li:before {
top:20px;
left:50%
}
.hp-section.section-6 ul li.a-rated:before {
margin-left:-52px
}
.hp-section.section-6 ul li.social-impact:before {
margin-left:-47px
}
}
.hp-section.insurance-flow>.inner {
	max-width:100%;
	width:100%;
	display:flex;
	flex-flow:column;
	align-items:center;
	justify-content:center
}
.hp-section.insurance-flow .flow-steps {
	margin-top:55px;
	display:flex;
	flex-flow:row;
	align-items:baseline;
	justify-content:space-around;
	position:relative
}
.hp-section.insurance-flow .flow-steps .flow-step {
	width:264px;
	display:flex;
	flex-flow:column;
	align-items:center;
	justify-content:center
}
.hp-section.insurance-flow .flow-steps .flow-step .flex-step-icon {
	max-width:171px
}
.hp-section.insurance-flow .flow-steps .flow-step .flow-step-number {
	display:flex;
	align-items:center;
	justify-content:center;
	margin-top:15px;
	width:53px;
	height:53px;
	font:400 32px/1.3 "Merriweather", Georgia, serif;
	line-height:40px;
	background:white;
	z-index:2
}
.hp-section.insurance-flow .flow-steps .flow-step .flow-step-text h3 {
	margin-top:20px;
	font:400 20px/1.3 "Lato", "Helvetica Neue", Arial, sans-serif;
	font-weight:700;
	text-transform:uppercase
}
.hp-section.insurance-flow .flow-steps .flow-step .flow-step-text p {
	margin-top:5px;
	font:400 20px/1.3 "Lato", "Helvetica Neue", Arial, sans-serif;
	line-height:28px;
	padding:0 10px
}
.hp-section.insurance-flow .flow-steps .flow-step:nth-of-type(2) {
margin-left:59px
}
.hp-section.insurance-flow .flow-steps .flow-step:nth-of-type(3) {
margin-left:53px
}
.hp-section.insurance-flow .flow-steps .horizontal-line {
	position:absolute;
	top:50%;
	width:70%;
	border:1px solid #ECECEC;
	height:1px;
	margin-top:13px
}
.hp-section.insurance-flow .flow-steps .flow-step-next {
	display:none
}
@media (max-width: 767px) {
.hp-section.insurance-flow .flow-steps {
margin-top:53px;
flex-flow:column
}
.hp-section.insurance-flow .flow-steps .flow-step {
margin-top:40px
}
.hp-section.insurance-flow .flow-steps .flow-step:nth-of-type(2) {
margin-left:0
}
.hp-section.insurance-flow .flow-steps .flow-step:nth-of-type(3) {
margin-left:0
}
.hp-section.insurance-flow .flow-steps .horizontal-line {
display:none
}
.hp-section.insurance-flow .flow-steps .flow-step-next {
display:block;
margin-top:20px;
align-self:center;
width:29px;
height:29px;
border-right:2px solid #ECECEC;
border-bottom:2px solid #ECECEC;
-ms-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg)
}
}
.hp-section h1, .hp-section .title-lrg {
	font:400 48px/1.3 "Merriweather", Georgia, serif;
	padding-bottom:10px;
	color:#4A4A4A;
	text-transform:capitalize
}
@media (max-width: 767px) {
.hp-section h1, .hp-section .title-lrg {
font-size:28px
}
}
.hp-section .title-lrg {
	font:700 46px/1.3 "Lato", "Helvetica Neue", Arial, sans-serif
}
@media (max-width: 767px) {
.hp-section .title-lrg {
font-size:33px
}
}
@media only screen and (min-width: 375px) and (max-width: 767px) {
.hp-section .title-lrg {
font-size:28px
}
}
@media only screen and (min-device-width: 319px) and (max-device-width: 321px) and (-webkit-min-device-pixel-ratio: 2) {
.hp-section .title-lrg {
font-size:28px
}
}

.hp-section p {
	font-size:20px;
	line-height:27px;
	color:#4A4A4A;
	padding:0 20px 20px 20px
}
.hp-para-section p{font-size:23px;
	line-height:30px; font-weight:bold;
	color:#4A4A4A;
	padding:0 20px 20px 20px}
@media (max-width: 767px) {
.hp-section p {
font-size:18px
}
}
.hp-section p span {
	display:inline-block
}
.hp-section .link-video {
	font-size:20px;
	margin-top:20px;
	display:inline-block
}
.hp-section .link-video i:before {
	content:"";
	background:transparent url("https://www.hooplaloans.co.za/assets/global/icn-sprite-50-29244f57373dfae7d173ef1e68bf988c3552fd5ba0ddfc51d127bba5e992e408.svg") no-repeat -178px -78px;
	background-size:350px 100px;
	position:absolute;
	z-index:1;
	display:block;
	overflow:hidden;
	width:22px;
	height:22px;
	position:relative;
	display:inline-block;
	right:10px;
	top:4px
}
.popup-quote {
	background:#fff;
	width:500px;
	height:400px
}
@-moz-keyframes animate-clouds {
0% {
background-position:center bottom 193px, 0 225px, 1412px 225px, 2824px 225px, 0 50px, 1777px 50px
}
100% {
background-position:center bottom 193px, -1412px 225px, 0 225px, 1412px 225px, -1777px 50px, 0 50px
}
}
@-webkit-keyframes animate-clouds {
0% {
background-position:center bottom 193px, 0 225px, 1412px 225px, 2824px 225px, 0 50px, 1777px 50px
}
100% {
background-position:center bottom 193px, -1412px 225px, 0 225px, 1412px 225px, -1777px 50px, 0 50px
}
}
@keyframes animate-clouds {
0% {
background-position:center bottom 193px, 0 225px, 1412px 225px, 2824px 225px, 0 50px, 1777px 50px
}
100% {
background-position:center bottom 193px, -1412px 225px, 0 225px, 1412px 225px, -1777px 50px, 0 50px
}
}
@-webkit-keyframes MOVE-BG {
from {
-webkit-transform:translateX(0)
}
to {
	-webkit-transform:translateX(-1600px)
}
}

@media (max-width: 560px) {
.hp-section.section-1 { height: 124vh;}
.hp-section.section-1 h1 {padding: 0;}
.hp-section.section-3 p {
  padding-left: 0px;
  padding-right: 0px;
}
.hp-section.section-5 {
  height: auto;
  padding-top: 26px;
}.hp-section.section-switching { padding: 25px 0;}
.representbx { padding-bottom: 5px; padding-top: 24px;}
.hp-section.section-5 {
  min-height: auto;
  padding-top: 30px;
}
.hp-section.section-6{ padding:5px 0px;}
	}
	
	
@media (max-width:479px) {
.hp-section.section-switching .bg-switching{ width:auto;}
}
	}