* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none;
}

html {
    overflow-y: visible !important
}


input {
    border-radius: 0;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
}


@font-face {
    src: url('../fonts/GT-America-Regular-Italic.woff') format('woff');
    font-family: GT-America;
    font-weight: 400;
    font-style: italic;
}

@font-face {
    src: url('../fonts/GT-America-Medium-Italic.woff') format('woff');
    font-family: GT-America;
    font-weight: 500;
    font-style: italic;
}

@font-face {
    src: url('../fonts/GT-America-Bold-Italic.woff') format('woff');
    font-family: GT-America;
    font-weight: 700;
    font-style: italic;
}

@font-face {
    src: url('../fonts/GT-America-Regular.woff') format('woff');
    font-family: GT-America;
    font-weight: 400;
}

@font-face {
    src: url('../fonts/GT-America-Medium.woff') format('woff');
    font-family: GT-America;
    font-weight: 500;
}

@font-face {
    src: url('../fonts/GT-America-Bold.woff') format('woff');
    font-family: GT-America;
    font-weight: 700;
}


body {
    font-family: GT-America;
    background: whitesmoke;
    color: #333;
    font-size: 2em;
    cursor: url("../img/cursor-circle.png") 16 16, auto;
}

.circle,
.circle:hover {
    cursor: url("../img/cursor-circle.png") 16 16, auto !important;
}

a {
    color: #333;
}

ul {
    list-style: none;
    padding: 0;

}


/* PROJECT LIST */

#project-list {
    margin: auto;
    padding-bottom: 10vh;
}

.main-wrap {
    margin: auto;
    padding: 0 10vw;
}

.logo img {
    margin: 0 auto;
    max-width: 100%;
    padding: 15vh 0;
}

/* DROPDOWN */

.dropbtn {
    display: block;
    background: #333;
    color: whitesmoke;
    border: 2px solid #333;
    border-radius: 0px;
    padding: 3px 0;

    font-family: GT-America;
    font-size: .7em;
    line-height: 1em;

    cursor: url("../img/cursor-circle.png") 16 16, auto;
    width: 130px;
    text-align: center;
    position: relative;
}

.dropbtn:hover {
    /*    background: whitesmoke;*/
    opacity: .95;
    border: 2px solid #333;
    -webkit-transition: all 0.15s ease-in;
    -moz-transition: all 0.15s ease-in;
    transition: all .15s ease-in;
}


.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: whitesmoke;
    border: 2px solid #333;
    width: 130px;
    overflow: auto;
    font-weight: 500;
    text-transform: uppercase;
    z-index: 1;
    list-style: none;
    padding: 0;
    margin: 0;

}

.dropdown-content li {
    background: whitesmoke;
    color: #333;
    padding: 4px 4px 4px 8px;
    display: block;
    font-size: .7em;
}

.dropdown li:hover {
    font-style: italic;
}

.show {
    display: block;
}

.hover {
    color: whitesmoke;
    background: #333;
}

.no-photo:hover {
    color: #333 !important;
    background: none !important;
}

/* PROJECT ITEM */

.gallery-active {
    opacity: .1;
}

.text-justify {
    text-align: justify;
}

.project-item {
    position: relative;
    display: inline;
}

.project-opacity {
    opacity: .65;
}

.project-item a {
    text-decoration: none;
    padding: 0 2px;
    cursor: url("../img/cursor-circle.png") 16 16, auto; /* Legacy */
    cursor: url("../img/cursor-circle.png") 16 16, auto; /* FF */
    cursor: -webkit-image-set(url("../img/cursor-circle.png") 1x, url("../img/cursor-circle.png@2x.png") 2x, url("../img/cursor-circle.png@4x.png") 4x) 16 16, auto; /* Webkit */
}

.project-item span {
    display: inline;
}

.project-item a:active,
.project-item a:hover {
    color: whitesmoke;
    background: #333;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all .2s ease-in;
    cursor: url("../img/cursor-circle.png") 16 16, auto;

}

.project-item-top {
    z-index: 9999999;
    background: #333;
    color: whitesmoke;
    opacity: 1;
}

/* PROJECT ITEM LIST */

.project-item .date {
    vertical-align: super;
    font-size: .5em;
}

.project-item .attendees {
    text-transform: uppercase;
}


.project-item .description {
    text-transform: uppercase;

    font-style: italic;
}

.project-item .with:before {
    content: 'with '
}

.project-item .with {
    font-size: .75em;
    text-transform: uppercase;
}

.project-item .attendees:after {
    content: ', '
}

.project-item .about {
    /*    color: #333;*/
    font-size: .7em;
    font-weight: 400;
    text-transform: none;
    line-height: 1.1em;
}

.project-item .date {
    font-weight: 400;
}

.project-item .title,
.project-item .attendees,
.project-item .description,
.project-item .with,
.project-item .abut {
    /*    color: #333;*/
    font-weight: 500;
}

.project-item .date:empty,
.project-item .title:empty,
.project-item .attendees:empty,
.project-item .description:empty,
.project-item .with:empty,
.project-item .about:empty {
    display: none;
}



/* REST*/

.thumb-container {
    /*    opacity: .2;*/
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}


.thumb-wrapper {
    display: grid;
    grid-template-columns: 1fr;
}

#thumb {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    align-self: center;
    justify-self: center;
}


.thumb-img {
    opacity: .6;
    position: relative;
    width: auto;
    max-width: 75vw;
    height: auto;
    max-height: 95vh;
    display: block;
    line-height: 0;
    box-sizing: border-box;
    margin: 0 auto;
    padding: 40px 0;
    z-index: 1;
    /*
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
*/
    -webkit-filter: blur(5px);
    filter: blur(55px);
}


.hidden {
    overflow: hidden;
    display: none;
    visibility: hidden;
}

/* MFP */

.mfp-bg {
    opacity: 0;
    /*
    visibility: hidden;
    display: none;
*/
}

.mfp-container {
    padding: 0;
    user-select: none;

}

.mfp-figure:after {
    box-shadow: 0 4px 4px rgba(0, 0, 0, .1),
    0 1px 6px rgba(0, 0, 0, .05),
    0 8px 8px rgba(0, 0, 0, .1),
    0 16px 16px rgba(0, 0, 0, .1),
    8px 32px 32px rgba(0, 0, 0, .15),
    8px 64px 64px rgba(0, 0, 0, .15);
}


.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
    cursor: url("../img/cursor-cross.png") 16 16, auto;
}

.mfp-zoom {
    /*cursor: url("../img/cursor-cross.png"), auto;*/
}

.mfp-auto-cursor .mfp-content {
    cursor: url("../img/cursor-cross.png") 16 16, auto;
}

img.mfp-img,
img.mfp-img:hover,
img.mfp-img:active,
figure.mfp-img,
figure.mfp-img:hover,
figure.mfp-img:active {
    cursor: url("../img/cursor-next.png") 16 16, auto;
    max-width: 75vw;
    max-height: 95vh;

}

.mfp-preloader,
.mfp-preloader a,
.mfp-preloader a:hover,
.mfp-preloader a:active {
    cursor: url("../img/cursor-next.png") 16 16, auto;
}



/*animation*/

img.mfp-img {
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.3s ease-out;
}

/* overlay animate in */

img.mfp-img {
    opacity: 1;
}

/* overlay animate out */

.mfp-fade.mfp-bg.mfp-removing {
    opacity: 0;
}

/* content at start */

.mfp-fade.mfp-wrap .mfp-content {
    opacity: 0;

    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all .6s ease-out;
}

/* content animate it */

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
    opacity: 1;
}

/* content animate out */

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
    opacity: 0;
}

/* menu-bar */

.menu-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.menu-bar button {
    margin-right: 18px;
}

/* search bar */

*:focus {
    outline: none;
}

.search-bar {
    font-size: .7em;
    padding: 0;
    background: #333;
}

.search {
    font-family: GT-America;
	background: #333;
	color: whitesmoke;
	text-transform: uppercase;
	text-align: center;
    border: none;
    line-height: 1em;
	min-width: 130px;
    max-width: 50vw;
    transition: width 0.05s;
    overflow:hidden;
    margin: 0;
    border: 2px solid #333;
    border-radius: 0;
    padding: 0 0 2px 0;
}

.search::placeholder {
	color: whitesmoke;
}

/* .description, */
.address,
.phone {
    margin: 15px 0;
}

/* BREAKPOINTS */

@media all and (max-width: 575px) {
    body {
        font-size: 1em;
    }

    .main-wrap {
        padding: 0 2vw;
    }

    .logo img {
        padding: 15vh 5vw;
    }

    .menu-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .dropbtn,
    .dropdown-content {
        width: 100px;
    }
    .search {
        min-width: 100px !important;
        max-width: 100px;
        padding: 0 !important;
        line-height: 1.5em;
    }
    .search-bar {
        display: block;
        padding: 1px;
        height: 21px;
        padding-top: 3px;
    }
}