/* ---------->>> CSS OVERVIEW <<<-----------*/
/* grid of project: 5px
	button, link: #D1E751 
	dark ui: #26ADE4; 
	bright ui: #4DBCE9;
	text: black;
	background: white;
*/

/* ---------->>> RESET <<<-----------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; font-weight:normal; }
b, strong {font-weight:bold;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
html { font-size: 100.01%; }

@font-face {
    font-family: 'icons';
    src: url('/imgs/fonts/icons.eot');
    src: url('/imgs/fonts/icons.eot') format('embedded-opentype'),
         url('/imgs/fonts/icons.woff') format('woff'),
         url('/imgs/fonts/icons.ttf') format('truetype'),
         url('/imgs/fonts/icons.svg#icons') format('svg');
}

/* ---------->>> STYLES <<<-----------*/
body { font-size: 62.5%; color: #222; background: #363636;  font-family: Oxygen,Arial, Helvetica, sans-serif;}  /* 1EM = 10px */

input {}
a { color:#363636;text-decoration:underline; }
a img { border:none; }
a:hover {text-decoration:none;}

.cl { clear:both; line-height:1px; font-size:1px; margin-top:-1px; height:0px; }
.fl { float:left; }
.fr { float:right; }

.centerContainer {width:990px;margin:0 auto;}

#header {background:#363636;}
#header #logo a {display:block;width:183px;height:90px;margin: 13px 0;float:left;background: url('/imgs/chilli/logo.png') no-repeat;}
#header #logo a span {display:none;}
#header #menu {float:right;width:780px;text-align:right;}
#header #menu li {display:inline-block;}
#header #menu a {padding:49px 10px;text-decoration:none;color:#fff;position:relative;display:block;font-size:1.9em;text-transform:uppercase;overflow: hidden;}
#header #menu a .text {position:relative;z-index:3;  font-weight:300; }
#header #menu a .bg-top,
#header #menu a .bg-bottom{position:absolute;top:0px;display: inline-block;height: 100%;width: 0;background: #565656; transition:width 0.3s;}
#header #menu a .bg-top{left:50%;}
#header #menu a .bg-bottom{right:50%}
#header #menu a:hover .bg-top,
#header #menu a:hover .bg-bottom{width:170px;}
#header #menu a.active .bg-top,
#header #menu a.active:hover .bg-top,
#header #menu a.active .bg-bottom,
#header #menu a.active:hover .bg-bottom{width:170px;}

#content {font-size:1.4em;background:#fff;}
#content #index_groups{padding-bottom:30px}
#content #index_groups .group {float:left;width:330px;}
#content #index_groups .group ul.sub {width:290px; margin-left:15px;}
#content #index_groups .group ul.sub li {line-height: 170%; list-style: disc inside none;}
#content #index_groups .group .top {height:456px;position:relative;margin-bottom:10px;}
#content #index_groups .group .top .container {width:330px;position:absolute;bottom:0;overflow:hidden;}
#content #index_groups .group .top .container.open {cursor:pointer}
#content #index_groups .group .top .container a.more {padding:10px 0;font-size:1.286em;display:block;text-align:center;text-decoration:none;color:#fff;text-transform:uppercase;}
#content #index_groups .group .top .container a.more:hover {text-decoration:none;}
#content #index_groups .group .top .headline {padding:29px 0;/*transition: background 0.5s;*/}
#content #index_groups .group .top .headline h3{/*transition: color 0.3s;*/color:#fff;font-size:1.714em;text-transform:uppercase;}
#content #index_groups .group .top .headline p{margin-top:5px;font-size:0.928em;}
#content #index_groups .group .top .slide {background:rgba(255, 255, 255, 0.9) !important;}
#content #index_groups .group .top .slide .slide-content {padding: 0 20px;}
#content #index_groups .group .top .slide .slide-content p {margin-bottom:20px;}
/*#content #index_groups .group .top:hover .headline {background:rgba(255, 255, 255, 0.9) !important;}*/
/*#content #index_groups .group .top:hover .headline h3 {color:#000;}*/
#content #index_groups #group2 li {color:#F1BE15}
#content #index_groups #group3 li {color:#66C671}
#content #index_groups #group4 li {color:#DB3D36}
#content #index_groups #group2 .top{background: url('/imgs/chilli/uvod_foto1.jpg') no-repeat;}
#content #index_groups #group3 .top{background: url('/imgs/chilli/uvod_foto2.jpg') no-repeat;}
#content #index_groups #group4 .top{background: url('/imgs/chilli/uvod_foto3.jpg') no-repeat;}
#content #index_groups #group2 .top .headline{background-color:rgba(244, 203, 68, 0.8);}
#content #index_groups #group3 .top .headline{background-color:rgba(148, 215, 155, 0.8);}
#content #index_groups #group4 .top .headline{background-color:rgba(230, 119, 114, 0.8);}
#content #index_groups #group2 .top .container a.more{background:#f4cb44;}
#content #index_groups #group3 .top .container a.more{background:#94d79b;}
#content #index_groups #group4 .top .container a.more{background:#e67772;}

#content h1 {background: #F1BE15;color:#fff;text-transform: uppercase;padding: 25px 20px 20px;font-size:2em;}
#content h1 span.small-description {color:#000;display:block;text-transform:none;font-size:0.504em;margin-top:5px;}

#content #html{}
#content .annotation{font-size:1.286em; font-style: italic; line-height:1.4; padding-bottom:10px;}
    #content #html a.backToServices {float:right;margin-top:20px;margin-right:20px;color:#fff;text-transform: uppercase;position:relative;z-index:5;}
#content #html .html-content {padding:20px 20px;}
#content #html .html-content h2 {font-size:1.214em;text-transform:uppercase;margin-top:20px;}
#content #html .html-content h3 {text-transform:uppercase;margin-top:20px;}
#content #html .html-content p {margin: 10px 0;}
#content #html .html-content ul {list-style:disc;margin-left:15px;}
#content #html .html-content li {margin:5px 0;}
#content #html .html-content table {width:100%;margin-bottom:20px;}
#content #html .html-content table td {text-align:left;width:50%;vertical-align:top;}
#content #html .html-content .floatBoxRight {float:right;width:300px;margin-left:30px;margin-bottom:20px;}
#content #html .html-content .floatBoxRight h2:first-child {margin-top:0;}

.section-image{width:469px; min-height:300px;}

#moreservices {background:#F1BE15;padding:20px;}
#moreservices p {margin-bottom:15px;text-transform:uppercase;font-size:1.2138em;}
#moreservices li {margin-bottom:8px;width:400px;float:left;color:#fff}
#moreservices li a {color:#fff}
#moreservices li.actual:before {content: '> ';}

#blog-list {}
#blog-list .blog-item {float:left;border:2px solid #F5F5F5;border-top-color: #F1BE15;width:465px;margin-bottom:40px;}
#blog-list .blog-item h3 a {font-size:1.428em;text-transform:uppercase;text-decoration:none;background:#F5F5F5;display:block;padding: 12px 20px;}
#blog-list .blog-item .blog-item-content {padding:10px 20px;}
#blog-list .blog-item .blog-item-more {display:block;text-align:right;margin-top:0px;}
#blog-list .blog-item .blog-item-more a {text-transform:uppercase;text-decoration:none;color:#F1BE15;}
#blog-list .blog-item.odd {float:right;}
#blog-list .blog-item:hover {border-color:#F1BE15;cursor:pointer;}
#blog-list .blog-item:hover h3 a {background:#F1BE15;color:#fff;}
#blog-list #blog-list-anotace {margin:20px 0 25px; line-height: 1.4; font-size:1.286em;}
#blog-list #blog-list-anotace table td {width:465px;padding-left:56px;}
#blog-list #blog-list-anotace table td:first-child {padding-left:0px;}

#footer {font-size:1.2em;color:#fff;background:#363636;}
#footer a.logo-small-white {display:block;float:left;margin:14px 10px 14px 0;width:82px;height:40px;background:url('/imgs/chilli/logo-small-white.png') no-repeat;}
#footer a.logo-small-white span {display:none;}
#footer #footerText{float:left;margin-top:10px;margin-left:40px;}
#footer #footerText td{width: 330px;}
#footer #copyright{float:right;line-height:68px;}

/*icons classes*/
.ico-administrativa:before,
.ico-itservis:before,
.ico-technickyservis:before
{font-family: icons;margin-right:20px;}
.ico-technickyservis:before {content: '';}
.ico-administrativa:before {content: ''}
.ico-itservis:before {content: '';left:-10px;position:absolute;font-size:2.2em;top:-17px;}
.ico-itservis{
	padding-left:97px !important;position:relative;
}
.top .ico-itservis{
	padding-left:85px !important;
}
#blog-list {padding-bottom:40px;}
#content #blog-list .ico-itservis:before,
#content #html .ico-itservis:before{
	left:12px;top:11px;
}

#gallery{margin-top:40px;}
.galleryItem{ float:left; width:310px; height:220px; }
.galleryItem a{ width:290px; height:200px; display:block; overflow: hidden;}

.group .ico-technickyservis:before,
.group .ico-administrativa:before,
.group .ico-itservis:before 
{margin-left:20px;margin-right:10px;}
.group .ico-itservis:before {
	margin-left:30px;
}
.small-desc-administrativa
{margin-left:51px;}
.small-desc-itservis
{margin-left:/*55*/86px;}
.small-desc-technickyservis
{margin-left:60px;}
/*maly text pod H1*/
.ico-administrativa span
{margin-left:45px;}
.ico-itservis span
{margin-left:/*44*/0px;}
.ico-technickyservis span
{margin-left:51px;}

/*font-family: ComfortaaBold*/
#otherServices h3,
blog-list .blog-item h3 a,
#content #html .html-content h2,
#content b,#content strong,
#moreservices p,
#content #index_groups .group .top .container a.more
/*{font-family: ComfortaaBold,Arial, Helvetica, sans-serif;}*/
{font-weight:700;}

/*font-family: ComfortaaLight*/
#footer,
#content #index_groups .group .top .headline p,
#blog-list #blog-list-anotace
/*{font-family: ComfortaaLight,Arial, Helvetica, sans-serif;}*/
{font-weight:300;}

/*line-height*/
#blog-list #blog-list-anotace,
#blog-list .blog-item .blog-item-content,
#content #index_groups .group .top .slide .slide-content p,
#content #html .html-content,
#footer #footerText,
#blog-list .blog-item h3 a
{line-height:140%;}

/*zelena #66c671*/
#content.green h1,
.green #moreservices,
.green #blog-list .blog-item:hover h3 a
{background:#66c671}
#content.green  #blog-list .blog-item
{border-top-color:#66c671}
#content.green  #blog-list .blog-item .blog-item-more a
{color:#66c671}
.green #blog-list .blog-item:hover
{border-color:#66c671;}

/*cervena #db3d36*/
#content.red h1,
.red #moreservices,
.red #blog-list .blog-item:hover h3 a
{background:#db3d36}
#content.red  #blog-list .blog-item
{border-top-color:#db3d36}
#content.red  #blog-list .blog-item .blog-item-more a
{color:#db3d36}
.red #blog-list .blog-item:hover
{border-color:#db3d36;}

/*seda #F5F5F5*/
#content.gray h1
{background:#F5F5F5;color:#000;}
.gray #blog-list .blog-item:hover h3 a
{background:#DFDFDF;color:#000;}
.gray #blog-list .blog-item:hover
{border-color:#DFDFDF;}
#content.gray  #blog-list .blog-item
{border-top-color:#DFDFDF}
#content.gray  #blog-list .blog-item .blog-item-more a
{color:#000}