/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH				Imports
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
@import url(http://fonts.googleapis.com/css?family=Raleway:400,100,300,500,700);


/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH				Global
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
body{
	font-family: Raleway;
    position: relative;
}
.top{
    display: none;
    background: rgb(150, 150, 150);
    color: #fff;
    padding: 10px 14px;
    font-size: 22px;
    position: fixed;
    bottom: 45px;
    right: 35px;
    border-radius: 25px;
}
.show-top{
    display: block;
    z-index: 99;
    transition: 2s;
}
.top:hover{
    background: rgb(50, 50, 50);
    color: #fff;
}
.arrowcontainer{
    padding-top: 5%;
    padding-bottom: 5%;
    text-align: center;
}
.arrowcontainer i{
    font-size: 25px;
    color: #666;
    transition: 0.5s;
}
.arrowcontainer a:hover .special-icon, .arrowcontainer a:active .special-icon, .arrowcontainer a:focus .special-icon{
    background: #666;
    border: 0;
    transition: 0.5s;
}
.arrowcontainer a:hover i, .arrowcontainer a:active i, .arrowcontainer a:focus i{
    color: #fff;
    transition: 0.5s;
}
h1{
	font-weight: 100;
	font-size: 40px;
	text-transform: uppercase;
	color: #fff;
	letter-spacing: 10px;
}
 h2{
	font-weight: 100;
	font-size: 40px;
	text-transform: uppercase;
	color: #111;
}
ul{
    list-style: none;
}
#trigger-overlay:hover, a:focus, a:hover {
	color: inherit;
	text-decoration: none;
    transition: .8s;
}
p{
	font-size: 16px;
}
.wrapper{
	padding: 75px 0px;
}

.warpper-small{
    padding: 50px 0px;
}

.virticle-line{
    height: 40px;
    width: 1px;
    background: #888;
    margin: 15px auto 5px;
}
.circle{
    height: 15px;
    width: 15px;
    border: 1px solid #888;
    border-radius: 100%;
    margin: 0px auto 50px;
}

/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH              Preloader
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
#preloader {
    position:fixed;
    left:0;
    top:0;
    z-index:99999999999;
    width:100%;
    height:100%;
    overflow:visible;
    background: #fff url('../img/Intersection.gif') no-repeat center center;
    background-size: 100px 100px;
    }

/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH				Header
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
.header{
	height: 100vh;
	background: linear-gradient(180deg, rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 251, 112), rgb(252, 195, 0));
    padding: 45px 0px;
}
#logo {
	font-size: 80px;
	letter-spacing: 10px;
	font-weight: 100;
	color: white;
	display: inline-block;
	padding: 0px;
    float: left;
}
a#logo:hover{
	text-decoration: none;
}
.strong{
	font-weight: 400;
}
.header img{
	width: 100%;
}
.top-bar{
    width: 100%;
}
.fixed {
    position: fixed;
    background: rgb(87, 160, 255);
    top: 0;
    z-index: 99;
    transition: 1s;
}
.fixed #logo{
    font-size: 60px;
}
.fixed .nav-button{
    margin: 15px 0px;
}
.nav-button{
	max-width: 600px;
	margin: 35px 0px;
}
.nav-button button{
	border: none;
	outline: none;
	display: inline-block;
	color: #fff;
	border-radius: 0px;
	cursor: pointer;
	background-color: transparent;
	float: right;
	font-size: 42px;
	/*border: 1px solid white;*/
	padding: 0px 12px;
}
.nav-button button:hover{
	color: rgb(87, 160, 255);
	background-color: white;
}
.navbar-white {
      background-color: #fff !important;
      transition: background 0.5s ease-out;
      box-shadow: 0px 0px 10px #39c;
}
.starting img{
	margin-top: 20%;
}
.banner-text{
    margin-top: 25%;
}
.starting p{
	padding: 20px 0px;
	color: #111;
	line-height: 30px;
}
.btn.btn-download {
    padding: 10px;
    background: #FFC500;
    border-radius: 50px;
    width: 180px;
    text-align: left;
    color: #333333;
    border: 1px solid #FFC500;
    margin-right: 10px;
}
.btn.btn-download:hover{
    color: #111;
    background-color: transparent;
    border: 1px solid #111;
}

.btn.btn-download i {
    width: 20px;
    font-size: 36px;
    margin-left: 10px;
    margin-right: 25px;
}

.btn.btn-download strong {
    font-weight: 800;
}
/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH              Video
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
#video{
    text-align: center;
    color: #333;
}
#video h2{
    color: #333;
}
#video p{
    margin-top: 40px;
}
.video{
    margin: 0 auto;
}
/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH              Bigfeature
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
#bigfeatures li i{
    color: #999;
    font-size: 24px;
    text-align: center;
    height: 50px;
    width: 50px;
    border: 1px solid #999;
    border-radius: 100%;
    padding-top: 12px;
}
.item-list-right li {
    padding:0 100px 20px 0;
    position:relative;
    text-align:right;
}
.item-list-right li img {
    width: :70px;
    height: 70px;
    position:absolute;
    right:0;
    top:0;
}
.item-list-left li {
    padding:0 0px 20px 100px;
    position:relative;
    text-align:left;
}
.item-list-left li img{
    width: :70px;
    height: 70px;
    position:absolute;
    left:0;
    top:0;
}
.item-list-right h3,.item-list-left h3 {
    margin:0 0 25px 0;
    font-weight:300;
    padding-top: 20px;
}
.item-list-left.item-list-big li {
    padding:0 0px 20px 100px;
}
.item-list-big li img {
    width: :70px;
    height: 70px;
}
.item-list-right li:last-child,.item-list-left li:last-child {
    padding-bottom:0;
}
#bigfeatures .screen {
    width: 400px;
    max-width:110%;
    height:auto;
}
#bigfeatures i {
    color:#41A1E1;
}
.feature-tf {
    margin: 0 0 0 10%;
}
.feature-tf img{
    width: 70px;
    height: 70px;
    margin-top: 30px;
}
.feature-tf h3{
    font-weight:300;
}
.align-right{
    float: right;
    margin:0 10px;
}

.top-nav a, .top-nav a:visited{
    color: #000000;
    padding: 0 10px;
}

.top-nav a:hover, .top-nav a:active, .top-nav a.active-p{
    color: #FFC500;
}

@media (max-width:1200px) and (min-width:767px) {
    #bigfeatures i {
        display:none;
    }
    .item-list-right.item-list-big li,.item-list-left.item-list-big li {
        padding:0 0px 40px 0px;
    }
    .item-list-right h3{
        margin: 0 80px 25px 0;
    } 
    .item-list-left h3{
        margin: 0 0 25px 80px;
    }
}
@media (max-width:992px) and (min-width:767px) {
    .item-list-right.item-list-big li,.item-list-left.item-list-big li {
        font-size:14px;
    }
    .item-list-right h3,.item-list-left h3 {
        font-size:22px;
        margin:0 0 25px;

    }
    .item-list-right li:last-child,.item-list-left li:last-child {
        padding-bottom:0;
    }
    .item-list-left.item-list-big li, .item-list-right.item-list-big li {
        padding:40px 0 0!important;
    }
    .item-list-big li img {
        width: :50px !important;
        height: 50px !important;
    }
    #bigfeatures p{
        font-size: 14px;
    }
}
@media all and (max-width:767px) {
    .item-list-right li i {
        right:auto;
        left:0;
    }
    .item-list-left li:last-child {
        margin-bottom:60px;
    }
    .item-list-left.item-list-big li, .item-list-right.item-list-big li {
    padding:0 0px 20px 0px !important;
    margin: 0;
    }
    .item-list-big li img {
        width: :50px !important;
        height: 50px !important;
    }
    h3 img{
        height: 55px !important;
    }
}
.animation-box {
    display:inline-block;
    position:relative;
}
@-webkit-keyframes highlight-left {
    0% {
        opacity:0;
        top:100%;
        -webkit-transform:scale(0);
    }
    70% {
        opacity:1;
        -webkit-transform:scale(1);
    }
    100% {
        opacity:0;
        top:0;
        -webkit-transform:scale(0);
    }
}
@keyframes highlight-left {
    0% {
        opacity:0;
        top:100%;
        transform:scale(0);
    }
    70% {
        opacity:1;
        transform:scale(1);
    }
    100% {
        opacity:0;
        top:0;
        transform:scale(0);
    }
}
.highlight-left {
    position:absolute;
    animation:highlight-left 2s ease-in 0s infinite;
    -webkit-animation:highlight-left 2s ease-in 0s infinite;
    left:-5px;
    margin-top:-100px;
}
@-webkit-keyframes highlight-right {
    0% {
        opacity:0;
        top:0;
        -webkit-transform:scale(0)
    }
    70% {
        opacity:1;
        -webkit-transform:scale(1)
    }
    100% {
        opacity:0;
        top:100%;
        -webkit-transform:scale(0)
    }
}
@keyframes highlight-right {
    0% {
        opacity:0;
        top:0;
        transform:scale(0)
    }
    70% {
        opacity:1;
        transform:scale(1)
    }
    100% {
        opacity:0;
        top:100%;
        transform:scale(0)
    }
}
.highlight-right {
    position:absolute;
    animation:highlight-right 2s ease-in 0s infinite;
    -webkit-animation:highlight-right 2s ease-in 0s infinite;
    right:-5px;
    margin-top: -100px;
}

/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH              Speciality
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/
#speciality{
    background: #eee;
    text-align: center;
    color: #333;
}
#speciality h2{
    color: #333;
}
#speciality h3{
    text-transform: none;
    margin-bottom: 30px;
}
#speciality p{
    padding: 10px 5%;
}
.special-icon{
    color: #888;
    border: 1px solid #888;
    border-radius: 100%;
    width: 50px;
    height: 50px;
    padding-top: 15px;
    display: inline-block;
    margin: 15px 0px;
}
#speciality .container .row .col-sm-4:nth-child(2){
    border-right: 1px solid #888;
    border-left: 1px solid #888;

}

/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH              Footer Section
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/

#footer {
    /*background: linear-gradient(180deg, rgb(0, 190, 111), rgb(87, 160, 255));*/
    background-color: #FFC500;
    color:white;
    padding:40px 0;
}
#footer .credits a {
    color:#fff;
    text-decoration:underline;
}
.credits{
   	padding-bottom: 5px;
}
ul.social-icons{
  padding: 0;
}
ul.social-icons li {
    display:inline-block;
    margin:5px;
    font-size:35px;
}
.copyright {
    margin-top:40px;
    border-top:1px solid rgba(255,255,255,0.31);
    padding-top:40px;
}
ul.social-icons i {
    color:white;
    border-radius:100%;
    display:block;
    width: 50px;
    height: 50px;
    padding: 9px;
}
ul.social-icons li a {
    display:block;
}
.footer-logo h1 {
    color: white;
}
.social-icons ul li a i{
	color: white;
	border-color: white;
}
.facebook a:hover i {
    color:#fff;
    background-color:#3B5998;
}
.twitter a:hover i {
    color:#fff;
    background-color: #2A80BA;
}
.linkedin a:hover i {
    color:#fff;
    background-color:#007bb6;
}
.googleplus a:hover i {
    color:#fff;
    background-color:#dd4b39;
}
.github a:hover i {
    color:#fff;
    background-color: #444;
}
.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
    border-radius: 0;
    opacity: 0.75;
}



/*HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH
HH 				Media Quiry
HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH*/


@media screen and (max-height: 30.5em) {
	.overlay nav {
		height: 70%;
		font-size: 34px;
	}
	.overlay ul li {
		min-height: 34px;
	}
}
@media (max-width: 966px){
    .header{
        height: 100%;
        text-align: center;
    }
    .header img{
        width: 70%;
    }
    .starting img {
        margin-top: 10%;
    }
    .banner-text {
        margin-top: 5%;
    }
    .img-hover{
        left: 0;
        right: 0;
    }
    #gallery h2{
        display: block;
        color: black;
        text-align: center;
    }
    #gallery .virticle-line, #gallery .circle{
        display: block;
    }
    #team .icon-p{
        left: 231px;
    }
    /*#speciality .container .row .col-sm-4:nth-child(2){
        border-right: 2px solid #888;
    }*/
    #contact i{
        color: #9d9d9d;
        border-color: #9d9d9d;
    }
    #contact .col-sm-6:hover i{
        background-color: #39c;
        color: #fff;
        border-color: #fff;
    }
    h3{
        font-weight: 500 !important;
    }
    #bigfeatures li i{
        display: none;
    }
    .form .message{
        width: 96%;
    }
}
@media (max-width: 480px){
    h2{
        font-size: 35px;
    }
    .wrapper{
        padding: 35px 0px;
    }
    .header{
		text-align: center;
        padding: 10px 0px;
	}
    .banner-text {
        margin-top: 50px;
    }
    .btn.btn-download{
        margin-right: 5px;
        width: 133px;
        margin-bottom: 30px;
    }
    .btn.btn-download i {
        font-size: 36px;
        margin-right: 16px;
        margin-left: 0px;
    }
	.overlay .overlay-close {
		right: 45px;
	  	top: 30px;
	}
    .nav-button button{
        font-size: 36px;
        margin-top: -20px;
    }
	#logo{
		font-size: 56px;
		text-align: left;
	}
	.btn-download{
		margin: 5px 0px;
	}
    ul.pricing-table>li {
        margin: 10px -20px;
        width: 100%;
    }
    #speciality .container .row .col-sm-4:nth-child(2){
        border: 0px;
    }
    .item-list-right.item-list-big li, .item-list-left.item-list-big li{
        padding: 0 0 60px 0;
        margin: 0px;
        text-align: left;
    }
    li.li i {
        display: none;
    }
    #features img{
        display: none;
    }
    .features-list, .features-list-left {
        padding: 10px;
    }
    .features-list ul.right li {
        padding: 10px 5px;
    }
    .features-list-left{
        text-align: left;
    }
    .features-list-left ul.left li {
          padding-bottom: 10px;
          margin-left: -30px;
          text-align: left;
    }
    .features-list ul.right{
        padding: 0px;
        margin: 0px;
    }
    .features-list-left ul.left{
        padding: 0px;
        margin-left: 40px;
    }
    .owl-theme .owl-controls .owl-page span{
        height: 70px;
        width: 70px;
    }
    .owl-theme .owl-controls .owl-page:nth-child(1){
        background-size: 70px 70px;
    }
    .owl-theme .owl-controls .owl-page:nth-child(2){
        background-size: 70px 70px;
    }
    .owl-theme .owl-controls .owl-page:nth-child(3){
        background-size: 70px 70px;
    }
    ul.social-icons li{
        margin: 0px;
    }
    .form .message{
        width: 91%;
    }
    .item-list-left li img{
        right: 0;
        left: auto;
    }
}
@media (max-width: 320px){
    .overlay nav ul{
        margin-left: -20px;
    }
    .overlay .overlay-close {
        right: 50px;
    }
    .item-list-left li img{
        right: 0;
        left: auto;
    }
}