/*******************************************************************************
 * smaller than XXXpx - start
 *******************************************************************************/

@media only screen and (max-width: 1110px), (max-device-width: 1110px) {

.wrap2 { width: 100% !important; }
.wrap2 .content, #slider .content, #content .content, #hp-reference .content, #why .content, #reference-logo .content, #contact .content, #foot .content { padding: 5%; width: 90%; }

#head .content { padding: 0; padding-left: 5%; padding-right: 5%; width: 90%; }
#menu { right: 5%; }
.head-phone {left: calc(5% + 115px);}

#map .content { padding: 0; width: 100% }

.tile { margin-right: 1%; width: 24%; }

                                             
}


/*******************************************************************************
 * smaller than XXXpx - start
 *******************************************************************************/

 @media only screen and (max-width: 1050px), (max-device-width: 1050px) {

#head { position: static; }
#head .content { height: auto; padding: 10px 5%; text-align: Center; width: 90%; }
#logo { position: static; }
#menu { clear: both; display: block; float: none; margin-top: 5px; position: static; }
#menu li { display: inline-block; float: none; margin: 1px 0; }
#menu li a { display: inline-block; padding: 5px 10px; }

.head-phone {position:static;display: block; transform: none; margin-top: 14px}

}

/*******************************************************************************
 * smaller than XXXpx - start
 *******************************************************************************/

@media only screen and (max-width: 850px), (max-device-width: 850px) {

#menu li { margin-right: 0px; }
#slider-line { height: 250px; }
#contact-form { margin: 0; width: 90%; }


#subpage .wrap-ref .tile { display: inline-block; float: none; margin: 1%; width: 45%; }

}

/*******************************************************************************
 * smaller than XXXpx - start
 *******************************************************************************/

@media only screen and (max-width: 700px), (max-device-width: 700px) {

#head { position: static; }
#head .content { height: auto; padding: 10px 5%; text-align: Center; width: 90%; }
#logo { position: static; }

#menu { clear: both; display: block; float: none; margin-top: 5px; position: static; }
#menu li { display: inline-block; float: none; margin: 1px 0; }
#menu li a { display: inline-block; padding: 5px 10px; }

#slider { padding-top: 200px; }
#slider-line { height: 280px; }

#subpage #content { margin: 0; }

#content .content table, #content table thead, #content table tbody, #content .content table tr, #content .content table tr td { height: auto !important; text-align: left !important; width: auto !important; }
#content .content table tr td { padding: 2px 5px; }

}

/*******************************************************************************
 * smaller than XXXpx - start
 *******************************************************************************/

@media only screen and (max-width: 690px), (max-device-width: 690px) {

#slider { background: #fff; padding-top: 0; }
#slider .content { text-align: center; }
#slider-line { display: none; }
#slider .tile, #subpage .tile { display: inline-block; float: none; margin: 1%; width: 45%; }

.why { margin: 0 0 1em 0; padding: 0; width: 40%; }    

}

/*******************************************************************************
 * smaller than XXXpx - start
 *******************************************************************************/

@media only screen and (max-width: 550px), (max-device-width: 550px) {

/* pomocné nastavení, že se jedná o resposivním designu */ 
.responsive-design { font-size: 1px; }

#slider .tile, #subpage .tile, #subpage .wrap-ref .tile { display: inline-block; float: none; margin: 0 0 1em 0; min-height: 230px; width: 100%; }

#hp-reference .h1 { margin-bottom: 0; }
#hp-reference .tile { float: none; display: inline-block; margin: 1%; width: 47%; }
#hp-reference .tile .img { height: 100px; }

#reference-logo { background-size: cover; }

/* tabulka formulář */
.table-form, .table-form tr, .table-form tr td { display: block; width: 100%; }
.table-form table { width: 100%; } 
.table-form td input[type="text"], .table-form td input[type="password"], .table-form td textarea { margin: 1px 0; width: 95% !important; }

/* patička */
#foot .content .block { height: auto; margin-bottom: 5%; width: 100%; }
#contact-form table input[type="text"], #contact-form table textarea { padding: 5%; width: 90% !important; }

.table-logo, .table-logo tr, .table-logo tr td { display: block; padding: 0 0 2em 0; width: 100%; }

.wrap-ref .tile:not(:first-child) {display: none !important;}

}

/*******************************************************************************
 * smaller than XXXpx - start
 *******************************************************************************/

@media only screen and (max-width: 450px), (max-device-width: 450px) {

#hp-reference .tile { margin: 0 0 1em 0; width: 100%; }
.why { margin: 0 0 1em 0; padding: 0; width: 100%; }

}