/** Generated by FG **/
@font-face {
	font-family: 'TheMixOsF-Bold';
	src: url('../fonts/TheMixOsF-Bold.eot');
	src: local('☺'), url('../fonts/TheMixOsF-Bold.woff') format('woff'), url('../fonts/TheMixOsF-Bold.ttf') format('truetype'), url('../fonts/TheMixOsF-Bold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

/** Generated by FG **/
@font-face {
	font-family: 'TheMixOsF-ExtraLight';
	src: url('../fonts/TheMixOsF-ExtraLight.eot');
	src: local('☺'), url('../fonts/TheMixOsF-ExtraLight.woff') format('woff'), url('../fonts/TheMixOsF-ExtraLight.ttf') format('truetype'), url('../fonts/TheMixOsF-ExtraLight.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700');


html {
  
  position: relative;
  height: 100%;
  
}



body{

	background-color: #333;
	height:100%;
	font-size: 16px;
	color: #666;
    font-family: 'Roboto Condensed', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	
	font-family: 'TheMixOsF-Bold';
	
}


.active{
	
	color: #FD8626 !important;
}

#wrap {
	height:100%;
  min-height: 100%;
}
/*--------------- MARGIN & PADDING --------------*/

.margin-top{
	
	margin-top: 2em;
}
.margin-bottom{
	
	margin-bottom: 2em;
}

.padding-1{
	
	padding: 1em;
}


/*--------------- MARGIN & PADDING --------------*/

/*--------------- FARBEN --------------*/

.hochbegabung-bg-color{
	
	background-color: #FD8626;
}

.hochbegabung-fg-color{
	
	color: #FD8626 !important;
}

.psychotherapie-bg-color{
	
	background-color: #4DEAF1;
}

.psychotherapie-fg-color{
	
	color: #4DEAF1 !important;
}

.berufsorientierung-bg-color{
	
	background-color: purple;
}

.berufsorientierung-fg-color{
	
	color: purple !important;
}

.about-bg-color{
	
	background-color: lightgreen;
}

.about-fg-color{
	
	color: lightgreen !important;
}

/*--------------- FARBEN --------------*/



/*   **************    HEADER ******************/




.top-link {
	
	padding: 0 !important;
}

.top-link h3{
	
	margin-top: 5px !important;
	font-size: 1.3vw; 
}

.site-header a{
	
	color: #e4e0e0;

}


/*   **************    HEADER ******************/

/* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 16px;
    text-decoration: none;
    font-size: 16px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav h3 {
    padding: 8px 8px 8px 16px;
	color: white;
    transition: 0.3s
}



/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
    transition: margin-left .5s;
    padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

/*   **************    CONTENT ******************/

#site-content{
	
	height: 85%;
	padding: 0;
	

}

.content-wrapper{
	
	padding: 2em;
}

.mobile-wrapper{
	
	height: 76%;
	clear:both;
}


.mobile-first,.mobile-second,.mobile-third,.mobile-fourth {
	display: block;
	height: 25%;
	min-height: 25%;
	text-align: center;
	padding-top: 0em;
	color: white;
}


.left-top, .right-top, .left-bottom, .right-bottom{

	display: block;	
	height: 50%;
	min-height: 50%;
	text-align: center;
}



.headline-holder-portal{
	width: 60%;
	height: 26%;
	top:  calc(50% - 14%);
	left: calc(50% - 30%);
	position: absolute;
}

.headline-holder-portal:hover{
	
	background-color: rgba(0,0,0,0.2);
	transition:.6s;
	border-radius: 8px;
	
}

.headline-holder-portal-mobile{
	width: 90%;
	height: 50%;
	top:  calc(50% - 25%);
	left: calc(50% - 45%);
	position: absolute;
}

.portal-header{
	
	color: white;
	font-size: 2.5vw;
	

}

.headline-holder-portal small{
	
	color: white !important;
}

.mobile-wrapper h2{
	
	margin-bottom: 0 !important;
	margin-top: 0 !important;
	font-size: 26px;
	
}

/*   **************    CONTENT ******************/

/*   ****************** Turning LOGOS **********************/

.moving-logo{
	
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background-color: white;
	position: absolute;
	left: calc(50% - 150px);
	top:  calc(43% - 150px);
	z-index: 99999;
	border: 10px solid white;
	box-shadow: inset 0px 4px 9px 2px rgba(8,48,61,0.4);
}

.top-mobile-logo{
	
	height: 24%;
	
}

.moving-logo-mobile{
	
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background-color: white;
	position: relative;
	left: calc(50% - 50px);
	top: calc(50% - 50px);
	z-index: 0;
	border: 5px solid white;
	box-shadow: inset 0px 4px 9px 2px rgba(8,48,61,0.4);
}


.turn-2 {
	
	position: absolute;
    -webkit-animation: mymove-2 26s infinite; /* Chrome, Safari, Opera */ 
    animation: mymove-2 26s infinite;
    width: 80%;
    z-index: -1;
    margin-top: 11%;
    left: 25px;
   
}

.turn {
	
	position: absolute;
    -webkit-animation: mymove 31s infinite; /* Chrome, Safari, Opera */ 
    animation: mymove 31s infinite;
    z-index: 99999;
    margin-left: 34px;
    margin-top: 10%;
	width: 80%;
	
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove-2 {
    0%   {transform:rotate(0deg); filter:  hue-rotate(720deg);}
    50%   {transform:rotate(180deg); filter:  hue-rotate(180deg);}
    100% {transform:rotate(3600deg); filter:  hue-rotate(0deg);}
    
}

/* Standard syntax */
@keyframes mymove-2 {
    0%   {transform:rotate(0deg); filter:  hue-rotate(720deg);}
    50%   {transform:rotate(180deg);filter: hue-rotate(180deg); }
    100% {transform:rotate(360deg);filter:  hue-rotate(0deg); }
}


/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    0%   {transform:rotate(360deg);filter:  hue-rotate(1080deg);}
    50%   {transform:rotate(180deg);filter: hue-rotate(180deg); }
    100% {transform:rotate(0deg);filter:hue-rotate(0deg); }
}

/* Standard syntax */
@keyframes mymove {
    0%   {transform:rotate(360deg);filter:  hue-rotate(1080deg); }
    50%   {transform:rotate(180deg);filter:  hue-rotate(180deg);  }
    100% {transform:rotate(0deg);filter: hue-rotate(0deg);   }
}
}

/* ****************** Turning LOGOS ********************* */

/*************** FOOTER ******************/

.footer{
	position: relative;
	background-color: #333;	
    height: 15%;  
	min-height: 15%;
	padding-top: 1em;
	text-align: center;
	bottom: 0;
	width: 100%;
	padding-top: 1em; 

	
}

.footer h4{
	
	color: #4DEAF1;
	font-family: 'TheMixOsF-ExtraLight';
	
}

.footer a{
	
color: #FD8626;

	
}

.copyright-footer{
	
	
	color: #666666;
	position: absolute;
	bottom: 0;
	width: 100%;


}







/*************** FOOTER ******************/









/*************** MEDIA QUERIES ******************/


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





.moving-logo{
	
	width: 200px;
	height: 200px;			
	left: calc(50% - 100px);
	top:  calc(40% - 100px);


}

#site-content{
	
	height:80%;
	padding: 0;
}

.left{
		
	height:50%;
	min-height: 50%;
}

.right{
	
	height: 50%;
	min-height: 50%;
}	
	

	
.footer{
	position: absolute;
	background-color: #333;
	height:auto;
	min-height: 20%;
	padding-top: 1em;
	text-align: center;
	bottom: 0;
	width: 100%;

	
}	

}

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

.site-header h3{
	
	font-size: 20px;
}	



.moving-logo{
	
	width: 140px;
	height: 140px;			
	left: calc(50% - 70px);
	top:  calc(40% - 70px);


}
.copyright-footer{


}


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

.site-header{
	height: 8%;
	width: 100%;
	background-color: grey;
	color: white;
	text-align: center;
	
	
}

.site-header h3{
	
	font-size: 1.8vw;
}

.moving-logo{
	
	width:  200px;
	height: 200px;			
	left: calc(50% - 100px);
	top:  calc(40% - 100px);


}

#site-content{
	
	height: 80%;
	padding: 0;
}

.portal-header{
	
	color: white;
	font-size: 2.5vw;

}	
	



	
.footer{
	position: absolute;
	background-color: #333;
	height:auto;
	min-height: 20%;
	padding-top: 1em;
	text-align: center;
	bottom: 0;
	width: 100%;

	
}	

}






/* --------------- IPAD PORTRAIT ------------------*/

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





#site-content{
	
	height: 72%;
	padding: 0;
}

.left{
		
	height:50%;
	min-height: 50%;
}

.right{
	
	height: 50%;
	min-height: 50%;
}	


.copyright-footer{
	
	
	position: absolute;
	bottom: 0;
	width: 100%;
	
}

.turn{
	
	margin-left: 20px;
}

}

/* --------------- IPAD PORTRAIT ------------------*/


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



.turn-2{
	
	left: 10px;
}

.turn{
	
	margin-left: 10px;
}



}