/*  =========================================================
 *  Project:       web_martin-huber-thurgau_2015
 *  Description:   Stylesheet zur Formatierung der div's
 *  @creator       Thinkin-Tags v0.5.3
 *  @framework     YAML v4.1.2
 				   und Bootstrap
 *  @file          screen.css
 *  Datum:         7.04.2017
 *  Autor:         Monika Koller
 *  Webseite:      www.kohu.ch
========================================================== */

@media screen {
/* ==========================
1. scrollbar erzwingen
============================ */	
html {
	overflow-y: scroll; 
}
/* ==========================
2. Bildschirmfüllendes HG-Bild
============================ */	
body{
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
body.home_hg{ /* fotophasie */
	background: url(../images/hg/DSC01988.jpg) no-repeat center top fixed #999999;
}
body.reisen_hg{ /* reisen */
	background: url(../images/hg/IMG_5080.jpg) no-repeat center top fixed #999999;
}
body.tiere_hg{ /* tiere */
	background: url(../images/hg/IMG_9257.jpg) no-repeat center top fixed #999999;
}
body.keramik_hg{ /* fotoalbum */
	background: url(../images/hg/IMG_9209.jpg) no-repeat center top fixed #999999;
}
body.fotoalbum_hg{ /* fotoalbum */
	background: url(../images/hg/IMG_9112.jpg) no-repeat center top fixed #999999;
}
body.impressum{ /* impressionen */
	background: url(../images/hg/DSC01816.jpg) no-repeat center top fixed #999999;
}

/* ==========================
3. Allgemein
============================ */
.ym-wrapper {
	margin: 0 auto;
	max-width: 80em; 
	width: auto;
	}
.ym-wbox {
	padding: 1em 1em 0 1em ; 
}
	.ym-gbox {
	}
/* ==========================
4. header
============================ */	
.ym-gbox-left_header{

}
.ym-wbox_header {
	padding: 2em 1em 0.25em 1em ; 
}
#header, h1{
	 text-align: center;
}	
/* ==========================
5. main - Navigation
============================ */	
#main {
	/* Transparente box*/
	/*background-color: rgba(255,255,255,0.4);*/
    background: linear-gradient(#383838, #282828);
	z-index:9999;
}
#nav {
}
.ym-gbox-left_nav{
	margin:0;
}
.ym-wbox_navi{
	margin: 1em 1em 0.25em 1em; /* Aussenabstand wie footer */
}
/* ==========================
6. secondary - Inhalt Allgemein
============================ */
#secondary {
}
.ym-wbox_inhalt { 
	padding: 0 6em 6em 6em ; /*Innenabstand=Inhalt ganz zur Navigation */
	margin: 0.25em 1em 0 1em; /* Aussenabstand gelb */
	background-color: rgba(255,255,255,0.4); /* Transparente box*/
	min-height:48em;
}
.ym-wbox_inhalt_home { /* index.hmtl und tiere*/
	padding: 0 6em 6em 6em ; /*Innenabstand=Inhalt ganz zur Navigation */
	margin: 0.25em 1em 0 1em; /* Aussenabstand gelb */
	background-color: rgba(255,255,255,0.4); /* Transparente box*/
	min-height:48em;
	}
.ym-wbox_inhalt_impressum{
	padding: 0 6em 6em 6em ; /*Innenabstand=Inhalt ganz zur Navigation */
	margin: 0.25em 1em 0 1em; /* Aussenabstand gelb */
	background-color: rgba(255,255,255,0.4); /* Transparente box*/
	min-height:48em;
}
/*.ym-gbox-left_inhalt { ?????????????????
	margin: 0 3em 0 0 ; 
	padding: 1.5em 1em 2.3em 3em;
	min-height:35em;
}*/
.breadcrumbs {
	padding: 2em 0 3em 0;
	margin: 0 1em 0 1em ;
	font-style: italic;
	text-decoration: underline;
	color: #999;
	font-size: 0.9em;
}
/* ==========================
   secondary - Inhalt Einteilung Galerie swipebox
============================ */	
/*die selbe Einst wie .ym-gbox im base.css und ym-gbox-right im screen.css */
.ym-gbox-left {
	margin: 0 0 0 0;
	padding: 0 0.625em 0 0.625em ;
}
.ym-gbox-right {
	margin: 0 0 0 0;
	padding:0  0.625em 0 0.625em ;
	}
.flexible_galerie {
	max-width: 100%;
	margin:0.375em 0 0.375em 0;
	box-shadow:0 0 10px rgba(0,0,0,0.8) /* Bildschatten */
}
/* ==========================
   secondary - Inhalt Swipebox
   fotoalbum.html, fotophasie.html, fotophasie_oggl.html, keramik.html, tiere.html
============================ */
.container_swipebox{
	margin-left: auto;
    margin-right: auto;
    padding:1em;
	}
	.container_swipebox_filter{
	margin-left: auto;
    margin-right: auto;
    padding:0em 1em 0em 1em;
	}
/* ==========================
8. footer
============================ */	
#footer {
	/* Transparente box*/
	/*background-color: rgba(255,255,255,0.4);*/
	background: linear-gradient(#383838, #282828);
	color:#ccc;
	}
.ym-wbox_footer {
	padding: 0.70em 0; /* abstand oben und unten */
	margin: 0.25em 1em 1em 1em; /* Aussenabstand wie Menu */
}
/* ==========================
9. diverses
============================ */	
		#teaser {
		position: relative;
	}
}
/*  =====================================
  hier wechselt das Menü zu Hamburger
========================================= */
@media only screen and ( max-width: 62.5em ) /* war 62.5em 1000px */
{

.ym-wbox_inhalt { 
	padding: 0 2em 0 2em ; /*Innenabstand=Inhalt ganz zur Navigation */
}
.ym-wbox_inhalt_home { 
	padding: 0 3em 0 2em ; /*Innenabstand=Inhalt ganz zur Navigation */
}
.ym-wbox_inhalt_impressum { 
	padding: 3em 3em 0 1em ; /*Innenabstand=Inhalt ganz zur Navigation */
	margin: 0.25em 1em 0 1em; /* Aussenabstand gelb */
}
.isotopeContainer3 figure {
	margin:1em;
}
			#secondary .ym-g25 {
		width: 50%;
	}
}

@media only screen and (max-width: 760px) { /* für iPad 2 hoch */

	#secondary .ym-g50 {
		float: none;
		width: auto;
	}
	#secondary .ym-g25 {
		width: 50%;
	}
			#secondary .ym-g25 {
		width: 100%;
	}
	.ym-hlist ul {
		display: block;
		float: none;
	}
	.ym-hlist ul li {
		display: block;
		float: none;
	}
	.ym-gbox-left {
		margin: 0;
	}
/* Box links = Inhalt Text */
#secondary .ym-g75 { /* ganze Breite brauchen */
	width: 100%;
}

.ym-gbox-left_inhalt{ /* Box Links (Inhalt) ohne Abstand links */
	margin:0;
}
.ym-gr{
	margin:0; /* base aufheben mit -5px*/
}
/* Inhalt Anzeigen - Galeriebilder */
#secondary .ym-g16 { /* ganze Breite brauchen */
	width: 33%; 
	/* bei 100% wird ein Bild angezeigt / 
	bei 50% werden 2 Bilder angezeigt / 
	bei 25% werden 4 Bilder angezeigt */
}

.ym-wbox_inhalt_home { /* index.hmtl und tiere*/
	padding: 3em 2em 2em 0em ; /*Innenabstand=Inhalt ganz zur Navigation */
	margin: 0.25em 1em 0 1em; /* Aussenabstand gelb */

}
.ym-wbox_inhalt { /* index.hmtl und tiere*/
	padding-top: 3em; /*Innenabstand=Inhalt ganz zur Navigation */
	margin: 0.25em 1em 0 1em; /* Aussenabstand gelb */

}
.breadcrumbs{
	display:none;
}
}

@media only screen and (max-width: 480px) { /* für iPhone */
	/*.overlay {
		display: none;
	}*/
	.ym-searchform {
		display: none;
	}

	body {
		font-size: 100%;
	}

	h1 {
		font-size: 150%;
	}

	h6 {
		font-size: 100%;
	}
	

/* Box links = Inhalt Text */
/*.ym-gbox-left_inhalt{  Abstände anpassen??????????????
	padding: 1.5em 0.5em 0.5em 0.5em; 
}*/

/* Inhalt Anzeigen - Galeriebilder */
#secondary .ym-g16 { /* ganze Breite brauchen */
	width: 50%; 
	/* bei 100% wird ein Bild angezeigt / 
	bei 50% werden 2 Bilder angezeigt / 
	bei 25% werden 4 Bilder angezeigt */
}

.ym-grid .col-sm-6{
	width:100%;
}

}