/* 

    rgb(254,228,218) light orange

    rgb(139,196,200) blue
    rgb(95,105,113) dark gray
*/

body{
    
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,d4dbda+100 */
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffffff 0%, #d4dbda 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffffff 0%,#d4dbda 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ffffff 0%,#d4dbda 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d4dbda',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

    font-family: paralucent, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size:18px;
}

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

header { 
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.logo {
  width: 50%;
  height: 100%;
  background-color: none;
}

nav {
  display: block;
  box-sizing: border-box;
  width: 50%;
  height: 80px;
  padding-top: 20px;
  padding-right:5px;
}

nav div {
  width: 50%;
  float: left;
  display: flex;
  justify-content: space-around;
}

nav a {
  text-decoration: none;
  flex-basis: 45%;
  max-width: 80px;
  padding: 0;
  margin: 0;
  color: rgb(249,172,138);
}

nav a:hover {
    color:rgb(78,183,188);
}

/* HELP!! links in nav need to change color on hover */


ul a{
    text-decoration: none;
    color:rgb(78,183,188);
}

ul a:hover{
    color:rgb(247,148,106);
}

/* HELP! */

nav img {
  background-color: none;
  width: 100%;
  height: 93%;
  padding-top: 5px;
}

nav span {
  display: none;
}

/* END OF HALEY'S NAV WORK !!!!!!!!!!!!!!!!!! */

.titles{
    font-size-adjust:auto;
    font-size: 18px;
    font-weight: 400;
    color: black;
    text-decoration: none;
}

titles a:hover{
    color:rgb(78,183,188);
}


img{
    max-width: 100%
}

img:hover { 
    background-color: white;
}

#welcome {
    padding-left:3.75%;
    padding-top: 10px;
}
/* HELP! */

.button{
    border-style:none;
    background-color:none;
}

/* BODY OF PAGE - IMAGES - !!!!!!!!!!!!!!!!!!! */

.flex-container {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: stretch;
    align-items: stretch;
}
    
 
.flex-container > div {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 45%;
}

.footer{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 2%;
    background-color: rgb(139,196,200);
    color:whitesmoke;
    font-family: paralucent, sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size:16px;
    background-color: rgb(78,183,188);
    height:30px;
    width:100%;
    position: fixed; 
    left: 0 ; right: 0; bottom: 0; 
}

footer a{
    text-decoration: none;
    color:rgb(249,172,138);
}

footer a:hover{
    color:rgb(254,228,218);
}

/* HELP!!! */
*a {
    text-decoration: none;
    color:rgb(254,228,218);
}

/* FORM - DOES NOT WORK
.form-control {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #999;
}
.form-control::-webkit-input-placeholder {
  color: #999;
}
.form-control::-ms-expand {
  background-color: transparent;
  border: 0;
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #eee;
  opacity: 1;
}
.form-control[disabled],
fieldset[disabled] .form-control {
  cursor: not-allowed;
}
textarea.form-control {
  height: auto;
}
input[type="search"] {
  -webkit-appearance: none;
}

*/

/* bootstrap stuff !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }

  .col-sm-6 {
    width: 50%;
  }
}

/* MEDIA QUERIES */

@media screen and (min-width: 700px) {
  
  .logo {
    width: 500px;
  }
  
  nav {
    width: auto;
    padding-top: 36px;
    padding-right: 15px;
    height: 90%;
      
  }
  
  nav div {
    width: 100%;
    height: 100%;
    justify-content: flex-end;
  }
  
  nav img { 
    width: 80px;
  }

  nav span {
    display: block;
    color: #222;
    margin: 0 auto;
    padding-right: 15px;
    text-align: center;
  }
  
  nav div:nth-child(1) a {
    padding-left: 15px;
  }
  
  nav div:nth-child(2) img {
    display: none;
  }
  
  nav div:nth-child(2) a {
    display: flex;
    align-items: flex-end;
  }
    
body {
    font-size:20px;
}   
    
.titles{
    font-size-adjust:auto;
    font-size: 25px;
}
    
@media screen and (min-width: 1000px) {
  
  nav {
    display: flex;
    width: 400px;
    flex-direction: row-reverse;
    justify-content: space-around;
    height: 142px;
    padding-top: 65px;
  }
  
  nav div {
    width: 50%;
    display: flex;
    justify-content: space-around;
      
  }
    
    
  .flex-container {
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: center;
    align-items: flex-start;
    }
  .flex-container > div {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 25%;
    }
    
    
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="date"].form-control,
  input[type="time"].form-control,
  input[type="datetime-local"].form-control,
  input[type="month"].form-control {
    line-height: 34px;
  }
  input[type="date"].input-sm,
  input[type="time"].input-sm,
  input[type="datetime-local"].input-sm,
  input[type="month"].input-sm,
  .input-group-sm input[type="date"],
  .input-group-sm input[type="time"],
  .input-group-sm input[type="datetime-local"],
  .input-group-sm input[type="month"] {
    line-height: 30px;
  }
  input[type="date"].input-lg,
  input[type="time"].input-lg,
  input[type="datetime-local"].input-lg,
  input[type="month"].input-lg,
  .input-group-lg input[type="date"],
  .input-group-lg input[type="time"],
  .input-group-lg input[type="datetime-local"],
  .input-group-lg input[type="month"] {
    line-height: 46px;
  }
}
.form-group {
  margin-bottom: 15px;
}