CodePen Embed - ModalX Animated Modal

<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);

This Pen is owned by Christopher Bicudo on CodePen.

See more by @D3V1L on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.