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

Created by:			.eyecatcher ag
For:				eyecatcher Website
Date of creation:	25-09-2015 (lcr)
Last update:		06-05-2016 (lcr)

------------------------------------------------------------------*/

@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: Archivo Narrow, sans-serif; font-size: 22px; line-height: 1.2; color: #302B27; font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
body.freeze {overflow: hidden;}

div, img {display: block;}

.test {display:none;}
.desktop {display:block;}
.mobile {display:none;}

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

.menu {width: 2em; height: 2em; position: fixed; left: 1em; top: 1em; z-index: 5000; font-size: 1em; display: block; cursor: pointer; transition: all ease 0.5s; -moz-transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -ms-transition: all ease 0.5s; -o-transition: all ease 0.5s;}
.menu span {width: 70%; height: 6px; background-color: #fff; position: absolute; left: .3em; display: block; transition: all ease 0.5s; -moz-transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -ms-transition: all ease 0.5s; -o-transition: all ease 0.5s;}
.menu span:first-of-type {top: 0.45em;}
.menu span:nth-of-type(2) {top: 0.9em; opacity: 1;}
.menu span:last-of-type {top: 1.35em;}
.menu.open span:first-of-type {top: 0.9em; transform: rotate(225deg); -ms-transform: rotate(225deg); -webkit-transform: rotate(225deg); -ms-transform: rotate(225deg); -o-transform: rotate(225deg);}
.menu.open span:nth-of-type(2) {opacity: 0; transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg);}
.menu.open span:last-of-type {top: 0.9em; transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg);}

.lang {height: 2em; position: fixed; top: 1em; right: 1em; font-weight: bold; line-height: 1; color: #fff; z-index: 100; transition: none; display: none !important;}
.lang ul {margin: 0; padding: .8em .5em; font-size: .75em;}
.lang ul li {display: inline-block;}
.lang ul li a {color: #8fc641;}
.lang ul li a:hover {color: #badd8c;}

.main {width: auto; height: 100%; margin-left: 0; position: relative; transition: margin ease 0.5s; -moz-transition: margin ease 0.5s; -webkit-transition: margin ease 0.5s; -ms-transition: margin ease 0.5s; -o-transition: margin ease 0.5s;}
.main.proj {height: auto !important:}

nav {width: 100%; height: 100%; text-transform: uppercase; background: #002753; position: fixed; top: 0; left: 0; z-index: 1000; opacity: 0; transition: opacity.3s linear; -moz-transition: opacity.3s linear; -webkit-transition: opacity.3s linear; -ms-transition: opacity.3s linear; -o-transition: opacity.3s linear; pointer-events: none;}
nav.open {opacity: 1; pointer-events: auto;}
nav > ul {width: 30%; margin: 0; padding: 0; list-style: none; text-align: center; position: relative; top: 45%; left: 50%; display: block; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%);}
nav ul li {display: block; opacity: 0; transform: translateY(100px); -moz-transform: translateY(100px); -webkit-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transition: all ease .4s; -moz-transition: all ease .4s; -webkit-transition: all ease .4s; -ms-transition: all ease .4s; -o-transition: all ease .4s;}
nav.open ul li {opacity: 1; transform: translatex(0); -moz-transform: translatex(0); -webkit-transform: translatex(0); -ms-transform: translatex(0); -o-transform: translatex(0);}
nav ul li:last-child {margin-right: 0;}
nav ul a {font-size: 1.5em; line-height: 1.25; color: #fff; letter-spacing: 0.025em; transition: all ease 0.5s; -moz-transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -ms-transition: all ease 0.5s; -o-transition: all ease 0.5s;}
nav ul a.arrow {font-size: 1.25em; line-height: 1.2; letter-spacing: 0; color: #8fc641; text-transform: none;}
nav ul a.arrow:hover {color: #badd8c;}
nav ul img {margin: 0 auto;}
nav ul li.active a {color: #8fc641;}
nav ul li .angle-right {position: relative;}
nav ul li .angle-right::after {content: '\f105'; font-family: 'FontAwesome'; position: absolute; top: -2px; right: -0.75em; display: block;}
nav ul li .angle-right::after {transition: all ease 0.5s; margin-left: 0.25em;}
nav ul li .angle-right.open::after {transform: rotate(90deg); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg);}

nav .subnav {display: none;}
nav .subnav ul {width: 100%; margin: 0; padding: .5em 1em; font-size: .75em; line-height: 1; list-style: none; text-transform: none; display: block;}
nav .subnav ul li {display: block;}
nav .subnav ul li a {color: #ffffff; font-weight: normal;}
nav .subnav ul li a:hover {color: #badd8c;}
nav .subnav ul li.active a {color: #8fc641;}
nav li.active a ~ .subnav {display: block;}

.main {z-index: 1;}
.main .content {width: 24em; margin: 0 auto; transition: margin ease 0.5s; -moz-transition: margin ease 0.5s; -webkit-transition: margin ease 0.5s; -ms-transition: margin ease 0.5s; -o-transition: margin ease 0.5s;}
.main .content.wide {width: 40em; margin: 0 auto;}
.main .content aside {width: 9em; margin: 0; margin-top: 1em; position: absolute; top: 0; right: 2em; font-size: 0.9em;}

section {width: 100%; margin: 0; padding: 2em 0; background-color: #fff; position: relative; overflow: hidden; display: block;}
section:first-of-type {padding: 6em 0 2em 0 !important;}
section.fullscreen {height: 100%; overflow: hidden;}

.content img {width: auto; max-width: 100%; height: auto; margin: 0 auto; display: block;}
.bypass {width: 2.8em; margin: -1.8em 0 0 -3.2em; position: absolute; opacity: 1; transition: opacity ease 0.5s; -moz-transition: opacity ease 0.5s; -webkit-transition: opacity ease 0.5s; -ms-transition: opacity ease 0.5s; -o-transition: opacity ease 0.5s;}
.bypass img {width: 100%; height: auto;}

section.footer .content {margin-top: 5em;}
section footer {padding: 0 !important; overflow: visible;}
section footer .content {min-height: 15em;}
footer .content aside img {width: 8em !important; height: auto; margin: -2.6em 0 0 -0.5em; position: fixed; bottom: 5%; z-index: 5000;}



/*TYPOGRAPHY
----------------------------------------------------------------- */

/*FONTFACE*/

@font-face {
    font-family: 'alegreyablack_italic';
    src: url('../fonts/alegreya-blackitalic-webfont.eot');
    src: url('../fonts/alegreya-blackitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/alegreya-blackitalic-webfont.woff') format('woff'),
         url('../fonts/alegreya-blackitalic-webfont.ttf') format('truetype'),
         url('../fonts/alegreya-blackitalic-webfont.svg#alegreyablack_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'eyekon';
    src: url('../fonts/eyekon16.eot');
    src: url('../fonts/eyekon16.eot?#iefix') format('embedded-opentype'),
         url('../fonts/eyekon16.woff') format('woff'),
         url('../fonts/eyekon16.ttf') format('truetype'),
         url('../fonts/eyekon16.svg#eyekon16') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {font-family: 'alegreyablack_italic'; font-style:normal; font-size: 3.1em; line-height: 0.8; margin: 0.75em 0 0.25em 0; padding: 0; font-weight: normal;}
h2 {font-size: 1.5em; line-height: 1; margin: 0 0 0.5em 0; font-weight: 700;}
h3 {font-size: 1.2em; line-height: 1; margin: 0 0 0.5em 0; font-weight: 700;}
h4 {font-size: 1em; line-height: 1; margin: 0 0 0.5em 0; font-weight: 700;}
h5 {font-size: 0.81em; line-height: 1; margin: 0 0 0.5em 0; font-weight: 700;}
p {font-size: 1em; line-height: inherit; margin: 0 0 0.5em 0;}
p.lead, h2.lead {font-size: 1.25em; line-height: inherit; margin: 0 0 0.5em 0; font-weight: 400 !important;}
p.small, small, .small {font-size: 0.7em !important; line-height: inherit; margin: 0 0 0.5em 0;}
.uppercase {text-transform: uppercase; letter-spacing: 0.02em;}
p.tags {font-size: 0.6em !important;}
strong, .bold {font-weight: bold;}
.latin {list-style-type: lower-latin;}

a {outline: none; text-decoration: none; color: #8fc641; font-weight: bold; transition: all ease .2s;}
a:hover {color: #badd8c;}
a.btn,
button.btn {font-size: inherit; display: inline-block; line-height: 1em; padding: 0.35em 0.5em; background-color: #8fc641; color: #fff; border-radius: 0.15em; border-bottom: 2px solid #6b9c30; cursor: pointer;}
.col2 a.btn,
.col2 button.btn {margin-bottom: 1px;}
br ~a.btn,
br ~button.btn {margin-top: 0.5em;}


a.arrow::after,
a.btn::after,
button.btn::after {content: "\f178"; line-height: 1em; font-size: 0.8em; padding-left:0.5em; transition: margin ease .2s; font-family: "FontAwesome";}
a.btn.back::after {content: ""; padding-left:0;}
a.btn.back::before {content: "\f177"; line-height: 1em; font-size: 0.8em; padding-right:0.5em; transition: margin ease .2s; font-family: "FontAwesome";}
.text-align-center a.btn::after,
.text-align-center button.btn::after {content:"";}

a.btn:hover::after,
button.btn:hover::after {margin-left: 0.5em;}
a.btn.back:hover::after {margin-left: 0;}
a.btn.back:hover::before {margin-right: 0.5em;}
a img {border: none;}
.text-align-center a.btn:hover::after,
.text-align-center button.btn:hover::after {margin:0 !important;}

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

.green {color:#8fc641;}
.orange {color:#ff6600;}
.light-blue {color:#00a3d9;}
.dark-green {color:#517524;}
.blue {color:#002753;}
.grey {color: #aaa;}
.dark {color:#302B27;}

.grey-shadow {text-shadow: #ccc 0.08em 0.08em 0.1em;}
.grey-shadow {text-shadow: none;}

.bg-links br {display: none;}
.second {left: 10.5em; position: absolute;}
br ~a.btn.second, br ~button.btn.second {margin-top: 0;}


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

.row {clear: both; display: block; margin-left: -15px; margin-right: -15px; overflow: visible;}
.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; overflow: visible;}

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


/*BACKGROUND & COLORS
----------------------------------------------------------------- */

.bg-green {background-color: #8fc641; color: #fff;}
.bg-green a {color: #517524;}
.bg-green a:hover {color: #6b9c30;}
.bg-green a.btn,
.bg-green input[type=submit],
.bg-green button.btn {background-color: #fff; color: #8fc641; border-bottom: 2px solid #999;}

.bg-orange {background-color: #FF6A15; color: #fff;}
.bg-orange a {color: #fff;}
.bg-orange a:hover {color: #badd8c;}
.bg-orange a.btn,
.bg-green input[type=submit] {background-color: #fff; color: #8fc641; border-bottom: 2px solid #999;}

.bg-light-blue {background-color: #FF6A15; color: #fff;}
.bg-light-blue a {color: #fff;}
.bg-light-blue a:hover {color: #badd8c;}
.bg-light-blue a.btn,
.bg-green input[type=submit] {background-color: #fff; color: #8fc641; border-bottom: 2px solid #999;}

.bg-blue {background-color: #002753; color: #fff;}
.bg-dark-blue {background-color: #212632; color: #fff;}
.bg-grey {background-color: #f5f5f5;}
.bg-white {background-color: #fff;}

section.shadow {box-shadow: #ddd 0 0 15px inset;}
section.bg-blue.shadow {box-shadow: #031c38 0 0 15px inset;}

.bg-img {position: relative; overflow: hidden; color: #fff; text-shadow: #333 0.08em 0.08em 0.1em; background-color: transparent;}
.bg-img .raster {position: absolute; top:0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: -1;}
.bg-img img.bg {display: block; min-height: 100%; min-width: 850px; 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%); background: #002753;}
.bg-img.fullscreen img.bg {min-height: 100%; min-width: 100%; width: 100%; height: auto; max-width: 1500px; position: absolute; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%);}
.bg-img a.btn {text-shadow: none;}
.bg-img .big-video video  {display: block; min-height: 100%; min-width: 850px; 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%);}
.bg-img .shadow-top{background-image: url("../../images/ref_schatten.png"); background-position: center top; background-repeat: repeat-x;  display: block; height: 100%; position: absolute; top: 0; width: 100%; z-index: -1; opacity: 0.4; pointer-events: none;}



/* FILTER */

/*.filter .collapse {display: block; position: relative; left: 0 top: 0; width: 1.5em; height: 1.4em; z-index: 5000; cursor: pointer; font-size: 1.5em; transition: all ease 0.5s;}
.filter .collapse span {display: block; background-color: #fff; height: 6px; width: 60%; left: 0; position: absolute; transition: all ease 0.5s;}
.filter .collapse.open span:first-of-type {transform: rotate(90deg); -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg);}
.filter .collapse.open span:nth-of-type(2) {transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg);}*/

.filter { width: auto; display: block; position: fixed; z-index: 100; top: 1em; left: 4em; color: #fff; font-weight: bold; text-align: center; height: 2em;}
.filter:hover { cursor: pointer;}
.filter span { display:none;}
.filter ul { list-style-type: none; margin: 0; padding: 0; border-radius: 3px; display: block; transition: .375s ease; -ms-transition: .375s ease; -webkit-transition: .375s ease; background: transparent; text-align: left; font-size: 0.75em;}
.filter li { display: inline-block; padding: .8em .5em; margin: 0;}
.filter li a { color: #fff; }
.filter li a:hover { color: #badd8c; }
.filter li.active a { color: #8fc641; }

.back { width: auto; display: block; position: fixed; z-index: 100; top: 1em; left: 4em; font-weight: bold; text-align: center; height: 2em;}
.back a { color: #fff; font-size: .75em; padding: .8em .5em; display: inline-block;}
.back a:before { content: "\2039"; margin: 0 .5em 0 0;}
.back a:hover { cursor: pointer;}


/*ELEMENTS
----------------------------------------------------------------- */

/* REFERENCES */

.projekt-shadow{
height: 6em;
width: 100%;
position: fixed;
z-index: 99;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-gradient(linear, left top, left bottom, color-stop(40%,rgba(0,0,0,0.3)), color-stop(100%,rgba(0,0,0,0))); /* Chrome4-9,Safari4-5 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.3) 40%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: -o-linear-gradient(top, rgba(0,0,0,0.3) 40%,rgba(0,0,0,0) 100%); /* Opera 11.10-11.50 */
background: -ms-linear-gradient(top, rgba(0,0,0,0.3) 40%,rgba(0,0,0,0) 100%); /* IE10 preview */
background: linear-gradient(to bottom, rgba(0,0,0,0.3) 40%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=0 ); /* IE6-8 */
}

section.reference {text-align: center; padding-bottom:0; position: relative;}
section.reference .raster {background-color: rgba(0, 0, 0, 0.4); transition: all ease .5s;}
section.reference img.bg {transition: all ease-in-out 1s;}
section.reference .center-center { position: absolute; top: 50%; left: 50%; transition: all ease-in-out .5s; transform: translate(-50%,-50%) scale(1);}
section.reference .content { margin: 0;}
section.reference .content.highlights {padding: 1.5em 0 1em 0; margin: 0 ; transition: all ease 0.5s;}
section.reference .content h2 {font-family: 'alegreyablack_italic'; font-style:normal; font-size: 2.8em; line-height: 0.76; margin: 0.25em 0 0.5em 0; padding: 0; font-weight: normal; z-index: 10;}
section.reference .content h3 { margin: 0 0 1em;}
section.reference .content h4 {font-size: 0.75em; margin: 0 auto; transition: all ease-in-out .3s;}
section.reference .content h4 a {color: #fff; display: inline-block; height: 34px; padding: 0.25em 0.625em; border-radius: 17px; background: transparent;}
section.reference .content .logo {height: 3em;}
section.reference a.ref-link {background-image: url("../../images/ref_schatten.png"); background-position: center top; background-repeat: repeat-x;  display: block; height: 100%; position: absolute; top: 0; width: 100%; z-index: 0; opacity: 0.4;}
section.reference .content a.btn {opacity: 0; transition: all ease-in-out .3s; margin: 0; }

section.reference.teaser {height: 20em;}
section.reference.teaser:hover > img {width: 102%; }
section.reference.teaser:hover .raster {background-color: rgba(0, 0, 0, 0.5);}
section.reference.teaser h4 {opacity: 0;}
section.reference.teaser:hover h4 {opacity: 1;}
section.reference h4 a:hover {cursor: default; /*background: #002753; text-shadow: 2px 2px 2px #002753;*/}
/*section.reference.teaser .center-center {transform: translate(-50%,-50%) scale(.9); -webkit-transform: translate(-50%,-50%) scale(.9); -ms-transform: translate(-50%,-50%) scale(.9);}*/
section.reference.teaser .center-center {transform: translate(-50%,-50%) scale(1); -webkit-transform: translate(-50%,-50%) scale(1); -ms-transform: translate(-50%,-50%) scale(1);}
section.reference.teaser:hover .content a {opacity: 1; transform: translate(0px); -webkit-transform: translate(0px); -ms-transform: translate(0px);}
section.reference.teaser .content.highlights {}
section.reference.teaser:hover .content.highlights {}
section.reference.teaser:hover .content h2 {}


/* SLIDER */

ul[class^="bxslider"],
ul[class^="bxslider"] li  {margin:0 !important; padding:0 !important; overflow: hidden;}

#slider-prev a {display: block; text-shadow: none; font-size: 1.25em; padding: 0 0.5em; border-radius: 0 5em 5em 0; line-height: 2em; position: absolute; left: 0; top: 50%; margin-top: -1em; background-color: #fff; opacity: 1; transition: padding ease 0.5s; box-shadow: 0 1px 5px #999;}
#slider-next a {display: block;  text-shadow: none; font-size: 1.25em; padding: 0 0.5em; border-radius: 5em 0 0 5em; line-height: 2em; position: absolute; right: 0; top: 50%; margin-top: -1em; background-color: #fff; opacity: 1; transition: padding ease 0.5s; box-shadow: 0 1px 5px #999;}
#slider-prev a:hover {padding-left:0.25em;}
#slider-next a:hover {padding-right:0.25em;}

/* SLIDER FULLSCREEN */

section.fullscreen {margin: 0; padding: 0;}
section.fullscreen .bx-viewport,
section.fullscreen .bx-wrapper {height: 100% !important; width: 100% !important;}
section.fullscreen [class^="bxslider"],
section.fullscreen [class^="bxslider"] li {height: 100% !important; width: 100%;}

section.bg-slider.fullscreen {}
section.bg-slider.fullscreen .bx-wrapper {}


/* SLIDER FADING IN BACKGROUND */

section.bg-slider {}
section.bg-slider .bxslider-fade,
section.bg-slider .bxslider-fade li {height: 100%; width: auto}
section.bg-slider .bx-wrapper {position: absolute; width: 100%; height: 100%; top: 0; z-index: 0}
section.bg-slider .content {z-index: 1000; position: relative;}
section.bg-slider .bx-viewport {height: 100% !important; width: 100%;}
section.bg-slider.fullscreen .bx-wrapper {}


/* REVEALCARD */

section.revealcards {position: relative; padding: 0;}
section.revealcards .content {width: 100%; margin: 0;}
section.revealcards .card {position: relative; width: 33.3334%; height: 15em; padding: 0; overflow: hidden;}
section.revealcards .card i.fa { font-size: 2em; margin-bottom: 0.5em; color: #8fc641;}
section.revealcards .cardfront, section.revealcards .cardback { box-sizing: border-box; position: absolute; top: 0; margin: 0; display: block; height: 100%; width: 100%; transition: all .5s ease-in-out; padding: 2em; font-weight: normal;  perspective: 100px; -webkit-backface-visibility: hidden; backface-visibility: hidden;}
section.revealcards .cardback p{ font-size: 0.8em; line-height: 1.375; position: relative; top: 50%; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%);}
section.revealcards .card:hover {cursor: pointer;}

section.revealcards .cardfront {background: #002753; color: #ffffff; padding: 3em 2em; transform: scale(1, 1); opacity: 1;}
section.revealcards .card:hover .cardfront { transform: scale(.7, .7);}

section.revealcards .cardback { background: #fff; color: #302B27; transform: translate(0, 100%); z-index: 2; text-align: left;}
section.revealcards .card:hover .cardback { transform: translate(0, 0);}


/* INSTAFEED */

section.instafeed{ position: relative; padding: 0;}
section.instafeed.index img {filter: grayscale(25%) brightness(0.9) contrast(125%);}
section.instafeed h2{font-family: 'alegreyablack_italic'; font-style:normal; font-size: 3em; line-height: 0.76; margin: 0 0 0.25em 0; padding: 0; font-weight: normal; z-index: 10; color: #fff; position: absolute; top: 50%; left: 50%; pointer-events: none; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 1; transition: all .2s linear; width: 100%; text-align: center;}
section.instafeed:hover h2{ opacity: 0;}
section.instafeed > a{ z-index: 10; color: #fff; position: absolute; bottom: 1em; right: 1em; height: 1.25em; vertical-align: middle; padding: 0;}
section.instafeed > a p{  display: inline-block; line-height: 1; margin: 0;}
section.instafeed > a img{ margin: 0 0 -0.25em .5em; height: 0; display: inline-block;}
section.instafeed #instagram-container{}
section.instafeed #instagram-container .instagram-block {overflow: visible; padding: 0; min-height: 1px; float: left; position: relative; width: 16.66667%;}
section.instafeed #instagram-container .instagram-block .container {perspective: 800px; height: 0; padding-bottom: 100%;}
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%; transition: all .6s linear; position: relative; -webkit-backface-visibility: hidden; backface-visibility: hidden;  perspective: 800px;}
section.instafeed #instagram-container .instagram-block .container a:hover img {transition: all .4s linear; -webkit-transform: rotateY( 180deg); -ms-transform: rotateY( 180deg); transform: rotateY( 180deg);}
section.instafeed #instagram-container .instagram-block .container a p {background: #002753; position: absolute; top: 0; margin: 0; display: block; height: 100%; width: 100%; transition: all .6s linear; padding: 1em; font-size: 0.7em; font-weight: normal; color: #ffffff; -webkit-backface-visibility: hidden; backface-visibility: hidden; perspective: 800px; -webkit-transform: rotateY( -180deg);  -ms-transform: rotateY( -180deg);  transform: rotateY( -180deg);}
section.instafeed #instagram-container .instagram-block .container a:hover p {transition: all .4s linear; opacity: 1; transform: rotateY( 0deg);}


/* FULL WIDTH PARTS */

section.full-width-parts {padding: 0 !important;}
section.full-width-parts .content {width: 95%; margin-left: auto; margin-right: auto;}
section.full-width-parts .row {margin:0;}
section.full-width-parts .row > div > div {padding: 1em;}

section.full-width-parts .col3.full-height {height:0; padding-bottom: 33.333333%; overflow: hidden; text-align: center;}
section.full-width-parts .full-height > div {width: 90%; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%);  -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%)}
section.full-width-parts .full-height .raster {position: absolute; width: 100%; height: 100%; z-index: -1;}
section.full-width-parts .full-height img.bg {display: block; min-height: 100%; min-width: 850px; 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%);}
section.full-width-parts .full-height a {text-shadow: none;}
section.full-width-parts .full-height .logo {height: 3em; width: auto; margin: 0 auto 1em auto;}


/* FIXED BACKGROUND SCROLLING */

section .fixed-bg {background-attachment: fixed !important; background-position: center center !important; background-size: cover !important; height: 100%; left: 0; position: absolute; top: 0; visibility: visible; width: 100%; z-index: -1;}
section.bg-img.full-width-parts.fullscreen .content{ position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }


/* BACKGROUND */

section .bg {background-position: center center !important; background-size: cover !important; height: 100%; left: 0; position: absolute; top: 0; visibility: visible; width: 100%; z-index: -1;}


/* TEAMOVERVIEW */

section.teamview{ position: relative; padding: 0 !important;}
section.teamview .member {overflow: visible; padding: 0; min-height: 1px; float: left; position: relative; width: 20%; height: auto;}
section.teamview .member img {width: 100%; transition: opacity .3s ease; height: auto; display: block; z-index: 1;}

section.teamview .member .static:hover {cursor: pointer;}

section.teamview .member div {width: 100%; padding: .5em; position: absolute; z-index: 3; bottom: 0; opacity: 0; transition: opacity .3s ease; background: #002753; display: none;}
section.teamview .member:hover div {opacity: 1;}
section.teamview .member div p { font-size: .8em; color: #8fc641;}
section.teamview .member div p.lead { font-size: 1.5em; color: #fff; margin-bottom: 0em;}
section.teamview .member span { text-align: center; font-weight: bolder; text-transform: uppercase; font-size: 1.5em; color: white; position: absolute; width: 100%; bottom: .75em; display: none; text-shadow: 0px 0px 5px #002753;}


/* PRODUCTS */

section.macchina .content{ margin: 0 4em;}

.row.add-ons div {margin-bottom: 1.5em;}
.row.add-ons h4 span {line-height: 1.25em;}
.row.add-ons h4 i {display: block; float: left; font-size: 1.25em; margin-right: 0.25em;}
.row.add-ons h4 + p {padding-left: 0.75em;}

.row.add-ons h3 {margin-bottom: 0.25em;}
.row.add-ons h3 span {line-height: 1.5em;}
.row.add-ons h3 i {display: block; float: left; font-size: 1.5em; margin-right: 0.25em; width: 1em; color: #002753;}
.row.add-ons h3 + p {padding-left: 2.4em;}


/* LISTS */

ul {padding: 0.5em 0 0.5em 1em; margin: 0 0 1em 0;}
ul li {margin-bottom: 0.25em;}
ul.small {font-size: 0.81em;}
ul.check {list-style: none; padding-left:0;}
ul.check li {padding: 0 0.25em 0 1em; position: relative;}
ul.check li::before {font-family:'FontAwesome'; content:"\f00c"; font-weight:normal; font-size: 0.75em; color: #8fc641; left: 0; top: 0.25em; position: absolute;}
ul.check h2 {margin:0 0 0.25em 0; padding:0; line-height: 1;}
ul.mail {list-style: none; padding: 0; margin-left: 1.5em;}
ul.mail li::before {font-family:'FontAwesome'; content:"\f0e0"; color: #8fc641; margin: 0 0.5em 0 -1.5em; position: absolute;}
ul.mail h2 {margin:0 0 0.25em 0; padding:0; line-height: 1;}
ul.inline li {display: inline;}

ul.contact {list-style: none; padding: 0; margin-left: 0; font-weight: bold; line-height: 1.75em;}
ul.contact .icon {margin-right: 0.15em; background-color: #8fc641; color: #fff;}
ul.contact a {color: #aaa;}
ul.contact a:hover {color: #badd8c;}
ul.contact a:hover .icon {background-color: #badd8c;}


/* QUOTES */

.client-quotes {margin: 0; font-size: 0.9em;}
.client-quotes .content {padding:2em;}
.client-quotes:after {content:""; display: block; clear: both;}
.client-quotes img {border-radius: 100%; width: 100%;}
.client-quotes blockquote {display: block; line-height: 1.2; font-weight: normal; font-size: 1.2em; background-color: #002753; padding: 1em; margin: 0 0 1.25em 0; border-radius: 0.25em; position: relative; color: #fff;}
.client-quotes blockquote:after {display: block; content:""; width: 0; height: 0; border-bottom: 1em solid transparent; border-left: 1.5em solid #002753; border-top: 0 solid transparent; position: absolute; left: 4em; bottom: -0.95em;}
.client-quotes .row {width: auto; margin: 0 0.5em;}
.client-quotes h3 {padding: .75em 0 0 0;}
.client-quotes h4 {padding: .5em 0 0 0;}
.client-quotes p {margin: 0.25em 0 0 0; font-size: 0.8em; padding: 0;}

.bg-blue .client-quotes blockquote {color: #002753; background-color: #fff;}
.bg-blue .client-quotes blockquote:after {border-left: 1.5em solid #fff;}


/* LOGOS ROW */

.row.logos img {display: block; background-color: #fff; border: 1px solid #eee; border-bottom: 2px solid #ddd; padding: 0.5em 1em; border-radius: 0.2em; margin: 0 0 0.5em 0; transition: all ease .2s;}
.row.logos img {width: 100%; height: auto;}
.row.logos a img:hover {background-color: #f5f5f5;}


/* GOOGLE MAPS */

section.map {padding:0;}
section.map #map {width: 100%; height: 22em;}


/* YOUTUBE VIDEO */

.video {position: relative; padding-bottom: 56.25%; margin: 2em 0; height: 0;}
.video iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

/* VIDEO */
div video {width: 100%;}

/* JOB BANNER */

.job-banner {position: absolute; top:0; left:0; width: 100%; margin:0 !important; overflow: auto; padding: 0 !important; display: none; z-index: 1000;}
.job-banner h4 {margin:0 0 .25em 0;}
.job-banner .content {padding: 1em 0 0.5em 0;}
.job-banner + .content {margin-top: 6em !important;}

/* PROMO BANNER */

.promo-banner {width: 100%; margin:0 !important; overflow: auto; padding: 0 !important; display: none; z-index: 1000;}
.promo-banner h4 {margin:0; line-height: 1.2;}
.promo-banner .content {padding: 0.5em 0;}


/* EYEVIP ICONS */

.eyevip-icons {text-align: center; margin: 1em 0 2em 0; /*font-weight: bold; text-transform: uppercase;*/}
.eyevip-icons img.icon {margin: 0.5em auto; max-width: auto;}
.eyevip-icons p.small {font-size: 0.9em !important; line-height: 1;}


/* SMALL THINGS */

img.icon {width: 90%; max-width: 8.65em; margin: 1em auto;}

span.icon {display: inline-block; background-color: #fff; color: #002753; width: 1.5em; height: 1.5em; border-radius: 100%; position: relative;}
span.icon.left {margin-right: 0.5em;}
span.icon i {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);}
a span.icon {transition: all ease .2s;}
a:hover span.icon {background-color: #517524;}
footer span.icon {color: #8fc641;}
footer span.icon i {font-size: 0.8em;}

hr {border: none; height: 0.7em; background: url('../../images/shadow.png') repeat-x; background-color: transparent; background-size: 0.7em 100%;}

.bow {height:0.6em; background-color:#000; position: relative; width: 100%;}
.bow img {width: 8em; top:50%; left: 50%; position: absolute; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin-top: 0em}

a.scroll-down {font-size: 2.5em; position: absolute; color: #fff; bottom: 0.75em; left: 50%; margin-left: -0.5em; z-index:500; animation: scroll-down 3s infinite; text-shadow: 0 1px 5px #999;}
a.scroll-down:hover {color: #fff;}
@keyframes scroll-down { 0% { bottom: 0; } 50%	{ bottom: 0.25em; } 100%{ bottom: 0em; } }
@-moz-keyframes scroll-down { 0%{ bottom: 0; } 50%{ bottom: 0.25em; } 100%{ bottom: 0em; } }
@-webkit-keyframes scroll-down { 0%{ bottom: 0; } 50%{ bottom: 0.25em; } 100%{ bottom: 0em; } }
@-o-keyframes scroll-down { 0%{ bottom: 0; } 50%{ bottom: 0.25em; } 100%{ bottom: 0em; } }

.eyekon {font-family: 'eyekon'; font-size: 2.25em; font-weight: normal;}
footer .eyekon {margin-left: 0; margin-right: -0.15em;}

/* POPUP */

.popup {width: 100%; height: 100%; position: fixed; z-index: 10000; display: none;}
.popup-bg {width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; z-index: 0;}
.popup-box {width: 100%; height: auto; max-width: 600px; max-height: 100vh; overflow: auto; position: relative; top: 50%; left: 50%; transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); z-index: 1; box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.5); -moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.5); -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.5);}
.popup-box img {max-width: 100%;}
.popup-close {position: absolute; top: 0.5em; right: 0.5em; font-size: 1em; line-height: 0.75; cursor: pointer;}
.popup-close .fa {line-height: 0.75;}
.popup-content {padding: 1.5em 2em; font-size: 0.75em;}
.popup-content:after {content: ""; clear: both; display: block;}
.popup-content a.btn::after {content: "\f178"; line-height: 1em; font-size: 0.8em; padding-left:0.5em; transition: all ease-in-out .2s; font-family: "FontAwesome";}

.popup-link {position: absolute; top: 1em; right: 1em; z-index: 1000; cursor: pointer; box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.2);}
.popup-link.no-shadow {box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;}

/* WIGGLE ANIMATION */

.wiggle {animation: wiggle 5s infinite; -webkit-animation: wiggle 5s infinite;}

@keyframes wiggle {
    0% { transform: rotate(0deg); }
    2% { transform: rotate(-10deg); }
    4% { transform: rotate(10deg); }
    6% { transform: rotate(-10deg); }
    8% { transform: rotate(10deg); }
    10% { transform: rotate(0deg); }
}

@-webkit-keyframes wiggle {
    0% { transform: rotate(0deg); }
    2% { transform: rotate(-10deg); }
    4% { transform: rotate(10deg); }
    6% { transform: rotate(-10deg); }
    8% { transform: rotate(10deg); }
    10% { transform: rotate(0deg); }
}

/* XMAS */

.gift {width: auto; height: auto;}


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

/*INITIALIZER*/

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

form {margin: 1em 0 0 0; position: relative;}
form p {margin: 1em 0;}
form small {color: #999;}
.bg-green small {color: #517524; opacity: .6;}

input, select {cursor: pointer;}

form.natural span {line-height: 1.1em;}

.field-wrap {display: block; padding: 0.7em 0 0 0; width:48%; float: left; overflow: auto;}
.field-wrap.full {width:100%;}
.field-wrap:nth-of-type(2n+0) {float: right}
.ie7 .field-wrap {overflow: visible; clear: both; width: 100%;}
.field-wrap > label {display: block; width: 30%; padding: 0.25em 0; float: left; display: none;}

.input-wrap {display: block; width:100%; float: right;}
.natural .input-wrap {display:inline-block; float: none; width: 7em; margin: 0; position: relative; }
.natural .input-wrap.small {width: 5em;}
.natural .input-wrap.big {width: 12em;}
:invalid {color: inherit; border: none;}


/*INPUTS*/

input[type="text"],
input[type="date"],
input[type="email"],
input[type="number"],
input[type="tel"],
textarea {width: 100%; max-width: 100%; border: none; border-bottom: 3px solid #999; padding: 0.25em 0.5em 0.25em 0; line-height:1.2em; background-color: transparent;}

.bg-green input[type="text"],
.bg-green input[type="date"],
.bg-green input[type="email"],
.bg-green input[type="number"],
.bg-green input[type="tel"],
.bg-green textarea,
.bg-green textarea:focus,
.bg-green .select-wrap,
.bg-green .select-wrap .handle::before {border-color: #517524; color: #517524;}

.natural input[type="text"],
.natural input[type="date"],
.natural input[type="email"],
.natural input[type="number"],
.natural textarea {display: inline-block; padding: 0 0.5em 0.1em 0; line-height:1.2em; font-weight: bold; margin-top: 0;}
.natural textarea {margin-top: 0.75em;}

input:focus, textarea:focus {border-color: #999; color: #302B27;}
.natural input:focus, .natural textarea:focus {border-color: #bbb; color: #517524;}

.bg-green .natural input, .bg-green .natural textarea {border-color: #fff; color: #517524;}
.bg-green .natural input:focus, .bg-green .natural textarea:focus {border-color: #fff; color: #517524;}

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

::-webkit-input-placeholder { color:#999; }
::-moz-placeholder { color:#999; } /* firefox 19+ */
:-ms-input-placeholder { color:#999; } /* ie */
input:-moz-placeholder { color:#999; }

.bg-green ::-webkit-input-placeholder { color:#517524; opacity: .6;}
.bg-green ::-moz-placeholder { color:#517524; opacity: .6;}
.bg-green :-ms-input-placeholder { color:#517524; opacity: .6;}
.bg-green input:-moz-placeholder { color:#517524; opacity: .6;}


/*SELECT*/

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

option {padding: 0.25em;}

.select-wrap {display: block; position: relative; height: 1.77em; bottom: 0; border-bottom: 3px solid #999; padding: 0; overflow: hidden;}
.select-wrap .handle {display: block; font-family: "FontAwesome"; font-size: 1.2em; font-style: normal; font-weight: normal; right: 0; top: 0; padding: 0.25em 0 0 0.5em; line-height: 1; position: absolute; text-rendering: auto; height: 100%; color: inherit;}
.select-wrap .handle::before {content:"\f107"; color: #302B27;}

.natural .select-wrap {height: 1.8em; bottom: -0.53em; border-bottom: 2px solid #ddd; background-color: #fff;}

.ie9 select {width: 120%;}
.ie8 select {height: 2.5em; padding: 0.5em;}
.ie8 .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.2em; left:0; width:1.5em; height:1.5em; background-color: #fff; border: 2px solid #000; margin: 0 1em 0 0; font-size: 0.8em; line-height: 1.5em;}
input[type="checkbox"] + label {display: block; padding: 0.25em 0 0 0; cursor: pointer; clear: both;}
input[type="checkbox"]:checked + label::before {content: "\f00c"; text-align: center; color: #8fc641;}

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.125em; left:0; width:1.52em; height:1.52em; background-color: transparent; border: 2px solid #999; margin: 0 1em 0 0; cursor: pointer; border-radius: 100%; font-size: 0.6em; line-height: 1.5em;}
input[type="radio"] + label {display: block; padding: 0.25em 0 0 0; cursor: pointer; clear: both;}
input[type="radio"]:checked + label::before {background: #8fc641; box-shadow: inset 0 0 0 0.325em #f5f5f5;}

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

.radio-group input[type="radio"] + label {margin: 0.75em 0.75em 0.5em 0; text-align: center; float: left; clear: none;}
.radio-group input[type="radio"] + label::before {margin: 0; float: none; top: -0.25em;}


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


/*RECAPTCHA*/
.grecaptcha-badge {position: relative !important; opacity: 0; box-shadow: none !important; right:0 !important; bottom: 0; margin-top: 1em; background-color: #fff !important; width: 70px !important; overflow: hidden !important; transition: all ease .5s !important; -webkit-transition: all ease .5s !important; -moz-transition: all ease .5s !important; -ms-transition: all ease .5s !important;}
.grecaptcha-badge:hover {width: 240px !important; opacity: 1;}
.grecaptcha-badge .rc-anchor-invisible-text {width: auto !important;}

/*SUBMIT*/

input[type="submit"], form button.btn {display: inline-block; border: none; padding: 0.35em 0.5em; line-height: 1em; background-color: #8fc641; color: #fff; font-weight: bold; border-radius: 0.15em; border-bottom: 2px solid #aaa;}
form .btn {margin:0 !important;}


/*FEHLERMELDUNG*/

/*ERRORS*/

.alert {display: none; margin: 1em 0 0 0; padding: 15px; border-radius: 0.15em;}
.alert.error {background-color: #fde8e9; border-color: #fde8e9; color: #ed1c27;}
.alert.success {background-color: #E8F2DC; border-color: #e0f1df; color: #8FC641;}
.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,
.select-wrap.error,
.select-wrap.error .handle,
.error label,
.error .input-wrap label,
.error input[type="radio"] + label:before,
.error input[type="checkbox"] + label:before {border-color: #fde8e9 !important;}
input:required:invalid {box-shadow: none;}

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