/*
Theme Name: CTN Consulting
Theme URI: http://ctnconsulting.co.za
Author: Mdabuko Magadlela
Author URI: http://twitter.com/mdabukozw/
Description: The 2020 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: oxford, cerise, turquoise, data, privacy, ai, technology
Text Domain: ctn

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

body {
  margin: 0px;
  padding: 0px;
  font-family: "Public Sans", Arial, sans-serif;
  font-weight: 300;
  line-height: 1.3;
  font-size: 16px;
  background-color: #ecf0f1;
}
*::moz-selection {
  color: #fff;
  background-color: red;
}
nav,
.nav {
  display: block;
  position: fixed;
  margin: 0px;
  top: 0px;
  left: 0px;
  width: 100%;
  box-sizing: border-box;
  z-index: 3;
  text-align: left;
}
nav ul,
.nav ul {
  margin: 0;
  background-color: inherit;
}
nav ul li,
.nav ul li {
  display: inline-block;
  font-weight: 300;
  font-size: 14px;
  text-transform: uppercase;
  color: #ffffff;
  position: relative;
  box-sizing: border-box;
  padding: 2.5em;
}
nav ul li span,
.nav ul li span {
  display: inline-block;
}
nav ul li ul,
.nav ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}
nav ul li ul li,
.nav ul li ul li {
  display: block;
  background-color: #ffffff;
  width: 25em;
  margin: -1px;
  color: black;
}
nav ul li ul li:hover,
.nav ul li ul li:hover {
  background-color: #723e9e;
  color: #ffffff;
}
nav ul li:hover ul,
.nav ul li:hover ul {
  display: block;
}
a {
  text-decoration: none;
  color: inherit;
}
a:hover {
  color: inherit;
}
div {
  display: inline-block;
  position: relative;
  float: left;
  min-height: 10px;
  overflow: hidden;
}
section,
.section {
  display: block;
  position: relative;
  background-size: cover;
  background-position: center;
  clear: both;
  float: left;
  box-sizing: border-box;
  padding: 5em;
  width: 100%;
  background-color: #ffffff;
}
.section-title {
  margin-bottom: 3em;
  background-color: inherit;
}
#hero {
  display: block;
  position: relative;
  margin: 0 auto;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 80vh;
  background-attachment: scroll;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0;
}
#main {
  display: block;
  position: relative;
  margin: 2% auto;
  z-index: 2;
  float: unset;
  clear: both;
  height: auto;
  background-color: inherit;
  max-width: 1024px;
  margin-bottom: 1%;
  box-sizing: border-box;
}
#courier-cta {
  background-color: #ffffff;
  color: black;
  border-radius: .25em;
}
h1 {
  font-family: "Public Sans", sans-serif;
  font-size: 28pt;
  line-height: 1.2;
}
h1 p {
  font-size: 28pt;
  color: white;
}
h2 {
  display: block;
  word-wrap: break-word;
  word-break: keep-all;
  clear: both;
  font-size: 20pt;
}
h4 {
  font-family: "Public Sans";
  text-transform: uppercase;
  font-size: 2em;
  font-weight: 900;
  line-height: 1;
}
h5 {
  font-size: 18px;
  font-weight: 700;
}
small {
  display: block;
  font-size: 10px;
  text-align: inherit;
}
figure {
  display: inline-block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
  color: #ffffff;
  overflow: hidden;
  margin-top: .5em;
}
figure img {
  width: 100%;
}
button,
.button {
  background-color: #662d91;
  height: auto;
  box-sizing: border-box;
  padding: 1em 5em;
  border-radius: 0;
  color: #ffffff;
  border: none;
}
button:hover,
.button:hover {
  background-color: #5d3681;
  color: #ffffff;
}
p {
  font-weight: 300;
  font-size: 1.125em;
  color: #34495e;
}
label {
  font-weight: 400;
  font-size: 1.125em;
}
em,
blockquote {
  color: #95a5a6;
  font-style: italic;
}
input,
input[type='text'],
input[type='email'],
input[type='number'],
input[type='date'],
textarea,
select {
  border: none;
  text-align: left;
  border-radius: 0!important;
  margin-top: .35em;
  background: none;
  border-bottom: 1px solid #95a5a6;
  font-family: sans-serif;
  resize: none;
  transition: 0.3s ease-in-out all;
  font-size: 1.125em;
}
input:focus,
input[type='text']:focus,
input[type='email']:focus,
input[type='number']:focus,
input[type='date']:focus,
textarea:focus,
select:focus,
input:hover,
input[type='text']:hover,
input[type='email']:hover,
input[type='number']:hover,
input[type='date']:hover,
textarea:hover,
select:hover {
  background-color: #ecf0f1;
  border: none;
  border-bottom: 2px solid #662d91;
}
input:hover label,
input[type='text']:hover label,
input[type='email']:hover label,
input[type='number']:hover label,
input[type='date']:hover label,
textarea:hover label,
select:hover label {
  color: red;
}
.scrollable-x {
  overflow-x: auto;
}
.scrollable-y {
  overflow-y: auto;
}
footer {
  display: block;
  float: left;
  margin: 0 auto;
}
footer ul {
}
footer ul li {
  display: inline-block;
  background-color: inherit;
  color: #ffffff;
}
.modal {
  position: fixed;
  z-index: 100;
  background: #484848db;
  height: 100vh;
}
.vanilla-bg {
  background-color: #ffffff;
}
/*-------------------------------------------------------*/
.client.reel-detail {
  display: block;
  clear: both;
  text-align: center;
  text-transform: normal;
  font-size: 16px;
  margin: auto auto;
  width: 85%;
}
.client.reel-detail-title {
  display: block;
  text-align: center;
  clear: both;
  font-size: 1.25em;
  font-weight: 600;
  transition: 0.2s ease-in-out all;
}
.client.reel-detail-title:hover {
  background-color: #723e9e;
  color: #ffffff;
}
#contacts,
#intro,
#join-us,
#enquiries {
  background-color: #723e9e;
  color: #ffffff;
}
#contacts p,
#intro p,
#join-us p,
#enquiries p {
  color: inherit;
}
#contacts form,
#intro form,
#join-us form,
#enquiries form {
  background: none;
}
#contacts form input,
#intro form input,
#join-us form input,
#enquiries form input,
#contacts form textarea,
#intro form textarea,
#join-us form textarea,
#enquiries form textarea,
#contacts form label,
#intro form label,
#join-us form label,
#enquiries form label {
  color: #ffffff;
}
#contacts form input:hover,
#intro form input:hover,
#join-us form input:hover,
#enquiries form input:hover,
#contacts form textarea:hover,
#intro form textarea:hover,
#join-us form textarea:hover,
#enquiries form textarea:hover,
#contacts form label:hover,
#intro form label:hover,
#join-us form label:hover,
#enquiries form label:hover,
#contacts form input:focus,
#intro form input:focus,
#join-us form input:focus,
#enquiries form input:focus,
#contacts form textarea:focus,
#intro form textarea:focus,
#join-us form textarea:focus,
#enquiries form textarea:focus,
#contacts form label:focus,
#intro form label:focus,
#join-us form label:focus,
#enquiries form label:focus {
  background: none;
}
#courier-intro,
#courier-contacts {
  background-color: #f7931e;
}
#courier-intro p,
#courier-contacts p {
  color: #000000;
}
#courier-intro form,
#courier-contacts form {
  background: none;
}
#courier-intro form button,
#courier-contacts form button {
  background-color: #d07b17;
}
#courier-intro form input,
#courier-contacts form input,
#courier-intro form textarea,
#courier-contacts form textarea,
#courier-intro form label,
#courier-contacts form label {
  color: black;
}
#courier-intro form input:hover,
#courier-contacts form input:hover,
#courier-intro form textarea:hover,
#courier-contacts form textarea:hover,
#courier-intro form label:hover,
#courier-contacts form label:hover,
#courier-intro form input:focus,
#courier-contacts form input:focus,
#courier-intro form textarea:focus,
#courier-contacts form textarea:focus,
#courier-intro form label:focus,
#courier-contacts form label:focus {
  background: none;
}
#courier-footer {
  background-color: #d07b17;
}
#courier-footer ul {
  background-color: #d07b17;
}
#courier-footer ul li {
  display: inline-block;
  background-color: inherit;
  color: #ffffff;
}
.read-more_link {
  color: #5d3681;
  font-size: .95em;
  font-weight: 600;
}
.u-purple-bg {
  background-color: #723e9e;
  color: #ffffff;
}
.u-dark-purple-bg {
  background-color: #5D3681;
  color: white; 
}
.u-orange-bg {
  background-color: #f7931e;
  color: black;
}
.u-orange-bg button {
  background-color: #d07b17;
}
.u-dark-orange-bg {
  background-color: #d07b17;
  color: black;
}
@media screen and (max-width: 600px) and (orientation: landscape), screen and (max-width: 640px) and (orientation: portrait) {
  #hero {
    height: auto;
    max-height: 20em;
  }
  .section-title {
    font-size: 1.25em;
  }
  h1,
  h4 {
    font-size: 1.5em;
  }
  section {
    padding: 0;
  }
  .u-pull-right {
    float: initial;
  }
  .scrollable-y {
    height: 300px;
  }
  .height-35 {
    height: 100vh!important;
  }
  nav {
    display: none;
  }
  nav ul li {
    display: block;
  }
  nav .gutted-60 {
    padding: 1.5em;
  }
  .nav ul li {
    display: block;
  }
  .nav .gutted-60 {
    padding: 1.5em;
  }
}