/*
 Theme Name:     Affinity Africa
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Affinity Africa Website
 Author:         David Snyman
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */

/* Africa Icon */

/***************************************************
 * Generated by SVG Artista on 7/31/2020, 11:47:26 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .svg-elem-1 {
  stroke-dashoffset: 383.4930419921875px;
  stroke-dasharray: 383.4930419921875px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s;
}

svg.active .svg-elem-1 {
  stroke-dashoffset: 0;
}

svg .svg-elem-2 {
  stroke-dashoffset: 383.5229797363281px;
  stroke-dasharray: 383.5229797363281px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s;
}

svg.active .svg-elem-2 {
  stroke-dashoffset: 0;
}

svg .svg-elem-3 {
  stroke-dashoffset: 383.4931640625px;
  stroke-dasharray: 383.4931640625px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s;
}

svg.active .svg-elem-3 {
  stroke-dashoffset: 0;
}

svg .svg-elem-4 {
  stroke-dashoffset: 383.5198669433594px;
  stroke-dasharray: 383.5198669433594px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s;
}

svg.active .svg-elem-4 {
  stroke-dashoffset: 0;
}

svg .svg-elem-5 {
  stroke-dashoffset: 383.53790283203125px;
  stroke-dasharray: 383.53790283203125px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s;
}

svg.active .svg-elem-5 {
  stroke-dashoffset: 0;
}

svg .svg-elem-6 {
  stroke-dashoffset: 383.53143310546875px;
  stroke-dasharray: 383.53143310546875px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s;
}

svg.active .svg-elem-6 {
  stroke-dashoffset: 0;
}

svg .svg-elem-7 {
  stroke-dashoffset: 383.5423889160156px;
  stroke-dasharray: 383.5423889160156px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s;
}

svg.active .svg-elem-7 {
  stroke-dashoffset: 0;
}

svg .svg-elem-8 {
  stroke-dashoffset: 383.483154296875px;
  stroke-dasharray: 383.483154296875px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s;
}

svg.active .svg-elem-8 {
  stroke-dashoffset: 0;
}

svg .svg-elem-9 {
  stroke-dashoffset: 383.52880859375px;
  stroke-dasharray: 383.52880859375px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s;
}

svg.active .svg-elem-9 {
  stroke-dashoffset: 0;
}

svg .svg-elem-10 {
  stroke-dashoffset: 383.53802490234375px;
  stroke-dasharray: 383.53802490234375px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s;
}

svg.active .svg-elem-10 {
  stroke-dashoffset: 0;
}

svg .svg-elem-11 {
  stroke-dashoffset: 383.5390625px;
  stroke-dasharray: 383.5390625px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2s;
}

svg.active .svg-elem-11 {
  stroke-dashoffset: 0;
}

svg .svg-elem-12 {
  stroke-dashoffset: 383.52362060546875px;
  stroke-dasharray: 383.52362060546875px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3199999999999998s;
}

svg.active .svg-elem-12 {
  stroke-dashoffset: 0;
}

svg .svg-elem-13 {
  stroke-dashoffset: 383.52325439453125px;
  stroke-dasharray: 383.52325439453125px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.44s;
}

svg.active .svg-elem-13 {
  stroke-dashoffset: 0;
}

svg .svg-elem-14 {
  stroke-dashoffset: 383.5214538574219px;
  stroke-dasharray: 383.5214538574219px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.56s;
}

svg.active .svg-elem-14 {
  stroke-dashoffset: 0;
}

svg .svg-elem-15 {
  stroke-dashoffset: 383.52337646484375px;
  stroke-dasharray: 383.52337646484375px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.68s;
}

svg.active .svg-elem-15 {
  stroke-dashoffset: 0;
}

svg .svg-elem-16 {
  stroke-dashoffset: 383.52899169921875px;
  stroke-dasharray: 383.52899169921875px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7999999999999998s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7999999999999998s;
}

svg.active .svg-elem-16 {
  stroke-dashoffset: 0;
}

svg .svg-elem-17 {
  stroke-dashoffset: 383.52398681640625px;
  stroke-dasharray: 383.52398681640625px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.92s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.92s;
}

svg.active .svg-elem-17 {
  stroke-dashoffset: 0;
}

svg .svg-elem-18 {
  stroke-dashoffset: 383.5240478515625px;
  stroke-dasharray: 383.5240478515625px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.04s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.04s;
}

svg.active .svg-elem-18 {
  stroke-dashoffset: 0;
}

svg .svg-elem-19 {
  stroke-dashoffset: 383.52484130859375px;
  stroke-dasharray: 383.52484130859375px;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.16s;
          transition: stroke-dashoffset 1s cubic-bezier(0.47, 0, 0.745, 0.715) 2.16s;
}

svg.active .svg-elem-19 {
  stroke-dashoffset: 0;
}

.africaIcon {
    position: absolute;
    top: 0;
}

svg#bannerIcon {
    width: 100%;
    height: 100%;
    z-index: 99999999999;
}

/* Fonts */

@font-face {
	font-family: Roboto-Bold;
	src: url(https://affinityafrica.co.za/wp-content/themes/AffinityAfrica/fonts/Roboto-Bold.ttf);
}

@font-face {
	font-family: Roboto-Regular;
	src: url(https://affinityafrica.co.za/wp-content/themes/AffinityAfrica/fonts/Roboto-Regular.ttf);
}

@font-face {
	font-family: Roboto-Medium;
	src: url(https://affinityafrica.co.za/wp-content/themes/AffinityAfrica/fonts/Roboto-Medium.ttf);
}

/* Typography */

body {
	font-family: Roboto-Regular;	
}

h1 {
    font-size: 20px !important;
	font-family: Roboto-Bold;
}

h1.blue {
    color: #312783;
}

h1.people {
	font-family: Roboto-Medium;
    font-size: 24px !important;
    line-height: 1.2em !important;
	color: #312783;
	padding-bottom: 3px;
}

h1.qualif {
	color: #312783;
	font-family: Roboto-Regular;
	line-height: 1.2em !important;
	font-size: 17px !important;
}

strong {
    font-weight: 700;
    line-height: 1.5em;
}

p.biggerText {
	font-family: Roboto-Medium;
    font-size: 20px;
    line-height: 26px;
    color: #312783;
}

p.bigText {
	font-family: Roboto-Regular;
    font-size: 20px;
    line-height: 26px;
    color: #312783;
}

p.bigBody {
	font-family: Roboto-Regular;
    font-size: 15px !important;
    line-height: 22px;
    color: #312783;
}

.ourPeople p {
	font-size: 18px;
	line-height: 1.2em;
}

#top-header .container {
    padding-top: 0;
    font-weight: 600;
}

ul#et-secondary-nav {
    background: #e84239;
    padding: 10px 20px 2px;
    text-transform: uppercase;
}

div#et-info {
    padding-top: 0.75em;
}

#et-top-navigation {
    font-weight: 300;
}

#top-menu li.current-menu-item>a {
    font-weight: 600;
}

div#homeSolutions h1 {
    color: #312783;
    font-size: 17px !important;
    line-height: 1.2em;
    min-height: 70px;
}

h1.banner {
    font-size: 71px !important;
    color: #312783;
}

/* Buttons */

a.btn {
    background: #e84239;
    padding: 10px;
    color: #fff;
    border-radius: 5px;
}


/* Page Layout */

.et_pb_row {
    width: 90%;
}

@media (min-width: 981px) {
.et_pb_gutters2 .et_pb_column_1_5, .et_pb_gutters2.et_pb_row .et_pb_column_1_5 {
    width: 18.6%;
}

.et_pb_gutters2 .et_pb_column, .et_pb_gutters2.et_pb_row .et_pb_column {
    margin-right: 2%;
}
}

/* home */

path.elementor-shape-fill {
    fill: #fff;
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotateY(0deg);
    transform: rotate(180deg);
}

svg {
    width: calc(100% + 1.3px);
    height: 60px;
}

div#bannerBottom {
    position: absolute;
    bottom: -10px;
    width: calc(100% + 1.3px);
}

div#homeSolutions .et_pb_column {
    padding-bottom: 50px;
}

.solBtn {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}
@media (min-width: 981px) {
.bannerText {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
}
}
.bannerText p {
    padding-bottom: 30px;
}

.redBubble {
    position: absolute;
    bottom: 15%;
    right: 40%;
}

.blueTriangle {
    position: absolute;
    bottom: 22%;
    right: 45%;
}

.blueBubble {
    position: absolute;
    top: 22%;
    right: 15%;
}

.redTriangle {
    position: absolute;
    top: 15%;
    right: 20%;
}

.redBubble img {
    width: 20px;
}

.blueTriangle img {
    width: 18px;
}

.redTriangle img {
    width: 25px;
}

.blueBubble {
    width: 15px;
}

@keyframes pulse {
    0% {
     transform: scale(0.7);
	 opacity: 0.5;
    }

    50% {
     transform: scale(1);
	 opacity: 1;
    }

    100% {
    transform: scale(0.7);
	 opacity: 0.5;
    }
}

@keyframes move {
    0% {
     top: 12%;
	 opacity: 0.5;
    }

    50% {
     top: 22%;
	 opacity: 1;
    }

    100% {
    top: 12%;
	opacity: 0.5;
    }
}


.redBubble img {
    animation: pulse 3s infinite;
}

.blueBubble {
    animation: move 4s linear infinite ;
}

.headerAlt .redTriangle {
    position: absolute;
    top: 15%;
    right: -10%;
}

.headerAlt .blueBubble {
    position: absolute;
    top: 22%;
    right: -15%;
}

.headerAlt .blueTriangle {
    position: absolute;
    bottom: 22%;
    right: 75%;
}

.headerAlt .redBubble {
    position: absolute;
    bottom: 15%;
    right: 70%;
}

/* Footer */

footer input {
    width: 100%;
    padding: 10px !important;
    margin-bottom: 10px !important;
}

footer label {
    display: inline-block;
    width: 20%;
}

footer .wpcf7-form-control-wrap {
    position: relative;
    display: inline-block;
    width: 80%;
}

footer input.wpcf7-form-control.wpcf7-submit {
    width: 40%;
    float: right;
    border: none;
    background: #e84239;
    color: #fff;
    border-radius: 5px;
}

/* Contact Us */

input {
    width: calc(50% - 2%);
    padding: 10px !important;
    margin: 0 2% 2% 0 !important;
}

input.wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email {
    width: calc(100% - 2%);
}

textarea {
    font-family: inherit;
    width: calc(100% - 2%);
}

input.wpcf7-form-control.wpcf7-submit {
    width: 40%;
    float: right;
    border: none;
    background: #e84239;
    color: #fff;
    border-radius: 5px;
}

/* Mobile */

@media(max-width:979px) {
h1.banner {
    font-size: 40px !important;
    color: #312783;
}
}

@media all and (max-width: 980px) {
/*** wrap row in a flex box ***/
.custom_row {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
flex-wrap: wrap;
}

/*** custom classes that will designate the order of columns in the flex box row ***/
.first-on-mobile {
-webkit-order: 1;
order: 1;
}

.second-on-mobile {
-webkit-order: 2;
order: 2;
}

.third-on-mobile {
-webkit-order: 3;
order: 3;
}

.fourth-on-mobile {
-webkit-order: 4;
order: 4;
}
/*** add margin to last column ***/
.custom_row:last-child .et_pb_column:last-child {
margin-bottom: 30px;
}

}