/*
Theme Name: ArtPortPro1
Author: BrandonSavoy
Author URI: http://brandonsavoy.com
Description: The 2011 theme for WordPress is sophisticated, lightweight, and adaptable. Make it yours with a custom menu, header image, and background -- then go further with available theme options for light or dark color scheme, custom link colors, and three layout choices. Twenty Eleven comes equipped with a Showcase page template that transforms your front page into a showcase to show off your best content, widget support galore (sidebar, three footer areas, and a Showcase page widget area), and a custom "Ephemera" widget to display your Aside, Link, Quote, or Status posts. Included are styles for print and for the admin editor, support for featured images (as custom header images on posts and pages and as large images on featured "sticky" posts), and special styles for six different post formats.
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: madebyprogress
*/

@charset "UTF-8";

/* @group // FONTS */

@font-face {
    font-family: 'basiCons';
    src:    url('data/fonts/basiCons.eot?d544g3');
    src:    url('data/fonts/basiCons.eot?d544g3#iefix') format('embedded-opentype'),
        url('data/fonts/basiCons.ttf?d544g3') format('truetype'),
        url('data/fonts/basiCons.woff?d544g3') format('woff'),
        url('data/fonts/basiCons.svg?d544g3#basiCons') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="i-"], [class*=" i-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'basiCons' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.i-savoy:before {
    content: "\e900";
}
.i-home:before {
    content: "\e600";
}
.i-arrow-left:before {
    content: "\e601";
}
.i-arrow-right:before {
    content: "\e602";
}
.i-mobile:before {
    content: "\e603";
}
.i-keyboard:before {
    content: "\e604";
}
.i-tablet:before {
    content: "\e605";
}
.i-menu:before {
    content: "\e606";
}
.i-plus:before {
    content: "\e607";
}
.i-minus:before {
    content: "\e608";
}
.i-camera:before {
    content: "\e609";
}
.i-info-1:before {
    content: "\e60a";
}
.i-info-2:before {
    content: "\e60b";
}
.i-close:before {
    content: "\e60c";
}
.i-screen:before {
    content: "\e60d";
}
.i-spinner:before {
    content: "\e60e";
}
.i-grid:before {
    content: "\e60f";
}



/* @end */

/* @group // RESET */

*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td
{
	margin: 0;
	padding: 0;
}

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

fieldset, img
{
	border: 0;
}

address, caption, cite, code, dfn, em, strong, th, var
{
	font-style: normal;
	font-weight: normal;
}

ol, ul, li
{
	list-style: none;
}

caption, th
{
	text-align: left;
}

h1, h2, h3, h4, h5, h6
{
	font-size: 100%;
	font-weight: normal;
}

q:before, q:after
{
	content: '';
}

strong
{
	font-weight: bold;
}

em
{
	font-style: italic;
}

a img
{
	border: none;
}

/* @end */

/* @group // SITE */

*
{
	margin: 0px;
	padding: 0px;
}

img
{
	border-style: none;
}

html
{
	overflow-x: auto;
	overflow-y: scroll;
}

html, body
{
	width: 100%;
	background: #FFF;
}

body
{
	-webkit-text-size-adjust: none;
	font-family: 'HelveticaNeue', sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000;
	width: 100%;
	min-width: 460px;
	height: 100%;
}

/* @group // GOOGLE FONTS */

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

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

body.Exo
{
	font-family: 'Exo 2', sans-serif;
}

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

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

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

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

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

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


/* @end */

::selection
{
	background: #000;
	color: #FFF;
}

::-moz-selection
{
	background: #000;
	color: #FFF;
}

/* @end */

/* @group // UTILITY */

.floatLeft
{
	float: left;
}

.floatRight
{
	float: right;
}

.clear
{
	clear: both;
}

.noTop
{
	margin-top: 0px !important;
	padding-top: 0px !important;
}

.noBot
{
	margin-bottom: 0px !important;
	padding-bottom: 0px !important;
}

#log
{
	display: none;
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 420px;
	height: 260px;
	background: #000;
	z-index: 100;
	color: #FFF;
	line-height: 16px;
	opacity: .8;
}

.hide
{
	display: none !important;
}

.showMobile
{
	display: none !important;
}

/* @end */

/* @group // BASICS */

a:link
{
	color: #888;
}

a:visited
{
	color: #888;
}

a:hover
{
	color: #000;
}

a:active
{
	color: #000;
}

h1
{
	font-size: 32px;
}

h2
{
	font-size: 24px;
}

h3
{
	font-size: 20px;
}

h4
{
	font-size: 16px;
}

h5
{
	font-size: 14px;
}

h6
{
	font-size: 12px;
}

hr
{
	border: none;
	height: 8px;
	clear: both;
	width: 100%;
	float: left;
}

hr.h8
{
	border: none;
	height: 8px;
	clear: both;
}

hr.h16
{
	height: 16px;
}

hr.h24
{
	height: 24px;
}

hr.h32
{
	height: 32px;
}

hr.h64
{
	height: 64px;
}

/* @end */

/* @group // FORMS */

form
{
	float: left;
	width: 100%;
}

form #alert
{
	display: none;
	margin-bottom: 64px;
}

form #alert h6
{
	color: #888;
}

input,
select,
textarea
{
	float: left;
	clear: both;
	border: none;
	padding: 16px 0px;
	width: 100%;
	font-size: 14px;
	text-indent: 16px;
	cursor: pointer;
	position: relative;
	margin-bottom: 32px;
	background: #f5f5f5;
	-webkit-appearance: none;
	resize: none;
	font-family: 'HelveticaNeue', sans-serif;
}

input[type="text"],
input[type="password"]
{
	text-indent: 16px;
	-webkit-transition: all 420ms cubic-bezier(0.000, 0.000, 0.080, 0.930); 
	-moz-transition: all 420ms cubic-bezier(0.000, 0.000, 0.080, 0.930); 
	-o-transition: all 420ms cubic-bezier(0.000, 0.000, 0.080, 0.930); 
	transition: all 420ms cubic-bezier(0.000, 0.000, 0.080, 0.930);
	-webkit-transition-timing-function: cubic-bezier(0.000, 0.000, 0.080, 0.930); 
	-moz-transition-timing-function: cubic-bezier(0.000, 0.000, 0.080, 0.930); 
	-o-transition-timing-function: cubic-bezier(0.000, 0.000, 0.080, 0.930); 
	transition-timing-function: cubic-bezier(0.000, 0.000, 0.080, 0.930);
}

input[type="text"].active,
input[type="password"].active,
textarea.active
{
	background: #444;
	color: #fff;
}

input[type="submit"]
{
	margin: 0px;
	text-indent: 0px;
	letter-spacing: 0px;
	padding: 16px 24px;
	width: auto;
}

input[type="submit"]:hover
{
	background: #444;
	color: #eee;
}

form label
{
	float: left;
	clear: both;
	font-size: 12px;
	margin-left: 16px;
	color: #888;
}

form label.error
{
	color: #f43b3b;
}

/* @end */

/* @group // LOADER */

#loader
{
	position: absolute;
	right: 0px;
	font-size: 16px;
	padding: 16px;
	background: #f5f5f5;
	color: #bbb;
	cursor: pointer;
	display: none;
}

/* @end */

/* @group // HEADER */

#header
{
	position: fixed;
	width: 100%;
	z-index: 100;
	min-width: 420px;
	pointer-events: none;
}

#header #menu_cta,
#header #controls
{
	pointer-events: all;
}

#header .left
{
	float: left;
	position: fixed;
	pointer-events: all;
	height: 100%;
	background: #f5f5f5;
	padding: 5%;
	width: 20%;	
}

#text_title
{
	display: none;
}

#site_title
{
	opacity: .8;
	cursor: pointer;
}

#site_title:hover
{
	opacity: 1;
}

#site_title .i-savoy
{
	line-height: 104px;
	height: 104px;
	font-size: 180px;
	margin-left: -32px;
	margin-bottom: 64px;
}

#header img
{
	width: 160px;
	margin-bottom: 64px;
}

#header h1
{
	font-size: 16px;
	cursor: pointer;
	color: #333;
}

#header h1:hover
{
	color: #000;
}

#header .menu
{
	line-height: 64px;
}

#header .menu a
{
	text-decoration: none;
	font-size: 16px;
}

#header .menu a.active
{
	color: #000;
}

/* @end */

/* @group // CONTROLS */

#controls
{
	display: none;
	float: right;
}

#menu_cta
{
	float: left;
	display: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.cta
{
	background: #f5f5f5;
	color: #bbb;
	cursor: pointer;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.cta:hover
{
	background: #bbb !important;
	color: #FFF !important;
}

.cta.i-menu
{
	font-size: 16px;
	padding: 16px;
	float: left;
}

.cta.i-close,
.cta.i-grid
{
	font-size: 16px;
	padding: 16px;
	float: right;
}

.cta.i-arrow-left,
.cta.i-arrow-right
{
	font-size: 24px;
	padding: 12px;
	float: right;
}

.cta.active
{
	background: #ddd !important;
}

/* @end */

/* @group // MAIN */

#thumbs,
#selected,
#categories,
#sub_page
{
	float: left;
	width: 60%;
	padding: 5% 5%;
	margin-left: 30%;
}

/* @end */

/* @group // SUB PAGE */

#sub_page 
{
	display: none;
	line-height: 32px;
	color: #444;
}

#sub_page h4
{
	font-family: 'HelveticaNeue-Light', sans-serif;
}

#sub_page h6
{
	margin-bottom: 32px;
	font-family: 'HelveticaNeue-Light', sans-serif;
	color: #888;
}


/* @end */

/* @group // THUMB */

.selected #thumbs
{
	margin-top: 0px !important;	
}

.thumb.active h1
{
	color: #000;
}

.thumb.active img
{
	-webkit-filter: brightness(.6);
    filter: brightness(.6);
    opacity: .4;
}

.thumb
{
	float: left;
 	width: 23.3%;
 	margin-right: 10%;
 	margin-bottom: 10%;
 	text-decoration: none;
}

.thumb img
{
	width: 100%;
	height: auto;
}

.thumb h1
{
	font-size: 16px;
	margin-top: 8px;
}

/* @end */

/* @group // SELECTED */

#selected
{
	display: none;
}

#selected.loading
{
	opacity: .5;
}

#selected img
{
	width: 70%;
	height: auto;
	float: left;
	clear: both;
}

#selected h1
{
	float: left;
	clear: both;
	font-weight: 500;
	font-size: 14px;
	margin-top: 16px;
	line-height: 30px;
	margin-right: 6px;
}

#selected h2
{
	float: left;
	color: #999;
	margin-top: 16px;
	font-size: 12px;
	line-height: 32px;
}

#selected h3
{
	float: left;
	clear: both;
	color: #999;
	margin-top: 16px;
	font-size: 12px;
	line-height: 32px;
	width: 60%;
}

#selected li
{
	margin-bottom: 64px;
	float: left;
}

#selected li:last-of-type
{
	margin-bottom: 0px;
}

/* @end */

/* @group // SOLO */

.solo #header
{
	display: none;
}

.solo #selected
{
	margin: 0px;
	width: 90%;
}

.solo #selected img
{
	width: 100%;
}

.solo #selected ul
{
	width: 100%;
	float: left;
}

.solo #selected li
{
	margin: 0px auto;
	float: none;
	width: 50%;
	display: none !important;
}

.solo #selected li.solo
{
	display: block !important;
}

.solo #thumbs
{
	display: none;
}

/* @end */

@media only screen and (max-width: 949px)
{
	.thumb
	{
		float: left;
	 	width: 45%;
		margin: 0;
		margin-right: 10%;
		margin-bottom: 10%;
	 	text-decoration: none;
	}
	
	.thumb:nth-child(2n)
	{
		margin-right: 0px;
	}
}

@media only screen and (max-width: 769px)
{
	#loader
	{
		right: 32px;
	}
	
	#menu_cta
	{
		display: block;
	}
	
	#text_title
	{
		display: block;
		float: left;
		margin-left: 32px;
		margin-top: 16px;
	}
	
	#header
	{
		background: #fff;
		padding: 5%;
		width: 90%;
	}
	
	#header img
	{
		width: 320px;
		margin-left: -64px;
		margin-bottom: 64px;
	}
	
	#site_title .i-savoy
	{
		font-size: 320px;
		margin-left: -64px;
		line-height: 160px;
	}
	
	#header .menu a
	{
		padding: 48px 0;
		width: 100%;
		float: left;
		font-size: 24px;
		text-transform: uppercase;
	}
	
	#header .left
	{
		padding: 0;
		width: 90%;
		padding-top: 5%;
		background: #fff;
		display: none;
		text-align: center;
	}
	
	.menuOpen #header .left
	{
		display: block;
	}
	
	#thumbs,
	#selected,
	#sub_page
	{
		float: left;
		width: 90%;
		padding: 0% 5%;
		margin-left: 0%;
		margin-top: 108px;
	}
}

@media only screen and (max-width: 640px)
{
	.mobile #text_title
	{
		display: none;
	}
	
	#selected img
	{
		width: 100%;
	}
	
	.solo #selected li
	{
		width: 100%;
	}
}

@media only screen and (max-width: 480px)
{	
	.mobile .thumb
	{
		float: left;
	 	width: 100%;
		margin: 0;
		margin-right: 0%;
		margin-bottom: 10%;
	 	text-decoration: none;
	}
}


	.mobile h1
	{
		font-size: 64px;
	}
	
	.mobile h2
	{
		font-size: 49px;
	}
	
	.mobile h3
	{
		font-size: 40px;
	}
	
	.mobile h4
	{
		font-size: 32px;
	}
	
	.mobile h5
	{
		font-size: 28px;
	}
	
	.mobile h6
	{
		font-size: 24px;
	}
	
	.mobile input,
	.mobile select,
	.mobile textarea
	{
		padding: 24px 0px;
		font-size: 24px;
		text-indent: 24px;
		margin-bottom: 32px;
	}

	.mobile #loader
	{
		font-size: 32px;
		padding: 32px;
	}

	.mobile .cta.i-menu
	{
		font-size: 32px;
		padding: 32px;
		float: left;
	}
	
	.mobile .cta.i-close,
	.mobile .cta.i-grid
	{
		font-size: 32px;
		padding: 32px;
		float: right;
	}
	
	.mobile .cta.i-arrow-left,
	.mobile .cta.i-arrow-right
	{
		font-size: 48px;
		padding: 24px;
		float: right;
	}

	.mobile input[type="submit"]
	{
		font-size: 32px;
		padding: 32px 48px;
	}

	.mobile form label
	{
		font-size: 24px;
		margin-bottom: 16px;
	}
	
	.mobile #sub_page h1
	{
		line-height: 64px;
		margin-top: 64px;
	}
	
	.mobile #sub_page h6
	{
		margin-bottom: 64px;
	}

	.mobile #sub_page h4,
	.mobile #sub_page h6
	{
		line-height: 48px;
	}
	
	.mobile .thumb h1
	{
		font-size: 32px;
		margin-top: 16px;
	}
	
	.mobile #selected h1
	{
		font-size: 40px;
		margin-top: 28px;
		line-height: 56px;
		margin-right: 12px;
	}
	
	.mobile #selected h2
	{
		margin-top: 0px;
		float: left;
		clear: both;
		font-size: 28px;
		line-height: 32px;
	}
	
	.mobile #selected li:last-of-type
	{
		margin-bottom: 128px;
	}