* {margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
/* ============== Reset css styles ==================== */

@font-face 
 {
 font-family: 'myfont'; src: url('../font/myfont.ttf') format('truetype');
 }

body
  {
  font-family: myfont;
  color: #ffffff;
  font-weight: 400;
  line-height: 30px;
  background-color: #000000;
  }

.content
  {
  position: relative;
  width: 100%;
  min-height: 100%;
  background: rgb(0,0,0);
  background: rgba(0,0,0,0.6);
  }

section
  {
  width: 100%;
  padding: 20px 0;
  overflow: hidden;
  }

img
  {
  max-width:100%;
  }

.wrap
  {
  width: 1000px;
  margin: 0 auto;
  }
  
.page_inhalt
  {
  padding: 0px;
  }

/* navigation start */
/* textlinks start */

a, 
a:hover, 
a:visited
  {
  outline:none;
  }
a,
a:hover
  {
  color: #ffffcc;
  text-decoration: none;
  }

/* textlink ende */

/* menue top start */

.navigation
  {
  width: 160px;
  margin: 38 auto;
  padding: 5px 10px;
  font-size: 18px;
  color: #ffffcc;
  background-color: #660000;
  border-left: 3px solid #ffffcc;
  border-right: 3px solid #ffffcc;
  border-bottom: 3px solid #ffffcc;
  border-top: 3px solid #660000;
  box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -webkit-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  border-radius: 0px 0px 8px 8px;
  }
  
#menue
  {
  width: 100%;
  height: 90px;
  margin-top: -70px;
  padding-top: 25px;
  padding-bottom: 25px;
  background: #660000 url('../images/background_section.png');
  border-bottom: 3px solid #ffffcc;  
  transition: margin-top 1s ease-in-out;
  position: fixed;
  cursor: context-menu;
  z-index: 999;
  box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -webkit-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  }
  
#menue:hover
  {
  margin-top: 0px;  
  }

.top_menue_div1
  {
  float: right;
  }

.top_menue_div2
  {
  float: left;
  }
  
.top_menue
  {
  padding-top: 5px;
  margin-right: 25px;
  font-size: 16px;
  color: #ffffcc;
  background: transparent;
  border: 0px;
  cursor: pointer;
  }
  
.top_menue:hover
  {
  color: #ffffff;
  }
  
/* menue top ende */

/* menue footer start */

.footer_menue_div1
  {
  float: left;
  }
  
.footer_menue
  {
  padding: 0px 10px;
  font-size: 14px;
  color: #660000;
  background: transparent;
  border: 0px;
  border-right: 1px solid #660000;
  cursor: pointer;  
  }
  
.footer_first
  {
  border-left: 1px solid #660000;
  }
  
.footer_menue:hover
  {
  color: #000000;
  }

/* menue footer ende */


/* navigation ende */

/* überschriften start */

h1 
  {
  font-weight:300;
  font-size:26px;
  margin-top:30px;
  line-height:30px;
	color: #ffffcc;
  }
h2
  {
  font-weight:300;
  font-size:22px;
  text-transform:uppercase;
  color: #ffffcc;
  margin-bottom: 15px;
  }
h3
  {

  }
  
#page_inhalt h3
  {
  background: transparent url('../images/h3-icon.png') 0 0 no-repeat;
  padding:20px 0 0 25px;
  font-size:20px;
  font-weight:normal;
  font-style: italic;
  margin-bottom:20px;
  color: #ffffff;
  }
  
h4
  {
  color: #ffffcc;
  }

/* überschriften ende */

/* spalten start */

.col1 {
    width:13.333%;
    margin-left:4%;
    float:left;
}
.col2 {
    width:30.667%;
    margin-left:4%;
    float:left;
}
.col3 {
    width:48.0%;
    margin-left:4%;
    float:left;
}
.col4 {
    width:61.333%;
    margin-left:4%;
    float:left;
}
.col5 {
    width:82.667%;
    margin-left:4%;
    float:left;
}
.col6 {
    width:100%;
    margin:0;
    float:none;
}
.first {
    margin-left:0;
}

/* spalten end */

/* sections start */

#home
  {
  padding: 80px 0px 60px 0px;
  }
  
#info
  {
  padding: 10px 0px 0px 0px;
  background-color: #ffffcc;
  border-top: 8px solid #660000;
  color: #660000;
  font-size: 14px;
  line-height: normal;
  }
  
#news
  {
  padding: 45px 0;
  background-color: #660000;
  box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -webkit-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  line-height: normal;
  }

#page_inhalt_start, #page_inhalt
  {
  text-align: justify;
  background: rgb(0,0,0);
  background: rgba(0,0,0,0.75);
  }

#page_inhalt_top
  {
  background: #660000 url('../images/background_section.png');
  border-top: 3px solid #ffffcc;
  }
  
/*
#page_inhalt
  {
  text-align: justify;
  background: rgb(32,32,32);
  background: rgba(32,32,32,0.92);
  }
*/

#footer_widget
  {
  background-color: #660000;  
  }
  
#footer_links
  {
  background-color: #ffffcc;  
  }
  
#footer
  {
  background: #660000 url('../images/background_section.png');
  font-size: 12px;
  color: #999999;
  box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.9);
  -webkit-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.9);
  -moz-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.9);  
  }

/* sections ende */

/* login form start */

.input_login_name
  {
  width: 200px;
  padding: 8px;
  margin-bottom: 10px;
  background-color: #ffffdd;
  font-size: 12px;
  text-align: center;
  border: 1px solid #333333;
  border-radius: 4px;
  }
  
.input_login_pw
  {
  width: 200px;
  padding: 8px;
  margin-bottom: 10px;
  background-color: #ffffdd;
  font-size: 12px;
  text-align: center;
  border: 1px solid #333333;
  border-radius: 4px;  
  }
  
.button_login
  {
  width: 200px;
  padding: 8px;
  background-color: #202020;
  color: #ffffcc;  
  font-size: 12px;
  text-align: center;
  border: 1px solid #ffffcc;
  border-radius: 4px;
  cursor: pointer;
  }
  
.button_login:hover
  {
  background-color: #333333;
  color: #ffffff;  
  border: 1px solid #ffffcc;
  box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -webkit-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  }

/*login form ende */

/* start button news slider */

.button_news_slider
  {
  color: #ffffcc;
  font-size: 14px;
  background-color: #660000;
  border: 0px;
  cursor: pointer;
  }
  
.button_news_slider:hover
  {
  color: #ffffff;
  }
  
/* ende button news slider

/* start button news overview */

.button_news_overview
  {
  color: #ffffcc;
  font-size: 14px;
  background-color: #333333;
  border: 0px;
  cursor: pointer;
  }
  
.button_news_overview:hover
  {
  color: #ffffff;
  }
  
/* ende button news overview */

/* start button portfolio */

.button_portfolio
  {
  color: #ffffcc;
  font-size: 14px;
  background: transparent;
  border: 0px;
  cursor: pointer;
  margin-bottom: 30px;
  }

.button_portfolio_lastline
  {
  margin-bottom: 0px;
  }
  
.button_portfolio:hover
  {
  color: #ffffff;
  }
  
/* ende button portfolio */


/* Responsive styles ========================= */

@media screen and (max-width:1020px)
{
.wrap
  {
  width:86%;
  }
  
/* menue top start */

.navigation
  {
  width: 160px;
  margin: 21 auto;
  padding: 5px 10px;
  font-size: 18px;
  color: #ffffcc;
  background-color: #660000;
  border-left: 3px solid #ffffcc;
  border-right: 3px solid #ffffcc;
  border-bottom: 3px solid #ffffcc;
  border-top: 3px solid #660000;
  box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -webkit-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  border-radius: 0px 0px 8px 8px;
  }
  
#menue
  {
  width: 100%;
  height: 250px;
  margin-top: -235px;
  padding-top: 15px;
  padding-bottom: 25px;
  background: #660000 url('../images/background_section.png');
  border-bottom: 3px solid #ffffcc;  
  transition: margin-top 1s ease-in-out;
  position: fixed;
  cursor: context-menu;
  z-index: 999;
  box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -webkit-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  }
  
#menue:hover
  {
  margin-top: 0px;  
  }

.top_menue_div1
  {
  float: none;
  }

.top_menue_div2
  {
  float: none;
  }
  
.top_menue
  {
  padding-top: 5px;
  margin-right: 25px;
  font-size: 16px;
  color: #ffffcc;
  background: transparent;
  border: 0px;
  cursor: pointer;
  }
  
.top_menue:hover
  {
  color: #ffffff;
  }
  
/* menue top ende */

}
@media screen and (max-width:768px) 
{

/* menue top start */

.navigation
  {
  width: 160px;
  margin: 21 auto;
  padding: 5px 10px;
  font-size: 18px;
  color: #ffffcc;
  background-color: #660000;
  border-left: 3px solid #ffffcc;
  border-right: 3px solid #ffffcc;
  border-bottom: 3px solid #ffffcc;
  border-top: 3px solid #660000;
  box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -webkit-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  border-radius: 0px 0px 8px 8px;
  }
  
#menue
  {
  width: 100%;
  height: 250px;
  margin-top: -235px;
  padding-top: 15px;
  padding-bottom: 25px;
  background: #660000 url('../images/background_section.png');
  border-bottom: 3px solid #ffffcc;  
  transition: margin-top 1s ease-in-out;
  position: fixed;
  cursor: context-menu;
  z-index: 999;
  box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -webkit-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  }
  
#menue:hover
  {
  margin-top: 0px;  
  }

.top_menue_div1
  {
  float: none;
  }

.top_menue_div2
  {
  float: none;
  }
  
.top_menue
  {
  padding-top: 5px;
  margin-right: 25px;
  font-size: 16px;
  color: #ffffcc;
  background: transparent;
  border: 0px;
  cursor: pointer;
  }
  
.top_menue:hover
  {
  color: #ffffff;
  }
  
/* menue top ende */

  .col1,
  .col2,
  .col3,
  .col4,
  .col5
    {
    width:100%;
    float:none;
    margin:0 0 20px;
    }
}
@media screen and (max-width: 680px)
{ 

/* menue top start */

.navigation
  {
  width: 160px;
  margin: 21 auto;
  padding: 5px 10px;
  font-size: 18px;
  color: #ffffcc;
  background-color: #660000;
  border-left: 3px solid #ffffcc;
  border-right: 3px solid #ffffcc;
  border-bottom: 3px solid #ffffcc;
  border-top: 3px solid #660000;
  box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -webkit-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  border-radius: 0px 0px 8px 8px;
  }
  
#menue
  {
  width: 100%;
  height: 250px;
  margin-top: -235px;
  padding-top: 15px;
  padding-bottom: 25px;
  background: #660000 url('../images/background_section.png');
  border-bottom: 3px solid #ffffcc;  
  transition: margin-top 1s ease-in-out;
  position: fixed;
  cursor: context-menu;
  z-index: 999;
  box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -webkit-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 5px 5px 10px -3px rgba(0,0,0,0.75);
  }
  
#menue:hover
  {
  margin-top: 0px;  
  }

.top_menue_div1
  {
  float: none;
  }

.top_menue_div2
  {
  float: none;
  }
  
.top_menue
  {
  padding-top: 5px;
  margin-right: 25px;
  font-size: 16px;
  color: #ffffcc;
  background: transparent;
  border: 0px;
  cursor: pointer;
  }
  
.top_menue:hover
  {
  color: #ffffff;
  }
  
/* menue top ende */

}