/*
Site Name: 	    My Alerts!
Site URI: 		https://myalerts.uk
Version: 		1.0
Author: 		ipinx
Author URI: 	https://www.ipinx.co.uk


/* ---------------------------------------------------------------------------------------------------------- 
01 Sensible defaults ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

@import "css/normalize.css";

div,
article,
section,
header,
footer,
nav,
li					{ position:relative; }
.group:after 		{ display:block; height:0; clear:both; content:"."; visibility:hidden; }
body 				{ 
	background:#fff;
	font-family: Quicksand, sans-serif;
	font-size:20px;
	color:#404040;
	line-height:1.6em;
	margin: 0 0 .2em 0;	
	}
.row:after { content: ""; display: table; clear: both; }	
p {
	font-size:20px;
	color:#000;
	line-height: 1.6em;
	text-align: left;
	margin: 0 0 .5em 0;
}
.inQueue { display: none; }
.alerts {
	font-size:19px;
	color:#000;
	line-height: 1.4em;
	text-align: left;
	margin: 0 0 0 0;
}
.alertsr {
	font-size:19px;
	color:#000;
	line-height: 1.4em;
	text-align: right;
	margin: 0 0 0 0;
}
.queue {
	font-size:.9em;
		margin: 0 0 0 0;
		line-height: 2em;
}
.bonus {
	font-size:19px;
	color:#505050;
	line-height: 1.6em;
	text-align: left;
	margin: 0 0 .4em 0;
}
.right {
	font-size:20px;
	color:#fff;
	line-height: 1.5em;
	text-align: right;
	margin: .5em 0 .4em 1em;
}.contacts {	font-size:18px;	color:#fff;	line-height: 1.5em;	text-align: right;	margin: .5em 0 .4em 1em;}
.center {
	text-align: center;
	color:#000;
	line-height: 1.6em;
	margin: 0 0 .5em 0;
}
.tight  {
	font-size:19px;
	color:#000;
	line-height:1.4em;
	margin: 0 .5em 1em 0;
}
.product  {
	font-size:.8em;
	line-height:1.4em;
	margin: 0 0 1em 0;
}
.access  {
	font-size:.7em;
	line-height:1.4em;
	color:#808080;
	margin: 0 0 .5em 0;
	text-align: center;
}
.ipinx  {
	font-size:15px;
	line-height:1.4em;
	color:#fff;
	margin: .5em 0 .5em 0;
	text-align: center;
}
.small {
		font-size:.9em;
		margin: .5em 0 1em 0;
		line-height: 1.6em;
}
.faq {
	color:#808080;
	letter-spacing: -0.05em;
}
.grey {
		color:#c0c0c0;
		font-size:.8em;
		line-height: 1em
}
::-moz-selection 	{ background:#ff0; color:#333; }
::selection 		{ background:#ff0; color:#333; }

img { 
	padding:0 0 0 0;
	margin:0 0 0 0; 
	max-width:100%;
	height:auto;
	}
a {
	text-decoration:none;
	font-weight: bold;
	border:0;
	color:#5d60c7;
}
.mail {
	text-decoration:none;
	font-weight:normal;
	border:0;
	color:#fff;
}
.link {
	text-decoration:none;
	border:0;
	font-weight: normal;
	color:#fff;
}
.test {
	text-decoration:none;
	font-weight: normal;
	border:0;
	color: blue;
}
.link:hover {
	text-decoration:none;
	border:0;
	font-weight: normal;
	color:#ff0;
}
.bonusA {
	text-decoration:none;
	color:#c315aa;
}
a:hover {
	text-decoration:underline;
	color:#771078;
	font-weight: bold;
}

.bonusA :hover {
color:#771078;
}

hr  {
	color: #ff73f0;
   margin: .1em 0 .1em 0;
}

.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:1em; margin:1em }

.textRight {text-align:right;}
.textLeft {text-align:left;}
.textCenter {text-align:center;}
.error {color:#f00;}

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix,*:first-child+html .clearfix{zoom:1}
select.error,

 .clearleft {
 	clear: left;
 }


 /* ---------------------------------------------------------------------------------------------------------- 
Forms -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
form {
	margin: 0 0 0 0;
}

label {
	color: #000;
	padding: 0 0 0 0;
}

input[type=PIC] {
   width: 130px;
   border: 1px, #000;
   padding: 2px 5px 2px 5px;
   margin: 0 0 .2em 0;
   border-radius: 8px;
  	font-family: Lato, sans-serif;
   font-size: 1.2em;
   font-weight: bold;
   text-align: center;
}
input[type=text] {
   width: 300px;
   border: 1px, #000;
   padding: 2px 5px 2px 5px;
   margin: 0 0 .2em 0;
   border-radius: 8px;
  	font-family: Lato, sans-serif;
   font-size: .9em;
   font-weight: normal;
   text-align: left;
}

input[type=image] {
   width: auto;
   border: 0;
   padding: 0 0 0 0;
   margin: 0 0 0 0;
   
}

input[type=password] {
   width: 300px;
   border: 1px, #000;
   padding: 2px 5px 2px 5px;
   margin: 0 0 .2em 0;
   border-radius: 8px;
  	font-family: Lato, sans-serif;
   font-size: .9em;
   font-weight: normal;
   text-align: left;
}

input#pic { width:165px; border-radius: 4px;padding:5px }
textarea { max-width: 100%; }

.logout { position: absolute;right:0 }
 /* ---------------------------------------------------------------------------------------------------------- 
CAPTCHA -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

.capbox {
	background-color: #fff;
	border: #505050 0px solid;
	border-width: 1px;
	box-sizing: border-box;
	display: inline-block;
	padding: 2px 8px 2px 8px;
	border-radius: 8px;
	}

.capbox-inner {
	font-family: Lato, sans-serif;
	font-size: .8em;
	color: #000000;
	background-color: #fff;
	margin: 0px auto 0px auto;
	padding: 3px 10px 5px 10px;
	border-radius: 4px;
	display: inline-block;
	vertical-align: middle;
	}

#CaptchaDiv {
	color: #000000;
	font-family: Lato, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	background-color: #fff;
	user-select: none;
	display: inline-block;
	padding: 3px 14px 3px 8px;
	margin-right: 4px;
	border-radius: 4px;
	}

#CaptchaInput {
	border: #c315aa 1px solid;
	margin: 3px 0px 1px 0px;
	width: 105px;
	}

/* ---------------------------------------------------------------------------------------------------------- 
Typography -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */

body,
input,
textarea 			{  }

h1 {
	font-size:1.4em;
	letter-spacing: -0.02em;
	font-family: quicksand, sans-serif;
	line-height: 1em;
	font-weight: normal;
	color: #000;
	text-align: left;
	margin:0 0 .2em 0;
}
h1.page {
	font-size:3em;
	letter-spacing: -0.05em;
	font-family: quicksand, sans-serif;
	line-height: 1em;
	font-weight: normal;
	color: #c315aa;
	text-align: center;
	margin:0 0 .7em 0;
}
h2 {
	font-size:2em;
	font-family: quicksand, sans-serif;
	line-height: 2em;
	font-weight: normal;
	color: #000;
	text-align: center;
	margin:.2em 0 0 0;
}
h2.left {
	font-size:2em;
	font-family: quicksand, sans-serif;
	line-height: 1.6em;
	font-weight: normal;
	color: #000;
	text-align: left;
	margin:.2em 0 0 0;
}
h3 {
	font-size:1.2em;
	font-family: quicksand, sans-serif;
	line-height: 1.4em;
	font-weight: normal;
	color: #505050;
	text-align: left;
	margin:0 0 .2em 0;
}
h4 {
	font-size:1.4em;
	font-weight: 300;
	line-height: 1.4em;
	color: #000;
	font-weight: normal;
	text-align: left;
	margin:0 0 .2em 0;
}

h5 {
	font-size:1.3em;
	font-weight: 300;
	color: #fff;
	margin:.4em 0 .5em 0;
}
h5.right {
	font-size:1.3em;
	font-weight: 300;
	text-align: right;
	margin:.4em 0 .5em 0;
}

blockquote {
	font-size:1.2em;
	font-style:italic;
}
em.queue {
	font-style: normal;
	font-weight: bold;
	vertical-align: top;
}
em.pink {
	color:#c315aa;
	font-style: normal;
}em.yellow {	color:#ffff40;	font-style: normal;}em.notice {	color:#808080;	font-style: italic;		font-weight: bold;}
em.red {
	color: red;
	font-style: normal;
}
em.white {
	color:#fff;
	font-weight: normal;
	font-style: normal;
}
/** text colours **/

input[type="submit"].save {transition: .5s all; background: #c315aa;color: #fff;border: 0;border-radius: 5px;text-transform: uppercase; padding: 5px 15px; margin-top: 5px; letter-spacing: 1px; }
input[type="submit"].save:hover {box-shadow: 0 0 12px #666}
input[type="submit"].save:disabled { background:#ccc }
input[type="submit"].save:disabled:hover { box-shadow: none; }
input[type="submit"].save.warning { background:red }

button {transition: .5s all; background: #c315aa;color: #fff;border: 0;border-radius: 5px;text-transform: uppercase; padding: 5px 15px;  letter-spacing: 1px;vertical-align: middle;}
button.warning { background:red }
button:disabled,
button.warning:disabled { background:#e8e8e8 }
.spool-item { padding:5px 0 }
.updateMessage { display: none; color: green; font-size: 12px;}
/* ---------------------------------------------------------------------------------------------------------- 
Grid -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
.grid_1 { width: 6.5%; } 
.grid_2 { width: 15%; } 
.grid_3 { width: 23.5%; } 
.grid_4 { width: 32%; } 
.grid_5 { width: 40.5%; }
.grid_6 { width: 49%; } 
.grid_7 { width: 57.5%; } 
.grid_8 { width: 66%; } 
.grid_9 { width: 74.5%; } 
.grid_10 { width: 83%; } 
.grid_11 { width: 91.5%; } 
.grid_12 { width: 100%; } 

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin: 0 2% 1% 0;
	float: left;
	display: block;
}

.alpha{margin-left:0;}
.beta{margin-right:0;}
.omega{margin-right:0;}

.container{
	width: 95%;
	max-width: 960px;
	margin: auto;
	
}

.hiddendiv {display: none; }
.bonusA:focus ~ #bonusA {display: block;}
.detailsection { padding:20px 0 }

.result-disabled { color:#ccc}
.result-disabled span { color:red; margin-left: 10px; font-size: 11px; }
/* ---------------------------------------------------------------------------------------------------------- 
HEADER -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
.header {
	position: fixed;
	top:0;
	left:0;
	width:100%;
	background:rgba(0,0,0,0.8);
	z-index: 200;
	padding:0 0 .3em 0;
}

.logo {
	display: block;
	width:50px;
	height: 50px;
	padding:5px 0 0 10px;
	margin: 0 0 0 0;
}

.mainNav ul {
	list-style-type: none;
	padding:.4em .5em 0 0;
	margin:0 0 0 0;
	text-align: right;
}
.mainNav ul li {
	display: inline-block;
	color: #fff;
}

.mainNav ul li.moreLink > a {
	padding-bottom:1.4em;
	padding-top:0;
	background:url(images/menu2.png) no-repeat bottom;
	background-image:url(images/menu.svg), none;
}

.mainNav ul > li.active > a {
	color:#999999;
	cursor: default;
}
.mainNav ul > li.active:hover > a {
	color:#999999;
}
.mainNav ul li a {
	color:#ffffff;
	font-size: 1em;
	padding:.5em;
	text-decoration:none;
}
.mainNav ul li a:hover {
	color:#fab6f1;
	font-weight: normal;
}
.mainNav ul ul {
	position: absolute;
	left:0;
	text-align: center;
	padding:0 0 0 0;
	min-width:180px;
	display: none
}
.mainNav ul li.moreLink ul {
	left:auto;
	right:0;
	margin-top: 1.3em;
	min-width: 270px;
	text-align: right;
}
.mainNav ul li:hover ul {
	display: block;
}
.mainNav ul ul li {
	display: block;
}
.mainNav ul ul li a {
	padding:.3em .4em .3em .5em;
	display: block;
	border-bottom: solid 1px #999999;
	background:rgba(0,0,0,0.8);
}
.mainNav li.register a {
	padding:0 .4em .3em .5em;
	font-weight: bold;
	color: #ffff40;
	display: block;
}

.mainNav ul li.register a:hover {
	padding:0 .4em .3em .5em;
	font-weight: bold;
	color: #fab6f1;
	display: block;
}
.mainNav li.activate a {	padding:0 .4em .3em .5em;	font-weight: bold;	color: #ffffff;	display: block;}.mainNav ul li.activate a:hover {	padding:0 .4em .3em .5em;	font-weight: bold;	color: #fab6f1;	display: block;}
.mainNav ul ul li:last-child a {
	border:0;
}
.menuToggle {
	position: absolute;
	top:.2em;
	right:5%;
	bottom: 0;
	z-index: 999;
	color:#fff;
	padding-right: 35px;
	background:url(images/menu.png) no-repeat right;
	background-image:url(images/menu.svg);
	display: none;
	text-indent: -9999px
}

/* ---------------------------------------------------------------------------------------------------------- 
BANNER -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
.banner img {
	display: block;
	width:100%;
	height: auto;
}
.banner {
	text-align: center;
	background:#fff;
}
.banner h2{
	position: absolute;
	width: 100%;
	text-align: center;
	letter-spacing: .5em;
	top: 100px;
	color: #fff;
	font-family: arial, sans-serif;
	font-size: 80px;
}
.banner h4 {
	max-width: 90%;
	position: absolute;
	z-index: 100;
	top:0;
	margin:0;
	padding:0;
}
/* ---------------------------------------------------------------------------------------------------------- 
CONTENT -----------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
.main {
	padding:0 0;
}
.section {
	padding:0 0 0 0;
}
/**** Blocks ****/
.blocks {
	overflow: auto;
}
.blocks h3 {
	font-size: 1.4em
}
.block-image {
	float:left;
	width:23%;
}
.block-content {
	float:left;
	width:75%;
	margin-left: 2%;
}
.globalNote {
	margin-bottom: 20px;
	white-space: pre-line;
	border-bottom: solid 1px #666;
	padding-bottom: 20px;
	color: red;
}
/* ---------------------------------------------------------------------------------------------------------- 
FOOTER --------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
.footer {
	background:url(images/bottom.jpg) no-repeat center center;
	color:#ffffff;
	background-size: cover;
	font-size: 1em;
	line-height: 1.8em
}
.overlay {
	background:rgba(0,0,0,0.6);
	overflow: auto;
}



/* ---------------------------------------------------------------------------------------------------------- 
Media queries --------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
@media screen and (max-width :960px) {

	.mainNav ul li a {
		font-size: 1em;
		padding:.3em .4em .3em .5em
	}


	.header {
		position: relative;
		background:rgba(0,0,0,1);
	}
	.logo {
	display: block;
	width:50px;
	height: 50px;
	padding:5px 0 0 10px;
	margin: 0 0 0 0;
}
}

@media screen and (max-width :750px) {

	input[type="text"], 
	input[type="tel"], 
	input[type="email"], 
	input[type="password"] {
		max-width: 100%;
	}

	select {
	    max-width: 100%;
		width:88%;
	 }
p.small {
	font-size: .8em;
}
	 .info {
		position: absolute;
		margin:5px;
		right:0;
		top:0;
	}

	.grid_1,
	.grid_2,
	.grid_3,
	.grid_4,
	.grid_5,
	.grid_6,
	.grid_7,
	.grid_8,
	.grid_9,
	.grid_10,
	.grid_11,
	.grid_12 {
		width:100%;
	}
	.container {
		width:90%;
	}

	h1 {
		font-size:1.8em;
	}
	h1.page {
		font-size:1.8em;
	}
	h2 {
		font-size:1.5em;
	}
	h3 {
		font-size:1.1em;
	}

	.section {
		padding:0 0;
	}
	.logo {
	display: block;
	width:40px;
	height: 40px;
	padding:5px 0 0 10px;
	margin: 0 0 0 0;
}

	.header {
		padding-bottom:0;

	}
	.mainNav ul {
		padding: 0;
		text-align: center;
	}
	.mainNav > ul {
		display: none
	}
	.mainNav ul li {
		display: block;
	text-align: center;
	}
	.mainNav ul li.moreLink ul {
		margin:0;
		padding:0;
	}
	.mainNav ul li.moreLink > a {
		padding-bottom:0;
		background:none;
		margin:0;
	}
	.mainNav ul li a {
		border-top:solid 1px #666666;
		padding:.3em 0;
		display: block;
	}

	.mainNav ul li a:hover {
		color:#ffff40;
	}
	.mainNav ul ul {
		margin-top:0;
		width:100%;
		display: block;
		position: relative;
		border:0;
	}
	.mainNav ul ul li {
		float:none;
		width:auto;
		
	}
	.mainNav ul ul li a {
		float:none;
		width:auto;
		background:#303030;
	}

	.menuToggle { 
		display: block;
		margin-top: 0em;
		height: 45px;
	}
	.banner h1 {
		font-size: 1.4em
	}
	.blocks h3 {
		font-size: 1.2em
	}

	.footer {
		font-size: 1em
	}

}

@media screen and (max-width :480px) {

	.mainNav ul li a {
		font-size: .8em
	}
	h2 {		font-size:1.2em;	}
}