/* Colors */
/* Fonts */
.absolute-fill-parent {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%; }

.full-height, .tile .tile-content, .tile .tile-content > .background {
  height: 100%; }

.half-height {
  height: 50%; }

.full-width {
  width: 100%; }

.background-cover, .tile .tile-content > .background, .background-contain {
  background-repeat: no-repeat;
  background-position: center; }

.background-cover, .tile .tile-content > .background {
  background-size: cover; }

.background-contain {
  background-size: contain; }

body {
  display: none; }

#page-loader {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  background-color: #111;
  z-index: 1000; }

#main-content,
#grid-wrapper,
.portlet-column,
.portlet-dropzone,
.portlet-boundary,
.portlet,
.portlet-content,
.portlet-content-container,
.portlet-body,
.journal-content-article {
  height: 100%; }

#wrapper {
  background-color: #111; }

.has-control-menu #wrapper {
  max-height: calc(100% - 65px); }

#mobile-navigation {
  opacity: 0; }

#content-footer-wrapper {
  height: calc(100% - 60px); }

#content {
  height: calc(100% - 40px);
  min-height: 500px; }

.portlet > .portlet-content-editable {
  border-width: 0; }
  .portlet > .portlet-content-editable:hover {
    border-width: 1px; }

#left .tile-content {
  overflow: hidden; }

#right, #right [class*=col-] {
  padding: 0; }

#left,
#right,
.hero-background,
.hero-main,
.hero-detail {
  height: 100%;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s; }
  .no-transition #left, .no-transition
  #right, .no-transition
  .hero-background, .no-transition
  .hero-main, .no-transition
  .hero-detail {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    transition: none !important; }

.hero-background {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.48s;
  -moz-transition: all 0.48s;
  transition: all 0.48s; }

.hero-main, .hero-detail {
  float: left; }

.hero-main {
  width: 100%;
  position: relative; }

.hero-detail {
  position: absolute;
  top: 0;
  right: -50%;
  width: 50%; }

body.hero-detail-open .hero-background {
  width: 150%;
  -webkit-transition: all 0.33333s;
  -moz-transition: all 0.33333s;
  transition: all 0.33333s; }

body.hero-detail-open #left .tile-content {
  overflow: visible;
  overflow: initial; }

body.hero-detail-open #right {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%); }

body.fast .hero-background {
  -webkit-transition: all 0s 0.4s;
  -moz-transition: all 0s 0.4s;
  transition: all 0s 0.4s; }
  .hero-detail-open body.fast .hero-background {
    -webkit-transition: none;
    -moz-transition: none;
    transition: none; }

#cwrap {
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s; }

#cwrap.choose {
  -webkit-transform: translate(-200%, 0);
  -moz-transform: translate(-200%, 0);
  -ms-transform: translate(-200%, 0);
  -o-transform: translate(-200%, 0);
  transform: translate(-200%, 0); }

#cwrap #country-hidden {
  width: 200%;
  height: 200%;
  position: absolute;
  left: 100%;
  top: 0; }

.feature-tile-title {
  position: absolute;
  width: 100%;
  text-align: right;
  color: #fff;
  font-size: 24px;
  font-weight: 400;
  padding-bottom: 50px;
  padding-right: 20px;
  padding-top: 20px;
  line-height: 120%; }
  .feature-tile-title.gradient {
    background-color: transparent;
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.7), transparent);
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), transparent); }

.tile .cursor-pointer {
  cursor: pointer; }

.tile .tile-content {
  position: relative;
  overflow: hidden; }
  .tile .tile-content > .background {
    position: absolute;
    width: 100%; }

.tile .border-top-red {
  border: solid;
  border-color: #96182d;
  border-width: 6px 0 0 0; }

.tile .border-top-lightblue {
  border: solid;
  border-color: #3FA9F5;
  border-width: 6px 0 0 0; }

.cemex-wrapper #header {
  top: -65px; }

@media (max-width: 1599px) {
  #left {
    width: 66.66667%; }
  #right {
    width: 33.33333%; } }

@media (max-width: 1199px) {
  #left, #right {
    width: 50%; }
  body.hero-detail-open .hero-background {
    width: 200%; }
  .hero-detail {
    right: -100%;
    width: 100%; } }

@media (max-width: 1023px) {
  #content {
    height: auto; }
  #left, #right {
    float: none;
    width: 100%; }
  #left {
    height: auto; }
  #right {
    height: 780px;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none; }
  .hero-background {
    height: 500px; }
  .hero-main, .hero-detail {
    float: none; }
  .hero-detail {
    position: absolute;
    top: auto;
    top: initial;
    right: auto;
    right: initial;
    height: 250px;
    width: 100%; }
  .hero-main {
    height: 500px; }
  body.hero-detail-open .hero-background {
    width: 100%;
    height: 550px; }
  body.hero-detail-open .hero-main {
    height: 300px; }
  body.hero-detail-open #right {
    margin-top: 250px;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none; } }

@media (max-width: 767px) {
  .hero-background {
    height: 300px; }
  .hero-main {
    height: 300px; }
  body.hero-detail-open .hero-background {
    height: 500px; }
  body.hero-detail-open .hero-main {
    height: 250px; }
  body.hero-detail-open #right {
    margin-top: 250px; }
  .feature-tile-title {
    font-size: 22px; } }