/* http://meyerweb.com/eric/tools/css/reset/Links to an external site.
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

/*  Website CSS Begins here!

        COLORS: 
    grey:           #ddd
    light grey:     #eee
    aqua:           #3DADA0
    orange:         orange
    dark orange:    #D27736   */

/* - - - - Global CSS - - - - */

body {
    margin: 0;
    padding: 0;
    position: relative;
    font-family: "georgia", "times new roman", serif;
    color: #555;
    line-height: 1.2em;
}

a {
    text-decoration: none;
    color: #D27736;
}

article a {
    border-bottom: solid 2px orange;
    transition:color 0.2s;
}

article a:hover{
    color:#3DADA0;
}

header {
    width: 100%;
    box-sizing: border-box;
    background: url(images/concrete-wall-2.png) #fff;
}
    
h2, h3, nav h2 {
    font-family: "DM Serif Display", Georgia, serif;
    text-align: center;
    padding: 3px;
}

h3, #contact p {
    color: #3DADA0;}

button {
    background-color: #3DADA0;
    color: #fff;
    font-family: "DM Serif Display", Georgia, serif;
    display: block;
    width: 150px;
    margin: 15px auto;
    border: none;
    padding: 10px;
    text-transform: lowercase;
    font-size: 16px;
}

nav ul {
    margin: 0;
    list-style-type: none;
}

nav input[type=checkbox] {
        display: none;
    }

img, figure {
    max-width: 100%;
}

#home_gallery {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

#home_gallery figure {
    flex: 1 1 auto;
    margin: 0;
}

#home_gallery figure img {
    object-fit:cover;
}

#blocka {
    order: 1;
}

#blockb {
    order: 2;
}

#home_gallery h2 {
    order: 3;
    flex: 0 1 100%;
    text-transform: uppercase;
}

h2 {
    text-transform: uppercase;
}

article h2, aside h2 {
    margin-bottom: 7px;
}

#blockc, #blockd, #blocke, #blockf, #blockg {
    order: 4;
}

figure img {
    width: 100%;}


form {
    background-color: #ddd;
    padding: 10px;
    border: 10px #eee solid;
    margin: 7px auto;
}

#contact p, #commissions > p {
    text-align: center;
}

dt, h4 {
    color: orange;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
}

dd p, #pricelist p
{
    margin-bottom: 10px;
}

#pricelist ul {
    list-style: inside;
    list-style-type: square;
    margin: 5px;
}

aside h2 {
    text-transform: none;
}

footer {
    text-align: center;
    padding: 20px;
    width: 100%;
    background-color: #fff;
    background: url(images/concrete-wall-2.png) #fff;
    box-sizing: border-box;
}

/* - - - - Mobile CSS - - - - */

@media only screen and (max-width: 600px) {
    
    h1 a {
        display: block;
    }
    
    h1 img {
        display: block;
        max-width:350px;
        width: 80%;
        margin-left:1vw;
        height: auto;
    }
    
    /* Mobile Navigation Menu */
    
    
    nav {
        position:relative;
    }
    
    nav ul {
        height: 0;
        overflow: hidden;
        transition: height 0.4s;
    }
    
    nav h2 {
        display:inline-block;
        position:absolute;
        top:45px;
        right:0;
        margin-top:-100px;
        padding: 7px;
        opacity:0.5;
    }
    
    nav h2 img {
        width:40px;
        height:40px;
    }
    
    nav input:checked ~ ul {
        height: 12.5em;
    }
    
    nav ul {
        background: url(images/concrete-wall-2.png) #777;
    }
    
    nav ul li {
        display: block;
        margin: 0;
        border-bottom:2px #666 solid;
    }
    
    nav ul li a {
        margin: 0;
        padding: 10px;
        display: block;
        color: #fff;
        font-family: "DM Serif Display", Georgia, serif;
    }
    
    nav ul li a:active {
        background-color: #444;
    }
    
    /* Home page Gallery - Mobile */
    
    #blockb, #blocke, #blockf {
        display: none;
    }
    
    #blockc img, #blockd img {
        flex: 1 1 auto;
        height: 60vw;
        width: auto;
    }
    
    /* Form - Mobile */
    
    form {
        border-left: none;
        border-right: none;
    }
    
    input[type=text],select, input[type=email],textarea {
        background-color: #fff;
        box-sizing: border-box;
        width: 85%;
        display: block;
        padding: 10px;
        border: #ededed solid 2px;
        margin: 2px auto;
        font-family: arial, sans-serif;
        color: #555;
        font-size: 0.9em;
    }
    
    textarea {
        height: 40vw;
    }
    
    input[type=text]:focus, input[type=email]:focus, select:focus, textarea:focus {
        color: #3DADA0
    }
    
    ul li label {
        display: block;
        text-align: center;
        margin-top: 10px;
    }
    
    /* Various - Mobile */
    
    h2 {
        font-size: 1.5em;
    }
    
    h3 {
        font-size: 1.3em;
        margin: 10px;
        text-align: left;
    }
    
    .sideimg {
        display: flex;
        width: 100%;
        overflow: hidden;
    }
    
    .sideimg img {
        flex-grow: 1;
        flex-shrink: 1;
        height: 70vw;
        width: auto;
        object-fit:cover;
    }
    
    #commissions .sideimg img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        margin: 7px 0 0 0;
    }
    
    .square img {
        height: 160px;
        object-fit: cover;
        object-position: top;
    }
    
    aside h2 {
        margin:5px 0 10px 0;
    }
    
    #featured h2{
        margin:15px 15px 10px 15px;
        padding-top:10px;
        border-top:#eee solid 5px;
    }
    
    #twitter figure{
        height:300px;
        overflow:scroll;
        padding:10px;
        background-color:#eee;
    }

    .headerimg img {
        height: 100px;
        object-fit: cover;
        object-position: center;
    }
    
    dd {
        padding: 5px;
    }
    
    #pricelist p {
        margin: 5px;
    }
    
}

/* - - - - Desktop/Tablet Combo CSS - - - - */

@media (min-width: 601px) {

    #commissions, #pricelist, #contact {
        max-width:1000px;
        padding:10px;
        margin:0 auto;
    }
    
    h1 {
        display: inline-block;
        margin-left: 10%;
    }

    h1 img {
        height: 100px;
        width: auto;
    }
    
    /* navigation - desktop/tablet */

    nav {
        position:relative;
        margin-left:auto;
        width:auto;
        height:0;
    }
    
    nav::after {
        content: ' ';
        clear:both;
    }

    nav h2 {
        display: none;
    }

    nav h2, nav ul {
        margin:0;
    }

    nav ul {
        float:right;
        text-transform:lowercase;
        position:absolute;
        right:10%;
        bottom:15px;
    }

    nav ul li {
        margin:0 0 0 0;
        display:inline-block;
    }
    
    nav ul li a {
        font-size:20px;
        color:#333;
        font-family:"DM Serif Display";
        opacity:0.7;
        transition:opacity 0.5s, border-color 0.5s;
        border:0 rgba(61, 173, 160, 0) solid;
    }
    
    nav ul li a:hover {
        opacity:1;
        border-bottom:rgba(61, 173, 160, 0.7) solid 3px;
    }
    
    nav ul li:not(:first-child)::before {
        content: "| ";
        font-size:18px;
    }
    
    /* contact page - desktop/tablet */
    
    form {
        box-sizing:border-box;
        width:55%;
        margin:10px;
        padding:30px;
    }
    
    form ul {
        margin:0 auto;
    } 
    
    form ul li {
        margin:0 auto;
        text-align:center;
    }
    
    label {
        display:inline-block;
        width:100px;
        text-align:left;
    }
    
    form input, select, textarea {
        width:250px;
        margin:10px;
        border:solid #eee 2px;
    }
    
    form input, select {
        height:30px;
    }
    
    input[type=text], select, input[type=email], textarea {
        background-color: #fff;
        box-sizing: border-box;
        padding: 5px;
        border: #ededed solid 2px;
        font-family: arial, sans-serif;
        color: #555;
    }
    
    textarea {
        padding:10px;
        height: 140px;
        width:85%;
        margin:10px auto;
    }
    
    input[type=text]:focus, input[type=email]:focus, select:focus, textarea:focus {
        color: #3DADA0
    }
    
    #contact p, #contact form {
        float:right;
    }
    
    .right {
        float:right;
    }
    
    .left {
        float:left;
    }
    
    .sideimg {
        box-sizing:border-box;
        width:40%;
        height:auto;
        margin:10px;
    }
    
    .sideimg:last-child::after, form::after {
        content:' ';
        clear:both;
    }
    
    h2 {
        font-size:27px;
    }
    
    h3 {
        font-size:22px;
        margin:5px 10px 5px 30px;
        text-align:left;
        
    }
    
    .headerimg img{
        height:250px;
        object-fit:cover;
    }
    
    /* circles - size 1 (desktop) */

    aside {
        margin: 10px auto 0 auto;
        box-sizing: border-box;
        text-align: center;
        clear:both;
    }
    
    aside h2 {
        font-size:25px;
        margin-top:-10px;
        z-index:1;
        position:relative;
    }
    
    #recent h2, #featured h2 {
        color:#fff;
        text-shadow:0px 0px 2px #666;
    }

    aside section {
        display:inline-block;
        position:relative;
        border-radius: 600px;
        padding: 30px;
        width: 300px;
        height: 300px;
        margin: 10px;
        background-color: #ddd;
    }

    aside section figure {
        position:absolute;
        left:0;
        top:0;
        padding: 0;
        margin: 0;
    }

    aside section figure img {
        width: 360px;
        height: 360px;
        clip-path:circle(180px at center);
        object-fit:cover;
        z-index:-1;
    }
    
    #twitter figure{
        top:55px;
        left:10px;
        height:250px;
        width:340px;
        clip-path:circle(170px at center);
        overflow:scroll;
    }
    
    /* home page - dekstop/tablet */
    
    #home_gallery figure img {
        height: 32vw;
        width: auto;
    }
    
    #home_gallery h2 {
        font-size: 20pt;
    }

    #home_gallery #blockf img, #home_gallery #blockg img {
        height: 45vw;
        width: auto;
        margin-top:0.5vw;
    }
    
    #home_gallery #blockc img, #home_gallery #blockd img, #home_gallery #blocke img {
        height:40vw;
        width:auto;
    }
    
    #home_gallery #blocka img, #home_gallery #blockb img{
        height:39vw;
        width:auto;
        margin-top:1vw;
    }

    footer {
        position: absolute;
        bottom:60px;
        overflow:hidden;
        margin-bottom:-70px;
        padding:30px;
    }
}

/*  - - - - Tablet CSS - - - - */

@media (min-width:601px) and (max-width:900px) {
    h1 {
        margin-left:15px;
    }
    
    h1 img{
        height:80px;
        width:auto;
    }
    
    nav ul{
        right:10px;
        bottom:15px;
    }
    
    nav ul li a {
        font-size:16px;
    }
    
}

/* Circles size 2 */

@media (min-width:850px) and (max-width:1150px) {
    
    aside section {
        width:200px;
        height:200px;
    }
    
    aside section figure {
        left:0;
        top:0;
    }
    
    aside h2 {
        font-size:20px;
        margin-top:-15px;
        letter-spacing:0.02em;
    }
    
    #featured h2, #recent h2 {
        text-shadow:0px 0px 2px #333;
    }
    
    aside section figure img {
        height:260px;
        width:260px; 
        clip-path:circle(131px at center);
        object-fit:cover;
        z-index:-1;
    }
    
    #twitter figure{
        top:40px;
        left:7px;
        height:180px;
        width:246px;
        clip-path:circle(121px at center);
        overflow:scroll;
    }
    
    
    footer {
        bottom:30px;
        padding:35px;
    }
    
}

/* Circles size 3 */

@media (min-width:601px) and (max-width:849px) {
    
/* form adjustments */    
    
    .sideimg {
        width:37%;
    }
    
    label {
        text-align:center;
        width:100%;
        display:block;
    }
    
    textarea {
        width:250px;
    }
    
/* back to circle widths */
    
    aside section {
        width:130px;
        height:130px;
        margin:3px;
    }
    
    aside section figure {
        left:0;
        top:-5px;
    }
    
    aside h2 {
        font-size:18px;
        margin-top:-20px;
        letter-spacing:0.02em;
    }
    
    #featured h2, #recent h2 {
        text-shadow:0px 0px 2px #333;
    }
    
    aside section figure img {
        height:200px;
        width:200px;
        clip-path:circle(95px at center);
        object-fit:cover;
        z-index:-1;
    }
    
    
    #twitter figure{
        top:35px;
        left:5px;
        height:120px;
        width:180px;
        clip-path:circle(90px at center);
        overflow:scroll;
    }
    
    footer {
        padding:30px;
        bottom:26px;
        font-size:14px;
    }
}