/* W3.CSS 4.13 April 2020 by CAN-BG */


/* start BG items */

@import url('font-awesome/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;700&display=swap');
@import url(https://fonts.googleapis.com/css?family=Open+Sans:100,400,600|Roboto:100,400);

@font-face {font-family: 'NexaBold';
    src: url('fonts/Nexa_Bold.eot');
    src: url('fonts/Nexa_Bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/Nexa_Bold.woff') format('woff'),
         url('fonts/Nexa_Bold.ttf') format('truetype'),
         url('fonts/Nexa_Bold.svg#OpenSansLight') format('svg');
}

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

/* - - - - - typography  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

body {
    font-family: 'Roboto',Helvetica,Arial,sans-serif;
    color: #000000;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 100;
}
body { margin:0; }

a {
  color:#333;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', sans-serif;
  margin:0px 0px 20px 0px;
}

.BA-type {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -7px;
  font-weight:900;
  font-size: 90pt;
  line-height: .9;
}

h1 {
  position: relative;
  text-align: center;
  font-weight:100;
  font-size: 48pt;
}

h2 {
  font-weight:400;
  font-size: 36pt;
}
h3 {
  font-weight:900;
  font-size: 30pt;
}

h4 {
  font-weight:400;
  font-size: 24pt;
}

h5 {
  font-weight:400;
  font-size: 18pt;
}
h6 {
  font-weight:900;
  font-size: 16pt;
  line-height:1.25;
}

/* - - - - - containers  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.hold-logo {
    float: left;
    height:72px;
    width: 200px;
    margin-left: -8px;
    background-color: #fff;
}

.red-band-top {
  margin: 0px 0px 0px 180px;
  background-color: #cf0a2c;
   height: 52px;
}

 {
  display: block;
  overflow: hidden;
  
  position: absolute;
  top: 0px;
  left: 218px;
 
  width: 100%;
}

.hold-logo img {
    width: auto;
    height: 79px;
    padding: 6px 6px 6px 12px;
}

.type-background > img { width: 72%; height: auto; }
.type-background, .holdmodules {}

.holdmodules {
  margin: 0 60px 0 200px;
}

.infomodule {
  display:block;
  overflow:hidden;
  float:left;
  min-height:340px;
}

.twenty {width: 18%;}
.twenty-five {width: 23%;}
.thirty-three {width: 31%;}
.forty {width: 38%;}
.fifty {width: 48%;}
.middle-left, .seventy-five {width: 71%;}
.hundred {width: 100%;}
.sixty-six {width: 64%;}
.seventy {width: 68%;}
.onehundred {width: 98%; margin: 1% 0px;}
.thirty {width: 28%;}

.footer-one {width: 30%;}
.footer-next {width: 60%; padding-left: 20px;}

.twenty, .twenty-five, .thirty, .thirty-three, .forty, .fifty, .sixty-six, .seventy, .onehundred, .footer-one, .footer-next, .middle-left, .middle-right {
  display: block;
  float: left;
  overflow: hidden;
}

.twenty, .twenty-five, .thirty, .thirty-three, .forty, .fifty, .sixty-six, .seventy, .footer-one, .footer-next {
  margin:2% 2% 2% 0px;
}

.imagepanel-a {
    width: 100%;
    height: 340px;
    border-radius: 8px;
    position: relative;
    background-color: skyblue;
    background-image: url('images/Artboard 2.png'); 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
}

.imagepanel-b {
    width: 100%;
    height: 340px;
    border-radius: 8px;
    position: relative;
    background-color: skyblue;
    background-image: url('images/Artboard 1.png'); 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
}

.imagepanel-c {
    width: 100%;
    height: 340px;
    border-radius: 8px;
    position: relative;
    background-color: skyblue;
    background-image: url('images/Artboard 3.png'); 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
}

.paneltxt {
    font-weight: 900;
    font-size: 18pt;
    line-height: 1.0;
    color: #fff;
    margin: 0px 0px 0px 20px;
    position: absolute;
    top: 75%;
    transform: translate(0, -50%);
    font-family: 'Montserrat';
    width: 60%;
}

/* - - - - - graphic elements  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


.divider-h {
  border-top: solid 1px #000;
}

.divider-padded {
  border-top: solid 1px #000;
}

.divider-l {
  border-left: solid 1px #000;
  padding-left: 25px;
  margin-left: -15px;
  min-height: 340px;
}

.divider-r {
  border-right: solid 1px #000;
  padding-right: 25px;
  margin-left: -15px;
  min-height: 340px;
}

input {
  font-family: 'Lato', sans-serif !important;
  font-size: 1em;
  line-height: 1em;
  font-weight: 200;
  background-color: #000;
  border-radius: 4px !important;
  color: #fff;
  border: none !important;
  margin: 5px 0 0px;
  padding: 8px 10px;
  text-transform: uppercase;
}

#contact button[type="submit"], #contactshort button[type="submit"] {
  cursor:pointer;
  width:40px;
  border:none;
  background:#000;
  color:#FFF;
  margin:0 0 5px;
  padding:10px;
  font-size:15px !important;
  font-weight:200;
  border-radius: 20px;
  text-transform: uppercase;
  float: left;
  margin-right:10px;
}

#contact button[type="submit"]:hover,#contactshort button[type="submit"]:hover {
  background:#e92c3b;
  -webkit-transition:background 0.3s ease-in-out;
  -moz-transition:background 0.3s ease-in-out;
  transition:background-color 0.3s ease-in-out;
}

.linkdot {
  cursor: pointer;
  width: 40px;
  border: none;
  background: #000;
  color: #FFF;
  margin: 4px 0px 0px 0px;
  padding: 10px;
  font-size: 15px !important;
  font-weight: 200;
  text-decoration: none;
  border-radius: 20px;
  text-transform: uppercase;
  float: left;
  height: 40px;
}

.linkdot:hover {
    background: #e92c3b;
    -webkit-transition: background 0.3s ease-in-out;
    -moz-transition: background 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
}


/* - - - - - footer  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

#footer-sidebar {
  display:block;
  height: 250px;
}

#footer-sidebar1, #footer-sidebar2, #footer-sidebar3, #footer-sidebar4  {
  float: left;
}

footer {
  background-color: #000;
  color: #fff;
  padding: 30px 0px;
  display: block;
  overflow: hidden;
  width: 100%;
  margin-top:40px;
}

footer p {
  text-transform: uppercase;
  font-size: .72em;
  text-align: left;
  color:#fff;
}

footer a {
  color: #fff;
  text-decoration: none !important;
}

footer a:hover {
  color: #000;
}

footer .container {

  margin: 0px 20% 0px 200px;
}

.copyright {
    margin: -4px 0px 6px;
    display: block;
    overflow: hidden;
}
.soc-in-footer {
  text-transform: uppercase;
  font-size: .72em;
  text-align: left;
  color: #fff;
}
.soc-in-footer {
  margin-top: -11px;
  width: 100%;
}

.soc-in-footer ul {
  list-style-type: none;
  padding:0px;
}

.soc-in-footer ul li {
  display:inline-block;
  margin-right: 5px;
}

.soc-in-footer a {
  color: #fff;
}

.soc-in-footer a:hover {
  color: #666;
}

.soc-in-footer .fa {
  font-size: 1.2em;
  margin: 10px 2px 0px 0px;
}

.bttnlink, .bttnlink-event {
  font: 400 14.5/14.5 'Lato', sans-serif;
  background-color: #666766;
  border-radius: 4px;
  color: #fff;
  border: none !important;
  margin: 10px 0px 0px;
  padding: 6px 10px;
  text-transform: uppercase;
  display: block;
  overflow: hidden;
  transition: padding-left 0.5s ease 0s;
}

.bttnlink-contact {
  font: 400 14.5/14.5 'Lato', sans-serif;
  background-color: #000;
  border-radius: 4px;
  color: #fff;
  border: none !important;
  margin: 10px 0px 0px;
  padding: 6px 10px;
  text-transform: uppercase;
  display: block;
  max-width: 420px;
  overflow: hidden;
  transition: padding-left 0.5s ease 0s;
}

.bttnlink {
  width: 91%;
}

.bttnlink-event {
  width: 240px;
}

.bttnlink:hover, .bttnlink-event:hover, .bttnlink-contact:hover {
  background:#e92c3b;
  -webkit-transition:background 0.3s ease-in-out;
  -moz-transition:background 0.3s ease-in-out;
  transition:background-color 0.3s ease-in-out;
}

.bttnlink a, .bttnlink-event a, .bttnlink-contact a  {
  color: #fff;
  text-decoration: none;
}


/* end BG items */

html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}

.topnav {
  overflow: hidden;
  background-color: #cf0a2c;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  min-width: 200px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  min-width: 224px;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #fff;
  color: #333;
}

.dropdown-content a:hover {
  background-color: #cf0a2c;
  color: #fff;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* - - - - - responsive  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

@media (max-width:767px) {

.twenty, .twenty-five, .thirty-three, .forty, .fifty, .sixty-six, .seventy-five, .hundred, 
.footer-one, .footer-next, .middle-left, .seventyty, .middle-right, .thirty,
body.blog .middle-left, body.hiv-info .middle-left {
  width:100%;
  float: none;
}

.footer-next {
  padding-left: 0px;
}

footer .container {
  margin: 0px auto;
  width: 90%;
}

.infomodule {
  min-height: 60px;
}

.paneltxt {
  width: 25%;
}


.type-background > img { width: 90%; height: auto; }
.type-background {margin: 0 0 0 10%;}

.holdmodules {
  margin: 0 30px;
}

.divider-l, .divider-first {
  border-left: solid 0px #000;
  border-top: solid 1px #000;
  padding-left: 0px;
  margin-left: 0px;
  margin-top: 40px;
  min-height: 0px;
  }
  .divider-h {
    display: none;
  }

}

/************************************* responsive 

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
*/
