@charset "utf-8";
/* CSS Document */


/***********fonts*********************/

@font-face {
	font-family: 'KievitOT_Regular';
	src: url('fonts/KievitOT-Regular.eot'); /* Para Internet Explorer */
	src: local('KievitOT-Regular'), /* Para el resto de navegadores */
	url('fonts/KievitOT-Regular.ttf') format('truetype'), url('fonts/KievitOT-Regular.woff') format('woff'), url('fonts/kievitot-regular_20230410.otf') format('otf');
}

@font-face {
	font-family: 'KievitOT_Medium';
	src: url('fonts/KievitOT-Medium.eot'); /* Para Internet Explorer */
	src: local('KievitOT-Medium'), /* Para el resto de navegadores */
	url('fonts/KievitOT-Medium.ttf') format('truetype'), url('fonts/KievitOT-Medium.woff') format('woff'), url('fonts/kievitot-medium_20230410.otf') format('otf');
}

@font-face {
	font-family: 'KievitOT_Bold';
	src: url('fonts/KievitOT-Bold.eot'); /* Para Internet Explorer */
	src: local('KievitOT-Bold'), /* Para el resto de navegadores */
	url('fonts/KievitOT-Bold.ttf') format('truetype'), url('fonts/KievitOT-Bold.woff') format('woff'), url('fonts/kievitot-bold_20230410.otf') format('otf');
}

@font-face {
    font-family: 'kievitSlabBold';
    src: url('fonts/kievitslabbold_20230410.ttf') format('truetype');
}



@font-face {
    font-family: 'kievitSlabRegular';
    src: url('fonts/KievitSlab_Regular.ttf') format('truetype');
}



@font-face {
    font-family: 'kievitSlabExtraBold';
    src: url('fonts/kievitslabextrabold_20230410.ttf') format('truetype');
}




@font-face {
    font-family: 'ExpertSansRegular';
    src: url('fonts/expertsans-regular_20230410.ttf.ttf') format('truetype');
}







html { height:100%}

body {
  margin: 0;
  padding: 0;
  background: url(img/bg01_20230410.svg) no-repeat;
  background-size:cover;
  background-position: top left;
  min-height:500px;
}



.mobile body { 
  background: url(img/bgmobile_20230410.svg) no-repeat;
	
    background-position:top -70px right -140px;
}



a {
  text-decoration: none;
  color: #1E1E23;
  opacity:1;
  font-family: 'work sans', sans serif;
  font-size: 1.5em;
  font-weight: 400;
  transition: 200ms;
}
a:hover {
  opacity:0.8;
}
ul {
  padding: 0;
  list-style-type: none;
}



.container {
  justify-content: center;
  align-items: center;
}

.content {


    position: absolute;
	z-index:0;
    top: 0%;
    display: block;
    margin-top:37px;
    left: 13%;
}
.logoBNApc { width:150px;}


.mobile .content {
    margin-top: 40%;
    left: 8%;
	width:88%;
}


nav.NavPc { display:block;}
nav.NavMobile { display:none;}

.mobile nav.NavPc { display:none;}
.mobile nav.NavMobile { display:block; width:90%;}



/********* NAV PC  *********************/
nav.NavPc a{
      text-decoration:none;
      color:inherit;
      font-size:14px;
      }
            
nav.NavPc li{
      display:inline-block;
	  text-align:left;
      position:relative;
	
}

nav.NavPc ul li a {
	 color:#125772;  }
	 
nav.NavPc>ul>li a {
	 font-size:1.5em;
	 font-family: 'ExpertSansRegular';
	 padding:5px 55px 5px 10px;
	 display:block;
	 font-weight:bold;
	 }
	 
nav.NavPc>ul>li>ul>li a {
	 font-size:1.3em;

	  padding:5px 55px 5px 10px;
	 display:block;
	 font-weight:normal;
	 }

nav.NavPc li a {color:#125772;  font-size:1.5em;
	 font-family: 'KievitOT_Bold';}


            
nav.NavPc li:hover{
      
      }
            
nav.NavPc li>ul{
      display:none;
      }

nav.NavPc li:hover>ul{
      display:block;
      position:absolute;
      top:39px;
      left:5px;
	  background:#e6f7fc;
}

nav.NavPc { text-align:right; margin-right:70px; margin-top:50px; position:relative; z-index:1000;}

nav.NavPc>ul>li { }
nav.NavPc>ul>li ul li  { width: max-content; display:block; }








.mobile nav {
  height: 65px;
}


#menuToggle {
  display: flex;
  flex-direction: column;
  position: relative;
  top: 25px;
  left: 25px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: flex;
  width: 40px;
  height: 32px;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

#menuToggle span
{
  display: flex;
  width: 40px;
  height: 5px;
  margin-bottom: 7px;
  position: relative;
  top:10px;
  left:10px;
  background: #0d4b5d;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 5px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(1px, 3px);
  background: #36383F;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}


#menuToggle input:checked ~ span {
	width: 30px;
    height: 3px
	
	}

#menu
{
  position: absolute;
  width: 210px;
  height: 400px;
  box-shadow: 5px 5px 10px #9d9fa3;
  margin: -50px 0 0 -50px;
  padding: 50px;
  padding-top: 60px;
  background-color: #F5F6FA;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
top: 40px;
    border-radius: 22px;

}

#menu li
{
  padding: 11px 0;
  transition-delay: 2s;
}
#menu li .logoBNA { width:60%; margin-top:15px;}

#menuToggle input:checked ~ ul
{
  transform: none;
}
#menu li a {  color:#125772;}
#menu li a {font-family: 'KievitOT_Bold', sans-serif; font-size:1.2em;}
#menu li ul li a {font-family: 'KievitOT_Regular', sans-serif; font-size:1em;}
#menu li ul li { padding:2px 0;}



hr{ 
  
    border:         none;
    border-left:    1px solid #145772;
    height:         4vh;
    width:          1px;
	margin:0 20px;       
}

.mobile hr { margin:0 10px;}
.CTA {
    border: 1px solid #107a92;
    background: #e6f7fb;
    display: block;
    width: fit-content;
    padding: 1px 23px;
    border-radius: 12px;
	margin-top:35px;
}

.CTA p, 
.CTA hr,
.CTA img  { display: inline-block; vertical-align:middle;}


.CTA p { color:#125772; font-family: 'KievitOT_Medium', sans-serif; line-height:1.5em; margin:10px 0px;}

.mobile .CTA>img:last-child { display:none;}
.mobile .CTA>img { width: 70px;}
.mobile .CTA {box-sizing: border-box; padding:0 20px;}
.mobile .CTA p { font-size:0.8em;}


.button {
    background: #0d4b5d;
    color: white;
    border-radius: 8px;
    box-shadow: 3px 3px 5px #bbb;
    margin: 50px 0;
    display: inline-block;
    font-size: 1em;
    font-family: 'KievitOT_Regular', sans-serif;
    padding: 6px 30px;
    letter-spacing: 0.5px;
}

.content>p {
    color: #0d4b5d;
    font-family: 'KievitOT_Medium', sans-serif;
    margin: 10px 0px;
    font-size: 1.4em;
    line-height: 1.1em;
}
.mobile .content>p {

    font-size: 1em;
	
	}



.content>p span {

    font-family: 'KievitOT_Bold', sans-serif;
	white-space:nowrap;

}

.mobile .logoBNApc { display:none;}

.content>h1 {

    font-family: 'kievitSlabExtraBold';
	font-size:5em;
	    color: #0d4b5d;
		margin-bottom:30px;
		margin-top:100px;
}
.mobile .content>h1 { margin-top:100px; font-size:4em;}




/* /////////////////////////////////////////////////////////*/
/* /////////////////////////////////////////////////////////*/
/* //////////////////   MAX - W I D T H  //////////////////*/
/* /////////////////////////////////////////////////////////*/
/* /////////////////////////////////////////////////////////*/
/* /////////////////////////////////////////////////////////*/




@media screen and (max-width: 1300px) 
{
nav.NavPc>ul>li { 	margin-left:40px;}
nav.NavPc>ul>li a {    font-size: 1.4em;}

}

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

nav.NavPc>ul>li { 	margin-left:25px;}
nav.NavPc>ul>li a {    font-size: 1.3em;}
nav.NavPc { margin-right:40px;}	
nav.NavPc li:hover>ul { top:30px;}
nav.NavPc>ul>li>ul>li a { font-size:1.1em; }



	} /* end max-width: 1200px ********************/




@media screen and (max-width: 1050px) 
{

body { min-width:1050px;}
.mobile body { min-width:inherit;}

	
	} /* end max-width: 1200px ********************/







@media screen and (max-width: 420px) 
{


.mobile .CTA{zoom:85%;}

	
	} /* end max-width: 1200px ********************/

@media screen and (max-width: 360px) 
{

.mobile .content {
  
    width: 320px;
}

	
	} /* end max-width: 1200px ********************/