/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
}


body {
	margin: 0;
	color: #efefef;
	font-family: 'Libre Franklin',Arial,Helvetica Neue,Helvetica,sans-serif; 
	}


body.strategy main {
    color: #1E428A;
	}
	
p {
	padding-bottom: 1em;
	}
	
li {
	margin: 0 .5em;
	}
	
.white-block p {
	margin: 0 .5em;
	}
	
.white-block li p {
	margin: 0 !important;
	}
	
.centre {
	text-align: center;
	}


/* Scrawny font */

.ScrawnyCat {
	font-family: ScrawnyCat; 
	}

	
.ScrawnyCat p {
	text-align: center;
	font-size: 2.5em;
	line-height: 1.2em;
	}
	
.ScrawnyCat#sussex-2025 p {
	font-size: 2em;
	margin-top: 1em;
	padding-bottom: .5em;
	}
	
h2.ScrawnyCat {
	font-family: ScrawnyCat;
	text-align: center;
	font-size: 2em;
	}
	
h2.ScrawnyCat.cobalt {
	color: #1E428A;
	}
	
h2.ScrawnyCat.coral {
	padding-top: 1em;
	text-align: center;
	}
	
h3.ScrawnyCat {
	font-family: ScrawnyCat;
	font-size: 1.5em;
	}
	
.ScrawnyCat-block {
	font-family: ScrawnyCat; 
	padding: 3em 1em 0 1em;
	font-size: .8em;
	}
	

.ScrawnyCat-block h2 {
	font-family: 'Libre Franklin',Arial,Helvetica Neue,Helvetica,sans-serif; 
	text-align: center;
	font-size: 1em;
	text-transform: uppercase;
	font-weight: bold;
	}
	
	
h2.align-left {
	text-align: left;
	}

/* Colours */
	
.aquamarine {
	color: #007A78;
	}
	
.aquamarine-background {
	background: #007A78;
	color: #fff;
	}

.black {
	color: #000;
	}
	
.cobalt {
	color: #1E428A;
	}
	
.cobalt-background {
	background: #1E428A;
	color: #fff;
	}
	
.coral {
	color: #D3273E !important;
	}
	
.coral-background {
	background: #D3273E;
	color: #fff;
	}
	
.flint {
	color: #013035;
	}

.grape {
	color: #5D3754;
	}
	
.grape-background {
	background: #5D3754;
	color: #fff !important;
	}
	
.grey-background {
	background: #F4F4F4;
	}
		
.navy {
	color: #1B365D;
	}
	
.navy-background {
	background: #1B365D;
	color: #fff;
	}
	
.orange {
	color: #DC582A;
	}
	
.orange-background {
	background: #DC582A;
	color: #fff;
	}
	
.pink-background, .pink-background h2  {
	background: #EEA0C6;
	color: #1E428A !important;
	}
	
.sky-blue-background, .sky-blue-background h2  {
	background: #62C1EA;
	color: #1E428A !important;
	}
	
	
.yellow-background, .yellow-background h2 {
	background: #fFb81c;
	color: #1E428A !important;
	}
	

.striped-feature h5 {
	color: #1e428a !important;
	size: 3em;
}

.striped-feature .media-object-section {
    background: #f4f4f4;
	padding: 1em;
	text-align: center;
}

.striped-feature .cobalt .media-object-section  {
    border-bottom: .75em solid #143A60;
}

.striped-feature .aquamarine .media-object-section {
	border-bottom: .75em solid #007a78;
}

/* Intro block */	

body.strategy main #intro-block {
    position: relative;
	color: #fff;
    min-height: 100vh;
    width: 100%;
    text-align: center;
    background: #D3273E;
	}
	
body.strategy main #intro-block  p {	
	padding-bottom: 0;
	}	
	

body.strategy main #intro-block h1 {
	font-size: .7em;
	font-family: 'Libre Franklin',Arial,Helvetica Neue,Helvetica,sans-serif; 
	text-transform: uppercase;
	padding-top: 1em;
	padding-bottom: 5em;
	}
	
	
/* Blocks general  */

body.strategy main>.row {
    margin-top: 2em;
}

.no-margin-top {
	margin-top: 0 !important;
	}
	
.column.small-nav-block  {
	padding: 0;
	margin-bottom: -2.5em !important;
	text-align: center;
	}
	
.column.small-nav-block  a {
	text-decoration: underline;
	}



/* Nav */


.down {
    margin: 1em 0;
}

	
.down a {
    display: block;
    width: 54px;
    height: 54px;
	margin: auto;
	padding-bottom: .5em;
}


.down.white a {
    background: transparent url(/strategy/assets/media/images/site/cyclone/arrows/white-down.png) no-repeat;
}

.down.coral  a {
    background: transparent url(/strategy/assets/media/images/site/cyclone/arrows/coral-down.png) no-repeat;

}


body.strategy main #nav-content {
    font-size: .8em;
	text-transform: uppercase;
	}
	
.nav-content a {
    padding: 0;
}

body.strategy main .nav-content li {
	margin: 0 1.6em;
	font-weight: bold;
	font-size: 1em;
	}

body.strategy main .nav-content li:last-child {
    margin-right: 0;
	padding-right: 0;
	}

body.strategy main .nav-content li:first-child {
    margin-left: 0;
	padding-left: 0;	
	}

body.strategy main .nav-content a:last-child {
    margin-right: 0;
	padding-right: 0;
	}
	
.nav-content a, .nav-content:hover a, .nav-content a.is-active {
    color: #1E428A;	
}

.nav-content a.yellow:hover, .nav-content a.yellow.is-active, .nav-content a.yellow.is-active:hover {
    border-bottom-color: #fFb81c;
}


.nav-content a.pink:hover, .nav-content a.pink.is-active, .nav-content a.pink.is-active:hover {
    border-bottom-color: #EEA0C6;
}

.nav-content a.aquamarine:hover, .nav-content a.aquamarine.is-active, .nav-content a.aquamarine.is-active:hover {
    border-bottom-color: #007A78;
}


.nav-content a.sky-blue:hover, .nav-content a.sky-blue.is-active, .nav-content a.sky-blue.is-active:hover {
    border-bottom-color: #62C1EA;
}


.accordion.small .accordion-item .accordion-title:before {
    background: transparent url(/strategy/assets/media/images/site/cyclone/icons/icon-acc-plus.png) no-repeat 0 0;
	top: 30px;
}

.accordion.small .accordion-item.is-active>.accordion-title:before {
    background: transparent url(/strategy/assets/media/images/site/cyclone/icons/icon-acc-plus.png) no-repeat 0 0;
    transform: rotate(45deg);
	top: 30px;
}

ul.accordion  {
    padding-top: 1.2em;
}

/* Blocks */	

.white-block  {
	padding: 1.5em 0;
	}


	
	
.white-block  a {
	color: #c85126 !important;
	}


.video {
    margin-top: -2em !important;
	text-align: center;
}

.column.video {
	margin-bottom: 4em;
}

.video-title {
	padding: 1.8em 0 1em 0;
	font-size: .7em;
}

.accordion.small .accordion-item:first-of-type {
    border-top: 1px solid #1E428A;
}

.accordion.small .accordion-item:first-of-type {
    border-top: 1px solid #1E428A;
}

.accordion.small .accordion-item {
    border-bottom: 1px solid #1E428A;
}

.accordion.small .accordion-item .accordion-title {
    color: #1E428A !important;
}

.accordion.small .accordion-item p{
    color: #1E428A;
}

.accordion-content ul {
    list-style-type: disc;
	color: #1E428A;
	margin-left: 1em;
	}


img.illustration {
    width: 50%;
    float: right;
}


.flexbox-container {
	width:100%;	
}

.flexbox-item-a {
	background: #467979;
	height: 3em;
	width:100%;
	color: #fff;
	font-size: 1.5em;
	text-align: center;
	padding-top: .5em ;
	}

.flexbox-item-b {
	width: 80%;
	padding: 1em;
    background: #D3273E;
    font-family: Georgia,garamond,serif;
    color: #fff;
    font-size: 1em;
	margin: auto;
	margin-top: -1.2em;
	margin-bottom: 1em;
	text-align: center;
	max-width: 670px;
}


@media print, screen and (min-width: 40em){ 

body.strategy main #intro-block p {
	font-size: 4em;
	}
	
body.strategy main #intro-block h1 {
	padding-bottom: 2em;
	}
	
	
.ScrawnyCat#sussex-2025 p {
	font-size: 3em;
	margin-top: .5em;
	margin-bottom: 1em;
	padding-bottom: 0;
	}
	
#sussex-2025 {	
	min-height: 100vh;
	}

}


@media print, screen and (min-width: 72em){ 

p {
	margin: 0;
	}
	
li {
	margin: 0;
	}
	
.white-block p {
	margin: 0;
	}
	
body.strategy main #intro-block p {
	font-size: 4.5em;
	padding-bottom: 0;
	margin-top: .5em;
	}
	
	.ScrawnyCat p {
	font-size: 5em;
	}
	
	
.ScrawnyCat p{
	font-size: 3.2em;
	padding-bottom: 0;
	margin-top: 0
	}
	
.ScrawnyCat#sussex-2025 p {
	font-size: 3.2em;
	padding-bottom: 0;
	margin-top: 1.5em
	}
	
	
h2.ScrawnyCat.coral {
	text-align: left;
	padding-bottom: .4em;
	}
	
	
h2.extra-padding {
	padding-top: .5em;
	}	


.video-title {
	padding: 1em 0;
	font-size: 1.5em;
}

.ScrawnyCat-block {
	font-family: ScrawnyCat; 
	padding: 3em 5em;
	font-size: .8em;
	}

.flexbox-container {
	position: relative;
	background: linear-gradient(to right, #467979 0, #467979 51%, #fff 50%, #fff 100%);
	display: flex;
	align-items: center;
	height: auto;
	margin: 0;
	min-height: 24em; 
	max-width: 1240px;
}

.flexbox-item-a {
	background: transparent;
	position: absolute;
	z-index: 10;
	font-size: 4.4em;
	margin: 0;
	height: auto;
	margin-left: 1.5em;
	max-width: 450px;
	padding-top: 0;
	}


.flexbox-item-b {
	position: absolute;
	width: 50%;
	padding: 3em 5em 3em 4em;
    font-size: 1.2em;
	margin: 0;
	margin-left: 19em;
	text-align: left;	
}
}

@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) and (min-width: 72em) {  

.flexbox-item-a {
	margin-top: 1em;
	}
	
  .flexbox-item-b {
	margin-top: 2.6em;

} 
}

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
	
.flexbox-item-a {
	margin-top: 1em;
	}
	
  .flexbox-item-b {
	margin-top: 2.6em;

} 
}
}


@media only screen  and (min-width : 1824px) {
	
	
.flexbox-container {
	max-width: 3000px;
}

.flexbox-item-a {
	margin-left: 5em;
	}


.flexbox-item-b {
	margin-left: 32em;
}
}