/*
Theme Name: the7dtchild
Author: Dream-Theme
Author URI: http://dream-theme.com/
Description: The7 is perfectly scalable, performance and SEO optimized, responsive, retina ready multipurpose WordPress theme. It will fit every site – big or small. From huge corporate portals to studio or personal sites – The7 will become a great foundation for your next project!
Version: 1.0.0
License: This WordPress theme is comprised of two parts: (1) The PHP code and integrated HTML are licensed under the GPL license as is WordPress itself.  You will find a copy of the license text in the same directory as this text file. Or you can read it here: http://wordpress.org/about/gpl/ (2) All other parts of the theme including, but not limited to the CSS code, images, and design are licensed according to the license purchased. Read about licensing details here: http://themeforest.net/licenses/regular_extended
Template: dt-the7
*/

/* Container */
.aero-category-bars {
    display: flex;
    width: 100%;
    height: 500px;
}

/* Bar wrapper */
.aero-bar {
    flex: 1;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

/* Content wrapper */
.aero-bar__inner {
    position: relative;
    height: 100%;
}

/* Top icon */
.aero-bar__icon--top {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
}

/* Bottom icon */
.aero-bar__icon--bottom {
    position: absolute;
	bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
}

/* Vertical label */
.aero-bar__label {
    position: absolute;
    writing-mode: vertical-rl;
    transform: translate(-50%, 0) rotate(180deg);
    left: 50%;
    bottom: 40px;
    white-space: nowrap;
}

/* Hover behavior */
.aero-bar * {
	transition: all 0.4s ease;
}

.aero-bar:hover .aero-bar__icon--top {
    opacity: 0;
    transform: translate(-50%, -20px);
}

.aero-bar:hover .aero-bar__icon--bottom {
    opacity: 1;
    transform: translate(-50%, -20px);
}

.aero-bar:hover .aero-bar__label {
    transform: translate(-50%, -50px) rotate(180deg);
}

.aero-bar:hover {
	filter: brightness(1.05);
}