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;
}
/* HTML5 display-role reset for older browsers */
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;
}

/*   === CSS reset ===   */

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

html * {
    font-size: 100%;
    font-family: gillsans-light, Arial, Helvetica, sans-serif;
}

html, body
{
    height: 100%;

}

body{

    font-size: 62.5%;
}

.fullscreen
{
    height: 100%;
    width: 100%;
    background-color: green;
}

.section-home
{
    background: url('../images/grass_background_small.jpg') no-repeat;
}

.section-home .header
{
    background: url('../images/grass_background_blurred.jpg');
    height: 192px;
    content: '';
    /*padding: 18px 0px 13px 55px;*/

    display:-moz-box;
    -moz-box-orient:horizontal;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    display:box;
    box-orient:horizontal;
    width: 100%;
}

#logo
{
    content: '';
    background-image: url('../images/GeckoWeb_logo.png');
    background-repeat: no-repeat;
    background-size: 154px 162px;
    height: 162px;
    width: 154px;
    margin: 18px 0px 13px 55px;
}

#fit-system
{
    display:-moz-box;
    -moz-box-orient:vertical;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    display:box;
    box-orient:vertical;
   
    margin: 18px 0px 13px 0px;
}

#GeckoWeb
{
    font-size: 6em;
    color: #37740a;
    margin-left: -27px;
}

nav
{
    display:-moz-box;
    -moz-box-orient:horizontal;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    display:box;
    box-orient:horizontal;
    /*margin-top: 11px;
    margin-left: 20px;*/

    box-pack: end;
    -moz-box-pack: end;
    -webkit-box-pack: end;

}

nav .nav-item
{
    height: 82px;
    width: 212px;
    background-color: rgba(255,255,255,0.42);
    margin: 12px;

    display:-moz-box;
    -moz-box-orient:horizontal;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    display:box;
    box-orient:horizontal;
}

nav a
{
    text-decoration: none;
    display: -webkit-inline-box;
}

nav a:hover .nav-item
{
    background-color: rgba(255,255,255,0.72);
}

nav .nav-item .icon-background
{
    background-color: #4ca241;
    height: 60px;
    width: 60px;
    margin: 11px;

    text-align: center;
    vertical-align: middle;
    font-size: 3.6em;

    display: table;

    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomright: 20px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

nav .nav-item .icon-background i
{
    display: table-cell;
    color: #FFFFFF;
    vertical-align: middle;
}


nav .nav-item .text
{
    margin: 11px 11px 11px 5px;
    display:-moz-box;
    -moz-box-orient:vertical;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    display:box;
    box-orient:vertical;
}


nav .nav-item .text div
{
    color: #37740a;
    width: 110px;
}

nav .nav-item .text .title
{
    font-weight: bold;
    font-size: 3em;
}

nav .nav-item .text .description
{
    padding-top: 2px;
    font-size: 1.4em;
}

.message
{

    vertical-align: bottom;
    bottom: 5%;
    position: absolute;

    width: 100%;

}

.arrow-white
{
    background-image: url('../images/arrow-down.png');
}

.arrow-light-green
{
    background-image: url('../images/arrow-down_light_green.png');
    margin-bottom: 50px;
    margin-top: 50px;
}

.arrow-dark-green
{
    background-image: url('../images/arrow-down_dark_green.png');

}

.arrow-down
{
    background-size: 66px 52px;
    height: 52px;
    width: 66px;
    display: inline-block;
    margin-bottom: 0px;
    margin-top: 20px;
    -webkit-animation: down_arrow_hover 2s ease-in-out infinite;
}

.message p .arrow-down
{

    margin-top: 5%;
}

.arrow-container
{
    text-align: center;
    width: 100%;

}

.message p
{
    text-align: center;
    color: #FFFFFF;
    font-size: 6em;
    width: 97%;
}

h1
{
    font-size: 4.8em;
    padding: 70px 0px 30px 112px;
}

.section-portfolio h1
{
    color: #7fad63;
}


.website-preview-container
{
    display:-moz-box;
    -moz-box-orient:horizontal;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    display:box;
    box-orient:horizontal;
}

.website-preview-container .website-preview
{
    margin-right: 50px;
}

.slide .content h2 a
{
	text-decoration: none;
	font-size: 1em;
	color: #9fa2ab;
}

.slide .content h2 a:hover
{
	border-bottom: thin solid #9fa2ab;
}

.website-preview-container .website-preview img
{
    width: 90%;
    max-width: 420px;
    max-height: 50%;
    overflow: hidden;
}

.website-preview-container .website-work-description ul
{
    padding: 0px 10px 10px 10px;
    margin-left: -70px;
    width: 172px;
}

.website-preview-container .website-work-description ul li
{
    font-size: 1.8em;
    color: #9fa2ab;
    padding-bottom: 15px;
}

.section-angebot
{
    background-color: #7fad63;
}

.section-angebot
{
    margin: 30px 0px 0px 0px;
    padding-bottom: 20px;
}

.section-angebot h1
{
    color: #FFFFFF;
}

.offer-box
{
    height: 291px;
    width: 223px;
    border: thin solid #FFFFFF;

    margin-left: 12px;
}
/*
.offer-box:hover i
{
	-webkit-animation: spin 2s infinite linear;
	-moz-animation: spin 2s infinite linear;
	-o-animation: spin 2s infinite linear;
	animation: spin 2s infinite linear;
}
*/
.offer-box a
{
	color: #FFFFFF;
	text-decoration: none;
}

.offer-box a:hover
{
	border-bottom: thin solid #FFFFFF;
}

.offer-legend
{
    margin: 0 auto;
    text-align: center;
}

.offer-container legend
{
    text-align: center;
    font-size: 3.6em;
    padding-top: 5px;
    
     margin: 0 auto;
    
}

.offer-legend
{
    margin-top: 33px;
    width: 62px;
    height: 37px;

    vertical-align: middle;

    line-height: 62px;

    -webkit-border-bottom-right-radius: 31px;
    -webkit-border-bottom-left-radius: 31px;
    -moz-border-radius-bottomright: 31px;
    -moz-border-radius-bottomleft: 31px;
    border-bottom-right-radius: 31px;
    border-bottom-left-radius: 31px;
    color: white;

    border-left: 1px solid white;
    border-right: 1px solid white;
    border-bottom: 1px solid white;
}

.offer-container
{
    margin: 3px 40px 100px 30px;
}

.offer-container > div {
    float: left;
}

.offer-legend i
{
	display: block;
    margin-top: -15px;
    position: absolute;
    width: 62px;
    height: 30px;
}

.offer-box h2
{
    padding-top: 15px;
    width: 100%;
    text-align: center;
    font-size: 3em;
    color: #FFFFFF;
}

.offer-box p
{
    padding: 15px 12px 20px 12px;
    text-align: justify;
    font-size: 1.5em;
    color: #FFFFFF;
    line-height: 1.4;
    -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
   hyphenate-limit-chars: auto 3;
	hyphenate-limit-lines: 2;
	letter-spacing: 0.5pt;
}

.section-kontakt
{
		
	/* background: url('http://farm6.staticflickr.com/5217/5386093672_e14ef0a6df_b.jpg');*/
	/*background: url('http://farm6.staticflickr.com/5003/5331624290_0dc5998586_b.jpg'); */
	/* background: url('http://farm6.staticflickr.com/5256/5561909361_e8ea7d8379_b.jpg'); */
	/* background: url('http://farm8.staticflickr.com/7232/7206073188_bb4c3a94d4_b.jpg'); */
	/* background: url('http://farm8.staticflickr.com/7086/7298975696_74399a00d8_b.jpg'); */
	/* background: url('http://farm9.staticflickr.com/8234/8525279661_ff4243f6e9_b.jpg'); */
	/* background: url('http://farm3.staticflickr.com/2580/4098489857_8f405ddec9_b.jpg'); */
	/* background: url('http://farm4.staticflickr.com/3455/3894430548_0f5a557d9d_b.jpg'); */
	/* background: url('http://farm8.staticflickr.com/7119/7123750893_8f294501c9_b.jpg'); */
	/* background: url('http://farm4.staticflickr.com/3569/3366140645_9ca9096d56_b.jpg'); */
	/* background: url('http://farm3.staticflickr.com/2832/8759913601_833b34e663_b.jpg'); */
	/* background-color: #4d7c2e; */
	/* background: url('http://farm7.staticflickr.com/6108/6345194585_0e03a8eb7c_b.jpg'); */
	/* background: url('http://farm3.staticflickr.com/2832/8759913601_833b34e663_b.jpg'); */
	/*background-size: cover;*/
	/*background-position: bottom center;*/
	/*height: 80%;*/

    background-color: #4d7c2e;
}

.section-kontakt h1
{
	color: #FFFFFF;
}

.contact-container
{
    display:-moz-box;
    -moz-box-orient:vertical;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    display:box;
    box-orient:vertical;

    padding: 0px 30px 30px 180px;
}

.contact-container .contact-container-row
{
    display:-moz-box;
    -moz-box-orient:horizontal;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    display:box;
    box-orient:horizontal;
}

.contact-container-row-item
{
    border: thin solid #dbddda;
    margin: 2px;
    padding: 3px;
    display: block;
    max-width: 328px;
}

.validation-ok
{
    color: #dbddda;
}


.validation-error
{

    background-color: #D1401F !important;
}

.contact-container-row-item input, .contact-container-row-item textarea
{
    border: transparent;
    background-color: transparent;
    height: 30px;
    width: 185px;
    padding-left: 15px;
}


.contact-container-row-item label, .contact-container-row-item input, .contact-container-row-item textarea
{
    color: #dbddda;
    font-size: 1.6em;
}

.contact-container-row-item label
{
    color: #dbddda;
    font-size: 1.6em;
    padding: 10px;
    vertical-align: top;
    width: 99px !important;
    display: inline-block;
}

.txt_email
{
    width: 517px !important;
}

.txt_message
{
    width: 516px !important;
    height: auto !important;

}


.contact-container-row input[type=submit]
{
    background-color: #dbddda;
    color: #4d7c2e;
    border: none;
    width: 328px;
    margin: 2px;
    text-align: left;
    padding: 15px;
    font-size: 1.6em;
    margin-top: 20px;
}

.contact-container-row input[type=submit] i
{
    margin-right: 10px;
}

.section-footer
{
    background-color: #232f3f;
    padding: 50px;
}

.section-footer div
{
	text-align: right;
}

.section-footer div span
{
	color: #FFFFFF;
	vertical-align: top;
	padding-right: 30px;
}

.contact-container-row-item-2x
{
	max-width: 665px !important;
}




@-moz-document url-prefix() {
    .offer-container > div
	{
		display: inline-block;
	}
	
	.offer-container
	{
		display: block;	
	}
	
	.offer-container legend
	{
		margin-left: 80px;
		display: inline-block;
	}

	nav a
	{
		display: inline-block;
	}
	
	nav
	{
		margin-left: 20px;
	}
	
	.arrow-dark-green
	{
		margin-top: 40px;
	}
}

input[type=submit] {
    -webkit-appearance: none;
    border-radius: 0;
}

/* ---   kill slider on touch ---  */

.touch .is-slide
{
	top: auto !important;
	display: block  !important;
	position: inherit !important;
}

.touch .is-container
{
	overflow: auto;
	position: inherit;
}

.touch .is-background 
{
	top: auto;
}

.touch .is-overflow
{
	height: auto;
}

.touch .is-bg-overflow, .touch .is-nav, .touch .is-pagination
{
	display: none;
}

.touch #immersive_slider
{
	height: auto !important;
	background-color: #FFFFFF;
	margin: 10px auto 10px;
}

.touch .website-preview-container
{
	display: table !important;
}

.touch .website-preview-container .website-preview, .touch .website-preview-container .website-work-description
{
	display: table-cell;
	vertical-align: top;
}

.touch .website-preview-container .website-work-description ul
{
	margin-left: 0px;
}

.touch .contact-container-row-item
{
	display: inline-block;
	max-width: 327px;
	margin-left: 0px;
	margin-right: 1px;
}

.touch #immersive_slider .content
{
	margin: 0 auto;
	background-color: #161923;
	width: auto;
	margin-bottom: 30px;
	padding: 30px !important;
	display: table;
}

.touch .is-slide
{
	padding: 10px !important;
}


@media only screen and (max-width: 925px) {
	
	h1
	{
		width: 100%;
		text-align: center;
		padding-left: 0;
		padding-right: 0;
	}
	
	.message p {
		font-size: 3em;
	}
	
    #logo {
		height: 81px;
		width: 77px;
		background-size: 77px 81px;
		margin: 18px 0px 13px 15px;
	}
	
	.section-home .header {
		box-orient: vertical !important;
		-webkit-box-orient: vertical !important;
	}
	
	#fit-system {
		box-orient: horizontal  !important;
		-webkit-box-orient: horizontal  !important;
	}
	
	#GeckoWeb {

		margin-left: 0px;
		margin-top: -38px;
	}
	
	nav 
	{
		-webkit-box-orient: vertical;
		margin-top: -112px;
		margin-left: 30px;
	}
	
	nav .nav-item
	{
		height: auto;
		margin: 5px;
		width: 150px;
	}
	
	nav .icon-background
	{
		display: none !important;
	}
	
	nav .nav-item .text .description
	{
		display: none !important;
	}
	
	nav .nav-item .text 
	{
		margin: 7px 7px 7px 9px;
	}
	
	nav a
	{
		display: inherit;
	}
	
	.contact-container 
	{
		padding: 0px 5px 25px 20px;
	}
	
	.contact-container .contact-container-row {
		-moz-box-orient: vertical;
		-webkit-box-orient: vertical;
		box-orient: vertical;
	}
	
	.txt_email, .txt_message
	{
		width: 185px !important;
	}
	
	.contact-container-row-item-2x
	{
		max-width: 328px !important;
	}
	
	.offer-container {
		margin: 3px 5px 100px 5px;
	}
	
	.touch .immersive_slider .is-slide 
	{
		padding: 0px !important;
		margin: 5px 0px 10px 0px !important;
		display: inherit;
		
	}
	
	.touch .website-preview-container .website-preview, .touch .website-preview-container .website-work-description
	{
		display: inherit !important;
	}
	
	.touch .website-preview-container .website-work-description
	{
		padding-top: 20px;
	}
	
	.touch #immersive_slider h2
	{
		font-size: 2em !important;
	}
	
	.touch .website-preview-container .website-work-description ul li
	{
	    font-size: 1.4em;
	}

	.contact-container-row input[type=submit]
	{
		width: 164px;
	}
}


@media only screen and (max-width: 480px) {
	#GeckoWeb
	{
		font-size: 3.5em;
		padding: 10px 0px 0px 5px;
	}
	
	nav .nav-item .text .title {
		font-size: 2em;
	}
	
	nav .nav-item {
		width: 110px;
	}
	
	.offer-container > div {
		margin: 0 auto;
		float: none;
	}
	
	.offer-box
	{
		width: 90%;
		height: auto;
	}
	
	.contact-container-row-item input, .contact-container-row-item textarea 
	{
		width: 142px !important;
		max-width: 142px !important;
	}
	
	
}

/* === social builder === */
a.mt-share-inline-square-sm img {
  width: 34px;
  height: auto;
  border: 0px;
}
a.mt-share-inline-square-sm {
  display: inline-block;
  width: 34px;
  height: 34px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  border-bottom-left-radius: 2px;
  margin: 4px;
}
.mt-google: hover {
  background-color: rgb(225, 95, 79);
}
.mt-google {
  background-color: rgb(221, 75, 57);
}
.mt-linkedin: hover {
  background-color: rgb(16, 135, 192);
}
.mt-linkedin {
  background-color: rgb(14, 118, 168);
}
.mt-twitter: hover {
  background-color: rgb(8, 187, 255);
}
.mt-twitter {
  background-color: rgb(0, 172, 238);
}
.mt-facebook: hover {
  background-color: rgb(66, 100, 170);
}
.mt-facebook {
  background-color: rgb(59, 89, 152);
}
.mt-pinterest: hover {
  background-color: rgb(221, 42, 48);
}
.mt-pinterest {
  background-color: rgb(204, 33, 39);
}


.ie-clear
{
	clear: both;
	content: '';
	width: 100%;
	height: 5px;
	margin-bottom: 50px;
}

#byline
{
	display: none !important;
}

@-webkit-keyframes down_arrow_hover {
    from {
        margin-bottom: 0px;
    	margin-top: 40px;
    }
    50% {
        margin-bottom: 10px;
    	margin-top: 30px;
    }
    to {
        margin-bottom: 0px;
    	margin-top: 40px;
    }
}