cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <body>
	<div id="preloader" class="main-bg">
		<div id="loader"><i class="fa fa-cube"></i>
		</div>
	</div>
	<div class="container-fluid main-bg">
		<div class="row">
			<div class="col-xs-12">
				<p class="codepen-logo text-center"><i class="fa fa-cube"></i>
				</p>
				<h1 class="titulo text-center">ModalX</h1>
				<hr class="hr">
				<h2 class="sub-titulo text-center txt-destaque2"><i class="fa fa-check" style="color:#1AAB8A !important;"></i> Easy to Use&nbsp;&nbsp; <i class="fa fa-check" style="color:#1AAB8A !important;"></i> Animated &nbsp;&nbsp;<i class="fa fa-check" style="color:#1AAB8A !important;"></i> Light Weight (9kb) &nbsp;&nbsp;</h2>
				<div class="box">
					<nav>
						<ul class="list-unstyled list-inline text-center">
							<li>
								<a class="modalx-fastFade_open" href="#modalx-fastFade">
									<button class="botao-controle"><i class="fa fa-code"></i>&nbsp; Fast Fade &nbsp;<i class="fa fa-code"></i>
									</button>
								</a>
							</li>
							<li>
								<a class="modalx-slowFade_open" href="#modalx-slowFade">
									<button class="botao-controle"><i class="fa fa-code"></i>&nbsp; Slow Fade &nbsp;<i class="fa fa-code"></i>
									</button>
								</a>
							</li>
							<li>
								<a class="modalx-fadeOutUp_open" href="#modalx-fadeOutUp">
									<button class="botao-controle"><i class="fa fa-code"></i>&nbsp; Fade Out Up &nbsp;<i class="fa fa-code"></i>
									</button>
								</a>
							</li>
							<li>
								<a class="modalx-fadeScale_open" href="#modalx-fadeScale">
									<button class="botao-controle"><i class="fa fa-code"></i>&nbsp; Fade Scale &nbsp;<i class="fa fa-code"></i>
									</button>
								</a>
							</li>
						</ul>
						<br>
						<ul class="list-unstyled list-inline text-center">
							<li>
								<a class="modalx-slideHard_open" href="#modalx-slideHard">
									<button class="botao-controle"><i class="fa fa-code"></i>&nbsp; Slide Hard &nbsp;<i class="fa fa-code"></i>
									</button>
								</a>
							</li>
							<li>
								<a class="modalx-lightSpeed_open hidden" href="#modalx-lightSpeed">
									<button class="botao-controle"><i class="fa fa-code"></i>&nbsp; Light Speed &nbsp;<i class="fa fa-code"></i>
									</button>
								</a>
							</li>
							<li>
								<a class="modalx-slideDown_open" href="#modalx-slideDown">
									<button class="botao-controle"><i class="fa fa-code"></i>&nbsp; Slide Down &nbsp;<i class="fa fa-code"></i>
									</button>
								</a>
							</li>
							<li>
								<a class="modalx-slideUp_open" href="#modalx-slideUp">
									<button class="botao-controle"><i class="fa fa-code"></i>&nbsp; Slide Up &nbsp;<i class="fa fa-code"></i>
									</button>
								</a>
							</li>
						</ul>
						<br>
						<ul class="list-unstyled list-inline text-center">
							<li>
								<a class="modalx-rollIn_open" href="#modalx-rollIn">
									<button class="botao-controle"><i class="fa fa-code"></i>&nbsp; Roll In &nbsp;<i class="fa fa-code"></i>
									</button>
								</a>
							</li>
							<li>
								<a class="modalx-flipOut_open" href="#modalx-flipOut">
									<button class="botao-controle"><i class="fa fa-code"></i>&nbsp; Flip Out &nbsp;<i class="fa fa-code"></i>
									</button>
								</a>
							</li>
							<li>
								<a class="modalx-zoomIn_open" href="#modalx-zoomIn">
									<button class="botao-controle"><i class="fa fa-code"></i>&nbsp; Zoom In &nbsp;<i class="fa fa-code"></i>
									</button>
								</a>
							</li>
							<li>
								<a class="modalx-popBounce_open" href="#modalx-popBounce">
									<button class="botao-controle"><i class="fa fa-code"></i>&nbsp; Pop Bounce &nbsp;<i class="fa fa-code"></i>
									</button>
								</a>
							</li>
							<br>
							<li>
								<a class="modalx-howUse_open" href="#modalx-howUse">
									<button class="btn" data-toggle="tooltip" title="Working..." data-placement="bottom" data-trigger="hover"><i class="fa fa-cog"></i>
									</button>
								</a>
							</li>
						</ul>
					</nav>
				</div>
				<!-- fim box-->
			</div>
			<!-- fim col-->
		</div>
		<!-- fim row-->
	</div>
	<!-- fim container-->
	<!-- modalx rotate zoom -->
	<div id="modalx-howUse" class="body-modalx">
		<h3 class="text-center"><i class="fa fa-cube"></i><br><span class="txt-destaque1">ModalX</span></h3>
		<p class="box-howUse"><span class="codigo">
	<b>&#060;head><br></b>
	&nbsp;&#060;!-- jQuery --><br>
	&nbsp;&#060;script src="jquery-2.1.4.min.js">&#060;/script><br>
	&nbsp;&#060;!-- ModalX --><br>
    &nbsp;&#060;script src="jquery.modalx.min.js">&#060;/script><br>
    &nbsp;&#060;!-- CSS --><br>
	&nbsp;&#060;link rel="stylesheet" type="text/css" href="modalx.css"><br>
	<a target="_blank" href="https://www.bootstrapcdn.com/">***CDN Bootstrap</a><br>
    <b>&#060;/head><br><br></b>
</span>
		</p>
		<p class="box-howUse"><span class="codigo">
    <b>&#060;body><br></b>
	&#060;div id="modalx-popBounce" class="body-modalx"><br>

	&nbsp;&nbsp;&#060;h1 class="text-center">Modal Animated&#060;/h1><br>
	&nbsp;&nbsp;&nbsp;&#060;p>...&#060;/p><br>
	&nbsp;&nbsp;&nbsp;&#060;img src="..."><br>
	&nbsp;&#060;button class="modalx-popBounce_close btn-close-modalx pull-right">Fechar&nbsp;&#060;/button><br>
	&#060;/div><br><br>	
	<b>&#060;script></b><br>$(document).ready(function (){<br>
&nbsp;$('#modalx-popBounce').popup({<br>
&nbsp;pagecontainer: '.container',<br>
&nbsp;transition: 'all 0.6s',<br>
&nbsp;color: '#000',<br>
&nbsp;opacity: '0.5',<br>
&nbsp;opacity: '0.4',<br>
&nbsp;escape: true,});<br>
});<br><b>&#060;/script></b><br>
<b>&#060;/body><br><br></b>
</span>
		</p>
		<button class="modalx-howUse_close btn-close-modalx pull-right">Fechar&nbsp;<i class="fa fa-times-circle"></i>
		</button>
	</div>
	<script>
		$(document).ready(function () {
		
		    $('#modalx-howUse').popup({
		        pagecontainer: '.container',
		        transition: 'all 0.6s', 
		        backgroundactive: false,
		        background: true,
		        color: '#000',
		        opacity: '0.4',
		        escape: true,
		    });
		
		});
	</script>
	<!-- modalx rotate zoom -->
	<div id="modalx-slowFade" class="body-modalx">
		<h3 class="text-center"><i class="fa fa-cube"></i><br><span class="txt-destaque1">ModalX</span><hr></h3>
		<br />
		<iframe class="modalx-player" width="670" height="360" src="https://www.youtube.com/embed/ULwUzF1q5w4?enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowscriptaccess="always"></iframe>
    
    
		<button class="modalx-slowFade_close btn-close-modalx pull-right">Fechar&nbsp;<i class="fa fa-times-circle"></i>
		</button>
		<script>
			$('.btn-close-modalx').on('click', function() {
				$('.modalx-player')[0].contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*');    
			});
		</script>
	</div>
	<script>
		$(document).ready(function () {
		
		    $('#modalx-slowFade').popup({
		        pagecontainer: '.container',
		        transition: 'all 0.6s',
		        color: '#000',
		        escape: false,
		    });
		
		});
	</script>
	<!-- modalx rotate zoom -->
	<div id="modalx-fastFade" class="body-modalx">
		<h3 class="text-center"><i class="fa fa-cube"></i><br><span class="txt-destaque1">ModalX</span><hr></h3>
		<p class="txt-modalx">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, voluptatum labore facilis, aliquid corporis nam sequi tempore, quae harum pariatur quos blanditiis quibusdam tempora, eius! Maiores corrupti ipsa magnam quia!</p>
		<img src="https://pixabay.com/static/uploads/photo/2016/07/13/20/44/architecture-1515475_960_720.jpg" class="img-responsive img-thumbnail">
		<br>
		<button class="modalx-fastFade_close btn-close-modalx pull-right">Fechar<i class="fa fa-times-circle"></i>
		</button>
		<br>
		<br>
		<br>
	</div>
	<script>
		$(document).ready(function () {
		
		    $('#modalx-fastFade').popup({
		        pagecontainer: '.container',
		        transition: 'all 0.3s',
		        color: '#000'
		    });
		
		});
	</script>
	<!-- modalx rotate zoom -->
	<div id="modalx-popBounce" class="body-modalx">
		<h3 class="text-center"><i class="fa fa-cube"></i><br><span class="txt-destaque1">ModalX</span><hr></h3>
		<p class="txt-modalx">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, voluptatum labore facilis, aliquid corporis nam sequi tempore, quae harum pariatur quos blanditiis quibusdam tempora, eius! Maiores corrupti ipsa magnam quia!</p>
		<img src="https://pixabay.com/static/uploads/photo/2016/07/13/20/44/architecture-1515475_960_720.jpg" class="img-responsive img-thumbnail">
		<br>
		<button class="modalx-popBounce_close btn-close-modalx pull-right">Fechar<i class="fa fa-times-circle"></i>
		</button>
		<br>
		<br>
		<br>
	</div>
	<script>
		$(document).ready(function () {
		
		    $('#modalx-popBounce').popup({
		        pagecontainer: '.container',
		        transition: 'all 0.4s',
		        color: '#000'
		    });
		
		});
	</script>
	<!-- modalx rotate zoom -->
	<div id="modalx-zoomIn" class="body-modalx">
		<h3 class="text-center"><i class="fa fa-cube"></i><br><span class="txt-destaque1">ModalX</span><hr></h3>
		<p class="txt-modalx">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, voluptatum labore facilis, aliquid corporis nam sequi tempore, quae harum pariatur quos blanditiis quibusdam tempora, eius! Maiores corrupti ipsa magnam quia!</p>
		<img src="https://pixabay.com/static/uploads/photo/2016/03/22/00/49/gazanie-1271937_960_720.jpg" class="img-responsive img-thumbnail">
		<br>
		<button class="modalx-zoomIn_close btn-close-modalx pull-right">Fechar</button>
		<br>
		<br>
		<br>
	</div>
	<script>
		$(document).ready(function () {
		
		    $('#modalx-zoomIn').popup({
		        pagecontainer: '.container',
		        transition: 'all 0.5s',
		        color: '#000'
		    });
		
		});
	</script>
	<!-- modalx rotate zoom -->
	<div id="modalx-flipOut" class="body-modalx">
		<h3 class="text-center"><i class="fa fa-cube"></i><br><span class="txt-destaque1">ModalX</span><hr></h3>
		<p class="txt-modalx">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, voluptatum labore facilis, aliquid corporis nam sequi tempore, quae harum pariatur quos blanditiis quibusdam tempora, eius! Maiores corrupti ipsa magnam quia!</p>
		<img src="https://pixabay.com/static/uploads/photo/2016/05/01/12/58/egg-1364869_960_720.jpg" class="img-responsive img-thumbnail">
		<br>
		<button class="modalx-flipOut_close btn-close-modalx pull-right">Fechar&nbsp;<i class="fa fa-times-circle"></i>
		</button>
		<br>
		<br>
		<br>
	</div>
	<script>
		$(document).ready(function () {
		
		    $('#modalx-flipOut').popup({
		        pagecontainer: '.container',
		        transition: 'all 0.3s',
		        color: '#000'
		    });
		
		});
	</script>
	<!-- modalx fixed bottomRight -->
	<div id="modalx-fadeOutUp" class="body-modalx">
		<h3 class="text-center"><i class="fa fa-cube"></i><br><span class="txt-destaque1">ModalX</span><hr></h3>
		<p class="txt-modalx">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, voluptatum labore facilis, aliquid corporis nam sequi tempore, quae harum pariatur quos blanditiis quibusdam tempora, eius! Maiores corrupti ipsa magnam quia!</p>
		<img src="https://pixabay.com/static/uploads/photo/2016/06/03/12/42/popcorn-1433327_960_720.jpg" class="img-responsive img-thumbnail">
		<br>
		<button class="modalx-fadeOutUp_close btn-close-modalx pull-right">Fechar&nbsp;<i class="fa fa-times-circle"></i>
		</button>
		<br>
		<br>
		<br>
	</div>
	<script>
		$(document).ready(function () {
		
		    $('#modalx-fadeOutUp').popup({
		        pagecontainer: '.container',
		        transition: 'all 0.5s',
		    });
		
		});
	</script>
	<!-- modalx rollIn -->
	<div id="modalx-rollIn" class="body-modalx">
		<h3 class="text-center"><i class="fa fa-cube"></i><br><span class="txt-destaque1">ModalX</span><hr></h3>
		<p class="txt-modalx">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, voluptatum labore facilis, aliquid corporis nam sequi tempore, quae harum pariatur quos blanditiis quibusdam tempora, eius! Maiores corrupti ipsa magnam quia!</p>
		<img src="https://pixabay.com/static/uploads/photo/2016/05/01/01/47/turret-arch-1364314_960_720.jpg" class="img-responsive img-thumbnail">
		<br>
		<button class="modalx-rollIn_close btn-close-modalx pull-right">Fechar&nbsp;<i class="fa fa-times-circle"></i>
		</button>
		<br>
		<br>
		<br>
	</div>
	<script>
		$(document).ready(function () {
		
		    $('#modalx-rollIn').popup({
		        pagecontainer: '.container',
		        transition: 'all 0.5s',
		        color: '#000'
		    });
		
		});
	</script>
	<!-- modalx lightspeed-->
	<div id="modalx-lightSpeed" class="body-modalx">
		<h3 class="text-center"><i class="fa fa-cube"></i><br><span class="txt-destaque1">ModalX</span><hr></h3>
		<p class="txt-modalx">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, voluptatum labore facilis, aliquid corporis nam sequi tempore, quae harum pariatur quos blanditiis quibusdam tempora, eius! Maiores corrupti ipsa magnam quia!</p>
		<img src="https://pixabay.com/static/uploads/photo/2015/07/27/18/54/fruits-863072_960_720.jpg" class="img-responsive img-thumbnail">
		<br>
		<button class="modalx-lightSpeed_close btn-close-modalx pull-right">Fechar&nbsp;<i class="fa fa-times-circle"></i>
		</button>
		<br>
		<br>
		<br>
	</div>
	<script>
		$(document).ready(function () {
		
		    $('#modalx-lightSpeed').popup({
		        pagecontainer: '.container',
		        transition: 'all 0.5s',
		        background: true,
		        color: '#000',
		        opacity: '0.5',
		    });
		
		});
	</script>
	<!-- modalx lightspeed -->
	<div id="modalx-slideDown" class="body-modalx">
		<h3 class="text-center"><i class="fa fa-cube"></i><br><span class="txt-destaque1">ModalX</span><hr></h3>
		<p class="txt-modalx">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, voluptatum labore facilis, aliquid corporis nam sequi tempore, quae harum pariatur quos blanditiis quibusdam tempora, eius! Maiores corrupti ipsa magnam quia!</p>
		<img src="https://pixabay.com/static/uploads/photo/2016/06/10/16/32/potatoes-1448405_960_720.jpg" class="img-responsive img-thumbnail">
		<br>
		<button class="modalx-slideDown_close btn-close-modalx pull-right">Fechar&nbsp;<i class="fa fa-times-circle"></i>
		</button>
		<br>
		<br>
		<br>
	</div>
	<script>
		$(document).ready(function () {
		
		    $('#modalx-slideDown').popup({
		        pagecontainer: '.container',
		        transition: 'all 0.5s',
		        background: true,
		        color: '#000',
		        opacity: '0.5',
		    });
		
		});
	</script>
	<!-- modalx lightspeed -->
	<div id="modalx-slideUp" class="body-modalx">
		<h3 class="text-center"><i class="fa fa-cube"></i><br><span class="txt-destaque1">ModalX</span><hr></h3>
		<p class="txt-modalx">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, voluptatum labore facilis, aliquid corporis nam sequi tempore, quae harum pariatur quos blanditiis quibusdam tempora, eius! Maiores corrupti ipsa magnam quia!</p>
		<img src="https://pixabay.com/static/uploads/photo/2016/05/17/10/04/boy-1397818_960_720.jpg" class="img-responsive img-thumbnail">
		<br>
		<button class="modalx-slideUp_close btn-close-modalx pull-right">Fechar&nbsp;<i class="fa fa-times-circle"></i>
		</button>
		<br>
		<br>
		<br>
	</div>
	<script>
		$(document).ready(function () {
		
		    $('#modalx-slideUp').popup({
		        pagecontainer: '.container',
		        transition: 'all 0.5s',
		        background: true,
		        color: '#000',
		        opacity: '0.5',
		    });
		
		});
	</script>
	<!-- Fade & scale -->
	<div id="modalx-fadeScale" class="body-modalx">
		<h3 class="text-center"><i class="fa fa-cube"></i><br><span class="txt-destaque1">ModalX</span><hr></h3>
		<p class="txt-modalx">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, voluptatum labore facilis, aliquid corporis nam sequi tempore, quae harum pariatur quos blanditiis quibusdam tempora, eius! Maiores corrupti ipsa magnam quia!</p>
		<img src="https://pixabay.com/static/uploads/photo/2016/05/31/13/01/raspberries-1426859_960_720.jpg" class="img-responsive img-thumbnail">
		<br>
		<button class="modalx-fadeScale_close btn-close-modalx pull-right">Fechar&nbsp;<i class="fa fa-times-circle"></i>
		</button>
		<br>
		<br>
		<br>
	</div>
	<script>
		$(document).ready(function () {
		
		    $('#modalx-fadeScale').popup({
		        pagecontainer: '.container',
		        transition: 'all 0.3s'
		    });
		
		});
	</script>
	<!-- Fade & scale -->
	<div id="modalx-slideHard" class="body-modalx">
		<h3 class="text-center"><i class="fa fa-cube"></i><br><span class="txt-destaque1">ModalX</span><hr></h3>
		<p class="txt-modalx">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium, voluptatum labore facilis, aliquid corporis nam sequi tempore, quae harum pariatur quos blanditiis quibusdam tempora, eius! Maiores corrupti ipsa magnam quia!</p>
		<img src="https://pixabay.com/static/uploads/photo/2016/04/02/20/54/valley-of-fire-1303617_960_720.jpg" class="img-responsive img-thumbnail">
		<br>
		<button class="modalx-slideHard_close btn-close-modalx pull-right">Fechar&nbsp;<i class="fa fa-times-circle"></i>
		</button>
		<br>
		<br>
		<br>
	</div>
	<script>
		$(document).ready(function () {
		
		    $('#modalx-slideHard').popup({
		        pagecontainer: '.container',
		        transition: 'all 0.7s'
		    });
		
		});
	</script>
	<footer>
		<div class="container-fluid">
			<div class="row">
				<div class="col-xs-12 footer">
					<div class="foto">
						<a href="https://www.facebook.com/christopher.bicudo" target="_blank">
							<img src="https://scontent.frao1-1.fna.fbcdn.net/v/t1.0-9/534501_166407540165933_169013040_n.jpg?oh=11e8c7631c98fcf85c2add517c91ef41&oe=57E30862" class="img-responsive">
						</a>
					</div>
					<h4 class="text-center h4-footer">Thanks For Viewing!</h4>
				</div>
			</div>
		</div>
	</footer>
</body>


            
          
!
            
              @charset "utf-8";

@import url(https://fonts.googleapis.com/css?family=Ubuntu);
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000
}
#loader {
	display: block;
	position: relative;
	left: 50%;
	top: 50%;
	width: 100px;
	height: 100px;
	margin: -75px 0 0 -75px;
	z-index: 1500
}
#loader i {
	position: absolute;
	left: 20%;
	top: 26%;
	font-size: 100px;
	color: #B22222 !important
}
.btn {
	border-radius: 100px !important;
	transition: 0.4s;
	border: 1px solid rgba (0, 0, 0, 0)!important;
	outline: none !important;
	color: #fff !important;
	font-size: 20px !important;
	background-color: #B22222 !important
}
.btn:focus,
.btn:active,
.btn:visited,
{
	outline: none !important;
	border: 1px rgba (0, 0, 0, 0) !important;
	box-shadow: none !important;
	color: #fff !important
}
.btn:hover {
	background-color: #B22222 !important;
	color: #fff !important
}
.btn:hover i {
	-webkit-animation: rodar 3s infinite linear
}
@-webkit-keyframes rodar {
	0% {
		-webkit-transform: rotate(0deg)
	}
	100% {
		-webkit-transform: rotate(360deg)
	}
}
.tooltip-inner {
	background-color: #B22222 !important;
	color: #fff;
	font-family: 'Ubuntu', sans-serif;
	font-size: 13px
}
.tooltip.top .tooltip-arrow {
	border-top-color: #B22222 !important
}
.tooltip.right .tooltip-arrow {
	border-right-color: #B22222 !important
}
.tooltip.bottom .tooltip-arrow {
	border-bottom-color: #B22222 !important
}
.tooltip.left .tooltip-arrow {
	border-left-color: #B22222 !important
}
body {
	overflow-x: hidden !important;
	overflow-y: hidden
}
::-webkit-scrollbar {
	width: 7px
}
::-webkit-scrollbar-track {
	background-color: #eee;
	border-radius: 0px
}
::-webkit-scrollbar-track-piece {
	opacity: 1
}
::-webkit-scrollbar-thumb {
	border-radius: 0px;
	background-color: #aaa
}
::-moz-selection {
	color: #fff;
	background: #1AAB8A
}
::selection {
	color: #fff;
	background: #1AAB8A
}
.hr {
	width: 50% !important;
	border: 1px solid #fff !important
}
.main-bg {
	background: rgba(241, 231, 103, 1);
	background: -moz-radial-gradient(center, ellipse cover, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(241, 231, 103, 1)), color-stop(100%, rgba(254, 182, 69, 1)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
	background: -o-radial-gradient(center, ellipse cover, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
	background: radial-gradient(ellipse at center, rgba(241, 231, 103, 1) 0%, rgba(254, 182, 69, 1) 100%);
	filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f1e767', endColorstr='#feb645', GradientType=1)
}
.codepen-logo {
	font-size: 70px;
	color: #B22222;
	transition: 0.4s;
	cursor: pointer;
	margin-top: 70px
}
.codepen-logo:hover {
	transform: scale(1.1) translateY(-15px);
	color: #000
}
.box {
	max-width: 70%;
	margin: 60px auto;
	padding-top: 65px;
	padding-bottom: 30px;
	transition: 0.3s ease;
	border-radius: 3px
}
.titulo {
	font-family: 'Ubuntu', sans-serif;
	font-size: 60px;
	color: #fff;
	font-weight: bold;
	text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.6)
}
.sub-titulo {
	font-family: 'Ubuntu', sans-serif;
	font-size: 30px;
	color: #fff
}
.txt-modalx {
	font-family: 'Ubuntu', sans-serif;
	padding: 0 15px 0 15px
}
.txt-destaque1 {
	font-weight: 800;
	color: #B22222;
	font-family: 'Ubuntu', sans-serif
}
.txt-destaque2 {
	font-weight: 800;
	color: #fff;
	font-size: 23px;
	font-family: 'Ubuntu', sans-serif;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7)
}
.box-howUse {
	border-radius: 4px;
	border: 1px solid #ccc;
	padding: 10px 0 0 10px;
	background-color: #eee
}
.codigo {
	font-size: 11pt;
	color: #c7254e;
	font-family: Menlo, Monaco, Consolas, "Courier New", monospace
}
.footer {
	background-color: #1AAB8A;
	padding: 0 0 50px 0;
	border-top: 2px solid #fff
}
.foto {
	width: 50px;
	margin: 0 auto;
	position: relative;
	top: 30px;
	overflow: hidden;
	border-radius: 5px;
	-webkit-transition: 0.3s;
	transition: 0.3s
}
.foto:hover {
	transform: scale(1.1)
}
.foto img {
	width: 100px
}
.h4-footer {
	color: #fff;
	position: relative;
	top: 50px;
	font-family: 'Ubuntu', sans-serif;
	cursor: default;
	padding-bottom: 50px
}
.col-xs-12:hover .h4-footer {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-duration: 1.5s;
	animation-duration: 1.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: pular;
	animation-name: pular
}
@keyframes pular {
	from {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
	50% {
		-webkit-transform: scale(1.1);
		transform: scale(1.1)
	}
	to {
		-webkit-transform: scale(1);
		transform: scale(1)
	}
}
.botao-controle {
	background: #1AAB8A;
	color: #fff;
	border: none;
	position: relative;
	height: 40px;
	margin-right: 0px;
	font-size: 18px;
	padding: 0 1em;
	cursor: pointer;
	transition: 800ms ease all;
	outline: none;
	transform: translateY(-30px);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4)
}
.botao-controle:hover {
	background: #fff;
	color: #1AAB8A;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0);
	transform: translateY(-33px)
}
.botao-controle:before,
.botao-controle:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	height: 2px;
	width: 0;
	background: #1AAB8A;
	transition: 200ms ease all
}
.botao-controle:after {
	right: inherit;
	top: inherit;
	left: 0;
	bottom: 0
}
.botao-controle:hover:before,
.botao-controle:hover:after {
	width: 100%;
	transition: 400ms ease all
}
.body-modalx {
	max-width: 700px;
	background-color: rgba(255, 255, 255, 0.95);
	padding: 15px 15px 15px 15px;
	border-radius: 2px;
	-webkit-box-shadow: 0px 0px 25px 6px rgba(0, 0, 0, 0.32);
	-moz-box-shadow: 0px 0px 25px 6px rgba(0, 0, 0, 0.32);
	box-shadow: 0px 0px 25px 6px rgba(0, 0, 0, 0.32)
}
.btn-close-modalx {
	background-color: #1AAB8A;
	color: #fff;
	font-size: 16px;
	font-family: 'Ubuntu', sans-serif;
	border: none;
	outline: none;
	padding: 7px;
	letter-spacing: 2px;
	border-radius: 2px;
	transition: 0.3s;
	margin-top: 14px
}
.btn-close-modalx:hover {
	-webkit-transform: translateY(-3px);
	-ms-transform: translateY(-3px);
	transform: translateY(-3px);
	box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2)
}
#modalx-fastFade {
	-webkit-animation-name: fade-Out;
	animation-name: fade-Out;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes fade-Out {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0
	}
}
@keyframes fade-Out {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0
	}
}
.popup_visible #modalx-fastFade {
	-webkit-animation-name: fastFade;
	animation-name: fastFade;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes fastFade {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}
@keyframes fastFade {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}
/*/*/

/**/

#modalx-fadeScale {
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0)
}
.popup_visible #modalx-fadeScale {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1)
}
/*/*/

/**/

#modalx-fadeOutUp {
	-webkit-animation-name: fadeOutUpBig;
	animation-name: fadeOutUpBig;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes fadeOutUpBig {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, -2000px, 0);
		transform: translate3d(0, -2000px, 0)
	}
}
@keyframes fadeOutUpBig {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, -2000px, 0);
		transform: translate3d(0, -2000px, 0)
	}
}
.popup_visible #modalx-fadeOutUp {
	-webkit-animation-name: fadeInUpBig;
	animation-name: fadeInUpBig;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes fadeInUpBig {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 2000px, 0);
		transform: translate3d(0, 2000px, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}
@keyframes fadeInUpBig {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 2000px, 0);
		transform: translate3d(0, 2000px, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}
/*/*/

/**/

#modalx-slowFade {
	-webkit-animation-name: fastFadeOut;
	animation-name: fastFadeOut;
	-webkit-animation-duration: 0.6s;
	animation-duration: 0.6s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes fastFadeOut {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0
	}
}
@keyframes fastFadeOut {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0
	}
}
.popup_visible #modalx-slowFade {
	-webkit-animation-name: fastFade;
	animation-name: fastFade;
	-webkit-animation-duration: 0.9s;
	animation-duration: 0.9s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes fastFade {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}
@keyframes fastFade {
	0% {
		opacity: 0
	}
	100% {
		opacity: 1
	}
}
}
/*/*/

/**/

#modalx-lightSpeed {
	-webkit-animation-name: lightSpeedOut;
	animation-name: lightSpeedOut;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
0%,
60%,
75%,
90%,
100% {
	-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
}
@-webkit-keyframes lightSpeedOut {
	20% {
		opacity: 1;
		-webkit-transform: translate3d(-20px, 0, 0);
		transform: translate3d(-20px, 0, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(2000px, 0, 0);
		transform: translate3d(2000px, 0, 0)
	}
}
@keyframes lightSpeedOut {
	20% {
		opacity: 1;
		-webkit-transform: translate3d(-20px, 0, 0);
		transform: translate3d(-20px, 0, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(2000px, 0, 0);
		transform: translate3d(2000px, 0, 0)
	}
}
.popup_visible #modalx-lightSpeed {
	-webkit-animation-name: bounceInLeft;
	animation-name: bounceInLeft;
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes bounceInLeft {
	0%, 60%, 75%, 90%, 100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
	}
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-3000px, 0, 0);
		transform: translate3d(-3000px, 0, 0)
	}
	60% {
		opacity: 1;
		-webkit-transform: translate3d(25px, 0, 0);
		transform: translate3d(25px, 0, 0)
	}
	75% {
		-webkit-transform: translate3d(-10px, 0, 0);
		transform: translate3d(-10px, 0, 0)
	}
	90% {
		-webkit-transform: translate3d(5px, 0, 0);
		transform: translate3d(5px, 0, 0)
	}
	100% {
		-webkit-transform: none;
		transform: none
	}
}
@keyframes bounceInLeft {
	0%,
	60%,
	75%,
	90%,
	100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
	}
	0% {
		opacity: 0;
		-webkit-transform: translate3d(-3000px, 0, 0);
		transform: translate3d(-3000px, 0, 0)
	}
	60% {
		opacity: 1;
		-webkit-transform: translate3d(25px, 0, 0);
		transform: translate3d(25px, 0, 0)
	}
	75% {
		-webkit-transform: translate3d(-10px, 0, 0);
		transform: translate3d(-10px, 0, 0)
	}
	90% {
		-webkit-transform: translate3d(5px, 0, 0);
		transform: translate3d(5px, 0, 0)
	}
	100% {
		-webkit-transform: none;
		transform: none
	}
}
/*/*/

/**/

#modalx-slideDown {
	-webkit-animation-name: bounceOut;
	animation-name: bounceOut;
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
	-webkit-animation-duration: 0.7s;
	animation-duration: 0.7s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes bounceOut {
	20% {
		-webkit-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9)
	}
	50%,
	55% {
		opacity: 1;
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1)
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}
}
@keyframes bounceOut {
	20% {
		-webkit-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9)
	}
	50%,
	55% {
		opacity: 1;
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1)
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}
}
.popup_visible #modalx-slideDown {
	-webkit-animation-name: slideInDown;
	animation-name: slideInDown;
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes slideInDown {
	0% {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
		visibility: visible
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}
@keyframes slideInDown {
	0% {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
		visibility: visible
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0)
	}
}
/*/*/

/**/

#modalx-slideUp {
	-webkit-animation-name: bounceOut;
	animation-name: bounceOut;
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
	-webkit-animation-duration: 0.7s;
	animation-duration: 0.7s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes bounceOut {
	20% {
		-webkit-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9)
	}
	50%,
	55% {
		opacity: 1;
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1)
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}
}
@keyframes bounceOut {
	20% {
		-webkit-transform: scale3d(.9, .9, .9);
		transform: scale3d(.9, .9, .9)
	}
	50%,
	55% {
		opacity: 1;
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1)
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3)
	}
}
.popup_visible #modalx-slideUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}
@keyframes fadeInUp {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
		transform: translate3d(0, 100%, 0)
	}
	100% {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}
/*/*/

/**/

#modalx-flipOut {
	-webkit-animation-name: flipOutX;
	animation-name: flipOutX;
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes flipOutX {
	0% {
		-webkit-transform: perspective(900px);
		transform: perspective(900px)
	}
	30% {
		-webkit-transform: perspective(900px) rotate3d(1, 0, 0, -20deg);
		transform: perspective(900px) rotate3d(1, 0, 0, -20deg);
		opacity: 1
	}
	100% {
		-webkit-transform: perspective(900px) rotate3d(1, 0, 0, 90deg);
		transform: perspective(900px) rotate3d(1, 0, 0, 90deg);
		opacity: 0
	}
}
@keyframes flipOutX {
	0% {
		-webkit-transform: perspective(900px);
		transform: perspective(900px)
	}
	30% {
		-webkit-transform: perspective(900px) rotate3d(1, 0, 0, -20deg);
		transform: perspective(900px) rotate3d(1, 0, 0, -20deg);
		opacity: 1
	}
	100% {
		-webkit-transform: perspective(900px) rotate3d(1, 0, 0, 90deg);
		transform: perspective(900px) rotate3d(1, 0, 0, 90deg);
		opacity: 0
	}
}
.popup_visible #modalx-flipOut {
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	-webkit-animation-name: flipInY;
	animation-name: flipInY;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes flipInY {
	0% {
		-webkit-transform: perspective(1200px) rotate3d(0, 1, 0, 180deg);
		transform: perspective(1200px) rotate3d(0, 1, 0, 180deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in;
		opacity: 0
	}
	40% {
		-webkit-transform: perspective(1200px) rotate3d(0, 1, 0, -20deg);
		transform: perspective(1200px) rotate3d(0, 1, 0, -20deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in
	}
	60% {
		-webkit-transform: perspective(1200px) rotate3d(0, 1, 0, 10deg);
		transform: perspective(1200px) rotate3d(0, 1, 0, 10deg);
		opacity: 1
	}
	80% {
		-webkit-transform: perspective(1200px) rotate3d(0, 1, 0, -5deg);
		transform: perspective(1200px) rotate3d(0, 1, 0, -5deg)
	}
	100% {
		-webkit-transform: perspective(1200px);
		transform: perspective(1200px)
	}
}
@keyframes flipInY {
	0% {
		-webkit-transform: perspective(1200px) rotate3d(0, 1, 0, 180deg);
		transform: perspective(1200px) rotate3d(0, 1, 0, 180deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in;
		opacity: 0
	}
	40% {
		-webkit-transform: perspective(1200px) rotate3d(0, 1, 0, -20deg);
		transform: perspective(1200px) rotate3d(0, 1, 0, -20deg);
		-webkit-transition-timing-function: ease-in;
		transition-timing-function: ease-in
	}
	60% {
		-webkit-transform: perspective(1200px) rotate3d(0, 1, 0, 10deg);
		transform: perspective(1200px) rotate3d(0, 1, 0, 10deg);
		opacity: 1
	}
	80% {
		-webkit-transform: perspective(1200px) rotate3d(0, 1, 0, -5deg);
		transform: perspective(1200px) rotate3d(0, 1, 0, -5deg)
	}
	100% {
		-webkit-transform: perspective(1200px);
		transform: perspective(1200px)
	}
}
/*/*/

/**/

#modalx-zoomIn {
	-webkit-animation-name: bounceOutDown;
	animation-name: bounceOutDown;
	-webkit-animation-duration: 0.9s;
	animation-duration: 0.9s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes bounceOutDown {
	20% {
		-webkit-transform: translate3d(0, 10px, 0);
		transform: translate3d(0, 10px, 0)
	}
	40%,
	45% {
		opacity: 1;
		-webkit-transform: translate3d(0, -20px, 0);
		transform: translate3d(0, -20px, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 2000px, 0);
		transform: translate3d(0, 2000px, 0)
	}
}
@keyframes bounceOutDown {
	20% {
		-webkit-transform: translate3d(0, 10px, 0);
		transform: translate3d(0, 10px, 0)
	}
	40%,
	45% {
		opacity: 1;
		-webkit-transform: translate3d(0, -20px, 0);
		transform: translate3d(0, -20px, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 2000px, 0);
		transform: translate3d(0, 2000px, 0)
	}
}
.popup_visible #modalx-zoomIn {
	-webkit-animation-name: zoomInDown;
	animation-name: zoomInDown;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes zoomInDown {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
		transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
	}
	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
	}
}
@keyframes zoomInDown {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
		transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
		animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190)
	}
	60% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
	}
}
/*/*/

/**/

#modalx-slideHard {
	-webkit-animation-name: zoomOutDown;
	animation-name: zoomOutDown;
	-webkit-animation-duration: 0.7s;
	animation-duration: 0.7s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes zoomOutDown {
	40% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.950, 0.555, 0.675, 0.190);
		animation-timing-function: cubic-bezier(0.950, 0.555, 0.675, 0.190)
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
		transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
		-webkit-transform-origin: center bottom;
		transform-origin: center bottom;
		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
	}
}
@keyframes zoomOutDown {
	40% {
		opacity: 1;
		-webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
		-webkit-animation-timing-function: cubic-bezier(0.950, 0.055, 0.675, 0.190);
		animation-timing-function: cubic-bezier(0.950, 0.055, 0.675, 0.190)
	}
	100% {
		opacity: 0;
		-webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
		transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
		-webkit-transform-origin: center bottom;
		transform-origin: center bottom;
		-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
		animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1)
	}
}
.popup_visible #modalx-slideHard {
	-webkit-animation-name: bounceInDown;
	animation-name: bounceInDown;
	-webkit-animation-duration: 0.6s;
	animation-duration: 0.6s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes bounceInDown {
	0%, 60%, 75%, 90%, 100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
	}
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0)
	}
	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 15px, 0);
		transform: translate3d(0, 15px, 0)
	}
	75% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0)
	}
	90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0)
	}
	100% {
		-webkit-transform: none;
		transform: none
	}
}
@keyframes bounceInDown {
	0%,
	60%,
	75%,
	90%,
	100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
	}
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0)
	}
	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 15px, 0);
		transform: translate3d(0, 15px, 0)
	}
	75% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0)
	}
	90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0)
	}
	100% {
		-webkit-transform: none;
		transform: none
	}
}
/*/*/

/**/

#modalx-rollIn {
	-webkit-animation-name: fadeOutRightBig;
	animation-name: fadeOutRightBig;
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes fadeOutRightBig {
	from {
		opacity: 1
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 220deg);
		transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 220deg)
	}
}
@keyframes fadeOutRightBig {
	from {
		opacity: 1
	}
	to {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 220deg);
		transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 220deg)
	}
}
.popup_visible #modalx-rollIn {
	-webkit-animation-name: rollIn;
	animation-name: rollIn;
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes rollIn {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -220deg);
		transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -220deg)
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}
@keyframes rollIn {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -220deg);
		transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -220deg)
	}
	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}
/*/*/

/**/

#modalx-popBounce {
	-webkit-animation-name: popBounceOffSet;
	animation-name: popBounceOffSet;
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
0%,
60%,
75%,
90%,
100% {
	-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
}
@-webkit-keyframes popBounceOffSet {
	20% {
		opacity: 1;
		-webkit-transform: translate3d(-20px, 0, 0);
		transform: translate3d(-20px, 0, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(2000px, 0, 0);
		transform: translate3d(2000px, 0, 0)
	}
}
@keyframes popBounceOffSet {
	20% {
		opacity: 1;
		-webkit-transform: translate3d(-20px, 0, 0);
		transform: translate3d(-20px, 0, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(2000px, 0, 0);
		transform: translate3d(2000px, 0, 0)
	}
}
.popup_visible #modalx-popBounce {
	-webkit-animation-name: popBounceOut;
	animation-name: popBounceOut;
	-webkit-animation-duration: 0.6s;
	animation-duration: 0.6s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes popBounceOut {
	0%, 60%, 75%, 90%, 100% {
		-webkit-transition-timing-function: cubic-bezier(0.115, 0.610, 0.055, 1.000);
		transition-timing-function: cubic-bezier(0.115, 0.610, 0.055, 1.000)
	}
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0)
	}
	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0)
	}
	75% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0)
	}
	90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0)
	}
	100% {
		-webkit-transform: none;
		transform: none
	}
}
@keyframes popBounceOut {
	0%,
	60%,
	75%,
	90%,
	100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
	}
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0)
	}
	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0)
	}
	75% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0)
	}
	90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0)
	}
	100% {
		-webkit-transform: none;
		transform: none
	}
}
/*/*/

/**/

#modalx-howUse {
	-webkit-animation-name: howUseOut;
	animation-name: howUseOut;
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
0%,
60%,
75%,
90%,
100% {
	-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
	transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
}
@-webkit-keyframes howUseOut {
	20% {
		opacity: 1;
		-webkit-transform: translate3d(-20px, 0, 0);
		transform: translate3d(-20px, 0, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(2000px, 0, 0);
		transform: translate3d(2000px, 0, 0)
	}
}
@keyframes howUseOut {
	20% {
		opacity: 1;
		-webkit-transform: translate3d(-20px, 0, 0);
		transform: translate3d(-20px, 0, 0)
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(2000px, 0, 0);
		transform: translate3d(2000px, 0, 0)
	}
}
.popup_visible #modalx-howUse {
	-webkit-animation-name: howUseIn;
	animation-name: howUseIn;
	-webkit-animation-duration: 0.6s;
	animation-duration: 0.6s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both
}
@-webkit-keyframes howUseIn {
	0%, 60%, 75%, 90%, 100% {
		-webkit-transition-timing-function: cubic-bezier(0.115, 0.610, 0.055, 1.000);
		transition-timing-function: cubic-bezier(0.115, 0.610, 0.055, 1.000)
	}
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0)
	}
	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0)
	}
	75% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0)
	}
	90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0)
	}
	100% {
		-webkit-transform: none;
		transform: none
	}
}
@keyframes howUseIn {
	0%,
	60%,
	75%,
	90%,
	100% {
		-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
		transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000)
	}
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0, -3000px, 0);
		transform: translate3d(0, -3000px, 0)
	}
	60% {
		opacity: 1;
		-webkit-transform: translate3d(0, 25px, 0);
		transform: translate3d(0, 25px, 0)
	}
	75% {
		-webkit-transform: translate3d(0, -10px, 0);
		transform: translate3d(0, -10px, 0)
	}
	90% {
		-webkit-transform: translate3d(0, 5px, 0);
		transform: translate3d(0, 5px, 0)
	}
	100% {
		-webkit-transform: none;
		transform: none
	}
}
/*/*/
            
          
!
            
              //PRELOADER
setTimeout(function(){$("#preloader").fadeOut("slow"),$("body").delay(700).css({"overflow-y":"visible"})},2000);

//TOOLTIP BOOTSTRAP
$(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip()}),
  
// modalx.min.js
    function(t) {
        var e, i, o = t(window),
            n = {},
            a = [],
            s = [],
            p = null,
            d = "_open",
            l = "_close",
            c = [],
            r = null,
            u = /(iPad|iPhone|iPod)/g.test(navigator.userAgent),
            f = "a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]",
            h = {
                _init: function(e) {
                    var i = t(e),
                        o = i.data("popupoptions");
                    s[e.id] = !1, a[e.id] = 0, i.data("popup-initialized") || (i.attr("data-popup-initialized", "true"), h._initonce(e)), o.autoopen && setTimeout(function() {
                        h.show(e, 0)
                    }, 0)
                },
                _initonce: function(i) {
                    var o, n, a = t(i),
                        s = t("body"),
                        l = a.data("popupoptions");
                    if (p = parseInt(s.css("margin-right"), 10), r = void 0 !== document.body.style.webkitTransition || void 0 !== document.body.style.MozTransition || void 0 !== document.body.style.msTransition || void 0 !== document.body.style.OTransition || void 0 !== document.body.style.transition, l.backgroundactive && (l.background = !1, l.blur = !1, l.scrolllock = !1), l.scrolllock) {
                        var c, f;
                        "undefined" == typeof e && (c = t('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo("body"), f = c.children(), e = f.innerWidth() - f.height(99).innerWidth(), c.remove())
                    }
                    if (a.attr("id") || a.attr("id", "j-popup-" + parseInt(1e8 * Math.random(), 10)), a.addClass("popup_content"), l.background && !t("#" + i.id + "_background").length) {
                        s.append('<div id="' + i.id + '_background" class="popup_background"></div>');
                        var b = t("#" + i.id + "_background");
                        b.css({
                            opacity: 0,
                            visibility: "hidden",
                            backgroundColor: l.color,
                            position: "fixed",
                            top: 0,
                            right: 0,
                            bottom: 0,
                            left: 0
                        }), l.setzindex && !l.autozindex && b.css("z-index", "100000"), l.transition && b.css("transition", l.transition)
                    }
                    s.append(i), a.wrap('<div id="' + i.id + '_wrapper" class="popup_wrapper" />'), o = t("#" + i.id + "_wrapper"), o.css({
                        opacity: 0,
                        visibility: "hidden",
                        position: "absolute"
                    }), u && o.css("cursor", "pointer"), "overlay" == l.type && o.css("overflow", "auto"), a.css({
                        opacity: 0,
                        visibility: "hidden",
                        display: "inline-block"
                    }), l.setzindex && !l.autozindex && o.css("z-index", "100001"), l.outline || a.css("outline", "none"), l.transition && (a.css("transition", l.transition), o.css("transition", l.transition)), a.attr("aria-hidden", !0), "overlay" == l.type && (a.css({
                        textAlign: "left",
                        position: "relative",
                        verticalAlign: "middle"
                    }), n = {
                        position: "fixed",
                        width: "100%",
                        height: "100%",
                        top: 0,
                        left: 0,
                        textAlign: "center"
                    }, l.backgroundactive && (n.position = "absolute", n.height = "0", n.overflow = "visible"), o.css(n), o.append('<div class="popup_align" />'), t(".popup_align").css({
                        display: "inline-block",
                        verticalAlign: "middle",
                        height: "100%"
                    })), a.attr("role", "dialog");
                    var v = l.openelement ? l.openelement : "." + i.id + d;
                    t(v).each(function(e, i) {
                        t(i).attr("data-popup-ordinal", e), i.id || t(i).attr("id", "open_" + parseInt(1e8 * Math.random(), 10))
                    }), a.attr("aria-labelledby") || a.attr("aria-label") || a.attr("aria-labelledby", t(v).attr("id")), "hover" == l.action ? (l.keepfocus = !1, t(v).on("mouseenter", function(e) {
                        h.show(i, t(this).data("popup-ordinal"))
                    }), t(v).on("mouseleave", function(t) {
                        h.hide(i)
                    })) : t(document).on("click", v, function(e) {
                        e.preventDefault();
                        var o = t(this).data("popup-ordinal");
                        setTimeout(function() {
                            h.show(i, o)
                        }, 0)
                    }), l.closebutton && h.addclosebutton(i), l.detach ? a.hide().detach() : o.hide()
                },
                show: function(n, d) {
                    var u = t(n);
                    if (!u.data("popup-visible")) {
                        u.data("popup-initialized") || h._init(n), u.attr("data-popup-initialized", "true");
                        var f = t("body"),
                            v = u.data("popupoptions"),
                            g = t("#" + n.id + "_wrapper"),
                            m = t("#" + n.id + "_background");
                        if (b(n, d, v.beforeopen), s[n.id] = d, setTimeout(function() {
                                c.push(n.id)
                            }, 0), v.autozindex) {
                            for (var y = document.getElementsByTagName("*"), _ = y.length, k = 0, w = 0; _ > w; w++) {
                                var x = t(y[w]).css("z-index");
                                "auto" !== x && (x = parseInt(x, 10), x > k && (k = x))
                            }
                            a[n.id] = k, v.background && a[n.id] > 0 && t("#" + n.id + "_background").css({
                                zIndex: a[n.id] + 1
                            }), a[n.id] > 0 && g.css({
                                zIndex: a[n.id] + 2
                            })
                        }
                        v.detach ? (g.prepend(n), u.show()) : g.show(), i = setTimeout(function() {
                            g.css({
                                visibility: "visible",
                                opacity: 1
                            }), t("html").addClass("popup_visible").addClass("popup_visible_" + n.id), g.addClass("popup_wrapper_visible")
                        }, 20), v.scrolllock && (f.css("overflow", "hidden"), f.height() > o.height() && f.css("margin-right", p + e)), v.backgroundactive && u.css({
                            top: (o.height() - (u.get(0).offsetHeight + parseInt(u.css("margin-top"), 10) + parseInt(u.css("margin-bottom"), 10))) / 2 + "px"
                        }), u.css({
                            visibility: "visible",
                            opacity: 1
                        }), v.background && (m.css({
                            visibility: "visible",
                            opacity: v.opacity
                        }), setTimeout(function() {
                            m.css({
                                opacity: v.opacity
                            })
                        }, 0)), u.data("popup-visible", !0), h.reposition(n, d), u.data("focusedelementbeforepopup", document.activeElement), v.keepfocus && (u.attr("tabindex", -1), setTimeout(function() {
                            "closebutton" === v.focuselement ? t("#" + n.id + " ." + n.id + l + ":first").focus() : v.focuselement ? t(v.focuselement).focus() : u.focus()
                        }, v.focusdelay)), t(v.pagecontainer).attr("aria-hidden", !0), u.attr("aria-hidden", !1), b(n, d, v.onopen), r ? g.one("transitionend", function() {
                            b(n, d, v.opentransitionend)
                        }) : b(n, d, v.opentransitionend)
                    }
                },
                hide: function(e, o) {
                    var n = t.inArray(e.id, c);
                    if (-1 !== n) {
                        i && clearTimeout(i);
                        var a = t("body"),
                            d = t(e),
                            l = d.data("popupoptions"),
                            u = t("#" + e.id + "_wrapper"),
                            f = t("#" + e.id + "_background");
                        d.data("popup-visible", !1), 1 === c.length ? t("html").removeClass("popup_visible").removeClass("popup_visible_" + e.id) : t("html").hasClass("popup_visible_" + e.id) && t("html").removeClass("popup_visible_" + e.id), c.splice(n, 1), u.hasClass("popup_wrapper_visible") && u.removeClass("popup_wrapper_visible"), l.keepfocus && !o && setTimeout(function() {
                            t(d.data("focusedelementbeforepopup")).is(":visible") && d.data("focusedelementbeforepopup").focus()
                        }, 0), setTimeout(function() {
                            u.css({
                                visibility: "hidden",
                                opacity: 0
                            }), d.css({
                                visibility: "hidden",
                                opacity: 0
                            }), l.background && f.css({
                                visibility: "hidden",
                                opacity: 0
                            })
                        }, 300), t(l.pagecontainer).attr("aria-hidden", !1), d.attr("aria-hidden", !0), b(e, s[e.id], l.onclose), r && "0s" !== d.css("transition-duration") ? d.one("transitionend", function(t) {
                            d.data("popup-visible") || (l.detach ? d.hide().detach() : u.hide()), l.scrolllock && setTimeout(function() {
                                a.css({
                                    overflow: "visible",
                                    "margin-right": p
                                })
                            }, 10), b(e, s[e.id], l.closetransitionend)
                        }) : (l.detach ? d.hide().detach() : u.hide(), l.scrolllock && setTimeout(function() {
                            a.css({
                                overflow: "visible",
                                "margin-right": p
                            })
                        }, 10), b(e, s[e.id], l.closetransitionend))
                    }
                },
                toggle: function(e, i) {
                    t(e).data("popup-visible") ? h.hide(e) : setTimeout(function() {
                        h.show(e, i)
                    }, 0)
                },
                reposition: function(e, i) {
                    var o = t(e),
                        n = o.data("popupoptions"),
                        a = t("#" + e.id + "_wrapper");
                    t("#" + e.id + "_background");
                    i = i || 0, "overlay" == n.type && (n.horizontal ? a.css("text-align", n.horizontal) : a.css("text-align", "center"), n.vertical ? o.css("vertical-align", n.vertical) : o.css("vertical-align", "middle"))
                },
                addclosebutton: function(e) {
                    var i;
                    i = t(e).data("popupoptions").closebuttonmarkup ? t(n.closebuttonmarkup).addClass(e.id + "_close") : '<button class="popup_close ' + e.id + '_close" title="Close" aria-label="Close"><span aria-hidden="true">×</span></button>', t(e).data("popup-initialized") && t(e).append(i)
                }
            },
            b = function(e, i, o) {
                var n = t(e).data("popupoptions"),
                    a = n.openelement ? n.openelement : "." + e.id + d,
                    s = t(a + '[data-popup-ordinal="' + i + '"]');
                "function" == typeof o && o.call(t(e), e, s)
            };
        t(document).on("keydown", function(e) {
            if (c.length) {
                var i = c[c.length - 1],
                    o = document.getElementById(i);
                t(o).data("popupoptions").escape && 27 == e.keyCode && h.hide(o)
            }
        }), t(document).on("click", function(e) {
            if (c.length) {
                var i = c[c.length - 1],
                    o = document.getElementById(i),
                    n = t(o).data("popupoptions").closeelement ? t(o).data("popupoptions").closeelement : "." + o.id + l;
                t(e.target).closest(n).length && (e.preventDefault(), h.hide(o)), t(o).data("popupoptions").blur && !t(e.target).closest("#" + i).length && 2 !== e.which && t(e.target).is(":visible") && (t(o).data("popupoptions").background ? (h.hide(o), e.preventDefault()) : h.hide(o, !0))
            }
        }), t(document).on("keydown", function(e) {
            if (c.length && 9 == e.which) {
                var i = c[c.length - 1],
                    o = document.getElementById(i),
                    n = t(o).find("*"),
                    a = n.filter(f).filter(":visible"),
                    s = t(":focus"),
                    p = a.length,
                    d = a.index(s);
                0 === p ? (t(o).focus(), e.preventDefault()) : e.shiftKey ? 0 === d && (a.get(p - 1).focus(), e.preventDefault()) : d == p - 1 && (a.get(0).focus(), e.preventDefault())
            }
        }), t.fn.popup = function(e) {
            return this.each(function() {
                var i = t(this);
                if ("object" == typeof e) {
                    var o = t.extend({}, t.fn.popup.defaults, i.data("popupoptions"), e);
                    i.data("popupoptions", o), n = i.data("popupoptions"), h._init(this)
                } else "string" == typeof e ? (i.data("popupoptions") || (i.data("popupoptions", t.fn.popup.defaults), n = i.data("popupoptions")), h[e].call(this, this)) : (i.data("popupoptions") || (i.data("popupoptions", t.fn.popup.defaults), n = i.data("popupoptions")), h._init(this))
            })
        }, t.fn.popup.defaults = {
            type: "overlay",
            autoopen: !1,
            background: !0,
            backgroundactive: !1,
            color: "#000",
            opacity: "0.35",
            horizontal: "center",
            vertical: "middle",
            offsettop: 0,
            offsetleft: 0,
            escape: !0,
            setzindex: !0,
            autozindex: !1,
            scrolllock: !1,
            closebutton: !1,
            closebuttonmarkup: null,
            keepfocus: !0,
            focuselement: null,
            focusdelay: 50,
            outline: !1,
            pagecontainer: null,
            detach: !1,
            openelement: null,
            closeelement: null,
            transition: null,
            tooltipanchor: null,
            beforeopen: null,
            onclose: null,
            onopen: null,
            opentransitionend: null,
            closetransitionend: null
        }
    }(jQuery);
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console