/*VIDEO STUFF*/
/*FLEX BOX*/
/*LIVE SITE BUTTON DESKTOP*/
/*tablet and mobile stuff*/
body {
  width: 100%;
  background-color: white;
  font-size: 100%;
  font-family: "Queensides";
  font-weight: normal;
  font-style: normal;
  color: #032440;
}

img {
  max-width: 100%;
}

/*nav section*/
a {
  text-decoration: none;
  color: #032440;
}

#desktopnavbar {
  background-color: #5a618b;
}

#desktoplogoandtextcontain {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: auto;
  padding-top: 10px;
}

#desktoplogo {
  width: 25%;
}

#desktoplogo a:hover {
  opacity: 0.5;
  transition-timing-function: ease-in;
}

#desktopnavlinks {
  width: 25%;
  justify-content: center;
  margin: auto;
}

#desktopnavlinks a {
  color: #FFFFFF;
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  padding-left: 20px;
}

#desktopnavlinks a:hover {
  color: #22ABBB;
}

#desktopnavemail {
  width: 8%;
  padding-right: 10px;
}

#desktopnavemail a:hover {
  transition: 0.3s ease-in;
  opacity: 0.7;
}

#desktopnavlinkedin {
  width: 8%;
  padding-right: 10px;
}

#desktopnavlinkedin a:hover {
  transition: 0.3s ease-in;
  opacity: 0.7;
}

#tabletmobilelogohome {
  display: none;
}

/*homepage*/
/*image gallery section*/
.homeimgcontainer {
  padding: 1em 0;
  float: left;
  width: 50%;
  background-color: white;
}

.homeimgcontainer {
  width: 33.33333%;
}

.homeimgcontainer .title {
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 10px;
}

.content {
  position: relative;
  width: 90%;
  max-width: 400px;
  margin: auto;
  overflow: hidden;
}

.content .content-overlay {
  background: rgba(3, 36, 64, 0.5);
  position: absolute;
  height: 99%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay {
  opacity: 1;
}

.content-image {
  width: 100%;
  background-color: white;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details {
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3 {
  color: white;
  margin-bottom: 0.5em;
  font-size: 20px;
  text-align: center;
}

.content-details p {
  color: #fff;
  font-size: 0.8em;
}

.fadeIn-bottom {
  top: 80%;
}

#tmghomegallery {
  display: none;
}

#tmhflex {
  display: none;
}

/*image gallery ends*/
/*footer*/
footer {
  width: 100%;
}

#footerbackground {
  width: 100%;
}

#footeritemscontainer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  padding-top: 20px;
  padding-bottom: 10px;
  background-color: #5a618b;
}

/*footer logo*/
#footerlogo {
  width: 25%;
}

#footerlogo a:hover {
  opacity: 0.5;
  transition-timing-function: ease-in;
}

/*footericons section*/
#footericonscontainer {
  width: 23%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
}

/*email section*/
#emailiconcontainer {
  width: 25%;
}

#emailiconcontainer a:hover {
  color: #FFFFFF;
  transition: 0.3s ease-in;
  opacity: 0.7;
}

/*linkedin section*/
#linkediniconcontainer {
  width: 25%;
}

#linkediniconcontainer a:hover {
  color: #FFFFFF;
  transition: 0.3s ease-in;
  opacity: 0.7;
}

#bottomfootertext {
  font-family: "Queensides";
  font-weight: normal;
  font-style: normal;
  text-align: center;
  color: #ffffff;
  font-size: 13px;
  padding-bottom: 10px;
  background-color: #5a618b;
}

/*creative code project page */
#creativecodehero {
  text-align: center;
}

#cctitleblurb {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  padding-top: 20px;
  padding-bottom: 10px;
  color: #032440;
  text-align: center;
}

.projectinfotext {
  font-family: "Queensides";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-bottom: 20px;
  padding-top: 20px;
  width: 90%;
}

#ccblurbimgcontain {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

#ccimgcontain {
  width: 100%;
  margin: auto;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

#ccimgnexttext {
  width: 90%;
  margin: auto;
}

#ccartworkfinalcontain {
  width: 100%;
  text-align: center;
}

#option1 {
  width: 100%;
}

#option2 {
  width: 100%;
}

#option3 {
  width: 100%;
}

#option4 {
  width: 100%;
}

#developmentwork {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #ce2659;
  color: #ffffff;
}

#ccdevslide {
  background-color: #ce2659;
  padding-bottom: 15px;
}

/*cremesoda project section*/
#sodaprojectheroimg {
  width: 100%;
  text-align: center;
  margin: auto;
}

/*branding sheet and text container*/
#mobilebrandingsheet {
  display: none;
}

#sodablurbtitle {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  padding-top: 20px;
  padding-bottom: 10px;
  color: #032440;
  text-align: center;
}

#sodatextinfo {
  font-family: "Queensides";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-bottom: 20px;
  padding-top: 20px;
  width: 90%;
}

#sodasitetextcontain {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  padding-top: 20px;
  padding-bottom: 20px;
}

/*cream soda website*/
#cremesodawebsitecontain {
  width: 100%;
}

#websitephoto {
  padding-top: 10px;
  width: 90%;
  text-align: center;
  margin: auto;
}

#sodawebbuttoncontain {
  width: 50%;
  margin: auto;
  padding-top: 15px;
  padding-bottom: 15px;
}

#sodabuttongroup :hover {
  color: #5a618b;
}

#sodabuttongroup {
  background-color: #22ABBB;
}

#sodasitetext {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #ffffff;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

/*product image section*/
#videoandpacktext {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #578355;
  color: #ffffff;
}

#arvidandstillpackcontain {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  background-color: #578355;
}

#arvideo {
  width: 44%;
  padding-top: 10px;
  padding-bottom: 10px;
}
#arvideo video {
  width: 100%;
}

#mintimg {
  width: 44%;
  padding-top: 10px;
  padding-bottom: 10px;
}

#lemonimg {
  width: 44%;
  padding-top: 10px;
  padding-bottom: 10px;
}

#caramelimg {
  width: 44%;
  padding-top: 10px;
  padding-bottom: 10px;
}

/*soda social media section*/
#sodasocialmediacontainer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  margin: auto;
}

#sodasmtext {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

#mintsmcontainer {
  width: 33%;
  text-align: center;
}
#mintsmcontainer video {
  width: 90%;
}

#caramelsmcontainer {
  width: 33%;
  text-align: center;
}
#caramelsmcontainer video {
  width: 90%;
}

#lemonsmcontainer {
  width: 33%;
  text-align: center;
}
#lemonsmcontainer video {
  width: 90%;
}

/*merch section*/
#merchcontainer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #8bbd98;
}

#merchsodatext {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #ffffff;
}

#mintmerch {
  width: 100%;
  text-align: center;
}

#caramelmerch {
  width: 100%;
  text-align: center;
}

#lemonmerch {
  width: 100%;
  text-align: center;
}

#brandingsheet {
  width: 90%;
  margin: auto;
}

/*magazine spread*/
#magazineheroimg {
  width: 40%;
  margin: auto;
}

#redback {
  background-color: #A84142;
}

#magblurbandimgcontain {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#magazineblurbtitle {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  padding-top: 20px;
  padding-bottom: 10px;
  color: #032440;
  text-align: center;
}

#magazineaboutext {
  font-family: "Queensides";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-bottom: 20px;
  padding-top: 20px;
  width: 90%;
}

#magimgcontain {
  width: 100%;
  padding-top: 10px;
}

#magimtext {
  width: 90%;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

/*flat spreads*/
#magflattitle {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #f6f1e1;
}

#magflatspreadcontain {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: #f6f1e1;
  padding-bottom: 15px;
  padding-left: 10px;
  padding-right: 10px;
}

#flatspread1 {
  width: 49%;
}
#flatspread1 img {
  filter: drop-shadow(5px 5px 8px #000000);
}

#flatspread2 {
  width: 49%;
}
#flatspread2 img {
  filter: drop-shadow(5px 5px 8px #000000);
}

#magdevtext {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #f6f1e1;
}

#magazineslide {
  background-color: #f6f1e1;
  padding-bottom: 15px;
}

#magmockupstext {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

#magmockupcontain {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-right: 10px;
}

#spread1 {
  width: 55%;
}

#spread2 {
  width: 55%;
}

/*playing cards section*/
#playingcardsheroimg {
  width: 100%;
  text-align: center;
}

#cardblurbandimgcontain {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

#cardblurbtitle {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  padding-top: 20px;
  padding-bottom: 10px;
  color: #032440;
  text-align: center;
}

#playingcardtextcontain {
  font-family: "Queensides";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-bottom: 20px;
  padding-top: 20px;
  width: 90%;
}

/*promotional website section*/
#websiteimage {
  width: 90%;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

/*live site button*/
#cardsitebuttoncontain {
  width: 50%;
  margin: auto;
  padding-top: 15px;
  padding-bottom: 15px;
}

#sitebuttongroup {
  background-color: #22ABBB;
}

#sitebuttongroup :hover {
  color: #5a618b;
}

#sitebtext {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #ffffff;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

/*face card section*/
#facecardtext {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #abadc3;
  color: #FFFfff;
}

#facecardscontain {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
  margin: auto;
  background-color: #abadc3;
}

#kingcard {
  width: 44%;
  padding-top: 10px;
  padding-bottom: 10px;
}

#queencard {
  width: 44%;
  padding-top: 10px;
  padding-bottom: 10px;
}

#jackcard {
  width: 44%;
  padding-top: 10px;
  padding-bottom: 10px;
}

#jokercard {
  width: 44%;
  padding-top: 10px;
  padding-bottom: 10px;
}

/*number cards section*/
#numbercardstext {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

#numbercardscontain {
  width: 100%;
  text-align: center;
}

.flowercardtext {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

#mobilenumbercards {
  display: none;
}

/*Peeps and docs section*/
#docsherocontain {
  width: 100%;
  text-align: center;
}

#docsheroimage {
  width: 100%;
  text-align: center;
  margin: auto;
}

#docstextandvideocontain {
  width: 100%;
  display: flex;
  justify-content: center;
}

#blurbpeepsdoccontain {
  font-family: "Queensides";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-bottom: 20px;
  padding-top: 20px;
  width: 90%;
}

#peepsdoctitle {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  padding-top: 20px;
  padding-bottom: 10px;
  color: #032440;
  text-align: center;
}

#docpeepsvideo {
  width: 100%;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}
#docpeepsvideo video {
  width: 90%;
  text-align: center;
  margin: auto;
}

/*store section*/
#storeimagescontain {
  background-color: #9c85b1;
  display: flex;
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

#storeimgtext {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #9c85b1;
  color: #ffffff;
}

#outsidestoreimg {
  width: 33%;
  text-align: center;
  margin: auto;
}

#insidestoreimg {
  width: 50%;
  text-align: center;
  margin: auto;
}

/*peeps doc merch section*/
#peepsmerchtext {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #9c85b1;
  color: #ffffff;
}

/*peeps socail media sec*/
#peepsdocsocialtext {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

#peepssocailmediacontain {
  width: 100%;
}

#peepssmgroupmobile {
  display: none;
}

/*mail kit section*/
#peepsmailtext {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

#peepsmailimgcontain {
  width: 100%;
  display: flex;
}

#mailerbox {
  width: 55%;
  text-align: center;
  margin: auto;
}

#mailmerch {
  width: 55%;
  text-align: center;
  margin: auto;
}

/*recipe cards section*/
#recipecardstext {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #9c85b1;
  color: #ffffff;
}

#recipecardscontain {
  display: flex;
  justify-content: center;
  text-align: center;
  background-color: #9c85b1;
}

#recipeimages img {
  width: 33%;
  padding-bottom: 25px;
}

#peepsmerchslide {
  background-color: #9c85b1;
  padding-bottom: 15px;
}

/*app section*/
#appheroimg {
  width: 100%;
  text-align: center;
}

#appblurbtitle {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  padding-top: 20px;
  padding-bottom: 10px;
  color: #032440;
  text-align: center;
}

#apptextinfo {
  font-family: "Queensides";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-bottom: 20px;
  padding-top: 20px;
  width: 90%;
}

#appprototypelinkcontain {
  width: 50%;
  margin: auto;
  padding-top: 15px;
  padding-bottom: 15px;
}

#appsitebuttongroup {
  background-color: #22ABBB;
}

#appsitebtext {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #ffffff;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

#appsitebuttongroup :hover {
  color: #5a618b;
}

#tattextandvidcontain {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

/*walkthrough video*/
#walkthroughvideo {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  margin: auto;
}
#walkthroughvideo video {
  width: 90%;
}

#tatappdevslide {
  padding-bottom: 15px;
  background-color: #E0E0E0;
}

#tatapptext {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #E0E0E0;
}

/*branding sheet section*/
#brandingsheetapp {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}

#brandingsheetappcontain {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
}

#mobileappsheet {
  display: none;
}

/*sunglasses website section*/
#glassesheroimg {
  width: 100%;
  text-align: center;
  margin: auto;
}

#glassesblurbtitle {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  padding-top: 20px;
  padding-bottom: 10px;
  color: #032440;
  text-align: center;
}

#glassesabouttext {
  font-family: "Queensides";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-bottom: 20px;
  padding-top: 20px;
  width: 90%;
}

#glassesaboutimgcontain {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}

#websitevideocontain {
  width: 100%;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
}
#websitevideocontain video {
  width: 90%;
  text-align: center;
  margin: auto;
}

#glassessitebuttoncontain {
  width: 50%;
  margin: auto;
  padding-top: 15px;
  padding-bottom: 15px;
}

#glassesbuttongroup {
  background-color: #22ABBB;
}

#glasssitetext {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #ffffff;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

#glasssitetext:hover {
  color: #5a618b;
}

#tabletphonecontain {
  width: 100%;
  display: flex;
  flex-direction: row;
  background-color: #6530b4;
}

#phoneglassesmockup {
  width: 33%;
  margin: auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

#tabletmockup {
  width: 33%;
  margin: auto;
}

#desktopmockupcontain {
  width: 33%;
  margin: auto;
}

#sunglassesbrandingsheetdesktop {
  width: 100%;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

#sunglassesbrandingsheetmobile {
  display: none;
}

#glassdevtext {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #6530b4;
  color: #ffffff;
}

#glassdevslide {
  background-color: #6530b4;
  padding-bottom: 15px;
}

/*kinetictype*/
#heroimgkinetictype {
  width: 100%;
  text-align: center;
}

#typeblurbandvidcontain {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
}

#kinetictypeblurbcontain {
  font-family: "Queensides";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-bottom: 20px;
  padding-top: 20px;
  width: 90%;
}

#kinetictypetitle {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  padding-top: 20px;
  padding-bottom: 10px;
  color: #032440;
  text-align: center;
}

#typestoryboardsec {
  font-family: "Queensides";
  font-weight: bold;
  font-style: normal;
  font-size: 25px;
  color: #032440;
  text-align: center;
  margin: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #ffffff;
}

#kineticstoryboard {
  width: 80%;
  text-align: center;
  margin: auto;
}

#storycontain {
  background-color: #49c1c8;
}

#kinetictest {
  width: 100%;
}

#kineticvideo {
  width: 90%;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  margin: auto;
}
#kineticvideo video {
  width: 90%;
  text-align: center;
  margin: auto;
}

/*tablet*/
@media screen and (min-width: 600px) and (max-width: 900px) {
  body {
    background-color: white;
  }
  #desktopnavbar {
    display: none;
  }
  /*nav section*/
  #tabletmobilelogohome {
    display: block;
    width: 100%;
    background-color: #5a618b;
  }
  #tabletmobilelogohome img {
    width: 50%;
  }
  #tabletmobilelogohome a:hover {
    opacity: 0.5;
    transition-timing-function: ease-in;
  }
  #contactdroptext {
    line-height: 90px;
  }
  .homeimgcontainer {
    display: none;
  }
  #tmghomegallery {
    display: contents;
    width: 100%;
  }
  #tmhflex {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .tmtext {
    font-family: "Queensides";
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #hproject1 {
    width: 50%;
  }
  #hproject2 {
    width: 50%;
  }
  #hproject3 {
    width: 50%;
  }
  #hproject4 {
    width: 50%;
  }
  #hproject5 {
    width: 50%;
  }
  #hproject6 {
    width: 50%;
  }
  #hproject7 {
    width: 50%;
  }
  #hproject8 {
    width: 50%;
  }
  /*footer*/
  /*footer logo*/
  #footerlogo {
    width: 40%;
  }
  /*footericons section*/
  #footericonscontainer {
    width: 30%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-around;
  }
  /*email section*/
  #emailiconcontainer {
    width: 30%;
  }
  /*linkedin section*/
  #linkediniconcontainer {
    width: 30%;
  }
  /*creative code project page */
  #heroimgandprojecttextcontain {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
  #ccblurbimgcontain {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
  }
  #ccimgcontain {
    width: 100%;
    padding-top: 10px;
    text-align: center;
    margin: auto;
  }
  #ccimgnexttext {
    width: 100%;
    margin: auto;
  }
  #cctitleblurb {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 25px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  .projectinfotext {
    font-family: "Queensides";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #projectimage {
    width: 50%;
  }
  #developmentwork {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
    color: #ffffff;
  }
  /*cremesoda project section*/
  /*branding sheet and text container*/
  #mobilebrandingsheet {
    display: none;
  }
  #brandingsheet {
    width: 100%;
    padding-left: 0;
  }
  #sodablurbtitle {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 25px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #sodatextinfo {
    font-family: "Queensides";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  /*product image section*/
  #sodasitetextcontain {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  /*cream soda website*/
  #cremesodawebsitecontain {
    width: 100%;
  }
  #websitephoto {
    width: 100%;
  }
  #sodawebbuttoncontain {
    width: 30%;
    margin: auto;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  #sodabuttongroup {
    background-color: #22ABBB;
  }
  #sodabuttongroup :hover {
    color: #5a618b;
  }
  #sodasitetext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /*soda social media section*/
  #sodasmtext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #mintsmcontainer {
    width: 100%;
  }
  #mintsmcontainer video {
    width: 100%;
  }
  #caramelsmcontainer {
    width: 100%;
  }
  #caramelsmcontainer video {
    width: 100%;
  }
  #lemonsmcontainer {
    width: 100%;
  }
  #lemonsmcontainer video {
    width: 100%;
  }
  /*merch section*/
  #merchsodatext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
    color: #ffffff;
  }
  /*magazine spread*/
  #magazineheroimg {
    width: 60%;
  }
  #magblurbandimgcontain {
    flex-direction: column-reverse;
  }
  #magazineblurbtitle {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 25px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #magazineaboutext {
    font-family: "Queensides";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #magimtext {
    width: 100%;
  }
  /*flat spreads*/
  #magflattitle {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
    background-color: #f6f1e1;
  }
  #magflatspreadcontain {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #f6f1e1;
    padding-bottom: 15px;
    padding-top: 10px;
    padding-left: 0px;
    padding-right: 0px;
  }
  #flatspread1 {
    width: 100%;
  }
  #flatspread1 img {
    filter: drop-shadow(5px 5px 8px #000000);
  }
  #flatspread2 {
    width: 100%;
  }
  #flatspread2 img {
    filter: drop-shadow(5px 5px 8px #000000);
  }
  #magdevtext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #magazineslide {
    padding-bottom: 15px;
  }
  #magmockupstext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #magmockupcontain {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: auto;
    justify-content: center;
    padding-bottom: 10px;
    padding-left: 0px;
    padding-right: 0px;
  }
  #spread1 {
    width: 100%;
  }
  #spread2 {
    width: 100%;
  }
  /*Peeps and docs section*/
  #docsherocontain {
    width: 100%;
    text-align: center;
  }
  #docsheroimage {
    width: 100%;
    text-align: center;
    margin: auto;
  }
  #blurbpeepsdoccontain {
    font-family: "Queensides";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #peepsdoctitle {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 25px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #docpeepsvideo {
    width: 100%;
    text-align: center;
    margin: auto;
    padding-top: 10px;
  }
  #docpeepsvideo video {
    width: 100%;
    text-align: center;
  }
  /*store section*/
  #storeimagescontain {
    display: flex;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #storeimgtext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
    color: #ffffff;
  }
  #outsidestoreimg {
    width: 33%;
    text-align: center;
    margin: auto;
  }
  #insidestoreimg {
    width: 50%;
    text-align: center;
    margin: auto;
  }
  /*peeps doc merch section*/
  #peepsmerchtext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
    color: #ffffff;
  }
  /*peeps socail media sec*/
  #peepsdocsocialtext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #peepssocailmediacontain {
    width: 100%;
  }
  #peepssmgroupmobile {
    display: none;
  }
  /*mail kit section*/
  #peepsmailtext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #mailerbox {
    width: 55%;
    text-align: center;
    margin: auto;
  }
  #mailmerch {
    width: 55%;
    text-align: center;
    margin: auto;
  }
  /*recipe cards section*/
  #recipecardstext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
    color: #ffffff;
  }
  #recipecardscontain {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  #recipeimages img {
    width: 100%;
  }
  /*playing cards section*/
  /*face card section*/
  #cardblurbtitle {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 25px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #playingcardtextcontain {
    font-family: "Queensides";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #facecardtext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
    color: #ffffff;
  }
  #cardblurbandimgcontain {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  /*number cards section*/
  #numbercardstext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #numbercardstext p {
    display: none;
  }
  #mobilenumbercards {
    display: contents;
    width: 100%;
  }
  .flowercardtext {
    display: none;
  }
  /* website section*/
  #websiteimage {
    width: 100%;
    margin: auto;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  /*live site button*/
  #cardsitebuttoncontain {
    width: 30%;
    margin: auto;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  #sitebuttongroup {
    background-color: #22ABBB;
  }
  #sitebuttongroup :hover {
    color: #5a618b;
  }
  #sitebtext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #tabletmockup {
    width: 100%;
    margin: auto;
  }
  .container {
    display: none;
  }
  /*app section*/
  #appheroimg {
    width: 100%;
    margin: auto;
  }
  #appblurbtitle {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 25px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #apptextinfo {
    font-family: "Queensides";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #appprototypelinkcontain {
    width: 30%;
    margin: auto;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  #appsitebuttongroup {
    background-color: #22ABBB;
  }
  #appsitebtext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #appsitebuttongroup :hover {
    color: #5a618b;
  }
  #tatappdevslide {
    padding-bottom: 15px;
    background-color: #E0E0E0;
  }
  #tatapptext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
    background-color: #E0E0E0;
  }
  #tattextandvidcontain {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  /*branding sheet section*/
  #brandingsheetapp {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #brandingsheetappcontain {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #mobileappsheet {
    display: none;
  }
  /*walkthrough video*/
  #walkthroughvideo {
    width: 100%;
  }
  #walkthroughvideo video {
    width: 100%;
    text-align: center;
  }
  /*sunglasses website section*/
  #glassesheroimg {
    width: 100%;
    margin: auto;
  }
  #glassesblurbtitle {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 25px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #glassesabouttext {
    font-family: "Queensides";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #glassesaboutimgcontain {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  #phoneglassesmockup {
    width: 100%;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #tabletphonecontain {
    flex-direction: column;
  }
  #desktopmockupcontain {
    width: 100%;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #websitevideocontain {
    width: 100%;
    text-align: center;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  #websitevideocontain video {
    width: 100%;
    text-align: center;
  }
  #glassessitebuttoncontain {
    width: 30%;
    margin: auto;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  #glassesbuttongroup {
    background-color: #22ABBB;
  }
  #glasssitetext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #glasssitetext:hover {
    color: #5a618b;
  }
  #sunglassesbrandingsheetdesktop {
    width: 100%;
    text-align: center;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #sunglassesbrandingsheetmobile {
    display: none;
  }
  /*kinetictype*/
  #heroimgkinetictype {
    width: 100%;
    text-align: center;
  }
  #kinetictypeblurbcontain {
    font-family: "Queensides";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #typeblurbandvidcontain {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  #kinetictypetitle {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 25px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #typestoryboardsec {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
    color: #ffffff;
  }
  #kineticstoryboard {
    width: 100%;
    text-align: center;
  }
  #kinetictest {
    width: 100%;
  }
  #kineticvideo {
    width: 100%;
    text-align: center;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  #kineticvideo video {
    width: 90%;
    text-align: center;
    margin: auto;
  }
}
/*mobile*/
@media screen and (max-width: 574px) {
  body {
    width: 100%;
    background-color: white;
  }
  /*nav section*/
  #desktopnavbar {
    display: none;
  }
  #tabletmobilelogohome {
    display: block;
    width: 100%;
    background-color: #5a618b;
  }
  #tabletmobilelogohome img {
    width: 60%;
  }
  .topnav {
    display: none;
  }
  #tabletmobilelogohome a:hover {
    opacity: 0.5;
    transition-timing-function: ease-in;
  }
  #contactdroptext {
    line-height: 90px;
  }
  .homeimgcontainer {
    display: none;
  }
  #tmghomegallery {
    display: contents;
    width: 100%;
  }
  #tmhflex {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .tmtext {
    font-family: "Queensides";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #hproject1 {
    width: 100%;
  }
  #hproject2 {
    width: 100%;
  }
  #hproject3 {
    width: 100%;
  }
  #hproject4 {
    width: 100%;
  }
  #hproject5 {
    width: 100%;
  }
  #hproject6 {
    width: 100%;
  }
  #hproject7 {
    width: 100%;
  }
  #hproject8 {
    width: 100%;
  }
  /*footer*/
  /*footer logo*/
  #footerlogo {
    width: 60%;
  }
  /*footericons section*/
  #footericonscontainer {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /*email section*/
  #emailiconcontainer {
    width: 30%;
    margin: auto;
  }
  /*linkedin section*/
  #linkediniconcontainer {
    width: 30%;
    margin: auto;
  }
  /*creative code project page */
  .projectinfotext {
    font-family: "Queensides";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #cctitleblurb {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 25px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #ccblurbimgcontain {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
  }
  #projectimage {
    width: 100%;
  }
  #projectimage img {
    width: 100%;
    margin: auto;
  }
  #option1 {
    text-align: center;
  }
  #developmentwork {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
    color: #ffffff;
  }
  /*cremesoda project section*/
  /*branding sheet and text container*/
  #mobilebrandingsheet {
    display: contents;
    width: 100%;
  }
  #brandingsheet {
    display: none;
  }
  #sodablurbtitle {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 25px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #sodatextinfo {
    font-family: "Queensides";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #sodasitetextcontain {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  /*product image section*/
  #arvideo {
    width: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  #arvideo video {
    width: 100%;
  }
  #mintimg {
    width: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  #lemonimg {
    width: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  #caramelimg {
    width: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  /*soda social media section*/
  #sodasmtext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #mintsmcontainer {
    width: 100%;
  }
  #mintsmcontainer video {
    width: 100%;
  }
  #caramelsmcontainer {
    width: 100%;
  }
  #caramelsmcontainer video {
    width: 100%;
  }
  #lemonsmcontainer {
    width: 100%;
  }
  #lemonsmcontainer video {
    width: 100%;
  }
  /*merch section*/
  #merchsodatext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  /*cream soda website*/
  #websitephoto {
    width: 100%;
  }
  #sodawebbuttoncontain {
    width: 30%;
    margin: auto;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  #sodabuttongroup {
    background-color: #22ABBB;
  }
  #sodasitetext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /*magazine spread*/
  #magazineheroimg {
    width: 100%;
  }
  #magazineblurbtitle {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 25px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #magazineaboutext {
    font-family: "Queensides";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #magblurbandimgcontain {
    flex-direction: column-reverse;
  }
  #magimtext {
    width: 100%;
  }
  /*flat spreads*/
  #magflattitle {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
    background-color: #f6f1e1;
  }
  #magflatspreadcontain {
    width: 100%;
    display: flex;
    flex-direction: column;
    background-color: #f6f1e1;
    padding-bottom: 15px;
    padding-top: 10px;
    padding-left: 0px;
    padding-right: 0px;
  }
  #flatspread1 {
    width: 100%;
  }
  #flatspread1 img {
    filter: drop-shadow(5px 5px 8px #000000);
  }
  #flatspread2 {
    width: 100%;
  }
  #flatspread2 img {
    filter: drop-shadow(5px 5px 8px #000000);
  }
  #magdevtext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #magazineslide {
    padding-bottom: 15px;
  }
  #magmockupstext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #magmockupcontain {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: auto;
    padding-bottom: 10px;
    padding-left: 0px;
    padding-right: 0px;
  }
  #spread1 {
    width: 100%;
  }
  #spread2 {
    width: 100%;
  }
  /*playing cards section*/
  #playingcardsheroimg {
    width: 100%;
  }
  #playingcardtextcontain {
    font-family: "Queensides";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #cardblurbtitle {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 25px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #cardblurbandimgcontain {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  /*face card section*/
  #facecardtext {
    font-size: 20px;
  }
  #facecardscontain {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  #kingcard {
    width: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  #queencard {
    width: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  #jackcard {
    width: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  #jokercard {
    width: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
  }
  /*number cards section*/
  #numbercardstext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #numbercardstext p {
    display: none;
  }
  .flowercardtext {
    display: none;
  }
  #numbercardscontain {
    display: none;
  }
  #mobilenumbercards {
    display: contents;
    width: 100%;
  }
  /*promotional website section*/
  #websitecardscontain {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  #websiteimage {
    width: 100%;
    margin: auto;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  /*live site button*/
  #cardsitebuttoncontain {
    width: 30%;
    margin: auto;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  #sitebuttongroup {
    background-color: #22ABBB;
  }
  #sitebuttongroup :hover {
    color: #5a618b;
  }
  #sitebtext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  /*app section*/
  #appheroimg {
    width: 100%;
    margin: auto;
  }
  #appblurbtitle {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 25px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #apptextinfo {
    font-family: "Queensides";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #appprototypelinkcontain {
    width: 30%;
    margin: auto;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  #appsitebuttongroup {
    background-color: #22ABBB;
  }
  #appsitebtext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #appsitebuttongroup :hover {
    color: #5a618b;
  }
  #tatappdevslide {
    padding-bottom: 15px;
    background-color: #E0E0E0;
  }
  #tatapptext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
    background-color: #E0E0E0;
  }
  #tattextandvidcontain {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  /*branding sheet section*/
  #brandingsheetappcontian {
    display: none;
  }
  #mobileappsheet {
    display: block;
  }
  /*walkthrough video*/
  #walkthroughvideo {
    width: 100%;
  }
  #walkthroughvideo video {
    width: 100%;
    text-align: center;
  }
  /*sunglasses website section*/
  #glassesheroimg {
    width: 100%;
    margin: auto;
  }
  #tabletphonecontain {
    flex-direction: column;
  }
  #glassesaboutimgcontain {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  #glassesabouttext {
    font-family: "Queensides";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #glassesblurbtitle {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 25px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #phoneglassesmockup {
    width: 100%;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #desktopmockupcontain {
    width: 100%;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #websitevideocontain {
    width: 100%;
    text-align: center;
    margin: auto;
    padding-top: 10px;
  }
  #websitevideocontain video {
    width: 100%;
    text-align: center;
  }
  #glassessitebuttoncontain {
    width: 30%;
    margin: auto;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  #glassesbuttongroup {
    background-color: #22ABBB;
  }
  #glasssitetext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #glasssitetext:hover {
    color: #5a618b;
  }
  #tabletmockup {
    width: 100%;
  }
  #sunglassesbrandingsheetdesktop {
    display: none;
  }
  #sunglassesbrandingsheetmobile {
    display: contents;
    width: 100%;
    text-align: center;
  }
  /*kinetictype*/
  #heroimgkinetictype {
    width: 100%;
    text-align: center;
  }
  #kinetictypeblurbcontain {
    font-family: "Queensides";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #kinetictypetitle {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 25px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #typestoryboardsec {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
    color: #ffffff;
  }
  #kineticstoryboard {
    width: 100%;
    text-align: center;
  }
  #kinetictest {
    width: 100%;
  }
  #kineticvideo {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    margin: auto;
  }
  #kineticvideo video {
    width: 100%;
    text-align: center;
    margin: auto;
  }
  #typeblurbandvidcontain {
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  /*Peeps and docs section*/
  #docsherocontain {
    width: 100%;
    text-align: center;
  }
  #docsheroimage {
    width: 100%;
    text-align: center;
    margin: auto;
  }
  #docstextandvideocontain {
    flex-direction: column-reverse;
  }
  #blurbpeepsdoccontain {
    font-family: "Queensides";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    padding-left: 10px;
    padding-right: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #peepsdoctitle {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 25px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #docpeepsvideo {
    width: 100%;
    text-align: center;
    margin: auto;
    padding-top: 10px;
  }
  #docpeepsvideo video {
    width: 100%;
    text-align: center;
  }
  /*store section*/
  #storeimagescontain {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #storeimgtext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
    color: #ffffff;
  }
  #outsidestoreimg {
    width: 100%;
    text-align: center;
    margin: auto;
  }
  #insidestoreimg {
    width: 100%;
    text-align: center;
    margin: auto;
  }
  /*peeps doc merch section*/
  #peepsmerchtext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
    color: #ffffff;
  }
  /*peeps socail media sec*/
  #peepsdocsocialtext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #peepssocailmediacontain {
    display: none;
  }
  #peepssmgroupmobile {
    display: block;
    text-align: center;
    margin: auto;
  }
  /*mail kit section*/
  #peepsmailtext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
  }
  #peepsmailimgcontain {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #mailerbox {
    width: 100%;
    text-align: center;
    margin: auto;
  }
  #mailmerch {
    width: 100%;
    text-align: center;
    margin: auto;
  }
  /*recipe cards section*/
  #recipecardstext {
    font-family: "Queensides";
    font-weight: bold;
    font-style: normal;
    font-size: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #032440;
    text-align: center;
    margin: auto;
    color: #ffffff;
  }
  #recipecardscontain {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  #recipeimages img {
    width: 100%;
  }
}/*# sourceMappingURL=style.css.map */