@charset "utf-8"; body { color: #3f3f3f; font-size: 90%; font-family: source-sans-pro, "Helvetica Neue", Helvetica, Arial, SunSans-Regular, sans-serif; margin: 0; } a { color: #00bfbc; font-style: normal; text-decoration: underline; outline: none medium; } a:hover { color: #fff; font-style: normal; background-color: #00bfbc; text-decoration: underline } .sub-menu a:hover { color: #00bfbc; background-color: #fff; text-decoration: none; } .top-menu a:hover { color: #e7c5ff; text-decoration: none; } h1, h2, h3, h4, h5, h6 { color: #38c7a4; font-weight: normal; } h1.pageTitle {text-indent: -1000em;} h1 {font-size: 2em;} h2 {font-size: 1.8em;} h2.pageHeading { } h3 {font-size: 1.4em;} *+html h3.linksHeader {margin-top: 20px;} h4 {font-size: 1.2em;} h5 {font-size: 1.1em;} .img-responsive { display: block; height: auto; max-width: 100%; } img { vertical-align: middle; border: 0; page-break-inside: avoid; max-width: 100% !important; } .gal-image { background-size:cover; width:300px; height:200px; border:7px solid #0A0F0E; margin-left:calc(100% - 620px); margin-top:50px; opacity:0.7; background-position:center; transition: all 0.5s ease, background-image 1ms; background-image:url(../images/gal1.jpg); } .sitedesc { width:400px; height:100px; margin-left:calc(20px); margin-top:100px; color:rgba(235,235,235,1.00); font-family:open-sans; font-size:25px; position:absolute; } .gal-image:hover { opacity:1; } .gal-item { font-family:open-sans; width:210px; height:40px; margin-left:307px; position:absolute; line-height:40px; font-size:20px; color:rgba(229,228,224,1.00); padding-left:20px; transition: all 0.5s ease; } .gal-item1 { background:rgba(14,22,20,1.00); margin-top:20px; } .gal-item2 { background:rgba(14,22,20,0.40); margin-top:60px; } .gal-item3 { background:rgba(14,22,20,0.40); margin-top:100px; } .buildbox { text-align:center; width:100%; background:rgba(213,213,213,1.00); padding:10px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #mob-menu { display:none; } .men-i { color: #fff; width:100%; display:block; background:#00bfbc; border-bottom:1px solid #161f1d; border-top:1px solid #283936; padding:15px; font-family: open-sans; } .contactinput { padding:8px; font-size:18px; line-height:18px; width:300px; } .contacttable { max-width:500; } .top-bar { background-color: #fff; height: 92px; width: 100%; z-index: 100; } .dark-section { background-color: #1d2927; height: 320px; width: 100%; } .sub-menu { background-color: #00bfbc; height: 40px; width: 100%; text-align:right; } .sub-menu-button { color:#fff; font-size:17px; line-height:45px; font-family: open-sans; text-decoration:none; margin-left:18px; } .sub-menu-button:hover { color: #00bfbc; background-color: #fff; } .sub-menu-buttongall { color:#cae; font-size:17px; line-height:45px; font-family: open-sans; text-decoration:none; margin-left:18px; } .sub-menu-buttongall:hover { color: #fff; background-color: #000; } .text-body { font-family: open-sans; font-style: normal; font-size: 14px; font-weight: 400; line-height:16px; margin-top: 10px; padding-right: 20px; color: #3A3333; } .sub-heading-dark { font-family: open-sans; font-style: normal; font-size:34px; font-weight: 600; color:#000000; padding-left:20px; padding-top:30px; } .sub-heading-dark-smaller { font-family: open-sans; font-style: normal; font-size:28px; font-weight: 600; color:#000000; padding-left:20px; padding-top:30px; } .sub-heading-light { font-family: open-sans; font-style: normal; font-size:34px; font-weight: 400; color:rgba(255,255,255,1.00); padding-left:20px; padding-top:40px; } .dark-section-as-header { background-color: #00bfbc; height: 12px; width: 100%; } .centre-block { font-size: 1.2em; width: 1100px; margin: 0 auto; padding-left: 30px; padding-right: 30px; overflow: hidden; } .top-menu { float: right; height: 69px; vertical-align: text-bottom; font-family: source-sans-pro; font-weight: 400; font-size: 25px; background:rgba(255,255,255,0) url('(EmptyReference!)') url('(EmptyReference!)') url('(EmptyReference!)') url('(EmptyReference!)') ; margin-top: 30px; } .menu-l { height: 59px; line-height: 55px; display: inline-block; margin-top:10px; width: auto; min-width:166px; text-align:center; background-image:url(../images/mb-l.png); background-position:bottom; background-repeat:no-repeat; color: #000; text-decoration: none; } .menu-c { height: 59px; line-height: 55px; display: inline-block; margin-top:10px; width: auto; min-width:205px; text-align:center; margin-left:-4px; margin-right:-4px; background-image:url(../images/mb-c.png); background-position:bottom; background-repeat:no-repeat; color: #000; text-decoration: none; } .menu-r { height: 59px; line-height: 55px; display: inline-block; margin-top: 10px; width: auto; min-width: 144px; text-align: center; background-image: url(../images/mb-r.png); background-position: bottom; background-repeat: no-repeat; color: #000; text-decoration: none; } .menu-l:hover, .menu-l-s { background-image:url(../images/mg-l.png); } .menu-c:hover, .menu-c-s { background-image:url(../images/mg-c.png); } .menu-r:hover, .menu-r-s { background-image:url(../images/mg-r.png); } .sub-head { background-image: url(../images/efts.png); width: 240px; margin-top:75px; height: 17px; position: absolute; opacity:0.5; } .top-logo { background-image: url(../images/top-icon.png); background-repeat: no-repeat; width: 800px; height: 92px; position: absolute; } .mob-menu-button { display:none; } .build-your-own { background-image: url(../images/build-your-own.png); background-repeat: no-repeat; height: 62px; width: 389px; position:relative; float:right; margin-right:330px; margin-top:110px; } .scroll { background-image: url(../images/scroll.png); background-repeat: no-repeat; height: 36px; width: 257px; position:absolute; margin-top:150px; margin-left:290px; display:block; } .begin { background-image: url(../images/begin.png); height: 70px; width: 193px; position:absolute; margin-left:410px; margin-top:-8px; } .begin:hover { background-image: url(../images/begin-hover.png); } .begin:active { background-image: url(../images/begin-active.png); } .green-triangle-top { position:absolute; background-image: url(../images/green-triangle-top.png); height: 92px; width: 521px; margin-top:-91px; margin-left:-100px; } .green-triangle-bottom { position:absolute; background-image: url(../images/green-triangle-bottom.png); height: 27px; width: 521px; margin-left:-100px; } .green-triangle { display:none; position:absolute; background-image: url(../images/green-triangle.png); height: 118px; width: 521px; margin-top:-92px; margin-left:-100px; } .grey-triangle { position:relative; background-image: url(../images/grey-triangle.png); height: 26px; width: 877px; margin-left:400px; } .tile-container { text-align:left; width: 800px; margin: 15px auto 55px; } a { text-decoration:none; } .tile-desc { font-family: Arial; color:#434343; line-height:32px; font-size:18px; text-align:center; text-decoration:none; } .tile { color: #fff; width:300px; margin:0 auto; margin:10px; display:inline-block; vertical-align:text-top; } .tile-title { font-family: source-sans-pro; color: #434343; line-height: 32px; font-size: 35px; text-align: center; font-weight: 600; margin-bottom: 22px; margin-top: 9px; font-style: normal; } .earth-tile { background-image:url(../images/earth.png); background-size:contain; width:230px; height:230px; margin:0 auto; } .money-tile { background-image:url(../images/money.png); background-size:contain; width:230px; height:230px; margin:0 auto; } .tile { text-align: center; margin: 0 10px 15px; width: 230px; height: 180px; background-size: contain; } .tile h1 { color: #fff; font-weight: 700; text-shadow: -1px -1px 0 #adadad, 1px -1px 0 #adadad, -1px 1px 0 #adadad, 1px 1px 0 #adadad; } .power-tile { background-image:url(../images/power.png); background-size:contain; width:230px; height:230px; margin:0 auto; } .black-section { width: 100%; background-image:url(../images/menu-bg.png); background-position:center; background-repeat:no-repeat; height: 50px; } .fade-pic { background-color: #9258a6; overflow:hidden; position: relative; width: 100%; text-align:center; } #mob-test-tit { display:none; } .speech { background-image: url(../images/speech.png); height: 195px; width: 350px; padding: 45px; padding-top: 37px; padding-bottom: 30px; font-family: source-sans-pro; font-style: normal; font-weight: 300; color: rgba(245,245,245,1.00); vertical-align:top; line-height:35px; margin-left:87px; margin-top:10px; display:inline-block; margin-right:-10px; margin-bottom:50px; } .speechmark { font-size:84px; display:inline-block; margin-top:10px; margin-bottom:-70px; } .speechname { position:absolute; margin-left:200px; margin-top:130px; font-weight:400; font-size:19px; } .person { width:104px; height:126px; position:absolute; margin-top:120px; margin-left:-140px; } .social-icons { background-color: #9bcc4e; height: 65px; margin-top: 10px; padding-top: 10px; padding-bottom: 20px; display: flex; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ } .signup { background-color: #fbc140; margin-top: 16px; } .social-icons div { float: right; margin: 0 5px; } .mobile-testim { background-color: rgba(14,14,14,0.79); width: calc(100% - 165px); margin: 20px; text-align:left; min-height:132px; padding-left:115px; padding-top:10px; padding-bottom:10px; padding-right:10px; font-family:source-sans-pro; color:rgba(248,248,248,1.00); display:none; } .person-mob { position:absolute; display:inline-block; margin:7px; margin-left:-108px; margin-top:-3px; width:104px; height:126px; } #farright { background-color: transparent; text-align: center; float: right; z-index: 6; width: 310px ; margin-top: 30px; margin-bottom: 20px; margin-left: 10px; padding: 5px; border: solid 1px #21b7ac; } td h3 { margin-top: 0; padding-top: 0; margin-bottom: 0; padding-bottom: 0; } /* For tablets */ @media (max-width: 1100px) { .sitedesc { margin-top:70px; width:200px; font-size:18px; } .gal-image { margin-left:calc(100% - 590px); margin-top:25px; } .top-logo {width: calc(100% - 60px)} #mob-menu { width:100%; background:#1d2927); margin-top:16px; z-index:99; position:absolute; display:none; } .sub-menu { display:none; } .top-menu { display:none; } .green-triangle-top, .green-triangle-bottom, .black-section { display: none; z-index: 0; } .green-triangle { display:block; } .mob-menu-button { background-image: url(../images/mob-menu-button.png); height: 36px; width: 48px; display:block; position: relative; float:right; margin-top:17px; } .centre-blockslide { width: calc(100% - 60px); margin: 0 auto; padding-left:30px; padding-right:30px; } .centre-block { width: calc(100% - 60px); margin: 0 auto; padding-left:30px; padding-right:30px; } .centre-b { margin: 0 auto; padding-right: 30px; padding-left: 30px; width: calc(100% - 60px); } .build-your-own { background-size:contain; width: 300px; margin-right:280px; margin-top:100px; } .begin { height: 56px; background-size:contain; background-repeat:no-repeat; margin-left:330px; margin-top:-8px; } .dark-section { height: 260px; } .green-triangle { background-size:contain; background-repeat:no-repeat; height: 78px; width: 521px; margin-top:-60px; margin-left:-20px; } .grey-triangle { background-size:contain; background-repeat:no-repeat; height: 19px; width: 877px; margin-left:306px; } .earth-tile, .power-tile, .money-tile { width:200px; height:200px; } .tile { width:230px; } .tile-title { font-size:32px; } .scroll { display:none; } #desk-testim { display:inline-block; } .tile-container{width: 80%; text-align: center:} } /* Tile fluid fix */ @media (max-width: 840px) { .sitedesc { display:none; } .gal-image { margin-left:calc(100% - 290px); margin-top:25px; } .gal-item { margin-left:-235px; } .tile { width:190px; } .tile-title { font-size:30px; } .tile-desc { font-size:15px; } #desk-testim { display:none; } .mobile-testim { display:block; } #mob-test-tit { display:block; } } /* For phablets */ @media (max-width: 730px) { .gal-item { font-family:open-sans; width:160px; height:30px; position:absolute; line-height:30px; font-size:15px; color:rgba(229,228,224,1.00); padding-left:20px; transition: all 0.5s ease; margin-left:-185px; } .gal-image { width:240px; height:160px; margin-left:calc(100% - 243px); margin-top:40px; } /* .build-spacer { height:78px; }*/ .build-your-own { background-size:contain; width: 300px; position:relative; float:inherit; margin: 0 auto; } .begin { position:absolute; margin-left:70px; margin-top:60px; } .green-triangle { height: 38px; width: 521px; margin-top:-29px; margin-left:-20px; } .grey-triangle { height: 13px; width: 877px; margin-left:140px; } .earth-tile, .power-tile, .money-tile { width:170px; height:170px; } .tile-container { width: 70%; } .tile { width:180px; } .tile-title { font-size:26px; } .tile-desc { font-size:14px; line-height:22px; } } /* For mobile */ @media (max-width: 440px) { .gal-image { width:240px; height:160px; margin-left:calc(100% - 230px); margin-top:-80px; } #mob-menu { margin-top:50px; } .contactinput { padding:4px; font-size:15px; line-height:15px; width:170px; } .contacttable { width:100%; } .container { width: calc(100% + 60px); margin-left:-40px; } .buildbox { background:rgba(255,255,255,0); } .col{ padding:5px; } .fade-pic { background-color: #4f328a; margin-top:-10px; } .centre-block { width: calc(100% - 60px); margin: 0 auto; padding-left:30px; padding-right:30px; } .top-bar { height: 50px; } .top-logo { background-size:contain; background-repeat:no-repeat; height:49px; margin-left:-14px; margin-top:1px; } .sub-head { display:none; } .mob-menu-button { background-size:contain; background-repeat:no-repeat; height:25px; margin-right:-29px; margin-top:12px; } .build-your-own { width: 230px; } .begin { display:none; height:44px; margin-left:47px; margin-top:48px; } .build-spacer { height:60px; } .dark-section { display:none; height: 130px; } .green-triangle { height: 58px; width: 300px; margin-top:-45px; position:relative; margin-right:-100px; float:right; } .grey-triangle { display:none; } .begin-mobile { background-color:#00b2a0; width:100%; height:70px; border-bottom:#008e80 6px solid; display:none; } .begin-mobile:active { background-color: #00D3BE; width: 100%; height: 70px; } .begin-mobile-text { background-image:url(../images/begin-text.png); width:193px; height:70px; margin:0 auto; } .earth-tile, .power-tile, .money-tile { width:200px; height:200px; } .tile { width:calc(100% + 60px); margin-top:16px; margin-left:-30px; margin-bottom:15px; background-image:url(../images/fade-light.png); background-position:bottom; background-repeat:repeat-x; } .tile-title { font-size:27px; } .tile-desc { font-size:16px; line-height:22px; padding-left:30px; padding-right:30px; padding-bottom:50px; } } div.thumbTable { overflow: hidden; margin: 10px auto; } div.thumbRow { overflow: hidden; margin-left: 120px; } div.thumbCell {float: left; padding-bottom: 7px;} div.thumbCell a { -moz-box-shadow: 5px 5px 5px #908b7f; -webkit-box-shadow: 5px 5px 5px #908b7f; box-shadow: 5px 5px 5px #908b7f;} div.thumbCell img:hover { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;} a.arrowLinkLeft, a.arrowLinkRight {/*text-decoration: none; font-size: 24px; font-weight: bold; color: #666666;*/ position: absolute; top: 44%; text-indent: -1000em; width: 48px; height: 48px; background-repeat: no-repeat; display: block;} a.arrowLinkLeft {background-image: url(/images/arrowLeft.png);} a.arrowLinkRight {background-image: url(/images/arrowRight.png);} a.arrowLinkLeft:hover, a.arrowLinkRight:hover {/*color: #000000;*/ background-position: -48px 0;} .lowerLinks { overflow: auto; border: solid 1px #c0c0c0; margin: 3px auto; padding: 2px; position: relative; width: 60%; /* height: 40px; Needed if #backLink is positioned absolutely */} #backLink {float: right; /* position: absolute; */ /* comment out these two lines if floating to the right */ /* top: 25px; */ } .storeButton { color: #fff; background-color: #00bfbc; margin: 0; padding: 4px; border: solid 1px #000; } .bx-viewport ul { margin-left: 0; padding: 0; } .fb-like { } .left { width: 55%; float: left; padding-right: 4px; } .right { width: 40%; float: right; margin-top: 12px; padding-top: 8px; padding-left: 4px; } .bsubbut { color: #fff; font-size: 90%; background-color: #9bcc4e; margin: 2px; padding: 2px; border: solid 1px; } #distributorsTable tr:nth-child(even) {background: #ebebeb} #distributorsTable tr:nth-child(odd) {background: #d0ffff} /* HOVER STYLES */ div#pop-up { display: none; position: absolute; width: 480px; padding: 10px; background: #eeeeee; color: #000000; border: solid 1px #1a1a1a; font-size: 90%; z-index: 2000; } /* Outer */ #my_popup { width:100%; height:100%; display:none; position:fixed; top:30px; left:0; background:rgba(0,0,0,0.55) url('(EmptyReference!)'); } /* Inner */ .my_popup-inner { max-width:700px; width:90%; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); box-shadow:0px 2px 6px rgba(0,0,0,1); border-radius:3px; background:#fff; } /* Close Button */ .my_popup_close { width:30px; height:30px; padding-top:4px; display:inline-block; position:absolute; top:0; right:0; transition:ease 0.25s all; border-radius:1000px; background:rgba(0,0,0,0.8) url('(EmptyReference!)'); font-family:Arial, Sans-Serif; font-size:20px; text-align:center; line-height:100%; color:#fff; } .my_popup_close:hover { background:rgba(0,0,0,1) url('(EmptyReference!)'); text-decoration:none; } #my_popup p { margin: 0; padding: 0; }