html{
	font-size:100%;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%}
	
html,button{
	font-family:sans-serif}
	
body{
	
	
	margin:0}


	
a:focus{
	outline:thin dotted}
	
a:active,a:hover{
	outline:0}


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

nav ul,nav ol{
	list-style:none;
	list-style-image:none}
	
nav>ul,nav>ol{
	padding-left:0}
	
img{
	border:0;-ms-interpolation-mode:bicubic}
	
svg:not(:root){
	overflow:hidden}

hr{
	border-bottom:0}*{box-sizing:border-box}
	
html,body{
	min-height:100vh}
	
html{
	font-size:150%;
	overflow-y:scroll}
	
html,button,input,select,textarea{
	color:#000000;
	font-family:"Maison Neue Mono", monospace;
	font-weight:300;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	font-smoothing:antialiased}

.background{
	background-color: #FFFFFF;
	background-image: url(../img/blackbroad.jpg);
	background-size:auto;
	background-repeat:no-repeat;
	background-position:center ;
	
}
.back-to-top{
	background-color: white;
	border-radius: 0.5em;
	box-shadow: 0 0 40px rgba(232, 74, 100, 0.4);
	position: fixed;
	bottom: 2em;
	left: 2em;
	color: #FF00FF ;
	padding:: 1em;
	text-transform: uppercase;
	font-size: 15px;
	font-weight: bold;
	
	
}

.back-to-top:hover {
	color: #e84a64;
}

header{
	
	
}

body{
	color: #b81600;
	text-shadow: 0px 0px 7px #b81600;
	font-family:"Maison Neue Mono", monospace;
	font-weight:300;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	font-smoothing:antialiased}
	
body{
    text-align: center;
	background-image: url(../img/bubble.png);
	background-size: 100% ;
	background-repeat:repeat;
	background-position:absolute ;
	font-size:1em;
	
	line-height:1.75;
	padding:1.33333rem}

@media all and (min-width: 40em){
	body{
		background-size:auto, 100% 100%, auto}}
	
@media all and (min-width: 45em){
	body{
	background-size:auto, 10% 10%, auto;	
	padding:2.66667rem}}
	
	.touch{
	background:#ebebeb;
	box-shadow:8px 0 #ffffff inset, -8px 0 #ffffff inset;
	padding:0 16px}
	
	h1{
		font-family:"Patron Black", "Helvetica Neue", sans-serif;
		font-size:2rem;
		line-height:1;
		margin:0 0 0.66667rem;
		padding-top:0.66667rem}
	h2{
		font-size:0.66667rem;
		font-weight:normal;
		margin:0.66667rem 0 0.33333rem}
		
	p{
		font-size:0.66667rem;
		margin:0.66667rem 0 0}

@media all and (min-width: 20em){
		body{
		background-size: 90%;}
		
		.colophon__image{
				display:block;
				margin:0 auto 0.66667rem}}
				
		.colophon__text{
				font-size:1rem}}
				
			.colophon__text:before,.colophon__text:after{
				bottom:5%;
				content:'';
				position:absolute;
				top:5%;
				transition:.3s;
				width:53%;
				z-index:-1}
				
			.colophon__text:before{
				background:#ff69b4;
				left:5%;
				-webkit-transform:translateY(4px);
				transform:translateY(4px)}
				
			.colophon__text:after{
				background:#87cefa;
				left:49%;
				-webkit-transform:translateY(-4px);
				transform:translateY(-4px)}
				
			.colophon__link:hover,.colophon__link:focus{
				color:#ffffff;
				outline:none}
				
			.colophon__link:hover .colophon__text:before,.colophon__link:focus .colophon__text:before{
				background:#FF00FF;
				-webkit-transform:translateY(0);
				transform:translateY(0)}
				
			.colophon__link:hover .colophon__text:after,.colophon__link:focus .colophon__text:after{
				background:#FF00FF;
				-webkit-transform:translateY(0);
				transform:translateY(0)}
				
			.colophon__link:active{
				color:#ffffff;
				outline:none;
				transition-duration:0.1s}
				
			.colophon__link:active .colophon__text:before,.colophon__link:active .colophon__text:after{
				width:35%}
				
			.colophon__link:active .colophon__text:before{
				left:15%}
				
			.colophon__image{
				display:inline-block;
				transition:.3s;
				vertical-align:middle}
				
			.colophon__link:hover .colophon__image,.colophon__link:focus .colophon__image{
				-webkit-transform:translateY(-25%);
				transform:translateY(-25%)}
				
		a{
			color:#ffffff;
			text-decoration:none;
			transition:.3s}
			
		a:hover,a:focus,a:active{
			color:#ffffff;
			outline:none}
			
		.text-link{
			color:#FFFFFF;
			display:inline-block;
			position:relative;
			text-decoration:none;
			transition:.3s}
			
		.text-link:before,.text-link:after{
			bottom:5%;
			content:'';
			position:absolute;
			top:5%;
			transition:.3s;
			width:47%;
			z-index:-1}
			
		.text-link:before{
			background:#ff69b4;
			left:5%;
			-webkit-transform:translateY(4px);
			transform:translateY(4px)}
			
		.text-link:after{
			background:#87cefa;
			left:49%;
			-webkit-transform:translateY(-4px);
			transform:translateY(-4px)}
			
		.text-link:hover,.text-link:focus{
			color:#ffffff;
			outline:none}
			
		.text-link:hover:before,.text-link:focus:before{
			background:#FF00FF;
			-webkit-transform:translateY(0);
			transform:translateY(0)}
			
		.text-link:hover:after,.text-link:focus:after{
			background:#FF00FF;
			-webkit-transform:translateY(0);
			transform:translateY(0)}
			
		.text-link:active{
			color:#ffffff;
			outline:none;
			transition-duration:0.1s}
			
		.text-link:active:before,.text-link:active:after{
			width:35%}
			
		.text-link:active:before{
			left:15%}
			
		.wrapper{
			display:-webkit-flex;
			display:-ms-flexbox;
			display:flex;
			-webkit-flex-direction:column;
			-ms-flex-direction:column;
			flex-direction:column;
			-webkit-justify-content:space-between;
			-ms-flex-pack:justify;
			justify-content:space-between;
			min-height:calc(100vh - 2.66667rem)}


		
@media all and (min-width: 45em){
	
	
	h1{
		font-size:3rem}
		
	h2,p{
		font-size:0.83333rem}}
	
	@media all and (min-width: 60em){
		h2,p{font-size:1rem}}
	
	@media all and (min-width: 64em){
		h1{font-size:3.5rem}}
		
	@media all and (min-width: 73.75em){
		h1{
			font-size:4rem}}
		
		a{
			color:#ffffff;
			text-decoration:none;
			transition:.3s}
			
		a:hover,a:focus,a:active{
			color:#ffffff;
			outline:none}
			
		.text-link{
			color:#FFFFFF;
			display:inline-block;
			position:relative;
			text-decoration:none;
			transition:.3s}
			
		.text-link:before,.text-link:after{
			bottom:5%;
			content:'';
			position:absolute;
			top:5%;
			transition:.3s;
			width:47%;
			z-index:-1}
			
		.text-link:before{
			background:#ff69b4;
			left:5%;
			-webkit-transform:translateY(4px);
			transform:translateY(4px)}
			
		.text-link:after{
			background:#87cefa;
			left:49%;
			-webkit-transform:translateY(-4px);
			transform:translateY(-4px)}
			
		.text-link:hover,.text-link:focus{
			color:#ffffff;
			outline:none}
			
		.text-link:hover:before,.text-link:focus:before{
			background:#FF00FF;
			-webkit-transform:translateY(0);
			transform:translateY(0)}
			
		.text-link:hover:after,.text-link:focus:after{
			background:#FF00FF;
			-webkit-transform:translateY(0);
			transform:translateY(0)}
			
		.text-link:active{
			color:#ffffff;
			outline:none;
			transition-duration:0.1s}
			
		.text-link:active:before,.text-link:active:after{
			width:35%}
			
		.text-link:active:before{
			left:15%}
			
		.wrapper{
			display:-webkit-flex;
			display:-ms-flexbox;
			display:flex;
			-webkit-flex-direction:column;
			-ms-flex-direction:column;
			flex-direction:column;
			-webkit-justify-content:space-between;
			-ms-flex-pack:justify;
			justify-content:space-between;
			min-height:calc(100vh - 2.66667rem)}
		
		
		@media all and (min-width: 45em){
			.wrapper{
				min-height:calc(100vh - 5.33333rem)}}
				
			
			
			
		
			
		@media all and (min-width: 40em){
			.grid__col--half{
				display:inline-block;
				padding-right:0.33333rem;
				vertical-align:top;
				width:50%}
				
			.grid__col--half+.grid__col--half{
				padding-left:0.33333rem;
				padding-right:0}}
				
			
		@media all and (min-width: 40em){
			.grid__col--one-third{
				display:inline-block;
				vertical-align:middle;
				width:33.33333%}}
				
			
		@media all and (min-width: 40em){
			.grid__col--two-thirds{
				display:inline-block;
				padding-right:0.66667rem;
				vertical-align:middle;
				width:66.66667%}}
				
			.align-right{
				text-align:right}
				
		
				
		
				
		@media all and (min-width: 45em){
			.button-wrap{
				bottom:auto;
				display:inline-block;
				font-size:0.83333rem;
				left:auto;
				position:relative}}
		
		
			
	
			
		@media all and (min-width: 66.25em){
			.button__image{
				display:inline-block}
				
			.button__text{
				padding-left:0.66667rem}}
				
			.button-shadow{
				background:rgba(76,61,109,0.15);
				-webkit-clip-path:polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
				clip-path:polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
				height:100%;
				position:absolute;
				left:0;
				top:4px;
				width:100%}
				
			.footer{
				display:-webkit-flex;
				display:-ms-flexbox;
				display:flex;
				-webkit-flex-direction:row;
				-ms-flex-direction:row;
				flex-direction:row;
				padding-bottom:2.66667rem;
				width:100%}
		
			.colophon{
				-webkit-align-self:center;
				-ms-flex-item-align:center;
				align-self:center;
				-webkit-flex:1;
				-ms-flex:1;
				flex:1;
				padding-top:0.66667rem;
				text-align:left}
				
			.colophon__link{
				color:#FF00FF;
				display:block;
				padding:0 0 0.66667rem;
				width:100%}
				
			.colophon__link:last-child{
				padding-bottom:0}
				
		@media all and (min-width: 40em){
			.colophon__link{
				display:inline-block;
				min-width:15%;
				padding:0 0.66667rem;
				width:auto}}
				
			.colophon__text{
				display:inline-block;
				font-size:0.66667rem;
				padding-left:0.33333rem;
				position:relative;
				text-decoration:none;
				vertical-align:middle}
				
		@media all and (min-width: 40em){
			.colophon__text{
				display:block;
				font-size:0.83333rem}}
				
		@media all and (min-width: 60em){
			body {
				background-size: 70%;
				
			}
			
			.colophon__text{
				font-size:1rem}}
				
			.colophon__text:before,.colophon__text:after{
				bottom:5%;
				content:'';
				position:absolute;
				top:5%;
				transition:.3s;
				width:53%;
				z-index:-1}
				
			.colophon__text:before{
				background:#ff69b4;
				left:5%;
				-webkit-transform:translateY(4px);
				transform:translateY(4px)}
				
			.colophon__text:after{
				background:#87cefa;
				left:49%;
				-webkit-transform:translateY(-4px);
				transform:translateY(-4px)}
				
			.colophon__link:hover,.colophon__link:focus{
				color:#ffffff;
				outline:none}
				
			.colophon__link:hover .colophon__text:before,.colophon__link:focus .colophon__text:before{
				background:#FF00FF;
				-webkit-transform:translateY(0);
				transform:translateY(0)}
				
			.colophon__link:hover .colophon__text:after,.colophon__link:focus .colophon__text:after{
				background:#FF00FF;
				-webkit-transform:translateY(0);
				transform:translateY(0)}
				
			.colophon__link:active{
				color:#ffffff;
				outline:none;
				transition-duration:0.1s}
				
			.colophon__link:active .colophon__text:before,.colophon__link:active .colophon__text:after{
				width:35%}
				
			.colophon__link:active .colophon__text:before{
				left:15%}
				
			.colophon__image{
				display:inline-block;
				transition:.3s;
				vertical-align:middle}
				
			.colophon__link:hover .colophon__image,.colophon__link:focus .colophon__image{
				-webkit-transform:translateY(-25%);
				transform:translateY(-25%)}
							
		@media all and (min-width: 40em){
			.colophon__image{
				display:block;
				margin:0 auto 0.66667rem}}
					
		@media all and (min-width: 45em){
			.footer{
				padding-bottom:0}}
					
		@media all and (min-width: 60em){
			.colophon{
				margin-left:7.33333rem;
				text-align:center}}