/* For slogan below value proposition (Alternative therapy...) */



/* For when slogan doesn't exist by having pushed it's way into 'push' its way into all_sections_container */
/* This div can vertically position the entirety of the slogan - i.e. all 3 lines - at once */
.positioning_altslogan_container {
position:relative;
/*To ensure slogan is on top*/
z-index: 3;
}
/*
.alt_slogancontainer_whole {
position:absolute;
top: -20px;
left: 0;
right: 0;
}
*/
/* END: For when slogan doesn't exist by having 'pushed' it's way into all_sections_container */



.alternative_slogan_container1 {
display: block;
text-align: center;
top:0;
padding:0;
width: 200px;
margin: 0 auto;
transform: rotate(-10deg);
background:;
perspective: 200px;
}

.alternative_slogan_container2 {
display: block;
text-align: center;
top:0;
padding:0;
width: 200px;
margin: 0 auto;
transform: rotate(10deg);
background:;
perspective: 200px;
}

.alternative_slogan_container3 {
display: block;
text-align: center;
top:0;
padding:0;
width: 200px;
margin: 0 auto;
transform: rotate(-10deg);
background:;
perspective: 200px;
}

/*For line 1 & 3*/
.alternative_slogan_part1, .alternative_slogan_part3 {
/*pn.  So background isn't full width*/
display:inline-block;

/*HPcom
background-color: is hotpink;*/

/*Much brighter than hotpink*/
/*
background-color: #ff0084;
*/

/*Colour of header and footer*/
background-color: #440000;

/*Skin colour used in logo*/
color: #ffe0bd;

font-family: 'source_sans_proitali', 'pt_sansitalic', 'arial', sans-serif;
font-family: 'source_sans_problack';
font-family: 'source_sans_probold';
font-weight: normal;
font-size: 19px;
font-style: ;
font-weight:;
padding: 6px 6px 6px 6px;
line-height: 1;
/*This skew value is also set in the keyframes below.  However it is set here too so that the skew is in effect 'right away'.  If we relied on just having the skew achieved via the keyframes, then there would be a period - the animation delay period - during which it wasn't applied, and thus when the text would not be vertically skewed.*/
transform: skew(-10deg);
}

/*For line 2*/
.alternative_slogan_part2 {
/*pn.  So background isn't full width*/
display:inline-block;
background-color: #ffe0bd;
color: #440000;
font-family: 'source_sans_proitali', 'pt_sansitalic', 'arial', sans-serif;
font-family: 'source_sans_problack';
font-family: 'source_sans_probold';
font-weight: normal;
font-size: 19px;
font-style: ;
font-weight:;
padding: 6px 6px 6px 6px;
line-height: 1;
/*Margins separate the lines, before they deliberatly wrap - as produced by the 200px width on the alternative_slogan_containers*/
margin-left:10px ;
margin-right: 10px;
/*This skew value is also set in the keyframes below.  However it is set here too so that the skew is in effect 'right away'.  If we relied on just having the skew achieved via the keyframes, then there would be a period - the animation delay period - during which it wasn't applied, and thus when the text would not be vertically skewed.*/
transform: skew(10deg);
}



/* =========== Rotating the slogan: for NON scrolling alternative slogan animation ============*/

/*NOTE RE KEYFRAMES BELOW.  The skew values in thee key frames are applied to the respective spans  via alternative_slogan_part1 or alternative_slogan_part2 /alternative_slogan_part2.   However it needs applying again in these keyframes so that the text remains skewed to the vertical throughout the animation*/

/*First line*/
.alternative_slogan_part1_nonscroll {
-webkit-animation: spin 2s linear 1;
animation: spin 2s/*alter spin speed*/ linear 1; /*Last number = number of times performed*/;

/*Ensures the state of the span will be the same as before the animation begun.  Purpose is to ensure the alreday set skew values (in alternative_slogan_part1 or alternative_slogan_part2 or alternative_slogan_part2) will remain effective.  Arguably this precaution is unnecessary, given that in all states of the animation - inlcuding the  state - the keframes will anyway have also skewed the span's lettering as wanted.*/
-webkit-animation-fill-mode: none;
animation-fill-mode: none;

-webkit-animation-delay: 3s;
animation-delay: 3s;
}

@-webkit-keyframes spin {
0% {
transform: skew(-10deg) rotatey(0deg);
}
100% {
transform: skew(-10deg) rotatey(360deg);
}
}

@keyframes spin {
0% {
transform: skew(-10deg) rotatey(0deg);
}
100% {
transform: skew(-10deg) rotatey(360deg);
}
}


/*Second line*/
.alternative_slogan_part2_nonscroll {
-webkit-animation: spin_part2 3s linear 1;
animation: spin_part2 2s/*alter spin speed*/ linear 1; /*Last number = number of times performed*/;

/*Ensures the state of the span will be the same as before the animation begun.  Purpose is to ensure the alreday set skew values (in alternative_slogan_part1 or alternative_slogan_part2 or alternative_slogan_part2) will remain effective.  Arguably this precaution is unnecessary, given that in all states of the animation - inlcuding the  state - the keframes will anyway have also skewed the span's lettering as wanted.*/
-webkit-animation-fill-mode: none;
animation-fill-mode: none;

/*To have sequential animation starts for each line */
/*-webkit-animation-delay: 5s;
animation-delay: 5s;
*/

/* To overlap animation starts of each line.  4 seconds means second line starts rotating half way through rotation of first line*/
-webkit-animation-delay: 4s;
animation-delay: 4s;
}

@-webkit-keyframes spin_part2 {
0% {
transform: skew(10deg) rotatey(0deg);
}
100% {
transform: skew(10deg) rotatey(360deg);
}
}

@keyframes spin_part2 {
0% {
transform: skew(10deg) rotatey(0deg);
}
100% {
transform: skew(10deg) rotatey(360deg);
}
}


/*Third line*/
/*keyframes for third line are as for first line*/
.alternative_slogan_part3_nonscroll {
-webkit-animation: spin 2s linear 1;
animation: spin 2s/*alter spin speed*/ linear 1; /*Last number = number of times performed*/;

/*Ensures the state of the span will be the same as before the animation begun.  Purpose is to ensure the alreday set skew values (in alternative_slogan_part1 or alternative_slogan_part2 or alternative_slogan_part2) will remain effective.  Arguably this precaution is unnecessary, given that in all states of the animation - inlcuding the  state - the keframes will anyway have also skewed the span's lettering as wanted.*/
-webkit-animation-fill-mode: none;
animation-fill-mode: none;

/*To have sequential animation starts for each line */
/*-webkit-animation-delay: 7s;
animation-delay: 7s;
*/

/* To overlap animation starts of each line by a second. 5 seconds means second line starts rotating half way through rotation of third line */
-webkit-animation-delay: 5s;
animation-delay: 5s;
}

/* ========END:  Rotating the slogan: for NON scrolling alternative slogan animation ============*/






/* =========== Rotating the slogan: for SCROLLING alternative slogan animation ============*/
/* Scroll animation code adapated from https://cssanimation.rocks/scroll-animations/  */


.alternative_slogan_part1_scroll.is-visible {
-webkit-animation: spin 2s linear 1;
animation: spin 2s/*alter spin speed*/ linear 1; /*Last number = number of times performed*/;

/*Ensures the state of the span will be the same as before the animation begun.  Purpose is to ensure the alreday set skew values (in alternative_slogan_part1 or alternative_slogan_part2 or alternative_slogan_part2) will remain effective.  Arguably this precaution is unnecessary, given that in all states of the animation - inlcuding the  state - the keframes will anyway have also skewed the span's lettering as wanted.*/
-webkit-animation-fill-mode: none;
animation-fill-mode: none;

-webkit-animation-delay: 3s;
animation-delay: 3s;
}


.alternative_slogan_part2_scroll.is-visible {
-webkit-animation: spin_part2 3s linear 1;
animation: spin_part2 2s/*alter spin speed*/ linear 1; /*Last number = number of times performed*/;

/*Ensures the state of the span will be the same as before the animation begun.  Purpose is to ensure the alreday set skew values (in alternative_slogan_part1 or alternative_slogan_part2 or alternative_slogan_part2) will remain effective.  Arguably this precaution is unnecessary, given that in all states of the animation - inlcuding the  state - the keframes will anyway have also skewed the span's lettering as wanted.*/
-webkit-animation-fill-mode: none;
animation-fill-mode: none;

/*To have sequential animation starts for each line */
/*-webkit-animation-delay: 5s;
animation-delay: 5s;
*/

/* To overlap animation starts of each line.  4 seconds means second line starts rotating half way through rotation of first line*/
-webkit-animation-delay: 4s;
animation-delay: 4s;
}


.alternative_slogan_part3_scroll.is-visible {
-webkit-animation: spin 2s linear 1;
animation: spin 2s/*alter spin speed*/ linear 1; /*Last number = number of times performed*/;

/*Ensures the state of the span will be the same as before the animation begun.  Purpose is to ensure the alreday set skew values (in alternative_slogan_part1 or alternative_slogan_part2 or alternative_slogan_part2) will remain effective.  Arguably this precaution is unnecessary, given that in all states of the animation - inlcuding the  state - the keframes will anyway have also skewed the span's lettering as wanted.*/
-webkit-animation-fill-mode: none;
animation-fill-mode: none;

/*To have sequential animation starts for each line */
/*-webkit-animation-delay: 7s;
animation-delay: 7s;
*/

/* To overlap animation starts of each line by a second. 5 seconds means second line starts rotating half way through rotation of third line */
-webkit-animation-delay: 5s;
animation-delay: 5s;
}


/* ========END: Rotating the slogan: for SCROLLING alternative slogan animation ============*/



/*   END FILE  */