/*General Styles*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;  
}

 @font-face{
    font-family:"indie flower";
    src: url('../font/IndieFlower-Regular.ttf');
 }

 /*variables section*/
/*color variables section*/
 :root{
    --primarycolor:#666699;
    --secondarycolor:#F1E7F0;
    --tertiarycolor:#cdceed; 
 }

 /*navigation*/
nav ul {
    height:100px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 20px 0;
    margin:0;
    list-style: none;
    background-color:var(--primarycolor);
}

nav a{
    text-decoration: none;
    font-size: 22px;
    display:inline-block;
}

#home-color{
    color:red;
    transform:rotate(8deg);
}

#styles-color{
    color:blue;
    transform:rotate(-8deg);
}

#workshop-color{
    color:orange;
}

#gallery-color{
    color:yellow;
    transform:rotate(8deg);
}

#contact-color{
    color:rgb(60, 238, 60);
    transform:rotate(-8deg);
}
/*navigation,end*/

/*home page*/
.hero{
    width:100%;
    height:500px;
    display:flex;
    flex-flow: row wrap;
    align-items: center;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

.homehero{
    background-image: url('../img/home/homehero.jpg');
}

.homelogo{
    width:35%;
}

.homelogo img{
    width:100%;
    height:auto;
}

.welcome{
    height:200px;  
    text-align: center;
    background-color:var(--primarycolor);
}

.welcome h1{
    font-size:50px;
    font-family: "Indie flower",kristen itc;
    font-weight: normal;
    justify-content: center;
    padding-top: 30px;
    color:var(--secondarycolor);
}

.welcome p{
    font-size:25px;
    font-family: "Indie flower",kristen itc;
    align-items: center;
    color:var(--secondarycolor);
    padding-left:8px;
    padding-right: 8px;
}

.bar p{
    height:150px;
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    color:var(--primarycolor);
    text-align: center;
    padding-top:45px; 
    background-color:var(--secondarycolor);
}

.classbox{
    display:flex;
    flex-flow:column;
    align-items: center;
    justify-content: center; 
    padding:0 20px;
    background-color:var(--secondarycolor);
}

.box1,.box2,.box3,.box4{
    width:100%;
    height:300px;
    display: flex;
    align-items: center;
    justify-content: center;  
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    border-radius:20px; 
    margin-bottom:45px;  
}

.classbox a{
    width:250px;
    font-family: "Indie flower";
    font-size: 25px;
    text-decoration: none;
    text-align: center;
    color: var(--secondarycolor);
    padding:5px 5px;
    border-radius: 25px;
    background-color:var(--primarycolor);
}

.box1 a,.box2 a,.box3 a,.box4 a{
    margin-top: 120px;
}

#acrylic{
    background-image: url('../img/home/homea0.25.jpg');
}

#watercolor{
    background-image: url('../img/home/homew0.5.jpg');
}

#creative{
     background-image: url('../img/home/homec0.5.jpg');
}

#mixed{
     background-image: url('../img/home/homem0.25.jpg');
}

.voices{
    height:150px;
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    color:var(--secondarycolor);
    text-align: center;
    padding-top:45px; 
    background-color: var(--primarycolor);
}

.voicesbox{
    display:flex;
    flex-flow:column wrap;
    width:100%;
    align-items: center;
    justify-content: center;
    background-color: var(--primarycolor);
}

.sophie,.marc,.sarah{
    width:95%;
    height:260px;
    border-radius: 30px;
    display:flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

#sophiec{
    background-color:#ffd7e7;
}

#marcc{
      background-color:#dadbf4;
}

#sarahc{
      background-color:#fcffcd;
}

.sophieright,.marcright{
    width:65%;
    display:flex;
    flex-flow:row;
    padding-right:20px;
    padding-left:20px;
}

.sophieleft,.marcleft{
    width:35%;
    display:flex;
    flex-direction:column;
    padding-left: 10px; 
}

.sophieimgbox,.marcimgbox{
    width: 85%;
    height:auto;
    border-radius: 50%;
    margin-bottom: 30px; 
}

.sophie img ,.marc img{
    width:100%;
    object-fit: cover;
    height:auto;
    border-radius: 50%;
    display:flex;
    align-items: center;
}

.sophieleft,.sophieright p, .marcleft,.marcright p,.sarah p{
    font-family: calibri;
    font-size: 20px;
}

.sarahpara{
    padding-left: 20px;
    padding-right: 40px;
    margin-top:5px;
 }

.sarahname{
    font-weight:bold;
    text-align: right;
    width:85%;
 }

.painting{
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    background-color:var(--tertiarycolor);
    color:#4869d5;
    text-align: center;
    padding-top:45px;  
    height:150px;
}

.videobox{
    width:100%;
    display:flex;
    flex-flow:row wrap;
    justify-content: center;
    gap:50px;
    background-color:var(--tertiarycolor);
}

.videobox video{
    width:100%;
    border-radius:20px;
}

footer{
    background-color: var(--primarycolor);
    height:150px;
    display:flex;
    align-items: center;
}

.footerlogo{
    width:20%;
}

.footerlogo img{
    width:100%;
    height:auto;      
}

.socials{
    width:50%;
    display:flex;
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:5px;
}

.socials img{
    width:100%;
    height:35px;
	object-fit:cover;
}

.contact{
    width:35%;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
}

.contact p{
    font-size: 14px;
    font-family: calibri;
    color:white;
}

.copyright{
    height:40px;
    background-color: black;
    color:white;
    font-size:20px;
    font-family: calibri;
    display:flex;
    justify-content: center;
    align-items: center;
}
/*home page,end*/

/*styles page*/
.header{
    width:100%;
    height:150px;
    padding:35px;
    display:flex;
    flex-flow:row wrap;
    align-items:center;
    justify-content:center; 
    background-color: #1d3387;
}

.header h1{
    font-size: 45px;
    font-family: Indie flower;
    color:#dff225;
    transform:rotate(20deg);
    display:inline-block;
    margin-top: 50px;
    margin-left:20px;
}

.styleslogo{
    width:200px;
    height:80px;
    display:flex;
    align-items: center;
    justify-content: center;
    margin-bottom:30px;
}

.styleslogo img{
    width:100%;;
    height:auto;
    margin-bottom: 15px;
}

.styleshero{
    background-image: url('../img/styles/styleshero.jpg');
}

.acrylicbox,.watercolorbox,.creativebox,.mixedmediabox{
    height:auto;  
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.acrylicb{
      background-image: url('../img/styles/acrylicb.jpg');
}

.watercolorb{
    background-image: url('../img/styles/watercolorb.jpg');
}

.creativeb{
    background-image: url('../img/styles/creativeb.jpg');
}

.mixedmediab{
    background-image: url('../img/styles/mixedmediab.jpg');
}

.acrylicclass,.watercolorclass,.creativeclass,.mixedmediaclass{
    width:100%;
    height:70px;
    font-size:40px;
    font-family: "Indie flower",kristen itc;
    padding-top:15px;
    color:#2d68a2;
    margin-bottom: 10px;
}

.acrylicpic,.watercolorpic,.creativepic,.mixedmediapic{
    width:100%;
    object-fit: cover;
}

.acrylicpic img,.watercolorpic img,.creativepic img,.mixedmediapic img{
    width:100%;
    height:380px;
    display:block;
    object-fit: cover;    
}

.acrylictext,.watercolortext,.creativetext,.mixedmediatext{
    width:100%;
    height:200px;
    background-color:var(--tertiarycolor);
    padding:20px;
}

.acrylictext ul,.watercolortext ul,.creativetext ul,.mixedmediatext ul{
     list-style: none;
}
.acrylictext li,.watercolortext li,.creativetext li,.mixedmediatext li{
    font-family: calibri;
    font-size:20px;
    color:#1d3387;
    margin-bottom:10px;
    text-align: left;
}

.highlight{
    color:#0c7a06;
    font-weight: bold;
}

.bar2 p{
    height:150px;
    font-size:40px;
    font-family: "Indie flower",kristen itc;
    color:var(--secondarycolor);
    text-align: center;
    padding-top:45px; 
    background-color:var(--primarycolor);
}

.faqbox{
    display:flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

.faq1{
    font-family: calibri;
    font-size: 20px;
    padding-top: 15px;
    padding-left: 30px;
    padding-right: 20px;
    padding-bottom: 20px;
    background-color: var(--tertiarycolor);
}

.faq2{
    font-family: calibri;
    font-size: 20px;
    padding-top: 15px;
    padding-left: 30px;
    padding-right: 20px; 
    padding-bottom: 20px;
    background-color: #1d3387;
}

.faq2 li{
    color:#dbd9d9;

}
.faqtext li{
    padding-top:15px;
    padding-bottom: 15px; 
   ;
}
/*styles page,end*/

/*workshop page*/

.herow{
    width:100%;
    height:500px;
    position: relative;
    flex-flow: row wrap;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

.workshophero{
    background-image: url('../img/workshop/workshophero.jpg');
}

.workshoplogo{
    position: absolute;
    top:35%;
    left:60%;
    transform:translate(-50%,-50%) 
} 

.workshoplogo img{
    width:200px;;
    height:auto;
}

.workshopherotext{
    position: absolute;
    top:70%;
    left:25%;
    transform:translate(-35%,-50%)
}

.workshophero h1{
    font-size: 45px;
    font-family: Indie flower;
    color:#13ff06;
    transform: rotate(11deg);
    display:inline-block;
    margin-left:120px;
    margin-bottom:100px;
}

.workshopbar p{
    height:150px;
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    color:#107f74;
    text-align: center;
    padding-top:45px; 
    background-color:var(--secondarycolor);
}

.loveclass{
    height:150px;
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    color:#107f74;
    text-align: center;
    padding-top:45px; 
    background-color:var(--tertiarycolor);
}

.upcomingbox{
    width:100%;
    height:auto;
    display:flex;
    flex-flow: column wrap;
    align-items: center;
    background-color:#44969a ;
}

.upcomingcontent{
    width:50%;
    height:220px;
    text-align: center;
    border-radius: 0;
    padding-top:15px;
    border-radius: 20%;
    position:relative;
}

.artist{
    margin-right:160px;
    margin-top:40px;
    background-color:#ff0000 ;
}

.color{
    background-color:#e4ca04;
    margin-top:20px;
    margin-bottom:20px;
    margin-left:160px;
}

.texture{
    margin-bottom:40px;
    margin-right:160px;
    background-color:#627dd5 ;
}

.roundbox1,.roundbox2,.roundbox3{
    width:90px;
    height:90px;
    border-radius: 50%;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background-color:#ff0000 ;
}

.roundbox1,.roundbox3{
    right:-70px;
}

.roundbox2{
    left:-70px;
}

.upcomingcontent h1{
    font-size:40px;
    font-family: calibri;
    color:white;
}

.upcomingcontent p{
    font-size:28px;
    font-family: calibri; 
    padding-top:5px;
}

.classschedule{
    display:flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    background-color:#44969a ;  
}

.allclass{
    width:85%;
    display:flex;
    flex-flow: column;
    padding-top:40px;
    padding-bottom:40px;
    gap:20px;
}

.monday,.tuesday,.wednesday,.thursday{
    height:180px;
    padding:20px;
    font-family: calibri;
    text-align: center;
    border-radius: 40px;
}

.saturday,.sunday{
    height:270px;
    padding:20px;
    font-family: calibri;
    text-align: center;
    border-radius: 40px;
}

.monday p,.tuesday p,.wednesday p,.thursday p,.saturday p,.sunday p{
    font-family: calibri;
    font-size: 25px;
    padding-top:15px;
}

.monday,.mondayp,.thursday{
    background-color: #ffd7e7;
}

.tuesday,.saturday{
    background-color: #dadbf4;
}

.wednesday,.sunday{
    background-color: #fcffcd;
}

.videobox{
    width:100%;
    display:flex;
    flex-flow:row wrap;
    justify-content: center;
    gap:50px;
    background-color:var(--tertiarycolor);
}

.videobox video{
    width:100%;
    border-radius:20px;
}
/*workshop page,end*/

/*gallery page*/
/*gallery hero section*/
.herow{
    width:100%;
    height:500px;
    /* display:flex; */
    position: relative;
    flex-flow: row wrap;
    /* align-items: center;
    justify-content: center; */
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

.galleryhero{
    background-image: url('../img/gallery/galleryhero.jpg');
}

.gallerylogo{
    position: absolute;
    top:30%;
    left:70%;
    transform:translate(-50%,-50%) 
} 

.gallerylogo img{
    width:200px;;
    height:auto;
}

.galleryherotext{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-10%,-40%)
}

.galleryherotext h1{
    font-size: 45px;
    font-family: Indie flower;
    color:#ff0000;
    display:inline-block;
}
/*gallery hero section, end*/

/*gallery bar section*/
.galleryfirstbar{
    height:150px;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tertiarycolor);
}

.galleryfirstbar p{
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    color:#627dd5;
}

.gallerybar p{
    height:150px;
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    color:var(--secondarycolor); 
    text-align: center;
    padding-top:45px; 
    background-color:var(--primarycolor); 
}
/*gallery bar section, end*/

/*gallerywip*/
.gallerywip{
    display:flex;  
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:5px;
}

.wip1box{
    flex: 0 0 100%;
}

.wip2box,.wip3box{
    flex:0 0 calc(50% - 2.5px);
}

.wip1box img,.wip2box img,.wip3box img{
    width:100%;
    height:250px;
    display:block;
    object-fit: cover;
}
/*gallerywip,end*/

/*galleryaa*/
.galleryaa{
    display:flex;  
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:5px;
}
  
.aa3box{
    flex: 0 0 100%;
}

.aa1box,.aa2box,.aa4box,.aa5box{
    flex:0 0 calc(50% - 2.5px);
}

.aa1box img,.aa2box img,.aa3box img,.aa4box img,.aa5box img{
    width:100%;
    height:250px;
    display:block;
    object-fit: cover;
}
/*galleryaa, end*/

/*galleryw*/
.galleryw{
    display:flex;  
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:5px;
}

.w3box{
    flex:0 0 100%;
}
  
.w1box,.w2box,.w4box,.w5box{
    flex: 0 0 calc(50% - 2.5px);
}

.w1box img,.w2box img,.w3box img,.w4box img,.w5box img{
    width:100%;
    height:250px;
    display:block;
    object-fit: cover;
}
/*galleryw, end*/

/*gallerydd*/
.gallerydd{
    display:flex;  
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:5px;
}

.dd3box{
    flex:0 0 100%;
}
  
.dd1box,.dd2box,.dd4box,.dd5box{
    flex: 0 0 calc(50% - 2.5px);
}

.dd1box img,.dd2box img,.dd3box img,.dd4box img,.dd5box img{
    width:100%;
    height:250px;
    display:block;
    object-fit: cover;
}
/*gallerydd, end*/

/*gallerymm*/
.gallerymm{
    display:flex;  
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:5px;
}

.mm3box{
    flex:0 0 100%;
}
  
.mm1box,.mm2box,.mm4box,.mm5box{
    flex: 0 0 calc(50% - 2.5px);
}

.mm1box img,.mm2box img,.mm3box img,.mm4box img,.mm5box img{
    width:100%;
    height:250px;
    display:block;
    object-fit: cover;
}
/*gallerymm, end*/

.btpbox{
    display: flex;
    height: 150px;
    justify-content: center;
    align-items: center;
    background-color: #1d3387;
}
   
.btp{
    width:40%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:var(--secondarycolor);
    border-radius: 50px;  
}

.btp p{
    font-family: Indie Flower;
    font-size:35px;
    color:#1d3387; 
}

/*gallery page,end*/

/*contact page*/
/*contact hero section*/
.herow{
    width:100%;
    height:500px;
    /* display:flex; */
    position: relative;
    flex-flow: row wrap;
    /* align-items: center;
    justify-content: center; */
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

.contacthero{
    background-image: url('../img/contact/contacthero.jpg');
}

.contactlogo{
    position: absolute;
    top:18%;
    left:78%;
    transform:translate(-50%,-50%) 
} 

.contactlogo img{
    width:200px;;
    height:auto;
    transform:rotate(15deg); 
}

.contactherotext{
    position: absolute;
    top:25%;
    left:50%;
    transform:translate(-10%,-10%)
}

.contactherotext h1{
    font-size: 45px;
    font-family: Indie flower;
    color:#ff0000;
    transform:rotate(20deg);
    display:inline-block;
}
/*contact hero section,end*/

.contactbar p{
    height:150px;
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    color:#05d361;
    text-align: center;
    padding-top:45px; 
    background-color:var(--primarycolor);
}

/*registration section*/
.registration{
    display:flex;
    flex-flow:column;
    align-items: center;
    justify-content: center;
    gap:30px;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

#regpic{
    background-image: url('../img/contact/contactreg.jpg');
}

.regtitle{
    width:100%;
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    color:var(--secondarycolor);
    padding:30px;
    text-align: center;
}

.regclassbox{
    display:flex;
    flex-flow:column;
    align-items: center;
    justify-content: center;
    gap:35px; 
    margin-bottom: 60px;
}

.regap,.regw,.regcd,.regmm,.regsat,.regsun{
    display:flex;
    flex-flow:column; 
}

.regap,.regcd,.regsat{
    margin-right:120px;
}

.regw,.regmm,.regsun{
    margin-left:120px;
}

.regclassbox a{
    width:250px;
    font-family: "Indie flower";
    font-size: 25px;;
    text-decoration: none;
    text-align: center;
    color: var(--secondarycolor);
    padding:10px;
    border-radius: 20px;
    background-color:var(--primarycolor);
}
/*registration section,end/

/*contact form section*/
.contactbox{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:30px;
    background-color: var(--primarycolor);
}

.contactcontent{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding:20px;
    gap:25px;
    background-color: var(--primarycolor);
}

.contactform{
    width:100%;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;   
} 

label{
    font-family:calibri;
    font-weight: bold;
    font-size: 18px;
    color:var(--secondarycolor);
}

input{
    width:400px;
    height:40px;
    font-size:16px;
    border-radius:10px;
    border:none;
    margin-bottom: 10px;
    background-color:#c5c4c5;  
}

.firstname,.lastname,.email,.message,.submit{
    display: flex;
    flex-direction: column;
    margin-left:20px;
}

textarea{
    height:100px;
    font-size:16px;
    padding:15px;
    border-radius:10px;
    border:none;
    margin-bottom: 10px;
    background-color:#c5c4c5;  
}

.submit{
    display:flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    background-color: var(--primarycolor);
}
.submit input{
    width:125px;
    font-size: 18px;
    font-family: Indie Flower;
    font-weight: bold;
    padding:8px;
    border-radius: 25px; 
}

input:focus{
    outline:1px solid black;
}

.contactimgbox img{
    display:none;
    padding:5px;
    margin-top:10px;  
    border-radius: 25px;
}
/*contact form section, end*/

/*location info section*/
.location{
    height: 500px;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color:var(--secondarycolor);
}

.location p{
    height:150px;
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    padding-top:45px;
    color:#05d361;   
}

.location a{
    text-decoration: none;
    font-family: calibri;
    font-size:20px;
    font-weight: bold;
    margin-bottom: 30px;
}
/*location info section, end*/

/*Studio hours section*/
.studiohours{
    height: 400px;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:30px;
    background-color:var(--secondarycolor); 
}

.studio{
    display: flex;
    flex-flow:row;
    align-items: center;
    justify-content: center;
}

.studio p{
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    color:#05d361;
    text-align: center;  
    padding-top:20px;  
}

.hours{
    display:flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;  
    gap:30px;
}

.hours h2{
    font-family: calibri;
    color:var(--primarycolor); 
    font-size: 28px;  
}

.closed{
    width:250px;
    height:50px;
    display: flex;
    flex-flow:row;
    align-items: center;
    justify-content: center;
    background-color:#dbd8db; 
    border-radius: 25px;
    margin-bottom: 60px;
}

.closed p{
    width:200px;
    text-align: center;
    color:black;
    font-size: 22px;
    font-family: Indie Flower;
    font-weight: bold;
    padding:8px;   
} */
/*studio hours section*/
/*contact page,end*/


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;  
}

 @font-face{
    font-family:"indie flower";
    src: url('../font/IndieFlower-Regular.ttf');
 }


nav ul {
    height:100px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 20px 0;
    list-style: none;
    background-color:var(--primarycolor);
}

nav a{
    text-decoration: none;
    font-size: 22px;
    display:inline-block;
}

#home-color{
    color:red;
    transform:rotate(8deg)
}

#styles-color{
    color:blue;
    transform:rotate(-8deg)
}

#workshop-color{
    color:orange;
}

#gallery-color{
    color:yellow;
    transform:rotate(8deg);
}

#contact-color{
    color:rgb(60, 238, 60);
    transform:rotate(-8deg);
}

/*homepage*/
.hero{
    width:100%;
    height:500px;
    display:flex;
    align-items: center;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

.homehero{
    background-image: url('../img/home/homehero.jpg');
}
.welcome{
    height:200px;  
    text-align: center;
    background-color: var(--primarycolor);
}

.welcome h1{
    font-size:50px;
    font-family: "Indie flower",kristen itc;
    font-weight: normal;
    justify-content: center;
    padding-top: 15px;
    color:var(--secondarycolor);
}

.welcome p{
    font-size:28px;
    font-family: "Indie flower",kristen itc;
    align-items: center;
    color:var(--secondarycolor);
    padding-left: 8px;
    padding-right: 8px;
}

.bar p{
    height:150px;
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    color:var(--primarycolor)
    text-align: center;
    padding-top:45px; 
    background-color:var(--secondarycolor);
}

.classbox{
    height:auto;
    display:flex;
    flex-direction: column;
    align-items: center; 
    padding:0 20px;
    background-color:var(--secondarycolor);
}

.box1,.box2,.box3,.box4{
    width:100%;
    height:300px;
    display: flex;
    align-items: center;
    justify-content: center;  
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    border-radius:20px; 
    margin-bottom:45px;  
}

.classbox a{
    width:250px;
    font-family: "Indie flower",kristen itc;
    font-size: 25px;
    text-decoration: none;
    text-align: center;
    color:var(--secondarycolor);
    padding:5px 5px;
    border-radius: 25px;
    background-color:var(--primarycolor);
}

#acrylic{
    background-image: url('../img/home/homea0.25.jpg');
}

#watercolor{
    background-image: url('../img/home/homew0.5.jpg');
}

#creative{
     background-image: url('../img/home/homec0.5.jpg');
}

#mixed{
     background-image: url('../img/home/homem0.25.jpg');
}

.voices{
    height:150px;
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    color:var(--secondarycolor);
    text-align: center;
    padding-top:45px; 
    background-color: var(--primarycolor);
}

.voicesbox{
    height:auto;
    display:flex;
    flex-flow:column wrap;
    width:100%;
    align-items: center;
    justify-content: center;
    background-color:  var(--primarycolor);
}

.sophie,.marc,.sarah{
    width: 95%;
    height:260px;
    border-radius: 30px;
    display:flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

#sophiec{
    background-color:#ffd7e7;
}

#marcc{
      background-color:#dadbf4;
}

#sarahc{
      background-color:#fcffcd;
}

.sophieright,.marcright{
    width:65%;
    display:flex;
    flex-flow:row;
    padding-right:20px;
    padding-left:20px;
}

.sophieleft,.marcleft{
    width:35%;
    display:flex;
    flex-direction:column;
    align-items: center;
    margin-left:-20px; 
}

.sophieimgbox,.marcimgbox{
    width: 85%;
    height:auto;
    border-radius: 50%;
    margin-bottom: 10px; 
}

.sophie img ,.marc img{
    width:100%;
    object-fit: cover;
    height:auto;
    border-radius: 50%;
    display:flex;
    align-items: center;
}

.sophieleft,.sophieright p, .marcleft,.marcright p,.sarah p{
    font-family: calibri;
    font-size: 20px;  
}

.sarahpara{
    padding-left: 30px;
    padding-right: 30px;
    margin-top:5px;
 }

 .sarahname{
    font-weight:bold;
    text-align: right;
    width:85%;
 }

.painting{
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    background-color:var(--tertiarycolor);
    color:#4869d5;
    text-align: center;
    padding-top:45px;  
    height:150px;
}

.videobox{
    width:100%;
    display:flex;
    flex-flow:row wrap;
    justify-content: center;
    gap:50px;
    background-color:var(--tertiarycolor);
}

.videobox video{
    width:100%;
    border-radius:20px;
}

/*footer*/
footer{
    background-color: var(--primarycolor);
    height:150px;
    display:flex;
    align-items: center;
}

.footerlogo{
    width:30%;
}

.footerlogo img{
    width:100%;
    height:auto;
}

.socials{
    width:35%;
    display:flex;
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:5px;
    padding-right: 30px;
}

.socials img{
    width:100%;
    height:35px;
    object-fit: cover;
}

.contact{
    width:35%;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
}

.contact p{
    font-size: 14px;
    font-family: calibri;
    font-weight: bold;
    color:white;
}

.copyright{
    height:40px;
    background-color: black;
    color:white;
    font-size:20px;
    font-family: calibri;
    display:flex;
    justify-content: center;
    align-items: center;
}
/*footer,end*/
/*homepage,end*/

/*styles page*/
.header{
    width:100%;
    height:150px;
    padding:35px;
    display:flex;
    flex-flow:row wrap;
    align-items:center;
    justify-content:center; 
    background-color: #1d3387;
}

.header h1{
    font-size: 45px;
    font-family: Indie flower;
    color:#dff225;
    transform:rotate(20deg);
    display:inline-block;
    margin-top: 50px;
    margin-left:20px;
}

.styleslogo{
    width:200px;
    height:80px;
    display:flex;
    align-items: center;
    justify-content: center;
    margin-bottom:30px;
}

.styleslogo img{
    width:100%;;
    height:auto;
    padding-top: 10px;
    display:inline-block;
}

.styleshero{
    background-image: url('../img/styles/styleshero.jpg');
}

.acrylicbox,.watercolorbox,.creativebox,.mixedmediabox{
    height:auto;  
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.acrylicb{
      background-image: url('../img/styles/acrylicb.jpg');
}

.watercolorb{
    background-image: url('../img/styles/watercolorb.jpg');
}

.creativeb{
    background-image: url('../img/styles/creativeb.jpg');
}

.mixedmediab{
    background-image: url('../img/styles/mixedmediab.jpg');
}

.acrylicclass,.watercolorclass,.creativeclass,.mixedmediaclass{
    width:100%;
    height:70px;
    font-size:40px;
    font-family: "Indie flower",kristen itc;
    padding-top:15px;
    color:#2d68a2;
    margin-bottom: 10px;
}

.acrylicpic,.watercolorpic,.creativepic,.mixedmediapic{
    width:100%;
    object-fit: cover;
}

.acrylicpic img,.watercolorpic img,.creativepic img,.mixedmediapic img{
    width:100%;
    height:380px;
    display:block;
    object-fit: cover;    
}

.acrylictext,.watercolortext,.creativetext,.mixedmediatext{
    width:100%;
    height: 200px;
    padding:20px;
    background-color:var(--tertiarycolor);
}

.acrylictext ul,.watercolortext ul,.creativetext ul,.mixedmediatext ul{
     list-style: none;
}
.acrylictext li,.watercolortext li,.creativetext li,.mixedmediatext li{
    font-family: calibri;
    font-size:20px;
    color:#1d3387;
    margin-bottom:10px;
    text-align: left;
}

.highlight{
    color:#0c7a06;
    font-weight: bold;
}

.bar2 p{
    height:150px;
    font-size:40px;
    font-family: "Indie flower",kristen itc;
    color:var(--secondarycolor);
    text-align: center;
    padding-top:45px; 
    background-color:var(--primarycolor);
}

.faq1{
    font-family: calibri;
    font-size: 20px;
    padding-top: 15px;
    padding-left: 30px;
    padding-right: 20px;
    padding-bottom: 20px;
    background-color: var(--tertiarycolor);
}

.faq2{
    font-family: calibri;
    font-size: 20px;
    padding-top: 15px;
    padding-left: 30px;
    padding-right: 20px; 
    padding-bottom: 20px;
    background-color: #1d3387;
}

.faq2 li{
    color:#dbd9d9;

}
.faqtext li{
    padding-top:15px;
    padding-bottom: 15px; 
   ;
}
/*styles page, end*/

/*workshop page*/

.herow{
    width:100%;
    height:500px;
    /* display:flex; */
    position: relative;
    flex-flow: row wrap;
    /* align-items: center;
    justify-content: center; */
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

.workshophero{
    background-image: url('../img/workshop/workshophero.jpg');
}

.workshoplogo{
    position: absolute;
    top:35%;
    left:60%;
    transform:translate(-50%,-50%) 
} 

.workshoplogo img{
    width:200px;;
    height:auto;
}

.workshopherotext{
    position: absolute;
    top:70%;
    left:25%;
    transform:translate(-35%,-50%)
}

.workshophero h1{
    font-size: 45px;
    font-family: Indie flower;
    color:#13ff06;
    transform: rotate(11deg);
    display:inline-block;
    margin-left:120px;
    margin-bottom:100px;
}

.workshopbar p{
    height:150px;
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    color:#107f74;
    text-align: center;
    padding-top:45px; 
    background-color:var(--secondarycolor);   
}

.loveclass{
    height:150px;
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    color:#107f74;
    text-align: center;
    padding-top:45px; 
    background-color:var(--tertiarycolor);
}

.upcomingbox{
    width:100%;
    height:auto;
    display:flex;
    flex-flow: column wrap;
    align-items: center;
    background-color:#44969a ;
}

.upcomingcontent{
    width:50%;
    height:220px;
    text-align: center;
    border-radius: 0;
    padding-top:15px;
    border-radius: 20%;
    position:relative;
}

.artist{
    margin-right:160px;
    margin-top:40px;
    background-color:#ff0000 ;
}

.color{
    background-color:#e4ca04;
    margin-top:20px;
    margin-bottom:20px;
    margin-left:160px;
}

.texture{
    margin-bottom:40px;
    margin-right:160px;
    background-color:#627dd5 ;
}

.roundbox1,.roundbox2,.roundbox3{
    width:90px;
    height:90px;
    border-radius: 50%;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background-color:#ff0000 ;
}

.roundbox1,.roundbox3{
    right:-70px;
}

.roundbox2{
    left:-70px;
}

.upcomingcontent h1{
    font-size:40px;
    font-family: calibri;
    color:white;
}

.upcomingcontent p{
    font-size:35px;
    font-family: calibri; 
}

.classschedule{
    display:flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    background-color:#44969a ;  
}

.allclass{
    width:85%;
    display:flex;
    flex-flow: column;
    padding-top:40px;
    padding-bottom:40px;
    gap:20px;
}

.monday,.tuesday,.wednesday,.thursday{
    height:180px;
    padding:20px;
    font-family: calibri;
    text-align: center;
    border-radius: 40px;
}

.saturday,.sunday{
    height:270px;
    padding:20px;
    font-family: calibri;
    text-align: center;
    border-radius: 40px;
}

.monday p,.tuesday p,.wednesday p,.thursday p,.saturday p,.sunday p{
    font-family: calibri;
    font-size: 25px;
    padding-top:15px;
}

.monday,.mondayp,.thursday{
    background-color: #ffd7e7;
}

.tuesday,.saturday{
    background-color: #dadbf4;
}

.wednesday,.sunday{
    background-color: #fcffcd;
}

.videobox{
    width:100%;
    display:flex;
    flex-flow:row wrap;
    justify-content: center;
    gap:50px;
    background-color:var(--tertiarycolor);
}

.videobox video{
    width:100%;
    border-radius:20px;
}
/*workshop page,end*/

/*gallery page*/
/*gallery hero section*/
.herow{
    width:100%;
    height:500px;
    position: relative;
    flex-flow: row wrap;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

.galleryhero{
    background-image: url('../img/gallery/galleryhero.jpg');
}

.gallerylogo{
    position: absolute;
    top:30%;
    left:70%;
    transform:translate(-50%,-50%) 
} 

.gallerylogo img{
    width:200px;;
    height:auto;
}

.galleryherotext{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-10%,-40%)
}

.galleryherotext h1{
    font-size: 45px;
    font-family: Indie flower;
    color:#ff0000;
    display:inline-block;
}
/*gallery hero section, end*/

/*gallery bar section*/
.galleryfirstbar{
    height:150px;
    display:flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tertiarycolor);
}

.galleryfirstbar p{
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    color:#627dd5;
}

.gallerybar p{
    height:150px;
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    color:var(--secondarycolor); 
    text-align: center;
    padding-top:45px; 
    background-color:var(--primarycolor); 
}
/*gallery bar section, end*/

/*gallerywip*/
.gallerywip{
    display:flex;  
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:5px;
}

.wip1box{
    flex:0 0 100%;
}

.wip2box,.wip3box{
    flex:0 0 calc(50% - 2.5px);
}

.wip1box img,.wip2box img,.wip3box img{
    width:100%;
    height:250px;
    display:block;
    object-fit: cover;
}
/*gallerywip,end*/

/*galleryaa*/
.galleryaa{
    display:flex;  
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:5px;
}
  
.aa3box{
    flex:0 0 100%;
}

.aa1box,.aa2box,.aa4box,.aa5box{
    flex: 0 0 calc(50% - 2.5px);
}

.aa1box img,.aa2box img,.aa3box img,.aa4box img,.aa5box img{
    width:100%;
    height:250px;
    display:block;
    object-fit: cover;
}
/*galleryaa, end*/

/*galleryw*/
.galleryw{
    display:flex;  
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:5px;
}

.w3box{
    flex:0 0 100%;
}
  
.w1box,.w2box,.w4box,.w5box{
    flex: 0 0 calc(50% - 2.5px);
}

.w1box img,.w2box img,.w3box img,.w4box img,.w5box img{
    width:100%;
    height:250px;
    display:block;
    object-fit: cover;
}
/*galleryw, end*/

/*gallerydd*/
.gallerydd{
    display:flex;  
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:5px;
}

.dd3box{
    flex:0 0 100%;
}
  
.dd1box,.dd2box,.dd4box,.dd5box{
    flex: 0 0 calc(50% - 2.5px);
}

.dd1box img,.dd2box img,.dd3box img,.dd4box img,.dd5box img{
    width:100%;
    height:250px;
    display:block;
    object-fit: cover;
}
/*gallerydd, end*/

/*gallerymm*/
.gallerymm{
    display:flex;  
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:5px;
}

.mm3box{
    flex:0 0 100%;
}
  
.mm1box,.mm2box,.mm4box,.mm5box{
    flex: 0 0 calc(50% - 2.5px);
}

.mm1box img,.mm2box img,.mm3box img,.mm4box img,.mm5box img{
    width:100%;
    height:250px;
    display:block;
    object-fit: cover;
}
/*gallerymm, end*/

.btpbox{
    display: flex;
    height: 150px;
    justify-content: center;
    align-items: center;
    background-color: #1d3387;
}
   
.btp{
    width:40%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:var(--secondarycolor); 
    border-radius: 50px;  
}

.btp p{
    font-family: Indie Flower;
    font-size:35px;
    color:#1d3387; 
}

/*gallery page,end*/

/*contact page*/
/*contact hero section*/
.herow{
    width:100%;
    height:500px;
    position: relative;
    flex-flow: row wrap;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

.contacthero{
    background-image: url('../img/contact/contacthero.jpg');
}

.contactlogo{
    position: absolute;
    top:18%;
    left:78%;
    transform:translate(-50%,-50%) 
} 

.contactlogo img{
    width:200px;;
    height:auto;
    transform:rotate(15deg); 
}

.contactherotext{
    position: absolute;
    top:25%;
    left:50%;
    transform:translate(-10%,-10%)
}

.contactherotext h1{
    font-size: 45px;
    font-family: Indie flower;
    color:#ff0000;
    transform:rotate(20deg);
    display:inline-block;
}
/*contact hero section,end*/

.contactbar p{
    height:150px;
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    color:#05d361;
    text-align: center;
    padding-top:45px; 
    background-color:var(--primarycolor); 
}

/*registration section*/
.registration{
    display:flex;
    flex-flow:column;
    align-items: center;
    justify-content: center;
    gap:30px;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

#regpic{
    background-image: url('../img/contact/contactreg.jpg');
}

.regtitle{
    width:100%;
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    color:var(--secondarycolor); 
    padding:30px;
    text-align: center;
}

.regclassbox{
    display:flex;
    flex-flow:column;
    align-items: center;
    justify-content: center;
    gap:35px; 
    margin-bottom: 60px;
}

.regap,.regw,.regcd,.regmm,.regsat,.regsun{
    display:flex;
    flex-flow:column; 
}

.regap,.regcd,.regsat{
    margin-right:120px;
}

.regw,.regmm,.regsun{
    margin-left:120px;
}

.regclassbox a{
    width:250px;
    font-family: "Indie flower";
    font-size: 25px;;
    text-decoration: none;
    text-align: center;
    color: var(--secondarycolor);
    padding:10px;
    border-radius: 20px;
    background-color:var(--primarycolor);
}
/*registration section,end/

/*contact form section*/
.contactbox{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:30px;
    background-color: var(--primarycolor);
}

.contactcontent{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding:20px;
    gap:25px;
    background-color: var(--primarycolor);
}

.contactform{
    width:50%;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;  
} 

label{
    font-family:calibri;
    font-weight: bold;
    font-size: 18px;
    color:var(--secondarycolor); 
}

input{
    width:400px;
    height:40px;
    font-size:16px;
    padding:15px;
    border-radius:10px;
    border:none;
    margin-bottom: 10px;
    background-color:#c5c4c5;  
}

.firstname,.lastname,.email,.message,.submit{
    display: flex;
    flex-direction: column;
    margin-left:20px;
}

textarea{
    height:100px;
    font-size:16px;
    padding:15px;
    border-radius:10px;
    border:none;
    margin-bottom: 10px;
    background-color:#c5c4c5;  
}

.submit{
    display:flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    background-color: var(--primarycolor);
}
.submit input{
    width:125px;
    font-size: 18px;
    font-family: Indie Flower;
    font-weight: bold;
    padding:8px;
    border-radius: 25px; 
}

input:focus{
    outline:1px solid black;
}

.contactimgbox img{
    display:none;
    padding:5px;
    margin-top:10px;  
    border-radius: 25px;
}
/*contact form section, end*/

/*location info section*/
.location{
    height: 500px;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color:var(--secondarycolor);
}

.location p{
    height:150px;
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    padding-top:45px;
    color:#05d361;   
}

.location a{
    text-decoration: none;
    font-family: calibri;
    font-size:20px;
    font-weight: bold;
    margin-bottom: 30px;
}
/*location info section, end*/

/*Studio hours section*/
.studiohours{
    height: 400px;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:30px;
    background-color:var(--secondarycolor); 
}

.studio{
    display: flex;
    flex-flow:row;
    align-items: center;
    justify-content: center;
}

.studio p{
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    color:#05d361;
    text-align: center;  
    padding-top:20px;  
}

.hours{
    display:flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;  
    gap:30px;
}

.hours h2{
    font-family: calibri;
    color:#676b96;  
    font-size: 28px;  
}

.closed{
    width:180px;
    height:50px;
    display: flex;
    flex-flow:row;
    align-items: center;
    justify-content: center;
    background-color:#dbd8db; 
    border-radius: 25px;
    margin-bottom: 60px;
}

.closed p{
    width:125px;
    color:black;
    font-size: 18px;
    font-family: Indie Flower;
    font-weight: bold;
    padding:8px;   
} 
/*studio hours section*/
/*contact page,end*/

}



/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

/*home page*/

.welcome p{
    font-size:28px;
    font-family: "Indie flower",kristen itc;
    align-items: center;
    color:var(--secondarycolor);
    padding-left:8px;
    padding-right: 8px;
}

.homelogo{
    width:35%;
    margin-left:10px;
}

.classbox{
    display:flex;
    flex-flow:row wrap;
    align-items: center;
    justify-content: space-between;  
    padding:0 20px;
    background-color:var(--secondarycolor);
}

.box1,.box2,.box3,.box4{
    width:48%;
    height:300px;
    display: flex;
    align-items: center;
    justify-content: center;  
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    border-radius:20px; 
    margin-bottom:45px;  
}

.voicesbox{
    display:flex;
    flex-flow:row wrap;
    width:100%;
    align-items: center;
    justify-content: center;
    gap:50px;
    background-color: var(--primarycolor);
}

.sophie,.marc,.sarah{
    width:25%;
    height:300px;
    border-radius: 30px;
    display:flex;
    flex-flow: column wrap;
    margin-bottom: 50px;  
}

.sophieleft,.marcleft{
    width: 50%;
    margin-bottom: 10px;
    margin-top:10px;
    margin-right:70px;
}

.sophieright,.marcright{
    width:100%;
    display:flex;
    flex-flow:row;
    padding:10px 10px 10px 10px;
 }

.sophieleft,.sophieright p, .marcleft,.marcright p,.sarah p{
    font-family: calibri;
    font-size: 14px;
}

.sophieimgbox,.marcimgbox{
    width: 85%;
    height:auto;
    border-radius: 50%;
    margin-top: 10px;
    margin-bottom: -40px;
    margin-left:90px;
}

.sophie img ,.marc img{
    width:100%;
    object-fit: cover;
    height:auto;
    border-radius: 50%;
    display:flex;
    align-items: center;
}

.sarahpara{
    padding-left: 20px;
    padding-right:20px;
    margin-bottom: 70px;
 }
 /*home page,end*/

/*styles page*/
.acrylicwrap,.watercolorwrap,.creativewrap,.mixedmediawrap{
    display:flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap:15px;
}

.acrylicpic,.watercolorpic,.creativepic,.mixedmediapic{
    width:47%;
    object-fit: cover;
}

.acrylicpic img,.watercolorpic img,.creativepic img,.mixedmediapic img{
    width:100%;
    height:270px;
    display:block;
    object-fit: cover;    
    border-radius: 25px;
}

.acrylictext,.watercolortext,.creativetext,.mixedmediatext{
    width:47%;
    height:270px;
    font-size:18px;
    padding-left: 10px;
    padding-right:10px;
    background-color:var(--tertiarycolor);
    border-radius: 25px;
    padding-top: 15px;
}


/*footer*/
footer{
    background-color: var(--primarycolor);
    height:150px;
    display:flex;
    align-items: center;
}

.footerlogo{
    width:30%;
}

.footerlogo img{
    width:100%;
    height:auto;
}

.socials{
    width:35%;
    display:flex;
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:5px;
    padding-right: 30px;
}

.socials img{
    width:100%;
    height:35px;
    object-fit: cover;
}

.contact{
    width:35%;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
}

.contact p{
    font-size: 14px;
    font-family: calibri;
    font-weight: bold;
    color:white;
}

/*footer,end*/

/*styles page,end*/

/*workshop page*/

.upcomingbox{
    width:100%;
    height:800px;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color:#44969a ;
    gap:20px;
}

.upcomingcontent{
    width:50%;
    height:220px;
    text-align: center;
    border-radius: 0;
    padding-top:15px;
    border-radius: 20%;
}

.artist{
    margin-right:0;
    margin-top:0;

    background-color:#ff0000 ;
}

.color{
    background-color:#e4ca04;
    margin-top:0;
    margin-bottom:0;
    margin-left:0;
}

.texture{
    margin-bottom:0;
    margin-right:0;
    background-color:#627dd5 ;
}

.allclass{
    width:85%;
    display:flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    padding-top:40px;
    padding-bottom:40px;
    gap:20px;
}

.monday,.tuesday,.wednesday,.thursday,.saturday,.sunday{
    flex:0 0 calc(50% - 20px);
    height:270px;
    padding:20px;
    font-family: calibri;
    text-align: center;
    border-radius: 40px;
}
/*workshop page, end*/

/*gallery page*/
/*galleryaa*/
.galleryaa{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:5px;
}

.aa1box img,.aa2box img,.aa4box img,.aa5box img{
    width:100%;
    height:250px;
    display:block;
    object-fit: cover;
}

.aa3box img{
    width:100%;
    height:500px;
    display:block;
    object-fit: cover;
}

.aa3box{
    grid-column: 3;
    grid-row:1/3;
}
/*galleryaa, end*/

/*galleryw*/
.galleryw{
    display:grid;  
    grid-template-columns:repeat(3, 1fr);
    gap:5px;
}

.w1box img,.w2box img,.w4box img,.w5box img{
    width:100%;
    height:250px;
    display:block;
    object-fit: cover;
}

.w3box img{
    width:100%;
    height:500px;
    display:block;
    object-fit: cover;
}

.w3box{
    grid-column: 3;
    grid-row:1/3;
}
/*galleryw, end*/

/*gallerydd*/
.gallerydd{
    display:grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap:5px;
}

.dd1box img,.dd2box img,.dd4box img,.dd5box img{
    width:100%;
    height:250px;
    display:block;
    object-fit: cover;
}

.dd3box img{
     width:100%;
    height:500px;
    display:block;
    object-fit: cover;
}

.dd3box{
    grid-column: 3;
    grid-row:1/3;
}
/*gallerydd, end*/

/*gallerymm*/
.gallerymm{
    display:grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap:5px;
}

.mm1box img,.mm2box img,.mm4box img,.mm5box img{
    width:100%;
    height:250px;
    display:block;
    object-fit: cover;
}

.mm3box img{
     width:100%;
    height:500px;
    display:block;
    object-fit: cover;
}

.mm3box{
    grid-column: 3;
    grid-row:1/3;
}
/*gallerymm, end*/

/*gallery page, end*/

/*contact page*/
/*registration section*/
.registration{
    display:flex;
    flex-flow:column;
    align-items: center;
    justify-content: center;
    gap:30px;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}

.regtitle{
    display:flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    width:100%;
    font-size:45px;
    font-family: "Indie flower",kristen itc;
    color:#F1E7F0; 
    padding:30px;
    text-align: center;
}

.regclassbox{
    display:flex;
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:35px; 
    margin-bottom: 60px;
    padding:0 50px;
}

.regclassbox div{
    flex: 0 0 calc(50% - 18px);
    align-items: center;
    justify-content: center;
}

.regap,.regw,.regcd,.regmm,.regsat,.regsun{
    display:flex;
    flex-flow:column; 
}

.regap,.regcd,.regsat{
    margin-right:0;
}

.regw,.regmm,.regsun{
    margin-left:0;
}

/*registration section,end/

/*contact form section */
.contactbox{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:30px;
    background-color: var(--primarycolor);
}

.contactcontent{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding:20px;
    gap:25px;
    background-color: var(--primarycolor);
}

.contactform{
    width:50%;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;  
} 

input{
    width:450px;
    height:40px;
    font-size:16px;
    padding:15px;
    border-radius:10px;
    border:none;
    margin-bottom: 10px;
    background-color:#c5c4c5;  
}

.name{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap:20px;
}
.firstname input,.lastname input{
    width:200px;
}

.firstname,.lastname,.email,.message,.submit{
    display: flex;
    flex-direction: column;
}

.contactimgbox img{
    display:none;
    padding:5px;
    margin-top:10px;  
    border-radius: 25px;
}
/*contact form section, end*/

/*contact page, end*/

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

/*homge page*/
.classbox{
    display:flex;
    flex-wrap:nowrap;
    align-items: center;
    justify-content: space-between;  
    padding:0 20px;
    gap:25px;
}

.box2 a,.box4 a{
    margin-bottom:60px;
}

.box1,.box2,.box3,.box4{
    width:22%;
    height:300px;
    align-items: end;
    padding:20px;
    margin-left: 10px;
    margin-right: 10px;
}

.voicesbox{
    display:flex;
    flex-flow:nowrap;
    width:100%;
    align-items: center;
    justify-content: center;
    gap:50px;
}

.sophie,.marc,.sarah{
    width:25%;
    height:400px;
    border-radius: 30px;
    display:flex;
    flex-flow:column wrap;
    margin-bottom: 50px;  
}

.sophieleft,.marcleft{
    width:35%;
    display:flex;
    flex-direction:column;
    padding-left:0; 
}

.sophieright,.marcright{
    width:65%;
    display:flex;
    flex-flow:column;
    padding-right:10px;
    padding-left:15px;
}

.sarahpara{
    padding-left: 25px;
    padding-right: 25px;
    margin-top:2px;
 }

 .sophieleft,.sophieright p, .marcleft,.marcright p,.sarah p{
    font-family: calibri;
    font-size: 20px;
}

.sophieimgbox,.marcimgbox{
    width: 85%;
    height:auto;
    border-radius: 50%;
    margin-bottom: 30px; 
    margin-left:2px;
}

.videobox{
    width:100%;
    display:flex;
    flex-flow:row wrap;
    justify-content: center;
    gap:70px;
    background-color:var(--tertiarycolor);
}

.videobox video{
    width:40%;
    border-radius:20px;
}

footer{
    background-color:var(--primarycolor);
    height:150px;
    display:flex;
    align-items: center;
}

.footerlogo{
    width:20%;
    margin-top:20px;
}

.footerlogo img{
    width:100%;
    height:auto;      
}

.socials{
    width:50%;
    display:flex;
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:30px;
    padding-left:60px;
}

.socials img{
    width:100%;
    height:auto;
}

.contact{
    width:30%;
    display:flex;
    flex-direction: column;
    padding-left:60px;
}

.contact p{
    font-size: 18px;
    font-family: calibri;
    color:white;
}
/*homge page,end*/

/*styles page*/

.acrylicwrap,.watercolorwrap,.creativewrap,.mixedmediawrap{
    display:flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;    
}

.acrylicpic,.watercolorpic,.creativepic,.mixedmediapic{
    width:60%;
    object-fit: cover;
}

.acrylicpic img,.watercolorpic img,.creativepic img,.mixedmediapic img{
    width:100%;
    height:262px;
    display:block;
    object-fit: cover; 
    border-radius: 0;   
}

.reverseimg{
    order:1;
}

.acrylictext,.watercolortext,.creativetext,.mixedmediatext{
    width:38%;
    height:262px;
    background-color:var(--tertiarycolor);
    padding:20px;
    border-radius: 0;
}

.faqbox{
    width:100%;
    height:auto;
    display:flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
}

.faq1{
    width:50%;
    height:530px;
    font-family: calibri;
    font-size: 20px;
    padding-top:10px;
    padding-left: 30px;
    padding-right: 20px;
    background-color: var(--tertiarycolor); 
}

.faq2{
    width:50%;
    height:530px;
    font-family: calibri;
    font-size: 20px;
    padding-top:10px;
    padding-left: 30px;
    padding-right: 20px; 
    background-color: #1d3387; 
}

/*styles page,end*/

/*workshop page*/
.upcomingbox{
    width:100%;
    height:400px;
    display:flex;
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    background-color:#44969a ;
    gap:20px;
}

.upcomingcontent{
    width:30%;
    display:flex;
    justify-content: center;
    align-items: center;   
    height:260px;
    text-align: center;
    border-radius: 0;
    padding-top:10px;
    padding-bottom: 15px;
    border-radius: 20%;
}

.roundbox1,.roundbox2,.roundbox3{
    display:none;
}

.allclass{
    width:85%;
    display:flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
    padding-top:40px;
    padding-bottom:40px;
    gap:20px;
}

.monday,.tuesday,.wednesday,.thursday,.saturday,.sunday{
    flex:0 0 calc(33.333% - 20px);
    height:270px;
    padding:20px;
    font-family: calibri;
    text-align: center;
    border-radius: 40px;
}
/*workshop page, end*/

/*gallery page*/
.galleryaa{
    display:flex;  
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:5px;
}
  
.aa3box,.aa4box,.aa5box{
    flex:0 0 calc(33.33% - 3.33px)
}

.aa1box,.aa2box{
    flex: 0 0 calc(50% - 2.5px);
}

.aa1box img,.aa2box img,.aa3box img,.aa4box img,.aa5box img{
    width:100%;
    height:250px;
    display:block;
    object-fit: cover;
}

/*galleryaa, end*/

/*galleryw*/
.galleryw{
    display:flex;  
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:5px;
}

.w1box,.w2box{
    flex: 0 0 calc(50% - 2.5px);
}
.w3box,.w4box,.w5box{
    flex:0 0 calc(33.33% - 3.33px);
}

.w1box img,.w2box img,.w3box img,.w4box img,.w5box img{
    width:100%;
    height:250px;
    display:block;
    object-fit: cover;
}
/*galleryw, end*/

/*gallerydd*/
.gallerydd{
    display:flex;  
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:5px;
}

.dd1box,.dd2box{
    flex: 0 0 calc(50% - 2.5px);
}
.dd3box,.dd4box,.dd5box{
    flex:0 0 calc(33.33% - 3.33px);
}

.dd1box img,.dd2box img,.dd3box img,.dd4box img,.dd5box img{
    width:100%;
    height:250px;
    display:block;
    object-fit: cover;
}
/*gallerydd, end*/

/*gallerymm*/
.gallerymm{
    display:flex;  
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:5px;
}

.mm1box,.mm2box{
    flex: 0 0 calc(50% - 2.5px);
}
.mm3box,.mm4box,.mm5box{
    flex:0 0 calc(33.33% - 3.33px);
}

.mm1box img,.mm2box img,.mm3box img,.mm4box img,.mm5box img{
    width:100%;
    height:250px;
    display:block;
    object-fit: cover;
}
/*gallerymm, end*/

/*gallery page, end*/

/*contact page*/
/*registration section*/
.regclassbox{
    display:flex;
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    gap:20px; 
    margin-bottom: 60px;
    padding:0 50px;
}

.regclassbox div{
    flex: 0 0 calc(33.33% - 40px);
    align-items: center;
    justify-content: center;
}

.regap,.regw,.regcd{
    margin-bottom:25px;
}
/*registration section,end*/

/*contact form section*/
.contactbox{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding:30px;
    background-color: var(--primarycolor);
}

.contactcontent{
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding:20px;
    gap:80px;
    background-color: var(--primarycolor)
}

.contactform{
    width:50%;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;  
} 

input{
    width:350px;
    height:40px;
    font-size:16px;
    padding:15px;
    border-radius:10px;
    border:none;
    margin-bottom: 10px;
    background-color:#c5c4c5;  
}

.name{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:5px;
}

.firstname input,.lastname input{
    width:350px; 
}

.contactimgbox{
    width:50%;

}
.contactimgbox img{
    display: flex;
    height:350px;
    flex-flow:row;
    padding:5px;
    margin-top:10px;  
    border-radius: 25px;
    object-fit: cover;
}
/*contact form section,end*/
/*contact page, end*/


}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}