body
{
  padding: 0;
  margin: 0;
  font-family: 'Aldrich', sans-serif;
  font-size: 1.2vw;
}

section
{
  min-height: 50vh;
  width: 100%;
}

img
{
  max-width: 100%;
}

/* MAIN SECTION */

#main-section
{
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  background-image: url("../images/alc-back-black.png");
  background-size: cover;
}

#video-head
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  filter: grayscale(1);
}

.top-header
{
  width: 94%;
  margin: 0 auto;
  white-space: nowrap;
  z-index: 2;
  position: relative;
  margin-top: 7vh;
}

.logo-wrapper
{
  width: 50%;
  display: inline-block;

}

#logo
{
  max-width: 12vw;
}

.big-logo
{
  display: none;
}

.nav-wrapper
{
  width: 50%;
  display: inline-block;
  vertical-align: top;
  color: white;
  text-align: right;
}

.nav-wrapper ul
{
  list-style-type: none;
}

.main-text
{
  position: relative;
  z-index: 2;
  color: white;
  margin: 0 auto;
  margin-top: 20vh;
  width: 60%;
  text-align: center;
}

.main-text p
{
  font-size: 4em;
  padding: 0;
  margin: 0;
    font-weight: bold;
  display: inline-block;
}

.smaller-main-text
{
  font-size: 1.2em !important;
  font-weight: normal !important;
}

.orange-text
{
  color: rgba(255, 151, 0, 1);
  font-style: normal;
}

.scroll-wrapper
{
  margin-top: 20vh;
  padding-bottom: 5vh;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 2;
}

.scroll-wrapper img
{
  min-width: 20px;
  width: 2vw;
}

/* NAV BAR */

#navigation
{
  width: 100%;
  background-color: rgba(255, 151, 0, 1);
  z-index: 900;
  position: absolute;
  transition: background-color 0.3s;
  -webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
}

#nav-logo
{
  display: inline-block;
  vertical-align: middle;
  width: 5vw;
  padding: 2% 6% 2% 2%;

}

#navigation ul
{
  list-style-type: none;
  display: inline-block;
  vertical-align: middle;
}

#navigation ul li
{
  display: inline-block;
  margin: 0 2vw;
  color: rgba(255,255,255, 0.51);
  transition: color 0.5s;
}

#navigation ul li:hover
{
  color: rgba(255,255,255, 0.8);
  cursor: pointer;
  transition: color 0.5s;
}

.active-nav
{
  color: rgba(255,255,255,1) !important;
}

/* ABOUT SECTION */

#about-section
{
  background-color: rgba(255, 151, 0, 1);
  /*min-height: 100vh; */
  overflow: hidden;
  padding: 25vh 0 10vh 0;

}

.about-wrapper
{
  width: 95%;
  margin: 0 auto;

}

.text-wrapper
{
  width: 52%;
  display: inline-block;
  vertical-align: middle;
}

.title-wrapper h2
{
  font-size: 8em;
  padding: 0;
  margin: 0;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  opacity: 0.3;
}

.title-wrapper p
{
  position: relative;
  left: -4%;
  font-size: 2.5em;
  padding: 0;
  margin: 0;
  margin-top: 5%;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
}

.text-content
{
  margin-left: 13%;
  color: white;
  font-size: 1.5em;
}

.image-wrapper
{
  width: 35%;
  margin-left: 5%;
  display: inline-block;
  vertical-align: middle;
}


/* SERVICES */

#services-section
{
  width: 100%;
  padding: 15vh 0;
  background-color: rgb(202,202,202);
  position: relative;
}

.top-left-text
{
  width: 40%;
  margin-left: 5%;
  font-size: 1.5em;
}

.services-title-wrapper
{
  width: 90%;
  margin: 0 auto;
  text-align: right;
  position: relative;
}

.services-title-bar
{
  width: 7%;
  height: 15vh;
  border-right: 0.3vw solid #fff;
  border-top: 0.3vw solid #fff;
  margin-top: 5px;
  position: absolute;
  bottom: -12vh;
  display: inline-block;
  vertical-align: middle;
  right: 1%;
}

.services-title-bar-end
{
  width: 7%;
  height: 15vh;
  border-left: 0.3vw solid #fff;
  border-bottom: 0.3vw solid #fff;
  margin-top: 5px;
  position: absolute;
  bottom: 20vh;
  display: inline-block;
  vertical-align: middle;
  left: 8%;
}

.services-title h2
{
  font-size: 8em;
  padding: 0;
  margin: 0;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  opacity: 0.3;
}

.services-title p
{
  position: relative;
  left: -4%;
  font-size: 2.5em;
  padding: 0;
  margin: 0;
  margin-top: 5%;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}

.services-list-wrapper
{
  width: 80%;
  margin: 3vh auto;
  background-color: rgb(196, 196, 196);
  text-align: center;
  overflow-x: hidden;
}

.service-wrapper
{
  width: 35vw;
  height: 25vw;
  margin: 2%;
  position: relative;
  display: inline-block;
}

.service-image
{
  width: 100%;
  height: 100%;
}

.service-image img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-description
{
  position: absolute;
  width: 70%;
  min-height: 100px;
  padding-left: 3%;
  background-color: rgba(255, 151, 0, 1);
  bottom: 7%;
  color: white;
  text-align: left;
  left: -5%;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
   box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}

.service-description-title
{
   width: 70%;
}

.service-description-text
{
  padding-left: 5%;
  font-size: 0.8em;
  width: 70%;
}

.page-bullet
{
  width: 1vw;
  height: 1vw;
  min-width: 14px;
  min-height: 14px;
  border: 2px solid white;
  border-radius: 50%;
  display: inline-block;
  margin: 6px auto;
  cursor: pointer;
}

.page-bullets-wrapper
{
  width: 100%;
  text-align: center;
  padding: 5px 0;
}

.bullet-active
{
  background-color: white;
  cursor: default;
}

.services-list
{
  position: relative;
  width: 200%;
  white-space: nowrap;
}

.services-list-page
{
  width: 50%;
  display: inline-block;
  position: relative;
  white-space: normal;
}

/* SERVICES - END */

/* BUDGET */

#budget-section
{
  background-image: url("../images/alc-background.jpg");
  background-size: cover;
  background-position: bottom;
  min-height: 70vh;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}

.budget-text
{
  color: white;
  margin-left: 5%;
}

.budget-text p
{
  font-size: 2.5em;
}

#contact-budget
{
  background-color: transparent;
  cursor: pointer;
  color: white;
  border: none;
  display: inline-block;
  font-family: inherit;
  font-size: 1.2em;
  border-right: 3px solid #ff9700;
}

.bar
{
  width: 20%;
  height: 3px;
  background-color: #ff9700;
  margin: 3px 0;
  transition: 0.4s;
  display: inline-block;
}

/* BUDGET - END */

/* WORKS SECTION */

#works-section
{
  width: 100%;
  background-color: #333333;
}

.works-title-wrapper
{
  width: 85%;
  position: relative;
  margin: 0 auto;
}

.works-title-bar
{
  width: 4%;
  height: 26vh;
  border-left: 0.3vw solid #ff9700;
  border-top: 0.3vw solid #ff9700;
  margin-top: 5px;
  position: absolute;
  bottom: -23vh;
  display: inline-block;
  vertical-align: middle;
  left: -1%;
}

.works-title h2
{
  font-size: 8em;
  padding: 0;
  margin: 0;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  opacity: 0.3;
}

.works-title p
{
  position: relative;
  left: -4%;
  font-size: 2.5em;
  padding: 0;
  margin: 0;
  margin-top: 10%;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  color: white;
}

.works-list
{
  width: 90%;
  margin: 0 auto;
  padding: 5vh 0;
  text-align: center;
}

.left-works
{
  width: 40%;
  display: inline-block;
}

.big-work
{
  width: 100%;

}

.big-work img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
}

.project-counter
{
  width: 100%;
  background-color: rgb(68, 68, 68);
  text-align: center;
  padding: 4% 0;
  margin-top: 2vw;
}

.project-count
{
  display: inline-block;
  color: white;
  width: 25%;
  padding: 0 2.5%;
  border-right: 2px solid rgb(102,102,102);
}

.project-count:last-child
{
  border-right: none;
}

.project-number
{
  font-size: 2.5em;
  padding: 0;
  margin: 0;
}

.project-count-text
{
  font-size: 0.8em;
  margin: 0;
}

.right-works
{
  width: 50%;
  display: inline-block;
  vertical-align: top;
}

.small-work
{
  width: 20vw;
  height: 18vw;
  margin: 0 0.8vw 1.7vw 0.8vw;
  display: inline-block;
  vertical-align: top;
  position: relative;

}

.small-work img
{
  width: 100%;
  height: 100%;
  -webkit-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
  object-fit: cover;
}

.white-work
{
  background-color: rgb(226,226,226);
  cursor: pointer;
  transition: background-color 0.5s;
}

.white-work:hover
{
  background-color: rgb(240, 236, 236);
  transition: background-color 0.5s;
}

#see-all-work
{
  font-size: 1.8em;
  text-align: right;
  position: absolute;
  right: 10%;
  bottom: 10%;
  width: 80%;
}

.see-bar
{
  width: 30%;
  height: 3vh;
  border-left: 0.3vw solid #ff9700;
  border-top: 0.3vw solid #ff9700;
  margin-top: 5px;
  position: relative;
  bottom: -1vh;
  display: inline-block;
  vertical-align: middle;
}

/* WORKS SECTION - END */

/* POPUP */


#background-fader
{
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  background-color: rgba(228, 228, 228, 0.84);
  opacity: 0;
  display: none;
  z-index: 999;
}

#product-viewer
{
  position: fixed;
  z-index: 999;
  background-color: rgb(83, 83, 83);
  margin-left: 5%;
  width: 90%;
  margin-right: 5%;
  margin-top: -105vh;
  transition: margin-top 1s;
}

#category-name
{
  font-size: 2em;
  font-family: inherit;
  color : #fff;
  background-color: #ff9700;
  padding: 2vh 0;
  width: 100%;
  border-bottom: 1px solid #6eb23a;
  margin: 0 auto;
  text-align: center;
}

#product-by-list
{
  width: 100%;
  margin: 0 auto;
  text-align: center;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  height: 80vh;

}

#close-products
{
  position: absolute;
  font-size: 2.3em;
  color: white;
  background: transparent;
  border: none;
  padding: 1vh 1vw;
  cursor: pointer;
  right: 1vw;
}

.portfolio-item
{
  width: 35vw;
  height: 35vw;
  margin: 1vw;
  white-space: normal;
  vertical-align: top;
  display: inline-block;
}

.portfolio-item img
{
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
}

/* POPUP END */

 /* CONTACT US */

#contact-section
{
  width: 100%;
  background-color: rgb(220,220,220);
  padding: 5vh 0;
  text-align: center;
}

.map-wrapper
{
  width: 30%;
  margin: 0 5% 0 0;
  display: inline-block;
  vertical-align: middle;
}

.map-wrapper a
{
  text-decoration: none;
}

.map-wrapper img
{
  width: 100%;
  cursor: pointer;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
   box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
}

.contact-form-wrapper
{
  display: inline-block;
  width: 40%;
  margin: 0 2%;
  position: relative;
}

.contact-form
{
   width: 100%;
   display: inline-block;
   vertical-align: middle;
}

 .contact-form input, textarea
 {
   width: 100%;
   padding: 10px;
   font-size: 1em;
   font-weight: bold;
   font-family: inherit;
   color: #ff9700;
   background-color: rgb(240, 240, 240);
   border: none;
   resize: none;
   margin: 5px 0;
 }

#send-contact
{
  background-color: #ff9700;
  color: white;
  font-family: inherit;
  padding: 5px 15px;
  border:none;
  font-size: 1em;
  margin-top: 1vh;
  cursor: pointer;
  transition: background-color 0.5s;
}

#send-contact:hover
{
  background-color: #d4830f;
  transition: background-color 0.5s;
}

 .contact-title-wrapper
 {
   width: 90%;
   position: relative;
   margin: 2vh auto;
   text-align: right;
 }

 .contact-title-bar
 {
   width: 25%;
   height: 20vh;
   border-right: 0.3vw solid #fff;
   border-top: 0.3vw solid #fff;
   margin-top: 5px;
   position: absolute;
   bottom: -16.5vh;
   display: inline-block;
   vertical-align: middle;
   right: -20%;
 }

 .contact-title-bar-end
 {
   width: 25%;
   height: 20vh;
   border-left: 0.3vw solid #fff;
   border-bottom: 0.3vw solid #fff;
   margin-top: 5px;
   position: absolute;
   bottom: -4vh;
   display: inline-block;
   vertical-align: middle;
   left: -7%;
 }

 .contact-title p
 {
   position: relative;
   left: -7%;
   font-size: 2.5em;
   padding: 0;
   margin: 0;
   margin-top: 10%;
   font-weight: bold;
   display: inline-block;
   vertical-align: middle;
   color: rgb(51,51,51);
   text-align: left;
 }

 /* FOOTER */

 #footer
 {
   width: 100%;
   background-color: #ff9700;
   text-align: right;
   padding: 2% 0;
   position: relative;
 }

 .footer-division
 {
   display: inline-block;
   padding: 0 5%;
   text-align: left;
   color: white;
   vertical-align: top;
 }

 .footer-division p
 {
   font-weight: bold;
   margin:0;
   padding: 0;
 }

 .footer-division ul
 {
   list-style: none;
   margin:0;
   padding: 0;
   font-size: 0.8em;
   padding-left: 10px;
 }

 .footer-division li
 {
   padding: 2px 0;
 }

 .copyright
 {
   font-size: 1vw;
   color: white;
   bottom: 20px;
   right: 200px;
   position: absolute;
 }


.footer-social
{
  position: absolute;
  left: 5%;
  bottom: 20%;
  text-align: left;
  color: rgba(255, 255, 255, 0.37);
}

.footer-social a
{

  color: inherit;
}

.social-network
{
  text-decoration: none;
}

.social-network img
{
 width: 2.5vw;
}

/* MOBILE FORMAT */

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

    body
    {
      font-size: 2.5vw;
    }

    .menu-click-sector
    {
      position: fixed;
      right: 5vw;
      z-index: 999;
    }

    .menu-nav-sector
    {
      width: 65%;
      text-align: right;
      display: inline-block;
      vertical-align: middle;
      position: relative;
      z-index: 999;
    }

    .menu-nav-sector .menu-click-bar
    {
      background-color: #fff;
    }

    .menu-open-clicker
    {
      display: inline-block;
    }

    .menu-click-bar
    {
      height: 2px;
      margin: 8px;
      background-color: #ff9700;
      position: relative;
      width: 10vw;
      vertical-align: middle;
      transition: width, 0.5s;
    }

    .big-logo
    {
      width: 100%;
      position: relative;
      z-index: 900;
      text-align: center;
      display: inline-block;
    }

    .big-logo img
    {
      width: 70%;
    }

    .logo-wrapper
    {
      display: none;
    }

    .nav-wrapper
    {
      width: 90%;
      margin: 0 auto;
      display: block;
    }

    .nav-wrapper ul
    {
      display: none;
    }

    .main-text
    {
      margin-top: 30vh;
    }

    .main-text p
    {
      display: none;
    }

    .scroll-wrapper
    {
      display: none;
    }

    #video-head
    {
      display: none;
    }

    #navigation ul
    {
      display: none;
      width: 100%;
      height: 100vh;
      position: fixed;
      z-index: 990;
      padding: 0;
      margin: 0;
      left: 0;
      top: 0;
      bottom: 0;
      background-color: #ff9700;
      text-align: center;
      padding-top: 10vh;
    }

    #navigation ul li
    {
      display: block;
      font-size: 2em;
      padding: 4vh 0;
    }

    #nav-logo
    {
      width: 18vw;
    }

    /* ABOUT MOBILE */

    .about-wrapper
    {
      width: 95%;
      margin: 0 auto;
    }

    .text-wrapper
    {
      width: 100%;
      margin: 0 auto;
      vertical-align: middle;
    }

    .text-content
    {
      width: 90%;
      margin: 0 auto;
      color: white;
      font-size: 1.5em;
      text-align: center;
    }

    .image-wrapper
    {
      width: 65%;
      margin: 5vh auto;
      display: block;
    }

    /* SERVICES - MOBILE */

    /* SERVICES */

    #services-section
    {
      width: 100%;
      padding: 5vh 0;
      background-color: rgb(202,202,202);
      position: relative;
      overflow: hidden;
    }

    .top-left-text
    {
      width: 80%;
      margin-bottom: 5vh;
    }

    .services-title-bar
    {
      width: 7%;
      height: 10vh;
      border-right: 1vw solid #fff;
      border-top: 1vw solid #fff;
      bottom: -6vh;
    }

    .services-title-bar-end
    {
      width: 7%;
      height: 10vh;
      border-left: 1vw solid #fff;
      border-bottom: 1vw solid #fff;
      bottom: 4vh;
      left: 6%;
    }

    .services-title h2
    {
      font-size: 8em;
      padding: 0;
      margin: 0;
      font-weight: bold;
      display: inline-block;
      vertical-align: middle;
      position: relative;
      opacity: 0.3;
    }

    .services-title p
    {
      position: relative;
      left: -4%;
      font-size: 2.5em;
      padding: 0;
      margin: 0;
      margin-top: 5%;
      font-weight: bold;
      display: inline-block;
      vertical-align: middle;
      text-align: left;
    }

    .service-wrapper
    {
      width: 65vw;
      height: 55vw;
      margin: 5%;
      position: relative;
      display: inline-block;
    }

    .service-description
    {
      width: 85%;
      min-height: 0;
      padding-left: 3%;
      background-color: rgba(255, 151, 0, 0.95);
      bottom: 7%;
      color: white;
      text-align: left;
      left: -5%;
    }

    .service-description-title
    {
      font-size: 1.2em;
      width: 90%;
    }

    .service-description-text
    {
      font-size: 1em;
      width: 90%;
    }

    /* SERVICES - END */

    /* WORKS - MOBILE */


    .works-title-bar
    {
      width: 10%;
      height: 16vh;
      border-left: 1vw solid #ff9700;
      border-top: 1vw solid #ff9700;
      margin-top: 5px;
      position: absolute;
      bottom: -14.5vh;
      display: inline-block;
      vertical-align: middle;
      left: -1%;
    }

    .works-title p
    {
      margin-top: 15%;
    }

    .left-works
    {
      width: 80%;
    }

    .right-works
    {
      margin-top: 2vh;
      width: 100%;
    }

    .small-work
    {
      width: 33vw;
      height: 31vw;
    }


    .portfolio-item
    {
      width: 75vw;
      height: 75vw;
      margin: 1vw;
      display: block;
    }

    .portfolio-item img
    {
      width: 100%;
      height: 100%;
      object-fit: cover;
      -webkit-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
      -moz-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
      box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
    }

     /* CONTACT US */

     #contact-section
     {
       padding-bottom: 15vh;
     }

    .map-wrapper
    {
      width: 100%;
      margin: 0;
      height: 30vh;
      display: block;
      display: none;
    }

    .map-wrapper a
    {
      text-decoration: none;
    }

    .map-wrapper img
    {
      width: 100%;
      cursor: pointer;
      -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
      -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
       box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
    }

    .contact-form-wrapper
    {
      display: block;
      width: 80%;
      margin: 0 auto;
    }

     .contact-form input, textarea
     {
      padding: 3%;
      width: 94%;
     }

    #send-contact
    {
      padding: 10px 25px;
    }

     .contact-title-wrapper
     {
       width: 90%;
       position: relative;
       margin: 2vh auto;
       text-align: right;
     }

     .contact-title-bar
     {
       width: 15%;
       height: 20vh;
       border-right: 1vw solid #fff;
       border-top: 1vw solid #fff;
       bottom: -18vh;
       right: -14%;
     }

     .contact-title-bar-end
     {
       border-left: 1vw solid #fff;
       border-bottom: 1vw solid #fff;
     }

     /* FOOTER */

     #footer
     {
       width: 100%;
       background-color: #ff9700;
       text-align: right;
       padding: 2% 0;
       position: relative;
       font-size: 1.7em;
     }

     .footer-division
     {
       display: block;
       width: 80%;
       margin: 5vh auto;
       text-align: center;
       color: white;
       vertical-align: top;
     }

     .footer-division p
     {
       font-weight: bold;
       margin:0;
       padding: 0;
     }

     .footer-division ul
     {
       list-style: none;
       margin:0;
       padding: 2vh;
       font-size: 0.8em;
       padding-left: 10px;
     }

     .footer-division li
     {
       padding: 4px 0;
     }

    .footer-social
    {
      position: relative;
      text-align: center;
      bottom: auto;
      left: auto;
      color: rgba(255, 255, 255, 0.5);
      padding-bottom: 5vh;
    }

    .social-network img
    {
     width: 8.5vw;
    }

}