@import url('https://fonts.googleapis.com/css?family=Asap|Raleway|Shadows+Into+Light');
body, html { height: 100%; margin: 0; padding: 0; font-family: 'Raleway', sans-serif; }
p { margin: 0; }
.container { padding: 50px; }

/* Start Slide */
.start-slide { background-image: url("../media/bg-photo-3.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; transition: 1s; }
.start-logo { position: absolute; top: 50%; left: 50%; width: 40%; margin-top: -10%; margin-left: -20%; }
.start-fade { position: relative; background-color: rgba(0, 0, 0, 0.75); height: 100%; width: 100%; }

.bedankt-h1 {text-align: center;}
.bedankt-h2 {padding: 50px; background: #fff; color: #7fbfff; text-align: center; margin: 100px auto; width: fit-content;}
.bedankt-logo {max-width: 500px; width: 75%;}
/* Start Slide */

/* First Slide */
.first-slide { position: relative; }
.first-text { text-align: justify; padding-bottom: 15px; }
.first-points { display: inline-block; width: 33%; }
.first-points .fa {font-size: 30px;}
/* First Slide */

/* Second Slide */
.second-slide { position: relative; background: #7fbfff; font-weight: bold; color: #fff; }
.second-text { text-align: left; font-size: 1.4em; }
.second-button { background: #fff; color: #000000; padding: 20px; border: 0; font-weight: bold; float: right; margin-top: -45px; transition: 1s; cursor: pointer; }
.second-button:hover { background: #c2c2c2; color #000; }
/* Second Slide */

/* Third Slide */
.third-slide { position: relative; background: #fff; font-weight: bold; }
.third-text { text-align: justify; font-weight: normal; padding-bottom: 15px; }
.third-image { width: calc(98%/6); }
/* Third Slide */

/* Fourth Slide */
.fourth-slide { position: relative; background: #7fbfff; font-weight: bold; color: #fff; }
.fourth-text { text-align: justify; margin-bottom: 25px; }
.fourth-method { display: inline-flex; width: 100%; text-transform: uppercase; }
.fourth-method-left { width: 49%; padding: 25px; text-align: center; font-size: 1em; font-weight: bold; cursor: pointer; transition: 1s; background: #fff; color: #000; border-right: solid 3px #7fbfff; }
.fourth-method-left a { text-decoration: none; color: #000; }
.fourth-method-right { width: 49%; padding: 25px; text-align: center; font-size: 1em; font-weight: bold; cursor: pointer; transition: 1s; background: #fff; color: #000; border-left: solid 3px #7fbfff; }
.fourth-method-right a { text-decoration: none; color: #000; }
.fourth-methods:hover { background: #c2c2c2; }
/* Fourth Slide */

/* Fifth Slide */
.fifth-slide { position: relative; background: #fff; }
.fifth-text { text-align: justify; margin-bottom: 25px; }
.fifth-input { width: 100%; padding: 10px; resize: none; margin-bottom: 25px; border-radius: 0px; }
.fifth-input-text { font-weight: bold; }
.fifth-button { padding: 25px; float: right; background: #7fbfff; color: #fff; border: 0; font-weight: bold; cursor: pointer; transition: 1s; }
.fifth-button:hover { background: #c2c2c2; color: #000; }
.fifth-expand { height: 75px; transition: 1s; }
.fifth-expand:focus { height: 200px; }
/* Fifth Slide */

/* Footer Slide */
.footer-slide { position: relative; background: #7fbfff; font-weight: bold; color: #fff; margin-top: 50px; }
/* Footer Slide */

/* Whatsapp */
.whatsapp { position: fixed; bottom: 5%; right: 5%; z-index: 9999; color: #7fbfff; font-size: 2em !important; border: solid 3px #7fbfff; border-radius: 50px; padding: 15px; background: #ffffff; transition: 1s; }
.whatsapp:hover { background: #7fbfff; color: #fff; border: solid 3px #fff; }
/* Whatsapp */

/* Loader */
.load { position:fixed;width:100%;height:100%;background:rgba(0,0,0,.75);z-index:9999;padding-top:15% }
.loader { color:#fff;font-size:20px;margin:100px auto;width:1em;height:1em;border-radius:50%;position:relative;text-indent:-9999em;-webkit-animation:load4 1.3s infinite linear;animation:load4 1.3s infinite linear;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)}@-webkit-keyframes load4{0%,100%{box-shadow:0 -3em 0 .2em,2em -2em 0 0,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 0}12.5%{box-shadow:0 -3em 0 0,2em -2em 0 .2em,3em 0 0 0,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}25%{box-shadow:0 -3em 0 -.5em,2em -2em 0 0,3em 0 0 .2em,2em 2em 0 0,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}37.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 0,2em 2em 0 .2em,0 3em 0 0,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}50%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 0,0 3em 0 .2em,-2em 2em 0 0,-3em 0 0 -1em,-2em -2em 0 -1em}62.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 0,-2em 2em 0 .2em,-3em 0 0 0,-2em -2em 0 -1em}75%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 0,-3em 0 0 .2em,-2em -2em 0 0}87.5%{box-shadow:0 -3em 0 0,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 0,-3em 0 0 0,-2em -2em 0 .2em}}@keyframes load4{0%,100%{box-shadow:0 -3em 0 .2em,2em -2em 0 0,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 0}12.5%{box-shadow:0 -3em 0 0,2em -2em 0 .2em,3em 0 0 0,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}25%{box-shadow:0 -3em 0 -.5em,2em -2em 0 0,3em 0 0 .2em,2em 2em 0 0,0 3em 0 -1em,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}37.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 0,2em 2em 0 .2em,0 3em 0 0,-2em 2em 0 -1em,-3em 0 0 -1em,-2em -2em 0 -1em}50%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 0,0 3em 0 .2em,-2em 2em 0 0,-3em 0 0 -1em,-2em -2em 0 -1em}62.5%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 0,-2em 2em 0 .2em,-3em 0 0 0,-2em -2em 0 -1em}75%{box-shadow:0 -3em 0 -1em,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 0,-3em 0 0 .2em,-2em -2em 0 0}87.5%{box-shadow:0 -3em 0 0,2em -2em 0 -1em,3em 0 0 -1em,2em 2em 0 -1em,0 3em 0 -1em,-2em 2em 0 0,-3em 0 0 0,-2em -2em 0 .2em} }
/* Loader */

/* Bouncing Arrow */
@-moz-keyframes bounce{0%,20%,50%,80%,100%{-moz-transform:translateY(0);transform:translateY(0)}40%{-moz-transform:translateY(-30px);transform:translateY(-30px)}60%{-moz-transform:translateY(-15px);transform:translateY(-15px)}}@-webkit-keyframes bounce{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}@keyframes bounce{0%,20%,50%,80%,100%{-moz-transform:translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);transform:translateY(0)}40%{-moz-transform:translateY(-30px);-ms-transform:translateY(-30px);-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-moz-transform:translateY(-15px);-ms-transform:translateY(-15px);-webkit-transform:translateY(-15px);transform:translateY(-15px)}}
.arrow { position: fixed; bottom: 10%; left: 50%; margin-left: -20px; width: 40px; height: 40px; cursor: pointer; background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=); background-size: contain; }
.bounce { -moz-animation: bounce 2s infinite; -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite; }
/* Bouncing Arrow */

@media only screen and (max-width: 500px) {
    .first-points {
        width: 100%;
    }
    .second-text {
        font-size: 1em;
        padding-bottom: 10px;
        text-align: center;
    }
    .second-button {
        margin-top: 0px;
        float: none;
    }
    .third-image {
        width: calc(98%/2);
        margin-bottom: 5px;
    }
    .fourth-method {
        display: block;
    }
    .fourth-method-left {
        width: 100%;
        font-size: 1em;
        padding: 10px;
        margin-bottom: 10px;
        border: 0;
    }
    .fourth-method-right {
        width: 100%;
        font-size: 1em;
        padding: 10px;
        margin-bottom: 10px;
        border: 0;
    }
}