/* Fonts# */

@font-face {
font-family: 'Myriad Pro Regular';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Regular'), url('../font/MYRIADPRO-REGULAR.woff') format('woff');
}


@font-face {
font-family: 'Myriad Pro Condensed';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Condensed'), url('../font/MYRIADPRO-COND.woff') format('woff');
}


@font-face {
font-family: 'Myriad Pro Condensed Italic';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Condensed Italic'), url('../font/MYRIADPRO-CONDIT.woff') format('woff');
}


@font-face {
font-family: 'Myriad Pro Light';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Light'), url('../font/MyriadPro-Light.woff') format('woff');
}


@font-face {
font-family: 'Myriad Pro Semibold';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Semibold'), url('../font/MYRIADPRO-SEMIBOLD.woff') format('woff');
}


@font-face {
font-family: 'Myriad Pro Semibold Italic';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Semibold Italic'), url('../font/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
}


@font-face {
font-family: 'Myriad Pro Bold Condensed';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Bold Condensed'), url('../font/MYRIADPRO-BOLDCOND.woff') format('woff');
}


@font-face {
font-family: 'Myriad Pro Bold';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Bold'), url('../font/MYRIADPRO-BOLD.woff') format('woff');
}


@font-face {
font-family: 'Myriad Pro Bold Italic';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Bold Italic'), url('../font/MYRIADPRO-BOLDIT.woff') format('woff');
}


@font-face {
font-family: 'Myriad Pro Bold Condensed Italic';
font-style: normal;
font-weight: normal;
src: local('Myriad Pro Bold Condensed Italic'), url('../font/MYRIADPRO-BOLDCONDIT.woff') format('woff');
}

.v-note {background-color: yellow;}



/* Header
====================================*/


#logo a img {
height: 45px; top: -12px; position: relative;
}

img#appstore_badge {height: 60px;}


#webapp_banner {background: #dcecdf; text-align: center; margin: 0 auto 0 auto; font-size: 1.2em; color: #4E4D4D; padding: 10pt; display: none;}
#webapp_banner i {font-size: 1.2em;}

.hero {
	position: relative;
	padding-bottom: 37.5%; 
	padding-top: 0;
	height: 0;
	background: #666;
	}

.hero iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}
	
#video-tall {display: none;}
#video-wide {display: block;}

	

/* Page Content
====================================*/

/* .circle i {font-size: 24pt; margin-top: 14px; width: 38px; left: 19%;}
.circle .icon-magic {margin-top: 16px; font-size: 22pt;} */

.centered {text-align: center;}
h4.centered {margin-bottom: 5px;}

.button, input[type="button"], input[type="submit"], input[type="text"], input[type="password"], input[type="email"], textarea, select, button {
font-family: 'Myriad Pro Regular', 'PT Sans', sans-serif;
}

body, p, li {
font-family: 'Myriad Pro Regular', 'PT Sans', sans-serif;
}


h1, h2 {
font-family: 'Myriad Pro Bold', 'PT Sans', sans-serif;
font-weight: normal;
}

h3, h4, h5, h6 {
font-family: 'Myriad Pro Bold', 'PT Sans', sans-serif;
font-weight: normal;
}

p, li {color: #666; font-size: 12.5pt; line-height: 1.5em;}
.notification {color: #666; font-size: 12.5pt; line-height: 1.5em; margin: 1.5em 0 1.5em 0;}
.notification.green {color: #666; border: 1px solid #3FB05A; background-color: #dcecdf;}
.notification.green a {font-weight: bold;}


.overview p, .overview h4 {color: white; font-size: 1.6em; padding: 0 4em; margin: 0; text-align: center;}
.overview h4 {padding-bottom: 0.15em;}
.overview .button {margin-top: 0.5em; width: 6rem;}
.overview {background: #3FB05A; padding: 1em 0; margin-top: -5px;}
.overview .button {float: right;}


.introtext {font-family: 'Myriad Pro Bold', 'PT Sans', sans-serif;}

h1, h2, h3, h4, h5, h6 {
color: #4E4D4D;
line-height: 110%;
padding-bottom: 0.25em;
}

.menu ul > li > a {
font-size: 13pt;}

.float-right {float: right;}

p {margin-bottom: 1em;}

div.geek {
  background-color: #eee;
  border: 1px solid #999;
  display: block;
  padding: 20px;
}

.geek {font-family: monospace;}

table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 20px 0;
  padding; 0;
}

th {
  background-color: #f5f5f5;
  text-align: left;
  font-weight: bold;
  padding: 4px 8px;
  border: #e0e0e0 1px solid;
}

td {
  vertical-align: top;
  padding: 2px 8px;
  border: #e0e0e0 1px solid;
}

.label, .badge {
    display: inline-block;
    padding: 2px 4px;
    font-size: 11.844px;
    font-weight: bold;
    line-height: 14px;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #999
}

.label {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    float: right;
}

.badge {
    padding-right: 9px;
    padding-left: 9px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
}

.label:empty, .badge:empty {
    display: none;
}

a.label:hover, a.label:focus, a.badge:hover, a.badge:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

.label-important, .badge-important {
    background-color: #A03935;
}

.label-success, .badge-success {
    background-color: #3FB05A;
}

.label-info, .badge-info {
    background-color: #4E4D4D;
}

.sectionintro p {margin-top: 1em; margin-bottom: 0em;}

.centered {text-align: center;}
    
#examples h4 {color: white; font-size: 12pt; background: rgba(0, 0, 0, 0.6); text-align: center; padding: 1em; margin-block-start: 0; margin-block-end: 0;} 
#examples {left: -0.75em;}

#partners {padding: 1em;}

#real-estate {background: url('../images/RE_demo.jpg'); background-size: cover; min-height: 350px; background-position: center; margin-bottom: 1.5em;}
#payments {background: url('../images/pay_demo_boutique.jpg'); background-size: cover; min-height: 350px; background-position: center; margin-bottom: 1.5em;}
#coupons {background: url('../images/coupon_demo.jpg'); background-size: cover; min-height: 350px; background-position: center; margin-bottom: 1.5em;}
#social {background: url('../images/P2P_demo-mask.jpg'); background-size: cover; min-height: 350px; background-position: center; margin-bottom: 1.5em;}
#offers {background: url('../images/offer_demo.jpg'); background-size: cover; min-height: 350px; background-position: center; margin-bottom: 1.5em;}


.action-buttons a.button{margin: 0 1em;}
            
.featured-box h3 {font-size: 13pt; padding: 0 1em 0.6em 1em; margin: 0; text-align: center;}
.featured-box p {padding: 0 1em 0 1em;}

.notification .column {margin-left: 4px; margin-right: 4px;}
.featured-boxes {margin-top: 2em;}

.featured-image {margin: 0 auto; width: 99%;}

.feature-icon {height: 120px; width: 120px; margin: 0 auto 1em auto;}

.notification {padding: 1em; overflow: auto;}

.notification a.button {margin: 1em 0 0 0; display: block;}

.ui-accordion .ui-accordion-header, .trigger a {background: #dcecdf; font-size: 12pt;}

.toggle-container p {margin-bottom: 1em; font-size: 12pt;}

.notification span {color: inherit; font-weight: inherit;}

.list-0 {list-style: initial; margin: 0 0 1em 3em;}

.hidden {display: none;}

#hiw-diagram, #hiw-diagram-mobile {width: 100%; height: auto; margin: 1.5em 0;}


/* Headlines, Menus & Captions
====================================*/

#titlebar h2 {
	font-family: 'Myriad Pro Semibold', 'PT Sans', sans-serif;
	font-size: 20pt;
}

#titlebar span {color: inherit; font-weight: inherit;}

h1#hero-head {
font-family: 'Myriad Pro Semibold', 'PT Sans', sans-serif;
font-size: 6vmin;
color: #fff;
text-transform: none;
padding: 0;
position: absolute;
top: 35%;
width: 90vw;
margin: 0 5vw;
text-align: center;}

.video-button {
font-size: 2vmin;
position: absolute;
bottom: 3%;
width: 100%;
text-align: center;}

.litetext {
font-weight: normal;
}

.dropcap {
font-family: 'Myriad Pro Bold', 'PT Sans', sans-serif;
font-style: normal;
color: white;
background: #3FB05A;
padding: .15em;
margin-right: .15em;
}

.defaultimg {bottom: 0px;}

.headline {margin-top: 1em;}

.section-title {text-align: center; margin: 1em 0 0.5em 0;}


/* Footer Menu
====================================*/
#footernavigation { float: right; margin-bottom:30px;}

.footermenu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footermenu ul li { position: relative; }

.footermenu > ul li { float: left; height:30px;}
.footermenu ul li:hover > ul { display: block;}

.footermenu ul a {
	display: block;
	position: relative;
}

.footermenu ul a { text-decoration: none; }

.footermenu ul > li > a {
	color: #575757;
	font-size: 14px;
	line-height:18px;
	padding:10px 2px 1px 0px;
	margin:10px 15px 0 0;
	overflow: hidden;
	border-bottom: 1px solid transparent;
}

#footercurrent,
.footermenu ul li a:hover,
.footermenu ul > li:hover > a { 
	border-bottom: 1px solid #3FB05A;
}

#footercurrent .redstyle,
.footermenu ul li.redstyle a:hover,
.footermenu ul > li.redstyle:hover > a { 
	border-bottom: 1px solid #A03935;
}


.footermenu ul li a {
	-webkit-transition: border 150ms ease-in-out, background-color 150ms ease-in-out;
	-moz-transition: border 150ms ease-in-out, background-color 150ms ease-in-out;
	-o-transition: border 150ms ease-in-out, background-color 150ms ease-in-out;
	-ms-transition: border 150ms ease-in-out, background-color 150ms ease-in-out;
	transition: border 150ms ease-in-out, background-color 150ms ease-in-out;
}

#footer-bottom {
width: 100%;
background-color: #4E4D4D;
padding: 10px 0 0 0;
color: #AAA;
}

#footer-bottom a span {
color: #3FB05A;
font-weight: bold;
}

.headline {text-transform: uppercase;}

/* =================================================================== */
/* Green #3FB05A
====================================================================== */

a, a:visited,
#not-found i,
.comment-by span.reply a:hover,
.comment-by span.reply a:hover i,
.categories a:hover,
.testimonials-author,
.happy-clients-author,
.meta ul li a:hover,
.list-1 li:before,
.list-2 li:before,
.list-3 li:before,
.list-4 li:before,
.accentcolor { color: #3FB05A; }

#current {background-color: #ffffff;}

#current, .menu ul li a:hover, .menu ul > li:hover > a, .flickr-widget-blog a:hover {
border-color: #3FB05A;
}

.menu ul ul { border-top-color: #3FB05A; }

.tp-leftarrow:hover,
.tp-rightarrow:hover,
.flexslider .flex-next:hover,
.flexslider .flex-prev:hover,
.featured-box:hover > .circle,
.featured-box:hover > .circle span,
.featured-box:hover > .circle-2,
.featured-box:hover > .circle-3,
.portfolio-item:hover > figure > a .item-description,
.sb-navigation-left:hover,
.sb-navigation-right:hover,
.newsletter-btn,
.search-btn { background-color: #3FB05A; }

#filters a:hover, .selected { background-color: #3FB05A !important; }

.premium .plan-price,
.premium .plan-features a.button:hover { background-color: #3FB05A; }
.premium.plan h3,
.premium .plan-features a.button { background-color: #3FB05A; }

.featured-box:hover > .circle-2,
.featured-box:hover > .circle-3 { box-shadow: 0 0 0 8px rgba(63,176,90,0.3); }

#current:after,
.pagination .current,
.pagination ul li a:hover,
.tags a:hover,
.button.gray:hover,
.button.light:hover,
.button.color,
input[type="button"],
input[type="submit"],
input[type="button"]:focus,
input[type="submit"]:focus,
.tabs-nav li.active a,
.ui-accordion .ui-accordion-header-active:hover,
.ui-accordion .ui-accordion-header-active,
.trigger.active a,
.trigger.active a:hover,
.skill-bar-value,
.highlight.color,
.notice-box:hover {background: #3FB05A; }
.notice-box:hover .accentcolor {color: white; }

.notice-box.invert {background: #3FB05A;}
.notice-box.invert i, .notice-box.invert p, .notice-box.invert .accentcolor {color: white; }

.notice-box.invert:hover {background: #A0A0A0; }

.button.outline {background: #fff;}
.button.outline:hover {background: #666; color: white;}

.button.yellow {background: #F2B91D; color: #4E4D4D;}
.button.yellow:hover {background: #4E4D4D; color: white;}


.bannercontainer {
    padding:0px;
    background-color:#fff;
    width:960px;
    position:relative;
    position:relative;
    margin-left:auto;
    margin-right:auto;
}
     
.banner{
    width:960px;
    height:500px;
    position:relative;
    overflow:hidden;
}

.greentint {background: #dcecdf; border: 1px solid #3FB05A;}
.greentint .line {border-bottom: none;}
.greentint h3.headline {background: #dcecdf;}

.graytint {background: #eaeaea; border: 1px solid #999;}
.graytint .line {border-bottom: none;}
.graytint h3.headline {background: #dcecdf;}

.menu ul > li > a.invert-nav {color: #ffffff; background: #3FB05A; top: -2px;}
.menu ul > li > a.invert-nav:hover {background: #36a450; border-bottom-color: #36a450;} 
.menu ul > li > a.invert-nav.redstyle {background: #A03935;}

.menu ul > li > a.invert-nav#current {color: #888;}

.tabs-container {border: 1px solid #3FB05A; padding: 20px; width: auto;}
.tabs-nav li a {border-bottom: none; border-right: 3px solid #fff; border-radius: 3px 3px 0px 0px; background-color: #3FB05A44; }
.tabs-nav li:first-child a, .tabs-nav li:last-child a {border-radius: 3px 3px 0px 0px;}


/* =================================================================== */
/* MEDIA QUERIES FOR RESPONSIVE REFLOW
====================================================================== */

#mobile-contact {display: none;}
#hiw-diagram-mobile {display: none;}

@media only screen and (min-width: 1180px) {
}

@media only screen and (min-width: 1024px) {
}

@media only screen and (max-width: 1199px) {
}

@media only screen and (max-width: 1024px) {
    .banner, .bannercontainer { width:760px; height:395px;}
	.overview p, .overview h4 {font-size: 1.35em; padding-left: 0; padding-right: 0;}
}
       
@media only screen and (max-width: 767px) {
    .banner, .bannercontainer { width:480px; height:250px;}
    .featured-desc {margin: 0.6em 0 0 0;}
    #videos {margin: 2em auto 2em auto; width: 99%;}
    .video-button {font-size: 0.85em; bottom: 15%;}
	.overview p, .overview h4 {padding: 0; font-size: 1em; line-height: 1.1em;}
	#header {position: fixed;}
	#header .container {width: 100%; padding: 0;}
	#header .columns {width: 100%;}
	#header #logo {width: 50%; padding-left: 0; position: relative; display: block; float: left;}
	#jPanelMenu-menu {padding-top: 78px;}
	#logo a img {height: 36px; margin: 4px 150px 0 5px;}
	a.menu-trigger {float: right;}
	#examples .four.columns {width: 280px margin: 0 auto 0 auto; padding: 0;}
	#examples {left: 0;}
	#handphone,#castscreen {height: 80%;}
	h2 {font-size: 1.5em;}
	.hero {padding-bottom: 79.75%; overflow: hidden;}
	#video-tall {display: block;}
	#video-wide {display: none;}
	.hero-content {margin: 0; width: 100%;}
	h1#hero-head {top: 20%;}
	.hide-mobile {display: none;}
	#mobile-contact {display: block; float: right; text-align: center; padding: 27px 2em; z-index: 200;}
	#hiw-diagram {display: none;}
	#hiw-diagram-mobile {display: block;}

 }
    
@media only screen and (max-width: 479px) {
    .banner, .bannercontainer { width:320px;height:166px; }
}


/* iPhone 5 */
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
    #webapp_banner {display: block;}
}

/* iPhone 6 7 8 */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
    #webapp_banner {display: block;}
}

/* iPhone 6+ 7+ 8+ */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
    #webapp_banner {display: block;}
}

/* iPhone 6+ 7+ 8+ */
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    #webapp_banner {display: block;}
}