*{
	margin:0;
	padding:0;
	box-sizing:borer-box;
}

body{
	font-family: 'Arial', 'sans-serif';
	font-size: 16px;
    background: #ffffff;
    position: relative;
    color:#333;
}

h2{
	margin:4em 0 0;
	font-size: .8em;
	font-weight: 400;
}

p{
	text-align: center;
	text-decoration: none;
	font-size: 1em;
	margin:10px 0 0;
}

a:link{
	text-decoration: none;	
}

a:visited{
	color: inherit;
}

a:hover{
	color: inherit;
}

a:active{
	color: inherit;
}



header{
	position: fixed;
	top:15px;
	right:10px;
	z-index:2;
}

nav{
  	background:#fff;
	display:none;
	position:absolute;
  	right:.5em;
  	width:322px;
  	margin:1em 0 0;
  	border:0.1em solid #cbcbcb;
  	border-radius:0.15em;
  	padding:0;
  	-webkit-box-shadow: 0px 0px 9px -1px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 9px -1px rgba(0,0,0,0.25);
	-o-box-shadow: 0px 0px 9px -1px rgba(0,0,0,0.25);
	box-shadow: 0px 0px 9px -1px rgba(0,0,0,0.25);
	z-index:3;
}

ul{
	list-style:none;
}

li{
	display:inline-block;
	padding:0 0.75em;
	vertical-align: middle;
	font-size:0.8em;
}

li a:first-of-type{
	color:#666;
}

li a:hover{
	text-decoration: underline;
}

img{
	width: 100%;
	display: block;
	margin:auto;
}

input[type="text"]{
	font-family:inherit;
	display: block;
	width:100%;
	margin:0 auto;
	border:0.1em solid #d8d8d8;
	padding:0.5em;
	outline:none;
	font-size:1em;
	position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
}

input[type="text"]:hover{
    border: 0.1em solid #b2b2b2;
    outline:none;
}

input[type="text"]:active{
    border: 0.1em solid #00a8e1;
    outline:none;
}

input[type="text"]:focus{
    border: 0.1em solid #00a8e1;
    outline:none;
}


/* -------------------------------------- GIF PAGES */

section{
	height:97vh;
}

section:last-of-type{
	height:100vh;
}

section figure{
	width:40%;
	min-width: 350px;
	max-width: 420px;
	margin:0 auto;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-52%);
	-moz-transform: translateY(-52%);
	-o-transform: translateY(-52%);
  	transform: translateY(-52%);
}

section figure img{
	cursor:default;
}

/* -------------------------------------- FOOTER */

footer{
	bottom:0;
	position:fixed;
	width:100%;
	height:3em;
	border:0.1em solid #e4e4e4;
	padding:.8em 0.5em;
	background-color:#f2f2f2;
}

footer a {
	padding:.8em;
	font-size:0.8em;
	color:#666;
	text-decoration:none;
}

footer a:hover{
	color:#333;
	text-decoration:underline;
	cursor:pointer;
}

.clearfix:after{
	display:block;
	height:0;
	font-size:0;
	visibility:hidden;
	content:'';
	clear:both;
}

/* -------------------------------------- NAV CLASSES */
.menu{
	font-size:18px;
	color: #737373;
	width:18px;
	height:18px;
}

.grid{
	width:4px;
	height:4px;
	background-color: #737373;
	float: left;
	margin:1px;
}

.arrow-box {
    position: relative;
  }

.arrow-box:after, .arrow-box:before {
	bottom: 0;
	left: 210px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow-box:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #ffffff;
	border-width: 7px;
	margin-left: -7px;
}

.arrow-box:before {
	border-color: rgba(203, 203, 203, 0);
	border-bottom-color: #cbcbcb;
	border-width: 8px;
	margin-left: -8px;
}

.icons{
	width:90px;
	float:left;
	border:0.1em solid #fff;
	padding:1em;
	text-align: center;
	cursor:pointer;
	margin:10px 0;
}

.icons:visited{
	color: inherit;
}

.icons:hover{
	border:0.1em solid #e4e4e4;
	cursor:pointer;
	text-decoration: none;
}

.icons:active{

}

.icons img{
	width:45px;
}

/* -------------------------------------- PAGE CLASSES */

.tall{
	width:auto;
	max-height:550px;
}


/* -------------------------------------- NAV IDs */


#toggle{
  	display: none; 
}

#toggle:checked + nav {
	display:block;
}

#icons_wrap{
	width:270px;
	margin:0 auto;
	padding:20px 0 28px;
}

#more{
	display: block;
	width:100%;
	background-color: #F5F5F5;
	padding:10px 0;
	color:#737373;
	text-align: center;
}

#more:hover{
	color:#333;
	text-decoration: underline;	
}

#avatar{
	width:33px;
	height:33px;
	background:url("../imgs/index/ux3.png") no-repeat center center scroll;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/* -------------------------------------- ABOUT PAGE */

#about{
	background:#eee;
}

#desc{
	margin:0 auto;
	width:33em;
	padding:150px 0;
}

#desc p{
	font-size: .8em;
	line-height: 150%;
	text-align: left;
}
#thanku,
#thanku p{
	text-align: right;
}

#credit{
	color: #F2706E;
}

/* -------------------------------------- SEARCH */

#google{
	width:50%;
	min-width:350px;
	margin:auto;
	padding: 240px 0;
}

#google img {
    max-width:270px;
}

#search-wrap{
	width:100%;
	height:36px;
	margin:1.75em auto .5em;
	position: relative;
}

#searchbtn{
	width:269px;
	margin:1em auto;
}

#searchbtn a{
	display: inline-block;
	height:29px;
	background-color: #f5f5f5;
	margin:0 0 0 1em;
	border:1px solid #dcdcdc;
	border-radius: 2px;
	padding:0 .7em;
	color:#444;
	font-size:.7em;
	font-weight:600;
	line-height:27px;
}

#lucky:after{
	content:"Lucky";
}

#searchbtn a:nth-of-type(2):hover > #lucky:after{
	content:"Heartbroken";
}

/* -------------------------------------- QUERY RESULTS */

/* query results */
#livesearch{
	background: #fff;
    position: relative;
    top: 35px;
    left: -1.25%;
    z-index: 1;
    width: 102.51%;
	font-size:1em;
	font-weight:600;
	line-height:0.8em;
	cursor:default;
}

#livesearch a:link {
    color:#000;
    padding:.75em;
    text-decoration:none;
    display:block;
    cursor:default;
}

#livesearch a:visited {
    color:#52188c;
}

#livesearch a:hover {
    background-color:#f2f2f2;
}

#livesearch a:active {
    color:inherit;
}

/* -------------------------------------- FB */

#fbsearch{
	background:#cfe6d4;
}

#inarelationship{
	background:#e8f7b0;
}

#relationshipstatusask{
	background:#b7cbff;
}

#mutualfriends{
	background:#c49ace;
}

#friendsuggest{
	background:#bed9da;
}

/* -------------------------------------- GOOGLE */

#gchatfight{
	background:#c6cae3;
}

#gchatblock{
	background:#ddf0e4;
}

#gmailstar{
	background:#76c2cd;
}

#loveofmylife{
	background:#fae0df;
}

#incognito{
	background:#b18bb3;
}

/* -------------------------------------- INSTAGRAM */

#untaggingme{
	background:#fee7d0;
}

#unfollowingme{
	background:#ad5bbf;
}

#unlikingmypictures{
	background:#d2dcec;
}

/* -------------------------------------- IOS */

#autocorrect{
	background:#c9bdc8;
}

#notifications{
	background:#f26f70;
}

#secretlanguage{
	background:#ffcca6;
}



/* -------------------------------------- LINKEDIN */

#connectedonlinkedin{
	background:#faffce;
}

#removedfromlinkedin{
	background:#c4d2da;
}

#whatwehaveincommon{
	background:#f7dbad;
}


/* -------------------------------------- TWITTER */

#followsme{
	background:#dcecf7;
}

#joketwitteraccount{
	background:#ffcb4c;
}

#disappearingtweets{
	background:#e4d9e1;
}

/* -------------------------------------- ALL page */
.all-col{
	width:25%;
	float:left;
	padding: 0 10px;
}


#all-wrap{
	width:80%;
	max-width: 1300px;
	margin:auto;
	padding:100px 0;
}

#all-wrap figure{
	margin:20px 0;
	padding:30px 0;
}

#all-wrap figure img{
	width:90%;
}

/* -------------------------------------- 404 page */

#error{
	background:#1E97FF;
}

@media screen and (max-width:1220px){
	#all-wrap{
		width:97%;
	}
}

@media screen and (max-width:940px){

	header{
		position: absolute;
		width: 346px;
		right:0;
		left:50%;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-o-transform: translateX(-50%);
	  	transform: translateX(-50%);
	}

	nav{
		width: 333px;
		left: 50%;
	    -webkit-transform: translateX(-50%);
	    -moz-transform: translateX(-50%);
	    -o-transform: translateX(-50%);
	    transform: translateX(-50%);
	}

	footer{
		padding: 0.5em;
	}

	footer a {
		display: block;
    	width: 55px;
    	margin: auto;
	}

	.arrow-box:after, .arrow-box:before {
		left: 221px;
	}

	.all-col{
		width:50%;
	}

	.all-col:nth-of-type(3) {
    	margin-top: -80px;
	}

	.all-col:nth-of-type(4) {
    	margin-top: -15px;
	}

	#google{
		width:70%;
		padding:180px 0;
	}

	#google img{
		width:70%;
	}

	#all-wrap{
		padding:60px 0;
	}
}

@media screen and (max-width:600px){

	section{
		height: auto;
		padding:80px 0;
	}

	section:last-of-type{
		height:auto;
	}

	section figure{
		width:90%;
		top: 0;
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-o-transform: translateY(0);
	  	transform: translateY(0);
	}

	.all-col{
		width:100%;
		float: none;
	}

	.all-col:nth-of-type(3),
	.all-col:nth-of-type(4){
    	margin-top: 0px;
	}

	.tall{
		max-height: 420px;
	}

	#desc{
		width:85%;
	}

	#thanku{
		padding:0;
	}

}

@media screen and (max-width:370px){
	header{
		width:320px;
	}

	nav {
    	width: 300px;
    	right:0;
    	left:50%;
	}

	li{
		padding: 0 0.5em;
	}

	.arrow-box:after, .arrow-box:before {
		left: 236px;
	}

	#google{
		min-width: 320px;
		padding:130px 0;
	}

	#search-wrap{
    	width: 90%;
    	margin:1em auto .5em;
	}
}