/*!
 custom CSS for Zextras
 */

 html, body {width: auto!important; overflow-x: hidden!important}

.joinus {
  height: 2000px;
}
.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: 5px solid #182126; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: 0em; /* Adjust as needed */
  -webkit-animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
          animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}

/* The typing effect */
@-webkit-keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@-webkit-keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #00506d }
}
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #00506d }
}
.mb1 {
  margin-bottom: -30px;
}
.card {
  background-color: transparent !important;
  -webkit-transition: .25s;
  transition: .25s;
  border: 1px solid #fff;
  border-radius: 10px;
}
.card:hover {
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
  -webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.345);
          box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.345);
  border: 1px solid rgba(0, 0, 0, 0.345);
}
.card-footer-sol {
  background-color: #fff;
  color: #fff;
  text-align: center;
}

.hovertext:before {
  content: attr(data-hover);
  visibility: hidden;
  font-weight: normal;
  opacity: 0;
  width: 190px;
  background-color: var(--Abyss);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 3px 0;
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;

  position: absolute;
  z-index: 1;
  left: 0;
  
}

.hovertext:hover:before {
  opacity: 1;
  visibility: visible;
}
@media only screen and (max-width: 767px) {
.hovertext:before {
  width: 300px;
  height:190px;
  }  
}

.thankyou_ce {
  height: 1080px;
  background-image: url("/images/thankyou_carbonioce.png");
}

:root {
  /*--improved-color: #00506d;*/
  --noir: #000;
  --new-color: #6aa700;
  --refactoring-color: #ffa700;
  --gold_1: #daa520;
  --gold_2: #b8860b;
  --platinum_1: #dcdcdc;
  --platinum_2: #a8a7ae;
  --Abyss: #00506d;
  --Magma: #e51a1a;
  --Carbon: #182126;
  --Flame: #fd830b;
  --Spark: #f4c64c;
  --Ice: #cbdde4;
  --Pebble: #e5e5e5;
  --Snow: #fff;
  --bg_homepage_800x1200: url("/images/homepage_zextras_800x1200.webp");
  --bg_homepage_1920x1080: url("/images/homepage_zextras_1920x1080.webp");
  --bg_carbonio_800x1200: url("/images/zextras_carbonio_hero_800x1200.webp");
  --bg_carbonio_1920x1080: url("/images/zextras_carbonio_hero_1920x1080.webp");
  --bg_carbonio_community_800x1200: url("/images/carbonio_community_800x1200.webp");
  --bg_carbonio_community_1920x1080: url("/images/carbonio_community_1920x1080.webp");
  --bg_suite_800x1200: url("/images/hero_pic_runners_800x1200.webp");
  --bg_suite_1920x1080: url("/images/hero_pic_runners_1920x1080.webp");
  --bg_about_us_800x1200: url("/images/hero_about_us_800x1200.webp");
  --bg_about_us_1920x1080: url("/images/hero_about_us_1920x1080.webp");
  --bg_join_us_1920x1080: url("/images/hero_join_us_1920x1080.webp");
  --bg_contact_us_800x1200: url("/images/zextras_contact_us_800x1200.webp");
  --bg_contact_us_1920x1080: url("/images/zextras_contact_us_1920x1080.webp");
  --bg_environment_800x1200: url("/images/environment_800x1200.webp");
  --bg_environment_1920x1080: url("/images/environment_1920x1080.webp");
  --bg_open-source_800x1200: url("/images/hero_open_source_800x1200.webp");
  --bg_open-source_1920x1080: url("/images/hero_open_source_1920x1080.webp");
  --bg_open-chat_1920x1080: url("/images/open-chat_1920x1080.webp");
  --bg_open-chat_800x1200: url("/images/open-chat_800x1200.webp");
  --bg_zextras_theme_1920x1080: url("/images/support.png");
  --bg_zextras_theme_800x1200: url("/images/support_800x1200.png");
  --bg_zextras_ce_800x1200: url("/images/carbonio_ce_800x1200.webp");
  --bg_zextras_ce_1920x1080: url("/images/carbonio_ce_1920x1080.webp");
  --bg_become_a_partner: url("/images/hero_become_a_partner.png");
  --bg_become_a_partner: url("/images/hero_become_a_partner.webp");
  --bg_find_a_partner: url("/images/hero_find_a_partner.png");
  --bg_find_a_partner: url("/images/hero_find_a_partner.webp");
}
.display-6 {
  font-size: 1.5em;
}
.fly {
  -webkit-filter: opacity(90%);
          filter: opacity(90%);
  -webkit-transform: translateX(-70px) translateY(30px);
          transform: translateX(-70px) translateY(30px);
  -webkit-animation: bigger 1s ease forwards;
          animation: bigger 1s ease forwards;
}
@-webkit-keyframes bigger{
  from {-webkit-transform: scale(1);transform: scale(1);}
  to {-webkit-transform: scale(1.5);transform: scale(1.5);}
}
@keyframes bigger{
  from {-webkit-transform: scale(1);transform: scale(1);}
  to {-webkit-transform: scale(1.5);transform: scale(1.5);}
}
@media (max-width: 1023px) {
  .fly{
    display:none;
  }
}
.loader {
  position: relative;
  width: clamp(300px, 50vw, 1700px);
  height: 5px;
  background: #e9ecef;
  border-radius: 50px;
}

.loader::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #00506d;
  border-radius: 100px;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-animation: animate 15s linear infinite;
          animation: animate 15s linear infinite;
}

@-webkit-keyframes animate {
  0%,
  20% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  60% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: left;
            transform-origin: left;
  }
  65% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: right;
            transform-origin: right;
  }
  80%,
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: left;
            transform-origin: left;
  }
}

@keyframes animate {
  0%,
  20% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  60% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: left;
            transform-origin: left;
  }
  65% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
    -webkit-transform-origin: right;
            transform-origin: right;
  }
  80%,
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
    -webkit-transform-origin: left;
            transform-origin: left;
  }
}

.sphere-active {
  position: fixed;
  bottom: 0;
  right: -250px;
  width: 300px;
}
.timeline {
  background: #aad5e2;
  width: clamp(300px, 50vw, 1700px);
  height: 2px;
  position: relative;
}
.timeline.t-2 {
  background: #00506d;
  width: clamp(300px, 50vw, 1700px);
  position: absolute;
  left: 0;
}
.timeline.t-2 .timeline-point {
  background: #00506d;
}
.timeline-point {
  background: #aad5e2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: flex;
  position: absolute;
  z-index: 50;
}
.timeline-point:nth-child(1) {
  margin-left: -10px;
  margin-top: -4px;
}
.timeline-point:nth-child(2) {
 left: 50%;
 margin-left: -10px;
 margin-top: -4px;
}
.timeline-point:nth-child(3) {
  left: 100%;
  margin-left: -10px;
  margin-top: -4px;
}
.new {
  background: rgb(229,26,26);
  background: -webkit-gradient(linear, left top, right top, from(rgba(229,26,26,1)), color-stop(26%, rgba(230,32,25,1)), color-stop(64%, rgba(253,131,11,1)), to(rgba(253,131,11,1)));
  background: linear-gradient(90deg, rgba(229,26,26,1) 0%, rgba(230,32,25,1) 26%, rgba(253,131,11,1) 64%, rgba(253,131,11,1) 100%); 
  height: 4px;
  width: 15%;
  margin-left: 0;
}
.new2 {
  background: var(--Magma);
  height: 4px;
  width: 15%;
  margin-left: 0;
}
.new_blue{
  background: rgb(0,80,109);
  background: -webkit-gradient(linear, left top, right top, from(rgba(0,80,109,1)), color-stop(37%, rgba(0,80,109,1)), color-stop(78%, rgba(108,154,171,1)), to(rgba(255,255,255,1)));
  background: linear-gradient(90deg, rgba(0,80,109,1) 0%, rgba(0,80,109,1) 37%, rgba(108,154,171,1) 78%, rgba(255,255,255,1) 100%); 
  height: 4px;
  width: 15%;
  margin-left: 0; 
}
.new_white{
  background: rgb(255, 255, 255);
  height: 4px;
  width: 15%;
  margin-left: 0; 
}
.banner_carbonio {
  background-image: url("/images/banner_carbonio.png");
  background-repeat: no-repeat;
  height: 870px;
}
.red_zextras {
  color: var(--Magma);
}
.carbon-text {
  color: var(--Carbon);
}
.carbon {
  background-color: var(--Carbon);
  height: 950px;
}
.apply_carbon {
  background-color: var(--Carbon);
  
}
.social_carbon {
  background-color: var(--Carbon);
}

.flag-icon::before {
  margin-left: 40px;
}

li.check {
  list-style: none;
}

body {
  font-family: "Lato", sans-serif;
  font-size: 1rem !important;
}

.arrows {
	width: 60px;
	height: 72px;
	position: absolute;
	left: 50%;
	margin-left: -30px;
	bottom: 20px;
}

.arrows path {
	stroke: #fd830b;
	fill: transparent;
	stroke-width: 1px;	
	animation: arrow 2s infinite;
	-webkit-animation: arrow 2s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
	animation-delay:-1s;
	-webkit-animation-delay:-1s; /* Safari 和 Chrome */
}

.arrows path.a2 {
	animation-delay:-0.5s;
	-webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}

.arrows path.a3 {	
	animation-delay:0s;
	-webkit-animation-delay:0s; /* Safari 和 Chrome */
}

.hr_form {
  background: rgba(255, 255, 255, 0.3);
  padding: 3em;
  height: 600px;
  border-radius: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-box-shadow: 20px 20px 40px -6px rgba(0, 0, 0, 0.2);
          box-shadow: 20px 20px 40px -6px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: relative;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.hr_form p {
  font-weight: 500;
  color: #fff;
  opacity: 0.7;
  font-size: 1.4rem;
  margin-top: 0;
  margin-bottom: 60px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.hr_form a {
  text-decoration: none;
  color: #ddd;
  font-size: 12px;
}
.hr_form a:hover {
  text-shadow: 2px 2px 6px #00000040;
}
.hr_form a:active {
  text-shadow: none;
}
.hr_form input {
  background: transparent;
  width: 330px;
  padding: 1em;
  margin-bottom: 2em;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-box-shadow: 4px 4px 60px rgba(0, 0, 0, 0.2);
          box-shadow: 4px 4px 60px rgba(0, 0, 0, 0.2);
  color: #fff;
  font-weight: 500;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.hr_form input:hover {
  background: rgba(255, 255, 255, 0.1);
  -webkit-box-shadow: 4px 4px 60px 8px rgba(0, 0, 0, 0.2);
          box-shadow: 4px 4px 60px 8px rgba(0, 0, 0, 0.2);
}
.hr_form input[type="email"]:focus,
.hr_form input[type="file"]:focus {
  background: rgba(255, 255, 255, 0.1);
  -webkit-box-shadow: 4px 4px 60px 8px rgba(0, 0, 0, 0.2);
          box-shadow: 4px 4px 60px 8px rgba(0, 0, 0, 0.2);
}
.hr_form input[type="button"] {
  margin-top: 10px;
  width: 150px;
  font-size: 1rem;
}
.hr_form input[type="button"]:hover {
  cursor: pointer;
}
.hr_form input[type="button"]:active {
  background: rgba(255, 255, 255, 0.2);
}
.hr_form:hover {
  margin: 4px;
}

::-moz-placeholder {
  font-weight: 400;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

:-ms-input-placeholder {
  font-weight: 400;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

::-webkit-input-placeholder {
  font-weight: 400;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

::-ms-input-placeholder {
  font-weight: 400;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

::placeholder {
  font-weight: 400;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

.drop {
  background: rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: 10px 10px 60px -8px rgba(0, 0, 0, 0.2);
          box-shadow: 10px 10px 60px -8px rgba(0, 0, 0, 0.2);
  position: absolute;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.drop-1 {
  height: 80px;
  width: 80px;
  top: -20px;
  left: -40px;
  
}
.drop-2 {
  height: 80px;
  width: 80px;
  bottom: -30px;
  right: -10px;
}
.drop-3 {
  height: 100px;
  width: 100px;
  bottom: 120px;
  right: -50px;
  z-index: -1;
}
.drop-4 {
  height: 120px;
  width: 120px;
  top: -60px;
  right: -60px;
}
.drop-5 {
  height: 60px;
  width: 60px;
  bottom: 170px;
  left: 90px;
  z-index: -1;
}

a,
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}
/* start custom btn download Zextras */
.btn-download-zextras {
  color: var(--Snow);
  background-color: var(--Magma);
  border-color: var(--Magma);
  font-weight: 500;
}

.btn-download-zextras:hover {
  color: var(--Abyss);
  background-color: var(--Snow);
  border-color: var(--Snow);
}

.btn-download-zextras:focus,
.btn-download-zextras.focus {
  color: var(--Snow);
  background-color: var(--Abyss);
  border-color: var(--Abyss);
  -webkit-box-shadow: 0 0 0 0.2rem rgba(230, 48, 57, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(230, 48, 57, 0.5);
}

.btn-download-zextras.disabled,
.btn-download-zextras:disabled {
  color: var(--Abyss);
  background-color: var(--Snow);
}

.btn-download-zextras:not(:disabled):not(.disabled):active,
.btn-download-zextras:not(:disabled):not(.disabled).active,
.show > .btn-download-zextras.dropdown-toggle {
  color: var(--Abyss);
  background-color: var(--Snow);
  border-color: var(--Snow);
}

.btn-download-zextras:not(:disabled):not(.disabled):active:focus,
.btn-download-zextras:not(:disabled):not(.disabled).active:focus,
.show > .btn-download-zextras.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(230, 48, 57, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(230, 48, 57, 0.5);
}
/* end custom btn download Zextras */

/* start custom btn contact Zextras */
.btn-contact-zextras {
  color: var(--Magma);
  background-color: var(--Snow);
  border-color: var(--Magma);
  font-weight: 500;
}
.btn-contact-zextras:hover {
  color: var(--Snow);
  background-color: var(--Magma);
  border-color: var(--Magma);
}
.btn-contact-zextras:focus,
.btn-contact-zextras.focus {
  color: var(--Snow);
  background-color: var(--Magma);
  border-color: var(--Magma);
  -webkit-box-shadow: 0 0 0 0.2rem rgba(230, 48, 57, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(230, 48, 57, 0.5);
}
.btn-contact-zextras.disabled,
.btn-contact-zextras:disabled {
  color: var(--Magma);
  background-color: var(--Snow);
  border-color: var(--Magma);
}
.btn-contact-zextras:not(:disabled):not(.disabled):active,
.btn-contact-zextras:not(:disabled):not(.disabled).active,
.show > .btn-contact-zextras.dropdown-toggle {
  color: var(--Magma);
  background-color: var(--Snow);
  border-color: var(--Magma);
}
.btn-contact-zextras:not(:disabled):not(.disabled):active:focus,
.btn-contact-zextras:not(:disabled):not(.disabled).active:focus,
.show > .btn-contact-zextras.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(230, 48, 57, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(230, 48, 57, 0.5);
}
/* end custom btn contact Zextras */

/* start custom btn store Zextras */
.storealign {
  font-size: 1em;
  padding: 0.25rem 1rem;
  margin: 0.25rem 0;
}
.btn-store-zextras {
  color: var(--Snow);
  background-color: var(--Magma);
  border-color: var(--Magma);
  font-weight: 500;
}
.btn-store-zextras:hover {
  color: var(--Magma);
  background-color: var(--Snow);
  border-color: var(--Magma);
}
.btn-store-zextras:focus,
.btn-store-zextras.focus {
  color: var(--Snow);
  background-color: var(--Magma);
  border-color: var(--Magma);
  -webkit-box-shadow: 0 0 0 0.2rem rgba(230, 48, 57, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(230, 48, 57, 0.5);
}
.btn-store-zextras.disabled,
.btn-store-zextras:disabled {
  color: var(--Magma);
  background-color: var(--Snow);
  border-color: var(--Magma);
}
.btn-store-zextras:not(:disabled):not(.disabled):active,
.btn-store-zextras:not(:disabled):not(.disabled).active,
.show > .btn-store-zextras.dropdown-toggle {
  color: var(--Magma);
  background-color: var(--Snow);
  border-color: var(--Magma);
}
.btn-store-zextras:not(:disabled):not(.disabled):active:focus,
.btn-store-zextras:not(:disabled):not(.disabled).active:focus,
.show > .btn-store-zextras.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(230, 48, 57, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(230, 48, 57, 0.5);
}
/* end custom btn store Zextras */

/* start custom btn support Zextras */
.btn-support-zextras,
.btn-support-zextras.disabled,
.btn-support-zextras:disabled,
.btn-support-zextras:not(:disabled):not(.disabled):active,
.btn-support-zextras:not(:disabled):not(.disabled).active,
.show > .btn-support-zextras.dropdown-toggle {
  color: var(--Snow);
  background-color: var(--Magma);
  border-color: var(--Magma);
  font-weight: 500;
}
.btn-support-zextras:hover {
  color: var(--Magma);
  background-color: var(--Snow);
  border-color: var(--Magma);
}
.btn-support-zextras:focus,
.btn-support-zextras.focus {
  color: var(--Magma);
  background-color: var(--Snow);
  border-color: var(--Magma);
}
.btn-support-zextras:not(:disabled):not(.disabled):active:focus,
.btn-support-zextras:not(:disabled):not(.disabled).active:focus,
.show > .btn-support-zextras.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(230, 48, 57, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(230, 48, 57, 0.5);
}
/* end custom btn support Zextras */

/* start custom btn Carbonio */
.btn-carbonio,
.btn-carbonio.disabled,
.btn-carbonio:disabled,
.btn-carbonio:not(:disabled):not(.disabled):active,
.btn-carbonio:not(:disabled):not(.disabled).active,
.show > .btn-carbonio {
  color: var(--Snow);
  background: rgb(229, 26, 26);
  background: -webkit-gradient(
    linear,
    left top, right top,
    from(rgba(229, 26, 26, 1)),
    color-stop(32%, rgba(232, 39, 24, 1)),
    color-stop(87%, rgba(253, 131, 11, 1)),
    to(rgba(253, 131, 11, 1))
  );
  background: linear-gradient(
    90deg,
    rgba(229, 26, 26, 1) 0%,
    rgba(232, 39, 24, 1) 32%,
    rgba(253, 131, 11, 1) 87%,
    rgba(253, 131, 11, 1) 100%
  );
  padding: 15px 32px;
  text-align: center;
  border: 1px;
  font-weight: 600;
  height: 60px;
  width: 350px;
}
.btn-carbonio:hover {
  color: var(--Magma);
  background: var(--Snow);
  border-color: var(--Magma);
}
.btn-carbonio:focus,
.btn-carbonio.focus {
  color: var(--Magma);
  background: var(--Snow);
  border-color: var(--Magma);
}
.btn-carbonio:not(:disabled):not(.disabled):active:focus,
.btn-carbonio:not(:disabled):not(.disabled).active:focus,
.show > .btn-carbonio.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(230, 48, 57, 0.5);
          box-shadow: 0 0 0 0.2rem rgba(230, 48, 57, 0.5);
}
/* end custom btn Carbonio */

/* start custom btn theme Zextras */
.btn-theme-zextras {
  color: var(--Snow);
  background-color: var(--Magma);
  border-color: var(--Magma);
  font-weight: 500;
}
.btn-theme-zextras:hover {
  color: var(--Snow);
  background-color: #5b1418;
  border-color: #5b1418;
}
.btn-theme-zextras:focus,
.btn-theme-zextras.focus {
  color: var(--Snow);
  background-color: #5b1418;
  border-color: #5b1418;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(91, 20, 24);
          box-shadow: 0 0 0 0.2rem rgba(91, 20, 24);
}
.btn-theme-zextras.disabled,
.btn-theme-zextras:disabled {
  color: #5b1418;
  background-color: var(--Magma);
  border-color: var(--Magma);
}
.btn-theme-zextras:not(:disabled):not(.disabled):active,
.btn-theme-zextras:not(:disabled):not(.disabled).active,
.show > .btn-theme-zextras.dropdown-toggle {
  color: #5b1418;
  background-color: var(--Magma);
  border-color: var(--Magma);
}
.btn-theme-zextras:not(:disabled):not(.disabled):active:focus,
.btn-theme-zextras:not(:disabled):not(.disabled).active:focus,
.show > .btn-theme-zextras.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(91, 20, 24);
          box-shadow: 0 0 0 0.2rem rgba(91, 20, 24);
}
/* end custom btn theme Zextras */

.btn-success {
  color: var(--Snow);
  background-color: #7eb51c;
  border-color: #7eb51c;
}

.btn-success.disabled,
.btn-success:disabled {
  color: var(--Snow);
  background-color: #7eb51c;
  border-color: #7eb51c;
}

.nav-fill .nav-item {
  max-width: 158px;
}

.card-body p {
  font-size: 1rem;
}
.card {
      border: 1px solid rgba(255, 255, 255, 0) !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--Abyss);
  margin-bottom: 1rem;
  /*font-weight: 700;*/
  /*text-transform: uppercase;*/
}

/*h2 {
  font-size: 1.5rem;
}*/
.h_carbonio {
  color: var(--Carbon);
}
.h_flame {
  color: var(--Flame);
}
.h_small {
  font-size: 1.1em;
}
.small_abyss {
  color: var(--Abyss);
}
.h_white,
.p_white {
  color: var(--Snow);
}

.version {
  color: var(--Flame);
}
.lower-latin {
  list-style-type: lower-latin;
}

a {
  color: var(--Magma);
  font-weight: 300;
}

a:hover {
  color: var(--Magma);
  text-decoration: underline;
}

a.Snow {
  color: var(--Snow);
  text-decoration: underline;
}

a.Snow:hover {
  color: var(--Snow);
  text-decoration: none;
}

a.thankyou_page {
  color: var(--Abyss);
  text-decoration: underline;
  font-weight: bold;
}

a.thankyou_page:hover {
  color: var(--Abyss);
  text-decoration: none;
}
a.external,
a.black_link {
  color: var(--noir);
  text-decoration: underline;
  text-transform: none;
  font-size: 1rem;
}
a.external:hover,
a.black_link:hover {
  text-decoration: none;
}

a.black_link:hover {
  color: var(--Snow);
}

a.block {
  display: block;
  text-decoration: none;
  font-size: 1.2rem;
  color: var(--noir);
  text-transform: none;
  font-weight: 400;
}

code {
  background: rgba(0, 0, 0, 0.65);
  padding: 0.5rem;
  color: #efefef;
  border: 2px dashed #d22936;
  line-height: 3em;
}
.zimbra_code {
  background: #ccc;
  padding: 4px;
  color: var(--noir);
  border: 2px dashed #d22936;
}

/* start custom navbar Zextras */
.bg-zextras,
.bg_banner_app {
  background-color: var(--Abyss) !important;
}

.bg_form {
  background-color: var(--Snow) !important;
}

a.bg-zextras:hover,
a.bg-zextras:focus,
button.bg-zextras:hover,
button.bg-zextras:focus {
  background-color: #2688c7 !important;
}

.bg-zextras a.nav-link:hover,
.bg-zextras a.nav-link:focus {
  text-decoration: underline;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgb(255, 255, 255);
}
.nav-link-zextras {
  padding-right: 1rem !important;
}
.dropdown-menu {
  border: 0;
  border-radius: 1rem;
}
.overlays-link-zextras {
  background: rgba(255, 255, 255, 0.8);
}
.overlays-link-zextras a {
  color: var(--Abyss);
  padding: 1rem 1.5rem;
}
.overlays-link-zextras a:hover,
.overlays-link-zextras a:focus {
  background: none !important;
  color: var(--Magma);
}
/* end custom navbar Zextras */

/* start custom nav button Zextras */
ul.nav .buttonZextras {
  margin: 1rem 0;
}
/* end custom nav button Zextras */


@media (min-width: 320px) {
  .container-fluid.top.home {
    background-image: var(--bg_homepage_800x1200);
  }
  .display-3 {
    font-size: 4rem;
  }
  .container-fluid.top.carbonio_premium {
    background-image: var(--bg_carbonio_800x1200);
  }
  .container-fluid.top.carbonio_open {
    background-image: var(--bg_carbonio_community_800x1200);
  }
  .container-fluid.top.suite {
    background-image: var(--bg_suite_800x1200);
  }
  .about-us {
    background-image: var(--bg_about_us_800x1200);
  }
  .join-us {
    background-image: var(--bg_join_us_800x1200);
  }
  .container-fluid.top.become_a_partner {
    background-image: var(--bg_become_a_partner);
  }
  .container-fluid.top.find_a_partner {
    background-image: var(--bg_find_a_partner);
  }
  /*.contact-us {
    background-image: var(--bg_contact_us_800x1200);
  }*/
  .container-fluid.top.environment {
    background-image: var(--bg_environment_800x1200);
  }
  .container-fluid.top.open-source {
    background-image: var(--bg_open-source_800x1200);
  }
  .container-fluid.top.open_chat {
    background-image: var(--bg_open-chat_800x1200);
  }
  .container-fluid.top.theme-for-zimbra {
    background-image: var(--bg_zextras_theme_800x1200);
  }
  .container-fluid.ce_mid {
    background-image: var(--bg_zextras_ce_800x1200);
  }
  .btn-carbonio {
    margin-bottom: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .container-fluid.top.home {
    background-image: var(--bg_homepage_1920x1080);
  }
  .container-fluid.top.carbonio_premium {
    background-image: var(--bg_carbonio_1920x1080);
  }
  .container-fluid.top.carbonio_open {
    background-image: var(--bg_carbonio_community_1920x1080);
  }
  .container-fluid.top.suite {
    background-image: var(--bg_suite_1920x1080);
  }
  .about-us {
    background-image: var(--bg_about_us_1920x1080);
  }
  .join-us {
    background-image: var(--bg_join_us_1920x1080);
  }
  .contact-us {
    background-image: var(--bg_contact_us_1920x1080);
  }
  .container-fluid.top.environment {
    background-image: var(--bg_environment_1920x1080);
  }
  .container-fluid.top.open-source {
    background-image: var(--bg_open-source_1920x1080);
  }
  .container-fluid.top.open_chat {
    background-image: var(--bg_open-chat_1920x1080);
  }
  .container-fluid.top.theme-for-zimbra {
    background-image: var(--bg_zextras_theme_1920x1080);
  }
  .container-fluid.ce_mid {
    background-image: var(--bg_zextras_ce_1920x1080);
  }
}

.container-fluid.top.home,
.container-fluid.top.carbonio_premium,
.container-fluid.top.carbonio_open,
.container-fluid.top.suite,
.container-fluid.top.environment,
.container-fluid.top.support,
.container-fluid.top.theme-for-zimbra,
.container-fluid.top.open_chat,
.ce_mid,
.banner_carbonio,
.ce_mid_contribute,
.about-us,
.join-us,
.contact-us,
.work-with-us,
.container-fluid.top.open-source,
.container-fluid.top.become_a_partner,
.container-fluid.top.find_a_partner {
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  /*height: auto;*/
  background-size: cover;
}

.container-fluid.top.carbonio_premium,
.container-fluid.top.carbonio_open,
.container-fluid.top.home,
.container-fluid.top.suite,
.container-fluid.top.environment,
.container-fluid.top.support,
.container-fluid.top.open-source,
.container-fluid.top.open_chat,
.container-fluid.top.theme-for-zimbra,
.container-fluid.top.become_a_partner,
.container-fluid.top.find_a_partner {
  height: 1000px !important;
}

.container-fluid.top.contact-us {
  height: 900px !important;
}

.container-fluid.top-abyss.prof_services {
  height: 550px !important;
}

.about-us,
.work-with-us {
  background-color: var(--Abyss);
  height: 700px !important;
}
.about-us {
  height: 900px !important;
}
.join-us {
  height: 1300px !important;
}
.top-abyss,
.banner_abyss {
  background-color: var(--Abyss);
}

.bg-carbon {
  background-color: var(--Carbon);
}

.bg-carbon-partner {
  background-color: var(--Carbon);
  height: 300px;
  margin-top: 80px;
}

.top-download-suite,
.container-fluid.top.top-abyss.zal-for-zimbra {
  height: 500px;
}

.negative_position {
  margin-top: -165px;
}

@media (min-width: 320px) {
  .overlap {
    margin-top: -150px;
  }
  .negative_position {
    margin-top: -30px;
  }
  .bg-carbon-partner {
    background-color: var(--Carbon);
    height: 90px;
    margin-top: -8px;
  }
}
@media (min-width: 768px) {
  .overlap {
    margin-top: -180px;
  }
}
@media (min-width: 1200px) {
  .overlap {
    margin-top: -370px;
  }
}

@media (min-width: 320px) {
  .overlap_download {
    margin-top: -120px;
  }
}
@media (min-width: 480px) {
  .overlap_download {
    margin-top: -200px;
  }
  .negative_position {
    margin-top: -10px;
  }
  .bg-carbon-partner {
    background-color: var(--Carbon);
    height: 300px;
    margin-top: -10px;
  }
}
@media (min-width: 768px) {
  .overlap_download {
    margin-top: -280px;
  }
  .negative_position {
    margin-top: -113px;
  }
  .bg-carbon-partner {
    background-color: var(--Carbon);
    height: 287px;
    margin-top: 32px;
  }
}
@media (min-width: 1200px) {
  .overlap_download {
    margin-top: -250px;
  }
  .negative_position {
    margin-top: -165px;
  }
  .bg-carbon-partner {
    background-color: var(--Carbon);
    height: 300px;
    margin-top: 80px;
  }

}

.release {
  margin-top: 200px;
}

.banner_carbonio_open,
.banner_CE,
.banner_carbonio_premium,
.banner_our_services,
.banner_about {
  border-radius: 25px;
}

.banner_CE {
  background-color: transparent;
}
.banner_carbonio_open {
  background-color: var(--Carbon);
}

.banner_carbonio_premium {
  background-color: #c4d8e0;
}

/*.banner_our_services {
  background-color: var(--Pebble);
}*/

.customer-area {
  text-decoration: underline;
}


.container-fluid.carbonio_premium {
  background-color: var(--Carbon);
  margin-top: -5rem !important;
}

.video {
  width: 100%;
  text-align: center;
}

.container-fluid.carbonio_open {
  background: -webkit-linear-gradient(var(--Carbon), var(--Carbon));
}

.area01_carbonio_open {
  background: -webkit-linear-gradient(
    var(--Carbon),
    var(--Carbon),
    #cbdde4,
    var(--Snow)
  );
}


.ce_mid_contribute {
  background-image: url("/images/carbonio_community_MID.png");
  background-color: var(--Pebble);
}
.ce_mid_contribute {
  height: 500px !important;
}


.ce_title {
  padding-top: 200px;
}

.h_gradient {
  font-size: 28px;
  -webkit-text-fill-color: transparent;
}
.h_gradient_sunset {
  background: #E51A1A;
  background: -webkit-gradient(linear, left bottom, left top, from(#E51A1A), color-stop(69%, #FD830B));
  background: linear-gradient(to top, #E51A1A 0%, #FD830B 69%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}
.p_gradient_sunset {
  background: #E51A1A;
  background: -webkit-gradient(linear, left bottom, left top, from(#E51A1A), color-stop(69%, #FD830B));
  background: linear-gradient(to top, #E51A1A 0%, #FD830B 69%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gradient_Sunset {
  background: -webkit-linear-gradient(var(--Magma), var(--Flame));
  -webkit-background-clip: text;
}
.gradient_Dawn {
  background: -webkit-linear-gradient(var(--Abyss), var(--Snow));
  -webkit-background-clip: text;
}
.h_ice {
  color: var(--Ice);
}
.banner_OScommunity {
  background-color: var(--Pebble);
}

.pebble {
  background-color: var(--Pebble);
}
.ice {
  background-color: var(--Ice);
}

.oval_top {
  padding-top: 50px;
  padding-bottom: 180px;
  text-align: left;
  border-radius: 0 0 85% 45% / 0 0 50% 50%;
}
.oval_bg {
  background-color: #f3f3f3;
  border-radius: 0.5rem !important;
}
.top {
  padding: 150px 0 0 0;
}
.area01 {
  background-image: url("/images/zextras_suite.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

.bg_banner {
  background: #f5f5f5;
}
.row_nation:nth-child(even) {
  padding: 50px 20px;
}

.no_border {
  border: 0 !important;
}
/* end oval Zextras */

/* start img center */

.mt-5,
.my-5 {
  margin-top: 5rem !important;
}
.center_img {
  position: relative;
  width: 100%;
  height: 110px;
}
.center_img img {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.img_icon_left {
  margin: 1.25rem;
}
/* end img center */

/* start position relative */

.bg-white {
  background-color: var(--Snow) !important;
}

.position_relative {
  margin-top: 150px;
}
.box_position_relative {
  position: relative;
  top: -100px;
}
@media (min-width: 576px) {
  .box_position_relative {
    max-width: 40%;
  }
}

/* end position relative */

/* start settings header text */
.gradient_text {
  background: #FD830B;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(18%, #FD830B), color-stop(74%, #E51A1A));
  background: linear-gradient(to top, #FD830B 18%, #E51A1A 74%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}
.solid_text,
.outlined_text {
  font-weight: 500;
  font-size: 1em;
  /*line-height: 1.2em;*/
}
.outlined_text {
  color: var(--Snow);
  /*text-shadow: -1px -1px 0 var(--Snow), 1px -1px 0 var(--Snow), -1px 1px 0 var(--Snow),*/
  /*1px 1px 0 var(--Snow);*/
  position: relative;
  left: 0em;
}
.solid_text02 {
  position: relative;
  line-height: 3em;
  left: 0.1em;
}

.btn-outline-light {
  background-color: var(--Abyss) !important;
  color: var(--Snow);
  border-color: var(--Abyss) !important;
}

.btn-outline-light:hover {
  background-color: var(--Snow) !important;
  border-color: var(--Abyss) !important;
  color: var(--Abyss) !important;
}

/* end settings header text */

/* start footer Zextras */
.page-footer,
.page-footer a {
  color: var(--Snow);
  text-transform: none;
}

.page-footer ul {
  padding: 0.8rem 0;
}
.tap {
  padding: 0.8rem 0 !important;
}
.page-footer a {
  padding: 0;
}
.font-small {
  font-size: 0.8rem;
}
.footer-zextras-color {
  background-color: var(--Carbon) !important;
}

.btn-floating::before {
  border-radius: 0;
}

.btn-floating.btn-sm {
  width: 36.15385px;
  height: 36.15385px;
}

.btn-floating {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0;
  margin: 10px;
  margin-right: 10px;
  margin-left: 10px;
  overflow: hidden;
  vertical-align: middle;
  cursor: pointer;
  -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18),
    0 4px 15px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  width: 47px;
  height: 47px;
}
.rgba-white-slight,
.rgba-white-slight::after {
  background-color: rgba(255, 255, 255, 0.1);
}
.btn-floating.btn-sm i {
  font-size: 0.96154rem;
  line-height: 36.15385px;
}
.btn-floating i {
  display: inline-block;
  width: inherit;
  color: var(--Snow);
  text-align: center;
  font-size: 1.25rem;
  line-height: 47px;
}

/* end footer Zextras */
.wrapper {
  display: block;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */

#sidebar {
  width: 250px;
  position: fixed;
  top: 0;
  right: -250px;
  height: 100vh;
  z-index: 1040;
  background: var(--Snow);
  /*color: #434745;*/
  color: var(--Snow);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  overflow-y: scroll;
  -webkit-box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.5);
          box-shadow: 0 30px 30px 0 rgba(0, 0, 0, 0.5);
}

#sidebar.active {
  right: 0;
}

#dismiss {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

#dismiss:hover {
  color: var(--Snow);
}

.overlay {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  /*z-index: 998;*/
  z-index: 1030;
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.overlay.active {
  display: block;
  opacity: 1;
}

#sidebar .sidebar-header {
  padding: 1.7rem 1rem;
  background-color: var(--Abyss);
}

#sidebar ul.components {
  padding: 0;
}

#sidebar ul p {
  color: var(--Snow);
  padding: 1rem;
}

#sidebar ul li a {
  padding: 0.8rem;
  font-size: 0.8em;
  display: block;
}
#sidebar ul li a .flag-icon,
#sidebar ul li.active .flag-icon {
  width: 2em;
}

#sidebar ul li a:hover {
  color: var(--Snow);
  background: #434745;
}

#sidebar ul li.active {
  color: var(--Snow);
  background: var(--Abyss);
  padding: 0.8rem;
  font-size: 0.8em;
  display: block;
}

a[data-toggle="collapse"] {
  position: relative;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
  width: 100%;
  min-height: 100vh;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  position: absolute;
  top: 0;
  right: 0;
}

/******* TABLE *********/

.table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 20px 0;
  text-align: left;
  background-color: var(--Snow);
}
.table caption {
  caption-side: top;
  margin: 10px;
}
.table thead th {
  border-top: 0;
  border-bottom: 0;
}
.table thead tr th {
  background-color: #ddd;
  border-radius: 20px 20px 0 0;
}
.table tbody td {
  border: 1px dotted #ccc !important;
}
.table tbody tr.rowspan {
  border-top: 2px solid #ccc;
}
.table tbody tr.rowspan td {
  background-color: #aaa;
  color: var(--Snow);
}

.fa-circle {
  color: #2784c6;
  size: 10px;
}

/******* FORM *********/
.form_style {
  border: 1px #8a8a8a solid !important;
  padding: 20px !important;
  /*background-color: #f4f4f4 !important;*/
  /*border-radius: 20px !important;*/
}
iframe html body {
  background-color: transparent !important;
}
.form_setting {
  width: 100%;
  height: 100%;
  border: 0;
  position: static;
}

p.error {
  margin: 0 !important;
  color: var(--Magma);
  font-weight: bold;
  font-size: 0.8em;
}
form#pardot-form select.select,
form#pardot-form input[type="text"],
form#pardot-form textarea {
  width: 100%;
}
span.value span {
  margin-right: 1em;
}
span.value input[type="radio"] {
  margin-right: 0.5em;
}
@media (min-width: 320px) and (max-width: 479.99px) {
  .height {
    min-height: 930px;
  }
  .height_02 {
    min-height: 1800px;
  }
  .carbon {
    min-height: 1600px;
  }
  .interfaccia-CE {
    height: 500px;
    width: 500px;
  }
  .form {
    margin-top: -600px;
  }
  .height_03 {
    min-height: 1900px;
  }
  .form-suite {
    height: 1100px;
    margin-top: 200px;
  }
}
@media (min-width: 480px) and (max-width: 779.99px) {
  .height {
    min-height: 850px;
  }
  .height_02 {
    min-height: 1800px;
  }
  .carbon {
    min-height: 1600px;
  }
  .interfaccia-CE {
    height: 500px;
  }
  .form {
    margin-top: -600px;
  }
  .height_03 {
    min-height: 1900px;
  }
  .form-suite {
    height: 1200px;
    margin-top: 500px;
  }
}
@media (min-width: 780px) and (max-width: 797.99px) {
  .height {
    min-height: 780px;
  }
  .height_02 {
    min-height: 800px;
  }
  .carbon {
    min-height: 1400px;
  }
  .interfaccia-CE {
    height: 500px;
  }
  .form {
    height: 680px;
    margin-top: 100px;
  }
  .height_03 {
    min-height: 1900px;
  }
  .form-suite {
    height: 900px;
    margin-top: 400px;
  }
}

@media (min-width: 798px) and (max-width: 989.99px) {
  .height {
    min-height: 630px;
  }
  .height_02,
  .height_03 {
    min-height: 800px;
  }
  .carbon {
    min-height: 1400px;
  }
  .interfaccia-CE {
    height: 500px;
  }
  .form {
    height: 600px;
    margin-top: 150px;
  }
  .height_03 {
    min-height: 1900px;
  }
  .form-suite {
    height: 950px;
    margin-top: 430px;
  }
}
@media (min-width: 990px) and (max-width: 1199px) {
  .height {
    min-height: 600px;
  }
  .height_02 {
    min-height: 1250px;
  }
  .carbon {
    min-height: 1400px;
  }
  .interfaccia-CE {
    height: 500px;
  }
  .form {
    height: 600px;
    margin-top: 150px;
  }
  .height_03 {
    min-height: 1900px;
  }
  .form-suite {
    height: 950px;
    margin-top: 430px;
  }
}
@media (min-width: 1200px) {
  .height {
    min-height: 850px;
  }
  .height_02 {
    min-height: 780px;
  }
  .height_03 {
    min-height: 1000px;
  }
}

/* PARTNERS */
.row_nation:nth-child(even) {
  background-color: #f0f0f0;
}
.serviceBox {
  padding: 0 10px 60px;
  background-color: #f9a11c;
  border: 1px solid transparent;
  border-radius: 20px;
  margin: 80px 0 30px;
  position: relative;
}
.serviceBox .email:before {
  content: "Email: ";
  font-weight: bold;
}
.serviceBox .phone:before {
  content: "Phone: ";
  font-weight: bold;
}
.serviceBox .service-content {
  padding: 15px 20px 30px;
  margin-top: -80px;
  border-radius: 25px;
  background-color: var(--Snow);
  position: relative;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.serviceBox .service-content:hover {
  -webkit-box-shadow: 0 0 20px -5px var(--noir);
          box-shadow: 0 0 20px -5px var(--noir);
}
.serviceBox .service-content:after {
  content: "";
  height: 50px;
  width: 50px;
  border: 25px solid transparent;
  border-top: 25px solid var(--Snow);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  position: absolute;
  bottom: -50px;
  left: 50%;
}
.serviceBox .service-icon {
  display: inline-block;
  margin: 2rem 0;
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}
.serviceBox:hover .service-icon {
  -webkit-transform: rotateX(360deg);
          transform: rotateX(360deg);
}

.serviceBox .read-more {
  display: block;
  width: 60%;
  text-transform: uppercase;
  text-align: center;
  color: var(--Snow);
  padding: 10px 0;
  border-radius: 15px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: absolute;
  left: 50%;
  bottom: -20px;
}
.serviceBox .read-more:hover {
  text-decoration: none;
  -webkit-box-shadow: 0 0 10px var(--noir);
          box-shadow: 0 0 10px var(--noir);
}

.serviceBox.gold {
  background-color: var(--gold_1);
}
.serviceBox.gold .read-more {
  /*background-color: var(--gold_2);*/
  background-color: #996f0a;
}
.serviceBox.platinum {
  background-color: var(--platinum_1);
}
.serviceBox.platinum .read-more {
  /*background-color: var(--platinum_2);*/
  background-color: #6e6c6c;
}

.serviceBox.gold .service-content {
  border: 2px solid var(--gold_1);
}
.serviceBox.platinum .service-content {
  border: 2px solid var(--platinum_1);
}
@media only screen and (max-width: 1430px) {
  .row_nation:nth-child(even) {
    border-radius: 0 10rem 0 10rem;
  }
}
@media only screen and (max-width: 990px) {
  .serviceBox {
    margin-bottom: 60px;
  }
  .serviceBox .service-content {
    padding: 20px 15px 30px;
  }
  .oval01,
  .oval02 {
    padding-bottom: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .serviceBox {
    margin-bottom: 130px;
  }
  .oval_top {
    padding-bottom: 1em;
    border-radius: 0 /0;
  }

  .solution.different {
    top: -59px;
    margin-left: -3px !important;
  }

  .ice .row {
    display: flex; 
    flex-direction: column-reverse;
  }

  .pebble .row {
    display: flex; 
    flex-direction: column-reverse;
  }
  .homeSection .row {
    display: flex; 
    flex-direction: column-reverse;
  }
  .hideOnMobile {
    display:none;
  }
  }


.step,
.step02 {
  padding: 20px;
  background-color: #f4f4f4;
  border-radius: 10px;
}
.step {
  min-height: 380px;
}
.step02 {
  min-height: 280px;
}

/******* FORM LOGIN *********/
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.zextras-login-form .input-field input {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  min-height: 37px;
  margin-bottom: 0;
  color: #333;
}
.zextras-login-form .msg-alert {
  display: block;
  margin-top: 7px;
  font-size: 0.8em;
  line-height: 1.4;
}
.zextras-login-form .c-red {
  color: red;
}
.zextras-login-form .c-green {
  color: #66ab66;
}
.zextras-login-form [type="submit"].loading {
  position: relative;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.zextras-login-form [type="submit"].loading:after {
  content: "";
  position: absolute;
  top: calc(50% - 10px);
  right: calc(50% - 10px);
  width: 16px;
  height: 16px;
  border: 2px dotted currentColor;
  border-radius: 50%;
  -webkit-animation: spin 3s linear infinite;
  animation: spin 3s linear infinite;
}
.zextras-login-form [type="submit"].loading > span {
  opacity: 0;
}
@media (max-width: 599px) {
  .zextras-login-form .input-field {
    margin-bottom: 10px;
  }
  .zextras-login-form .input-field input {
    font-size: 12px;
    min-height: 32px;
  }
  .zextras-login-form [type="submit"] {
    margin-top: 15px;
    height: 32px;
    font-size: 11px;
    line-height: 32px;
  }
}

#ot-sdk-btn.ot-sdk-show-settings,
#ot-sdk-btn.optanon-show-settings {
  color: var(--Snow) !important;
  background-color: var(--Magma) !important;
  border-color: var(--Magma) !important;
  font-weight: 500;
  border-radius: 0.3rem;
}
#ot-sdk-btn.ot-sdk-show-settings:hover,
#ot-sdk-btn.optanon-show-settings:hover {
  color: var(--Magma) !important;
  background-color: var(--Snow) !important;
  border-color: var(--Magma) !important;
}

.favicons {
  -webkit-transition: .25s;
  transition: .25s;
}

.card:hover .favicons {
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

.telcontainer {
  position: relative;
}
.solution, 
.exagon-abs {
  position: absolute;
  z-index: 10;
  top: -26px;
  left: 0;
}
.different {
  top: -30px;
}
.exagon {
  -webkit-animation: pulse 2s ease-out forwards infinite;
          animation: pulse 2s ease-out forwards infinite;
}

@-webkit-keyframes pulse {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }

  40% {
    opacity: 0;
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }

  50% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }

  40% {
    opacity: 0;
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }

  50% {
    opacity: 0;
    -webkit-transform: scale(1);
            transform: scale(1);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}