* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

button {
  border: none;
  background: transparent;
  outline: none;
  cursor: pointer; 
}

button:active {
  color: black;
}

a {
  text-decoration: none;
  color: #333;
}
.text-danger{ color: #ff0000}
body {
  font: normal 16px/1.5 Helvetica, sans-serif;
}
h1 small{ font-size: 0.8rem; display: block; margin-top: 5px}
 
.mt-20{ margin-top: 20px;}

.bg-cover{ 
  position: absolute;
  z-index: -1;
  background-size: cover!important;
  background-repeat: no-repeat!important;
  background-position: right center!important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}
 
 

/* .top-banner
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.top-banner {
  display: flex;
  width: calc(100% - 200px);
  height: 100vh;
  transform: translateX(200px); 
}

.top-banner-overlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 43%; max-width: 600px;
  padding: 20px;
  transition: transform .7s;
  color: white;
  background: rgba(0, 0, 0, .7);
}
  
.top-banner-overlay p {
  font-size: 1rem;
  margin-top: 10px;
}

.top-banner-border {
  border: 1px solid #fff;
	padding: 30px;
  color: #fff;
  width: 40%; height: auto!important;
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10%; 
  background-color: rgba(0, 0, 0, .5);
}
 
.top-banner-border h1{
  display: inline-block;
  font-size: 18px; color: #cebd86;
border-bottom: 2px solid #cebd86;
padding-bottom: 5px;
margin-bottom: 20px;
}
.top-banner-border h3{
  margin-bottom: 12px;
}
.top-nav li + li {
  margin-top: 7px;
}
 
.nav-right{
  position: absolute;
  z-index: 99;
  top: 30px;
  right: 30px;
  display: flex;
  
}
.nav-right a{
  display: block;
  color: #fff;
  margin: 5px 10px;
}

.timeline{
	color: #56c7ff;  
  font-size: 16px;
 
}
.timeline .year{ font-weight: bold; font-size: 13px; margin-right: 10px;  }
.timeline li{ margin-bottom: 6px;   }
.timeline li::before{
  content: "-";
  margin-right: 5px;
}

/* .fixed menu
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
.top-nav .fixed-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 200px;
  padding: 20px;
  background: #213653; 
}
.top-nav .fixed-menu a{
    color: #fff
}
.top-nav .fixed-menu .menu-open {
  font-size: 1.8rem;
  text-align: left;
  margin: 30px 0 auto;
  width: 28px;
  color: rgba(255,255,255,0.8)
}
.top-nav .fixed-menu .menu-open:hover{
    color: #fff
}
.logo {   
    font-size: 30px;
    background: -webkit-linear-gradient(#fff, #ddd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; 
}
.logo img{ width: 100%; max-width: 150px;}

.weblink{ 
     display: flex;
    flex-direction: row;
    justify-content: center; align-items: center;
/*    width: calc( 100% - 350px);*/ 
}
.weblink a{  
    margin: 5px; 
    width: 48%; height: 110px;  
    font-size: 20px; text-align: center;
    border: 1px solid #fff; padding: 5px;
    color: #fff;
    background: rgba(255,255,255,.3);
    display: flex;  flex-direction: column;
    align-items: center; justify-content: center
} 
.weblink i{ font-size: 36px; display: block; margin-bottom: 10px;}
.weblink a:hover{
     background:#004098; color: #fff;
     border: 1px solid #004098;
    transform: scale(1.08);
    transition: .3s;
    -webkit-animation: focus-in-contract 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: focus-in-contract 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes focus-in-contract {
  0% {
    letter-spacing: 1em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes focus-in-contract {
  0% {
    letter-spacing: 1em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}


.copyright{ color: rgba(255,255,255,0.8); font-size: 13px; border-top:1px solid rgba(255,255,255,0.8); padding-top: 8px; margin-top: 12px!important} 
 

@media only screen and (max-width: 992px) { 
  .top-nav .fixed-menu{ 
    background: transparent;
    width: 100%;
   }
   .top-nav .fixed-menu h2{ background: #213653; margin: -20px -20px 0; padding: 20px 20px 5px; }
    .logo{  margin-top: 15px; margin-left: 15px; }
    .copyright{ 
         width:  calc(100% + 40px); margin-left: -20px; margin-bottom: -20px;
        background: #213653; padding: 10px;;
        text-align: center;
      border-top: 0px; }
 
     
    
    .top-banner{ width: 100%; transform: translateX(0px);}
    .top-banner-overlay{width: 100%;  height: 55vh; margin-top: 270px; padding:30px }

    .top-banner-border {
      border: 1px solid #fff;
      padding: 30px;
      color: #fff;
      width: 80%; margin: 0 auto; 
      height: auto!important;
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 10%;
    }
 
}

@media only screen and (max-width: 767px) { 
  .top-nav .fixed-menu{ 
    background: transparent;
    width: 100%;
    align-items: center; 
   }
   .top-nav .fixed-menu h2{ 
     text-align: center;
     background: #213653; width:calc(100% + 40px);
     padding: 20px 20px 40px;
     }
     .top-nav .fixed-menu h2 .logo{
       margin: 0 auto;
     }
     .copyright{ margin-left: 0;  }
   .nav-right { 
    top: 85px;
    right: 50%;
    margin-right: -135px
 
}
.top-banner-overlay{  height: 65vh; margin-top: 130px; padding:30px }
 
    .weblink a{ font-size: 16px; height: 80px;}
    .weblink i{ font-size: 32px; margin-bottom: 8px;}
}