/*custom fonts*/
@font-face {
    font-family: 'imfellreg';
    src: url("../../fonts/imfell_reg.woff");
}

@font-face {
    font-family: 'imfellitalic';
    src: url("../../fonts/imfell_italic.woff");
}


@font-face {
    font-family: 'caviar';
    src: url('../../fonts/CaviarDreams-webfont.woff');
}


/*styling for main HTML tag sections. Organized in the order they appear on the HTML page (header to footer)*/
body {
    background-color:#523e30;
background-image:
radial-gradient(circle at 100% 150%, #523e30 24%, #634e3f 24%, #634e3f 28%, #523e30 28%, #523e30 36%, #634e3f 36%, #634e3f 40%, transparent 40%, transparent),
radial-gradient(circle at 0    150%, #523e30 24%, #634e3f 24%, #634e3f 28%, #523e30 28%, #523e30 36%, #634e3f 36%, #634e3f 40%, transparent 40%, transparent),
radial-gradient(circle at 50%  100%, #634e3f 10%, #523e30 10%, #523e30 23%, #634e3f 23%, #634e3f 30%, #523e30 30%, #523e30 43%, #634e3f 43%, #634e3f 50%, #523e30 50%, #523e30 63%, #634e3f 63%, #634e3f 71%, transparent 71%, transparent),
radial-gradient(circle at 100% 50%, #634e3f 5%, #523e30 5%, #523e30 15%, #634e3f 15%, #634e3f 20%, #523e30 20%, #523e30 29%, #634e3f 29%, #634e3f 34%, #523e30 34%, #523e30 44%, #634e3f 44%, #634e3f 49%, transparent 49%, transparent),
radial-gradient(circle at 0    50%, #634e3f 5%, #523e30 5%, #523e30 15%, #634e3f 15%, #634e3f 20%, #523e30 20%, #523e30 29%, #634e3f 29%, #634e3f 34%, #523e30 34%, #523e30 44%, #634e3f 44%, #634e3f 49%, transparent 49%, transparent);
background-size: 100px 50px;

background-attachment: fixed;

font-family:Verdana, Tahoma,  Geneva,  sans-serif;

}

header {
    width: 100%;
    height: 400px;
    background-image:url("../images/12n_cut1.png");
    background-position:right;
    background-repeat:no-repeat;
    background-color:#2f2312;
    overflow-y:hidden;
}

header .sectionleft0 {
    width:70%;
    
    float:left;
    border:#33242A;
    overflow-y:hidden;
}


header p {
     font-family:caviar;
    font-size:1.5em;
    margin-left:10px;
}

nav {
    position:sticky;
    top:0px;
    border-bottom: solid 2px #624933;
    background-color:#2f2312;
    margin-bottom:20px;
    text-align:center;
    padding-bottom:3px;
    font-size:1.2em;
    font-weight:bolder;
}

nav a {
    
    font-family:caviar;
    font-weight:bolder;
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 4px;
    vertical-align:middle;
    color:#bbab8b;
}

nav a:hover {
    text-decoration:none;
    color:#bb9c5d;
}

section {
    border:1px solid;
    border-radius:10px;
}

h1 {
    font-family:imfellreg;
    font-size:4em;
}

h2 {
    font-family:imfellitalic;
    font-size:3em;
}

footer {
    background-color:rgba(132, 108, 91, 0.80);
    color: #d4d4d4;
    text-align:center;
    border: 1px solid rgba(132, 108, 91, 0.80);
    border-radius:10px; 
}

/*styling for custom sections (with associated support styles). Grouped by 
    section; alphabetized groups
*/

/*multiple assign font color*/
h1, h2, header p, .bounded, .button, .overlay, nav, .wrcontain {
    color:#b0a196;
}

/*wildcard assign properties to a series of named sections*/
[class*="sectionmain"] {
    width:100%;
    margin-bottom:20px;
    text-align:center;
}

.sectionmain1 {
    height: 400px;
    background-color: #846c5b;   
    vertical-align:middle;
    background-image:url("../images/merch_cut1.png");
    background-repeat:no-repeat;
    background-position:left center;
}

/*horizontal scroll used in sectionmain1*/
.scrolling-wrapper {
    width:95%;
    margin-left:auto;
    margin-right:auto;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
/*use touch instead of scrollbar on touchscreen devices*/
.scrolling-wrapper {
  -webkit-overflow-scrolling: touch;
}
/*custom styling for the scrollbar*/
/* width */
::-webkit-scrollbar {
  height: 7px; /*use height instead of width to adjust a horizontal scrollbar*/
}

/* Track */
::-webkit-scrollbar-track {
  background: #846c5b;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #6c5849;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #5c4c3f;
}

/*styling for the buttons in the horizontal scroll in sectionmain1*/
.button {
    font-size:90px;
    height:115px;
    width:400px;
    margin-left:auto;
    margin-right:20px;
    margin-bottom:20px;
    border: 2px;
    border-style:solid;
    padding: 3px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    border-color:#5e4e3e;
    border-radius:10px;
    background-color:#152128;
}

    .button:hover {
        background-color: #223744;
    }


/*styling for the text on the buttons in the horizontal scroll in sectionmain1*/
.overlay {
    font-family: caviar;
    font-weight:bolder;
    font-size: 40px;
    float: right;
    padding-left: 10px;
    padding-top: 40px;
    
}

.sectionmain2 {    
    height:550px;
    background-color: #1b251e;
}
/*styling for grid of play buttons in sectionmain2*/
.playcontain {
    width:70%;
    margin-left:auto;
    margin-right:auto;
}

/*creates the 3 column format*/
.playgrid {
    float:left;
    width:33%;
    height:150px;
    color:#ffffff;
    -webkit-text-stroke: 1px #523e30;
    font-family:imfellreg;
    font-size:2.5em;
}

/*applies code to all of the playbg boxes that the share*/
[class*="playbg"] {
    background-repeat:no-repeat;
    background-position:center;
    vertical-align:middle;
    text-align:center;
    
}

    div.playcontain a {
        filter: sepia(70%);
    }

/*individual play button backgrounds*/
.playbg01 {
    background-color:#000000;
    background-image:url("../images/bg_hamlet.jpg");
}

.playbg02 {
     background-color:#d4d8e0;
     background-image:url("../images/bg_mov.jpg");
}

.playbg03 {
     background-color:#080500;
     background-image:url("../images/bg_mm.jpg");
}

.playbg04 {
     background-color:#a2896b;
     background-image:url("../images/bg_riii.jpg");
}

.playbg05 {
     background-color:#2c1d18;
     background-image:url("../images/bg_oth.jpg");
}

.playbg06 {
     background-color:#291e24;
     background-image:url("../images/bg_tempest.jpg");
}


/*styling to change the appearance of the button on hover so the user 
    knows it is a link

}*/

div.playcontain a:hover {
    font-size: 18px;
    filter: none;
}


.sectionmain3 {
    height: 650px;
    background-color: #33242A;
    background-image:url("../images/hamlet_cut.png");
    background-repeat:no-repeat;
    background-position:right bottom;
    overflow-y:hidden;
}
/*styling for the list of weblinks in sectionmain3*/
.wrcontain {
    width:55%;
    margin-left:auto;
    margin-right:auto;
    text-align:left;
    overflow:auto;
}

.wrcontain img {
    padding-right: 5px;
}

.wrtitle {
    font-family:caviar;
    font-weight:bolder;
    font-size:1.2em;  
    color: #6b4242;
}

.wrcontain a {
    color: #6b4242;
}

.wrcontain a:hover {
    color: #5c1919;
    text-decoration:none;
}

.wrcontain li {
    display:inline-block;
    color:#ffffff;
    border:1px solid #6b4242;
    padding:3px;
    vertical-align:top;
}
/*alternate background color for odd and even list items*/
.wrcontain li:nth-child(odd) {
    background-color:#b9ac93;
}

.wrcontain li:nth-child(even) {
    background-color:#978c76;
}

.left {
    float:left;
    padding:3px;
}

/*styling for button that navigates to the top of the page*/
.topnav {
    display:inline-block;
    position:fixed; /*keep the button on the page all the time*/
    bottom:10px;
    right:10px;
    color:rgba(209, 205, 190, 0.82); /*last number is the transparency index*/
    text-align:center;
    z-index: 10;
}

.topnav:hover {
    color:#5e4e3e;
}
/*add space at the bottom of the page for nav scrollilng if needed*/
.endsection:after {
    display: block; 
  content: " "; 
  height: 800px; 
  visibility: hidden; 
}

/*adaptive design code*/
/* On screens that are 992px wide or less, go from three columns to two columns*/
@media screen and (max-width: 992px) {
  .playgrid {
    width: 50%;
  }
  
  .sectionmain2 {
      height:700px;
  }

  .wrcontain {
      width: 100%;
  }

  .sectionmain3 {
       height:1100px;
   }
  
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .playgrid {
    width: 100%;
  }
  
  .sectionmain2 {
      height:1100px;
  }

   .wrcontain {
      width: 100%;
  }

   .sectionmain3 {
       height:1100px;
   }
}