/*
Template Name: Bodo - Simple One Page Personal
Author: BdgPixel
Author URI:  http://themeforest.net/user/BdgPixel
*/
/* -----------------------------------------------------------
TABLE OF CONTENTS:
--------------------------------------------------------------
1) General
2) Page Loader
3) Helper
4) Header
5) Typography
6) Hero
7) Sections
 7.a) portfolio
 7.b) service
 7.c) experience
 7.d) testimonial
 7.e) blog
 7.f) about
 7.g) contact
 7.h) footer
8) Components
 8.a) skills


-------------------------------------------------------------

------------------------------------------------------------*/
/*-----------------------------------------1) General--------------------------------------------------*/
@font-face {
  font-family: 'Glyphter';
  src: url('../fonts/Glyphter.eot');
  src: url('../fonts/Glyphter?#iefix') format('embedded-opentype'), url('../fonts/Glyphter.woff') format('woff'), url('../fonts/Glyphter.ttf') format('truetype'), url('../fonts/Glyphter.svg#Glyphter') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: 'feathericons';
	src:url('../fonts/feathericons/feathericons.eot?-8is7zf');
	src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),
		url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),
		url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),
		url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg');
}
/* roboto-slab-regular - latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-slab.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }
body,
html {
  left: 0;
  top: 0;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  font-family: 'Roboto', sans-serif;
  height: 100%;
  width: 100%;
}
body {
  color: #2f2f2f;
  font-size: 16px;
  line-height: 1.7;
  background-color: #fff;
    background: url(../images/me5.jpg) no-repeat 80% bottom;
    background-size: contain;
    background-attachment: fixed;
}
@media screen and (max-width: 992px) {
  body {
    background: url(../images/me5.jpg) no-repeat right bottom;
      background-size: contain;
    background-attachment: fixed;
}
}

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

}
}

a {
    outline: none;
  color: #2f2f2f;
  text-decoration: none;
  transition: ease .6s;
  -webkit-transition: ease .6s;
  -moz-transition: ease .6s;
  -o-transition: ease .6s;
  -ms-transition: ease .6s;
}
a:hover {
  text-decoration: none;
  color: #818181;
}
a:focus {
  outline: none;
  color: #999999;
  text-decoration: none;
}

a.button{
  font-size:14px;
  color:#fff;
    background: #6998b3;
    display:inline-block;
    padding:10px 22px;
    margin: 10px 0;
    margin-right:10px;
    float:left;
    border:1px solid #6998b3;
}

a.button:hover {
  color: #fff;
    background: #ccc;
}


iframe {
  border: none;
  width: 100%;
}
img { max-width: 100%; }
*:focus {
  outline: none;
}

section {z-index:1;position:relative;}

.weiss {color:#fff;}
/*----------------------------------------- 2) Preloader --------------------------------------------------*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 999999;
}
#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  background-image: url(../images/loader.gif);
  background-repeat: no-repeat;
  background-position: center center;
  text-align: center;
  margin: -40px 0 0 -100px;
}
#status img {
  text-align: center;
  margin-top: -80px;
}

/*----------------------------------------- 3) Helper --------------------------------------------------*/
.no-pad {padding: 0 !important; margin: 0 !important;}
.pad-80 {padding-top: 80px;}
.mar-t-50{margin-top: 50px !important;}
.mar-tm-10{ margin-top: -10px;}
.mar-b-50{margin-bottom: 50px !important;}
.white-col{
  background: #ffffff;
  padding: none;
}

/*---- span -----*/
.title-small span { position: relative;}
.title-small span:after {
  content: "";
  position: absolute;
  bottom: -20px;
  height: 3px;
  background: #DEDEDE;
  width: 28px;
  left: 0;
}
.title-small-center span {position: relative;}
.title-small-center span:after {
  content: "";
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  height: 3px;
  background: #DEDEDE;
  width: 28px;
  left: 0;
}
/*----- background ------*/
.grey-bg {
  background: #f6f6f6;
  padding: 120px 0;
  display: block;
}
.dark-bg {
  background: #2f2f2f;
  padding: 120px 0;
  display: block;
}
.white-bg {
  background: #ffffff;
  padding: 120px 0;
  display: block;
}
/*-------- content --------*/
#contact p {
  font-weight: 400;
  margin-top: 20px;
  line-height: 26px;
  font-size: 14px;
}
#contact p.top {
  margin-top: 70px;
}
.content-detail {
  font-weight: 400;
  margin-top: 70px;
  line-height: 30px;
  font-size: 14px;
  letter-spacing: 0.4px;
}

.content-details {
  font-weight: 400;
  margin-top: 40px;
  line-height: 30px;
  font-size: 14px;
}
.pad-bottom {
  padding-bottom: 80px;
}
.text-detail {
  margin-top: 30px;
  color: #5f5f5f;
}

.listing-item{
  list-style: none;
  display: inline-block;
  width: 100%;
  padding: 0;
  margin: 0;
}

/*----------------------------------------- 4) Header --------------------------------------------------*/
#ar-header {
  position: fixed;
  z-index: 999;
  width: 100%;
  opacity: 1;
  top: 0;
    background:#fff;
    
}

#ar-header .container{
    padding:0;
}

#ar-header  .navbar-header{
    padding:0;
    margin:0;  
}

#ar-header .navbar-brand img {
  height:80%;
    margin-top:2px;
}

#ar-header .navbar {
  padding: 0;
  margin: 0;
    background:none;
    border:none;
    
}
#ar-header #navbar .navbar-right {
  margin-right: 0;
  text-align: center;
}

#ar-header #navbar li a {
  color: #999;
  position: relative;
  font-size: 16px;
  font-weight: 400;
}

#ar-header #navbar li a span {
  position: relative;
  display: block;
  padding-bottom: 2px;
}
#ar-header #navbar li a:hover,
#ar-header #navbar li a:active{
  background:none;
    color:#000;
}
#navbar a.active{
  background:none;
    color:#000;
}

@media screen and (max-width: 992px) {
  #ar-header #navbar{
    display:none;
  }
}

@media screen and (max-width: 768px) {
  #ar-header{
      height:40px;
  }
    #ar-header .navbar-brand img {
  height:10px;
}
}




/*----------- panel ----------*/
.content-wrap {
  -webkit-overflow-scrolling: touch;
  height: 100%;
  width: 100%;
}
.content {
  position: absolute;
  width: 100%;
  height: 100%;
}
.content::before {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  content: '';
  opacity: 0;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s;
  transition: opacity 0.4s, transform 0s 0.4s;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}


/*----------------------------------------- 5) Typography --------------------------------------------------*/
h1,
h2,
h3,
h4,
h5 {
  letter-spacing: 0.8px;
  font-family: 'Roboto Slab', serif;
}
p {
  letter-spacing: 0.5px;
  font-size: 13px;
  line-height: 34px;
  font-weight: 300;
}
#home h1 {
  line-height: 50px;
  letter-spacing: 0.6px;
}
#home .typed {
  font-weight: 400;
  font-size: 46px;
  line-height: 46px;
  letter-spacing: 1.5px;
  margin: 0 auto;
  opacity: 0.6;
    color:#fff;
}
.year {
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 10px;
  font-family: 'Roboto', sans-serif;
}
.job {
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #cccccc;
}
.company {
  font-size: 12px;
  line-height: 14px;
  border: 1px solid #ececec;
  color: #cccccc;
  padding:8px 10px;
  border-radius: 6px;
  display: inline-block;
  margin-top: 5px;
  font-weight: 400;

}

/*----------------------------------------- 6) Hero --------------------------------------------------*/

#hero {
  min-width: 100%;
  min-height: 100%;
  height: 100%;
  width: 100%;
  display: block;
    margin-bottom:10px;
}

#hero div.background{
    z-index:0;
    position:absolute;
    top:0;
    left:0;
  min-width: 100%;
  min-height: 100%;
  height: 100%;
  width: 100%;
  display: block;
    margin-bottom:0;
    padding:0;
    background:#fff;
    opacity:0.01;
}



#hero .container,#hero .row,.hero-left,.hero-right{
    height:100%;
}

.hero-left{
    position:absolute;
    width:100%;
    display:table;
    max-width:100%;
    margin:0 auto;
}

.hero-left .inhalt{

}

.left-cont{
    position:relative;
    display:table-cell;
    text-align:left;
    vertical-align: middle;
    width:50%;
    height:100%;
    
}
.left-cont h1{
  font-size:50px;
    line-height:1.2em;
    margin:20px 0;
}
.left-cont p{
  font-size:18px;
    line-height:1.4em;
    max-width:350px;
}

.left-cont a{
  font-size:14px;
  color:#aaa;
    background: none;
    display:inline-block;
    padding:10px 22px;
    margin: 10px 0;
    margin-right:10px;
    float:left;
    border:1px solid #ccc;
}
.left-cont a.button{
  color:#fff;
    background: #6998b3;
    border:1px solid #6998b3;
}
.left-cont a:hover{
    background: #ddd;
}

img.bild{
  position:fixed;
    bottom:0;
    right:15%;
    height:100%;
    z-index:-10000;
}

@media screen and (max-width: 992px) {
  .left-cont h1{
  font-size:40px;
    line-height:1.2em;
    margin:20px 0;
 }
.left-cont p{
  font-size:16px;
    line-height:1.4em;
    max-width:350px;
 }
}

@media screen and (max-width: 768px) {
  .left-cont h1{
  font-size:40px;
    line-height:1.2em;
    margin:20px 0;
 }
.left-cont p{
  font-size:16px;
    line-height:1.4em;
    max-width:100%;
 }
#hero div.background{
    opacity:0.9;
}
}


/*---------- b. service -----------*/
.icon-use {
  font-family: 'Glyphter';
  font-size: 30px;
  line-height: 20px;
  color: #818181;
  margin: 0;
}
.head-sm {
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 10px;
  margin-bottom: 20px;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}
.text-grey {
  color: #434343;
  line-height: 26px;
  margin-bottom: 60px;
}


/* portfolio */
#port .container {
	padding: 0;
}
.grid {
	position: relative;
	margin: 0 auto;
	padding: 0;
	max-width: 100%;
	list-style: none;
	text-align: center;
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	min-width: 320px;
	max-height: 360px;
    min-height:300px;
	width: 48%;
	background: #000;
	text-align: center;
	cursor: pointer;
}

.grid figure.big {
    min-height:600px;
    height: 100%;
	width: 98%;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
    min-width:100%;
	max-width: 100%;
	opacity: 0.9;
    text-align:center;
    -webkit-transition: ease .6s;
  -moz-transition: ease .6s;
  -o-transition: ease .6s;
  -ms-transition: ease .6s;
}




.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	font-weight: 300;
    font-size:20px;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

/* Individual effects */


/*---------------*/
/***** portfolio *****/
/*---------------*/


figure.effect-zoe figcaption {
	top: auto;
	bottom: 0;
	padding: 1em;
	height: 3.75em;
	background: #fff;
	color: #3c4a50;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,100%,0);
	transform: translate3d(0,100%,0);
}

figure.effect-zoe h2 {
	float: left;
}

figure.effect-zoe p.icon-links a {
	float: right;
	color: #3c4a50;
	font-size: 1.4em;
}

figure.effect-zoe:hover p.icon-links a:hover,
figure.effect-zoe:hover p.icon-links a:focus{
	color: #252d31;
}



figure.effect-zoe p.description {
	position: absolute;
	bottom: 4em;
	padding: 2em;
	color: #fff;
	text-transform: none;
	font-size: 90%;
	opacity: 0;
    text-align:left;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
	-webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
}

figure.effect-zoe h2,
figure.effect-zoe p.icon-links a {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,200%,0);
	transform: translate3d(0,200%,0);
}

figure.effect-zoe p.icon-links a span::before {
	display: inline-block;
	padding: 0px 10px;
	font-family: 'feathericons';
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    font-size:35px;
}

.icon-eye::before {
	content: '\e000';
}

.icon-paper-clip::before {
	content: '\e001';
}

.icon-heart::before {
	content: '\e024';
}

figure.effect-zoe h2 {
	display: inline-block;
}

figure.effect-zoe:hover p.description {
	opacity: 1;
}

figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover p.icon-links a {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-zoe:hover h2 {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-zoe:hover p.icon-links a:nth-child(2) {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

figure.effect-zoe:hover p.icon-links a:first-child {
	-webkit-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

figure.effect-zoe:hover img{
	opacity: 0.5;

}

@media screen and (max-width: 50em) {
	.content {
		padding: 0 10px;
		text-align: center;
	}
	.grid figure {
		display: inline-block;
		float: none;
		margin: 10px auto;
        max-width: 480px;
		width: 100%;
	}
}


/*---------- g. contact -----------*/
#contact {padding: 120px 0 200px 0;}

/*-------------- h. footer ------------------*/
.footer-top{
  width: 100%;
  text-align: center;
  color: #cccccc;
  display: table;
}

.socials{
  width: 100%;
  margin: 0;
  padding: 0;
}

.socials * {
  box-sizing: border-box;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

.socials li {
  display: inline-block;
  list-style: outside none none;
  float: left;
  overflow: hidden;
  width: 33.33333%;
  font-size: 13px;
}

.socials a {
  padding: 0.3em 0.8em;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  display: inline-block;
  letter-spacing: 1px;
  margin: 0;
  text-decoration: none;
  padding: 25px 0;
  width: 100%;
}

.socials a:before,
.socials a:after {
  position: absolute;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}

.socials a:before {
  bottom: 100%;
  display: block;
  height: 3px;
  width: 100%;
  content: "";
}

.socials a:after {
  padding: 0.3em 0.8em;
  position: absolute;
  bottom: 100%;
  left: 0;
  content: attr(data-hover);
  color: white;
  white-space: nowrap;
  width: 100%;
  padding: 25px 0;
}

.socials li:hover a,
.socials .current a {
  transform: translateY(100%);
}

.facebook{
  background: #969696;
  /*padding: 20px 0;*/
}
.facebook a:after{
  background-color: #527bbb;
}
.twitter{
  background: #ABABAB;
}
.twitter a:after{
  background-color: #77ccf1;
}
.gplus{
  background: #d8d8d8;
}
.gplus a:after{
  background: #dd4b39;
}

.footer-bottom{
  width: 100%;
  background: #2f2f2f;
  padding: 80px 0;
  color: #636363;
}
.footer-bottom img{
  width: 200px;
}



@media screen and (max-width: 500px) {
    .container {width:96%; margin:0 auto;}
}