body{
	display: flex;
	padding: 10px;
}

header{
	width: 200px;
	background: #839192;
}


.toggle{
	color: black;
	background: none;
	border: none;
	font-size: 20px;
	padding: 0 15px;
	line-height: 60px;
	display: none;
}

nav{
	font-family: calibri;
	font-size: 16px;
	color:  #fdfefe;
	background: #839192;

}

nav ul{
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 16px;
	color:  #A9A9A9;		
}

nav ul li{
	border-bottom: 1px solid;
	color: #fdfefe;	
}

nav ul li{
	color: black;
	background: #737376;
	display: block;
	width: 100%;
}

nav ul ul{
	color: #FFFF00;
	background: #DEB887;	
	height: 0;
	overflow: hidden;
	transition: 0.8s;
	width: 100%;
}


ul li:hover {
	
	background: #DEB887;
}
nav ul li:hover ul{
	
	color: #FFFF00;
	background: #DEB887;		
	height: 100%;
	width: 100%;
	transition: 0.5s;	
}


nav ul ul ul li{

		
	background: #A9A9A9;		
	height: 0;
	overflow: hidden;
	transition: 0.5s;
	width: 100%;
}

nav ul ul li:hover ul li{
	color: #A9A9A9;
	background: #A9A9A9;	
	border-bottom: 0px solid;	
	height: 35px;
	overflow: hidden;
	width: 100%;
}




nav ul a{
	color: #fdfefe;
}

nav ul ul a{
	color: #fdfefe;
}

.form-control {
      width: 50%; /* pantallas */
    }
	.row.align-items-center .col-md-2,
    .row.align-items-center .col-md-10 {
            display: flex;
            align-items: center;
    }
	.row.align-items-center .col-md-2{margin-left:auto}
    @media (max-width: 768px) {
      /* Tablets (≥576px and <768px) */
      .form-control {
        width: 100%;
      }
    }
    @media (max-width: 576px) {
      /* celular (<576px) */
      .form-control {
        width: 100%;
      }
	}