*	{
	box-sizing: border-box
	}


@font-face {
    font-family:inter-SemiBold;
    src: url(Fonts/Inter-SemiBold.ttf);
}

@font-face {
    font-family:inter-Thin;
    src: url(Fonts/Inter-Thin.ttf);
}

@font-face {
    font-family:MADETOMMY_Bold;
    src: url(Fonts/MADETOMMY-Bold_.otf);
}

@font-face {
    font-family:MADETOMMY_ExtraBold;
    src: url(Fonts/MADETOMMY-ExtraBold_.otf);
}

@font-face {
    font-family:MADETOMMY_Medium;
    src: url(Fonts/MADETOMMY-Medium_.otf);
}

@font-face {
    font-family:MADETOMMY_Regular;
    src: url(Fonts/MADETOMMY-Regular_.otf);
}

#wrapper {
	margin:0 auto;
    max-width: 1440px;
}

header {
    display: flex;
    justify-content:center;
    align-items:flex-end;
    background-color: white;
    height: auto;
    column-gap: 2em;
    margin-bottom: 1em;
    margin-top: 1em;
}

.logo {
    height: 130px;
    width: 161px;
}

nav ul{
    list-style-type: none;
    margin: 0;
    display: flex;
    grid-gap: 2em;
    justify-content: center;
    padding-bottom: 1em;
    
}

nav ul li a{
    text-decoration: none;
    color: #653C85;
    font-family:MADETOMMY_Medium;
    border-right: #C3C3E2 solid 1px;
    padding-right:2em;
    text-align: center;
}

.threelist {
    clear: both;
    text-align: center;
    color:#FFFFFF;
    flex-direction:row;
    flex-basis: 300px
        
    
}

.threelist h2{
    font-family:MADETOMMY_Bold;
    font-size: 2em;
}

.threelist p{
    font-family:MADETOMMY_Regular;
}


.purplestrip{
    width: 100%;
    background-color:#653C85;
    height:250px;
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding-left: 10%;
    padding-right: 10%

    
    
}

body{   
    margin-left: auto;
    margin-right:auto;
}

#banner {
    background-color:#C3C3E2;
    color:#653C85;
    text-align: center;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-family:MADETOMMY_Medium;
    margin-top: 0;
}

#CMA{
    clear: both;
    background-color: #009ADB;
    border-radius: 40px;
    padding: 1em 2em 1em 2em;
    width: 90%;
    text-align: center;
    margin-left: auto;
    margin-right:auto;
    color:#FFFFFF;
    margin-top: 3em;
}

#CMA h1{
    font-family:MADETOMMY_Bold;
    font-size: 2em;
    background-color: #653C85;
    width: 230px;
    margin-left: auto;
    margin-right:auto;
    padding: 6px;
    border-radius:10px;
}

#CMA P {
    font-family:MADETOMMY_Regular;
        font-size: 18px;
}

#curriculum {
    clear: both;
    color:black;
    text-align: center;
    margin-left: auto;
    margin-right:auto;
    width: 40%;
    margin-top: 3em;
    font-family:MADETOMMY_Regular;
}

#schedule {
    background-color:#653C85;
    color:#FFFFFF;
    padding: 0em 1em 0 1em;
    margin-right: 20%;
    float:right;
    margin-top: 20px;
    font-family:MADETOMMY_Regular; 
} 

.bluestrip {
    width: 100%;
    background-color:#009ADB;
    height: auto;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    color:#FFFFFF;
}

.bluestrip h1 {
        font-family:MADETOMMY_Bold;
        font-size: 24px;   
}

.bluestrip h2 { 
        font-family:MADETOMMY_Regular;
        font-size: 18px;    
}

#hero{
	background-image: url(images/hero3.jpg);
	background-size: 100%  auto;
	background-repeat:no-repeat;
    clear:both;
    object-fit:cover;
    height: 660px;
}

    
.herotext{ 
    color:white;
    float:left;
    margin-left:10%;
    position: absolute;
    width: 35%;
    font-family:MADETOMMY_Bold;
}

.herotext h1 { 
    font-size:3em;
}

.herotext p {
    width:120px;
    background-color:#009ADB;
    padding: 12px;
    font-family:MADETOMMY_Medium;
    text-align: center;
    
}

.thinpurple {
    width: 100%;
    background-color:#653C85;
    height:100px;
    text-align: center;
    display: flex;
    justify-content:center;
    align-items:center;
}

.thinpurple h1{
    font-family:MADETOMMY_Bold;
    font-size: 24px;
    text-align: center;
    color:#FFFFFF;
    flex-direction: flow;
}

.thinpurple p{
    width:170px;
    background-color:#009ADB;
    padding: 12px;
    font-family:MADETOMMY_Medium;
    text-align: center;
    margin-left: 30px;
}

#classes h1:first-of-type {
    text-align: center;
    color:#653C85;
    font-family:MADETOMMY_Bold;
}

#classes h2:first-of-type{
    text-align: center;
    color:#009ADB;
    font-family:MADETOMMY_Medium;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    font-size: 18px;
}


.help {
    width: 100%;
    background-color:#653C85;
    height:200px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content:space-around;
    padding: 1em 1em 1em 1em;
}


.help h2{
    color:#C3C3E2;
    font-family:MADETOMMY_Medium;
    font-size: 24px;
    margin: 0;
}

.help h1 {
    font-family:MADETOMMY_Bold;
    Color: #FFFFFF;
    font-size:2em;
    margin: 0;
    
}


#performances {
    text-align: center; 
    background-color: #C3C3E2;
    width: 90%;
    padding:2em;
    margin-left: auto;
    margin-right: auto;
    margin-top:5em;
    margin-bottom:5em;
    outline: #009ADB dotted 6px;
    outline-offset: 8px;
    border-radius: 40px;

}


#performances h1 {
    color:white;
    background-color: #653C85;
    font-family:MADETOMMY_Bold;
    margin:0;
    font-size: 2em;
    margin-left: auto;
    margin-right:auto;
    padding: 10px;
    border-radius:10px;
    width:500px;
    
} 

#performances h2 {
    color: #653C85;
    font-family:MADETOMMY_Medium;
}

#performances p {
    color:black;
    font-family:MADETOMMY_Regular;
}



#joy {
    background-color:#009ADB;
    text-align:center;
    color:white;
    padding: 1em 1em 1em 1em;   
}

#joy h1 {
    font-family:MADETOMMY_Bold;
    font-size:2em;
}

#threecolumn {
     display: flex;
    justify-content:center;
    align-items: flex-start;
}

.quotes {
    flex-direction: row;
    flex-basis: 343px;
    padding-left: 6em;
    font-family:MADETOMMY_Regular;
}


#contact{
    width: 100%;
    background-color:#653C85;
    display:grid;
    grid-template-columns: 15% 15% 15%;
    grid-template-rows: 1fr 1fr;
    text-align: center;
    padding-bottom: 1em;
    justify-content: center;
    align-content: center;
}

#contact h1 {
    grid-column: 1/4;
    font-family:MADETOMMY_Bold;
    font-size:2em;
    color: #C3C3E2;
    align-content: center;
}

#contact p {
    color:white;
    font-family:MADETOMMY_Regular;
}

.head {
    color:#009ADB;
}

#fourflex{
    display: grid;
    justify-content:center;
    align-content: center;
    flex-wrap: wrap;
    grid-template-columns: auto 1fr auto 1fr ;
    grid-template-rows: auto auto;
    margin-left:20%;
    margin-right: 20%;
    margin-bottom: 1em;
}

#fourflex p {
    padding-left: 5%;
    padding-right: 5%;
    margin: 0;
    color:#653C85;
    align-self: center;
    font-family:MADETOMMY_Regular;
}

#fourflex h1 {
    font-size: 100px;
    color:#009ADB;
    margin: 0;
    font-family:MADETOMMY_Bold;
} 


#firstcircle {
    border-radius: 50%;
    border: #F1F2F2 solid 15px;
    height: 360px;
    width: 360px;
    overflow: hidden;
    background-clip: padding-box;
    grid-row: 1/4;
}

#secondcircle {
    border-radius: 50%;
    border: #F1F2F2 solid 15px;
    height: 360px;
    width: 360px;
    overflow: hidden;
    background-clip: padding-box;
    grid-row: 4/7;
  
}

#thirdcircle {
    border-radius: 50%;
    border: #F1F2F2 solid 15px;
    height: 360px;
    width: 360px;
    overflow: hidden;
    background-clip: padding-box;
    grid-row: 7/10;
}

#imagegrid{
    
    display: grid;
    justify-content:space-around;
    align-content:center;
    grid-template-columns: 1fr 3fr ;
    grid-template-rows: repeat (9, 100px);
    margin-left:10%;
    margin-right: 10%;
    column-gap: 3%;
    margin-top: 7em;
    margin-bottom: 12em;
    grid-row-gap: 30px;
}

#imagegrid h1{
    grid-column: 2/3;
    color:#009ADB;
    margin-top: 50px;
    margin-bottom: 0;
     font-family:MADETOMMY_Bold;
    font-size: 2em;
}

#imagegrid p{
    grid-column: 2/3;
    color:black;
    margin-top: 0;
    margin-bottom: 0;
    font-family:MADETOMMY_Regular;
}


#imagegrid h3{
    color:#FFFFFF;
    grid-column: 2/3;
    background-color: #653C85;
    padding: 0.5em;
    width:220px;
    height:40px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 50px;
    font-family:MADETOMMY_Medium;
    font-size: 16px;
}