.text-uppercase{
  text-transform: uppercase;
}

.top-banner{

  background: linear-gradient(to right, #BFE8FA , #03516F);
  color:#fff;
  position: relative;
}

.top-banner img{
  width: 135%;
  margin-left: -17.5%;
  max-width: initial;
  box-shadow: inset -4px 0px 12px #135E7B, inset 4px 0px 12px #AEDBEE;
}

.top-banner h2, .top-banner h3, .top-banner h5, .top-banner a{
  font-weight: 900;
  color:#fff;
  transition: all .5s;
}

.top-banner a:hover{
  color: #DDDC00;
}

.top-banner div{
 text-align: center; 
}

.top-banner h2{
  line-height: 32px;
}

.top-banner h3{
  font-size: 24px;
  line-height: 28px;
}
.top-banner h5{
  letter-spacing: 2.6px;
  margin-bottom: 0px;
}
.top-banner h4{
  letter-spacing: 2.8px;
  color:#fff;
}

.top-banner .date{
  font-size:36px;
  margin-bottom: 0px;
  line-height: 36px;
}
.top-banner .btn{
  margin-left: -15px;
}
.top-banner .date span:after{
  content:"";
  background-color:white;
  height:2px;
  display: inline-block;
  width: 9px;
  margin: 4px;
  margin-bottom: 12px;
}

.top-banner .valign{
      margin-top: 70px;
    transform: translateY(-50%);
}

.top-banner .close{
  position: absolute;
  font-size: 11px;
  top:30px;
  right:20px;
  color:#ffffff;
  
  opacity: 1;
}
.top-banner .close div{
  position: relative;
  float: right;
  width:20px;
  height: 20px;
}
.top-banner .close p{
  float: left;
  font-size: 11px;
  margin-right: 10px;
}
.top-banner .close div:before{
  content: "";
  display: block;
  height: 1px;

  background-color: #ffffff;
  width:20px;
  transform: rotate(45deg);
  position: absolute;
  top:12px;
  left:0px;

}
.top-banner .close div:after{
  content: "";
  display: block;
  height: 1px;

  background-color: #ffffff;
  width:20px;
  transform: rotate(-45deg);
  position: absolute;
  top:12px;
  left:0px;

}
@media screen and (max-width: 321px){
  .top-banner img {
    width: calc(100% + 30px);
    margin-left: -15px;
  }

  .nav-container nav {
    -webkit-transition: none!important;
    -moz-transition: none!important;
    transition: none!important; 
  }
  .top-banner .close {
    top: 10px;
    right: 15px;
  }
}
@media screen and (max-width: 413px) and (min-width: 321px){

  .top-banner img {
    width: calc(100% + 30px);
    margin-left: -15px;
  }

  .top-banner .close {
    top: 10px;
    right: 15px;
  }
  .nav-container nav {
    -webkit-transition: none!important;
    -moz-transition: none!important;
    transition: none!important; 
  }
}

@media screen and (max-width: 736px) and (min-width: 414px){

  .top-banner img {
    width: calc(100% + 30px);
    margin-left: -15px;
  }

  .top-banner .close {
    top: 10px;
    right: 15px;
  }
  .nav-container nav {
    -webkit-transition: none!important;
    -moz-transition: none!important;
    transition: none!important; 
  }
}

@media screen and (max-width: 992px) and (min-width: 768px){

  .top-banner .close {
    top: 10px;
    right: 15px;
  }
  .nav-container nav {
    -webkit-transition: none!important;
    -moz-transition: none!important;
    transition: none!important; 
  }
}

@media screen and (max-width: 1200px) and (min-width: 993px){

}