body { 
  margin:0;
  padding:0;
  font-family: 'Lato', sans-serif;
}

/* - - - - - Logo - - - - - */
#logo {
  position: fixed;
  top: 0;
  left:5%;
  z-index:99;
}

#logoimg {
  height: 90px;
  width: 90px;
  border: 0px;
}

/* - - - - - Sticky Navbar - - - - - */
.sticky-navbar {
  position: fixed;
  text-align:center;
  color:#fff;
  padding: 5px 10px;
  z-index: 98;
  width: 100%;
  height: 24px;
  background: rgba(222,222,222, .7);
}

.sticky-navbar a {
  color: #000;
  text-decoration:none;
}

.sticky-navbar a:hover {
  color: #fff;
}

/* - - - - - Heading - - - - - */
h1 {
   font-size: 250%;
   font-weight: 100;
   color:#fff;
   text-shadow: 1px 3px 2px #000;
}

h2 {
   font-size: 200%;
   font-weight: 100;
}

h2:before {
   color: red;
   content: "■ ";
   font-size: 65%;
}

h4 {
   font-size: 125%;
   font-weight: 300;
   color:#fff;
   text-shadow: 0 2px 2px #000;
}
h4:before {
   color: red;
   content: "■ ";
   font-size: 75%;
   text-decoration:none; !important
}

#more ,#more2 ,#more3 ,#more4 {
   color:#FFFFFF;
   text-shadow: 0 1px 2px #000;
}

/* - - - - - Content - - - - - */
p {
  font-size: 120%;
  line-height: 150%;
  font-weight: 300;
  color: #222;
}

p a {
  color: #000;
  text-decoration:none;
}

p a:hover {
  color: #F00;
}

ul  {
   list-style-type: circle;
   font-size: 120%;
   font-weight: 300;
   list-style-position: outside; 
}

/* - - - - - Forms - - - - - */
.formbutton {
  background-color: #C00;
  color: #fff;
  cursor: pointer;
  border: none;
  padding: 6px 10px;
  text-transform:uppercase;
  width: 24%;
}
.formbutton:hover {
  background-color: #fff;
  color: #000;
  cursor: pointer;
  -webkit-transition: background-color 1000ms linear;
  -ms-transition: background-color 1000ms linear;
  transition: background-color 1000ms linear;
}

.formular {
  font-size: 90%;
  font-weight: 300;
  color: #444;
}

input {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 5px;
  margin-bottom: 10px;
  font-size: 100%;
  font-weight: 300;
  color: #333;
  width: 40%;
}

textarea {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 5px;
  font-size: 100%;
  line-height: 120%;
  font-weight: 300;
  color: #333;
  width: 40%;
}


/* - - - - - Cards - Grid-Kacheln - - - - - */
.card{
  border: 1px solid #ccc;
  width:31%;
  margin:3px;
}

.cardXL{
  width:48%;
  margin:3px;
}

/* - - - - - Bubble - - - - - */
.triangle-border {
  position:relative;
  padding:15px;
  margin:1em 0 3em;
  border:4px solid #ddd;
  color:#333;
  background:#fff;
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

.triangle-border.left {
  margin-left:30px;
}

.triangle-border:before {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:40px; /* controls horizontal position */
  border-width:20px 20px 0;
  border-style:solid;
  border-color:#ddd transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* creates the smaller  triangle */
.triangle-border:after {
  content:"";
  position:absolute;
  bottom:-13px; /* value = - border-top-width - border-bottom-width */
  left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
  border-width:13px 13px 0;
  border-style:solid;
  border-color:#fff transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* - - - - - Boxes & Containers - - - - - */
.box-before{
  background: #ddd;
  z-index: 2
}

.box-after{
  background: #eee;
  padding: 3% 0%;
  z-index: 2
}

.box-after-clouds{
  background-image: url("https://www.mydossier.me/_bilder/myClouds.jpg");
  background-size: cover;
  background-attachment: fixed;
  padding: 3% 0%;
  z-index: 2
}

.box-after-cappuccino{
  background-image: url("https://www.mydossier.me/_bilder/myCappuccino.jpg");
  background-size: cover;
  background-attachment: fixed;
  padding: 3% 0%;
  z-index: 2
}

.box-after-cookies{
  background-image: url("https://www.mydossier.me/_bilder/myCookies.jpg");
  background-size: cover;
  background-attachment: fixed;
  padding: 3% 0%;
  z-index: 2
}

.box-after-colors{
  background-image: url("https://www.mydossier.me/_bilder/myColors.jpg");
  background-size: cover;
  background-attachment: fixed;
  padding: 3% 0%;
  z-index: 2
}

.container{
  width: 100%; 
  height: 100vh;
  overflow: hidden;
  background: #eee;
  position: relative; 
}

.contentbox{
width: 60%;
padding: 2% 3%;
border-radius: 12px;
margin: 6% 20%;
background: rgba(247,247,247, .6);
}

.container .mobile-parallax-container{
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  z-index: 2;
  left: 0;
  bottom: 0;
  clip: rect(0,auto,auto,0);
}

.container .mobile-parallax-container .img{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 0;
    transform: translate3d(0px,0,0);
}

.overimg-home{
    text-align: center;
    z-index: 99;
    transform: translate3d(0px,0,0);
	margin-top:25%;
	color:#fff;
}

.overimg-home a{
    color:#fff;
	text-decoration:none;
}

.overimg-home a:hover{
    color:#000;
}

.overimg{
    z-index: 99;
	transform: translate3d(0px,0,0);
}

img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* - - - - - STICKY - SocialMedia-Buttons - - - - - */
.socialmedia { position: fixed; right: 0px; bottom: 15%; z-index: 99; background: rgba(153,153,153,.3); color: #fff; padding: .3em; border-radius: 6px 0 0 6px; box-shadow: 0 0 7px rgba(0, 0, 0, .1); }
.socialmedia:hover { background: rgba(153,153,153,.4); }
.socialmedia a { color: #FFF; font-weight: normal; font-size: 150%; line-height:1.50em; text-decoration:none; }
.fa-facebook:hover { color: #09E; text-shadow: 1px 1px #05A; }
.fa-xing:hover { color: #cfdc00; text-shadow: 1px 1px #E50; }
.fa-linkedin:hover { color: #0A6; text-shadow: 1px 1px #073; }
.fa-skype:hover { color: #F00; text-shadow: 1px 1px #000; }
.fa-envelope-o:hover { color: #FFF; text-shadow: 2px 2px #999; }


/* TABLET hoch UND quer < 1024 Pixel */
@media only screen and (max-width: 1024px) {
#logo {
  position: fixed;
  top: 0;
  left:4%;
  z-index:99;
}

#logoimg {
  height: 65px;
  width: 65px;
  border: 0px;
}

h1 {
   font-size: 220%;
   font-weight: 100;
}

h2 {
   font-size: 180%;
   font-weight: 200;
}

h2:before {
   font-size: 54%;
}

h4:before {
   font-size: 68%;
}

.box-after-clouds{
  background-image: url("https://www.mydossier.me/_bilder/myClouds-m.jpg");
  background-size: auto;
  padding: 3% 0%;
  z-index: 2
}

.box-after-cappuccino{
  background-image: url("https://www.mydossier.me/_bilder/myCappuccino-m.jpg");
  background-size: cover;
  background-attachment: fixed;
  padding: 3% 0%;
  z-index: 2
}

.box-after-mitBild{
  background-image: url("https://www.mydossier.me/_bilder/myGrass-m.jpg");
  background-size: auto;
  padding: 3% 0%;
  z-index: 2
}

.box-after-cookies{
  background-image: url("https://www.mydossier.me/_bilder/myCookies-m.jpg");
  background-size: auto;
  padding: 3% 0%;
  z-index: 2
}

.box-after-colors{
  background-image: url("https://www.mydossier.me/_bilder/myColors-m.jpg");
  background-size: auto;
  padding: 3% 0%;
  z-index: 2
}

/* - - - - - Cards - - - - - */
.card{
  width:47%;
}

.cardXL{
  width:98%;
}

/* - - - - - Forms - - - - - */
input { width: 80%;}
textarea { width: 80%;}
.formbutton { width: 40%;}

}

/* MOBILE < 521 Pixel */
@media only screen and (max-width: 520px) {

/* - - - - - SocialMedia-Button - Sticky - - - - - */
.socialmedia a { color: #FFF; font-weight: normal; font-size: 110%; line-height:1.8em; text-decoration:none; }

#logo {
  position: fixed;
  top: 0;
  left:0;
  z-index:99;
}

#logoimg {
  height: 38px;
  width: 38px;
  border: 0px;
}

h1 {
   font-size: 200%;
   font-weight: 200;
}

h2 {
   font-size: 170%;
   font-weight: 300;
}

h2:before {
   font-size: 45%;
}

h4:before {
   font-size: 54%;
}

p {
  font-size: 100%;
  line-height: 130%;
}

ul  {
  font-size: 100%;
  line-height: 120%;
  font-weight: 300;
  list-style-position: outside;
}

.box-after-clouds{
  background-image: url("https://www.mydossier.me/_bilder/myClouds-s.jpg");
  background-size: auto;
  padding: 3% 0%;
  z-index: 2
}

.box-after-cappuccino{
  background-image: url("https://www.mydossier.me/_bilder/myCappuccino-s.jpg");
  background-size: cover;
  background-attachment: fixed;
  padding: 3% 0%;
  z-index: 2
}

.box-after-cookies{
  background-image: url("https://www.mydossier.me/_bilder/myCookies-s.jpg");
  background-size: auto;
  padding: 3% 0%;
  z-index: 2
}

.box-after-colors{
  background-image: url("https://www.mydossier.me/_bilder/myColors-s.jpg");
  background-size: auto;
  padding: 3% 0%;
  z-index: 2
}

.contentbox{
width: 72%;
padding: 1% 3%;
border-radius: 12px;
margin: 8% 14% 4% 13%;
background: rgba(247,247,247, .6);
}

.card{
  width:45%;
}

.cardXL{
  width:98%;
}

/* - - - - - Forms - - - - - */
input { width: 80%;}
textarea { width: 80%;}
.formbutton { width: 50%;}

}