/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
	color: #000;
	font-family: 'Univers LT W01_45 Light1475944', sans-serif;
	font-size: 20px; /* 13px @ 1200px browserwidth */
	line-height: 25px;
}


/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
	background: rgba(0,119,139,1);
	color: #fff;
	text-shadow: none;
}

::selection {
	background: rgba(0,119,139,1);
	color: #fff;
	text-shadow: none;
}


/*
 * A better looking default horizontal rule
 */

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #000;
	margin: 16px 0;
	padding: 0;
}


/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
}


/*
 * Remove default fieldset styles.
 */

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}


/*
 * Allow only vertical resizing of textareas.
 */

textarea {
	resize: vertical;
}


/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
	margin: 16px 0;
	background: #ff5000;
	color: #fff;
	padding: 16px 0;
}


/* ==========================================================================
   Author's custom styles

   blue #00778b;
   red #e35205;
   grey #51534d;
   brown #8c7d69;
   lime #c8d400;
   green #7cbb4d;
   turquoise #66c1bf;

   font-family: 'brix-slab', serif;
       300/light (normal/italic)
       500/medium (italic)
       700/bold (normal)
       900/black (italic)

   font-family:'Univers LT W01_45 Light1475944', sans-serif;
   font-family:'Univers LT W01_45 Light1475950', sans-serif;
   font-family:'Univers LT W01_65 Bold1475968', sans-serif;
   font-family:'Univers LT W01_65 Bold_1475974', sans-serif;
   font-family:'Univers LT W01_47 Light1475998', sans-serif;

   transition: all .2s ease-out;

   .no-svg
   ========================================================================== */

* { box-sizing: border-box; }
img, embed, object { max-width: 100%; height: auto; width: 100%; }
body, html { background: #fff; }
a, a:visited { color: #e35205; cursor: pointer; text-decoration: none; transition: color .2s ease-out; }
a:hover { color: inherit; text-decoration: none; }
/*.to-1200 { display: block; }
.from-1200 { display: none; }*/
.center { text-align: center; } /* todo */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.fullwidth, .fullwidth-mobile { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
strong { font-family:'Univers LT W01_65 Bold1475968', sans-serif; }
.link--arrow-right > .icon { display: inline-block; height: 13px; margin-right: 10px; width: 15px; }

/* link styles */
a.link-arrow-right--white { background: url('/fileadmin/passiveattack/img/icon/arrow-right--white.svg') no-repeat left center; background-size: auto; color: #fff; padding-left: 20px; }
a.link-arrow-right--red { background: url('/fileadmin/passiveattack/img/icon/arrow-right--red.svg') no-repeat left center; background-size: auto; color: #e35205; padding-left: 20px; }


/* ==================================================
   http://embedresponsively.com/
   ================================================== */

.embed-container,
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }

.embed-container iframe, .embed-container object, .embed-container embed,
.video-embed iframe, .video-embed object, .video-embed embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/* ==================================================
   general form definitions
   ================================================== */

/*label {
	border: 1px solid #ff7777;
}

input[type="text"],
input[type="email"],
select,
textarea {
	background: #ffcc00;
	border: 1px solid #ff7777;
}

textarea { padding: 5em; }

input[type="radio"] {
	margin: 0;
}

input[type="checkbox"] {
	margin: 0;
}

input[type="submit"] {
	background: #ffcc00;
	border: 1px solid #ff7777;
	color: #ff7777;
	display: block;
	margin: 0;
	padding: 0;
	width: 10em;
	box-sizing: border-box;
	border-radius: .58em;
}*/


/* ==================================================
   icon
   ================================================== */

.icon {
	cursor: pointer;
	display: block;
	height: 100%;
	width: 100%;
}

.arrow-menu--white { background: url('/fileadmin/passiveattack/img/icon/arrow-menu--white.svg') no-repeat center center; background-size: 100% auto; }
.arrow-left--white { background: url('/fileadmin/passiveattack/img/icon/arrow-left--white.svg') no-repeat center center; background-size: 100% auto; }
.arrow-right--white { background: url('/fileadmin/passiveattack/img/icon/arrow-right--white.svg') no-repeat center center; background-size: 100% auto; }
.arrow-right--red { background: url('/fileadmin/passiveattack/img/icon/arrow-right--red.svg') no-repeat center center; background-size: 100% auto; }
.burger--white { background: url('/fileadmin/passiveattack/img/icon/burger--white.svg') no-repeat center center; background-size: 100% auto; }
.close--white { background: url('/fileadmin/passiveattack/img/icon/close--white.svg') no-repeat center center; background-size: auto 100%; }
.facebook--red { background: url('/fileadmin/passiveattack/img/icon/facebook--red.svg') no-repeat center center; background-size: auto 100%; }
.next--white { background: url('/fileadmin/passiveattack/img/icon/next--white.svg') no-repeat center center; background-size: auto 100%; }
.plus--white { background: url('/fileadmin/passiveattack/img/icon/plus--white.svg') no-repeat center center; background-size: auto 100%; }
.youtube--red { background: url('/fileadmin/passiveattack/img/icon/youtube--red.svg') no-repeat center center; background-size: auto 100%; }


/* ==================================================
   pageheader
   ================================================== */

.pageheader {
	background: #000;
	height: 96px;
	left: 0;
	overflow: visible;
	position: fixed;
	top: 0;
	transition: background .2s ease-out;
	width: 100%;
	z-index: 999;
}

.pageheader.bg-transparent { background: transparent; }


/* =========================
   logo
   ========================= */

.logo {
	background: url('/fileadmin/passiveattack/img/logo_passiveattack.svg') no-repeat center top;
	background-size: 100%;
	float: left;
	height: 50px;
	margin: 35px 0 0 5%;
	opacity: 1;
	transition: visibility .2s ease-out, opacity .2s ease-out;
	visibility: visible;
	width: 130px;
}

.logo.invisible { opacity: 0; visibility: hidden; }

.logo-big {
	background: url('/fileadmin/passiveattack/img/logo_passiveattack.svg') no-repeat center top;
	background-size: 100%;
	height: 166px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 295px;
}


/* =========================
   menu-btn
   (off-canvas-navigation)
   ========================= */

.menu-btn {
	position: absolute;
	height: 30px;
	right: 5%;
	top: 43px;
	width: 35px;
}


/* =========================
   next-btn
   (scroll down to content)
   ========================= */

.next-btn { display: none; }


/* ==================================================
   header img/video
   ================================================== */

.header-img {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	height: 140px;
	overflow: hidden;
	margin: 96px 0 40px;
}

.header-video {
	background: #8c7d69;
	height: 100vw;
	margin-bottom: 40px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.header-video__iframe {
	height: 100vw;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 177.777vw;
}

.header-video__overlay {
	background: rgba(0,0,0,0.25);
	height: 100vw;
	left: 50%;
	position: absolute;
	transform: translateX(-50%);
	width: 177.777vw;
}


/* =========================
   nav-main
   ========================= */

.nav-main { display: none; }


/* ==================================================
   content
   ================================================== */

.main__center { margin: 0 auto; width: 90%; }

/* font settings */
p { margin: 0 0 30px; }
p.text-center { text-align: left; }
ul { margin: 0 0 30px; padding: 0 0 0 20px; }
ul.ul-no-margin-top { margin-top: -30px; }
.t5 { color: #fff; font-family: 'brix-slab', serif; font-size: 30px; font-weight: 300; line-height: 35px; margin: 0 0 30px; }
.t6 { color: #00778b; font-family: 'brix-slab', serif; font-size: 30px; font-weight: 300; line-height: 35px; margin: 0 0 30px; }
.t6-line { }
.t7 { color: #8c7d69; font-family: 'brix-slab', serif; font-size: 30px; font-style: italic; font-weight: 900; line-height: 40px; margin: 0 0 30px; }
.t8 { color: #fff; font-family: 'brix-slab', serif; font-size: 30px; font-style: italic; font-weight: 900; line-height: 40px; margin: 0 0 30px; }
.t9 { color: #00778b; font-family: 'brix-slab', serif; font-size: 25px; font-weight: 300; line-height: 35px; margin: 0 0 30px; }
.t10 { color: #fff; font-family: 'brix-slab', serif; font-size: 25px; font-weight: 300; line-height: 35px; margin: 0 0 30px; }
.t11 { color: #00778b; font-family: 'brix-slab', serif; font-size: 25px; font-style: normal; font-weight: 300; line-height: 35px; margin: 0 0 10px; }
.t13 { color: #000; font-family: 'brix-slab', serif; font-size: 20px; font-weight: 700; line-height: 24px; }
.t14 { color: #000; font-family: 'brix-slab', serif; font-size: 20px; font-style: italic; font-weight: 300; line-height: 24px; }
.t15 { color: #fff; font-family: 'brix-slab', serif; font-size: 20px; font-style: italic; font-weight: 300; line-height: 24px; }
.t16 { color: #fff; font-family: 'brix-slab', serif; font-size: 20px; font-style: italic; font-weight: 500; line-height: 24px; }
.t17 { color: #000; font-family: 'brix-slab', serif; font-size: 20px; font-weight: 700; line-height: 24px; }
.t18 { color: #fff; font-family: 'brix-slab', serif; font-size: 20px; font-weight: 700; line-height: 24px; }

/* content-frames/-layouts */
.frame-layout-1 {} /* «eng» */
.frame-layout-2 {} /* > check ce-bundle !*/
.frame-layout-3 { cursor: pointer; margin: 0 auto 100px auto; width: 100%; } /* customer-slider*/
.frame-layout-3 ul { list-style: none; margin: 0; padding: 0; width: 100%; }
.frame-layout-3 li { color: #8c7d69; font-family: 'brix-slab', serif; font-size: 30px; font-style: italic; font-weight: 900; line-height: 40px; overflow: hidden; padding: 0 40px; text-align: center; width: 100%; white-space: nowrap; }

/* nav-sub */
.nav-sub { display: none; }

/*.content ul {
	list-style-type: none;
	margin: 0 0 1em;
	padding-left: 10px;
}

.content ul > li:before {
	content: "-";
	display: inline-block;
	float: left;
	margin-left: -10px;
	width: 10px;
}*/


/* ==================================================
   pagefooter
   ================================================== */

.pagefooter {
	background: #51534d;
	color: #fff;
	font-size: 20px;
	line-height: 45px;
	padding: 40px 0;
	width: 100%;
}

.pagefooter a { color: #fff; }
.pagefooter__center { margin: 0 auto; width: 90%; }

.pagefooter p,
.pagefooter ul { margin: 0 0 1em; }

.pagefooter__col1 { margin-bottom: 40px; }
.pagefooter__col2 { margin-bottom: 20px; }
.pagefooter__col3 { margin-bottom: 40px; }
.pagefooter__col4 { margin-bottom: 30px; }
.pagefooter__col5 {  }

.pagefooter__col3 p { margin-bottom: .5em; }
.nav-meta { list-style: none; margin: 0; padding: 0; }
.instagram { background: url('/fileadmin/passiveattack/img/icon/instagram--white.svg') no-repeat center center; display: block; height: 30px; width: 30px; }


/* ==================================================
   multi columns settings
   ================================================== */

.column--25 { width: 100%; }
.column--33 { width: 100%; }
.column--50 { width: 100%; }


/* ==================================================
   flickity slider
   > https://flickity.metafizzy.co/
   ================================================== */

.slide { text-align: center; width: 100%; }


/* ==================================================
   gridelements
   ================================================== */

/* =========================
   boxes
   ========================= */

.ge-box { height: 100%; margin-bottom: 15px; padding: 20px; }
.ge-box p:last-child { margin-bottom: 0; }
.ge-box ul:last-child { margin-bottom: 0; }

.ge-box--blue { background: #00778b; color: #fff; }
.ge-box--blue a { color: #fff; }

.ge-box--brown { background: #8c7d69; color: #fff; }
.ge-box--brown a { color: #fff; }

.ge-box--lime { background: #c8d400; color: #fff; }
.ge-box--lime a { color: #fff; }

.ge-box--red { background: #e35205; color: #fff; }
.ge-box--red a { color: #fff; }

.ge-box--turquoise { background: #66c1bf; color: #fff; }
.ge-box--turquoise a { color: #fff; }

.ge-box--green { background: #7cbb4d; color: #fff; }
.ge-box--green a { color: #fff; }


/* =========================
   ge-offers
   ========================= */

.ge-offers { margin: 0 auto; width: 80%; }


/* =========================
   ge-container-refbox
   ========================= */

.ge-container-refbox { margin-bottom: 100px; }


/* =========================
   ge-refslider-home
   ========================= */

.ge-refslider-home { margin: 0 auto 100px; width: 100%; }


/* ==================================================
   content elements
   ================================================== */

/* =========================
   ce-bluebox
   ========================= */

.ce-bluebox { margin-bottom: 30px; }
.ce-bluebox * { text-align: left; }
.ce-bluebox__h1 { color: #00778b; font-family: 'brix-slab', serif; font-size: 30px; font-weight: 300; line-height: 35px; margin: 0 0 30px; } /* similiar to .t6 */
.ce-bluebox__p { color: #000; font-family: 'brix-slab', serif; font-size: 20px; font-style: italic; font-weight: 300; line-height: 24px; margin: 0; } /* similiar to .t14 */


/* =========================
   ce-bundle
   ========================= */

.frame-layout-2 .ce-bundle {  }
.ce-bundle { margin-bottom: 50px; }
.ce-bundle__col { float: none; }
.ce-bundle__col--1 { margin: 0; width: 100%; }
.ce-bundle__col--2 { width: 100%; }
.ce-bundle__icon { margin-bottom: 50px; }
.ce-bundle__icon:hover { opacity: .5; transition: opacity .2s ease-out; }
.ce-bundle a .ce-bundle__h2 { color: #00778b; }
.ce-bundle a .ce-bundle__bodytext { color: #000; }
.ce-bundle__bodytext p:last-child { margin-bottom: 20px; }
.ce-bundle__box { background: #8c7d69; color: #fff; margin-bottom: 30px; padding: 20px; }
.ce-bundle .ce-bundle__box a { color: #fff; }
.ce-bundle__box p:last-child { margin-bottom: 0; }
.ce-bundle__slider { height: 93.75vw; }
.ce-bundle__slide { height: 100%; margin-right: 30px; width: 100%; }


/* =========================
   ce-offer
   ========================= */

.ce-offer { margin: 0 auto; width: 75%; }
.ce-offer__h2 { text-align: center; }
.ce-offer__bodytext { text-align: center; }


/* =========================
   ce-sampleslider
   ========================= */

.ce-sampleslider { margin: 0 auto 100px auto; width: 100%; }
.ce-sampleslider img { width: auto; }


/* =========================
   ce-ref
   ========================= */

.ce-ref__slider { margin: 0 auto 30px; width: 100%; }
.ce-ref__slider .flickity-slider { align-items: center; display: flex; justify-content: center; }
.ce-ref__slider img { width: auto; }
.ce-ref__slide .video { margin: 0; }
.ce-ref__slide .video iframe { max-height: 680px; }
.ce-ref__bodytext { margin: 0 auto 100px; text-align: left; width: 100%; }

.ce-ref-home__col1 { margin-bottom: 30px; overflow: hidden; width: 100%; }
.ce-ref-home__col2 { margin: 0 auto; text-align: left; width: 90%; }
.ce-ref-home__date { text-align: left; }
.ce-ref-home__header { text-align: left; }
.ce-ref-home__bodytext { text-align: left; }
.ce-ref-home__bodytext p { margin-bottom: 0; }


/* =========================
   ce-refbox
   ========================= */

.ce-refbox { width: 100%; }
.ce-refbox__wrap { position: relative; width: 100%; }
.ce-refbox__header { top: 50%; left: 50%; position: absolute; text-align: center; transform: translate(-50%, -50%); width: 75%; }
.ce-refbox__h2 { margin: 0 0 20px !important; }
.ce-refbox__icon { margin: 0 auto; height: 55px; width: 55px; }
.ce-refbox__overlay { background: #000; bottom: 0; left: 0; opacity: .5; position: absolute; right: 0; top: 0; }
.ce-refbox__a-main { bottom: 0; left: 0; position: absolute; right: 0; top: 0; }


/* =========================
   ce-table
   ========================= */

.ce-table { width: 100%; max-width: 100%; }
.ce-table th, .ce-table td { padding: 10px 0; vertical-align: top; }
.ce-table thead th { border-bottom: 1px solid #000; }
.ce-table th, .ce-table td { border-bottom: 1px solid #000; border-top: none;  }
/*.ce-table-striped tbody tr:nth-of-type(odd) { background-color: rgba(0,0,0,.05); }*/
/*.ce-table-bordered th, .ce-table-bordered td { border: 1px solid #dadada; }*/


/* =========================
   gallery
   provided by fluid_styled_content
   ========================= */

.ce-gallery figcaption { padding-top: 10px; }
/*.ce-gallery { width: 100%; }

.ce-gallery .ce-column { box-sizing: border-box; margin-right: 5%; padding: 0; }
.ce-gallery .ce-column:last-child { margin-right: 0; }

.ce-gallery[data-ce-columns="2"] .ce-column { width: 47.5%; }
.ce-gallery[data-ce-columns="3"] .ce-column { width: 30%; }

.ce-intext .ce-gallery { width: 50%; }
.ce-intext .ce-gallery[data-ce-columns="1"] .ce-column { width: 100%; }

.ce-gallery figcaption { padding-top: 10px; text-align: center; }
.ce-gallery figcaption span { display: block; }
.ce-gallery figcaption .caption-description { font-size: .8125em;}*/


/* ==================================================
   filelinks
   ================================================== */

/*ul.ce-uploads { list-style: none; margin: 0 0 1em !important; padding: 0; }
ul.ce-uploads li { border-bottom: 1px dotted #0b72b4; margin: 0 }
ul.ce-uploads li span { display: inline; }
ul.ce-uploads li a { display: block; padding: .5em 0; }
ul.ce-uploads li .ce-uploads-filetype { text-transform: uppercase; }
ul.ce-uploads li img { float: left; margin-right: .5em; width: 18px; }*/


/* ==================================================
   fancybox
   ================================================== */

/*.fancybox-slider-wrap { top: 64px; }
.fancybox-bg { background: #313033; }
.fancybox-container--ready .fancybox-bg { opacity: 1; }
.fancybox-caption-wrap { background: #313033; padding: 0; }

.fancybox-caption {
	border-top: 0;
	font-family: inherit;
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 1;
	padding: 17px 0;
	text-align: center;
}*/

.klink-fb-btn {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;

	background: none;
	border: none;
	z-index: 99999;
}

/*.klink-fb-btn--close { height: 25px; left: 20px; position: absolute; top: 63px; width: 25px; }*/
.klink-fb-btn--next { height: 26px; position: absolute; right: 20px; top: 48%; width: 26px; }
.klink-fb-btn--prev { height: 26px; left: 20px; position: absolute; top: 48%; width: 26px; }
/*.klink-fb-counter { bottom: 17px; font-size: 15px; left: 20px; line-height: 1; position: absolute; z-index: 99999; }*/


/* ==================================================
   flickity
   ================================================== */

.flickity-prev-next-button { border-radius: 0!important; height: 60px; width: 60px; }
.flickity-prev-next-button .arrow { fill: #e35205 !important; }
.flickity-prev-next-button.previous { left: -60px !important; }
.flickity-prev-next-button.next { right: -60px !important; }

.fullwidth-mobile .flickity-prev-next-button.previous { left: 10px !important; }
.fullwidth-mobile .flickity-prev-next-button.next { right: 10px !important; }

.frame-layout-3 .flickity-prev-next-button.previous { left: 10px !important; }
.frame-layout-3 .flickity-prev-next-button.next { right: 10px !important; }

/* ==================================================
   exceptions and overrides
   ================================================== */

#page-1 .ge-box--brown * { text-align: center; }
#page-6 .column--25 * { text-align: center; }
.ge-box--lime.fullwidth { margin-bottom: 100px; padding: 20px; }
.ge-box--lime.fullwidth .ce-intext.ce-right .ce-gallery,
.ge-box--lime.fullwidth .ce-intext.ce-left .ce-gallery,
.ge-box--lime.fullwidth .ce-above .ce-gallery { margin-bottom: 0; }






/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 */

.hidden {
	display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
	visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
	content: " "; /* 1 */
	display: table; /* 2 */
}

.clearfix:after {
	clear: both;
}