@import url('reset.css');
@import url('https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Anton');
body{font-family: 'Roboto Condensed', sans-serif;}
.text-reflect {position: relative;}
.text-reflect:before, .text-reflect:after {display: block;position: absolute;bottom: -0.5em; left: 0; right: 0;}
.text-reflect:before {content:'';opacity: .3;color:#666;-webkit-transform: scaleY(-1);-moz-transform: scaleY(-1);-o-transform: scaleY(-1);transform: scateY(-1);}
.text-reflect:after {height: 1em;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0)), to(rgb(255,255,255)));
background: -moz-linear-gradient(top, rgba(255,255,255,0), rgb(255,255,255));
background: linear-gradient(top, rgba(255,255,255,0), rgb(255,255,255));
content: ' ';}

/*******sub tilte reflec*******/

a{ 
cursor:pointer !important;
outline:none !important;
color:#000; text-decoration:none !important;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
			 }
a:hover{ 
color:#ed1b24; text-decoration:none !important;
-webkit-transition: all .3s .1s;
    -moz-transition: all .3s .1s;
     -o-transition: all .3s .1s;
        transition: all .3s .1s;
}

hr{color:#ddd !important;background-color:#ddd !important;height:1px;border:none;}
.bg-grey{background:rgba(68,68,68,0.8) !important; color:#fff; border-bottom:0 !important;}
.bg-no{background:none !important;}
#header{header:100px;}
.header{margin:0 auto; position:relative; z-index:999999999; width:100%; left:0; right:0;}
.clearfix-0{clear:both; height:0px;}
.clearfix-5{clear:both; height:5px;}
.clearfix-10{clear:both; height:10px;}
.clearfix{clear:both; height:20px;}
.position-relative{position:relative !important}
.position-absolute{position:absolute}
.padding-remove{padding:0 !important}

/*------------------------------------ general styling ----------------------------------------------*/

.bar{background:#ff0000; height:2px;width:100px;margin:0 auto; margin-top:5px}
.price{font-size:250%; font-weight:900;color:#ff0000; line-height:.8em;/*font-family: 'Anton', sans-serif;*/}
.price span{font-size:50%}
.text-white{color:#fff;}
.text-black{color:#000; font-weight:700; font-size:30px; line-height:1em}
.page-title{color:#f58233; font-weight:700; font-size:30px; margin-bottom:20px}
.page-title span{color:#000; font-weight:400;}
.link-normalise{color:#000;-moz-transition: all .3s .1s;-o-transition: all .3s .1s;transition: all .3s .1s; }
.link-normalise:hover{color:#ff0000;-moz-transition: all .3s .1s;-o-transition: all .3s .1s;transition: all .3s .1s;}
.go-top {position: fixed;bottom: 10px;right:0;left:0;margin:0 auto;text-decoration: none;color: #f58233;text-align:center;/*background-color: rgba(0, 0, 0, 0.3);*/font-size: 12px;font-weight:600;padding: 1em;display: none; padding:0}
.go-top:hover {color: black;}


.orange-btn{-webkit-border-radius: 20px; -moz-border-radius: 20px;border-radius: 20px;font-size:12px; padding: 5px 30px; text-decoration:none; display:inline-block;text-shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF; text-transform:uppercase;
 background-color: #e45d00; background-image: -webkit-gradient(linear, left top, left bottom, from(#e45d00), to(#f58233));
 background-image: -webkit-linear-gradient(top, #e45d00, #f58233);
 background-image: -moz-linear-gradient(top, #e45d00, #f58233);
 background-image: -ms-linear-gradient(top, #e45d00, #f58233);
 background-image: -o-linear-gradient(top, #e45d00, #f58233);
 background-image: linear-gradient(to bottom, #e45d00, #f58233);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#e45d00, endColorstr=#f58233);
}

.orange-btn:hover{
 background-color: #f58233; background-image: -webkit-gradient(linear, left top, left bottom, from(#f58233), to(#e45d00));
 background-image: -webkit-linear-gradient(top, #f58233, #e45d00);
 background-image: -moz-linear-gradient(top, #f58233, #e45d00);
 background-image: -ms-linear-gradient(top, #f58233, #e45d00);
 background-image: -o-linear-gradient(top, #f58233, #e45d00);
 background-image: linear-gradient(to bottom, #f58233, #e45d00);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f58233, endColorstr=#e45d00);
}


.business-unit{background:rgba(0,0,0,.8); border-right:thick solid #339933; width:100%; padding:15px;margin-bottom:2px; color:#fff; height:100px}
.business-unit a{color:#00bb00; font-weight:700; font-size:25px}
.business-unit a:hover{color:#fff; font-weight:700;}


.package{background:rgba(239,239,239,.8); border-radius:0 0 .8em .8em; padding:0 0 0px 0; border:thin solid #ddd; border-bottom:15px solid #444;}
.spec{color:#ff0000; font-size:250%;font-weight:bold; border-radius:50%; width:110px; height:110px; margin:5px auto; border:5px solid #339933; padding-top:20px; line-height:.6em;}
.spec span{font-size:15px;color:#000;}


.link-reset{color:#000;}
.link-reset:hover{color:#ff0000;}


h2{top:0; margin-top:0}
.try-now-btn{color:#fff !important;padding:15px 25px;border-radius:0em;text-align:center;font-family: 'Roboto Condensed', sans-serif;font-size:25px}
.price{font-size:450%; color:#ff0000; font-weight:300; line-height:1em;}
.price span{line-height:1em;color:black}
.speed-text{font-size:50px; line-height:1em}
.speed-text sup{top:-.5em; font-size:30px; padding-left:5px;}
.link-reset span{font-size:30px; font-weight:300; text-decoration:underline;font-family: 'Roboto Condensed', sans-serif;}
div.tab { float: left;  background-color: #fff; width: 30%; min-height:600px;}
div.tab button {border: 1px solid #339933; display: block; background-color: inherit; color: #339933;  width: 100%;  outline: none; text-align: center; cursor: pointer; transition: 0.3s; font-size: 15px; padding:15px; font-weight:600;}
div.tab button:hover { background-color: #ff0000; color: #fff;}
div.tab button.active { background-color: #339933; color: #fff;}
.tabcontent { float: left; padding:25px 15px; border: 1px solid #339933; width:70%; height:600px;  text-align:center;  background:#f2f2f2;font-family: 'Roboto Condensed', sans-serif;}
.table{font-size:16px;}
.table tr td{ vertical-align:middle; line-height:2em; font-size:20px; }
.green-15{background:#339933;color:#fff; font-weight:400;border:2px solid #fff; font-size:30px;}
.green-15 sup{top:-.2em !important;}
.black-15{background:#000;color:#fff; font-weight:400;border:2px solid #fff;text-align:left; text-transform:uppercase}
.close{text-decoration:underline; color:#339933 !important; position:absolute; right:15px; top:15px; opacity:1;}

.welcome-caption
{
	text-transform:uppercase;
}

.tablebg
{
	background-color: #339933;
    color: #fff;
}

.font-size tr td
{
	font-size:14px;
}


.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}
.visa{background-image:url(../images/jompay_lg.jpg);}

.cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;height:70px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

@media (min-width: 768px){
.circle-tile {
    margin-bottom: 30px;
	position:relative;
	z-index:99999;
}
}

.circle-tile {
    margin-bottom: 15px;
    text-align: center;
	position:relative;
	z-index:99999;
}

.circle-tile-heading {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto -40px;
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 100%;
    color: #fff;
    transition: all ease-in-out .3s;
}

/* -- Background Helper Classes */

/* Use these to cuztomize the background color of a div. These are used along with tiles, or any other div you want to customize. */

 .dark-blue {
    background-color: #34495e;
}

.green {
    background-color: #339933;
}

.blue {
    background-color: #2980b9;
}

.orange {
    background-color: #f39c12;
}

.red {
    background-color: #e74c3c;
}

.purple {
    background-color: #8e44ad;
}

.dark-gray {
    background-color: #7f8c8d;
}

.gray {
    background-color: #95a5a6;
}

.light-gray {
    background-color: #bdc3c7;
}

.yellow {
    background-color: #f1c40f;
}

/* -- Text Color Helper Classes */

 .text-dark-blue {
    color: #34495e;
}

.text-green {
    color: #16a085;
}

.text-blue {
    color: #2980b9;
}

.text-orange {
    color: #f39c12;
}

.text-red {
    color: #e74c3c;
}

.text-purple {
    color: #8e44ad;
}

.text-faded {
    color: rgba(255,255,255,0.7);
}



.circle-tile-heading .fa {
    line-height: 80px;
}

.circle-tile-content {
    padding-top: 50px;
}
.circle-tile-description {
    text-transform: uppercase;
}

.text-faded {
    color: rgba(255,255,255,0.7);
}

.circle-tile-number {
    padding: 5px 0 15px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

.circle-tile-footer {
    display: block;
    padding: 5px;
    color: rgba(255,255,255,0.5);
    background-color: rgba(0,0,0,0.1);
    transition: all ease-in-out .3s;
}

.circle-tile-footer:hover {
    text-decoration: none;
    color: rgba(255,255,255,0.5);
    background-color: rgba(0,0,0,0.2);
}

.tabbg
{
	background-color:#f2f2f2;
	padding:20px;
	margin-top:-100px;
}

.border-right
{
	border-right:2px solid #339933;
}

@media screen and (max-width: 1000px) {
.tabcontent
{
	width:70%;
	font-size: x-small;
}

.speed-text
{
	font-size: 16px;
}

.speed-text sup
{
	font-size: 18px;
	top:0.2em;
}

.tabcontent
{
	height:100%;
}

}

@media screen and (max-width: 992px) {
	
	.border-right
{
	border-right:none;
}
}