/*
 Theme Name: OceanWP Child
 Template: oceanwp
 */

/***************************************************/
/*********      MAIN-LAYOUT WITH SIDEBAR      ******/
/***************************************************/
.side-image {
	width:70% !important;
	margin-bottom: 20px !important;
}
.content-row {
	display: flex;
	margin-top: 20px;
	align-items: top;
	justify-content: center;
}
.single-page-article {
	display: flex;
	width:60%;
	max-width: 800px;
	box-sizing: border-box;
	padding: 30px;

}
.sidebar {
	padding:20px;
	width:60%;
	max-width: 300px;
	height: 100% !important;
	box-sizing: border-box;
	border-left: 1px solid #e4e4e4;
}
.sidebar h2 {
	display: block;
	width:100%;
	border-bottom: 1px solid #e4e4e4;
	
}
.homepage-header {
	width: 100%;
}



a.site-title.site-logo-text {
	display: block;
	float:right;
	padding-left: 20px;
	padding-top: 10px;
	color: #398799;
	font-size:15px !important;
	font-weight:bold;
	line-height: 20px;	
	
}

a.site-title.site-logo-text:hover {
	color: #0E3D56;
}


.oceanwp-post-list {
    display: flex;
    flex-wrap: wrap;
}
.post-item {
   display: flex;
	flex-direction: row;
	margin-bottom: 20px;
	align-items: center;
	width: 100%;
}

.post-thumbnail {
    margin-right: 20px;
	flex-shrink: 0;
	width: 30%;
	display: block;
}

.post-thumbnail img {
	object-fit: cover;
	width: 300px !important;
	border-radius: 10px !important;
}

.post-title {
    display: block;
	width: auto;
}

.post-title a {
    text-decoration: none;
    color: #333;
	font-size: 16px;
	font-weight: bold;
	
}

.post-title a:hover {
    text-decoration: underline;
    color: #0073aa; /* Adjust the color to match your theme */
}


/*Images in Latest Articles*/
.attachment-medium.size-medium.wp-post-image {
	object-fit: cover;
    width: 170px !important;
	height: 170px !important;
    border-radius: 10px !important;
}
/*Image in Article */
.attachment-full.size-full.wp-post-image {
	object-fit: cover;
    width: 400px !important;
	height: 400px !important;
    border-radius: 10px !important;	
}


/* SOCIAL MEDIA BUTTONS IN MAIN-MENU */
.icon-facebook a {
    display: inline-block;
    text-indent: -99999px !important; /* Hide the text */
    width: 30px; 
    height: 30px;
    position: relative;
}
.icon-facebook a::before {
    content: url('/wp-content/uploads/2024/05/icon_faacebook-75x75.png'); 
    width:30px;
    text-indent: 0; /* Reset text-indent */
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%) scale(.3);
}
.menu-item.icon-xing a {
    display: inline-block;
    text-indent: -9999px; /* Hide the text */
    width: 30px; 
    height: 30px;
    position: relative;
}
.menu-item.icon-xing a::before {
    content: url('/wp-content/uploads/2024/05/icon_xing-75x75.png'); 
    width:30px;
    text-indent: 0; /* Reset text-indent */
    position: absolute;
    top: 120%;
    left: 50%;
    transform:  translate(-50%, -50%) scale(.3);
}
.menu-item.icon-linkedin a {
    display: inline-block;
    text-indent: -9999px; /* Hide the text */
    width: 30px; 
    height: 30px;
    position: relative;
}
.menu-item.icon-linkedin a::before {
    content: url('/wp-content/uploads/2024/05/icon_linkedin-76x75.png'); 
    width:30px;
    text-indent: 0; /* Reset text-indent */
    position: absolute;
    top: 120%;
    left: 50%;
    transform:  translate(-50%, -50%) scale(.3);
}
.menu-item.icon-instagram a {
    display: inline-block;
    text-indent: -9999px; /* Hide the text */
    width: 30px; 
    height: 30px;
    position: relative;
}
.menu-item.icon-instagram a::before {
    content: url('/wp-content/uploads/2024/05/icon_instagram-76x75.png'); 
    width:30px;
    text-indent: 0; /* Reset text-indent */
    position: absolute;
    top: 120%;
    left: 50%;
    transform:  translate(-50%, -50%) scale(.3);
}
.menu-item.icon-x a {
    display: inline-block;
    text-indent: -9999px; /* Hide the text */
    width: 30px; 
    height: 30px;
    position: relative;
}
.menu-item.icon-x a::before {
    content: url('/wp-content/uploads/2024/05/icon_x-75x75.png'); 
    width:30px;
    text-indent: 0; /* Reset text-indent */
    position: absolute;
    top: 120%;
    left: 50%;
    transform:  translate(-50%, -50%) scale(.3);
}





.custom-footer {
	padding: 20px !important;
	display: inline-block;
	height:210px;
	width:270px;
	color:black;
}
.custom-footer a, 
.custom-footer a:visited, 
.custom-footer a:hover {
	text-decoration: none;
	color: #000000 !important;
}


.moin-buttons {
	width: 700px;
}

.wpcf7-submit {
	color:#000000 !important;
	background-color: #8ac6d0 !important;
	border-color: #8ac6d0 !important;
}

div.listing-item {
	width:28%;
	float:left;
	margin-right:40px;
	margin-bottom: 40px;
}

.listing-item img {
	border-radius: 10px;
}
.listing-item a.image {
	display: block;
}

/* SmartMaps Marker:  */
.markerIcon
	{
		width: 35px;
		height: 35px;
		background: #18345c;
		text-align: center;
		line-height: 34px;
		border-radius: 50%;
		border: 3px solid #ffffff;
		box-shadow: inset 1px 1px rgba(255,255,255,0.1),1px 1px 1px rgba(0,0,0,0.2);
		color: #fff;
		font-weight: bold;  
		font-size: 14px;  
	}


.listing-item {
	width:90% !important;
}
.listing-item a.title {
	font-size: 16px !important;
	font-weight: bold !important;
}

.listing-item img {
	border-radius: 20px !important;
}

.display-posts-listing.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
    gap: 10px; /* Abstand zwischen den Elementen */
}

.display-posts-listing.grid .display-posts-listing-post {
    display: flex;
    flex-direction: column;
    min-height: 300px; /* Einheitliche Höhe für alle Posts */
}

.elementor-button-icon image {
	width: 300px !important;
}

.elementor-button-text {
	margin-left: 20px;
}



#content {
	margin-top: 20px;
  	display: flex;
  	justify-content: center;
  	flex-direction: column;
		align-items: stretch;
}
.single-page-article {
	max-width: 1100px;
}

#footer-inner {
	width: 100%;
	text-align: center;
	padding-top: 30px;
	background-color: #6D8B9A;
	height:80px;
	font-weight: bold !important;
}

/***************************************************/
/*********        HEADER                      ******/
/***************************************************/
#top-bar-content {
	width: 100%;
	text-align: right;
}

#site-header-inner {
	width:1200px;	
	max-width: 90%;
	display: flex;
}
#site-logo {
	display: flex;
	width:18%;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
	height: 100px !important;
}
#site-navigation-wrap {
	display: flex;
	width:82%;
	box-sizing: border-box;
	align-items: center;
	justify-content: center;
}

#site-navigation-wrap .dropdown-menu > li > a {
	color: #0B3D56 !important;
}
#site-navigation-wrap .dropdown-menu > li > a:hover {
	color: #66B6C2 !important;
}



/***************************************************/
/*********        REGIONALSEITEN              ******/
/***************************************************/
.regional-header {
	width:100%;	
	height: 360px !important;
	display: flex;
}
.regional-header-links {
	display: flex;
	width:50%;
	box-sizing: border-box;
	background-color: #008699;
	align-items: center;
	justify-content: center;
	
}
.regional-header-links h1 {
	color:#ffffff;
	font-size: 50px;
	
}
.regional-header-rechts {
	width:50%;
	box-sizing: border-box;
}
.regional-header-rechts img {
	border-radius: 0px !important;
    width: 100%;           /* Bild auf 100% der Breite des Containers setzen */
	height: 100%;
    object-fit: cover;         /* Bild so skalieren, dass das Seitenverhältnis beibehalten wird */
    object-position: center;   /* Optional: Bild zentrieren */
    display: block; 
}


/********************************************
***  	RESPONSIVE MOBILE        ************
*********************************************/
@media (max-width: 600px) {
	#site-logo {width:70% !important;}
	.oceanwp-mobile-menu-icon {margin-left: 20px;}
	.content-row {display: block;}
	.single-page-article {display: block;width:100%;padding: 30px;}
	.sidebar {width:100%;max-width:100%;border-left: none;}
	.page-header-title {font-size: 20px !important;}
	.regional-header {display: block;}
	.regional-header-links {display: block; width:100%;padding:10px;}
	.regional-header-rechts {display: block; width:100%;}
	
}