@font-face {
    font-family: 'gilroy-bold';
    src: url('/fonts/Gilroy-Bold.ttf');
  }
  .gilroy{
    font-family: 'gilroy-bold';
  }
  .font-work{
    font-family: 'Work Sans', sans-serif;
  }

  
  body{
    max-width: 100vw !important;
    overflow-x: hidden;
  }
  
  .first-sec-sm{
    position: relative;
    overflow: hidden;
    min-width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
  }
  .first-sec-lg{
    display: none;
  }
  .img-first{
      min-width: 100vw;
    max-width: 101.5vw;
    min-height: 100vh;
    margin-left: -4.5%;
  }

  .ubiquologo{
    max-width: 12%;
    margin-top:1%;
    margin-bottom: 1%;
  }

  .mainlogo{
    z-index: 33;
  }
  
 
  #overlay {
    position: absolute;
    min-height: 100vh;
    max-width: 100%;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0%;
    background-color: rgba(0,0,0,0.6);
  }
/* .first-img h4,h3{
    color: white;
} */
  .top-right {
      color: white;
    position: absolute;
    top: 70%;
    left: 8%;
    max-width:45%;
    font-family: 'gilroy-bold';
  }

  .top-right1{
     color: white;
    position: absolute;
    top: 25%;
    left: 33%;
    max-width:45%;
    font-family: 'gilroy-bold';
  }

  .logomain{
    max-width: 33%;
  }
  .logomain1{
    max-width: 100%;
  }
  
  .linker-button {
    display: inline-block;
    color: #fff;
    text-decoration: none;
}

.linker-button::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    color: honeydew;
    background: white;
    transition: width .3s;
}

.linker-button:hover::after {
    width: 100%;
    
}
      .linker-button{
          color: white;
        text-decoration: none;
      }
     .first-sec-lg a{
         color: white;
     }
     .first-sec-sm a{
         color: white;
     }
      .sec-two{
        background-color: #3974cc;
        height: fit-content;
        position: relative;
        z-index: 5;
      }
      .sec-machine{
         background-color: #3974cc;
        height: fit-content;
        position: relative;
        z-index: 5;
      }

      .machine-width{
        min-width: 90%;
        max-width: 90%;
      }
      

      .sec-here-now{
          margin-top: -4.4%;
        background-color: lavender;
      }

      .title,
        .footer {
        position: -webkit-sticky;
        position: sticky;
        height: 5vh;
        width: 100vw;
        }
        .title {
        height: 35vh;
        top: 0;
        font: 50px/60px "Crimson Text";
        color: #fdef67;
        text-shadow: 2px 2px 0 #f83d23;
        background-color: pink;
        margin-left: -5%;
        margin-bottom: 5%;
        z-index: 2;
        overflow-x: hidden;
        }

        .footer {
        bottom: 100px;
        z-index: -1;
        color: white;
        text-shadow: 1px 1px black;
        width: 80%;
        height: 5%;
        margin: 0px auto auto auto;
        }
        .sticker{
        background-color: pink;
        }
       
        .div-last{
          margin-top: 30%;
        }
/*Custom fonts - Open Sans*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans');


.sub-body {
	background: hsl(120, 40%, 60%);
	padding-bottom: 150px;
    padding-top: 150px;
    padding-left: 0px;
    padding-right: 0px;
	font: normal 18px Open Sans; color: white; text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.cuboid-container{
    background-color: honeydew;
    padding-left: 14%;
}
/*general styles*/
h1 {font-weight: normal; font-size: 36px; margin-bottom: 75px;}
.fun-cube i {transform: scale(10); opacity: 0.1;}

#cuboid {
	width: 300px; margin: 0 auto;
	/*this also makes #cuboid a container for absolutely positioned descendants*/
	perspective: 1000px;
}
#cuboid form {
	/*counter translate*/
	transform: translateZ(-20px);
	/*propogate 3d space for children*/
	transform-style: preserve-3d;
	/*prevent height collapse as children are absolutely positioned*/
	height: 40px;
	/*for smooth animations*/
	transition: all 0.35s;
}

/*faces*/
.cuboid-text {
	/*each face will be 40px high*/
	line-height: 40px; height: 40px;
	background: hsl(120, 40%, 20%);
    border-radius: 5px;
  margin-bottom: 0;
}
.loader {
	background: hsl(120, 40%, 30%);
	animation: phase 1s infinite;
}
/*Lets create a pulsating animation for the loader face*/
@keyframes phase {
	50% {background: hsl(120, 70%, 30%);}
}
#email {
	background: white; outline: none; border: 0 none;
	font: inherit; text-align: left; color: hsl(120, 40%, 30%);
	display: block; width: 100%; padding: 0 10px;
	box-sizing: border-box;
}
#submit {display: none;}

.submit-icon, .reset-icon {
	position: absolute; top: 1.5; right: 0;
	color: rgba(0, 0, 0, 0.25);
	line-height: 40px; padding: 0 10px;
   cursor:pointer;
   vertical-align: middle;
	/*smooth transitions when user activates input and types something*/
	transition: all 0.5s;
	/*to make the icons f*/
}
/*.active = when the user is typing something*/
.submit-icon.active {color: hsl(120, 40%, 30%);}
.reset-icon {color: rgba(255, 255, 255, 0.25); font-size: 14px;}

#cuboid div {position: absolute; top: 0; left: 0; width: 100%;}
/*3D transforms. Each face will be rotated in multiples of -90deg and moved 20px(half of their 40px height) out*/
#cuboid div:nth-child(1) {transform: rotateX(0deg) translateZ(20px);}
#cuboid div:nth-child(2) {transform: rotateX(-90deg) translateZ(20px);}
#cuboid div:nth-child(3) {transform: rotateX(-180deg) translateZ(20px);}
#cuboid div:nth-child(4) {transform: rotateX(-270deg) translateZ(20px);}

/*the form will have 4 states/classes(default+3) for rotation*/
#cuboid form:hover, 
#cuboid form.ready {transform: translateZ(-20px) rotateX(90deg);}
#cuboid form.loading {transform: translateZ(-20px) rotateX(180deg);}
#cuboid form.complete {transform: translateZ(-20px) rotateX(270deg);}

.contact-box{
  margin: auto;
  /* padding-left: 5%; */
  /* border: 3px solid black; */
  max-width: 100%;
  
}

.contact-box1{
  margin: 60px auto;
  border: 3px solid black;
  max-width:90%;
}
/* FOOTER START */
a {
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease; }
    a, a:hover {
      text-decoration: none !important; }
  
  .content {
    height: 70vh; }
  
  .footer-20192 {
    position: relative;
    color: #fff;
    padding: 1rem 0;
    background-color: #141d2a; }
    .footer-20192 .container {
      position: relative; }
    .footer-20192 h3 {
      font-size: 16px;
      margin-bottom: 10px;
      margin-top: 0;
      line-height: 1.5; }
    .footer-20192 .links li {
      margin-bottom: 10px;
      line-height: 1.5;
      display: block; }
      .footer-20192 .links li a {
        color: #666873; }
        .footer-20192 .links li a:hover {
          color: #fff; }
    .footer-20192 .social li {
      display: inline-block;
      position: relative; }
      .footer-20192 .social li a {
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: inline-block;
        margin: 0;
        padding: 0;
        background-color: #8186d5;
        color: #fff; 
    }
        .footer-20192 .social li a > span {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }
    .footer-20192 .footer-logo {
      color: #fff;
      font-size: 20px;
      text-transform: uppercase;
      letter-spacing: .1rem; }
    .footer-20192 .copyright {
      color: #666873; }
    .footer-20192 .cta {
      -webkit-box-shadow: -20px -20px 0 0 rgba(129, 134, 213, 0.2);
      box-shadow: -20px -20px 0 0 rgba(129, 134, 213, 0.2);
      padding: 20px;
      border: none;
      background-color: #8186d5;
      top: -150px;
      position: relative; }
      .footer-20192 .cta h2, .footer-20192 .cta h3 {
        line-height: 1.5; }
      .footer-20192 .cta h3 {
        font-size: 20px; }
  /* FOOTER END */

  .map{
    max-width:50%;
    max-height: 50%;
  }


  .wp-button{
  margin-top:14px;
}
.float{
  position:fixed;
  width:60px;
  height:60px;
  bottom:60px;
  right:15px;
  background-color:#25d366;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:35px;
  box-shadow: 2px 2px 3px #999;
  z-index:6;
}

.hello{
  position: relative;
  z-index: 7;
}
     
      


      /* dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
      dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
      ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd */





      @media(min-width:560px){
        .img-first{
          margin-left: -2.2%;
        }
      }


      @media(min-width:767px){

        .ubiquologo{
    max-width: 5%;
    margin-top:0.5%;
    margin-bottom: 0.5%;
  }

  .top-right1{
     color: white;
    position: absolute;
    top: 25%;
    left: 28%;
    max-width:45%;
    font-family: 'gilroy-bold';
  }

  .logomain{
    max-width: 33%;
  }
  .logomain1{
    max-width: 100%;
  }

        .first-sec-sm{
            display: none;
          }
        .first-sec-lg{
            display: block;
            min-width: 100vw;
            max-height: 100vh;
            max-width: 100vw !important;
            max-height: 100vh !important;
            overflow: hidden;
          }
        
          .img-first{
            width: 102vw !important;
	/* height: 100vh; */
	margin-left: -1.6%;
	overflow: hidden;
	/* transform: scaleX(-1); */
	/* margin-top: -33%; */
          }
          .first-sec-lg .top-right{
              margin-top: 2%;
              margin-left: 10%;
              top:33%;
          }
          .linker-button{
              margin-top: -30%;
              border-bottom: none;
          }
      
          .sec-two{
            /* margin-top: -6%; */
            /* padding-top: 2%; */
            padding-bottom: 2%;
            }
          .justify-all{
            display: flex;
            text-align: left;
          }
          .justify-me-center{
              display: flex;
              text-align: center;
          }
          .uneven-four-set{
            margin-top: -1.25%;
          }
          .four-header-text{
            margin-left: -11%;
          }
          .sec-here-now{
            margin-top: -1.3%;
        }
        .herenow{
        top: 23vh;
        }
        .lg-only{
            display: block;
        }
  
  .div-last{
    margin-top: -4%;
    z-index: 2;
    /* max-height: 76vh; */
  }
.contact-box{
  width: 50%;
}

}



::-webkit-scrollbar-track
{box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: rgb(256,256,256);
}

::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.1);
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
	background-color: gray;
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
   /* #overlay{
    min-height: 80%;
    z-index: 3;
  }
  .sec-two{
    position: relative;
    z-index: 4;
  } */
  }