@charset "utf-8";

/*********
Allgemein
*********/
* {
	font-family: 'NeoSansStd-Regular', Helvetica, Arial, sans-serif
}

html {
	height: 100%;
}

a:link,
a:visited,
a:hover,
a:active {
	outline: 0;
}


/*********
Allgemeine Responsive Klassen fÌr GerÀte
*********/
/* Desktop */
@media 
only screen and (min-device-width : 880px), 
only screen and (min-width : 880px) {
.desktop-off, 
.tablet-on,
.phone-on {
	display: none;
}
.desktop-on, 
.tablet-off, 
.phone-off {
	display: block;
}
}
/* Tablets */
@media 
only screen and (min-device-width : 600px) and (max-device-width : 879px), 
only screen and (min-width : 600px) and (max-width : 879px) {
.tablet-off,
.desktop-on, 
.phone-on {
	display: none;
}
.tablet-on,
.desktop-off, 
.phone-off {
	display: block;
}
}
/* Mobile */
@media 
only screen and (min-device-width : 220px) and (max-device-width : 599px), 
only screen and (min-width : 220px) and (max-width : 599px) {
.phone-off,
.desktop-on, 
.tablet-on
 {
	display: none;
}
.phone-on, 
.desktop-off, 
.tablet-off {
	display: block;
}
}

/*********
Allgemeine Content Styles
*********/

h1 {
	font-size: 2.5rem; /* 40px 40/16 = 2.5 */
	font-weight: normal;
	color: #000;
	margin: 0;
	padding: 0;
	padding-bottom: 30px;
}


h2 {
	font-family: 'NeoSansStd-Bold';
	font-style: italic;
	font-size: 2.25rem;
	font-weight: normal;
	color: #f9cf0a;
	margin: 0;
	padding: 0;
	padding-bottom: 50px;
}

.work h2 {
	text-align: center;
	background: url(../img/layout/icon-dl.svg) no-repeat;
	background-position: center top;
	background-size: 70px 70px;
	padding-top: 100px;
	font-size: 2rem;
	min-height: 4rem;
	line-height: 2rem;
}

.partner h2 {
	text-align: left;
}

/*
@media 
only screen and (min-device-width : 520px) and (max-device-width : 730px), 
only screen and (min-width : 520px) and (max-width : 730px) {
.work h2 {
	font-size: 1rem;
}
}
@media 
only screen and (min-device-width : 220px) and (max-device-width : 519px), 
only screen and (min-width : 220px) and (max-width : 519px) {
h2 {
	font-size: 1.6rem;
	padding-bottom: 25px;
}
.work h2 {
	font-size: 1.25rem;
	text-align: center;
	background: url(../img/layout/icon-dl.svg) no-repeat;
	background-position: center top;
	background-size: 40px 40px;
	padding-top: 40px;
	padding-bottom: 15px;
}
}
*/
@media 
only screen and (min-device-width : 220px) and (max-device-width : 599px), 
only screen and (min-width : 220px) and (max-width : 599px) {
	.work h2 {
		min-height: inherit;
		padding-bottom: 20px;
	}
}

h3 {
	font-family: 'NeoSansStd-Bold';
	font-style: italic;
	font-size: 1.5rem;
	color: #f9cf0a;
	padding-bottom: 15px;
}

p {
	font-size: 1.1rem;
	padding: 0;
	margin: 0;
	padding-bottom: 15px;
}

.about p {
	font-size: 1.2rem;
	line-height: 2rem;
	text-shadow: 
		3px 0px 7px rgba(0, 0, 0, 0.8), 
		-3px 0px 7px rgba(0, 0, 0, 0.8), 
		0px 4px 7px rgba(0, 0, 0, 0.8);
}

.work p {
	text-align: center;
	text-shadow: 
		3px 0px 7px rgba(0, 0, 0, 0.8), 
		-3px 0px 7px rgba(0, 0, 0, 0.8), 
		0px 4px 7px rgba(0, 0, 0, 0.8);
}

img {
	border: 0;
}

.img-right {
	float: right;
	margin-left: 15px;
	margin-bottom: 15px;
}

@media 
only screen and (min-device-width : 220px) and (max-device-width : 599px), 
only screen and (min-width : 220px) and (max-width : 599px) {
.img-right {
	float: none;
	display: block;
	width: 100%;
	margin-left: 0px;
}
}

.img-left {
	float: left;
	margin-right: 15px;
	margin-bottom: 15px;
}

@media 
only screen and (min-device-width : 220px) and (max-device-width : 599px), 
only screen and (min-width : 220px) and (max-width : 599px) {
.img-right {
	float: none;
	display: block;
	width: 100%;
	margin-right: 0px;
}
}

/* Listen */
ul {
	padding: 0;
} 

li {
	list-style-type: none;
	font-size: 0.75rem; /* 12px 12/16 = 0.75 */
}

ul.list {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

ul.list li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	width: calc(33.33333% - 50px);
	padding-right: 50px;
}

ul.list.team li {
 	min-height: 400px;
}

ul.list.team li a {
	display: block;
}

.list.team li img {
	width: 100%;
}

.list.team li h2 {
	font-size: 1.5rem;
	padding-bottom: 15px;
	padding-top: 25px;
}

.list.team li p {
	padding-bottom: 0;
}

ul.list.partner li {
	width: calc(20% - 50px);
	padding-bottom: 50px;
}

ul.list.partner li a, 
ul.list.partner li span {
	display: block;
	background: #1a1e20;
	color: #f9cf0a;
	padding: 25px;
	text-align: center;
	text-decoration: none;
	font-size: 1.1rem;
}

ul.list.partner li a:hover {
	background: #f9cf0a;
	color: #1a1e20;
}

@media 
only screen and (min-device-width : 600px) and (max-device-width : 999px), 
only screen and (min-width : 600px) and (max-width : 999px) {
	ul.list li,
	ul.list.partner li {
		width: calc(50% - 25px);
	}
	ul.list li:nth-child(2n),
	ul.list.partner li:nth-child(2n) {
		padding-right: 0;
	}
	ul.list.work li:nth-child(3) {
		width: 100%;
		margin-top: 50px;
	}
}

@media 
only screen and (min-device-width : 220px) and (max-device-width : 599px), 
only screen and (min-width : 220px) and (max-width : 599px) {
ul.list li, 
ul.list.team li {
	margin: 0;
	padding: 0;
	padding-bottom: 15px;
	list-style: none;
	float: none;
	display: block;
	width: 100%;
	min-height: inherit;
}
ul.list.partner li {
	width: 100%;
}	
}


/*Links*/
a {
	color: #f9cf0a;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

/* Galerie */
/*** #khurfie ***/
.gallery-list {
	overflow: hidden;
	z-index: 50;
}

.gallery-list .entry {
	margin: 0;
	padding: 0;
}

.gallery-list .entry img {
	width: 100%;
	height: auto;
	display: block;
}

.gallery-list .entry a {
	text-decoration: none;
}

/* Salvattore - Masonry */
.gallery-list[data-columns]:before {
	content: '5 .column.size-1of5';
}
/* These are the classes that are going to be applied: */
.gallery-list .column { 
	float: left;
}
.gallery-list .size-1of5, 
.gallery-list .size-1of3 { 
	margin: 0;
	padding: 0;
	float: left;
	width: 20%;
}

.gallery-list .size-1of3 {
	width: 33.3334%;
}

@media 
only screen and (min-device-width : 220px) and (max-device-width : 920px), 
only screen and (min-width : 220px) and (max-width : 920px) {
.gallery-list[data-columns]:before {
	content: '3 .column.size-1of3';
}
}


/*********
Raster-Styles
*********/
body {
	font-size: 100%; /* 16px = 1em */
	height: 100%;
}

body, img, p, tr, td {
	color: #fff;
}
@media 
only screen and (min-device-width : 220px) and (max-device-width : 899px), 
only screen and (min-width : 220px) and (max-width : 899px) {
	* {
		font-size: 90%; 
	}
}

.main {
	width: 100%;
	min-height: 100%;	
	background: #000 url(../img/background/home.jpg) no-repeat center top;
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;  
	background-size: cover;	
}

.main.contact {
	min-height: auto;
}

.about {
	background-image: url(../img/background/team.jpg);
}

.main.work {
	background-image: url(../img/background/work.jpg);
}

.gallery {
	background-image: none;
	background-color: #1a1e20;
}

.contact,
.team, 
.partner {
	background-image: none;
}

.main.partner, 
.main.team, 
.main.work {
	height: auto;
	min-height: inherit;
}

section {
	border-top: 1px solid #f9cf0a;
}

.main .content {
	width: 100%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
}

.main .content .text {
	width: 100%;
	padding-top: 15%;
}

.main.about .content .text {
	width: 50%;
}

.main.partner .content .text, 
.main.team .content .text, 
.main.work .content .text {
	padding-bottom: 15%;
	text-align: center;
}

#logo {
	width: 80%;
	margin-left: -40%;
	position: absolute;
	left: 50%;
	top: 30%;
}

@media 
only screen and (min-device-width : 220px) and (max-device-width : 1450px), 
only screen and (min-width : 220px) and (max-width : 1450px) {
.main .content {
	width: auto;
	margin-left: 25px;
	margin-right: 25px;
}
}
@media 
only screen and (min-device-width : 220px) and (max-device-width : 599px), 
only screen and (min-width : 220px) and (max-width : 599px) {
.main {
	min-height: 70%;	
}
.about {
	background-image: none;
	background: #000;
}
.main.about .content .text {
	width: 100%;
}

.main.about img {
	width: 100%;
	height: auto;
	display: block;
}
}


/*********
Tabellen
*********/
table, tbody, thead {
	width: 100%;
	padding: 0;
	margin: 0;
	border: 0px;
	margin-bottom: 10px;
}

tr, td, th {
	border: 0px;
}

/*tr:nth-child(even) {
	background-image:url(../img/layout/bg_weiss60.png);
}*/

tr {
	padding: 0px;
	margin: 0px;
}

tr:hover {
	background-color: #e3b2b3;
}

th {
	padding: 2px;
	border-bottom: 1px solid #333;
	vertical-align: top;
	text-align: left;
	color: #fff;
	font-weight: bold;
	background-color: #C00;
}


td {
	margin: 0;
	padding: 2px;
	border-bottom: 1px dotted #333;
	vertical-align: top;
	text-align: left;
}

/*********
Formulare
*********/
fieldset {
	border: 0;
}

legend {
	padding: 0;
	margin: 0;
	margin-bottom: 7px;
	font-size: 1rem; /* 16px 16/16 = 1 */
	color: #000;	
	text-transform: uppercase;
}

label {
	display: block;	
	font-size: 1rem;
	margin-bottom: 5px;
}

label.cb {
	display: inline;
}

label.rd {
	display: inline;
	margin-right: 20px;
}

label.cb.pdf {
	display: inline-block;
	width: 50px;
}

.input-desc {
	font-size: 0.8rem;
	display: block;
	margin-top: -10px;
	margin-bottom: 15px;
}

input, 
select, 
textarea {
	background-color: #DBDBDB;
	border: 1px solid #333;
	padding: 4px;
	font-size: 0.8rem;
	width: 50%;
	margin-bottom: 15px;
}
@media 
only screen and (min-device-width : 220px) and (max-device-width : 599px), 
only screen and (min-width : 220px) and (max-width : 599px) {
input, 
select {
	width: 90%;
}
}

input:focus {
	border-color: #2A8E01;
}

input.checkbox, input.radio {
	width: auto;
	margin-right: 5px;
	border: 0;
}

input[type="submit"] {
	background-color: #DBDBDB; 
}

input[type="submit"]:hover {
	background-color: #fff;
	width: 50%;
}

.filter input[type="submit"] {
	width: inherit;
}

@media 
only screen and (min-device-width : 220px) and (max-device-width : 599px), 
only screen and (min-width : 220px) and (max-width : 599px) {
input[type="submit"]:hover {
	width: 90%;
}
textarea {
	width: 90%;
}
div.halb {
	width: 46%;
}
}

input.pflicht {
	border-right: 3px solid #2A8E01;
}

div.halb input.text {
	width: 90%;
}

/*********
Transparenzen
*********/
.opac70 {
	/* IE 8 */
	  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	  /* IE 5-7 */
	  filter: alpha(opacity=70);
	  /* Netscape/FireFox */
	  -moz-opacity: 0.7;
	  /* Safari 1.x */
	  -khtml-opacity: 0.7;
	  /* aktuelle Browser */
	  opacity: 0.7;
}

.opac100 {
	/* IE 8 */
	  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	  /* IE 5-7 */
	  filter: alpha(opacity=100);
	  /* Netscape/FireFox */
	  -moz-opacity: 1.0;
	  /* Safari 1.x */
	  -khtml-opacity: 1.0;
	  /* aktuelle Browser */
	  opacity: 1.0;
}

nav.main-nav ul li a.active {
    color: #E30613;
}

nav.social {
	position: fixed;
	right: 0;
	top: 25%;
	background-color: #1a1e20;
}
nav.social:hover {
	background-color: #f9cf0a;
}
nav.social svg {
	width: 50px;
	height: 50px;
	display: block;
}
nav.social:hover svg path,
nav.social:hover svg circle {
	fill: #1a1e20;
}

/* Special Effect */
.blazing {
	text-shadow: 0 2px 15px #E30613, 0 0 15px #E30613,
		0 0 8px #EF7D00,
		3px -4px 6px #FDD622,
		-3px -8px 8px #FDD622,
		0 -8px 25px #FDD622;
	animation: 2s blazing infinite alternate linear;
}

@keyframes blazing {
	0%   { text-shadow: 0 2px 15px #E30613, 0 0 15px #E30613,
		0 0 8px #EF7D00,
		0 0 0 #FDD622,
		0 0 4px #FDD622,
		-1px -4px 4px #FDD622,
		3px -8px 8px #FDD622; }
	25%   { text-shadow: 0 2px 15px #E30613, 0 0 25px #E30613,
		0 0 15px #EF7D00,
		0 0 4px #FDD622,
		-1px -4px 4px #FDD622,
		2px -8px 8px #FDD622,
		-3px -12px 15px #FDD622; }
	50%   { text-shadow: 0 2px 15px #E30613, 0 0 15px #E30613,
		0 -4px 8px #EF7D00,
		-1px -4px 4px #FDD622,
		2px -8px 8px #FDD622,
		-3px -12px 15px #FDD622,
		2px -15px 25px rgba(253, 214, 34, 0.5); }
	75%   { text-shadow: 0 3px 15px #E30613, 0 0 15px #E30613,
		0 -4px 8px #EF7D00,
		2px -4px 4px #FDD622,
		-3px -8px 8px rgb(253, 214, 34),
		1px -15px 25px rgba(253, 214, 34, 0.5),
		0px -20px 30px rgba(253, 214, 34, 0)}
	100%   { text-shadow: 0 2px 15px #E30613, 0 0 15px #E30613,
		0 0 8px #EF7D00,
		0 0 0 #FDD622,
		0 0 4px #FDD622,
		-1px -4px 4px #FDD622,
		3px -8px 8px #FDD622; }
}

.gm-style-iw-d * {
	padding: 5px;
}

.gm-style-iw-d * {
	color: #000000;
	text-align: center;
	padding: 0;
	margin: 0;
}