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

a,
a:link,
a:visited {color: #74D8F7;}

a:hover {color: #fff;}
       
#content {min-height:100%;}
     
#header {
    width:94%;
    height:140px;
    text-align:center;
    padding: 20px 2.6%;
}
    
.logo { display: inline-block;}  

.zoner {margin-right: 20px;}    
    
.flags {
    float: none;
    display: inline-block;
    padding: 5px 10px 15px;    
}
    
.flags img {padding: 0px 8px;}    
    
#main {
    background: rgba(40,97,143,0.6);
    padding-bottom: 50px; 
}     
    
.registration h1 {
    color: white;
    padding: 5% 0 4%;
}    
    
.registration h2 {
    color: #FFCC35;
    padding: 2% 0;
}  

.registration {
    margin: 0 auto;
    display: block;
    max-width: 1000px;
}
    
.registration .button {
    background: #FFCC35;
    border: none;
    border-bottom: 3px solid #dd7801;
    color: #000;
    font-weight: 500;
    padding: 9px 15px 8px;
    border-radius: 5px;
    font-size: 1.5em;
    font-family: 'Ubuntu', sans-serif;
    margin: 10px 0 0 0; 
    cursor: pointer;
}    
    
.registration .search-domain {
    border: 2px solid #dd7801;
    border-radius: 5px;
    height: 41px;
    padding: 3px 20px;
    font-size: 1.5em;
    font-family: 'Ubuntu', sans-serif;
    color: #505050;
    margin: 0 15px 0 0; 
}    
    
#action {
    min-height:46px;  
    background: rgba(249, 247, 235, 0.5);
    color: #fff;
}  

.action-h2 {display: inline-block;}
    
.action-domain  {
    display: inline-block;
    margin:0 1%;   
}
    
.domain-name {
    color: black;
    font-weight: 600;
    text-transform: uppercase; 
}
    
.price { 
    color: #ae1d00;
    font-weight: 600;
}
    
.break {
    color: #fff;
    padding: 0 1%;
}
    
.info {
    font-size: 0.45em;
    display:inline-block;
}    
    
#slider {
    min-height: 180px;
    display:block;
    margin: 50px auto;
    background: rgba(132,183,201,0.35);
}  

#slider a,
#slider a:link,
#slider a:visited {color: #fff; text-decoration: none;}
    
.slider-image img { 
    max-width: 230px;
    height: auto;
    margin: 0 auto;
}    
       
.slider-text h2 {padding: 5px 0;}
    
.slider-text p {padding:10px 0;}    
    
#projects {
    padding: 0.9%;
    margin-left: 0px;
    display: inline-block;
    width: 100%;
}  
    
.box {
    height: 65px; 
    display: inline-block; 
    text-align:center;
    cursor: pointer;
}    
    
/*skryva obsah*/  
.hide {display: none}
 
#close {
    width:50px; 
    height: 42px;
    position: fixed;
    background-image: url("/images/cross-icon.png");
    background-position: center 5px;
    background-repeat: no-repeat;
    background-color: rgba(0,0,0,0.5);
    right: 0;
    bottom: 8%;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    border-bottom: 5px solid #000;
} 
        
 #contact {
    display: inline-block;
    float: right;
    padding: 1.4% 1%;
    text-align: right;
 }   
       
.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 {inline-block;}    

.social-icon img {margin: 0 5px;}    
    
#footer {
    background: rgba(0,0,0, 0.25);
    display: block;
    bottom: 0px;
    width: 100%;  
} 
    
#about-product {background-image: url("/images/background-products.jpg");}    
    
#czechia,
#inpage,
#sslmarket,
#inshop,
#zonercloud,
#regzone {
    margin: 20px 0;
    background: rgba(40,97,143,0.3);
}
        
.about-product-text { 
    min-height: 120px;
    max-width: 1000px;
    display:block;
    padding: 20px 3%;
    margin: 0 auto;
}  

.about-product-text h3 {
    font-size: 2em;
    margin: 5px 0 18px 0;
}

.about-product-text p {
    padding-bottom: 12px; 
    text-align:justify;
}    
    

    
 
@media (max-width: 767px) { /*zobrazenĂ­ pro mobil*/ 
    
    h1 {font-size: 1.8em;}    
    h2 {font-size: 1.5em;} 
    
    .registration {width: 90%;}   
    .registration .button {font-size: 1.2em;}
    .registration .search-domain {height: 36px; padding: 3px 10px; font-size: 1.2em; width: 90%; }    
    
    #main {padding: 20px 1% 35px; width:98%;}
    
    #action {padding: 5px 5%; font-size: 1.5em;}
    .action-h2 {width: 100%;}
    .action-domain {width: 100%; font-size: 0.7em;}
    .info {width: 100%;}
     
    #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; }
    .box {width: 80px; margin: 0 1%;}
    .box img {max-width: 80px;}
    
    #slider {width: 90%;}
    .slider-image { display: none; }         
    .slider-text {width: 85%; padding: 20px 10% 20px 0;}  
    .slider-text h2 small {font-size: 0.65em;}
}
    
 @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;} 

    .registration {width: 80%;}
    .registration .search-domain {width: 72%;}
    #action {padding: 5px 10%; font-size: 1.7em;}
    .action-h2 {width: 100%;}
    .action-domain {width: 100%; font-size: 0.65em;}
    .info {width: 100%;}

    #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;}
    
    #slider {width: 80%;}
    .slider-image {padding: 20px 20% 20px 5%; float: none; }     
    .slider-text { padding: 20px 20% 20px 5%; width: 85%; float: none;}   
    
}
@media (max-width: 991px) {
	.flags, .social-icon {
		display: block;
	}
	.social-icon {
		padding-bottom: 15px; 
	}
	#header { height: 235px }
}
@media (min-width: 992px) { /*zobrazenĂ­ pro malĂ˝ notebook*/ 
   
    h1 {font-size: 2.5em;}    
    h2 {font-size: 2em;} 
    
    .registration .search-domain {width: 79%;}
    
    #action { padding: 5px 12%; font-size: 2em;}
    .action-h2 {width: 100%}
    .action-domain {width: 100%; font-size: 0.7em;}
    .action-domain {width: 100%; font-size: 0.7em;}
    .info {width: 100%;}
   
    #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;}
            
    #slider {max-width: 1000px;}
    .slider-image {padding: 20px 20px 20px 1%; width: 25%; float:left;}     
    .slider-text { padding: 20px 12% 20px 0px; width: 55%; float:right;}    
    .slider-text h2 {font-size: 2.2em; }
    .slider-text h2 small {font-size: 0.7em;}    
  
    
}
@media (max-width: 570px) { 
    
  .flags { padding: 5px 10px;}
    
  .logo  {width: 100px; padding-left:3%; margin-top: -7px;}
  .logo .zoner img {width: 70px;}
  #header { height: 300px; }
	.social-icon { display: block; }
	#contact {padding: 30px 0} 
	
}
@media (min-width: 1200px) { /*zobrazenĂ­ pro monitor*/ 
    
    h1 {font-size: 3em;}    
    h2 {font-size: 2.5em;} 
    
    .registration .search-domain {width: 76%;}
    
    #action {font-size: 1.8em; padding: 8px 5px 0px 3%; }
    .action-h2 {width: 20%;}
    .action-domain {width: 70%; font-size: 0.8em;}
    .info {width:100%;}
    
    .slider-image {padding: 20px 20px 20px 1%; width: 24%; float:left;}     
    .slider-text { padding: 20px 7% 20px 0px; width: 65%; float:right;}    
}    
    
    
@media (min-width: 1560px) {
    .action-h2 {width: 20%;}
    .action-domain {width: 52%;}
    .info {width:25%; float: right; padding: 12px 0 0 0;}
    
    #footer {height: 100px; margin-top: -110px; } 
    .wrapper {padding: 0 0 110px 0; }  
    
    #contact {width:60%; }
		.contact-box { float: right; }
    .flags { float: right; }
    .box {margin: 0 2.7%; }
    #projects {width: 100%; text-align: center;}
    #header { height: 60px; text-align: left; }
}