/*
Theme Name:   Property Finance Online
Description:  Mortgage Expert
Author:       Angelic Sanoy
Author URL:   http://www.bookwormhead.com/
Template:     Extra
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  property-finance-online
*/

/* Write here your own personal stylesheet */


/* Write here your own personal stylesheet 
1. Global
  1.1 Animation (bouncing)
3. Module
  3.1 Tab Blog
  3.2 Image to Right Blog
  3.4 Buttons
  3.5 Timeline
*/

/*
0. Universal
  0.1 Post
  0.2 Salesforce Form
  0.3 Main Content
1. Category
2. Footer
3. Header
   3.1 Navigation
   3.2 Green Btn
4. Hero Banner
5. Sidebar
*/

div#hero-content {
    max-width: 1300px;
    left: 16%;
}

.grid-layout {
	display:grid;
	padding:1rem 0;
	grid-template-columns:repeat(4,24%);
	 justify-items:stretch;
}

.grid-layout div {
	margin:2rem 1rem;
}

@media(max-width:768px){
	.grid-layout {
	grid-template-columns:repeat(2,47%);
	
}

}
.et_pb_row.grid-home-btn .et_pb_column {
    display: grid;
    grid-template-columns: repeat(3,30%);
	grid-gap:2px;
}

/*ET bug 1.26.2019*/
div#main-header-wrapper {
    height: auto!important;
}

/* start of timeline*/

/*Selector*/
h4 {
  color: #0096d6;
}

#step-wrapper .et_pb_column {
  margin: 0 auto;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 46% 8% 46%;
      grid-template-columns: 46% 8% 46%;
      grid-template-areas: 
 "step1 vline step2"
 "step3 vline step4"
 "step5 vline step6"
 "step7 vline step8"
 "step9 vline step10"
 "step11 vline step12"
 "step13 vline step14"
 "step15 vline step16";
}

.et_pb_module.vline {
  height: auto;
  width: 2px;
  margin: 0 auto;
  background: #0096d6;
  grid-area: vline;
}

.et_pb_module.step1 { grid-area: step1;}
.et_pb_module.step2 {grid-area: step2;}
.et_pb_module.step3 { grid-area: step3;}
.et_pb_module.step4 { grid-area: step4;}
.et_pb_module.step5 { grid-area: step5;}
.et_pb_module.step6 { grid-area: step6;}
.et_pb_module.step7 { grid-area: step7;}
.et_pb_module.step8 { grid-area: step8;}
.et_pb_module.step9 { grid-area: step9;}
.et_pb_module.step10 { grid-area: step10;}
.et_pb_module.step11 { grid-area: step11;}
.et_pb_module.step12 { grid-area: step12;}
.et_pb_module.step13 { grid-area: step13;}
.et_pb_module.step14 { grid-area: step14;}
.et_pb_module.step15 { grid-area: step15;}
.et_pb_module.step16 { grid-area: step16;}

img.timeline-img {
  max-width: 120px;
}

img.timeline-img:hover {
	transform: scale(1.1);
}

@media (min-width: 1100px) {
.et_pb_module.step1,
.et_pb_module.step3,
.et_pb_module.step5,
.et_pb_module.step7,
.et_pb_module.step9,
.et_pb_module.step11,
.et_pb_module.step13,
.et_pb_module.step15{
    text-align: right;
  }
	
.et_pb_module.step2,
.et_pb_module.step4,
.et_pb_module.step6,
.et_pb_module.step8,
.et_pb_module.step10,
.et_pb_module.step12,
.et_pb_module.step14{
    text-align: left;
  }
}

@media (max-width: 62em) {
 #step-wrapper .et_pb_column {
    display: block;
  }
  .vline {
    display: none;
  }
}


/* end of timeline*/

/*Calculator List */

ul#menu-calculator-widget {
	display:grid;
	grid-template-columns:50% 50%;
}

ul#menu-calculator-widget li::before {
  font-family: FontAwesome;
  content: "\f1ec";
  color:#fff;
  margin:0 5px;
}


ul#menu-calculator-widget li {
	margin-left:-5%;
	width:90%;
    background: #0096D8;
    list-style: none;
    padding: 1rem;
	border-radius:5px;
}

ul#menu-calculator-widget li:hover{
    background: #35363A;
}

ul#menu-calculator-widget li a {
   color: #fff; 
}

@media(max-width:45em){
ul#menu-calculator-widget {
	display:block;
}
}

/*end of calc list */

#grid_7 .et_pb_row_0.et_pb_row {
  background-color: #fff;
  max-width: 100%;
}

/*3.5 Module - Timeline*/
.v-line.et_pb_column {
	border-left:1px solid #0096D6;
	margin-left:-2rem;
	z-index:0;
}

.left-blurb.et_pb_blurb {
	margin-left:-4rem;
	z-index:9;
}

.right-blurb.et_pb_blurb {
	margin-right:-8rem;
	z-index:99;
}



@media(max-width:1024px){
.left-blurb.et_pb_blurb {
	margin-left:-3rem;	
}
	
ul#menu-calculator-widget li {
 width:100%;
    
}}

.right-blurb.et_pb_blurb {
	margin-right:-4rem;
}


.left-blurb img,
.right-blurb img {
	border-radius:50%;
	
	
}

.left-blurb .et_pb_main_blurb_image,
.right-blurb .et_pb_main_blurb_image {
	width:120px;
	z-index:999;
	
}

.p-space.et_pb_divider_hidden {
    padding-bottom: 5rem;
}

.p-space2.et_pb_divider_hidden {
    padding-bottom: 12rem;
}

.right-blurb .et_pb_blurb_container {
	padding-right:15px;
}

.right-blurb .et_pb_blurb_content {
	display:grid;
	grid-template-columns: 80% 20%;
	grid-template-areas:
		'blurbContent blurbImg';
}

.right-blurb .et_pb_main_blurb_image {
	grid-area: blurbImg;
}

.right-blurb .et_pb_blurb_conten {
	grid-area: blurbContent;
}

.landscape_blog {
	display:none;
}

.landscape_blog.active-blog,
.landscape_blog.activated-blog{
	display:block;
}

/* 0.Universal */
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #0096D6!important;
   
}

h1 { 
  color: #0096D6;
  font-weight: 300;
}

body {background-color: #fff;}

html body h2{
    font-size: 1.5rem;
}

.nav li ul {width:300px;}

.et_pb_widget_area_right {
    padding: 0!important;
    margin: 0!important;
}

/*0.1 Post */
.post-header {
    display: none;
}

h4.title a {
    font-size: 1rem;
}
/*end of post */

/*0.2 Salesforce Form */
input.salesforce-btn {
background-color:#0CB500;
box-shadow: 2px -4px 1px 0px rgba(0,0,0,0.3);
color: #fff;
border:none;
height:40px;
width:100%;
}

input.salesforce-btn:hover {
background-color:#0096D6;
 

}

input.sf-fields  {
height:33px;
width:100%;
 border: 1px solid black;
}
/*Salesforce Form  */

/**0.03 Main Content  */
#main-content {
    padding-top: 0px;
}

/*Main Content  */

/*1. Category Page */
.module.post-module, .module.tabbed-post-module,
.module.posts-carousel-module.et_pb_extra_module {
    border-top-color: #0998D7!important;
}

/*end of 1.Category Page */


/*2. Footer */
#footer{
	background:white;
}

#footer .et_pb_widget li a {
	padding: 5px 0!important;
	text-decoration: none;
	font-weight:normal;
}


#footer .et_pb_widget li {padding:5px 0px!important}


@media(max-width:768px){
p#footer-info{
    font-size: 7px!important;
    text-align:left!important;
    margin-left:1rem;
  }

.et_pb_section_4.section_has_divider.et_pb_bottom_divider .et_pb_bottom_inside_divider {
    background-size: 200% 100px!important;
  }

#footer .et_pb_widget:first-of-type {
    padding-top:0px;
  }

#footer .et_pb_widget {
    margin: 0 1rem;
}}

/*end of2. Footer*/


/*3. Header*/
@media(min-width:1200px){
ul#et-menu {
    margin-top: 2rem;
}}

.et_fullwidth_nav #main-header .container {
  height:75px;
}

@media(max-width:1024px){
  .left-right #logo {
    width: 80%;
    height: 80%;
    margin-top: -5%;
    object-fit: contain;
}
  
  .show-menu-button{
    margin-top:-2rem;
  }
  div#main-header {
    height: 75px;
  }}




  /*3.2 Green Button */
.book_btn {position:relative;top:-2.6em;}
/*end of 3. Header*/


/* 4 . Hero Banner */
#post {
    min-height: 250px;
    padding: 5% 5% 10% 5%;
    object-fit:cover;
}


#color-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
    height: 100%;
    max-height: 470px;
background: #fff;
background: -moz-linear-gradient(to right,rgba(255,255,255,0.8),rgba(255,255,255,0.8),rgba(255,255,255,0.1), transparent);
background: -webkit-linear-gradient(to right,rgba(255,255,255,0.8),rgba(255,255,255,0.8),rgba(255,255,255,0.1), transparent);
background: linear-gradient(to right,rgba(255,255,255,0.8),rgba(255,255,255,0.8),rgba(255,255,255,0.1), transparent);

}

@media (max-width:414px) {
  #color-overlay { 
  max-width:325px;
  background: -moz-linear-gradient(to right,rgba(255,255,255,0.8),rgba(255,255,255,0.8),rgba(255,255,255,0.8), transparent);
  background: -webkit-linear-gradient(to right,rgba(255,255,255,0.8),rgba(255,255,255,0.8),rgba(255,255,255,0.8), transparent);
  background: linear-gradient(to right,rgba(255,255,255,0.8),rgba(255,255,255,0.8),rgba(255,255,255,0.8), transparent);
  }
 
}

#hero-content {
    z-index: 999;
    position: absolute;
   
}


@media(min-width:1024px){
#hero-content h1{
width:65vw;
}}

#hero-content h1 {
    font-size: 2rem;
    color: #0096D6;
}
/* 4. Hero Banner */

.other-dropDown li a:hover {
    background:#136ac2;
    padding:7px;
    width:100%;
   
}


/*5. Sidebar */
.et_pb_widget .widgettitle {
  background:transparent;
}


/*end of 5. Sidebar */

/*=======Icons========*/

.fa, .far, .fas,.fab  {
   font-size: 30px!important;
    color: #0096D6;
}

@media(max-width:515px) {
  .single-icon,div#btn-others{
    font-size: 10px;
    line-height:15px;
}
  
  ul#drop-down {
    font-size:14px;
  }

}


.social-icons {
    display: flex;
    align-items: stretch;
   
}

.social-icons .fab {
    margin: auto 1rem;
}

/*======end of icons========*/

/**/
#column_divider .et_pb_column_6 {
    border-right-width: 1px;
    border-right-color: #0096d6;
  
}

/*=======Grids========*/

/*7 column grid */

#grid_4 >.et_pb_column,
#grid_7  >.et_pb_column{
  display:grid;
 grid-gap:2rem;
}

#grid_4 >.et_pb_column {
grid-template-columns:repeat(4, 1fr);
  min-height: 120px;
}

#grid_7  >.et_pb_column {
  grid-template-columns:repeat(7, 1fr);
 
}

@media (max-width:768px){
  #grid_7 >.et_pb_column {
     grid-template-columns:repeat(3, 1fr);
  }
}


/*=======end of Grid========*/


/*awards page */
.grid-awards .et_pb_column img {
    max-height: 100px;
    object-fit: contain;
}

.grid-awards .et_pb_column {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(4,23%);
    grid-gap: 3%;
  
}

@media(max-width:515px) {
.grid-awards .et_pb_column {
 grid-template-columns: repeat(2,45%);
}}
/*end of awards page*/

/* Add your CSS code here.

For example:
.example {
    color: red;
}

For brushing up on your CSS knowledge, check out http://www.w3schools.com/css/css_syntax.asp

End of comment */ 

.resp-container.cal11 {
	padding-top:99%;
}
.resp-container.cal12 {
	padding-top:101%;
}
.resp-container.cal13 {
	padding-top:115%;
}	
.resp-container.cal14 {
	padding-top:111%;
}
.resp-container.cal15 {
	padding-top:109%;
}
.resp-container.cal16 {
	padding-top:105%;
}
.resp-container.cal17 {
	padding-top:105%;
}
.resp-container.cal18{
	padding-top:105%;
}
.resp-container.cal19 {
    padding-top: 70%;
}
.resp-container.cal20{
	padding-top:105%;
}
.resp-container.cal21{
	padding-top:130%;
}
.resp-container.cal22{
	padding-top:65%;
}
.resp-container.cal23{
	padding-top:113%;
}

.resp-container.cal25 {
	padding-top:80%;
}

@media (max-width:414px){
.resp-container.cal25 {padding-top:575%;}
.resp-container.cal1 {padding-top:305%;}
.resp-container.cal2{padding-top:340%;}
.resp-container.cal3{padding-top:350%;}
.resp-container.cal4{padding-top:250%;}
.resp-container.cal5{padding-top:335%;}
.resp-container.cal6{padding-top:400%;}
.resp-container.cal7{padding-top:260%;}
.resp-container.cal8 {padding-top: 310%;}
.resp-container.cal9 {padding-top: 355%;}
.resp-container.cal10 {padding-top: 385%;}
.resp-container.cal11 {padding-top: 420%;}
.resp-container.cal12 {padding-top: 405%;}
.resp-container.cal13 {padding-top: 390%;}
.resp-container.cal14 {padding-top: 480%;}
.resp-container.cal15 {padding-top: 320%;}
.resp-container.cal16 {padding-top: 470%;}
.resp-container.cal17 {padding-top: 370%;}
.resp-container.cal18 {padding-top: 555%;}
.resp-container.cal19 {padding-top: 490%;}
.resp-container.cal20 {padding-top: 565%;}
.resp-container.cal20 {padding-top: 565%;}
.resp-container.cal21 {padding-top: 500%;}
.resp-container.cal22 {padding-top: 365%;}
.resp-container.cal23 {padding-top: 390%;}
}

/*Global  */
.fa, .fas {
    font-weight: 900;
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #0095D6;
}

.dropdown i.fas.fa-calculator {
    font-size: 20px;
    margin-right: 1rem;
}

/*
1. Blog Module Listing 
2. Calculator
 

*/




/*Home*/


.page article{
    border-top-style: none;
}

.page article, .single article {
  box-shadow:none;
}




/* 2. calculator */
.resp-container {
    position: relative;
    overflow: hidden;
	margin:0;
	
}


.resp-container.cal1 {padding-top: 50%;}
.resp-container.cal2{padding-top:85%;}
.resp-container.cal3{padding-top:90%;}
.resp-container.cal4{padding-top:95%;}
.resp-container.cal5{padding-top:100%;}
.resp-container.cal6{padding-top:105%;}
.resp-container.cal7{padding-top:110%;}
.resp-container.cal8 { padding-top: 60%;}
.resp-container.cal9 {padding-top: 120%;}
.resp-container.cal10 {padding-top: 130%;}

.resp-container1 {
    position: relative;
    overflow: hidden;
    padding-top: 105%;
	margin:0;
	
}

.resp-iframe {
    position: absolute;
    top: 0;
    left: -9%;
    width: 100%;
    height: 100%;
    border: 0;
	margin:0;
}

@media screen and (max-width: 800px) {
#iframe-mobile {width: 400px;}
.resp-container { padding-top: 100%;}
.resp-iframe { left: 0%;}
}

/*end of 2. calculator */

/*3. Property Finance Calculator Page*/
.calc-list {
    background-color: #E4EBEB;
    padding: 1rem;
    left: 5%;
    width: 55vw;
    margin-bottom: 5%;
    position: relative;
}
.calc-list h3 {
color:#2EA3F2;
}

@media (max-width:768px){
	.calc-list {width:80vw;}
	ul#menu-calculator-widget {display:block;}
	
}

/*end of 3. Property Finance Calculator Page*/


/*Dropdown*/
.dropbtn {
    background-color: #fff;
    color: #000;
    text-transform: capitalize!important;
    padding: 16px;
    font-size: 16px;
    border: 2px;
    cursor: pointer;
    border-radius: 5px;
    height: 60px;
    box-shadow: 2px 2px 12px rgba(0,0,0,0.35);
}



.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #F1F1F1;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 100%;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 999999;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size:1.2rem;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

/*
/*Dropdown*/




.dropdown2 {
  position: relative;
  display: inline-block;
}

.dropbtn2:hover, .dropbtn2:focus {
  background-color: #F1F1F1;
}

.dropdown-content2 {
  display: none;
  position: absolute;
  min-width: 100%;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 999999;
}

.dropdown-content2 a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size:1.2rem;
}

.dropdown2 a:hover {background-color: #ddd;}

.show {display: block;}


*/




/*Desktop*/
.resp-container.cal99 {padding-top:99%;}
.resp-container.cal125 {padding-top:125%;}
.resp-container.cal86 {padding-top:86%;}
.resp-container.cal107 {padding-top:107%;}
.resp-container.cal108 {padding-top:108%;}
.resp-container.cal111 {padding-top:111%;}
.resp-container.cal115 {padding-top:115%;}
.resp-container.cal105 {padding-top:105%;}
.resp-container.cal95 {padding-top:95%;}
.resp-container.cal120 {padding-top:120%;}
.resp-container.cal121 {padding-top:121%;}
.resp-container.cal70 {padding-top:70%;}
.resp-container.cal100 {padding-top:100%;}
.resp-container.cal119 {padding-top:119%;}
.resp-container.cal98 {padding-top:98%;}
.resp-container.cal118 {padding-top:118%;}
.resp-container.cal72 {padding-top:72%;}
.resp-container.cal117 {padding-top:117%;}
.resp-container.cal93 {padding-top:93%;}


/*Mobile*/
@media(max-width:414px){
.resp-container.cal99 {padding-top:397%;}
.resp-container.cal125 {padding-top:383%;}
.resp-container.cal86 {padding-top:443%;}
.resp-container.cal107 {padding-top:375%;}
.resp-container.cal108 {padding-top:489%;}
.resp-container.cal111 {padding-top:520%;}
.resp-container.cal115 {padding-top:430%;}
.resp-container.cal105 {padding-top:460%;} 
.resp-container.cal95 {padding-top:559%;}
.resp-container.cal120 {padding-top:315%;}
.resp-container.cal121 {padding-top:510%;}
.resp-container.cal70 {padding-top:380%;}
.resp-container.cal100 {padding-top:457%;}
.resp-container.cal119 {padding-top:625%;}
.resp-container.cal98 {padding-top:630%%;}
.resp-container.cal118 {padding-top:635%;}
.resp-container.cal72 {padding-top:390%;}
.resp-container.cal117 {padding-top:425%;}
.resp-container.cal93 {padding-top:486%;}  
  
}





/* 1. Global */
/*1.1 bouncing animation */
.acuity-embed-button { 
animation: bouncing 0.5s both;
}

@keyframes bouncing {
0% {
transform: translatey(-45px);
-webkit-transform: translatey(-45px);
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in;
opacity:1;
}82%{
-webkit-transform: translatey(-6px);
transform: translatey(-6px);
}90%{
-webkit-transform: translatey(-4px);
transform: translatey(-4px);
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out;
}25%, 75%, 88%, 100%{
-webkit-transform: translatey(-0px);
transform: translatey(0px);}}
/* 1. end of Global */


/*3.1 Tab Blog */




.btn-holder{
	width:100%;
	text-align:center;
}
/*end of Tab Blog */

p.no-rating {
    font-size: 40px;
}


@media(min-width:924px){
p.no-rating {
    font-size: 60px;
}}

a.white-btn, a.green-btn {
	font-size: 15px;
    font-weight: 400;
	border-width: 12px;
	
}

/*3.4 buttons */
a.green-btn { 
   color: #FFFFFF;
    border-color: #0cb500;
    background-color: #0cb500;
}

a.white-btn { 
    color: #000000;
    border-color: #effcf8;
    background-color: #effcf8;
}

@media(max-width:63em){
.et_pb_section {
    padding: 0;
}

#hero-content h1 {
    font-size: 1.5rem;
    width: 100%;
    margin: 25% auto 0 auto;
}
}

/*3.2 Blog Module Listing 

.landscape_blog h2.entry-title{
    margin-top: -15%;
}

.landscape_blog .et_pb_post {
    margin-top: 1rem!important;
}

@media  and (min-width: 481px) and (max-width: 768px) { 
.landscape_blog article {
  display:block;
}
  
.landscape_blog h2.entry-title {
    font-size:1rem;

}
  
}



@media(min-width:1024px){
.landscape_blog article {
    display: grid;
    grid-template-columns: 50% 50%;
 	grid-column-gap: 10px;
	grid-template-rows: repeat(3,33.3%);
   	max-height:180px;
}
  

.landscape_blog .wp-pagenavi {
    margin-top: 11%;
  padding: 1% 0;
}
  

  

  
.landscape_blog article img {
  min-height:180px;
  object-fit:cover;
  margin: 1rem auto;
}

.landscape_blog h2.entry-title {
    line-height: 1;

}

.landscape_blog .et_pb_post p  {
  color: #000;
}



.landscape_blog .post-content a.more-link {
    margin-top: 1rem;
    text-transform: capitalize;
    border-bottom: 2px solid #0096D6;
    width: 80px;
    font-size: 14px;
}
}*/
/*3.2 Blog Module Listing */






.multiple-gradient:before {
content:"";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #00eace;
background:linear-gradient(69deg, rgba(7,25,71,1), rgba(9,87,128,0.7), rgba(0,0,0,.2));
}
.lp-form {width:35vw;}
@media(max-width:768px){
.lp-form {width:85vw;}
}

.mainContent {
  position: relative;
}

.sidebar {
  float: left;
  background: #65bdf8;

}
.sidebar.fixed {
  position: fixed;
  top: 0;
}
.grid-options {  
    display: grid;
    align-content: space-around;
    grid-template-columns: repeat(4,25%);
   
}

@media(max-width:769px){
.grid-options  {  
    display: block;
}
}

#grid_7 >.et_pb_column {
    background: #fff;
    padding-top:2%;
    z-index: 999;
}


#grid_7 >.et_pb_column.block-grid{
	display: block;
  
}
.btn-close, .hide-me {
	display:none;
    text-align: right;
}


.fas, .fa-bars {
    font-size: 2rem;
    color: #0698D7;
}

#drop-down li {
    list-style:none;
}



#drop-down {
	display:none;
    margin:0 auto;
    padding:1rem;
    text-align:left;
	

}

#drop-down li a {
    line-height: 2;
    text-decoration: none;
}

#drop-down li a:hover{
    color: #0698D7;
}


#flex-column >.et_pb_column{
	display:flex;
	padding:2% 5%;
	
}



#flex-column img {
	width:206px;
    height: 50px;
    object-fit: contain;
}