/*

@Author: Themezinho
@URL: http://www.themezinho.net
 
This file contains the styling for the actual theme, this
is the file you need to edit to change the look of the
theme.


// Table of contents //

01.	Google Fonts
02.	Body
03. HTML Elements
04.	Links
05.	Titles
06.	Preloader
07.	Header
08.	Navbar Default
09.	Icon Features
10.	About Forro
11.	Download Bar
12.	Gallery
13.	Owl Carousel
14.	Demo Video
15.	Fun Facts
16.	Developers
17.	Clients
18.	Reviews
19.	Pricing
20.	Blog
21.	Contact
22. Footer
23.	Responsive for Tablet
24. Responsive for Mobile

*/


/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css?family=Bree+Serif|Poppins:300,400,700,700');


/* BODY */
*{ outline:none;}
body{-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale;}
body{ margin:0; padding:0; font-family: 'Poppins', sans-serif; font-size:15px; color:#000;}
body{ height:100%;}
html{ height:100%;}


/* HTML ELEMENTS */
p{ margin-bottom:15px;}



/* LINKS */
a{ color:#000;}
a{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
a:hover{ text-decoration:underline;}
a:focus{ text-decoration:none;}



/* PAGINATION */
.pagination{ width:100%; float:left;}
.pagination li{ float:left; margin-right: 4px;}
.pagination li a{ color:#f06294; border-radius:4px;}
.pagination li a:hover{ color:#f06294;}
.pagination li.active span{ background:#0d416b; color:#fff; border:1px solid #0d416b; border-radius: 4px;}
.pagination li.active:hover span{background:#0d416b; border:1px solid #0d416b;}



/* FORM ELEMENTS */
.form-group{ width: 100%; float: left; margin-bottom: 15px;}
label{ width: 100%; float: left; font-family: 'Bree Serif', sans-serif; color: #999; font-weight: 400;}
input[type="text"]{ width: 400px; max-width: 100%; height: 40px; border: 1px solid #eee; padding: 0 10px; font-size: 14px; color: #999;}
textarea{ width: 400px; max-width: 100%; height: 120px; border: 1px solid #eee; padding:10px; font-size: 14px; color: #999;}
button[type="submit"]{height: 40px; background: #ef4048; border: none; color: #fff; font-weight: 700; padding: 0 20px;}

/* TITLES */
.title{ width:100%; float:left; font-weight:700; margin-top:0; margin-bottom:20px; font-size:70px; position:relative; padding-bottom:20px; color:#ef4048;}
.title:before{content:''; width:250px; height:203px; position:absolute; left:50%; top:-20px; margin-left:-125px; background:url(../images/title-bg.png) center no-repeat;}
/*.title:after{content:""; width:50px; height:5px; position:absolute; left:50%; bottom:0; margin-left:-25px; background:#e85889;}*/
.sub-title{ line-height:26px; font-weight:300; font-size:17px; margin-bottom:100px; opacity:0.6; padding:0 20%;}




/* PRELOADER */
.preloader{ width:100%; height:100%; position:fixed; left:0; top:0; background:url(../images/miraclemeloader.gif) center no-repeat #fff; background-size:100px 100px; z-index:999;}
.preloader{-webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -ms-transform:all 0.7s ease; transition: all 0.7s ease;}
.page-loaded .preloader{transform: translateY(-100%); -o-transform:translateY(-100%); -ms-transform:translateY(-100%); -webkit-transform:translateY(-100%);}



/* HEADER */
.header{ width:100%; height:800px; float:left;  background:#232527 ; position:relative; overflow: hidden;}
.header:before{content:''; width:100%; height:100%; position:absolute; left:0; top:0; background:url(https://d2b8lqy494c4mo.cloudfront.net/mss/v3/images/Miracle-Me/pattern-bg.png) center; background-attachment: fixed; background-size: 50%; }
.header:after{content:''; width:500px; height:500px; position:absolute; left:50%; top:50%; background:#fff; border-radius:50%; margin-left:-250px; margin-top:-250px; opacity:0.05; -webkit-filter: blur(50px); -moz-filter: blur(50px); -o-filter: blur(50px); -ms-filter: blur(50px); filter: blur(50px);}
.header.short{ height: 400px;}
.header .wave-bg{ width:100%; height:50px; position:absolute; left:0; bottom:0; background:url(../images/wave-bg.png) repeat-x center bottom; background-size:auto 50px; z-index:3; }
.header .video{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden;}
.header .video video{ width: 100%; height: 100%; position:absolute; left:0; top:0; -o-object-fit: cover; object-fit: cover; display: block; mix-blend-mode: hard-light; -webkit-filter: grayscale(100%) contrast(1); filter: grayscale(100%) contrast(0.5); opacity:0.2;}
.header #particles-js{ width: 100%; height: 100%; position: absolute; opacity: 0.5;}
.header .hero-content{ width:100%; height:100%; position:absolute; left:0; top:0; z-index:2; display:table;}
.header .hero-content .inner{ width:100%; display:table-cell; vertical-align:top; color:#fff; text-align:center;}
.header .hero-content .sides{ width:50%; display:table-cell; vertical-align:middle; color:#fff; text-align:center;}
.header .hero-content .sides .mockup-one{ width: 75%;}
.header .hero-content .sides .mockup-two{ width: 95%;}
.header .hero-content h1{ font-size:8vw; font-weight:700; margin-bottom:10px; margin-top:15vh; text-shadow:4px 4px 10px rgba(0,0,0,0.15);}
.header .hero-content h5{ padding:0 10%; font-size:18px; line-height:30px; font-weight:300; margin-bottom:30px;}
.header .hero-content h5 span{ display:inline-block; border-bottom:1px dotted #fff; font-weight:500;}
.header .hero-content a{ display:inline-block; line-height:60px; height:60px; padding:0 50px; font-size:17px; color:#fff; margin-bottom:10vh; border-radius:50px; font-weight:700; background:#ef4048; box-shadow:0 20px 30px rgba(0,0,0,0.05);}
.header .
.header .hero-content a:hover{ text-decoration:none; box-shadow:0 20px 30px rgba(0,0,0,0.2);}
.header .hero-content img{ width: 60%; max-width: 684px; display:inline-block;}
.header .rev_slider_wrapper{ z-index: 2;}
.header .slide-title{ font-size:8vw; font-weight:700; margin-bottom:10px; margin-top:15vh; text-shadow:4px 4px 10px rgba(0,0,0,0.15); color: #fff;}
.header .slide-text{ font-size:18px; line-height:30px; font-weight:300; margin-bottom:30px; color: #fff;}
.header .Hero-Button{ display:inline-block; height:60px; line-height: 60px !important; padding:0 50px; font-size:17px; color:#fff; margin-bottom:10vh; border-radius:50px; font-weight:700; background:#ef4048; box-shadow:0 20px 30px rgba(0,0,0,0.05) ;}
.header .Hero-Button:hover{background:#ef4048 !important; color: #fff !important; text-decoration:none; box-shadow:0 20px 30px rgba(0,0,0,0.2) ;}

.header .text-rotator { width:100%; float:left; position:relative;}
.header .slogan { width: 100%; float:left; text-align: center; font-size:8vw; font-weight:700; margin-bottom:10px; margin-top:15vh; text-shadow:4px 4px 10px rgba(0,0,0,0.15); overflow: hidden }
.header .slogan ul { position: relative; display: inline-block; overflow: visible !important; vertical-align: text-top; list-style: none; transform:translateY(-7px);}
.header .slogan ul li { position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); color: #fff;}
.header .slogan ul li:nth-child(2) {top: 150px;}
.header .slogan ul li:nth-child(3) {top: 300px;}
.header .slogan ul li:nth-child(4) {top: 450px;}
.header .slogan ul li:nth-child(5) {top: 600px;}




/* DEMO HEADER */
.demo-header{ width:100%; height:550px; float:left;  background:#0d416b; position:relative;}
.demo-header:before{content:''; width:100%; height:100%; position:absolute; left:0; top:0; background:url(../images/intro-hero.png) center; opacity:0.1; background-size: cover;}
.demo-header:after{content:''; width:500px; height:500px; position:absolute; left:50%; top:50%; background:#fff; border-radius:50%; margin-left:-250px; margin-top:-250px; opacity:0.05; -webkit-filter: blur(50px); -moz-filter: blur(50px); -o-filter: blur(50px); -ms-filter: blur(50px); filter: blur(50px);}
.demo-header img{ height: 70px; margin-top: 30px; margin-bottom: 10%;}
.demo-header h1{ font-size: 28px; color: #fff; line-height: 38px; margin-bottom: 8%;}
.demo-header a{ display:inline-block; line-height:60px; height:60px; padding:0 50px; font-size:17px; color:#fff; margin-bottom:10vh; border-radius:50px; font-weight:700; background:#ef4048; box-shadow:0 20px 30px rgba(0,0,0,0.05);}
.demo-header a:hover{ text-decoration:none; box-shadow:0 20px 30px rgba(0,0,0,0.2);}
.demo-content{ width: 100%; float: left; padding: 100px 0;}
.demo-footer{ padding: 0 !important;} 
.demo-subfooter{ margin: 0 !important;} 
.browser-mockup { border-top: 25px solid rgba(230, 230, 230, 0.7); box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.05); position: relative; margin-bottom:50px;}
.browser-mockup:before { display: block; position: absolute; content: ''; top: -14px; left: 1em; width: 5px; height: 5px; border-radius: 50%; background-color: #f44; box-shadow: 0 0 0 2px #f44, 1em 0 0 2px #9b3, 2em 0 0 2px #fb5;}
.browser-mockup.with-tab:after {  display: block;position: absolute;
content: '';top: -2em;left: 5.5em;width: 20%;height: 0em;border-bottom: 2em solid white;border-left: 0.8em solid transparent;  border-right: 0.8em solid transparent;}
.browser-mockup.with-url:after {display: block;position: absolute;content: '';top: -1.6em;left: 5.5em;width: calc(100% - 6em);  height: 1.2em;  background-color: white;}
.browser-mockup a img{ width:100%;}
.browser-mockup a span{ width:150px; height:50px; line-height:50px; font-weight:700; background:#f06294; position:absolute; left:50%; top:50%; margin-left:-60px; margin-top:0; color:#fff; border-radius:40px; box-shadow:0 0 20px rgba(0,0,0,0.2); opacity:0;}
.browser-mockup:hover a{ background:#fff; text-align: center;}
.browser-mockup:hover a *{-webkit-transition: .15s ease-in-out;-moz-transition: .15s ease-in-out;-ms-transition: .15s ease-in-out; -o-transition: .15s ease-in-out; transition: .15s ease-in-out;}
.browser-mockup:hover a img{ opacity:0.2;}
.browser-mockup:hover a span{ opacity:1; margin-top:-20px}



/* NAVBAR DEFAULT */
.navbar-default{ width:100%; float:left; border-radius:0; border:none; background:none; margin:0; padding:10px 0; z-index:10;}
.navbar-default {-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.navbar-default *{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.navbar-default.fixed-bg{ background:rgba(0,0,0,0.5);}
.navbar-default.fixed-bg .purchase{ background:none; color:#fff;}
.navbar-default.fixed-bg .purchase:hover{ color:#fff;}
.navbar-default.fixed-bg .navbar-brand .logo-dark{ display:block;}
.navbar-default.fixed-bg .navbar-brand .logo-light{ display:none;}
.navbar-default .navbar-brand{ height:auto; padding:7px 15px; }
.navbar-default .navbar-brand .logo-light{ display:block;}
.navbar-default .navbar-brand .logo-dark{ display:none;}
.navbar-default .navbar-brand img{ height:44px;}
.navbar-default .navbar-nav{ float:right; border-right:1px solid rgba(255,255,255,0.2); margin:10px 0; padding-right:20px;}
.navbar-default .navbar-nav li{ float:left;}
.navbar-default .navbar-nav li a{ float:left; color:#fff; font-size:13px; font-weight:700; padding:10px 4px; margin:0 10px; opacity:0.8;}
.navbar-default .navbar-nav li a:after{content:''; width:1px; height:2px; position:absolute; left:50%; bottom:0; background:#fff; opacity:0;}
.navbar-default .navbar-nav li a:after{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.navbar-default .navbar-nav li a:hover{ color:#fff; opacity:1;}
.navbar-default .navbar-nav li a:hover:after{ width:100%; opacity:1; left:0;}
.navbar-default .navbar-nav li a:focus{ color:#fff;}
.navbar-default .navbar-nav li.active a{ background:none; color:#fff; opacity:1;}
.navbar-default .navbar-nav li.active a:hover{ background:none; color:#fff;}
.navbar-default .navbar-nav li.active a:focus{ background:none; color:#fff;}
.navbar-default .navbar-nav li.active a:after{content:''; width:100%; height:2px; position:absolute; left:0; bottom:0; background:#ef4048; opacity:1;}
.navbar-default .purchase{ height:44px; float:right; line-height:42px; font-weight:700; margin-top:7px; margin-left:30px; padding:0 30px; color:#fff; border-radius:44px; border:2px solid #ef4048; box-shadow:0 20px 30px rgba(0,0,0,0.05);}
.navbar-default .purchase:hover{ background:#ef4048; text-decoration:none; color:#fff; box-shadow:0 20px 30px rgba(0,0,0,0.2);}




/* ICON FEATURES */
.icon-features{ width:100%; float:left; text-align:center;}
.icon-features img{ height:100px; display:inline-block; margin-bottom:10px;}
.icon-features h4{font-family: 'Bree Serif', sans-serif; color:#ef4048; position:relative; padding-bottom:20px; margin-bottom:10px;}
.icon-features h4:after{ content:''; width:6px; height:6px; position:absolute; left:50%; bottom:0; background:#ef4048; border-radius:50%;}
.icon-features p{ line-height:20px; margin-bottom:60px; padding: 0 10%; opacity:0.6;}




/* ABOUT FORRO */
.about-forro{ width:100%; float:left; padding:60px 0; background:#f7f6fb;}
.about-forro h4{ font-size:34px; color:#0d416b; font-weight:700; margin:40px 0;}
.about-forro p{ line-height:26px; opacity:0.7;}
.about-forro ul{ width:100%; float:left; margin:0; margin-bottom:30px; padding:0;}
.about-forro ul li{ width:100%; float:left; margin:5px 0; padding:0; list-style:none; opacity:0.7;}
.about-forro ul li i{display:inline-block; margin-right:4px; font-size:10px; color:#0d416b;}
.about-forro a{ display:inline-block; line-height:48px; height:50px; padding:0 30px; color:#fff; border-radius:44px; font-weight:700; color:#f06294; border:2px solid #f06294; box-shadow:0 20px 30px rgba(0,0,0,0.05);}
.about-forro a:hover{ text-decoration:none; background:#f06294; color:#fff; box-shadow:0 20px 30px rgba(0,0,0,0.2);}
.about-forro img{ width: 100%;}




/* DOWNLOAD BAR */
.download-bar{ width:100%; float:left; padding:100px 0; text-align:center; color:#fff; position:relative; background:#0d416b;}
.download-bar .hero{ width: 100%; height: 100%; position:absolute; left:0; top:0; -o-object-fit: cover; object-fit: cover; display: block; mix-blend-mode: hard-light; -webkit-filter: grayscale(100%) contrast(1); filter: grayscale(100%) contrast(0.5); opacity:0.1;}
.download-bar .container{ position:relative; z-index:2;}
.download-bar h3{ font-weight:700; font-size:70px; margin-top:0; margin-bottom:20px;}
.download-bar p{ font-size:17px; margin-bottom:50px; padding:0 10%;}
.download-bar a{ height:70px; display:inline-block; border-radius:70px; text-align:left;  margin:0 20px; padding:0 30px; color:#fff; background:#ef4048; box-shadow:0 20px 30px rgba(0,0,0,0.05);}
.download-bar a img{ height:50px; float:left; margin-right:10px; margin-top:8px;}
.download-bar a img path{ fill:#fff !important;}
.download-bar a span{ display:inline-block; text-align:left; letter-spacing:1px; margin-top:14px;}
.download-bar a h5{ font-size:12px; font-weight:700; margin:0;}
.download-bar a:hover{ text-decoration:none; box-shadow:0 20px 30px rgba(0,0,0,0.2);}




/* GALLERY */
.gallery{ width:100%; float:left; padding:60px 0;}
.gallery .owl-carousel{ width:100%; float:left; margin:0; padding:0 10%; position:relative;}
.gallery .owl-carousel .owl-item{ min-height:542px; display:block; padding:0 30px; opacity:0.3;}
.gallery .owl-carousel .owl-item{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.gallery .owl-carousel .owl-item img{ width:100%; float:left; }
.gallery .owl-carousel .owl-item.center{ padding:0; opacity:1;}



/* OWL CAROUSEL */
.owl-controls{ width:100%; float:left; text-align:center; margin-top:30px;}
.owl-controls .owl-nav{ width:100%; position:absolute; left:0; top:40%;}
.owl-controls .owl-nav .owl-prev{ width:70px; height:50px; float:left; background:#0d416b; border-radius:50px; text-indent:-9999px; box-shadow:0 20px 30px rgba(0,0,0,0.05);}
.owl-controls .owl-nav .owl-prev:before{content:"\f104"; font-family:FontAwesome; float:left; text-indent:0; color:#fff; font-size:34px; margin-left:27px;}
.owl-controls .owl-nav .owl-prev:hover{box-shadow:0 20px 30px rgba(0,0,0,0.1); background:#ef4048;}
.owl-controls .owl-nav .owl-next{ width:70px; height:50px; float:right; background:#0d416b; border-radius:50px; text-indent:-9999px; box-shadow:0 20px 30px rgba(0,0,0,0.05);}
.owl-controls .owl-nav .owl-next:before{content:"\f105"; font-family:FontAwesome; float:left; text-indent:0; color:#fff; font-size:34px; margin-left:32px;}
.owl-controls .owl-nav .owl-next:hover{box-shadow:0 20px 30px rgba(0,0,0,0.1); background:#ef4048;}.owl-controls .owl-dots{ display:inline-block;}
.owl-controls .owl-dots .owl-dot{ width:12px; height:12px; float:left; background:#fff; border:2px solid #0d416b; margin:0 2px; border-radius:50%;}
.owl-controls .owl-dots .owl-dot.active{ background:#0d416b;}




/* DEMO VIDEO */
.demo-video { width:100%; float:left; padding:100px 0; text-align:center; color:#fff; position:relative; background:#0d416b; overflow:hidden;}
.demo-video .hero{ width: 100%; height: 100%; position:absolute; left:0; top:0; -o-object-fit: cover; object-fit: cover; display: block; mix-blend-mode: hard-light; -webkit-filter: grayscale(100%) contrast(1); filter: grayscale(100%) contrast(0.5); opacity:0.1;}
.demo-video h3{ font-weight:700; font-size:70px; margin-top:0; margin-bottom:20px;}
.demo-video p{ font-size:17px; margin-bottom:50px; padding:0 10%;}
.demo-video a{ width:80px; height:80px; display:inline-block; line-height:78px; border:3px solid rgba(255,255,255,0.2); text-align:center; color:#fff; font-size:30px; border-radius:50%; text-indent:3px;}
.demo-video a:hover {border:3px solid rgba(255,255,255,0.5);}




/* FUN FACTS */
.fun-facts{ width:100%; float:left; padding:60px 0; text-align:center; color:#fff; position:relative; background:#0d416b; overflow:hidden;}
.fun-facts .hero{ width: 100%; height: 100%; position:absolute; left:0; top:0; -o-object-fit: cover; object-fit: cover; display: block; mix-blend-mode: hard-light; -webkit-filter: grayscale(100%) contrast(1); filter: grayscale(100%) contrast(0.5); opacity:0.5;}
.fun-facts img{ height:80px; display:inline-block; margin-bottom:20px;}
.fun-facts h4{ font-weight:700; font-size:17px; color:#ef4048;}
.fun-facts small{ width:100%; float:left; padding-bottom: 20px; position: relative;}
.fun-facts small:after{content: ''; width: 8px; height: 8px; position: absolute; left: 50%; bottom: 0; margin-left: -5px; background: #fff; border-radius: 50%;}
.fun-facts .number{ display:inline-block; font-family: 'Bree Serif', sans-serif; font-size:30px;}
.fun-facts .symbol{ display:inline-block; font-family: 'Bree Serif', sans-serif; font-size:30px; opacity: 0.5;}




/* DEVELOPERS */
.developers{ width:100%; float:left; padding:100px 0; text-align:center; color:#fff; position:relative; background:#0d416b; overflow:hidden;}
.developers *{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.developers .hero{ width: 100%; height: 100%; position:absolute; left:0; top:0; -o-object-fit: cover; object-fit: cover; display: block; mix-blend-mode: hard-light; -webkit-filter: grayscale(100%) contrast(1); filter: grayscale(100%) contrast(0.5); opacity:0.1;}
.developers .title{ font-weight:700; margin-top:0; margin-bottom:40px; font-size:70px; color:#fff;}
.developers .title:after{display:none;}
.developers .row{ margin:0;}
.developers figure{ width:100%; float:left; position:relative;}
.developers figure:hover figcaption ul{opacity: 1;}
.developers figure img{ width:100%; float:left; margin-bottom:10px;}
.developers figure figcaption{ width:100%; float:left;}
.developers figure figcaption h5{ font-size:20px; font-weight:700; color:#fff;}
.developers figure figcaption small{ display:block; text-transform:uppercase; font-family:'Bree Serif', sans-serif; color:#ef4048;}
.developers figure figcaption ul{ margin:10px 0; padding: 0; display: inline-block; opacity: 0;}
.developers figure figcaption ul li{ float: left; margin: 0 5px; list-style:none;} 
.developers figure figcaption ul li a{ color: #fff;  }
.developers figure figcaption ul li a:hover{ color: #ef4048;}




/* CLIENTS */
.clients{ width:100%; float:left; padding:100px 0;}  
.clients * {-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
.clients ul{ width:100%; float:left; margin:0; padding:0;}
.clients ul li{ width:16.66666%; float:left; margin:0; list-style:none;}
.clients ul li figure{ width:100%; float:left; opacity:0.5;}
.clients ul li figure:hover{ opacity:1;}
.clients ul li figure h5{ margin:0; padding:0 10%;}
.clients ul li figure h5 img{ width:100%;}



/* REVIEWS */
.reviews{ width:100%; float:left; padding:100px 0; text-align:center; background:#f7f6fb;}
.reviews .testimonial{ width:70%; float:left; text-align:center; margin:0 15%; margin-bottom: 20px; background:#fff; padding:30px; position: relative; box-shadow: 0 0 50px rgba(0,0,0,0.05);}
.reviews .testimonial:after{content: ''; position: absolute; left: 10%; bottom: -20px; width: 0;height: 0;border-style: solid;border-width: 20px 20px 0 0;border-color: #fff transparent transparent transparent;}
.reviews .testimonial .head{ width:100px; display:inline-block; position:relative;}
.reviews .testimonial .head img{width:100px; border-radius:50%;}
.reviews .testimonial h5{ font-size:22px; font-weight:700; color:#0d416b; margin-bottom:0;}
.reviews .testimonial small{ display:block; font-size:11px; font-family:'Bree Serif', sans-serif; color:#7d7a7a; margin-bottom:10px; opacity:0.6;}
.reviews .testimonial .rates{ display:block; margin-bottom:20px;}
.reviews .testimonial .rates i{ display:inline-block; font-size:13px; color:#ef4048; }
.reviews .testimonial p{ display:block; opacity:0.6; margin:0;}




/* PRICING */
.pricing{ width:100%; float:left; padding:100px 0; text-align:center; position:relative; background:#0d416b;}
.pricing .hero{ width: 100%; height: 100%; position:absolute; left:0; top:0; -o-object-fit: cover; object-fit: cover; display: block; mix-blend-mode: hard-light; -webkit-filter: grayscale(100%) contrast(1); filter: grayscale(100%) contrast(0.5); opacity:0.1;}
.pricing .title{ font-weight:700; margin-top:0; margin-bottom:40px; font-size:70px; color:#fff;}
.pricing .title:after{display:none;}
.pricing .price-box{ width:100%; float:left; background:#fff; padding-bottom:30px; position:relative;}
.pricing .price-box.recommended{ margin-top:-31px;}
.pricing .price-box.recommended:before{ content:"\f005"; font-family:FontAwesome; width:40px; height:40px; position:absolute; left:50%; top:-20px; background:#f06294; border-radius:50%; margin-left:-20px; color:#fff; line-height:40px; font-size:17px;}
.pricing .price-box .price-header{ width:100%; float:left; padding:30px; margin-bottom:10px; border-bottom:1px solid rgba(0,0,0,0.05);}
.pricing .price-box .price-header h2{ margin-top:10px; margin-bottom:5px; font-weight:700; color:#0d416b; font-size:34px;}
.pricing .price-box .price-header h5{ margin:0; color:#ef4048;}
.pricing .price-box .price{ width:100%; float:left; text-align:center; font-size:50px; font-family: 'Bree Serif', sans-serif;}
.pricing .price-box .price span{ font-size:20px; display:inline-block; margin-right:6px; transform:translateY(-22px);}
.pricing .price-box .price small{ font-size:15px; margin-left:10px; display:inline-block; color:#999;}
.pricing .price-box img{ width: 120px; display:inline-block; margin: 0 20%;}
.pricing .price-box ul{ width:100%; float:left; margin:0; margin-bottom:30px; padding:0; opacity:0.6;}
.pricing .price-box ul li{ width:100%; float:left; margin:5px 0; padding:0; list-style:none;}
.pricing .price-box a{ display:inline-block; line-height:48px; height:50px; padding:0 30px; color:#fff; border-radius:44px; font-weight:700; color:#f06294; border:2px solid #f06294; box-shadow:0 20px 30px rgba(0,0,0,0.05);}
.pricing .price-box a:hover{ text-decoration:none; background:#f06294; color:#fff; box-shadow:0 20px 30px rgba(0,0,0,0.2);}



/* HOME BLOG */
.home-blog{ width:100%; float:left; padding:100px 0;}
.home-blog .post{ width:100%; float:left;}
.home-blog .post .post-image{ width:50%; float:left; padding-right:25px;}
.home-blog .post .post-image img{ width:100%;}
.home-blog .post .post-content{ width:50%; float:left;}
.home-blog .post .post-content .category{ display:inline-block; background:#0d416b; color:#fff; padding:3px 7px; font-family: 'Bree Serif', sans-serif; margin-bottom:20px;}
.home-blog .post .post-content h4{ display:block; font-size:21px; color:#ef4048; font-weight:700; margin-top:0; margin-bottom:20px; line-height:28px;}
.home-blog .post .post-content .date{ display:block; font-family: 'Bree Serif', sans-serif; text-transform:uppercase; margin-bottom:10px; color:#999;}
.home-blog .post .post-content .author{ display:block; text-transform:uppercase; margin-bottom:30px; font-size:10px; line-height:30px; color:#0d416b; font-weight:700;}
.home-blog .post .post-content .author img{ width:30px; float:left; margin-right:6px; border-radius:50%;}
.home-blog .post .post-content a{ display:inline-block; line-height:48px; height:50px; padding:0 30px; color:#fff; border-radius:44px; font-weight:700; color:#f06294; border:2px solid #f06294; box-shadow:0 20px 30px rgba(0,0,0,0.05);}
.home-blog .post .post-content a:hover{ text-decoration:none; background:#f06294; color:#fff; box-shadow:0 20px 30px rgba(0,0,0,0.2);}




/* BLOG */
.blog{ width:100%; float:left; padding:100px 0;}
.blog .post{ width:100%; float:left; margin-bottom:140px;}
.blog .post .post-image{ width:100%; float:left; margin-bottom:30px;}
.blog .post .post-image img{ width:100%; border-radius: 6px;}
.blog .post .post-content{ width:100%; float:left; padding:0 40px;}
.blog .post .post-content .post-metas{ width:100%; float:left; margin-bottom:30px;}
.blog .post .post-content .post-metas .author{ float:left; margin-right:20px; margin-top: 4px;}
.blog .post .post-content .post-metas .author img{ width:40px; float:left; border-radius:50%; margin-right:10px;}
.blog .post .post-content .post-metas .author .author-name{ width:200px; display:block; font-weight:700; color:#0d416b; margin-top:8px;}
.blog .post .post-content .post-metas .date{ float:left; line-height:40px; color:#999; font-family: 'Bree Serif', sans-serif; margin-right:30px;}
.blog .post .post-content .post-metas .date img{ width:15px; margin-right:7px;}
.blog .post .post-content .post-metas .comments{ float:left; line-height:40px; color:#999; font-family: 'Bree Serif', sans-serif; margin-right:30px;}
.blog .post .post-content .post-metas .comments img{ width:15px; margin-right:7px;}
.blog .post .post-content .post-metas .tags{ float:left; line-height:40px; color:#999; font-family: 'Bree Serif', sans-serif;}
.blog .post .post-content .post-metas .tags img{ width:15px; margin-right:7px;}
.blog .post .post-content .post-metas .tags a{ color:#999; text-decoration:underline;}
.blog .post .post-content .post-metas .tags a:hover{ color:#0d416b;}
.blog .post .post-content .post-title{ width:100%; float:left; margin-top:0; margin-bottom:24px; font-size:50px; font-weight: 700; color: #ef4048;}
.blog .post .post-content .paragraph{ width:100%; float:left; font-size:16px; line-height:24px; opacity: 0.5; margin-bottom:40px;}
.blog .post .post-content blockquote{ width:100%; float:left; border-left:5px solid #ef4048; margin-bottom:40px;}
.blog .post .post-content blockquote p{ font-size:25px; line-height:35px; font-family: 'Bree Serif', sans-serif; color: #999;}
.blog .post .post-content blockquote h5{ color:#ef4048; font-size:18px; font-weight:700;}
.blog .post .post-content .post-bottom-metas{ width:100%; float:left; border-top:2px solid #e8e8ec; padding-top:20px; margin-bottom:50px;}
.blog .post .post-content .post-bottom-metas .tags{ width:50%; float:left; margin:0; padding:0;}
.blog .post .post-content .post-bottom-metas .tags li{ float:left; margin-right:10px; margin-bottom:10px; list-style:none;}
.blog .post .post-content .post-bottom-metas .tags li a{ height:31px; float:left; line-height:31px; padding:0 18px; background:#ebebf4; color:#7570ff; font-weight:900; border-radius:4px;}
.blog .post .post-content .post-bottom-metas .tags li a:hover{ background:#7570ff; color:#fff; text-decoration:none;}
.blog .post .post-content .readmore-btn{ display:inline-block; line-height:48px; height:50px; padding:0 30px; color:#fff; border-radius:44px; font-weight:700; color:#f06294; border:2px solid #f06294; box-shadow:0 20px 30px rgba(0,0,0,0.05);}
.blog .post .post-content .readmore-btn:hover{ text-decoration:none; background:#f06294; color:#fff; box-shadow:0 20px 30px rgba(0,0,0,0.2);}
.blog .comment-form{ width: 100%; float: left; padding: 0 40px;}
.blog .comment-form h4{ font-weight: 700; font-size: 25px;}
.blog .comment-form p{ color: #999;}
.blog .comment-form form{ display: block; margin-top: 10px;}
.blog .sidebar{ width:100%; float:left; padding-left:5%;}
.blog .sidebar .widget{ width:100%; float:left; margin-bottom:40px; background:#fff; padding:25px; border:1px solid #eee; text-align: center; border-radius: 8px;}
.blog .sidebar .widget .widget-title{ width:100%; float:left; margin-top:0; margin-bottom:20px; font-size:24px; color:#ef4048; font-weight: 700;}
.blog .sidebar .widget img{ margin-bottom:15px;}
.blog .sidebar .widget p{ line-height:22px; color:#999; font-family: 'Bree Serif', sans-serif;}
.blog .sidebar .widget ul{ margin:0; padding:0;}
.blog .sidebar .widget ul li {display:inline-block; margin:0; padding:0; list-style:none;}
.blog .sidebar .widget .tags{ width:100%; float:left; text-align: center;}
.blog .sidebar .widget .tags li{ display: inline-block; margin-right:6px; margin-bottom:6px;}
.blog .sidebar .widget .tags li a{ float:left; background:#0d416b; color:#fff; padding:3px 7px; font-family: 'Bree Serif', sans-serif; }
.blog .sidebar .widget .tags li a:hover{text-decoration: none; background: #ef4048;}
.blog .sidebar .widget .menu{ width:100%; float:left;}
.blog .sidebar .widget .menu li{ width:100%; float:left; margin:5px 0;}
.blog .sidebar .widget .menu li a { float:left; color:#999; font-family: 'Bree Serif', sans-serif;}
.blog .sidebar .widget .menu li a:hover{ text-decoration:none; color:#ef4048;}
.blog .sidebar .widget .menu li span{ float:right; color:#ccc;}
.blog .sidebar .widget .post{ width:100%; float:left; margin-bottom:20px;}
.blog .sidebar .widget .post:last-child{margin-bottom: 0;}
.blog .sidebar .widget .post img{ width:130px; float:left; padding-right:15px;}
.blog .sidebar .widget .post .post-content{ width:calc(100% - 130px); float:left; padding:0; text-align: left;}
.blog .sidebar .widget .post .post-content small{ width: 100%; float: left; font-size:12px; color:#0d416b;}
.blog .sidebar .widget .post .post-content h4{ font-family: 'Bree Serif', sans-serif; margin-top:10px;}
.blog .sidebar .widget .post .post-content h4 a{ float:left; font-size: 14px; color: #999}
.blog .sidebar .widget .post .post-content h4 a:hover{ color:#ef4048;}


/* CONTACT */
.contact{ width:100%; float:left; padding:60px 0; background:#f7f6fb;}
.contact #map{ width:100%; height:400px; float:left; border:5px solid #fff;}
.contact .contact-box{ width:100%; float:left; margin-bottom:60px;}
.contact .contact-box i{ width:80px; height:80px; float:left; margin-right:20px; line-height:80px; background:#0d416b; color:#fff; font-size:30px; text-align:center; border-radius: 50%;}
.contact .contact-box h5{ display:block; font-size:22px; margin-top:0; font-weight:700; color:#ef4048;}
.contact .contact-box .content{}
.contact .contact-box .content span{font-family: 'Bree Serif', sans-serif; opacity:0.6;}



/* FOOTER */
.footer{ width:100%; float:left; padding-top:50px; background:#0d416b; color:#fff;}
.footer .newsletter{ width:100%; float:left; text-align:center; padding:0 20%;}
.footer .newsletter h4{ width:100%;font-size:30px; font-weight:700; margin-bottom:30px; margin-top:0;}
.footer .newsletter small{ width:100%; float:left;}
.footer .newsletter input[type="text"]{ width:69%; height:50px; float:left; padding:0 20px; border:none; border-radius:50px; color:#232527;}
.footer .newsletter button[type="submit"]{ width:30%; height:50px; float:right; padding:0 20px; border:none; margin-bottom:20px; border-radius:50px; background:#ef4048; box-shadow:0 20px 30px rgba(0,0,0,0.05); font-weight:700;}
.footer .newsletter button[type="submit"]:hover{box-shadow:0 20px 30px rgba(0,0,0,0.2);}
.footer .sub-footer{ width:100%; float:left; border-top:1px solid rgba(255,255,255,0.2); margin-top:50px; padding:20px 0;}
.footer .sub-footer .social-media{ width:100%; float:left; margin:0; padding:0;}
.footer .sub-footer .social-media li{ display:inline-block; margin:0 5px; padding:0; list-style:none;}
.footer .sub-footer .social-media li a{ color:#fff;}
.footer .sub-footer span{ display:inline-block;}
.footer .sub-footer span a{ color:#fff; font-weight:700;}



/* RESPONSIVE FOR TABLETS */
@media only screen and (max-width: 989px), only screen and (max-device-width: 989px) {
.about-forro a{ margin-bottom: 100px;}
.gallery .owl-carousel{padding: 0;}
.developers figure{ margin-bottom: 30px;}
.clients ul li{width: 33.33333%;}
.pricing .price-box .price-header{padding: 30px 0;}
.pricing .price-box ul{ font-size: 13px;}
.home-blog .post .post-image{ width: 100%;}
.home-blog .post .post-content{ width: 100%;}
.footer .newsletter{ padding: 0 10%;}
.footer .sub-footer{font-size:13px;}
}



/* RESPONSIVE FOR MOBILES */
@media only screen and (max-width: 767px), only screen and (max-device-width: 767px) {
.navbar-default .navbar-toggle{ margin-top: 12px; border:none;}
.navbar-default .navbar-toggle:hover{background: none;}
.navbar-default .navbar-toggle .icon-bar{ height: 3px; background: #fff; border-radius: 0;}
.cbp-spmenu-left.cbp-spmenu-open, .cbp-spmenu-push-toright .navbar-fixed-top .cbp-spmenu-left.cbp-spmenu-open{background:#000; padding: 30px 20px;}
.navbar-default .purchase{ margin: 0; margin-bottom: 30px; float: left;}
.navbar-default .navbar-nav{ border: none;}
.navbar-default .navbar-nav li{ width: 100%;}
.title{ font-size: 50px;}
.header .hero-content img{ width: 100%; height: auto;}
.icon-features{padding-bottom: 100px;}
.demo-video h3{ font-size: 50px;}
.download-bar h3{ font-size: 50px;}
.download-bar a{ margin-bottom: 20px;}
.developers .title{ font-size: 50px;}
.clients ul li{ width: 50%;}
.fun-facts .symbol{ margin-bottom: 30px;}
.pricing .price-box{ margin-bottom: 30px;}
.pricing .price-box.recommended{margin-top: 0;}
.home-blog .post{ margin-bottom: 30px;}
.home-blog .post .post-image{padding-right: 0;}
.footer .newsletter{ padding: 0;}
.footer .newsletter input[type="text"]{ width: 100%; margin-bottom: 20px;}
.footer .newsletter button[type="submit"]{ float: none; width: 50%;}
.footer .sub-footer{ text-align: center;}
.footer .sub-footer span{ width: 100%; text-align: center;}
}