*
{
margin: 0;
padding: 0;
}


body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
position: relative;



}

.body-inside{
  position: relative;
}

body::before{
  background-image: url(bg.JPG);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  
  background-repeat: no-repeat;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  content: "";
  
  filter:contrast(40%);
}

h1{
  font-size: 2.5em;
  text-shadow: 3px 3px black;
  color: white;

}

h2 {
  font-size: 1.8em;
}

p{
  font-size: 18px;
  line-height: 1.5;
  margin-top: 5px;
}

/*barvy firmy oranžová= #f16522 šedá= #454a4c*/


/*Celý rámeček kontentu ve webu*/

.container
{

max-width: 1400px;
width: 100%;
position: relative;
margin: 0 auto;
}


.header {

padding: 150px;
text-align: center;
}


.logo
{
box-shadow: 10px 10px 1px #f16522;
} 


#navigace {
overflow: hidden;
background-color: #000;
z-index: 1;

}
/*NAVIGACE STYLOVANI*/

#navigace a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 22px 16px;
text-decoration: none;
font-size: 15px;
}

#navigace a:hover {
background-color: #f16522;
color: black;
}
.navigace-right
{ 
float: right;

}

.sticky {
    position: fixed;
    top: 0;
    width: 1400px;
  }
    
  .sticky + .container1 {
    margin-top: 60px;
  }
  
  #navigace .icon {
    display: none;
  }

.container1 
{
background-color: #919799;
}

/*Nastavání rozměrů pro první container*/
.content1
{

max-width: 1000px;
width: 100%;
position: relative;
margin: 0 auto;
padding: 100px 0 60px 0;
} 


.container2
{
background-color: #919799;

}


/*Nastavání rozměrů pro druhý container*/
.content2
{
max-width: 1000px;
width: 100%;
position: relative;
margin: 0 auto;
padding: 60px 0 50px 0;

}

.container3
{
background-color: #919799;
padding: 25px 0;
}

.content3
{
max-width: 1000px;
width: 100%;
position: relative;
margin: 0 auto;
padding: 60px 0 60px 0;
}

.content-footer
{
max-width: 900px;
width: 100%;
position: relative;
margin: 0 auto;
padding: 60px 0;
}

.footer-text
{
font-weight: bold;
color: #000;
font-size: 20px;
padding-left: 160px;
color: #fff;
text-shadow: 2px 2px 1px black;
}
.footer img
{
float: left;
}
 
  

  /*MEDIA QEURIE JENOM!*/
  
  /*pro telefony*/
  @media screen and (max-width: 600px) {


    .logo
    {
      width: 224px;
      height: 134px;
    }

    #navigace a:not(:first-child) {display: none;}
    #navigace a.icon {
      float: right;
      display:block;
    }
  
    #navigace.responsive {position: relative;}
    #navigace.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
    #navigace.responsive a {
      float: none;
      display: block;
      text-align: center;
    }
    .navigace-right {
      text-align: center;
      float: none;
    }
    .sticky {
      position:sticky;
      top: 0;
      width: auto;
    }
    .sticky + .container1 {
      margin-top: 0;
    }

   /*pro telefony pozadi*/

   .body-inside{
    position: relative;
  }
  
  body::before{
    background-image: url(bg.JPG);
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    
    background-repeat: no-repeat;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    content: "";
    
    filter:contrast(40%);
  }

   body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;


    }
    
  .header {
    padding: 50px 0;
    text-align: center;

  }

  footer{

    text-align: center;


  }
.footer img
{
  float: none;
  height: 60px;

}
.footer-text
{
font-weight: bold;
color: #000;
font-size: 1px;
padding-left: 0px;
color: #fff;
text-shadow: 2px 2px 1px black;
}

}



  /*pro tablety*/
  @media screen and (min-width: 601px) and (max-width: 990px) {

    }

  
  @media screen and (max-width: 1250px) {
    .strips {
      display: none;
    }

  }

    @media screen and (max-width: 1400px) {
      .sticky {
        position:sticky;
        top: 0;
        width: auto;
      }
      .sticky + .container1 {
        margin-top: 0;
      }
  
    }

/*responzive resizing*/

@media screen and (min-width: 1201px) and (max-width: 1400px) {
  .container
  {
  max-width: 92%;
  width: 100%;
  position: relative;
  margin: 0 auto;
  }
}
@media screen and (min-width: 993px) and (max-width: 1200px) {
  .container
  {
  max-width: 85%;
  width: 100%;
  position: relative;
  margin: 0 auto;
  }
  .content1{
    margin-left: 10px;
    margin-right: 10px;
  }
  .content2{
    margin-left: 10px;
    margin-right: 10px;
  }
  .content3{
    margin-left: 10px;
    margin-right: 10px;
  }

  h1{
    font-size: 2.3em;
    text-shadow: 3px 3px black;
    color: white;
  }
  
  h2 {
    font-size: 1.6em;
  }
  
  p{
    font-size: 14px;
    line-height: 1.4;
    margin-top: 5px;
  }
}
@media screen and (max-width: 992px) {
  .container
  {
  max-width: 75%;
  width: 100%;
  position: relative;
  margin: 0 auto;
  }
  h1{
    font-size: 2.3em;
    text-shadow: 3px 3px black;
    color: white;
  }
  
  h2 {
    font-size: 1.6em;
  }
  
  p{
    font-size: 14px;
    line-height: 1.4;
    margin-top: 5px;
  }
}
@media screen and (max-width: 600px) {
  .container
  {
  max-width: 100%;
  width: 100%;
  position: relative;
  margin: 0 auto;
  }
}