/*
Theme Name: Pronounce My Name Biatch
Theme URL: http://pronounce.yaronschoen.com
Author: Yaron Schoen
Author URL: http://yaronschoen.com
Date:
Tags: html5, beginning, start, clean, basic
*/

@charset "UTF-8";


/* Reset
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, 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%;	font: inherit; vertical-align: baseline;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';	content: none;}

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




/* Floats
-------------------------------------------------------------- */

.left {float:left;}
.right {float:right;}
.left_text {text-align: left}
.right_text {text-align: right}
.center_text {text-align: center}
.clear {clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
.block {display: block}
.left_button {float: left; margin-right: 100px;}




/* Page and Sections
-------------------------------------------------------------- */

body {background:#e1e6ea url(../img/bg.jpg) center top no-repeat; background-size: 100%; -moz-background-size: 100%}
#wrapper{margin: 70px 40px 40px 40px; border: 1px dashed #879aab;min-width: 1010px}
#page {text-align: center; margin: 5px; border: 6px solid #879aab;}
#content {margin-top: 120px; margin-left: auto; margin-right: auto;}




.header_section {width: 980px; margin-left: auto; margin-right: auto; text-align: center;}
.yaron_section {width: 980px; margin-left: auto; margin-right: auto}
.schoen_section {width: 980px; margin-left: auto; margin-right: auto; margin-bottom: 200px;}
.division {background-color: rgba(182,195,204, .2); padding-top: 30px; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255, .4); -moz-box-shadow: inset 0 1px 3px rgba(0,0,0, .2); -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0, .2); box-shadow: inset 0 1px 3px #888;}
.listen_yaron {background: url(../img/speech.png) center top no-repeat; width: 272px; height: 214px;margin-top: -280px; margin-left:535px; padding-top: 30px; padding-right: 80px;}
.listen_schoen {background: url(../img/speech2.png) center top no-repeat; width: 282px; height: 221px;margin-top: -340px; margin-left:510px; padding-top: 30px; padding-right: 80px;}
.explination {margin-top: 60px}
#footer {width: 424px; margin-left: auto; margin-right: auto; margin-bottom: 50px;}
.leftfooter {display:inline; float: left; position: relative;width:197px; margin-right: 15px;}
.rightfooter {display:inline; float: left; position: relative;width:197px; margin-left: 15px;}




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

body {font-family: "proxima-nova-1","proxima-nova-2"; font-size: 16px;}

/* headings */
h2 {font-size: 30px; font-weight: 700;text-shadow: 0 1px 0 #ffffff}

/* p */
p {line-height: 1.5; text-align: left; margin-bottom: 15px; color: #2f3336}
p.light {font-weight: 300;}
p.page_header {font-family: "jeanne-moderno-1","jeanne-moderno-2";font-size: 48px; text-align: center;}
p.page_header_content {font-family: "proxima-nova-condensed-1","proxima-nova-condensed-2"; font-size: 20px; text-align: center; line-height: 1.5; text-shadow: 0 1px 0 rgba(255,255,255, .8);}
p.copyright {font-size: 14px;}

/* span */
span.button_circle_text {position: relative; top:-10px; left: 65px;}
span.how_to {color: #ffffff;font-family: "tamarillo-1","tamarillo-2"; display: block; font-size: 22px;}
span.pronounce {color: #ffffff; text-transform: uppercase;font-family: "proxima-nova-extra-condensed-1","proxima-nova-extra-condensed-2"; display: block;font-size: 24px;}
span.experiment {font-family: "proxima-nova-extra-condensed-1","proxima-nova-extra-condensed-2"; font-size: 14px; text-transform: uppercase; position: absolute; top:50px; left: 40px;}
span.cred {font-family: "proxima-nova-extra-condensed-1","proxima-nova-extra-condensed-2"; font-size: 14px; text-transform: uppercase; position: absolute; top:50px; right: 40px;}
span.button_twitter {position: absolute; top:1px; left:35px;}
span.button_ys {position: absolute; top:1px; left:53px;}

/* em */
em.dropcap {float: left; font-weight: 700; font-family:  "proxima-nova-extra-condensed-1","proxima-nova-extra-condensed-2"; font-size: 90px; line-height: .8;  margin-right: 8px; color: #1c282f; display: block; font-style:normal;}




/* Letting.js
-------------------------------------------------------------- */

#yaron span {font-family: "jeanne-moderno-1","jeanne-moderno-2";font-size: 200px;display:inline-block;}
#yaron .char1 {font-family: "jeanne-moderno-ultra-1","jeanne-moderno-ultra-2"; font-style: italic; color: #059999; font-size: 600px; text-shadow: 1px 2px 0px rgba(255,255,255,.8), 6px 3px 0px #b2c0cb, 6px 4px 0px #b2c0cb, 6px 5px 0px #b2c0cb, 6px 6px 0px #b2c0cb, 6px 7px 0px #b2c0cb, 6px 8px 0px #b2c0cb, 6px 9px 0px #b2c0cb, 6px 10px 0px #b2c0cb, 6px 11px 0px #b2c0cb;}
#yaron .char2 {color: #57c864; position:relative; top:-280px; left:-30px; text-shadow: 1px 2px 0px rgba(255,255,255,.8), 6px 3px 0px #b2c0cb, 6px 4px 0px #b2c0cb, 6px 5px 0px #b2c0cb, 6px 6px 0px #b2c0cb, 6px 7px 0px #b2c0cb, 6px 8px 0px #b2c0cb; -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg);}
#yaron .char3 {font-size: 80px;	color: #99c857; position:relative; top:-240px; left:-35px; text-shadow: 1px 1px 0px rgba(255,255,255,.8), 4px 3px 0px #b2c0cb,  4px 4px 0px #b2c0cb, 4px 5px 0px #b2c0cb; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg);}
#yaron .char4 {font-size: 150px; color: #b4be3b; position:relative; top:-240px; left:-35px;	text-shadow: -1px 2px 0px rgba(255,255,255,.8), -6px 3px 0px #b2c0cb, -6px 4px 0px #b2c0cb, -6px 5px 0px #b2c0cb, -6px 6px 0px #b2c0cb; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg);}
#yaron .char5 {font-size: 160px; color: #679a9e; position:relative; top:-220px; left:-50px;	text-shadow: -1px 2px 0px rgba(255,255,255,.8), 6px 3px 0px #b2c0cb, 6px 4px 0px #b2c0cb, 6px 5px 0px #b2c0cb, 6px 6px 0px #b2c0cb;-webkit-transform: rotate(60deg);-moz-transform: rotate(60deg);}
#schoen span {font-family: "jeanne-moderno-1","jeanne-moderno-2";font-size: 150px;display:inline-block;}
#schoen .char1 {font-family: "jeanne-moderno-ultra-1","jeanne-moderno-ultra-2"; color: #059999; font-size: 600px; text-shadow: 1px 2px 0px rgba(255,255,255,.8), 6px 3px 0px #b2c0cb, 6px 4px 0px #b2c0cb, 6px 5px 0px #b2c0cb, 6px 6px 0px #b2c0cb, 6px 7px 0px #b2c0cb, 6px 8px 0px #b2c0cb, 6px 9px 0px #b2c0cb, 6px 10px 0px #b2c0cb, 6px 11px 0px #b2c0cb;}
#schoen .char2 {color: #b4be3b; position:relative; top: -300px;	left:-60px;	text-shadow: 1px 2px 0px rgba(255,255,255,.8), 6px 3px 0px #b2c0cb, 6px 4px 0px #b2c0cb, 6px 5px 0px #b2c0cb, 6px 6px 0px #b2c0cb, 6px 7px 0px #b2c0cb, 6px 8px 0px #b2c0cb; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg);}
#schoen .char3 {color: #99c857; font-size: 80px;	position:relative; top: -336px; left:-60px;	text-shadow: 1px 1px 0px rgba(255,255,255,.6), 4px 3px 0px #b2c0cb, 4px 4px 0px #b2c0cb, 4px 5px 0px #b2c0cb; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg);}
#schoen .char4 {color: #57c864; position:relative; font-size: 160px; top: -356px; left:-65px; text-shadow: 1px 1px 0px rgba(255,255,255,.6), 4px 3px 0px #b2c0cb, 4px 4px 0px #b2c0cb, 4px 5px 0px #b2c0cb; -webkit-transform: rotate(-40deg); -moz-transform: rotate(-40deg);}
#schoen .char5 {color: #44975a; position:relative; font-size: 100px; top: -316px;	left:-80px;	text-shadow: 1px 1px 0px rgba(255,255,255,.6), 4px 3px 0px #b2c0cb, 4px 4px 0px #b2c0cb, 4px 5px 0px #b2c0cb; -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg);}
#schoen .char6 {color: #679a9e; position:relative; top: -220px;	left:-120px; text-shadow: 1px 1px 0px rgba(255,255,255,.6), 4px 3px 0px #b2c0cb, 4px 4px 0px #b2c0cb, 4px 5px 0px #b2c0cb;
		-webkit-transform: rotate(120deg); -moz-transform: rotate(120deg);}
#start_with span {color: #ffffff; text-shadow: 0 -1px 0 #92a7b8}
#start_with .line1 {font-size: 20px; display: inline-block; font-family: "jeanne-moderno-1","jeanne-moderno-2"; margin-top: 24px; margin-bottom: 3px; text-transform: uppercase;padding-bottom: 3px; border-bottom: 1px dashed #b9c3cb;}
#start_with .line2 {font-size: 14px; font-family: "proxima-nova-extra-condensed-1","proxima-nova-extra-condensed-2"; display: block; text-transform: uppercase; letter-spacing: 10px; padding-left: 11px}
#now_for span {color: #9ab0c2; text-shadow: 0 1px 0 #ffffff}
#now_for .line1 {font-size: 20px; display: inline-block; font-family: "jeanne-moderno-1","jeanne-moderno-2"; margin-bottom: 5px; text-transform: uppercase;padding-bottom: 5px; border-bottom: 1px dashed #b9c3cb;}
#now_for .line2 {font-size: 14px; font-family: "proxima-nova-extra-condensed-1","proxima-nova-extra-condensed-2"; display: block; text-transform: uppercase; letter-spacing: 9px; padding-left: 10px}
#page_header .line1 {font-family: "tamarillo-1","tamarillo-2"; font-size: 30px; text-align: center; display: block; text-shadow: 0 1px 0 rgba(255,255,255, .8)}
#page_header .line2 {font-family: "jeanne-moderno-1","jeanne-moderno-2"; font-size: 40px; text-align: center; display: block; color: #059999; text-shadow: 0 1px 0 rgba(255,255,255, .8);}




/* Images
-------------------------------------------------------------- */
.button {background: url(../img/button.png) no-repeat 0 0; width: 197px; height: 44px; text-align: center; text-transform: uppercase; text-decoration: none; font-size: 12px; font-family: "proxima-nova-extra-condensed-1","proxima-nova-extra-condensed-2"; line-height: 46px; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); display: block; margin-left: auto; margin-right: auto; text-shadow: 0 1px 0 #ffffff;}
.button_circle {background: url(../img/button_circle.png) no-repeat 0 0; width: 60px; height: 61px; display: inline-block; margin-left: auto; margin-right: auto; margin-bottom: 15px}
.icon_vol {background: transparent url(../img/icon_vol.png) no-repeat scroll; width: 17px; height: 27px; position: relative; top:16px; left: 7px; display: inline-block; -webkit-transition: all 0.1s ease-out;}
.icon_sound {background: transparent url(../img/icon_sound.png) no-repeat scroll; width: 15px; height: 23px;position: relative; top:13px; left: -2px; display: inline-block; -webkit-transition: all .1s ease-out; opacity: 0}
.advanced {position:relative; left:-30px}
.button {background: url(../img/button.png) no-repeat 0 0; width: 197px; height: 44px; text-align: center; text-transform: uppercase; text-decoration: none; font-size: 16px; line-height: 46px; -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); display: inline-block; text-shadow: 0 1px 0 #ffffff; margin-bottom: 30px;}
.icon_ys {background: transparent url(../img/icon_ys.png) no-repeat scroll; width: 61px; height: 50px;position: absolute; top:13px; left: -32px; display: inline-block; -webkit-transition: all .1s ease-out;}
.icon_twitter {background: transparent url(../img/icon_twitter.png) no-repeat scroll; width: 67px; height: 50px;position: absolute; top:13px; left: 153px; display: inline-block; -webkit-transition: all .1s ease-out;}
.bulb {position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: -15px; width: 179px; height: 207px; background-image: url(../img/bulb.png);}
div.divider_double {background: url(../img/divider_double.png) repeat-x 0 0; width: 100%; height: 11px; margin-top: 30px; margin-bottom: 30px}
div.divider_double2 {background: url(../img/divider_double2.png) repeat-x 0 0; width: 100%; height: 11px; margin-top: 30px; margin-bottom: 30px}
.ribbon {background: url(../img/weird_shape.png) repeat-x 0 0; width: 221px; height: 100px; position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top:500px;}
.logo {position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; top: 25px; width: 93px; height: 93px; background-image: url(../img/logo.png);}
div.circles {background: url(../img/circles.png) repeat-x 0 0; width: 38px; height: 9px; margin-top: 100px; margin-bottom: 100px;margin-left: auto; margin-right: auto; }
.circle {background: url(../img/circle.png) repeat-x center top; height: 150px; width: 151px; position:absolute; z-index: 1; display: block; top: 5px; left: 43%; margin-left: auto; margin-right: auto;  padding-top: 35px; text-align: center}


/* Links & Hovers
-------------------------------------------------------------- */

a {color: #9c0505;  -webkit-transition: color 0.2s ease-in;text-decoration: none}
a:hover {color: #059999; -webkit-transition: color 0.2s ease-out;text-decoration: none}
.button_circle {color: #9c0505; cursor: pointer; -webkit-transition: color 0.2s ease-in;}
.button_circle:hover {color: #059999; -webkit-transition: color 0.2s ease-out;}
.button_circle:hover .icon_vol {left: 1px;-webkit-transition: all 0.1s ease-in;}
.button_circle:hover .icon_sound {left: 2px; opacity: 1; -webkit-transition: all 0.1s ease-in;}




/* Other Elements
-------------------------------------------------------------- */

hr {border-top: 1px dashed #a2afb9; border-bottom: 0; border-left: 0; border-right: 0; margin-top: 20px; margin-bottom: 20px; }
hr.main {border-top: 1px dashed #a2afb9; border-bottom: 0; border-left: 0; border-right: 0; margin-top: 80px; margin-bottom: 60px; }
.circle hr { width:40px;border-top: 1px dashed #a2afb9; border-bottom: 0; border-left: 0; border-right: 0; margin-top: 10px; margin-bottom: 10px; }
hr.top_hr {border-top: 1px dashed #a2afb9; border-bottom: 0; border-left: 0; border-right: 0; margin-top: 100px; margin-bottom: 30px; }
hr.bottom_hr {border-top: 1px dashed #a2afb9; border-bottom: 0; border-left: 0; border-right: 0; margin-top: 30px; margin-bottom: 100px; }
.paraleft {display:inline; float: left; position: relative;width:475px; margin-right: 15px; }
.pararight {display:inline; float: left; position: relative; width:475px; margin-left: 15px;}




/* Splash Page
-------------------------------------------------------------- */
#splash_page {position: fixed; color: #fff; width: 100%; height: 100%; z-index: 99; top: 0px;background-color:#d7dde2;}
#splash_content {text-align: center; width: 980px; margin: 200px auto 0;}
#splash_content p { text-align: center; }
#splash_line1 {font-family: "tamarillo-1","tamarillo-2"; font-size: 30px; text-align: center; color: #000000;}
#splash_line2 {font-family: "proxima-nova-extra-condensed-1","proxima-nova-extra-condensed-2"; font-weight: 900; font-size: 70px; text-transform: uppercase; text-align: center; color: #059999; text-shadow: 1px 1px 0px rgba(255,255,255,.8), 3px 2px 0px #b2c0cb, 3px 3px 0px #b2c0cb, 3px 3px 0px #b2c0cb, 3px 4px 0px #b2c0cb; border-bottom: 1px dashed #a2afb9; border-top: 1px dashed #a2afb9; padding-top: 20px; padding-bottom: 20px; margin-top: 20px;}
#splash_line3 { color: #000000; font-family: "proxima-nova-condensed-1","proxima-nova-condensed-2"; font-size: 18px; line-height: 1.5; text-align: center; margin-top: 30px; }
.splash_text { display: none;}
.hidden { display: none; }
html { overflow-y: scroll;} /* force vertical scroll bar */


#light_bulb {display: none; position: absolute; top: 0px; height: 763px; width: 594px; background:url('../img/question_mark.png') no-repeat top center; margin-left: auto; margin-right: auto; left: 0; right: 0; z-index: -1}

.csstransitions #splash_page .opacity{ opacity: 0; display: block; }
.csstransitions #splash_page .fade_in { opacity: 1; }
.csstransitions .fade_out { opacity: 0; }

.touch html { overflow: none; margin; 0px; padding: 0px; }
.touch body {  margin: 0px; padding: 0px; background: url("../img/bg-touch.jpg") no-repeat #c3cdd6 center top; }
.touch .logo { position: absolute; width: 1010px; margin: 0 auto; background: url("../img/logo.png") no-repeat 50% ;}
.touch #wrapper {min-width: 1010px; margin: 70px auto 40px auto; width: 1010px; }
.touch #wrapper > header { width: 1010px; }
.touch #wrapper #content{ width: 980px; }
.touch span.cred {position: relative; float: right; top: -20px; right: 0px; font-size: 11px;}
.touch span.experiment {position: relative; float: left; top: -20px; left: 0px; font-size: 11px;}
.touch .icon_sound {top: -2px;}
.touch .icon_vol { top: -2px; }
.touch span.button_circle_text { top: -30px;}
.touch #footer { position: relative; left: 22px; }
.touch #footer .button{ font-size: 12px; }