* {margin: 0 0;} 
    
body, html {height: 100%;} 
    
body {
    background-image: url("https://czechia.com/images/out/hosting-parking/images/pozadi-parking-brno.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #053563;
    font-family: 'Ubuntu', 'Arial', sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #fff;  
 }
    
h1 {font-weight: 500;}    
    
h2 {font-weight: 400;}    

a,
a:link,
a:visited {color: #74D8F7; text-decoration: none;}

a:hover {color: #fff;}
       
#content {min-height:100%;}
     
#header {
    width:94.8%;
    height:auto;
    float: left;
    text-align:left;
    background: rgba(255,255,255,0.1);
    padding: 7px 2.6% 0;
}
    
.logo { display: inline-block; padding-top: 15px;}  

.zoner {margin-right: 20px;}    
    
.flags {
    float: right;
    display: inline-block;
    padding: 15px 10px;    
}
    
.flags img {padding: 0px 8px;}    
    
#main {
    background: rgba(40,97,143,0.6);
    background: -webkit-linear-gradient(rgba(40,97,143,0.6), rgba(40,97,143,0.1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(40,97,143,0.6), rgba(40,97,143,0.1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(40,97,143,0.6), rgba(40,97,143,0.1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(40,97,143,0.6), rgba(40,97,143,0.1)); /* Standard syntax */
    padding-bottom: 30px; 
}     

.text h1 {
    color: white;
    padding: 4% 0 3%;
}    

.text {
    max-width: 1200px;
    margin: 0 auto;
    display: block;
    max-width: 1000px;
    padding: 3% 1% 0 1%;
}
       
#hostings {
    margin: 25px auto 0;
    max-width: 1000px;
    background: rgba(214,231,239,0.2);
    padding: 25px 20px;
    }       


.main-text p {padding-bottom: 12px; }

.main-text {display: inline-block; }

.main-text li {line-height: 150%;}

.main-text.linux strong {color: #edbd18;}
.main-text.windows strong {color: #00adef;}
    
.ilustrations {display: inline-block; float: right; text-align: right; padding: 4% 0 0;}
.ilustrations img {width: 100%; height: auto; max-width: 262px;}


#projects {
    padding: 0.9%;
    margin-left: 0px;
    display: inline-block;
    width: 98%;
}  



.box {
    height: 65px; 
    display: inline-block; 
    text-align:center;
    cursor: pointer;
}    
        
 #contact {
    display: inline-block;
    float: right;
    padding: 1.4% 1%;
    text-align: right;
    width: 100%;
 }   

 .logo {
     width: 100%;
     text-align: center;
 }
       
.contact-box { 
    display: inline-block;
    margin: 0 1%;
}
    
.contact-ico {
    float: left;
    padding-right: 10px;
}

.contact-text {
    float: right;
    text-align: left;
    font-size: 1.1em;
}
    
.contact-text strong {font-weight: 500;}   

.social-icon { display: inline-block;}    

.social-icon img {margin: 0 5px;}    
    
#footer {
    background: rgba(0,0,0, 0.25);
    display: block;
    bottom: 0px;
    width: 100%;  
} 
    

    
@media (max-width: 570px) { 
    
  .flags {width: 100px; padding: 5px 10px;}
    
  /*.logo  {width: 100px; padding-left:3%; margin-top: -7px;}
  .logo .zoner img {width: 70px;}*/
}
 
@media (max-width: 767px) { /*zobrazení pro mobil*/ 
    
    h1 {font-size: 1.8em;}    
    h2 {font-size: 1.5em;} 
    
    #main {padding: 20px 1% 35px; width:98%;}

    #footer { height: 230px; margin-top: -240px; padding: 20px 0;} 
    .wrapper {padding: 0 0 240px 0; display:block;}  
    
    #projects {width: 98%;text-align:center}
    #contact {width:100%;text-align:center; padding: 0 0 20px; font-size: 0.8em;}
    .box {width: 80px; margin: 0 1%;}
    .box img {max-width: 80px;}
    
     .main-text {width: 100%; }
    
    .ilustrations {display: none;}
    
}
    
 @media (min-width: 600px) {
     #footer { height: 155px; margin-top: -170px; padding: 0 0;} 
    
     .wrapper {padding: 0 0 155px 0; display:block;}  
     #contact {width:100%;text-align:center; padding: 20px 0;}
 }   
    
    
@media (min-width: 768px) { /*zobrazení pro tablet*/ 
    
    h1 {font-size: 2.2em;}    
    h2 {font-size: 1.7em;} 

    #main {width: 100%;}
     #footer { height: 155px; margin-top: -165px; } 
    .wrapper {padding: 0 0 165px 0; display:block;}  
    
     #projects {width: 98%;text-align:center}
     #contact {width:100%; text-align:center; }
    .box {margin: 0 2.2%; width:80px;}
    .box img {max-width: 80px;}  
    
     .main-text {width: 68%; }
    
    .ilustrations {width: 30%;}

    
}
@media (min-width: 992px) { /*zobrazení pro malý notebook*/ 
   
    h1 {font-size: 2.5em;}    
    h2 {font-size: 2em;} 
    
    
   
    #footer { height: 175px; margin-top: -185px; } 
    .wrapper {padding: 0 0 185px 0; display:block;}  

    .box {margin: 0 2.7%; width: 100px;}
    .box img {max-width: 100px;} 
    

    .main-text {width: 68%; }
    
    .ilustrations {width: 30%;}
    #contact { width: 40%; text-align: left; }
    .logo { width: 40%; text-align: left; }
    
}

@media (min-width: 1200px) { /*zobrazení pro monitor*/ 
    
    h1 {font-size: 3em;}    
    h2 {font-size: 2.2em;} 
     
}    
    
    
@media (min-width: 1560px) {
    
    #footer {height: 90px; margin-top: -110px; } 
    .wrapper {padding: 0 0 110px 0; }  
    
    #contact {width:33%; }
    .box {margin: 0 2.7%; }
    #projects {width: 98%; text-align: center;}
}