nav.ten.columns.alpha {
    width: 100%;
}

div#page_content {
    position: relative;
    top: -16px;
}


#page_content p {
	font-size: 1.1em !important;
	color: #1C1C1C !important;
}

.breakout-area {
	background-image:	
        	url(/-/media/Files/CSS/registration-services/images-personalise/personalise-background.png);
   	background-repeat: no-repeat;
    background-size: 100%;
	margin-top: -30px;
}

.breakout-area.primary {
	background-image:	
		 	url(/-/media/Files/CSS/registration-services/images-personalise/make-it-yours.png),				
        	url(/-/media/Files/CSS/registration-services/images-personalise/personalise-background.png);
   	background-repeat: no-repeat;
    background-size: 100%;
	margin-top: 0;
}

img.scale-with-grid.frame {
    border: 10px solid white !important;
	position: relative;
	margin-top: 40px !important;
}


.rotate-right {
	transform: rotate(0deg) !Important;
}

@media only screen and (min-width: 48em) {

.rotate-right {
	transform: rotate(5deg) !Important;
}
	
}
.breakout-area .columns {
    padding: 0;
}

.breakout-area .row {
    margin: 0;
}

.pink {
    background-color: #bf9191;
    }
	
.blue {
    background-color: #748894;
    }
	
.brown {
    background-color: #997f65;;
    }
	
.image-header {
    position: relative;
}

h2.alternate {
	background: rgba(0,0,0,.7);
    color: #ffffff;
    font-size: 1.5em;
    text-align: center;
    padding: 10px 20px !important;
    margin-top: 0;  
}

.breakout-area a, .breakout-area a:hover, .breakout-area a:visited {
	color: #000000;
	border-color: #000000;
}

.pink .fixed-height, .blue .fixed-height, .brown .fixed-height {
    padding: 0 2em 1em;
	margin-bottom: -10px !important;
}

figcaption {
	position: absolute;
	top: 0;
	font-size: 0.9rem !important;
	background-color: rgb(255 255 255 / 70%);
	color: #000;
	padding: 0 5px 0 10px;
}

figure.rotate-right figcaption, figure.rotate-left figcaption {
	margin-top: 40px;
}

@media only screen and (min-width: 48em) {

.row.secondary h2.alternate {
	min-height: 80px;
}

.pink .fixed-height, .blue .fixed-height, .brown .fixed-height {
    margin-bottom: 0 !important;
}
 
.breakout-area .row.primary .fixed-height {
    min-height: 230px;
}
	
.breakout-area .row.secondary .fixed-height {
	min-height: 170px;
}

.breakout-area .row.tertiary .fixed-height {
	min-height: 230px;
}
}

@media only screen and (min-width: 64em) {
h2.alternate {
    position: absolute;
    margin-left: 1em;
	bottom: -18px;
}

.row.secondary h2.alternate {
    position: absolute;
    margin-left: 1em;
	font-size: 1.2em;
	min-height: unset;
}
	

.breakout-area  .row.primary .fixed-height {
    min-height: 180px;
}
	
.breakout-area .row.tertiary .fixed-height {
	min-height:  190px;
}
}

@media only screen and (min-width: 90em) {
.row.secondary h2.alternate {
	font-size: 1.5em;
}

.breakout-area  .row.primary .fixed-height {
    min-height: 160px;
}
}

.row.tertiary {
	background-color: #997f65;
	 background-image: url(/-/media/Files/CSS/registration-services/images-personalise/swoosh-round);
        background-repeat: no-repeat;
        background-size: 110%;
        background-position: bottom -30px left -30px;
}

.well.swoosh {
	background-color: transparent;
	padding-right: 2em;
}

@media only screen and (min-width: 48em) {
.row.tertiary {
	background-size: 52%;
	background-position: bottom right -40px;
				}
	
.well.swoosh {
	padding-left: 2em !important;
	padding-top: 3em;
}
}

@media only screen and (min-width: 64em) {
.row.tertiary {
	background-size: 45%;
}
	
.well.swoosh {
	padding-top: 3em;
}
}

@media only screen and (min-width: 90em) {
.row.tertiary {
	background-size: 40%;
	background-position: bottom -10px right;
				}
.well.swoosh {
	padding-top: 7em;
	padding-right: 7em !Important;
}
}

@media only screen and (min-width: 160em) {
.well.swoosh {
	padding: 9em 13em 0 6em !important;
}
}

/* HERO VIDEO */


#video-overlay a[role="button"] {
	position: absolute;
	background: #2b2c3a;
	border:#fff;
	color: #fff;
	text-shadow: none;
	right: 3em;
	top: -0.6em;
}

#auto-video-pause,
#auto-video-m-pause {
	min-height: auto;
	border-radius: 10em;
	height: 3em;
	width: 3em;
	text-align: center;
	color: #ebe6dc;
	background: #997f65;
    border: 2px solid #ebe6dc;
	box-shadow: none;
	position: absolute;
	bottom: 2em;
}

#auto-video-pause em:before,
#auto-video-m-pause em:before {
	font-family: 'wcms';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1.25;
	-webkit-font-smoothing: antialiased;
	font-size: 1.5em;
	position: absolute;
	top: 0.35em;
	left: 0.45em;
	content: "\e600";
	text-shadow: none;
}

#auto-video-pause.paused em:before,
#auto-video-m-pause.paused em:before {
	font-size: 1.75em;
	color: #fff;
	position: absolute;
	top: 0.35rem;
	left: 0.65rem;
	content: "\e60e";
}

.mob-vid {
    display: none;
}

/* MOBILE VIDEO DISPLAY */
@media only screen and (max-width: 37.5em) {
    video#auto-video {
	display: none;
	border-bottom: none;
}

.mob-vid {
	display: block;
	border-bottom: none;
}
}

#video-overlay-m {
	position: relative;
	bottom: 4em;
	right: 0;
	padding: 1em;
}

.show-on-tablets-and-desktops {
    margin-top: -30px;
}