/* IF FONT WEIGHT IS NORMAL USE BELOW REMOVE AND DELETE FILE IF NOT USED */
@font-face{
    font-family:BasisGrotesque-Regular-Pro; 
    src:url("BasisGrotesquePro-Regular.subset.woff") format("woff")
}

/* IF FONT WEIGHT IS BOLD USE BELOW, REMOVE AND AND DELETE FILE IF NOT USED */
@font-face {
    font-family: BasisGrotesque-Medium-Pro;
    src: url("BasisGrotesque-Medium-Pro.subset.woff") format("woff")
}

:root {
    --ad-width: 300px;
    --ad-height: 250px;
    --bgLogo-width: 600px;
    --bgLogo-height: 580px;
    --fontW-Reg: BasisGrotesque-Regular-Pro;
    --fontW-Med: BasisGrotesque-Medium-Pro;
}

body {
    margin: 0px;
}

/* OVERALL BANNER SPECS */
#ad {
    display: block;
    overflow: hidden;
    width: var(--ad-width);
    height: var(--ad-height);
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: border-box;
}

/*default setup*/

#border{
    position: absolute;
    display: block;
    width: var(--ad-width);
    height: var(--ad-height);
    /* if dark bg, use below */
    border: rgb(145, 153, 153) 1px solid;
    /* if light bg, use below */
    /* border: rgb(145, 153, 153) 1px solid; */
    box-sizing:border-box;
    top: 0;
    left: 0;
    z-index:999;
}

#banner {
    position: absolute;
    display: block;
    width: var(--ad-width);
    height: var(--ad-height);
    /* UPDATE BG COLOR as shown in the mockup */
    background-color: #D3E4F3;
    background-repeat: no-repeat;
    overflow: hidden;
    z-index: 1;
}

/* UPDATE REF PNG AND DELETE THE FILE BEFORE DELIVERY */
#ref {
    position: absolute;
    display: block;
    width: var(--ad-width);
    height: var(--ad-height);
    background: url(ref1.png) no-repeat center;
    top: 0px;
    left: 0px;
    opacity: 0.3;
    z-index: 2;
}
/* LAYER PROPERTIES */
#logo{
    background: url(logo.png) no-repeat center;
    position: absolute;
    width: var(--bgLogo-width);
    height: var(--bgLogo-height);
    top: -20px;
    left: 0px;
    opacity: 1;
    transform: scale(0.5);
    transform-origin: 0% 0%;
    z-index: 3;
}

/* ILLUSTRATIONS OBJECTS */


/* MASKS SETUP */
.mask{
    width: var(--ad-width);
    position:absolute;
    top:0px;
    left:0px;
    opacity: 1;
    overflow: hidden;
}

/* Baseline or 0px = 258px */

/* COPY LINE 1 */
#txt-mask1{
    height: calc(81px - 0px);
}

/* COPY LINE 2 */
.txt-mask2{
    height: calc(109px - 0px);
}

/* COPY LINE 3 */
#txt-mask3{
    height: calc(139px - 0px);
}

/* COPY LINE 4 */
#txt-mask4{
    height: calc(545px - 370px);
}

/* COPY LINE 5 */



#bg{
    background:url(bg.jpg);
    width: 600px;
    height: 500px;
    scale: 0.5;
	top:0;
	left:0;
    transform-origin: 0% 0%;
    position: absolute;
    z-index: 1;
}


/* TEXT COPY */
.txt{
    position: absolute;
    width: var(--ad-width);
    height: var(--ad-height);
    top: 100px;
    left: 0px;
    opacity: 0;
    transform: scale(1);
    transform-origin: 0% 0%;
    z-index: 3;
}
/* FRAME 1 COPY */
#txt1-a{
    background:url(txt1-a.svg) center no-repeat;   
}

#txt1-b{
    background:url(txt1-b.svg) center no-repeat;   
}

#txt1-c{
    background:url(txt1-c.svg) center no-repeat;   
}

/* FRAME 2 COPY */
#txt2-a{
    background:url(txt2-a.svg) center no-repeat;
}

#txt2-b{
    background:url(txt2-b.svg) center no-repeat;
}

#txt2-c{
    background:url(txt2-c.svg) center no-repeat;
}
/* FRAME 3 COPY */

#txt3-a{
    background:url(txt3-a.svg) center no-repeat;
}
#txt3-b{
    background:url(txt3-b.svg) center no-repeat;
}
#txt3-c{
    background:url(txt3-c.svg) center no-repeat;
}
#txt3-d{
    background:url(txt3-d.svg) center no-repeat;
}

/* RATE */



#mask-rate{
	display:flex;
	top:0;
	left: 0;
	width: 315px;
	height: 142px;
	opacity: 1;
	overflow:hidden;
	justify-content: center;
}

.mask1{
    width: 315px;
    position:absolute;
    top:0px;
    left:3px;
    opacity: 1;
    /* overflow: hidden; */
}

#rate{
    position: relative;
    top: 190px;
    /* left: 72px; */
    width: auto;
    z-index: 999;
    opacity: 1;
}

#rate-span{
    position: relative;
    font-family: var(--fontW-Reg); 
    font-size: 40px;
    color: #ffffff;
    opacity: 1;
    width: auto;
    height: 69px;
    letter-spacing: -2.51px;
    float: left;
}

#apy{
    position: relative;
    background:url(apy.svg) center no-repeat;
    width: 30px;
    height: 41px;
    left: 13px;
    opacity: 0;
    float: left;
}





/*CTA*/
#cta{
    background:url(cta.svg) center no-repeat;
    width: 90px;
    height: 30px;
    position: absolute;
    top: 142px;
    left: 163px;
    opacity: 1;
    transform: scale(0);
    transform-origin: 50% 50%;
    z-index: 12;
}

/*TrustArc holder*/
#trustArc{
    width: var(--ad-width);
    height: var(--ad-height);
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 0;
    transform: scale(1);
    transform-origin: 0% 0%;
}