:root{
--primary-color: #002235;
--hover-primary-color: #01314c;
--secondary-color: #e81c1c;
--hover-secondary-color:#cf1515;
--primary-text-color: #666666;
--gray: #d2d2d2;
--white: #ffffff;
--black: #000000;
--black-light: #111111;
--black-gray:#070707;
--font: 1.8rem;
}
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
html{
font-size: 62.5%;
}
body{
font-size: 2.1rem;
font-family: 'Geogrotesque_Rg', Tahoma, Geneva, Verdana, sans-serif;
}
p{
font-size: 2.1rem;
line-height: 1.3;
}
a{
text-decoration: none;
cursor: pointer;
}
h1,h2,h3,h4,h5,h6,p{
padding: 1.5rem 0rem;
}
p,a{
color: var(--primary-text-color);
}
img{
aspect-ratio: attr(width) / attr(height);
}
.container{
max-width: 1140px;
padding: 0 15px;
margin:0 auto;
}
.flex-align{    
display: flex;
flex-wrap: wrap;
align-items: center;
}
header{
width: 100%;
}
header .top-bar{
background-color: var(--primary-color);
display: none;
}
header .menu{
background-color: var(--white);
}
header .menu figure{
flex-basis: 20%;
flex-grow: 1;
padding: 15px;
}
header .menu nav{
flex-basis: 80%;
flex-grow: 1;
} header .menu nav .nav-right-section{
display: none;
}
header .menu nav ul.nav-right-section {
background: var(--primary-color);
position: absolute;
margin-top: 0;
width: 100%;
z-index: 1;
list-style: none;
left: 0px;
}
header .menu nav ul.nav-right-section > li {
padding: 1.2rem 2.2rem;
border-bottom: 1px solid var(--gray);
}
header .menu nav ul.nav-right-section > li a{
color: var(--white);
}
#nav li ul{
margin-top: 1.2rem;
}
#nav li ul li {
list-style: none;
line-height: 3.6rem;
border-bottom: 1px solid var(--gray);
}
#nav li ul li:last-child {
border-bottom: none;
} #nav li ul {
display: none;
}
#nav li:hover ul {
display: block;
}
#nav li:not( :first-child ):hover ul { }
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {
color: var(--secondary-color);
}
.menu-movil{
width: 60px;
height: 60px;
border-radius: 50%;
color: var(--white);
font-size: 3rem;
background-color: var(--primary-color);
display: block;
display: flex;
align-items: center;
justify-content: center;
}
.img-fluid{
max-width: 100%;
height: auto;
}
header .menu nav .header-display-block{
display: block;
}
@media (min-width: 768px){
}
@media (min-width:992px){ 
}
@media (min-width:1200px){
header .top-bar{
display: block;
}   
header .top-bar .social-media{
width: 100%;
height: 45px;
display: flex;
list-style: none;
justify-content: flex-end;
align-items: center;
}
header .top-bar .social-media li{
margin-left: 10px;
}
header .top-bar .social-media a{
color: var(--white);
font-size: 1.8rem;   
}    
.menu-movil{
display: none;
} 
#nav li:hover ul {        
background: var(--white);
display: block;
position: absolute;
margin-top: 0;
padding-top: 1.8rem;
width: auto;
z-index: 1;
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}
#nav li ul li {
list-style: none;
line-height: 3.6rem;
font-size: 2.0rem;
padding: 0.5rem 3rem;
border: initial;
}
#nav li ul li:hover{
background: var(--gray);
}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a {
color: var(--primary-color);
}
header .menu nav ul.nav-right-section {
background: none;
position: initial;
margin-top: none;
padding-top: none;
z-index: none;
list-style: none;
}
header .menu nav ul.nav-right-section > li {
padding: initial;
border: initial;
}
header .menu nav ul.nav-right-section > li a{
color:var(--primary-text-color);
}
header .menu nav .nav-right-section{
height: auto;
display: flex;
list-style: none;
justify-content: flex-end;
align-items: center;
} 
header .menu nav ul.nav-right-section > li:last-child a{
background-color: var(--primary-color);
font-weight: bold;
color: var(--white);
border-radius: 25px;
padding: 10px 30px;
}
header .menu nav ul.nav-right-section > li:last-child a:hover{
background-color: var(--hover-primary-color);
}
nav ul.nav-right-section > li > a{
margin-left: 2.1rem;
font-size: 2.1rem;
}      
header .menu figure{
padding: 20px;
}    
}
.btn-primary{
background-color: var(--primary-color);
font-weight: bold;
color: var(--white);
border:none;
border-radius: 25px;
padding: 10px 30px;
}
.btn-primary:hover{
background-color: var(--hover-primary-color);
}
.btn-secondary{
background-color: var(--secondary-color);
font-weight: bold;
color: var(--white);
border:none;
border-radius: 25px;
padding: 10px 30px;
}
.btn-secondary:hover{
background-color: var(--hover-secondary-color);
}