@media only screen and (max-width: 1120px){

	.slides img {
		max-height: 350px;
	}

	#models > .main_container {
		width: 500px;
	}

	.long_container > .item {
		width: 240px;
	}

	.main_container > img {
		width: 240px;
	}

	.see_previous {
		left: 50px;
	}

	.see_next {
		right: 50px;
	}

}

@media only screen and (max-width: 870px){

	#outline {
		width: 100% !important;
	}

	#menu {
		background-color: black;
		
	}

	.slides img {
		max-height: 250px;
	}

	#menu > li{
		display: none;
		min-width: 100%;
		background-color: black;
		padding-bottom: 5%;
		position: relative;
		
	}
	

	.main_container .item {
		width: 270px !important;
	}

	#menu_resp {
		display: inline !important;
		color: white;
		background-color: black;
		margin: 0 auto;
		border: 0;
		font-size: 2em;
		float: right;
	}

	#menu_resp:hover {
		cursor: pointer;
	}

	#models > .see_next {
		right: 30px;
	}

	#models > .see_previous {
		left: 30px;
	}


	#cnc_i{
		padding: 10px;
		min-height: 170px;
		min-width: 300px;
		position: absolute;
		border-radius: 5px;
		border: solid 1px #ccc;
		bottom: 30px;
		background-color: white;
		right: -60px;
		
	}

	#frezovani_i {
		padding: 10px;
		min-height: 170px;
		min-width: 300px;
		position: absolute;
		border-radius: 5px;
		border: solid 1px #ccc;
		bottom: 30px;
		background-color: white;
		right: -60px;
	}

	#dily_i {
		padding: 10px;
		min-height: 170px;
		min-width: 300px;
		position: absolute;
		border-radius: 5px;
		border: solid 1px #ccc;
		bottom: 30px;
		background-color: white;
		right: -60px;
	}

	#tepelneupravy_i{
		padding: 10px;
		min-height: 170px;
		min-width: 300px;
		position: absolute;
		border-radius: 5px;
		border: solid 1px #ccc;
		bottom: 30px;
		background-color: white;
		right: -60px;
	}

	#material_i {
		padding: 10px;
		min-height: 170px;
		min-width: 300px;
		position: absolute;
		border-radius: 5px;
		border: solid 1px #ccc;
		bottom: 30px;
		background-color: white;
		right: -60px;

	}

	#models > .main_container {
		width: 270px;
	}

}

#outline {
	margin: 0 auto;
	background-color: black;
	width: 80%;
	height: 100%;
}

#menu_resp {
	display: none;
}


#language {
	text-align: right;
	padding-top: 1%;
	padding-right: 11%;
	font-size: 0.8em;
}

p {
	font-size: 0.9em;
}

#language a {
	text-decoration: none;
	color: rgb(255, 181, 9);
	}

.containers {
	text-align: center;
	margin: 0%;


}

body {
	margin-top: 70px;
	padding: 0%;
	margin: 0 auto;
	font: caption;
	text-decoration: none; 
	font-family: sans-serif;
	background-color: grey;
}

ul {
	list-style-type:none;
	vertical-align: middle;
	margin: 1%;
	font-size: 0.8em;
	padding-right: 8%;
}

#menu > li {
	float: right;
	padding-right: 2%;
}

#menu a {
	text-decoration: none;
	color: white;
}

#menu a:hover {
	color: rgb(255, 181, 9);
}

#menu > li {
	margin-bottom: 1%;
	width: 60px;
}

header {
	height: 70px;
	background-color: black;
	color: white;
	width: 100%;
	margin-right: 10%;

}

#logo {
	float: left;
	background-color: black;
	margin-left: 10%; 
}

#slider{
	margin: 0;
	padding: 0;
	width: 100%;
	overflow: hidden;
	position: relative;
	height: auto;
}

.slides{
	display: flex;
	margin: 0;
	padding: 0;
	width: 400%;
	position: relative;
	animation-name: slide;
	animation-duration: 40s;
	animation-interation-count: infinite;
}

@keyframes slide{
	10% {left:0px;}
	15%, 25% {left:-100%;}
	30%, 40% {left:-200%}
	45%, 55% {left:-300%;}
	60%, 70% {left:-200%;}
	75%, 85% {left:-100%;}
	90%, 100%{left:0px;}
}


.slides li {
	padding: 0;
	width: 100%;

}

.slides img {
	width: 100%;
	display: block;
	position: relative;
}


#text {
	position: absolute;
	bottom: 10px;
	right: 100px;
	color: white;
	text-align: right;
}

#text > h1 {
	margin-bottom: 0%;
	margin-top: 0%;
}

#text > p {
	margin: 3px;
	width: 300px;
}

#border {
	background-color: rgb(255, 181, 9);
	height: 4px;
}

#models {
	height: 180px;
	display: flex;
	position: relative;
	background-color: rgb(225, 225, 225);
}

.main_container {
	width: 750px;
	display: block;
	margin: 0 auto;
	left: 0;
	height: 100%;
	display: flex;
	overflow: hidden;
	position: relative;
}

.long_container {
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;

	
}

.item {
	height: 100%;
	float: left;
	width: 250px !important;

}

.see_previous {
	float: left;
	height: 100%;
	width: 50px;
	left: 10px;
	display: flex;
	position: absolute;
	transition: all 0.2s ease-in-out;
	border-radius: 4px;
}

.arrow_previous {
	align-self: center;
	margin-left: 10px;
}

.see_next{
	left: auto;
	height: 100%;
	width: 50px;
	right: 10px;
	display: flex;
	position: absolute;
	transition: all 0.2s ease-in-out;
	border-radius: 4px;

}

.arrow_next {
	align-self: center;
	margin-left: 10px;

}

.see_previous:hover,
.see_next:hover {
	background-color: rgb(188, 188, 188);
}

#one,
#two,
#three,
#four,
#five,
#six,
#seven,
#eight {
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	width: 240px;
}

#one {
	background-image: url("../img/predmet_1.png");
}

#two {
	background-image: url("../img/predmet_2.png");
}

#three {
	background-image: url("../img/predmet_3.png");
}

#four {
	background-image: url("../img/predmet_4.png");
}

#five {
	background-image: url("../img/predmet_5.png");
}

#six {
	background-image: url("../img/predmet_6.png");
}

#seven {
	background-image: url("../img/predmet_7.png");
}

#eight {
	background-image: url("../img/predmet_8.png");
}

#services_back {
	width: 100%;
	background-color: white;
	text-align: center;
}


#services {
	background-color: white;
	text-align: center;
	min-height: 500px;
	font-size: 1.2em;
	margin: 0 auto;
	max-width: 900px;
	padding-bottom: 2%;
	padding-top: 1%;
	
}

#services > p {
	color: rgb(150, 150, 150);
	margin: 1%;
	text-align: center;
	vertical-align: center;
}

.nabidka {
	color: rgb(0, 0, 128);
   	margin-right: 2%;
    display: inline-block;
    height: 180px;
	width: 200px;
	vertical-align: top;
	margin-top: 2%;
	margin-left: 2%;
	position: relative;

}


.nabidka p {
	margin-top: 1%;
	height: auto;
	/*visibility: collapse;*/
	color: rgb(0, 0, 128);

}



.nabidka img {
	/*margin-top: 10px;*/
	padding-top: 10px;

}

.nabidka input {
	border-radius: 5px;
	padding: 7%;
	padding-right: 9%;
	padding-left: 9%;
	background-color: white;
	border: 1px solid #ccc;
	font-size: 0.8em;
	margin: 1%;
}

.nabidka > .button {
	position: absolute;
	bottom: 0px;
	right: 50px;
}

input:hover {
	background-color: rgb(0, 0, 128);
	color: white;
}

#references {
	min-height: 100px;
	background-color: rgb(0, 0, 128);
}

#references > h2 {
	padding: 1%;
}

#aboutus {
	min-height: 150px;
	background-color: rgb(235, 241, 241);
	padding: 1%;

}

.blue {
	color: rgb(0, 0, 128);
	font-size: 0.9em;
}

#contacts {
	min-height: 150px;
	background-color: rgb(235, 241, 241);
}

footer {
	height: 50px;
	background-color: black;


}

footer > div {
	padding-top: 0%;
	color: rgb(150, 150, 150);
	font-size: 0.8em;
}


h2 {
	color: rgb(0, 0, 128);
	font-size: 1.2em;
	padding-top: 1%;
	margin: 0%;
}

#references > h2 {
	color: white;
}

#aboutus > p {
	padding-right: 15%; 
	padding-left: 15%;
	margin-bottom: 0%;
	padding-bottom: 2%;
	color: rgb(166, 166, 166);
}

#contacts p {
	margin: 0%;
	padding: 0.5%;
	color: rgb(166, 166, 166);
}

#contacts > h2 {
	padding: 1%;
}

#con_names div{
	display: inline-block;
	padding: 3%;
}



#references > p {
	color: rgb(255, 181, 9);
	padding-bottom: 2%;
	padding-top: 0.5%;
	margin: 0%;
}

#references > img {
	margin-right: 1%;
	margin-left: 1%;
	vertical-align: middle;
}

#siemens {
	height: 30px;
}

#ford {
	height: 30px;
}

#ckd {
	height: 80px;

}

#skoda {
	height: 30px;
}

#abb {
	height: 30px;
}

#logo > img {
	height: 60px;
	margin: 1%;
}

h1 {
	margin-bottom: 5%;
}

.info_services {
	display: none;
}

.info_services {
	padding: 10px;
	min-height: 100px;
	min-width: 300px;
	position: absolute;
	border-radius: 5px;
	border: solid 1px #ccc;
	bottom: 30px;
	background-color: white;
	right: 10px;
}

.nabidka {
	position: relative;	
}