/*!
 * Start Bootstrap - Agency Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
	overflow-x: hidden;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	padding-top:0px;
}

.text-muted {
	color: #777;
}

.text-primary {
	color: #fed136;
}

p {
	font-size: 14px;
	line-height: 1.75;
}

p.large {
	font-size: 16px;
}

a,
a:hover,
a:focus,
a:active{
	outline: 0;
}

a {
	color: rgb(119,119,119);
}

a:hover,
a:focus,
a:active{
	color: rgb(23,183,123);
}



h1,
h2,
h3,
h4,
h5,
h6 {
	text-transform: uppercase;
	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 700;
}

h2{
	margin: 50px 0px;
}



.title,
.title h2 small{
	color:rgb(220,220,220);
}
.img-centered {
	margin: 0 auto;
}

.bg-light-gray {
	background-color: #f7f7f7;
}

.bg-colored {
	background-color: rgb(251,51,61);
}

.bg-darkest-gray {
	background-color: #222;
}

.btn-primary {
	border-color: #ffffff;
	text-transform: uppercase;
	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 700;
	color: #fff;
	background-color: rgba(250,250,250,0.2);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
	border-color: #^1ß-.,m nhf∂s;
	color: #fff;
	background-color: #fec503;
}

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

.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
	border-color: #fed136;
	background-color: #fed136;
}

.btn-primary .badge {
	color: #fed136;
	background-color: #fff;
}

.btn-xl {
	padding: 20px 40px;
	border-color: #fed136;
	border-radius: 3px;
	text-transform: uppercase;
	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	background-color: #fed136;
}

.btn-xl:hover,
.btn-xl:focus,
.btn-xl:active,
.btn-xl.active,
.open .dropdown-toggle.btn-xl {
	border-color: rgba(255,255,255,0.8);
	color: #fff;
	background-color: rgba(255,255,255,0.8);
}

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

.btn-xl.disabled,
.btn-xl[disabled],
fieldset[disabled] .btn-xl,
.btn-xl.disabled:hover,
.btn-xl[disabled]:hover,
fieldset[disabled] .btn-xl:hover,
.btn-xl.disabled:focus,
.btn-xl[disabled]:focus,
fieldset[disabled] .btn-xl:focus,
.btn-xl.disabled:active,
.btn-xl[disabled]:active,
fieldset[disabled] .btn-xl:active,
.btn-xl.disabled.active,
.btn-xl[disabled].active,
fieldset[disabled] .btn-xl.active {
	border-color: #fed136;
	background-color: #fed136;
}

.btn-xl .badge {
	color: #fed136;
	background-color: #fff;
}

.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-top-color: rgb(231,57,68);
  border-width: 5px 5px 0;
}
.tooltip.top{
	border-width: 0px 0px 0;
}

.tooltip-inner {
  color: #fff;
  background: rgb(231,57,68);
  border: solid 1px rgb(231,57,68);
  border-radius: 0px;
}

.navbar-default {
	border-color: transparent;
	background-color: rgba(255,255,255,0.8);
}

.navbar-default .navbar-brand {
	font-family: "Helvetica Neue",Helvetica,Arial,cursive;
	color: rgba(255,255,255,0.6);
	   
}



.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
	color: rgb(251,51,61);

}

.navbar-default .navbar-collapse {
	border-color: rgba(251,51,61,0.8);
	text-align: center;
    margin-top: 12px;
}

span.language-switch{
	float: right;
    display: inline-block;
    padding: 16px 0px;
}

span.language-switch a{
	font-size: 12px;
	color:rgb(251,51,61);
	margin-right: 10px;
	text-decoration: none;
	
}

span.language-switch a:hover,
span.language-switch a:focus{
	font-weight: 700;
	font-style: bold;
}
span.language-switch a.active{
	font-weight: 700;
	opacity: 0.3;
}

#language_line_right {
	opacity: 1;
	height: 1px;
	width: 12px;
	margin-left: 0px;
	margin-top: 10px;
	display: inline-block;
	position: absolute;
	background-color: rgb(251,51,61);
	transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}

.navbar-default .navbar-toggle {
	border-color: transparent;
	background-color: transparent;
}

.navbar-default .navbar-toggle .icon-bar {
	background-color: rgb(251,51,61);
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
	background-color: transparent;
}

.navbar-default .nav li{
	margin:0 8px;
}

.navbar-default .nav li a {
	text-transform: uppercase;
	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 400;
	letter-spacing: 1px;
	color: rgb(251,51,61);
}

.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus{
	outline: 0;
	color: rgb(23,183,132);
	font-weight: 900;
}


.navbar-default .nav li div#bar_line:hover{
	background-color: rgb(23,183,132);
}

.navbar-default .navbar-nav>.active>a {
	border-radius: 0;
	color: rgb(251,51,61);
	background-color: transparent;
}

.navbar-default .navbar-nav>.active>a:hover
 {
	color: rgba(251,51,61,0.8);
	background-color: transparent;
}
.navbar-default .navbar-nav>.active>a:focus{
	color: rgba(23,183,132,1);
	background-color: transparent;
}

#bar_line {
	opacity: 1;
	position: absolute;
	top: 18%;
	height: 2px;
	width: 16px;
	left: 50%;
	margin-left: -8px;
	background-color: rgb(251,51,61);
}

#bar_line_right {
	opacity: 1;
	position: absolute;
	top: 46%;
	height: 2px;
	width: 16px;
	left: 104%;
	margin-left: -8px;
	background-color: rgb(251,51,61);
	transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
}

.mint_line_heading{
	opacity: 1;
	position: absolute;
	
	height: 2px;
	width: 16px;
	left: 50%;
	margin-left: -8px;
	background-color: rgb(23,183,132);
}

.mint_underline {
	opacity: 1;
	height: 2px;
	width: 100%;
	padding: 0px 5px;
	background-color: rgb(23,183,132);
}

.navbar-brand{
	text-decoration: none;
}

div.mint_underline{
	margin-top:-4px;
	margin-bottom: 10px;
}
.logo-head img{
	text-decoration: none;
	width:30px;
}

.white_line_heading{
	opacity: 1;
	position: absolute;
	
	height: 2px;
	width: 16px;
	left: 50%;
	margin-left: -8px;
	background-color: rgba(255,255,255,0.4);
}

.about_line_heading{
	opacity: 1;
	position: absolute;
	
	height: 2px;
	width: 16px;
	left: 50%;
	margin-left: -8px;
	background-color: rgb(23,183,132);
}

div.arrow-down {
	width: 25px;
	height: 25px;
	background-image: url(../img/ic/arrow_down.png);
	background-position: center center;
	background-repeat: no-repeat;
	display: block;
	margin-left: auto;
	margin-right: auto;
}



/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
	header .intro-text {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	div.intro-lead-bg-img{
		background-image: url(../img/logos/logo_bg.png);
		background-position: center center;
		background-repeat: no-repeat;
		width:565px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5px;
		display: inherit;
		background-size: 80%;
	}

	.navbar-brand{
		height:0px;
		padding-bottom:0px;
	}
	.navbar-default .navbar-brand {
		color: rgb(251,51,61);
	}	

	#portfolio span.mint_line_heading{
		top:60%;
	}

	#portfolio-item h4 span.mint_line_heading{
		top:60%;
	}


	#service div.white_line_heading {
	top: 55%;
	}

	
	#about div.mint_line_heading,
	#cv div.mint_line_heading{
		top: 130%;
	}

	#graph div.pr-right{
		float:right;
	} 
	#graph div.pr-left{
		float:left;
	} 

	.imprint div.mint_line_heading{
		top: 116%;
	}

	.imprint h3.section-subheading {
		margin-bottom: 10px;
	}

	.about-me .portfolio-caption dl,
	.about-me .portfolio-caption dd{
		border: 0px;

	}
	
	#portfolio .portfolio-item .portfolio-caption dl{
		border-bottom: 0px solid rgba(0,0,0,0.2);
		border-left: 0px solid rgba(0,0,0,0.2);
		border-right: 0px solid rgba(0,0,0,0.2);
		
	}
	#portfolio .portfolio-item .portfolio-caption dd.col-sm-12{
		border-right: 0px solid rgba(0,0,0,0.2);
		border-bottom: 1px solid rgba(0,0,0,0.2);
		margin-bottom: 5px;
		
	}
	.about-me .portfolio-caption dl,
	.about-me .portfolio-caption dd{
		border: 0px;

	}
	.about-me .portfolio-caption a{
		color: rgb(119,119,119);
		cursor: pointer;
	}
	.about-me .portfolio-caption a:hover,
	.about-me .portfolio-caption a:focus{
		color: rgb(119,119,119);
		text-decoration: none;
	}
	section {
		padding: 40px 0;
	}
	

	div.playground{
		float: right;
	}
	.playground span.about_line_heading {
		top: 12%;
	}
	.about_line_heading {
		top: 58%;
	}

	#about #cv .career .career-year h4,
	#about #cv .career .career-company h4{
		text-align: center;
	}

	#about #cv .career .career-date,
	#about #cv .career .career-task{
		text-align:center;
	}

	.team-member img,
	.contact-table img {
		margin-left:30%;
	}

	.imprint h2.section-heading{
		font-size:21px;
		margin-top:25px;
	}

	/* --- jujubee ---*/

	.content-jujubee dl.text-inner dd{
		margin-bottom:0px;
		padding-bottom:10px;
	}

	.content-jujubee ul.layout-dscrpt, 
	.content-jujubee ul.layout-dscrpt-right{
		padding-top: 39%;
	}

	.content-jujubee ul.layout-dscrpt,
	.content-jujubee ul.layout-dscrpt2, 
	.content-jujubee ul.layout-dscrpt-right{
		margin-top: 0%;
		left:0%;
	}

	.content-jujubee ul.layout-dscrpt li.list-one, 
	.content-jujubee ul.layout-dscrpt li.list-two, 
	.content-jujubee ul.layout-dscrpt-right li.list-one, 
	.content-jujubee ul.layout-dscrpt-right li.list-two {
    	margin-top: 2%;
	}

	.content-jujubee dl.text-inner dd.layout-bg_an{
		display:inline-block;
	}

	.content-jujubee dd.jujubee-mock-www2 {
		min-height: 510px;
	}

	.content-jujubee dd.jujubee-mock-www2 span.www-prototype {
		margin-top: 27.6%;
	}
	

	/*--------caterwings-------*/
	.content-caterwings dl.caterwings-intro h2.caterwings-subtext{
		padding-top:10%;
	}
	.content-caterwings dl.caterwings-wireframes h2.caterwings-subtext{
		padding-top:2%;
	}

	.content-caterwings dl.caterwings-flow dt.caterwings-description, 
	.content-caterwings dl.caterwings-flow dd{
		top:39.5%;
	}

	.content-caterwings dl.caterwings-flow2 dt.caterwings-description, 
	.content-caterwings dl.caterwings-flow2 dd {
		top:49%;
	}

	.content-caterwings dl.caterwings-ui dt.caterwings-description{
		top:84.5%;
	}

	.content-caterwings dl.caterwings-ui dd{
		top:85.7%;
	}

	.content-caterwings dl.caterwings-ui dd.caterwings-description2 {
		top:88%;
	}

	/* --- mytoys ---*/	
	.content-mytoys dl.mytoys-prototype{
		min-height: 200px;
	}

	.content-mytoys dl.mytoys-wireframes dd {
    position: relative;
    text-align: left;
    background-color: rgb(214,214,214);
	}

	/*--aamt--*/
	.content-amt .modal-body dl.amt-flow dd.layout-dscrpt5{
		top: 47.5%;
	}
	.content-amt .modal-body img.img-5{
		padding-top:100px;
	}

	.content-amt .modal-body dl.amt-flow dd.layout-dscrpt7{
		top: 67.2%;
	}

	/* --- barmer ----*/
	.content-barmer .modal-body dd.layout-bg_lp{
		min-height:430px;
		background-size: 80%;
		background-position: 200% 10%;
	}
	.content-barmer .modal-body ul.layout-dscrpt,
	.content-barmer .modal-body ul.layout-dscrpt2{
		left:-35%;
	}

	.content-barmer .modal-body dd.layout-bg_an{
		background-size: 80%;
		background-position: 200% 10%;
		min-height: 700px;
	}
	div.content-barmer dd.barmer-mock-www span.www-search-vid{
		margin-top: 24.8%;
	}

	.content-barmer dd.barmer-mock-www {
		min-height: 358px;
	}
	div.content-barmer dd.barmer-wrfrm{
		min-height:790px;

	}

	/*---BLOG----*/

nav.middle div.navbar-header a.logo-head {
    width: 98%;
    position: absolute;
}

}


/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
	header .intro-text {
	padding-top: 10px;
	padding-bottom: 10px;
	}

	section h2.section-heading{
		font-size:30px;
	}

	.intro-lead-bg-img{
		background-image: none;
		width: auto;
	}
	.intro-lead-in img{
		width: 60%;
		left: 20%;
		position:relative;
	}

	.navbar-default .navbar-shrink .navbar-brand {
		font-size: 1.5em;
		color: rgb(251,51,61);
	}

	#portfolio span.mint_line_heading{
		top:60%;
	}


	#about div.mint_line_heading{
		top:30%;
	}
	#cv div.mint_line_heading{
		top: 45%;
	}
	.about-me .portfolio-caption dl,
	.about-me .portfolio-caption dd{
		border: 0px;
		
	}

	#portfolio .portfolio-item .portfolio-caption dl{
		border-bottom: 0px solid rgba(0,0,0,0.2);
		border-left: 0px solid rgba(0,0,0,0.2);
		border-right: 0px solid rgba(0,0,0,0.2);
	
	}
	#portfolio .portfolio-item .portfolio-caption dd.col-sm-12{
		border-right: 0px solid rgba(0,0,0,0.2);
		border-bottom: 1px solid rgba(0,0,0,0.2);
		margin-bottom: 5px;
		
	}
	#portfolio div.resume-dwl,
	#portfolio div.portfolio-dwl{
		width:100%;
	}
	#portfolio .portfolio-bg span.content-img{
		min-height:210px;
	}

	div.playground {
		float: right;
	}

	#about #cv .career .career-year h4, 
	#about #cv .career .career-company h4{
		text-align:center;
	}

	#about #cv .career .career-date,
	#about #cv .career .career-task{
		text-align:center;
	}

	.social{
		border-right: 0px solid rgba(255,255,255,0.2);
		margin-bottom:6%;
	}

	section#contact{
		background: url(../img/team/contact-bg.jpg);
		background-position: center center;
		display: block;
		background-repeat: none;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
		-o-background-size: cover;
	}

	.team-member img,
	.contact-table img {
		margin-left:6%;
	}

	.cv{
		border-left: 0px solid rgba(255,255,255,0.2);
		margin-top:8%;
		margin-bottom:6%;
	}

	.imprint .imprint-contact .social{
		text-align: center;
	}

	.imprint .imprint-contact .cv{
		text-align: center;
	}
	
	div.portfolio-bg, div.resume-bg{
		margin-left:0px;
	}

	/*--------jujubee-------*/

	.content-jujubee dl.text-inner dd{
		margin-bottom:0px;
		padding-bottom:10px;
	}

	.content-jujubee ul.layout-dscrpt, 
	.content-jujubee ul.layout-dscrpt-right{
		padding-top: 46%;
	}

	.content-jujubee ul.layout-dscrpt,
	.content-jujubee ul.layout-dscrpt2, 
	.content-jujubee ul.layout-dscrpt-right{
		margin-top: 0%;
		left:0%;
	}

	.content-jujubee dl.text-inner dd.layout-bg_an{
		display:inline-block;
	}

	.content-jujubee dd.jujubee-mock-www2 {
		min-height: 510px;
	}

	.content-jujubee dd.jujubee-mock-www2 span.www-prototype {
		margin-top: 27.6%;
	}

	/*--------caterwings-------*/
	.content-caterwings dl.caterwings-flow dt.caterwings-description, 
	.content-caterwings dl.caterwings-flow dd{
		top:41.5%;
	}

	.content-caterwings dl.caterwings-flow2 dt.caterwings-description, 
	.content-caterwings dl.caterwings-flow2 dd{
		top: 48%;
	}

	.content-caterwings dl.caterwings-ui dt.caterwings-description{
		top:79%;
	}

	.content-caterwings dl.caterwings-ui dd{
		top:80%;
	}

	.content-caterwings dl.caterwings-ui dd.caterwings-description2 {
		top:81.5%;
	}

	

	/*--mytoys--*/
	.content-mytoys dl.mytoys-wireframes dd{
		background-color: rgb(214,214,214);
	}
	.content-mytoys dl.mytoys-prototype{
		min-height: 200px;
	}

	/*--aamt--*/
	.content-amt .modal-body dl.amt-flow dd.layout-dscrpt5{
		top: 47.5%;
	}
	.content-amt .modal-body img.img-5{
		padding-top:100px;
	}

	/*--barmer--*/
	.content-barmer .modal-body dl.text-inner{
		padding: 15px 0px;
	}
	.content-barmer .modal-body dl.text-inner dd.layout-bg_lp{
		margin-left: 6%;
	}
	
	.content-barmer .modal-body dd.layout-bg_lp{
		background-size: 160%;
		background-position: 10% 10%;
		min-height:400px;
		margin-left: 30px;
		background-position: 100% 10%;
	}

	.content-barmer .modal-body dd.barmer-mock-www1 span.rechner{
		margin-top: 20%;
	}
	.content-barmer .modal-body dd.barmer-mock-www2 span.search{
		margin-top: 6.5%;
	}
	.content-barmer .modal-body dd.barmer-mock-video span.video{
		margin-top: 7.5%;
	}

	.content-barmer ul.layout-dscrpt{
		left: -45%;
	}

	.content-barmer .modal-body ul.layout-dscrpt li.list-three {
    	margin-top: 10%;
	}
	.content-barmer .modal-body dl.text-inner dd.layout-bg_an{
		margin-left: 14px;
	}
	.content-barmer .modal-body dd.layout-bg_an{
		min-height: 780px;
		background-size: 148%; 
	}

	.content-barmer ul.layout-dscrpt2{
		left: -45%;
		margin-top: 146%;
	}

	.content-barmer .modal-body dl.text-inner dd.barmer-mock-www{
		min-height: 150px;
	} 

	div.content-barmer dd.barmer-mock-www span.www-search-vid{
		margin-top: 14%;
	}

	.content-barmer .modal-body dl.text-inner dd.barmer-mock-www2{
		min-height: 110px;
	}

	.content-barmer .modal-body dl.text-inner dd.barmer-mock-video{
		min-height: 140px;
	}
	.content-barmer .modal-body dl.text-inner dd.barmer-wrfrm{
		background-position: 0% 122%;
		min-height: 440px;
	}
	.content-barmer .modal-body dl.text-inner ul.barmer-wrfrm-status{
		padding-top: 4%;
		margin-top: -46%;
	}
	.content-barmer .modal-body dl.text-inner dd.barmer-wrfrm-search2{
		background-position: 0% -30%;
		min-height: 240px;
	}
	.content-barmer .modal-body dl.text-inner ul.barmer-wrfrm-search2{
		padding-top: 4%;
		margin-top: -6%;
	}
}

@media(min-width:768px) {
	.navbar-default {
		padding: 40px 0;
		border: 0;
		background-color: transparent;
		-webkit-transition: padding .3s;
		-moz-transition: padding .3s;
		transition: padding .3s;
	}

	.navbar-default .navbar-brand {
		font-size: 1.5em;
		-webkit-transition: all .3s;
		-moz-transition: all .3s;
		transition: all .3s;
	}

	.navbar-default .navbar-nav>.active>a {
		border-radius: 0px;
	}

	.navbar-default.navbar-shrink {
		padding: 10px 0;
		background-color: rgba(255,255,255,0.8);
	}

	.navbar-default.navbar-shrink .navbar-brand {
		font-size: 1.5em;
		color: rgb(251,51,61);
	}

	#portfolio .portfolio-item .portfolio-caption dl{
	border-bottom: 0px solid rgba(0,0,0,0.2);
	border-left: 0px solid rgba(0,0,0,0.2);
	border-right: 0px solid rgba(0,0,0,0.2);
	
	}
	#portfolio .portfolio-item .portfolio-caption dd.col-sm-12{
		border-right: 0px solid rgba(0,0,0,0.2);
		border-bottom: 1px solid rgba(0,0,0,0.2);
		margin-bottom: 5px;
		
	}
	#portfolio .portfolio-item .portfolio-caption dd.last {
		border-right: 0px;
	}

	#portfolio span.mint_line_heading{
		top:40%;
	}
	#portfolio div.email a{
		color:rgb(240,240,240);
		font-size: 20px;
		text-transform: uppercase;
    	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    	font-weight: 700;

	}

	div.resume-bg{
		float:left;
	
	}

	div.portfolio-bg{
		float:right;
	}

	div.resume-bg span.content-img,
	div.portfolio-bg span.content-img{
		width:330px;
		background-size: 100%;
		min-height:248px;
	}
	div.resume-bg{
		text-align: right;
	}

	section.bg-colored{
		background-color: rgba(255,255,255,0.2);
	}

	div.service-overlay{
	    z-index: 2;
	    width: 100%;
	    padding: 0 44px;
	}

	#service div.service-overlay h2.section-heading {
    margin-top: 0;
    margin-bottom: 15px;
    color: rgb(251,51,61);
	}
	/* white line turns green */
	#service div.white_line_heading{
		background-color: rgb(23,183,132);
	}
	#service div.service-overlay h4.service-heading{
		color: rgb(49,175,131);
		text-transform: uppercase;
	}

	section h2.section-heading {
		margin-top: 0;
    	margin-bottom: 15px;
    	color: rgb(251,51,61);
	}


	div.ibrand-img{
		background-image:url(../img/portfolio/ibrand/pro_ibrand_oview.jpg);
		background-position: center;
		background-repeat: no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
		-o-background-size: cover;
		opacity: 0.2;
    	background-blend-mode: exclusion;
    	position: relative;
    	height: 210px;
    	width: auto;

	}

	.bg-colored p.portfolio-think {
    	background-image: url(../img/ic/skills/green/jf_icons_creative_green.png);
    	background-position: center;
    	background-repeat: no-repeat;
    	background-color: transparent;
    	background-size: 100%;
    	z-index: 1;
	}
	.bg-colored p.portfolio-design {
    	background-image: url(../img/ic/skills/green/jf_icons_responsive_green.png);
    	background-position: center;
    	background-repeat: no-repeat;
    	background-color: transparent;
    	background-size: 100%;
    	z-index: 1;
	}
	.bg-colored p.portfolio-pxp {
    	background-image: url(../img/ic/skills/green/jf_icons_prototype_green.png);
    	background-position: center;
    	background-repeat: no-repeat;
    	background-color: transparent;
    	background-size: 100%;
    	z-index: 1;
	}
	.bg-colored p.portfolio-responsive {
    	background-image: url(../img/ic/skills/green/jf_icons_html-css_green.png);
    	background-position: center;
    	background-repeat: no-repeat;
    	background-color: transparent;
    	background-size: 100%;
    	z-index: 1;
	}

	div.about-me div.portfolio-caption dl,
	div.about-me div.portfolio-caption dd{
		border: 0px;

	}
	.about-me .portfolio-caption a{
		color: rgb(119,119,119);
		cursor: pointer;
	}
	.about-me .portfolio-caption a:hover,
	.about-me .portfolio-caption a:focus{
		color: rgb(119,119,119);
		text-decoration: none;
	}
	table.modal-table tr td{
		font-size: 10px;
	}
	.content-barmer .modal-body dd.layout-bg_lp{
		min-height:580px;
	}
	ul.layout-dscrpt{
		left:-35%;
	}

	/*----------jujubee----------*/
	.content-jujubee ul.layout-dscrpt{
		left:-64%;
	}

	.content-jujubee ul.layout-dscrpt-right {
    	left: 31%;
	}

	.content-jujubee ul.layout-dscrpt2{
		margin-top:-66%;
		left:-64%;
	}

	.content-jujubee ul.layout-dscrpt, 
	.content-jujubee ul.layout-dscrpt-right {
    padding-top: 8%;
	}

	.content-jujubee ul.layout-dscrpt li.list-one,
	.content-jujubee ul.layout-dscrpt li.list-two,
	.content-jujubee ul.layout-dscrpt-right li.list-one,
	.content-jujubee ul.layout-dscrpt-right li.list-two{
		margin-top: 14%
	}

	.content-jujubee ul.layout-dscrpt li.list-three{
		margin-top: 36%
	}

	.content-jujubee dd.jujubee-mock-www2 {
		min-height: 680px;
	}

	.content-jujubee dd.jujubee-mock-www2 span.www-prototype {
		margin-top: 27.4%;
	}

	/*--------caterwings-------*/
	.content-caterwings dl.caterwings-intro h2.caterwings-subtext{
		padding-top:10%;
	}
	.content-caterwings dl.caterwings-wireframes h2.caterwings-subtext{
		padding-top:5%;
	}

	.content-caterwings dl.caterwings-screens dd{
		position: absolute;
	    text-align: left;
	}
	.content-caterwings dl.caterwings-flow dt.caterwings-description,
	.content-caterwings dl.caterwings-flow dd{
    top: 43.7%;
	}

	.content-caterwings dl.caterwings-flow2 dt.caterwings-description, 
	.content-caterwings dl.caterwings-flow2 dd{
		top: 56%;
	}

	.content-caterwings dl.caterwings-screens dd.layout-dscrpt{
		top:69%;
	}
	.content-caterwings dl.caterwings-screens dd.layout-dscrpt2{
		top:79.5%;
	}

	.content-caterwings dl.caterwings-screens dd.table-right{
		left:46%;
	}


	.content-caterwings dl.caterwings-ui dt.caterwings-description{
		top:85%;
	}

	.content-caterwings dl.caterwings-ui dd{
		top:85.9%;
	}

	.content-caterwings dl.caterwings-ui dd.caterwings-description2 {
		top:89%;
	}


	/*----------mytoys----------*/

	.content-mytoys dl.mytoys-prototype{
		min-height: 310px
	}

	/*----------aamt----------*/
	.content-amt .modal-body dl.amt-flow dd.layout-dscrpt5{
		top: 43.5%;
	}
	
	/*----------realsmile----------*/
	.content-rs span.pro-head-rs {
		top:30px;
	}
	.content-rs .modal-body p.rs-subtext{
		font-size: 280%;
	}
	.content-rs .modal-body span.rs-icon p.rs-subtext{
		margin-top:56%;
		margin-left: 58px;
	}

	.content-rs .modal-body span.rs-icon p.rs-subtext small{
		margin-top:-5%;
		margin-left: 0px;
	}

	.content-rs span.rs-android span.gif-rs-edit-bg{
		padding-top:20.2%;
		padding-bottom:25%;
	}

	.content-rs .modal-body span.rs-android p.rs-subtext{
		padding-top:10%;
		margin-left: 8%;
	}

	.content-rs .modal-body span.rs-app {
    display: block;
    margin-top: -5px;
	}

	.content-rs .modal-body span.rs-shop p.rs-subtext2{
    	margin: 0px 4.4%;
    	padding: 6% 38%;;
	}

	.content-rs .modal-body span.rs-intro p.description{
    margin: 0px 30px;
    padding:6%;
	}


	/*----------wonderball----------*/

	span.wwb-gifs dl.wwb-list{
	left: 64%;
	margin-top:6%;
	}
	span.wwb-gifs,
	span.wwb-icons{
		font-size: 100%;
	}

	div.wwb-icons dt.wwb-list-share {
    padding-top: 140%;
	}
	.wwb-gifs p{
		min-height: 460px;
	}
	.wwb-gif-bg-hands p{
	min-height: 600px;
	}

	/*----------zoobe----------*/
	/*----Draggable Content Img Slider---*/
	div#zoobe-alfa {

	background-image: url(../img/portfolio/zoobe/zoobe-after.png); 
	width: 640px; height: 480px; 
	padding: 0; 
	margin-top:38px;
	position: relative; 
	border-width: 0 20px; 
	border-color: rgba(0,0,0,0); 
	border-style: none groove none ridge; 

	}

	div#zoobe-bravo {
	background-image: url(../img/portfolio/zoobe/zoobe-before.png); 
	background-repeat: no-repeat;
    background-size: auto;
	height: 480px; 
	border-width: 0 20px 0 0; 
	border-color: rgba(193,185,128,0.7);
	border-style: solid; 
	resize: horizontal; 
	position: absolute; 
	top: 0; left: 0; 
	min-width: 0; max-width: 640px; 
	-ms-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
	}

	div#zoobe-bravo:before {
	content: '< >'; 
	font-size: 11px; 
	color: white; 
	top: 50%; right: -19px; 
	position: absolute; 
	}

	textarea.zoobe-charly{  
	resize: horizontal; 
	opacity: .01; 
	position: relative; 
	top: 49%; left: -20px; 
	margin-right: -50px; 
	border: 2px solid transparent; 
	width: 40px; height: 26px; 
	max-width: 670px; min-width: 40px; 

	outline: 0 solid transparent; 
	cursor: ew-resize; 

	-webkit-animation-name: delta;
	animation-name: delta;
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1; 
	-webkit-animation-direction: normal; 
	animation-direction: normal; 
	-webkit-animation-timing-function: ease-in-out; 
	animation-timing-function: ease-in-out; 
	-webkit-animation-delay: 3s; 
	animation-delay: 3s; 
	*/
	-webkit-animation: delta 5s 1 normal ease-in-out 3s; 
	animation: delta 5s 1 normal ease-in-out 3s; 
	}
	@keyframes delta {
	  0% {width: 40px; }
	  50% {width: 300px; }
	  100% {width: 40px; }
	}
	@-webkit-keyframes delta {
	  0% {width: 40px; }
	  50% {width: 300px; }
	  100% {width: 40px; }
	}
	/*---*/


	p.portfolio-think {
		background-image: url(../img/ic/skills/green/jf_icons_creative_green.png);
		background-position: center;
		background-repeat: no-repeat;
		background-color: transparent;
		background-size:100%;
		display:inline-block;
		margin-left: auto;
		margin-right: auto;
		width: 112px;
		height: 112px;
	}

	p.portfolio-design{
		background-image: url(../img/ic/skills/green/jf_icons_responsive_green.png);
		background-position: center;
		background-repeat: no-repeat;
		background-color: transparent;
		background-size:100%;
		display:inline-block;
		margin-left: auto;
		margin-right: auto;
		width: 112px;
		height: 112px;
	}

	p.portfolio-rspv{
		background-image: url(../img/ic/skills/green/jf_icons_prototype_green.png);
		background-position: center;
		background-repeat: no-repeat;
		background-color: transparent;
		background-size:100%;
		display:inline-block;
		margin-left: auto;
		margin-right: auto;
		width: 112px;
		height: 112px;
	}

	p.portfolio-pxp {
		background-image: url(../img/ic/skills/green/jf_icons_html-css_green.png);
		background-position: center;
		background-repeat: no-repeat;
		background-color: transparent;
		background-size:100%;
		display:inline-block;
		margin-left: auto;
		margin-right: auto;
		width: 112px;
		height: 112px;
	}
	}

	header {
		text-align: center;
		color: #fff;
		background-attachment: scroll;
		background-image: url(../img/team/header-bg.jpg);
		background-position: center center;
		background-repeat: none;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		background-size: cover;
		-o-background-size: cover;
	}

	header .intro-text {
		padding-top: 100px;
		padding-bottom: 10px;
	}

	header .intro-text .intro-lead-in {
		margin-bottom: 25px;
		font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
		font-size: 22px;
		font-style: italic;
		line-height: 22px;
	}

	header .intro-text .intro-heading {
		margin-bottom: 25px;
		text-transform: uppercase;
		font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
		font-size: 50px;
		font-weight: 700;
		line-height: 50px;
	}
	header .intro-text a{
		display:inline-block;
		margin-top:5px;
		color:#ffffff;
	}
	/*---BLOG---*/
	nav.middle div.navbar-header a.logo-head {
	    width: 96%;
	    position: absolute;
	}

}

@media(min-width:768px) {
	header .intro-text {
		padding-top: 65px;
		padding-bottom: 10px;
	}

	header .intro-text .intro-lead-in {
		margin-bottom: 5px;
		font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
		font-size: 40px;
		font-style: italic;
		line-height: 40px;
	}

	header .intro-text .intro-heading {
		margin-bottom: 20px;
		text-transform: uppercase;
		font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
		font-size: 75px;
		font-weight: 700;
		line-height: 75px;
	}

	.intro-lead-in img{
		height: auto;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5px;
		display: inherit;
		width: 36%;
		background-position: center;
    	left: -0.3%;
    	position: relative;
	}

	.title{
		margin-top:7%;
	}
	#section div.service-overlay h2.section-heading {
	margin-top: 0;
	margin-bottom: 15px;
	color:rgb(251,51,61);
	}

	#section div.service-overlay h3.section-subheading {
		margin-bottom: 80px;
		text-transform: none;
		font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
		font-size: 16px;
		font-style: italic;
		font-weight: 400;
		line-height: 1.8;
	}

	.service-heading {
		margin: 5px 0;
		text-transform: none;
		color: rgb(255,255,255);
	}
	#service div.service-overlay p,
	#service div.service-overlay h3{
		color:rgba(0,0,0,0.5);
	}

	#contact div.portfolio h4,
	#contact div.cv h4,
	#contact div.social h4{
		text-align:left;
	}

	#contact div.portfolio p,
	#contact div.cv p,
	#contact div.social p{
		text-align:center;
	}
	.social,
	.cv{
	padding: 0px 0px;
	}
	.content-barmer .modal-body dd.layout-bg_lp{
		min-height:580px;
	}
	ul.layout-dscrpt{
		left:-35%;
	}


}

section {
	padding: 40px 0;
}



@media(min-width:768px) {
	section {
		padding: 80px 0;
	}
}


#contact div.portfolio h4,
#contact div.cv h4,
#contact div.social h4{
	text-align:center;
}

#contact div.portfolio p,
#contact div.cv p,
#contact div.social p{
	text-align:center;
}

#portfolio .portfolio-item {
	right: 0;
	margin: 0 0 15px;
}

#portfolio .portfolio-item .portfolio-link {
	display: block;
	position: relative;
	margin: 0 auto;
	
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	background: rgba(23,183,123,0.3);
	-webkit-transition: all ease .5s;
	-moz-transition: all ease .5s;
	transition: all ease .5s;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover span{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 16px;
	color: rgba(255,255,255,0.8);
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
	opacity: 1;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
	position: absolute;
	top: 50%;
	width: 100%;
	height: 20px;
	margin-top: -12px;
	text-align: center;
	font-size: 20px;
	color: #fff;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
	margin-top: -12px;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
	margin: 0;
}

#portfolio .portfolio-item .portfolio-caption {
	margin: 0 auto;
	padding: 25px;
	text-align: center;
	background-color: #fff;
}

.portfolio-caption dl{
	border-bottom: 1px solid rgba(0,0,0,0.2);
	border-left: 1px solid rgba(0,0,0,0.2);
	border-right: 1px solid rgba(0,0,0,0.2);
	padding-bottom: 10px;
	margin-top: 11px;
}
#portfolio .portfolio-item .portfolio-caption dd{
	border-right: 1px solid rgba(0,0,0,0.2);
	font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-style: italic;
}

.portfolio-caption div a {
	padding: 10px;
	background-color: #fff;
	text-transform: uppercase;
}

#portfolio .portfolio-item .portfolio-caption h4 {
	margin: 0;
	text-transform: none;
}

#portfolio .portfolio-item .portfolio-caption p {
	margin: 0;
	font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 16px;
	font-style: italic;
}

#portfolio a{
	color:rgb(23,183,132);
	text-decoration: none;

}
#portfolio div.email a{
	color:rgb(240,240,240);
}

div.email a{
	font-size: 14px;
	text-transform: uppercase;
   	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
   	font-weight: 700;

	}
#portfolio a:hover{
	text-decoration: underline;
}

#portfolio .facebook-ic,
#portfolio .www-ic,
#cv .career .www-ic{
	height: 100%;
	width: auto;
	color: transparent;
	display: inline-block;
}

#portfolio .facebook-ic{
	background-image: url(../img/ic/facebook_ic.png);
	background-position: center center;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
}

#portfolio .facebook-ic:hover{
	background-image: url(../img/ic/facebook_ic_h.png);
}

#portfolio .www-ic,
#cv .career .www-ic{
	background-image: url(../img/ic/www_ic.png);
	background-position: center center;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
}
#portfolio .www-ic:hover,
#cv .career .www-ic:hover{
	background-image: url(../img/ic/www_ic_h.png);
}

.portfolio-bg, .resume-bg{
	margin-left:0px;
}

#portfolio * {
	z-index: 2;

}


@media(min-width:767px) {
	section {
		padding: 80px 0;
	}
	#portfolio .portfolio-item {
		margin: 0 0 30px;
	}

	section h2.section-heading{
		font-size: 40px;
	}
	.about_line_heading {
	top: 12%;
	}
	.grid figure figcaption h2{
		font-size:18px;
	}
	.grid figure figcaption.one-line {
    padding: 2.9em;
	}
	div.intro-lead-bg-img{
		background-image: url(../img/logos/logo_bg.png);
		background-position: center center;
		background-repeat: no-repeat;
		width:565px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5px;
		display: inherit;
		background-size: 80%;
	}

}

@media(min-width:768px) {

	section h3.section-subheading {
		margin-bottom: 40px;
	}

	.about_line_heading {
		top: 55%;
	}

	.playground span.about_line_heading {
		top: 12%;
	}

	.about-me .portfolio-caption dl,
	.about-me .portfolio-caption dd{
		border: 0px;

	}
	.about-me .portfolio-caption a{
		color: rgb(119,119,119);
		cursor: pointer;
	}
	.about-me .portfolio-caption a:hover,
	.about-me .portfolio-caption a:focus{
		color: rgb(119,119,119);
		text-decoration: none;
	}
	#about #cv .career .career-year h4{
		text-align:center;
	}
	.team-member img,
	.contact-table img {
		margin-left:0%;
		margin-bottom: 4%;
	}
	#contact div.portfolio h4,
	#contact div.cv h4,
	#contact div.social h4{
		text-align:left;
	}

	.imprint h3.section-subheading {
		margin-bottom: 20px;
	}
	div.intro-lead-bg-img{
		background-image: url(../img/logos/logo_bg.png);
		background-position: center center;
		background-repeat: no-repeat;
		width:565px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5px;
		display: inherit;
		background-size: 80%;
	}

	/*---BLOG---*/
	nav.middle div.navbar-header a.logo-head {
	    width: 96%;
	    position: absolute;
	}

}

@media(min-width:992px) {
	.timeline>li {
		min-height: 150px;
	}

	.timeline>li .timeline-panel {
		padding: 0 20px 20px;
	}

	.timeline>li .timeline-image {
		width: 150px;
		height: 150px;
		margin-left: -75px;
	}

	.timeline>li .timeline-image h4 {
		margin-top: 30px;
		font-size: 18px;
		line-height: 26px;
	}

	.timeline>li.timeline-inverted>.timeline-panel {
		padding: 0 20px 20px;
	}

	#about-me,
	#imprint{
		padding-top:130px;
	}

	#portfolio span.mint_line_heading {
		top: 55%;
	}

	#about div.mint_line_heading{
		top: 40%;
	}

	#cv div.mint_line_heading{
		top: 110%;
	}

	.about_line_heading{
		top: 122%;
	}
	#about #cv .career .career-year,
	#about #cv .career .career-date,
	#about #cv .career .career-task,
	#about #cv .career .career-company{
		border-right: 1px solid rgba(0,0,0,0.05);
		min-height:25px;
		
	}

	#about #cv .career .career-year h4{
		text-align:right;
	}
	#about #cv .career .career-company h4{
		text-align:left;
	}
	#about #cv .career .career-date,
	#about #cv .career .career-task{
		text-align:center;
	}
	
	.imprint h2.section-heading{
		font-size:40px;
		margin-top:25px;
	}

	.grid figure figcaption h2{
		font-size:30px;
	}
	div.intro-lead-bg-img{
		background-image: url(../img/logos/logo_bg.png);
		background-position: center center;
		background-repeat: no-repeat;
		width:565px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5px;
		display: inherit;
		background-size: 80%;
	}
	.intro-lead-in img{
		width: 60%;
		left: 20%;
		position:relative;
	}
	.content-barmer .modal-body dd.layout-bg_lp{
		min-height:580px;
		background-size: 96%;
		background-position: 100% 10%;
	}
	ul.layout-dscrpt{
		left:-64%;
	}

	/*--------caterwings-------*/
	.content-caterwings dl.caterwings-ui dt.caterwings-description{
		top:85%;
	}

	.content-caterwings dl.caterwings-ui dd{
		top:85.9%;
	}

	.content-caterwings dl.caterwings-ui dd.caterwings-description2 {
		top:89%;
	}

	/*----------mytoys----------*/
	.content-mytoys dl.mytoys-wireframes dd{
		background-color: rgba(214,214,214,0);
	}

	.content-mytoys dd.layout-dscrpt li.list-one,
	.content-mytoys dd.layout-dscrpt li.list-two,
	.content-mytoys dd.layout-dscrpt2 li.list-one,
	.content-mytoys dd.layout-dscrpt2 li.list-two,
	.content-mytoys dd.layout-dscrpt3 li.list-one,
	.content-mytoys dd.layout-dscrpt3 li.list-two,
	.content-mytoys dd.layout-dscrpt4 li.list-one,
	.content-mytoys dd.layout-dscrpt4 li.list-two,
	.content-mytoys dd.layout-dscrpt5 li.list-one,
	.content-mytoys dd.layout-dscrpt5 li.list-two{
		margin-top: 14%
	}

	.content-mytoys dd.layout-dscrpt li.list-three,
	.content-mytoys dd.layout-dscrpt2 li.list-three,
	.content-mytoys dd.layout-dscrpt3 li.list-three,
	.content-mytoys dd.layout-dscrpt4 li.list-three,
	.content-mytoys dd.layout-dscrpt5 li.list-three{
		margin-top: 36%
	}

	

	/*----------soup----------*/
	.content-soup dl.www-concept{
    	top: 26.6% !important;	
	}
	/*----------miamed----------*/


	/*----------wonderball----------*/
	span.wwb-gifs dl.wwb-list{
	left: 40%;
	}
	/*---BLOG---*/
	nav.middle div.navbar-header a.logo-head {
	    width: 96%;
	    position: absolute;
	}

	
}

@media(min-width:1200px) {
	.navbar-shrink .logo-head img{
		width: 50px;
		height: 50px;
		display: inline-block;
		position: absolute;
		top:8px;
		margin-left:21%;
		background-image: url(../img/logos/logo_sign_white.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size:100%;
		text-decoration: none;
		
	}

	div.title h2{
		margin-left:4%;
		margin-top: 4.7%;
	}

	span.logo-head img{
		width: 40px;
		height: 40px;
		background-image: url(../img/logos/logo_sign_red.png);
		background-repeat: no-repeat;
		background-position: center center;
		background-size:100%;

	}

	span.logo-head img:hover{
		background-image: url(../img/logos/logo_sign_green.png);
		background-repeat: no-repeat;
		background-position: center center;
	}
	div.intro-lead-bg-img{
	background-image: url(../img/logos/logo_bg.png);
	background-position: center center;
	background-repeat: no-repeat;
	}

	div.intro-lead-bg-img{
		width:565px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5px;
		display: inherit;
		background-size: 86%;
	}

	#portfolio span.mint_line_heading {
		top: 42%;
	}
	section h2.section-heading {
    margin-top: 0;
    margin-bottom: 15px;
    color: rgb(251,51,61);
	}

	.service-heading {
	margin: 5px 0;
	text-transform: none;
	color: rgb(255,255,255);
	}

	#service div.white_line_heading {
		top: 41%;
	}
	#about div.mint_line_heading,
	#cv div.mint_line_heading{
		top: 90%;
	}

	.imprint div.mint_line_heading{
		top: 82%;
	}

	#about #cv .career .career-year,
	#about #cv .career .career-date,
	#about #cv .career .career-task,
	#about #cv .career .career-company{
		border-right: 1px solid rgba(0,0,0,0.05);
		min-height:25px;
		text-align:center;
	}

	#about #cv .career .career-year h4{
		text-align:right;
	}

	#about #cv .career .career-company h4{
		text-align: left;
	}
	.about_line_heading {
		top: 12%;
	}

	div.resume-bg,
	div.portfolio-bg span.content-img{
		min-height:248px;
	}

	.social,
	.cv{
		border-top: 1px solid rgba(220,220,220,0.3);
		border-left: 1px solid rgba(220,220,220,0.3);
		border-bottom: 1px solid rgba(220,220,220,0.3);
	}

	.cv{
		border-right: 1px solid rgba(220,220,220,0.3);
	}

	.portfolio{
		border-top: 1px solid rgba(220,220,220,0.3);
		border-right: 1px solid rgba(220,220,220,0.3);
		border-bottom: 1px solid rgba(220,220,220,0.3);
	}

	.social,
	.cv,
	.portfolio{
		padding: 60px 40px;
		color:rgb(220,220,220);
	}
	.social{
		padding: 58px 40px;

	}

	.team-member img,
	.contact-table img {
		margin-left:15%;
		margin-right:auto;
		border: 7px solid #fff;
		float:left;
		margin-bottom:20px;
	}

	.imprint .imprint-contact .social{
		text-align: right;
	}
	.imprint .imprint-contact .cv{
		text-align: left;
	}
	.imprint-contact .team-member img,
	.imprint-contact .contact-table img{
		width: 50%;
		margin-left:24%;
	}
	#portfolio .portfolio-item .portfolio-caption dl.col-lg-12{
		border-bottom: 1px solid rgba(0,0,0,0.2);
		border-left: 1px solid rgba(0,0,0,0.2);
		border-right: 1px solid rgba(0,0,0,0.2);
		
		}
	#portfolio .portfolio-item .portfolio-caption dd.col-lg-2,
	#portfolio .portfolio-item .portfolio-caption dd.col-lg-3{
		border-right: 1px solid rgba(0,0,0,0.2);
		border-bottom: 0px solid rgba(0,0,0,0.2);
		margin-bottom: 5px;
			
	}
	#portfolio .portfolio-item .portfolio-caption dd.last {
		border-right: 0px;
	}
	#portfolio .portfolio-bg span.content-img{
	margin-left:36%;
	}

	/*--------blackjack-------*/

	.content-bljack dl.bljack-wireframes dd{
	position: absolute;
    text-align: left;
	}

	.content-bljack dl.bljack-wireframes dd.layout-dscrpt{
		top:32%;
	}
	.content-bljack dl.bljack-wireframes dd.layout-dscrpt2{
		top:52.5%;
	}

	.content-bljack dl.bljack-wireframes dd.table-right{
		left:62%;
	}

	/*--------caterwings-------*/
	.content-caterwings dl.caterwings-ui dt.caterwings-description{
		top:85%;
	}

	.content-caterwings dl.caterwings-ui dd{
		top:85.9%;
	}

	.content-caterwings dl.caterwings-ui dd.caterwings-description2 {
		top:89%;
	}

	/*--------mytoys-------*/

	.content-mytoys dl.mytoys-wireframes dd{
	position: absolute;
    text-align: left;
	}

	.content-mytoys dl.mytoys-wireframes dd.layout-dscrpt{
		top:24%;
	}
	.content-mytoys dl.mytoys-wireframes dd.layout-dscrpt2{
		top:30.5%;
	}
	.content-mytoys dl.mytoys-wireframes dd.layout-dscrpt3{
		top:38%;
	}
	.content-mytoys dl.mytoys-wireframes dd.layout-dscrpt4{
		top:45.5%;
	}
	.content-mytoys dl.mytoys-wireframes dd.layout-dscrpt5{
		top:53%;
	}
	.content-mytoys dl.mytoys-wireframes dd.table-right{
		left:62%;
	}

	/*----------barmer----------*/

	.content-barmer dd.layout-bg_lp{
		min-height:740px !important;
	}
	.content-barmer dd.barmer-wrfrm{
		min-height:1040px !important;
	}

	.content-barmer dd.barmer-mock-www1{
		min-height:810px !important;
	}
	div.content-barmer dd.barmer-mock-www span.www-search-vid {
    margin-top: 13.2%;
	}

	/*----------soup----------*/
	.content-soup dl.www-concept{
    	top: 26.6% !important;	
	}
	.content-soup dl.www-concept ul.dscrpt-grey1,
	.content-soup dl.www-concept ul.dscrpt-grey2,
	.content-soup dl.www-concept ul.dscrpt-grey3{
		margin:40% 12% 0 12%;
	}
	.content-soup dl.www-concept ul.dscrpt-grey2{
	margin:84% 12% 0 12%;
	}
	.content-soup dl.www-concept ul.dscrpt-grey3{
	margin:14% 12% 0 12%;
	}

	/*----------bakisit----------*/
	.content-bakisit dl.app-concept {
    position: absolute;
    background-color: rgba(255,255,255,0) !important;

	}

    .content-bakisit dl.app-concept dd.dscrpt-grey1{
	margin:27% 12% 0 12%;
	float: right;
	}

	.content-bakisit dl.app-concept dd.dscrpt-grey2{
	margin:72% 12% 0 12%;
	}
	.content-bakisit dl.app-concept dd.dscrpt-grey3{
	margin:70% 12% 0 12%;
	float: right;
	}
	.content-bakisit dl.app-concept dd.dscrpt-grey4{
	margin:60% 12% 0 12%;
	}
	.content-bakisit dl.app-concept dd.dscrpt-grey5{
	margin:64% 12% 0 12%;
	float: right;
	}
	.content-bakisit dl.app-concept dd.dscrpt-grey6{
	margin:70% 12% 0 12%;
	}


	/*----------miamed----------*/
	
	
	/*----------realsmile----------*/
	.content-rs span.pro-head-rs {
		top:30px;
	}

	.content-rs span.gif-rs-edit-bg{
		padding-top:20.5%;
		padding-bottom:10%;
	}
	.rs-gifs p.rs-gif-edit{
		background-position: 10% 30%;
	}

	.content-rs .modal-body span.rs-android p.rs-subtext {
		padding-top:10%;
		margin-left:9%;
	}

	.content-rs span.rs-intro p.description{
    margin: 0px 30px;
    padding:6%;
	}

	.content-rs .modal-body span.rs-shop p.rs-subtext2 {
    font-size: 260%;
    color: rgba(251,225,76,0.8);
    font-weight: 200;
    text-transform: uppercase;
    background-color: rgba(7,190,214,1);
    margin: 0 4.2% 0 4.5%;
    padding: 6% 40%;
	}
	
	.content-rs .modal-body p.rs-subtext small, .content-rs .modal-body span.rs-shop p.rs-subtext2 small {
    font-size: 40%;
    margin-top: -9px;
    margin-left: -64px;
    position: absolute;
	}

	/*----------wonderball----------*/
	span.wwb-gifs dl.wwb-list{
	left: 50%;
	}

}
/*----------end min-width 1200----------*/

.hidden-msg{
	background-color: rgba(203,203,203,0.6);
	padding: 1px 3px;
}
.hidden-msg:hover{
	background-color: rgba(23,183,123,0.4);
}

.txt-link{
	background-color: rgba(23,183,123,0.4);
	padding: 1px 3px;
}
.txt-link:hover{
	color: rgb(255,255,255);
	background-color: rgba(254,50,63,0.4);
}

dd,dt{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	line-height: 1.8;
	color: rgb(255,255,255);
}

dt{
	margin-top:15px;
}

.team-member,
.contact-table {
	color: rgb(220,220,220);
	background: rgba(41,155,146,0);
	margin:0px;
}

.team-member h4,
.contact-table h4 {
	margin-bottom: 5px;
	text-transform: uppercase;
}

.team-member p,
.contact-table p{
	margin-top: 0;
	color: rgb(180,180,180);
}
.imprint a:hover{
	text-decoration: none;
}


.intro-lead-in img{
	width: 80%;
	left: 9.3%;
	position:relative;
	}

aside.clients img {
	margin: 50px auto;
}

section#contact .section-heading,
section#contact .section-subheading {
	color: rgba(255,255,255,0.6);
	border-bottom:1px solid rgba(255,255,255,0.2);
	padding-bottom:20px;
	padding-top:20px;
}

section#contact .form-group {
	margin-bottom: 25px;
}

section#contact .form-group input,
section#contact .form-group textarea {
	padding: 20px;
}

section#contact .form-group input.form-control {
	height: auto;
}

section#contact .form-group textarea.form-control {
	height: 236px;
}

section#contact .form-control:focus {
	border-color: #fed136;
	box-shadow: none;
}

section#contact::-webkit-input-placeholder {
	text-transform: uppercase;
	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 700;
	color: #bbb;
}

section#contact:-moz-placeholder {
	text-transform: uppercase;
	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 700;
	color: #bbb;
}

section#contact::-moz-placeholder {
	text-transform: uppercase;
	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 700;
	color: #bbb;
}

section#contact:-ms-input-placeholder {
	text-transform: uppercase;
	font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 700;
	color: #bbb;
}

section#contact .text-danger {
	color: #e74c3c;
}

section#contact p,
.social,
.social p,
{
	color: #fff;
}

.pro-links{
	margin:0 40px;
}

.resume-bg span.content-img{
	background-image: url(../img/portfolio/ibrand/JFPaper_resume.jpg);
	background-size:100%;
	background-position: 20% -20%;
    background-repeat: no-repeat;
    display: block;
    min-height: 300px;

}

div.resume-dwl,
div.portfolio-dwl{
	border:1px solid rgb(240,240,240);
	padding:40px;
	width: 100%;
	top:-220px;
	color:rgb(220,220,220);
}

div.resume-dwl p,
div.portfolio-dwl p{
	color:rgb(180,180,180);
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
.portfolio-bg,
.resume-bg{
	height: 300px;
	margin-bottom: 10px;

}
div.portfolio-bg{
	text-align: left;
	}
div.resume-bg{
	text-align: right;
	}

.portfolio-bg span.content-img{
	background-image: url(../img/portfolio/ibrand/JFPaper-Mock_v4.jpg);
	background-size:100%;
	background-position: 20% -20%;
    background-repeat: no-repeat;
    display: block;
    min-height: 300px;

}

.address{
	margin: 0px 0px;
	padding-top: 78px;
	border-top: 1px solid rgba(255,255,255,0.2);
}

.address p{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}


section h2.section-heading {
	margin-top: 40px;
    margin-bottom: 15px;
    color: rgb(251,51,61);
}

#service div.col-md-3{
	padding-bottom:20px;
}

#service h2.section-heading{
	margin-top:20px;
}

#service h2.section-heading,
#service h4.service-heading{
	color: #fff;
}

#service p,
#service h3{
	color:rgba(255,255,255,0.5);
}
#service h3{
	text-transform: none;
    font-size: 15px;
    font-weight: 100;
    margin-bottom: 30px;
}

#cv{
	margin-bottom:50px;
}
#graph{
	margin-bottom:30px;
}
#about #cv .career .career-year h4,
#about #cv .career .career-company h4{
	color:rgb(49,175,131);
	margin:3px 0px;
}



#about #cv .career .career-date span,
#about #cv .career .career-task span{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	color:rgb(210,210,210);

}	

#about #cv .career{
	border-bottom: 1px solid rgba(0,0,0,0.05);
	padding:15px 0px;
}

#about h4{
	color:rgb(251,51,61);
	margin-bottom: 30px;
}


li.social-buttons a.contact-in {
	background-image: url(../img/ic/ic_contact_in_20.png);
	background-color: transparent;
	width: 40px;
    height: 40px;
    position: absolute;
    background-repeat: no-repeat;

}
li.social-buttons a.contact-in:hover{
	background-image: url(../img/ic/ic_contact_in_20_h.png);
	background-color: transparent;
}

li.social-buttons a.contact-mail {
	background-image: url(../img/ic/ic_contact_mail_20.png);
	background-color: transparent;
	width: 40px;
    height: 40px;
    position: absolute;
    background-repeat: no-repeat;

}
li.social-buttons a.contact-mail:hover{
	background-image: url(../img/ic/ic_contact_mail_20_h.png);
	background-color: transparent;
}



footer {
	padding: 0px 0px 20px 0px;
	text-align: center;
	margin: 50px 0;
}

footer ul{
	color:rgb(180,180,180);
	font-size: 10px;
	list-style: none;
}

footer a{
	color:rgb(180,180,180);
}


footer li.copyright,
footer li.quicklinks,
footer li.social-buttons{
	font-family: 'Lato',"Helvetica Neue",Helvetica,Arial,sans-serif;
}

footer li.copyright {
	float: right;
	text-align:center;
}

footer li.copyright span{
	height:24px;
	line-height:40px;
}

footer li.social-buttons{
	margin-right:15px;

}

footer li.quicklinks{
	padding-top: 1%;
}


footer li.quicklinks a:hover{
	color:rgb(49,175,131);

}

ul.list-inline{
	margin: 0 20px;
	text-align: left;
}


li.social-buttons a{
	width: 24px;
	height: 24px;
	border-radius: 100%;
	line-height: 40px;
	outline: 0;
	background-repeat:none;
	background-position: center;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	transition: all .3s;
	background-size: 90%;
}	
li.logo-button{
	float: right;
}

li.logo-button a {
	display: inline-block;
	width: 40px;
	height: 40px;
	outline: 0;
	color: #fff;
	background-color: #222;
	-webkit-transition: all .3s;
	-moz-transition: all .3s;
	transition: all .3s;
}

li.logo-button a.jf_logo_40 {
	background-image: url(../img/logos/logo_40.png);
	background-color: transparent;
	background-size: 58%;
    background-repeat: no-repeat;
    background-position: right;

}
li.logo-button a.jf_logo_40:hover,
li.logo-button a.jf_logo_40:focus{
	background-image: url(../img/logos/logo_40_h.png);
	background-color: transparent;
}

li.social-buttons a.in {
	background-image: url(../img/ic/ic_sm_in.png);
	background-color: transparent;

}
li.social-buttons a.in:hover{
	background-image: url(../img/ic/ic_sm_in_h.png);
	background-color: transparent;
}

li.social-buttons a:hover,
li.social-buttons a:focus,
li.social-buttons a:active {
	background-color: transparent;
}

.btn:focus,
.btn:active,
.btn.active,
.btn:active:focus {
	outline: 0;
}
div.about-me div.portfolio-caption{
		padding:0px 40px;

	}

p.portfolio-footer a,
p.portfolio-footer span{
	text-align: center;
	display: block;
}
p.portfolio-footer span{
	opacity:0.4;
	font-size: 10px;
	padding:1% 0px;
}

p.portfolio-think {
	background-image: url(../img/ic/skills/white/jf_icons_creative_white.png);
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;
	background-size:100%;
	display:inline-block;
	margin-left: auto;
	margin-right: auto;
	width: 112px;
	height: 112px;
}

p.portfolio-design{
	background-image: url(../img/ic/skills/white/jf_icons_responsive_white.png);
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;
	background-size:100%;
	display:inline-block;
	margin-left: auto;
	margin-right: auto;
	width: 112px;
	height: 112px;
}

p.portfolio-pxp{
	background-image: url(../img/ic/skills/white/jf_icons_prototype_white.png);
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;
	background-size:100%;
	display:inline-block;
	margin-left: auto;
	margin-right: auto;
	width: 112px;
	height: 112px;
}

p.portfolio-responsive {
	background-image: url(../img/ic/skills/white/jf_icons_html-css_white.png);
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;
	background-size:100%;
	display:inline-block;
	margin-left: auto;
	margin-right: auto;
	width: 112px;
	height: 112px;
}
.portfolio-modal .modal-content {
	padding: 100px 0;
	min-height: 100%;
	border: 0;
	z-index:300;
	border-radius: 0;
	text-align: center;
	background-clip: border-box;
	-webkit-box-shadow: none;
	box-shadow: none;

}
.portfolio-modal .modal-content button{
	margin-top:40px;
}

.portfolio-modal .modal-content h2 {
	margin-bottom: 15px;
	font-size: 2em;
}

.portfolio-modal .modal-content p {
	margin-bottom: 0px;
	color:#ffffff;
	font-size: 12px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	text-align: left;
}

.portfolio-modal .modal-content p.item-intro {
	margin: 20px 0 30px;
	font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 16px;
	font-style: italic;
	text-align: center;
}

.portfolio-modal .modal-content ul.list-inline {
	margin-top: 0;
	margin-bottom: 30px;
}

.portfolio-modal .modal-content ul.modal-table{
	font-size: 12px;
	list-style-type: none;
	padding:20px;
}

.portfolio-modal .modal-content ul.modal-table li{
	border: 1px solid rgba(220,220,220,0.3);
	min-height:26px;
}

.portfolio-modal .modal-content dt,
.portfolio-modal .modal-content dd{
	margin-bottom: 15px;}

table.modal-table {
	overflow: hidden;
	width: 100%;
	margin: 0 auto 40px;
  	display: table;
  	padding: 0 0 8em 0;

}

table.modal-table th,
table.modal-table td{
	padding: 2% 2% 2% 2%;
  	width: 24%;
  	text-align: center;
  	text-transform: uppercase;
  	display:inline-block;
}

table.modal-table th{
	font-size: 8px;
	opacity: 0.8;
	font-weight: 200;
}
table.modal-table td{
	background-color: rgba(255,255,255,0.2);
	font-size:8px;
}

.modal-table tbody{
	min-height:26px;
}

.portfolio-modal .modal-content img {
	margin-bottom: 0px;
}

.portfolio-modal .modal-content dl.prolog{
	text-align:left;
	font-size:12px;
	margin-top:40px;
}

.portfolio-modal .close-modal {
	position: absolute;
	top: 25px;
	right: 40px;
	width: 45px;
	height: 45px;
	background-color: transparent;
	cursor: pointer;
}

.portfolio-modal .close-modal:hover {
	opacity: .3;
}

.portfolio-modal .close-modal .lr {
	z-index: 1051;
	width: 3px;
	height: 45px;
	margin-left: 35px;
	background-color: #fff;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.portfolio-modal .close-modal .lr .rl {
	z-index: 1052;
	width: 3px;
	height: 45px;
	background-color: #fff;
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

.portfolio-modal .modal-backdrop {
	display: none;
	opacity: 0;
}
.modal-body {
	color:#ffffff;
}
.content-rs .modal-body p,
.content-zoobe .modal-body p,
.content-kisg .modal-body p,
.content-ma .modal-body p,
.content-tav .modal-body p,
.content-rhg .modal-body p{
	margin:20px 30px;
}

.text-inner{
	margin: 0px;
    padding-bottom: 0 10px 10px 20px; 
    display:block;
    text-align: left;
}

/*-------------- BLOG -------------*/

nav.middle{ 
	background-color: rgba(255,255,255,0.6);
	padding:0 0 5rem 0;
}

nav.middle div.navbar-header a.logo-head{
	width: 82%;
    position: absolute;
}

nav.middle a.logo-head img{
	display: block;
    margin: auto;
}

#blog .text-muted{
	margin: 4rem 0 4rem 0;
}
#blog div.affiliate{
	min-height:250px;

}
#blog div.affiliate span{
    margin-bottom: 1rem;
}

#blog div.affiliate dt{
	color:rgb(90,90,90);
	padding-bottom: 1rem;
}

#blog div.affiliate p{
	color:rgb(180,180,180);
	font-size: 0.95rem;
}
#blog div.affiliate dd{
		color:rgb(90,90,90);
}

#blog dd a{
	color: rgb(23,183,123)
}

#blog dd{	
	padding-right: 15px;
    padding-left: 15px;
    margin: 0 0 2rem 0;
}

#blog .text-muted dd{
	color:rgb(90,90,90);
}

#blog span.tipp-wickeln1 {
    background-image: url(../img/portfolio/blog/wickeln_tipps_1.jpg);
    background-repeat: no-repeat;
    background-position: 40% 60%;
    background-size: 70%;
    height: 100%;
    min-height: 185px;
    margin:2rem 0 2rem 0;
}

#blog span.tipp-wickeln2 {
    background-image: url(../img/portfolio/blog/wickeln_tipps_2.jpg);
    background-repeat: no-repeat;
    background-position: 40% 60%;
    background-size: 70%;
    height: 100%;
    min-height: 185px;
    margin:2rem 0 2rem 0;
}

#blog span.tipp-nest {
    background-image: url(../img/portfolio/blog/nestchen.jpg);
    background-repeat: no-repeat;
    background-position: 40% 60%;
    background-size: 90%;
    height: 100%;
    min-height: 185px;

}

#blog span.gif-wickeln{
	display: inline-block;
    height: 100%;
    margin: 0 0 2rem 0;

}
#blog span.tipp-baden {
    background-image: url(../img/portfolio/blog/badewanne.png);
    background-repeat: no-repeat;
    background-position: 85% 73%;
    background-size: 100%;
    height: 100%;
    min-height: 160px;

}
#blog span.tipp-baden2 {
    background-image: url(../img/portfolio/blog/badewanne.png);
    background-repeat: no-repeat;
    background-position: 16% 73%;
    background-size: 95%;
    height: 100%;
    min-height: 230px;

}
#blog span.tipp-wagen {
    background-image: url(../img/portfolio/blog/wagen_kuscheltier.jpg);
    background-repeat: no-repeat;
    background-position: 85% 91%;
    background-size: 100%;
    height: 100%;
    min-height: 340px;

}
#blog span.spielzeug01 {
    background-image: url(../img/portfolio/blog/3M_01.jpg);
    background-repeat: no-repeat;
    background-position: 40% 60%;
    background-size: 70%;
    height: 100%;
    min-height: 185px;
}
#blog span.spielzeug02 {
    background-image: url(../img/portfolio/blog/3M_02.jpg);
    background-repeat: no-repeat;
    background-position: 40% 60%;
    background-size: 70%;
    height: 100%;
    min-height: 185px;
}
#blog span.spielzeug03 {
    background-image: url(../img/portfolio/blog/3M_03.jpg);
    background-repeat: no-repeat;
    background-position: 40% 60%;
    background-size: 70%;
    height: 100%;
    min-height: 185px;
}
#blog span.spielzeug04 {
    background-image: url(../img/portfolio/blog/3M_04.jpg);
    background-repeat: no-repeat;
    background-position: 40% 60%;
    background-size: 70%;
    height: 100%;
    min-height: 185px;
}
#blog span.spielzeug05 {
    background-image: url(../img/portfolio/blog/3M_05.jpg);
    background-repeat: no-repeat;
    background-position: 40% 60%;
    background-size: 70%;
    height: 100%;
    min-height: 185px;
}
#blog span.spielzeug06 {
    background-image: url(../img/portfolio/blog/3M_06.jpg);
    background-repeat: no-repeat;
    background-position: 40% 60%;
    background-size: 70%;
    height: 100%;
    min-height: 185px;
}
#blog span.wagen1{
	background-image: url(../img/portfolio/blog/wagen_1.jpg);
	background-repeat: no-repeat;
    background-position: 16% 70%;
    background-size: 95%;
    height: 100%;
    min-height: 230px;
}
#blog span.wagen2{
	background-image: url(../img/portfolio/blog/wagen_2.jpg);
	background-repeat: no-repeat;
    background-position: 16% 20%;
    background-size: 95%;
    height: 100%;
    min-height: 230px;
}
#blog span.stuhl1{
	background-image: url(../img/portfolio/blog/chicco_stuhl_1.jpg);
	background-repeat: no-repeat;
    background-position: 16% 70%;
    background-size: 95%;
    height: 100%;
    min-height: 230px;
}

#blog span.stuhl2{
	background-image: url(../img/portfolio/blog/chicco_stuhl_2.jpg);
	background-repeat: no-repeat;
    background-position: 85% 54%;
    background-size: 100%;
    height: 100%;
    min-height: 230px;
}

#blog span.sonnensegel{
	background-image: url(../img/portfolio/blog/sonnensegel.jpg);
	background-repeat: no-repeat;
    background-position: 16% 54%;
    background-size: 95%;
    height: 100%;
    min-height: 230px;
}
#blog span.peeling{
	background-image: url(../img/portfolio/blog/peeling.jpg);
	background-repeat: no-repeat;
    background-position: 16% 54%;
    background-size: 95%;
    height: 100%;
    min-height: 230px;
}

#blog .gedanken .text-muted dd{
    font-size: 1.25rem;
    color: rgb(160,160,160);
    font-style: italic;
}
.blog details div.row{
	margin:0 0 2rem 0;
}
details p {
	margin: 0 0 1rem;
	padding-top: 1rem;
}

details p.coming{
	color:rgb(120,120,120);
	font-style:italic;
	font-size:1.25rem;}

details dd,
details dt,
details ul{
	font-size: 1.45rem;
	color:rgb(90,90,90);
}


details span.tipps ul{
	font-weight: 700;
	padding-left: 2rem;
	font-size: 1.25rem;
	margin:1rem 0 0.5rem 0;
}
details span.tipps li{
	list-style: none;
	font-weight: 400;
	padding:0 0 0.5rem 0;
}
details span.tipps li,
details span.tipps li.list-first{
	color: rgb(160,160,160);;
}
details span.tipps li.list-first{
	padding:0.5rem 0 0.5rem 0;
}
details span.tipps{
	background-color: white;
	border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
	box-shadow: 2px 10px 12px 0px rgba(0,0,0,0.18);
	-webkit-box-shadow: 2px 10px 12px 0px rgba(0,0,0,0.18);
	-moz-box-shadow: 2px 10px 12px 0px rgba(0,0,0,0.18);
	padding:1rem;
}
details span.tipps dt,
details dt {
	margin-top: 0px;
}


details[open] summary ~ * {
  animation: open 0.3s ease-in-out;
}

@keyframes open {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
details summary::-webkit-details-marker {
  display: none;
}

details summary {
  width: 100%;
  padding: 0.5rem 0;
  border-top: 1px solid rgb(220,220,220);
  position: relative;
  cursor: pointer;
  font-size: 1.45rem;
  font-weight: 700;
  list-style: none;
}

details summary:after {
  content: ">";
  color: rgb(120,120,120);
  position: absolute;
  font-size: 1.75rem;
  line-height: 0;
  margin-top: 0.75rem;
  right: 0;
  font-weight: 300;
  transform-origin: center;
  transition: 200ms linear;
}
details[open] summary:after {
  transform: rotate(90deg);
  font-size: 1.5rem;
  font-weight: 300;
}
details summary {
  outline: 0;
}




/*----------projects generell css----------*/



/*----------jujubee----------*/
	.content-jujubee{
	   background-color: rgba(21,20,39,0.95);
	}
	.pro-head-jujubee {
    	color: rgb(206,163,42);
	}
	.content-jujubee dl{
	   background-color: rgba(56,57,70,0.95);
	}
	.content-jujubee dt,
	.content-jujubee dd,
	.content-jujubee dd.layout-bg_an,
	.content-jujubee dd.text-grey,
	.content-jujubee h2{
		margin:0px;
	}

	.content-jujubee h2{
		padding-top:10%;
	}
	.content-jujubee dd.www-bg-1a{
		background-image: url(../img/portfolio/jujubee/jujubee_view_1a.jpg);
    	background-repeat: no-repeat;
    	background-size:100%;
    	width: 100%;
    	height: 100%;
    	min-height:300px;
	}
	.content-jujubee dd.www-bg-1b{
		background-image: url(../img/portfolio/jujubee/jujubee_view_1b.jpg);
    	background-repeat: no-repeat;
    	background-size:100%;
    	width: 100%;
    	height: 100%;
    	min-height:300px;
	}
	.content-jujubee dd.www-bg-1c{
		background-image: url(../img/portfolio/jujubee/jujubee_view_1c.jpg);
    	background-repeat: no-repeat;
    	background-size:100%;
    	width: 100%;
    	height: 100%;
    	min-height:300px;
	}

	.content-jujubee ul.layout-dscrpt,
	.content-jujubee ul.layout-dscrpt2,
	.content-jujubee ul.layout-dscrpt-right{
		float: right;
    	position: relative;
    	padding-bottom: 8%;
    	font-size: 10px;
    	color: rgb(180,180,180);
    	list-style: none;
   		font-weight: 300;
    	letter-spacing: 0.4px;
	}


	.content-jujubee ul.layout-dscrpt li.barmer-list,
	.content-jujubee ul.layout-dscrpt2 li.barmer-list{
		margin-bottom: 15px;
	}

	.content-jujubee  dd.text-grey{
		font-size: 10px;
    	color: rgb(180,180,180);
    	list-style: none;
   		font-weight: 300;
    	letter-spacing: 0.4px;
	}

	.content-jujubee dd.jujubee-mock-www2 {
		background-image: url(../img/portfolio/jujubee/jujubee_view_6.jpg);
    	background-repeat: no-repeat;
    	background-size:100%;
    	width: 100%;
    	height: 100%;
    	display: inline-block;

	}

	.content-jujubee dd.jujubee-mock-www2 span.www-prototype{
		width: 58%;
    	display: inline-block;
    	height: 100%;
    	margin-left: 37.8%;
    	padding: 6% 0;
	}

	.content-jujubee  dl.prolog{
		background-color: rgba(56,57,70,0)
	}

/*----------blackjack----------*/
.content-bljack {
	background-color:rgba(232,232,232,0.95);
}
.content-bljack button{
	border-color: rgba(1,58,108,0.95);
	color:rgba(1,58,108,0.95);
}

.content-bljacks button:hover,
.content-bljack button:focus{
	background-color: rgba(255,217,2,1);
	border-color: rgb(255,217,2);
	color:rgba(255,255,255,1);
}

.content-bljack button.btn-primary:active{
	background-color: rgba(255,217,2,1);
	border-color: rgb(255,217,2);
	color:rgba(255,255,255,1);
}

.content-bljack dl,
.content-bljack dl.bljack-wireframes dd{
	margin-bottom:0px;
}

.content-bljack dl.text-inner{
	background-color: rgb(214,214,214);
	padding-bottom:15px;
}

.content-bljack h2,
.content-bljack .modal-body a{
	color:rgb(36,36,36);
}
.content-bljack .modal-body p{
	color:rgb(36,36,36);
}

.content-bljack dl.prolog dt,
.content-bljack dl.prolog dd{
	color:rgb(0,0,0);
}

.content-bljack dl.bljack-intro,
.content-bljack dl.bljack-wireframes,
.content-bljack dl.bljack-desktop{
	margin-bottom: 0px;
}
.content-bljack dl.bljack-intro h2.bljack-subtext,
.content-bljack dl.bljack-wireframes h2.bljack-subtext,
.content-bljack dl.bljack-desktop h2.bljack-subtext{
	text-align:left;
	padding-top:3rem;
	padding-left:3%;
	margin:0px;
	font-size: 280%;
    color: rgba(255,255,255,0.4);
    font-weight: 100;
    text-transform: uppercase;
    background-color: rgb(214,214,214);
}

.content-bljack dl.bljack-intro{
	background-color: rgb(214,214,214);
	display: inline-block;
	
}


.content-bljack dl.bljack-intro dt.bljack-description,
.content-bljack dl.bljack-intro dd{
	text-align: left;
    padding-left: 3%;
    margin-bottom:0px;
    color: rgb(90,90,90);
    font-weight: 300;
}

.content-mytoys dl.bljack-intro h2.bljack-subtext{
	padding-top:15%;
}
.content-mytoys dl.bljack-wireframes h2.bljack-subtext{
	padding-top:5%;
}


.content-bljack dl.bljack-wireframes dd{
	text-align: left;
}

.content-bljack dl.bljack-wireframes dt.bljack-description{
	position: absolute;
    text-align: left;
    padding-left: 4%;
    top: 21.5%;
    display: block;
    font-weight: 300;
    letter-spacing: 0.4px;
}

.content-bljack dd.layout-dscrpt ul,
.content-bljack dd.layout-dscrpt2 ul{
    padding: 8%;
    font-size: 10px;
    color: rgb(90,90,90);
    list-style: none;
   	font-weight: 300;
    letter-spacing: 0.4px;
}

.content-bljack dd.layout-dscrpt li.bljack-list,
.content-bljack dd.layout-dscrpt2 li.bljack-list
{
	margin-bottom: 15px;
}


.content-bljack dl.bljack-desktop dt.bljack-description,
.content-bljack dl.bljack-desktop dd{
	position: absolute;
    text-align: left;
    padding-left: 5%;
    top: 38.7%;
    display: block;
    color: rgb(90,90,90);
}

.content-bljack dl.bljack-prototype span.www-bljack{
    width: 58%;
    display: inline-block;
    height: 100%;
    margin-left: 0%;
    margin-top: 6.4%;
    padding: 6% 0;
}


/*----------caterwings----------*/
.content-caterwings {
	background-color:rgba(232,232,232,0.95);
}
.content-caterwings button{
	border-color: rgba(248,142,112,0.95);
	color:rgba(248,142,112,0.95);
}

.content-caterwings button:hover,
.content-caterwings button:focus{
	background-color: rgba(247,113,75,1);
	border-color: rgb(247,113,75);
	color:rgba(255,255,255,1);
}

.content-caterwings button.btn-primary:active{
	background-color: rgba(247,113,75,1);
	border-color: rgb(247,113,75);
	color:rgba(255,255,255,1);
}

.content-caterwings dl.text-inner{
	background-color: rgb(214,214,214);
}

.content-caterwings h2,
.content-caterwings .modal-body a{
	color:rgb(36,36,36);
}
.content-caterwings .modal-body p{
	color:rgb(36,36,36);
}
.content-caterwings dl.prolog dt,
.content-caterwings dl.prolog dd{
	color:rgb(0,0,0);
}

.content-caterwings dl.caterwings-intro,
.content-caterwings dl.caterwings-wireframes,
.content-caterwings dl.caterwings-flow,
.content-caterwings dl.caterwings-flow2,
.content-caterwings dl.caterwings-screens,
.content-caterwings dl.caterwings-ui{
	margin: 0px;
}
.content-caterwings dl.caterwings-intro h2.caterwings-subtext,
.content-caterwings dl.caterwings-wireframes h2.caterwings-subtext,
.content-caterwings dl.caterwings-flow h2.caterwings-subtext,
.content-caterwings dl.caterwings-flow2 h2.caterwings-subtext,
.content-caterwings dl.caterwings-screens h2.caterwings-subtext,
.content-caterwings dl.caterwings-ui h2.caterwings-subtext{
    padding-left: 3%;
    font-size: 280%;
    color: rgba(255,255,255,0.4);
    font-weight: 100;
    text-transform: uppercase;
    text-align: left;
    margin: 0px;
    background-color: rgb(214,214,214);
}

.content-caterwings dl.caterwings-intro{
	background-color: rgb(214,214,214);
	display: inline-block;
}

.content-caterwings dl.caterwings-intro dt.caterwings-description{
	margin:0px;
}

.content-caterwings dl.caterwings-intro dd{
	background-color: rgb(214,214,214);

}

.content-caterwings dl.caterwings-intro dt.caterwings-description,
.content-caterwings dl.caterwings-intro dd{
    text-align: left;
    padding-left: 3%;
    color:rgb(90,90,90);
    font-weight: 300;
}

.content-caterwings dl.caterwings-wireframes dt.caterwings-description,
.content-caterwings dl.caterwings-wireframes dd
{
	position: absolute;
    text-align: left;
    padding-left: 5%;
    top: 35.7%;
    display: block;
}

.content-caterwings dl.caterwings-flow dt.caterwings-description,
.content-caterwings dl.caterwings-flow dd
{
	position: absolute;
    text-align: left;
    padding-left: 5%;
    display: block;
}
.content-caterwings dl.caterwings-flow2 dt.caterwings-description,
.content-caterwings dl.caterwings-flow2 dd{
	position: absolute;
    text-align: left;
    padding-left: 5%;
	display: block;
}

.content-caterwings dl.caterwings-screens dd{
    text-align: left;
}

.content-caterwings dd.layout-dscrpt ul,
.content-caterwings dd.layout-dscrpt2 ul{
    padding: 8%;
    font-size: 10px;
    color: rgb(90,90,90);
    list-style: none;
   	font-weight: 300;
    letter-spacing: 0.4px;
}

.content-caterwings dd.layout-dscrpt li.caterwings-list,
.content-caterwings dd.layout-dscrpt2 li.caterwings-list{
	margin-bottom: 15px;
}
.content-caterwings dd.layout-dscrpt li.list-one,
.content-caterwings dd.layout-dscrpt li.list-two,
.content-caterwings dd.layout-dscrpt2 li.list-one,
.content-caterwings dd.layout-dscrpt2 li.list-two{
	margin-top: 6%
}


.content-caterwings dl.caterwings-ui dt.caterwings-description{
	position: absolute;
    text-align: left;
    padding-left: 5%;
	display: block;
}
.content-caterwings dl.caterwings-ui dd{
	position: absolute;
    text-align: left;
    padding-left: 5%;
	display: block;
}
.content-caterwings dl.caterwings-ui dd.caterwings-description2{
	position: absolute;
    text-align: left;
    padding-left: 5%;
    display: block;
}

/*----------mytoys----------*/
.content-mytoys {
	background-color:rgba(232,232,232,0.95);
}
.content-mytoys button{
	border-color: rgba(1,58,108,0.95);
	color:rgba(1,58,108,0.95);
}

.content-mytoys button:hover,
.content-mytoys button:focus{
	background-color: rgba(255,217,2,1);
	border-color: rgb(255,217,2);
	color:rgba(255,255,255,1);
}

.content-mytoys button.btn-primary:active{
	background-color: rgba(255,217,2,1);
	border-color: rgb(255,217,2);
	color:rgba(255,255,255,1);
}

.content-mytoys dl,
.content-mytoys dl.mytoys-wireframes dd{
	margin-bottom:0px;
}

.content-mytoys dl.text-inner{
	background-color: rgb(214,214,214);
	padding-bottom:15px;
}

.content-mytoys h2,
.content-mytoys .modal-body a{
	color:rgb(36,36,36);
}
.content-mytoys .modal-body p{
	color:rgb(36,36,36);
}

.content-mytoys dl.prolog dt,
.content-mytoys dl.prolog dd{
	color:rgb(0,0,0);
}

.content-mytoys dl.mytoys-intro,
.content-mytoys dl.mytoys-wireframes,
.content-mytoys dl.mytoys-desktop,
.content-mytoys dl.mytoys-app{
	margin-bottom: 0px;
}
.content-mytoys dl.mytoys-intro h2.mytoys-subtext,
.content-mytoys dl.mytoys-wireframes h2.mytoys-subtext,
.content-mytoys dl.mytoys-desktop h2.mytoys-subtext,
.content-mytoys dl.mytoys-app h2.mytoys-subtext{
	text-align:left;
	padding-left:3%;
	margin:0px;
	font-size: 280%;
    color: rgba(255,255,255,0.4);
    font-weight: 100;
    text-transform: uppercase;
    background-color: rgb(214,214,214);
}

.content-mytoys dl.mytoys-intro{
	background-color: rgb(214,214,214);
	display: inline-block;
}


.content-mytoys dl.mytoys-intro dt.mytoys-description,
.content-mytoys dl.mytoys-intro dd{
	text-align: left;
    padding-left: 3%;
    margin-bottom:0px;
    color:rgb(90,90,90);
    font-weight: 300;
}

.content-mytoys dl.mytoys-intro h2.mytoys-subtext{
	padding-top:15%;
}
.content-mytoys dl.mytoys-wireframes h2.mytoys-subtext{
	padding-top:5%;
}


.content-mytoys dl.mytoys-wireframes dd{
	text-align: left;
}

.content-mytoys dl.mytoys-wireframes dt.mytoys-description{
	position: absolute;
    text-align: left;
    padding-left: 4%;
    top: 21.5%;
    display: block;
    font-weight: 300;
    letter-spacing: 0.4px;
}

.content-mytoys dd.layout-dscrpt ul,
.content-mytoys dd.layout-dscrpt2 ul,
.content-mytoys dd.layout-dscrpt3 ul,
.content-mytoys dd.layout-dscrpt4 ul,
.content-mytoys dd.layout-dscrpt5 ul{
    padding: 8%;
    font-size: 10px;
    color: rgb(90,90,90);
    list-style: none;
   	font-weight: 300;
    letter-spacing: 0.4px;
}

.content-mytoys dd.layout-dscrpt li.mytoys-list,
.content-mytoys dd.layout-dscrpt2 li.mytoys-list,
.content-mytoys dd.layout-dscrpt3 li.mytoys-list,
.content-mytoys dd.layout-dscrpt4 li.mytoys-list,
.content-mytoys dd.layout-dscrpt5 li.mytoys-list{
	margin-bottom: 15px;
}


.content-mytoys dl.mytoys-desktop dt.mytoys-description,
.content-mytoys dl.mytoys-desktop dd{
	position: absolute;
    text-align: left;
    padding-left: 5%;
    top: 38.7%;
    display: block;
}
.content-mytoys dl.mytoys-app dt.mytoys-description,
.content-mytoys dl.mytoys-app dd
{
	position: absolute;
    text-align: left;
    padding-left: 5%;
    top: 51%;
    display: block;
}

.content-mytoys dl.mytoys-prototype{
	background-image: url(../img/portfolio/mytoys/mytoys_view_6.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;

}

.content-mytoys dl.mytoys-prototype span.www-mytoys{
    width: 58%;
    display: inline-block;
    height: 100%;
    margin-left: 0%;
    margin-top: 6.4%;
    padding: 6% 0;
}



/*----------aamt----------*/
.content-amt {
	background-color:rgba(232,232,232,0.95);
}
.content-amt button{
	border-color: rgba(177,16,39,0.95);
	color:rgba(177,16,39,0.95);
}

.content-amt button:hover,
.content-amt button:focus{
	background-color: rgba(177,16,39,1);
	border-color: rgb(177,16,39);
	color:rgba(255,255,255,1);
}

.content-amt button.btn-primary:active{
	background-color: rgba(177,16,39,1);
	border-color: rgb(177,16,39);
	color:rgba(255,255,255,1);
}

.portfolio-modal .modal-content .content-amt dd{
	margin-bottom: 0px;
}

.content-amt dl.text-inner{
	background-color: rgb(228,228,228);
	padding-bottom:15px;
}
.content-amt dl.text-inner dt,
.content-amt dl.text-inner dd{
	color:rgb(80,80,80);
	font-weight: 300;
    letter-spacing: 0.4px;
}

.content-amt h2,
.content-amt .modal-body a{
	color:rgb(36,36,36);
}
.content-amt .modal-body p{
	color:rgb(36,36,36);
}
.content-amt dl.prolog dt,
.content-amt dl.prolog dd{
	color:rgb(0,0,0);
}

.content-amt dl.amt-intro,
.content-amt dl.amt-flow,
.content-amt dl.amt-icons,
.content-amt dl.amt-prototyp{
	margin-bottom: 0px;
}
.content-amt dl.amt-intro h2.amt-subtext,
.content-amt dl.amt-icons h2.amt-subtext{
	position: absolute;
	margin-top:14%;
	margin-left:3%;
	font-size: 280%;
    color: rgba(255,255,255,0.4);
    font-weight: 100;
    text-transform: uppercase;
}
.content-amt dl.amt-flow dt,
.content-amt dl.amt-flow h2.amt-subtext{
	display: block;
	text-align: left;
	margin:0px;
	background-color: rgb(226,226,226);
}

.content-amt dl.amt-flow h2.amt-subtext{
	color: rgba(255,255,255,0.4);
    font-weight: 100;
    text-transform: uppercase;
    padding: 2%;
}

.content-amt dl.amt-icons h2.amt-subtext{
	margin-top:0%;
}


.content-amt dl.amt-intro dt.amt-description,
.content-amt dl.amt-intro dd
{
	position: absolute;
    text-align: left;
    padding-left: 3%;
    top: 12.7%;
    display: block;
}

.content-amt dl.amt-flow dt.amt-description{
	position: absolute;
    text-align: left;
    padding-left: 4%;
    top: 21.5%;
    display: block;
    font-weight: 300;
    letter-spacing: 0.4px;
}

.content-amt dl.amt-flow dd{
    text-align: left;
    background-color: rgb(226,226,226);
}

.content-amt dd.layout-dscrpt ul,
.content-amt dd.layout-dscrpt2 ul,
.content-amt dd.layout-dscrpt3 ul,
.content-amt dd.layout-dscrpt4 ul,
.content-amt dd.layout-dscrpt5 ul,
.content-amt dd.layout-dscrpt6 ul,
.content-amt dd.layout-dscrpt7 ul{
    padding: 8%;
    font-size: 10px;
    color: rgb(90,90,90);
    list-style: none;
   	font-weight: 300;
    letter-spacing: 0.4px;
}

.content-amt dd.layout-dscrpt li,
.content-amt dd.layout-dscrpt2 li,
.content-amt dd.layout-dscrpt3 li,
.content-amt dd.layout-dscrpt4 li,
.content-amt dd.layout-dscrpt5 li,
.content-amt dd.layout-dscrpt6 li{
	margin-bottom: 15px;
}

.content-amt dl.amt-flow dd.layout-dscrpt5{
	position: absolute;
	top: 44.5%;
	background-color: rgba(228,228,228,0);
}
.content-amt dl.amt-flow dd.layout-dscrpt6{
	background-color: rgba(228,228,228,0);
	padding: 0%;
}

.content-amt dl.amt-flow dd.layout-dscrpt7{
	top: 66.2%;
}


.content-amt dd.table-right{
	position: absolute;
    left: 53%;

}

.content-amt dl.amt-prototype-p{
	background-image: url(../img/portfolio/aamt/aamt_view_p.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
	min-height: 370px;
    padding-bottom: 60px;
}

.content-amt dl.amt-prototype-p span.www-amt-p{
    width: 57.1%;
    display: inline-block;
    height: 100%;
    margin-left: 33%;
    margin-top: 13%;
    padding: 6% 0;
}

.content-amt dl.amt-prototype-g{
	background-image: url(../img/portfolio/aamt/aamt_view_g.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    min-height: 330px;
    padding-bottom: 140px;
}

.content-amt dl.amt-prototype-g span.www-amt-g{
	width: 58%;
    display: inline-block;
    height: 100%;
    margin-left: 32%;
    margin-top: 14.5%;
    padding: 6% 0;
}



/*----------barmer----------*/

.content-barmer {
	background-color:rgba(255,255,255,0.95);
}
.content-barmer div.modal-body{
	background-color:rgba(256,256,256,0);
}
.content-barmer img.img-responsive,
.content-barmer .modal-body dl{
	margin-bottom: -15px;
	margin-top: -15px;
}

.content-barmer button.btn-primary{
	border: 1px solid rgba(114,196,48,1);
	color:rgb(114,196,48);
}

.content-barmer button:hover,
.content-barmer button:focus{
	background-color: rgba(114,196,48,1);
	border-color: rgb(114,196,48);
	color:rgba(255,255,255,1);
}

.content-barmer button.btn-primary:active{
	background-color: rgba(114,196,48,1);
	border-color: rgb(114,196,48);
	color:rgba(255,255,255,1);
}
.content-barmer .modal-body dl.prolog{
	padding:20px 20px;
	display:inline-block;
}

.content-barmer .modal-body p{
	margin:0px 0px;
}

.content-barmer .modal-body p.portfolio-footer a,
.content-barmer .modal-body p a {
 color: rgba(40,40,40,0.4);
}

.content-barmer .modal-body span.pro-head-barmer h2{
    background-color: transparent;
    color:rgb(114,196,48);;
}

.content-barmer .modal-body h2{
    background-color: white;
    color: rgb(240,240,240);
    margin: 0px;
    padding:4% 0;
    text-align: center;
}

.content-barmer .modal-body dl.text-inner dt,
.content-barmer .modal-body dl.text-inner dd{
	color: rgb(40,40,40);
	text-align: left;
	font-size: 12px;
	margin:0px;
}
.content-barmer .modal-body dl.text-inner{
	background-color:rgba(255,255,255,1);
	padding-bottom: 14px;
}
.content-barmer .modal-body dl.text-inner dd.text-grey{
	font-size: 10px;
    color: rgb(120,120,120);
    font-weight: 300;
    letter-spacing: 0.4px;
}

.content-barmer dd.layout-bg_lp{
    background-image: url(../img/portfolio/barmer/barmer_view4_lp.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    min-height: 250px;
}
.content-barmer dd.layout-bg_an{
    background-image: url(../img/portfolio/barmer/barmer_view4_an.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    min-height: 1400px;
}

ul.layout-dscrpt,
ul.layout-dscrpt2,
ul.layout-dscrpt-right{
	float: right;
    position: relative;
    padding-top: 8%;
    font-size: 10px;
    color: rgb(180,180,180);
    list-style: none;
    font-weight: 300;
    letter-spacing: 0.4px;
}

ul.layout-dscrpt2{    
	margin-top: 72%;
}

ul.layout-dscrpt li.barmer-list,
ul.layout-dscrpt2 li.barmer-list{
	margin-bottom: 15px;
}
ul.layout-dscrpt li.list-one,
ul.layout-dscrpt li.list-two,
ul.layout-dscrpt-right li.list-one,
ul.layout-dscrpt-right li.list-two{
	margin-top: 14%
}

ul.layout-dscrpt li.list-three{
	margin-top: 36%
}


.content-barmer dd.barmer-mock-www{
	background-image: url(../img/portfolio/barmer/browser_mockup.jpg);
	background-repeat: no-repeat;
    display: inline-block;
    width: 100%;
    height: auto;
    background-size: 100%;
    background-position: 12%;
    min-height: 460px;
}

.content-barmer dd.barmer-mock-www span.www-search-vid{
    width: 57.6%;
    display: inline-block;
    height: 100%;
    margin-left: 21.35%;
    margin-top: 13.2%;
    padding: 6% 0;
}

.content-barmer dd.barmer-mock-www1{
	background-image: url(../img/portfolio/barmer/barmer_view2.jpg);
	background-repeat: no-repeat;
    display: inline-block;
    width: 100%;
    height: auto;
    background-size: 100%;
    min-height:260px;
}

.content-barmer dd.barmer-mock-www1 span.rechner{
    width: 57.6%;
    display: inline-block;
    height: 100%;
    margin-left: 36.1%;
    margin-top: 15%;
    padding: 16.3% 0;
}
.content-barmer dd.barmer-mock-www2{
	background-image: url(../img/portfolio/barmer/search_prototype.jpg);
	background-repeat: no-repeat;
    display: inline-block;
    width: 100%;
    height: auto;
    background-size: 100%;
    min-height:300px;
}
.content-barmer dd.barmer-mock-www2 span.search{
    width: 57.6%;
    display: inline-block;
    height: 100%;
    margin-left: 37.1%;
    margin-top: 2.5%;
    padding: 16.3% 0;
}
.content-barmer dd.barmer-mock-video{
	background-image: url(../img/portfolio/barmer/barmer_view6.jpg);
	background-repeat: no-repeat;
    display: inline-block;
    width: 100%;
    height: auto;
    background-size: 100%;
    min-height:470px;
}
.content-barmer dd.barmer-mock-video span.video{
    width: 57.6%;
    display: inline-block;
    height: 100%;
    margin-left: 36.1%;
    margin-top: 3.5%;
    padding: 16.3% 0;
}
.content-barmer dd.barmer-wrfrm{
	background-image: url(../img/portfolio/barmer/barmer_layouts.jpg);
	background-repeat: no-repeat;
    display: inline-block;
    width: 100%;
    height: auto;
    background-size: 100%;
    min-height:240px;
}
.content-barmer dd.barmer-wrfrm-search2{
	background-image: url(../img/portfolio/barmer/barmer_layout-search2.jpg);
	background-repeat: no-repeat;
    display: inline-block;
    width: 100%;
    height: auto;
    background-size: 100%;
    min-height:690px;
}

.content-barmer ul{
	position: relative;
    font-size: 10px;
    color: rgb(120,120,120);
    list-style: none;
    font-weight: 300;
    letter-spacing: 0.4px;

}
dd.b-case-study-video ul.case-study-list,
ul.case-study-list{
    position: relative;
    font-size: 10px;
    color: rgb(120,120,120);
    list-style: none;
    font-weight: 300;
    letter-spacing: 0.4px;
    padding-top: 7%;
    padding-left: 4.5%;
}

dd.b-case-study-video ul.case-study-list li.list-one,
dd.b-case-study-register ul.case-study-list li.list-one{
	font-weight: 300;
}
ul.barmer-wrfrm-prfl,
ul.barmer-wrfrm-status,
ul.barmer-wrfrm-search2{
	float: right;
    position: relative;
    font-size: 10px;
    color: rgb(120,120,120);
    list-style: none;
    font-weight: 300;
    letter-spacing: 0.4px;
    padding-top: 2%;
    padding-left: 4.5%;
}
ul.barmer-wrfrm-status li.list-one,
ul.barmer-wrfrm-status li.list-two,
ul.barmer-wrfrm-prfl li.list-one,
ul.barmer-wrfrm-search2 li.list-one,
ul.barmer-wrfrm-search2 li.list-two,
ul.barmer-wrfrm-search2 li.list-three{
	margin-bottom:10px;
}

ul.barmer-wrfrm-status{
	margin-top: -58%;
    float: left;
    display: inline-block;
}

dd.b-case-study-video ul.case-study-list li.list-two,
dd.b-case-study-register ul.case-study-list li.list-four,
ul.case-study-list li.list-one,
ul.barmer-wrfrm-prfl li.list-one,
ul.barmer-wrfrm-prfl li.list-two,

ul.barmer-wrfrm-status li.list-three,
ul.barmer-wrfrm-search2 li.list-four{
	font-weight: 600;
}

ul.barmer-wrfrm-status li.list-three,
ul.barmer-wrfrm-status li.list-four,
ul.barmer-wrfrm-prfl li.list-three,
ul.barmer-wrfrm-prfl li.list-four,
ul.barmer-wrfrm-search2 li.list-four{
	margin-top:10px;
}

.content-barmer dl.collaborate{
	padding-bottom: 40px;
}

.pro-head-barmer{
	color:rgb(114,196,48);
}

.content-barmer table.modal-table td{
	background-color:rgba(114,196,48,0.1);
}

.content-barmer dl.prolog dt,
.content-barmer dl.prolog dd,
.content-barmer dl.prolog p{
	color:rgb(40,40,40);
}

/*----------sport----------*/

.content-sport {
	background-color:rgba(117,192,67,0.95);
}
.content-sport img.img-responsive{
	margin-bottom: -15px;
	margin-top: -15px;
}


.content-sport button:hover,
.content-sport button:focus{
	background-color: rgba(255,255,255,1);
	border-color: rgb(255,255,255);
	color:rgba(117,192,67,1);
}

.content-sport button.btn-primary:active{
	background-color: rgba(255,255,255,1);
	border-color: rgb(255,255,255);
	color:rgba(117,192,67,1);
}

.content-sport .modal-body dl{
	display: block;
	margin-bottom:-15px;
}

.content-sport .modal-body dl.text-inner{
	font-size: 12px;
	color: rgb(117,192,67);
	width:100%;
	padding-top:10%;
}

.content-sport .modal-body dl.dscpt_www{
	font-size: 12px;
	position:absolute;
	margin-top:-100%;
	margin-left:55%;
	background-color: transparent;
	width: auto;
}
.content-sport .modal-body dl.dscpt_www dt{
	margin-left:10%;
}
.content-sport .modal-body dl.dscpt_search{
	font-size: 12px;
	position:absolute;
	margin-top:-60%;
	margin-left:55%;
	background-color: transparent;
	width: auto;
}

.content-sport .modal-body h4.sport-subhead{
    text-align: left;
    margin: 0%;
    font-weight: 100;
    color: rgb(146,239,85);
    padding-left: 4%;
}

dl.dscpt_www ul,
dl.dscpt_search ul{
	color:rgb(146,239,85);
	font-size: 12px;
	font-weight: 200;
	letter-spacing: 0.5px;
}

dl.dscpt_www ul li{
	margin-bottom: 4%;
	margin-left: -14%;
}

.content-sport .modal-body dl.text-inner dt,
.content-sport .modal-body dl.text-inner dd{
	color: rgba(0,0,0,0.6);
	text-align: left;
}
.content-sport .modal-body dl.text-inner dt{
	padding-left:2%;
	margin-top:0px;
}
.content-sport .modal-body dl.text-inner dd{
	padding-bottom: 30px;
}
.content-sport .modal-body dl ul {
	margin-bottom:0px;
}
.content-sport .modal-body dl ul li{
	list-style: none;
}

.content-sport .modal-body dl.prolog{
	padding:40px 20px;
	background-color: transparent;
}

.content-sport .modal-body p{
	margin:0px 0px;
}
.content-sport .modal-body dl{
	background-color: rgb(117,192,68);
}
.content-sport .modal-body p.portfolio-footer a,
.content-sport .modal-body p a {
 	color: rgba(255,255,255,0.4);
}
.content-sport .modal-body dl.texts{
	padding:0px 30px;
}
.content-sport .modal-body dl dd ul.dscrpt{
	color: rgb(146,239,85);
    font-size: 12px;
    font-weight: 200;
    letter-spacing: 0.5px;
    margin-left:-40px;
    display:inline-block;
}
.content-sport .modal-body dl.logo-concept dd ul.dscrpt{
	padding-top: 10px;

    margin-left: 0px;
}
.content-sport .modal-body dl.logo-concept dd{
	padding-bottom:0px;
}
.content-sport .modal-body dl dd ul.dscrpt li{
    margin-bottom:15px;
}
.content-sport .modal-body  dd.www_ui_pages{
	background-image: url(../img/portfolio/sport/www_flow-left.png);
    display: inline-block;
    width: 100%;
    height: auto;
    background-size: 100%;
}
.content-sport .modal-body  dd.www_ui_pages img{
	width: 56.5%;
    margin-top: 20.4%;
    margin-left: 5.8%;
}
.content-sport .modal-body  dd.www_ui img{
	width: 56.5%;
	margin-left: 38%;
    padding-top:20.3%;
}

.content-sport .modal-body  dd.www_ui{
	background-image: url(../img/portfolio/sport/www_flow-right.png);
    display: block;
    width: 100%;
    height: auto;
    background-size: 100%;
}

.content-sport .modal-body  span.www_ui_pages_buy{
	background-image: url(../img/portfolio/sport/Sportfest_www_ui_buy-flow.png);
    display: block;
    width: 100%;
    height: 450px;
    background-size: 100%;
}
.content-sport .modal-body span.www_ui_pages img{
	width: 56.6%;
	height:auto;
	margin-left: 41px;
	padding-top: 20.5%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;

}

.content-sport .modal-body span.www_ui img{
	width: 56.6%;
	height:auto;
	margin-left: 38.1%;
	padding-top: 20.5%;
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;


}

/*----------soup----------*/

.content-soup {
	background-color:rgba(255,255,255,0.95);
}

.content-soup img.img-responsive{
	margin-bottom: -15px;
}

.content-soup span.title-heading{
	padding:0px;
	margin:0px;
}
.content-soup span.title-heading h2,
.content-soup span.title-heading2 h2{
	color:rgb(212,212,212);
	background-color: rgb(255,255,255);
	margin: 0px;

}

.content-soup span.title-heading h2{
	padding: 40px 0 50px 0;
}

.content-soup span.title-heading2 h2{
	padding: 40px 0 0px 0;
}

.content-soup span.pro-head-soup h2,
.content-soup dt,
.content-soup dd{
	color:rgb(44,44,44);
}


.content-soup dt,
.content-soup dd{
	font-size:12px;
}
.content-soup dl.www-concept{
    top: 20.6%;
    display: inline-block;
    position: absolute;
    left: 54%;
}

.content-soup span.pro-head-soup td{
	background-color:rgba(44,44,44,0.65);

}

.content-soup dl.www-concept {
	float:right;
}

.content-soup dl.text-www{
	padding-bottom:40px;
	background-color: rgb(255,255,255);
}

.content-soup dl.text-brand dt,
.content-soup dl.text-www dt{
	padding-left: 12px;

}
.content-soup dl.text-www dt,
.content-soup dl.text-www dd,
.content-soup dl.text-brand dt,
.content-soup dl.text-brand dd{
	color: rgb(144,144,144);
}

.content-soup dl.text-www ul.dscrpt{
	padding-left:16px;
}
.content-soup dl.www-concept ul.dscrpt-grey1,
.content-soup dl.www-concept ul.dscrpt-grey2,
.content-soup dl.www-concept ul.dscrpt-grey3{
	margin:12% 12% 0 12%;
	padding:0px;
    list-style: none;
    font-size: 10px;
}

.content-soup dl.www-concept ul.dscrpt-grey2{
	margin:34% 12% 0 12%;
}
.content-soup dl.www-concept ul.dscrpt-grey3{
	margin:14% 12% 0 12%;
}
.content-soup dl.www-concept ul.dscrpt-grey3 li{
	color:rgb(144,144,144);
	padding-bottom:20%;
}

.content-soup dl.www-concept ul.dscrpt-grey1 li,
.content-soup dl.www-concept ul.dscrpt-grey2 li{
	color:rgb(144,144,144);
	padding-bottom:10px;
}
.content-soup dl.text-brand{
    background-color: rgb(255,255,255);
    padding-bottom: 40px;
    margin-top: -16px;
    padding-top: 40px;
}

.content-soup ul.dscrpt{
    background-color: rgb(255,255,255);

    margin-bottom: 0px;
    padding-bottom: 16px;

}

.content-soup dl.www-concept dd ul.dscrpt{
	background-color: transparent;
}

.content-soup ul.dscrpt li,
.content-soup dl.www-concept ul.dscrpt li{
	color: rgb(109,196,105);
	font-style: italic;
	text-align: left;
	list-style: none;
	font-size:12px;
}

.content-soup button {
	background-color: rgba(255,255,255,0.5);
	border-color: rgb(144,144,144);
	color:rgba(144,144,144,1);
}

.content-soup button:active{
	background-color: rgba(255,255,255,1);
	border-color: rgb(44,44,44);
	color:rgba(44,44,44,1);
}
.content-soup button:hover,
.content-soup button:focus{
	background-color: rgba(109,196,105,1);
	border-color: rgb(109,196,105);
	color:rgba(255,255,255,1);
}

.content-soup dl.prolog{
	display:inline-block;
}

/*----------bakisit----------*/
.content-bakisit img.img-responsive{
    margin-bottom: -15px;
    margin-top: -15px;
}
.content-bakisit {
	background-color:rgba(255,255,255,0.95);
}

.content-bakisit span.title-heading{
	padding:0px;
	margin:0px;
}
.content-bakisit span.title-heading h2,
.content-bakisit span.title-heading2 h2{
	color:rgb(42,42,42);
	background-color: rgb(255,255,255);
	margin: 0px;
	text-align:left;

}

.content-bakisit span.title-heading h2{
	padding: 40px 0 30px 15px;

}

.content-bakisit span.title-heading2 h2{
	padding: 40px 0 0px 40px;
	display: block;
	margin-bottom:15px;

}

.content-bakisit span.pro-head-soup h2,
.content-bakisit dt,
.content-bakisit dd{
	color:rgb(44,44,44);
}


.content-bakisit dt,
.content-bakisit dd{
	font-size:12px;
}
.content-bakisit dl.app-concept{
    /*--position: absolute;--*/
    background-color:rgba(255,255,255,0.95);
    margin-left: 0px;	

}

.content-bakisit span.pro-head-soup td{
	background-color:rgba(44,44,44,0.65);

}


.content-bakisit dl.text-www{
	padding-bottom:40px;
	background-color: rgb(255,255,255);
}

.content-bakisit dl.text-brand dt,
.content-bakisit dl.text-www dt{
	padding-left: 12px;

}
.content-bakisit dl.text-www dd,
.content-bakisit dl.text-brand dt,
.content-bakisit dl.text-brand dd{
	color: rgb(144,144,144);
}

.content-bakisit dl.text-www ul.dscrpt{
	padding-left:16px;
}

.content-bakisit dl.app-concept dd.dscrpt-grey1 ul,
.content-bakisit dl.app-concept dd.dscrpt-grey2 ul,
.content-bakisit dl.app-concept dd.dscrpt-grey3 ul,
.content-bakisit dl.app-concept dd.dscrpt-grey4 ul,
.content-bakisit dl.app-concept dd.dscrpt-grey5 ul,
.content-bakisit dl.app-concept dd.dscrpt-grey6 ul{
	padding:0px;
    list-style: none;
    font-size: 10px;
}

.content-bakisit dl.app-concept dd.dscrpt-grey1 ul li,
.content-bakisit dl.app-concept dd.dscrpt-grey2 ul li,
.content-bakisit dl.app-concept dd.dscrpt-grey3 ul li,
.content-bakisit dl.app-concept dd.dscrpt-grey4 ul li,
.content-bakisit dl.app-concept dd.dscrpt-grey5 ul li,
.content-bakisit dl.app-concept dd.dscrpt-grey6 ul li{
	color:rgb(144,144,144);
	
}

.content-bakisit dl.text-brand{
    background-color: rgb(255,255,255);
    padding-bottom: 40px;
    margin-top: -16px;
    padding-top: 40px;
}

.content-bakisit ul.dscrpt{
    background-color: rgb(255,255,255);
    
    margin-bottom: 0px;
    padding-bottom: 46px;

}

.content-bakisit dl.app-concept dd ul.dscrpt{
	background-color: transparent;
}

.content-bakisit ul.dscrpt li,
.content-bakisit dl.app-concept ul.dscrpt li{
	color: rgb(75,190,190);
	font-style: italic;
	text-align: left;
	list-style: none;
	font-size:12px;
}

.content-bakisit button {
	background-color: rgba(255,255,255,0.5);
	border-color: rgb(144,144,144);
	color:rgba(144,144,144,1);
}

.content-bakisit button:active{
	background-color: rgba(255,255,255,1);
	border-color: rgb(44,44,44);
	color:rgba(44,44,44,1);
}
.content-bakisit button:hover,
.content-bakisit button:focus{
	background-color: rgba(109,196,105,1);
	border-color: rgb(109,196,105);
	color:rgba(255,255,255,1);
}

.content-bakisit dl.prolog{
	display:inline-block;
}

/*----------miamed----------*/

.content-miamed {
	background-color:rgba(49,199,243,0.95);
}
.content-miamed button:hover,
.content-miamed button:focus{
	background-color: rgba(255,255,255,1);
	border-color: rgb(255,255,255);
	color:rgba(11,187,239,1);
}

.content-miamed button.btn-primary:active{
	background-color: rgba(255,255,255,1);
	border-color: rgb(255,255,255);
	color:rgba(11,187,239,1);
}
.content-miamed .modal-body dl{
		display: block;
}

.content-miamed .modal-body dl.text-inner{
	font-size: 12px;
	background-color: rgb(228,242,245);
	width:94.4%;
	margin-left:2.8%;
}
.content-miamed .modal-body dl.text-inner dt,
.content-miamed .modal-body dl.text-inner dd{
	color: rgba(0,0,0,0.6);
	text-align: left;
}
.content-miamed .modal-body dl.text-inner dt{
	padding-left:2%;
	margin-top:0px;
}
.content-miamed .modal-body dl.text-inner dd{
	padding-bottom: 30px;
}
.content-miamed .modal-body dl ul {
	margin-bottom:0px;
}
.content-miamed .modal-body dl ul li{
	list-style: none;
}

.content-miamed .modal-body dl.prolog{
	padding:40px 20px;
}

.content-miamed .modal-body p.portfolio-footer a,
.content-miamed .modal-body p a {
 color: rgba(255,255,255,0.4);
}

/*----------realsmile----------*/

.content-rs button{
	border-color:rgb(7,190,214);
	color:rgb(7,190,214);
}
.content-rs button:hover,
.content-rs button:focus{
	background-color: rgba(242,217,73,1);
	border-color: rgb(242,217,73);
	color:rgba(255,255,255,1);
}

.content-rs button.btn-primary:active{
	background-color: rgba(242,217,73,1);
	border-color: rgb(242,217,73);
	color:rgba(255,255,255,1);
}

.content-rs span.pro-head-rs {
	background-color:rgba(7,190,214,1);
	display: inline-block;
    /* padding: 0px 10px 0px 12px; */
    margin: 0px 1px 0px 3px;
    position: relative;
    min-width: 91.5%;
    top: 42px;
}
.content-rs {
	background-color:rgba(204,251,254,1);
}
.content-rs .modal-body dl.prolog dt,
.content-rs .modal-body dl.prolog dd{
	color:rgb(45,146,170);
}

.content-rs span.rs-intro p.description{
    margin: 0px 14px;
    font-size: 15px;
    min-width: 91.3%;
    background-color: rgba(7,190,214,1);
    padding: 4%;
    position: relative;
    background-image: url(../img/portfolio/rs/pro_rs_view_part_bg_yellow-corner.png);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 110%;
}
.content-rs span.rs-intro p.description small{
	display:block;
}
.content-rs h2{
	color:rgb(255,255,255);
}
.content-rs .modal-body a{
	color:rgb(238,199,17);
}
.content-rs .modal-body p{
	color:rgb(45,146,170);
}
.content-rs .modal-body span.rs-intro p.rs-subtext,
.content-rs .modal-body span.rs-android p.rs-subtext,
.content-rs .modal-body span.rs-app p.rs-subtext,
.content-rs .modal-body span.rs-shop p.rs-subtext {
	margin-top:-4%;
	margin-left:8%;
}

.content-rs .modal-body span.rs-app{
	display: block;
	margin-top:-85px;
}

.content-rs .modal-body p.rs-subtext {
	float:left;
	position: absolute;
	margin-top:52%;
	margin-left: 28px;
	font-size: 190%;
    color: rgba(255,255,255,0.3);
    font-weight: 100;
    background-color: rgba(251,249,246,0);
    text-transform: uppercase;
}
span.rs-shop p.rs-subtext2 {
	font-size: 220%;
    color: rgba(251,225,76,0.8);
    font-weight: 200;
	text-transform: uppercase;
	background-color: rgba(7,190,214,1);
	margin: 0 4%;
	padding:6% 30%; 


}
p.rs-subtext small,
span.rs-shop p.rs-subtext2 small{
	font-size: 50%;
	margin-top: -8px;
    margin-left: -52px;
    position: absolute;
}
.rs-gifs,
.rs-gifs p{
	min-height: 340px;
}

span.gif-rs-edit-bg{
	background-image: url(../img/portfolio/rs/pro_rs_view_part_ui_IV.png);
	background-repeat: no-repeat;
	background-position: top center;
	display: block;
    background-size: 100%;
    padding-top: 4.5%;
}

.rs-gifs p.rs-gif-edit{
    background-image: url(../img/portfolio/rs/realsmile_profile-edit.gif);
	background-repeat: no-repeat;
	background-position: 50% 30%;
    background-size: 25.6%;
    margin: 0;
}


/* ---------------- Project links forward/back ------------------ */

.back-link{
	border: 1px solid rgb(255,255,255);
    padding: 40px;
    width: 224px;
    top: -220px;
    color: rgb(180,180,180);
}

.back-link h4{
	left:-32px;
	position:absolute;
}
.content-rs .back-link p{
    margin: 20px -36px;
}


.content-rs .back-bg span.content-img{
	background-image: url(../img/portfolio/miamed/pro_miamed_oview.jpg);
	background-size:80%;
	background-position: center;
    background-repeat: no-repeat;
    display: block;
    min-height: 300px;

}

/* ---------------- END(Project links)------------------ */


/*----------wonderball----------*/
.content-wwb {
	background-color: rgba(76,27,51,1);
}
.content-wwb span.wwb-gifs p,
.content-wwb span.wwb-icons p{
	margin:0px;
	display: block;
}
.content-wwb button:hover,
.content-wwb button:focus{
	background-color: rgba(229,199,75,1);
	border-color: rgb(229,199,75);
	color:rgba(54,16,30,1);
}

.content-wwb button.btn-primary:active{
	background-color: rgba(229,199,75,1);
	border-color: rgb(229,199,75);
	color:rgba(54,16,30,1);
}

.content-wwb span.pro-head-wwb {
	background-color: rgba(76,27,51,0.95);
	display: inline-block;
    /* padding: 0px 10px 0px 12px; */
    margin: 0px 2px 0px 4px;
    position: relative;
    min-width: 100%;
    top: 0px;
}


.wwb-icons dl.wwb-list{
	left:12%;

	margin-top:14%;
}
.wwb-icons dt.wwb-list-share{
	padding-top:70%;
}

.wwb-gifs dl.wwb-list{
	display:inline-block;
	margin-top:16%;
	z-index:1;
	left: 84%
}

.wwb-list{
	position: absolute;
    left: 54%;
    text-align: left;
}

.wwb-list dd{
opacity: 0.4;
}

.wwb-gifs,
.wwb-icons{
	width: auto;
	display:block;
	font-size: 60%;
}


.wwb-gifs img{
	display:block;
}

.wwb-gifs p,
.wwb-gifs h2,
.wwb-icons h2{
	background-color:rgb(29,32,41);
}

span.wwb-gifs a.click img{
    height: 460px;
}

span.gif-wwb-bg{
	background-image: url(../img/portfolio/wwb/pro_wwb_view_part_icon set.png);
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
    background-size: 100%;

}

span.wwb-gif-bg-hands p{
	display:block;
	min-height: 360px;
}

.wwb-gif-bg-hands p.wwb-hand-gif{
    background-image: url(../img/portfolio/wwb/00_hstyles.gif);
	background-repeat: no-repeat;
	background-position: 52% 112%;
    background-size: 110%;
    height: 280px;
	background-color: rgb(29,32,41);

}

.portfolio-modal .modal-content .wwb-gifs h2,
.portfolio-modal .modal-content .wwb-icons h2{
	margin:0px;
	padding:40px;
}

span.wwb-www{
	background-image: url(../img/portfolio/wwb/pro_wwb_www.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	display: block;
    background-size: 100%;
    background-color: rgba(45,16,30,1);
    min-height: 370px;
    padding: 9% 0px;
}
.portfolio-modal .modal-content span.wwb-www h2{
	margin-bottom: 30px;
	margin-top:0px;
}

.wwb-www p.wwb-www-gif{
    background-image: url(../img/portfolio/wwb/wwb_lp_animation.gif);
	background-repeat: no-repeat;
	background-position: 50.3% 25%;
    background-size: 48.8%;
    height: 280px;
    margin-bottom: 50px;
    background-color: rgba(29,32,41,0);
}



/*----------zoobe----------*/
.content-zoobe {
	background-color:rgba(193,185,128,0.95);
}

.content-zoobe button:hover,
.content-zoobe button:focus{
	background-color: rgba(213,57,68,1);
	border-color: rgb(213,57,68);
	color:rgba(207,201,141,1);
}

.content-zoobe button.btn-primary:active{
	background-color: rgba(213,57,68,1);
	border-color: rgb(213,57,68);
	color:rgba(207,201,141,1);
}

div.zoobe-before-after {
	display: inline-block;
	width:100%;
	background-color: rgba(207,201,141,1);
	padding:10px;
}

.zoobe-description{
	text-align: left;
	padding-left:13%;
	display: inline-block;
}
.zoobe-gif {
	width:100%;
	background-color: rgba(207,201,141,1);
}
.content-zoobe span.sprite {
	background-color: rgba(207,201,141,1);
	display: block;
	background: url(../img/portfolio/zoobe/pro_zoobe_view_part_footer.png) center center;
	background-repeat: no-repeat;
	background-size: 86%;
	height: 350px;
	padding-top:28px;

}

.content-zoobe p.tyranni-sprite{
	width: 114px;
    height: 286px;
    margin: 0% auto;
    background: url(../img/portfolio/zoobe/tyranni_happy_sprite.png) left center;
    background-repeat: no-repeat;
}

.content-zoobe p.tyranni-sprite:hover{

	animation: play .8s steps(6);
  	animation-iteration-count:24;
}

@keyframes play {
    100% { background-position: -685px; }
}
.content-zoobe p.portfolio-footer a{
	color:rgb(255,255,255);
}
/*----Draggable Content Img Slider---*/
#zoobe-alfa {

background-image: url(../img/portfolio/zoobe/zoobe-after.png); 
background-size: contain;
background-repeat: no-repeat;
width: 360px; height: 300px; 
padding: 0; 
margin-top:38px;
position: relative; 
border-width: 0 20px; 
border-color: rgba(0,0,0,0); 
border-style: none groove none ridge; 

}

#zoobe-bravo {
background-image: url(../img/portfolio/zoobe/zoobe-before.png); 
background-size:360px;
height: 240px; 
border-width: 0 20px 0 0; 
border-color: rgba(193,185,128,0.7);
border-style: solid; 
resize: horizontal; 
position: absolute; 
top: 0; left: 0; 
min-width: 0; max-width: 360px; 
-ms-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box; 
}
#zoobe-bravo:before {
content: '< >'; 
font-size: 11px; 
color: white; 
top: 50%; right: -19px; 
position: absolute; 
}

.zoobe-charly{  
resize: horizontal; 
opacity: .01; 
position: relative; 
top: 48%; left: -20px; 
margin-right: -50px; 
border: 2px solid transparent; 
width: 40px; height: 26px; 
max-width: 360px; min-width: 40px; 

outline: 0 solid transparent; 
cursor: ew-resize; 

-webkit-animation-name: delta;
animation-name: delta;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1; 
-webkit-animation-direction: normal; 
animation-direction: normal; 
-webkit-animation-timing-function: ease-in-out; 
animation-timing-function: ease-in-out; 
-webkit-animation-delay: 3s; 
animation-delay: 3s; 
*/
-webkit-animation: delta 5s 1 normal ease-in-out 3s; 
animation: delta 5s 1 normal ease-in-out 3s; 
}
@keyframes delta {
  0% {width: 40px; }
  50% {width: 300px; }
  100% {width: 40px; }
}
@-webkit-keyframes delta {
  0% {width: 40px; }
  50% {width: 300px; }
  100% {width: 40px; }
}
/*---*/
.content-zoobe h2,
.content-ma h2,
.content-ma .modal-body a{
	color:rgb(213,57,68);
}
/*----------kisg----------*/
.content-kisg {
	background-color:rgba(74,74,74,0.95);
}

.content-kisg h2,
.content-kisg .modal-body a{
	color:rgb(55,203,238);
}
.content-kisg button:hover,
.content-kisg button:focus{
	background-color: rgb(55,167,223);
	border-color: rgb(55,167,223);
	color:rgba(68,68,68,1);
}

.content-kisg button.btn-primary:active{
	background-color: rgb(55,167,223);
	border-color: rgb(55,167,223);
	color:rgba(68,68,68,1);
}
/*----------musik akademie----------*/
.content-ma {
	background-color:rgba(215,197,216,0.95);
}
.content-ma button:hover,
.content-ma button:focus{
	background-color: rgb(154,34,89);
	border-color: rgb(154,34,89);
	color:rgba(255,255,255,1);
}

.content-ma button.btn-primary:active{
	background-color: rgb(154,34,89);
	border-color: rgb(154,34,89);
	color:rgba(255,255,255,1);
}

/*----------tav----------*/
.content-tav {
	background-color:rgba(153,202,202,0.95);
}

.content-tav button:hover,
.content-tav button:focus{
	background-color: rgb(211,80,28);
	border-color: rgb(211,80,28);
	color:rgba(255,255,255,1);
}

.content-tav button.btn-primary:active{
	background-color: rgb(211,80,28);
	border-color: rgb(211,80,28);
	color:rgba(255,255,255,1);
}
.content-tav h2,
.content-tav .modal-body a{
	color:rgb(18,111,181);
}

.content-tav small{
	font-size:10px;
	color:rgb(36,36,36);
}
/*----------rhg----------*/
.content-rhg {
	background-color:rgba(238,224,204,0.95);
}

.content-rhg button:hover,
.content-rhg button:focus{
	background-color: rgb(255,170,19);
	border-color: rgb(255,170,19);
	color:rgba(255,255,255,1);
}

.content-rhg button.btn-primary:active{
	background-color: rgb(255,170,19);
	border-color: rgb(255,170,19);
	color:rgba(255,255,255,1);
}
.content-rhg h2,
.content-rhg .modal-body a{
	color:rgb(255,170,19);
}
.content-rhg .modal-body p{
	color:rgb(29,29,29);
}

.content-rhg .modal-body dd, 
.content-rhg .modal-body dt {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    line-height: 1.8;
    color: rgb(29,29,29);
}

/*----------jfritz----------*/
.content-jfritz {
	background-color:rgba(240,240,240,0.95);
}

.content-jfritz h2,
.content-jfritz .modal-body a{
	color:rgb(36,36,36);
}
.content-jfritz p{
	color:rgb(36,36,36);
}

.content-jfritz button{
	border-color: rgba(0,0,0,0.95);
	color:rgba(0,0,0,0.95);
}

.content-jfritz button:hover,
.content-jfritz button:focus{
	background-color: rgba(0,0,0,1);
	border-color: rgb(0,0,0);
	color:rgba(255,255,255,1);
}

.content-jfritz button.btn-primary:active{
	background-color: rgba(0,0,0,1);
	border-color: rgb(0,0,0);
	color:rgba(255,255,255,1);
}
div.content-jfritz dl.prolog dt,
div.content-jfritz dl.prolog dd,
div.content-jfritz p strong,
p.portfolio-footer span{
	color:rgb(0,0,0);
}

/*----------keramik hotel----------*/
.content-keramik {
	background-color:rgba(224,251,254,0.95);
}
.content-keramik button{
	border-color: rgba(63,199,227,0.95);
	color:rgba(63,199,227,0.95);
}

.content-keramik button:hover,
.content-keramik button:focus{
	background-color: rgba(63,199,227,1);
	border-color: rgb(63,199,227);
	color:rgba(255,255,255,1);
}

.content-keramik button.btn-primary:active{
	background-color: rgba(63,199,227,1);
	border-color: rgb(63,199,227);
	color:rgba(255,255,255,1);
}

.content-keramik h2,
.content-keramik .modal-body a{
	color:rgb(36,36,36);
}
.content-keramik .modal-body p{
	color:rgb(36,36,36);
}
.content-keramik dl.prolog dt,
.content-keramik dl.prolog dd{
	color:rgb(0,0,0);
}

.portfolio-modal .modal-content span.keramik-intro p.keramik-subtext {

	position: absolute;
	margin-top:14%;
	margin-left:3%;
	font-size: 280%;
    color: rgba(255,255,255,0.4);
    font-weight: 100;
    text-transform: uppercase;
   /* background-color: rgba(251,249,246,0);
    -webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);*/	
}
.portfolio-modal .modal-content dl.keramik-description{
	position: absolute;
    text-align: left;
    padding-left: 3%;
    top: 16.7%;
    display: block;
}
/*----------zvnder----------*/
.content-zvnder span.pro-head-zvnder {
	background-color:rgba(251,249,246,0);
	display: inline-block;
    /* padding: 0px 10px 0px 12px; 
    margin: 0px 2px 0px 4px;*/
    position: relative;
    min-width: 100%;
    top: 32px;
}
.content-zvnder {
	background-color:rgba(251,249,246,0.95);
}
.content-zvnder button{
	border-color: rgba(236,205,155,0.95);
	color:rgba(236,205,155,0.95);
}

.content-zvnder button:hover,
.content-zvnder button:focus{
	background-color: rgba(236,205,155,1);
	border-color: rgb(236,205,155);
	color:rgba(255,255,255,1);
}

.content-zvnder button.btn-primary:active{
	background-color: rgba(236,205,155,1);
	border-color: rgb(236,205,155);
	color:rgba(255,255,255,1);
}

.content-zvnder h2,
.content-zvnder .modal-body a{
	color:rgb(220,162,67);
}
.content-zvnder .modal-body p,
.content-zvnder .modal-body small{
	color:rgb(180,180,180);
	font-family:'Lato';
	font-style: normal;
}
.content-zvnder dl.prolog dt,
.content-zvnder dl.prolog dd{
	color:rgb(0,0,0);
}

.portfolio-modal .modal-content span.zvnder-intro p.zvnder-subtext {
	float:left;
	position: absolute;
	margin-top:24%;
	font-size: 280%;
    color: rgba(236,205,155,1);
    font-weight: 100;
    background-color: rgba(251,249,246,0);
    -webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);	
}
.portfolio-modal .modal-content span.zvnder-description p.zvnder-subtext2 {
	float:left;
	position: absolute;
	margin-top:6%;
	margin-left:2%;
	font-size: 280%;
    color: rgba(236,205,155,1);
    font-weight: 100;
    background-color: rgba(251,249,246,0);
    -webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);	
}
.portfolio-modal .modal-content span.zvnder-design-language p.zvnder-subtext {
	float:left;
	left:-2%;
	position: absolute;
	margin-top:16%;
	font-size: 280%;
    color: rgba(236,205,155,1);
    font-weight: 100;
    background-color: rgba(251,249,246,0);
    -webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);	
}

.portfolio-modal .modal-content span p.zvnder-img-label{
	color:rgb(36,48,68);
	padding-right: 3%;
	text-align: right;
	background-color:rgba(251,249,246,0.95); 
}


.portfolio-modal .modal-content span.dl p.zvnder-img-label{
	color:rgb(36,48,68);
	background-color:rgba(251,249,246,0);

	padding-right: 3%;
	padding-left:50%;
	position: absolute;

}
.portfolio-modal .modal-content dl.zvnder-description{
	position: absolute;
    text-align: left;
    padding-left: 3%;
    top: 20.7%;
    display: block;
}
.portfolio-modal .modal-content span.zvnder-collection dl.zvnder-description {
	position: absolute;
    text-align: left;
    padding-left: 3%;
    top: 52.4%;
    display: block;
}

.portfolio-modal .modal-content dl.zvnder-description dt,
.portfolio-modal .modal-content dl.zvnder-description dd{
	color:rgb(36,48,68);
}
.portfolio-modal .modal-content dl.zvnder-description dt{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 400;
	font-size: 12px;
}
.portfolio-modal .modal-content dl.zvnder-description dd{
	font-size: 12px;

}

div.content-zvnder dl.prolog dt,
div.content-zvnder dl.prolog dd,
.portfolio-modal .modal-content div.content-zvnder p,
div.content-zvnder p strong,
p.portfolio-footer span{
	color:rgb(0,0,0);
}

div.content-zvnder p a{
	color: rgba(236,205,155,1);
}

/*----------jansen----------*/
.content-jansen {
	background-color:rgba(255,255,255,0.95);
}
.content-jansen h2,
.content-jansen .modal-body a{
	color:rgb(30,50,66);
}

.content-jansen dl.prolog dt,
.content-jansen dl.prolog dd{
	color:rgb(90,90,90);
}

.content-jansen button{
	background-color: rgba(251,51,61,0);
	border-color: rgb(30,50,66);
	color:rgba(30,50,66,1);
}
.content-jansen button:hover,
.content-jansen button:focus{
	background-color: rgb(30,50,66);
	border-color: rgb(30,50,66);
	color:rgba(255,255,255,1);
}

.content-jansen button.btn-primary:active{
	background-color: rgb(30,50,66);
	border-color: rgb(30,50,66);
	color:rgba(255,255,255,1);
}

.portfolio-modal .modal-content span.jansen-intro p.jansen-subtext,
.portfolio-modal .modal-content span.jansen-intro p.jansen-subtext2 {
	float:left;
	position: absolute;
	margin-top:38%;
	margin-left:-9%;
	font-size: 280%;
    color: rgba(205,205,205,1);
    font-weight: 100;
    background-color: rgba(251,249,246,0);
    -webkit-transform: rotate(-90deg); 
	-moz-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);	
}

.portfolio-modal .modal-content span.jansen-intro p.jansen-subtext2 {
	margin-top:18%;
	margin-left:-9%;

}

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

.imprint-contact h3.section-heading,
.imprint-contact p{
	color:rgb(119,119,119);
}

.info{
	font-size:11px;
}

.imprint-source{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	border-top: 1px double rgba(119,119,119,0.3);
	border-width:medium;
	padding:15px 0px;
	margin-left:15px;
	margin-right:15px;
}

.about-me-parenthesis{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	border-top: none;
	border-width:medium;
	padding-bottom:15px;
	margin-left:15px;
	margin-right:15px;
	margin-top:20px;
}


::-moz-selection {
	text-shadow: none;
	background: #fed136;
}

::selection {
	text-shadow: none;
	background: rgba(23,183,132,0.6);
}

img::selection {
	background: 0 0;
}

img::-moz-selection {
	background: 0 0;
}

body {
	webkit-tap-highlight-color: #fed136;
}


/* -------------------------------------
 * Bar container
 * ------------------------------------- */
.progress{
	margin-bottom: 15px;
	float:right;
	border-radius: 0px;
	width: 100%;
	background-color:#f2f2f2;
	-webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,.1);
	box-shadow: inset 0 0px 0px rgba(0,0,0,.1);
	
}
.progress-circle{
	
	margin-bottom:30px;
	
}

.progress-bar{
	background-color: rgb(23,183,132);
	padding-left: 10px;
	text-align: left;
	color:#ffffff;
	text-transform:uppercase;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
.progress-radial {
	margin-left:auto;
	margin-right:auto;      
	margin-bottom:10px;
	position: relative;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 4px solid #fff;
	background-color: rgb(233, 59, 31);
}

/* -------------------------------------
 * Optional centered circle w/text
 * ------------------------------------- */
.progress-radial .overlay {
	position: absolute;
	width: 74px;
	height: 74px;
	background-color: #fff;
	border-radius: 50%;
	margin-left: -37px;
	margin-top: 9px;
	text-align: center;
	line-height: 60px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 12px;

}

.progress-radial .overlay p{
	float:right;
	line-height: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	/* display: inline-block; */
	color: #aaa;
	margin-top: -16px;
	font-size: 12px;
  }
  .progress-radial .overlay p.radial-subline{
  	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  	font-size: 12px;
  	color: #000;
}

 .progress-radial .overlay p.radial-oneline{
 	margin-top: 35px;
 	color: #000;
 }
/* -------------------------------------
 * Mixin for progress-% class
 * ------------------------------------- */
.progress-0 {
  background-image: linear-gradient(90deg, #e2e2e2 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(90deg, #17b784 50%, #f7f7f7 50%, #f7f7f7);
}

.progress-5 {
  background-image: linear-gradient(90deg, #e2e2e2 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(108deg, #17b784 50%, #f7f7f7 50%, #f7f7f7);
}

.progress-10 {
  background-image: linear-gradient(90deg, #e2e2e2 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(126deg, #17b784 50%, #f7f7f7 50%, #f7f7f7);
}

.progress-15 {
  background-image: linear-gradient(90deg, #e2e2e2 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(144deg, #17b784 50%, #f7f7f7 50%, #f7f7f7);
}

.progress-20 {
  background-image: linear-gradient(90deg, #e2e2e2 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(162deg, #17b784 50%, #f7f7f7 50%, #f7f7f7);
}

.progress-25 {
  background-image: linear-gradient(90deg, #e2e2e2 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(180deg, #17b784 50%, #f7f7f7 50%, #f7f7f7);
}

.progress-30 {
  background-image: linear-gradient(90deg, #e2e2e2 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(198deg, #17b784 50%, #f7f7f7 50%, #f7f7f7);
}

.progress-35 {
  background-image: linear-gradient(90deg, #e2e2e2 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(216deg, #17b784 50%, #f7f7f7 50%, #f7f7f7);
}

.progress-40 {
  background-image: linear-gradient(90deg, #e2e2e2 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(234deg, #17b784 50%, #f7f7f7 50%, #f7f7f7);
}

.progress-45 {
  background-image: linear-gradient(90deg, #e2e2e2 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(252deg, #17b784 50%, #e2e2e2 50%, #e2e2e2);
}

.progress-50 {
  background-image: linear-gradient(-90deg, #17b784 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #17b784 50%, #e2e2e2 50%, #e2e2e2);
}

.progress-55 {
  background-image: linear-gradient(-72deg, #17b784 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #17b784 50%, #e2e2e2 50%, #e2e2e2);
}

.progress-60 {
  background-image: linear-gradient(-54deg, #17b784 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #17b784 50%, #e2e2e2 50%, #e2e2e2);
}

.progress-65 {
  background-image: linear-gradient(-36deg, #17b784 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #17b784 50%, #e2e2e2 50%, #e2e2e2);
}

.progress-70 {
  background-image: linear-gradient(-18deg, #17b784 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #17b784 50%, #e2e2e2 50%, #e2e2e2);
}

.progress-75 {
  background-image: linear-gradient(0deg, #17b784 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #17b784 50%, #e2e2e2 50%, #e2e2e2);
}

.progress-80 {
  background-image: linear-gradient(18deg, #17b784 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #17b784 50%, #e2e2e2 50%, #e2e2e2);
}

.progress-85 {
  background-image: linear-gradient(36deg, #17b784 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #17b784 50%, #e2e2e2 50%, #e2e2e2);
}

.progress-90 {
  background-image: linear-gradient(54deg, #17b784 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #17b784 50%,  #e2e2e2 50%, #e2e2e2);
}

.progress-95 {
  background-image: linear-gradient(72deg, #17b784 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #17b784 50%,  #e2e2e2 50%, #e2e2e2);
}

.progress-100 {
  background-image: linear-gradient(90deg, #17b784 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, #17b784 50%,  #e2e2e2 50%, #e2e2e2);
}

/* -- 
*illustration gallery 
* ------------------------------------- */

#illu div.text-muted dt,
#illu div.text-muted dd{
	color:rgb(90,90,90);
	margin-top: 4%;
}

.container.gallery-container {
    background-color: #fff;
    color: #35373a;
    min-height: 100vh;
    padding: 30px 50px;
}

.gallery-container h1 {
    text-align: center;
    margin-top: 50px;
    font-family: 'Droid Sans', sans-serif;
    font-weight: bold;
}

.gallery-container p.page-description {
    text-align: center;
    margin: 25px auto;
    font-size: 18px;
    color: #999;
}

.tz-gallery {
    padding: 40px;
}

/* Override bootstrap column paddings */
.tz-gallery .row > div {
    padding: 2px;
}

.tz-gallery .lightbox img {
    width: 100%;
    border-radius: 0;
    position: relative;
}

.tz-gallery .lightbox:before {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -13px;
    opacity: 0;
    color: #fff;
    font-size: 26px;
    font-family: 'Glyphicons Halflings';
    content: '\e003';
    pointer-events: none;
    z-index: 9000;
    transition: 0.4s;
}


.tz-gallery .lightbox:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background-color: rgba(23,183,132,0.6);
    content: '';
    transition: 0.4s;
}

.tz-gallery .lightbox:hover:after,
.tz-gallery .lightbox:hover:before {
    opacity: 1;
}

.baguetteBox-button {
    background-color: transparent !important;
}

/* -- 
*Colored Frame 
* ------------------------------------- */
.Frame {
    position: fixed;
    top: 25px;
    left: 25px;
    right: 25px;
    bottom: 25px;
    z-index: 100;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    pointer-events: none;
    border: 7px solid #f04e59;
    -webkit-transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: all 300ms cubic-bezier(0.77, 0, 0.175, 1);
}