/*=======================================================================
  LAYOUT
====================================================================== */
body, html                                   { width: 100%; height: 100%; margin: 0; }
.section-break                               { height: 200px; padding: 20px; }
.rule                                        { border-top: 1px solid #7dc350; display: block; margin: 0 auto; width: 120px; }
.logo                                        { background: url(../img/logo.png) no-repeat; width: 176px; height: 61px; float: left; margin: 40px 0 0 40px; position: absolute; z-index: 999999999999999999999999 }
.wrapperize                                  { margin-top: 150px; }
.main-bar                                    { z-index: 99; position: absolute; width: 100%; height: 40px; }
.content-main                                { visiblity: visible; display: block }
.mobile-main                                 { visiblity: hidden; display: none }

/*=======================================================================
   TYPOGRAPHY 
====================================================================== */
h1                                           { font-family: 'Titillium Web', sans-serif; font-style: normal; font-weight: 400; text-align: center; color: #333; font-size: 30px; margin: 40px 0 0 0 }
h2                                           { font-family: 'Titillium Web', sans-serif; font-style: normal; font-weight: 200; color: #666666; font-size: 25px; text-align: center; margin: 0 0 40px 0; }
h3                                           { font-family: 'Titillium Web', sans-serif; font-style: normal; font-weight: 200; color: #04b7a3; font-size: 18px; text-align: center; margin: 0; }
p, li                                        { font-family: 'Titillium Web', sans-serif; font-style: normal; font-weight: 400; color: #666666; font-size: 16px; }
.para h1                                     { font-weight: 800; color: #fff; text-align: center; font-size: 42px; }
.para p                                      { color: #fff; text-align: cneter; font-size: 14px; max-width: 600px; margin: 20px 0 0 0; margin: 30px auto 30px auto }
.bucket p                                    { text-align: center; }
/*=======================================================================
   NAV 
====================================================================== */

#nav                                         { float: right; margin: 60px 150px 0 0;}
#nav ul                                      { display: inline-block; list-style-type: none; }
#nav li                                      { display: inline-block; list-style-type: none; text-transform: lowercase; margin: 0 20px 0 0; padding: 0; }
#nav li a                                    { font-family: 'Titillium Web', sans-serif; font-weight: 500; color: #fff; font-size: 18px; }
#nav li a:hover                              { color: #7dc350 }
/*=======================================================================
   TEAM
====================================================================== */
.team-bio h2                                 { font-size: 18px; font-weight: 700; margin: 0 0 5px 0; padding: 0 0 5px 0; border-bottom: 1px solid #7dc350; }
.team-bio h3                                 { font-size: 16px; margin: 0; padding: 0 }
/*=======================================================================
   LINK
====================================================================== */
.member-name a                               { font-family: 'Titillium Web', sans-serif; font-weight: 500; font-size: 18px; }
.news h3, .news a                            { font-family: 'Titillium Web', sans-serif; font-style: normal; font-weight: 200; color: #04b7a3; font-size: 18px; text-align: center; margin: 0; }
.video-button a                              { width: 100px; height: 100px; background: url(../img/play-button.png); display: block; margin: 0 auto 0 auto; padding: 0; }
.buttons                                     { width: 310px; margin: auto; }
a.request-button                             { width: 150px; height: 87px; padding:15px 15px 0 0; text-align: right; display: block; background: url(../img/request-button.png) no-repeat; position: absolute; top: 0; right: 0; text-transform: uppercase; font-family: 'Titillium Web', sans-serif; font-style: normal; font-weight: 700; color: #fff; font-size: 15px; z-index: 999 }
a.request-button:hover                       { color: #000; }
a.demo-btn                                   { width: 150px; height: 50px; background: #00b4a7; float: left; color: #fff; display: block; margin: 0 10px 0 0; padding: 12px 0 0 0; text-align: center; font-family: 'Titillium Web', sans-serif; font-weight: 800; }
a.learn-btn                                  { width: 150px; height: 50px; background: #7fc563; float: left; color: #fff; display: block; text-align: center; padding: 12px 0 0 0; font-family: 'Titillium Web', sans-serif; font-weight: 800; }
a.demo-btn:hover, a.learn-btn:hover          { background: #666; }
a                                            { text-decoration:none;}
/*=======================================================================
   FORM 
====================================================================== */
input                                        { border: 1px solid #ccc; }
.contact-form                                { max-width: 500px; margin: auto; }
#gform_submit_button_1                       { padding: 3px; width: 100px; margin: 0 0 0 -50px; left: 50%; height: 30px; text-transform: uppercase; font-size: 12px; background: #7cc24d; }
/*=======================================================================
   SOCIAL MEDIA
======================================================================= */
.social-media                                { width: 126px; margin: auto; position: relative }
a.sm                                         { float: left; margin: 0px 0 0px 10px; width: 24px; height: 24px; }
a.fb                                         { background: #7cc24d url(../img/smlogos/fb.png); margin:0}
a.fb:hover                                   { background: url(../img/smlogos/fb-ovr.png) }
a.tw                                         { background: #7cc24d url(../img/smlogos/tw.png) }
a.tw:hover                                   { background: url(../img/smlogos/tw-ovr.png) }
a.li                                         { background: #7cc24d url(../img/smlogos/li.png) }
a.li:hover                                   { background: url(../img/smlogos/li-ovr.png) }
a.yt                                         { background: #7cc24d url(../img/smlogos/yt.png) }
a.yt:hover                                   { background: #ccc url(../img/smlogos/yt.png)  }
/*=======================================================================
   MOBILE 
========================================================================== */
@media only screen and (max-width:1024px) {
.content-main                                { visiblity: hidden; display: none }
.mobile-main                                 { visiblity: visible; display: block }


}

@media only screen and (max-width:695px) {
.logo                                        { width: 100%; margin: 60px 0 20px 0; background: url(../img/logo.png) center no-repeat; }
#nav                                         { width: 100%; margin: 0; padding: 0; float: left; }
#nav ul                                      { margin: auto; width: 100%; float: left; }
#nav li a                                    { font-size: 14px; }
#nav li                                      { margin: 0; width: 20%; background: #00b4a7; padding: 5px; display: block; float: left; text-align: center; border-right: 1px solid #7dc350 }
.main-bar                                    { z-index: 999999999999999999999; position: absolute }
a.request-button                             { top: 30px; }
.contact-form                                {padding:0 20px 0 20px;}

.para h1                                     { font-weight: 800; color: #fff; text-align: center; font-size: 16px; }

}