/* VARIABLES */

$black: #262626;
$bodytext: #666666;
$lightgray: #ecf0f1;
$gray: #d3d6d8;
$darkgray: #3f3f3f;
$white: #fff;
$orange: #FF7733;
$darkorange: #E56B2D;
$blue: #00A0D4;
$darkblue: #33495F;
$green: #00BD9C;
$darkgreen: #00A385;
$red: #e74c3c;
$yellow: #f1c40f;
$facebook: #3b5998;
$twitter: #4099FF;

$formbg: #fafafa;

$regular: proxima-nova, "proxima-nova",sans-serif;
$condensed: proxima-nova-condensed, "proxima-nova-condensed",sans-serif;

$base-space: 1.44rem;
$u-col: 100%/12;





/* MIXINS */

@mixin animate {
	-webkit-transition: all 0.2s ease-out; 
	-moz-transition: all 0.2s ease-out; 
	-ms-transition: all 0.2s ease-out; 
	-o-transition: all 0.2s ease-out; 
	transition: all 0.2s ease-out; 
}

@mixin shadow($color) {box-shadow:0px 2px 2px $color;}

@mixin border-radius($radius) {-webkit-border-radius: $radius;-moz-border-radius: $radius;border-radius: $radius;}

@mixin cards-transition($margin) {opacity:0;margin-top: $margin;}

@mixin transformX($x) {
	-webkit-transform: translateX($x);
	-moz-transform: translateX($x);
	-ms-transform: translateX($x);
	-o-transform: translateX($x);
	transform: translateX($x);
}


/* MAIN DECLARATIONS */

html {font-size: 62.5%;}

html, body {height: 100%;}

body {
	font-size: 1.4rem;
	line-height: 1.4;
	font-family: $regular;
	margin: 0;
	color:$bodytext;
	background: lighten($gray,10%);
	word-wrap:break-word;
	-webkit-font-smoothing:antialiased
}

ul {
	padding-left: 0;
	margin: 0;
	list-style-type: none;
}

a img {outline:none}



img {border:0}

figure {margin: 0}

.u-no-decoration:hover {text-decoration:none;}

:focus {outline:none;}


/* TYPOGRAPHY */

h1,h2,h3,h4,h5,h6 {
	margin: 0;
	line-height: 1.4;
	color: $darkgray;

	small{font-weight: 400;color:darken($gray,30%)}
}

h1,.h1 {font-size:4.18rem;}
h2,.h2 {font-size:3.7rem;font-weight: 600}
h3,.h3 {font-size:2.58rem;font-weight: 600}
h4,.h4 {font-size:2.29rem;}
h5,.h5 {font-size:1.6rem;}
h6,.h6 {font-size:1.4rem;}



.section-title {
	margin-bottom:$base-space * 2;
}

.subsection-title {
	margin:$base-space * 2 0 $base-space;
	border-bottom: 1px solid $gray;
	font-family: $condensed;
}

.section-index {
	text-transform: uppercase;
	letter-spacing: 4px;
}


a {
	color:$blue;
	text-decoration: none;
	outline:none;

	&:hover {text-decoration: underline}

}

strong { color: $darkgray; }


p{margin: $base-space * .25 0}


/* HELPER CLASSES */


.u-clearfix:before,
.u-clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.u-clearfix:after {
    clear: both;
}

.u-center-block {
	margin-left:auto;
	margin-right: auto;
	display: block;
}


.u-center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  -o-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

.u-left {float:left}

.u-right {float:right}

.u-text-left {text-align: left; }
.u-text-center {text-align:center;}
.u-text-right {text-align:right}

.u-hidden {display:none;}

.u-border-box {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.u-list-none {list-style: none;}

::selection {
	background: darken($orange,5%);
	color: $white;
	text-shadow: none;
}

.u-inline-block {
	display:inline-block;
	vertical-align: top;
}

.u-inline-block-middle {
	display:inline-block;
	vertical-align: middle;
}

.u-circle {@include border-radius(50%);}

.u-icon-size{font-size: 80%} /* FIX FOR ICON FONTS CORRECT DISPLAY */



/* AVATAR */

.o-avatar-image {
	background:$lightgray;
	color:lighten($gray,10%);
	@extend .u-text-center;
	@extend .u-inline-block;
	overflow:hidden;
	@extend .u-circle;
	border:0.5rem solid darken($lightgray,10%);
	@include animate;

	&.hover,&.focus { border-color:$blue; }
}


.o-avatar-image--xsmall {
	line-height:1.2rem;
	font-size: 1.2rem;
	border-width:0.3rem;

	&.is-placeholder {padding: 0.6rem;}
}



.o-avatar-image--small  {
	line-height:2.5rem;
	font-size: 2.5rem;

	&.is-placeholder {padding: 2.3rem;}

}

.o-avatar-holder {
	line-height:9rem;
	width: 9rem;
	font-size: 3.2rem;

	&.is-placeholder {padding: 0;}

}



/* LOADING */

svg path, svg rect {fill: inherit;}

.u-loading--small {
	display: inline-block;
	vertical-align: sub;
	height:2.5rem;

	svg path, svg rect {
		width: 2.5rem;
		height:2.5rem
	}
}


.u-loading--big {
	display:block;
	margin-bottom:$base-space * 0.5;

	svg path, svg rect {
		width: 4rem;
		height:4rem
	}

}

.u-loading__message {
	text-transform: uppercase;
	letter-spacing: 2px
}



/* GENERAL TOOLTIP  */

.o-tooltip {
	color: $lightgray;
    background: $darkgray;

    .tooltipster-content {
    	font-size: 1.2rem;
    	padding: 1.4rem 1.2rem;
    }
}


.tooltipster-icon {
		background: $blue;
		color: $white;
		font-weight: normal;
		display: inline-block;
		font-size: 1.0rem;
		padding: $base-space * 0.1 $base-space * 0.25;
		@extend .u-circle;
		vertical-align: top;
}





/* MODAL  */

.o-modal-box {
	background: $white;
	@extend .u-center-block;
	position: relative;
	width: 60rem;

	//Overiding Plugin Styles
	.mfp-close { color: $red; }
}


.o-modal-box__info {
	padding: $base-space * 2;
}

.o-modal-box--large {
	width: 80rem;
}

/* ICONS */

.u-icon {
	@extend .u-inline-block-middle;
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	vertical-align: sub;
}

.u-icon--small{
	width: 1.5rem;
	height: 1.5rem;
	padding-right: $base-space * .25;
}

.u-icon--medium{
	width: 2rem;
	height: 2rem;
	padding-right: $base-space * .5;
}

.u-icon--edit {		background-image: url('../images/edit.png');}
.u-icon--trash {		background-image: url('../images/trash.png');}
.u-icon--check {		background-image: url('../images/check.png');}
.u-icon--cancel {	background-image: url('../images/cancel.png');}
.u-icon--resend {	background-image: url('../images/resend.png');}
.u-icon--download {	background-image: url('../images/download.png');}

.u-icon--resend-w {	background-image: url('../images/white-resend.png');}

.u-search--default {background-image: url('../images/default-search.png');}
.u-search--white {	background-image: url('../images/white-search.png');}