/* ================================================
   rectiform.com - adam@rectiform.com - april, 2014
   ================================================ */

*, *:before, *:after { /* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
	font-family: 'Karla', sans-serif;
	font-size: 62.5%;
}

body {
    font-size: 1.4rem; /* all font size in rem! */
    line-height: 1.4; /* no base */
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

ul {
	margin: 0;
	padding: 0;
}

.onlymob { display: block; }
.onlydesk { display: none; }

.wrapper {
    width: 90%;
    margin: 0 5%;
}




/* ==============
    ALL: Main type styles
   ============== */

body {
	background: #E6EBEB;
}

a {
	text-decoration: none;
	color: inherit;
}
a:hover {
	font-weight: bold;
}

.caps {
	text-transform: uppercase;
	letter-spacing: 0.2rem;
}

a:after {
	content: "-->";
	font-size: 1rem;
}


   



   
/* ==============
    ALL: crates
   ============== */
   
/* one, two, or three boxes wide */

.crate-1 {
	width: 32rem;
	display: block; margin-left: auto; margin-right: auto; position: relative;
}

.crate-2 {
	width: 64rem;
	display: block; margin-left: auto; margin-right: auto; position: relative;	
}

.crate-3 {
	width: 96rem;
	display: block; margin-left: auto; margin-right: auto; position: relative;
}



/* ==============
    ALL: crates > box containers
   ============== */

/* plain, colored, shadowed */   
   
.crate-1 .box-container, .crate-2 .box-container, .crate-3 .box-container {
	float: left;
	margin-right:2rem;
}

.box-container {
	display: block;
	position: relative;
	width: 30rem;
	height: 30rem;
	background: rgba(230,230,230,0.9);
	margin-bottom: 5rem;
	padding: 1rem;
}

.box-container.happy {
	background: rgba(250,250,250,0.9);
}

.box-container.worried {
	background: rgba(250,120,120,0.9);
}

.box-container.neutral {
	background: rgba(0,250,250,0.9);
}


.box-container.shadow-i {
	-webkit-box-shadow: 0px 4px 4px 0px rgba(50, 50, 50, 0.1);
	-moz-box-shadow:    0px 4px 4px 0px rgba(50, 50, 50, 0.1);
	box-shadow:         0px 4px 4px 0px rgba(50, 50, 50, 0.1);
}

.box-container.shadow-ii {
	-webkit-box-shadow: 0px 4px 8px 0px rgba(50, 50, 50, 0.2);
	-moz-box-shadow:    0px 4px 8px 0px rgba(50, 50, 50, 0.2);
	box-shadow:         0px 4px 8px 0px rgba(50, 50, 50, 0.2);
}

.box-container.shadow-iii {
	-webkit-box-shadow: 0px 4px 12px 0px rgba(50, 50, 50, 0.1);
	-moz-box-shadow:    0px 4px 12px 0px rgba(50, 50, 50, 0.1);
	box-shadow:         0px 4px 12px 0px rgba(50, 50, 50, 0.1);
}
   
   
   
   
/* =====================================
    ALL: crates > box containers > boxes
   ===================================== */

/* one interior or four interior spots */   
   
.box {
	width: 100%;
	height: 100%;
	position: relative;
}

.petit-four .box {
	width: 50%;
	height: 50%;
	position: relative;
	float: left;
}


/* ==================================================
    ALL: crates > box containers > boxes > background
   ================================================== */

/* inset shadow, img, or word */   

.box .background {
	position: absolute;
	top: 0; bottom: 0;
	left: 0; right: 0;
}

.box .background.inset {
	-webkit-box-shadow: inset 0px 6px 5px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 0px 6px 5px 0px rgba(0,0,0,0.5);
	box-shadow: inset 0px 6px 5px 0px rgba(0,0,0,0.5);
}

.box .background img {
	width: 100%;
	height: 100%;
	opacity: 0.5;
}

.active .box .background img {
	opacity: 0.9;
}

.box .background .word {
	color: rgba(255,255,255,0.7);
	height: 5rem;
	font-size: 5rem;
	line-height: 5rem;
	font-weight: bold;

	text-align: center;
	width: 100%;
	margin: auto;
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
}

/* ==================================================
    ALL: crates > box containers > boxes > content
   ================================================== */

/* ----- quote ----- */   
 

.content .quote {
	color: rgba(0,0,0,0.9);

	height: 14rem;
	font-size: 2rem;
	line-height: 4rem;
	font-weight: bold;

	text-align: left;
	width: auto;
	margin: auto;
	position: absolute;
	top: 0; bottom: 0; left: 4rem; right: 4rem;
}

/* ----- headline ----- */   


.content .headline {
	color: rgba(0,0,0,0.9);

	height: 14rem;
	font-size: 4rem;
	line-height: 4rem;
	font-weight: bold;

	text-align: left;
	width: auto;
	margin: auto;
	position: absolute;
	top: 0; bottom: 0; left: 2rem; right: 2rem;

}

.petit-four .content .headline {
	font-size: 2rem;
	height: 8rem;
	line-height: 4rem;
}

.active .content .headline {
	color: white;
	background: rgba(0,0,0,0.6);
}

.content .headline.top {
	top: 0; bottom: auto;
}

.content .headline.bottom {
	top: auto; bottom: 0;
}

/* ----- text ----- */   

.content .text {
	color: rgba(0,0,0,0.9);
	font-size: 1.4rem;
	line-height: 2.8rem;
	font-weight: normal;

	height: 9rem;
	text-align: left;
	width: auto;
	margin: auto;
	position: absolute;
	top: 0; bottom: 0; left: 2rem; right: 2rem;
}

.content .text span.strike {
	background: -moz-linear-gradient(top, rgba(0,0,255,0) 0%, rgba(0,0,255,0) 10%, rgba(0,0,255,0.5) 10%, rgba(0,0,255,0.5) 90%, rgba(0,0,255,0) 90%, rgba(0,0,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,255,0)), color-stop(10%,rgba(0,0,255,0)), color-stop(10%,rgba(0,0,255,0.5)), color-stop(90%,rgba(0,0,255,0.5)), color-stop(90%,rgba(0,0,255,0)), color-stop(100%,rgba(0,0,255,0)));
	background: -webkit-linear-gradient(top, rgba(0,0,255,0) 0%,rgba(0,0,255,0) 10%,rgba(0,0,255,0.5) 10%,rgba(0,0,255,0.5) 90%,rgba(0,0,255,0) 90%,rgba(0,0,255,0) 100%);
	background: linear-gradient(to bottom, rgba(0,0,255,0) 0%,rgba(0,0,255,0) 10%,rgba(0,0,255,0.5) 10%,rgba(0,0,255,0.5) 90%,rgba(0,0,255,0) 90%,rgba(0,0,255,0) 100%);

	display:inline;
	height: 2.0rem;

}


.content .text.top {
	top: 0; bottom: auto;
}

.content .text.bottom {
	top: auto; bottom: 0;
}


   
   


/* ==============
    MOBILE: header decs
   ============== */

   
/* ==============
    MOBILE: main content decs
   ============== */

   
/* ==============
    MOBILE: footer decs
   ============== */

   
   

/* ==========================================================================
   Media Queries
   ========================================================================== */

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

/* ====================
    INTERMEDIATE [B]
   ==================== */

   body {
	
   }
   
   .onlymob { display: none; }
   .onlydesk { display: block; }
   
   
/* ====================
    INTERMEDIATE [B] header
   ==================== */

   
   
/* ====================
    INTERMEDIATE [B] main content
   ==================== */
	
/* ====================
    INTERMEDIATE [B] footer
   ==================== */

   
   
}










@media only screen and (min-width: 1200px) {

/* ===============
    MAXIMUS [C+++++]
   =============== */
	body {
	
	}

	
	#wrapper {
		width: 1110px; /* 1200px - (2)(45px) for margins */
		display: block;
		position: relative;
		margin-left: auto;
		margin-right: auto;
		height: 100px;
		
	}
	
}







/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}