body { width: 100%; height: 100%; position: relative; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; }
body a { color: #373a3c; text-decoration: underline; }

html { width: 100%; height: 100%; }

h1, h2 { font-family: 'Amatic SC', cursive; }

h1 { font-size: 50px; padding-bottom: 20px; font-weight: bold; }

#choose_language div.row div { text-align: center; }
#choose_language div.row div p { font-size: 50px; font-family: 'Amatic SC', cursive; color: #000; margin-top: 100px; }
#choose_language div.row div p a { text-decoration: underline; color: #000; }

#authorization-container { position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; background-color: white; z-index: 13; text-align: center; }
#authorization-container.hidden { visibility: hidden; width: 0px; height: 0px; }
#authorization-container #form-container { position: absolute; top: 30%; width: 50%; left: 25%; }
#authorization-container #form-container h1 { margin-bottom: 30px; }
#authorization-container #form-container img { width: 100px; margin-bottom: 20px; }
#authorization-container #form-container span { display: block; padding-bottom: 20px; }
#authorization-container #form-container span.hidden { visibility: hidden; height: 0px; width: 0px; padding-bottom: 0px; }

.intro { display: table; width: 100%; height: auto; padding: 100px 0; text-align: center; color: #000; background: transparent url(../images/IMG_0334_bg.jpg) no-repeat bottom center scroll; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; }
.intro .intro-body { display: table-cell; vertical-align: middle; }

@media (min-width: 768px) { .intro { height: 100%; padding: 0; }
  .intro .intro-body .brand-heading { font-size: 80px; font-family: 'Amatic SC', cursive; padding-top: 570px; }
  .intro .intro-body .intro-text { font-size: 26px; } }
#navigation { z-index: 100; background-color: #fff; border-bottom: 1px solid #dddddd; }
#navigation.active { box-shadow: 0px 1px 5px #dddddd; }
#navigation #navbar ul#desktopNavigation { list-style: none; border-bottom: none; }
#navigation #navbar ul#desktopNavigation.lang-de li { font-size: 28px; }
#navigation #navbar ul#desktopNavigation li { font-family: 'Amatic SC', cursive; font-size: 30px; float: left; margin-right: 20px; margin-top: 40px; }
#navigation #navbar ul#desktopNavigation li.logo img { padding-top: 0px; padding-bottom: 30px; width: 100px; }
#navigation #navbar ul#desktopNavigation li a { color: #000; border: none; font-weight: bold; text-decoration: none; }
#navigation #navbar ul#desktopNavigation li a:hover, #navigation #navbar ul#desktopNavigation li a:focus, #navigation #navbar ul#desktopNavigation li a.active { text-decoration: underline; }
#navigation #navbar #burger { visibility: hidden; position: fixed; top: 0px; left: 0px; }
#navigation #navbar #burger img.logo { float: left; }
#navigation #navbar #burger > div { text-align: right; }
#navigation #navbar #burger > div #mobileNavigation { list-style: none; padding-left: 0px; }
#navigation #navbar #burger > div #mobileNavigation li { float: none; display: block; padding-right: 0.75rem; }
#navigation #navbar #burger > div #mobileNavigation li a { font-family: 'Amatic SC', cursive; font-size: 30px; }
@media screen and (max-width: 1200px) { #navigation #navbar #desktopNavigation { visibility: hidden; position: fixed; top: 0px; left: 0px; }
  #navigation #navbar #burger { visibility: visible; position: relative; display: block; }
  #navigation #navbar #burger img.logo { height: 40px; width: auto; }
  #navigation #navbar #burger li { margin-right: 0px; } }

.section { padding-top: 170px; padding-bottom: 100px; border-bottom: 1px solid #dddddd; }

#our_story h1 { text-align: center; padding-bottom: 50px; }
@media screen and (min-width: 769px) { #our_story #timeline { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } }
#our_story #timeline #line_container { position: relative; }
@media screen and (max-width: 768px) { #our_story #timeline #line_container { visibility: hidden; height: 0px; width: 0px; } }
#our_story #timeline #line_container #line { background: #dcddde; border-radius: 5px; width: 10px; position: absolute; top: 0px; bottom: 0px; left: 90px; }
@media screen and (max-width: 1200px) { #our_story #timeline #line_container #line { left: 78px; } }
@media screen and (max-width: 992px) { #our_story #timeline #line_container #line { left: 60px; } }
#our_story #timeline div.story_card { margin-bottom: 50px; }
#our_story #timeline div.story_card span { display: block; }
#our_story #timeline div.story_card img { max-width: 100%; max-height: 160px; }
#our_story #timeline div.right { padding-top: 60px; }
@media screen and (max-width: 768px) { #our_story #timeline div.right { border-left: solid #dcddde 10px; padding-left: 35px; margin-left: 15px; position: relative; }
  #our_story #timeline div.right.left::before, #our_story #timeline div.right.right::before { content: ""; position: absolute; width: 10px; height: 10px; left: -10px; border-radius: 5px; background-color: #dcddde; }
  #our_story #timeline div.right.left::before { top: -5px; }
  #our_story #timeline div.right.right::before { bottom: -5px; }
  #our_story #timeline div.right.left::after { content: ""; position: absolute; width: 10px; height: 70px; background-color: #dcddde; bottom: -70px; left: -10px; } }
@media screen and (max-width: 768px) { #our_story #timeline div.right { padding-top: 0px; } }
#our_story #timeline div.right div.card_container { position: relative; }
#our_story #timeline div.right div.card_container::before { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 15px; top: 10px; background: #dcddde; z-index: 11; left: -125px; }
@media screen and (max-width: 1200px) { #our_story #timeline div.right div.card_container::before { left: -104px; } }
@media screen and (max-width: 992px) { #our_story #timeline div.right div.card_container::before { left: -85px; } }
@media screen and (max-width: 768px) { #our_story #timeline div.right div.card_container::before { left: -55px; } }
#our_story #timeline div.right div.card_container::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 5px; top: 20px; background: white; z-index: 12; left: -115px; }
@media screen and (max-width: 1200px) { #our_story #timeline div.right div.card_container::after { left: -94px; } }
@media screen and (max-width: 992px) { #our_story #timeline div.right div.card_container::after { left: -75px; } }
@media screen and (max-width: 768px) { #our_story #timeline div.right div.card_container::after { left: -45px; } }
#our_story #timeline div.right div.card_container div.story_card { position: relative; }
#our_story #timeline div.right div.card_container div.story_card::after { content: ""; position: absolute; z-index: 10; height: 10px; top: 20px; background: #dcddde; width: 90px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; left: -105px; }
@media screen and (max-width: 1200px) { #our_story #timeline div.right div.card_container div.story_card::after { width: 70px; } }
@media screen and (max-width: 992px) { #our_story #timeline div.right div.card_container div.story_card::after { width: 50px; } }
@media screen and (max-width: 1200px) { #our_story #timeline div.right div.card_container div.story_card::after { left: -84px; } }
@media screen and (max-width: 992px) { #our_story #timeline div.right div.card_container div.story_card::after { left: -65px; } }
@media screen and (max-width: 768px) { #our_story #timeline div.right div.card_container div.story_card::after { left: -35px; width: 20px; } }
#our_story #timeline div.left { text-align: right; }
@media screen and (max-width: 768px) { #our_story #timeline div.left { border-left: solid #dcddde 10px; padding-left: 35px; margin-left: 15px; position: relative; }
  #our_story #timeline div.left.left::before, #our_story #timeline div.left.right::before { content: ""; position: absolute; width: 10px; height: 10px; left: -10px; border-radius: 5px; background-color: #dcddde; }
  #our_story #timeline div.left.left::before { top: -5px; }
  #our_story #timeline div.left.right::before { bottom: -5px; }
  #our_story #timeline div.left.left::after { content: ""; position: absolute; width: 10px; height: 70px; background-color: #dcddde; bottom: -70px; left: -10px; } }
@media screen and (max-width: 768px) { #our_story #timeline div.left { text-align: left; } }
#our_story #timeline div.left div.card_container { position: relative; }
#our_story #timeline div.left div.card_container::before { content: ""; position: absolute; width: 30px; height: 30px; border-radius: 15px; top: 10px; background: #dcddde; z-index: 11; right: -125px; }
@media screen and (max-width: 1200px) { #our_story #timeline div.left div.card_container::before { right: -113px; } }
@media screen and (max-width: 992px) { #our_story #timeline div.left div.card_container::before { right: -95px; } }
@media screen and (max-width: 768px) { #our_story #timeline div.left div.card_container::before { left: -55px; } }
#our_story #timeline div.left div.card_container::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 5px; top: 20px; background: white; z-index: 12; right: -115px; }
@media screen and (max-width: 1200px) { #our_story #timeline div.left div.card_container::after { right: -103px; } }
@media screen and (max-width: 992px) { #our_story #timeline div.left div.card_container::after { right: -85px; } }
@media screen and (max-width: 768px) { #our_story #timeline div.left div.card_container::after { left: -45px; } }
#our_story #timeline div.left div.card_container div.story_card { position: relative; }
#our_story #timeline div.left div.card_container div.story_card::after { content: ""; position: absolute; z-index: 10; height: 10px; top: 20px; background: #dcddde; width: 90px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; right: -105px; }
@media screen and (max-width: 1200px) { #our_story #timeline div.left div.card_container div.story_card::after { width: 70px; } }
@media screen and (max-width: 992px) { #our_story #timeline div.left div.card_container div.story_card::after { width: 50px; } }
@media screen and (max-width: 1200px) { #our_story #timeline div.left div.card_container div.story_card::after { right: -93px; } }
@media screen and (max-width: 992px) { #our_story #timeline div.left div.card_container div.story_card::after { right: -75px; } }
@media screen and (max-width: 768px) { #our_story #timeline div.left div.card_container div.story_card::after { left: -35px; width: 20px; border-radius: 5px; } }

#where_and_when { position: relative; background-color: rgba(255, 254, 239, 0.3); }
#where_and_when::after { content: ""; background: url(../images/pexels-photo_small.jpg) no-repeat bottom center scroll; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; opacity: 0.4; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
#where_and_when div.container h1 { font-weight: bold; }
#where_and_when div.container div.apero-hidden { visibility: hidden; height: 0px; width: 0px; overflow: hidden; }
#where_and_when div.container div.row { padding-top: 20px; padding-bottom: 20px; }
#where_and_when div.container div.row h2 { font-weight: bold; }
#where_and_when div.container div.row span { display: block; }
#where_and_when div.container div.row img { border: solid white 5px; width: 80%; float: right; }

#planning div.row { margin-bottom: 40px; }
#planning div.row.transport div.col-md-12 h2, #planning div.row.things-to-do div.col-md-12 h2 { border-top: 1px solid #dddddd; padding-top: 40px; }
#planning div.row div.col-md-12 h2 { font-weight: bold; padding-bottom: 20px; }
#planning div.row ul { list-style: none; padding: 0px; }

#gifts { position: relative; background-color: rgba(160, 186, 247, 0.4); padding-top: 100px; }
#gifts::after { content: ""; background: url(../images/wood-texture-trees_small.jpg) no-repeat bottom center scroll; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; opacity: 0.4; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
#gifts div.container h1 { font-weight: bold; }

#rsvp div.apero-hidden { visibility: hidden; height: 0px; width: 0px; overflow: hidden; }
#rsvp div.attending.hidden, #rsvp div.yes-confirmation.hidden, #rsvp div.no-confirmation.hidden, #rsvp div.error-confirmation.hidden, #rsvp form.hidden { visibility: hidden; height: 0px; width: 0px; overflow: hidden; }

footer .container { background: url(../images/tree-of-love.jpg) no-repeat center 50px scroll; background-size: 800px auto; height: 700px; display: block; }
footer .container span { font-family: 'Amatic SC', cursive; font-size: 50px; padding-top: 600px; display: block; text-align: center; }