/*
---------------------------------------------------------------------------------------------------
STYLES.CSS
---------------------------------------------------------------------------------------------------
*/

@import url(base.css);

* {
  box-sizing: border-box;
}

html { overflow-x: hidden; }

body {
  background: #5378A7;
  background: #660066;
  background-image: url("Hintergrund_Adventskalender.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  font: 400 15px Lato, sans-serif;
  color: #FFF;
  min-width: 320px;
}


body.big-text { font-size: 100%; line-height: 1.5; }

h1, h2, h3, h4, h5, h6, p, small, blockquote, ul, ol, dl, pre, address, table, form, hr, audio, video {  }

p.bodytext { margin-bottom: 0px; }

/* Typo ------------------- */

h1, h2, h3 { font-weight: lighter; }

/* Original */
h1 { font-size: 1.9em; line-height: 1; letter-spacing: 0.0px; margin-bottom: 30px; }
h2 { font-size: 1.4em; line-height: 1.4; letter-spacing: 0.0px; margin-bottom: 0.5em; }
h3 { font-size: 1.0em; margin-bottom: 0.3em; }
h4 { font-size: 1em; }
h5 { font-size: 1em; }

::-webkit-selection { background: #08c; color: #fff; }
::-moz-selection { background: #08c; color: #fff; }
::selection { background: #08c; color: #fff; }

/* table td { border: 1px solid #AAA; } */


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

a { color: #08c; text-decoration: none; font-weight: bold; }
a:visited { text-decoration: none; }
a:hover { color: #08c; text-decoration: underline; }
a:active { color: #08c; text-decoration: underline; position: relative; top: 1px; }

a.more { font-weight: bold; }


/* Forms ------------------- */

form {  }

fieldset {  }
legend {  }

label { font-size: 90%; }
label.error { color: #c00; }

/* input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel], textarea { font-size: inherit; width: 200px; border: 0 none; padding: 4px; } */
input[type=text], input[type=password], input[type=search], input[type=email], input[type=url], input[type=tel], textarea { font-size: inherit; width: 100%; max-width: 200px; overflow: hidden; border: 1px solid #aaa; padding: 4px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
input[type=text]:focus, input[type=password]:focus, input[type=search]:focus, input[type=email]:focus, input[type=url]:focus, input[type=tel]:focus, textarea:focus {  }
input.error, textarea.error { border-color: #c00; }

button, .btn { font: normal 100%/1.4 Lato, "Helvetica Neue", Helvetica, sans-serif; }

::-webkit-input-placeholder { color: #999; }
:-moz-placeholder { color: #999; }
.error::-webkit-input-placeholder { color: #c00; }
.error:-moz-placeholder { color: #c00; }


/* Tables ------------------- */

th, td { padding: 5px 5px;  }
th { background: #333; color: #000; }


/* Styles  ------------------- */

.container {
  padding:30px;
  width: 90%;
  background-color: #3a3a3a;
  margin: 0 auto;
}

img {
  display: block;
  width: 100%;
}

.container_form {
  float:left;
  width:62%;
  margin-left:5%;
}

.container_logo {
  float:left;
  width:26%;
  padding-left:20px;
  margin-left:2%;
  margin-right: 5%;
}

.div_login {
  width:100%;
  margin-bottom:30px;
  padding:30px;
  background-color: #3a3a3a;
}

.div_lo {
  float:left;
  width:35px;
  height:70px;
  text-align:center;
}

.div_l {
  font-family: Lato, "Helvetica Neue", Helvetica, sans-serif;
  font-size:1.4em;
  float:left;
  width:22px;
  height:30px;
  background:#FFF;
  margin:3px;
  border:1px solid #FDF9DF;
  padding:2px;
}

.div_lm {
  border:2px solid #DC3F30;
  padding:1px;
}

#img_font {
  width: 93%;
  padding: 30px;
  height: auto;
  margin: 0 auto;
}

.wrapper {
  /* display: table; 
  padding: 0; */
  width: 100%;
  height: 100%;
  /* position: absolute; */
}

.canvas-container {
  position: relative;
  max-width: 500px;
  min-width: 320px;
  /* margin: 0 auto; */
}

.layer {
  width: 100%;
  height: auto;
}



/*  B O D Y
--------------------------------------------------------------------------------------------------- */


.header_logo { float:left; width:48%; margin-right: 10%; }

 

/*  M E D I A   Q U E R I E S
--------------------------------------------------------------------------------------------------- */

@media only screen and (max-width : 800px) { 

  /* STYLES GO HERE */ 
  body {
    font: normal 100%/1.4 Lato, sans-serif;
  }
  h1 { font-size: 1.7em; }
  h2 { font-size: 1.2em; letter-spacing: 0px; }

  .div_login {
    width:100%;
    /* background: rgb(45, 55, 99); */
    background-color: #3a3a3a;
  }

  .container_form {
    float:none;
    width:95%;
    margin-left: auto;
    margin-right: auto;
  }

  .container_logo {
    float:none;
    width:95%;
    margin-left: auto;
    margin-right: auto;
  }
  
  .header_logo { margin-right: 2%; }

  #img_font {
    width: 95%;
    padding: 30px 10px;
  }

}

@media print {

  * { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; }
  @page { margin : 0.5cm; }
  a, a:visited { color: black !important; text-decoration: underline; }
  pre, blockquote { page-break-inside: avoid; }
  tr, img { page-break-inside: avoid; }
  td { border-top: 1px solid black; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
  ul { list-style: disc inside; padding: 0 1em }
  ol { list-style: decimal inside; padding: 0 1em }

}