/* 
Made by Jerry A. Sierra for jerrysierra.com 
Last updated on: 3/14/2021
------------------------------------------------------------- */

/* 
Grid ---------------- */

.grid {
	display: grid;
	grid-template-column: 20% 40% 40%;
	grid-template-row: 200px 100px;
	grid-auto-rows: 100px;
	grid-gap: 20px;
	border: 2px solid #ffa94d;
	grid-template-areas:
		"a a b"
		"a a b";
}
.box1{
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 3;
	display: subgrid;
	}
.box2{
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 5;
}
.item1 {
	grid-area: a;
}
.item2 {
	grid-area:b;
}

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

.body2 {
	background: #000;
	}

.body3 {
	background: #F2F2F2;
}

/* 
Portal Pages 
------------------------ */
.AutoBody1 {
background-image: url(http://jerrysierra.com/images/Landscapes/AliensAndRobots.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;
}

.AutoBodyGail {
background-image: url(http://jerrysierra.com/images/Figurines/Gail-StandingBgd-0492.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;
}

/* 
Tonal - Nagual Bodies 
------------------------ */
.TonalBody {
background-image: url(http://jerrysierra.com/images/Tonal/Tonal-Cover.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;
}

.TonalBody2 {
background-image: url(http://jerrysierra.com/images/Tonal/Tonal-Cover3.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;
}

.TonalBody3 {
background-image: url(http://jerrysierra.com/images/Tonal/Tonal-Cover4.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;
}



/* 
Gallery - Clouds Bgd 
------------------------ */
.AutoBody2 {
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;
}

/* 
Gallery - Beach Bgd 
------------------------ */
.AutoBody3 {
background: #000;
background-image: url(http://jerrysierra.com/images/Landscapes/OceanBeach-2649-LG.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;
}

/* ------------- Main Logo ----- */

DIV.ForLogo {
	clear: both;
	min-height: 138px;
	width: 350px;
	margin: 0;
	border: 0;
	padding: 4px;
	padding-top: 10px;
}

p.logo {
	width: 95%;
    font-size: large;
    font-weight: 500;	
	text-indent: 0;
	border-bottom: 0;
	padding: 0;
	padding-left: 25px;
	margin: 0;
}

p.logo strong {
font-size: xx-large;
font-weight: 700;	
}
            /* -- End Main Logo --- */


 /* DIVs ------------------------ */

.DivMain {
	position: Absolute;
	width: 75%;
    background-color: #fff;               /* White */
	top: 3px;
	left: 5px;
	margin-left: 13%; 
    margin-right: 12%;
	letter-spacing: normal;
	text-indent: 0;
	word-spacing: normal;
	border-bottom: 1px solid #000;
	clear: both;
}

.DivBride {
    background-color: #fff;               /* White */
background-image: url(http://jerrysierra.com/images/Figurines/AlienBgd-1.jpg);
background-repeat: no-repeat;
background-position: center right;
background-attachment: fixed;
	position: Absolute;
	width: 75%;
	margin-left: 13%; 
    margin-right: 12%;
	letter-spacing: normal;
	text-indent: 20px;
	word-spacing: normal;
	border-bottom: 1px solid #000;
	clear: both;
   -webkit-box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4);
   -moz-box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4);
   box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
  border-radius: 10px;
 }
   
.DivGal {
	position: Relative;
	width: 70%;
    background-color: #fff;             /* White */
	margin-left: 15%; 
    margin-right: 15%;
	letter-spacing: normal;
	text-indent: 0;
	word-spacing: normal;
	border-bottom: 1px solid #000;
	clear: both;
    border-radius: 0 15px 15px 0;
	}

.DivGal-clear {
	position: Relative;
	width: 60%;
    background-color: none;             /* clear */
	margin-left: 10%; 
    margin-right: 10%;
	letter-spacing: normal;
	text-indent: 0;
	word-spacing: normal;
	border-bottom: 0;
	clear: both;
}

.DivMain2, .DivMain3 {
	position: Absolute;
	width: 75%;
    background-color: #fff;
	left: 2px;
	top: 3px;
	padding: 0 0 0 5px;
	margin-left: 13%; 
    margin-right: 12%;
	letter-spacing: normal;
	text-indent: 0;
	word-spacing: normal;
	border-bottom: 1px solid #000;
	clear: both;
   -webkit-box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4);
   -moz-box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4);
   box-shadow: 3px 3px 10px 8px rgba(0, 0, 0, 0.4); 
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
  border-radius: 10px; 
}

.DivMain2 {
    background-color: #DADAFF;
}

.DivMain3 {
    background-color: #fff;
}

.RightSide div hr {
	color: #400080;
}

Div {
		clear: both;
}

.LeftSideAd, .LeftSideAd2 {
	position: fixed;
	width: 130px;
	border: 0;
	top: 15px;
	float: left;
	margin-left: 4px;
	letter-spacing: normal;
	text-align: center;
}

.LeftSideAd {
	background-color: #fff;              /* White */
}

.LeftSideAd2 {
	background-color: #f2f2f2;    
}

/* 
CSS MouseOvers
------------------------ */
 
.PictDIV {
	background-image: url(http://jerrysierra.com/images/Figurines/Ripley-1836.jpg);
	position: Relative;
	text-indent: 0;
	margin: 2%;
	width: 700px;
	height: 501px;
	padding: 0;
	border: 1px #d3d3d3;
}

.GalImg {
	margin: 0;
	border: 0;
    padding: 0;
	left: 0;
	right: 0;
	max-width: 100%;
    height: auto;
	visibility: visible;
	opacity: 1.0;
}

.GalImg:hover {
      opacity: 0.0;
      filter: alpha(opacity=100);         /* For  <-IE8 */
} 


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

H1, H2 {
	 font-family: Verdana, Geneva, "Arial Black", Sans-serif;
	 border-left-width: 12px;
}
 
H1 {
     font-size: x-large;
     font-weight: 700;
     color: #000;                     /* -- black text -- */
     font-variant: small-caps;
     border-left-width: 12px;
     margin-bottom: 0;
    } 
	 
H1.one {
     font-size: xx-large;
     font-weight: 900;
     color: #000;                      /* -- black text -- */
     border-left-width: 12px;
     text-shadow:2px 2px 3px #69100F;  /* Unsupported in IE */
     } 
H1.one2 {
     font-size: xx-large;
     font-weight: 900;
     color: #fff;          /* -- white text -- */
     text-shadow:2px 2px 3px #69100F;  /* Unsupported in IE */
     } 
	 	 
H2.one2 {
     font-size: x-large;
     font-weight: 700;
     color: #fff;                    /* -- white text -- */
     font-variant: small-caps;
     margin-bottom: 0;
     } 
	 	 
.H2big {
	font-size: x-large;
	font-style: normal;
	font-weight: 700;
	font-variant: small-caps;
	color: #03F;
    margin-bottom: 0;
}

/* 
Paragraphs 
------------------------------------------------------------- */

p {
	font-family: 'Roboto', Tahoma, Arial, Sans-serif;
	font-size: medium;
	text-align: left;
    width: 80%;
	font-weight: 500;
	color: #000;                     /* -- black text -- */
	font-style: normal;
	line-height: 130%;
	vertical-align: middle;
	top: 2px;
	bottom: 3px;
	margin: 2px 4% 6px 3%;
	border-left-width: 12px;
	border-right-width: 10px;
}

p.nagual {
	font-family: "Perpetua Bold", Arial, Tahoma, Sans-Serif;
	color: #8C009F;                /* -- dark violet -- */
	font-size: large;
	text-align: left;
	line-height: 125%;
	vertical-align: middle;
	width: 75%;
	font-weight: 500;
    top: 1px;
	bottom: 3px;
	border: 0;
	padding: 10px;
    border-left-width: 5px;
	border-right-width: 15px;
}

p.uno {
	font-family: Georgia, "Times New Roman", Serif;
	width: 80%;
	font-weight: 500;
	color: #000;                     /* -- black text -- */
}

p.uno2 {
	font-family: Georgia, "Times New Roman", Serif;
	width: 80%;
	font-weight: 500;
	color: #fff;                     /* -- white text -- */
}

p.nav {
          color: #000;               /* -- black text -- */
	      background: #FFF;
	      padding: 3px;
	      width: 50%;
          text-decoration: none;
          border-top: 1px solid #d3d3d3;
          border-right: 1px solid #000;
          border-bottom: 1px solid #000;
          border-left: 1px solid #d3d3d3;
}


    /* -- Pull Quotes -- */

.expanded {
	float: right;
	position: relative;
	width: 35%;
	margin: 15px;
	font-size: large;
	color: #990099;
    letter-spacing: 2px;
}


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

.small {
	font-size: small;
}

.strong {
	font-size: medium;
	color: Red;
}

.big {
	font-size: large;
}

.bigB {
	font-size: large;
	color: #000;
}

.bigD {
	font-size: x-large;
	color: #990099;
}
 
.footer {
	font-family: "Times New Roman", Times, serif;
	font-size: small;
	color: #999;
}

     /* -- Un-ordered Lists -- */
ul, li {
	font-family: Helvetica, Tahoma, Arial, Sans-serif;
	font-size: medium;
    list-style-type: none;
	color: #000;                    /* -- black text -- */
	text-decoration: none;
	font-weight: 500;
	padding: 0 0 0 15px;
	border-left-width: 20px;
	border-right-width: 10px;
	text-align: left;
}

hr {
	color: #400080;
	left: 10%;
}

/* 
For Images
------------------------------------------------------------- */
img {
	margin:  0;
	border: 0;
    padding: 0 5px 0 5px;
	max-width: 100%;
    height: auto;
	visibility: visible;
	opacity: 1.0;
}
.img2 {
	margin: 5px;
	border: 0;
	max-width: 100%;
    border-radius: 13px;
    height: auto;
	visibility: visible;
	opacity: 1.0;
}
.img3 {
	margin: 5px;
	border: 1px;
	max-width: 100%;
	color: #000;    /* Black */
    height: auto;
	visibility: visible;
	opacity: 1.0;
}


/* 
For Screens  300 to 1200 Px
------------------------------------------------------------- */
@media screen and (min-width: 300px) and (max-width: 1200px) {

body, .AutoBody1, .AutoBody2 {
	width: 100%;
    background-image: none;
	margin: 0;
	padding: 0;
	height: 100%;
	background-color: #F2F2F2;
}

img.resize {
    width:60%;              /* 60% of available space */
    height: auto;
}

H1.one {
     font-size: x-large;
     font-weight: 800;
     color: #000;                 /* -- black text -- */
     font-variant: small-caps;
     margin-bottom: 0;
     text-shadow:2px 2px 3px #69100F;  /* Unsupported in IE */
     } 
	 
p, p.dos, p.uno2, p.uno {
	width: 90%;
	line-height: 130%;
	vertical-align: middle;
	margin-bottom: 4px;
	border-right-width: 2px;
}

div {
	width: 98%;
	max-width: 100%;
	color: #000;                    /* Black */
	left: 3px;
	margin-left: 2px;
	letter-spacing: normal;
	text-align: left;
	text-indent: 0;
	word-spacing: normal;
	padding-left: 2px;
	border: 0;
	clear: both;
}

.DivBride, .DivMain, .DivMain2 {
    background-color: #fff;     /* White */
    background-image: none;
	position: Absolute;
	width: 75%;
	clear: both;
 }
 
.DivMain2 {
    background-color: #DADAFF;
}
   
.LeftSideAd, .expanded {
	display: none;
}
}


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

@media screen and (min-width: 900px) and (max-width: 1190px) {

H1.one {
     font-size: xx-large;
     font-weight: 800;
} 
	 
}   

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

@media screen and (min-width: 600px) and (max-width: 899px) {

H1.one {
     font-size: x-large;
     font-weight: 800;
     } 
	 
img.resize {
    width: 60%;          /* 60% of available space */
    height: auto;
}

.DivMain, .DivMain2 .DivBride {
	margin-left: 12px; 
    margin-right: 1%;
}

p.logo {
	width: 100%;
	text-align: left;
	margin-bottom: 4px;
	padding-bottom: 10px;
}
}

/* 
For Screens up to 600 Px
------------------------------------------------------------- */

@media screen and (min-width: 301px) and (max-width: 599px) {

p.logo {
	width: 100%;
	text-align: left;
	margin-bottom: 4px;
	padding-bottom: 10px;
}

div {
	width: 99%;
}
.AutoBody1 div {
}


.DivBride {
	width: 95%;
	margin-left: 2%; 
    margin-right: 2%;
}
   
.DivMain, .DivMain2, .DivMain3 {
	width: 98%;
	color: #000;
	top: 5px;
	margin-left: 1%; 
    margin-right: 1%;
}

H1.one {
     font-size: x-large;
     font-weight: 700;
     margin-bottom: 0;
     text-shadow:0;        /* Unsupported in IE */
} 
	 
}