* {margin:0; padding:0;}
body {

font-family: 'Barlow', sans-serif;
font-size: 100%; text-align: center; color: #3c424a; background: #fff;}
a img {border: none;}  

div#obalhlavicky {width: 100%; max-width: 1920px; margin: auto; overflow: hidden; position: relative;}
div#hlavicka {width: 100%; max-width: 1920px; margin: auto; padding: 1em 0; background: url(img/main_pc_circle.jpg); background-repeat: no-repeat;
background-position: center center;
background-size: cover;
color: #fff;}
div#lang {width: 100%; max-width: 68px; margin: 1em auto; animation: Priletzdola; animation-duration: 2s;  animation-delay: 2s;   animation-fill-mode: backwards;  }
div#lang img {width: 30px; float: left; margin: 0 2px; }
div#lang a img {border: none; z-index: 1;}
div#hlavicka a#tlacprace {display: block; width: 120px; margin: 3em auto 2em auto; padding: 0.5em; color: #fff; background: #333; text-decoration: none; font-size: 1.4em; text-transform: uppercase; border: 1px solid #ccc; animation: Priletzdola; animation-duration: 2s;  animation-delay: 1s; animation-fill-mode: backwards; z-index: 100; }
div#nahore {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #333; animation: Odletdolu; animation-duration: 4s;  animation-fill-mode: forwards; opacity: 0.5;}
img#logo {width: 80%; margin: 0.5em auto 2em auto; max-width: 300px; animation: Priletshora; animation-duration: 2s;  animation-delay: 1s; animation-fill-mode: backwards; }
hr {clear: both; visibility: hidden;}
hr.orange {display: none; clear: none; visibility: visible; width: 80%; max-width: 500px; background: #ff7f00; height: 3px; border: none; margin-bottom: 3em; }
div#kontakt hr.orange {background: #3c424a; }
h1 {font-family: 'Merriweather Sans', sans-serif; font-size: 2em; opacity: 0.5; margin: 0.2em auto; padding: 0; text-transform: uppercase;}
h1#first {animation: Priletzleva; animation-duration: 2s;  animation-delay: 1s; animation-fill-mode: backwards;}
h1#sec {animation: Priletzprava; animation-duration: 2s;  animation-delay: 1s; animation-fill-mode: backwards;} 
h1#third {animation: Pruhlednost; animation-duration: 2s;  animation-delay: 2s;   animation-fill-mode: backwards;} 




div#trojuhelnik,
img.kostky {display: none;}

div#sluzby,
div#reference {width: 100%; max-width: 1920px; margin: auto; padding: 2em 0; background: #fff;}
h2, h4 {color: #ff7f00; font-size: 2em; display: block; font-weight: 300; margin: 1em auto; text-transform: uppercase;}
div#sluzby h3,
div#reference h3 {text-transform: uppercase; font-weight: 600; margin: 0 auto 1em auto; font-size: 1.4em; line-height: 1.5em;}
div#reference ul li {line-height: 1.6em;}
div#sluzby p,
div#sluzby ul {font-size: 1em; line-height: 1.6em;}
ul {text-align: left; width: 90%; max-width: 350px; margin: 1em auto; position: relative; left: 75px;}



div#profil {width: 100%; max-width: 1920px; margin: auto; padding: 2em 0 3em 0;}
div#profil p,
div#reference p,
div#job p {text-align: justify; width: 90%; max-width: 600px; margin: 0.5em auto; line-height: 1.4em;}
div#profil p {color: #f7f6f6; }



div.paralax {
position: relative;
min-height: 400px;

background-position: center;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
div.jedna {background-image: url(img/rypadlo_bg.jpg);}
div.dva {background-image: url(img/rafinerie_bg.jpg);}
div#job {width: 100%; max-width: 1920px; margin: auto; padding: 2em 0;  }
div#job img {margin-top: 2em;}
div#job h2,
div#job h4 {color: #fff; text-transform: uppercase;}
div#job h4 {color: #ff7f00; }
div#job p {color: #fff;}


div#kontakt h3 {font-size: 1.6em; margin: 1em auto;}
div#kontakt p {font-size: 1.2em; margin: 1em auto; line-height: 1.6em;} 
div#kontakt p span {color: #ff7f00;} 
div.kostky {display: none;}




div#copy {width: 100%; margin: auto; font-size: 0.8em; padding: 2em 0; background: #15161e;  color: #999; border-top: 5px solid #ff7f00;}
div#copy img {width: 90%; max-width: 200px; margin: 2em auto; opacity: 0.5;}
div#copy a {color: #999; transition: all 1s;}
div#copy a:hover {color: #fff;}
div#copy p {margin: 0.5em 0; line-height: 1.4em;}


/*----animace-----*/


@keyframes Zoomz80 {
    0%   {transform: scale(0.8); opacity: 0;  }
  80%   {opacity: 0.5;  }
 100% {transform: scale(1); opacity: 1; }
}
@keyframes Priletshora {
  0%   {transform: translate(0,-300px); }
  100% {transform: translate(0,0); }
}
@keyframes Priletzdola {
  0%   {transform: translate(0,300px); }
  100% {transform: translate(0,0); }
}
@keyframes Odletdolu {
  0%   {transform: translate(0,0); }
  100% {transform: translate(0,600px); }
}
@keyframes Priletzprava {
  0%   {transform: translate(1300px, 0); }
  100% {transform: translate(0,0); }
}
@keyframes Priletzleva {
  0%   {transform: translate(-1300px, 0); }
  100% {transform: translate(0,0); }
}
@keyframes Pruhlednost {
  0%   {opacity: 0; }
  100% {opacity: 0.5; }
}



/*---------BREAKPOINTY---------*/

 @media screen and (min-width: 400px) {
 h1 {font-size: 3em;}
}


@media screen and (min-width: 600px) {
 h1 {font-size: 4em;}
}

@media screen and (min-width: 700px) {
 h1 {font-size: 5em;}
}

@media screen and (min-width: 800px) {
 h1 {font-size: 6em;}

}

@media screen and (min-width: 1200px) {
div#trojuhelnik,
div.kostky {display: block;}
div#nadpis, div#trojuhelnik, div#obsah, div.left, div.right, div.levy, div.pravy, div.kostky, div.nadpissectyrikonou, div.pravykontakt  {float: left;}
div#trojuhelnik {width: 20%; }
div#trojuhelnik img {max-width: 275px;}
div#nadpis  {width: 27%; margin: 5.5em 2.5% 0 5.5%; }
div#obsah {width: 45%; margin-top: 4em; text-align: left; }
div#obsah ul,
div.pravy ul,
div#sluzby ul {text-align: left; max-width: 600px; margin: 1em 0; left: 1.1em;}

div#nadpis h2,
div#reference h3 {text-align: left;}
div#reference p {margin: 1em 0; width: 100%;}
div.left, div.right, div.levy, div.pravy {width: 40%; margin: 1em 5%; }
div.left {margin-top: 0;}

div#profil div.right p {margin: 1em 0; }
div.levy {margin-top: 4em;}

hr.orange {display: block;}

div.kostky, div.nadpissectyrikonou, div.pravykontakt  {width: 25%; }
div.kostky img {max-width: 350px; margin: 0; float: left;}
/* float: right v řádkovém stylu u druhého img */
div.nadpissectyrikonou, div.pravykontakt {margin-top: 7em;}
div.nadpissectyrikonou {position: relative;}
div.pravykontakt {text-align: left;}
div#kontakt h2 {position: absolute; transform: rotate(-90deg); z-index: 100; top: 2em; left: -0.5em;}
}

@media screen and (min-width: 1600px) {
div#trojuhelnik {max-width: 346px;}
div#trojuhelnik img {max-width: 346px;}
div#nadpis  {margin: 7.5em 0 0 5%;}


}