/* CSS-Start Pascal aka Rescal*/

@font-face {
  font-family:'Josefin Sans';
  src: url('../sys_font/JosefinSans-VariableFont_wght.ttf') format('truetype');
}

@font-face {
  font-family:'Lexend Deca';
  src: url('../sys_font/LexendDeca-VariableFont_wght.ttf') format('truetype');
}

html {
  position: relative;
  font-family: 'Lexend Deca', sans-serif;
  font-weight: 400;
  font-size: 18px;
  min-width: 320px;
  color: #515151;
  overflow-x:hidden;
}
body {
  background-color: #ffffff;
  color: #303033;
  overflow-x:hidden;
  font-family: 'Lexend Deca', sans-serif;
  margin:0;
}

h1, h2, h3, h4, h5, h6 {
	color:#041332;
	font-weight: 300;
}


h1 b, h2 b, h3 b, h4 b, h5 b, h6 b, h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
  font-weight: 300;
}



button , button:active , button:focus {
	outline:0;
}


a {
	color:#303033;
	text-decoration:none;
}


.white p ,.white h1,.white h2,.white h3,.white h4,.white h5,.white h6,.white a{
	color:#fff;
}

.txt {
	line-height:2.0;
}

h1 {
	font-size:70px;
}


h2 {
	font-size:48px;
}

h3 {
	font-size:36px;
}

h4 {
	font-size:24px;
}

p span , h2 span , h3 span{

}

em {
	font-style:normal;
	color:#c0b172;
	font-size:36px
}

.test-block {
	width:100%;

	min-height:300px;
	background-color:pink;
}

.bx-wrapper {
	box-shadow:none;
}

.golden {
	position:relative;
	box-shadow: 0px 27px 58px -20px rgba(0,0,0,0.65);
}

.golden:after { 
	content:'';
	position:absolute;
	bottom:-12px;
	right:0;
	width:80%;
	height:12px;
	background-color:#c0b172;
	
}

.white {
	color:#ffffff;
}

.txt {
	line-height:2.0;
}

.shadow {
		box-shadow: 0px 27px 68px -20px rgba(0,0,0,0.65);
}

.shadow-l {
		box-shadow: 0px 27px 68px -20px rgba(0,0,0,0.35);
}

.margin-top {
	margin-top:50px;
}

.margin-bottom {
	margin-bottom:50px;
}

.margin {
	margin:140px 0;
}

.img-responsive {
	width:100%;
	height:auto;
}

.margin-small-bottom {
	margin-bottom:35px;
}

.padding-lr0 {
	padding-left:0;
	padding-right:0;
}

.align-self-center {
	align-self: center;
	
}

/*
.malschaun {
	flex-direction:column;
	align-items:center;
	justify-content:center;
}

*/

a:hover {
	text-decoration:none;
	color:#ececec;
}

.button {
	color:#ffffff;
	background: linear-gradient(45deg, rgba(172,52,40,1) -30%, rgba(249,172,188,1) 130%);
	padding:18px 40px;
	border-radius:0 50px 0 50px;
	cursor:pointer;
	display:inline-block;
	font-weight:700;

}

.button:hover {
	color:#ffffff;
	background:linear-gradient(90deg, rgba(172,52,40,1) -30%, rgba(249,172,188,1) 130%);
	text-decoration:none;

}

.malschaun video.cinema {
	background-image:url(../sys_img/thumbnail.jpg);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}

video {
	    outline: 0;
}

.video-wrapper {
	width:100%;
	position:relative;
}

.video-wrapper:before {
	content:'';
	position:absolute;
	top:50%;
	left:50%;
	height:100px;
	width:100px;
	background-color:rgba(22, 22, 22, 0.73);
	border-radius:100%;
	transform:translate(-50% , -50%);
	pointer-events:none;
	}

.video-wrapper:after {
	content:'';
	position:absolute;
	top:50%;
	left:calc(50% + 7px);
	 width: 0;
	  height: 0;
	  transform:translate(-50% , -50%);
	  border-left:  30px solid #c0b172;
	  border-bottom: 15px solid transparent;
	   border-top: 15px solid transparent;
	   pointer-events:none;
	}

.pseudo-delete:after {
	content:none !important;
}

.pseudo-delete:before {
	content:none !important;
}

.vorteil-v {
	background-image: url(../sys_img/thumbnail.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* -------------- Navbar -------------- */


#page-header {
	z-index:9999999
}

#navbar li a {
	color:#303033;
	font-size:21px;
	font-weight:700;
}

.navbar {
	padding-top:20px;
	padding-bottom:20px;
	flex-grow: 1;
	padding-left: 0;
}

#header-bottom {
	position:relative;
}

.navbar-brand {
	background-image:url(../sys_img/logo.png);
	background-position:left;
	background-repeat:no-repeat;
	background-size:contain;
	height:93px;
	width:117px;
	z-index: 1000000;
	position: relative;
}

.navbar-toggler {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	padding: 0;
	margin: 0;
	background-color: transparent;
    border: 0;
}

.navbar-toggler .icon-bar {
	background-color: #da5752;

	width:40px;
	height:3px;
	display:block;
	
}


.navbar-toggler .icon-bar:nth-child(2){
	width:47px;
	position:relative;
	transform: rotate(-45deg);
	top: 3px;
	transition: transform 0.5s, width 0.5s ,left 0.5s ease ,top 0.5s ease;
}



.navbar-toggler .icon-bar:nth-child(3){
	width:47px;
	position:relative;
	transform: rotate(45deg);
	transition: transform 0.5s ease, width 0.5s  ,left 0.5s ease;
	transform-origin: left;
	top: -17px;
	left: 6px;
}

.navbar-toggler .icon-bar:last-child{
	width:20px;
	margin:0;
	position:relative;
	bottom:20px;
	opacity:0;
	transition: opacity 0.4s ease,bottom 0.2s ease;
}


.navbar-toggler.collapsed {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	padding: 0;
	margin: 0;
	background-color: transparent;
    border: 0;
}

.navbar-toggler.collapsed .icon-bar {
	background-color: #da5752;
	margin-bottom:11px;
	width:40px;
	height:3px
		transform-origin: initinal;
}

.navbar-toggler.collapsed .icon-bar:nth-child(2){
	width:40px;
	transform:none;
	left:0;
	top:0;
	transform-origin: initinal;
}

.navbar-toggler.collapsed .icon-bar:nth-child(3){
	width:30px;
	transform:none;
	left:0;
	top:0;
		transform-origin: initinal;
}

.navbar-toggler.collapsed .icon-bar:last-child{
	width:20px;
	margin:0;
	bottom:0;
	opacity:1;
}

#navbar {
	position:absolute;
	top:100%;
	background-color:#ffffff;
	padding-top:30px;
	padding-bottom:30px;
	border-bottom:5px solid #da5752; 
	width:100%;
	z-index:9999999;
	text-align: center;
	left: 0;
}

.navbar-nav {

}
/* -------------- -------------- */

.nav-cont {
	display:flex;
	flex-wrap: nowrap;
	justify-content:flex-start;

}

.navbar-menue-item {
	display:flex;
	flex-wrap: nowrap;
	justify-content:flex-start;
	width: 100%;
}
/* -------------- -------------- */
	
#topbar {
	justify-content: flex-end;
	align-items: center;
	width: auto;
	z-index:9;
	padding:0;
}

#topbar .contact-info{
	font-size:18px;
	
}

#topbar .contact-info dl{
	display:flex;
	justify-content:flex-end;
	margin:0;
	font-style:normal;
}

#topbar .contact-info dl dd{

	display:inline-block;
}

#topbar .contact-info dl dd a{
	padding-top:5px;
	padding-bottom:5px;
	color:#ffffff
}

#topbar .contact-info dl dd a:hover{
	color:#ececec;
	text-decoration:none;
}

#topbar .contact-info dl .phone {
	padding-left:36px;
	background-image:url(../sys_img/icons/phone.svg);
	background-position:left center;
	background-size:21px 21px;
	background-repeat:no-repeat;
	padding-right:14px;

}

	#topbar .contact-info dl .mail {

	padding-left:14px;
	border-left:solid 1px #ffffff;
}

address {
	margin:0;
}
dd {
	margin-bottom:0;
	margin-left:0;
}

.fixed {
		position:fixed;
	}

/* Löschen nachdem ich Bootstrap eingebaut habe */

.navbar-brand {
  display: inline-block;
  padding-top: .3125rem;
  padding-bottom: .3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-expand-md {
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -ms-flex-pack: start;
  justify-content: flex-start;
}
.navbar {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: .5rem 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
}
	
	
	.navbar-nav {
	  display: -ms-flexbox;
	  display: flex;
	  -ms-flex-direction: column;
	  flex-direction: column;
	  padding-left: 0;
	  margin-bottom: 0;
	  list-style: none;
	  margin-top:0;

}
	
.navbar-expand-md .navbar-nav {
	flex-direction: row;
}

.navbar-collapse {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-align: center;
  align-items: center;
}





/*----------------------------------------------*/



#teaser {

	position:relative;
	height:100%;


}

#teaser:before {
	position:absolute;
	content:'';
	background-image:url(../sys_img/teaser.jpg);
	background-position:bottom center ;
	background-size:cover;
	background-repeat:no-repeat;
	background-color:initial;
	padding-bottom:36px;
	padding-top:300px;
	height:calc(100vh + 50px);
	top:-167px;


		z-index:-1;
}

#teaser:after{
	position:absolute;
	content:'';
	background: linear-gradient(43deg, rgba(255,253,228,0.88) 0%, rgba(0,90,167,0.88) 180%); 
	padding-bottom:36px;
	padding-top:300px;
	height:calc(100vh + 50px);
	top:-167px;

	z-index:-1;
	display:block;
}

.background-t-text-1 {
	position: absolute;
    z-index: -2;
    font-size: 132px;
    color: white;
    text-shadow: -1px -1px 0 #e6e6e6, 1px -1px 0 #e6e6e6, -1px 1px 0 #e6e6e6, 1px 1px 0 #e6e6e6;
    text-transform: uppercase;
    letter-spacing: 35px;
    font-family: 'Josefin Sans';
    font-weight: 900;
    top: -30px;
    right: -200px;
    margin: 0;
}

.background-t-text-1:after {
	content:'';
	top:-50px;
	right:0;
	width:480px;
	height:28px;
	position:absolute;
	box-shadow: 0px 0px 0px 1px #E6E6E6;
}

.background-t-text-2 {
	position: absolute;
    z-index: -2;
    font-size: 132px;
    color: white;
    text-shadow: -1px -1px 0 #e6e6e6, 1px -1px 0 #e6e6e6, -1px 1px 0 #e6e6e6, 1px 1px 0 #e6e6e6;
    text-transform: uppercase;
    letter-spacing: 35px;
    font-family: 'Josefin Sans';
    font-weight: 900;
    bottom: -30px;
    right: inherit;
	left:260px;
    margin: 0;
}

.background-t-text-2::after {
  content: '';
  top: 150px;
  right: calc(100% - -620px);
  width: 480px;
  height: 28px;
  position: absolute;
  box-shadow: 0px 0px 0px 1px #E6E6E6;
}


.background-t-text-2 span{
	/* text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; */
	color:#fff;
}

.teaser-flex {
	padding-top:100px;
} 

.teaser-text {
	padding-bottom:130px;
	position:relative;
}



.show-bllock {
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	margin-top:100px;
	
}

.port-item {
	width:202px;
	height:386px;
		border-radius:0 50px 0 50px;
	box-shadow: 0px 0px 15px 0px rgba(60,60,60,0.57);
	background-color:#ffffff;
	background-image:url(../sys_img/teaser.jpg);
	background-size:cover;
	background-position:top center;

	}

.port-item:nth-child(odd) {
	margin-top:75px;
}

.port-1 {
	background-image:url(../sys_img/Campbell.png);
}

.port-2 {
	background-image:url(../sys_img/gertv1.png);
}

.port-3 {
	background-image:url(../sys_img/mercedes.jpg);
}

.port-4 {
	background-image:url(../sys_img/back.png);
}




/* -------------------------------*/

#Service {
	/*background: linear-gradient(-45deg, rgba(255,255,255,1) 0% ,#f9f9f9 50%, rgba(255,255,255,1) 100%);*/
	background: linear-gradient(180deg, rgba(255,253,228,0.05) 0%, rgba(0,90,167,0.05) 300%);
	padding-top:100px;
	padding-bottom:200px;
	margin-top:0px;
}

#Service > .container {
	position:relative;
	padding-top:50px;
	padding-bottom:100px;
}
/*
#Service h2 {
    position: absolute;
    z-index: -2;
    font-size: 192px;
    color: white;
    text-shadow: -2px -2px 0 #e6e6e6, 2px -2px 0 #e6e6e6, -2px 2px 0 #e6e6e6, 2px 2px 0 #e6e6e6;
    text-transform: uppercase;
    letter-spacing: 35px;
    font-family: 'Josefin Sans';
    font-weight: 900;
    left: -170px;
	top:0;
    margin: 0;
}
*/

.fancy-text{
	display:inline;
}

.fancy-text span:first-child {
    position: absolute;
    z-index: -2;
    font-size: 192px;
    color: white;
    text-shadow: -2px -2px 0 #e6e6e6, 2px -2px 0 #e6e6e6, -2px 2px 0 #e6e6e6, 2px 2px 0 #e6e6e6;
    text-transform: uppercase;
    letter-spacing: 35px;
    font-family: 'Josefin Sans';
    font-weight: 900;
    left: -185px;
	top:0;
    margin: 0;
}

.fancy-text span:last-child {
	position: absolute;
    z-index: -2;
    font-size: 192px;
    color: white;
    text-shadow: -2px -2px 0 #e6e6e6, 2px -2px 0 #e6e6e6, -2px 2px 0 #e6e6e6, 2px 2px 0 #e6e6e6;
    text-transform: uppercase;
    letter-spacing: 35px;
    font-family: 'Josefin Sans';
    font-weight: 900;
    right: -185px;
	bottom:0;
    margin: 0;
}


#Service .row {
	position:relative;

	
}
/*
#Service .row:after {
	content: '';
    top: -25px;
   left:-150px;
    width: 800px;
    height: 100px;
    position: absolute;
    box-shadow: 0px 0px 0px 1px #e6e6e6;
	z-index:-1;
}
*/
/*
#Service .row:before {
	content: '';
    bottom: -0px;
	right:-100px;
    width: 720px;
    height: 100px;
    position: absolute;
    box-shadow: 0px 0px 0px 1px #e6e6e6;
	z-index:-1;
}
 */   
.service-box {
	margin-bottom:50px;
	width:100%;
	/*background: linear-gradient(43deg, rgba(255,253,228,0.88) 0%, rgba(0,90,167,0.88) 180%);*/
}

.service-box > div {
	display:flex;
	border-radius:0 ;
	box-shadow: 0px 0px 15px 0px rgba(60,60,60,0.1);
	padding: 30px 30px;
	background-color:#ffffff;
	min-height:215px;
	flex-wrap:wrap;

}

.service-box:first-child > div {
	border-radius:50px 0 0 0;

	
}

.service-box:last-child > div {
	border-radius:0 0 50px 0 ;

	
}

.service-box > div h3{
	margin:0;
	font-size:21px;
	font-weight:600;
	width:100%;

}

.service-box > div p{
	margin-top:15px;
	margin-bottom:0;
	font-size:12px;
	font-weight:400;
	color:#ccc;
	align-self:flex-end;
	width:100%;
}
 
.service-box .service-icon {
	width:40px;
	height:40px;
	background-color:#ffdedf;
	border-radius:5px 0 5px 0 ;
	margin-bottom:20px;
	background-image:url(../sys_img/icons/benutzer.svg);
	background-size:20px 20px;
	background-position:center;
	background-repeat:no-repeat;
}

.service-icon.icon_1 {
	background-image:url(../sys_img/icons/designer.svg);
}
.service-icon.icon_2 {
	background-image:url(../sys_img/icons/css.svg);
}
.service-icon.icon_3 {
	background-image:url(../sys_img/icons/consultation.svg);
}
.service-icon.icon_4 {
	background-image:url(../sys_img/icons/app-development.svg);
}
.service-icon.icon_5 {
	background-image:url(../sys_img/icons/seo.svg);
}
.service-icon.icon_6 {
	background-image:url(../sys_img/icons/cms.svg);
}
.service-icon.icon_7 {
	background-image:url(../sys_img/icons/web.svg);
}
.service-icon.icon_8 {
	background-image:url(../sys_img/icons/all-inclusive.svg);
}


.service-box:nth-child(even)  .service-icon{

}

.service-box:nth-child(8n-1) .service-icon,
.service-box:nth-child(8n-3) .service-icon,
.service-box:nth-child(8n-6) .service-icon,
.service-box:nth-child(8n-12) .service-icon{
	background-color:#e4f3ff;

}

.weil-flex-nicht-geht {
	display:none;
}



/*----------------------------------------------*/
#About_me{
	
}

.me-img-container{
	position:relative;
	display: flex;
	justify-content: center;
}

.me-img {
	position:relative;
	left:0px;
	top:0;
	height:100%;

	
}

.about-text-col {
	align-self:center;
}



.about-text-box h2{
	text-align:center;
	font-weight:600;
	letter-spacing:1px;
}



.seperator {
	height:60px;
	width:100%;
	position:relative;
	background-image:url(../sys_img/icons/dimond.svg);
	background-position:center;
	background-repeat:no-repeat;
	background-size:contain;
	overflow-x:hidden;
	margin:75px 0;
}

.seperator:after {
	  content: '';
	  width: 100%;
	  left: calc(50% + 40px);
	  top: 50%;
	  transform: translateY(-50%);
	  height: 3px;
	  background-color: #e6e6e6;
	  position: absolute;
}

.seperator:before{
	content: '';
	width: 100%;
	right: calc(50% + 40px);
	top: 50%;
	transform: translateY(-50%);
	height: 3px;
	background-color: #e6e6e6;
	position: absolute;
	
}

.about-text-box p{
	text-align:center;
	line-height: 2;
letter-spacing: 1px;
}

.about-text-col *:last-child {
	margin-bottom:200px;
}

/*----------------------------------------------*/
#Portfolio {
	background: linear-gradient(360deg, rgba(255,253,228,0.05) 0%, rgba(0,90,167,0.05) 300%);
	padding-top:150px;
	padding-bottom:150px;
	margin-top:0px;
}



#Portfolio > .container {
	position:relative;
	padding-top:100px;
	padding-bottom:100px;
}
/*
#Service h2 {
    position: absolute;
    z-index: -2;
    font-size: 192px;
    color: white;
    text-shadow: -2px -2px 0 #e6e6e6, 2px -2px 0 #e6e6e6, -2px 2px 0 #e6e6e6, 2px 2px 0 #e6e6e6;
    text-transform: uppercase;
    letter-spacing: 35px;
    font-family: 'Josefin Sans';
    font-weight: 900;
    left: -170px;
	top:0;
    margin: 0;
}
*/



._3D-hover-container.portfolio {
	padding:30px 15px ;
}

._3D-hover-container.portfolio ._3D-hover-box-wrap {
	height:300px;
}

._3D-hover-container.portfolio ._3D-hover-box{
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-around;
	text-align: center;
	color:#000;
	font-size: 30px;
	font-weight: 700;
	text-transform: uppercase;
	transition: all 0.6s ease-out;
	transform:rotateX(0deg) rotateY(0deg);
	perspective: 1000px;
	transform-style: preserve-3d;
	/*-webkit-text-stroke: 1px #fff;
	text-stroke: 4px #fff;*/
	background-image:url(../sys_img/Campbell.png);
	background-size:cover;
	background-position:center top;
	background-repeat:no-repeat;
	box-shadow: 0px 0px 15px 0px rgba(60,60,60,0.57);
}

._3D-hover-container.portfolio ._3D-hover-box.portfolio_1{ 
	background-image:url(../sys_img/Campbell.png);
}
._3D-hover-container.portfolio ._3D-hover-box.portfolio_2{ 
	background-image:url(../sys_img/gertv1.png);
}
._3D-hover-container.portfolio ._3D-hover-box.portfolio_3{ 
		background-image:url(../sys_img/mercedes.jpg);
}
._3D-hover-container.portfolio ._3D-hover-box.portfolio_4{ 
	background-image:url(../sys_img/back.png);
}

.portfolio ._3D-hover-box div , .drawing ._3D-hover-container ._3D-hover-box div {
	opacity:0;
	background-color:rgb(255 255 255 / 74%);
	padding:5px;
	transform: translateZ(80px) translateY(-30px);
	transition:opacity 0.5s ease,transform 0.5s ease ; 
}

.portfolio:hover ._3D-hover-box div , .drawing ._3D-hover-container:hover  ._3D-hover-box div {
	opacity:1;
	transform:translateY(0px) translateZ(80px);
	transition:opacity 0.5s ease,transform 0.5s ease ; 
}

.drawing ._3D-hover-box{
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-around;
	text-align: center;
	color:#000;
	font-size: 90px;
	font-weight: 400;
	text-transform: uppercase;
	transition: all 0.6s ease-out;
	transform:rotateX(0deg) rotateY(0deg);
	perspective: 1000px;
	transform-style: preserve-3D;
	background-image:url(../sys_img/Summer_in_the_City_2.png);
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	writing-mode: vertical-lr; 
	text-orientation: upright; 
	letter-spacing: -40px;
	
}

.drawing ._3D-hover-container {
	padding-top:100px;
	padding-bottom:50px;
}



/*----------------------------------------------*//*----------------------------------------------*/
#block_1 {
	margin-top:150px;
	margin-bottom:150px;
}

#block_1 .container{
	position:relative;
}

._3D-hover-container {
	display:flex;
	justify-content:center;
}

._3D-hover-box-wrap{
	width: 100%;
	height: 600px;
	position: relative;
	transition: all 0.6s ease-out;
	perspective: 1000px
}
._3D-hover-box-wrap:hover{
	transition: all 0.3s linear;
	transform: scale(1.1);
}

._3D-hover-box div {
	transform:translateZ(80px);


}
._3D-over{
	width: 33.333%;
	height: 33.333%;
	position: absolute;
	z-index: 1;
}

._3D-over:nth-child(1){ 
	left: 0;
	top: 0; 

}


._3D-over:nth-child(2) {
	left: 33.333%;
	top: 0;
}

._3D-over:nth-child(3) {
	left: 66.666%;
	top: 0;
}

._3D-over:nth-child(4) {
	left: 0;
	top: 33.333%;
}

._3D-over:nth-child(5) {
	left: 33.333%;
	top: 33.333%;
}

._3D-over:nth-child(6) {
	left: 66.666%;
	top: 33.333%;
}

._3D-over:nth-child(7) {
	left: 0;
	top: 66.666%;
}

._3D-over:nth-child(8) {
	left: 33.333%;
	top: 66.666%;
}

._3D-over:nth-child(9) {
	left: 66.666%;
	top: 66.666%;
}

._3D-over:nth-child(1):hover ~ ._3D-hover-box {
	transform: rotateX(-20deg) rotateY(20deg);
}

._3D-over:nth-child(2):hover ~ ._3D-hover-box {
	transform: rotateX(-20deg) rotateY(0deg);
}

._3D-over:nth-child(3):hover ~ ._3D-hover-box {
	transform: rotateX(-20deg) rotateY(-20deg);
}

._3D-over:nth-child(4):hover ~ ._3D-hover-box {
	transform: rotateX(0deg) rotateY(20deg);
}

._3D-over:nth-child(5):hover ~ ._3D-hover-box {
	transform: rotateX(0deg) rotateY(0deg);
}

._3D-over:nth-child(6):hover ~ ._3D-hover-box {
	transform: rotateX(0deg) rotateY(-20deg);
}

._3D-over:nth-child(7):hover ~ ._3D-hover-box {
	transform: rotateX(20deg) rotateY(20deg);
}

._3D-over:nth-child(8):hover ~ ._3D-hover-box {
	transform: rotateX(20deg) rotateY(0deg);
}

._3D-over:nth-child(9):hover ~ ._3D-hover-box {
	transform: rotateX(20deg) rotateY(-20deg);
}

/* Kontakt */


#Kontakt{
	position:relative;
	background: #292931;
}
/*
#Kontakt:before{
	content:'';
	position:absolute;
	display:block;
	width:100%;
	height:120%;
	bottom:0;
	left:0;
	background: linear-gradient(360deg, rgba(255,253,228,0.05) 0%, rgba(0,90,167,0.05) 300%);
	z-index:-1;
}*/

#Kontakt {
	padding-top:100px;
	padding-bottom:50px;
}

#Kontakt li{
	list-style:none;
	padding-left:0;
}

#Kontakt ul{
	list-style:none;
	padding-left:0;
}

#Kontakt h4 {
	margin-bottom:10px;
	margin-top:0;
	color:#d5d5d5;
}


.footer-kontakt {
	margin-bottom:50px;
}

.footer-kontakt li{
	font-size:15px;
	line-height:36px;
}

.footer-kontakt a{
	color:#d5d5d5;
}

.footer-kontakt a:hover{
	color:#c9605f;
}

#Kontakt  {
	letter-spacing:1px;
}

.icon a {
	padding-left:55px;
	background-repeat:no-repeat;
	background-image:url(../sys_img/icons/snapchat.svg);
	background-position:center left;
	background-size:contain;
}


.icon.user a {
	background-image:url(../sys_img/icons/benutzer.svg);
}

.icon.tel a {
	background-image:url(../sys_img/icons/phone.svg);
}

.icon.email a {
	background-image:url(../sys_img/icons/mail.svg);
	background-size:20px;
}

.rechtliches li a {
	font-weight:600;
	color:#d5d5d5;
	
}

.rechtliches li a:hover{

	color:#d5d8c6;
	
}

.social {
	margin-right:25px;
	width:36px;
	height:36px;
	background-image:url(../sys_img/icons/snapchat.svg);
	background-position:center;
	background-size:contain;
}


.social.twitter {
	background-image:url(../sys_img/icons/twitter.svg);
}

.social.instagram {
	background-image:url(../sys_img/icons/instagram.svg);
}	

.social.youtube {
	background-image:url(../sys_img/icons/youtube.svg);
}

.social.twitter:hover {
	background-image:url(../sys_img/icons/twitter_h.svg);
}

.social.instagram:hover {
	background-image:url(../sys_img/icons/instagram_h.svg);
}	

.social.youtube:hover {
	background-image:url(../sys_img/icons/youtube_h.svg);
}

.footer-logo img{
	height:121px;
	width:auto;
}

/*----- unterseiten -----*/
.unterseiten #topbar .contact-info dl dd a{
	color:#303033;
}

.unterseiten  #topbar .contact-info dl .mail {
  border-left: solid 1px #303033;
}

.unterseiten  #topbar .contact-info dl .phone {
	background-image: url(../sys_img/icons/phone_b.svg);
}

/*----- Blog Übersicht -----*/

#New_Blog {
	margin-top:50px;
	margin-bottom:50px;
}

.new-articel-picture {
	background-image: url(../sys_img/_MG_5360.jpg);
	min-height:600px;
	margin-left:-15px;
	margin-right:-15px;
	background-position:bottom;
	background-size:cover;
	background-repeat:no-repeat;
}

.blog-new-text {
	margin-top:50px;

}

.blog-new-text h2{
	font-family:'Josefin Sans';
	font-weight:900;
}

.blog-new-text > p {
	font-weight:200;
	letter-spacing:1px;
	line-height:2;
}

.articel-link {
	text-decoration:underline;
}


.articel-new-information {
	margin-top:50px;
	margin-bottom:50px;
	display:flex;
	justify-content:space-between;
	color:#d5d5d5;
	font-size:12px;
}

#Old_Blog {
	padding:100px 0;
	margin-bottom:50px;
}

.old-blog-container {
	text-align:center;
	box-shadow: 0px 0px 15px 0px rgba(60,60,60,0.1);
	padding:250px 40px 50px 40px;
	margin-top:50px;
	position:relative;
}

.old-blog-container:after {
	content:'';
	position:absolute;
	background-image: url(../sys_img/teaser.jpg);
	height:250px;
	width:100%;
	top:0;
	left:0;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
}


.old-blog-container.blog_1:after {
	background-image: url(../sys_img/IMG_1790.jpg);
}

.old-blog-container.blog_2:after {
	background-image: url(../sys_img/Summer_in_the_City_small.jpg);
		background-position:bottom;
}
.old-blog-container.blog_3:after {
	background-image: url(../sys_img/IMG_6177.jpg);
}


.old-blog-picture {
	
}

.old-blog-container h2{
	font-family:'Josefin Sans';
	font-size:21px;
	font-weight:900;
	color:#d5d5d5;
	margin:25px 0 25px 0;
}

.old-blog-container h3{
	font-family:'Josefin Sans';
	font-size:24px;
	font-weight:900;
	margin:25px 0 25px 0;
}

.old-blog-container p {
	text-overflow: ellipsis;
	max-height:70px;
	overflow:hidden;
	line-height:2;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom:50px;
	
}

/* -- Artikel -- */

#Artikel {
	margin-top:50px;
	padding:50px 0 50px;
	background: linear-gradient(360deg, rgba(255,253,228,0.05) 0%, rgba(0,90,167,0.05) 300%);
}

.artikel-bild {
	margin:0;
	width:auto;
	height:600px;
	background-image: url(../sys_img/IMG_3211.jpg);
	min-height:600px;
	margin-left:-15px;
	margin-right:-15px;
	background-position:bottom;
	background-size:cover;
	background-repeat:no-repeat;
}

.artikel-header h1{
	
	font-family:'Josefin Sans';
	font-size:64px;
	font-weight:300;
	text-align:center;
	margin:0 0 0px 0
}

.artikel-header h2 {
	margin:0 50px 50px 50px;
	font-size: 44px;
	font-weight: 200;
	text-align: center;
	color:#d5d5d5;
	}

.artikel-text p{
	line-height:2;
	letter-spacing:0.5px;
	margin-top:0;
	margin-right:0px;
	margin-left:0px;
	font-weight:300;
}

.artikel-text {
	margin-top:100px;
	margin-bottom:150px;
}

.artikel-first-text::first-letter { 


	  font-size: 460%;
	  padding: 6px 0px;
	  margin-right: 6px;
	  float: left;
}

.artikel-text-bilder {
	width:100%;
	height:auto;
	display:block;
	margin-top:20px;
}

.artikel-text-margin {
	margin-bottom:50px;
}

@media (min-width: 576px) {

}
@media (min-width: 768px) {
	
	
	.margin-top-md-none {
		margin-top:0px;
	}
	
	.margin-bottom-md-none {
		margin-top:0px;
	}

	#navbar {
		position:relative;
		top:0;
		background-color:#ffffff;
		padding-top:0;
		padding-bottom:0;
		border-bottom:0; 
		width:100%;
		z-index:9999999;
		text-align: center;
	}
	
	.navbar-nav{
		justify-content: space-evenly;
		width: 100%;
			
	}
	
	#navbar {

    background-color: initial;

}

	
	

	/* löschen nach richtigem release */
	.navbar-expand-md .navbar-collapse {
	  display: -ms-flexbox !important;
	  display: flex !important;
	  -ms-flex-preferred-size: auto;
	  flex-basis: auto;
	}
	
	.nav-cont {

		padding-top:50px;
	}
	
	

	
	/* -------------------------------*/
	
	#teaser > .container , #teaser > .container .row {
		height:100%;
	}
	
	/* Kontakt */
	
	.footer-kontakt li{
		font-size:18px;
		line-height:36px;
	}
	
	/*----------------------------------------------*/
	
	
}

@media (min-width: 992px) {
	
	#teaser:before {
		position:absolute;
		content:'';
		background-image:url(../sys_img/teaser.jpg);
		background-position:bottom center ;
		background-size:cover;
		background-repeat:no-repeat;
		background-color:initial;
		padding-bottom:36px;
		padding-top:300px;
		height:calc(100vh + 50px);
		top:-167px;
		width:601px;
		left:calc(50% + 126px);
		z-index:-1;
	}
	
	#teaser:after{
		left:calc(50% + 126px);
			width:601px;
	}
	
	
	.teaser-text {

		position:relative;
	}
	
	.show-bllock {
		margin-top:0;
		
	}
	
	.weil-flex-nicht-geht {
		display: initial;
	}
	
	
	.new-articel-picture {
		margin-right:0;
	}
	
	
	.artikel-text p{

		margin-right:50px;
		margin-left:50px;

	}
	
	.me-img {
		  position: relative;
		  left: -100px;
		  top: 0;
		  height: 100%;
	}


}

@media (min-width: 1200px) {
	
		
	.background-t-text-2::after {
	  content: '';
	  top: 150px;
	  right: calc(100% - -420px);
	  width: 480px;
	  height: 28px;
	  position: absolute;
	  box-shadow: 0px 0px 0px 1px #E6E6E6;
	}
	.port-item {
		width:222px;
	}
	
	.me-img {
		  position: relative;
		  left: -200px;
		  top: 0;
		  height: 100%;
	}
  
}


@media (min-width: 2100px) {

	#teaser:before {

		height:calc(100vh - 250px);


	}
	
	#teaser:after{

			height:calc(100vh - 250px);

	}
	
	.background-t-text-2::after {
	  content: '';
	  top: 150px;
	  right: calc(100% - -620px);
	  width: 480px;
	  height: 28px;
	  position: absolute;
	  box-shadow: 0px 0px 0px 1px #E6E6E6;
	}




  
}