/*=======================
Name: Optiologic
Author: Optiologic Dev
Version: 1.00
Style: Clean
Color : #e93c1a
=======================

/*--------------------------
-------- MIN 1920px --------
--------------------------*/
@media only screen and (min-width: 770px) {
  #home { height: auto; }     
  .home-bg { background-size: 100%; }
} 

@media only screen and (min-width: 1920px){
}
/*--------------------------
-------- MAX 1170px --------
--------------------------*/
@media only screen and (max-width: 1170px){
	#navigation{
   padding:0 20px;
}
}
/*--------------------------
-------- MAX 1024px --------
--------------------------*/
@media only screen and (max-width: 1024px){

}

/*--------------------------
--------- MIN 970px --------
--------------------------*/
@media only screen and (min-width: 970px){

	#navigation .nav-menu{
   display:block !important;}
 }
/*--------------------------
--------- MAX 970px --------
--------------------------*/
@media only screen and (max-width: 970px){

#navigation a.mini-nav-button{
 display: block;
}
/* Mobile Nav Menu */
.not-visible-nav{
  opacity:0;
}
#navigation .nav-menu{
 display:none;
 height: auto;
 top:100%;
 left:0;
 width:100%;
 position: absolute;
 background:rgba(255, 255, 255, 0.97) !important;
 box-shadow: 0px 1px 4px rgba(0,0,0, 0.1);}
#navigation ul.nav li{
 display:inline-block;
 height:auto;
 width:100%;
}
#navigation ul.nav li a{
 display:block;
 height: auto;
 width:100%;
 padding:0 20px;
 color: #555555;
 border-top:1px solid #fff;
 line-height: 40px;
}
#navigation ul.nav li a:hover,
#navigation ul.nav li.active a{
 border-top:1px solid #fff;
}
}
/*--------------------------
--------- MAX 800px --------
--------------------------*/
@media only screen and (max-width: 800px){

#navigation{
   padding:0 20px;
 }
.nav-logo {
   top: 0%;
 }

}
/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
  header {
    position: relative;
  }
  .menu .navbar-default .navbar-nav > li > a {
    padding: 5px 7px;
  }
  #banner .block .download-btn li {
    width: 100%;
    margin-bottom: 5px;
  }
  #banner .block .download-btn li a {
    display: block;
  }
  #banner {
    padding: 40px 0;
  }
  #banner h1 {
    font-size: 40px;
  }
  #banner .block img {
    padding-top: 80px;
  }
  #banner .block > p {
    margin-bottom: 20px;
  }
  #service .block {
    margin-bottom: 40px;
  }
  #service .service-wrapper {
    padding: 80px 0;
  }
  #feature {
    padding: 30px 0;
  }
  #feature .title {
    margin-top: 0;
    margin-bottom: 30px;
  }
  #feature .block img {
    padding-top: 40px;
  }
  #feature .feature-item {
    margin-top: 10px;
  }
  #utility .block h2 {
    padding-top: 15px;
  }
  #utility-2 .block {
    padding-top: 0;
  }
  #subscribe .form-inline .form-group input {
    width: 100%;
  }
  footer .footer-logo {
    display: inline-block;
  }
  #home h3 {
    font-size: 42px;
  }
  .home-desc{
    font-size: 18px;
  }
  
}
/*		Mobile Layout: 320px.
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {
  header {
    position: relative;
  }
  .footer-logo img {
    width: 100px;
  }
  #subscribe .form-inline .form-group input {
    width: 290px;
  }
  #feature {
    padding: 30px 0;
  }
  #banner .block .download-btn li {
    width: 100%;
    margin-bottom: 5px;
  }
  #banner .block .download-btn li a {
    display: block;
  }
  #banner {
    padding: 40px 0;
  }
  #banner h1 {
    font-size: 40px;
  }
  #service .service-wrapper {
    padding: 60px 0;
  }
  #service .block {
    margin-bottom: 20px;
  }
  #utility .block h2,
  #utility-2 .block h2,
  #feature .title {
    text-align: center;
  }
  #subscribe .form-inline .form-group input {
    width: 100%;
  }
  footer .footer-logo {
    display: inline-block;
  }
  #home h3 {
    font-size: 42px;
  }
  .home-desc{
    font-size: 20px;
  }
}

@media only screen and (max-width: 970px){

.nav-logo{
    float: left;
    position: relative;
    top:0%;
    -webkit-transform: translateY(-53%);
    -moz-transform: translateY(-53%);
    transform: translateY(-53%);
    width: 150px;
    height: 100px;
    display: block;  }
}

@media (max-width: 767px) {

.timeline:before {

      position: absolute;
      content: " ";
      width: 3px;
      left: 50%;
      margin-left: -1.5px;
    }
ul.timeline:before {
      left: 40px;
    }

ul.timeline > li > .timeline-panel {
      width: calc(100% - 90px);
      width: -moz-calc(100% - 90px);
      width: -webkit-calc(100% - 90px);
    }
ul.timeline > li > .timeline-panel-1 {
      width: calc(100% - 90px);
      width: -moz-calc(100% - 90px);
      width: -webkit-calc(100% - 90px);
    }

.timeline > li > .timeline-panel-1 {
      width: 46%;
      float: left;
      border-radius: 2px;
      padding: 20px;
      position: relative;
      top: 51px;
      right: -5px;
    }

ul.timeline > li > .timeline-badge-1 {
      left: -7px;
      margin-left: 0;
      top: 16px;
    }
ul.timeline > li > .timeline-badge-2 {
      left: -7px;
      margin-left: 0;
      top: 40px;
    }
ul.timeline > li > .timeline-badge-3 {
      left: -7px;
      margin-left: 0;
      top: 55px;
    }

ul.timeline > li > .timeline-panel {
      float: right;
    }

ul.timeline > li > .timeline-panel:before {
      border-left-width: 0;
      border-right-width: 15px;
      left: -15px;
      right: auto;
    }

ul.timeline > li > .timeline-panel:after {
      border-left-width: 0;
      border-right-width: 14px;
      left: -14px;
      right: auto;
    }

ul.timeline > li > .timeline-panel-1 {
      float: right;
    }

ul.timeline > li > .timeline-panel-1:before {
      border-left-width: 0;
      border-right-width: 15px;
      left: -15px;
      right: auto;
    }

ul.timeline > li > .timeline-panel-1:after {
      border-left-width: 0;
      border-right-width: 14px;
      left: -14px;
      right: auto;
    }
.timeline-body > p,
.timeline-body > ul {
     text-align: left;
   }
.timeline-title {
    text-align: left;
  }


}
@media (max-width: 991px) {



.timeline > li > .timeline-panel {
    width: 46%;
    float: left;
    border-radius: 2px;
    padding: 20px;
    position: relative;
    right: -5px;
}
.timeline > li > .timeline-panel-1 {
    width: 46%;
    float: left;
    border-radius: 2px;
    padding: 20px;
    position: relative;
    top: 92px;
    right: -4px;    
}
.timeline:before {
  top:37px;
  bottom:360px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
}
@media (max-width: 1200px) {
 .timeline:before {
  top:37px;
  bottom:95px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
  }
  @media (max-width: 1000px) {
.timeline:before {
  top:37px;
  bottom:95px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
  }
  @media (max-width: 991px) {
    iframe{
      margin-top: 20px;
    }
    
  }
  @media (max-width: 980px) {

.timeline:before {
  top:37px;
  bottom:115px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
  }

  }
@media (max-width: 767px) {
.timeline:before {
  top:37px;
  bottom:95px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
#campaign-page h3 {
  font-size: 35px;
  padding-top: 16%;
}
.camp-desc{
  font-size: 18px;
}
  }
@media (max-width: 590px) {
.timeline:before {
  top:37px;
  bottom:95px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
}
@media (max-width: 576px) {
.timeline:before {
  top:37px;
  bottom:120px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
}
@media (max-width: 530px) {
.timeline:before {
  top:37px;
  bottom:120px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
}
@media (max-width: 519px) {
.timeline:before {
  top:37px;
  bottom:140px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
}
@media (max-width: 460px) {
.timeline:before {
  top:37px;
  bottom:140px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
}
@media (max-width: 455px) {
.timeline:before {
  top:37px;
  bottom:180px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
}
@media (max-width: 447px) {
.timeline:before {
  top:37px;
  bottom:200px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
}
@media (max-width: 410px) {
.timeline:before {
  top:37px;
  bottom:230px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
#campaign-page h3 {
  font-size: 25px;
  padding-top: 25%;
}
}
@media (max-width: 390px) {
.timeline:before {
  top:37px;
  bottom:240px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
}
@media (max-width: 370px) {
.timeline:before {
  top:37px;
  bottom:260px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
}
@media (max-width: 340px) {
.timeline:before {
  top:37px;
  bottom:280px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
}
@media (max-width: 326px) {
.timeline:before {
  top:37px;
  bottom:300px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
}
@media (max-width: 315px) {
.timeline:before {
  top:37px;
  bottom:330px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
}
@media (max-width: 306px) {
.timeline:before {
  top:37px;
  bottom:350px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
}
@media (max-width: 293px) {
.timeline:before {
  top:37px;
  bottom:370px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
}
@media (max-width: 284px) {
.timeline:before {
  top:37px;
  bottom:400px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
}
@media (max-width: 277px) {
.timeline:before {
  top:37px;
  bottom:460px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
}
@media (max-width: 267px) {
.timeline:before {
  top:37px;
  bottom:490px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
}
@media (max-width: 260px) {
.timeline:before {
  top:37px;
  bottom:520px;
  position: absolute;
  content: " ";
  width: 3px;
  background:url('../img/misc/timeline.png')repeat-y;
  left: 50%;
  margin-left: -1.5px;
}
}




/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */
/*	Retina media query.
	Overrides styles for devices with a 
	device-pixel-ratio of 2+, such as iPhone 4.
  -----------------------------------------------    */