/*
------------------------------------------------------------------------------
RESPONSIVE
------------------------------------------------------------------------------
*/


@media only screen and (max-width: 767px) {


	/*
	------------------------------------------------------------------------------
	FONTS
	------------------------------------------------------------------------------
	*/

	.jobomat-box h1
	{
		font-size: 36px;
		line-height: 40px;
	}
	.jobomat-box h2
	{
		display: block;
		letter-spacing: 1px;
	}

	.content-element-job-o-mat footer .result a,
	.content-element-job-o-mat header p,
	.content-element-job-o-mat .content .tooltipp p,
	.content-element-job-o-mat .content .result-tv.overlay h2,
	.content-element-job-o-mat .content .result-tv.overlay a.submit p,
	.content-element-job-o-mat footer .mobile-filter nav a
	{
		font-family:"Brandon Grot W01 Medium";

		font-size: 16px;
		line-height: 20px;
	}

	.content-element-job-o-mat .content .layer-television .display-television .result-tv nav > a
	{
		font-family:"Brandon Grot W01 Medium";
		font-size: 18px;
		line-height: 18px;

		text-transform: uppercase;
		color: #fff;
		text-align: center;
	}

	.content-element-job-o-mat footer .result > h2,
	.content-element-job-o-mat footer .mobile-filter nav p,
	.content-element-job-o-mat footer .mobile-filter h2
	{
		font-family:"Brandon Grot W01 Medium";
		font-size: 12px;
		line-height: 15px;

		text-transform: uppercase;
		color: #fff;
		text-align: center;
	}

	.content-element-job-o-mat .content .layer-television .display-television .result-tv nav > a {
		font-size: 9px;
		line-height: 1.2em;
	}

	.content-element-job-o-mat .content .result-tv.overlay nav > a
	{
		font-family:"Brandon Grot W01 Medium";
		font-size: 10px;
		line-height: 19px;

		text-transform: uppercase;
		color: #fff;
		text-decoration: none !important;
		letter-spacing: 0.5px;
	}

	.content-element-job-o-mat .content .layer-television .display-television .result-tv a:before {
		display: none;
	}


	/*
	------------------------------------------------------------------------------
	CONTENT-ELEMENT-JOB-O-MATs
	------------------------------------------------------------------------------
	*/

	.content-element-job-o-mat
	{
		height: auto;
		padding: 0;
		width: 100%;
	}


	/*HEADER*/

	.content-element-job-o-mat header
	{
		height: auto;
	}
	.content-element-job-o-mat header h1
	{
		margin-top: 20px !important;
		margin-bottom: 20px !important;
	}

	.content-element-job-o-mat  header nav a
	{
		display: block;
		position: relative;
	}

	.content-element-job-o-mat header nav a.left
	{
		width:300px;
		height:50px;

		margin: 40px auto 30px;

		top:0px;
		left:0px;

		background: url("../image/bubble-left-mobile.cd398d51c276.png");
	}
	.content-element-job-o-mat header nav a.middle
	{
		width:300px;
		height:55px;

		margin: 30px auto;

		top:0px;
		left:0px;

		background: url("../image/bubble-middle-mobile.629326d1edae.png");
	}
	.content-element-job-o-mat header nav a.right
	{
		width:300px;
		height:50px;

		margin: 30px auto;

		top:0px;
		right:0px;

		background: url("../image/bubble-right-mobile.8d34e364c771.png");
	}

	.content-element-job-o-mat header nav a p
	{
		top: 18px;
		left: 0px !important;
	}
	.content-element-job-o-mat header nav a.left p
	{
		width: inherit;
        top: 18px;
	}
	.content-element-job-o-mat header nav a.middle p
	{
		width: inherit;
	}
	.content-element-job-o-mat header nav a.right p
	{
		width: inherit;
	}



	/*CONTENT*/


	.content-element-job-o-mat .content
	{
		position: relative;

		width: 300px;
		height: 330px;

		z-index: 20;
		margin: 20px auto 0;
	}

	.content-element-job-o-mat .content .layer-backgorund
	{
		width:238px;
		height:340px;

		left: 90px;

		background: url("../image/jobomat-layer-background-mobile.fd2f41b61494.png");
		z-index: 2;
	}
	.content-element-job-o-mat .content .layer-pipe
	{
		width:140px;
		height:111px;

		top: 195px;
		left: 0px;

		background: url("../image/jobomat-layer-pipe-mobile.42ff7629370f.png");
		z-index: 2;
	}
	.content-element-job-o-mat .content .layer-steamwheel-big
	{
		width:81px;
		height:81px;

		top: 175px;
		right: 20px;

		background: url("../image/jobomat-layer-steamwheel-big-mobile.327c650cfbf0.png");
		z-index: 4;
	}
	.content-element-job-o-mat .content .layer-steamwheel-small
	{
		width:46px;
		height:46px;

		top: 171px;
		right: 0px;

		background: url("../image/jobomat-layer-steamwheel-small-mobile.aec2aee09847.png");
		z-index: 3;
	}

	.content-element-job-o-mat .content .layer-television
	{
		width:240px;
		height:160px;

		top: 80px;
		left: 50px;

		background: url("../image/jobomat-layer-television-mobile.829c9a0baf1d.png");
		z-index:2;
	}

	.content-element-job-o-mat .content .layer-television .layer-switch
	{
		display: none;
	}
	.content-element-job-o-mat .content .layer-television .layer-switch-2
	{
		display: none;
	}
	.content-element-job-o-mat .content .layer-television .layer-switch-3
	{
		display: none;
	}

	.content-element-job-o-mat .content .layer-television .display-television
	{
		overflow: visible;

		width: 145px;
		height: 100px;

		top: 30px;
		left: 22px;
	}


	.content-element-job-o-mat .content .layer-television .display-television .loading-tv
	{
		position: absolute;
		z-index: 10;
		top: -10px;
		left: 30px;
		display: block;
		margin: 0;
		padding: 0;
	}
	.content-element-job-o-mat .content .layer-television .display-television .loading-tv .mobile
	{
		display: block;
	}
	.content-element-job-o-mat .content .layer-television .display-television .loading-tv .web
	{
		display: none;
	}

	.content-element-job-o-mat .content .layer-television .display-television .result-tv
	{
		width: 140px;
		max-height: 100px;

		margin-top: 0px;

		text-align: center;
		overflow: hidden;
	}
	.content-element-job-o-mat .content .layer-television .display-television .result-tv nav > a
	{
		display: inline-block;
		text-align: center;

		padding:5px 5px;
		margin-bottom: 3px;
		margin-left: 8px;

		background-color:#14afc5;

		height: auto;
	}

	.content-element-job-o-mat .content .layer-television .display-television .loading-tv p
	{
		font-size: 0px;
	}
	.content-element-job-o-mat .content .layer-television .display-television .loading-tv span.icon
	{
		margin: 30px auto 0px;

		width:80px;
		height:55px;

		background:#ff00ff;
	}

	.content-element-job-o-mat .content .button-down
	{
		position: absolute;
		bottom: -20px;
		left: 50%;
		margin-left: -22px;
		opacity: 0;

		z-index: 5;

		display: block;
		width: 45px;
		height:45px;

		background: url("../image/arrow-down.8b3f8e7484b8.png");
	}

	/* Hint */

	.content-element-job-o-mat .content figure.finger-hint.edu {
		display: none;
	}

	.content-element-job-o-mat .content figure.finger-hint.category {
		left: -100px;
		top: 130px;
        visibility: hidden !important;
	}



	/*Overlay*/

	.content-element-job-o-mat .content .result-tv.overlay
	{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;

		display: block;

		position: fixed;
		top: 10px;
		bottom: 10px;
		left: 10px;
		right: 10px;

		z-index: 1032;

		padding: 25px 20px;

		background: #fff;
		border: 2px solid #6D7377;
		visibility: hidden;
	}

	.content-element-job-o-mat .content .result-tv.overlay h2
	{
		margin: 0 auto;

		color: #14afc5;
	}

	.content-element-job-o-mat .content .result-tv.overlay h2.no-results
	{
		display: none;
		margin-top: 1em;
	}

	.content-element-job-o-mat .content .result-tv.overlay nav
	{
		margin-top: 10px;
		text-align: center;
	}
	.content-element-job-o-mat .content .result-tv.overlay nav > a
	{
		display: inline-block;
		text-align: center;

		padding: 4px 10px;
		margin: 3px;
		max-width: 500px;

		background-color:#6d7477;
		transition: background-color 0.1s;
		-webkit-transition: background-color 0.1s;
	}
	.content-element-job-o-mat .content .result-tv.overlay nav > a:hover
	{
		background-color:#14afc5;
	}
	.content-element-job-o-mat .content .result-tv.overlay nav > a.active
	{
		background-color:#14afc5;
	}
	.content-element-job-o-mat .content .result-tv.overlay  a.submit
	{
		display: block;

		margin: 20px auto 0;

		width: 60px;
		height:60px;

		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		-ms-border-radius: 50%;

		background-color: #14afc5;
		text-decoration: none;

		opacity: 1;
		transition: opacity 0.2s;
		-webkit-transition: opacity 0.2s;
	}
	.content-element-job-o-mat .content .result-tv.overlay  a.submit:hover
	{
		opacity: 0.6;
	}

	.content-element-job-o-mat .content .result-tv.overlay  a.submit p
	{
		padding: 22px 18px;
	}


	.content-element-job-o-mat .content .tooltipp-right,
	.content-element-job-o-mat .content .tooltipp-left
	{
		display: none;
	}



	/*FOOTER*/

	.content-element-job-o-mat footer .water
	{
		height:auto;
		position: relative;
		margin-left: auto;
		margin-right: auto;
		top:0px;
		margin-top: -57px;
		background: url("../image/water-background-mobile.d3d6510d33f8.png") no-repeat;
		background-position: center 0;
		width: 100%;

	}
	.content-element-job-o-mat footer .sound-btn
	{
		display: none;
	}
	.content-element-job-o-mat footer .result
	{
		width: 100%;
		margin-top: 89px;
		background-color: #14afc5;
	}
	.content-element-job-o-mat footer .result > h2
	{
		display: block;
		padding-top: 20px;
	}
	.content-element-job-o-mat footer .result-list
	{
		width: 100%;
		margin: 40px auto;
		display: block;
		overflow: hidden;
		text-align: center;
		position: relative;
		max-height: 255px;
		background-color: #14afc5;
	}
	.content-element-job-o-mat footer .result-list a
	{
		margin: auto;
		margin-bottom: 15px;
	  	width: 300px;
	  	display: block;
	}

	.content-element-job-o-mat footer .result-list a span {
	  	width: 300px;
	  	text-overflow: ellipsis;
	}

	.content-element-job-o-mat footer .mobile-filter
	{
		display: block;

		padding: 30px 0;

		background: #fff;
	}

	.content-element-job-o-mat footer .mobile-filter h2
	{
		color: #14afc5;
	}

	.content-element-job-o-mat footer .mobile-filter nav
	{
		display: block;
		text-align: center;

		margin-top: 20px;
	}
	.content-element-job-o-mat footer .mobile-filter nav a
	{
		display: inline-block;
		vertical-align: middle;

		color: #14afc5;

		padding: 5px 10px;

		background-color: #fff;
		transition: background-color 0.1s;
		-webkit-transition: background-color 0.1s;
	}
	.content-element-job-o-mat footer .mobile-filter nav a:hover,
	.content-element-job-o-mat footer .mobile-filter nav a.active
	{
		color: #fff;
		background-color: #14afc5;
	}
	.content-element-job-o-mat footer .mobile-filter nav p
	{
		display: inline-block;
		vertical-align: middle;

		color: #14afc5;

		margin: 0 10px;
	}

	.content-element-job-o-mat footer .button-prev,
	.content-element-job-o-mat footer .button-next,
	.content-element-job-o-mat footer nav.pagination
	{
		display: none;
	}


	/* OVERRIDES */

	.content-element-job-o-mat .content .layer-television .display-television .touch-advise-tv
	{
		display: block;
		position: absolute;
		padding: 0 10px;
		top: 0;
		left: 0;
		right: 0;
		min-height: 400px;
		vertical-align: middle;
	}

	.content-element-job-o-mat footer
	{
		min-height: 100px;
	}

	.content-element-job-o-mat .result-tv nav a {
	}


	.content-element-job-o-mat .iScrollVerticalScrollbar {
		position:absolute;
		z-index:100;
		width:8px;bottom:0px;top:0px;right:5px;
		height: 300px;
	}

	.content-element-job-o-mat .iScrollIndicator {
		position:absolute;
		top: 0;
		left: 0;
		z-index:100;
		width:100%;
		background:#fff;
		opacity: 0.75;
		-webkit-background-clip:padding-box;
		-webkit-box-sizing:border-box;
	}

}