body {
    background: #2E316D;
    margin:0;
  padding:0;
}

.home {
  position: absolute;
    top: 35px;
    right: 10px; 
    text-align: right;
    width:300px;
}

.home a {
  float:left;
  margin-right: 60px;
}

.home h2 {
  margin:0;
  color: #FF6E1D;
    font-size: 10pt;
    font-family: raleway ;  
    font-weight: lighter;
    line-height:1.2;
}


.page {
  height:120vh;
  position: relative;
}

.hr {
   border-top: 1px dotted #FF6E1D;
}


.rectangle{
  height: 35vw;
  width: 55vw;
  background-color: #FF6E1D;
  margin-top: 150px;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

/*.rectangle2{
  height: 70px;
  width: 200px;
  background-color: #FF6E1D;
  position: absolute;
  border-radius: 10px;
}*/

.quote{
    width:1300px;
    position: absolute;
    top: 180px;
    left: 120px;
    animation: quotate 10s linear infinite;
}

.quote.first /*stroke versoin*/ {
  animation-delay: 0;
  top:0; 
}

.quote.second {
  animation-delay: -7.5s;
  opacity: 0;
    top:0; 
}
.quote.third {
  animation-delay: -5s;
  opacity: 0;
    top:0; 
}
.quote.fourth {
  animation-delay: -2.5s;
  opacity: 0;
    top:0; 
}
.quote.lower {
  top:225px;
  z-index: 1;
}

.quote.lower.first {
  /*top:249px;*/
  /*z-index: -7.5s;*/
}
.quote.lower.second {
  animation-delay: -7.5s;
  opacity: 0;
}
.quote.lower.third {
  animation-delay: -5s;
  opacity: 0;
}
.quote.lower.fourth {
  animation-delay: -2.5s;
  opacity: 0;
}

.rectangle .quote.first{
/*  fill version*/
}

h1.title {
    color: #FF6E1D;
    font-size: 50pt;
    font-family:  "Neue Haas Grotesk Display Pro" ;  
    font-weight: bold;
    position: absolute;
    top: 190px;
    left: 100px; 
    line-height:1.2;
}

h1.title:hover { 
  -webkit-text-stroke: 1.5px #FF6E1D;
  color:transparent;
    }

/* h2{
  color: #FF6E1D;
    font-size: 10pt;
    font-family: raleway ;  
    font-weight: lighter;
    position: absolute;
    top: 20px;
    left: 1050px; 
    line-height:1.2;
}
 */


p{
  color: white;
  font-size: 12pt;
  font-family: raleway;
  font-weight: lighter;
  text-align: left;
  position: absolute;
  top: 450px;
  left: 100px;
  right: 820px;
  line-height: 1.5 ;
}

h3{
  color: white;
  font-size: 9pt;
  font-family: aktiv grotesk;
  font-weight: lighter;
  text-align: left;
  position: absolute;
  top: 870px;
  left: 100px;
  right: 795px;
  line-height: 1.7 ;
}

.about{
  position: absolute;
  height:600px;
  right: 165px;
  top: 250px;

}

.square{
  height:600px;
  width: 400px;
  background-color: #FF6E1D;
  position: absolute;
  right: 120px;
  top: 290px;
}


@keyframes quotate {
  0% {
    opacity: 1;
  }
  24.9% {
   opacity: 1; 
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }

}

#desktop {
    display: inline;
    color: white;
}

#desktop,
#mobile {
    display: none;
}
/* tablet */
@media (min-width: 670px) and (max-width: 1024px) {
    body {
        background: #2E316D;
    }


.page {
  height:230vh;
  position: relative;
}

    h1.title {
    color: #FF6E1D;
    font-size: 45pt;
    font-family:  "Neue Haas Grotesk Display Pro" ;  
    font-weight: bold;
    position: absolute;
    top: 150px;
    left: 75px; 
    line-height:1.2;
}

h1.title:hover { 
  -webkit-text-stroke: 1.0px #FF6E1D;
  color:transparent;
    }

p{
  color: white;
  font-size: 14pt;
  font-family: raleway;
  font-weight: lighter;
  text-align: left;
  position: absolute;
  top: 380px;
  left: 80px; 
  right:75px;
  line-height: 1.8;
}


.quote{
    width:630px;
    position: absolute;
    top: 160px;
    left: 100px;
    animation: quotate 10s linear infinite;
}
.about{
  position: absolute;
  height: 510px;
  right: 250px;
  top: 1060px;
}
.square{
  height: 510px;
  width: 320px;
  background-color: #FF6E1D;
  position: absolute;
  right: 200px;
  top: 1100px;
}

  h3{
  color: white;
  font-size: 9pt;
  font-family: aktiv grotesk;
  font-weight: lighter;
  text-align: left;
  position: absolute;
  top: 930px;
  left: 80px;
  right: 10px;
  line-height: 1.7 ;
}
    #tablet {
        display: inline;
        color: white;
    }
    #desktop,
    #mobile,
    #print {
        display: none;
    }
}
/* mobile */
@media (max-width: 670px) {
    body {
        background: #2E316D;
    }


.page {
  height:220vh;
  position: relative;
}

    h1.title {
    color: #FF6E1D;
    font-size: 35pt;
    font-family:  "Neue Haas Grotesk Display Pro" ;  
    font-weight: bold;
    position: absolute;
    top: 130px;
    left: 40px; 
    line-height:1.2;
}

h1.title:hover { 
  -webkit-text-stroke: 1.0px #FF6E1D;
  color:transparent;
    }

p{
  color: white;
  font-size: 12pt;
  font-family: raleway;
  font-weight: lighter;
  text-align: left;
  position: absolute;
  top: 350px;
  left: 45px; 
  right:43px;
  line-height: 1.7 ;
}


.quote{
    width:400px;
    position: absolute;
    top: 160px;
    left: 75px;
    animation: quotate 10s linear infinite;
}
.about{
  position: absolute;
  height: 480px;
  right: 110px;
  top: 1050px;
}
.square{
  height: 480px;
  width: 320px;
  background-color: #FF6E1D;
  position: absolute;
  right: 70px;
  top: 1090px;
}

  h3{
  color: white;
  font-size: 9pt;
  font-family: aktiv grotesk;
  font-weight: lighter;
  text-align: left;
  position: absolute;
  top: 910px;
  left: 45px;
  right: 100px;
  line-height: 1.7 ;
}
    #mobile {
        display: inline;
        color: black;
    }
    #desktop,
    #tablet,
    #print {
        display: none;
    }

}