html {
     height:100%;
     width:100%;
     overflow: scroll;
}
 body {
     background-color: #f7f7f7;
}
 h1, h2, h3, h4, h6 {
     font-family: Arial;
     line-height: 1.1;
}
 label, p {
     margin: 0;
}
 .event-title p {
     font-family: Arial;
     font-weight: 900;
     font-size: 35px;
     margin-bottom: 0;
}
 a {
     color: #343a40;
}
 a:hover {
     text-decoration: none;
}
 .features-icons p.title {
     font-family: Arial;
     font-size: 3rem;
     font-weight: 900;
     letter-spacing: -5px;
     margin: 1px;
}
 .features-icons p.date {
     font-family: Arial;
     font-size: 3rem;
     font-weight: bold;
     letter-spacing: -5px;
     margin: 1px;
     color: red;
}
 .features-icons p.details {
     font-family: Arial;
     font-size: 1.65rem;
     font-weight: bold;
     letter-spacing: -2px;
     margin: 1px;
     line-height: 1;
}
 .features-icons p.rsvp {
     font-family: Arial;
     font-size: 0.938rem;
     font-weight: normal;
     letter-spacing: -1px;
     margin: 1px;
}
 footer {
     color: #ffffff;
}
 footer.footer {
     padding-top: 1rem;
     padding-bottom: 1rem;
     background-color: #000000;
}
 select,input[type="text"],input[type="email"],textarea {
     width: 70%;
     box-sizing: border-box;
}
 #flag-belgian {
     position: relative;
}
 #flag-belgian img {
     position: fixed;
     top: 0px;
     right: 0px;
     width: 30%;
     z-index: 2;
}
 .flex-center {
     display: flex;
     align-items: center;
     justify-content: center;
}
 * {
     box-sizing: border-box;
     font-family: Arial;
     font-weight: 300;
}
 a, a:visited, a:hover, a:active {
     color: inherit;
     text-decoration: none;
}
 h1 {
     font-family: Arial;
     font-weight: 400;
     font-size: 3em;
     text-align: center;
}
 .outer-menu {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1;
}
 .outer-menu .checkbox-toggle {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 2;
     cursor: pointer;
     width: 60px;
     height: 60px;
     opacity: 0;
}
 .outer-menu .checkbox-toggle:checked + .hamburger > div {
     transform: rotate(135deg);
}
 .outer-menu .checkbox-toggle:checked + .hamburger > div:before, .outer-menu .checkbox-toggle:checked + .hamburger > div:after {
     top: 0;
     transform: rotate(90deg);
}
 .outer-menu .checkbox-toggle:checked + .hamburger > div:after {
     opacity: 0;
}
 .outer-menu .checkbox-toggle:checked ~ .menu {
     pointer-events: auto;
     visibility: visible;
}
 .outer-menu .checkbox-toggle:checked ~ .menu > div {
     transform: scale(1);
     transition-duration: 0.75s;
}
 .outer-menu .checkbox-toggle:checked ~ .menu > div > div {
     opacity: 1;
     transition: opacity 0.4s ease 0.4s;
}
 .outer-menu .checkbox-toggle:hover + .hamburger {
     box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
}
 .outer-menu .checkbox-toggle:checked:hover + .hamburger > div {
     transform: rotate(225deg);
}
 .outer-menu .hamburger {
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1;
     width: 60px;
     height: 60px;
     padding: 0.5em 1em;
     background: rgb(138 141 143 / 75%);
     border-radius: 0 0.12em 0.12em 0;
     cursor: pointer;
     transition: box-shadow 0.4s ease;
     backface-visibility: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .outer-menu .hamburger > div {
     position: relative;
     flex: none;
     width: 100%;
     height: 2px;
     background: #fefefe;
     transition: all 0.4s ease;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .outer-menu .hamburger > div:before, .outer-menu .hamburger > div:after {
     content: "";
     position: absolute;
     z-index: 1;
     top: -10px;
     left: 0;
     width: 100%;
     height: 2px;
     background: inherit;
     transition: all 0.4s ease;
}
 .outer-menu .hamburger > div:after {
     top: 10px;
}
 .outer-menu .menu {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     visibility: hidden;
     overflow: hidden;
     backface-visibility: hidden;
     outline: 1px solid transparent;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .outer-menu .menu > div {
     width: 200vw;
     height: 200vw;
     color: #fefefe;
     background: rgb(36 37 38 / 75%);
     border-radius: 50%;
     transition: all 0.4s ease;
     flex: none;
     transform: scale(0);
     backface-visibility: hidden;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .outer-menu .menu > div > div {
     text-align: center;
     max-width: 90vw;
     max-height: 100vh;
     opacity: 0;
     transition: opacity 0.4s ease;
     overflow-y: auto;
     flex: none;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .outer-menu .menu > div > div > ul {
     list-style: none;
     padding: 0 1em;
     margin: 0;
     display: block;
     max-height: 100vh;
}
 .outer-menu .menu > div > div > ul > li {
     padding: 0;
     margin: 1em;
     font-size: 24px;
     display: block;
}
 .outer-menu .menu > div > div > ul > li > a {
     position: relative;
     display: inline;
     cursor: pointer;
     transition: color 0.4s ease;
     font-weight: 400;
}
 .outer-menu .menu > div > div > ul > li > a:hover {
     color: #e5e5e5;
}
 .outer-menu .menu > div > div > ul > li > a:hover:after {
     width: 100%;
}
 .outer-menu .menu > div > div > ul > li > a:after {
     content: "";
     position: absolute;
     z-index: 1;
     bottom: -0.15em;
     left: 0;
     width: 0;
     height: 2px;
     background: #e5e5e5;
     transition: width 0.4s ease;
}
 @media (max-width: 300px) {
     body {
         background-color: red;
    }
}
/* Extra small devices (phones, 600px and down) */
 @media only screen and (max-width: 600px) {
     body {
         background-color: #CDCDCD;
         font-size: 14px;
    }
     #background_wrap {
         z-index: -1;
         top: 0;
         left: 0;
         height: 82vh;
         width: 100vw;
         background-size: 100% 100%;
         background-image: url('../img/mobile-p1.jpg');
         background-repeat: no-repeat;
    }
     #background_wrap-foot {
         z-index: -1;
         top: 0;
         left: 0;
         height: 50vh;
         width: 100vw;
         background-size: 100%;
         background-image: url('../img/mobile-p2.jpg');
         background-repeat: no-repeat;
    }
     .features-icons p.title {
         font-size: 2rem;
         margin-top: 50px;
         letter-spacing: -2px;
    }
     .features-icons p.date {
         font-size: 2rem;
         letter-spacing: -3px;
         margin-top: 30px;
    }
     .features-icons p.details {
         font-size: 14px;
         letter-spacing: -1px;
    }
     .features-icons p.rsvp {
         font-size: 12px;
    }
}






























/* Small devices (portrait tablets and large phones, 600px and up) */
 @media only screen and (min-width: 600px) {
     body {
         background-color: #575757;
         width: 100%;
         background-image: url('../img/820x1180 copy.jpg');
         background-size: cover;
         background-repeat: no-repeat;
         background-position: top center;
    }
     .features-icons{
         margin-top: 60px;
		 padding-bottom: 145px;
    }
     .features-icons p.title {
         font-size: 45px;
         margin-top: 0px;
         margin-left: 15px;
    }
     .features-icons p.date {
         font-size: 35px;
         margin-left: 15px;
    }
     .features-icons p.details {
         font-size: 20px;
         margin-left: 20px;
    }
     .features-icons p.rsvp {
         font-size: 16px;
         margin-left: 50px;
    }
     .features-icons img.logo-wings{
         width: 75%;
		 margin-top: 0px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
 @media only screen and (min-width: 768px) {
     body {
         background-color: #575757;
         width: 100%;
         background-image: url('../img/1024x1844 copy.jpg');
         background-size: cover;
         background-repeat: no-repeat;
         background-position: top center;
    }
     .features-icons{
         margin-top: 100px;
		 padding-bottom: 735px;
    }
     .features-icons p.title {
         font-size: 55px;
         margin-top: 0px;
         margin-left: 0px;
    }
     .features-icons p.date {
         font-size: 40px;
         margin-left: 0px;
    }
     .features-icons p.details {
         font-size: 25px;
         margin-left: 0px;
    }
     .features-icons p.rsvp {
         font-size: 18px;
         margin-left: 0px;
    }
     .features-icons img.logo-wings{
         width: 65%;
		 margin-top: 0px;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (min-width: 992px) {
     body {
         background-color: #575757;
         width: 100%;
         background-image: url('../img/1180x1640 copy.jpg');
         background-size: cover;
         background-repeat: no-repeat;
         background-position: top center;
         /*min-height: 160%;*/
    }
     .features-icons{
         margin-top: 230px;
		 padding-bottom: 980px;
    }
     .features-icons p.title {
         font-size: 40px;
         margin-top: 0px;
         margin-left: 80px;
    }
     .features-icons p.date {
         font-size: 36px;
         margin-left: 80px;
    }
     .features-icons p.details {
         font-size: 19px;
         margin-left: 77px;
    }
     .features-icons p.rsvp {
         font-size: 14px;
         margin-left: 75px;
    }
     .features-icons img.logo-wings{
         margin-left: 90px;
         width: 80%;
		 margin-top: 0;
    }
}

/*ADDED BREAKPOINT 1200-1430px */
 @media only screen and (min-width: 1200px) {
     body {
         background-color: #575757;
         width: 100%;
         background-image: url('../img/1200x1844 copy.jpg');
         background-size: cover;
         background-repeat: no-repeat;
         background-position: top center;
         /*min-height: 180%;*/
    }
     .features-icons{
         margin-top: 230px;
		 padding-bottom: 1500px;
		 
    }
     .features-icons p.title {
         font-size: 48px;
         margin-top: 0px;
         margin-left: 80px;
    }
     .features-icons p.date {
         font-size: 40px;
         margin-left: 80px;
    }
     .features-icons p.details {
         font-size: 22px;
         margin-left: 77px;
    }
     .features-icons p.rsvp {
         font-size: 14px;
         margin-left: 75px;
    }
     .features-icons img.logo-wings{
         margin-left: 90px;
         width: 80%;
		 margin-top: 0;
    }
}







/*ADDED BREAKPOINT 1431-1699px */
 @media only screen and (min-width: 1431px) {
     body {
		 background-color: #575757;
		 background-image: url('../img/1440x1844 -updated 002.jpg');
         /*min-height: 210%;*/
    }
     .features-icons{
		 /*padding-bottom: 1420px;*/
		 padding-bottom: 1180px;
		 
    }
 }



/*0303 ADDED BREAKPOINT 1500px */
 @media only screen and (min-width: 1500px) {
     .features-icons{
		 padding-bottom: 1420px;
		 
    }
 }





/* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (min-width: 1700px) {
     body {
        /*background-color: pink;
         */
         background-color: #575757;
         width: 100%;
         background-image: url('../img/2560x2561 copy.jpg');
         background-size: cover;
         background-repeat: no-repeat;
         background-position: top center;
         /*min-height: 232%;*/
    }
     .features-icons{
         margin-top: 350px;
		 padding-bottom: 1115px;
    }
     .features-icons p.title {
         font-size: 48px;
         margin-top: 0px;
         margin-left: 80px;
    }
     .features-icons p.date {
         font-size: 40px;
         margin-left: 80px;
    }
     .features-icons p.details {
         font-size: 22px;
         margin-left: 77px;
    }
     .features-icons p.rsvp {
         font-size: 14px;
         margin-left: 75px;
    }
     .features-icons img.logo-wings{
         margin-left: 90px;
         width: 80%;
		 margin-top: 0;
    }
}