h1 {
    font-size: 20px;
    letter-spacing: .5px
}

#popular-title-large,#popular-title-mobile {
    color: rgb(13, 77, 141);
    font-family: 'bitter', sans-serif
}

#popular-title-mobile {
    font-weight: 700
}

#popular-title-large {
    font-size: 21px
}

.popular {
    margin-top: 50px
}

.top {
    text-align: center;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto
}

.gray-bg {
    background-color: rgb(238, 238, 238)
}

.synopsis {
    list-style-type: none;
    font-size: 18px
}

.synopsis li {
    margin-top: 10px
}

.no-mobile {
    display: none
}

.no-mobile>div:nth-child(2n) .text {
    margin-left: auto
}

.no-mobile>div {
    background-repeat: no-repeat;
    min-height: 155px;
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -webkit-box-align: center;
    align-items: center
}

.no-mobile>div:not(.curated-range) {
    margin-top: 60px
}

.curated-range {
    background-image: url(../images-static/guitars-display-home.jpg)
}

.choose-a-plan {
    background-image: url(../images-static/drums-home.jpg)
}

.quick {
    background-image: url(../images-static/trombone-home.jpg)
}

.start-playing {
    background-image: url(../images-static/guitar-home.jpg)
}

.keep-or-return {
    background-image: url(../images-static/piano-home.jpg)
}

.popular {
    text-align: center
}

.flex-table {
    margin: auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    text-align: center
}

.rent-for {
    font-size: 15px;
    font-weight: 600;
    display: block;
    margin-bottom: 0;
    position: relative;
    top: 3px
}

.price {
    font-size: 35px;
    font-family: 'bitter', sans-serif;
    color: rgb(13, 77, 141);
    line-height: 0;
    font-weight: normal
}

.a-month {
    font-size: 20px;
    font-family: 'bitter', sans-serif;
    color: rgb(13, 77, 141)
}

.view-button {
    width: 115px;
    letter-spacing: 1.5px
}

.flex-table p {
    line-height: 1.3;
    margin-top: 4px
}

.flex-table>div {
    margin-top: 25px
}

.top-button {
    margin-top: 20px;
    letter-spacing: 1.5px
}

.minimum-rental-period {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding-top: 30px;
    padding-bottom: 30px
}

.hero-pic {
    width: 100%
}

.popular img {
    width: 100%
}

@media (max-width: 765px) {
    .wrapper {
        padding:0
    }

    .gray-bg {
        margin-left: -22px;
        margin-right: -22px
    }

    .price {
        font-size: 40px
    }

    .a-month {
        font-size: 23px
    }

    .rent-for {
        font-size: 16px
    }

    .flex-table {
        padding-left: 22px;
        padding-right: 22px
    }

    .flex-table p {
        margin-top: 0;
        position: relative;
        top: -3px;
        margin-bottom: 13px
    }

    h1 {
        font-size: 22px;
        letter-spacing: .25px;
        margin-top: 20px;
        margin-bottom: 20px
    }

    .synopsis li {
        margin-top: 15px
    }

    .top-button {
        margin-top: 35px
    }
}

@media (min-width: 768px) and (max-width:1200px) {
    h1 {
        font-size:21px;
        letter-spacing: .15px
    }

    .synopsis {
        font-size: 19px
    }

    .top-button {
        margin-top: 30px
    }
}

@media (min-width: 768px) {
    h1 {
        margin-top:0
    }

    .text h2 {
        margin-bottom: 10px;
        font-size: 21px
    }

    .text p {
        font-size: 17px
    }

    .text {
        width: 50%;
        text-align: center
    }

    .text>* {
        margin: auto;
        max-width: 360px
    }

    .popular img {
        width: 80%
    }

    .gray-bg {
        background-color: transparent
    }

    .minimum-rental-period,.top {
        margin-right: 0;
        margin-right: initial
    }

    .hero-pic {
        display: none
    }

    .top-bg-img {
        background-repeat: no-repeat;
        min-height: 325px;
        background-position: 70%;
        position: relative;
        background-size: cover
    }

    .synopsis {
        font-size: 20px
    }

    .top {
        background: none;
        right: 40px;
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        max-width: 320px
    }

    #popular-title-large {
        display: block;
        margin: auto;
        letter-spacing: .5px
    }

    .no-mobile {
        display: inline;
        display: initial
    }

    .flex-table {
        display: table;
        width: 100%
    }

    .flex-table>div {
        display: table-cell
    }

    @supports ((display: -webkit-box) or (display:flex)) {
        .flex-table {
            display:-ms-flexbox;
            display: -webkit-box;
            display: flex;
            -ms-flex-pack: justify;
            -webkit-box-pack: justify;
            justify-content: space-between
        }

        .flex-table>div {
            -ms-flex: 1;
            -webkit-box-flex: 1;
            flex: 1
        }
    }
}

@media (min-width: 1000px) {
    .top-bg-img {
        min-height:454px
    }

    .top {
        margin-right: 40px;
        max-width: 397px
    }

    .synopsis {
        max-width: 320px;
        margin: auto;
        font-size: 22px;
        margin-top: 40px;
        margin-bottom: 20px
    }

    h2 {
        font-size: 24px
    }

    h1 {
        font-size: 31px
    }

    .minimum-rental-period {
        position: relative;
        top: -20px
    }
}

@media (min-width: 1200px) {
    .flex-table img {
        width:65%
    }

    .text>* {
        max-width: 490px
    }

    .top {
        margin-right: 60px
    }
}

@media (min-width: 765px) and (max-width:900px) {
    .no-mobile>div:nth-child(odd) {
        background-position:70px 0
    }

    .no-mobile>div:nth-child(2n) {
        background-position: -100px 0
    }
}

@media(min-width: 900px) {
    .no-mobile>div:nth-child(odd) {
        background-position:right
    }

    .no-mobile>div:nth-child(2n) {
        background-position: left
    }
}

.popular button,.top-button {
    background-color: rgb(14, 77, 141);
    color: white
}

.flex-table img {
    max-width: 220px
}

.rent-for {
    letter-spacing: .9px
}

.popular button {
    font-size: 16px
}

@media (max-width: 767px) {
    .flex-table>div {
        margin-top:50px
    }

    .gray-bg {
        padding-top: 25px
    }

    #fixed-header {
        margin-bottom: 0
    }
}

.top-button:hover,.view-button:hover {
    background-color: rgb(24, 97, 191)
}

/* New bit starts here */

.top.new {
	text-align:left;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	max-width:617px;
	height:100%;
	right:0;
	padding:40px 100px 40px 120px;
	margin:0;
}
.top.new.ind {
	background: linear-gradient(90deg, rgba(255,255,255,0), #f7f5ed 14%);
}
.top.new.sch {
	background: linear-gradient(90deg, rgba(255,255,255,0), #eef6fc 14%);
}
.ind .top.new.sch,
.sch .top.new.ind {
	display:none;
}
.ind .top.new.ind,
.sch .top.new.sch {
	display:flex;
}
.top.new h1 {
	font-size:27px;
}
.ind h1 {
	color:#B89C52;
}
.top.new button {
	border-radius:0;
	max-width:200px;
	text-align:center;
	padding:0;
	margin-top:20px;
}
.top.new.ind button {
	background-color:#B89C52;
}
.top.new.ind button:hover {
	background-color:#cdb985;
}
.top.new button span {
	display:block;
	margin:1px auto;
	padding:10px 0 10px 0;
	width:98%;
	text-align:center;
	border-top: 3px solid #668eb6;
}
.top.new.ind button span {
	border-top: 3px solid #c2aa6a;
}
.top.new.ind button:hover span {
	border-top: 3px solid #d6c391;
}
.top.new .synopsis {
	margin:0;
	font-size:18px;
}
.top.new li {
	list-style:square outside;
	margin-left:20px;
}
.banner-switcher {
	display:flex;
	width:100%;
	margin-bottom:40px;
}
.banner-switcher.sch {
	border-top:4px solid #0E4D8D;
}
.banner-switcher.ind {
	border-top:4px solid #B89C52;
}
.banner-switcher > * {
	flex:1;
	padding:16px;
}
.banner-switcher svg {
	position:static;
	width:auto;
	max-width:90%;
	height:44px;
	margin-bottom:14px;
	fill:#9d9d9c;
}
.banner-change {
	color:#fff;
	font-size:17px;
	text-align:center;
	background-color:#dadada;
	cursor:pointer;
}
.ind .banner-change.ind {
	background-color:#B89C52;
}
.sch .banner-change.sch {
	background-color:#0E4D8D;
}
.ind .banner-change.ind svg {
	fill: #0E4D8D;
}
.sch .banner-change.sch svg {
	fill: #B89C52;
}
@media screen and (max-width: 1000px) {
	.top.new {
		padding:20px 40px 20px 90px;
	    max-width:477px;
	}
	.top.new.ind {
	    background: linear-gradient(90deg, rgba(255,255,255,0), #f7f5ed 10%);
	}
	.top.new.sch {
	    background: linear-gradient(90deg, rgba(255,255,255,0), #eef6fc 10%);
	}
	.top.new h1 {
		font-size:22px;
	}
	.top.new .synopsis {
		margin:0;
		font-size:16px;
		max-width:500px;
	}
	.top.new li {
		margin-top:4px;
	}
	.top.new button {
		margin-top:14px;
	}
}
@media screen and (max-width: 768px) {
	.top.new {
		max-width:100%;
		height:auto;
		padding:22px;
		text-align:center;
		align-items:center;
		height:440px;
		padding:0 22px;
		justify-content:center;
	}
	.top.new.ind {
	    background-color:#f7f5ed;
	}
	.top.new.sch {
	    background-color:#eef6fc;
	}
	.top.new h1 {
		font-size:31px;
		margin:0 auto;
	}
	.top.new .synopsis {
		margin:30px auto;
	}
	.top.new li {
		list-style:none;
		display:block;
		margin:20px 0;
		font-size:18px;
	}
	.top.new button {
		width:240px;
		margin:0 auto;
	}
	.banner-switcher svg {
		margin:0;
	}
  .top-bg-img {
    background: none !important;
  }
}
@media screen and (max-width: 650px) {
	.top.new {
		height:475px;
	}
}
@media screen and (max-width: 500px) {
	.top.new h1 {
		font-size:24px;
	}
	.top.new .synopsis {
		margin:10px auto;
	}
}
@media screen and (max-width: 420px) {
	.top.new {
		height:500px;
	}
}


/************** ADDED *********************/
.deep-blue{
	color:#2a4a73;
}
.azure{
	color:#24939f;
}
.terracotta{
	color:#d99059;
}
deepest-blue{
	color:#293154;
}
.padT10{
	padding-top:10px;
}
.padT20{
	padding-top:20px;
}
.padT40{
	padding-top:40px;
}
.padB10{
	padding-bottom:10px;
	margin-bottom:0;
}	
.padB20{
	padding-bottom:20px;
}
.margB20{
	margin-bottom:20px;
}
img{
	width:100%;
}
p{
	font-size:1.4em;
	line-height:1.5em;
}
.header-top-wrapper,.section-three{
	background:#2a4a73;
	
}
.header-top h3,.section-three h3{
	text-align:center;
	margin-top:5px;
	font-family: 'Ropa Sans', sans-serif;
	font-size:1.6em;
	font-weight:400;
	color:#fff;
}
.logo{
	width:300px;
	margin:40px auto;
	text-align:center;
}
.section-one{
	background:url(../images/sand-blue-silver.png) no-repeat;
	background-size:cover;
	background-position:center;
	width:100%;
	min-height:600px;
	padding:150px 150px;
	position:relative;
	font-family:'bitter', sans-serif;
	margin-bottom:40px;
}
.section-one p{
	color:#fff;
	font-size:1.8em;
	line-height:1.5em;
	text-shadow:1px 1px 2px #000;
	background:rgba(0,0,0,0.3);
	padding:20px;
}
.section-one p span{
	text-align:center;
	font-size:1.2em;
	font-weight:bold;
	margin-right:60px;
}
.section-one .sub{
	position:relative;
	top:30px;
	right:100px;
	color:#fff;
	font-size:2.2em;
	text-shadow:1px 1px 2px #000;
	background:rgba(0,0,0,0.5);
	padding:20px;
}
.section-two{
	padding:20px 100px;
}
.section-nine{
	width:100%;
	padding:0;
	font-size:0.9em;
}
.section-nine.uplevel{
	background: url(../images/uplevel-bg-apprentice.png);
    background-position: bottom;
    background-size: cover;
}

.box .content{
	padding:40px;
}
.box .content p{
	font-size:1.2em;
}.box .content h3{
	color:#24939f;
	font-size:1.3em;
	margin:0 0 20px 0;
	font-weight:600;
}
.section-five{
	display:grid;
	grid-template-columns: 33% 33% 33%;
	grid-column-gap:10px;
}	
.section-five .box{
	background-color:#faf571;
	color:#000;
	border:1px solid #ccc;
}
.section-five .box p{
	font-size:1.1em;
	text-align:center;
	margin:20px 60px;
}
.section-five .box .icon{
	text-align:center;
	margin:20px;
}
.section-five .box .icon img{
	max-width:200px;
}
ul{
	margin-left:40px;
}

.section-six{
	background:url(../images/starburst-background.png) no-repeat;
	background-size:cover;
	background-position:center;
	width:100%;
	min-height:200px;
	padding:50px 120px;
	position:relative;
	font-family:'bitter', sans-serif;
}

.section-six p{
	color:#fff;
	font-size:1em;
	line-height:1.5em;
	text-shadow:1px 1px 2px #000;
	background:rgba(0,0,0,0.3);
	padding:20px;
}
.section-six .sub{
	position:absolute;
	bottom:60px;
	right:100px;
	color:#fff;
	font-size:2.2em;
	text-shadow:1px 1px 2px #000;
}
.clearfix{
	clear:both;
}
.apprentice-top{
	background:#000;
	width:70%;
	margin:0 auto;
}
.apprentice-top h3, .wise-top h3{
	text-align: center;
    font-family: 'Ropa Sans', sans-serif;
    font-size: 1.6em;
    font-weight: 400;
    color: #fff;
}
.apprentice-top h3 span, .wise-top h3 span, .magical-top h3 span{
	font-size:0.8em;
}
.apprentice-bottom{
	background:#f8f7a3;
	width:70%;
	margin:0 auto 40px;
	padding:30px;
	font-size:1.3em;
}
.wise-top{
	background:#8337a3;
	width:70%;
	margin:0 auto;
}
.wise-bottom{
	background:#fcc72d;;
	width:70%;
	margin:0 auto 40px;
	padding:30px;
	font-size:1.3em;
}
.magical-top{
	background:#fc9a04;;
	width:70%;
	margin:0 auto;
}
.magical-bottom{
	background:#040364;
	width:70%;
	margin:0 auto 40px;
	padding:30px;
	font-size:1.3em;
	color:#fff;
}
.magical-top h3{
	text-align: center;
    font-family: 'Ropa Sans', sans-serif;
    font-size: 1.6em;
    font-weight: 400;
    color: #000;
}
	
.section-seven{
	width:70%;
	margin:0 auto;
	text-align:center;
}
.btn-orange{
	width:300px;
	margin:20px auto;
	padding:20px 40px;
	background:#d99059;
	border:1px solid #888;
	border-radius:3px;
	color:#fff;
	font-size:1.3em;
	text-align:center;
	cursor:pointer;
}
.btn-azure{
	width:300px;
	margin:20px auto;
	padding:20px 40px;
	background:#24939f;
	border:1px solid #888;
	border-radius:3px;
	color:#fff;
	font-size:1.3em;
	text-align:center;
	cursor:pointer;
}
.btn-deep-blue{
	width:300px;
	margin:20px auto;
	padding:20px 40px;
	background:#293154;
	border:1px solid #888;
	border-radius:3px;
	color:#fff;
	font-size:1.3em;
	text-align:center;
	cursor:pointer;
}
.btn-yellow{
	width:300px;
	margin:20px auto;
	padding:20px 40px;
	background:#ffd600;
	border:1px solid #888;
	border-radius:3px;
	color:#000;
	font-size:1.3em;
	text-align:center;
	cursor:pointer;
}

.section-three.uplevel{
	background:#86286f;
}
.section-three.uplevel h3{
	font-size:1.9em;
	line-height:1.5em;
}
.section-four{
	display:grid;
	grid-template-columns: 60% 40%;
}	
.section-four .box{
	background-color:#efefef;
	color:#000;
}
.section-four.uplevel{
	background:url(../images/uplevel-bg-apprentice.png);
	background-position:bottom;
	background-size:cover;
}
.section-four.uplevel .box{	
	background:none;
}
.uplevel .box .content p {
	font-size:1.3em;
	color:#000;
}
.box .content{
	padding:10px 40px;
}
.box .content p{
	font-size:1.1em;
}
.box .content h3{
	color:#24939f;
	font-size:1.3em;
	margin:0 0 20px 0;
	font-weight:600;
}
.mysterybox{
	padding:40px;
	border:3px dashed #24939f;
	background:#faf571;
	margin-bottom:40px;
}
.clearfix{
	clear:both;
}
.w2ui-popup{
	width:900px !important;
	height:780px !important;
	left:25% !important;
	top:10% !important; 
}

@media screen and (max-width:768px){

	.wrapper{
		margin:0 10px;
	}	
	.header-top h3{
		font-size:1.2em;
		line-height:3em;
	}
	.logo{
		width:50%;
	}
	.section-one{
		padding:0px;
		min-height:300px;
	}	
	.section-one p{
		font-size:1em;
		background:none;
	}
	.section-one .sub{
		font-size:1.2em;
		position:relative;
		text-align:center;
		bottom:0;
		right:0;
	}
	.section-two{
		padding:5px;
	}
	.section-two h2, .section-two p, .box .content p, .box .content h3, .mysterybox p, p{
		font-size:1em;
	}
	.section-four, .section-five {
		display: grid;
		grid-template-columns: 100%;
	}
	.section-five .box{
		margin:10px;
	}
	.section-three h3{
		font-size:1.2em;
	}
	.section-five .box p{
		margin:0 15px 20px;
		font-size:1em;
	}
	.box .content{
		padding:0 10px;
	}
	h1, h2{
		font-size:18px;
	}
	.mysterbox {
		padding:20px;
	}
	.apprentice-top, .apprentice-bottom, .wise-top, .wise-bottom, .magical-top, .magical-bottom {
		width:95%;
		font-size:1em;
	}
	.apprentice-top h3, .wise-top h3, .magical-top h3 {
		font-size:1.2em;
	}
	.apprentice-bottom, .wise-bottom, .magical-bottom{
		padding:10px;
	}
	.brk{
		display:block;
	}
	.btn-orange, .btn-deep-blue, .btn-yellow{
		width:80%;
	}
		
	
}

.header-top h3 a{
	color:aqua;
	font-size:0.9em;
}