@charset "utf-8";
/* CSS Document */

html * { margin: 0; padding: 0; background-repeat: no-repeat !important; }  
body { font-size: 20px; font-family: 'Open Sans', sans-serif; color: black; min-width: 340px; }
ul { list-style-type: none; }
a { text-decoration: none; color: black; }
a:hover { -moz-transition: background 0.3s; -o-transition: background 0.3s; -webkit-transition: background 0.3s; transition: background 0.3s; }
h1 { font-size: 150%; font-weight: bold; }


/* header */
#content { padding: 2% 0 0 0; box-sizing: border-box; }
#header { color: white; box-sizing: border-box; padding: 0 40px; padding-top: 42.44%; margin: 0 auto; } 
.aboutcontent div { max-width: 1260px; margin: 0 auto; }
.aboutcontent div.aboutinfo { max-width: 1920px; margin: 0 auto; box-sizing: border-box; padding: 0 40px; }
.production div { max-width: 1260px; margin: 0 auto; }
.production div.production1 { max-width: 1920px; margin: 0 auto; box-sizing: border-box; padding: 0 40px; }
.military div { max-width: 1260px; margin: 0 auto; }
.military div.military1 { max-width: 1920px; margin: 0 auto; box-sizing: border-box; padding: 40px 40px 60px 40px; }
.pharma div { max-width: 1260px; margin: 0 auto; }
.pharma div.pharma1, .pharma div.pharma2 { max-width: 1920px; margin: 0 auto; box-sizing: border-box; padding: 40px 40px 60px 40px; }
.offerdirection { max-width: 1260px; margin: 0 auto; padding: 0 0 60px 0;  }
.contentdata { max-width: 1260px; margin: 0 auto; }
.contactdata { padding: 0 0 0 10%; }

#contactpage #header { color: white; padding-top: 21%; } 
#contactpage #content { margin-top: -10%; }

#homepage #header { background: url("/img/img-home.jpg") center top; background-size: contain; }
#aboutpage #header { background: url("/img/img-about.jpg"); background-size: contain; }
#offerpage #header { background: url("/img/img-offer.jpg"); background-size: contain; }
#productionpage #header { background: url("/img/img-production.jpg"); background-size: contain; }
#militarypage #header { background: url("/img/img-military.jpg"); background-size: contain; }
#pharmapage #header { background: url("/img/img-pharma.jpg"); background-size: contain; }
#contactpage #header { background: url("/img/img-contact.jpg") center top; background-size: contain; }
#contactpage #top { margin: -21.7% auto 0 auto; }

.en #homepage #header { background: url("/img/img-home-en.jpg") center top; background-size: contain; }

#top { max-width: 1260px; margin: -44% auto 0 auto; padding: 50px 0 0 0; display: flex; align-items: center; position: relative; }
.menu li { display: inline-block; margin: 6px 0 0 12px; }
#top #logo { display: block; margin-right: 30px; width: 21%; }
#top a.backhome { display: block; margin-right: 30px; width: 21%; }
#top a #logo { display: block; width: 100%; }
#top li img { margin-right: 0; }
#header .menu a { color: white; display: block; padding: 4px 8px 6px 8px; border-radius: 10px; }
#header .menu a:hover { background: rgba(0,0,0,1); color: rgba(255,255,255,0.80); }
.menu span { display: block; opacity: 0.3; padding: 4px 8px 6px 8px; border-radius: 10px; }
.langmenu { position: absolute; right: 0; }
.langmenu li { float: left; margin: 6px 0 0 12px; }
.langmenu img { display: block; border: 1px solid transparent; width: 90%; }
.langmenu img:hover { border: 1px solid white; }
.langmenu .activelang { opacity: 0.5; }

/* footer */
#footer { background: #3f3f3f; color: white; border-top: 2px solid #fa7f07; padding: 20px 0 50px 0; font-size: 80%; text-align: center; }
#footer li { display: inline-block; padding: 0 8px 0 0; }
#footer li:first-child::before { content: ""; }
#footer li::before { content: "I"; padding: 0 16px 0 0; }
#footer a { color: white; display: inline-block; }
#footer a:hover { opacity: 0.6; }
.copyright { font-size: 80%; padding-top: 5px; }

/* uvod */
.homedirection, .homecolumn { max-width: 1260px; margin: 0 auto; }
.homedirection { display: flex; justify-content: center; }
.homedirection h2 { line-height: 100%; margin-bottom: 5px; }
.homecolumn { display: flex; justify-content: center; padding: 3% 0 8% 1%; }
.homecolumn h3 { color: #646a4d; }
.homecolumn p { padding: 10px 15% 10px 0; font-size: 80%; }
.homecolumn a { display: inline-block; margin: 5% 0 0 0; padding: 4px 8px 6px 8px; border: 1px solid #646a4d; font-size: 85%; }
.homecolumn a:hover { background: #646a4d; color: white; border: 1px solid #646a4d; -moz-transition: background 0.3s; -o-transition: background 0.3s; -webkit-transition: background 0.3s; transition: background 0.3s; }

.direction1, .direction2 { width: 612px; height: 401px; color: white; padding: 25px 10px 10px 25px; box-sizing: border-box; position: relative; font-size: 85%; }
.direction1 a, .direction2 a { display: inline-block; margin: 5% 0 0 0; padding: 4px 8px 6px 8px; border: 1px solid #fff; color: white; position: absolute; left: 25px; bottom: 50px; }
.direction1 a:hover, .direction2 a:hover { background: white; color: #646a4d; -moz-transition: background 0.3s; -o-transition: background 0.3s; -webkit-transition: background 0.3s; transition: background 0.3s; }
.direction1 { background: url("/img/hoffer-military-img.jpg") right top; margin: 0 15px 0 0; }
.direction2 { background: url("/img/hoffer-pharma-img.jpg"); }
.direction1:hover, .direction2:hover { filter: contrast(130%); -moz-transition: filter 0.3s; -o-transition: filter 0.3s; -webkit-transition: filter 0.3s; transition: filter 0.3s; }

/* o nás */
.aboutinfo { background: #eeeeee; }
.foodsetinfo { display: flex; padding: 20px 0 60px 0; }
.aboutinfo h2 { font-size: 140%; color: #fa6818; font-weight: normal; padding-top: 40px; }
.foodsetinfo p { font-size: 90%; padding: 0 10% 0 0; }
.aboutheader { padding: 0 0 2% 0; }
.aboutlogo { padding: 40px 0 60px; text-align: center; }
.aboutlogo img { margin-left: 2.5%; }
.contenttext { font-size: 85%; line-height: 140%; }

/* co nabizime */
.offerdirection .homedirection { padding: 2% 0 6% 0; }
.offerdirection .direction1 { background: url("/img/offer-military-img.jpg"); margin: 0 15px 0 0; }
.offerdirection .direction2 { background: url("/img/offer-pharma-img.jpg"); }

/* vyroba a kapacity */
.production1 { background: #eeeeee; }
.production1 h2 { font-size: 140%; color: #fa6818; font-weight: normal; padding-top: 40px; }
.productiontext { display: flex; padding: 20px 0 60px 0; }
.productiontext p { padding-bottom: 20px; }
.productionheader { padding: 0 0 2% 0; }
.production2 { padding: 0 0 7% 0; display: flex; align-items: center; flex-wrap: wrap; }
.production2 img { display: block; max-width: 100%; margin-top: 5% }
.productionlogos { margin-left: 2.5%; }

/* military */
.militaryheader { padding: 0 0 50px 0; }
.militarylogo { text-align: center; padding: 60px 0 80px 0; }
img.militarypacks { display: block; margin: 40px auto; max-width: 90%; }
.military1 { background: #eeeeee; }
.militarycols { display: flex; }
.militarycolhead h2 { font-weight: normal; color: #fa6818; }
.militarycols p { box-sizing: border-box; padding-right: 3%; margin-right: 20px; }
.mcol1 { width: 35%; box-sizing: border-box; padding-right: 5%; }
.mcol2 { width: 75%; box-sizing: border-box; padding-right: 10%;  }

/* pharma */
.pharmaheader { padding: 0 0 50px 0; }
.pharmacolheader1 h2, .pharmacolheader2 h2 { font-weight: normal; color: #fa6818; margin-bottom: 15px; }
.pharma1, .pharma2 { background: #eeeeee; }
img.pharmapack { display: block; margin: 40px auto; max-width: 90%; }
.pharmafooter { padding: 3.5% 0 7% 0; }
.pharmacols { display: flex; align-items: flex-start; }
.pharmacols div { box-sizing: border-box; padding-right: 3%; }
.pharmacols ul { list-style-type: disc; }
.pharmacols ul li { margin-bottom: 6px; }
.phcol1 { width: 33%; }
.phcol2 { width: 33%; }
.phcol3 { width: 33%; }

/* kontakt */
.contacts { display: flex; }
.contacts div.contactscol { width: 60%; text-align: left; }
.contacts div.contactscol a { color: black; }
.contacts div.contactscol a:hover { text-decoration: underline; }
.contacts div.map { width: 100%; margin-top: -80px; }
.contentdata .contacts h2 { margin: 20px 0 0 0; padding: 0; font-size: 100%; font-weight: 400; }
.contentdata .contacts p { margin-top: 0; padding: 0; font-size: 100%; font-weight: 600; }

.message-img { display: block; margin: 8% auto 2% auto; width: 20%; }
.contentdata h2.formh2 { font-size: 110%; font-weight: 600; text-align: center; text-transform: uppercase; margin-bottom: 30px; }
#contactform { width: 90%; max-width: 450px; margin: 0 auto; padding-bottom: 120px; }
label { display: block; margin: 10px 0 0 0; font-size: 66%; }
input, textarea { display: block; width: 100%; padding: 2px 4px; font-family: 'Open Sans', sans-serif; margin-top: 3px; }
#submit-btn { font-size: 80%; background: #ee582d; display: block; color: white; font-weight: bold; border: none; padding: 6px 20px 8px 20px; width: auto; margin: 25px auto 0 auto; }
#submit-btn:hover { background: #000; color: white; cursor: pointer; }
.map iframe { border: 1px solid #545c6e; width: 80%; height: 660px; padding: 0 0 0 0; }

/* zpracovani-osobnich-udaju */
.personal-data-page { padding: 0 10% 120px 10%; }
.personal-data-page h1 { margin: 20px 0 10px 0; }
.personal-data-page h2 { margin: 40px 0 10px 0; }
.personal-data-page p { margin: 10px 0 10px 0; }
.personal-data-page a { text-decoration: underline; }
.personal-data-page p a:hover { opacity: 0.5; }
.personal-data-page p.footerlink { margin: 40px 0 0 0; }
.personal-data-page ul { margin: 30px 0 30px 0; border-bottom: 1px dotted gray; }
.personal-data-page ul li { padding: 10px 0; border-top: 1px dotted gray; list-style-type: circle; }
.gdpr a { opacity: 0.5; font-size: 80%; text-decoration: underline; }


@media only screen and (max-width: 1440px) {
body { font-size: 18px; }
#contactpage #content { margin-top: -7%; }
}

@media only screen and (max-width: 1280px) {
/* uvod */
.homedirection, .homecolumn { max-width: 94%; margin: 0 auto; }
h1 { max-width: 90%; margin: 0 auto; }
.line { padding-left: 5%; }
#top #logo { width: 18%; }
#top a.backhome { width: 18%; }
    
/* o nás */
.aboutinfo h2 { padding-left: 2.5%; }
.foodsetinfo p { padding: 0 0 0 10%; }

/* vyroba a kapacity */
.production1 h2 { padding-left: 2.5%; }
.productiontext { padding: 20px 2.5% 60px 2.5%; }
.production2 { width: 94%; justify-content: center; }
    
/* military */
.military1, .military2 { width: 94%; }  
    
/* pharma */
.pharma1, .pharma2, .pharmafooter { width: 94%; }  
    
/* kontakt */
#contactpage h1 { max-width: 100%; }
#contactpage .line { padding-left: 0; }
}

@media only screen and (max-width: 1024px) {
body { font-size: 16px; }
.menu li { margin: 6px 0 0 3px; }
.line { width: 200px; height: 4px; }
#top #logo { margin-right: 20px; }
#top a.backhome { margin-right: 20px; }
.langmenu li { margin: 6px 0 0 0; }
.langmenu img { width: 75%; }
#contactpage #content { margin-top: -5%; }
}

@media only screen and (max-width: 800px) {
body { font-size: 12px; }
.menu li { margin: 6px 0 0 0; }
#top #logo { margin-right: 15px; }
#top a.backhome { margin-right: 15px; }
    
/* úvod */
#homepage #header { background: url("/img/img-home-mobil.jpg") center top; background-size: contain; padding-top: 66%; }
.en #homepage #header { background: url("/img/img-home-en-mobil.jpg") center top; background-size: contain; padding-top: 66%; }
    
/* military */
.militarycols p { padding-right: 0; margin-right: 0; }
.military div.military1 { padding: 40px 0 60px 40px; }
    
/* pharma */
.pharma div.pharma1, .pharma div.pharma2 { padding: 40px 0px 60px 20px; }
/* kontakt */
.contactdata { padding: 0 0 0 5%; }
.map iframe { height: 400px; margin: 5% 0 0 8%; }
}

@media only screen and (max-width: 600px) {
body { font-size: 14px; }
#top { padding: 30px 0 0 0; display: block; }
#top #logo { width: 27%; }
#top a.backhome { width: 27%; }

#header .menu a { padding: 2px 4px 4px 4px; font-size: 12px; }
#header .menu a { font-size: 12px; }
.menu span { font-size: 12px; opacity: 0.8; background: gray; padding: 2px 4px 4px 4px; }
.menu { margin: 3px 0 0 -4px; }
.menu li { margin: 2px 0 0 0; }
    
.langmenu li { margin: 6px 0 0 0; }
.langmenu img { width: 70%; }
.langmenu { position: absolute; top: 25px; right: -5%; }
    
/* úvod */
#homepage #top { margin: -77% auto 0 auto; }
.homedirection, .homecolumn { display: block; }
.direction1, .direction2 { width: 100%; height: 250px; margin-bottom: 2.5%; }
.homecolumn div { text-align: center; margin: 0 auto 10% auto; }
.homecolumn p { padding: 10px 10% 10px 10%; font-size: 100%; }
    
/* o nás */
.foodsetinfo { display: block; }
.foodsetinfo p { padding: 0; }
.aboutinfo h2 { padding-left: 0; }
    
/* co nabizime */
.offerdirection .direction1 { margin-bottom: 2.5%; }
    
/* vyroba a kapacity */
.productiontext { display: block; }
    
/* military */
.militarycols { display: block; }
.mcol1 { width: 100%; padding: 10px 10% 20px 0; }
.mcol2 { width: 100%; padding: 0 10% 0 0; }
    
/* pharma */
.pharmacols { display: block; padding: 0 5%; }
.pharmacolheader1 h2, .pharmacolheader2 h2 { padding-left: 5%; }
.phcol1 { width: 100%; padding-bottom: 2%; }
.phcol2 { width: 100%; }
.phcol3 { width: 100%; }
    
/* kontakt */
.contacts { display: block; }
.contacts div.contactscol { width: 100%; }
.contacts div.map { margin-top: 20px; }
.map iframe { width: 94%; height: 350px; margin: 5% 0 0 0; }
#contactform { width: 90%; margin: 0 auto; max-width: auto; }
input, textarea { width: 90%; }
}

@media only screen and (max-width: 480px) {
#footer li { display: inline-block; padding: 0 4px 0 0; }
#footer li::before { content: "I"; padding: 0 8px 0 0; }
#top #logo { width: 33%; }
#top a.backhome { width: 33%; }
#header .menu a, #header .menu span { padding: 2px 3px 4px 3px; font-size: 11px; background: rgba(0,0,0,0.50); }
.menu li { margin: 10px 0 0 0; }
.menu span { opacity: 0.5; background: rgba(255,255,255,1.00); }
#homepage #top { margin: -80% auto 0 auto; }
    
/* kontakt */
.contactdata { padding: 15% 10% 0 10%; }
}

@media only screen and (max-width: 360px) {
#homepage #top { margin: -86% auto 0 auto; }   
.langmenu { position: absolute; top: 25px; right: -12%; }
}

@media only screen and (max-width: 1500px) { #top { margin: -45% auto 0 auto; } }
@media only screen and (max-width: 1200px) { #top { margin: -46% auto 0 auto; } #contactpage #top { margin: -23% auto 0 auto; } }
@media only screen and (max-width: 1000px) { #top { margin: -47% auto 0 auto; } #contactpage #top { margin: -24% auto 0 auto; } }
@media only screen and (max-width: 900px) { #top { margin: -49% auto 0 auto; } #contactpage #top { margin: -27% auto 0 auto; } }
@media only screen and (max-width: 800px) { #top { margin: -50% auto 0 auto; } #homepage #top { margin: -76% auto 0 auto; } }
@media only screen and (max-width: 700px) { #top { margin: -53% auto 0 auto; } #homepage #top { margin: -79% auto 0 auto; } }
@media only screen and (max-width: 600px) { #top { margin: -50% auto 0 auto; } #homepage #top { margin: -76% auto 0 auto; } }
@media only screen and (max-width: 500px) { #top { margin: -52% auto 0 auto; } }
@media only screen and (max-width: 400px) { #top { margin: -57% auto 0 auto; } }

@media only screen and (min-width: 1921px) {
#header { padding-top: 43.44%; } 
#contactpage #header { padding-top: 22%; } 
#contactpage #content { margin-top: -14%; }
}

@media only screen and (min-width: 3000px) {
#header { padding-top: 44.44%; } 
#contactpage #header { padding-top: 22.5%; } 
}



/* SIMON */

#mobilemenu { display: none; }

@media only screen and (max-width: 601px) {
    .menu { display: none; }
    #mobilemenu { display: block; position: absolute; left: 0px; top: 2.5%; padding: 10px 10px 5px 5px; z-index:1000; }
    #top #logo { margin-left: 8px; }
}
@media only screen and (max-width: 501px) {
    #mobilemenu { top: 2%; }
}
@media only screen and (max-width: 451px) {
    #mobilemenu { top: 2.5%; }
}
@media only screen and (max-width: 401px) {
    #mobilemenu { top: 0.5%; }
}
@media only screen and (max-width: 351px) {
    #mobilemenu { top: 1.5%; }
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1001;
    top: 0;
    left: 0;
    background-color: #192616;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
  }
  
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 16px;
    color: #fff;
    font-weight:bold;
    text-transform:uppercase;
    display: block;
    transition: 0.3s;
  }
  
  .sidenav a:hover {
    color: #fa7f07;
  }
  
  .sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
  }


  .slidein {opacity:0; transition: 1s ease-in-out all; position:relative;left:100px;}
  .slidein.in { opacity:1;left:0px;}
  
  .contact-popup { position: fixed; top: 10%; width: 300px; left: 50%; margin-left: -150px; background: #FFF; padding: 30px; box-sizing: border-box; z-index: 99; }
.contact-popup p { text-align:center; }
.contact-popup a { color: #000; display: block; font-size: 11px; position: absolute; top: 0; right: 0; font-family: "Roboto-Bold"; padding: 3% 5%; }
.contact-popup a:hover { color: #000; }