/*  
Theme Name: IOM_2021
Theme URI: https://internet-online-marketing.de/
Author: The DigiStage Team, Ralf and Moss
Author URI: https://ralfskirr.com/
Description: Super Fast WordPress Theme for IOM :)
Tags: Cool
Version: 0.1
*/
@import url("typography.css");
@import url("menu.css");
/* @import url("menu.css"); */
/* Browser Reset */
* { margin:0; padding:0;}
ol, ul { list-style-position: inside;}
   
/*
**************
DESKTOP LAYOUT
Everything above 800px width 

**************
*/

/* HEADER START: logo + menu */
header {}
#branding {
  display: flex;
/*  background-color: LightSalmon; */
  justify-content: center;
}
#logo {
  flex-basis: 1100px;
  background-color: #fff;
} 
/* formatting of container for desktop menu  */

/*
https://codepen.io/drweb/pen/XWJQKNN
*/
#menu-container-top-menu-desktop {
  display: flex; 
/*    background-color: LightSkyBlue; */
  justify-content: center;
}
.menu-container-top-menu-desktop { /* the container that wraps the menu ul */
 display: flex;
 flex-basis: 1100px;
 position: relative;
 background-color: #fff;
}
.menu-container-top-menu-desktop ul { /* the actual menu ul */
	margin: 0;
	display: flex; 
/*	flex-direction:column; mobile? */
	flex-direction:row;
}
/* visibility of dropdown items */
.sub-menu { /* hide drop down */
	display: none; 
	position:absolute; /* I think this allows to keep the children in the correct position */
}
.menu-item-has-children:hover .sub-menu {
	display: block; /* show drop down */
}

/* menu items styling, .menu-item is the class for li elements */
.menu-item {
	display: block;
	 margin-right: 45px;
	border-top: 1px solid #fff; 
}

.menu-item:hover {   
	border-top: 1px solid #FF2B05; /* move to li later */
}
.menu-item a {
	display:flex;
	width:100%;
	height: 50px;
	line-height:50px;
	padding:0 10px;
}
.sub-menu { /* this is the 2nd level ul containing the dropdown li items */
	display:flex;
	flex-direction:column;
	border-top: 2px solid #FF2B05;
}
.sub-menu li { 
	display:flex; 
}

/* HEADER END */

/* CONTENT-CONTAINER START: main-content + sidebar */
#content-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

main {
  flex-basis: 700px;
  background-color: #fff;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  margin-left: 20px;
  margin-right: 20px;
}

aside {
  flex-basis: 340px;
  background-color: #fff;
  margin-right: 20px;
}

/* Fixed margin for when width is larger than 1100px */
@media (min-width: 1101px) {
  aside {
    margin-left: 60px; /* Fixed margin for larger screens */
  }
}

/* Responsive margin for when width is smaller or equal to 1100px */
@media (max-width: 1100px) {
  aside {
    margin-left: calc(5%); /* Responsive margin for smaller screens */
  }
}

/* CONTENT-CONTAINER END */

/* FOOTER START: widgetized footer + copyright bar */
footer {
  display: flex;
  background-color: #000; 
		color:#fff;
  justify-content: center;
}
#footerwidget1 {
  flex-basis: 500px;
}
#footerwidget2 {
  flex-basis: 500px;
}
.footerwidget {
  margin: 10px;
  padding: 20px;
}
#copyright-footer {
  text-align: center;
   background-color: #000; 
	color:#fff;
  padding: 10px;
}
/* FOOTER END */

/*
*************
RESPONSIVE LAYOUT START
Makes a one column layout instead of a two-column layout 

**************
*/
/* for mobile */
@media (max-width: 800px) {
  #content-container, footer {
    flex-direction: column;
  }
  main, aside, #footerwidget1, #footerwidget2 {
    flex-basis: 100%;
    margin-left: calc(5%); /* Percentage-based margin */
    margin-right: calc(5%);
  }
}

/* no sidebar Template */
.no-sidebar main  {
  flex-basis: 1100px;
}
/* 100-percent Template */
.onehundred-percent main  {
  flex-basis: 90%;
}

img {max-width:100%; height:auto;}

.animate_from_top  {
	overflow:hidden;
}
.animate_from_top img {
    animation-name            : displaceContent;
    animation-duration        : 3s;
    animation-delay           : 0;
    animation-iteration-count : 1;
    animation-fill-mode       : forwards;
}
@keyframes displaceContent {
    from { transform : translateY(-100%) }
    to   { transform : translateY(0em) } /* slide down to make room for advertisements */
}
.animate_from_top p {
    animation-name            : displaceContent2;
    animation-duration        : 4s;
    animation-delay           : 0;
    animation-iteration-count : 1;
    animation-fill-mode       : forwards;
}
@keyframes displaceContent2 {
    from { transform : translateY(-500%) }
    to   { transform : translateY(0em) } /* slide down to make room for advertisements */
}