/*

  Template Name: Altron - Multi-Purpose Landing Page Template

  Theme URL: http://themeforest.net/user/DSA79/

  Description: Altron - Multi-Purpose Landing Page Template

  Author: DSAThemes

  Author URL: http://themeforest.net/user/DSA79

  Version: 1.0.0

  Website: www.dsathemes.com

  Tags: Landing Page, Multipurpose Landing page, Html5, Css, Bootstrap, Javascript, responsive, creative template, html5 template, one page, business, corporate, mobile app, project

*/







/* ------------------------------------------ */

/*             TABLE OF CONTENTS

/* ------------------------------------------ */



/*   01 - Welcome				   */

/*   02 - About				   	   */

/*   03 - Content			   	   */

/*   04 - Skills			   	   */

/*   05 - Portfolio        		   */

/*   06 - Pricing				   */

/*   07 - Statistic Banner	   	   */

/*   08 - Services         		   */

/*   09 - Testimonials		 	   */

/*   10 - Clients		 	  	   */

/*   11 - Team					   */

/*   12 - Call To Action           */

/*   13 - Blog		 	  	   	   */

/*   14 - Contacts		 	  	   */

/*   15 - Footer		 	  	   */







/* ==========================================================================

   01. WELCOME

   ========================================================================== */  



.welcome-quote h3 {

	font-weight: 900;

}



.slogan-txt h4.h4-lg {

	color: #444;

	font-size: 22px;

	line-height: 30px;

	font-weight: 700;

	

}







/* ==========================================================================

   02. ABOUT

   ========================================================================== */  



/*------------------------------------------*/

/*	 About Box Icon

/*------------------------------------------*/ 



.abox-icon {

    text-align: center;

    float: left;

}



.abox-icon span {	

	width: 45px;

    height: 45px;

	font-size: 45px;

	line-height: 45px!important;

	margin-top: 5px;

}



/*------------------------------------------*/

/*	 About Box Text

/*------------------------------------------*/ 



.abox-txt {

    overflow: hidden;

    padding-left: 20px;

} 



.abox-txt h4 {

    margin-bottom: 8px;

}







/* ==========================================================================

   03. CONTENT

   ========================================================================== */  



#content-1, #content-2 {

	position: relative;

}



/*------------------------------------------*/

/*	Content Box Icon

/*------------------------------------------*/ 



.cbox-1-icon {

    text-align: center;

    float: left;

}



.cbox-1-icon i {	

	width: 20px;

    height: 20px;

	color: #00c1f0;

	font-size: 18px;

	line-height: 20px!important;

	margin-top: 1px;

}



.cbox-2 span {

	color: #00c1f0;

	font-size: 32px;

	line-height: 32px!important;

	float: left;

	margin-right: 15px;	

}



/*------------------------------------------*/

/*	 Content Box Text

/*------------------------------------------*/ 



.cbox-1-txt {

    overflow: hidden;

    padding-left: 10px;

}



.cbox-2 h4 {

	line-height: 32px!important;

	margin-bottom: 10px;

} 



.cbox-3 p {

	font-size: 16px;

	line-height: 26px;

}



/*------------------------------------------*/

/*	Content Image

/*------------------------------------------*/  

  

.content-1-img { 

	background-image: url(../images/thumbs/content-1.jpg);

	background-repeat: no-repeat;

	background-position: left center;		

	background-size: cover;

	position: absolute;

	top: 0;

	bottom: 0;

	width: 50%;

}



.content-2-img { 

	background-image: url(../images/thumbs/content-2.png);

	background-repeat: no-repeat;

	background-position: left center;		

	background-size: cover;

	position: absolute;

	top: 0;

	bottom: 0;

	width: 50%;

	left: 50%;

}







/* ==========================================================================

   04. SKILLS

   ========================================================================== */  



.skills-txt p {

	margin-bottom: 0;

}

   

.progress {

	height: 6px; 

	background-color: #f0f0f0; 

	overflow: visible;

	margin-bottom: 20px;

	-webkit-border-radius: 0;

    -moz-border-radius: 0;

    border-radius: 0;

}



.progress-bar {

	height: 6px; 

	background-color: #00c1f0;

	-webkit-transition: width 1.5s ease-in-out;

	-moz-transition: width 1.5s ease-in-out;

	-o-transition: width 1.5s ease-in-out;

	-ms-transition: width 1.5s ease-in-out;

	transition: width 1.5s ease-in-out;

}



.barWrapper h5 {

	font-size: 14px;

	font-weight: 900;

	text-transform: uppercase;

	margin-bottom: 10px;

	display: inline-block;

}



/*------------------------------------------*/

/*	 Progress Bar Tooltip

/*------------------------------------------*/



.tooltip { 

	position: relative;

	float: right;

}



.tooltip > .tooltip-inner {

	background-color: transparent; 

	color: #444; 

	font-size: 15px;

	font-weight: 900; 

	top: 0px;

}



.popOver + .tooltip > .tooltip-arrow {	

	display: none;

	border: none;

}



.tooltip.top {

	margin-top: 0px;

}







/* ==========================================================================

   05. PORTFOLIO

   ========================================================================== */



#portfolio .portfolio-items-list {

	margin: 0;

	padding: 0

}



/*------------------------------------------*/

/*	  Portfolio Item

/*------------------------------------------*/ 



div.pp_default .pp_description {

    font-size: 15px;

    line-height: 15px;

}



.portfolio-item {

	position: relative;	

	padding: 0;

}



.portfolio-item a {

	cursor: url(../images/icons/pointer.png),crosshair;

}



.portfolio-item .hover-overlay {

	width: 100%;

	height: auto;

	overflow: hidden;

	position: relative;

}



.portfolio-item .hover-overlay img {

	-webkit-transition: all 600ms;

	-moz-transition: all 600ms;

	-o-transition: all 600ms;

	transition: all 600ms;

} 



/*------------------------------------------*/

/*	  Overlay Content 

/*------------------------------------------*/ 



.portfolio-item .overlay-content {

	position: absolute;

	bottom: 0;

	left: 0;

	z-index: 20;

	width: 100%;

	zoom: 1;

	opacity: 0;

	-webkit-transition: all 200ms ease-out;

	-moz-transition: all 200ms ease-out;

	-o-transition: all 200ms ease-out;

	transition: all 200ms ease-out;

}



/*------------------------------------------*/

/*	  Overlay Content Text

/*------------------------------------------*/ 



.portfolio-item .overlay-content h4 {

	color: #fff;

	font-size: 17px;

	line-height: 17px;

	text-transform: uppercase;

	margin-bottom: 8px;

	padding-left: 20px;

}



.portfolio-item .overlay-content p {

	color: #fff;

	font-size: 15px;

	line-height: 20px;

	padding: 0 20px;

}



/*------------------------------------------*/

/*	  Overlay Background 

/*------------------------------------------*/ 



.portfolio-item .item-overlay {

	opacity: 0;

	-moz-opacity: 0; 

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: rgba(10, 10, 10, 0.75);

	-moz-transition: opacity 400ms ease-out;

	-webkit-transition: opacity 400ms ease-out;

	-o-transition: opacity 400ms ease-out;

	transition: opacity 400ms ease-out;

}



/*------------------------------------------*/

/*	  Image Hover Effect 

/*------------------------------------------*/ 



.portfolio-item .hover-overlay:hover > img {

	transform: scale(1.2);

	-ms-transform: scale(1.2);

	-webkit-transform: scale(1.2);

	-o-transform: scale(1.2);

	-moz-transform: scale(1.2);

}



.portfolio-item .hover-overlay:hover .item-overlay {

	opacity: 1; 

	-moz-opacity: 1; 

}



.portfolio-item:hover .overlay-content {

	bottom: 10%;

	opacity: 1; 

	-moz-opacity: 1; 

}







/* ==========================================================================

   06. PRICING

   ========================================================================== */ 



.pricing-row .col-md-4 {

	padding: 0 8px;

} 



.pricing-table {

	background-color: #fff;

	-webkit-border-radius: 8px;

    -moz-border-radius: 8px;

    border-radius: 8px;

}



/*------------------------------------------*/

/*	 Table Header

/*------------------------------------------*/



.pricing-table h3 {

	font-size: 23px;	

	line-height: 23px;	

	font-weight: 700;

	padding-top: 40px;

	padding-bottom: 20px;

	margin-bottom: 0;	

} 



/*------------------------------------------*/

/*	 Table Price Plan

/*------------------------------------------*/



.pricing-table .price {

	padding-top: 10px;

	padding-bottom: 10px;

}



.pricing-table .price span {

	font-size: 80px;

	line-height: 60px;

	font-weight: 900;

}



.pricing-table .price sup {

	font-size: 50px;

	font-weight: 900;

    top: -8px;

}



.pricing-table .price p {

	color:  #00c1f0;

	font-size: 14px;

	line-height: 14px;

	text-transform: uppercase;

	font-weight: 900;

	margin-top: 10px;

	margin-bottom: 0;

}



/*------------------------------------------*/

/*	 Table Body

/*------------------------------------------*/



.pricing-table ul.features {

	color: #666;

	font-size: 16px;

	line-height: 16px;

	font-weight: 400;

	padding: 10px 50px;

}



.pricing-table ul.features li {

    padding: 6px 0;

} 



/*------------------------------------------*/

/*	 Table Button

/*------------------------------------------*/



.pricing-table .btn {

	margin: 10px 0 40px;

}



/*------------------------------------------*/

/*	 Table Highlight

/*------------------------------------------*/



.pricing-table.highlight {

	background-color: #f5f5f5;

}



.pricing-notice p {

	font-size: 17px;

	line-height: 17px;

	font-weight: 400;

	margin-bottom: 0;	

}



.pricing-notice p span {

	color: #222;

	font-weight: 900;

}







/* ==========================================================================

   07. STATISTIC BANNER

   ========================================================================== */  



#statistic {  

	background-image: url(../images/thumbs/statistic.jpg);

	background-attachment: fixed !important;

	background-repeat: no-repeat;

	background-position: center center;		

	background-size: cover;	

	padding-top: 120px;

	padding-bottom: 70px;

}



/*------------------------------------------*/

/*	  Statistic Block Content

/*------------------------------------------*/



.statistic-number {

	color: #fff;

	font-size: 55px;

	line-height: 55px;

	font-weight: 900;

	margin-bottom: 15px;

}



.statistic-block p {

	color: #fff;

	font-size: 14px;

	line-height: 14px;

	text-transform: uppercase;

	letter-spacing: .5px;

	font-weight: 900;

	margin-bottom: 0;

}



.statistic-block p:after {

    display: block;

    content: "";

    height: 1px;

    width: 60px;

	background: #439fe0;

    margin: 20px auto 0;

    position: relative;

}







/* ==========================================================================

   08. SERVICES

   ========================================================================== */  



/*------------------------------------------*/

/*	  Service Box Icon

/*------------------------------------------*/



.sbox span {

	width: 60px;

	height: 60px;

	float: left;

	text-align: center;

	color: #00c1f0;

	font-size: 50px;

	line-height: 50px!important;

} 

   

/*------------------------------------------*/

/*	 Service Box Text

/*------------------------------------------*/ 



.sbox-txt {

	margin-left: 75px;

}   

 





/* ==========================================================================

   09. TESTIMONIALS

   ========================================================================== */ 



#reviews {

	position: relative;

	background-color: #00aed8;

	padding-top: 130px;

	padding-bottom: 130px;

}



.reviews-img { 

	background-image: url(../images/thumbs/reviews.jpg);

	background-repeat: no-repeat;

	background-position: left center;		

	background-size: cover;

	position: absolute;

	top: 0;

	bottom: 0;

	width: 50%;

	left: 50%;

}



/*------------------------------------------*/

/*	 Testimonial Message Text

/*------------------------------------------*/



.testimonial-txt p {

	font-size: 22px;

	line-height: 32px;

	font-weight: 300;

    padding: 10px 5px;

}



/*------------------------------------------*/

/*	 Testimonial Message Author

/*------------------------------------------*/



.review p.author {

	font-size: 18px;

	font-weight: 700;

	margin-bottom: 5px;

}



.review span {

	color: #fff;

	font-size: 13px; 

	font-weight: 700;

	text-transform: uppercase;

	margin: 0 0 60px;

	display: block;

}



/*------------------------------------------*/

/*	 Testimonial Rotator Nav

/*------------------------------------------*/



#reviews .flex-control-paging li a {

	background: #0194b7;

	border: 2px solid #0194b7;

}



#reviews .flex-control-paging li a:hover,

#reviews .flex-control-paging li a.flex-active { 

	background: #fff;

	border: 2px solid #fff;

}







/* ==========================================================================

   10. CLIENTS

   ========================================================================== */  







/* ==========================================================================

   11. TEAM

   ========================================================================== */  

   

/*------------------------------------------*/

/*	  Team Member Meta

/*------------------------------------------*/



.team-img-meta h4 {

	margin: 20px 0px 8px;

}



.team-img-meta h6 {

	color: #00c1f0;

	font-size: 13px;

	line-height: 13px;

	font-weight: 900;

	text-transform: uppercase;

	letter-spacing: .5px;

	margin-bottom: 8px;

}  



/*------------------------------------------*/

/*	  Team Member Social Icons 

/*------------------------------------------*/



.team-member-socials {

	text-align: right;

	display: inline-block;

	margin: 3px auto 0;

}



.team-member-socials li {

	float: left;

    display: inline-block !important;

    vertical-align: top;

    width: auto !important;

    clear: none !important;

}



.page_social {

    width: 30px;

    height: 30px;

	color: #999;

	font-size: 16px; 

	line-height: 30px;

    text-align: center;

    display: block;

    text-decoration: none;

	margin-right: 6px;

	-webkit-transition: all 250ms ease-in-out;

	-moz-transition: all 250ms ease-in-out;

	-o-transition: all 250ms ease-in-out;

	-ms-transition: all 250ms ease-in-out;

	transition: all 250ms ease-in-out;

}







/* ==========================================================================

   12. CALL TO ACTION

   ========================================================================== */ 



#call-to-action {

	background-image: url(../images/thumbs/call-to-action.jpg);

	background-attachment: fixed !important;

	background-repeat: no-repeat;

	background-position: center center;		

	background-size: cover;	

	padding-top: 130px;

	padding-bottom: 130px;

}



/*------------------------------------------*/

/*	  Title

/*------------------------------------------*/



#call-to-action h2 {

	color: #fff;

	font-size: 50px;

	line-height: 58px;

	font-weight: 300;

	margin-bottom: 25px;

}



#call-to-action h2 span {

	font-weight: 700;

}



/*------------------------------------------*/

/*	  Call to Action Buttons

/*------------------------------------------*/



.cta-buttons .btn {

	margin-right: 10px;

}







/* ==========================================================================

   13. BLOG

   ========================================================================== */  

  

.blog-post {

	background-color: #fff;

	border: 1px solid #ddd;

}



/*------------------------------------------*/

/*	  Blog Post Link 

/*------------------------------------------*/



.blog-post-link a {

	color: #444;

	font-size: 18px;

	line-height: 24px;

	font-weight: 900;

	margin-top: 30px;

	padding: 0 30px;

	display: block;

	text-decoration: underline;

}



/*------------------------------------------*/

/*	  Blog Post Text 

/*------------------------------------------*/



.blog-post-text p {

	color: #666;

	line-height: 22px;

	padding: 0 30px 30px;

}



/*------------------------------------------*/

/*	  Blog Post Meta 

/*------------------------------------------*/



.blog-post-meta {

	color: #999;

	font-size: 13px;

	line-height: 13px;

	font-weight: 900;

	padding: 12px 30px 10px;

	text-transform: uppercase;

}



.blog-post-meta span,

.blog-post-link a:hover {

	color: #00c1f0;

}







/* ==========================================================================

   14. CONTACTS

   ========================================================================== */ 



.contacts-section {

	background-image: url(../images/thumbs/contacts.jpg);

	background-attachment: fixed !important;

	background-repeat: no-repeat;

	background-position: center center;		

	background-size: cover;

}



#contacts h3 {

	margin-bottom: 10px;

}



/*------------------------------------------*/

/*	  CONTACT TEXT

/*------------------------------------------*/



.contacts-txt {

	background-color: #fff;

	padding: 60px;	

}



.contact-info-item p {

	margin-bottom: 0;

}



.contact-info-item p span {

	color: #00c1f0;

	font-weight: 900;

}





/*------------------------------------------*/

/*	  CONTACT FORM

/*------------------------------------------*/



.contacts-form {

	background-color: #00c1f0;

	padding: 60px 50px;	

}



#contact-form > div { 

	padding: 0; 

}



#contact-form #input_name { padding-right: 8px; }

#contact-form #input_email { padding-left: 8px; }



/*------------------------------------------*/

/*	  Contact Form Input

/*------------------------------------------*/



#contact-form .form-control {

	height: 46px;

	background-color: #fff;

	border: 1px solid #ddd;

	box-shadow: 0 0 0 0;

	color: #333;

	font-size: 16px;

	font-weight: 400;

	padding: 10px 12px;

	margin-bottom: 15px;

	-webkit-border-radius: 0px;

    -moz-border-radius: 0px;

    border-radius: 0px;

}



/*------------------------------------------*/

/*	  Contact Form Textarea

/*------------------------------------------*/



textarea { min-height: 120px; }



/*------------------------------------------*/

/*	  Contact Form Placeholder

/*------------------------------------------*/



#contact-form .form-control::-moz-placeholder { color: #333; }

#contact-form .form-control:-ms-input-placeholder { color: #333; } 

#contact-form .form-control::-webkit-input-placeholder { color: #333; }



/*------------------------------------------*/

/*	  Contact Form Button

/*------------------------------------------*/



#form_btn .btn {

	background-color: #444;

	border-color: #444;

	color: #fff;

}



#form_btn .btn:hover {

	background-color: transparent;

	border-color: #fff;

	color: #fff;

}



/*------------------------------------------*/

/*	  Contact Form Notice

/*------------------------------------------*/



#form_btn p a {

	font-weight: 700;

	text-decoration: underline;

}



#form_btn p a:hover {

	color: #333;

}





/* ==========================================================================

   15. FOOTER

   ========================================================================== */    



/*------------------------------------------*/

/*	 Footer Typography

/*------------------------------------------*/

   

.footer h4 {

	color: #fff;

	margin-bottom: 25px;

} 



.footer p, .footer a  {color: #666;} 

.footer a:hover { color: #fff; } 



#footer-copyright p {

	margin-bottom: 0;

}



/*------------------------------------------*/

/*	 FOOTER LINKS / SOCIALS  

/*------------------------------------------*/



.footer-links, .footer-icons, .footer-news {

	display: inline-block; 

	padding-left: 0;

	margin: 0 auto;

}



.footer-links li, .footer-icons li, .footer-news li {

	width: auto !important;

    display: inline-block !important;

    vertical-align: top;

    clear: none !important;

	padding: 0;

}



/*------------------------------------------*/

/*	 Footer Links / Social Icons  

/*------------------------------------------*/



.foo-social,

.foo-news {

	color: #666;

	display: block;

	margin-bottom: 7px;

}



.foo-news {

	padding: 3px 0;

}



.foo-news span {

	color: #fff;

	font-size: 13px;

	display: block;

	margin-top: 3px;

}



.foo-social i {	

	margin-right: 12px;

} 



.foo-link {

	margin: 0 7px;

    display: block;

}



/*------------------------------------------*/

/*	 PRE-FOOTER

/*------------------------------------------*/



#pre-footer {

	background-color: #292929;

}



/*------------------------------------------*/

/*	  Newsletter Form Input

/*------------------------------------------*/



#pre-footer .newsletter-form .form-control {

	height: 42px;

	background-color: #292929;

	border: 1px solid #666;

	color: #fff;

	font-size: 16px;

	font-weight: 300;

	padding: 0px 20px;

	box-shadow: none;

	-webkit-border-radius: 0px;

    -moz-border-radius: 0px;

    border-radius: 0px;

}



#pre-footer .newsletter-form .form-control:focus {

	border-color: #fa5454;

	outline: 0;

	box-shadow: none;

}



/*------------------------------------------*/

/*	  Newsletter Form Button

/*------------------------------------------*/



#pre-footer .newsletter-form .btn { 

	height: 42px;

	background-color: #292929;

	border: 1px solid #666;

	color: #aaa;

	font-size: 20px;

	letter-spacing: 0;

	margin-top: 0; 

	padding: 0 25px;

	-webkit-border-radius: 0;

	-moz-border-radius: 0;

	-o-border-radius: 0;

	border-radius: 0;	

}



#pre-footer .newsletter-form .btn span { 

	margin-left: 0px;

}



#pre-footer .newsletter-form .btn:focus,

#pre-footer .newsletter-form .btn:hover { 

	background-color: #00c1f0;

	color: #fff;

	border-color: #00c1f0;

}



.footer-newsletter-widget #form-notification {

	color: #56b68b;

	font-size: 15px;

	line-height: 15px;

	font-weight: 500;

	margin-top: 15px;

	margin-bottom: 10px;

}



body.innser .navbar {

    background: #00c1f0 none repeat scroll 0 0;

}

body.innser .header ~ section{

	padding-top:130px;

}



.tab-header{

	display: inline-block;

    margin-bottom: 14px;

    padding: 0 12px;

    text-align: left;

    width: 100%;

}

.tab-header li {

    background: #00c1f0 none repeat scroll 0 0;

    color: #ffffff;

    cursor: pointer;

    float: left;

    list-style: outside none none;

    padding: 9px 32px;

    text-transform: capitalize;

}

.tab-header li.active{

	background:#0091c0;

}

.tab-body{

	

}

.tab-body .tab-body-item{

	display:none;

}

.tab-body .tab-body-item:first-child{

	display:block;

}

.video {
	width: 100%;
}
.playpause {
    background-image:url("../icons/icons8-circled-play-96.png");
    background-repeat:no-repeat;
    width:96px;
    height:50%;
    position:absolute;
    left:0%;
    right:0%;
    top:0%;
    bottom:0%;
    margin:auto;
    background-size:contain;
    background-position: center;
}