/* CSS Document for Figleaf Pool Products */

/*Reset Rule*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block;  }
audio:not([controls]) { display: none; }
[hidden], .hidden { display: none; }
*, html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
*, html, div, span, body, p, h1, h2, h3, h4, h5, h6, ol, ul, img { list-style: none; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; margin: 0; padding: 0; border: 0; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: normal; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { color: #dc0015; font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 0; padding: 0; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
.container{ position: relative; top: 0; width: 980px; height: auto; display: block; margin: 0 auto; }
.container:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; }

/*===============
Main CSS for Site
===============*/

/*typography*/
body { background: #ececec url('../images/core/bg-repeat.jpg') repeat 0 0; width: 100%; height: 100%; font: normal 62.5%/18px 'Titillium Web', sans-serif;  color: #000; min-width: 980px; }
p, h1, h2, h3, h4, h5, h6 { font-family: 'Titillium Web', sans-serif; margin-bottom: 18px; text-align: inherit; font-weight: normal; font-weight: 600; }
p { font-size: 1.5em; font-weight: 400; line-height: 20px; }
h1 { font-size: 2.5em; line-height:30px; color: #e0661f; }
h2 { font-size: 2em; color: #0e4f92; }
h3 { font-size: 1.7em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.4em; }
h6 { font-size: 1.3em; }
.lrg { font-weight: 600; font-size: 1.8em; line-height: 25px; }
ul.list { margin: 0 0 17px 30px; }
ul.list li { font-size: 1.5em; margin-bottom: 2px; list-style: disc!important; }
ul.list ul { margin: 0 0 0 30px; padding: 5px 0 0 0; }
.longer li { margin-bottom: 5px; }
ul.list li li { font-size: 1em; }
strong { font-weight: 700; }
a { color: #1458c7; text-decoration: none; outline: none; }
a:hover { color: #de510c; text-decoration: underline; outline: none; }
.nil { margin: 0!important; padding: 0; }
a.btn { border-radius: 5px; display: inline-block; font-size: 1.5em; padding: 0 40px 0 10px; line-height: 34px; color: #73dbf9; background: #000 url('../images/core/icon-arrow.png') no-repeat 95% 5px; text-decoration: none; }
a.btn:hover { background-color: #1458c7; color: #fff; text-decoration: none; }
.pdf { background: url('../images/core/icon-pdf.png') no-repeat 0 2px; padding-left: 30px; font-size: 1.3em; color: #d5570d; }
.blk { display: block; }
.floatright { float: right; display: none; }
body#p-contact-us .floatright { display: block; }
.break { display: block; height: 20px; border-top: 1px solid #d2d2d2; margin: 0; }

/*header*/
header { position: relative; z-index: 15; width: 100%; height: 165px; background: url('../images/core/bg-header-repeat.jpg') repeat-x 0 0; display: block; margin: 0 auto; }
header section { width: 100%; height: 165px; display: block; margin: 0 auto; background: url('../images/core/bg-header.png') no-repeat 50% 0; }
a#logo { position: absolute; top: 0; z-index: 20; left: 50%; margin: 0 0 0 -90px; clear: both; width: 180px; height: 110px; display: block; background: url('../images/core/logo.png') no-repeat 0 0; text-indent: -9999em; text-decoration: none; }
h2#callus { font-size: 2.5em; color: #fff; font-weight: 600; line-height: 55px; text-align: center; width: 210px; text-indent: 36px; position: absolute; z-index: 20; top: 110px; left: 50%; margin: 0 0 0 -105px; }
/*nav*/
nav { position: relative; z-index: 15; }
/*top-left*/
#top-tier-left { padding: 0 0 0 34px; height: 40px; overflow: hidden; float: left; display: inline; }
#top-tier-left ul { list-style: none; margin: 0; padding: 0; }
#top-tier-left li { height: 40px; font-size: 1em; display: inline-block; float: left; margin: 0; }
#top-tier-left a { font-size: 1.4em; color: #000; text-decoration: none; line-height: 40px; padding: 0 10px; display: block; }
#top-tier-left a:hover, #top-tier-left a.active, #top-tier-left a.active:hover { background: url('../images/core/nav-blue-hover.jpg') repeat-x 0 0!important; text-decoration: none; color: #fff; }
/*top-right*/
#top-tier-right { padding: 0 34px 0 0; height: 40px; overflow: hidden; float: right; display: inline; }
#top-tier-right ul { list-style: none; margin: 0; padding: 0; }
#top-tier-right li { height: 40px; font-size: 1em; display: inline-block; float: left; margin: 0; }
#top-tier-right a { font-size: 1.4em; color: #000; text-decoration: none; line-height: 40px; padding: 0 10px; display: block; }
#top-tier-right a:hover, #top-tier-right a.active, #top-tier-right a.active:hover { background: url('../images/core/nav-orange-hover.jpg') repeat-x 0 0!important; text-decoration: none; color: #fff; }
/*main*/
#main-tier { padding: 0; height: 40px; overflow: hidden; float: left; display: block; clear: both; }
#main-tier ul { list-style: none; margin: 0; padding: 0; }
#main-tier li { height: 40px; font-size: 1em; display: inline-block; float: left; margin: 0; }
#main-tier li.spaceout { width: 303px; display: block; }
#main-tier a { font-size: 1.4em; color: #fff; text-decoration: none; line-height: 40px; padding: 0 13px; display: block; }
#main-tier a:hover, #main-tier a.active , #main-tier a.active:hover { background: url('../images/core/nav-blue-hover.jpg') repeat-x 0 0!important; text-decoration: none; color: #000; }
/*last*/
#special-tier { padding: 0; height: 40px; overflow: hidden; float: left; display: block; clear: both; }
#special-tier ul { list-style: none; margin: 0; padding: 0; }
#special-tier li { overflow: hidden; width:490px; height: 40px; font-size: 1em; display: inline-block; float: left; margin: 0; }
#special-tier a { font-size: 1.6em; font-weight: 600; text-transform: uppercase; color: #000; height: 40px; text-decoration: none; line-height: 30px; padding: 0; display: block; }
#special-tier a#nav-residential { text-align: right; padding-right: 120px; }
#special-tier a#nav-commercial { padding-left: 120px; }
#special-tier a:hover, #special-tier a.active, #special-tier a.active:hover { background: url('../images/core/nav-big-hover.png') no-repeat 0 0; text-decoration: none; color: #000; }
#special-tier a#nav-commercial:hover, #special-tier a#nav-commercial.active, #special-tier a#nav-commercial.active:hover { background-position: right 0!important; }


/*infinite carousel banner*/
#banner { overflow: hidden; position: relative; z-index: 2; top: -85px; left: auto; margin: 0 auto -115px auto; width: 100%; height: 395px; padding-top: 20px; display: block; text-align: center; }
body#p-home #banner { height: 510px!important; padding: 0!important; margin-bottom: -85px!important; }
.mask { width: 100%; height: 395px; display: block; background: url('../images/core/mask-banner-inner.png') repeat-x 50% 0; margin: 0 auto; position: absolute; top:0; left: 0; z-index: 5; }
body#p-home .mask { height: 510px!important; background: url('../images/core/banner-mask.png') repeat-x 50% 0!important;  }
.carousel-holder { width: 100%; margin: 0 auto;	overflow: hidden; position: absolute; z-index: 2;	display: block; height: 440px; top: 0; left: 0; padding: 0; }
#carousel { width: 100%; margin: 0 auto; }
#carousel ul { list-style: none; width: 5900px; margin: 0 auto; padding: 0; position: relative; z-index: 3; }
#carousel li { display: inline; float: left; } 

/* CTAs*/
#ctas ul { list-style: none; width: 960px; height: 175px; display: block; position: absolute; z-index: 10; bottom: 10px; left:50%; margin: 0 0 0 -495px; padding: 0;  }
#ctas li {  font-size: 2em; font-weight: 600; z-index: 10; position: relative; background: url('../images/core/bg-ctas.png') no-repeat 0 0; margin: 0 5px; width: 260px; height: 155px; padding: 10px 25px; float: left; display: inline; }
#ctas img { line-height: 0; margin-bottom: 12px; text-align: center; }
#ctas span { position: absolute; top: 92px; width: 240px; height: 35px; padding: 0 10px; display: block; font-size: 0.8em; line-height: 35px; color: #fff; }
#ctas a { display: block; color: #000; text-decoration: none; }
#ctas a:hover img { opacity: 0.80; }
#ctas a:hover span { color: #9ed7f1!important; text-decoration: none;}
#ctas a:hover { color: #0f578b; text-decoration: none; }


/*CTAs inner*/
#ctas-inner ul { list-style: none; width: 990px; height: 106px; display: block; position: absolute; z-index: 10; bottom: 30px!important; left:50%; margin: 0 0 0 -480px; padding: 0;  }
#ctas-inner li { cursor: pointer; text-align: left; font-size: 1.5em; font-weight: 600; color: #9ed7f1; position: relative; background: url('../images/core/bg-cta-inner.jpg') no-repeat 0 0; margin: 0; width: 300px; height: 73px; padding: 16px 17px 17px 13px; float: left; display: inline; }
#ctas-inner img { line-height: 0; width: 135px; height: 73px; margin-right: 10px; float: left; display: inline; }
#ctas-inner span { font-size: 1.1em; color: #fff; height: 28px; line-height: 28px; display: block;  }
#ctas-inner a { opacity: 0.7; color: #9ed7f1; text-decoration: none; }
#ctas-inner a:hover, #ctas-inner li:hover a { opacity: 1.0; color: #9ed7f1; text-decoration: none; }

/*contents area*/
#mainbody { position: relative; z-index: 20; width: 100%; height: auto; padding: 35px 0; display: block; margin: 0 auto; }
#faqs ul, #faqs ul ul { list-style: none; margin; 0; padding: 0; }
#faqs li { font-size: 1em; margin-bottom: 10px; padding-bottom: 10px; display: block; border-bottom: 1px solid #d2d2d2; width: 630px; }
#faqs li li { margin: 0; padding: 5px 0 0 20px; border: 0; width: 600px; }
#faqs h4 { cursor: pointer; color: #0e4f92; margin: 0; }
#faqs p { margin: 0; }
#cat { display: block; margin: 0 0 25px 0; }
#cat .btn { font-size: 1.5em; color: #fff; background-color: #185d96; }
#cat .btn:hover { background-color: #000; color: #f9bd2d;  }
#cat .btn.onstate, #cat .btn.onstate:hover { color: #f9bd2d!important; background: #000 url('../images/core/icon-arrow2.png') no-repeat 95% 5px!important; }
.gallery { position: relative; list-style: none; display: block; margin: 0 -60px 10px 0;  padding: 0; width: 645px; }
.extended { width: 980px!important; margin: 0 0 10px 0; }
.extended li { line-height: 27px!important; margin: 0 13px 13px 0!important; padding: 15px 20px!important; }
.extended li span { right: 25px!important; bottom: 40px!important; }
.gallery li { text-align: center; color: #000; position: relative; background-color: #fff; padding: 5px; width: 190px; height: 115px; font-size: 1.5em; line-height: 23px; margin: 0 10px 10px 0; display: inline-block; }
.gallery li:last-child { margin: 0; }
.gallery li img { z-index: 5; width: 190px; height: 95px; line-height: 0; }
.gallery li span { text-indent: -9999em; position: absolute; right: 12px; bottom: 32px; z-index: 10; width: 20px; height: 20px; display: block; background: url('../images/core/icon-magnifying.png') no-repeat 0 0; }
.gallery li:hover img, .gallery a:hover img { opacity: 0.75; }
.strip-brand { background: url('../images/core/bg-alpha-title.png') no-repeat 0 0; display: block; clear: both; width: 980px; height: 75px; margin: 20px 0; text-align: center;  }
/*listings*/
.listings { display: block; width: 980px; margin: 0; padding: 0; list-style: none; }
.trunk { width: 640px; margin: 0 -60px 20px 0!important; padding: 0; list-style: none; }
.listings li, .trunk li { position: relative; float: left; display: inline-block; width: 300px; height: auto; padding: 10px; background-color: #fff; margin: 0 10px 0 0; font-size: 1em;  }
li.duo { width: 460px; }
.trunk li { display: inline!important;  margin: 0!important; }
.listings li:last-child { margin: 0!important; }
li.duo:last-child { margin: 0 0 0 10px!important; }
.listings li img, .trunk li img { opacity: 0.75; background-color: #f2f2f2; width: 300px; height: 180px; line-height: 0; }
li.duo img { width: 460px; height: 250px; }
.listings li h2, .trunk li h2 { position: realtive; margin: -10px -10px 0 -10px; border-bottom: 10px solid #fff; background: url('../images/core/bg-repeat.jpg') repeat 0 0; font-size: 2em; color: #000; line-height: 35px; height: 35px; width: 320px; }
li.duo h2 { width: 480px; }
.listings li p, .trunk li p { margin: 0; padding: 15px 0; line-height: 18px; font-size: 1.3em;  }
.listings li p a, .trunk li p a { font-size: 1.1em!important; }
.listings li .btn, .trunk li .btn { float: right; display: inline-block; margin: 15px 0 0 0; }
.listings li span, .trunk li span { text-indent: -9999em; position: absolute; right: 20px; top: 190px; z-index: 10; width: 20px; height: 20px; display: block; background: url('../images/core/icon-magnifying.png') no-repeat 0 0; }
.listings li span a, .trunk li span a { border: 0; outline: none; text-indent: -9999em; display: block; width: 20px; height: 20px; }
.listings li:hover img, .trunk li:hover img { opacity: 1.0; }
/*map*/
#map-wrapper { width: 645px; height: 415px; border: 5px solid #fff; position: relative; margin: 0 -40px 20px 0; display: inline-block; -webkit-box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.4); box-shadow: 1px 1px 2px 0 rgba(0,0,0,0.4); }
.enlarged { margin: 0!important; width: 500px!important; height: 270px!important; }
.align { float: right; display: inline; margin: 10px 0 0 0; }


.list-col-4 li { width:215px; }
.list-col-4 li img { width:100%; height:auto;}
.list-col-4 li h2, .trunk li h2 { width: 235px; }
.list-col-4 li .pdf { padding:0 0 0 30px!important; margin: 15px 0; }
.list-col-4 li .pdf a {color: #d5570d!important; text-decoration:none; }
.list-col-4 li .pdf a:hover {color: #d5570d; text-decoration:underline; }
.list-col-4 li span { top: 150px; right:15px;}

/*footer area*/
footer { position: relative; z-index: 10; width: 100%; height: 300px; display: block; text-align: left; margin: 0 auto -10px auto; background: url('../images/core/bg-repeat-footer.jpg') repeat-x 0 0; }
#address ul { list-style: none; margin: 0 auto; text-align: center; padding: 0; display: inline-block; height: 40px; clear: both; }
#address li { font-weight: 600; display: inline; float: left; font-size: 1.5em; color: #9ed7f1; line-height: 40px; height: 40px; }
#address li b { color: #fff; }
#address a { color: #fba540; text-decoration: none; }
#address a:hover { text-decoration: underline; }
.ph { background: url('../images/core/icon-phone.png') no-repeat 0 10px; padding-left: 25px; margin-right: 25px; }
.fx { background: url('../images/core/icon-fax.png') no-repeat 0 10px; padding-left: 25px; margin-right: 25px;  }
.em { background: url('../images/core/icon-email.png') no-repeat 0 10px; padding-left: 25px; margin-right: 25px;  }
#sitemap { width: 590px; display: inline; float: left; margin: 0; padding-top: 15px; }
.ph1 { margin: 0; display: block; background: url('../images/core/icon-phone1.png') no-repeat 0 2px; padding-left: 35px; }
.fx1 { margin: 0; display: block; background: url('../images/core/icon-fax1.png') no-repeat 0 2px; padding-left: 35px;  }
.em1 { margin: 0; display: block; background: url('../images/core/icon-email1.png') no-repeat 0 2px; padding-left: 35px;  }
#sitemap h3 { font-size: 1.6em; margin: 12px 0 0 0; }
#sitemap ul { margin: 0; padding: 0 0 12px 0; list-style: none; border-bottom: 1px solid #5ca6c8; }
#sitemap li { display: inline-block; font-size: 1.3em; margin-right: 5px; }
#sitemap li a { color: #000; text-decoration: none; }
#sitemap li a:hover { color: #e80c0c; text-decoration: underline; }
#affiliates { width: 360px; display: inline; float: right; }
#affiliates h3 { font-size: 1.6em; line-height: 40px; height: 40px; margin: 0; }
#affiliates ul { list-style: none; margin: 0 0 20px 0; padding: 10px 25px; width: 310px; height: 100px; background: rgba(255,255,255,0.3); }
#affiliates li { display: inline; float: left; margin: 0; }
#affiliates li a:hover { opacity: 0.6; }
#affiliates li img { line-height: 0; }
#affiliates p { float: left; font-weight: 600; margin: 0; display: inline; }
#credits a { cursor: pointer;  text-decoration: none; width: 100px; height: 45px; margin: -10px 0 0 0; float: right; display: inline-block; background: url('../images/core/logo-sevenreasons.gif') no-repeat 0 0; padding: 30px 0 0 0; text-align: center; font-size: 11px; font-family:Arial!important; color: #BFE4F8;  }
#credits a:hover { color: #fff; text-decoration: none; }

/*cmx forms*/
#enquiryform { position: relative; width: 280px; height: auto; padding: 0; margin: 0 0 20px 60px; float: right; display: inline-block; }
#enquiryform h2 { text-align: center; background-color: #185d96; font-weight: normal; color: #fff; line-height: 35px; height: 35px; margin: 0; }
form.cmxform fieldset, form.cmxform ol, form.cmxform li { border: 0; margin: 0; padding: 0; font: normal 13px/18px 'Titillium Web', sans-serif; font-weight: 600; color: #000; background: #fff;  }
form.cmxform ol { list-style: none; padding: 13px 0 0 0; width: 280px;  }
form.cmxform li { float: left; margin: 0 15px 8px 15px; width: 250px; display: block; }
form.cmxform li.ext { margin: 0!important; width: 280px; }
form.cmxform label { height: 25px; line-height: 25px; display: inline-block; margin: 0; width: 90px; }
form.cmxform label.ext1 { width: 240px; }
form.cmxform input, form.cmxform select, form.cmxform textarea {
		width: 145px;
		height: 24px;
		padding: 0 5px;
		border: 1px solid #e2e2e2;
		background: #f2f2f2;
		font: normal 13px/24px 'Titillium Web', sans-serif; 
		color: #000;
		border-radius: 5px;
		position: relative; z-index: 100;
	}
form.cmxform textarea { display: inline-block; line-height: 17px!important; height: 120px; width: 235px; padding: 6px 0 0 10px; overflow: auto; }
form.cmxform input.cb { width: 14px; height: 14px; background: none; border: 0; vertical-align: middle; margin-right: 3px; }
form.cmxform input.send { cursor: pointer; width: 280px; height: 35px; line-height: 35px; padding: 0 40px 0 0; border: 0; border-radius: 0; text-align: right; font-size: 15px;  color: #fff; text-decoration: none; background: #df661f url('../images/core/icon-arrow.png') no-repeat 95% 5px; margin: 10px 0 0 0; }
form.cmxform input.send:hover, form.cmxform input.send.inputhover { background-color: #000;  text-decoration: none; }
form input.error, form textarea.error { color: #fff!important; background: #333 url('../images/core/icon-cross.png') right center no-repeat; border-color: rgba(240,10,14,0.5)!important; }
form input.valid, form textarea.valid { color:#000!important; background: #9FD6F4 url('../images/core/icon-tick.png') right center no-repeat;	border-color: #4F9DF1!important;}
label.error { color: rgba(240,10,14,1.00); font-weight: 600; line-height: 16px!important; display: block; margin-left: 90px!important; width:150px!important; }
input.error { border-color: rgba(240,10,14,0.5)!important; }

/* ExTRA */

.contact-box { width:320px; float:left; display:block; } 
.spanblock { display:inline-block; width:120px;}


/* ===================
	Media Queries for devices
================ ====*/
@media only screen and (max-width : 1024px) {
	body, header, footer, #banner, .alignment { width: 980px!important;  }
	#mainbody .container { width: 960px; padding: 0 0 0 20px!important; }
	footer .container {width: 960px; padding: 0 10px!important; background: url('../images/core/bg-repeat-footer.jpg') repeat-x 50% 0; }
	body { background: url('../images/core/bg-repeat.jpg') repeat 0 0; }
	#enquiryform { margin: 0 0 20px 30px!important; padding: 0 20px 0 0!important; }
	#main-tier a#nav-pool-chemical-supplies {padding: 0 10px!important; }
	}
	
/*@media only screen and (max-width : 320px) {
	body, header, footer, #banner, .alignment { width: 980px!important;  }
	#mainbody .container { width: 950px; padding: 0 15px!important; }
	footer .container {width: 960px; padding: 0 10px!important; background: url('../images/core/bg-repeat-footer.jpg') repeat-x 50% 0; }
	body { background: url('../images/core/bg-repeat.jpg') repeat 0 0; }
	}
	
	@media only screen and (min-width: 767px) and (max-width: 1024px) {
	body, header, footer, #banner, .alignment { width: 980px!important; }
	#mainbody .container { width: 950px; padding: 0 15px!important; }
	footer .container {width: 960px; padding: 0 10px!important; background: url('../images/core/bg-repeat-footer.jpg') repeat-x 50% 0; }
	body { background: url('../images/core/bg-repeat.jpg') repeat 0 0; }
	}*/


/* ===============
	Preloader canvas specials
	================ */		
	
#preloading { position: absolute; top: 0; left: auto; margin: 0; background: #033D7D; width: 100%; height: 440px; display: block; z-index: 4; }
.circle {
    position: absolute; top:50%; left: 50%;
		background-color: rgba(0,0,0,0);
    border: 5px solid rgba(0,255,255,0.9);
    opacity: .9;
    border-right: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 50px;
    box-shadow: 0 0 35px #92ECF8;
    width: 50px;
    height: 50px;
    margin: -50px 0 0 -25px;
    -moz-animation: spinPulse 1s infinite ease-in-out;
    -webkit-animation: spinPulse 1s infinite linear;
}
@-moz-keyframes spinPulse {
    0% {
        -moz-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #92ECF8;
    }
    50% {
        -moz-transform: rotate(145deg);
        opacity: 1;
    }
    100% {
        -moz-transform: rotate(-320deg);
        opacity: 0;
    };
}
@-moz-keyframes spinoffPulse {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
    };
}
@-webkit-keyframes spinPulse {
    0% {
        -webkit-transform: rotate(160deg);
        opacity: 0;
        box-shadow: 0 0 1px #92ECF8;
    }
    50% {
        -webkit-transform: rotate(145deg);
        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(-320deg);
        opacity: 0;
    };
}
@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    };
}