/* 
    Created on : Nov 16, 2017, 3:44:35 PM
    Author     : Gary Cooke
    Website    : Lending Frog Flex 160 Product Microsite
*/

/*********************
**********************
GLOBAL CALLS
************************
*************************/

/* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        body {font-size: 14px !important;}
/******* Global Style ********/
h1.header {background-color: #6cc04a; color: #fff; padding: 10px; text-align: center; width: 100%; top: 0; position: relative; border-top-left-radius: 20px; border-top-right-radius: 20px; margin-top: 0px;}
h1 {color: #fff; margin-top: 20px; font-size: 2em !important;}
h2, .h2 {font-size: 1.5rem !important;}
.green {color: #6cc04a}
.bg-inverse {background-color:#00acda}
footer {background-color: #64b842; padding: 20px 0px;}
.logo {width: 300px;margin-top: 15px;}
.navbar {background-color: #00acda; z-index: 9999; width: 100%;}
.gdir {margin-top: -110px; text-align: center;}
.pad-top-20{padding-top: 20px;}
.btn-danger {background: #F47E21;}
hr {border-color: #00acda;}
.btn {width: 80%;}
.box {border: 1px solid #fff;background-color: #fff; -webkit-box-shadow: 4px 10px 5px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 4px 10px 5px 0px rgba(0,0,0,0.25);
box-shadow: 4px 10px 5px 0px rgba(0,0,0,0.25); text-align: center; margin-top: -15px;margin-bottom: 20px; padding-top: 20px}
ul.orng-dot {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.orng-dot li {
  padding-left: 1em; 
  text-indent: -.7em;
}

ul.orng-dot li::before {
  content: "• ";
  color: red; /* or whatever color you prefer */
}

/******* Header Styles *******/
.green-back {background-color: #6cc04a; z-index: 8888; position: relative;}
.navbar-fixed-top {position: relative; z-index: 9999;}
.map {margin-bottom: 20px; max-height: 667px;  text-align: center;}

/*** Apply Form ***/
.form-style {background-color: #fff; border: 2px #fff solid; border-radius: 20px; -webkit-box-shadow: 4px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 4px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 4px 10px 5px 0px rgba(0,0,0,0.75); text-align: center; margin-top: 10px; padding: 20px 0px 10px 0px;}

/*** Accordian ***/
.faq-wrapper {
  margin-bottom: 20px;
  border-top: 1px solid #f0f0f0;
  background: #fff;
  transform: translateZ(0);
  -webkit-box-shadow: 0px 6px 42px -14px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 6px 42px -14px rgba(0,0,0,0.75);
box-shadow: 0px 6px 42px -14px rgba(0,0,0,0.75);
}

input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

label img, label p {
  display: inline-block;
  vertical-align: top;
}

label img {
  margin-right: 10px;
  height: 1.4em;
}

label p {
  line-height: 1.4em;
}

label {
  position: relative;
  display: block;
  margin: 0 0 0 16px;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  font-size: 1em;
  line-height: 1.2em;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

label:after {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -10px;
  height: 20px;
  content: '>';
  line-height: 20px;
  transform: rotate(90deg);
}

section {
  overflow: hidden;
  height: 0;
  transition: .3s all;
}


#question1:checked ~ #answer1,
#question2:checked ~ #answer2,
#question3:checked ~ #answer3,
#question4:checked ~ #answer4 {
  height: auto;
}


#mquestion1:checked ~ #manswer1,
#mquestion2:checked ~ #manswer2,
#mquestion3:checked ~ #manswer3,
#mquestion4:checked ~ #manswer4 {
  height: auto;
}

section p, section li {
  margin: 0;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
  color: #999;
  font-size: 1em;
  line-height: 1.2em;
}

/*** off canvas nav ***/
a.nav-expander {
  color: #FFFFFF;
  display: block;
  font-size: 15px;
  font-weight: 400;
  height: 50px;
  margin-right: 0;
  position: absolute;
  text-decoration: none;
  text-transform: uppercase;
  top: 0;
  right: 1%;
  transition: right 0.3s ease-in-out 0s;
  z-index: 12;

  transition: right 0.3s ease-in-out 0s;
  -webkit-transition: right 0.3s ease-in-out 0s;
  -moz-transition: right 0.3s ease-in-out 0s;
  -o-transition: right 0.3s ease-in-out 0s;

}

a.nav-expander:hover {
  cursor: pointer;
}

.nav-expanded a.nav-expander.fixed {
    right: 20em;
}
nav {
  background: #00acda;
  display: block;
  height: 100%;
  overflow: auto;
  position: fixed;
  right: -20em;
  font-size: 15px;
  top: 0;
  width: 20em;
  z-index: 99999;
color: #fff;
  transition: right 0.3s ease-in-out 0s;
  -webkit-transition: right 0.3s ease-in-out 0s;
  -moz-transition: right 0.3s ease-in-out 0s;
  -o-transition: right 0.3s ease-in-out 0s;

}
.nav-expanded nav {
  right: 0;
}

body.nav-expanded {
  margin-left: 0em;
  transition: right 0.4s ease-in-out 0s;
  -webkit-transition: right 0.4s ease-in-out 0s;
  -moz-transition: right 0.4s ease-in-out 0s;
  -o-transition: right 0.4s ease-in-out 0s;
}

#nav-close {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 300;
  font-size: 24px;
  padding-right: 10px;
}
.main-menu {
  padding-top: 12px;
}

.main-menu li {
  border-bottom: 1px solid #323949;
  margin-left: 20px;
  font-size: 18px;
  padding: 12px;
}

.main-menu li a {
  color: #fff;
  text-decoration: none;
}

.main-menu li a:hover {
  color: #FFFFFF;
  text-decoration: none;
}

.main-menu li .sub-nav {
  border-bottom: 0px;
  padding: 4px;
}

.main-menu a .caret {
	width: 0;
	height: 0;
	display: inline-block;
	vertical-align: top;
	border-top: 4px solid #4f5963;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: "";
    margin-top: 8px;
}

.main-menu a:hover .caret {
	border-top-color: #4f5963;
}

.main-menu li.open > a > .caret {
	border-top: none;
	border-bottom: 4px solid #4f5963;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
}

.main-menu li.open > a:hover > .caret {
	border-bottom-color: #4f5963;
}

.icon:before {
  font-family: 'FontAwesome';
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  line-height: 1;
  text-transform: none;
  content: '\f105';
}

.main-menu li > a > span.icon {
  float: right;
  margin: 0.1em 1.7em -0.1em 0;
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;

}

.main-menu li > a:hover > span.icon {
  float: right;
  margin: 0.1em 0.8em -0.1em 0;
  opacity: 1;
}
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
.logo {width: 100%; vertical-align: middle;}


    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }