body {
font-family: 'Open Sans', sans-serif;
color: #333;
font-size: 14px;
line-height: 20px;
font-weight: 300;
}
h1 {
margin-bottom: 20px;
font-size: 40px;
line-height: 44px;
font-weight: 300;
}
h2 {
margin-top: 20px;
margin-bottom: 10px;
font-size: 24px;
line-height: 36px;
font-weight: 600;
}
h3 {
margin-top: 20px;
margin-bottom: 10px;
font-size: 24px;
line-height: 30px;
font-weight: 700;
}
p {
margin-top: 20px;
margin-bottom: 10px;
font-size: 1em;
line-height: 1.5em;
text-align: left;
}
a {
color: #fff;
font-size: 14px;
text-decoration: none;
}
ol {
margin-top: 20px;
margin-bottom: 10px;
padding-left: 40px;
}
li {
margin-bottom: 10px;
line-height: 20px;
}
.section {
position: relative;
display: block;
width: 100%;
padding-right: 70px;
padding-left: 70px;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.logo {
width: 100px;
height: 100px;
float: right;
background-image: url(//ag-learn.3-up.de/wp-content/themes/bayer/images/logo.gif);
background-position: 50% 50%;
background-size: 80px 80px;
background-repeat: no-repeat;
}
.brand {
position: relative;
top: 27px;
display: inline-block;
padding-right: 15px;
float: left;
border-right: 1px solid #393;
color: #393;
text-align: right;
}
.header-title {
padding-top: 44px;
padding-right: 15px;
padding-left: 15px;
float: left;
color: #393;
font-size: 36px;
font-weight: 300;
}
.navbar {
position: fixed;
top: 140px;
z-index: 1;
float: left;
}
.nav-item {
position: relative;
z-index: 21;
display: block;
width: 50px;
height: 50px;
min-width: 50px;
margin-bottom: 1px;
float: left;
background-color: #329932;
background-image: none;
-webkit-transition: all 100ms ease;
transition: all 100ms ease;
color: #fff;
font-size: 20px;
line-height: 45px;
font-weight: 300;
text-align: center;
text-transform: uppercase;
}
.footer {
position: fixed;
bottom: 0px;
display: block;
width: 100%;
height: 50px;
padding-top: 16px;
background-color: #444;
color: #444;
z-index: 6;
}
.footertext {
padding-right: 50px;
padding-left: 50px;
color: #fff;
text-align: center;
}
.fontawesome {
position: relative;
font-family: Fontawesome, sans-serif;
}
.circle:hover {
background-color: hsla(0, 0%, 100%, .26);
}
.circle.blue {
border-color: #58a2ff;
}
.circle.yelow {
border-color: #ffeb00;
}
.circle.gree {
border-color: #00ff0a;
}
.circle.pink {
width: 100px;
height: 100px;
border-color: #e07bc0;
}
.circle-text {
position: relative;
left: 50%;
display: inline-block;
width: 200px;
margin-top: 78px;
margin-bottom: 78px;
-webkit-transform: translate(-50%, 0px);
-ms-transform: translate(-50%, 0px);
transform: translate(-50%, 0px);
color: #fff;
font-size: 23px;
line-height: 25px;
text-align: center;
}
.circle-icon {
position: relative;
bottom: 40px;
font-family: Fontawesome, sans-serif;
font-size: 2em;
}
.breadcrumb {
position: relative;
top: 5px;
display: none;
padding: 10px;
float: left;
color: #fff;
text-transform: uppercase;
}
.wrapper {
position: relative;
overflow: hidden;
min-height: 100vh;
background-color: #444;
}
.header {
position: absolute;
z-index: 1;
display: block;
width: 100%;
height: 130px;
float: left;
background-color: #fff;
}
.strip {
height: 40vh;
border-bottom: 1px solid #fff;
background-color: #393;
background-image: url(//ag-learn.3-up.de/wp-content/themes/bayer/images/example-bg.png);
background-position: 0px 0px;
background-size: 125px;
}
.strip.img {
position: static;
overflow: visible;
width: 100%;
height: 50vh;
min-height: 400px;
border-bottom: 1px none #000;
background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .4) 97%), url(//ag-learn.3-up.de/wp-content/themes/bayer/images/shutterstock_78459424.jpg);
background-image: linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .4) 97%), url(//ag-learn.3-up.de/wp-content/themes/bayer/images/shutterstock_78459424.jpg);
background-position: 0px 0px, 50% 50%;
background-size: auto, cover;
background-repeat: repeat, no-repeat;
background-attachment: scroll, fixed;
}
.content {
position: static;
background-color: #fff;
background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url(//ag-learn.3-up.de/wp-content/themes/bayer/images/shutterstock_78459424.jpg);
background-image: linear-gradient(180deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url(//ag-learn.3-up.de/wp-content/themes/bayer/images/shutterstock_78459424.jpg);
background-position: 0px 0px, 50% 50%;
background-size: auto, cover;
background-repeat: repeat, no-repeat;
background-attachment: scroll, fixed;
min-height: 100vh;
}
.content.white {
position: relative;
z-index: 1;
background-color: #fff;
background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url(//ag-learn.3-up.de/wp-content/themes/bayer/images/shutterstock_78459424.jpg);
background-image: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url(//ag-learn.3-up.de/wp-content/themes/bayer/images/shutterstock_78459424.jpg);
background-position: 0px 0px, 50% 50%;
background-size: auto, cover;
background-repeat: repeat, no-repeat;
background-attachment: scroll, fixed;
}
.stripbox {
position: relative;
overflow: hidden;
height: 50vh;
border-bottom: 1px solid #fff;
background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .8)), url(//ag-learn.3-up.de/wp-content/themes/bayer/images/164853096.jpg);
background-image: linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .8)), url(//ag-learn.3-up.de/wp-content/themes/bayer/images/164853096.jpg);
background-position: 0px 0px, 50% 50%;
background-size: auto, cover;
background-attachment: scroll, fixed;
}
.content-text {
display: block;
width: 100%;
margin: 35px auto;
padding: 40px 100px 136px;
border-bottom: 1px solid #888;
background-color: #fff;
color: #444;
font-size: 16px;
line-height: 24px;
}
.center {
position: relative;
left: 50%;
display: inline-block;
-webkit-transform: translate(-50%, 0px);
-ms-transform: translate(-50%, 0px);
transform: translate(-50%, 0px);
}
.top {
position: absolute;
left: 50%;
bottom: 80px;
width: 50px;
height: 50px;
-webkit-transform: translate(-50px, 0px);
-ms-transform: translate(-50px, 0px);
transform: translate(-50px, 0px);
font-family: Fontawesome, sans-serif;
color: #444;
font-size: 30px;
line-height: 46px;
text-align: center;
display:none;
}
.menue-container {
position: fixed;
left: -300px;
width: 400px;
padding-right: 1px;
background-color: #e755b8;
}
.menu-list {
position: relative;
width: 300px;
min-height: 100vh;
float: left;
background-color: #383838;
}
.abstract {
display: block;
padding-top: 20px;
padding-bottom: 20px;
border-top: 1px solid hsla(0, 0%, 100%, .5);
color: #fff;
font-size: 20px;
line-height: 30px;
font-weight: 300;
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
-webkit-column-gap: 1.5em;
-moz-column-gap: 1.5em;
column-gap: 1.5em;
-webkit-column-rule: 1px solid hsla(0, 0%, 100%, .5);
-moz-column-rule: 1px solid hsla(0, 0%, 100%, .5);
column-rule: 1px solid hsla(0, 0%, 100%, .5);
}
.accordion-high {
position: absolute;
width: 100%;
height: 100px;
background-color: hsla(0, 0%, 100%, .1);
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
cursor: pointer;
}
.accordion-high:hover {
background-color: hsla(0, 0%, 100%, .24);
}
.icon-holder {
display: none;
margin-bottom: 47px;
}
.greenline {
position: relative;
bottom: 0px;
height: 30px;
background-color: #393;
}
.back {
width: 50px;
height: 50px;
float: left;
background-color: #888;
color: #fff;
text-align: center;
}
.side-nav {
position: fixed;
width: 50px;
height: 100%;
}
.navicon-box {
position: fixed;
top: 140px;
z-index: 60;
display: block;
margin-bottom: 10px;
}
.expansion {
position: relative;
z-index: 10;
display: none;
height: 50px;
padding-top: 15px;
padding-right: 10px;
padding-left: 10px;
float: left;
background-color: #393;
}
.expansion.blue-icon {
display: none;
background-color: #58a2ff;
}
.expansion.blue-icon.red {
display: none;
background-color: red;
}
.expansion.back {
display: none;
width: auto;
margin-left: 0px;
background-color: #666;
}
.navlink {
position: relative;
display: block;
}
.navlink.red {
z-index: 30;
display: block;
background-color: red;
}
.navtext {
display: inline-block;
font-size: 14px;
font-weight: 400;
text-align: left;
}
.eqs-search{
background: transparent;
border:none;
width: 80%;
padding-left: 3px;
}
.navtext.text-grey {
position: relative;
left: 5px;
z-index: 1;
color: #444;
}
.en {
line-height: 49px;
}
.h2 {
padding-top: 30px;
padding-bottom: 30px;
color: #fff;
font-size: 24px;
font-weight: 300;
}
.search-fill-in {
position: relative;
top: -25px;
display: block;
width: 190px;
height: 30px;
padding-top: 5px;
padding-right: 5px;
padding-left: 5px;
background-color: #eae5d6;
}
.search-send {
display: inline-block;
float: right;
font-family: Fontawesome, sans-serif;
color: #444;
font-size: 24px;
cursor: pointer;
}
.error{
border-bottom:1px solid red;
}
.search-send:hover {
color: #136a13;
}
.acc-icon {
position: relative;
display: block;
}
.acc-icon-open {
position: absolute;
top: 40px;
right: 41px;
opacity: 1;
font-family: Fontawesome, sans-serif;
color: #fff;
font-size: 1.5em;
}
.acc-icon-close {
position: absolute;
top: 40px;
right: 40px;
opacity: 0;
font-family: Fontawesome, sans-serif;
color: #fff;
font-size: 1.5em;
}
.breadcrumb-nav {
padding-top: 4px;
padding-right: 10px;
padding-left: 10px;
color: #136a13;
font-size: 11px;
font-weight: 400;
text-transform: uppercase;
}
.breadcrumb-nav:hover {
text-decoration: underline;
}
.divider {
padding-top: 4px;
padding-right: 2px;
padding-left: 2px;
float: left;
color: #136a13;
font-size: 12px;
font-weight: 300;
}
.breadcrumb-link {
float: left;
}
.scroll-down {
position: fixed;
left: 50%;
bottom: 20px;
width: 50px;
height: 50px;
-webkit-transform: translate(-50%, 0px);
-ms-transform: translate(-50%, 0px);
transform: translate(-50%, 0px);
font-family: Fontawesome, sans-serif;
color: #fff;
font-size: 30px;
line-height: 46px;
text-align: center;
cursor: pointer;
}
.trigger1 {
position: absolute;
width: 1px;
height: 1px;
}
.card-holder {
-webkit-perspective: 2000px;
perspective: 2000px;
}
.card-front {
display: block;
overflow: hidden;
background-color: #fff;
box-shadow: 0 7px 21px -3px #000;
-webkit-transition: none 0ms ease;
transition: none 0ms ease;
}
.card-paragraph {
font-size: 12px;
}
.card-paragraph h3 {
display: block;
font-size: 2em;
}
.card-headline {
position: relative;
top: 31px;
padding-right: 10px;
padding-left: 10px;
background-color: transparent;
-webkit-transform: translate(0px, -50%);
-ms-transform: translate(0px, -50%);
transform: translate(0px, -50%);
font-size: 1em;
line-height: 1.3em;
font-weight: 600;
text-align: center;
}
.label-holder {
position: absolute;
right: 23px;
width: 100%;
}
.label {
position: relative;
top: -3px;
width: 30px;
height: 46px;
margin-left: 3px;
float: right;
background-color: #e755b8;
box-shadow: 1px 3px 5px 0 rgba(0, 0, 0, .49);
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.label.blau {
background-color: #00aab9;
}
.label.green {
background-color: #8fa800;
}
.label.button-box {
position: absolute;
left: -3px;
top: 11px;
right: -15px;
height: 39px;
box-shadow: none;
}
.label-icon {
position: absolute;
right: 4px;
bottom: 8px;
-webkit-transform: none;
-ms-transform: none;
transform: none;
font-family: 'Simple-Line-Icons', sans-serif;
color: #fff;
font-size: 1.5em;
}
.label-icon.fontawesome {
top: 17px;
font-family: Fontawesome, sans-serif;
}
.card-img {
display: block;
padding: 7px 7px 0px;
box-shadow: none;
}
.card-backside-richtext {
padding-top: 24px;
}
.card-backside-richtext p {
color: #fff;
}
.card-back {
position: absolute;
z-index: 6;
display: block;
height: 100%;
margin-right: 10px;
background-color: rgba(69, 69, 69, .9);
color: #fff;
width:94%;
}
.card25 {
position: relative;
z-index: 2;
overflow: hidden;
width: 25%;
margin-top: 20px;
margin-bottom: 30px;
padding-right: 10px;
padding-left: 10px;
float: left;
}
.card-back-link {
position: relative;
width: 100%;
height: 20%;
border-bottom: 1px solid #888;
text-align: left;
}
.card-back-link:hover {
background-color: #fff;
color: #444;
}
.card-back-link.no-hover:hover {
background-color: transparent;
}
.card-back-link.interactive {
background-color: rgba(232, 86, 186, .59);
}
.card-back-link.interactive:hover {
background-color: #fff;
}
.card-back-link.videobg {
background-color: rgba(89, 164, 255, .7);
}
.card-back-link.videobg:hover {
background-color: #fff;
}
.card-back-text {
position: relative;
top: 50%;
display: inline-block;
min-width: 100%;
padding-right: 10px;
padding-left: 50px;
-webkit-transform: translate(0px, -50%);
-ms-transform: translate(0px, -50%);
transform: translate(0px, -50%);
font-weight: 400;
}
.link-icon {
position: absolute;
top: 50%;
margin-left: 10px;
float: right;
-webkit-transform: translate(0px, -50%);
-ms-transform: translate(0px, -50%);
transform: translate(0px, -50%);
font-family: 'Simple-Line-Icons', sans-serif;
font-size: 2em;
}
.link-icon.pink {
color: #e755b8;
}
.link-icon.blue {
color: #58a2ff;
}
.path {
margin-top: 33px;
padding-top: 30px;
padding-bottom: 0px;
border-top: 1px solid #888;
font-style: italic;
}
.pager {
text-align: center;
letter-spacing: 6px;
}
.pager-arrow {
font-family: Fontawesome, sans-serif;
}
.icon-chapter {
position: absolute;
left: 9px;
top: 19px;
z-index: 5;
width: 60px;
border-radius: 50px;
}
.main-content {
position: relative;
display: block;
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
.main-content.bg-colour {
padding-top: 20px;
padding-bottom: 10px;
background-color: rgba(0, 0, 0, .2);
}
.main-content.filter {
padding: 10px;
}
.main-content.cards {
background-color: rgba(0, 0, 0, .4);
}
.backarrow {
font-family: Fontawesome, sans-serif;
line-height: 48px;
}
.sheetoverview {
font-family: 'Simple-Line-Icons', sans-serif;
line-height: 48px;
}
.white {
color: #fff;
}
.searchicon {
font-family: 'Simple-Line-Icons', sans-serif;
line-height: 50px;
}
.close {
font-family: 'Simple-Line-Icons', sans-serif;
line-height: 48px;
}
.worksheet {
display: block;
margin-top: 35px;
margin-bottom: 35px;
background-color: #fff;
box-shadow: none;
}
.worksheet-funktions {
position: fixed;
left: 71px;
top: 211px;
}
.buttonarrow {
position: absolute;
left: 33px;
top: 14px;
width: 20px;
height: 20px;
background-color: #2064b8;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.buttonarrow.red {
background-color: red;
}
.video {
margin-top: 40px;
}
.cardtextholder {
position: relative;
height: 80px;
}
.filter-button {
display: inline-block;
margin-top: 11px;
margin-right: 5px;
margin-bottom: 11px;
border-radius: 20px;
background-color: #58a2ff;
color: #fff;
font-size: 16px;
letter-spacing: 0px;
}
.filter-button:hover {
background-color: #2064b8;
}
.filter-button.pink {
background-color: #e755b8;
color: #fff;
}
.filter-button.pink:hover {
background-color: #b13e8d;
}
.filter-button.green {
background-color: #8fa800;
}
.filter-button.green:hover {
background-color: #7c9200;
}
.filter-button.bluebutton {
background-color: #00aab9;
}
.filter-button.bluebutton:hover {
background-color: #008e9b;
}
.kategorie {
color: #fff;
font-size: 20px;
}
.pink {
color: #e755b8;
}
.blue {
color: #58a2ff;
}
.simpleline {
font-family: 'Simple-Line-Icons', sans-serif;
}
.experiment-bg {
position: absolute;
top: 1px;
z-index: 45;
display: block;
width: 100%;
height: 100vh;
background-image: url(//ag-learn.3-up.de/wp-content/themes/bayer/images/02_01-transparent-01-01-01-01-01-01.png), url(//ag-learn.3-up.de/wp-content/themes/bayer/images/bg.png), -webkit-linear-gradient(270deg, #000, #000);
background-image: url(//ag-learn.3-up.de/wp-content/themes/bayer/images/02_01-transparent-01-01-01-01-01-01.png), url(//ag-learn.3-up.de/wp-content/themes/bayer/images/bg.png), linear-gradient(180deg, #000, #000);
background-position: 50% 50%, 50% 50%, 0px 0px;
background-size: contain, cover, auto;
background-repeat: no-repeat, no-repeat, repeat;
background-attachment: scroll, scroll, scroll;
}
.experiment-titel {
float: left;
}
.overlay-bd-experiment {
position: absolute;
z-index: 80;
display: block;
width: 100%;
min-height: 200vh;
background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .4));
background-image: linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .4));
background-position: 0px 0px;
}
.overlay-bd-experiment.send {
min-height: 200vh;
}
.start-overlay {
position: relative;
top: 20vh;
display: block;
max-width: 700px;
margin-right: auto;
margin-left: auto;
padding: 30px 50px;
background-color: #fff;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.potato {
position: absolute;
left: -33px;
right: -33px;
bottom: -37px;
}
.potato.experiment {
left: 158px;
bottom: 67px;
display: block;
}
.button {
position: relative;
display: inline-block;
min-width: 200px;
margin-top: 10px;
margin-right: 10px;
margin-left: 10px;
border-radius: 20px;
font-weight: 600;
text-align: center;
}
.button:hover {
background-color: #2064b8;
}
.button-holder {
position: relative;
left: 50%;
display: inline-block;
margin-top: 28px;
margin-bottom: 28px;
-webkit-transform: translate(-50%, 0px);
-ms-transform: translate(-50%, 0px);
transform: translate(-50%, 0px);
}
.overlay-text {
font-weight: 400;
}
.potato2 {
position: absolute;
left: 11%;
top: 74vh;
z-index: 60;
display: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.arbeitsblatt {
position: relative;
display: block;
max-width: 960px;
min-width: 700px;
margin-right: auto;
margin-left: auto;
padding: 35px;
}
.arbeitsblatt.solved {
position: relative;
}
.difficulty-seroius {
position: absolute;
bottom: 5px;
width: 100%;
font-family: 'Simple-Line-Icons', sans-serif;
text-align: center;
letter-spacing: 3px;
}
.star {
font-family: 'Simple-Line-Icons', sans-serif;
}
.difficulty-easy {
position: absolute;
bottom: 5px;
width: 100%;
font-family: 'Simple-Line-Icons', sans-serif;
text-align: center;
}
.difficulty-tough {
position: absolute;
bottom: 5px;
width: 100%;
font-family: 'Simple-Line-Icons', sans-serif;
text-align: center;
letter-spacing: 3px;
visibility:hidden;
visibility:visible;
}
.chapter-card {
position: absolute;
bottom: 46px;
width: 20px;
}
.stars {
font-family: 'Simple-Line-Icons', sans-serif;
letter-spacing: 4px;
}
.button-box {
position: relative;
display: inline-block;
}
.close-filter {
font-family: 'Simple-Line-Icons', sans-serif;
font-size: 12px;
}
.difficulty-calc {
position: relative;
top: -2px;
margin-right: 17px;
margin-left: 17px;
float: left;
font-family: 'Simple-Line-Icons', sans-serif;
letter-spacing: 4px;
}
@font-face {
font-family: 'Simple-Line-Icons';
src:url(//ag-learn.3-up.de/wp-content/themes/bayer/fonts//Simple-Line-Icons.eot);
src:url(//ag-learn.3-up.de/wp-content/themes/bayer/fonts//Simple-Line-Icons.eot?#iefix) format('embedded-opentype'),
url(//ag-learn.3-up.de/wp-content/themes/bayer/fonts//Simple-Line-Icons.woff) format('woff'),
url(//ag-learn.3-up.de/wp-content/themes/bayer/fonts//Simple-Line-Icons.ttf) format('truetype'),
url(//ag-learn.3-up.de/wp-content/themes/bayer/fonts//Simple-Line-Icons.svg#Simple-Line-Icons) format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'FontAwesome';
src: url(//ag-learn.3-up.de/wp-content/themes/bayer/fonts/fontawesome-webfont.eot?v=4.6.1);
src: url(//ag-learn.3-up.de/wp-content/themes/bayer/fonts/fontawesome-webfont.eot?#iefix&v=4.6.1) format('embedded-opentype'), url(//ag-learn.3-up.de/wp-content/themes/bayer/fonts/fontawesome-webfont.woff2?v=4.6.1) format('woff2'), url(//ag-learn.3-up.de/wp-content/themes/bayer/fonts/fontawesome-webfont.woff?v=4.6.1) format('woff'), url(//ag-learn.3-up.de/wp-content/themes/bayer/fonts/fontawesome-webfont.ttf?v=4.6.1) format('truetype'), url(//ag-learn.3-up.de/wp-content/themes/bayer/fonts/fontawesome-webfont.svg?v=4.6.1#fontawesomeregular) format('svg');
font-weight: normal;
font-style: normal;
}