/** 
	* Filename:     global.css
	* Version:      1.0.0 (2016-11-15)
	* Website:      http://www.zymphonies.com
	* Description:  Global Styles
	* Author:		support Team
					support@zymphonies.com
**/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: bottom; }

html { line-height: 1; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: auto;  overflow-y: scroll; overflow-anchor: auto; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }

/*Variables*/
/*Header*/
/*Menu Color*/
/*Mixins*/
/** @file Styles for system messages. */
.messages { background: no-repeat 10px 17px; /* LTR */ border: 1px solid; border-width: 1px 1px 1px 0; /* LTR */ border-radius: 2px; padding: 10px 20px 10px 20px; /* LTR */ word-wrap: break-word; overflow-wrap: break-word; margin: 5px 0px; }

.messages + .messages { margin-top: 1.538em; }

.messages__list { list-style: none; padding: 0; margin: 0; }

.messages__item + .messages__item { margin-top: 0.769em; }

/* See .color-success in Seven's colors.css */
.messages--status { color: #325e1c; background-color: #f3faef; border-color: #c9e1bd #c9e1bd #c9e1bd transparent; /* LTR */ box-shadow: -8px 0 0 #77b259; /* LTR */ }

/* See .color-warning in Seven's colors.css */
.messages--warning { background-color: #fdf8ed; border-color: #f4daa6 #f4daa6 #f4daa6 transparent; /* LTR */ color: #734c00; box-shadow: -8px 0 0 #e09600; /* LTR */ }

/* See .color-error in Seven's colors.css */
.messages--error { background-color: #fcf4f2; color: #a51b00; border-color: #f9c9bf #f9c9bf #f9c9bf transparent; /* LTR */ box-shadow: -8px 0 0 #e62600; /* LTR */ }

.messages--error p.error { color: #a51b00; }

/*FORM*/
/** @file Visual styles for form components. */
form .field-multiple-table { margin: 0; }

form .field-multiple-table .field-multiple-drag { width: 30px; padding-right: 0; /*LTR*/ }

form .field-multiple-table .field-multiple-drag .tabledrag-handle { padding-right: .5em; /*LTR*/ }

form .field-add-more-submit { margin: .5em 0 0; }

/*TABS*/
div.tabs { margin: 1em 0; }

ul.tabs { list-style: none; margin: 0 0 0.5em; padding: 0; }

.tabs > li { display: inline-block; margin-right: 0.3em; /* LTR */ }

.tabs a { display: block; padding: 6px 10px; text-decoration: none; font-size: 13px; background: #e6e6e6; line-height: 100%; color: #444; }

.tabs a.is-active { background-color: #fd2626; color: #fff; }

.tabs a:focus, .tabs a:hover { background-color: #ea1616; color: #fff; }

/** @file Seven styles for Tables. */
table { width: 100%; margin: 0 0 10px; }

caption { text-align: left; /* LTR */ }

th { text-align: left; /* LTR */ padding: 10px 12px; }

thead th { background: #f5f5f2; border: solid #bfbfba; border-width: 1px 0; color: #333; text-transform: uppercase; }

tr { border-bottom: 1px solid #e6e4df; padding: 0.1em 0.6em; }

thead > tr { border-bottom: 1px solid #000; }

tbody tr:hover, tbody tr:focus { background: #f7fcff; }

/* See colors.css */
tbody tr.color-warning:hover, tbody tr.color-warning:focus { background: #fdf8ed; }

tbody tr.color-error:hover, tbody tr.color-error:focus { background: #fcf4f2; }

td, th { vertical-align: middle; }

td { padding: 10px 12px; text-align: left; /* LTR */ }

th > a { position: relative; display: block; }

/* 1. Must match negative bottom padding of the parent <th> */
th > a:after { content: ''; display: block; position: absolute; top: 0; bottom: -10px; /* 1. */ left: 0; right: 0; border-bottom: 2px solid transparent; -webkit-transition: all 0.1s; transition: all 0.1s; }

th.is-active > a { color: #004875; }

th.is-active img { position: absolute; right: 0; /* LTR */ top: 50%; }

th.is-active > a:after { border-bottom-color: #004875; }

th > a:hover, th > a:focus, th.is-active > a:hover, th.is-active > a:focus { color: #008ee6; text-decoration: none; }

th > a:hover:after, th > a:focus:after, th.is-active > a:hover:after, th.is-active > a:focus:after { border-bottom-color: #008ee6; }

td .item-list ul { margin: 0; }

td.is-active { background: none; }

/* Force browsers to calculate the width of a 'select all' TH element. */
th.select-all { width: 1px; }

/** Captions. */
.caption { margin-bottom: 1.2em; }

/** Responsive tables. */
@media screen and (max-width: 37.5em) { /* 600px */
  th.priority-low, td.priority-low, th.priority-medium, td.priority-medium { display: none; } }
@media screen and (max-width: 60em) { /* 920px */
  th.priority-low, td.priority-low { display: none; } }
p { margin: 0 0 20px 0; }

.spacetop {
    margin-top: 5%;
    padding-right: 4%;
    margin-bottom: 2%;
}

.carlap {

    padding: 6% 10% 6% 12%;
    margin-top: 1%;
}

.teasertrash{

    padding: 10% 5% 1% 6%;
    margin-top: 1%;
}

.hukvid{
 padding-bottom: 3%;
}

.liefertxt {

padding: 5% 5% 10%;
    margin-top: 4%;

}

.parallax_blue {

    height: 120px;
    padding-top: 48px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-color: #00366b;
    color: #FFFFFF;
    background-attachment: fixed;
    padding-left: 5%;
    padding-right: 5%;
    margin-bottom: 0%;
    float: left;
    font-size: 36px;

}


.parallax_abfall {
 font-size: 40px;
}


.blktxt {

    width: auto;

}

h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
color: #1d539d;
font-weight: 600;
margin-bottom: 2%;
line-height: 150%;
letter-spacing: -0.5px;
font-family: "Open Sans", sans-serif;
text-align: left;
}

h1, .h1 { font-size: 1.55em; }

h2, .h2 { font-size: 1.3em; }

h3, .h3 { font-size: 1.2em; }

h4, .h4 { font-size: 1em; }

img { max-width: 100%; }

strong {

    font-weight: 500;
    color: #1d539d;

}

a { color: #19498c; }
a:hover {text-decoration: none; }

ol, ul { padding-left: 20px; margin-bottom: 20px; }
ol li, ul li { list-style: none; padding: 0px 0px; }

ol li { list-style-type: decimal; }

ul.links.inline { padding: 0; }
ul.links.inline li { list-style: none; }

.block { margin-bottom: 0px; }

#block-slidenew { top: 0px; }

body {
font-family: "Open Sans", sans-serif;
font-size: 14px;
line-height: 160%;
color: #58595b;
overflow-x: hidden;
font-weight: 400;
background: #fff;  }

/*Page title*/
.region-page-title h1 { margin: 20px 0; }

/*Footer Widget*/
.footerwidget { background: #108441; color: #86b59a; padding: 20px 0; border-top: 1px solid #f7f7f7; }
.footerwidget h2.title { color: #fff; }
.footerwidget .left { float: left; margin: 10px 10px 0 0; }

/*Google Map*/
.google_map p, .google_map .block { margin: 0; }
.google_map iframe { display: block; }

/*Credit Link*/
.credit-link { text-align: left; }

/*Social Media*/
.social-media { margin: 10px 0; overflow: hidden; float: left; }
.social-media a { width: 25px; height: 25px; color: #000; float: left; margin: 0 10px 0 0; text-align: center; line-height: 220%; font-size: 0.75em; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; }
.social-media a:hover { color: #1d539d; }

/*Form*/
input, button, select, textarea { padding: 6px; border: 1px solid #e3e3e3; }

.contact-message-form label { display: block; }

.btn, input[type="submit"] { background: #1d539d; color: #fff; border: 0; padding: 10px 15px; line-height: 100%; border-radius: 0; }

.btn:hover, input[type="submit"]:hover { background: #1d539d; color: #fff; }

/*Comment*/
.comment-wrap { overflow: hidden; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #F5F5F5; }
.comment-wrap .author-details { float: left; width: 20%; }
.comment-wrap .author-comments { padding-left: 5px; float: left; width: 80%; }
.comment-wrap .author-comments h3 { margin-top: 10px; }
.comment-wrap .author-comments p { margin-bottom: 10px; }

.comment-submitted { padding: 5px 10px; border: 1px solid #eee; display: inline-block; line-height: 100%; }

/*links Inline*/
ul.links.inline li { display: inline-block; padding-right: 10px; }

/*Sidebar Block*/
.sidebar .region h2.title { padding: 5px 0; margin: 0; }
.sidebar .region .content { padding: 10px 0; }

.region-content { min-height: auto; }

.path-frontpage .region-content { min-height: auto; }

/*Markup generated by Form API.*/
.form-item, .form-actions { margin-top: 1em; margin-bottom: 1em; }

tr.odd .form-item, tr.even .form-item { margin-top: 0; margin-bottom: 0; }

.form-composite > .fieldset-wrapper > .description, .form-item .description { font-size: 0.70em; line-height: 150%; }

label.option { display: inline; font-weight: normal; }

.form-composite > legend, .label { display: inline; font-size: inherit; font-weight: bold; margin: 0; padding: 0; }

.form-checkboxes .form-item, .form-radios .form-item { margin-top: 0.4em; margin-bottom: 0.4em; }

.marker { color: #e00; }

abbr.tabledrag-changed, abbr.ajax-changed { border-bottom: none; }

.form-item input.error, .form-item textarea.error, .form-item select.error { border: 2px solid red; }

/* Testimonials */
.testimonials-wrap { background: #fafafa; border-top: solid 1px #e3e3e3; border-bottom: solid 1px #e3e3e3; padding: 20px 0; text-align: center; font-size: 1em; line-height: 160%; }

.region-testimonials { max-width: 600px; margin: 0 auto; }

.testimonials-pic { width: 40px; height: 40px; display: inline-block; vertical-align: bottom; margin-right: 10px; }

.testimonials-pic img { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; }

.testimonials-author { padding: 0 5px; font-size: .75em; color: #555; }

/*Top Widget*/
.topwidget { text-align: center; }
.topwidget h2.title { margin: 20px 0; }
.topwidget .col-sm-4 { padding: 0; }
.topwidget .region { background: #fff; overflow: hidden; }

/*Front Page*/
.path-frontpage .feed-icon { display: none; }

.path-frontpage .content_layout { text-align: center; max-width: 750px; margin: 0 auto; padding: 20px 0; overflow: hidden; }

/*Region Homepage Message*/
.region-homepagemessage { padding: 20px 0; text-align: center; max-width: 750px; margin: 0 auto; }
.region-homepagemessage p, .region-homepagemessage .block { margin: 0; }

/*Address*/
.address-wrap { text-align: center; padding: 20px 0; background: url('../images/world-map.png?1475749338') gainsboro center no-repeat; }

/*Bottom Widgets*/
.bottom-widgets { text-align: center; margin: 0 auto; padding-bottom: 30px; background: #1d539d; color: #b4dec6; }
.bottom-widgets .block h2.title { margin: 5px 0 10px 0; color: #fff; }
.bottom-widgets .row > div { border-right: 1px solid #2ec16c; }
.bottom-widgets .row > div:last-child { border: 0; }

.path-frontpage .bottom-widgets { padding: 20px 0; }

/*Header*/
.main-header { background-size: cover; position: relative;
padding: 0 0;
width: auto;
height:47px;
z-index: 10;
}

.slidemarge {
  z-index: 99;background: #000;margin-top: -11px; height: 54px;position: relative;}
  
  
.main-header nav {
background: none;
border: 0;
margin-bottom: 0%;
position: relative;
min-height: auto;
border-radius: 0;
}

.main-header .region { position: relative; }
.main-header .block { margin: 0; }

/*Region Header*/
.site-branding { margin: 0; }

.brand.logo { margin-right: 3px; }

.region-header .brand { display: inline-block; vertical-align: middle; color: white; line-height: 120%; font-size: 1.3em; }
.region-header .brand a { color: white; }
.region-header .brand .site-branding__slogan { font-size: .7em; }

.region-contact-email .block { margin: 5px 0; }
.region-contact-email p { margin: 0; line-height: 120%; /*font-size: 2em;*/ }

/*Search Form*/
.search-block-form { margin: 0 auto; }

.region-search { clear: both; padding: 6px 0; }

#search-block-form { display: table; width: 100%; }
#search-block-form .form-item, #search-block-form .form-actions { display: table-cell; vertical-align: top; }
#search-block-form input.form-submit { background: url('../images/search.png?1452238642') no-repeat center #1d539d; font-size: 0; width: 100%; height: 30px; vertical-align: top; }
#search-block-form input { width: 100%; height: 30px; }

/*Breadcrumb*/
.breadcrumb { font-size: .85em; padding: 3px 10px; margin: 0; background: #fff; display: inline-block; }
.breadcrumb ul { padding: 0; margin: 0; }
.breadcrumb ul li { display: inline-block; }
.breadcrumb ul li:last-child span { display: none; }

/*Flexslider*/
.flexslider { border: 0; margin: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 0; }
.flexslider .slider-caption { display: none; position: absolute; top: 25%; right: 0; left: 4%; z-index: 999; width: 50%; text-align: left; font-size: 1em; line-height: 150%; padding: 0 15px; }
.flexslider h2 { font-weight: bold; font-size: 1.3em; display: inline-block; text-transform: uppercase; margin: 0; line-height: 100%; background: #1d539d; padding: 10px; color: #fff; }
.flexslider .slider-description { display: inline-block; clear: both; color: #000; padding: 10px; margin-bottom: 0px; background: #000; color: #fff; }
.flexslider .more-link { padding: 8px 10px; font-size: .9em; display: inline-block; font-weight: bold; text-transform: uppercase; color: #fff; }
.flexslider .slides li { position: relative; }
.flexslider .flex-direction-nav { display: none; position: absolute; top: 50%; width: 100%; }
.flexslider .flex-direction-nav li { list-style: none; }
.flexslider .flex-direction-nav a { font-size: 0; padding: 10px; }
.flexslider .flex-control-paging li a { width: 8px; height: 8px; display: block; background: #fff; cursor: pointer; text-indent: -9999px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; }
.flexslider .flex-control-nav { bottom: 0; }

/*Menu*/
.navbar-default .navbar-toggle { z-index: 999; margin-right: 0; border: 0; border-radius: 0; color: #fff; background: none; padding: 1px 6px; }
.navbar-default .navbar-toggle .icon-bar { display: block; width: 35px; height: 4px; border-radius: 1px; background-color: #fff; }
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background: none; }

nav h2 { display: none; }

.menu-base-theme {     background: none;
    font-size: 13.5px;
    letter-spacing: 0.03rem;
}

.menu-base-theme li a { color: #333333; background: #FBFBFB; border-bottom: 1px solid #EEF0F7; line-height: 100%; padding: 15px 15px; text-transform: uppercase; font-size: 0.95em; height: 50px;}
.menu-base-theme li a:hover, .menu-base-theme li a:focus, .menu-base-theme li a:active, .menu-base-theme li a.highlighted { background: none; color: #ffffff; line-height: 100%; padding: 15px 15px; bottom: 30%; outline: none;}
.menu-base-theme li a.sub-arrow { color: #999; font-size: 22px; padding: 5px; border-radius: 2px; border: 1px solid #DCDCDC; background: #EFEFEF; height: 25px; }
.menu-base-theme li a span.sub-arrow { line-height: 130%; font-size: 2em; }

.region-primary-menu { display: none; border-radius: 3px; width: 100%; }

/*Footer Menu*/
.footer-menu { margin: 0; border: 0; background: #f9f9f9; color: #fff; }

.region-footer-menu ul { margin: 0 0; padding-left: 2%; }
.region-footer-menu nav li { display: inline-block; }
.region-footer-menu nav li a { display: block; padding: 2px 15px 2px 0; }

/*Top Menu*/
.top-menu { padding: 10px 0; text-align: center; font-size: .75em; background: #f9f9f9; }

.region-top-menu ul { text-align: center; margin: 0; padding: 0; }
.region-top-menu nav li { display: inline-block; }
.region-top-menu nav li a { display: block; padding: 2px 10px; background: #3ad47b; color: #fff; text-transform: uppercase; font-weight: bold; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
.region-top-menu nav li a:hover { background: #23b962; }
.region-top-menu nav li:last-child a { background: #f00; }
.region-top-menu nav li:last-child a:hover { background: #f11818; }

/*Demo Typography*/
.bd-example { position: relative; padding: 20px; border: 2px solid #f7f7f9; }

.highlight { padding: 20px; background-color: #f7f7f9; }
.highlight pre { border: 0; background: none; }

.bd-example-type h1, .bd-example-type h2, .bd-example-type h3, .bd-example-type h4, .bd-example-type h5, .bd-example-type h6 { margin: 0; }
.bd-example-type .table td { padding: 15px 0; border-color: #eee; }
.bd-example-type .table tr:first-child td { border-top: 0; }

/*----------------------------
	Contact page
-----------------------------*/
.contact-message-feedback-form { max-width: 650px; margin: 0 auto; border: 1px solid #E9E8ED; padding: 10px 20px; background: #FDFDFD; }

.contact-message-feedback-form .form-text, .contact-message-feedback-form .form-email, .contact-message-feedback-form .form-textarea { width: 100%; }

/*----------------------------
	User Login Form
-----------------------------*/
.user-login-form, .user-form, .user-pass { max-width: 500px; margin: 40px auto; border: 1px solid #e6e6e6; padding: 5px 20px; background: #fdfdfd; }
.user-login-form .form-text, .user-login-form .form-email, .user-form .form-text, .user-form .form-email, .user-pass .form-text, .user-pass .form-email { width: 100%; }

.form-composite > .fieldset-wrapper > .description, .form-item .description { color: #999; font-style: italic; }

/*----------------------------
	Maintainance
-----------------------------*/
.maintenance-page { background: url('../images/maintenance-bg.png?1451969854') #66cbff center no-repeat; color: #fff; text-align: center; padding-top: 220px; padding-bottom: 100px; color: #000; }
.maintenance-page .brand, .maintenance-page .name-and-slogan { display: inline-block; vertical-align: middle; }
.maintenance-page .site-name a { color: #404040; }
.maintenance-page .site-slogan, .maintenance-page .name-and-slogan { display: none; }

.maintenance-msg { margin: 20px 0; background: rgba(242, 244, 207, 0.88); padding: 20px 30px; display: inline-block; color: #404040; border: 1px solid #fff; box-shadow: 5px 5px 0px #fff; }
.maintenance-msg h1 { text-transform: uppercase; font-weight: bold; }

/*----------------------------
	Profile Page
-----------------------------*/
.path-user .profile > div { display: inline-block; }
.path-user .profile .label { display: block; color: #333; }




#block-sliderbbg01, #block-slideren { margin-bottom: 0px; }

.parallaxbbgsection {
  width: 100%;
  }

.parallax01 {

    height: 100%;
    padding-top: 5%;
    width: 100%;
    background-size: cover;
    background-position: left;
    color: #58595b;
    float: left;
    margin-top: -190px;
    line-height: 24px;
    padding-bottom: 0%;
    padding-left: 0px;

}
    
  .parallax02 {
      background: rgb(243,240,232);
        background-attachment: scroll;
        background-position-x: 0%;
        background-position-y: 0%;
        background-size: auto auto;
    max-height: 2400px;
    padding-top: 100px;
    width: 100%;
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    padding-left: 12%;
    background-attachment: fixed;
    padding-right: 11%;
    padding-bottom: 100px;
}

      
.parallax03 {
    background: #fff;
        background-attachment: scroll;
        background-position-x: 0%;
        background-position-y: 0%;
        background-size: auto auto;
    max-height: 1200px;
    height: 100%;
    margin-top: -8px;
    background-size: cover;
    background-position: center;
    color: #636566;
    background-attachment: fixed;
}
          
.parallax_lieferprogramm01{
background-image: url('/sites/default/files/huk2_para_netz_lieferprogramm.jpg');
height: 220px;

padding-top: 100px;

width: 100%;

background-size: cover;

background-position: center;

color: #FFFFFF;

background-attachment: fixed;

padding-left: 5%;

padding-right: 5%;
font-size: 40px;
}


.parallax_lieferprogramm02 {
background-image: url('/sites/default/files/HUK2-Paralax2-NETZ-C.jpg');
height: 220px;

padding-top: 100px;

width: 100%;

background-size: cover;

background-position: center;

color: #FFFFFF;

background-attachment: fixed;

padding-left: 5%;

padding-right: 5%;
}

.teasercar {

    margin-top: 9.5%;
    margin-bottom: 8%;

}

.parallax_zuverlassig{
background-image: url('/sites/default/files/HUK3-Paralax-3-NETZ-C.jpg');
height: 220px;

padding-top: 100px;

width: 100%;

background-size: cover;

background-position: center;

color: #FFFFFF;

background-attachment: fixed;

padding-left: 5%;

padding-right: 5%;
}

.parallax_COPARTS {
background-image: url('/sites/default/files/HUK3-Paralax2-NETZ-C.jpg');
height: 220px;

padding-top: 100px;

width: 100%;

background-size: cover;

background-position: center;

color: #FFFFFF;

background-attachment: fixed;

padding-left: 5%;

padding-right: 5%;
}


.parallax_schulungen {
background-image: url('/sites/default/files/HUK3-Paralax1-NETZ-C.jpg');
height: 220px;

padding-top: 100px;

width: 100%;

background-size: cover;

background-position: center;

color: #FFFFFF;

background-attachment: fixed;

padding-left: 5%;

padding-right: 5%;
font-size: 40px;
}

    
.parallax_liefer {

    background-image: url('/sites/default/files/parallax01_heise_klatte.jpg');
    height: 220px;
    padding-top: 100px;
    width: 100%;
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    background-attachment: fixed;
    padding-left: 5%;
    padding-right: 5%;

}


.parallax_front {
background-image: url('/sites/default/files/parallax01_heise_klatte.jpg');
height: 220px;

padding-top: 100px;

width: 100%;

background-size: cover;

background-position: center;

color: #FFFFFF;

background-attachment: fixed;

padding-left: 5%;

padding-right: 5%;

font-size: 40px;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}




.parallax_front_karriere {
background-image: url('/sites/default/files/Karriere-Paralax_DSC9812ggg-END.jpg');
height: 220px;

padding-top: 100px;

width: 100%;

background-size: cover;

background-position: center;

color: #FFFFFF;

background-attachment: fixed;

padding-left: 5%;

padding-right: 5%;

font-size: 40px;

}

.parallax_dienstleistungenservice {

    background-image: url('/sites/default/files/Paralax_Werder_Bremen.jpg');
    height: 220px;
    padding-top: 90px;
    width: 100%;
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    background-attachment: fixed;
    padding-left: 5%;
    padding-right: 5%;
    line-height: 1.1;
    font-size: 40px; 

}


.parallax_blue {

    height: 120px;
    padding-top: 48px;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-color: #00366b;
    color: #FFFFFF;
    background-attachment: fixed;
    padding-left: 5%;
    padding-right: 5%;
    margin-bottom: 0%;
    float: left;
}

.karri {

 padding: 5%;
 color: #ffffff;
 height: 450px;
}

.parallax_aktuell{
    background-image: url('/sites/default/files/HUK4-Paralax1-NETZ.jpg');
height: 220px;

padding-top: 100px;

width: 100%;

background-size: cover;

background-position: center;

color: #FFFFFF;

background-attachment: fixed;

padding-left: 5%;

padding-right: 5%;
font-size: 40px;
}

.parallax_abfall{
    background-image: url('/sites/default/files/HUK3-Paralax4-NETZ-C.jpg');
height: 220px;

padding-top: 100px;

width: 100%;

background-size: cover;

background-position: center;

color: #FFFFFF;

background-attachment: fixed;

padding-left: 5%;

padding-right: 5%;

}
 #block-views-block-schulungstermine-block-1{
    padding: 5%; 
}

#block-views-block-onlineschulungen-block-1 {
    padding: 5%;
}
 
.titel-schulungen{
 color: #19498c;
 }
 
.untertitel-schulungen {

    color: #58595b;


}

.fx {

    max-height: 600px;
    padding: 0.5%;
    margin-bottom: 3%;
    height: auto;
    min-height: 470px;

}

.views-label-field-aufgaben{
 font-weight: bold;
}

.views-label-field-profil{
 font-weight: bold;
}

.views-field-field-profil{
 padding-left: 11%;
}

.views-field-field-aufgaben{
 padding-left: 11%;
}

.views-field-field-jetzt-bewerben{
 padding-left: 11%;
}

.Jobsframe {
color: #ffffff;
width: 100%;
}

.color {
height: 380px;
float: left;
margin-bottom: 1%;
}

#edit-telefon {
    width: 49.8%;
}


.color2 {
background: #1d539d;
height: 450px;
float: left;
margin-bottom: 1%;
}

#block-webform-2 {

    float: left;
    width: 50%;
    margin-left: 5.8%;

}


.jobstitel {

    color: #ffffff;
    font-size: 1.5rem;
    padding-bottom: 2%;
    padding-top: 1%;
    font-weight: 600;
    line-height: 1.9rem;
    }

.pleft {
 padding-left: 11%;
}

.col-2{
 background: #808dc0;
}

.aufgabenclass {
 padding-left: 5%;
 font-weight: 600;
 font-size: 30px;
}


.button {

    background: #ffffff;
    width: 120px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 2px;
    padding-bottom: 3px;
}

#edit-kontakt-first {

    float: left;
    width: 39%;
    margin-top: -13px;
    margin-right: 2%;

}

#edit-e-mail {

    float: left;
    margin-right: 1%;
    width: 36.8%;
}

#edit-kontakt-middle {

    float: left;
    width: 59%;
    margin-top: -13px;

}

#edit-name2-first {

    float: left;
    width: 49%;
    margin-right: 1%;}

#edit-firma-first {

    width: 100%;
}

.kontaktmail {

    width: 132%;

}
 
#edit-name2-middle {

    float: left;
    width: 50%;

}

.google_map {
    background: #1d539d;
    height: 40px;
    padding-top: 8px;
    color:#fff;
    font-family: 'Oswald', sans-serif;
    font-weight: 100;
    font-size: 0.7em;
}
   
   
  .parallax10 {
    background-image: url('/sites/default/files/lsb_bg_footer.jpg');
    height: 220px;
    padding-top:55px;
    width: 100%;
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    padding-left: 5%;
    padding-right: 5%;
    background-attachment: fixed;
    }    
       
       
    .parallaxblue {
   background-image: url('/sites/default/files/bbg_parallax_kontakt.jpg');
    height: 220px;
    padding-top: 100px;
    width: 100%;
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    padding-left: 5%;
padding-right: 5%;
    }

.titelkontakt {

    margin-left: 4%;
    padding-top: 2%;
    font-weight: 800;
    font-size: 1.3em;
    color: #1d539d;

}

.kontakttxt {

    margin-left: 4%;
    font-size: 19px;
    font-weight: 400;
    letter-spacing: 0.8px;
    line-height: 1.5;

}

.filil {

    margin-top: 18%;
    padding-left: 26%;

}

.fililoef {

    margin-top: 18%;
    width: 40%;
    margin-left: 5%;

}

.anschrift {
    margin-left: 6%;
    width: 44%;
    margin-top: 25%;
}

  .mobile {
    display: none;
}

.karte {
position: absolute;
right: 0;
float: right;
margin-top: 12%;

}
  
.standorte {

padding-left: 10%;

padding-right: 3%;

padding-top: 17%;

padding-bottom: 13%;

} 
    
.lastbox {
  margin-bottom:10%;
 } 
   
       
.infobox {
  border:0.5px solid #636566; margin-top:10%;max-height: 570.5px;
 } 

.infoboxcontent {
margin-top:45%; margin-left:12%;
 }

.infoboxcontent2 {
margin-top:-13.5%; margin-left:55%;
 }
 
 
 .infoboxcontent2b {
margin-top: -22%;
margin-left: 51%;
}
 
 .logostreet{
margin-top: 10.5%;
margin-left: 25.4%;
 }
 
 
.partnerbbg {
  padding-right: 5%;
	
}

.partnerbbgjus {
	text-align: justify;
}

.bbgblue {
color: #001D49;
padding-bottom: 5%;
font-weight: 600;

} 
    
.newsbbg {
	padding-top: 17%;
}

#block-slidemobil{
	display: none;
}

.md-main-img {
    z-index: -99;
}
    
.bbgteamname {
	text-align: center;
	font-weight: 800;
	margin-top: 5%;
	color: #001D49;
}   

.bbgteamnamefirst {
	text-align: center;
	font-weight: 800;
	margin-top: 1%;
	color: #001D49;

}

.bbgteampos {
	text-align: center;
	font-size: 0.8rem;
	color: #001D49;
}   

.bbgtxtjobs  {
	color: #001D49;
	font-weight: 600;
	margin-top:1%;
	margin-bottom:1%;
}         
    
    
#accordion input {
	display: none;
}
#accordion label {
	background: none;
	cursor: pointer;
	display: block;
	margin-bottom: .125em;
	padding: 0 0;
	z-index: 20;
}
#accordion label:hover {
	background: none;
}

#accordion input:checked + label {
	background: #FFC949;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	color: #001D49;
	margin-bottom: 0;
}
#accordion article {
	background: #ffffff;
	height:0px;
	overflow:hidden;
	z-index:10;
}
#accordion article p {
	padding: 1em;
}
#accordion input:checked article {
}
#accordion input:checked ~ article {
	border-bottom-left-radius: .25em;
	border-bottom-right-radius: .25em;
	height: auto;
	margin-bottom: .125em;
}


.bbg1970 {
font-size: 0.8rem;
line-height: normal;
text-align: right;
float: right;
margin-top: -1%;
}


.zeppenfeld {
text-align: right;
float: right;
padding-top: 24.6%;
font-size: 0.8rem;
line-height: normal;
}

.kursiv {
font-style:italic;
}

.efvEditordiv td {

    border-left: 7px solid #cfcfcf;
    padding-left: 4px;
    line-height: 1.4em;

}

.efvEditordiv td {

    line-height: 1.4em;

}

#shiva
{
  width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
  float:left;
  margin:5px;
}
.count
{
  line-height: 100px;
  color:white;
  margin-left:30px;
  font-size:25px;
}
#talkbubble {
   width: 120px;
   height: 80px;
   background: red;
   position: relative;
   -moz-border-radius:    10px;
   -webkit-border-radius: 10px;
   border-radius:         10px;
  float:left;
  margin:20px;
}
#talkbubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
}

.linker
{
  font-size : 20px;
  font-color: black;
}


.bbg1970 {
  
}

.limolist {
color: #B2B4B6;
}

.titellimolist{
font-size: 1.3rem;
color: #B2B4B6;
font-weight: 800;
padding: 10px 0 4px 0px;
}



.bbgtitel {
font-size: 2rem;
font-weight: 800;
color: #B1B3B5;
padding: 20px 0 40px 0;
line-height: 2rem;
}

.shipmanagement{
   margin-top: 6%;
}

.bbgtxtleft{
   padding-right: 2%;
   margin-bottom: 3%;
}

.bbgtxtright{
padding-left: 2%;
margin-bottom: 5%;
float: right;
margin-top: 0.6%;
}

.flotte{
padding-right: 9.35%;
background: #FFC949;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 2.84rem;
}


.flotte2cargo {
    padding-right: 0.39%;
    background: #fff;
    padding-left: 1.5%;
    padding-top: 1%;
    padding-bottom: 1%;
    line-height: 100%;
}



.flottetyp{
padding-right: 16%;
background: #FFC949;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flottekapa {
    padding-right: 10%;
    background: #FFC949;
    padding-left: 1.5%;
    padding-top: 1%;
    padding-bottom: 1%;
    line-height: 100%;
}


.flotte1{
padding-right: 8.833%;
background: none;
padding-left: 1.5%;
padding-top: 0%;
padding-bottom: 0%;
line-height: 100%;
}

.flotte1a{
padding-right: 6.02%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}


.flottealmadin{
padding-right: 7.226%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotte3a{
padding-right: 6.3%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotte4a{
padding-right: 7.3%%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotte5a{
padding-right: 5.3%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotte6a{
padding-right: 5.483%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}


.flotteamazonit{
padding-right: 6.49%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotteametrin{
padding-right: 7.359%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotteazurit{
padding-right: 8.6%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotteperidot{
padding-right: 7.6%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}


.flottearagonit{
padding-right: 7.073%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}



.flottelapislazuli{
padding-right: 5.8%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flottenautical{
padding-right: 3.5%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flottehilary{
padding-right: 5.596%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotte2ultramax{
padding-right: 10.65%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotteloredana{
padding-right: 3.334%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flottesif{
padding-right: 7.397%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotteruna{
padding-right: 5.57%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotteelisabeth{
padding-right: 3.59%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flottemarie{
padding-right: 5.2%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flottejennifer{
padding-right: 3.505%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flottelucia{
padding-right: 5.495%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flottealice{
padding-right: 6.26%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotteanne{
padding-right: 5.98%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flottegeorgia{
padding-right: 4.352%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flottetransanit{
padding-right: 8.324%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotte2panmax{
padding-right: 8.3%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotte2panmax2{
padding-right: 7.7%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flottetopas{
padding-right: 10.421%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}
.flottetuerkis{
padding-right: 9.394%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotteturmalin{
padding-right: 6.959%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flottelaura{
padding-right: 9.706%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotteedgar{
padding-right: 9.969%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flottediana{
padding-right: 10.931%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotteliberta{
padding-right: 10.2%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}


.flotteimpala{
padding-right: 10.299%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flottesagitta{
padding-right: 10.324%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flottetatjana{
padding-right: 10.106%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotteyear {
    padding-right: 6%;
    background: #FFC949;
    padding-left: 1.5%;
    padding-top: 1%;
    padding-bottom: 1%;
    line-height: 100%;
}


.flottedetails {
    padding-right: 1.35%;
    background: #FFC949;
    padding-left: 1.5%;
    padding-top: 1%;
    padding-bottom: 1%;
    line-height: 100%;
}

.flotteheight{
    padding-right: 8%;
    background: #FFC949;
    padding-left: 1.5%;
    padding-top: 1%;
    padding-bottom: 1%;
    line-height: 100%;
}

.flotte3pana{
padding-right: 10.5%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotte4pana{
padding-right: 7.42%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;;
}





.flotte2{
padding-right: 9.9%;
background: none;
padding-left: 1.5%;
padding-top: 0%;
padding-bottom: 0%;
line-height: 100%;
}

.flotte2supramax{
padding-right: 6.99%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}


.flotte3{
padding-right: 10.7%;
background: none;
padding-left: 1.5%;
padding-top: 0%;
padding-bottom: 0%;
line-height: 100%;
}

.flotte4{
padding-right: 8%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotte4ultramax{
padding-right: 7.3%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}


.flotte5{
padding-right: 8.97%;
background: #fff;
padding-left: 1.5%;
padding-top: 1%;
padding-bottom: 1%;
line-height: 100%;
}

.flotte6{
margin-right: 5.6%;
background: #001D49;
margin-left: 2.5%;
padding-top: 0.5%;
padding-bottom: 0.5%;
line-height: 100%;
padding-left: 1%;
color: #FFD271;
padding-right: 1%;
}


.flotte7a{
padding-right: 4.3%;
color: #58595B;
padding-left: 1.5%;
}



.flotte10a{
padding-right: 7.39%;
color: #58595B;
padding-left: 1.5%;

}



.flot1{
background: #DCDDDE;
padding-left: 1.5%;
color: #58595B;
}

.flot2{
background: #DCDDDE;
padding-right: 1.4%;
text-align: right;
color: #58595B;
}

.flot3{
background: #ffffff;
padding-left: 1.5%;
color: #58595B;
}

.flot4{
background: #ffffff;
padding-left: 6.5%;
color: #58595B;
padding-right: 1.4%;
text-align: right;
}


.bbgimg{
margin-left: 2%;
padding-top: 2%;
width: 31%;
}



.center{
text-align: center;
}

.topcolor{
background: #FFC949;
border-radius: .25em;
cursor: pointer;
display: block;
margin-bottom: .125em;
padding: 0 0;

}

.topcolor01{
color: #001D49;
padding-left: 0;
padding-top: 1%;
padding-bottom: 2%;

}

.topcolor02{
background: #ffffff;
color: #58595B;
padding-left: 0;
padding-top: 1%;
padding-bottom: 1.1%;
margin-bottom: 2%;
border-left: 1px solid;
border-right: 1px solid;
border-bottom: 1px solid;

}


.views-field-title {

    font-size: 0.9rem;
    font-weight: 800;
    color: #001D49;
    padding-top: 4%;

}

.views-field-field-information{
font-weight: 600;
font-size: -0.3rem;
color: #001D49;
padding-bottom: 2%;

}

.textbbg{
  width: 50%;
  float: left;
  text-align: justify;
}

.bildbbg{
width: 48%;
float: left;
text-align: right;
margin-bottom: 3%;
margin-left: 2%;
}


.block-jobsbeiderbbg{
margin-top:2%;
}


#sticky-wrapper{
width: 100%;
height: 59px!important;
}

#logo_navi{
padding-top: 5%;
margin-left: 28%;
}

.slideoverlay{
background-image: url("http://www.bbg.werbeagentur-lange.de/sites/default/files/md-slider-image/logo_bbg_0.png");
background-repeat: no-repeat;
z-index: 9999;
}


.impressum{
padding-top: 5%;
}


.tele{
color: #D9C160;
padding: 7px 0;
font-weight: 600;
width: 150px;
font-size: 11.5px;
}


.hidenondesktop{
 display: none;
}

.limosmall{
width: 36%;
padding-left: 1.9%;
float: right;
padding-bottom: 2%;

}

.limobig{
 width: 63.29%;
 padding-bottom:2%;
}


.titelk{
font-weight: 600;
}

.Titelbild{
height: 250px;
margin-top: 10%;
}

.konzepteHuK {

    padding-right: 5%;

}


.hinweismwst{
 padding-top: 2%;
  padding-bottom: 2%;
}

.md-slider-wrap{
    top: 0%;
} 


.logo {

    width: 150px;
    margin-top: 10%;
    float: left;
    margin-left: -120%;

}

.is-sticky{
margin-top: -1px;
} 

@import url(https://fonts.googleapis.com/css?family=Cabin:700);


.circle-container {
	position: relative;
	perspective: 1000;	
	margin: 0 auto;	
}
		
.circle-container:hover .circle {
	transform: rotate3d(45, 45, 0, 180deg);
}
		
.circle-container:hover .outer-ring {
	transform: rotate3d(45, 0, 0, 180deg);
}

.circle-container:hover .outer-outer-ring {
	transform: rotate3d(0, 45, 0, 180deg);
}
		
.circle-container, .front, .back {
	width: 175px;
	height: 175px;
	background-color: rgba(0,0,0,0);
}
		
.circle, .outer-ring, .outer-outer-ring {
	transition: 0.5s;
	transform-style: preserve-3d;
	transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
}
		
.circle {
	position: relative;
	width: 175px;
	height: 175px;
}
		
.front, .back {
	border-radius: 50%;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
}
		
.front {
	background-color: #fff;
	z-index: 2;
}
		
.front p {
	margin-top: 1.2em;
	font-family: cabin, sans-serif;
	font-weight: 700;
	font-size: 3em;
	text-align: center;
	color: #c02227;
}
		
.back {
	transform: rotate3d(45,45,0,180deg);
	background-color: #fff;
}
		
.back-logo {
	width: 60%;
	display: block;
	margin: 2em auto;
}
		
.outer-ring {
	position: absolute;
	top: -10px;
	left: -10px;
	border-radius: 50%;
	border: 2px solid #fff;
	width: 191px;
	height: 191px;
	background-color: rgba(255,255,255,0);
	box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
}

.outer-outer-ring {
	position: absolute;
	top: -20px;
	left: -20px;
	border-radius: 50%;
	border: 2px solid #fff;
	width: 211px;
	height: 211px;
	background-color: rgba(255,255,255,0);
	box-shadow: 0px 0px 20px rgba(0,0,0,0.4);
  color: #636566;
}


.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
}

	.flip-container:hover .flipper,  
  .flip-container.hover .flipper {
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 250px;
	height: 250px;
}

.flipper {
	-webkit-transition: 0.6s;
	-webkit-transform-style: preserve-3d;

	-moz-transition: 0.6s;
	-moz-transform-style: preserve-3d;
  
  -o-transition: 0.6s;
	-o-transform-style: preserve-3d;

	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

.front, .back {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

.front {
	z-index: 2;
}

.frontsteintor {
	background: url(/sites/default/files/inline-images/unsere_leistungen_steintor2_back.png) 0 0 no-repeat;
}

.frontneustadt {
	background: url(/sites/default/files/inline-images/unsere_leistungen_neustadt.png) 0 0 no-repeat;
}

.frontcampus {
	background: url(/sites/default/files/inline-images/unsere_leistungen_campus.png) 0 0 no-repeat;
}



.back {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
	transform: rotateY(180deg);
  z-index: 999;
}

.backsteintor {
	background: url(/sites/default/files/inline-images/unsere_leistungen_steintor_back.png) 0 0 no-repeat;
}

.backneustadt {
	background: url(/sites/default/files/inline-images/unsere_leistungen_neustadt_back.png) 0 0 no-repeat;
}

.backcampus {
	background: url(/sites/default/files/inline-images/unsere_leistungen_campus_back.png) 0 0 no-repeat;
}

.front .name {
	font-size: 2em;
	display: inline-block;
	background: rgba(33, 33, 33, 0.9);
	color: #f8f8f8;
	font-family: Courier;
	padding: 5px 10px;
	border-radius: 5px;
	bottom: 60px;
	left: 25%;
	position: absolute;
	text-shadow: 0.1em 0.1em 0.05em #333;

	-webkit-transform: rotate(-20deg);
	-moz-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
	transform: rotate(-20deg);
}

.back-logo {
	position: absolute;
	top: 40px;
	left: 90px;
	width: 160px;
	height: 117px;
	background: url(/sites/default/files/inline-images/unsere_leistungen_back.png) 0 0 no-repeat;
}

.back-title {
	font-weight: bold;
	color: #00304a;
	position: absolute;
	top: 180px;
	left: 0;
	right: 0;
	text-align: center;
	text-shadow: 0.1em 0.1em 0.05em #acd7e5;
	font-family: Courier;
	font-size: 2em;
}

.back p {
	position: absolute;
	bottom: 40px;
	left: 0;
	right: 0;
	text-align: center;
	padding: 0 20px;
  font-family: arial;
  line-height: 2em;
}


.topmarge{
	    margin-top: 5%;
    margin-left: 1%;
}

.bottommarge{
	    margin-bottom: 5%;
}

.tab-content > .active {
padding: 3% 5% 5%;
margin-top: 5%;
}

#inv-tab-item-775849152{
background: #ffffff;
margin-bottom: 5%;
margin-top: 4%;
border: 0.5px solid rgb(35,31,32);
line-height: 180%;
}

#inv-tab-item-1755690100{
background: #ffffff;
margin-bottom: 5%;
margin-top: 4%;
border: 0.5px solid rgb(35,31,32);
line-height: 180%;
}

#inv-tab-item-640057731{
background: #ffffff;
margin-bottom: 5%;
margin-top: 4%;
border: 0.5px solid rgb(35,31,32);
line-height: 180%;
}

.rotate{
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
transform: rotate(-2deg);
width: 100%;
font-size: 4em;
font-weight: 600;
font-family: 'Oswald', sans-serif;
letter-spacing: 0.06em;
color: rgb(201,37,44);
margin-bottom: 10%;
line-height: 100%;
}


.headingjob{
width: 100%;
font-size: 1.3em;
font-weight: 600;
font-family: 'Oswald', sans-serif;
letter-spacing: 0.05em;
margin-bottom: 1%;
line-height: 140%;
}

.job{
font-size: 3em;
font-weight: 600;
font-family: 'Oswald', sans-serif;
color: rgb(201,37,44);
margin-top: 2%;
line-height: 100%;
letter-spacing: 0.15rem;
}

.gender{
font-size: 3em;
font-weight: 600;
font-family: 'Oswald', sans-serif;


@font-face {
 font-family: 'Oswald', sans-serif
src: url('/fonts/oswald-v36-latin-200.svg');
src: url('/fonts/oswald-v36-latin-200.woff2');
src: url('/fonts/oswald-v36-latin-200.ttf');
src: url('/fonts/oswald-v36-latin-300.svg');
src: url('/fonts/oswald-v36-latin-300.woff2');
src: url('/fonts/oswald-v36-latin-300.ttf');
src: url('/fonts/oswald-v36-latin-500.svg');
src: url('/fonts/oswald-v36-latin-500.woff2');
src: url('/fonts/oswald-v36-latin-500.ttf');
src: url('/fonts/oswald-v36-latin-600.svg');
src: url('/fonts/oswald-v36-latin-600.woff2');
src: url('/fonts/oswald-v36-latin-600.ttf');
src: url('/fonts/oswald-v36-latin-700.svg');
src: url('/fonts/oswald-v36-latin-700.woff2');
src: url('/fonts/oswald-v36-latin-700.ttf');
src: url('/fonts/oswald-v36-latin-regular.svg');    
src: url('/fonts/oswald-v36-latin-600.woff2');
src: url('/fonts/oswald-v36-latin-regular.ttf');
}


color: rgb(201,37,44);
margin-top: 2%;
line-height: 100%;
letter-spacing: 0.15rem;
}

.jobtxt{
font-size: 1em;
margin-top: 0.5%;
line-height: 1.4em;
font-weight: lighter;
}

.calljob{
font-size: 1em;
font-weight: 400;
font-family: 'Oswald', sans-serif;
margin-top: 7%;
line-height: 100%;
letter-spacing: 0.05rem;
margin-bottom: 3%;
}

.location{
font-size: 0.9em;
margin-top: 2%;
line-height: 100%;
letter-spacing: 0.05rem;
font-weight: 300;
}

.moveright{
margin-left: 3%;
}

.navtopcolor {
  background-color: none;
height: 60px;
}

.sticky {
height: 68px;
background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;
}

.navbar-default {
    background-color: rgba(25,73,140,0.9)!important;
    height: auto;
}

.streettitle{
    margin-bottom: 4%;
    margin-top: 2%;
}


.hidenondesktopface{
    display: none;
}
    
.hidenondesktopinsta{
    display: none;
}

.titlekontakt{
font-family: 'Oswald', sans-serif;
font-size: 3rem;
}

.addressstreetcut {
margin-left: 59%;
margin-top: 5%;
color: rgb(64,64,65);
font-size: 1.3em;
line-height: 150%;
margin-bottom: 5%;
}

.addressstreetcut2 {
margin-left: 59%;
margin-top: 5%;
color: rgb(64,64,65);
font-size: 1.3em;
line-height: 150%;
margin-bottom: 5%;
}


.streettitlelarge{
    margin-bottom: 10%;
    margin-top: 11%;
font-size: 2rem;
line-height: 120%;
}

.logosprodukte{
    margin-bottom: 10%;
    padding-left: 10%;
    padding-right: 10%;
}

.kontaktmarge{
    margin-top: 35%;
}

#containerstreet
{
    height:2000px;    
}

#containerstreet DIV
{ 
    margin:50px; 
    padding:50px; 
    background-color:pink; 
}

.hideme
{
    opacity:0;
}

.logoaddress{
 width:60%;
}


.timeline {

    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    padding-bottom: 1%;

}



.pdmobil15 {
padding-left: 15%;
margin-top: 1%;
}

.socialicons{
float: left;

margin-top: 7.4%;

font-size: 13.5px;

color: #ffffff;

margin-left: 75%;

font-weight: 600;

width: 160%;

font-weight: 600;
}

.facebookicon{
margin-left: 2%;
float: left;
width: 40%;
margin-right: 6%;
}

.instagrammicon{
    width: 40%;
    float: left;
}

.zitat{
font-weight: 400;
font-size: 1.1em;
letter-spacing: 0.4px;
font-family: 'Oswald', sans-serif;
}

.btnklatte1 {

    margin-left: -27.5px;
    margin-right: 4px;

}

.btnklatte {

    margin-left: -29px;
    margin-right: 0px;

}

.svwlogo {

    width: 8%;
    top: -198px;
    float: right;
    margin-right: 15%;
    height: 0px;

}

.txtrechts{

    margin-top: 7.5%;
    padding-left: 6%;
    margin-bottom: 8%;
}

.txtrechtsliefer {

    margin-top: 0%;
    padding-left: 6%;
    margin-bottom: 3%;
    border-top: 20px solid #d7d8da;
    padding-top: 5%;

}

.partnerm {
width: 16%;

font-size: 10px;

padding-right: 2%;

font-weight: 800;

padding-top: 3%;
}

.bildlinks {
    margin-top: 8%;
    padding-left: 6%;
    margin-bottom: 9.5%;
}

#edit-nachricht {
    width: 100%;
}



*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
}

button {
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
}



/* .section SECTION
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.section {
  padding: 50px 0;
}

.section .container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.section h1 {
  font-size: 2.5rem;
}

.section h2 {
  font-size: 1.3rem;
}


/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline {
  white-space: nowrap;
  overflow-x: hidden;
}

.timeline ol {
  font-size: 0;
  width: 100vw;
  padding: 250px 0;
  transition: all 1s;
}

.timeline ol li {

    position: relative;
    display: inline-block;
    list-style-type: none;
    width: 112px;
    height: 6px;
    background: #bcbdc1;

}

.timeline ol li:last-child {
  width: 280px;
}

.timeline ol li:not(:first-child) {

    margin-left: 42px;

}

.timeline ol li:not(:last-child)::after {
content: '';

position: absolute;

top: 50%;

left: calc(100% + 0px);

bottom: 0;

width: 42px;

height: 42px;

transform: translateY(-50%);

border-radius: 50%;

background: rgba(25,73,140,1.0);
}

.timeline ol li div {

    position: absolute;
    left: calc(100% + 5px);
    width: 280px;
    padding: 0px;
    font-size: 0.8rem;
    white-space: normal;
    color: black;
    background: #ececec;

}

.timeline ol li div::before {

    content: '';
    position: absolute;
    bottom: 94%;
    left: 5px;
    width: 0;
    height: 0;
    border-style: solid;
    background: #ececec;
    z-index: -1;

}

.timeline ol li:nth-child(2n+1) div {

    top: -37px;
    transform: translateY(-100%);

}
.timeline ol li:nth-child(2n+1) div::before {

    top: 97%;
    border-width: 18px 18px 0 0;
    border-color: #ececec transparent transparent transparent;
    transform: rotate(45deg);

}

.timeline ol li:nth-child(2n) div {

    top: -30px;
    top: calc(100% + 34px);

}

.timeline ol li:nth-child(2n+1) div::before {

    top: 96%;
    border-width: 22px 22px 0px 0;
    border-color: #ececec transparent transparent transparent;
    transform: rotate(45deg);
    margin-top: -3px;

}


.timeline time {

    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 8px;
    margin-bottom: 10px;

}

.firstframe::before {

top: 97.4% !important;

}

.framelast::before {

top: 97.4% !important;

}

.frameup::before {

bottom: 96% !important;

}

/* TIMELINE ARROWS
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.timeline .arrows {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.timeline .arrows .arrow__prev {
  margin-right: 20px;
}

.timeline .disabled {
  opacity: .5;
}

.timeline .arrows img {
  width: 45px;
  height: 45px;
}


/* GENERAL MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 599px) {
  .timeline ol,
  .timeline ol li {
    width: auto; 
  }
  
  .timeline ol {
    padding: 0;
    transform: none !important;
  }
  
  .timeline ol li {
    display: block;
    height: auto;
    background: transparent;
  }
  
  .timeline ol li:first-child {
    margin-top: 25px;
  }
  
  .timeline ol li:not(:first-child) {
    margin-left: auto;
  }
  
  .timeline ol li div {
    width: 94%;
    height: auto !important;
    margin: 0 auto 25px;
  }
  
  .timeline ol li div {
    position: static;
  }
  
  .timeline ol li:nth-child(odd) div {
    transform: none;
  }
  
  .timeline ol li:nth-child(odd) div::before,
  .timeline ol li:nth-child(even) div::before {
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: none;
    border-left: 1px solid white;
    height: 25px;
  }
  
  .timeline ol li:last-child,
  .timeline ol li:nth-last-child(2) div::before,
  .timeline ol li:not(:last-child)::after,
  .timeline .arrows {
    display: none;
  }
}

.tlinfo {

    float: left;
    margin-top: -7px;
    padding-left: 13px;
    line-height: 19px;

}

.tlinfodown {

    float: left;
    margin-top: -7px;
    margin-bottom: 16px;
    padding-left: 13px;
    width: 95%;
    line-height: 19px;

}


.frame {

    height: 294px !important;

}

.frame2 {

height: 212px !important;

}


.siebert{

height: 294px !important;

}

.framed {

    height: 200px !important;

}

.framelast {

    height: 275px !important;
}

.wirtuns {
    margin-bottom: 8%;
    margin-left: 12%;
}


#log2 {

    width: 275px;
    position: relative;

}

#log2:after {
    content: "";
    display: block;
    position: absolute;
    border-width: 1px 1px 0 0;
    width: 0px;
    height: 0px;
    top: 62px;
    left: 9px;
    background: inherit;
    
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}


#log3 {

    margin: 0px auto 0;
    position: relative;

}
#log3:after {
    content: "";
    display: block;
    position: absolute;
    width: 0px;
    height: 0px;
    bottom: 62px;
    left: 9px;
    background: inherit;
    
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

.bubble:before, .bubble:after {
    border-style: solid;    
    content:"";
    display: block;
    position: absolute;
    width: 0;
}

.bubble::before {

    border-color: #ececec;
    border-width: 23px 0 0 23px;
    bottom: 80px;
    left: 40px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
    z-index: -1;

}

.bubble:after {
display: none;
}

.bubble {

    padding: 14px 12px 30px;
    position: relative;
    text-indent: 0%;
    margin-top: 5%;
    height: auto !important;

}

.example2 {
 height: 50px;	
 overflow: hidden;
 position: relative;
}
.example2 h3 {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: left;

 /* Apply animation to this element */	
 animation: example2 10s ease-out;
}
/* Move it (define the animation) */
@keyframes example2 {
 0%   { 
 transform: translateX(200%); 		
 }
 100% { 
 transform: translateX(0%); 
 }
}


#test p {
    margin-top: 25px;
    font-size: 21px;
    text-align: center;
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}



@-webkit-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@-moz-keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
@keyframes fadeInDown {
    from {
        opacity:0;
        -webkit-transform: translatey(-10px);
        -moz-transform: translatey(-10px);
        -o-transform: translatey(-10px);
        transform: translatey(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
    }
}
.in-down {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}


/** fadeInLeft **/

@-webkit-keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-10px);
        -moz-transform: translatex(-10px);
        -o-transform: translatex(-10px);
        transform: translatex(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
@-moz-keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-10px);
        -moz-transform: translatex(-10px);
        -o-transform: translatex(-10px);
        transform: translatex(-10px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
@keyframes fadeInLeft {
    from {
        opacity:0;
        -webkit-transform: translatex(-100px);
        -moz-transform: translatex(-100px);
        -o-transform: translatex(-100px);
        transform: translatex(-100px);
    }
    to {
        opacity:1;
        -webkit-transform: translatex(0);
        -moz-transform: translatex(0);
        -o-transform: translatex(0);
        transform: translatex(0);
    }
}
.in-left {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-duration:1s;
    animation-delay: 1s;
}



/* .md-main-img {  -webkit-animation: zoomin 10s ease-in infinite;
  animation: zoomin 17s ease-in infinite;
  transition: all .5s ease-in-out;
  z-index: -99;
  }*/


/* Zoom in Keyframes */


@-webkit-keyframes zoomin {
  0% {transform: scale(1);}
  50% {transform: scale(1.15);}
  100% {transform: scale(1);}
}
@keyframes zoomin {
  0% {transform: scale(1);}
  50% {transform: scale(1.15);}
  100% {transform: scale(1);}
} /*End of Zoom in Keyframes */


/* Zoom out Keyframes */

@-webkit-keyframes zoomout {
  0% {transform: scale(1);}
  50% {transform: scale(0.67);}
  100% {transform: scale(1);}
}
@keyframes zoomout {
    0% {transform: scale(1);}
  50% {transform: scale(0.67);}
  100% {transform: scale(1);}
}/*End of Zoom out Keyframes */



#block-menubbgenglish{
display: inline-block !important;
float: right;
width: auto;
margin: 0;
text-transform: uppercase;
font-size: .8em;
}

$white: rgba(254,255,250,1)
$grey: rgba(220,231,235,1)
$red: rgba(255,104,115,1)
$black: rgba(48,69,92,0.8)
$sans: 'Titillium Web', sans-serif
  
.transition
  transition: all 0.25s ease-in-out

.flipIn
  animation: flipdown 0.5s ease both
    
.no-select
  -webkit-tap-highlight-color: rgba(0,0,0,0)
  -webkit-touch-callout: none
  -webkit-user-select: none
  -khtml-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

html
  width: 100%
  height: 100%
  perspective: 900
  overflow-y: scroll
  background-color: $grey
  font-family: $sans
  color: $black
  
body
  min-height: 0
  display: inline-block
  position: relative
  left: 50%
  margin: 90px 0
  transform: translate( -50% , 0 )
  box-shadow: 0 10px 0 0 $red inset
  background-color: $white
  max-width: 450px
  padding: 30px
  
  @media ( max-width:550px )
    box-sizing: border-box
    transform: translate( 0 , 0 )
    max-width: 100%
    min-height: 100%
    margin: 0
    left: 0

h1 , h2
  color: $red

h1
  text-transform: uppercase
  font-size: 36px
  line-height: 42px
  letter-spacing: 3px
  font-weight: 100
  @extend .flipIn
  
h2
  font-size: 26px
  line-height: 34px
  font-weight: 300
  letter-spacing: 1px
  display: block
  background-color: $white
  margin: 0
  cursor: pointer
  @extend .no-select

p
  color: $black
  font-size: 17px
  line-height: 26px
  letter-spacing: 1px
  position: relative
  overflow: hidden
  max-height: 800px
  @extend .transition
  opacity: 1
  transform: translate( 0 , 0 )  
  margin-top: 14px
  z-index: 2
  
ul
  list-style: none
  perspective: 900
  padding: 0
  margin: 0
  
  li
    position: relative
    padding: 0
    margin: 0
    padding-bottom: 4px
    padding-top: 18px
    border-top: 1px dotted $grey
    @extend .flipIn
      
    &:nth-of-type(1)
      animation-delay: 0.5s
    
    &:nth-of-type(2)
      animation-delay: 0.75s
        
    &:nth-of-type(3)
      animation-delay: 1.0s
    
    &:last-of-type
      padding-bottom: 0
      
    i
      position: absolute
      transform: translate( -6px , 0 )
      margin-top: 16px
      right: 0
      
      &:before , &:after
        content: ""
        @extend .transition
        position: absolute
        background-color: $red
        width: 3px
        height: 9px
        
      &:before
        transform: translate( -2px , 0 ) rotate( 45deg )
          
      &:after
        transform: translate( 2px , 0 ) rotate( -45deg )
    
    input[type=checkbox]
      position: absolute
      cursor: pointer
      width: 100%
      height: 100%
      z-index: 1
      opacity: 0
      
      &:checked
        &~p
          margin-top: 0
          max-height: 0
          opacity: 0
          transform: translate( 0 , 50% )
            
        &~i
          &:before
            transform: translate( 2px , 0 ) rotate( 45deg )
          
          &:after
            transform: translate( -2px , 0 ) rotate( -45deg )

@keyframes flipdown
  0%
    opacity: 0
    transform-origin: top center
    transform: rotateX(-90deg)
  5%
    opacity: 1
  80%
    transform: rotateX(8deg)
  83%
    transform: rotateX(6deg)
  92%
    transform: rotateX(-3deg)
  100%
    transform-origin: top center
    transform: rotateX(0deg)