/**
 * Frontline Business Solutions, Inc.
 * Author : FBS Team
 * ===================================================================
 * Table of Contents
 *
 * 1.0 - Resets
 * 2.0 - Repeatable Patterns
 * 3.0 - Structure / Grid / Column
 * 4.0 - Header
 * 5.0 - Main Content
 * 6.0 - Footer
 * 7.0 - Clearing
 * 8.0 - Mobile CSS / Media Queries
 * 9.0 - Student Dashboard
 */
/* =================================================================== 
 * 1.0 :: Resets
 * ===================================================================
 */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font-family: inherit;
    font: 20px/30px 'Raleway', sans-serif;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
  }
  
  body {
      line-height: 1;
      color: #333;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
  }
  
  table {
      border-collapse: collapse;
      border-spacing: 0;
  }
  
  td, th {
    border: 1px solid #ddd;
    padding: 6px 15px;
    text-align: left;
  }
  
  th {
    font-weight: bold;
    background: #eef1f7;
  }
  html {
      font-size: 100%;
      overflow-y: scroll;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%
  }
  
  article, aside, figure, footer, header, nav, section, time {
      display: block
  }
  
  /* =================================================================== 
   * 2.0 :: Repeatable Patterns
   * ===================================================================
   */
  
  /* Links */
  
  :focus {
      outline: 0
  }
  
  a {
      color: inherit;
      text-decoration: none
  }
  
  /* Formating */
  b, strong {
      font-weight: bold!important
  }
  
  em {
      font-style: italic!important
  }
  
  small {
      font-size: 75%!important
  }
  
  sub,
  sup {
      font-size: 75%;
      line-height: 0;
      position: relative;
      vertical-align: baseline
  }
  
  sup {
      top: -0.5em
  }
  
  sub {
      bottom: -0.25em
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      clear: both;
      font-weight: normal
  }
  
  h1 {
      font-size: 25px;
      line-height: 35px
  }
  
  h2 {
      font-size: 20px;
      line-height: 30px
  }
  
  h3 {
      font-size: 18px;
      line-height: 25px
  }
  
  h4 {
      font-size: 14px;
      margin-bottom: 0
  }
  
  h5 {
      font-size: 12px;
      line-height: 18px;
      margin-bottom: 0
  }
  
  h6 {
      font-size: 9px;
      line-height: 15px;
      margin-bottom: 0
  }
  
  p {
      margin-bottom: 20px
  }
  
  .color--red {
      color: #b9121b!important
  }
  
  .color--blue {
      color: #2a276b!important
  }
  
  .color--gold {
      color: #a67a41!important
  }
  
  .color--black {
      color: #333!important
  }
  
  .color--white {
      color: #fff!important
  }
  
  .color--magenta {
      color: #6a103f!important
  }
  
  .color--darkgray {
      color: #3a3b36!important
  }
  
  .color--lightblue {
    color: #198879!important;
  }
  /* Alignment */
  
  .left {
      float: left!important
  }
  
  .right {
      float: right!important
  }
  
  .t-center {
      text-align: center!important
  }
  
  .t-left {
      text-align: left!important
  }
  
  .t-right {
      text-align: right!important
  }
  
  .t-justify {
      text-align: justify!important
  }
  
  /* Images */
  
  img {
      border: 0;
      -ms-interpolation-mode: bicubic;
      max-width: 100%;
      max-height: 100%;
  }
  
  img.alignleft {
      float: left;
      margin: 0 12px 12px 0
  }
  
  img.alignright {
      float: right;
      margin: 0 0 12px 12px
  }
  
  img.aligncenter {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 12px
  }
  
  img.img-absolute {
      position: absolute;
  }
  
  /* UL, OL */
  
  .list-text {
      margin: 0 0 20px 60px;
  }
  
  /* Margin */
  
  .mb--10 {
      margin-bottom: 10px!important
  }
  
  .mb--20 {
      margin-bottom: 20px!important
  }
  
  .mb--30 {
      margin-bottom: 30px!important
  }
  
  .mb--40 {
      margin-bottom: 40px!important
  }
  
  .mb--50 {
      margin-bottom: 50px!important
  }
  
  .mb--60 {
      margin-bottom: 60px!important
  }

  .mb--100 {
    margin-bottom: 100px!important
  }
  
  .no-pd {
    padding: 0!important;
  }
  
  .no-mg {
    margin: 0!important;
  }
  
  button,
  input[type=submit],
  input[type=button],
  input[type=reset],
  input[type=date] {
      border: 0;
      cursor: pointer;
      display: inline-block;
  }
  
  input[disabled] {
      cursor: default
  }
  
  input[type=checkbox]:focus,
  input[type=radio]:focus,
  input[type=file]:focus,
  input[type=hidden]:focus {
      border: none;
      outline: 0
  }
  
  input[type=checkbox],
  input[type=radio],
  input[type=file],
  input[type=hidden],
  input[type=image],
  input[type=color] {
      border: 0!important;
      border-radius: 0!important;
      padding: 0!important
  }
  
  button,
  input,
  textarea {
      font-family: inherit
  }
  
  button,
  input {
      line-height: normal
  }
  
  textarea {
      font-size: 100%;
      overflow: auto;
      vertical-align: top
  }
  
  input[type=text],
  input[type=date],
  input[type=email],
  input[type=phone],
  input[type=date],
  input[type=password],
  select,
  textarea {
      background: #fff;
      border: 1px solid #ced4da;
      border-radius: .25rem;
      height: 38px;
      padding: 6px 15px;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      color: #54667a;
      background-clip: padding-box;
      transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
      box-shadow: none;
      width: 100%;
  }
  
  input[type=password]:focus,
  input[type=text]:focus,
  textarea:focus {
      -webkit-box-shadow: inset 0 1px 5px #d6d6d6!important;
      -moz-box-shadow: inset 0 1px 5px #d6d6d6!important;
      box-shadow: inset 0 1px 5px #d6d6d6!important
  }
  
  form textarea {
      height: 150px
  }
  
  label {
    display: block;
  }

  .btn-footer {
    border: 1px solid #fff;
    padding: 5px 10px;
    border-radius: 5px;
    width: auto;
    display: inline-block;
    font-size: 0.9rem;
}

.btn-footer:hover {
  border: 1px solid #fff;
  background: #fff;
  color: #333;
  transition: all 0.5s;
}

  .btn-blue {
      color: #fff;
      background-color: #1994b2;
      border-color: #1994b2;
      border-radius: 10px;
      padding: 10px;
      display: inline-block;
      width: 100%;
      font-size: 100%;
  }
  
  .btn-white {
    color: #fff;
    background-color: #1994b2;
    border: 1px solid #fff;
    border-radius: 10px;
    padding: 10px;
    display: inline-block;
    width: 100%;
    font-size: 100%;
    font-weight: bold;
}

  .btn-sml {
    width: 250px;
  }

  .btn-blue:hover, .nav-home:hover {
    background-color: #0e748d;
    border-color: #0e748d;
  }


  .btn-white:hover {
    color: #1994b2;
    background-color: #fff;
    border-color: #1994b2;
    transition: all 0.5s;
  }

  .btn-greengradient {
    color: #fff;
    background-color: rgb(92, 184, 92);
    border-color: #4cae4c;
    border-radius: 10px;
    padding: 10px;
    display: inline-block;
    width: auto;
    font-size: 100%;
  }

  .btn-greengradient:hover {
    background: linear-gradient( -90deg, 
  rgb(42, 119, 42, 1), 
  rgba(42, 119, 42, 1));
      transition: all 1s ease-in-out;
  }

  .bg--lightblue {
    background: #a8ebfa;
  }

  .bg--green {
    background: rgb(79, 163, 70, .3);
  }

  .bg--gray {
    background: #eee;
  }

  .bg--white {
    background: #fff!important;
  }

  .bg--blue {
    background: #1994b2;
  }


  .bg--lightbrown {
    background: #efebdd;
  }

  .bg--yellow {
    background: rgb(247, 148, 30, .3);
  }

  .bg--orange {
    background: rgb(237, 106, 80, .3);
  }

  .bg--red {
    background: rgb(238, 49, 80, .3);
  }

  .bg--violet {
    background: rgb(140, 0, 174, .3);
  }
  /* ===================================================================
   * 3.0 :: Structure / Grid/ Column
   * ===================================================================
   */
  
  /* Uncomment and set these variables to customize the grid. */
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  *:before,
  *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  @media (min-width: 768px) {
    .container {
      width: 100%;
    }
  
  }
  @media (min-width: 992px) {
    .container {
      width: 970px;
    }
  }
  @media (min-width: 1200px) {
    .container {
      width: 1170px;
    }
  }
  .container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
  }
  .row {
    margin-left: -15px;
    margin-right: -15px;
  }
  .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
  }
  .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    float: left;
  }
  .col-xs-12 {
    width: 100%;
  }
  .col-xs-11 {
    width: 91.66666667%;
  }
  .col-xs-10 {
    width: 83.33333333%;
  }
  .col-xs-9 {
    width: 75%;
  }
  .col-xs-8 {
    width: 66.66666667%;
  }
  .col-xs-7 {
    width: 58.33333333%;
  }
  .col-xs-6 {
    width: 50%;
  }
  .col-xs-5 {
    width: 41.66666667%;
  }
  .col-xs-4 {
    width: 33.33333333%;
  }
  .col-xs-3 {
    width: 25%;
  }
  .col-xs-2 {
    width: 16.66666667%;
  }
  .col-xs-1 {
    width: 8.33333333%;
  }
  @media (min-width: 768px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
      float: left;
    }
    .col-sm-12 {
      width: 100%;
    }
    .col-sm-11 {
      width: 91.66666667%;
    }
    .col-sm-10 {
      width: 83.33333333%;
    }
    .col-sm-9 {
      width: 75%;
    }
    .col-sm-8 {
      width: 66.66666667%;
    }
    .col-sm-7 {
      width: 58.33333333%;
    }
    .col-sm-6 {
      width: 50%;
    }
    .col-sm-5 {
      width: 41.66666667%;
    }
    .col-sm-4 {
      width: 33.33333333%;
    }
    .col-sm-3 {
      width: 25%;
    }
    .col-sm-2 {
      width: 16.66666667%;
    }
    .col-sm-1 {
      width: 8.33333333%;
    }
  }
  @media (min-width: 992px) {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
      float: left;
    }
    .col-md-12 {
      width: 100%;
    }
    .col-md-11 {
      width: 91.66666667%;
    }
    .col-md-10 {
      width: 83.33333333%;
    }
    .col-md-9 {
      width: 75%;
    }
    .col-md-8 {
      width: 66.66666667%;
    }
    .col-md-7 {
      width: 58.33333333%;
    }
    .col-md-6 {
      width: 50%;
    }
    .col-md-5 {
      width: 41.66666667%;
    }
    .col-md-4 {
      width: 33.33333333%;
    }
    .col-md-3 {
      width: 25%;
    }
    .col-md-2 {
      width: 16.66666667%;
    }
    .col-md-1 {
      width: 8.33333333%;
    }
  }
  @media (min-width: 1200px) {
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
      float: left;
    }
    .col-lg-12 {
      width: 100%;
    }
    .col-lg-11 {
      width: 91.66666667%;
    }
    .col-lg-10 {
      width: 83.33333333%;
    }
    .col-lg-9 {
      width: 75%;
    }
    .col-lg-8 {
      width: 66.66666667%;
    }
    .col-lg-7 {
      width: 58.33333333%;
    }
    .col-lg-6 {
      width: 50%;
    }
    .col-lg-5 {
      width: 41.66666667%;
    }
    .col-lg-4 {
      width: 33.33333333%;
    }
    .col-lg-3 {
      width: 25%;
    }
    .col-lg-2 {
      width: 16.66666667%;
    }
    .col-lg-1 {
      width: 8.33333333%;
    }
  }
  .clearfix:before,
  .clearfix:after,
  .container:before,
  .container:after,
  .container-fluid:before,
  .container-fluid:after,
  .row:before,
  .row:after {
    content: " ";
    display: table;
  }
  .clearfix:after,
  .container:after,
  .container-fluid:after,
  .row:after {
    clear: both;
  }
  
  
  
  /* =================================================================== 
   * 4.0 :: Header
   * ===================================================================
   */
  

  header .logo {
    /* height: 87px; */
    width: 100%;
    align-items: center;
    /* justify-content: center; */
    font-weight: bold;
    padding: 10px 0;
    display: flex;
   }

    .navigation {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 87px;
    }

   .navigation ul li{
      background: #1994b2;
      color: #fff;
      display: inline-block;
      border-radius: 10px;
      font-weight: bold;
      margin: 10px 0;
   }

   .navigation ul li:hover {
      background: #136e85;
      transition: all 0.5s;
   }

   .navigation ul li a.home{
      padding: 10px;
      display: inline-block!important;
   }

   .navigation ul li a{
    padding: 10px;
    /* display: inline-block; */
 }

   .navigation ul li a img{
    margin: auto;
    vertical-align: middle;
    display: inline-block;
    padding: 0px 5px;
   }
  /* =================================================================== 
   * 5.0 :: Main Content
   * ===================================================================
   */
   section {
     padding: 10vh 0;
     /* min-height: 350px; */
   }
  
   #banner, #about {
      /* background: linear-gradient(-100deg, 
      rgba(0, 175, 255, 0.9), 
      rgba(0, 125, 255, 0.9), 
      rgba(0, 175, 255, 0.9)), 
      url(../img/bg.png); */
      background: linear-gradient(-100deg, 
      rgba(25, 148, 178, 0.8), 
      rgba(25, 148, 178, 0.9), 
      rgba(25, 148, 178, 0.8)), 
      url(../img/bg.png);
      background-size: 100%;
      background-repeat: no-repeat;
      background-attachment: fixed;
      padding: 10vh 0;
      background-position: center;
   }

   #text-divider {
    background: linear-gradient(-100deg, 
    rgba(0, 0, 0, 0.7), 
    rgba(0, 0, 0, 0.7), 
    rgba(0, 0, 0, 0.7)), 
    url(../img/communication.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    padding: 15vh 0;
    background-position-y: 18%;
 }

    #banner .title {
      font-weight: bold;
      font-size: 3.3rem;
      line-height: 3.3rem;
    }

    #banner .logo {
      height: 100px;
      width: 100%;
    }


    .title {
      font-weight: bold;
      font-size: 3.3rem;
      line-height: 3.3rem;
    }
  
    .subtitle {
      font-weight: bold;
      font-size: 1.5rem;
      line-height: 1.5rem;
    }

  #banner .subtitle2 {
    /* font-weight: bold; */
    color: #333;
    font-size: 1.3rem;
    line-height: 1.3rem;
  }

  #banner .content-leftblock {
    text-align: center;
  }
  
  #frameworks .flip-card-front img {
    height: 200px;
  }

  #process .flip-card-front img {
    height: 160px;
  }

  /* #custom-operational img {
    height: 300px;
  } */
  #text-divider {
    color: #fff;
    padding: 5vh 0;
    min-height: auto;
  }

  #about {
    color: #fff;
  }

  #video-section {
    border-bottom: 1px solid #ddd;
  }
  .show {
    display: block!important;
  }
  
  .hide {
    display: none!important;
  }
  
  .disable {
    background-color: #adadad;
    cursor: default
  }
  .disable:hover {
    background-color: #adadad;
  }
  
  .required {
      color: #ff0000;
  }
  
  .center-vertically {
      display: flex;
      align-items: center;
      /* justify-content: center; */
      height: 400px;
  }

  .content-block {
    padding: 20px;
  }
  
  .desktop {display: inline-block;}
  .mobile {display: none;}
  
  .videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
  }

  .videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .videoWrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

  .flip-button {
    display: block;
    color: #a8ebfa;
    margin-top: 40px;
  }
   /* ===================================================================
   * 6.0 :: Footer
   * ===================================================================
   */
   footer {
    background: #333;
    text-align: center;
    padding: 5vh 0;
  }
    
  footer span {
    display: block;
    font-size: 0.75rem;
    line-height: 1.1rem;
  }

  footer .developer-link {
    color: #5cb85c;
    font-size: 0.75rem;
    line-height: 1.1rem;
  }
  
  footer .developer-link:hover {
    color: #449b44;
  }

  
  /* ===================================================================
   * 7.0 :: Clearing
   * ===================================================================
   */
  *, *:before, *:after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box
  }
  
  .clearfix:after,
  .inside:after,
  li:after,
  article:after {
      content: " ";
      clear: both;
      display: block;
      font-size: 0;
      height: 0;
      visibility: hidden
  }
  
  
  /* ===================================================================
   * 8.0 :: Mobile CSS
   * ===================================================================
   */
  
  
  @media screen and (max-width:1000px) {
    #banner .content-leftblock .content {
      text-align: center;
      width: 100%;
    }  
  }
  
  @media screen and (min-width:1024px) {
    .flip-card:hover .flip-card-inner {
      transform: rotateY(180deg);
    }
    #frameworks .flip-card-front .btn-sml,
    #process .flip-card-front .btn-sml, 
    .flip-button {
      display: none;
    }
  }

  

  
  @media screen and (max-width: 970px) {
    /* #custom-operational img,
    #frameworks img {
      height: auto;
    } */

  }
  

  
  @media screen and (max-width: 768px) {
    html {
      font-size: 12px;
    }

  }
  
  @media screen and (max-width: 640px) {
    #custom-operational img,
    #frameworks img {
      height: auto;
    }
    /* .flip-card {
      height: 300px!important;
    } */
  }
  
  @media screen and (max-width: 480px) {
    .desktop {display: none!important;}
    .mobile {display: inline-block;}
  }

  @media screen and (max-width: 378px) {
    #banner {
      padding: 20vh 0 15vh;
    }
    .desktop {display: none!important;}
    .mobile {display: inline-block;}
  }
  
  @media screen and (max-width: 320px) {
    .flip-card {
      height: 450px!important;
    }
    /* .flip-card-front {
      padding: 12vh 30px 10vh!important;
    } */

  }


    
  /* ===================================================================
   * 9.0 :: flip Card
   * ===================================================================
   */

   .flip-card {
    background-color: transparent;
    width: 100%;
    height: 450px;
    perspective: 1000px;
    cursor: pointer;
  }
  


  .flip-card-inner  {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  }
 
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  
  .flip-card-front {
    background-color: #eee;
    color: black;
    padding: 30px;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  
  .flip-card-back {
    background-color: #1994b2;
    color: white;
    transform: rotateY(180deg);
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .is-flipped {
    transform: rotateY(180deg);
  }