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

html  {
    cursor: url("./Fez-Medlrg.png"), auto;
            width: 22px;
}
body {
  font-family: 'Roboto';
  margin: 0;
  padding: 0;
}
.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: fixed;
  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;*/
}
.marketcontainer  {
  margin-top: calc(2px + 0.5vw);
/*  text-transform: uppercase;*/
  text-decoration: underline;
}
.marketitems a  {
  list-style-type: none;
  color: black;
  font-size: calc(8px + 0.55vw);
  line-height: calc(10px + 1.3vw);
  font-weight: 400;
  cursor: pointer;
}
.marketitems a:hover  {
  font-style: italic;
}
.workcontainer  {
  position: absolute;
  top: calc(25px + 8vw);
  /*left: calc(75px + 24vw);*/
  right: calc(15px + 5vw);
  /*border: 1px solid black;*/
}
.projecttitle  {
  position: relative;
  text-decoration: underline !important;
  font-size: 1.8vw;
  line-height: 2.1vw;
  width: 50vw;
/*  margin-top: calc(12px + 2.4vw);*/
  margin-bottom: calc(8px + 0.1vw);
}
.projecttitle span {
  display:inline-block;
  font-style: italic;
  text-decoration: none;
}
.vidcontainer {
  position: relative;
  /*border: 1px solid black;*/
  margin-bottom: 3.7vw;
  width: 63vw;
}
/*.vidcontainer .projecttitle  {
  position: relative;
  text-decoration: underline !important;
  font-size: 1.8vw;
  line-height: 2.1vw;
  width: 50vw;
  margin-top: calc(12px + 2.4vw);
  margin-bottom: calc(8px + 0.1vw);
}
.vidcontainer .projecttitle span {
  display:inline-block;
  font-style: italic;
  text-decoration: none;
}*/
.vidwrapper {
  /*border: 1px solid black;*/
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  margin-top: 0.5vw;
  margin-bottom: 1vw;
}
.vidwrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.instawrapper  {
   position: relative;
   width: 63vw;
   margin-top: -1vw;
   margin-bottom: 4vw;
  /*border: 1px solid black;*/
}
.instafilm  {
  position: relative;
  float: left;
  padding-top: 1vw;
  width: 31vw;
  height: 20vw;
  padding-bottom: 4vw;
   /*border: 1px solid black;*/
}
.instafilm iframe {
  position: absolute;
/*width: 49%;*/
  top: 0;
  left: 0;
width: 100%;
height: 100%;
 /*border: 1px solid black;*/
}
#wind  {
  margin-right: 1vw;
}
#bunsen  {
  margin-right: 1vw;
}

#tftitlewrapper  {
position: relative;
top: 3vw;
width: 63.25vw;
}
#tftitle  {
  float: left;
  text-decoration: underline;
  font-size: 1.8vw;
  line-height: 2vw;
  width: 17vw;
  padding-bottom: 0.1vw;
}
#tftitle span {
  display:inline-block;
  font-style: italic;
  text-decoration: none;
}

#clickimages {
  padding-top: 2.8vw;
   float: right;
   font-size: 1.1vw;
   text-align: right;
   width: 23vw;
 /*border: 1px solid black;*/
}

.printwrapper  {
  position: relative;
  top: 3vw;
  margin-bottom: 2vw;
  width: 63.25vw;
}
.print  {
  position: relative;
  float: left;
  /*margin-top: 0.5vw;*/
  /*border: 1px solid black;*/
}
.print img {
  width: 49%;
  margin-top: 1vw;
/*  float: left;*/
}
#energy  {
  padding-right: 1.5%;
}
#mood   {
  padding-right: 1.5%
}
#muscle  {
  box-sizing: border-box;
  border: 1px solid #ABABAB;
}
.bottom  {
  position: absolute;
  margin-top: calc(10100px + 154vw);
  height: 100px;
  left: 0px;
  width: 100%;
  text-align: center;
  line-height: 20px;
}
@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);
}
.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;
}
/*.print img  {
  width: 60%;
}*/
.bottom  {
 top: 430vw;
}
}
@media only screen 
  and (min-device-width: 300px) 
    and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
.deetscontainer  {
  top: calc(25px + 5vw);
}
.workcontainer  {
  top: calc(25px + 5vw);
}
}