/* ---  Defaults ==================================================== */

html{
   overflow-y: scroll;}

body {
font-family: "myriad-pro", "Myriad Pro",sans-serif;
font-size: 16px;
font-weight: 300;
text-align: left; /* justify > mediaqueries*/
line-height: 1.42857143;
color: #444;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
     -o-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;}


@media print body {
font-family: "myriad-pro", "Myriad Pro",sans-serif;
	font-size: 10pt;
	color: #333333;
	margin-top: 1cm;
	margin-right: 1cm;
	margin-bottom: 1cm;
	margin-left: 1cm;}

p {margin-bottom: 1em;}

h1{
font-size: 2.3em;
color: #404040;
margin: .5em 0;
font-weight: inherit;
text-align: left;}

h1 ~ h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  font-weight: inherit;
  line-height: 1;
  text-align: left;}


h2 {font-size: 1.953em;}
h3 {font-size: 1.563em;}
h4 {font-size: 1.25em;}

sup, sub {
 height: 0;
 line-height: 1;
 vertical-align: baseline;
 _vertical-align: bottom;
 position: relative;}
sup {
 bottom: 1ex;}
sub {
 top: .5ex;}

img{
 max-width: 100%;
 height: auto;}
 
.nopadd{
    padding: 0 !important;}

.nomarg{
    margin: 0 !important;}

::selection{
background: #e8e6bf;
text-shadow: none;
color: black;}

a::selection{
 color: inherit;}
 
 
 .ausblenden{
    display: none !important;
    visibility: hidden !important;
}


/* ---  Containers & Rows =============================================== */

.container{ width: 96%;}

.row{
margin-top: 20px;
margin-bottom: 20px;}


/* ---  Header, Bereiche, Footer ======================================= */


/* Header -------------*/
header{
padding: 0;
margin: 0;
min-height: 300px;
background-color: #565656;}


/* Navbar -------------*/
.logoundmenu{
 background: rgba(0,0,0,0.8);
 color: white !important;
 position: absolute;
 top: 22px;
 width: 100%;
 z-index: 20;
 }
 
 
 
/* Inhalt -------------*/


.brotkrumen{
    margin-top: -8px;
    margin-bottom: 7px;
    font-size: 0.75em;
    color: #aaa !important;}

.brotkrumen a{
    color: #999 !important;}

.bereich1{
 background: white;}


.bereich2{
 background: rgb(232,231,192);}
 
 .bereich2full{
 background: white;}

.keybox{
 background-color: #999;
 color: white;
 padding: 26px;
 font-size: 1em;
 line-height: 1.4em;
 margin-top: -20px;
 position: relative;
 text-align: justify;}

/* keyboxfarben - Pendant = Seitenattribut*/

.schwarz{
 background-color: #000 !important;
 color: white !important;}

.grau{
 background-color: #999 !important;
 color: white !important;}

.terracotta{
 background-color: rgb(160,70,45) !important;
 color: white !important;}

.fairtrade{
 background-color: rgb(141,162,39) !important;
 color: white !important;}

.rot{
 background-color: rgb(255,0,0) !important;
 color: white !important;}

.tuerkis{
 background-color: rgb(42,221,233) !important;
 color: white !important;}

.dunkelblau{
 background-color: rgb(5,60,125) !important;
 color: white !important;}

.gold{
 background-color: rgb(199,192,150) !important;
 color: #444 !important;}

.beige{
 background-color: #e8e6bf !important;
 color: #444 !important;}


.orange{
 background-color: #ee8a18 !important;
 color: #fff !important;}

/* Keyboxfarben Glyphicons */


span.schwarz{
 color: #000 !important;
 background-color: white !important;}

span.grau{
 color: #999 !important;
 background-color: white !important;}

span.terracotta{
 color: rgb(160,70,45) !important;
 background-color: white !important;}

span.fairtrade{
 color: rgb(141,162,39) !important;
 background-color: white !important;}

span.rot{
 color: rgb(255,0,0) !important;
 background-color: white !important;}

span.tuerkis{
 color: rgb(42,221,233) !important;
 background-color: white !important;}

span.dunkelblau{
 color: rgb(5,60,125) !important;
 background-color: white !important;}
 
span.gold{
 color: rgb(199,192,150) !important;
 background-color: white !important;}

span.beige{
color: #e8e6bf !important;
 background-color: white !important;}
 
span.orange{
color: #ee8a18 !important;
 background-color: white !important;} 
  



.keybox h1{
font-size: 2em;
font-weight: 400;
margin: 6px 0;
color: inherit;}

.keybox h2{
font-size: 1.3em;
font-weight: 400;
margin: 20px 0;
color: inherit;}



.c5inhalt{
font-size: 0.9em;}

.ganzebreite{padding-top: -30px !important;}



.messeform #submit.btn-primary{
   background: rgb(181, 174, 128);
   color: black; 
   border: none;
   border-radius: 0;}

.alert-success{
  background: rgb(181, 174, 128);
   color: black; 
   border: none;
   border-radius: 0;}

  .alert-success a{
   color: black; }


/* ---  Formulare Newsletter Anmeldung Onlineberatung  =============================================== */



label{font-weight: 300;}

.nlformtabelle{width: 100%;}
.nlformtabelle td {padding-top: 3px; padding-bottom: 3px; vertical-align: top;}
.nlformtabelle .labeltd{padding-right: 20px;}



/* cID=340 */

.miniSurveyView #msg{
padding: 20px !important;
background: #e8e6bf !important;
margin: 60px 0 80px !important;
font-weight: bold !important;}


table.formBlockSurveyTable{width: 100%;}
table.formBlockSurveyTable td.question{width: 30%;}

/* cID=460 */

.formnullarbor table.formBlockSurveyTable td.question{
  width: 50%;}



.onlineberatung input{
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;}

.onlineberatung input[type="radio"]{
  width: auto;
  height: auto;}

.onlineberatung textarea{
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;}

.onlineberatung textarea#Question4{margin-bottom: 24px}

/* ---  SPEZIELLES  =============================================== */




/* ctalink ist obsolet liegt aber noch auf einigen buttons, 
   ctabutton = Design
   primarixangebot = Funktion (siehe typography.css // NUR für Angebote verwenden!! */
   

.ctabutton, .ctalink{
display: inline-block;
/* padding: 0px 7px 2px; */
padding: 7px 12px 7px 7px;
color: inherit;
font-size: 1em;
font-weight: 300 !important;
background: rgb(181,174,128);
outline: 1px solid #fff !important;
border-bottom: none !important;
/* border-left: 10px solid #444; */
border-left: 10px solid #555;
border-radius: 6px;}

.ctabutton:hover, .ctalink:hover{
text-decoration: none;
color: #444 !important;
background-color: #ccc !important;}

/* .dtteamoverview{left:0 !important;} */

/*
div{ outline: 1px dashed purple;}
.dtteamoverview{outline: 3px solid yellow !important; padding: 0; margin-left:0%;}
*/
.dtteamoverview * {color: white !important;}

.dtteamoverview .container{width: 100%;}

.iframediv {
    position: relative;
    padding-bottom: 76.25%;
    padding-top: 30px; height: 0; 
    overflow: hidden;
    
}
 
.iframediv iframe,
.iframediv object,
.iframediv embed
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}





/* PARALLAX--------------*/

.parallax{
width: 80%; 
margin-top: 80px;
margin-top: 6vw;
margin-bottom: 70px;
margin-bottom: 5vw;}


.parallax p{
 font-size: 3vw;}

.parallaxtitel{
    margin-top: 20px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;}

.parallaxtitel p{
    padding-bottom: 0px;
    margin-bottom: 0px;}


/* Parallax Alex */

.sectionparelaxed {
  padding: 200px 0 !important;}

.section .parelaxed-image {
/*   z-index: 0; */
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;}

.parelaxed-image, .parelaxed-image-fixed {
  background-attachment: fixed;}



/*.parallax-content-table h1{
 font-weight: 700;
 font-size: 4em;
 font-size: 4vw;
 color: white;
 text-shadow: 1px 1px 2px #000;
 text-align: center;}

.parallax-content-table p{
 font-weight: 400;
 font-size: 1.6em;
 font-size: 2.5vw;
 color: white;
 text-shadow: 1px 1px 0px #000;}*/



/* Coole Hover Imagebox*/

.itbox {
    margin: 20px auto;
    width: 30%;}

ul.itbox li {
    display:  inline-block;
    list-style:  none;
    margin: 0 10px;}

.hoverbox {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)}

.hoverbox p,.hoverbox h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative}

.hoverbox p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0}

.hoverbox h2 {
    font-size:20px;
    line-height:24px;
    margin:0;
    font-family:'Lato'}

.effect img {
    position:absolute;
    left:0;
    bottom:0;
    cursor:pointer;
    margin:-12px 0;
    -webkit-transition:bottom .3s ease-in-out;
    -moz-transition:bottom .3s ease-in-out;
    -o-transition:bottom .3s ease-in-out;
    transition:bottom .3s ease-in-out}

.effect img.top:hover, .effect img.top:active {
    bottom:-96px;
    padding-top:100px}

h2.zero, p.zero {
    margin:0;
    padding:0}


.goldbox{
    background: #b5ae80;
    padding: 26px;}

.goldrand{
    outline: 2px solid #b5ae80;
    padding: 26px;}


.nosubline{text-decoration: none !important; border-bottom: none !important;}

/* --- */


/* TABLES */

.table{
 background-color: white;}

.table th{
 background-color: black;
 color: white;
 border-bottom: 6px solid #fff;}

.table td{
 background-color: #eee;
 border-bottom: 6px solid #fff;}


.sortable_responsive_gallery_image{
 margin-bottom: 0.5% !important;}


video {
  width: 100%    !important;
  height: auto   !important;}

.video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;}
 
.video iframe,
.video object,
.video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;}

.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


.responsive-video {
position: relative;
padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
padding-top: 0px;
height: 0;
overflow: hidden;
}



.tab-content{
 background: white;
 padding: 20px;
 border-left: 1px solid #ddd;
 border-right: 1px solid #ddd;
 border-bottom: 1px solid #ddd;}



/* > MITARBEITER ========================== */

/* Überall -------------*/

.maportrait img{ border-radius: 50%;}

/* >> Teamseite & Revslider --- */



/* >> MA SINGLE BLOCK (zBsp. für Übesicht) ---- */

.masingle, .magruppe {
  width:48%;
  display:inline-block;
  vertical-align:top;
  margin-right: 1.6%;
  margin-bottom: 40px;}

div.clearing {width:100%;height:0;clear:both;display:block;}
.qc_clear{clear: both;}
.qc_clear + .fluid-width-video-wrapper{margin-top: 20px;}

.masingle .maportrait{}
.masingle .matext{padding: 16px 20px}
.masingle .matext h4{font-weight: normal; font-size: 1.2em;}
.masingle .matext .maname{border-bottom: none; color: inherit;}
.masingle .mafunktion{}
.masingle .maoffice{margin: 3px 0 8px;}
.masingle .madestibox{}

.masingle .madestinationen{}
.masingle .madestinationen:after{content: ' • '}
.masingle .madestinationen:last-child:after{content: ' '}

/* >> MA TAB ------------------------------------- */


.simpleTabsContent .maportrait{}
.simpleTabsContent .matext{padding: 16px 20px}
.simpleTabsContent .matext h4{font-weight: normal; font-size: 1.2em;}
.simpleTabsContent .matext .maname{border-bottom: none; color: inherit;}
.simpleTabsContent .mafunktion{}
.simpleTabsContent .maoffice{margin: 3px 0 8px;}
.simpleTabsContent .madestibox{}

.simpleTabsContent .madestinationen{}
.simpleTabsContent .madestinationen:after{content: ' • '}
.simpleTabsContent .madestinationen:last-child:after{content: ' '}
   

/* >> MA DETAILS -------------------------------*/

/* >> MA DETAILS > Header -----*/


.maheader{background-color: #565656; min-height:300px; height:auto !important;}

.bottom-column{
    float: none;
    display: table-cell;
    vertical-align: bottom;}

.maslider{margin:0; padding: 90px 0 0 0;}
.maslider .row, .maslider .row p{padding-bottom:0; margin-bottom:0;}
.maslider * {color: white !important;}


.madetails h3{font-weight: normal; margin: 0 0 1em; font-size: 1.2em;}
.madetails .matext{ padding: 20px 12px 0;}
.madetails .matext h4{ font-weight: normal; font-size: 1.2em;}
.madetails .matext .mafunktion{}
.madetails .matext .maoffice{}

.madetails .mabereist {padding: 60px 12px 0;}
.madetails .mabereiste:after{content: ' • '}
.madetails .mabereiste:last-child:after{content: ' '}

.madetails .mageheimtipps{margin: 0 0 40px;}
.madetails .mareiseberichte{margin: 0 0 40px;}
.madetails .mareiseberichte ul{padding-left: 20px;}
.madetails .mareiseberichte li{margin-bottom: 10px; line-height: 1}
.madetails .mareiseart{margin: 0 0 40px;}
.madetails .maindividuelles{margin: 0 0 40px;}
.madetails .maindividuelles .deluxe_image_gallery_image{text-align:left !important;}



/* KATALOGE ========================== */
.katrubcontainer {
    padding-left: 0;
    padding-right:0;
}
.katrubtitel{
    float:none;
    clear:both;
    display:block;
    margin: 20px 15px 10px 15px;
    padding-top: 70px;
}
.katrubtitel:first-child {
    padding-top: 0px;
}

.katrubitem{
    position: relative;
    outline: 1px solid #999;
    box-shadow: 0px 0px 3px #999;
    width:100%;
    margin-bottom: 30px;
    overflow:hidden;
}
.katrubitemimg {
    position: absolute;
    top: 0;
    left:0;
    width:100%;
}
.katrubitemimg img {
    max-width:100%;
    width:100%;
}

.katrubitemspacer {
    width:100%;
    padding-bottom: 140%;
    background: rgb(232,231,192);
}
.katrubitemcover {
    display:none;
    position: absolute;
    left: 0;
    top: 0;
    width:100%;
    padding-bottom: 140%;
    background: rgba(0,0,0,0.8);
}

.katrubitemcontent {
    display:none;
    position: absolute;
    left:0;
    top: 0;
    width:100%;
}

.katrubitem.hover div.katrubitemcover,
.katrubitem.hover div.katrubitemcontent {
    display:block;
}
.kattitle {
    padding: 10%;
    color: white;
}
.katlink {
    padding: 10%;
}
.katlink a,
.katlink a:hover {
    background: white;
}


.katshop button.active{
   background: #d6c564;}
#katalog_liste div label {
    display:none;
}
#katalog_liste div label.sichtbar {
    display:block;
}

/* DT Exklusivangebote ================================== */



.dtexkllogoimg{max-width: 100px;
text-align: right;}

.dtexklbox{
  padding-bottom: 40px;
  border-bottom: 1px solid #aaa;
  margin-bottom: 60px;
}


.prima_info{margin: 20px 0 20px 20px;}
.prima_info h4{font-weight: 400; margin: 20px 0 10px;}


/* 5 Spalter ========================== */

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

/* FOOTER -----------------------------------------------------*/

footer{
    background: #000;
    color: #fff;}


footer h1,footer h2,footer h3,footer h4{
    color: white;
    margin-top: 0;}

footer ul li{
    list-style: none;}

footer ul li a{
    padding: 0 0 4px !important;}

footer * a {
    color: white;
    text-decoration: none;}

.adrbox{
    padding: 20px 0;}

.adricon{
    margin: 4px 12px 2px 0px;
    float: left;}

footer .somedlink{padding-right: 12px;}

.footermenuitem{
    display: inline-block;
    font-size: 0.97em;
    text-transform: uppercase;}

.footermenuitem:last-child{
    margin-right: 10;}

.zertifikate .row{
    margin-top: 0;}
    
.finalslogan{
    margin: 40px 0 90px}

#up{font-size: 3em;}

.credits a{
    color: #707070;
    font-size: 0.875em;}

.copyright{color: inherit; }

.creditsrow{
    border-top: 1px solid #222;}



.responsive-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 60px; overflow: hidden;
}


.responsive-video iframe,
.responsive-video object,
.responsive-video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Glyphicons Farben siehe Keyboxfarben*/

span.glyphicon{
  margin-right: : 3px;}

span.glyphicon em{
  display: none;}  

/* Glyphicons iconboxen */


.icon-xlarge span{
  display: block;
  font-size: 5em;
  width: 100%;
  text-align: center;
  margin: 50px 0 30px;}

.icon-large span{
  display: block;
  font-size: 3em;
  width: 100%;
  text-align: center;
  margin: 50px 0 30px;}

.icon-medium span{
  display: block;
  font-size: 2.2em;
  width: 100%;
  text-align: center;
  margin: 0px 0 10px;}

.icon-small span{
  display: block;
  font-size: 1.4em;
  width: 100%;
  text-align: center;
  margin: 50px 0 30px;}


.keybox2 .icon-small span{
  margin: 0px 0 10px;}


/* 5Spalter fünfspalter*/


.col5spalter{
  width: 18%;
  margin-left: 1%;
  margin-right: 1%;
  float: left;
  font-size: 0.85em;}



.rowthemeblock h1,
.rowthemeblock h2,
.rowthemeblock h3{
  text-align: center;}

.rowthemeblock p{}  


input.ccm-input-text[type=text]{
  height: 26px;
  background-color: #f7f7f7;}


/* Bildrechte Tooltip */


div.bildrechte{
  text-align: right;}

div.bildrechte a{
  text-decoration: none;
  color: inherit;
  font-size: 0.875em;
  border-bottom: none;}

.tooltip-inner p{
  font-size: 12px;
}


/* ---  Mediaqueries ********************************************************/


@media (max-width: 500px){
  
.logoimg {max-width: 200px;}

    
  .kampagne60 {
      float:left;
      color: white;
      font-weight: 400 !important;
      font-size: 7vw !important;
      white-space:nowrap;
      text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
      letter-spacing: -2px;
      background:none;}
  
  .kampagne80 {
      float:left;
      color: white;
      font-weight: 400 !important;
      font-size: 8vw !important;
      white-space:nowrap;
      text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
      letter-spacing: -2px;
      background:none;}



}
@media (max-width: 700px){

.finalslogan h1{
    font-size: 26vw; 
    font-weight: bold; 
    margin: 0;}


}
@media (max-width: 767px){

  .ccm-layout-col {float: none !important; width: 100% !important;}
  .ccm-layout-col-spacing {margin: 0 0 20px 0 !important;}
  .footerspalte{border: none !important;}
  .menulinks, .zertifikate{margin-bottom: 30px;}
  .somed{ margin: 40px 0 0;}
  .somed p{margin: 20px 0 16px !important; padding: 6px 0 !important; font-size: 1.4em;}
  .finalslogan h1{ margin: 0 !important; font-size: 20vw;}
  
  .bottom-column{ float: left; display: block; vertical-align: bottom;}
  .maslider{margin:0; padding: 100px 0 0 0;}


}
@media (max-width: 992px){
  
  .col8fuenfercol{  padding-left: 0;}
  
  header{
    min-height: 148px;
    background-color: transparent;}

  .slider{
    margin-top:70px; 
    margin-bottom:0; 
    padding-bottom: 0;
/*   	min-height: 248px; */ }
  	

}
@media (min-width: 768px){


  .finalslogan h1{
      font-size: 12.4vw;
      text-align: center;
      margin: 30px 0;}
  
  .parallax p{ 
      font-size: 2.4vw;}
  
  .somed p{ 
      margin: 0 0 16px;}
  
  
  .masingle, .magruppe {
    width:31%;
    margin-right: 1.6%;
    margin-bottom: 40px;}
    
    
  .kampagne60 {
      float:left;
      color: white;
      font-weight: 400 !important;
      font-size: 4vw !important;
      white-space:nowrap;
      text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
      letter-spacing: -2px;
      background:none;}
  
  .kampagne80 {
      float:left;
      color: white;
      font-weight: 400 !important;
      font-size: 5vw !important;
      white-space:nowrap;
      text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
      letter-spacing: -2px;
      background:none;}

}
@media (min-width: 992px){

  body{font-size: 1.2vw;}

  .container{
  width: 87%;
  max-width: 1440px;}

  h1 {font-size: 2.6vw;}
  h2 {font-size: 2vw;}
  h3 {font-size: 1.5vw;}
  h4 {font-size: 1.3vw;}


  .masingle, .magruppe {
    width:23%;
    margin-right: 1.6%;
    margin-bottom: 40px;}
  
  
  .parallax p{
   font-size: 1.6vw;}
  
  .footerspalte{
      padding: 0 20px;
      height: 200px;}
  

}
@media (min-width: 1440px){


  body{font-size: 22px;}
  h1 {font-size: 2em;}
  h2 {font-size: 1.8em;}
  h3 {font-size: 1.5em;}
  h4 {font-size: 1.3em;}
  
  .footerspalte{
      height: 250px;}
  
  footer{
      font-size: 22px !important;}

}