/*------------------------------------------------------------------------------------------*/
/*	Overall Layout / Styling																*/
/*------------------------------------------------------------------------------------------*/

:root {
  --icon-required: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-12 -10 20 20"> \
  <line id="line" y1="-3" y2="3" stroke="%23cf4a4a" stroke-linecap="butt" transform="rotate(30)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23cf4a4a" stroke-linecap="butt" transform="rotate(90)"></line> \
  <line id="line" y1="-3" y2="3" stroke="%23cf4a4a" stroke-linecap="butt" transform="rotate(-30)"></line> \
</svg>');

--icon-tick: url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="-10 -8 28 28"> \
            <path fill="green" stroke-linejoin="round" d="M2 6L1 7l3 4 7-10h-1L4 8z"/> \
</svg>');
  --section-title-height: 200px;
}

@font-face {
 font-family: 'Neuropol';
 src: url('Neuropol.ttf.woff') format('woff'),
  url('Neuropol.ttf.svg#Neuropol') format('svg'),
  url('Neuropol.ttf.eot'), url('Neuropol.ttf.eot?#iefix')
  format('embedded-opentype');
 font-weight: normal;
 font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('Inter-VariableFont_slnt,wght.ttf')
}

* {
 margin: 0;
/* padding: 0;*/
 font-family: 'Inter', sans-serif;
 box-sizing: border-box;
 color: inherit;
}

html, body {
 line-height: 1;
}

body {
 background-image: url('pexels-photo-239898-blur-2.webp');
 background-attachment: fixed;
 background-repeat: no-repeat;
 background-position: top center;
 background-size: cover;
}
.no-webp body {
 background-image: url('pexels-photo-239898-blur-2.jpg');
}

body, td, th {
 color: #555;
}

h2 {
 color: #9aca3c;
 font-family: 'Raleway', sans-serif;
 font-weight: bold;
 font-size: 350%;
 text-align: center;
}

.section-grey h3 {
 color: white !important;
}

h3 {
 color: #555;
 font-size: 220%;
 text-align: center;
}

h4 {
 color: Black;
 font-weight: bold;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0;
}

p {
 margin-bottom: 30px;
}

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

input[type=text], input[type=email], input[type=password], textarea {
 border: solid #9aca3c 1px !important;
 border-radius: 5px;
 height: 3rem;
 padding: 15px !important;
 color: #111;
}

select {
 border: solid #9aca3c 1px;
 border-radius: 5px;
 height: 3rem;
 padding: 12px 32px 12px 12px;
 color: #111;
}

select:disabled,
select[disabled] {
  border: solid rgb(175, 175, 175) 1px;
  color: rgb(175, 175, 175);
}

input[type=text][required],
input[type=email][required],
input[type=password][required],
input[type=tel][required] {
 background-image: var(--icon-required) !important;
 background-position: right center !important;
 background-repeat: no-repeat !important;
 background-size: contain !important;
}
select:required {
 background-image: var(--icon-required) !important;
 background-position: right 16px center !important;
 background-repeat: no-repeat !important;
 background-size: contain !important;
}

input:required:valid,
select:required:valid {
 --icon-required: var(--icon-tick) !important;
}

.was-validated .form-control:invalid {
 border-color: #dc3545 !important;
}

textarea {
 width: 100%;
 height: 200px;
}

/*------------------------------------------------------------------------------------------*/
/*	Reusable Components:																	*/
/*------------------------------------------------------------------------------------------*/
.section, .section-title, .section-white, .section-grey, .section-transgrey, .section-no-pad {
 width: 100%;
}

h2, h3 {
 margin-bottom: 30px;
}

.section-title {
 background-color: #3678c2;
 padding: 30px 10vw;
}
.section-white {
 background-color: white;
 padding: 60px 10vw;
}
.section-grey {
 background-color: #666;
 color: white;
 padding: 60px 10vw;
}
.section-transgrey {
 background-color: rgba(102, 102, 102, 0.7);
 color: white;
 padding: 60px 10vw;
}

.section-gutters-white,
.section-gutters-white-no-vert-pad,
.section-gutters-grey,
.section-gutters-blue {
  width: 80vw;
  margin: 0 10vw;
  padding: 18px 30px;
  position: relative;
}

.section-gutters-white-no-vert-pad {
  padding: 0 30px;
}

.section-gutters-white:before,
.section-gutters-white:after,
.section-gutters-white-no-vert-pad:before,
.section-gutters-white-no-vert-pad:after,
.section-gutters-grey:before,
.section-gutters-grey:after,
.section-gutters-blue:before,
.section-gutters-blue:after {
  top: 0;
  content: '';
  position: absolute;
  width: 10vw;
  height: 100%;
}

.section-gutters-white:before,
.section-gutters-white-no-vert-pad:before,
.section-gutters-grey:before,
.section-gutters-blue:before {
  left: 0;
  transform: translateX(-100%);
}

.section-gutters-white:after,
.section-gutters-white-no-vert-pad:after,
.section-gutters-grey:after,
.section-gutters-blue:after {
  left: 100%;
}


.section-gutters-white,
.section-gutters-white-no-vert-pad {
 background-color: white;
}

.section-gutters-white:before,
.section-gutters-white-no-vert-pad:before {
  background: linear-gradient(to right, rgba(102, 102, 102, 0.7), white 99%);

}

.section-gutters-white:after,
.section-gutters-white-no-vert-pad:after {
  background: linear-gradient(to right, white 1%, rgba(102, 102, 102, 0.7));

}

.section-gutters-grey {
  background-color: #666;
  color: white;
}

.section-gutters-grey:before {
  background: linear-gradient(to right, rgba(102, 102, 102, 0.7), #666 99%);

}

.section-gutters-grey:after {
  background: linear-gradient(to right, #666 1%, rgba(102, 102, 102, 0.7));

}

.section-gutters-blue {
  background-color: #3678c2;
  color: white;
}

.section-gutters-blue:before {
  background: linear-gradient(to right, rgba(102, 102, 102, 0.7), #3678c2 99%);
}

.section-gutters-blue:after {
  background: linear-gradient(to right, #3678c2 1%, rgba(102, 102, 102, 0.7));
}


.section-title h2 {
 margin-bottom: 0;
}

.section-title h2, .section-grey h2 {
 color: white;
 text-shadow: 4px 4px 4px #222;
}
.section-transgrey h2 {
	color: white;
}

.button {
 text-align: center;
 background-color: white;
 border-color: #555555;
 color: #555555;
 font-weight: bold;
 border-radius: 6px;
 border-style: solid;
 border-width: 2px;
 padding: 10px;
 text-decoration: none;
}

.button:disabled,
.button[disabled],
.button:disabled:hover,
.button[disabled]:hover {
  background: rgb(175, 175, 175);
  border-color: rgb(175, 175, 175);
  color: #FFF;
  cursor: unset;
}

.button a {
 color: #2ea3f2;
 text-decoration: none;
}

.button:hover {
 background: #555555;
 border-color: white;
 border-radius: 6px;
 border-style: solid;
 border-width: 2px;
 color: white;
}

.client-zone-button {
 text-align: center;
 font-size: 140%;
 padding: 10px;
 border: 3px solid #9aca3c;
 color: #9aca3c;
 font-weight: bold;
 text-decoration: none;
 border-radius: 10px;
}

.client-zone-button:hover {
 background-color: #9aca3c;
 color: white;
}

.divider {
 display: flex;
 justify-content: center;
 align-items: center;
 align-content: center;
 height: 50px;
 width: 100%;
 background-color: rgba(102, 102, 102, 0.7);
}

.divider .line {
 width: 90%;
 height: 5px;
 background-color: white;
}

ul.no-bullets {
 list-style: none;
}

.text-shadow {
  text-shadow: 4px 4px 4px #222;
}

/*---- Contact Form ----*/
.contact-form {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}

.contact-form-line {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
}

.contact-form-line h4 {
 color: #9aca3c;
}

.contact-form-line:last-of-type {
 flex-direction: row-reverse;
}

#contact-subject {
 width: 100%;
}

.section-separator {
  height: 20px;
  width: 100vw;
  content: '';
  background-color: rgba(102, 102, 102, 0.7);
}

.section-separator-blank {
  height: 20px;
  width: 100vw;
  content: '';
}

/*------------------------------------------------------------------------------------------*/
/*	On All Pages:																			*/
/*------------------------------------------------------------------------------------------*/
.back-to-top {
 background: none;
 margin: 0;
 position: fixed;
 bottom: 0;
 right: 0;
 width: 70px;
 height: 70px;
 z-index: 100;
 display: none;
 text-decoration: none;
 color: #333;
 opacity: 0.5;
 filter: alpha(opacity = 50);
}

.back-to-top i {
 font-size: 60px;
 text-shadow: 0 0 10px white;
}

/*---- Top Nav Bar ----*/
#top-bar {
 min-height: 40px;
 background-color: #3678c2;;
 color: white;
 display: flex;
 flex-direction: row;
 align-content: center;
 justify-content: space-between;
}

#top-bar-left, #top-bar-right {
 display: flex;
 flex-direction: row;
 align-items: center;
}

#top-bar-left a#facebook-icon, #top-bar-left a#linkedin-icon,
 #top-bar-left a#phone-icon, #top-bar a#cart-icon, #top-bar .login {
 display: inline-block;
 min-height: 25px;
 margin: auto 7px;
 min-width: 25px;
}

#top-bar-left a#facebook-icon {
 background: url(wfbico.png) no-repeat 0 0;
 background-size: cover;
}

#top-bar-left a#linkedin-icon {
 background: url(wliico.png) no-repeat 0 0;
 background-size: cover;
}

#top-bar-left a#phone-icon {
 background: url(wctico.png) no-repeat 0 0;
 background-size: cover;
}

.login a {
 text-decoration: none;
}

#top-bar .login {
 display: flex;
 justify-content: center;
 align-items: center;
 color: #333;
 padding: 5px;
 border-radius: 10px;
 text-decoration: none;
 background-color: white;
 min-height: 20px;
 width: auto;
}

#top-bar a#cart-icon {
 background: url(cart.png) no-repeat 0 0;
 background-size: cover;
}

#iewc-logo {
 height: 10vh;
}

#iewc-logo-link {
 height: 50%;
}

/*---- Header ----*/
header {
 background-color: #333;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-content: center;
 align-items: center;
 min-height: 110px;
}

header a {
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-content: center;
 align-items: center;
}

header nav {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-content: center;
 align-items: center;
}

header nav ul {
 text-align: center;
 margin-bottom: 0;
}

header nav li {
 display: inline-block;
 padding: 0 10px;
 border: 12px solid transparent;
}

header nav a {
 color: white;
 font-size: 120%;
 text-decoration: none;
 width: auto;
}

header nav a:hover {
 color: #99ca3d;
}

header #logo {
 padding: 10px 0;
 padding-top: 15px;
}

ul.nav2 {
 display: none;
 flex-direction: column;
 justify-content: space-between;
 position: absolute;
 border: 2px solid #ddd;
 border-radius: 5px;
 text-align: center;
 background-color: rgba(51, 51, 51, 0.7);
}

li.nav1:hover ul.nav2 {
	display: flex;
  z-index: 1000;
}

ul.nav2 li {
 display: block;
}

/*---- Footer ----*/
#ispa {
 display: flex;
 justify-content: center;
 align-items: center;
 align-content: center;
 background-color: white;
 padding: 10px 0;
 position: relative;
 margin: 20px 0 0 0;
}

#ispa:before {
  height: 20px;
  width: 100vw;
  content: '';
  background-color: rgba(102, 102, 102, 0.7);
  position: absolute;
  top: -20px;
}

footer {
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
 background-color: #666;
 color: white;
 padding: 15px 0;
}

footer a {
 color: white;
 padding: 0 15px;
 text-decoration: none;
}

footer a:hover {
 text-decoration: underline;
 color: #9aca3c;
}

#bottombar {
 background-color: #3678c2;
 color: white;
 padding: 20px 5px;
 display: flex;
 flex-direction: row;
 justify-content: center;
 align-items: center;
}

/*------------------------------------------------------------------------------------------*/
/*	"User Function" Pages																	*/
/*------------------------------------------------------------------------------------------*/

/*---- Forgot Password ----*/
#forgot-password-heading {
 background-color: white;
 padding: 60px;
}

#forgot-password {
 background-color: white;
 padding: 60px 10vw;
}

#forgot-password-form form {
 display: flex;
 flex-direction: column;
 justify-content: space-between;
}

#forgot-password-form input[type="text"] {
 width: 100%;
}

#forgot-password-form .button {
 align-self: center;
}

/*---- Register ----*/
#register {
 background-color: white;
 padding: 60px 10vw;
}

#register label {
 margin-right: 30px;
 display: flex;
 flex-direction: row;
 align-items: center;
 margin-bottom: 15px;
}

#register label h4 {
 margin-left: 10px;
}

#register h2, #register h3 {
 margin-bottom: 15px;
}

#register .password-feedback {
 margin-bottom: 30px;
}

/*---- Log In ----*/
#log-in {
 background-color: white;
 padding: 60px 10vw;
 text-align: center;
}

#log-in h3 {
 margin-bottom: 30px;
}

#log-in h4 {
 font-size: 120%;
 color: #555;
}

#log-in .contact-form-line {
 justify-content: center;
}

#log-in .contact-form {
 margin: 60px 0;
}

#failed-login {
 background-color: red;
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 15px;
 color: white;
 font-weight: bold;
 font-size: 100%;
}

/*---- Cart ----*/
#cart {
 background-color: white;
 padding: 60px 10vw;
 display: flex;
 flex-direction: column;
 justify-content: space-evenly;
 align-items: center;
}

#cart h2 {
 margin-bottom: 30px;
}

#cart form {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-bottom: 30px;
}

#cart form .btn {
 margin: 15px 0;
}

/*------------------------------------------------------------------------------------------*/
/*	Home Page																				*/
/*------------------------------------------------------------------------------------------*/

/*---- Connecting ----*/
#connecting {
 background: url('connecting.jpg') no-repeat center;
 background-size: cover;
 height: var(--section-title-height);
 display: flex;
 justify-content: center;
 align-items: center;
}

#overview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: justify;
}

/*---- IEWC ----*/
#iewc {
 background-color: #666;
 color: white;
 padding: 60px 10vw;
}

#iewc h2 {
 color: white;
 margin: 0 auto;
 text-shadow: 4px 4px 4px #222;
 padding-bottom: 20px;
}

#iewc p {
 color: white;
}

/*---- Contact Us ----*/
#contact {
 background-color: white;
 padding: 60px 10vw;
}

#contact h3 {
 text-align: center;
 margin-bottom: 30px;
}

/*---- Leading the World ----*/
#leading {
 display: flex;
 justify-content: center;
 align-items: center;
 background: url('leading2.webp') no-repeat center center;
 height: 400px;
}
.no-webp #leading {
 background: url('leading2.jpg') no-repeat center center;
}

#leading h2 {
 color: white;
 text-shadow: 4px 4px 4px #222;
}

/* ---- Promos Banner ----*/
#promos-banner {
  width: 100%;
  height: 120px;
  padding: 1rem;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: scroll;
  justify-content: center;
  align-items: center;
}

#promos-banner .promo-card {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
  border-radius: .125rem;
  border: 1px solid rgba(0,0,0,.125);
  height: 100%;
  width: 350px;
  margin: 0 1rem 0 0;
  color: #333 !important;
  background-color: white;
}

#promos-banner .promos-banner-inner {
  display: flex;
  justify-content: flex-start;
  height: 100%;
  /* width: 100%; */
  max-width: 100%;
}

#promos-banner .promo-card:hover {
  text-decoration: unset;
}

#promos-banner .promo-card .provider-img {
  height: 100%;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#promos-banner .promo-card .provider-img.mtn {
  background-color: #ffffff;
}

#promos-banner .promo-card .provider-img.frogfoot,
#promos-banner .promo-card .provider-img.openserve,
#promos-banner .promo-card .provider-img.vumatel {
  padding: 0 4px;
}

#promos-banner .promo-card .provider-img img {
  max-width: 100%;
  height: auto;
}

#promos-banner .promo-card .product-details {
  height: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 0 0 1rem;
  /* font-weight: bold; */
}

#promos-banner .promo-card .product-price {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: .5rem;
  align-items: center;
  justify-content: center;
  border-left: 1px solid rgba(0,0,0,.125);
}

#promos-banner .promo-card .product-price .price {
  width: 100%;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: .25rem;
  align-self: flex-end;
  margin: 0 0 .25rem 0;
}

#promos-banner .promo-card .product-price .price::after {
  content: 'pm';
  font-size: 75%;
  align-self: flex-end;
}

#promos-banner .promo-card .product-price .discount {
  width: 100%;
  background-color: rgb(238, 0, 0);
  color: white;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: .25rem;
  align-self: flex-end;
}

/* ---- Why Us ---- */

#why-us-title {
  color: #9aca3c;
}

#why-us-container {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  max-height: 75vh;
  border-radius: .25rem;
}

#why-us-container .points-container,
#why-us-container .testimonials-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50%;
  max-height: 100%;
  padding: .5rem 1rem;
}

#why-us-container .title {
  font-size: 150%;
}

#why-us-container .points-container .points,
#why-us-container .testimonials-container .testimonials {
  width: 100%;
}


#why-us-container .points-container {

}

#why-us-container .points-container .title {
}

#why-us-container .points-container .points {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: auto;
  height: 100%;
}

#why-us-container .points-container .points .point {
  color: white;
  display: flex;
  align-items: center;
  margin: 0 0 1rem 0;
}

#why-us-container .points-container .points .point i {
  margin: 0 1rem 0 0;
  color: #9aca3c;
  font-size: 200%;
}

#why-us-container .points-container .points .point .point-text .title {
  font-size: 120%;
  font-weight: bold;
}

#why-us-container .points-container .points .point .point-text .body {
  font-size: 90%;
  padding: 0 0 0 1rem;
  text-align: justify;
}

#why-us-container .testimonials-container {
}

#why-us-container .testimonials-container .title {
  margin: 0 0 1rem 0;
  font-weight: bold;
}

#why-us-container .testimonials-container .testimonials {
  padding: 2rem;
  border: 1px solid white;
  box-shadow: inset 0 .5rem 1rem rgba(0,0,0,.25) ;
  border-radius: .25rem;
  background-color: white;
  overflow-y: scroll;
}

#why-us-container .testimonials-container .testimonials .testimonial {
  /* border: 1px solid rgba(0,0,0,.15); */
  border: 1px solid white;
  color: #333;
  border-radius: .25rem;
  margin: 0 0 2rem 0;
  padding: 1rem;
  background-color: #3678c2;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.5) !important
}

#why-us-container .testimonials-container .testimonials .testimonial .detail {
  display: flex;
  color: white;
}

#why-us-container .testimonials-container .testimonials .testimonial .detail .user {

}

#why-us-container .testimonials-container .testimonials .testimonial .body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;
  font-style: italic;
  font-size: 120%;
  text-align: justify;
  color: white;
}

#why-us-container .testimonials-container .testimonials .testimonial .rating {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-weight: bold;
  font-size: 120%;
  color: white;
}

/* ---- Our Services ---- */

#home-overview-section {
  background-color: white;
  position: relative;
}

#home-our-services-section h2,
#home-our-services-section h3 {
  color: white;
  text-shadow: 4px 4px 4px #222;
}

.homepage-services-card-container a.card,
.homepage-services-card-container a.card:hover {
  text-decoration: none;
  color: #555;
}

.homepage-services-card-container .card h2 {
  color: #555 !important;
  font-size: 140%;
  font-style: normal;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.homepage-services-card-container .card .card-img {
  width: auto;
  max-height: 200px;
  display: block;
}

.homepage-services-card-container .card p {
  margin-bottom: 15px;
}

.homepage-services-card-container .card .button {
  margin-top: auto;
}

.homepage-services-card-container .card .card-footer {
  background-color: white;
  border-top: 0px;
}

#home-our-services-section .read-more-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 1rem 0 0 0;
}

.homepage-services-card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.homepage-service-card {
  aspect-ratio: 1;
  max-height: 100%;
  padding: 1rem;
  min-width: 280px;
  margin: 1rem;
}

.homepage-service-card .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.homepage-service-card .card-body .price {
  text-align: center;
  margin: 3rem 0 0 0;
}

.homepage-service-card .card-body h2.card-title {
  text-shadow: unset !important;
}

/* ---- Contact Us ---- */
#home-contact-section {
  background-image: url('leading2.webp');
  background-position: center;
  background-size: cover;
  background-color: rgba(54, 120, 194, 1);
  background-blend-mode: soft-light;
}

#home-contact-section h3 {
  color: white;
  text-shadow: 4px 4px 4px #222;
}

/*------------------------------------------------------------------------------------------*/
/*	About Us Page																			*/
/*------------------------------------------------------------------------------------------*/

#about-us-intro p {
  text-align: justify;
}

#about-us-banner {
 display: flex;
 justify-content: center;
 background-image: url(team.jpg);
 background-size: cover;
 height: var(--section-title-height);
 align-items: center;
 background-color: rgba(154, 202, 60, 1);
 background-blend-mode: darken;
}

#about-us-heading {
 background-color: white;
 padding: 60px 10vw;
}

#about-us-heading h3 {
 margin-bottom: 30px;
}

#about-us-body {
 display: flex;
 justify-content: space-evenly;
 flex-direction: column;
 overflow: auto;
}

.person {
 display: flex;
 justify-content: center;
 flex-direction: row;
 align-content: center;
 align-items: flex-start;
 background-color: #666;
}

.person .photo {
 display: flex;
 align-content: center;
 align-items: center;
 flex-direction: column;
 width: 280px;
 height: auto;
 margin-right: 40px;
 background-color: #666;
 border: 1px solid rgba(0,0,0,.3);
 border-radius: .25rem;
}

.person p {
  text-align: justify;
}

.person .description h2 {
 margin-bottom: 10px;
 font-size: 250%;
 color: #9aca3c;
}

.person .description h3 {
 margin-bottom: 30px;
 font-size: 150%;
 color: #d6ffc9;
}

.photo .title {
 font-size: 200%;
 font-weight: bold;
 background-color: transparent;
 color: white;
 position: static;
 margin-top: 0;
 margin-bottom: 10px;
 padding: 0;
 text-align: center;
}

.photo .subtitle {
 font-size: 140%;
 color: #d6ffc9;
 margin-bottom: 20px;
 text-align: center;
}

.photo img {
 margin: 20px 0;
 width: 80%;
 height: auto;
 border-radius: .25rem;
}

.photo h3 {
 color: #b4d88a;
 font-size: 120%;
 font-style: italic;
 font-weight: bold;
}

.person .description {
 width: 600px;
 color: white;
 padding: 30px;
 background-color: #666;
 border: 1px solid rgba(0,0,0,.3);
 border-radius: .25rem;
}

.person p, .person .quote {
 color: white;
}

.about-us-contact {
 background-color: white;
 padding: 60px;
}

.about-us-contact h3 {
 margin: auto 0;
 margin-bottom: 30px;
 text-align: center;
 font-size: 220%;
}

/*------------------------------------------------------------------------------------------*/
/*	Service Page																			*/
/*------------------------------------------------------------------------------------------*/
#services-intro p {
  text-align: justify;
}

#services-banner {
 background-image: url('keyboard.jpg');
 background-position: center;
 background-size: cover;
 height: var(--section-title-height);
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: rgba(51, 51, 51, .75);
 background-blend-mode: color;
}

#services-banner h2 {
 color: white;
 text-shadow: 4px 4px 4px #222;
}

#services-heading {
 background-color: white;
 padding: 60px 10vw;
}

#services-heading h2 {
 margin-bottom: 30px;
}

.services-cards {
  background-color: #666;
  padding: 60px 0;
  margin: 0 10vw;
  width: 80vw;
  position: relative;
}

.services-cards:before,
.services-cards:after {
  top: 0;
  content: '';
  position: absolute;
  width: 10vw;
  height: 100%;
}

.services-cards:before {
  left: 0;
  transform: translateX(-100%);
  background: linear-gradient(to right, rgba(102, 102, 102, 0.7), #666 99%);
}

.services-cards:after {
  left: 100%;
  background: linear-gradient(to right, #666 1%, rgba(102, 102, 102, 0.7));
}

.services-cards a.card,
.services-cards a.card:hover {
  text-decoration: none;
  color: #555;
  height: 100%;
}

.services-cards .card h2 {
  color: #555;
  font-size: 140%;
  font-style: normal;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.services-cards .card .card-img {
  width: auto;
  max-height: 200px;
  display: block;
  margin: 0 auto;
}

.services-cards .card p {
  margin-bottom: 15px;
}

.services-cards .card .button {
  margin-top: auto;
}

.services-cards .card .card-footer {
  background-color: white;
  border-top: 0px;
}

.services-cards .card .card-body p {
  text-align: justify;
}

.services-container {
 width: 100%;
 display: flex;
 justify-content: space-around;
 flex-wrap: wrap;
}

#services {
 background-color: white;
 padding: 40px;
}

#services h2 {
 margin-bottom: 40px;
}

#services p {
 margin-bottom: 20px;
}

#services p:last-of-type {
 margin-bottom: 60px;
}

/*------------------------------------------------------------------------------------------*/
/*	Contact Us Page																			*/
/*------------------------------------------------------------------------------------------*/
#contact-us-banner {
 background-image: url('flowerpot.jpg');
 background-position: center;
 background-size: cover;
 height: var(--section-title-height);
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: rgba(54, 120, 194, 1);
 background-blend-mode: soft-light;
 position: relative;
 margin: 0 0 20px 0;
}

#contact-us-banner:after {
  position: absolute;
  bottom: -20px;
  height: 20px;
  width: 100vw;
  content: '';
  background-color: rgba(102, 102, 102, 0.7);
}

#contact-us-banner h2 {
 color: white;
 text-shadow: 4px 4px 4px #222;
}

#contact-us-body {
 background-color: white;
 display: flex;
 flex-direction: row;
 justify-content: space-evenly;
 align-items: center;
 width: 100%;
 height: 80vh;
}

#contact-us-text {
 text-align: left;
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 align-items: center;
 width: 33%;
 margin: 60px 0;
}

#contact-us-text h3 {
 margin-bottom: 15px;
}

#contact-us-map {
 width: 66%;
 height: 80%;
 padding: 0 1em;
}

/*------------------------------------------------------------------------------------------*/
/*	Connectivity Page																		*/
/*------------------------------------------------------------------------------------------*/
#connectivity-banner {
 background-image: url("cable.jpg");
 background-position: center;
 background-size: cover;
 height: var(--section-title-height);
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: rgba(51, 51, 51, .75);
 background-blend-mode: hue;
 position: relative;
 margin: 0 0 20px 0;
}

#connectivity-banner:after {
  position: absolute;
  bottom: -20px;
  height: 20px;
  width: 100vw;
  content: '';
  background-color: rgba(102, 102, 102, 0.7);
}

#connectivity-banner h2 {
 color: white;
 text-shadow: 4px 4px 4px #222;
}

#connectivity-checker {
 background-color: white;
}

.connectivity-price {
 font-size: 150%;
 display: flex;
 justify-content: space-between;
 margin-bottom: 10px;
}

#onceoff, #monthly, #price {
 display: inline-block;
}

.vat {
 font-size: 100%;
 font-style: italic;
 font-weight: bold;
 text-align: right;
 color: white;
}

#dsl_number, #fibre_address_1, #fibre_address_2, #fibre_address_3,
 #fibre_province {
 width: 100%;
}

.number-of-gigs {
 display: flex;
 flex-direction: row;
 justify-content: flex-end;
 margin-bottom: 30px;
}

/*---- Connectivity Form ----*/
.connectivity-form-section {
 margin-bottom: 30px;
 padding: 30px;
 background-color: lightgrey;
 border-radius: 20px;
}

.connectivity-form-options-container {
 display: flex;
 flex-direction: row;
 justify-content: center;
 margin-bottom: 15px;
}

.connectivity-form-section label {
 margin-right: 30px;
 display: flex;
 flex-direction: row;
 align-items: center;
}

.connectivity-form-section label h4 {
 font-size: 120%;
 margin-left: 5px;
}

/*------------------------------------------------------------------------------------------*/
/*	VoIP Page																				*/
/*------------------------------------------------------------------------------------------*/
#voip-banner {
 background-image: url("phone.jpg");
 background-position: center;
 background-size: cover;
 height: var(--section-title-height);
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: rgba(51, 51, 51, .75);
 background-blend-mode: hue;
 position: relative;
 margin: 0 0 20px 0;
}

#voip-banner:after {
  position: absolute;
  bottom: -20px;
  height: 20px;
  width: 100vw;
  content: '';
  background-color: rgba(102, 102, 102, 0.7);
}

#voip-banner h2 {
 color: white;
 text-shadow: 4px 4px 4px #222;
}

#voip-intro {
 background-color: white;
 padding: 60px 60px;
}

#voip-intro-title {
 margin-bottom: 60px;
}

#voip-intro-title h3 {
 text-align: center;
 color: white;
 text-shadow: 4px 4px 4px #222;
}

#voip-intro-image {
 background: url('voip.png') no-repeat center;
 background-size: contain;
 height: 350px;
 width: 450px;
}

#voip-intro-body {
 display: flex;
 flex-direction: row;
 align-items: center;
}

#voip-intro-text p {
  text-align: justify;
}

#voip-intro-text h3 {
 margin: 60px 0 15px 0;
 color: white;
 text-shadow: 4px 4px 4px #222;
}

#voip-pricing {
 background-color: white;
 padding: 60px 120px;
}

#voip-pricing h3 {
 margin-bottom: 30px;
}

#voip-pricing-card-container {
 width: 100%;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
}

#voip-order {
	display: none;
}

.voip-pricing-card {
 width: 250px;
 display: flex;
 flex-direction: column;
 /*border: 2px solid #CCC;*/
}

.voip-pricing-card-title {
 display: flex;
 background-color: #CCC;
 height: 10%;
 width: 100%;
 color: white;
 font-size: 150%;
 font-style: bold;
 text-align: center;
 align-content: center;
 align-items: center;
 justify-content: center;
 padding: 10px;
}

.voip-pricing-card-price {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 20%;
 width: 100%;
 border: 2px solid #CCC;
}

.voip-pricing-card-price h1 {
 font-size: 300%;
 color: #639cff;
}

.voip-pricing-card-price h3 {
 margin: 0;
 font-size: 100%;
}

.voip-pricing-card-price h3:first-of-type {
 margin-bottom: 15%;
 font-style: bold;
}

.voip-pricing-card-price h3:last-of-type {
 margin-top: 20%;
}

.voip-pricing-card-body {
 height: auto;
 width: 100%;
 padding-right: 10px;
 border: 2px solid #CCC;
 border-top: none;
}

.voip-pricing-card-body ul.no-bullets {
 padding-top: 30px;
 padding-left: 15px;
}

#specialised-features {
 font-size: 90%;
 padding: 5px;
 margin-left: 20px;
 margin-right: 20px;
 margin-bottom: 20px;
 margin-top: -10px;
 background-color: #EEE;
}

#specialised-features ul {
 padding-left: 15px;
}

li.tick {
 background: url("checked.png") no-repeat left;
 background-size: 15px 15px;
 padding-left: 25px;
 margin-bottom: 15px;
 font-size: 120%;
}

li.cross {
 background: url("error.png") no-repeat left;
 background-size: 15px 15px;
 padding-left: 25px;
 margin-bottom: 15px;
 font-size: 120%;
}

.voip-pricing-card .button {
 margin: 0 auto;
 margin-top: 10px;
}

/*------------------------------------------------------------------------------------------*/
/*	Linux Solutions Page																	*/
/*------------------------------------------------------------------------------------------*/
#solutions-banner {
 background-image: url("server-room.jpg");
 background-position: center;
 background-size: cover;
 height: var(--section-title-height);
 display: flex;
 justify-content: center;
 align-items: center;
 background-color: rgba(51, 51, 51, .25);
 background-blend-mode: hue;
 position: relative;
 margin: 0 0 20px 0;
}

#solutions-banner:after {
  position: absolute;
  bottom: -20px;
  height: 20px;
  width: 100vw;
  content: '';
  background-color: rgba(102, 102, 102, 0.7);
}

#solutions-banner h2 {
 color: white;
 text-shadow: 4px 4px 4px #222;
}

#solutions-intro-text p {
  text-align: justify;
}

#solutions-intro-title {
 text-align: center;
 margin: 0 auto;
 margin-bottom: 60px;
}

#solutions-intro-image {
 background: url('linux.png') no-repeat center;
 background-size: contain;
 height: 350px;
 width: 450px;
}

#solutions-intro-body {
 display: flex;
 flex-direction: row;
 align-items: center;
}

/*------------------------------------------------------------------------------------------*/
/*	Product Page																			*/
/*------------------------------------------------------------------------------------------*/
#product {
 background-color: white;
 padding: 60px 10vw;
 display: flex;
 flex-direction: column;
 justify-content: space-evenly;
 align-items: center;
}

#product h3 {
 font-size: 120%;
}

#product h2 {
 margin-bottom: 30px;
}

.quantity-buttons {
 margin: 0 10px;
 display: flex;
 flex-direction: row;
 align-items: baseline;
}

.button.minus, .button.plus {
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 0 5px;
 padding: 5px;
 width: 40px;
 height: 30px;
 font-weight: bold;
 font-size: 120%;
}

#product form {
 display: flex;
 flex-direction: column;
 align-items: center;
}

#product form table {
 margin-bottom: 30px;
}

#product .contact-form h3 {
 margin-bottom: 30px;
}

#product .contact-form {
 width: 100%;
}

#product .contact-form input {
 width: 100%;
}

#voip-address {
 width: 100%;
}

.product-image {
 width: 100px;
}

.quantity-buttons input {
 padding: 10px;
 width: 50px;
}

/*------------------------------------------------------------------------------------------*/
/*	Client Zone page																		*/
/*------------------------------------------------------------------------------------------*/
#client-zone {
 display: flex;
 justify-content: space-between;
 flex-direction: column;
 align-items: center;
 background-color: white;
 padding: 60px 10vw;
}

#client-zone h2, #client-zone h3 {
 margin-bottom: 30px;
}

#client-zone .client-zone-button {
 margin-bottom: 15px;
}

#client-zone-banner {
 background: url("beach.jpg") no-repeat center;
 background-size: cover;
 height: var(--section-title-height);
 display: flex;
 justify-content: center;
 align-items: center;
}

#client-zone-banner h2 {
 color: white;
 text-shadow: 4px 4px 4px #222;
}

#successful-update {
 text-align: center;
 background-color: #666;
 align-self: center;
 padding: 10px;
 border-radius: 5px;
 margin-bottom: 10px;
}

/*------------------------------------------------------------------------------------------*/
/*	Policies page																			*/
/*------------------------------------------------------------------------------------------*/
#policies, #proatia, #aup, #ispa-coc, #minors, #spam, #security,
 #privacy, #complaints, #infringements {
 background-color: white;
 padding: 30px;
}

#proatia h2, #aup h2, #ispa-coc h2, #minors h2, #spam h2, #security h2,
 #privacy h2, #complaints h2, #infringements h2 {
 margin-bottom: 30px;
}

/*------------------------------------------------------------------------------------------*/
/*	Markdown pages																			*/
/*------------------------------------------------------------------------------------------*/

#markdown-docs-title {
	display: flex;
	justify-content: center;
	background-image: url(documentation.png);
	background-size: cover;
	height: var(--section-title-height);
	align-items: center;
	background-color: #3677c2;
	background-blend-mode: soft-light;
}

#markdown-blogs-title {
  display: flex;
	justify-content: center;
	background-image: url(orange_tie.png);
	background-size: cover;
	height: var(--section-title-height);
	align-items: center;
	background-color: rgba(154, 202, 60, 1);
	background-blend-mode: soft-light;
}

/*------------------------------------------------------------------------------------------*/
/*	Media Queries																			*/
/*------------------------------------------------------------------------------------------*/
@media ( max-width : 1590px) {
  /* .homepage-services-col {
    flex: 0 0 30%;
    max-width: 30%;
  } */
}

@media ( max-width : 1240px) {
  #why-us-container {
    flex-direction: column;
   }

   #why-us-container {
    max-height: unset;
   }

   #why-us-container .points-container,
   #why-us-container .testimonials-container {
    width: 100%;
    padding: 0;
   }

   #why-us-container .points-container {
    margin: 0 0 1rem 0;
   }

   #why-us-container .testimonials-container .testimonials {
    max-height: 50vh;
    padding: 1rem;
   }
}

@media ( max-width : 1060px) {
 /*Image Resolutions 1060 x 320*/
 #markdown-docs-title {
	background-image: url(documentation2.png);
 }
 #markdown-blogs-title {
	background-image: url(orange_tie2.png);
 }
 #connecting {
  background: url('connecting2.webp') no-repeat center;
 }
 .no-webp #connecting {
  background: url('connecting2.jpg') no-repeat center;
 }
 #about-us-banner {
  background: url(team2.jpg) no-repeat;
 }
 #services-banner {
  background: url('keyboard2.jpg') no-repeat center;
 }
 #connectivity-banner {
  background: url("cable2.jpg") no-repeat center;
 }
 #voip-banner {
  background: url("phone2.jpg") no-repeat center;
 }
 #solutions-banner {
  background: url("server-room2.jpg") no-repeat center;
 }
 #contact-us-banner {
  background: url('flowerpot2.jpg') no-repeat center;
 }
 #client-zone-banner {
  background: url("beach2.jpg") no-repeat center;
 }
 .connectivity-form-section label {
  margin-right: 15px;
 }
 .connectivity-form-section label h4 {
  font-size: 100%;
 }
 #voip-pricing {
  padding: 60px;
 }
}

@media ( max-width : 1050px) {
 #services-card {
  width: 250px;
 }
 #services-card-heading h2 {
  font-size: 130%;
 }
 #services-card-heading .voip, #services-card-heading .connectivity,
  #services-card-heading .linux-solutions {
  min-width: 150px;
  min-height: 150px;
 }
}

@media ( max-width : 900px) {
 #voip-pricing-card-container {
  flex-wrap: wrap;
 }
 .voip-pricing-card .button {
  margin-bottom: 30px;
 }
}

@media ( max-width : 880px) {
 /*Image Resolutions 900 x 320*/
 #markdown-docs-title {
	background-image: url(documentation3.png);
}
 #markdown-blogs-title {
	background-image: url(orange_tie3.png);
 }
 #connecting {
  background: url('connecting3.jpg') no-repeat center;
 }
 #about-us-banner {
  background: url(team3.jpg) no-repeat;
 }
 #services-banner {
  background: url('keyboard3.jpg') no-repeat center;
 }
 #connectivity-banner {
  background: url("cable3.jpg") no-repeat center;
 }
 #voip-banner {
  background: url("phone3.jpg") no-repeat center;
 }
 #solutions-banner {
  background: url("server-room3.jpg") no-repeat center;
 }
 #contact-us-banner {
  background: url('flowerpot3.jpg') no-repeat center;
 }
 #client-zone-banner {
  background: url("beach3.jpg") no-repeat center;
 }
 p {
  margin-bottom: 20px;
 }
 h2 {
  font-size: 250%;
 }
 h3 {
  font-size: 180%;
 }
 h4 {
  font-size: 140%
 }
 header {
  flex-direction: column;
 }
 ul.nav2 {
  flex-direction: row;
  justify-content: space-around;
  margin: 0 10px;
 }
 #services-card {
  width: 200px;
  height: 400px;
 }
 #services-card p {
  margin-bottom: 10px;
  font-size: 80%;
 }
 #services-card-heading h2 {
  font-size: 100%;
 }
 #services-card-heading .voip, #services-card-heading .connectivity,
  #services-card-heading .linux-solutions {
  min-width: 100px;
  min-height: 100px;
 }
 .person {
  flex-direction: column;
  align-items: center;
 }
 .person .photo {
  margin: 0;
  margin-bottom: 15px;
 }
 .divider {
  height: 25px;
 }
 .divider .line {
  height: 2px;
 }
 #contact {
  padding: 30px;
 }
 #voip-intro-image, #solutions-intro-image {
  height: 150px;
  width: 250px;
  margin-bottom: 10px;
 }
 #voip-intro-body, #solutions-intro-body {
  flex-direction: column;
 }
 #voip-intro-text, #solutions-intro-text {
  margin: 0;
 }
 #voip-intro-title, #solutions-intro-title {
  margin-bottom: 10px;
 }
 #loginprompt, #passwordprompt {
  width: 80%;
 }
 #product h3 {
  font-size: 80%;
 }
 tbody {
  font-size: 100%;
 }
 .button.minus, .button.plus {
  width: 20px;
  height: 30px;
  font-size: 80%;
 }
}

@media ( max-width : 880px) {
  .section-gutters-white,
  .section-gutters-white-no-vert-pad,
  .section-gutters-grey,
  .section-gutters-blue {
    padding: 60px 10px !important;
  }
}

@media ( max-width : 650px) {
 /*Image Resolutions 700 x 320*/
 #markdown-docs-title {
	background-image: url(documentation4.png);
}
 #markdown-blogs-title {
	background-image: url(orange_tie4.png);
 }
 #connecting {
  background: url('connecting4.jpg') no-repeat center;
 }
 #about-us-banner {
  background: url(team4.jpg) no-repeat;
 }
 #services-banner {
  background: url('keyboard4.jpg') no-repeat center;
 }
 #connectivity-banner {
  background: url("cable4.jpg") no-repeat center;
 }
 #voip-banner {
  background: url("phone4.jpg") no-repeat center;
 }
 #solutions-banner {
  background: url("server-room4.jpg") no-repeat center;
 }
 #contact-us-banner {
  background: url('flowerpot4.jpg') no-repeat center;
 }
 #client-zone-banner {
  background: url("beach4.jpg") no-repeat center;
 }
 #services-body {
  flex-direction: column;
 }
 #services-card {
  margin-bottom: 15px;
  width: 250px;
 }
 .person {
  padding: 15px;
 }
 .person .photo {
  width: 200px;
 }
 .person .description {
  width: 100%;
 }
 .photo .title {
  font-size: 150%;
 }
 .photo .subtitle {
  font-size: 110%;
 }
 .person .description h2 {
  font-size: 200%;
 }
 .person .description h3 {
  font-size: 110%;
 }
 #voip-pricing-card-container {
  flex-direction: column;
  align-items: center;
 }
 #contact-us-body {
  flex-direction: column;
 }
 #contact-us-text {
  margin: 30px 0;
  width: 80%;
 }
 #contact-us-map {
  width: 100%;
  height: 50%;
 }
 tbody {
  font-size: 80%;
 }
 .product-image {
  width: 50px;
 }
}

@media ( max-width : 610px) {
 /*Image Resolutions 620 x 150*/
 #markdown-docs-title {
	background-image: url(documentation5.png);
}
 #markdown-blogs-title {
	background-image: url(orange_tie5.png);
 }
 #connecting {
  background: url('connecting5.jpg') no-repeat center;
 }
 #about-us-banner {
  background: url(team5.jpg) no-repeat;
 }
 #services-banner {
  background: url('keyboard5.jpg') no-repeat center;
 }
 #connectivity-banner {
  background: url("cable5.jpg") no-repeat center;
 }
 #voip-banner {
  background: url("phone5.jpg") no-repeat center;
 }
 #solutions-banner {
  background: url("server-room5.jpg") no-repeat center;
 }
 #contact-us-banner {
  background: url('flowerpot5.jpg') no-repeat center;
 }
 #client-zone-banner {
  background: url("beach5.jpg") no-repeat center;
 }
 h2 {
  font-size: 200%;
 }
 h3 {
  font-size: 120%;
 }
 h4 {
  font-size: 100%;
 }
 .section {
  margin-top: 40px;
 }
 #connecting, #about-us-banner, #services-banner, #connectivity-banner,
  #voip-banner, #solutions-banner, #contact-us-banner,
  #client-zone-banner {
  height: 150px;
 }
 #iewc, #services-heading, #contact, #about-us-heading, #log-in {
  padding: 30px;
 }
 #services-body {
  padding-bottom: 30px;
 }
 #leading {
  height: 200px;
 }
 .connectivity-form-section label {
  margin-right: 10px;
 }
 .connectivity-form-section label h4 {
  font-size: 80%;
 }
 .connectivity-price {
  font-size: 120%;
 }
 #voip-intro-image, #solutions-intro-image {
  height: 50px;
  width: 150px;
 }
 .voip-pricing-card-title {
  font-size: 120%;
 }
 .voip-pricing-card-price h1 {
  font-size: 200%;
 }
 .voip-pricing-card-price h3 {
  font-size: 80%;
 }
 li.tick, li.cross {
  font-size: 80%;
  background-size: 10px 10px;
 }
 #specialised-features {
  font-size: 70%;
 }
 .password-feedback {
  font-size: 80%;
 }
}

@media ( max-width : 540px) {
 .connectivity-form-options-container {
  flex-direction: column;
 }
 .client-zone-button {
  font-size: 100%;
 }
}

@media ( max-width : 474px) {
 header nav a {
  font-size: 100%;
 }
}

@media ( max-width : 426px) {
 p {
  font-size: 80%;
  margin-bottom: 10px
 }
 h2 {
  font-size: 150%;
 }
 #log-in h4 {
  font-size: 60%;
 }
 header a {
  width: 300px;
 }
 header nav li {
  padding: 0 5px;
  border: 6px solid transparent;
 }
 #voip-intro, #solutions-intro {
  padding: 30px;
 }
 #log-in .contact-form {
  margin: 30px 0;
 }
 #log-in h3 {
  font-size: 80%;
 }
 tbody {
  font-size: 60%;
 }
 .product-image {
  width: 25px;
 }
 .quantity-buttons input {
  padding: 5px;
 }
 .button.minus, .button.plus {
  width: 20px;
  height: 20px;
  font-size: 60%;
  padding: 2px;
 }
}

@media ( max-width : 330px) {
 /*Image Resolutions 350 x 150*/
 #markdown-docs-title {
	background-image: url(documentation6.png);
}
 #markdown-blogs-title {
	background-image: url(orange_tie6.png);
 }
 #connecting {
  background: url('connecting6.jpg') no-repeat center;
 }
 #about-us-banner {
  background: url(team6.jpg) no-repeat;
 }
 #services-banner {
  background: url('keyboard6.jpg') no-repeat center;
 }
 #connectivity-banner {
  background: url("cable6.jpg") no-repeat center;
 }
 #voip-banner {
  background: url("phone6.jpg") no-repeat center;
 }
 #solutions-banner {
  background: url("server-room6.jpg") no-repeat center;
 }
 #contact-us-banner {
  background: url('flowerpot6.jpg') no-repeat center;
 }
 #client-zone-banner {
  background: url("beach6.jpg") no-repeat center;
 }
 header nav li {
  padding: 0 2px;
 }
 header nav a {
  font-size: 80%;
 }
}