/* CARS.css - RESPONSIVE CSS */




@font-face {
	src: url("/ab_private/classic_cars/fonts/Londrina_Shadow/LondrinaShadow-Regular.ttf");
	font-family: LondrinaShadow;
}
@font-face {
	src: url("/ab_private/classic_cars/fonts/Chalktastic/ChalktasticItalic-pEwZ.ttf");
	font-family: Chalktastic1;
}
@font-face {
	src: url("/ab_private/classic_cars/fonts/Chalktastic/Chalktastic-x1nR.ttf");
	font-family: Chalktastic2;
}
@font-face {
	src: url("/ab_private/classic_cars/fonts/Chalktastic/Chalktastic-r78L.ttf");
	font-family: Chalktastic3;
}
@font-face {
	src: url("/ab_private/classic_cars/fonts/Chalktastic/ChalktasticItalic-YYA4.ttf");
	font-family: Chalktastic4;
}
@font-face {
	src: url("/ab_private/classic_cars/fonts/Patrick_Hand/PatrickHand-Regular.ttf");
	font-family: PatrickHand;
}
@font-face {
	src: url("/ab_private/classic_cars/fonts/Eraser/EraserRegular-DO1D.ttf");
	font-family: EraserRegular;
}
@font-face {
	src: url("/ab_private/classic_cars/fonts/Eraser/EraserDust-p70d.ttf");
	font-family: EraserDust;
}
@font-face {
	src: url("/ab_private/classic_cars/fonts/Architects_Daughter/ArchitectsDaughter-Regular.ttf");
	font-family: ArchitectsDaughter;
}
@font-face {
	src: url("/ab_private/classic_cars/fonts/Sriracha/Sriracha-Regular.ttf");
	font-family: Sriracha;
}
.FontLondrinaShadow {
	font-family: LondrinaShadow;
}
.FontChalktastic1 {
	font-family: Chalktastic1;
}
.FontChalktastic2 {
	font-family: Chalktastic2;
}
.FontChalktastic3 {
	font-family: Chalktastic3;
}
.FontChalktastic4 {
	font-family: Chalktastic4;
}
.FontPatrickHand {
	font-family: PatrickHand;
}
.FontEraserRegular {
	font-family: EraserRegular;
}
.FontEraserDust {
	font-family: EraserDust;
}
.FontArchitectsDaughter {
	font-family: ArchitectsDaughter;
}
.FontSriracha {
	font-family: Sriracha;
}


  /* GENERAL SETTINGS */


/*	font-size: 15vmin; /* 1vmin = 1vw or 1vh, whichever is smaller.  */


body {
	margin-left:auto;
	margin-right:auto;
	max-width:100vw;
	padding:1em;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(0.375rem, 0.054rem + 1.429vw, 6rem);
	text-align:left;
}


* {
  box-sizing: border-box;
} 

a: {
	text-decoration:none;
}

div.Sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

.Signature {
	font-family: ArchitectsDaughter;
	font-size: 0.7em;
	color:darkorange;
}


.TextCenter {
	text-align:center;
}

.TextJustify {
	text-align:justify;
}

.TextLeft {
	text-align:left;
}

.TextRight {
	text-align:right;
}

.cursor {
	cursor: pointer;
}

a, a:visited {
  color: inherit;
  text-decoration: none;
 }

.FloatRight {
	float:right;
	cursor: pointer;
}

.FloatLeft {
	float:left;
	cursor: pointer;
}

.MappingBy2 {
	padding-top:1em;
	display:flex;
	float:left;
	text-decoration: none;
	font-size:0.7em;
}

.MappingBy {
	text-align:left;
	color:white;
	padding-top: 0.2em;
}

/* For width 400px and smaller: */
@media only screen and (max-width: 400px) {
img.ImgMappingBy {
  width:50px;
  }
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
img.ImgMappingBy {
  width:50px;
  }
}

/* For width 800px and larger: */
@media only screen and (min-width: 800px) {
img.ImgMappingBy {
  width:80px;
  }
}


img {
	object-fit: contain;
	width:100%;
	height:100%;
}

.Contain {
	object-fit: contain;
	max-width: 100%;
	height: auto;
}


img.HeaderPhoto {
	object-fit: contain;
	width:100%;
	height:100%;
}




  /* CONTAINERS */

.ContainerMasterOld {
	margin: auto;
	border:2px solid green;
	background-image:url("/ab_private/classic_cars/backgrounds/BgCreamLeather.jpg");
	padding:1em;
	width:auto;
}

.ContainerMaster {
	margin: auto;
	border:2px solid green;
	background-image:url("/ab_private/classic_cars/backgrounds/BgCreamLeather.jpg");
	padding:1em;
	width:90%;
}


.ContainerW3COld {
	margin: auto;
	width:90%;
	text-align:left;
	width:90%;

}




  /* GRIDS */

.GridNavBar{
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	grid-column-gap:1em;
	grid-gap:1em;
	grid-auto-rows:minmax (10px, auto);
	text-align:center;
	padding-left:0em;
	padding-right:0em;
	padding-top:1em;
	padding-bottom:0.2em;
	border:none;
	z-index: 1;
}







  /* NAVIGATION SETTINGS */

#NavBar{
	padding:0em 0em 1em 0em;
	text-decoration:none;
}


.MyRedNavButton {
	background-image:url("/ab_private/classic_cars/backgrounds/BgRedLeather.jpg");
	color:white;
	padding: 0.5em 1em;
	border: 1px solid black;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	text-decoration:none;
	text-align:center;
}

.MyNavButton {
	padding: 0.5em 0.5em;
	border: 1px solid black;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	text-decoration:none;
	text-align:center;
	background:black;
	color:white;
}

.MyNavButton:hover{
	background-color:coral;
}



/* JOURNEY PAGES */
/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

.JourneyYearsButton {
	display: inline-block;
	padding: 0.2em;
	border: 2px solid darkgray;
	border-radius: 4px;
	border-style: solid;
	margin-top: 0em;
	margin-bottom: 0.5em;
	min-width:5vw;
}

.JourneyYearsButton:hover {
	border: 2px solid red;
	background-image:url("/ab_private/classic_cars/backgrounds/BgBlackLeather.jpg");
}

.JourneyYearsBlackButton {
	display: inline-block;
	padding: 0.2em;
	border: 2px solid darkgray;
	border-radius: 4px;
	border-style: solid;
	margin-top: 0em;
	margin-bottom: 0.5em;
	min-width:5vw;
}

.JourneyYearsBlackButton:hover {
	border: 2px solid red;
	background-image:url("/ab_private/classic_cars/backgrounds/BgBlackLeather.jpg");
}

.JourneyYearsRedButton {
	display: inline-block;
	padding: 0.2em;
	border: 2px solid darkgray;
	border-radius: 4px;
	border-style: solid;
	margin-top: 0em;
	margin-bottom: 0.5em;
	min-width:5vw;
}



div.MonthText {
	display:block;
	text-align: center;
	font-size:1.5em;
	font-weight:bold;
	padding:0.5em;
}

.JourneyMonthContainer {
	overflow:hidden;
	text-align:justify;
	margin: 0.5em auto 1em auto;
	padding:0em 1em 0em 1em;
	border:1px lightgray solid;
}

.JourneyDate {
	display:block;
	font-weight: bold;
	line-height:1.5em;
	background:green;
	color:white;
	margin:auto;
	text-align:left;
	width:100%;
	padding-left:1em;
}

img.Map {
	display:flex;
	float:left;
	max-width:20vw;
	margin-right:1em;
	margin-bottom:0em;
	margin-left:0;
	margin-top:0.5em;
	border-style: inset;
	border-width: 0.2vw;
	border-color: darkgray;
}

.JourneyDetails {
	overflow:hidden;
	text-align:justify;
	margin-left:auto;
	margin-right:auto;
	padding-right:2em;
	padding-left:2em;
	padding-bottom:0.5em;
	border:2px black;
	font-family: ArchitectsDaughter;
}




.JourneyMonthContainer {
	overflow:hidden;
	text-align:justify;
	margin: 0.5em auto 1em auto;
	padding:0em 1em 0em 1em;
	border:1px lightgray solid;
}

.TextAreaBgBlackLeather {
	background-image:url("/ab_private/classic_cars/backgrounds/BgBlackLeather.jpg");
	color:white;
	font-size:1em;
	padding:1em;
}

div.GridDate{
	display:grid;
	grid-template-columns:repeat(12, 1fr);
	grid-column-gap:1em;
	grid-gap:0em;
	grid-auto-rows:minmax (10px, auto);
	text-align:center;
	justify-items:center;
	align-items:center;
}

a.JourneyMonths {
	display:inline-block;
	width: 5vw;
	height: auto;
	text-align:center;
	border: 1px solid black;
	border-width: 3px;
	border-style: inset;
	border-color: darkgreen;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
	text-decoration:none;
	font-size: 70%;
	padding:0.4em;
	background-image:url("/ab_private/classic_cars/backgrounds/BgWhiteLinnen.jpg");
	color:black;
}

a.JourneyMonths:hover {
	text-decoration:none;
	color:white;
	background-image:url("/ab_private/classic_cars/backgrounds/BgRedLeather.jpg");
	border-color: darkgray;
}

.EndMileage {
	color: gray;
	font-size:0.7em;	
}

.JourneyRetTopPage {
	width:100%
	color: black;
	text-align:center;
	background-color: #ccffcc;
	border: 5px #66ccff;
	border-width: 2px;
	border-style: groove;
	padding: 10px;
	border-radius: 1px;
	box-shadow: 0px 0px 0px 4px rgba(0,0,0,0.3);
	text-decoration: none;
	margin-bottom:0.5em;
}

a.OrangeUnderline:link {
	color:inherit;
	text-decoration:none;
}

a.OrangeUnderline:hover {
	text-decoration:underline;
	text-decoration-thickness: 4px;
	text-decoration-color: orange;
}

.Note {
	font: italic bold 14px/20px Georgia, serif;
	font-style: italic;
	font-size: 60%;
	color: green;
	text-align:justify;
}

.Fuel {
	color: darkorange;
	font-size: 0.8em;
}

img.ThumbRight {
	object-fit:contain;
	float: right;
	max-width:20vw;
	max-width:20vw;
	border-style:inset;
	border-width:2px;
	cursor: grab;
	cursor: -webkit-grab;
	margin: 1em 0em 1em 1em; /* Top, Right, Bottom, Left */
	border: 3% solid white;
	border-radius: 2%;
	-webkit-border-radius: 2%;
	box-shadow: 0.2vw 0.2vw 0.3vw 0.1vw #808080; /* (R)horizontal offset (R)vertical offset, (Op)blur radius, (Op)spread radius, (Op)color */
	-webkit-box-shadow: 0.2vw 0.2vw 0.3vw 0.1vw #808080;
	transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
}


img.ThumbLeft {
	object-fit:contain;
	float: left;
	max-width:20vw;
	max-width:20vw;
	border-style:inset;
	border-width:2px;
	cursor: -webkit-grab;
	cursor: grab;
	margin: 1em 1em 1em 0em; /* Top, Right, Bottom, Left */
	border: 3% solid white;
	border-radius: 2%;
	-webkit-border-radius: 2%;
	box-shadow: 0.2vw 0.2vw 0.3vw 0.1vw #808080; /* (R)horizontal offset (R)vertical offset, (Op)blur radius, (Op)spread radius, (Op)color */
	-webkit-box-shadow: 0.2vw 0.2vw 0.3vw 0.1vw #808080;
	transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
}

img.ThumbFullWidth {
	object-fit:contain;
	width:100%;
	border-style:inset;
	border-width:2px;
	cursor: -webkit-grab;
	cursor: grab;
	margin: 1em 0em 1em 0em; /* Top, Right, Bottom, Left */
	border: 3% solid white;
	border-radius: 2%;
	box-shadow: 0.2vw 0.2vw 0.3vw 0.1vw #808080; /* (R)horizontal offset (R)vertical offset, (Op)blur radius, (Op)spread radius, (Op)color */
}

video.ThumbLeft {
	object-fit:contain;
	float: left;
	max-width:20vw;
	max-width:20vw;
	border-style:inset;
	border-width:2px;
	cursor: -webkit-grab;
	cursor: grab;
	margin: 0.5em 1em 0.5em 0em; /* Top, Right, Bottom, Left */
	border: 3% solid white;
	border-radius: 2%;
	-webkit-border-radius: 2%;
	box-shadow: 0.1vw 0.1vw 0.6vw #009900; /* (R)horizontal offset (R)vertical offset, (Op)blur radius, (Op)spread radius, (Op)color */
	-webkit-box-shadow: 0.1vw 0.1vw 0.6vw #009900;
	transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
}

video.ThumbRight {
	object-fit:contain;
	float: right;
	max-width:20vw;
	max-width:20vw;
	border-style:inset;
	border-width:2px;
	cursor: -webkit-grab;
	cursor: grab;
	margin: 0.5em 0em 0.5em 1em; /* Top, Right, Bottom, Left */
	border: 3% solid white;
	border-radius: 2%;
	-webkit-border-radius: 2%;
	box-shadow: 0.1vw 0.1vw 0.6vw #009900; /* (R)horizontal offset (R)vertical offset, (Op)blur radius, (Op)spread radius, (Op)color */
	-webkit-box-shadow: 0.1vw 0.1vw 0.6vw #009900;
	transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
}

/* PHOTO ENLARGEMENT CSS */
/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

/* The Modal (background) */
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	height:100vh;
	overflow: auto;
	background: white;
}


/* Modal Content */
.modal-content {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding: 0em 0em 0em 0em;
	background: white;
}


div.PhotoTitle {
	display:flex;
	line-height:50px;
	width:99vw;
	background:green;
	color:white;
	text-align: center;"
}

div.CloseButton {
	line-height:50px;
	width:8vw;
	background:#800000;
	color:white;
	text-align: center;"
}

.mySlides {
	margin-left:auto;
	margin-right:auto;
	width:99vw;
	border:5px solid green;
}


img.Large {
	object-fit: contain;
	width:auto;
	margin-left:auto;
	margin-right:auto;
}

.CloseButtonn {
	display:inline-block;
	width:100%;
	margin-left: auto;
	margin-right: auto;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:linear-gradient(to bottom, red 5%, black 100%);
	border:10px groove gray;
	cursor:pointer;
	color:white;
	font-family:Arial;
	font-size:1em;
	text-align: center;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
	padding:0.5em 1em 0.5em 1em;
}

.CloseButton:hover {
	background:linear-gradient(to bottom, #dfdfdf 5%, #ededed 100%);
	background-color:#dfdfdf;
	color:black;
}

.CloseButton:active {
	position:relative;
	top:1px;
}

/* ENLARGEMENTS - JOURNEY PAGES */
/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

.GridContainer{
	display:grid;
	grid-template-columns:repeat(12, 1fr);
	text-align:center;
}

.GridContainer > div:nth-of-type(1) {
	grid-column: 1 / 12;
	text-align:center;
}

.GridContainer > div:nth-of-type(2) {
	grid-column: 12/ 13;
	text-align:center;
}

.GridContainer > div:nth-of-type(3) {
	grid-column: 1 / 13;
	height:100vh;
}

.GridContainer > div {
	border:1px solid white;
	width:auto;
	background-size:contain;
	background-attachment: fixed;
}

.ContainerTitle{
	text-align:center;
	background:green;
	color:white;
	padding:0.5em 0em 0.5em 0em;
}

.ContainerClose {
	background:red;
	color:white;
	padding-right:1em;
	padding:0.5em 0em 0.5em 0em;
	text-align:center;
}

.ContainerImage {
	text-align:center;
	background:black;
	position: relative;
	height: 100%;
	width:100%;
}

.Absolute-Center {
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
}

img {
	object-fit:contain;
	max-width:98vw;
	max-height:85vh;
}


/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

/* PHOTO PAGES */
/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */


.PhotoContainer{
	padding:1em;
	margin-top:2em;
}

#PhotoTextArea {
	margin-left:2vw;
	margin-right:2vw;
	padding-left:2vw;
	padding-right:2vw;
	border:1px lightgray solid;
	text-align:center;
	color:white;
}

.GridPhotos {
	width:100%;
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	grid-gap:1em 1em;
	align-items:center;
	align-self:center;
}

.GroupTitle{
	padding:1em 0em 0.5em 0em;
	text-align:left;
	font-size: 1.4em;
	font-weight:bold;
}

.GridPhotos > div{

	/*background:#eee;*/
}

img.PhotoPage {
	object-fit: contain;
	width:100%;
	height:100%;
	cursor: grabbing;
}

img.PhotoPageVideo {
	object-fit: contain;
	width:100%;
	height:100%;
	cursor: grabbing;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	-moz-box-shadow: 4px 4px 14px #000;
	-webkit-box-shadow: 4px 4px 14px #000;
	box-shadow: 10px 4px 10px #000;
	-moz-transform:rotate(0deg);
	-webkit-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
	border: 2px solid orange;
}

img.HeaderPhoto {
	object-fit: contain;
	width:100%;
	height:100%;
}


/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ END PHOTO PAGE $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */



a.DocumentButton {
	text-decoration:none;
	opacity: 0.5;
	font-size:10px;
	font-style: italic;
	display:inline-block;
	background-color:darkgreen;
	color:white;
	padding:5px;
	text-alight:center;
	font-family:verdana;	
	border-radius:4px;
	border:2px orange solid;
}




/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ DROP DOWN MENU $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */


.dropbtn {
	background:red;
	color:white;
	padding: 0.5em 1em;
	border: 1px solid black;
	border-radius: 4px;
	border-width: 1px;
	border-style: solid;
	text-decoration:none;
	text-align:center;
	cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: coral;
}

.dropdown {
  position: relative;
  display: inline-block;
	width: 100%;

}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {background-color: coral;}

.show {display: block;}