body{

	margin: 0px;
	padding: 0px;
	border: 0px;
	width: 100%;
	background-color: #fff;	
	font-size: 100%;
}


/**********------------*************/
/**********    Header  *************/
/**********------------*************/


.header{
	top: 0px;
	padding: 0px 140px;
	height: 160px;
	width: 100%;
	background: #fff;
	z-index: 10;
	border-bottom: 1px solid #e3868f;
	position: fixed;
}






/**********------------*************/
/********** Navigation sss
/**********------------*************/

.navbar{
	margin-bottom: 24px;
}

.navilist li {
	display: inline-block;
	margin: 0 2px;
}

.navilist li a {
	display: block;
	padding: 4px 2px;
}



/**********------------*************/
/**********   Footer   *************/
/**********------------*************/


.footer{
	width: 100%;
	height: 48px;
	padding: 0px 140px 4px 140px;
	position: fixed;
	bottom: 0px;
	clear:both;
	background-color: #fff;
	border-top: 1px solid #e3868f;
	font-size: 14px;
}

.footer li {
	display: inline-block;
	clear: both;
}

.footer li a {
	display: block;
	padding-right: 12px;
}

.footer-left{
	float: left;
}

.footer-right{
}




/**********------------*************/
/**********   Layout   ************/
/**********------------*************/

#banner{
	text-align: center;
	background: url(http://martinajohanna.com/img/banner-background.jpg);
	background-size: 100%, 100%;
	background-repeat: no-repeat;
	top: 100px;  /*  Hoehe des Headers (minus ein bißchen, damit weniger unten abgeschnitten wird)*/
	position:fixed;
	height: 100%;
	width: 100%;
}

.content{
	padding: 0px 140px 60px 140px;
	
}

#content{
	position: relative;
	top: 1000px;
	height: 5800px;
	background-color: #fff;
	
	
}

.tab{
	padding-left: 160px;
	padding-right: 160px;
}



/**********------------*************/
/**********  The Page  *************/
/******* special sections **********/
/* default section in layout cap.  */
/**********------------*************/

/**********------------*************/
/********** Sections   *************/
/**********------------*************/
.section{
}

/***********************/
/* Selfie */
/***********************/
.section-1{
}

/***********************/
/* Skills */
/***********************/
.section-2{
}


/***********************/
/* Portfolio */
/***********************/
.section-3{

}

/***********************/
/* Superpowers */
/***********************/
.section-4{

}

/***********************/
/* Contact */
/***********************/
.section-5{
}


#contact-name, #contact-mail{
	width: 80%;
	max-width: 720px;
}

#contact-message{
	width: 80%;
	max-width: 720px;
	height: 180px;
}

.contact-submit-btn{
	font-family: 'Open Sans', sans-serif; 
	font-size: 14px;
	background-color: #eeeeee;
	padding: 8px 24px 8px 24px;
	cursor: pointer;
}


/***********************/
/* Social Media Bar */
/***********************/

.icon-s{
	width: 24px;
	height: 24px;
	margin-right: 24px;
}

.icon-sm{
	width: 32px;
	height: 32px;
	margin-right: 32px;
}

.icon-sm:hover{

}

.sm-list li {
	display: inline-block;
	margin: 0 2px;
}

.sm-list li a {
	display: block;
	padding: 4px 2px;
}

.img-list{
	padding-top: 18px;
	padding-bottom: 32px;
}

.img-list li{
	display: inline-block;
	width: 24%;
}

.img-list li a {
	display: block;
	margin: 8px;
}



/**********------------*************/
/**********     Grid   ************/
/**********------------*************/

.row{
	padding: 2px 0px;
	width: 100%;
	min-height: 1px;
	float: left;
	background-color: #fff;
}


.col{
	background-color: #fff;
	min-height: 24px;
	margin-left: 2.4%;
	margin-right: 2.4%;
	display: inline-block;
	float: left;
}



/* to avoid unneccessry margin in the beginning and the end  */
.col:first-child{margin-left: 0px;}
.col:last-child{margin-right: 0px;}

.col-12{width: 100%;}
.col-10{width: 82.533%;}
.col-8{width: 64.07%;}
.col-6{width: 47.6%;}
.col-4{width: 30.13%;}
.col-3{width: 21.4%;}
.col-2{width: 8.66%;}
.col-1{width: 3.93%;}



/**********------------*************/
/**********   Stuff    *************/
/**********------------*************/

.video-box{
	width: 750px;
	height: 422px;

}

.big-picture-frame{
	text-align: center;
	top: 160px; 
	left: 0px;
	width: 100%;
	height:100%;
	position: fixed;
}

.big-picture{
	width: 100%;
}


/* Used color Pantone Straberry Ice*/
.pink-line{
	border-top: 1px solid #e3868f; 
	display: block; 
	margin: 48px 0px; 
	padding: 48px 0px; 
	position: relative;
}

.mq-test{
	height: 64px;
	width: 64px;
}

.img-100-r{
	width: 100%;
	max-width: 340px;
	border-radius: 50%;
}


/**********-------------*************/
/********** Placeholder ************/
/**********-------------************/
.placeholder-xs{height:9px;}

.placeholder-s {height:18px;}

.placeholder-m {height:36px;}

.placeholder-l {height:72px;}

.placeholder-xl{height:144px;}

.placeholder-xxl{height:288px;;}