/* roboto-100 - latin */
@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Prompt:wght@100&display=swap');

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: url('./fonts/roboto-v30-latin-100.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('./fonts/roboto-v30-latin-100.eot?#iefix') format('embedded-opentype'),
        /* Safari, Android, iOS */
        url('./fonts/roboto-v30-latin-100.svg#Roboto') format('svg');
    /* Legacy iOS */
}

/* roboto-300 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url('./fonts/roboto-v30-latin-300.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('./fonts/roboto-v30-latin-300.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('./fonts/roboto-v30-latin-300.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('./fonts/roboto-v30-latin-300.woff') format('woff'),
        /* Modern Browsers */
        url('./fonts/roboto-v30-latin-300.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('./fonts/roboto-v30-latin-300.svg#Roboto') format('svg');
    /* Legacy iOS */
}

/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('./fonts/roboto-v30-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('./fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('./fonts/roboto-v30-latin-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('./fonts/roboto-v30-latin-regular.woff') format('woff'),
        /* Modern Browsers */
        url('./fonts/roboto-v30-latin-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('./fonts/roboto-v30-latin-regular.svg#Roboto') format('svg');
    /* Legacy iOS */
}

/* roboto-500 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url('./fonts/roboto-v30-latin-500.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('./fonts/roboto-v30-latin-500.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('./fonts/roboto-v30-latin-500.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('./fonts/roboto-v30-latin-500.woff') format('woff'),
        /* Modern Browsers */
        url('./fonts/roboto-v30-latin-500.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('./fonts/roboto-v30-latin-500.svg#Roboto') format('svg');
    /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url('./fonts/roboto-v30-latin-700.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('./fonts/roboto-v30-latin-700.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('./fonts/roboto-v30-latin-700.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('./fonts/roboto-v30-latin-700.woff') format('woff'),
        /* Modern Browsers */
        url('./fonts/roboto-v30-latin-700.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('./fonts/roboto-v30-latin-700.svg#Roboto') format('svg');
    /* Legacy iOS */
}

/* roboto-900 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: url('./fonts/roboto-v30-latin-900.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('./fonts/roboto-v30-latin-900.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('./fonts/roboto-v30-latin-900.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('./fonts/roboto-v30-latin-900.woff') format('woff'),
        /* Modern Browsers */
        url('./fonts/roboto-v30-latin-900.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('./fonts/roboto-v30-latin-900.svg#Roboto') format('svg');
    /* Legacy iOS */
}

/* roboto-900italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 900;
    src: url('./fonts/roboto-v30-latin-900italic.eot');
    /* IE9 Compat Modes */
    src: local(''),
        url('./fonts/roboto-v30-latin-900italic.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('./fonts/roboto-v30-latin-900italic.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('./fonts/roboto-v30-latin-900italic.woff') format('woff'),
        /* Modern Browsers */
        url('./fonts/roboto-v30-latin-900italic.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('./fonts/roboto-v30-latin-900italic.svg#Roboto') format('svg');
    /* Legacy iOS */
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body,
html {
    font-family: Verdana, 'Lucida Sans Unicode', sans-serif;
    font-family: 'Roboto', sans-serif;
    background-color: #2a3a49;
    width: 100% !important;
    overflow: auto!important;
}

body {
    padding: 0px;
    margin: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-image: url("./img/bg-oh.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top left;
    background-color: #455f77;
    
}


.top {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 10em;
    ;
}

.ls {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.rs {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}


.wrapper {
    font-family: 'Roboto', sans-serif;
    color: white;
}

ul {
    font-weight: 200;
    font-size: 1.2em;
    text-decoration: none;
    list-style: none;
    padding-left: 0px;
}

li {
    display: flex;
    align-items: center;
    padding: 10px 0px;
    letter-spacing: 0.5px;
}

.feature-list i {
    font-size: 1.5em;
    color: #CCCCCC;
    padding-right: 10px;
}

/* Formular */
form {
    background-color: white;
}

.text {
    color: #495057;
    text-align: center;
    font-size: 1.3em;
    font-weight: 200;
    margin-bottom: 50px;
}

.mb-4 {
    margin-bottom: 1.5rem !important
}

.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
}

.text-left {
    text-align: left !important;
    color: #495057;
}

.text-left a {
    text-align: left !important;
    color: #445F77;
    text-decoration: none;
    ;
}
.form-check-input[type=checkbox]:checked {
    background-image: none;
    background-color: #CCCCCC !important;
    border-color: #CCCCCC !important;
}

.form-outline .form-control:focus~.form-label {
    border-color: #CCCCCC !important;
    color: #CCCCCC !important;
}	

select:focus {
    border: .125rem solid #CCCCCC !important;
    border-color: #CCCCCC !important;
    box-shadow: none !important;
}		

.form-check-input:checked:focus:before {
    box-shadow: 0 0 0 13px #CCCCCC !important;
}

.form-outline .form-control:focus~.form-notch .form-notch-leading {
    border-top: .125rem solid #CCCCCC !important;
    border-bottom: .125rem solid #CCCCCC !important;
    border-left: .125rem solid #CCCCCC !important;
    border-color: #CCCCCC !important;
    box-shadow: none !important;
} 

.form-outline .form-control:focus~.form-notch .form-notch-trailing {
    border-top: .125rem solid #CCCCCC !important;
    border-right: .125rem solid #CCCCCC !important;
    border-bottom: .125rem solid #CCCCCC !important;
    box-shadow: none !important;
} 
 .form-outline .form-control:focus~.form-notch .form-notch-middle {
    border-top: 0;
    border-bottom: .125rem solid #CCCCCC !important;
    box-shadow: none !important;
} 

.btn {
    background-color: #445F77 !important;
}

.btn:hover {
    background-color: #CCCCCC !important;
}

a {
    color: #CCCCCC !important;
}

.item-center {
    display: flex;
    justify-content: center;
}

option {
    color: #495057;
}

.text-center {
    text-align: center;
    color: #495057;

}

footer{
    display:flex;
    flex-direction: column;
    justify-content: center;
    background-color: #2a3a49;
    padding: 30px 0px;
}

footer p, a{
    text-align: center;
    color:#ced4da;
    text-decoration: none;
}


@media only screen and (max-width: 1100px) {
    .tablet-none{
        display: none;
    }
}

@media only screen and (min-width: 1101px) {
    .desktop-none{
        display: none;
    }
}

.p-new{
    padding:5% 0px!important
}