/* CSS Document pro FotoAlba */

h1 {font-size:3vw;}
  
p { text-align: left; margin-bottom: 1vw; }

a { text-decoration-style: dashed; color: black; }
a:hover { text-decoration-style: solid; color: #79572a; }

.datum { font-size: 1.3vw; font-weight: 200; color: #74522d; }
.nobreak {white-space: nowrap;}
.gallery_error {width: 100%; background: black; color: red; font-weight: bold; padding: 2vw;}

.breadcrumb_nav {
  background: #99764F;
  width: 100%;
  margin: auto;
  padding: 0.3vw 0.3vw 0.3vw 2.5vw;
  font-size: 1.2vw;
  font-weight: 200;
}

.breadcrumb_ico { font-size: 1.4vw; }

.breadcrumb_nav a {  text-decoration:none; }
.breadcrumb_nav a:hover { text-decoration:underline; color: #000000; }

.trip-list {
  list-style: square;
  list-style-position: outside;
  text-align: left;
  margin-left: 40px;
}  

/* ############ _ R E S P O N S I V E _ I F R A M E _ ######################## */
.intrinsic-container {
  position: relative;
  height: 0;
  overflow: hidden;
}
 
/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
  padding-bottom: 56.25%;
}
 
/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
  padding-bottom: 75%;
}
 
.intrinsic-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ############ _ M E D I A _ S C R E E N _ Q U E R Y _ ###################### */

@media only screen and (min-width: 320px) {  

  /* Small screen, non-retina */
  details {
    margin-top: 2vw;
    margin-bottom: 2vw;
    font-size: 3.2vw;    
  }
  h1 { font-size: 4vw; }
  p { margin-bottom: 1.5vw; }
  .datum { font-size: 2.5vw; }
  .breadcrumb_nav { font-size: 2.4vw; }
  .breadcrumb_ico { font-size: 2.6vw; }
  .trip-list { margin-left: 12px; }  
}

@media
only screen and (-webkit-min-device-pixel-ratio: 1.3)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 1.3)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2.6/2)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 1.3)      and (min-width: 320px),
only screen and (                min-resolution: 124.8dpi) and (min-width: 320px),
only screen and (                min-resolution: 1.3dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query - iphone SE */
  details {
   margin-top: 2vw;
   margin-bottom: 0vw;
   font-size: 5vw;    
  }
  h1 { font-size:6vw; }
  p { margin-bottom: 1.8vw; }
  .datum { font-size: 3vw; }
  .breadcrumb_nav { font-size: 3vw; }
  .breadcrumb_ico { font-size: 3.2vw; }
  .trip-list { margin-left: 15px; }    
}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */
  details {
    margin-top: 1.5vw;
    margin-bottom: 0;
    font-size: 2.2vw;    
  }  
  h1 {font-size: 3.5vw;}
  p { margin-bottom: 1vw; }
  .datum { font-size: 2vw; }
  .breadcrumb_nav { font-size: 1.8vw; }
  .breadcrumb_ico { font-size: 2vw; }  
  .trip-list { margin-left: 30px; }
}

@media
only screen and (-webkit-min-device-pixel-ratio: 1.3)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 1.3)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2.6/2)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 1.3)      and (min-width: 700px),
only screen and (                min-resolution: 124.8dpi) and (min-width: 700px),
only screen and (                min-resolution: 1.3dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */
  h1 {font-size: 3.2vw;}
  .breadcrumb_nav { font-size: 1.5vw; }
  .breadcrumb_ico { font-size: 1.7vw; }
}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */
  details {
    margin-top: 1.5vw;
    margin-bottom: 0;
    font-size: 1.7vw;    
  }
  footer { font-size: 1.5vw; }  
  h1 { font-size: 3vw; }
  p { margin-bottom: 0.5vw; }
  .datum { font-size: 1.3vw; }
  .breadcrumb_nav { font-size: 1.2vw; }
  .breadcrumb_ico { font-size: 1.4vw; }
  .trip-list { margin-left: 40px; }  
}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

/* ########################################################################### */
/* ROW + CARD + BUTTON */
.fancyLink { text-decoration-style: dashed; color: white; }
.fancyLink:hover { text-decoration-style: solid; color: lightslategray; }

* {
	box-sizing: border-box;
}
/* Float columns side by side */
.column {
	float: left;
 /*width: 25%;*/
	padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {
	margin: 35px -5px;
}

/* Clear floats after the columns */
.row:after {
	content: "";
	display: table;
	clear: both;
}

/* Responsive columns */
@media screen and (max-width: 500px) {
	.column {
		width: 100%;
		display: block;
		margin-bottom: 20px;
	}
}

.card {
	/* Add shadows to create the "card" effect */
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
	border-radius: 5px; /* 5px rounded corners */
	background-color: #e5dacd;
}
.card p {
	padding: 0.5rem;
	margin: 0.5rem;
	text-align: center;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
/* Add rounded corners to the top left and the top right corner of the image */
img {
	border-radius: 5px 5px 0 0;
}
/* Add some padding inside the card container */
.container {
	font-size: 1.2rem;
	padding: 2px 6px;

	.button {
		position: relative;
		border-radius: 4px;
		border: 2px solid darkslategray;
		padding: 5px 15px;
		color: black;
		font-size: 1rem;
		background: #99764F;
		box-shadow: 0 2px 10px rgba(0,0,0,.15);
		cursor: pointer;
		user-select: none;
		transition: all .3s;

		&:hover {
			transform: scale(1.03);
			background: #EED6AE; /*rgba(153, 118, 79,.25);*/
			box-shadow: 0 2px 20px rgba(0,0,0,.15);
		}

		&:active {
			transform: scale(.96);

			.badge {
				transform: scale(1.2);
			}
		}
	}

        .badge {
            border-radius: 50%;
            width: 27px;
            height: 27px;
            display: block;
            position: absolute;
            color: darkslategray;
            font-size: 0.9rem;
            background:  #EED6AE /*rgba(31,206,255,1)*/;
            border: 2px solid darkslategray;
            display: flex;
            align-items: center;
            justify-content: center;
            top: -12px;
            right: -12px;
            transition: all .3s;
        }
}