@import url('satisfy.css');
@import url('roboto.css');
@font-face {
    font-family: 'BellGothic';
    src: url('../fonts/BellGothic.eot?#iefix') format('embedded-opentype'),  url('../fonts/BellGothic.otf')  format('opentype'),
    url('../fonts/BellGothic.woff') format('woff'), url('../fonts/BellGothic.ttf')  format('truetype'), url('../fonts/BellGothic.svg#BellGothic-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@keyframes slideInFromRight {
    0% {
        width:0;
    }
    100% {
        width:250px;
    }
}
*{
    font-family: 'Roboto', sans-serif;
    line-height: initial;
}
html, body{
    width:100%;
    height:100%;
}
html body{
    margin:0;
}
body {
    min-width:303px;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #333;
    background-image: url(../images/order.png);
}
footer {
    padding: 8px;
    font-size: 13px;
    color: #aaa;
    background-color: #111;
	bottom: 0;
    width: 100%;
    z-index: 100;
}
.grey{
    color: #666;
}
#carousel-pager{
    padding: 26px 0;
}
.carousel-inner.vertical {
    height: 100%;
}
.carousel-inner.vertical > .item {
    /*-webkit-transition: .6s ease-in-out top;*/
    /*-o-transition: .6s ease-in-out top;*/
    transition: .6s ease-in-out top;
}
@media all and (transform-3d),
(-webkit-transform-3d) {
    .carousel-inner.vertical > .item {
        /*-webkit-transition: -webkit-transform .6s ease-in-out;*/
        /*-o-transition: -o-transform .6s ease-in-out;*/
        transition: transform .6s ease-in-out;
        /*-webkit-backface-visibility: hidden;*/
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        /*perspective: 1000;*/
    }
    .carousel-inner.vertical > .item.next,
    .carousel-inner.vertical > .item.active.right {
        -webkit-transform: translate3d(0, 33.33%, 0);
        transform: translate3d(0, 33.33%, 0);
        top: 0;
    }
    .carousel-inner.vertical > .item.prev,
    .carousel-inner.vertical > .item.active.left {
        -webkit-transform: translate3d(0, -33.33%, 0);
        transform: translate3d(0, -33.33%, 0);
        top: 0;
    }
    .carousel-inner.vertical > .item.next.left,
    .carousel-inner.vertical > .item.prev.right,
    .carousel-inner.vertical > .item.active {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        top: 0;
    }
}
.carousel-inner.vertical > .active {
    top: 0;
}
.carousel-inner.vertical > .next,
.carousel-inner.vertical > .prev {
    top: 0;
    height: 100%;
    width: auto;
}
.carousel-inner.vertical > .next {
    left: 0;
    top: 33.33%;
    right:0;
}
.carousel-inner.vertical > .prev {
    left: 0;
    top: -33.33%;
    right:0;
}
.carousel-inner.vertical > .next.left,
.carousel-inner.vertical > .prev.right {
    top: 0;
}
.carousel-inner.vertical > .active.left {
    left: 0;
    top: -33.33%;
    right:0;
}
.carousel-inner.vertical > .active.right {
    left: 0;
    top: 33.33%;
    right:0;
}
#carousel-pager .carousel-control.left {
    bottom: initial;
    width: 100%;
    background: #FFF;
}
#carousel-pager .carousel-control.right {
    top: initial;
    width: 100%;
    background: #FFF;
}
.carousel-control{
    text-shadow: none;
    color:#333;
    opacity: 1;
}
.carousel-control:focus,
.carousel-control:hover{
    color:#deaf30;
    opacity: 1;
}
.progress {
    border-radius: 0;
}
.progress-bar-info {
    background-color: #deaf30;
}
.well{
    min-height: 360px;
}
.text{
    margin-top:40px;
}
.text h3{
    margin:0 0 20px;
}
.text .border-left{
    border-left:1px solid #CCC;
}
h1.vertical {
    position: absolute;
    width: 20px;
    height: 14px;
    display: inline-block;
    margin: 0;
    opacity: 0.5;
    font-size: 60px;
    right: 10px;
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
h2, .h2 {
    font-size: 26px;
    color:#333;
}
h3, .h3 {
    font-size: 22px;
}
h3.gold{
    color:#deaf30;
}
h4, .h4 {
    font-size: 18px;
}
p {
    font-size: 13px;
    line-height: 1.5;
    font-weight: 400;
}
a {
    color: #9c8300;
}
a:hover, a:focus{
    color:#bb9d01;
}
input[type=checkbox]{
    display: inline-block;
    width: auto;
    box-shadow: none;
}
.checkbox label, .radio label{
    padding-left:0;
    line-height: 14px;
    font-weight: 500;
}
label{
    font-size: 13px;
    line-height: inherit;
    font-weight: 500;
}
#rights{
    position: relative;
}
.blink_me:before {
    animation: blinker 1.5s ease-in infinite;
    content: "";
    position: absolute;
    background: #FFF;
    right: -20px;
    top: 0px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 14px 14px 14px 0;
    border-color: transparent #f51d13 transparent transparent;
}
@keyframes blinker {
    50% { opacity: 0; }
}
.radio input[type=radio]{
    margin-top:3px;
}
#wunsch-briefbogen label[for=papier-detailauswahl] {
    margin-bottom: 15px;
}
.container-fluid{
    border-top: 2px solid #111;
}
.alert{
    margin:0;
    padding: 0;
    border-radius: 0;
}
.loginalert{
    padding: 5px 10px;
}
.alert-success {
    background-color: transparent;
    border:none;
    color: #333;
    font-weight: bold;
    display: inline-block;
}
#goto-payment{
    position: fixed;
    background:rgba(255, 255, 255, 0.65);
    top:0;
    left:0;
    display: none;
    width:100%;
    height:100%;
    z-index:1000000;
}
#goto-payment img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}
#small-bb{
    max-width:100%;
    margin-top: -60px;
    opacity: 0.2;
}
#kontakt .alert-success{
    width:100%;
}
#kontakt .alert-danger{
    background:none;
    border:none;
}
#kontakt .alert-success span{
    color:#deaf30;
    display:block;
    text-align: center;
    border:1px dashed #deaf30;
    padding:10px;
    width:100%;
    margin-bottom:20px;
}
#kontakt .alert-danger span{
    color:red;
    display:block;
    text-align: center;
    border:1px solid red;
    padding:10px;
    width:100%;
    margin-bottom:20px;
}
.alert ul{
    list-style-type: none;
    margin:0;
    padding:0;
}
.alert-warning {
    background-color: transparent;
    border: 2px solid red;
    padding: 10px;
    margin: 0 0 20px;
    color: red;
}
#cover {
    background: url("https://www.aveva.com/Images/ajax-loader.gif") no-repeat scroll center center #FFF;
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 999999999;
}
#closemenu{
    display:none;
}
.navbar{
    color:#CCC;
    background:none;
    margin:0;
}
.navbar-default .navbar-nav>li>a{
    overflow:hidden;
    position: relative;
}
.navbar-default .navbar-nav>li>a:before{
    content: "";
    display: block;
    position: absolute;
    width: 98%;
    bottom: 0;
    height: 2px;
    background: #deaf30;
    right: 100%;
    transition:0.5s;
}
.navbar-default .navbar-nav>li>a:hover:before{
    right: 0;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #deaf30;
}
#page-wrapper{
    padding:0 0 80px;
    min-height:700px;
}
.headline {
    margin:20px 0 !important;
}
#specials .headline {
    margin: 0;
}
.headline + .text-center{
    margin:0;
}
#briefbogen .headline {
    margin: 0;
}
#briefbogen .headline + .text-center {
    margin: 0;
}
.headline .frame{
    display:inline-block;
    position: relative;
}
.headline .h1,
.headline h1,
.headline .h2,
.headline h2{
    display: inline-block;
    color: #505050;
    font-weight: 900;
    font-size: 38px;
    margin: 0;
    padding: 2px 10px;
    font-family: 'Roboto Condensed', sans-serif;
}
.headline .frame:before,
.headline .frame:after,
.headline .frame .h1:before,
.headline .frame .h1:after,
.headline .frame .h2:before,
.headline .frame .h2:after{
    content:"";
    position: absolute;
    border-width:1px;
    border-color:#505050;
    border-style: solid;
}
.slogan .frame:before,
.slogan .frame:after,
.slogan .frame span:before,
.slogan .frame span:after {
    content: "";
    position: absolute;
    border-width: 1px;
    border-color: #999;
    border-style: solid;
}
.frame:before,
.frame:after{
    width:15px;
}
.frame span:before,
.frame span:after,
.frame h1:before,
.frame h1:after,
.frame h2:before,
.frame h2:after {
    height:15px;
}
.frame:before{
    top:0;
    right:0;
}
.frame span:before,
.frame:after{
    bottom:0;
    left:0;
}
.frame span:after,
.frame .h1:before,
.frame .h2:before{
    right:0;
    top:0;
}
.frame .h1:after,
.frame .h2:after{
    bottom:0;
    left:0;
}
.btn{
    border-radius:0;
    transition:all 0.25s;
}
.btn-paper:hover{
    border-radius:8px 0 8px 0;
}
#preview-pdf img.preview-pdf{
    box-shadow: 0 5px 20px -10px #000;
    margin-bottom: 10px;
}
#wunsch-briefbogen #findpaper{
    background-color:#777;
    padding:5px;
    width:100%;
    margin-bottom: 10px;
    font-size:13px;
    color:#FFF;
}
#wunsch-briefbogen #findpaper:hover{
    background-color: #deaf30;
}
#papierauswahl{
    /*-webkit-transition: all 0.5s;*/
    -moz-transition: all 0.5s;
    /*-o-transition: all 0.5s;*/
    transition: all 0.5s;
    width: 100%;
    height: 100%;
    z-index: 999999;
    position: fixed;
    background: rgba(255, 255, 255, 1);
    top: 0;
    left: -100%;
}
#papierauswahl:before,
#papierauswahl:after{
    content: '';
    height: 40px;
    position: absolute;
    left: 0;
    width: 100%;
    top: 0;
}
#papierauswahl:after{
    top: auto;
    bottom: 0;
}
#papierauswahl.show{
    left: 0;
}
#papierauswahl #close{
    position: absolute;
    right:15px;
    cursor: pointer;
    color:#666;
    top: 85px;
    font-weight: bold;
	z-index:1 !important;
}
#papierauswahl #close:hover{
    color:#deaf30;
}
#papierauswahl > .container{
    padding-top: 45px;
    position: relative;
}
#papierauswahl .tags{
    padding: 20px 0;
}
#papierauswahl .tags span{
    background-color: #777;
    color: #FFF;
    padding: 0 10px;
    line-height: 26px;
    height:26px;
    margin: 0 5px 5px 0;
    display: inline-block;
    cursor: pointer;
}
#papierauswahl .tags span.selected{
    display: none !important;
}
#papierauswahl .tags span:hover{
    background:#deaf30;
}
#papierauswahl .search{
    position: relative;
}
#papierauswahl #params > div p{
    margin: 0 0 6px;
}
#papierauswahl #params > div{
    display: none;
}
/*In Papierauswahl: Grammatur mittig setzen*/
.tdgra {
    text-align: center;
}
#filterload{
    background-color: rgba(255, 255, 255, 0.75);
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
}
.spinner,
.spinner2{
    width: 40px;
    height: 40px;
    top: 50%;
    left: 50%;
    margin:-20px 0 0 -20px;
    position: absolute;
    background-color: #deaf30;
    border-radius: 100%;
    -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
    animation: sk-scaleout 1.0s infinite ease-in-out;
}
.spinner2{
    width: 60px;
    height: 60px;
    margin:-30px 0 0 -30px;
}
/*Papierauswahl Tabelle auf 100% gesetzt*/
#papertable {
    width: 100% !important;
}
/*Papierauswahl mit boden*/
#papertable_wrapper {
    margin-bottom: 50px;
}
@-webkit-keyframes sk-scaleout {
    0% { -webkit-transform: scale(0) }
    100% {
        -webkit-transform: scale(1.0);
        opacity: 0;
    }
}
@keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    } 100% {
          -webkit-transform: scale(1.0);
          transform: scale(1.0);
          opacity: 0;
      }
}
#papierauswahl #params p.clearfix{
    margin:0;
}
#papierauswahl #params span{
    color: #FFF;
    background: #666;
    font-weight: 400;
    padding: 0 20px 0 10px;
    line-height: 22px;
    height: 24px;
    margin: 0 0 5px 5px;
    display: inline-block;
    cursor: pointer;
    position: relative;
    border: 1px solid #666;
    float:right;
}
#papierauswahl #params span:hover{
    background: #deaf30;
    border-color: #deaf30;
    color: #FFF;
}
#papierauswahl #params span:hover:after{
    color: #FFF;
}
#papierauswahl #params span:after {
    content: "\f00d";
    font: normal normal normal 10px/1 FontAwesome;
    color: #DDD;
    height: 20px;
    position: absolute;
    top: 0;
    right: 6px;
    line-height: 22px;
}
#papierauswahl h3{
    margin-top: 0;
    font-size: 16px;
    color: #333;
}
#papierauswahl hr {
    margin-top: 10px;
    margin-bottom: 10px;
}
#paper-result .btn{
    font-size: 12px;
    padding: 2px 8px;
    background: none;
    color: #333;
}
#paper-result .btn:hover{
    background: #deaf30;
    color:#FFF;
}
#papertable_filter{
    width:100%;
    margin-top: 30px;
}
#papertable_filter label{
    width:100%;
}
#papertable_filter label input{
    margin:0;
	width:60%;
}
#paper-result .table>thead:first-child>tr:first-child>th{
    padding-left:10px;
}
#paper-result table.dataTable tbody td{
    padding: 4px 10px;
}
#paper-result table.dataTable.no-footer,
#paper-result table.dataTable thead th{
    border:none;
}
#paper-result table.dataTable tbody .odd{
    background:#EEE;
}
#paper-result .table{
    margin-bottom: 20px;
}
#papierauswahl #papertable_paginate span{
    background:none;
    margin: 0;
    display: inline-table;
    color: #666;
}
#papierauswahl #papertable_paginate{
    padding: 0;
}
#papierauswahl #papertable_paginate a{
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border: none;
    margin: 0;
    font-weight: 500;
}
#papierauswahl #papertable_paginate a:hover{
    background: #deaf30;
}
#papierauswahl #papertable_paginate a.disabled:hover{
    background:none;
}
#papierauswahl #papertable_paginate a.current {
    border: none;
    background: #666;
    color: #FFF !important;
}
#yourpaper{
    display:none;
}
#wunsch-briefbogen #yourpaper h3{
    margin-top:0;
}
#resetpaper{
    color:#999;
    cursor: pointer;
    text-decoration: underline;
}
#resetpaper:hover{
    color:#deaf30;
}
#papierinfos{
    background:#FFF;
    padding:80px 0;
}
#papierinfos h2{
    display: inline-block;
    margin-top: -2px;
    margin-bottom: 20px;
    vertical-align: top;
    margin-left: 10px;
}
#papierinfos .text-center{
    text-align: left;
    margin:0;
}
#papierinfos .text-center h2{
    margin:0;
}
#paperlist{
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    list-style-type: none;
    margin: 10px 0 0;
    padding:0;
    height:400px;
}
#paperlist{
    background:#CCC;
}
#paperlist p{
    margin:0;
    background-color: #f6f6f6;
    padding: 6px 20px;
    border: 1px solid #ddd;
    margin-top: -1px;
    transition: all 0.35s;
}
.simplebar-content > div{
    position: relative;
}
.simplebar-content > div > span{
    position: absolute;
    right: 10px;
    top:5px;
}
#paperlist p.active{
    background-color: #deaf30;
    border-color: #deaf30;
    color: #FFF;
}
#paperlist p.active i{
    margin-right:5px;
    opacity: 0.5;
}
#paperlist p:hover{
    background-color: #deaf30;
    cursor: pointer;
    border-color: #deaf30;
    color:#FFF;
    -webkit-box-shadow: inset -60px 0 120px -70px #9e7a1a;
    -moz-box-shadow: inset -60px 0 120px -70px #9e7a1a;
    box-shadow: inset -60px 0 120px -70px #9e7a1a;
}
.papierlogos{
}
.papierlogos img{
    margin:10px 5px;
}
.pi-gramms{
}
.pi-gramm{
    display: inline-block;
    padding: 2px 5px;
    margin: 5px 5px 0 0;
    border-radius: 4px;
    border: 1px solid #adadad;
    font-weight: 500;
}
#papierinfos h4{
    color: #deaf30;
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: 500;
    margin-top: 30px;
}
#papierinfos .specialbtn{
    background-color: #666;
    padding: 5px 10px;
    font-size: 13px;
	margin:3px;
}
#papierinfos .specialbtn:hover{
    background-color: #deaf30;
}
#papierbilder{
    margin-left:30px;
    min-height:350px;
}
#papierbilder .papierfarbe > div{
    position: relative;
}
#papierbilder .papierfarbe img{
    width:100px;
}
#papierbilder .papierfarbe .papername{
    max-width: 80%;
    position: absolute;
    bottom: 15px;
    font-size: 10px;
    font-weight: 500;
    margin: 0;
    left: 1px;
    background: #FFF;
    text-transform: uppercase;
    padding: 2px 6px;
    border-bottom: 1px solid #CCC;
}
#papierbilder .papierfarbe p:first-child{
    padding: 3px;
    border: 1px solid #CCC;
    margin: 6px 0;
    background: #FFF;
}
#papierbilder .papierfarbe p{
    margin:0;
}
#twentyfour{
    background-image: url(../images/paper.jpg);
    background-size: cover;
    background-position: bottom;
    position: relative;
}
#twentyfour:before{
    content: '';
    background: #FFF;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.85;
    border-top: 40px solid #DDD;
    border-bottom: 100px solid #EEE;
}
#twentyfour > div {
    padding: 80px 0 40px;
}
#twentyfour p{
    text-align: center;
    margin: 0;
    color: #333;
    font-size: 14px;
    position: relative;
}
#twentyfour .garantie{
    color:#deaf30;
    font-size: 34px;
    font-weight: 500;
    margin: 0 0 60px;
}
#twentyfour .garantie span{
    border:2px solid #deaf30;
    padding: 0 5px;
    background: rgba(255, 255, 255, 0.5);
}
/*-------------------------------------------------HEADER--------------------------------------------------------*/
#briefbogen{
    background: url(../images/welcome.jpg);
    background-position: center -20px;
    background-size: 1200px;
    background-repeat: no-repeat;
    padding-bottom: 80px;
    background-color: #EEE;
    position: relative;
}
#briefbogen.topB{
    padding: 0;
}
div#briefbogen:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 400px;
    background: #eee;
    top: -400px;
    left: 0;
}
.headline h1,
#briefbogen .headline h2{
    display: inline-block;
    color: #505050;
    font-weight: 900;
    font-size: 38px;
    margin: 0;
    padding: 2px 10px;
    font-family: 'Roboto Condensed', sans-serif;
}
#briefbogen h3{
    text-transform: uppercase;
    color: #d3a31c;
    font-size: 14px;
    letter-spacing: 1px;
    width: 200px;
    text-align: center;
    margin:0 0 5px;
}
#briefbogen h4{
    font-size: 12px;
    font-weight: 900;
    margin: 0;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
}
#briefbogen p{
    color:#333;
    font-weight:500;
    width: 200px;
    font-size: 12px;
    text-align: center;
    margin-bottom: 20px;
    line-height: 16px;
}
#briefbogen .description{
    height:675px;
}
.loupe{
    position: relative;
    display: inline-block;
    width:350px;
}
.loupe:before {
    content: "";
    position: absolute;
    display: inline-block;
    right: 100px;
    bottom: 2px;
    height: 1px;
    background: #666;
    animation: 1s ease-out 4s forwards slideInFromRight;
}
.left .loupe:before {
    right:inherit;
    left:100px;
}
.left .loupe:nth-child(1):before{
    animation-delay:0.3s;
}
.left .loupe:nth-child(2):before{
    animation-delay:0.6s;
}
.left .loupe:nth-child(3):before{
    animation-delay:0.9s;
}
.right .loupe:nth-child(1):before{
    animation-delay:1.2s;
}
.right .loupe:nth-child(2):before{
    animation-delay:1.5s;
}
.loupe:after {
    content: "";
    position: absolute;
    display: inline-block;
    width: 0px;
    height: 0px;
    border-radius: 50%;
    background: #e6e6e6;
    bottom: 0px;
    right: 100px;
    border: 2px solid #edb620;
    box-shadow: 0 0 0 1px #d2a21c, 0 0 0 4px #e6e6e6, 0 0 0 5px #666;
}
.left .loupe:after {
    right:inherit;
    left:100px;
}
.description.left .loupe-image{
    left: auto;
    right: -50px;
}
.loupe-image {
    position: absolute;
    bottom: -45px;
    display: block;
    left:-50px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #999;
    box-shadow: 0 2px 10px -4px #000;
    background-size: cover;
    transition: all 0.3s;
    cursor: pointer;
}
.loupe-image:hover {
    width: 110px;
    height: 110px;
    margin: -5px;
    box-shadow: none;
    border: 2px solid #deaf30;
}
#lochen_loupe{
    top: 120px;
    left: 66px;
}
#lochen_loupe .loupe-image{
    background-image:url(../images/loupe/papier.png);
}
#runden_loupe{
    top: 310px;
    left: 150px;
}
#runden_loupe .loupe-image{
    background-image:url(../images/loupe/runden.png);
}
#praegung_loupe{
    top: 30px;
    right: 75px;
}
#praegung_loupe .loupe-image{
    background-image:url(../images/loupe/praegung.png);
}
#folie_loupe{
    top: 80px;
    left: 130px;
    width: 375px;
}
#folie_loupe .loupe-image{
    background-image:url(../images/loupe/folie.png);
}
#farben_loupe{
    top: 250px;
    width: 300px;
}
#farben_loupe .loupe-image{
    background-image:url(../images/loupe/farben.png);
}
.small.order-link{
    margin: 0;
}
.small.order-link,
#briefbogen .order-link{
    text-align: center;
    z-index:10;
    position: relative;
}
.small.order-link p,
#briefbogen .order-link p{
    font-size: 15px;
    line-height: initial;
    width: initial;
    margin: 0 0 20px;
}
.small.order-link button,
#briefbogen .order-link button{
    display: inline-block;
    border-radius: 2px;
    border: 2px solid #deaf30;
    z-index: 100;
    overflow: hidden;
    margin-top: 15px;
    width:320px;
    height:35px;
    text-align:center;
    position: relative;
    background:none;
    padding:0;
}
.small.order-link button span,
#briefbogen .order-link button span{
    display: block;
    height:100%;
    width:100%;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 13px;
    position: absolute;
    top: -100%;
    line-height: 32px;
    /*-webkit-transition: all 0.3s;*/
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    background:#deaf30;
    color:#FFF;
}
.small.order-link button span + span,
#briefbogen .order-link button span + span{
    top: 0;
    color: #deaf30;
    background:none;
}
.small.order-link button:hover,
#briefbogen .order-link button:hover{
    box-shadow: 0 2px 0 0 #c79d2b;
}
.small.order-link button:hover span,
#briefbogen .order-link button:hover span{
    top:0;
}
.small.order-link button:hover span + span,
#briefbogen .order-link button:hover span + span{
    top:100%;
}

.header-top-abstand{
	padding-top:200px;
}
/*-------------------------------------------------BANNER--------------------------------------------------------*/
.banner{
    position: relative;
    height:300px;
    background-size:cover;
    background-position:center;
    background-attachment: fixed;
}
.banner.foil{
    background-image:url(../images/foil.jpg);
}
.banner div.slogan{
    display:inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin:0;
}
.slogan{
    display:none;
}
.banner div.slogan span{
    color: #CCC;
    padding: 10px 30px;
    text-transform: uppercase;
    display: inline-block;
    font-family: 'Roboto Slab', serif;
    font-weight: bold;
    font-size: 28px;
}
.banner:before{
    content:"";
    position: absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:#000;
    opacity: 0.5;
}
/*-------------------------------------------------ORDER---------------------------------------------------------*/
#bestellen{
    padding-top:125px;
    background: url(../images/order.png);
}
#bestellen h2 {
    color:#F1B821;
    text-transform: uppercase;
    margin:0 0 30px;
    font-size:36px;
    font-family: 'Roboto Slab', serif;
}
#bestellen .form-control, .select2-search input[type=text] {
    background: #FFF;
    color: #333;
    margin:0;
    border-color:#666;
}
#bestellen label{
    margin:10px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: #777;
}
#bestellen .special label{
    margin:0;
    vertical-align: super;
}
#bestellen .special{
    margin-top:5px;
}
#bestellen .grammatur label{
    color: #333;
    font-weight: 400;
    font-size: 13px;
}
.grammatur-label{
    padding-top: 15px;
    font-weight: 500;
    font-size: 14px;
    color: #666;
}
#bestellen .select-primary .select2-choice {
    color: #333;
    background-color: transparent;
    border: none;
    padding:0;
    font-size:14px;
    font-weight: 400;
}
#bestellen .select-primary .select2-choice .select2-arrow {
    border-top-color: #666;
}
#bestellen p{
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    color: #333;
    margin:0 0 10px;
}
#bestellen h4{
    color:#666;
    margin:15px 0 10px;
    font-size:20px;
}
#bestellen .form-control,
#bestellen .select2-search input[type=text]{
    position: relative;
    border:none;
    border-radius:0;
    border-bottom: 1px solid #CCC;
    width: 100%;
    padding: 4px 6px;
    font-size:14px;
    font-weight: 400;
}
.form-group {
    margin:0 0 15px;
    position: relative;
}
#guest .form-group{
    padding:0 0 18px;
    margin: 0 0 10px;
}
#guest .form-group label{
    position: absolute;
    font-size: 11px;
    bottom: 0;
    margin: 0;
    color:#AAA;
}
#loggedin-user .form-group{
    padding:0 0 18px;
    margin: 0 0 10px;
}
#loggedin-user .form-group label{
    position: absolute;
    font-size: 11px;
    bottom: 0;
    margin: 0;
    color:#AAA;
}
#checkout #loggedin-user .form-control,
#checkout #guest .form-control{
    margin:0;
    padding:0 2px;
}
#checkout #loggedin-user select.form-control{
    margin:0 0 20px;
    border:1px solid #CCC;
}
#checkout #loggedin-user .form-control.missing,
#checkout #guest .form-control.missing{
    border: 1px solid red;
    background: rgba(255, 152, 152, 0.19);
}
#bestellen .btn{
    margin-top:20px;
}
.order-col + h5{
    font-weight: 600;
    font-size: 18px;
    font-family: 'Roboto Slab', serif;
    margin-top: 32px;
    text-transform: uppercase;
    color: #666;
    text-align: right;
}
input[type=file] {
    display: block;
    width: 100%;
    color: #333;
    font-size: 13px;
    padding: 5px;
    border: 1px solid #DDD;
    margin: 10px 0;
}
h1 {
    text-transform: uppercase;
    color: #deaf30;
    font-size: 40px;
    border: none;
    padding: 0;
    margin: 20px 0;
}
#upload_form .btn.btn-primary{
    margin-top: 10px;
    background: #999;
    padding: 5px 10px;
    font-size: 13px;
}
#upload_form .btn.btn-primary:hover{
    background: #deaf30;
}
#preview {
    background-color:#fff;
    display:block;
    float:right;
    width:200px;
    margin: 0 0 30px;
}
#speed,#remaining {
    float:left;
    width:100px;
}
#progress_info{
    display:none;
}
#progress_info p{
    padding:0;
}
#b_transfered {
    float:right;
    text-align:right;
}
.clear_both {
    clear:both;
}
#progress_info {
    font-size:10pt;
}
#fileinfo,#error,#error2,#abort,#warnsize {
    color:#aaa;
    display:none;
    font-size:10pt;
    font-style:italic;
    margin-top:10px;
}
#error-input{
    visibility: hidden;
}
.radio.vorkasse label{
    border-bottom:1px solid #CCC;
}
#progress {
    background:#CCC;
    height:20px;
    margin-bottom:10px;
}
#progress_percent {
}
#upload_response {
    display: none;
}
#upload p{
    margin:0;
}
#upload span.sf{
    padding: 2px 4px;
    border: 1px solid #CCC;
    margin: 6px 4px 0 0;
    font-weight: bold;
    display: inline-block;
}
#upload hr{
    margin-top: 6px;
    margin-bottom: 6px;
    border-top: 1px solid #DDD;
}
.order-price {
    display: table;
    width: 100%;
    margin: 20px 0;
}
.order-price p{
    display:table-row;
}
.order-price span{
    display:table-cell;
    font-weight: 500;
}
.order-price .price{
    text-align: right;
}
#tax-excl .price{
    font-weight: 600;
    font-size: 32px;
    font-family: 'Roboto Slab', serif;
}
#checkout #tax-excl .price{
    font-size: 22px;
}
#tax span{
    padding:5px 0;
}
#tax .price{
    font-weight: 400;
    font-size: 18px;
    font-family: 'Roboto Slab', serif;
}
#checkout #tax .price{
    font-size: 16px;
}
p#tax-incl span{
    border-top: 1px solid #CCC;
    padding:10px 0 0;
}
#tax-incl .price{
    font-weight: 600;
    font-size: 32px;
    font-family: 'Roboto Slab', serif;
}
#checkout #tax-incl .price{
    font-size: 22px;
}
.select2-display-none.order {
    min-width: inherit;
    background: #FFF;
    border: 1px solid #CCC;
    box-shadow: 0 5px 26px -14px #000;
}
.select2-drop.order .select2-results {
    margin: -1px;
}
.select2-drop.order .select2-highlighted>.select2-result-label {
    color: #666;
    background: #F1B821;
}
.select2-drop.order .select2-result-selectable .select2-result-label {
    color: #333;
    font-weight: 400;
}
#bestellen .bootstrap-switch-off .bootstrap-switch-handle-on~.bootstrap-switch-handle-off.bootstrap-switch-default:before {
    background-color: #DDD;
    border-color: #CCC;
    box-shadow: -1px 0 0 #CCC, inset 0 0 5px #DDD;
}
#bestellen .bootstrap-switch-primary~.bootstrap-switch-handle-off:before {
    background-color: #ffe8aa;
    border-color: #f1b821;
}
#bestellen .bootstrap-switch>div>span {
    color: #999;
    font-weight: 400;
}
#bestellen .bootstrap-switch>div>span.bootstrap-switch-handle-on {
    color: #333;
}
#bestellen .bootstrap-switch-off .bootstrap-switch-handle-on~.bootstrap-switch-handle-off.bootstrap-switch-default {
    border: 2px solid #DDD;
}
#bestellen .info{
    font-size:12px;
    color:#999;
    margin:20px 0 0;
    display: block;
}
/*-------------------------------------------------WUNSCH-BRIEFPAPIER--------------------------------------------*/
#checkout{
    padding: 0 0 120px;
}
#sidebar{
    padding-right:50px;
}
#checkout label[for="other-add"]{
    margin:0;
}
#papier-grammatur{
    margin:0;
}
#pay-add-guest,
#pay-add{
    display:none;
}
#checkout h2{
    display: inline-block;
    color: #505050;
    font-weight: 900;
    font-size: 38px;
    margin: 0;
    padding: 2px 10px;
    font-family: 'Roboto Condensed', sans-serif;
}
#success{
    margin: 40px 0 80px;
    min-height: 700px;
}
section#confirm{
    padding:0 0 80px;
}
.form-signup #confirm{
    padding:9px 20px;
}
#confirm .text-center,
#checkout .text-center{
    margin:0;
}
#checkout .alert-warning.text-center{
    margin:0 0 20px;
}
#confirm .text-center + h4.text-center,
#checkout .text-center + h4.text-center{
    margin:0 0 40px;
    font-size: 12px;
    font-weight: 900;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.checkout-briefpapier p{
    margin:0;
}
#checkout h5{
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 20px;
    color: #deaf30;
    font-size: 14px;
    letter-spacing: 1px;
}
#confirm table tr td,
.checkout-briefpapier table tr td{
    padding:0;
}
#confirm table tr td:nth-child(2),
.checkout-briefpapier table tr td:nth-child(2){
    padding-left:20px;
    font-weight:500;
}
#checkout .form-control, .select2-search input[type=text] {
    height: 30px;
    padding: 0 10px;
    margin-bottom: 10px;
    line-height: 30px;
    font-size: 14px;
    border: none;
    background: none;
    border-bottom: 1px solid #BBB;
}
#checkout .dashed-line {
    background-size: 11px 1px;
    margin: 5px 0 20px;
}
#checkout .info {
    color: #FFF;
    text-shadow: 0 -1px 0 #999;
    background: #999;
    margin: 14px -21px -21px;
    line-height: initial;
    padding: 5px 20px;
    font-size: 11px;
    font-weight: 400;
}
#checkout .form-control:focus + .input-after,
#checkout .select2-search input[type=text]:focus + .input-after{
    width:100%;
}
.input-after{
    position: absolute;
    bottom:0;
    width:0;
    left:0;
    height: 2px;
    background: #f1b821;
    display:block;
    transition: all 0.35s;
}
#loggedin-user .input-after,
#guest .input-after{
    bottom:18px;
}
#checkout .panel-title{
    margin:0;
}
#checkout .panel-title a{
    position: relative;
    display: block;
    color: #deaf30;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0;
    line-height: 24px;
    font-family: 'Roboto Condensed', sans-serif;
    padding: 0 0 0 24px;
    background: none;
}
#checkout .step-number{
    background: #deaf30;
    color: #FFF;
    border-radius: 50%;
    width: 34px;
    display: inline-block;
    text-align: center;
    line-height: 32px;
    margin: 0 5px 0 0;
    font-weight: 900;
    border: 1px solid #CCC;
    box-shadow: inset 0 0 0px 2px #FFF, 5px 5px 5px -5px #CCC;
    position: absolute;
    left: -16px;
    z-index: 2;
}
#checkout .panel-title a.collapsed{
    color:#FFF;
    border: 1px solid #888;
    padding:10px 15px;
    font-size: 14px;
    background: #888;
    text-transform: initial;
}
#checkout .panel-title a.collapsed:hover{
    border-color: #999;
    background: #999;
}
#checkout .panel-title a.collapsed .step-number{
    display:none;
}
#checkout .panel-title a:before{
    content: "\f078";
    font: normal normal normal 14px/1 FontAwesome;
    position: absolute;
    right:15px;
}
#checkout .panel-title a.collapsed:before{
    content: "\f077";
}
#checkout .login-help{
   	margin: -17px 0 0 0;
    padding: 0;
    background: none;
}
#checkout .login-help a{
    font-size:13px;
}
#checkout .panel-body .btn{
    padding: 5px 10px;
    background: #999;
    font-size: 13px;
}
#checkout .panel-body .btn:hover{
    background: #deaf30;
    text-shadow:none;
}
#checkout .panel-default{
    background:none;
    border:none;
}
#checkout .panel-default>.panel-heading{
    border: none;
    background: none;
    box-shadow: none;
    padding: 0;
    position: relative;
    z-index: 999;
}
#checkout .panel-group .panel + .panel {
    margin-top: 20px;
}
.panel-group,
.step{
    margin-bottom: 40px;
}
.step.checkout-upload{
    margin-bottom: 10px;
}
#uploader{
    border:2px solid red;
}
.stepcounter{
    display:block;
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background:#FFF;
    opacity:0.5;
    z-index:1;
}
#checkout .btn-download{
    width:100%;
    display:block;
    border: 2px dashed #deaf30;
    margin-bottom:40px;
    padding:5px;
    text-align:center;
    position: relative;
    background: none;
    color: #deaf30;
}
#checkout .btn-druck{
    background: #deaf30;
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
    color: #FFF;
    padding: 8px;
    transition: all 0.35s;
}
#checkout .btn-druck:hover{
    background: #d0a430;
    border-radius:0 0 15px 0;
}
#checkout .btn-download:hover{
    color: #FFF;
}
#checkout .btn-download:focus{
    color:#deaf30;
}
#checkout .btn-download:hover:focus{
    color:#FFF;
}
#checkout .btn-download:before{
    position: absolute;
    content:"";
    display:block;
    background:#deaf30;
    bottom:calc(100% + 2px);
    left:-2px;
    right:-2px;
    top:-2px;
    transition:all 0.3s;
    z-index:-1;
}
#checkout .btn-download:hover:before{
    bottom:-2px;
}
#checkout .panel-body,
.step .content{
    border: 1px solid #CCC;
    padding: 20px;
    background: #FFF;
    position: relative;
}
#payment-step .content{
    min-height: 167px;
    padding: 10px 20px 20px;
}
#paypal-load{
    margin-left:10px;
    position: absolute;
    top: 14px;
}
.step .headline{
    position: relative;
    display: block;
    color: #deaf30;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0;
    line-height: inherit;
    font-family: 'Roboto Condensed', sans-serif;
    padding: 0 0 0 24px;
}
.step .headline .pull-right{
    color: #666;
    font-size: 14px;
    text-transform: initial;
    text-decoration: underline;
}
.step .headline .pull-right:hover{
    color: #deaf30;
    text-decoration: none;
}
#ppplus{
    margin-top: -25px;
}
#ppplus iframe {
    width:100% !important;
}
#checkout .order-price{
    margin:0;
}
#checkout .radio {
    margin:0;
}
#checkout .radio label{
    padding: 20px 0;
}
#checkout .radio:first-child {
    border-bottom:1px solid #CCC;
}
#checkout .radio p {
    margin:5px 0 0;
}
.del-icon{
    max-width:80px;
    margin-right:20px;
}
#delivery-step p{
    margin:0;
}
/*-------------INPUT-EFFECT--------------*/
.input {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 100%;
    vertical-align: top;
}
.input__field {
    position: relative;
    display: block;
    float: right;
    padding: 0.8em;
    width: 60%;
    border: none;
    border-radius: 0;
    background: #f0f0f0;
    color: #aaa;
    -webkit-appearance: none;
}
.input__field--ruri {
    width: 100%;
    background: transparent;
    padding: 0.5em 0;
    margin-bottom: 2em;
    color: #333;
    line-height: 30px;
    font-size: 15px;
}
.input__label {
    display: inline-block;
    float: right;
    padding: 0 1em;
    width: 40%;
    color: #696969;
    font-weight: normal;
    font-size: 70.25%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.input__label--ruri {
    width: 100%;
    position: absolute;
    text-align: left;
    font-size: 1em;
    padding: 10px 0 5px;
    pointer-events: none;
}
.input__label-content {
    position: relative;
    display: block;
    padding: 1.6em 0;
    width: 100%;
}
.input__field--ruri:focus + .input__label--ruri .input__label-content--ruri, .input--filled .input__label--ruri .input__label-content--ruri {
    color: #CCC;
    -webkit-transform: translate3d(0, 34px, 0) scale3d(0.8, 0.8, 1);
    transform: translate3d(0, 34px, 0) scale3d(0.8, 0.8, 1);
}
.input__label-content--ruri {
    padding: 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    /*-webkit-transition: -webkit-transform 0.3s, color 0.3s;*/
    transition: transform 0.3s, color 0.3s;
}
.input__field--ruri:focus + .input__label--ruri::after, .input--filled .input__label--ruri::after {
    background: #deaf30;
    -webkit-transform: scale3d(1, 0.25, 1);
    transform: scale3d(1, 0.25, 1);
}
.input__label--ruri::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    background: #DDD;
    left: 0;
    top: 100%;
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    /*-webkit-transition: -webkit-transform 0.3s, background-color 0.3s;*/
    transition: transform 0.3s, background-color 0.3s;
}
.input__field:focus {
    outline: none;
}
/*-------------------------------------------------WUNSCH-BRIEFPAPIER--------------------------------------------*/
#wunsch-briefbogen {
    /*min-height:100%;*/
    padding:60px 0;
}
#wunsch-briefbogen div.text-center{
    margin-bottom:10px;
}
#wunsch-briefbogen h2{
    display: inline-block;
    color: #505050;
    font-weight: 900;
    font-size: 38px;
    margin: 0;
    padding: 2px 10px;
    font-family: 'Roboto Condensed', sans-serif;
}
#wunsch-briefbogen h3{
    text-transform: uppercase;
    font-weight: 500;
    margin: 20px 0 5px;
    color: #deaf30;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
}
#wunsch-briefbogen .tags h3{
    display: block;
}
#wunsch-briefbogen p{
    color:#333;
}
#wunsch-briefbogen p.getpaperinfos{
    margin:0;
    cursor: pointer;
}
#wunsch-briefbogen p.getpaperinfos:hover{
    color:#deaf30;
}
#wunsch-briefbogen .note{
    color:#777;
}
.note{
    margin-top:5px;
}
.note.right{
    text-align: right;
}
#corner .frame{
    position: relative;
    display:inline-block;
    width:80px;
    height:120px;
    margin:0 auto;
}
#corner .frame + p{
    display: inline-block;
    vertical-align: top;
    margin-left: 20px;
    margin-top: 36px;
    max-width: 140px;
}
#corner .frame .left-right{
    position:absolute;
    display:block;
    height: 80px;
    top:20px;
    width:100%;
    border-left:3px solid #444;
    border-right:3px solid #444;
}
#corner .frame .top-bottom{
    position:absolute;
    display:block;
    width:40px;
    height: 100%;
    left:20px;
    border-top:3px solid #444;
    border-bottom:3px solid #444;
}
#corner .frame .corner{
    display:block;
    position: absolute;
    width:20px;
    height:20px;
    cursor: pointer;
}
#corner .frame .corner:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #deaf30;
    background: #FFF;
    border-radius: 50%;
    opacity: 0;
    transition:all 1s;
}
#corner .frame .corner.top-left:before{
    bottom: 50%;
    right: 50%;
    transform:translate(50%, 50%);
}
#corner .frame .corner.top-right:before{
    bottom: 50%;
    left: 50%;
    transform:translate(-50%, 50%);
}
#corner .frame .corner.bottom-right:before{
    top: 50%;
    left: 50%;
    transform:translate(-50%, -50%);
}
#corner .frame .corner.bottom-left:before{
    top: 50%;
    right: 50%;
    transform:translate(50%, -50%);
}
#corner .frame .corner:hover:before{
    opacity: 1;
    width: 10px;
    height: 10px;
}
#corner .frame .corner.top-left:hover:before{
    bottom: 0;
    right: 0;
}
#corner .frame .corner.top-right:hover:before{
    bottom: 0;
    left: 0;
}
#corner .frame .corner.bottom-right:hover:before{
    top: 0;
    left: 0;
}
#corner .frame .corner.bottom-left:hover:before{
    top: 0;
    right: 0;
}
#corner .frame .corner span{
    display:block;
    position: absolute;
    width:20px;
    height:20px;
}
#corner .frame .corner.round span{
    border-color:#F1B821;
}
#corner .frame p{
    position:absolute;
    left:0;
    top:36px;
    width:100%;
    text-align:center;
}
#corner .top-left{
    top:0;
    left:0;
}
#corner .top-left span{
    border-left:3px solid #999;
    border-top:3px solid #999;
}
#corner .top-left:hover span,
#corner .top-left.round span{
    border-radius:20px 0 0 0;
}
#corner .top-right {
    top:0;
    right:0;
}
#corner .top-right span{
    border-right:3px solid #999;
    border-top:3px solid #999;
}
#corner .top-right:hover span,
#corner .top-right.round span{
    border-radius:0 20px 0 0;
}
#corner .bottom-left{
    bottom:0;
    left:0;
}
#corner .bottom-left span{
    border-left:3px solid #999;
    border-bottom:3px solid #999;
}
#corner .bottom-left:hover span,
#corner .bottom-left.round span{
    border-radius:0 0 0 20px;
}
#corner .bottom-right{
    bottom:0;
    right:0;
}
#corner .bottom-right span{
    border-right:3px solid #999;
    border-bottom:3px solid #999;
}
#corner .bottom-right:hover span,
#corner .bottom-right.round span{
    border-radius:0 0 20px 0;
}
.dashed-line{
    background-image: linear-gradient(to right, #666 33%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 10px 1px;
    background-repeat: repeat-x;
    height:1px;
    margin: 15px 0;
}
.dashed-line.small{
    margin: 10px 0;
}
#delivery-time{
    font-weight: 500;
    text-align: center;
    background: rgba(238, 238, 238, 0.25);
    padding: 2px;
    border: 1px solid #DDD;
    margin-bottom: 30px;
}
#confirm #delivery-time{
    border:none;
    text-align: left;
    padding: 0;
}
.preview{
    position: relative;;
    width:100%;
    padding-bottom:141%;
    background:#FFF;
    border: 1px solid #d4d1d1;
}
.preview:before,
.preview:after{
    content: "";
    position: absolute;
    width: 45%;
    z-index: -1;
    bottom: 4px;
    top: 20px;
    left: 12px;
    background: transparent;
    transform: rotate(-2deg);
    box-shadow: 0 0 20px 0 #000;
}
.preview:after{
    left:initial;
    right: 12px;
    transform: rotate(2deg);
}
.preview-inner{
    padding: 40px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.preview-inner h5{
    color: #deaf30;
    font-size: 14px;
    margin: 0 0 10px;
    text-transform: uppercase;
}
#wunsch-briefbogen .preview-inner .check{
    color: #9a750f;
}
#preview-farben{
    position: relative;
}
#preview-farben:before{
    content:"";
    position: absolute;
    right:0;
    height:20px;
    background-size:cover;
}
#preview-farben.f10Skala:before,
#preview-farben.f20Skala:before,
#preview-farben.f30Skala:before,
#preview-farben.f40Euroskala:before{
    width:40px;
    background:url(../images/farben/skala.png);
}
#preview-farben.f50EuroskalaSonderfarbe:before{
    width:66px;
    background:url(../images/farben/skalasonderfarbe.png);
}
#preview-farben.f10Sonderfarbe:before,
#preview-farben.f20Sonderfarbe:before,
#preview-farben.f30Sonderfarbe:before,
#preview-farben.f40Sonderfarbe:before,
#preview-farben.f50Sonderfarbe:before{
    width:21px;
    background:url(../images/farben/sonderfarbe.png);
}
.preview-inner .check:before{
    content:"\f00c";
    margin-right:5px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#wunsch-briefbogen .title{
    font-size: 11px;
    margin: 2px 0;
}
#wunsch-briefbogen .title + p{
    font-weight:bold;
    margin: 0 0 8px;
}
/*-------------------------------------------------DATENBLATT----------------------------------------------------*/
#datenblatt{
    padding-bottom:100px;
}
#datenblatt .btn{
    margin-left:10px;
    padding: 0px 15px 3px;
}
#datenblattm h3,
#datenblatt h3{
    font-family: 'Roboto Slab', serif;
    color:#333;
    font-size: 20px;
    padding-bottom: 10px;
    background-image: linear-gradient(to right, #666 33%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 10px 1px;
    background-repeat: repeat-x;
}
#datenblattm h4 ,
#datenblatt h4 {
    font-family: 'Roboto Slab', serif;
    color: #666;
    font-size: 16px;
    margin: 10px 0 8px;
}
#datenblatt p{
    color:#333;
    font-size: 13px;
    font-weight:400;
}
#datenblatt ul li{
    color:#333;
    font-size: 13px;
}
.datenblatt{
    position: relative;
}
button.special-btn,
a.special-btn{
    border: none;
    padding: 10px 15px;
    transition: 0.25s;
    font-size: 14px;
    font-weight: 400;
}
button.special-btn span,
a.special-btn span{
    padding: 6px 0 6px 15px;
    margin-left: 15px;
    position: relative;
}
button.special-btn span:after,
a.special-btn span:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 1px solid rgba(0, 0, 0, 0.1);
}

#datenblatt .download a:hover{
    background: #f1b821;
    border-color: #f1b821;
    color:#FFF;
    border-radius:5px 0 5px 0;
}
.container #dotted-line{
    height: 2px;
    margin: 50px auto;
    background-image: linear-gradient(to right, #777 50%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 28px 2px;
    background-repeat: repeat-x;
}
#datenblattm .modal-dialog{
    width:80%;
    height:80%;
}
#datenblattm .modal-body{
    padding: 0 20px;
    position: absolute;
    top: 54px;
    bottom: 40px;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    background: #FFF;
}
#datenblattm .modal-header{
    background:#deaf30;
    padding: 10px 20px;
}
#datenblattm .modal-content{
    border-radius:0;
    height:100%;
    box-shadow:none;
    border:none;
}
#datenblattm .modal-title {
    color: #FFF;
    font-family: 'Roboto Slab', serif;
    font-size: 24px;
    font-weight: 300;
    margin:0;
}
#datenblattm .modal-footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: #444;
    padding:5px;
}
#datenblattm .modal-footer .btn{
    line-height: 26px;
    padding: 0 20px;
    font-size: 13px;
    font-weight: 300;
    background: #333;
}
#datenblattm .modal-footer .btn:hover{
    background: #deaf30;
}
/*-------------------------------------------------NAVIGATION----------------------------------------------------*/
#mainNav > .container{
    padding: 20px 0 10px;
}
#mainNav.affix .container{
    padding: 0;
}
#mainNav.affix .img-responsive{
    display:none;
}
.navbar {
    min-height: inherit;
    z-index: 100;
}
.navbar.affix-top{
    height:156px;
}
#scrollspace{
    width:100%;
}
.affix + #scrollspace{
    padding-top:180px;
}
#logo{
    display: inline-block;
}
.navbar .container {
    padding: 0;
}
.navbar-right {
    margin-right: 0;
}
.navbar-default {
    background: none;
    padding: 20px 0 0;
    transition:background 0.25s;
}
.affix .navbar-default{
    padding:0;
}
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>span {
    text-transform:lowercase;
    font-size: 1.3rem;
    font-weight: 400;
    color: #333;
    letter-spacing: 0.7px;
    line-height: 20px;
    padding: 10px;
    
    transition:none;
}
.affix .navbar-default .navbar-nav>li>a{
    color:#eee;
    text-transform: lowercase;
}
.affix .navbar-default .navbar-nav>li.active>a{
    color:#deaf30;
}
.affix .navbar-default .navbar-nav>li>span {
    color:#BBB;
}
.navbar-default .navbar-nav>li.social>a{
    margin: 0;
}
.navbar-nav>li>a,
.navbar-nav>li>span{
    display: inline-block;
    padding: 15px 21px;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
    color: #F1B821;
    background-color: transparent;
}
.navbar-default .navbar-brand {
    color: #F1B821;
    font-weight: 100;
    font-size: 38px;
    font-family: 'Satisfy', cursive;
}
.affix{
    transition:all 0.5s;
    width: 100%;
    z-index: 999999;
    top:0;
}
#top-nav{
    background-color: rgba(25, 25, 25, 0.85);
}
#top-nav span{
    font-size:11px;
    padding:2px 0 0;
    line-height:23px;
    display: inline-block;
}
#top-nav span a{
    color:#FFF;
}
.affix .phone-top{
    display:none;
}
#top-nav ul{
    list-style-type: none;
    margin:0;
    padding:0;
}
#top-nav ul li{
    display: inline-block;
    font-size: 11px;
    padding: 0 10px;
    vertical-align: top;
}
#top-nav ul li a{
    padding: 3px 0 0;
    color:#EEE;
    font-size: 11px;
    font-weight: 500;
    line-height: 23px;
}
#top-nav ul li a:hover{
    background: none;
    color: #f1b820;
}
.affix #top-nav{
    position: absolute;
    width: 100%;
}
.affix #top-nav .navbar-right{
    float:left !important;
}
.affix #top-nav ul li a{
    padding: 10px 0 7px;
}
.affix #top-nav ul li span {
    padding: 10px 0 7px;
}
.affix #top-nav .phone-top {
    display:none;
}
/*-------------------------------------------------DETAILS-------------------------------------------------------*/
#details{
    background: url(../images/order.png);
}
#details .row > div{
    padding:0;
    line-height: 0;
}
#details h2 {
    color: #666;
    font-size: 40px;
    margin: 0 0 5px;
    text-transform: lowercase;
    font-weight: 900;
}
#details h2 + p {
    font-weight:900;
    text-transform: uppercase;
    letter-spacing: 0.7px;
}
#details h3{
    font-size:15px;
    margin:10px 0 5px;
    color:#d3a31c;
    position: relative;
}
#details h3:before{
    content: "";
    background: #d3a31c;
    width: 4px;
    height: 4px;
    display: inline-block;
    margin-right: 3px;
}
#details p {
    color: #333;
    line-height: initial;
}
#details .text-wrapper {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left:45px;
    right:45px;
}
#details .side-left,
#details .side-right{
    width:50%;
    position: relative;
    display:inline-block;
    height: 600px;
}
#details .side-left{
    position: absolute;
    background-size:cover;
    background-position: center;
}
#details .side-right{
    margin-left:50%;
}
#details .einzigartig .side-left{
    background-image:url(../images/einzigartig.jpg);
}
#details .perfekt .side-left{
    background-image:url(../images/perfekt.jpg);
}
/*-------------------------------------------------CONTROLS------------------------------------------------------*/
.btn{
    width: auto;
}
.btn.pull-right{
    margin-left:20px;
 }
.btn-primary {
    color: #fff;
    background-color: #a98219;
}
.btn-primary.grey {
    color: #fff;
    background-color: #555;
}
.btn-primary:hover, .btn-primary.hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
    color: #fff;
    border-radius:0 10px 0 10px;
    background-color: #deaf30;
}
.btn-primary.grey:hover,
.btn-primary.grey.hover,
.btn-primary.grey:focus,
.btn-primary.grey:active,
.btn-primary.grey.active{
    background-color: #777;
}
.select-primary .select2-choice {
    color: #fff;
    background-color: #2b2b2b;
    border: 2px solid #444;
    border-radius: 0;
}
.select2-choice{
    padding:5px 10px;
}
.select2-display-none {
    min-width: inherit;
    background:#2b2b2b;
    border: 2px solid #f1b821;
    border-radius: 0;
}
.select.form-control, .select.select2-search input[type=text] {
    height: 46px;
    padding: 9px 16px;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    min-width: auto;
    display: block;
    width: 100%;
}
.select2-drop .select2-result-selectable .select2-result-label {
    color: #FFF;
}
.select-primary .select2-choice:hover, .select-primary .select2-choice.hover, .select-primary .select2-choice:focus, .select-primary .select2-choice:active {
    color: #fff;
    background-color: #2b2b2b;
    border-color: #F1B821;
}
.select2-drop .select2-highlighted>.select2-result-label {
    color: #fff;
    background: #F1B821;
}
.select2-drop .select2-result-selectable .select2-result-label:focus, .select2-drop .select2-result-selectable .select2-result-label:hover, .select2-drop .select2-result-selectable .select2-result-label:active {
    background-color: #F1B821;
    color:#333;
}
.select2-drop .select2-results {
    margin: -2px;
}
.form-control, .select2-search input[type=text] {
    font-family: 'Roboto', sans-serif;
    padding: 9px 20px;
    color: #333;
    border: 1px solid #CCC;
    border-radius: 0;
    line-height: 38px;
    box-shadow: 0 10px 30px -20px #696969;
}
#kontakt .form-control, .select2-search input[type=text] {
    font-family: 'Roboto', sans-serif;
    padding: 9px 50px 9px 20px;
    background: none;
    color: #333;
    border-radius: 0;
    line-height: 38px;
    box-shadow: 0 10px 30px -20px #696969;
}
.form-group.focus .form-control, .form-control:focus, .form-group.focus .select2-search input[type=text], .select2-search input[type=text]:focus {
    border-color: #F1B821;
}
.checkbox label .toggle,.checkbox-inline .toggle{margin-left:-20px;margin-right:5px; border-radius:0;}
.toggle{position:relative;overflow:hidden}
.toggle input[type=checkbox]{display:none}
.toggle-group{position:absolute;width:200%;top:0;bottom:0;left:0;transition:left .35s;/*-webkit-transition:left .35s;*/-moz-user-select:none;-webkit-user-select:none}
.toggle.off .toggle-group{left:-100%}
.toggle-on{position:absolute;top:0;bottom:0;left:0;right:50%;margin:0;border:0;border-radius:0}
.toggle-off{position:absolute;top:0;bottom:0;left:50%;right:0;margin:0;border:0;border-radius:0}
.toggle-handle{position:relative;margin:0 auto;padding-top:0;padding-bottom:0;height:100%;width:0;border-width:0 1px}
.toggle.btn{min-width:59px;min-height:34px}
.toggle-on.btn{padding-right:24px; border-radius:0; padding-left: 12px;}
.toggle-off.btn{padding-left:24px}
.toggle.btn-lg{min-width:79px;min-height:45px}
.toggle-on.btn-lg{padding-right:31px}
.toggle-off.btn-lg{padding-left:31px}
.toggle-handle.btn-lg{width:40px}
.toggle.btn-sm{min-width:50px;min-height:30px}
.toggle-on.btn-sm{padding-right:20px}
.toggle-off.btn-sm{padding-left:20px}
.toggle.btn-xs{min-width:35px;min-height:22px}
.toggle-on.btn-xs{padding-right:12px}
.toggle-off.btn-xs{padding-left:12px}
.toggle .toggle-handle{
    background:#b99123;
}
.off.toggle .toggle-handle{
    background:#666;
}
.toggle .toggle-off{
    background:#777;
}
.toggle .toggle-off:hover{
    background:#888;
}

.checkbox .icon-checked:before {
    content: "\f00c";
    font: normal normal normal 14px/1 FontAwesome;
}
.checkbox .icon-unchecked:before {
    display:none;
}
.checkbox .icons{
    font-size: 15px;
}
.checkbox .icons .icon-checked, .checkbox .icons .icon-unchecked{
    width:100%;
    height: 100%;
}
.checkbox .icons .icon-checked{
    background: #deaf30;
}
.checkbox .icons .icon-unchecked{
    background:#DDD;
}
.checkbox input[type=checkbox].custom-checkbox:checked+.icons,
.checkbox input[type=checkbox].custom-checkbox:checked+.icons .icon-checked{
    color:#FFF;
}
input[type=radio], input[type=checkbox] {
    margin: 0;
    vertical-align: middle;
}
/*-------------------------------------------------NAVIGATION----------------------------------------------------*/
#specials{
    padding:60px 0;
    background: #edb620;
    background: -moz-linear-gradient(-45deg, #edb620 0%, #bf8b09 100%);
    background: -webkit-linear-gradient(-45deg, #edb620 0%,#bf8b09 100%);
    background: linear-gradient(135deg, #edb620 0%,#bf8b09 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edb620', endColorstr='#bf8b09',GradientType=1 );
}
#specials p{
    font-size: 16px;
    font-family: 'Roboto Slab', serif;
    color: #FFF;
    font-weight: 600;
    padding: 0 20px;
}
#specials img{
    max-height:60px;
}
/*-------------------------------------------------KONTAKT-------------------------------------------------------*/
#kontakt{
    padding: 100px 0;
    background: url(../images/kontakt.jpg),#2b2b2b;
    min-height: 100%;
    background-attachment: fixed;
}
#kontakt .form-group{
    margin-bottom:20px;
    border: 1px solid #deaf30;
}
#kontakt .form-group span{
    position: absolute;
    top:0;
    right:0;
    padding: 12px 16px;
    color:#EEE;
}
#kontakt .form-control, .select2-search input[type=text] {
    color: #FFF;
}
#kontakt h2{
    color: #deaf30;
}
#kontakt h2 span{
    opacity: 0.3;
}
#kontakt .text-center{
    margin-top:0;
    text-align: left;
}
#kontakt .row .col-md-1.text-center{
    text-align: center;
}
#kontakt .col-sm-1.text-center{
    text-align: center;
}
#kontakt .text-center .frame:before,
#kontakt .text-center .frame:after,
#kontakt .text-center .frame .h2:before,
#kontakt .text-center .frame .h2:after {
    content: "";
    position: absolute;
    border-width: 1px;
    border-color: #deaf30;
    border-style: solid;
}
#kontakt p{
    color:#FFF;
    font-size: 14px;
    line-height: 1.7;
}
#kontakt .infos > p{
    margin:0;
}
#kontakt .captcha{
    padding: 0;
    border: none;
    border-radius: 0;
    width: 300px;
    background-color: transparent;
    background-image: url(../includes/captcha.php);
    background-position: top;
}
#kontakt .input-group{
    width:100%;
    border: 1px solid #deaf30;
}
#kontakt .form-control {
    height: 40px;
    border: none;
    color:#FFF;
}
#kontakt textarea.form-control {
    height:150px;
    border: 1px solid #deaf30;
    line-height: 24px;
	max-width:100%;
	min-width:100%;
}
#kontakt textarea{
    display: block;
}
#kontakt h3{
    font-size: 20px;
    color:#888;
    margin-top: 73px;
    font-weight: 400;
}
.vertical-line{
    display: inline-block;
    height: 650px;
    width:1px;
    background: -moz-linear-gradient(top, rgba(186,186,186,0) 0%, rgba(255,255,255,0.85) 29%, rgba(237,237,237,1) 34%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(top, rgba(186,186,186,0) 0%,rgba(255,255,255,0.85) 29%,rgba(237,237,237,1) 34%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom, rgba(186,186,186,0) 0%,rgba(255,255,255,0.85) 29%,rgba(237,237,237,1) 34%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bababa', endColorstr='#00000000',GradientType=0 );
}
#kontakt hr {
    border-color: #444;
}
#kontakt .gray{
    color:#CCC;
}
#kontakt .infos i{
    display:inline-block;
    width:20px;
    font-size: 13px;
    color:#f1b821;
}
#kontakt label{
    color:#CCC;
}
#kontakt .btn{
    border: 2px solid #deaf30;
    color: #deaf30;
    background: none;
    position: relative;
    overflow: hidden;
    z-index: 100;
    text-transform: uppercase;
    text-shadow: none;
    font-weight: 500;
    font-size: 15px;
}
#kontakt .btn:before {
    transition:all 0.3s;
    z-index:-1;
    left:0;
    content:"";
    top:-100%;
    position:absolute;
    width:100%;
    height:100%;
    background:#deaf30;
}
#kontakt .btn:hover{
    color:#333;
    font-weight:bold;
}
#kontakt .btn:hover:before{
    top:0;
}
#kontakt strong{
    letter-spacing:1px;
}
/*-------------------------------------------------FAQ-----------------------------------------------------------*/
#faq{
    padding: 100px 0;
    background: url(../images/order.png);
}
#faq h2{
    color: #deaf30;
}
#faq .text-center{
    text-align: left;
}
#faq .text-center .frame:before,
#faq .text-center .frame:after,
#faq .text-center .frame .h2:before,
#faq .text-center .frame .h2:after {
    content: "";
    position: absolute;
    border-width: 1px;
    border-color: #deaf30;
    border-style: solid;
}
#faq h2 span{
    opacity: 0.3;
}
.panel-group .panel{
    border-radius:0;
    box-shadow: none;
    border-color: transparent;
    background: none;
}
.label-primary {
    background-color: #666;
}
#faq p{
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
    color: #666;
}
#faq-liste{
    margin:30px 0;
}
.panel-title>a {
    color: #333;
}
#faq .panel-body .label {
    position: absolute;
    left: 15px;
    font-size: 11px;
    font-weight: 500;
    top: 19px;
    border-radius: 0;
    line-height: 16px;
    padding-top: 4px;
}
.panel-body {
    padding: 20px 30px 30px 80px;
    position: relative;
}
.btn-xs, .btn-group-xs>.btn {
    border-radius: 0;
}
#faq .btn-success {
    background-color: #F1B821;
}
#faq .btn-danger {
    background-color: #CCC;
}
#faq .btn-success:hover {
    background-color: #cc9b19;
}
#faq .btn-danger:hover {
    background-color: #AAA;
}
.panel-group .panel-footer {
    background: none;
    margin:0 15px 30px;
    padding:10px 0 0;
    border-top:1px solid #DDD;
}
.panel-group .panel-footer span.btn{
    padding-left:0;
    color:#777;cursor: initial;
}
.panel-group .panel-footer span.btn:hover{
    color:#777;
}
.panel-heading.accordion-toggle:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    right: 20px;
    width: 20px;
    height: 20px;
    display: block;
    position: absolute;
    font-size: 12pt;
    color: #FFF;
    top: 11px;
}
.collapsed.panel-heading.accordion-toggle:after {
    color:#666;
}
.panel-heading.accordion-toggle.collapsed:after {
    content:"\e080";
}
.panel-default>.panel-heading+.panel-collapse>.panel-body {
    border: none;
    font-size: 14px;
    color: #444;
}
.panel-default>.panel-heading {
    cursor: pointer;
    padding: 10px 50px 10px 15px;
    border-radius:0;
    border: none;
    position: relative;
    background:#deaf30;
}
.panel-default>.panel-heading.collapsed:hover {
    background:#deaf30;
    border-color:#deaf30;
}
.panel-default>.panel-heading.collapsed {
    background: #EEE;
    border: 1px solid #DDD;
    margin-bottom: 15px;
}
.panel-default>.panel-heading.collapsed .panel-title {
    color:#000;
}
.panel-group .panel+.panel {
    margin-top: 0;
}
.panel-title {
    font-size: 14px;
    font-weight: 400;
    color:#FFF;
    line-height: 20px;
}
.faq-thx{
    vertical-align: sub;
    margin: 0 20px;
    font-weight: 600;
    color: #775d17;
    font-size: 16px;
}
/*-------------------------------------------------IMPRESSUM-----------------------------------------------------*/
#impressum {
    font-size: 14px;
    color:#FFF;
    padding: 10px 0;
    background: url(../images/header.png),#2b2b2b;
}
.impressum h2{
    font-size: 18px;
    margin-top:0;
}
#colors{
    line-height: 0;
}
#colors span{
    width:20px;
    height:20px;
    display:inline-block;
}
/*-------------------------------------------------REGISTRIEREN--------------------------------------------------*/
#agreement{
    line-height: inherit;
    opacity:1;
    color:#333;
    font-size:13px;
    border:1px solid #CCC;
    width:100%;
    height:160px;
    overflow-y:scroll;
    padding:10px;
    margin: 10px 0 20px;
}
.passwortrichtlinien span{
    color:#999;
}
.passwortrichtlinien .red_icon,
.passwortrichtlinien .red_text{
    color:red;
}
.passwortrichtlinien .green_icon,
.passwortrichtlinien .green_text{
    color:limegreen;
}
ul.bg-danger{
    border: 1px solid red;
    padding: 10px 20px 10px 40px;
    margin: 0 0 30px;
}
ul.bg-danger .text-danger, .text-danger:hover {
    color: #e74c3c;
}
/*-------------------------------------------------LOGIN---------------------------------------------------------*/
.loginmodal-container {
    background: #EEE;
    margin-top: 100px;
    padding: 40px 40px 0;
    border-radius:15px 0 15px 0;
}
.loginmodal-container h2 {
    display: inline-block;
    color: #505050;
    font-weight: 900;
    font-size: 38px;
    margin: 0;
    padding: 2px 10px;
    font-family: 'Roboto Condensed', sans-serif;
}
.loginmodal-container label {
    text-transform: uppercase;
    font-weight: 500;
    margin: 0 0 10px;
    color: #555;
    font-size: 13px;
    line-height: 1;
}
.loginmodal-container label[for=remember] {
    margin:12px 0 0;
}
.loginmodal-container label[for=remember] input{
    vertical-align: bottom;
}
.loginmodal-container input.form-control {
    margin: 0;
}
.login-help{
    padding: 10px 40px 15px;
    margin: 30px -40px 0;
    background: #333;
    border-radius:15px 0 15px 0;
}
.login-help a{
    color:#DDD;
}
#checkout .login-help a{
    color:#777;
}
.login-help a:hover{
    text-decoration: underline;
}
.bg-danger{
    border:none;
    background:none;
}
.bg-danger .danger-inner {
    background-color: #ffeded;
    color: #333;
    border: 1px solid red;
    padding: 10px;
    margin: 0 0 20px;
}
/*-------------------------------------------------ADRESSEN------------------------------------------------------*/
.address{
    padding:10px 15px;
    background:#FFF;
    border:1px solid #DDD;
    cursor: pointer;
    margin-bottom:10px;
    display:block;
    position: relative;
}
.address:hover{
    border-color: #deaf30;
}
.address .delete{
    position: absolute;
    right:15px;
    display:none;
    width:20px;
    line-height:20px;
    text-align: center;
    top: 8px;
    font-size: 15px;
    color: #333;
    opacity: 0.5;
}
.address:hover .delete{
    display:inline-block;
}
.address .delete:hover{
    background:#DDD;
    opacity: 1;
}
/*-------------------------------------------------CONFIRM-------------------------------------------------------*/
#confirm p{
    margin:0;
}
#confirm p strong{
    margin-bottom:10px;
}
#confirm .row h4{
    font-size: 18px;
    padding: 10px;
    margin: 0 0 20px;
    border: 1px dashed #8e8e8e;
    text-align: center;
}
#confirm h5{
    color:#deaf30;
    font-size:18px;
    font-weight:500;
    margin:0px 0 6px;
}
#confirm .order-price{
    margin-top:0;
}
/*-------------------------------------------------BENUTZERKONTO-------------------------------------------------*/
#account-links{
    text-align:center;
}
#account-links a {
    display: block;
    text-align: center;
    padding: 5px;
    background: #a98219;
    vertical-align: top;
    margin-bottom:10px;
}
#account-links a:hover {
    background: #deaf30;
}
#account-links a span{
    margin-top: 10px;
    letter-spacing: 0.7px;
    color: #FFF;
    font-size: 11px;
    font-weight: 400;
    vertical-align: text-top;
    text-transform: uppercase;
}
#account-links a i{
    color:#DDD;
    font-size:20px;
    margin-right:10px;
}
.col-frame {
    border: 1px solid #DDD;
    padding: 20px 40px 40px;
    background: #FFF;
    box-shadow: 0 6px 40px -20px #000;
}
#user-account ul{
    list-style-type: none;
}
#user-account .alert{
    border: 2px solid red;
    width: 100%;
    padding: 10px;
    margin-bottom: 30px;
    color: red;
}
#user-account .alert.alert-success{
    border: 2px solid green;
    color: green;
}
/*-------------------------------------------------IHRE BESTELLUNGEN---------------------------------------------*/
#ihre-bestellungen h4{
     color:#777;
	word-break:break-word;
 }
#ihre-bestellungen .text-center{
    margin-bottom:60px;
 }
#ihre-bestellungen h4 span{
    color:#deaf30;
}
#ihre-bestellungen table{
    width:100%;
}
#ihre-bestellungen .accordian-body table tr td + td{
    padding:0 5px 10px;
}
#ihre-bestellungen .accordion-toggle + tr td{
    padding:0 0 10px;
}
#ihre-bestellungen .accordion-toggle + tr td > div{
    border: 2px dashed #deaf30;
    background: none;
    padding: 5px 20px 10px;
    margin: 20px -1px 15px 0;
}
#ihre-bestellungen .table,
#ihre-bestellungen table tbody,
#ihre-bestellungen table tr,
#ihre-bestellungen table tr td{
    background:none;
}
#ihre-bestellungen .table > tbody > tr.accordion-toggle.collapsed{
    background:#FFF;
    border:1px solid #DDD;
    background:none;
    color:#333;
    border-bottom-width: 3px;
    border-bottom-color: #CCC;
}
#ihre-bestellungen .table > tbody > tr.accordion-toggle{
    cursor: pointer;
    background: #666;
    color: #FFF;
    border: 1px solid #666;
}
#ihre-bestellungen .table > tbody > tr.accordion-toggle > td{
    padding:16px 8px;
}
#ihre-bestellungen .table > thead > tr > th:first-child,
#ihre-bestellungen .table > tbody > tr > td:first-child{
    padding-left:20px;
}
#ihre-bestellungen .table > tbody > tr > td.hiddenRow{
    padding-left:0;
}
#ihre-bestellungen .eckenrunden{
    display:inline-block;
    position: relative;
    margin-right:5px;
}
#ihre-bestellungen .eckenrunden:after{
    content:",";
}
#ihre-bestellungen .eckenrunden:last-child{
    margin:0;
}
#ihre-bestellungen .eckenrunden:last-child:after{
    display:none;
}
/*-------------------------------------------------LINEPAINTER---------------------------------------------------*/
#linepainter .logo-wrap {
    position: absolute;
    z-index: 99999999;
    top: 50%;
    left: 50%;
    width: 35%;
    -ms-transform: translate(-50%,-50%); /* IE 9 */
    -webkit-transform: translate(-50%,-50%); /* Chrome, Safari, Opera */
    transform: translate(-50%,-50%);
}
#linepainter {
    display:none;
    position: fixed;
    z-index: 99999999;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background: #ffffff;
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #dddddd 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#dddddd 100%);
    background: radial-gradient(ellipse at center, #ffffff 0%,#dddddd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dddddd',GradientType=1 );
}
/*-------------------------------------------------FOOTER--------------------------------------------------------*/
#footer{
    background:url(../images/footer.png);
    padding-top:40px;
    padding-bottom:60px;
    color:#FFF;
}
#footer h3{
    margin-top: 0;
    position: relative;
    color: #CCC;
    font-size: 16px;
}
#footer h3:before{
    content:"";
    margin-right:3px;
    display:inline-block;
    width:4px;
    height:4px;
    background:#FFF;
}
#footer i.fa{
    font-size: 35px;
    margin-right: 10px;
}
#footer .bottom a{
    color:#FFF;
    transition:all 0.3s;
}
#footer .bottom a:hover{
    color:#deaf30;
}
#footer p{
    color:#BBB;
    font-size: 12px;
}
.name{
    font-family:'Roboto Slab',sans-serif;
    font-size:16px;
    font-weight:bold;
    color:#deaf30;
}
#footer hr{
    border-color:#444;
    margin:20px 0;
}
footer span{
    margin:0 5px;
    display: inline-block;
    width: 2px;
    background: #1f1f1f;
    height: 20px;
}
#footer .social i.fa{
    font-size:20px;
    padding:5px;
    margin:5px;
}
#footer .social a{
    color:#FFF;
}
#footer .social a.facebook:hover{
    color:#4567AC;
}
#footer .social a.twitter:hover{
    color:#1DA1F2;
}
#footer .social a.google:hover{
    color:#DD5144;
}
#footer .facbeook div:hover{
    color:blue;
}
#footer .top p{
    margin:0;
    white-space: nowrap;
}
#footer .kern{
    font-family: 'BellGothic',sans-serif;
    font-size: 22px;
}
#footer .kern:hover{
    color:#63A60E;
}
#footer .bottom .icons img{
    margin-right:30px;
    margin-bottom:20px;
    display: inline-block;
    /*opacity: 0.5;*/
	width:74px;
}
#footer .bottom .icons img:hover{
    opacity: 1;
}
#footer .container-fluid{
    border:none;
}
footer a {
    font-weight: 400;
    color: #777;
}
#cookie {
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    z-index: 999999999;
    padding: 20px;
    border: 5px solid #FFF;
    background: #edb620;
    background: -moz-linear-gradient(-45deg, #edb620 0%, #bf8b09 100%);
    background: -webkit-linear-gradient(-45deg, #edb620 0%, #bf8b09 100%);
    background: linear-gradient(135deg, #edb620 0%, #bf8b09 100%);
    box-shadow: 0 5px 30px -10px #000;
}
#cookie p{
    margin:0;
    font-size:14px;
    font-weight:500;
}
#cookie a{
    color:#FFF;
}
#cookie-closer{
    float:right;
    cursor: pointer;
    padding:6px 10px;
    color:#333;
    font-size:14px;
    font-weight:500;
    border:1px solid #333;
    background:#FFF;
}
#cookie-closer:hover{
    color:#FFF;
    background:#333;
}
.muster{
    padding:20px;
    background:#EEE;
    border:1px solid #DDD;
}
.muster p{
    margin:0;
}
.checkbox{
    padding-left:22px;
    position: relative;
}
.checkbox label input{
	height: 5px;
    width: 5px;
}
.checkbox > label > span{
    position: absolute;
    left:0;
    height:15px;
    width:15px;
    display:block;
    top:0;
    background:#FFF;
    border:2px solid #666;
	/*display:none;*/
}
.checkbox input[type=checkbox]:checked + span{
    border-color:#deaf30;
}
.checkbox input[type=checkbox]:checked + span:after{
    font-family: FontAwesome;
    content: "\f00c";
    top: -4px;
    position: absolute;
    font-size: 16px;
    color: #a98422;
}
.checkbox input[type=checkbox]:checked + span:before{
    content: '';
    background: white;
    position: absolute;
    right: -4px;
    top: -2px;
    width: 7px;
    height: 10px;
}
#lightbox .modal-content {
    display: inline-block;
    text-align: center;
}
#lightbox .modal-text{
    position: absolute;
    bottom: 75px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 20px 10px 20px;
    font-size: 18px;
    font-weight: 500;
    left: 30px;
    line-height: 22px;
    max-width: 45%;
    text-align: left;
    border: 2px solid #deaf30;
    color: #333;
    text-transform: uppercase;
    letter-spacing: -1px;
}
#lightbox .close {
    opacity: 1;
    color: rgb(255, 255, 255);
    background-color: rgb(25, 25, 25);
    padding: 5px 8px;
    border-radius: 30px;
    border: 2px solid rgb(255, 255, 255);
    position: absolute;
    top: -15px;
    right: -55px;
    z-index:1032;
}
#lightbox .modal-content{
    border-radius:0;
}
.modal-body{
    padding:2px;
}
#lightbox .close {
    opacity: 1;
    color: rgb(255, 255, 255);
    background-color: #333;
    border-radius: 0;
    position: absolute;
    top: -15px;
    right: -15px;
    z-index: 1032;
    padding: 0;
    width: 30px;
    height: 30px;
    border: 1px solid #deaf30;
}
#lightbox .close:hover {
    background-color: #deaf30;
}
.modal-dialog{
}
.modal.in .modal-dialog{
    position: fixed;
    margin:0;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: initial;
}
.modal.fade .modal-dialog{
    transition: initial;
}
@keyframes slideInFromRight1200 {
    0% {
        width:0;
    }
    100% {
        width:150px;
    }
}
@media (orientation:portrait){
    #kontakt{
        min-height:initial;
    }
    #faq {
        min-height: initial;
    }
    #wunsch-briefbogen {
        min-height: initial;
    }
}
/*Papierauswahl Feld Eigenschaften 100%*/
#params .pull-left{
width:100%;
}
/*Scrollbar für #papierauswahl*/
#papierauswahl {
    overflow: auto;
}
/*Länderauswahlfelder in usersc/order.php*/
#del_country{
	display:none;
}
#pay_country{
	display:none;
}
#country-gast{
	display:none;
}
#country-gast-ra{
	display:none;
}
#country{
display:none;
}
tr.collapse.in{
	display:block;
}
tbody.collapse.in{
	display:block !important;
}
td.hiddenRow{
	width:90%;
}
.row .platzhalter{
	margin-left: 0px;
	margin-right: 0px;
}
/*------------------------------------------MediaScreen MAX-MIN--------------------------------------------------------------------*/
@media only screen and (max-width: 853px) and (min-width: 768px){
	#button-screen-small .btn{
		width:100%;
		display:block;
		margin-top:10px;
	}
}
@media only screen and (max-width: 810px) and (min-width: 768px){
	#paper-result .col-sm-8{
		width: 100% !important;
	}
	.col-sm-4 {
    	width: 100%;
	}
	.social{
		display:none !important;
	}
}
/*------------------------------------------MediaScreen MIN--------------------------------------------------------------------*/
@media (min-width: 768px){
    body {
        margin-top: 120px;
    }
    .modal-dialog {
        width: 400px;
        margin: 30px auto;
    }
	#pw-reg-small-screen{
		display:none;
	}
}
@media only screen and (min-width: 700px){
	#table-small{
		display:none;
	}		
}
/*------------------------------------------MediaScreen MAX--------------------------------------------------------------------*/
@media (max-width:1200px){
    .banner div.slogan span {
        font-size:22px;
    }
    #folie_loupe {
        left:0;
    }
    #lochen_loupe {
        left: 0;
        width: 320px;
    }
    #praegung_loupe {
        right: 0;
    }
    #runden_loupe {
        left: 50px;
    }
    #farben_loupe {
        width: 240px;
    }
    #farben_loupe:before{
        animation: 1s ease-out 4s forwards slideInFromRight1200;
    }
}
@media only screen and (max-width: 1199px) {
 	.preview {
		padding-bottom: 170%;
	}
}
@media (max-width:991px){
    #kontakt .infos h3{
        margin-top:30px;
    }
    #kontakt .vertical-line{
        margin-top:30px;
    }
    .navbar.affix-top {
        text-align:center;
    }
    .affix-top .navbar-header{
        float:none;
    }
    .affix-top .navbar-default{
        float:none !important;
        text-align: center;
        padding: 0;
    }
    .affix-top .navbar-nav {
        margin: 0;
        display: inline-block;
        float: none;
    }
    #mainNav.affix .container {
        padding: 0 10px;
    }
    .affix-top #top-nav{
        padding:0 10px;
    }
    .navbar.affix-top {
        height: initial;
    }
    #top-nav span {
        float: left;
    }
    .affix #top-nav span {
        display:inline-block;
        margin-left:10px;
    }
    .container-fluid {
        border:none;
    }
    #details .perfekt .side-right {
        margin-left: 0;
    }
    #details .perfekt .side-left {
         right: 0;
     }
    .side-left .shadow{
        display: block;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }
    #details .side-left, #details .side-right{
        height:100%;
    }
    #details .text-wrapper {
        padding: 40px;
        position: relative;
        transform: inherit;
        left: inherit;
        right: inherit;
    }
    .container{
        width:100%;
        padding: 0 60px;
    }
    #kontakt{
        padding: 50px 0 0;
    }
    #faq {
        padding:50px 0 80px;
    }
    #wunsch-briefbogen {
        padding: 60px 0;
    }
    .preview {
        padding-bottom: 0;
    }
    .preview-inner {
        position: relative;
    }
    #specials p {
        font-size: 14px;
        padding: 0;
        margin:0;
    }
    .dashed-line{
        display:none;
    }
    .vertical-line {
        display: inline-block;
        height: 1px;
        width: 100%;
        background: -webkit-linear-gradient(left, rgba(186,186,186,0) 0%,rgba(255,255,255,0.85) 29%,rgba(237,237,237,1) 34%,rgba(0,0,0,0) 100%);
        background: linear-gradient(to right, rgba(186,186,186,0) 0%,rgba(255,255,255,0.85) 29%,rgba(237,237,237,1) 34%,rgba(0,0,0,0) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00bababa', endColorstr='#00000000',GradientType=0 );
    }
    #kontakt h3 {
        margin-top: 0;
    }
    #kontakt .infos{
        margin-bottom:60px;
        text-align: center;
    }
	.small.order-link button{
		display:none;
	}
	#briefbogen{
		padding-bottom: 10px;
	}
    .container {
        padding: 0 30px;
    }
}
@media only screen and (max-width: 975px) {
	#footer .top > div{
        text-align: center;
        padding-bottom: 20px;
    }
	#footer .top > div .pull-left {
    	float: none !important;
    	margin: 0 0 10px;
	}
	#footer .col-sm-3 {
		width:100%
	}
}
@media only screen and (max-width: 900px){
	.paper-close{
		display: none;
	}	
}
@media (max-width: 767px){
    #sidebar{
        padding:0;
        margin-bottom:20px;
    }
    #top-nav span {
        line-height: 40px;
    }
	 li.social {
    display: none;
}	
    h1.vertical{
        display:none;
    }
    .text .border-left {
        border-left: none;
    }
		#pw-reg-big-screen{
		display:none;
	}
		#pw-reg-small-screen{
		display:block;
	}
	#checkout .login-help {
		margin: -2px 0 0 15px;
	}
	.col-sm-9 #resultpi{
		padding-top: 30px;
	}	
	#paperlist{
		height:293px
	}
    .footer-nav{
        text-align: center;
    }
    .form-control, .select.form-control, .select.select2-search input[type=text] {
        height: 34px;
        padding: 0 10px;
        font-size:13px;
    }
    #briefbogen{
        background:#EEE;
        padding:0;
    }
    #briefbogen .welcometext{
        position: absolute;
        top: 36%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 260px;
        font-size: 15px;
    }
    .welcometext hr{
        border-color:#777;
    }
    div#briefbogen:before{
        z-index: -1;
    }
    .affix .navbar-default .navbar-nav>li.active>a {
        color: #FFF;
    }
    #wunsch-briefbogen h3{
        width:initial;
    }
    #closemenu{
        display: inline-block;
        float: right;
        background: #444;
        color: #FFF;
        font-size: 13px;
        cursor: pointer;
        margin: 0 auto;
        padding: 5px 20px;
    }
    #footer .top > div.social{
        padding-bottom: 0;
    }
    #specials {
        padding: 10px 0 30px;
    }
    #specials p img {
        margin: 20px 0 10px;
        height: 50px;
    }
    .affix-top .navbar-nav {
        float: right;
    }
    .affix-top.navbar .container>.navbar-header{
        margin:0;
    }
    #details .side-right {
        margin-left: 0;
    }
    #details .side-left, #details .side-right {
        width: 100%;
    }
    #details .side-left{
        height: 100px;
        background-position: right center;
    }
    #details .text-wrapper {
        padding: 20px 30px;
    }
    #details h2 {
        padding:0 10px;
        color: #FFF;
        opacity: 0.8;
    }
    #details h2 + p {
        padding:0 10px;
        margin-bottom: 40px;
        color: #FFF;
    }
    #details .text-wrapper > div{
        display:inline-block;
        vertical-align: top;
        width:33.33333%;
        padding:10px;
    }
    .navbar-toggle {
        height: 34px;
        line-height: 34px;
        width: 34px;
        text-align: center;
        padding: 0;
        margin: 5px 10px;
        color: #FFF;
        border-radius: 2px;
        position: absolute;
        right: 0;
        top:0;
        opacity: 0.75;
    }
    .navbar-toggle:hover{
        opacity:1;
    }
    #top-nav{
        height:44px;
    }
    .affix .navbar-toggle {
        border: none;
        margin: 5px;
        padding: 0 10px;
        width: auto;
    }
    .navbar-toggle .icon-bar {
        background-color: #FFF;
        display: block;
    }
    .affix-top .navbar-toggle .icon-bar {
        background-color: #FFF;
        margin-left: auto;
        margin-right: auto;
    }
    .affix-top .navbar-default ul.navbar-nav {
        width: 100%;
        text-align: left;
    }
    .navbar-toggle:before{
        display: none;
    }
    #mainNav.affix .container {
        padding: 0;
    }
    .navbar .container>.navbar-header{
        margin:0;
    }
    .navbar-default ul.navbar-nav {
        margin: 0;
    }
    .navbar-default .navbar-nav>li>a:before {
        content: "";
        width: 4px;
        height: 4px;
        position: relative;
        background: #FFF;
        right: initial;
        display: inline-block;
        margin-right: 3px;
    }
    .navbar-default .navbar-nav>li.active>a,
    .navbar-default .navbar-nav>li.active>a:hover, .navbar-default .navbar-nav>li.active>a:focus,
    .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
        color: #FFF;
        background:#deaf30;
    }
    .navbar-default .navbar-nav>li>a {
        display: block;
        background:#333;
        transition: all 0.3s;
        font-weight:bold;
        font-size:14px;
        color: #FFF;
        text-transform: lowercase;
        margin:0;
    }
    .navbar .container>.navbar-collapse{
        border: none;
        position: absolute;
        width: 100%;
        margin: 0;
        left: 0;
        top: 44px;
    }
    .affix.navbar .container>.navbar-collapse{
        top:40px;
    }
    .icons{
        text-align:center;
        margin:0 6px 6px 0;
    }
	#small-bb{
		margin-top:-110px;
	}
}
@media only screen and (max-width: 700px){
	#ihre-bestellungen .accordion-toggle + tr td > div{
		display:none;
	}
	#table-big{
		display:none
	}
	#inhalt-zusammen{
		display:flex;
		border:1px solid #000;
		margin: 10px 0;
		padding:20px;
	}
	.table-sort{
		width: 20%;
	}
	.table-sort p:last-child{
		margin:0;
	}
	.table-sort-zwei p:last-child{
		margin:0;
	}
}
@media (max-width: 550px) {
    .footer-nav{
        margin:20px 0 30px;
    }
    #footer{
        padding-bottom:0;
    }
    #details .text-wrapper {
        padding: 10px 15px;
    }
    .container {
        padding: 0 15px;
    }
    .headline .h1{
        font-size:24px;
    }
    #wunsch-briefbogen {
        padding: 30px 0;
    }
    #specials p {
        font-size: 11px;
        padding: 0;
        font-weight: 400;
        margin: 0;
    }
    #faq h2,#kontakt h2,#wunsch-briefbogen h2 {
        font-size: 24px;
    }
    #specials p img {
        margin: 20px 0 10px;
        height: 35px;
    }
    #details .text-wrapper > div{
        width:100%;
    }
    .affix-top #top-nav {
        padding: 0 20px;
    }
    #logo img{
        max-width: 300px;
    }
    #details .text-wrapper > div {
        padding: 0 10px;
    }
    #details h3 {
        margin: 0 0 5px;
    }
    footer .col-xs-5,footer .col-xs-7{
        width:100%;
        text-align: center;
    }
    footer .col-xs-5{
        margin-bottom:5px;
    }
    .headline .h1, .headline h1, .headline .h2, .headline h2{
        font-size:24px;
    }
    #confirm .text-center, #checkout .text-center{
        margin-bottom:10px;
    }
    footer{
        position: relative;
    }
	.headline{
		margin:0 0 0 20px !important;
	}
	#uploader{
		margin:0 20px;
	}
}
/*Tabelle Responsiv*/
@media only screen and (max-width: 540px){
	.RespTable, .RespTable thead, .RespTable tbody, .RespTable tr, .RespTable th, .RespTable td {
		display: block;
	}	 
	.RespTable thead {
		position: absolute;
		top: -1111px;
		left: -1111px;
	} 
	.RespTable td::before {
		float: left;
		padding: 0 15px 9px 0;
		content: attr(data-label);
		font-weight: bold;
		width: 69px;
		margin-right: 17px;
	}
	.RespTable td:nth-child(1) {
		display:none;
		}
	.RespTable td:last-child {
		border-bottom: 5px #deaf30 solid;
	}
	.oddRow {
		background: #fff;
	}
	.oddCol {
		background: #f5f8fd;
	}	
	#paper-result table.dataTable tbody td {
		height: 36px;
	}
	#paper-result .btn {
		float: right;
	}
	#papierauswahl #papertable_paginate span {
		display: block;
	}
	.tdgra {
		text-align: inherit;
	}	
	#papertable_filter label input {
		width: 100%;
	}
}
@media only screen and (max-width: 500px){
	#kontakt .captcha {
        display: block;
        height: 40px;
        width: 100%;
        clear: both;
	}
}
@media only screen and (max-width: 490px){
	#screen-responive img{
		width:100%;
	}
}
@media (max-width: 420px){
    #logo img {
        max-width: 250px;
        margin: 10px 0;
    }
    #wunsch-briefbogen-scroll span{
        font-size:12px;
    }
    #wunsch-briefbogen-scroll{
        width:280px;
    }
    .row.bottom{
        margin-bottom:30px;
    }
}


/*********************************
Cookie-Banner
*********************************/
#open_preferences_center {
	width: 50px;
  height: 50px;
  position: fixed;
  bottom: 0px;
  left: 40px;
  z-index: 5000;
  background-image: url("https://www.kern.gmbh/webshop/img/cookie_manager_40x40px.png");
  background-repeat: no-repeat;
  background-position: center;
}