/*
 * Copyright (C) 2017 Philippe Tjon - A - Hen, philippe@tjonahen.nl
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

/*
    https://www.w3schools.com/w3css/w3css_templates.asp
*/
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
    height: 100%;
    color: #777;
    line-height: 1.8;
}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mySlides {
    display: none;
}
/*// Small screens*/
@media only screen { 
    /* First image (Logo. Full height) */
    .bgimg-1 {
        background-image: url('http://demo.home.tjonahen.nl/static/banners/s/banners_01.JPG');
        min-height: 100%;
    }

    /* Second image (Portfolio) */
    .bgimg-2 {
        background-image: url("http://demo.home.tjonahen.nl/static/banners/s/banners_02.JPG");
        min-height: 400px;
    }

    /* Third image (Contact) */
    .bgimg-3 {
        background-image: url("http://demo.home.tjonahen.nl/static/banners/s/banners_03.JPG");
        min-height: 400px;
    }
} /* Define mobile styles */


/*// Medium screens*/

@media only screen and (min-width: 40.063em) and (max-width: 64em) { 
    /* First image (Logo. Full height) */
    .bgimg-1 {
        background-image: url('http://demo.home.tjonahen.nl/static/banners/m/banners_01.JPG');
        min-height: 100%;
    }

    /* Second image (Portfolio) */
    .bgimg-2 {
        background-image: url("http://demo.home.tjonahen.nl/static/banners/m/banners_02.JPG");
        min-height: 400px;
    }

    /* Third image (Contact) */
    .bgimg-3 {
        background-image: url("http://demo.home.tjonahen.nl/static/banners/m/banners_03.JPG");
        min-height: 400px;
    }
} /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */


@media only screen and (min-width: 64.063em) and (max-width: 90em) { 
    /* First image (Logo. Full height) */
    .bgimg-1 {
        background-image: url('http://demo.home.tjonahen.nl/static/banners/l/banners_01.JPG');
        min-height: 100%;
    }

    /* Second image (Portfolio) */
    .bgimg-2 {
        background-image: url("http://demo.home.tjonahen.nl/static/banners/l/banners_02.JPG");
        min-height: 400px;
    }

    /* Third image (Contact) */
    .bgimg-3 {
        background-image: url("http://demo.home.tjonahen.nl/static/banners/l/banners_03.JPG");
        min-height: 400px;
    }
} /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

/*// XLarge screens*/
@media only screen and (min-width: 90.063em) {
    /* First image (Logo. Full height) */
    .bgimg-1 {
        background-image: url('http://demo.home.tjonahen.nl/static/banners/h/banners_01.JPG');
        min-height: 100%;
    }

    /* Second image (Portfolio) */
    .bgimg-2 {
        background-image: url("http://demo.home.tjonahen.nl/static/banners/h/banners_02.JPG");
        min-height: 400px;
    }

    /* Third image (Contact) */
    .bgimg-3 {
        background-image: url("http://demo.home.tjonahen.nl/static/banners/h/banners_03.JPG");
        min-height: 400px;
    }

} /* min-width 1921px, xxlarge screens */



.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
    .bgimg-1, .bgimg-2, .bgimg-3 {
        background-attachment: scroll;
    }
}

.project-container {
    display: flex;
    flex-wrap: wrap;
    
}
/* 
    https://www.w3schools.com/howto/howto_css_image_text.asp
    image text fade in 
*/
.container {
    position:relative;
    width: 160px;
    height: 120px;
    margin: .5em;
}
.image {
    opacity: 1;
    display: block;
    margin: auto;
    transition: .5s ease;
    backface-visibility: hidden;
    object-fit: scale-down;
}

.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%)
}

.container:hover .image {
    opacity: 0.3;
}

.container:hover .middle {
    opacity: 1;
}

.text {
    background-color: gray;
    color: white;
    font-size: 16px;
    padding: 16px 32px;
}

/*
    Slide (lightbox)
    https://www.w3schools.com/howto/howto_js_lightbox.asp
*/


/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 5px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: auto;
    background-color: black;
}

/* Modal Content */
.modal-content {
    background-color: black;
    position: relative;
    margin: auto;
    padding: 0;
    width: 90%;
    max-width: 1200px;
}

.modal-content img {
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width:100%;
    max-height:90vh;
    height: auto;
    width: auto;    
}

/* The Close Button */
.close {
    color: white;
    position: absolute;
    top: 10px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
}


/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

.caption-container {
    text-align: center;
    background-color: black;
    padding: 2px 16px;
    color: white;
}