@charset "UTF-8";
/*  RESET
	========================================================================== */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}main,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}ol,ul{list-style:none;}li{display:-moz-inline-stack;display:inline-block;vertical-align:top;zoom:1;*display:inline;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}b,strong{font-weight:bold;}textarea{overflow:auto;vertical-align:top;}html{font-family:sans-serif;font-size:100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}audio:not([controls]){display:none;height:0;}[hidden],template{display:none;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.25em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}pre{overflow:auto;}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;}button{overflow:visible;}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;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}input{line-height:normal;}input[type="checkbox"],input[type="radio"]{padding:0;}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}input[type="search"]{-webkit-appearance:textfield;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}legend{border:0;padding:0;}optgroup{font-weight:bold;}td,th{padding:0;}a{background:transparent;text-decoration:none;}a:active,a:hover,a:focus{border:none;outline:0;text-decoration:none;}::selection{background:#6a6a6a;color:#f5f5f5;text-shadow:1px 1px 1px #060606;}::-moz-selection{background:#6a6a6a;color:#f5f5f5;text-shadow:1px 1px 1px #060606;}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;}::-webkit-input-placeholder{color:inherit;opacity:0.5;font-family:inherit;}:-moz-placeholder{color:inherit;opacity:0.5;font-family:inherit;}::-moz-placeholder{color:inherit;opacity:0.5;font-family:inherit;}:-ms-input-placeholder{color:inherit;opacity:0.5;font-family:inherit;}button,.btn:hover{cursor:pointer;}*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

@font-face {
	font-family: 'ArialBlack';
	src: url('//freehookupaffair.com/v2/84/fonts/Arial-Black.eot');
	src: url('//freehookupaffair.com/v2/84/fonts/Arial-Black.eot?#iefix') format('embedded-opentype'),
		 url('//freehookupaffair.com/v2/84/fonts/Arial-Black.woff2') format('woff2'),
		 url('//freehookupaffair.com/v2/84/fonts/Arial-Black.woff') format('woff'),
		 url('//freehookupaffair.com/v2/84/fonts/Arial-Black.ttf') format('truetype'),
		 url('//freehookupaffair.com/v2/84/fonts/Arial-Black.svg#Arial-Black') format('svg');
	font-weight: 900;
	font-style: normal;
}

/*  DEFAULT & BASIC STYLES
	========================================================================== */
html,
body {
	font: 900 62.5%/1 "ArialBlack","Arial Black",Arial,sans-serif;
}
body {
	background: #000;
	color: #fff;
	font-size: 100%;
}

main,
header,
section,
footer,
nav,
.container,
a {
	-webkit-transition: all 0.175s ease-out;
	-moz-transition: all 0.175s ease-out;
	-ms-transition: all 0.175s ease-out;
	-o-transition: all 0.175s ease-out;
	transition: all 0.175s ease-out;
}

nav:before,
nav:after,
main:before,
main:after,
header:before,
header:after,
section:before,
section:after,
footer:before,
footer:after,
.cf:before,
.cf:after {
	display: table;
	content: " ";
}
nav:after,
main:after,
header:after,
section:after,
footer:after,
.cf:after {
	clear: both;
}


img {
	display: inline-block;
	height: auto !important;
	margin: 0 auto;
	max-width: 100%;
	width: auto;
}
.dib {
	display: inline-block;
}

/*  ==========================================================================
	CONTENT 
	========================================================================== */
.main {
	background: url('//freehookupaffair.com/v2/84/images/bg-body.jpg') repeat 100% 0 #000;
	-webkit-animation: main 90s linear forwards infinite;
	animation: main 90s linear forwards infinite;
	height: 100vh;
	width: 100vw;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-flow: column nowrap;
	flex-flow: column nowrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
	@-webkit-keyframes main {
	  0%,100% {
	    background-position: 100% 0;
	  }
	  50% {
	    background-position: 0 0;
	  }
	}
	@keyframes main {
	  0%,100% {
	    background-position: 100% 0;
	  }
	  50% {
	    background-position: 0 0;
	  }
	}
	.df {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-flow: column nowrap;
		flex-flow: column nowrap;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-ms-flex-item-align: center;
		align-self: center;
	}
		.df__r {
			-webkit-box-flex: 1;
			-ms-flex: 1 1 auto;
			flex: 1 1 auto;
			width: 100%;
		}

		.box {
			background: rgba(0, 0, 0, 0.74);
			border-radius: 1em;
			padding: 5.5em 5vw;
			text-align: center;
			max-width: 92%;
			width: 895px;
		}

		.btn,
		.text,
		.subtitle,
		.title {
			letter-spacing: -0.5px;
			letter-spacing: -0.05em;
		}
		.title {
			color: #fffc00;
			font-size: 8.3em;
			line-height: 0.78;
			letter-spacing: -0.5px;
			letter-spacing: -0.05em;
			margin-bottom: 0.54em;
		}
		.subtitle {
			color: #f00;
			font-size: 3.6em;
			line-height: 0.78;
			margin-bottom: 0.64em;
		}


		.text {
			color: #fff;
			font-size: 2.173em;
			line-height: 1.1;
			margin-bottom: 1em;
		}


		.btn {
			background: #008aff;
			color: #fff;
			display: inline-block;
			font-size: 3.678em;
			line-height: 1;
			padding: 0.39em 0.83em 0.4em;
			text-transform: uppercase;
			text-align: center;
			position: relative;
			overflow: hidden;
			z-index: 1;
			-webkit-transition: -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
			transition: -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
			-o-transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
			transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
			transition: transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000), -webkit-transform 0.2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
		}
			.btn:hover {
				-webkit-transform: scale(1.05);
				-moz-transform: scale(1.05);
				-ms-transform: scale(1.05);
				-o-transform: scale(1.05);
				transform: scale(1.05);
			}
			.btn:active {
				-webkit-transform: scale(1.025);
				-ms-transform: scale(1.025);
				-o-transform: scale(1.025);
				transform: scale(1.025);
			}
			.btn,
			.btn::before {
				border-radius: 0.333em;
			}


			.btn::before {
				display: block;
			  content: '';
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			  background: rgba(255,255,255,0.25);
			  z-index: -1;
			  opacity: 0;
			  -webkit-transform: scale3d(0.9, 0.1, 1);
			  transform: scale3d(0.9, 0.1, 1);
			  -webkit-transition: -webkit-transform 0.4s, opacity .4s;
			  transition: transform 0.4s, opacity .4s;
			  -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
			  transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
			}
			.btn:hover::before {
			  opacity: 1;
			  -webkit-transform: translate3d(0, 0, 0);
			  transform: translate3d(0, 0, 0);
			}

			.btn::after {
			  content: '';
			  position: absolute;
			  top: -50%;
			  right: -50%;
			  bottom: -50%;
			  left: -50%;
			  background: -o-linear-gradient(top, rgba(0,0,0, 0), rgba(255,255,255,0.5) 50%, rgba(0,0,0, 0));
			  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0, 0)), color-stop(50%, rgba(255,255,255,0.5)), to(rgba(0,0,0, 0)));
			  background: linear-gradient(to bottom, rgba(0,0,0, 0), rgba(255,255,255,0.5) 50%, rgba(0,0,0, 0));
			  -webkit-transform: rotateZ(60deg) translate(-3em, 14em);
			  -ms-transform: rotate(60deg) translate(-3em, 14em);
			  transform: rotateZ(60deg) translate(-3em, 14em);
			  -webkit-transition: visibility 0.1s ease-out, opacity 0.1s ease-out;
			  -o-transition: visibility 0.1s ease-out, opacity 0.1s ease-out;
			  transition: visibility 0.1s ease-out, opacity 0.1s ease-out;
			  opacity: 0;
			  visibility: hidden;
			}
			.btn:hover::after {
			  opacity: 1;
			  visibility: visible;
			}

			.btn:hover::after,
			.btn:focus::after {
			  -webkit-animation: shine 0.7s forwards;
			  animation: shine 0.7s forwards;
			}
			@-webkit-keyframes shine {
			  100% {
			    -webkit-transform: rotateZ(60deg) translate(3em, -14em);
			    transform: rotateZ(60deg) translate(3em, -14em);
			  }
			}
			@keyframes shine {
			  100% {
			    -webkit-transform: rotateZ(60deg) translate(3em, -14em);
			    transform: rotateZ(60deg) translate(3em, -14em);
			  }
			}


			
			
		
			


/*  ==========================================================================
	MEDIA QUERIES 
	========================================================================== */

@-ms-viewport { width: device-width; }


@media only screen and (max-width:939px){
  .box {
  	font-size: 0.95em;
  }
  .title {
  	font-size: 7.8em;
  }
}
@media only screen and (max-width:767px){
  .box {
  	font-size: 0.9em;
  }
  .title {
  	font-size: 7.3em;
  }
}
@media only screen and (max-width:579px){
  .box {
  	font-size: 0.85em;
  }
  .title {
  	font-size: 6.8em;
  }
}
@media only screen and (max-width:479px){
  .box {
  	font-size: 0.8em;
  }
  .title {
  	font-size: 6.3em;
  }
}
@media only screen and (max-width:379px){
  .box {
  	font-size: 0.75em;
  }
  .title {
  	font-size: 5em;
  }
}