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

	

	Template Name:	AppX - Responsive App Landing Page Template

    Template URI: http://themeaone.com/

    Description: Responsive App Landing Page Template

    Author: ThemeAone

    Author URI: http://themeaone.com/

    Version: 1.0

	

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

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

	[Table of contents]

	

	1. Body

	2. Common Classes

	3. Header Area

	4. Hero Area

	5. About Area

	6. Feature Area

	7. Video Area

	8. Screen Shot Area

	9. FunFact Area

	10. Team Area

	11. Download Area

	12. Testimonial Area

	13. Pricing Area

	14. Subscribe Area

	15. Footer Area



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

.thankyou-content{

  margin-top: 26%!important;

}

.slideTwo .iframe{

  min-height: 550px;

  height: 100%;

  margin-bottom: 50px;

  margin-top: -20px;

}

 .customHeader{

    left: 0;

    padding: 30px 0;

    position: absolute;

    right: 0;

    top: 0;

    -webkit-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

    z-index: 99999;

}



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

	1. Body

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

/* .header{position:static!important;} */

.tbl-pros tr, .tbl-cons tr{vertical-align: top;}

.fa-times-circle-o{color:#f55151; font-size:24px; margin-right: 10px;}

.fa-check-circle-o{color:#2196F3; font-size:24px; margin-right: 10px;}

* {

  margin:0;

  padding:0;

}

body {

  color: #646464;

  font-family: "Roboto",sans-serif;

  font-size: 14px;

  font-style: normal;

  font-weight: 400;

  line-height: 26px;

  visibility: visible;

}

h1, h2, h3, h4, h5, h6, p {

  margin:0;

}

h1, h2, h3, h4, h5, h6 {

  color: #282528;

  font-weight: 700;

}

a, a:before, *:before, i, button, input {

  -webkit-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

}

*:focus {

	outline: medium none;

}

a, a:focus {

  color: inherit;

  outline: none;

  text-decoration: none;

}

a, a:hover {

  text-decoration: none;

}

ul, ol {

  list-style: none;

  margin: 0;

}

img {

  max-width: 100%;

}

input:-moz-placeholder, textarea:-moz-placeholder {

  opacity: 1;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {

  opacity: 1;

}

input::-moz-placeholder, textarea::-moz-placeholder {

  opacity: 1;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {

  opacity: 1;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

}

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

	2. Common Classes

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

.fix {

  overflow:hidden;

}

.section-padding {

  padding: 60px 0;

}

.bg-white {

  background-color: #fff;

}

.bg-gray {

  background-color: #f5f5f5;

}

.video-container, .mbYTP_wrapper {

  z-index: -9!important;

}

.buttonBar {

  display: none;

  opacity: 0;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  visibility: hidden;

}

/* Transparent Overlay & Solid Color Style */

.overlay, .solid, .overlay2 {

  position: relative;

  z-index: 1;

}

.overlay:before, .solid:before {

  bottom: 0;

  content: "";

  left: 0;

  opacity: 0.7;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";

  position: absolute;

  right: 0;

  top: 0;

  z-index: -1;

}

.solid:before {

  opacity: 1;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

}



#hero-area.overlay2:before{

  bottom: 0;

  content: "";

  left: 0;

  opacity: 0.6;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

  position: absolute;

  right: 0;

  top: 0;

  z-index: -1;

  width:75%;

  -webkit-clip-path: polygon(0 0, 100% 0, 65% 100%, 0% 100%);

  clip-path: polygon(0 0, 100% 0, 65% 100%, 0% 100%);



}

/* Section Title */

.section-title {

  margin-bottom: 50px;

}

.section-title h2 {

  font-size: 28px;

  line-height: 24px;

  margin-bottom: 15px;

  padding-bottom: 22px;

  position: relative;

  text-transform: uppercase;

}

.section-title.text-white h2 {

  color: #fff;

}

.section-title h2:before {

  bottom: 0;

  content: "";

  height: 1px;

  left: 50%;

  margin-left: -30px;

  position: absolute;

  width: 60px;

}

.section-title.text-white h2:before {

  background-color: #fff;

}

.section-title p {}

.section-title.text-white p {

  color: #fff;

  opacity: 0.8;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";

}

/*-- Slick Controls Style --*/

/* Dots */

.slick-dots {

  display: block !important;

  height: 12px;

  margin-top: 30px;

  text-align: center;

}

.slick-dots li {

  display: inline-block;

  height: 12px;

  margin: 0 5px;

  padding: 2px;

  vertical-align: top;

  width: 12px;

}

.slick-dots li.slick-active {

  padding: 0;

}

.slick-dots li button {

  background-color: transparent;

  border: 1px solid #bdbdbd;

  border-radius: 50px;

  height: 100%;

  text-indent: -99999px;

  width: 100%;

}

.slick-dots li.slick-active button {}

/* Arrow */

.slick-arrow {

  background-color: transparent;

  border: medium none;

  display: block;

  position: absolute;

  top: 50%;

  -webkit-transform: translateY(-50%);

      -ms-transform: translateY(-50%);

          transform: translateY(-50%);

  z-index: 9;

}

.slick-arrow:hover {

}

.slick-arrow i {

  display: block;

  font-size: 50px;

}

.slick-prev {

  left: -50px;

}

.slick-next {

  right: -50px;

}

/* Preloader */

.preloader {

  background-color: #fff;

  bottom: 0;

  left: 0;

  position: fixed;

  right: 0;

  top: 0;

  z-index: 99999;

}

.spinner {

  height: 40px;

  left: 50%;

  margin-left: -20px;

  margin-top: -20px;

  position: absolute;

  top: 50%;

  width: 40px;

}

.double-bounce1, .double-bounce2 {

  width: 100%;

  height: 100%;

  border-radius: 50%;

  opacity: 0.6;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";

  position: absolute;

  top: 0;

  left: 0;

  

  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;

  animation: sk-bounce 2.0s infinite ease-in-out;

}

.double-bounce2 {

  -webkit-animation-delay: -1.0s;

  animation-delay: -1.0s;

}

@-webkit-keyframes sk-bounce {

  0%, 100% { -webkit-transform: scale(0.0) }

  50% { -webkit-transform: scale(1.0) }

}

@keyframes sk-bounce {

  0%, 100% { 

    transform: scale(0.0);

    -webkit-transform: scale(0.0);

  } 50% { 

    transform: scale(1.0);

    -webkit-transform: scale(1.0);

  }

}

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

	3. Header Area

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

.header {

  left: 0;

  padding: 15px 0 8px;

  position: absolute;

  right: 0;

  top: 0;

  -webkit-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

  z-index: 99999;

  background-color: #fff;

}

.header.stick {

  background-color: #fff;

  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);

  padding: 10px 0;

  position: fixed;

}

/* Logo */

.logo {

  //background-image: url("img/logo-white.png");

  background-image: url("img/logo-colorized.png");

  background-size: contain;

  background-repeat: no-repeat;

  width:400px;

  height:47px;

  display: block;

}

.logo.thank-you-logo {

  background-image: url("img/logo-white.png");

  background-size: contain;

  background-repeat: no-repeat;

  width:400px;

  height:47px;

  display: block;

}

.logo:hover, .logo:focus {

  color: #fff;

}

.logo span {}

.header.stick .logo {

  background-image: url("img/logo-colorized.png");

  background-size: contain;

  background-repeat: no-repeat;

  width:400px;

  height:47px;

}

.header.stick .logo span {

}

/* Menu Toggle */

.menu-toggle {

  background-color: transparent;

  border: medium none;

  color: #282528;

  display: none;

  float: right;

  height: 40px;

  margin-top: 9px;

  width: 40px;

}

.menu-toggle i {

  display: block;

  font-size: 30px;

  line-height: 40px;

}

/* Menu */

.menu {

  padding: 10px 0;

  float: right;

}

.menu nav {}

.menu nav ul {}

.menu nav ul li {

  display: block;

  float: left;

  margin-right: 30px;

}

.menu nav ul li:last-child {

  margin-right: 0;

}

.menu nav ul li a {

  color: #0a6b1e;

  display: block;

  font-size: 16px;

  font-weight: 600;

  padding: 6px 0 6px;

  position: relative;

  text-transform: uppercase;

}

.menu nav ul li a:before {

  background-color: #fff;

  border-radius: 50px;

  bottom: 0;

  content: "";

  height: 2px;

  left: 0;

  opacity: 0;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  position: absolute;

  width: 100%;

}

.header.stick .menu nav ul li a {

  color: #4f4c4d;

}

.header.stick .menu nav ul li:hover a, .header.stick .menu nav ul li.active a {

}

.header.stick .menu nav ul li a:before {

}

.menu nav ul li:hover a:before, .menu nav ul li.active a:before {

  left: 50%;

  margin-left: -8px;

  opacity: 1;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  width: 16px;

}

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

	4. Hero Area

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

.MortgageCalc-banner-area{

  padding: 100px;

  background: url(img/rouwhmswmp0-nathalia-bariani.jpg) no-repeat scroll center center;

  -webkit-background-size: cover;

  background-size: cover;



}

.hero-banner-area {

  background: url(img/fha-image.png) no-repeat scroll center center;

  -webkit-background-size: cover;

  background-size: cover;

}

.parallax-window, .slideshow-bg {

  background-image: none;

}

.video-bg, .youtube-bg {  

}

.hero-wrapper {

  position: relative;

  width: 100%;

  z-index: 9;

  padding: 180px 0 0;

}

/* Hero Image */

.hero-image {}

.hero-image img {

  padding-left: 50px;

  margin-bottom: 50px;

}

/* Hero Content */

.hero-content {

  margin-top: 80px;

  padding-bottom:50px;

}

.hero-content h1 {

  color: #fff;
  font-size: 42px;
  font-weight: 400;
  margin-bottom: 30px;
  font-family: 'Verdana';

}

.hero-content h1 span {

  font-weight: 900;

}

.hero-content p {

  color: #fff;

  margin-bottom: 50px;

}

/* Hero Button */

.hero-content .hero-btn{}

.hero-content .hero-btn .btn {

  background-color: transparent;

  border-radius: 0;

  box-shadow: none;

  color: #fff;

  display: inline-block;

  font-weight: 700;

  margin-right: 30px;

  padding: 12px 35px;

  text-transform: uppercase;

  box-shadow: 2px 2px 2px #333;

}

.hero-content .hero-btn .btn:last-child {

  margin: 0;

}

.hero-content .hero-btn .btn.active, .btn-success {
  font-family: 'Verdana', arial, sans-serif;
  background-color: #34ba53;
  color:#fff!important;
  font-size: 20px;
  font-weight: 600;

}

.hero-content .hero-btn .btn:hover {

  background-color: #0a6b1e;

  color:#ffffff!important;

}

.hero-content .hero-btn a.btn:last-child {

  margin-right: 0;

}

.hero-content .hero-btn .btn i {

  display: block;

  float: left;

  font-size: 20px;

  line-height: 24px;

  margin-right: 10px;

}

.hero-content .hero-btn .btn span {

  display: block;

  float: left;

  line-height: 24px;

}

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

	5. About Area

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

.about-area {}

.single-about {}

.single-about i {

  font-size: 40px;

  margin-bottom: 20px;

  

}

.single-about:hover i {

  -webkit-transform: rotateY(180deg);

          transform: rotateY(180deg);

}

.single-about h4 {

  font-size: 18px;

  margin-bottom: 15px;

  text-transform: capitalize;

}

.single-about p {}

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

	6. Feature Area

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

.feature-area{}

/* Feature Content */

.feature-content {

  margin-top: 50px;

}

/* Single Feature */

.single-feature {

  margin-bottom: 50px;

}

.single-feature:last-child {

  margin-bottom: 0;

}

.single-feature i {

  font-size: 40px;

  text-align: center;

  width: 40px;

}

.single-feature:hover i {

  -webkit-transform: rotateY(180deg);

          transform: rotateY(180deg);

}

.feature-left .single-feature i {

  display: block;

  float: right;

  margin-left: 30px;

}

.feature-right .single-feature i {

  display: block;

  float: left;

  margin-right: 30px;

}

.single-feature h4 {

  font-size: 18px;

  margin-bottom: 15px;

  overflow: hidden;

  text-transform: capitalize;

}

.single-feature p {

  overflow: hidden;

}

/* Feature Image */

.feature-image{}

.feature-image img {

  padding: 0 30px;

}

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

	7. Video Area

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

.video-area {

  background: rgba(0, 0, 0, 0) url("img/bg/1.jpg") no-repeat scroll center center;

  -webkit-background-size: cover;

  background-size: cover;

  padding: 200px 0;

}

.video-btn, .video-btn:focus {

  color: #fff;

  display: inline-block;

}

.video-btn:hover {

  color: #fff;

  -webkit-transform: scale(1.1);

      -ms-transform: scale(1.1);

          transform: scale(1.1);

}

.video-btn span {

  display: block;

  font-size: 18px;

  line-height: 60px;

  margin: 0 15px;

  text-transform: capitalize;

}

.video-btn span:first-child {

  float: left;

}

.video-btn span:last-child {

  float: right;

}

.video-btn i {

  font-size: 60px;

}

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

	8. Screen Shot Area

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

.screenshot-area{}

.screenshot-slider {}

.screenshot-slider .slick-list {

  padding-bottom: 60px !important;

  padding-top: 60px !important;

}

.single-screen {

  z-index: 1;

  -webkit-transition: all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

}

.single-screen.slick-active {

  -webkit-transform: scale(1.15);

      -ms-transform: scale(1.15);

          transform: scale(1.15);

  z-index: 2;

}

.single-screen.slick-center {

  position: relative;

  -webkit-transform: scale(1.3);

      -ms-transform: scale(1.3);

          transform: scale(1.3);

  z-index: 3;

}

.single-screen img {

  width: 100%;

}

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

	9. FunFact Area

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

.funfact-area {

  background: rgba(0, 0, 0, 0) url("img/igotthekeys.jpg") no-repeat fixed center center;

  -webkit-background-size: cover;

  background-size: cover;

  padding: 100px 20px;

  min-height: 400px;

  -webkit-box-shadow: inset -9px -10px 300px 196px rgba(34,34,34,0.25);

  -moz-box-shadow: inset -9px -10px 300px 196px rgba(34,34,34,0.25);

  box-shadow: inset -9px -10px 300px 196px rgba(34,34,34,0.25);



}

.single-funfact{}

.single-funfact i {

  color: #fff;

  font-size: 46px;

  margin-bottom: 20px;

}

.single-funfact h1 {

  color: #fff;

  font-size: 46px;

  font-weight: 800;

  line-height: 1;

  margin-bottom: 15px;

}

.single-funfact p {

  color: #fff;

  text-transform: capitalize;

}

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

	10. Team Area

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

.team-area{}

.team-wrapper {

  float: left;

  width: 100%;

}

.single-team{}

.single-team .image {

  position: relative;

}

.single-team .image:before {

  bottom: 0;

  content: "";

  left: 0;

  opacity: 0;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  position: absolute;

  right: 0;

  top: 0;

}

.single-team:hover .image:before {

  opacity: 0.7;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";

  top: 0;

}

.single-team .image img {

  width: 100%;

}

.single-team .content {

  bottom: -30px;

  left: 15px;

  opacity: 0;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  padding: 25px;

  position: absolute;

  right: 15px;

  -webkit-transition:all 0.3s ease 0s;

  transition: all 0.3s ease 0s;

}

.single-team:hover .content {

  bottom: 0;

  opacity: 1;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

}

.single-team .content h4 {

  color: #fff;

  font-size: 18px;

  margin-bottom: 5px;

  text-transform: capitalize;

}

.single-team .content p {

  color: #fff;

  line-height: 18px;

  margin-bottom: 15px;

  text-transform: capitalize;

}

.team-social {}

.team-social a {

  color: #fff;

  display: block;

  float: left;

  margin-right: 10px;

  padding: 0 3px;

}

.team-social a:hover {

  opacity: 0.7;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

}

.team-social a i {

  display: block;

  line-height: 16px;

}

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

	11. Download Area

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

.download-area {

  background: rgba(0, 0, 0, 0) url("img/bg/4.jpg") no-repeat scroll center center;

  -webkit-background-size: cover;

  background-size: cover;

}

.download-wrapper {}

.download-wrapper a {

  border: 2px solid #fff;

  border-radius: 50px;

  color: #fff;

  display: inline-block;

  margin: 0 10px;

  padding: 10px 30px;

  text-transform: uppercase;

}

.download-wrapper a:hover {

  background-color: #fff;

}

.download-wrapper a i {

  display: block;

  float: left;4

  font-size: 20px;

  line-height: 24px;

  margin-right: 10px;

}

.download-wrapper a span {

  display: block;

  float: left;

  line-height: 24px;

}

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

	12. Testimonial Area

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

.testimonial-area{}

.testimonial-slider{}

.single-testimonial{}

.single-testimonial > i {

  color: #ddd;

  font-size: 50px;

  margin-bottom: 30px;

}

.single-testimonial > p {

  display: block;

  font-style: italic;

  margin-bottom: 30px;

}

.single-testimonial .author {

  display: inline-block;

}

.single-testimonial .author img {

  border-radius: 50%;

  display: block;

  height: 80px;

  margin: 0 auto 15px;

  width: 80px;

}

.single-testimonial .author .details {}

.single-testimonial .author .details h4 {

  font-size: 18px;

  margin-bottom: 5px;

  text-transform: capitalize;

}

.single-testimonial .author .details p {

  font-size: 13px;

  line-height: 18px;

  text-transform: capitalize;

}

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

	13. Pricing Area

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

.pricing-area{}

/* Single Pricing */

.single-pricing {

  background-color: #fff;

  border-radius: 4px;

}

.single-pricing.active {

}

/* Pricing Head */

.pricing-head {

  padding: 30px 0;

}

/* Package */

.package {

  font-size: 18px;

  line-height: 1;

  margin-bottom: 20px;

  text-transform: uppercase;

}

.active .package {

  color: #fff;

}

.package-price {

  font-size: 46px;

  font-weight: 900;

  line-height: 1;

}

.active .package-price {

  color: #fff;

}

.package-limit {

  font-size: 16px;

  margin-top: 5px;

  text-transform: capitalize;

}

.active .package-limit {

  color: #fff;

}

/* Pricing Data */

.pricing-data {}

.pricing-data li{}

.active .pricing-data li {

  color: #fff;

}

.pricing-data li + li {

  margin-top: 10px;

}

/* Pricing Button */

.pricing-btn {

  padding: 50px 0;

}

.pricing-btn .btn {

  background-color: transparent;

  border: 2px solid #282528;

  border-radius: 50px;

  color: #282528;

  display: inline-block;

  margin: 0 10px;

  padding: 10px 30px;

  text-transform: uppercase;

}

.active .pricing-btn .btn {

  border-color: #fff;

  color: #fff;

}

.pricing-btn .btn:hover {

  background-color: #282528;

  color: #fff;

}

.active .pricing-btn .btn:hover {

  background-color: #fff;

}

.pricing-btn .btn i {

  display: block;

  float: left;

  font-size: 20px;

  line-height: 24px;

  margin-right: 10px;

}

.pricing-btn .btn span {

  display: block;

  float: left;

  line-height: 24px;

}

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

	14. Subscribe Area

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

.subscribe-area {

  background: rgba(0, 0, 0, 0) url("img/couplekeys.jpg") no-repeat scroll center center;

  -webkit-background-size: cover;

  background-size: cover;

}

.subscribe-wrapper {}

/* Subscribe Form */

.subscribe-form {

  display: inline-block;

}

.subscribe-form input {

  background-color: transparent;

  border: 2px solid #fff;

  border-radius: 50px;

  color: #fff;

  display: block;

  float: left;

  height: 44px;

  margin-right: 15px;

  padding: 10px 20px;

  width: 320px;

}

.subscribe-form input[type="submit"] {

  background-color: transparent;

  border: 2px solid #fff;

  border-radius: 50px;

  color: #fff;

  font-weight: 500;

  height: 44px;

  padding: 6px 30px;

  text-transform: uppercase;

  width: auto;

}

.subscribe-form input[type="submit"]:hover {

  background-color: #fff;

}

/* Subscribe Alerts */

.mailchimp-alerts{}

.mailchimp-alerts > div {

  margin-top: 15px;

}

.mailchimp-submitting {

  color: #fff;

}

.mailchimp-success {

  color: #1E8514;

}

.mailchimp-error {

  color: #f00;

}

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

	15. Footer Area

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

.footer-area {

  padding: 50px 0;

}

.footer-wrapper{}

/* Footer Logo */

.footer-logo {

  margin: 0px 0px 30px;

}

/* Footer Social */

.footer-social {

  margin-bottom: 20px;

}

.footer-social a {

  border-radius: 50%;

  display: inline-block;

  height: 30px;

  width: 30px;

}

.footer-social a:hover {

  color: #fff;

}

.footer-social a i {

  display: block;

  font-size: 14px;

  line-height: 30px;

}

/* Copyright */

.copyright{}

.copyright a{}

.copyright a:hover {

}



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

  #hero-area.overlay2:before{

    width:100%!important;

    -webkit-clip-path: none;

    clip-path: none;

  }



}

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

  #hero-area.overlay2:before{

    width:90%;

  }

  #slideOne p{

    font-size: 14px!important;

    line-height: 22px!important;

    margin-top: 15px;

  }

  .thankyou-content{

  margin-top: 32%!important;

  }

}



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

  #hero-area.overlay2:before{

    width:100%!important;

    -webkit-clip-path: none;

    clip-path: none;

  }

  #slideOne{
    margin-left: -40px;
    margin-top:20px;
  }
  .header .logo{
    background-size: 280px!important;
    width: 300px!important;
    height: 45px!important;
    margin-left: -18px!important;
  }

  .hero-content .hero-btn .btn{
    padding: 10px 25px!important;
    font-size: 18px!important;

  }
  .hero-content h1{
    font-size: 28px!important;
    margin-bottom: 30px!important;
  }
  .slideTwo .iframe{
    margin-top: -100px;
  }

}

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

  .thankyou-content{

  margin-top: 55%!important;

  }

}
.display-none {
    display: none;
}