/*!
 * Start Bootstrap - Creative Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
}

hr {
    max-width: 50px;
    border-color: #e2001a;
    border-width: 3px;
}

hr.light {
    border-color: #fff;
}

a {
    color: #e2001a;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

a:hover,
a:focus {
    color: #e2001a;
}



h1{
	font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
}

h2,
h3,
h4,
h5,
h6 {
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
}

p {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.5;
}

.bg-primary {
    background-color: #e2001a;
}

.bg-dark {
    color: #fff;
    background-color: #222;
}

.text-faded {
    color: rgba(255,255,255,.7);
}

section {
    padding: 10px 0 100px;
}

aside {
    padding: 50px 0;
}

.no-padding {
    padding: 0;
}

.navbar-default {
	padding-right:50px;
    border-color: rgba(34,34,34,.05);
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
    background-color: #fff;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

.navbar-default .navbar-header .navbar-brand {
    text-transform: uppercase;
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
    font-weight: 700;
    color: #e2001a;
}

.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
    color: #e2001a;
}

.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 900;
    color: #222;
}

.navbar-default .nav > li>a:hover,
.navbar-default .nav>li>a:focus:hover {
    color: #e2001a;
}

.navbar-default .nav > li.active>a,
.navbar-default .nav>li.active>a:focus {
    color: #e2001a!important;
    background-color: transparent;
}

.navbar-default .nav > li.active>a:hover,
.navbar-default .nav>li.active>a:focus:hover {
    background-color: transparent;
}

@media(min-width:768px) {
    .navbar-default {
        border-color: rgba(255,255,255,.3);
        background-color: transparent;
    }

    .navbar-default .navbar-header .navbar-brand {
        color: rgba(255,255,255,.7);
    }

    .navbar-default .navbar-header .navbar-brand:hover,
    .navbar-default .navbar-header .navbar-brand:focus {
        color: #fff;
    }

    .navbar-default .nav > li>a,
    .navbar-default .nav>li>a:focus {
        color: rgba(255,255,255,.7); /* Farbe nav elemente top scroll  */
    }

    .navbar-default .nav > li>a:hover,
    .navbar-default .nav>li>a:focus:hover {
        color: #fff;
    }

    .navbar-default.affix {
        border-color: rgba(34,34,34,.05);
        background-color: #fff;
    }

    .navbar-default.affix .navbar-header .navbar-brand {
        font-size: 30px;
        color: #e2001a;
    }

    .navbar-default.affix .navbar-header .navbar-brand:hover,
    .navbar-default.affix .navbar-header .navbar-brand:focus {
        color: #e2001a;
    }

    .navbar-default.affix .nav > li>a,
    .navbar-default.affix .nav>li>a:focus {
        color: #222;
    }

    .navbar-default.affix .nav > li>a:hover,
    .navbar-default.affix .nav>li>a:focus:hover {
        color: #e2001a;
    }
}

header {
    position: relative;
    width: 100%;
    min-height: auto;
    text-align: center;
    color: #000;
    background-image: url(../img/fotalia/bg-black.jpg);
    background-position: center;
	background-attachment:scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
	
}

header .header-content {
    position: relative;
    width: 100%;
    padding: 100px 15px;
    text-align: center;
}

header .header-content .header-content-inner h1 {
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 100;
}

header .header-content .header-content-inner hr {
    margin: 30px auto;
}

header .header-content .header-content-inner p {
    margin-bottom: 50px;
    font-size: 16px;
    font-weight: 300;
    color: rgba(0,0,0,.7);
}

@media(min-width:768px) {
    header {
        min-height: 100%;
    }

    header .header-content {
        position: absolute;
        top: 50%;
        padding: 0 50px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    header .header-content .header-content-inner {
        margin-right: auto;
        margin-left: auto;
        max-width: 1000px;
    }

    header .header-content .header-content-inner p {
        margin-right: auto;
        margin-left: auto;
        max-width: 80%;
        font-size: 18px;
    }
}

.section-heading {
    margin-top: 0;
}

.service-box {
    margin: 50px auto 0;
    max-width: 400px;
}

@media(min-width:992px) {
    .service-box {
        margin: 20px auto 0;
    }
}

.service-box p {
    margin-bottom: 0;
}

.portfolio-box {
    display: block;
    position: relative;
    margin: 0 auto;
    max-width: 650px;

}

.portfolio-box .portfolio-box-caption {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #fff;
    opacity: 0;
    background: rgba(226,0,26,.9);
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    transform: translateY(-50%);
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
    padding: 0 15px;
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
    font-size: 18px;
}

.portfolio-box:hover .portfolio-box-caption {
    opacity: 1;
}

@media(min-width:768px) {
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
        font-size: 16px;
    }

    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
        font-size: 22px;
    }
}

.call-to-action h2 {
    margin: 0 auto 20px;
}

.text-primary {
    color: #e2001a;
}

.no-gutter > [class*=col-] {
    padding-right: 0;
    padding-left: 0;
}

.btn-default {
    border-color: #fff;
    color: #222;
    background-color: #fff;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    border-color: #ededed;
    color: #EC0C10;
    background-color: #000000;
}

.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
    background-image: none;
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
    border-color: #fff;
    background-color: #fff;
}

.btn-default .badge {
    color: #fff;
    background-color: #222;
}

.btn-primary {
    border-color: #e2001a;
    color: #fff;
    background-color: #e2001a;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    border-color: #e2001a;
    color: #E61216;
    background-color: #000000;
}

.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-image: none;
}

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
    border-color: #e2001a;
    background-color: #e2001a;
}

.btn-primary .badge {
    color: #e2001a;
    background-color: #fff;
}

.btn {
    border: 0;
    border-radius: 300px;
    text-transform: uppercase;
    font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
    font-weight: 700;
}

.btn-xl {
    padding: 15px 30px;
}

::-moz-selection {
    text-shadow: none;
    color: #fff;
    background: #222;
}

::selection {
    text-shadow: none;
    color: #fff;
    background: #222;
}

img::selection {
    color: #fff;
    background: 0 0;
}

img::-moz-selection {
    color: #fff;
    background: 0 0;
}

body {
    webkit-tap-highlight-color: #222;
}

.team-member{
	text-align:center;margin-bottom:50px;}
.team-member img{
	margin:0 auto;border:7px solid #fff;}
.team-member h4{
	color:white;margin-top:25px;margin-bottom:5px;text-transform:none;
	font-weight:bold;}
.team-member p{
	margin-top:0;}
	
	
/* Hintergründe: 															--------*/	

.bg-light-gray{
	background-image: linear-gradient(to top, white 0%, #C8C8C8 60%);
/*background-image: linear-gradient(to top, white 10%, black 50%);
background-image: linear-gradient(45deg, white 0%, black 50%);
	background-color:rgba(104,104,104,0.90);
	*/
	/*background-image:url(../img/dark_fish_skin.png);
	background-attachment:fixed;}
	*/
	}
	
	.bg-light-gray{
	background-image: linear-gradient(to bottom, white 0%, #DFDFDF 40%);	
	}
	
	.bg-red{
	background-color:#e2001a;
	}
	
	.bg-fish-gray{
	background-image:url(../img/dark_fish_skin.png);
	background-attachment:fixed;}
	
.bg-diamond {
	background-image:url(../img/diamond.png);
	background-attachment:fixed;
}

.bg-grunge {
	background-image:url(../img/grunge.png);
	background-attachment:fixed;
}

.bg-creative-mess {
	 position: relative;
    width: 100%;
    min-height: auto;
    text-align: center;
    color: #000;
    background-image: url(../img/messc.jpg);
    background-position: center;
	background-attachment:fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
	
}


.bg-white{
	background-color:white;	
}

.darkframe{
backround-color: rgba(66,66,66,0.74)	
}

.shadow{
text-shadow:2px 2px 2px 2px white;	
}

.underline{
text-decoration:underline;	
}
/* About us Kreise style ----------------------------------------------------*/
	
.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	cursor: default;
}

.ch-info-wrap, 
.ch-info{
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;
}

.ch-info-wrap {
	top: 20px;
	left: 20px;
	background: #f9f9f9 url(../images/bg.jpg);
	box-shadow: 
		0 0 0 20px rgba(255,255,255,0.2), 
		inset 0 0 3px rgba(115,114, 23, 0.8);

}

.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	
	-webkit-backface-visibility: hidden; /*Just for webkit to have a smooth font*/
}

.ch-info .ch-info-front {
	-webkit-transition: all 0.6s ease-in-out;
	-moz-transition: all 0.6s ease-in-out;
	-o-transition: all 0.6s ease-in-out;
	-ms-transition: all 0.6s ease-in-out;
	transition: all 0.6s ease-in-out;
}

.ch-info .ch-info-back {
	opacity: 0;
	background: rgba(10,10,17,0.2); /*background hover effect*/
	pointer-events: none;
	
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	
	-webkit-transition: all 0.4s ease-in-out 0.2s;
	-moz-transition: all 0.4s ease-in-out 0.2s;
	-o-transition: all 0.4s ease-in-out 0.2s;
	-ms-transition: all 0.4s ease-in-out 0.2s;
	transition: all 0.4s ease-in-out 0.2s;
}

.ch-img-1 { 
	background-image: url(../img/team/didi.jpg);
}

.ch-img-2 { 
	background-image: url(../img/team/chris.jpg);
}

.ch-img-3 { 
	background-image: url(../images/15.jpg);
}

.ch-info h3 {
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 18px;
	margin: 0 15px;
	padding: 40px 0 0 0;
	height: 80px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px 0;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info p a {
	display: block;
	color: #e7615e;
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.smaller{
font-size:7px !important;	
}
.ch-info p a:hover {
	color: #fff;
}

.ch-item:hover .ch-info-front {
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	
	opacity: 0;
} 

.ch-item:hover .ch-info-back {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	
	opacity: 1;
	pointer-events: auto;
}	
.ch-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
	width: 220px;
	height: 220px;
	display: inline-block;
	margin: 100px;
}

.headings{
	color:white;
	font-family:'Open Sans', Arial, sans-serif;
	letter-spacing:1px;
	font-weight:normal;
	font-size:120%;
	
	
	
}

.headingsdark{
	color:black;
	font-family:'Open Sans', Arial, sans-serif;
	letter-spacing:1px;
	font-weight:normal;
	font-size:24px;
	
	
}

.lightwhite{
color:white;	
}

.impressumlist {
list-decoration:none;	
}

impressumlist ul{
list-style:none;	
}
.impressumlist ul li{
list-style:none;	
}

.impressumfooter{
height:200px;
padding-top:160px;;
}

.footerp{
font-size:15px;
	
}

.referenz-item{

}

#portfolio .portfolio-item{
	margin:0 0 15px;right:0}
#portfolio .portfolio-item .portfolio-link{
	display:block;
	position:relative;
	max-width:300px;
	margin:0 auto}
#portfolio .portfolio-item .portfolio-link .portfolio-hover{
	background:rgba(200,01,00,.8);
	position:absolute;
	width:100%;
	height:100%;
	opacity:0;transition:all ease .5s;
	-webkit-transition:all ease .5s;
	-moz-transition:all ease .5s}
#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover{
	opacity:1}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content{
	position:absolute;
	width:100%;
	height:20px;
	font-size:20px;
	text-align:center;
	top:50%;
	margin-top:-12px;
	color:#fff}
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i{
	margin-top:-12px}
	#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4{
		margin:0}
	#portfolio .portfolio-item .portfolio-caption{
		max-width:300px;
		margin:0 auto;
		background-color:#fff;
		text-align:center;
		padding:25px}
		#portfolio .portfolio-item .portfolio-caption h4{
			text-transform:none;
			margin:0}
	#portfolio .portfolio-item .portfolio-caption p{
		font-family:"Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
		font-style:italic;
		font-size:16px;margin:0}
	#portfolio *{z-index:2}@media (min-width:767px){#portfolio .portfolio-item{
		margin:0 0 30px}}
		
.portfolio-modal .modal-content{
	border-radius:0;
	background-clip:border-box;
	-webkit-box-shadow:none;
	box-shadow:none;
	border:0;
	min-height:100%;
	padding:100px 0;
	text-align:center}
	
	.portfolio-modal .modal-content h2{
		margin-bottom:15px;
		font-size:3em}
		
		.portfolio-modal .modal-content p{margin-bottom:30px}
		.portfolio-modal .modal-content p.item-intro{margin:20px 0 30px;
		font-family:"Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
		font-style:italic;
		font-size:16px}
		.portfolio-modal .modal-content ul.list-inline{
			margin-bottom:30px;
			margin-top:0}
			.portfolio-modal .modal-content img{
				margin-bottom:30px}
				.portfolio-modal .close-modal{
					position:absolute;
					width:75px;
					height:75px;
					background-color:transparent;
					top:25px;
					right:25px;
					cursor:pointer}
					
					.portfolio-modal .close-modal:hover{
						opacity:.3}
						
						.portfolio-modal .close-modal .lr{
							height:75px;
							width:1px;
							margin-left:35px;
							background-color:#222;
							transform:rotate(45deg);
							-ms-transform:rotate(45deg);
							-webkit-transform:rotate(45deg);
							z-index:1051}
							
							.portfolio-modal .close-modal .lr .rl{
								height:75px;
								width:1px;
								background-color:#222;
								transform:rotate(90deg);
								-ms-transform:rotate(90deg);
								-webkit-transform:rotate(90deg);
								z-index:1052}
								
								.portfolio-modal .modal-backdrop{
									opacity:0;
									display:none}
									
									::-moz-selection{
										text-shadow:none;
										background:#E34446}/*keine ahnung was füre eine farbe*/
										::selection{
											text-shadow:none;
										background:#E34446}
										img::selection{
											background:0 0}
											img::-moz-selection{
												background:0 0}
												
/* Gray Scale */
.hover08 figure img {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover08 figure:hover img {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
}

silben{
hyphens:auto;	
}

logo-image{
width:100%;
height:auto;
text-align:center;
display:block;
marging: 10px;	
}



.js div#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #333 url('http://files.mimoymima.com/images/loading.gif') no-repeat center center; }