@mixin bg($url, $pos: center) &:after background-image: url($url) background-position: $pos div box-sizing: border-box html, body, .page-container height: 100% overflow: hidden .page-container transition: padding .2s ease-in padding: 80px &.opened padding: 0 .flex-container .country:not(.active) opacity: 0 flex: 0 div opacity: 0 .active:after filter: grayscale(0%) !important .flex-container display: flex height: 100% @media all and (max-width: 900px) flex-direction: column .country position: relative flex-grow: 1 flex: 1 transition: .5s ease-in-out cursor: pointer font-family: 'Bree Serif', serif text-align: center color: #fff font-size: 22px text-shadow: 0 0 3px #000 div position: absolute width: 100% z-index: 10 top: 50% text-align: center transition: .1s transform: translateY(-50%) filter: none &:after content: " " position: absolute top: 0 left: 0 right: 0 bottom: 0 background-size: cover transition: .5s ease-in-out filter: grayscale(100%) &:hover flex-grow: 6 &:after filter: grayscale(0%) @media all and (max-width: 900px) height: auto .netherlands @include bg('http://cdn.jsdm.com/2/Netherlands.png') .belgium @include bg('http://cdn.jsdm.com/2/belgium-307_3.jpg') .france @include bg('http://cdn.jsdm.com/2/paris-france-contemporary-french-studies-studying-abroad-seine-30.jpg') .germany @include bg('http://cdn.jsdm.com/2/neuschwanstein-castle-tour-germany-vacation.jpg') .england @include bg('http://cdn.jsdm.com/2/interesting-facts-about-england-1024x640.jpg')