﻿#coverShot{
	background:url('https://www.jpandadyson.com/firstwriter/images/coverShot_progressive.jpg');
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	width:100%;
	min-height:calc(100vh - 400px);
	color:white;
	font-size:16px;
	font-weight:lighter;

	border:1px #787878 solid;
	padding:60px 10%;
	box-sizing:border-box;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

@media screen and (max-width: 799px){
	#coverShot{
		width:118%;
		margin-left:-9%;
	}
	#alreadySubscriber{
		display:none;
	}
}

#coverShot h1{
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-weight:lighter;
	font-size: 40px;
	color: white;	
}

#marketStickerWrap{
	position:absolute;
	top:150px;
	right:15%;
	border:3px white solid;
	border-radius:150px;
	-webkit-box-shadow: 5px 5px 10px black;
	-moz-box-shadow: 5px 5px 10px black;	
	box-shadow: 5px 5px 10px black;
	-ms-transform: rotate(15deg); /* IE 9 */
    -webkit-transform: rotate(15deg); /* Chrome, Safari, Opera */
    transform: rotate(15deg);
}

#marketSticker{
	width:150px;
	height:150px;
	border-radius:150px;
	background-color:white;
	border: 6px #319ACE solid;
	font-size:24px;
	line-height:26px;
}

#marketStickerText{
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	color:#787878;
	position:absolute;
	text-align:center;
	top: 20px;
	left:18px;
}

#marketStickerText span{
	font-size:50px;
	line-height:54px;
}

@media screen and (max-width: 1350px){
	#marketStickerWrap{
		display:none;
	}
}

#alreadySubscriber{
	position:absolute;
	top:-17px;
	left:-180px;
	background:white;
	text-align:center;
	color:#787878;
	z-index:100;
	border-radius:12px;
	border:3px white solid;	

	-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);	
	box-shadow: 3px 3px 7px rgba(0,0,0,0.3);
	
}

#alreadySubscriberText{
	border-radius:12px;
	border:6px orange solid;	
	padding:15px 50px;
}

#alreadySubscriberText a{
	font-size:14px;
}

.bounce{
    -webkit-animation: bounceInDown 2s; /* Chrome, Safari, Opera */
    animation: bounceInDown 2s;


}

.wobble{
    -webkit-animation: wobbleMotion 6s; /* Chrome, Safari, Opera */
    animation: wobbleMotion 6s;

    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;    

}

.exitLeft {
    
	margin-left:-500px;
				  /*Animation*/
  -webkit-transition: margin-left 0.5s ease;
     -moz-transition: margin-left 0.5s ease;
       -o-transition: margin-left 0.5s ease;
      -ms-transition: margin-left 0.5s ease;
          transition: margin-left 0.5s ease;

}


#alreadySubscriber .speechPoint{

	border: solid 21px white;
	border-bottom:0px;
	border-left:solid 20px transparent;
	border-right:solid 20px transparent;
	position:absolute;
	bottom:-26px;
}

#alreadySubscriber .speechPoint.orange{
	border: solid 21px orange;
	border-bottom:0px;
	border-left:solid 20px transparent;
	border-right:solid 20px transparent;
	bottom:-20px;

}

#alreadySubscriber .topRightCloser{
	position:absolute;
	top:15px;
	right:15px;
}

@-webkit-keyframes bounceInDown {
  0%, 40%, 80%, 88%, 95%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-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);
  }

  40% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  80% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  88% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  95% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes bounceInDown {
  0%, 40%, 80%, 88%, 95%, 100% {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-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);
  }

  40% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0);
    transform: translate3d(0, -3000px, 0);
  }

  80% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }

  88% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  95% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }

  100% {
    -webkit-transform: none;
    transform: none;
  }
}


@-webkit-keyframes wobbleMotion {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  80% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  82%, 84% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  86%, 90%, 94%, 98% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  88%, 92%, 96% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes wobbleMotion {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  80% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  82%, 84% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  86%, 90%, 94%, 98% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  88%, 92%, 96% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@media screen and (max-width: 799px){
	#alreadySubscriber{
		display:none;
	}
}


#subTop{
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
	margin-top:10%;
	margin-bottom: 10%;
	position:relative;
	padding:0px;
	box-sizing:border-box;
}

#subTop #email {
	width:72%;
	height:40px;
	max-width:none;
	margin:12px 1% 12px 0%;
	box-sizing:border-box;
	padding:10px 20px;
	font-size:18px;
	border-radius:14px;
	float:left;
	outline:none;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;

}

#subTop #email:hover {
	-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;
	-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;	
	box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;	
}

#subTop #email:focus{
	-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset, 0px 0px 25px #5EB0D9;
	-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset, 0px 0px 25px #5EB0D9;	
	box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset, 0px 0px 25px #5EB0D9;	
}

#subTop #subscribeButton {
	width:23%;
	height:40px;
	margin:12px 0% 12px 1%;
	min-width:120px;
	line-height:18px;
	background-color:#319ACE;
	border-radius:14px;
	border:none;
	padding:10px;
	box-sizing:border-box;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.4);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.4);

}

#subTop #subscribeButton:hover{
	background: #319ace; /* Old browsers */
	background: -moz-linear-gradient(top,  #319ace 1%, #25769c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#319ace), color-stop(100%,#25769c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #319ace 1%,#25769c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #319ace 1%,#25769c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #319ace 1%,#25769c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #319ace 1%,#25769c 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#319ace', endColorstr='#25769c',GradientType=0 ); /* IE6-9 */
}


#headlineComment{
	width:75%;
	margin-top:0px;
	margin-right:10%;
	margin-bottom: 0px;
	margin-left: 15%;
	background-color: rgba(0,0,0,0.6);
	box-sizing:border-box;
	padding:20px;
	border-radius:20px;
	font-size:16px;
	position:relative;
	overflow:hidden;
	display:inline-block;

				  /*Animation*/
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

#headlineCommentContentTwo{
	right:0px;
}

.currentComment{
	position:absolute;
	top:20px;
	opacity:1;
	
				  /*Animation*/
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;

}

.nextComment{
	position:absolute;
	top:20px;
	margin-top:100px;
	opacity:0;

				  /*Animation*/
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

#headlineCommentHeightTest{
	display:none;
}

#headlineComment .moreComments{
	margin-left:40px;
}

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

	#subTop{
		margin-top:40px;
		margin-bottom:40px;
	}
	
	#headlineComment{
		width:100%;
		margin:20px 0% 0px 0%;
	}

	#subTop #email {
		width:100%;
		margin:12px 0% 12px 0%;
	}

	#subTop #subscribeButton {
		width:100%;
		margin:12px 0px 12px 0px;
	}	
}

.customerQuote{
	background:url('images/smiley.png') 13px 10px / 40px 40px no-repeat #319ACE;
	border-radius:30px;
	padding:20px 20px 20px 70px;
	min-height:60px;
	box-sizing:border-box;
	margin-right:20px;
	text-align:left;
	display:inline-block;
	
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

#SBquotesWrap{
	margin-top:0px;
	overflow:hidden;
	padding-top:10px;
}

#SBquotesWrap .customerQuoteWrap.left .customerQuote{
	background:white;
	color:#4a4a4a;
	padding:20px;
}

#headlineCommentContentTwo .customerQuote, .customerQuoteWrap.right .customerQuote{
	background:url('images/smiley.png') right 13px top 10px / 40px 40px no-repeat #25769C;	
	padding:20px 60px 20px 40px;
	margin-left:20px;
}
#SBquotesWrap .customerQuoteWrap.right .customerQuote{
	background:#25769C;
	color:white;
	padding:20px;
	margin-right:0px;
}

#alertContent .customerQuote, #alertContent .customerDetails{
	color:white;
	font-size:16px;
}

#alertContent .customerQuote{
	width:80%;
	margin-top:40px;
}

.commentLink{
	display:block;
	position:relative;
	background-color:#1B536D;
	color:#CCCCCC;
	font-size:12px;
	margin-top:5px;
	padding:3px 6px;
	border-radius:6px;
	width:90px;
	text-align:center;
	cursor:pointer;
}

.commentLink:hover{
	color:yellow;
	background-color:#17475E;
}

.speechPoint{
	width:0px;
	height:0px;
	border: solid 21px #319ACE;
	border-bottom:0px;
	border-left:solid 20px transparent;
	border-right:solid 20px transparent;
	margin-left:60px;
	margin-bottom:5px;
	margin-top:-1px;
	position:relative;
}

#SBquotesWrap .customerQuoteWrap.left .speechPoint{
	border: solid 21px white;	
	border-bottom:0px;
	border-left:solid 20px transparent;
	border-right:solid 20px transparent;
	margin-left:40px;
}

#headlineCommentContentTwo .speechPoint, .customerQuoteWrap.right .speechPoint{
	margin-left:calc(100% - 120px);
	border: solid 21px #25769C;
	border-bottom:0px;
	border-left:solid 20px transparent;
	border-right:solid 20px transparent;	
}

#SBquotesWrap .customerQuoteWrap.right .speechPoint{
	border: solid 21px #25769C;	
	border-bottom:0px;
	border-left:solid 20px transparent;
	border-right:solid 20px transparent;
	margin-left:130px;
}


.customerDetails{
	margin-left:20px;
	margin-right:20px;
	margin-bottom:10px;
	padding:6px 16px;
	background-color:rgba(0,0,0,0.5);
	border-radius:8px;
	display:inline-block;
	color:#CCCCCC;
}

#SBquotesWrap .customerQuoteWrap.left .customerDetails{
	margin-left:0px;
	margin-right:40px;
	margin-bottom:20px;
}

#headlineCommentContentTwo .customerDetails, .customerQuoteWrap.right .customerDetails{
	margin-right:40px;
}

#SBquotesWrap .customerQuoteWrap.right .customerDetails{
	margin-left: 40px;
	margin-right:0px;
}

#alertContent .customerDetails{
	max-width:50%;
}

.commentFlag{
	width:32px;
	height:16px;
	margin:0px 6px 0px 6px;
	position:relative;
	top:2px;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}


#headlineCommentContentTwo .customerQuoteWrap, .customerQuoteWrap.right{
	text-align:right;
}

.moreComments{
	margin:0px 10px 10px 10px;
	padding:10px 30px;
	background-color:#319ACE;
	color: white;
	cursor:pointer;
	position:relative;
	border-radius:14px;
	display:inline-block;
	font-size:15px;
	font-weight:normal;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.moreComments:hover{
	color:yellow;

	background: #319ace; /* Old browsers */
	background: -moz-linear-gradient(top,  #319ace 1%, #25769c 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#319ace), color-stop(100%,#25769c)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #319ace 1%,#25769c 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #319ace 1%,#25769c 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #319ace 1%,#25769c 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #319ace 1%,#25769c 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#319ace', endColorstr='#25769c',GradientType=0 ); /* IE6-9 */

   -webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1); /* IE 9 */
     transform: scale(1.1,1.1);		

		  /*Animation*/
     -moz-transition: -moz-transform 0.5s ease;
       -o-transition: -o-transform 0.5s ease;
      -ms-transition: -ms-transform 0.5s ease;

}

#commentsNavWrap{
	text-align:center;
	margin-top:40px;
	margin-bottom:20px;
}

.commentsNav{
	margin:0px 10px 10px 10px;
	padding:10px 30px;
	background-color:#787878;
	color: white;
	cursor:pointer;
	position:relative;
	border-radius:14px;
	display:inline-block;
	font-size:15px;
	font-weight:normal;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.commentsNav:hover{
	color:yellow;
	background-color:#646464;

   -webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1); /* IE 9 */
     transform: scale(1.1,1.1);		

		  /*Animation*/
     -moz-transition: -moz-transform 0.5s ease;
       -o-transition: -o-transform 0.5s ease;
      -ms-transition: -ms-transform 0.5s ease;

}

.commentsNav.selected{
	background-color:orange;
}

#totals{
	padding:130px 10%;
	margin-bottom:40px;
	text-align:center;
}

@media screen and (min-width: 1340px){
	#totals{
		background:url('images/bottom_left_corner.png') left bottom no-repeat, url('images/bottom_right_corner.png') right bottom no-repeat;
		padding:130px 225px;
	}
}

#bottomSection{
	display:inline-block;
	position:relative;
}

#subscribeBox{
	background-color:#319ACE;
	color:white;
	box-sizing:border-box;
	padding:20px;
	overflow:hidden;	
}

#subscribeBoxTop{
	background-color:#319ACE;	
	padding-right:20px;
	width:100%;
	padding-left:20px;
	padding-bottom:20px;
	margin-left:-20px;
}

#subscribeBoxShadow{
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#319ace+1,319ace+100&amp;1+0,0+100 */
	background: -moz-linear-gradient(top,  rgba(49,154,206,1) 0%, rgba(49,154,206,0.99) 1%, rgba(49,154,206,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(49,154,206,1)), color-stop(1%,rgba(49,154,206,0.99)), color-stop(100%,rgba(49,154,206,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(49,154,206,1) 0%,rgba(49,154,206,0.99) 1%,rgba(49,154,206,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(49,154,206,1) 0%,rgba(49,154,206,0.99) 1%,rgba(49,154,206,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(49,154,206,1) 0%,rgba(49,154,206,0.99) 1%,rgba(49,154,206,0) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(49,154,206,1) 0%,rgba(49,154,206,0.99) 1%,rgba(49,154,206,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#319ace', endColorstr='#00319ace',GradientType=0 ); /* IE6-9 */
	
	height:20px;
	margin-bottom:-20px;	
	width:100%;
	position:relative;
	z-index:5;
}

.subscribeBoxBottom{
	width:100%;
}

.subscribeBoxScrolling{
	width:250px;
	float:right;	
	position:relative;
	height:100vh;
}

.subscribeBoxFixed{
	width:250px;
	position:fixed;
	top:20px;
	right:240px;	
	height:100vh;
}

.subscribeBoxStop{
	width:250px;
	position:absolute;	
	bottom:0px;
	right:0px;
	height:350px;
}

#subscribeBox h1{
	color:white;
}

#subscribeBox input[type=text]{
	width:100%;
	height:40px;
	margin:12px 0;
	margin-top:-10px;	
	box-sizing:border-box;
	padding:10px 10px;
	border:1px #787878 solid;
	border-radius:6px;
	outline:none;
	font-size:14px;
	border-radius:14px;
	float:left;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset;

}

#subscribeBox input[type=text]:hover {
	border:1px orange solid;
	-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;
	-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;	
	box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset;	
}

#subscribeBox input[type=text]:focus{

	border:1px orange solid;

	-webkit-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset, 0px 0px 25px yellow;
	-moz-box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset, 0px 0px 25px yellow;	
	box-shadow: 3px 3px 6px rgba(0,0,0,0.3) inset, 0px 0px 25px yellow;	
}

#subscribeBox input[type=submit]{
	height: 40px;
	border: 3px white solid;
	margin:10px;
	color:white;
	background-color:transparent;
	cursor:pointer;
	padding:6px 12px;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-size:15px;
	font-weight:bold;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 2px 2px 5px rgba(0,0,0,0.2);

}

#subscribeBox input[type=submit]:hover{
	background-color:rgba(255,255,255,0.25);
}

#subFloat{
	text-align:center;
}

#subFloat p{
	font-size:16px;
	margin-top:20px;
}

#subFloat .monthlyAmount{
	font-size:60px;
	display:block;
	font-family: Century Gothic, "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	margin-top:-30px;
}

.customerQuoteWrap.smooth{

				  /*Animation*/
  -webkit-transition: all 5s ease;
     -moz-transition: all 5s ease;
       -o-transition: all 5s ease;
      -ms-transition: all 5s ease;
          transition: all 5s ease;
}


#featuresBlock{
	width:calc(100% - 270px);
	display:inline-block;
}


@media screen and (max-width: 1100px){
	.subscribeBoxInitial{
		width:100%;
	}
	
	#SBquotesWrap{
		display:none;
	}
	
	#featuresBlock{
		width:100%;
		margin-bottom:20px;
	}	
	
}

@media screen and (min-width: 1101px){

	#subscribeBoxWrap{
		position:absolute;
		width:250px;
		overflow:hidden;
		bottom:0;
		top:0px;
		right:0px;
		overflow:hidden;
		clip: rect(0, auto, auto, 0);
	}

	.subscribeBoxInitial{
		width:250px;
		float:right;
		height:100vh;
	}

	#featuresBlock{
		float:left;
	}

}

.feature{
	background-position:20px;
	background-size:80px;
	background-repeat:no-repeat;
	padding:15px 30px 30px 120px;
	box-sizing:border-box;
	height:140px;	
	margin-right:2%;
	margin-top:2%;
	width:48%;
	float:left;
	color:white;
	font-size:16px;
	
	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

			  /*Animation*/
     -moz-transition: -moz-transform 0.5s ease;
       -o-transition: -o-transform 0.5s ease;
      -ms-transition: -ms-transform 0.5s ease;
	
}

a .feature:hover{
   -webkit-transform: scale(1.05,1.05); /* Chrome, Safari, Opera */
    -moz-transform: scale(1.05,1.05);
    -o-transform: scale(1.05,1.05);
    -ms-transform: scale(1.05,1.05); /* IE 9 */
     transform: scale(1.05,1.05);		

	cursor:pointer;
}

.feature h3{
	font-size:24px;
	margin-top:0px;
	color:white;
	width:100%;
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

@media screen and (min-width: 1340px) and (max-width: 1500px), screen and (max-width: 799px) {
	.feature{
		font-size:14px;
		background-position:20px;
		background-size:60px;
		padding:10px 30px 30px 100px;
		height:120px;	
	}

	.feature h3{
		font-size:20px;
	}

}

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

	.feature{
		width:100%;
		margin-right:0%;
	}
}

.feature p{
	color:white;
	width:100%;
	display:block;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	text-decoration:underline;
}

#compFeature{
	background-image:url('https://www.firstwriter.com/images/compIcon.png');
	background-color:#319ACE;	
}

#magFeature{
	background-image:url('https://www.firstwriter.com/images/magIcon.png');
	background-color: #660066;	
}

#agentFeature{
	background-image:url('https://www.firstwriter.com/images/agentIcon.png');
	background-color:#800000;	
	margin-top:0%;
}

#pubFeature{
	background-image:url('https://www.firstwriter.com/images/pubIcon.png');
	background-color: #1B536D;	
	margin-top:0%;
}

@media screen and (max-width: 1339px){
	#pubFeature{
		margin-top:2%;
	}
}

#specialFeature{
	background-image:url('https://www.firstwriter.com/images/starIcon.png');
	background-color:#FF9900;	
}

#dailyAlertsFeature{
	background-image:url('https://www.firstwriter.com/subscribe/images/dailyAlerts.jpg');
	background-color:#F2E1D7;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	color:#4A4A4A;
}

#dailyAlertsFeature h3{
	color:#4a4a4a;
}

#dailyAlertsFeature p{
	color:#4a4a4a;
}

#userFeedbackFeature{
	background-image:url('https://www.firstwriter.com/images/feedbackIcon.png');
	background-color:teal;	
}

#magazineFeature{
	background-color:#8F6E7E;
	background-image:url('https://www.firstwriter.com/subscribe/images/magazine.jpg');
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
}

#savingsFeature{
	background-image:url('https://www.firstwriter.com/subscribe/images/savings.jpg');
	background-color:brown;
	background-size:cover;
	background-position:left;
	background-repeat:no-repeat;
}

#newsletterFeature{
	background-image:url('https://www.firstwriter.com/images/fwn_logo_200.jpg');
	background-color:white;	
	color:#4A4A4A;
	border:1px #787878 solid;
}

#newsletterFeature h3{
	color:#4a4a4a;
}

#newsletterFeature p{
	color:#4a4a4a;
}


.featuresText {
	margin-bottom:5px;
	position:relative;
	height:40px;
}

.featuresText div{
	position:absolute;
	top:0;
	left:0;
	height:40px;
	z-index:0;
	
	  /*Animation*/
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
	
}

.previousText{
	margin-top:-30px;
	opacity:0;
}

.nextText{
	margin-top:30px;
	opacity:0;
}

.feature p{
	position:relative;
}

#databases{
	width:calc(100% - 270px);
}

#reunion{
	background:url('images/welcome_back_banner.jpg') no-repeat center center / cover;
}

#detailsBanner{
	background:url('images/details_banner.jpg') no-repeat center center / cover;
}

#boxesWrapper{
	overflow:hidden;
	margin-bottom:40px;
	position:relative;
}

#oldPassword{
	background-color:#25769C;
	width:48%;
	margin-bottom:0px;
	margin-right:2%;
	box-sizing:border-box;
}

#oldPassword h2{
	color:white;
	margin-top:0px;
}

#createNewAccount{
	width:48%;
	margin-bottom:0px;
	margin-left:2%;
	box-sizing:border-box;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
}

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

	#oldPassword{
		width:100%;
		margin-bottom:40px;
	}
	
	#createNewAccount{
		width:100%;
		position:static;
		margin:0;
	}
	
}

#applyVoucher{
	width:250px;
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	margin-bottom:0;
}

#accountRetrieved{
	float:left;
	width:calc(100% - 275px);
	background-color:#25769C;
	margin-bottom:0px;
	box-sizing:border-box;
}

@media screen and (max-width: 1050px) {
	#applyVoucher{
		width:100%;
		position:static;
	}
	
	#accountRetrieved{
		width:100%;
		margin-bottom:20px;
	}
	
}

#pageLoading{
	text-align:center;
}

#activateAccountBanner{
	background:url('https://www.firstwriter.com/subscribe/images/activate_banner.jpg') no-repeat center center / cover;
}

#accountActiveBanner{
	background:url('https://www.firstwriter.com/subscribe/images/active_banner.jpg') no-repeat center center / cover;
}

#accountInactiveBanner{
	background:url('https://www.firstwriter.com/subscribe/images/inactive_banner.jpg') no-repeat center center / cover;
}

#statusBanner{
	background:url('https://www.firstwriter.com/subscribe/images/status_banner.jpg') no-repeat center center / cover;
}

#accountDisabledBanner{
	background:url('https://www.firstwriter.com/subscribe/images/disabled_banner.jpg') no-repeat center center / cover;
}

#interestsBanner{
	background:url('https://www.firstwriter.com/subscribe/images/interests_banner.jpg') no-repeat center center / cover;
}

#pageContent{
	display:flex;
	flex-wrap:wrap;
}

#pageContent>div{
	flex-grow:1;
	width:25%;
	min-width:250px;
}

#pageContent #accountActiveText{
	flex-grow:2;
	width:50%;
	max-width:none;
	margin-right:20px;
}

#moneyOff h2{
	margin-top:0px;
}

#moneyOffCopyright{
	background-color:orange;
	padding: 20px;
	box-sizing:border-box;
	color:#663300;
	margin:0px;
	margin-left:0px;
	margin-top:0px;
	border-radius:6px;
}

#moneyOffCopyright h2{
	color:#663300;
}

#proceedButtons{
	text-align:right;
	min-height:125px;
	width:200px;
	position:relative;
	left:calc(100% - 200px);
}

@media screen and (min-width: 900px) {

	#interestsTop{
		min-height:125px;
		overflow:hidden;
	}

	#interestsText{
		width:calc(100% - 200px);
		float:left;
	}

	#proceedButtons{
		float:left;
		width:200px;
		left:0;
	}


}

.iaChoicesWrap{
	text-align:center;
	border:2px #25769C solid;
	margin:20px 0px;
	padding:3px;
	border-radius:9px;
	height:36px;
	overflow:hidden;
	background-image:url('https://www.firstwriter.com/images/loadingBlue.gif'); 
	background-repeat: no-repeat; 
	background-position:center 50px; 

				  /*Animation*/
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.iaChoicesWrap.permOpen{
	height:auto;
}

.iaChoicesWrap.incomplete{
	border:2px #CC0000 solid;
	background-color:#FFD5D5;
}

.iaChoicesHead{
	text-align:left;
	color:white;
	background-color:#25769C;
	border-radius:6px;
	font-size:16px;
	padding:10px;
	height:16px;
	display:block;
}

.iaChoicesWrap.incomplete .iaChoicesHead{
	background-color:#CC0000;
	color:#FFD5D5;
}

.iaChoicesHead input[type=checkbox]{
	width:25px;
	height:25px;
	margin-top:-4px;
	box-shadow:none;
}

.iaChoicesWrap input[type=checkbox]{
	box-shadow:none;
}

.iaChoicesWrap input[type=checkbox]:hover{
	box-shadow:none;
}

.iaChoicesWrap input[type=checkbox]:focus{
	box-shadow:none;
}

.allCheck{
	float:left;
	width:65%;
}

.allCheckText{
	top:-8px;
	left:2px;
	position:relative;
	display:inline-block;
}

.refine{
	float:right;
	width:35%;
	text-align:right;
	font-style:italic;
	color:#9BCFE8;
}

.iaChoicesWrap.incomplete .refine{
	color:#FFD5D5;	
}

.refine.closed:after{
	content:"Refine";
}

.refine.open:after{
	content:"Select All";
}

.arrowDown{
	width:0;
	height:0;
	border:5px solid transparent;
	border-bottom-width:0;
	border-top-color:#9BCFE8;
	float:right;
	margin:5px;
}

.iaChoicesWrap.incomplete .arrowDown{
	border-top-color:#FFD5D5;
}

.arrowUp{
	width:0;
	height:0;
	border:5px solid transparent;
	border-top-width:0;
	border-bottom-color:#9BCFE8;
	float:right;
	margin:5px;
}

.iaChoicesWrap.incomplete .arrowUp{
	border-bottom-color:#FFD5D5;
}

.iaMessage{
	font-size:16px;

				  /*Animation*/
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
	
}

.iaChoicesWrap.incomplete .iaMessage:after{
	content: "You haven't made a selection for this category. If you want to receive email updates you need to either select \"All\" above, or at least one of the options below.";
}

.iaChoicesWrap.incomplete .iaMessage{
	color:#CC0000;
	padding-top:20px;
}

.iaChoicesBlock{
	margin:20px;
	display:inline-block;
}

.iaChoicesWrap.permOpen {
	background-image:none; 
}

.iaChoice{
	width:250px;
	height:80px;
	margin:0px 10px 20px 10px;
	background-position:15px;
	background-size:50px;
	background-repeat:no-repeat;
	cursor:pointer;
	box-sizing:border-box;
	padding: 22px 80px 0px 22px;
	color:white;
	position:relative;
	font-size:16px;
	text-align:left;
	display:inline-block;
	vertical-align:top;
	background-color:#25769c;

	-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
	-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);	
	box-shadow: 2px 2px 5px rgba(0,0,0,0.2);

			  /*Animation*/
     -moz-transition: -moz-transform 0.5s ease;
       -o-transition: -o-transform 0.5s ease;
      -ms-transition: -ms-transform 0.5s ease;
	
}

.iaChoice:nth-of-type(even){
	background-color:#319ACE;
}

.iaChoice:hover{
   -webkit-transform: scale(1.1,1.1); /* Chrome, Safari, Opera */
    -moz-transform: scale(1.1,1.1);
    -o-transform: scale(1.1,1.1);
    -ms-transform: scale(1.1,1.1); /* IE 9 */
     transform: scale(1.1,1.1);		

}

.iaChoice input[type=checkbox]{
	width:40px;
	height: 40px;
	position:absolute;
	right:20px;
	top:20px;
}

#compDatabase{
	background-image:url('https://www.firstwriter.com/images/compIcon.png');
	background-color:#319ACE;	
	padding: 22px 80px 0px 80px;
}

#magDatabase{
	background-image:url('https://www.firstwriter.com/images/magIcon.png');
	background-color: #660066;	
	padding: 22px 80px 0px 80px;
}

#agentDatabase{
	background-image:url('https://www.firstwriter.com/images/agentIcon.png');
	background-color:#800000;	
	padding: 22px 80px 0px 80px;
}

#pubDatabase{
	background-image:url('https://www.firstwriter.com/images/pubIcon.png');
	background-color: #1B536D;	
	padding: 22px 80px 0px 80px;
}

.iaChoice .flag{
	height:25px;
	float:left;
	margin:0 10px;
}

.iaMask{
	background-color:white;
	height:56px;
	width:200px;
	position:relative;
	margin-top:-60px;
	opacity:0.7;

}

.iaMask.off{
	opacity:0;
	height:0;
	margin-top:0;
}


#plansBanner{
	background:url('images/plans_banner.jpg') no-repeat center center / cover;
}

.subPlan{
	padding:5px 50px 50px 50px;
}

@media screen and (max-width: 799px){
	.subPlan{
		width:106%;
		margin-left:-8%;
		padding:5px 5% 50px 5%;
	}
}


.subPlan h2{
	padding:5px 20px;
	background-color:rgba(255,255,255,0.8);
	display:inline-block;
	border-radius:14px;
	margin-bottom:40px;
}

.subPlanText{
	background-color:rgba(255,255,255,0.8);
	padding:20px 30px 5px 30px;
	border-radius:14px;
	box-sizing:border-box;
	width:70%;
	margin-left:10%;
	margin-right:20%;

}

@media screen and (max-width: 799px){
	.subPlanText{
		width:auto;
		margin-left:0;
		margin-right:0;
	}
}


.subPlan .fwButton{
	margin-top:30px;
	margin-left:25%;
}

#lifeSub{
	background:url('https://www.firstwriter.com/subscribe/images/active_banner.jpg') no-repeat center center / cover;
}

#annualSub{
	background-image:url('https://www.firstwriter.com/subscribe/images/annualSub.jpg');
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;
}

#combinationSub{
	background:url('https://www.firstwriter.com/subscribe/images/combinationSub.jpg') no-repeat center center / cover;
}

#quarterlySub{
	background-image:url('https://www.firstwriter.com/subscribe/images/quarterlySub.jpg');
	background-repeat: no-repeat;
	background-position: right center;
	background-size: auto 100%;
}

#monthlySub{
	background:url('https://www.firstwriter.com/subscribe/images/monthlySub.jpg') no-repeat center center / cover;
}

#affConversion{
	border:0px;
}

#voucherReduce{
	border:0px;
}

#paymentBanner{
	background:url('https://www.firstwriter.com/subscribe/images/payment_banner.jpg') no-repeat center center / cover;
}

#createAccountLoading{
	text-align:center;
}

#loginBanner{
	background-image:url('https://www.jpandadyson.com/firstwriter/images/keys_banner.jpg');
	background-position:top;
}