@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css?family=Raleway:300,500,700,900');
html, body{ scroll-behavior: smooth; height: 100%; font-family: 'Raleway', sans-serif; font-weight:400; position:relative; }
#preloader {position: fixed; z-index: 1800;top: 0; right: 0;bottom: 0;left: 0;width: 100%;height: 100%;background: #000;}
#loader {position: absolute;top: 50%;left: 50%; width: 60px;height: 60px; margin: -30px 0 0 -30px;padding: 0;}
#loader::before { display: block; width: 60px; height: 60px; content: ''; -webkit-animation: load 1.1s infinite linear;animation: load 1.1s infinite linear;border-top: 2px solid rgba(255, 255, 255, .1);border-right: 2px solid rgba(255, 255, 255, .1);border-bottom: 2px solid rgba(255, 255, 255, .1);border-left: 2px solid #fc575e; border-radius: 50%;}
.home .arowdown { position:absolute; bottom:20px; left:50%; @include animation(bounce 2s infinite); }
.home .arowdown i{ color:#fff; font-size:30px;}
.home{ height:100%;position:relative; /*background-image:url(../images/bg-grey_03.png);*/}
.content{position:relative; background-image:url(../images/bg-grey_03.png); background-repeat: repeat; padding:30px 30px 60px; border-radius:10px;}
.lgheight{/*padding:1% 1% 2%;*/  position:relative; background-color:#fff; width:100%;}
a.arrowt{ color:#fff; padding:10px 15px; font-size:18px;  position:fixed; z-index:99; left:20px; bottom:20px;background-image:url(../images/bg-grey_03.png); background-repeat: repeat;  border-radius:10px;}
a.arrowt i{color:#fff; }
.modal-dialog{ margin-top:50px !important;}
body.vegas-container { overflow-x: hidden !important;}
.heightonethird{ height:33%;}
.relative{ position: relative;}
.vdbanner video{   position: absolute; width: 80%; left: 35px; top: 30px; border-radius: 24px; z-index: -1;}
.mblbner{ position: absolute; width: 180px; bottom: -20px; right: 0px;}
.mblbner video{     position: absolute; width: 80%;left: 18px;top: 15px; border-radius: 20px;}
.main{ margin-top:13%; color:#fff;}
.main h1 , .maintitle img{ animation: float 6s ease-in-out infinite; width: 200px;}
.main h1 > img{ padding:0px; margin:0px; position:absolute;top: -180px; }
.main h1 > img.logo{ width:200px;}
.main h2 , .willomore h4{ font-size:24px; letter-spacing:2px; font-weight:300;}
.main h3{ text-align: center; font-size:36px; font-weight:900; letter-spacing: 1px ; margin-top:8px; }
.main h4{ font-size:20px;  font-weight:700; margin-bottom:24px; letter-spacing: 1px; margin-top: 8px; text-align:center; text-transform:uppercase;}
.main h2 ,.main h3, .willomore h4{text-align:center; text-transform:uppercase;margin:0px; padding:0px;}
.main p{ font-weight:400 !important; font-size:16px !important; line-height:24px;letter-spacing: 0.75px;}
.main a.btn-email, .main a.btn-dl{ border:1px solid #fff; display:block; text-align:center; text-transform:uppercase; color:#fff; padding:15px 0px; margin-top:40px;}
.main a.btn-email:hover{ background-color:#10BBB0; text-decoration:none; font-weight:900;}
.main a.btn-dl:hover{ background-color:#42C3F1;  text-decoration:none; font-weight:900;}
 span.subtext{ font-size: 2rem;}
 section h2{ font-weight: 700; font-size: 2rem;}
  section h1{ font-weight: 700; font-size: 2.5rem;}
.willomore h4{ padding: 3rem;}
.designprocess img{ width: 120px;}
.willomore h4.trusted{ padding: 6rem 0 3rem; }
span img{ width: auto !important;}
.btn-5 {display:block; text-align:center; text-transform:uppercase; color:#fff; padding:15px 0px; margin-top:40px; font-weight:700;
  border: 0 solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);
  outline: 1px solid;
  outline-color: rgba(255, 255, 255, .5);
  outline-offset: 0px;
  text-shadow: none;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

section.security {
    background-image: url(../images/img/security.png);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
section .bg-primary-g {
    padding: 80px 0px;
    background-color: rgba(0, 76, 65, 0.8);}
.centercontent{ align-content: center;}
.homebtn{ width: 40px; position: fixed; top: 20px; left: 20px; z-index: 33; }
.dropkey{ position: relative;}
.dropkey video{ 
    position: absolute;
    width: 80%;
    border-radius: 1rem;
    top: 2px;
    left: 28px;
}
.lh-24{line-height: 24px;}
.br-8{ border-radius: 8px;}
.br-16{ border-radius: 16px;}
.br-24{ border-radius: 24px;}
.br-32{ border-radius: 32px;}
.br-40{ border-radius: 40px;}
.avtr img{ width: 100px !important;}


.arrowdown{
    color: white;
    width: 0px;
    height: 0px;
    border:16px solid black;
    border-top-color: #FFF5F8;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    position: absolute;
    bottom: -30px;
    left: 20px;
}
.bw-primary{  border: 1px solid #009EF7; }
.bw-success{  border: 1px solid #50CD89; }
.bw-primary-thick{  border: 3px solid #009EF7; }
.bw-success-thick{  border: 3px solid #50CD89; }
.bw-danger
.bw-05{ border-width: 0.5px;}
.bw-1{ border-width: 1px;}
.bw-2{ border-width: 2px;}
.f-c-w{ color: #fff !important}
.dropkey img{ width: 100%; height: auto; position: absolute; top: -20px; left: 0px; z-index: 1;}
.solution{background-image: url("../images/_cmms/grey.jpg");}
.overview{ background-image: url("../images/wmcommand/bg-top.jpg"); background-size: 100%;  padding: 56px 0px;}
.comprehensive, .dev{background-image: url("../images/wmcommand/leaf-bg.jpg"); }
.research, .v3mblapp{background-image: url("../images/wmcommand/bg-user-research.jpg"); }
.solution, .mobile-set, .comprehensive, .dev, .research, .v3mblapp{ background-repeat: no-repeat; background-size: cover;}
.mobile-set{background-image: url("../images/_cmms/mobile-set.jpg")};
.dashboards{ background-color: #b4b5c7;}
.absolute{ position: absolute;}
.relative{ position: relative;}
.z-1{ z-index: 1;}
.object-center{ padding-top: 4rem;}
.btn-5:hover {
  border: 1px solid;
  box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #427388; text-decoration:none; color:#fff;
}
p.oview{ font-size: 1.3em; line-height: 2em;}
.btn-5:link, .btn-5:visited , .btn-5:active{ color:#fff;}
.portfolioList, .portfolioListmain{ position:relative; float:left;padding:0px; margin:0px;}
.clear{ clear:both;}
body{/* background-image:url(../images/bg.jpg); background-repeat:no-repeat; background-size:cover;*/}
/* modal box */
.monitor{ position: relative;}
.monitor video{  width: 100%; top: 69px; left: 54px; border-radius: 1rem; border: 1rem solid rgba(255, 255, 255, 0.4);  }
.drkmonitor video{  width: 100%; border-radius: 1rem; border: 1rem solid rgba(0, 0, 0, 0.4);  }
img{ width:100%;}
.btn{ text-decoration: none;}
.btn-sm{ padding: .25rem;}
.btn-md{ padding: .5rem;}
.btn-lge{ padding: 1rem;}
.btn-full{width: 100%;}
.btn-green{background-color: #2B978C; color: #E6F3F1;}
.boximg img{
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; border-radius: 16px;
}

.boximg video {
    width: 100%;
    border-radius: 1rem;
    border: 1rem solid rgba(0, 0, 0, 0.4);
}
.btn-green:hover{background-color:#E6F3F1;  color:  #2B978C;} 
.modal-content{position:relative;}
.modal-cont{ min-height:400px; position: relative;}
.modal-cont img{ width: 100%; }
.modal-cont .close{ position: absolute; z-index: 9;right:10px;      background-color: transparent;
    border: 0px;}
.modal-cont .close span{ font-size: 40px; color: #000; opacity: 0.5 !important;}
.exit{ position:absolute; right:10px; top:10px; z-index:2; font-size:25px; color:#666; cursor:pointer;}
.exit:hover{ color:#06F;}
ul.uxprocess{ list-style: none;}
/*   */
section.showcasewmfacility{ background-color: #fff;}
#willomore{ height: auto;
  background-image: url("../images/willowmore.jpg");

  /* Full height */
 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding:8rem 0;
}

/* maintitle */
#home{ width:100vw; height: 100vh;}
.maintitle { text-align: center;}
.maintitle img{ width: 140px;}
.titleUx h1{ font-size: 8rem;}
.skillset{ margin-bottom: 2rem;}
.skillset .badge{ border-radius: 100px; margin-bottom: 8px; }
.lh-2{ line-height: 2rem;}
p.descp{ min-height: 130px;}
.company img{ width: 12px;} 
.willomore h2{
  font-size: 36px;
  line-height: 46px;
}
.titleUx h2{ font-size: 3rem;}
.titleUx h3{ font-size: 2.4rem; line-height: 3.5rem;}
.titleUx h3 span{ font-size: 3rem; font-weight: bold; }
/* background-color: #000; color: #fff; padding: 2px 4px 8px 8px; border-radius: 8px; */
hgroup.company p span { font-weight: normal;}
.fw-500{font-weight: 500;}
.fw-700{font-weight: 700;}
.fw-900{font-weight: 900;}
.willomore h2 b{ font-weight: bold;}
.willomore h2 span{ background-color: #005C52; padding: 0px 16px;}
.thumbs-img {position: relative;clear: both;margin: 0;width: 100%;list-style: none;text-align: center;}
.portwillow{padding:0px 10rem}
.portfolioList figure {position: relative;overflow: hidden;text-align: center;cursor: pointer;}

.portfolioList figure img {
	position: relative;
	display: block; height:33%;
	max-width: 100%;
	opacity: 0.8;
}

.portfolioList figure figcaption {
	padding: 20px 20px 0px;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.portfolioList figure figcaption::before,
.portfolioList figure figcaption::after {
	pointer-events: none;
}

.portfolioList figure figcaption,
.portfolioList figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/*height: 100%;*/
}


.portfolioList figure {position: relative;overflow: hidden;text-align: center;cursor: pointer;}

.portfolioList figure img {
	position: relative;
	display: block; height:33%;
	max-width: 100%;
	opacity: 0.8;
}

figure figcaption {
	padding: 20px 20px 0px;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure figcaption::before,
figure figcaption::after {
	pointer-events: none;
}

 figure figcaption,
 figure figcaption > a {
	position: absolute;
    display: block;
    text-align: center;
    color: #2d434e;
    text-decoration: none;
	top: 0;
	left: 0;
	width: 100%;
	/*height: 100%;*/
}
figure figcaption > a:hover{ text-decoration: none;}
/* Hover Effect on image*/

figure.effect-steve {z-index: auto;overflow: visible;}
figure.effect-steve:before,
figure.effect-steve h2{ font-size: 21px; }
figure.effect-steve h2:before {position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;content: '';-webkit-transition: opacity 0.35s;transition: opacity 0.35s;}
figure.effect-steve:before {}
figure.effect-steve figcaption {z-index: 11;}
figure.effect-steve img {opacity: 1;-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: perspective(1000px) translate3d(0,0,0);transform: perspective(1000px) translate3d(0,0,0);}
figure.effect-steve h2,figure.effect-steve p {background: #fff;color: #2d434e;}
figure.effect-steve h2 {position: relative;margin-top: 2em;padding: 0.25em;}
figure.effect-steve h2:before {box-shadow: 0 1px 10px rgba(0,0,0,0.5);}
figure.effect-steve p {margin-top: 1em;padding: 0.5em;font-weight: 800;opacity: 0;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: scale3d(0.9,0.9,1);transform: scale3d(0.9,0.9,1);}
figure.effect-steve p a{ color: #2d434e; display: block;}
figure.effect-steve p a:hover{ text-decoration: none;}
figure.effect-steve a img{ display: block;}
/*figure.effect-steve:hover:before {opacity: 1;}*/
/*figure.effect-steve:hover img { box-shadow: 0 3px 30px rgba(0,0,0,0.8); z-index:1; }*/
/*-webkit-transform: perspective(1000px) translate3d(0,0,50px);transform: perspective(1000px) translate3d(0,0,50px);*/
figure.effect-steve:hover h2:before {opacity: 0;  }
figure.effect-steve:hover p {opacity: 1;-webkit-transform: scale3d(1,1,1);transform: scale3d(1,1,1); }
.modalbody{ background-image:url(../images/bggr_09.png); background-repeat:no-repeat; position:relative;}
.modalbody .me{ position: absolute; left:-40px; bottom:0px; z-index:4;}
.modalbody .bal{position: absolute; left:-170px; top:-20px; z-index:1;}
.modalbody .bal img{}
.modalbody .me img, .modalbody .bal img{ width:75%;}
.sendemail{ padding-left:40px;}
.text-white{ color: #fff;}
.text-center{ text-align: center;}
/* Main CSS */
.go-top-show{ -webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);opacity: 1;filter: alpha(opacity=100);}
.go-top-hide{-webkit-transform: translateY(40px);-ms-transform: translateY(40px);transform: translateY(40px); opacity: 0;filter: alpha(opacity=0);}
.modal-cont img{ z-index: 99999999 }

.justify-content{justify-content: center;}
section{overflow-x: hidden;}

section h5{ font-size: 16px;}
section h4{ font-size: 18px; line-height: 28px;}
section ul li, section p{ font-size: 16px; padding-bottom: 8px; }
section ul li, section p , section h5, section h4{letter-spacing: 1px;}
section p span{ font-weight: 700;}
section p { line-height: 24px;}
section image{ width: 100%;} 
figure{ margin-bottom: 0px !important;}
hgroup.duration h4{ font-size: 12px; font-weight: 600; margin: 0px;padding: 0px;}
hgroup.duration h5{ font-size: 14px; line-height: 18px; margin: 0px; padding-bottom: 1em; lin}
/* animation */
@-webkit-keyframes load
{
    0%
    {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}

@keyframes load
{
    0%
    {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
    }
}
@keyframes float {
	0% {transform: translatey(0px);}
	50% {transform: translatey(-20px);}
	100% {transform: translatey(0px);}
}
.wave {
  animation-name: wave-animation;  /* Refers to the name of your @keyframes element below */
  animation-duration: 2.5s;        /* Change to speed up or slow down */
  animation-iteration-count: infinite;  /* Never stop waving :) */
  transform-origin: 70% 70%;       /* Pivot around the bottom-left palm */
  display: inline-block;
}

@keyframes wave-animation {
    0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(14.0deg) }  /* The following five values can be played with to make the waving more or less extreme */
   20% { transform: rotate(-8.0deg) }
   30% { transform: rotate(14.0deg) }
   40% { transform: rotate(-4.0deg) }
   50% { transform: rotate(10.0deg) }
   60% { transform: rotate( 0.0deg) }  /* Reset for the last half to pause */
  100% { transform: rotate( 0.0deg) }
}