@charset "UTF-8";
/* CSS Document */

/* ######### 9. Footer ######### */
footer {
  margin-top: 1rem;
}
/* ######### 9a. Footer > Contact ######### */
.form {
  background-color: #223055;
  color: #fff;
  padding: 1rem 1rem 2rem;
}

.form p {
  font-weight: 300;
  padding-bottom: 1rem;
}

/* ######### Contact Form ######### */
form#contactForm {
    max-width: 350px;
    margin: auto;
}

.contactForm div {
    margin-top: 1em;
}

.contactForm div:first-of-type {
    margin-top: 0;
}

.contactForm label {
  display: block;
}

.contactForm input, .contactForm textarea {
  border: solid 1px #dedede;
  border-radius: 4px;
  color: #707070;
  cursor: text;
  font-size: 1rem;
  max-width: 350px;
  padding: .5rem;
  width: 100%;
}

.contactForm textarea {
  min-height: 100px;
}

.contactForm button {
  background-color: #13b1e7;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 1rem;
  padding: .5rem;
  min-width: 200px;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contactForm button:hover {
  background-color: #35b1e8;
  color: #ffc107;
}

.contactForm i {
  font-size: 200%;
  padding-right: .5rem;
}

.contactForm input[type="submit"]:active {
  box-shadow: 1px 1px 6px rgba(255,255,255,.6), 0px 0px 4px rgba(255,255,255,.8);
}

.contactForm .checks {
  margin: .25em 0 1em .1em;
}

.contactForm input[type="checkbox"] + label {
  display: inline-block;
  padding-top: 0;
  margin-top: 0;
}

/* custom checkbox */
.contactForm .checks label {
  display: inline-block;
}

.contactForm input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  margin: 1px 0 0 -1px;
}

input[type="checkbox"]:checked ~ span:before {
  content: "\f14a";
}

.checks span:before {
  display: inline-block;
  box-sizing: border-box;
  color: #13b1e7;
  content: "\f0c8";
  font-family: 'Dosis', Fallback, sans-serif;
  font-family: "Font Awesome 5 Free";
  font-size: 1.3em;
  margin: -3px 3px 0 0;
  vertical-align: middle;
}

.contactForm input:focus, .contactForm textarea:focus {
  border: solid 1px #13b1e7;
  box-shadow: 0 0 2px #0d92bf, 0px 0px 4px #0d92bf, 1px 1px 4px #13b1e7, 2px 2px 4px #13b1e7;
  outline: none;
}

/* radio buttons */
.contactForm div.radioBtns {
  margin: 1em 0;
  max-width: 400px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  grid-template-rows: repeat(2, 1fr);
}

.radioBtns p {
  padding-bottom: 0;
  grid-column: span 3;
}

 input[type="radio"]:first-of-type {
    margin-left: 0;
}

.radioBtns span:before {
  display: inline-block;
  font-family: 'Dosis', Fallback, sans-serif; /*font-family: 'Rubik', Fallback, sans-serif;*/
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  color: #13b1e7;
  font-size: 1.2em;
  vertical-align: middle;
  margin: -4px 3px 0 0;
}

.radioBtns label {
  position: relative;
}

.radioBtns input[type="radio"] {
  position: absolute;
  opacity: 0;
}

input[type="radio"]:checked ~ span:before {
  content: "\f192"; 
}


/* ######### 9b. Footer > Connect ######### */
.social, .contactInfo {
  background-color: #13b1e7;
  color: #fff;
  padding: 1rem 1rem 0;
  text-align: center;
}

.social h3 {
  border-bottom: solid 1px #b6e8ff;
  font-weight: 400;
  padding-bottom: .25rem;
}

.socialIcons {
  font-size: 200%;
  padding: 1rem 0;
}

.socialIcons a {
  color: #223055;
  padding: 0 .5rem;
}

.socialIcons a:hover {
  color: #ffc107;
}

.contactInfo {
  padding-top: 0;
}

.contactInfo article {
  border-top: solid 1px #b6e8ff;
  padding: 1rem 0;
}

.contactInfo h4 {
  font-weight: 400;
}

.contactInfo li {
  font-weight: 300;
  list-style-type: none;
}

.copy {
  font-size: 70%;
  font-weight: 300;
  padding-top: 1rem;
}




/* ############ 10. Media Queries ############ */

/* ############ 10a. Media Query, (min-width: 700px) ############ */
@media screen and (min-width: 700px) {

/* ######### 10a-viii. Footer, Large screen rules ######### */
  footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr .25fr;
  }

  .contact {
  }

  .social h3 {
    border-bottom: none;
    padding: .5rem 1rem .5rem 0;
    text-align: right;
  }

  .social article{
    height: 100%;
    display: grid;
    grid-template-columns: 1fr .5fr;
    align-items: center;
  }

  .socialIcons {
    border-left: solid #fff 1px;
    font-size: 150%;
    padding: .5rem 0 .5rem 1rem;
  }

  .socialIcons a {
    display: block;
  }

  .contactInfo {
    background-color: #b6e8ff;
    color: #233156;
    padding: 1rem 0 0;
    grid-column: 1 / -1;
  }

}

/* ############ 10b. Media Query, (min-width: 1000px) ############ */
@media screen and (min-width: 1000px) {
  /* ######### 10b-i. Footer, X-Large screen rules ######### */
  .form {
	  display: grid;
	  grid-template-columns: auto minmax(min-content, 580px);
	  grid-template-areas:
      ". h"
      ". p"
	  ". f";
  }

  .form h3 {
	  grid-area: h;
  }

  .form p.formIntro {
	  grid-area: p;
  }

  /*  ########### Note viewers, I am going to place all of our new code for the 05_03 lecture here, in between these new code start/end comments. I will end up deleting these comments once we hvae finished. I just want you to be clear on what is different compared with what we had before :) ########### */
  /*  ########### NEW CODE START (05_03) ########### */
  form#contactForm {
    max-width: initial;
    grid-area: f;
    display: grid;
    grid-template-areas:
      "name ph"
      "email news"
      "radio radio"
      "msg msg"
      "btn .";
    grid-gap: 1rem;
  }

  .contactForm div {
    margin-top: 0;
  }

  .contactForm div:nth-child(1) {
    grid-area: name;
  }

  .contactForm div:nth-child(2) {
    grid-area: ph;
  }

  .contactForm div:nth-child(3) {
    grid-area: email;
  }

  .contactForm div:nth-child(4) {
    grid-area: radio;
  }

  .contactForm div:nth-child(5) {
    grid-area: msg;
  }

  .contactForm div:nth-child(6) {
    margin: 1.8rem 0 0;
    grid-area: news;
  }

  .contactForm button {
    width: 100%;
    grid-area: btn;
  }

  .contactForm textarea {
    max-width: 100%;
  }
  /*  ########### NEW CODE END (05_03) ########### */

  .social article {
    max-width: 580px;
	display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .socialIcons {
    border-left: none;
    padding-left: 0;
  }

  .socialIcons a {
    display: inline-block;
    font-size: 180%;
  }

}