@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,600,800&subset=latin,latin-ext);

html{margin: 0; padding: 0;}
body{margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; font-weight: 300; position: relative;}

*{box-sizing: border-box;}
a{color: #000000; text-decoration: none;}
strong{font-weight: 600}

.cleaner{clear: both}  
.container{max-width: 1000px; display: block; margin: 0 auto; padding: 30px 20px}
.container.logos{max-width: 1200px;}
.container.big{max-width: 1600px; padding: 30px 5px;}
.container.no-padding{padding: 0;}
.container.no-bottom-padding{padding-bottom: 0;}
.center{text-align: center}
.inline-block{display: inline-block}
.hidden{display: none;}
h1{color: #ffffff; font-size: 50px; padding: 0; margin: 0 0 30px 0; font-weight: 300;}
h2{font-size: 40px; color: #4d4d4d; font-weight: 300; padding: 60px 0}
h3{color: #e81c24; font-size: 20px; line-height: 28px;}

header{height: 100px; line-height: 100px; position: fixed; top: 0; right: 0; left: 0; background: #ffffff; z-index: 125; opacity: 1; transition: 500ms all ease; -o-transition: 500ms all ease; -moz-transition: 500ms all ease; -webkit-transition: 500ms all ease;}
header.offset{opacity: 1;}
header .container{height: 100px; line-height: 100px; padding: 0 20px;}
header #logo{float:left; height: 100px;}
header #logo img{max-width: 215px; display: inline-block; padding: 28px 0; }
header nav{z-index: 500; height: 90px; display: block; background: transparent; padding: 0px 0px; line-height: 100px; opacity: 1; text-align: center; transition: 500ms ease all;-o-transition: 500ms ease all;-webkit-transition: 500ms ease all;-moz-transition: 500ms ease all; }
header nav ul.menu{list-style: none; float: right; margin: 0; padding: 0;}
header nav ul.menu li{display: inline; padding: 0 5px;}
header nav ul.menu li a{padding: 5px 15px 5px 15px; transition: 500ms ease all;-o-transition: 500ms ease all;-webkit-transition: 500ms ease all;-moz-transition: 500ms ease all;}
header nav ul.menu li a.active{background:#e8112c;color: #ffffff}
header nav a{color: #000000;  font-weight: 600; font-size: 15px;}

footer{background: #f1f1f1;}
footer .columns{position: relative;}
footer .left{float: left; width: 36%; padding: 0 26px 0 0;}
footer .center{float: left; width: 28%; text-align: left; padding: 0 18px;}
footer .right{float: left; width: 36%; padding: 0;}
footer h3{font-size: 30px; color: #222222; font-weight: 300;}
footer p{font-size: 13px; line-height: 20px;}
footer .bigger p{font-size: 15px; line-height: 28px;}
footer .button{transition: 300ms ease all; color: #1f1f1f; text-align: center; font-weight: 800; background: #dedede; padding: 15px 15px; font-size: 14px; width: 210px; display: inline-block;	position: absolute; bottom: 0;}
footer .button:hover{background: #fff}
footer #copyright{border-top: 1px #e2e2e2 solid; margin: 25px 0 0 0; padding: 25px 0 25px 0}
footer #copyright p.left{float: left; color: #000000; font-weight: 600; margin: 0; padding: 0;}
footer #copyright p.right{float: right; color: #707173; margin: 0; padding: 0; width: auto;}

section{width: 100%; display: block;}
section .close{float: right; font-weight: bold; color: #ffffff; margin: 50px 0 0 0; display: inline-block;}

section#slider{margin: 100px 0 0 0; padding: 50px 0; background: url("..//img/slide_3.jpg") no-repeat; background-attachment: fixed; height: 525px; background-size: cover; text-align: left;}
section#slider p{color: #ffffff; font-size: 18px; line-height: 30px;}
section#slider p.big{font-size: 22px; line-height: 30px;}
section#slider .logos{display: inline-block}
section#slider .logo{background-image: url("../img/sprite.png"); display: inline-block; position: relative; top: 25px;}
section#slider .logo.uniqa{background-position: 0px 0px; width: 175px; height: 65px;}
section#slider .logo.csob{background-position: -180px 0px; width: 100px; height: 65px;}
section#slider .logo.knauf{background-position: -280px 0px; width: 100px; height: 65px;}

section#content{display: block;}
section#content h2{margin: 0;}
section#content .bubbles{}
section#content .bubble{float: left; width: 26%; text-align: center; padding: 0; margin: 35px 0 0 0}
section#content .bubble:nth-child(3n-2){margin: 35px 8% 0 0;}
section#content .bubble:nth-child(3n-1){width: 32%; padding: 0 3%;}
section#content .bubble:nth-child(3n){margin: 35px  0 0 8%;}
section#content .bubble p{color: #231f20; font-size: 16px;}
section#content .bubble h3{height: 56px; overflow: hidden;}
section#content .bubble .image{background-image: url("../img/sprite.png"); display: inline-block;}
section#content .bubble .image.first{background-position: 0px -67px; width: 53px; height: 78px;}
section#content .bubble .image.second{background-position: -53px -67px; width: 88px; height: 78px;}
section#content .bubble .image.third{background-position: -141px -67px; width: 72px; height: 78px;}
section#content .bubble .image.fourth{background-position: -213px -67px; width: 85px; height: 78px;}
section#content .bubble .image.fifth{background-position: -299px -67px; width: 82px; height: 78px;}
section#content .bubble .image.sixth{background-position: -380px -67px; width: 74px; height: 78px;}

section#references{background: #f1f1f1;}
section#references h2{padding: 0; margin: 10px auto;}
section#references .references{}
section#references .references .reference{width: 24.3%; margin: 0.5% 0.4% 0 0; float: none; position: relative; display: inline-block; padding: 0;}
section#references .references .reference:nth-child(4n){margin: 0.5% 0% 0 0;}
section#references .references .reference img{width: 100%; display: block;}
section#references .references .reference .info .inner{position: absolute; left: 0; right: 0;}
section#references .references .reference .info{position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; opacity: 0; text-align: center; padding: 0;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.65+0,0.65+100 */
	background: -moz-linear-gradient(top,  rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.90) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0.90) 0%,rgba(255,255,255,0.90) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(255,255,255,0.90) 0%,rgba(255,255,255,0.90) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6ffffff', endColorstr='#a6ffffff',GradientType=0 ); /* IE6-9 */
	transition: all ease 250ms; -webkit-transition: all ease 250ms; -o-transition: all ease 250ms; -moz-transition: all ease 250ms;
}
section#references .references .reference:hover .info{opacity: 1;}
section#references .references .reference .info{color: #0272bc; font-size: 20px; font-weight: bold; padding: 0; margin: 0;}
section#references .references .reference .info .button{ cursor:pointer; font-weight: 600; font-size: 12px; color: #ffffff; padding: 6px 30px; background: #da001b; display: inline-block; text-align: center; margin: 10px 0 0 0;}
section#references .references .reference .info ul{margin: 0; padding: 0 5%; line-height: 18px;}
section#references .references .reference .info .name{font-size: 16px; font-weight: 600; padding: 0 0 5px 0;}
section#references .references .reference .info p{color: #000000; margin: 0; padding: 0; font-size: 14px; line-height: 16px; font-weight: 300;}
section#references .references .reference .info ul li{color: #000000; display: inline; margin: 0; padding: 0; font-size: 14px; font-weight: 300;}
section#references .references .reference .info ul li:before {content: "• ";  color: #da001d; font-size: 20px; font-weight: 600; position: relative; top: 2px; line-height: 14px;}
#reference-box{display: none; height: 600px; max-width: 1000px; margin: 0 auto;}
#reference-box .first{height: auto; padding: 0 0px 0 20px; position: relative; line-height: 50px;}
#reference-box .first img{float: left; display: block; margin: 0 15px 0 0;}
#reference-box .first h3{font-size: 20px; font-weight: 600; color: #0272bc; margin: 0 20px 0 0; padding: 0; float: left; line-height: 50px; display: none;}
#reference-box .first p{font-size: 14px; font-weight: 600; color: #000000; float: left; padding: 15px 0; margin: 0; line-height: 20px; text-align: center;}
#reference-box .first #close{padding: 0 24px; color: #ffffff; font-weight: 600; font-size: 20px; line-height: 50px; cursor: pointer; background: #ed1b24; float: right}
#reference-box .second {position: relative;}
#reference-box .second .container{text-align: center;}
#reference-box .second .image{text-align: center; padding: 15px 0; display: inline-block; max-width: 80%; position: relative;}
#reference-box .second .image img{max-width: 100%}
#reference-box .second .image iframe{display: none}
#reference-box .second .image .loader{display: block; margin: 0 auto; text-align: center; font-size: 60px; color: #ed1b24; display: none; position: relative; top: 50px;}
#reference-box .second .prev{display: block; color: #ed1b24; font-size: 55px; padding: 3%; position: absolute; left: 0px; top: 0; z-index: 250; cursor: pointer; /*text-shadow: #000000 0 0 15px;*/}
#reference-box .second .next{display: block; font-size: 55px; color: #ed1b24; padding: 3%; position: absolute; right: 0px; top: 0; z-index: 250; cursor: pointer; /*text-shadow: #000000 0 0 15px;*/}
/*#reference-box .second .prev:hover{color: red;}
#reference-box .second .next:hover{color: red;}*/

section#logos #partners-logos{margin: 15px 0;}
section#logos #partners-logos div{background: url("../img/sprite.png");  height: 69px; display: inline-block; margin: 10px 25px}
section#logos #partners-logos img{height: 54px; display: inline-block; margin: 30px 26px}
section#logos #partners-logos img.big{transform: scale(1.5)}
section#logos #partners-logos img.small{transform: scale(0.5); margin: 30px -60px;}
section#logos #partners-logos .first{background-position: 0 -230px; width: 180px;}
section#logos #partners-logos .second{background-position: -180px -230px; width: 87px;}
section#logos #partners-logos .third{background-position: -267px -230px; width: 99px;}
section#logos #partners-logos .fourth{background-position: -610px -230px; width: 217px;}
section#logos #partners-logos .fifth{background-position: -442px -230px; width: 168px;}s
section#logos #partners-logos .sixth{background-position: -827px -230px; width: 63px;}
section#logos #partners-logos .seventh{background-position: -889px -230px; width: 88px;}
section#logos #partners-logos .eighth{background-position: -975px -230px; width: 155px;}

section#history{display: none; position: absolute; opacity: 0.95; bottom: 0;background: #121212; left: 0; right: 0; z-index: 150; padding: 0 0 30px 0}
section#history .container .text{ -webkit-column-count: 2; -moz-column-count: 2; -o-column-count: 2; column-count: 2; -webkit-column-gap: 40px; -o-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px;}
section#history h2{color: #ffffff; font-weight: 300; margin: 0; float: left;}
section#history h3{color: #ffffff; font-weight: 600;}
section#history p{color: #ffffff; text-align: justify; font-size: 13px; line-height: 20px;}

section#contact{display: none; position: absolute; opacity: 0.95; bottom: 0;background: #121212; left: 0; right: 0; z-index: 150; padding: 0 0 30px 0}
section#contact h2{color: #ffffff; font-weight: 300; margin: 0; float: left;}
section#contact .left{float: left; width: 45%;}
section#contact .right{float: right; width: 45%;}
section#contact label{color:#ffffff; font-weight: 600; display: block;}
section#contact input{width: 100%; border: 1px solid #525252; font-size: 16px; padding: 16px 0; margin: 10px 0px 20px 0;  text-align: center; border-radius: 0; background: none; color:#ffffff;}
section#contact textarea{resize: none; height: 364px; width: 100%; border: 1px solid #525252; font-size: 16px; padding: 16px 0; margin: 10px 0px 20px 0;  text-align: center; border-radius: 0; background: none; color:#ffffff; font-family: 'Open Sans', sans-serif; font-weight: 300; }
section#contact .button{transition: 300ms ease all; color: #1f1f1f; text-align: center; font-weight: 800; background: #dedede; padding: 15px 15px; font-size: 14px; width: 210px; display: inline-block; float: right}
section#contact .button:hover{background: #fff}

/* Responsive design */
@media (max-width: 1280px){ 
	section#references .references .reference .info .button{font-size: 12px; padding: 3px 30px;  margin: 10px 0 0 0;}
	section#references .references .reference .info ul{line-height: 14px;}
	section#references .references .reference .info .name{font-size: 16px;padding: 0 0 0px 0;}
	section#references .references .reference .info p{font-size: 12px;}
	section#references .references .reference .info ul li{margin: 0; padding: 0; font-size: 12px; line-height: 14px}
	section#references .references .reference .info ul li:before {font-size: 12px;}
}
@media (max-width: 1152px){ 
	section#references .references .reference .name p{ font-size: 16px;}
	section#references .references .reference .name p span{ font-size: 30px;}
}

@media (max-width: 1024px){ /* iPads landscape */
	.container.big{padding: 5px 0;}
}
@media (max-width: 1023px){
	section#references .references .reference .info ul{display: none}
	
	section#references .references .reference{width: 32.5333%; margin: 0.5% 0.4% 0 0; }
	section#references .references .reference:nth-child(4n){margin: 0.5% 0.4% 0 0; }
	section#references .references .reference:nth-child(3n){margin: 0.5% 0 0 0; }
	
	#reference-box .second .prev{left: 0px; padding: 1.5%}
	#reference-box .second .next{padding: 1.5%;  right: 0px;}
}

@media (max-width: 960px){ /* iPads landscape */
	footer .left{float: left; width: 58%; padding: 0 26px 0 0;}
	footer .center{float: left; width: 42%; text-align: left; padding: 0 18px;}
	footer .right{float: left; width: 100%; padding: 25px 0;}
	footer .button{position: relative; }
}

@media (max-width: 768px){ /* iPads portrait */
	section#slider{height: auto; }
}

@media (max-width: 680px){
	header nav{display: none;}
	
	h2{padding: 15px 0; font-size: 35px;}
	
	.container.big{max-width: 1600px; padding: 0;}
	
	footer .button{width: 100%}
	footer .left{float: left; width: 100%; padding:0;}
	footer .center{float: left; width: 100%; text-align: left; padding: 15px 0;}
	footer .right{float: left; width: 100%; padding: 0;}
	
	section .close{margin: 8px 0 25px 0; }
	
	section#content .bubble{float: left; width: 50%; text-align: center; padding: 0; margin: 35px 0 0 0}
	section#content .bubble:nth-child(3n-2){margin: 35px 0 0 0}
	section#content .bubble:nth-child(3n-1){width: 50%; padding: 0 15px;}
	section#content .bubble:nth-child(3n){margin: 35px 0 0 0;}
	
	section#references .references .reference{width: 49.0%; margin: 0.5% 0.5% 0 0; }
	section#references .references .reference:nth-child(4n){margin: 0.5% 0.5% 0 0; }
	section#references .references .reference:nth-child(3n){margin: 0.5% 0.5% 0 0; }
	section#references .references .reference:nth-child(2n){margin: 0.5% 0 0 0; }
	
	#reference-box .first img{/*display: none;*/}
	#reference-box .first h3{font-size: 18px;  margin: 0px; padding: 0; float: left; line-height: 30px; position: relative; top: 1px}
	#reference-box .first p{font-size: 16px; padding: 15px 0; margin: 0; line-height: 20px;}
	#reference-box .first #close{padding: 0 16px; font-size: 20px; line-height: 30px; }
	#reference-box .first .logo-cover{/*display: none;*/}


	section#slider{height: auto; padding-top: 0;}
	section#slider .logos{display: block; margin: 0 auto; text-align: center;}
	section#slider h1{font-size: 40px;}
	
	section#history .container .text{ -webkit-column-count: 1; -moz-column-count: 1; -o-column-count: 1; column-count: 1; -webkit-column-gap: 40px; -o-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px;}
	section#history h2{font-size: 26px}
	
	section#contact .left{width: 100%;}
	section#contact .right{width: 100%;}
	section#contact .button{width: 100%;}
	section#contact h2{font-size: 26px}
}

@media (max-width: 480px){ /* iPhones landscape */
	section#slider h1{font-size: 30px;}
}
@media (max-width: 479px){
	section#references .references .reference{width: 98%; margin: 1% 1% 0 1%; }
	section#references .references .reference:nth-child(4n){margin: 1% 1% 0 1% ; }
	section#references .references .reference:nth-child(3n){margin: 1% 1% 0 1% ;  }
	section#references .references .reference:nth-child(2n){margin: 1% 1% 0 1% ;  }
}


@media (max-width: 320px){ /* iPhones portrait */
}