*,*:after,*:before{margin:0;padding:0;box-sizing:inherit}
body{font-family:"Noto Sans KR", sans-serif; height:100%; line-height:1; font-smoothing:antialiased; text-rendering:optimizeLegibility; -webkit-text-size-adjust:none; -ms-text-size-adjust:none; text-size-adjust:none; background:#000;}
html, body, h1, h2, h3, h4, h5, h6, p, img, table, td, th, tr, li, ol, ul, dl, a, textarea, iframe, video, fieldset, input{margin:0; padding:0; border:0;}
li, ol, ul{list-style:none;}
input:focus, input:focus{outline: none;}
textarea{resize:none; border:none;}
img{border:0; max-width:100%; vertical-align:middle; display:inline-block;}

.m{display:block;}
.pc{display:none;}

.top_menu{width:100%; height: 90px; position:fixed; background:none; z-index:9999;}
.topNav{display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%;  width: 100%; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin-left:auto; margin-right:auto;}

.topNav_logo{text-align:left; height:auto; order:-1; position:relative; width:auto; object-fit:contain; -o-object-position: 0% 50%; object-position: 0% 50%; max-width: 100%; display: inline-block; z-index: 2;}
.topNav_cont{display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; float: right;}
.topNav_cont li{display:inline-block; margin:0 20px; font-weight:bold; color:#fff; font-size:14px;}
.topNav_cont li:last-child{display:inline-block; padding:15px 50px; border-radius:100px; font-weight:normal; color:#fff; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(126, 112, 240, 1)), to(rgba(155, 73, 222, 1))); background-image: linear-gradient(73deg, rgba(126, 112, 240, 1), rgba(155, 73, 222, 1));}

.Fixed{background:rgba(0,0,0,.8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}



.main_page{position:relative; height:500px; min-height:450px; overflow:hidden; z-index:-1; background:#000;}
.main_text{position:absolute; top:0; bottom:0; left:0; right:0; width:100%; max-width:1150px; margin:0 auto; line-height:1.2; padding: 150px 10% 0 10%;}
.main_page .main_text .main_title{font-size:45px; font-weight:900; /*-webkit-text-stroke: 0.6px white; -webkit-text-stroke-width: 0.6px; -webkit-text-stroke-color: white; color:transparent;*/ color:#fff; line-height:1.4;} 
.main_video{position: relative; right:700px; min-width:1920px; width: 100%; height: 100%; /*height:auto;*/ padding-top: 0%; overflow:hidden;}
.main_video .opacity{background:rgba(0,0,0,.1); height:100%; width:100%; position:absolute; top:0px; left:0px; right:0px; bottom:0px; z-index:-1;}
.main_page .main_video iframe{overflow:hidden; overflow-x:hidden; overflow-y:hidden; height:100%; width:100%; position:absolute; top:0px; left:0px; right:0px; bottom:0px; z-index:-3; transform: scale(1.5);}


.bl{position:fixed; width:100%; height:100%; left:0; right:0; top:0; bottom:0; z-index: 99; background:rgba(0,0,0,.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); visibility: hidden;  transition:all 0.3s;}
.on{visibility: visible !important; transition:all 0.3s;}

#menuToggle{display: block; position: absolute; top: 30px; right: 50px; z-index: 1; -webkit-user-select: none; user-select: none; transition:all 0.3s;}
#menuToggle input{display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; /* hide this */ z-index: 2; /* and place it over the hamburger */  -webkit-touch-callout: none;}
#menuToggle span{ display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative;  background: #fff; border-radius: 3px;  z-index: 1;transform-origin: 4px 0px;transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;}
#menuToggle span:first-child{transform-origin: 0% 0%;}
#menuToggle span:nth-last-child(2){transform-origin: 0% 100%;}


/*#menuToggle input:checked ~ span{opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #fff;}
#menuToggle input:checked ~ span:nth-last-child(3){opacity: 0; transform: rotate(0deg) scale(0.2, 0.2);}
#menuToggle input:checked ~ span:nth-last-child(2){transform: rotate(-45deg) translate(0, -1px);}*/

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu{position: fixed; width: 100%; height:100%; padding: 50px; padding-top: 50%; box-sizing:border-box; background:none; list-style-type: none; -webkit-font-smoothing: antialiased;/* to stop flickering of text in safari */transform-origin: 0% 0%; transition: all 0.3s ease; z-index:100;}
.menu-section{visibility: hidden; transition:all 0.3s;}
#menu li{padding: 20px 0; font-size: 6vh; display:table; margin: 0 auto; cursor:pointer;}
#menu li{text-decoration: none; color: #fff; transition: color 0.3s ease; font-weight:bold;}
#menu li:hover{color: #7836FA;}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul{left:0; top:0; /*transform: translate(-90%, 0);*/}

/*section1*/
.wrapper{background:#000;}
.section1{background:#000; position:relative;}

.section1 .sliderr {margin:80px 0px;}
.section1 .slider__item {/*position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;*/ display:inline-block; width:100%;}
.section1 .slider__img{/*position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%;*/ display:flex; margin-top: 50px;}
.section1 .slider__img .slider_video{position: relative; width: 440px; height: 200px; border-top-left-radius: 30px; border-bottom-right-radius: 30px; overflow: hidden;}
.section1 .slider__img .slider_video iframe{height: 100%; width: auto; position: absolute; top: 0%; left: 0%; transform: scale(2);}
.section1 .slider__text {/*position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; opacity: 1;*/ display:flex; width:700px; flex-direction: column; align-items: flex-start;}
.section1 .slider__text .sub{font-weight:900; font-size:38px; color:#fff;}
.section1 .slider__text .num{padding-top:10px; font-weight:900; font-size:60px; color:#7836FA;}
.section1 .slider__caption {position: absolute; z-index: 2; bottom: 0; left: 0; padding: 1rem; color: white;}

.section1 .swiper-button-next, .section1 .swiper-button-prev {position: absolute; top: 40%; width: calc(var(--swiper-navigation-size)/ 44 * 27); height: var(--swiper-navigation-size); margin-top: calc(0px - (var(--swiper-navigation-size)/ 2)); text-align:center; z-index: 10; cursor: pointer;  display: flex;  align-items: center;  justify-content: center;  color: var(--swiper-navigation-color,var(--swiper-theme-color));}
.section1 .swiper-button-prev{left:0;}
.section1 .swiper-button-next{right:0;}
.section1 .swiper-button-prev:after, .section1 .swiper-button-next:after{background:#0c0c0c; color:#7836fa; font-size:17px; font-weight:bold; position:absolute; top:0; right:0; left:0; bottom:0; width:40px; height:40px; box-sizing:border-box; padding:12px; z-index:-1; border-radius:100px;}


.swiper { width: 100%; height: 100%;}
.swiper-slide {text-align: center; font-size: 18px; background:none; /* Center slide text vertically */display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover;}


.inner{width:100%; margin:0 auto; padding-top:10%; text-align:left; position:relative;}
.inner .text .info{color:#7836FA; font-size:15px; font-weight:900;}
.inner .text .title{color:#fff; font-size:38px; font-weight:900; letter-spacing:-2px; line-height:1.3; padding-top:20px; padding-bottom:30px;}
.inner .cont .title{color:#000; font-size:70px; font-weight:900; letter-spacing:-2px; line-height:1.3; padding-top:20px; padding-bottom:30px;}


.color_pur{color:#826cee;}


/*section2*/

.section2{height:2500px; background:#000;}
.section2 .inner{padding-top:0px;}
.section2 #content-wrapper{padding: 60px 0px;}
.section2 #examples-pin{position: relative; width: 100%; max-width: 1150px; height: auto; overflow: hidden; margin:0 auto; right:0;}
.section2 #pin-frame-wipe  {background:none; top:100%;}
.section2 #pin-frame-wipe h2  {color: #D92B00;}
.section2 .pin-frame {position: absolute; width: 100%; height: 100%; overflow: hidden; top:110px !important; padding-top:0px;}
.section2 .pin-frame h2 {margin-top: 120px;}

.section2 #examples-parallax{padding-top:0; height:95vh; margin-bottom:0px; overflow: hidden;}
.section2 #parallax-it {padding: 0; font-size: 80px; position: relative; z-index:99;}
.section2 #parallax-it-left {position: relative; font-size: 120px; left: 0px; right:0; text-align:right; color: #C5C3DE; opacity: 0.9; -moz-opacity: 0.9; filter:alpha(opacity=9); overflow: hidden; width:90%; z-index:-1;}
.section2 #parallax-it-right {position: relative; font-size: 160px; left: 0px; top:300px; color: #C5C3DE; opacity: 0.7; -moz-opacity: 0.7; filter:alpha(opacity=7.0); overflow: hidden; width: 90%; z-index:-1;}
.section2 #parallax-it-left img, .section2 #parallax-it-right img{max-width:100%;}



/*section3*/

.section3{height: auto; position:relative; overflow:hidden; padding:40% 0 20% 0%; background:#000;}
.section3 .inner{position:relative;}
.section3 .inner .text{position:relative;  z-index:1;}
.section3 .inner .text .title{color:#000; font-size:70px; font-weight:900; letter-spacing:-2px; line-height:1.3;  z-index:99; text-align:center;}
.section3 .inner .text .title3{color:#ccc; font-size:18px; font-weight:600; letter-spacing:-1.2px; line-height:1.8; z-index:99; text-align:left; display:grid; justify-content: space-around;}
.section3 .inner .cont .title{color:#000; font-size:70px; font-weight:900; letter-spacing:-2px; line-height:1.3; }
.section3 .inner .palbg{position:absolute; bottom:0; left:0; right:0; z-index:0; opacity: .15; width:100%; margin:0 auto;}
.section3 .sliderr { width: 100%; display: grid; place-items: center; overflow:hidden; position:relative;}
.section3 .sliderr .opacity{width:100%; height:100%; position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.1); z-index:1;}
.section3 .sliderr::before, .sliderr::after{position:absolute; background-image:linear-gradient(to right,rgba(0,0,0,1) 0%,rgba(0,0,0,.8) 30%,rgba(0,0,0,0) 100%); content:''; height:100%;width:25%; z-index:2; pointer-events:none;}
.section3 .sliderr::before{ left:0; top:0;}
.section3 .sliderr::after{right:0; top:0; transform:rotateZ(180deg);}

/*  IMPORTANT CODE BELOW */

.section3 .slide-track {/*width: calc(150px * 20);*/ width:auto; display: flex; animation: scroll 20s linear infinite; justify-content: space-between;}
.section3 .slidesec {display: grid; place-items: center; transition:0.5s; cursor:pointer;}
.section3 .slidesec li{background:#fff; position:relative; width:135px; height:60px; margin:0 5px 10px 5px; border-radius:3px; display:flex; justify-content:center; align-items:center;}
.section3 .slidesec li img{max-width:100%; max-height:100%;}




/*section4*/

.section4{height: auto; position:relative; background:#000;}
.section4 .inner {padding-top:250px;}
.section4 .inner .text{display:block; transform:translate(0, 0);}
.section4 .inner .text .title{color:#999; font-size:40px; font-weight:500; letter-spacing:-2px; line-height:1.6; padding-top:20px; padding-bottom:30px; text-align:right;}




/*section5*/

.section5{height: auto; position:relative; padding:30% 0%; background:#000;}
.section5 .blog_level{color:#fff;}
.section5 .blog_level .title{font-size:25px;}
.section5 .blog_level .levels{display:inline-block; padding-top:50px;}
.section5 .blog_level .levels .level{width:100%;}
.section5 .blog_level .levels .level .step{}
.section5 .blog_level .levels .level .step li{display:block;}
.section5 .blog_level .levels .level .step li.num{position:relative; background: -webkit-gradient(linear, left top, left bottom, from(rgba(126, 112, 240, 1)), to(rgba(155, 73, 222, .5))); background: linear-gradient(73deg, rgba(126, 112, 240, 1), rgba(155, 73, 222, .5)); color:#fff; font-weight:700; font-size:16px; padding: 12px 30px 12px 10px; border-radius:3px; display:block;}
.section5 .blog_level .levels .level .step li.num:before{content:''; position:absolute; top:30px; left:50%; width:0px; height:13vh; background:rgba(126, 112, 240, 1);}
.section5 .blog_level .levels .level:last-child .step li.num:before{content:''; position:absolute; top:30px; left:150px; width:100%; height:0px; background:none;}
.section5 .blog_level .levels .level .step li:nth-child(2){font-size:25px; font-weight:700; letter-spacing:-2px; padding:20px 10px; display: block;}
.section5 .blog_level .levels .level .step li:nth-child(3){font-size:15px; line-height:1.7; letter-spacing:-1.2px; display: block; margin-right:auto; margin-bottom: 20px; padding:0px 10px;}




/*section6*/

.section6{height: auto; position:relative; padding:30% 0%; background:#000;}
.section6 .interview{padding-top:0px;}
.section6 .interview ul{display:block; flex-wrap:nowrap;}
.section6 .interview li{width:100%; margin:20px 0px; padding:30px 20px; box-sizing:border-box; color:#fff;}
.section6 .interview li:first-child{background:#1c1c1c; border-radius:28px;}
.section6 .interview li:nth-child(2){background:#1c1c1c; border-radius:28px;}
.section6 .interview li:nth-child(3){background:#1c1c1c; border-radius:28px;}
.section6 .interview li .blogger{}
.section6 .interview li .img{position:relative; width:200px; height:200px; margin:0 auto; border-radius:300px; overflow:hidden;}
.section6 .interview li .img img{position:absolute; top:0; left:0; transform:scale(1);}
.section6 .interview li .blogger .title{font-size:25px; text-align:center; font-weight:700; padding:20px 0 20px 0px; letter-spacing:-2px;}
.section6 .interview li .blogger .cont{font-size:14px; font-weight:300; line-height:1.8; box-sizing:border-box; padding:0 0px; letter-spacing:-1.3px; text-align:center;}

.slidecontblock{margin-top:3.74rem;}
.slidecontblock .slidecont{width:3.6rem;margin-right:.3rem;margin-bottom:.3rem;}
.slidecontblock .slidecont ul li{position:relative;width:3.6rem;height:3.07rem;margin-bottom:0.1rem;opacity:0;}
.slidecontblock .slidecont ul li img{width:100%;height:auto;}
.slidecontblock .slidecont ul li .videowrap{ position:absolute;left:0;top:0;width:3.6rem;height:2.6rem;border-radius:.3rem;overflow:hidden;
  -webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);}
.contblock .cont .slidecontblock .slidecont ul li .videowrap video{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);border-radius:.3rem;overflow:hidden;}



/*section7*/

.section7{height: auto; position:relative; padding:30% 0%; background:#000;}
.section7 .palcom{padding-top:40px;}
.section7 .palcom .group input{width:100%; color:#fff; background:#222; font-size:17px; padding:20px 10px; margin:8px 0px; border-radius:5px; box-sizing:border-box;}
.section7 .palcom .group textarea{width:100%; color:#fff; background:#222; font-size:20px; padding:20px 10px; margin:8px 0px; border-radius:5px; box-sizing:border-box;}
.section7 .palcom .group input::-webkit-input-placeholder {font-family:"Noto Sans KR", sans-serif;}
.section7 .palcom .group input:-ms-input-placeholder {font-family:"Noto Sans KR", sans-serif;}
.section7 .palcom .group textarea::placeholder {font-family:"Noto Sans KR", sans-serif; color:#666;}
.section7 .palcom .btn{width:100%; margin-top:30px; padding:20px 0px; font-family:"Noto Sans KR", sans-serif; font-size:22px; border:0; border-radius:5px; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(126, 112, 240, 1)), to(rgba(155, 73, 222, 1))); background-image: linear-gradient(73deg, rgba(126, 112, 240, 1), rgba(155, 73, 222, 1)); color:#fff;}



/*footer*/
.footer{width:100%; background:#000; border-top:1px solid #333; padding:50px 10px; box-sizing:border-box;}
.footer_cont{max-width:1200px; margin:0 auto; line-height:1.5; font-size:14px; text-align:left; color:#666; letter-spacing:-0.5px;}



/*====== ¾Ö´Ï¸ÞÀÌ¼Ç ¸¸µé±â ======*/


@keyframes scroll {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(-150px * 10));
  }
}

@keyframes scroll2 {
  0% {
    transform: translateX(0px);
  }
  100% {
    transform: translateX(calc(-150px * 5));
  }
}

@media screen and (max-width: 768px) {
  .slide-track {
    width: calc(80px * 20);
  }

  .slide-track2 {
    width: calc(80px * 15);
  }

  .slide {
    width: 80px;
  }

  @keyframes scroll {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(calc(-80px * 10));
    }
  }

  @keyframes scroll2 {
    0% {
      transform: translateX(0px);
    }
    100% {
      transform: translateX(calc(-80px * 5));
    }
  }
}


@media screen and (max-width: 1150px) {
	.wrapper{padding:0 20px; box-sizing:border-box;}
	.topNav_logo{padding-left:20px;}
}


/*demo*/
.simple-demo, .mobile-demo {
	visibility: visible;
}

.simple-demo #content-wrapper {
	height: 1600px;
	padding-top: 400px;
}


h2 {
	font-size: 150px;
	font-weight: normal;
	margin: 0;
	color: #FFB000;
	padding: 60px;
	text-shadow: 0 2px 1px #000;
	font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif;
	text-transform: uppercase;
}
h3 {
	font-size: 60px;
	font-weight: normal;
	margin: 0;
	color: #FFB000;
	text-shadow: 0 2px 1px #000;
	font-family: 'Luckiest Guy',Impact,Haettenschweiler,"Franklin Gothic Bold",Charcoal,Gadget,sans-serif;
	text-transform: uppercase;	
}

p {	width: 80%; text-shadow: 0 2px 1px #000; color: #C5C3DE; }
a, a:visited { color: #fff; font-weight: bold; font-style: inherit; text-decoration: auto;}
ul { list-style: none; }

figcaption { text-shadow: 0 2px 1px #000; color: #C5C3DE; }

.download { padding: 10px; }

pre { font-size: 15px; }
code { font-style: normal; }
blockquote {
	text-align: left;
	width: 720px;
	margin: 10px auto;
	background: #C5C3DE;
	border: solid 2px #69697A;
	padding: 0 40px;
}

#console {
	display: none;
	position: fixed;
	top: 0;
	left: 15px;
	width: 500px;
	margin: 0;
	font-size: 14px;
	font-style: italic;
	background-color: #69697A;
	text-shadow: none;
	text-align: left;
	padding: 3px 10px;
	border-radius: 0 0 10px 10px;
	z-index: 99;
	opacity: .8;
}

#title {
	overflow: hidden;
	font-size: 180px;
	margin: 0 auto -580px;
	width: 100%;
	height: 1000px;
	position: relative;
	padding-top: 30px;
	z-index: 99;
}

.title-line { position: relative; display: block; margin: auto; width: 300%; left: -100%; }
#title-line2 { top: -60px; }
#title-line3 { top: -120px; }
.title-line span { display: inline-block; line-height: 1.1; position: relative; }
.twitter-follow-button { position: relative; top: 8px; left: 4px; }
#title-info { position: relative; z-index:99998; opacity: 0; }

.credit {
	font-size: 20px;
	margin: 10px auto;
	text-align: center;
	font-style: italic;
	color: #D92B00;
	z-index:100;
}

#download {
	position: relative;
	margin: 50px auto;
	font-size: 18px;
	width: 100%;
	line-height: 1.8;
	z-index: 99999;
}
#hire { margin-bottom: 80px; }

#download a { color: #69697A; }

#examples-1 { overflow: hidden; }
#fly-it { position: relative; }
#scale-it { width: 500%; margin: 0px -200%; padding: 0; }

#examples-pin { position: relative; width: 100%; height: 600px; overflow: hidden; margin-bottom: -200px; }
.pin-frame { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.pin-frame h2 { margin-top: 120px; }
#pin-frame-slide { background: #D92B00; margin-left:-100%; }
#pin-frame-wipe  { background: #FFB000; top:100%; }
#pin-frame-wipe h2  { color: #D92B00; }
#pin-frame-bounce  { background: #222438; }
#pin-frame-color  { background: #222438; }
#pin-frame-unpin  { top:100%; }

#examples-2 { z-index: 9999; width: 100%; height: 100%; overflow: hidden; }
#fling-it, #move-it { position: relative; }
#examples-parallax {
	padding-top: 200px;
	height: 800px;
	margin-bottom: -600px;
	overflow: hidden;
}
#parallax-it {
	padding: 0;
	font-size: 80px;
	position: relative;
}

#parallax-it-left {
	position: relative;
	font-size: 120px;
	left: -160px;
	color: #C5C3DE;
	opacity: 0.5;
	-moz-opacity: 0.5;
	filter:alpha(opacity=5);
	overflow: hidden;
}

#parallax-it-right {
	position: relative;
	font-size: 160px;
	left: 80px;
	color: #C5C3DE;
	opacity: 0.25;
	-moz-opacity: 0.25;
	filter:alpha(opacity=2.5);
	overflow: hidden;
	width: 900px;
}

#showcase { padding: 60px 0; }
.gallery { width: 960px; margin: 0 auto; text-align: center; }
.gallery figure { text-align: center; float: left; margin: 10px; height: 270px; display: inline-block; }

#howtouse { padding-top: 200px; }

.divider { font-size: 14px; padding-top: 20px; }

.disclaimer {
	font-size: 18px;
	font-style: italic;
	font-weight: normal;
	margin: 0 auto;
}

#instructions { padding-top: 40px; }

#instructions p { margin: 0px auto 20px; }

#instructions-animation { padding-top: 40px; }

#instructions .documentation {
	font-size: 16px;
	text-align: left;
	width: 720px;
	margin: 10px auto 30px;
	padding: 20px 40px;
	text-shadow: none;
	border: solid 1px #69697A;
	color:#C5C3DE;
}

#instructions .param-list {
	font-size: 18px;
	line-height: 1.4;
	padding: 0 18px;
	margin: 1em 0 0;
}

#instructions .param-list-sub {
	padding-left: 36px;
	font-size: 15px;
}

#instructions .param-list li {
	font-weight: normal;
	padding-bottom: 20px;
	text-shadow: 0 2px 1px #000;
}
.param {
	font-style:italic;
}

.param-list small {
	display: block;
	font-weight: normal;
	font-style: italic;
}

#credits { padding: 80px 0; }

/* mobile demo */

.mobile-demo #fade-it {
	margin: 400px 0 500px 0;
}
.mobile-demo #examples-1 {
	margin-bottom: 200px;
}
.mobile-demo #instructions {
	width: 800px;
	text-align: left;
	margin: auto;
}
.mobile-demo ul {
	list-style: disc;
	color:#FFFFFF;
	margin: 20px 80px 100px 80px;
}
.mobile-demo #content-wrapper {
	margin-bottom: 100px;
	width: 100%;
}
.mobile-demo h2 {
	width: 90%;
}
.mobile-demo h3 {
	color:#C5C3DE;
}