a,abbr,acronym,address,applet,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,gallery,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;}

aside,details,figcaption,figure,footer,gallery,header,hgroup,menu,nav,section{display:block;
}

body{
	line-height:1;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","lucida grande","helvetica neue",helvetica,"Fira Sans",roboto,noto,"Droid Sans",cantarell,oxygen,ubuntu,"franklin gothic medium","century gothic",sans-serif;
	font-size:100%;
	overflow-x: hidden;
}

ol,ul{list-style:none;
}

blockquote,q{quotes:none;
}

blockquote:after,blockquote:before,q:after,q:before{
	content:'';
	content:none;
}

table{
	border-collapse:collapse;
	border-spacing:0;
}

*,:after,:before{
	-webkit-box-sizing:border-box;
	-moz-box-sizing : border-box;
	box-sizing:border-box;

}

.timeline__ul li:after{
	display:table;
	content:"";
	clear:both;
}

.main{
	text-align:center;
	color:#3a3a3c;
}

.section1{
	background:#fff;
	position:relative;
	margin:0 auto;
	margin-top: 300vh;
}

.section{
	background:#fff;
	position:relative;
	margin:0 auto;
}

.container{
	margin:0 auto;
	padding:4rem 1rem;
	width:100%;
	max-width:1300px;
}

.section--gray{
	background:#f3f3f5!important;
}


@media screen and (min-width:700px){
	.fade{
		-webkit-transition:opacity .6s ease-in-out,-webkit-transform .8s ease-in-out;
		-moz-transition:opacity .6s ease-in-out,-moz-transform .8s ease-in-out;
		transition:opacity .6s ease-in-out,-webkit-transform .8s ease-in-out;
		transition:transform .8s ease-in-out,opacity .6s ease-in-out;transition:transform .8s ease-in-out,opacity .6s ease-in-out,-webkit-transform .8s ease-in-out;
		visibility:hidden;
		opacity:0;
		-webkit-transform:translateY(2rem);
		-moz-transform:translateY(2rem);
		transform:translateY(2rem);
	}
}

@media screen and (min-width:700px){
	.fade--active{
		visibility:visible;
		opacity:1;
		-webkit-transform:translateY(0);
		-moz-transform:translateY(0);
		transform:translateY(0);
	}
}

.main{
	-webkit-transition:opacity 1s ease-in-out;
	-moz-transition:opacity 1s ease-in-out;
	transition:opacity 1s ease-in-out;
	opacity:0;
	visibility:hidden;
}

.loaded .main{
	opacity:1;
	visibility:visible
}

/*.loaded .loading{
	opacity:0;
	visibility:hidden;
}

.loading{
	width:10rem;
	position:fixed;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	display:-webkit-box;
	display:-moz-flexbox;
	display:flex;
	-webkit-box-pack:justify;
	-moz-flex-pack:justify;
	justify-content:space-between;
}*/


@-webkit-keyframes loader{
	0%{
		opacity:0;
		-webkit-transform:scale(.1);
		transform:scale(.1);
	}
	50%{
		opacity:1;
		-webkit-transform:scale(1);
		transform:scale(1);
	}
	100%{
		opacity:0;
		-webkit-transform:scale(.1);
		transform:scale(.1);
	}
}

@keyframes loader{
	0%{
		opacity:0;
		-webkit-transform:scale(.1);
		transform:scale(.1);
	}
	50%{
		opacity:1;
		-webkit-transform:scale(1);
		transform:scale(1);
	}
	100%{
		opacity:0;
		-webkit-transform:scale(.1);
		transform:scale(.1);
	}
}

img{
	width:100%;
	height:auto;
}

.no-emoji .emoji{
	display:none;
}

.lazyload,.lazyloading{
	opacity:0;
}

.lazyloaded{
	opacity:1;
	-webkit-transition:all .5s;
	transition:all .5s;
}

.gallery__img{
	opacity:1;
	position:relative;
}

.gallery__img:after{
	content:'';
	display:block;
	height:0;
	width:100%;
}

.gallery__img>*{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:block;
}

em{
	font-weight:700;
}

blockquote{
	font-size:1.25rem;
	line-height:1.4;
	text-align:left;
}

@media screen and (min-width:1100px){
	blockquote{
		font-size:1.5rem;
	}
}

h1,h2,h3,h4,h5{
	font-weight:700;
}

h2{
	text-align:center;
	margin-bottom:3rem;
	line-height:1.15;
	font-size:3rem;
}

@media screen and (min-width:1100px){
	h2{
		font-size:4rem;
	}
}

@media screen and (min-width:1200px){
	h2{
		font-size:5rem;
	}
}

a{
	color:#3a3a3c;
	text-decoration:none;
}

p a{
	border-bottom:2px solid #d0d0d0;
}

@media screen and (hover:none){
	p a:link{
		color:#3a3a3c!important;
	}
}

.a1{
	border-color:#956dce;
}

.a1:hover{
	border-color:#956dce;
	color:#956dce;
}

.a2{
	border-color:#e5c451;
}

.a2:hover{
	border-color:#e5c451;
	color:#e5c451;
}

.a3{
	border-color:#599571;
}

.a3:hover{
	border-color:#599571;
	color:#599571;
}

.a4{
	border-color:#f2a13a;
}

.a4:hover{
	border-color:#f2a13a;
	color:#f2a13a;
}

.a5{
	border-color:#de5a3d;
}

.a5:hover{
	border-color:#de5a3d;
	color:#de5a3d;
}

.a6{
	border-color:#648ab6;
}

.a6:hover{
	border-color:#648ab6;
	color:#648ab6;
}

.grid{
	display:block;
	display:-webkit-box;
	display:-moz-flexbox;
	display:flex;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	-moz-flex-flow:row wrap;
	flex-flow:row wrap;
	-webkit-box-pack:justify;
	-moz-flex-pack:justify;
	justify-content:space-between;
	-webkit-box-align:center;
	-moz-flex-align:center;
	align-items:center;
}

.grid--wrap:after{
	content:"";
	-webkit-box-flex:1;
	-moz-flex:auto;
	flex:auto;
}

.grid--stretch{
	-webkit-box-align:stretch!important;
	-moz-flex-align:stretch!important;
	align-items:stretch!important;
	-moz-flex-line-pack:stretch!important;
	align-content:stretch!important;
}

.grid--center{
	-webkit-box-pack:center!important;
	-moz-flex-pack:center!important;
	justify-content:center!important
}

.cell{
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

.cell--top{
	-moz-flex-item-align:start!important;
	align-self:flex-start!important;
}

.cell--middle{
	-moz-flex-item-align:center!important;
	align-self:center!important;
}

.cell--bottom{
	-moz-flex-item-align:end!important;
	align-self:flex-end!important;
}

.cell--quarter{
	width:100%;
}

@media screen and (min-width:700px){
	.cell--quarter{
		-webkit-box-flex:0;
		-moz-flex:0 0 25%;
		flex:0 0 25%;
	}
}

.cell--third{
	width:100%;
}

@media screen and (min-width:700px){
	.cell--third{
		-webkit-box-flex:0;
		-moz-flex:0 0 33.3%;
		flex:0 0 33.3%;
	}
}

.cell--half{
	width:100%;
}

@media screen and (min-width:700px){
	.cell--half{
		-webkit-box-flex:0;
		-moz-flex:0 0 50%;
		flex:0 0 50%;
	}
}

.cell--two-thirds{
	width:100%;
	}

@media screen and (min-width:700px){
	.cell--two-thirds{
		-webkit-box-flex:0;
		-moz-flex:0 0 66.6%;
		flex:0 0 66.6%;
	}
}

.cell--full{
	-webkit-box-flex:0;
	-moz-flex:0 0 100%;
	flex:0 0 100%;
}

figcaption,p{
	font-size:1.5rem;
	line-height:1.4;
	text-align:left;
}

@media screen and (max-width:700px){
	figcaption,p{
		max-width:600px;
	}
}

.intro{
	position:relative;
	margin:0 auto
}

.intro__container{
	background:rgba(0,0,0,.2);
	height:100%;
	width:100%;
	position:relative;
}

.intro__item{
	display:-webkit-box;
	display:-moz-flexbox;
	display:flex;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-moz-flex-direction:column;
	flex-direction:column;
	-webkit-box-align:center;
	-moz-flex-align:center;
	align-items:center;
	-webkit-box-pack:center;
	-moz-flex-pack:center;
	justify-content:center;
	-moz-flex-line-pack:center;
	align-content:center;
	position:relative;
	padding:0 4rem;
	color:#fff;
	height:100vh;
}

.intro__trigger{
	position:absolute;
	top:50vh;
}

.intro p{
	max-width:400px;
}

.intro__media{
	margin:0 auto;
	width:100%;
	position:fixed;
	height:100vh;
}



.intro__end{
	position:relative;
	/*bottom:1vh;*/
}


.intro__image{
	-o-object-fit:cover;
	object-fit:cover;
	height:100%;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	visibility:hidden;
}

.intro__title{
	font-size:3rem;
	line-height:1.15;
	position:absolute;
	top:5vh;
	width:100%;
	left:0;
	right:0;
	margin:0 auto!important;
}

@media screen and (min-width:700px){
	.intro__title{
		font-size:5rem;
	}
}


@media screen and (min-width:1100px){

}

.intro__scroll{
	display:block;
	font-size:1.25rem;
	position:absolute;
	bottom:5vh;
	width:100%;
	left:0;
	right:0;
	margin:0 auto;
	text-transform:uppercase;
	text-decoration:none;
	line-height:1.5;
	-webkit-animation:blinker 3s linear infinite;
	animation:blinker 3s linear infinite;
	color:#fff;
	cursor:default;
}

@media screen and (min-width:1100px){
	.intro__scroll{
		color:#3a3a3c;
	}
}

@-webkit-keyframes blinker{
	50%{
		opacity:0;
	}
}

@keyframes blinker{
	50%{
		opacity:0;
	}
}

.timeline{
	padding:2rem;
}

.timeline__title{
	margin-top:2rem;
}

.timeline__ul{
	position:relative;
	max-width:1300px;
	margin:2rem auto 0;
}

.timeline__ul:before{
	content:"";
	position:absolute;
	left:0;
	margin-left:-.25rem;
	height:100%;
	width:.5rem;
	background:#d0d0d0;
}

@media screen and (min-width:700px){
	.timeline__ul:before{
		left:50%;
	}
}

.timeline__ul li:before{
	content:'';
	position:absolute;
	left:0;
	height:2rem;
	width:2rem;
	border-radius:50%;
	margin-top:3rem;
	margin-left:-1rem;
	background:#3a3a3c;
}

@media screen and (min-width:700px){
	.timeline__ul li:before{
		left:50%;
	}
}

.timeline__ul li:nth-child(odd) div{
	float:right;
}

@media screen and (min-width:700px){
	.timeline__ul li:nth-child(odd) div:before{
		left:45%;
		border-right-color:transparent;
		border-left:1rem solid #f3f3f5;
	}
}

@media screen and (min-width:700px){
	.timeline__ul li:nth-child(odd) div{
		float:left;
	}
}

.timeline__ul li:nth-child(even) div{
	float:right;
}

@media screen and (min-width:700px){
	.timeline__ul li:nth-child(even) div:before{
		right:45%;
		left:auto;
	}
}

.timeline__content{
	border-radius:4px;
	background:#f3f3f5;
	margin:2rem 0;
	padding:2rem;
	width:90%;
}

@media screen and (min-width:700px){
	.timeline__content{
		width:45%;
	}
}

.timeline__content:before{
	content:'';
	position:absolute;
	left:10%;
	margin-top:-1rem;
	margin-left:-1rem;
	width:0;
	height:0;
	border-top:1rem solid transparent;
	border-bottom:1rem solid transparent;
	border-right:1rem solid #f3f3f5;
}

@media screen and (min-width:700px){
	.timeline__content:before{
		margin-left:0;
	}
}

.inactive:before{
	background:#fff!important;
	border:2px solid #3a3a3c;
}

.inactive div{
	opacity:.5;
}

.timeline__content h3{
	line-height:1.1;
	font-size:2rem;
	margin-bottom:1rem;
}

.timeline__content p{
	text-align:center;
}

.gallery__ul li{
	padding:.5rem 1rem;
}

@media screen and (min-width:700px){
	.gallery__ul li{
		padding:2rem;
	}
}

@media screen and (min-width:700px){
	.gallery__title{
		margin:0!important;
	}
}

.gallery__img--1{
	background:#f5b86a;
}

.gallery__img--1:after{
	padding-bottom:66.67%;
}

.gallery__img--2{
	background:#75ac8b;
}

.gallery__img--2:after{
	padding-bottom:124.91%;
}

.gallery__img--3{
	background:#87a4c6;
}

.gallery__img--3:after{
	padding-bottom:66.48%;
}

.gallery__img--4{
	background:#e57f69;
}

.gallery__img--4:after{
	padding-bottom:90.43%;
}

.gallery__img--5{background:#ecd37d;
}
.gallery__img--5:after{padding-bottom:74.91%;
}
.venn__title{width:100%;margin-bottom:0;
}
@media screen and (min-width:700px){
	.venn__title{
		margin-bottom:3rem;
	}
}
.venn__ul{
	display:block;
	display:-webkit-box;
	display:-moz-flexbox;
	display:flex;
	position:relative;
	-webkit-box-orient:vertical;
	-webkit-box-direction:normal;
	-moz-flex-flow:column;
	flex-flow:column;
	-webkit-box-pack:center;
	-moz-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-moz-flex-align:center;
	align-items:center;
	width:20rem;
	height:20rem;
	border-radius:50%;
}
.venn__ul li{
	color:#fff;
	padding:.5rem 0;
}

.ven__meh{
	color:#fff;
	z-index:200;
	position:relative;
	width:100%;
}

@media screen and (min-width:700px){
	.ven__meh{
		width:auto;
		height:100%;
	}
}

.venn__group{
	font-size:1.5rem;
	display:block;
	display:-webkit-box;
	display:-moz-flexbox;
	display:flex;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	-moz-flex-flow:row wrap;
	flex-flow:row wrap;
	-webkit-box-pack:center;
	-moz-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-moz-flex-align:center;
	align-items:center;
}

.venn__ul--likes{
	z-index:2;
	background:#648ab6;
	background:rgba(100,138,182,.7);
	top:3rem;
}

@media screen and (min-width:700px){
	.venn__ul--likes{
		top:0;
		left:3.5rem;
	}
}

.venn__ul--dislikes{
	background:#de5a3d;
	background:rgba(222,90,61,.7);
	top:-3rem;
}

@media screen and (min-width:700px){
	.venn__ul--dislikes{
		top:0;
		right:3.5rem;
	}
}

.venn__key{
	font-size:1.25rem;
	width:100%;
	display:block;
	display:-webkit-box;
	display:-moz-flexbox;
	display:flex;
	-webkit-box-orient:horizontal;
	-webkit-box-direction:normal;
	-moz-flex-flow:row wrap;
	flex-flow:row wrap;
	-webkit-box-pack:center;
	-moz-flex-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	-moz-flex-align:center;
	align-items:center;
}

@media screen and (min-width:700px){
	.venn__key{
		padding-top:4rem;
	}
}

.venn__key li{padding:.5rem 1rem;font-weight:700}

.venn__key li:before{content:"";display:inline-block;width:.75rem;height:.75rem;border-radius:50%;margin-right:.5rem}

.venn__key__likes{color:#648ab6}

.venn__key__likes:before{background:#648ab6}

.venn__key__dislikes{color:#de5a3d}

.venn__key__dislikes:before{background:#de5a3d}

.venn__key__meh{position:relative;z-index:99;color:#8b8aa3}

.venn__key__meh:before{background:#8b8aa3}

.recognition__ul{margin-bottom:2rem}

.recognition__ul li{padding:.5rem}

@media screen and (min-width:1100px){
	.recognition__ul li{
		padding:1rem;
	}
}

.recognition__ul figure{
	/* height: 100%; */
	padding:2rem;
	border:.75rem #f3f3f5 solid;
	border-radius:4px;
	position:relative;

}

@media screen and (min-width:1100px){
	.recognition__ul figure{
		padding:4rem;
	}
}

.recognition__svg{
	position:absolute;
	top:1.5rem;
	right:1.5rem;
	width:1.5rem;
	height:1.5rem;
}

.recognition__svg path{
	fill:#d0d0d0;
}

.recognition__ul figcaption{
	margin-top:2rem;
	position:relative;
}

.recognition__ul .recognition__img{
	width:50px;
	height:50px;
}

@media screen and (min-width:700px){
	.recognition__ul .recognition__img{
		width:75px;height:75px;
	}
}

@media screen and (hover:none){
	.recognition__figure{
		border-color:#f3f3f5!important;
	}
	.recognition__figure em{
		color:#3a3a3c!important;
	}
	.recognition__figure path{
		fill:#d0d0d0!important;
	}
}

.recognition__figure--insta:hover{
	border-color:#d10869;
}

.recognition__figure--insta:hover em{
	color:#d10869;
}

.recognition__figure--insta:hover path{
	fill:#d10869;
}

.recognition__figure--warriors:hover{
	border-color:#ffc72d;
}

.recognition__figure--warriors:hover em{
	color:#ffc72d;
}

.recognition__figure--warriors:hover path{
	fill:#ffc72d;
}
.recognition__figure--unsplash:hover{
	border-color:#46E7FF;
}

.recognition__figure--unsplash:hover em{
	color:#46E7FF;
}

.recognition__figure--unsplash:hover path{
	fill:#46E7FF;
}

.recognition__figure--facebook:hover{
	border-color:#00FF23;
}

.recognition__figure--facebook:hover em{
	color:#00FF23;
}

.recognition__figure--facebook:hover path{
	fill:#00FF23;
}

.recognition__statement p{
	display:inline-block;
	margin:2rem 0 0 0;
}

.follow{padding:8rem 2rem}.follow__text{
	margin-bottom:3rem;
	text-align:center;
}

.follow__links a{
	border:none;
	margin:.5rem;
	padding:.25rem .5rem;
	border-radius:4px;
	line-height:1.75rem;
	color:#fff;
	display:inline-block;
}

.icon{
	fill:#fff;
	float:left;
	display:inline-block;
	height:1.75rem;
	width:1.75rem;
	margin-right:.25rem;
}

.icon--facebook{
	margin-right:0!important;
}




/*Gallery - Portfolio*/

.gallery ul li a:before {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 40%;
	left: 50%;
	margin: -14px 0 0 -16px;
	background: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Asodipodi%3D%22http%3A//sodipodi.sourceforge.net/DTD/sodipodi-0.dtd%22%20xmlns%3Ainkscape%3D%22http%3A//www.inkscape.org/namespaces/inkscape%22%20inkscape%3Aversion%3D%220.48.4%20r9939%22%20sodipodi%3Adocname%3D%22icon-fullscreen.svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20960%20560%22%0A%09%20enable-background%3D%22new%200%200%20960%20560%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Csodipodi%3Anamedview%20%20borderopacity%3D%221%22%20pagecolor%3D%22%23ffffff%22%20bordercolor%3D%22%23666666%22%20objecttolerance%3D%2210%22%20gridtolerance%3D%2210%22%20guidetolerance%3D%2210%22%20showgrid%3D%22false%22%20fit-margin-top%3D%220%22%20fit-margin-left%3D%220%22%20inkscape%3Azoom%3D%227.375%22%20inkscape%3Acx%3D%22-5.1525424%22%20inkscape%3Acy%3D%2216%22%20id%3D%22namedview11%22%20inkscape%3Awindow-x%3D%22-8%22%20inkscape%3Awindow-y%3D%22-8%22%20fit-margin-right%3D%220%22%20inkscape%3Apageopacity%3D%220%22%20fit-margin-bottom%3D%220%22%20inkscape%3Awindow-width%3D%221366%22%20inkscape%3Awindow-height%3D%22706%22%20inkscape%3Awindow-maximized%3D%221%22%20inkscape%3Apageshadow%3D%222%22%20inkscape%3Acurrent-layer%3D%22svg2%22%3E%0A%09%3C/sodipodi%3Anamedview%3E%0A%3Cg%3E%0A%09%3Crect%20x%3D%22220%22%20y%3D%22260%22%20fill%3D%22%23FFFFFF%22%20width%3D%22536%22%20height%3D%2224%22/%3E%0A%3C/g%3E%0A%3Cg%3E%0A%09%3Crect%20x%3D%22476%22%20y%3D%224%22%20fill%3D%22%23FFFFFF%22%20width%3D%2224%22%20height%3D%22556%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A) no-repeat;
    content: "";
    opacity: 0;
    z-index: 1;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

 .gallery ul li a:hover:before {
    top: 50%;
    opacity: 1;
}

.gallery ul li a:after {
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    content: "";
    opacity: 0;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

.gallery ul li a:hover:after {
    opacity: 1;
}

.port {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  padding-top: 100px;
  background: white;
  background-color: #fafafa;
  z-index: 103;
  visibility: hidden;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  border-bottom: 1px solid #d0d0d0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.elmt {
    width: 50%;
    float : right;
}

.port .description {
    float: left;
    width: 50%;
    max-height: 100%;
    padding: 0 30px 30px 30px;
    overflow: auto; }
  .port h1 {
    font-size: 35px;
    line-height: 2.3;
    padding: 0; }
  .port > * {
    opacity: 0;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    transition: all 0.5s linear; }
  .port.item_open {
    visibility: visible;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out; }
  .port > * {
    opacity: 1;
    -webkit-transition-delay: 0.5s;
    transition-delay: 0.5s; }

.close {
  width: 21px;
  height: 21px;
  background: url(data:image/svg+xml;utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generator%3A%20Adobe%20Illustrator%2017.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200%29%20%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%0A%09%20id%3D%22svg2%22%20xmlns%3Adc%3D%22http%3A//purl.org/dc/elements/1.1/%22%20xmlns%3Acc%3D%22http%3A//creativecommons.org/ns%23%22%20xmlns%3Ardf%3D%22http%3A//www.w3.org/1999/02/22-rdf-syntax-ns%23%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%0A%09%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2021%2021%22%0A%09%20enable-background%3D%22new%200%200%2021%2021%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%20id%3D%22layer1%22%20transform%3D%22translate%280%2C-1031.3622%29%22%3E%0A%09%3Cpath%20id%3D%22path2987%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M0%2C1031.4l21%2C21%22/%3E%0A%09%3Cpath%20id%3D%22path2989%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20d%3D%22M21%2C1031.4l-21%2C21%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A%0A) no-repeat;
  position: absolute;
  right: 10px;
  top: -150px;
  opacity: 1;
  z-index: 1004;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

.item_open .close {
    opacity: 1;
    top: 0px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.row {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  padding: 0;
  clear: both;
}

#canvas{
	margin-left: 150px;
	width: 100%;
  	max-width: 1170px;
  	margin: 0 auto;
  	padding: 0;
  	clear: both;
}

.row .elmt {
    max-width: 100%;
    height: auto;
    padding: 0;
    margin: 0;
 }

*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}



/*TAPE TAUPE*/

@font-face {
            font-family: 'bowlby_oneregular';
            src: url('../fonts/bowlbyone-regular-webfont.woff2') format('woff2'),
            url('../fonts/bowlbyone-regular-webfont.woff') format('woff');
            font-weight: normal;
            font-style: normal;
        }

#taptap{
    background:url(../bg.jpg);
    background-size:cover;
    width:600;
    height:375;
}


        #mmigame{
            background:url(assets/bg.png);
            background-size: cover;
            margin-top: 10vh;
            border: 2px solid darkgrey;
            margin-left: 6vh;
        }



/*RESPONSIVE*/


@media screen and (min-width:1100px){
	.intro__container{
		width:50%;
		background:#fff;
	}

	.intro__item{
		color:#3a3a3c;
	}

	.intro__media{
		width:50%;
		top:0;
		right:0;
		bottom:0;
	}

	.intro__media.active{
		position:absolute!important;
		top:inherit!important;
	}

	.intro__title{
		font-size:6rem;
		position:relative;
		top:0;
		left:auto;
		right:auto;
	}

	.intro__title span{
		display:block
	}

	#taptap{
		width:500;
        height:312.5;
	}
}

@media screen and (max-width:1100px){
	#taptap{
		width:350;
        height:218.75;
	}
}

@media screen and (max-width:710px){
	#taptap{
		width:200;
        height:125;
	}
}

@media screen and (max-width:450px){
	.intro__image{
		max-width: 600px;
	}
	#taptap{
        display: none;
	}
}