/* Sections */
main section.verse, main .verse.columns > section,
main section.quote, main .quote.columns > section {
  color: white;
  padding: 1em;
}
main section.verse, main .verse.columns > section {
  background-color: #007700;
}
main section.quote, main .quote.columns > section {
  background-color: #006e4c;
}
main section.verse h1, main .verse.columns > section h1 {
  color: #89ff76;
}
main section.quote h1, main .quote.columns > section h1 {
  color: #a4ffe9;
}
main section.verse p, main .verse.columns > section p {
  color: #e6ffc7;
}
main section.quote p, main .quote.columns > section p {
  color: #c4f5c8;
}
main section.verse h1, main .verse.columns > section h1,
main section.quote h1, main .quote.columns > section h1 {
  font-size: 1.25em;
  line-height: 1.75em;
  text-align: center;
  font-weight: normal;
  font-family: Thuluth, serif;
  margin: 0; padding: 0;
}
main section.verse p, main .verse.columns > section p,
main section.quote p, main .quote.columns > section p {
  margin-top: 5px;
  padding: 0;
  font-style: italic;
  text-align: center;
  font-size: .9em;
  font-weight: normal;
  line-height: 125%;
}
.verse span, .quote span {
  font-size: .77em;
  color: #72b07d;
}
main .coming-soon {
  padding: 0 0 100px 0;
  text-align: center;
}
main .coming-soon > img {
  max-width: 100%;
  height: auto;
}
main .coming-soon > span {
  position: absolute;
  top: 119px;
  left: 0;
  width: 100%;
  font-size: 3em;
  font-family: Thuluth, serif;
}
main #privacy {
  padding: 1.25em 2em 4em 2em;
}
main #privacy h1 {
  margin-top: 1.5em;
}
#hajj small {
  font-size: .9em;
  color: #c1c1b3;
}
.button.hajj {
  margin-top: -1.2em;
  background: #007aaa;
  line-height: 1.63em;
  float: right;
  padding-right: .7em;
  padding-left: 2.3em;
}
.button.hajj:before {
  padding: 0 7px;

}
.playstore-logo {
  margin: 1em auto;
  width: 50%;
}
.appLogo {
  margin: .6em 0 .5em 9.5em;
}
.screenshot, .playstore-logo {
  margin-left: 5em;
}
.map-table {
  width: 100%;
}
.map-table td:first-child {
  font-weight: bold;
  padding-right: 13px;
  white-space: nowrap;
}
.loader {
  border: 7px solid rgba(90,90,90,.5);
  border-top: 7px solid #3498db;
  border-radius: 50%;
  width: 70px; height: 70px;
  animation: spin 1s linear infinite;
  display: inline-block;
}
#loader > .loader {
  margin-top: 100px;
}
#loader {
  text-align: center;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
/* Lists */
main .item-list {
  margin-bottom: 0;
}
.item-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.item-list li {
  margin-left: 10px;
  margin-right: 2px;
  padding: 0.3em 0 0.3em 0;
  border-bottom: 1px solid rgba(255, 255, 255, .19);
  position: relative;
}
.item-list li img {
  float: left;
}
.item-list li h3 {
  font-family: Imprima, sans-serif;
  font-weight: normal;
  text-transform: none;
}
.item-list li:before {
  content: '';
  position: absolute;
  height: 1px;
  left: 0; right: 0; bottom: 0;
  border-bottom: 1px solid rgba(0, 0, 0, .50);
}
.item-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.item-list li:last-child:before {
  border-bottom: none;
}

ul.checkmark li, ul.crossmark li {
  padding: 0 .15em;
  list-style-type: none;
  margin-left: 0;
  margin-right: .63em;
  margin-bottom: .3em;

}
ul.checkmark li:before {

  color: #24cf89;
  content: '\2714';
  padding-right: 5px;
}
ul.crossmark  li:before {
  content: '\274C';
  color:#ED4337;
  padding-right: 7px;
}

#vtable {
  direction: rtl;
  border-collapse: collapse;
}
#vtable td {
  padding: .5em .25em;
}
#vtable td:first-child {
  font-size: 1.19em;
  line-height: 1.63em;
  font-weight: normal;
  font-family: Thuluth, serif;
}
#vtable td:last-child {
  direction: ltr;
  font-style: italic;
}
#vtable tr {
  border-bottom: 1px solid rgba(255,255,255,.19);
}
#vtable tr:last-child {
  border-bottom: 0;
}

#connect h3 {
  margin: 0 0 10px 13px;
}
#connect h5 {
  font-size: 1.2em;
  margin: 0 5px 16px 15px;
}
#connect h5 p {
  padding-bottom: 6px;
  margin: 0;
}
#connect h5 p:last-child {
  padding-bottom: 0;
}
#connect .item-list li img {
  margin-left: 5px;
}
#connect .item-list li h3 {
  margin: 3px 0 0 47px;
  font-style: italic;
}

#review ul {
  font-size: 1.25em;
  font-weight: bold;
  list-style: none;
  padding-bottom: 1em;
}
#review li {
  text-align: center;
  margin-left: 0;
}
#review li a {
  padding-left: 85px;
}
#review li a:before {
  padding: 7px 10px 7px 11px;
  height: 100%;
  vertical-align: -50%;
}
#review a#google:before {
  content: url("../images/social/ic_google.png");
}
#review a#yelp:before {
  content: url("../images/social/ic_yelp.png");
}
#review a#facebook:before {
  content: url("../images/social/ic_facebook.png");
}
#share a {
  margin: 0 auto .5em auto;
  text-decoration: none;
  color: white;
}
#share a:hover, #contact a:hover span {
  color: #fff6ac;
}
#share .item-list li img {
  margin-left: 5px;
  margin-right: 10px;
}
main #review-menu section {
  padding-top: .5em;
  padding-bottom: .4em;
}
#review-menu h3 {
  font-size: 1em;
  padding-top: .5em;
}
#review-menu img {
  margin-right: 10px;
  width: 32px; height: 32px;
}

.icon-fade a:hover h3, .icon-fade a:hover span, .img-fade:hover h3 {
  color: white;
  -webkit-transition: all .33s;
  transition: all .33s;
}
.icon-fade img {
  -webkit-filter: brightness(120%) contrast(130%);
  filter: brightness(120%) contrast(130%);
  -webkit-transition: all 1s;
  transition: all 1s;
}
.icon-fade img:hover, .icon-fade a:hover img {
  -webkit-filter: brightness(200%) contrast(200%);
  filter: brightness(200%) contrast(200%);
  -webkit-transition: all .33s;
  transition: all .33s;
}

.youtube {
  position: relative;
}
.youtube iframe {
  border-radius: 7px;
  width: 100%;
}
.youtube a {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
/* Tooltip text */
.tooltip .tooltiptext {
  font-size: 1em;
  font-weight: normal;
  font-family: Imprima, sans-serif;
  text-transform: none;

  visibility: hidden;
  width: 280px;
  background-color: #376aec;
  color: #fff;
  text-align: center;
  padding: 5px 10px;
  border-radius: 7px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}
/* Tooltip hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
.tooltip .tooltiptext.top {
  bottom: 100%;
  left: 50%;
  margin-left: -140px;
}

/* Form */
form {
  margin: 0 10px 0 5px;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

form input, textarea, select {
  color: #191919;
  font-size: 1em;
  font-family: Imprima, sans-serif;
  font-weight: normal;
  letter-spacing: 0.025em;
  margin: .55em .2em;
}

form input[type="text"],
form input[type="tel"],
form input[type="email"],
form input[type="password"],
form select,
form textarea {
  display: block;
  border: 0;
  box-shadow: inset 1px 1px 1px 0 rgba(0,0,0,.5), 1px 1px 0 0 rgba(40,40,40,.7);
  border-radius: 0.35em;
  width: 100%;
  padding: 0.71em 1em 0.75em 1em;
  line-height: 1.2em;
  background-color: #f5f2d6;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

form select {
  margin: .59em .25em;
  width: 99.8%;
  padding: .51em 1.9em .47em .81em;
}
form #dd-arrow {
  cursor: default;
  pointer-events: none;
  position: absolute;
  top: .07em; bottom: 0;
  margin: auto 0;
  font-size: 1.5em;
  line-height: normal;
  right: .1em;
  color: #272727;
}
form select.virgin {
  color: #757575;
}
form select option {
  padding: 3px;
  margin: 0 .55em;
}
form select.virgin option:not(:first-child) {
  color: #191919;
}
select[size] {
  padding: 2px 0;
  background-color: #f5f2d6;
}
select[size] option {
  padding: 1px 0;
}

button[type="submit"],
button[type="reset"] {
  margin-top: .5em;
  margin-bottom: 1em;
  line-height: 275%;
}
button[type="submit"] {
  background: #159331;
}
button[type="reset"] {
  background: teal;
}
button[type="submit"]:before {
  font-family: Spinnaker, sans-serif;
  content: '\2709';
  font-size: 1.5em;
  padding: 0 .37em;
}
button[type="reset"]:before {
  content: '\2715';
}

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked,
[type="radio"]:not(:checked),
[type="radio"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label,
[type="radio"]:not(:checked) + label,
[type="radio"]:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before,
[type="radio"]:not(:checked) + label:before,
[type="radio"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 1.31em; height: 1.25em;
  border: 2px solid #b9c0b8;
  background: #142b37;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after,
[type="radio"]:not(:checked) + label:after,
[type="radio"]:checked + label:after {
  content: '\2713';
  position: absolute;
  top: .1em; left: .1em; bottom: .1em;
  font-size: 1.25em;
  line-height: 0.8em;
  color: #09ad7e;
  transition: all .2s;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after,
[type="radio"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after,
[type="radio"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before,
[type="radio"]:disabled:not(:checked) + label:before,
[type="radio"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #bbb;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after,
[type="radio"]:disabled:checked + label:after {
  color: #999;
}
[type="checkbox"]:disabled + label,
[type="radio"]:disabled + label {
  color: #aaa;
}
/* hover style just for information */
label:hover:before {
  border-color: white !important;
}

#contact #message h2 {
  margin-bottom: .33em;
}
#contact #message br {
  margin-bottom: .7em;
}

[type="checkbox"]:not(:checked).cross-check + label:after,
[type="checkbox"]:checked.cross-check + label:after {
  content: '\2715';
  color: #e03200;
  line-height: 0.82em;
}

@-webkit-keyframes blink { 50% { opacity: 0.0; } }
@keyframes blink { 50% { opacity: 0.0; } }
.blink {
  -webkit-animation: blink 1s step-start 0s infinite;
  animation: blink 1s step-start 0s infinite;
}
.blink2 {
  -webkit-animation: blink 1s step-start 0s 2;
  animation: blink 1s step-start 0s 2;
}
.blink3::before {
  -webkit-animation: blink 1s step-start 0s 3;
  animation: blink 1s step-start 0s 3;
}

.u-slide {
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
}
.u-slide:before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  transition: width 0s ease, background .5s ease;
}
.u-slide:after {
  content: '';
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: white;
  transition: width .5s ease;
}
.u-slide:hover:before {
  width: 100%;
  background: white;
  transition: width .5s ease;
}
.u-slide:hover:after {
  width: 100%;
  background: transparent;
  transition: all 0s ease;
}

/* ******************************* */
/* ----------- Desktop ----------- */
/* ******************************* */

@media screen and (min-width: 750px) {
  .rl-head > a.button,
  .rl-head > span:last-child,
  .rl-row > span:last-child {
    float: right;
  }
  .rl-icon img {
    float: right;
    margin-top: -10px;
  }
}

/* ****************************** */
/* ----------- Tablet ----------- */
/* ****************************** */

@media screen and (min-width: 750px) and (max-width: 1200px) {
  #social h5 {
    font-size: 1.1em;
    margin: 0 5px 12px 15px;
  }
}

/* ****************************** */
/* ----------- Mobile ----------- */
/* ****************************** */

@media screen and (max-width: 749px) {
  #social h5 { font-size: 1.2em; }

  #review ul {
    font-size: 1.1em;
    padding-bottom: .7em;
  }
  #review li a {
    padding-left: 70px;
  }
  #review li a:before {
    padding: 2px 9px;
    height: 100%;
    vertical-align: -50%;
  }
  .rl-head {
    letter-spacing: -.025rem;
  }
  .rl-head > a.button,
  .rl-head > span:last-child {
    float: right;
    font-size: .61em;
  }
  .rl-row {
    text-align: center;
  }
  .rl-row > span:last-child, .rl-head >:first-child {
    display: inline-block;
    margin-left: .33em;
    margin-right: .33em;
  }
  .rl-icon > span:first-child {
    padding-right: 40px;
  }
  .rl-icon img {
    vertical-align: top;
    float: right;
    margin-top: -15px;
  }
}

/*!* ----------- reCAPTCHA ----------- *!*/

.grecaptcha-badge {
  visibility: hidden;
}