.icon {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/** HOME
---------------------------------------- **/
.home h2 {
  font-size: 54px;
  font-size: 5.4rem;
}
.home .main_container {
  text-align: center;
}
.masthead {
  font-size: 30px;
  font-size: 3rem;
  color: #333333;
  line-height: 1.2;
  padding-top: 1em;
}
.home {
  font-size: 20px;
  font-size: 2rem;
}
.home .masthead {
  background: #3dbfd9;
  padding-bottom: 0;
  position: relative;
  border-bottom: 1px solid #dcdcd9;
  overflow: hidden;
}
.home .masthead h1,
.home .masthead p {
  color: #ffffff;
}
.home .masthead .split_btn {
  margin-top: 6.5em;
  position: relative;
  z-index: 10;
}
.home .masthead .hero {
  left: 50%;
  z-index: 1;
  margin-left: -370px;
}
/** HOME SCREEN ANIMATIONS
---------------------------------------- **/
.interactive_screens {
  width: 100%;
  max-width: 981px;
  position: relative;
}
.interactive_screens .placeholder {
  width: 100%;
}
@keyframes screen_set_slide {
  0% {
    top: 650px;
  }
  100% {
    top: 0;
  }
}
@-webkit-keyframes screen_set_slide {
  0% {
    top: 650px;
  }
  100% {
    top: 0;
  }
}
@keyframes screen_set_slide_out {
  0% {
    top: 0;
  }
  100% {
    top: 650px;
  }
}
@-webkit-keyframes screen_set_slide_out {
  0% {
    top: 0;
  }
  100% {
    top: 650px;
  }
}
@keyframes screen_set_fade {
  0% {
    top: 0;
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    top: 0;
    filter: alpha(opacity=100);
    opacity: 1;
  }
}
.top_screen {
  z-index: 101 !important;
}
.bottom_screen {
  z-index: 98 !important;
}
.screen_set {
  position: absolute;
  top: 650px;
  left: 0px;
  width: 100%;
  height: 100%;
  -webkit-animation: screen_set_slide_out 0.5s ease-in forwards;
}
.screen_set.active {
  z-index: 203;
  top: 0;
  display: block;
  -webkit-animation: screen_set_slide 0.5s ease-out forwards;
}
.screen_set.active .top_screen {
  z-index: 201 !important;
}
.screen_set.active .bottom_screen {
  z-index: 198 !important;
}
.screen_set.active .point {
  z-index: 199;
}
.screen_set.active .point.persist {
  z-index: 202;
}
.screen_set.transout {
  display: block;
}
.screen {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
  xbackground: url(../images/home/topbar.png) no-repeat;
  background-size: 100%;
}
.screen img {
  display: block;
}
@keyframes dim {
  0% {
    filter: alpha(opacity=0);
    opacity: 0;
    z-index: 204;
  }
  100% {
    filter: alpha(opacity=30);
    opacity: 0.3;
    z-index: 204;
  }
}
@-webkit-keyframes dim {
  0% {
    filter: alpha(opacity=0);
    opacity: 0;
    z-index: 204;
  }
  100% {
    filter: alpha(opacity=30);
    opacity: 0.3;
    z-index: 204;
  }
}
@keyframes dim_out {
  0% {
    filter: alpha(opacity=30);
    opacity: 0.3;
    z-index: 204;
  }
  100% {
    filter: alpha(opacity=0);
    opacity: 0;
    z-index: 204;
  }
}
@-webkit-keyframes dim_out {
  0% {
    filter: alpha(opacity=30);
    opacity: 0.3;
    z-index: 204;
  }
  100% {
    filter: alpha(opacity=0);
    opacity: 0;
    z-index: 204;
  }
}
.dim {
  width: 100%;
  height: 100%;
  position: absolute;
  background: black;
  filter: alpha(opacity=0);
  opacity: 0;
  left: 0;
  top: 0;
  display: none;
}
.dim.active {
  filter: alpha(opacity=30);
  opacity: 0.3;
  display: block;
  z-index: 204;
  -webkit-animation: dim 0.5s ease-in-out forwards;
}
@keyframes ping {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    filter: alpha(opacity=50);
    opacity: 0.5;
  }
  50% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    filter: alpha(opacity=0);
    opacity: 0;
  }
}
@-webkit-keyframes ping {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    filter: alpha(opacity=50);
    opacity: 0.5;
  }
  50% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    filter: alpha(opacity=0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
    filter: alpha(opacity=0);
    opacity: 0;
  }
}
.point {
  display: none;
  z-index: 99;
  background: rgba(255, 0, 0, 0.5);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  border: 2px solid rgba(255, 0, 0, 0.5);
  width: 16px;
  height: 16px;
  position: absolute;
  cursor: pointer;
}
.point:after {
  content: '';
  width: 16px;
  height: 16px;
  display: block;
  border: 2px solid #ff0000;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  top: -4px;
  left: -4px;
  position: absolute;
  filter: alpha(opacity=50);
  opacity: 0.5;
  z-index: 98;
  animation: ping 1.5s ease-out infinite;
  -webkit-animation: ping 1.5s ease-out infinite;
  -webkit-transform: translate3d(0, 0, 0);
}
.point.alt:after {
  animation: ping 1.5s 0.75s ease-out infinite;
  -webkit-animation: ping 1.5s 0.75s ease-out infinite;
  -webkit-transform: translate3d(0, 0, 0);
}
.point.persist {
  z-index: 102;
}
.point.visited {
  background: rgba(61, 191, 217, 0.5);
  border: 2px solid rgba(61, 191, 217, 0.5);
}
.point.visited:after {
  border: 2px solid #3dbfd9;
  animation: none !important;
  -webkit-animation: none !important;
}
@media only screen and (max-width: 970px) {
  .point {
    width: 12px;
    height: 12px;
  }
  .point:after {
    width: 12px;
    height: 12px;
  }
}
@media only screen and (max-width: 550px) {
  .point {
    width: 6px;
    height: 6px;
  }
  .point:after {
    width: 6px;
    height: 6px;
  }
}
#point_menu_dashboard {
  left: 13.007284079084286%;
  top: 11.895161290322582%;
}
#point_menu_pages {
  left: 13.007284079084286%;
  top: 15.32258064516129%;
}
#point_menu_blocks {
  left: 13.007284079084286%;
  top: 18.548387096774192%;
}
#point_menu_navigation {
  left: 13.007284079084286%;
  top: 21.774193548387096%;
}
#point_menu_assets {
  left: 13.007284079084286%;
  top: 25%;
}
#point_menu_site_variables {
  left: 13.007284079084286%;
  top: 28.225806451612907%;
}
#point_menu_simple_modules {
  left: 9.365244536940686%;
  top: 37.903225806451616%;
}
#point_menu_expand {
  left: 9.365244536940686%;
  top: 64.51612903225806%;
}
#point_menu_users {
  left: 9.365244536940686%;
  top: 84.87903225806451%;
}
#point_dashboard {
  left: 56.19146722164412%;
  top: 32.45967741935484%;
}
#point_search {
  left: 72.21644120707596%;
  top: 10.28225806451613%;
}
#point_pages_tree {
  left: 24.453694068678463%;
  top: 10.28225806451613%;
}
#point_pages_edit1 {
  left: 26.014568158168572%;
  top: 27.21774193548387%;
}
#point_view_page {
  left: 89.69823100936524%;
  top: 27.21774193548387%;
}
#point_pages_list {
  left: 19.458896982310094%;
  top: 10.28225806451613%;
}
#point_pages_edit2 {
  left: 23.93340270551509%;
  top: 24.798387096774192%;
}
#point_restore {
  left: 78.5639958376691%;
  top: 21.16935483870968%;
}
#point_fastnav {
  left: 78.04370447450573%;
  top: 10.28225806451613%;
}
#point_upload {
  left: 57.12799167533819%;
  top: 10.28225806451613%;
}
#point_replace {
  left: 50.98855359001041%;
  top: 10.28225806451613%;
}
#point_pages_breadcrumb {
  left: 20.81165452653486%;
  top: 4.032258064516129%;
}
#point_language {
  left: 32.3621227887617%;
  top: 44.153225806451616%;
}
#point_forms {
  left: 46.82622268470343%;
  top: 75.40322580645162%;
}
#point_navigation_tree {
  left: 24.453694068678463%;
  top: 10.28225806451613%;
}
#point_navigation_files {
  left: 32.25806451612903%;
  top: 10.28225806451613%;
}
#point_precedence1 {
  left: 50.98855359001041%;
  top: 10.28225806451613%;
}
#point_navigation_list {
  left: 19.458896982310094%;
  top: 10.28225806451613%;
}
#point_navigation_tree2 {
  left: 24.453694068678463%;
  top: 10.28225806451613%;
}
#point_precedence2 {
  left: 50.98855359001041%;
  top: 10.28225806451613%;
}
#point_image_upload1 {
  left: 27.57544224765869%;
  top: 10.483870967741936%;
}
#point_assets_list1 {
  left: 20.81165452653486%;
  top: 4.032258064516129%;
}
#point_image_tab1 {
  left: 21.956295525494276%;
  top: 23.991935483870968%;
}
#point_assets_list2 {
  left: 20.81165452653486%;
  top: 4.032258064516129%;
}
#point_image_tab2 {
  left: 29.240374609781476%;
  top: 23.991935483870968%;
}
#point_edit_users {
  left: 84.28720083246618%;
  top: 27.21774193548387%;
}
#point_login_as {
  left: 94.69302809573361%;
  top: 27.21774193548387%;
}
#point_users_breadcrumb {
  left: 19.77107180020812%;
  top: 4.032258064516129%;
}
#point_user_permissions {
  left: 24.661810613943807%;
  top: 78.42741935483872%;
}
#point_back_to_cms {
  left: 90.53069719042664%;
  top: 0.8064516129032258%;
}
#point_inline_edit_layouts {
  left: 77.00312174817898%;
  top: 0.8064516129032258%;
}
#point_inline_tools {
  left: 60.3537981269511%;
  top: 0.8064516129032258%;
}
#point_inline_edit_toggle2 {
  left: 32.154006243496355%;
  top: 41.33064516129033%;
}
#point_inline_edit_toggle1 {
  left: 32.154006243496355%;
  top: 41.33064516129033%;
}
.screen_callout {
  position: absolute;
  z-index: 204;
  padding: 1em;
  width: 40%;
  max-width: 400px;
  min-height: 180px;
  display: none;
  margin-top: -82px;
  margin-left: 86px;
  line-height: 1.4;
  text-align: left;
  background: #212326;
  /*overflow: hidden;*/
  font-size: 16px;
  font-size: 1.6rem;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
.screen_callout:before {
  content: '';
  position: absolute;
  left: -70px;
  top: 0;
  background: url(../images/home/callout_arrow.png) no-repeat;
  width: 70px;
  height: 180px;
  display: block;
}
.screen_callout.right {
  margin-left: -470px;
}
.screen_callout.right:before {
  right: -70px;
  left: auto;
  top: 0;
  background-position: top right;
}
.screen_callout h4 {
  color: #ffffff;
  margin-top: 0;
  padding: 0;
}
.screen_callout .close {
  position: absolute;
  right: 10px;
  top: 10px;
}
@-webkit-keyframes zoom {
  0% {
    width: 0;
    height: 0;
    display: block;
  }
  70% {
    width: 370px;
    height: 370px;
    left: -350px;
    top: -100px;
    filter: alpha(opacity=100);
    opacity: 1;
  }
  100% {
    width: 360px;
    height: 360px;
    left: -345px;
    top: -95px;
    filter: alpha(opacity=100);
    opacity: 1;
  }
}
@keyframes zoom {
  0% {
    width: 0;
    height: 0;
    display: block;
  }
  70% {
    width: 370px;
    height: 370px;
    left: -350px;
    top: -100px;
    filter: alpha(opacity=100);
    opacity: 1;
  }
  100% {
    width: 360px;
    height: 360px;
    left: -345px;
    top: -95px;
    filter: alpha(opacity=100);
    opacity: 1;
  }
}
@keyframes zoom_out {
  0% {
    width: 360px;
    height: 360px;
    left: -345px;
    top: -95px;
    filter: alpha(opacity=100);
    opacity: 1;
    background-color: #ffffff;
  }
  5% {
    width: 370px;
    height: 370px;
    left: -350px;
    top: -100px;
    filter: alpha(opacity=100);
    opacity: 1;
    background-image: none;
  }
  90% {
    left: -90px;
    top: 40px;
    filter: alpha(opacity=0);
    opacity: 0;
    background-image: none;
    background-color: #ffffff;
  }
  100% {
    left: -90px;
    top: 40px;
    width: 0;
    height: 0;
    filter: alpha(opacity=0);
    opacity: 0;
    background-image: none;
    background-color: #ffffff;
  }
}
@-webkit-keyframes zoom_out {
  0% {
    width: 360px;
    height: 360px;
    left: -345px;
    top: -95px;
    filter: alpha(opacity=100);
    opacity: 1;
    background-color: #ffffff;
  }
  5% {
    width: 370px;
    height: 370px;
    left: -350px;
    top: -100px;
    filter: alpha(opacity=100);
    opacity: 1;
    background-image: none;
  }
  90% {
    left: -90px;
    top: 40px;
    filter: alpha(opacity=0);
    opacity: 0;
    background-image: none;
    background-color: #ffffff;
  }
  100% {
    left: -90px;
    top: 40px;
    width: 0;
    height: 0;
    filter: alpha(opacity=0);
    opacity: 0;
    background-image: none;
    background-color: #ffffff;
  }
}
.screen_callout.zoom {
  padding-left: 40px;
}
.screen_callout.zoom:after {
  content: '';
  filter: alpha(opacity=0);
  opacity: 0;
  z-index: 10;
  position: absolute;
  background-color: #3dbfd9;
  background-image: none;
  background-repeat: no-repeat;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  display: block;
  top: 0;
  left: 0;
  border: 5px solid #1d1d1d;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.screen_callout.active .point {
  display: none;
}
.screen_callout.active.zoom:after {
  animation: zoom 0.5s ease-in-out 1 forwards;
  -webkit-animation: zoom 0.5s ease-in-out 1 forwards;
  -webkit-transform: translate3d(0, 0, 0);
}
.screen_callout.transout {
  display: block;
}
.screen_callout.transout.zoom:after {
  animation: zoom_out 0.2s 0.08s ease-in-out 1 both !important;
  -webkit-animation: zoom_out 0.2s 0.08s ease-in-out 1 both !important;
  -webkit-transform: translate3d(0, 0, 0);
}
@media only screen and (max-width: 770px) {
  .dim {
    display: none !important;
  }
  .screen_callout {
    width: 300px;
    height: 180px;
    margin-left: 80px;
  }
  .screen_callout.zoom {
    padding-left: 1em;
  }
  .screen_callout.zoom:after {
    display: none !important;
  }
  .screen_callout.right {
    margin-left: -370px;
  }
  .flushright {
    left: auto !important;
    right: 0 !important;
  }
}
@media only screen and (max-width: 550px) {
  .dim {
    display: none !important;
  }
  .screen_callout {
    width: 220px;
    height: 180px;
    margin-left: 80px;
  }
  .screen_callout.zoom {
    padding-left: 1em;
  }
  .screen_callout.zoom:after {
    display: none !important;
  }
  .screen_callout.right {
    margin-left: -290px;
  }
  .flushright {
    left: auto !important;
    right: 0 !important;
  }
}
@keyframes dashboard {
  0% {
    background-position: 0px 0px;
  }
  10% {
    background-position: 0px 0px;
  }
  40% {
    background-position: -300px 0px;
  }
  70% {
    background-position: -470px -290px;
  }
  100% {
    background-position: 0px -290px;
  }
}
@-webkit-keyframes dashboard {
  0% {
    background-position: 0px 0px;
  }
  10% {
    background-position: 0px 0px;
  }
  40% {
    background-position: -300px 0px;
  }
  70% {
    background-position: -470px -290px;
  }
  100% {
    background-position: 0px -290px;
  }
}
#callout1.zoom:after {
  animation: zoom 0.5s ease-in-out forwards, dashboard 5s 0.1s ease-in-out forwards;
  -webkit-animation: zoom 0.5s ease-in-out forwards, dashboard 5s 0.1s ease-in-out forwards;
}
#callout1:after {
  background-image: url(../images/home/screen_dashboard_callout.png);
}
@keyframes navfile {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: -500px -100px;
  }
}
@-webkit-keyframes navfile {
  0% {
    background-position: 0px 0px;
  }
  100% {
    background-position: -500px -100px;
  }
}
#callout10.zoom:after {
  animation: zoom 0.5s ease-in-out forwards, navfile 6s 0.1s ease-in-out forwards;
  -webkit-animation: zoom 0.5s ease-in-out forwards, navfile 6s 0.1s ease-in-out forwards;
}
#callout10:after {
  background-image: url(../images/home/screen_navigation_file.png);
}
@keyframes advmodules {
  0% {
    background-position: 50px -180px;
  }
  100% {
    background-position: 50px -260px;
  }
}
@-webkit-keyframes advmodules {
  0% {
    background-position: 80px -180px;
  }
  100% {
    background-position: 80px -230px;
  }
}
#callout13.zoom:after {
  animation: zoom 0.5s ease-in-out forwards, advmodules 3s 0.1s ease-in-out forwards;
  -webkit-animation: zoom 0.5s ease-in-out forwards, advmodules 3s 0.1s ease-in-out forwards;
}
#callout13:after {
  background-image: url(../images/home/screen_fuel_bg.png);
}
@keyframes moduletools {
  0% {
    background-position: 50px -180px;
  }
  100% {
    background-position: 50px -760px;
  }
}
@-webkit-keyframes moduletools {
  0% {
    background-position: -50px 0px;
  }
  100% {
    background-position: -150px -200px;
  }
}
#callout21.zoom:after {
  animation: zoom 0.5s ease-in-out forwards, moduletools 5s 0.1s ease-in-out forwards;
  -webkit-animation: zoom 0.5s ease-in-out forwards, moduletools 5s 0.1s ease-in-out forwards;
}
#callout21:after {
  background-image: url(../images/home/screen_inline_tools.jpg);
}
#screen21 img {
  left: 33.92299687825182%;
  top: 44.75806451612903%;
  width: 60%;
  position: absolute;
}
#screen7.top_screen:before {
  content: '';
  background: url(../images/home/screen_navigation_trans.png) no-repeat 0 -39px;
  background-size: 100%;
  height: 39px;
  width: 809px;
  position: absolute;
  left: 168px;
  top: 212px;
  z-index: 104;
  animation: precedence 0.3s 1s ease-in-out backwards;
  -webkit-animation: precedence 0.3s 1s ease-in-out backwards;
}
#screen7.top_screen:after {
  content: '';
  background: url(../images/home/cursor_move.png) no-repeat;
  height: 16px;
  width: 16px;
  position: absolute;
  left: 300px;
  top: 234px;
  z-index: 105;
  animation: precedence_move 1.3s ease-in-out forwards;
  -webkit-animation: precedence_move 1.3s ease-in-out forwards;
}
@keyframes precedence {
  0% {
    background-position: 0 0;
    filter: alpha(opacity=0);
    opacity: 0;
  }
  1% {
    background-position: 0 0;
    filter: alpha(opacity=100);
    opacity: 1;
  }
  99% {
    background-position: 0 0;
    filter: alpha(opacity=100);
    opacity: 1;
  }
  100 {
    background-position: 0 -39px;
    filter: alpha(opacity=100);
    opacity: 1;
  }
}
@-webkit-keyframes precedence {
  0% {
    background-position: 0 0;
    filter: alpha(opacity=0);
    opacity: 0;
  }
  1% {
    background-position: 0 0;
    filter: alpha(opacity=100);
    opacity: 1;
  }
  99% {
    background-position: 0 0;
    filter: alpha(opacity=100);
    opacity: 1;
  }
  100 {
    background-position: 0 -39px;
    filter: alpha(opacity=100);
    opacity: 1;
  }
}
@keyframes precedence_move {
  0% {
    left: 300px;
    top: 110px;
  }
  80% {
    left: 300px;
    top: 214px;
  }
  100 {
    left: 300px;
    top: 234px;
  }
}
@-webkit-keyframes precedence_move {
  0% {
    left: 300px;
    top: 110px;
  }
  80% {
    left: 300px;
    top: 214px;
  }
  100 {
    left: 300px;
    top: 234px;
  }
}