/* 
Made by Jerry A. Sierra for The New World 
Last updated on: 6/27/2018
------------------------------------------------------------- */

/* 
Bodies and html5 
------------------------------------------------------------- */
article, section, aside, hgroup, nav, header, footer, figure, figcaption {
	display: block;
} 

body {
	background: #fff;
	width: 100%;
	margin: 0;
	padding: 0;
	height: 100%;
	}
.body2 {
	background-color: linen;
}
.body3 {
	background-color: floralwhite;
}

footer {
	right: 25px;
	bottom: 2px;
	position: relative;
	width: 90%;
	font-size: small;	
	font-style: normal;
	line-height: 120%;
	vertical-align: center;	
	text-align: center;
    color: #000;                /* -- black text -- */
	padding: 2px;
	margin: 0;
	border: 0;
	border-top: thin #f81216;
    padding-bottom: 5px;
	background: #f8f8ff;   /* --- Ghost White --- */
	opacity: 0.7;
    filter: alpha(opacity=70); /* For IE8 and earlier */
}

 footer, p {
	 	font-family: Helvetica, Tahoma, Arial, Sans-serif;
	 }
 
 
 /* DIVs -------------------------------------- */

div {
	width: 90%;
    margin: auto;
	letter-spacing: normal;
	text-indent: 0;
	padding: 0;
    word-spacing: normal;
	clear: both;
}
.DivGal-clear {
	position: relative;
	width: 80%;
	margin-left: 13%; 
    margin-right: 12%;
	letter-spacing: normal;
	clear: both;
	align-content: center;
	border: #F8FF11 solid 1px;
	background-color:rgba(0, 0, 0, 0.3);
}

 /* Background DIVs  ----------------- */
.DivGal-clear2 {
	position: relative;
	width: 80%;
	margin-left: 10%; 
    margin-right: 10%;
	letter-spacing: normal;
	clear: both;
	align-content: center;
	border: #DEDFB9 solid 1px;   /* light yellow */
}

 /* Inside - TOP DIVs -------------- */
.div-in {
	text-align: center;
	width: 60%;
    margin: auto;
	letter-spacing: normal;
	text-indent: 0;
	padding: 5%;
    word-spacing: normal;
	border: 1px solid #f2f2f2;
	}
.div-in1 {
	text-align: center;
	width: 60%;
    margin: auto;
	background-color: mistyrose;     /* mistyrose */
	letter-spacing: normal;
	text-indent: 0;
	padding: 5%;
    word-spacing: normal;
	border: 1px solid #f2f2f2;
	}
.div-in2 {
	text-align: center;
	width: 60%;
    margin: auto;
	background-color: azure;     /* azure */
	letter-spacing: normal;
	text-indent: 0;
	padding: 5%;
    word-spacing: normal;
	border: 1px solid #f2f2f2;
	}
.div-in3 {
	text-align: center;
	width: 60%;
    margin: auto;
	background-color: ivory;     /* ivory */
	letter-spacing: normal;
	text-indent: 0;
	padding: 5%;
    word-spacing: normal;
	border: 1px solid #f2f2f2;
	}
.div-in4 {
	text-align: center;
	width: 60%;
   	margin: auto;
	background-color: cornsilk;     /* cornsilk */
	letter-spacing: normal;
	text-indent: 0;
	padding: 5%;
    word-spacing: normal;
	border: 1px solid #f2f2f2;
	}
.div-in5 {
	text-align: center;
	width: 60%;
   	margin: auto;
	background-color: mintcream;     /* mintcream */
	letter-spacing: normal;
	text-indent: 0;
	padding: 5%;
    word-spacing: normal;
	border: 1px solid #f2f2f2;
	}
.div-in6 {
	text-align: center;
	width: 60%;
    margin: auto;
	background-color: floralwhite;     /* floralwhite */
	letter-spacing: normal;
	text-indent: 0;
	padding: 5%;
    word-spacing: normal;
	border: 1px solid #f2f2f2;
	}
.div-in7 {
	text-align: center;
	width: 60%;
   	margin: auto;
	background-color: lightgray;     /* lightgray */
	letter-spacing: normal;
	text-indent: 0;
	padding: 5%;
    word-spacing: normal;
	border: 1px solid #f2f2f2;
	}
.div-in8 {
	text-align: center;
	width: 60%;
   	margin: auto;
	background-color: #fff;     /* white */
	letter-spacing: normal;
	text-indent: 0;
	padding: 5%;
    word-spacing: normal;
	border: 1px solid #f2f2f2;
	}

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

a {
	color: black;          
	text-decoration: none;	
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
	font-size: medium;
	background-color: cornsilk;
	border:thin #000000;
	padding-left: 20px;
	padding-right: 20px;
	}
.names {
		color: #670088;     /* -- Purpleito txt -- */   
	}
a:hover {
    color: #ffde01;   /* -- Yellow -- */
    text-decoration: underline;
	background-color: cornflowerblue;
	}

a, #logo {
    text-decoration: none;
	padding: 0;
	 border: 0;
	}
a, img {
	text-decoration: none;
	padding: 0;
	border: 0;
	}
a:hover img {
	text-decoration: none;
	}

/* 
Headings
------------------------------------------------------------- */

h1, h2, h3 {
	 font-family: Verdana, Geneva, "Arial Black", Sans-serif;
     color: #000;          /* -- black txt -- */
	}
h1 {
     font-size: medium;
     font-weight: 600;
	} 
	
h1 a {
	color: #000055;   /* -- very Drk Blue -- */ 
	}	
	
h1.One {
	 font-size: 200%; 
     text-align: center;
     color: #B9000C;                /* -- Dark Red txt -- */
     border-top: 0;
	 line-height: 120%;
	 margin-top: 2px;
	 padding-top: 2px;
     text-shadow:2px 2px 3px #000;  /* Unsupported in IE */
	}
 h2, h3 {
     font-size: medium;
     margin-bottom: 1px;
    } 
h3 {
	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;
	margin: 0; 
	padding: 10px;
	text-align: left;
	border: 0;
	border-top-color:aquamarine;
	}
.nav {
    font-variant: small-caps;
   	font-size: small;
	text-align: center;
  	padding-top: 10px;	
	padding-bottom: 5px;	
    border-top: 1px solid #d3d3d3;	
	}
 

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

.ctr {
    text-align: center;
	}
.footer {
	font-family: "Times New Roman", Times, serif;
	font-size: small;
	color: #999;
	}
.Strng {
	font-size: 300%;
	}


/* 
for Images
------------------------------------------------------------- */
img {
	margin: 0;
	border: 0;
    padding: 0 5px 0 5px;
	max-width: 100%;
    height: auto;
	visibility: visible;
	opacity: 1.0;
	}
.img2 {
	border: 2px;
    border-radius: 12px;
	color: #000;    /* Black */
	}
 
.imgRotate {
	margin: 0;
	border: 0;
    padding: 5px;
	max-width: 100%;
    height: auto;
	visibility: visible;
	opacity: 1.0;
	-webkit-transform:rotate( 3deg);
	-moz-transform:rotate( 3deg);
	-o-transform:rotate( 3deg);
	-ms-transform:rotate( 3deg);
	transform:rotate( 3deg);
	}
.imgRotate2 {
	margin: 0;
	border: 0;
    padding: 5px;
	max-width: 100%;
    height: auto;
	visibility: visible;
	opacity: 1.0;
	-webkit-transform:rotate( -3deg);
	-moz-transform:rotate( -3deg);
	-o-transform:rotate( -3deg);
	-ms-transform:rotate( -3deg);
	transform:rotate( -3deg);
	}
/* 
for Screens  640 to 767 Px
------------------------------------------------------------- */
@media screen and (min-width: 640px) and (max-width: 767px) {
body {
	background-color: black;
}
.div-in7 {
	width: 60%;
	background-color: linen;
	}
}

 /* 
For Screens  768 to 1023 Px
------------------------------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1023px){
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: linen;
    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;
	}
.body3 {
	background-color: floralwhite;
    background-image: url(http://graffitisf.com/StreetArtImages/LaLaLand/BigGal-1Lg.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;
	}
.body4 {
	background-color: floralwhite;
    background-image: url(http://jerrysierra.com/images/Landscapes/NewYellowBrickRoad-b.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;
	}
.body5 {
	background-color: floralwhite;
    background-image: url(http://jerrysierra.com/images/Landscapes/NewYellowBrickRoad-c.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;
	}
.job {
    font-size: x-small;
	visibility: visible;
	color: blue;
    padding-left: 25px;
	}
.nav {
	font-size: medium;
	}
	
            /* BGD DIVs -------------- */
.DivGal-clear {
	position: relative;
	width: 75%;
	margin-left: 10%; 
    margin-right: 10%;
}
.DivGal-clear2 {
	position: relative;
	width: 75%;
	margin-left: 10%; 
    margin-right: 10%;
	clear: both;
	align-content: center;
	border: #DEDFB9 solid 1px;   /* light yellow */
}
	
	 /* Inside - TOP DIVs -------------- */
.div-in {
	text-align: center;
	width: 50%;
	}
.div-in1 {
	width: 50%;
	background-color: mistyrose;      
	}
.div-in2 {
	text-align: center;
	width: 50%;
	background-color: azure;      
	}
.div-in3 {
	width: 50%;
   	background-image: url(http://jerrysierra.com/images/Landscapes/NagualBgd-1b.jpg);
	background-color: azure;      
}
.div-in4 {
	width: 50%;
 	background-color: azure;      
  	background-image: url(http://jerrysierra.com/images/Landscapes/XenoBgd2.jpg);
}
.div-in5 {
	width: 50%;
  	background-color: azure;      
 	background-image: url(http://jerrysierra.com/images/Landscapes/FreewayWithSky-Bgd2.jpg);
	}
.div-in6 {
	width: 50%;
	background-color: azure;      
   	background-image: url(http://jerrysierra.com/images/Landscapes/RedCaesar-Bgd3.jpg);
	background-repeat: no-repeat;
}
.div-in7 {
	width: 50%;
	background-color: azure;      
   	background-image: url(http://jerrysierra.com/images/Landscapes/TerminatorCop-Bgd3.jpg);
	}
.div-in8 {
	width: 50%;
	background-color: #fff;      
	}

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

a {
	font-size: medium;
	background-color: cornsilk;
	border:thin #000000;
	padding-left: 25px;
	padding-right: 25px;
}
h1 {
     font-size: medium;
     font-weight: 600;
    } 
h2 {
     font-size: medium;
     font-weight: 500;
    } 
}

/* 
For Screens  900 Px to 1200 Px
------------------------------------------------------------- */

@media screen and (min-width: 900px) and (max-width: 1199px){
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;
}

.body3 {
	background-color: linen;
    background-image: url(http://graffitisf.com/StreetArtImages/LaLaLand/BigGal-1Lg.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;
}
.body4 {
	background-color: floralwhite;
    background-image: url(http://jerrysierra.com/images/Landscapes/NewYellowBrickRoad-b.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;
}
.body5 {
	background-color: floralwhite;
    background-image: url(http://jerrysierra.com/images/Landscapes/NewYellowBrickRoad-c.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;
}	

	
	 /* BGD DIVs -------------- */
.DivGal-clear {
	position: relative;
	width: 75%;
	margin-left: 13%; 
    margin-right: 13%;
}
.DivGal-clear2 {
	position: relative;
	width: 75%;
	margin-left: 13%; 
    margin-right: 13%;
	clear: both;
	align-content: center;
	border: #DEDFB9 solid 1px;   /* light yellow */
}

	 /* Inside - TOP DIVs -------------- */
.div-in {
	width: 50%;
	}
.div-in1 {
	width: 50%;
	background-color: mistyrose;      
	}
.div-in2 {
	width: 50%;
	background-color: azure;     
	}
.div-in3 {
	width: 50%;
	background-color: azure;      
   	background-image: url(http://jerrysierra.com/images/Landscapes/NagualBgd-1.jpg);
	}
.div-in4 {
	width: 50%;
   	background-image: url(http://jerrysierra.com/images/Landscapes/XenoBgd2.jpg);
}
.div-in5 {
	width: 50%;
	background-color: azure;      
   	background-image: url(http://jerrysierra.com/images/Landscapes/FreewayWithSky-Bgd2.jpg);
	background-repeat: no-repeat;
	}
.div-in6 {
	width: 50%;
   	background-image: url(http://jerrysierra.com/images/Landscapes/RedCaesar-Bgd2.jpg);
	background-color: azure;      
	background-repeat: no-repeat;
    }
.div-in7 {
	width: 50%;
	background-color: azure;      
	background-image: url(http://jerrysierra.com/images/Landscapes/TerminatorCop-Bgd2.jpg);
	background-repeat: no-repeat;
	}
.div-in8 {
	width: 50%;
   	margin: auto;
	background-color: #fff;      
	}
	
footer {
	font-size: medium;	
	border-top: medium #1507CD ;
    padding: 4px;
}

/* Name Groups for Larger Sizes ------------- */

.WrkrNo {
    font-size: small;
}
.loc {
    font-size: small;
}

.job {
    font-size: x-small;
	visibility: visible;
	color: blue;
    padding-left: 25px;
}
.nav {
	font-size: medium;
}
a {
	font-size: x-large;
}
h1, h2 {
     font-size: x-large;
     font-weight: 700;
    } 
}   

/* 
For Screens  1200 to 2500 Px
------------------------------------------------------------- */

@media screen and (min-width: 1200px) and (max-width: 2500px) {

body {
    background-image: url(http://graffitisf.com/StreetArtImages/LaLaLand/BigGal-2Lg.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-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;
}
.body3 {
	background-color: linen;
    background-image: url(http://graffitisf.com/StreetArtImages/LaLaLand/BigGal-1Lg.jpg);
    background-repeat: no-repeat;
}
.body4 {
	background-color: floralwhite;
    background-image: url(http://jerrysierra.com/images/Landscapes/NewYellowBrickRoad-b.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;
}
.body5 {
	background-color: floralwhite;
    background-image: url(http://jerrysierra.com/images/Landscapes/NewYellowBrickRoad-c.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;
}
	
	 /* BGD DIVs -------------- */

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

	 /* Inside - TOP DIVs -------------- */

.div-in {
	width: 50%;
	}
.div-in1 {
	width: 50%;
	background-color: mistyrose;      
	}
.div-in2 {
	width: 50%;
	background-color: azure;     
	}
.div-in3 {
	width: 50%;
	background-color: azure;      
   	background-image: url(http://jerrysierra.com/images/Landscapes/NagualBgd-1c.jpg);
	 background-repeat: no-repeat;
	}
.div-in4 {
	width: 50%;
	background-color: azure;      
   	background-image: url(http://jerrysierra.com/images/Landscapes/XenoBgd.jpg);
	 background-repeat: no-repeat;
	}
.div-in5 {
	width: 50%;
	background-color: azure;      
   	background-image: url(http://jerrysierra.com/images/Landscapes/FreewayWithSky-Bgd.jpg);
	}
.div-in6 {
	width: 50%;
   	background-image: url(http://jerrysierra.com/images/Landscapes/RedCaesar-Bgd.jpg);
	background-color: azure;      
	}
.div-in7 {
	width: 50%;
	background-color: azure;      
   	background-image: url(http://jerrysierra.com/images/Landscapes/TerminatorCop-Bgd.jpg);
	}
.div-in8 {
	width: 50%;
   	margin: auto;
	background-color: #fff;      
	}

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

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