@charset "utf-8";
   /*
   Theme Name: Obsession
   Theme URI: http://www.oscodo.com
   Author: Oscodo
   Author URI: http://oscodo.com
   Description: HTML5 Bootstrap App Landing Page
   Version: 1.0
   -------------------------------------------- */
   /*  TABLE OF CONTENT
   --------------------
   1. google fonts
   2. common styles
   3. fonts
   4. nav (top navigation)
   5. buttons and forms
   6. main banner (above the fold section)
   7. phone mockups
   8. features section
   9. app details
   10. app screenshots
   11. team
   12. pricing
   13. testimonials
   14. subscribe and  contact us
   15. footer
   16. back to top button
   17. demo two styles
   18. dark pages styles
   19. media queries (responsive styles)
   --------------------*/


/* google fonts */
@import url('http://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600italic,600,400italic,300italic,300|Libre+Baskerville:400italic');


/* common styles */
body, html{overflow-x:hidden;}
body{font-family:'Open Sans', Helvetica Neue, sans-serif; padding-top:95px;}
.no-video{background:url(../media/no-video.jpg) top center no-repeat fixed; background-size:cover; backface-visibility: hidden;}
.section{padding:60px 0; position:relative; z-index:1;}
hr.spacer{height:10px; border-color:transparent !important;}
hr.line{margin:0; position:relative; z-index:10000;}
.dark hr{border-color:#555;}
p, li{line-height:1.6em;}
.video-wrap{margin-top:30px;}
iframe{border:none;}
a, button{outline:none;}
.owl-carousel{margin-bottom:20px;}body, h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small{color:#4a4a4a;}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, a{color:#393939;}
.dark, .dark h1 small, .dark .h1 small, .dark h2 small, .dark .h2 small, .dark h3 small, .dark .h3 small{color:#ddd;}
.dark h1, .dark .h1, .dark h2, .dark .h2, .dark h3, .dark .h3, .dark h4, .dark .h4, .dark h5, .dark .h5, .dark h6, .dark .h6, .dark a, .dark blockquote p{color:#fff;}
.panel-group .panel{border-radius:0; border:none; box-shadow:none; background-color:transparent;}
.panel-group .panel-heading{border:2px solid #393939; border-radius:3px; background-color:transparent; padding:0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out;	-o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.dark .panel-group .panel-heading{border-color:#eee;}
.panel-group .panel-heading .panel-title a{padding:10px 15px; display:block; outline:none;}
.panel-group .panel-heading .panel-title a:hover, .panel-group .panel-heading .panel-title a:focus{text-decoration:none;}
.panel-group .panel-heading:hover .panel-title a, .panel-group .panel-heading.active .panel-title a{color:#fff;}
.panel .panel-body{border:0 !important;}
.thumbnail.pull-left{margin:0 10px 10px 0;}

/* font sizes */
.navbar-nav > li > a, .navbar-form a, .btn{font-size:12px;}
h1, .h1{font-size:38px; font-weight:300; margin-bottom:20px;}
h3, .h3, h4, .h4, h5, .h5, h6, .h6{font-weight:600;}
h1 small, .h1 small{font-size:18px; font-weight:700; display:block; margin-bottom:15px;}
.btn-lg{font-size:16px;}
h2 > small, h2.h1 small{font-size:12px !important; text-transform:uppercase; display:block; margin-top:25px; margin-bottom:0; line-height:1.6em;}
h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small{font-weight:600 !important;}


/* top navigation */
.navbar-default{background:#fff; border-color:#fff; box-shadow:0 0 3px rgba(0, 0, 0, 0.2);}
.navbar-fixed-top{top:-60px; z-index:1000; backface-visibility: hidden; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out;	-o-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out;}
.show-nav{top:0px;}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{background:#fff; color:#111;}
.navbar-default .navbar-nav > li > a, .navbar-form a{text-transform:uppercase; color:#b1b1b1; font-weight:600; outline:none;}
.navbar-form .btn{font-weight:bold; color:#fff;}


/* buttons and forms */
form{display:block; margin:30px auto;}
.btn, .form-control, form{border-radius:3px;}
.btn{position:relative; overflow:hidden; font-weight:bold; line-height:2em; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out;	-o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
.btn-lg, .input-lg{padding:12px 25px;}
.btn i{font-size:2em; font-weight:normal !important; float:left; margin-right:8px;}
.btn-link > i{float:none; margin-left:8px; margin-right:0; font-size:inherit;}
.btn:hover, .btn:focus, .btn:active{box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25); outline:none !important;}
.form-control, .form-control:hover, .form-control:focus{border-color:#fff; background:#fff; box-shadow:none;}
.input-lg{font-size:14px; height:58px;}
.form-control::-moz-placeholder{color:#4a4a4a;}
.form-control:-ms-input-placeholder{color:#4a4a4a}
.form-control::-webkit-input-placeholder{color:#4a4a4a}
.form-inline .form-control{min-width:300px;}
.form-inline .form-group{box-sizing:border-box; padding:0 3px;}
.form-group{position:relative; margin-bottom:30px;}
.form-group .error-msg{position:absolute; left:0; bottom:-20px; width:100%;}
label.error{font-size:12px; font-weight:normal;}
textarea.form-control{padding:20px 25px;}


/* main banner */
.banner{color:#fff; margin-bottom:-60px; position:relative; z-index:20;}
.logo{margin-bottom:100px; display:block;}
.banner h1{margin-bottom:40px;}
.banner > .container{position:relative;}
.available-on{position:absolute; bottom:70px; left:15px; font-size:10px; color:rgba(255, 255, 255, 0.5);}
.bg-img:after{position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; content:''; background:rgba(0, 0, 0, 0.4); backface-visibility: hidden;}
.overlay-color:after{position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; content:''; backface-visibility: hidden;}
.overlay-pattern:after{position:fixed; backface-visibility: hidden; top:0; left:0; width:100%; height:100%; z-index:0; content:''; background:url(../img/pattern.jpg) repeat; opacity:0.5; filter:alpha(opacity=50);}
.bg-img{background:url(../img/bg1.jpg) center center no-repeat fixed; background-size:cover; backface-visibility: hidden;}


/* phone mockups */
.phone-mockup.style1 > .wrapper, .phone-mockup.style2 > .wrapper{display:inline-block; position:relative; margin-left:auto; margin-right:auto;}
.phone-mockup.style1 > .wrapper .layer-one{position:absolute; top:0; right:-40%; width:auto; height:100%;}
.phone-mockup.style1 > .wrapper .layer-two{position:relative; max-width:100%; height:auto; z-index:1;}
.phone-mockup.style2 > .wrapper .layer-one{position:relative; max-width:100%; height:auto;}
.phone-mockup.style2 > .wrapper .layer-two{position:absolute; top:0; right:-40%; width:auto; height:100%; z-index:1;}
.phone-mockup.style1{margin-top:20px;}


/* features section */
.features{background:#eff5f8; position:relative; z-index:19;}
.feature{position:relative;}
.feature.style1{padding-left:80px; margin-bottom:30px;}
.feature.style1 i, .feature.style2 i{width:65px; height:65px; position:absolute; left:0; top:0; border-radius:100%; color:#fff; text-align:center; line-height:65px; font-size:32px; font-weight:normal !important; box-shadow:0 1px 2px rgba(0, 0, 0, 0.25); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out;	-o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
.platforms i{font-size:36px; margin:10px; color:#f9b24f;}
.feature.style2{text-align:center; margin-bottom:40px;}
.feature.style2 i{position:relative; left:auto; top:auto; margin:0 auto; display:block;}
.feature.style3{padding-left:140px; margin-bottom:40px;}
.feature.style3 i{position:absolute; left:20px; top:50%; width:100px; height:100px; margin-top:-50px; font-size:80px; line-height:90px; text-align:center;}
.feature-list{background:#fff;}
.list{padding:0;}
.list li{list-style:none; position:relative; padding-left:30px; margin-bottom:10px;}
.list li i{position:absolute; left:0; top:3px; font-size:20px;}
.app-layers .layer-two, .app-layers{position:relative; width:100%; height:auto; z-index:0;}
.app-layers .layer-one, .app-layers .layer-three{position:absolute; top:0; left:0; width:100%; height:auto;}
.app-layers .layer-one{z-index:1;}
.app-layers .layer-three{z-index:-1;}

/* app details section */
.app-details{background:#fff; position:relative;}

/* app screenshots section */
.app-screenshots, .our-portfolio{background:#eff5f8;}
#app-screenshots{margin:60px 0 0; text-align:center;}
#app-screenshots .owl-item .screen{margin:0 5px;}
#app-screenshots .owl-item .screen img{width:100%; height:auto; border-radius:3px; border:6px solid #fff;}
#app-screenshots .owl-controls{margin-top:30px;}

/* trial download section */

/* team section */
.team-container{background:#fff;}
.team-member:after{clear:both;}
.team-member:after, .team-member:before{display:table; content:'';}
.team-member.left .member-photo{float:right; width:48%; height:auto;}
.team-member.left .content{text-align:right; padding:20px 54% 20px 25px; color:#fff;}
.team-member.right .member-photo{float:left; width:48%; height:auto;}
.team-member.right .content{text-align:left; padding:20px 25px 29px 54% ; color:#fff;}
.member-desig{font-size:24px; font-weight:600;}
.member-desig > span{font-size:18px; text-transform:uppercase; font-weight:300; display:block;}
.member-detail{font-size:12px; margin:20px 0;}
.team-member .social i{font-size:18px; display:inline-block; margin:0 3px;}

/* pricing section */
.pricing{background:#eff5f8;}
.choose-currency{padding-top:30px;}
.choose-currency span{font-size:12px; text-transform:uppercase;}
.choose-currency button{font-size:18px; font-weight:600; width:40px; height:40px; background:#fff; border-radius:100%; border:none; margin:0 0 0 6px;  -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out;	-o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
.choose-currency button.active{background:#393939; color:#fff;}
.choose-currency button:hover, .choose-currency button.active{box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);}
.plan{text-align:center; margin:30px 0 0;}
.plan .plan-header, .plan .plan-footer{padding:20px; font-size:18px; text-transform:uppercase; background:#393939; color:#fff; font-weight:600; border-radius:3px 3px 0 0;}
.plan .detail p{background:#fafafa; padding:25px; margin:0 0 1px;}
.plan .price{color:#393939; font-size:36px; font-weight:600; background:#fff; padding:10px 10px;}
.plan > .price .symbol{font-weight:300; font-size:24px;}
.plan > .price small{display:block; font-size:12px; color:#8e8e8e;}
.plan .plan-footer{padding:5px 10px; border-radius:0 0 3px 3px; text-transform:none;}
.plan .plan-footer a{color:#fff; margin:0;}
.pricing .discount-offer{margin:40px auto 0; max-width:400px; text-align:center; line-height:3em;}
.pricing .discount-offer a{display:block;}
.price .pound, .price .euro{display:none;}

/* testimonials */
.testimonials{background:#fff; text-align:center;}
.testimonials .client{width:80px; height:80px; display:block; border-radius:100%; margin:0 auto 20px;}
.testimonials blockquote{margin:0 auto 20px; padding:0; border:none; line-height:1.8em;}
blockquote p{font-size:18px; font-family:'Libre Baskerville', Georgia, Times New Roman, Times, serif; font-style:italic; color:#393939;}
.testimonials blockquote footer:before, .testimonials blockquote small:before, .testimonials blockquote .small:before{content:'';}
.testimonials blockquote > small{text-transform:uppercase;}
.testimonials blockquote > small > small{text-transform:none;}

/* subscribe and  contact us section */
.forms{position:relative; background:#fff; z-index:10;}
.subscribe-form, .contact-form{padding:60px 20px;}
.form-switch{position:absolute; bottom:-30px; z-index:10; width:100%; text-align:center;}
.form-switch button{width:60px; height:60px; border:none; border-radius:100%; background-color:#4a4a4a; color:#999999; box-shadow:0 1px 3px rgba(0, 0, 0, 0.25); font-size:23px; margin:0 5px;}
.form-switch button.active{box-shadow:none; color:#fff;}
/* .contact-form{display:none;} */
.subscription-success, .subscription-error{display:block; line-height:1.6em; margin:30px auto; width:100%; max-width:660px; color:#fff;}
.subscription-success i, .subscription-error i, .success i{font-size:36px; color:#7bbd46;}
.subscription-error i{color:#f33c44;}
.success{display:block; font-weight:bold; line-height:2em; margin:30px; text-align:center;}
.success > span{display:block; margin:0 auto;}

/* footer */
.footer{background:#393939; font-size:12px; color:#999; padding:100px 0 80px;}
.ft-links{margin:0 0 5px; padding:0;}
.ft-links li{list-style:none; margin:0; padding:0; display:inline-block;}
.ft-links a, .ft-links a:hover, .ft-links a:focus{color:#fff;}
.ft-links li + li:before{content:'-'; margin:0 6px; color:#999;}
.social{margin:0; padding:0;}
.social li{display:inline-block; margin:0 4px; list-style:none; padding:0;}
.social li a{display:inline-block; outline:none;}
.social li a i{width:46px; height:46px; border-radius:100%; background:#4a4a4a; font-size:18px; line-height:46px; text-align:center; color:#fff; box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);}

/* back to top button */
.backtotop { background: rgba(0, 0, 0, 0.6); border-radius: 0; color: #fff; font-size: 22px; padding: 10px 15px; transition: background 300ms ease 0s; position:relative; z-index:100;}

/* demo two styles */
.alt .banner .logo{text-align:center;}
.alt .banner h1{font-size:100px; text-align:center; font-weight:700; text-transform:uppercase;}
.alt .banner h1 > small{font-size:36px; font-weight:300 !important; color:#fff; text-transform:none; line-height:1.4em; max-width:80%; margin:0 auto;}
.alt .banner{margin-bottom:0; text-align:center;}
.alt .cta-btns{margin:40px auto 80px;}
.alt .banner .available-on{position:relative; left:auto; bottom:auto; line-height:4em;}


/* dark page styles */
.dark .features, .dark .app-screenshots, .dark .pricing, .dark .our-portfolio{background-color:#393939;}
.dark .app-details, .dark .team-container, .dark .testimonials, .dark .forms, .dark .choose-currency button, .dark .feature-list{background-color:#4a4a4a;}
.dark #app-screenshots .owl-item .screen img{border-color:#4a4a4a;}
.dark .plan .plan-header, .dark .plan .plan-footer, .dark .choose-currency button.active{background-color:#666;}
.dark .plan .detail p{background-color:#444;}
.dark .plan .price{background-color:#4a4a4a;}
.dark .plan .price{color:#ddd;}
.dark .wagwep-container ul#portfolio-filter a{color:#fff;}


/* responsive styles */
@media (max-width:991px){
	.trial-download .form-inline .btn{margin-top:10px;}
	.nav > li > a{padding-left:8px; padding-right:8px;}
	.alt .banner h1{font-size:60px;}
	.alt .banner h1 > small{font-size:28px;}
	.cta-btns{margin-bottom:80px;}
	.alt .cta-btns{margin-bottom:80px;}
	.banner{margin-bottom:0;}
	.available-on{bottom:20px;}
}
@media (max-width:767px){
	.banner{text-align:center !important;}
	.logo{margin-bottom:40px;}
	.banner .btn{margin-bottom:20px;}
	.available-on{position:relative; display:block; margin:0 auto 30px; bottom:auto; left:auto;}
	.footer *{text-align:center !important;}
	.copyright{line-height:3em;}
	.form-inline .form-control{min-width:100%;}
	.alt .banner h1{font-size:50px;}
	.alt .banner h1 > small{font-size:22px;}
	.cta-btns{margin-bottom:40px;}
	.form-group .error-msg{position:relative; left:auto; bottom:auto; width:100%;}
}
@media (max-width:480px){
	body{padding-top:40px;}
	p, .team-member.left .content, .team-member.right .content, ul, ol{text-align:center !important;}
	ul.list{text-align:left !important;}
	.logo{text-align:center;}
	h1, .h1{font-size:28px; text-align:center;}
	.banner h1{margin-top:80px;}
	.alt .banner h1 > small{font-size:18px; max-width:100%; margin-top:20px;}
	.cta-btns{margin-bottom:0px;}
	.available-on{text-align:center;}
	.feature.style1{text-align:center; padding:0;}
	.feature.style1 i{position:relative; left:auto; top:auto; display:block; margin:0 auto;}
	.feature.style3{padding:0; text-align:center;}
	.feature.style3 i{position:relative; left:auto; top:auto; margin:0 auto;}
	.team-member.left .content, .team-member.right .content{display:block; padding:20px;}
	.team-member.left .member-photo, .team-member.right .member-photo{float:none; width:100%; display:block;}
	.banner .btn{min-width:200px;}
	.thumbnail.pull-left{float:none; width:100%; height:auto;}
}
@media (max-width:400px){
	.alt .banner h1 > small{font-size:16px;}	
}