/*! normalize.css v2.1.3 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined in IE 8/9.
 */

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

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */

audio,
canvas,
video {
    display: inline-block;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */

[hidden],
template {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-family: sans-serif; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
    background: transparent;
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */


abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: bold;
}


dfn {
    font-style: italic;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}


mark {
    background: #ff0;
    color: #000;
}


code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

pre {
    white-space: pre-wrap;
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}


img {
    border: 0;
}


svg:not(:root) {
    overflow: hidden;
}


figure {
    margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */


fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

button,
input,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

button,
input {
    line-height: normal;
}

button,
select {
    text-transform: none;
}

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}


button[disabled],
html input[disabled] {
    cursor: default;
}


input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}


input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}


button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}


textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

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

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family:'나눔고딕','Nanum Gothic', '돋움', 'Dotum', 'helvetica', 'sans-serif';
  color: #333;
  background: #e7e7e7;  /*Nanum Brush Script 'Oleo Script Swash Caps' 'Lucida Sans', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode'*/
}


/* ---- links ---- */

a,
a code {
  color: #674988;
  text-decoration: none;
}

a:hover,
a:hover code {
  color: #ff5656;
}
*/

/* ---- headers ---- */


/* ---- lists ---- */

ul, ol {
  padding-left: 1.8em;
}


.masonry.counting {
  counter-reset: item;
}

.masonry.counting .item:before {
  counter-increment: item;
  content: counter(item);
  display: block;
  color: white;
  padding-top: 0.2em;
  text-align: center;
  font-size: 18px;
}

/* ---- measurement demos ---- */

#gutter-opt-demo2 .item {
  margin-bottom: 10px;
}

/* responive column width */
#column-width-demo2 .grid-sizer { width: 20%; }
#column-width-demo2 .item { width: 20%; }
#column-width-demo2 .item.w2 { width: 40%; }

#row-height-demo2 .grid-sizer {
  height: 60px;
}

#gutter-opt-demo3 .gutter-sizer {
  width: 3%;
}



/* ---- animate-item-size ---- */

/* item is invisible, but used for layout */
.masonry.animate-item-size-demo .item,
.masonry.animate-item-size-demo .item-content {
  width: 60px;
  height: 60px;
}

.masonry.animate-item-size-demo .item {
  border: none;
  background: transparent;
}

/* item-content is visible, and transitions size */
.animate-item-size-demo .item-content {
  width: 60px;
  height: 60px;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
  -webkit-transition: width 0.4s, height 0.4s;
     -moz-transition: width 0.4s, height 0.4s;
       -o-transition: width 0.4s, height 0.4s;
          transition: width 0.4s, height 0.4s;
}

.animate-item-size-demo .item:hover .item-content {
  border-color: white;
  background: #A2C;
}

/* both item and item content change size */
.animate-item-size-demo .item.is-expanded,
.animate-item-size-demo .item.is-expanded .item-content {
  width: 180px;
  height: 120px;
}

.animate-item-size-demo .item.is-expanded {
  z-index: 2;
}

.animate-item-size-demo .item.is-expanded .item-content {
  background: #F90;
}


/* ---- animate item size responsive ---- */

#animate-item-size-responsive .item,
#animate-item-size-responsive .grid-sizer {
  width: 20%;
}

#animate-item-size-responsive .item-content {
  width:  100%;
  height: 100%;
}

/* item has expanded size */
#animate-item-size-responsive .item.is-expanded {
  width: 60%;
}



#footer {
  margin-top: 2.0em;
  font-size: 13px;
  color: #888;
  text-align:center;
  font-family:'Oleo Script Swash Caps', '돋움', 'Dotum', 'helvetica', 'sans-serif';
}
#footer a {
  color: #888;
}

#footer .primary-content {
  padding: 2.0em 0;
}

#hero { }

#hero .primary-content {
  padding-bottom: 20px;
}


#hero .tagline {
  font-size: 24px;
  margin-bottom: 0.8em;
  line-height: 1.2;
}


/* ---- big ol buttons ---- */

.hero-masonry .button {
  display: block;
  font-size: 1.3em;
  line-height: 1.2em;
  position: relative;
  padding-left: 50px;
  text-align:center;
}

.hero-masonry .button:hover { }

.hero-masonry .button .icon {
  font-size: 32px;
  position: absolute;
  left: 10px;
  top: 10px;
}

/* ---- hero masonry ---- */

.hero-masonry {
 /* background:#dadada;
  border-radius: 10px; */
  padding: 10px 1%;
  margin-bottom: 20px;
}

.hero-masonry:after {
  content: '';
  display: block;
  clear: both;
}

.hero-item,
.hero-masonry .grid-sizer {
  width: 46.9%; /* juse a lil under  47 */
  margin: 10px 1%;
  float: left;
  border-radius: 8px;
}

/* necessary for proper sizing with margins */
.hero-masonry .grid-sizer {
  position: absolute;
}

.hero-item.texty {
  text-align:center;
  padding: 10px;
}


.hero-item.has-title,
.hero-item.w2 {
  width: 96%;
}

.hero-item.has-example {
}

.hero-item.has-example a {
  font-size: 10px;
  font-weight:none;
  text-align:left;
  color:#777;
  display: block;
 /* border-radius: 10px 10px 8px 8px;*/

}


.hero-item.has-example a:hover {
  text-align:left;
  color: white;
}

.hero-item.has-example img {
  display: block;
  max-width: 100%;
  border-radius: 8px 8px 0 0;
}

.hero-item.has-example .example-title {
  padding: 0px 0px;
  margin: 0;
}

/* enough width for 4 columns */
@media screen and ( min-width: 720px ) {

  .hero-item,
  .hero-masonry .grid-sizer {
    width: 22.5%;
  }

  .hero-item.has-title,
  .hero-item.w2 {
    width: 46.9%; /* just a lil under 47 */
  }

}

/* ---- desktop ---- */

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

  #hero h1 {
    font-size: 120px;
  }

  #hero .tagline {
    font-size: 32px;
  }

  /* just a little under 71.5 */
  .hero-item.has-title {
    width: 71.4%;
  }

  /* buttons */

  .big-ol-buttons .button {
    font-size: 1.6em;
    padding-left: 86px;
    min-height: 94px;
  }

  .big-ol-buttons .icon {
    font-size: 56px;
    left: 18px;
    top: 16px;
  }

}


/* ---- desktop  ---- */

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

  /* first primary content not used on homepage */
  .index-page #content > .primary-content:first-child {
    border-top: none;
    padding-top: 0;
  }

}

/* ---- primary-content ---- */

/* stuff that isn't in the gutter */
.primary-content {
  margin-left: 10px;
  margin-right: 10px;
}

.primary-content .center_box {
  width:650px;
  padding-top:20px;
  padding-bottom:20px;
  margin:0 auto;
}

#content .primary-content > * {
  max-width: 700px;
}

#content #notification,
#content #hero-demos {
  max-width: none;
}

/* ---- row ---- */

.row .cell {
  margin-bottom: 0.8em;
}

/* clearfix */
.row:after {
  content: ' ';
  display: block;
  clear: both;
}

.row4 .cell {
  float: left;
  width: 48%;
  margin-right: 2%;
}

/* tablet-ish */
@media screen and ( min-width: 800px ) {

  #content .primary-content {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  #content .primary-content > * {
    max-width: 700px;
  }

  /* stuff that can go extra wide */
  #content .primary-content .row,
  #content #notification,
  #content #hero-demos {
    max-width: 1200px;
  }

  .row {
    margin-bottom: 0.8em;
  }

  /* two column by default*/
  .row .cell {
    float: left;
    width: 48.75%;
    margin-right: 2.5%;
    margin-bottom: 0;
  }
  /* IE8 doesn't support :last-child */
  .lt-ie9 .row .cell { margin-right: 1.5%; }

  /* no margin */
/*  .example.row .cell {
    width: 50%;
    margin-right: 0;
  }*/

  /* three column */
  .row3 .cell {
    width: 31.6%;
  }

  /* four column */
  .row4 .cell {
    width: 23.1%;
  }

  .row .cell:last-child {
    margin-right: 0;
  }

}



/* desktop */
@media screen and ( min-width: 1100px ) {

  .primary-content {
	 margin:0 auto ;
	 width: 1100px 
    /*margin-left: 6%;
    margin-right: 200px;*/
  }

  #page-nav {
    position: absolute;
    right: 0;
    top: 60px;
    list-style: none;
    padding: 0;
    width: 200px;
    padding: 10px;
  }

  #page-nav li {
    display: block;
    margin-bottom: 4px;
    margin-left: 0;
  }

  #page-nav li:after {
    content: none;
  }

}


/* ---- site nav ---- */

#site-nav {}

#site-nav,
#site-nav h1 {
  opacity:1;
}


/* clear fix */
#site-nav:after {
  content: ' ';
  display: table;
  clear: both;
}

#site-nav div h1 {
  text-align: center;
  margin: 0 auto;
  font-family:'Oleo Script Swash Caps', '돋움', 'Dotum', 'helvetica', 'sans-serif';
  color:#ff4646;
}

#site-nav div h1 a {
  display: block;
  color:#ff4646;
}

#site-nav h1 a:hover {

  color: #777;
}

#site-nav a {
  background: none;
}

#site-nav .center_box ol {
  font-family:'Oleo Script Swash Caps', '돋움', 'Dotum', 'helvetica', 'sans-serif';
  list-style: none;
  font-size: 12px;
  margin-bottom: 0;
}

#site-nav .menu_sp {
 padding-left:230px;
}

/*#site-nav ol:after {
  content: ' ';
  display: table;
  clear: both;
}
*/
#site-nav li {
  float: left;
}

#site-nav ol a {
background:#000;
  display: block;
  padding: 0 1.0em;
  color:#727272;
  opacity:1;
  list-style: none;
  font-size: 11px;
  font-family:'Oleo Script Swash Caps', '돋움', 'Dotum', 'helvetica', 'sans-serif';
}

#site-nav ol a:hover {
  color: #222;
}

/* selected */
.options-page #site-nav .nav-options a,
.methods-page #site-nav .nav-methods a,
.events-page #site-nav .nav-events a,
.draggable-page #site-nav .nav-draggable a,
.license-page #site-nav .nav-license a,
.appendix-page #site-nav .nav-appendix a,
.faq-page #site-nav .nav-faq a {
  color: white;
}





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

  /* hide h1 on index 
  .index-page #site-nav h1 {
    visibility: hidden;
  }
*/

  #site-nav,
  #site-nav h1 {
    margin-left: -0.5em;
  }

  #site-nav h1 {
    font-size: 2.0em;
  }

  #site-nav ol {
    font-size: 17px;
  }

}






UL, OL { /* Horizontal & vertical lists */
	margin: 1.077em 0 1.077em 1.077em; /*  14px 0 14px 20px */
}

UL LI, OL LI {
	line-height: 1.385em
}

UL.vertical { /* Vertical lists */
	margin: 0
}

UL.horizontal { /* Horizontal lists */
	display: inline;
	margin: 0
}

UL.horizontal > LI {
	display: inline-block;

	/* IE */
	*margin: 1px;
	zoom: 1;
	*display: inline;
}




/**
 * BLOCKQUOTES AND CODE BOXES
 *
 * -------------------------------------------------------------------------------------------------
 */
BLOCKQUOTE {
	border-left: 0.308em solid #EEE; /* 4px */
	color: #666;
	margin-bottom: 0.769em; /* 10px */
	margin-left: 1.538em; 	/* 20px */
	margin-top: 0.769em; 	/* 10px */
	padding-left: 0.769em; 	/* 10px */
}

PRE {
	color: #333;
	display: block;
	font-family: Courier, 'Courier New', monospace;
	margin: 0 0.154em; 			/* 0 2px */
	padding: 0.154em 0.308em; 	/* 2px 4px */
}

CODE {
	background-color: #F8F8F8;
	border: 1px solid #CCC;
	border-radius: 0.231em; 	/* 3px */
	color: #333;
	display: block;
	font-family: Courier, 'Courier New', monospace;
	margin: 0 0.154em; 			/* 0 2px */
	padding: 0.077em 0.308em; 	/* 2px 4px */
}

CODE.monokai { /* Based on Monokai scheme colors */
	background-color: #272822;
	color: #FB4383
}

/**
 * NESTING
 *
 * -------------------------------------------------------------------------------------------------
 */
P > CODE {
	display: inline-block
}

P B, LI B, P STRONG, LI STRONG {
	font-weight: bold
}

P I, LI I, P EM, LI EM {
	font-style: italic
}

ARTICLE.capitalise H2 + P:first-letter { /* Capitalise first letter of the paragraph */
	font-size: 2.769em; 	/* 36px */
	float: left;
	letter-spacing: 0.111em;/* 4px */
	margin-top: 0.167em; 	/* 6px */
}

ARTICLE UL {
	list-style: disc outside none;
	margin-left: 2.615em; 	/* 34px */
}

ARTICLE OL {
	list-style: decimal outside none;
	margin-left: 2.615em; 	/* 34px */
}

/**
 * PLACEHOLDERS
 *
 * -------------------------------------------------------------------------------------------------
 */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
	color: #C0C0C0
}

input:-moz-placeholder, textarea:-moz-placeholder {
	color: #C0C0C0
}





/* 
    Document   : style
    Created on : 20 Jul, 2013, 3:58:03 PM
    Author     : RAM

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 15px; padding: 0; margin: 0;}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ 
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
*/
.main,
.container > header {
	width: 100%;
	margin: 0 auto;
}
.main {
	width: 100%;
}
.container > header {
	text-align: center;
	font-size: 15px;
}
.container > header h1 {
	font-size: 2.625em;
	margin: 0;
	opacity:1;
}
.container > header span {
	display: block;
	font-size: 60%;
	color: #ceccc6;
    font-weight:300;
}
@media screen and (max-width: 25em) { 
	.codrops-icon span {
		display: none;
	}
	.container > header {
		font-size: 75%;
	}
}
[id^="section-"]{}
[id^="section-"] /*h1,[id^="section-"] h3{font-family: 'Lato', Calibri, Arial, sans-serif;font-weight:300;color:#fff}*/
[id^="section-"] .content-wrapper{color:#f2f2f2;font-size:20px;font-weight:100}
[id^="section-"] .content-wrapper>pre{font-size:14px;display:inline-block}
[id^="section-"] .content-wrapper a{color:#f2f2f2;border-bottom: 1px dotted white}
[id^="section-"] .content-wrapper li{list-style:square}
#section-1{ padding-top:60px;}
#section-2{ padding-top:60px;}
#section-3{ padding-top:60px;}
#section-4{ padding-top:60px;}
#section-5{ padding-top:60px;}
#section-6{ padding-top:60px;}
#section-7{ padding-top:60px;}
.btn{padding:10px;border:3px solid #fff;background-color:transparent;color:#fff;font-weight:700;text-transform:uppercase;display:inline-block}
.btn:hover{border-style:dashed;cursor:pointer}
.btn:active,.demo-btn:active{border-style:dotted}
.demo-btn{position:absolute;margin-top:12px;margin-left:40px}
.element-demo{height:150px;margin:0.5em 0;padding:1em;font-family:Consolas,Monaco,'Andale Mono',monospace;text-shadow:0 -0.1em 0.2em black;border:0.3em solid #545454;border-radius:0.5em;background:none repeat scroll 0 0 #141414;box-shadow:1px 1px 0.5em black inset;overflow:auto}
.easing-buttons{margin-top:80px}
.download-buttons{margin-top:350px}
.fl{float:left}
.fr{float:right}
.disp-inl{display:inline}
.disp_inl_blk{display:inline-block}
.w30{width:30%}
.w50{width:50%}
.w60{width:60%}
.w70{width:70%}
.ptr{cursor:pointer}
/* For Responsiveness 
@media (min-width:32.5em) and (max-width: 61.250em) {
    [id^="section-"] .content-wrapper{font-size:1.2em}
    [id^="section-"] .content-wrapper>pre{display:block}
    .demo-btn{position:relative}
    .easing-buttons,.download-buttons{margin-top:0}
    .fr{float:none}
    .w30,.w60,.w70{width:100%}
}
@media (min-width: 32.5em) and (max-width: 38.688em) {
    [id^="section-"] .content-wrapper{font-size:1.1em}
    [id^="section-"] .content-wrapper>pre{display:block}
    .demo-btn{position:relative}
    .easing-buttons,.download-buttons{margin-top:0}
    .fr{float:none}
    .w30,.w60,.w70{width:100%}
}
@media (max-width: 32.438em) {
    [id^="section-"] .content-wrapper{font-size:1em}
    [id^="section-"] .content-wrapper>pre{display:block}
    .demo-btn{position:relative}
    .easing-buttons,.download-buttons{margin-top:0}
    .fr{float:none}
    .w30,.w60,.w70{width:100%}
}
*/