/*
orange:
175%: 3d2400
150%: 794700
100%: f28e00
50%:  f8c67f
25%:  fbe2bf
12%:  fdf0df

   blue:
175%: 000d19
150%: 001a32
100%: 003463
50%:  7f99b1
25%:  bfccd8
12%:  dfe5eb

   font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif;

*/

@font-face {
    font-family: 'Futura';
    src: url('font/abe8114d-4067-40b5-85f5-1adbaf29a34a.eot'); /* IE9 Compat Modes */
    src: url('font/abe8114d-4067-40b5-85f5-1adbaf29a34a.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('font/801cc5a6-eaad-4fd1-84a7-7c3078365794.woff2') format('woff2'), /* Super Modern Browsers */
    url('font/1784423e-f874-498e-898c-ed3fc1d04612.woff') format('woff'), /* Pretty Modern Browsers */
    url('font/a4081154-e62d-468c-8618-6a9814d2275a.ttf')  format('truetype') /* Safari, Android, iOS */
}

html, body { margin:0; padding:0; height: 100%; width:100vw; font-family: 'Open Sans', sans-serif; font-weight: 400; background-color:white; text-align:left;}

.maxwidthblock { width:100%; max-width:1024px; margin-left:auto; margin-right:auto; }
.flex { flex-flow: row wrap; align-items: stretch; justify-content:center; display:flex}
.blockflexfull { flex:1 100%; position:relative; }
.blockflex { flex:1; position:relative; }
form .maxwidthblock { max-width:720px; padding: 5px 0; }
.cell { display:inline-block; min-width:50px; }

.headerbar { position:relative; padding:20px 0; background-color:white; color:black; text-align:center; }
.headerblock { position:relative; vertical-align:middle; width:100%; max-width:1024px; margin-left:auto; margin-right:auto; height:auto; align-items: flex-start; }
.headerimg { display:inline-block; width:50%; max-height:50%; height:auto; padding:0; margin:0; min-height: 0; }
.headerimgbar { padding:0; border:none; background-image:url('header/header_back.jpg'); background-size: cover; background-position: center; }
.headertext { display:inline-block; box-sizing:border-box; padding:20px; background-color:#1d5d96; color:#fff; font-size:24px; width:40%; margin:auto;  }
.footerbar {  text-align:center; padding:20px 0; min-height:200px;
    /* position:relative; */
    position:absolute;
    width:100%;
    bottom:0;
}
#footerspacer {
    padding:0; margin:0;
    padding-bottom:240px; /* footer height + footer padding */
}
#page {
    min-height:100%;
    position:relative;
}
.titlebar { font-family: 'Open Sans', sans-serif; color:black; text-align:center; padding:50px 0; border:none; box-sizing:border-box; }
.trybar { text-align:center; padding:50px; margin:0; }
.title, .title_small, h1, h2 { font-family: 'Futura', sans-serif; font-weight: 400; font-size:38px; display:block; padding:20px; }
.producttitle { font-size: 48px; }
.subtitle, .subtitle_small, h3, h4 { font-size:18px; display:block; padding:10px 20px;}
.title_small, h2 { font-size:24px; line-height:32px;}
.subtitle_small, h4 { font-size:16px; line-height:24px; }
.center { text-align:center; }
p, ul { display:block; padding: 5px 20px; }
ul { list-style: disc outside; padding: 5px 50px;}
h1, h2 { padding: 10px 20px;  }
.logo { height:64px; width:auto; max-width:50%; }
.headerbar .logo { padding-right:100px; }
.texticon { height:18px; width: auto; }
.select { font-family: 'Open Sans', sans-serif; border: 2px solid #003463; font-size:18px; background-color:#dfe5eb; color:#003463; display:inline-block; padding:20px; border-radius:20px; font-weight: 400;}
.input input { font-family: 'Open Sans', sans-serif; border: 2px solid #003463; font-size:18px; background-color:#dfe5eb; color:#003463; display:inline-block; padding:20px; border-radius:20px; font-weight: 400;}
.formtext { font-size:14px; display:inline-block; padding:10px;}
.select, .input input, button, textarea {
    box-sizing:border-box;
    font-family: 'Roboto', sans-serif; border: none;
    background-color:#dfe5eb; color:black;
    display:inline-block; margin:5px;
    padding:10px; border-radius:10px;
    font-weight: 400;
    font-size:16px;
    width:100%;
    max-width:300px;
}
textarea { min-height: 150px; }
input.checkbox{ width:auto; }
input.radio{ width:auto; }
div.input { text-align:left; }
label { max-width:250px; text-align:left; }
.label { text-align:left; }
.sublabel { display:block; font-size: 14px; font-style:italic; margin-bottom:10px; margin-left:40px;}
.button { border: 2px solid white; margin:3px; background-color:#f28e00; color:white;}
.button:hover { border: 2px solid #f8c67f; }

.theinput { font-family: 'Open Sans', sans-serif; border:none; background-color:#f0f0f0; color:#003463; display:inline-block; padding:22px; border-radius:20px;  font-weight: 400; font-size:24px;}
.thebutton { font-family: 'Open Sans', sans-serif; border:none; color:white; display:inline-block; padding:22px; border-radius:20px; font-weight: 400; font-size:24px; }
.thebutton:hover { border: 2px solid white;  padding:20px;}

.login {
    background-color:#1d5d96; color:white; text-align:center;
    position:absolute;
    right:50px; top:0; padding:20px 40px; font-size: 24px; font-family: 'Futura', sans-serif;
    display:block;
    text-decoration:none;
}

div .package { position:relative; padding:10px 10px; margin:0 25px; border: 2px solid #e0e0e0; }
.package table { text-align: left; border:none; border-top: 1px solid #e0e0e0; border-collapse:collapse; }
.package td { border-bottom: 1px solid #e0e0e0; padding: 5px 5px 5px 0; min-height:55px;font-size:14px; }
.package .title_small { height:32px; }
.package .subtitle_small { height:72px;}

.package_list { text-align: left; border:none; }
.package_list div { border-top: 1px solid #e0e0e0; padding: 5px 5px 5px 0; min-height:55px;font-size:14px; line-height:55px; }
.package_list div span:first-child { display:inline-block; width:50%; text-align:left; vertical-align:middle; line-height:20px; }
.package_list div span:last-child { display:inline-block; width:50%; text-align:center; vertical-align:middle; line-height:20px; }

.blue { color: #1d5d96;}
.back_blue, .back_blue a  { background-color: #1d5d96; color:white; }
.back_darkblue, .back_darkblue a { background-color: #003463; color:white; }
.back_orange, .back_orange a  { background-color: #f08e07; color:white; }
.back_green { background-color: #ccffcc; }
.back_white { background-color: white; }
.back_grey { background-color: #f0f0f0; }
.icon { width: auto; height:92px; padding:0; margin:5px; }
.qr_icon { width: auto; height:150px; padding:0; margin:5px; }
.social { width: auto; height:32px;}
.floating { z-index: 1000; position:absolute; right:-50px; top:129px; /* 32 + 72 + (10 + 2x20 + 2x10) - 45 */ font-size:16px; font-weight: bold; padding:15px; width:60px; height:60px; border-radius:45px; line-height:19px; text-align:center}
a.button { font-family: 'Open Sans', sans-serif; border:none; color:white; display:inline-block;  padding:10px; margin:5px; border-radius:5px; font-weight: 400; text-decoration:none; }
a.button:hover { border:2px solid white; color:white; padding:8px; }
.bottom { position:absolute; bottom:0; width:100%; box-sizing:border-box; }
.bottom_padding { padding-bottom: 240px; }
.error_message { color:darkred; background-color: #FFD0D0; border:1px solid darkred; padding:5px;  margin:5px 0; }

.slide img {
    height: 150px;
    width: auto;
    max-width: 200px;
    max-height: 200px;
}

.slide {
    background: #fff;
/*    border: 10px solid #eee; */
    color: #000;
    font-size: 20px;
    height: 240px;
    line-height: 11;
    text-align: center;
    width: 240px;
    float:left;
}

.purejscarousel-dot, .purejscarousel-btn {
    display: none;
/*
    box-sizing:content-box;
    background-color: #ccc; color: #000000;
    border: 1px solid #555;
    display:inline-block;
    margin:10px;
    padding:10px;
    border-radius:10px;
    width:auto;
    height:auto;
    max-width:none;
 */
}

.carousel {
    background-color: #ffffff;
}



@media (min-width:830px) and (max-width:1200px) {
    .trybar { padding:40px; }
    .titlebar { padding: 40px 0; }
    .title, h1 { font-size:32px; }
    .title_small, h2 { font-size:22px; line-height:22px;}
    .producttitle { font-size: 42px; }
    .subtitle, .subtitle_small, h3, h4 { font-size:18px; }

    .subtitle_small, h4 { font-size:16px; line-height:18px; }
    .headertext { font-size: 22px; }
    .theinput, .thebutton { padding:18px; font-size:24px;  }
}

@media (max-width:830px) {
    .maxwidthblock {
        display:block;
    }
    .blockflex {
        display: block;
        margin-bottom: 5px;
        margin-left:auto;
        margin-right:auto;
    }
    form .blockflex {
        margin-left: auto;
        margin-right: auto;
        max-width: 300px;
    }
    div.package {
        margin:20px 60px;
    }

    .back_grey {
        background-color:inherit;
    }
    .back_grey .blockflex {
        background-color:#f0f0f0;
        margin-bottom: 15px;
        padding-top:20px;
    }

    .trybar { padding:25px; }
    .titlebar { padding: 25px 0; }
    .title { font-size:26px; }
    h1 { font-size:26px; }
    .title_small, h2 { font-size:22px; line-height:22px;}
    .producttitle { font-size: 36px; }
    .subtitle, .subtitle_small, h3, h4 { font-size:14px; }
    .sublabel { font-size: 14px; }
    .headerbar { padding: 0; }
    .headertext { font-size: 16px; width:50%; }
    .theinput, .thebutton { padding:16px; font-size:18px; width: 100%; max-width:300px; box-sizing: border-box; }
}

@media (max-width:640px) {
    .headerbar .logo { max-width:80%; padding:20px 0; }
    .login {
        position:relative;
        right:0;
        top:0;
        left:0;
    }
}