/*GENERAL SETTINGS*/
* {
  font-size: 30px;
}

section {
  padding: 10% 10% 10% 10%;
}

p, li {
  font-family: 'Cabin', sans-serif;
  font-size: 40px;
}

h1 {
  font-family: 'Ubuntu', sans-serif;
  text-transform: uppercase;
  font-size: 3.5em;
  color: #12646f;
  margin-top: 15%;
  margin-bottom: 0;
}

h2 {
  font-family: 'Ubuntu', sans-serif;
  font-size: 2em;
  margin-top: 2.5em;
  margin-bottom: 3%;
}

ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

button {
  background-color: #53b0bd;
  font-family: 'Ubuntu', sans-serif;
  text-transform: uppercase;
  font-size: 1.5em;
  padding: 0.5em;
  width: 95%;
  border: solid 3px #12646f;
  transition: all 0.3s ease 0s;
}

button:hover {
  border: solid 3px #52b0bd;
  background-color: #12646f;
  color: #ececec;
}

.textIndent {
 text-indent: 10%;
}

.graySection {
  background: #fbfbfb;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #ececec, #fbfbfb);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #ececec, #fbfbfb); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.tealSection {
  background: #fbfbfb;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #53b0bd, #fbfbfb);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #53b0bd, #fbfbfb); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.goldSection {
  background: #fbfbfb;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #c2b394, #fbfbfb);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #c2b394, #fbfbfb); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  text-align: center;
  line-height: 2;
}

/*INTRO SECTION*/

#intro {
  text-align: center;
}

#iqLogo {
  margin: 30% auto 0;
  width: 50%;
  height: 50%;
}

/*FORMS INFO SECTION*/
legend {
  font-family: 'Ubuntu', sans-serif;
  text-transform: uppercase;
  font-size: 2em;
}

fieldset {
  border-color: #12646f;
  padding: 2em;
  margin-bottom: 15%;
}

label {
  font-size: 1.5em;
  line-height: 1.55;
}

input {
  background-color: rgba(236, 236, 236, 0.5);
  font-size: 1.5em;
  padding: 0.5em;
  width: 90%;
  margin-bottom: 1em;
}

input[type="radio"], input[type="checkbox"] {
  width: 50px;
  transform: scale(3);
}

button {
  background-color: #53b0bd;
  font-family: 'Ubuntu', sans-serif;
  text-transform: uppercase;
  font-size: 1.5em;
  padding: 0.5em;
  width: 95%;
}

.hideSection {
  display: none;
}

.strategy-ul, .about-div, .provide-list, .costBreakdown {
  text-align: left;
  list-style: square;
  list-style-position: inside;
}

#prop-letterhead {
  margin-top: 3%;
  margin-bottom: 3%;
  width: 50%;
}

#teamPortrait {
  width: 100%;
  border: solid 3px #12646f;
  box-shadow: 10px 10px 5px #888888;
}

#strategy-ul, #provide-list, #about-div, #costBreakdown {
  width: 90%;
  margin: 0 auto;
}

#project-title, #client-name, #timeline, #reqTimeline, #totalCost {
  font-size: 1em;
}

#name-italic {
  font-style: italic;
  font-size: 1em;
}

#cost-title {
  color: #000;
}

/**********PHONE LANDSCAPE*************/
@media screen and (orientation: landscape) {
  * {
    font-size: 20px;
  }
  #iqLogo {
    margin-top: 20%;
    margin-bottom: 0;
  }
  #prop-letterhead {
    width: 25%;
  }
}
/**********TABLET*************/
@media screen and (min-width: 750px) {
}

/**********TABLET LANDSCAPE*************/
@media screen and (min-width: 1000px) and (orientation: landscape){
}

/**********DESKTOP*************/
@media screen and (min-width: 1050px) {
/*Intro Section*/
  * {
    font-size: 16px;
  }
  p {
    font-size: 1.2em;
  }
  h1{
    font-size: 2em;
    margin-top: 6%;
  }
  h2 {
    font-size: 2em;
    text-transform: uppercase;
    margin: 0 0 3% 0;
  }
  li{
    font-size: 1.2em;
    line-height: 1.5em;
  }
  form {
    width: 50%;
    margin: auto;
  }
  label {
    font-size: 1em;
  }
  input {
    padding: 0.25em;
    font-size: 1em;
  }
  input[type="radio"], input[type="checkbox"] {
    width: 20px;
    transform: scale(1);
  }
  .row {
    display: flex;
    flex-direction: row;
  }
  .row-site {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .column {
    flex-grow: 1;
    padding: 5%;
  }
  .column-site {
    max-width: 40%;
    flex-grow: 1;
    padding: 5%;
  }
  #iqLogo {
    margin: 0 auto;
    width: 25%;
  }
  #prop-letterhead {
    width: 15%;
  }
}