/* Website by : JamPre */




html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;

  font-family: 'lato', sans-serif;

  color: #000;

  background-color: #fff;
}

section {
  width: 100%;
}

a {
  text-decoration: none;
  text-transform: capitalize;

  color: #000;

  transition: 0.2s;
}





/* Classes */

.mid-screen {
    height: 0;
    margin: 0;
    padding: 0;

    opacity: 0;
}






/* Header style */

#mobile-header {
    height: 0;
    padding: 0;

    opacity: 0;
}

#header {
    width: 100%;

    z-index: 128;

    display: flex;
    justify-content: center;

    position: fixed;

    background-color: #fff;

    box-shadow: #00000073 0 0 50px;
}

#header .container {
    width: 90%;

    display: flex;
    justify-content: space-between;
}

#header .container .left {
    display: flex;
}

#header .container .left img {
    height: 50px;
    margin-right: 1rem;
    
    object-fit: contain;
    place-self: center;
}

#header .container .left h2 {
    font-weight: 300;

    text-transform: uppercase;
}

#header .container .right {
    display: flex;
    place-items: center;
}

#header .container .right a {
    margin: 0 0 0 2rem;

    font-size: 18px;
}






/* image */

#single-image {
    padding-top: 5rem;
}

#single-image .container {
    width: 100%;
    height: 90vh;
    
    display: flex;
    justify-content: center;
}

#single-image .container img {
    width: 100%;
    height: 100%;

    padding: 0 1rem;

    object-fit: contain;
}


#single-image .back-button {
    width: 100px;

    margin-left: 2rem;
    padding: 0.2rem 0;

    position: absolute;
    z-index: 30;

    text-align: center;

    background-color: #00000020;
}

#single-image .back-button:hover {
    background-color: #00000030;
}








@media only screen and (min-width: 100px) and (max-width: 1500px) {

    .wide-screen {
        margin: 0;
        padding: 0;
        height: 0;
        opacity: 0;
    }

    .mid-screen {
        height: auto;
        opacity: 100;
    }
    
    @media only screen and (min-width: 100px) and (max-width: 1000px) {
        
    }

    @media only screen and (min-width: 100px) and (max-width: 700px) {
        
        #header {
            opacity: 0;
            height: 0;
            z-index: 0;
        }

        #mobile-header {
            height: auto;
            padding: 1rem 0;

            opacity: 100;
            z-index: 128;

            position: fixed;

            display: flex;
            justify-content: space-evenly;

            background-color: #fff;
            box-shadow: #00000073 0 0 50px;
        }

        #mobile-header a {
            padding: 0.5rem 0;

            font-size: 21px;
        }


        .mobile-logo {
            height: 3rem;
            opacity: 100;
        }
    
    }

    @media only screen and (min-width: 100px) and (max-width: 490px) {
        
    }

    .wide-screen {
        margin: 0;
        padding: 0;
        height: 0;
        opacity: 0;
    }

    .mid-screen {
        height: auto;
        opacity: 100;
    }
}