* { padding: 0; margin: 0; }
body {
	  margin              : 0;
	  padding             : 0;
	  font                : .70em/1.5em , "Calibri, sans-serif";
	  color               : #2C3E50 ; 
	  background          : #ddd;
	  text-align          : justify;
}
#wrap {
	  background          : #FFF;
	  width               : 100%; height: 100%;
	  margin              : 0 auto;	
	  text-align          : justify;
}
.leftManu {
    margin              : 1px  0 1px 1px;
    margin              : 0 10px 0 0;
    float               : left;
    width               : 15%;
    min-height          : 90vh;
    background-color    : #fff;
    /*box-shadow: 1px 1px 1px #575859;*/   
}
.leftManu .social{
    margin              : 0 10px 0  0 ;
    text-align          : center;
}
.rightManu {
    margin              : 0;
    margin              : 0 10px 0 0;
    float               : right;
    width               : 15%;
    min-height          : 100%;
    background-color    : #fff;
    /* box-shadow: 1px 1px 1px #575859; */
    
}
.rightManu h1 {
  font-family: "Calibri";
  font-size: 14pt;
  text-align: center;
  background-color: #2C3E50;
  color: #fff;
}
.qr{
  width                 : 45%;
  aspect-ratio          : 1;
  margin-top            : 1vh;
  margin-left           : 1vh;
  text-align            : center;
  background-color      : #f8f8f8;
  
}

.partner-box {
  width                 : 45%;
  /*aspect-ratio          : 1;*/
  border: 1;
  border-color: #417d06;
  background-color: #f8f8f8;
  opacity: 0.5;
  margin-top            : 1vh;
  margin-left           : 1vh;
  -webkit-transition: 0.5s all linear;
          transition: 0.5s all linear;
}
.partner-box:hover {
  opacity: 1;
}
.spon-box {
  width                 : 60%;
  aspect-ratio          : 1;
  border                : 1;
  border-color: #417d06;
  background-color: #f8f8f8;
  opacity: 0.5;
  margin-top            : 1vh;
  margin-left           : 1vh;
  -webkit-transition: 0.5s all linear;
          transition: 0.5s all linear;
}
.spon-box:hover {
  opacity: 1;
}
.upMenu {
    margin: 0;
    width: 98%;
    height: 5vh;
    background-color: #417d06;
    color: #F8F9F9;
    text-align: right;
    float: left;
    font-family:'Calibri';
    font-size: 16px;
    text-transform: uppercase;
    padding: 10px;
    bottom: 0;

}

.upMenu ul {    
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.upMenu ul li{  
        float: right;
}
.upMenu ul li a {
        display             : block;
        color               : white;
        text-align          : center;
        padding             : 8px 8px 8px 0;
        text-decoration     : none;

}
.upMenu ul li a:hover:not(.active) {
    background-color: #3498DB;
    color: #CCD1D1;
  }
  .banner {
    background            : url("../images/system/banner01.jpg");
    float                 : left;
    width                 : 65%;
    padding               : 0;
    margin                : 5px 0 5px 5px;
   
    min-height            : 600px;
    vertical-align        : middle;
    background-attachment : fixed;
    background-repeat     : no-repeat;
    background-position   : center center;
    position: relative;

  }

  .banner .content {
    color             : #ffffff;
    position          : absolute;
    top               : 20%;
    left              : 10px;
    right             : 0;
    height            : 20%;
    width             : 95%;
    margin            : 0 auto;
    padding           : 0 0%;
    transform         : translateY(-50%);
    -webkit-transform : translateY(-50%);
    -moz-transform    : translateY(-50%);
    }

.banner .content h1 {
    color       : #ffffff;
    font-weight : bold;
    }

.banner .content p.lead {
    font-size   : 24px;
    line-height : 1.5em;
    color       : rgba(255, 255, 255, .7);
    }
.banner .content h1{font-size:72px; color:#fff;text-shadow: 1px 5px 10px rgba(0, 0, 0, 0.9);font-family:'Calibri';}
.banner .content h2{font-size:36px;color:#15d8f6; text-shadow: 1px 5px 10px rgba(0, 0, 0, 0.9);font-family:'Calibri';};
.banner .content .event-date {
    font-size     : 32px;
    margin-bottom : 10px;
    color:#fff; 
    text-shadow: 1px 5px 10px rgba(0, 0, 0, 0.9);
    font-family:'Calibri';
    }
.banner .button {
  background-color: transparent; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}
.banner .btn {
    margin-top : 10px;
    background-color: transparent;
    color: white;
    border: 2px solid #417d06; /* Green */
    transition-duration: 0.4s;
}
.banner .btn:hover {
  background-color: #4CAF50; /* Green */
  color: white;
}

    @media (max-width : 600px) {
      .jumbotron .content {
          min-height : auto;
          }
  
      .jumbotron .content h1 {
          font-size : 24px;
          }
  
      .jumbotron .content p.lead {
          font-size : 12px;
          font-family:"Calibri";
          }
      }

  .logo {
    float: left;
    padding: 0;
    width: 16vh;
    margin: -6vh 10px 10px 0 ;
    height: auto;
    position:relative;

  }

  .vertical-menu {
    width: 100%;
    font-family:'Calibri';
    display: block;
    position: relative;
  }
  
  .vertical-menu a {
    background-color: #fff;
    color: black;
    display: block;
    padding: 5px;
    text-decoration: none;
  }
  
  .vertical-menu a:hover {
    background-color: #ccc;
  }
  
  .vertical-menu a.active {
    background-color: #04AA6D;
    color: white;
  }
  .vertical-menu a.active:hover {
    background-color: #057bf8;
  }
  #main {
    float: left;
    margin-top: 5vh;
    margin-left: 2px;
    padding-top: 3vh;
    width: 65%;
    background-color: #fff;
  }
  #main h1 {
      text-align: center;
      text-decoration: none;
      font-size: 18pt;
      font-family: "Calibri";
  }

  #footer { 
    clear: both; 
    color: #FFF; 
    background: #A9BAC3; 
    border-top: 5px solid #568EB6;
    margin: 0; padding: 0; 
    height: 50px;	  
    font-size: 95%;		
  }
  #footer a { 
    text-decoration: none; 
    font-weight: bold;	
    color: #FFF;
  }
  #footer .footer-left{
    float: left;
    width: 100%;
  }
  #footer .footer-right{
    float: right;
    width: 30%;
  }

  .site-footer {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 30px 0;
  }
  .site-footer .site-info {
    font-weight: 400;
    margin-bottom: 10px;
  }
  .site-footer .site-info a {
    color: #fff;
  }
  .site-footer .social-block li a {
    color: #fff;
  }
  .site-footer .social-block li a:hover, .site-footer .social-block li a:focus {
    opacity: 0.8;
  }
  .social-block {
    list-style-type: none;
    padding: 0;
  }
  .social-block li {
    display: inline-block;
  }
  .social-block li a {
    display: inline-block;
    height: 32px;
    width: 32px;
    color: #4e4e4e;
  }
  .social-block li a i {
    font-size: 1.5em;
  }
  .social-block li a:hover, .social-block li a:focus {
    color: #000;
  }
  
  .btn.active.focus,
  .btn.active:focus,
  .btn.focus,
  .btn:active.focus,
  .btn:active:focus,
  .btn:focus {
    outline: none;
  }