<div class="page-container">        <div class="flex-container">            <div class="country netherlands">                <div>                    Netherlands</div>            </div>            <div class="country belgium">                <div>                    Belgium</div>            </div>            <div class="country france">                <div>                    France</div>            </div>            <div class="country germany">                <div>                    Germany</div>            </div>            <div class="country england">                <div>                    England</div>            </div>        </div>    </div>    <script src=‘jquery.js‘></script>    <script>        $(‘.country‘).click(function () {            $(this).toggleClass(‘active‘);            $(‘.page-container‘).toggleClass(‘opened‘);        }); //@ sourceURL=pen.js    </script>

  div        {            -moz-box-sizing: border-box;            box-sizing: border-box;        }                html, body, .page-container        {            height: 100%;            overflow: hidden;        }                .page-container        {            -webkit-transition: padding 0.2s ease-in;            transition: padding 0.2s ease-in;            padding: 80px;        }        .page-container.opened        {            padding: 0;        }        .page-container.opened .flex-container .country:not(.active)        {            opacity: 0;            -webkit-flex: 0;            -ms-flex: 0;            flex: 0;        }        .page-container.opened .flex-container .country:not(.active) div        {            opacity: 0;        }        .page-container.opened .flex-container .active:after        {            -webkit-filter: grayscale(0%) !important;            filter: grayscale(0%) !important;        }                .flex-container        {            display: -webkit-flex;            display: -ms-flexbox;            display: flex;            height: 100%;        }        @media all and (max-width: 900px)        {            .flex-container            {                -webkit-flex-direction: column;                -ms-flex-direction: column;                flex-direction: column;            }        }                .country        {            position: relative;            -webkit-flex-grow: 1;            -ms-flex-positive: 1;            flex-grow: 1;            -webkit-flex: 1;            -ms-flex: 1;            flex: 1;            -webkit-transition: 0.5s ease-in-out;            transition: 0.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;        }        .country div        {            position: absolute;            width: 100%;            z-index: 10;            top: 50%;            text-align: center;            -webkit-transition: 0.1s;            transition: 0.1s;            -webkit-transform: translateY(-50%);            -ms-transform: translateY(-50%);            transform: translateY(-50%);            -webkit-filter: none;            filter: none;        }        .country:after        {            content: " ";            position: absolute;            top: 0;            left: 0;            right: 0;            bottom: 0;            background-size: cover;            -webkit-transition: 0.5s ease-in-out;            transition: 0.5s ease-in-out;            -webkit-filter: grayscale(100%);            filter: grayscale(100%);        }        .country:hover        {            -webkit-flex-grow: 6;            -ms-flex-positive: 6;            flex-grow: 6;        }        .country:hover:after        {            -webkit-filter: grayscale(0%);            filter: grayscale(0%);        }        @media all and (max-width: 900px)        {            .country            {                height: auto;            }        }                .netherlands:after        {            background-image: url("Netherlands.png");            background-position: center;        }                .belgium:after        {            background-image: url("belgium-307_3.jpg");            background-position: center;        }                .france:after        {            background-image: url("30.jpg");            background-position: center;        }                .germany:after        {            background-image: url("vacation.jpg");            background-position: center;        }                .england:after        {            background-image: url("england.jpg");            background-position: center;        }