/*
Name: Mask: It's like the light in the Refrigerato
Author: Renee Carmichael
Author URI: http://www.fleeimmediately.com
Description: Technology lures us in.

*/


/* RESET */

html, body, ul, ol, li, form, fieldset, legend
{
	margin: 0;
	padding: 0;
}

h1, h2, h3, h4, h5, h6, p { margin-top: 0; }

fieldset,img { border: 0; }

legend { color: #000; }

li { list-style: none; }

sup { vertical-align: text-top; }

sub { vertical-align: text-bottom; }

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

caption, th, td
{
	text-align: left;
	vertical-align: top;
	font-weight: normal;
}

input, textarea, select
{
	font-size: 110%;
	line-height: 1.1;
}

abbr, acronym
{
	border-bottom: .1em dotted;
	cursor: help;
}

/* THE FRIDGE */
@import url('https://fonts.googleapis.com/css?family=Roboto');

body {
	font-family: 'Roboto', sans-serif;
}

.bio-time {
	overflow:hidden;
}

.bio-identity {
	display:none;
}

.open-fridge {
	display:none;
	position:absolute;
	width:100%;
	height:100%;
	left:0;
	bottom:0;
	top:0;
	right:0;
	z-index:1001;
	background-color:#000;
	color:#fff;
	overflow-y:auto;
}

#generically-social {
	width:70%;
	margin:0 auto;
	min-height:100vh;
	overflow-y:hidden;
}

#the-meat {
	margin-top:20px;
	border:1px solid #000;
	min-height:93vh;
	overflow-y:auto;
	padding:30px;
}

.profile-button {
	position:absolute;
	top:30px;
	right:15%;
	width:50px;
}

.fridge-button img {
	width:50px;
}

#profile {
	min-height:200px;
}

#profile img {
	width:200px;
	float:left;
	padding-right:20px;
}

.plate-says {
	display:block;
	position:relative;
	font-size:20px;
	max-width:330px;
	margin-top:105px;
}

.profile-title {
	font-size:20px;	
}

.profile-title .name {
	text-decoration:none;
	color:#000;
}

.name {
	text-decoration: underline;
	color:#0000FF;
}

#the-light-is-on {
	padding-right:300px;
}

#carrot-ads {
	position:absolute;	
	right:16%;
	border:1px solid #000;
	padding:10px;
}

#carrot-ads img {
	display:block;
	width:250px;
}

span.ad:nth-child(3) {
	margin-top:150px;
}

#carrot-ads > img:nth-child(2) {
	padding-bottom:0px;
}

.fridge {
	max-height:50vh;
	padding-bottom:10px;
}

#bio {
	width:70%;
	margin:0 auto;
	text-align:center;
	margin-top:20px;
}

.bio {
	white-space: pre-wrap;
	text-align:left;
}

.fridge-button img {
	width:50px;
}


.back > img:nth-child(1) {
	width:50px;
	position:fixed;
	top: 10px;
}

.fa-home {
	font-size:30px!important;
	margin-left:20px;
	margin-top:20px;
}

#comments-container {
	width:70%;
	margin:0 auto;
}

#comments-light {
	margin-top:50px;
	padding-right:300px;
}

#code {
	display:none;
	position:absolute;
	top:20px;
	right:20px;
	width:500px;
	height:120vh;
	overflow:auto;
	background-color:#fff;
	z-index:10001;
}


#smiley {
	display:none;
}

#video-1 {
	display:none;
	width:250px;
}

.bot {
	width:70%;
}

.ad-3 {
	display:none;
}

.ad-1 {
	display:block;
}

.ad-2 {
	display:block;
}

.bio-loop {
	display:none;
}

#generically-social > div.profile-button > a > img:nth-child(3) {
	position:absolute;
	margin-top:-70px;
	width:50px;
	margin-left:10px;
}

.light {
    opacity: 1;
    animation: fade 5s linear infinite;
}

@keyframes fade {
  0%,100% { opacity: 0 }
  50% { opacity: 1 }
}


.blink {
  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: infinite;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: infinite;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: infinite;
}

@-webkit-keyframes flash {
    0% { background-color: none; }
    50% { background-color: #fbf8b2; }
    100% { background-color: none; }
}

@-moz-keyframes flash {
    0% { background-color: none; }
    50% { background-color: #fbf8b2; }
    100% { background-color: none; }
}

@-ms-keyframes flash {
    0% { background-color: none; }
    50% { background-color: #fbf8b2; }
    100% { background-color: none; }
}

@media only screen and (max-width : 1024px) {
	#generically-social {
	width:80%;
	margin:0 auto;
	min-height:100vh;
	overflow-y:hidden;
	}
	#carrot-ads {
    position: absolute;
    right: 11%;
    border: 1px solid #000;
    padding: 10px;
	}
	.profile-button {
    position: absolute;
    top: 30px;
    right: 11%;
    width: 50px;
	}
	.bot {
	width:80%;
	}

}

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


}

@media only screen and (max-width : 768px) {
	#generically-social {
	width:95%;
	margin:0 auto;
	min-height:100vh;
	overflow-y:hidden;
	}
	#carrot-ads {
    position: absolute;
    right: 5%;
    border: 1px solid #000;
    padding: 10px;
	}
	.profile-button {
    position: absolute;
    top: 30px;
    right: 5%;
    width: 50px;
	}
	.bot {
	width:85%;
	}


}

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

	#profile img {
    width: 200px;
    float: left;
    padding-right: 20px;
    margin-left: -20px;
    margin-top: 2px;
	}
	.stat {
		margin-top:-20px;
	}
	.bot {
	width:95%;
	}


}

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

	#carrot-ads {
    position: absolute;
    right: 5%;
    border: 1px solid #000;
    padding: 10px;
	}
	#carrot-ads {
    position: relative;
    right: 0;
    border: 1px solid #000;
    padding: 10px;
	}
	#the-light-is-on {
    padding-right: 00px;
    padding-top:20px;
	}
	#comments-light {
    margin-top: 50px;
    padding-right: 0px;
	}
	.bot {
	width:100%;
	}	

}

@media only screen and (max-width : 375px) { 
	.plate-says {
    display: block;
    position: relative;
    font-size: 20px;
    max-width: 330px;
    margin-top: 75px;
    margin-left: -20px;
    clear:both;
	}
	.stat {
    margin-top: 20px;
    float: left;
	}
	#profile img {
    width: 200px;
    float: left;
    padding-right: 20px;
    margin-left: -20px;
    margin-top: -20px;
	}
	.stat-detail {
		float:right;
	}
	#carrot-ads img {
    display: block;
    width: 220px;
	}
	#carrot-ads {
    position: relative;
    right: 0;
    border: 1px solid #000;
    padding: 10px;
    margin-top: 20px;
	}

}