@media only screen and (orientation: landscape) {

/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* 
GLOSSARY:

		'THE GODS'
		- reference LongListL/P on Index Page'

    body
    #bigBucket
    #Overall
    #OverallRight50
    #OverallSansBGSize
    #TopRowButtonsOverall
    .rotateimg180XY
    .rotateimg180Y
    .rotateimg180X
    .rotateImgL90Z
    .rotateImgR90Z
  
		'COLUMNS'

    .columnContainer
      - .fromRight
      - .fromLeft

		'HEADER'

  .whichDayYear
    - .marginL
    - .marginR
    - .bottomPlace
  #headerBackground
  .frameShadow
  .headerPlace
    - .header
    - .headerDiv
  .headerInside
    - .headerLeft
    - .headerRight

		'TOPROWBUTTONS'

  .TopRowButtonA
  .TopRowButtonB
  
  .VeryGood
  .VeryGood1
  .topDrop25

  .TopRowMargin1A
  .TopRowMargin1B
  .TopRowMargin2A
  .TopRowMargin2B
  .TopRowMargin3A
  .TopRowMargin3B
  .TopRowMargin4A
  .TopRowMargin4B
  .TopRowMargin5A
  .TopRowMargin5B
  
  .TopRowBorderVisible
  .TopRowBorder
  .TopRowBorderCover
  .TopRowBorderOver
  .TopRowBorderSteam
  .TopRowBorderStatic
  
  .mainDrop
  .mainDrop .popuptext
  .mainDrop .popuptext::after
  .mainDrop .show
  
  @-webkit-keyframes fadeIn
  @-moz-keyframes fadeIn
  @-ms-keyframes fadeIn
  @-o-keyframes fadeIn
  @keyframes fadeIn
  
  .popuptextImage1
  .popuptextImage2
  .popuptextImage3
  .popuptextImage4
  .popuptextImage5

  .homeOverline
    .boldOverline
      .whiteWhite
  .topHome
    .redBold
  .dro,pDotsTop
    .redBold
  .dropDotsBottom
    .blackBold
  .scrollUnderline
    .redRed
      .boldUnderline
  .topCharge
    .whiteWhite
      .boldUnderline
  .bottomCharge
    .whiteBold
  .lastLine
    .blackBlack
      .boldOverline
  
		'GALLERY'


		'WRITING TILES'


		'FOOTER'

    

   *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */



/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡΡ BEGIN 'WorkSpace' BEGIN ΡΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */

.boldOverline {  
  font-weight: bold;
  text-decoration: overline;

}

.whiteWhite {
  color: white;
  text-decoration-color: white;

}

/* add boldOverline whiteWhite*/
.homeOverline {
  font-size: 400%;
  font-family: 'Almendra SC';
  text-shadow: -3px 3px 3px #711B08;
  
}

.redBold {  
  color: red;
  font-weight: bold;

}

/* add redBold */
.topBigName {
  font-size: 225%;
  font-family: 'Almendra SC';
  text-shadow: -3px 3px 3px #000000;
    
}

.topOtherName {
  font-size: 160%;
  font-family: 'Almendra SC';
  text-shadow: -3px 3px 3px #000000;
    
}

.topCreamerName {
  font-size: 158%;
  font-family: 'Almendra SC';
  text-shadow: -3px 3px 3px #000000;
    
}

/* add redBold */
.dropDotsTop {
  font-size: 200%;
  vertical-align: sub;
  text-shadow: 0px 3px 4px red;

}

.blackBold {  
  color: black;
  font-weight: bold;

}

/* add blackBold */
.dropDotsBottom {
  font-size: 200%;
  vertical-align: sub;
  text-shadow: 0px -3px 4px black;

}

.redRed {
  color: red;
  text-decoration-color: red;
  
}

.boldUnderline {
  font-weight: bold;
  text-decoration: underline;
  
}

/* add boldUnderline add redRed*/
.scrollUnderline {
  background: url(http://www.richnutcoffee.net/DropScroll.zzp) center no-repeat;
  background-size: 90% 65%;
  font-size: 160%;
  opacity: 1;
  text-shadow: 0px 3px 8px red;

}

/* add boldUnderline add redRed*/
.scrollUnderlineAlt {
  background: url(http://www.richnutcoffee.net/DropScroll.zzp) center no-repeat;
  background-size: 90% 65%;
  font-size: 160%;
  opacity: 1;
  text-shadow: 0px 3px 8px black;

}

.whiteWhite {
  color: white;
  text-decoration-color: white;
  
}

/* add boldUnderline add whiteWhite*/
.topCharge {
  font-size: 200%;
  text-shadow: -1px 1px 3px black;
  
}

.whiteBold {
  color: white;
  font-weight: bold;
  

}

/* add whiteBold */
.bottomCharge {
  font-size: 130%;
  text-decoration: none;
  text-shadow: -1px 1px 3px #4A1307;

}

.blackBlack {
  color: black;
  text-decoration-color: black;
  
}

/* add boldOverline blackBlack*/
.lastLine {
  font-size: 160%;
  text-shadow: 3px -2px 3px #000000;
  
}



/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡΡ END 'WorkSpace' END ΡΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */

/* */
/* */
/* */

/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡΡ THE GODS ΡΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */

body {
  background: #000000;
  width: 100%;
  height: 100%;
  
}

/* This Contains The Main Content */
#bigBucket {
  position: absolute;
  margin-left: -50%;
  left: 50%;
  width: 100vw;
  max-width: 100%; /*1130px; */
  min-width: 272px;
  height: 100vh;
  max-height: 785px;
  min-height: 285px;
  
  /* border: 1px solid blue; */

}

/* This Drives A Majority Of The Content */
#Overall {
  position: absolute;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  left: 50%;

}

#OverallRight50 {
  position: absolute;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  right: 50%;

}

#OverallSansBGsize {
  position: absolute;
  background-position: center center;
  background-repeat: no-repeat;
  left: 50%;

}

#TopRowButtonOverall {
  display: center;
  position: absolute;
  background-position: center;
  left: 50%;

}

/* Mirror and Flip */
.rotateImg180XY {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);

}

/* Mirror around Y axis */
.rotateImg180Y {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);

}

/* Flip over X axis */
.rotateImg180X {
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);

}

/* Turn -90 over Z axis */
.rotateImgL90Z {
  -webkit-transform: rotateZ(270deg);
  -moz-transform: rotateZ(270deg);
  -ms-transform: rotateZ(270deg);
  -o-transform: rotateZ(270deg);
  transform: rotateZ(270deg);

}

/* Turn 90 over Z axis */
.rotateImgR90Z {
  -webkit-transform: rotateZ(90deg);
  -moz-transform: rotateZ(90deg);
  -ms-transform: rotateZ(90deg);
  -o-transform: rotateZ(90deg);
  transform: rotateZ(90deg);

}
  

/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡΡ BEGIN 'COLUMNS' BEGIN ΡΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */
/*
()
  none
    -
      =
        ~
          written
            ~
            
  #columnContainer
    - .fromLeft
      =  .rotateimg180X
    - .fromRight
      = .rotateimg180XY

*/

/* Holds The L and R Wavey Columns */
#columnContainer {
  position: absolute;
  background-image: url(http://www.richnutcoffee.net/Column_Cover.1), url(http://www.richnutcoffee.net/RichNut_Column1.1);
  background-position: center center;
  background-repeat: repeat-y, repeat-y;
  /* background-size: 75% 75%; */
  width: 15%;
  max-width: 75px;
  min-width: 14.1593px;
  height: 280%; /* 95.54vh; */
  max-height: 907px; /* 100%; */
  min-height: 272px;
  
  /* border: 1px solid orange; */

}

/* This Directs The L and R Wavey Columns */

.fromLeft {
  left: 50%;
  margin-left: -50%;

}

.fromRight {
  right: 50%;
  margin-right: -50%;

}


/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡΡ END 'COLUMNS' END ΡΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */

/* */
/* */
/* */

/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡΡ BEGIN 'HEADER' BEGIN ΡΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */
/*
()
  none
    -
      =
        ~
          written
            ~

    (#Overall)
  .whichDayYear
    - .marginL
      = .rotateimg180Y
        ~ style="border-radius: 8px;"
          >p< rotateImg180Y bottomPlace
            ~ style="text-shadow: -3px -3px 3px #B32831;"
    - .marginR
      ~ style="border-radius: 8px;"
        >p< bottomPlace
          ~ style="text-shadow: -3px -3px 3px #B32831;"
  #headerBackground
    - rotateImgR90Z
      = (img) rotateImg180X
        ~ style="float:left;width:50%;height:95%;object-fit:cover;opacity: 0.5;"
      = (img) rotateImg180Y
        ~ style="float:left;width:50%;height:95%;object-fit:cover;opacity: 0.85;"
  .frameShadow
  (#OverallSansBGsize)   
    - .headerPlace
      = .header
    - .headerPlace
      = .headerDiv
      
    - .headerInside
      = .headerLeft
        ~ style="color: white; font-size: 30px; font-weight: bold; font-family: 'Almendra SC'; text-decoration:underline;"
        
  (#OverallRight50)
    - .headerInside
      = .headerRight
      ~ style="z-index: 5;"
        ~ style="color: white; font-size: 30px; font-weight: bold; font-family: 'Almendra SC'; text-decoration:underline;"
        
    - .headerInside
      = .headerRight
      ~ style="z-index: 6;"
        ~ style="color: white; font-size: 30px; font-weight: bold; font-family: 'Almendra SC'; text-decoration:underline;"

*/

/* with #Overall */
.whichDayYear {
  background: url(http://www.richnutcoffee.net/Coffee6.1) center no-repeat;
  margin-top: 2.55%;
  width: 13.27%;
  max-width: 175px;
  height: 14.3376%;
  max-height: 70px;
  box-shadow: 0px 0px 5px 5px red;
  color: white;
  text-align: bottom;
  z-index: 8;

}

/* Directs whichDayYear L and R */
.marginL {
  margin-left: -42.1%;

}

.marginR {
  margin-left: 29.2%;

}

.bottomPlace {
  position: absolute;
  top: 15%;
  font-size: 120%;
  
}

/* Frame Shadow */
.frameShadow {
  position:absolute;
  background: url(http://www.richnutcoffee.net/Frame_Shadow1.1) center no-repeat;
  background-size: 80% 80%;
  background-repeat: no-repeat no-repeat;
  left: 50%;
  margin-top: -1.35%;
  margin-left: -26%;
  width: 70.41%;
  max-width: 690px;
  height: 44.1012%;
  max-height: 200px;
  z-index: 2;

}

/* Header Background */
#headerBackground {
  position: absolute;
  left: 50%;
  top: -8.6%;
  margin-left: -4.35%;
  width: 13.27%;
  max-width: 125px;
  height: 57.35%;
  max-height: 450px; /*; 39.82% */
  z-index: 1;
  
}

/* Header Guts with #Overall */
.headerPlace {
  margin-top: -.85%;
  margin-left: -22.332%;
  width: 48.67%;
  max-width: 600px;
  height: 25.4163%;
  max-height: 200px;

}
 
/* Header Cover with headerPlace */
.header {
  background: url(http://www.richnutcoffee.net/Rich-B.jzz) center repeat;
  background-size: 100% 100%;
  z-index: 3;

}

/* Header Image with #OverallSansBGsize */
.headerDiv {
  background: url(http://www.richnutcoffee.net/RichNutHeader001.png) center top no-repeat, url(http://www.richnutcoffee.net/RichNutHeader002.png) center top no-repeat, url(http://www.richnutcoffee.net/RichNutHeader003.png) center top no-repeat, url(http://www.richnutcoffee.net/RichNutHeader004.png) center top no-repeat, url(http://www.richnutcoffee.net/RichNutHeader005.png) center top no-repeat, url(http://www.richnutcoffee.net/RichNutHeader006.png) center top no-repeat, url(http://www.richnutcoffee.net/RichNutHeader007.png) center top no-repeat, url(http://www.richnutcoffee.net/RichNutHeader008.png) center top no-repeat, url(http://www.richnutcoffee.net/RichNutHeader009.png) center top no-repeat, url(http://www.richnutcoffee.net/RichNutHeader010.png) center top no-repeat, url(http://www.richnutcoffee.net/RichNutHeader011.png) center top no-repeat;
  background-size: 130% 85%;
  opacity: 1.0;
  z-index: 2;

}

/* Location For header/headerDiv
.headerPlace {
  margin-top: 1.5%;
  margin-left: -22.12%;
  width: 44.25%;
  max-width: 500px;
  height: 17.21148%;
  max-height: 100px;

}

*/

 /*
.marginL {
  margin-left: -36.55%;

  }

.marginR {
  margin-left: 25.6%;
  
}

*/

/* For Day/Year */
.headerInside {
  margin-top: 2.5%;
  width: 11.06%;
  max-width: 125px;
  height: 4.424%;
  max-height: 50px;
  text-align: center;
  font-size: 270%;
  font-weight: bold;

}
 
/* For Day */
.headerLeft {
  margin-left: -28%;
  z-index: 3;

}

/* For Year */
.headerRight {
  margin-right: -28%;
  z-index: 3;

}

/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡΡ END 'HEADER' END ΡΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */

/* */
/* */
/* */

/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡΡ BEGIN 'TOPROWBUTTONS' BEGIN ΡΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* */
/*-397/-403 -231/-237 -65/-71 101/95 267/261 divided by 980 to make look wider */
/*
()
  none
    -
      =
        ~
          written
            ~
 (TopRowButtonOverall)
  .TopRowButtonA
  .TopRowButtonB
  
  .VeryGood
  .VeryGood1
  .topDrop25
  
  .TopRowMargin1A
  .TopRowMargin1B
  .TopRowMargin2A
  .TopRowMargin2B
  .TopRowMargin3A
  .TopRowMargin3B
  .TopRowMargin4A
  .TopRowMargin4B
  .TopRowMargin5A
  .TopRowMargin5B
  
  .TopRowBorderVisible
  .TopRowBorder
  .TopRowBorderCover
  .TopRowBorderOver
  .TopRowBorderSteam
  .TopRowBorderStatic
  
  .mainDrop
  .mainDrop .popuptext
  .mainDrop .popuptext::after
  .mainDrop .show
  
  @-webkit-keyframes fadeIn
  @-moz-keyframes fadeIn
  @-ms-keyframes fadeIn
  @-o-keyframes fadeIn
  @keyframes fadeIn
  
  .popuptextImage1
  .popuptextImage2
  .popuptextImage3
  .popuptextImage4
  .popuptextImage5

  .homeOverline
    .boldOverline
      .whiteWhite
  .topBigName
    .redBold
  .dropDotsTop
    .redBold
  .dropDotsBottom
    .blackBold
  .scrollUnderline
    .redRed
      .boldUnderline
  .topCharge
    .whiteWhite
      .boldUnderline
  .bottomCharge
    .whiteBold
  .lastLine
    .blackBlack
      .boldOverline
  
*/


/* TopRowButton Container*/
.TopRowButtonA {
  width: 14.6%; /* 11.5%; for 130 divided 1130 */
  max-width: 165px; /* 130px; up by 15 */
  height: 11.0289%; /* 9.5578%; */
  max-height: 52px; /* 50px; */
  margin-top: 0px;
  text-align: center;

}

/* TopRowButton Frame Container*/
.TopRowButtonB {
  width: 16.11%; /* 12.57%; for 130 divided 1130*/
  max-width: 182px; /* 142px; 147 */
  height: 13.23%; /* 11.4771%; */
  max-height: 62px; /* 60px; */
  margin-top: 0px;
  top: 26%; /* 90px */

}

	/* The TopRowButtons Placer/Organizers */
		/* Container Units For TopRowButton/Border and mainDrop1 ... Add #TopRowButtonOverall ... Add .TopRowButton1 */

.VeryGood {
  text-align: center;
  top: 25.5%; /* 85px */
  z-index: 100;

}

.VeryGood1 {
  text-align: center;
  top: 25.5%; /* 85px */
  z-index: 101;

}

.topDrop25 {
  top: 28%;
}

/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ START ΡΡΡΡΡΡΡΡΡΡΡΡΡΡ 1 ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */
/* -397/-403 -231/-237 -65/-71 101/95 267/261 divided by 980 to make look wider */	
.TopRowMargin1A {
  margin-left: -40.03%; /* -386px */
	  
}
	
.TopRowMargin1B {
  margin-left: -40.64%; /* -403px */
	  
}

/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ END ΡΡΡΡΡΡΡΡΡΡΡΡΡΡ 1 ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */

/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ START ΡΡΡΡΡΡΡΡΡΡΡΡΡΡ 2 ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */	
.TopRowMargin2A {
  margin-left: -23.09%; /* -244 ... -23.57%; for -231 */
	  
}
	
.TopRowMargin2B {
  margin-left: -23.70%; /* 250 ... -24.18%;  for -237 */
	  
}

/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ END ΡΡΡΡΡΡΡΡΡΡΡΡΡΡ 2 ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */

/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ START ΡΡΡΡΡΡΡΡΡΡΡΡΡΡ 3 ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */
	
.TopRowMargin3A {
  margin-left: -6.15%; /* 77 ... -6.63%; for -65 */
	  
}
	
.TopRowMargin3B {
  margin-left: -6.76%; /* 83 ... -7.24%; for -71 */
	  
}

/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ END ΡΡΡΡΡΡΡΡΡΡΡΡΡΡ 3 ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */

/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ START ΡΡΡΡΡΡΡΡΡΡΡΡΡΡ 4 ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */
	
.TopRowMargin4A {
  margin-left: 10.79%; /* 113 ... 10.31%; for 101 */
	  
}
	
.TopRowMargin4B {
  margin-left: 10.18%;  /* 107 ... 9.69%; for 95 */
	  
}

/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ END ΡΡΡΡΡΡΡΡΡΡΡΡΡΡ 4 ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */

/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ START ΡΡΡΡΡΡΡΡΡΡΡΡΡΡ 5 ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */

	
.TopRowMargin5A {
  margin-left: 27.73%; /* margin-left: 28.57%;  280 ... 27.24%; for 267 */
	  
}
	
.TopRowMargin5B {
  margin-left: 27.12%; /* margin-left: 27.96%;  274 ... 26.63%; for 261 */
	  
}

/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ END ΡΡΡΡΡΡΡΡΡΡΡΡΡΡ 5 ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ */

/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ START ΡΡΡΡΡΡΡΡΡΡΡΡΡΡ  Repeater Material For 1-5 Above ΡΡΡΡ */

		
	/* END The TopRowButtons Placer/Organizers */

/*	Cover for Border Image ... Add #TopRowButtonOverall ... Add .TopRowButton2 

.TopRowBorderVisible {
  background: url(http://www.richnutcoffee.net/TopRowBordersVisible.1) center repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: 99;

}

	Actual Border Image ... Add #TopRowButtonOverall ... Add .TopRowButton2 

.TopRowBorder {
  background: url(http://www.richnutcoffee.net/TopRowBorders.1) center no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: 98;

}

	The Cover ... Invisible Image ... Add #TopRowButtonOverall ... Add .TopRowButton1 ... Add .fontTop 

.TopRowButtonCover {
  background: url(http://www.richnutcoffee.net/CoffeeSteam_Cover.1) center repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: 97;

}

	Over ... Soften Underbelly of TopRowButton better show Steam ... Add #TopRowButtonOverall ... Add .TopRowButton1 ... Add .fontTop 

.TopRowButtonUnderbelly {
  background: url(http://www.richnutcoffee.net/CoffeeSteam_Over.1) center no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: 96;

}

	The Animated Steam ... Add #TopRowButtonOverall ... Add .TopRowButton1 ... Add .fontTop 

.TopRowButtonSteam {
  background: url(http://www.richnutcoffee.net/CoffeeSteam1.1) center no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: 95;

}

	The Bottom Most Static/QuikLoad Image ... Add #TopRowButtonOverall ... Add .TopRowButton1 ... Add .fontTop 

.TopRowButtonStatic {
  background: url(http://www.richnutcoffee.net/CoffeeSteam_1_1.jpg) center no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  z-index: 94;

}

*/

.TopRowButtonOver {
  background: url(http://www.richnutcoffee.net/TopRowBorders.1, http://www.richnutcoffee.net/TopRowBordersVisible.1) center no-repeat;
  background-position: center center;
  background-size: 100% 100%;

}

.TopRowButtonSpread {
  background: url(http://www.richnutcoffee.net/CoffeeSteam_1_1.jpg, http://www.richnutcoffee.net/CoffeeSteam1.1, http://www.richnutcoffee.net/CoffeeSteam_Underbelly.1, http://www.richnutcoffee.net/CoffeeSteam_Cover.1, http://www.richnutcoffee.net/TopRowBorders.1, http://www.richnutcoffee.net/TopRowBordersVisible.1) center no-repeat;
  background-position: center center;
  background-size: 100% 100%;

}

	/* The actual popup Image/Content for 1 */
		/* Popup container - can be anything you want */

.mainDrop {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  z-index: 100;

}

		/* The actual popup Container */

.mainDrop .popuptext {
  visibility: hidden;
  position: absolute;
  background-repeat: no-repeat;
  background-color: none;
  left: 50%;
  height: 800%;
  max-height: 290px;
  max-width: 300px;
  border-radius: 15%;
  padding: 0px 0;
  color: #fff;
  text-align: center;
  z-index: 101;
  
}

		/* Popup arrow */

.mainDrop .popuptext::after {
  position: absolute;
  border-color: transparent transparent #FFFFFF transparent;
  left: 50%;
  content: "";
  margin-left: -2.25%;
  border-width: 5px;
  border-style: solid;
  top: -1%;
  z-index: 100;
  
}

		/* Toggle this class - show and hide the popup */

.mainDrop .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  -moz-animation: fadeIn 1s;
  -ms-animation: fadeIn 1s;
  -o-animation: fadeIn 1s;
  animation: fadeIn 1s;
  z-index: 100;
  
}

/*
.mainDrop .hide {
  visibility: visible;
  -webkit-animation: fadeOut 1s;
  -moz-animation: fadeOut 1s;
  -ms-animation: fadeOut 1s;
  -o-animation: fadeOut 1s;
  animation: fadeOut 1s;
  z-index: 100;
  
}
*/

		/* background images for popup*/
.popuptextImage1 {
  background: url(http://www.richnutcoffee.net/Blueberry.1) center no-repeat;
  background-size: 105% 105%;
  width: 350%;
  margin-left: -159%;
  bottom: -354%;
  
}

.popuptextImage2 {
  background: url(http://www.richnutcoffee.net/Blue.1) center no-repeat;
  background-size: 135% 100%;
  width: 275%;
  margin-left: -138%;
  bottom: -440%;
  
}

.popuptextImage3 {
  background: url(http://www.richnutcoffee.net/No_Handle.1) center no-repeat;
  background-size: 150% 101%;
  width: 275%;
  margin-left: -139%;
  bottom: -442%;
  
}

.popuptextImage4 {
  background: url(http://www.richnutcoffee.net/Iris.1) center no-repeat;
  background-size: 125% 101%;
  width: 230%;
  margin-left: -115%;
  bottom: -444%;
  
}

.popuptextImage5 {
  background: url(http://www.richnutcoffee.net/Orange.1) center no-repeat;
  background-size: 113% 101%;
  width: 375%;
  margin-left: -144%;
  bottom: -442%;
  
}

		/* Add fadeIn animation (the popup) - to be used by all 5 here */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
  
}

@-moz-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
  
}

@-ms-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
  
}

@-o-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
  
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
  
}

/* Add fadeOut animation (the popup) - to be used by all 5 here
@-webkit-keyframes fadeOut {
  from {opacity: 1;} 
  to {opacity: 0;}
  
}

@-moz-keyframes fadeOut {
  from {opacity: 1;} 
  to {opacity: 0;}
  
}

@-ms-keyframes fadeOut {
  from {opacity: 1;} 
  to {opacity: 0;}
  
}

@-o-keyframes fadeIOut {
  from {opacity: 1;} 
  to {opacity: 0;}
  
}

@keyframes fadeOut {
  from {opacity: 1;}
  to {opacity:0 ;}
  
}
*/

		/* End add fadeIn */
		/* Start mainDrop Skeleton */

.boldOverline {  
  font-weight: bold;
  text-decoration: overline;

}

.whiteWhite {
  color: white;
  text-decoration-color: white;

}

/* add boldOverline whiteWhite*/
.mainOverline {
  font-size: 400%;
  font-family: 'Almendra SC';
  text-shadow: -3px 3px 3px #711B08;
  
}

.grayGray {
  color: gray;
  text-decoration-color: gray;

}

/* add boldOverline whiteWhite*/
.otherOverline {
  font-size: 160%;
  font-family: 'Almendra SC';
  text-shadow: -3px 3px 3px #711B08;
  
}

.redBold {  
  color: red;
  font-weight: bold;

}

/* add redBold */
.topBigName {
  font-size: 225%;
  font-family: 'Almendra SC';
  text-shadow: -3px 3px 3px #000000;
    
}

/* add redBold */
.topOtherName {
  font-size: 160%;
  font-family: 'Almendra SC';
  text-shadow: -3px 3px 3px #000000;
    
}

/* add redBold */
.dropDotsTop {
  font-size: 200%;
  vertical-align: sub;

}

.dropShadowTopB {
  text-shadow: 0px 3px 4px black;

}

.dropShadowTopR {
  text-shadow: 0px 3px 4px red;

}

.blackBold {  
  color: black;
  font-weight: bold;

}

.redOver {
  color:red;
  text-shadow:2px -3px 3px red;

}

.blackUnder {
  color: white;
  text-shadow:2px 3px 3px black
}

.redBelow {
  color:red;
  text-shadow:2px 3px 3px red;

}

/* add blackBold */
.dropDotsBottom  {
  font-size: 200%;
  vertical-align: sub;

}

.dropShadowBottomB {
  text-shadow: 0px -3px 4px black;

}

.dropShadowBottomR {
  text-shadow: 0px -3px 4px red;

}

.redRed {
  color: red;
  text-decoration-color: red;
  
}

.boldUnderline {
  font-weight: bold;
  text-decoration: underline;
  
}

/* add boldUnderline add redRed*/
.scrollUnderlineRed {
  background: url(http://www.richnutcoffee.net/DropScroll.zzp) center no-repeat;
  background-size: 90% 65%;
  font-size: 160%;
  opacity: 1;
  text-shadow: 0px 3px 8px red;

}

/* add boldUnderline add blackBlack*/
.scrollUnderlineBlack {
  background: url(http://www.richnutcoffee.net/DropScroll.zzp) center no-repeat;
  background-size: 90% 65%;
  font-size: 160%;
  opacity: 1;
  text-shadow: 0px 3px 8px black;

}

.whiteWhite {
  color: white;
  text-decoration-color: white;
  
}

/* add boldUnderline add whiteWhite*/
.topCharge {
  font-size: 200%;
  text-shadow: -1px 1px 3px black;
  
}

.whiteBold {
  color: white;
  font-weight: bold;

}

.textDec {
  text-decoration: none;

}

/* add whiteBold */
.bottomCharge {
  font-size: 130%;
  text-shadow: -1px 1px 3px black;

}

.blackBlack {
  color: black;
  text-decoration-color: black;
  
}

/* add boldOverline blackBlack*/
.lastLine {
  font-size: 160%;
  text-shadow: 3px -2px 8px #000000;
  
}

	/* End mainDrop Skeleton */
	
	
	/* END β€”- The actual popup Image/Content for 1 */
	
/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ END ΡΡΡΡΡΡΡΡΡΡΡΡΡΡ Repeater Material For 1-5 Above ΡΡΡΡ- */

/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ 1 ΡΡΡΡΡ */
/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ 2 ΡΡΡΡΡ */

/*
()
  none
    -
      =
        ~
          written
            ~

*/

/* ΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡΡ 2 ΡΡΡΡΡ */


/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡ END 'TOPROWBUTTONS' END ΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */

/* */
/* */
/* */

/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡ BEGIN 'GALLERY' BEGIN ΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */



/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡ END 'GALLERY' END ΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */

/* */
/* */
/* */

/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡ BEGIN 'WRITING TILES' BEGIN ΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */



/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡ END 'WRITING TILES' END ΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */

/* */
/* */
/* */

/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡ BEGIN 'FOOTER' BEGIN ΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */



/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡ END 'FOOTER' END ΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */

/* */
/* */
/* */

/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡ BEGIN 'TOPROWBUTTONS' BEGIN ΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* */



/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡ END 'TOPROWBUTTONS' END ΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */

/* */
/* */
/* */

/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡ BEGIN 'GALLERY' BEGIN ΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */



/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡ END 'GALLERY' END ΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */

/* */
/* */
/* */

/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡ BEGIN 'WRITING TILES' BEGIN ΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */


/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡ END 'WRITING TILES' END ΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */

/* */
/* */
/* */

/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡ BEGIN 'FOOTER' BEGIN ΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */



/* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* ΡΡΡΡ END 'FOOTER' END ΡΡΡΡ *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* *//* */


}