/* CLOSED MENU BAR */
.GreyHeader {
height: 140px;
/*background-color: rgba(107,107,107,0.5);*/
background-image: linear-gradient(to top, rgba(0,0,0,0), rgba(17,52,72,1));
position: fixed;
top: 200;
width: 100%; }

/* SCROLLED MENU BAR */
.FireBrickRed {
height: 100px;
background-color: rgba(17,52,72,1);
position: fixed;
top: 200;
width: 100%; }

.transition {
  -webkit-transition: height 500ms; /* For Safari 3.1 to 6.0 */
  transition: height 500ms; }




.bd-grid {
  max-width: 1200px;
  display: grid;
  grid-template-columns: 100%;
  margin-left: 1.5rem;
  margin-right: 1.5rem; }


/*===== HEADER =====*/
.navigationrow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /*height: var(--header-height);*/
  padding: 0 1rem;
  /*background-color: #fff;*/
  z-index: 100 ;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);*/
}

.header__logo {
  /*visibility: hidden;
  color: #0E1026; */ }

.header__toggle {
  font-size: 2rem;
  cursor: pointer;
  /*margin-top: 10px;*/
  color: #fff; }


/*===== NAV =====*/
@media screen and (max-width: 768px) {
  .nav {
    position: fixed;
    top: 0;
    left: -100%;
    background-color: #34333a ;
    /*width: 80%;*/
    height: 100vh;
    padding: 2rem 0;
    z-index: 100 ;
    transition: .5s;
    overflow-y: auto; }
}

.nav__content {
  display: flex;
  flex-direction: column; }

.nav__perfil {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1rem; }

.nav__img {
  display: flex;
  justify-content: center;
  /*width: 200px;*/
  /*height: 200px;*/
  /*border-radius: 50%;*/
  overflow: hidden;
  margin-bottom: 1rem; }

.nav__img img {
  /*max-width: 280px;*/ }


.nav__name {
  display: block;
  font-size: 1.5rem;
  color: #FBFBFB; }
@media screen and (min-width: 768px) {
.nav__name { font-size: 1rem; }
}



.nav__item { margin-bottom: 2rem; }

.nav__link { color: #FBFBFB; }

.nav__link:hover { color: #a8b192; }

/*Show menu*/
.show { left: 0; }

/*Active link*/
.active { color: #FBFBFB; }


/*=== Dropdown ===*/
.dropdown__link {
  display: flex;
  align-items: center;
  justify-content: space-between; }

.dropdown__icon {
  font-size: 1.3rem;
  transition: .5s; }

.dropdown__menu {
  margin: 1rem 0 0 1rem;
  display: none; }

.dropdown__item {
  margin: 1rem 0; }

.dropdown:hover > .dropdown__menu {
  display: block; }

.dropdown:hover .dropdown__icon {
  transform: rotate(180deg); }





/* ===== MEDIA QUERIES=====*/
@media screen and (min-width: 576px) {
/*.nav { width: 288px; }*/
}




@media screen and (min-width: 768px) {
    
body { margin: 0; }
    
.header { height: calc(3rem + 1rem); }
    
.header__logo { display: none; }
    
.header__toggle {
    display: none;
    visibility: hidden; }
    
.nav { 
    width: 100%;
    margin-left: -32px; } /* To Compensate for Hidden Burger */
    
.nav__content {
    flex-direction: row;
    justify-content: space-between;
    align-items: center; }
    
.nav__perfil {
    flex-direction: row;
    text-align: initial;
    margin-bottom: 0; }
    
.nav__img {
    /*width: 40px;*/
    /*height: 40px;*/
    margin-right: .5rem;
    margin-bottom: 0; }
    
.nav__img img { 
    max-height: 280px; }
    /*display: none;  /* ADDED TO HIDE LOGO ON DESKTOP */

.nav__name { color: #0E1026; }
    
.nav__list { 
    display: flex;
    align-items: center; }

.nav__item {
    margin: 0 1.5rem;
    padding: 1.4rem 0; }
    
.nav__link {
    color: #fff;
    font-size: 13px;
    text-transform: uppercase; }
    
.nav__link:hover { color: #a8b192; }

.active { color: #fff; }

.dropdown { position: relative; }
    
.dropdown__menu {
    /*position: fixed;*/
    position: absolute;
    margin: 0;
    /*top: calc(3rem + 1.4rem);*/
    top: 4rem;
    padding-top: .5rem;
    padding-right: 1.5rem;
    padding-bottom: .5rem;
    padding-left: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: .5rem;
/*    background-color: rgba(107,107,107,0.9);*/
    background-color: rgb(17 52 72 / 75%);
    min-width: 230px; }
    
.dropdown__item { margin: 1rem 0; }
    
}




@media screen and (min-width: 1024px) {
.bd-grid {
    margin-left: auto;
    margin-right: auto; }
}