/* ------------------------

Financial Ombudsman Service
Screen Style Sheet for "What's Kepping You Awake?" section
last update: 22 October 2017
author: info@ecru.co.uk

------------------------ */

.cf:before,
.cf:after {
content: " ";
display: table;
}

.cf:after {
clear: both;
}

.cf {
*zoom: 1;
}

/* !HOME --------------- */

#home #contentWrap .panel.webfocus {
padding-bottom: 0;
background-color: #000;
}

#home #contentWrap .panel.webfocus h3 {
color: #fff;
width: auto;
font-size: 1.6666em;
line-height: 1.3em;
text-shadow: 0 0 0 #000;
-webkit-font-smoothing: antialiased;
margin-top: 1em;
}

#home #contentWrap .panel.webfocus p {
color: #fff;
width: auto;
font-size: 1.25em;
line-height: 1.5em;
text-shadow: 0 0 0 #000;
-webkit-font-smoothing: antialiased;
}

#home #contentWrap .panel.webfocus .we-can-help {
min-height: 110px;
background: #000 url("../images/hakon-phone-homepage.png") no-repeat bottom left;
}

#home #contentWrap .webfocus .we-can-help p {
width: auto;
margin: 0 0 0 80px;
font-size: 1.25em;
line-height: 1.5em;
padding-top: 25px;
}

#home #contentWrap .panel.webfocus a:link,
#home #contentWrap .panel.webfocus a:visited {
color: #e5007e;
}

#home #contentWrap .panel.webfocus a:hover,
#home #contentWrap .panel.webfocus a:active {
border-color: #e5007e !important;
}

/* 480px */
@media only screen and (min-width: 480px) {

#home #contentWrap .panel.webfocus {
background: #000 url("../images/eyes-homepage.gif") no-repeat 88% 48%;
}

#home #contentWrap .panel.webfocus h3 {
width: 49%;
}

#home #contentWrap .panel.webfocus p {
width: 49%;
}

#home #contentWrap .webfocus .we-can-help p {
width: auto;
padding-top: 38px;
}

}

/* 768px */
@media only screen and (min-width: 768px) {

#home #contentWrap .panel.webfocus {
background-position: 83% 50%;
}

#home #contentWrap .panel.webfocus h3 {
width: 55%;
margin-top: 1.5em;
}

#home #contentWrap .panel.webfocus p {
width: 55%;
}

#home #contentWrap .webfocus .we-can-help p {
width: auto;
padding-top: 38px;
}

}

/* 928px */
@media only screen and (min-width: 928px) {

#home #contentWrap .panel.webfocus {
background-position: 88% 45%;
}

#home #contentWrap .panel.webfocus h3 {
width: 46%;
margin-top: 1em;
}

#home #contentWrap .panel.webfocus p {
width: 46%;
}

#home #contentWrap .webfocus .we-can-help p {
width: auto;
padding-top: 38px;
}

}

/* 1248px */
@media only screen and (min-width: 1024px) {

#home #contentWrap .panel.webfocus {
background-position: 83% 48%;
}

#home #contentWrap .panel.webfocus h3 {
font-size: 2em;
line-height: 1.3em;
}

#home #contentWrap .panel.webfocus .we-can-help p {
font-size: 1.5em;
line-height: 1.25em;
}

}

/* !LANDING PAGE ------------------------------------------------------------------------- */

.landing #contentWrap #breadcrumb {
margin: 0 15px;
}

.landing .banner-large,
.landing .banner-medium {
display: none;
}

.landing #rightColumn,
.landing #leftColumn {
margin: 0;
}

.landing #rightColumn .panel {
border: none;
}

.landing #rightColumn .panel p {
margin: 0;
color: #333;
padding: 0 15px;
}

#news.landing #contentWrap .panel {
margin: 15px 0 25px;
border-top: 1px solid #DEDEDE;
background-color: transparent;
}

.landing .lead {
margin: 0 15px;
padding-bottom: 1px;
}

.landing .lead p {
margin: 1.5em 0 1em;
}

.landing .lead .intro {
font-size: 1.1666em;
line-height: 1.4285em;
}

#news.landing .panel h2 {
font-size: 1.1666em;
line-height: 1.4285em;
color: #555;
margin-bottom: 15px;
padding: 9px 15px;
border-bottom: 1px solid #DEDEDE;
background: #EEE url("../images/mobile-menu-bg.gif") repeat-x 0 0;
}

#news.landing .panel h2 a:link,
#news.landing .panel h2 a:visited {
color: #2b6198;
}

#news.landing .panel h2 a:hover,
#news.landing .panel h2 a:active {
color: #1d2172;
border-bottom: 1px solid #999;
}

.landing .panel ul {
margin: 0.8333em 0;
padding: 0 15px;
}

.landing .panel p {
padding: 0 15px;
}

.landing .panel li {
margin: 0 0 0.4166em 0;
border-top: none;
background: url("../images/arrow_purple.gif") no-repeat 0 0.6em;
padding: 0 0 0 10px;
font-size: 1em;
line-height: 1.6666em;
}

.landing .panel a:link,
.landing .panel a:visited {
border-bottom: 1px solid transparent !important;
}

.landing .panel a:hover,
.landing .panel a:active {
border-bottom-color: #999 !important;
}

.landing .panel .image {
margin: 5px 15px;
}

.landing .panel .image a:hover {
border: none !important;
}

.landing .panel img {
max-width: 100%;
}

/* 470px */
@media only screen and (min-width: 470px) {
.landing .banner-large,
.landing .banner-small {
display: none;
}
.landing .banner-medium {
display: block;
}
}

/* 600px */
@media only screen and (min-width: 600px) {

#news.landing #leftColumn {
width: auto;
float: none;
}

#news.landing #contentWrap .panel {
margin: 15px;
border: 1px solid #DEDEDE;
background-color: #fff;
padding-bottom: 10px;
min-height: 170px;
_height: 170px;
}

#news.landing .panel h3 {
font-size: 1.3333em;
line-height: 1.25em;
padding: 0 15px;
}

#news.landing #contentWrap .panel {
margin: 15px;
}

#news.landing .panel h2 {
font-size: 1.75em;
line-height: 1.4285em;
color: #333;
margin: 0;
padding: 1.2em 20px 0;
border-bottom: none;
background: none;
}

#news.landing .panel p {
margin: 1em 0;
font-size: 1.25em;
line-height: 1.5em;
padding: 0 20px;
}

#news.landing #contentWrap .panel a:hover,
#news.landing #contentWrap .panel a:active {
color: #333 !important;
border-color: #fff !important;
}

#news.landing #contentWrap .panel {
border: none;
}

#news.landing #contentWrap .panel .panel-col {
width: 47%;
float: left;
}

#news.landing #contentWrap .panel .panel-col.image {
text-align: right;
}

#news.landing #contentWrap .phone-us {
background: #9cba5f url("../images/awake-phone-us-bg.png") no-repeat left bottom;
padding-left: 140px;
}

#news.landing #contentWrap .phone-us h2 {
color: #423E38;
}

#news.landing #contentWrap .watch-video {
background: #fdd250;
}

#news.landing #contentWrap .watch-video .image {
float: right;
margin: 15px 15px 5px;
}

#news.landing #contentWrap .people-helped {
background: #a7c8e6 url("../images/awake-people-helped.png") no-repeat right bottom;
padding-right: 200px;
}

#news.landing #contentWrap .how-to-complain {
background: #a7c8e6 url("../images/awake-phone-us-bg.png") no-repeat right bottom;
padding-right: 10px;
}

#news.landing #contentWrap .payday-rights {
background: #fac0de url("../images/awake-payday-rights.png") no-repeat left bottom;
padding-left: 260px;
}

#news.landing #contentWrap .problems-sorted {
background: #c8ced2 url("../images/awake-problems-sorted.png") no-repeat right top;
padding-right: 290px;
}

}

/* 768px */
@media only screen and (min-width: 768px) {

.landing #contentWrap #breadcrumb {
margin: 20px 0;
}

.landing .banner-medium,
.landing .banner-small {
display: none;
}
.landing .banner-large {
display: block;
}

.landing .lead	 {
margin: 0;
}

#news.landing .lead .intro {
margin-top: 2em;
font-size: 1.25em;
line-height: 1.5em;
}

#news.landing .lead p {
margin: 1.3333em 0;
}

#news.landing #contentWrap .panel {
margin-left: 0;
margin-right: 0;
}

}

/* 928px */
@media only screen and (min-width: 928px) {

#news.landing #contentWrap {
margin: 0 20px;
}

.landing #contentWrap #breadcrumb {
margin: 0;
background-image: none;
}

#news.landing #leftColumn,
#news.landing #rightColumn {
width: 49%;
float: left;
margin: 40px 0 0;
padding-bottom: 5px;
}

#news.landing #rightColumn {
float: right;
}

#news.landing .lead {
margin-bottom: 1.5em;
font-size: 1.25em;
line-height: 1.5em;
}

#news.landing .lead .intro {
margin: 0;
}

#news.landing #contentWrap .panel {
margin: 0 0 4%;
}

#news.landing #contentWrap .panel .panel-col {
width: 46%;
}

#news.landing #contentWrap .panelwrap {
float: left;
}

#news.landing #contentWrap .panelwrap .panel {
margin: 0 0 15px;
width: 48%;
}

#news.landing #contentWrap .payday-rights {
padding-left: 0;
float: left;
}

#news.landing #contentWrap .payday-rights .push {
display: block;
padding-bottom: 175px;
}

#news.landing #contentWrap .problems-sorted {
padding-right: 0;
float: right;
background-position: 50% 0;
}

#news.landing #contentWrap .problems-sorted .push {
display: block;
padding-top: 220px;
}

#news.landing .panel h3 {
font-size: 1.3333em;
line-height: 1.25em;
margin: 0.9375em 0 0.625em 0;
}

#news.landing .panel ul {
margin: 0.8333em 0;
}

}

/* !INNER PAGES -------------------------------------------------------------------------- */

.payday .intro {
font-size: 1.1666em;
line-height: 1.4285em;
}

#mainContent .case {
position: relative;
margin-bottom: 1em;
}

#mainContent .case img {
display: none;
}

#mainContent .case .speech-bubble {
-webkit-border-radius: 12px 12px 12px 12px;
border-radius: 12px 12px 12px 12px;
padding: 20px 0 14px;
background: #fff url("../images/quote_open.png") no-repeat 11px 18px;
margin-bottom: 2.5em;
}

#mainContent .case-name {
background: url("../images/payday-lewis-small.jpg") no-repeat 0 0;
min-height: 65px;
padding-left: 65px;
}

#mainContent .leanne .case-name {
background-image: url("../images/payday-leanne-small.jpg");
}

#mainContent .jon .case-name {
background-image: url("../images/payday-jon-small.jpg");
}

#mainContent .claire .case-name {
background-image: url("../images/payday-claire-small.jpg");
}

#mainContent .leanne .case-name {
background-image: url("../images/payday-leanne-small.jpg");
}

#mainContent .kevin .case-name {
background-image: url("../images/payday-kevin-small.jpg");
}

#mainContent .julie .case-name {
background-image: url("../images/payday-julie-small.jpg");
}

#mainContent .stuart .case-name {
background-image: url("../images/payday-stuart-small.jpg");
}

#mainContent .tejal .case-name {
background-image: url("../images/payday-tejal-small.jpg");
}

#mainContent .case-name h2 {
margin: 10px 20px 15px 0;
font-size: 1.7em;
}

#mainContent h3.how-we-helped {
min-height: 40px;
background: #f2f2f2 url("../images/payday-om-buds-man-bubbles.png") no-repeat 0 0;
padding: 17px 0 0 85px;
}

#mainContent .case .speech-bubble h3 {
font-size: 1.7em;
color: #4b90cd;
margin: 0 0 0.5em;
padding: 0 40px;
}

#mainContent .case blockquote {
background: #fff url("../images/quote_close.png") no-repeat bottom right;
padding: 0 35px 2px 40px;
margin-right: 11px;
margin-bottom: 0;
}

#mainContent .case blockquote p {
background-image: none;
padding: 0;
}

.payday .awake {
background-color: #000;
padding: 80px 0 1px;
background: #000 url("../images/eyes-homepage.gif") no-repeat 50% 12%;
margin-bottom: 40px;
}

.payday .awake h2 {
color: #fff;
padding: 0 15px;
text-align: center;
}

.payday .awake p {
color: #fff;
padding: 0 15px;
text-align: center;
}

.payday #mainContent .awake a:link,
.payday #mainContent .awake a:visited {
color: #e5007e;
border-bottom-color: #000;
white-space: nowrap;
}

.payday #mainContent .awake a:hover,
.payday #mainContent .awake a:active {
border-color: #e5007e !important;
}

.payday-rights #mainContent ul {
margin-bottom: 3em;
}

.payday #rightColumn .panel .indent {
margin-left: 110px !important;
min-height: 100px;
}

.payday #rightColumn .phone-us {
background: #9cba5f url("../images/phone-us-small.jpg") no-repeat left bottom;
min-height: 120px;
border: none;
}

.payday #rightColumn .phone-us h2 {
padding: 15px;
background-color: transparent;
color: #423e38;
font-size: 1.3333em;
line-height: 1.25em;
padding-top: 15px;
}

.payday #rightColumn .phone-us p {
color: #333;
padding: 0 15px;
margin: 0 0 10px;
}

.payday #rightColumn .phone-us .image {
float: left;
width: 110px;
height: 110px;
}

.payday #rightColumn .phone-us a:link,
.payday #rightColumn .phone-us a:visited {
color: #313A6E;
border-bottom: 1px solid #cedeae;
}

.payday #rightColumn .phone-us a:hover,
.payday #rightColumn .phone-us a:active {
color: #000;
border-color: #fff;
}

.payday #rightColumn .video {
background-color: #fdd250;
border: none;
}

.payday #rightColumn .video h2 {
background-color: transparent;
font-size: 1.3333em;
line-height: 1.25em;
color: #333;
padding-top: 15px;
margin: 0 !important;
}

.payday #rightColumn .video p {
padding: 0 15px 15px 15px;
margin: 0 !important;
}

.payday #rightColumn .video a:link,
.payday #rightColumn .video a:visited {
color: #313A6E;
border-bottom: 1px solid #fee9a8;
}

.payday #rightColumn .video a:hover,
.payday #rightColumn .video a:active {
color: #000;
border-color: #fff;
}

.payday #rightColumn .video img {
display: none;
}

.payday #rightColumn .fee {
border: none;
background: #a7c8e6 url("../images/payday-loan-fee.jpg") no-repeat left bottom;
}

.payday #rightColumn .fee {
border: none;
background: #a7c8e6 url("../images/payday-loan-fee.jpg") no-repeat left bottom;
}

.payday #rightColumn .fee .image {
float: left;
width: 110px;
height: 110px;
}

.payday #rightColumn .fee .indent {
min-height: 110px;
}

.payday #rightColumn .fee h2 {
background-color: transparent;
font-size: 1.3333em;
line-height: 1.25em;
color: #333;
padding-top: 15px;
margin: 0 !important;
}

.payday #rightColumn .fee p {
padding: 0 15px 15px 15px;
margin: 0 !important;
color: #333;
}

.payday #rightColumn .fee a:link,
.payday #rightColumn .fee a:visited {
color: #313A6E;
border-bottom: 1px solid #d3e4f3;
}

.payday #rightColumn .fee a:hover,
.payday #rightColumn .fee a:active {
color: #000;
border-color: #fff;
}

.payday #rightColumn .fee img {
display: none;
}

.payday #rightColumn .power {
border: none;
background: #a7c8e6 url("../images/poa-large.jpg") no-repeat left bottom;
}

.payday #rightColumn .power {
border: none;
background: #a7c8e6 url("../images/poa-large.jpg") no-repeat left bottom;
}

.payday #rightColumn .power .image {
float: left;
width: 110px;
height: 110px;
}

.payday #rightColumn .power .indent {
min-height: 110px;
}

.payday #rightColumn .power h2 {
background-color: transparent;
font-size: 1.3333em;
line-height: 1.25em;
color: #333;
padding-top: 15px;
margin: 0 !important;
}

.payday #rightColumn .power p {
padding: 0 15px 15px 15px;
margin: 0 !important;
color: #333;
}

.payday #rightColumn .power a:link,
.payday #rightColumn .power a:visited {
color: #313A6E;
border-bottom: 1px solid #d3e4f3;
}

.payday #rightColumn .power a:hover,
.payday #rightColumn .power a:active {
color: #000;
border-color: #fff;
}

.payday #rightColumn .power img {
display: none;
}

.payday #rightColumn .working-with img {
margin: 7px 0 14px;
}

.payday #rightColumn .working-with p {
padding: 0;
margin: 0;
color: #333;
}

/* 480px */
@media only screen and (min-width: 480px) {

#mainContent h3.how-we-helped {
font-size: 1.7em;
}

}

/* 600px */
@media only screen and (min-width: 600px) {

.payday #rightColumn {
width: 65%;
float: right;
}

.payday #rightColumn .panel {
margin-left: 15px;
}

}

/* 768px */
@media only screen and (min-width: 768px) {

.payday #rightColumn {
width: 67%;
}

.payday #rightColumn .panel {
margin-left: 0;
}

.payday #rightColumn .phone-us h2,
.payday #rightColumn .video h2,
.payday #rightColumn .fee h2,
.payday #rightColumn .fee h2 {
background-image: none;
}

.payday #rightColumn .video h2,
.payday #rightColumn .video p {
padding-right: 210px;
}

.payday #rightColumn .video {
min-height: 125px;
background: #fdd250 url("../images/video-small.jpg") no-repeat top right;
}

}

/* 928px */
@media only screen and (min-width: 928px) {

.payday .intro {
font-size: 1.3333em;
line-height: 1.4em;
}

.payday .banner {
height: 160px;
margin-bottom: 3em;
}

.people-helped .banner {
background: #a7c8e6 url("../images/people-helped-banner.png") no-repeat 110% 0;
}

.problems-sorted .banner {
background: #a7c8e6 url("../images/problems-sorted-banner.png") no-repeat 115% 0;
}

.payday-rights .banner {
background: #a7c8e6 url("../images/payday-rights-banner.png") no-repeat 100% 0;
}

.payday #mainContent .banner h1 {
background-image: none;
padding: 35px 0 0 30px;
width: 270px;
}

#mainContent .case {
margin-bottom: 3em;
}

#mainContent .case img {
max-width: 100%;
display: block;
}

#mainContent .case-content {
margin-left: 130px;
}

#mainContent .case-name {
width: 130px;
position: absolute;
top: 0;
left: 0;
background-image: none;
padding-left: 0;
margin-bottom: 0;
}

#mainContent .flip .case-name {
left: auto;
right: 0;
}

#mainContent .case-name h2 {
margin: 10px 20px 0 0;
text-align: center;
font-size: 1.5em;
}

#mainContent .flip .case-name h2 {
margin: 10px 0 0 20px;
}

#mainContent .flip .case-name {
left: auto;
right: 0;
}

#mainContent .flip .case-content {
margin-left: 0;
margin-right: 130px;
}

#mainContent .case .speech-bubble h3,
#mainContent h3.how-we-helped {
font-size: 2em;
}

.payday #rightColumn {
width: 20%;
}

.payday #rightColumn .panel .indent {
margin: 0 !important;
}

.payday #rightColumn .phone-us {
background: #9cba5f url("../images/phone-us-large.png") no-repeat left bottom;
min-height: 120px;
padding-bottom: 210px;
}

.payday #rightColumn .phone-us h2 {
font-size: 1.6666em;
}

.payday #rightColumn .phone-us h2,
.payday #rightColumn .phone-us p {
padding-left: 15px;
}

.payday #rightColumn .video {
background-image: none;
}

.payday #rightColumn .video img {
display: block;
}

.payday #rightColumn .video h2,
.payday #rightColumn .video p {
padding-right: 15px;
}

.payday #rightColumn .fee {
background: #a7c8e6 url("../images/payday-loan-fee-large.png") no-repeat left bottom;
min-height: 120px;
padding-bottom: 190px;
}

.payday #rightColumn .power {
background: #a7c8e6 url("../images/poa-large.jpg") no-repeat left bottom;
min-height: 120px;
padding-bottom: 190px;
}

}

/* 1024px */
@media only screen and (min-width: 1024px) {

.people-helped .banner {
background-position: top right;
}

.people-helped #mainContent .banner h1 {
padding: 55px 0 0 30px;
width: 370px;
}

.payday .awake {
padding: 1px 0 1px;
background: #000 url("../images/eyes-homepage.gif") no-repeat 90% 50%;
margin-bottom: 30px;
}

.payday .awake h2 {
padding: 0 230px 0 20px;
text-align: left;
}

.payday .awake p {
padding: 0 230px 0 20px;
text-align: left;
}

.payday #mainContent .awake a:link,
.payday #mainContent .awake a:visited {
color: #e5007e;
border-bottom-color: #000;
white-space: nowrap;
}

.payday #mainContent .awake a:hover,
.payday #mainContent .awake a:active {
border-color: #e5007e !important;
}

}

/* 1150px */
@media only screen and (min-width: 1150px) {

.problems-sorted .banner {
background-position: top right;
}

.problems-sorted #mainContent .banner h1 {
width: 350px;
}

.payday-rights #mainContent .banner h1 {
padding: 55px 0 0 30px;
width: 390px;
}

}

/* 1248px */
@media only screen and (min-width: 1248px) {

.payday #rightColumn {
width: 18%;
}

}

/* !CALLBACK FORM ------------------------------------ */

.modal {
background: #fff;
background: rgba(255,255,255,0.8);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0 10px;
}

.modal .inner {
margin: 70px auto;
max-width: 560px;
position: relative;
background: white;
border: 1px solid #dedede;
}

.modal iframe {
width: 100%;
height: 390px;
border: none;
}

.modal .close {
position: absolute;
color: white;
top: -30px;
right: -1px;
padding: 5px 10px 5px 26px;
background: #4b90cd url("../images/close.png") no-repeat 6px 6px;
text-decoration: none;
transition: background 200ms linear;
}

.modal .close:hover {
background: #2b7abf url("../images/close.png") no-repeat 6px 6px;
}

.callback-form {
color: #333;
padding: 20px 20px 20px;
}

.callback-form h2 {
font-size: 1.6em;
margin-bottom: 1em;
}

.callback-form .input-row {
margin: 0 0 10px;
clear: both;
width: 100%;
}

.callback-form .input-row label {
float: left;
margin-right: 20px;
text-align: left;
display: inline-block;
padding: 0 0 2px 0;
}

.callback-form .input-row input {
padding: 0.5em 1em;
width: 95%;
border: 1px solid #dedede;
font-size: 1em;
background-color: #fcfcfc;
color: #555;
display: inline-block;
}

.callback-form .input-row input:focus {
border-color: #ccc;
background-color: #fff;
color: #333;
outline: none;
}

.callback-form .button-row {
clear: both;
padding: 10px 0;
}

.callback-form input[type=submit] {
background-color: #4b90cd;
border: none;
color: #fff;
font-size: 1.1666em;
padding: 6px 10px;
float: right;
transition: background 200ms linear;
}

.callback-form input[type=submit]:hover {
background-color: #2b7abf;
}

.callback-form .send-errors {
display: none;
}

#ctl04 {
color: #933;
font-size: 1.3333em;
}

#ctl04 ul {
margin: 5px 0 20px;
}

#ctl04 ul li {
color: #933;
font-size: 0.9em;
}

#RequiredFieldValidator2 {
color: #933;
}

/* 540px */
@media only screen and (min-width: 540px) {

.callback-form .banner {
background: #9cba5f url("../images/callback-banner.jpg") no-repeat left bottom;
}

.callback-form .banner h2 {
padding: 28px 40px 28px 120px;
color: #333;
}

.callback-form .input-row label {
width: 160px;
display: block;
text-align: right;
padding-top: 6px;
}

.callback-form .input-row input {
width: 308px;
}

.callback-form input[type=submit] {
margin-right: 10px;
}

.modal iframe {
height: 618px;
}

}