@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
@import url("https://fonts.googleapis.com/css?family=Rubik&display=swap");



body {
	width: 100vw;
    margin: 0;
    margin-top: 50px;
    background-color: #eee;
	font-family: Ubuntu, Helvetica, Arial, sans-serif, Raleway, Rubik;-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
}

@media (min-width: 657px) {
header {
	font-size: 15px;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
	padding: 2px;
    height: 50px;
    line-height: 50px;
    background-color: #eee;
}
}

@media (max-width: 700px) {
header {
	font-size: 18px;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
	padding: 2px;
    height: 50px;
    line-height: 50px;
    background-color: #eee;
}
}



header * {
    display: inline;
    height: 50px;
}

header ul {
    padding: 0;
}

header li {
    margin-left: 10px;
}


nav select {
  display: none;
}

.onas{
	width: 100vw;
	overflow-wrap: break-word;
}




section {
    
    height: 60vw;
    display: inline-block;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    background-size: cover; /* Add this line */
    background-position: center center; /* Add this line */
    background-repeat: no-repeat; /* Add this line */
    background-attachment: fixed; /* Add this line */
}

@media (min-width: 657px) {
#hero .profile-img {
	width: 25vw;
	padding-bottom: 10px;
	padding-top: 70px;
}
}

@media (max-width: 656px) {
#hero .profile-img {
	width: 200px;
	padding-bottom: 35px;
	padding-top: 70px;
}
}

.profile-img { transition: all .2s ease-in-out; }
.profile-img:hover
{
		-webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
}

@media (min-width: 657px) {
img.resize{
  max-width:50%;
  max-height:50%;
  opacity: 0.5;
  padding: 12px;
}
}
@media (max-width: 656px) {
img.resize{
  display: none;
}
}

footer {
    text-align: center;
    padding: 50px;
}


@media (max-width: 656px) {
.withbackground{
	max-height: 80vw;
	width: 100vw;
	overflow-wrap: break-word;
	font-size: 6px;
	height: auto;
	background: rgba(255,255,255,0.2);
	center;
}
}

@media (min-width: 657px) {
.withbackground{
	max-height: 80vw;
	width: 100vw;
	overflow-wrap: break-word;
	font-size: 9px;
	height: auto;
	background: rgba(255,255,255);
	center;
}}

@media (min-width: 657px) {
	.telefon{
	font-size:30px;
	}
}

@media (max-width: 656px) {
	.telefon{
	font-size:20px;
	}
}



#hero h1 {

	text-align: center;
    font-size: 4em;
	font-family: Rubik;
	color: #323241;
	text-transform: uppercase;
	text-shadow: 2px 2px #FFFFFF;
	margin: 15px;
	margin-top: 15px;

}

p {
	font-family: Rubik;
	font-size: 1.3em;
}

section h1 {
    font-size: 1.5em;
	padding: 20px;
	overflow-wrap: break-word;
}

section h2 {
    font-size: 2.5em;
	padding-top: 20px;
	overflow-wrap: break-word;
}

section h3 {
    font-size: 1.5em;
	overflow-wrap: break-word;
}

section h4 {
	font-family: Rubik;
    font-size: 2.5em;
	padding-top: 10px;
	padding-bottom: 10px;
	text-transform: uppercase;
	overflow-wrap: break-word;
}

section h5 {
    text-align: center;
    font-size: 2.5em;
	font-family: Rubik;
	color: #323241;
	text-transform: uppercase;
	text-shadow: 2px 2px #FFFFFF;
	overflow-wrap: break-word;

}

header a {
    text-decoration: none;
    color: black;
}




@import url('https://fonts.googleapis.com/css?family=Roboto:700');

/* ----------------TEXT ANIMATION--------------------------------- */

body {
  margin:0px;
  font-family:Rubik;
  text-align:auto;

}

@media (min-width: 657px) {
#containeranimation {
max-height: 150px;
min-height: 100px;
width: 70vw;
  color:#999;
  text-transform: uppercase;
  font-size:20px;
  font-weight:bold;
  padding-top:40px;  
  width:100%;
  bottom:25%;
  display:block;
}
}

@media (max-width: 656px) {
#containeranimation {
max-height: 100px;
min-height: 50px;
width: 50vw;
  color:#999;
  text-transform: uppercase;
  font-size:15px;
  font-weight:bold;
  width:100%;
  bottom:5%;
  display:block;
}
}

#flip {
  height:50px;
  overflow:hidden;
}

#flip > div > div {
  color:black;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;

}

#flip div:first-child {
  animation: show 15s linear infinite;
}

#flip div div {

}
#flip div:first-child div {

}
#flip div:last-child div {

}

@keyframes show {            
       
  0% {margin-top:-270px;}
  

  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  
  
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  
  100% {margin-top:-270px;}
}




.textcontainer {
	margin: auto;
	width: 80vw;
	line-height: 1.3;
}

.documentscontainer {
	margin: auto;
	width: 80vw;
	line-height: 1.3;
	text-align: left;
}


.container {
	margin: 15px;
	width: 80%;
}

@media (max-width: 656px) {
#wrapper {
font-size: 9px;
  display: block;
  padding: 5px;
  width: 80%;
  overflow-wrap: break-word;
  text-align: left;
}


#div1 {
    margin-left: 5vw;
}

#div2 {
    padding-left: 13vw;
}
}

@media (min-width: 657px) {
#wrapper {
	font-size-adjust: 10px;
  display: block;
  padding: 10px;
  width: 80%;
  margin-bottom: 10px;
  overflow-wrap: break-word;
  text-align: left;
}


#div1 {
    margin-left: 5vw;
    text-align: left;
}

#div2 {
    padding-left: 13vw;
    text-align: left;
}
}



@media (max-width: 656px) {

ul {
	text-align: left;
	width: 80vw;
	font: Rubik;
	font-size: 1em;
	padding-left:2px;


	}
li {
	list-style-position: inside;
	width: 80vw;
	padding: 5px;
	font: Rubik;
	font-size: 0.7em;
	line-height: 150%;

	}
}



@media (min-width: 657px) {

ul {
	text-align: left;
	width: 80vw;
	font: Rubik;
	font-size: 1.3em;


	}
li {
	list-style-position: inside;
	width: 80vw;
	padding: 5px;
	font: Rubik;
	font-size: 1em;
	line-height: 150%;

	}
}

	
@media (min-width: 700px) {
#hero {
    background-image: linear-gradient(rgba(255,255,255,0.45),rgba(255,255,255,0.45)), url('Obrazy/maserati-1649119_1920.jpg');
		background-size: 100% auto;
  height: 700px;
  padding-top: 3%;
  padding-bottom: 3%;
}
}

@media (max-width: 699px) {
#hero {
    background-image: linear-gradient(rgba(255,255,255,0.45),rgba(255,255,255,0.45)), url('Obrazy/background_small.png');
	background-size: auto 100%;
  height: 400px;
  padding-top: 3%;
  padding-bottom: 3%;
}
}


	/*

#about {
    background-image: linear-gradient(rgba(255,255,255,0.65),rgba(255,255,255,0.89)), url('Obrazy/mercedes-841465_1920.jpg');
}

#onas {
    background-image: linear-gradient(rgba(255,255,255,0.65),rgba(255,255,255,0.89)), url('Obrazy/mercedes-841465_1920.jpg');
}

#documents {
    background-image: linear-gradient(rgba(255,255,255,0.65),rgba(255,255,255,0.65)), url('Obrazy/ford-63930_1920.jpg');
}

#contact {
    background-image: linear-gradient(rgba(255,255,255,0.65),rgba(255,255,255,0.65)), url('Obrazy/car-tire-1031579_1920.jpg');
*/