@font-face {
	font-family: 'Myriadpro-Bold';
	src: url('myriad-pro/MYRIADPRO-BOLD.OTF')  format('truetype');
}
@font-face {
	font-family: 'Myriadpro-Regular';
	src: url('myriad-pro/MYRIADPRO-REGULAR.OTF')  format('truetype');
}
@font-face {
	font-family: 'Myriadpro-SemiBold';
	src: url('myriad-pro/MYRIADPRO-SEMIBOLD.OTF')  format('truetype');
}
@font-face {
	font-family: 'riffic-Bold';
	src: url('riffic/RifficFree-Bold.ttf')  format('truetype');
}
@font-face {
	font-family: 'BeautyFreak-Bold';
	src: url('beautiful-freak/BeautifulFreakBold.otf')  format('opentype');
}
@font-face {
    font-family: 'RobotoSlab-Regular';
    src: url('roboto-slab/RobotoSlab-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'RobotoSlab-Bold';
    src: url('roboto-slab/RobotoSlab-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'riffic';
    src: url('riffic/riffic.otf') format('truetype');
}
.main-container-row {
		padding: 15px 0px;
	}
 .navbar-brand {
    width: auto;
    height: 90px;
	display: block;
	position: relative;
	padding: 0;
	color: #1d1d1b;
	font-weight: 700;
	line-height: 1.2;
	outline: none;
 }
 .navbar-collapse {
	float: none;
	margin-right: unset;
	width: 75%;
}
  .navbar-brand .image {
		width: 130px;
		height: 130px;
		display: block;
		float: left;
		position: relative;
		background-color: white;
		text-align: center;
		border-radius: 50%;
		z-index: 99;
		padding:10px;
  }
   .navbar-brand .title {
    left: 135px;
    width: 270px;
    font-size: 22px;
	font-family: 'Fira Sans', sans-serif;
	top: 31%;
	display: block;
	position: absolute;
	color:black;
	font-weight: 500;
  }
  .navbar-brand .title strong{
		font-weight: 700;
		color: black;
  }
.bannerContainer {
	position: relative;
	margin-top: 0px;
}

.lightPurpleTopRegion {
	width: 100%;
	background-color: #2b3641;/*#0B222C*/
	border-bottom: 1px solid #ffffff;
}
.navbar-collapse {
	padding-right: 15px;
	padding-left: 15px;
	width: auto;
  
}
header .navbar-collapse {
    background: transparent;
}

.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
    padding-top: 12px;
    align-items: center;
}
 header .navbar-nav {
    font-size: 15px;
    margin-top: 25px;
    margin-bottom: 25px;
}
header .navbar-nav {
    position: relative;
    float: right;
    margin: 0 -15px;
    margin-top: 0px;
    margin-bottom: 0px;
    z-index: 2;
}
header .navbar-nav {
  
  font-weight: 600;
}
.nav {
  padding-left: 0;
  
  list-style: none;
}
.navbar-nav > li {
    float: left;
}
.nav > li {
  position: relative;
  display: block;
}
 header .navbar-nav {
    font-size: 15px;
}
header .navbar-nav {
  font-weight: 600;
}
.nav {
  list-style: none;
}
 header .navbar-nav > li > a.dropdown-toggle {
    
}
 header .navbar-nav > li > a {
    color: #F4F7E8;
	border: 1px solid #ffffff;
}
header .navbar-nav > li > a {
    padding-left: 10px;
}
header .caret::before {
 
}
header .caret {
  vertical-align: baseline;
  border: none;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  text-rendering: auto;
  
}
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  
}
header.navbar .caret::before  {	
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  text-rendering: auto;
}
::after, ::before {
  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}
#logo img {
    max-height: 152px;
	    width: auto;
}
#logo {
    width: 180px;
}
element {
}
@media (min-width: 1200px) {
  header .navbar-nav > li > a.dropdown-toggle {
   

  }
}
@media (min-width: 768px) {
  header.navbar-nav > li > a.dropdown-toggle {
    padding-right: 15px;

  }
}
header .navbar-nav > li > a:hover{
	/*background-color:#01395C;
	border:1px solid #ffffff;*/
	background-color:transparent;
  }
  header .navbar-nav > li > a:focus{
	/*color: #ffffff;
	background-color:#01395C;
	border:1px solid #ffffff;*/
	background-color:transparent;
  }
  
@media (min-width: 768px) {
  header .navbar-nav > li > a {
    color: #000000;
	
  }
}
@media (min-width: 1200px) {
  header .navbar-nav > li > a {
    padding-left: 10px;
    padding-right: 10px;

  }
}
@media (min-width: 992px) {
  header .navbar-nav > li > a {
    padding-left: 9px;

    padding-right: 10px;

  }
}

header .navbar-nav > li > a {
    font-family: 'Poppins',
        Arial,
        Helvetica,
        sans-serif !important;
        font-weight: 300 !important;
        font-size: 15px !important;
        color: #1d1d1b !important;
        line-height: 1.8 !important;
}
header .navbar-nav > li > a {
    padding: 10px;
}
.navbar-nav > li > a {
    line-height: 20px;
}
.nav > li > a {
    position: relative;
    display: block;
}

#header {
    background-color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    position: inherit;
    background-color: #FFFFFF; /*#0B222C*/
}
.logoHeader {
    padding: 25px 20px 25px 29px;
    background: white;
    width: 28%;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    float:left;
}
.logoTitle {
    padding-top: 5%;
}
.logoTitle .title {
    font-size:25px;
    font-family:"OpenSans-Semibold";	
}
.headerNav {
    height: 152px;
    display: flex;
    justify-content: end;
}


#mainCarousel {
    position:relative;
    clip-path: polygon(0 0%, 100% 0, 100% 87%, 0 100%);
    -webkit-clip-path: polygon(0 0%, 100% 0, 100% 87%, 0 100%);
	
}
.carousel-inner-main {
  max-height: 880px;
  background-color: transparent;
}
.attendanceImage {
    background-image: url("../images/yellow_banner_bg.PNG");
    background-position: center;
    background-size: cover;
    background-repeat:no-repeat;
    width:746px;
    height: 346px;
    position:absolute;
    top:380px;
}
.attendanceTitle h3{
    font-size: 36px;
    color: #ffffff;
    font-family: "riffic";
}
.attendanceTitle p{
    font-size: 28px;
    color: #4F1270;
    font-family: "Myriadpro-SemiBold";
    line-height:39px;
}
.carousel-indicators {
    bottom: 58px;
}
.attendanceTitle {
    padding: 6% 82px 0px 202px;
}
.attendenceCount h3{
    font-size : 67px;
    color: #622382;
    font-family: "Myriadpro-Bold";
    line-height:72px;
}

.attendenceCount {
    padding-left: 50px;
    padding-bottom:9%;
}
.attendenceContent p{
    margin-top:10px;
    font-size : 25px;
    font-family: "Myriadpro-Regular";
    line-height:39px;
    margin-bottom: 0;
}
.attendenceContent p:first-of-type {
  font-size : 27px !important;
}
.attendenceContentPara {
    margin-top:10px;
}
/* .missingOut{ */
	/* font-family: "Myriadpro-Bold" !important; */
	/* padding-right:13px; */
	/* font-size : 27px !important; */
	
/* } */
.attendenceCountImage img {
    margin-top: 30px;
    width:113%;
}
.attendenceLookSection {
    background-image: url("../images/green_bg_pattern-02.png"), linear-gradient(90deg, #D4CF09, #76B31D);
    background-position: center;
    background-size: cover; 
    width: 100%;
    padding: 11% 0px 15% 29px;
    z-index:1;
    position: relative;
    background-attachment: fixed;
}
.attendenceLookSection::before {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  background: inherit;
  transform: skew(0, -6deg);
  transform-origin: top left;
}

.attendenceLook {
    background-color:white;
    width: 72%;
}
.attendenceLookLike {
    margin-top: 63px;
    padding-left: 60px;
    padding-right:14px;
    margin-bottom:20px;
}
.attendenceLookImageColumn {
    position: relative;
}

.attendenceLookImage {
    background-image: url("../images/purple_bg-02.png");
    background-position: center;
    background-size: cover;
    height: 429px;
    position: absolute;
    width: 545px;
    top: -148px;
    left: -112px;
}

.attendenceLookHedding {
    position: absolute;
    top: 56px;
    left: 111px;
}
.attendenceLookHedding h3{
    font-family: "BeautyFreak-Bold";
    text-transform: lowercase;
    font-size: 67px;
    color:#ffffff;
    font-weight: 900;
    margin-top: 10px;
}
.attendenceLookLike p{
    font-family: "Myriadpro-Regular";
    font-size: 24px;
    line-height: 38px;
}
.attendancePercentageContainer {
    width: 72%;
}
.attendencePercentage {	
    background-color: white;
    padding: 12px;
    margin-top:4px;
}
.attendenceHundred h4 {
    font-family: "Myriadpro-Bold";
    font-size : 30px;
    color: #1F9342;
    margin: 5px;
    padding: 2px 0px 0px;
}
.attendencePercentage:first-of-type{
    margin-top: 10px; 
}

.attendenceHundredCount h5 {
    font-family: "Myriadpro-Bold";
    font-size : 27px;
    color: #ffffff;
    margin: 0px;
    padding: 0px;
}
.attendenceHundredCount {
    background-color :#1F9342;
    padding: 5px;
    margin-top: 3px;
    width: 100%;
}
.attendenceNinetyNine h4{
    font-family: "Myriadpro-Bold";
    font-size : 29px;
    color: #76B31D;
    margin: 5px;
    padding: 0px;
}
.attendenceNinetyNineCount h5{
    font-family: "Myriadpro-Bold";
    font-size : 27px;
    color: #ffffff;

    margin: 0px;
    padding: 0px;
}
.attendenceNinetyNineCount{
    background-color :#76B31D;
    padding: 5px;
    margin-top: 3px;
    width:99%;
}

.attendenceNinetySeven h4{
    font-family: "Myriadpro-Bold";
    font-size : 29px;
    color: #D4CF09;
    margin: 5px;
    padding: 0px;
}
.attendenceNinetySevenCount h5{
    font-family: "Myriadpro-Bold";
    font-size : 27px;
    color: #ffffff;
    margin: 0px;
    padding: 0px;
}
.attendenceNinetySevenCount{
    background-color :#D4CF09;
    padding: 5px;
    margin-top: 3px;
    width:97%;
}

.attendenceNinetyFive h4{
    font-family: "Myriadpro-Bold";
    font-size : 29px;
    color: #F29108;
    margin: 5px;
    padding: 0px;
}
.attendenceNinetyFiveCount h5{
    font-family: "Myriadpro-Bold";
    font-size : 27px;
    color: #ffffff;
    margin: 0px;
    padding: 0px;
}
.attendenceNinetyFiveCount{
    background-color :#F29108;
    padding: 5px;
    margin-top: 3px;
    width:95%;
}

.attendenceNinety h4{
    font-family: "Myriadpro-Bold";
    font-size : 29px;
    color: #E94D10;
    margin: 5px;
    padding: 0px;
}
.attendenceNinetyCount h5{
    font-family: "Myriadpro-Bold";
    font-size : 27px;
    color: #ffffff;
    margin: 0px;
    padding: 0px;
}
.attendenceNinetyCount{
    background-color :#E94D10;
    padding: 5px;
    margin-top: 3px;
    width:90%;
}

.attendenceEightyFive h4{
    font-family: "Myriadpro-Bold";
    font-size : 29px;
    color: #FB0007;
    margin: 5px;
    padding: 0px;
}
.attendenceEightyFiveCount h5{
    font-family: "Myriadpro-Bold";
    font-size : 27px;
    color: #ffffff;

    margin: 0px;
    padding: 0px;
}
.attendenceEightyFiveCount{
    background-color :#FB0007;
    padding: 5px;
    margin-top: 3px;
    width:85%;
}

.howAreWeDoing { 
    background-image:linear-gradient(230deg, #FAB409, #F29108); 
    position:relative; 
     /* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
    padding: 20px 0px 14% 0px;
    position: relative;
    z-index: 1;
}
.howAreWeDoing::before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    background: inherit;
    transform: skew(0, -6deg);
    transform-origin: top left;
}
 .howAreWe {
    background-image: url("../images/purple_bg-03-02.png"); 
    background-position: center; 
    background-size: cover;
    position:relative;	 
    z-index:9999;
    margin:0 auto;
    width: 748px ;
    height: 215px ;

} 

.howAreWe h3{
    font-family: "BeautyFreak-Bold";
    font-size: 70px;
    color: #ffffff;
    font-weight: 900;
    padding-top: 69px;
    transform: skewY(3deg) !important;
    margin-top: 0;
}

.howAreWeContainer {
    background-color:#ffffff ;
    height:110px;
    padding: 0px 10px;
    width:80%;
    margin: 11.5px auto;
}
.year h2{
    font-family: "BeautyFreak-Bold";
    text-transform: lowercase;
    font-size : 72px;
    color: #4F1270;
    float:left;
}
.percent h2{
    font-family: "BeautyFreak-Bold";
    text-transform: lowercase;
    font-size : 72px;
    color: #4F1270;
    float:right;
}
.attendenceSupport {
    background-color:#4F1270 ;
    padding: 97px 0px 17% 0px;
    position: relative;
    z-index: 1;
    /* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
}
.attendenceSupport::before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    background: inherit;
    transform: skew(0, -6deg);
    transform-origin: top left;
}

.attendenceSupport h2{
    color:#ffffff ;
    font-family: "Myriadpro-Bold";
    font-size : 53px;
    justify-content:center;
    text-align:center;
    margin-top: 0;
}
.expectContent {
    padding: 100px 53px 0px;
	
}
.expectHeadding {
	background-color: #76B31D;
	clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
	-webkit-clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
	width: 100%;
	height: 130px;
	position: absolute;
	padding-top: 10px;
}	
.expect h4{
	font-family: "BeautyFreak-Bold";
	text-transform: lowercase;
	font-size : 45px;
	color: #ffffff;
	text-align:center;
}
.monitor h4{
	font-family: "BeautyFreak-Bold";
	text-transform: lowercase;
	font-size : 45px;
	color: #ffffff;
	text-align:center;
}
.listen h4{
	font-family: "BeautyFreak-Bold";
	text-transform: lowercase;
	font-size : 45px;
	color: #ffffff;
	text-align:center;
}
.support h4{
	font-family: "BeautyFreak-Bold";
	text-transform: lowercase;
	font-size : 45px;
	color: #ffffff;
	text-align:center;
}
.formalise h4{
	font-family: "BeautyFreak-Bold";
	text-transform: lowercase;
	font-size : 45px;
	color: #ffffff;
	text-align:center;
}
.enforce h4{
	font-family: "BeautyFreak-Bold";
	text-transform: lowercase;
	font-size : 45px;
	color: #ffffff;
	text-align:center;
}
.expect {
	 height: 240px;
	 background-color: #ffffff; 
	 position: relative;
	 margin: 75px 3px 15px 35px;
	
}
.monitor {
	height: 240px; 
	background-color: #ffffff; 
	position: relative;
	margin: 15px 3px 15px 35px;
	
}
.listen {
	height: 240px; 
	background-color: #ffffff; 
	position: relative;
	margin: 15px 3px 15px 35px;
	
}
.support {
	height: 240px; 
	background-color: #ffffff; 
	position: relative;
	margin: 15px 3px 15px 35px;
	
}
.formalise {
	height: 310px; 
	background-color: #ffffff; 
	position: relative;
	margin: 15px 3px 15px 35px;
	
}
.enforce {
	height: 240px; 
	background-color: #ffffff; 
	position: relative;
	margin: 15px 3px 15px 35px;
	
}
.expectContainer {
	
}
.expectContent p{
	font-family: "Myriadpro-Regular";
	font-size : 24px;
	color: #4C4C4C;
	justify-content:center;
}
.monitorHeadding {
	background-color:#D4CF09 ;
	clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
	-webkit-clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
	width: 100%;
	height: 130px;
	position: absolute;
	padding-top: 8px;
}
.listenHeadding{
	background-color:#FAB409 ;
	clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
	-webkit-clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
	width: 100%;
	height: 130px;
	position: absolute;
	padding-top: 8px;
}
.supportHeadding{
	background-color:#F29108 ;
	clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
	-webkit-clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
	width: 100%;
	height: 130px;
	position: absolute;
	padding-top: 8px;
}
.formaliseHeadding{
	background-color:#E94D10 ;
	clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
	-webkit-clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
	width: 100%;
	height: 130px;
	position: absolute;
	padding-top: 8px;
}
.enforceHeadding{
	background-color:#FB0007 ;
	clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
	-webkit-clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
	width: 100%;
	height: 130px;
	position: absolute;
	padding-top: 8px;
}
.parentSection {
	background-color:#ffffff ;
	padding-top:85px;
	position:relative;
}
.parentsHedding {
	background-image: url("../images/orange_bg2-02.png"); 
	background-position: center; 
	background-size: cover;
	width:444px;
	height:211px;
	margin: 0 auto;
	position: absolute;
	z-index:99;
	top:20px;
	left: 31%;
}
.parentsHedding h2 {
	transform: skewY(4deg);
	font-family: "BeautyFreak-Bold";
	text-transform: lowercase;
	font-size: 79px;
  	color: #ffffff;
	position:absolute;
	top:35px;
	left:100px;
}
.parentsImage {
	padding-left:0px;
	padding-right:0px;
}
.parentsImage img{
	width:100%;
}

.parents {
	background-image: linear-gradient(230deg, #D4CF09, #76B31D);
	padding: 150px 0px 150px 161px;
	
}
.parents h3{
	font-family: "Myriadpro-Bold";
	font-size: 50px;
	color: #ffffff;
	padding-left: 25px;
}
.parentsContents {
	padding:10px 50px 10px 40px;
}
.parentsContents ul li {
	font-family: "Myriadpro-Regular";
	font-size : 20px;
	color: #4D5326;
	padding: 10px 0px;

}
.pupilsSection {
	position:relative;
}
.pupilHedding { 
	background-image: url("../images/orange_bg-02.png"); 
	background-position: center; 
	background-size: cover;
	width:444px;
	height:211px;
	margin: 0 auto;
	position: absolute;
	z-index:99;
	left: 35%;
	
}
.pupilHedding h2{ 
	transform: skewY(4deg);
	font-family: "BeautyFreak-Bold";
	text-transform: lowercase;
	font-size: 79px;
	color: #ffffff;
	position:absolute;
	top:35px;
	left:130px;
	
} 
.pupils {
	background-color:#F8AD09 ;
	padding: 160px 110px 250px;
	
}
.pupilsImage {
	padding-right:0px ;
	padding-left:0px;
}
.pupilDiv {
	padding-right:0px ;
	padding-left:0px;
}
.pupils h3{
	font-family: "Myriadpro-Bold";
	font-size : 49px;
	color: #ffffff;
}
.pupilsContents {
	padding:25px 0px 10px 20px;
}
.pupilsContents ul li {
	font-family: "Myriadpro-Regular";
	font-size : 20px;
	color: black;
	padding:15px 0px;
}
.pupilsImage {
	padding: 25px 0px 0px 0px;
}
.pupilsImage img {
	width:100%;
}
.helpSection {
	position: relative;
}
.helpHedding {
	background-image: url("../images/dark_red_bg-02.png"); 
	background-position: center; 
	background-size: cover;
	width:444px;
	height:211px;
	margin: 0 auto;
	position: absolute;
	z-index:99;
	left: 33%;
}
.helpHedding h2 {
	transform: skewY(4deg);
	font-family: "BeautyFreak-Bold";
	text-transform: lowercase;
	font-size: 79px;
	color: #ffffff;
	position:absolute;
	top:35px;
	left:130px;

}
.helpDiv {
	padding-right:0px ;
	padding-left:0px;
}
.help {
	background-image: linear-gradient(230deg, #8E0A21, #4E1270);
	padding: 250px 132px 275px;
}
.help h3{
	font-family: "Myriadpro-Bold";
	font-size : 49px;
	color: #ffffff;
}
.helpContents {
	padding:10px 0px 10px;
}
.helpContents ul li {
	font-family: "Myriadpro-Regular";
	font-size : 20px;
	color: #ffffff;
	list-style-type:none;
	margin:20px 0px;
}
.helpUlLi {
	font-family: "Myriadpro-Bold" !important;
}
.helpImage {
	padding-right:0px ;
	padding-left:0px;
}

.helpImage img {
	width:100%;
}
.faqsSection {
	padding: 0px 0px 106px;
}
.faqImage {
	background-image: url("../images/faq_bg-02.png"); 
	background-position: center; 
	background-size: cover;
	width: 615px;
	height: 311px;
	margin: 62px auto 0 auto;
	z-index:99;
	left: 453px;
}
.faqImage h2 {
	font-family: "BeautyFreak-Bold";
	text-transform: lowercase;
	font-size: 188px;
	color: #ffffff;
	padding-top: 50px;
	padding-left: 126px;
}
.faqs {
	margin-top :50px;
}
.faqsHedding {
	padding: 10px 60px 10px 114px;
}
.faqsHedding h4 {
	font-family: "Myriadpro-Bold";
	font-size: 30px;
	color: #4F1270;
	line-height: 38px;
}
.faqsContent {
	padding:30px 52px 10px 30px;
}
.faqRow {
	padding-top:30px;
}
.faqsContent p {
	font-family: "Myriadpro-Regular";
	font-size: 19px;
	line-height:30px;
	font-weight: normal;
}
.faqsContent span {
	font-family: "Myriadpro-Bold";
}
.faqsContent a:hover {
    color: rgb(79, 18, 112);
}
.download h6{
	position:relative;
	font-family: "Myriadpro-Bold";
	font-size: 25px;
	color: #4F1270;
	margin-left: 17px;
	float: left;
}
.download img {
	float: left;
	margin-left: 10px;
 
	margin-top: 19px;
}
.furtherInformationContainer {
	padding: 50px 168px 10px;
}
.furtherInformation {
	margin-top: 110px;
}
.furtherInformation h6{
	font-family: "Myriadpro-Regular";
	font-size: 21px;
	
}
.furtherInformationCard {
	background-color:#4F1270 ;
	border-radius:13px;
	padding:7px 10px;
	width: 107%;
}
.furtherInformationCard p {
	font-family: "Myriadpro-Bold";
	color: #ffffff;
	text-align:center;
	font-size: 20px;
	line-height: 24px;
	padding:6px 10px 1px;
    
}
.sample p {
	padding:6px 46px 1px !important;
}
.lookOutSection {
	background-image: linear-gradient(230deg, #D4CF09,#76B31D );
	padding: 235px 30px 50px 35px;
	position: relative;
	
}



.lookOutSection h3{
	font-family: "Myriadpro-Bold";
	font-size : 36px;
	color: #ffffff;
	text-align:center;
	padding: 0px 192px;
}

.lookOutCardRow{
	margin-top: 60px;
}
.lookOutCardImage {
	position:relative;
}
.lookOutCardTextOne {
	position:absolute;
	top: 30px;
  left: 132px;
}
.lookOutCardTextTwo {
	position:absolute;
	top: 45px;
	left: 95px;
}
.lookOutCardTextThree {
	position:absolute;
	top: 52px;
	left: 105px;
}
.lookOutCardImage img{
	width:100%;
}
.lookOutImage {
	background-image: url("../images/look_out-bg-02.png");
	background-position: center;
	background-size: cover;
	height: 230px;
	width: 535px;
	position: absolute;
	top: -15px;
	left: 419px;
	z-index:999;
}
.lookOutImage h2 {
	position: absolute;
	transform: skewY(-6deg);
	font-family: "BeautyFreak-Bold";
	font-size: 78px;
	text-transform: lowercase;
	color: #ffffff;
	top: 52px;
	left: 112px;
}
.lookOutCardTextOne h4{
	font-family: "BeautyFreak-Bold";
	text-transform: lowercase;
	font-size : 50px;
	color: #ffffff;
}
.lookOutCardTextTwo h4{
	font-family: "BeautyFreak-Bold";
	text-transform: lowercase;
	font-size : 33px;
	color: #ffffff;
}
.lookOutCardTextThree h4{
	font-family: "BeautyFreak-Bold";
	text-transform: lowercase;
	font-size : 42px;
	color: #ffffff;
	
}

.attendanceOfficeSection {
	background-color:#ffffff ;
	padding:30px 0px;
}
.attendenceOffice h3{
	font-family: "Myriadpro-Bold";
	font-size : 20px;
	color: #622382;
}
.attendenceOffice p{
	font-family: "Myriadpro-Regular";
	font-size : 14px;
	color: black;
}
.attendenceOfficeContent {
	padding:13px 1px;
}
.attendenceOffice span{
	font-family: "Myriadpro-Bold";
	font-size : 14px;
	color: #622382;
    font-weight: normal;
}
.attendanceOfficeDiv {
	padding-left: 20px;
}
.attendanceOfficeDivTwo {
	padding-left: 25px;
	
}
.block-bars-how { 
	display: flex; 
	flex-flow: row wrap;
} 
 .outer-block-how { 
	flex: 1; 
	flex-grow: 1;
	flex-basis: 0%; 
	flex-grow: 1; 
	flex-basis: 0%; 
	min-width: 0; 
	min-height: 0;
	width: 100%; 
	max-width: 100%; 
} 
 .bar-content-how { 
	margin: .625rem; 
	padding: .938rem; 
 } 
 .roll-container-how { 
	position: absolute; 
	height: 300px; 
	width: 100%; 
	left: 0; 
	z-index: 10;
} 
.stripe { 
	position: absolute; 
	left: 0; 
	width: 100%; 
 } 
 .stripe-band-how { 
	transform: skewY(-6deg);
	background-image:linear-gradient(230deg, #FAB409, #F59E08); 
	height: 150px;
	bottom: 262px;
 } 
 
 
 .block-barsp { 
	display: flex; 
	flex-flow: row wrap;
} 
 .outer-blockp { 
	flex: 1; 
	flex-grow: 1;
	flex-basis: 0%; 
	flex-grow: 1; 
	flex-basis: 0%; 
	min-width: 0; 
	min-height: 0;
	width: 100%; 
	max-width: 100%; 
} 
 .bar-contentp { 
	margin: .625rem; 
	padding: .938rem; 
 } 
 .roll-containerp { 
	position: absolute; 
	height: 300px; 
	width: 100%; 
	left: 0; 
	z-index: 10;
} 
.stripep { 
	position: absolute; 
	left: 0; 
	width: 100%; 
 } 
 .stripe-bandp { 
	transform: skewY(-6deg);
	background: #4F1270;
	height: 150px;
	bottom: 337px
 } 
 /*-----------------*/
 .block-barsw { 
	display: flex; 
	flex-flow: row wrap;
} 
 .outer-blockw { 
	flex: 1; 
	flex-grow: 1;
	flex-basis: 0%; 
	flex-grow: 1; 
	flex-basis: 0%; 
	min-width: 0; 
	min-height: 0;
	width: 100%; 
	max-width: 100%; 
} 
 .bar-contentp { 
	margin: .625rem; 
	padding: .938rem; 
 } 
 .roll-containerw { 
	position: absolute;  
	height: 300px; 
	width: 100%; 
	left: 0; 
	z-index: 10;
} 
.stripew{ 
	position: absolute;  
	left: 0; 
	width: 100%; 
 } 
 .stripe-bandw { 
	transform: skewY(-6deg);
	background: #ffffff;
	height: 234px;
	bottom: 142px;
 } 


 .block-barsww { 
	display: flex; 
	flex-flow: row wrap;
} 
 .outer-blockww { 
	flex: 1; 
	flex-grow: 1;
	flex-basis: 0%; 
	flex-grow: 1; 
	flex-basis: 0%; 
	min-width: 0; 
	min-height: 0;
	width: 100%; 
	max-width: 100%; 
} 
 .bar-contentww { 
	margin: .625rem; 
	padding: .938rem; 
 } 
 .roll-containerww { 
	position: absolute; 
	height: 300px; 
	width: 100%; 
	left: 0; 
	z-index: 10;
} 
.stripeww{ 
	position: absolute; 
	left: 0; 
	width: 100%; 
 } 
 .stripe-bandww { 
	transform: skewY(-6deg);
	background: #ffffff;
	height: 178px;
	bottom: 211px;


 } 
 .faqDiv {
	 margin-top:15px;
 }
/*---------------------------------*/
.block-bars-pupils { 
	display: flex; 
	flex-flow: row wrap;
} 
 .outer-block-pupils { 
	flex: 1; 
	flex-grow: 1;
	flex-basis: 0%; 
	flex-grow: 1; 
	flex-basis: 0%; 
	min-width: 0; 
	min-height: 0;
	width: 100%; 
	max-width: 100%; 
} 
 .bar-content-pupils { 
	margin: .625rem; 
	padding: .938rem; 
 } 
 .roll-container-pupils { 
	position: absolute; 
	height: 300px; 
	width: 100%; 
	left: 0; 
	z-index: 10;
} 
.stripe-pupils{ 
	position: absolute; 
	left: 0; 
	width: 100%; 
 } 
 .stripe-band-pupils { 
	transform: skewY(-6deg);
	background: #ffffff;
	height: 181px;
	bottom: 210px;
 } 

/*---------------------------------*/
.block-bars-help { 
	display: flex; 
	flex-flow: row wrap;
} 
 .outer-block-help { 
	flex: 1; 
	flex-grow: 1;
	flex-basis: 0%; 
	flex-grow: 1; 
	flex-basis: 0%; 
	min-width: 0; 
	min-height: 0;
	width: 100%; 
	max-width: 100%; 
} 
 .bar-content-help { 
	margin: .625rem; 
	padding: .938rem; 
 } 
 .roll-container-help { 
	position: absolute; 
	height: 300px; 
	width: 100%; 
	left: 0; 
	z-index: 10;
} 
.stripe-help{ 
	position: absolute; 
	left: 0; 
	width: 100%; 
 } 
 .stripe-band-help { 
	transform: skewY(-6deg);
	background: #ffffff;
	height: 150px;
	bottom: 239px;
 } 
 /*-----------------------------*/
 .block-bars-look { 
	display: flex; 
	flex-flow: row wrap;
} 
 .outer-block-look { 
	flex: 1; 
	flex-grow: 1;
	flex-basis: 0%; 
	flex-grow: 1; 
	flex-basis: 0%; 
	min-width: 0; 
	min-height: 0;
	width: 100%; 
	max-width: 100%; 
} 
 .bar-content-look { 
	margin: .625rem; 
	padding: .938rem; 
 } 
 .roll-container-look { 
	position: absolute; 
	height: 300px; 
	width: 100%; 
	left: 0; 
	z-index: 10;
} 
.stripe-look { 
	position: absolute; 
	left: 0; 
	width: 100%; 
 } 
 .stripe-band-look { 
	transform: skewY(-6deg);
	height: 150px;
	bottom: 215px;
	background-color:#ffffff;
 } 
 .howAreWeDiv {
	 padding-top: 20px;
 }

/*=================Footer======================*/
	.footer{
		color: #FFFFFF;
	}
	.footer a{
		color: #FFFFFF;
		text-decoration: none;
	}
	.footer-top{
		background-color: #2E3337;
		padding: 2rem 0;
	}
	.footer-top .container{
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	.school-details{
		font-size: 11px;
		color: #FFFFFF;
		line-height: 1.3rem;
		margin-bottom: 1.2rem;
	}
	.footer img{
		margin-bottom: 2.7rem;
		width: 275px;
	}
	.form-input{
		margin-bottom: 0.65rem !important;
	}
	.footer-contact h4{
		color: #FFC300;
		font-family: 'RobotoSlab-Bold';
		font-size: 2.5rem;
	}
	.form-control::placeholder {
		color: #999;
		opacity: 1;
	}
	.emailaddress {
		color: #999;
		opacity: 1;
		background-color: #ffffff;
		font-size: 14px;	
	}
	.footer-contact .form-control {
		border: 0;
		border-radius: 0;
		height: 23px;
		padding: .15rem .5rem;
	}
	.footer-contact #message{
		height: 50px;
		
	}
	.footer-contact .btn{
		background-image: linear-gradient(to right, #FFA000, #FFA200, #FFB100, #FFBE00, #FFC300);
		border:none;
		 border-radius: 0.3rem;
		font-size: 1.2rem;
		padding: 0.7rem 2.2rem;
	}
	.textarea{
		resize: none;
	}
	.contact-form{
		display: block;
	}
	.contact-message{
		display: none;
	}
	.contact-message p{
		color: #FFC300;
		font-size: 1rem;
		font-family: 'RobotoSlab-Bold';
		margin-bottom: 0.1rem;
	}
	.contactErrorDisplay {
		float: left;
		width: 97%;
		color: red;
		font-size: 10px;
		height: 15px;
		text-align: left;
		padding-bottom: 3px;
		margin-left: 8px;
	}
	.info-text{
		font-size: 10px;
		margin-bottom: .5rem;
	}
	.footer-bottom-attendance{
		background-color: #181B1D !important;
		font-size: 10px;
		padding:7px 0px;
	}
	.credits{
		text-align: right;
	}

	.welcomeByDirectorSection {
		min-height: 680px;
		/*background-image: url('../images/director-sixth-form.png'),linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, .1) 50%);*/
	   background: url(../images/parents.jpeg) no-repeat 100% 89%, linear-gradient(90deg, #76B31D, #D4CF09);
		/*background-size: 50% 100%;*/
		 background-size: 50% auto;
		/*background-position: left, right bottom;*/
		background-attachment: fixed;
		background-repeat: no-repeat, no-repeat;
		position:relative;
	}

	.largeDarkPinkPolygon2 {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeText {
		padding:230px 44px 80px 50px;
	}
	.welcomeText h1 {
		font-family: "Myriadpro-Bold" !important;
		font-size: 48px !important;
		color: #ffffff;
		
	}

	.welcomeDesctiption { position: relative; z-index: 1000;padding-left: 15px;padding-top: 18px; }
	.welcomeDesctiption ul li { 
		font-family: "Myriadpro-Regular";
		font-size : 20px;
		color: #4D5326;
		padding: 10px 0px; }

	.welcomeByDirectorSectionPupil {
		min-height: 680px;
		background: url(../images/pupil.png) no-repeat 100% 89%, linear-gradient(90deg, #FAB409, #F29108);
		background-size: 50% auto;
		background-position: left top;
		position: relative;
		background-attachment: fixed;
	}

	.largeDarkPinkPolygon2Pupil {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeTextPupil {
		padding: 195px 20px 250px 125px;
	}
	.welcomeTextPupil h1 {
		font-family: "Myriadpro-Bold" !important;
		font-size: 47px !important;
		color: #ffffff;
		
	}

	.welcomeDesctiptionPupil { position: relative; z-index: 1000;padding-left: 15px; }
	.welcomeDesctiptionPupil ul li { 
		font-family: "Myriadpro-Regular";
		font-size: 19px;
		color: #4D5326;
		padding: 10px 0px;

		}
		
		
	.welcomeByDirectorSectionHelp {
		min-height: 680px;
		/*background-image: url('../images/director-sixth-form.png'),linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, .1) 50%);*/
		background: url(../images/help.jpg) no-repeat 100% 89%, linear-gradient(90deg, #4E1270 ,#8E0A21);
		/*background-size: 50% 100%;*/
		background-size: 50% auto;
		/*background-position: left, right bottom;*/
		background-attachment: fixed;
		/*background-repeat: no-repeat, no-repeat;*/
		position:relative;
	}

	.largeDarkPinkPolygon2Help {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeTextHelp {
		padding: 215px 75px 200px 40px;
	}
	.welcomeTextHelp h1 {
		font-family: "Myriadpro-Bold" !important;
		font-size: 48px !important;
		color: #ffffff;
		
	}

	.welcomeDesctiptionHelp { position: relative; z-index: 1000;}
	.welcomeDesctiptionHelp ul li { 
		font-family: "Myriadpro-Regular";
		font-size: 19px;
		color: #ffffff;
		padding: 10px 0px;
		list-style-type:none;
		}
	
	/*---------------MAC--------------------*/
	
	.mac-os .attendanceImage {
		width:999px;
		height: 464px;
		position:absolute;
		top:45%;
	}
	.mac-os .attendanceTitle h3{
		font-size : 44px;
		
	}
	.mac-os .attendanceTitle p{
		font-size : 29px;
		line-height:40px;
	}
	.mac-os .attendanceTitle {
		padding:90px 82px 0px 38%;
		
	}
	.mac-os .attendenceCount h3{
		font-size : 72px;
		line-height:80px;
	}

	.mac-os .attendenceCount {
		padding-left: 50px;
		padding-bottom:9%;
	}
	.mac-os .attendenceContent p{
		margin-top:23px;
		font-size : 26px;
		line-height:38px;
	}
	.mac-os .attendenceContent {
		margin-top:32px;
	}
	.mac-os .attendenceContent {
		margin-top:32px;
	}
	.mac-os .carousel-inner-main {
		max-height: 1100px;
	}
	.mac-os #mainCarousel {
		max-height: 1100px;
	}
	.mac-os .carousel-indicators {
		bottom: 10%;
	}
	.mac-os .attendenceContentPara {
		margin-top:10px;
	}
	.mac-os .attendenceContent p:first-of-type{
		padding-right:13px;
		font-size : 30px !important;
		
	}
	.mac-os .attendenceCountImage img {
		margin-top: 30px;
		width:113%;
	}
	.mac-os .attendenceLookSection {
		width: 100%;
		padding:7% 0px 13% 5px;
		z-index:1;
		background-attachment:fixed;
	}
	.mac-os .attendenceLookSection::before {
		background-attachment: initial;
	}
	.mac-os .attendenceLook {
		background-color:white;
		width:50%;
	}
	.mac-os .attendenceLookLike {
		padding-top: 10px;
		padding-left: 50px;
		padding-right:14px;
		padding-bottom:0px;
	}
	.mac-os .attendenceLookImageColumn {
		position: relative;
	}

	.mac-os .attendenceLookImage {
		height: 486px;
		position: absolute;
		width: 600px;
		top: -160px;
		left: -140px;
	}
	.mac-os .attendencePercentage:first-of-type{
		margin-top: 10px; 
	}
	.mac-os .attendenceLookHedding {
		position: absolute;
		top: 84px;
		left: 152px;
		padding-right: 127px;
	}
	.mac-os .attendenceLookHedding h3{
		font-size : 70px;
	}
	.mac-os .attendenceLookLike p {
		font-size : 26px;
		line-height:40px;
	}
	.mac-os .attendencePercentage {	
		margin-top: 5px;
		padding: 10px;
		
	}
	.mac-os .attendancePercentageContainer {
		width:50%;
	}

	.mac-os .attendenceHundred h4 {
		font-size : 32px;
		margin-top: 13px;
		padding: 0px;
	}
	.mac-os .attendenceHundredCount h5 {
		font-size : 30px;
		margin: 0px;
		padding: 0px;
	}
	.mac-os .attendenceHundredCount {
		padding: 7px;
		margin-top:5px;
		width:100%;
	}
	.mac-os .attendenceNinetyNine h4{
		font-size :32px;
		margin-top: 11px;
		padding: 0px;
	}
	.mac-os .attendenceNinetyNineCount h5{
		font-size : 28px;
		margin-top: 0px;
		padding: 0px;
	}
	.mac-os .attendenceNinetyNineCount{
		padding: 7px;
		margin-top:5px;
		width:99%;
	}

	.mac-os .attendenceNinetySeven h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.mac-os .attendenceNinetySevenCount h5{
		font-size : 28px;
		margin: 0px;
		padding: 0px;
	}
	.mac-os .attendenceNinetySevenCount{
		padding: 7px;
		margin-top:5px;
		width:97%;
	}

	.mac-os .attendenceNinetyFive h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.mac-os .attendenceNinetyFiveCount h5{
		font-size : 28px;
		margin: 0px;
		padding: 0px;
	}
	.mac-os .attendenceNinetyFiveCount{
		padding: 7px;
		margin-top:5px;
		width:95%;
	}

	.mac-os .attendenceNinety h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.mac-os .attendenceNinetyCount h5{
		font-size : 28px;
		margin: 0px;
		padding: 0px;
	}
	.mac-os .attendenceNinetyCount{
		padding: 7px;
		margin-top:5px;
		width:90%;
	}

	.mac-os .attendenceEightyFive h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.mac-os .attendenceEightyFiveCount h5{
		font-size : 28px;
		margin: 0px;
		padding: 0px;
	}
	.mac-os .attendenceEightyFiveCount{
		padding: 7px;
		margin-top:5px;
		width:85%;
	}

	.mac-os .howAreWeDoing { 
		background-color:#F59C08 ; 
		position:relative; 
		 /* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
		padding: 20px 0px 14% 0px;
	}
	.mac-os .howAreWe {
		z-index:9999;
		margin:0 auto;
		width: 749px ;
		height: 216px ;
	} 

	.mac-os .howAreWe h3{
		font-size: 72px;
		padding-top: 60px;
	}

	.mac-os .howAreWeContainer {
		background-color:#ffffff ;
		height:125px;
		padding: 0px 10px;
		width:80%;
		margin:15px auto;
	}
	.mac-os .year h2{
		font-size : 82px;
		float:left;
	}
	.mac-os .percent h2 {
		font-size : 82px;
		float:right;
	}

	.mac-os .attendenceSupport {
		background-color:#4F1270 ;
		padding:97px 0px 340px 0px ;
		/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.mac-os .attendenceSupport h2{
		font-size : 53px;
		padding-top:20px;
	}
	.mac-os .expectContent {
		padding: 100px 53px 0px;
		
	}
	.mac-os .expectHeadding {
		height: 120px;
		padding-top: 6px;
	}	
	.mac-os .expect h4{
		font-size : 45px;
	}
	.mac-os .monitor h4{
		font-size : 45px;
	}
	.mac-os .listen h4{
		font-size : 45px;
	}
	.mac-os .support h4{
		font-size : 45px;
	}
	.mac-os .formalise h4{
		font-size : 45px;
	}
	.mac-os .enforce h4{
		font-size : 45px;
	}
	
	.mac-os .expect {
		 height: 240px;
		 background-color: #ffffff; 
		 position: relative;
		 margin: 75px auto 15px;
		 width:94%;
	}
	.mac-os .monitor {
		 height: 240px; 
		 background-color: #ffffff; 
		 position: relative;
		 margin: 15px auto;
		 width:94%;
	}
	.mac-os .listen {
		 height: 240px; 
		 background-color: #ffffff; 
		 position: relative;
		 margin: 15px auto;
		 width:94%;
	}
	.mac-os .support {
		 height: 240px; 
		 background-color: #ffffff; 
		 position: relative;
		 margin: 15px auto;
		 width:94%;
	}
	.mac-os .formalise {
		 height: 310px; 
		 background-color: #ffffff; 
		 position: relative;
		 margin: 15px auto;
		 width:94%;
	}
	.mac-os .enforce {
		 height: 240px; 
		 background-color: #ffffff; 
		 position: relative;
		 margin: 15px auto;
		 width:94%;
	}

	.mac-os .expectContent p{
		font-size : 25px;
		justify-content:center;
	}
	.mac-os .monitorHeadding {
		height: 120px;
		padding-top: 6px;
	}
	.mac-os .listenHeadding{
		height: 120px;
		padding-top: 6px;
	}
	.mac-os .supportHeadding{
		height: 120px;
		padding-top: 6px;
	}
	.mac-os .formaliseHeadding{
		height: 120px;
		padding-top: 6px;
	}
	.mac-os .enforceHeadding{
		height: 120px;
		padding-top: 6px;
	}
	.mac-os .parentSection {
		padding-top:85px;
	}
	.mac-os .parentsHedding {
		width:525px;
		height:253px;
		margin: 0 auto;
		position: absolute;
		z-index:99;
		top:14px;
		left: 661px;
	}
	.mac-os .parentsHedding h2 {
		font-size: 100px;
		color: #ffffff;
		position:absolute;
		top:50px;
		left:17%;
	}
	.mac-os .parentsImage {
		padding-left:0px;
		padding-right:0px;
	}
	.mac-os .parentsImage img{
		width:100%;
	}

	.mac-os .parents {
		background-image: linear-gradient(230deg, #D4CF09, #76B31D);
		padding: 230px 17px 150px 129px;
		
	}
	.mac-os .parents h3{
		font-size: 72px;
		padding-left: 25px;
		padding-right:28px;
	}
	.mac-os .parentsContents {
		padding:20px 91px 10px 40px;
	}
	.mac-os .parentsContents ul li {
		font-size : 28px;
		padding:13px 10px;
	}
	.mac-os .pupilsSection {
		position:relative;
	}
	.mac-os .pupilHedding { 
		width:650px;
		height:309px;
		margin: 0 auto;
		left:661px;
		
	}
	.mac-os .pupilHedding h2{ 
		font-size: 115px;
		top:70px;
		left:185px;
	} 
	.mac-os .pupils {
		background-color:#F8AD09 ;
		padding: 312px 178px 288px 140px;
		
	}
	.mac-os .pupilsImage {
		padding:90px 0px 0px 0px;
	}
	.mac-os .pupilDiv {
		padding-right:0px ;
		padding-left:0px;
	}
	.mac-os .pupils h3{
		font-size : 72px;
		padding-right:41px;
	}
	.mac-os .pupilsContents {
		padding:25px 0px 10px 20px;
	}
	.mac-os .pupilsContents ul li {
		font-family: "Myriadpro-Regular";
		font-size : 28px;
		color: black;
		padding:15px 0px;
	}
	.mac-os .pupilsImage {
		padding: 25px 0px 0px 0px;
	}
	.mac-os .pupilsImage img {
		width:100%;
	}
	.mac-os .helpSection {
		position: relative;
	}
	.mac-os .helpHedding {
		width:525px;
		height:253px;
		margin: 0 auto;
		left: 651px;
		top:48px;
	}
	.mac-os .helpHedding h2 {
		font-size: 110px;
		top:46px;
		left:160px;

	}
	.mac-os .helpDiv {
		padding-right:0px ;
		padding-left:0px;
	}
	.mac-os .help {
		background-image: linear-gradient(230deg, #8E0A21, #4E1270);
		padding: 360px 148px 275px 130px;
	}
	.mac-os .help h3{
		font-size : 75px;
	}
	.mac-os .helpContents {
		padding:10px 26px 10px 0px;
	}
	.mac-os .helpContents ul li {
		font-size : 28px;
		list-style-type:none;
		margin:28px 0px;
	}
	.mac-os .helpImage {
		padding-right:0px ;
		padding-left:0px;
	}
	.mac-os .helpImage img {
		width:100%;
	}
	.mac-os .faqsSection {
		padding:0px 0px 137px;
	}
	.mac-os .faqImage {
		width: 750px;
		height: 379px;
		margin: 80px auto 0;
		z-index:99;
		left: 453px;
	}
	.mac-os .faqImage h2 {
		font-size: 250px;
		padding-top: 44px;
		padding-left: 170px;
	}
	.mac-os .faqs {
		margin-top :50px;
	}
	.mac-os .faqsHedding {
		padding:10px 60px 10px 358px;
	}
	.mac-os .faqsHedding h4 {
		font-size : 40px;
		line-height:55px;
	}
	.mac-os .faqsContent {
		padding:30px 290px 10px 39px;
	}
	.mac-os .faqRow {
		padding-top:40px;
	}
	.mac-os .faqsContent p {
		font-family: "Myriadpro-Regular";
		font-size: 24px;
		line-height:36px;
	}
	.mac-os .faqsContent span {
		font-family: "Myriadpro-Bold";
	}

	.mac-os .download h6{
		font-size : 35px;
		margin-left: 27px;
		margin-top:30px;
	}
	.mac-os .download img {
		margin-top:40px;
	}
	.mac-os .furtherInformationContainer {
		padding:50px 452px 10px;
	}
	.mac-os .furtherInformation {
		margin-top:110px;
	}
	.mac-os .furtherInformation h6{
		font-size : 20px;
	}
	.mac-os .furtherInformationCard {
		background-color:#4F1270 ;
		border-radius:20px;
		padding:12px 8px 8px;
		width:100%;
	}
	.mac-os .furtherInformationCard p {
		font-size : 18px;
		text-align:center;
	}
	.sample p {
		padding:6px 46px 1px !important;
	}
	.mac-os .lookOutSection {
		background-image: linear-gradient(230deg, #D4CF09,#76B31D );
		padding: 368px 30px 60px 35px;
		position:relative;
	}
	.mac-os .lookOutSection h3{
		font-size : 35px;
		padding: 0px 400px;
	}

	.mac-os .lookOutCardRow{
		margin-top:70px;
		padding:0px 310px;
	}
	.mac-os .lookOutCardImage {
		position:relative;
	}
	.mac-os .lookOutCardTextOne {
		position:absolute;
		top: 30px;
	  left: 132px;
	}
	.mac-os .lookOutCardTextTwo {
		position:absolute;
		top: 45px;
	  left: 95px;
	}
	.mac-os .lookOutCardTextThree {
		position:absolute;
		top: 52px;
		left: 105px;
	}
	.mac-os .lookOutCardImage img{
		width:100%;
	}
	.mac-os .lookOutImage {
		height: 220px;
		width: 533px;
		position: absolute;
		top: 20px;
		left: 680px;
		z-index:999;
	}
	.mac-os .lookOutImage h2 {
		font-size: 85px;
		top: 45px;
		left: 107px;
	}
	.mac-os .lookOutCardTextOne h4{
		font-family: "BeautyFreak-Bold";
		text-transform: lowercase;
		font-size : 50px;
		color: #ffffff;
	}
	.mac-os .lookOutCardTextTwo h4{
		font-family: "BeautyFreak-Bold";
		text-transform: lowercase;
		font-size : 33px;
		color: #ffffff;
	}
	.mac-os .lookOutCardTextThree h4{
		font-family: "BeautyFreak-Bold";
		text-transform: lowercase;
		font-size : 42px;
		color: #ffffff;
		
	}

	.mac-os .attendanceOfficeSection {
		background-color:#ffffff ;
		padding:30px 0px;
	}
	.mac-os .attendenceOffice h3{
		font-size : 25px;
		color: #4F1270;
	}
	.mac-os .attendenceOffice p{
		font-size : 17px;
		color: black;
	}
	.mac-os .attendenceOfficeContent {
		padding:13px 1px;
	}
	.mac-os .attendenceOffice span{
		font-size : 17px;
		color: #4F1270;
	}
	.mac-os .attendanceOfficeDiv {
		padding-left: 0px 67px;
	}
	.mac-os .attendanceOfficeDivTwo {
		padding-left: 0px 25px;
		
	}
	.mac-os .block-bars { 
		display: flex; 
		flex-flow: row wrap;
	} 
	 .mac-os .outer-block { 
		flex: 1; 
		flex-grow: 1;
		flex-basis: 0%; 
		flex-grow: 1; 
		flex-basis: 0%; 
		min-width: 0; 
		min-height: 0;
		width: 100%; 
		max-width: 100%; 
	} 
	 .mac-os .bar-content { 
		margin: .625rem; 
		padding: .938rem; 
	 } 
	 .mac-os .roll-container { 
		position: absolute; 
		height: 300px; 
		width: 100%; 
		left: 0; 
		z-index: 10;
	} 
	.mac-os .stripe { 
		position: absolute; 
		left: 0; 
		width: 100%; 
	 } 
	.mac-os .stripe-band-how { 
		transform: skewY(-6deg);
		
		height: 216px;
		bottom: 225px;
	 } 
	 
	 
	 .mac-os .block-barsp { 
		display: flex; 
		flex-flow: row wrap;
	} 
	 .mac-os .outer-blockp { 
		flex: 1; 
		flex-grow: 1;
		flex-basis: 0%; 
		flex-grow: 1; 
		flex-basis: 0%; 
		min-width: 0; 
		min-height: 0;
		width: 100%; 
		max-width: 100%; 
	} 
	 .mac-os .bar-contentp { 
		margin: .625rem; 
		padding: .938rem; 
	 } 
	 .mac-os .roll-containerp { 
		position: absolute; 
		height: 300px; 
		width: 100%; 
		left: 0; 
		z-index: 10;
	} 
	.mac-os .stripep { 
		position: absolute; 
		left: 0; 
		width: 100%; 
	 } 
	 .mac-os .stripe-bandp { 
		transform: skewY(-6deg);
		background: #4F1270;
		height: 213px;
		bottom: 308px
	 } 
	 /*-----------------*/
	 .mac-os .block-barsw { 
		display: flex; 
		flex-flow: row wrap;
	} 
	 .mac-os .outer-blockw { 
		flex: 1; 
		flex-grow: 1;
		flex-basis: 0%; 
		flex-grow: 1; 
		flex-basis: 0%; 
		min-width: 0; 
		min-height: 0;
		width: 100%; 
		max-width: 100%; 
	} 
	 .mac-os .bar-contentp { 
		margin: .625rem; 
		padding: .938rem; 
	 } 
	 .mac-os .roll-containerw { 
		position: absolute; 
		height: 300px; 
		width: 100%; 
		left: 0; 
		z-index: 10;
	} 
	.mac-os .stripew{ 
		position: absolute; 
		left: 0; 
		width: 100%; 
	 } 
	 .mac-os .stripe-bandw { 
		transform: skewY(-6deg);
		background: #ffffff;
		height: 308px;
		bottom: 120px;
	 } 


	 .mac-os .block-barsww { 
		display: flex; 
		flex-flow: row wrap;
	} 
	 .mac-os .outer-blockww { 
		flex: 1; 
		flex-grow: 1;
		flex-basis: 0%; 
		flex-grow: 1; 
		flex-basis: 0%; 
		min-width: 0; 
		min-height: 0;
		width: 100%; 
		max-width: 100%; 
	} 
	 .mac-os .bar-contentww { 
		margin: .625rem; 
		padding: .938rem; 
	 } 
	 .mac-os .roll-containerww { 
		position: absolute; 
		height: 300px; 
		width: 100%; 
		left: 0; 
		z-index: 10;
	} 
	.mac-os .stripeww{ 
		position: absolute; 
		left: 0; 
		width: 100%; 
	 } 
	 .mac-os .stripe-bandww { 
		transform: skewY(-6deg);
		background: #ffffff;
		height: 250px;
		bottom: 181px;


	 } 
	 
	/*---------------------------------*/
	.mac-os .block-bars-pupils { 
		display: flex; 
		flex-flow: row wrap;
	} 
	 .mac-os .outer-block-pupils { 
		flex: 1; 
		flex-grow: 1;
		flex-basis: 0%; 
		flex-grow: 1; 
		flex-basis: 0%; 
		min-width: 0; 
		min-height: 0;
		width: 100%; 
		max-width: 100%; 
	} 
	 .mac-os .bar-content-pupils { 
		margin: .625rem; 
		padding: .938rem; 
	 } 
	 .mac-os .roll-container-pupils { 
		position: absolute; 
		height: 300px; 
		width: 100%; 
		left: 0; 
		z-index: 10;
	} 
	.mac-os .stripe-pupils{ 
		position: absolute; 
		left: 0; 
		width: 100%; 
	 } 
	 .mac-os .stripe-band-pupils { 
		transform: skewY(-6deg);
		background: #ffffff;
		height: 214px;
		bottom: 213px;
	 } 

	/*---------------------------------*/
	.mac-os .block-bars-help { 
		display: flex; 
		flex-flow: row wrap;
	} 
	 .mac-os .outer-block-help { 
		flex: 1; 
		flex-grow: 1;
		flex-basis: 0%; 
		flex-grow: 1; 
		flex-basis: 0%; 
		min-width: 0; 
		min-height: 0;
		width: 100%; 
		max-width: 100%; 
	} 
	 .mac-os .bar-content-help { 
		margin: .625rem; 
		padding: .938rem; 
	 } 
	 .mac-os .roll-container-help { 
		position: absolute; 
		height: 300px; 
		width: 100%; 
		left: 0; 
		z-index: 10;
	} 
	.mac-os .stripe-help{ 
		position: absolute; 
		left: 0; 
		width: 100%; 
	 } 
	 .mac-os .stripe-band-help { 
		transform: skewY(-6deg);
		background: #ffffff;
		height: 208px;
		bottom: 210px;
	 } 
	 /*-----------------------------*/
	 .mac-os .block-bars-look { 
		display: flex; 
		flex-flow: row wrap;
	} 
	 .mac-os .outer-block-look { 
		flex: 1; 
		flex-grow: 1;
		flex-basis: 0%; 
		flex-grow: 1; 
		flex-basis: 0%; 
		min-width: 0; 
		min-height: 0;
		width: 100%; 
		max-width: 100%; 
	} 
	 .mac-os .bar-content-look { 
		margin: .625rem; 
		padding: .938rem; 
	 } 
	 .mac-os .roll-container-look { 
		position: absolute; 
		height: 300px; 
		width: 100%; 
		left: 0; 
		z-index: 10;
	} 
	.mac-os .stripe-look { 
		position: absolute; 
		left: 0; 
		width: 100%; 
	 } 
	 .mac-os .stripe-band-look { 
		transform: skewY(-6deg);
		height: 208px;
		bottom: 183px;
		background-color:#ffffff;
	 }
	.mac-os .welcomeByDirectorSection {
		min-height: 680px;
		/*background-image: url('../images/director-sixth-form.png'),linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, .1) 50%);*/
	   background: url(../images/parents.jpeg) no-repeat 100% 89%, linear-gradient(90deg, #76B31D, #D4CF09);
		/*background-size: 50% 100%;*/
		 background-size: 50% auto;
		/*background-position: left, right bottom;*/
		background-attachment:fixed;
		position:relative;
	}

	.mac-os .largeDarkPinkPolygon2 {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100;max-width: 85%;
	}
	.mac-os .welcomeText {
		padding:290px 44px 120px 50px;
	}
	.mac-os .welcomeText h1 {
		font-family: "Myriadpro-Bold";
		font-size: 45px !important;
		color: #ffffff;
	}

	.mac-os .welcomeDesctiption { position: relative; z-index: 1000;padding-left: 15px; }
	.mac-os .welcomeDesctiption ul li { 
		font-family: "Myriadpro-Regular";
		font-size : 19px;
		color: #4D5326;
		padding: 10px 0px;
	}

	.mac-os .welcomeByDirectorSectionPupil {
		min-height: 680px;
		background-size: 50% auto;
		background-position: left top;
		position: relative;
		background-attachment:fixed;
	}

	.mac-os .largeDarkPinkPolygon2Pupil {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.mac-os .welcomeTextPupil {
		padding: 270px 20px 250px 125px;
	}
	.mac-os .welcomeTextPupil h1 {
		font-family: "Myriadpro-Bold";
		font-size: 48px !important;
		color: #ffffff;
		
	}

	.mac-os .welcomeDesctiptionPupil { position: relative; z-index: 1000;padding-left: 15px; }
	.mac-os .welcomeDesctiptionPupil ul li { 
		font-family: "Myriadpro-Regular";
		font-size: 19px;
		color: #4D5326;
		padding: 10px 0px;
	}
		
	.mac-os .welcomeByDirectorSectionHelp {
		min-height: 680px;
		/*background-size: 50% 100%;*/
		background-size: 50% auto;
		/*background-position: left, right bottom;*/
		position:relative;
		background-attachment:fixed;
	}

	.mac-os .largeDarkPinkPolygon2Help {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.mac-os .welcomeTextHelp {
		padding: 310px 75px 200px 40px;
	}
	.mac-os .welcomeTextHelp h1 {
		font-family: "Myriadpro-Bold";
		font-size: 48px !important;
		color: #ffffff;
	}

	.mac-os .welcomeDesctiptionHelp { 
		position: relative; 
		z-index: 1000;
	}
	.mac-os .welcomeDesctiptionHelp ul li { 
		font-family: "Myriadpro-Regular";
		font-size: 19px;
		color: #ffffff;
		padding: 10px 0px;
		list-style-type:none;
	} 
 
@media (min-width: 1601px) and (max-width: 1800px) { 
	
	.mac-os .attendenceLook {
		width:56%;
	}
	.mac-os .attendenceLookImage {
		height: 444px;
		width: 552px;
	}
	.mac-os .attendenceLookHedding {
		left: 142px;
	}
	.mac-os .attendenceLookHedding h3{
		font-size : 61px;
	}
	.mac-os .attendenceLookLike p {
		font-size : 24px;
		line-height:35px;
	}
	.mac-os .attendenceLookLike {
		padding-top: 10px;
	}
	.mac-os .attendancePercentageContainer {
		width:56%;
	}
	.mac-os .furtherInformationCard {
		padding:12px 13px 8px;
	}
	.mac-os .furtherInformationCard p {
		font-size: 20px;
	}
	.mac-os .faqsHedding {
		padding: 10px 0px 10px 17%;
	}
	.mac-os .faqsHedding h4 {
		font-size: 45px;
		line-height:60px;
	}
	.mac-os .faqsContent {
		padding: 30px 10% 10px 39px;
	}

	.mac-os .faqsContent p {
		font-size: 22px;
		line-height:33px;
	}
	.mac-os .lookOutImage { 
		left:32%
	}
	.mac-os .helpHedding {
		left:32%
	}
	.mac-os .parentsHedding { 
		left:32%
	}
	.mac-os .pupilHedding { 
		left:32%
	}
	.mac-os .helpHedding { 
		left:32%
	}
	.mac-os .furtherInformationContainer {
		padding:50px 16% 10px;
	}
	.sample p {
		padding:6px 85px 1px !important;
	}
	.mac-os .attendanceImage {
		width:883px;
		height: 413px;
		top:47%;
	}
	.mac-os .attendanceTitle h3{
		font-size : 43px;
		
	}
	.mac-os .attendanceTitle p{
		font-size : 27px;
		line-height:37px;
	}
	.mac-os .attendanceTitle {
		padding:75px 75px 0px 31%;
	}
	.mac-os .attendenceLookSection {
		padding:11% 0px 13% 5px;
	}
	
}
 
 @media (min-width: 1401px) and (max-width: 1600px) { 
	.mac-os .download img {
		margin-top:40px;
	}
	.mac-os .attendenceLook {
		width:60%;
	}
	.mac-os .attendenceLookImage {
		height: 406px;
		width: 494px;
	}
	.mac-os .attendenceLookHedding {
		left: 132px;
	}
	.mac-os .attendenceLookHedding h3{
		font-size : 54px;
	}
	.mac-os .attendenceLookLike p {
		font-size : 23px;
		line-height:30px;
	}
	.mac-os .attendenceLookLike {
		padding-top: 10px;
	}
	.mac-os .attendancePercentageContainer {
		width:60%;
	}
	.mac-os .furtherInformationCard {
		padding:12px 4px 8px;
	}
	.mac-os .furtherInformationCard p {
		font-size: 18px;
	}
	.mac-os .faqsHedding {
		padding: 10px 0px 10px 17%;
	}
	.mac-os .faqsHedding h4 {
		font-size: 42px;
		line-height:50px;
	}
	.mac-os .faqsContent {
		padding: 30px 10% 10px 39px;
	}

	.mac-os .faqsContent p {
		font-size: 23px;
		line-height:31px;
	}
	.mac-os .lookOutImage { 
		left:32%
	}
	.mac-os .helpHedding {
		left:32%
	}
	.mac-os .parentsHedding { 
		left:32%
	}
	.mac-os .pupilHedding { 
		left:32%
	}
	.mac-os .helpHedding { 
		left:32%
	}
	.mac-os .furtherInformationContainer {
		padding:50px 16% 10px;
	}
	.sample p {
		padding:6px 85px 1px !important;
	}
	.mac-os .lookOutSection {
		padding: 19% 30px 50px 35px;
	}
	.mac-os .lookOutSection h3{
		padding: 0px 18%;
	}
	.mac-os .lookOutCardRow{
		padding:0px 14%;
	}
	.mac-os .attendanceImage {
		width:770px;
		height: 355px;
		top:44%;
	}
	.mac-os .attendanceTitle h3{
		font-size : 43px;
		
	}
	.mac-os .attendanceTitle p{
		font-size : 26px;
		line-height:36px;
	}
	.mac-os .attendanceTitle {
		padding:42px 60px 0px 23%;
	}
	.mac-os .attendenceLookSection {
		padding:11% 0px 13% 5px;
	}
	.mac-os .howAreWeDoing { 
		padding: 30px 0px 14% 0px;
	}
	.mac-os .attendenceSupport {
		padding:97px 0px 17% 0px ;
	}
}

@media (min-width: 1201px) and (max-width: 1400px) { 
	
	.mac-os .attendenceLook {
		width:72%;
	}
	.mac-os .attendancePercentageContainer {
		width:72%;
	}
	.mac-os .download img {
		margin-top:40px;
	}
	.mac-os .furtherInformationCard {
		padding:12px 3px 8px;
	}
	.mac-os .furtherInformationCard p {
		font-size: 18px;
	}
	.mac-os .faqsHedding {
		padding: 10px 0px 10px 17%;
	}
	.mac-os .faqsHedding h4 {
		font-size: 40px;
		line-height:50px;
	}
	.mac-os .faqsContent {
		padding: 30px 10% 10px 39px;
	}

	.mac-os .faqsContent p {
		font-size: 22px;
		line-height:31px;
	}
	.mac-os .lookOutImage { 
		left:32%
	}
	.mac-os .helpHedding {
		left:32%
	}
	.mac-os .parentsHedding { 
		left:32%
	}
	.mac-os .pupilHedding { 
		left:32%
	}
	.mac-os .helpHedding { 
		left:32%
	}
	.mac-os .furtherInformationContainer {
		padding:50px 16% 10px;
	}
	.mac-os .lookOutSection {
		padding: 22% 30px 50px 35px;
	}
	.mac-os .lookOutSection h3{
		padding: 0px 13%;
	}
	.mac-os .lookOutCardRow{
		padding:0px 8%;
	}
	.mac-os .attendanceImage {
		width:725px;
		height: 339px;
		top:40%;
	}
	.mac-os .attendanceTitle h3{
		font-size : 43px;
		
	}
	.mac-os .attendanceTitle p{
		font-size : 27px;
		line-height:35px;
	}
	.mac-os .attendanceTitle {
		padding:35px 50px 0px 19%;
	}
	.mac-os .attendenceSupport {
		padding:97px 0px 20% 0px ;
	}
	

}
@media (min-width: 1021px) and (max-width: 1200px) {
	
	.attendanceImage {
		width: 552px;
		height: 248px;
		top: 45%;
	}
	.attendanceTitle h3{
		font-size: 29px;
	}
	.attendanceTitle p{
		font-size : 23px;
		line-height:29px;
	}
	.attendanceTitle {
		padding: 4% 58px 0px 111px;
		
	}
	.attendenceCount h3{
		font-size : 67px;
		line-height:72px;
	}

	.attendenceCount {
		padding-left: 0px;
		
	}
	.attendenceContent p{
		font-size: 25px;
		line-height: 39px
	}
	.attendenceContent p:first-of-type{
		padding-right:13px;
		font-size : 27px !important;
		
	}
	.attendenceCountImage img {
		width:100%;
	}
	.attendenceCount {
		padding-left: 15px;
	}
	.attendenceLookSection {
		padding: 14% 0px 16%;
	}
	.attendenceLook {
		background-color:white;
		padding-left: 15px;
		width: 90%;
		
	}
	.attendenceLookLike {
		padding-top: 0px;
		
	}
	.attendenceLookImageColumn {
		position: relative;
	}

	.attendenceLookImage {
		height: 396px;
		position: absolute;
		width: 492px;
		top: -138px;
		left: -37px;
	}

	.attendenceLookHedding {
		position: absolute;
		top: 56px;
		left: 111px;
		padding-right: 127px;
	}
	.attendenceLookHedding h3{
		font-size: 55px;
	}
	.attendenceLookLike p {
		font-family: "Myriadpro-Regular";
		font-size: 21px;
		line-height: 33px;
	}
	.attendencePercentage {	
		margin-top: 10px;
		background-color:white;
		padding: 15px;
		
	}
	.attendancePercentageContainer {
		width: 90%;
	}

	.attendenceHundred h4 {
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceHundredCount h5 {
		font-size : 28px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceHundredCount {
		background-color :#1F9342;
		padding: 10px;
		width:100%;
	}

	.attendenceNinetyNine h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetyNineCount h5{
		font-size : 28px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyNineCount{
		background-color :#76B31D;
		padding:10px;
		width:99%;
	}

	.attendenceNinetySeven h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetySevenCount h5{
		font-size : 28px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetySevenCount{
		background-color :#D4CF09;
		padding:10px;
		width:97%;
	}

	.attendenceNinetyFive h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetyFiveCount h5{
		font-size : 28px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyFiveCount{
		background-color :#F29108;
		padding:10px;
		width:95%;
	}

	.attendenceNinety h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetyCount h5{
		font-size : 28px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyCount{
		background-color :#E94D10;
		padding:10px;
		width:90%;
	}

	.attendenceEightyFive h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceEightyFiveCount h5{
		font-size : 28px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceEightyFiveCount{
		background-color :#FB0007;
		padding:10px;
		width:85%;
	}
	.howAreWeDoing { 
		background-color:#F59C08 ; 
		position:relative;
		padding: 4% 0px 168px 0px;
	}
	 .howAreWe {
		position:relative;	 
		z-index:9999;
		margin:0 auto;
		width: 748px ;
		height: 215px ;
	} 
	.howAreWe h3{
		font-size: 62px;
	}
	.howAreWeDiv {
		padding-top: 20px;
	}
	.howAreWeContainer {
		height:100px;
		padding: 0px 10px;
		width:80%;
		margin:10px auto;
	}
	.year h2{
		font-size : 62px;
		float:left;
	}
	.percent h2{
		font-size : 62px;
		float:right;
	}
	/*------------------*/
	.attendenceSupport {
		background-color:#4F1270 ;
		padding: 97px 0px 16% 0px;
		/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.attendenceSupport h2{
		color:#ffffff ;
		font-family: "Myriadpro-Bold";
		font-size : 53px;
		justify-content:center;
		text-align:center;
	}
	.expectContent {
		padding: 100px 53px 0px;
		
	}
	.expectHeadding {
		background-color: #76B31D;
		
		clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
		-webkit-clip-path:polygon(0 0, 163% 0px, 50% 67%, 0 37%);
		width: 100%;
		height: 130px;
		position: absolute;
		padding-top: 10px;
	}	
	.expect h4{
		font-family: "BeautyFreak-Bold";
		text-transform: lowercase;
		font-size : 45px;
		color: #ffffff;
		text-align:center;
	}
	.monitor h4{
		font-family: "BeautyFreak-Bold";
		text-transform: lowercase;
		font-size : 45px;
		color: #ffffff;
		text-align:center;
	}
	.listen h4{
		font-family: "BeautyFreak-Bold";
		text-transform: lowercase;
		font-size : 45px;
		color: #ffffff;
		text-align:center;
	}
	.support h4{
		font-family: "BeautyFreak-Bold";
		text-transform: lowercase;
		font-size : 45px;
		color: #ffffff;
		text-align:center;
	}
	.formalise h4{
		font-family: "BeautyFreak-Bold";
		text-transform: lowercase;
		font-size : 45px;
		color: #ffffff;
		text-align:center;
	}
	.enforce h4{
		font-family: "BeautyFreak-Bold";
		text-transform: lowercase;
		font-size : 45px;
		color: #ffffff;
		text-align:center;
	}
	.expect {
		 height: 240px; background-color: #ffffff; position: relative;margin: 75px auto 15px;width:94%;
	}

	.monitor {
		 height: 240px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.listen {
		 height: 240px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.support {
		 height: 240px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.formalise {
		 height: 310px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.enforce {
		 height: 240px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}

	.expectContent p{
		font-family: "Myriadpro-Regular";
		font-size : 24px;
		color: black;
		justify-content:center;
	}
	.monitorHeadding {
		background-color:#D4CF09 ;
		
		clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
		-webkit-clip-path:polygon(0 0, 163% 0px, 50% 67%, 0 37%);
		width: 100%;
		height: 130px;
		position: absolute;
		padding-top: 10px;
	}
	.listenHeadding{
		background-color:#FAB409 ;
		
		clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
		-webkit-clip-path:polygon(0 0, 163% 0px, 50% 67%, 0 37%);
		width: 100%;
		height: 130px;
		position: absolute;
		padding-top: 10px;
	}
	.supportHeadding{
		background-color:#F29108 ;
		
		clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
		-webkit-clip-path:polygon(0 0, 163% 0px, 50% 67%, 0 37%);
		width: 100%;
		height: 130px;
		position: absolute;
		padding-top: 10px;
	}
	.formaliseHeadding{
		background-color:#E94D10 ;
		
		clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
		-webkit-clip-path:polygon(0 0, 163% 0px, 50% 67%, 0 37%);
		width: 100%;
		height: 130px;
		position: absolute;
		padding-top: 10px;
	}
	.enforceHeadding{
		background-color:#FB0007 ;
		
		clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
		-webkit-clip-path:polygon(0 0, 163% 0px, 50% 67%, 0 37%);
		width: 100%;
		height: 130px;
		position: absolute;
		padding-top: 10px;
	}
	.stripe-band-how { 
		transform: skewY(-6deg);
		background-image: linear-gradient(230deg, #FAB309, #F59F08);
		height: 150px;
		bottom: 240px
	} 
 
	.stripe-bandp { 
		transform: skewY(-6deg);
		background: #4F1270;
		height: 150px;
		bottom: 337px
	} 
	.stripe-bandw { 
		height: 191px;
		bottom: 182px;
	} 
 /*-------------------*/
 
	.stripe-bandww { 
		height: 228px;
		bottom: 214px;
	} 
	.parentSection {
		padding-top:0px;
	}
	.parentsContainer {
		
	}
	.parentsImage img {
		width:100%;
	}
	.parents {
		padding: 209px 0px 0px 0px;
	}
	.parents h3{
		font-size: 40px;
	}
	.parentsContents {
		padding: 10px 10px 80px 42px;
	}
	.parentsContents ul li {
		font-size: 17px;
	}
	.parentsHedding {
		width: 361px;
		height: 169px;
		position: absolute;
		z-index: 99;
		top: 2px;
		left: 363px;
	}
	.parentsHedding h2 {
		font-size: 69px;
		position: absolute;
		top: 27px;
		left: 68px;
	}
	.pupilsSection {
		position:relative;
	}
	.pupilHedding { 
		width: 361px;
		height: 169px;
		position: absolute;
		z-index: 99;
		top: 34px;
		left: 363px;
	}
	.pupilHedding h2{ 
		font-size: 69px;
		position: absolute;
		top: 27px;
		left: 95px;
	} 
	.pupils {
            padding: 100px 97px 200px;
	}
	.pupils h3{
		font-size: 40px;
	}
	.pupilsContents {
		padding:25px 0px 10px 20px;
	}
	.pupilsContents ul li {
		font-size: 17px;
	}
	.pupilsImage {
		padding: 70px 0px 0px 0px;
	}
	.pupilsImage img {
		width:100%;
	}
	.helpSection {
		position: relative;
	}
	.stripe-band-pupils {
	  transform: skewY(-6deg);
	  background: #ffffff;
	  height: 150px;
		bottom: 226px;
	}
	.helpHedding {
		width: 361px;
		height: 169px;
		position: absolute;
		z-index: 99;
		top: 4px;
		left: 363px;
	}
	.helpHedding h2 {
		font-size: 69px;
		position: absolute;
		top: 27px;
		left: 105px;
	}

	.help {
		padding: 140px 97px 127px;
	}
	.stripe-band-help {
		height: 125px;
		bottom: 253px;
	}
	.help h3{
		font-size: 40px;
	}
	.helpContents {
		padding:25px 0px 10px 20px;
	}
	.helpContents ul li {
		font-size: 17px;
	}
	.helpImage {
		padding-right:0px ;
		padding-left:0px;
	}
	.helpImage img {
		width:100%;
	}
	.faqImage {
		width: 591px;
		height: 302px;
		margin-top: 50px;
	}
	.faqRow {
	  padding: 30px 20px 10px 35px;
	}
	.faqImage h2 {
	   font-size: 160px;
		left: 470px;
		z-index: 999;
	}
	.faqs {
		margin-top :50px;
	}
	.faqsHedding {
		padding: 0px 20px 0px 15px;
	}
	.faqsHedding h4 {
		font-size: 35px;
	}
	.faqsContent {
		padding: 10px 15px 10px 15px;
	}

	.faqsContent p {
		font-size: 17px;
	}
	.faqsContent span {
		font-family: "Myriadpro-Bold";
	}
	.download h6{
		font-size: 26px;
		margin-left: 8px;
	}
	.download img {
		top: 17px;
		left: 213px;
	}
	.furtherInformationContainer {
		padding: 50px 100px 10px;
	}
	.furtherInformation {
		margin-top:100px;
	}
	.furtherInformation h6{
		font-size: 19px;
	}
	.faqsSection {
	  padding: 0px 0px 75px;
	}
	.stripe-band-look {
	  height: 123px;
	  bottom: 225px;
	}
	.furtherInformationCard {
		padding:7px 10px;
		width: 100%;
		margin:10px 0px;
	}
	.furtherInformationCard p {
		font-size: 16px;
		padding: 6px 2px 0px;
	}
	.sample p {
		padding:6px 46px 1px !important;
	}
	.lookOutSection {
		padding: 200px 15px 10px 15px;
		position: relative;
	}
	.lookOutSection h3{
		font-size: 37px;
		padding: 0px 15px;
	}

	.lookOutCardRow{
		margin-top: 30px;
	}
	.lookOutCardImage {
		position:relative;
	}
	.lookOutCardTextOne {
		top: 33px;
		left: 110px;
	}
	.lookOutCardTextTwo {
		top: 47px;
		left: 89px;
	}
	.lookOutCardTextThree {
		top: 44px;
		left: 80px;

	}
	.lookOutCardImage img{
		
	}
	.lookOutImage {
		height: 229px;
		width: 526px;
		top: -35px;
		left: 23%;
	}
	.lookOutImage h2 {
		font-size: 93px;
		top: 45px;
		left: 81px;
	}
	.lookOutCardTextOne h4{
		font-size : 48px;
	}
	.lookOutCardTextTwo h4{
		font-size: 30px;
	}
	.lookOutCardTextThree h4{
		font-size: 42px;
	}
	.lookOutCard {
		margin-top:10px;
	}

	.attendanceOfficeSection {
		padding:30px 0px;
	}
	.attendenceOffice h3{
		font-size : 25px;
	}
	.attendenceOffice p{
		font-size : 16px;
	}
	.attendenceOfficeContent {
		padding:13px 1px;
	}
	.attendenceOffice span{
		font-size : 16px;
	}
	.attendanceOfficeDiv {
		padding-left: 20px;
	}
	.attendanceOfficeDivTwo {
		padding-left: 20px;
		
	}
		.welcomeByDirectorSection {
		min-height: 680px;
		background-size: 50% auto;
		background-repeat: no-repeat, no-repeat;
		position:relative;
		background: url(../images/parents.jpeg) no-repeat 100% 0%, linear-gradient(90deg, #76B31D, #D4CF09);
        background-attachment: fixed;
	}

	.largeDarkPinkPolygon2 {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ 
		height: 662px; 
		position: absolute; 
		opacity: 0.8; 
		left: 0px;
		z-index: 100; 
		max-width: 85%;
	}
	.welcomeText {
		padding: 19% 15px 20% 15px;
	}
	.welcomeText h1 {
		font-size: 39px !important;
	}

	.welcomeDesctiption { 
		position: relative; 
		z-index: 1000;
		padding-left: 15px;
	}
	.welcomeDesctiption ul li { 
		font-size : 18px;
	}
	.welcomeByDirectorSectionPupil {
		min-height: 680px;
		background-size: 50% auto;
		position:relative;
	}

	.largeDarkPinkPolygon2Pupil {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ 
		height: 662px; 
		position: absolute; 
		opacity: 0.8; 
		left: 0px;
		z-index: 100; 
		max-width: 85%;
	}
	.welcomeTextPupil {
		padding: 150px 15px 20% 15px;
	}
	.welcomeTextPupil h1 {
		font-size: 38px !important; 
	}

	.welcomeDesctiptionPupil { 
		position: relative; 
		z-index: 1000;
		padding-left: 15px;
	}
	.welcomeDesctiptionPupil ul li { 
		font-size: 18px;
	}
	.welcomeByDirectorSectionHelp {
		min-height: 680px;
		background-size: 50% auto;
		background-repeat: no-repeat, no-repeat;
		position:relative;
		background: url(../images/help.jpg) no-repeat 100% 0%, linear-gradient(90deg, #4E1270 ,#8E0A21);
		background-attachment:fixed; 
	}

	.largeDarkPinkPolygon2Help {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ 
		height: 662px; 
		position: absolute; 
		opacity: 0.8; 
		left: 0px;
		z-index: 100; 
		max-width: 85%;
	}
	.welcomeTextHelp {
		padding: 115px 15px 29px 15px;
	}
	.welcomeTextHelp h1 {
		font-size: 39px !important;
	}

	.welcomeDesctiptionHelp { 
		position: relative; 
		z-index: 1000;
	}
	.welcomeDesctiptionHelp ul li { 
		font-size: 18px;
	}
}
@media (min-width: 1015px) and (max-width: 1020px) { 
    .attendancePercentageContainer {
		width: 90%;
		padding-left: 0px;
	}
}
@media (min-width: 990px) and (max-width: 1014px) { 
    .attendancePercentageContainer {
		width: 90%;
		padding-left: 4px;
		padding-right: 0px;
	}
}
@media (min-width: 831px) and (max-width: 989px) { 
    .attendancePercentageContainer {
		width: 90%;
		padding-left: 4px;
		padding-right: 15px;
	}
}
@media (min-width: 1099px) and (max-width: 1134px) { 
    .furtherInformationCard p {
        font-size: 15px;
    }
}
@media (min-width: 1063px) and (max-width: 1098px) { 
    .furtherInformationCard p {
        font-size: 14px;
    }
}
@media (min-width: 1026px) and (max-width: 1062px) { 
    .furtherInformationCard p {
        font-size: 16px;
    }
	.furtherInformationContainer {
	  padding: 50px 60px 10px;
	}
	
}
@media (min-width: 1021px) and (max-width: 1025px) { 
    .furtherInformationCard p {
       font-size: 14px;
    }
}
@media (min-width: 831px) and (max-width: 991px) { 
	.attendenceLookLike {
		padding-right: 0px;
		padding-bottom: 0px;
		padding-top: 31%;
	}
	 .attendenceCountImage img {
		margin: 10px auto;
		width: 30%;
	}
	.download {
		display: flex;
		justify-content: center;
	}
}
@media (min-width: 992px) and (max-width: 1020px) { 
	.attendenceLookLike {
		padding-right: 0px;
		padding-bottom: 10px;
		padding-top: 0px;
		padding-left: 17%;
	}
	 .attendenceCountImage img {
		margin-top: 10px;
		width: 100%;
	}
}
@media (min-width: 992px) and (max-width: 1020px) {
    .download img {
		margin-top: 16px;
	}
}
@media (min-width: 831px) and (max-width: 991px) {
    .download img {
		margin-top: 16px;
	}
}

@media (min-width: 831px) and (max-width: 1020px) { 
	.logoTitle .title {
		font-size:25px;
		padding-left: 15px;	
	}
	#header {
		
	}
	.navbar-brand .image {
		z-index: 0;
	  padding: 0px;
	  background-color: transparent;
	}
	.bannerContainer {
		margin-top: 0px;
	}
	.logoHeader {
	  width: 35%;
	}
	.logo-large-screen {
		width: 90px;
		height: 90px;
	}
	
	.attendanceImage {
	   width: 98%;
		height: 130px;
		position: absolute;
		top: 52%;
		left: 0px;
	}
	.attendanceTitle h3{
		font-size: 40px;
		margin-top: 10px;
		margin-bottom: 3px;
	}
	.attendanceTitle p{
		font-size: 21px;
		line-height: 21px;
	}
	.attendanceTitle {
		padding: 8px 20px 0px 20px;
	}
	.attendenceCount h3{
		font-size: 60px;
		line-height: 72px;
	}

	.attendenceCount {
		padding-left: 0px;
	}
	.attendenceContent p{
		font-size: 22px;
		line-height: 35px;
	}
	.attendenceContent {
	  margin-top: 25px;
	}
	.attendenceContent p:first-of-type{
		
		font-size : 27px !important;
	}
	
	.attendenceCountImage {
		text-align: center !important;
	}
	.attendenceCount {
		padding-left: 15px;
	}
	.attendenceLookSection {
		padding: 81px 0px 16%;
	}
	.attendenceLook {
		padding-left: 15px;
		width: 90%;
	}
	
	
	.attendenceLookImageColumn {
		position: relative;
	}

	.attendenceLookImage {
		height: 364px;
		position: absolute;
		width: 482px;
		top: -68px;
		left: -34px;
	}

	.attendenceLookHedding {
		position: absolute;
		top: 56px;
		left: 111px;
		padding-right: 127px;
	}
	.attendenceLookHedding h3{
		font-size : 50px;	
	}
	.attendenceLookLike p {
		font-family: "Myriadpro-Regular";
		font-size: 21px;
		line-height: 33px;
	}
	.attendencePercentage {	
		margin-top: 5px;
		background-color:white;
		
		margin-left: -4px;		
	}
	
	.attendenceHundred h4 {
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceHundredCount h5 {
		font-size: 25px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceHundredCount {
		padding: 5px;
		width:100%;
	}

	.attendenceNinetyNine h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetyNineCount h5{
		font-size: 25px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyNineCount{
		padding: 5px;
		width:99%;
	}

	.attendenceNinetySeven h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetySevenCount h5{
		font-size: 25px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetySevenCount{
		padding: 5px;
		width:97%;
	}

	.attendenceNinetyFive h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetyFiveCount h5{
		font-size: 25px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyFiveCount{
		padding: 5px;
		width:95%;
	}

	.attendenceNinety h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetyCount h5{
		font-size: 25px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyCount{
		padding: 5px;
		width:90%;
	}

	.attendenceEightyFive h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceEightyFiveCount h5{
		font-size: 25px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceEightyFiveCount{
		background-color :#FB0007;
		padding: 5px;
		width:85%;
	}
	.howAreWeDoing {  
		position:relative; 
		padding: 4% 0px 130px 0px;
	}
	.howAreWe {
		width: 595px ;
		height: 170px;

	} 
	.howAreWe h3{
		padding-top: 42px;
		font-size: 57px;
		
	}
	.howAreWeContainer {
		height: 98px;
		padding: 0px 10px;
		width:80%;
		margin:10px auto;
	}
	.year h2{
		font-size : 60px;
		float:left;
	}
	.percent h2{
		font-size : 60px;
		float:right;
	}
	.attendenceSupport {
		padding: 50px 0px 18% 0px;
		/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.attendenceSupport h2{
		font-size: 39px;
	}
	.expectContent {
		padding: 85px 23px 0px;
		
	}
	.expectHeadding {
		height: 103px;
		clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
		-webkit-clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
	}	
	.expect h4{
		font-size: 37px;
		margin: auto;
	}
	.monitor h4{
		font-size: 37px;
		margin: auto;
	}
	.listen h4{
		font-size: 37px;
		margin: auto;
	}
	.support h4{
		font-size: 37px;
		margin: auto;
	}
	.formalise h4{
		font-size: 37px;
		margin: auto;
	}
	.enforce h4{
		font-size: 37px;
		margin: auto;
	}
	.expect {
		 height: 200px;
		 position: relative;
		 margin: 40px auto 15px;
		 width:94%;
	}

	.monitor {
		height: 200px; 
		position: relative;
		margin: 15px auto;
		width:94%;
	}
	.listen {
		 height: 190px; 
		 position: relative;
		 margin: 15px auto;
		 width:94%;
	}
	.support {
		 height: 200px; 
		 position: relative;
		 margin: 15px auto;
		 width:94%;
	}
	.formalise {
		 height: 255px; 
		 position: relative;
		 margin: 15px auto;
		 width:94%;
	}
	.enforce {
		 height: 200px; 
		 position: relative;
		 margin: 15px auto;
		 width:94%;
	}

	.expectContent p{
		font-size: 19px;
		
	}
	.monitorHeadding {
		height: 103px;
		clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
		-webkit-clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
	}
	.listenHeadding{
		height: 103px;
		clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
		-webkit-clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
	}
	.supportHeadding{
		height: 103px;
		clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
		-webkit-clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
	}
	.formaliseHeadding{
		height: 103px;
		clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
		-webkit-clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
	}
	.enforceHeadding{
		height: 103px;
		clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
		-webkit-clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
	}
	.stripe-band-how { 
		transform: skewY(-6deg);
		background-image: linear-gradient(230deg, #FAB309, #F5A008);
		height: 150px;
		bottom: 240px
	} 
	 
	.stripe-bandp { 
		transform: skewY(-6deg);
		background: #4F1270;
		height: 140px;
		bottom: 306px;
	} 
	.stripe-bandw { 
		height: 149px;
		bottom: 220px;
	} 
	 /*-------------------*/
	 
	.stripe-bandww {
		height: 212px;
		bottom: 225px;
	}
	.parentSection {
		padding-top:0px;
	}
	.parentsContainer {
		
	}
	.parentsImage img {
		width:100%;
	}
	.parents {
		padding: 159px 5px 80px 15px;
	}
	.parents h3{
		font-size: 34px;
	}
	.parentsImage {
	  
	  padding-top: 34px;
	}
	.parentsContents {
		padding: 4px 5px 5px 22px;
	}
	.parentsContents ul li {
		font-size: 14px;
	}
	.parentsHedding {
		width: 400px;
		height: 195px;
		position: absolute;
		z-index: 99;
		top: -5px;
		left: 272px;
	}
	.parentsHedding h2 {
		font-size: 72px;
		position: absolute;
		top: 35px;
		left: 89px;
	}
	.pupilsSection {
		position:relative;
	}
	.pupilHedding { 
		width: 400px;
		height: 195px;
		position: absolute;
		z-index: 99;
		top: -5px;
		left: 272px;
	}
	.pupilHedding h2{ 
		font-size: 72px;
		position: absolute;
		top: 35px;
		left: 108px;
		
	} 
	.pupils {
		padding: 160px 40px 171px;
	}
	.pupils h3{
		font-size: 40px;
	}
	.pupilsContents {
		padding:25px 0px 10px 20px;
	}
	.pupilsContents ul li {
		font-size: 16px;
	}
	.pupilsImage {
		padding: 70px 0px 0px 0px;
	}
	.pupilsImage img {
		width:100%;
	}
	.stripe-band-pupils {
		transform: skewY(-6deg);
		background: #ffffff;
		height: 150px;
		bottom: 227px;
	}
	.helpSection {
		position: relative;
	}
	.helpHedding {
		width: 400px;
		height: 195px;
		position: absolute;
		z-index: 99;
		top: -44px;
		left: 30%;
	}
	.helpHedding h2 {
		font-size: 72px;
		position: absolute;
		top: 35px;
		left: 128px;
	}

	.help {
		padding: 140px 35px 90px;
	}
	.help h3{
		font-size: 40px;
	}
	.helpContents {
		padding: 17px 0px 10px 20px;
	}
	.helpContents ul li {
		font-size: 16px;
	}
	.helpImage {
		padding-right:0px ;
		padding-left:0px;
	}
	.helpImage img {
		width:100%;
	}
	.faqImage {
		width: 381px;
		height: 186px;
		margin-top: 0px;
	}
	.faqImage h2 {
	  font-size: 111px;
		
		padding-top: 31px;
		padding-left: 95px;
	}
	.faqs {
		margin-top :50px;
	}
	.faqsHedding {
		padding: 0px 20px 0px 15px;
	}
	.faqsHedding h4 {
		font-size: 28px;
	}
	.faqsContent {
		padding: 10px 15px 10px 15px;
	}
	.stripe-band-help {
		transform: skewY(-6deg);
		background: #ffffff;
		height: 103px;
		bottom: 264px;
	}
	.faqsContent p {
		font-size: 17px;
	}
	.faqsContent span {
		font-family: "Myriadpro-Bold";
	}
	.download h6{
		font-size: 22px;
		margin-left: 0px;
	}
	
	.furtherInformationContainer {
		
	}
	.furtherInformation {
		margin-top:45px;
	}
	.furtherInformation h6{
		font-size: 24px;
	}
	.furtherInformationCard {
		padding:7px 10px;
		width: 100%;
		margin:10px 0px;
	}
	.furtherInformationContainer {
		padding: 30px 130px 0px;
	}
	.furtherInformationCard p {
		font-size: 14px;
		padding: 6px 0px 0px;
	}
	.sample p {
		padding: 6px 35% 1px !important;
	}
	.stripe-band-look {
		transform: skewY(-6deg);
		height: 123px;
		bottom: 215px;
	}
	.faqsSection {
	  padding: 0px 0px 60px;
	}
	.lookOutSection {
		padding: 205px 15px 30px 15px;
		position: relative;
	}
	.lookOutSection h3{
		font-size: 30px;
		padding: 0px 15px;
	}

	.lookOutCardRow{
		margin-top: 30px;
	}
	.lookOutCardImage {
		position:relative;
	}
	.lookOutCardTextOne {
		top: 33px;
		left: 110px;
	}
	.lookOutCardTextTwo {
		top: 47px;
		left: 89px;
	}
	.lookOutCardTextThree {
		top: 44px;
		left: 80px;

	}
	.lookOutCardImage img{
		
	}
	.lookOutImage {
		height: 192px;
		width: 441px;
		top: 7px;
		left: 27%;
	}
	.lookOutImage h2 {
		font-size: 78px;
	   top: 32px;
		left: 70px;
	}
	.lookOutCardTextOne h4{
		font-size : 48px;
	}
	.lookOutCardTextTwo h4{
		font-size: 30px;
	}
	.lookOutCardTextThree h4{
		font-size: 42px;
	}
	.lookOutCard {
		margin-top:10px;
	}

	.attendanceOfficeSection {
		padding: 20px 0px;
	}
	.attendenceOffice h3{
		font-size: 28px;
	}
	.attendenceOffice p{
		font-size: 17px;
	}
	.attendenceOfficeContent {
		padding:13px 1px;
	}
	.attendenceOffice span{
		font-size: 17px;
	}
	.attendanceOfficeDiv {
		padding-left: 20px;
	}
	.attendanceOfficeDivTwo {
		padding-left: 20px;
		
	}
	.welcomeByDirectorSection {
		min-height: 680px;
		background-size: 50% auto;
		background-repeat: no-repeat, no-repeat;
		position:relative;
		background: url(../images/parents.jpeg) no-repeat 108% 1%, linear-gradient(90deg, #76B31D, #D4CF09);
		background-attachment:fixed;
	}

	.largeDarkPinkPolygon2 {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeText {
		padding: 152px 15px 20% 0px;
	}
	.welcomeText h1 {
		font-size: 36px !important;
	}

	.welcomeDesctiption { position: relative; z-index: 1000;padding-left: 15px; }
	.welcomeDesctiption ul li { 
		font-size : 17px;
		
	}
	.welcomeByDirectorSectionPupil {
		min-height: 680px;
		background-size: 50% auto;
		position:relative;
	}

	.largeDarkPinkPolygon2Pupil {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeTextPupil {
		padding: 125px 15px 20% 15px;
	}
	.welcomeTextPupil h1 {
		font-size: 36px !important;
	}

	.welcomeDesctiptionPupil { position: relative; z-index: 1000;padding-left: 15px; }
	.welcomeDesctiptionPupil ul li { 
		font-size: 17px;
		}
	.welcomeByDirectorSectionHelp {
		min-height: 680px;
		background-size: 50% auto;
		background-repeat: no-repeat, no-repeat;
		position:relative;
		background: url(../images/help.jpg) no-repeat 108% 1%, linear-gradient(90deg, #4E1270 ,#8E0A21);
		background-attachment:fixed;
	}

	.largeDarkPinkPolygon2Help {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeTextHelp {
		padding: 123px 15px 10% 15px;
	}
	.welcomeTextHelp h1 {
		font-size: 36px !important;
	}

	.welcomeDesctiptionHelp { position: relative; z-index: 1000;}
	.welcomeDesctiptionHelp ul li { 
		font-size: 17px;
	}
}
@media (min-width: 1001px) and (max-width: 1014px) {
    .furtherInformationCard p {
        font-size: 15px;
    }
	.furtherInformationContainer {
		padding: 30px 43px 0px;
	  }
}
@media (min-width: 992px) and (max-width: 1000px) {
    .furtherInformationCard p {
        font-size: 13px;
    }
	.furtherInformationContainer {
		padding: 30px 43px 0px;
	}
}
@media (min-width: 785px) and (max-width: 991px) {
    .furtherInformationCard p {
        font-size: 19px;
    }
}
@media (min-width: 768px) and (max-width: 784px) {
    .furtherInformationCard p {
        font-size: 19px;
    }
	
}
@media (min-width: 768px) and (max-width: 830px) { 
	#header {
		
	}
	.bannerContainer {
		margin-top: 0px;
	}
	.navbar-brand .image {
		z-index: 0;
	  padding: 0px;
	  background-color: transparent;
	}
	.logoTitle .title {
		font-size: 22px;
		padding-left: 15px;
	}
	.logoHeader {
	  width: 35%;
	  margin-left: 20px;
	}
	.logo-large-screen {
		width: 85px;
		height: 85px;
	}
	
	.attendanceImage {
	   width: 100%;
		height: 130px;
		position: absolute;
		top: 53%;
		left: 0px;
	}
	.attendanceTitle h3{
		font-size: 38px;
		margin-top: 3px;
		margin-bottom: 3px;
	}
	.attendanceTitle p{
		font-size: 21px;
		line-height: 21px;
	}
	.attendanceTitle {
		padding: 20px 20px 0px 20px;
	}
	.attendenceCount h3{
		font-size: 58px;
		line-height: 65px;
		margin-top: 0px;
	}

	.attendenceCount {
		padding-left: 0px;
	}
	.attendenceContent p{
		font-size: 22px;
		line-height: 35px;
	}
	.attendenceContent {
	  margin-top: 25px;
	}
	.attendenceContent p:first-of-type{
		
		font-size : 27px !important;
	}
	.attendenceCountImage {
		text-align: center !important;
	}
	.attendenceCountImage img {
		
		width: 30%;
		margin:10px auto;
	}
	.attendenceCount {
		padding-left: 15px;
	}
	.attendenceLookSection {
		padding: 76px 15px 16%;
	}
	.carousel-indicators {
		bottom: 38px;
	}
	.attendenceLook {
		background-color:white;
		padding-left: 15px;
		width:90%;
	}
	.attendenceLookLike {
		padding-top: 235px;
		padding-left: 50px;
		padding-right: 14px;
		padding-bottom: 0px;
	}
	
	.attendenceLookImageColumn {
		position: relative;
	}

	.attendenceLookImage {
		height: 364px;
		position: absolute;
		width: 482px;
		top: -68px;
		left: -34px;
	}

	.attendenceLookHedding {
		position: absolute;
		top: 56px;
		left: 111px;
		padding-right: 127px;
	}
	.attendenceLookHedding h3{
		font-size : 50px;	
	}
	.attendenceLookLike p {
		font-family: "Myriadpro-Regular";
		font-size: 21px;
		line-height: 33px;
	}
	.attendencePercentage {	
		margin-top: 10px;
		background-color:white;
		padding: 12px;	
		
	}
	.attendancePercentageContainer {
		width:90%;
		
	}

	.attendenceHundred h4 {
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceHundredCount h5 {
		font-size: 22px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceHundredCount {
		background-color :#1F9342;
		padding: 5px;
		width:100%;
	}

	.attendenceNinetyNine h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetyNineCount h5{
		font-size: 22px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyNineCount{
		background-color :#76B31D;
		padding: 5px;
		width:99%;
	}

	.attendenceNinetySeven h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetySevenCount h5{
		font-size: 22px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetySevenCount{
		background-color :#D4CF09;
		padding: 5px;
		width:97%;
	}

	.attendenceNinetyFive h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetyFiveCount h5{
		font-size: 22px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyFiveCount{
		background-color :#F29108;
		padding: 5px;
		width:95%;
	}

	.attendenceNinety h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetyCount h5{
		font-size: 22px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyCount{
		background-color :#E94D10;
		padding: 5px;
		width:90%;
	}

	.attendenceEightyFive h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceEightyFiveCount h5{
		font-size: 22px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceEightyFiveCount{
		background-color :#FB0007;
		padding: 5px;
		width:85%;
	}
	.howAreWeDoing { 
		background-color:#F59C08 ; 
		position:relative; 
		padding: 5% 0px 17% 0px;
	}
	.howAreWe {
		width: 595px ;
		height: 170px;

	} 
	.howAreWe h3{
		padding-top: 42px;
		font-size: 57px;
		
	}
	.carousel-indicators {
		bottom: 27px;
	}
	.howAreWeContainer {
		background-color:#ffffff ;
		height: 98px;
		padding: 0px 10px;
		width:80%;
		margin:10px auto;
	}
	.year h2{
		font-size : 60px;
		float:left;
	}
	.percent h2{
		font-size : 60px;
		float:right;
	}
	.attendenceSupport {
		padding: 50px 0px 20% 0px;
		/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.attendenceSupport h2{
		font-size: 39px;
	}
	.expectContent {
		padding: 85px 23px 0px;
		
	}
	.expectHeadding {
		height: 103px;
		clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
		-webkit-clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
	}	
	.expect h4{
		font-size: 37px;
		margin: auto;
	}
	.monitor h4{
		font-size: 37px;
		margin: auto;
	}
	.listen h4{
		font-size: 37px;
		margin: auto;
	}
	.support h4{
		font-size: 37px;
		margin: auto;
	}
	.formalise h4{
		font-size: 37px;
		margin: auto;
	}
	.enforce h4{
		font-size: 37px;
		margin: auto;
	}
	.expect {
		 height: 200px; background-color: #ffffff; position: relative;margin: 40px auto 15px;width:94%;
	}

	.monitor {
		height: 200px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.listen {
		 height: 190px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.support {
		 height: 200px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.formalise {
		 height: 255px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.enforce {
		 height: 200px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}

	.expectContent p{
		font-size: 19px;
		
	}
	.monitorHeadding {
		height: 103px;
		clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
		-webkit-clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
	}
	.listenHeadding{
		height: 103px;
		clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
		-webkit-clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
	}
	.supportHeadding{
		height: 103px;
		clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
		-webkit-clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
	}
	.formaliseHeadding{
		height: 103px;
		clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
		-webkit-clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
	}
	.enforceHeadding{
		height: 103px;
		clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
		-webkit-clip-path: polygon(0 0, 163% 0px, 50% 63%, 0 32%);
	}
	.stripe-band-how { 
		transform: skewY(-6deg);
		background-image: linear-gradient(230deg, #FAB309, #F5A008);
		height: 150px;
		bottom: 240px
	} 
	 
	.stripe-bandp { 
		transform: skewY(-6deg);
		background: #4F1270;
		height: 140px;
		bottom: 306px;
	} 
	.stripe-bandw { 
		height: 149px;
		bottom: 220px;
	} 
	 /*-------------------*/
	 
	.stripe-bandww {
		height: 200px;
		bottom: 165px;
	}
	.parentSection {
		padding-top:0px;
	}
	.parentsContainer {
		
	}
	.parentsImage img {
		width:100%;
	}
	.parents {
		padding: 159px 5px 20px 15px;
	}
	.parents h3{
		font-size: 33px;
	}
	.parentsImage {
	  
	  padding-top: 34px;
	}
	.parentsContents {
		padding: 4px 5px 5px 22px;
	}
	.parentsContents ul li {
		font-size: 12px;
	}
	.parentsHedding {
		width: 400px;
		height: 195px;
		position: absolute;
		z-index: 99;
		top: -5px;
		left: 170px;
	}
	.parentsHedding h2 {
		font-size: 72px;
		position: absolute;
		top: 35px;
		left: 89px;
	}
	.pupilsSection {
		position:relative;
	}
	.pupilHedding { 
		width: 400px;
		height: 195px;
		position: absolute;
		z-index: 99;
		top: 44px;
		left: 25%;
	}
	.pupilHedding h2{ 
		font-size: 72px;
		position: absolute;
		top: 35px;
		left: 108px;
		
	} 
	.pupils {
		padding: 160px 89px 75px 40px;
	}
	.pupils h3{
		font-size: 33px;
	}
	.pupilsContents {
		padding: 10px 0px 69px 20px;
	}
	.pupilsContents ul li {
		font-size: 13px;
		padding: 10px 0px;
	}
	.pupilsImage {
		padding: 70px 0px 0px 0px;
	}
	.pupilsImage img {
		width:100%;
	}
	.stripe-band-pupils {
		transform: skewY(-6deg);
		background: #ffffff;
		height: 200px;
		bottom: 202px;
	}
	.helpSection {
		position: relative;
	}
	.helpHedding {
		width: 400px;
		height: 195px;
		position: absolute;
		z-index: 99;
		top: 3px;
		left: 208px;
	}
	.helpHedding h2 {
		font-size: 72px;
		position: absolute;
		top: 35px;
		left: 128px;
	}

	.help {
		padding: 140px 75px 90px 35px;
	}
	.help h3{
		font-size: 33px;
	}
	.helpContents {
		padding: 17px 0px 10px 5px;
	}
	.helpContents ul li {
		font-size: 13px;
	}
	.helpImage {
		padding-right:0px ;
		padding-left:0px;
	}
	.helpImage img {
		width:100%;
	}
	.faqImage {
		width: 381px;
		height: 186px;
		margin-top: 30px;
	}
	.faqImage h2 {
		font-size: 111px;
		padding-top: 31px;
		padding-left: 95px;
	}
	.faqs {
		margin-top :50px;
	}
	.faqsHedding {
		padding: 0px 20px 0px 15px;
	}
	.faqsHedding h4 {
		font-size: 33px;
	}
	.faqsContent {
		padding: 10px 15px 10px 15px;
	}
	.stripe-band-help {
		transform: skewY(-6deg);
		background: #ffffff;
		height: 104px;
		bottom: 270px;
	}
	.faqsContent p {
		font-size: 17px;
		line-height: 27px;
	}
	.faqsContent span {
		font-family: "Myriadpro-Bold";
	}
	.download h6{
		font-size: 27px;
		margin-left: 0px;
	}
	.download img {
		top: 9px;
		left: 214px;
	}
	.furtherInformationContainer {
		
	}
	.furtherInformation {
		margin-top:45px;
	}
	.furtherInformation h6{
		font-size: 20px;
	}
	.furtherInformationCard {
		padding:7px 10px;
		width: 100%;
		margin:10px 0px;
	}
	.furtherInformationContainer {
		padding: 30px 130px 0px;
	}
	.furtherInformationCard p {
		font-size: 19px;
		padding: 6px 6px 0px;
	}
	.sample p {
		padding:6px 46px 1px !important;
	}
	.stripe-band-look {
		transform: skewY(-6deg);
		height: 106px;
		bottom: 235px;
		background-color: #ffffff;
	}
	.faqsSection {
		padding: 0px 0px 60px;
	}
	.lookOutSection {
		padding: 205px 15px 30px 15px;
		position: relative;
	}
	.lookOutSection h3{
		font-size: 30px;
		padding: 0px 15px;
	}

	.lookOutCardRow{
		margin-top: 30px;
	}
	.lookOutCardImage {
		position:relative;
	}
	.lookOutCardTextOne {
		top: 33px;
		left: 110px;
	}
	.lookOutCardTextTwo {
		top: 47px;
		left: 89px;
	}
	.lookOutCardTextThree {
		top: 44px;
		left: 80px;

	}
	.lookOutCardImage img{
		
	}
	.lookOutImage {
		height: 192px;
		width: 441px;
		top: -6px;
		left: 170px;
	}
	.lookOutImage h2 {
		font-size: 78px;
	   top: 32px;
		left: 70px;
	}
	.lookOutCardTextOne h4{
		font-size : 48px;
	}
	.lookOutCardTextTwo h4{
		font-size: 30px;
	}
	.lookOutCardTextThree h4{
		font-size: 42px;
	}
	.lookOutCard {
		margin-top:10px;
	}

	.attendanceOfficeSection {
		padding: 20px 0px;
	}
	.attendenceOffice h3{
		font-size: 28px;
	}
	.attendenceOffice p{
		font-size: 17px;
	}
	.attendenceOfficeContent {
		padding:13px 1px;
	}
	.attendenceOffice span{
		font-size: 17px;
	}
	.attendanceOfficeDiv {
		padding-left: 20px;
	}
	.attendanceOfficeDivTwo {
		padding-left: 20px;
		
	}
	.welcomeByDirectorSection {
		min-height: 680px;
		background-size: 50% auto;
		background-repeat: no-repeat, no-repeat;
		position:relative;
		background: url(../images/parents.jpeg) no-repeat 125% 1%, linear-gradient(90deg, #76B31D, #D4CF09);
		background-attachment:fixed;
		
	}

	.largeDarkPinkPolygon2 {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeText {
		padding: 155px 10px 13% 15px;
	}
	.welcomeText h1 {
		font-size: 30px !important;
		margin-bottom: 6px;
	}

	.welcomeDesctiption { position: relative; z-index: 1000;padding-left: 15px; }
	.welcomeDesctiption ul li { 
		font-size: 14px;
    padding: 3px 0px;
	color:white;
	}
	.welcomeByDirectorSectionPupil {
		min-height: 680px;
		background-size: 50% auto;
		position:relative;
	}

	.largeDarkPinkPolygon2Pupil {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeTextPupil {
		padding: 180px 15px 22% 15px;
	}
	.welcomeTextPupil h1 {
		font-size: 29px !important;
		margin-bottom: 10px;
	}

	.welcomeDesctiptionPupil { position: relative; z-index: 1000;padding-left: 15px; }
	.welcomeDesctiptionPupil ul li { 
		font-size: 15px;
		padding: 8px 0px;
		color:white;
		}
	.welcomeByDirectorSectionHelp {
		min-height: 680px;
		background-size: 50% auto;
		background-repeat: no-repeat, no-repeat;
		position:relative;
		background: url(../images/help.jpg) no-repeat 125% 1%, linear-gradient(90deg, #4E1270 ,#8E0A21);
		background-attachment:fixed;
		
	}

	.largeDarkPinkPolygon2Help {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeTextHelp {
		padding: 125px 15px 12% 15px;
	}
	.welcomeTextHelp h1 {
		font-size: 34px !important;
	}

	.welcomeDesctiptionHelp { position: relative; z-index: 1000;}
	.welcomeDesctiptionHelp ul li { 
		font-size: 15px;
		color:white;
	}
	.download {
		display: flex;
		justify-content: center;
	}
}

@media (min-width: 501px) and (max-width: 640px) { 
	.headerTelephoneText {
	  
	  padding: 8px 0px 0px;
	}
	#mainCarousel {
		margin-bottom: 20px;
		margin-top: 0px;
	}
	
	.attendanceImage {
		width: 100%;
		height: 75px;
		position: absolute;
		top: 187px;
		left: 0px;
	}
	.attendanceTitle h3{
		font-size: 24px;
		margin-top: 5px;
		margin-bottom: 2px;
	}
	.attendanceTitle p{
		font-size: 13px;
		line-height: 14px;
	}
	.attendanceTitle {
		padding: 3px 0px 45px 6px;
	}
	.attendenceCount h3{
		font-size: 40px;
		line-height: 45px;
	}

	.attendenceCount {
		padding-left: 0px;
	}
	.attendenceContent p{
		font-size: 17px;
		line-height: 29px;
	}
	.attendenceContent {
		margin-top: 24px;
	}
	.attendenceContent p:first-of-type{
		
		padding-right: 13px;
		font-size: 20px !important;
	}
	.attendenceCountImage img {
		margin: 10px auto;
		width: 37%;
	}
	.attendenceCountImage {
		text-align: center !important;
	}
	.attendenceCount {
		padding-left: 15px;
	}
	.attendenceLookSection {
		padding: 67px 0px 17%;
	}
	.attendenceLook {
		background-color:white;
		padding-left: 15px;
		width: 90%;
	}
	.attendenceLookLike {
		padding-top: 200px;
		padding-left: 10px;
		padding-right: 14px;
		margin-bottom: 20px;
	}
	.attendenceLookImageColumn {
		position: relative;
	}


	.attendenceLookImage {
		height: 322px;
		position: absolute;
		width: 405px;
		top: -68px;
		left: -22px;
	}

	.attendenceLookHedding {
		position: absolute;
		top: 36px;
		left: 70px;
		padding-right: 127px;
	}
	.attendenceLookHedding h3{
		font-size : 50px;
		
	}
	.attendenceLookLike p {
		font-family: "Myriadpro-Regular";
		font-size: 17px;
		line-height: 30px;
	}
	.attendencePercentage {	
		margin-top: 10px;
		background-color:white;
		padding: 8px;
		
	}
	.attendancePercentageContainer {
		width: 90%;
		
	}

	.attendenceHundred h4 {
		font-size: 27px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceHundredCount h5 {
		font-size: 20px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceHundredCount {
		background-color :#1F9342;
		padding: 5px;
		width:100%;
	}

	.attendenceNinetyNine h4{
		font-size: 27px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetyNineCount h5{
		font-size: 20px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyNineCount{
		background-color :#76B31D;
		padding: 5px;
		width:99%;
	}

	.attendenceNinetySeven h4{
		font-size: 27px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetySevenCount h5{
		font-size: 20px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetySevenCount{
		background-color :#D4CF09;
		padding: 5px;
		width:97%;
	}

	.attendenceNinetyFive h4{
		font-size: 27px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetyFiveCount h5{
		font-size: 20px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyFiveCount{
		background-color :#F29108;
		padding: 5px;
		width:95%;
	}

	.attendenceNinety h4{
		font-size: 27px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetyCount h5{
		font-size: 20px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyCount{
		background-color :#E94D10;
		padding: 5px;
		width:90%;
	}

	.attendenceEightyFive h4{
		font-size: 27px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceEightyFiveCount h5{
		font-size: 20px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceEightyFiveCount{
		background-color :#FB0007;
		padding: 5px;
		width:85%;
	}	
	.howAreWeDoing { 
		background-color:#F59C08 ; 
		position:relative; 
		padding: 5% 0px 16% 0px;
	}
	
	.howAreWe h3{
		font-size: 38px;
		padding-top: 38px;
	}
	.howAreWe {
		width: 397px;
		height: 115px;
	}
	.howAreWeContainer {
		height:80px;
		padding: 0px 10px;
		width:80%;
		margin:10px auto;
	}
	.year h2{
		font-size : 35px;
		float:left;
	}
	.percent h2{
		font-size : 35px;
		float:right;
	}
		/*-------------------*/
	.attendenceSupport {
		background-color:#4F1270 ;
		padding: 6% 0px 24% 0px;
		/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.attendenceSupport h2{
		font-size: 35px;
	}
	.expectContent {
		padding: 85px 23px 0px;
		
	}
	.expectHeadding {
		height: 100px;
	}	
	.expect h4{
		font-size: 30px;
		margin: auto;
	}
	.monitor h4{
		font-size: 30px;
		margin: auto;
	}
	.listen h4{
		font-size: 30px;
		margin: auto;
	}
	.support h4{
		font-size: 30px;
		margin: auto;
	}
	.formalise h4{
		font-size: 30px;
		margin: auto;
	}
	.enforce h4{
		font-size: 30px;
		margin: auto;
	}
	.expect {
		 height: 215px; background-color: #ffffff; position: relative;margin: 75px auto 15px;width:94%;
	}

	.monitor {
		 height: 215px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.listen {
		 height: 200px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.support {
		 height: 215px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.formalise {
		 height: 270px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.enforce {
		 height: 215px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}

	.expectContent p{
		font-size: 17px;
		
	}
	.monitorHeadding {
		height: 100px;
	}
	.listenHeadding{
		height: 100px;
	}
	.supportHeadding{
		height: 110px;
	}
	.formaliseHeadding{
		height: 100px;
	}
	.enforceHeadding{
		height: 100px;
	}
	.stripe-band-how { 
		transform: skewY(-6deg);
		background-image:linear-gradient(230deg, #FAB209, #F6A309); 
		height: 130px;
		bottom: 272px;
	} 
	 
	 .stripe-bandp { 
		transform: skewY(-6deg);
		background: #4F1270;
		height: 75px;
		bottom: 319px;
	 } 
	 
	.stripe-bandw { 
		height: 138px;
		bottom: 215px;
	} 
 /*-------------------*/
 
	 .stripe-bandww { 
		height: 168px;
		bottom: 192px;
	 } 
	.parentSection {
		padding-top:0px;
	}
	.parentsContainer {
		
	}
	.parentsImage img {
		width:100%;
	}
	.parents {
		padding: 140px 10px 0px 15px;
		
	}
	.parents h3{
		font-size: 30px;
	}
	.parentsContents {
		padding: 10px 10px 10px 42px;
	}
	.parentsContents ul li {
		font-size: 17px;
	}
	.parentsHedding {
		width: 295px;
		height: 146px;
		position: absolute;
		z-index: 99;
		top: -5px;
		left: 22%;
	}
	.parentsHedding h2 {
		font-size: 55px;
		position: absolute;
		top: 22px;
		left: 68px;
	}
	.pupilsSection {
		position:relative;
	}
	.pupilHedding { 
		width: 295px;
		height: 146px;
		position: absolute;
		z-index: 99;
		top: 1%;
		left: 22%;
	}
	.pupilHedding h2{ 
		font-size: 55px;
		position: absolute;
		top: 22px;
		left: 68px;
		
	} 
	.pupils {
		background-color:#F8AD09 ;
		padding: 15px 0px 100px 15px;
		
	}
	.pupils h3{
		font-size: 30px;
	}
	.pupilsContents {
		padding: 10px 10px 10px 42px;
	}
	.pupilsContents ul li {
		font-size: 17px;
	}
	.pupilsImage {
		padding: 77px 0px 0px 0px;
	}
	.pupilsImage img {
		width:100%;
	}
	.stripe-band-pupils {
	  transform: skewY(-6deg);
	  background: #ffffff;
	  height: 171px;
	  bottom: 213px;
	}
	.helpSection {
		position: relative;
	}
	.helpHedding {
		width: 260px;
		height: 122px;
		position: absolute;
		z-index: 99;
		top: 0px;
		left: 126px;
	}
	.helpHedding h2 {
		font-size: 50px;
		position: absolute;
		top: 13px;
		left: 75px;

	}

	.help {
		padding: 120px 16px 30px 15px;
		
	}
	.help h3{
		font-size: 30px;
	}
	.helpContents {
		padding:10px 0px 10px;
	}
	.helpContents ul li {
		font-size: 17px;
	}
	.helpImage {
		padding-right:0px ;
		padding-left:0px;
	}
	.helpImage img {
		width:100%;
	}
	.stripe-band-help {
		height: 72px;
		bottom: 275px;
	}
	.faqImage {
		width: 331px;
		height: 162px;
		margin-top: 25px;
	}
	.faqImage h2 {
	   font-size: 100px;
	   
		padding-top: 30px;
		padding-left: 77px;
	}
	.faqs {
		margin-top :50px;
	}
	.faqsHedding {
		padding: 0px 20px 0px 15px;
	}
	.faqsHedding h4 {
		font-size: 30px;
	}
	.faqsContent {
		padding: 10px 15px 10px 15px;
	}
	.faqRow {
		padding-top: 20px;
	}
	.faqsContent p {
		font-size: 16px;
	}
	.faqsContent span {
		font-family: "Myriadpro-Bold";
	}
	.download h6{
		font-size: 23px;
		margin-left: 0px;
	}
	.download img {
		margin-top: 17px;
	}
	.furtherInformationContainer {
		
	}
	.furtherInformation {
		margin-top:100px;
	}
	.furtherInformation h6{
		font-size: 20px;
	}
	.furtherInformationCard {
		padding: 7px 15px;
		width: 100%;
		margin:10px 0px;
	}
	.furtherInformationContainer {
		padding: 18px 130px 0px;
	}
	.furtherInformation {
		margin-top: 40px;
	}
	.furtherInformationCard p {
		font-size: 18px;
		padding: 6px 0px 0px;
	}
	.sample p {
		padding: 6px 25% 1px !important;
	}
	.faqsSection {
	  padding: 0px 0px 70px;
	}
	.stripe-band-look {
	  height: 82px;
	  bottom: 250px;
	}
	.lookOutSection {
		padding: 140px 15px 30px 15px;
		position: relative;
	}
	.lookOutSection h3{
		font-size: 25px;
		padding: 0px 10px;
	}

	.lookOutCardRow{
		margin-top: 30px;
	}
	.lookOutCardImage {
		position:relative;
		margin: 5px 50px;
	}
	.lookOutCardTextOne {
		top: 39px;
		left: 157px;
	}
	.lookOutCardTextTwo {
		top: 40px;
		left: 125px;
	}
	.lookOutCardTextThree {
		top: 40px;
		left: 127px;
	}
	.lookOutCardImage img{
		
	}
	.lookOutImage {
		height: 166px;
		width: 378px;
		top: -22px;
		left: 17%;
	}
	.lookOutImage h2 {
		font-size: 62px;
		top: 29px;
		left: 62px;
	}
	.lookOutCardTextOne h4{
		font-size: 45px;
	}
	.lookOutCardTextTwo h4{
		font-size : 31px;
	}
	.lookOutCardTextThree h4{
		font-size: 40px;
	}
	.lookOutCard {
		margin-top:10px;
	}

	.attendanceOfficeSection {
		padding:15px 0px;
	}
	.attendenceOffice h3{
		font-size: 23px;
	}
	.attendenceOffice p{
		font-size: 15px;
	}
	.attendenceOfficeContent {
		padding:13px 1px;
	}
	.attendenceOffice span{
		font-size : 15px;
	}
	.attendanceOfficeDiv {
		padding-left: 20px;
	}
	.attendanceOfficeDivTwo {
		padding-left: 20px;
		
	}
	.welcomeByDirectorSection {
		min-height: 680px;
		background-size: 100% auto;
		background-repeat: no-repeat, no-repeat;
		position:relative;
		background: url(../images/parents.jpeg) no-repeat 50% 0%, linear-gradient(90deg, #76B31D, #D4CF09);
		background-attachment:fixed;
	}

	.largeDarkPinkPolygon2 {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeText {
		padding: 150% 15px 40px 15px;
	}
	.welcomeText h1 {
		font-size: 35px !important;
	}

	.welcomeDesctiption { position: relative; z-index: 1000;padding-left: 15px; }
	.welcomeDesctiption ul li { 
		font-size : 18px;
		color:white;
	}
	.welcomeByDirectorSectionPupil {
		min-height: 680px;
		background-size: 100% auto;
		position:relative;
	}

	.largeDarkPinkPolygon2Pupil {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeTextPupil {
		padding: 142% 15px 60px 15px;
	}
	.welcomeTextPupil h1 {
		font-size: 35px !important;
	}

	.welcomeDesctiptionPupil { position: relative; z-index: 1000;padding-left: 15px; }
	.welcomeDesctiptionPupil ul li { 
		font-size: 18px;
		color:white;
		}
	.welcomeByDirectorSectionHelp {
		background-size: 100% auto;
		background-repeat: no-repeat, no-repeat;
		position:relative;
		background: url(../images/help.jpg) no-repeat 50% 0%, linear-gradient(90deg, #4E1270 ,#8E0A21);
		background-attachment:fixed;
	}

	.largeDarkPinkPolygon2Help {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeTextHelp {
		padding: 146% 15px 29px 15px;
	}
	.welcomeTextHelp h1 {
		font-size: 35px !important;
	}

	.welcomeDesctiptionHelp { position: relative; z-index: 1000;}
	.welcomeDesctiptionHelp ul li { 
		font-size: 18px;
		color:white;
	}
	.download {
		display: flex;
		justify-content: center;
	}
}

@media (min-width: 641px) and (max-width: 767px) {
	.headerTelephoneText {
		padding: 5px 0px;
	}
	.headerMailText {
		padding: 5px 0px;
	}
	.lightPurpleTopRegion {
		
	}
	.logoTitle .title {
	font-size:25px;
	font-family:"OpenSans-Semibold";	
}
	.logoHeader {
		width: 24%;
		padding: 30px 20px 30px 30px;
	}
	.navbar-brand .image {
		z-index: 0;
	  padding: 0px;
	  background-color: transparent;
	}
	.logo-large-screen {
		width: 80px;
		height: 80px;
	}
	#mainCarousel {
		margin-bottom: 20px;
		margin-top: 0px;
	}
	
	.attendanceImage {
		width: 100%;
		height: 118px;
		position: absolute;
		top: 50%;
		left: 0px;
	}
	.attendanceTitle h3{
		font-size: 31px;
		margin-top: 0px;
		margin-bottom: 3px;
	}
	.attendanceTitle p{
		font-size: 20px;
		line-height: 21px;
	}
	.attendanceTitle {
		padding: 16px 20px 0px 20px;
	}
	.attendenceCount h3{
		font-size: 50px;
		line-height: 65px;
	}

	.attendenceCount {
		padding-left: 15px;
	}
	.attendenceContent p{
		font-size: 19px;
		line-height: 33px;
	}
	.attendenceContent {
		margin-top: 25px;
	}
	.attendenceContent p:first-of-type{
		
		padding-right:13px;
		font-size: 23px !important;	
	}
	.attendenceCountImage {
		text-align: center !important;
	}
	.attendenceCountImage img {
		width: 34%;
		margin: 0px auto;
	}
	.attendenceCount {
		padding-left: 15px;
	}
	.attendenceLookSection {
		padding: 70px 0px 17%;
	}
	.attendenceLook {
		background-color:white;
		width: 90%;
		padding-left: 15px;
	}
	.attendenceLookLike {
		padding-top: 216px;
		padding-left: 10px;
		padding-right: 14px;
		padding-bottom: 0px;
	}
	.attendenceLookImageColumn {
		position: relative;
	}

	.attendenceLookImage {
		height: 366px;
		position: absolute;
		width: 457px;
		top: -71px;
		left: -15px;
	}

	.attendenceLookHedding {
		position: absolute;
	  top: 56px;
	  left: 111px;
	  padding-right: 127px;
	}
	.attendenceLookHedding h3{
		font-size : 50px;
		
	}
	.attendenceLookLike p {
		font-family: "Myriadpro-Regular";
		font-size: 20px;
		line-height: 33px;
	}
	.attendencePercentage {	
		margin-top: 10px;
		background-color: white;
		padding: 8px;
		
	}
	.attendancePercentageContainer {
		width: 90%;
		
	}

	.attendenceHundred h4 {
		font-size: 30px;
		margin: 3px;
		padding: 0px;
	}
	.attendenceHundredCount h5 {
		font-size: 22px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceHundredCount {
		background-color :#1F9342;
		padding: 8px;
		width:100%;
	}

	.attendenceNinetyNine h4{
		font-size: 30px;
		margin: 3px;
		padding: 0px;
	}
	.attendenceNinetyNineCount h5{
		font-size: 22px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyNineCount{
		background-color :#76B31D;
		padding: 8px;
		width:99%;
	}

	.attendenceNinetySeven h4{
		font-size: 30px;
		margin: 3px;
		padding: 0px;
	}
	.attendenceNinetySevenCount h5{
		font-size: 22px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetySevenCount{
		background-color :#D4CF09;
		padding: 8px;
		width:97%;
	}

	.attendenceNinetyFive h4{
		font-size: 30px;
		margin: 3px;
		padding: 0px;
	}
	.attendenceNinetyFiveCount h5{
		font-size: 22px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyFiveCount{
		background-color :#F29108;
		padding: 8px;
		width:95%;
	}

	.attendenceNinety h4{
		font-size: 30px;
		margin: 3px;
		padding: 0px;
	}
	.attendenceNinetyCount h5{
		font-size: 22px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyCount{
		background-color :#E94D10;
		padding: 8px;
		width:90%;
	}

	.attendenceEightyFive h4{
		font-size: 30px;
		margin: 3px;
		padding: 0px;
	}
	.attendenceEightyFiveCount h5{
		font-size: 22px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceEightyFiveCount{
		background-color :#FB0007;
		padding: 8px;
		width:85%;
	}
	.howAreWeDoing { 
		background-color:#F59C08 ; 
		position:relative; 
		padding: 6% 0px 15% 0px;
	}
	 .howAreWe {
		 width: 583px;
		height: 170px ;

	} 
	.howAreWe h3{
		font-size : 50px;
		padding-top: 50px;
	}
	.howAreWeContainer {
		height: 88px;
		padding: 0px 10px;
		width:80%;
		margin:10px auto;
	}
	.year h2{
		font-size : 45px;
		float:left;
	}
	.percent h2{
		font-size : 45px;
		float:right;
	}
	/*------*/
	.attendenceSupport {
		padding: 6% 0px 18% 0px;
	/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.attendenceSupport h2{
		font-size: 31px;
	}
	.expectContent {
		padding: 85px 23px 0px;
		
	}
	.expectHeadding {
		height: 100px;
	}	
	.expect h4{
		font-size: 32px;
		margin: auto;
	}
	.monitor h4{
		font-size: 32px;
		margin: auto;
	}
	.listen h4{
		font-size: 32px;
		margin: auto;
	}
	.support h4{
		font-size: 32px;
		margin: auto;
	}
	.formalise h4{
		font-size: 32px;
		margin: auto;
	}
	.enforce h4{
		font-size: 32px;
		margin: auto;
	}
	.expect {
		height: 188px; background-color: #ffffff; position: relative;margin: 40px auto 15px;width:94%;
	}

	.monitor {
		height: 188px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.listen {
		height: 195px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.support {
		height: 200px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.formalise {
		height: 250px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.enforce {
		height: 188px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}

	.expectContent p{
		font-size: 18px;
	}
	.monitorHeadding {
		height: 100px;
	}
	.listenHeadding{
		height: 100px;
	}
	.supportHeadding{
		height: 110px;
	}
	.formaliseHeadding{
		height: 100px;
	}
	.enforceHeadding{
		height: 100px;
	}
	.stripe-band-how { 
		transform: skewY(-6deg);
		background-image: linear-gradient(230deg, #FAB309, #F6A208);
		height: 146px;
		bottom: 259px;
	} 
 
	.stripe-bandp { 
		transform: skewY(-6deg);
		background: #4F1270;
		height: 78px;
		bottom: 299px;
	} 
 
	.stripe-bandw { 
		
		height: 149px;
		bottom: 196px;
	} 
 /*-------------------*/
 
	.stripe-bandww { 
		height: 184px;
		bottom: 169px;
	} 
	.parentSection {
		padding-top:0px;
	}
	.parentsContainer {
		
	}
	.parentsImage img {
		width:100%;
	}
	.parents {
		padding: 183px 20px 15px 15px;
		
	}
	.parents h3{
		font-size: 40px;
	}
	.parentsContents {
		padding: 10px 10px 10px 42px;
	}
	.parentsContents ul li {
		font-size: 17px;
	}
	.parentsHedding {
		width: 375px;
		height: 185px;
		position: absolute;
		z-index: 99;
		top: 5px;
		left: 23%;
	}
	.parentsHedding h2 {
		font-size: 68px;
		position: absolute;
		top: 35px;
		left: 83px;
	}
	.pupilsSection {
		position:relative;
	}
	.pupilHedding { 
		width: 375px;
		height: 185px;
		position: absolute;
		z-index: 99;
		top: 5px;
		left: 174px;
	}
	.pupilHedding h2{ 
		font-size: 68px;
		position: absolute;
		top: 33px;
		left: 106px;
		
	} 
	.pupils {
		padding: 15px 0px 100px 20px;
		
	}
	.pupils h3{
		font-size: 40px;
	}
	.pupilsContents {
		padding: 10px 10px 10px 42px;
	}
	.pupilsContents ul li {
		font-size: 17px;
	}
	.pupilsImage {
		padding: 77px 0px 0px 0px;
	}
	.pupilsImage img {
		width:100%;
	}
	.stripe-band-pupils {
	  transform: skewY(-6deg);
	  background: #ffffff;
	  height: 157px;
	  bottom: 198px;
	}
	.helpSection {
		position: relative;
	}
	.helpHedding {
		width: 375px;
		height: 185px;
		position: absolute;
		z-index: 99;
		top: 5px;
		left: 174px;
	}
	.helpHedding h2 {
		font-size: 68px;
		position: absolute;
		top: 33px;
	   left: 112px;
	}

	.help {
		padding: 180px 23px 30px 20px;
		
	}
	.help h3{
		font-size: 40px;
	}
	.helpContents {
		padding:10px 0px 10px;
	}
	.helpContents ul li {
		font-size: 17px;
	}
	.helpImage {
		padding-right:0px ;
		padding-left:0px;
	}
	.helpImage img {
		width:100%;
	}
	.faqImage {
		width: 356px;
		height: 181px;
		margin-top: 30px;
	}
	.faqImage h2 {
		font-size: 105px;
		
		padding-top: 35px;
		padding-left: 87px;
	}
	.faqs {
		margin-top :50px;
	}
	.stripe-band-help {
	  transform: skewY(-6deg);
	  background: #ffffff;
	  height: 84px;
		bottom: 273px;
	}
	.faqsHedding {
		padding: 0px 20px 0px 15px;
	}
	.faqsHedding h4 {
		font-size: 33px;
	}
	.faqsContent {
		padding: 10px 15px 10px 15px;
	}

	.faqsContent p {
		font-size: 17px;
	}
	.faqsContent span {
		font-family: "Myriadpro-Bold";
	}
	.download h6{
		font-size: 25px;
		margin-left: 0px;
	}
	.download img {
		top: 8px;
		left: 198px;
	}
	.furtherInformationContainer {
		
	}
	.furtherInformation {
		margin-top: 70px;
	}
	.furtherInformation h6{
		font-size: 23px;
	}
	.furtherInformationCard {
		padding: 7px 10px;
		width: 100%;
		margin: 15px 0px;
	}
	.furtherInformationCard p {
		font-size: 21px;
		padding: 6px 0px 0px;
	}
	.sample p {
		padding: 6px 0 1px !important;
	}
	.lookOutSection {
		padding: 120px 15px 10px 15px;
		position: relative;
	}
	.lookOutSection h3{
		font-size: 33px;
		padding: 35px 15px;
	}
	.faqsSection {
	  padding: 0px 0px 80px;
	}
	.stripe-band-look {
	  height: 81px;
	  bottom: 242px;
	}
	.lookOutCardRow{
		margin-top: 0px;
	}
	.lookOutCardImage {
		position:relative;
	}
	.lookOutCardTextOne {
		top: 38px;
		left: 143px;
	}
	.lookOutCardTextTwo {
		top: 40px;
		left: 100px;
	}
	.lookOutCardTextThree {
		top: 48px;
		left: 96px;

	}
	 .lookOutCardImage img {
		width: 55%;
		margin: auto;
	  }
	.lookOutImage {
		height: 188px;
		width: 431px;
		top: -27px;
		left: 20%;
	}
	.lookOutImage h2 {
		font-size: 75px;
		top: 30px;
		left: 68px;
	}
	.lookOutCardTextOne h4{
		font-size : 55px;
	}
	.lookOutCardTextTwo h4{
		font-size : 37px;
	}
	.lookOutCardTextThree h4{
		font-size : 50px;
	}
	.lookOutCard {
		margin-top:10px;
	}

	.attendanceOfficeSection {
		padding:30px 0px;
	}
	.attendenceOffice h3{
		font-size : 26px;
	}
	.attendenceOffice p{
		font-size: 17px;
	}
	.attendenceOfficeContent {
		padding:13px 1px;
	}
	.attendenceOffice span{
		font-size : 16px;
	}
	.attendanceOfficeDiv {
		padding-left: 20px;
	}
	.attendanceOfficeDivTwo {
		padding-left: 20px;
		
	}
	.welcomeByDirectorSection {
		min-height: 680px;
		background-size: 100% auto;
		background-repeat: no-repeat, no-repeat;
		position:relative;
		background: url(../images/parents.jpeg) no-repeat 50% 0%, linear-gradient(90deg, #76B31D, #D4CF09);
		background-attachment:fixed;
	}

	.largeDarkPinkPolygon2 {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeText {
		padding: 150% 15px 40px 15px;
	}
	.welcomeText h1 {
		font-size: 38px !important;
	}

	.welcomeDesctiption { position: relative; z-index: 1000;padding-left: 15px; }
	.welcomeDesctiption ul li { 
		font-size: 18px;
		color:white;
	}
	.welcomeByDirectorSectionPupil {
		min-height: 680px;
		background-size: 100% auto;
		position:relative;
	}

	.largeDarkPinkPolygon2Pupil {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeTextPupil {
		padding: 142% 15px 30px 15px;
	}
	.welcomeTextPupil h1 {
		font-size: 38px !important;
	}

	.welcomeDesctiptionPupil { position: relative; z-index: 1000;padding-left: 15px; }
	.welcomeDesctiptionPupil ul li { 
		font-size: 18px;
		color:white;
	}
	.welcomeByDirectorSectionHelp {
		min-height: 680px;
		background-size: 100% auto;
		background-repeat: no-repeat, no-repeat;
		position:relative;
		background: url(../images/help.jpg) no-repeat 50% 0%, linear-gradient(90deg, #4E1270 ,#8E0A21);
		background-attachment:fixed;
	}

	.largeDarkPinkPolygon2Help {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeTextHelp {
		padding: 146% 15px 50px 15px;
	}
	.welcomeTextHelp h1 {
		font-size: 38px !important;
	}

	.welcomeDesctiptionHelp { position: relative; z-index: 1000;}
	.welcomeDesctiptionHelp ul li { 
		font-size: 18px;
		color:white;
	}
	.download {
		display: flex;
		justify-content: center;
	}
	 
}
@media (min-width: 393px) and (max-width: 502px) {
.furtherInformationCard p {
        font-size: 18px;
    }
}
@media (min-width: 378px) and (max-width: 392px) {
.furtherInformationCard p {
        font-size: 19px;
    }
}

@media (min-width: 377px) and (max-width: 440px) {
	.attendenceLookImage {
		height: 273px;
		position: absolute;
		width: 334px;
		top: -55px;
		left: -16px;
	}

	.attendenceLookHedding {
		position: absolute;
		top: 36px;
		left: 70px;
		padding-right: 0px;
	}
	.attendenceLookHedding h3{
		font-size: 40px;
		
	}
	.attendenceLookLike {
		padding-top: 48%;
		padding-left: 10px;
		padding-right: 0px;
		margin-bottom: 20px;
	}
	.parentsHedding {
		width: 282px;
		height: 134px;
		position: absolute;
		z-index: 99;
		top: 2px;
		left: 15%;
	}
	
}
	
	
	
@media (min-width: 441px) and (max-width: 500px) {
	.attendenceLookImage {
		height: 283px;
		position: absolute;
		width: 351px;
		top: -55px;
		left: -16px;
	}

	.attendenceLookHedding {
		position: absolute;
		top: 36px;
		left: 70px;
		padding-right: 0px;
	}
	.attendenceLookHedding h3{
		font-size: 42px;
		
	}
	.attendenceLookLike {
		padding-top: 44%;
		padding-left: 10px;
		padding-right: 0px;
		margin-bottom: 20px;
	}
	.parentsHedding {
		width: 282px;
		height: 134px;
		position: absolute;
		z-index: 99;
		top: 2px;
		left: 20%;
	}
}

@media (min-width: 377px) and (max-width: 500px) {
	.headerLogoImg {
		width:75%;
		height:auto;
		
	}
	.main-container-row {
	  padding: 10px 0px 0px;
	}
	.headerMailText {
	  text-align: right;
	  font-size: 9px;
	  padding:3px 0px;
	  
	}
	.headerTelephoneText {
		color: #FFF;
		padding:8px 0px;
		font-size: 9px;
	   
	}
	.lightPurpleTopRegion {
		
	}
	.logoTitle .title {
		font-size: 19px;
		padding-left: 15px;
	}
	.navbar-brand .title {
		left: 100%;
		width: 143px;
		font-size: 14px;
		top: 40%;
	}
	
	.navbar-brand .image {
		z-index: 0;
		padding: 0px;
		background-color: transparent;
		width: 60px;
	}
	
	.navbar-brand {
		height: 67px;
	}
	#header {
		
	}
	#logo img {
		max-height: 80px;
		width: auto;
	}
	.headerNav {
		height: 70px;
	}
	header .navbar-nav > li > a.dropdown-toggle {
		padding: 3px 22px;
	}
	.headerMailText {
		text-align: right;
		padding:8px 0px;
	}
	.logoTitle {
	  padding-top: 6%;
	}
	.bannerContainer {
		
	}
	.logoHeader {
		width: 28%;
		padding: 20px 20px 20px 24px;
	}
	.logo-large-screen {
		width: 55px;
		height: 55px;
	}
	.attendanceImage {
		width: 100%;
		height: 75px;
		position: absolute;
		top: 45%;
		left: 0px;
	}
	.attendanceTitle h3{
		font-size: 19px;
		margin-top: 7px;
		margin-bottom: 2px;
	}
	.attendanceTitle p{
		font-size: 13px;
		line-height: 14px;
	}
	.attendanceTitle {
		padding: 3px 0px 45px 6px;
	}
	.attendenceCount h3{
		font-size: 29px;
		line-height: 35px;
		margin-top: 0px;
	}

	.attendenceCount {
		padding-left: 0px;
	}
	.attendenceContent {
		margin-top: 15px;
	}
	.attendenceContent p{
		font-size: 15px;
		line-height: 25px;
	}
	.attendenceContent p:first-of-type{
		padding-right: 0px;
		font-size: 16px !important;
	}
	.attendenceContentPara {
		margin-top: 7px;
	}
	.attendenceCountImage {
		text-align: center !important;
	}
	.attendenceCountImage img {
		margin: 10px auto;
		width: 50%;
	}
	.attendenceCount {
		padding-left: 15px;
	}
	.attendenceLookSection {
		padding: 57px 0px 80px;
	}
	.attendenceLook {
		background-color:white;
		width: 90%;
		padding-left: 15px;
	}
	
	.attendenceLookImageColumn {
		position: relative;
	}

	
	.attendenceLookLike p {
		font-family: "Myriadpro-Regular";
		font-size: 16px;
		line-height: 25px;
	}
	.attendencePercentage {	
		margin-top: 8px;
		background-color: white;
		padding: 10px;
		
	}
	.attendancePercentageContainer {
		width: 90%;
		
	}

	.attendenceHundred h4 {
		font-size: 23px;
		margin: 3px;
		padding: 0px;
	}
	.attendenceHundredCount h5 {
		font-size: 18px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceHundredCount {
		background-color :#1F9342;
		padding: 8px;
		width: 100%;
	}

	.attendenceNinetyNine h4{
		font-size: 23px;
		margin: 3px;
		padding: 0px;
	}
	.attendenceNinetyNineCount h5{
		font-size: 18px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyNineCount{
		background-color :#76B31D;
		padding: 8px;
		width:99%;
	}

	.attendenceNinetySeven h4{
		font-size: 23px;
		margin: 3px;
		padding: 0px;
	}
	.attendenceNinetySevenCount h5{
		font-size: 18px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetySevenCount{
		background-color :#D4CF09;
		padding: 8px;
		width:97%;
	}

	.attendenceNinetyFive h4{
		font-size: 23px;
		margin: 3px;
		padding: 0px;
	}
	.attendenceNinetyFiveCount h5{
		font-size: 18px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyFiveCount{
		background-color :#F29108;
		padding: 8px;
		width:95%;
	}

	.attendenceNinety h4{
		font-size: 23px;
		margin: 3px;
		padding: 0px;
	}
	.attendenceNinetyCount h5{
		font-size: 18px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyCount{
		background-color :#E94D10;
		padding: 8px;
		width:90%;
	}
	.carousel-indicators {
		bottom: 11px;
	}

	.attendenceEightyFive h4{
		font-size: 23px;
		margin: 3px;
		padding: 0px;
	}
	.attendenceEightyFiveCount h5{
		font-size: 18px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceEightyFiveCount{
		background-color :#FB0007;
		padding: 8px;
		width:85%;
	}
	.howAreWeDoing { 
		background-color:#F59C08 ; 
		position:relative; 
		padding: 9% 0px 17% 0px;
	}
	.howAreWe {
	  width: 326px;
	  height: 89px;
	}
	 
	.howAreWe h3{
		font-size: 30px;
		padding-top: 25px;
	}
	.howAreWeDiv {
		padding-top: 10px;
	}
	.howAreWeContainer {
		height: 70px;
		padding: 0px 10px;
		width: 80%;
		margin: 8px auto;
	}
	.year h2{
		font-size : 35px;
		float:left;
	}
	.percent h2{
		font-size : 35px;
		float:right;
	}
	/*====*/
	.attendenceSupport {
		padding: 8% 0px 90px 0px;
		/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.attendenceSupport h2{
		font-size: 23px;
		margin: auto;
	}
	.expectContent {
		padding: 75px 15px 0px;
	}
	.expectHeadding {
		height: 94px;
	}	
	.expect h4{
		font-size : 27px;
		margin: auto;
	}
	.monitor h4{
		font-size : 27px;
		margin: auto;
	}
	.listen h4{
		font-size : 27px;
		margin: auto;
	}
	.support h4{
		font-size :27px;
		margin: auto;
	}
	.formalise h4{
		font-size : 27px;
		margin: auto;
	}
	.enforce h4{
		font-size : 27px;
		margin: auto;
	}
	.expect {
		 height: 215px; background-color: #ffffff; position: relative;margin: 30px auto 15px;width:94%;
	}

	.monitor {
		 height: 215px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.listen {
		 height: 205px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.support {
		 height: 230px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.formalise {
		 height: 290px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}
	.enforce {
		 height: 215px; background-color: #ffffff; position: relative;margin: 15px auto;width:94%;
	}

	.expectContent p{
		font-size: 15px;
	}
	.monitorHeadding {
		height: 94px;
	}
	.listenHeadding{
		height: 94px;
	}
	.supportHeadding{
		height: 94px;
	}
	.formaliseHeadding{
		height: 94px;
	}
	.enforceHeadding{
		height: 94px;
	}
	.stripe-band-how { 
		transform: skewY(-6deg);
		background-image:linear-gradient(230deg, #FAB309, #F7A609); 
		height: 102px;
		bottom: 283px;
	} 
	 
	.stripe-bandp { 
		transform: skewY(-6deg);
		background: #4F1270;
		height: 80px;
		bottom: 304px;
	} 
	.stripe-bandw { 
		height: 125px;
		bottom: 211px;
	} 
 /*-------------------*/
 
	.stripe-bandww { 
		height: 160px;
		bottom: 184px;
	} 
	.parentSection {
		padding-top:0px;
	}
	.parentsContainer {
		
	}
	.parentsImage img {
		width:100%;
	}
	.parents {
		padding: 140px 10px 0px 15px;
	}
	.parents h3{
		font-size: 30px;
	}
	.parentsContents {
		padding: 10px 10px 10px 35px;
	}
	.parentsContents ul li {
		font-size: 15px;
	}
	
	.parentsHedding h2 {
		font-size: 50px;
		position: absolute;
		top: 22px;
		left: 63px;
	}
	.pupilsSection {
		position:relative;
	}
	.pupilHedding { 
		width: 282px;
		height: 134px;
		position: absolute;
		z-index: 99;
		top: 85px;
		left: 15%;
	}
	.pupilHedding h2{ 
		font-size: 50px;
		position: absolute;
		top: 20px;
		left: 80px;
		
	} 
	.pupils {
		background-color:#F8AD09 ;
		padding: 15px 0px 80px 15px;
	}
	.pupils h3{
		font-size: 30px;;
	}
	.pupilsContents {
		padding: 10px 20px 10px 25px;
	}
	.pupilsContents ul li {
		font-size: 15px;
		padding: 10px 0px;
	}
	.pupilsImage {
		padding: 77px 0px 0px 0px;
	}
	.pupilsImage img {
		width:100%;
	}
	.stripe-band-pupils {
	  transform: skewY(-6deg);
	  background: #ffffff;
	  height: 147px;
	  bottom: 224px;
	}
	.helpSection {
		position: relative;
	}
	.helpHedding {
		width: 282px;
		height: 134px;
		position: absolute;
		z-index: 99;
		top: 34px;
		left: 17%;
	}
	.helpHedding h2 {
		font-size: 50px;
		position: absolute;
		top: 20px;
		left: 95px;
	}

	.help {
		padding: 115px 0px 20px 15px;
	}
	.help h3{
		font-size: 30px;
	}
	.helpContents {
		padding: 10px 20px 10px 10px;
	}
	.helpContents ul li {
		font-size: 15px;
	}
	.helpImage {
		padding-right:0px ;
		padding-left:0px;
	}
	.helpImage img {
		width:100%;
	}
	.faqImage {
		width: 297px;
		height: 148px;
		margin-top: 0px;
	}
	.faqImage h2 {
		font-size: 85px;
		
		padding-top: 29px;
		padding-left: 73px;
	}
	.faqs {
		margin-top :50px;
	}
	.faqRow {
		padding-top: 20px;
	}
	.stripe-band-help {
	  transform: skewY(-6deg);
	  background: #ffffff;
	  height: 56px;
		bottom: 283px;
	}
	.faqsHedding {
		padding: 0px 20px 0px 15px;
	}
	.faqsHedding h4 {
		font-size: 30px;
		line-height: 33px;
	}
	.faqsContent {
		padding: 10px 15px 10px 15px;
	}

	.faqsContent p {
		font-size: 15px;
		line-height: 24px;
	}
	.faqsContent span {
		font-family: "Myriadpro-Bold";
	}
	.download h6{
		position:relative;
		font-family: "Myriadpro-Bold";
		font-size : 24px;
		color: #4F1270;
		margin-left: 0px;
	}
	.download img {
		margin-top: 17px;
	}
	.furtherInformationContainer {
		padding: 8px 50px 0px;
	}
	.furtherInformation {
		padding: 10px 15px 0px;
		margin-top: 0px;
	}
	.furtherInformation h6{
		font-size: 18px;
		line-height: 22px;
	}
	.furtherInformationCard {
		padding: 6px 10px;
		width: 100%;
		margin: 20px 0px;
	}
	.furtherInformationCard p {
		font-size: 17px;
		padding: 6px 0px 0px;
	}
	.sample p {
		padding: 6px 32% 1px !important;
	}
	.stripe-band-look {
		transform: skewY(-6deg);
		height: 60px;
		bottom: 257px;
		background-color: #ffffff;
	}
	.lookOutSection {
		padding: 105px 15px 25px 15px;
		position: relative;
	}
	.lookOutSection h3{
		font-size: 23px;
		padding: 0px 8px;
	}

	.lookOutCardRow{
		margin-top: 30px;
	}
	.lookOutCardImage {
		position:relative;
		margin: 5px 50px;
	}
	.lookOutCardTextOne {
		top: 31px;
		left: 117px;
	}
	.lookOutCardTextTwo {
		top: 28px;
		left: 74px;
	}
	.lookOutCardTextThree {
		top: 35px;
		left: 92px;
	}
	
	.lookOutImage {
		height: 141px;
		width: 327px;
		top: -29px;
		left: 43px;
	}
	.lookOutImage h2 {
		font-size: 50px;
		top: 26px;
		left: 64px;
	}
	.lookOutCardTextOne h4{
		font-size : 40px;
	}
	.lookOutCardTextTwo h4{
		font-size: 30px;
	}
	.lookOutCardTextThree h4{
		font-size : 35px;
	}
	.lookOutCard {
		margin-top:10px;
	}

	.attendanceOfficeSection {
		padding:10px 0px;
	}
	.attendenceOffice h3{
		font-size: 20px;
	}
	.attendenceOffice p{
		font-size : 13px;
	}
	.attendenceOfficeContent {
		padding:8px 1px;
	}
	.attendenceOffice span{
		font-size : 13px;
	}
	.attendanceOfficeDiv {
		padding-left: 20px;
	}
	.attendanceOfficeDivTwo {
		padding-left: 20px;
		
	}
	.faqsSection {
	  padding: 0px 0px 35px;
	}
	.welcomeByDirectorSection {
		min-height: 680px;
		background-size: 100% auto;
		background-repeat: no-repeat, no-repeat;
		position:relative;
		background: url(../images/parents.jpeg) no-repeat 50% 0%, linear-gradient(90deg, #76B31D, #D4CF09);
		background-attachment:fixed;
	}

	.largeDarkPinkPolygon2 {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeText {
		padding: 150% 15px 30px 15px;
	}
	.welcomeText h1 {
		font-size: 30px !important;
	}

	.welcomeDesctiption { position: relative; z-index: 1000;padding-left: 15px; }
	.welcomeDesctiption ul li { 
		font-size : 16px;
		color:white;
	}
	.welcomeByDirectorSectionPupil {
		min-height: 680px;
		background-size: 100% auto;
		position:relative;
	}

	.largeDarkPinkPolygon2Pupil {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeTextPupil {
		padding: 138% 15px 60px 15px;
	}
	.welcomeTextPupil h1 {
		font-size: 30px !important;
	}

	.welcomeDesctiptionPupil { position: relative; z-index: 1000;padding-left: 15px; }
	.welcomeDesctiptionPupil ul li { 
		font-size: 16px;
		color:white;
		}
	.welcomeByDirectorSectionHelp {
		min-height: 680px;
		background-size: 100% auto;
		background-repeat: no-repeat, no-repeat;
		position:relative;
		background: url(../images/help.jpg) no-repeat 50% 0%, linear-gradient(90deg, #4E1270 ,#8E0A21);
		background-attachment:fixed;
	}

	.largeDarkPinkPolygon2Help {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeTextHelp {
		padding: 146% 15px 20px 15px;
	}
	.welcomeTextHelp h1 {
		font-size: 30px !important;
	}

	.welcomeDesctiptionHelp { position: relative; z-index: 1000;}
	.welcomeDesctiptionHelp ul li { 
		font-size: 16px;
		color:white;
	}
	 #mainCarousel {
		margin-bottom: 20px;
		margin-top: 0px;
	}
	.download {
		display: flex;
		justify-content: center;
	}
}

@media screen and (max-width: 376px) {
	.download {
		display: flex;
		justify-content: center;
	}
	.headerLogoImg {
		width:75%;
		height:auto;
		padding-top: 10px;
	}
	.main-container-row {
	  padding: 8px 0px 0px;
	}	
	header .navbar-nav > li > a.dropdown-toggle {
		
		padding-top: 6px;
	}
	.headerMailText {
	  text-align: right;
	  font-size: 9px;
	  padding:3px 0px;
	  
	}
	.headerTelephoneText {
		color: #FFF;
		padding:4px 0px;
		font-size: 9px;
	   
	}
	.navbar-brand .title {
		width: 200px;
		font-size: 17px;
		left: 116%;
	}
	.lightPurpleTopRegion {
		
	}
	.logoTitle .title {
		font-size:18px;
		padding-left: 10px;	
	}
	#header {
		
	}
	#logo img {
		max-height: 85px;
		width: auto;
	}
	.headerNav {
		height: 80px;
	}
	.bannerContainer {
		margin-top: 0px;
		top: 0px;
	}
	.navbar-brand .image {
		z-index: 0;
		padding: 0px;
		background-color: transparent;
		width: 65px;
	}
	.logoHeader {
		width: 25%;
		padding: 15px 20px 10px 20px;
	}
	.logo-large-screen {
		width: 60px;
		height: 60px;
		margin-top: 10px;
	}
	.bannerContainer #mainCarousel {
		margin-top: 0px !important;
		margin-bottom: 0px !important;
	}
	#mainCarousel {
		margin-bottom: 20px;
		margin-top: 0px;
	}

	.attendanceImage {
	   width: 100%;
		height: 75px;
		position: absolute;
		top: 42%;
		left: 0px;
	}
	.attendanceTitle h3{
		font-size: 16px;
		margin-top: 7px;
		margin-bottom: 3px;
	}
	.attendanceTitle p{
		font-size: 12px;
		line-height: 13px;
	}
	.attendanceTitle {
		padding: 0px 0px 5px 6px;
	}
	.attendenceCount h3{
		font-size: 25px;
    line-height: 30px;
	margin-top: 1px;
	}
	.attendenceContent {
	  margin-top: 10px;
	}
	.attendenceCount {
		padding-left: 15px;
	}
	.attendenceContent p{
		font-size: 15px;
    line-height: 24px;
	}
	.attendenceContent p:first-of-type{
		padding-right: 0px;
		font-size: 16px !important;
	}
	.attendenceCountImage {
		text-align: center !important;
	}
	.attendenceCountImage img {
		margin: 10px auto;
		width: 72%;
		
	}
	.attendenceLookSection {
		
		padding: 135px 0px 70px;
	}
	.attendenceLook {
		background-color:white;
		padding-left: 15px;
		width: 90%;
		margin: auto;
	}
	.attendenceLookLike {
		padding-top: 47px;
		padding-left: 6px;
		padding-right: 14px;
	}
	.attendenceLookImageColumn {
		position: relative;
	}

	.attendenceLookImage {
		height: 239px;
		position: absolute;
		width: 300px;
		top: -130px;
		left: -19px;
	}

	.attendenceLookHedding {
		position: absolute;
		top: 54px;
        left: 44px;
	 
	}
	.attendenceLookHedding h3{
		font-family: "BeautyFreak-Bold";
		text-transform: lowercase;
		font-size : 33px;
		color:#ffffff;
		
	}
	.attendenceLookLike p{
		font-size: 16px;
		line-height: 23px;
	}
	.attendencePercentage {	
		margin-top: 10px;
		background-color:white;
		padding: 8px;
		
	}
	.attendancePercentageContainer {
		width: 90%;
		
	}

	.attendenceHundred h4 {
		font-size: 19px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceHundredCount h5 {
		font-size: 17px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceHundredCount {
		background-color :#1F9342;
		padding: 10px;
		width:100%;
	}

	.attendenceNinetyNine h4{
		font-size: 19px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetyNineCount h5{
		font-size: 17px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyNineCount{
		background-color :#76B31D;
		padding:10px;
		width:99%;
	}

	.attendenceNinetySeven h4{
		font-size: 19px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetySevenCount h5{
		font-size: 17px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetySevenCount{
		background-color :#D4CF09;
		padding:10px;
		width:97%;
	}

	.attendenceNinetyFive h4{
		font-size: 19px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetyFiveCount h5{
		font-size: 17px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyFiveCount{
		background-color :#F29108;
		padding:10px;
		width:95%;
	}

	.attendenceNinety h4{
		font-size: 19px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceNinetyCount h5{
		font-size: 17px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyCount{
		background-color :#E94D10;
		padding:10px;
		width:90%;
	}

	.attendenceEightyFive h4{
		font-size: 19px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceEightyFiveCount h5{
		font-size: 17px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceEightyFiveCount{
		background-color :#FB0007;
		padding:10px;
		width:85%;
	}
	.carousel-indicators {
		bottom: 11px;
	}
	.howAreWeDoing { 
		background-color:#F59C08 ; 
		position:relative; 
		padding: 6% 0px 19% 0px;
	}
	.howAreWe {
		width: 275px;
		height: 78px;
	}
	.howAreWe h3{
		font-size: 25px;
		padding-top: 25px;
	}
	.howAreWeDiv {
		padding-top: 8px;
	}
	.howAreWeContainer {
		height:63px;
		padding: 0px 10px;
		width:80%;
		margin:5px auto;
	}
	.year h2{
		font-size : 25px;
		float:left;
	}
	.percent h2{
		font-size : 25px;
		float:right;
	}
	/*-------------*/
	.attendenceSupport {
		background-color:#4F1270 ;
		padding: 8% 0px 80px 0px;
		/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.attendenceSupport h2{
		font-size: 19px;
	}
	.expectContent {
		padding: 58px 15px 0px;
	}
	.expectHeadding {
		height: 77px;
	}	
	.expect h4{
		font-size: 23px;
		margin: auto;
	}
	.monitor h4{
		font-size: 23px;
		margin: auto;
	}
	.listen h4{
		font-size: 23px;
		margin: auto;
	}
	.support h4{
		font-size: 23px;
		margin: auto;
	}
	.formalise h4{
		font-size: 23px;
		margin: auto;
	}
	.enforce h4{
		font-size: 23px;
		margin: auto;
	}
	.expect {
		height: 170px;
		background-color: #ffffff;
		position: relative;
		margin: 15px auto 0px;
		width: 94%;
	}

	.monitor {
		height: 170px;
		background-color: #ffffff;
		position: relative;
		margin: 15px auto 0px;
		width: 94%;
	}
	.listen {
		height: 170px;
		background-color: #ffffff;
		position: relative;
		margin: 15px auto 0px;
		width: 94%;
	}
	.support {
		height: 170px;
		background-color: #ffffff;
		position: relative;
		margin: 15px auto 0px;
		width: 94%;
	}
	.formalise {
		height: 230px; 
		background-color: #ffffff; 
		position: relative;
		margin: 15px auto;
		width:94%;
	}
	.enforce {
		height: 170px;
		background-color: #ffffff;
		position: relative;
		margin: 15px auto 0px;
		width: 94%;
	}
	.expectContent p{
		font-size : 13px;
	}
	.monitorHeadding {
		height: 77px;
	}
	.listenHeadding{
		height: 77px;
	}
	.supportHeadding{
		height: 77px;
	}
	.formaliseHeadding{
		height: 77px;
	}
	.enforceHeadding{
		height: 77px;
	}
	.stripe-band-how { 
		transform: skewY(-6deg);
		height: 91px;
    bottom: 289px;
	background-image:linear-gradient(230deg, #FAB209, #F6A409); 
	} 
	 
	.stripe-bandp { 
		transform: skewY(-6deg);
		background: #4F1270;
		height: 45px;
		bottom: 45px;
	}
	.roll-containerp {
		position: absolute;
		height: 50px;
		width: 100%;
		left: 0;
		z-index: 10;
	}
	.roll-containerw {
		position: absolute;
		height: 50px;
		width: 100%;
		left: 0;
		z-index: 10;
	}
	.stripe-bandw { 
		height: 80px;
		bottom: 0px;
	} 
	 /*-------------------*/
	 
	.stripe-bandww { 
		height: 114px;
		bottom: -27px;
	} 
	.roll-containerww {
		position: absolute;
		height: 50px;
		width: 100%;
		left: 0;
		z-index: 10;
	}
	.parentSection {
		padding-top:0px;
	}
	.parentsContainer {
		
	}
	.parentsImage img {
		width:100%;
	}
	.parents {
		padding: 85px 0px 0px 0px;
	}
	.parents h3{
		font-size: 25px;
	}
	.parentsContents {
		padding: 0px 10px 5px 35px;
	}
	.parentsContents ul li {
		font-size: 13px;
	}
	.parentsHedding {
		width: 260px;
		height: 122px;
		position: absolute;
		z-index: 99;
		top: -15px;
		left: 53px;
	}
	.parentsHedding h2 {
		font-size: 50px;
		position: absolute;
		top: 13px;
		left: 52px;
	}
	.pupilsSection {
		position:relative;
	}
	.pupilHedding { 
		width: 260px;
		height: 122px;
		position: absolute;
		z-index: 99;
		top: 47px;
		left: 53px;
	}
	.pupilHedding h2{ 
		font-size: 50px;
		position: absolute;
		top: 13px;
		left: 66px;
		
	} 
	.pupils {
		background-color:#F8AD09 ;
		padding: 5px 20px 25px 25px;
	}
	.pupils h3{
		font-size: 25px;
	}
	.pupilsContents {
		padding: 15px 0px 0px 0px;
	}
	.pupilsContents ul li {
		font-size: 13px;
		padding: 5px 0px;
	}
	.stripe-band-pupils {
		height: 77px;
		bottom: 260px;
	}
	.pupilsImage {
		padding: 33px 0px 0px 0px;
	}
	.pupilsImage img {
		width:100%;
	}
	.roll-containerww {
		position: absolute;
		height: 50px;
		width: 100%;
		left: 0;
		z-index: 10;
	}
	.helpSection {
		position: relative;
	}
	.helpHedding {
		width: 260px;
		height: 122px;
		position: absolute;
		z-index: 99;
		top: 0px;
		left: 58px;
	}
	.helpHedding h2 {
		font-size: 50px;
		position: absolute;
		top: 13px;
		left: 66px;

	}

	.help {
		padding: 70px 16px 30px 15px;
	}
	.help h3{
		font-size: 25px;
	}
	.helpContents {
		padding: 1px 0px 10px;
	}
	.helpContents ul li {
		font-size: 13px;
		margin: 10px auto;
	}
	.helpImage {
		padding-right:0px ;
		padding-left:0px;
	}
	.roll-container-help {
		position: absolute;
		height: 50px;
		width: 100%;
		left: 0;
		z-index: 10;
	}
	.helpImage img {
		width:100%;
	}
	 .faqImage {
		width: 244px;
		height: 124px;
		margin-top: -11px;
	}
	.faqImage h2 {
	   font-size: 70px;
		padding-top: 27px;
		padding-left: 54px;
	}
	.faqs {
		margin-top :50px;
	}
	.stripe-band-help {
		transform: skewY(-6deg);
		background: #ffffff;
		height: 60px;
		bottom: 35px;
	}
	.faqsHedding {
		padding: 0px 20px 0px 15px;
	}
	.faqsHedding h4 {
		font-size: 25px;
		line-height: 31px;
	}
	.faqsContent {
		padding: 8px 15px 0px 15px;
	}
	.faqRow {
		padding-top: 15px;
	}

	.faqsContent p {
		font-size: 14px;
		line-height: 22px;
	}
	.faqsContent span {
		font-family: "Myriadpro-Bold";
	}
	.download h6{
		font-size: 20px;
		margin-left: 0px;
	}
	.download img {
		margin-top: 14px;
	}
	.furtherInformationContainer {
		padding: 2px 24px 2px;
	}
	.furtherInformation {
		margin-top: 18px;
		padding: 0px 15px;
	}
	.furtherInformation h6{
		font-size: 16px;
	}
	.furtherInformationCard {
		padding: 3px 10px;
		width: 100%;
		margin: 10px 0px;
	}
	.furtherInformationCard p {
		font-size : 16px;
		padding: 6px 0px 0px;
	}
	.sample p {
		padding: 6px 0px 1px !important;
	}
	.lookOutSection {
		padding: 76px 15px 30px;
		position: relative;
	}
	.lookOutSection h3{
		font-size: 19px;
		padding: 0px 15px;
	}

	.lookOutCardRow{
		margin-top: 30px;
	}
	.lookOutCardImage {
		position:relative;
	}
	.lookOutCardTextOne {
		top: 23px;
		left: 98px;
	}
	.lookOutCardTextTwo {
		top: 28px;
		left: 74px;
	}
	.lookOutCardTextThree {
		top: 23px;
		left: 77px;

	}
	
	.lookOutImage {
		height: 106px;
		width: 242px;
		top: -17px;
		left: 67px;
	}
	.lookOutImage h2 {
		font-size: 37px;
		top: 13px;
		left: 52px;
	}
	.lookOutCardTextOne h4{
		font-size : 30px;
	}
	.lookOutCardTextTwo h4{
		font-size : 25px;
	}
	.lookOutCardTextThree h4{
		font-size : 30px;
	}
	.lookOutCard {
		margin-top:10px;
	}

	.attendanceOfficeSection {
		padding: 0px 0px;
	}
	.attendenceOffice h3{
		font-size : 17px;
	}
	.attendenceOffice p{
		font-size: 12px;
	}
	.attendenceOfficeContent {
		padding: 0px 1px 2px;
	}
	.attendenceOffice span{
		font-size : 12px;
	}
	.attendanceOfficeDiv {
		padding-left: 20px;
	}
	.attendanceOfficeDivTwo {
		padding-left: 20px;
		
	}
	.faqsSection {
	  padding: 0px 0px 5px;
	}
	.stripe-band-look {
	  height: 50px;
	  bottom: 264px;
	}
	.welcomeByDirectorSection {
		min-height: 680px;
		/*background-size: 50% 100%;*/
		background-size: 100% auto;
		background-repeat: no-repeat, no-repeat;
		position:relative;
		background: url(../images/parents.jpeg) no-repeat 100% 0%, linear-gradient(90deg, #76B31D, #D4CF09);
		background-attachment:fixed;
	}

	.largeDarkPinkPolygon2 {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeText {
		padding: 150% 15px 40px 15px;
	}
	.welcomeText h1 {
		font-size: 28px !important;
	}

	.welcomeDesctiption { position: relative; z-index: 1000;padding-left: 15px; }
	.welcomeDesctiption ul li { 
		font-size : 15px;
		padding: 6px 0px;
		color:white;
	}
	.welcomeByDirectorSectionPupil {
		min-height: 680px;
		background-size: 100% auto;
		position:relative;
	}

	.largeDarkPinkPolygon2Pupil {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeTextPupil {
		padding: 136% 15px 45px 15px;
	}
	.welcomeTextPupil h1 {
		font-size: 28px !important;
	}

	.welcomeDesctiptionPupil { position: relative; z-index: 1000;padding-left: 15px; }
	.welcomeDesctiptionPupil ul li { 
		font-size: 15px;
		padding: 6px 0px;
		color:white;
		}
	.welcomeByDirectorSectionHelp {
		min-height: 680px;
		background-size: 100% auto;
		background-repeat: no-repeat, no-repeat;
		position:relative;
		background: url(../images/help.jpg) no-repeat 100% 0%, linear-gradient(90deg, #4E1270 ,#8E0A21);
		background-attachment:fixed;
	}

	.largeDarkPinkPolygon2Help {
		-webkit-clip-path:polygon(0 0, -82px 0%, 73% 77%, 0% 140%);
		clip-path:polygon(0 0, -82px 0, 73% 77%, 0 140%);
		width: 96%;/* 520px */ height: 662px; position: absolute; opacity: 0.8; left: 0px;z-index: 100; max-width: 85%;
	}
	.welcomeTextHelp {
		padding: 143% 15px 36px 15px;
	}
	.welcomeTextHelp h1 {
		font-size: 28px !important;
	}

	.welcomeDesctiptionHelp { position: relative; z-index: 1000;}
	.welcomeDesctiptionHelp ul li { 
		font-size: 15px;
		padding: 6px 0px;
		color:white;
	}
}

@media (min-width: 319px) and (max-width: 341px) { 
	.attendanceImage {
		width: 100%;
		height: 75px;
		position: absolute;
		top: 40%;
	}
	.attendanceTitle h3 {
		font-size: 15px;
		margin-top: 10px;
		margin-bottom: 3px;
	
	}
}

.iPad .welcomeByDirectorSection {
		min-height: 680px;
		background-size: 50% auto;
		background-repeat: no-repeat, no-repeat;
		position:relative;
		background: url(../images/parents.jpeg) no-repeat 125% 1%, linear-gradient(90deg, #76B31D, #D4CF09);
		background-attachment:scroll;
		
	}
	.iPad .welcomeByDirectorSectionPupil {
		min-height: 750px;
		background-size: 20% auto;
		position:relative;
		background: url(../images/pupil.png) no-repeat 100% 0%, linear-gradient(90deg, #FAB409, #F29108);
		background-attachment:scroll;
	}
	.iPad .welcomeByDirectorSectionHelp {
		min-height: 680px;
		background-size: 50% auto;
		background-repeat: no-repeat, no-repeat;
		position:relative;
		background: url(../images/help.jpg) no-repeat 125% 1%, linear-gradient(90deg, #4E1270 ,#8E0A21);
		background-attachment:scroll;		
	}
	.iPad .attendenceLookSection {
		background-image: url("../images/green_bg_pattern-02.png"), linear-gradient(90deg, #D4CF09, #76B31D); 
		z-index:1;
		position: relative;
		background-attachment: scroll;
	}
	.iPad .welcomeTextPupil {
        padding: 180px 15px 30px 81px;
    }
	.iPad #mainCarousel {
		-webkit-clip-path: polygon(0 0%, 100% 0, 100% 87%, 0 100%);
	}
	.iPad .expectHeadding {
		-webkit-clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
	}
	.iPad .monitorHeadding {
		-webkit-clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
	}
	.iPad .listenHeadding{
		-webkit-clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
	}
	.iPad .supportHeadding{
		-webkit-clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
	}
	.iPad .formaliseHeadding{
		-webkit-clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
	}
	.iPad .enforceHeadding{
		-webkit-clip-path: polygon(0 0, 163% 0px, 50% 67%, 0 37%);
	}
	.iPhone .welcomeByDirectorSectionHelp {
		min-height: 680px;
		background-size: 100% auto;
		background-repeat: no-repeat, no-repeat;
		position:relative;
		background: url(../images/help.jpg) no-repeat 100% 0%, linear-gradient(90deg, #4E1270 ,#8E0A21);
		background-attachment:scroll;
	}
	
	.iPhone .welcomeByDirectorSectionPupil {
		min-height: 680px;
		background-size: 100% auto;
		position:relative;
		background-repeat: no-repeat, no-repeat;
		background-attachment:scroll;
	}
	
	.iPhone .welcomeByDirectorSection {
		min-height: 680px;
		/*background-size: 50% 100%;*/
		background-size: 100% auto;
		background-repeat: no-repeat, no-repeat;
		position:relative;
		background: url(../images/parents.jpeg) no-repeat 100% 0%, linear-gradient(90deg, #76B31D, #D4CF09);
		background-attachment:scroll;
	}
	.iPhone .attendenceLookSection {
		background-image: url("../images/green_bg_pattern-02.png"), linear-gradient(90deg, #D4CF09, #76B31D);
		z-index:1;
		position: relative;
		background-attachment: scroll;
	}
	.iPhone .welcomeText {
		padding: 180% 15px 40px 15px;
	}
	.iPhone .welcomeTextHelp {
		padding: 173% 15px 36px 15px;
	}
	
	@media (min-width: 441px) and (max-width: 500px) {
		.iPhone .welcomeText {
			padding: 175% 15px 40px 15px;
		}
		.iPhone .welcomeTextHelp {
			padding: 168% 15px 36px 15px;
		}
	}
	@media screen and (max-width: 376px){
		.iPhone .welcomeText {
			padding: 183% 15px 40px 15px;
		}
		.iPhone .welcomeTextHelp {
			padding: 173% 15px 36px 15px;
		}
	}