/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-family: "Helvetica Neue", Helvetica, sans-serif, "Helvetica Neue Regular", Icons;
}
[data-predefined-style="true"] h1 {
	font-family: "Helvetica Neue", Helvetica, sans-serif, "Helvetica Neue Regular", Icons;
}
[data-predefined-style="true"] h2 {
	font-family: "Helvetica Neue", Helvetica, sans-serif, "Helvetica Neue Regular", Icons;
}
[data-predefined-style="true"] small {
	font-family: "Helvetica Neue", Helvetica, sans-serif, "Helvetica Neue Regular", Icons;
}

[data-css-preset] .container_width {
	width: 100% /*!content_left*/;
}

[data-css-preset] .container {
	margin-left: 0 /*!content_left*/;
	margin-right: auto /*!content_left*/;
	text-align: left /*!text_left*/;
}

[data-css-preset] .content_padding {
	padding-top: 0 /*!main_margin*/;
	padding-bottom: 0 /*!main_margin*/;
	padding-left: 2rem /*!main_margin*/;
	padding-right: 2rem /*!main_margin*/;
}

[data-css-preset] #site_menu_button {
	font-size: 36px /*!site_menu_button*/;
	top: 3rem /*!site_menu_button*/;
	left: 3rem /*!site_menu_button*/;
    display: none !important;
}

:root {
    font-size: 10px !important;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0px;
    color: white;
    font-family: Helvetica Neue, Helvetica, sans-serif, Helvetica Neue Regular;
    padding: 0 2rem;

    background: linear-gradient(black, rgb(36, 8, 8));
    background-size: 400% 400%;

    -webkit-animation: BackgroundAnimation 20s ease infinite;
    -moz-animation: BackgroundAnimation 20s ease infinite;
    -o-animation: BackgroundAnimation 20s ease infinite;
    animation: BackgroundAnimation 20s ease infinite;
}

@-webkit-keyframes BackgroundAnimation {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@-moz-keyframes BackgroundAnimation {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@-o-keyframes BackgroundAnimation {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}
@keyframes BackgroundAnimation {
    0%{background-position:51% 0%}
    50%{background-position:50% 100%}
    100%{background-position:51% 0%}
}

a {
    color: white;
    cursor: pointer;
}

img {
    max-width: 100%;
    max-height: 100%;
    width: auto !important;
    height: auto !important;
}

header {
    margin-bottom: 10rem;
}

nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
	font-size: 12px;
    padding: 2rem;
}

.cont nav {
    padding: 2rem 0 6rem 0;
}

nav ul {
    padding: 0px;
    margin: 0px;
    list-style: none;

    display: flex;
    width: 100%;
    justify-content: space-between;
}

nav ul li {
    display: inline;
}

header nav ul li {
    padding-left: 1.5rem;
}

header nav ul li:first-child {
    flex-grow: 2;
    padding-left: 0px;
}

#mailTo {
    display: none;
}

main {
    position: relative;
}

.project,
.grid {
    text-align: justify;
    font-size: 1.3rem;
}

.project a {
	text-decoration: none;
}

.project::after {
    content: "";
    display: inline-block;
    width: 100%;
}

.grid {
    display: grid;
    grid-template-columns: auto auto;
}

.grid .col p:first-child {
    margin-top: 0;
}

.grid.project-grid {
	line-height: 1.6rem;
}

.grid.project-grid .col {
    margin-bottom: 3rem;
}

.grid.project-grid .col:first-child {
    order: 2;
    grid-column: 1/3;
}

.grid.project-grid .col:nth-child(2) {
    order: 1;
    grid-column: 1/3;
}

.grid.project-grid img {
    margin-bottom: 2rem;
}
.cont img {
	width: 100% !important;
}

.image-grid,
.link-grid {
    display: none;
}

#eaddr {
    font-size: 1rem;
    margin-top: 0.5rem;
}

.date {
    text-transform: uppercase;
}


@media(min-width: 768px) {
    header nav ul {
        display: initial;
        width: initial;
    }

    header nav ul li {
        padding-right: 3rem;
        padding-left: 0;
    }

    header nav ul li:first-child {
        padding-right: 15rem;
    }


    #mailTo {
        display: initial;
    }


    .project,
    .grid {
        text-align: justify;
        font-size: 2.6rem;
    }

    .grid {
        grid-template-columns: 20rem auto;
    }

    .grid.project-grid {
        grid-template-columns: 1fr 1fr;
    }

    .grid.project-grid .col:first-child {
        padding-right: 8rem;
        order: 1;
        grid-column: auto;
    }

    .grid.project-grid .col:nth-child(2) {
        order: 2;
        grid-column: auto;
    }

    .grid.project-grid p {
        font-size: 12px;
    }

    .grid.project-grid img {
        margin-bottom: 4rem;
    }

    .image-grid {
        position: absolute;
        top: 1.5rem;
        left: 0;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-template-rows: auto 1fr 1fr 1fr 1fr auto auto 1fr auto 1fr 1fr 1fr auto;
        grid-gap: 1rem 3rem;
        z-index: -10;
    }
	
    .image-grid img:first-child {
        grid-column: 5/6;
        grid-row: 1/2;
    }
    
    .image-grid img:nth-child(2) {
        grid-column: 6/7;
        grid-row: 4/5;
        max-height: initial;
    }

    .image-grid img:nth-child(3) {
        grid-column: 3/4;
        grid-row: 7/8;
    }

    .image-grid img:nth-child(4) {
        grid-column: 4/5;
        grid-row: 7/8;
        
    }

    .image-grid img:nth-child(5) {
        grid-column: 10/12;
        grid-row: 6/8;
    }

    .image-grid img:nth-child(6) {
        grid-column: 11/12;
        grid-row: 9/10;
    }

    .image-grid img:nth-child(7) {
        grid-column: 6/7;
        grid-row: 13/14;
    }
    
    .link-grid {
        display: block;
        position: absolute;
        top: 0px;
        z-index: 20;
    }

    .link-grid a {
        display: block;
        position: absolute;
    }
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}


[data-css-preset] .quick-view-background {
    background-color: transparent /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 2rem 0;
    text-align: center;
    font-size: 1.8rem;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,0.4);
    color: white;
}

.quick-view-navigation .close-button .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: rgba(255, 255, 255, 1);
    stroke-width: 1.5px;
}

.quick-view-navigation .close-button {
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
    stroke: rgba(255, 255, 255, 1);
    stroke-width: 1.5px;
}

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 2.5px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: rgba(255, 255, 255, 1);
    stroke-width: 1.5px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
    stroke: rgba(255, 255, 255, 1);
    stroke-width: 1.5px;
}

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}