/* ===========================
	$GENERAL
============================ */
body {
	color:#383838;
	background-image:url('/img/grey_wash_wall.png');
	background-attachment:fixed;
	line-height:100%;
}

a {color:#383838; text-decoration:none; cursor:pointer;}
a:hover {color:#383838; text-decoration:none;}

h1 {font-size:30px;}

.raleway {font-family: 'Raleway', sans-serif; line-height:100%;}

.bg-brushed {background-image:url('/img/brushed.png');}

.height1000 {height:1250px; width:100%;}

.size15,
.size18,
.size20,
.size30,
.size40,
.size50,
.size110
{
	line-height:110%;
}

.line15 {line-height:1.53em;}

.size15 {font-size:15px;}
.size18 {font-size:18px;}
.size20 {font-size:20px;}
.size30 {font-size:30px;}
.size40 {font-size:40px;}
.size50 {font-size:50px;}
.size110 {font-size:110px;}

.white {color:#fff;}
.purple {color:#910c9d;}
.grey {color:#e0dede;}

.white-border-top {border-top:5px solid #fff;}
.white-border-bottom {border-bottom: 5px solid #fff;}

.bg-white {background-color:rgba(255,255,255,0.3);}

.rounder-corners {border-radius:6px; -webkit-border-radius:6px;}

.clear {clear:both;}
.spacer {clear:both; height:22px;}

img.pull-left {margin:0 15px 15px 0;}
img.pull-right {margin:0 15px 15px 15px;}


/* ===========================
	$BUTTONS
============================ */
.btn-purple {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #910c9d;
  *background-color: #910c9d;
  background-image: -moz-linear-gradient(top, #910c9d, #601767);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#910c9d), to(#601767));
  background-image: -webkit-linear-gradient(top, #910c9d, #601767);
  background-image: -o-linear-gradient(top, #910c9d, #601767);
  background-image: linear-gradient(to bottom, #910c9d, #601767);
  background-repeat: repeat-x;
  border-color: #404149;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff910c9d', endColorstr='#ff601767', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.btn-purple.disabled,
.btn-purple[disabled] {
  color: #ffffff;
  background-color: #601767;
  *background-color: #601767;
}

.btn-purple:active,
.btn-purple.active {
  background-color: #601767 \9;
}

/* ===========================
	$NAV
============================ */
#nav {
	position:fixed;
	height:80px;
	top:0;
	width:97%;
	padding:34px 0 0 3%;
	background-color:rgba(231,231,231, 0.9);
	z-index:8900;
}
#nav .span8 a, #nav .span12 a {
	color:#383838;
	border-bottom:5px solid transparent;
	padding:0 24px;
	transition:all 300ms;
	-webkit-transition:all 300ms;
}

#nav .span8 a:hover, #nav .span12 a:hover {
	border-bottom:5px solid #910c9d;
}

/* ===========================
	$CONTENT
============================ */
.title {padding:25px 3% 28px;}

#overlay {
	background-color:rgba(0,0,0,0.8);
	width:100%;
	height:100%;
	top:0;
	left:0;
	position:fixed;
	z-index:9000;
}

#pop-up {
	background-color:rgba(255,255,255, 0.85);
	top:10%;
	left:10%;
	width:80%;
	height:60%;	
	padding:2%;
	position:fixed;
	z-index:9001;
	border-radius:10px;
	-webkit-border-radius:10px;
	box-shadow:0 0 10px 0 rgba(0,0,0,0.75);
	-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.75);
}
#pop-up .content {
	position:relative;
	width:100%;
	height:90%;
	margin-top:10px;
	line-height:1.4em;
	overflow:auto;
}

#me,
#what-i-do,
#what-i-have-done,
#contact-me 
{
	position:relative;
}

#me .big-text,
#what-i-do .big-text,
#what-i-have-done .big-text,
#contact-me .big-text
{
	position:absolute;
	left:24%;
	right:24%;
} 

#me .big-text {
	top:236px;
}

#me .me {
	position:absolute;
	right:-10%;
	top:-30px;
}


.circle {
	border-radius:50%;
	-webkit-border-radius:50%;
	background-color:#383838;
	width:20px;
	height:20px;
	
}

.speech-bubble {
	position:absolute;
	background-color:#828080;
	padding:10px 15px;
	color:#f2f2f2;
	font-size:14px;
	border-radius:8px;
	-webkit-border-radius:8px;
	text-align:center;
	opacity:0;
	transition:all 200ms;
	-webkit-transition:all 200ms;
}

.speech-bubble.up {
	min-width:250px;
	left:-125px;
	top:-100px;
}

.speech-bubble.up .text {
	position:relative;
	top:-20px;
	transition:all 200ms;
	-webkit-transition:all 200ms;
	opacity:0;
}

.speech-bubble.up:before {
	content:"";
	display:block;
	position:absolute;
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #828080;
	bottom:-20px;
	left:41%;
}

.speech-bubble.down {
	min-width:250px;
	left:-125px;
	top:45px;
}

.speech-bubble.down .text {
	position:relative;
	top:0px;
	transition:all 200ms;
	-webkit-transition:all 200ms;
	opacity:0;
}

.speech-bubble.down:before {
	content:"";
	display:block;
	position:absolute;
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #828080;
	top:-20px;
	left:41%;
}

.rounded-square {
	background-color:#a8a8a8;
	padding:13px 19px;
	font-size:15px;
	border-radius:8px;
	-webkit-border-radius:8px;
}

.hover-effect {
	border:3px solid #e5e5e5;
	cursor:pointer;
	transition:all 200ms;
	-webkit-transition:all 200ms;
	
}

.hover-effect:hover {
	border:3px solid #fff;
	box-shadow:0 0 10px 0 rgba(0,0,0,0.75);
	-webkit-box-shadow:0 0 10px 0 rgba(0,0,0,0.75);
}

.hover-effect:hover .speech-bubble.up {
	opacity:1;
	display:block;
	top:-85px;
}
.hover-effect:hover .speech-bubble.up  .text {
	top:0;
	opacity:1;
}

.hover-effect.wait-up .speech-bubble.down {
	opacity:1;
	display:block;
}
.hover-effect.wait-up .speech-bubble.down .text {
	opacity:1;
}

/* ===========================
	$FUN FACTS
============================ */
.fun-fact-0,
.fun-fact-1,
.fun-fact-2,
.fun-fact-3,
.fun-fact-4,
.fun-fact-5,
.fun-fact-6,
.fun-fact-7,
.fun-fact-8
{
	position:absolute;
	z-index:800;
}

.fun-fact-0 { right:20%;}
.fun-fact-1 { right:14%;}
.fun-fact-2 { left:10%;}
.fun-fact-3 { right:40%;}
.fun-fact-4 { left:14%;}
.fun-fact-5 { right:15%;}
.fun-fact-6 { left:40%;}
.fun-fact-7 { right:30%;}
.fun-fact-8 { left:49%;}


/* ===========================
	$SAMPLES
============================ */
.sample-0,
.sample-1,
.sample-2,
.sample-3,
.sample-4,
.sample-5,
.sample-6,
.sample-7,
.sample-8,
.sample-9 {
	position:absolute;
	z-index:801;
}

.sample-0 {position:relative;}
.sample-1 {left:20%;}
.sample-2 {right:10%;}
.sample-3 {left:30%;}
.sample-4 {right:10%;} 
.sample-5 {left:10%;}
.sample-6 {right:13%;}
.sample-7 {left:30%;}
.sample-8 {right:30%;}
.sample-9 {left:41.5%;}


/* ===========================
	$SORTING
============================ */
body.dragging, body.dragging * { cursor: move !important; }
			
.dragged { position: absolute; top: 0; opacity: .5; z-index: 2000;}

ul.groups {
	list-style:none;
	border:1px solid #333333;

	padding:8px;
}
ul.groups li.btn {display:block; margin-bottom:6px;}
ul.groups li.placeholder {  position: relative; margin:0; padding:0; border: none; }

ul.groups li.placeholder:before
{
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	margin-left:-16px;
	left: -5px;
	top: -4px;
	border: 6px solid transparent;
	border-left-color: #f00;
	border-right: none;
}

/* ===========================
	$ADD, EDITING, DELETING
============================ */
.item {
	display:block;
	margin:0 0 5px 7px;
	padding:5px;
	border:1px solid #ffffff;
	border-radius:6px;
	-webkit-border-radius:6px;
	box-shadow:0 0 6px 0 rgba(0,0,0,0.5);
	-webkit-box-shadow:0 0 6px 0 rgba(0,0,0,0.5);
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #efeaf2 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efeaf2)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#efeaf2 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#efeaf2 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#efeaf2 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#efeaf2 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efeaf2',GradientType=0 ); /* IE6-9 */
}
.item:hover {
	border:1px solid #601767;
}
.items-container input[type="text"] {margin:4px 0 0 0;}

/* ===========================
	$STEP BY STEP FORM
============================ */
.step {
	width:100%;
	display:none;
}

.step.active {
	display:block;
}
/* ===================================
	$RESPONSIVE STYLES
===================================== */
/* Large desktop */
@media (min-width: 1200px) {  }

@media (max-width: 1119px) {
	#me .me {
		display:none;
	}
}


/* Less than large desktop */
@media (max-width: 1199px) {
	.title {padding:14px 3% 18px;}
	.size40 {font-size:27px;}
}

/* In between desktop and tablet*/ 
@media (min-width: 980px) and (max-width: 1199px) {}

/* anything below tablet size */
@media (max-width: 979px) {
	body {padding:0;}
	body {
		height:3000px;
	}
	.circle {display:none;}
	
	.height1000 {height:600px; width:100%;}
	
	.size110 {font-size:70px;}
	.size50 {font-size:30px;}
	
	a.rounded-square {display:block;}
	.rounded-square:active {
		box-shadow:inset 2px 2px 10px 0 rgba(0,0,0,0.7);
		-webkit-box-shadow:inset 2px 2px 10px 0 rgba(0,0,0,0.7);
	}
	
	#nav {
		position:fixed;
		height:auto;
		top:0;
		width:100%;
		padding:15px 0;
		background-color:rgba(231,231,231, 0.9);
		z-index:8900;
	}
	
	#me .big-text {
		top:150px;
	}

	#me .big-text,
	#what-i-do .big-text,
	#what-i-have-done .big-text,
	#contact-me .big-text
	{
		position:relative;
		left:0;
		right:0;
	} 
	
	input {width:90%;}
	.form-horizontal .controls {margin-left:120px;}
	.form-horizontal .control-label {width:100px !important;}
	
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	#me .big-text {
		top:180px;
	}
}
 
/* Landscape phones and down */
@media (max-width: 480px) {}