@import '../fonts/stylesheet.css';
@import url("https://use.typekit.net/kqy2bju.css");

:root {
    --color-orange:#E68D20;
    --color-red:#D80010;
    --font-heading:"adelle", serif;
    --font-body:"metropolisregular", sans-serif;
}
html {
	scroll-behavior: smooth;
    overflow-x:hidden;
    overflow-y:auto;
    background-color:var(--color-orange);
}
body, html {
    padding:0px;
    margin:0px;
    font-family:var(--font-body);
}
h1, h2, h3 {
    font-family:var(--font-heading);
}
h2 {
    font-size:2em;
    line-height:1.4em;
}
input {
    font-family: 'Montserrat', sans-serif;
}
p {
    line-height:1.4em;
}

.cover {
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
}

.white-content {
    position:relative;
    float:left;
    width:100%;
    background-color:white;
}

#header {
    position:relative;
    float:left;
    width:100%;
    margin:0px 0px 10px 0px;
}
.header-bg {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:cover;
}
.header-multiply {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:var(--color-orange);
    mix-blend-mode: multiply;
}
.header-copyright {
    position:absolute;
    bottom:20px;
    left:20px;
    color:white;
    font-size:0.8em;
}
.header-form {
    position:relative;
    float:left;
    width:calc(100% - 40px);
    padding:100px 20px;
    background-color:var(--color-orange);
    display:flex;
    justify-content:center;
}
.header-form .form-container {
    position:relative;
    float:left;
    background-color:white;
    max-width:610px;
    width:calc(100% - 40px);
    border-radius:12px;
    padding:20px;
    margin:0px 20px;
}
.header-form .form-unavailable {
    position:relative;
    float:left;
    color:white;
    max-width:610px;
    width:calc(100% - 40px);
    padding:20px;
    margin:0px 20px;
    text-align:center;
}
.layout {
    position:relative;
    float:left;
    width:100%;
    display:flex;
    justify-content:center;
}
.layout .content {
    position:relative;
    float:left;
    width:calc(100% - 40px);
    margin:0px 20px;
    max-width:1200px;
}

/* Content Blocks */

.content-blocks {
    position:relative;
    float:left;
    width:100%;
    display:flex;
    flex-flow:row wrap;
    justify-content:space-between;
}
.content-blocks .content-block {
    position:relative;
    float:left;
    width:100%;
}

.calender-item {
    position:relative;
    float:left;
    width:100%;
    margin-bottom:20px;
}
.calender-item .date{
    position:relative;
    float:left;
    background-color:var(--color-red);
    color:white;
    width:100px;
    height:100px;
    padding:5px;
    line-height:100px;
    text-align:center;
    border-radius:8px;
    font-weight:bold;
}
.calender-item .title {
    position:relative;
    float:right;
    width:calc(100% - 120px);
    padding:5px;
    text-align:left;
}
.calender-item .text {
    position:relative;
    float:right;
    width:calc(100% - 120px - 10px);
    padding:0px 5px;
    margin-left:10px;
    text-align:left;
}
.calender-item .text h3 {
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 0px;
}

/* Footer */

#footer {
    position:relative;
    float:left;
    width:100%;
    background-color:var(--color-orange);
    color:white;
    padding:40px 0px;
}
#footer a {
    color:white;
}
#footer .columns {
    position:relative;
    float:left;
    width:100%;
}
#footer .columns .col {
    position:relative;
    float:left;
    width:50%;
}
#footer .columns .col h3 {
    margin:0px 0px 10px 0px;
    padding:0px;
}

/* Socials */

.socials {
    position:relative;
    float:left;
    width:100%;
}
.socials .icons {
    position:relative;
    float:left;
    width:100%;
    font-size:34px;
}
.socials .icons .social {
    position:relative;
    float:left;
    width:50px;
    height:50px;
    text-align:center;
    line-height:50px;
    background-color:var(--color-red);
    border-radius:8px;
    margin:0px 10px 10px 0px;
    display:flex;
    justify-content:center;
    align-items:center;
}
.socials .icons .social i {
    position:relative;
    float:left;
    display:block;
    margin-top:2px;
}

/* TopNav */

.topnav-ghost {
    position:relative;
    float:left;
    width:100%;
    height:135px;
    transition:all linear 0.2s;
}
#topnav {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    height:135px;
    background-color:white;
    box-shadow:0px 5px 5px rgba(0,0,0,0.1);
    transition:all linear 0.2s;
}
#topnav .layout {
    height:100%;
}
#topnav .layout .content {
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
#topnav .nav {
    position:relative;
    float:left;
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}
#topnav .nav .logo {
    position:relative;
    float:left;
    width:180px;
    margin:0px 8px 0px 0px;
}
#topnav .nav .logo img {
    width:100%;
    height:auto;
    margin:0px 0px 10px 0px;
}
#topnav .nav .menu {
    position:relative;
    float:right;
}
#topnav .nav .menu .item {
    display:block;
    position:relative;
    float:left;
    background-color:var(--color-red);
    color:white;
    padding:10px 30px;
    margin:0px 8px;
    border-radius:8px;
    text-decoration:none;
    font-family:var(--font-heading);
    font-weight:bold;
    transition:all linear 0.2s;
}
#topnav .nav .menu .item:hover {
    background-color:var(--color-orange);
}

/* Sponsors */

.sponsors {
    position:relative;
    float:left;
    width:calc(100% - 20px);
    list-style-type:square;
    display:flex;
    flex-flow:row wrap;
    overflow:hidden;
    margin:0px 0px 40px 0px;
    padding:0px 20px 0px 0px;
    list-style-type:none;
}
.sponsors li {
    position:relative;
    float:left;
    width:calc(50% - 20px);
}

/* Media */

.media {
    position:relative;
    float:left;
    width:100%;
    margin:20px 0px 0px 0px;
}
.media-item {
    position:relative;
    float:left;
    width:100%;
    margin-bottom:40px;
}
.media-item .image {
    position:relative;
    float:left;
    width:200px;
}
.media-item .image .aspect {
    position:relative;
    float:left;
    width:100%;
    padding-top:100%;
}
.media-item .image .background {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color:var(--color-red);
    border-radius:12px;
}
.media-item .text {
    position:relative;
    float:right;
    width:calc(100% - 220px);
}
.media-item .text .title {
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}
.media-item .text .date {
    font-size:0.9em;
    font-style:italic;
}

/* Form */

form .title {
    position:relative;
    float:left;
    width:100%;
    font-weight:bold;
    font-family:var(--font-heading);
}
form .description{
    position:relative;
    float:left;
    width:100%;
    font-size:0.8em;
    margin:0px 0px 10px 0px;
}
form .category-label {
    position:relative;
    float:left;
    width:100%;
    display:block;
    margin:0px 0px 5px 0px;
    font-weight:bold;
    font-family:var(--font-heading);
}
form input[type=text],
form input[type=email],
select {
    padding:5px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border:1px solid #707070;
    margin:0px 0px 0px 0px;
}
form input[type=email] {
    width:calc(100% - 10px);
}
form input[type=submit],
.signup-result .buttons a { 
    padding:10px 40px;
    color:white;
    background-color:var(--color-orange);
    font-weight:bold;   
    border-radius:8px;
    font-size:1.1em;
    border:0px solid orange;
    cursor: pointer;
    text-decoration:none;
    font-family:var(--font-heading);
    transition:all linear 0.2s;
}
form input[type=submit]:hover,
.signup-result .buttons a:hover {
    background-color:var(--color-red);
}
form .line {
    position:relative;
    float:left;
    width:100%;
    display:flex;
    justify-content:flex-start;
    margin:0px 0px 10px 0px;
}
form .text {
    position:relative;
    float:left;
    width:100%;
}
form .centered {
    position:relative;
    float:left;
    width:100%;
    display:flex;
    justify-content:center;
    margin-top:10px;
}
form .info {
    position:relative;
    float:left;
    width:100%;
}
.line {
    position:relative;
    float:left;
    width:100%;
}
.line.buttons {
    display:block;
}
.line.buttons .button {
    cursor: pointer;
    padding:5px;
    width:calc(100% - 10px);
}
.line.buttons .button .plus {
    color:green;
    font-weight:bold;
}
.line.buttons .button .minus {
    color:var(--color-red);
    font-weight:bold;
}
.line.buttons .button:hover {
    background-color:#e1e1e1;
}
.line.child {
    display:flex;
    justify-content:space-between;
}
.child-name{width:calc(35% - 10px);}
.child-infix{width:calc(15% - 10px);}
.child-surname{width:calc(35% - 10px);}
.child-age{width:calc(15% - 10px);}
.line.address {
    width:75%;
    display:flex;
    justify-content:space-between;
}
.address-street{width:calc(60% - 10px);}
.address-street-number{width:calc(20% - 5px);}
.address-street-suffix{width:calc(20% - 5px);}
.address-zipcode{width:calc(60% - 10px)}
.address-city{width:calc(40% - 0px)}

.anchor {
    position:relative;
    float:left;
    top:-135px;
    left:0px;
}

.signup-result .title {
    font-weight:bold;
}
.signup-result h1 {
    text-align:center;
    margin:100px 0px 100px 0px;
}
.signup-result .buttons {
    position:relative;
    float:left;
    width:100%;
    display:flex;
    justify-content:center;
}

.presents img {
    position:relative;
    float:left;
    max-width:250px;
    width:100%;
    display:block;
}
#topnav .nav .icon {
    display:none;
    font-size:1.4em;
    cursor: pointer;
}
.dock {
    position:fixed;
    top:0px;
    right:-100%;
    width:100%;
    height:100%;
    background-color:var(--color-orange);
    color:white;
    transition:all linear 0.2s;
}
.dock.open {
    right:0%;
}
.dock .layout {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
}
.dock .top {
    position:relative;
    float:left;
    width:100%;
    height:70px;
    display:flex;
    justify-content:flex-end;
    align-items:center;
}
.dock .top .icon {
    font-size:1.4em;
    cursor:pointer;
}
.dock .menu {
    position:absolute;
    top:70px;
    left:0px;
    width:100%;
    height:calc(100% - 70px - 70px);
    overflow-y:auto;
    display:flex;
    flex-flow:row wrap;
    align-items:center;
}
.dock .menu .items {
    position:relative;
    float:left;
    width:100%;
}
.dock .menu .items a {
    position:relative;
    float:left;
    width:100%;
    text-align:center;
    margin:0px 0px 20px 0px;
    color:white;
    text-decoration:none;
    font-weight:bold;
    font-size:1.4em;
}
.dock .menu .items a:hover {
    text-decoration:underline;
}

#vue-app {
    position:relative;
    float:left;
    width:100%;
}

@media(max-width:925px){
    .topnav-ghost {height:70px;}
    #topnav {height:70px;}
    #topnav .nav {justify-content:space-between;}
    #topnav .nav .menu {display:none;}
    #topnav .nav .icon {display:block;}
    #topnav .nav .logo {height:70px;width:auto;}
    #topnav .nav .logo img {
        width:auto;
        height:60px;
        margin:5px 0px;
    }
    .anchor {
        top:-70px;
    }
}
@media(max-width:650px){
    form .line.child input[type=text],
    form .line.child input[type=email],
    form .line.child select {
        margin:0px 0px 10px 0px;
    }
    .line.child{display:block;}
    .child-name{width:100%;}
    .child-infix{width:100%;}
    .child-surname{width:100%;}
    .child-age{width:100%;}
    .line.address {width:100%;}
    form .line.child{margin:0px;};
    
}
@media(max-width:640px){
    .content-blocks .content-block {width:100%;}
    #footer .columns .col {
        position:relative;
        float:left;
        width:100%;
    }
    #footer .columns .col .socials {
        margin-top:20px;
    }
}
@media(max-width:540px){
    .media-item .image {
        width:100%;
    }
    .media-item .text {
        width:100%;
        margin:20px 0px 0px 0px;
    }
}
@media(max-width:400px){
    form .line.address input[type=text],
    form .line.address input[type=email],
    form .line.address select {
        margin:0px 0px 10px 0px;
    }
    .line.address{display:block;}
    .address-street{width:100%;}
    .address-street-number{width:100%;}
    .address-street-suffix{width:100%;}
    .address-zipcode{width:100%;}
    .address-city{width:100%;margin:0px 0px 10px 0px;}
    form .line.address{margin:0px;};
}
@media(max-width:380px){
    .sponsors li {
        width:100%;
    }
}