/*

FARBPALETTE:

TAUPE:

    b-h2:	F6CA89
        - rgba(246, 202, 137, 1)
    b-h1:	D2A45F
        - rgba(210, 164, 95, 1)
    base:	AE803C	--> Farbe optisch - paletton.com*  (dribbble.com/colors hatte in der farb-richtung nix)
        - rgba(174, 128, 60, 1)
    b-d1:	8A6021
        - rgba(138, 96, 33, 1)
    b-d2:	65420E
        - rgba(101, 66, 14, 1)
-------------------------------------------------------
ROSÉ:

    2nd-h2:	FFC3B9
        - rgba(255, 195, 185, 1)
    2nd-h1:	FFAC9F
        - rgba(255, 172, 159, 1)
    2nd:	F58F7F	--> 2nd-Hauptton
        - rgba(245, 143, 127, 1)
    2nd-d1:	D36958
        - rgba(211, 105, 88, 1)
    2nd-d2:	AF4838
        - rgba(175, 72, 56, 1)
*/


* {
    box-sizing: border-box;
}

div {
    /* border: 1px solid green; */
    box-sizing: border-box;
    }



/* Larger than desktop 
@media only screen and (min-width: 901px) { */

    body {
        width: 100%;
        padding: 0;
        margin: 0 auto;
        text-align: center;
        font-family: 'Proza Libre', sans-serif;
        font-size: 14px;
        background-color: rgba(210, 164, 95, .1);
        }

    .menu-box {
        display: block;
        position: fixed;
        top: 0;
        width: 100%;
        padding: 0 27%;
        margin: 0 auto;
        height: 55px;
        text-align: right;
        vertical-align: bottom;
        background: linear-gradient(to bottom, rgba(210, 164, 95, 1) 0%,#ffffff 80%);
        border-bottom: 2px solid white;
        }

    .logo {
        display: inline-block;
        margin: 0px 0px 0 0;
        width: 20%;
        height: 55px;
        float: left;
        }

    .logo-img > img {
        width: 100%;
        min-width: 90px;
        }

    .menu {
        display: inline;
        float: right;
        width: 70%;
        height: 55px;
        line-height: 60px;
        font-weight: bold;
        transition: 0.5s;
        }

    .menu-item {
        display: inline-block;
        width: 95px;
        height: 20px;
        line-height: 18px;
        text-align: center;
        margin: 0 1%;
        padding: 3px;
        color: rgba(174, 128, 60, 1);
        }

    .menu-item:hover {
        width: 100px;
        font-size: 1.1em;
        }

    .header {
        width: 100%;
        height: 600px;
        margin-top: 55px;
        background-color: rgba(0, 0, 0, 1);
        background-image: url(../images/top-img-opt.jpg);
        background-position: center center;
        background-size: cover;
        box-shadow: 0px 6px 25px 0px rgba(101, 66, 14, .6);
        overflow: hidden;
        background-blend-mode: screen;
        }

    .header-projekte {
        width: 100%;
        height: 600px;
        margin-top: 55px;
        background-color: rgba(174, 128, 60, 1);
        background-image: url(../images/Arbeitsmuster-opt.jpg);
        background-position: center 76%;
        background-size: cover;
        box-shadow: 0px 6px 25px 0px rgba(101, 66, 14, .6);
        overflow: hidden;
        background-color: black;
        background-blend-mode: screen;
        }

    .header-CV {
        width: 100%;
        height: 600px;
        margin-top: 55px;
        background-color: rgba(174, 128, 60, 1);
        background-image: url(../images/top-img-CV.jpg);
        background-position: center center;
        background-size: cover;
        box-shadow: 0px 6px 25px 0px rgba(101, 66, 14, .6);
        overflow: hidden;
        background-color: black;
        background-blend-mode: screen;
        }

   .header-DSGVO {
        width: 100%;
        height: 600px;
        margin-top: 55px;
        background-color: rgba(174, 128, 60, 1);
        background-image: url(../images/top-img-DSGVO.jpg);
        background-position: center center;
        background-size: cover;
        /* box-shadow: 0px 6px 25px 0px rgba(101, 66, 14, .6); */
        overflow: hidden;
        background-color: black;
        background-blend-mode: screen;
        }

    .header-caption {
        max-width: 740px;
        height: 250px;
        line-height: 30px;
        margin: 250px auto 0 auto;
        text-align: center;
        }

    .polaroid-group {
        max-width: 1440px;
        margin: -100px auto 20px auto;
        }

    .polaroid-group-CV {
        max-width: 1440px;
        margin: -180px auto 20px auto;
        }

    .polaroid-group-perspektiven {
        max-width: 1440px;
        margin: -100px auto 20px auto;
        }

    .polaroid-group-galerie {
        max-width: 1440px;
        margin: 50px auto 20px auto;
        }

    .polaroid-group-projekte {
        max-width: 1440px;
        margin: 50px auto 20px auto;
        }

    .polaroid {
        display: inline-table;
        position: top;
        width: 240px;
        height: 280px;
        margin: 0 20px 50px 20px;
        text-align: center;
        vertical-align: top;
        overflow: hidden;
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0px 0px 25px 5px rgba(101, 66, 14, .4);
        }

/* das wird der HOVER-Effekt für die Gallerie 
    .polaroid:hover {
        width: 480px;
        height: 560px;
        } */
    
    .pol-icon {
        display: block;
        margin: 10px auto;
        padding-top: 10px;
        width: 180px;
        height: 100px;
        }

    .pol-icon > img {
        width: 100%;
        max-height: 100%;
        }

    .pol-img {
        display: block;
        margin: 10px auto;
        width: 220px;
        height: 220px;
        }

    .pol-img > img {
        max-height: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        }

    .kolibri-l {
        display: inline-block;
        position: relative;
        margin-left: -250px;
        height: 200px;
        width: 250px;
        }

    .kolibri-l > img {
        max-height: 200px;
        max-width: 250px;
        transform: scaleX(-1);
        }

    .kolibri-r {
        display: inline-block;
        position: relative;
        margin-right: -250px;
        height: 200px;
        width: 250px;
        }

    .kolibri-r > img {
        max-height: 200px;
        max-width: 250px;
        }

    .kolibri-f {
        display: inline-block;
        position: relative;
        z-index: 20;
        margin-left: -180px;
        margin-top: -200px;
        height: 200px;
        width: 250px;
        }

    .kolibri-f > img {
        max-height: 200px;
        max-width: 250px;
        margin-top: 100px;
        transform: scaleX(-1);
        }

    .kolibri-l > img:hover,
    .kolibri-r > img:hover {
        width: 380px;
        height: 98%;
        }

    .text {
        display: block;
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
        height: auto;
        padding: 15px;
        }

    .text-DSGVO {
        text-align: left;
        margin: 0 20px;
        min-width: 120px;
        height: auto;
        }

    .text-cols {
        display: flex;
        flex-direction: row;
        width: 640px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 15px;
        height: auto;
        }

    .text-CV-date {
        margin: 0 15px 0 0;
        text-align: left;
        width: 170px;
        height: auto;
        }

    .text-CV-row {
        margin: 0;
        text-align: left;
        width: 400px;
        height: auto;
        }

    .text-CV-text {
        margin: 0;
        text-align: left;
        width: auto;
        height: auto;
        }

    .arrow {
        display: inline-table;
        margin: 100px 40px;
        width: 80px;
        height: 80px;
        }

    .arrow > img {
        max-height: 80px;
        max-width: 80px;
        }

    .pol-cap {
        margin: 35px auto 15px auto;
        width: 200px;
        font-size: 1.4em;
        font-weight: bold;
        }

    .pol-cap-gal {
        margin: 5px auto;
        width: 220px;
        font-size: 1.3em;
        font-weight: bold;
        color: rgba(174, 128, 60, 1);
        }

    .pol-text {
        margin: 10px auto;
        font-size: 1em;
        width: 200px;
        height: 60px;
        }

    .text-section {
        display: flex;
        flex-direction: row;
        max-width: 900px;
        height: auto;
        text-align: center;
        margin: 10px auto;
        padding: 80px 20px 130px 20px;
        }


    .parallax {
        background-image: url(../images/italien2016.png);
        height: 650px;
        width: 100%;
        background-attachment: fixed;
        background-position: 70% 0;
        background-repeat: no-repeat;
        background-size: cover;
        box-shadow: 0px 0px 41px 5px rgba(101, 66, 14, .4);
        }

    .perspektiven {
        line-height: 550px;
        }

    .contact-button {
        display: inline-block;
        border-style: none;
        width: 120px;
        height: 35px;
        border-radius: 10px;
        padding: 3px;
        margin: 30px auto;
        line-height: 31px;
        color: white;
        font-size: 0.95em;
        background-color: rgba(174, 128, 60, 1);
        box-shadow: 0 0 5px rgba(101, 66, 14, .2);
        }

    .contact-button:hover {
        background-color: rgba(255, 172, 159, 1);
        } 

    .area-grey {
        display: block;
        width: 100%;
        padding: 30px 0 40px 0;
        background-color: rgba(245, 245, 245, 1);
        box-shadow: 0 3px 15px rgba(101, 66, 14, .4);
        }

    .footer-mask {
        position: relative;
        z-index: 20;
        width: 100%;
        padding: 0 0 150px 0;
        margin-bottom: 1000px;
        background-color: rgba(255, 250, 245, 1);
        box-shadow: inset 0px 0px 180px 0px rgba(101, 66, 14, .4);
        }

    .footer {
        display: block;
        position: fixed;
        margin: auto;
        bottom: 0;
        width: 100%;
        height: 850px;
        text-align: center;
        color: white;
        background-image: url(../images/footer-img.png);
        background-position: center center;
        background-size: cover;
        overflow: hidden;
        background-blend-mode: screen;
        }

    .footer-backgrd {
        display: block;
        position: fixed;
        z-index: 10;
        margin: auto;
        bottom: 0;
        width: 100%;
        height: 850px;
        text-align: center;
        background: linear-gradient(to bottom, rgba(255, 250, 245, 1) 0%, rgba(174, 128, 60, .8) 70%);
        }

    .footer-content {
        display: flex;
        flex-direction: column;
        z-index: 20;
        margin: 350px auto;
        width: 818px;
        height: 275px;
        text-align: left;
        text-shadow: 0px 0px 4px rgba(174, 128, 60, 1), 0px 0px 20px rgba(174, 128, 60, .8);
        }

    .text-content {
        width: 818px;
        height: 300px;
        }

    .impressum {
        display: inline-table;
        float:left;
        width: 240px;
        height: 270px;
        margin-right: 44px;
        padding-top: 53px;
        text-align: left;
        }

    form {
        display: inline-block;
        width: 523px;
        height: 245px;
        line-height: 16px;
        }

    fieldset {
        display: inline-block;
        border-style: none; 
        box-sizing: border-box;
        width: 523px;
        text-align: left;
        height: 250px;
        margin: 0;
        padding: 0px 0px 10px 0px;
        } 

    legend {
        margin-left: -2px;
        }

    .form-col1 {
        display: inline-table;
        width: 240px;
        height: 230px;
        margin: 3px auto 0 auto;
        vertical-align: text-top;
        padding: 0 0 0 -3px;
        }

    .form-col2 {
        display: inline-table;
        width: 238px;
        height: 190px;
        float: right;
        text-align: right;
        margin-top: -16px;
        }

    label {
        display: block;
        width: 240px;
        margin-bottom: 15px;
        text-shadow: 0px 1px 2px rgba(138, 96, 33, 1), 0px 0px 15px rgba(174, 128, 60, .7);
        }

    input {
        border: 1px solid rgba(174, 128, 60, 1);
        color: rgba(0, 0, 0, 0.6);
        width: 240px;
        padding-left: 2px;
        }

    input[type=file] {
        margin: 17px 0 6px 0;
        border: none;
        color: white;
        }

    textarea {
        border: 1px solid rgba(174, 128, 60, 1);
        color: rgba(0, 0, 0, 0.6);
        width: 240px;
        height: 121px;
        margin-top: 1px;
        }

    datalist {
        margin-top: 10px;
        }

    button {
        display: inline-block;
        border-style: none;
        width: 75px;
        height: 25px;
        border-radius: 10px;
        margin-top: 6px;
        padding: 3px;
        line-height: 15px;
        color: white;
        font-size: 0.95em;
        background-color: rgba(210, 164, 95, 1);
        box-shadow: 0px 0px 5px 3px rgba(101, 66, 14, .2);
        }

    button:hover {
        background-color: rgba(255, 172, 159, 1);
        }

    .anker {
        display: inline-block;
        position: relative;
        pointer-events: none;
        padding-top: 500px;
        width: 10px;
        height: 10px;
        font-size: 3em;
        z-index: 10;
        color: black;
        visibility: hidden;
        }

    a {
        text-decoration: none;
        font-size: 1em;
        color: rgba(174, 128, 60, 1);
        }

    a.white {
        text-decoration: none;
        color: rgba(255, 255, 255, 1);
        text-shadow: 0px 1px 2px rgba(138, 96, 33, 1), 0px 0px 15px rgba(174, 128, 60, .7);
        }

    a.black {
        text-decoration: none;
        color: rgba(0, 0, 0, 1);
        }

    a:hover.white {
        color: rgba(255, 195, 185, 1);
        border-bottom: 1px solid rgba(255, 195, 185, 1);
        }

    a:hover {
        color: rgba(245, 143, 127, 1);
        }

    a:active {
        color: rgba(177, 188, 110, 1);
        }

    p {
        margin: 0 0 1em 0;
        line-height: 1.5em;
        }

    p.white {
        margin: 0 0 1em 0;
        line-height: 1.45em;
        text-shadow: 0px 1px 2px rgba(138, 96, 33, 1),   0px 0px 15px rgba(174, 128, 60, .7);
        }

    h1 {
        font-family: 'Dancing Script', cursive;
        font-size: 4.8em;
        line-height: 1;
        margin: 0;
        color: rgba(0, 0, 0, 1);
        }

    h2 {
        font-size: 1.5em;
        font-weight: normal;
        letter-spacing: -1px;
        color: black;
        }

    h3 {
        font-size: 2.5em;
        color: rgba(174, 128, 60, 1);
        }

    h3.class-white {
        font-size: 3.8em;
        color: white;
        text-shadow: 0px 0px 2px rgba(0, 0, 0, 1), 0px 0px 50px rgba(0, 0, 0, .7);
        }

    h4 {
        font-size: 1.4em;
        color: black;
        }

    h5 {
        font-size: 1.4em;
        color: white;
        margin: 0;
        text-shadow: 0px 0px 2px rgba(138, 96, 33, 1), 0px 0px 15px rgba(138, 96, 33, .7);
        }

    h6 {
        font-size: 1.4em;
        color: white;
        margin: 0 0 20px 0;
        text-shadow: 0px 1px 2px rgba(138, 96, 33, 1), 0px 0px 15px rgba(174, 128, 60, .7);
        }  
/* } */

/* Styles für Tablet */
@media screen and (max-width: 1174px) {
    .arrow {
        display: none;   
        }
        
    .menu-item:last-child {
        display: none;
        }
    }

/* Styles für Tablet quer */
@media screen and (max-width: 1024px) {
    body {
        font-size: 11px;
        }
        
    .menu-box {
        padding: 0 20%;
        }
        
    .text-CV-date {
        width: 125px;
        }
  
    .parallax {
        background-image: url(../images/italien2016-tablet.png);
        background-attachment: initial;
        width: 100%;
        }
    
    .header {
        background-image: url(../images/top-img-tablet.jpg);
        background-attachment: initial;
        width: 100%;
        }

    .kolibri-l {
        margin-left: -100px;
        padding-left: 50px;
        height: 100px;
        width: 125px;
        }
    
    .kolibri-r {
        margin: 0 50px 0 -180px;
        padding-top: 0px;
        height: 100px;
        width: 125px;
        }
    
    .kolibri-f {
        margin: -100px 0 0 0;
        height: 100px;
        width: 125px;
        }
    
    .kolibri-l,
    .kolibri-r,
    .kolibri-f > img {
        margin-top: 0;
        height: 100px;
        width: 125px;
        }
    
    .footer {
        background-image: url(../images/footer-img-tablet.png);
        background-attachment: initial;
        width: 100%;
        }
    
    .form-col2 {
        margin-top: -18px;
        }

/* Styles für Mobil bzw. Tablet-hoch */
@media screen and (max-width: 850px) {
    .header {
        background-image: url(../images/top-img-mobil.jpg);
        background-attachment: initial;
        width: 100%;
        }
    
    .header-projekte {
        background-position: 22% 76%;
        }
    
    .polaroid-group .polaroid{
        display: block;
        margin-left: auto;
        margin-right: auto;
        }
    
     .polaroid {
        box-shadow: 0px 0px 15px 3px rgba(101, 66, 14, .5);
        }

    .text-cols {
        width: 320px;
        }
    
    .text-CV-text {
        width: 171px;
        } 
    
    .kolibri-r,
    .kolibri-l,
    .kolibri-f{
        display: none;
        }
    
    .parallax {
        background-image: url(../images/italien2016-mobil.png);
        background-attachment: initial;
        width: 100%;
        }
 
    .footer {
        background-image: url(../images/footer-img-tablet.png);
        background-attachment: initial;
        width: 100%;
        }
    
    .footer-backgrd {
        height: 100%;
        }
    
    .footer-content {
        display: block;
        }
    
    .footer,
    .footer-content,
    .text-content {
        height: auto;
        }
    
    .footer-content {
        padding: 0 20px;
        margin: 0;
        width: auto;
        }
    
    .impressum,
    form,
    .form-col1,
    .form-col2,
    fieldset {
        width: 100%;    
        height: auto;
        float: none;
        font-size: 10px;
        }
    
    input,
    label,
    input[type=file],
    datalist {
        margin-top: 2px;
        margin-bottom: 2px;
        font-size: 10px;
        }
    
    input {
        height: 15px;
        }
    
    h1.mobile {
        font-size: 3em;
        }
    
    h6 {
        margin-top: 10px;
        margin-bottom: 0;
        }
    
    .text {
        height: auto;
        }
    
    .impressum {
        display: block;
        margin: 50px 0 10px 0;
        }
    
    .form-col2 {
        margin-top: 0;
        float: none;
        text-align: left;
        }
    
    button {
        display: block;
        margin: 10px 0 20px 162px;
        }
    
    .footer-mask,
    .text-section,
    .text-CV{
        margin-bottom: 0;    
        }
    
    .footer-backgrd,
    .footer{
        position: relative;
        }
    
    .anker {
        width: 1px;
        height: 1px;
        position: absolute;
        left: 50%;     
        }
    
    textarea {
        margin-top: 0;
        margin-bottom: 0;
        height: 100px;
        }
    
    .menu {
        width: 100%;
        display: flex;
        align-content: center;
        align-items: center;
        float: none;
        justify-content: flex-end;
        }
    
    .menu-item {
        display: block;
        width: auto;
        padding: 0 10px;
        flex: 0 0 auto;
        margin: 0;
        }
    
    .menu-box {
        display: flex;
        align-content: center;
        align-items: center;
        }
    
    .logo {
        display: block;
        width: auto;
        max-width: 100px;
        }
    
    .menu-box {
        width: 100%;
        padding: 0 20px;
        }
    
    .text-content {
        width: 245px;
        margin: 0 auto;
        }
}