/*Custom Style*/
@import url(http://fonts.googleapis.com/css?family=Montserrat+Alternates:400,700);
@import url(http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);


html, body{
    height: 100%;
}
body {
    font-family: 'Open Sans', 'Arial', 'Helvetica', sans-serif;
}

.container.nomargin {
	margin:0;
	padding:0;
	width:100%;
}
.padding {
	padding:80px 0;
}

.margin {
	margin: 30px 0;
}
.title {
	font-size:4em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    display:block;
}
hr.star {
	margin:25px auto 30px;
	padding:0;
	max-width:250px;
	border:0;
	border-top:solid 2px;
	text-align:center;
}
hr.star:after {
	color:#fff;	
	content:"\2605";
	position:relative;
	top:-.8em;
	padding:0 .25em;
	font-size: 2.5em;
    color: #bdc3c7;
    background: #ecf0f1;
}

hr.dotted{
    margin:13px auto 10px;
	padding:0;
	max-width:250px;
	border:0;
	border-top:dotted 2px;
	text-align:center;
    color: #bbbab9;
}


/* Navigation Styling */
.navbar {
    background: #cececd;
    padding: 10px;
	
}
.navbar .centre-block {
    
}
.navbar .navbar-brand:hover {

}
.navbar-inverse .navbar-nav>li>a {
    color: #fff;
    font-size: 1.5em;

}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:hover,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a {
    background: rgba(127, 140, 141,0.0);
    border-bottom: 3px solid #fff;
    font-weight: 600;
}


/* Header Styling */
#header {
    color: black;
}

#header .logo {
    margin-top: 20px;
}

#header .icon {
	font-size: 30px;
    margin-top: 70px;
    display: block;
}

#header hr.star:after {
    color: #cececd;
}
#header .skills {
	font-size: 2.75em;
}


/*down arrow icon*/

#header a {
    color: #ffffff;
}

#header a:hover {
    color: #ffffff;
}



/* Work Styling */
#work {
	
}
#work img {

}
#work hr.star:after {
    color: #cececd;
    background-color: #fff;
}

#work .portfolio-item {
    height: 300px;
    background: #fff;
}

/*Hover effect*/
#work .portfolio-item img {
    margin: 20px 0;
    opacity: 1;
    transition: all .3s;
}

#work .portfolio-item img:hover {
    margin: 5px 0;
    opacity: 0.7;
}


/*Text Styling in Work Section*/

.service-block{
    position: relative;
}

.service-block [class ^="fa"]{
    position: absolute;
    display: block;
    font-size: 30px;
    margin: -13px 0 0;
    color: #93918f;
    top: 0;
    left: 0;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
}

.service-box-right{
    margin: 10px 10px 23px 60px;
    padding: 0 20px 0;
}

.service-box-right h3{
    font-size: 18px;
    color: #93918f;
    margin-bottom: 12px;
    text-align: left;
}

.service-box-right p{
    font-weight: 400;
    color: #93918f;
    font-size: 12px;
    line-height: 22px;
    text-align: left;
}

.service-block, .service-block [class^="fa"], .service-block:hover [class^="fa"]{
    -webkit-transition: all 0.6s linear;
    -moz-transition: all 0.6s linear;
    -o-transition: all 0.6s linear;
    -ms-transition: all 0.6s linear;
    transition: all 0.6s linear;
}

.service-block:hover [class^="fa"]{
    color: #93918f;
    transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);

}



/* Presents Styling */
#presents {
	background: #ececeb;
}
#presents img {

}
#presents hr.star:after {
    color: #cececd;
    background-color: #ececeb;
}

#presents .portfolio-item {
    height: 255px;
    background: #ececeb;
}

/*Hover effect*/
#presents .portfolio-item img {
    margin: 20px 0;
    opacity: 1;
    transition: all .3s;
}

#presents .portfolio-item img:hover {
    margin: 5px 0;
    opacity: 0.7;
}



/* Events Styling */
#events {
	
}
#events img {

}
#events hr.star:after {
    color: #cececd;
    background-color: #fff;
}

#events .portfolio-item {
    width: 100%;
    height: 385px;
    background: #fff;
}



/*Hover effect*/
#events .portfolio-item img {
    margin: 20px 0;
    opacity: 1;
    transition: all .3s;
}

#events .portfolio-item img:hover {
    margin: 5px 0;
    opacity: 0.7;
}




/* Contact Styling */
#contact {	
    font-family: 'Open Sans', sans-serif;  
    color: #ffffff;
    background: #eee;
    background-image: url(../img/contact-background-regal-dunkel.jpg);
    background-size: cover;
    background-attachment: scroll;
    background-repeat: no-repeat;
}

#contact h4 {
	
}
#contact .has-success .form-control,
#contact .has-success .control-label {

}

#contact hr.star {
    color: ;
}

#contact hr.star:after {
	color: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
}

#contact .btn-social {
	display:inline-block;
	width:50px;
	height:50px;
	border:3px solid #fff;
	border-radius:100%;
	text-align:center;
	font-size:25px;
	font-weight:900;
	line-height:45px;
}

#contact .btn-social i {
    color: #eee;

}

#contact .socials>li {
    margin: 25px 12px;
}
#contact .socials a {
    transition: all .3s;

}
#contact .socials>li:hover a {
    background: #ffffff;
}
#contact .socials>li:hover i {
    color: #888784;
	
}

#contact .btn-primary {
	
}

#contact .btn-primary:focus,
#contact .btn-primary:hover{
	
}

/* Footer Styling */
footer {
    background: #cececd;
    color: #ecf0f1;

}

footer p {
    padding: 10px;
    margin: 0;
	
}



/* ==== Media Queries ====*/

/* iPads (Tablets) ----------- */
@media only screen and (min-width: 768px) and (max-width : 1024px) 
 and (min-device-width: 1536px)
  and (max-device-width: 2048px)
{
/* Styles */

    
#header {
    padding-top: 100px;
    background-attachment: scroll;
}
    

    
.title {

}

.padding {

}

#work .portfolio-item {
    height: 160px;
    background: #fff;
}
    

/*Hover effect*/
#work .portfolio-item img {
    margin: 20px 0 80px;
    opacity: 1;
    transition: all .3s;
}

#work .portfolio-item img:hover {
    margin: 20px 0 80px;
    opacity: 0.7;
}


#work .ueber-uns-margin-row{
}
    
    
#presents .portfolio-item {
    height: 160px;
    background: #ececeb;
}
    

#presents .presents-margin-row{
}

/*Hover effect*/
#presents .portfolio-item img {
    margin: 20px 0;
    opacity: 1;
    transition: all .3s;
}

#presents .portfolio-item img:hover {
    margin: 20px 0;
    opacity: 0.7;
}
    
    
#events .portfolio-item {
    height: 280px;
    background: #fff;
}
    
#event .events-margin-row{
}
    
#event .centre{
    display: block;
    margin-left: auto;
    margin-right: auto;
}    

#contact  {
	 font-family: 'Open Sans', sans-serif;  
    color: #ffffff;
    background: #eee;
    background-image: url(../img/contact-background-regal-dunkel.jpg);
    background-size: cover;
    background-attachment: scroll;
    background-repeat: no-repeat;
}

}

/* Iphone/Android (Small Devices) ----------- */
@media only screen and (min-width : 320px) and (max-width: 767px) {
/* Styles */
/* down arrow icons */
    
#header{
    background-attachment: scroll;
}
    

#header a {
    color: #cececd;
}
    
#header a:hover {
    color: #cececd;
}
    
#header .icon {
    font-size: 15px;
    margin-top: auto;
    display: block;
}
    
    
.title {
	font-size:3em;
}

.skills {
	font-size: 1em;
}


#work .portfolio-item {
    height: 200px;
    background: #fff;
}
    
#work .ueber-uns-margin{
    margin-top: 110px;
}
    

/*Hover effect*/
#work .portfolio-item img {
    margin: 0 auto;
    display: inline-block;
    width: 85%;
    height: 85%;
    margin: 20px 0;
    opacity: 1;
    transition: all .3s;
}

#work .portfolio-item img:hover {
    margin: 20px 0;
    opacity: 0.7;
}
    
    
#presents .portfolio-item {
    height: 200px;
    background: #ececeb;
}
    
    
#presents .presents-margin{
    margin-top: 120px;
}
    
    

/*Hover effect*/
#presents .portfolio-item img {
    margin: 0 auto;
    display: inline-block;
    width: 85%;
    height: 85%;
    margin: 20px 0;
    opacity: 1;
    transition: all .3s;
}

#presents .portfolio-item img:hover {
    margin: 20px 0;
    opacity: 0.7;
}
    
    
#events .portfolio-item {
    height: 200px;
    background: #fff;
}
    

    
#contact{
     font-family: 'Open Sans', sans-serif;  
    color: #ffffff;
    background: #eee;
    background-image: url(../img/contact-background-regal-dunkel.jpg);
    background-size: cover;
    background-attachment: scroll;
    background-repeat: no-repeat;
}
    

#contact .btn-social {
	display:inline-block;
	width:35px;
	height:35px;
	border:2px solid #34495e;
	border-radius:100%;
	text-align:center;
	font-size:16px;
	font-weight:900;
	line-height:30px;
}
    
#contact .socials>li {
    margin: 15px 2px;
}


.social-media {
    margin-top: 30px;
}

.margin.mobile_only {
}

}



/*********** banner - Foto im Hintergrund ************/
.main{
    width: 100%;
    min-height: 100%;
    background: url(../img/banner_background_produkte.jpg) center center no-repeat fixed;
    background-size: cover;
    background-attachment: scroll;
    padding: 3em 0 4.5em;
    position: relative;
    color: #ffffff;
}


.overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    top: 0;
}


.scrollicon{
    background-color: rgda(0, 0, 0, 0,);
}





/*********** nav-tabs bei ueber uns ************/

.nav-pills > li {
    margin-top: auto;
    padding: 2px;
    float: inline-block;
    color: #fff;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}
.nav-pills > li > a {
    color: #93918f;
    background: #d8d8d7;
    border-radius: 0px;
}
.nav-pills > li + li {
  margin-left: 1px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #ddd;
}




/*********** Impressum Button ************/

.btn-warning {
  color: #fff;
  background-color: #93918f ;
    border-radius: 0px;
    border-color: #93918f;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  color: #93918f;
  background-color: #fff;
  border-color: #93918f;

    
}
.btn-warning:active,
.btn-warning.active,
.open > .dropdown-toggle.btn-warning {
  background-image: none;
}