html, body {
        height: 100%;
    }
    
    body {
        background:#000;
        margin:0;
        padding:0;
        font-family: 'Ubuntu', Arial, sans-serif;
        font-size:16px;
        color:#000;
    }
    
    * {
        -moz-box-sizing: border-box; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box;
    }
    
    #page {
        width:100%;
        max-width:1180px;
        height:100%;
        display:table;
        margin:0 auto;
    }
    
    #header {
        width:100%;
        max-width:1180px;
        display:table;
        padding:25px 0 19px 4.2%;
        position:fixed;
        z-index:999;
        background:#333;
    }
    
    #main {
        width:100%;
        max-width:1180px;
        margin-top:72px;
        display:table;
        position:relative;
    }

    #bg {
        background:#fff;
        display:table;
        width:100%;
    }
    
    #footer {
        width:100%;
        max-width:1180px;
        background:#333;
        padding:15px 4.2%;
        display:table;
    }
    
    #col-left {
        float:left;
        width:38.2%;
        z-index:1;
        margin-top:-17%;
        margin-left:4.2%;
        position:relative;
    }
    
    #col-right {
        float:left;
        width:49.2%;
        margin-left:4.2%;
        padding:50px 0 30px;
    }
    
    .bg-grey {
        background-color: rgba(102, 102, 102, 0.9);
        border-radius: 20px;
        padding:25px 2%;
        margin-bottom:35px;
    }
    
    #col-left img {
        width:100%;
        max-width:418px;
    }
    
    .col-left-inner {
        margin-left:5%;
        line-height:1.4em;
    }
    
    .col-right-inner {
        display:none;
    }
    
    #info {
        background:url('../images/img-kreditkarten.png') no-repeat 0 0;
        font-size:21px;
        position:absolute;
        top:30px;
        right:0;
        width:374px;
        height:108px;
        padding:10px 0 0 32px;
        z-index:4;
    }
    
    #info span {
        font-size:14px;
        display:block;
        margin-top:13px;
    }
    
    #time {
        width:100%;
        max-width:490px;
        height:auto;
    }

    #logo {
        float:left;
        margin-right:40px;
    }
    
    #logo img {
        width:433px;
    }
    

    
    /* *****    ALLGEMEINE STYLES     *********/
    
    img {
        border:none;
        display:table;
    }
    
    ul, li {
        margin:0;
        padding:0;
    }
    
    ul.dots {
        margin-bottom:25px;
    }
    
    #col-left ul.dots {
        margin-left:5%;
    }
    
    #col-left ul.dots li {
        background:url("../images/bullet.png") no-repeat 0 15px;
        list-style-type:none;
        padding:5px 0 5px 25px;
        font-size:26px;
    }
    
    #col-right ul.dots li {
        background:url("../images/bullet.png") no-repeat 0 7px;
        list-style-type:none;
        padding:5px 0 5px 25px;
    }
   
    p {
        margin:0 0 20px 0;
        line-height:1.4em;
    }

    h1 {
        font-size:24px;
        font-weight:400;
        margin-bottom:20px;
        line-height:1.3em;
    }
    
    h2 {
        font-size:21px;
        font-weight:400;
        color:#fff;
        width:100%;
        text-align:center;
        border-bottom:1px solid #fff;
        padding-bottom:8px;
    }

    a:focus {
        outline:none;
    }
    
    a, a:visited {
        color:#000;
        text-decoration:underline;
    }
    
    #info a,
    #info a:visited,
    .col-left-inner a,
    .col-left-inner a:visited,
    .col-right-inner a,
    .col-right-inner a:visited{
        text-decoration:none;
    }
    
    a:hover, a:active {
        text-decoration:none;
        color:#000;
    }
    
    #footer a,
    #footer a:visited {
        float:right;
        color:#fff;
        text-transform:uppercase;
        text-decoration:none;
    }
    
    #footer a:hover,
    #footer a:active {
        color:#ffcc33;
    }
    
    #footer a:first-of-type {
        padding:7px 0;
        float:left;
    }
  
    
     /* ****************** MEDIA QUERIES *************************/
     
     @media screen and (max-width: 1080px) {
        
        #logo {
            float:none;
            margin-right:0;
        }
        
        #main {
            margin-top:106px;
        }
    
    }
    
    
    @media screen and (max-width: 799px) {
        
        #col-left {
            width:91.6%;
            max-width:450px;
            border-radius: 15px;
            margin:-10% 4.2% 0;
        }
    
        #col-right {
            width:91.6%;
            margin:0 4.2%;
            padding-top:0;
        }
        
        .col-left-inner {
            display:none;
        }
        
        .col-right-inner {
            display:inherit;
            padding-bottom:35px;
        }
    
    }
    
    
    @media screen and (max-width: 599px) {
        
        #logo img {
            width:380px;
        }
        
        #col-left {
            padding:15px 2%;
        }
        
        #time {
            font-size:21px;
        }
    
    }
    
    @media screen and (max-width: 450px) {
        
        #logo img {
            width:280px;
        }
        
        #time {
            font-size:16px;
        }
        
        #col-left ul.dots li {
            background:url("../images/bullet.png") no-repeat 0 8px;
            font-size:18px;
        }
        
        h1 {
            font-size:21px;
            line-height:1.2em;
        }
        
        #info {
            background:url('../images/img-kreditkarten.png') no-repeat 40px -17px;
            font-size:15px;
            position:absolute;
            top:0;
            right:0;
            width:374px;
            height:103px;
            padding:7px 0 0 67px;
        }

    }