@charset "utf-8";


/*
* CSS-Design
* ERTAN ERDOGAN
* 
*/



/* Reset * * * * * * * * */
*{
	margin: 0;
	padding: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
html {
    min-height: 100%;
    position: relative;
}

body{
	font-family: 'Montserrat', sans-serif;
	
	font-size: 100%;
	line-height: 1.5;
	color:#12145d;
	margin:0;

}


/* Layout * * * * * * * * */

.wrapper{

	max-width: 960px;
	background:#174db2;
margin: 0 15%;
	overflow: hidden;
	text-align: center;
}
#wrapper{

	max-width: 960px;
	margin: 0 auto;	
	background:#174db2;
}

header{
float:left;
	left: 0;
	bottom: 20px;
	height: 1px;
	width: 80%;
	text-align:left;
}


#header1{
	background: #2c3133;
	padding: 22px 0;
	margin-bottom: 30px;
	background:#2d3ca9;
}
.header

	left: 0;
	bottom: 0;
	height: 45px;
	width: 80%;
	background-color:#3c4289;
	background:#174db2;
}

.home{
	margin-bottom: 0 !important;
}

.bild1.bild{display:block;
	
}
	

.bild1{  padding: 10px 30px 40px 50px; 

   
	}
	img{ 
max-width: 100%; 
}

.mein{


	padding: 130px 20px 30px 20px;
	margin-right: 12%;
	margin-left:20%;


}	
		
#teaser{
float:left;
width: 100%;
padding: 10px 30px 40px 50px;
margin-bottom: 20px;
}
.teaser{
	font-size: 22px;
		font-size: 1.375rem;
	line-height: 32px;
	line-height: 2rem;
	margin-bottom: 40px;
		
}


footer{
	float:left;
	
	width:auto%;
	 margin-top: 25px;


}


	
/* Navigation */


input#responsive-nav,
label.responsive-nav-label {
  display: none;
}

.container{
    

    margin-left: 1%;
    margin-right: 1%;
    position: relative;
    width: 98%;
}
.nav span {
    display: none;
}
.nav, .nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.nav {
    

    margin-left: 1%;
    margin-right: 1%;
    position: relative;
    width: 98%;
}
.nav ul.subs {
    background-color: #FFFFFF;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    color: #333333;
    display: none;
    left: 0;
    padding: 2%;
    position: absolute;
    top: 54px;
    width: 96%;
}
.nav > li {
    border-bottom: 5px solid transparent;
    float: right;
    margin-bottom: -5px;
    text-align:right;
    -moz-transition: all 300ms ease-in-out 0s;
    -ms-transition: all 300ms ease-in-out 0s;
    -o-transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
    transition: all 300ms ease-in-out 0s;
}
.nav li a {
    display: block;
    text-decoration: none;
    -moz-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -ms-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -o-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    -webkit-transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    transition: color 450ms ease-in-out 0s, background-color 450ms ease-in-out 0s;
    white-space: normal;
}
.nav > li > a {

    color:#fbfbff;
    display: block;
    font-size: 1.3em;
    line-height: 49px;
    padding: 0 15px;
    text-transform: uppercase;
}
.nav > li:hover > a, .nav > a:hover {
    background-color:#b1f1c8;
   
}
.nav li.active > a {
    background-color:#a1f2f1;
    color:#03201d;
}

/* submenu */


.nav li:hover ul.subs {
    display: block;
}
.nav ul.subs > li {
    display: inline-block;
    float: none;
    padding: 10px 1%;
    vertical-align: top;
    width: 33%;
}
.nav ul.subs > li a {
    color: #777777;
    line-height: 20px;
}
.nav ul li a:hover {
    color: #F55856;
}
.nav ul.subs > li > a {
    font-size: 1.3em;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.nav ul.subs > li li {
    float: none;
    padding-left: 8px;
    -moz-transition: padding 150ms ease-out 0s;
    -ms-transition: padding 150ms ease-out 0s;
    -o-transition: padding 150ms ease-out 0s;
    -webkit-transition: padding 150ms ease-out 0s;
    transition: padding 150ms ease-out 0s;
}
.nav ul.subs > li li:hover {
    padding-left: 15px;
}




/* Überschrift und Logo*/

	


	.logo{position:fixed;
	top:55px;
padding: 0 0 0 20px;
 opacity: 0.5;}
	

header.haupttext{display: inline;
	
}


.haupttext1{
	text-align: center;
	padding:120px 20px 120px;
	
}
.haupttext2{
	text-align: center;
	padding:120px 20px 120px;
		background:#174db2;
}


/* Mein Bild************/




.kunst{position:relative;

	width:100%;
	
	padding-right: 10px;
}
.img-teaser{
        position:absolute;
        bottom: 50px; 
        left:2px;   
        color:#e8e9ee;
        padding: 5px 15px 5px 20px ;     
        font-size: 21px;
        font-size: 1.313rem;   
        line-height: 120%;
        	

}


/* Spalten * * * * * * * * */







.alignright{ 
float: right;    
margin: 0 0 15px 15px; 
}

.alignleft{   
float: left;    
margin: 0 15px 15px 0; 
}


/* Typografie ****************************************************************************/



h1, h2, h3, h4, h5, h6 {
font-family:'Montserrat', sans-serif;
		font-weight: normal;	
	margin-bottom: 5px;
}

.haupttext2 h1 {



	font-size:80px;
	font-size:  3.75rem;
    line-height: 100%;
	color:#dbf0f9;
	
}
h1 {
	font-size:80px;
	font-size: 3.75rem;
    line-height: 100%;
	color:#133574;
	

}
	
h2{
	
	font-size: 1.563rem;
	font-size: 25px;
	line-height: 150%;
	font-weight: 400;
	color:#91c7db;
}
.mein h2{
	
	font-size: 2rem;
	font-size: 25px;
	line-height: 150%;
	font-weight: 400;
	color:#2a383e;
}
h3{
	font-size: 1.375rem;
	font-size: 22px;
	line-height: 150%;
	font-weight: 400;
	color:#2a383e;
}
h4{   
	font-size: 1.313rem; 
font-size: 21px;    
line-height: 30px;
}
 
h5{
	font-size: 1.250rem;
font-size: 20px; 
   line-height: 120%; 
line-height: 28px;
color:#182038;
} 
 
h6{
font-size: 1.188rem;	 
font-size: 19px;
line-height: 26px;
	color:#1c5189;
}

.teaser h1{	font-size:60px;
	font-size: 4.313rem;
	margin: 40px 0 20px 0;
	font-weight: 400;
    line-height: 120%;
	color:#33a6e9;
	padding-bottom: 20px;
	text-shadow:8px 8px 11px #999;


}

.teaser h2{
	color:#666;
	font-size: 35px;
	font-size: 2.188rem;
	line-height: 150%;
	font-weight: 400;
	color:#33a6e9;
}

.row h2{
	color:#666;
	font-size: 35px;
	font-size: 2.188rem;
	line-height: 150%;
	font-weight: 400;
	color:#33a6e9;
	float:none; 
}
.row h3{
	color:#666;
	font-size: 35px;
	font-size: 2.188rem;
	line-height: 150%;
	font-weight: 400;
	color:#33a6e9;
	float:none; 
}
.row h5{
	color:#1e253f;
	font-size: 16px;
	font-size: 1.050rem;
	line-height: 150%;
	font-weight: 400;
	color:#182038;
	float:left; 
}

#footer a{
	color:#051b45;
	font-weight: 400;
	text-decoration: none;
}

 a:hover{
	background:#d3ecf9;
}


p{ color:#666;
	margin-bottom: 18px;
	font-size: 18px;
		font-size: 1.125rem;
	line-height: 140%;
	font-weight:400;
}
.big{
	font-size: 19px;
}


/* blockquote ********************************************************************************************/


blockquote {font-size: 36px;
		font-size: 2.25rem;
margin: 12px 0 24px 25px;
font-style: italic;
font-family: 'Montserrat', sans-serif;
color:#8c0285; 
}	

blockquote:before { content: '„'; color: #ff621c;  font-size:36px;}
blockquote:after {content: '"'; color: #ff621c;  font-size:36px;}


.liste{font-size: 18px;
		font-size: 1.125rem;
margin: 12px 0 24px 25px;
font-style: italic;
font-family:  'Montserrat', sans-serif;
color:#8c0285;}
ul, ol{
	margin: 0 0 12px 0px;
}


ul{

list-style-image:url(images/pfeil.gif)

}



hr{
	background: #2c3133;
	border: 0;
	height: 1px;
	width: 100%;
	float: left;
	margin: 20px 0;
}
/* POP Up***********************************/

	#button
{
  float: right;
  top:50px;
  width:48%;	
  font-size:16px;
  padding:20px;
  background-color:#1aecd7;
  border-radius:10px;
  text-decoration:none;
  font-weight:bold;
  color:black;
}

#button:hover
{
  background-color:#EFF1F3;
  color:#D77A61;
}

#popup
{
  position:relative;
  top:5vh;
  right: 20px;
  width:44vw;
  background-color:#EFF1F3;
  color:black;
  -khtml-opacity:0;
  -moz-opacity : 0;
  -ms-filter: "alpha(opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  filter : alpha(opacity=0);
  opacity : 0;
  padding:20px;
  border-style:solid;
  border-radius:15px;
  border-color:#bbd8b3;
  transition:all 1s;
  -webkit-transition:all 1s;
}

#popup:target
{
  -khtml-opacity:1;
  -moz-opacity : 1;
  -ms-filter: "alpha(opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  filter : alpha(opacity=100);
  opacity : 1;
}

/* Bouton fermeture */

#close
{
  position:absolute;
  left:100%;
  top:-20px;
  margin-left:-10px;
  background-color:#EFF1F3;
  font-size:12px;
  padding:5px 7px;
  border-radius:50px;
  border-style:solid;
  border-color:#bbd8b3;
  font-weight:bold;
  color:#bbd8b3;
  text-decoration:none;
  font-family:arial;
}

#close:hover
{
  background-color:#EFF1F3;
  border-color:#bbd8b3;
  color:#D77A61;
}

#close:active
{
  background-color:#A9F5F2;
  color:black;
}

/*Popup1*****************************/
	#button1
{
  float: right;
  top:50px;
  width:48%;																							5;
  font-size:16px;
  padding:20px;
  background-color:#1aecd7;
  border-radius:10px;
  text-decoration:none;
  font-weight:bold;
  color:black;
}

#button1:hover
{
  background-color:#EFF1F3;
  color:#D77A61;
}

#popup1
{
   position:relative;
  top:5vh;
  right: 20px;
  width:44vw;
  background-color:#EFF1F3;
  color:black;
  -khtml-opacity:0;
  -moz-opacity : 0;
  -ms-filter: "alpha(opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
  filter : alpha(opacity=0);
  opacity : 0;
  padding:20px;
  border-style:solid;
  border-radius:15px;
  border-color:#bbd8b3;
  transition:all 1s;
  -webkit-transition:all 1s;
}

#popup1:target
{
  -khtml-opacity:1;
  -moz-opacity : 1;
  -ms-filter: "alpha(opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  filter : alpha(opacity=100);
  opacity : 1;
}

/* Bouton fermeture */

#close1
{
  position:absolute;
  left:100%;
  top:-20px;
  margin-left:-10px;
  background-color:#EFF1F3;
  font-size:12px;
  padding:5px 7px;
  border-radius:50px;
  border-style:solid;
  border-color:#bbd8b3;
  font-weight:bold;
  color:#bbd8b3;
  text-decoration:none;
  font-family:arial;
}

#close1:hover
{
  background-color:#EFF1F3;
  border-color:#bbd8b3;
  color:#D77A61;
}

#close1:active
{
  background-color:#A9F5F2;
  color:black;
}




/* Animation************************************************************************************/

@keyframes veli1 {
  from {
    -webkit-transform: none;
    transform: none;
  }


  30% {
    -webkit-transform: translate3d(-.8%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-1%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  60% {
    -webkit-transform: translate3d(1%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(1%, 0, 0) rotate3d(0, 0, 1, 1deg);
  }

  75% {
    -webkit-transform: translate3d(1%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(-2%, 0, 0) rotate3d(0, 0, 1, 1deg);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}


/* Raster * * * * * * * * *******************************************************************************/
 .column:first-child {
margin-left:auto;

}


 .column {
float: left;
background: #fff;
padding: 25px;
margin: 25px 0 25px 2%;
}


.row{
	width: 100%;
	float: left;
	margin-left: 5%;
	
}





.full { width: 100%; }
.half { width: 48%; }
.third { width: 30%; }
.two-thirds { width: 66%; }
.fourth { width: 23.5%; }
.three-fourth {width:74.5%;}

/* Weitere Elemente */

/* Media Queries * * * * * * * * ********************************************************************************************/

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



.fourth { width: 23%; }

.wrapper{
		width: auto;
	margin: 0 auto;	
	background:#174db2;}



}



@media only screen and (min-width: 670px) and (max-width: 960px) {



.wrapper{
		width: auto;
	margin: 0 auto;	
	background:#174db2;}
	
.fourth{width: 24.5%;}

 #main, .sidebar{
	 width: 100%;
 }

	.logo{position:fixed;
		display: inline;
	top:90px;
	right:10px;}
}
/*ifone******************************************************************************/
@media only screen and (max-width:670px) {

.wrapper{
	width: auto;
	margin: 0 auto;	
	background:#174db2;
}




 
label.responsive-nav-label span {
  margin-right: 10px; 
   font-size: 35px; 
}
input#responsive-nav,
label.responsive-nav-label {
 
}

 

label.responsive-nav-label {
	 position: relative; 
	 display: block; 
	 padding:20px; 
	 cursor: pointer; color:Black;
	  cursor: pointer;}
	  abel.responsive-nav-label span {
  margin-right: 10px;  
     font-size: 30px; 
}

	.nav {
	
  position: absolute;
  top: -9999px;
  padding: 10px;
}
 
input#responsive-nav[type=checkbox]:checked ~ .nav {
  position: relative;
  top: 0;
   background: #80a9c9;

   
}


	  
.nav :after {
  display: none;
}

.nav li {
  float: none !important;
  width: 100% !important;
  border-bottom: none !important; 
}
   
 .nav li a {
  margin-bottom: 10px !important;
  padding: 10px 20px !important; 

}
.nav ul li:hover {
  background: #6a187d;
}
   
.nav ul li a:hover {
  background: #4096ee;
}


#header{

	left: 0;
	bottom: 0;
	height: 1px;
	width: 100%;
	background-color: #e8e9ee;
	text-align: center;
	color:#1d1c1c;
}

.full, .two-thirds, .half, .third, .fourth, .three-fourth, #main, .sidebar, .res-fourth{
	width: 96%;
	margin: 22px 2% !important;
}
h1 {
	font-size:50px;
	font-size: 3.125rem;


}
.haupttext2{
	font-size:50px;
	font-size: 3.125rem;
	float:left;
	padding:45px 20px 40px 20px;
		width: 100%;
}
.haupttext1{
	font-size:50px;
	font-size: 3.125rem;
	float:left;
	padding:60px 20px 60px 20px;
	
	}
a#mobile-menu-btn{
	display: block;
	background: #6a187d;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	padding: 10px 0;
	margin: 15px 0 0;
	
}



header{

	left: 0;
	bottom: 0;
	height: 1px;
	width: 100%;
	background-color: #e8e9ee;
	text-align: center;
	color:#1d1c1c;
}
#header{

	left: 0;
	bottom: 0;
	height: 1px;
	width: 100%;
	background-color: #e8e9ee;
	text-align: center;
	color:#1d1c1c;
}
.logo{display: inline;} 

	.logo{position:fixed;
	top:8%;
	right:2%;
	}
	
.img-teaser{
        position:absolute;
        bottom: 20px; 
        left:2px;   
        color:#e8e9ee;
        padding: 5px 15px 5px 20px ;     
        font-size: 21px;
        font-size: 1.313rem;   
        line-height: 120%;
        	

}
.main{margin-left: 1px;}

}

/* Weitere**************************************************************************************/




.button{
	background:#000000;

	padding: 4px 10px;
	color:#f6f6fa;
	text-decoration: none;
	font-size: 16px;
	border-radius: 8px;
	text-shadow: 1px 1px #842e08;
	}

.button:hover{
	background: #fff;

	color: #ff621c;
	text-shadow: none;
}

/* Mail-Button */

#mail-btn{
	display: block;
	opacity:60% !important;
	width: 33px;
	height: 170px;
	background: url("../images/mail-button.png") no-repeat;
	position: fixed;
	top: 300px;
	left: 0;
	z-index: 1;
	transition: background 0.5s;
}

#mail-btn:hover{
	background:url("../images/mail-button.png") no-repeat -40px 0;
}

@media only screen and (max-width: 960px) { 
 
#wrapper, .haupttext{    
width: 100%; 
}
 
}

/* Slider  * * * * * * * * */
#sequence{
	margin-bottom: 25px;
}


/* Druckformatierung */

@media print {

#header, #footer {
display: none;
}

}