#outerPageContainer {width: 100%!important;}

#FreeFormatPage {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    /* background-color:#fbebee; */
    background: url(/repo/SBI/desktop/pages/freeformat/AW18/GiftingHub/02-images/bg-image.jpg);
    background-size: 100%;
}
#FreeFormatPage a {text-decoration: none;font-size: 100%;}
#FreeFormatPage .mobile {display: none;}

.fullimage {width: 100%;position:relative;display:block;z-index: 1;}

img {height:auto;max-width: 100%;}


h3 {
	font: 3em/1.3 'CircularBold';
	width: 100%;
	color: #000;
	letter-spacing: .025em;
	display:inline;
}

h2 {
	font: 8.5em/1.1 'Didot';
	width: 100%;
	color: #000;
	letter-spacing: .025em;
	text-transform: uppercase;
	display:inline;
}

h2.gold {color: #dbab43;font: 10em/1 'Didot';}

p {
	font: 1.3em/1.3 'CircularBook';
	width: 100%;
	color: #000;
	letter-spacing: .025em;
	margin: 3% auto;
	}

p.cta {
	font: 1.2em/1 'CircularBook';
	text-align: center;
	color: #fff;
	background: #000;
	letter-spacing: .025em;
	padding: 15px 0;
	display: inline-block;
	position: relative;
	width: 350px;
	margin: 0;
}


p.cta.full {width:100%;margin-bottom: 5%;}


/* header */

header {
	position: relative;
	width: 100%;
	display: block;
}

header .text-container {
	position: relative;
	width: 62%;
	z-index: 1;
	text-align: center;
	margin: -6% auto 0;
}

header p {margin: 0 auto 3%;}

.slots-container {
	width: 85%;
	margin: 2% 7.5%;
	position: relative;
	display: inline-block;
	text-align: center;
	z-index: 2;
}

.slots {
	width: 42%;
	position: relative;
	display: inline-block;
	margin: 1%;
}

.slots img{width:100%;}


#sweetdreams {
	position: relative;
	width: 100%;
	display: block;
	margin-top: 6%;
	margin-bottom: 20%;
}

#sweetdreams .text-container {position: absolute;width: 34%;text-align:right;display:inline-block;top: 101%;z-index: 1;left: 10%;}

#sweetdreams .bg-block {
    position: absolute;
    z-index: 0;
    background: #e7c8cf;
    height: 73%;
    top: 62.4%;
    width: 94%;
}

img.sweetdreams1 {
    position: relative;
    margin-left: 8%;
    z-index: 1;
    width: 37%;
}

img.sweetdreams2 {
    position: absolute;
    left: 47%;
    top: 2%;
    z-index: 1;
    width: 44%;
}

img.gold-border {
    position: absolute;
    left: 0;
    top: -56%;
    width: 1.25%;
}


#fashionista, #gadgetgal, #sportysister, #accessories {
	position: relative;
	width: 100%;
	display: block;
	margin-bottom: 23%;
}


#fashionista .text-container, #gadgetgal .text-container, #sportysister .text-container, #accessories .text-container {position: absolute;width: 80%;text-align:right;display:inline-block;top: 102%;left: 13%;z-index: 2;}

#fashionista .bg-block, #gadgetgal .bg-block, #sportysister .bg-block, #accessories .bg-block {
    position: absolute;
    z-index: 1;
    background: #dbab43;
    height: 60%;
    top: 77%;
    width: 100%;
}

#fashionista p.cta, #gadgetgal p.cta, #sportysister p.cta, #accessories p.cta {margin-top:3%;}

#accessories img.gold-border {
    left: 98.8%;
    z-index: 0;
}

#novelty {
	position: relative;
	width: 100%;
	display: block;
	margin-bottom: 7%;
}

p.gold-slot{width:60%;margin: 0 40%;}

#sportysister h2, #accessories h2 {
    font: 7em/1.1 'Didot';
}

#novelty .text-container {position: absolute;width: 34%;text-align: left;display:inline-block;top: 79%;z-index: 1;left: 55%;}

#novelty .bg-block {
    position: absolute;
    z-index: 0;
    background: #e7c8cf;
    height: 49%;
    top: 53.4%;
    width: 93%;
    left: 7%;
}

img.novelty1 {
    position: relative;
    margin-left: 9%;
    z-index: 1;
    width: 43%;
}

img.novelty2 {
    position: absolute;
    left: 54%;
    top: -1%;
    z-index: 1;
    width: 37%;
}

#belle {
	position: relative;
	width: 100%;
	display: block;
	margin-bottom: 5%;
}

.row {
	width: 85%;
	margin: 0 9% 0 6%;
	position: relative;
	display: inline-block;
	text-align: center;
	z-index: 2;
}

.threeslots {
	width: 30%;
	position: relative;
	display: inline-block;
	margin: 1%;
}

.threeslots img{width:100%;}

img.christmas-belle {
    position: absolute;
    left: 88.5%;
    top: 1%;
    width: 6.4%;
    z-index: 1;
}

#belle .bg-block {
    position: absolute;
    z-index: 0;
    background: #e7c8cf;
    height: 43%;
    top: 60%;
    width: 95%;
    left: 5%;
}

p.belle {
    margin: 0% 5% 1%;
    text-align: center;
    z-index: 2;
    position: relative;
}

#belle p.belle {
    margin: 0% -1% 1%;
}

img.belle-gold-border {
    position: absolute;
    top: -9.4%;
    width: .8%;
    z-index: 0;
}

#jinglebling {
	position: relative;
	width: 100%;
	display: block;
	margin-bottom: 6%;
}

img.bling {
    position: absolute;
    left: 9.3%;
    top: 1%;
    width: 6.4%;
    z-index: 3;
}

#jinglebling .bg-block {
    position: absolute;
    z-index: 1;
    background: #e7c8cf;
    height: 79%;
    top: 26%;
    width: 95%;
    left: 5%;
}

#jinglebling .row {
    margin: 0 3% 0 12%;
}

#extra-cta {
	width:100%;
	display: inline-block;
	margin: 0% auto 5%;
	text-align:center;
}

p.cta.extra {
    margin: auto 2%;
}

@media only screen and (max-width: 1500px) {
h2 {font: 8em/1.1 'Didot';}
}

@media only screen and (max-width: 1450px) {
	#sportysister h2, #accessories h2 {
    font: 6.5em/1.1 'Didot';
}
}

@media only screen and (max-width: 1400px) {
#FreeFormatPage {font-size:90%;}
}

@media only screen and (max-width: 1300px) {
#FreeFormatPage {font-size:80%;}
}

@media only screen and (max-width: 1220px) {
p.cta.extra {width:300px}
#FreeFormatPage {background-size: 102%;}
}

@media only screen and (max-width: 1150px) {
#FreeFormatPage {font-size:70%;}
}


@media only screen and (max-width: 1024px) {
p.cta, p.cta.extra {width: 250px;}
}

@media only screen and (max-width: 823px) {
#FreeFormatPage {font-size:60%;}
p.cta, p.cta.extra  {padding: 12px 0;width: 200px;}
img.gold-border {top: -60%;}
h2 {font: 7em/1.1 'Didot';}
#sportysister h2{font: 6em/1.1 'Didot';}
p.gold-slot{width:70%;margin: 0 30%;}
#novelty .bg-block {height: 52%;}
}

@media only screen and (max-width: 736px) {
img.gold-border {top: -63%;}
#sweetdreams .text-container {width: 40%;left: 4%;}
h2 {font: 6.5em/1.1 'Didot';}
#sportysister h2{font: 5.5em/1.1 'Didot';}
#accessories h2{font: 6em/1.1 'Didot';}
#novelty .text-container {width: 40%;}
p.belle {margin: 1% 4%;}
#belle p.belle {margin: 1% -2%;}
}


@media only screen and (max-width: 667px) {
img.gold-border {top: -68%;}
h2 {font: 6em/1.1 'Didot';}
#sportysister h2, #accessories h2{font: 5em/1.1 'Didot';}
p.gold-slot {width: 80%;margin: 0 20%;}
p.belle {margin: 1% 5%;}
h2.gold {font: 8em/1 'Didot';}
#novelty {margin-bottom: 8%;}
#novelty .bg-block {height: 57%;}
#accessories img.gold-border {top:-6%;}
#sweetdreams .bg-block {height: 78%;}
p.cta.extra {width:180px}
}

@media only screen and (max-width: 640px) {
img.gold-border {top: -70%;}
h2 {font: 5.5em/1.1 'Didot';}
}


@media only screen and (max-width: 568px) {
#FreeFormatPage {font-size:70%;background: url(/repo/SBI/desktop/pages/freeformat/AW18/GiftingHub/02-images/bg-image-m.jpg);background-size: 103%;}
#FreeFormatPage .mobile {display: block;}
#FreeFormatPage .desktop {display: none;}
p.cta {width: 100%; padding:15px 0; font: 1.3em/1 'CircularBook';}
p.cta.extra {margin: 2% auto;display: block;width: 100%;}
header .text-container {width: 90%;}
h2.gold {font: 7em/1 'Didot';}
#accessories h2{font: 4em/1.1 'Didot';}
#sportysister h2 {font: 3.7em/1.1 'Didot';}
h2 {font: 4.5em/1.1 'Didot'; display:block;}
h3 {font: 2.3em/1.3 'CircularBold';display:block;}
img.gold-border {top: -30%;width: 3.2%;}

#sweetdreams {margin-bottom: 45%;}

#sweetdreams .bg-block {
    height: 91.5%;
    top: 27.4%;
    width: 100%;
}

img.sweetdreams1 {
    margin-left: 5%;
    width: 70%;
    margin-top:110%;
}

img.sweetdreams2 {
    left: 10%;
    top: 0%;
    width: 85%;
}

#sweetdreams .text-container {width: 90%;left: 5%;text-align:center}

.slots-container {
	width: 75%;
	margin: 0% 12.5%;
}

.slots {
	width: 100%;
	margin: 5% 0;
}

#fashionista .text-container, #gadgetgal .text-container, #sportysister .text-container, #accessories .text-container {width: 90%;left: 5%;}

#fashionista, #gadgetgal, #sportysister, #accessories {margin-bottom: 55%;}
#fashionista .bg-block, #gadgetgal .bg-block, #sportysister .bg-block, #accessories .bg-block {height: 47%;}

#novelty {margin-bottom: 125%;}
#novelty .text-container {width: 90%;text-align: center;top: 172%;left: 5%;}
#novelty .bg-block {
    height: 148%;
    top: 53.4%;
    width: 100%;
    left: 0%;
}

img.novelty1 {
    margin-left: 5%;
    width: 85%;
}

img.novelty2 {
    left: 25%;
    top: 95%;
    width: 70%;
}

.row {
	width: 98%;
	margin: 0 1% 0 1%;
	position: relative;
	display: inline-block;
	text-align: center;
	z-index: 2;
}

.threeslots {
	width: 45%;
	position: relative;
	display: inline-block;
	margin: 1%;
}

#accessories img.gold-border {
    top: 2%;
    width:3.5%;left:96.5%
}

img.christmas-belle, img.bling {
    position: relative;
    left: 5%;
    width: 90%;
    margin: 5% auto;
}
#belle p.belle, p.belle {
    width: 90%;
    margin: 4% 5%;
}
#belle .bg-block, #jinglebling .bg-block {
    height: 74%;
    top: 12%;
    width: 100%;
    left: 0%;
}
#jinglebling .row {
    margin: 0 1% 0 1%;
}
}


@media only screen and (max-width: 375px) {
h2.gold {font: 6em/1 'Didot';}
#accessories h2{font: 3.7em/1.1 'Didot';}
#sportysister h2 {font: 3.4em/1.1 'Didot';}
h2 {font: 4em/1.1 'Didot'; display:block;}
#sweetdreams .bg-block {height: 93%;}
p.gold-slot {width: 90%;margin: 0 10%;}
#novelty .bg-block {height: 151%;}
#novelty {margin-bottom: 132%;}
#FreeFormatPage {background-size: 106%;}
}


@media only screen and (max-width: 360px) {
#FreeFormatPage {font-size:67%;}
}

@media only screen and (max-width: 320px) {
#FreeFormatPage {font-size:60%;}
}