/* main-f.css - 04.08.19 
Stil-Datei für jAlbum-Skin "nfb-2019-SkybBue2" für slide.htt */

/* allgemeine Angaben für alle devices */
body, html{margin:0;font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size:1rem;
	font-weight:100;
	color:#464646;
    text-align: center;
	background-color: #fff;
    height: 100vh;
}

a {color: #0a39cc;text-decoration: none;background-color: transparent;}
a:hover {color: rgb(208, 40, 18);background-color: rgb(255, 255, 255);}
img {width: auto;height: auto;max-width: 100%;max-height: 90vh;}

.titel  {grid-column:1 / 2;grid-row:1 / 2;background-color: skyblue;} /* z-index: 3; */
.li     {grid-column:2 / 3;grid-row:1 / 2;background-color: skyblue;}
.heim   {grid-column:3 / 4;grid-row:1 / 2;background-color: skyblue;}
.re     {grid-column:4 / 5;grid-row:1 / 2;background-color: skyblue;}
.inhalt {grid-column:1 / 5;grid-row:2 / 3;background-color: #fff;}
.fuss   {grid-column:1 / 4;grid-row:3 / 4;background-color: skyblue;padding:5px;} /* color: #464646; */
.bildnr {grid-column:4 / 5;grid-row:3 / 4;background-color: skyblue;padding:5px;}
.clear {clear: both;}

/* Mediaqueries: */
@media screen and (min-width:320px) and (max-width:479px){
h1{font-size:1.4rem;font-weight:300;line-height:0.9;}
p,a{font-size:1.1rem;font-weight:100;}
.gridcontainer {display: grid;width : 100%;height : auto;grid-template-rows: 5% 1fr 5%;grid-template-columns: 1fr 10% 18% 8%;align-content : center;}
}
@media screen and (min-width:480px) and (max-width:799px){
h1{font-size:1.5rem;font-weight:300;line-height:0.9;}
p,a{font-size:1.1rem;font-weight:100;}
.gridcontainer {display : grid;width : 100%;height : auto;grid-template-rows: 5% 1fr 5%;grid-template-columns: 1fr 10% 18% 8%;align-content : center;}
}
@media screen and (min-width:480px) and (max-width:799px) and (orientation: landscape){
h1{font-size:1.5rem;font-weight:300;line-height:0.9;}
p,a{font-size:1.1rem;font-weight:100;}
.gridcontainer {display : grid;width : 100%;height : auto;grid-template-rows: 5% 1fr 5%;grid-template-columns: 1fr 8% 12% 8%;align-content : center;}
}
@media screen and (min-width:800px) and (max-width:1199px){
h1{font-size:1.6rem;font-weight:300;line-height:1;}
p,a{font-size:1.2rem;font-weight:100;}
.gridcontainer {display : grid;width : 100%;height : auto;grid-template-rows: 5% 1fr 5%;grid-template-columns: 1fr 7% 10% 8%;align-content : center;}
}
@media screen and (min-width:800px) and (max-width:1199px) and (orientation: landscape){
h1{font-size:1.6rem;font-weight:300;line-height:1;}
p,a{font-size:1.2rem;font-weight:100;}
.gridcontainer {display : grid;width : 100%;height : auto;grid-template-rows: 5% 1fr 5%;grid-template-columns: 1fr 6% 10% 8%;align-content : center;}
}
@media screen and (min-width:1200px) and (max-width:1599px){
h1{font-size:1.7rem;font-weight:300;line-height:1;}
p,a{font-size:1.3rem;font-weight:100;}
.gridcontainer {display : grid;width : 100%;height : auto;grid-template-rows: 5% 1fr 5%;grid-template-columns: 1fr 6% 8% 7%;align-content : center;}
}
@media screen and (min-width:1600px){
h1{font-size:1.8rem;font-weight:300;line-height:1;}
p,a{font-size:1.4rem;font-weight:100;}
.gridcontainer {display : grid;width : 100%;height : auto;grid-template-rows: 5% 1fr 5%;grid-template-columns: 1fr 6% 8% 7%;align-content : center;}
}