/*--------------------------------------------------------------
General Settings
--------------------------------------------------------------*/
html, body {
    width: 100%;
    height: 100%;
}

body {
    background-color: #191919;
    font-size: medium;
}

a:visited, a:link {
    color: #7a7a7a;
}

a:hover {
    color: #f06000;
}

@font-face {
    font-family: Butler;
    src: url(../fonts-custom/Butler_Medium_Stencil.otf) format("opentype");
    color: #F06000;
    font-style: normal;
    font-weight: normal;
}


@font-face {
    font-family: Butler;
    src: url(../fonts-custom/Butler_Bold_Stencil.otf) format("opentype");
    color: #F06000;
    font-style: normal;
    font-weight: bold;
}

h1 {
    color: #f06000;
    padding-top: 2em;
    padding-bottom: 1em;
    font-family: Butler, Georgia, serif;
    font-size: 290%;
    font-weight: bold;
    }

h2 {
    font-family: opensans-bold;
    color: #313131;
    font-size: 200%;
    padding-top: 2em;
    padding-bottom: 1em;
    }

h3 {
    color: #f06000;
    padding-top: 2em;
    padding-bottom: 1em;
    font-family: Butler, Georgia, serif;
    font-size: 170%;
    }

h4 {
    color: lightgrey;
    font-weight: bold;
}


/* #home, #artist, #gallery, #place, #contact {
    cursor: url("Pistole-or.png"), auto;
} */


/*--------------------------------------------------------------
Header/Nav
--------------------------------------------------------------*/

header {
    background: #191919 url(../images/Tattoo-8565-02-01.jpg) no-repeat center;  
}

#logo_resize {
    height: 17em;
    width: auto;
    margin-top: 1em;
}

#logo {
    padding-top: 2em;
}


/*--------------------------------------------------------------
Artist
--------------------------------------------------------------*/

#artist .profile-pic {
    display: none;
}

.nine.columns.main-col {
    width: 100%;
}

#peter {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 100%;
    
}

/*--------------------------------------------------------------
Gallery
--------------------------------------------------------------*/

#gallery {
    background-color: #1F1F1F;
}

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 3em;
}

#black-and-grey, #farb-tattoo, #fine-line, #_mandala, #cover-up {
    padding: 1em;
    border: 1px solid #f06000;
    box-shadow: 3px 1px 15px #F06000;
    text-align: center;
    margin-bottom: 20px;
}

.fleximage {
    width: 200px;
    height: 250px;
}

#gallery > .row > .twelve.columns.collapsed > h1 {
    text-align: center;
}

@media (max-width: 1400px) {
    .flex-container {
       flex-direction: column;
      }
    }

@media (max-width: 1400px) {
    .fleximage {
        width: 300px;
        height: auto;
        }
    }

@media (max-width: 420px) {
    .fleximage {
        width: 250px;
        height: auto;
        }
    }



/*--------------------------------------------------------------
Place
--------------------------------------------------------------*/

#Öffnungszeiten {
    color: #f06000;
 }

#place {
    background: url(../images/Tattoo-8490-02.jpg) no-repeat center center;
    min-width: 100%;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    background-attachment: fixed;
    position: relative;
    min-height: 300px;
    width: 100%;
    overflow: hidden;
    color: #7a7a7a;
    padding-bottom: 80px;
    text-transform: none;
}


/*--------------------------------------------------------------
Contact Form
--------------------------------------------------------------*/

#contact {
    padding-top: 0;
}

.two.columns.header-col {
    display: none;
}

#contact span.required {
    color: #F06000;
}

#contact button.button {
    margin-left: 0%;
    background-color: #F06000;
}

#contact h2 {
    color: #f06000;
    padding-top: 1em;
    padding-bottom: 2em;
    font-family: 'Butler';
    font-size: 290%;
    font-weight: bold;
}

#contact h4 {
    display: none;
}

.button, .button:visited, button, input[type="submit"], input[type="reset"], input[type="button"] {
    font: 14px/20px 'opensans-bold', sans-serif;
}

#contact input:focus, #contact textarea:focus, #contact select:focus {
	background-color: #7a7a7a;
}

.notices.success.green {
    background: #8fbc8f;
    color: #191919;
    line-height: 1.1em;
    padding: 25px 2px 2px 5px;
}

.notices.success.green > p {
    font-weight: 300;
    color:#636363;
    font-size: large;
}

/*--------------------------------------------------------------
Social Links
--------------------------------------------------------------*/

.social-pages {
    text-align: center;
}

#follow.header-col {
    display: none;
}

#follow h1 {
    text-align: center;
    padding-top: 10%;
    color: white;
    font: 22px/30px 'opensans-bold', sans-serif;
}

#follow {
    background: #1F1F1F url(../images/testimonials-bg.jpg) no-repeat center center;
    background-size: cover !important;
    -webkit-background-size: cover !important;
    background-attachment: fixed;
    position: relative;
    min-height: 350px;
    width: 100%;
    overflow: hidden;
}

.fa.fa-2x.fa-facebook, .fa.fa-2x.fa-instagram {
    color: white;
    }


/*--------------------------------------------------------------
Footer
--------------------------------------------------------------*/

footer {
    padding-top: 30px;
    margin-bottom: 30px;
}

footer a:link, footer a:focus, footer a:visited {
    color: #7a7a7a;
}

footer a:hover {
    color: #f06000;
}

@media (max-width: 1024px) {
#copy {
    padding-left: 6em;
    padding-right: 6em;
    }
}

h1.arrow {
    padding-top: 1em;
}

.text-container {
    text-align: center;
}

/*--------------------------------------------------------------
Scrolldown Symbol
--------------------------------------------------------------*/

#go-top a:hover {
    background-color: #F06000;
}

header .scrolldown a:hover {
    color: #F06000; 
}

@media (max-width: 1024px) {
 .col-md-8.col-md-offset-2.wp1 {
    padding-left: 1em;
    padding-right: 1em;
    }

html, body {
    overflow-x: hidden;
    }

#nav-wrap > a {
    right: 0px;
    }

#logo_resize {
   margin-top: 0em;
    }
}

/*--------------------------------------------------------------
Blog
--------------------------------------------------------------*/

.blog-header {
    margin-left: 10%;
}

.blog-header > h1 {
    color: #7a7a7a;
    font-weight: normal;
}

.content-wrapper.blog-content-list.grid.pure-g {
    width: 60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3em;
}

.list-item.h-entry {
    border: #F06000 1pt solid;
    box-shadow: 3px 1px 15px #F06000;
    padding: 1em;
    margin: 2em 0em 4em 0em;
}

.p-summary.e-content > p > a:active, a:visited {
    color: #F06000;
}

.u-url {
    font-family: Butler;
    font-weight: bold;
    text-transform: uppercase;
    font-size: larger;
}

.p-name {
    padding-top: 1em;
}

/*--------------------------------------------------------------
Blog-Item
--------------------------------------------------------------*/

.prev-next > .button {
    background-color: #f06000;
}

#item > .list-item.h-entry {
    margin-left: 25%;
    margin-right: 25%;
}

@media (max-width: 720px) {
    .content-wrapper.blog-content-list.grid.pure-g {
        width: 90%;
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 3em;
    }
}

@media (max-width: 1024px) {
    #nav-wrap {
        background-color: #313131;
    }
}