.city {
	position: relative;
	width: 100%;
	height: 54px;
	margin: 0;
	overflow: hidden;
	transition: 0.3s ease-out;
}

	.city::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 1px;
		background-color: rgba(100,97,87,.1);
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 35;
	}

	.city_container {
		overflow: visible;
	}
	
		.city h2 {
			position: relative;
			padding: 1.5em 2em;
			margin: 0;
			font-size: 1em;
			font-weight: normal;
			line-height: 1.2;
			color: #3d3d39;
			text-align: left;
			background: #f5f5f5;
/* 			transition: .3s ease-out; */
			box-sizing: border-box;
			z-index: 30;
		}
		
			.city h2:hover {
				background: #fdfdfd;
				cursor: pointer;
			}
			
			.city h2:after {
				content: "\276f";
				font-family: 'valeta' !important;
			    speak: none;
			    font-style: normal;
			    font-weight: normal;
			    font-variant: normal;
			    text-transform: none;
			    line-height: 1;
			    -webkit-font-smoothing: antialiased;
			    -moz-osx-font-smoothing: grayscale;
			    
			    position: absolute;
			    left: 7px;
			    top: 50%;
			    margin-top: -8px;
			    font-size: 16px;
				color: #646157;
				-webkit-transform: none;
				-ms-transform: none;
				transform: none;
				transition: .3s ease-out;
			}
			
		.city .body {
			padding: 0 1em 1em;
			color: #2a2929;
			opacity: 0;
			-webkit-transform: rotate(-25px);
			-ms-transform: translateY(-25px);
			transform: translateY(-25px);
			transition: .3s ease-out;
			z-index: 25;
		}
		
		
	.city.active h2 {
		background: #fdfdfd;
	}
	
		.city.active h2:after {
			-webkit-transform: rotate(90deg);
			-ms-transform: rotate(90deg);
			transform: rotate(90deg);
		}
	
		.city.active .body {
			opacity: 1;
			-webkit-transform: none;
			-ms-transform: none;
			transform: none;
			
		}