
.frame {
	width: 1440px; height: 706px;
	position: relative;
	overflow: hidden;
}

#frame03, #frame09 {
	display: none;
}


/* -----------------BKGD BLOCKS----------------- */


.lightBlock {
	background-color: #FFF6DC;
	left: 0px; top: 0px;
	width: 1440px; height: 706px;
}

.medLightBlock {
	background-color: #FFDE89;
	left: 0px; top: 0px;
	width: 1440px; height: 706px;
}

#medLightBlock05-1 {
	left: 0px; top: 0px;
	width: 70px; height: 250px;
}

#medLightBlock05-2 {
	left: 900px; top: 0px;
	width: 70px; height: 250px;
}

.medDarkBlock {
	background-color: #FFDE89;
	left: 0px; top: 0px;
	width: 1440px; height: 706px;
}

.sidebar {
	background-color: #F5B400;
}

#medDarkBlock07-1 {
	left: 0px; top: 0px;
	width: 70px; height: 250px;
}

#medDarkBlock07-2 {
	left: 900px; top: 0px;
	width: 70px; height: 250px;
}

#medDarkSidebar05-1, #lightSidebar07-1 {
	left: 0px; top: 0px;
	width: 373px; height: 706px;
}

#medDarkSidebar05-2, #lightSidebar07-2 {
	left: 1066px; top: 0px;
	width: 373px; height: 706px;
}

#medLightBlock05-1, #medDarkBlock07-1 {
	left: 373px; top: 0px;
	width: 694px; height: 125px;
}

#medLightBlock05-2, #medDarkBlock07-2 {
	left: 373px; top: 669px;
	width: 694px; height: 37px;
}

.darkBlock {
	background-color: #F5B400;
	left: 0px; top: 0px;
	width: 1440px; height: 706px;
}

.xtraDarkBlock {
	background-color: #E69600;
	left: 0px; top: 0px;
	width: 1440px; height: 706px;
}

.circle06 {
	background-color: #FFF6DC;
	border-radius: 50%;
	left: 182px; top: -185px;
	width: 1076px; height: 1076px;
}


/* -----------------BAG/PHONE----------------- */


.bagContainer {
	left: 254px; top: 131px;
	width: 402px; height: 433px;
}

.morphBox {
	background-color: #FFDE89;
	border-radius: 79px;
	left: 0px; bottom: 0px;
	width: 402px; height:338px;
}

.bagContainer10 {
	left: 406px; top: 97px;
	width: 628px; height: 433px;
}

.morphBox10 {
	background-color: #FFDE89;
	border-radius: 54px;
	left: 0px; bottom: 0px;
	width: 628px; height: 338px;
}

.bagHandle {
	background-image: url("../images/img-bagHandle.svg"); background-repeat: no-repeat; background-size: contain;
	left: 91px; top: 0px;
	width: 221px; height: 221px;
}

.bagHandle10 {
	background-image: url("../images/img-bagHandle.svg"); background-repeat: no-repeat; background-size: contain;
	left: 204px; top: 0px;
	width: 221px; height: 221px;
}

.bagEye {
	background-color: #FFF6DC;
	border-radius: 50%;
	left: 84px; top: 167px;
	width: 55px; height: 55px;
}

#bagEyeRight {
	left: 250px;
}

.bagEye10 {
	background-color: #FFF6DC;
	border-radius: 50%;
	left: 197px; top: 166px;
	width: 55px; height: 55px;
}

#bagEyeRight10 {
	left: 363px;
}

.screenOff {
	background-color: #F5B400;
	right: 49px; top: 7px;
	width: 499px; height: 301px;
}

.screenOn {
	background-color: #FFF6DC;
	left: 23px; top: 52px;
	width: 270px; height: 163px;
}


/* -----------------IMAGES----------------- */


.phoneOff {
	background-image: url("../images/img-phone-off.svg"); background-repeat: no-repeat; background-size: contain;
	left: 82px; top: 195px;
	width: 589px; height: 318px;
}

.phoneOn {
	background-image: url("../images/img-phone-on.svg"); background-repeat: no-repeat; background-size: contain;
	left: 82px; top: 195px;
	width: 589px; height: 318px;
}

#phoneOn09 {
	left: 211px; top: 79px;
	width: 1017px; height: 548px;
}

.heartMedLt {
	background-image: url("../images/icon-heart-medLt.svg"); background-repeat: no-repeat; background-size: contain;
	left: 969px; top: 573px;
	width: 76px; height: 76px;
}

.heartMedDk {
	background-image: url("../images/icon-heart-medDk.svg"); background-repeat: no-repeat; background-size: contain;
	left: 969px; top: 573px;
	width: 76px; height: 76px;
}

.profileCircleLight {
	background-color: #FFF6DC;
	border-radius: 50%;
	left: 22px; top: 29px;
	width: 76px; height: 76px;
}

#profileCircleDark07 {
	background-color: #F5B400;
}

.kabobDotLight {
	background-color: #FFF6DC;
	border-radius: 50%;
	left: 651px; top: 34px;
	width: 14px; height: 14px;
}

.kabobDotDark {
	background-color: #F5B400;
	border-radius: 50%;
	left: 651px; top: 34px;
	width: 14px; height: 14px;
}

#kabobDotLight05-2, #kabobDotDark07-2 {
	top: 58px;
}

#kabobDotLight05-3, #kabobDotDark07-3 {
	top: 83px;
}

.shopNow {
	position: absolute;
	border: 4px solid #F5B400;
	border-radius: 14px;
	color: #F5B400;
	font-family: optimisticDisplayBold;
	font-size: 26px;
	letter-spacing: .5px;
	line-height: 58px; /* keep this same as box height to keep text centered vertically */
	text-align: center;
	left: 470px; top: 580px;
	width: 187px; height: 69px;
}

#shopNowDk05 {
	border: 4px solid #F5B400;
	color: #F5B400;
}

#shopNowMedLt07 {
	border: 4px solid #FFDE89;
	color: #FFDE89;
}


/* -----------------COPY----------------- */


.headline01 {
	font-family: optimisticDisplayBold;
	font-size: 88px;
	line-height: 95px;
	letter-spacing: .5px;
	color: #FFDE89;
	text-align: left;
	position: absolute;
	left: 738px; top: 242px;
	width: 600px; height: 58px;
}

#headline01-1 {
	color: #FFF6DC;
}

.headline05 {
	font-family: optimisticDisplayBold;
	font-size: 68px;
	line-height: 81.5px;
	letter-spacing: .5px;
	color: #FFDE89;
	text-align: left;
	position: absolute;
	left: 470px; top: 222px;
	width: 540px; height: 261px;
}

#headline05-1 {
	color: #F5B400;
}

#headline05-2 {
	color: #FFDE89;
}

#headline07-1 {
	color: #E69600;
	left: 466px;
}

#headline07-2, #headline07-3 {
	color: #FFF6DC;
	left: 466px;
}

.headline10 {
	font-family: optimisticDisplayBold;
	font-size: 88px;
	line-height: 95px;
	letter-spacing: .5px;
	color: #FFDE89;
	text-align: left;
	position: absolute;
	left: 597px; top: 208px;
	width: 500px; height: 290px;
}

#headline10-1 {
	color: #FFF6DC;
}

.turnLight {
	background-image: url("../images/txt-turn-lt.svg"); background-repeat: no-repeat; background-size: contain;
	left: 719px; top: 275px;
	width: 640px; height: 168px;
}

.turnDark {
	background-image: url("../images/txt-turn-dk.svg"); background-repeat: no-repeat; background-size: contain;
	left: 400px; top: 269px;
	width: 640px; height: 168px;
}

#turnDark08 {
	left: 400px;
}

.onDark {
	background-image: url("../images/txt-on-dk.svg"); background-repeat: no-repeat; background-size: contain;
	left: 208px; top: 269px;
	width: 327px; height: 168px;
}

#onDark04 {
	left: 918px;
}

#onDark06 {
	left: 557px;
	display: none;
}

#onDark09 {
	left: 557px;
}

.onLight {
	background-image: url("../images/txt-on-lt.svg"); background-repeat: no-repeat; background-size: contain;
	left: 196px; top: 269px;
	width: 326px; height: 168px;
}

#onLight04-1, #onLight04-3 {
	left: 196px;
}

#onLight04-2 {
	left: 557px;
}


/* -----------------FOOTER----------------- */


.cta {
	position: absolute;
	border-radius: 12px;
	background-color: #FFF6DC;
	font-family: optimisticDisplayBold;
	font-size: 26px;
	letter-spacing: .5px;
	line-height: 68px; /* keep this same as box height to keep text centered vertically */
	color: #F5B400;
	text-align: center;
	left: 605px; bottom: 40px;
	width: 230px; height: 68px;
}

.cta:hover {
	background-color: #E69600;
	color: #FFF6DC;
	transition: 0.25s;
}

.logo {
	background-image: url("../images/logo-fb-stack.svg"); background-repeat: no-repeat; background-size: contain;
	background-position: right bottom;
	position: absolute;
	right: 40px; bottom: 40px;
	width: 228px; height: 68px;
}

@font-face {
    font-family: 'optimisticDisplayBold';
    src: url('../fonts/Optimistic_Display_W_Bd.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}