body
{
        background: #fff;
        font-family: 'Open Sans', sans-serif;
        color:#4a4a4a;
}

p
{
        margin:5px 0;
        line-height:25px;
}

a
{
        text-decoration:none;
        color:inherit;
        transition: color .5s ease;
}


/* =============== HEADER =============== */

header
{
        position:relative;
        width: auto;
        max-width:1000px;
        margin: 20px auto 30px auto;
		z-index: 101;
		/* background-color: yellow; */
}

nav
{
        position:absolute;
        right:0;
        bottom:0;
}

nav ul
{
        list-style:none;
}

nav ul li
{
        display:block;
        float:left;
        padding:3px 10px;
}

nav ul li a
{
        font-family: 'Open Sans', sans-serif;
        text-transform: uppercase;
        transition: all .25s ease;
		font-size: 12px;
}

nav ul li a:hover
{
        color: #0c117e;
}

#mobileMenu
{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        display: none;
}

#mobileMenu ul li
{
        display:block;
        background-color: #292f6b;
        color: #fff;
        padding: 12px 0;
        letter-spacing: 0.1em;
        text-align: center;
        text-transform: uppercase;
        border-bottom: 1px solid #ababab;
}

.toggleMobile
{
        display: none;
}


/* =============== MAIN PIC =============== */

#main_pic
{		
		position: relative;
		width: auto;
		border-top: 5px solid #0c117e;
}

.pic
{		
		display: block;
	   	width: 100%;
		height: auto;
        display: block;
		top: 0;
		left: 0;
}

#pic_content
{	
        position: absolute;
		max-width:450px;
        margin:auto;
        padding: 30px;
		
		
		left: 50%;
		top: 30%;
		
        float:left;

        font-size:14px;
		background: rgba(255,255,255,0.7);

}

#pic_content h3
{
        font-family: 'Open Sans', sans-serif;
        font-size: 35px;
        margin-bottom:20px;
        margin-left: 0px;
		color: #0c117e;
		line-height:35px;
}


#pic_content p
{
        line-height:25px;
        font-family: 'Open Sans', sans-serif;
        margin-left:0px;
}


/* =============== Drei Artikel =============== */

#boxcontent
{
        width:auto;
        max-width:900px;
        margin:0 auto;
        padding:50px 0 45px 0;
		/* background-color: green; */
}

#boxcontent article
{
        float:left;
        max-width:250px;
        margin:25px;
		padding-bottom: 20px;
        font-size:14px;
		/* background-color: pink; */
}

#boxcontent article h3
{
        font-family: 'Open Sans', sans-serif;
        font-size:20px;
        margin-bottom:10px;
        margin-left: 0px;
		color: #0c117e;
}

#boxcontent article img
{
        float:left;
		margin-bottom: 20px;
		margin-right: 10px;
}

#boxcontent article p
{
        line-height:25px;
        font-family: 'Open Sans', sans-serif;
        margin-left:0px;
}

#boxcontent h1
{
        font-family: 'Open Sans', sans-serif;
        margin: 0px 0 15px 0;
		color: #0c117e;
		text-align: center;
		font-size: 35px;
		text-transform: uppercase;
}


/* =============== CONTENT =============== */

#content
{
        width:auto;
        margin:auto;
        padding:0px;
		background:#333333;
}

#breadcrum
{
        width:auto;
        margin:0 auto;
        padding:3px 0 3px 0;
		background-color: #0c117e;
		color: #cecece;
}

#breadcrum h2
{
        max-width: 1000px;
		margin:0 auto;
		font-family: 'Open Sans', sans-serif;
		font-size: 10px;
		text-transform: uppercase;
}

#content_text
{
        width:auto;
		max-width: 1000px;
        margin: 0 auto;
        padding: 20px 0 40px 0;
		text-align: center;
		/*border-bottom:5px solid #0c117e;*/
		background:#333333;
		font-size: 14px;
		color:#ababab;
		float: none;
}

#content_text h3
{
		font-family: 'Open Sans', sans-serif;
        margin: 20px 0 35px 0;
		color: #fff;
		font-size: 35px;
		text-transform: uppercase;	
}

#content_text h4
{
		font-family: 'Open Sans', sans-serif;
        margin: 20px 0 20px 0;
		color: #fff;
		font-size: 20px;
		text-transform: uppercase;
		
}

#content_text p
{
		line-height: 35px;
        font-family: 'Open Sans', sans-serif;
        margin-left: 0px;
		font-size: 18px;
}


/* =============== FOOTER =============== */

footer
{
        position:relative;
        clear:both;
        width:auto;
        height:350px;
        background:#333333;
		border-top:5px solid #0c117e;
}

footer .wrapper
{
        line-height:22px;
        margin: 0 auto;
        padding-top:30px;
        width:auto;
        max-width:900px;
        font-size:14px;
}

footer .wrapper .column
{
        font-family: 'Open Sans', sans-serif;
        color:#ababab;
        float:left;
        width:280px;
        margin-right:20px;
		margin-bottom: 30px;
		/* background-color: red; */
}

footer .wrapper .column.midlist ul li
{
        display:block;
        width:auto;
        padding:0 0 10px 25px;
        margin-bottom:10px;
        border-bottom: 1px solid #444444;
}

footer .wrapper .column.midlist ul li a:hover
{
        color:#fff;
}

footer .wrapper .column.midlist
{
	text-align: center;
}

footer .wrapper .column.rightlist
{
	text-align: right;
}

footer .wrapper .column.rightlist ul li
{
        display:block;
        width:auto;
        margin-bottom:15px;
}

footer .wrapper .column.rightlist ul li a span
{
        margin-left:95px;
        display:block;
}

footer .wrapper .column.rightlist ul li a img
{
        transition: border .25s ease;
        float:left;
        border:3px solid #444444;
}

footer .wrapper .column.rightlist ul li a img:hover
{
        border-color: #5e5e5e;
}

footer .wrapper .column h4
{
        font-size: 16px;
        color: #fff;
        border-bottom: 1px solid #444444;
        padding: 0 0 10px 0;
        margin-bottom: 10px;
}





#copyright
{
        background: #1D1D1D;
        height:50px;
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
}
#copyright .wrapper
{
        font-family: 'Open Sans', sans-serif;
        padding-top:15px;
        color: #5e5e5e;
        font-size:14px;
        position:relative;
}
#copyright .wrapper .copy
{
        position:absolute;
        right:0;
        top:15px;
}
#copyright .wrapper a
{
        transition: opacity .25s ease;
        opacity: 0.3;
        margin-left: 12px;
        display:block;
        float:left;
}
#copyright .wrapper a:hover
{
        opacity: 0.7;
}
#copyright .wrapper a
{
        color: #ABABAB;
}

#copyright .wrapper a:hover
{
        color: #fff;
}








/* =============== MISC =============== */

.clear
{
        clear:both;
}
.hidden
{
        position:absolute;
        clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
          clip: rect(1px, 1px, 1px, 1px);
}



/* =============== MEDIA QUERIES FOR A RESPONSIVE LAYOUT =============== */


@media (max-width: 1215px)
{	
		#pic_content
		{	
				left: 30%;
				top: 10%;
		}
}

		


@media (max-width: 915px)
{
        .container
        {
                height:1px;
                top: -1500px;
        }
		
        header
        {
                height:120px;
				margin-left: 20px;
        }
		
        header nav
        {
                right: auto;
                bottom: auto;
                left: 0%;
                top:80px;
                margin-left: -10px;
        }
		
		
		#breadcrum h2
		{
				margin-left: 20px;
		}
		
		
		#pic_content
		{	
		  		position: relative;
				padding: 10px 0px 0px 0px;
				left: 0%;
				top: 10%;
				float: none;
                margin: 30px auto 50px auto;
				text-align: center;
		
		}
		
		#boxcontent article
        {
                float: none;
                margin: 30px auto 0 auto;
                width: 50%;
				
        }
		
		#content_text
		{
				float: none;
                margin: 5px auto 0 auto;  
		}
				
        footer
        {
                padding-bottom:70px;
                height: auto;
        }
		
        footer .wrapper
        {
                width: 350px;
                margin: 0 auto;
        }
		
        footer .wrapper .column
        {
                margin-top:30px;
                float:none;
                font-size: 14px;
                width: auto;
        }
		
        footer .wrapper .social
        {
                display:none;
        }
		
		
		footer .wrapper .column.midlist
		{
			text-align: left;
		}
		
		footer .wrapper .column.rightlist
		{
			text-align: left;
		}
		
}

@media (max-width: 620px)
{
        header
        {
				margin-top: 80px;
				text-align: center;
				margin: 20px auto 30px 0px;
        }   
		
		header img
        {
           		padding-top: 30px;
        }       
		
		#main_pic img
        {
                display:none;
        }
		
		#pic_content
		{	
		  		position: relative;
				margin-bottom: -5px;
		}		
		
		#pic_content p
		{	
				width: 70%;
				margin-left: 15%;
		}
		
		#breadcrum h2
		{
				text-align:center;
		}
		
		#content_text
		{
				position: relative;
				width: 70%;
		}
		
		#boxcontent article
        {
                float: none;
                margin: 30px auto 0 auto;
                width: 80%;
        }

        footer .wrapper
        {
                width:auto;
        }
        footer .wrapper .column
        {
                margin: 0 auto 15px auto;
                max-width:300px;
        }


        input
        {
                width:auto;
        }
        #mobileMenu
        {
                display: block;
                z-index: 99;
        }
        .toggleMobile
        {
                position: fixed;
                top: 10px;
                left: 10px;
                display: block;
                width: 40px;
                height: 36px;
                cursor: pointer;
                z-index: 999;
        }
        .toggleMobile span.menu1, .toggleMobile span.menu2, .toggleMobile span.menu3
        {
                display: block;
                position: absolute;
                width: 40px;
                height: 8px;
                left: 0;
                background: #0c117e;
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile span.menu1
        {
                top: 0;
        }
        .toggleMobile span.menu2
        {
                top: 14px;
        }
        .toggleMobile span.menu3
        {
                top: 28px;
        }
        .toggleMobile.active span.menu1
        {
                top: 14px;
                -webkit-transform: rotate(45deg);
                -moz-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                transform: rotate(45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu2
        {
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
                -webkit-transition: all 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: all 0.5s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        .toggleMobile.active span.menu3
        {
                opacity: 0;
                -webkit-transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
                transition: opacity 0.35s cubic-bezier(0.75, 0.25, 0.10, 0.95);
        }
        header nav
        {
                display:none;
        }
}

/* =============== KEYFRAMES =============== */

@keyframes stylie-transform-keyframes {
  0% {transform:translateX(30px) translateY(46px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(260px) translateY(-150px) rotate(0deg) translate(-50%, -50%);}
}

@keyframes stylie-transform2-keyframes {
  0% {transform:translateX(40px) translateY(40px) rotate(0deg) translate(-50%, -50%);animation-timing-function: cubic-bezier(.25,.25,.75,.75);}
  100% {transform:translateX(50px) translateY(40px) rotate(0deg) translate(-50%, -50%);}
}