html {
    height:100%;
    background-size: cover;
    background-color:#3D128A;
}
body {
    font: 0.875em/1.5em;
    font-family: var(--current-font), 'Futura Std Book', Calibri;
}

.cb { clear:both; }
.Error {
   width:500px; 
   height:500px; 
   position: fixed; 
   top: 50%; 
   left: 50%; 
   margin-top: -250px;    
   margin-left: -250px; 

}
    .ErrorMain{
        background-color: white;
        background: rgb(255, 255, 255); 
        background: rgba(255, 255, 255, 0.7);
    }
        .ErrorMain .Content{
            padding:40px;
        }
        .ErrorMain .Content h1{
            color: #3D128A;
            font-size: 2em;
            font-family: inherit;
            font-weight: 500;
        }
        .ErrorMain .Content p{
             margin: 9px 0 5px;
        }
        .ErrorMain .Content .ErrorUsername{
            width:95%;
            height:30px;
            border: 1px solid lightgrey;
            background:white; 
            opacity:1; 
            padding:10px;
            color:dimgrey;
            font-size:20px;
            font-family:Calibri;
            font-style:normal;
        }
            .ErrorMain .Content .ErrorPassword {
                width: 95%;
                height: 30px;
                border: 1px solid lightgrey;
                background: white;
                opacity: 1;
                padding: 10px;
                margin-top: 20px;
                color: dimgrey;
                font-size: 20px;
                font-family: var(--current-font), Arial;
                font-style: normal;
            }

    .CookieWarning
    {
        position:fixed;
        background-color:black;
        width:100%;
        left:0;
        bottom:0;
    }
    .CookieWarning p { font-size:14px; color:white; width:95%; left:5%; right:5%; text-align:center; padding:10px; }

    .fields {
            width: 100%;
            height: 52px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            margin-bottom: 10px;
            font-size: 20px;
            font-family: var(--current-font), Calibri;
            font-style: normal;
            color: #5c5c5c;
            padding: 0 20px 0 20px;
            outline: none;
            opacity: 1;
        }

    .fimage {padding: 0 20px 0 50px;}

    .fields:active, .fields:focus {border: 1px solid #865CD1; color:#3D128A;}


     .buttons { }
    .buttonField { width:48%; float:left; overflow:hidden; margin:0; box-sizing: border-box;  }
    .right { margin-right:14px;  }
    .buttonField .btnBlue, .buttonFieldLong .btnBlue {background:#3D128A; width:100%; border:none; color:white; padding:10px; font-size:20px; cursor:pointer; }
        .buttonField .btnBlue:hover, .buttonFieldLong .btnBlue:hover { background: #865CD1; text-decoration: none;}
    .buttonField .btnGrey, .buttonFieldLong .btnGrey {background:#5c5c5c; width:100%; border:none; color:white; padding:10px; font-size:20px; cursor:pointer; }
        .buttonField .btnGrey:hover, .buttonFieldLong .btnGrey:hover  { background: #828282; text-decoration: none;  }

    .buttonFieldLong { width:100%; overflow:hidden; margin:0; box-sizing: border-box;  }


    .LinkField {width:99%; text-align:right; margin-top:-20px;  }
    .LinkField a:link, .LinkField a:visited {color:#3D128A; text-decoration: none;}
    .LinkField a:hover {color:#865CD1; text-decoration: none; cursor:pointer;}


.field-validation-error {
    color: #ff0000;
}

.field-validation-valid {
    display: none;
}

.input-validation-error {
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.input-validation-error:focus {border: 1px solid #865CD1; background-color: #fff;}

.validation-summary-errors {
    font-weight: bold;
    color: #ff0000;
    display:inline-block;
    font-size:12px;
}

.validation-summary-valid {
    display: none;
}


.ErrorErrors { height:10px;   }

.cookiesWarning {
    width: 100%;
    background: #FFF;
    -webkit-box-shadow: 0 0 10px 0 #5c5c5c;
    box-shadow: 0 0 10px 0 #5c5c5c;
}
.cookiesWarning .cookie-content {
    padding:15px;
}
    .cookiesWarning h3 {
        font-size: 1.6em;
        line-height: 1.4em;
        font-family: var(--current-font), 'Futura Std Medium' !important;
        color: #3D128A;
    }
.cookiesWarning p {
    font-size: 18px;
    font-family: var(--current-font), Calibri;
    font-style: normal;
    color: #5c5c5c;
}

@media screen and (max-width: 500px) {

    .buttonField {width:100%; margin-bottom:10px;}

    .ErrorFooter ul { padding-left:10px; padding-top:18px; }
     .ErrorFooter ul li { font-size:12px; }

    .Error {
       width:100%; 
       height:100%;
       position: absolute;
       top: 0; 
       left: 0; 
       margin-top: 0px; 
       margin-left: 0; 
    }
        .ErrorMain{
            background-color: white;
            background: rgb(255, 255, 255); 
            background: rgba(255, 255, 255, 0.7);
            height:auto;
            min-height:300px;
        }

    ._404 {
        font-size: 7.5em !important;
        height: 160px !important;
    }
    .cloud {
        display: none;
    }
}

@media screen and (max-height: 500px) and (min-width:500px) {
    html{ background-size: auto;}
    .Error {
       width:500px; 
       height:500px; 
       position: absolute; 
       top: 0%; 
       left: 50%; 
       margin-top: 0px; 
       margin-left: -250px; 
    }
        
        .ErrorMain{
            background-color: white;
            background: rgb(255, 255, 255); 
            background: rgba(255, 255, 255, 0.7);
            height:auto;
            min-height:300px;
        }
    ._404 {
        font-size: 7.5em !important;
        height: 160px !important;
    }
    .cloud {
        display: none;
    }
}

.btn-circle {
    display: inline-block;
    width: 156px;
    height: 156px;
    vertical-align: middle;
    text-align: center;
    background: #3D128A;
    background: rgba(12,65,106,.9);
    color: #fff;
    font-size: 28px !important;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    -webkit-border-radius: 78px;
    -moz-border-radius: 78px;
    border-radius: 78px;
    line-height: 156px;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    transition: all .2s linear;
    margin-top:10px;
}

    .btn-circle span {
        vertical-align: middle;
        display: inline-block;
        line-height: 1.2;
        text-align: center;
        width: 100%;
        color: #fff;
    }

    .btn-circle hr {
        width: 32px;
        margin: 15px auto 0 auto;
    }

    .btn-circle:active, .btn-circle:focus, .btn-circle:hover {
        color: #fff;
        background: #3D128A;
        -webkit-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -o-transition: all .2s linear;
        transition: all .2s linear;
        -webkit-transform: scale(1.05);
        -moz-transform: scale(1.05);
        -o-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);
    }
            .c{
                text-align: center;
                width:92%;
                margin:20px;
            }
            ._404{
                font-size: 170px;
                position: relative;
                display: inline-block;
                z-index: 2;
                height: 230px;
                letter-spacing: 8px;
                color:#3D128A;
            }
            ._1{
                text-align:center;
                display:block;
                position:relative;
                font-size: 4em;
                line-height: 80%;
                color:#3D128A;
            }
            ._2{
                text-align:center;
                display:block;
                position: relative;
                font-size: 20px;
                color:#3D128A;
            }
            .text{
                font-size: 70px;
                text-align: center;
                position: relative;
                display: inline-block;
                margin: 19px 0px 0px 0px;
                z-index: 3;
                width: 100%;
                line-height: 1.2em;
                display: inline-block;
            }
           

            .btn{
                background-color: rgb( 255, 255, 255 );
                position: relative;
                display: inline-block;
                width: 358px;
                padding: 5px;
                z-index: 5;
                font-size: 25px;
                margin:0 auto;
                color:#3D128A;
                text-decoration: none;
                margin-right: 10px
            }
            .right{
                float:right;
                width:60%;
            }
            
            hr{
                padding: 0;
                border: none;
                border-top: 5px solid #3D128A;
                color: #3D128A;
                text-align: center;
                margin: 0px auto;
                width: 100%;
                height:10px;
                z-index: -10;
            }
            
            .cloud {
                width: 350px; height: 120px;

                background: #FFF;
                background: linear-gradient(top, #FFF 100%);
                background: -webkit-linear-gradient(top, #FFF 100%);
                background: -moz-linear-gradient(top, #FFF 100%);
                background: -ms-linear-gradient(top, #FFF 100%);
                background: -o-linear-gradient(top, #FFF 100%);

                border-radius: 100px;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;

                position: absolute;
                margin: 120px auto 20px;
                z-index:-1;
                transition: ease 1s;
            }

            .cloud:after, .cloud:before {
                content: '';
                position: absolute;
                background: #FFF;
                z-index: -1
            }

            .cloud:after {
                width: 100px; height: 100px;
                top: -50px; left: 50px;

                border-radius: 100px;
                -webkit-border-radius: 100px;
                -moz-border-radius: 100px;
            }

            .cloud:before {
                width: 180px; height: 180px;
                top: -90px; right: 50px;

                border-radius: 200px;
                -webkit-border-radius: 200px;
                -moz-border-radius: 200px;
            }
            
            .x1 {
                top:-50px;
                left:100px;
                -webkit-transform: scale(0.3);
                -moz-transform: scale(0.3);
                transform: scale(0.3);
                opacity: 0.9;
                -webkit-animation: moveclouds 15s linear infinite;
                -moz-animation: moveclouds 15s linear infinite;
                -o-animation: moveclouds 15s linear infinite;
            }
            
            .x1_5{
                top:-80px;
                left:250px;
                -webkit-transform: scale(0.3);
                -moz-transform: scale(0.3);
                transform: scale(0.3);
                -webkit-animation: moveclouds 17s linear infinite;
                -moz-animation: moveclouds 17s linear infinite;
                -o-animation: moveclouds 17s linear infinite; 
            }

            .x2 {
                left: 250px;
                top:30px;
                -webkit-transform: scale(0.6);
                -moz-transform: scale(0.6);
                transform: scale(0.6);
                opacity: 0.6; 
                -webkit-animation: moveclouds 25s linear infinite;
                -moz-animation: moveclouds 25s linear infinite;
                -o-animation: moveclouds 25s linear infinite;
            }

            .x3 {
                left: 250px; bottom: -70px;

                -webkit-transform: scale(0.6);
                -moz-transform: scale(0.6);
                transform: scale(0.6);
                opacity: 0.8; 

                -webkit-animation: moveclouds 25s linear infinite;
                -moz-animation: moveclouds 25s linear infinite;
                -o-animation: moveclouds 25s linear infinite;
            }

            .x4 {
                left: 470px; botttom: 20px;

                -webkit-transform: scale(0.75);
                -moz-transform: scale(0.75);
                transform: scale(0.75);
                opacity: 0.75;

                -webkit-animation: moveclouds 18s linear infinite;
                -moz-animation: moveclouds 18s linear infinite;
                -o-animation: moveclouds 18s linear infinite;
            }

            .x5 {
                left: 200px; top: 300px;

                -webkit-transform: scale(0.5);
                -moz-transform: scale(0.5);
                transform: scale(0.5);
                opacity: 0.8; 

                -webkit-animation: moveclouds 20s linear infinite;
                -moz-animation: moveclouds 20s linear infinite;
                -o-animation: moveclouds 20s linear infinite;
            }

            @-webkit-keyframes moveclouds {
                0% {margin-left: 1000px;}
                100% {margin-left: -1000px;}
            }
            @-moz-keyframes moveclouds {
                0% {margin-left: 1000px;}
                100% {margin-left: -1000px;}
            }
            @-o-keyframes moveclouds {
                0% {margin-left: 1000px;}
                100% {margin-left: -1000px;}
            }