x

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  


}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, div{
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* latin */
@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway-SemiBold.eot');
  src: url('fonts/Raleway-SemiBold.eot?#iefix') format('embedded-opentype'),
    url('fonts/Raleway-SemiBold.woff') format('woff'),
    url('fonts/Raleway-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway-ExtraBold.eot');
  src: url('fonts/Raleway-ExtraBold.eot?#iefix') format('embedded-opentype'),
    url('fonts/Raleway-ExtraBold.woff') format('woff'),
    url('fonts/Raleway-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway-Regular.eot');
  src: url('fonts/Raleway-Regular.eot?#iefix') format('embedded-opentype'),
    url('fonts/Raleway-Regular.woff') format('woff'),
    url('fonts/Raleway-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}


@font-face {
  font-family: 'Raleway';
  src: url('fonts/Raleway-Medium.eot');
  src: url('fonts/Raleway-Medium.eot?#iefix') format('embedded-opentype'),
    url('fonts/Raleway-Medium.woff') format('woff'),
    url('fonts/Raleway-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

/*---End Reset-----*/


body, p{
  font-family: 'Raleway';
  font-size: 20px;
  margin: 0;
  padding: 0;
}




.logoContainer{ /*lightpost logo */
  position: absolute;

  left: 3%;

  z-index: 1;
}

.top{
  margin-top: 3%;
}
/* navigation */

#navContainer{
    width: 500px;
    height: 100vh;
    position: relative;
    overflow: hidden;
    position: fixed;
    transition: left 500ms;
    left: -400px;
    top: 0;
    z-index: 100;
}

#navContainer.display-nav {
  left: 0;
}
/* navBar is the skinny, always visible bar */

#navBar{
  height: 100vh;
  width: 100px;
  background-color: rgb(42, 45, 53);
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;

}

#navBar ul{
  margin-top: 20px;
  height: 45%;
}

.barText{  /* BOS & SAN text */
color: #fff;
font-size: 18px;
letter-spacing: 1px;
text-align: center;
padding: 15px 0px;
cursor: pointer;
border-left: 5px solid rgb(42, 45, 53);


}

.barText:hover{ 
  background-color: rgb(34, 37, 43);
  border-left: 5px solid rgb(34, 37, 43);
}



.current#nav-bos{ 
  background-color: rgb(34, 37, 43);
  border-left: 5px solid rgb(83,180,195);
}

.current#nav-san{ 
  background-color: rgb(34, 37, 43);
  border-left: 5px solid rgb(144,121,196);
}


#square{ /* toggle button */
  width: 50px;
  align-self: center;
}

 #sosoLogo{ 
  position: absolute;
  width: 60px;
  top: 95%;
  left: 50%;
  transform: translateY(-50%);
  transform: translateX(-50%);
}

/* navTray slides in and out on click */

#navTray{
  height: 100vh;
  width: 400px;
  background-color: rgb(35, 37, 44);
  position: absolute;
  left: 0;
  top: 0;

}

#toggle{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
 
}

#toggle li{
   border-left: 5px solid rgb(35, 37, 44);
   cursor: pointer;

}

#toggle li:hover{
   background-color: rgb(29, 30, 36);
   border-left: 5px solid rgb(29, 30, 36);
   cursor: pointer;

}

#toggle li:active,
#toggle li.currentPage {
  background-color: rgb(29, 30, 36);
  border-left: 5px solid rgb(232, 54, 118);

}

.trayText{
  font-size: 30px;
  color: #fff;
  padding: 50px 0 50px 150px;

}
 


object{ /* svg icons */
  width: 70px;
  position: absolute;
  padding: 30px 0px 30px 40px;
}


/*li .off{
  opacity: 0.35;
}

object.off{
  opacity: 0.35;
}*/

li p{
  list-style: none;
  display: block;
  width: 100%;
}

#clear{
  top: 93%;
  padding: 30px 0px;
  position: absolute;
  width: inherit;
}

#clear:hover{
  background-color: rgb(29, 30, 36);
}

.clearText{
  font-family: 'Raleway';
  font-size: 18px;
  color: #fff;
  padding-left: 130px;
  cursor: pointer;
}

#clear object{
  position: absolute;
  width: 45px;
  padding: 0px 0px 0px 65px;
  transform: translateY(-30%);
}


h1{
  font-weight: 800;
  font-size: 100px; 
  color: #fff;
  line-height: 1.2;
}

h2{
  padding-top: 20px;
  font-weight: 400;
  font-size: 50px;
  color: #fff;
  line-height: 1.2;
}




.button{
  border-style: solid;
  border-color: #fff;
  border-width: 3px;

}


a {
  text-decoration: none;
  color: #19dccb;
}

.indicator{
  width: 20px;
  height: 20px;
  border-radius: 20px;
}

.indicator:hover{
  opacity:0.5;
}


.lightpostLogo{
  padding-top: 10%;
  padding-left: 40px;
  margin: 0px 20px 0 10px;
}

.mobile-only {
  display: none;
}

.flash-message-container{
    width: 100%;
    margin-top: 3%;
    text-align: center;
    position: absolute;
}


/* -----------------  responsive for mobile---------------------------*/

/* Laptop */
@media only screen and (max-width: 1400px){
  h1{
    font-size: 120px;
  }

}

@media only screen and (max-width: 1200px){
  h1{
    font-size: 100px;
  }

 h2{
    font-size: 40px;
  }

  /* navigation */

#navContainer{
    width: 380px;
    left: -300px;
}

/* navBar is the skinny, always visible bar */

#navBar{
  width: 80px;
}

.barText{  /* BOS & SAN text */
font-size: 18px;
padding: 10px 0px 10px 0px;

}


#square{ /* toggle button */
  width: 50px;
}

 #sosoLogo{ 
  top: 93%;
  width: 50px;
}

/* navTray slides in and out on click */

.lightpostLogo{
  width: 150px;
  margin:0px;
  padding: 30px 0px 0px 30px;
}

#navTray{
  width: 300px;
}


.trayText{
  font-size: 26px;
  padding: 40px 0 50px 120px;
}


object{ /* svg icons */
  width: 60px;
  padding: 20px 0px 20px 30px;
}


#clear{
  top: 87%;
  padding: 30px 0px;
  position: absolute;
  width: inherit;
}


.clearText{
  font-size: 14px;
  color: #fff;
  padding-left: 70px;
  cursor: pointer;
}

#clear object{
  position: absolute;
  width: 30px;
  padding: 0px 0px 0px 30px;
  transform: translateY(-30%);
}


}



/*Laptop (small) */

@media only screen and (max-width: 1024px){
  .centeredText{
  transform:translateX(-10%);

  }

#navContainer{
    width: 325px;
    left: -250px;
}

/* navBar is the skinny, always visible bar */

#navBar{
  width: 75px;
}

.barText{  /* BOS & SAN text */
font-size: 16px;
padding: 10px 0px 10px 0px;

}


#square{ /* toggle button */
  width: 40px;
}

 #sosoLogo{ 
  top: 93%;
  width: 50px;
}

/* navTray slides in and out on click */

.lightpostLogo{
  width: 150px;
  margin:0px;
  padding: 30px 0px 0px 30px;
}

#navTray{
  width: 251px;
}


.trayText{
  font-size: 22px;
  padding: 40px 0 50px 100px;
}


object{ /* svg icons */
  width: 50px;
  padding: 20px 0px 20px 30px;
}



.clearText{
  font-size: 14px;
  color: #fff;
  padding-left: 70px;
  cursor: pointer;
}

#clear object{
  position: absolute;
  width: 30px;
  padding: 0px 0px 0px 30px;
  transform: translateY(-30%);
}

}


@media only screen and (max-width: 667px) {

.container.display-nav{
  display: none;
}
.desktop-only{
  display: none;
}

.mobile-only {
  display: block;
}

.flash-message-container{
  padding-left: 85px;
  margin-top: 150%;
  width: 70%;
}

/* navigation */

#navContainer{
    width: 300px;
    height: 100vh;
    position: relative;
    overflow: hidden;
    position: fixed;
    transition: left 500ms;
    left: -225px;
    top: 0;
    z-index: 100;
    overflow: hidden;
}


/* navBar is the skinny, always visible bar */

#navBar{
  width: 75px;
}

.barText{  /* BOS & SAN text */
font-size: 16px;
padding: 10px 0px 10px 0px;

}


#square{ /* toggle button */
  width: 40px;
}

 #sosoLogo{ 
  top: 93%;
  width: 50px;
}

/* navTray slides in and out on click */

.lightpostLogo{
  width: 125px;
  margin:0px;
  padding: 30px 0px 0px 30px;
}

#navTray{
  width: 225px;
}


.trayText{
  font-size: 22px;
  color: #fff;
  padding: 30px 0 40px 90px;
  cursor: pointer;
}


h3{
  font-weight: 700;
  font-size: 25px;
  color: #fff;
  width: 170px;
  line-height: 1.3;
  padding-left: 30px;
  padding-bottom: 40px;
  letter-spacing: 1.8px;
}

object{ /* svg icons */
  width: 40px;
  position: absolute;
  padding: 20px 0px 20px 30px;
}


li p{
  list-style: none;
  display: block;
  width: 100%;
}

#clear{
  top: 87%;
  padding: 30px 0px;
  position: absolute;
  width: inherit;
}


.clearText{
  font-size: 14px;
  color: #fff;
  padding-left: 70px;
  cursor: pointer;
}

#clear object{
  position: absolute;
  width: 30px;
  padding: 0px 0px 0px 30px;
  transform: translateY(-30%);
}


}

@media only screen and (max-width: 320px){
  h3{
    font-size: 20px;
  }



}