@import url("//hello.myfonts.net/count/2eea80");
*, *::after, *::before {
    box-sizing: inherit;
}
	body {
		font-family: AvenirLT-Roman,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif !important;
        }
	h1 {
            font-weight: 100;
			margin-bottom:1em !important;
        }
	h1,h2,h3,h4,h5{margin-top:1em;}
	a, .footer a {
            color: #2a0486;
        }
	a:hover{text-decoration:none;}
	.header {
            text-align: center;
        }
	.header img {
		width: 110px;
		height: auto;
		margin-bottom: -55px;
	}
	.yellow-divider{border-bottom: 10px solid #fecb38;}
	.yellow-bg{background-color:#fecb38;}
	.yellow-bg-highlight{background-color:#ffdf99;}
	.teal-bg{background-color:#71d7ff;}
	.light-purple-bg{background-color:#e5e1ff;}
	.intro-header{
		background:#878787;
		color:#fff;
	}
	.intro-message{
		background:#55379f;
		color:#fff !important;
	}
	.intro-header .row{
		min-height:20rem;
	}
	.intro-header-bg{
		background-image: url(/hop/img/phone-header.png) ;
		background-position: center center;
		background-repeat:  no-repeat;
		background-attachment: local;
		background-size:  cover;
		background-color: #999;
	}
	.first-col{padding-left:0px !important;}
	.hop-button{background: #3e2f8d;
	margin: 32px auto;
	padding: 16px;
	border-radius: 40px;
	color: #fff;
	}
	.pad-vert-20{
		padding:20px 0;
	}
	.pad-vert-30{
		padding:30px 0;
	}
	.pad-vert-45{
		padding:45px 0;
	}
	.pad-bottom-20{
		padding-bottom:20px;
	}
	.pad-top-20{
		padding-top:20px;
	}
	.pad-top-10{
		padding-top:10px;
	}
	.pad-top-35{
		padding-top:35px;
	}
	.pad-top-45{
		padding-top:35px;
	}
	.no-hor-pad{
		padding-right:0px !important;
		padding-left:0px !important;
	}
	.how-it-works{
		border-bottom:thin #e4e4e4;
	}
	.happy-tapping{
		background:#e4e4e4;
		min-height:5rem;
        margin-top: 10rem;
		color:#270188;
	}
	.message {
            border-bottom: 10px solid #fecb38;
            padding: 50px 10px 10px;
        }
	.stores img {
		display: inline-block;
		height: 30px;
		width: auto;
	}
	a.button {
		border-radius: 25px;
		background-color: #00bbd3;
		border: 2px solid #00bbd3;
		padding: 10px 25px;
		display: inline-block;
		margin: 0 15px;
		color: #fff;
		letter-spacing: 1px;
		font-weight: bold;
		text-decoration: none;
		margin-bottom: 20px;
	}
	a.button:hover {
		background-color: #00bbd3;
		color: #00bbd3;
	}
	.img {
		display: block;
		height: auto;
		max-width: 100%;
		margin-bottom: 15px;    
	}
	.img-right {
		display: block;
		max-width: 100%;    
		height: auto;
		margin: 0 0 15px 0;
	}  
	.img-right .img {
		max-width: 100%;    
	}
	ul.feature-list li{padding-bottom:.75em;}
	.hero-image{position: absolute;bottom:0px;}
	h3.virtual-card{margin:.5em 0 1em !important;font-weight:bold;}
	.hero-title{margin:1em 0 !important;}
	.page-headline-sec{padding: 2.25em 0 0em;}
	.page-headline-sec h3.hero-title{padding:0}
	@media only screen and (min-width: 460px) {
		.img-right {
			float: right;
			margin: 0 0 15px 15px;
			width: 240px;
		}
			.img-right .img {
				width: 240px;
			}
	}
	@media only screen and (min-width: 768px) { /* sm screens and up */
		.img-right {
			margin: 0 0 30px 30px;
			width: 300px;
		}
			.img-right .img {
				width: 300px;
			}
	}
	.menu {
            text-align: center;
            padding-bottom: 30px;
        }
		.menu a {
/*
			font-size: 14px;
			color: #270188;
			text-transform: uppercase;
			padding: .125em 0;
			margin: .25em 1em;
			text-decoration: none;
			font-weight: bold;
*/
			display: block;
		}
		.menu a:hover {
/*                    border-bottom: 2px solid #270188;*/
	}
        
        .footer {
            font-size: 80%;
            text-align: center;
            margin: 3em 0 3em;
            clear: both;
        }
        @media only screen and (min-width: 768px) { /* sm screens and up */
            h1 {
                margin-bottom: 1.5em;
            }
            .menu {
/*
                width: 680px;
                margin: 0 auto;
                padding: 50px;
*/
            }
                .menu a {
                    display: inline;
                }
            .message {
                width: 680px;
                margin: 0 auto;
            }
        }

.hop-button a{color:#fff !important;font-size:.75em;font-weight: bold;}
.hop-bg{background-color:#270188;}
.well {
    border-radius: 10px;
    padding: 5px 10px 0;
    background-color: #270188;
}
    .well h4 {
        color: #fff;
    }
/*
    .well form {
        padding-top: 1.5em;
    }
        .well form input {
            border-radius: 3px;
            border: none;
            padding: 3px 8px;
        }
            .well form input.submit {
                background-color: #fecb38;
                cursor: pointer;
            }
*/


.hcenter {
    text-align: center;
}

.standardheader .hero {
    width: 100%;
    height: auto;
    overflow: hidden;
    position: relative;
	z-index: -555;
}
.standardheader .hero.video > video, .standardheader .hero > img {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    height: 100%;
}
@media only screen and (min-width: 630px) {
	.standardheader .hero.video > video {
	width: 100%;
	height: auto;
	}
}
@media only screen and (max-width: 460px) {
.standardheader .hero {
    height: 250px !important;
}
}

@media only screen and (min-width: 870px) { /* above 870 */
	.standardheader .hero {
	height: 488px;
	}
	.standardheader .hero.video > video {
    display: block;
	}
	.standardheader .hero.video > img {
    display: none;
	}
}
@media only screen and (min-width: 1100px) { /* above 110 */
	.standardheader .hero.video > video {
    top:-131px;
	}
}

@media only screen and (max-width: 870px) { /* under 870 */
	.standardheader .hero {
	height: 400px;
	}
	.standardheader .hero.video > img {
    display: block;
	width:104%;
	object-fit: cover
	}
}
.footer--hopster-wrap{
position: absolute;
width: 100%;
top: -114px;
}
.footer--main-decoration{
background-image: url(https://myhopcard.com/home/img/characters/green-eyes-closed-edge-bottom.svg);
background-repeat: no-repeat;
background-position: top;
background-size: 100%;
width: 174px;
height: 174px;
display:block;
margin:0 auto;
}

/****** RESET ********/
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden, #screenreader { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.group:before, .group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}



.col-ms-1, .col-ms-2, .col-ms-3, .col-ms-4, .col-ms-5, .col-ms-6, .col-ms-7, .col-ms-8, .col-ms-9, .col-ms-10, .col-ms-11, .col-ms-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px; 
}
@media (min-width: 480px) and (max-width: 767px) {
.col-ms-1,
.col-ms-2,
.col-ms-3,
.col-ms-4,
.col-ms-5,
.col-ms-6,
.col-ms-7,
.col-ms-8,
.col-ms-9,
.col-ms-10,
.col-ms-11 {
float: left; }
 
.col-ms-1 {
width: 8.33333%; }
 
.col-ms-2 {
width: 16.66667%; }
     
.col-ms-3 {
width: 25%; }
 
.col-ms-4 {
width: 33.33333%; }
 
.col-ms-5 {
width: 41.66667%; }
 
.col-ms-6 {
width: 50%; }
 
.col-ms-7 {
width: 58.33333%; }
 
.col-ms-8 {
width: 66.66667%; }
 
.col-ms-9 {
width: 75%; }
 
.col-ms-10 {
width: 83.33333%; }
 
.col-ms-11 {
width: 91.66667%; }
 
.col-ms-12 {
width: 100%; }
 
.col-ms-push-1 {
left: 8.33333%; }
 
.col-ms-push-2 {
left: 16.66667%; }
 
.col-ms-push-3 {
left: 25%; }
 
.col-ms-push-4 {
left: 33.33333%; }
 
.col-ms-push-5 {
left: 41.66667%; }
 
.col-ms-push-6 {
left: 50%; }
 
.col-ms-push-7 {
left: 58.33333%; }
 
.col-ms-push-8 {
left: 66.66667%; }
 
.col-ms-push-9 {
left: 75%; }
 
.col-ms-push-10 {
left: 83.33333%; }
 
.col-ms-push-11 {
left: 91.66667%; }
 
.col-ms-pull-1 {
right: 8.33333%; }
 
.col-ms-pull-2 {
right: 16.66667%; }
 
.col-ms-pull-3 {
right: 25%; }
 
.col-ms-pull-4 {
right: 33.33333%; }
 
.col-ms-pull-5 {
right: 41.66667%; }
 
.col-ms-pull-6 {
right: 50%; }
 
.col-ms-pull-7 {
right: 58.33333%; }
 
.col-ms-pull-8 {
right: 66.66667%; }
 
.col-ms-pull-9 {
right: 75%; }
 
.col-ms-pull-10 {
right: 83.33333%; }
 
.col-ms-pull-11 {
right: 91.66667%; }
 
.col-ms-offset-0 {
margin-left: 0; } 

.col-ms-offset-1 {
margin-left: 8.33333%; }
 
.col-ms-offset-2 {
margin-left: 16.66667%; }
 
.col-ms-offset-3 {
margin-left: 25%; }
 
.col-ms-offset-4 {
margin-left: 33.33333%; }
 
.col-ms-offset-5 {
margin-left: 41.66667%; }
 
.col-ms-offset-6 {
margin-left: 50%; }
 
.col-ms-offset-7 {
margin-left: 58.33333%; }
 
.col-ms-offset-8 {
margin-left: 66.66667%; }
 
.col-ms-offset-9 {
margin-left: 75%; }
 
.col-ms-offset-10 {
margin-left: 83.33333%; }
 
.col-ms-offset-11 {
margin-left: 91.66667%; }
}