/* 
By Jerry A. Sierra for The New World 
Last updated on: 2/8/2025
------------------------------------------------------------- */

/* ================================================  Main Layout
================================================================= */
 

* {
	margin: 0;
	border: 0;
	padding: 0;
}

article, 
section, 
aside, 
header, 
p,
footer, 
figure, 
figcaption {
	display: block;
} 

body {
	background: #fff;
	width: 100%;
	height: 100%;
}
.body2,
.body3 {
	background-color: linen;
}
 
.body5 {
	background-color: floralwhite;
}

 /* ---------------------------------------- Typography ---- */

h1, 
h2, 
h3,
header {
	 font-family: Verdana, Geneva, "Arial Black", Sans-serif;
     color: #000;          /* -- black txt -- */
}

p {
	font-family: 'Roboto', Geneva, Verdana, Arial, Tahoma, Sans-serif;
}

a, 
li, 
footer, 
nav,
.footer {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";
	font-size: medium;
	color: black;          
}

header {
		height: 110px; 
	   	width: 100%;
		background-color:rgba(244, 194, 237, 0.2);
		padding: 10px, auto;
}

footer {
	right: 25px;
	bottom: 2px;
	position: relative;
	width: 90%;
	font-size: small;	
	font-style: normal;
	line-height: 1.5;
	vertical-align: middle;	
	text-align: center;
    color: #000;                /* -- Blck txt -- */
	padding: 2px;
	border-top: thin #f81216;
    padding-bottom: 5px;
	background: #f8f8ff;   /* --- Ghost White --- */
	opacity: 0.7;
}

 
 /* --------------------------------------------- Divs ---- */

div {
	width: 90%;
	vertical-align: top;
	letter-spacing: normal;
	text-indent: 0;
    word-spacing: normal;
	clear: both;
}

 /* -------------------------------  Background DIVS --- */

.DivGal-clear {
	position: relative;
	width: 80%;
	margin: 0 10%;
	letter-spacing: normal;
	clear: both;
	border: black solid 1px;
	background-color:rgba(0, 0, 0, 0.4);
}

.DivGal-clear2 {
	position: relative;
	width: 80%;
	margin: 0 10%;
	clear: both;
	align-content: center;
	border: #DEDFB9 solid 1px;   /* light yellow */
}

 /* --------------------------------- Small Divs ----- */

.div-in, 
.div-in1, 
.div-in2, 
.div-in3, 
.div-in4, 
.div-in5, 
.div-in6, 
.div-in7, 
.div-in8,
.div-ina,
.div-in1a,
.div-in2a,
.div-in8a {
	width: 80%;
   	text-align: center;	
	text-indent: 0;
	padding: 4%;
	border: 1px solid #f2f2f2;
	margin: auto;
	clear: both;
}

/* ----------------------- Small Divs - Wider Width ----- */
.div-ina,
.div-in1a,
.div-in2a,
.div-in8a {
	width: 90%;
	border: 0;
}

/* ----------------------- Small Divs - BGD Colors ----- */
.div-in1,
.div-in1a {
	background-color: mistyrose;     /* mistyrose */
}
.div-in2,
.div-in2a {
	background-color: azure;     /* azure */
}
.div-in3 {
	background-color: ivory;     /* ivory */
}
.div-in4 {
	background-color: cornsilk;     /* cornsilk */
}
.div-in5 {
	background-color: mintcream;     /* mintcream */
}
.div-in6 {
	background-color: floralwhite;     /* floralwhite */
}
.div-in7, 
.div-in8,
.div-in8a {
	background-color: white;  
}
.div-ina {
	padding: 0;
}                

/* -------------------------  Multi-Column for Small Scrns ------ */
.div-in9 {
	width: 80%;
    -ms-column-count: 1;
	-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
	column-count: 1;
	-ms-column-width: auto;
	-webkit-column-width: auto; /* Chrome, Safari, Opera */
    -moz-column-width: auto; /* Firefox */
    column-width: auto;	
	-ms-column-gap: 10px;
	-webkit-column-gap: 10px; /* Chrome, Safari, Opera */
    -moz-column-gap: 10px; /* Firefox */
    column-gap: 10px;	
	text-align: left;
    -ms-column-rule: 1px;
	-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px solid lightblue; /* Firefox */
    column-rule: 1px solid lightblue;
    padding: 0 5px 0 0;
	padding-left: 15px;
	background-color: #fff;     /* white */
	border: 1px solid #f2f2f2;
	text-indent: 0;
	margin: auto;
}

/* --------------------------------------- Wide Gallery ---- */

.div-Landscapes {
	width: 100%;
   	text-align: center;	
    padding: 0;
	margin: 0;
	clear: both;
}

/* --------------------------------------------  Links ---- */

a {
	text-decoration: none;	
	border:thin #000000;
	padding: 0 10px; 
}
li > a {
	text-decoration: underline;	
	font-size: medium;	
	padding: 0 10px 0 0;
}

a:hover,
a:focus {
    color: #ffde01;        /* -- Yellow -- */
    text-decoration: underline;
	background-color: cornflowerblue;
}

a > img {
	text-decoration: none;
}
a:hover img {
	text-decoration: none;
}

/* ===============================================  Headings
============================================================= */

h1 a {
	color: #000055;   /* -- very Drk Blue -- */ 
}	
	
h1 {
	font-weight: 500;
	letter-spacing: 1px;
}

.One {
	 font-size: 250%; 
     text-align: center;
     color: #B9000C;                /* -- Drk Red txt -- */
     border-top: 0;
	letter-spacing: 1px;
	line-height: 1.5;
	 margin: 10px 0;
	 padding-top: 2px;
     text-shadow:2px 2px 3px #000;  /* Unsupported in IE */
}
 
h2, 
h3 {
    margin-bottom: 1px;
	font-weight: 500;
} 


/*===============================================  Paragraphs 
============================================================= */

.firstP::first-letter {
	font-size: x-large;
	-webkit-initial-letter: 4;
	initial-letter:4;
	color: #350E0E;
	font-weight: bold;
}

p {
	font-size: medium;
	color: #000;          /* -- black text -- */
	width: 90%;
	font-style: normal;
	vertical-align: middle;
	padding: 10px;
	line-height: 1.4;
	text-align: left;
	border: 0;
	border-top-color:aquamarine;
}
.p2 {
	font-size: small;
}
.p3 {
	font-size: medium;
	color: #fff;          /* -- white text -- */
}


  /*  ---------------------------------- Misc Text ------ */

.ctr {
    text-align: center;
}
.footer {
	font-size: small;
	color: #999;
}
.Strng {
	font-size: 300%;
}
.StrngWhite {
	font-size: 300%;
	text-shadow: #fff 1px 0 10px; 
	font-color: "white";
}
ul {
	list-style: none;
}
li {
	text-align: left;
	padding-bottom: 4px;
}
.attention {
	font-size: 120%;
	font-variant: small-caps;
	color: #B9000C;                /* -- Drk Red txt -- */
}


   /* --------------------------------- Pull Quotes -- */

.expanded {
	display: none;
}


/* ================================================= Images
=========================================================== */
img {
    padding: 10px 0;
	max-width: 100%;
    height: auto;
	visibility: visible;
	opacity: 1.0;
}
.img2 {
	border: 2px;
    border-radius: 12px;
	color: #000;    /* Blck Brdr */
}
.imgRotate {
    padding: 5px;
	-webkit-transform:rotate( 3deg);
	-moz-transform:rotate( 3deg);
	-o-transform:rotate( 3deg);
	-ms-transform:rotate( 3deg);
	transform:rotate( 3deg);
}
.imgRotate2 {
    padding: 5px;
	-webkit-transform:rotate( -3deg);
	-moz-transform:rotate( -3deg);
	-o-transform:rotate( -3deg);
	-ms-transform:rotate( -3deg);
	transform:rotate( -3deg);
}
.img3 {
	padding: 2% 15% 0 20%;
}

/* ======================================== New NAV ====== */
nav {
	display: flex;
	padding: 0 5px;
	width: 100%;
	justify-content: center;
    font-variant: small-caps;
	vertical-align: middle;
	background-color: #F0F8FF;  /* -- Alice Blue -- */
	border-radius: 0 20px 20px 0;
}

nav li {
	display: flex;
	flex-direction: column;
	padding: 0 10px;
	font-size: 70%; 
	justify-content: center;
 	vertical-align: middle;
   color: #000;                /* -- Black -- */
    text-shadow:2px 2px 3px #695F5F;  /* Unsupported in IE */
	font-weight: 500;
}
nav ul,
nav a {
	display: flex;
	flex: 0 0 auto;
	font-weight: 500;
}
nav a:hover,
nav a:focus {
	color: #5130E9;         /* -- Dark Blue -- */
    text-decoration: underline;
	background-color: #F9FF00;  /* -- Yellow -- */
}


/* ================================= Home Page NAV ====== */

.nav2 {
	display: inline-flex; 
	flex-direction: row;
	flex-basis: auto;
    font-variant: small-caps;
	letter-spacing: 1px;
	vertical-align: middle;
	align-items: center;
	justify-content: space-evenly;
	height: auto;
	background-color: #F0F8FF;  /* -- Alice Blue -- */
}

.nav2 li {
	display: flex;
	flex-direction: row;
	padding: 0 10px;
	font-size: 90%; 
    color: #B9000C;                /* -- Dark Red -- */
    text-shadow:2px 2px 3px #695F5F;  /* Unsupported in IE */
}
.nav2 ul,
.nav2 a {
	display: flex;
	flex-wrap: wrap;
	flex: auto;
	font-weight: 500;
}
.nav2 a:hover,
.nav2 a:focus {
	color: #5130E9;         /* -- Dark Blue -- */
    text-decoration: underline;
	background-color: #F9FF00;  /* -- Yellow -- */
}

/* ====================================== Related NAV  ====== */

.div-in8 > h2,
.div-in2 > h2 {
    font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
    color: #640993;
}
a > .div-in8,
a > .div-in2 {
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-style: italic;
}



/* ===================================  for Screens min 500px
============================================================== */
@media screen and (min-width: 500px) {
body {
	background: #f2f2f2;
}
.body3 {
	background: rgb(168,167,176);
background: linear-gradient(57deg, rgba(168,167,176,1) 0%, rgba(61,61,124,1) 19%, rgba(247,235,235,1) 35%, rgba(14,33,36,0.9532855378479517) 58%, rgba(17,10,29,1) 87%);
	}
.body5 {
	background: rgb(168,167,176);
background: linear-gradient(57deg, rgba(168,167,176,1) 0%, rgba(61,61,124,1) 19%, rgba(247,235,235,1) 35%, rgba(14,33,36,0.9532855378479517) 58%, rgba(17,10,29,1) 87%);
	}		
	/* --------------------  Multi-Column for 500px Screens ------ */
.div-in9 {
	width: 80%;
    -ms-column-count: 2;
	-webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
	column-count: 2;
	-ms-column-width: auto;
	-webkit-column-width: auto; /* Chrome, Safari, Opera */
    -moz-column-width: auto; /* Firefox */
    column-width: auto;	
	-ms-column-gap: 15px;
	-webkit-column-gap: 15px; /* Chrome, Safari, Opera */
    -moz-column-gap: 15px; /* Firefox */
    column-gap: 15px;	
}
	
	
}


/* =======================================  for Screens min 640px
================================================================== */
@media screen and (min-width: 640px) {
body {
	background-color: black;
}
.div-in7 {
	background-color: linen;
	}
}


 /* ================================== For Screens min 768 Px
============================================================= */
@media screen and (min-width: 768px) {
body {
	background-color: gray;
    background-image: url(http://jerrysierra.com/images/Landscapes/SF-Skyline-0310.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	}
.body2 {
	background-color: rgba(148,117,86,1.00);
    background-image: url(http://jerrysierra.com/images/big/CoverPictureMed.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	}

 
	                    /* ---- for AndPictures.html ----- */
.nav {
	font-size: medium;
}
	
/* --------------------------------- BGD Divs for 768px ----- */
.DivGal-clear, 
.DivGal-clear2 {
	position: relative;
	width: 80%;
	margin: 0 10%;
}

	
/* -------------------------------- Small Divs for 768px ---- */
 
.div-in3 {
   	background-image: url(http://jerrysierra.com/images/Landscapes/UtahRoad-2.jpg);
	background-repeat: no-repeat;
    background-size: cover;
	background-position: center;
}
.div-in4 {
background: #ECA8F1;
background: linear-gradient(180deg, #ECA8F1, #171513);
}
.div-in5 {
 	background-image: url(http://jerrysierra.com/images/Landscapes/UtahRoad-6.jpg);
	background-repeat: no-repeat;
    background-size: cover;
	background-position: center;
}
.div-in6 {
   	background-color: white;
	background-image: url(http://jerrysierra.com/images/Landscapes/RedCaesar-Bgd3.jpg);
	background-repeat: no-repeat;
    background-size: cover;
	background-position: center;
}
.div-in7 {
 	background-color: white;
	background-image: url(http://jerrysierra.com/images/Landscapes/TerminatorCop-Bgd3.jpg);
	background-repeat: no-repeat;
    background-size: cover;
}
	
/* ---------------  Multi-Column for 768px - Change to 3-col  --- */
.div-in9 {
    -ms-column-count: 3;
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
	column-count: 3;
	-ms-column-gap: 30px;
	-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
    -moz-column-gap: 30px; /* Firefox */
    column-gap: 30px;	
}

/* ------------------------------------  Misc for 768px  ------ */

a {
	font-size: medium;
	padding: 0 2px;
	margin: 2px;
}
a > img {
	padding: 0;
	border: 0;
}
h1 {
     font-weight: 600;
} 
h2 {
     font-weight: 500;
    } 
}

nav ul,
nav a,
.nav2 ul,
.nav2 a {
	display: flex;
	font-size: 120%;
	font-weight: 600;
	padding: 0 8px;
}

/* ====================================== For Screens Min 900px 
============================================================== */
@media screen and (min-width: 900px) {
body {
	background-color: gray;
	background-image: url(http://jerrysierra.com/images/Landscapes/SF-Skyline-0310.jpg);
}


/* --------------------------------------- BGD Divs for 900px---- */
.DivGal-clear, .DivGal-clear2 {
	position: relative;
	width: 74%;
	margin: 0 10%;
}

/* --------------------------  Small DIVs for 900px ------ */

.div-in3 {
   	background-image: url(http://jerrysierra.com/images/Landscapes/UtahRoad-1.jpg);
	background-repeat: no-repeat;
    background-size: cover;
}

.div-in5 {
   	background-image: url(http://jerrysierra.com/images/Landscapes/UtahRoad-5.jpg);
	background-repeat: no-repeat;
	background-size: cover;

	}
.div-in7 {
	background-image: url(http://jerrysierra.com/images/Landscapes/TerminatorCop-Bgd2.jpg);
	background-repeat: no-repeat;
}

footer {
	font-size: medium;	
	border-top: medium #1507CD ;
    padding: 4px;
}

/* --------------------------------- MISC for Med Screens ----- */

.nav {
	font-size: medium;
}
a {
	font-size: large;
}
h1 {
     font-size: x-large;
     font-weight: 800;
} 
h2 {
     font-size: large;
     font-weight: 700;
} 
nav ul,
nav a {
	display: flex;
	font-size: 150%;
	font-weight: 700;
	padding: 0 10px;
}
.expanded {
	float: right;
	position: relative;
	width: 60%;
	margin: 10px;
	font-size: large;
	color: #990099;
    letter-spacing: 1px;
	display: inline-block;
}

}   


/* ============================= For Large Screens - min 1200 Px
============================================================== */
@media screen and (min-width: 1200px) {

body {
    background-image: url(http://jerrysierra.com/images/big/FlowerWorldLG.jpg);
}
.body2 {
	background-image: url(http://jerrysierra.com/images/big/CoverPictureBig.jpg);
}

nav ul,
nav a {
	display: flex;
	font-size: 160%;
	font-weight: 700;
	padding: 0 10px;
}
	
/* ----------------------------------- BGD Divs for 1200px ----- */

.DivGal-clear, 
.DivGal-clear2 {
	width: 75%; 
	margin: 0 13%;
}

/* -------------------------------- Small Divs for 1200px ------ */

.div-in5 {
   	background-image: url(http://jerrysierra.com/images/Landscapes/UtahRoad-4.jpg);
	background-repeat: no-repeat;
}
.div-in7 {
	background-image: url(http://jerrysierra.com/images/Landscapes/TerminatorCop-Bgd.jpg);
	background-repeat: no-repeat;
}

	
/* ------------------  Multi-Column for Lg Scrns - Change to 4-col ----- */
.div-in9 {
	-ms-column-count: 4;
	-webkit-column-count: 4; /* Chrome, Safari, Opera */
    -moz-column-count: 4; /* Firefox */
	column-count: 4;
}

.div-ina > li {
	padding-bottom: 8px;
}
	
footer {
	font-size: medium;	
    padding: 6px;
}

 .nav {
	font-size: medium;
}
a {
	font-size: x-large;
}
    
    h1 {
     font-size: xx-large;
     font-weight: 900;
} 
h2 {
     font-size: x-large;
     font-weight: 800;
} 
}
  
.div-Landscapes {
	
}