html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* end of css reset*/

/*header*/

body{
    color: #425b76;
    font-size: 16px;
    font-family: azo-sans-web, sans-serif;
    font-weight: 400;
}

header{
    position: sticky;
    top: 0;
    background-color: white;
    width: 100%;
    z-index: 3;
}

.header-content{
    margin: 0 auto;
    padding: 8px 18px 0 18px;
    width: 100%;
    max-width: 1320px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
}

nav{
    display: flex;
    align-items: center;
}

nav section{
    display: flex;
}

nav section a{
    margin-right: 32px;
    color: #496b84;
    opacity: 0.8;
    text-decoration: none;
    transition: 0.3s ease;
    font-family: azo-sans-web, sans-serif;
    font-weight: 900;
}

nav section a:hover{
    color: #0067be;
}

button{
    background-color: #0db88f;
    padding: 17px 20px 12px 20px;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 8px 24px #0e293740;
    color: white;
    font-size: 18px;
    height: 60px;
    margin-left: 64px;
    cursor: pointer;
    transition: 0.1s ease;
    font-family: azo-sans-web, sans-serif;
    font-weight: 900;
}

button:hover{
    background-color: #07a881;
    box-shadow: 0 8px 32px #0e293740;
}

header::before{
    background: url(https://39646145.fs1.hubspotusercontent-na1.net/hubfs/39646145/CodeNinjas%20-%20Marketting%20Website/Gradients/header-gradient.svg);
    background-size: 101%;
    height: 28px;
    content: "";
    left: 0;
    margin-bottom: -25px;
    margin-top: 10px;
    width: 100%;
    position: absolute;
    top: 55px;
    background-repeat: no-repeat;
    z-index: -1;
}

/*slideshow*/

.slideshow-container {
    position: relative;
    max-width: 100%;
    height: 85vh; 
    margin: auto;
    overflow: hidden;
    border-radius: 8px;
    display: flex;
}


.slides {
    display: flex;
    width: 100%; 
    height: 100%;
    animation: slide 10s infinite; 
}


.slide {
    flex: 1 0 100%;
    height: 100%;
    overflow: hidden;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


@keyframes slide {
    0% { transform: translateX(0); }
    33% { transform: translateX(-100%); }
    66% { transform: translateX(-200%); }
}

/*body*/

@media screen and (min-width:601px) { 

button{
    padding: 15px;
    border: none;
    background-color: #10bc9c;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 800;
    font-family: "Merriweather Sans";
    text-transform: uppercase;
    color: aliceblue;   
    position: relative;
}


    
button, p, h1, h2, h3, h4, a{
    font-family: Arial, sans-serif;
    font-weight: bold;
}
    
.blueb {
     background-color: rgb(24, 122, 191);
     margin: 0;
     position: absolute;
     top: 115%; 
     left: 42.8%;
     transform: translate(-50%, -50%);
}

.greenb{
    position: absolute;
    top: 115%; 
    left: 52.8%;
    transform: translate(-50%, -50%);
}

.main-content {
    padding: 20px 0;
}

.Why {
    grid-column: 2/4;
    grid-row: 3/4;
    background: linear-gradient(217deg, rgb(255, 255, 255), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(195, 248, 241, 0.74), rgba(201, 255, 201, 0) 70.71%),
            linear-gradient(336deg, rgb(213, 199, 236), rgba(0,0,255,0) 70.71%);
    padding-top: 10%;
    padding-bottom: 5%;
    text-align: center;
}

.Why h1 {
    font-size: 32px;
    font-weight: 1000;
    padding-bottom: 10px;
    text-transform: uppercase;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif
}

.Why p {
    font-size: 16px;
    color: #506690;
    padding-left: 10%;
    padding-right: 10%;
    line-height: 20px;
    padding-bottom: 3%;
    font-family: Arial, Helvetica, sans-serif
}

.Why h3 {
    font-size: 18px;
    color: #506690;
    font-family: Arial, Helvetica, sans-serif
}

.Why h4 {
    font-size: 16px;
}

.blue {
    color: rgb(24, 122, 191);
}

.Mobile {
    display: flex;
    font-size: 300px;
}

.footer-logo-wrapp{
    display: flex;
    align-items: center;
    justify-content: center;
}

.video1{
    border-radius: 30px;
}

h3 {
    font-size: 14px;
    line-height: 2em;
    text-align: cent;
    font-family: Arial, Helvetica, sans-serif;
}

h2 {
    font-size: 18px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}

h4 {
    padding-top: 20px;
    color: rgb(33, 158, 200);
    font-size: 10px;
}

.RightNinja {
    grid-column: 1/2;
    grid-row: 3/4;
    text-align: left;
    background: url(photos/Why-codeNinja-Char-2.png) no-repeat;
    background-position: center -75px;
    margin-top: 3%;
    background-size: 300px;
    width: 250px;
}

.LeftNinja {
    grid-column: 4/5;
    grid-row: 3/4;
    text-align: right;
    background: url(photos/Why-codeNinja-Char-1.png) no-repeat;
    background-position: center -70px;
    margin-top: 3%;
    background-size: 250px;
    width: 250px;
}

.video1{
    width: 100%;
    max-width: 850px;
    height: auto;
}

.S1 {
    grid-column: 2/4;
    grid-row: 3/4;
    background-color: white;
    padding-top: 10%;
    text-align: center;
}

.S1 h1 {
    font-size: 40px;
    padding-bottom: 10px;
    text-transform: uppercase;
}

.S1 h2 {
    font-size: 24px;
    text-transform: uppercase;
}

.S1 p {
    font-size: 12px;
    color: gray;
    padding-left: 15%;
    padding-right: 15%;
    line-height: 20px;
    padding-bottom: 3%;
}

.S1 h3 {
    font-size: 16px;
    color: rgb(93, 93, 140);
}

.S1 h4 {
    font-size: 12px;
}

.S1 iframe {
    padding-bottom: 60px;
}

.RightNinja {
    grid-column: 1/2;
    grid-row: 3/4;
    text-align: left;
    background: url(photos/Why-codeNinja-Char-2.png) no-repeat;
    background-position: center -75px;
    margin-top: 3%;
    background-size: 300px;
    width: 250px;
}

.c

.S1 nav {
    padding-top: 5%;
    padding-bottom: 5%;
}

	
.S2 {
    grid-column: 3/5;
    grid-row: 4/5;
    background-color: rgb(65, 65, 255);
    color: white;
    text-align: left;
    padding-right: 65%;
    padding-top: 10%;
    padding-bottom: 10%;
}

.create {
    font-size: 48px;
    color: lightblue;
}

.S2 h1 {
    font-size: 20px;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
}

.S2 h4 {
    font-size: 12px;
    text-align: left;
    color: lightblue;
}

.S2 p {
    font-size: 13px;
    text-align: left;
    line-height: 15px;
}

.SS2 {
    grid-column: 1/3;
    grid-row: 4/5;
    background-color: rgb(65, 65, 255);
    text-align: right;
    padding-left: 45%;
    padding-top: 10%;
    padding-bottom: 10%;
}

.SS2 img {
    max-width: 400px;
}

.S3 {
    grid-column: 1/3;
    grid-row: 5/6;
    background-color: purple;
    color: white;
    text-align: left;
    padding-left: 65%;
    padding-top: 10%;
    padding-bottom: 10%;
}

.JR {
    font-size: 48px;
    color: rgb(193, 86, 255);
}

.S3 h1 {
    font-size: 20px;
    text-align: left;
    padding-top: 10px;
    padding-bottom: 10px;
}

.S3 h4 {
    font-size: 12px;
    text-align: left;
    color: rgb(193, 86, 255);
}

.S3 p {
    font-size: 13px;
    text-align: left;
    line-height: 18px;
}

.SS3 {
    grid-column: 3/5;
    grid-row: 5/6;
    background-color: purple;
    text-align: left;
    padding-right: 45%;
    padding-top: 10%;
    padding-bottom: 10%;
}

.SS3 img {
    max-width: 400px;
}

.S2 {
    grid-column: 3/5;
    grid-row: 4/5;
    background-color: rgb(65, 65, 255);
    color: white;
    text-align: center;
    padding-top: 10%;
    padding-bottom: 10%;
}

.create {
    font-size: 48px;
    color: lightblue;
}

.S2 h1 {
    font-size: 20px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.S2 h4 {
    font-size: 12px;
    text-align: center;
    color: lightblue;
}

.S2 p {
    font-size: 13px;
    text-align: center;
    line-height: 15px;
}

.SS2 {
    grid-column: 1/3;
    grid-row: 4/5;
    background-color: rgb(65, 65, 255);
    text-align: center;
    padding-top: 10%;
    padding-bottom: 10%;
}

.SS2 img {
    max-width: 400px;
}

.S3 {
    grid-column: 1/3;
    grid-row: 5/6;
    background-color: purple;
    color: white;
    text-align: center;
    padding-top: 10%;
    padding-bottom: 10%;
}

.JR {
    font-size: 48px;
    color: rgb(193, 86, 255);
}

.S3 h1 {
    font-size: 20px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.S3 h4 {
    font-size: 12px;
    text-align: center;
    color: rgb(193, 86, 255);
}

.S3 p {
    font-size: 13px;
    text-align: center;
    line-height: 18px;
}

.SS3 {
    grid-column: 3/5;
    grid-row: 5/6;
    background-color: purple;
    text-align: center;
    padding-top: 10%;
    padding-bottom: 10%;
}

.SS3 img {
    max-width: 400px;
}

.S4 {
    grid-column: 3/5;
    grid-row: 6/7;
    background-color: rgb(51, 138, 138);
    color: white;
    text-align: center;
    padding-top: 10%;
    padding-bottom: 10%;
}

.camps {
    color: rgb(33, 218, 218); 
    font-size: 48px;
}

.S4 h1 {
    font-size: 20px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.S4 h4 {
    font-size: 12px;
    text-align: center;
    color: rgb(33, 218, 218);
}

.S4 p {
    font-size: 13px;
    text-align: center;
    line-height: 15px;
}

.SS4 {
    grid-column: 1/3;
    grid-row: 6/7;
    background-color: rgb(51, 138, 138);
    text-align: center;
    padding-top: 10%;
    padding-bottom: 10%;
}

.SS4 img {
    max-width: 400px;
}

.S5 {
    grid-column: 1/5;
    grid-row: 7/8;
    background: url(photos/Natureback.png) no-repeat;
    background-size: cover;
    background-position: unset;
    text-align: center;
}

.S5 iframe {
    margin-top: 50px;
    width: 600px;
    padding-bottom: 150px;
}

.s55 {
    width: 100%;
    margin-bottom: -50px;
    height: auto;
}


.SS5{
    grid-column: 1/5;
    grid-row: 8/9;
    padding-top: 40px;
    padding-bottom: 100px;
    line-height: 20px;
    text-align: center;
}

.SS5 h4 {
    color: lightblue;
    font-size: 12px;
}

.SS5 p {
    margin-left: 35%;
    margin-right: 35%;
    padding-bottom: 20px;
}

.S6 {
    grid-column: 1/5;
    grid-row: 9/10;
    background: url(photos/Gradiant\ Background.webp) no-repeat;
    background-size: cover;
    text-align: center;
}

.S6 h4 {
    color: rgb(0, 191, 255);
    margin-left: 30%;
    margin-right: 30%;
    line-height: 25px;
}

.S6 p {
    color: white;
    margin-left: 30%;
    margin-right: 30%;
    line-height: 25px;
    padding-bottom: 20px;
}

.S6 .l1 {
    margin-top: -15px;
}

.S6 .pro {
    max-width: 100%;
}

.S6 .ninjas {
    max-width: 1200px;
}

.S7 {
    grid-column: 1/5;
    grid-row: 10/11;
    padding-top: 40px;
    background-color: white;
    text-align: center;
}

.S7 h1{
    line-height: 25px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.S7 .Loc {
    color: rgb(78, 78, 78);
    font-size: 30px;
}

.S7 .NY {
    color: rgb(0, 143, 191);
    font-size: 40px;
}

.S7 button {
    margin-bottom: 20px;
}

.S7 img {
    max-width: 250px;
    margin-bottom: -5px;
}

.s8 {
 width: 100%;
}

.s81{
    width: 100%;
}

.S9 {
    grid-column: 1/5;
    grid-row: 13/14;
    background: url(photos/Kid\ background.webp);
    background-size: cover;
    background-position: center;
    text-align: center;
    padding-top: 150px;
    padding-bottom: 200px;
    margin-bottom: -100px;
}

.S9 h1 {
    font-size: 48px;
}

.Afoot {
    grid-column: 1/5;
    grid-row: 14/15;
    background-color: rgb(116, 192, 255);
    text-align: center;
    align-items: center;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
}

.Afoot img {
    max-height: 20px;
}

.foot1 {
    grid-column: 1/5;
    grid-row: 15/16;
    text-align: center;
    background-color: rgb(4, 50, 90);
    padding-top: 20px;
    padding-bottom: 30px;
    max-width: 100%;
}

.foot1 img{
    max-width: 125px;
}

footer {
    display: flex;
    grid-column: 1/5;
    grid-row: 16/17;
    padding-left: 16%;
    padding-right: 16%;
    text-align: left;
    list-style: none;
    line-height: 20px;
    padding-bottom: 60px;
    background-color: rgb(4, 50, 90);
    color: rgb(212, 212, 212);
}

footer h4 {
    color: rgb(76, 79, 96);
    display: block;
    font-size: 0.67em;
    unicode-bidi: isolate;
    text-align: left;
}

footer li {
    display: list-item;
    text-align: -webkit-match-parent;
    unicode-bidi: isolate;
    line-height: 25px;
    width: 150px;
}

.f1 {
    grid-row: 16/17;
    padding-left: 22px;
    padding-right: 22px;
}

.f1 :hover {
    text-decoration: underline;
}

.f2 {
    grid-row: 16/17;
    padding-left: 22px;
    padding-right: 22px;
}

.f2 :hover {
    text-decoration: underline;
}

.f3 {
    grid-row: 16/17;
    padding-left: 22px;
    padding-right: 22px;
}

.f3 :hover {
    text-decoration: underline;
}

.f4 {
    grid-row: 16/17;
    padding-left: 22px;
    padding-right: 22px;
}

.f4 :hover {
    text-decoration: underline;
}

.f5 {
    grid-row: 16/17;
    padding-left: 22px;
    padding-right: 22px;
}

.f5 .social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

.f5 a {
    max-width: 12px;
}
}






































@media screen and (max-width:600px) { 

    .main-content {
        padding: 20px 0;
    }
    
    .Why {
        grid-column: 2/4;
        grid-row: 3/4;
        background: linear-gradient(217deg, rgb(255, 255, 255), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(195, 248, 241, 0.74), rgba(201, 255, 201, 0) 70.71%),
            linear-gradient(336deg, rgb(213, 199, 236), rgba(0,0,255,0) 70.71%);
        padding-top: 10%;
        padding-bottom: 5%;
        text-align: center;
    }
    
    .Why h1 {
        font-size: 36px;
        padding-bottom: 10px;
        text-transform: uppercase;
    }
    
    .Why p {
        font-size: 12px;
        color: gray;
        padding-left: 10%;
        padding-right: 10%;
        line-height: 20px;
        padding-bottom: 3%;
    }
    
    .Why h3 {
        font-size: 18px;
        color: rgb(93, 93, 140);
    }
    
    .Why h4 {
        font-size: 16px;
    }
    
    .Why nav {
        padding-top: 5%;
        padding-bottom: 5%;
    }
    
    .Why nav {
        padding-top: 5%;
        padding-bottom: 5%;
    }
    
    .blue {
        color: rgb(24, 122, 191);
    }
    
    .Mobile {
        display: none;
    }

    .video1{
        width: 100%;
        max-width: 850px;
        height: auto;
    }

    .S1 {
		grid-column: 2/4;
		grid-row: 3/4;
		background-color: white;
		padding-top: 10%;
		padding-bottom: 5%;
		text-align: center;
	}
	
	.S1 h1 {
		font-size: 36px;
		padding-bottom: 10px;
		text-transform: uppercase;
	}
	
	.S1 p {
		font-size: 12px;
		color: gray;
		padding-left: 10%;
		padding-right: 10%;
		line-height: 20px;
		padding-bottom: 3%;
	}
	
	.S1 h3 {
		font-size: 18px;
		color: rgb(93, 93, 140);
	}

	.S1 h4 {
		font-size: 16px;
	}
	
	.S1 nav {
		padding-top: 5%;
		padding-bottom: 5%;
	}

	nav img {
		height: 15px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.S1 iframe {
		padding-bottom: 40px;
	}
	
	.S2 {
		grid-column: 3/5;
		grid-row: 4/5;
		background-color: rgb(65, 65, 255);
		color: white;
		text-align: center;
		padding-top: 10%;
		padding-bottom: 10%;
	}
	
	.create {
		font-size: 48px;
		color: lightblue;
	}
	
	.S2 h1 {
		font-size: 20px;
		text-align: center;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
	.S2 h4 {
		font-size: 12px;
		text-align: center;
		color: lightblue;
	}
	
	.S2 p {
		font-size: 13px;
		text-align: center;
		line-height: 15px;
	}
	
	.SS2 {
		grid-column: 1/3;
		grid-row: 4/5;
		background-color: rgb(65, 65, 255);
		text-align: center;
		padding-top: 10%;
		padding-bottom: 10%;
	}
	
	.SS2 img {
		max-width: 400px;
	}
	
	.S3 {
		grid-column: 1/3;
		grid-row: 5/6;
		background-color: purple;
		color: white;
		text-align: center;
		padding-top: 10%;
		padding-bottom: 10%;
	}
	
	.JR {
		font-size: 48px;
		color: rgb(193, 86, 255);
	}
	
	.S3 h1 {
		font-size: 20px;
		text-align: center;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
	.S3 h4 {
		font-size: 12px;
		text-align: center;
		color: rgb(193, 86, 255);
	}
	
	.S3 p {
		font-size: 13px;
		text-align: center;
		line-height: 18px;
	}
	
	.SS3 {
		grid-column: 3/5;
		grid-row: 5/6;
		background-color: purple;
		text-align: center;
		padding-top: 10%;
		padding-bottom: 10%;
	}
	
	.SS3 img {
		max-width: 400px;
	}
	
	.S4 {
		grid-column: 3/5;
		grid-row: 6/7;
		background-color: rgb(51, 138, 138);
		color: white;
		text-align: center;
		padding-top: 10%;
		padding-bottom: 10%;
	}
	
	.camps {
		color: rgb(33, 218, 218); 
		font-size: 48px;
	}
	
	.S4 h1 {
		font-size: 20px;
		text-align: center;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
	.S4 h4 {
		font-size: 12px;
		text-align: center;
		color: rgb(33, 218, 218);
	}
	
	.S4 p {
		font-size: 13px;
		text-align: center;
		line-height: 15px;
	}
	
	.SS4 {
		grid-column: 1/3;
		grid-row: 6/7;
		background-color: rgb(51, 138, 138);
		text-align: center;
		padding-top: 10%;
		padding-bottom: 10%;
	}
	
	.SS4 img {
		max-width: 400px;
	}
	
	.S5 {
		grid-column: 1/5;
		grid-row: 7/8;
		background: url(photos/Natureback.png) no-repeat;
		background-size: cover;
		background-position: unset;
		text-align: center;
	}
	
	.S5 iframe {
		margin-top: 50px;
		width: 600px;
		padding-bottom: 150px;
	}
	
	.S5 .l3 {
		max-width: 300px;
		margin-bottom: -50px;
	}
	
	.SS5{
		grid-column: 1/5;
		grid-row: 8/9;
		padding-top: 40px;
		padding-bottom: 100px;
		line-height: 20px;
		text-align: center;
	}

    .s55{
        width: 100%;
        height: 40%;
    }
	
	.SS5 h4 {
		color: lightblue;
		font-size: 12px;
	}
	
	.SS5 p {
		margin-left: 15%;
		margin-right: 15%;
		padding-bottom: 20px;
	}
	
	.S6 {
		grid-column: 1/5;
		grid-row: 9/10;
		background: url(photos/Gradiant\ Background.webp) no-repeat;
		background-size: cover;
		text-align: center;
	}
	
	.S6 h4 {
		color: rgb(0, 191, 255);
		margin-left: 10%;
		margin-right: 10%;
		line-height: 25px;
	}
	
	.S6 p {
		color: white;
		margin-left: 10%;
		margin-right: 10%;
		line-height: 25px;
		padding-bottom: 20px;
	}
	
	.S6 .l1 {
		margin-top: -15px;
	}
	
	.S6 .pro {
        max-width: 100%;
        height: 250px;
    }
	
	.S6 .ninjas {
		max-width: 100px;
	}
	
	.S7 {
		grid-column: 1/5;
		grid-row: 10/11;
		padding-top: 40px;
		background-color: white;
		text-align: center;
	}
	
	.S7 h1{
		line-height: 25px;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	
	.S7 .Loc {
		color: rgb(78, 78, 78);
		font-size: 30px;
	}
	
	.S7 .NY {
		color: rgb(0, 143, 191);
		font-size: 40px;
	}
	
	.S7 button {
		margin-bottom: 20px;
	}
	
	.S7 img {
		max-width: 250px;
		margin-bottom: -5px;
	}
	
	.s8 {
		display: flex;
		grid-column: 1/5;
		grid-row: 12/13;
		padding-left: 1%;
		padding-right: 1%;
		padding-bottom: 60px;
		text-align: center;
		background: url(photos/Testimonial-BG.webp);
	}

    .s81{
        width: 100%;
        height: 250px;
    }
	
	.s8 h2 {
		padding-top: 30px;
		font-size: 28px;
	}
	
	.s8 .blue2 {
		color: rgb(24, 122, 191);
	}
	
	.s8 h4 {
		background-color: rgb(111, 201, 232);
		color: white;
		max-width: 100px;
		margin-left: 10%;
		margin-right: 10%;
		margin-bottom: -20%;
	}
	
	.S8 {
		grid-column: 1/5;
		grid-row: 11/12;
		padding-top: 20px;
		text-align: center;
		background: url(photos/Testimonial-BG.webp);
	}
	
	.S8 h4 {
		padding-top: 20px;
		color: rgb(33, 158, 200);
		font-size: 12px;
	}
	
	.S8 h1 {
		padding-top: 10px;
		padding-bottom: 30px;
		font-size: 40px;
		color: white;
	}
	
	.SS8 {
		opacity: 50%;
		grid-column: 1/2;
		grid-row: 12/13;
		background-color: white;
		color: black;
		text-align: center;
		margin: 10px;
		padding: 10px;
		max-width: 300px;
		height: 250px;
	}
	
	.SS8 h4 {
		margin-top: 90px;
	}
	
	.SSS8 {
		grid-column: 3/3;
		grid-row: 12/13;
		background-color: white;
		color: black;
		text-align: center;
		margin: 10px;
		padding: 10px;
		max-width: 300px;
		height: 250px;
	}
	
	.SSS8 h4 {
		margin-top: 75px;
	}
	
	.SSSS8 {
		opacity: 50%;
		grid-column: 4/5;
		grid-row: 12/13;
		background-color: white;
		color: black;
		text-align: center;
		margin: 10px;
		padding: 10px;
		max-width: 300px;
		height: 250px;
	}
	
	.SS8 h4 {
		margin-top: 10px;
	}
	
	.S9 {
		grid-column: 1/5;
		grid-row: 13/14;
		background: url(photos/Kid\ background.webp);
		background-size: cover;
		background-position: center;
		text-align: center;
		padding-top: 150px;
		padding-bottom: 200px;
		margin-bottom: -100px;
	}
	
	.S9 h1 {
		font-size: 48px;
	}
	
	.Afoot {
		grid-column: 1/5;
		grid-row: 14/15;
		background-color: rgb(112, 182, 239);
		text-align: center;
		align-items: center;
		color: white;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
	.Afoot img {
		max-height: 20px;
	}
	
	.foot1 {
		grid-column: 1/5;
		grid-row: 15/16;
		text-align: center;
		background-color: rgb(4, 50, 90);
		padding-top: 20px;
		padding-bottom: 30px;
		max-width: 100%;
	}
	
	.foot1 img{
		max-width: 125px;
	}

	.foot2 {
		display: flex;
		flex-wrap: wrap;	
	}
	
	footer {
		display: flex;
		grid-column: 1/5;
		grid-row: 16/17;
		padding-left: 1%;
		padding-right: 1%;
		text-align: left;
		list-style: none;
		line-height: 20px;
		padding-bottom: 60px;
		background-color: rgb(4, 50, 90);
		color: rgb(212, 212, 212);
	}
	
	footer h4 {
		color: rgb(76, 79, 96);
		display: block;
		font-size: 0.67em;
		unicode-bidi: isolate;
		text-align: left;
	}
	
	footer li {
		display: list-item;
		text-align: -webkit-match-parent;
		unicode-bidi: isolate;
		line-height: 25px;
		width: 150px;
	}
	
	.f1 {
		grid-row: 16/17;
		padding-left: 5px;
		padding-right: 5px;
	}
	
	.f1 :hover {
		text-decoration: underline;
	}
	
	.f2 {
		grid-row: 16/17;
		padding-left: 5px;
		padding-right: 5px;
	}
	
	.f2 :hover {
		text-decoration: underline;
	}
	
	.f3 {
		grid-row: 16/17;
		padding-left: 5px;
		padding-right: 5px;
	}
	
	.f3 :hover {
		text-decoration: underline;
	}
	
	.f4 {
		grid-row: 16/17;
		padding-left: 5px;
		padding-right: 5px;
	}
	
	.f4 :hover {
		text-decoration: underline;
	}
	
	.f5 {
		grid-row: 16/17;
		padding-left: 5px;
		padding-right: 5px;
	}
	
	.f5 .social {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
	.f5 a {
		max-width: 12px;
	}
}