/*
Project Name: Housed4Good Website
Client: Housed4Good
Author: Trin3232 (GitHub)
*/

/*************Fonts & Colours Variables ****************************/
@import url(/css/normalize.css);
@import url(/css/menu.css);
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans");
@import url("https://fonts.googleapis.com/css?family=Montserrat");
/* Logo font info -bahnschrift bold condensed letters & arial narrow bold for numbers */
/********************************************************************/
/********************Defaults*******************/
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body,
html {
  height: 100%;
  font-size: 16px;
  max-width: 100%;
  overflow-x: hidden;
  font-family: "Josefin Sans", sans-serif;
  /* font-family: 'Montserrat', sans-serif; */
  color: #050503;
}

a:-webkit-any-link {
  text-decoration: none;
}

i:hover {
  color: #35ca57;
}

.fa-10x {
  font-size: 6em;
}

/******************Main Page Styles******************************/

/*************** Head Section ************************/
.showcase-1 {
  /* background: map-get($colours, secondary-light); */
  height: 100vh;
  position: relative;
}

.showcase-1 :before {
  content: "";
  background: url("/images/Aerial-Town-Photo-(tom-rumble -unsplash).jpg") no-repeat center center/cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.showcase-1 .showcase-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  height: 100%;
}

.showcase-1 .main-logo {
  height: 70%;
}

.showcase-1 .showcase-film {
  background: rgba(54, 201, 88, 0.6);
  margin-top: 0%;
  margin-bottom: 12%;
  margin-left: 25%;
  margin-right: 25%;
}

.showcase-1 .showcase-film .slogan {
  font-size: 200%;
  font-weight: bold;
  font-style: italic;
  text-align: center;
  margin-top: 1.5%;
  margin-bottom: 1.5%;
  /* margin-left: 25%;
      margin-right: 25%; */
  color: #ffffff;
}

/**************** Main Page Styles ************************/
.imgbac1,
.imgbac2,
.imgbac3,
.imgbac4 {
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  /* scroll = normal & fixed = parallax */
}

.imgbac1 {
  background-image: url("/images/UK-Housing-Photo by Mike Bird from Pexels.jpg");
  min-height: 1000px;
  z-index: -1;
}

.imgbac2 {
  background-image: url("/images/House-Keys-1-Photo by rawpixel.com from Pexels.jpeg");
  min-height: 1000px;
  z-index: -1;
}

.imgbac3 {
  background-image: url("/images/House-Keys-2-Photo by rawpixel.com from Pexels.jpeg");
  min-height: 1000px;
  z-index: -1;
}

.imgbac4 {
  background-image: url("/images/Key-Indoor-Photo by PhotoMix Ltd from Pexels.jpg");
  min-height: 1000px;
  z-index: -1;
}

.imgtext {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 280%;
  letter-spacing: 7px;
  text-transform: uppercase;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.imgtext .spantext {
  padding: 22px;
  opacity: 0.75;
  border-radius: 50%;
}

.imgtext .span-news {
  background-color: #5aa2d0;
}

.imgtext .span-vision {
  background-color: #80867c;
}

.imgtext .span-about {
  background-color: #35ca57;
}

.imgtext .span-contact {
  background-color: #80867c;
}

.section {
  text-align: center;
  padding: 45px 70px;
}

.flex-grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

.col {
  width: 29%;
}

/* .section-orange {
  background-color: map-get($colours, primary);
} */
.section-green {
  background-color: #35ca57;
}

.section-blue {
  background-color: #5aa2d0;
}

.section-grey {
  background-color: #80867c;
}

.section-bottom {
  border-bottom: 20px solid #35ca57;
}

/**************** News Section ************************/
.news-col {
  background-color: rgba(88, 162, 208, 0.4);
  border-radius: 20%;
  padding: 2.5%;
  -webkit-box-shadow: -1px 2px 23px 2px #000000;
          box-shadow: -1px 2px 23px 2px #000000;
  overflow-wrap: break-word;
  /* color: map-get($colours, font-white); */
}

.news-col .italicbold {
  font-style: italic;
}

.news-col .italicy {
  font-style: italic;
}

.news-col .art-col-pad {
  padding-top: 4%;
  padding-bottom: 4%;
}

.news-col .art-col-pad-2 {
  padding-bottom: 6%;
}

.news-col .quote {
  font-weight: bolder;
}

/******************Our Vision Section******************/
#fa-eye {
  font-size: 3em;
  /* color: map-get($colours, secondary); */
}

.vis-col {
  display: inline-block;
  padding-left: 5%;
}

.vision-para {
  font-size: 19px;
}

.vision-para .bold-italic {
  font-style: italic;
  font-weight: bolder;
}

/******************About Us Section******************/
/**CSS Card https://developer.hyvor.com/tricks/css-cards***/
.card {
  display: inline-block;
  background-color: #e6e6e6;
  -webkit-box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 20px 4px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  overflow: hidden;
  width: 260px;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  cursor: pointer;
  text-align: center;
  margin-right: 3.5%;
  margin-bottom: 3%;
}

.card :hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

.card .card-image {
  max-width: 100%;
}

.card .card-footer {
  padding: 15px;
}

.card .card-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 12px;
}

.card .card-description {
  font-size: 16px;
  color: #050503;
  margin-bottom: 15px;
}

.card .card-description .increase {
  margin-bottom: 21%;
}

.what-we-do {
  font-weight: bold;
  font-style: italic;
  font-size: 23px;
}

/*********************Contact Section*******************/
/************ Form  *************/
form {
  max-width: 600px;
  margin: auto;
  color: #050503;
}

input {
  width: 600px;
  height: 50px;
  padding: 0px 15px 0px 15px;
  background: transparent;
  outline: none;
  border: solid 2.5px #050503;
  border-bottom: none;
  color: #050503;
  text-align: center;
  font-weight: bolder;
  /* transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out; */
}

input:hover {
  color: #ffffff;
  background: rgba(170, 174, 167, 0.41);
}

#name {
  border-radius: 40px 40px 0px 0px;
}

textarea {
  resize: none;
  width: 600px;
  height: 150px;
  padding: 15px;
  background: transparent;
  outline: none;
  border: solid 2.5px #050503;
  font-weight: bolder;
  text-align: center;
  border-radius: 0px 0px 40px 40px;
  /* transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out; */
}

textarea:hover {
  color: #ffffff;
  background: rgba(170, 174, 167, 0.41);
}

::-webkit-input-placeholder {
  color: #050503;
  opacity: 0.6;
  /* Firefox */
}

:-ms-input-placeholder {
  color: #050503;
  opacity: 0.6;
  /* Firefox */
}

::-ms-input-placeholder {
  color: #050503;
  opacity: 0.6;
  /* Firefox */
}

::placeholder {
  color: #050503;
  opacity: 0.6;
  /* Firefox */
}

button {
  width: 600px;
  height: 50px;
  padding: 0;
  cursor: pointer;
  background: transparent;
  color: #050503;
  border: solid 2.5px #050503;
  border-radius: 23px;
  font-weight: bolder;
}

button:hover {
  color: #ffffff;
  background: rgba(170, 174, 167, 0.41);
}

/* input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: map-get($colours, font-white);
}

input:focus::-webkit-input-placeholder,
textarea:focus::-webkit-input-placeholder {
  color: map-get($colours, font-white);
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: map-get($colours, font-white);
}

input:focus::-moz-placeholder,
textarea:focus::-moz-placeholder {
  color: map-get($colours, font-white);
}

input::placeholder,
textarea::placeholder {
  color: map-get($colours, font-white);
}

input:focus::placeholder,
textarea::focus:placeholder {
  color: map-get($colours, font-white);
}

input::-ms-placeholder,
textarea::-ms-placeholder {
  color: map-get($colours, font-white);
} */
/* input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background: transparent;
  color: map-get($colours, font-white);
}

input:focus::-ms-placeholder,
textarea:focus::-ms-placeholder {
  color: map-get($colours, font-white);
} */

/*******reCaptcha Form Code*********/
.g-recaptcha-adjust {
  margin-left: 31%;
}

.g-recaptcha-adjust .g-recaptcha {
  transform: scale(0.8);
  -webkit-transform: scale(0.8);
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
}

/*******Contact & Social Media Section ******/
.title-col {
  background-color: rgba(170, 174, 167, 0.41);
  /* border-radius: 33%; */
  padding: 1.3%;
  -webkit-box-shadow: -1px 2px 23px 2px #050503;
          box-shadow: -1px 2px 23px 2px #050503;
  overflow-wrap: break-word;
  margin-bottom: 2%;
}

.title-col p {
  text-decoration: none;
}

.title-col p a {
  color: #050503;
}

.title-col p a:hover {
  color: #ffffff;
}

.social {
  margin-bottom: 4%;
}

.fa-lg {
  color: #ffffff;
  line-height: 1em;
}

#wha-num {
  color: #ffffff;
  display: block;
  font-weight: bolder;
  margin-top: 5%;
}

.coming-soon {
  font-size: 150%;
  font-weight: bold;
}

/*********************legal Page Styles*****************/
.showcase-legal {
  background: rgba(54, 201, 88, 0.6);
  position: static;
}

.showcase-legal :before {
  content: "";
  background: url("/images/Aerial-Town-Photo-(tom-rumble -unsplash).jpg") no-repeat center center/cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.showcase-legal .showcase-inner-legal {
  text-align: center;
  margin-left: 20%;
  margin-right: 20%;
}

.showcase-legal .showcase-inner-legal h1 {
  font-style: italic;
  text-transform: uppercase;
}

.showcase-legal .showcase-inner-legal .legal-heading-title {
  margin-bottom: 2.5%;
}

.showcase-legal .showcase-inner-legal p {
  font-size: 150%;
  margin-bottom: 10%;
  line-height: 1.6;
}

/*********************Error Page Styles*****************/
.error {
  color: #ffffff;
  font-size: 240%;
}

.showcase-film-2 {
  background: rgba(54, 201, 88, 0.6);
  margin-top: 0%;
  margin-bottom: 25%;
  margin-left: 25%;
  margin-right: 25%;
}

/*********************Submission Page Styles************/
.thank-you-film {
  background: rgba(54, 201, 88, 0.6);
  margin-bottom: 25%;
  margin-left: 25%;
  margin-right: 25%;
}

.thank-you-film .thank-you {
  color: #ffffff;
  font-size: 250%;
  margin-top: 1%;
  margin-bottom: 1%;
}

/**********************Footer***************************/
footer {
  position: fixed;
  bottom: 0;
  padding: 8px;
  width: 100%;
  background-color: #35ca57;
  z-index: 1;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  font-size: 110%;
}

footer .footer-text {
  margin-bottom: 1px;
}

footer .footer-text .legal {
  color: #ffffff;
}

footer .footer-text .kwiya {
  color: #ffffff;
}

footer .footer-text :not(#update-year-text):hover {
  color: #80867c;
}

footer #fa-git-icon:hover {
  color: #80867c;
}

/***********Media Queries*****************/
/*****************************************/
@media (max-width: 1024px) {
  .showcase-1 .main-logo {
    height: 58%;
  }
}

/*****************************************/
@media (max-width: 800px) {
  .showcase-1 .main-logo {
    height: 45%;
  }
  .flex-grid {
    display: block;
  }
  .flex-grid .col {
    width: 100%;
    margin: 0 0 8% 0;
    padding-bottom: 15px 0 0 25px;
  }
  .vis-col {
    display: inline;
  }
  #submit-button {
    margin-bottom: 2px;
  }
  #wha-num {
    margin-top: 1.5%;
  }
}

/*****************************************/
@media (max-width: 768px) {
  .showcase-1 .main-logo {
    height: 58%;
  }
  .showcase-1 .showcase-film .slogan {
    font-size: 140%;
  }
  .flex-grid {
    display: block;
  }
  .flex-grid .col {
    width: 100%;
    margin: 0 0 8% 0;
    padding-bottom: 15px 0 0 25px;
  }
  .vis-col {
    display: inline;
  }
  #submit-button {
    margin-bottom: 2px;
  }
  #wha-num {
    margin-top: 1.5%;
  }
}

/*****************************************/
@media (max-width: 600px) {
  input,
  textarea,
  button {
    max-width: 400px;
  }
  .g-recaptcha-adjust {
    margin-left: 24%;
  }
}

/*****************************************/
@media screen and (max-width: 575px) {
  #rc-imageselect,
  .g-recaptcha {
    transform: scale(0.8);
    -webkit-transform: scale(0.8);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
  }
}

/*****************************************/
@media (max-width: 425px) {
  .showcase-1 .main-logo {
    height: 58%;
  }
  .news-col {
    border-radius: 12%;
  }
  input,
  textarea,
  button {
    max-width: 200px;
  }
  #submit-button {
    margin-bottom: 3px;
  }
  .section {
    padding-bottom: 88px;
  }
  .g-recaptcha-adjust {
    margin-left: 9%;
  }
}

/*****************************************/
@media (max-width: 375px) {
  .showcase-1 .main-logo {
    height: 56%;
  }
  .showcase-1 .showcase-film .slogan {
    font-size: 140%;
  }
  input,
  textarea,
  button {
    max-width: 250px;
  }
  #submit-button {
    margin-bottom: 3px;
  }
  .section {
    padding-bottom: 88px;
  }
  .g-recaptcha-adjust {
    margin-left: 5%;
  }
}

/*****************************************/
@media (max-width: 320px) {
  .showcase-1 .main-logo {
    margin-top: -13%;
    height: 60%;
  }
  .showcase-1 .showcase-film .slogan {
    font-size: 140%;
  }
  .card {
    width: auto;
  }
  input,
  textarea,
  button {
    max-width: 200px;
  }
  #submit-button {
    margin-bottom: 3px;
  }
  .title-col {
    margin-top: -17%;
    margin-bottom: -10%;
  }
  .section {
    padding-bottom: 88px;
  }
  .thank-you-film .thank-you {
    font-size: 190%;
  }
  .error {
    font-size: 135%;
  }
  .g-recaptcha-adjust {
    margin-left: -11%;
  }
}