/********************************************************
* --- 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, img, ins, kbd, q, s, samp, small, strike, 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%;
	vertical-align: baseline;
	font-family: inherit;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
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; }



/********************************************************
* --- FONTS ---
********************************************************/

@font-face {
    font-family: 'latothin';
    src: url('../fonts/lato-thin.eot');
    src: url('../fonts/lato-thin.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-thin.woff2') format('woff2'),
         url('../fonts/lato-thin.woff') format('woff'),
         url('../fonts/lato-thin.ttf') format('truetype'),
         url('../fonts/lato-thin.svg#latothin') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'latolight';
    src: url('../fonts/lato-light.eot');
    src: url('../fonts/lato-light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-light.woff2') format('woff2'),
         url('../fonts/lato-light.woff') format('woff'),
         url('../fonts/lato-light.ttf') format('truetype'),
         url('../fonts/lato-light.svg#latolight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latoregular';
    src: url('../fonts/lato-regular.eot');
    src: url('../fonts/lato-regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-regular.woff2') format('woff2'),
         url('../fonts/lato-regular.woff') format('woff'),
         url('../fonts/lato-regular.ttf') format('truetype'),
         url('../fonts/lato-regular.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latosemibold';
    src: url('../fonts/lato-semibold.eot');
    src: url('../fonts/lato-semibold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lato-semibold.woff2') format('woff2'),
         url('../fonts/lato-semibold.woff') format('woff'),
         url('../fonts/lato-semibold.ttf') format('truetype'),
         url('../fonts/lato-semibold.svg#latosemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}



/********************************************************
* --- MAIN ---
********************************************************/

html { box-sizing: border-box; -webkit-font-smoothing: antialiased; }
*, *:before, *:after { box-sizing: inherit; }

body { color: #767676; font: 14px/24px 'latolight', sans-serif; }

h1 { font: 26px 'latolight', sans-serif; }

a, a:hover, a:focus { color: #8dc63f; -o-transition:.3s; -moz-transition:.3s; -webkit-transition:.3s; transition:.3s; text-decoration: none; }
img { max-width: 100%; height: auto; }



/********************************************************
* --- LAYOUT ---
********************************************************/

#top { margin: 50px 0 30px; }

#logo { float: left; }

#index-text-container { margin-bottom: 40px; }
#index-text-title { margin-bottom: 10px; color: #838383; font: 45px 'latolight', sans-serif; }
#index-text-title span:first-child { color: #000; }
#index-text-title span:last-child, .green { color: #8dc63f; }

#breadcrumb-container { background-color: #f8f8f8; margin-bottom: 40px; padding: 10px 40px; color: #8e8e8e; }
#breadcrumb-container h1 { color: #8dc63f; }
#breadcrumb-container a { color: #8e8e8e; }
#breadcrumb-container a:hover { color: #8dc63f; }

.page-full-container { padding: 0 40px; }
#page-main-container { margin-bottom: 40px; padding: 0 40px; }
#page-text-container { padding-left: 40px; }
#page-main-container p, #page-text-container p { margin-bottom: 20px; }
#page-main-container ul, #page-text-container ul { margin-bottom: 20px; list-style-image: url('../img/layout/bullet.png'); list-style-position: inside; }

.client-box { margin-bottom: 30px; width: 12.5%; text-align: center; float: left; }
.client-box img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; }
.client-box img:hover {
    -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; filter: none;
    -o-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s;
}

.design-text-container { padding: 50px 0 0 40px; }
.design-text-container span { color: #8dc63f; }

#contact-info-container { margin-bottom: 30px; }
#contact-info-container p { margin-bottom: 20px; }
#contact-info-container span, #page-text-container span { color: #111; font-family: 'latoregular', sans-serif; }

.map { width: 100%; height: 183px; margin-bottom: 20px; }

.contact-box { margin-bottom: 50px; }
.contact-box i { margin-right: 10px; }
.contact-box a { color: #767676; }
.contact-box a:hover { color: #8dc63f; }
.contact-form-field { margin-bottom: 10px; border: 1px solid #eaeaea; overflow: hidden; }
.contact-form-field span { display: block; width: 50px; height: 50px; padding: 10px; border-right: 1px solid #eaeaea; float: left; }
.contact-form-field span i { width: 30px; height: 30px; border: 1px solid #000; border-radius: 15px; }
.contact-form-field span i.fa-user { padding: 6px 5px 0 8px; font-size: 15px; }
.contact-form-field span i.fa-envelope-o { padding: 6px 5px 0 7px; }
.contact-form-field span i.fa-phone { padding: 7px 5px 0 8px; font-size: 15px; }

.contact-form-field input[type="text"] { margin: 13px 10px 10px 10px; padding: 0 5px; border: 0; }

.contact-area-field { margin: 0 0 10px 10px; padding: 10px; border: 1px solid #eaeaea; overflow: hidden; }
.contact-area-field textarea { display: block; width: 100%; height: 92px; border: 0; }

.contact-submit-field { margin: 0 0 10px 10px; }
input[type="submit"] { background-color: #8dc63f; width: 100%; height: 50px; padding: 5px 5px; color: #fff; border: 0; }

#share-container p { float: left; }
#share-container p:first-child { margin-right: 10px; padding-top: 5px; }
#share-container p a { margin-right: 10px; float: left; }


/********************************************************
* --- MAIN NAVIGATION ---
********************************************************/

#nav-container { max-width: 100%; height: 65px; margin: 65px 0 0 40px; border-bottom: 1px solid #eaeaea; }
nav { float: left; }
nav ul { }
nav ul li { position: relative; margin-right: 47px; float: left; }
nav ul li a {
	position: relative;
	display: block;
	padding: 20px 0;
	color: #888888;
	font-size: 13px;
	overflow: hidden;
}
nav ul li a:hover, nav ul li a:focus { color: #8dc63f; }

#lang-container { margin-top: 20px; float: right; }
#lang-container a { margin: 0 5px; color: #888888; font-size: 15px; }
#lang-container a:hover, nav ul li a:focus { color: #8dc63f; }
#lang-container a:first-child { margin: 0 5px 0; }

.nav-green-sep { position: absolute; bottom: 0; left: 0; display: block; background-color: #8dc63f; width: 30px; height: 1px; }
.nav-active { color: #8dc63f !important; }

#pull { display: none; }



/********************************************************
* --- PORTFOLIO with hover ---
********************************************************/

#portfolio-container { margin-bottom: 40px; }
.portfolio-box-container { position: relative; cursor: pointer; overflow: hidden; }
.portfolio-box-container img { display: block; }
.portfolio-box-container i { display: block; background-color: rgba(255, 255, 255, 0.5); position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin-top: -30px; margin-left: -30px; padding: 19px 0 0 20px; color: #111; font-size: 23px; border-radius: 30px; }
.portfolio-box-container i:hover { background-color: rgba(0, 0, 0, 1); color: #fff; -o-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; }
.portfolio-box-container:hover .portfolio-box-text,
.portfolio-box-container:focus .portfolio-box-text,
.portfolio-box-container:active .portfolio-box-text,
.portfolio-box-container:active .portfolio-box-text,
.portfolio-box-container:hover .portfolio-box-category,
.portfolio-box-container:focus .portfolio-box-category,
.portfolio-box-container:active .portfolio-box-category,
.portfolio-hovered {
	opacity: 1; cursor: pointer;

	transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1);
}
.portfolio-box-text, .portfolio-box-category {
	background: rgba(141, 198, 63, 0.8); position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;

	transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out;
	transform: scale(0.7); -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -o-transform: scale(0.7);
}
.portfolio-box-text h2 { position: absolute; bottom: 10px; left: 20px; color: #000; }
.portfolio-box-text h2 span { color: #fff; font: 35px/35px 'latolight', sans-serif; }

.portfolio-box-category h2 {
	position: absolute;
	bottom: 6px;
	left: 20px;
	color: #fff;
	font: 28px/28px 'latolight', sans-serif;
	text-transform: uppercase;
}

.portfolio-gallery-triangle { display: block; background: transparent url('../img/layout/portfolio-gallery-triangle.png'); position: absolute; top: 0; right: 0; width: 56px; height: 54px; }

#portfolio-nav-container { margin-bottom: 40px; text-align: center; }
#portfolio-nav-container a { margin: 0 5px; color: #767676; }
#portfolio-nav-container a:hover { color: #8dc63f; }
#portfolio-nav-container a:first-child { margin: 0 5px 0; }

#portfolio-filter-container, .item { overflow: hidden; }
#portfolio-filter-container .col-md-3 { margin-bottom: -1px; }

#single-image-container { margin-bottom: 15px; }



/********************************************************
* --- FOOTER ---
********************************************************/

#footer-info-container { background-color: #f8f8f8; margin-bottom: 20px; padding: 30px 0 30px 65px; overflow: hidden; }
#footer-info-container p { margin-bottom: 10px; color: #000; text-transform: uppercase; }
#footer-info-container ul { font-size: 12px; }
#footer-info-container ul span { font-family: 'latoregular', sans-serif; }
#footer-info-container ul li a { color: #767676; }
#footer-info-container ul li a:hover { color: #8dc63f; }
.footer-info-box { margin-right: 120px; margin-right: 100px\9; float: left; }
.footer-info-box:last-child { margin-right: 0; }

.green-sep { display: block; background-color: #8dc63f; width: 30px; height: 2px; }



#social-icons li { margin-right: 10px; float: left; }
#social-icons li a, #share-container a { display: block; background: url(../img/social-icons.png); width: 34px; height: 34px; background-color: #3a3939; border-radius: 17px; }

#social-icons li a.facebook, #share-container a.facebook { background-position: 0 0; }
#social-icons li a.facebook:hover, #share-container a.facebook:hover { background-color: #4d78b6; }
#social-icons li a.linkedin, #share-container a.linkedin { background-position: -34px 0; }
#social-icons li a.linkedin:hover, #share-container a.linkedin:hover { background-color: #50a0cc; }
#social-icons li a.pinterest, #share-container a.pinterest { background-position: -68px 0; }
#social-icons li a.pinterest:hover, #share-container a.pinterest:hover { background-color: #bc0b02; }
#social-icons li a.google-plus, #share-container a.google-plus { background-position: -102px 0; }
#social-icons li a.google-plus:hover, #share-container a.google-plus:hover { background-color: #000; }

#bottom-container { margin-bottom: 50px; padding: 0 30px; font-size: 12px; }

#footer-nav-container a { margin: 0 5px; color: #767676; }
#footer-nav-container a:hover { color: #8dc63f; }
#footer-nav-container a:first-child { margin: 0 5px 0; }

#copyright { text-align: right; }



/********************************************************
* --- PLUGINS ---
********************************************************/

#slider-pager { padding-top: 3px; font-size: 18px; }
#slider-pager a { margin-right: 5px; color: #111; }
#slider-pager a:hover { color: #8dc63f; }

.scrollToTop { display: none; background-color: #111; position: fixed; bottom: 100px; right: 20px; width: 40px; height: 40px; color: #fff; border-radius: 20px; }
.scrollToTop:hover { background-color: #8dc63f; color: #fff; }
.scrollToTop i { margin: 8px 0 0 13px; font-size: 22px; }



/********************************************************
* --- Media Query ---
********************************************************/

@media only screen and (max-width : 1024px) {

    nav ul li { margin-right: 40px; }

    .design-text-container { padding: 5px 0 0 20px; }
    .design-text-container p { margin: 0 !important; }

    .client-box { min-height: 120px; margin-bottom: 20px; width: 16.65%; }
}

@media only screen and (max-width : 960px) {

    #nav-container { position: relative; width: 100%; height: 65px; margin: 20px 0 0 0; border-bottom: 1px solid #eaeaea; }
    nav { display: none; background-color: #eaeaea; position: absolute; top: 100%; left: 0; width: 100%; z-index: 99999; }
    nav ul li { width: 100%; border-bottom: 1px solid #ddd; float: none; }
    nav ul li a { padding: 15px; }

    #pull { display: block; padding: 20px 15px 15px 0; color: #111; font-size: 15px; overflow: hidden; float: left; }

    #index-text-container, #portfolio-container { margin-bottom: 40px; padding: 0 10px; }

    .client-box { min-height: 120px; margin-bottom: 20px; width: 20%; }

    #breadcrumb-container { margin: 0 10px 40px 10px; padding: 10px 10px; }

    #page-text-container { padding-left: 20px; }

    .portfolio-box-container img { width: 100% !important; height: auto !important; }

    #slider-pager { margin-bottom: 20px; }

    .contact-area-field, .contact-submit-field { margin: 0 0 10px 0; }

    #footer-info-container { padding: 30px 0 30px 20px; }
    .footer-info-box { margin-right: 40px; float: left; }
    .footer-info-box:last-child { margin-right: 0; }

    #social-icons { width: 88px; }
    #social-icons li { margin: 10px 10px 0 0; }

    #bottom-container { margin-bottom: 50px; padding: 0 15px; font-size: 12px; }
}

@media only screen and (max-width : 736px) {
    #logo { width: 100%; text-align: center; }
    #logo img { width: 160px; height: auto; }

    #top { margin: 20px 0 30px; padding: 0 10px; }

    #page-main-container {padding: 0 10px; }
}

@media only screen and (max-width : 480px) {
    #logo img { width: 100px; height: auto; }

    #nav-container { margin: 0; }

    .client-box { min-height: 120px; margin-bottom: 20px; width: 33%; }

    .portfolio-box-text h2 span { font: 28px/24px 'latolight', sans-serif; }
    .portfolio-box-category h2 { font: 20px/20px 'latolight', sans-serif; }

    .design-text-container { padding: 10px 0 0 0; }

    #page-text-container { padding-left: 0; }

    footer { padding: 0 10px; }
    #footer-info-container { padding: 30px 0 30px 20px; }
    .footer-info-box { min-height: 100px; margin: 0 33px 20px 0; display: inline-block; overflow: hidden; }
    .footer-info-box:last-child { margin-right: 0; }
    .footer-info-box:nth-child(3n) { clear: left; }

    #social-icons { width: 100%; }
    #social-icons li { margin-right: 10px; }

    #bottom-container { margin-bottom: 50px; padding: 0 10px; font-size: 12px; }

    #footer-nav-container { margin-bottom: 10px; }
    #copyright { text-align: center; }
}

@media only screen and (max-width : 320px) {
    
}

/********************************************************
* --- Hacks ---
********************************************************/

#lang-container { 
display:none; 
}

#footer-katalog-img {
    width: 4rem;
    height: 4rem;
    margin-top: 1rem;
}