@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,700';

html  {
    cursor: url("./Fez-Medlrg.png"), auto;
            width: 22px;
  background-color: FFFFFF;
}
body {
  font-family: 'Roboto';
  margin: 0;
  padding: 0;
  hyphens: manual;
}
.menucontainer  {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 200;
/*  border: 1px solid black;*/
}
.menu {
  display: flex;
  justify-content: space-around;
  margin: 20px 70px;
/* margin: calc(10px + 1vw) calc(7.5px + 0vw);*/
}
.menuitems a  {
  list-style-type: none;
  color: black;
  font-size: calc(8px + 0.55vw);
  line-height: 28px;
  font-weight: 400;
  cursor: pointer;
}
.menuitems a:hover  {
  font-style: italic;
}
.deetscontainer  {
  position: absolute;
  top: calc(25px + 8vw);
  left: calc(5px + 6vw);
  width: calc(50px + 14vw);
  z-index: 0;
  /*border: 1px solid black;*/
}
.deets.title  {
  top: -0.57vw;
  position: relative;
  font-size: calc(10px + 5vw);
  font-weight: 400;
  text-decoration: underline;
  /*width: calc(50px + 7vw);*/
  /*border: 1px solid black;*/
}
.deets.category  {
  margin-top: calc(2px + 0.5vw);
  /*margin-top: calc(2px + 11.7vw);*/
  font-size: calc(4px + 2.3vw);
  text-transform: uppercase;
  font-style: italic;
}
.deets.blurb  {
   margin-top: calc(2px + 0.4vw);
  /*font-size: calc(8px + 0.6vw);
  line-height: calc(6px + 1.1vw);*/
   font-size: calc(6px + 0.5vw);
  line-height: calc(2px + 1.3vw);
/*  color: rgb(100, 100, 100);*/
  /*font-style: italic;*/
}
.deets.press a {
  list-style-type: none;
  text-decoration: underline;
  color: black;
  /*font-style: italic;*/
  line-height: calc(6px + 1.3vw);
}
.deets.press span  {
	/*font-weight: 600;*/
}
.workcontainer  {
  position: absolute;
  top: calc(25px + 8vw);
  /*left: calc(75px + 24vw);*/
  right: calc(15px + 5vw);
  /*border: 1px solid black;*/
}
.vidcontainer {
  position: relative;
  /*border: 1px solid black;*/
  margin-bottom: 4vw;
  width: 63vw;
}
.vidwrapper {
  /*border: 1px solid black;*/
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.vidwrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.bottom  {
  position: absolute;
  top: calc(10px + 60vw);
  left: 0px;
  width: 100%;
  height: 100px;
  /*border: 1px solid black;*/
  text-align: center;
  line-height: 20px;
}
@media only screen 
  and (min-device-width: 320px) 
    and (max-device-width: 1324px)
/*  and (max-device-width: 480px)
*/  and (-webkit-min-device-pixel-ratio: 2) 
    {

.deetscontainer  {
  top: calc(50px + 12vw);
  position: relative;
  left: 7vw;
  width: calc(60px + 80vw);
  min-width: 200px;
  z-index: 0;
}
.deets.title  {
  font-size: calc(10px + 5vw);
}
/*.deetstitlemob {
  opacity: 1;
}*/
.deets.category  {
  margin-top: calc(10px + 0.8vw);
  /*margin-top: 13vw;*/
  font-size: calc(5px + 1vw);
  /*font-size: calc(8px + 2vw);*/
  /*max-width: 600px;*/
}
.deets.blurb  {
  margin-top: calc(4px + 0.5vw);
  font-size: calc(6px + 0.4vw);
  line-height: calc(4px + 1vw);
  width: 50vw;
}
.workcontainer  {
  position: relative;
  margin-top: calc(145px + 0.5vw);
  left: 7vw;
}
.vidcontainer {
  width: 84vw;
}
.bottom  {
 top: 120vw;
}
}
/*This first media query is for a narrow desktop window*/
@media only screen and (min-width: 200px) and (max-width: 824px)  {
.deetscontainer  {
/*  top: calc(50px + 12vw);*/
   top: calc(25px + 8vw);
  position: relative;
  left: 7vw;
  width: calc(60px + 80vw);
  min-width: 200px;
  z-index: 0;
}
.deets.title  {
  font-size: calc(10px + 5vw);
}
/*.deetstitlemob {
  opacity: 1;
}*/
.deets.category  {
  margin-top: calc(10px + 0.8vw);
  /*margin-top: 13vw;*/
  font-size: calc(5px + 1vw);
  /*font-size: calc(8px + 2vw);*/
  /*max-width: 600px;*/
}
.deets.blurb  {
  margin-top: calc(4px + 0.5vw);
    font-size: calc(9x + 0.5vw);
/*    font-size: calc(6px + 0.5vw);*/
/*  font-size: calc(6px + 0.4vw);*/
  line-height: calc(5px + 1vw);
  width: 50vw;
}
.workcontainer  {
  position: relative;
/*  margin-top: calc(145px + 0.5vw);*/
  margin-top: calc(5px + 6vw); 
/*    margin-top: calc(5px + 8vw);    */
  left: 7vw;
}
.vidcontainer {
  width: 84vw;
}
.bottom  {
 bottom: 120vw;
}
}
@media only screen 
  and (min-device-width: 320px) 
    and (max-device-width: 1024px)
/*  and (max-device-width: 480px)
*/  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {
.deetscontainer  {
  top: calc(50px + 12vw);
  position: relative;
  left: 7vw;
  width: calc(60px + 80vw);
  min-width: 200px;
  z-index: 0;
}
.deets.title  {
  font-size: calc(10px + 5vw);
}
/*.deetstitlemob {
  opacity: 1;
}*/
.deets.category  {
  margin-top: calc(10px + 0.8vw);
  /*margin-top: 13vw;*/
  font-size: calc(5px + 1vw);
  /*font-size: calc(8px + 2vw);*/
  /*max-width: 600px;*/
}
.deets.blurb  {
  margin-top: calc(4px + 0.5vw);
  font-size: calc(6px + 0.4vw);
  line-height: calc(4px + 1vw);
  width: 50vw;
}
.workcontainer  {
  position: relative;
  margin-top: calc(145px + 0.5vw);
  left: 7vw;
}
.vidcontainer {
  width: 84vw;
}
.bottom  {
 bottom: 120vw;
}
}
@media only screen 
  and (min-device-width: 500px) 
    and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
.deetscontainer  {
  top: calc(25px + 5vw);
}
.workcontainer  {
  top: calc(25px + 5vw);
}
}*/