@import "https://fonts.googleapis.com/css?family=Open+Sans";
@font-face {
  font-family: 'titleFont';
  src: url("Font/LUZRO.TTF"); }

#total {
  position: static;
  z-index: -100000; }

.backimg {
  height: 100%;
  width: 100%;
  margin: 0px;
  background-image: url(startToFinish5.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
  position: static;
  margin-top: 95px; }

body {
  height: 100%;
  width: 100%;
  margin: 0px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: static;
  overflow-y: scroll; }

.headerLogo {
  float: left;
  margin-top: 0px;
  height: 40px;
  width: 40px;
  background-size: contain; }

#both {
  width: 100%;
  display: inline-block;
  white-space: nowrap;
  margin: 0px;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9000;
  border-bottom: 1px solid #d4d4d4;
  background-color: #ffffff; }

.container {
  display: flex;
  padding: 25px; }

.right {
  flex: 1;
  margin: auto;
  box-sizing: border-box;
  padding: 15px; }

.left {
  flex: 3;
  margin: auto;
  box-sizing: border-box; }

.menu-icon {
  display: none;
  width: 10%; }

.responsive {
  display: none; }

@media (max-width: 1155px) {
  .menu-icon {
    display: flex;
    font-family: "titleFont";
    color: black;
    text-decoration: none;
    margin: auto; }
  .menu-icon:hover {
    color: #00a600; }
  .right {
    display: none; } }

.hiddenLinks {
  display: none;
  top: 100px;
  left: 100px; }

@media (min-width: 1155px) {
  .showContainer {
    height: 0px; } }

@media (max-width: 1155px) {
  .responsive {
    display: flex;
    margin: auto;
    color: #00a600;
    text-decoration: none;
    font-family: "titleFont";
    width: 10%; }
  .showContainer {
    display: flex;
    justify-content: center;
    width: 100%;
    text-align: center;
    z-index: 1000;
    position: fixed;
    top: 0px; }
  .links {
    width: 100%;
    text-align: center;
    margin: 133px 0px;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.959);
    border-bottom: 1px solid #d4d4d4;
    text-decoration: none;
    padding: 18px;
    justify-content: space-between; }
  .hl {
    text-decoration: none;
    list-style: none;
    text-align: center;
    padding: 16px; }
  .l {
    font-Size: 20px;
    text-decoration: none;
    font-family: Helvetica;
    color: black;
    align-items: center;
    padding: 13px;
    border-bottom: 1px solid rgba(36, 35, 35, 0.514); }
  .l:hover {
    cursor: pointer;
    border-bottom: 2px solid #00a600; } }

.hideContainer {
  display: none;
  width: 100%;
  height: 100%; }

/*
.right{
    //display: inline-flex;
    vertical-align: -webkit-baseline-middle;    
  //  margin-right: 10%; 
    text-align: right;
    display:inline-block;
    //margin: 0px;
    top: 28px;
    white-space: nowrap;
    overflow: hidden;
    padding: 2px 2px;
      //width: 100%; 
     position: fixed;
     // top: 0px;
      right: 25px;
    //  width: 400px;
      text-overflow: ellipsis;
 }
*/
/*.right{
    list-style-type: none;
    float: right;
    //right: 0px;
}
*/
/*
.left {  
    //display: inline-flex;
    vertical-align: -webkit-baseline-middle;     
      //margin: 0px;
      //margin-left: 10%;
      padding: 2px 2px;
      //list-style: none;
     display:inline-block;
      top: 4px;
      //list-style-type: none;
      //color: $third-color;
      //width: 100%;
     // background-color: $third-color;
     white-space: nowrap;
    overflow: hidden;
     text-align: left;
      position: fixed;
     // top: 0px;
      left: 20px;
      //border: #b8b6b6 1px;
      //transform: translate(-50%, -50%);
     // white-space: nowrap;
      //overflow: hidden;
      text-overflow: ellipsis;
    //width:500px;
  
    }

*/
.list {
  display: inline-block;
  text-align: center;
  padding: 0px 15px; }

.r {
  color: black;
  padding: 5px 18px;
  font-Size: 20px;
  text-decoration: none;
  font-family: Helvetica; }

.r:hover {
  background-color: #ffffff;
  color: #00a600;
  font-family: Helvetica; }

.logo {
  vertical-align: -webkit-baseline-middle;
  display: inline-block; }

.sroub {
  color: black;
  display: inline-block;
  padding: 5px 3px;
  font-Size: 35px;
  text-decoration: none;
  font-family: "titleFont";
  text-align: center;
  vertical-align: -webkit-baseline-middle; }

.sroub:hover {
  background-color: #ffffff;
  color: #00a600;
  font-family: "titleFont";
  cursor: pointer; }

.logo:hover {
  cursor: pointer; }

#tree {
  height: 95px;
  width: 95px; }

.containSP {
  height: 100%;
  width: 100%;
  display: fixed; }

#specialProjects {
  margin: auto; }

.sheeroverlay {
  background: linear-gradient(rgba(64, 64, 64, 0.72), rgba(255, 250, 250, 0.58));
  height: 100%;
  width: 100%; }

/*
#quote{
    flex: 1;
    color: $third-color;
    font-family: $primary-font;
    width: 790px;
    font-size: 70px;
    font-weight: 750;
    text-align: center;
}
.manuscript{
    flex: 1;
    color: $third-color;
    font-family: $primary-font;
    padding: 15px 0px;
    width: 600px;
    font-size: 20px;
    background-color: rgba(0, 0, 0, 0.514);
    border-radius: 5px;
   text-decoration: none;
   font-style: italic;
   cursor: pointer;
   text-align: center;
   justify-content: center;

}
*/
#quote {
  color: white;
  font-family: Helvetica;
  top: 288px;
  position: relative;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 820px;
  font-weight: 750; }

#niche {
  margin: 0px;
  font-size: 33px; }

#specialP {
  margin: 0px;
  font-size: 69px; }

.manuscript {
  color: #737373;
  font-family: Helvetica;
  padding: 15px 0px;
  top: 333px;
  position: relative;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 718px;
  font-size: 20px;
  background-color: rgba(255, 255, 255, 0.614);
  border-radius: 5px;
  text-decoration: none;
  font-style: italic;
  cursor: pointer; }

.manuscript:hover {
  background-color: rgba(255, 255, 255, 0.4); }

#linktoman {
  text-decoration: none; }

#circle {
  top: 580px;
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background-color: rgba(0, 0, 0, 0.507); }

/*.mainProjects{
    top: 400px;
    position: fixed;
    color: $third-color;
    font-family: $primary-font;
    width: 900px;
    text-align: justify;
    left:50%;
    transform: translate(-50%, -50%);
    background-color:rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
}
.projectsText{
    top: 400px;
    position: fixed;
    color: $third-color;
    font-family: $primary-font;
    width: 700px;
    text-align: justify;
    left:50%;
    transform: translate(-50%, -50%);
    background-color:rgba(0, 0, 0, 0.7);
    padding: 10px 20px;
}
*/
html {
  height: 100%;
  width: 100%; }

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .backimg {
    height: 100%; }
  .sroub {
    font-size: 45px; }
  .container {
    padding: 55px 25px; }
  #quote {
    top: 830px;
    position: absolute;
    overflow: scroll; }
    #quote #specialP {
      font-size: 74px; }
  .manuscript {
    top: 1050px;
    position: absolute;
    overflow: scroll;
    font-size: 24px;
    width: 858px; }
  .showContainer {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 758px;
    text-align: center;
    z-index: 1000; }
  .links {
    width: 100%;
    text-align: center;
    margin: 136px 0px;
    z-index: 1000;
    border-bottom: 1px solid #d4d4d4;
    text-decoration: none;
    padding: 60px;
    justify-content: space-between; }
  .hl {
    text-decoration: none;
    list-style: none;
    text-align: center;
    padding: 45px; }
  .l {
    font-Size: 30px;
    text-decoration: none;
    font-family: Helvetica;
    color: black;
    align-items: center;
    padding: 43px;
    border-bottom: 1px solid rgba(36, 35, 35, 0.514); }
  #test {
    color: red; } }

#selected {
  color: #00c800; }

#selected:hover {
  color: #00a600; }

.mainProjects {
  display: flex;
  margin: 0px 0px;
  width: 100%;
  height: 800px;
  justify-content: center;
  flex-direction: row; }

.containerMargin {
  height: 278px; }

.containerText {
  justify-content: flex-start;
  text-align: center;
  flex-direction: column;
  margin: auto;
  width: 428px;
  background-color: rgba(0, 0, 0, 0.35);
  height: 338px;
  padding: 3px 38px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px; }

.contacttitle {
  margin: 23px 0px;
  color: white;
  font-family: Helvetica;
  font-weight: bold;
  font-size: 64px; }

.contactstuff {
  font-family: Helvetica;
  font-size: 24px;
  margin: 0px;
  color: white;
  font-style: italic; }

.contact {
  margin: 0px;
  font-family: Helvetica;
  font-size: 37px;
  color: white; }

.other {
  text-align: left; }

.txtin {
  width: 80%; }

.txt {
  width: 100%; }

.projectsText {
  width: 30%; }

.contactcontainer {
  display: flex; }

.forms {
  flex: 2;
  background-color: whitesmoke; }

.other {
  background-color: #e6e6e6;
  border: 1px solid black; }

.fix {
  display: fixed;
  position: fixed;
  top: 0px;
  margin: 0px, 0px;
  width: 100%;
  height: 100%;
  background-color: white; }

.main {
  display: flex;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  overflow: scroll;
  margin: 0px;
  z-index: 90000;
  flex-direction: column; }

.container2 {
  margin: 0px, 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-between; }

.topSPText {
  margin: 0px, 0px;
  color: black;
  font-family: Helvetica;
  font-size: 20px;
  text-align: left;
  padding: 15px; }

.projectsText {
  flex: 1;
  order: 2;
  height: 600px;
  color: black;
  font-family: Helvetica;
  font-size: 20px;
  text-align: left;
  justify-content: space-between;
  padding: 0px 15px; }

.toon {
  order: 1;
  padding: 5px 20px; }

.newMarkets {
  width: 260px;
  height: 488px;
  top: 50px;
  align-self: flex-start;
  border-radius: 8px;
  z-index: -1; }

.picProjects {
  flex-direction: row;
  margin: 0px 0px;
  background-image: url(CellMahogany3.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  z-index: 500;
  height: 148%;
  width: 100%; }

.finishLine2 {
  width: 100%;
  height: 100%;
  margin: 0px 0px; }

.finishLine {
  width: 100%;
  display: none; }

#projectsTitle {
  color: black;
  font-family: Helvetica;
  font-size: 60px;
  font-weight: bold;
  margin: 0px;
  width: 100%;
  text-align: left;
  display: inline-flex; }

#projectExamplesText1Title {
  font-size: 31px;
  font-weight: bold;
  text-align: left;
  margin: 0px;
  font-family: Helvetica; }

#projectExamplesText2Title, #projectExamplesText3Title {
  font-size: 35px;
  text-align: left;
  font-family: Helvetica;
  font-weight: bold; }

.scrollDiv {
  position: static;
  height: 100%;
  width: 100%;
  z-index: 10000000; }

body {
  height: 100%;
  width: 100%;
  margin: 0px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: static;
  overflow-y: scroll; }

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .picProjects {
    height: 100%; }
  .containerMargin {
    height: 600px; }
  .containerText {
    width: 628px;
    height: 438px; }
  .contacttitle {
    font-size: 88px; }
  .contactstuff {
    font-size: 33px; }
  .contact {
    font-size: 55px; }
  .container2 {
    flex-direction: column;
    display: flex; }
  .toon {
    order: 2;
    align-items: flex-end; }
  .newMarkets {
    margin: flex-start; }
  .projectsText {
    order: 2;
    height: 1100px; }
  #projectsTitle {
    font-size: 69px; }
  #projectExamplesText1Title, #projectExamplesText2Title, #projectExamplesText3Title {
    font-size: 45px; }
  .topSPText, .projectsText {
    font-size: 35px; } }