/* Fonts and General Rules */


	article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}

	@font-face {
	    font-family: "Muli";
	    src: url('fonts/Muli.ttf') format("truetype");
	}

	@font-face {
		font-family: "Muli Bold";
		src: url('fonts/MuliBold.ttf') format("truetype");
	}

	@font-face {
		font-family: "DIN Condensed Bold";
		src: url('fonts/DINCondensedBold.ttf') format("truetype");
	}

	@font-face {
		font-family: "Sketch 3d";
		src: url('fonts/Sketch3d.woff') format("woff");
	}

	html,body{
		font-family: "Muli", sans-serif;
		font-size: 15px;
		line-height: 150%;
		margin: 0px;
		padding-right: 0px;
		color: #766;
		height: 100%;
		width: 100%;
	 	margin: 0;
	}

	h1{
		font-family: "DIN Condensed Bold";
		font-size: 65px;
		text-transform: uppercase;
		line-height: 110%;

	}

	h2{
		font-family: "DIN Condensed Bold";
		font-size: 45px;
		text-transform: uppercase;
		line-height: 110%;
		margin: 10px;
		margin-top: 25px;
		width: 100%;
	}

	h3{
		font-family: "Muli Bold", sans-serif;
		text-align: center;
		font-size: 140%;
		font-weight: 400;
		width: 100%;
		margin:0px;
	}

	section{
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-wrap: wrap;
		    -webkit-flex-wrap: wrap;
		        flex-wrap: wrap;
		-ms-flex-align: center;
		    -webkit-align-items: center;
		        align-items: center;
		-ms-flex-pack: center;
		    -webkit-justify-content: center;
		        justify-content: center;
		width: 80%;
		margin: auto;
		/*padding-top: 40px;*/
	}

	img{

		margin-right: auto;
		margin-left: auto;
	}

	img.map, map area{
	    outline: none;
	}

	hr{
	    width: 100%;
	    border: 1px solid #fff;
	}

	a {
		text-decoration: none;
	}

/* UTILS Classes */
	.left {
		float: left;
	}

	.right{
		float: right;
	}

	.background {
		width: 100%;
	}

	.centertext{
		text-align: center;
	}

	.lefttext{
		text-align: left;
		max-width: 1000px;
		margin-left:auto;
		margin-right: auto;

	}

	.dark{
		color: #000;
	}

	.bolder{
		font-family: "Muli Bold", sans-serif;
		font-size: 130%;
	}

	.orange-text{
		color: #EF4136;
	}

	.blue-text {
		color:rgb(36, 40, 62);
	}

	.clearfix:before,
	.clearfix:after {
	    content: " "; /* 1 */
	    display: table; /* 2 */
	}

	.clearfix:after {
	    clear: both;
	}

/* QUOTE intro */

	.intro{
		position:fixed;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-pack: center;
		    -webkit-justify-content: center;
		        justify-content: center;
	    padding:0;
	    margin:0;

	    top:0;
	    left:0;

	    width: 100%;
	    height: 100%;
		background-color: rgba(69, 85, 102, 1);

		color: #fff;
		z-index: 12000;
	}

	.quote-container{
		position:fixed;
		display:-ms-flexbox;
		display:flex;
		display: -webkit-flex;
		-ms-flex-pack: center;
		    -webkit-justify-content: center;
		        justify-content: center;
		-ms-flex-line-pack: center;
		    -webkit-align-content: center;
		        align-content: center;
		-ms-flex-wrap: wrap;
		    -webkit-flex-wrap: wrap;
		        flex-wrap: wrap;
	    padding:0;
	    margin:0;

	    top:0;
	    left:0;

	    width: 100%;
	    height: 100%;

		color: #fff;
		z-index: 12000;
	}

	.quote{
		font-family: "DIN Condensed Bold", sans-serif;
		color: #fff;
		font-size: 3em;
		text-transform: uppercase;
		line-height: 150%;
		width:auto;
		padding: 0% 10%;
		text-align: center;
	}

	.quote-attribution{
		width:100%;
		margin: auto;
		color: rgba(255,255,255,0.8);
		padding: 5% 5%;
		text-align: center;
	}

	button.continue{
	  	color: #ffffff;
	  	font-size: 20px;
	  	padding: 10px 20px 10px 20px;
	  	border: solid #fff 2px;
	  	text-decoration: none;
	  	background: transparent;
	  	text-transform: uppercase;
	}

	button.continue:hover{
		background-color: rgba(255,255,255, 0.2);
	}

	button.continue:focus{
		outline: 0;
	}


	.helpline{
	    text-align: center;
	    background: #333;
	    color: #fff;
	    padding: 20px;
	}

/* MENU - (except the hamburger icon, which is in menu.css) */

	.menu{
		position:fixed;
		display: none;
		-ms-flex-pack: center;
		    -webkit-justify-content: center;
		        justify-content: center;
	    padding: 20px 0px 0px 0px ;
	    margin:0;

	    top:0;
	    left:0;

	    width: 100%;
	    height: 100%;
		background-color: rgba(100, 200, 255, 0.9);

		color: #fff;
		z-index: 10;
	}

	.menu-items{
		font-family: "DIN Condensed Bold", sans-serif;
		font-size: 5em;
		min-width: 300px;
		max-width: 1000px;
		text-align: center;
		line-height: 120%;
		padding:20px;
		text-transform: uppercase;
		list-style-type: none;
		cursor:pointer;
	}

	.menu-items :hover{
		color: #222;
	}

	li.menu-item{
		border-bottom: 1px solid rgba(255,255,255,0.5);
		padding-top: 10px;
	}

	li:last-child {
		border-bottom: none;
	}

/* SECTION "Landing page" */
	.header{
		padding-bottom: 60px;
	}
	.totem{
		background: url("../images/totemfade-03.jpg") no-repeat right top;
		background-size: contain;
	}

	.headline{
		max-width: 400px;
		text-align: right;
		min-width: 230px;
		margin-bottom: 65px;
	}

	.title{
		text-align: right;
		margin-bottom: -15px;
	}

	.sketch{
		font-family: "Sketch 3d", sans-serif;
		margin: 0px 0px -14px 0px;
		font-weight: 400;
	}

	.bigger-text{
		font-size: 130%;
	}

	.smaller-text{
		font-size: 16px;
		line-height: 150%;
		font-weight: regular;
	}

/* WHEEL - Hope, Meaning, Belonging, Purpose wheel*/
	.hmbp-wheel{
		max-width:500px;
		min-width: 500px;
		max-height: 500px;
		min-height: 500px;
		display: inline-block;
		position: relative;
		background-repeat: no-repeat;
		background-size: contain;
		margin: 30px;
	 transition: .3s cubic-bezier(0.77, 0, 0.175, 1);
	}

	.hbmp-container{
		color:#fff;
		text-align: center;
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		max-width:660px;
		min-width: 460px;
		max-height: 660px;
		min-height: 550px;
		top: 20px;
		left: 90px;
	}

	.elements{

	    color: #fff;
	    text-align: center;
	}

	.h{
	    position: absolute;
	    top: 100px;
	    left: 125px;
	}

	.hf{
		 position: absolute;
	    top: 100px;
	    left: 120px;
	}

	.b{
		-webkit-transform: rotate(90deg);
		    -ms-transform: rotate(90deg);
		        transform: rotate(90deg);
	    position: absolute;
	    top: 195px;
	    left: 235px;
	    display:none;
	}

	.smallFr{
		font-size: 70%;
		line-height: 50%;
	}

	.m{
		-webkit-transform: rotate(180deg);
		    -ms-transform: rotate(180deg);
		        transform: rotate(180deg);
	    position: absolute;
		top: 295px;
	    left: 125px;
	    display:none;
	}

	.pur{
		-webkit-transform: rotate(-90deg);
		    -ms-transform: rotate(-90deg);
		        transform: rotate(-90deg);
	    position: absolute;
		top: 195px;
	    left: 38px;
	    display:none;
	}

	h1.element{
		color: #fff;
		margin: 30px 0px 0px 0px;
		font-size: 2.8em;
	}

	.element-description{
		margin: 0px;
		font-size: .9em;
		line-height: 140%;
	}

	.element-button{
	    width: 100px;
	    margin-left: auto;
	    margin-right: auto;
	    border: 1px solid #fff;
	    padding: 0px 0px 5px 0px;
	    border-radius: 15px;
	    cursor:pointer;
	}

	.switch-button{
	    width: 100px;
	    margin-left: auto;
	    margin-right: auto;
	    border: 1px solid #666;
	    color:#666;
	    padding: 5px 35px 10px 0px;
	    border-radius: 15px;
	    cursor: pointer;
	    margin-top: 10px;
	    display: inline-block;
		}

	.switch-button:hover{
	    border: 1px solid #333;
	    color:#333;
	    border-radius: 15px;
	    cursor:pointer;
	}

/* VIDEO AND HELPLINES SECTION */
	.vids-and-helpline{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: stretch;
		font-size: 150%;
		line-height: 200%;
	}

	.vids {
		background: rgb(36, 40, 62);
		width: 50%;
	}

	.helpnew {
		width: calc(50% - 60px);
		color: white;
		padding: 30px;
		margin: -30px 0px 0px 0px;
		border-radius: 10px 0px 0px 0px;
		font-size: 20px;
	}

	.cbutton {
		background: #fff;
		border: 1px solid #EEE;
		padding: 10px 25px;
		box-shadow: 2px 4px 4px rgba(28, 19, 65, 0.466);
		border-radius: 2px;
		margin: 5px;
		cursor: pointer;
	}

	.cbutton:hover{
		background: #f9f9f9;
		padding: 10px 25px;
		box-shadow: 1px 2px 2px rgba(100,100,100, 0.3);
		border-radius: 2px;
	}

	section.vids-and-helpline {
		width: 100%;
	}

/*THUMBNAILS*/
	.thumbnails{
		color: rgb(255, 255, 255);
	}

	section.thumbs{
		padding-bottom: 50px;

	}

	.vthumb{
	    /*border: 1px solid #ddd;*/
	    padding: 15px;
	    margin: 5px;
	    border-radius: 3px;
	    text-transform: uppercase;
	    background: rgb(15, 15, 69);
	    box-shadow: 3px 3px 10px rgba(33, 13, 74, 0.523);
	    transition: all 0.5s ease;
	    cursor: pointer;
	}

	.vthumb:hover{
		/*background: #444;*/
		box-shadow: 2px 2px 4px rgb(4, 20, 33);
		background: rgb(55, 68, 169);
	}

	.thumb-title {
		font-size: 100%;
	}

	.aspect-ratio {
	  position: relative;
	  width: 100%;
	  height: 0;
	  padding-bottom: 56%; /* The height of the item will now be 56% of the width. */
	}

	.aspect-ratio iframe {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  left: 0;
	  top: 0;
	}


	.bigthumb {
		flex-basis: 100%;
	}

	.hvidthumb,.mvidthumb,.bvidthumb,.pvidthumb {
		cursor: pointer;
	}


/* SLIDES */

	.slide{
		position:fixed;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-align: center;
		    -webkit-align-items: center;
		        align-items: center;
		-ms-flex-pack: center;
	    -webkit-justify-content: center;
		        justify-content: center;
	    padding:0;
	    margin:0;
	    top:0;
	    left:0;
	    width: 100%;
	    height: 100%;
		color: #fff;
		z-index: 5;
	}

	.hope{
		background-color: rgba(251, 176, 64, 0.95);
		display: none;
	}

	.belonging{
		background-color: rgba(187, 54, 52, 0.95);
		display:none;
	}

	.meaning{
		background-color: rgba(98, 144, 129, 0.95);
		display:none;
	}

	.purpose{
		background-color: rgba(69, 85, 102, 0.95);
		display:none;
	}

	.slide-container{
		width: 80%;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}

	.info-container > p{
		width: 400px;
		font-size: 120%;
		line-height: 160%;
		text-align: left;
		float:right;
		margin: 0px;
		padding-left: 15px;
	}

	.back-link{
		color: rgba(0,0,0, .5);
		cursor:pointer;
	}

	.back-link:hover{
		color: #000;
	}

	.hbmp-vid{
		float:left;
	}

	.info-container{
		width:100%;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-pack: center;
		    -webkit-justify-content: center;
		        justify-content: center;
		-ms-flex-align: center;
		    -webkit-align-items: center;
		        align-items: center;
	}

/* SECTION "Braids" */

	#map {
		min-width: 100%;
		height: 800px;
	}

	#content>img {
		max-width: 100%;
	}

	.braids{
		background-image: url('../images/braids.svg');
		background-size:contain;
	}

	.success {
		width: 80%;
	}

	.success-center {
		padding: 30px;
		text-align: center;
	}

	.contest{
		margin:0px 100px;
		max-width: 1200px;
	}

	.contest-headline {
		max-width: 55%;
	}

	.contest-how {
		max-width:8em;
	}

	.contest-when {
		max-width:10em;
	}

	.contest-comment {
		max-width: 14em;
	}

	.contest-culture {
		max-width: 50%;
		text-align: right;
	}

	.contest-logo{
		max-width: 200px;
	}

	.contest-logo-afn{
		max-width: 180px;
	}

	.contest-logo-fpwc{
		max-width: 220px;
	}

	.contest-box {
		background: rgba(255,255,255,0.8);
	}

	.contest-text{
		text-align: left;
		margin-bottom: 20px;
	}

	.flyers>a>img{
		max-width: 50%;
		margin:3px;
	}



	.examples>img{
		max-width: 47%;
		margin:3px;
	}

/* SECTION "What does culture have to do with how I feel?" */

	.red{
		background-image: url('../images/orangeWheel.png');
		background-size: contain;
		background-color: #EF4136;
		background-repeat: no-repeat;
		color: #fff;
	}

	.subheading{
		width:100%;
		text-align: center;
	}

	.pic{
		max-width: 400px;
		text-align: right;
		min-width: 300px;
		margin-bottom: 45px;
	}

	.text{
		padding:10px;
		max-width: 500px;
		text-align:left;
		min-width: 300px;
		margin-bottom: 45px;
	}

/* SECTION "Aren't sure how to connect?"" */
	.arent-sure{
		-ms-flex-line-pack: start;
		    -webkit-align-content: flex-start;
		        align-content: flex-start;
	}

	.icon-container{
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-ms-flex-wrap: wrap;
		    -webkit-flex-wrap: wrap;
		        flex-wrap: wrap;
		-ms-flex-pack: center;
		    -webkit-justify-content: center;
		        justify-content: center;
	}

	.iconbox{
		margin-top: 40px;
		width: 220px;
		text-align: center;
		margin-right: 20px;
		margin-left: 20px;
	}

	.icon{
		width: 220px;
		height: 80px;
		text-align: center;
	}

	.icon > img{
		display: block;
		margin-left: auto;
		margin-right: auto;
	}

/* SECTION "Talk it out"*/
	.darkyellow{
		background-color: #FBA925;
		color:#000;
	}

	.talk{
		max-width: 1000px;
		margin-right: auto;
		margin-left: auto;
	}

	.talkpic{
		max-width: 300px;
	    text-align: right;
	    min-width: 200px;
	    margin-bottom: 5px;
	}

	.idealist{
		list-style: none;
		text-align: center;
		width:40%;
		padding-left: 0px;

	}

	.idealist > li{
			padding-bottom: 10px;
			padding-top: 4px;
	}

	.ideacontainer{
		width: 260px;
		height: 260px;
		text-align: center;
		background-color: #fff;
		color: #333;
		margin: 10px 3px 10px 3px;
		border-radius: 5px;
		padding: 10px
	}

/* SECTION "Like our music?"*/
	.darkblue{
		background-color: rgba(69, 85, 102, 1);
		color:#fff;
	}

	.darkblue{
		color: #fff;
		text-decoration: none;
	}

	a.yellow{
		color: #BB8;
	}

	.musictext{
		max-width: 300px;
		padding-left: 10px;
	}

/* SECTION "Create a safety plan"*/

	.safety{
		/*justify-content: flex-end;*/
		color:#000;
	}
	.safetytext{
		max-width: 1000px;
		min-width: 300px;
	}
	.waterfall{
		background-image: url("../images/waterfall2.jpg");
		background-repeat: no-repeat;
		background-size: contain;
	}

/* FOOTER */

	.footer{
		font-size: 80%;
		text-align: center
	}

	.credits{
		margin: 20px;
	}

/* smaller Devices */
	@media only screen and (max-width: 1000px) {

		.menu-items{
			padding-top: 50px;
			font-size: 3em;
		}

		.vids {
			width: 100%;
			order: 2;
		}

		.helpnew {
			width: 100%;
			order: 1;
			border-radius: 0;
			font-size: 80%;
			line-height: 140%;
		}

		.title{
			text-align: center;
		}

		.headline{
			margin-top: 50px;
		}

		.totem{
				background: url("../images/totemfade-light.jpg") no-repeat right top;
				background-size: contain;
		}

		.contest{
			margin: 0px 30px;
		}

		p.title{
			color:#000;
		}

		h1{
			font-size: 5em;
		}

		.iconbox{
			margin-top: 40px;
			width: 120px;
			text-align: center;
			margin-right: 20px;
		}

		.icon{
			width: 120px;
			height: 80px;
			text-align: center;
		}

		.musictext{
			max-width: 100%;
			text-align: center;
		}
		.safetytext{
			max-width: 550px;
			min-width: 300px;
		}

		.info-container{
			-ms-flex-wrap: wrap;
			    -webkit-flex-wrap: wrap;
			        flex-wrap: wrap;
		}

		.info-container > p{
			width: 100%;
		}

		.hbmp-vid{
			width:100%;
		}

		.switch-button{
		    padding: 5px 0px 10px 0px;
		}

	}

/* Very small devices */
	@media only screen and (max-width: 600px) {

		.vids-and-helpline{
			font-size: 100%;
			line-height: 150%;
		}

		.contest{
			margin: 0px 5px;
		}

		.menu-items{
			padding-top: 50px;
			font-size: 2em;
		}

		.switch-button{
		    padding: 5px 0px 10px 0px;
		}

		.video {
			height:200px;
		}

		.iconbox{
			margin-top: 40px;
			width: 100px;
			text-align: center;
			margin-right: 20px;
		}

		.icon{
			width: 100px;
			height: 80px;
			text-align: center;
		}

		.headline{
			margin-bottom: 0px;
		}

		h1{
			font-size: 3.5em;
		}

		h2{
			font-size: 2em;
		}


		.header{
			padding-top:0px;
		}

		.hmbp-wheel{
			max-width: 320px;
			max-height: 320px;
			min-height: 320px;
			min-width: 320px;
		}

		.hmbp-wheel > img{
			width: 320px;
			height: 320px;
		}

		.h{
		    top: 55px;
		    left: 83px;
		}

		.b{
		    top: 125px;
		    left: 145px;
		}

		.m{
		    top: 190px;
		    left: 77px;
		}

		.pur{
		    top: 125px;
		    left: 23px;
		}

		.element-button{
		    padding: 0px 0px 2px 0px;
		    font-size: 130%;
		    border:none;
		    margin-top: 5px;
		    margin-bottom: 5px;

		}

		.info-container > p{
			text-align: center;
			font-size: 90%;
			padding: 5px;
			margin: 0px;
		}

		.hbmp-container{
			min-height: 300px;
			min-width: 300px;
		}

		.elements{
		    font-size: 65%;
		}

		.quote{
				font-size: 2.5em;
		}

		.slide-container{
			width: 100%;
		}

		.idealist{
			width:100%;
		}

		#ytplayer{
			width:300px;
			height:250px;
		}
	}