@import url('https://fonts.googleapis.com/css?family=Barlow');
@import url('https://fonts.googleapis.com/css?family=Just+Another+Hand');
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
    font-family: 'Just Another Hand', Georgia;
    color: #4d4d4e;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    color: #68933e;
    text-decoration: none;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}


/* START CUSTOM */

/* BUTTONS */

.buttons {
    display: block;
    margin:0 auto 30px;
    padding: 0;
    list-style: none;
    overflow: hidden;
    font-size: 24px;
}

.buttons li {
    list-style: none;
    margin: 0 15px 0 0;
    padding: 0;
    float: left;
}


.buttons li:last-child {
    margin-right: 0;
}

.b {
    display: block;
    margin: 0;
    padding:10px 30px;
    background-color: #4d4d4e;
    color:#fff;
    border:none;
    border-radius: 40px;
    font-size: 30px;
    font-family: 'Just Another Hand', Georgia;
}

.button-single li {
    margin:0;
    float: none;
}

.b-alternative {
    background-color: #68933e;
}

.increase-font-size {
    font-size: 200%;
}

/* ICONS */
.i {
    display: inline-block;
    text-indent: -9999px;
    background: url('../img/sprite.png') no-repeat 0 0;
}

.i-camera, .i-package, .i-package-large {
    margin-left: 15px;
}

.i-camera {
    background-position: -260px -10px;
    width: 25px;
    height: 21px;
    margin-bottom: -3px;
}

.i-package {
    background-position: -310px -60px;
    width: 23px;
    height: 22px;
    margin-bottom: -5px;
}

.i-package-large {
    background-position: -60px -110px;
    width: 66px;
    height: 66px;
    margin-bottom: -5px;
}

.i-insta {
    background:url('../img/i-insta.png') no-repeat 50% 50%;
    width: 30px;
    height: 29px;
    background-size: 80%;
}

.i-dog-cat {
    background:url('../img/i-dog-cat.png') no-repeat 50% 50%;
    width: 49px;
    height: 27px;
    background-size: 80%;
}

h1,h2,h3,h4,h5,h6 {font-weight: normal; margin-bottom: 20px; line-height: 1;}
h3,h4,h5,h6 {font-family: 'Barlow', verdana;}

h1 {font-size: 84px; margin-bottom: 30px;}
h2 {font-size: 60px;}
h3 {font-size: 30px;}
h4 {font-size: 24px;}
h5 {font-size: 14px; font-weight: 600;}
h6 {font-size: 12px;}

p {
    font-size: 16px;
    font-family: 'Barlow', verdana;
    margin-bottom: 20px;
    line-height: 1.5;
}

input, select {
    vertical-align:middle;
}


/* CUSTOM STYLE */

#page-container {
    width: 1200px;
    margin: 0 auto;
    padding:0;
    overflow: hidden;
}

#content-container {
}

#header {
    padding: 30px 0;
    overflow: hidden;
}

.nav-intro {
    float:left;
    margin-right: 20px;
}

.logo_ff {
    display: block;
    text-indent: -9999px;
    width: 237px;
    height: 51px;
    background-image: url('../img/logo_forrest-foto.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    float: left;
    margin-right: 30px;
}

#header nav {
    padding: 0;
    padding-top: 20px;
}

#header .mobile-menu {
    display: none;
}

.nav-intro p {
    float: left;
    font-size: 16px;
    font-family: 'Fjalla One', Georgia;
    max-width: 180px;
    margin:0;
    padding:7px 0 0;
    line-height: 1.3;
}

nav {
    float: right;
    margin:0 0 0 auto;
    font-size: 16px;
    font-family: 'Fjalla One', Georgia;
}

nav ol {
    list-style: none;
    margin: 0;
    padding:0;
    overflow: hidden;
}

nav li {
    float:left;
    margin-left: 20px;
}

nav li:first-child {
    margin-left: 0;
}

nav li a {
    color: #68933e;
    padding: 10px 20px;
}

nav li:last-child a {
    padding-right: 0;
}

#page-title {
    margin: 0 auto 60px;
    padding-top: 20px;
    text-align: center;
}

#page-title p {
    font-size: 16px;
}

#hero {
    position: relative;
    z-index: 5;
}

#hero ol {
    list-style: none;
    margin: 0;
    padding: 0;
}

#hero li {
    display: block;
    margin: 0;
    padding: 0;
}

#hero li img {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
}

#home_hero-description {
    background-color: #cb7459;
    color:#fff;
    width: 85%;
    margin: -100px auto 0;
    padding: 50px 75px;
    position: relative;
    z-index: 10;
    box-sizing:border-box;
    overflow: visible;
}

#home_hero-description h1 {
    margin-bottom: 10px;
}

#home_hero-description h5 {
    margin-bottom: 10px;
}

#home_hero-description p {
    margin-bottom: 30px;
}

.dog-montage {
    position: relative;
    z-index: 20;
    display: block;
    margin: 0 auto;
    padding: 0;
    margin-top: -50px;
    width: 75%;
}


/* PAGE - EXPERIENCE */
.body_experience {
    background: #ffedd5 url('../img/experience_dog-paw-bg.png') no-repeat 50% 450px;
    padding-bottom: 200px;
}
.please-delete {
    background: rgba(255,237,213,0.1) url('../img/experience_design-bg_PLEASE-DELETE.png') no-repeat 50% 0;
    height: 4000px;
}

.body_experience #content-container h1 {
    padding-top:85px;
}

#experience-container {
}

.e-section {
    clear: both;
}

.e-section p {
    font-family: 'Just Another Hand', Georgia;
    font-size: 24px;
    text-align: left;
    line-height: 1.1;
}

.e-section h2 {
    color:#a15579;
    font-size: 36px;
    margin-bottom: 10px;
}

.e-section h3 {
    color:#68933e;
    font-size: 30px;
    margin-bottom: 10px;
    font-family: 'Just Another Hand', Georgia;
}

#section-intro {
    text-align: center;
    overflow: hidden;
    margin-bottom: 50px;
    height: 200px;
}

#section-intro > p {
    float: left;
    box-sizing:border-box;
    padding: 50px 0 0 35px;
    font-size: 30px;
}

#section-intro > p > span {
    float:left;
    margin-right: 20px;
    margin-bottom: 50px;
    font-size: 60px;
    display: block;
    line-height: 36px;
}

.e-sprite {
    background-image: url('../img/sprite_experience.png');
    background-repeat: no-repeat;
}

.s-computer-hello, .s-computer-forrest-foto {
    width: 296px;
    height: 186px;
}

.s-computer-hello {
    background: url('../img/experience_pc-screen_hello.png') no-repeat 10px 10px;
    margin-left: 290px;
    margin-right: 50px;
    background-size: 85%;
}

.s-computer-forrest-foto {
    background: url('../img/experience_pc-screen_we-are-forrest-foto.png') no-repeat 10px 10px;
    margin-left: 0;
    margin-right: 0;
    background-size: 85%;
}


#section-photo-session {
    background: url('../img/experience_pic-montage.png') no-repeat 180px 0;
    font-family: 'Just Another Hand', Georgia;
    padding:110px 0 0 670px;
    background-size: 36%;
    height: 460px;
}

#section-photo-session p {
    margin-bottom: 15px;
    margin-right: 270px;
}

#section-photo-selection {
    height: 435px;
    padding-left: 575px;
    background: url('../img/experience_photo-selection.png') no-repeat 730px 15px;
    background-size: 37%;
}

#section-photo-selection .text-photo-selection {
    margin-right: 435px;
}

#section-choose-medium {
    padding-top: 60px;
    padding-left: 20px;
    height: 890px;
}

#section-choose-medium .section-blurb {
    float:left;
    width: 150px;
}

#section-choose-medium ul {
    list-style: none;
    margin: 0;
    padding: 100px 0 0;
    position: relative;
}

#section-choose-medium li {
    position: absolute;
    text-align:center;
}

#section-choose-medium li p {
    text-align: center;
}

#section-choose-medium .pr-digital-copies {
    left: 290px;
    top:55px;
    width: 200px;
    background: url('../img/experience_print_digital-copies.png') no-repeat 50% 35px;
    background-size: 100%;
}

#section-choose-medium .pr-framed-photos {
    left:583px;
    top:113px;
    width: 200px;
    background: url('../img/experience_print_framed-photos.png') no-repeat 50% 35px;
    background-size: 100%;
}

#section-choose-medium .pr-canvas-prints {
    left:860px;
    top:232px;
    width: 220px;
    height: 330px;
    background: url('../img/experience_print_canvas-prints.png') no-repeat 50% 30px;
    background-size: 100%;
}

#section-choose-medium .pr-photo-album {
    left:445px;
    top: 432px;
    width: 280px;
    background: url('../img/experience_print_photo-album.png') no-repeat 50% 30px;
    background-size: 90%;
}

#section-choose-medium .pr-digital-copies h3 {margin-bottom: 160px;}
#section-choose-medium .pr-framed-photos h3 {margin-bottom: 160px;}
#section-choose-medium .pr-photo-album h3 {margin-bottom: 230px;}

#section-mail-time {
    height: 300px;
    padding: 20px;
    background: url('../img/experience_mail-packages.png') no-repeat 290px 10px;
    background-size: 32%;
}

#section-enjoy {
    padding-top: 645px;
    padding-bottom: 50px;
    text-align: center;
    background: url('../img/experience_couch-doge.png') no-repeat 50% 200px;
    background-size: 35%;
}

#section-enjoy h2 {
    margin-bottom: 60px;
}

#section-enjoy .buttons {
    margin: 0 auto 0 450px;
}



/* CONTACT PAGE */
.body_contact {
    background-color: #f7eee9;
}

.body_contact #page-title {
    padding-top: 80px;
    margin-bottom: 30px;
}

.body_contact #page-title .buttons {
    margin-bottom: 0;
}

.body_contact #content-container {
    width: 400px;
    margin: 0 auto;
}

.b-instagram {
    padding-top: 0;
    padding-bottom: 0;
}

.b-instagram span {
    line-height: 1.6;
    padding: 0 10px;
}

.body_contact .b-instagram .i-insta {
    position: relative;
    top:5px;
}

.body_contact .b-instagram .i-dog-cat {
    position: relative;
    top:5px;
}

#contact-form {

}

#contact-form form, #contact-form fieldset {
    display: block;
    margin: 0;
    padding: 0;
}

#contact-form legend span {
    display: block;
    position: absolute;
    left:-9999px;
}

#contact-form fieldset ol {
    list-style: none;
    margin: 0;
    padding:0;
}

#contact-form fieldset li {
    display: block;
    margin-bottom: 10px;
    position: relative;
}

#contact-form fieldset li label {
    display: block;
    font-size: 30px;
    position: absolute;
    left:20px;
    top:15px;
}

#contact-form fieldset li input, 
#contact-form fieldset li textarea {
    display: block;
    margin:0;
    padding: 43px 20px 15px;
    font-size: 14px;
    font-family: 'Barlow', verdana;
    width: 100%;
    box-sizing:border-box;
    border-radius:5px;
    border:2px solid #68933e;
    color: #666;
    line-height: 1.5;
}

#contact-form fieldset li textarea {
    height: 200px;
    padding-top: 48px;
}

.contact-submit {
    padding-top: 20px;
}

.contact-submit .b {
    width: 100%;
    box-sizing:border-box;
    cursor: pointer;
}

.contact-note {
    text-align: center;
    line-height: 1.5;
}

.contact-submit .increase-font-size {
    line-height: 0.5;
    display: inline-block;
    margin-bottom: -5px;
    vertical-align: middle;
}

#errorContainer {
    border: 2px solid red;
    color:red;
    border-radius:5px;
    padding:20px;
    margin-bottom: 15px;
    font-size: 24px;
    font-family: 'Just Another Hand','Barlow', verdana;
}

.thankyou {
    text-align: center;
    font-weight: bold;
}

/* ABOUT */

#about-container {
    padding:0 600px 0 0;
    position: relative;
}

#about-container img {
    position: absolute;
    left:550px;
    border:10px solid #68933e;
}

.about_forrest                      {top:-80px; width: 500px; transform: rotate(-2deg);}
.about_elke                         {top:300px; width: 480px; transform: rotate(-3deg);box-shadow:2px -3px 10px rgba(0,0,0,0.3);}
.about_lemon                        {top:580px; width: 260px; transform: rotate(-1deg);box-shadow:2px -3px 10px rgba(0,0,0,0.3);}
#about-container .about_choc-chip   {top:710px; left:680px; width: 150px; transform: rotate(-1deg);box-shadow:2px -3px 10px rgba(0,0,0,0.3);}
#about-container .about_tin-tin     {top:720px; left:845px; width: 170px; transform: rotate(4deg);box-shadow:2px -3px 10px rgba(0,0,0,0.3);}
#about-container .about_gabi        {top:560px; left:775px; width: 270px; transform: rotate(2deg);box-shadow:2px -3px 10px rgba(0,0,0,0.3);}

.body_about #content-container {
    padding: 100px;
}


/* GALLERY */

.body_gallery h1 {
    text-align: center;
    margin-bottom: 15px;
}

#gallery-container p {
    text-align: center;
}

#gallery-container ul {
    list-style: none;
    margin:0;
    padding:0;
}

#gallery-container > ul > li {
    margin: 0;
    padding: 0;
    display: block;
    float:left;
}

#gallery-container > ul > li.large {
    width: 1196px;
    margin-top: 4px;
    margin-bottom: 4px;
    clear: both;
}

#gallery-container > ul > li.half {
    width: 596px;
    margin-right: 4px;
}

#gallery-container img {
    display: block;
    width: 100%;
}

.body_gallery #content-container .buttons {
    clear: both;
    padding-top: 50px;
    padding-bottom: 200px;
    margin-left: 440px;
}





/* MOBILE */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 1199px) {

    .logo_ff {
        width: 474px;
        height: 102px;
        margin-right: 15px;
    }

    #page-container {
        overflow: hidden;
        width: 100%;
        box-sizing: border-box;
        min-height: 1400px;
    }

    #header {
        padding: 30px;
        position: relative;
        overflow: visible;
        height: 94px;
    }

    .nav-intro p {
        font-size: 24px;
        max-width: 320px;
        max-width: 250px;
        padding-top: 25px;
    }

    #header .mobile-menu {
        display: block;
        width: 250px;
        height: 150px;
        background-color: red;
        position: absolute;
        top:0;
        right:0;
        text-indent: -9999px;
        background: url('../img/i_hamburger.png') no-repeat 50% 50%;
    }

    #header nav ol {
        display: none;
        padding:0;
        margin:0;
        float: none;
        position: absolute;
        left:0;
        top:154px;
        width: 100%;
        z-index: 100;
    }

    #header nav li {
        display: block;
        float:none;
        margin:0;
        width: 100%;
    }

    #header nav li a {
        display: block;
        padding: 80px 40px;
        text-align: left;
        font-size: 60px;
        background-color: #fff;
    }

    .body_home #hero {
    }

    #home_hero-description {
        margin: -80px auto 0;
        padding: 80px;
        width: 90%;
    }

    #home_hero-description h1 {
        font-size: 250px;
    }

    #home_hero-description h5 {
        font-size: 36px;
        margin-bottom: 30px
    }

    #home_hero-description p {
        margin-bottom: 60px;
        font-size: 36px;
    }

    .b {
        padding:20px 40px;
        font-size: 60px;
        border-radius: 100px;
        margin-bottom: 20px;
    }

    .dog-montage {
        margin:0 auto;
        margin-top: -160px;
        width: 220%;
        display: none;
    }

    .buttons .b .i {
        display: none;
    }

    #hero li img {
        margin: 0 auto 0 -50%;
        width: 180%;
    }

    #page-title {
        padding: 0 40px;
    }

    #page-title p {
        font-size: 32px;
    }

    #page-container #content-container h1 {
        font-size: 96px;
    }

    #experience-container > section {
        height: auto;
        padding-left: 50px;
        padding-right: 50px;
        margin-bottom: 100px;
    }

    #section-intro.e-section {
        height: auto;
        padding-left: 0;
        padding-right: 0;
    }

    #section-intro > p {
        font-size: 60px;
        padding: 65px 0 0 60px;
        text-align: left;
    }

    #section-intro > p > span {
        font-size: 120px;
        margin-bottom: 100px;
        margin-right: 40px;
        padding-top: 20px;
    }

    .s-computer-hello, .s-computer-forrest-foto {
        width: 50%;
        height: 330px;
        background-size: 96%;
    }

    .s-computer-hello {
        margin-left: 0;
        margin-right: 0;
    }

    .e-section h2 {
        font-size: 96px;
        margin-bottom: 20px;
        text-align: center;
    }

    .e-section h3 {
        font-size: 96px;
        margin-bottom: 20px;
    }

    .e-section p {
        font-size: 72px;
        text-align: center;
    }

    #section-photo-session {
        padding: 850px 150px 0 100px;
        height: auto;
        background-size: 70%;
        text-align: center;
        margin-bottom: 100px;
        background-position: 50% 0;
    }

    #section-photo-session p {
        text-align: center;
        margin-right: 0;
        margin-bottom: 60px;
    }

    .body_experience {
        background-image:none;
    }

    #section-photo-selection {
        background-size: 95%;
        background-position: 50% 0;
        padding-top:620px;
    }

    #section-photo-selection h2, 
    #section-photo-selection p {
        text-align: center;
    }

    #section-photo-selection .text-photo-selection {
        margin-right: auto;
    }

    #section-choose-medium .section-blurb {
        float: none;
        width: auto;
    }

    #section-choose-medium .pr-digital-copies,
    #section-choose-medium .pr-framed-photos,
    #section-choose-medium .pr-canvas-prints,
    #section-choose-medium .pr-photo-album {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        margin-bottom: 100px;
    }

    #section-choose-medium .pr-digital-copies {
        padding-top: 520px;
        background-size: 70%;
    }

    #section-choose-medium .pr-digital-copies h3,
    #section-choose-medium .pr-framed-photos h3,
    #section-choose-medium .pr-canvas-prints h3,
    #section-choose-medium .pr-photo-album h3 {
        margin-bottom: 20px;
    }

    #section-choose-medium .pr-framed-photos {
        padding-top: 700px;
        height: auto;
    }

    #section-choose-medium .pr-canvas-prints {
        padding-top: 1100px;
        height: auto;
    }

    #section-choose-medium .pr-photo-album {
        padding-top: 680px;
        height: auto;
    }

    #section-mail-time {
        padding: 660px 0 0;
        background-size: 70%;
        background-position: 50% 50px;
    }

    #section-enjoy {
        padding-top: 720px;
        background-size: 70%;
        background-position: 50% 50px;
    }

    #section-enjoy h2 {
        margin-bottom: 100px;
    }

    #section-enjoy .buttons {
        margin-left: 13%;
    }


    #gallery-container > ul > li.large {
        width: 100%;
        margin: 0 auto 0;
        border:2px solid #fff;
        box-sizing:border-box;
    }

    #gallery-container > ul > li.half {
        width: 50%;
        margin: 0;
        border:2px solid #fff;
        box-sizing:border-box;
    }

    .body_gallery #content-container .buttons {
        margin-left: 8%;
    }

    #about-container {
        padding-right: 0;
    }

    #about-container img,
    #about-container .about_gabi,
    #about-container .about_choc-chip,
    #about-container .about_tin-tin {
        position: relative;
        left: auto;
        top: auto;
        display: block;
        margin-bottom: 50px;
        margin-top: 20px;
        transform: rotate(0deg);
        width: 94%;
    }

    #about-container p {
        margin-bottom: 40px;
        font-size: 36px;
    }

    #gallery-container p {
        font-size: 36px;
        margin: 60px auto;
    }

    .body_gallery #content-container {
        padding-top: 100px;
    }

    .body_contact #content-container {
        width:auto;
        padding-left:100px;
        padding-right: 100px;
    }

    #contact-form fieldset li input, #contact-form fieldset li textarea {
        font-size: 36px;
        padding: 100px 40px 30px;
        border-radius: 20px;
        border-width: 4px;
    }

    #contact-form fieldset li label {
        font-size: 72px;
        left: 50px;
        top: 30px;
    }

    #contact-form fieldset li {
        margin-bottom: 20px;
    }

    #contact-form fieldset li textarea {
        height: 450px;
    }

    .body_contact #page-title {
        padding-left: 0;
        padding-right: 0;
        padding-top: 20px;
    }

    .body_contact .b-instagram {
        padding-top: 0;
        padding-bottom: 0;
    }

    .contact-note {
        font-size: 32px;
    }

    .thankyou {
        font-size: 32px;
    }

    #errorContainer {
        font-size: 60px;
        padding:40px;
        border-radius:20px;
    }
}