/*------------------------------------------------------------------
Theme Name:	PREMIUM LAYERS VCARD
Version:	1.0
-------------------------------------------------------------------*/

/*------------------------------------------------------------------
[TABLE OF CONTENTS]

	1. Global Styles
	2. Header
	3. Theme Extras
	4. Main Content
	5. Profile
	6. Portfolio
	7. Resume
		7.1. Skills Info 
		7.2. Services 
	8. Blog
	9. Contact
		9.1. Map Styles
		9.2. Contact Info

	10. Footer
	11. Blog - Single Post

-------------------------------------------------------------------*/

/*------------------------------------------------------------- 
		          1. GLOBAL STYLES
--------------------------------------------------------------- */

body {
	background-color: #d7e8ec;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
}

p {
	font-size: 17px;
	font-weight: 400;
	line-height: 29px;
	color: #828282;
}

a {
	color: #828282;
}

a:hover {
	color: #828282 !important;
}

.no-padding {
	padding: 0px !important;
}

.main-content {
	margin: 100px 0;
	overflow: hidden;
}

/*------------------------------------------------------------- 
	          2. HEADER / NAV - LEFT CONTENT
--------------------------------------------------------------- */

.l-content {
	background: #000;
	width: 27.7%;
	padding: 0px;
}

.profile-pic {
	background-color: #fcfcfc;
	height: 275px;
	position: relative;
}

.pic-bg {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	display: table-cell;
	margin: auto;
	vertical-align: middle;
	padding: 15px;
}

.navigation {
	padding: 0px;
	margin: 0px;
}

.navigation li {
	list-style: none;
}

.navigation li {
	border-bottom: 1px solid #222b2e;
	position: relative;
	list-style: none;
	background: -moz-linear-gradient(top,  #66b4c0 0%, #51adbb 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66b4c0), color-stop(100%,#51adbb));
	background: -webkit-linear-gradient(top,  #266b4c0 0%,#51adbb 100%);
	background: -o-linear-gradient(top,  #66b4c0 0%,#51adbb 100%);
	background: -ms-linear-gradient(top,  #66b4c0 0%,#51adbb 100%);
	background: linear-gradient(to bottom,  #66b4c0 0%,#51adbb 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66b4c0', endColorstr='#51adbb',GradientType=0 );
}

.navigation li:first-child {
	border-top: 1px solid #222b2e;
}

.navigation li:last-child {
	border-bottom: none;
}

.navigation li a {
	padding: 23.7px 25px;
	display: table;
	width: 100%;
	text-align: right;
	font-size: 17px;
	color: #ffffff;
	position: relative;
}

.navigation li a i {
	font-size: 20px;
	position: relative;
	top: 1px;
	margin-left: 15px;
	color: #ffffff;
}

.navigation li a:hover, .navigation li a:hover i, .flex-active a, .flex-active a i {
	color: #ffffff !important;
}

.navigation li:before {
	content: '';
	position: absolute;
	top: 0px;
	width: 0%;
	height: 100%;
	right: 0px;
	background: #ef7c00 !important;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.navigation li:hover:before ,
.navigation li.flex-active:before {
	content: '';
	width: 100% !important;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

/*------------------------------------------------------------- 
	                3. THEME EXTRAS
--------------------------------------------------------------- */

.sep1 {
	height: 3px;
	width: 70px;
	background: #ef7c00 !important;
	margin: 20px 0;
}

.sep2 {
	height: 6px;
	width: 50px;
	background: #ef7c00 !important;
	margin: 10px 0 20px;
}

.page-head {
	border-bottom: 1px solid #ededed;
	padding-bottom: 18px;
}

.page-head h3 {
	margin: 0px;
	font-size: 30px;
	text-transform: uppercase;
	font-weight: 600;
	color: #2c383c;
}

.page-head p {
	font-size: 13px;
	color: #2c383c;
	padding-top: 4px;
	text-align: right;
}

.np-controls a i {
	color: #66b5c2;
	font-size: 30px;
	margin-left: 4px;
}

.np-controls a:hover i {
	color: #ef7c00 !important;
}

.np-main {
	display: table;
	float: right;
}

.np-main p {
	float: left;
}

.np-controls {
	float: right;
	position: relative;
	top: 5px;
	margin-left: 15px;
}

/*------------------------------------------------------------- 
                 4. MAIN CONTENT - RIGHT CONTENT
--------------------------------------------------------------- */

.r-content {
	padding: 0px;
	width: 72.3%;
}

/*-------------------------------------------- 
                 5. PROFILE
---------------------------------------------- */

.profile {
	padding: 20px 30px 15px;
	background: #fff;
}

.profile h2 {
	font-size: 32px;
	font-weight: 300;
	margin: 0px;
	line-height: 36px;
	color: #606060;
}

.profile h2 span {
	font-weight: 700;
	color: #000;
}

.personal-info {
	border-top: 1px solid #ececec;
	padding-top: 15px;
	margin-top: 15px;
}

.personal-info h4 {
	color: #2c383c;
	margin: 25px 0 0;
	font-size: 24px;
	font-weight: 300;
}

.personal-info ul {
	padding: 0px;
}

.personal-info li {
	float: left;
	list-style: none;
	margin-right: 20px;
	margin-bottom: 20px;
	height: 43px;
	border: 1px solid #ededed;
	overflow: hidden;
}

.personal-info li em {
	padding: 0 15px;
	line-height: 43px;
	font-size: 16px;
	color: #9b9b9b;
	font-weight: 400;
	font-style: normal;
}

.personal-info li span {
	padding: 11px 15px;
	line-height: 42px;
	font-size: 16px;
	color: #484848;
	font-weight: 400;
	background: #f6f6f6;
	border-left: 1px solid #ededed;
}

/*-------------------------------------------- 
                  7. RESUME
---------------------------------------------- */

.resume {
	padding: 30px 30px 0;
	margin-bottom: 0px;
	overflow: hidden;
	background: #fff;
}

.resume h4 {
	color: #2c383c;
	margin: 0px;
	font-size: 24px;
	font-weight: 300;
	margin-top: 20px;
}

.resume-info ul {
	padding: 0px;
}

.resume-info ul {
	margin-top: -15px;
}

.leistungen-info ul li,
.angebote ul li {
	padding: 5px 0;
	margin: 0px;
	list-style-type: square;
}

.leistungen-info li,
.angebote li {
	margin: 0px;
	color: #828282;
	font-size: 17px;
	line-height: 29px;
	margin-top: 5px;
}

.resume-info h5 {
	font-size: 16px;
	font-weight: bold;
	color: #2c383c;
}

.year {
	color: #2c383c;
}

.year i {
	color: #aaaaaa;
	margin-right: 5px;
}

/* 7.1. Skills Info */

.skills-info {
	padding-bottom: 20px;
	border-bottom: 1px solid #ededed;
}

.skills-info ul {
	padding: 0px;
}

.skills-info ul li {
	list-style: none;
	margin-bottom: 2px;
}

.skills-info ul li p {
	font-size: 13px;
	color: #9a9a9a;
	margin-bottom: 1px;
}

.skills-info ul li p span {
	float: right;
	color: #6a6a6a;
}

.skills-bg {
	height: 20px;
	display: table;
	width: 100%;
	border: 1px solid #ededed;
	position: relative;
}

.skills-bg span {
	background: #ef7c00 !important;
	height: 20px;
	display: table;
	position: absolute;
	top: 0px;
	left: 0px;
}

.skill1, .skill2, .skill3, .skill4, .skill5 {
	width: 0px;
	-webkit-transition: all .7s ease-in-out;
	-moz-transition: all .7s ease-in-out;
	-o-transition: all .7s ease-in-out;
	transition: all .7s ease-in-out;
}

/* 7.2. Services */

.services-info {
	border-bottom: 1px solid #ededed;
	padding-bottom: 30px;
}

.services-info ul {
	padding: 0px;
	border: 0 solid #ededed;
	border-width: 0 0 1px 1px;
	display: table;
	width: 100%;
	margin-top: 30px;
}

.services-info ul li {
	width: 33.3333%;
	padding: 35px 15px 20px;
	float: left;
	list-style: none;
	border: 0 solid #ededed;
	border-width: 1px 1px 0 0;
	height: 165px;
	cursor: pointer;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.services-info ul li i {
	color: #c0c0c0;
	text-align: center;
	font-size: 36px;
	display: table;
	margin: 0 auto;
	padding-bottom: 25px;
	margin-bottom: 14px;
	background: url(../images/sep.png) no-repeat bottom center;
	position: relative;
	width: 43px;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.services-info ul li h5 {
	color: #c4c4c4;
	text-align: center;
	font-size: 18px;
	font-weight: 400;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.services-info ul li:hover i {
	padding-bottom: 8px;
	margin-bottom: 0px;
	background: none;
	color: #fff;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.services-info ul li:hover h5 {
	padding-bottom: 25px;
	color: #fff;
	margin-bottom: 14px;
	background: url(../images/sep-lite.png) no-repeat bottom center;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.services-info ul li:hover {
	background: #ef7c00 !important;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-o-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

/*-------------------------------------------- 
                  8. BLOG
---------------------------------------------- */

.blog {
	padding: 30px 30px 0;
	margin-bottom: 0px;
	overflow: hidden;
	background: #fff;
}

article {
	padding-bottom: 22px;
	border-bottom: 1px solid #ededed;
	margin-bottom: 30px;
}

article h3 {
	font-size: 16px;
	color: #2c383c;
	margin: 0px;
}

article h3 a {
	color: #2c383c;
}

.post-meta {
	color: #a1a1a1;
	font-size: 12px;
	padding: 10px 0;
}

.post-meta i {
	margin-right: 8px;
	color: #b6b6b6;
	font-size: 17px;
}

.post-meta a {
	color: #a1a1a1;
	margin-right: 15px;
}

.post-meta a:hover {
	color: #222;
}

article p {
	font-size: 15px;
	line-height: 24px;
	color: #828282;
	margin-bottom: 0px;
}

.link-post {
	padding-bottom: 0px;
	border: none;
	background: #ef7c00 !important;
	padding: 60px 20px;
	margin-bottom: 35px;
}

.link-post i {
	font-size: 44px;
	color: #2c383c;
	text-align: center;
	display: table;
	margin: 0 auto 15px;
}

.link-post a {
	font-size: 25px;
	color: #2c383c;
	font-family: Neuton;
	font-style: italic;
	text-align: center;
	display: block;
	font-weight: 200;
}

.link-post a:hover {
	color: #2c383c;
	text-decoration: underline;
}

.quote-post {
	background: #2d383c;
	padding: 40px 40px 50px;
	padding-bottom: 0px;
	border: none;
	margin-bottom: 60px;
}

.quote-post blockquote {
	border: none;
	padding: 0px;
	color: #ef7c00 !important;
	font-size: 27px;
	font-family: Neuton;
	font-weight: 200;
	font-style: italic;
	line-height: 30px;
	text-align: center;
}

.quote-post i {
	color: #fff;
	display: block;
	text-align: center;
	font-size: 30px;
}

.author-name {
	color: #FFF;
	text-align: center;
	font-size: 22px;
	font-weight: bold;
	display: table;
	margin: 10px auto 35px;
}

.no-border {
	border-bottom: 0px;
}

.blog-wrap {
	padding-top: 30px;
}

/*-------------------------------------------- 
                9. CONTACT
---------------------------------------------- */

.contact h4 {
	color: #2c383c;
	margin: 20px 0 0;
	font-size: 24px;
	font-weight: 300;
}

.contact {
	padding: 30px 30px 0;
	margin-bottom: 0px;
	overflow: hidden;
	background: #fff;
}

/* 9.1. Map Styles */

.gmap {
	padding: 0px;
	margin: 25px auto;
}

.gmap iframe {
	width: 100% !important;
	height: 350px !important;
}

.gmap div {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

#map {
	display: block;
	width: 100%;
	height: 360px;
	margin: 0 auto;
}

#map.large {
	height: 500px;
}

#map img {
	max-width: none !important;
	height: auto;
}

/* 9.2. Contact Info */

.contact-info p {
	font-size: 17px;
	line-height: 29px;
	margin: 12px 0;
}

.contact-info {
	padding-bottom: 25px;
	border-bottom: 1px solid #ededed;
	margin-bottom: 30px;
	display: table;
	width: 100%;
}

.contact-info ul {
	padding: 0px;
}

.contact-info ul li {
	float: left;
	font-size: 16px;
	color: #828282;
	list-style: none;
	margin-right: 18px;
}

.contact-info ul li i {
	margin-right: 5px;
	color: #4c4d4f;
	font-size: 16px;
}

.contact-form form {
	margin: 20px 0;
}

.contact-form input {
	height: 52px;
	border-radius: 4px;
	border: 1px solid #ededed;
	padding: 0 18px;
	font-size: 12px;
	width: 100%;
	margin-bottom: 10px;
}

.checkbox input[type="checkbox"] {
	height: 15px !important;
	width: 15px !important;
	border: 1px solid #ededed;
	padding: 0 18px;
	font-size: 12px;
	margin: 3px 5px 0 0;
}

.contact-form textarea {
	height: 176px;
	border-radius: 4px;
	border: 1px solid #ededed;
	padding: 15px 18px;
	font-size: 12px;
	width: 100%;
	margin-bottom: 18px;
}

.contact-form button {
	width: 120px;
	height: 43px;
	background: #59AFBD !important;
	border-radius: 4px;
	font-size: 13px;
	color: #F1F1F1;
	border: none;
	float: right;
}

.contact-form button:hover {
	background: #EF7C00 !important;
	color: #F1F1F1 !important;
}

.statusMessage,.successmessage,.errormessage {
	display: none;
	margin: auto;
	width: 100%;
	height: auto;
	background: #fff;
	border: 1px solid #ddd;
	margin: 0 auto;
	box-shadow: 0 0 8px #aaa;
	-moz-box-shadow: 0 0 8px #aaa;
	-webkit-box-shadow: 0 0 8px #aaa;
	padding: 20px 20px 0;
}

.statusMessage p {
	margin: 0;
	color: #888;
}

.successmessage p {
	margin: 0;
	color: #888;
}

.success-ico {
	background: url(../images/success.png);
	width: 30px;
	height: 30px;
	float: left;
	margin-right: 15px;
	position: relative;
	top: -6px;
}

.error-ico {
	background: url(../images/error.png);
	width: 30px;
	height: 30px;
	float: left;
	margin-right: 15px;
	position: relative;
	top: -6px;
}

.errormessage p {
	margin: 0;
	color: #888;
}

/*-------------------------------------------- 
                  10. FOOTER
---------------------------------------------- */

footer {
	background: #f1f1f1;
	height: 70px;
	padding: 20px 30px;
	position: relative;
	z-index: 99;
}

footer p {
	color: #000000;
	font-size: 14px;
}

.social {
	padding: 0px;
	display: table;
	float: right;
}

.social li {
	float: left;
	list-style: none;
	margin-left: 15px;
}

.social li a {
	font-size: 19px;
	color: #2b373b;
}

.social li a:hover {
	color: #ef7c00 !important;
}

/*-------------------------------------------- 
               11. BLOG - SINGLE POST
---------------------------------------------- */

.blog-single p {
	margin-bottom: 17px;
}

.blog-single-img {
	margin-bottom: 25px;
}

.comment-avatar {
	width: 80px;
	height: 80px;
	float: left;
	border: 1px solid #dcdcdc;
	padding: 8px;
	border-radius: 6px;
}

.comments-wrap ul {
	padding: 0px;
}

.comments-wrap ul li {
	list-style: none;
	display: table;
	width: 100%;
	margin-bottom: 25px;
	padding-bottom: 25px;
	border-bottom: 1px solid #f2f2f2;
}

.comment-info {
	margin-left: 97px;
}

.comment-info h6 {
	color: #3c3c3c;
	font-weight: 400;
	font-size: 14px;
	margin: 0px;
}

.comment-info h6 span {
	color: #b8b8b8;
	font-weight: 400;
	font-size: 11px;
	padding-left: 5px;
}

.comment-info p {
	color: #868686;
	font-size: 13px;
	margin: 0px 0px 4px;
}

.reply {
	width: 42px;
	height: 22px;
	border-radius: 4px;
	color: #2b373b;
	font-size: 11px;
	line-height: 20px;
	text-align: center;
	background: #ef7c00 !important;
	display: table;
}

.reply:hover {
	color: #ef7c00 !important;
	background: #222;
}

.sub-comment {
	width: 85% !important;
	float: right;
}

.sub-sub-comment {
	width: 70% !important;
	float: right;
}

.blog-single h4 {
	color: #2c383c;
	margin: 0px 0px 30px;
	font-size: 24px;
	font-weight: 300;
}

ul.impressum {
    padding-left: 35px;
}

.impressum ul {
	font-size: 17px;
	font-weight: 400;
	line-height: 29px;
	color: #828282;
}

.impressum h4 {
	margin: 20px 0;
}

/*-------------------------------------------- 
               12. Skripte
---------------------------------------------- */
.skripte .panel-group .panel {
	border-radius: 0px;
}

.skripte h4.standort {
	padding-bottom: 20px;
} 

.skripte .panel-heading h4 {
	font-size: 18px;
	margin-top: 0px;
}

.skripte .panel-collapse .fa-arrow-circle-right {
	color: #828282;
	margin-right: 10px;
}



/*-------------------------------------------- 
                LOADING STYLES
---------------------------------------------- */

#mask {
	background-color: #FFF;
	height: 100%;
	position: fixed;
	width: 100%;
	z-index: 10000000000;
	top: 0px;
}

.loader {
	position: absolute;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	top: 50%;
	left: 50%;
}

/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {

.container {
	max-width: 760px;
	width: 760px;
	margin: 0 auto;
}

footer p {
	color: #000;
	font-size: 13px;
}

}

/*  #Mobile (Portrait)
================================================== */

/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {

.container {
	width: 100%;
	margin: 0 auto;
}

.l-content {
	background: #51adbb;
	height: auto;
	width: 100%;
	padding: 0px;
	display: table;
}

.r-content {
	padding: 0px;
	width: 100%;
}

.main-content {
	margin: 0;
}

.navigation li {
	float: left;
	width: 20%;
}

.navigation li a {
	font-size: 0px;
}

.navigation li a i {
	font-size: 20px;
	margin-left: 0px;
	color: #d1d1d1;
}

.profile-pic {
	background-size: 100% auto;
}

.personal-info li em {
	font-size: 13px;
}

.personal-info li span {
	font-size: 13px;
}

#portfolio .item {
	width: 100%;
}

.np-main {
	width: 100%;
}

.services-info ul li {
	width: 100%;
}

article h3 {
	margin: 15px 0 0;
}

footer p {
	font-size: 15px;
	text-align: center;
	padding-top: 20px;
}

.social {
	padding: 0px;
	display: table;
	float: none;
	margin: 0 auto;
}

.flexslider {
	min-height: auto;
}

footer {
	height: 100px;
}

.sub-comment {
	width: 95% !important;
}

.sub-sub-comment {
	width: 90% !important;
}

.contact-info ul li {
	float: none;
	margin: 10px 0;
}

.profile-pic {
	height: 400px;
}

.pic-bg {
	padding: 20px;
}
}

/* #Mobile (Landscape)
================================================== */

/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {

	.container {
		max-width: 470px;
		width: 470px;
		margin: 0 auto;
	}

	.navigation li a i {
		text-align: center;
		display: table;
		margin: 0 auto;
	}

	.services-info ul li {
		width: 50%;
	}

	.pic-bg {
		width: 100%;
		height: 100%;
	}
	
	.profile-pic {
		height: 420px;
	}
	
	.contact-info ul li {
		float: none;
		margin: 10px 0;
	}
	
	.personal-info li span {
		font-size: 15px;
	}

}

/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 991px) {

	.pic-bg {
		width: 220px;
		height: 220px;
	}
	
	.contact-info ul li {
		float: none;
		margin: 10px 0;
	}

}