html { height: 100%; }
html * { background-repeat: no-repeat !important; margin: 0; padding: 0; }
body { background: #ffffff; text-align: center; font-size: 18px; line-height: 30px; font-family: 'Roboto', sans-serif; color: #000000; }
a { outline: none; text-decoration: none; color: #000000; -moz-transition: background 0.3s; -o-transition: background 0.3s; -webkit-transition: background 0.3s; transition: background 0.3s; height: 100%; }
div { position: relative; text-align: left; }
img { border: none; }
ul { list-style-type: none;  }
.green { color: #00a651; width: 50%; display: block; }
.clearfloat:after { content: ''; display: block; clear: both; }

/* layout screen 1 */
#container { width: 100%; height: 100%; overflow: hidden; }
#start { padding: 2% 3% 0 3%; box-sizing: border-box; background: url("../images/plant.jpg") 90% 80%; background-size: 21.5% auto; }
#head div.logo { float: left; width: 13%; }
#head div.logo img { width: 100%; }
#menu { float: left; width: 73.5%; margin-left: 3%; }
#menu li { display: inline-block; padding: 2.75% 1.5% 1% 1%; }
#menu a:hover { color: gray; }
#menu span { font-weight: bold; color: #00a651; }
#langmenu li { display: inline-block; font-size: 85%; }
#langmenu span { background: #d3d4d5; display: block; border-radius: 20px; padding: 5px 10px; }
#langmenu a { background: #fff; color: #000; display: block; border-radius: 20px; padding: 5px 10px; }
#langmenu a:hover { background: #00a651; color: white; }

#firstcontent { width: 59.5%; padding: 5% 0 5% 16.8%; color: #58595b; }
#firstcontent .clearfloat { margin: 3% 0; }
#firstcontent .introtext { width: 45%; }
.leftcol, .rightcol { width: 45%; float: left; padding-right: 5%; }

/* layout screen 1a */
#start2 ul { padding-left: 17.5%; width: 75%; }
#start2 #answers span  { display: inline-block; width: 70%; margin: 0 0 0 0; padding: 0 0 0 10%; background: url("../images/singledot-green.gif") left 6px; }
#start2 li { display: block; float: left; width: 18%; margin: 0 2px 2px 0; }
#start2 li a { display: block; color: white; background: #40bc7d; padding: 8% 10% 10% 10%; min-height: 90px; }
#start2 li a:hover { color: #fff; background: #3b3733; }
#start2 li.active a { background: #00a651; }

#answers { background: #00a651 url("../images/slogan.png") 66% 30%; padding: 4% 0 5% 15.5%; background-size: 25.4%; }
.ans1, .ans2, .ans3, .ans4 { color: white; width: 39%; padding-left: 4%; }
.ans1, .ans2, .ans3, .ans4 { display: none; }
.ans1.showtab, .ans2.showtab, .ans3.showtab, .ans4.showtab { display: block; }

/* layout screen 2 */
#effeco { width: 100%; color: white; background: url("../images/bg-field.jpg") left top; box-sizing: border-box; padding: 8.5% 0; min-height: 100%; background-size: cover; }
#effeco div { width: 30%; padding: 0 0 0 47%; background: url("../images/logo-white.png") 14% 40%; background-size: 16.4%; }
#effeco div p { padding: 0 0 5% 0; text-shadow: 1px 1px 10px #215349; }
#effeco div a { color: white; display: block; border-radius: 18px; border: 2px solid white; text-align: center; padding: 1.6% 2% 2.2% 2%; max-width: 36%; margin-top: 5%; }
#effeco div a:hover { color: white; background: rgba(0,0,0,0.2); border-color: black; }

/* layout screen 3 */
#keyfacts { background: #3b3733 url("../images/bg-key.gif") left top; background-size: cover; color: white; padding: 5% 0 8.5% 0; text-align: center; }
.headerimg { margin: 0 auto 2% auto;  }
.headerimg img { display: block; margin: 0 auto; width: 13%; }
#submenu { width: 50%; margin: 0 auto; }
#submenu a { display: block; color: white; float: left; padding: 0.8% 3% 1.2% 3%; background: #4c4845; width: 25%; text-align: center; box-sizing: border-box; border-left: 2px solid #3b3733; }
#submenu li.activebm a { background: #2bb673; }
#submenu a:hover { background: #fff; color: #000; }
.carousel  { text-align: center; overflow: hidden; }
.boxes { display: none; width: 60%; padding: 5% 0; margin: 0 auto; }
.boxes.show { display: block; }
.boxes img { display: block; margin: 0 auto 10% auto; width: 33%; }
.boxes h2 { font-size: 100%; }
.boxes div { width: 30%; float: left; text-align: center; padding: 0 1.66%; }

#keyfacts a.next { color: white; display: block; border-radius: 18px; border: 2px solid white; text-align: center; padding: 0.6% 1.2% 0.8% 1.2%; max-width: 9%; margin-top: 5%; margin: 0 auto; }
#keyfacts a.next:hover { background: rgba(255,255,255,0.2); }

/* layout screen 4 */
#studies { background: #000 url("../images/bg-product.jpg") right top; padding: 6% 0; color: white; background-size: 100%; }
#studies div { width: 25%; padding: 0 0 0 47%; }
#studies div p { padding: 0 0 5% 0; text-shadow: 1px 1px 10px #215349; }

/* layout screen 4a */
#studies2 { width: 59.5%; padding: 8% 0 10% 18.8%; }
.studiesbottom { padding-top: 5%; width: 90%; }
#studies2 h2 { font-weight: normal; color: #00a651; width: 50%; padding-bottom: 7%; line-height: 120%; }
.sciencefacts { width: 100%; margin-left: -2.5%; }
.sciencefacts li { display: block; float: left; width: 40%; padding-left: 9%; margin-bottom: 3%; background: url("../images/oksign.png") 5% top; background-size: 7.5%; min-height: 120px; }

/* layout screen 5 */
#contact { background: #dddcd4; text-align: center; }
#contact div.contactlayout { width: 70%; padding: 5% 0 8% 0; margin: 0 auto; }
.logodown { width: 16.5%; display: block; padding: 0 0 0 19.5%; }
#contact div.left, #contact div.right { float: left; box-sizing: border-box; }
#contact div.left { width: 45%; margin-right: 5%; padding: 0 0 0 0; }
#contact div.right { width: 50%; }
#contact div.left img { margin: 10% 0 5% 38%; width: 60%; height: auto; }
#contact div.contactdata { background: url("../images/logo-zdrojezeme.gif") left top; background-size: 32%; padding-top: 5%; }
#contact div.contactdata p  { line-height: 140%; padding-left: 50%; }
#contact div a.btn { text-decoration: none; color: white; display: block; border-radius: 12px; background: #00a651; border: 2px solid #00a651; text-align: center; padding: 1.6% 2% 2.2% 2%; max-width: 46%; margin: 12% 0 0 46%; font-size: 90%; }
#contact div a:hover.btn { background: rgba(59,55,51,1); border-color: #3b3733; text-decoration: none; color: white; }
#contact div a { text-decoration: underline; }
#contact div a:hover { text-decoration: underline; color: gray; }
#contact div.right img { display: block; padding: 15% 0 32.3% 0; width: 74.5%; }
#contact div.right p { width: 75%; }

/* plavajúce menu a scrollback šípka */
.rollback { opacity: 0.2; display: none; position: fixed; top: 90%; right: 4%; z-index: 999; width: 3%; height: 3%; }
.rollback.appear { display: block; }
.rollback:hover { opacity: 0.8; }
.rollback img { display: block; width: 80%; }

.movingmenu { display: block; width: 11.5%; height: 6%; position: fixed; left: 3%; top: 3%; z-index: 999; }
.movingmenu a { display: none; }
.movingmenu a.appear { display: block; background: url("../images/menuicon.png"); background-size: 22% auto !important; }
.movingmenu a.appear:hover { background: url("../images/menuicon-hover.png"); }

.movingmenu a.open { background: url("../images/menuicon-close.png"); }
.movingmenu a.open:hover { background: url("../images/menuicon-close-hover.png"); }

.movingmenu ul { border-top: 1px solid white; margin-top: 1%; display: none; }
.movingmenu a.open + ul { display: block; }
.movingmenu ul li { border-bottom: 1px solid white; }
.movingmenu ul a { display: block; color: white; background: #00a651; font-size: 90%; padding: 2% 0% 3% 12%; }
.movingmenu ul a:hover { background: #4c4845; }

/* korekcie EN / DE verzia */
#en #start2 ul { width: 75%; }
#en #start2 li a { min-height: 100px; }
#de #start2 ul { width: 75%; }
#de #start2 li a { min-height: 100px; }
#de #keyfacts a.next { max-width: 14%; }

@media only screen and (min-width: 1200px) and (max-width: 1601px) {
body { font-size: 95%; line-height: 155%; }
#start2 ul { width: 90%; }
#start2 li a { min-height: 80px; }
.boxes h2 { font-size: 110%; }
.boxes p { font-size: 100%; }
#effeco div { width: 35%; padding: 0 0 0 52%; }
#studies div { width: 35%; padding: 0 0 0 52%; }
#studies2 h2 { width: 50%; }
#studies2 { width: 64.5%; padding: 8% 0 10% 18.8%; }
.sciencefacts li { width: 44%; padding-left: 6%; background-size: 5.5%; }
#contact div.right p { width: 100%; }

#en #start2 li a { min-height: 80px; }
#de #start2 li a { min-height: 80px; }
#effeco div { width: 35%; padding: 0 0 0 47%; }
#de #studies div { width: 35%; padding: 0 0 0 47%; }
}
@media only screen and (min-width: 900px) and (max-width: 1199px) {
body { font-size: 90%; line-height: 155%; }
#start { background: url("../images/plant.jpg") 95% 85%; background-size: 21.5% auto; }
#menu { width: 70.5%; }
#submenu { width: 70%; }
#start2 ul { width: 92%; }
#start2 li a { min-height: 120px; }
#answers { background-position: 80% 36%; background-size: 35.4%; }
#effeco div { width: 45%; padding: 0 0 0 47%; }
#studies div { width: 45%; padding: 0 0 0 47%; }
#keyfacts a.next { max-width: 15%; }
#studies2 h2 { width: 80%; }
#studies2 { width: 74.5%; padding: 8% 0 10% 13.8%; }
#studies { padding: 3.5% 0; }
#contact div.contactlayout { width: 85%; }
#contact div.right img { padding: 15% 0 27.3% 0; }
.sciencefacts li { min-height: 140px; }

#en #start2 li a { min-height: 120px; }
#de #start2 li a { min-height: 120px; }
#de #keyfacts a.next { max-width: 20%; }
}
@media only screen and (min-width: 590px) and (max-width: 899px) {
body { font-size: 90%; line-height: 155%; }
#menu { width: 66.5%; }
#menu li { padding: 2.75% 2.5% 1% 2%; }
#firstcontent .introtext { width: 85%; }
.leftcol, .rightcol { width: 85%; float: none; padding-right: 5%; }
.rightcol { padding-top: 5%; }
#start2 ul { width: 100%; }
#start2 li a { min-height: 150px; }
#answers { background-position: 95% 36%; background-size: 35.4%; }
.ans1, .ans2, .ans3, .ans4 { color: white; width: 51%; padding-left: 8%; }
#effeco div { width: 45%; padding: 0 0 0 47%; background-size: 22.4%; }
#effeco div a { max-width: 50%; }
#studies { padding: 4.5% 0; background-size: cover; background-position: 40% 0; }
#studies div { width: 45%; padding: 0 0 0 47%; }
#studies2 h2 { width: 60%; }
#studies2 { width: 90%; padding: 8% 0 10% 7.5%; }
#contact div.contactlayout { width: 93%; }
#contact div.right img { padding: 15% 0 27.3% 0; }
#contact div.left img { margin: 10% 0 5% 28%; }
#contact div.contactdata p  { padding-left: 40%; }
#contact div a.btn { margin: 12% 0 0 36%; }
.headerimg img { width: 18%; }
#submenu { width: 70%; }
.boxes { width: 80%; }
#keyfacts a.next { max-width: 20%; }
.sciencefacts li { min-height: 140px; }
.rollback { width: 5%; height: 5%; }
.movingmenu a.appear { background-size: 32% auto !important; }

#en #start2 li a { min-height: 150px; }
#de #start2 li a { min-height: 150px; }
#de #keyfacts a.next { max-width: 28%; }
}
@media only screen and (max-width: 589px) {
body { font-size: 100%; line-height: 145%; }
#head div.logo { float: none; width: 45%; margin: 0 auto; }
#head { text-align: center; }
#menu { float: none; width: 100%; margin: 2% auto 0 auto; }
#menu li { padding: 2.5%; }
#langmenu li { display: inline-block; font-size: 80%; }
#firstcontent { width: 80%; padding: 10% 0 10% 12.8%; }
#firstcontent .introtext { width: 100%; padding-bottom: 5%; }
.leftcol, .rightcol { width: 100%; float: none; padding: 0 0 5% 0; }
#start { background: none; }
.rollback { width: 6%; height: 6%; top: 80%; right: 4%; }
.movingmenu { width: 30%; height: 12%; }
.movingmenu a.appear { background-size: 18% auto !important; }
#start2 ul { padding-left: 0%; width: 100%; }
#start2 li { float: none; width: 100%; margin: 0 2px 2px 0; }
#start2 li a { padding: 2% 8% 2% 8%; }
#answers { padding: 6% 0 6% 0%; background-image: none; }
.ans1, .ans2, .ans3, .ans4 { width: 80%; padding: 3% 0 3% 15%; background-position: 5% 40%; }
#effeco div { width: 80%; padding: 0 0 0 15%; background: none; }
#studies { background: #000; }
#studies div { width: 80%; padding: 0 0 0 15%; }
.headerimg img { width: 25%; margin-bottom: 5%; }
#submenu { width: 100%; margin: 0 auto; font-size: 90%; }
#keyfacts a.next { max-width: 60%; }
#effeco div a { max-width: 50%; }
.boxes { width: 80%; padding: 10% 0; }
.boxes img { float: left; width: 15%; padding-right: 5%; }
.boxes div { width: 100%; float: none; clear: left; text-align: left; padding: 0 1.66%; margin-bottom: 5%; }
#studies2 { width: 80%; padding: 8% 0 10% 15%; }
#studies2 h2 { width: 90%; font-size: 110%; }
.sciencefacts li { float: none; width: 80%; padding-left: 16%; margin-bottom: 5%; background-position: 5% 4%; background-size: 4.5%; }
#contact div.contactlayout { width: 90%; padding: 5% 0 8% 0; margin: 0 auto; }
.logodown { width: 33%; padding: 0 0 0 10.5%; }
#contact div.left, #contact div.right { float: none; }
#contact div.left { width: 100%; margin-right: 0; padding: 0 0 0 0; }
#contact div.right { width: 100%; }
#contact div.left img { display: none; }
#contact div.contactdata { background-size: 28%; padding-top: 15%; background-position: 14% 17%; }
#contact div.contactdata p  { line-height: 140%; padding-left: 45%; }
#contact div a.btn { margin: 8% 0 0 44%; }
#contact div.right img { padding: 15% 0 15% 0; width: 100%; }
#contact div.right p { width: 100%; }
}

@media only screen and (min-width: 590px) and (max-width: 620px) {
body { font-size: 80%; }
#menu { width: 69.5%; }
#langmenu li { font-size: 75%; }
#langmenu a { border-radius: 12px; padding: 2px 6px; }
#langmenu span { border-radius: 12px; padding: 2px 6px; }
#en #start2 li a { min-height: 100px; }
#de #start2 li a { min-height: 100px; }
}
@media only screen and (max-width: 800px) and (min-height: 930px) {
#studies { background-position: 40% 0; }
}