@font-face {
    font-family: 'favorit_prolight';
    src: url('../fonts/FavoritPro-Light.woff2') format('woff2'),
         url('../fonts/FavoritPro-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'prophet_regular';
    src: url('../fonts/Prophet-Regular.woff2') format('woff2'),
         url('../fonts/Prophet-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
 
* {box-sizing: border-box;}
body {margin: 0; padding-left:30px; background-color:#fff; }
body { 
    font-family:'favorit_prolight';
    font-size:14px;
    color: #000;
    }
@media screen and (max-width: 600px) {  
    body {margin: 0; padding-left:10px; background-color:#fff; font-size:16px;}
}

/*   Headings  */
h1, h3, h4, h5, h6, p, div, li {
    font-family:'favorit_prolight';
    color: #000;
}
h1 {
    font-size:1.5em;
    padding-left:0;
    word-spacing: 0.2em;
    letter-spacing: 0.03em;
    padding-right:15px;
}
h1 a {
    font-size:20px; 
    color:#000; 
    padding-left:0;
}
    /* h2 für Titel in AKTUELL verwenden */
h2 {font-family:'prophet_regular'; color: #000; }
h2 {font-size:1.1em; margin-bottom:2px; border:0px solid green;}
h3 {font-size:1em; font-weight: bold; margin:0;  line-height:1.2em;}
/* Falls Überschrift nur fuer SEO sein soll  */
h1.title {display:none;}

 /*  kleiner und mittlerer Bildschirm  */ 
@media screen and (max-width: 992px) {
      h1 {font-size:1.2em;}
}
 /*  ************************************************************************* */ 
    
.regular  { font-family:'prophet_regular'; }

 /*  ***************** bis hierher wie in  Template Showcase general.css  *************** */ 
 
 /*   +++++++++  NEW - 2 columns for Projects  +++++++++++++  */
   
 .main {
    width: 100%;
    margin:auto;
    padding-top:0px;
    padding-right:20px;
    border:0px solid green;
    min-height:200px;
    }
 
/*  SIDEBAR für Menü - left   */
.sidebar{
     width: 15%;
	 float: left;
	 padding: 0px;
     margin:0;
	 border:0px solid blue;
     padding-right: 10px;
	}
/*  CONTENT - right   */
.project_content {
 	 width: 84%;
 	 float: left;
 	 padding: 15px;
     padding-left:70px;
 	 border: 0px solid #f0f;
	}    
.clear {clear:both;}

hr {border-color: #000;}

/* Bildbereich  */
.slider {
    max-width: 1200px; 
    margin: auto; 
    height: auto;
}
@media screen and (max-width: 600px) {
.slider {
    width: 100%;
    margin: auto; 
    height: auto;
/*    border: 2px solid green;*/ 
    } 
}
/* Abstandshalter zur Slideshow */
p.dist {
    margin:10px 0 0 0;
    border:0px solid red;
}
p.dist2 {
    margin:5px 0 0 0;
    border:0px solid red;
}

/* Keine Sidebar-Navi auf Bildschirmen schmaler als 991px, stattdessen Offcanvas-Menü */
 /* Mobilgeräte: Offcanvas anstatt Sidebar-Navi  */
@media screen and (min-width: 992px) {
#oc_menu {display:none;} 
}

@media screen and (min-width: 600px) and (max-width: 991px) {
.sidebar {
    width:0%;
    display:none;  
    }    
.project_content { 
    width:100% ;
    padding-left:0px;
    padding-right:0px;
/*    border: 2px solid green;*/
    }
}

@media screen and (max-width: 600px) {
.main {
    width: 100%;
    margin:auto;
    padding-top:0px;
    padding-right:5px;
}
.sidebar {
    width:0%;
    display:none;  
    }    
.project_content { 
    width:100% ;
    padding-left:0px;
    padding-right:0px;
/*    border: 2px solid blue;*/
    }
}

/*  Video - wenn schmaler als 3:2  - etwas tiefer setzen  */
li.video {margin-top:30px;}

 /*  *********   Ende Offcanvas für  Mobilgeräte  ********* */ 

/* +++++++++ END NEW +++++++++++  */

/*  ********  ab hier wieder Angaben wie für Showcase  *******  */
/* Dummy-Bereich auf kurzen Seiten */
.empty  {height:275px;}
.empty2 {height:150px;}
@media screen and (max-width: 992px) {
.empty  {display:none;}
.empty2 {display:none;}
}

 /*  ********************************* */ 
    
/*  ***************  Links ****************  */
/*  Farbdefinition so notwendig, damit Maillink in KONTAKT schwarz und andere Links in Texten blau sein   */
a { 
    font-family:'favorit_prolight';
    color:#000;
    text-decoration: none;
   	}
a:hover { color:#00f; }

a.blue  { color:#00f; }
a.blue:hover {  
    color:#000;  
    text-decoration: none;  	
    }
/*   *************** Ende Links ***********  */