/*
    My custom CSS rules new or to override responsee rules
    @Author: Andrew L Kwabula
    @Company: KAL Computaz
    @Date: 27/ 04/ 2017
*/


/*
imported google fonts
font-family: 'Ubuntu', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Spectral', serif;
*/
html {
    padding: 0;
    margin: 0;
}

body {
    margin: 0 auto;
    background-color: #fff;
}

p {
    color: #111;
    font-size: 1.0rem;
    line-height: 1.4rem;
    font-family: 'Ubuntu', sans-serif;
    padding-bottom: .9rem; 
}

ol, ul {
    padding: .3rem;
    padding-left: 3rem; /*this has been overiden in media queries styles for medium and small screens*/
}
ul>li,
ol>li {
    font-size: 1.0rem;
    line-height: 1.6rem;
    font-family: 'Ubuntu', sans-serif;
    list-style-type: square;
}

a,
a:link,
a:visited,
a:hover,
a:active {
    color: #aaa;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: #777 !important;
    margin-bottom: 0.625rem;
    /* Changed from 15px to 10px by Andrew Kwabula on 12/02/2017*/
    margin-top: 0.3rem;
}

.main-content {
    margin: 0.7rem 1.0rem;
    padding-top: 0;
    background-color: #fff;

}

.map-responsive {
    height: 100%;
}

.map-responsive iframe {
    width: 100%;
}

.download-files {
    overflow-wrap: break-word;
}

/* Forms */

form.customform input,
form.customform textarea,
form.customform select {
    background: rgba(0, 0, 0, 0.03) none repeat scroll 0 0;
    border: 1px solid rgba(0, 0, 0, 0.14);
    font-size: .9rem;
    padding: 0.625rem;
    width: 100%;
}

form.customform input,
form.customform textarea,
form.customform select {
    background: none;
    border: 1px solid #ccc;
}

form.customform input:hover,
form.customform textarea:hover,
form.customform select:hover,
form.customform input:focus,
form.customform textarea:focus,
form.customform select:focus {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #354060 !important;
}

.form-error {
    background-color: #dd442c;
    color: #fff;
    display: none;
    font-size: 0.8rem;
    margin: -10px 0 15px 0;
    padding: 7px;
    text-align: center;
}

.form-success {
    background-color: #9bdd42;
    color: #fff;
    display: none;
    font-size: 0.85rem;
    padding: 10px;
    text-align: center;
}

.required {
    border-left: 1px solid #dd442c !important;
}

/*Box styles defineed in responseee stylesheet, here is to changee the padding which is 1.25rem */
.box {
    padding: .3rem;
    padding-bottom: .6rem;
}
.header-address span {
   font-size: 1rem !important;
   line-height: 1.0rem;
}
.header-image {
    padding: .625rem;
}
div.random-string {
    text-align: center;
    vertical-align: middle;
    color: #fff;
   font-family: 'Open Sans', sans-serif;
   text-transform: capitalize;
  
}
a.intranet {
    color: blue;
    font-size: 1.2rem;
    border-bottom: 1px solid;
    border-spacing: 2px;
}
.fb-wrapper {
    border: 1px dotted white;
    background-color: #eee;
    padding: .5rem;
}
/*
background-size: 30px 10%;
}
*/

.homepage-box {
    padding: .7rem;
    line-height: 1.7rem;
}

h1 {
    font-size: 1.6rem;
}

h2 {
    font-size: 1.4rem;
}

h3 {
    font-size: 1.2rem;
}

h4 {
    font-size: 1.0rem;
}

h5 {
    font-size: 0.8rem;
}

h6 {
    font-size: 0.6rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    padding-top: 0.625rem;
    color: #bb1500 !important;
    font-family: 'Spectral', serif;
}

.que-ans {
   width: 5rem;
}
footer {
    z-index: 100;
}

/*Overflow: hidden removes the margin introduced by the use of FLOAT on display elements in RESPONSEE.CSS */
.footer-area {
    border-top: 1px dashed #fff;
    background-color: #bb1500;
    color: #eee;
    padding: 1.25rem;
    overflow: hidden;
}

.address-block {
    font-family: 'Open Sans', sans-serif !important;
    font-weight: lighter;
    background: #354060;
    line-height: 2rem;
    border-top: 1px dashed #fff;
}

.top-nav {
    background: #fff;
}

.top-nav ul li a {
    font-family: 'Spectral', serif;
    min-width: auto !important;
    color: #354060;
    font-size: 1.1rem;
    padding: .6rem;
    text-transform: uppercase;
}

.top-nav li ul li a {
    background: none repeat scroll 0 0 #354060;
    min-width: auto !important;
    padding: 0.625rem;
    color: #fff;
    text-transform: capitalize;
}

.top-nav ul li ul li a:link, .top-nav ul li ul a {
    border-bottom: 1px solid #fff;
}

.top-nav ul li a:hover, 
.top-nav ul li ul li a:hover {
    background-color: #bb1500 !important;
    color:#fff; 
}

.top-nav .active-item a {
    background-color: #bb1500;
    color:#fff;
}

.email-success p,
.email-success {
    color: #060 !important;
}

.email-error p,
.email-error {
    color: #f00 !important;
}

.any-success p,
.any-success {
    color: #060 !important;
}

.any-error p,
.any-error {
    color: #f00 !important;
}

.admin-content {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border: 1px dashed #354060;
    background-color: #fff;
    padding: 0.5rem;
    padding-left: .5rem;
    margin-bottom: 0.5rem;
    word-wrap: break-word;
    text-align: left;
}

.dashbord ul li {
    list-style: square;
}
.admin-content h4 {
    text-align:left;
}

.admin-content ul, .admin-content ol {
    padding-left: 1.5rem;
}

.admin-content ul li {
    list-style: none;
    padding: 0;
}

.admin-content ul li ul li,
.dashbord ul li ul li {
    list-style: circle;
}

.admin-content h3 {
    color: #354060;
}

.admin-content h4 {
    margin-bottom: 0;
    padding: .2rem;
    word-wrap: break-word;
    color: #bb1500 !important;
 
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 500;
    letter-spacing: .1em;
}

.icon2x {
    font-size: 21px !important;
    padding-left: 1.25rem;
    color: #354060;
}
.icon-large {
    font-size: 21px !important;
    padding:  0.3rem;
    font-weight: bold;
    color: #354060 !important;
}
.full-width:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

.full-width>.line {
    padding: 0 1.875rem;
}

.position-fixed {
    position: fixed;
    top: 0;
    width: 100%;
}

hr.break.break-dotted-double {
    border-bottom: 1px dotted #e5e5e5;
    border-top: 1px dotted #e5e5e5;
    height: 8px;
}


/* Small Breaks */

hr.break-small {
    background: #e5e5e5;
    border: 0;
    display: block;
    height: 2px;
    margin: 20px 0 35px;
    width: 60px;
}

hr.break-small.break-center {
    margin: 20px auto 35px;
}

hr.break-small.break-double {
    height: 0;
    margin-bottom: 39px;
}

hr.break-small.break-double:before {
    background: #e5e5e5;
    border: 0 none;
    content: "";
    display: block;
    height: 2px;
    margin: 5px 0 0;
    width: 60px;
}

hr.break.break-small.break-double:after {
    background: #e5e5e5;
    border: 0 none;
    content: "";
    display: block;
    height: 2px;
    margin: 4px 0 35px;
    width: 60px;
}

.text-thin {
    font-weight: lighter !important;
}

.private-menu {
    border: 2px solid #354060;
    padding-left: 2em;
}

.private-menu ul {
    padding: 1em;
}

.private-menu ul li a:link {
    border-left: none!important;
}

.private-menu ul li a:hover {
    background-color: #c81010 !important;
    color: #fff !important;
}

.private-menu ul li {
    list-style-type: disc;
}

.private-menu .active-item>a {
    font-weight: bold !important;
    color: #c81010 !important;
    background-color: transparent !important;
}


/*Copied from components.css responsee stylew sheets . */

.button.cancel-btn,
a.button.cancel-btn,
a.button.cancel-btn:link,
a.button.cancel-btn:active,
a.button.cancel-btn:visited {
    background: #dc003a none repeat scroll 0 0;
}

.button.submit-btn,
a.button.submit-btn,
a.button.submit-btn:link,
a.button.submit-btn:active,
a.button.submit-btn:visited {
    background: #354060 none repeat scroll 0 0;
}

hr.style-eight {
    margin-top: 0;
    padding: 0;
    border: none;
    border-top: medium double #ccc;
    color: #ccc;
    text-align: center;
}

hr.style-eight:after {
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

.faq-table {
    margin-bottom: 3em !important;
}

.event-list dt {
    font-weight: normal;
}

.event-list dd {
    text-indent: 1em;
    color: #fff;
}

.sidebar-date {
    color: #fff;
}

.moto {
    color: #222;
    font-size: 0.8rem;
    font-family: 'Ubuntu', sans-serif;
    font-weight: lighter;
    font-style: italic;
}

#sidebar {
    background-color: #354060;
    color: #fff;
    padding: 1rem;
    padding-bottom: 1.5rem;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: 1px dashed #fff; 
}

#sidebar p {
    color: #ccc;
    padding-bottom: 1.5rem;
}
.sidebar-heading {
    font-family: 'Spectral', serif;  
    text-transform: uppercase;
    font-size: 1.05rem;
}

#upcoming_date {
    margin-top: -20rem;
    padding-top: -20rem;
}

#inner-menu {
    border: 1px solid #ccc;
}
.private-menu ul li a:link {
    color: #fff;
}
.private-menu ul li a:hover {
    background-color: white;
}

.no-events {
    color: #fff !important;
    padding: 10px;
}

.body-image {
    float: left;
    margin: 1em 1.5em 1.6em 0;
    clear: both;
}

img[src=""] {
    display: none !important;
}

body>div>p,
p>ul,
p>ol,
table {
    margin-bottom: 1.5rem !important;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}


/* Icon blocks */

i.icon-circle {
    border-radius: 100px;
    display: block;
    height: 100px;
    line-height: 100px;
    margin-bottom: 0.625em;
    text-align: center;
    width: 100px;
}

i.icon-circle-small {
    border-radius: 60px;
    display: block;
    height: 60px;
    line-height: 60px;
    margin-bottom: 0.625em;
    text-align: center;
    width: 60px;
}
.pagination-container {
  border: 1px dashed #ccc;
  background-color: #eee;
}
.pagination-link a {
  color: #00815f;
  padding: 1.0rem;
}
.pagination {
  padding: 0.6rem;
}

/* These styles are only for medium screens, minimum 769px */
@media screen and (max-width:768px) {
     /* The following corrects an issue where menu items are given the class 'right' preventing  navbars on small
      devices from spanning across the whole width instead confined to the right */
      .top-nav .right {
        float: none;
    }
    .header-image {
        height: 282px;
        background: #ccc url(../img/bg-medium/rotator.php); 
        border-top: 1px dashed #ccc;
        border-bottom: 1px dashed #ccc;
    }
    
    div.random-string {
        position: relative;
        top: 50%;
        transform: translateY(-50%); 
       font-size: 2.0rem;
    }
    .company-name {
        color: #354060;
        font-family: 'Open Sans', sans-serif;
        font-size: 1.3rem;
        font-weight: 700;
        text-transform: uppercase;
        padding: 5px 0;
    }
    /*Box styles defined in responseee stylesheet, here is to changee the padding which is 1.25rem */
    .box {
        padding: 1.25rem;
    }
    .logo {
        text-align: center !important;
        margin: 2px auto;
    }
    .moto {
        color: #bb1500;
    }
    .nav-text {
        color:#354060;
        background-color: #fff;
        font-size:1.5rem;
        margin-right:0.625rem;
        max-width:100%;
        line-height:1;
    }
    .phone-number {
        padding-right: 2px;
    }
    /* removes an ugly rightborder since nav-menu does not stretch all the way */
    nav {
        background: white;
    }
    .top-nav ul li a {
        border-bottom: 1.2px solid #fff !important;
        font-size: 1.0rem;
        text-transform: capitalize;
    }
    .top-nav ul li a {
        background-color: #354060 !important;
    }
    .top-nav ul li ul li a,
    .top-nav ul li ul li ul li a {
        background-color: #701104 !important;
        color: #fff;

    }
    .top-nav ul li a,
    .top-nav ul li ul li a,
    .top-nav ul li ul li ul li a {
        border-top: none;
        color: #fff;
    }
    .top-nav ul li ul li ul li a {
        background-color: #2a81cd !important;
        color: #fff;
    }
    ol, ul {
    padding-left: 1.5rem;
   }
   .top-nav ul li a:hover, 
   .top-nav ul li ul li a:hover {
    background-color: #bb1500 !important;
    color:#fff; 
  }

  .top-nav .active-item a {
    background-color: #bb1500 !important;
    color:#fff;
  }
  #sidebar,
  .columnTwo-sm {
      background: #354060;
      margin-top: 10px;
      border-radius: 20px 20px 20px 20px;
      -moz-border-radius: 20px 20px 20px 20px;
      -webkit-border-radius: 20px 20px 20px 20px;
      border: 1px dashed #fff;
      padding-left: .625rem;
      padding-right: .5rem;
  }

  #sidebar,
  .columnTwo-sm p {
     color: #ccc;
  }

    div.address-wrapper-sm {
        float: left;
        position: relative;
        left: 50%;
   }
 
   div.address-links-sm {
        float: left;
        position: relative;
        left: -50%;
       padding-bottom: .625rem;
   }

}

/* These styles are only for smaller screens, maximum 480px */

@media screen and (max-width:480px) {
    .header-image {
        height: 162px;
        max-height: 202px;
        background: #ccc url(../img/bg-small/rotator.php); 
        border-top: 1px dashed #ccc;
        border-bottom: 1px dashed #ccc;
    }
    div.random-string {
        position: relative;
        top: 50%;
        transform: translateY(-50%); 
        font-size: 1.5rem;
      }
    .company-name {
        color: #354060;
        font-family: 'Open Sans', sans-serif;
        font-size: 1.1rem;
        padding: 5px 0;
        margin: 2px auto;
        text-transform: uppercase;
    }
    .logo {
        text-align: center !important;
        margin: 2px auto;
    }
   
     ol, ul {
    padding-left: 1.2rem;
   } 
}

/* These styles are only for larger screens, minimum 769px */
@media screen and (min-width:769px) {
    html {
        padding: 0;
        margin: 0;
    }
    .header-image {
        height: 352px;
        background: #ccc url(../img/bg/rotator.php); 
        border-top: 1px dashed#ccc;
        border-bottom: 1px dashed#ccc;
    }
    div.random-string {
        position: relative;
        top: 50%;
        transform: translateY(-50%); 
        font-size: 2.5rem;
      }
    .company-name {
        color: #354060;
        font-family: 'Open Sans', sans-serif;
        font-size: 1.6rem;
        font-weight: 900;
        padding: 0.3rem;
        margin: 0 0 0;
        text-align: center;
        text-transform: uppercase;
    }
    .moto {
        color: #bb1500;
        font-size: 1.2rem;
    }
    /*Making menu items on tier 2 and onwards to scale with content - grow as conetnt grows*/
    .top-nav ul li ul li ul {
        white-space: nowrap;
        width: auto !important;
    }
    .top-nav ul li ul li ul li a {
        background-color: #2a81cd !important;
        color: #fff;
    }

    .admin-content {
        padding-left: 2rem;
    }
    /* centering address boxees */
    .main-address-box {
        position: relative;
    }
    div.address-links {
        width: 260px;
        max-width: 100%;
        margin: 0 auto;
    }
    .main-content {
        padding-right: 1rem;
    }

    #myBtn {
        bottom: 0;
        right: 50%;
        font-size: 18px;
        padding: 0.3rem 1rem;
    }

    /*
    .top-nav ul li ul li ul li a {
        white-space: nowrap;
        padding: 0.625rem !important;
    }
    */
    /* Ends menu items width correction*/
}

/*Ends the large screen media query*/

/* Icons Styles */
 a.link-icon:before,
a.link-icon.link-file[href]:before {
        content: "\f016"; /* generic file icon */
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        transform: translate(0, 0);
        width: 20px;
        text-align: right;
        margin-right: 10px;
}
a[href$=".txt"].link-icon:before,
a.link-icon.link-text[href]:before {
        content: "\f0f6"; /*Text*/
}
a[href$=".pdf"].link-icon:before,
a.link-icon.link-pdf[href]:before {
        content: "\f1c1"; /*PDF*/
        color: #c00;
}
a[href$=".doc"].link-icon:before,
a[href$=".docx"].link-icon:before,
a.link-icon.link-word[href]:before {
        content: "\f1c2"; /*Word*/
        color: #295497;
}
a[href$=".xls"].link-icon:before,
a[href$=".xlsx"].link-icon:before,
a.link-icon.link-excel[href]:before {
        content: "\f1c3"; /*Excel*/
        color: #2e7d32;
}
a[href$=".ppt"].link-icon:before,
a[href$=".pptx"].link-icon:before,
a.link-icon.link-powerpoint[href]:before {
        content: "\f1c4"; /*Powerpoint*/

}
a[href$=".gif"].link-icon:before,
a[href$=".jpg"].link-icon:before,
a[href$=".jpeg"].link-icon:before,
a[href$=".png"].link-icon:before,
a[href$=".bmp"].link-icon:before,
a[href$=".tif"].link-icon:before,
a.link-icon.link-image[href]:before {
        content: "\f1c5"; /*Image*/
}
a[href$=".zip"].link-icon:before,
a[href$=".zipx"].link-icon:before,
a[href$=".rar"].link-icon:before,
a[href$=".tar"].link-icon:before,
a[href$=".gz"].link-icon:before,
a[href$=".dmg"].link-icon:before,
a[href$=".iso"].link-icon:before,
a.link-icon.link-archive[href]:before {
        content: "\f1c6"; /*Archive*/
}
a[href$=".wav"].link-icon:before,
a[href$=".mp3"].link-icon:before,
a[href$=".fla"].link-icon:before,
a[href$=".flac"].link-icon:before,
a[href$=".ra"].link-icon:before,
a[href$=".rma"].link-icon:before,
a[href$=".aif"].link-icon:before,
a[href$=".aiff"].link-icon:before,
a[href$=".aa"].link-icon:before,
a[href$=".aac"].link-icon:before,
a[href$=".aax"].link-icon:before,
a[href$=".ac3"].link-icon:before,
a[href$=".au"].link-icon:before,
a[href$=".ogg"].link-icon:before,
a[href$=".avr"].link-icon:before,
a[href$=".3ga"].link-icon:before,
a[href$=".flac"].link-icon:before,
a[href$=".mid"].link-icon:before,
a[href$=".midi"].link-icon:before,
a[href$=".m4a"].link-icon:before,
a[href$=".mp4a"].link-icon:before,
a[href$=".amz"].link-icon:before,
a[href$=".mka"].link-icon:before,
a[href$=".asx"].link-icon:before,
a[href$=".pcm"].link-icon:before,
a[href$=".m3u"].link-icon:before,
a[href$=".wma"].link-icon:before,
a[href$=".xwma"].link-icon:before,
a.link-icon.link-audio[href]:before {
        content: "\f1c7"; /*Audio*/
}
a[href$=".avi"].link-icon:before,
a[href$=".mpg"].link-icon:before,
a[href$=".mp4"].link-icon:before,
a[href$=".mkv"].link-icon:before,
a[href$=".mov"].link-icon:before,
a[href$=".wmv"].link-icon:before,
a[href$=".vp6"].link-icon:before,
a[href$=".264"].link-icon:before,
a[href$=".vid"].link-icon:before,
a[href$=".rv"].link-icon:before,
a[href$=".webm"].link-icon:before,
a[href$=".swf"].link-icon:before,
a[href$=".h264"].link-icon:before,
a[href$=".flv"].link-icon:before,
a[href$=".mk3d"].link-icon:before,
a[href$=".gifv"].link-icon:before,
a[href$=".oggv"].link-icon:before,
a[href$=".3gp"].link-icon:before,
a[href$=".m4v"].link-icon:before,
a[href$=".movie"].link-icon:before,
a[href$=".divx"].link-icon:before,
a.link-icon.link-video[href]:before {
        content: "\f1c8"; /*Video*/
}
a[href$=".css"].link-icon:before,
a[href$=".js"].link-icon:before,
a[href$=".py"].link-icon:before,
a[href$=".git"].link-icon:before,
a[href$=".py"].link-icon:before,
a[href$=".cpp"].link-icon:before,
a[href$=".h"].link-icon:before,
a[href$=".ini"].link-icon:before,
a[href$=".config"].link-icon:before,
a.link-icon.link-code[href]:before {
        content: "\f1c9"; /*code*/
}
a[href$=".exe"].link-icon:before,
a[href$=".jar"].link-icon:before,
a[href$=".dll"].link-icon:before,
a[href$=".bat"].link-icon:before,
a[href$=".pl"].link-icon:before,
a[href$=".scr"].link-icon:before,
a[href$=".msi"].link-icon:before,
a[href$=".app"].link-icon:before,
a[href$=".deb"].link-icon:before,
a[href$=".apk"].link-icon:before,
a[href$=".jar"].link-icon:before,
a[href$=".vb"].link-icon:before,
a[href$=".prg"].link-icon:before,
a[href$=".sh"].link-icon:before,
a.link-icon.link-exe[href]:before {
        content: "\f085"; /*Executable*/
}

a[href$=".com"].link-icon:before,
a[href$=".net"].link-icon:before,
a[href$=".org"].link-icon:before,
a[href$=".edu"].link-icon:before,
a[href$=".gov"].link-icon:before,
a[href$=".mil"].link-icon:before,
a[href$="/"].link-icon:before,
a[href$=".html"].link-icon:before,
a[href$=".htm"].link-icon:before,
a[href$=".xhtml"].link-icon:before,
a[href$=".jhtml"].link-icon:before,
a[href$=".php"].link-icon:before,
a[href$=".php3"].link-icon:before,
a[href$=".php4"].link-icon:before,
a[href$=".php5"].link-icon:before,
a[href$=".phtml"].link-icon:before,
a[href$=".asp"].link-icon:before,
a[href$=".aspx"].link-icon:before,
a[href$=".cfm"].link-icon:before,
a[href*="?"].link-icon:before,
a[href*="#"].link-icon:before,
a.link-icon:not([href*='.']):before,
a.link-icon.link[href]:before {
        content: "\f0c1"; /*link*/
}