@import url(https://fonts.googleapis.com/css?family=Lato:300|Montserrat:700,400);
@import url(https://fonts.googleapis.com/css?family=Roboto);
@import url(https://fonts.googleapis.com/css?family=Didact+Gothic);
@import url('https://fonts.googleapis.com/css?family=Satisfy');

body, html {
  width: 100%;
  height: 100%;
}

body, h1, h2, h3, h4, h5, h6 {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
}

.intro-header {
  padding-top: 50px;
  padding-bottom: 50px;
  text-align: center;
  color: #f8f8f8;
  background: url(/img/faces-low.png) no-repeat center center;
  background-size: cover;
}

.intro-message {
  position: relative;
  padding-top: 10%;
  padding-bottom: 10%;
  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s; /* Firefox < 16 */
  -ms-animation: fadein 2s; /* Internet Explorer */
  -o-animation: fadein 2s; /* Opera < 12.1 */
  animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }

}

/*-------------------------------
HEADER
--------------------------------*/

.intro-message>h1 {
  font-family: 'Didact Gothic', sans-serif;
  margin: 0;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
  font-size: 5em;
  color: black;
}

.intro-message>h3 {
  font-family: 'Satisfy', cursive;
  color: black;
  font-size: 3em;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.intro-text {
  color: black;
  font-size: 1.5em;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}

.intro-search {
  text-align: center;
  margin-top: 2%;
  margin-bottom: 2%;
  margin-right: 25%;
  margin-left: 25%;
}

#submit-btn {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #7892c2), color-stop(1, #476e9e));
	background:-moz-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:-webkit-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:-o-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:-ms-linear-gradient(top, #7892c2 5%, #476e9e 100%);
	background:linear-gradient(to bottom, #7892c2 5%, #476e9e 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7892c2', endColorstr='#476e9e',GradientType=0);
	background-color:#7892c2;
	-moz-border-top-right-radius:10px;
  -moz-border-bottom-right-radius:10px;
	-webkit-border-top-right-radius:10px;
  -webkit-border-bottom-right-radius:10px;
  border-top-right-radius:10px;
  border-bottom-right-radius: 10px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:12px;
	padding:12px 37px;
	text-decoration:none;
	text-shadow:0px 1px 0px #283966;
}
#submit-btn:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #476e9e), color-stop(1, #7892c2));
	background:-moz-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:-webkit-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:-o-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:-ms-linear-gradient(top, #476e9e 5%, #7892c2 100%);
	background:linear-gradient(to bottom, #476e9e 5%, #7892c2 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#476e9e', endColorstr='#7892c2',GradientType=0);
	background-color:#476e9e;
}
#submit-btn:active {
	position:relative;
	top:1px;
}

/*-------------------------------
SEARCH BAR
--------------------------------*/

.prediction-item {
  text-align: left;
  border: none;
  transition: color 0.2s, background 0.2s;
}

.prediction-item:hover {
  background: #ddd;
  color: #333;
  cursor: pointer;
}

.output {
  list-style: none;
  width: 50%;
  min-height: 0px;
  border-top: 0 !important;
  color: #767676;
  font-size: .75em;
  transition: min-height 0.2s;
  position: absolute;
  z-index: 5;
}

.output, #search-bar {
  background: #fff;
  border: 1px solid #767676;
}

.prediction-item {
  padding: .5em .75em;
  transition: color 0.2s, background 0.2s;
  text-align: left;
}

.output:hover .focus {
  background: #fff;
  color: #767676;
}

.prediction-item:hover, .focus,
.output:hover .focus:hover {
  background: #ddd;
  color: #333;
}

.prediction-item:hover {
  cursor: pointer;
}

.prediction-item strong { color: #333; }
.prediction-item:hover strong { color: #000; }*/

/*-------------------------------
MODAL
--------------------------------*/
.modal-body {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  flex-flow: row;
  flex-direction: row
  padding: 15px
}

.modal-header {
  padding: 15px;
  border-top-left-radius: .3rem;
  border-top-right-radius: .3rem
  color: black;
}

#myModalLabel {
  text-align: left;
  color: black;
  padding: 5px;
}

#photo {
  display: flex;
  margin-left: 20px;
}


/*-------------------------------
MEDIA QUERIES
--------------------------------*/


@media(max-width:767px) {
  .intro-message {
    padding-bottom: 15%;
  }
  .intro-message>h1 {
    font-size: 3em;
  }
  ul.intro-social-buttons>li {
    display: block;
    margin-bottom: 20px;
    padding: 0;
  }
  ul.intro-social-buttons>li:last-child {
    margin-bottom: 0;
  }
  .intro-divider {
    width: 100%;
  }
  .intro-search {
    text-align: center;
    margin-top: 2%;
    margin-bottom: 2%;
    margin-right: 2%;
    margin-left: 2%;
  }
  .intro-message>h3 {
    font-family: 'Satisfy', cursive;
    color: black;
    font-size: 2em;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
  }
}

.network-name {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 2px;
}

.content-section-a {
  padding: 50px 0;
  background-color: #f8f8f8;
}

.content-section-b {
  padding: 50px 0;
  border-top: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
}

.section-heading {
  margin-bottom: 30px;
}

.section-heading-spacer {
  float: left;
  width: 200px;
  border-top: 3px solid #e7e7e7;
}

.banner {
  padding: 100px 0;
  color: #f8f8f8;
  background: url(../img/banner-bg.jpg) no-repeat center center;
  background-size: cover;
}

.banner h2 {
  margin: 0;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
  font-size: 3em;
}

.banner ul {
  margin-bottom: 0;
}

.banner-social-buttons {
  float: right;
  margin-top: 0;
}

@media(max-width:1199px) {
  ul.banner-social-buttons {
    float: left;
    margin-top: 15px;
  }
}

@media(max-width:767px) {
  .banner h2 {
    margin: 0;
    text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
    font-size: 3em;
  }
  ul.banner-social-buttons>li {
    display: block;
    margin-bottom: 20px;
    padding: 0;
  }
  ul.banner-social-buttons>li:last-child {
    margin-bottom: 0;
  }
}

footer {
  padding: 50px 0;
  background-color: #f8f8f8;
}

p.copyright {
  margin: 15px 0 0;
}