/* General
----------------------------------------------- */



html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

a img {border: 0;}

/* :not(:hover) {opacity:0.7 !important;}*/

::-webkit-selection {
	background: #68d5e1;
	color: #ffffff;
}

::-moz-selection {
	background: #68d5e1; /* Firefox */
	color: #ffffff;
}

::selection {
	background: #68d5e1; /* Safari */
	color: #ffffff;
}

.ie7 img {
  -ms-interpolation-mode: bicubic;
}

.ie6 legend, .ie7 legend {
  margin-left: -7px;
}


/*	Typography presets
	------------------	*/

.gigantic {
	font-size: 110px;
	line-height: 120px;
	letter-spacing: -2px;
}

.huge, h1 {
	font-size: 68px;
	line-height: 72px;
	letter-spacing: -2px;
}

.large, h2 {
	font-size: 42px;
	line-height: 48px;
}

.bigger, h3 {
	font-size: 26px;
	line-height: 36px;
}

.big, h4 {
	font-size: 22px;
	line-height: 30px;
}

.small, small {
	font-size: 13px;
	line-height: 18px;
}

body {
	font: 16px/24px Georgia, serif;
}

p
{
	margin-bottom: 1em;
}

/* LINKS ------------------------------------------------------------------ */

a, a:visited {
outline : none;
text-decoration : none; }
 
a:hover { 
text-decoration : none; }
 
a:active, a:focus { 
position : relative; 
top : 1px; }

a.action {
padding : .5em 15px;
text-shadow : 0 1px 1px rgb(0,0,0); }

a.action:hover {
text-decoration : none; }

a.action:active,
a.action:focus {
text-decoration : none; }

a img {
display: block;
}

img {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-bottom: 20px;
}

ul, ol {
  margin-left: 1.8em;
  margin-bottom: 1.5em;
}


@media print {
  * {
    background: transparent !important;
    color: #444 !important;
    text-shadow: none !important;
  }

  a, a:visited {
    color: #444 !important;
    text-decoration: underline;
  }

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

  @page {
    margin: 0.5cm;
	}

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

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

/*      Default Layout: 992px (62em). 
        Gutters: 24px (1.5em).
        Outer margins: 48px (3em).
        Leftover space for scrollbars @1024px: 32px.
------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896   */

body {
	/* color: #725d55; */
	color: #ffffff;
	background-color: #2b2321;
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
	/*background-image: url('images/BackgroundPattern.png');
	background-repeat: repeat-x repeat-y;*/
	text-rendering: optimizeLegibility;
}

.headerbar{
	position: fixed;
	top: 0px;
	width: 100%;
	color: #ffffff;
	background-image: url('images/menuback.png');
	background-repeat: repeat-x repeat-y;
	border-bottom: #68d5e1 solid 1px; 
	min-height: 70px;
	z-index: 20000;
}

.headerbarNav
{
	margin: 0 auto;
	width: 896px;
	padding: 48px 28px 50px;
	text-align: left;
	font-size: 24px;
}

.Logo
{
	width:252px;
	max-width:252px;
	float: left;
	font-size: 90px;
}

.linkHome, .linkTypeDesign, .linkCustomType, .linkAbout
{
	float: left;
	margin-right: 32px;
	cursor: pointer;
	text-decoration:none;
	color:#ffffff;
	-webkit-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -o-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
	
	-webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
	text-shadow: 1px 1px 5px rgba(255, 255, 255, 1.0000);
}

.linkHome:hover, .linkTypeDesign:hover, .linkCustomType:hover, .linkAbout:hover
{
	cursor: pointer;
	color:#68d5e1;
	text-shadow: 1px 1px 5px rgba(0, 153, 255, 1.0000);
}


.linkBlog a
{
	text-decoration:none;
	color:#ffffff;
	-webkit-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -o-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
	
	-webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
	text-shadow: 1px 1px 5px rgba(255, 255, 255, 1.0000);
}

.linkBlog a:hover
{
	color:#68d5e1;
	text-shadow: 1px 1px 5px rgba(0, 153, 255, 1.0000);
}

.page, article, footer, headerbarNav {
    padding-left: 48px;
    padding-right: 48px;
    margin: 0 auto;
    width: 896px;
    position: relative;
}

.page
{
	margin: 0 auto;
	width: 896px;
	padding: 72px 48px 84px;
	text-align: left;
}


/* main sections*/

.startSection
{
	padding-top: 100px;
	float: left;
}

.typeDesignSection
{
	padding-top: 110px;
	float: left;
	padding: 0px;
}

.cutsomTypeSection
{
	padding-top: 100px;
	float: left;
}

.aboutSection
{
	padding-top:50px;
	float: left;
	color: #ffffff;
}

.aboutSectionBg
{
	background-image: url(images/monterrey-sky.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	border-top: #68d5e1 solid 10px;
	min-height: 800px;
	float: left;
	width: 100%;
	background-color: #000000;
}

.brownChocolate
{
	color: #725d55;
	color: #66665c;
}

.yellowMostaza
{
	color: #edcb77;
}

.azulBrillante
{
	color:#68d5e1;
}

.white
{
	color:#ffffff;
}

/* Clark Specimen */

.ClarkSpecimen
{
	text-shadow:0 0 6px rgba(0, 0, 0, .2);
	font-size: 16px;
	line-height: 1.2em;
}

.ClarkSpecimen .introducing
{
	font-size: 1em;
	line-height: 1.2em;
}

.ClarkSpecimen .ClarkHairline
{
	font-size: 10em;
	line-height: 1em;
}

.ClarkSpecimen .ClarkHairlineDesc
{
	font-size: 2em;
	line-height: 1.2em;
}

.ClarkSpecimen .thequickbrownfox
{
	font-size: 4.4em;
	line-height: 1.2em;
}

.ClarkSpecimen .over
{
	font-size: 27em;
	line-height: .8em;
}

.ClarkSpecimen .thelazydog
{
	font-size: 9em;
	line-height: 1.2em;
}

.ClarkSpecimen .zwei
{
	font-size: 2.5em;
	line-height: 1.2em;
}

.ClarkSpecimen .ut
{
	font-size: 5.2em;
	line-height: 1.2em;
}

.ClarkSpecimen .disenio
{
	font-size: 18em;
	line-height: 1em;
}

.ClarkSpecimen .detipografias
{
	font-size: 8em;
	line-height: 1em;
}

.ClarkSpecimen .enMonterrey
{
	font-size: 5.2em;
	line-height: 1.2em;
}

.ClarkSpecimen .repeaterbeater
{
	font-size: 7em;
	line-height: 1.2em;
}

.ClarkSpecimen .type
{
	font-size: 27em;
	line-height: 0.8em;
}

.ClarkSpecimen .design
{
	font-size: 18em;
	line-height: 1.2em;
}

.ClarkSpecimen .blackcoffeeandcigarettes
{
	font-size: 4.3em;
	line-height: 1.2em;
}

.ClarkSpecimen .playa
{
	font-size: 20em;
	line-height: 1em;
}

.sectionSpacer{
	margin-top: 2em;
	margin-bottom: 5em;
}

.sectionHeader
{
	width: 896px;
	float: left;
	clear: both;
}

.sectionTitle
{
	width: 436px;
	float: left;
	color: #68d5e1;
}

.sectionDescription
{
	width: 344px;
	float: left;
}

.sectionDescription a
{
	text-decoration: none;
	color:#68d5e1;
}

.textSampler
{
	font-size: 3em;
}

/* TYPE DESIGN*/

/* font families */

.fontFamilies{
	float: left;
    min-height: 580px;
}

/* Blocks */
article{
	float: left;
    width:200px;
    height:200px;
    
    -webkit-transform:scale(0.9);
    -moz-transform:scale(0.9);
    -o-transform:scale(0.9);
    transform:scale(0.9);
    
    -moz-border-radius:12px;
    border-radius:12px;
    
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}
    article.blur{
        -webkit-box-shadow:
            0 0 10px rgba(242,194,0,1), 
            0 0 8px rgba(242,194,0,1), 
            0 0 6px rgba(242,194,0,1), 
            0 0 4px rgba(242,194,0,1),
            0 0 2px rgba(242,194,0,1);
        -moz-box-shadow:
            0 0 10px rgba(242,194,0,1), 
            0 0 8px rgba(242,194,0,1), 
            0 0 6px rgba(242,194,0,1), 
            0 0 4px rgba(242,194,0,1),
            0 0 2px rgba(242,194,0,1);
        -o-box-shadow:
            0 0 10px rgba(242,194,0,1), 
            0 0 8px rgba(242,194,0,1), 
            0 0 6px rgba(242,194,0,1), 
            0 0 4px rgba(242,194,0,1),
            0 0 2px rgba(242,194,0,1);
        box-shadow:
            0 0 10px rgba(242,194,0,1), 
            0 0 8px rgba(242,194,0,1), 
            0 0 6px rgba(242,194,0,1), 
            0 0 4px rgba(242,194,0,1),
            0 0 2px rgba(242,194,0,1);
        
        -webkit-transform:scale(0.65);
        -moz-transform:scale(0.65);
        -o-transform:scale(0.65);
        transform:scale(0.65);
        
        opacity:0.8;
    }
    article:hover{
        cursor:pointer;
        z-index:10;     
        
        -webkit-transform:scale(1.15);
        -moz-transform:scale(1.15);
        -o-transform:scale(1.15);
        transform:scale(1.15);
        
        -webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        -moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        -o-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    }

.yellow
{
	background:rgba(242,194,0,1);
}

.blue
{
	background: rgba(94, 185, 223, 1);
}

/* Fonts Families */
.familyName{
    color:#FFF;
    position:absolute;
    width: 80%;
    padding-top: 0.5em;
    font-size: 2em;
    line-height: 1.2em;
}

/* descriptions */
.familyDescription{
    background:#FFF;
    text-align: center;
    height:30px;
    width: 90%;
    font-family:"Josefin Sans", sans-serif;
    
    position:absolute;
    bottom:0;
    left: 0;
    
    margin:0;
    padding:15px;
    
    -moz-border-radius:0 0 12px 12px;
    border-radius:0 0 12px 12px;
}
    article.blur .familyDescription{
        -webkit-box-shadow:
            0 0 10px rgba(255,255,255,1), 
            0 0 8px rgba(255,255,255,1), 
            0 0 6px rgba(255,255,255,1), 
            0 0 4px rgba(255,255,255,1), 
            0 0 2px rgba(255,255,255,1);
        -moz-box-shadow:
            0 0 10px rgba(255,255,255,1), 
            0 0 8px rgba(255,255,255,1), 
            0 0 6px rgba(255,255,255,1), 
            0 0 4px rgba(255,255,255,1), 
            0 0 2px rgba(255,255,255,1);
        -o-box-shadow:
            0 0 10px rgba(255,255,255,1), 
            0 0 8px rgba(255,255,255,1), 
            0 0 6px rgba(255,255,255,1), 
            0 0 4px rgba(255,255,255,1), 
            0 0 2px rgba(255,255,255,1);
        box-shadow:
            0 0 10px rgba(255,255,255,1), 
            0 0 8px rgba(255,255,255,1), 
            0 0 6px rgba(255,255,255,1), 
            0 0 4px rgba(255,255,255,1), 
            0 0 2px rgba(255,255,255,1);
        
        color:transparent;
        text-shadow:0 0 3px #181818;
    }
	
	 article.blur span{
        color:transparent;
        text-shadow:0 0 5px #FFF;
    }
    

/* CUSTOM TYPE */

.leftCol
{
	width: 344px;
	padding: 16px;
	float: left;
}

.rightCol
{
	width: 436px;
	padding: 16px;
	float: left;
}

.titleSubsection
{
	text-shadow:0 0 6px rgba(0, 0, 0, .3);
	font-size: 2em;
	line-height: 1.2em;
}

.innerRow
{
	position: relative;
	float: left;
	margin-bottom: 1em;
	clear: both;
}

.DivWe
{
	position: absolute;
	left:0px;
	top:0px;
	font-size: 20em;
	line-height: 1em
}

.DivAre
{
	position: absolute;
	left:0px;
	top:250px;
	font-size: 6em;
	line-height: 1.1em;
}

.middle{
    -webkit-transform:scale(0.75);
    -moz-transform:scale(0.75);
    -o-transform:scale(0.75);
    text-shadow:0 0 6px rgba(0, 0, 0, 0.5);
}

.back{
    -webkit-transform:scale(0.5);
    -moz-transform:scale(0.5);
    -o-transform:scale(0.5);
    text-shadow:0 0 14px rgba(0, 0, 0, 0.25);
}


.opacity10
{
	opacity: .1; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=1); /* IE lt 8 */
	-ms-filter: "alpha(opacity=1)"; /* IE 8 */
	-khtml-opacity: .1; /* Safari 1.x */
	-moz-opacity: .1; /* FF lt 1.5, Netscape */
	-o-opacity: .1; /* opera */
	-webkit-opacity: .1; /* Safari */
}

.opacity20
{
	opacity: .2; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=2); /* IE lt 8 */
	-ms-filter: "alpha(opacity=2)"; /* IE 8 */
	-khtml-opacity: .2; /* Safari 1.x */
	-moz-opacity: .2; /* FF lt 1.5, Netscape */
	-o-opacity: .2; /* opera */
	-webkit-opacity: .2; /* Safari */
}

.opacity30
{
	opacity: .3; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=3); /* IE lt 8 */
	-ms-filter: "alpha(opacity=3)"; /* IE 8 */
	-khtml-opacity: .3; /* Safari 1.x */
	-moz-opacity: .3; /* FF lt 1.5, Netscape */
	-o-opacity: .3; /* opera */
	-webkit-opacity: .3; /* Safari */
}

.opacity40
{
	opacity: .4; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=4); /* IE lt 8 */
	-ms-filter: "alpha(opacity=4)"; /* IE 8 */
	-khtml-opacity: .4; /* Safari 1.x */
	-moz-opacity: .4; /* FF lt 1.5, Netscape */
	-o-opacity: .4; /* opera */
	-webkit-opacity: .4; /* Safari */
}

.opacity50
{
	opacity: .5; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=5); /* IE lt 8 */
	-ms-filter: "alpha(opacity=5)"; /* IE 8 */
	-khtml-opacity: .5; /* Safari 1.x */
	-moz-opacity: .5; /* FF lt 1.5, Netscape */
	-o-opacity: .5; /* opera */
	-webkit-opacity: .5; /* Safari */
}

.opacity60
{
	opacity: .6; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=6); /* IE lt 8 */
	-ms-filter: "alpha(opacity=6)"; /* IE 8 */
	-khtml-opacity: .6; /* Safari 1.x */
	-moz-opacity: .6; /* FF lt 1.5, Netscape */
	-o-opacity: .6; /* opera */
	-webkit-opacity: .6; /* Safari */
}

.opacity70
{
	opacity: .7; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=7); /* IE lt 8 */
	-ms-filter: "alpha(opacity=7)"; /* IE 8 */
	-khtml-opacity: .7; /* Safari 1.x */
	-moz-opacity: .7; /* FF lt 1.5, Netscape */
	-o-opacity: .7; /* opera */
	-webkit-opacity: .7; /* Safari */
}

.opacity80
{
	opacity: .8; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=8); /* IE lt 8 */
	-ms-filter: "alpha(opacity=8)"; /* IE 8 */
	-khtml-opacity: .8; /* Safari 1.x */
	-moz-opacity: .8; /* FF lt 1.5, Netscape */
	-o-opacity: .8; /* opera */
	-webkit-opacity: .8; /* Safari */
}

.opacity90
{
	opacity: .9; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=9); /* IE lt 8 */
	-ms-filter: "alpha(opacity=9)"; /* IE 8 */
	-khtml-opacity: .9; /* Safari 1.x */
	-moz-opacity: .9; /* FF lt 1.5, Netscape */
	-o-opacity: .9; /* opera */
	-webkit-opacity: .9; /* Safari */
}



/* ABOUT */

.aboutSpacer
{
	margin-bottom: 1em;
}

.titleSubsection
{
	width:344px;
	max-width:344px;
	float: left;
	clear: both;
}
	
.followmeTitle
{
	font-size: 1.4em;
	line-height: 1.3em;
}

.socialNetworks
{
	float: left;
	margin-top: 1em;
	
}

.socialNetworks a
{
    width: 160px;
    min-height: 100px;
    height: 100px;
    float: left;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
}

.socialNetworks a:hover
{
	-webkit-transform:scale(1.15);
    -moz-transform:scale(1.15);
    -o-transform:scale(1.15);
    transform:scale(1.15);
}

.vcard
{
	padding: 10px 10px 10px 10px;
    text-decoration: none;
    border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
    -webkit-box-shadow: 0 0 10px #68d5e1;
	-moz-box-shadow: 0 0 10px #68d5e1;
	-o-box-shadow: 0 0 10px #68d5e1;
	box-shadow: 0 0 10px #000000;
	background-image: url('images/menuback.png');
	background-repeat: repeat-x repeat-y;
    /*background: #f3f3f3;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e8e8e8));
	background: -moz-linear-gradient(top,  #fff,  #e8e8e8);*/
	font-size: 1.4em;
	line-height: 1.3em;
}

.vcard a
{
	text-decoration: none;
	color: #68d5e1;
}

.org, .adr
{
	padding-left: 10px;
}

/* footer */

.footerContent
{
	float: left;
	font-size: 56px;
	line-height: 1.2em;
	margin-top: 15px;
	min-height: 50px;
}

/* show grid*/

.showGrid
{
	cursor: pointer;
	color: #68d5e1;
}


/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	body {
		
	}
	
	.page, .headerbarNav, footer {
	    width: 712px;
		padding: 48px 28px 60px;
		text-align: left;
	    position: relative;
	}
	
	.headerbarNav
	{
		font-size: 18px;
	}
	.ClarkSpecimen
	{
		font-size: 12px;
		line-height: 1.2em;
	}
	
	.leftCol
	{
		width: 344px;
		padding: 16px;
		float: left;
	}
	
	.rightCol
	{
		width: 252px;
		padding: 16px;
		float: left;
		clear: both;
	}
	
	.titleSubsection
	{
		text-shadow:0 0 6px rgba(0, 0, 0, .3);
		font-size: 2em;
		line-height: 1.2em;
	}
	
	.cutsomTypeSection .rightCol{display: none;}
	
	.aboutSectionBg .page .aboutSection .titleSubsection
	{
		width:344px;
		max-width:344px;
	}

}

/*		Mobile Layout: 320px. (iPhone portrait)
		Gutters: 24px.
		Outer margins: 34px.
		Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 463px) {
	
	body {
		
	}
	
	.page, .headerbarNav, footer {
	    max-width: 232px;
	    width: 232px;
		padding: 48px 34px 60px;
		text-align: left;
	    position: relative;
	}
	
	.headerbarNav
	{
		font-size: 13px;
		max-height: 25px;
	}
	
	.Logo
	{
		width: 160px;
		margin-bottom: 0.5em;
	}
	
	.linkHome, .linkTypeDesign, .linkCustomType, .linkAbout
	{
		max-height: 24px;
		height: 24px;
		margin-right: 10px;
	}
	
	
	h1{
		width: 252px;
		font-size: 46px;;
	}
	
	.startSection
	{
		padding-top: 150px;
		float: left;
	}
	
	/* Blocks */
	article{
		float: left;
	    width:160px;
	    height:160px;
    }
	
	.ClarkSpecimen
	{
		font-size: 4px;
		line-height: 1.2em;
	}
	.cutsomTypeSection .rightCol{display: none;}
	.Logo
	{
		width: 252px;
		max-width: 252px;
		float: left;
		padding-top: 5px;
	}
	
	.sectionSpacer
	{
		width: 252px;
		max-width: 252px;
	}
	.sectionSpacer .sectionTitle
	{
		width: 252px;
		max-width: 252px;
	}
	.sectionSpacer .sectionDescription
	{
		width: 252px;
		max-width: 252px;
	}
	
	.typeDesignSection .sectionTitle
	{
		width: 252px;
		max-width: 252px;
		float: left;
		color: #68d5e1;
		clear: both;
	}
	.typeDesignSection .sectionDescription
	{
		width: 252px;
		max-width: 252px;
	}
	.cutsomTypeSection .sectionTitle
	{
		width: 252px;
		max-width: 252px;
		float: left;
		color: #68d5e1;
		clear: both;
	}
	
	.sectionDescription {
		width: 252px;
		max-width: 252px;
		float: left;
	}
	
	.cutsomTypeSection .sectionDescription .innerRow .titleSubsection, .cutsomTypeSection .sectionDescription .innerRow p
	{
		width: 252px;
		max-width: 252px;
		float: left;
		clear: both;
	}
	
	.aboutSection, .aboutSection
	{
		width: 252px;
		max-width: 252px;
	}
	
	
	.aboutSection .sectionTitle
	{
		width: 252px;
		max-width: 252px;
		clear: both;
	}
	
	.aboutSection .rightCol
	{
		width: 212px;
		max-width: 212px;
		float: left;
	}
	.aboutSection .titleSubsection
	{
		width: 252px;
		max-width: 252px;
		float: left;
	}
	
	.aboutSection .sectionDescription
	{
		width: 252px;
		max-width: 252px;
	}
	
	.socialNetworks a
	{
		width: 252px;
		max-width: 252px;
	}
	
	.footerContent {
		float: left;
		font-size: 48px;
	}
}



/*		Wide Mobile Layout: 480px. (iPhone landscape)
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 464px) and (max-width: 767px) {
	
	body {
		
	}
	
	.page, .headerbarNav, footer {
	    width: 416px;
		padding: 48px 0px 60px;
		text-align: left;
	    position: relative;
	}

	.Logo
	{
		margin-bottom: 0.2em;
	}
	.headerbarNav
	{
		font-size: 16px;
		max-height: 20px;
		height: 20px;
	}
	.navMenu
	{
		height: 30px;
		max-height: 30px;
	}
	.linkHome, .linkTypeDesign, .linkCustomType, .linkAbout
	{
		max-width: 120px;
		width: 120px;
		max-height: 15px;
		height: 15px;
	}
	
	h1{
		width: 416px;
		max-width: 416px;
		font-size: 56px;
	}
		
	.startSection
	{
		width: 416px;
	}
	
	.typeDesignSection
	{
		width: 416px;
	}
	
	.cutsomTypeSection
	{
		width: 416px;
	}
	
	.aboutSection
	{
		width: 416px;
	}
	
	.aboutSection .titleSubsection, .aboutSection .sectionDescription, .aboutSection .rightCol, .aboutSection .innerRow{
		width: 406px;
	}
	
	.startSection
	{
		padding-top: 120px;
	}
	
	.ClarkSpecimen
	{
		font-size: 6px;
		line-height: 1.2em;
	}
	.cutsomTypeSection .rightCol{display: none;}
	
	.aboutSection .rightCol
	{
		width: 416px;
		max-width: 436px;
		padding: 16px;
		float: left;
	}
	
}

/*	Retina media query.
	Overrides styles for devices with a 
	device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */

@media 
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) {
	
	body {
	
	}
	
}








































.blueLine
{
	border-bottom: #68d5e1 solid 4px;
	margin-top:30px;
}

.blueLineFix
{
	margin-top:30px;
	border-bottom: #68d5e1 solid 4px;
	margin-bottom:25px;
}

.blueTextShadow
{
	text-shadow: 0px 0px 5px rgba(0, 153, 255, 1.0000);
}

.blackTextShadow
{
	text-shadow: 0px 0px 3px rgba(0, 0, 0, 1.0000);
}

.whiteTextShadow
{
	text-shadow: 0px 0px 3px rgba(255, 255, 255, 1.0000);
}


/* Clark specimen */

.spacer
{
	padding-top: 150px;
}



.ClarkFeatures
{
	position: relative;
}

.features
{
	padding: 1.4em;
	min-height: 150px;
	width: 80%;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
    -webkit-box-shadow: 0 0 5px #68d5e1;
	-moz-box-shadow: 0 0 5px #68d5e1;
	box-shadow: 0 0 5px #68d5e1;
	background-color: rgba(255,255,255, 0.4);
	margin-bottom: 2em;
}

.feature
{
	display: inline-block; 
    padding: 2px 10px 1px; 
    color: #333;
    background-color: #000000;
    text-decoration: none;
    border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
    -webkit-box-shadow: 0 0 2px #68d5e1;
	-moz-box-shadow: 0 0 2px #68d5e1;
	box-shadow: 0 0 10px #000000;
    position: relative;
    cursor: pointer;
    background: #f3f3f3;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e8e8e8));
	background: -moz-linear-gradient(top,  #fff,  #e8e8e8);
    -webkit-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -o-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
	
	-webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.feature:hover
{
	-webkit-box-shadow: 0 0 10px #68d5e1;
	-moz-box-shadow: 0 0 10px #68d5e1;
	box-shadow: 0 0 10px #000000;
}

.popup {
    position: absolute;
    padding: 10px; 
    color: #333;
    background-color: #000000;
    text-decoration: none;
    border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
    -webkit-box-shadow: 0 0 10px #68d5e1;
	-moz-box-shadow: 0 0 10px #68d5e1;
	box-shadow: 0 0 10px #000000;
    cursor: pointer;
    background: #f3f3f3;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e8e8e8));
	background: -moz-linear-gradient(top,  #fff,  #e8e8e8);
	width: 500px;
	min-height: 100px;
    display: none; /* keeps the popup hidden if no JS available */
}



/* depth */

.titleSubsection{
    -webkit-transition:all 400ms ease;
    -moz-transition:all 400ms ease;
    display:block;
}

.front{ 
    z-index:100; 
    top:30px;
}
.front p { display:block; }
    
.middle{ 
    
    text-shadow:0 0 6px rgba(0, 0, 0, 1);
}

.back{ 
    
    text-shadow:0 0 14px rgba(0, 0, 0, 1);
}

.middle, .back{
    -webkit-transform-origin:left;
    -moz-transform-origin:left;
    color:rgba(0, 153, 255, 0);
}

/* my music*/

.myMusic
{
	margin-top: 24px;
	margin-bottom: 24px;
}

.textCenter
{
	text-align: center;
}

.textLeft{
	text-align:left;
}

.textRight
{
	text-align:right;
}

.skills-ul
{
	list-style-type:disc;
}

.skills-ul li
{
	margin-bottom:3px;
	margin-left:20px;
}

/* font viewer*/

.fontViewer
{
	margin-top: 50px;
	margin-bottom: 50px;
	min-height: 400px;
	overflow: hidden;
}

.spacerSection
{
	margin-top: 30px;
}


/* awesome buttons
--------------------------------------------*/

/************ awesome buttons */

.awesome, .awesome:visited {
    display: inline-block; 
    padding: 5px 10px 6px; 
    color: #fff; 
    text-decoration: none;
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -o-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
}

    .awesome:hover, 		                    { background-color: #111; color: #fff; }
    .awesome:active 					        { top: 1px; }
    .small.awesome, .small.awesome:visited      { font-size: 11px; padding: ; }
    .awesome, .awesome:visited,
    .medium.awesome, .medium.awesome:visited    { font-size: 13px; line-height: 1; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); }
    .large.awesome, .large.awesome:visited      { font-size: 14px; padding: 8px 14px 9px; }
    
    .green.awesome, .green.awesome:visited      { background-color: #91bd09; }
    .green.awesome:hover                        { background-color: #749a02; }
    .blue.awesome, .blue.awesome:visited        { background-color: #68d5e1; }
    .blue.awesome:hover                         { background-color: #bb1c20; }
    .red.awesome, .red.awesome:visited          { background-color: #e33100; }
    .red.awesome:hover                          { background-color: #872300; }
    .magenta.awesome, .magenta.awesome:visited      { background-color: #a9014b; }
    .magenta.awesome:hover                          { background-color: #630030; }
    .orange.awesome, .orange.awesome:visited        { background-color: #ff5c00; }
    .orange.awesome:hover                           { background-color: #f48123; }
    .yellow.awesome, .yellow.awesome:visited        { background-color: #ffb515; }
    .yellow.awesome:hover                           { background-color: #fc9200; }

.awesome a
{
	color:#ffffff;
	text-decoration: none;
}

.awesome a:hover
{
	color:#ffffff;
	text-decoration: none;
}

.awesomeButton, .awesomeButton:visited {
    display: inline-block; 
    padding: 2px 10px 1px; 
    color: #333;
    background-color: #000000;
    text-decoration: none;
    border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
    -webkit-box-shadow: 0 0 2px #68d5e1;
	-moz-box-shadow: 0 0 2px #68d5e1;
	-o-box-shadow: 0 0 2px #68d5e1;
	box-shadow: 0 0 2px #68d5e1;
    position: relative;
    cursor: pointer;
    background: #f3f3f3;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e8e8e8));
	background: -moz-linear-gradient(top,  #fff,  #e8e8e8);
    -webkit-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -o-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
	
	-webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.awesomeButton:hover
{
	-webkit-box-shadow: 0 0 10px #68d5e1;
	-moz-box-shadow: 0 0 10px #68d5e1;
	-o-box-shadow: 0 0 10px #68d5e1;
	box-shadow: 0 0 10px #68d5e1;
 }
 
.awesomeButton:active 					        { top: 1px; }

.awesomeButton a
{
	color:#000000;
	text-decoration: none;
}

.awesomeButton a:hover
{
	color:#68d5e1;
	text-decoration: none;
}

.select2Buttons strong {
  display: block;
  clear: left;
}

.select2Buttons ul {
  list-style-type: none;
  clear: left;
  margin: 5px;
  padding: 0;
}

.select2Buttons li, .select2Buttons a {
}

.select2Buttons li { 
   float:left;
   font-size: 14px;
   margin-bottom: 9px;
   margin-right: 9px;
}

.select2Buttons li a, 
.select2Buttons .limited a, 
.select2Buttons .disabled {
  	display: inline-block; 
    padding: 2px 10px 1px; 
    color: #333;
    background-color: #000000;
    text-decoration: none;
    border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
    -webkit-box-shadow: 0 0 2px #68d5e1;
	-moz-box-shadow: 0 0 2px #68d5e1;
	-o-box-shadow: 0 0 2px #68d5e1;
	box-shadow: 0 0 2px #68d5e1;
    position: relative;
    cursor: pointer;
    background: #f3f3f3;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e8e8e8));
	background: -moz-linear-gradient(top,  #fff,  #e8e8e8);
    -webkit-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -o-transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    transition: all 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
	
	-webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    -o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); 
    transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.select2Buttons li:last-child { 
  margin-right: 0; 
}

.select2Buttons a {
  color: #3c89c8;
  text-align: center;
  text-decoration: none;
}

.select2Buttons .disabled span {
  display: block;
  font-size: 15px;
  min-width: 37px;
}

.select2Buttons a:hover, 
.select2Buttons .picked {
  	-webkit-box-shadow: 0 0 10px #68d5e1;
	-moz-box-shadow: 0 0 10px #68d5e1;
	-o-box-shadow: 0 0 10px #68d5e1;
	box-shadow: 0 0 10px #68d5e1;
}

.select2Buttons:active 					        { top: 1px; }

.select2Buttons .limited a, 
.select2Buttons .disabled {
  text-align: center;
}

.select2Buttons .disabled {
  border: 1px solid #d1d1d1;
  color: #999;
}

.select2Buttons .disabled .picked {
  background: #d1d1d1;
  border-color: #d1d1d1;
  color: #FFF;
}


/*Josefin specimen*/

.spacer50
{min-height: 50px;}

.charHover
{
	-moz-transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.charHover:hover
{
	background-color:#68d5e1;
	color:#ffffff;
}

.charHover a
{
	display:block;
	text-decoration:none;
	color:#000000;
}

.charHover a:hover
{
	text-decoration:none;
	color:#ffffff;
}

.content {
	padding-top: 60px;
	min-height:450px;
}

.contentTop a
{
	-moz-transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	text-decoration:none;
	color:#68d5e1;
	display:block;
	text-decoration: none;
}

.contentTop a:hover
{
	text-shadow: 0px 0px 5px rgba(0, 153, 255, 1.0000);
}


.textPadding
{
	padding-top:27px;
}

.white
{
	color:#ffffff;
}

.gray
{
	color:Gray;
}

.graySection
{
	background-color: #333333;
	color: #000000;
}

.blueSection
{
	background-color:#68d5e1;
	height: 400px;
}

.downloadContent
{
	min-height:300px;
	padding-top:40px;
}

.downloadContent a
{
	-moz-transition: all 0.2s ease-in;
	-webkit-transition: all 0.2s ease-in;
	text-decoration:none;
	color:#ffffff;
	display:block;
}

.downloadContent a:hover
{
	text-shadow: 0px 0px 5px rgba(255, 255, 255, 1.0000);
}

.loader
{
	position:absolute;
	top:50%;
	left:50%;
}


/*--------------------modalPopUp-------------------*/

.modalBackground 
{
	/*left: 2px; 
	width: 675px; 
	top: 0px;
	background-color:Gray;
	filter:alpha(opacity=70);
	opacity:0.7;*/
}

.modalPopup {
	background-color:Transparent;
	background-image:url('images/overlay_shadow.png');
	background-position: left top;
	background-repeat:no-repeat;
	width:842px;
	width:625px;
}

#popUpContent
{
}

.grid
{
	width:100%;
	margin-top:-300px;
}

.ascender
{
	min-height:40px;
	height:71px;
	width:100%;
	border-bottom: 1px Gray solid;
}

.capsHeight
{
	min-height:10px;
	height:15px;
	width:100%;
	border-bottom: 1px Gray solid;
}

.xHeight
{
	min-height:40px;
	height:96px;
	width:100%;
	border-bottom: 1px Red solid;
}

.baseline
{
	min-height:40px;
	height:112px;
	width:100%;
	border-bottom: 2px Gray solid;
}

.descender
{
	min-height:40px;
	height:73px;
	width:100%;
	border-bottom: 1px Gray solid;
}

.char
{
	font-size:300px;
	line-height:230px;
}


.lineGrid
{
	padding-top:90px;
	/*background-image:url('images/grid_web.png');
	background-position:top;
	background-repeat:repeat-x;*/
}

#popUpCloseButton
{
	position:absolute;
	top:32px;
	left:33px;
}
#popUpContentLeft
{
	position:absolute;
	top:53px;
	left:59px;
	width:720px;
	height:450px;
}
#popUpContentRight
{
	position:absolute;
	top:50px;
	left:530px;
	padding:20px;
	width:190px;
	height:410px;
	line-height:3em;
}

#popUpContentRight .rojo
{
	font-size:1.4em;
	color:#f23b4d;
}
#popUpContentBottom
{
	position:absolute;
	left:59px;
	padding:20px;
	top:510px;
	font-size:2em;
}

/*  2-column, 320 px layout for smartphones (iPhone portrait)
 *  ---------------------------------------
 *  1      2
 *  120px  264px   (24px gutters) */
@media only screen and (max-width: 463px) {
	
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
	/* Styles */
}

/*  3-column, 480 px layout for smartphones (iPhone landscape)
 *  ---------------------------------------
 *  1      2      3
 *  120px  264px  408px   (24px gutters) */
@media only screen and (min-width: 464px) and (max-width: 767px) {
	
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
	/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
	/* Styles */
}

/*  6-column, 936 px layout for desktops and laptops (also: iPad landscape)
 *  ------------------------------------------------------------------------
 *  1      2      3      4      5      6
 *  120px  264px  408px  552px  696px  840px   (24px gutters) */
@media only screen and (min-width: 936px) {

}

/*  8-column, 1224 px layout for desktops and laptops
 *  ------------------------------------------------------------------------
 *  1      2      3      4      5      6      7      8
 *  120px  264px  408px  552px  696px  840px  984px  1128px   (24px gutters) */
@media only screen and (min-width: 1224px) {

}

/*  12-column, 1824 px layout for gigantic screens   (24px gutters)
 *  ---------------------------------------------------------------------------------------
 *  1      2      3      4      5      6      7      8       9       10      11      12
 *  120px  264px  408px  552px  696px  840px  984px  1128px  1272px  1416px  1560px  1704px
 *
 *  @media only screen and (min-width: 1824px)
 *    #page
 *      padding: 96px 60px 0
 *      width: 1704px
 *
 *      #main-feature-nav
 *        nav.buttons
 *          display: none
 *        nav.dots
 *          display: table */
/*  Overrides for iPhone 4 and other high device-pixel-ratio devices
 *  ---------------------------------------------------------------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),;
@media only screen and (min-device-pixel-ratio: 1.5);