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

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

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



@media screen and (min-width: 1180px) {

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

.main .content {width: 28em;}

footer .content aside img {font-size: 1em;}

}

@media screen and (min-width: 1300px) {

body, html {font-size:26px;}


}

@media screen and (min-width: 1400px) {
.main .content {margin: 0 25%;}
}


@media screen and (min-width: 1600px) {

/*GRUNDRASTER
----------------------------------------------------------------- */
body, html {font-size:30px;}

}

@media screen and (min-width: 1940px) {

body, html {font-size:35px;}

}

@media screen and (min-width: 2200px) {

body, html {font-size:40px;}

}


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

/*GRUNDRASTER
----------------------------------------------------------------- */
.main .content  {width: 28em; margin: 0 auto;}
.main .content aside {width: auto; top: 0; right: 0; padding: 0; position: relative;}

section:last-of-type {background-color: #517524; padding-top: 3em;}
section:last-of-type a {color: #8fc641 !important;}
section:last-of-type a:hover {color: #6b9c30 !important;}
footer .content aside {font-size: 1em !important;}
footer .content aside img {position: relative; width: 10em !important; height: auto; bottom: inherit; margin: inherit; margin-left: -0.5em; padding-bottom: 1em;}

/* TEAMVIEW */
section.teamview .member {width: 25%;}

/* POPUP */
.popup-content {font-size: 1em;}

/* SMALL THINGS */
footer span.icon {color: #517524;}

}


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

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

.main .bypass {opacity:0;}
.main .content.wide {width: 36em; }


nav ul { width: 80%;}

.lang {position: fixed; top: 1em; right: .75em;}
.lang ul li {padding: 0 .15em;}



.bg-img.fullscreen img.bg {max-width: 1100px;}


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

.col4,
.col5,
.col2-5,
.col3-5,
.col4-5,
.col5-6,
.col6 {width: 50%;}
.col3-4 {width: 100%;}


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

section.instafeed h2{ opacity: 0;}
section.instafeed #instagram-container .instagram-block {width: 33.33334%;}
section.instafeed #instagram-container .instagram-block .container a p { font-size: .85em;}

section.reference .content h2,
section.reference.teaser:hover .content h2 {margin: 0 0 0.25em 0;}
section.reference .content a.btn,
section.reference.teaser:hover .content a.btn {opacity: 1; margin: 0.5em 0 0 0}
section.reference.teaser .content.highlights,
section.reference.teaser:hover .content.highlights {padding: 1em 0 1em 0; margin-top: 0; margin-bottom: 0;}

/* SLIDER FADING IN BACKGROUND */

section.bg-slider .bx-wrapper {top: 0; }

/* FULL WIDTH PARTS */
section.full-width-parts .row > div > div {padding: 1em 0;}


/* TEAMVIEW */
section.teamview .member {width: 33.33334%;}

/* EYEVIP ICONS */
.eyevip-icons .col4 {width: 25%;}


section.revealcards .cardback { padding: 1.375em;}
section.revealcards .cardback p{ font-size: 0.7em; line-height: 1.25; }

}


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

/*GRUNDRASTER
----------------------------------------------------------------- */
body, html {font-size:18px;}


.menu span {height: 5px;}

.filter { height: 2em;}
.lang ul,
.filter li,
.back a {padding: .375em .5em;}

.lang ul, .filter ul, .back a {font-size: 1em}

nav {font-size: 1.5em;}

.main .content,
.main .content.wide {width: auto; margin: 0 4em 1em 4em;}
.main .bypass {opacity:0;}
.raster {background-image: none !important; background-color: rgba(0, 0, 0, 0.4) !important;}


nav .subnav {display: none; padding:0;}
nav .subnav ul {list-style: none; text-transform: none; display: block; margin: 0; padding: 0.2em 0 0.1em 0; margin: 0 0 0 0.5em; font-size: 1em; line-height: 1;}


section.footer .content {margin-top: 2em;}

section.fullscreen {height: auto; min-height: 20em;}

.bg-img img.bg,
.bg-img.fullscreen img.bg {width: 1024px; min-height: 100%; min-width: none;}


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

section.reference.teaser * {transition: none !important;}
section.reference img.bg,
section.reference.teaser:hover img.bg {width: 100%;}
section.reference .content .logo {display: none;}
section.reference .content h2,
section.reference.teaser:hover .content h2 {padding: 0 !important}
section.reference .content h4 {display:none;}
section.reference.teaser .content {padding: 0 0 1em 0; margin-top: 1em; margin-bottom:0;}
section.reference.teaser .content.highlights,
section.reference.teaser:hover .content.highlights {border-bottom: none; margin-top:0; margin-bottom:0; padding-bottom: 0; padding-top: 1em;}
section.reference > .content a.btn,
section.reference.teaser:hover > .content a.btn {margin:0;}

section.reference {height: auto; padding: 2em 0;}
section.reference .center-center { width: 80%; margin:0 auto;}
section.reference .content { margin: 0;}
section.reference .content.highlights { margin: 0;border-bottom: none;}
section.reference .content h2 {font-family: 'alegreyablack_italic'; font-style:normal; line-height: 0.76; margin: 0 0 0.25em 0; padding: 0; font-weight: normal; z-index: 10;}
section.reference .content .logo {height: 4em;}
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;}
section.reference .content a {opacity: 1; transition: all ease-in-out .5s; margin: 0; }

section.reference.teaser {height: 15em;}
section.reference.teaser:hover > img {width: 100%;}
section.reference.teaser .center-center,
section.reference.teaser:hover .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 .content.highlights {}

section.reference.fullscreen {height: 24em;}
section.reference.fullscreen img.bg {}

/* SLIDER FULLSCREEN */
section.bg-slider.fullscreen {min-height: 20em; /*max-height: 27em;*/}

/* SLIDER FADING IN BACKGROUND */
section.bg-slider {min-height: auto;}

/* FIXED BACKGROUND SCROLLING */
section.bg-img.full-width-parts.fullscreen .content{ position: relative; top:0; left:0; margin: 3em 4em; transform: translate(0, 0); -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0);}

/* PRODUCTS */
section.macchina .fixed-bg{ background-attachment: scroll !important;}

/* SMALL THINGS */

a.scroll-down {display: none;}

footer span.icon {width: 2.25em; height: 2.25em;}
footer span.icon i {font-size: 1.25em;}

.row.logos > div{width: 33.333333%;}

/* EYEVIP ICONS */
.eyevip-icons img.icon {max-width: auto !important;}
.eyevip-icons p.small {font-size: 1.2em !important; line-height: 1;}

/* XMAS */
.gift {width: 25px;}


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

.field-wrap > label {width: 100%; padding: 0.2em 0;}
.input-wrap {width:100%;}

.natural input[type="text"],
.natural input[type="date"],
.natural input[type="email"],
.natural input[type="number"],
.natural textarea {margin-top: 0;}

}


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

/*GRUNDRASTER
----------------------------------------------------------------- */
body, html {font-size:16px;}

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

.menu {font-size: 1em; background:rgb(143, 198, 65); border-radius: 100%; width: 3em; height: 3em;}
.menu.open {background: #002753;}
.menu span {height: 3px; width: 50%; margin-top: 0.5em; margin-left: 0.45em;}
.menu span:last-of-type {top:1.3em;}
.back {display: none;}

.main {}
.main .content,
.main .content.wide {width: auto; margin: 0 2em 1em 2em;}

nav {font-size: 1.25em;}
nav > ul { top: 3em; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0);}
nav > ul a { line-height: 1.5;}

nav .subnav ul {margin: 0;}

section:first-of-type {padding: 4em 0 2em 0 !important;}
.bypass img {display: none;}

.bg-img img.bg,
.bg-img.fullscreen img.bg {width: 650px;}


/*TYPOGRAPHY
----------------------------------------------------------------- */
h1 {font-size: 2.6em;}
p.page-title {font-size: 2.6em;}
h4 {font-size: 1em; font-weight:bold;}
p.small, small {font-size: 1em !important;}


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

.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col2-3,
.col2-5,
.col3-4,
.col3-5,
.col4-5,
.col5-6 {width: 100%;}


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

h1 {margin: 0.75em 0 0.25em 0; padding: 0; font-weight: normal;}

/* FILTER */

.filter { width: 12em; height: 2.5em; display: block; position: fixed; z-index: 100; top: 0.75em; left: 3em; color: #fff; font-weight: bold;  text-align: left;}
.filter ul { list-style-type: none; margin: 0; padding: 0.25em 0em; background: transparent; border-radius: 3px; height: 3em; overflow: hidden;}
.filter ul.open { background: #002753; height: auto;}
.filter li { display: none; padding: .5em 0.75em; margin: 0; line-height: 1;}
.filter li:first-of-type { padding-top: 2.5em;}
.filter li:first-of-type.active { position: static; padding: .5em 0.75em;}
.filter li.active { top:0.25em; left:0; position: absolute; display: block !important; pointer-events: none;}
.filter li.active:after { content:""; display: inline-block; margin: 0 0 .125em .5em; padding: 0 0 0 0; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #fff;}
.filter li.active a {  color: #fff;}
.filter ul.open li { display: list-item; }

.back { left: 3em;}
.back a { padding: .5em .75em;}

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

/* INSTAFEED */
section.instafeed #instagram-container .instagram-block {width: 50%;}
section.instafeed #instagram-container .instagram-block .container a p { font-size: 1em;}

section.reference .content h2,
section.reference:hover .content h2 {padding: 0 0 0.25em 0; font-size: 2.6em;}

section.reference.fullscreen {height: auto;}


/* SLIDER FULLSCREEN */

/* FULL WIDTH PARTS */
section.full-width-parts .content {width: auto; margin: 0 3.5em; }
section.full-width-parts .row > div {padding:0; margin:0;}

.proj section:first-of-type{padding-top: 4em;}

/* FIXED BACKGROUND SCROLLING */
section.bg-img.full-width-parts.fullscreen .content{ margin: 3em 3em;}

.team-slider {font-size: 0.8em;}

.client-quotes {width: 100%;}
.client-quotes .col3 {width: 100%;}
.client-quotes .col2-3 {width: 100%;}
.client-quotes img {float: left; max-width:50%;}

.row.logos {margin-left: -5px; margin-right: -5px;}
.row.logos > div {padding-left: 5px; padding-right: 5px;}
.row.logos a {padding: 0;}
.row.logos a > img {padding:  0.5em}

img.icon {width: auto; max-width: 8em; margin: 1em auto;}

/* REVEALCARD */

section.revealcards {position: relative; padding: 2em 0;  background: #002753; }
section.revealcards .content {width: 100%; margin: 0;}
section.revealcards .content {text-align: left !important;}
section.revealcards .content .row {margin: 0;}
section.revealcards .card {width: 100%; height: auto; padding: .5em 3.5em; box-sizing: border-box;}
section.revealcards .card i.fa { font-size: 2em; width: 1em; margin: 8px .5em 8px 0; color: #8fc641; display: block;}
section.revealcards .card h2 { display: block; margin: 8px 0;}
section.revealcards .card p { display: inline-block; }
section.revealcards .cardfront, section.revealcards .cardback { box-sizing: border-box; position: relative; 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 .card:hover {cursor: default;}

section.revealcards .cardfront {padding: 0;}
section.revealcards .cardback {display: none;}
section.revealcards .card:hover .cardfront { transform: none;}
section.revealcards .card:hover .cardback { transform: none;}


/* TEAMVIEW */
section.teamview .member {width: 50%;}
/*section.teamview .member span {display: block;}*/


/* JOB BANNER */
.job-banner, .promo-banner {position: relative; top:0; left:0; width: 100%; margin:0 !important; overflow: auto; padding: 1em 0 0 0 !important;}
.job-banner h4, .promo-banner h4 {margin:0 0 .25em 0;}
.job-banner + .content, .promo-banner + .content {margin-top: 6em !important;}


/* EYEVIP ICONS */
.eyevip-icons {font-size: 0.7em;}
.eyevip-icons .col4 {width: 50%;}
.eyevip-icons .icon {width:100%;}

.row.add-ons > div {width: 100%; margin-bottom: 0.5em;}


}

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

.bg-img img.bg,
.bg-img.fullscreen img.bg {width: 480px;}

/* BUTTONS */

.bg-links br {display: block;}
.second {left: 0; position: inherit;}
br ~a.btn.second, br ~button.btn.second {margin-top: 0.5em;}

/* FORMULAR */

.field-wrap {width:100%; float: left; overflow: auto;}

}