/* ################################################################################### */
/* ############################## CUSTOM - STYLES - CSS ############################## */
/* ################################################################################### */
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* :::::::::::::::::::::: 	STUFF 								:::::::::::::::::::::: */

/* --- STANDARDS --- */

/* Footer (Impressum)*/
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 30px;
}
/* /Footer (Impressum)*/


.pointerOff {
	pointer-events: none; /* Makes the layers below clickable */
    }
    
.pointerOn {
    pointer-events: all;
    }


/* blink */
blink, .blink {
  -webkit-animation: blink 1s step-end infinite;
  -moz-animation: blink 1s step-end infinite;
  -o-animation: blink 1s step-end infinite;
  animation: blink 1s step-end infinite;
}
@-webkit-keyframes blink {
  67% { opacity: 0 }
}
@-moz-keyframes blink {
  67% { opacity: 0 }
}
@-o-keyframes blink {
  67% { opacity: 0 }
}
@keyframes blink {
  67% { opacity: 0 }
}
/* /blink */
/* :::::::::::::::::::::: 	/STUFF 								:::::::::::::::::::::: */
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* :::::::::::::::::::::: 	STRUCTUR 							:::::::::::::::::::::: */
/* --- STANDARDS --- */

.padding-0 {
	padding:0;   
}
.margin-0{
	margin:0;
}

/* Positionierung-Standards */
.pos-rel {
	position: relative; 
	}
.absolute-trbl0 {
	position:absolute; left:0px; right:0px; top:0px; bottom:0px;
    }
.absoluteTop {
    position: absolute;
    top: 0px;
    width: 100%;
    }
.absoluteBottom {
    position: absolute;
    bottom: 0px;
    width: 100%;
    }
    
/* Positionierung-Standards - Container */
.txtContent {
	position:absolute; left:0px; right:0px; top:0px; bottom:0px;
/*	Problem: content placed inside this class can bleed into next section.
	Solutions: "overflow: auto" Shows standard system scrollbar. Works well for texts.
	              "overflow: hidden" cuts/slashes the overflowing content. Works well for menus etc. */
	overflow: auto;
}
.txtContent_rel {
	pointer-events: none; 
	position:relative; width: 100%; height: 100%;
	padding:0 15px
}
.innerbox{
	margin:0;
	padding:10px;
}
/* :::::::::::::::::::::: 	/STRUCTUR 							:::::::::::::::::::::: */
/* ------------------------- 	BODY-CONTENT 					----------------------- */
/* TMP */
.comButts{
	margin-left:0px ;
}

/* --- emblem --- */
.emblem {
	border-radius:100px; 
	width:90px; height:90px; 
	position:absolute; 
	margin-left:-45px; margin-top:-45px; 
	left:50%; bottom:15%; 
	padding:; background-color:#333;
	}

.emblem div {
	width:90px; height:90px;
	background: url(../img/mainImg/ei_w.png) no-repeat center;
	border-radius:100px;
	opacity:1.0;
	}
/*
.emblem:hover {
	background-color:#fff;
	}
.emblem div:hover {
	border-radius:100px;
	background:url(../img/mainImg/ei_bl.png) no-repeat center; 
	}
*/

.emblem:hover {
	background-color:#333;
	}
.emblem div:hover {
	opacity:.1.0;
	}
	
/* impressum */
.emblem-i {
	border-radius:100px; 
	width:90px; height:90px; 
	background-color:#333;
	margin: 0 0 0 0px;
	opacity:1.0;
}
.emblem-i div {
	width:90px; height:90px;
	background: url(../img/mainImg/ei_w.png) no-repeat center;
	border-radius:100px;
}
/* --- / emblem  --- */
/* --- FOOTER --- */
.scrollButt-footer{
	font-size:14px;
	padding-top:5px;
	text-align:center; 
	}
.scrollButt-footer a {
	display:block;
    background-color: rgba(255,255,255,0.10);
}
footer {
	position:absolute;
	bottom:0;
	width:100%;
	}
footer p {
	margin:0;
	padding:8px 0 9px 0;
	font-size:9px;
	color:#999;
	}
footer p.text-left { 
	margin:0px 0 0 -7px;
	}
footer p.text-right { 
	margin:0px -7px 0 0;
	}
.section footer {
    z-index:20;
    }
footer > .container-fluid,
footer > .container{
    margin-bottom:0px;
	}

/*.sec1 30er-footer-container*/
footer.sec1 > .container-fluid.footer{
 	background-color:#333;
	}
/*.sec2 30er-footer-container*/
footer.sec2 > .container-fluid.footer{
 	background-color:#222;
	}
.sec2grau-footer{
	height:30px;
	padding-top:2px;
	position:absolute; bottom:30px; left:0px; right:0px; 
	background-color:rgba(52,52,52,0.5);
	pointer-events:none; 
	}

/* footer-i (impressum)*/
.footer-i {
	position: absolute;
	bottom: 0;
	width: 100%;
	/* Set the fixed height of the footer here */
	height: 30px;
	background-color: #333;
}
/* --- /FOOTER end--- */
/* :::::::::::::::::::::: 	DESIGN 								:::::::::::::::::::::: */
.bg-impressum{
/*background: url(../img/mainImg/Studio-Charles-Pictet.jpg) no-repeat center;*//*Studio-Charles-Pictet.jpg start_imgs/960x1440_portrait1.png*/
background-size:cover;
}
/* ::::::::::::::::::::::	TYPO 								:::::::::::::::::::::: */

.georgia {
font-family: Georgia,‘Times New Roman‘, serif;
}
.f18 {
font-size:18px;  
}
.wsp-no {
white-space:nowrap;
}

/* ::::::::::::::::::::::	COLORS								:::::::::::::::::::::: */
.sec2{
	color:#eee;
	}

.sec2 h1 small{
	color:rgba(255,255,255,0.45);
	}

.modal h1.adrs{
	color:rgba(255,255,255,0.75);
	}
.modal h1.adrs small{
	color:rgba(255,255,255,0.45);
	}
.modal h1.adrs.inv{
	color:rgba(0,0,0,0.65);
	}
.modal h1.adrs.inv small{
	color:rgba(0,0,0,0.25);
}
/* /Colors  */
/* Colors - Link */
a,
a:active,
a:focus {
	color:#333;
	text-decoration:none;
	}
a:hover/*,
.btn:hover */ {
	color: #333;
	text-decoration:none;
	}

.sec2 a,
.footer a,
.sec2 a:active,
.footer a:active,
.sec2 a:focus,
.footer a:focus {
	color:#fff;
	text-decoration:none;
	}
	
.sec2 a:hover,
.footer a:hover,
.sec2 .btn:hover,
.footer .btn:hover  {
	color: #ddd;
	}

/* /Colors - Link */
/* ::::::::::::::::::::::	/COLORS								:::::::::::::::::::::: */
/* ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* :::::::::::::::::::::: 	SPECIAL ELEMENTS 					:::::::::::::::::::::: */
/* ----------------------	MAP									---------------------- */
.map-container {
	position:absolute; bottom:0px; right:0px; 
	width:100%; height:100%; 
	padding-bottom: 30px; 
	z-index:;
	}

#map-canvas{
	width:100%; 
	height:100%;
	}

.verticalButBar{
	position:absolute; 
	top:15px; 
	right:15px;
	opacity:1; 
	width:; 
	height:;
	margin-top:;
	background-color:; 
	}

div[class*='_ibani_'] > div:nth-child(3) {
	height: auto !important;
	overflow: visible !important;
	}

/* MAP - INFO-WINDOWS  */
.info-close {
	position: absolute;
	right: -37px;
	top: 0px;
	background-color:rgba( 0, 0, 0, 0.6 ); 
	width:36px; height:36px;
	padding: 15px 0 0 0px; 
	color:#ccc;
	}
.info-close:hover {
  background-color:rgba( 0, 0, 0, 1.0 ); /**/
  color:#fff;
  }
.info-close span{
	display: block;
	line-height:2px;
	font-size:24px;
	font-weight:200;
	text-align:center; 
	font-family:"Helvetica Neue", "Segoe UI Symbol", sans-serif;
  	/* Webdings Segoe UI Symbol ,"Helvetica Neue", Arial*/
  	background-color:;
  }


/* --- MAP --- */
.info-text {
	position:relative;
	color:#999; 
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:300;
	background-color:;
	}

.info-text div.wBG {
	position:relative;
	display:block;
	padding:8px 10px 8px 10px;
	margin:0 0px 1px 0;
	opacity: 0.7;
	background-color:#fff;
	}
.info-text div.wBG:hover {
	opacity: 1.0;
	}
	
.info-text div.blkBG {
	position:relative;
	display:block;
	background-color: rgba( 0, 0, 0, 0.6 );
	padding:8px 10px 8px 10px;
	margin:0 0px 1px 0;
	/*width:100%; height:100%;*/
	opacity: 1.0;
	color:#ccc;
	}

.pfeil {
	position:absolute;
	bottom: -15px;
	}
.pfeil.rechts {
	right:0px;
	}
.pfeil.links{
	left:0px;
	}



.info-text h4,
.info-text .h4  {
	margin-top:0px; margin-bottom: 2px;
	letter-spacing: 0px;
	font-weight: 300;
	line-height: 1.0em;
	padding:0px;
	}
.info-text h4 small,
.info-text .h4 small {
	color: #999;
	}
.info-text p {
	line-height: 1.1em;
	}
.info-text .wBG {
	cursor: pointer;
	}

.info-text p.p-img {
	text-align:center; 
	line-height:2em; 
	padding:0; 
	margin:0;
	}
/* ----------------------	/ MAP								---------------------- */
/* ----------------------------------------------------------------------------------- */
/* ----------------------	MODALS								---------------------- */
/* ---------------  MODAL - overwrite - START --------------- */
/* ::::::::::: Mello Modal jsde ::::::::::: */

.middle-modal {
  display: table !important;
  width: 100%; /*auto*/
  height: 100%;
  margin: 0 auto;
  pointer-events: none !important;
  position:absolute; top: 0px;
  }
.middle-modal .modal-dialog {
  display: table-cell;
  vertical-align: middle;
  width: auto;
  height: auto;  
  }
.middle-modal .row.prjkt {
  pointer-events: all;
  }

/*.middle-modal .modal-content {
  pointer-events: all;
  }
*/
/* ::::::::::: /Mello Modal jsde ::::::::::: */

.modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1040;/*1040*/
	background-color:rgba(0, 0, 0, 0.3);/*none 203, 203, 203,*/
	}

.modal-backdrop.fade {
	filter: alpha(opacity=0);
	opacity: 0;
	}
.modal-backdrop.in {
	filter: alpha(opacity=50);
	opacity: 1.0;
	}
/*
body div.modal-backdrop{
background-color:#333 !important;
}*/

/* ---------------  MODAL - overwrite - END ---------------  */
/* ---------------  MODAL (Projekte)		---------------  */
.modal.clean-prjkt {
	padding-left: 0px !important; /*wegen scrollbalken .js css*/
	}

.modal.clean-prjkt .modal-body{
	padding: 10px; /* for xs-view */
	}
.clean .modal-content,
.modal.clean-prjkt .modal-content{
	box-shadow:none;
	border:none;
	}
	
.modal.clean-prjkt .carousel-inner .item img{
	width: 100%;
	}

.prjkt{ 
	position:relative; 
	background-color:rgba(255,255,255,1.0); 
	color:#666; 
	}

.prjkt-logo { 
	position:absolute; 
	bottom:20px; 
	left:25px; 
	z-index:20;
	}

.prjkt .innerbox h1 {
	margin-top:10px;
font-size:18px;
}



.close.sliderModal{
padding: 15px 0 0 2px; 
margin-right:-15px;
width:40px; height:40px;
line-height: 2px;
font-family:"Helvetica Neue", "Segoe UI Symbol";
font-weight:200;
background-color:;
}
.close.sliderModal span{
  background-color:;
    display: block;
    text-align:center; 
    font-size:24px;
}
#Modal_MailerA .close.sliderModal{
 margin:0px 0px 0 0;/**/
}

.close.sliderModal-x{
position:absolute;
top:10px; right:10px;
width:40px; height:40px;
padding: 15px 0 0 2px; 
line-height: 2px;
opacity:0.5; 
font-size:44px;
font-weight:200;
color:#fff;
text-shadow:none;
font-family:"Helvetica Neue", "Segoe UI Symbol";
}
.close.sliderModal-x:hover,
.close.sliderModal-x:active,
.close.sliderModal-x:focus{
opacity:1; 
}
.close.sliderModal-x span{
  background-color:;
    display: block;
    text-align:center; 
}


/*.close{
font-weight:lighter !important;
color:red;
}*/


/* BG Modal */
#Modal_SZ{
z-index: 1043;
background-color: rgba(255, 192, 203, 1.0); /*#FFC0CB pink */
}
#Modal_MSF{
z-index: 1043;
background-color: rgba(177, 213, 210, 1.0); /* #b1d5d2 */
}
#Modal_JVM{
z-index: 1043;
background-color: rgba(10, 55, 44, 1.0); /* #0a372c */
}
#Modal_MIE{
background-color: rgba(0, 52, 102, 1.0); /* #003466 */
z-index: 1043;
}
#Modal_VER{
background-color: rgba(210, 15, 47, 1.0); /* #D20F2F */
z-index: 1043;
}
#Modal_SC {
background-color: rgba(119, 200, 235, 1.0); /* #77C8EB */
z-index: 1043;/*1043*/
}
#Modal_OS{
background-color: rgba(42, 169, 210, 1.0); /* #2AA9D2*/
z-index: 1043;
}
#Modal_HS{
z-index: 1043;
background-color: rgba(181, 210, 156, 1.0); /*#B5D29C */
}
#Modal_MVZ{
z-index: 1043;
background-color: rgba(216, 214, 202, 1.0); /*#D8D6CA */
}


/*
#Modal_SZ .middle-modal h1{
color: rgba(255, 192, 203, 1.0); 
}
#Modal_MSF .middle-modal h1{
color: rgba(177, 213, 210, 1.0); 
}
#Modal_JVM .middle-modal h1{
color: rgba(10, 55, 44, 1.0); 
}
#Modal_MIE .middle-modal h1{
color: rgba(0, 52, 102, 1.0);
}
#Modal_VER .middle-modal h1{
color: rgba(210, 15, 47, 1.0);
}
#Modal_SC .middle-modal h1{
color: rgba(119, 200, 235, 1.0);
}
#Modal_OS .middle-modal h1{
color: rgba(42, 169, 210, 1.0);
}
#Modal_HS .middle-modal h1{
color: rgba(181, 210, 156, 1.0);
}
#Modal_MVZ .middle-modal h1{
color: rgba(216, 214, 202, 1.0); 
}
*/
/* --- /MODAL (Projekte) --- */


/* --- MODAL (EMAIL) --- */
#Modal_MailerA{

}

#Modal_MailerA .modal-header  {
border-bottom: 0px solid #ccc;
}

#Modal_MailerA .modal-header .iconRund{
background-color:#333; 
box-shadow:none 1px 2px 1px silver inset; 
color:#fff; 
display:block; 
padding:12px 0 0px 0; 
margin: 0px 0 0px 0;  
height:50px; width:50px; 
text-align:center; 
border-radius:50%;
}

#Modal_MailerA .modal-header .iconRund span{
font-size:24px; 
}

#Modal_MailerA .modal-content{
overflow:hidden; background:none;
}

#Modal_MailerA .modal-footer {
background:#eee; border-top: 1px solid #ccc; min-height:50px;
}
/* --- /MODAL (EMAIL) --- */
/*Original-Stuff?*/


#Modal_MailerA .modal-dialog {
  margin: 50px auto 10px auto;
  /*width: 95%;*/
  max-width: 496px;

	}
#Modal_MailerA .modal-body div{
  background-color:#ccc;
}

@media (max-width: 768px) {


}

@media (min-width: 768px) {
#Modal_MailerA .modal-dialog {
    /*width: 80%;*/
    max-width: 496px;
    margin: 50px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}
/* --- / MODAL (EMAIL) --- */
/* ----------------------	/ MODALS							---------------------- */
/* ----------------------	FORMULARE							---------------------- */

/* --------------- form-signin (bs) --------------- 0 0 28px rgba(255, 204, 0, 0.6) */
.form-control:focus {
    border-color: #999;
 box-shadow:none;
/*    box-shadow: 0px 0px 10px 2px rgba(55, 55, 55, 0.15);*/
    outline: 0 none;
/**/
}

/*.form-control{
  
    box-shadow: none 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    
	background-color: #ffffff;
    background-image: none;
    border: 1px solid #cccccc;
    border-radius: 4px;
    color: #555555;
    display: block;
    font-size: 14px;
    height: 34px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
    width: 100%;
   
}
 */
.form-MailerA {

  padding: 0px 15px 15px 15px;
  margin: 0 auto;
}

/*.form-MailerA .form-MailerA-heading,*/
.form-MailerA .checkbox {
  margin-bottom: 10px;
}

.form-MailerA .checkbox {
  font-weight: normal;
}
.form-MailerA .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-MailerA .form-control:focus {
  z-index: 2;
}
.form-MailerA input[type="text"],
.form-MailerA input[type="email"] {
  margin-bottom: 10px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.form-MailerA h1, 
.form-MailerA .h1, 
.form-MailerA h2, 
.form-MailerA .h2, 
.form-MailerA h3, 
.form-MailerA .h3 {
    margin-bottom: 10px;
    padding-bottom: 20px;
    padding-top: 20px;
    margin-top: 0px;
    color:#666;
}


/*--------------- / form-signin (bs) ---------------*/
/* :::::::::::::::::::::: 	/ SPECIAL ELEMENTS					::::::::::::::::::::::: */
/* :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* :::::::::::::::::::::: 	MEDIA QUERY							::::::::::::::::::::::: */

/* -------------------------------- MediaQuery Struktur --------------------------------*/
/* Extra-kleine Geräte (Smartphones, weniger als 768px) *//* Kein Media-Query, 
   weil dies der Standard in Bootstrap ist */
/* Kleine Geräte (Tablets, 768px und breiter) */
/* Mittlere Geräte (Desktop-PCs, 992px und breiter) */
/* Große Geräte (Desktop-PCs, 1200px und breiter) */


/* ---------------  MQ - MODAL (Projekte)		---------------  */

.modal.clean-prjkt .modal-content{
background: none;
margin: 70px 0px 50px 0px;/*MQ*/
}
@media (min-width: 768px) {
.modal.clean-prjkt .modal-content {
margin: 90px 0px 90px 0px;
  }
}
@media (min-width: 992px) {
.modal.clean-prjkt .modal-content {
margin: 110px 0px 110px 0px;
  }
}
/* BS-MOD */ /* Media 768px 992px 1200px*/
.BS-Container-Mod .container {
/*padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
*/
  max-width:496px;
}
@media (min-width: 768px) {
 .BS-Container-Mod  .container {
    max-width: 496px;
  }
}
@media (min-width: 992px) {
 .BS-Container-Mod  .container {
    max-width:992px;
  }
}

@media (min-width: 1024px) {
 .BS-Container-Mod  .container {
    max-width: 992px;
  }
}
/* /END - MQ - Projekt - Modals */
/* -------------------------------------------------------------------------------------*/
/* --------------- MQ - header sec1 -------- */
.headr{
	font-size:38px;
	text-align:center;
}
.headr.absoluteTop{
	top:10%;
}
.headr .h-cts{
	line-height:1.2em;
	margin:0 auto 0px auto;
	margin-top: 4px;
	/*max-width:300px;*/
}

.hidden-dot { 
    display:none;
  }
.break-hidden {
	display: inline;
  }


@media (min-width: 640px) {
 /*
  .hidden-dot { 
    display:inline;
  }
  .break-hidden {
	display: none;
  }*/
}


@media (min-width: 900px) {
 .headr .h-cts { 
    font-size:48px;
    max-width:100%;/**/
    	margin-top: -5px;

  }
  .hidden-dot { 
    display:inline;
  }
  .break-hidden {
	display: none;
  }
}

@media (min-width: 1071px) {
 .headr .h-cts {
	margin-top:-19px;
	font-size:1.79em;
	max-width:100%;/**/
	}
 .headr.absoluteTop {
    position:relative;
    top:0px;
	}
}

@media (max-height: 440px) {
 .emblem {
 	display:none; 
  	}
 .emblem div{
  	}
  	
  .headr.absoluteTop{
	position:relative;
	top:0px;
  	}
  .hidden-dot { 
    display:inline;
  	}
  .break-hidden {
	display: none;
  	}  
}
/**/
@media (max-width: 620px) {
  .hidden-dot { 
    display:none;
  }
  .break-hidden {
	display: inline;
  }
}


/* --------------- MQ - header sec2 -------- */
.innerbox-adrs {
	padding:10px 0px 10px 0px;
	} 

h1.adrs {
	font-size:18px;
	font-family: Georgia,‘Times New Roman‘, serif;
	margin:10px 0 0 0;
	}
.adrs .h2 {
	font-size:18px;
	font-family: Georgia,‘Times New Roman‘, serif;
	margin:3px 0 0 0; padding:0px 0 0 0;
	}
.innerbox-adrs span.glyphicon {
	font-size: 24px;
	margin-bottom:6px;
  	}
.res-size{
    font-size:18px;
	}

@media (min-width: 768px) {
  .res-size{
    font-size:24px;
	}
  .emblem-i {
	margin: 0 0 0 15px;
	}
  h1.adrs,
  .adrs .h2 {
    font-size:24px;
	text-align:;
  	}
  .prjkt .innerbox h1 {
    font-size:24px;
	text-align:;
  	}
  .innerbox-adrs {
	padding:10px 10px 10px 15px;
	}
  .innerbox-adrs span.glyphicon {
	font-size: 18px;
	}
}

@media (min-width: 992px) {
  h1.adrs,
  .adrs .h2 {
    font-size:38px;
	text-align:;
	}
  .prjkt .innerbox h1 {
    font-size:38px;
	text-align:;
  	}
 .res-size{
    font-size:38px;
  	}
}

/* -------- SEC2 Adresse --------- */

.innerbox-adrs a {
	display:inline; 
	white-space:nowrap;
	pointer-events: all;  
	}

.innerbox-adrs a span {
	display:inline-block; 
	pointer-events: all;  
	}

.hidden-h-xs {
	display: inline;
	}
  
@media screen and (max-height: 601px) {
  .innerbox-adrs .hidden-h-xs {
	display: none;
	}
  .innerbox-adrs span.glyphicon {
	font-size: 24px;/**/
	vertical-align:-25%;
	margin-right:5px; margin-bottom:0px;
	}
}

/*	----------- IMPRESSUM ------------ */
.fifty-bg {
	position:absolute; top:0px; bottom:0px; left:0px; right:0px; background-color:#fff; z-index:-5;
	}
.fifty {
	background-color:#fff; height:100%;
	}
@media screen and (min-width: 601px) { /*480px*/
  .fifty {
	width:50%; 
	max-width:550px;
	}
  .fifty-bg {
	 position:absolute; right:50%; max-width:550px;
	}
}