* {
margin:0;
padding:0;
outline:none;
box-sizing:border-box;
}

html {
height: 100%;
overflow-x: hidden;
overflow-y: scroll;
}

body {
font-family: 'Roboto Mono', sans-serif;
background:#f5f5f5;
min-height:100%;
height: 100%;
position:relative;
}

at:before { content:"@"; }

button { cursor:pointer; }

a { text-decoration:none; }
img { border:none; }
.left { float:left; }
.right { float:right; }
.clear { clear:both; }

.container, .headerContainer, .bannerContainer, .introTextWrapper {
max-width:1440px;
width:100%;
margin:0 auto;
position:relative;
}


/*#contentWrapper {background:#fff;}*/

#pageBody {
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
position:relative;
z-index:8000;
/*background:#e5e5e5;*/
min-height:100%;
height:100%;
width:100%;
}

#pageBody.toggle {
transform:translateX(250px);
-moz-transform:translateX(250px);
-o-transform:translateX(250px);
-webkit-transform:translateX(250px);
}

/***/

/* sidebar */

nav#sidebar {
display:none;
width:250px;
height:100%;
position:fixed;
top:0;
left:0;
background:#222;
z-index: 0;
overflow-y:auto;
}

nav#sidebar ul:last-child {
border-top:2px solid #222;
}

nav#sidebar ul:last-child a {
background:#222;
border-bottom:1px solid #333;
}

nav#sidebar ul li a {
border-bottom:1px solid #222;
color:#eee;
font-size:15px;
line-height:55px;
padding:0 20px;
display:block;
background:#333;
}

nav#sidebar ul li a i {
font-size:20px;
width:20px;
margin-right:20px;
text-align:center;
top: 2px;
position: relative;
color:#666;
}

nav#sidebar .language {
margin:20px;
}

/* Header */

header {
display:block;
justify-content:space-between;
align-content:stretch;
align-items:center;
height:100px;
z-index:9999;
width:100%;
background:#000;
padding:0 60px 0 40px;
}

header.home {
position:absolute;
top:0;
left:0;
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%); 
height:400px;
}

header #headerLogo {
display:block;
background:url(/img/logo-header.svg) no-repeat left center;
width:240px;
height:60px;
background-size:contain;
position:absolute;
top:20px;
left:40px;
}
html:not([lang='sl']) header #headerLogo {
background-image:url(/img/logo-header-en.svg)
}

header a#toggleSidebar {
display:none;
color:#ffc60a;
position:absolute;
line-height:50px;
top:0;
left:0;
font-size:30px;
padding:0 15px;
z-index:9999;
}


nav {
position:absolute;
right:60px;
top:25px;
display:flex;
align-items:center;
gap:20px;
}

header nav ul {
display:flex;
list-style-type:none;
gap:20px;
padding:0  20px;
/*border-right:1px solid rgba(255,255,255,0.5);*/ /* enabled when language switch will be displayed */
}

header nav ul li a {
color:#fff;
line-height:40px;
font-size:14px;
font-weight:300;
display:block;
letter-spacing:1px;
text-transform:uppercase;
transition: all 0.4s ease;
}

header nav ul li a:hover {
color:#ffc60a;
}

header nav ul li a.login {
background:#ffc60a;
border-radius:20px;
color:#000;
padding:0 20px;
}

header nav ul li a.login:hover {
background:#000;
color:#ffc60a;
}

.language  {
display:flex;
gap:10px;
}

.language a  {
display:block;
}

.language a img {
height:20px;
display:block;
opacity:0.5;
}
.language a:hover img {
opacity:1;
transition: all 0.4s ease;
}
.language a.on, .language a.on img {
opacity:1;
}


/* Content */

section {
padding:80px 20px;
overflow:hidden;
position:relative;
}
section.content, section.project {
padding-bottom:0;
}

section h1 {
font-weight:900;
font-size:40px;
color:#000;
margin:30px 0 60px;
text-align:center;
font-family:"Roboto";
}

section h2 {
font-weight:900;
font-size:30px;
color:#000;
margin:30px 0 60px;
text-align:left;
font-family:"Roboto";
}

section h3 {
font-size:36px;
line-height:36px;
margin: 0 0 60px;
font-weight:900;
color:#000;
text-align:left;
font-family:"Roboto";
text-align:center;
}

section h4 {
font-size:40px;
margin: 0 0 20px;
font-weight:900;
color:#000;
letter-spacing:2px;
text-align:left;
}

section iframe {
width:60%;
height:480px;
border:none;
margin-bottom:20px;
}

section p {
font-size:16px;
line-height:24px;
margin: 0 0 20px;
font-weight:300;
color:#222;
}
section p strong {
font-weight:600;
}
section p a {
color:#6480BB;
font-weight:600;
}
section p a:hover {
color:#fecd29; /*#374f77;*/
text-decoration:underline;
}

section p>img, section.content img {
display:block;
max-width:100%;
height:auto;
border:1px solid #ddd;
padding:10px;
margin-bottom:20px;
}


section p img.right {
max-width:40%;
margin:0 0 40px 60px;
}

section p img.left {
max-width:40%;
margin:0 60px 40px 0;
} 

section p.columns {
column-count:3;
column-gap:60px;
text-align:justify;
column-rule:1px solid #ddd;
}


section img.left {
max-width:50%;
padding:40px 100px 0 0;
box-sizing:border-box;
float:left;
} 

section .contentRight {
max-width:50%;
float:left;
} 

section ul, section ol {
font-size:16px;
line-height:24px;
margin: 0 0 60px 25px;
font-weight:300;
color:#444;
}


/* Intro */
.parallax-window {
min-height: 400px;
background: transparent;
}

section.introBanner {
/*background:url(../img/banner-main-bw.jpg);
background-position:center;
background-repeat:no-repeat;
background-size:cover;*/
/*height: calc(100vh - 120px);*/
height:100vh;
position: relative;
display:flex;
justify-content:center;
align-items:center;
}

section.introBanner  .introBannerContainer {
display:flex;
flex-wrap:nowrap;
flex-direction:column;
justify-content:center;
align-items:center;
gap:80px;
}




.introBannerContainer h1 {
color:#fff;
margin:0;
font-size:70px;
}

.introBannerContainer p {
color:#fff;
font-size:30px;

}

.introBannerContainer a {
background:#ffc60a;
border-radius:30px;
padding:0 30px;
color:#000;
font-size:20px;
line-height:60px;
display:inline-block;
}



.mouse_scroll {
	display: block;
	width: 24px;
	height: 100px;
    position:absolute;
    bottom:20px;
    left:50%;
    transform:translateX(-50%);
}


.m_scroll_arrows
{
  display: block;
  width: 5px;
  height: 5px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
   
  border-right: 2px solid #ffc60a;
  border-bottom: 2px solid #ffc60a;
  margin: 0 0 3px 4px;
  
  width: 16px;
  height: 16px;
}


.unu
{
  margin-top: 1px;
}

.unu, .doi, .trei
{
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
    animation: mouse-scroll 1s infinite;
  
}

.unu
{
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;
  
  animation-direction: alternate;
  animation-delay: alternate;
}

.doi
{
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .2s;
  animation-direction: alternate;
  
  margin-top: -6px;
}

.trei
{
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .3s;
  animation-direction: alternate;
  
  
  margin-top: -6px;
}

.mouse {
  height: 42px;
  width: 24px;
  border-radius: 14px;
  transform: none;
  border: 2px solid #ffc60a;
  top: 170px;
  color:#ffc60a;
}

.wheel {
  height: 5px;
  width: 2px;
  display: block;
  margin: 5px auto;
  background: white;
  position: relative;
  
  height: 8px;
  width: 4px;
  border: 2px solid #ffc60a;
  -webkit-border-radius: 8px;
          border-radius: 8px;
}

.wheel {
  -webkit-animation: mouse-wheel 0.6s linear infinite;
  -moz-animation: mouse-wheel 0.6s linear infinite;
  animation: mouse-wheel 0.6s linear infinite;
}

@-webkit-keyframes mouse-wheel{
   0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}
@-moz-keyframes mouse-wheel {
  0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}
@-o-keyframes mouse-wheel {

   0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}
@keyframes mouse-wheel {

   0% { top: 1px; }
  25% { top: 2px; }
  50% { top: 3px;}
  75% { top: 2px;}
  100% { top: 1px;}
}

@-webkit-keyframes mouse-scroll {

  0%   { opacity: 0;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}



/* knowledge */

section.introAdvantages {
background:#ffc60a;
}

section.introAdvantages ul {
list-style-type:none;
margin:0;
display:flex;
list-style-type:none;
flex-wrap:wrap;
gap:4%;
}


section.introAdvantages ul li {
flex:0 0 30.66%;
max-width:30.66%;
margin:0  0 40px;
}

section.introAdvantages ul li h3 {
font-size:26px;
line-height:26px;
margin:0 0 20px;
color:#222;
text-transform:none;
text-align:center;
}

section.introAdvantages ul li img {
height:120px;
margin:0 auto 40px;
display:block;
}

section.introAdvantages ul li p {
margin:0 0 20px;
color:#222;
text-align:justify;
}

section.introAdvantages ul li p a {
font-weight:900;
color:#222;
text-decoration:none;
}


/* video */

section.video {
background:url(/img/background-video.jpg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
padding:200px 20px;
}

section.video .container {
display:flex;
gap:40px;
}

.videoContent  {
width:30%;
border-left:1px solid #ffc60a;
padding-left:40px;
}

.videoContent h3 {
text-align:left;
color:#fff;
font-size:40px;
line-height:50px;
}

.videoContent p {
color:#fff;
margin:0 0 40px; 
}

.videoContent a {
line-height:40px;
border-radius:20px;
padding:0 20px;
display:inline-block;
background:#ffc60a;
color:#000;
}

.videoContentPlay {
display:flex;
align-items:center;
justify-content:center;
flex-grow:1;
}

.videoContentPlay img {
height:100px;
}

/* references */

section.references {
background:#f5f5f5;
}

section.references h3 {
text-align:left;
}

ul.referencesList {
display:flex;
flex-wrap:wrap;
gap:2%;
background:#f5f5f5;
list-style:none;
margin:80px 0 0;
}

ul.referencesList li  {
flex-basis:23.5%;
max-width:23.5%;
background:#fff;
border-radius:25px;
display:flex;
align-items:center;
justify-content:center;
margin:0 0 20px;
height:200px;
}

ul.referencesList li img {
display:block;
max-width:50%;
max-height:80px;
}

/* Steps */

.steps {
background:#000;
}

.steps h3 {
color:#ffc60a
}

.stepsList {
list-style:none;
display:flex;
gap:20px;
flex-flow:column;
max-width:60%;
margin: 0 auto;
}

.stepsList li {
display:flex;
border-radius:60px;
background:#222;
align-items:center;
}
.stepsList li.highlight {
box-shadow:0 0 20px 0 #ccc;
}

.stepsList li .stepsNumber {
padding:40px;
border-radius:60px 0 0 60px;
background:#ffc60a;
color:#000;
font-weight:900;
line-height:40px;
font-size:40px;
}

.stepsList li .stepsDesc {
padding:0 40px;
font-size:24px;
color:#fff;
line-height:34px;
}
.stepsList li .stepsDesc p {
color:#fff;
margin:0;
}

.stepsList li .stepsDesc b {
font-weight:600;
}

/* Advantages */

.advantages {
background:#f5f5f5;
}


section.advantages ul {
list-style-type:none;
margin:0;
display:flex;
list-style-type:none;
flex-wrap:wrap;
gap:4%;
padding:40px 0 0;
}


section.advantages ul li {
flex:0 0 16.8%;
max-width:16.8%;
margin:0  0 40px;
}

section.advantages ul li h3 {
font-size:26px;
line-height:26px;
margin:0 0 20px;
color:#222;
text-transform:none;
text-align:center;
}

section.advantages ul li img {
height:120px;
margin:0 auto 40px;
display:block;
border-radius:50%;
background-color:#ffc60a;
padding:20px;
}

section.advantages ul li p {
margin:0 0 20px;
color:#222;
}

section.advantages ul li p a {
font-weight:900;
color:#222;
text-decoration:none;
}


/* faq */

.faq {
background:#ffc60a;
}

.faqAccordionItem {
margin:0 0 10px;
}

.faqAccordionQuestion {
background-color: #eee;
color: #000;
cursor: pointer;
padding: 20px;
line-height:24px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 16px;
transition: 0.4s;
border-radius:10px;
font-family: 'Roboto Mono', sans-serif;
font-weight: 300;
}

.active, .faqAccordionQuestion:hover {
  background-color: #000;
  color:#fff;
}

.faqAccordionQuestion:after {
  content: '\002B';
  color: #000;
  float: right;
  margin-left: 5px;
  font-size:20px;
font-weight: 300;
}

.active:after {
  content: "\2212";
}


.faqAccordionQuestion:hover:after {
color:#fff;
}


.faqAccordionAnswer {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}

.faqAccordionAnswer p {
margin:10px 0 0;
padding:20px;
border-radius:10px;
background:rgba(255,255,255,0.3);
}

/* Apps */

section.app {
position:relative;
}

section.app .yellow {
position:absolute;
background:#ffc60a;
bottom:0;
left:0;
width:100%;
height:300px;
}


section.app .downloadAppContainer {
position:absolute;
bottom:0;
left:0;
}

section.app .downloadAppContainer h3 {
margin:0 0 20px;
font-size:30px;
}

section.app .downloadAppContainer .appButtons {
display:flex;
gap:20px;
}

section.app .downloadAppContainer .downloadApp {
display:flex;
background:#000;
gap:10px;
padding:0 20px;
border-radius:25px;
align-items:center;
height:50px;
}

section.app .downloadAppContainer .downloadApp i {
line-height:30px;
font-size:30px;
width:30px;
color:#fff;
display:block;
}

section.app .downloadAppContainer .downloadApp span {
color:#fff;
font-size:12px;
line-height:14px;
font-weight:300;
display:block;
}

section.app .downloadAppContainer .downloadApp span b {
display:block;
font-size:20px;
line-height:22px;
font-weight:400;
}

.downloadAppLoginWrapper {
display:flex;
gap:60px;
justify-content:flex-start;
}

section.app > .container {
display:flex;
gap:100px;
}

section.app .appContainer {
width:70%;
flex-grow:1;
position:relative;
padding-bottom:300px;
}

section.app .appContainer h3 {
text-align:left;
}

section.app .appScreenshot  {
flex-shrink:1;
}

section.app .appScreenshot img {
display:block;
width:100%;
}

/* Feedback */

section.feedback {
background:#000;
}

section.feedback h3 {
color:#fff;
}

section.feedback .feedbackWrapper {
position:relative;
}

div.feedback .customer-opinion:before {
content: "\f10d";
position: absolute;
display: block;
top: 0;
left:160px;
font-size: 40px;
font-family:"Font Awesome 5 Free";
font-weight:900;
color:#888;
}

div.feedback .customer-opinion:after {
content: "\f10e";
position: absolute;
display: block;
/*bottom: 0;*/
right: 160px;
font-size: 40px;
font-family:"Font Awesome 5 Free";
font-weight:900;
color:#888;
}

section.feedback .flickity-button.next:not(.hovered) {
animation-name:glowsilver;
}

section.feedback .flickity-button {
background: hsla(0, 0%, 0%, .2);
color:#fff;
}

section.feedback .feedbackItem {
position:relative;
padding:80px 150px;
width:82%;
opacity: 0.2;
}
section.feedback .feedbackItem.is-selected {
opacity: 1;
padding-right:20px;
}

section.feedback .feedbackItem p {
color:#fff;
font-size:20px;
line-height:30px;
}

section.feedback .feedbackItem p i {
text-align:right;
display:block;
margin:20px 0 5px;
}

section.feedback .feedbackItem p i span {
display:block;
}

section.feedback .feedbackItem::before {
content: "\f10d";
position: absolute;
display: block;
top: 0;
left: 150px;
font-size: 40px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
color:#ffc60a;
}

section.feedback .feedbackItem::after {
content: "\f10e";
position: absolute;
display: block;
bottom: 0;
right: 150px;
font-size: 40px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #ffc60a;
}

section.feedback .flickity-button {
position: absolute;
border: none;
color: #333;
width:80px;
height:80px;
}
section.feedback .flickity-button svg {
position:absolute;
top:10px;
left:10px;
display:flex;
justify-content:start;
align-items:center;
width:60px;
height:60px;
z-index:100;
}

section.feedback .flickity-button svg:hover {
fill:#fff;
}

section.feedback .flickity-button.next:not(.hovered) {
animation: glowwhite 1s infinite alternate;
}
@keyframes glowwhite {
  from {
    box-shadow: 0 0 10px -10px #fff;
  }
  to {
    box-shadow: 0 0 10px 10px #fff;
  }
}
@keyframes glowsilver {
  from {
    box-shadow: 0 0 10px -10px #888;
  }
  to {
    box-shadow: 0 0 10px 10px #888;
  }
}
@keyframes glowdark {
  from {
    box-shadow: 0 0 10px -10px #333;
  }
  to {
    box-shadow: 0 0 10px 10px #333;
  }
}

section.feedback .flickity-button:disabled {
display:none;
}

/*section.feedback {
background:#000;
}

section.feedback h3 {
color:#fff;
}

section.feedback .feedbackButton {
position:absolute;
top:0;
display:flex;
justify-content:start;
align-items:center;
width:80px;
height:100%;
z-index:100;
}

section.feedback .feedbackButton.feedbackButtonPrev {
left:0
}

section.feedback .feedbackButton.feedbackButtonNext {
right:0
}

section.feedback .feedbackButton svg {
position:absolute;
top:50%;
transform:translateY(-50%);
display:flex;
justify-content:start;
align-items:center;
height:80px;
width:80px;
fill:#333;
}

section.feedback .feedbackButton svg:hover {
fill:#fff;
}

section.feedback .feedbackWrapper {
position:relative;
}

section.feedback .feedbackItem {
position:relative;
padding:80px 150px;
}

section.feedback .feedbackItem p {
color:#fff;
font-size:20px;
line-height:30px;
}

section.feedback .feedbackItem p i {
text-align:right;
display:block;
margin:20px 0 5px;
}

section.feedback .customer-opinion p i span{
display:block;
}

section.feedback .customer-opinion::before {
content: "\f10d";
position: absolute;
display: block;
top: 0;
left: 150px;
font-size: 40px;
font-family: "Font Awesome 5 Free";
font-weight: 900;
color:#ffc60a;
}

section.feedback .customer-opinion::after {
  content: "\f10e";
  position: absolute;
  display: block;
  bottom: 0;
  right: 150px;
  font-size: 40px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #ffc60a;
}*/

/* Savings calculator */

section.savings {
background:#f5f5f5;
}

.savingsWrapper {
display:flex;
gap:15%;
}

.savings>div>h3 {
text-align:left;}

.savingsWrapper .savingsInputContainer label {
display:block;
margin:40px 0 10px;
/*margin:0 0 10px;*/
color:#888;
font-size:16px;
line-height:24px;
}

.savingsWrapper .savingsInputContainer input  {
line-height:50px;
border-radius:25px;
padding:0 25px;
border:none;
box-sizing:border-box;
width:100%;
/*margin:0 0 40px;*/
font-size:20px;
color:#222;
font-family: 'Roboto Mono', sans-serif;
}
.savingsWrapper .savingsInputContainer .error {
color: red;
margin-top: 5px;
font-size: 0.9em;
}

.savingsWrapper .savingsInputContainer button, .savingsWrapper .savingsResultContainer p a {
line-height:50px;
border-radius:25px;
padding:0 25px;
margin-top:40px;
border:none;
box-sizing:border-box;
font-size:20px;
color:#222;
font-family: 'Roboto Mono', sans-serif;
background:#ffc60a;
}

.savingsWrapper .savingsResultContainer {
border-radius:25px;
background:#222;
padding:40px;
min-width:40%;
}

.savingsWrapper .savingsResultContainer span, .savingsWrapper .savingsResultContainer b {
color:#fff;
display:block;
}

.savingsWrapper .savingsResultContainer img {
cursor:pointer;
margin-left: calc(50% - 100px);
}

.savingsWrapper .savingsResultContainer .savingsYearly {
margin:0 0 60px;
}

.savingsWrapper .savingsResultContainer .savingsYearly b {
font-size:30px;
font-weight:900;
font-family: 'Roboto', sans-serif;
margin:0 0 20px;
}

.savingsWrapper .savingsResultContainer .savingsYearly span {
font-size:40px;
font-weight:900;
margin:0 0 20px;
color:#ffc60a;
}

.savingsWrapper .savingsResultContainer .savingsYearly p {
color:#fff;
margin:0;
}

.savingsWrapper .savingsResultContainer .savingsMonthly,
.savingsWrapper .savingsResultContainer .savingsTime {
margin:0 0 20px;
display:flex;
justify-content:space-between;
}


.savingsWrapper .savingsResultContainer .savingsMonthly b,
.savingsWrapper .savingsResultContainer .savingsTime b {
font-size:16px;
font-weight:600;
}

.savingsWrapper .savingsResultContainer .savingsMonthly span,
.savingsWrapper .savingsResultContainer .savingsTime span {
font-size:16px;
font-weight:300;
}

.savingsWrapper .savingsResultContainer p a {
display:inline-block;
}
/*.savingsWrapper .savingsResultContainer p a {
color:#888;
}

.savingsWrapper .savingsResultContainer p a:hover {
text-decoration:none;
color:#ffc60a;
}*/
    
/* price list */

section.priceList {
background:#000;
}

section.priceList h3 {
color:#fff;
}

section.priceList .priceListWrapper {
display: flex;
gap:10px;
}

section.priceList .priceListWrapper .priceListColumn {
min-width:250px;
flex-basis:250px;
flex-grow:1;
}

section.priceList .priceListWrapper .priceListColumn .PriceListColumnCell {
padding:15px;
line-height:24px;
font-size:16px;
font-weight:300;
color:#fff;
text-align:center;
align-items:center;
white-space:nowrap;
margin:0 0 1px;
}

section.priceList .priceListWrapper .priceListColumn .PriceListColumnCell b {
font-weight:600;
color:#ffc60a;
}

section.priceList .priceListWrapper .priceListColumn.Index .PriceListColumnCell {
text-align:right;
color:#888;
}


section.priceList .priceListWrapper .priceListColumn:not(.Index) .PriceListColumnCell.Title {
color:#888;
background:#222;
border-radius:5px 5px 0 0;
font-size:12px;
}

section.priceList .priceListWrapper .priceListColumn:not(.Index) .PriceListColumnCell:last-child {
border-radius:0 0 5px 5px;
}

section.priceList .priceListWrapper .priceListColumn.id1 .PriceListColumnCell.Title {background:rgba(255,255,255,0.1);}
section.priceList .priceListWrapper .priceListColumn.id2 .PriceListColumnCell.Title {background:rgba(255,255,255,0.12);}
section.priceList .priceListWrapper .priceListColumn.id3 .PriceListColumnCell.Title {background:rgba(255,255,255,0.14);}
section.priceList .priceListWrapper .priceListColumn.id4 .PriceListColumnCell.Title {background:rgba(255,255,255,0.16);}
section.priceList .priceListWrapper .priceListColumn.id5 .PriceListColumnCell.Title {background:rgba(255,255,255,0.18);}
section.priceList .priceListWrapper .priceListColumn.id6 .PriceListColumnCell.Title {background:rgba(255,255,255,0.20);}
section.priceList .priceListWrapper .priceListColumn.id7 .PriceListColumnCell.Title {background:rgba(255,255,255,0.22);}
section.priceList .priceListWrapper .priceListColumn.id8 .PriceListColumnCell.Title {background:rgba(255,255,255,0.24);}
section.priceList .priceListWrapper .priceListColumn.id9 .PriceListColumnCell.Title {background:rgba(255,255,255,0.26);}

section.priceList .priceListWrapper .priceListColumn.idS .PriceListColumnCell.Title {background:rgba(255,255,255,0.14);}
section.priceList .priceListWrapper .priceListColumn.idM .PriceListColumnCell.Title {background:rgba(255,255,255,0.18);}
section.priceList .priceListWrapper .priceListColumn.idL .PriceListColumnCell.Title {background:rgba(255,255,255,0.22);}
section.priceList .priceListWrapper .priceListColumn.idXL .PriceListColumnCell.Title {background:rgba(255,255,255,0.26);}

section.priceList .priceListWrapper .priceListColumn:not(.Index) .PriceListColumnCell {
background:#222;
}

section.priceList .priceListWrapper .priceListColumn .PriceListColumnCell.Title b {
font-weight:900;
font-size:40px;
display:block;
padding:20px 0 ;
color:#ccc;
}

section.priceList .priceListWrapper .priceListColumn .PriceListColumnCell.Monthly {
background:#ffc60a;
color:#000;
padding:25px 5px ;
}

section.priceList .priceListWrapper .priceListColumn.Index .PriceListColumnCell.Monthly {
border-radius:5px 0 0 5px;
font-weight:600;
}

section.priceList .priceListWrapper .priceListColumn:not(.Index) .PriceListColumnCell.Monthly {
font-weight:900;
font-size:22px;
font-family: 'Roboto', sans-serif;
}




/*contact cta */
section.contactCta {
background:#ffc60a;
}

section.contactCta .container {
display:flex;
justify-content:center;
align-items:center;
gap:40px;
}

.contactForm {
width:40%;
}

.contactForm h3 {
text-align:left;
}

.contactForm input, 
.contactForm textarea  {
display:block;
line-height:50px;
border-radius:25px;
padding:0 25px;
border:none;
box-sizing:border-box;
width:100%;
margin:0 0 40px;
font-size:16px;
color:#222;
font-family: 'Roboto Mono', sans-serif;
}

.contactForm textarea {
height:200px;
}

.contactForm button  {
line-height:50px;
border-radius:25px;
padding:0 25px;
border:none;
box-sizing:border-box;
font-size:16px;
color:#fff;
font-family: 'Roboto Mono', sans-serif;
background:#000;
}

.contactBubble  {
border-radius:25px;
padding:40px 0;
color:#fff;
background:#000;
display:flex;
flex-direction:column;
justify-content:center;
gap:40px;
width:20%;
flex-shrink:0;
}

.contactBubble svg {
fill:#ffc60a;
height:100px;
width:auto;
}

.contactBubble span {
font-size:20px;
font-weight:600;
text-align:center;
}
.contactBubble span a {
color:#fff;
}

/* newsletter */

section.newsletter {
background:#111;
display:flex;
justify-content:center;
align-items:center;
gap:40px;
}

section.newsletter form {
display:flex;
justify-content:center;
align-items:center;
gap:40px;
}

section.newsletter svg {
fill:#ffc60a;
height:80px;
width:auto;
}

section.newsletter p {
color:#fff;
margin:0;
}

section.newsletter h3 {
color:#ffc60a;
margin:0 20px  20px 0;
}

section.newsletter input {
display:block;
line-height:50px;
border-radius:25px;
padding:0 25px;
border:none;
box-sizing:border-box;
max-width:300px;
font-size:16px;
color:#222;
background:#ccc;
font-family: 'Roboto Mono', sans-serif;
}

section.newsletter input:focus, 
section.newsletter input:hover {
background:#fff;
}


section.newsletter button  {
line-height:50px;
border-radius:25px;
padding:0 25px;
border:none;
box-sizing:border-box;
font-size:16px;
color:#000;
font-family: 'Roboto Mono', sans-serif;
background:#ffc60a;
}


/* footer */

footer {
background:#000;
padding:40px 0;
padding-bottom:0;
position:relative;
/*border-top:1px solid rgb(255,255,255,0.2);
*/}

footer img {
display:block;
width:200px;
}

footer .container {
display:flex;
justify-content:space-between;
align-items:center;
padding:80px 20px;
gap:80px
}

footer .container>p {
flex-grow:1;
display:flex;

}

footer .container>p a {
color:#ccc;
display:inline-block;
margin-left:40px;
line-height:50px;
vertical-align:middle;
white-space: nowrap;
}

footer .container p a.toTop {
width:50px;
height:50px;
background:#ffc60a;
border-radius:25px;

}

footer .container p a.toTop svg {
fill:#000;
width:50px;
height:50px;
}

footer .container p a:hover {
    color:#ffc60a;
}

.footerInfo {
flex-shrink:1;
}

.footerInfo img {
display:block;
margin:0 0 40px;
}

.footerInfo h3 {
color:#fff;
padding:20px 0;
font-family:Roboto, sans-serif;
font-weight:900;
font-size:24px;
}

.footerInfo p {
color:#fff;
}

.footerInfo p a {
color:#ffc60a;
}



footer .footnote {
border-top:1px solid rgb(255,255,255,0.2);
text-align:center;
line-height:70px;
font-size:14px;
position:relative;
margin:40px 0 0;
color:#888;
}

a.netit {
position:absolute;
right:20px;
bottom:20px;
display:block;
width:76px;
height:24px;
background:url("/img/netit.png") no-repeat;
}

a.netit:hover {
background-position:0 -24px;
}



@media only screen and (max-width : 1260px) {

}


/* Smartphones (portrait and landscape) ----------- */


@media only screen
and (min-width : 320px)
and (max-width : 1280px) {


}


/* Portrait */
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 1024px) 
and (orientation: portrait) {
    
    header a#toggleSidebar {
    display: block;
    }

    header {
    height: 240px;
    }

    header.home {
    height: 200px;
    }

    header nav {
    display:none;
    }

    header #headerLogo {
    position:absolute;
    top:25px;
    left:50%;
    transform:translateX(-50%);
    }

     section {
    padding: 30px 20px;
    }

    section h1 {
    font-size: 28px;
    margin: 10px 0 30px;
    text-align: left;
    }

    section h3 {
    font-size: 36px;
    line-height: 46px;
    }

    section p {
    font-size: 16px;
    line-height: 26px;
    }

    section.feedback .feedbackItem p {
    font-size:16px;
    }

    .introBannerContainer h1 {
    font-size: 45px;
    }

    .introBannerContainer p {
    font-size: 30px;
    line-height: 40px;
    }

    section.introAdvantages ul li {
    flex: 100%;
    max-width: 100%;
    }

    .videoContent {
    width: 100%;
    border-left:none;
    padding-left: 0px;
    margin: 0 0 60px;
    }

    section.video .container {
    flex-wrap: wrap;
    }

    ul.referencesList li {
    flex-basis: 49%;
    max-width: 49%;
    margin: 0 0 10px;
    height: 140px;
    }

    section.app .appContainer {
    max-width: 100%;
    padding-bottom: 40px;
    }

    section.app > .container {
    gap: 40px;
    flex-wrap: wrap;
    }

    section.app .downloadAppContainer {
    position: relative;
    bottom: auto;
    left: auto;
    }

    .downloadAppLoginWrapper {
    flex-wrap: wrap;
    }

    section.app .downloadAppContainer .appButtons {
    flex-wrap: wrap;
    }

    section.feedback .feedbackItem {
    padding: 80px 20px;
    }

    section.feedback .feedbackItem::before {
    left: 0;
    }

    section.feedback .feedbackItem::after {
    right:0;
    }

    .savingsWrapper {
    gap:20px;
    flex-wrap: wrap;
    }

    section.priceList .priceListWrapper .priceListColumn .PriceListColumnCell {
    padding: 15px;
    line-height: 14px;
    font-size: 12px;
    }
    section.priceList {
    overflow-x: scroll;
    }

    section.contactCta .container {
    flex-wrap: wrap;
    }

    .contactForm {
    width: 100%;
    }

    .contactBubble {
    width: 100%;
    }
    
    section.newsletter {
    flex-wrap: wrap;
    }

    footer .container {
    justify-content:center;
    gap: 40px;
    flex-wrap: wrap;
    }

    footer .container > p {
    flex-flow: column;
    }

    footer .container > p a {
    margin-left:0px;
    }

    a.netit {
    right:0;
    bottom:23px;
    }

    .stepsList {
    max-width: 100%;
    }

    .stepsList li .stepsDesc {
    padding: 0 20px;
    font-size: 16px;
    line-height: 24px;
    }

    .stepsList li .stepsNumber {
    padding: 20px;
    line-height: 30px;
    font-size: 30px;
    }

    section.advantages ul li {
    flex: 100%;
    max-width: 100%;
    }

}

/* Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 736px) 
  and (orientation: landscape) { 
}