@font-face {
    font-family: 'EuclidCircularB-Regular-WebS';
    font-style: normal;
    font-weight: 700;
    
    src: url('fonts/EuclidCircularB-Regular-WebS.eot');
    src: url('fonts/EuclidCircularB-Regular-WebS?#iefix') format('embedded-opentype'),
         url('fonts/EuclidCircularB-Regular-WebS.woff2') format('woff2'),
         url('fonts/EuclidCircularB-Regular-WebS.woff') format('woff'),
         url('fonts/EuclidCircularB-Regular-WebS.ttf') format('truetype'),
         url('fonts/EuclidCircularB-Regular-WebS.svg') format('svg'); //funktioniert wohl nicht so....
}

@font-face {
    font-family: 'EuclidCircularB-Medium-WebS';
    font-style: normal;
    font-weight: 500;
    
    src: url('fonts/EuclidCircularB-Medium-WebS.eot');
    src: url('fonts/EuclidCircularB-Medium-WebS?#iefix') format('embedded-opentype'),
         url('fonts/EuclidCircularB-Medium-WebS.woff2') format('woff2'),
         url('fonts/EuclidCircularB-Medium-WebS.woff') format('woff'),
         url('fonts/EuclidCircularB-Medium-WebS.ttf') format('truetype'),
         url('fonts/EuclidCircularB-Medium-WebS.svg') format('svg'); 
}



@font-face {
    font-family: 'EuclidCircularB-Bold-WebS';
    font-style: normal;
    font-weight: bold;
    
    src: url('fonts/EuclidCircularB-Bold-WebS.eot');
    src: url('fonts/EuclidCircularB-Bold-WebS?#iefix') format('embedded-opentype'),
         url('fonts/EuclidCircularB-Bold-WebS.woff2') format('woff2'),
         url('fonts/EuclidCircularB-Bold-WebS.woff') format('woff'),
         url('fonts/EuclidCircularB-Bold-WebS.ttf') format('truetype'),
         url('fonts/EuclidCircularB-Bold-WebS.svg') format('svg');
}





@font-face {
    font-family: 'kg_happy_solidregular';
    src: url('fonts/KGHAPPYSolid-webfont.eot');
    src: url('fonts/KGHAPPYSolid-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/KGHAPPYSolid-webfont.woff2') format('woff2'),
         url('fonts/KGHAPPYSolid-webfont.woff') format('woff'),
         url('fonts/KGHAPPYSolid-webfont.ttf') format('truetype'),
         url('fonts/KGHAPPYSolid-webfont.svg#kg_happy_solidregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.container {
    background: url("../img/musicbox-bg.svg") no-repeat center center fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    min-height: 100vh;
}


.header {
    position: absolute;
    z-index: 10;
}
.header .icon {
    height: 43px;
    width: 100px;
}

.container-left .icon.bird-tv {
    height: 60%;
    width: 60%;
    position: relative;
    top: 50%;
    margin: 0 auto;
    transform: translate(0%, -50%);
}



.container-right {
    min-height: 100vh;
    padding: 25px 50px;
    background-color: #f1f1f1;
    padding-top: 50px;
}

.container-right .wrapper {
    max-width: 520px;
}

label, input, select {
    display:block;
    width: 100%;
}
input {
    border-radius: 2px;
    border: 2px solid #232323;
    height: 44px;
    padding: 0px 16px;

    font-family: EuclidCircularB-Medium-WebS;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: normal;
}

.alert {
    background-color: #f7c809;
}

.google-link{
    display:inline-block;
    
}

.form-group .control-label {
    width: 150px;
    display: inline-block;
    margin-bottom: 32px;
}
.form-group .form-control {
    border: 1px solid black;
}


    

@media all and ( max-width: 900px ) {


    .header {
        right: 0px;

    }

    .container.grid-layout  >.container-left.item.-w1-2 {
            flex: 0 0 0%;
            max-width: 0%;
        }

        .container.grid-layout  >.container-right.item.-w1-2 {
            display: block;
            flex: 0 0 100%;
            max-width: 100%;
        }

}