/*!
 * Start Bootstrap - Grayscale v4.0.0-alpha (http://startbootstrap.com/template-overviews/grayscale)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-grayscale/blob/master/LICENSE)
 */
body {
  font-family: 'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
  width: 100%;
  height: 100%;
  color: #818b98;
  background-color: White;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.40px;
    -moz-osx-font-smoothing: grayscale;}

html {
  width: 100%;
  height: 100%; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 0 0 35px;
  letter-spacing: 1px;
 }

p {
  font-size: 16px;
  line-height: 1.5; }
  @media (min-width: 768px) {
    p {
      font-size: 18px;
      line-height: 1.6; } }

a {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  color: #818b98; }
  a:hover, a:focus {
    text-decoration: none;
    color: #0f73ea; }

#mainNav {
  font-family: 'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; font-size: 0.9375rem;
  margin-bottom: 0;
  text-transform: uppercase;
  background-color: #0f73ea; }
  #mainNav .navbar-toggler {
    font-size: 24px;
    padding: 11px;
    color: white;
    border: 1px solid #0f73ea; }
  #mainNav .navbar-brand {
    font-weight: 700; }
  #mainNav a {transition: color 0.5s ease;
    color: white; padding: 0 1.5rem; } #mainNav a:hover, #mainNav .active {  color:#fad733; }
  #mainNav .navbar-nav .nav-item { text-align: center; font-weight: 700; letter-spacing: 2px; padding: 10px 0px;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out; }
    #mainNav .navbar-nav .nav-item:hover {
      color: fade(white, 80%);
      outline: none;
      background-color: transparent; }
    #mainNav .navbar-nav .nav-item:focus, #mainNav .navbar-nav .nav-item:active {
      outline: none;
      background-color: transparent; color:#fad733; }
  @media (min-width: 769px) {
    #mainNav {
      padding: 20px 0;
      -webkit-transition: background .25s ease-in-out, padding .25s ease-in-out;
      -moz-transition: background .25s ease-in-out, padding .25s ease-in-out;
      transition: background .25s ease-in-out, padding .25s ease-in-out;
      letter-spacing: 2px;
      border-bottom: none;
      background: transparent; }
      #mainNav.navbar-shrink {
        padding: 10px 0;
        background: #0f73ea;  }
      #mainNav .nav-link.active {
        outline: none;
        background-color: rgba(255, 255, 255, 0);}
        #mainNav .nav-link.active:hover {
          color: white; } }

.masthead {
  display: table;
  width: 100%;
  height: auto;
  padding: 0px 0;
  text-align: center;
  color: white;
  background: url(../img/layout/main-bg.png) no-repeat bottom center scroll;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }
  .masthead .intro-body {
    display: table-cell;
    vertical-align: bottom; width: 100% }
    .masthead .intro-body .brand-sub {
      font-size: 26px; text-transform: none; font-weight: 200; margin-top: 85px; margin-bottom: 20px; line-height: 1.2}
    .masthead .intro-body .brand-heading {
      font-size: 38px; text-transform: none; font-weight: 200;}
    .masthead .intro-body .feat {width: 100%;}
  @media (min-width: 768px) {
    .masthead {
      padding: 0; }
      .masthead .intro-body .brand-sub {
        font-size: 38px; text-transform: none; font-weight: 200; margin-top: 160px; margin-bottom: 20px; }
      .masthead .intro-body .brand-heading {
      font-size: 55px; text-transform: none; font-weight: 200; margin-bottom: 60px; }
      .masthead .intro-body .intro-text {
        font-size: 22px; }
      .masthead .intro-body .feat {width: 100%}
  }
.innerbg {background-position:center center; }

#mainNav .navbar-nav .login {transition: background 0.5s ease; background: white; border-radius: 5px;  }
#mainNav .navbar-nav .login:hover { background: #fad733; cursor: pointer; }

#mainNav .login > a {transition: background 0.5s ease, color 0.5s ease; color:#0f73ea; }
#mainNav .login:hover  > a { color: #000!important; }


::-moz-selection {
  background: #fcfcfc;
  background: rgba(255, 255, 255, 0.2);
  text-shadow: none; }

::selection {
  background: #fcfcfc;
  background: rgba(255, 255, 255, 0.2);
  text-shadow: none; }

img::selection {
  background: transparent; }

img::-moz-selection {
  background: transparent; }

body {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2); }

.spacer{ padding: 30px 0;  }
.spacersm{ padding: 20px 0;  }

/* Service*/
#service { color: #818b98; background: #f6f6f7; padding: 0px 0 40px 0; }
#service h1 { color: #0f73ea; font-weight: 200; margin-bottom: 20px; margin-top: 40px; }
#service p { color: #818b98 ; font-weight: 300; font-size: 22px; line-height: 1.8;  }

/* Home - About Lines*/
#about { padding: 80px 0 40px 0; }
#about h1 { color: #0f73ea; font-weight: 200; margin-bottom: 20px;  }
#about p { color: #818b98 ; font-weight: 300; font-size: 22px; line-height: 1.8;  }

/* Home - Product*/
#product { }
#product .prodimg {display: inline-block; width: 100%;}
#product .title { color:#745cbc; font-size: 34px; font-weight: 200; margin: 30px 20px 20px 20px;}
#product p.text { color: #818b98 ; font-weight: 300; font-size: 18px; line-height: 1.8; margin: 0px 20px 40px 20px;  }
#product a {color:#c0c5cb; font-size: 16px; text-transform: uppercase; border: 3px solid #c0c5cb; border-radius: 5px;
  padding:10px 15px; letter-spacing: 2px; margin: 0px 20px 20px 20px; }
#product img.feat {width: 100%; margin-top: 30px;}

/* Home - Support */
#support { color: #FFF; background: #745cbc;}
#support h1 {  font-weight: 200; font-size: 34px; margin-bottom: 20px; margin-top: 80px;  }
#support p {  font-weight: 300; font-size: 18px; line-height: 1.8;  }
#support img {width: 100%;}

/* Home - Testimonials */
#client { color: #818b98; background: #f6f6f7; padding: 60px 0px;}
#client h1 {  font-weight: 200; font-size: 34px; margin-bottom: 20px;  }
#client img { margin-bottom: 20px;}
#client p {  font-weight: 300; font-size: 18px; line-height: 1.8;  padding: 0 40px; }
#client q { quotes: "“" "”" "‘" "’"; font-weight: 300; font-size: 18px; line-height: 1.8; }
q:before { content: open-quote; font-size: 40px;  }
q:after { content: close-quote; font-size: 40px; }
#client p.writer {  font-weight: 700; font-size: 18px; line-height: 1.8;  }

/* Home - CTA */
#cta { padding: 60px 0px; }
#cta h1 {  color: #0f73ea; font-weight: 200; display: inline-block; vertical-align: middle; font-size: 30px; margin-bottom: 0px; margin-right: 30px;   }
#cta a {transition: color 0.5s ease, background 0.5s ease, border-color 0.5s ease; color:#FFF; font-size: 16px; text-transform: uppercase; background:#0f73ea;  border: 3px solid #0f73ea; border-radius: 5px;
    padding:10px 15px; letter-spacing: 2px; }
#cta a:hover { background: #fad733;  border-color: #fad733; color: #000; }


/* Home - Buttons */
#buttons { color: #818b98; background: #f6f6f7; padding: 60px 0px; }
#buttons h1 {  font-weight: 200; font-size: 34px; margin-bottom: 20px;  }
#buttons a.demo { color:#c0c5cb; font-size: 16px; display: inline-block; text-transform: uppercase; border: 3px solid #c0c5cb; border-radius: 5px;
    padding:15px 20px; letter-spacing: 2px;  }
#buttons a.soc { color: #c0c5cb; font-size: 24px;}
#buttons .rqst { background: url("../img/layout/sepv.png") right no-repeat;  }

span.fa-stack { transition: color 0.5s ease;  color: #c0c5cb; }
span.fa-stack:hover {cursor: pointer; color: #0f73ea;  }

a.greybutton { transition: color 0.5s ease, border-color 0.5s ease; border: 3px solid #c0c5cb!important; color: #c0c5cb!important; }
a.greybutton:hover { border: 3px solid #0f73ea!important;  color: #0f73ea!important; }

/*  Terms of Services*/
#terms p, #terms ol, #terms ul { color: #818b98 ; font-weight: 300; font-size: 18px; line-height: 1.8; margin: 0 0 40px 0;  }
#terms h3 { margin-bottom: 20px;}


/*  Solutions*/
#solution { }
#solution .prodimg {display: inline-block; width: 100%;}
#solution .title { color:#745cbc; font-size: 34px; font-weight: 200; margin: 10px 20px 20px 20px;}
#solution p.text { color: #818b98 ; font-weight: 300; font-size: 18px; line-height: 1.8; margin: 0px 20px 20px 20px;  }
#solution a {color:#c0c5cb; font-size: 16px; text-transform: uppercase; border: 3px solid #c0c5cb; border-radius: 5px;
  padding:10px 15px; letter-spacing: 2px; margin: 0px 20px 20px 20px; }
#solution ul { padding-left: 30px; font-size: 14px; margin-bottom: 0px; }
#solution ul li {color:#745cbc; line-height: 2; padding-left: 10px;}


  /* Footer   */
footer { padding: 50px 0 20px 0; }
footer h1 {  font-weight: 200; font-size: 34px; margin-bottom: 10px;  }
footer a {display: inline-block; font-weight: 300; font-size: 16px; line-height: 1.8; padding: 0 20px; margin-bottom: 10px; }
footer p {  font-weight: 300; font-size: 14px; line-height: 1.8;   }

/* Contact - Form   */
#contactform { text-align: center;}
#contactform .formbtn {cursor:pointer; transition: color 0.5s ease, background 0.5s ease, border-color 0.5s ease; color:#FFF; font-size: 16px; text-transform: uppercase; background:#0f73ea;  border: 3px solid #0f73ea; border-radius: 5px;
  padding:10px 15px; letter-spacing: 2px; font-family: 'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;}
#contactform .formbtn:hover {background: #fad733;  border-color: #fad733; color: #000; }
#contactform input, #contactform textarea{  padding: 20px; color: #818b98; font-size: 16px;   width: 100%; margin-bottom: 20px;}
.form-control::placeholder { color:#818b98;}

  /* Modal  */
.modal-open {
  /*position: fixed;*/
  overflow: scroll;
  overflow-x:hidden;
  width: 100%;
  padding-right: 0!important;
}

.modal-header .modal-title {  color: #0f73ea; font-weight: 200; font-size: 24px; }
.form-control {font-family: 'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;}
.modal-footer {justify-content:center;}
.modal-footer .formbtn {cursor:pointer; transition: color 0.5s ease, background 0.5s ease, border-color 0.5s ease; color:#FFF; font-size: 16px; text-transform: uppercase; background:#0f73ea;  border: 3px solid #0f73ea; border-radius: 5px;
  padding:10px 15px; letter-spacing: 2px; font-family: 'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;}
.modal-footer .formbtn:hover {background: #fad733;  border-color: #fad733; color: #000; }