/**
*				RHS-IT Service STAR-Host
*				CSS Datei
*				----------------------------
* 				@version   1.0 vom 26.10.2016
* 				@author    Reiner Hobbold
* 				@copyright Copyright (C) 2014 RHS-IT Internet Solutions GmbH
* 				@mail      info@rhs-it.de
* 				@www       http://fair4Host.de
*
*/ 

@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:300');


img {
        max-width: 100%;
        height: auto;
} 

html {
        position: relative;
        min-height: 100%;
}


body {
        /*
        background-color: #eeeeee;
        background-color: #ddd;
        background-image: linear-gradient(to bottom, rgba(250, 126, 0, 0.1), rgba(250, 126, 0, 1));
        */
        /*background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)); */
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.55));
        /*
        background-image: url(../img/server.jpg);
        background-repeat: no-repeat;
        background-position: right 20px bottom 40px;
        background-position: right 0.5rem center;
        */
        font-family: Verdana, 'Merriweather Sans', corbel, Verdana, Arial, sans-serif; 
        min-height: 100%;
        height: auto;
}

a:hover, .footertxt > a:hover { 
        text-decoration: none;
        font-weight: bold;
        color: rgba(255, 136, 0, 1);         
}

.footertxt > a {
        text-decoration: none;
        color: rgba(255, 255, 255, 1);
}



.container {
        width: auto;
        /* padding: 5% 5%; */
}

.boxen {
        width: auto;
        padding: 1.5rem 7%;   
}

.wichtig {
        font-weight: bold;
        color: rgba(0, 0, 0, 0.8);
        color: #f80;
        text-shadow: 1px 2px 3px #333; 
        text-align: center;
}



.card {
    background-color: #efefef;
    margin: 5% 5%;
    padding: 1.5rem;
    box-shadow: 4px 4px 8px 4px rgba(0,0,0,0.18);
    border-radius: 4px;
    border: 1px solid #dddddd;
}

.card-title {    
    font-weight: bold;
    color: rgba(0, 0, 0, 0.63);    
}

.card-block {    
    border-radius: 0.6rem;
}



.colhead > a:hover, .colhead > a:visited, .colhead > a:active, .colhead > a:focus {
     color: white;
     text-decoration: none;
}

.colhead > a {
     color: white;
}

.colhead {
        background-color: rgba(2, 117, 216, 1);
        border: 1px dotted #00f;
        border-radius: 0.2rem;
        padding: 0.45rem 1rem;
        color: white;
        margin-bottom: -0.2rem;
}


.coltxt {    
        background-color: rgba(2, 117, 216, 0.05);
        padding: 1.1rem;
        border: 1px dotted rgba(2, 117, 216, 1);
        border-radius: 0.25rem;
        margin-bottom: 1rem;
}



.footertxt {
        text-align: center;
        font-weight: normal;
        font-size: 0.625rem;
        color: #fff; 
}


.footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        /* Set the fixed height of the footer here */
        height: 2.5rem;
        line-height: 2.5rem;
        background-color: #555;
        background-color: #333;        
}


/* wenn größer als 80 rem = 1280 px 

@media only all and (min-width: 80rem) { 

            .boxen {
              padding: 0rem 7rem;
            }


            .box-links {
              padding-left: 3rem;    
              padding-right: 3rem;
            }

            .box-rechts {
              padding-left: 3rem;    
              padding-right: 3rem;
            }
            
            .groesse {
             font-size: 4rem;   
            }
}

*/

                    /* wenn größer als 40 rem = 640 px */
@media (min-width: 40rem) {
            
            .groesse {
             font-size: 1.5rem;   
            }
}

@media (min-width: 62rem) {
            
            .groesse {
             font-size: 2rem;   
            }
}

@media (min-width: 90rem) {
            
            .groesse {
             font-size: 3rem;   
            }
}