/* Landscape phones and down */
@media (max-width: 767px) {
	/* Headers
	-----------------------------------------------*/
	h1 {font-size: 22px; padding-bottom: 6px;}
	h1 small {display: none;}
	h1 span {font-size: 20px; margin-right: 8px;}
	h3 {font-size: 22px; padding-bottom: 6px;}
	h3 span {font-size: 20px; margin-right: 8px;}

	/* Layout
	===============================================*/
	.ml40 {margin-left: 20px !important;}
	.ml50 {margin-left: 0 !important;}
	.mb10-xs {margin-bottom: 10px;}
	.mb50-xs {margin-bottom: 50px;}
	.button, .button.long {
        float: none;
        width: 100%;
	}

	/* Header
	-----------------------------------------------*/
	header .container {padding: 15px;}
	header h1 {
		background: url('../images/logo-mobile.png') no-repeat;
		background-size: cover; 
		height: 16px;
		margin-top: 2px;
		width: 205px;
	}

	h1.help {width: 86%;}
	.show-help {margin-top: 0; padding: 11px 0;}

	header .col-xs-6 {padding: 0 15px;}

	/* Cookie Notifications */
	.cookies .content {margin-left: 15px; width: 75%;}
	.cookies .close-it {margin-right: 15px;}

	/* Mobile Navigation */
	.show-menu {font-size: 20px; margin: 0;}
	.show-menu:hover, .show-menu.active {color: #949494; text-decoration: none;}

	/* Body
	-----------------------------------------------*/
	.body {margin: 10px 0 30px 0;}
	sup, .benefits-modeller-overview sup {top: -0.5em;}
	a:hover {text-decoration:none;}

	/* Footer
	-----------------------------------------------*/
	footer .row {margin: 0;}

	/* Sections
	===============================================*/
		/* Home
		-----------------------------------------------*/
		.intro .col-sm-7 {margin-bottom: 20px;}
		.intro h1 {float: left; width: 86%;}
		.intro .lines {padding: 11px 0;}
		.news .col-sm-7 {margin-bottom: 40px;}
		.intro hr {display: none;}
		.content-info {display: none;}

		/* Benefits
		-----------------------------------------------*/
		.benefit-overview .col-sm-6 {border: none !important; margin: 0 15px; padding: 10px 0;}
		.benefit-overview .col-sm-6.dark-grey {margin-bottom: 20px; padding-left: 0;}
		.benefit-overview .col-sm-6 > section {float: none; height: auto; padding: 0 15px; width: 100%;}
		.benefit-overview .col-sm-6 > section.left {padding-bottom: 8px; width: 100%;}

		.benefit-overview h3 {line-height: 18px;}
		.benefit-overview .col-sm-6.dark-grey h3 {float: left; font-size: 16px; margin: 0 20px 0 0; width: 40%;}
		.benefit-overview h4 {font-size: 30px;}
		.benefit-overview .col-sm-6.light-grey h3 {font-size: 24px;}
		.benefit-overview .col-sm-6 p span {font-size: 20px;}

		.calendar input {
			-webkit-appearance: none;
			box-shadow: none;
			border-radius: 0;
            margin-bottom: 5px;
			width: 58%;
		}
		.calendar label {
			display: block;
            line-height: 45px;
            margin: 0;
			padding: 0;
            width: 50px;
		}
        .calendar p.red {
            margin-top: 10px;
		}

		.sidenote {
			margin-top: 10px;
			width: 100%;
		}

        #browse-documents {
            margin-top: 20px;
        }

		/* Your fund balance
		-----------------------------------------------*/
		.fund-value h3 {
			font-size: 16px;
			float: left;
			margin: 0 10px 0 0;
		}

		.fund-value h4 {
			font-size: 22px; 
			float: left;
			line-height: 19px;
		}

		/*.doughnut-chart {display: block; margin: 0 auto 30px auto; height: 200px !important; width: 200px !important;}*/
		.remember-this {margin-bottom: 20px;}
		.fund-value {margin-bottom: 10px; margin-top: -5px;}

		/*.account-navigation.fund-navigation li {width: 50%;}
		.account-navigation.fund-navigation li:nth-child(1), .account-navigation.fund-navigation li:nth-child(2) {border-bottom: 1px solid rgb(209,209,209);}
		.account-navigation.fund-navigation li:nth-child(2) span {border-right: none;}*/
        .available-buttons { float:none; } 
        .available-buttons a.button {margin: 0 0 5px 0; width: 100%;}
		.available-buttons a:last-child {margin-bottom: 20px;}
		.fund-performance .available-handler h5, #all-available-performance-funds .available-handler h5 {padding: 5px 0;}
		/*.available-handler p, .all-available-handler p {width: 70px;}*/
		/*.available-handler .toggle {padding: 21px 20px;}*/

		.fund-slider-mobile {width: 100% !important;}

		.fund-slider-mobile p {
			margin-bottom: 10px;
			text-align: left;
		}

		.available-content .slide, .all-available-content .slide, .available-content p, .all-available-content p {padding: 0;}
		.fund-info-mobile {border-top: 1px solid rgb(218,218,218); border-bottom: 1px solid rgb(218,218,218); width: 100%;}
		.fund-slider-mobile .ui-slider {width: 190px;}
		.fund-slider-mobile .fund-changer {margin: 20px auto !important;}
		.slide {width: 50%;}
		

		.percentage-mobile {
			font-size: 30px;
			float: left;
			padding: 20px;
			text-align: center;
			width: 50%;
		}

		.view-performance {
			padding: 20px;
			width: 50%;
		}

		table {font-size: 13px;}

		.window-mask .window {
			/*top: 4%; 
			left: 5%; */
			margin: 0 auto;
			width: 95%;
		}

		.window-mask .window table {
			height: 150px;
			overflow: auto;
			width: 100%;
			font-size: 13px;
		}

		.window-mask .window h3 {
			font-size: 15px;
			width: 85%;
		}

		.window-mask .window .lines {
			padding: 6px 0;
		}

		.window-mask .window a.button {
			float: right;
			margin: 0;
			width: 48%;
		}

		.window-mask .window a.button.grey {
			float: left;
		}

		.window-mask small {
			margin-top: 16px;
		}

		/* Benefits modeller
		-----------------------------------------------*/
		h3.switch, h3.switch.extended {width: 88%;}
		/*.modeller-slider .spinner {width: 93px;}*/
		/*.modeller-slider .spinner a.active {height: 93px;}*/
		/*.modeller-slider .spinner p {font-size: 13px; line-height: 15px;}*/
		.modeller-slider .spinner .icon-arrow-down {display: none;}
		/*.modeller-slider .ui-slider {width: 190px;}*/
		.modeller-slider .slider-container {clear: both;}
		.projection-basis-intro {margin-top:5px;}
		.switch-modeller-section .button, .switch-modeller-section .button.full {
			margin-bottom: 15px;
			padding-left: 10px;
			padding-right: 10px;
			text-align: center;
		}

		.calculate-benefits {margin:0px;}

		.switch-modeller-section .button.mr20 {margin-right: 6%;}

		.modelmobile {margin-bottom: 20px;}
	/*	.modelmobile #benefit-bar-mobile {height: 140px !important; margin: 5px 0 0 5px; width: 62% !important;}
		.modelmobile .graphValuebenefit-bar, .modelmobile .graphValuebenefit-bar-mobile {
			font-size: 16px;
			padding: 4px 12px;
			top: -12px;
		}*/
		.modelmobile .graphValuebenefit-bar:after, .modelmobile .graphValuebenefit-bar-mobile:after {
			height: 24px;
			right: -8px;
			top: 4px;
			width: 24px;
		}
		.modelmobile a {
			height: 100%;
			right: 10px;
			margin-top: -4px;
			position: absolute;
			top: 0;
			
		}

		/*.modelmobile a.icon-arrow-right:before, .modelmobile a.icon-arrow-left:before {
			top: 50%;
			position: relative;
		}
*/
		#benefit-info a {
			left: 0px;
			z-index: 100;
		}

		.modeller-slider-mobile > article {position: relative;}

		/*#benefit-bar-mobile {margin: 0 0 20px -10px; width: 100% !important;}*/
		#benefit-bar-mobile .graphLabelbenefit-bar-mobile {font-size: 14px; margin-top: 3px;}
		#benefit-info h3 {font-size: 12px;}
		#benefit-info h4 {font-size: 20px; line-height: 16px;}
		#benefit-info .col-xs-6:nth-child(1), #benefit-info .col-xs-6:nth-child(2) {margin-bottom: 20px;}
		.benefits-modeller-overview {float: right; margin: 0; width: 91%;}
		.viewpoint.model h3 small {display: none;}

		div.modeller-tabs small {
			display: none;
		}

		div.modeller-tabs .show-help {
			margin-top:15px;
		}

		.modeller-tabs-inner {
			width:88%!important;
		}

		.modeller-help-inner {
			width:12%!important;
		}
		

		/* Full fund performance
		-----------------------------------------------*/
		.time-period label {margin-right: 5px;}
		.time-period span.radio-container {margin-right: 5px;}
		.time-period span.radio-container:nth-of-type(4) {clear: left;}
		.button-group {width: 100%;}
		.button-group .button {
			padding: 10px;
			width: 50%;
		}

		.radio span.radio-container span.radio {
			height: 20px;
			width: 20px;
		}

		.radio span.radio-container span.radio.selected span {
			height: 10px;
			margin: 2px;
			width: 10px;
		}

		.radio label {
			font-size: 14px;
			text-align: left;
			margin-top: 0;
		}

		canvas.full {height: auto !important;}

		/* Your portfolio
		-----------------------------------------------*/
		.doughnut-chart.left {
			float: none;
			margin: 0 auto 20px;
		}

		.full-height {
			left: none;
			position: static;
		}

		/* Contacts
		-----------------------------------------------*/
		#faqs article p, #contact-details article p {float: none; width: 100%;}

		/* Transaction history
		-----------------------------------------------*/
		.timeframe label:nth-of-type(odd) {width: 75px}

		/* Account details
		-----------------------------------------------*/
		#account-details article {font-size: 14px;}

		#account-details article .account-col-1, #account-details article .account-col-2  {
			float: none;
			padding: 0 15px;
			width: 100%;
		}

		#account-details article p {
			margin-bottom: 12px;
			width: 100%;
		}

		#account-details article p span {
			float: right;
			margin: 0; 
			width: 32%;
			word-wrap: break-word;
		}

		#account-details article p strong {
			float: left;
			font-weight: 300;
			display: block;
			width: 60%;
		}

        .clear-filter-button {
            display: block;
            float: none;
            margin: 5px 0 0;
            line-height: normal;
            text-align: center;
}
}

 
/* Landscape phone to portrait tablet */
@media (min-width: 768px) and (max-width: 992px) {
	/* Header
	-----------------------------------------------*/
	header {border-bottom: 1px solid rgb(209,209,209);}
	header .container {border: none; padding: 15px 0;}

	h1.help {width: 680px;}

	.show-menu {margin-top: 13px;}
	.show-menu:hover, .show-menu.active {color: #949494; text-decoration: none;}

	/* Cookie Notification */
	.cookies .container {padding: 0 15px;}

	/* Layout
	===============================================*/
	.container {padding: 0;}
	.ml50 {margin-left: 0 !important;}

	/* Body
	-----------------------------------------------*/
	.body {margin: 20px 0;}

	/* Sections
	===============================================*/
		/* Home
		-----------------------------------------------*/
		.intro .row {margin-bottom: 20px;}
		.intro hr {width: 100%;}
		.credentials a {font-size: 14px;}

		/* Benefits
		-----------------------------------------------*/
		.benefit-overview .col-sm-6 > section {width: 360px;}
		.benefit-overview .col-sm-6 > section.left {width: 330px;}
		.sidenote {margin-top: 10px;}

		/* Benefits Modeller
		-----------------------------------------------*/
		.benefits-modeller-overview h3 {font-size: 15px;}
		.benefits-modeller-overview h4 {font-size: 32px;}

		#benefit-bar {margin-left: 0;}

		.modeller-slider > article {width: 345px;}
		h3.switch {
			font-size: 18px;

		}
		.switch-modeller-section .spinner {width: 110px;}
		.switch-modeller-section .spinner a.active {height: 110px;width: 112px;}
		.switch-modeller-section .button {
			padding-left: 10px;
			padding-right: 10px;
		}

		/* Your fund balance
		-----------------------------------------------*/

		.view-performance, .back-to-fund {width: 141px;}
		.view-performance.full {
			text-align: left;
			width: 153px;
		}
		.window-mask .window {top: 86px;}

		/* Full fund performance
		-----------------------------------------------*/
		.full-line-graph {width: 720px;}
		.calendar label {width: 46px;}
		canvas.full {
			height: 320px !important;
			margin: 0 auto 20px;
			width: auto !important;
		}

		/* Contacts
		-----------------------------------------------*/
		.info {
			clear: both;
			display: block;
			margin: 0 0 10px 26px;
		}
		.contacts br {display: none;}

        /* Documents
		-----------------------------------------------*/
        .timeframe label:nth-of-type(odd) {
            width: 100px;
        }
}
 
/* Portrait tablet to landscape and desktop */
@media (min-width: 992px) and (max-width: 1050px) {

	/* Headers
	-----------------------------------------------*/
	h1.help {width: 738px;}

	/* Sections
	===============================================*/
		/* Benefits
		-----------------------------------------------*/
		.benefit-overview .col-sm-6 > section {width: 385px;}
		.benefit-overview .col-sm-6 > section.left {width: 359px;}

		/* Benefits Modeller
		-----------------------------------------------*/
		.switch-modeller-section .spinner {width: 118px;}
		.switch-modeller-section .spinner a.active {height: 120px;}
		.modeller-slider > article {width: 375px;}
		h2.switch {width: 362px;}
		
		.switch-modeller-section .ui-slider {width: 274px;}

		.switch-modeller-section .button {
			padding-left: 10px;
			padding-right: 10px;
		}

		/* Your fund balance
		-----------------------------------------------*/
		.fund-navigation li:first-child, .fund-navigation li:last-child {margin: 0;}
		.calendar label {width: 75px;}
		.view-performance, .back-to-fund {width: 186px;}
		.view-performance.full {width: 165px;}

        /* Documents
		-----------------------------------------------*/
        .timeframe label:nth-of-type(odd) {
            width: 130px;
}
}


/* Retina Support */
@media (min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

	/* Header
	-----------------------------------------------*/
	header h1 {
		background: url('../images/logo-retina.png') no-repeat;
		background-size: cover;
		height: 51px;
		width: 185px;
	}

	/* Footer
	-----------------------------------------------*/
	footer h5 {
		background: url('../images/logo-footer-retina.png') no-repeat;
		background-size: cover; 
		width: 84px;
	}
}

@media (min-device-pixel-ratio: 2) and (max-width: 767px), (min-resolution: 192dpi) and (max-width: 767px) {
	header h1 {
		background: url('../images/logo-mobile.png') no-repeat;
		background-size: cover; 
		height: 16px;
		margin-top: 2px;
		width: 205px;
	}
}

@media (max-width: 760px) {
	.benefits-modeller-overview h3 {
		font-size: 12px;
	}

	.benefits-modeller-overview h4  {
		font-size: 20px; line-height: 16px;
	}

	.benefitmodeller-fund-value, .benefitmodeller-pension {
		margin-bottom: 20px;
	}
}