/*----------------------------------------------------------------------------*\
    
    BAYER "Dieses Kribbeln im Bauch"
    Für Jäger Health
    
    Release: 1   
    Author:  David Beege
    Created: 2020-10-26
    Edited:  -
    
\*----------------------------------------------------------------------------*/


/*----------------------------------------------------------------------------*\
    #import
\*----------------------------------------------------------------------------*/

/*@import('css/normalize.css');*/
/*@import('css/animate.min.css');*/


h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
    color: #0D2A40;
}




/*----------------------------------------------------------------------------*\
    #box-sizing
\*----------------------------------------------------------------------------*/

/**
 * Make all Pseudo before and after elements behave like real block objects 
 * Set the global 'box-sizing' state to 'border-box'
 * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 */
  
html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
}



/*----------------------------------------------------------------------------*\
    #font-settings
\*----------------------------------------------------------------------------*/

@font-face {
    font-family: system;
    font-style: normal;
    font-weight: 300;
    src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}


body {
	font-family: 'Helvetica', 'Helvetica Neue', system;
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	font-size: 16px;
	
	/* Render fonts on macOS and iOS smoothely */
	 -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


ul.colorlist {
    padding: 0;
    margin: 0;
    list-style: none; /* Remove default bullets */
}

ul.colorlist li {
    position: relative;
    padding: 0 0 0 1.2em;
    color: #0D2A40 !important;
    line-height: 1.2;
}

ul.colorlist li::before {
    position: absolute;
    content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: red; /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
}


/*******************************************************************************
 *
 *  #general 
 *
 ******************************************************************************/


.button.green { background-color: #71d700; }
.button.green:before { background-color: #47b800; }
.green { color: #207600; }
/* .pflichttext.green:before { background: #207600; } */
.colorlist.green li:before { color: #207600; }
.story_boxlabel.green { background-color: #207600; }    
.story_boxlabel.green:before { background-color: #207600; } 
.boxedheadline.green { background-color: #207600; }
.boxedheadline.green:after { background-color: #207600; }

.button.velvet { background-color: #a665ae; }
.button.velvet:before { background-color: #93529b; }
.velvet { color: #a665ae; }
/* .pflichttext.velvet:before { background: #a665ae; } */
.colorlist.velvet li:before { color: #a665ae; }
.story_boxlabel.velvet { background-color: #a665ae; }    
.story_boxlabel.velvet:before { background-color: #a665ae; } 
.boxedheadline.velvet { background-color: #a665ae; }
.boxedheadline.velvet:after { background-color: #a665ae; }

.button.red { background-color: #fe000a; }
.button.red:before { background-color: #c30000; }
.red { color: #fe000a; }
/* .pflichttext.red:before { background: #fe000a; } */
.story_boxlabel.red { background-color: #ff005e; }    
.story_boxlabel.red:before { background-color: #ff005e; }
.boxedheadline.red { background-color: #ff005e; }
.boxedheadline.red:after { background-color: #ff005e; }

.button.purple { background-color: #c0408e; }
.button.purple:before { background-color: #ac2979; }
.purple { color: #ac2979; }
/* .pflichttext.purple:before { background: #ac2979; } */
.colorlist.purple li:before { color: #ac2979; }
.story_boxlabel.purple { background-color: #ac2979; }    
.story_boxlabel.purple:before { background-color: #ac2979; } 
.boxedheadline.purple { background-color: #ac2979; }
.boxedheadline.purple:after { background-color: #ac2979; }

.button.blue { background-color: #00a7e6; }
.button.blue:before { background-color: #00a7e6; }
.blue { color: #00a7e6; }
/* .pflichttext.blue:before { background: #00a7e6; } */
.colorlist.blue li:before { color: #00a7e6; }
.story_boxlabel.blue { background-color: #00a7e6; }    
.story_boxlabel.blue:before { background-color: #00a7e6; } 
.boxedheadline.blue { background-color: #00a7e6; }
.boxedheadline.blue:after { background-color: #00a7e6; }

.button.darkblue { background-color: #274a95; }
.button.darkblue:before { background-color: #274a95; }
.darkblue { color: #274a95; }
/* .pflichttext.darkblue:before { background: #274a95; } */
.colorlist.darkblue li:before { color: #274a95; }
.story_boxlabel.darkblue { background-color: #274a95; }    
.story_boxlabel.darkblue:before { background-color: #274a95; }
.boxedheadline.darkblue { background-color: #274a95; }
.boxedheadline.darkblue:after { background-color: #274a95; }

.button.grass { background-color: #87b200; }
.button.grass:before { background-color: #87b200; }
.grass { color: #87b200; }
/* .pflichttext.grass:before { background: #87b200; } */
.colorlist.grass li:before { color: #87b200; }
.story_boxlabel.grass { background-color: #87b200; }    
.story_boxlabel.grass:before { background-color: #87b200; } 
.boxedheadline.grass { background-color: #87b200; }
.boxedheadline.grass:after { background-color: #87b200; }

.button.darkergreen { background-color: #61ad1e; }
.button.darkergreen:before { background-color: #3d9700; }
.darkergreen { color: #268A1C; }
/* .pflichttext.darkergreen:before { background: #61ad1e; } */
.colorlist.darkergreen li:before { color: #61ad1e; }
.story_boxlabel.darkergreen { background-color: #61ad1e; }    
.story_boxlabel.darkergreen:before { background-color: #61ad1e; } 
.boxedheadline.darkergreen { background-color: #61ad1e; }
.boxedheadline.darkergreen:after { background-color: #61ad1e; }




/*----------------------------------------------------------------------------*\
    #images
\*----------------------------------------------------------------------------*/

.hero_image,
.html img {
    display: block;
    width: 100%;
    height: auto;
}

.icon svg {
    color: inherit;
    fill: currentColor;
}


/*----------------------------------------------------------------------------*\
    #buttons
\*----------------------------------------------------------------------------*/

.button {
    position: relative;
    display: flex;
    
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    padding: 15px 20px;
    
    font-size: 18px;
    line-height: 18px;
    color: #fff;
    text-decoration: none;
    
    overflow: hidden;
    background-color: #624963;
}

.button.bold {
  font-weight: bold;
  text-transform: uppercase;
  font-style: italic;
}


.button.submit {
    position: relative;
    width: 100%;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    outline: none;
}



.button .icon {
    position: absolute;
    top: 0;
    bottom: 0;
    
    z-index: 5;
    
    width: 46px;
    height: 100%;
    
    display: block;
    vertical-align: middle;
    
    /* background-color: #543e56; */
}

.button .label {
    position: relative;
    display: inline-block;
    z-index: 5;
    vertical-align: middle;
}

.button:before {
    content: '';
    display: block;
    position: absolute;
    z-index: 0;
    width: 56px;
    height: 100%;
    top: 0;
    /*right: -5px;*/
    background-color: #543e56;
    transform: skewX(-14deg);
    
    transition: all 0.45s ease-in-out;
}

.button .icon svg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 20px;
    height: 20px;
    fill: #fff;
}

.button:hover:before {
    width: calc(100% + 25px);
    transition: all 0.25s ease-in-out;
}




.button_iconright { padding-right: 52px; }
.button_iconright:before { right: -7px; }
.button_iconright .icon { right: 0; }

.button_iconleft { padding-left: 72px; }
.button_iconleft:before { left: -7px; }
.button_iconleft .icon { left: 0; }



/*******************************************************************************
 *
 *  #forms 
 *
 ******************************************************************************/


.answer_choice {
    position: relative;
    display: block;
    margin-top: 20px;
}

.answer_choice label {
  display: block;
  color: #0D2A40;
  cursor: pointer;
  line-height: 1.2;
}







/*******************************************************************************
 *
 *  #appframe 
 *
 ******************************************************************************/


body {
    
    background: #826e83;
    
}


/* #appframe,
.appframe_wrap,
.appcontent {
  min-height: calc(100vh - 60px);
} */

/* #appframe {
  min-height: calc(100vh + 160px);
} */


#appframe {
    max-width: 414px;
    
    margin-left: auto;
    margin-right: auto;
    
    background-color: #624963;
    overflow: hidden;
    
}

.appframe_wrap {
  position: relative;
  display: block;
  /*overflow: hidden;
  overflow-y: scroll;*/
}

.maxpayne {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.maxpayne img {
  width: 100%;
  height: auto;
}

/*
scope_intro
scope_story
scope_content
*/

.appcontent {
  position: relative;
}

.app_introscreen .appcontent,
.app_startscreen .appcontent,
.app_endscreen .appcontent,
.app_winwinwin .appcontent,
.app_winwinwinthx .appcontent {
  min-height: auto;
}

.appcontent.scope_intro {
  background-color: #443247; 
  background-color: #624963;
}

.appcontent.scope_product {
    background-image: linear-gradient(180deg, #005e7d, #473148); 
}

.appcontent.scope_win {
  background-image: linear-gradient(180deg, #005e7d, #473148); 
}

.content {
    position: relative;
    padding: 36px;
}



.overlay {
  display: block;
  position: relative;
}

.overlay:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #443247;
  opacity: 0.2;
}

.app_introscreen .overlay {
  opacity: 0.6;
}


.imageoverlay {
  display: block;
  position: relative;
}

.overlayimage {
  position: absolute;
  display: block;
  width: 115%;
  height: auto;
  left: -30px;
  right: 0;
  top: 30px;
  z-index: 20;
}



/*----------------------------------------------------------------------------*\
    #diagonal element
\*----------------------------------------------------------------------------*/

.diagonal:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transform: skewY(-11deg);
    z-index: 10;
}

.diagonal:after {
    content: '';
    position: absolute;
    top: -16px;
    right: 0;
    left: 0;
    bottom: 20px;
    transform: skewY(-14deg);
    z-index: 5;
}


.hero .diagonal .content {
    padding-top: 60px;
    padding-bottom: 70px;
}

.app_startscreen .hero .diagonal:before {
    background-image: linear-gradient(180deg, #624963, #443248); 
}

.app_startscreen .hero .diagonal:after {
    background-color: rgba(68, 50, 72, 0.7); 
}





/*----------------------------------------------------------------------------*\
    #hero
\*----------------------------------------------------------------------------*/

.hero {
    position: relative;
}



/*----------------------------------------------------------------------------*\
    #app_header
\*----------------------------------------------------------------------------*/

.app_header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;   
}

.app_header_content {
    padding-top: 20px;
    padding-bottom: 0;
    z-index: 20;  
}

.app_header .diagonal:before {
    top: -40px;
    transform: skewY(-9deg);
    background-color: #003951;
}

.app_header .diagonal:after {
    top: 0;
    right: 0;
    left: 0;
    bottom: -20px;
    transform: skewY(-14deg);
    z-index: 5;
    background-color: rgba(0, 57, 81, 0.7); 
}


.app_header .points {
    display: block;
    padding: 6px 0 0 36px;
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    background: url(img/butterfly.png) no-repeat left 4px;
    background-size: 25px;
}



/*----------------------------------------------------------------------------*\
    #progressbar
\*----------------------------------------------------------------------------*/

.progressbar {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.32);
}

.progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 8px;
    opacity: 0.8;
    background-color: #624963;
}
/* 
body.mobile .progressbar {
  bottom: 32px;
} */


/*----------------------------------------------------------------------------*\
    #story elements
\*----------------------------------------------------------------------------*/

.story_content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 120px;
    padding: 0 36px;
    z-index: 120;
}

.story_multiplechoice {
    bottom: 8px;
    padding-bottom: 36px;
}

/* body.mobile .story_multiplechoice {
  padding-bottom: 66px;
} */

.story_image {
  position: relative;
  
}

.scope_story .story_image:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 140px;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgb(98,73,99);
  background: linear-gradient(180deg, rgba(98,73,99,0) 0%, rgba(98,73,99,1) 100%);
}

.scope_story .story_image:after {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(68,50,71,0.2);
}


.story_image img {
  width: 100%;
  height: auto;
}

.story_textbox {
    position: relative;
    width: 100%;
    padding: 20px;
    background-color: #fff;
    font-size: 13px;
}

.story_text {
    font-size: 13px;
    line-height: 1.25;
    color: #0D2A40;
}

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

.story_textbox {
  font-size: 14px;
}

.story_text {
  font-size: 14px;
}  
  
}



.story_text img {
  width: 100%;
  height: auto;
}

.story_boxlabel {
    position: absolute;
    display: block;
    padding: 8px 24px 8px 20px;
    top: -32px;
    left: 0;
    
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    color: #fff;
}

.story_boxlabel:before {
    content: '';
    display: block;
    width: 12px;
    
    transform: skewX(-18deg);
    
    position: absolute;
    top: 0;
    bottom: 0;
    right: -6px;
}
    
    
    


/* story_next */    

.story_next {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 20;
    
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    color: #fff;
    text-decoration: none;
}

.tap {
    position: absolute;
    left: 50%;
    bottom: 35px;
    margin-left: -16px;
    display: block;
}

.tap .label {
    display: block;
    margin-top: 6px;
}

.tap svg {
    display: block;
    width: 33px;
    height: 40px;
}



/* multiplechoice */

.multiplechoice .button {
    margin-top: 10px;
    
    height: 52px;
    font-size: 13px;
}


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

.multiplechoice .button {
  font-size: 14px;
}

}


/* highlight */

.highlight {
    /*font-weight: 700;*/
    line-height: 1.25;
}

.product_text p {
    line-height: 1.25;
}

.product_text p + p {
    margin-top: 15px;
}

img.right {
    float: right;
    width: 120px;
    margin: 5px 0 0 5px;
}

img.center {
    padding-left: 20px;
    padding-right: 20px;
}

img.bottom {
    margin-top: 20px;
}



.product {
  //min-height: 400px;
  /*overflow-y: scroll;*/
}





/*----------------------------------------------------------------------------*\
    pflichttext
\*----------------------------------------------------------------------------*/


.pflichttext {
    position: relative;
    display: inline-block;
    padding: 5px 8px 5px 10px;
    margin: 20px 0 0 0;
    z-index: 100;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    font-style: italic;
    text-decoration: none;
}

.pflichttext:before {
    position: relative;
    display: inline-block;
    content: '/';
    top: 0.1em;
    margin-right: 8px;
    font-size: 2em;
    font-weight: 100;
    transform: skewX(14deg);
    /*height: 20px;
    width: 6px;
    margin: 0 8px -6px 0;
    background: #A05EA2;
    transform: skewX(-14deg);*/
}

.pflichttext.triple:before {
  content: '///';
}



/*----------------------------------------------------------------------------*\
  boxedheadline
\*----------------------------------------------------------------------------*/


.boxedheadline {
    position: relative;
    background: #aa59a6;
    margin: -42px 25px 25px -56px;

    padding: 10px 0 10px 46px;
}

.boxedheadline:after {
    position: absolute;
    z-index: 4;
    content: '';
    width: 15px;
    height: 100%;
    right: -8px;
    top: 0;
    transform: skewX(-14deg);
    background: #aa59a6;
}

.butterfly_points {
    display: inline-block;
    position: relative;
    width: 32px;
    height: 32px;
    background: #fff url(img/butterfly.png) no-repeat center center;
    background-size: 20px;
    border-radius: 100px;
    vertical-align: middle;
}

.boxedheadline .text {
    position: relative;
    z-index: 6;
    display: inline-block;
    margin-left: 10px;
    font-size: 24px;
    line-height: 32px;
    font-weight: 300;
    font-style: italic;
    color: #fff;
    vertical-align: middle;
}

.boxedheadline .text sup {
  top: -0.4em;
  left: 0.2em;
  font-size: 60%;
}



/*----------------------------------------------------------------------------*\
    #app_meta
\*----------------------------------------------------------------------------*/

.app_meta {
    position: relative;
    display: block;
    margin-top: -160px;
    
    /* display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: stretch;
    align-items: flex-start;
    align-content: flex-start; */
}

.app_meta:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 40px;
    transform: skewY(-11deg);
    z-index: 5;
    background-color: #624963; 
}



.app_info {
    position: relative;
    z-index: 10;
    padding-top: 25px;
    border-top: 1px solid #866d85;
}

.app_info p {
    font-size: 13px;
    text-align: center;
    color: #fff;
}

.app_info p + p {
    margin-top: 5px;
}

.app_metalinks {
    position: relative;
    z-index: 10;
    padding: 0;
    margin: 26px 0;
    list-style: none;
    font-size: 13px;
    color: #fff;
    line-height: 1;
}

.app_metalinks li {
    padding: 0;
    margin: 0;
}

.app_metalinks li + li {
    margin-top: 12px;
}

.app_metalinks a {
    position: relative;
    display: inline-block;
    padding: 0 0 0 20px;
    color: #fff;
    text-decoration: none;
    transition: all 0.2s ease-out;
}

.app_metalinks a .icon {
    position: absolute;
    left: 0;
    top: -2px;
}

.app_metalinks a .icon svg {
    width: 16px;
    height: 16px;
}

.app_metalinks a:hover {
    opacity: 0.7;
}





/*----------------------------------------------------------------------------*\
    #app startscreen
\*----------------------------------------------------------------------------*/

.app_startscreen .hero_content {
    position: relative;
    z-index: 20; 
}

.app_startscreen .hero_contentwrap {
    position: relative;   
    margin-top: -100px;
}

.app_startscreen .hero_logo {
    position: absolute;
    right: 36px;
    top: 0;
    width: 65px;
    height: auto;
}

.app_startscreen .hero_content:before {
    content: '';
    position: 
}


.app_startscreen .hero_headline {
    margin-bottom: 25px;
    line-height: 0.9;
    font-weight: 300;
    font-style: italic;
    letter-spacing: -0.02em;
    color: #fff;
}

.app_startscreen .hero_headline span {
    position: relative;
    display: block;
}

.app_startscreen .hero_headline .p1 {
    margin-bottom: 10px;
    font-size: 30px;
    text-align: left;
}

.app_startscreen .hero_headline .p2 {
    margin-bottom: 10px;
    font-size: 70px;
    left: -30px;
    text-align: center;
}

.app_startscreen .hero_headline .p3 {
    font-size: 44px;
    text-align: right;
}


.app_startscreen .hero_subline {
    margin-bottom: 25px;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    color: #fff;
}

.app_startscreen .app_meta {
    margin-top: 0;
}



/*----------------------------------------------------------------------------*\
    #app introscreen
\*----------------------------------------------------------------------------*/

.app_introscreen .appcontent {
  min-height: 920px;
}


.app_introscreen .hero_contentwrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.app_introscreen .hero_image {
    opacity: 0.6;
}

.app_introscreen .hero_logo {
    position: relative;
    width: 65px;
    height: auto;
    margin-bottom: 80px;
}

.app_introscreen .hero_headline {
    position: relative;
    left: -3px;
    margin-bottom: 15px;
    line-height: 1.15;
    font-size: 38px;
    font-weight: 300;
    font-style: italic;
    letter-spacing: -0.02em;
    color: #fff;
}

.app_introscreen .hero_subline {
    padding-right: 20px;
    margin-bottom: 25px;
    line-height: 1.35;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: #fff;
}


.app_introscreen .promobox {
    position: relative;
    padding: 30px 30px 30px 30px;
    margin: 0 0 30px 0;
    background-color: #fff;
}



.app_introscreen .promobox_headline {
    margin-top: 6px;
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    color: #ff3062;
}

.app_introscreen .promobox_decoration {
    display: none;
}

.app_introscreen .promobox_image {
    position: relative;
    /* left: -32px;
    top: 60px;
    width: 178px; */
    width: 100%;
    height: auto;
}

.app_introscreen .promobox_text {
    line-height: 1.35;
}

.app_introscreen .promobox_text strong {
    display: block;
    margin-bottom: 5px;
    font-size: 18px;
    font-style: italic;
    color: #10384F;
}


.app_introscreen .app_meta {
  /* margin-top: -100px; */
  margin-top: 0;
}


@media screen and (min-width: 321px) {
    
  .app_introscreen .promobox_image {
    position: absolute;
    left: -32px;
    top: 60px;
    width: 178px;
    }  
    
  .app_introscreen .promobox {
    position: relative;
    padding: 30px 30px 30px 140px;
    margin: 0 0 30px 0;
    background-color: #fff;
  }  
  
  .app_introscreen .promobox_decoration {
    position: absolute;
    width: 202px;
    height: 26px;
    left: -76px;
    top: 30px;
    display: block;
  }

  
      
}




/*----------------------------------------------------------------------------*\
#app endscreen
\*----------------------------------------------------------------------------*/


.app_endscreen .hero {
  margin-bottom: 80px;
}

.app_endscreen .hero_contentwrap {
    position: absolute;
    top: 360px;
    left: 0;
    right: 0;
    z-index: 20;
}

.app_endscreen .hero_image {
  z-index: 8;
    opacity: 0.6;
}

.app_endscreen .hero:before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 140px;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: rgb(98,73,99);
  background: linear-gradient(180deg, rgba(98,73,99,0) 0%, rgba(98,73,99,1) 100%);
}




.app_endscreen .hero_headline {
    position: relative;
    left: -3px;
    margin-bottom: 15px;
    line-height: 1.15;
    font-size: 56px;
    font-weight: 300;
    font-style: italic;
    letter-spacing: -0.04em;
    color: #fff;
}

.app_endscreen .hero_subline {
    padding: 20px;
    margin-bottom: 25px;
    line-height: 1.35;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.02em;
    background-color: #fff;
}

.app_endscreen .hero_p {
    margin-bottom: 25px;
    line-height: 1.35;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
}

.app_endscreen .hero_button {
    font-weight: 600;
    text-transform: uppercase;
    font-style: italic;
}

.app_endscreen .app_meta {
  margin-top: -30px;
}



/*----------------------------------------------------------------------------*\
    #winwinwin
\*----------------------------------------------------------------------------*/

.app_winwinwin .hero_logo,
.app_winwinwinthx .hero_logo {
  position: relative;
  width: 65px;
  height: auto;
  margin-bottom: 40px;
}


.formbox {
  position: relative;
  padding-bottom: 90px;
}

.formbox form {
  position: relative;
}

.formbox .bedingungstext a {
  position: relative;
  z-index: 40;
}

.formbox_box {
  padding: 20px;
  background-color: #fff;
}

.formbox_title {
  margin-bottom: 10px;
  font-size: 32px;
  line-height: 0.9;
  font-weight: 300;
  letter-spacing: -0.02em;
  font-style: italic;
  color: #fff;
}

.app_winwinwin .formbox_image {
  position: absolute;
  right: 0;
  top: -80px;
  width: 160px;
  height: auto;
}

.app_winwinwin .formbox_titledecoration {
  position: absolute;
  width: 225px;
  height: 26px;
  left: -46px;
  top: 20px;
}


.app_winwinwin .app_meta {
  margin-top: -60px;
}

.app_winwinwinthx .app_meta {
  margin-top: -50px;
}




.app_winwinwinthx .formbox_image {
  position: absolute;
  right: 0;
  top: -40px;
  width: 160px;
  height: auto;
}

.app_winwinwinthx .formbox_titledecoration {
  position: absolute;
  width: 225px;
  height: 26px;
  left: -46px;
  top: 60px;
}


.app_winwinwinthx .formbox_box {
  padding-top: 100px;
}

.app_winwinwinthx .formbox_more {
  padding: 0 0 5px 0;
  margin: 30px 0 20px 0;
  font-size: 20px;
  font-style: italic;
  font-weight: bold;
  border-bottom: 1px solid #CFD7DC;
}



.formbox_introheadline {
    font-weight: bold;
    font-style: italic;
}

.app_winwinwin .formbox_introtext {
  margin-top: 20px;
  margin-bottom: 20px;
}

.app_winwinwin .formbox_box {
  padding-top: 70px;
}

.app_winwinwin form {
  margin-top: 40px;
}

.formbox .form_input {
  position: relative;
}

.formbox form label,
.formbox form select,
.formbox form input[type=text] {
  display: block;
  color: #0D2A40;
  color: #8c3c87;
}





.formbox form label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #0D2A40;
}

.formbox form input[type=text] {
  width: 100%;
  border: 1px solid #8c3c87;
  border-radius: 0;
  font-size: 16px;
  line-height: 16px;
  padding: 12px 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.formbox form input[type=text]:focus {
  border-color: #f0040e;
  border-radius: 0;
  outline: none;
}


.formbox form select {
  width: 100%;
  border: 1px solid #8c3c87;
  border-radius: 0;
  font-size: 16px;
  line-height: 16px;
  padding: 12px 16px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.formbox form select:focus {
  border-color: #f0040e;
  border-radius: 0;
  outline: none;
}

.formbox .form_select {
  position: relative;
}

.formbox .form_select .icon {
  display: block;
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 45px;
  height: 43px;
  background: #fff;
  pointer-events: none;
}

.formbox .form_select .icon:before {
  content: '';
  display: block;
  position: absolute;
  left: -20px;
  top: 0;
  bottom: 2px;
  width: 20px;
  height: 43px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
}


.formbox .form_select .icon svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 21px;
  height: 21px;
  color: #834283;
}

.formbox .form_input + .form_input {
  margin-top: 20px;
}
.formbox .error {
    color: red;
    margin-bottom: 5px;
    font-size: 14px;
}

.formbox .errors.show {
    margin-top: 32px;
    padding: 13px 7px;
    border: 3px solid red;
}

.app_winwinwin .modal_trigger {
  position: relative;
  z-index: 40;
}

.formbox .form_checkbox label {
  padding-top: 1px;
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
}

.formbox .form_checkbox label a {
  color: #0091DF;
  font-weight: 700;
  text-decoration: underline;
}


.form_checkbox label span {
  display: block;
  padding: 0 0 0 36px;
}

.form_checkbox input {
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
  z-index: 10;
}

.form_checkbox .checkbox .icon {
  position: absolute;
}

.form_checkbox .checkbox .icon svg {
  width: 28px;
  height: 28px;
  color: #fff;
}


.form_checkbox .checkbox {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #834283;
}

.form_checkbox input:checked + .checkbox {
  background: #834283;
}




.input_radio + .input_radio {
  margin-top: 5px !important;
}

.input_radio input {
  opacity: 0;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  margin: 0;
  z-index: 10;
  
}

.form_radio {
  position: relative;
  display: block;
}

.form_radio:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 100px;
  border: 1px solid #8c3c87;
}

.form_radio label {
  padding: 3px 0 3px 30px;
  font-weight: 400 !important;
  line-height: 1.2;
  color: #8c3c87 !important;
}

.input_radio input:checked + .form_radio:before {
  background: #834283;
  box-shadow: inset 0 0 0 3px #fff;
}



.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: space-between;
}

.col {
  width: 100%;
}

.col-1-2 {
  width: 50%;
  
  
}


/*----------------------------------------------------------------------------*\
  #product_button
\*----------------------------------------------------------------------------*/

.product_button {
  display: block;
  padding: 15px 0;
  text-decoration: none;
  color: #0D2A40;
  text-align: center;
  transition: all 0.2s ease-in-out;
}

.product_button:hover {
  opacity: 0.8;
}

.product_button img {
  display: inline-block;
  width: auto;
  height: 80px;
  padding: 0 10px;
}

.product_buttonimage {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 100%;
  height: 80px;
}

.product_button1 img {
  height: 75px;
}

.product_button2 img {
  height: 60px;
}

.product_button3 img {
  height: 65px;
}

.product_button4 img {
  height: 70px;
}


.product_buttontext {
  padding: 15px 0 0 0;
}

.product_buttontext .icon {
  position: relative;
  top: -2px;
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  color: #FF3162;
  
}





/*
Modal	
*/	

/* The Modal (background) */
.modal {
display: block;
position: fixed;
z-index: 140; /* Sit on top */
opacity: 0;
pointer-events: none;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100vw; /* Full width */
height: 100vh; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(16,56,79); /* Fallback color */
background-color: rgba(16,56,79,0.9); /* Black w/ opacity */

}


.modal.is-visible {
  opacity: 1;
  pointer-events: all;
  transition: all 0.3s ease-out;
}

.modal.is-hidden {
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease-out;
}



.modal_overline {
  font-size: 15px;
  line-height: 1;
  font-weight: bold;
  color: #FF3162;
}

.modal_headline {
  position: relative;
  left: -6px;
  font-size: 34px;
  line-height: 1;
  font-weight: 300;
  font-style: italic;
  color: #10384F;
  letter-spacing: -0.02em;
}

.modal_headline_smaller {
  position: relative;
  left: -6px;
  top: 4px;
  font-size: 20px;
  line-height: 1;
  font-weight: 300;
  font-style: italic;
  color: #10384F;
  letter-spacing: -0.02em;
}


.modal_headline sup {
  margin-left: 0.35em;
  font-size: 0.45em;
  font-style: normal;
}

.modal_decoration {
  position: absolute;
  left: -150px;
  top: 25px;
  width: 200px;
  height: 25px;
}

.modal-wrap {
  max-width: 414px;
  margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

/* Modal Content */
.modal-content {
  position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
/* border: 1px solid #888; */
width: 80%;
height: 74%;


box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animateopacity;
-webkit-animation-duration: 1s;
animation-name: animateopacity;
animation-duration: 1s;


}



.modal .close {
  position: absolute;
  width: 36px;
  height: 36px;
  right: 20px;
  top: 20px;
  cursor: pointer;
  z-index: 50;
}

.modal .close svg {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  color: #FF3162;

}




/* Add Animation */
@-webkit-keyframes animateopacity {
from { opacity:0} 
to { opacity:1}
}

@keyframes animateopacity {
from { opacity:0}
to { opacity:1}
}



.modal-header {
  padding: 25px 25px 10px 55px;
}

.modal-body {
  padding: 25px 25px 130px 25px;
  font-size: 13px;
  line-height: 1.25;
  color: #0D2A40;
  height: 100%;
  overflow-y: scroll;
  /*max-height: 500px;*/
}

.modal-body p + p {
  margin-top: 20px;
}

@media screen and (min-width: 321px) {
  .modal-body {
    font-size: 15px;
  } 
}


.accordion_title {
  position: relative;
  font-size: 18px;
  color: #834283;
  cursor: pointer;
  padding-bottom: 10px;
  border-bottom: 1px solid #834283;
  margin-bottom: 10px;
  
}
h2.small {
  margin-top: 20px;
  margin-bottom: 0px;
  margin-left: 30px;
}


.accordion_title .icon {
  position: absolute;
  display: block;
  right: 0;
  top: 3px;
  width: 21px;
  height: 21px;
  color: #834283;
  transition: all 0.2s ease-in-out;
}

.accordion.is-open .accordion_title .icon {
  transform: rotate(180deg);
}




/*******************************************************************************
 *
 *  #butterfly animation 
 *
 ******************************************************************************/


.butterflies * {
  -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  max-width: none;
}





/*----------------------------------------------------------------------------*\
  story butterflies
\*----------------------------------------------------------------------------*/

.story .butterflies {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 20%;
  bottom: 20%;
  left: 20%;
  right: 0;
  /*height: 400px;*/
  z-index: 200;
  /* display: none; */
}


/* 0,241545893719807*/


.story .butterfly1 {
  animation-delay: 1.0s;
  width: 7.2%;
  left: 57.6%;
  top: 2.4%;
  position: absolute;
}
.story .butterfly2 {
  animation-delay: 0.9s;
  position: absolute;
  top: 5%;
  left: 163px;
  width: 9.6%;
}
.story .butterfly3 {
  animation-delay: 0.8s;
  width: 7.2%;
  left: 39.12%;
  top: 0.72%;
  position: absolute;
}
.story .butterfly4 {
  animation-delay: 0.7s;
  position: absolute;
  top: 16.8%;
  left: 38.16%;
  display: block;
  width: 7.2%;
}
.story .butterfly5 {
  animation-delay: 0.6s;
  top: 2.4%;
  position: absolute;
  left: 15.6%;
  width: 16.8%;
}
.story .butterfly6 {
  animation-delay: 0.5s;
  position: absolute;
  top: 14.4%;
  left: -3.36%;
  width: 16.8%;
}
.story .butterfly7 {
  animation-delay: 0.4s;
  position: absolute;
  top: 22.8%;
  left: -2.4%;
  width: 37.2%;
}
.story .butterfly8 {
  animation-delay: 0.3s;
  top: 43.2%;
  position: absolute;
  left: -7.2%;
  width: 13.2%;
}
.story .butterfly9 {
  animation-delay: 0.2s;
  position: absolute;
  top: 62.4%;
  left: 14.64%;
  width: 4.32%;
}
.story .butterfly10 {
  animation-delay: 0.1s;
  position: absolute;
  left: -7.2%;
  top: 62.4%;
  width: 13.2%;
}






/*----------------------------------------------------------------------------*\
  End screen butterflies
\*----------------------------------------------------------------------------*/

.app_endscreen .butterflies {
  position: absolute;
  width: 100%;
  top: 100px;
  left: -30px;
  right: 0;
  height: 100%;
  z-index: 10;
}

.app_endscreen .butterfly1 {
  animation-delay: 0.1s;
  width: 30px;
  left: 240px;
  top: 10px;
  position: absolute;
}
.app_endscreen .butterfly2 {
  animation-delay: 0.2s;
  position: absolute;
  top: 25px;
  left: 163px;
  width: 40px;
}
.app_endscreen .butterfly3 {
  animation-delay: 0.3s;
  width: 30px;
  left: 138px;
  top: 3px;
  position: absolute;
}
.app_endscreen .butterfly4 {
  animation-delay: 0.4s;
  position: absolute;
  top: 70px;
  left: 159px;
  display: block;
  width: 30px;
}
.app_endscreen .butterfly5 {
  animation-delay: 0.5s;
  top: 10px;
  position: absolute;
  left: 65px;
  width: 70px;
}
.app_endscreen .butterfly6 {
  animation-delay: 0.6s;
  position: absolute;
  top: 60px;
  left: -14px;
  width: 70px;
}
.app_endscreen .butterfly7 {
  animation-delay: 0.7s;
  position: absolute;
  top: 95px;
  left: -10px;
  width: 155px;
}
.app_endscreen .butterfly8 {
  animation-delay: 0.8s;
  top: 180px;
  position: absolute;
  left: -30px;
  width: 55px;
}
.app_endscreen .butterfly9 {
  animation-delay: 0.9s;
  position: absolute;
  top: 260px;
  left: 61px;
  width: 18px;
}
.app_endscreen .butterfly10 {
  animation-delay: 1.0s;
  position: absolute;
  left: -30px;
  top: 260px;
  width: 55px;
}




/*******************************************************************************
 *
 *  #animations lib 
 *
 ******************************************************************************/


/**
 * ----------------------------------------
 * animation slide-in-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes slide-in-left {
  0% {
    -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
/**
 * ----------------------------------------
 * animation fade-in
 * ----------------------------------------
 */
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2020-10-20 14:43:26
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2020-10-20 15:35:11
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation scale-in-center
 * ----------------------------------------
 */
@-webkit-keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-in-center {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}



/*******************************************************************************
 *
 *  Animation mods 
 *
 ******************************************************************************/

.animate__animated.ae-1 {
  -webkit-animation-delay: 10ms;
  animation-delay: 10ms;
}

.animate__animated.ae-2 {
  -webkit-animation-delay: 160ms;
  animation-delay: 160ms;
}

.animate__animated.ae-3 {
  -webkit-animation-delay: 310ms;
  animation-delay: 310ms;
}

.animate__animated.ae-4 {
  -webkit-animation-delay: 460ms;
  animation-delay: 460ms;
}

.animate__animated.ae-5 {
  -webkit-animation-delay: 610ms;
  animation-delay: 610ms;
}

.animate__animated.ae-6 {
  -webkit-animation-delay: 760ms;
  animation-delay: 760ms;
}

.animate__animated.ae-7 {
  -webkit-animation-delay: 910ms;
  animation-delay: 910ms;
}

.animate__animated.ae-8 {
  -webkit-animation-delay: 1060ms;
  animation-delay: 1060ms;
}

.animate__animated.ae-9 {
  -webkit-animation-delay: 1210ms;
  animation-delay: 1210ms;
}

.animate__animated.ae-10 {
  -webkit-animation-delay: 1360ms;
  animation-delay: 1360ms;
}

.animate__animated.ae-11 {
  -webkit-animation-delay: 1510ms;
  animation-delay: 1510ms;
}

.animate__animated.ae-12 {
  -webkit-animation-delay: 1660ms;
  animation-delay: 1660ms;
}

.animate__animated.ae-13 {
  -webkit-animation-delay: 1810ms;
  animation-delay: 1810ms;
}

.animate__animated.ae-14 {
  -webkit-animation-delay: 1960ms;
  animation-delay: 1960ms;
}

.animate__animated.ae-15 {
  -webkit-animation-delay: 2110ms;
  animation-delay: 2110ms;
}

.animate__animated.ae-16 {
  -webkit-animation-delay: 2260ms;
  animation-delay: 2260ms;
}

.animate__animated.ae-17 {
  -webkit-animation-delay: 2410ms;
  animation-delay: 2410ms;
}

.animate__animated.ae-18 {
  -webkit-animation-delay: 2560ms;
  animation-delay: 2560ms;
}

.animate__animated.ae-19 {
  -webkit-animation-delay: 2710ms;
  animation-delay: 2710ms;
}

.animate__animated.ae-20 {
  -webkit-animation-delay: 2860ms;
  animation-delay: 2860ms;
}



/*******************************************************************************
 *
 *  Preloader 
 *
 ******************************************************************************/

#preloader {
  position: fixed;
  z-index: 2000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #826e83;
}

.preloader-object {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}


/*
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
*/
/**************************/
/* STYLES FOR THE SPINNER */
/**************************/
/*
* Constants:
*      STROKEWIDTH = 3px
*      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
*      ARCTIME     = 1333ms (time it takes to expand and contract arc)
*      ARCSTARTROT = 216 degrees (how much the start location of the arc
*                                should rotate each time, 216 gives us a
*                                5 pointed star shape (it's 360/5 * 3).
*                                For a 7 pointed star, we might do
*                                360/7 * 3 = 154.286)
*      CONTAINERWIDTH = 28px
*      SHRINK_TIME = 400ms
*/
.preloader-wrapper {
display: inline-block;
position: relative;
width: 50px;
height: 50px;
}

.preloader-wrapper.small {
width: 36px;
height: 36px;
}

.preloader-wrapper.big {
width: 64px;
height: 64px;
}

.preloader-wrapper.active {
/* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
-webkit-animation: container-rotate 1568ms linear infinite;
animation: container-rotate 1568ms linear infinite;
}

@-webkit-keyframes container-rotate {
to {
-webkit-transform: rotate(360deg);
}
}

@keyframes container-rotate {
to {
-webkit-transform: rotate(360deg);
        transform: rotate(360deg);
}
}

.spinner-layer {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
border-color: #26a69a;
}

.spinner-blue,
.spinner-blue-only {
border-color: #4285f4;
}

.spinner-red,
.spinner-red-only {
border-color: #db4437;
}

.spinner-yellow,
.spinner-yellow-only {
border-color: #f4b400;
}

.spinner-green,
.spinner-green-only {
border-color: #0f9d58;
}

/**
* IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
*
* iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
* guarantee that the animation will start _exactly_ after that value. So we avoid using
* animation-delay and instead set custom keyframes for each color (as redundant as it
* seems).
*
* We write out each animation in full (instead of separating animation-name,
* animation-duration, etc.) because under the polyfill, Safari does not recognize those
* specific properties properly, treats them as -webkit-animation, and overrides the
* other animation rules. See https://github.com/Polymer/platform/issues/53.
*/
.active .spinner-layer.spinner-blue {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer.spinner-red {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer.spinner-yellow {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer.spinner-green {
/* durations: 4 * ARCTIME */
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer,
.active .spinner-layer.spinner-blue-only,
.active .spinner-layer.spinner-red-only,
.active .spinner-layer.spinner-yellow-only,
.active .spinner-layer.spinner-green-only {
/* durations: 4 * ARCTIME */
opacity: 1;
-webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

@-webkit-keyframes fill-unfill-rotate {
12.5% {
-webkit-transform: rotate(135deg);
}
/* 0.5 * ARCSIZE */
25% {
-webkit-transform: rotate(270deg);
}
/* 1   * ARCSIZE */
37.5% {
-webkit-transform: rotate(405deg);
}
/* 1.5 * ARCSIZE */
50% {
-webkit-transform: rotate(540deg);
}
/* 2   * ARCSIZE */
62.5% {
-webkit-transform: rotate(675deg);
}
/* 2.5 * ARCSIZE */
75% {
-webkit-transform: rotate(810deg);
}
/* 3   * ARCSIZE */
87.5% {
-webkit-transform: rotate(945deg);
}
/* 3.5 * ARCSIZE */
to {
-webkit-transform: rotate(1080deg);
}
/* 4   * ARCSIZE */
}

@keyframes fill-unfill-rotate {
12.5% {
-webkit-transform: rotate(135deg);
        transform: rotate(135deg);
}
/* 0.5 * ARCSIZE */
25% {
-webkit-transform: rotate(270deg);
        transform: rotate(270deg);
}
/* 1   * ARCSIZE */
37.5% {
-webkit-transform: rotate(405deg);
        transform: rotate(405deg);
}
/* 1.5 * ARCSIZE */
50% {
-webkit-transform: rotate(540deg);
        transform: rotate(540deg);
}
/* 2   * ARCSIZE */
62.5% {
-webkit-transform: rotate(675deg);
        transform: rotate(675deg);
}
/* 2.5 * ARCSIZE */
75% {
-webkit-transform: rotate(810deg);
        transform: rotate(810deg);
}
/* 3   * ARCSIZE */
87.5% {
-webkit-transform: rotate(945deg);
        transform: rotate(945deg);
}
/* 3.5 * ARCSIZE */
to {
-webkit-transform: rotate(1080deg);
        transform: rotate(1080deg);
}
/* 4   * ARCSIZE */
}

@-webkit-keyframes blue-fade-in-out {
from {
opacity: 1;
}
25% {
opacity: 1;
}
26% {
opacity: 0;
}
89% {
opacity: 0;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}

@keyframes blue-fade-in-out {
from {
opacity: 1;
}
25% {
opacity: 1;
}
26% {
opacity: 0;
}
89% {
opacity: 0;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}

@-webkit-keyframes red-fade-in-out {
from {
opacity: 0;
}
15% {
opacity: 0;
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
51% {
opacity: 0;
}
}

@keyframes red-fade-in-out {
from {
opacity: 0;
}
15% {
opacity: 0;
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
51% {
opacity: 0;
}
}

@-webkit-keyframes yellow-fade-in-out {
from {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
75% {
opacity: 1;
}
76% {
opacity: 0;
}
}

@keyframes yellow-fade-in-out {
from {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
75% {
opacity: 1;
}
76% {
opacity: 0;
}
}

@-webkit-keyframes green-fade-in-out {
from {
opacity: 0;
}
65% {
opacity: 0;
}
75% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}

@keyframes green-fade-in-out {
from {
opacity: 0;
}
65% {
opacity: 0;
}
75% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
}
}

/**
* Patch the gap that appear between the two adjacent div.circle-clipper while the
* spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
*/
.gap-patch {
position: absolute;
top: 0;
left: 45%;
width: 10%;
height: 100%;
overflow: hidden;
border-color: inherit;
}

.gap-patch .circle {
width: 1000%;
left: -450%;
}

.circle-clipper {
display: inline-block;
position: relative;
width: 50%;
height: 100%;
overflow: hidden;
border-color: inherit;
}

.circle-clipper .circle {
width: 200%;
height: 100%;
border-width: 3px;
/* STROKEWIDTH */
border-style: solid;
border-color: inherit;
border-bottom-color: transparent !important;
border-radius: 50%;
-webkit-animation: none;
animation: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
}

.circle-clipper.left .circle {
left: 0;
border-right-color: transparent !important;
-webkit-transform: rotate(129deg);
transform: rotate(129deg);
}

.circle-clipper.right .circle {
left: -100%;
border-left-color: transparent !important;
-webkit-transform: rotate(-129deg);
transform: rotate(-129deg);
}

.active .circle-clipper.left .circle {
/* duration: ARCTIME */
-webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .circle-clipper.right .circle {
/* duration: ARCTIME */
-webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

@-webkit-keyframes left-spin {
from {
-webkit-transform: rotate(130deg);
}
50% {
-webkit-transform: rotate(-5deg);
}
to {
-webkit-transform: rotate(130deg);
}
}

@keyframes left-spin {
from {
-webkit-transform: rotate(130deg);
        transform: rotate(130deg);
}
50% {
-webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
}
to {
-webkit-transform: rotate(130deg);
        transform: rotate(130deg);
}
}

@-webkit-keyframes right-spin {
from {
-webkit-transform: rotate(-130deg);
}
50% {
-webkit-transform: rotate(5deg);
}
to {
-webkit-transform: rotate(-130deg);
}
}

@keyframes right-spin {
from {
-webkit-transform: rotate(-130deg);
        transform: rotate(-130deg);
}
50% {
-webkit-transform: rotate(5deg);
        transform: rotate(5deg);
}
to {
-webkit-transform: rotate(-130deg);
        transform: rotate(-130deg);
}
}

#spinnerContainer.cooldown {
/* duration: SHRINK_TIME */
-webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

@-webkit-keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

@keyframes fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}