* { box-sizing: border-box; font-family: "Open Sans", Arial, sans-serif; font-weight: 400; font-style: normal; }
*:focus { outline: none; }

a {
    -webkit-transition: all 100ms ease-in-out;
    -moz-transition: all 100ms ease-in-out;
    -o-transition: all 100ms ease-in-out;
    -ms-transition: all 100ms ease-in-out;
    transition: all 100ms ease-in-out;
}
nav {
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}
.boxes .box {
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}

html, body { margin: 0px; padding: 0px; }

header { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 9999; }
header .logo { background: url('images/idea-logo.svg') no-repeat; background-size: contain; width: 200px; height: 40px; background-position-y: 5px; margin: 20px 0px; overflow: hidden; float: left; text-indent: -9999px; }
header .top-header { background: #4c4c4c; }
header .top-header ul { float: left; margin: 0px 0px 0px 80px; padding: 28px 0px; list-style: none; }
header .top-header ul li { display: inline-block; margin: 0px 10px; }
header .top-header ul li a { color: #fff; text-decoration: none; font-weight: 600;text-transform: uppercase; }
header .top-header ul li a:hover { color: #38AA34; }
header .top-header .info-tel { margin-top: 18px; }
header .top-header .info-tel > div { float: left; }
header .top-header .info-tel svg { float: left; margin-left: 10px; fill: #938f8e; }
header .top-header .info-tel a { color: #938f8e; font-weight: bold; }
header .top-header .info-tel p { color: #938f8e; }
header .bottom-header { background: #38AA34; }
header .bottom-header nav ul { margin: 0px; padding: 0px; list-style: none; }
header .bottom-header nav ul::-webkit-scrollbar { display: none; }
header .bottom-header nav ul li a span { position: relative; top: -4px; margin-right: 4px; width: 12px; height: 2px; background: #fff; display: inline-block; }
header .bottom-header nav ul li a span:before,
header .bottom-header nav ul li a span:after { content: ''; position: absolute; width: 100%; height: 2px; background: #fff; }
header .bottom-header nav ul li a span:before { top: -4px; }
header .bottom-header nav ul li a span:after { top: 4px; }
header .bottom-header nav ul li a.category-button { width: 270px; background: #359c31; }
header .bottom-header nav > ul > li { float: left; }
header .bottom-header nav > ul > li > a { text-transform: uppercase; font-weight: 300; font-size: 0.9em; text-decoration: none; display: inline-block; color: #fff; padding: 14px 20px; }
header .bottom-header nav > ul > li > a:hover { background: #359c31; }
header .bottom-header nav > ul > li > ul { display: none; position: absolute; left: 15px; width: 270px; background: #fff; -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.1); box-shadow: 0px 0px 10px rgba(0,0,0,0.1); }
header .bottom-header nav > ul > li > ul li { position: relative; }
header .bottom-header nav > ul > li > ul > li:first-child { display: none; }
header .bottom-header nav > ul > li > ul li a { text-decoration: none; padding: 10px 20px; display: block; color: #282828; border-bottom: 1px solid #e9ebf4; }
header .bottom-header nav > ul > li > ul li a i { font-size: 12px; float: right; margin-top: 4px; color: #b8bcc5; }
header .bottom-header nav > ul > li > ul li a:hover { background: #ededed; }
header .bottom-header nav > ul > li > ul li:last-child a { border-bottom: none; }
header .bottom-header nav > ul > li > ul > li > ul { display: none; position: absolute; width: 200px; border-left: 1px solid #e9ebf4; left: 270px; top: 0px; background: #fff; list-style: none; margin: 0px; padding: 0px; -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.1); -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.1); box-shadow: 0px 0px 10px rgba(0,0,0,0.1); }
header .mobile-menu-button { display: none; }

body { padding-top: 124px; background-color: #f7f8fb; }

.slick-slider { position: relative; margin-bottom: 0px!important; }
.slick-slider .slider-menu { z-index: 999; position: absolute; top: 0px; left: 15px; margin: 0px; padding: 0px; list-style: none; background: #fff; width: 270px; }
.slick-slider .slider-menu li { position: relative; }
.slick-slider .slider-menu li a { text-decoration: none; padding: 10px 20px; display: block; color: #282828; border-bottom: 1px solid #e9ebf4; }
.slick-slider .slider-menu li a i { font-size: 12px; float: right; margin-top: 4px; color: #b8bcc5; }
.slick-slider .slider-menu li a:hover { background: #ededed; }
.slick-slider .slider-menu li:last-child a { border-bottom: none; }
.slick-slider .slider-menu > li > ul { display: none; position: absolute; width: 200px; border-left: 1px solid #e9ebf4; left: 270px; top: 0px; background: #fff; list-style: none; margin: 0px; padding: 0px; }

.slick-slider .slide { position: relative; height: 610px; }
.slick-slider .slide:after { content: ''; z-index: -1; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background-size: cover; background-repeat: no-repeat; }
.slick-slider .slide1:after { background-image: url('images/slide3.jpg'); }
.slick-slider .slide2:after { background-image: url('images/slide2.jpg'); }
.slick-slider .slide3:after { background-image: url('images/slide1.jpg'); }
.slick-slider .slide-content { padding: 100px 0px 0px 300px; color: #fff; }
.slick-slider .slide-content h1 { text-transform: uppercase; font-size: 2.2em; font-weight: bold; }
.slick-slider .slide-content p { font-weight: 300; }
.slick-slider .slide-content a { display: inline-block; text-decoration: none; margin-top: 10px; background: #38AA34; font-size: 0.9em; border-radius: 50px; padding: 12px 24px; color: #fff; text-transform: uppercase; }
.slick-slider .slide-content a:hover { background: #4c4c4c; }
.slick-slider .controls { position: absolute; left: 0px; bottom: 170px; right: 0px; z-index: 99; }
.slick-slider .controls a { float: right; color: #fff; display: inline-block; margin: 0px 8px; font-size: 12px; height: 14px; position: relative; top: 6px; }
.slick-slider .controls .slick-dots { position: static; margin-right: 10px; float: right; display: inline-block!important; width: auto; }
.slick-slider .controls .slick-dots li { width: auto; margin: 0px 3px; }
.slick-slider .controls .slick-dots li.slick-active button { background: #38AA34; width: 15px; }
.slick-slider .controls .slick-dots li button { background: #fff; width: 6px; height: 6px; margin: 0px; display: inline-block; padding: 0px; border-radius: 8px; }
.slick-slider .controls .slick-dots li button:before { display: none; }

.slick-slider .bottom-overlay { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 200px; background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(0,0,0,1) 100%); background: -webkit-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(0,0,0,1) 100%); background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#000000',GradientType=0 ); }

.features { margin-top: -130px; }
.features svg { float: left; fill: #fff; width: 40px; height: 40px; }
.features .feature-content { padding-left: 10px; float: left; width: calc(100% - 50px); }
.features .feature-content a { display: inline-block; margin-bottom: 10px; color: #fff; }
.features .feature-content p { color: #9c9c9c; font-size: 0.9em; }

.boxes { padding-top: 25px; padding-bottom: 25px; }
.boxes .box { margin: 10px 0px; position: static; float: none; margin-right: -4px; }
.boxes .box > a { position: relative; display: inline-block; width: 100%; }
.boxes .box > a > div { overflow: hidden; border-radius: 4px; }
.boxes .box > a > div:before { content: ''; background-repeat: no-repeat; background-size: cover; background-position: center center; display: block; padding-bottom: 37%; }
.boxes .box.small > a > div:before { padding-bottom: 100%; }
.boxes .box p { color: #fff; text-transform: uppercase; font-size: 1.2em; position: absolute; bottom: 0px; margin-bottom: 20px; padding: 0px 20px; z-index: 9; }
.boxes .bottom-overlay { border-radius: 4px; position: absolute; left: 0px; right: 0px; bottom: 0px; height: 100px; background: -moz-linear-gradient(top, rgba(30,87,153,0) 0%, rgba(0,0,0,1) 100%); background: -webkit-linear-gradient(top, rgba(30,87,153,0) 0%,rgba(0,0,0,1) 100%); background: linear-gradient(to bottom, rgba(30,87,153,0) 0%,rgba(0,0,0,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#000000',GradientType=0 ); }
.boxes .organsko > div:before { background-image: url('images/organsko.jpg'); }
.boxes .integralno > div:before { background-image: url('images/integralno.jpg'); }
.boxes .bez-secera > div:before { background-image: url('images/bez_secera.jpg'); }
.boxes .gluten > div:before { background-image: url('images/gluten.jpg'); }
.boxes .eko > div:before { background-image: url('images/eko.jpg'); }
.boxes .namirnice > div:before { background-image: url('images/namirnice.jpg'); }
.boxes .napitci > div:before { background-image: url('images/napici.jpg'); }
.boxes .sokovi > div:before { background-image: url('images/sokovi.jpg'); }
.boxes .kruhnamazi > div:before { background-image: url('images/kruhnamazi.jpg'); }
.boxes .muesli > div:before { background-image: url('images/muesli.jpg'); }
.boxes .slatkisi > div:before { background-image: url('images/slatkisi.jpg'); }
.boxes .suhovoce > div:before { background-image: url('images/suhovoce.jpg'); }
.boxes .jogurt > div:before { background-image: url('images/jogurt.jpg'); }
.boxes .kava > div:before { background-image: url('images/kava.jpg'); }
.boxes .vitamini > div:before { background-image: url('images/vitamini.jpg'); }

.boxes .box .og-expander { left: 17px; right: 13px; width: auto; border-radius: 4px; }
.boxes .box .og-expander p { position: static; color: #282828; padding: 0px; text-transform: none; }

.boxes .banner { position: relative; margin-top: 15px; overflow: hidden; display: inline-block; width: 100%; background-color: #000; border-radius: 4px; overflow: hidden; }
.boxes .banner:before { content: ''; height: 320px; background-image: url('images/banner.jpg'); opacity: 0.5; background-repeat: no-repeat; background-size: cover; background-position: center center; display: block; }
.boxes .banner .content { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; padding: 0px 15px; }
.boxes .banner .content h2 { margin: 100px 0px 20px 0px; color: #fff; text-transform: uppercase; font-weight: bold; }
.boxes .banner .content p { position: static; font-weight: 300; text-transform: none; padding: 0px; font-size: 1.1em; }
.boxes .banner .content a { background: #38AA34; display: inline-block; border-radius: 50px; padding: 12px 24px; font-size: 0.9em; color: #fff; text-transform: uppercase; text-decoration: none; }
.boxes .banner .content a:hover { background: #4c4c4c; }

.og-grid { list-style: none; margin: 0px; padding: 0px; float: left; width: 100%; }

footer { width: 100%; background: #4c4c4c; padding: 30px 0px 50px 0px; }
footer .footer-logo { width: 230px; float: left; padding-left: 15px; padding-right: 15px; }
footer .rest-of-footer { width: calc(100% - 230px); float: left; padding-left: 15px; padding-right: 15px; }
footer .logo { background: url('images/gray-idea-logo.00e1ee87.svg') no-repeat; background-size: contain; width: 200px; height: 40px; overflow: hidden; float: left; text-indent: -9999px; }
footer .text-right a { font-weight: bold; font-size: 1.2em; }
footer .text-right p { color: #9D9D9D; }
footer .text-right svg { float: left; margin-left: 10px; fill: #938f8e; }
footer .text-right > div { float: left; }
footer .app-icons { margin-top: 15px; }
footer h3 { color: #9D9D9D; margin: 0px 0px 20px 0px; font-size: 1.3em; font-weight: bold; }
footer a { display: block; color: #9D9D9D; }
footer a:hover { color: #38AA34; }
footer .footer-cards { float: right; width: 100%; }
footer .footer-cards a { display: inline-block; }
footer .footer-cards img { display: inline-block; width: 70px; margin: 20px 10px 0px 10px; }

@media screen and (max-width: 991px) {
    footer { position: relative; }
    footer .footer-logo,
    footer .rest-of-footer { width: 100%; }
    footer .logo { float: none; margin: 0 auto; width: 200px; }
    footer h3 { text-align: center; float: none; clear: both; margin-top: 30px; }
    footer a { text-align: center; }
    footer .footer-cards { text-align: center; }
    footer .footer-cards a { float: none; display: inline-block; }
    footer .footer-cards img { display: inline-block; float: none; }
    footer .text-right .info-tel { float: none!important; display: block; width: 190px; margin: 0 auto; }
    footer .text-right .info-tel > div { text-align: center; margin-top: 30px; }
    footer .text-right .info-tel svg { margin-top: 30px; }
}

@media screen and (max-width: 991px) {
    .slider-menu { display: none; }

    .slick-slider .slide { height: 420px; }
    .slick-slider .slide-content { padding: 0px 0px 0px 280px; max-width: 540px; }
    .slick-slider .controls { bottom: 190px; }
    .slick-slider .bottom-overlay { height: 300px; }

    .features { margin-top: -170px; }
}

@media screen and (max-width: 767px) {
    body { padding-top: 62px; }
    .body-hider { display: none; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background: rgba(0, 0, 0, 0.5); z-index: 99; }

    header .logo { float: none; margin: 12px auto; display: block; }
    header .bottom-header { background: transparent; }
    header .bottom-header nav { background: #fff; position: fixed; top: 0px; bottom: 0px; left: 0px; width: 280px; overflow: scroll; z-index: 99999; -webkit-transform: translateX(-280px); -moz-transform: translateX(-280px); transform: translateX(-280px); }
    header .bottom-header nav.open { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); transform: translateX(0px); }
    header .bottom-header nav ul li { display: block; width: 100%; }
    header .bottom-header nav ul li a { display: block; font-weight: normal; font-size: 1em; color: #282828; text-transform: uppercase; border-bottom: 1px solid #e9ebf4; }
    header .bottom-header nav ul li a i { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); }
    header .bottom-header nav ul li a i.rotated { -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); }
    header .bottom-header nav ul li ul { width: auto; display: block; position: static; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
    header .bottom-header nav > ul > li > ul li:last-child a { border-bottom: 1px solid #e9ebf4; }
    header .bottom-header nav > ul > li > ul li a:hover { background: #fff; }
    header .bottom-header nav > ul > li > ul > li:first-child { display: block; }
    header .bottom-header nav > ul > li > ul > li:first-child a { font-size: 1.1em; font-weight: bold; }
    header .bottom-header nav > ul > li > ul > li:first-child a i { float: none; color: #E3000F; font-size: 1.1em; margin-right: 8px; }
    header .bottom-header nav > ul > li > ul > li > ul { background: #f7f7f7;  position: static; width: 100%; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
    header .bottom-header nav > ul > li > ul > li > ul > li > a { color: #8b8b8b; }
    header .mobile-menu-button { display: block; width: 20px; height: 2px; background: #fff; position: fixed; top: 28px; left: 15px; text-indent: -9999px; }
    header .mobile-menu-button:before,
    header .mobile-menu-button:after { content: ''; display: block; height: 2px; position: absolute; left: 0px; right: 0px; }
    header .mobile-menu-button:before { background: #fff; top: 6px; }
    header .mobile-menu-button:after { background: #fff; top: -6px; }

    .slick-slider { z-index: 9; }
    .slick-slider .slides { padding: 15px; }
    .slick-slider .slick-track { background: #000; }
    .slick-slider .slide { height: 220px; }
    .slick-slider .slide:after { opacity: 0.7; }
    .slick-slider .slide-content { padding: 0px; }
    .slick-slider .controls { bottom: 51px; right: 15px; width: 120px; left: inherit; }
    .slick-slider .controls .slick-dots { display: none!important; }

    .features { margin-top: 15px; }
    .features svg { fill: #282828; }
    .features .feature { margin: 10px 0px; }
    .features .feature-content { width: 100%; margin-top: 8px; padding-left: 0px; }
    .features .feature-content a,
    .features .feature-content p { color: #282828; }

    .boxes { padding-top: 0px; padding-bottom: 15px; }
    .boxes .bottom-overlay { height: 70px; }
    .boxes .box { margin-top: 4px; margin-bottom: 4px; }
    .boxes .box.small:nth-child(odd) { padding-right: 5px; }
    .boxes .box.small:nth-child(even) { padding-left: 5px; }
}

@media screen and (min-width: 768px) {
    header .bottom-header nav > ul > li > ul li:hover a + ul { display: block; }

    .slick-slider .slider-menu li:hover a + ul { display: block; }
}


/* Custom, iPhone Retina */ 
@media only screen and (min-width : 320px) {
	.slick-slider .slide-content a {
		padding: 5px 15px;
		margin-top: 0px;
	}

	.features .feature-content {
		width: calc(100% - 50px);
		margin-top: 0px;
		padding-left: 10px;
	}
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
	.slick-slider .slide-content a {
		padding: 5px 15px;
		margin-top: 0px;
	}

	.features .feature-content {
		width: calc(100% - 50px);
		margin-top: 0px;
		padding-left: 10px;
	}

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
	.slick-slider .slide-content a {
		padding: 12px 24px;
		margin-top: 10px;
	}
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
	.slick-slider .slide-content a {
		padding: 12px 24px;
		margin-top: 10px;
	}
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
	.slick-slider .slide-content a {
		padding: 12px 24px;
		margin-top: 10px;
	}
}