html {
  background-color: #001F63;
}

body {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
}

a {
  text-decoration: none;
  color: #000;
}


/* Div-Divider for Deep Space and White backgrounds*/

.divider_w2ds {
  background-image: url("../images/Divider_w2ds.svg");
  height: 102px;
  background-color: #FFF;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.divider_ds2w {
  background-image: url("../images/Divider_ds2w.svg");
  height: 102px;
  background-color: #001F63;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}


/* Div-Divider for Clear Sky and White backgrounds*/

.divider_w2cs {
  background-image: url("../images/Divider_w2cs.svg");
  height: 102px;
  background-color: #FFF;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.divider_cs2w {
  background-image: url("../images/Divider_cs2w.svg");
  height: 102px;
  background-color: #3F8CFC;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}


/* Div-Divider for Nebula Grey and White backgrounds*/

.divider_w2ng {
  background-image: url("../images/Divider_w2ng.svg");
  height: 102px;
  background-color: #FFF;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.divider_ng2w {
  background-image: url("../images/Divider_ng2w.svg");
  height: 102px;
  background-color: #C4C4C4;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}



/******************************************
*******************************************

              NAVIGATION BAR

*******************************************
******************************************/

.navigation {
  background-color: #001F63;
  width: 100%;
  z-index: 1000;
  transition: 1s;
}

.is-sticky .navigation{
  background-color: #F2CF03;
}

.is-sticky .navigation .button {
  background-color: #F2CF03;
}

.is-sticky .navigation .button:hover {
  color: #002863;
}

.navigation ul {
  margin: 0;
  padding: 0;
}

.navigation li {
  margin: 0;
  padding: 10px;
  display: inline-block;
}

.navigation a {
  color: #FFF;
  font-size: 1.3em;
  font-weight: 600;
}

.navigation .button {
  text-decoration: none;
  padding: 10px 30px;
  background: #001F63;
  transition: 1s;
}

.navigation .button:hover {
	background: #FFF;
	cursor: pointer;
	transition: .8s;
  color: #002863;
}



/******************************************
*******************************************

                JUMBOTRON

*******************************************
******************************************/

#jumbotron {
  background-color: #FFF;
  height: 600px;
  background-image:url('../images/Stars.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

#logo {
  max-height: 600px;
  padding: 80px 0 0;
  max-width: 80%;
}



/******************************************
*******************************************

                  ABOUT

*******************************************
******************************************/

#about {
  background-color: #001F63;
  height: 600px;
}

#logotype {
  padding: 70px 0 40px;
  max-height: 250px;
  max-width: 55%;
}

#about p {
  margin: auto;
  max-width: 80%;
  font-size: 1.3em;
  color: #EEE;
  text-align: justify;
}

#about span {
  font-weight: 600;
}

#peng {
  padding: 40px 0 40px;
  max-height: 180px;
  max-width: 7%;
  display: none;
}

.slides {
  margin: auto;
  margin-top: 40px;
}

.slides img {
  border-radius: 100%;
  width: 130px;
  margin: auto;
}

.invisible {
  display: none !important;
}



/******************************************
*******************************************

                JOIN US

*******************************************
******************************************/

#join {
  background-color: #FFF;
  height: 600px;
}

#join h1 {
  padding: 70px 0 10px;
  margin: 0;
  color: #002863;
  display:inline-block;
  border-bottom: 5px solid #F2CF03;
}

#grid-join {
  padding-top: 10px;
  text-align: justify;
}

#join #who {
  background-image: url('../images/Who.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20%;
  font-size: 2em;
  padding: 10px 0 0;
}

#join #what {
  background-image: url('../images/What.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20%;
  font-size: 2em;
  padding: 10px 0 0;
}

#join #where {
  background-image: url('../images/Where.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24%;
  font-size: 2em;
  padding: 10px 0 0;
}

#join #when {
  background-image: url('../images/When.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 17%;
  font-size: 2em;
  padding: 10px 0 0;
}

#hand {
  padding: 20px 0 40px;
  max-height: 150px;
  max-width: 5%;
}



/******************************************
*******************************************

                  NEWS

*******************************************
******************************************/

#news {
  background-color: #3F8CFC;
  height: 600px;
}

#feed {
  padding-top: 80px;
}

#news h1 {
  padding: 70px 0 10px;
  margin: 0;
  color: #fff;
  display:inline-block;
  border-bottom: 5px solid #F2CF03;
}

#news p {
  margin: auto;
  max-width: 80%;
  font-size: 1.3em;
  color: #FFF;
  text-align: justify;
  padding-top: 50px;
}

#info {
  padding: 40px 0 40px;
  max-height: 180px;
  max-width: 10%;
}

.fb-page {
  position:relative;
  box-shadow:0 1px 4px rgba(242,207,3, 0.3), 0 0 40px rgba(242,207,3, 0.1) inset;
}

.fb-page:before, .fb-page:after {
	content:"";
  position:absolute;
  z-index:-1;
  box-shadow:0 0 20px rgba(242,207,3.8);
  top:10px;
  bottom:10px;
  left:0;
  right:0;
  border-radius:100px / 10px;
}

.fb-page:after {
  right:10px;
  left:auto;
  transform:skew(8deg) rotate(3deg);
}


/******************************************
*******************************************

                  MEDIA

*******************************************
******************************************/

#media {
  background-color: #FFF;
  height: 600px;
}

#video {
  margin: 0 auto;
  padding: 120px 0;
  width: 65%;
  max-height: 400px;
}

#video video {
  width: 100%;
}

#media h1{
    padding: 90px 0 10px;
    margin: 0;
    color: #002863;
    display:inline-block;
    border-bottom: 5px solid #F2CF03;
}

#media p {
  margin: auto;
  max-width: 80%;
  font-size: 1.2em;
  color: #002863;
  text-align: justify;
  padding-top: 50px;
}

#movie {
  padding: 40px 0 40px;
  max-height: 180px;
  max-width: 17%;
}

#media a {
  font-weight: bold;
  color: #3F8CFC;
}

#media a:hover {
  color: #002863;
}


/******************************************
*******************************************

               CONTACT US

*******************************************
******************************************/

#contact {
  background-color: #C4C4C4;
  height: 650px;
}

#contact h1 {
  padding: 70px 0 10px;
  margin: 0;
  color: #002863;
  display:inline-block;
  border-bottom: 5px solid #F2CF03;
}

#contact .grid-8 p {
  margin: auto;
  max-width: 80%;
  font-size: 1.3em;
  color: #002863;
  text-align: justify;
  padding-top: 50px;
}

#booking-image {
  padding: 60px 0 40px;
  max-height: 180px;
  max-width: 13%;
}

#contact-info {
  text-align: left;
  margin: auto;
  max-width: 80%;
  font-size: 1.2em;
  color: #001F63;
  padding-top: 160px;
}

#contact-info img {
  float: left;
  height: auto;
  width: 23px;
  margin: 3px 10px 0;
  padding: 0;
}

#contact-info p:hover {
  color: #3F8CFC;
}


/* Contact Form */

input, textarea {
	padding: 8px;
	border: solid 3px #F2CF03;
	font: 13px;
	width: 100%;
}

textarea {
 width: 100%;
 max-width: 100%;
 height: 150px;
 line-height: 150%;
}

#send_form{
	color: #001F63;
	border: solid 1px #C4C4C4;
	background: #C4C4C4;
}

#send_form:hover, #send_form:active {
  border: solid 1px #F2CF03;
  background: #F2CF03;
}

#contact_form {
margin: auto;
width: 450px;
text-align: left;
display: none;
}

.errormsg, label {
	color: #001F63;
  margin-left: 10px;
}

*:focus {
    outline: 0;
}



/******************************************
*******************************************

                 FOOTER

*******************************************
******************************************/

.footer {
  background-color: #001F63;
  height: 60px;
}

#pelikhan {
  text-align: center;
}

#pelikhan img {
  height: auto;
  width: 250px;
  margin: 0;
  padding: 20px 10px 10px 10px;
}

.footer p {
  color: #FFF;
  font-size: 1.1em;
  font-family: 'Montserrat Alternates', 'Open Sans', sans-serif;
  padding-top: 8px;
}

.footer a p:hover {
  color: #F2CF03;
}




/******************************************
*******************************************

               MEDIA QUERIES

*******************************************
******************************************/

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

.divider {
  height: 150px;
}

#about p {
  width: 50%;
  margin: auto;
}
}



@media screen and (max-width: 1099px) {

.navigation a {
  font-size: 1.2em;
}

.slides img {
  width: 100px;
}

#hand {
  padding-top: 10px;
}

.fb-page {
  right: 50px;
}

#media p{
  max-width: 90%;
}

#contact-info {
  max-width: 100%;
}
}



@media screen and (max-width: 899px) {

.navigation a {
  font-size: 1em;
}

.navigation .button {
  padding: 10px 20px;
}

.slides img {
  width: 90px;
}

#join p {
  font-size: 0.9em;
}

#news p {
  font-size: 1.2em;
}

.fb-page {
  top: 50px
  right: 150px
}

#contact-info {
  font-size: 1em;
  padding-top: 180px;
}
}



@media screen and (max-width: 767px) {

.navigation a {
  font-size: 0.7em;
}

.navigation .button {
  padding: 16px 10px 11px 10px;
}

#jumbotron {
  height: 300px;
}

#logo {
  max-height: 300px;
  padding: 60px 0 0;
}

#about {
  height: 700px;
}

#logotype {
  padding: 90px 0 20px;
  max-width: 70%;
}

#about p {
  max-width: 90%;
  font-size: 1em;
}

.slides {
  margin-top: 20px;
}

.slides img {
  width: 80px;
}

#join {
  height: 900px;
}

#join h1 {
  padding: 90px 0 10px;
  font-size: 1.2em;
}

#join #who {
  background-size: 30px;
  font-size: 1.2em;
}

#join #what {
  background-size: 30px;
  font-size: 1.2em;
}

#join #where {
  background-size: 33px;
  font-size: 1.2em;
}

#join #when {
  background-size: 28px;
  font-size: 1.2em;
}

#gotquestions {
  font-style: italic;
}

#hand {
  display: none;
}

#news {
  height: 700px;
}

#feed {
  padding-top: 50px;
}

textarea {
 height: 100px;
}

#news h1 {
  padding: 90px 0 10px;
  font-size: 1.2em;
}

#news p {
  display: none;
}

#info {
  display: none;
}

#media {
  height: 500px;
}

#video {
  margin: 0 auto;
  padding: 90px 0 0;
  width: 90%;
  max-height: 400px;
}

#video video {
  width: 100%;
}

#media h1{
    padding: 10px 0 10px;
    font-size: 1.2em;
}

#media p {
  max-width: 80%;
  font-size: 1em;
  padding-top: 20px;
}

#movie {
  display: none;
}

#contact {
  height: 620px;
}

#contact h1 {
  padding: 90px 0 10px;
  font-size: 1.2em;
}

#contact .grid-8 p {
  max-width: 90%;
  font-size: 1em;
  padding-top: 30px;
}

#booking-image {
  display: none;
}

#contact-info {
  font-size: 1em;
  padding-top: 20px;
}

#contact_form {
width: 250px;
}

.footer {
  height: 160px;
}

div#pelikhan.grid-4{
  height: 40px;
  margin-bottom: 8px;
}

div#impressum.grid-4{
  height: 40px;
}

div#members.grid-4{
  height: 50px;
  margin-bottom: 20px;
}

}