@charset "UTF-8";


body {
 background-color:#3172ae;
 font-size:16px;
 margin:0;
 margin-bottom:130px;
 font-family: "proxima-nova", sans-serif;
 
}

a {
 
 color:#ffffff;
 
}
#panelTop img {
 
 display:inline-block;
 
  
}

#panelTop div {

background-color:rgba(23,22,70,0.7);
width:100%;
left:50%;
margin-left:57px;
position:absolute;
height:56px;
bottom:0;



}

#panelTop div:last-child {

left:auto;
margin-left:auto;
right:50%;
margin-right:57px;


}


#panelTop {
 
 position:fixed;
 top:10%;
 left:0;
 right:0;
 opacity:1;
 transition: opacity 0.5s ease;
 width:70%;
 min-width:800px;
 height:92px;
 margin:0 auto 0 auto;
 overflow:hidden;
 padding:0 3rem;
 text-align:center;
 cursor:default;
 z-index:2; /* fix flashing bug on restoration of names */
 
}

#mainContainer {
 
 
 width:100%;
 background-image:url(https://image.e.tufts.edu/lib/fe9e13727664067f74/m/9/50d659db-5224-4d45-a105-5c0f6d4ad823.jpg);
 background-repeat:no-repeat;
 display:inline-block;
 
 background-size:cover;
 border-bottom:8px solid #1d3a73;
 
 
}


#panel {
 
 width:70%;
 background-color:#1c305e;
 padding:60px 50px;
 margin:8% auto 0 auto;
 z-index:2;
 text-align:center;
 opacity:1;
 transition: min-height 0.5s;
 cursor:default;
 min-height:160px;
 
}


 #panel h1 {
  
 color:#fff;
 font-size:1.5rem;
 margin:0;
 font-family: "proxima-nova", sans-serif;
font-style: normal;
font-weight: 100;
  
 }
 
  #panel h2 {
  
 color:#fff;
 font-size:3rem;
 margin:0;
 font-family: "proxima-nova", sans-serif;
font-style: normal;
font-weight: 700;
  
 }

  #panel h3 {
  
 color:#fff;
 font-size:1rem;
 margin:0;
 font-family: "proxima-nova", sans-serif;
font-style: normal;
font-weight: 100;
  
 }

#head p {
 
 color:#fff;
 font-size:1rem;

 font-family: "proxima-nova", sans-serif;
font-style: normal;
font-weight: 100;
 margin:0.5rem auto 2rem;
 
 
}
 
  
 .large {
  
  font-family: "proxima-nova", sans-serif;
  font-size:1.6rem;
  font-weight:700;
  
 }
 
 
 
#footer {
 
  position: fixed;
 left:0;
 bottom:0;
    width: 100%;
 padding:20px;
 box-sizing:border-box;
 background-color:#1c305e;


 
}



#footer a:last-child {
 
 float:right;
 color:#fff;
 font-size:1rem;
 margin:18px 0 0 0;
 font-family: "proxima-nova", sans-serif;
font-style: normal;
font-weight: 100;
 
 
}

#footer img {
 
 width:300px;
 float:left
 
 
}




.name{
 padding-right:30px;
 
 

 
}



#nameGroupContainer {
 
 
 opacity:1;
 transition: opacity 0.5s ease;
 margin: 1.5rem auto;
 line-height:1.75;
 padding:0 1%;
 

  
}




.nameGroup {
 
 font-size:1.5rem;
 
 color:#fff;
 font-family: "proxima-nova", sans-serif;
font-style: normal;
font-weight: 400;
 display:inline;
 
 
 
 
  
}


.nameGroup:not(:first-child) {
  display:none;
}





#description {
 font-size:1.25rem;

 border-top:1px solid #3e8ede;
 line-height:1.5;
 color:#fff;
 font-family: "proxima-nova", sans-serif;
font-style: normal;
font-weight: 100;
 padding: 1% 5%;
 text-align:center;
  
}




.nameGroup:last-child {
 
 color:#fff;
 padding-bottom:85px;

 
}



.hour {
 
 color:#932f35;
 padding:0 10px;
 display:none; /* disabling this in favor of placing hours in main panel */
 
}



.active {
 

 
}



#scrollbarContainer {

 margin:30px auto 0 auto;
 text-align:center;
 left:0%;
 cursor:move;

}

.slider {
 background-color:#3e8ede;
 
 height:9px;
 border:none;
 
}

.scrollbarSegment {
 

 height:9px;
 margin:0;
 width:14.29%;   /* 100 over number of segments (11 bars - 9.09%, 12 bars - 8.33%) */
 box-sizing:border-box;
 padding:0;
 float:left;
 border-right: #192f61 solid 2px;
 z-index:999;
 

 
}




  .ui-slider  .ui-slider-handle {
     top:-8px;
  cursor:move;
  height:26px;
  width:26px;
  background-image:url(https://image.e.tufts.edu/lib/fe9e13727664067f74/m/9/abf6bfff-bbe3-45d9-ba77-7cf7ac3c59e5.svg);
  background-repeat:no-repeat;
  border:0;
  border-radius:13px;
  background-color:transparent;
  
   
  }



 #dragContainer {
  
 position:fixed;
 top:10%;
 vertical-align:top;
 background-color:red;
 height:120px;
 width:100%;
 min-width:800px;
 left:0;
 right:0;
 margin:285px auto 0 auto;
 cursor:move;
 z-index:2;
 
}
 
 input {
  
 
 border:0;
 background-color:#1d3a73;
 background-repeat:no-repeat;
 background-position:right;
 height:95px;
 
 font-size:2.5rem;
 
 color:#fff;
 width:70%;
 margin:6px auto 8% auto;
 padding:3px 80px 3px 20px;
 transition: background 0.3s ease;
 transition-delay:0.5s;
 display:block;
 font-family: "proxima-nova", sans-serif;
font-style: normal;
font-weight: 400;
 
 
 }
 

 

 
input:focus ~ #footer {
  
  opacity:0;
  transition: opacity 0.5s ease;
 }
 
 input:focus ~ #panel {
  
  opacity:0;
  transition: opacity 0.5s ease;
 }
 
  input:focus ~ #panelTop {
  
   opacity:0;
   transition: opacity 0.5s ease;
 }
 
 
input::-webkit-input-placeholder {
   color:rgba(255,255,255,0.6)
}

input:-moz-placeholder { /* Firefox 18- */
   color:rgba(255,255,255,0.6)
}

input::-moz-placeholder {  /* Firefox 19+ */
   color:rgba(255,255,255,0.6) 
}

input:-ms-input-placeholder {  
   color:rgba(255,255,255,0.6) 
}
 
 input:-input-placeholder {  
   color:rgba(255,255,255,0.6) 
}





  
  #intro {
   
 
 font-size:1rem;
 
 color:rgba(255,255,255,1);
 padding:25px 0 0 0;
 display:none;
 
 font-family: "proxima-nova", sans-serif;
font-style: normal;
font-weight: 400;
 
   
  }
  
    #intro span{
   
 padding-left:5px;

   
  }
  
    #standby {
   

 font-size:1rem;
 
 color:rgba(255,255,255,1);
 padding:25px 0 0 0;
 display:none;
 font-family: "proxima-nova", sans-serif;
font-style: normal;
font-weight: 400;
  
   
  }
  
  #curvedarrow {
  display:inline-block;
  position: relative;
  top:-14px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid white;
  
  -webkit-transform: rotate(-110deg);
  -moz-transform: rotate(-110deg);
  -ms-transform: rotate(-110deg);
  -o-transform: rotate(-110deg);
  transform: rotate(-110deg);
}

#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid white;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

h5 {
 
 font-size:0.8rem;
 font-weight:100;
 content: AM;
 margin:0;
 display:inline;
 opacity:1;
 padding-left:3px;
 
}

b {
 font-weight:700;
 
}


/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
   
 
   
#footer a:last-child {

margin:8px 0 0 0

}

#footer img {

width:200px

}

#footer {

padding:10px 20px;

}


#mainContainer {

 background-image:none;
border-bottom:none;

}

input {
 
 margin:0;
width:100%;
max-height:60px;
font-size:1.25rem;
border-radius: 0;
box-sizing: border-box; 


 }






#panel {

margin:0 auto 0 auto;
width:100%;
height:auto;
padding:30px 0;


}

#scrollbarContainer {

margin-left:40px;
margin-right:40px;

}

#panel h1 {

font-size:1.25rem;

}
 
#panel h2 {

font-size:2rem

}

#description {

font-size:1.1rem;
padding:0 30px;

}

#nameGroupContainer {

margin-top:12px

}

   
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
   
 
   
#footer a:last-child {

margin:8px 0 0 0

}

#footer img {

width:200px

}

#footer {

padding:10px 20px;

}


#mainContainer {

 background-image:none;
border-bottom:none;

}

input {
 
 margin:0;
width:100%;
max-height:60px;
font-size:1.25rem;
border-radius: 0;
box-sizing: border-box; 


 }






#panel {

margin:0 auto 0 auto;
width:100%;
height:auto;
padding:30px 0;


}

#scrollbarContainer {

margin-left:40px;
margin-right:40px;

}

#panel h1 {

font-size:1.25rem;

}
 
#panel h2 {

font-size:2rem

}

#description {

font-size:1.1rem;
padding:0 30px;

}

#nameGroupContainer {

margin-top:12px

}
   
   
}



  
@media screen and (max-device-width: 800px) and (orientation : portrait)  {
  



#panel {
 



 
} 

#nameGroupContainer {
 
padding:0 4%;


}

.nameGroup {

font-size:250%;


}


#description {

font-size:200%;

}

#intro {

font-size:200%

}

#intro, #head p, #panel h1, #panel h3 {

font-size:200%

}

input {
 
 font-size:225%;

 }
 
 



.ui-slider  .ui-slider-handle {
 
 top:-18px;
  width:50px;
 height:50px;
   background-size:cover;

  }

.ui-corner-all {

border-radius:25px

}

#footer {

padding-bottom:40px;
padding-top:40px;

}

#footer a:last-child {

font-size:200%;
margin:0;

}

 
 
 }