/* catrinresch.de CSS */

@charset "utf-8";

@import url(https://fonts.googleapis.com/css?family=Raleway);
@import url(CSS/crFont.ttf);


body {
  font-family: Raleway,Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;             /*sofern keine extra definition*/
	color: #555555;        /*dunkelgrau*/
	font-weight: 300;
	font-variant: normal;
  background-color: #ffffff;         /*weiß*/
	background-repeat: no-repeat;
	background-position: center left;
	line-height: normal;
	letter-spacing: normal;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0em;
	padding: 0em;
}

.h1 {
  color: #042e60;              /*dunkelblau*/
  font-size: 200%;
  }

.h2 {
  color: #042e60;
  font-size: 122%;
  }

.h3 {
  color: #042e60;
  font-size: 111%;
}
.h3_link {
  color: #042e60;
  text-decoration: underline;
  }

.normaltext {
  font-size: 100%;
  }
.normaltext_link {
  text-decoration: underline;
  }

.copyright {
  font-size: 75%;
  }

.Handschrift18 { 
  font-family: crFont,Verdana, Arial, Helvetica, sans-serif; 
  font-size: 111%; 
  color: #333333          /*anthrazit*/
  }


/*Navigation */
nav{
  display: block;
  background: #042e60;
  height: 250%;
  text-align: center;
  }
  
nav ul{
  display: block;
  margin: 1em 0em 0em 0em;    /*Abstand oberhalb der Navigationsleiste*/
  } 
  
nav ul li{
  display: inline;
  margin: 0em 1.8em 0em 0em;      /*innerer Abstand zwischen den Wörter */
  } 

nav ul li a{
  color: #EEEEEE;
  font-size: 122%;
  text-decoration: none;
  line-height: 2.3em;
  transition: background 0.2s;
  -webkit-transition: background 0.2s;
  } 
/*
nav ul li a:hover{
  border-bottom: 0.1em solid #EEEEEE;
  }
*/

a {
  text-decoration: none;
}



/* Bilder  */

img {                     /*Flaggen*/
  width: 2.1em 
  height: 1.3em
  margin: 1em 0em 1em 0em;
}

.anfrage {                /*Anfragen*/
  height: 80%;
  max-height: 3.15em;
  width: auto;
}


.bild100 {                /**/
  width: 100%;
  max-width: 100%;
  height: auto;
}
 

.bild80 {
  width: 80%;
  max-width: 100%;
  height: auto;
}

.bild60 {                    /*Fotos quer */
  width: 60%;
  max-width: 100%;
  height: auto;
}

.bild30 {         
  width: 30%;
  max-width=100%;
  height: auto;
}

.menuebutton {         
  width: 10%;
  max-width=10%;
  height: auto;
}

.bild30margin1 {         
  width: 30%;
  max-width=100%;
  height: auto;
  margin: 1em 1em 1em 1em;
}

.map {                       /*in Törnübersicht - bis zu 3 nebeneinander*/
  width: 30%;
  max-width=100%;
  height: auto;
}

.mapEinzeln {               /*im Törnbericht - allein*/
  width: 60%;
  max-width=100%;
  height: auto;
}


@keyframes layer2Anim {
    0%{opacity:0;}
    17%{opacity:0;}
    33%{opacity:1;}
    50%{opacity:1;}
    80%{opacity:1;}
    100%{opacity:0;}
}
@keyframes layer3Anim {
    0%{opacity:0;}
    50%{opacity:0;}
    60%{opacity:1;}
    83%{opacity:1;}
    100%{opacity:0;}
}
.slideShow {
    position: relative;
}
.placeHolder {
    width: 80%;
    max-width=100%;

    visibility: hidden;
}
.layer1, .layer2, .layer3 {
    position: absolute;
    width: 80%;
    max-width=100%;

    height: 100%;
    top: 0;
    left: 10%;
    background-size: cover;
    background-repeat: no-repeat;
}
.layer1 {
    background-image: url(MY-Linda_Fotos/MY-Linda1.jpg);
}
.layer2 {
    background-image: url(MY-Linda_Fotos/MY-Linda2.jpg);
    animation: layer2Anim 10s infinite;
}
.layer3 {
    background-image: url(MY-Linda_Fotos/MY-Linda3.jpg);
    animation: layer3Anim 10s infinite;
}




#main{
	display: block;
  margin: 0em 0em 0em 10%;           /*o-r-u-l*/
  padding: 0em 10% 0em 10%;
}

#main article {
	display: inline-block;
	width: 100%;                         /*ex 100%*/
	vertical-align: top;
	margin: 0em ;
	text-align: left;
	line-height: 130%;
}


/*2spaltig - NOT IN USE 
#main article_li {
	display: inline-block;
	width: 76%;                         
	vertical-align: top;
	margin: 0em 0em 3em 0em;
	text-align: left;
}

#main aside {
	display: inline-block;
	width: 20%                           
	margin: 0em 0em 3em 0em;          
	text-align: center;
}

/*2spaltig ENDE*/ 






/*kleiner-mobil*/
@media screen and (max-width: 1200px){
	nav{
		display: block;
		height: auto;
	} 
  nav ul li{
		font-size: 100%;
    display: inline;
    margin: 0em 1em 0em 0em;
	} 
	body{
		width: 100%;
		display: block;
		font-size: 80%;
		margin: 1em 0em 1em 0em;
  }
  .map {                              /*in Törnübersicht - bis zu 3 nebeneinander*/
    width: 45%;
    max-width=100%;
    height: auto;
  }
  .mapEinzeln {                       /*im Törnbericht - allein*/
    width: 50%;
    max-width=100%;
    height: auto;
  }
  #main{
  	display: block;
    margin: 0em 0em 0em 5%;           /*o-r-u-l*/
    padding: 0em 5% 0em 5%;
  }

}



@media screen and (max-width: 700px){
	nav{
		display: block;
		height: auto;
	} 
  nav ul li{
		font-size: 90%;
    display: inline;
    margin: 0em 0.5em 0em 0em;
	} 
	body{
		width: 100%;
		display: block;
		font-size: 90%;
		margin: 0.5em 0em 0.5em 0em;
  }
	.h1{
		font-size: 110%;
		margin: 1em 0.2em 0.5em 0.2em;
  }
	.h2{
		font-size: 110%;
		margin: 0.2em 0.2em 0.2em 0.2em;
  }
	.normaltext{
		font-size: 90%;
  }
  .anfrage {                /*Anfragen*/
    height: 75%;
    max-height: 2em;
    width: auto;
  }
  .map {                              /*in Törnübersicht - bis zu 3 nebeneinander*/
    width: 90%;
    max-width=100%;
    height: auto;
  }
  .mapEinzeln {                       /*im Törnbericht - allein*/
    width: 90%;
    max-width=100%;
    height: auto;
  }

  .bild100 {                
    width: 95%;
    max-width: 100%;
    height: auto;
  }
   .bild80 {
    width: 95%;
    max-width: 100%;
    height: auto;
  }
  .bild60 {          
    width: 95%;
    max-width: 95%;
    height: auto;
  }
  .bild30 {                   /*alle hochkant*/
    width: 75%;
    max-width=75%;
    height: auto;
  }

}




@media screen and (max-width: 550px){
  nav{
		display: block;
		height: auto;
	} 
  nav ul li{
		font-size: 90%;
    display: inline;
    margin: 0em 0.2em 0em 0em;
	} 
	body{
		width: 100%;
		display: block;
		font-size: 90%;
		margin: 0.2em 0.2em 0.2em 0.2em;
  }
  .anfrage {                /*Anfragen*/
    height: 70%;
    max-height: 1.5em;
    width: auto;
  }
  .map {                              /*in Törnübersicht - bis zu 3 nebeneinander*/
    width: 90%;
    max-width=100%;
    height: auto;
  }
  .mapEinzeln {                       /*im Törnbericht - allein*/
    width: 90%;
    max-width=100%;
    height: auto;
		margin: 0.2em 0.1em 0.2em 0.1em;
  }
  .bild60 {          
    width: 95%;
    max-width: 95%;
    height: auto;
  }
}