/*

  betasite.phraseworthy.com

	CH 1 - Overall Styles
	CH 2 - Header
	CH 3 - Logo Section
	CH 4 - Headline Section
	CH 5 - Explain Section
	CH 6 - Faster Section
	CH 7 - Show and Tell Section
	CH 8 - Summary Section
  CH 9 - Footer
*/

/* CH 1 - Overall Styles  */

body {
  background-color: hsl(188,49%,48%);
	font-family: 'Open Sans', sans-serif;
  color: black;
}

/*  CH 2 - Header  */

header {
  position: fixed;
  width: 100%;
  z-index: 10;
}

header img.logo {
  height: 60px;
}

header a {
  color: black;
  font-size: 23px;
	font-weight: lighter;
}

button.signUp-btn {
	background-color: #3fA7B7;
	font-size: 23px;
	color: white;
	border-radius: 13px;
	box-shadow: 2px 2px 2px #464646;
}

.navbar {
  margin-bottom: 0;
  background-color: #F7941D;
  border-color: #F7941D;
  color: white;
  border-radius: 0;
}

.navbar-default .navbar-nav>li>a {
  color: white;
	padding-top: 0;
	padding-bottom: 0;
}

ul.navbar-nav {
	display: inline-flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: flex-end;
	padding-top: 5px;
	align-items: center;
	float: right;
}

ul.navbar-nav li {
	flex-grow: 1;
}

/*  CH 3 - Logo Section  */

#logo-section {
	min-height: 100vh;
	padding: 10% 0;
}

.office-bkg {
  background: url("../images/office-594132_1920.png") no-repeat center center fixed;
	background-size: cover;
}

#logo-section .value-prop {
	font-style: italic;
	font-weight: lighter;
	width: 30%;
	color: #E6E6E6;
	font-size: 22px;
	margin-left: 2%;
	margin-bottom: 30px;
}

#logo-section .logo-bar {
	background-image: url("../images/BluePaperTexture.png");
	text-align: center;
	padding: 40px 0;
}

#logo-section .logo-img {
	height: 200px;
}

#logo-section .tagline {
	color: #E6E6E6;
	font-style: italic;
	font-weight: 600;
	font-size: 40px;
	text-align: center;
}

@-webkit-keyframes fade-in{
  0% {
    opacity:1;
  }
  22% {
    opacity:1;
  }
  27% {
    opacity:0;
  }
  72% {
    opacity:0;
  }
  77% {
    opacity:1;
  }
  100% {
    opacity:1;
  }
}

#logo-section .testimonial-box {
  position: relative;
  margin: 8vh 60% 3vh 4%;
  min-height: 30vh;
  max-width: 650px;
}

#logo-section .testimonial {
  position: absolute;
  -webkit-animation:fade-in 20s infinite;
}

#logo-section .animate-1 {

}

#logo-section .animate-2 {
  opacity: 0;
  /*-webkit-animation:fade-in 60s infinite;*/
  -webkit-animation-delay: -10s;
}

#logo-section .animate-3 {
  opacity: 0;
  /*-webkit-animation:fade-in 60s infinite;*/
  -webkit-animation-delay: -20s;
}

#logo-section .animate-4 {
  opacity: 0;
  /*-webkit-animation:fade-in 60s infinite;*/
  -webkit-animation-delay: 0s;
}

#logo-section .testimonial .quote {
	font-style: italic;
	font-size: 28px;
	color: #FFFFFF;
	margin-bottom: 0;
  font-weight: 800;
}

#logo-section .testimonial .name {
	font-style: italic;
	font-size: 25px;
	font-weight: normal;
	color: #FFFFFF;
	padding-left: 17%;
	margin-bottom: 0px;
}

#logo-section .testimonial .credentials {
	text-transform: uppercase;
	color: #E1E1E1;
	font-size: 17px;
	padding-left: 17%;
}

/*  CH 4 - Headline Section  */

#headline-section {
	min-height: 20vh;
	padding: 6% 0;
}

.lightgray-bkg {
	background-color: #E6E6E6;
}

#headline-section .headline {
	font-size: 65px;
	font-style: italic;
	color: #FFFFFF;
	text-align: center;
}

/*  CH 5 - Application Section  */

#application-section {
  min-height: 20vh;
}

.typing-bkg {
  background: url("http://i.giphy.com/xkmQfH1TB0dLW.gif") no-repeat center center fixed;
	background-size: cover;
}

section#application-section ul {
  line-height: 2.5em;
  font-size: 4.5em;
  font-style: italic;
	font-weight: bold;
  list-style-type: none;
	color: white;
	text-align: center;
}

section#application-section li {
	flex-grow: 1;
	padding: 0 20px;
}

/*  CH 5 - Explain Section  */

#explain-section {
	min-height: 30vh;
	display: inline-flex;
	align-items: center;
}

.turquoise-bkg {
  background-color: #3FA7B7;
}

#explain-section .head-img {
	width: 15%;
	margin: 3% 0% 3% 10%;
}

#explain-section div.explanation {
  margin: 5%;
}

#explain-section .lede, #explain-section .text {
	color: #FFFFFF;
	font-style: italic;
	text-align: left;
	font-size: 32px;
}

/*  CH 6 - Faster Section  */

#faster-section {
	display: inline-flex;
  align-items: stretch;
	width: 100%;
}

#faster-section .explanation {
	padding: 0 75px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#faster-section .lede {
	font-size: 34px;
	color: #3FA7B7;
	font-style: italic;
  font-weight: bold;
}

#faster-section .text {
	color: #000000;
	font-size: 24px;
	line-height: 48px;
  font-weight: bold;
}

#faster-section .underline {
	text-decoration: underline;
}

#faster-section .sticky-note-img {
	min-height: 55vh;
	width: 280%;
  background: url("../images/StickyNotes.png") no-repeat center center fixed;
  background-size: cover;
}

/*  CH 7 - Show and Tell Section  */

#show-and-tell-section {
  padding: 90px 5px;
}

#show-and-tell-section > ul.computers {
	display: inline-flex;
}

#show-and-tell-section > ul.computers > li {
	display: flex;
	flex-direction: column;
	text-align: center;
	width: 33%;
}

#show-and-tell-section .computer-screen-img {
	width: 100%;
}

#show-and-tell-section .number {
	font-size: 90px;
	color: #FFFFFF;
	font-style: italic;
	font-weight: bold;
  margin-top: -50px;
}

#show-and-tell-section .lede {
	color: #F7941D;
	font-size: 26px;
	font-weight: bold;
	margin-bottom: 20px;
}

#show-and-tell-section .text {
	font-style: italic;
	font-size: 18px;
	text-align: left;
  width: 70%;
	margin-left: auto;
	margin-right: auto;
}

#show-and-tell-section .btn {
  width: 40px;
  margin-left: auto;
  margin-right: auto;
}

#show-and-tell-section .more-info {
  padding: 5px;
  border: solid 1px #3FA7B7;
  border-radius: 7px;
  margin: 20px 4px 0px 4px;
  text-align: left;
}

#show-and-tell-section .intro {
  font-size: 20px;
  font-weight: 500;
}

#show-and-tell-section .resource-type {
  font-weight: bold;
}

/* CH 8 - Pricing Section */

#pricing-section {
  display: inline-flex;
  align-items: stretch;
  width: 100%;
}

#pricing-section .team-img {
	min-height: 55vh;
	width: 65%;
  background: url("../images/team.png") no-repeat center center fixed;
  background-size: cover;
}

#pricing-section .explanation {
  padding: 25px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #FFFFFF;
  text-align: center;
  width: 35%;
}

#pricing-section .lede {
  font-size: 42px;
  color: #3FA7B7;
  font-style: italic;
  font-weight: 600;
}

#pricing-section .price-box {
  background-color: #F7941D;
  margin: 30px auto;
  padding: 15px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 65%;
  min-width: 225px;
  max-width: 300px;
}

#pricing-section .duration {
  color: inherit;
  font-weight: lighter;
  font-size: 25px;
  margin: 0;
}

#pricing-section .text {
  font-size: 20px;
  font-style: italic;
  font-weight: lighter;
}

#pricing-section .amount {
  font-weight: bold;
  font-size: 34px;
}

#pricing-section .alt-amount {
  font-size: 15px;
  font-style: italic;
  font-weight: lighter;
}

#pricing-section button {
  background-color: #3FA7B7;
  border: none;
  border-radius: 7px;
  padding: 5px 15px;
  font-size: 14px;
  margin-top: 15px;
}

.white-bkg {
	background-color: #FFFFFF;
}



/*  CH 8 - Summary Section  */

#summary-section .text {
	color: #ffffff;
	font-size: 35px;
	font-style: italic;
	text-align: center;
	padding: 50px 10%;
}

#summary-section .bottom-line {
  font-weight: 800;
}


/*  CH 9 - Footer  */

footer {
  padding: 25px 100px;
  background-color: #FFFFFF;
}

footer h3 {
  font-size: 34px;
  color: #3FA7B7;
  font-style: italic;
  font-weight: bold;
}

footer p {
  font-size: 19px;
}