@import url('https://fonts.googleapis.com/css?family=Changa:300|Oswald:700');

html, body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  background:black;
}


#header {
  position:relative;
  width:100%;
  height:75px;
  background:black;
  z-index: 9999;
}

.logo {
  position: absolute;
  top: 12.5px;
  left: 20px;
  width: 50px;
  height: 50px;
  display: block;
  background-image: url(images/ag-logo.svg);
}

.menu {
  color: white;
  position: absolute;
  top: 15px;
  right: 10px;
}

.menu ul {
  display:inline-flex;
  list-style: none;
}

.menu ul li {
  text-transform: uppercase;
  font-size: 13px;
  margin: 0px 15px;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 2px;
}

.menu ul li:hover,
.menu ul li:active {
  cursor:pointer;
  transform:scale(1.1);
}

.active-menu {
  color:#607d8b;
}

#main {
  height:100vh;
  display: block;
}

#main-about, #main-contact  {
  position: relative;
  display:block;
  width:80%;
  height:100%;
  /* background-image:url("images/accolade_main-bg.png"); */
  background-image:url("images/accolade_main_2.jpg");
  background-size:cover;
  background-repeat:no-repeat;
  background-position:top right;
}

#main-contact {
  background-image:url("images/accolade_main-bg.png");
}

#main-about::after,
#main-contact::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #00000085;
}

.full-logo {
  position:absolute;
  top:10%;
  left:10%;
  width:300px;
  height:50px;
  background-image:url(images/ag-logo-full.png);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center center;
}

.big-head {
  position: absolute;
  top: 12.5%;
  left: 10%;
  width: 300px;
  margin-left: -5px;
}

.big-head h1 {
  font-size: 100px;
  text-transform: uppercase;
  line-height: 25px;
  font-family: 'Oswald', sans-serif;
  color: white;
}

.about-content {
  position: absolute;
  top: 47%;
  left: 10%;
  width: 600px;
  margin-left: -3px;
}

.about-content p {
  color:white;
  text-align:justify;
  font-size:16px;
  line-height:20px;
  font-family: 'Changa', sans-serif;
}

.brand-menu {
  position:absolute;
  top: 73%;
  left:10%;
}

.brand-menu ul {
  display:inline-flex;
  list-style: none;
  padding:0;
  margin:0;
}

.brand-menu ul li {
  text-transform: uppercase;
  font-size: 13px;
  margin: 0px 15px;
  font-family: 'Oswald', sans-serif;
  letter-spacing: 2px;
  padding:0;
  margin:0;
}

.brand-menu-logo {
  display:block;
  width:100px;
  height:50px;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  margin:0px 20px 0px 0px;
}

.s-lw {
  background-image:url(images/lw-logo-250.svg);
  background-size:contain;
}
.s-v {
  background-image:url(images/verve-logo-250.svg);
  width:150px;
}
.s-k {
  background-image:url(images/kewl-logo-250.svg);
  width:150px;
}

#brands {
  position:absolute;
  height:calc(100% - 105px);
  top:75px;
  right:0px;
}

.brand {
  display: inline-flex;
  width:130px;
  height:100%;
  position:relative;
  transition: all 0.3s;
  cursor:pointer;
  background:white;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  box-sizing: border-box;
  float:left;
  box-shadow: 0px 0px 10px black;
}

.brand::before {
  content:'';
  width:100%;
  height:100%;
  display:block;
  opacity:0.5;
  transition: all 0.3s;
}

.brand::after {
  content:'';
  width:65px;
  height:65px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  transition: all 0.3s;
}

.brand:nth-child(1){background-image:url(images/lw.jpg);}
.brand:nth-child(1)::before{background:#1329a5;}
.brand:nth-child(1)::after{background-image:url(images/lw-small.svg);}


.brand:nth-child(2){background-image:url(images/verve.jpg);}
.brand:nth-child(2)::before{background:#E91E65;}
.brand:nth-child(2)::after{background-image:url(images/verve-small.svg);}


.brand:nth-child(3){background-image:url(images/kewl.jpg);}
.brand:nth-child(3)::before{background:#3c3c3c;}
.brand:nth-child(3)::after{background-image:url(images/kewl-small.svg);}

.text-block {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height:80px;
  box-sizing:border-box;
  background: #0a0a0a;
  color: #b3b3b3;
  font-size: 15px;
  line-height: 20px;
  font-family: 'Changa', sans-serif;
  padding: 0px 20px;
  text-transform: uppercase;
  display:none;
}

.text-block img {
  display:block;
  position:absolute;
  bottom:0;
  left:0px;
  width: 100px;
  height: 80px;
  float: left;
  margin-top: 5px;
}

.text-block p {
  display: block;
  margin: 0px 0px 0px 90px;
  width: 22vw;
  padding: 10px;
}

.text-block a {
  position: absolute;
  bottom: 20px;
  display: block;
  background: white;
  color: black;
  text-transform: uppercase;
  font-size: 20px;
  text-decoration: none;
  padding: 10px 0px;
  width: 125px;
  text-align: center;
  animation: 0.5s viewsitebtn linear;
  border-radius: 3px;
  cursor: pointer;
  right: 33px;
}

@keyframes viewsitebtn {
  0%{bottom:-100px;}
  100%{bottom:25px;}
}

.text-block a:hover {
  text-decoration:underline;
  cursor:pointer;
}

.quick-expand .bigger {
  width:40vw;
}

.quick-expand .smaller {
  width:130px;
}

.expand-brands {
  width: 100vw;
}

.expand-brands .brand {
  width:33.33vw;
}

.expand-brands .bigger {
  width:60vw;
}

.expand-brands .smaller {
  width:20vw;
}


.brand:hover .text-block {
  display:block;
}

.brand:hover::before {
  opacity:0;
}

.brand:hover::after {
  display:none;
}

.contact-info {
    position: absolute;
    left: 10%;
    top: 28%;
    padding-left: 2px;
}

.phone p {
    font-size: 35px;
    color: white;
    font-family: 'Oswald', sans-serif;
    margin: 0;
}

.location {
    color: white;
}

.location p {
  font-size:25px;
  margin:0px;
  font-family: 'Oswald', sans-serif;
  padding:20px 0px;
}

.location ul {
  padding:0;
  margin:0;
  list-style: none;
}

.location ul li {
  font-family: 'Changa', sans-serif;
  line-height: 18px;
}

.email {
  padding-top:15%;
}

.email a {
    text-decoration: none;
    color: white;
    font-size: 40px;
    line-height: 0px;
    cursor: pointer;
    font-family: 'Oswald', sans-serif;
}
.email a:hover {
  text-decoration:underline;
}

#footer {
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:30px;
  background:black;
  color: white;
  z-index: 99;
}

#footer p {
  position:fixed;
  bottom:3px;
  left:20px;
  font-size:12px;
  font-family: 'Changa', sans-serif;
  text-transform:uppercase;
  margin:0;
}

.footer-nav {
  position:fixed;
  bottom:3px;
  right:10px;
}

.footer-nav ul {
  display:inline-flex;
  list-style: none;
  padding:0;
  margin:0;
}

.footer-nav ul li {
  text-transform: uppercase;
  font-size: 12px;
  margin: 0px 15px;
  font-family: 'Changa', sans-serif;
}

.footer-nav ul li:hover,
.footer-nav ul li:active {
  cursor:pointer;
  text-decoration: underline;
}

#loader{
    width: 100vw;
    height:100vh;
    display: block;
    background: black;
    position: fixed;
    top:0;
    left:0;
    z-index: 99;
}

#loader svg {
  width:130px;
  height:130px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-65px;
  margin-left:-65px;
  animation: 2s loadmoves infinite;
}

@keyframes loadmoves {
  0%{transform:scale(0.3);}
  50%{transform:scale(1.3);}
  100%{transform:scale(0.3);}
}

#readers {
  color: white;
  background: #1b1b1b;
  overflow-y: scroll;
  position: absolute;
  top: 0px;
  left: 0px;
  padding: 5vw 10vw;
  height: 100vh;
  width: 100vw;
  display: block;
  box-sizing: border-box;
  font-family: 'changa', sans-serif;
  letter-spacing: 1px;
}

#readers a {
  color:white;
  text-decoration:none;
}

@media (max-height:870px) {
  .full-logo {
    top:6%;
  }
  .big-head {
    top:10%;
  }
  .big-head h1 {
    font-size:74px;
    line-height:16px;
  }
  .about-content {
    top:40%;
  }
  .brand-menu {
    top:71%;
  }
  .contact-info {
    top:22%;
  }
}

@media (max-height:800px) {
  .email {
    padding-top:8%;
  }
  .location p {
    padding:10px 0px;
  }
}

@media (max-height:715px) {
  .about-content p {
    font-size:13px;
    line-height:15px;
  }
  .about-content {
    top:45%;
  }
}

@media (max-height:650px) {
  .location p {
    padding:5px 0px;
    font-size: 18px;
  }

}

@media (max-height:620px) {
  .big-head {
    top:12%;
  }
  .big-head h1{
    font-size:50px;
  }
  .about-content {
    top:41%;
    width: 470px;
  }
  .s-lw, .s-s {
    width:50px;
  }
  .s-v, .s-k {
    width:100px;
  }
}

@media (max-height:600px) {
  .about-content p {
    font-size: 11px;
    line-height: 13px;
  }
}

@media (max-height:480px) {
    .big-head h1 {
      font-size: 40px;
      line-height: 8px;
    }
    .big-head {
      top:15%;
    }
    .about-content {
      top: 45% !important;
    }
}

@media (min-width:2000px) {
  .brand{width:200px;}
}

@media (max-width:1615px) {
  .text-block p {
    display: block;
    margin: 0px 0px 0px 90px;
    width: 18vw;
    padding: 10px;
    font-size: 13px;
    line-height: 16px;
  }
}

@media (max-width:1345px) {
  .text-block {
    height:120px;
  }
  .text-block img {
    bottom:50px;
    height:66px;
  }
  .text-block p {
    width:29vw;
  }
  .text-block a {
    right:1vw;
    width:38vw;
    bottom:10px;
  }
}

@media (max-width:1300px) {
  .about-content p {
    width:500px;
    font-size:14px;
    line-height:17px;
  }
  .s-lw, .s-s {
    width:50px;
  }
  .s-v, .s-k {
    width:100px;
  }
}

@media (max-width:1125px) {
  .text-block {
    height:105px;
  }
  .text-block img {
    bottom:46px;
    height:50px;
  }
  .text-block p {
    width: 28vw;
    margin-left: 65px;
    font-size: 11px;
  }
  .text-block a {
    font-size:16px;
    padding:5px 0px;
  }
  .full-logo,
  .big-head,
  .about-content,
  .brand-menu,
  .contact-info {
    left:5%;
  }
  .about-content p {
    width:360px;
  }
  .text-block p {
    font-size:10px;
    line-height:12px;
  }

}

@media (max-width:980px) {
  .brand, .quick-expand .smaller {width:100px;}

}

@media (max-width:800px) {
  body {
    overflow:scroll;
    overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
  }

  #header {
    position:relative;
    top:0px;
    left:0px;
    z-index:999;
  }

  #main {
    height:auto;
  }

  #main-about, #main-contact {
    position:relative;
    width: 100%;
    height: 1000px;
    overflow:hidden;
  }

  #readers {
    position:relative;
  }

  #footer {
    position: relative;
    height: 50px;
  }

  #footer p {
    text-align: center;
    position: relative;
    left: 0;
    bottom: -3px;
  }

  .footer-nav {
    position: relative;
    bottom: -3px;
    right: 0px;
    text-align: center;
  }

  #brands .quick-expand {
    display:none !important;
  }

  .quick-expand .brand {
    display:none !important;
  }

  .expand-brands {
    position: relative !important;
    top: 0px !important;
    height: 100vh!important;
  }

  .expand-brands .brand {
    width: 50vw;
    height: 50%;
    box-shadow:none;
  }

  .expand-brands .text-block a {
    right: 4vw;
    width: 44vw;
  }
  .brand-menu {
    top:88%;
  }
  .about-content {
    top:48%;
  }


}

@media (max-width:665px) {
  .expand-brands .text-block a {
    font-size: 14px;
    padding: 2px 0px;
    bottom: 6px;
  }
}

@media (max-width:590px) {

  .expand-brands .text-block {
    display:none !important;
  }
}

@media (max-width:475px) {
  .about-content p {
    width: 290px;
  }
  .brand-menu {
    top: 90%;
  }
  .s-lw, .s-s {
    width:40px;
  }
  .s-v, .s-k {
    width:90px;
  }
  #footer p{
    font-size: 10px;
  }
  .menu ul li {
    font-size: 11px;
    margin: 0px 10px;
  }
}

@media (max-width:350px) {
  .s-lw, .s-s {
    width:30px;
  }
  .s-v, .s-k {
    width:80px;
  }
  #footer p{
    font-size: 8px;
  }
}

@media (max-width:320px) {
  .big-head h1 {
    font-size: 75px;
  }

  .about-content p {
    width:260px;
  }
}