@import url('https://fonts.googleapis.com/css?family=Eczar:400,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,700');
html,body {
    background: #000;
    padding: 0;
    width:100%;
    height:auto;
    overflow: hidden;
    margin: 0 !important;
}

.container{z-index:1;
width:100vw;
display:block;
margin:0;
padding:0;
margin-top:35vw;
}

/*.herotext::before {
content: "";
display: block;
position: absolute;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: -1;
top:0;
bottom:0;
right:0;
opacity: 0;
background-color: #343a40;
}*/

.translogo{width:100vw;
display:block;
position:absolute;
top:36%;
text-align:center;
height:auto;
padding:0 0 0 1em;
z-index:999999999999;
}
.translogo img{width:13em;}

.getready{
    display:block;
    width:100vw;
    text-align:center;
    font-size:.5em !important;
    font-family:"Work Sans" !important;
    font-weight:normal !important;
    color:white;
    line-height:175% !important;
    letter-spacing:1px;
    /*border:2px dotted red;*/
    }
h2.herotext{
display:block;
position:absolute;
text-align:center;
top:50% !important;
height:auto;
z-index:999999 !important;
font-size:3em;
color:white;
width:100%;
left:0;
padding:0 !important;
margin:0 !important;
line-height:120% !important;
font-family: Eczar;
font-size:200%;
letter-spacing:1px;
/*border: 2px dotted orange;*/
}


.row{width:100%;
    display:block;
    margin:0 auto;
    padding:0;
    height:20em;
    }
.item {
    display: inline-block;
    width: 49.8%;
    margin: 0;
    padding: 2%;
    height: 100%;
    background-color: lightgray;
    border: 1px solid white;
    float:left;
}
    
    #container{overflow: hidden;
     width:100%;}

#container1 {
   width: calc(100vw);
  height: 35vw;
  z-index: 1;
  position: absolute !important;
  background-image: url("/wp-content/plugins/frontslides/musicroom.jpg");
  background-repeat: no-repeat;
  background-size: contain !important;
  background-position:left;
  top: 0;
   left: 0;
  overflow:hidden;
  background-color: #4c6079;
}
  
#container2 {
  width:calc(100vw);
  height: 35vw;
  z-index: 1;
  position:absolute;
  background-image: url("/wp-content/plugins/frontslides/teacherstudent.jpg");
  background-repeat: no-repeat;
  background-size: contain !important;
  background-position:left;
  top: 0;
  left: 0;
  overflow:hidden;
  background-color: #dbedf1;
}

#container3 {
  width: calc(100vw);
  height: 35vw;
  z-index: 1;
  position:absolute;
  background-image: url("/wp-content/plugins/frontslides/greenhouse.jpg");
  background-repeat: no-repeat;
  background-size: contain !important;
  background-position:left;
  top: 0;
  left: 0;
  overflow:hidden;
  background-color: #030801;
}

.puzzle {
   background-image: url("/wp-content/plugins/frontslides/teacherstudent.jpg");
   width: calc(100% / 3);
   height: 35vw;
   float: left;
   padding:0;
   margin:0;
   background-size: cover;
   background-color:#dbedf1;
   overflow:hidden;
}

.puzzle2 {
   background-image: url("/wp-content/plugins/frontslides/greenhouse.jpg");
   width: calc(100% / 3);
   height: 35vw;
   float: left;
   padding:0;
   margin:0;
   background-size: cover;
   background-color:#030801;
   overflow:hidden;
}

.puzzle3 {
   background-image: url("/wp-content/plugins/frontslides/musicroom.jpg");
   width: calc(100% / 3);
   height: 35vw;
   float: left;
   padding:0;
   margin:0;
   background-size: cover;
   background-color:#4c6079;
   overflow:hidden;
}

      #piece1 {
  background-position: 0 0;
  display: none;
  /*background-size:cover;*/
  float:left;
  width: calc(100% / 3);
     height: 35vw;
  background-repeat: no-repeat;
  z-index:10;
  overflow:hidden;
  padding:0;
  margin:0;
  background-size: cover;
  }

      #piece2 {
   background-position:-33.333333vw 0;
   display: none;
   /*background-size:cover;*/
   float:left;
    width: calc(100% / 3);
      height: 35vw;
   background-repeat: no-repeat;
   z-index:10;
   overflow:hidden;
   background-size: cover;
   }

      #piece3 {
   background-position:-66.666666vw 0;
   display: none;
   /*background-size:cover;*/
   float:left;
   width: calc(100% / 3);
      height: 35vw;
   background-repeat: no-repeat;
   z-index:10;
   overflow:hidden;
   padding:0;
   margin:0;
   background-size: cover;
   }
   
    #piece4 {
  background-position:0 0;
  display: none;
  /*background-size:cover;*/
  float:left;
   width: calc(100% / 3);
     height: 35vw;
  background-repeat: no-repeat;
  z-index:20;
  overflow:hidden;
  padding:0;
  margin:0;
  background-size: cover;
  }

        #piece5 {
   background-position:-33.333333vw 0;
   display: none;
   /*background-size:cover;*/
    width: calc(100% / 3);
      height: 35vw;
   float:left;
   background-repeat: no-repeat;
   z-index:20;
   overflow:hidden;
   padding:0;
   margin:0;
   background-size: cover;
   }

        #piece6 {
   background-position: -66.666666vw 0;
   display: none;
   /*background-size:cover;*/
   width: calc(100% / 3);
   height: 35vw;
   float:left;
   background-repeat: no-repeat;
   z-index:20;
   overflow:hidden;
   padding:0;
   margin:0;
   background-size: cover;
   }
   
      #piece7 {
  background-position: 0 0;
  display: none;
  /*background-size:cover;*/
   width: calc(100% / 3);
     height: 35vw;
  float:left;
  background-repeat: no-repeat;
  z-index:30;
  overflow:hidden;
  padding:0;
  margin:0;
  background-size: cover;
  }

     #piece8 {
   background-position: -33.333333vw 0;
   display: none;
   /*background-size:cover;*/
    width: calc(100% / 3);
      height: 35vw;
   float:left;
   background-repeat: no-repeat;
   z-index:30;
   overflow:hidden;
   padding:0;
   margin:0;
   background-size: cover;
   }

      #piece9 {
   background-position:-66.666666vw 0;
   display: none;
   /*background-size:cover;*/
    width: calc(100% / 3);
      height: 35vw;
   float:left;
   background-repeat: no-repeat;
   z-index:30;
   overflow:hidden;
   padding:0;
   margin:0;
   background-size: cover;
   }
   
   #main-menu-mobile.sm-clean a.mobile-bars {
    margin-top: 15px;
    width: 25px;
    height: 30px;
    background-image: url(/wp-content/themes/bones-vphd/vphd/images/mobile-menu/menu.png) !important;
    background-repeat: no-repeat !important;
    background-position: 10px 9px !important;
    cursor: pointer !important;
}

#main-menu-mobile.sm-clean > li > a {
    text-decoration: none;
}