/*
Theme Name: Mavigen Digital Agency
Version: 3.0
Description: Designed by <a href="http://www.mavigen.com">Mavigen Digital Agency</a>
Author: Mavigen Digital Agency
Author URI: http://www.mavigen.com
*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&subset=latin-ext');

*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html,body{height:100%}

body {font-family: 'Open Sans', sans-serif;position:relative;margin:0;overflow-x:hidden;}
.clearfix { clear:both; }

a {font-family: 'Open Sans', sans-serif; text-decoration:none; }
a:hover,
a:focus{ text-decoration:none!important; }

h1,
h2,
h3,
h4,
h5,
h6 {font-family: 'Open Sans', sans-serif;}

.pTop150 {padding-top:150px}
.pBot150 {padding-bottom:150px}
.pLeft150 {padding-left:150px}
.pRight150 {padding-right:150px}

.pTop174 {padding-top:174px}
.pBot174 {padding-bottom:174px}
.pLeft174 {padding-left:174px}
.pRight174 {padding-right:174px}

.gradient-1 {
  background: rgb(69,45,88);
  background: linear-gradient(160deg, #290B36 0%, #043453 100%);
}
.gradient-2 {
  background: linear-gradient(-179deg, #E8F0FA 0%, #D1D7E0 98%);
}
.gradient-3 {
  background: linear-gradient(-320deg,  rgb(60, 33, 89) 0%,rgb(30, 93, 118) 100%);
}
.gradient-4 {
  background: linear-gradient(88deg, #3C2159 0%, #648FBD 100%);
}
.gradient-5 {
  background: linear-gradient(-88deg, #3C2159 0%, #648FBD 100%);
}
.gradient-6 {
  background: linear-gradient(180deg, rgb(251, 234, 234) 0%, rgb(255, 255, 255) 50%);
}
.gradient-7 {
  background: linear-gradient(-180deg, #d0d7e0 0%, #FFF 98%);
}
.gradient-8 {
  background: linear-gradient(-320deg,  #0079CC 0%,#222222 100%);
}
hr {
    max-width: 50px;
    border-width: 3px;
    border-color: #0079CC;
}
.btn-primary,.btn-primary:hover {
    color: #fff;
    background-color: #0079CC!important;
}
#mainNav .navbar-brand{color:#0079CC !important;}
#mainNav .navbar-brand:focus, #mainNav .navbar-brand:hover{color:#0079CC !important; }
#mainNav .navbar-nav>li.nav-item>a.nav-link, #mainNav .navbar-nav>li.nav-item>a.nav-link:focus {color: #0079CC;}
#mainNav .navbar-nav>li.nav-item>a.nav-link.active, #mainNav .navbar-nav>li.nav-item>a.nav-link:focus.active {color: #0079CC!important;background-color: transparent;}
.bg-primary{background: #0079CC !important;}
#wrapper{
  position: relative;
  width:100%;
  min-height:55vw;
  overflow: hidden;
}
.skewed{padding: 0!important; margin: 0!important;}
.layer{
  position: absolute;
  width:100vw;
  min-height: 55vw;
  overflow: hidden;
}

.layer .content-wrap{
  position: absolute;
  width:100vw;
  min-height: 55vw;
}

.layer .content-body{
  width:20%;
  position:absolute;
  top:50%;
  text-align: center;
  transform:translateY(-50%);
  color:#fff;
}

.layer img{
  position: absolute;
  width:45%;
  top:50%;
  left: 50%;
  transform:translate(-50%, -50%);
}

.layer h1{
  font-size:2em;
}

.bottom{
  background:#222;
  z-index:1;
}

.bottom .content-body{
  right:5%;
}

.bottom h1{
  color:#0079CC;
}

.top{
  background:#eee;
  color:#222;
  z-index:2;
  width:50vw;
}

.top .content-body{
  left: 5%;
  color:#222;
}

.handle{
  position: absolute;
  height: 100%;
  display: block;
  background-color: #0079CC;
  width:5px;
  top:0;
  left: 50%;
  z-index:3;
}

.skewed .handle{
  top:50%;
  transform:rotate(30deg) translateY(-50%);
  height: 200%;
  transform-origin:top;
}

.skewed .top{
  transform: skew(-30deg);
  margin-left:-1000px;
  width: calc(50vw + 1000px);
}

.skewed .top .content-wrap{
  transform: skew(30deg);
  margin-left:1000px;
}
@media(max-width:1024px){
  .ss-left {
  left: -145% !important;
  right: auto;
  }
  footer span.copyright {
    font-size: 74% !important;}
}
@media(max-width:768px){
  body{
    font-size:75%;
  }  
  .ss-left {
  left: -230% !important;
  right: auto;
  }  
  footer span.copyright {
    font-size: 18px !important;}
  .mavigen{ float: none !important; }
  #wrapper {
      top: 57px !important;
  }
}


#surface-section {
  height: 720px;
}

.feature-section {
  min-height: 660px;
}

.feature-section-img {
  width: 1072px;
}

.screenshot {
  position: relative;
  width: 960px;
  height: 610px;
  display: block;
  right: 0%;
}

.screenshot > img {
  max-width: none;
}

.feature {
  margin-top: 25%;
}

.ss-right {
  right: 0%;
  left: auto;
}

.ss-left {
  left: -115%;
  right: auto;
}

.wow {
  visibility: hidden;
}

.wow.animated {
  visibility: visible;
}

section#contact {
 background-color:#212529;
 background-image:url(../img/map-image.png);
 background-repeat:no-repeat;
 background-position:center
}
section#contact .section-heading {
 color:#fff
}
section#contact .form-group {
 margin-bottom: 25px;
}
section#contact .form-group input,section#contact .form-group textarea {
 padding: 9px;
}
section#contact .form-group input.form-control {
 height:auto
}
section#contact .form-group textarea.form-control {
 height: 250px;
}
section#contact .form-control:focus {
 border-color:#fed136;
 -webkit-box-shadow:none;
 box-shadow:none
}
section#contact ::-webkit-input-placeholder {
 font-weight:700;
 color:#ced4da;
 font-family:Montserrat,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'
}
section#contact :-moz-placeholder {
 font-weight:700;
 color:#ced4da;
 font-family:Montserrat,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'
}
section#contact ::-moz-placeholder {
 font-weight:700;
 color:#ced4da;
 font-family:Montserrat,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'
}
section#contact :-ms-input-placeholder {
 font-weight:700;
 color:#ced4da;
 font-family:Montserrat,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'
}
footer {
 padding:25px 0;
 text-align:center
}
footer span.copyright {
 font-size:88%;
 line-height:52px;
 text-transform:none;
 font-family:Montserrat,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'
}
footer ul.quicklinks {
 font-size:90%;
 line-height:40px;
 margin-bottom:0;
 text-transform:none;
 font-family:Montserrat,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji'
}
ul.social-buttons {
 margin-bottom:0
}
ul.social-buttons li a {
 font-size:20px;
 line-height:50px;
 display:block;
 width:50px;
 height:50px;
 -webkit-transition:all .3s;
 transition:all .3s;
 color:#fff;
 border-radius:100%;
 outline:0;
 background-color:#212529
}
ul.social-buttons li a:active,ul.social-buttons li a:focus,ul.social-buttons li a:hover {
 background-color:#0079CC
}
.mavigen{ float: right; line-height: 52px; display: block; }