/*****************************************************
						Banner
*****************************************************/

#bannerTop {
	background: url("../images/banner.jpg");
	background-repeat: no-repeat;
	background-size:cover;
	height: 100vh;
}

/*****************************************************
						 Burger Button
*****************************************************/
.navigation {position:relative; padding:40px 15px;}
.burgerBtn {
    position: absolute;
    top: 40px;
    right: 10px;
    cursor: pointer;
    z-index: 1000;
}
.burgerBtn_container{
	width: 70px;
    height: 70px;
    border-radius: 50%;
    border-width: 3px;
    border-style: solid;
    border-color: #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.bar1, .bar2, .bar3 {
     width: 45px;
    height: 3px;
    background-color: #fff;
    margin: 5px 0;
    transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
  -webkit-transform: translate(0, 11px) rotate(-45deg);
  -moz-transform: translate(0, 11px) rotate(-45deg);
  -ms-transform: translate(0, 11px) rotate(-45deg);
  -o-transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -14px) rotate(45deg);
  -webkit-transform: translate(0, -14px) rotate(45deg);
  -ms-transform: translate(0, -14px) rotate(45deg);
  -moz-transform: translate(0, -14px) rotate(45deg);
  -o-transform: translate(0, -14px) rotate(45deg);
}

/*****************************************************
             Navigation
*****************************************************/
.navigation img {position: relative; z-index: 1;}
.nav_links {
  background-color:#0C2648;
  position: fixed;
  height: 100%;
  top: 0;
  right: 0;
  width: 25%;
  z-index: 999;
  padding: 7% 0;
  transform: translateX(100%);
}

.aboutBtn:after,
.businessBtn:after,
.sustainabilityBtn:after,
.investorsBtn:after,
.contactsBtn:after
{
  content:"\ea63";
  font-family: "remixicon";
  color: #ffff;
  font-size: 20px;
  display: inline-block;
  transition: all 0.3s ease-in-out;
  position: absolute;
  right: 30px;

}
.aboutBtn:hover:after,
.businessBtn:hover:after,
.sustainabilityBtn:hover:after,
.investorsBtn:hover:after,
.contactsBtn:hover:after{
  content:"\ea63";
  font-family: "remixicon";
  transform: rotateZ(-90deg);
}

.nav_links a:hover {background-color:#223A58; text-decoration: none;}

.nav_links.slideIn {transform: translateX(0);}
.nav_links a:first-child {
  transform: translateX(100px);
  -webkit- transform: translateX(100px);
  -moz- transform: translateX(100px);
  -ms- transform: translateX(100px);
  -o- transform: translateX(100px);
}
.nav_links.slideIn a:first-child,
.nav_links.slideIn .aboutBtn,
.nav_links.slideIn .business,
.nav_links.slideIn .sustainability,
.nav_links.slideIn .investors,
.nav_links.slideIn .serviceProvider,
.nav_links.slideIn .latest_news,
.nav_links.slideIn .careers,
.nav_links.slideIn .contacts {
  transition-delay: 100ms;
  opacity: 1;
  transform: translateX(0px);
  -webkit- transform: translateX(0px);
  -moz- transform: translateX(0px);
  -ms- transform: translateX(0px);
  -o- transform: translateX(0px);
}

.nav_links .aboutBtn {
  opacity: 0;
   transform: translateX(140px);
  -webkit- transform: translateX(140px);
  -moz- transform: translateX(140px);
  -ms- transform: translateX(140px);
  -o- transform: translateX(140px);
}

.nav_links .business {
  opacity: 0;
   transform: translateX(180px);
  -webkit- transform: translateX(180px);
  -moz- transform: translateX(180px);
  -ms- transform: translateX(180px);
  -o- transform: translateX(180px);
}

.nav_links .sustainability {
  opacity: 0;
  transform: translateX(220px);
  -webkit- transform: translateX(220px);
  -moz- transform: translateX(220px);
  -ms- transform: translateX(220px);
  -o- transform: translateX(220px);
}

.nav_links .investors {
  opacity: 0;
  transform: translateX(240px);
  -webkit- transform: translateX(240px);
  -moz- transform: translateX(240px);
  -ms- transform: translateX(240px);
  -o- transform: translateX(240px);
}

.nav_links .serviceProvider{
  opacity: 0;
  transform: translateX(260px);
  -webkit- transform: translateX(260px);
  -moz- transform: translateX(260px);
  -ms- transform: translateX(260px);
  -o- transform: translateX(260px);
}

.nav_links .latest_news{
  opacity: 0;
  transform: translateX(280px);
  -webkit- transform: translateX(280px);
  -moz- transform: translateX(280px);
  -ms- transform: translateX(280px);
  -o- transform: translateX(280px);
}

.nav_links .careers {
  opacity: 0;
  transform: translateX(300px);
  -webkit- transform: translateX(300px);
  -moz- transform: translateX(300px);
  -ms- transform: translateX(300px);
  -o- transform: translateX(300px);
}

.nav_links .contacts {
  opacity: 0;
  transform: translateX(320px);
  -webkit- transform: translateX(320px);
  -moz- transform: translateX(320px);
  -ms- transform: translateX(320px);
  -o- transform: translateX(320px);
}

.nav_links a,
.nav_links button{
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 400;
  font-size: 2rem;
  color: #fff;
  display: block; 
  padding:20px; 
}
.nav_links button:focus {
  border:0;
  outline: none;
}
.nav_links button {
  background:none;
  border:0;
  width: 100%;
  text-align: left;
}
.nav_links button:hover {background-color:#223A58; cursor: pointer;}
.about_us,
.business,
.sustainability,
.investors,
.contacts {overflow:hidden; height: 70px; position: relative;}
.about_us:hover,
.business:hover,
.sustainability:hover,
.investors:hover,
.contacts:hover{overflow:visible;}

.about_us:hover .about_usDD {transform: translate3d(-100%, -17%, 0px);}
.about_usDD,
.businessDD,
.sustainabilityDD,
.investorsDD,
.contactsDD {
  transform: translate3d(-200%, -17%, 0px);
  width: 300px;
  background-color:#223A58;
}
.businessDD{transform: translate3d(-200%, -34%, 0px);}
.business:hover .businessDD{transform: translate(-100%, -34%);}
.sustainabilityDD {transform: translate3d(-200%, -51%, 0px);}
.sustainability:hover .sustainabilityDD {transform: translate3d(-100%, -51%, 0px);}
.investorsDD {transform: translate3d(-200%, -51%, 0px);}
.investors:hover .investorsDD{transform: translate3d(-100%, -51%, 0px);}
.contactsDD {transform: translate3d(-200%, -51%, 0px);}
.contacts:hover .contactsDD {transform: translate3d(-100%, -51%, 0px);}

.about_usDD a:hover,
.businessDD a:hover,
.sustainability a:hover,
.investors a:hover,
.contactsDD a:hover{
  background-color:#3D536D;
}
.about_usDD a:first-child,
.businessDD a:first-child,
.sustainabilityDD a:first-child,
.investorsDD a:first-child,
.contactsDD a:first-child
{transform:translateX(-50px); opacity: 0;}

.about_usDD a:nth-child(2),
.businessDD a:nth-child(2),
.investorsDD a:nth-child(2),
.contactsDD a:last-child
{transform:translateX(-70px); opacity: 0;}

.about_usDD a:nth-child(3),
.businessDD a:nth-child(3),
.investorsDD a:nth-child(3) 
{transform:translateX(-90px); opacity: 0;}

.about_usDD a:nth-child(4),
.investorsDD a:nth-child(4){transform:translateX(-110px); opacity: 0;}

.about_usDD a:nth-child(5),
.investorsDD a:nth-child(5){transform:translateX(-130px); opacity: 0;}

.about_usDD a:last-child,
.sustainabilityDD a:last-child,
.investorsDD a:nth-child(6){transform:translateX(-150px); opacity: 0;}

.investorsDD a:last-child{transform: translateX(-170px); opacity: 0;}

.about_us:hover .about_usDD a,
.business:hover .businessDD a,
.sustainability:hover .sustainabilityDD a,
.investors:hover .investorsDD a,
.contacts:hover .contactsDD a
{transition-delay: 100ms; transform:translateX(0px); opacity: 1;}


/*****************************************************
             Navigation Mobile
*****************************************************/

.navM {
  background-color:#0C2648;
  position: fixed;
  height: 100%;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 3;
  padding: 7% 0;
  transform: translateX(100%);
}

.navM a, .navM button {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 400;
    font-size: 2rem;
    color: #fff;
    display: block;
    padding: 10px;
}

.navM button {
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
}

.navM a:hover {text-decoration:none;}

.navM button:focus {outline:none;}

.aboutUs_M { overflow:hidden; height:50px; position: relative;}

.aboutUs_M.appear {
  height: 349px;
  background-color:#223A58;
}

.businessM {overflow: hidden; height: 50px; position: relative;}
.businessM.appear{height: 200px;}


.sustainabilityM {overflow: hidden; height: 50px; position: relative;}
.sustainabilityM.appear{height:151px;}


.investorsM {overflow: hidden; height: 50px; position: relative;}
.investorsM.appear {height: 400px;}

.contactsM {overflow: hidden; height: 50px; position: relative;}
.contactsM.appear {height:150px;}

.businessM.appear a,
.aboutUs_M.appear a,
.sustainabilityM.appear a,
.investorsM.appear a,
.contactsM.appear a  {background-color:#3D536D;}

.businessM.appear,
.sustainabilityM.appear,
.investorsM.appear,
.contactsM.appear
{background-color: #223A58;}

.aboutsM:after,
.businessM_Btn:after,
.sustainabilityBtnM:after,
.investorsMBtn:after,
.contactsMBtn:after {
  content:"\ea63";
  font-family: "remixicon";
  position: absolute;
  right: 30px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.aboutUs_M.appear .aboutsM:after,
.businessM.appear .businessM_Btn:after,
.sustainabilityM.appear .sustainabilityBtnM:after,
.investorsM.appear .investorsMBtn:after,
.contactsM.appear .contactsMBtn:after{
  content:"\ea63";
  font-family: "remixicon";
  transform: rotateZ(-90deg);
}

.navM.slideIn {
  transform: translateX(0);
}

@media screen and (min-width: 1025px){
  .nav_links {display: block;}
  .navM {display: none;}

}

@media screen and (max-width: 1024px){
  .nav_links {display: none;}
  .navM {display: block;}
  .navM.slideIn {width: 35%;}
}

@media screen and (max-width: 640px) {
  .navM.slideIn {width: 100%; overflow: scroll;}
  .navigation {padding:20px 15px;}
  .burgerBtn {top: 10px;}
}