/* Import fonts */
        @import url('https://fonts.googleapis.com/css?family=Oswald:300|Slabo+27px');
        
        /* Variables */
        :root {
            --white: #ffffff;
            --black: #333333;
            --red: #e74c3c;
            --transblack: rgba(66,66,66,0.7);
        }
        
        /* Base Stuff inc responsive text */
        body, html, #app {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Slabo 27px', serif;
            font-size: 14px;
            color: var(--black);
        }
        
        /* Tablet */
        @media screen and (min-width: 768px) {
            body { font-size: 16px; }
        }
        
        /* Desktop */
        @media screen and (min-width: 1024px) {
            body { font-size: 18px; }
        }
        
        /* Large Desktop */
        @media screen and (min-width: 1440px) {
            body { font-size: 23px; }
        }
        
        /* Header font mixin styles */
        .header-font {
            font-family: 'Oswald', sans-serif;
            font-weight: 300;
            text-transform: uppercase;
            letter-spacing: 0.1em;
        }
        
        .header-font-large {
            font-size: 2.5rem;
        }
        
        .header-font-medium {
            font-size: 1.5rem;
        }

		.logo {
			position: absolute;
		}
		
        
        /* Main Styles */
        .gallery {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            padding: 34px;
        }
        
        .gallery-tile {
            /* min-width: 200px;
            max-width: 28vw; */
            width: 400px;
            height: 400px;
    
            margin: 0.25em;
            overflow: hidden;
            position: relative;
            cursor: pointer;
        }
        
        .gallery-tile img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: transform 300ms ease-in-out, filter 300ms ease-in-out;
        }
        
        .picture-info {
            position: absolute;
            z-index: 1;
            color: var(--white);
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: flex-start;
            opacity: 0;
            transition: opacity 300ms ease-in-out, filter 300ms ease-in-out;
        }
        
        .picture-info > * {
            margin: 0.5rem 1.25rem;
        }
        
        .picture-info h2 {
            margin: 0.5rem 1.25rem;
        }
        
        .gallery-tile:hover img {
            transform: scale(1.1);
            filter: brightness(80%);
        }
        
        .gallery-tile:hover .picture-info {
            opacity: 1;
        }
        
        .imageview-wrapper {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .imageview {
            display: flex;
            justify-content: center;
        }
        
        .imageview > * {
            margin: 3em;
        }
        
        .imageview-image {
            width: 20em;
            /* height: 25em; */
            box-shadow: 0 20px 40px -5px var(--transblack);
        }
        
        .imageview-info {
            max-width: 260px;
            text-align: right;
            position: relative;
        }
        
        .imageview-info button {
            color: var(--red);
            cursor: pointer;
            border: none;
            background: none;
            outline: none;
            margin: 0;
            padding: 0;
            position: absolute;
            top: -2em;
            right: -1em;
        }
        
        .imageview-info button:hover {
            animation: swell 300ms ease-in-out;
        }
        
        .imageview-info h2 {
            margin-top: 0;
        }
        
        .imageview-info ul {
            list-style: none;
            padding: 0;
        }
        
        .fadeIn {
            animation: fade 300ms ease-in-out forwards;
        }
        
        @keyframes fade {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
        
        @keyframes swell {
            0% { transform: scale(1); }
            50% { transform: scale(1.3); }
            100% { transform: scale(1); }
        }
        
        .hidden {
            display: none;
        }

@media screen and (max-width: 768px) {
    .imageview {
        display: block;
    }
    /* header .logo {
        position: relative;
        
    } */
    header .logo img {
        width: 170px;
    }
    header .logo {
        top: -40px;
    }
}