@font-face {
	font-family: 'Myriadpro-Bold';
	src: url('myriad-pro/MYRIADPRO-BOLD.OTF')  format('truetype');
}
@font-face {
	font-family: 'OpenSans-Semibold';
	src: url('open-sans/OpenSans-Semibold.ttf')  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: #0A814B;
	border-bottom: 1px solid #F4F7E8;
}
.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: 22px;
	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 {
    padding-right: 16px;
}
 header .navbar-nav > li > a {
    color: #F4F7E8;
}
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 {
    padding-right: 16px;

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

  }
}
header .navbar-nav > li > a:hover{
    color: #EC623C;
	background-color:transparent;

  }
@media (min-width: 768px) {
  header .navbar-nav > li > a {
    color: #F4F7E8;
  }
}
@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: 'Varela Round', sans-serif;
	font-weight: 600;
}
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: #0A814B;
}
.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;
}
.mac-os .attendanceImage {
		width:915px;
		height: 426px;
		position:absolute;
		top:45%;
	}
	.mac-os .attendanceTitle h3{
		font-size : 43px;
		
	}
	.mac-os .attendanceTitle p{
		font-size : 29px;
		line-height:40px;
	}
	.mac-os .attendanceTitle {
		padding:75px 30px 0px 40%;
		
	}
	.mac-os .attendenceCount h3{
		font-size : 71px;
		line-height:90px;
	}

	.mac-os .attendenceCount {
		padding-left: 50px;
		padding-bottom:15px;
	}
	.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 .attendenceContentPara {
		margin-top:10px;
	}
	
	.mac-os .attendenceCountImage img {
		margin-top: 30px;
		width:113%;
	}
	.mac-os .attendenceLookSection {
		width: 100%;
		padding:13% 0px 12% 5px;
		z-index:1;
		background-attachment:fixed;
		
	}
	.mac-os .attendenceLook {
		background-color:white;
		width:50%;
	}
	.mac-os .attendenceLookLike {
		padding-top: 24px;
		padding-left: 50px;
		padding-right:14px;
		padding-bottom:10px;
	}
	.mac-os .attendenceLookImageColumn {
		position: relative;
	}

	.mac-os .attendenceLookImage {
		height: 275px;
		position: absolute;
		width: 526px;
		top: -56px;
		left: -94px;
	}
	.mac-os .attendencePercentage:first-of-type{
		margin-top: 10px; 
	}
	.mac-os .attendenceLookHedding {
		top: 67px;
		left: 93px;
		padding-right: 41px;
	}
	.mac-os .attendenceLookHedding h3{
		font-size : 57px;
	}
	.mac-os .attendenceLookLike p {
		font-size : 26px;
		line-height:36px;
	}
	.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 { 
		position:relative; 
		 /* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
		padding: 20px 0px 10% 0px;
	}
	.mac-os .howAreWe {
		z-index:9999;
		margin:0 auto;
		width: 749px ;
		height: 216px ;
	} 

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

	.mac-os .howAreWeContainer {
		height:125px;
		padding: 0px 10px;
		width:80%;
		margin:15px auto;
	}
	.mac-os .didYouKnowText h5 {
		font-size:53px;
		line-height:55px;
	}
	.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:0px 0px 13% 0px ;
		/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.mac-os .attendenceSupport h2{
		font-size : 53px;
		padding-top:20px;
	}
	.mac-os .starSun .star img{ 
		position: relative;
		transform: rotate(-12deg);
		top: 35px;
		left: 40px;
		width: 45%;
	}

	.mac-os .starSun .sun img{
		position: relative;
		transform: rotate(8deg);
		top: -35px;
		left: 54px;
		width: 45%;
	}
	.mac-os .birdBellCat .bird img{ 
		position: absolute;
		width: 57%;
		left: 56%;
		top: -45px;
	  
	}

	.mac-os .birdBellCat .bell img{
		position: absolute;
		transform: rotate(8deg);
		width: 57%;
		left: 28%;
		top: -90px;
	}

	.mac-os .birdBellCat .cat img{
		position:relative;
		top: -62px;
		left: -29px;
		width:55%;
	}
	
	.mac-os .faqsSection {
		padding:0px 0px 13%;
	}
	.mac-os .faqImage {
		width: 750px;
		height: 379px;
		margin: 80px auto 0;
		z-index:99;
		transform:rotate(9deg) !important;
	}
	.mac-os .faqImage h2 {
		font-size: 211px;
		padding-top: 90px;
		padding-left: 134px;
	}
	.mac-os .faqs {
		margin-top :50px;
	}
	.mac-os .faqsHedding {
		padding:10px 60px 10px 20%;
	}
	.mac-os .faqsHedding h4 {
		font-size : 34px;
		line-height:55px;
	}
	.mac-os .faqsContent {
		padding:30px 10% 10px 39px;
	}
	.mac-os .faqRow {
		padding-top:5px;
	}
	.mac-os .faqRow:first-of-type {
		padding-top:25px;
	}
	
	.mac-os .faqsContent p {
		font-family: "Myriadpro-Regular";
		font-size: 22px;
		line-height:36px;
	}
	.mac-os .faqsContent span {
		font-family: "Myriadpro-Bold";
	}

	.mac-os .download h6{
		font-size : 30px;
		margin-left: 27px;
		margin-top:30px;
	}
	.mac-os .download img {
		margin-top:4%;
	}
	.mac-os .furtherInformationContainer {
		padding:50px 16% 10px;
	}
	.mac-os .furtherInformation {
		margin-top:80px;
	}
	.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 {
		
		padding: 0px 30px 8% 35px;
		
	}
	.mac-os .lookOutSection h3{
		font-size : 46px;
		padding: 40px 23%;
	}

	.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;
		margin:0 auto;
		
	}
	.mac-os .lookOutImage h2 {
		font-size: 85px;
		padding-top:60px;
		padding-left:65px;
		transform:rotate(-6deg) !important;
	}
	.mac-os .lookOutCardTextOne h4{
		font-size : 50px;
	}
	.mac-os .lookOutCardTextTwo h4{
		font-size : 33px;
	}
	.mac-os .lookOutCardTextThree h4{
		font-size : 42px;
		
	}

	.mac-os .attendanceOfficeSection {
		padding:3% 0px 4%;
	}
	.mac-os .attendenceOffice h3{
		font-size : 23px;
	}
	.mac-os .attendenceOffice p{
		font-size : 16px;
		color: black;
	}
	.mac-os .attendenceOfficeContent {
		padding:13px 1px;
	}
	.mac-os .attendenceOffice span{
		font-size : 16px;
		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;
	 }
	
 
@media (min-width: 1601px) and (max-width: 1800px) { 
	.mac-os .attendanceImage {
		top:45%;
	}
	.mac-os .attendenceLook {
		width:56%;
	}
	.mac-os .attendenceLookImage {
		height: 271px;
		width: 513px;
	}
	.mac-os .attendenceLookHedding {
		left: 89px;
	}
	.mac-os .attendenceLookHedding h3{
		font-size : 55px;
	}
	.mac-os .attendenceLookLike p {
		font-size : 24px;
		line-height:35px;
	}
	.mac-os .attendenceLookLike {
		padding-top: 40px;
	}
	.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: 37px;
		line-height:50px;
	}
	.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 .furtherInformationContainer {
		padding:50px 16% 10px;
	}
	.sample p {
		padding:6px 85px 1px !important;
	}
	
	.mac-os .lookOutSection h3{
		font-size : 40px;
		padding: 40px 21%;
	}
	.mac-os .download img {
		margin-top:5%;
	}
	.mac-os .lookOutSection {
		padding:0px 30px 10% 35px;
		/*clip-path: polygon(0px 0%, 100% 0px, 100% 86%, 0 100%);*/
	}
	.mac-os .attendenceLookSection {
		width: 100%;
		padding:13% 0px 13% 5px;
		z-index:1;
		background-attachment:fixed;
	}
	.mac-os .howAreWeDiv {
		padding-top: 35px;
	}
	.mac-os .howAreWeDoing { 
		position:relative; 
		 /* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
		padding: 20px 0px 10% 0px;
	}
	
}
 
 @media (min-width: 1401px) and (max-width: 1600px) { 
	.mac-os .attendanceImage {
		top:36%;
		width:723px;
		height:338px;
	}
	
	.mac-os .attendenceLook {
		width:60%;
	}
	.mac-os .attendenceLookImage {
		height:246px;
		width: 473px;
	}
	.mac-os .attendenceLookHedding {
		left: 91px;
	}
	.mac-os .attendenceLookHedding h3{
		font-size : 49px;
		margin-top:7px;
	}
	.mac-os .attendenceLookLike p {
		font-size : 23px;
		line-height:30px;
	}
	.mac-os .attendenceLookLike {
		padding-top: 30px;
	}
	.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: 34px;
		line-height:50px;
	}
	.mac-os .faqsContent {
		padding: 30px 10% 10px 39px;
	}

	.mac-os .faqsContent p {
		font-size: 21px;
		line-height:31px;
	}
	.mac-os .lookOutImage { 
		left:32%
	}
	
	.mac-os .furtherInformationContainer {
		padding:50px 16% 10px;
	}
	.sample p {
		padding:6px 85px 1px !important;
	}
	.mac-os .year h2{
		font-size :70px;
	}
	.mac-os .percent h2 {
		font-size : 70px;
	}
	.mac-os .howAreWeContainer {
		height:110px;
	}
	.mac-os .didYouKnowText h5 {
		font-size:53px;
		line-height:55px;
	}
	.mac-os .howAreWeDoing { 
		padding: 20px 0px 12% 0px;
	}
	.mac-os .faqRow {
		padding-top:5px;
	}
	.mac-os .faqRow:first-of-type {
		padding-top:25px;
	}
	.mac-os .download img {
		margin-top:40px;
	}
	.mac-os .attendenceLookSection {
		padding:13% 0px 11% 5px;
	}
	.mac-os .lookOutSection {
		padding: 0px 30px 10% 35px;
	}
	.mac-os .attendanceTitle {
		padding:55px 30px 0px 40%;
	}
	.mac-os .attendanceTitle h3{
		font-size : 34px;
	}
	.mac-os .attendanceTitle p{
		font-size : 23px;
		line-height:31px;
	}
	.mac-os .lookOutSection h3{
		padding: 40px 13%;
	}
}

@media (min-width: 1201px) and (max-width: 1400px) { 
	.mac-os .attendanceImage {
		top:36%;
		width:599px;
		height:278px;
	}
	
	.mac-os .attendenceLook {
		width:72%;
	}
	.mac-os .attendancePercentageContainer {
		width:72%;
	}
	
	.mac-os .furtherInformationCard {
		padding:12px 3px 8px;
	}
	.mac-os .furtherInformationCard p {
		font-size: 18px;
	}
	.mac-os .faqsHedding {
		padding: 10px 0px 10px 11%;
	}
	.mac-os .faqsHedding h4 {
		font-size: 36px;
		line-height:50px;
	}
	.mac-os .faqsContent {
		padding: 30px 5% 10px 50px;
	}

	.mac-os .faqsContent p {
		font-size: 21px;
		line-height:31px;
	}
	.mac-os .lookOutImage { 
		left:32%
	}
	
	.mac-os .furtherInformationContainer {
		padding:50px 16% 10px;
	}
	.mac-os .attendenceCount h3{
		font-size : 68px;
		line-height:88px;
	}
	.mac-os .attendenceOffice h3{
		font-size : 23px;
	}
	.mac-os .attendenceOffice p{
		font-size : 16px;
	}
	.mac-os .attendenceOffice span{
		font-size : 16px;
	}
	.mac-os .lookOutSection {
		padding: 0px 30px 10% 35px;
	}
	.mac-os .lookOutSection h3{
		font-size : 44px;
		padding: 40px 12%;
	}
	.mac-os .attendenceLookSection {
		padding:13% 0px 17% 5px;
	}
	.mac-os .attendanceTitle {
		padding:33px 30px 0px 28%;
		
	}
	.mac-os .attendanceTitle h3{
		font-size : 31px;
	}
	.mac-os .attendanceTitle p{
		font-size : 21px;
		line-height:28px;
	}
	

}
	
/*======================================================================*/
#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%);
}
.attendanceImage {
	background-image: url("../images/yellow_banner_bg.PNG");
    background-position: center;
    background-size: cover; 
	width:746px;
	height: 346px;
	position:absolute;
	top:40%;
}
.attendanceTitle h3{
	font-size: 40px;
	color: #ffffff;
	font-family: "riffic";
}
.attendanceTitle p{
	font-size: 28px;
    color: #4F1270;
    font-family: "Myriadpro-SemiBold";
    line-height: 39px;
    padding-right: 3px;
}
.carousel-indicators {
    bottom: 58px;
  }
.attendanceTitle {
	padding: 40px 38px 0px 201px;
	
}
.attendenceCount h3 {                   
	font-size: 68px;
	color: #622382;
	font-family: "riffic";
	line-height: 85px;
}

.attendenceCount {
	padding-left: 50px;
}
.attendenceRightSection {
	
}
.attendenceRight {
	padding-right: 45px;
}
.attendenceContent  {
	padding-top: 10px;		
}
.attendenceContent p{
	margin-top:10px;
	font-size : 23px;
	font-family: "Myriadpro-Regular";
	line-height:36px;
	margin-bottom: 0;
}

.attendenceContentPara {
	margin-top:10px;
}

.attendenceCountImage img {
	margin-top: 30px;
	width:113%;
}
.attendenceLookSection {
	background-image: url("../images/green_bg_pattern.png"), linear-gradient(90deg, #D4CF09, #76B31D);
	clip-path: polygon(0px 10%, 100% 0px, 100% 89%, 0 100%); 
	-webkit-clip-path: polygon(0px 10%, 100% 0px, 100% 89%, 0 100%); 
    background-position: center;
    background-size: cover; 
	width: 100%;
	padding: 194px 0px 13% 29px;
	z-index:1;
	background-attachment: fixed;
}
::before, ::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.attendenceLook {
	background-color:white;
	width: 72%;
}
.attendenceLookLike {
	padding-top: 25px;
	padding-left: 60px;
	padding-right:14px;
	padding-bottom: 20px;
}
.attendenceLookImageColumn {
	position: relative;
}

.attendenceLookImage {
	background-image: url("../images/good_attendance.png");
    background-position: center;
    background-size: cover;
    height: 272px;
    position: absolute;
    width: 520px;
    top: -52px;
    left: -79px;
}

.attendenceLookHedding {
	position: absolute;
    top: 56px;
    left: 73px;
    padding-right: 35px;
}
.attendenceLookHedding h3{
	font-family: "riffic";
    font-size: 61px;
    color: #ffffff;
    margin-top: 15px;
}
.attendenceLookLike p{
	font-family: "Myriadpro-Regular";
    font-size: 24px;
    line-height: 38px;
	color:#4F1270;
}
 .attendenceLookLike p strong {
	color: #4F1270;
}
.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: 1px;
	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: 1px;
	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: 1px;
	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: 1px;
	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: 1px;
	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: 1px;
	width:85%;
}

.howAreWeDoing { 
	position:relative; 
	z-index:1;
	clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%);
	-webkit-clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%);
	padding: 2% 0px 12% 0px;
}
 .howAreWe {
	background-image: url("../images/how_are_we.png"); 
	background-position: center; 
	background-size: cover;
	position:relative;
	margin:0 auto;
	width: 748px ;
	height: 215px ;
} 


.howAreWe h3{
	font-family: "riffic";
	font-size: 58px;
	color: #ffffff;
	padding-top: 74px;
	transform: rotate(3deg) !important;
	margin-top: 0;
}

.howAreWeContainer {
	background-color:#EBE3EF ;
	height:110px;
	padding: 0px 10px;
	width:80%;
	margin: 11.5px auto;
}
.year h2{
	font-family: "riffic";
    text-transform: capitalize;
	font-size : 68px;
	color: #4F1270;
	float:left;
}
.percent h2{
	font-family: "riffic";
	text-transform: lowercase;
	font-size : 68px;
	color: #4F1270;
	float:right;
}

.attendenceSupport {
	background-color:#4F1270 ;
	padding: 5px 0px 200px 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;
	padding: 10px 96px 10px 100px;
}
.didYouKnow {
	background-image: url("../images/did_you_know.png"); 
	background-position: center; 
	background-size: cover;
	position:relative;	
	margin:0 auto;
	width: 618px ;
	height: 233px ;
} 
.didYouKnow h3{
	font-family: "riffic";  font-size: 72px;
    color: #ffffff;
    padding-top: 69px;
    transform: rotate(-5deg);
    margin-top: 0;
}
.didYouKnowText:first-of-type {
	padding-top:50px;
}

.didYouKnowText h5{
	font-family: "riffic";
	font-size: 52px;
	color: #ffffff;
	float:right;
}

.faqsSection {
	padding: 0px 0px 200px;
}
.faqImage {
	background-image: url("../images/good_attendance.png");
	background-position: center;
	background-size: cover;
	width: 615px;
	height: 311px;
	margin: 62px auto 0 auto;
	transform: rotate(9deg) !important;
}
.faqImage h2 {
	font-family: "riffic";
	text-transform: capitalize;
	font-size: 172px;
	color: #ffffff;
	padding-top: 53px;
	padding-left: 106px;
	transform: rotate(-9deg) !important;
}
.faqs {
	margin-top :50px;
}
.faqsHedding {
	 padding: 10px 119px 10px 100px;
}
.faqsHedding h4 {
	font-family: "riffic";
    font-size: 34px;
    color: #4F1270;
    line-height: 50px;
}
.faqsContent {
	padding:30px 52px 10px 30px;
}
.faqRow {
	padding-top: 5px;
}
.faqRow:first-of-type {
	padding-top: 15px;
}
.faqsContent p {
	font-family: "Myriadpro-Regular";
	font-size: 20px;
	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 {
	margin-left: 10px;
  margin-top: 19px;
  float:left
}
.furtherInformationContainer {
	padding: 50px 161px 10px;
}
.furtherInformation {
	margin-top: 70px;
}
.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: "riffic";
	color: #ffffff;
	text-align: center;
	font-size: 20px;
	line-height: 24px;
	padding: 6px 0px 1px;
}
.sample p {
	padding:6px 46px 1px !important;
}
.lookOutSection {
	background-image: url("../images/Stars_Texture.svg"),linear-gradient(210deg, #D4CF09, #76B31D);
    padding: 0% 30px 17% 35px;
    position:relative;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}
.lookOutSection::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;
}
.lookOutSection h3{
	font-family: "riffic";
	font-size: 50px;
	color: #ffffff;
	text-align: center;
	padding: 0px 100px;
}

.starSun { 
	
 } 

.starSun .star {
	text-align:right;
	
}
.starSun .star img{ 
	position: relative;
	transform: rotate(-12deg);
	top: 124px;
	left: 40px;
	width: 60%;
}

.starSun .sun img{
	position: relative;
	transform: rotate(8deg);
	top: 60px;
	left: 72px;
	width: 60%;
}
.birdBellCat .bird img{ 
	position: absolute;
	width: 90%;
	left: 80px;
	top: 33px;
  
}

.birdBellCat .bell img{
	position: absolute;
	transform: rotate(8deg);
	width: 88%;
	left: 64px;
	top: -2px;
}

.birdBellCat .cat img{
	position:relative;
	top: 30px;
	left: 53px;
}

.lookOutImage {
	background-image: url("../images/look_out.png");
    background-position: center;
    background-size: cover;
    height: 230px;
    width: 535px;
    transform: rotate(10deg) !important;
	margin: 0 auto;
}
.lookOutImage h2 {
    transform: rotate(-6deg) !important;
	font-family: "riffic";
	font-size: 77px;
	color: #ffffff;
	padding-top: 68px;
	padding-left: 80px;
}

.attendanceOfficeSection {
	background-color:#D4CF09 ;
	padding: 25px 0px 60px;
	position: relative;
	z-index: 1;
}
.attendanceOfficeSection::before {
	content: '';
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	background: inherit;
	transform: skew(0, -5deg);
	transform-origin: top left;
}
.attendenceOffice h3{
	font-family: "riffic";
    font-size: 23px;
    color: #622382;
}
.attendenceOffice p{
	font-family: "Myriadpro-Regular";
	font-size : 16px;
	color: black;
}
.attendenceOfficeContent {
	padding:13px 1px;
}
.attendenceOffice span{
	font-family: "Myriadpro-Bold";
	font-size : 16px;
	color: #622382;
}
.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);
	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: 100px; 
	width: 100%; 
	left: 0; 
	z-index: 10;
} 
.stripep { 
	position: absolute; 
	left: 0; 
	width: 100%; 
 } 
 .stripe-bandp { 
	transform: skewY(-6deg);
	background: #4F1270;
	height: 150px;
	bottom: 135px;
 } 
 /*-----------------*/
 .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;
}
.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;
}

	
	/*---------------MAC--------------------*/
	
	


@media (min-width: 831px) and (max-width: 991px) { 
	.attendenceLookLike {
		padding-right: 0px;
		padding-bottom: 10px;
		padding-top: 197px;
		padding-left: 20px;
	}
	.attendenceOffice span {
		font-size: 15px;
	}
	.attendenceOffice p {
		font-size: 15px;
	}
	.attendenceOffice h3 {
		font-size: 25px;
	}
	
 }
 @media (min-width: 992px) and (max-width: 1020px) { 
	.attendenceLookLike {
		padding-right: 0px;
		padding-bottom: 10px;
		padding-top: 30px;
		padding-left: 30px;
	}
	.attendenceLookHedding h3 {
		font-size: 53px;
	}
	
	.attendenceLookImage {
		height: 234px;
		position: absolute;
		width: 451px;
		top: -68px;
		left: -63px;
	}
	.attendenceOffice span {
		font-size: 15px;
	}
	.attendenceOffice p {
		font-size: 15px;
	}
	.attendenceOffice h3 {
		font-size: 21px;
	}
	
 }
@media (min-width: 1021px) and (max-width: 1200px) {
	
	.navbar-brand .image {
		z-index: 0;
	  padding: 0px;
	  background-color: transparent;
	}
	
	.logo-large-screen {
		width: 85px;
		height: 85px;
	}
	.carousel-indicators {
		bottom: 30px;
	}
	.attendanceImage {
		width: 552px;
		height: 248px;
		top: 40%;
	}
	.attendanceTitle h3{
		font-size: 30px;
	}
	.attendanceTitle p{
		font-size : 23px;
		line-height:29px;
	}
	.attendanceTitle {
		padding: 20px 58px 0px 100px;
		
	}
	.attendenceCount h3{
		font-size: 66px;
		line-height: 75px;
	}

	.attendenceCount {
		padding-left: 0px;
		
	}
	.attendenceContent p{
		font-size: 25px;
		line-height: 39px
	}
	
	.attendenceCountImage img {
		
		width:100%;
	}
	.attendenceCount {
		padding-left: 15px;
	}
	.attendenceLookSection {
		padding: 21% 0px 13%;
		clip-path: polygon(0px 8%, 100% 0px, 100% 92%, 0 100%);
		-webkit-clip-path: polygon(0px 8%, 100% 0px, 100% 92%, 0 100%);
	}
	.attendenceLook {
		background-color:white;
		padding-left: 15px;
		width: 90%;
		
	}
	.attendenceLookLike {
		padding-top: 20px;
	}
	.attendenceLookImageColumn {
		position: relative;
	}

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

	.attendenceLookHedding {
		top: 56px;
		left: 74px;
		padding-right: 25px;
	}
	.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{
		padding:10px;
		width:97%;
	}

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

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

	.attendenceEightyFive h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceEightyFiveCount h5{
		font-size : 28px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceEightyFiveCount{
		padding:10px;
		width:85%;
	}
	.howAreWeDoing { 
		position:relative;
		    padding: 0px 0px 145px 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 {
		padding:25px 0px 160px 0px;
		/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.attendenceSupport h2{
		font-size : 53px;
	}
	.expectContent {
		padding: 100px 53px 0px;
	}
	
	.stripe-band-how { 
		transform: skewY(-6deg);
		height: 150px;
		bottom: 240px
	} 
 
	.stripe-bandp { 
		transform: skewY(-6deg);
		height: 150px;
		bottom: 337px
	} 
	.stripe-bandw { 
		height: 191px;
		bottom: 182px;
	} 
 /*-------------------*/
 
	.stripe-bandww { 
		height: 228px;
		bottom: 214px;
	} 
	
	.faqImage {
		width: 591px;
		height: 302px;
		margin-top: 60px;
	}
	.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: 33px;
		line-height: 45px;
	}
	.faqsContent {
		padding: 10px 15px 10px 15px;
	}

	.faqsContent p {
		font-size: 18px;
	}
	.faqsContent span {
		font-family: "Myriadpro-Bold";
	}
	.download h6{
		font-size: 26px;
		margin-left: 8px;
	}
	.download img {
		top: 19px;
		left: 213px;
	}
	.furtherInformationContainer {
		padding: 50px 60px 10px;
	}
	.furtherInformationContainer {
		
	}
	.furtherInformation {
		margin-top: 70px;
	}
	.furtherInformationContainer {
	  padding: 40px 0px 0px;
	}
	.furtherInformation h6{
		font-size: 19px;
	}
	.faqsSection {
		padding: 0px 0px 15%;
	}
	.stripe-band-look {
		height: 121px;
		bottom: 225px;
	}
	.furtherInformationCard {
		padding:7px 10px;
		width: 100%;
		margin:10px 0px;
	}
	.furtherInformationCard p {
		font-size: 15px;
		padding: 6px 2px 0px;
	}
	.sample p {
		padding:6px 46px 1px !important;
	}
	.lookOutSection {
		padding: 0px 15px 16% 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: -10px;
		left: 23%;
	}
	.lookOutImage h2 {
		font-size: 72px;
		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 40px;
	}
	.attendenceOffice h3{
		font-size: 21px;
	}
	.attendenceOffice p{
		font-size: 14px;
	}
	.attendenceOfficeContent {
		padding:13px 1px;
	}
	.attendenceOffice span{
		font-size: 14px;
	}
	.attendanceOfficeDiv {
		padding-left: 20px;
	}
	.attendanceOfficeDivTwo {
		padding-left: 20px;
		
	}
	.didYouKnow {
		width: 549px;
		height: 207px;
	} 
	.didYouKnow h3{
		font-size: 65px;
		padding-top: 61px;
	}
	.didYouKnowText:first-of-type {
		padding-top: 45px;
	}

	.didYouKnowText h5{
		font-size: 46px;
	}
	.attendenceSupport {
		padding: 20px 0px 130px 0px;
		/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.starSun .star {
		  text-align: center;
	}
	.starSun .star img{ 
		max-width: 100%;
		top: 67px;
		left: 27%;
		width: 50%;
	}

	.starSun .sun img{
		max-width: 100%;
		top: 10px;
		left: 4%;
		width: 50%;
	}
	.birdBellCat .bird img{ 
		max-width: 100%;
		top: 29px;
		width: 60%;
	   
		left: 52%;
	}

	.birdBellCat .bell img{
		max-width: 100%;
		top: 1px;
		width: 56%;
		left: 21%;
	}

	.birdBellCat .cat img{
		max-width: 100%;
		top: 8px;
		width: 59%;
		left: -17%;
	}
	
}
@media (min-width: 1099px) and (max-width: 1134px) { 
    .furtherInformationCard p {
        font-size: 18px;
    }
}
@media (min-width: 1063px) and (max-width: 1098px) { 
    .furtherInformationCard p {
        font-size: 16px;
    }
}
@media (min-width: 1026px) and (max-width: 1062px) { 
    .furtherInformationCard p {
        font-size: 16px;
    }
}
@media (min-width: 1021px) and (max-width: 1025px) { 
    .furtherInformationCard p {
        font-size: 15px;
    }
	.furtherInformationContainer {
	  padding: 50px 60px 10px;
	}
}

@media (min-width: 831px) and (max-width: 992px) {
	.birdBellCat .cat img {
		max-width: 100%;
		top: 536px;
		width: 26%;
		left: 35%;
	}
	.starSun .star img {
		max-width: 100%;
		top: 42px;
		left: -44px;
		width: 36%;
	}
	.starSun .sun img {
		max-width: 100%;
		top: 38px;
		left: 29%;
		width: 36%;
	}	
	.birdBellCat .bird img {
		max-width: 100%;
		top: 38px;
		width: 29%;
		left: 32%;
	}
	.birdBellCat .bell img {
		max-width: 100%;
		top: 276px;
		width: 29%;
		left: 35%;
	}
	.lookOutSection {
		padding: 0% 15px 75% 15px;
		position: relative;
	}

}
@media (min-width: 993px) and (max-width: 1020px) { 
	.birdBellCat .cat img {
		max-width: 100%;
		top: 4px;
		width: 73%;
		left: 11%;
	}
	.birdBellCat .bird img {
		max-width: 100%;
		top: 10px;
		width: 91%;
	}
	.birdBellCat .bell img {
		max-width: 100%;
		top: -31px;
		width: 74%;
		left: 25%;
	}
	.starSun .sun img {
		max-width: 100%;
		top: 10px;
		left: 75px;
		width: 50%;
	  }
	.starSun .star img {
		max-width: 100%;
		top: 42px;
		left: 138px;
		width: 54%;
	  }
}
@media (min-width: 831px) and (max-width: 900px) {
	.birdBellCat .bell img{
		max-width: 100%;
		top: 276px;
		width: 28%;
		left: 32%;
	}

	.birdBellCat .cat img{
		max-width: 100%;
		top: 550px;
		width: 31%;
		left: 32%;
	}
	.lookOutSection {
		padding: 0% 15px 82% 15px;
		
	}

}
@media (min-width: 901px) and (max-width: 991px) {
	.birdBellCat .bell img{
		max-width: 100%;
		top: 297px;
		width: 28%;
		left: 36%;
	}

	.birdBellCat .cat img{
		max-width: 100%;
		top: 579px;
		width: 27%;
		left: 35%;
	}
	.lookOutSection {
		padding: 0% 15px 77% 15px;
	}

}
@media (min-width: 992px) and (max-width: 1020px) {
	
	.lookOutSection {
		padding: 0% 15px 13% 15px;
		
	}
	.starSun .star img{ 
		max-width: 100%;
		top: 60px;
		left: 29%;
		width: 60%;
	}

	.starSun .sun img{
		max-width: 100%;
		top: 10px;
		left: 4%;
		width: 60%;
	}
	.birdBellCat .bird img{ 
		max-width: 100%;
		top: 22px;
		width: 79%;
		left: 35%;
	}

	.birdBellCat .bell img{
		max-width: 100%;
		top: -14px;
		width: 70%;
		left: 21%;
	}

	.birdBellCat .cat img{
		max-width: 100%;
		top: -31px;
		width: 84%;
		left: -1%;
	}
	

}
@media (min-width: 831px) and (max-width: 991px) { 
	/* .attendenceLookLike { */
		/* padding-right: 0px; */
		/* padding-bottom: 0px; */
		/* padding-top: 30%; */
	/* } */
	 .attendenceCountImage img {
		margin: 10px auto;
		width: 30%;
	}
}
@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: 30px;
		width: 100%;
	}
}
@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: 46%;
	}
	.attendanceTitle h3{
		font-size: 40px;
		margin-top: 0px;
		margin-bottom: 3px;
	}
	.attendanceTitle p{
		font-size: 21px;
		line-height: 21px;
	}
	.attendanceTitle {
		padding: 20px 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;
	}
	
	#mainCarousel {
	  margin-bottom: 0px;
	}	
	.attendenceCount {
		padding-left: 15px;
	}
	.attendenceLookSection {
		padding: 140px 0px 16%;
		clip-path: polygon(0px 6%, 100% 0px, 100% 91%, 0 100%);
		-webkit-clip-path: polygon(0px 6%, 100% 0px, 100% 91%, 0 100%);
	}
	.attendenceLook {
		padding-left: 15px;
		width: 90%;
	}
	
	.attendenceLookImageColumn {
		position: relative;
	}

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

	.attendenceLookHedding {
		position: absolute;
		top: 56px;
		left: 67px;
		padding-right: 20px;
	}
	.attendenceLookHedding h3{
		font-size: 53px;	
	}
	.attendenceLookLike p {
		font-family: "Myriadpro-Regular";
		font-size: 20px;
		line-height: 30px;
	}
	.attendencePercentage {	
		margin-top: 5px;
		background-color:white;
		
		margin-left: -4px;		
	}
	.attendancePercentageContainer {
		width: 90%;
	}

	.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{
		padding: 5px;
		width:85%;
	}
	.howAreWeDoing { 
		position:relative; 
		padding: 4% 0px 120px 0px;
	}
	.howAreWe {
		width: 595px ;
		height: 170px;

	} 
	.howAreWe h3{
		padding-top: 60px;
		font-size: 45px;
	}
	.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: 20px 0px 110px 0px;
		/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.attendenceSupport h2{
		font-size: 39px;
	}
	.expectContent {
		padding: 85px 23px 0px;
	}
	
	.stripe-band-how { 
		transform: skewY(-6deg);
		height: 150px;
		bottom: 240px
	} 
	 
	.stripe-bandp { 
		transform: skewY(-6deg);
		height: 140px;
		bottom: 306px;
	} 
	.stripe-bandw { 
		height: 149px;
		bottom: 220px;
	} 
	 /*-------------------*/
	 
	.stripe-bandww {
		height: 212px;
		bottom: 225px;
	}
	
	.faqImage {
		width: 381px;
		height: 186px;
		margin-top: 35px;
	}
	.faqImage h2 {
		font-size: 111px;
		padding-top: 31px;
		padding-left: 15%;
	}
	.faqs {
		margin-top :50px;
	}
	.faqsHedding {
		padding: 0px 20px 0px 15px;
	}
	.faqsHedding h4 {
		font-size: 29px;
	}
	.faqsContent {
		padding: 0px 15px 10px 15px;
	}
	.faqRow:first-of-type {
	  padding-top: 5px;
	}
	.faqRow {
	  padding-top: 1px;
	}
	.stripe-band-help {
		transform: skewY(-6deg);
		height: 103px;
		bottom: 264px;
	}
	.faqsContent p {
		font-size: 17px;
	}
	.faqsContent span {
		font-family: "Myriadpro-Bold";
	}
	.download h6{
		font-size: 24px;
		margin-left: 2px;
	}
	.download img {
		top: 9px;
		left: 190px;
	}
	.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: 16px;
		padding: 6px 0px 0px;
	}
	.sample p {
		padding: 6px 35% 1px !important;
	}
	.stripe-band-look {
		transform: skewY(-6deg);
		height: 123px;
		bottom: 215px;
		background-color: #ffffff;
	}
	.faqsSection {
		    padding: 0px 0px 17%;
	}
	
	.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;
		
	}
	.furtherInformationContainer {
		padding: 30px 45px 0px;
	}
	.lookOutImage h2 {
		font-size: 58px;
	   
	}
	.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;
		
	}
	.didYouKnow {
		width: 472px;
		height: 178px;
	} 
	.didYouKnow h3{
		font-size: 57px;
		padding-top: 54px;
	}
	.didYouKnowText:first-of-type {
		padding-top: 30px;
	}

	.didYouKnowText h5{
		font-size: 31px;
	}
	.attendenceSupport {
		padding: 20px 0px 100px 0px;
		/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.starSun .star {
		  text-align: center;
	}
	
}
@media (min-width: 992px) and (max-width: 1020px) {
    .download img {
		top: 17px;
		left: 190px;
	}
}
@media (min-width: 831px) and (max-width: 991px) {
    .download img {
		top: 8px;
		left: 190px;
	}
	.download {
		display: flex;
		justify-content: center;
	}
}
@media (min-width: 1001px) and (max-width: 1014px) {
    .furtherInformationCard p {
        font-size: 14px;
    }
}
@media (min-width: 992px) and (max-width: 1000px) {
    .furtherInformationCard p {
        font-size: 13px;
    }
}
@media (min-width: 785px) and (max-width: 991px) {
    .furtherInformationCard p {
        font-size: 22px;
    }
}
@media (min-width: 769px) and (max-width: 784px) {
    .furtherInformationCard p {
        font-size: 21px;
    }
}

@media (min-width: 801px) and (max-width: 830px) {
	.birdBellCat .bell img{
		max-width: 100%;
		top: 266px;
		width: 33%;
		left: 32%;
	}

	.birdBellCat .cat img{
		max-width: 100%;
		top: 554px;
		width: 40%;
		left: 32%;
	}

}
@media (min-width: 768px) and (max-width: 800px) {
	.carousel-indicators {
		bottom: 28px;
	}
	.birdBellCat .bell img{
		max-width: 100%;
		top: 239px;
		width: 33%;
		left: 34%;
	}

	.birdBellCat .cat img{
		max-width: 100%;
		top: 502px;
		width: 40%;
		left: 32%; 
	}

}


@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: 46%;
	}
	.attendanceTitle h3{
		font-size: 37px;
		margin-top: 0px;
		margin-bottom: 3px;
	}
	.attendanceTitle p{
		font-size: 21px;
		line-height: 21px;
	}
	.carousel-indicators {
		bottom: 23px;
	}
	.attendanceTitle {
		padding: 15px 20px 0px 20px;
	}
	.attendenceCount h3{
		font-size: 60px;
		line-height: 72px;
	}
	.attendenceRight {
		padding-right: 15px;
	}
	.attendenceCount {
		padding-left: 0px;
	}
	.attendenceContent p{
		font-size: 22px;
		line-height: 35px;
	}
	.attendenceContent {
	  margin-top: 25px;
	}
	
	.attendenceCountImage {
		text-align: center !important;
	}
	.attendenceCountImage img {
		margin-top: 10px;
		width: 30%;
	}
	.attendenceCount {
		padding-left: 15px;
	}
	#mainCarousel {
		margin-bottom: 0px;
	}
	.attendenceLookSection {
		padding: 130px 15px 15%;
		clip-path: polygon(0px 5%, 100% 0px, 100% 94%, 0 100%);
		-webkit-clip-path: polygon(0px 5%, 100% 0px, 100% 94%, 0 100%);
	}
	.attendenceLook {
		background-color:white;
		padding-left: 15px;
		width:90%;
	}
	.attendenceLookLike {
		padding-top: 200px;
		padding-left: 50px;
		padding-right: 14px;
		padding-bottom: 0px;
	}
	
	.attendenceLookImageColumn {
		position: relative;
	}

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

	.attendenceLookHedding {
		top: 44px;
		left: 72px;
		padding-right: 20px;
	}
	.attendenceLookHedding h3{
		font-size : 50px;	
	}
	.attendenceLookLike p {
		font-size: 21px;
		line-height: 33px;
	}
	.attendencePercentage {	
		margin-top: 10px;
		padding: 12px;	
		
	}
	.attendancePercentageContainer {
			width:90%;
	}

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

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

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

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

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

	.attendenceEightyFive h4{
		font-size : 32px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceEightyFiveCount h5{
		font-size: 22px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceEightyFiveCount{
		padding: 5px;
		width:85%;
	}
	.howAreWeDoing { 
		position:relative; 
		padding: 6% 0px 120px 0px;
	}
	.howAreWe {
		width: 595px ;
		height: 170px;

	} 
	.howAreWe h3{
		padding-top: 53px;
		font-size: 47px;
	}
	.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: 20px 0px 100px 0px;
		/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.attendenceSupport h2{
		font-size: 39px;
	}
	.expectContent {
		padding: 85px 23px 0px;
		
	}
	
	.stripe-band-how { 
		transform: skewY(-6deg);
		height: 150px;
		bottom: 240px
	} 
	 
	.stripe-bandp { 
		transform: skewY(-6deg);
		height: 140px;
		bottom: 306px;
	} 
	.stripe-bandw { 
		height: 149px;
		bottom: 220px;
	} 
	 /*-------------------*/
	 
	.stripe-bandww {
		height: 200px;
		bottom: 165px;
	}
	
	.faqImage {
		width: 381px;
		height: 186px;
		margin-top: 30px;
	}
	.faqImage h2 {
		font-size: 111px;
		padding-top: 31px;
		padding-left: 16%;
	}
	.faqs {
		margin-top :50px;
	}
	.faqsHedding {
		padding: 0px 20px 0px 15px;
	}
	.faqsHedding h4 {
		font-size: 27px;
		line-height: 33px;
	}
	.faqsContent {
		padding: 1px 15px 1px 15px;
	}
	.stripe-band-help {
		transform: skewY(-6deg);
		height: 104px;
		bottom: 270px;
	}
	.faqsContent p {
		font-size: 18px;
		line-height: 25px;
	}
	.faqRow {
	  padding-top: 1px;
	}
	.faqsContent span {
		font-family: "Myriadpro-Bold";
	}
	.download h6{
		font-size: 24px;
		margin-left: 0px;
	}
	.download img {
		top: 9px;
		left: 190px;
	}
	.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: 17px;
		padding: 6px 6px 0px;
	}
	.sample p {
		padding:6px 46px 1px !important;
	}
	.stripe-band-look {
		transform: skewY(-6deg);
		height: 106px;
		bottom: 235px;
	}
	.faqsSection {
		padding: 0px 0px 100px;
	}
	.lookOutSection {
		padding: 9px 15px 81% 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;
		
	}
	.lookOutImage h2 {
		font-size: 67px;
		padding-top: 52px;
		padding-left: 59px;
	}
	.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: 25px;
	}
	.attendenceOffice p{
		font-size: 15px;
	}
	.attendenceOfficeContent {
		padding:13px 1px;
	}
	.attendenceOffice span{
		font-size: 15px;
	}
	.attendanceOfficeDiv {
		padding-left: 20px;
	}
	.attendanceOfficeDivTwo {
		padding-left: 20px;
		
	}
	.didYouKnow {
		font-size: 50px;
		padding-top: 46px;

	} 
	.didYouKnow h3{
		font-size: 60px; 
		padding-top: 39px;
	}
	.didYouKnowText:first-of-type {
		padding-top: 20px;
	}

	.didYouKnowText h5{
		font-size: 30px;
	}
	.attendenceSupport {
		padding: 20px 0px 90px 0px
		/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.starSun .star {
		  text-align: center;
	}
	.starSun .star img{ 
		max-width: 100%;
		top: 10px;
		left: 10px;
		width: 36%;
	}

	.starSun .sun img{
		max-width: 100%;
		top: 10px;
		left: 32%;
		width: 36%;
	}
	.birdBellCat .bird img{ 
		max-width: 100%;
		top: 10px;
		width: 33%;
		left: 31%;
	}

	.download {
		display: flex;
		justify-content: center;
	}
		
}
@media (min-width: 501px) and (max-width: 540px) {
	.birdBellCat .bell img{
		max-width: 100%;
		top: 196px;
		width: 40%;
		left: 34%;
	}

	.birdBellCat .cat img{
		max-width: 100%;
		top: 397px;
		width: 40%;
		left: 31%;
	}

}
@media (min-width: 541px) and (max-width: 600px) {
	.birdBellCat .bell img{
		max-width: 100%;
		top: 215px;
		width: 40%;
		left: 34%;
	}

	.birdBellCat .cat img{
		max-width: 100%;
		top: 436px;
		width: 40%;
		left: 31%;
	}

}
@media (min-width: 601px) and (max-width: 640px) {
	.birdBellCat .bell img{
		max-width: 100%;
		top: 228px;
		width: 36%;
		left: 37%;
	}

	.birdBellCat .cat img{
		max-width: 100%;
		top: 484px;
		width: 40%;
		left: 33%;
	}

}
@media (max-width: 768px) {
  #mainCarousel {
    margin-top: 0px;
    
  }

@media (min-width: 501px) and (max-width: 640px) { 
.headerMailText {
  text-align: right;
  padding-top: 4px;
  padding-right: 0px;
  font-size: 11px;
  padding-bottom:4px;
}
.headerTelephoneText {
  color: #FFF;
 padding-top: 4px;
  font-size: 11px;
   padding-bottom:4px;
}
	.navbar-brand .title {
		width: 270px;
		font-size: 22px;
	}
	.lightPurpleTopRegion {
		
	}

	.navbar-brand .title {
	  top: 47%;
      left: 112%;
      font-size: 18px;
	}
	.logo-large-screen {
		width: 70px;
		height: 65px;
	}
	#header {
		
	}
	#logo img {
		max-height: 80px;
		width: auto;
	}
	.headerNav {
		height: 70px;
	}
	.navbar-brand {
		height: 75px;
	}
	.bannerContainer {
		margin-top: 0px;
	}
	.logoHeader {
		width: 20%;
		margin-left: 20px;
		padding: 20px 14px 30px 20px;
	}
	.logoTitle {
	  padding-top: 5%;
	}
	.attendanceImage {
		width: 100%;
		height: 75px;
		position: absolute;
		top: 47%;
	}
	.attendanceTitle h3{
		font-size: 24px;
		margin-top: 5px;
		margin-bottom: 2px;
	}
	.attendanceTitle p{
		font-size: 13px;
		line-height: 14px;
	}
	.attendanceTitle {
		padding: 5px 0px 45px 6px;
	}
	.carousel-indicators {
		bottom: 22px;
	}
	.attendenceCount h3{
		font-size: 41px;
		line-height: 55px;
	}

	.attendenceCount {
		padding-left: 0px;
	}
	.attendenceContent {
		margin-top: 0px;
	}
	
	.attendenceContent p{
		font-size: 17px;
		line-height: 29px;
	}
	
	.attendenceCountImage img {
		margin-top: 10px;
		width: 37%;
	}
	.attendenceCountImage {
		text-align: center !important;
	}
	.attendenceCount {
		padding-left: 15px;
	}
	#mainCarousel {
		margin-bottom: 0px;
		margin-top: 0px;
	}
	.navbar-brand .image {
		z-index: 0;
		padding: 0px;
		background-color: transparent;
		width: 70px;
	}
	.attendenceLookSection {
		    padding: 135px 0px 90px;
		clip-path: polygon(0px 5%, 100% 0px, 100% 97%, 0 100%);-webkit-clip-path: polygon(0px 5%, 100% 0px, 100% 97%, 0 100%);
	}
	.attendenceLook {
		background-color:white;
		padding-left: 15px;
		width: 90%;
	}
	.attendenceLookLike {
		padding-top: 170px;
		padding-left: 10px;
		padding-right: 14px;
		margin-bottom: 20px;
	}
	.attendenceLookImageColumn {
		position: relative;
	}


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

	.attendenceLookHedding {
		top: 36px;
		left: 53px;
		padding-right: 20px;
	}
	.attendenceLookHedding h3{
		font-size: 49px;
	}
	.attendenceLookLike p {
		font-family: "Myriadpro-Regular";
		font-size: 18px;
		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{
		padding: 5px;
		width:97%;
	}

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

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

	.attendenceEightyFive h4{
		font-size: 27px;
		margin: 5px;
		padding: 0px;
	}
	.attendenceEightyFiveCount h5{
		font-size: 20px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceEightyFiveCount{
		padding: 5px;
		width:85%;
	}	
	.howAreWeDoing { 
		position:relative; 
		padding: 9% 0px 90px 0px;
	}
	
	.howAreWe h3{
		font-size: 30px;
		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:42px 0px 150px 0px ;
		/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.attendenceSupport h2{
		font-size: 35px;
	}
	.expectContent {
		padding: 85px 23px 0px;
		
	}
	
	.stripe-band-how { 
		transform: skewY(-6deg);
		
		height: 130px;
		bottom: 272px;
	} 
	 
	 .stripe-bandp { 
		transform: skewY(-6deg);
		height: 75px;
		bottom: 319px;
	 } 
	 
	.stripe-bandw { 
		height: 138px;
		bottom: 215px;
	} 
 /*-------------------*/
 
	 .stripe-bandww { 
		height: 168px;
		bottom: 192px;
	 } 
	
	.stripe-band-help {
		height: 93px;
		bottom: 87%
	}
	.faqImage {
		width: 331px;
		height: 162px;
		margin-top: 35px;
	}
	.faqImage h2 {
		font-size: 100px;
		padding-top: 25px;
		padding-left: 55px;
	}
	.faqs {
		margin-top :50px;
	}
	.faqsHedding {
		padding: 0px 20px 0px 15px;
	}
	.faqsHedding h4 {
		font-size: 24px;
		line-height: 35px;
	}
	.faqsContent {
		padding: 1px 15px 0px 15px;
	}
	 .faqRow {
		padding-top: 10px;
	  }
	.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 85px;
	}
	.stripe-band-look {
		height: 82px;
		bottom: 250px;
	}
	.lookOutSection {
		padding: 3px 15px 96% 15px;
		position: relative;
	}
	.lookOutSection h3{
		font-size: 28px;
		padding: 15px 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;
		
	}
	.lookOutImage h2 {
		font-size: 46px;
		padding-top: 50px;
	}
	.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: 15px;
	}
	.attendenceOffice p{
		font-size: 15px;
	}
	.attendenceOfficeContent {
		padding:13px 1px;
	}
	.attendenceOffice span{
		font-size : 15px;
	}
	.attendanceOfficeDiv {
		padding-left: 20px;
	}
	.attendanceOfficeDivTwo {
		padding-left: 20px;
		
	}
	.didYouKnow {
		width: 330px;
		height: 125px;

	} 
	.didYouKnow h3{
		font-size: 38px; 
		padding-top: 39px;
	}
	.didYouKnowText:first-of-type {
		padding-top:25px;
	}

	.didYouKnowText h5{
		font-size: 25px;
	}
	.attendenceSupport {
		padding: 20px 0px 80px 0px;
		/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.starSun .star {
		  text-align: center;
	}
	.starSun .star img{ 
		max-width: 100%;
		top: 10px;
		left: 10px;
		width: 40%;
	}

	.starSun .sun img{
		max-width: 100%;
		top: 10px;
		left: 33%;
		width: 40%;
	}
	.birdBellCat .bird img{ 
		max-width: 100%;
		top: 10px;
		width: 36%;
		left: 34%;
	}
	.download {
		display: flex;
		justify-content: center;
	}

	
	
}

@media (min-width: 701px) and (max-width: 767px) {
	.birdBellCat .bell img{
		max-width: 100%;
		top: 310px;
		width: 37%;
		left: 34%;
	}

	.birdBellCat .cat img{
		max-width: 100%;
		top: 587px;
		width: 37%;
		left: 34%;
	}

}
@media (min-width: 641px) and (max-width: 700px) {
	.birdBellCat .bell img{
		max-width: 100%;
		top: 287px;
		width: 43%;
		left: 34%;
	}

	.birdBellCat .cat img{
		max-width: 100%;
		top: 582px;
		width: 43%;
		left: 32%;
	}

}

@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;
	}
	.attendanceImage {
		width: 100%;
		height: 118px;
		position: absolute;
		top: 43%;
	}
	.carousel-indicators {
		bottom: 30px;
	}
	.attendanceTitle h3{
		font-size: 31px;
		margin-top: 0px;
		margin-bottom: 3px;
	}
	.attendanceTitle p{
		font-size: 20px;
		line-height: 21px;
	}
	.attendanceTitle {
		padding: 14px 20px 0px 20px;
	}
	.attendenceCount h3{
		font-size: 47px;
		line-height: 64px;
	}
	.attendenceRight {
	  padding-right: 20px;
	}
	.attendenceCount {
		padding-left: 15px;
	}
	.attendenceContent p{
		font-size: 19px;
		line-height: 33px;
	}
	.attendenceContent {
		margin-top: 25px;
	}
	
	.attendenceCountImage {
		text-align: center !important;
	}
	.attendenceCountImage img {
		width: 34%;
		margin-top: 0px;
	}
	.attendenceCount {
		padding-left: 15px;
	}
	#mainCarousel {
		margin-bottom: 0px;
		margin-top: 0px;
	}
	.attendenceLookSection {
		padding: 150px 0px 138px;
		clip-path: polygon(0px 5%, 100% 0px, 100% 94%, 0 100%);
		-webkit-clip-path: polygon(0px 5%, 100% 0px, 100% 94%, 0 100%);
	}
	.attendenceLook {
		background-color:white;
		width: 90%;
		padding-left: 15px;
	}
	.attendenceLookLike {
		padding-top: 200px;
		padding-left: 10px;
		padding-right: 14px;
		padding-bottom: 0px;
	}
	.attendenceLookImageColumn {
		position: relative;
	}
	.attendenceRight {
		padding-right: 15px;
	}

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

	.attendenceLookHedding {
		position: absolute;
		top: 49px;
		left: 65px;
		padding-right: 20px;
	}
	.attendenceLookHedding h3{
		font-size: 51px;
	}
	.attendenceLookLike p {
		font-size: 20px;
		line-height: 33px;
	}
	.attendencePercentage {	
		margin-top: 10px;
		padding: 8px;
		
	}
	.attendancePercentageContainer {
		width: 90%;
	}

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

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

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

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

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

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

	} 
	.howAreWe h3{
		font-size: 45px;
		padding-top: 64px;
	}
	.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: 20px 0px 90px 0px;
	/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.attendenceSupport h2{
		font-size: 31px;
	}
	.expectContent {
		padding: 85px 23px 0px;
		
	}
	
	.stripe-band-how { 
		transform: skewY(-6deg);
		height: 146px;
		bottom: 259px;
	} 
 
	.stripe-bandp { 
		transform: skewY(-6deg);
		height: 78px;
		bottom: 299px;
	} 
 
	.stripe-bandw { 
		
		height: 149px;
		bottom: 196px;
	} 
 /*-------------------*/
 
	.stripe-bandww { 
		height: 184px;
		bottom: 169px;
	} 
	
	.faqImage {
		width: 356px;
		height: 181px;
		margin-top: 30px;
	}
	.faqImage h2 {
		font-size: 105px;
		padding-top: 35px;
		padding-left: 15%;
	}
	.faqs {
		margin-top :50px;
	}
	.stripe-band-help {
		transform: skewY(-6deg);
		background: #ffffff;
		height: 84px;
		bottom: 273px;
	}
	.faqRow {
	  padding-top: 0px;
	}
	.faqsHedding {
		padding: 0px 20px 0px 15px;
	}
	.faqsHedding h4 {
		font-size: 24px;
		line-height: 35px;
	}
	.faqsContent {
		padding: 1px 15px 1px 15px;
	}

	.faqsContent p {
		font-size: 17px;
		margin-top: -5px;
		line-height: 25px;
	}
	.faqsContent span {
		font-family: "Myriadpro-Bold";
	}
	.download h6{
		font-size: 23px;
		margin-left: 0px;
	}
	.download img {
		margin-top: 17px;
	}
	.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: 2px 15px 104% 15px;
		position: relative;
	}
	.lookOutSection h3{
		font-size: 33px;
		padding: 1px 15px 1px;
	}
	.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;
		
	}
	.lookOutImage h2 {
		font-size: 55px;
	}
	.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: 16px;
	}
	.attendenceOffice p{
		font-size: 14px;
	}
	.attendenceOfficeContent {
		padding:13px 1px;
	}
	.attendenceOffice span{
		font-size : 14px;
	}
	.attendanceOfficeDiv {
		padding-left: 20px;
	}
	.attendanceOfficeDivTwo {
		padding-left: 20px;
		
	}
	.didYouKnow {
		width: 330px;
		height: 125px;

	} 
	.didYouKnow h3{
		font-size: 38px; 
		padding-top: 39px;
	}
	.didYouKnowText:first-of-type {
		padding-top:15px;
	}

	.didYouKnowText h5{
		font-size: 29px;
	}
	.attendenceSupport {
		padding: 20px 0px 90px 0px;
		/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.starSun .star {
		  text-align: center;
	}
	.starSun .star img{ 
		max-width: 100%;
		top: 10px;
		left: 10px;
		width: 50%;
	}

	.starSun .sun img{
		max-width: 100%;
		top: 10px;
		left: 30%;
		width: 50%;
	}
	.birdBellCat .bird img{ 
		max-width: 100%;
		top: 10px;
		width: 44%;
		left: 31%;
	}
	.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: 476px) and (max-width: 500px) { 
    .download img {
		margin-top: 17px;
	}
	
}
@media (min-width: 450px) and (max-width: 475px) { 
    .download img {
		margin-top: 17px;
	}
}
@media (min-width: 401px) and (max-width: 449px) { 
    .download img {
		margin-top: 17px;
	}
}
@media (min-width: 377px) and (max-width: 400px) { 
    .download img {
		margin-top: 17px;
	}
}

@media (min-width: 377px) and (max-width: 500px) {
	.headerMailText {
	  text-align: right;
	  font-size: 9px;
	  padding:3px 0px;
	  
	}
	.headerTelephoneText {
		color: #FFF;
		padding:4px 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;
	}
	.logoTitle {
	  padding-top: 6%;
	}
	.bannerContainer {
		margin-top: 0px;
	}
	.logoHeader {
		width: 28%;
		padding: 20px 20px 20px 24px;
	}
	.logo-large-screen {
		width: 55px;
		height: 55px;
	}
	.attendanceImage {
		width: 100%;
		height: 71px;
		position: absolute;
		top: 39%;
	}
	.attendanceTitle h3{
		font-size: 18px;
		margin-top: 3px;
		margin-bottom: 2px;
	}
	.attendanceTitle p{
		font-size: 13px;
		line-height: 14px;
	}
	.carousel-indicators {
		bottom: 5px;
	}
	.attendanceTitle {
		padding: 5px 0px 45px 6px;
	}
	.attendenceCount h3{
		font-size: 28px;
		line-height: 36px;
	}
	.attendenceRight {
		padding-right: 15px;
	}
	.attendenceCount {
		padding-left: 0px;
	}
	.attendenceContent {
		margin-top: 0px;
	}
	.attendenceRight {
	  padding-right: 20px;
	}
	.attendenceContent p{
		font-size: 15px;
		line-height: 23px;
	}
	
	.attendenceContentPara {
		margin-top: 7px;
	}
	.attendenceCountImage {
		text-align: center !important;
	}
	.attendenceCountImage img {
		margin-top: 10px;
		width: 50%;
	}
	#mainCarousel {
		margin-bottom: 0px;
		margin-top:0px;
	}
	.attendenceCount {
		padding-left: 15px;
	}
	.attendenceLookSection {
		padding: 115px 0px 20%;
		clip-path: polygon(0px 3%, 100% 0px, 100% 96%, 0 100%);
		-webkit-clip-path: polygon(0px 3%, 100% 0px, 100% 96%, 0 100%);
	}
	.attendenceLook {
		background-color:white;
		width: 90%;
		padding-left: 15px;
	}
	.attendenceLookLike {
		padding-top: 165px;
		padding-left: 10px;
		padding-right: 14px;
		margin-bottom: 0px;
	}
	.attendenceLookImageColumn {
		position: relative;
	}

	.attendenceLookImage {
		height: 197px;
		position: absolute;
		width: 375px;
		top: -55px;
		left: -16px;
	}
	.attendenceRight {
	  padding-right: 20px;
	}
	.attendenceLookHedding {
		position: absolute;
		top: 36px;
		left: 41px;
		padding-right: 20px;
	}
	.attendenceLookHedding h3{
		font-size: 42px;
	}
	.attendenceLookLike p {
		font-size: 15px;
		line-height: 24px;
	}
	.attendencePercentage {	
		margin-top: 8px;
		padding: 10px;
		
	}
	.attendancePercentageContainer {
		width: 90%;
	}

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

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

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

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

	.attendenceNinety h4{
		font-size: 23px;
		margin: 3px;
		padding: 0px;
	}
	.attendenceNinetyCount h5{
		font-size: 18px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceNinetyCount{
		padding: 8px;
		width:90%;
	}

	.attendenceEightyFive h4{
		font-size: 23px;
		margin: 3px;
		padding: 0px;
	}
	.attendenceEightyFiveCount h5{
		font-size: 18px;
		margin: 0px;
		padding: 0px;
	}
	.attendenceEightyFiveCount{
		padding: 8px;
		width:85%;
	}
	.howAreWeDoing { 
		position:relative; 
		padding: 7% 0px 70px 0px;
	}
	.howAreWe {
	  width: 326px;
	  height: 89px;
	}
	 
	.howAreWe h3{
		font-size: 23px;
		padding-top: 32px;
	}
	.howAreWeDiv {
		padding-top: 10px;
	}
	.howAreWeContainer {
		height: 70px;
		padding: 0px 10px;
		width: 80%;
		margin: 8px auto;
	}
	.year h2{
		font-size: 28px;
		float: left;
	}
	.percent h2{
		font-size : 28px;
		float:right;
	}
	/*====*/
	.attendenceSupport {
		padding: 46px 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;
	}
	
	.stripe-band-how { 
		transform: skewY(-6deg);
		
		height: 102px;
		bottom: 283px;
	} 
	 
	.stripe-bandp { 
		transform: skewY(-6deg);
		height: 80px;
		bottom: 304px;
	} 
	.stripe-bandw { 
		height: 125px;
		bottom: 211px;
	} 
 /*-------------------*/
 
	.stripe-bandww { 
		height: 160px;
		bottom: 184px;
	} 
	
	
	.faqImage {
		width: 297px;
		height: 148px;
		margin-top: 0px;
	}
	.faqImage h2 {
		font-size: 75px;
		padding-top: 32px;
		padding-left: 55px;
	}
	.faqs {
		margin-top :50px;
	}
	.faqRow {
		padding-top: 5px;
	}
	.faqDiv {
		margin-top: 0px;
	}
	.stripe-band-help {
		transform: skewY(-6deg);
		background: #ffffff;
		height: 56px;
		bottom: 283px;
	}
	.faqsHedding {
		padding: 0px 20px 0px 15px;
	}
	.faqsHedding h4 {
		font-size: 22px;
		line-height: 27px;
	}
	.faqsContent {
		padding: 0px 15px 10px 15px;
	}

	.faqsContent p {
		font-size: 14px;
		line-height: 21px;
	}
	.faqsContent span {
		font-family: "Myriadpro-Bold";
	}
	.download h6{
		font-size: 21px;
		margin-left: 0px;
	}
	
	.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: 16px;
		padding: 6px 30px 0px;
	}
	.sample p {
		padding: 6px 32% 1px !important;
	}
	.stripe-band-look {
		transform: skewY(-6deg);
		height: 60px;
		bottom: 257px;
		background-color: #ffffff;
	}
	.lookOutSection {
		padding: 0px 15px 103% 15px;
		position: relative;
	}
	.lookOutSection h3{
		font-size: 23px;
		padding: 20px 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;

	}
	.lookOutCardImage img{
		
	}
	.lookOutImage {
		height: 141px;
		width: 327px;
		top: 0px;
		left: 10%;
	}
	.lookOutImage h2 {
		font-size: 45px;
		padding-top: 13%;
		padding-left: 16%;
	}
	.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: 13px;
	}
	.attendenceOffice p{
		font-size : 12px;
	}
	.attendenceOfficeContent {
		padding:8px 1px;
	}
	.attendenceOffice span{
		font-size : 13px;
	}
	.attendanceOfficeDiv {
		padding-left: 20px;
	}
	.attendanceOfficeDivTwo {
		padding-left: 20px;
		
	}
	.faqsSection {
	  padding: 0px 0px 65px;
	}
	.didYouKnow {
		width: 330px;
		height: 125px;

	} 
	.didYouKnow h3{
		font-size: 38px; 
		padding-top: 39px;
	}
	.didYouKnowText:first-of-type {
		padding-top:5px;
	}

	.didYouKnowText h5{
		font-size: 20px;
	}
	.attendenceSupport {
		padding: 20px 0px 70px 0px;
		/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.starSun .star {
		  text-align: center;
	}
	.starSun .star img{ 
		max-width: 100%;
		top: 10px;
		 left: -1px; 
	}

	.starSun .sun img{
		max-width: 100%;
		top: 0px;
		left: 75px;
	}
	.birdBellCat .bird img{ 
		max-width: 100%;
		top: 0px;
		width: 50%;
		left: 88px; 
	}

	.birdBellCat .bell img{
		max-width: 100%;
		top: 166px;
		width: 50%;
		left: 28%;
	}

	.birdBellCat .cat img{
		max-width: 100%;
		top: 353px;
		width: 50%;
		left: 28%;
	}
	.download {
		display: flex;
		justify-content: center;
	}
	
}
@media (min-width: 377px) and (max-width: 421px) {
	.birdBellCat .bell img{
		max-width: 100%;
		top: 166px;
		width: 50%;
		left: 28%;
	}

	.birdBellCat .cat img{
		max-width: 100%;
		top: 353px;
		width: 50%;
		left: 28%;
	}

}

@media (min-width: 422px) and (max-width: 502px) {
	.birdBellCat .bell img{
		max-width: 100%;
		top: 185px;
		width: 41%;
		left: 31%;
	}

	.birdBellCat .cat img{
		max-width: 100%;
		top: 389px;
		width: 44%;
		left: 28%;
	}

}
@media screen and (max-width: 376px) {
	header .navbar-nav > li > a.dropdown-toggle {
		
		padding-top: 6px;
	}
	.headerMailText {
	  text-align: right;
	  font-size: 9px;
	  padding:3px 0px;
	  
	}
	.download {
		display: flex;
		justify-content: center;
	}
	.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;
	}
	 .attendanceImage {
		width: 100%;
		height: 75px;
		top: 38%;
	  }
	.attendanceTitle h3 {
		font-size: 15px;
		margin-top: 12px;
		margin-bottom: 3px;
	  }
	.attendanceTitle p{
		font-size: 12px;
		line-height: 13px;
	}
	.carousel-indicators {
		bottom: 5px;
	}
	.attendanceTitle {
		padding: 0px 0px 5px 6px;
	}
	.attendenceCount h3{
		font-size: 25px;
		line-height: 34px;
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.attendenceContent {
		margin-top: 4px !important;
	}
	.attendenceCount {
		padding-left: 15px;
	}
	#mainCarousel {
		margin-bottom: 0px;
		margin-top:0px;
	}
	.attendenceContent p{
		font-size: 15px;
    line-height: 24px;
	}
	.attendenceRight {
		padding-right: 15px;
	}
	.attendenceCountImage {
		text-align: center !important;
	}
	.attendenceCountImage img {
		margin-top: 10px;
		width: 72%;
		
	}
	.attendenceLookSection {
		clip-path: polygon(0px 3%, 100% 0px, 100% 97%, 0 100%);
		-webkit-clip-path: polygon(0px 3%, 100% 0px, 100% 97%, 0 100%);
		padding: 180px 0px 17%;
	}
	.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: 169px;
		position: absolute;
		width: 311px;
		top: -130px;
		left: 0px;
	}

	.attendenceLookHedding {
		position: absolute;
		top: 31px;
		left: 41px;
		padding-right: 20px;
	}
	.attendenceLookHedding h3{
		font-family: "riffic";
		font-size: 38px;
		color: #ffffff;
		
	}
	.attendenceLookLike p{
		font-size: 15px;
		line-height: 22px;
	}
	.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%;
	}
	.howAreWeDoing {
		position:relative; 
		padding: 6% 0px 60px 0px;
	}
	.howAreWe {
		width: 275px;
		height: 78px;
	}
	.howAreWe h3{
		font-size: 21px;
		padding-top: 26px;
	}
	.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: 0px 0px 80px 0px;
		/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
	}
	.attendenceSupport h2{
		font-size: 19px;
	}
	.expectContent {
		padding: 58px 15px 0px;
	}
	
	.stripe-band-how { 
		transform: skewY(-6deg);
		height: 91px;
		bottom: 289px;
	} 
	 
	.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: 70px;
		bottom: 24px;
	} 
	 /*-------------------*/
	 
	.stripe-bandww { 
		height: 114px;
		bottom: -27px;
	} 
	.roll-containerww {
		position: absolute;
		height: 50px;
		width: 100%;
		left: 0;
		z-index: 10;
	}
	
	.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: 61px;
		padding-top: 27px;
		padding-left: 50px;
	}
	.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: 20px;
        line-height: 25px;
	}
	.faqsContent {
		padding: 0px 15px 0px 15px;
	}
	.faqRow {
		padding-top: 8px;
	 }

	.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: 15px;
	}
	.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 52px 0px;
	}
	.sample p {
		padding: 6px 90px 1px !important;
	}
	.lookOutSection {
		padding: 2px 15px 114%;
		position: relative;
	}
	.lookOutSection h3{
		font-size: 21px;
		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;
	}
	.lookOutImage h2 {
		font-size: 39px;
        padding-top: 33px;
        padding-left: 32px;
	}
	.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: 11px;
	}
	.attendenceOffice p{
		font-size: 11px;
	}
	.attendenceOfficeContent {
		padding: 0px 1px 2px;
	}
	.attendenceOffice span{
		font-size : 12px;
	}
	.attendanceOfficeDiv {
		padding-left: 20px;
	}
	.attendanceOfficeDivTwo {
		padding-left: 20px;
		
	}
	.faqsSection {
	  padding: 0px 0px 50px;
	}
	.stripe-band-look {
	  height: 50px;
	  bottom: 264px;
	}
	
.didYouKnow {
	width: 330px;
	height: 125px;

} 
.didYouKnow h3{
	font-size: 38px; 
	padding-top: 39px;
}
.didYouKnowText:first-of-type {
	padding-top:5px;
}

.didYouKnowText h5{
	font-size: 18px;
}
.attendenceSupport {
	padding: 20px 0px 60px 0px;
	/* clip-path: polygon(0px 0%, 100% 0px, 100% 93%, 0 100%); */
}
.starSun .star {
	  text-align: center;
}
.starSun .star img{ 
	max-width: 100%;
    top: 10px;
    left: 0px;
}

.starSun .sun img{
	max-width: 100%;
    top: 10px;
    left: 75px;
}
.birdBellCat .bird img{ 
	max-width: 100%;
    top: 10px;
    width: 50%;
    left: 86px;
}

.birdBellCat .bell img{
	max-width: 100%;
    top: 170px;
    width: 50%;
    left: 91px;
}

.birdBellCat .cat img{
	max-width: 100%;
    top: 347px;
    width: 50%;
    left: 82px;
}
.carousel-indicators {
    bottom: 5px;
}
	
}
  
    .iPad .attendenceLookSection {
        padding: 130px 15px 160px;
        -webkit-clip-path: polygon(0px 5%, 100% 0px, 100% 93%, 0 100%);
    }
	.iPad #mainCarousel {
		-webkit-clip-path: polygon(0 0%, 100% 0, 100% 87%, 0 100%);
	}
	.iPad .attendenceLookSection { 
		background-attachment:scroll;
	}
	.iPad .carousel-indicators {
		bottom: 23px;
	}