/*@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700&subset=latin-ext');*/

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

body {
	color: #262425;
	background-color: #ededed;
	/*font-family: 'Raleway', sans-serif;*/
	font-family: 'Roboto Condensed', sans-serif !important;
	}

/* CLEARS */
.cf:before,
.cf:after   { content: " "; display: table; }
.cf:after   { clear: both; }
.cf         { *zoom: 1; }

.fl { float: left; }
.fr { float: right; }

ul.menu a {
	color: #3e6f04 !important;
	}

ul.menu a.active {
	border-bottom: 2px solid;
	}

a.dropbtn {
	color: #3e6f04 !important;
	}

div.dropdown a.subLink {
	color: #ffffff !important;
	}

/* COLOR */
.white { background-color: #ffffff; }
.red { color: #f80826; }
.lightGreen { color: #b1cb74; }
.green { color: #3e6f04; }
.grey { color: #575757; }
.darkGrey  { background: #32353c; }
.blue { color: #0c36ac; }
.orange { color: #f74101; }
.raspberry { color: #ed1c24; }
.stramberry { color: #c60d12; }
.lemon { color: #ffb200; }
.yellow { color: #D8A811; }

.apricot { color: #E48600; }

.grey { background-color: grey; }

.greenTooltip {
	border: 1px solid #426a05;
	color: #ffffff;
	background: #426a05;
	padding: 0px 20px 20px 20px;
	width: 460px;
	overflow: hidden;
	}

.greenTooltip p.white {
	font-size: 18px;
    color: #ffffff;
    background: #426a05;
    line-height: 3.0rem;
	}

.colorApricot {
	padding: 0px 0px 0px 20px;
	background-color: #E48600 !important;	
	}

.colorApricot p,
.colorApricot ul,
.colorApricot ul>li {
	padding: 2px 0px 2px 20px;
	color: #ffffff !important;
	}

.colorYellow {
	padding: 0px 0px 0px 20px;
	background-color: #D8A811 !important;	
	}

.colorYellow p,
.colorYellow ul,
.colorYellow ul>li {
	padding: 2px 0px 2px 20px;
	color: #ffffff !important;
	}

.colorGreenLight {
	padding: 0px 0px 0px 20px;
	background-color: #b1cb74 !important;	
	}

.colorGreenLight p,
.colorGreenLight ul,
.colorGreenLight ul>li {
	padding: 2px 0px 2px 20px;
	color: #ffffff !important;
	}

.colorGreen {
	padding: 0px 0px 0px 20px;
	background-color: #3e6f04 !important;	
	}

.colorGreen.pa2 p,
.colorGreen.pa2 ul,
.colorGreen.pa2 ul>li {
	padding: 2px 0px 2px 20px;
	color: #ffffff !important;
	}

.colorOrange {
	padding: 0px 0px 0px 20px;
	background-color: #f74101 !important;	
	}

.colorOrange.pa2 p,
.colorOrange.pa2 ul,
.colorOrange.pa2 ul>li {
	padding: 2px 0px 2px 20px;
	color: #ffffff !important;
	}

.colorRasberry {
	padding: 0px 0px 0px 20px;
	background-color: #ed1c24 !important;	
	}

.colorRasberry.pa2 p,
.colorRasberry.pa2 ul,
.colorRasberry.pa2 ul>li {
	padding: 2px 0px 2px 20px;
	color: #ffffff !important;
	}

.colorLemon {
	padding: 0px 0px 0px 20px;
	background-color: #ffb200 !important;
	}

.colorLemon.pa2 p,
.colorLemon.pa2 ul,
.colorLemon.pa2 ul>li {
	padding: 2px 0px 2px 20px;
	color: #ffffff !important;
	}

.colorBlue {
	padding: 0px 0px 0px 20px;
	background-color: #0c36ac !important;
	}

.colorPurple {
	padding: 0px 0px 0px 20px;
	background-color: #785b7d !important;
	}

.colorBrown {
	padding: 0px 0px 0px 20px;
	background-color: #744e48 !important;
	}	
	
.colorBlue.pa2 p,
.colorBlue.pa2 ul,
.colorBlue.pa2 ul>li {
	padding: 2px 0px 2px 20px;
	color: #ffffff !important;
	}

.colorRed {
	padding: 0px 0px 0px 20px;
	background-color: #e81530 !important;
	}

.colorRed.pa2 p,
.colorRed.pa2 ul,
.colorRed.pa2 ul>li {
	padding: 2px 0px 2px 20px;
	color: #ffffff !important;
	}

.colorStrawberry {
	padding: 0px 0px 0px 20px;
	background-color: #c60d12 !important;
	}

.colorStrawberry.pa2 p,
.colorStrawberry.pa2 ul,
.colorStrawberry.pa2 ul>li {
	padding: 2px 0px 2px 20px;
	color: #ffffff !important;
	}

.colorPragaSugar {
	padding: 0px 0px 0px 20px;
	background-color: #FFDA00 !important;
	}

/* CARUSEL */
.carousel-control.left,
.carousel-control.right {
	background: none !important;
	}

.carousel-control {
    width: 2% !important;
	}

.carousel-inner {
    top: -9px;
	}

.carousel-indicators li {
    border: 2px solid #63635f !important;
	}

.carousel-indicators .active {
    background-color: #a8a8a1 !important;
    }

.carousel-inner>.item img {
    margin: 0 auto;
    text-align: center;
    }

.Page {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    max-width: 1024px;
    color: #262425;
    padding-top: 20px;
    padding-bottom: 20px;
	}

.pageBottom {
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    color: #262425;
	}

.Page h1.tc,
.Page h2.tc {
	font-size: 40px;
	text-align: center;
	}

.Page h1.tc {
	padding-top: 20px;
    padding-bottom: 20px;
	}

.Page h3.tc {
	font-size: 25px;
	text-align: center;
	padding-top: 20px;
    padding-bottom: 20px;
	}

.Page h3.center {
	font-size: 30px;
	text-align: center;
	padding-top: 20px;
    padding-bottom: 20px;
	}

.Page p {
	font-size: 20px;
	color: #595959;
	line-height: 3.0rem;
	}

.Page .lightstramberry p,
.Page .lightstramberry ul,
.Page .lightstramberry ul>li,

.Page .lightRasberry p,
.Page .lightRasberry ul,
.Page .lightRasberry ul>li,

.Page .lightOrange p,
.Page .lightOrange ul,
.Page .lightOrange ul>li,

.Page .lightlemon p,
.Page .lightlemon ul,
.Page .lightlemon ul>li,

.Page .darkGreen p,
.Page .darkGreen ul,
.Page .darkGreen ul>li,

.Page .lightRed p,
.Page .lightRed ul,
.Page .lightRed ul>li,

.Page .lightBlue p,
.Page .lightBlue ul,
.Page .lightBlue ul>li {
	font-size: 18px;
	color: #ffffff;
	line-height: 3.0rem;
	}

.Page ul {
	font-size: 18px;
	color: #595959;
	line-height: 3.0rem;
	}

.Page ul>li {
	font-size: 18px;
	color: #595959;
	line-height: 3.0rem;
	}

.Page.Claim h2 {
	font-size: 40px;
	color: #ffffff;
	line-height: 4.8rem;
	}

.Page.Claim p {
	font-size: 20px;
	color: #ffffff;
	line-height: 3.0rem;
	}

.mt15 { margin-top: 15px; }
.mt40 { margin-top: 0px; }
.mt100 { margin-top: 100px; }

.ml40 { margin-left: 40px; }
.ml50 { margin-left: 50px; }

img.logotyp {}

/* HEADER */
div.header.border {
	position: fixed;
	top: 0px;
	z-index: 999 !important;

	width: 100%;
	margin: 0 auto;
	border-bottom: 1px solid #e3ddde;
	background-color: #ffffff;
	}

section.menu {
	width: 100%;
	margin: 0 auto;
	}

/* MENU */
ul.menu {
    font-weight: 600;
    width: auto;
    float: right;
    }

ul.menu li {
    margin-top: 25px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 25px;
    width: auto;
    display: block;
    float: left;
	}

ul.menu li {
	color: #e9f564;
	text-decoration: none;
	font-weight: 100;
	}

ul.menu li a,
ul.menu li a:hover {
	text-decoration: none;
	font-size: 18px;
	font-weight: 100;
	}

div.Page.topMenu a:hover {
	color: #e9f564;
	text-decoration: none;
	font-weight: 100;
	}

/* DROPDOWN */
/* Style The Dropdown Button */
.dropbtn {
    border: none;
    cursor: pointer;
	}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
	}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    color: #ffffff;
    background-color: #456b05;
    min-width: 160px;
    z-index: 1;
	}

/* Links inside the dropdown */
.dropdown-content a {
    color: #ffffff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
	}

.dropdown-content a:active {
	color: #ffffff;
	background-color: #456b05;
	}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
	color: #ffffff;
	background-color: #456b05;
	}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
	}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
	}

/* CLAIM */
div.Page.Claim {
	color: #595959;
	background-image: url("../img/Claim.jpg");
	width: 100%;
	height: auto; /* <- originaly = 307px*/
	}

/* CONTENT */
p.breadcrumbs {
	font-size: 14px;
	text-align: left;
	}

p.breadcrumbs a,
p.breadcrumbs a:hover
p.breadcrumbs a:active {
	text-decoration: none;
	}

ul>li,
div.Page.Home.Content ul>li {
	font-size: 18px;
	list-style-image: url(../img/li.jpg);
	line-height: 3.0rem;
	padding-left: 30px;
    margin-bottom: 5px;
	}

div.Page.Content li {
	color: #4b4b4b;
	line-height: 3.0rem;
    margin-bottom: 5px;
	}

img.flower {
    position: absolute;
    bottom: -50px;
    right: 680px;
	}

/* FOOTER */
div.pageBottom.bottomMenu {
    color: #5b5b5b;
    background-color: #ececec;
    border-top: 1px solid #e3ddde;
    width: 100%;
    height: 240px;
    }

div.pageBottom.bottomMenu li {
	display: block;
    float: left;  
    font-size: 12px;
    font-weight: 100;
    margin: 0px 0px;
    line-height: 2.8rem;
	}

div.pageBottom.bottomMenu p.footer {
	margin: 0 auto;
	padding-top: 40px;
	}

div.pageBottom.bottomMenu ul.menu {
	font-size: 14px;
	margin-top: 40px;
	margin-right: 30px;
	}

div.pageBottom.bottomMenu ul.menu li {
	color: #5b5b5b;
	}

div.pageBottom.bottomMenu a,
div.pageBottom.bottomMenu a:hover {
	color: #5b5b5b;
	text-decoration: none;
	font-weight: 100;
	}

div.pageBottom.bottomMenu a:hover {
	color: #131212;
	text-decoration: none;
	font-weight: 600;
	}

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border: 1px solid #426a05;
    padding: 5px 10px;
	}

/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 360px;
    background-color: #426a05;
    opacity: 0.9;
    color: #fff;
    text-align: center;
    padding: 20px 20px;
    margin-left: 40px;
    border-radius: 0;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
	}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
	}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {
  /* Navbar positioning foo */
  .navbar-wrapper {
    margin-top: 20px;
  }
  .navbar-wrapper .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  .navbar-wrapper .navbar {
    padding-right: 0;
    padding-left: 0;
  }

  /* The navbar becomes detached from the top, so we round the corners */
  .navbar-wrapper .navbar {
    border-radius: 4px;
  }

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}

/* MENU */
.menu-on {
	background-color: #456b05;
	color: #fff;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 1001;
	padding: 22px 46px 22px;
	}

.menu-off {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: none;
	}

nav.primary-nav {
	background-color: #456b05;
	position: fixed;
	right: 0;
	top: 0;
	min-width: 200px;
	z-index: 1002;
	display: none;
	}

nav.primary-nav a {
	color: #fff;
	display: block;
	padding: 5px 10px;
	}

nav.primary-nav li {
	list-style-type: none;
	padding-top: 10px;
	padding-bottom: 10px;
	}

#toggle-menu {
	display: none;
	}

#toggle-menu:checked ~ nav.primary-nav {
	display: block;
	} 

#toggle-menu:checked ~ .menu-off {
	display: block;
	}

/* POPUP*/
.box {
	}

.button {
    font-size: 18px;
    padding: 10px 20px;
    color: #426a05;
    border: 2px solid #426a05;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease-out;
	}

.button:hover {
	color: #ffffff;
	background: #426a05;
	}

.overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	transition: opacity 500ms;
	visibility: hidden;
	opacity: 0;
	z-index: 999;
	}

.overlay:target {
	visibility: visible;
	opacity: 1;
	}

.popup {
	margin: 150px auto;
	padding: 20px;
	background: #fff;
	border-radius: 1px;
	width: 30%;
	max-height: 600px;
	position: relative;
	transition: all 5s ease-in-out;
	overflow-x: hidden;
    overflow-y: overlay;
	}

.popup h2 {
	margin-top: 0;
	color: #333;
	font-family: Tahoma, Arial, sans-serif;
	}

.popup .close {
	position: absolute;
	top: 20px;
	right: 30px;
	transition: all 200ms;
	font-size: 30px;
	font-weight: bold;
	text-decoration: none;
	color: #333;
	}

.popup .close:hover {
	color: #06D85F;
	}

.popup .content {
	max-height: 40%;
	overflow: auto;
	}

@media screen and (max-width: 700px){
	.box{
		width: 100%;
		}

	.popup{
		width: 70%;
		}
	}

/* RESPONZIVE*/
@media screen and (min-width: 800px) {
	.menu-on, .menu-off {
		display: none;
		}
  
	nav.primary-nav {
		display: block;
		position: static;
		}
  
	nav.primary-nav a {
		display: inline-block;
		}  
	}


@media screen and (min-width: 800px) {
	.menu-on, .menu-off {
		display: none;
		}
  
	nav.primary-nav {
		display: block;
		position: static;
		}
  
	nav.primary-nav a {
		display: inline-block;
		}
	}


/* RESPONZIVE PAGE */
@media screen and (min-width: 800px) {
	div.page.menuMobile {
		display: none;
		}
	}

@media screen and (max-width: 1000px) {
	img.flower {
		display: none;
		}
	}

@media screen and (max-width: 800px) {
	section.menu {
		width: 80%;
		}

	img.logotyp {
		margin-left: -50px;
    	width: 160px;
		}

	ul.menu {
		display: none;
		}

	div.tooltip {
		display: none;
		}

	ul {
		margin-left: 0px !important;
		}

	div.fl.w-80.footer {
		width: 100% !important;
		}

	div.Page.bottomMenu p.footer {
    	float: none;
    	width: auto;
    	text-align: center;
    	margin: 0px;
    	padding: 0px;
    	}

	div.pageBottom.bottomMenu img.logotyp {
		display: none;
		}

    div.pageBottom.bottomMenu p.footer {
		margin: 0 auto;
		text-align: center;
		padding-top: 40px;
		}
	}

@media screen and (max-width: 770px) {
	div.fl.w-40.pa2,
	div.fl.w-30.pa1 {
		width: auto;
		margin-left: 40px;
		margin-right: 40px;
		}
	}

@media screen and (max-width: 400px) {
	div.Page.pt3.pb2.content .fl.w-40,
	div.Page.pt3.pb2.content .fl.w-60 {
		width: 100% !important;
		float: none !important;
		}
	img.piktogram{
		padding-top: 10px;
		width: 833px;
		height: auto;
	}
	}

.pozvankadubai{
	width: 650px;
	height: auto;
	border: 1px black solid;
}

.piktogram{
	padding-top: 10px;
	height: auto;
	width: 833px;
}

.piktogramdetail{
	width: 300px;
	height: auto;
}