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;
}


/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

/*html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: top;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}
*/

/* ==========================================================================
   Responsive columns
   ========================================================================== */
* {
  box-sizing: border-box;
}

.col-1  {width: 8.33%; }
.col-2  {width: 16.66%;}
.col-3  {width: 25%;   }
.col-4  {width: 33.33%;}
.col-5  {width: 41.66%;}
.col-6  {width: 50%;   }
.col-7  {width: 58.33%;}
.col-8  {width: 66.66%;}
.col-9  {width: 75%;   }
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;  }

[class*="col-"] {
    float: left;
    padding: 15px;
    border: 1px solid red;
}
/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
  font: 16px/26px Courier, Arial;
}

/*.wrapper {
    width: 90%;
    margin: 0 5%;
}*/
a {
  color: inherit;
}
img {
  max-width: 100%;
  height: auto !important;
  display: block;
  float:left;
}
.strong {
  font-weight: bold;
}

small {
  font-size: 0.7em;
}


/* ==============
    MOBILE: Menu
   ============== */
#main-nav {
  position: fixed;
  width: 100%;
  background-color: white;
}

ul#nav {
  list-style:none;
  margin: 0;
  padding:0;
  text-align:center;
}
ul#nav li {
  display: inline;
}

ul#nav a {
  display: inline-block;
  width: 260px;

  margin-bottom: 10px;
  padding: 15px 0;

  text-align: center;
  text-decoration: none;
  font-size: 1.2em;
  color: #ccc;
}

ul#nav a:hover,
ul#nav a:visited {

}

ul#nav a:hover {
  text-decoration: underline;
}


/* STEP-NAV */
div#step-nav-up {
  width: 100px;
  height: 100px;
  background-image: url("../img/arrow-up.jpeg");
  position: fixed;
  bottom: 120px;
  right: 20px;
  display: inline;
}
div#step-nav-down {
  width: 100px;
  height: 100px;
  background-image: url("../img/arrow-down.jpeg");
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: inline;
}
/* ==========================================================================
   Author's custom styles
   ========================================================================== */
.wrapper {
/*  background-color: #efefef;
*/}
.main-container {
/*  width: 1140px;*/
/*  height: 900px;*/

  text-align: center;
  padding-top: 95px;
  margin-bottom: 900px;
  clear: both;
}

.container-left {
  width: 50%;
  float: left;
}
.container-right {
  width: 50%;
  float: left;
}
/*.row:after {
    content: "";
    clear: both;
    display: block;
}*/

.cont-text h1 {
  font-size: 3em;
  color: #555;
}
.cont-text h2 {
  font-size: 1.6em;
  line-height: 1.4em;
  color: #ccc;
  letter-spacing: 0.06em;
}
.cont-text p {
  text-align: left;
  color: #777;
  font-size: 1.25em;
  margin: 2em 0 0 2em;
}
.cont-text h2.left {
  text-align: left;
}
.cont-text p.center {
  text-align: center;
}
.cont-text p.justify {
  text-align: justify;
}
.cont-text p.right {
  text-align: right;
}
.cont-text p.left {
  text-align: left;
}
/* HOME */

#home .cont-text h1 {
  margin-top: 310px;
  margin-bottom: 100px;
}
#home .cont-text h2 {
  font-size: 1.8em;
}

/* GLASKUNST 1 */
#glaskunst .cont-text {
  margin-top: 82px;
}
#glaskunst h2 {
  margin-bottom: 3.5em;
}
#glaskunst p {
  font-size: 1.2em;
  line-height: 1.2em;
}
.title-1-1 { padding-left: 4.7em; }
.title-1-2 { padding-left: 3.3em; }
.title-1-3 { padding-left: 6em; }
.title-1-4 { padding-left: 2.6em; }
.title-1-5 { padding-left: 4em; }
.title-1-6 { padding-left: 8.5em; }

/* GLASKUNST 2 */
#glaskunst-2 h2 {
  margin-top: 190px;
}
.title-2-1 { padding-left: 0em; }
.title-2-2 { padding-left: 0em; }
.title-2-3 { padding-left: 0em; }
.title-2-4 { padding-left: 0em; }
.title-2-5 { padding-left: 0em; }
.title-2-6 { padding-left: 4em; }

#glaskunst-3 div.two {
  display: flex;
  float: left;
  width: 100%;
}

#glaskunst-3 div#img-wrapper {
  align-items: stretch;
  width: 50%;
}
#glaskunst-3 img#st-johann-2 {
  width: 100%;
  float: left;
  height: 100%;
}
#glaskunst-3 div#text-wrapper {
  width: 50%;
  align-items: stretch;
  float: left;

  padding-top: 15%;
  color: #d5d5d5;
  background-color: #222222;
}
#glaskunst-3 div#text-wrapper p,
#glaskunst-4 div#text-wrapper p {
  font-size: 1.15em;
}

#glaskunst-3 p.p1 { margin-left: 23px; }
#glaskunst-3 p.p2 { margin-left: -21px; }
#glaskunst-3 p.p3 { margin-left: 64px; }
#glaskunst-3 p.p4 { margin-left: 51px; }
#glaskunst-3 p.p5 { margin-left: -6px; }
#glaskunst-3 p.p6 { margin-left: -22px; }
#glaskunst-3 p.p7 { margin-left: -7px; }

#glaskunst-4 .container-right {
  color: #d5d5d5;
  background-color: #222222;
}
#glaskunst-4 .container-left.cont-pics img {
  width: 100%;
}
#glaskunst-4 .container-right .container-left {
  padding-top: 35%;
}

#glaskunst-4 p.p2 { margin-left: -83px; }
#glaskunst-4 p.p3 { margin-left: 64px; }
#glaskunst-4 p.p4 { margin-left: -11px; }
#glaskunst-4 p.p6 { margin-left: -49px; }
#glaskunst-4 p.p7 { margin-left: 11px; }
#glaskunst-4 p.p8 { margin-left: -7px; }
#glaskunst-4 p.p9 { margin-left: -65px; }
#glaskunst-4 p.p10 { margin-left: -7px; }


/* GLASSTUECKE */
#glasstuecke div#eule1 {
  height: 250px;
  width: 180px;
  margin: 0 auto;
}

#glasstuecke div#eule2 {
  width: 200px;
  float: right;
  margin-right: -70px;
}
.title-3-1 { padding-left: 3em; }
.title-3-2 { padding-left: 2em; }
.title-3-3 { padding-left: 6em; color: #A3C78D; }
.title-3-4 { padding-left: 4em; color: #A3C78D; }

div#p-4 {
  width: 380px;
  float: left;
}
span.p-4 { align: left; }
.p-4-1 { padding-left:  1em; }
.p-4-2 { padding-left:  0em; }
.p-4-3 { padding-left:  2em; }
.p-4-4 { padding-left:  1.5em; }
.p-4-5 { padding-left:  0em; }
.p-4-6 { padding-left:  2em; }

/* GLASSTUECKCHEN */
#glasstueckchen .container-left { width: 60%; }
#glasstueckchen .container-right { width: 40%; }

#glasstueckchen .cont-text {
  background-image: url("../img/taschenspiegel.jpg");
  background-repeat: no-repeat;
  height: 750px;
  padding-top: 200px;
  padding-right: 30px;
}
#glasstueckchen .cont-text h2 {
  text-align: right;
  display: block;
  float: right;
  width: 500px;
}
span.title-5 {display:inline-block; }
.title-5-1 { padding-right: 2em; }
.title-5-2 { padding-right: 2em; margin-bottom: 1em; }
.title-5-3 { padding-right: 1em; color: #E48B83; }
.title-5-4 { padding-right: 0em; color: #E48B83; }
.title-5-6 { padding-right: 2em; color: #E48B83; }
.title-5-7 { padding-right: 0em; color: #E48B83; }

div#p-5 {
  width: 330px;
  float: right;
  margin-right: 0em;
}
div#p-5 p { margin-right: 0; }
.p-5-1 { padding-left:  0.5em; }
.p-5-2 { padding-left:  0em; }
.p-5-3 { padding-left:  1em; }
.p-5-4 { padding-left:  3em; }
.p-5-5 { padding-left:  1.3em; }
.p-5-6 { padding-left:  6.5em; }




#glasstueckchen .cont-pics img {
  float: right;
}

/* KONTAKT */


#kontakt .container-left  { width: 65%; }
#kontakt .container-right { width: 35%; }
#kontakt h2 {
  text-align: left;
}
#kontakt h2.termine {
  margin-top: 100px;
}
#kontakt .cont-text p {
  margin: 1em 0em;
}

#datenschutz .cont-text {
  text-align: left;
}
#datenschutz .cont-text ul {
  list-style: circle;
  margin-left: 5em;
  color: #777;
}
#datenschutz .cont-text h2 {
  margin-left: 0.5em;
  margin-top: 2em;
}






/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 480px) {
  ul#nav a {
    width: 130px !important;
    padding: 8px;
  }
  .main-container {
    padding-top: 110px;
  }

  .container-right {
    min-height: 0px !important;
  }

  #glaskunst p {
    font-size: 1em !important;
  }

  #glaskunst span.title-1.title-1-1 { padding-left: 2.7em; }
  #glaskunst span.title-1.title-1-2 { padding-left: 1.3em; }
  #glaskunst span.title-1.title-1-3 { padding-left: 4em; }
  #glaskunst span.title-1.title-1-4 { padding-left: 0.6em; }
  #glaskunst span.title-1.title-1-5 { padding-left: 2em; }
  #glaskunst span.title-1.title-1-6 { padding-left: 6.5em; }

  #glaskunst-3 div#text-wrapper p,
  #glaskunst-4 div#text-wrapper p {
    font-size: 0.8em;
  }
  #glaskunst-3 p.p5 { display: none; }

  #glasstuecke div#eule2 {
    display: none;
  }

  #glasstuecke div#p-4 {
    width: 100%;
    margin: 2em 0;
  }

  #glasstuecke div#p-4 p {
    margin: 2em 0.5em;
  }

  #glasstueckchen .cont-text h2 {
    margin-top: 4em;
    font-size: 1em !important ;
    width: 200px;
  }

  #kontakt .cont-text p {
    font-size: 1em;
  }

  #kontakt .cont-text p span.p-6 {
    display: block;
    margin-bottom: 0.9em;
  }
}

@media only screen and (max-width: 768px) {
  .container-left:not(.nested) {
    width: 100% !important;
  }
  .container-right:not(.nested) {
    width: 100% !important;
    min-height: 740px;
  }
/*  ul#nav a {
    width: 100px;
    font-size: 1.0em;
  }*/
  img {
    width: 100%;
  }
  #home .cont-text h1 {
    margin-top: 110px;
  }
  #main-nav ul#nav a {
    width: 160px;
    padding-bottom: 5px;
  }
  #glaskunst p {
    font-size: 1.5em;
  }
  #glasstuecke div#eule2 {
    margin-right: 0;
  }
  #glasstueckchen .container-right {
    margin-top: 8em;
  }
  #glasstueckchen .cont-text h2 {
    font-size: 1.2em;
    width: 250px;
  }
  #glasstueckchen .cont-text p {
    font-size: 0.9em;
    margin-top: 20em;
    margin-left: 6em;
    line-height: 1.2em;
  }

  #kontakt .container-left,
  #kontakt .container-right {
    padding: 30px;
    min-height: 0px;
  }
  #kontakt h2.termine {
    margin-top: 0;
  }
  #kontakt .cont-text p {
    margin-left: 0;
  }
}

@media only screen and (min-width: 769px) and (max-width: 800px) {
  #main-nav ul#nav a {
    padding-bottom: 5px;
    width: 140px;
  }

  #glasstuecke div#eule2 {
    display: none;
  }
  #glasstueckchen .cont-text p {
    text-align: right;
    font-size: 1em;
  }

  #kontakt p,
  #kontakt h2 {
    padding-left: 20px;
  }

}

@media only screen and (min-width: 801px) and (max-width: 1024px) {
  #home .cont-text h1 {
    margin-top: 210px;
  }
  #glasstueckchen .container-right img {
    width: 85%;
    float: none;
    margin: 0 auto;
  }
  #main-nav ul#nav a {
    padding-bottom: 5px;
    width: 200px;
  }
  #glasstuecke div#eule2 {
    width: 150px;
    margin-top: -40px;
    margin-right: 0px;
  }
  .main-container { padding-top: 130px; }
    #kontakt .cont-text h2 { margin-left: 1em; }
    #kontakt .cont-text p { margin-left: 2.1em; }
}



@media only screen and (min-width: 1025px) {

/* ===============
    Maximal Width
   =============== */
  .wrapper {
      width: 1026px; /* 1140px - 10% for margins */
      margin: 0 auto;
  }

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

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

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}