/*
* Custom css style
*/
/*fonts*/
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700,300);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,900);
/* main variable */
/* transition function */
/* rotate-transform function */
/* border-radius function */
/* aanimate function */
/* margin */
body {
  font-family: 'Source Sans Pro';
  overflow-x: hidden; }

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
  outline: 0; }

.hidden_scroll {
  opacity: 0;
  visibility: hidden; }

.visible_scroll {
  opacity: 1;
  visibility: visible; }

.clear-5 {
  height: 5px;
  clear: both;
  overflow: hidden; }

.clear-10 {
  height: 10px;
  clear: both;
  overflow: hidden; }

.clear-15 {
  height: 15px;
  clear: both;
  overflow: hidden; }

.clear-20 {
  height: 20px;
  clear: both;
  overflow: hidden; }

.clear-25 {
  height: 25px;
  clear: both;
  overflow: hidden; }

.clear-30 {
  height: 30px;
  clear: both;
  overflow: hidden; }

.desciption {
  padding: 5px;
  font-size: 10px;
  background-repeat: no-repeat; }

.interieur {
  padding: 3px 8px;
  background-color: #000;
  color: #fff;
  max-width: 250px;
  text-align: center;
  font-size: 14px !important;
  font-family: 'tahoma' !important; }

.sud {
  background-image: url(../images/tipsy-north.gif);
  background-position: center top; }

.nord {
  background-image: url(../images/tipsy-south.gif);
  background-position: center bottom; }

.est {
  background-image: url(../images/tipsy-east.gif);
  background-position: right center; }

.ouest {
  background-image: url(../images/tipsy-west.gif);
  background-position: left center; }

/* Loading */
.window-loading {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  text-align: center;
  line-height: 100%;
  z-index: 50; }
  .window-loading .sk-circle {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0px 0px -50px; }
  .window-loading .sk-circle .sk-child {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; }
  .window-loading .sk-circle .sk-child:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 16%;
    height: 16%;
    background-color: #28b9f6;
    border-radius: 100%;
    -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
    animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; }
  .window-loading .sk-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg); }
  .window-loading .sk-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg); }
  .window-loading .sk-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg); }
  .window-loading .sk-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg); }
  .window-loading .sk-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    transform: rotate(150deg); }
  .window-loading .sk-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg); }
  .window-loading .sk-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
    -ms-transform: rotate(210deg);
    transform: rotate(210deg); }
  .window-loading .sk-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg); }
  .window-loading .sk-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg); }
  .window-loading .sk-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
    -ms-transform: rotate(300deg);
    transform: rotate(300deg); }
  .window-loading .sk-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
    -ms-transform: rotate(330deg);
    transform: rotate(330deg); }
  .window-loading .sk-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s; }
  .window-loading .sk-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
    animation-delay: -1s; }
  .window-loading .sk-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s; }
  .window-loading .sk-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s; }
  .window-loading .sk-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s; }
  .window-loading .sk-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s; }
  .window-loading .sk-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s; }
  .window-loading .sk-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s; }
  .window-loading .sk-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s; }
  .window-loading .sk-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s; }
  .window-loading .sk-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s; }
@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1); } }
@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0); }
  40% {
    -webkit-transform: scale(1);
    transform: scale(1); } }
@keyframes animatedBackground {
  0% {
    background-position: center center; }
  100% {
    background-position: 3000px center; } }
@-moz-keyframes animatedBackground {
  0% {
    background-position: center center; }
  100% {
    background-position: 3000px center; } }
@-webkit-keyframes animatedBackground {
  0% {
    background-position: center center; }
  100% {
    background-position: 3000px center; } }
@-ms-keyframes animatedBackground {
  0% {
    background-position: center center; }
  100% {
    background-position: 3000px center; } }
@-o-keyframes animatedBackground {
  0% {
    background-position: center center; }
  100% {
    background-position: 3000px center; } }
#app {
  padding-top: 50px;
  opacity: 0;
  visibility: hidden; }
  #app .custom-nav {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);
    border: 0px;
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    z-index: 35;
    margin-bottom: 0px; }
    #app .custom-nav .navbar-header {
      width: 200px; }
      #app .custom-nav .navbar-header .navbar-brand {
        width: 200px;
        height: 50px;
        margin-right: 15px;
        position: relative;
        line-height: 40px;
        padding: 0px;
        font-weight: bold; }
        #app .custom-nav .navbar-header .navbar-brand i.fa {
          background: #17d573;
          width: 35px;
          height: 30px;
          display: block;
          float: left;
          color: #fff;
          text-align: center;
          line-height: 30px;
          margin: 10px 10px 0px 0px;
          border-radius: 4px 4px 4px 4px;
          -moz-border-radius: 4px 4px 4px 4px;
          -webkit-border-radius: 4px 4px 4px 4px;
          -o-border-radius: 4px 4px 4px 4px;
          -ms-border-radius: 4px 4px 4px 4px; }
        #app .custom-nav .navbar-header .navbar-brand span {
          letter-spacing: 1px; }
          #app .custom-nav .navbar-header .navbar-brand span:nth-of-type(1) {
            color: #0000F0; }
          #app .custom-nav .navbar-header .navbar-brand span:nth-of-type(2) {
            color: #e71d1d; }
        #app .custom-nav .navbar-header .navbar-brand em {
          position: absolute;
          font-size: 12px;
          font-weight: 400;
          font-style: normal;
          left: 46px;
          top: 17px;
          display: block;
          line-height: inherit;
          text-transform: uppercase; }
    #app .custom-nav ul li a {
      font-weight: 600;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out; }
      #app .custom-nav ul li a:hover {
        color: #43bef7; }
    #app .custom-nav ul.nav-pages li.active a {
      background: #f74343;
      color: #fff; }
  #app #Header {
    background-color: #17b8d5;
    background-image: url("../images/BG.png");
    background-repeat: repeat-x;
    background-position: center center;
    height: 350px;
    animation: animatedBackground 80s linear infinite;
    -moz-animation: animatedBackground 80s linear infinite;
    -webkit-animation: animatedBackground 80s linear infinite;
    -ms-animation: animatedBackground 80s linear infinite;
    -o-animation: animatedBackground 80s linear infinite; }
    #app #Header .intoegy-video {
      background: url("../images/screen.svg") no-repeat center center;
      background-size: 500px 300px;
      height: 300px;
      width: 500px;
      float: right;
      animation-delay: 1s;
      margin: 25px 0px 25px 30px; }
      #app #Header .intoegy-video video {
        background: #224143;
        width: 354px;
        height: 208px;
        position: relative;
        left: 75px;
        top: 42px; }
    #app #Header .left-content {
      margin: 40px 0px 0px 0px;
      color: #fff; }
      #app #Header .left-content h1 {
        font-weight: 900;
        font-size: 45px;
        margin: 0px;
        padding: 0px;
        text-transform: uppercase;
        letter-spacing: 2px;
        animation-delay: 1.4s;
        font-family: 'Oswald'; }
      #app #Header .left-content h3 {
        font-weight: 600;
        letter-spacing: 1px;
        margin: 15px 0px;
        padding: 0px;
        text-transform: uppercase;
        font-size: 24.3px;
        animation-delay: 1.8s;
        font-family: 'Oswald'; }
      #app #Header .left-content p {
        font-size: 18px;
        line-break: 25px;
        text-align: justify;
        margin: 0px;
        animation-delay: 2.2s; }
      #app #Header .left-content .social-icons {
        margin: 15px 0px 0px 0px;
        animation-delay: 2.6s; }
        #app #Header .left-content .social-icons a {
          border: 2px solid #fff;
          width: 40px;
          height: 40px;
          display: inline-block;
          text-align: center;
          line-height: 40px;
          font-size: 18px;
          color: #fff;
          margin-right: 10px;
          position: relative;
          transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -webkit-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          -ms-transition: all 0.2s ease-in-out;
          border-radius: 100% 100% 100% 100%;
          -moz-border-radius: 100% 100% 100% 100%;
          -webkit-border-radius: 100% 100% 100% 100%;
          -o-border-radius: 100% 100% 100% 100%;
          -ms-border-radius: 100% 100% 100% 100%; }
          #app #Header .left-content .social-icons a:hover {
            background: #fff;
            color: #333; }
    #app #Header.page-breadcrumbs {
      margin-bottom: 30px;
      height: 100px; }
      #app #Header.page-breadcrumbs h1 {
        font-weight: bold;
        color: #fff;
        text-transform: uppercase;
        margin-top: 30px; }
        #app #Header.page-breadcrumbs h1 small {
          color: #eee;
          position: relative;
          top: -3px; }
      #app #Header.page-breadcrumbs .social-icons {
        margin: 33px 0px 0px 0px;
        float: right;
        animation-delay: 2.6s; }
        #app #Header.page-breadcrumbs .social-icons a {
          border: 2px solid #fff;
          width: 40px;
          height: 40px;
          display: inline-block;
          text-align: center;
          line-height: 40px;
          font-size: 18px;
          color: #fff;
          margin-right: 10px;
          position: relative;
          transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -webkit-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          -ms-transition: all 0.2s ease-in-out;
          border-radius: 100% 100% 100% 100%;
          -moz-border-radius: 100% 100% 100% 100%;
          -webkit-border-radius: 100% 100% 100% 100%;
          -o-border-radius: 100% 100% 100% 100%;
          -ms-border-radius: 100% 100% 100% 100%; }
          #app #Header.page-breadcrumbs .social-icons a:hover {
            background: #fff;
            color: #333; }
  #app #Services {
    background: #fefefe;
    padding: 60px 0px;
    text-align: center; }
    #app #Services h2 {
      border: 2px solid #777;
      height: 60px;
      line-height: 55px;
      margin-bottom: 120px;
      padding: 0px;
      text-transform: uppercase;
      position: relative;
      font-weight: 900;
      letter-spacing: 1px;
      font-family: 'Oswald';
      animation-delay: 0.5s; }
      #app #Services h2:after {
        border: 2px solid #777;
        content: '';
        position: absolute;
        left: -10px;
        right: -10px;
        top: -10px;
        bottom: -10px; }
    #app #Services .col-md-4 {
      background: #fefefe; }
      #app #Services .col-md-4 i {
        background-color: #eee;
        width: 120px;
        height: 120px;
        line-height: 115px;
        display: block;
        margin: 0px auto;
        position: relative;
        border-radius: 100% 100% 100% 100%;
        -moz-border-radius: 100% 100% 100% 100%;
        -webkit-border-radius: 100% 100% 100% 100%;
        -o-border-radius: 100% 100% 100% 100%;
        -ms-border-radius: 100% 100% 100% 100%;
        transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out; }
        #app #Services .col-md-4 i:after {
          border: 2px solid transparent;
          content: '';
          position: absolute;
          left: 0px;
          right: 0px;
          top: 0px;
          bottom: 0px;
          border-radius: 100% 100% 100% 100%;
          -moz-border-radius: 100% 100% 100% 100%;
          -webkit-border-radius: 100% 100% 100% 100%;
          -o-border-radius: 100% 100% 100% 100%;
          -ms-border-radius: 100% 100% 100% 100%;
          transition: all 0.5s ease-in-out;
          -moz-transition: all 0.5s ease-in-out;
          -webkit-transition: all 0.5s ease-in-out;
          -o-transition: all 0.5s ease-in-out;
          -ms-transition: all 0.5s ease-in-out; }
        #app #Services .col-md-4 i.design {
          background-image: url("../images/icons/design.svg");
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 50%; }
        #app #Services .col-md-4 i.marketing {
          background-image: url("../images/icons/marketing.svg");
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 50%; }
        #app #Services .col-md-4 i.development {
          background-image: url("../images/icons/development.svg");
          background-repeat: no-repeat;
          background-position: center center;
          background-size: 50%; }
      #app #Services .col-md-4 h4 {
        margin: 15px 0px 0px 0px;
        font-size: 21px;
        font-weight: 900;
        letter-spacing: 1px;
        text-transform: uppercase;
        font-family: 'Oswald'; }
      #app #Services .col-md-4 p {
        text-align: justify;
        text-align-last: center;
        padding: 15px;
        margin: 0px; }
      #app #Services .col-md-4:nth-of-type(1) {
        animation-delay: 1s; }
      #app #Services .col-md-4:nth-of-type(2) {
        background: #fff;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15);
        padding-top: 40px;
        padding-bottom: 40px;
        margin-top: -40px;
        position: relative;
        z-index: 15;
        animation-delay: 1.6s; }
      #app #Services .col-md-4:nth-of-type(1) {
        animation-delay: 1s; }
      #app #Services .col-md-4:hover i {
        background-color: #ddd;
        transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        -ms-transform: rotate(360deg); }
        #app #Services .col-md-4:hover i:after {
          border-color: #ddd;
          left: -10px;
          right: -10px;
          top: -10px;
          bottom: -10px; }
  #app #Projects {
    padding: 60px 0px; }
    #app #Projects h2 {
      border: 2px solid #777;
      height: 60px;
      line-height: 55px;
      margin-bottom: 80px;
      padding: 0px;
      text-transform: uppercase;
      position: relative;
      font-weight: 900;
      letter-spacing: 1px;
      text-align: center;
      font-family: 'Oswald';
      animation-delay: 0.5s; }
      #app #Projects h2:after {
        border: 2px solid #777;
        content: '';
        position: absolute;
        left: -10px;
        right: -10px;
        top: -10px;
        bottom: -10px; }
    #app #Projects .cats-btns {
      margin: 0px 0px 40px 0px;
      text-align: center; }
      #app #Projects .cats-btns ul {
        margin: 0px;
        padding: 0px; }
        #app #Projects .cats-btns ul li {
          display: inline;
          margin: 0px 5px; }
          #app #Projects .cats-btns ul li a {
            width: auto;
            height: 40px;
            font-size: 16px;
            font-weight: 600;
            line-height: 40px;
            letter-spacing: 1px;
            padding: 0px 15px;
            text-transform: capitalize;
            color: #333;
            text-decoration: none;
            display: inline-block;
            cursor: pointer;
            border-radius: 2px 2px 2px 2px;
            -moz-border-radius: 2px 2px 2px 2px;
            -webkit-border-radius: 2px 2px 2px 2px;
            -o-border-radius: 2px 2px 2px 2px;
            -ms-border-radius: 2px 2px 2px 2px; }
          #app #Projects .cats-btns ul li.active a {
            background: #17b8d5;
            box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.35);
            color: #fff; }
    #app #Projects .mix {
      display: none; }
    #app #Projects .work {
      box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.25);
      height: 240px;
      margin-bottom: 30px;
      position: relative;
      overflow: hidden;
      border-radius: 2px 2px 2px 2px;
      -moz-border-radius: 2px 2px 2px 2px;
      -webkit-border-radius: 2px 2px 2px 2px;
      -o-border-radius: 2px 2px 2px 2px;
      -ms-border-radius: 2px 2px 2px 2px; }
      #app #Projects .work img {
        width: 100%;
        height: 240px;
        transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -webkit-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out; }
      #app #Projects .work h4 {
        background: transparent linear-gradient(to bottom, transparent 0px, rgba(0, 0, 0, 0.9) 100%) repeat scroll 0 0;
        position: absolute;
        bottom: 0px;
        left: 0px;
        z-index: 10;
        width: 100%;
        margin: 0px;
        text-align: center;
        padding: 30px;
        color: #fff;
        text-transform: uppercase;
        opacity: 0;
        transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -webkit-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out; }
      #app #Projects .work a.link {
        width: 100%;
        height: 240px;
        display: block;
        position: absolute;
        z-index: 15;
        top: 0px;
        left: 0px; }
      #app #Projects .work:hover img {
        transform: scale(1.05, 1.05);
        -webkit-transform: scale(1.05, 1.05);
        -moz-transform: scale(1.05, 1.05); }
      #app #Projects .work:hover h4 {
        opacity: 1; }
  #app #Price {
    background: url("../images/subscribeBg.jpg") no-repeat center center fixed;
    background-size: cover;
    padding: 60px 0px; }
    #app #Price h2 {
      border: 2px solid #fff;
      height: 60px;
      line-height: 55px;
      margin-bottom: 80px;
      padding: 0px;
      text-transform: uppercase;
      position: relative;
      font-weight: 900;
      color: #fff;
      letter-spacing: 1px;
      text-align: center;
      font-family: 'Oswald';
      animation-delay: 0.5s; }
      #app #Price h2:after {
        border: 2px solid #fff;
        content: '';
        position: absolute;
        left: -10px;
        right: -10px;
        top: -10px;
        bottom: -10px; }
    #app #Price .pricingTable {
      background: #fff;
      padding-bottom: 20px;
      overflow: hidden; }
      #app #Price .pricingTable .pricingTable-header {
        margin-bottom: 40px;
        position: relative;
        z-index: 1; }
        #app #Price .pricingTable .pricingTable-header:before {
          content: "";
          width: 100%;
          height: 150%;
          background: #606aa3;
          position: absolute;
          top: -90%;
          left: -20%;
          z-index: -1;
          transform: rotate(-42deg); }
        #app #Price .pricingTable .pricingTable-header:after {
          content: "";
          width: 100%;
          height: 190%;
          background: #727cb6;
          position: absolute;
          top: -76%;
          right: -16%;
          z-index: -2;
          transform: rotate(20deg); }
      #app #Price .pricingTable .price-value {
        display: inline-block;
        width: 50%;
        padding: 30px 0;
        margin: 0;
        font-size: 25px;
        font-weight: 400;
        font-family: 'Oswald';
        color: #fff;
        line-height: 20px;
        text-transform: uppercase;
        position: relative;
        top: 10px;
        left: 8px; }
      #app #Price .pricingTable .currency {
        font-size: 20px;
        position: relative;
        top: -10px;
        right: -3px; }
      #app #Price .pricingTable .title {
        display: inline-block;
        width: 50%;
        padding: 30px 0;
        float: left;
        font-size: 45px;
        font-weight: bold;
        color: #fff;
        line-height: 20px;
        position: relative;
        top: 10px;
        left: 20px; }
      #app #Price .pricingTable .pricing-content {
        list-style: none;
        padding: 0;
        margin: 60px 0 20px 0;
        text-align: left;
        clear: both; }
        #app #Price .pricingTable .pricing-content li {
          font-size: 16px;
          color: #777;
          padding: 0px 12px;
          line-height: 18px;
          transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -webkit-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          -ms-transition: all 0.2s ease-in-out; }
          #app #Price .pricingTable .pricing-content li i, #app #Price .pricingTable .pricing-content li span {
            float: right;
            margin: 0px;
            font-weight: bold;
            font-size: 18px; }
            #app #Price .pricingTable .pricing-content li i.fa-times, #app #Price .pricingTable .pricing-content li span.fa-times {
              color: #ff6565; }
            #app #Price .pricingTable .pricing-content li i.fa-check, #app #Price .pricingTable .pricing-content li span.fa-check {
              color: #20d44b; }
          #app #Price .pricingTable .pricing-content li:after {
            background: #ddd;
            height: 1px;
            display: block;
            margin: 8px 0px;
            content: ''; }
          #app #Price .pricingTable .pricing-content li:hover {
            color: #111; }
      #app #Price .pricingTable .pricingTable-signup {
        display: block;
        width: 80%;
        padding: 10px 0;
        text-align: center;
        border: 1px solid #606aa3;
        border-radius: 40px;
        margin: 0 auto;
        font-size: 18px;
        color: #606aa3;
        z-index: 1;
        text-transform: uppercase;
        overflow: hidden;
        position: relative; }
        #app #Price .pricingTable .pricingTable-signup:before {
          content: "";
          border-width: 0;
          border-style: solid;
          position: absolute;
          z-index: -1;
          transition: all 0.7s ease 0s;
          border-color: transparent transparent transparent #606aa3;
          bottom: 0;
          left: 0; }
        #app #Price .pricingTable .pricingTable-signup:after {
          content: "";
          border-width: 0;
          border-style: solid;
          position: absolute;
          z-index: -1;
          transition: all 0.7s ease 0s;
          border-color: transparent #606aa3 transparent transparent;
          top: 0;
          right: 0; }
        #app #Price .pricingTable .pricingTable-signup:hover:before {
          border-width: 150px 262px; }
        #app #Price .pricingTable .pricingTable-signup:hover:after {
          border-width: 150px 262px; }
    #app #Price .pricingTable.green .pricingTable-header:before {
      background: #18a288; }
    #app #Price .pricingTable.green .pricingTable-header:after {
      background: #1abc9c; }
    #app #Price .pricingTable.green .pricingTable-signup {
      border-color: #1abc9c;
      color: #1abc9c; }
      #app #Price .pricingTable.green .pricingTable-signup:before {
        border-color: transparent transparent transparent #18a288; }
      #app #Price .pricingTable.green .pricingTable-signup:after {
        border-color: transparent #18a288 transparent transparent; }
    #app #Price .pricingTable.yellow .pricingTable-header:before {
      background: #eec400; }
    #app #Price .pricingTable.yellow .pricingTable-header:after {
      background: #dcab16; }
    #app #Price .pricingTable.yellow .pricingTable-signup {
      border-color: #eaa511;
      color: #eaa511; }
      #app #Price .pricingTable.yellow .pricingTable-signup:before {
        border-color: transparent transparent transparent #eeb300; }
      #app #Price .pricingTable.yellow .pricingTable-signup:after {
        border-color: transparent #eeb300 transparent transparent; }
    #app #Price .pricingTable.orange .pricingTable-header:before {
      background: #ee6e00; }
    #app #Price .pricingTable.orange .pricingTable-header:after {
      background: #e67e22; }
    #app #Price .pricingTable.orange .pricingTable-signup {
      border-color: #e67e22;
      color: #e67e22; }
      #app #Price .pricingTable.orange .pricingTable-signup:before {
        border-color: transparent transparent transparent #ee6e00; }
      #app #Price .pricingTable.orange .pricingTable-signup:after {
        border-color: transparent #ee6e00 transparent transparent; }
    #app #Price .pricingTable.purple .pricingTable-header:before {
      background: #b14468; }
    #app #Price .pricingTable.purple .pricingTable-header:after {
      background: #cf4d78; }
    #app #Price .pricingTable.purple .pricingTable-signup {
      border-color: #cf4d78;
      color: #cf4d78; }
      #app #Price .pricingTable.purple .pricingTable-signup:before {
        border-color: transparent transparent transparent #b14468; }
      #app #Price .pricingTable.purple .pricingTable-signup:after {
        border-color: transparent #b14468 transparent transparent; }
    @media only screen and (max-width: 990px) {
      #app #Price .pricingTable {
        margin-bottom: 30px; } }
    @media only screen and (max-width: 767px) {
      #app #Price .pricingTable .pricingTable-header:before {
        height: 300%;
        top: -267%; }
      #app #Price .pricingTable .pricingTable-header:after {
        height: 270%;
        top: -106%; }
      #app #Price .pricingTable .title {
        text-align: center; } }
    @media only screen and (max-width: 480px) {
      #app #Price .pricingTable .pricingTable-header:after {
        top: -146%; } }
    @media only screen and (max-width: 479px) {
      #app #Price .pricingTable .pricingTable-header:before {
        height: 200%;
        top: -120%;
        left: -20%; } }
  #app #Contact {
    padding: 60px 0px; }
    #app #Contact h2 {
      border: 2px solid #777;
      height: 60px;
      line-height: 55px;
      margin-bottom: 80px;
      padding: 0px;
      text-transform: uppercase;
      position: relative;
      font-weight: 900;
      letter-spacing: 1px;
      text-align: center;
      font-family: 'Oswald';
      animation-delay: 0.5s; }
      #app #Contact h2:after {
        border: 2px solid #777;
        content: '';
        position: absolute;
        left: -10px;
        right: -10px;
        top: -10px;
        bottom: -10px; }
    #app #Contact #contactForm {
      margin: 0px; }
      #app #Contact #contactForm .btn i.fa-refresh {
        margin-left: 4px;
        display: none; }
    #app #Contact .gMap {
      margin: 0px;
      height: 329px;
      width: 100%;
      border: 6px solid #fff;
      box-shadow: 0px 0px 10px #00000025; }
  #app .table-subscribe {
    margin: 0px; }
    #app .table-subscribe thead th {
      font-size: 21px;
      font-family: 'Oswald';
      font-weight: 400;
      letter-spacing: 1px;
      text-transform: uppercase; }
    #app .table-subscribe label {
      background: #555;
      display: inline-block;
      overflow: hidden;
      font-size: 18px;
      font-weight: 400;
      color: #fff;
      padding: 3px 8px;
      margin: -8px 10px;
      border-radius: 3px 3px 3px 3px;
      -moz-border-radius: 3px 3px 3px 3px;
      -webkit-border-radius: 3px 3px 3px 3px;
      -o-border-radius: 3px 3px 3px 3px;
      -ms-border-radius: 3px 3px 3px 3px; }
      #app .table-subscribe label.standard {
        background: #e9c30b; }
      #app .table-subscribe label.business {
        background: #495ccb; }
      #app .table-subscribe label.premium {
        background: #e57e22; }
      #app .table-subscribe label.extract {
        background: #d72f96; }
    #app .table-subscribe ul li {
      font-size: 16px; }
  @media (min-width: 768px) {
    #app ul.nav-btns {
      margin-right: 0px; }
      #app ul.nav-btns > li {
        margin: 10px 0px 0px 10px; }
        #app ul.nav-btns > li > a {
          background: #eee;
          height: 30px;
          line-height: 30px;
          padding: 0px 15px;
          transition: all 0.2s ease-in-out;
          -moz-transition: all 0.2s ease-in-out;
          -webkit-transition: all 0.2s ease-in-out;
          -o-transition: all 0.2s ease-in-out;
          -ms-transition: all 0.2s ease-in-out;
          border-radius: 4px 4px 4px 4px;
          -moz-border-radius: 4px 4px 4px 4px;
          -webkit-border-radius: 4px 4px 4px 4px;
          -o-border-radius: 4px 4px 4px 4px;
          -ms-border-radius: 4px 4px 4px 4px; }
        #app ul.nav-btns > li.login > a {
          background: #17b8d5;
          color: #fff; }
        #app ul.nav-btns > li.register > a {
          background: #17d573;
          color: #fff; }
        #app ul.nav-btns > li > a:hover {
          background: #555;
          color: #fff; }
    #app .navbar > .container .navbar-brand, #app .navbar > .container-fluid .navbar-brand {
      margin-left: 0px; }
    #app .custom-nav .navbar-header {
      width: auto; } }
  #app .Footer {
    background: #212939;
    color: #fff;
    overflow: hidden;
    padding: 20px 0px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px; }
    #app .Footer.fixed-bottom {
      position: fixed;
      bottom: 0px;
      left: 0px;
      right: 0px; }

@media only screen and (max-width: 768px) {
  #app .custom-nav .navbar-header {
    width: auto; }

  #app .custom-nav .navbar-header .navbar-brand {
    margin-left: 10px; } }

/*# sourceMappingURL=custom-style.css.map */

/*css by ali*/
.mybtn, .mybtn:hover, .mybtn:focus{
  background: #17b8d5;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.35);
    color: #fff;
    max-width: 90px;
    width: 100%;
}
.mybtn:hover, .mybtn:focus{border-color:#0eb7d4;text-decoration: none }

.bread-crumb{
  padding: 10px 0;
}
.bread-crumb a{
  color: #555;
  padding: 5px;
  font-weight: bold;
}
/*start section single-page*/
.single-page{
  margin-bottom: 30px;
    padding: 70px 10px;
    min-height: 500px;
}
.single-page-img{
  width: 100%;
  height: 50%;
  margin-bottom: 20px;
}
.single-page-body p{line-height: 35px;}
.single-page-body .info{font-size: 12px;}
/*end section single-page*/

/*start section projects*/
.projects{
  min-height: 500px;
}
.projects h1{
  padding: 0 20px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 50px;
}
.projects .panel-img{
  width: 100%;
  height: 250px;
}
.projects .panel-img img{
  height: 100%;
    width: 100%;
}
.projects .panel-body{
  height: 150px;
  margin-bottom: 10px;
  overflow: hidden;
}
/*end section project*/

/*start section blogs*/
.blogs{
  min-height: 500px;
}
.blogs h1{
  padding: 0 20px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 50px;
}
.blogs hr{
  border-top: 1px solid #fff !important;
}
.blogs-body {
    position: relative;
    overflow: hidden;
}
.blogs .blogs-body h4{
    font-size: 26px;
    line-height: 1.3846;
    font-weight: bold;
}
.blogs .blogs-body h4 a{
  color: #333;
}
.blogs .blogs-body img{
  height: 500px;
  min-width: 600px;
  width: 100%;

  /* width: 100%;
  height: 240px; */
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
}
.blogs-body:hover img{
  transform: scale(1.05, 1.05);
  -webkit-transform: scale(1.05, 1.05);
  -moz-transform: scale(1.05, 1.05); 
}

.blog{min-height: 500px;margin-bottom: 20px;}
.blog .blog-img {
  margin-bottom: 15px;
  height: 400px;
  overflow: hidden;
  width: 100%;
}
.blog .blog-img img{
  height: 100%;
  width: 100%;
}
.blog .blog-body p {line-height: 30px;}
/*end section blogs*/

/*start mobile screen size small*/
@media only screen and (max-width: 480px) {  
    #app #Header{height: auto !important;padding-bottom: 20px;}
      #app #Header.page-breadcrumbs{height: auto !important;}
      #app .table-subscribe thead th{font-size: 18px !important;}
      #app .table-subscribe label{font-size: 15px !important;}
      .subscribe .btn-group-lg>.btn, .btn-lg{font-size: 15px !important;}
      #app #Services h2, #app #Projects h2, #app #Price h2, #app #Contact h2{margin-right: 20px;margin-left: 20px;}
      #app #Header .intoegy-video{width: 317px !important;}
      #app #Header .intoegy-video video{width: 317px !important;left: 0px !important;background: #01252e !important;}
}
/*end mobile screen size small*/