HTML { background: url("http://static.dendrocom.com/2014/background2-dendrocom.jpg") no-repeat center center fixed #999; background-size: cover; }

HTML, BODY { color: #fff; font-family: "Myriad Pro",Myriad,"Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 16px; font-weight: normal; overflow-x: hidden; overflow-y: scroll; margin: 0; padding: 0; }

BODY { padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left); }

.BG { position: fixed; left: 0; top: 0; right: 0; bottom: 0; /*@include transition(all 0.7s);*/ }

.BG.hidden { opacity: 0; }

.preload { position: absolute; left: 0px; right: 0px; }
.preload img { width: 1px; height: 1px; opacity: 0.1; }

H1 { position: relative; width: 600px; height: 200px; margin: 0; padding: 0; }
H1 DIV { position: absolute; left: 0; top: 0; -webkit-transition: all 0.7s; -moz-transition: all 0.7s; -ms-transition: all 0.7s; -o-transition: all 0.7s; transition: all 0.7s; }
H1 DIV.hidden { opacity: 0; -webkit-transform: scale(3, 0.2); -moz-transform: scale(3, 0.2); -ms-transform: scale(3, 0.2); -o-transform: scale(3, 0.2); transform: scale(3, 0.2); }

#HOMEMENU A { display: block; position: relative; width: 160px; height: 160px; }
#HOMEMENU IMG { position: absolute; left: 0; top: 0; width: 160px; height: 160px; -webkit-transition: all 0.6s; -moz-transition: all 0.6s; -ms-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; }
#HOMEMENU IMG.hidden { opacity: 0; }
#HOMEMENU .highlight1 { -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -ms-transition: all 0.8s; -o-transition: all 0.8s; transition: all 0.8s; opacity: 1.0; }
#HOMEMENU .highlight1.hiddenbefore { opacity: 0; -webkit-transform: scale(0.85, 1.15); -moz-transform: scale(0.85, 1.15); -ms-transform: scale(0.85, 1.15); -o-transform: scale(0.85, 1.15); transform: scale(0.85, 1.15); }
#HOMEMENU .highlight1.hiddenafter { opacity: 0; }
#HOMEMENU .highlight2 { -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; opacity: 1.0; }
#HOMEMENU .highlight2.hiddenbefore { opacity: 0; -webkit-transform: scale(0.2, 0.3) skew(20deg, 0); -moz-transform: scale(0.2, 0.3) skew(20deg, 0); -ms-transform: scale(0.2, 0.3) skew(20deg, 0); -o-transform: scale(0.2, 0.3) skew(20deg, 0); transform: scale(0.2, 0.3) skew(20deg, 0); }
#HOMEMENU .highlight2.hiddenafter { opacity: 0; -webkit-transform: scale(2, 3) skew(-20deg, 0); -moz-transform: scale(2, 3) skew(-20deg, 0); -ms-transform: scale(2, 3) skew(-20deg, 0); -o-transform: scale(2, 3) skew(-20deg, 0); transform: scale(2, 3) skew(-20deg, 0); }
#HOMEMENU A.iconbig { width: 204px; height: 390px; }
#HOMEMENU A.iconbig IMG { width: 204px; height: 390px; }
#HOMEMENU A.iconbig .highlight1, #HOMEMENU A.iconbig .highlight2 { display: none; }

#HOMESECONDMENU P { margin: 0; padding: 25px 0 20px 0; opacity: 0.4; color: white; font-size: 16px; font-weight: normal; text-decoration: none; text-align: center; }
#HOMESECONDMENU A { width: auto; height: auto; margin: 0; padding: 0; opacity: 0.6; }
#HOMESECONDMENU A:hover { opacity: 1.0; }
#HOMESECONDMENU IMG { position: relative; width: 252px; height: 90px; margin: 0; padding: 0; }

#screenshots { padding: 30px 0 0px 0; }

.cta, .cta_ios { height: 50px; background: white; border-radius: 25px; /*box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);*/ }
.cta A, .cta_ios A { display: block; padding-top: 6px; padding-left: 54px; padding-right: 25px; color: black; font-size: 24px; line-height: 19px; text-decoration: none; }
.cta A B, .cta_ios A B { font-weight: normal; }
.cta A SMALL, .cta_ios A SMALL { padding-left: 1px; color: #888; font-size: 14px; font-weight: bold; }

.cta_ios { background: url("//static.dendrocom.com/2014/cta-appstore.png") no-repeat 2px 2px #FFF; background-size: 46px 46px; }

#TEXT_CONTAINER { background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 3px 12px rgba(0, 0, 0, 0.5); background: white; box-shadow: none; padding: 45px 0 20px 0; margin-top: 30px; }

#TEXT { width: 600px; color: black; font-size: 20px; text-align: left; }
#TEXT H3 { margin: 0 0 15px 0; padding: 0; font-size: 28px; font-weight: normal; font-style: normal; }
#TEXT P { margin: 0 0 15px 0; padding: 0; }
#TEXT A { color: black; text-decoration: underline; text-decoration-color: #FF00FF; -moz-text-decoration-color: #FF00FF; -webkit-text-decoration-color: #FF00FF; }

#FOOTERMENU { padding: 30px 0 10px 0; }
#FOOTERMENU IMG { vertical-align: baseline; position: relative; top: 4px; }
#FOOTERMENU A { padding: 0 8px; color: white; font-size: 16px; font-weight: normal; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; }
#FOOTERMENU #footermenucontact { font-weight: bold; }
#FOOTERMENU A:hover { text-decoration: underline; }

#BODYHOME #FOOTERMENU { padding-bottom: 0; }

#footerdendrocom { padding: 30px 0 20px 0; text-align: center; }

/*******************************************************************************************************************************/
/*** FULL-PAGE OVERLAY *********************************************************************************************************/
/*******************************************************************************************************************************/
#OVERLAY { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; overflow: hidden; background: black; background: rgba(0, 0, 0, 0.6); }
#OVERLAY TABLE { width: 100%; height: 100%; }
#OVERLAY DIV { margin: 0; padding: 15px 15px 10px 15px; max-width: 560px; color: #000; background: #FFF; box-shadow: 0 5px 18px rgba(0, 0, 0, 0.4); border-radius: 12px; font-size: 16px; font-weight: normal; }
#OVERLAY DIV P { padding: 0 0 5px 0; margin: 0; text-align: left; }
#OVERLAY DIV A { color: #000; text-decoration: underline; }

.YELLOWOVERLAY DIV { background: #FF9; }