/*
Theme Name: Freedom to Prosper
*/

* {
	box-sizing: border-box;
	text-rendering: optimizeLegibility;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-kerning: auto;
	outline: none;
}

body, html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: 'Fauna One', serif;
	font-size: 18px;
	color: #09565e;
	line-height: 28px;
}

/* BOLD */

strong {
	font-family: 'Neue Haas Grotesk Display 75 Bold';
    font-size: 24px;
    font-weight: normal;
}

/* HEADINGS */

h1 {
	margin: 0;
	padding: 0;
	font-family: "Neue Haas Grotesk Display 75 Bold";
	font-size: 55px;
	font-weight: normal;
	line-height: 55px;
}

h2 {
	margin: 0 0 50px 0;
	padding: 0;
	font-family: "Neue Haas Grotesk Display 75 Bold";
	font-weight: normal;
}

h3 {
	margin: 0 0 20px 0;
	padding: 0;
	font-family: "Neue Haas Grotesk Display 75 Bold";
	font-size: 14px;
	font-weight: normal;
	color: rgba(250,250,250,0.60);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

h3#lnest {
	margin: 10px 0 20px;
	width: 100%; 
	text-align: left;
	line-height: 0.1em;
	border-bottom: 1px solid rgba(177, 196, 198, 0.30); 
}

h3#cnest {
	margin: 10px 0 20px;
	width: 100%; 
	text-align: center;
	line-height: 0.1em;
	border-bottom: 1px solid rgba(177, 196, 198, 0.30); 
}

span#grey-mask {
	background: #f2efeb; 
	padding: 0 10px 0 0; 
	color: rgba(177, 196, 198, 0.60);
}

span#blue-mask {
	background: #09545c; 
	padding: 0 10px; 
	color: rgba(177, 196, 198, 0.60);
}

span#cyan-mask {
	background: #44a2bb; 
	padding: 0 10px 0 0; 
	color: rgba(177, 196, 198, 0.60);
}

span#white-mask {
    background: #ffffff; 
    padding: 0 10px; 
	color: rgba(177, 196, 198, 0.60);
}

h4 {
	margin: 0 0 10px 0;
	padding: 0;
	font-family: "Viva Beautiful B";
	font-weight: normal;
	color: #ffffff;
}

/* ALIGNMENT */

.left {
	text-align: left;
}

.center {
	margin: 0 auto;
	text-align: center;
}

/* COLORS */

#gray {
	color: rgba(177, 196, 198, 0.60);
}

#grey {
	color: rgba(177, 196, 198, 1.0);
}

#white {
	color: #ffffff;
}

#blue {
	color: #09565e;
}

/* SECTION TITLES */

#title {
	margin: 0 auto;
	width: 46%;
}

hr {
	margin: 20px auto;
	padding: 0;
	background: rgba(177, 196, 198, 0.30);
	width: 100%;
	height: 1px;
	border: none;
}

hr#half {
	width: 20%;
}

/* BUTTONS */

a#button, a:active#button, a:visited#button {
	margin: 20px 0 0 0;
	padding: 15px 35px;
	width: 250px;
	display: inline-block;
	font-family: "Neue Haas Grotesk Display 75 Bold";
    font-size: 16px;
	text-align: center;
    letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
}

a#button.red, a:active#button.red, a:visited#button.red {
	background: #f5695f;
	color: #ffffff;
	transition: all 0.5s ease;
}

a:hover#button.red {
	background: #f7f7f7;
	color: #f5695f;
	transition: all 0.5s ease;
}

a#button.blue, a:active#button.blue, a:visited#button.blue {
	background: #4da8bc;
	color: #ffffff;
	transition: all 0.5s ease;
}

a:hover#button.blue {
	background: #f7f7f7;
	color: #4da8bc;
	transition: all 0.5s ease;
}

a#button.white, a:active#button.white, a:visited#button.white {
	background: #ffffff;
	color: #09565e;
	transition: all 0.5s ease;
}

a:hover#button.white {
	background: #09565e;
	color: #ffffff;
	transition: all 0.5s ease;
}

a#button .fas {
	margin: 0 10px 0 0;
}

/* FLOATS */

#align-left {
	margin: 0;
	padding: 100px 5%;
	width: 50%;
	float: left;
}

#align-right {
	margin: 0;
	padding: 101px 5%;
	width: 50%;
	float: left;
	position: relative;
}

/* HEADER */

header {
	margin: 0;
	padding: 0;
	background: #2f6f78 url('assets/featured.jpg') top right;
	background-size: cover;
	overflow: hidden;
	height: 682px;
	position: relative;
}

video {
	margin: 0;
	padding: 0;
	position: absolute;
	width: 100%;
	height: 768px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

#watch {
	margin: 0;
	padding: 0;
	background-color: rgba(9, 86, 94, 0.60);
	width: 100%;
	height: 100%;
	color: #ffffff;
	position: absolute;
	z-index: 0;
}

#video_cover {
	position: absolute;
	width: 100%;
	height: 100%;
 	background: url('assets/screenshot.png') no-repeat;
	background-size: cover;
	background-position: center;
	display: none;
}

#text {
    width: 80%;
    position: absolute;
    left: 44.5%;
    top: 56%;
	transform: translate(-50%, -50%);
}

.script {
	margin: 0 10px;
	font-family: 'Viva Beautiful B';
	font-size: 125px;
	font-weight: normal;
	color: #4da8bc;
	line-height: 42px;
}

.scripts {
	margin: 0 10px;
	font-family: 'Viva Beautiful B';
	font-size: 80px;
	font-weight: normal;
	line-height: 42px;
}

/* NAVIGATION */

nav {
	margin: 0;
	padding: 10px 5%;
	background: #ffffff;
	width: 100%;
	position: fixed;
	list-style-type: none;
	text-align: right;
	z-index: 9999;
	-webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.4);
	-moz-box-shadow:    0px 5px 10px 0px rgba(50, 50, 50, 0.4);
	box-shadow:         0px 5px 10px 0px rgba(50, 50, 50, 0.4);
}

nav li {
	margin: 0 0 0 25px;
	padding: 10px 0;
	display: inline-block;
	position: relative;
	font-family: 'Neue Haas Grotesk Display 75 Bold';
	font-size: 18px;
	vertical-align: -webkit-baseline-middle;
}

nav li:nth-child(2) {
	margin: 0;
}

nav li#logo {
	margin: 0!important;
	padding: 0;
	float: left;
}

nav li#logo img {
	width: auto;
	height: 50px;
}

nav li#facebook {
	margin: 0 0 0 35px;
}

nav li a, nav li a:active, nav li a:visited {
	color: #09565e;
	text-decoration: none;
	transition: all 0.5s ease;
}

nav li a:hover {
	color: #f5695f;
	transition: all 0.5s ease;
}

nav li a .fal, nav li a:active .fal, nav li a:visited .fal {
	margin-right: 8px;
	color: #f5695f;
}

nav li ul {
	margin: 0;
	padding: 0;
	display: none;
	text-align: left;
    -webkit-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.1);
    -moz-box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.1);
    box-shadow: 0px 5px 10px 0px rgba(50, 50, 50, 0.1);
}

nav li:hover ul {
	padding: 32px 0 0 0;
	background: #ffffff;
	width: 9em;
	height: auto;
	display: block;
	position: absolute;
	top: 35px;
}

nav li ul li {
	margin: 0;
	padding: 10px 15px;
	width: 9em;
}

nav li ul li:hover {
	background: #f2efeb;
}

nav > li:hover {
	color: #f5695f;
}

nav li ul li a, nav li ul li a:active, nav li ul li a:visited {
	display: block;
	font-size: 16px;
	color: #09565e;
}

nav li ul li a:hover {
	color: #f5695f!important;
}

/* PROBLEM */

#problem {
	margin: 0;
	padding: 0;
	background: #f2efeb;
	width: 100%;
	color: #09565e;
}

/* STORIES */

#stories {
	margin: 0;
	padding: 60px 5% 380px 5%;
	background: #09545c;
	width: 100%;
	color: #ffffff;
}

ul#story {
	margin: 40px 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	text-align: center;
}

ul#story li {
	margin: 0;
	padding: 0;
	flex: 1;
}

ul#story li #description {
	margin: 0 auto 40px auto;
	width: 300px;
    height: 300px;
    display: block;
	position: relative;
}

ul#story li img {
	margin: 0 0 20px 0;
	width: 300px;
	-webkit-box-shadow: -10px 10px 0px 0px rgba(8,73,78,1);
	-moz-box-shadow: -10px 10px 0px 0px rgba(8,73,78,1);
	box-shadow: -10px 10px 0px 0px rgba(8,73,78,1);
}

.img__description {
	padding: 30px;
	background: rgba(98, 176, 194, 0.80);
	height: 100%;
	font-family: 'Neue Haas Grotesk Display 75 Bold';
	font-size: 21px;
	color: #ffffff;
	position: absolute;
	top: -21px;
	bottom: 0;
	left: 0;
	right: 0;
	visibility: hidden;
	opacity: 0;
	transition: opacity .2s, visibility .2s;
}

ul#story li:hover .img__description {
	visibility: visible;
	opacity: 1;
}

#name {
	margin: 0 0 20px 0;
	padding: 0;
	display: block;
	font-family: 'Viva Beautiful B';
	font-size: 60px;
	color: #ffffff;
}

#name a, #name a:active, #name a:visited {
	color: #ffffff;
	text-decoration: none;
}

#details {
	margin: 0;
	padding: 0;
	display: block;
	font-family: 'Neue Haas Grotesk Display 75 Bold';
	color: rgba(250,250,250,0.30);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

#separator {
	margin: 0 20px;
}

#story-index {
	margin: 0;
    padding: 80px 10%;
    background: #f2efeb;
    width: 100%;
}

article {
	margin: 0 0 40px 0;
	padding: 2px;
	width: 100%;
	position: relative;
}

#portrait {
	width: 15%;
	float: left;
}

#portrait img {
	width: 100%;
	height: auto;
	-webkit-box-shadow: -10px 10px 0px 0px rgba(8,73,78,1);
	-moz-box-shadow: -10px 10px 0px 0px rgba(8,73,78,1);
	box-shadow: -10px 10px 0px 0px rgba(8,73,78,1);
}

#excerpt {
	margin: 0;
	padding: 20px 2%;
	background: #ffffff;
	width: 85%;
	float: left;
}

#story-name {
	margin: 0 0 10px 0;
	padding: 0;
	display: block;
    font-family: 'Viva Beautiful B';
    font-size: 42px;
    font-weight: normal;
    color: #4da8bc;
    line-height: 32px;
}

a.more, a:active.more, a:visited.more {
	margin: 20px 0 0 0;
	padding: 15px 35px;
	background: #4da8bc;
	width: 250px;
	position: absolute;
	bottom: 0;
	right: 0;
	font-family: "Neue Haas Grotesk Display 75 Bold";
    font-size: 16px;
	color: #ffffff!important;
	text-align: center;
    letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
	border-bottom: none!important;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	transition: all 0.5s ease;
}

a:hover.more {
	background: #ffffff;
	color: #4da8bc!important;
	border-bottom: none!important;
	transition: all 0.5s ease;
}

/* SHARE */

#share {
	margin: 0;
	padding: 0 0 40px 0;
	background: #f6f4f1;
	width: 100%;
	height: 340px;
	position: relative;
}

/* PAPER */

#paper {
	margin: 0 auto;
	padding: 80px 60px;
	background: #ffffff;
	display: block;
	color: #09565e;
	text-align: center;
    width: 50%;
    position: relative;
    top: -250px;
	-webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow:    0px 5px 5px 0px rgba(50, 50, 50, 0.25);
	box-shadow:         0px 5px 5px 0px rgba(50, 50, 50, 0.25);
}

#paper:before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 0px;
  height: 0px;
  border-bottom: 70px solid #e6f4f7;
  border-left: 70px solid transparent;
  -webkit-box-shadow: 7px 7px 7px rgba(0,0,0,0.2);
  -moz-box-shadow: 7px 7px 7px rgba(0,0,0,0.2);
  box-shadow: 7px 7px 7px rgba(0,0,0,0.2);
}

#paper:after {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 0px;
  height: 0px;
  border-top: 69px solid #09545c; 
  border-right: 69px solid transparent;
}

/* SOLUTION */

#solution {
	margin: 0;
	padding: 0;
	background: #44a2bb;
	width: 100%;
	color: #ffffff;
}

/* ABOUT */

#about {
	margin: 0;
	padding: 0;
	background: #ffffff url('assets/who-we-are.jpg') center left no-repeat;
	background-size: cover;
	color: #09565e;
	text-align: center;
}

/* ACTION */

#action {
	margin: 0;
	padding: 0;
	background: #c52935;
	color: #ffffff;
	text-align: center;
}

.fa-hand-rock, #align-right .fa-comment-alt-lines {
	margin: 0 0 20px 0;
	padding: 20px;
	background: rgba(250,250,250,0.40);
	font-size: 60px;
	color: #c52935;
	-webkit-border-radius: 60px;
	-moz-border-radius: 60px;
	border-radius: 60px;
	transition: all 0.5s ease;
}

#align-left:hover > .fa-hand-rock, #align-right:hover > .fa-comment-alt-lines {
	background: rgba(250,250,250,1.0);
	transition: all 0.5s ease;
}

/* SIGNUP */

#email, #zip {
	padding: 0 0 0 3%;
	background: #ac1a25;
	height: 80px;
	float: left;
	font-family: "Neue Haas Grotesk Display 75 Bold";
    font-size: 14px;
	color: #fffaff;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border: none;
	outline: 1px solid #fefffb;
	outline-offset: -4px;
}

#email {
	margin: 0 1% 0 0;
	width: 66%;
}

#zip {
	margin: 0;
	width: 33%;
}

#email::-webkit-input-placeholder, #zip::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #ffffff;
}

#email:-moz-placeholder, #zip:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #ffffff;
   opacity:  1;
}

#email::-moz-placeholder, #zip::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #ffffff;
   opacity:  1;
}

#email:-ms-input-placeholder, #zip:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #ffffff;
}

#email::-ms-input-placeholder, #zip::-ms-input-placeholder { /* Microsoft Edge */
   color:    #ffffff;
}

#email::placeholder, #zip::placeholder { /* Most modern browsers support this now. */
   color:    #ffffff;
}

#submit {
	margin: 20px auto 0 auto;
	padding: 15px 35px;
	background: #ffffff;
	width: 250px;
	height: 58px;
	display: inline-block;
	font-family: "Neue Haas Grotesk Display 75 Bold";
    font-size: 16px;
	color: #09565e;
    letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	border: none;
	transition: all 0.5s ease;
	-webkit-appearance: none;
}

#submit:hover {
	background: #09565e;
	color: #ffffff;
	cursor: pointer;
	transition: all 0.5s ease;
}

/* FOOTER */

footer {
	margin: 0;
	padding: 40px 5%;
	background: #09565e;
}

menu#footer {
	margin: 0;
	padding: 0;
	list-style-type: none;
	font-family: 'Neue Haas Grotesk Display 75 Bold';
	font-size: 18px;
	font-weight: normal;
	text-align: right;
}

menu#footer li#logo {
	float: left;
}

menu#footer li#logo img {
	width: auto;
	height: 50px;
    opacity: 0.55;
    filter: alpha(opacity=55); /* For IE8 and earlier */
	transition: all 0.5s ease;
}

menu#footer li#logo img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
	transition: all 0.5s ease;
}

menu#footer li {
	margin: 0 0 0 30px;
	display: inline;
}

menu#footer li:first-child, menu#footer li:nth-child(2) {
	margin: 0;
}

menu#footer li a, menu#footer li a:active, menu#footer li a:visited {
	color: rgba(255, 255, 255, 0.55);
	text-decoration: none;
	transition: all 0.5s ease;
}

menu#footer li a:hover {
	color: rgba(255, 255, 255, 1.0);
	transition: all 0.5s ease;
}

/* PROBLEM TABS */

.tabs {
	width: 100%;
	height: auto;
	margin: 0 auto;
}

/* tab list item */

.tabs .tabs-list {
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: absolute;
	bottom: 40px;
}

.tabs .tabs-list li {
    width: 180px;
    float: left;
    margin: 0px;
    margin-right: 10px;
    padding: 10px 5px;
    text-align: left;
	border-bottom: 5px solid #cccccc;
	transition: all 0.5s ease;
}

.tabs .tabs-list li:last-child {
	margin-right: none;
}

.tabs .tabs-list li:hover {
    cursor: pointer;
	transition: all 0.5s ease;
}

.tabs .tabs-list li a {
	font-family: 'Neue Haas Grotesk Display 75 Bold';
	font-size: 14px;
	letter-spacing: 0.1em;
    text-decoration: none;
	text-transform: uppercase;
    color: #cccccc;
	transition: all 0.5s ease;
}

/* Tab content section */
.tabs .tab {
    display: none;
    width: 96%;
    min-height: 250px;
    height: auto;
    border-radius: 3px;
    padding: 20px 15px;
    color: darkslategray;
    clear: both;
}

.tabs .tab p {
    letter-spacing: 1px;
}

/* When active state */

.active {
    display:block!important;
}

.tabs .tabs-list li.active {
    color: #f56a5c!important;
	border-bottom: 5px solid #f56a5c;
	transition: all 0.5s ease;
}

.active a {
    color: #f56a5c!important;
}

/* media query */
@media screen and (max-width:360px) {
    .tabs {
        margin:0;
        width:96%;
    }
	
    .tabs .tabs-list li {
        width:80px;
    }
}

/* SOLUTION TABS */

.tabs2 {
	width: 100%;
	height: auto;
	margin: 0 auto;
}

/* tab list item */

.tabs2 .tabs2-list {
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: absolute;
	bottom: 40px;
}

.tabs2 .tabs2-list li {
    width: 180px;
    float: left;
    margin: 0px;
    margin-right: 10px;
    padding: 10px 5px;
    text-align: left;
	border-bottom: 5px solid rgba(250,250,250,0.60);
	transition: all 0.5s ease;
}

.tabs2 .tabs2-list li:last-child {
	margin-right: none;
}

.tabs2 .tabs2-list li:hover {
    cursor: pointer;
	transition: all 0.5s ease;
}

.tabs2 .tabs2-list li a {
	font-family: 'Neue Haas Grotesk Display 75 Bold';
	font-size: 14px;
	letter-spacing: 0.1em;
    text-decoration: none;
	text-transform: uppercase;
    color: rgba(250,250,250,0.60);
	transition: all 0.5s ease;
}

/* Tab content section */
.tabs2 .tabz {
    display: none;
    width: 96%;
    min-height: 250px;
    height: auto;
    border-radius: 3px;
    padding: 20px 15px;
    color: darkslategray;
    clear: both;
}

.tabs2 .tabz p {
    letter-spacing: 1px;
}

/* When active state */

.active {
    display:block!important;
}

.tabs2 .tabs2-list li.active {
    color: #ffffff!important;
	border-bottom: 5px solid #ffffff;
	transition: all 0.5s ease;
}

.tabs2-list li.active a {
    color: #ffffff!important;
}

/* media query */
@media screen and (max-width:360px) {
    .tabs2 {
        margin:0;
        width:96%;
    }
	
    .tabs2 .tabs2-list li {
        width:80px;
    }
}

ul#sharing {
	margin: 40px 0 0 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}

ul#sharing li {
	display: inline;
}

ul#sharing li:first-child {
	margin-right: 20px;
}

ul#sharing li a, ul#sharing li a:active, ul#sharing li a:visited {
	font-size: 21px;
	color: #09545c!important;
}

/* INFOGRAPHICS */

#infographics {
	margin: 0 auto;
	display: block;
	width: 60%;
}

/* SINGLE HEADER */

/* SINGLE PAGE */

#wrapper {
	margin: 0 auto;
	padding: 135px 0 80px 0;
	width: 80%;
}

#wrapper h2 {
	margin: 0;
}

#wrapper a, #wrapper a:active, #wrapper a:visited {
	color: #f5695f;
	text-decoration: none;
	border-bottom: 1px solid #f5695f;
	transition: all 0.5s ease;
}

#wrapper a:hover {
	color: #09565e;
	border-bottom: 1px solid #09565e;
	transition: all 0.5s ease;
}

blockquote {
	margin: 40px auto;
	padding: 20px 35px;
	background: #f2efeb;
	width: 65%;
	font-style: italic;
	color: #656565;
}

/* GET INVOLVED */

ul#follow {
	margin: 40px 0;
	padding: 0;
	list-style-type: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	font-size: 125px;
	text-align: center;
}

ul#follow li {
	margin: 0;
	padding: 0;
	flex: 1;
	border-bottom: none!important;
}

ul#follow li a {
	border-bottom: none!important;
	color: rgba(255, 255, 255, 0.80);
	transition: all 0.5s ease;
}

ul#follow li a:hover {
	border-bottom: none!important;
	color: rgba(255, 255, 255, 1.0);
	transition: all 0.5s ease;
}

ul#follow li a .fa-facebook, ul#follow li a:active .fa-facebook, ul#follow li a:visited .fa-facebook {
	color: #3b5998!important;
	text-decoration: none!important;
}

ul#follow li a .fa-twitter {
	color: #55acee!important;
	text-decoration: none!important;
}

ul#follow li a .fa-instagram {
	color: #8a3ab9!important;
	text-decoration: none!important;
}

/* STORIES */

#photo {
	margin: 0 0 20px 20px;
	padding: 2px;
	float: right;
	border: 1px solid #f2efeb;
}

#photo img {
	vertical-align: middle;
}

/* SHARE YOUR STORY */

#field {
	margin: 0 0 20px 0;
    padding: 0 0 0 3%;
    background: #f7f7f7;
	width: 50%;
    height: 80px;
    font-family: 'Fauna';
    font-size: 18px;
    color: #232323!important;
    border: none;
    outline: 1px solid #232323;
    outline-offset: -4px;
}

#dropdown {
	margin: 0;
    padding: 0 0 0 3%;
    background: #f7f7f7;
	width: 50%;
    height: 80px;
    font-family: 'Fauna';
    font-size: 18px;
    color: #232323!important;
    border: none;
    outline: 1px solid #232323;
    outline-offset: -4px;	
}

#textarea {
    padding: 20px;
    background: #f7f7f7;
	width: 50%;
    height: 300px;
    font-family: 'Fauna';
    font-size: 18px;
    color: #232323;
	line-height: 28px;
    border: none;
    outline: 1px solid #232323;
    outline-offset: -4px;
}

#add {
    margin: 20px auto 0 auto;
    padding: 15px 35px;
    background: #4da8bc;
    width: 250px;
    height: 58px;
    display: inline-block;
    font-family: "Neue Haas Grotesk Display 75 Bold";
    font-size: 16px;
    color: #ffffff;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    border: none;
    transition: all 0.5s ease;
    -webkit-appearance: none;
}

#add:hover {
    background: #09565e;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.5s ease;
}

#field::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #232323;
}

#field:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #232323;
   opacity:  1;
}

#field::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #232323;
   opacity:  1;
}

#field:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #232323;
}

#field::-ms-input-placeholder { /* Microsoft Edge */
   color:    #232323;
}

#field::placeholder { /* Most modern browsers support this now. */
   color:    #232323;
}

/* SPLASH PAGE */

#splash {
	margin: 0 auto;
	padding: 0;
	width: 500px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* CSS RESET */

.clearfix {
	clear: both;
}

#hidden {
	display: none;
}

/* FONT: VIVA BEAUTIFUL */

@font-face {
	font-family: 'Viva Beautiful B';
	font-style: normal;
	font-weight: normal;
	src: url("fonts/Viva-Beautiful-B.eot");
	src: url("fonts/Viva-Beautiful-B.eot?#iefix") format("embedded-opentype"),
		 url("fonts/Viva-Beautiful-B.woff2") format("woff2"),
		 url("fonts/Viva-Beautiful-B.woff") format("woff"),
		 url("fonts/Viva-Beautiful-B.ttf") format("truetype");
}

@font-face {
	font-family: 'Neue Haas Grotesk Display 75 Bold';
	font-style: normal;
	font-weight: normal;
	src: url("fonts/Neue-Haas-Grotesk-Display-75-Bold.eot");
	src: url("fonts/Neue-Haas-Grotesk-Display-75-Bold.eot?#iefix") format("embedded-opentype"),
		 url("fonts/Neue-Haas-Grotesk-Display-75-Bold.woff2") format("woff2"),
		 url("fonts/Neue-Haas-Grotesk-Display-75-Bold.woff") format("woff"),
		 url("fonts/Neue-Haas-Grotesk-Display-75-Bold.ttf") format("truetype");
}

@media (min-width:320px) and (max-width:767px) {
	video {
		display: none;
	}
	
	nav {
		position: inherit;
	}
	
	nav li#logo {
		display: block!important;
	}
	
	nav li#logo img {
		width: 175px;
		height: auto;
	}
	
	nav li#facebook, nav li#twitter {
		display: inline!important;
	}
	
	nav li {
		display: none;
	}

	#text {
	    width: 88%;
    	left: 50.5%;
    	top: 48%;
	}
	
	h1 {    
		font-size: 26px;
    	line-height: 36px;
	}
	
	.script {
		font-size: 48px;
	}
	
	#align-left, #align-right {
		padding: 20px 5%;
		width: 100%;
	}
	
	#align-right {
		padding-bottom: 95px;
	}
	
	.tabs .tab, .tabs2 .tabz {
		padding: 0;
		width: 100%;
	}

	.tabs .tabs-list li, .tabs2 .tabs2-list li {
		width: 100px!important;
	}
	
	.tabs .tabs-list li a, .tabs2 .tabs2-list li a {
		font-size: 12px;	
	}
	
	#infographics {
	    width: 100%;
    	height: auto;
	}
	
	#title {
		width: 96%;
	}
	
	ul#story li {
		margin-bottom: 50px;
	}
	
	#paper {
		width: 90%;
	}
	
	.scripts {
		font-size: 58px;
	}
	
	#share {
		height: 580px;
	}
	
	#problem {
		padding: 60px 0 0 0;
	}
	
	#solution {
		padding: 100px 0 0 0;
	}
	
	#about {
		background: #ffffff;
	}
	
	menu#footer {
		text-align: center;
	}
	
	menu#footer li#logo, menu#footer li, menu#footer li:nth-child(2) {
		margin: 0 0 10px 0;
		display: block;
	}
	
	menu#footer li#logo {
		float: none;
	}
	
	menu#footer li#facebook, menu#footer li#twitter, menu#footer li#instagram {
		display: inline;
	}
	
	menu#footer li#twitter, menu#footer li#instagram {
		margin-left: 30px;
	}
}

/* 1024-1366 */

@media (min-width:1025px) and (max-width:1366px) {
	ul#story li #description {
		width: 200px;
		height: 200px;
	}
	
	.img__img {
		width: 200px;
	}
	
	.img__description {
		font-size: 14px;
		line-height: 18px;
		top: -14px;
	}
	
	#title {
		width: 75%;
	}
	
	.tabs .tabs-list li, .tabs2 .tabs2-list li {
		width: 140px;
	}
	
	.tabs .tabs-list li a, .tabs2 .tabs2-list li a {
		font-size: 10px;	
	}
	
	.script {
		font-size: 80px;
	}
	
	.scripts {
		font-size: 60px;
	}
	
	#share {
		height: 385px;
	}
}

@media (min-width:1367px) and (max-width:1600px) {
	#text {
		width: 58%;
    	left: 33.5%;
    	top: 57%;
	}
	
	#title {
		width: 65%;
	}
	
	.script {
		font-size: 85px;
	}
}

/* ///////// Blog ///////// */

.blog.column img {
	margin-bottom: 15px;
}
.blog.column p, .blog.column strong, .blog.column a {
	font-size: 15px;
}
.blog.block{
	background: #F2EFEB;
	padding: 15px;
	margin-bottom: 25px;
}

@media (min-width:1025px) {
	.blog.column {
		float: left;
		width: 50%;
		padding: 15px;
	  }
	  .blog.row:after {
		content: "";
		display: table;
		clear: both;
	  }
}