/* CSS Document ---------------------------------------------------

Created by:			.eyecatcher ag
For:				Parkhuus Restaurant
Date of creation:	02-03-2016 (tkn)
Last update:		tt-mm-jjjj

------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600');
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond');
@import url(font-awesome.min.css);

/*GRUNDRASTER
----------------------------------------------------------------- */

body, html, *{margin:0; padding:0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
body, html {width:100%; height: 100%; font-family: 'Source Sans Pro', sans-serif; color:#333; font-size:17px; line-height:1.2;}
body {background: url("../../images/pattern.gif") top center repeat; background-attachment: fixed; background-size: 60px;}

div {display: block;}

.right {float: right;}
.left {float: left;}
.clearfix {clear: both;}
.hide {display: none;}


.content {width: 60em; margin: 0 auto;}

ul.lang {float: right;}
ul.lang li {display: inline-block; padding: 0.5em;}



/*TYPO
----------------------------------------------------------------- */

h1 {font-family: 'Cormorant Garamond', serif; font-size: 3em; font-weight: 400; margin: 0 0 .5em; line-height: 1.15;}
h2 {font-family: 'Cormorant Garamond', serif; font-size: 2.75em; font-weight: 400; margin: 0 0 .5em; line-height: 1;}
h3 {font-family: 'Source Sans Pro', sans-serif; font-size: 1em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 .75em;}
h4 {font-family: 'Source Sans Pro', sans-serif; font-size: 1.25em; font-weight: 300; margin: 0 0 1.5em; line-height: 1.4em;}
h5 {font-family: 'Source Sans Pro', sans-serif; font-size: 1.5em; font-weight: 600; margin: 0 0 1em; line-height: 1.4em;}
h6 {font-family: 'Source Sans Pro', sans-serif; font-size: 1.25em; font-weight: 600; margin: 0 0 1.5em; line-height: 1.4em;}
p, li {font-weight: 300; line-height: 1.3;}
.teaser-box p, .info-box p {font-size: 1.1em; font-weight: 300; margin: 0 0 1.5em; line-height: 1.4em;}
small {}
strong {font-weight: 600;}

li{margin: .25em 0 .25em 1em;}
.teaser-box li, .info-box li {font-size: 1.125em;  line-height: 1.4em;}

a {outline: none; color: #c55265; font-weight: 600;}
a img {border: none;}
a:hover {color: #ae4859;}

span.anchor { display: block; position: relative; top: -4em; visibility: hidden;}

.text-align-center {text-align: center;}
.text-align-left {text-align: left;}
.text-align-right {text-align: right;}


/*SPALTEN SYSTEM
----------------------------------------------------------------- */

.row {clear: both; display: block; margin-left: -15px; margin-right: -15px;}
.row:after { content: " "; display: block; clear: both;}

.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col2-3,
.col2-5,
.col3-4,
.col3-5,
.col4-5,
.col5-6 {min-height: 1px; padding-left: 15px; padding-right: 15px; float: left; position: relative;}

.col1 {width:100%;}
.col2 {width:50%;}
.col3 {width: 33.3333%;}
.col4 {width: 25%;}
.col5 {width: 20%;}
.col6 {width: 16.6667%}
.col2-3 {width: 66.6666%;}
.col2-5 {width: 40%;}
.col3-4 {width: 75%;}
.col3-5 {width: 60%;}
.col4-5 {width: 80%;}
.col5-6 {width: 83.3335%;}


/*NAV
----------------------------------------------------------------- */
.nav{width: 54em; position: relative; transition: .5s ease; -ms-transition: .5s ease; -webkit-transition: .5s ease; }
.nav-container{text-align: center; overflow: hidden;}
.nav a{display: inline-block; margin: 0 2em; padding: 1em 0em 0.25em; border-bottom: 2px solid transparent; text-transform: uppercase; font-weight: 600; text-decoration: none; color: #fff; letter-spacing: 1px; transition: .3s ease; -ms-transition: .3s ease; -webkit-transition: .3s ease; cursor: pointer;}
.nav a:hover{border-bottom: 2px solid #fff;}
.nav a.active{border-bottom: 2px solid #fff;}

.header-small .nav a{color: #000;}
.header-small .nav a:hover{color: #c55265; border-bottom: 2px solid transparent;}
.header-small .nav a.active{color: #c55265; border-bottom: 2px solid #c55265;}

.is-sticky .nav{z-index: 999; background: #fff; -webkit-box-shadow: 0px 15px 40px 0px rgba(0,0,0,0.15); -moz-box-shadow: 0px 15px 40px 0px rgba(0,0,0,0.15); box-shadow: 0px 15px 40px 0px rgba(0,0,0,0.15);}
.is-sticky .nav a{color: #000; padding-bottom: 0.75em;}
.is-sticky .nav a:hover{color: #c55265;}
.is-sticky .nav a.active{color: #c55265; border-bottom: 3px solid #c55265;}

.hamburger{ display: block; position: fixed; top: 1em; left: 1em; color: #fff; z-index: 999; height: 2em; width: 2em; background: #fff; padding: 0.25em; display:none;}
.hamburger span{ width: 1.5em; height: 2px; background: #333; display: block; position: absolute;  transition: .3s ease; -ms-transition: .3s ease; -webkit-transition: .3s ease;}
.hamburger span:nth-child(1){ top: 30%;}
.hamburger span:nth-child(2){ top: 45%;}
.hamburger span:nth-child(3){ top: 62.5%;}
.hamburger.open span:nth-child(1){ top: 15%;}
.hamburger.open span:nth-child(3){ top: 75%;}




/*ELEMENTS
----------------------------------------------------------------- */
.lang{ display: block; position: absolute; top: 2em; right: 1em; color: #fff; z-index: 99; }
.lang li{ margin: 0 0 0 .5em; padding-bottom: 0.25em; display: inline-block; font-weight: 600; border-bottom: 2px solid transparent; cursor: pointer; text-transform: uppercase;}
.lang li a{  color: #fff; text-decoration: none;}
.lang li.active, .lang li:hover{ border-bottom: 2px solid #fff; }

section{ width: 100%; height: auto; display: block; position: relative; overflow: hidden; }
section>.container{ width: 58em; height: 100%; padding: 4em 2em; margin: 0 auto; position: relative;}
section .container:after{ content: " "; display: block; clear: both;}
section img.bg-img{ display: block; min-width: 100%; height: auto; position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); }
div.fixed-background{ background-position: top center; background-repeat: no-repeat; background-attachment: fixed; background-size: 100em;}



/* HEADER */
section.header{ height: 45em; text-align: center; color: white; background: rgba(0,0,0,0.25)}
section.header .container{ position: relative; opacity: 1; transition: .3s ease; -ms-transition: .3s ease; -webkit-transition: .3s ease; }
section.header .container img{ display: inline-block; }
section.header .container .logo{ margin: 1em; height: 3.5em;}
section.header .container #vid { margin: 4em 0 2em; cursor: pointer; }
section.header .container h1 {margin: 3em 0 0.5em;}
section.header.home .container h1 {margin: 0.5em 0 0;}
section.header .container a.button { margin: 1.5em 0 2em; }
section.header .thumbnails { width: 46em; position: absolute; bottom: 1em; left: 50%; transform: translateX(-50%);-ms-transform: translateX(-50%);-webkit-transform: translateX(-50%); z-index: 50;}
section.header .thumbnails:after { display: block; content: " "; clear: both;}
section.header .thumbnails a{ width: 33%; padding-top: 56%; display: block; float: left; margin: 0; padding: 0 .5em; transform: translateY(2em);-ms-transform: translateY(2em);-webkit-transform: translateY(2em); transition: .3s ease; -ms-transition: .3s ease; -webkit-transition: .3s ease; position: relative;}
section.header .thumbnails.open a{ transform: translateY(7em);-ms-transform: translateY(7em);-webkit-transform: translateY(7em);}
section.header .thumbnails a:hover{ cursor: pointer; transform: translateY(0em);-ms-transform: translateY(0em);-webkit-transform: translateY(0em);}
section.header .thumbnails.open a:hover{ cursor: pointer; transform: translateY(1em);-ms-transform: translateY(1em);-webkit-transform: translateY(1em);}
section.header .thumbnails a img{ width: 100%;}
section.header .inner-shadow{ width: 100%; height: 5em; position: absolute; z-index: 2; bottom:0; background: url("../../images/inner-shadow.png") bottom repeat-x; opacity: 0.4; pointer-events: none; }

section.header-small { height: auto; text-align: center; color: #000;}
section.header-small .container img{ display: inline-block; }
section.header-small .container .logo{ margin: 1em; }
section.header-small .container h2{ margin: 1.5em 0 1em; }


/* YOUTUBE PLAYER */
section .player{ opacity: 0; pointer-events: none; width: 60%; height: 30%; background: #000; position: absolute; top: 50%; left: 50%; z-index: 101; transition: .5s ease; -ms-transition: .5s ease; -webkit-transition: .5s ease; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);}
section .player div, section.header .player div iframe{ width: 100%; height: 100%;}
section .player .closePlayer{ padding: .375em; display: inline-block; position: absolute; top: 0.75em; right: 0em; color: #333; background: #fff; z-index: 103; transform: translate(-50%, 0em);-ms-transform: translate(-50%, 0em);-webkit-transform: translate(-50%, 0em); font-weight: 600; cursor: pointer; line-height: 1em; font-size: 1em;}
section .player .closePlayer:hover{ opacity: 1;}
section .player.open{ opacity: 1; pointer-events: auto; width: 100%; height: 100%; }
section.header .container.opacity{ opacity: 0; pointer-events: none; }



/* TEASER BOX */
section.single-section{height: 40em;}
section.single-section .teaser-box{top: 50%; transform: translateY(-50%);-ms-transform: translateY(-50%);-webkit-transform: translateY(-50%);}

section.teaser-section>.container{padding: 4em 2em;}

.teaser-box {width: 26.5em; min-height: 24.5em; margin: 0 0 1em; background: transparent; position: relative; overflow: hidden; z-index: 1;}
.teaser-spacer {width: 26.5em; height: 3em; margin: 0 0 1em; background: transparent; position: relative;}

.teaser-box .container { top: 0; position: relative; width: 100%; height: 100%; min-height: 26.5em; bottom: auto; padding: 2.5em 2.5em;}
.teaser-box.color .container, .teaser-box.img .container { top: auto; bottom: 0; min-height: 0; position: absolute; height: auto; padding: 2.5em;}
.teaser-box .container h2 {margin-bottom: 0.25em;}
.teaser-box a.button {margin: 0;}
.teaser-box p:last-child {margin: 0;}

.teaser-box.text {background: white;}
.teaser-box.color {background: white;}
.teaser-box.color.blue { color: #fff; background: #55688b;}
.teaser-box.color.red { color: #fff; background: #c55265;}
.teaser-box.shop {background: white;}
.teaser-box.shop h2 {font-size: 2.25em; margin: 0 0 0.375em;}
.teaser-box.shop a.button {position: absolute; bottom: 2.5em;}
.teaser-box.shop img {position: absolute; bottom: 0em; width: 100%; height: auto;}
.teaser-box.img {color: #fff;}
.teaser-box.img:before{ content: " "; display: block; width: 100%; height: 100%; background: url('../../images/teaser_img_shadow.png') bottom center repeat-x; position: absolute; z-index: 1; opacity: 0.6; }
.teaser-box.img .container{ z-index: 2;}
.teaser-box.img img.bg-img{ display: block; min-height: 100%; min-width: auto; width: 100%; height: auto; z-index: 0;}


/* INFO BOX */
.cover-header{transform: translateY(-11em);-ms-transform: translateY(-11em);-webkit-transform: translateY(-11em); z-index: 50; margin-bottom: -11em;}
section.info-section>.container{padding: 4em 2em 2em;}

.info-box {width: 26.5em; min-height: 26.5em; margin: 0 0 10em 0; background: transparent; position: relative; overflow: hidden; z-index: 1;}
.info-row:after {content:" "; display: block; clear:both;}

.info-box .container {width: 100%; height: 100%; min-height: 26.5em; padding: 2.5em;}
.info-box a.button {margin: 0;}
.info-box p:last-child {margin: 0;}

/*.info-box.img.right {transform: translateX(-1em);-ms-transform: translateX(-1em);-webkit-transform: translateX(-1em);}
.info-box.img.left {transform: translateX(1em);-ms-transform: translateX(1em);-webkit-transform: translateX(1em);}
.info-box.text.right {transform: translate(-1em, 3em);-ms-transform: translate(-1em, 3em);-webkit-transform: translate(-1em, 3em);}
.info-box.text.left {transform: translate(1em, 3em);-ms-transform: translate(1em, 3em);-webkit-transform: translate(1em, 3em);}*/

.info-box.img.right {transform: translateX(-1.5em);-ms-transform: translateX(-1.5em);-webkit-transform: translateX(-1.5em);}
.info-box.img.left {transform: translateX(1.5em);-ms-transform: translateX(1.5em);-webkit-transform: translateX(1.5em);}
.info-box.text.right {transform: translate(-1.5em, 4em);-ms-transform: translate(-1.5em, 4em);-webkit-transform: translate(-1.5em, 4em);}
.info-box.text.left {transform: translate(1.5em, 4em);-ms-transform: translate(1.5em, 4em);-webkit-transform: translate(1.5em, 4em);}

.info-box.text {background: white;}
.info-box.img img{ display: block; height: auto; width: 100%;}


/* EVENT BOX */
.event-box{}
.event-box>.container {min-height: 0em;}

.event-box>.container .more-text{ height: auto; overflow:hidden; text-overflow:ellipsis; margin-bottom: .5em; display: inline-block; transition: .3s ease; -ms-transition: .3s ease; -webkit-transition: .3s ease; position: relative; }
.event-box>.container .more-text.is-closed{ height: 4em;}
.event-box>.container .more-text.is-closed::after{ display: block; content:" "; position: absolute; width: 100%; height: 100%; top:0; left:0; background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 60%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 60%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 60%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */}

.event-box .more-info {color: #c55265; padding-bottom: .0625em; border-bottom: 1px solid #c55265; text-transform: uppercase; font-weight: 700;cursor: pointer;}
.event-box .more-info::after {content:" "; display: block; clear: both;}
.event-box .more-info::before {color: #c55265; content: "-"; display: block; margin: 0 .25em 0 0; float: left;}
.event-box .more-info.is-closed::before {content: "+";}

.event-box .event-details-block {font-size: 0.875em; margin: 0 0 .75em;}
.event-box .event-details-block i, .event-box .event-dates .date i {float: left;}
.event-box .event-details-block span, .event-box .event-dates .date span {display: block; margin-left: 1.75em; width: 80%;}
.event-box .event-details-block span {margin-left: 2em;}

.event-box .event-dates {}
.event-box .event-dates .date { border-bottom: 1px solid #ddd; padding: 1em 2.5em;}
.event-box .event-dates .date:first-of-type { border-top: 1px solid #ddd;}
.event-box .event-dates .date a { text-transform: uppercase; float: right; display: inline-block;}
.event-box .event-dates .date span {width: auto;}


/* INSTAFEED */
section.instafeed{ position: relative; padding: 0; overflow: visible;}
section.instafeed .container{ width: 100%; max-width: 80em; padding: 0;}
section.instafeed #instagram-container{}
section.instafeed #instagram-container .instagram-block {overflow: visible; padding: 25% 0 0 0; float: left; position: relative; width: 25%;}
section.instafeed #instagram-container .instagram-block .container {width: 100%; height: auto; padding: 0; overflow:hidden; position: absolute; top: 0; left: 0; }
section.instafeed #instagram-container .instagram-block .container a {position: relative; width: 100%; display: block;}
section.instafeed #instagram-container .instagram-block .container a img {width: 100%; linear; position: relative; display: block;}
section.instafeed #instagram-container .instagram-block .container a p {background: #fff; position: absolute; top: 0; margin: 0; display: block; height: 100%; width: 100%; -webkit-transition: .4s ease; -ms-transition: 4s ease; transition: .4s ease; padding: 1.5em; font-size: 0.9em; font-weight: normal; line-height: 1.25; color: #000; -webkit-transform: translateY(100%);  -ms-transform: translateY(100%);  transform: translateY(100%);}
section.instafeed #instagram-container .instagram-block .container a:hover p {-webkit-transition: .3s ease; -ms-transition: .3s ease; transition: .3s ease; opacity: 1; -webkit-transform: translateY(0%);  -ms-transform: translateY(0%);  transform: translateY(0%)}

section.instafeed #instagram-container .instagram-block .container .instagram-teaser { width: 100%; position: absolute; top:0; padding: 3.5em 2.5em; text-align: center; color: #fff;}
section.instafeed #instagram-container .instagram-block .container .instagram-teaser i { font-size: 3em; color: #fff;}
section.instafeed #instagram-container .instagram-block .container .instagram-teaser div { margin: 1em 0; font-size: 1.25em; font-weight: 600;}
section.instafeed #instagram-container .instagram-block .container .instagram-teaser span.button { width: auto; display: inline-block;}



/* FULL WIDTH TEASER */
section.full-width-teaser{ color: #fff; text-align: center; background-size: cover; background-repeat: no-repeat; background-color: #000;}
section.full-width-teaser .shadow{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3)}
section.full-width-teaser .container{ padding-top: 8em; padding-bottom: 8em;}
section.full-width-teaser .container{}
section.full-width-teaser .container p {font-size: 1.5em; margin: 0 0 1em;}
section.full-width-teaser .container a.button:last-child {margin-bottom: 0;}



/* MAP SECTION */
section.map-section{ z-index: 50;  overflow: visible;}
section.map-section #map{ width: 100%; height: 40em; }
section.map-section>.container { position: absolute; top:0; width: 100%; padding: 0; height: auto;}
section.map-section .container .teaser-box{ width: 20.5em; min-height: 20.5em; position: absolute; top:0em; right: 50%; margin-right: .5em; transform: translateY(-5.5em); -ms-transform: translateY(-5.5em); -webkit-transform: translateY(-5.5em);}
section.map-section .container .teaser-box .container{ min-height: 20.5em; }



/* RESERVIEREN */
section.reservation{overflow: visible;}
section.reservation .container{ padding: 6em 2em;}
section.reservation .container h5 { text-align: center; display: none;}
section.reservation .container #ot-reservation-widget .ot-title{ display: none; }
section.reservation .container #ot-reservation-widget .ot-powered-by{ display: none;}
section.reservation .container #ot-reservation-widget a { font-weight: 300; }
section.reservation .container #ot-reservation-widget .ot-dtp-picker.wide{ width: 100%;}
.ot-dtp-picker.wide .ot-dtp-picker-form .ot-dtp-picker-selector+.ot-dtp-picker-selector {border: none; border-radius: 0;}
section.reservation .container #ot-reservation-widget form {background: none; border: none;}
section.reservation .container #ot-reservation-widget form div {background: white; }
section.reservation .container #ot-reservation-widget form>div,
section.reservation .container #ot-reservation-widget form input[type=submit]{ width: 24%; margin: 0 .5%; border-radius: 0;}
section.reservation .container #ot-reservation-widget form input[type=submit]{ background: #c55265; border: none; box-shadow: none; text-transform: uppercase;}
section.reservation .container #ot-reservation-widget form input[type=submit]:hover {background: #ae4859;}


/* MENU DOWNLOAD */
section.menu-download{}
section.menu-download .container{ width: 100%; padding: 4em 0 8em 0;}
section.menu-download .container i{ margin: 0 .5em 0 0; }
section.menu-download .container a.button{ width: 49%; margin: .5%; display: block; float: left; text-align: center;}



/* FOOTER */
section.footer {background: #fff;}
section.footer .container {max-width: 100%;}
section.footer .container p {margin: 0 0 1em;}



/* SHOP */
section.shop.cover-header{transform: translateY(-13em);-ms-transform: translateY(-13em);-webkit-transform: translateY(-13em); margin-bottom: -13em;}
section.shop .row {margin-left: -8px; margin-right: -8px;}
section.shop .col3, section.shop .shop-step {padding-left: 8px; padding-right: 8px;}
section.shop .shop-step { width: 33.333334%; margin-bottom: 2em;  text-align: center; float:left; }
section.shop .shop-step>span{padding: 0.75em 1.5em; width: 100%; display: inline-block; background: #fff; font-weight: 700; text-transform: uppercase;}
section.shop .shop-step.active>span{color: #fff; background: #55688b;}

section.shop .item {position: relative; overflow: hidden; background: #fff; margin-bottom: 1em; height: 27em;}
section.shop .item .container{width: 100%; padding: 2em 2em 1em 2em; }
section.shop .item img {width: 100%; height: auto; display: block; margin: 0;}
section.shop .item h2 {font-family: 'Cormorant Garamond', serif; font-size: 1.875em; margin: .875em 0 .375em; line-height: 1em;}
section.shop .item p {font-size: 1em; margin: 0 0 1em;}
section.shop .item span.price {display: block; font-size: 1em; font-weight: 700; letter-spacing: 1px;}
section.shop .item span.tag {display: block; width: 100%; text-transform: uppercase; font-size: 0.75em; line-height: 1; float: left; font-weight: 700; letter-spacing: 1px;}
section.shop .item .input-wrap {width: 100%; float: none; position: absolute; bottom: 0; z-index: 2; background: #fff;}
section.shop .item .select-wrap {border: 0; border-top: 1px solid #ddd;}
section.shop .item .select-wrap select{ padding: 0 1.5em 0 70%}
section.shop .item .select-wrap .handle{ right: 2em; padding: .5em 0 0 1em;}
section.shop .item .select-wrap .selectLabel{ position: absolute; left: 2em; padding: .625em 1em 0 0;}
section.shop .item .select-wrap .selectLabel i{ display: inline-block; margin-right: .5em;}

section.shop .submit-wrap {width: 100%; text-align: center;}
section.shop .submit-wrap input[type="submit"] {display: inline-block; float:none;}

section.shop .order {width: 75%; margin: 0 auto; background: #fff;}
section.shop .order .container {padding: 2em;}
section.shop .order table {width: 100%; text-align: left; border-collapse: collapse; margin: 1em 0;}
section.shop .order table tr th,
section.shop .order table tr td {border-bottom: 1px solid #ddd; padding: 0.75em 0; font-size: 0.875em;}
section.shop .order table tr th {font-weight: 700; text-transform: uppercase;}
section.shop .order table tr td {font-weight: 300; }
section.shop .order table tr td .productName {font-weight: 700; display: block;}
section.shop .order table tbody tr:last-child {border-bottom-style: double;}
section.shop .order table tbody tr:last-child td span{font-weight: 700;}



/*FORMULAR
------------------------------------------------------------------*/

/*INITIALIZER*/

form *{font-size: inherit; padding:0; margin:0; outline: none; -webkit-appearance: none;}

form {margin: 0 0 2em 0;}
form p {margin: 1em 0;}

input, select {cursor: pointer;}

.field-wrap {display: block; padding: 0.7em 0 0 0; clear: both; overflow: visible;}
.field-wrap:after {display: block; clear: both; content: " ";}
.ie7 .field-wrap {overflow: visible; clear: both; width: 100%;}
.field-wrap > label {display: block; width: 50%; padding: 0.7em 0; float: left;}

.input-wrap {display: block; width:50%; float: right;}

:invalid {color: inherit;}

/*Button*/

.button {display: inline-block; padding: .6em 1.25em; margin: .5em 0 1em; text-decoration: none; text-transform: uppercase; font-weight: 600; color: #000; background: #fff; border: 2px solid transparent; transition: all ease .25s;}
.button:hover {cursor: pointer; color: #fff; background: transparent; border: 2px solid #fff;}
.button.red{ color: #fff; background: #c55265;}
.button.red:hover{ background: #ae4859; border: 2px solid transparent;}
.button.blue{ color: #fff; background: #55688b;}
.button.blue:hover{ background: #465776; border: 2px solid transparent;}

.button.socials{width: 3em; height: 3em; padding: 0.75em .5em; text-align: center; margin-right: .5em}
.button.socials:last-of-type{margin-right:0;}
.button.socials i{font-size: 1.5em}

.backButton {margin: 0.6em 0; text-transform: uppercase;}

/*INPUTS*/

input[type="text"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="time"],
textarea {width: 100%; border: none; border: 1px solid #ddd; padding: 0.5em 0.5em; cursor: pointer;}

input:focus, textarea:focus {border-color: #ddd;}

form .small {width: 20% !important;}
form .medium {width: 79% !important;}


/*SELECT*/

select {background: transparent; border:none; position: absolute; left: 0; margin: 0; width: 100%; height: 2.5em; cursor: pointer; padding: 0 0.5em; -moz-appearance: none;}
select::-ms-expand {display: none;}

option {padding: 0.5em;}

.select-wrap {display: block; position: relative; background: transparent; height: 2.65em; border: 1px solid #eee; border-bottom: 2px solid #ddd; padding: 0; overflow: hidden;}
.select-wrap .handle {display: block; font-family: "FontAwesome"; font-size: 1.2em; font-style: normal; font-weight: normal; right: 10px; top: 0; padding: 0.5em 0 0 0.5em; line-height: 1; position: absolute; text-rendering: auto; height: 100%; color: inherit;}
.select-wrap .handle::before {content:"\f107";}

.ie8 select, .ie9 select {height: 2.5em; padding: 0.5em;}
.ie8 .select-wrap .handle::before, .ie9 .select-wrap .handle::before {content:"";}
.ie7 select {position: relative; width: 100%; margin-top: 0.5em;}

.ie7 .select-wrap {border: none; background: transparent;}


/*CHECKBOXES*/

input[type="checkbox"] {position: absolute; left: -999em;}

input[type="checkbox"] + label::before {content:''; font-family: "FontAwesome"; display: block; float: left; position:relative; clear: both; top:-0.25em; left:0; width: 1.5em; height: 1.5em; border: 1px solid #ddd; margin: 0 1em 0 0; font-size: 0.8em; line-height: 1.5em;}
input[type="checkbox"] + label {display: block; padding: 0.7em 0 0 0; cursor: pointer; clear: both;}
input[type="checkbox"]:checked + label::before {content: "\f00c"; border-top: 1px solid #ddd; color: inherit; text-align: center; color: #c55265;}

input[type="checkbox"].inline + label {float: left; margin-right: 1em;  clear: none;}

.ie8 input[type="checkbox"] + label,
.ie7 input[type="checkbox"] + label {background: none; padding:0; margin:-0.4em 0 0 1.5em;}
.ie8 input[type="checkbox"],
.ie7 input[type="checkbox"]{position: relative; left:0; top: 0.8em; padding:0; margin:0;}

.ie8 input[type="checkbox"].inline + label,
.ie7 input[type="checkbox"].inline + label {float: left; margin: 0.7em 1.5em 0 0.5em;}
.ie8 input[type="checkbox"].inline,
.ie7 input[type="checkbox"].inline {float: left;}


/*RADIO BUTTONS*/

input[type="radio"] {position: absolute; left: -999em;}

input[type="radio"] + label::before {content:''; font-family: "FontAwesome"; display: block; float: left; position:relative; clear: both; top:-0.25em; left:0; width:2em; height:2em; border: 1px solid #ddd; margin: 0 1em 0 0; cursor: pointer; border-radius: 100%; font-size: 0.6em; line-height: 2em;}
input[type="radio"] + label {display: block; padding: 0.7em 0 0 0; cursor: pointer; clear: both;}
input[type="radio"]:checked + label::before {content: "\f111"; border-top: 1px solid #ddd; color: inherit; text-align: center; color: #c55265;}

input[type="radio"].inline + label {float: left; margin-right: 1em;  clear: none;}

.ie8 input[type="radio"] + label,
.ie7 input[type="radio"] + label {background: none; padding:0; margin:-0.4em 0 0 1.5em;}
.ie8 input[type="radio"],
.ie7 input[type="radio"]{position: relative; left:0; top: 0.8em; padding:0; margin:0;}

.ie8 input[type="radio"].inline + label,
.ie7 input[type="radio"].inline + label {float: left; margin: 0.75em 1.5em 0 0.5em;}
.ie8 input[type="radio"].inline,
.ie7 input[type="radio"].inline{float: left;}


/*IMAGE RADIO BUTTONS*/

.image-radio > input[type=radio] {position: absolute; left: -999em;}
.ie8 .image-radio input[type=radio], .ie7 .image-radio input[type=radio] {display:inline;}
.image-radio {display: block; width: 30%; margin-right: 3.333333%; float: left;}
input[type=radio] + img {display: block !important; width: 100%; height: auto; cursor:pointer; border:2px solid transparent; display: inline;}
input[type=radio]:checked + img {border:2px solid #000;}



/*FILE UPLOAD*/

.file-wrap {display: block;}
.file-wrap input[type="file"] {padding: 0.5em 0; font-size: inherit; font-family: inherit;}


/*SUBMIT*/

input[type="submit"] {background-color: #454545; color: #fff; padding: .6em 1.25em; border: 1px solid #454545; border-bottom: 2px solid #333; float:right; text-transform: uppercase;}
input[type="submit"]:hover {background-color: #333333; border-bottom: 2px solid #000;}
input[type="submit"].red{ color: #fff; background: #c55265; border: 1px solid #c55265;}
input[type="submit"].red:hover{ background: #ae4859; border: 2px solid transparent; border: 1px solid #ae4859;}


/*FEHLERMELDUNG*/

/*ERRORS*/

.alert {display: block; margin-bottom: 23px; padding: 15px;}
.alert.error {background-color: #fde8e9; border-color: #fde8e9; color: #ed1c27;}
.alert.success {background-color: #e0f1df; border-color: #e0f1df; color: #459641;}
.alert.warning {background-color: #fdecdb; border-color: #fdecdb; color: #f47e0b;}
.alert.info {background-color: #6a7779; border-color: #6a7779; color: #fff;}

input.error,
label.error,
.error textarea,
.error input,
.error .select-wrap,
.error .select-wrap .handle,
.error label,
.error .input-wrap label,
.error input[type="radio"] + label:before,
.error input[type="checkbox"] + label:before {border-color: #fde8e9; border-bottom-color: #ed1c27; color: #ed1c27;}
input:required:invalid {box-shadow: none;}

input.error,
.error textarea,
.error input,
.error .select-wrap,
.error .select-wrap .handle,
.error input[type="radio"] + label:before,
.error input[type="checkbox"] + label:before {background-color: #fde8e9;}