/*
Theme Name: TRD-Design
Description: Template von MK Design
Author: Moritz Kippenberg
Author URI: http://www.moritz-kippenberg.de
*/

/*** General ***/
@import url(css/mojoflex.css);

@font-face { 
	font-family: 'Rotis'; 
	src: url('fonts/rotis_sans_serif_regular.ttf'); 
	font-weight: 300;
}
@font-face { 
	font-family: 'Rotis'; 
	src: url('fonts/rotis_sans_serif_bold.ttf'); 
	font-weight: 500;
}


body {
	font-family: 'Rotis', Helvetica, Arial, sans-serif; 
	font-size: 14px;
	font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 24px;
	font-weight: 500;
	margin-bottom: 15px;
}

h3 {
	font-size: 18px;
}

p, 
address {
	margin-bottom: 14px;
	line-height: 1.6;
}

strong {}


/*** Colors ***/

/* Font Color */
p, 
address, 
cite,
a:hover,
header nav li a {
	color: #000000;
}

h1,
h2,
h3,
h4,
h5,
h6,
a, 
.current-menu-item a,
.current-page-ancestor a,
header nav li a:hover,
.topNav .sub-menu li a,
.topNav .sub-menu li::before {
	color: #163f8c;
}

main button, 
main input[type="submit"],
.sub-menu .current-menu-item a
.off-canvas-left .current-menu-item a, 
.off-canvas-right .current-menu-item a,
.topNav li a,
.leistungenNav li a,
footer li a,
footer li a:hover,
footer .current-menu-item a {
	color: #ffffff;
}


/* Background Color */
main button, 
main input[type="submit"],
.off-canvas-left .current-menu-item, 
.off-canvas-right .current-menu-item,
.blau,
.leistungenNav li a,
.mobilLeistungen .leistungenNavMobil,
.leistungenNavMobil .menuStrich,
footer {
	background-color: #163f8c;
}

.sub-menu {
	background-color: rgba(255, 255, 255, 0.7);
}

header,
.slideshow_pagination_center li {
	background-color: #ffffff !important;
}

body,
.grau {
	background-color: #c9cacb;
}


.slideshow_pagination_center .slideshow_currentView,
.slideshow_pagination_center li:hover {
	background-color: #163f8c !important;
}

main {
	background-color: #f1f1f1;
}

/*** Layout ***/
.canvas-button-right {
	top: 15px;
	right: 15px;
}

.off-canvas-right .sub-menu {
	display: block;
	position: static;
	background-color: transparent;
}

/* Header */
.headBalken {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
}

header {
	height: 100px;
}

.logo_desktop {
	margin-top: 20px;
	margin-left: 60px;
	height: 70px;
	width: auto;
}

.logo_mobil {
	display: none;
	margin-top: 5px;
	height: 50px;
	width: auto;
}

.logo_mobil_wrapper {
	display: none;
	width: auto;
}

.balkenerweiterung > div {
	height: 30px;
}

/* Top-Nav */
.desktopHead {
	position: relative;
	z-index: 5;
}

.mobilHead {
	display: none;
}

.headBox {
	position: relative;
	margin-top: 100px;
}

.topNav {
	height: 30px;
	margin-left: 40px;
}

.topNav li {
	display: inline-block;
	height: 30px;
	margin-right: 30px;
	padding-top: 8px;
	font-size: 12px;
}

.current-menu-item a, 
.current-menu-ancestor a {
	font-weight: 500;
}

/* Leistungen-Menü */
.desktopLeistungen {
	position: absolute;
	top: 0;
	left: -45px;
	z-index: 6;
}

.leistungenNav li {
	list-style-type: none;
}

.leistungenNav li a {
	position: relative;
	z-index: 7;
	display: block;
	height: 90px;
	width: 30px;
	text-align: center;
	margin-bottom: 20px;
	background-repeat: no-repeat;
	background-position: top left;
	transition: width 0.5s;
}

.leistungenNav li:first-child a {
	height: 30px;
	width: 30px;
	background-image: url(img/icon_home.png);
}

.leistungenNav li:nth-child(2) a {
	background-image: url(img/icon_corporate.png);
}

.leistungenNav li:nth-child(3) a {
	background-image: url(img/icon_print.png);
}

.leistungenNav li:nth-child(4) a {
	background-image: url(img/icon_digital.png);
}

.leistungenNav li:nth-child(5) a {
	background-image: url(img/icon_photo.png);
}

.leistungenNav li a:hover,
.leistungenNav .current-menu-item a {
	width: 150px !important;
}


.mobilLeistungen {
	display: none;
	width: 100%;
	z-index: 8;
}

.leistungenNavMobil {
	width: 100%;
	height: 60px;
}

.leistungenNavMobil li {
	position: relative;
	display: inline-block;
	width: 25%;
	height: 60px;
	margin-right: -4px;
}

.leistungenNavMobil ul {
	padding: 0;
}

.leistungenNavMobil li a {
	display: block;
	color: #ffffff;
	width: 100%;
	height: 60px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 50px auto;
}

.leistungenNavMobil li:first-child a {
	background-image: url(img/icon_corporate_mobil.png);
}

.leistungenNavMobil li:nth-child(2) a {
	background-image: url(img/icon_print_mobil.png);
}

.leistungenNavMobil li:nth-child(3) a {
	background-image: url(img/icon_digital_mobil.png);
}

.leistungenNavMobil li:nth-child(4) a {
	background-image: url(img/icon_photo_mobil.png);
}

.leistungenNavMobil .menuStrich {
	position: absolute;
	width: 80%;
	margin-left: 10%;
	height: 3px;
	left: 0;
	bottom: -6px;
	z-index: 50;
	display: none;
}

.leistungenNavMobil .current-menu-item .menuStrich {
	display: block;
}

/* Sliderbild */
.headerBild {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
	width: 100%;
	height: auto;
}

.slideshow_pagination {
	bottom: 25px !important;
}

.slideshow_pagination_center li {
	width: 15px !important;
	height: 15px !important;
	margin: 0 5px !important;
	background-image: none !important;
	opacity: 1.0 !important;
	border-radius: 50px 50px 50px 50px;
	-moz-border-radius: 50px 50px 50px 50px;
	-webkit-border-radius: 50px 50px 50px 50px;
	transition: 0.3s;

	-webkit-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.3);
	box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.3);
}

.slideshow_button {
	display: none !important;
	background-image: url(img/blue-arrows.png) !important;
	opacity: 1.0 !important;
}

.slideshow_container .slideshow_button {
	top: auto !important;
	bottom: 10px !important;
}

.slideshow_container .slideshow_button.slideshow_previous {
	left: 10px !important;
}

.slideshow_container .slideshow_button.slideshow_next {
	right: 10px !important;
}

.thumbnailBox {
	overflow: hidden;
	text-align: center;
	height: 600px;
}

.thumbnailBox img {
	width: 100%;
	height: auto;
}


/* Main */
main {
	padding: 20px 50px;
	margin-bottom: 30px;
}

.hauptbereich {
	margin-top: 600px;
}



/* Footer */
footer {
	padding-top: 20px;
	padding-bottom: 20px;
}

footer li {
	list-style-type: none;
	line-height: 1.4;
}

footer ul {
	margin-bottom: 10px;
}


/*** Mobil ***/
@media (max-width: 1230px) {

	/*** General ***/


	/*** Layout ***/

	/* Header */

	/* Leistungen-Menü */
	.desktopLeistungen {
		left: -15px;
	}


	/* Main */


	/* Footer */

}

@media (max-width: 992px) {

	/*** General ***/


	/*** Layout ***/

	/* Header */
	header {
		height: 60px;
	}

	.headBox {
		margin-top: 60px; 
	}

	.logo_desktop,
	.balkenerweiterung,
	.desktopHead,
	.desktopLeistungen,
	.logo_desktop_wrapper,
	.slideshow_pagination {
		display: none !important;
	}

	.logo_mobil,
	.mobilHead,
	.mobilLeistungen,
	.canvas-button-right,
	.off-canvas-right,
	.slideshow_button {
		display: block !important;
	}

	.logo_mobil_wrapper {
		display: inline-block;
	}

	/* Sliderbild */
	.headerBild {
		position: static;
	}

	.slideshow_container,
	.slideshow_content,
	.slideshow_view,
	.slideshow_slide,
	.thumbnailBox {
		height: 350px !important;
	}

	.slideshow_pagination_center li {
		width: 25px !important;
		height: 25px !important;
	}

	.slideshow_pagination {
		bottom: 35px !important;
	}


	/* Main */
	.hauptbereich {
		margin-top: 20px;
	}

	main {
		padding: 20px 20px;
	}

}

@media (max-width: 768px) {

	/*** General ***/


	/*** Layout ***/

	/* Header */
	.slideshow_container,
	.slideshow_content,
	.slideshow_view,
	.slideshow_slide,
	.thumbnailBox {
		height: 180px !important;
	}

	/* Main */


	/* Footer */

}

@media (max-width: 400px) {

	.leistungenNavMobil li a {
		background-size: 40px auto;
	}

}

@media (max-width: 300px) {



}