/* !                           */
/* !  GLOBAL DEFINITIONS       */
/* !                           */

:root {

 --echobit-pWhite: #fff;          /*Default background color  */
 --echobit-tBlue: #1d254f;        /*Topbar background box     */
 --echobit-lBlue: #a1c3d7;        /*Topbar phone text         */
 --echobit-mBlue: #61899f;        /*Topbar phone time         */
 --echobit-cText: #002c50;        /*Default text color*/
 --echobit-lTurquioise: #04eae5;  /*Labels, icons, glyphs*/
 --echobit-dTurquioise: #00c1bd;  /*Titles*/
 --echobit-hBlue: #061825;        /*Titles, Header box*/
 --echobit-fWhite: #F2F2F2;       /*Footer white*/

 /* Companies palettes*/
 --linkedin-main: #0077b5;
 --linkedin-black: #000000;
 --linkedin-white: #ffffff;
 --linkedin-lightblue: #00a0dc;
}


/*? FONT: local supplement ?*/

@font-face {
 font-family: 'Signika';
 font-style: lighter;
 font-weight: 300;
 src: url(/vendors/fonts/Signika-VariableFont_wght.woff2) format("woff2-variations");
 src: url(/vendors/fonts/Signika-Light.ttf) format("truetype");
 font-display: swap;
}

@font-face {
 font-family: 'Signika';
 font-style: normal;
 font-weight: 400;
 src: url(/vendors/fonts/Signika-VariableFont_wght.woff2) format("woff2-variations");
 src: url(/vendors/fonts/Signika-Regular.ttf) format("truetype");
 font-display: swap;
}

@font-face {
 font-family: 'Signika';
 font-style: bold;
 font-weight: 600;
 src: url(/vendors/fonts/Signika-VariableFont_wght.woff2) format("woff2-variations");
 src: url(/vendors/fonts/Signika-SemiBold.ttf) format("truetype");
 font-display: swap;
}

@font-face {
 font-family: 'Signika';
 font-style: bolder;
 font-weight: 700;
 src: url(/vendors/fonts/Signika-VariableFont_wght.woff2) format("woff2-variations");
 src: url(/vendors/fonts/Signika-Bold.ttf) format("truetype");
 font-display: swap;
}



/*? ANIMATIONS   ?*/
/*  As presented by https://css-brio.github.io/    */

.animated-normal {
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}
.animated-normal.infinite {
 -webkit-animation-iteration-count: infinite;
 animation-iteration-count: infinite;
}

.animated-fast {
 -webkit-animation-duration: 250ms;
 animation-duration: 250ms;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}
.animated-fast.infinite {
 -webkit-animation-iteration-count: infinite;
 animation-iteration-count: infinite;
}

.animated-slow {
 -webkit-animation-duration: 2s;
 animation-duration: 2s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}
.animated-slow.infinite {
 -webkit-animation-iteration-count: infinite;
 animation-iteration-count: infinite;
}



.fadeInDown {
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDown {
 from {
   opacity: 0;
   transform: translate3d(0, -100%, 0);
 }
 to {
   opacity: 1;
   transform: translate3d(0, 0, 0);
 }
}
@keyframes fadeInDown {
 from {
   opacity: 0;
   transform: translate3d(0, -100%, 0);
 }
 to {
   opacity: 1;
   transform: translate3d(0, 0, 0);
 }
}


.flash {
 -webkit-animation-name: flash;
 animation-name: flash;
}
@-webkit-keyframes flash {
 from,
 50%,
 to { opacity: 1; }
 25%,
 75% { opacity: 0;}
}
@keyframes flash {
 from,
 50%,
 to { opacity: 1; }
 25%,
 75% { opacity: 0; }
}


.fadeOutRight {
 -webkit-animation-name: fadeOutRight;
 animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRight {
 from { opacity: 1; }
 to {
   opacity: 0;
   transform: translate3d(100%, 0, 0);
 }
}
@keyframes fadeOutRight {
 from { opacity: 1; }
 to {
   opacity: 0;
   transform: translate3d(100%, 0, 0);
 }
}





/*? GENERAL ?*/

.clearfix { zoom: 1 }

.clearfix:after {
 content: '.';
 clear: both;
 display: block;
 height: 0;
 visibility: hidden;
}


* {
 margin: 0;
 padding: 0;
 --best-width: 1200px;
 /*1180width + 2x10px left-right*/
 --min-margin: 0px;
 --boxLRM: calc(100vw / 2 - var(--best-width) / 2 + var(--min-margin));
 box-sizing: border-box;
}


html,
body,
input {
 scroll-behavior: smooth;
 background-color: white;
 color: var(--echobit-cText);
 font-family: 'Signika', 'Open Sans', 'Roboto', sans-serif;
 font-weight: 300;
 font-size: 22px;
 line-height: 36px;
 text-rendering: optimizeLegibility;
 /* overflow-x: hidden; */
}

body {
 margin: 0 auto;
}

.linkedin { fill: var(--linkedin-main);}
.twitter { fill: var(--twitter-main); }
.facebook { fill: var(--facebook-main);}

.svgicon-hilite {
 display: inline-block;
 width: 50px;
 height: 50px;
 fill: var(--echobit-lTurquioise);
 /* stroke: var(--echobit-lTurquioise); */
}

.svgicon-normal {
 display: inline-block;
 width: 50px;
 height: 50px;
 fill: var(--echobit-dTurquioise);
}

.block-remove  { display: none;  }
.block-insert  { display: block; }
.inline-insert { display: inline-block; }
.block-hidden  { visibility: hidden; }
.block-visible { visibility: visible; }

.rotate-90 {transform: rotate(90deg);}

/*  *--------------------------------! */
/*  *  Color Classes & Modifiers     ! */
/*  *--------------------------------! */

.color-lTurquoise {
 color: var(--echobit-lTurquioise)
}

.color-dTurquoise {
 color: var(--echobit-dTurquioise)
}

.nomargins {
 margin: 0px;
}

.textcenter {
 /* display: inline-block; */
 text-align: center;
 vertical-align: center;
}


/*  *--------------------------------! */
/*  *  Classic Section               ! */
/*  *--------------------------------! */

section {
 padding: 150px var(--boxLRM);
}

.width-050 { flex-basis: 50%;  }
.width-030 { flex-basis: 30%;  }

.next-part        { margin-bottom: 50px; }
.next-part-medium { margin-bottom: 80px; }
.next-part-big    { margin-bottom: 130px; }
.next-part-huge   { margin-bottom: 180px; }


.lead-icon {
 flex: 0 0 70px;
 /* width: 70px; */
 /* height: 70px; */
 margin-top: 18px;
}


/*  *--------------------------------! */
/*  *  Flex Formatting               ! */
/*  *--------------------------------! */

.rowmargin {
 width: var(--boxLRM);
 /* background-color: coral; */
}

.flex-row-wrapper {
 /* width: 100%; */
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 align-items: center;
 align-content: flex-start;
 justify-content: flex-start;
 /* background-color: blanchedalmond; */
}

.flex-column-wrapper {
 flex-wrap: wrap;
 flex-flow: column;
}

.fx-fullwidth  { width: calc( var(--best-width) - 20px );}
.fx-alignstart { align-items: flex-start; }
.fx-alignend   { align-items: flex-end; }

.flex-box { flex: 1; }


/*  *--------------------------------! */
/*  *  Paragraph & Headlines         ! */
/*  *--------------------------------! */

.echobit-capital-title {
 margin-left: 30px;
 text-transform: capitalize;
 font-weight: 600;
 font-size: 48px;
}

.menutitle {
 font-size: 18px;
}

.supertitle {
 font-size: 60px;
 line-height: 70px;
 font-weight: 600;
 margin: 0px;
}

.big-parole {
 margin-top: 10px;
 margin-bottom: 50px;
 font-size: 1.5em;
 color: var(--echobit-dTurquioise);
 text-transform: uppercase;
}

.on-dark-surface {
 color: var(--echobit-pWhite)
}

.firstLine {
 color: var(--echobit-dTurquioise);
}

.secondLine {
 color: var(--echobit-tBlueBlue);
 margin-bottom: 1.5em;
}



h1 {
 display: block;
 font-size: 2em;
 font-weight: 700;
 margin-top: 0.67em;
 margin-bottom: 0.67em;
 margin-left: 0;
 margin-right: 0;
 line-height: 0.58em;
}

h2 {
 display: block;
 font-size: 1.5em;
 font-weight: 300;
 margin-top: 0.83em;
 margin-bottom: 0.83em;
 margin-left: 0;
 margin-right: 0;
}

h3 {
 display: block;
 font-size: 1.17em;
 font-weight: 400;
 margin-top: 1em;
 margin-bottom: 1em;
 margin-left: 0;
 margin-right: 0;
}

h4 {
 font-weight: 300;
 display: block;
 font-size: 1em;
 margin-top: 1.33em;
 margin-bottom: 1.33em;
 margin-left: 0;
 margin-right: 0;
}

.subheading {
 margin: 0 0 1.33em 0;
 font-weight: 300;
 text-transform: uppercase;
}

.subheading span {
 border-width: 0px 0px 3px 0px;
 border-style: solid;
 border-color: var(--echobit-dTurquioise);
}

h5 {
 display: block;
 font-size: .83em;
 margin-top: 1.67em;
 margin-bottom: 1.67em;
 margin-left: 0;
 margin-right: 0;
}

h6 {
 display: block;
 font-size: .67em;
 margin-top: 2.33em;
 margin-bottom: 2.33em;
 margin-left: 0;
 margin-right: 0;
}

strong {
 font-weight: 400;
}

table,
th,
td {
 border: 0px solid transparent;
 border-collapse: collapse;
}



/*  *--------------------------------! */
/*  *  Buttons                       ! */
/*  *--------------------------------! */

.btn {
 cursor: pointer;
 margin: 30px 10px 0px 0px;
 padding: 14px 24px;
 font-size: 19px;
 text-decoration: none;
 text-transform: uppercase;
 border-width: 2px;
 border-style: solid;
 border-radius: 7px;
 font-weight: 400;
 border-color: var(--echobit-mBlue);
 transition: all 350ms;
}

input[type=submit] {
 font-weight: 400;
 border-color: var(--echobit-mBlue);
}

.btn-primary:link,
.btn-primary:visited,
input[type=submit]  {
 color: var(--echobit-tBlue);
 background-color: var(--echobit-lTurquioise);
 -webkit-filter: drop-shadow(0px 0px 3px var(--echobit-tBlue));
         filter: drop-shadow(0px 0px 3px var(--echobit-tBlue));
}

.btn-primary:hover  ,
.btn-primary:active ,
input[type=submit]:hover {
 background-color: var(--echobit-pWhite);
 color: var(--echobit-tBlue);
 -webkit-filter: drop-shadow(0px 0px 6px var(--echobit-dTurquioise));
         filter: drop-shadow(0px 0px 6px var(--echobit-dTurquioise));
}

.btn-secondary:link,
.btn-secondary:visited {
 color: var(--echobit-lTurquioise);
 background-color: var(--echobit-tBlue);
 -webkit-filter: drop-shadow(0px 0px 3px var(--echobit-lTurquioise));
         filter: drop-shadow(0px 0px 3px var(--echobit-lTurquioise));
}

.btn-secondary:hover,
.btn-secondary:active {
 color: var(--echobit-pWhite);
 background-color: var(--echobit-hBlue);
 -webkit-filter: drop-shadow(0px 0px 6px var(--echobit-tBlue));
         filter: drop-shadow(0px 0px 6px var(--echobit-tBlue));
}



/*  !--------------------------------! */
/*  !  Header 0                      ! */
/*  !   Top phone bar                ! */
/*  !--------------------------------! */

.h0-topbar {
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 align-items: center;
 align-content: center;
 background-color: var(--echobit-tBlue);
 padding: 0 var(--boxLRM);
}

.topbar-icon {
 width: 32px;
}

.h0-topbar .topbar-icon svg {
 margin-top: 5px;
 width: 28px;
 height: 28px;
}

.h0-topbar .topbar-icon svg:hover,
.h0-topbar .topbar-icon svg:focus
{ fill: var(--echobit-lTurquioise); }


.h0-topbar .h0-workingtime {
 width: auto;
 display: flex;
 flex-direction: row;
 justify-content: flex-start;
 color: var(--echobit-pWhite);
 text-align: left;
}

.h0-topbar .h0-workingtime span {
 margin-left: 10px;
}

.h0-topbar .svgicon-hilite:hover {
 color: var(--echobit-lTurquioise);
 font-size: 16px;
 margin-right: 5px;
 transform: rotate(20deg);
 transition: transform 350ms ease-in-out;
}



#h0-workday  { color: var(--echobit-lBlue); }
#h0-worktime { color: var(--echobit-mBlue); }



/*  !--------------------------------! */
/*  !  Header 1                      ! */
/*  !   Focus Header                 ! */
/*  !--------------------------------! */

.h1-fullrow {
 min-height: 85px;
 width: 100%;
 display: flex;
 align-items: center;
 justify-content: flex-start;
 color: var(--echobit-tBlue);
 background-color: var(--echobit-pWhite);
}

.h1-fullrow
 .flex-row-wrapper
  {
   justify-content: space-between;
   align-items: center;
 /*  Make it a container and               */
 /*  change from default flex-start value  */
}


.logo-left {
 display: flex;
 justify-content: flex-start;
 width: auto;
 align-items: center;
}

.logo-left img {
 width: 90px;
 height: 60px;
}

.h1-menu {
 display: flex;
 justify-content: space-between;
 align-items: center;
 width: 570px;
 margin-bottom: 2px;
}

.h1-focus-basic-menu ul {
 list-style: none;
 text-align: left;
 overflow: hidden;
}

.h1-focus-basic-menu li {
 display: inline-block;
 margin-top: 20px;
}

.h1-focus-basic-menu li:first-child::before {
 padding: 0 15px;
 content: "|";
}

.h1-focus-basic-menu li::after {
 padding: 0 15px;
 content: "|";
}

.h1-focus-basic-menu li {
 font-weight: 400;
 text-decoration: none;
 color: var(--echobit-tBlue);
}

.h1-focus-basic-menu li a {
 text-decoration: none;
 color: var(--echobit-tBlue);
}

.h1-focus-basic-menu li a:visited,
.h1-focus-basic-menu li a:link {
 cursor: pointer;
 text-decoration: none;
}

.h1-focus-basic-menu li a:hover,
.h1-focus-basic-menu li a:focus {
 cursor: pointer;
 color: var(--echobit-dTurquioise);
 text-decoration: underline;
}

.h1-focus-language-menu div {
 margin: 0 2px;
 display: inline-block;
 justify-self: end;
}

.h1-focus-language-menu img {
 height: 50px;
 margin-top: 40px;
 /* filter: grayscale(60%) */
 /* filter: drop-shadow(0px 0px 3px black); */
 /* drop-shadow(h-shadow v-shadow blur spread color */
}

.h1-focus-language-menu img.language-unselected {
 -webkit-filter: opacity(50%);
         filter: opacity(50%);
 transition:
  500ms filter linear,
  500ms -webkit-filter linear;
}

.h1-focus-language-menu img.language-unselected:hover,
.h1-focus-language-menu img.language-unselected:active {
 -webkit-filter: opacity(100%);
         filter: opacity(100%);
 transition:
  500ms filter linear,
  500ms -webkit-filter linear;
}



/*  ?--------------------------------! */
/*  ?  Section 0 :: Hidden Normally  ! */
/*  ?   Cell Menu Button             ! */
/*  ?--------------------------------! */

.h1-cell-menu-button {
 display: none;
}



/*  !--------------------------------! */
/*  !  Section 0                     ! */
/*  !   Headline Prime               ! */
/*  !--------------------------------! */


.s0-headline-prime {
 padding: 0 var(--boxLRM);
 background-image:
  url(/resources/img/section0_HeadlinePrime/BlueBrickWall_2880x1200.jpg);
 background-position: center;
 background-size: cover;
 height: 570px;
 /* overflow: hidden; */
}

.s0-headline-prime .prime-backdrop {
 flex: 0 0 570px;
 background-image:
  url(/resources/img/section0_HeadlinePrime/Echobit-DaliborPuljiz_490x522.webp);
 background-position: bottom left;
 background-size: 441px 470px;
 background-repeat: no-repeat;

 display: flex;
 align-items: stretch;
 justify-content: flex-end;
}

.s0-headline-prime .prime-action {
 background-image:
  url(/resources/img/section0_HeadlinePrime/WhiteWallOverlay_NoEffect.svg);
 background-position: bottom;
 background-size: cover;

 flex: 0 0 570px;
 height: 570px;
 padding: 0 45px;

}

.s0-headline-prime .prime-headline {
 margin-top: 30px;
}

.s0-headline-prime
 .prime-action
  .prime-headline
   .secondLine {
 margin-bottom: 50px;
}

.s0-headline-prime .prime-description {
 font-weight: 400;
}

.s0-headline-prime .action-buttons {
 margin-top: 65px;
 margin-left: -6px;
}

.s0-headline-prime .action-buttons a {
 margin-right: 12px;
}





/*  !--------------------------------! */
/*  !  Section 1                     ! */
/*  !   Our Approach                 ! */
/*  !--------------------------------! */

#s1-c4-icon {
 transform: rotate(90deg);
}

.section1-OurApproach .hilites {
 flex: 1;
 padding-right: 40px;
}

.section1-OurApproach
 .action-buttons
  .btn {
 padding-left: 40px;
 padding-right: 40px;
 /* filter: drop-shadow(0px 0px 3px var(--echobit-mBlue)); */
}



/*  !--------------------------------! */
/*  !  Section 2                     ! */
/*  !   What Others are Saying       ! */
/*  !--------------------------------! */

.section2-WhatOthersSay {
 background-image:
  linear-gradient(rgba(15, 21, 36, 0.9), rgba(0, 0, 20, 0.9)),
  url(/resources/img/section2_Testimonials/VSCode_Background_Perspective_v1.jpg);
 background-position: left;
 background-size: cover;
 background-attachment: fixed;
 overflow: hidden;
 padding-bottom: 80px;
}

.section2-WhatOthersSay h1.secondLine {
 color: var(--echobit-pWhite);
}

.section2-WhatOthersSay .flex-row-wrapper {
 align-content: flex-start;
 align-items: flex-start;
}

.section2-WhatOthersSay .flex-column-wrapper {
 display: flex;
 align-items: center;
 align-content: flex-start;
 justify-content: flex-start;
 justify-items: flex-start;
 padding: 30px 15px 0 15px;
}

.section2-WhatOthersSay .flex-column-wrapper p {
 text-align: center;
 font-size: 1.0em;
 font-weight: 300;
}

.section2-WhatOthersSay .flex-column-wrapper img {
 border-radius: 100px;
 -webkit-filter:
  /* radial-gradient(circle, black, white), */
  drop-shadow(0px 0px 7px var(--echobit-lTurquioise));
         filter:
  /* radial-gradient(circle, black, white), */
  drop-shadow(0px 0px 7px var(--echobit-lTurquioise));
 margin-bottom: 30px;
}

.section2-WhatOthersSay h3 {
 color: var(--echobit-lTurquioise);
 margin-bottom: 20px;
}

.testimony-name {
 margin-top: 20px;
 text-transform: uppercase;
 color: var(--echobit-lTurquioise);
}

.testimony-company {
 font-size: 0.85em;
 color: var(--echobit-lTurquioise);
}



/*  !--------------------------------! */
/*  !  Section 3                     ! */
/*  !   Services we offer            ! */
/*  !--------------------------------! */

.section3-OurServices
 .flex-row-wrapper {
 justify-content: space-between;
 align-items: stretch;
 flex: 1 1 100%;
 display: flex;
}

.section3-OurServices .imagebox {
 flex: 0 0 370px;
 /* width: 370px; */
 padding: 130px 28px 28px 28px;
 margin-bottom: 30px;
 background-color: var(--echobit-tBlue);
 background-size: 107%;
 background-position: top;
 background-repeat: no-repeat;
 transition: all 500ms ease;
}

.section3-OurServices h2 ,
.section3-OurServices h3 {
 font-weight: 400;
 text-transform: uppercase;
 line-height: 0.4em;
}

.section3-OurServices .imagebox h3 {
 margin-left: 6px;
 margin-bottom: 40px;
}

.section3-OurServices .imagebox h1,
.section3-OurServices .imagebox h2,
.section3-OurServices .imagebox h3 {
 color: var(--echobit-lTurquioise);
}

.section3-OurServices .height-holder    ,
.section3-OurServices .read-more-flash  ,
.section3-OurServices .read-more-reading {
 /* float:left has fixed several
  pixels on the very left,
  and irritating jumping div down */
 float: left;
 padding: 30px 0 5px;
 text-transform: uppercase;
 color: var(--echobit-lTurquioise);
}

.section3-OurServices .height-holder {
 font-size: 0;
}

.section3-OurServices
 .height-holder::before {
   content: "\200B"; }
/* unicode Character 'ZERO WIDTH SPACE' */

/* ?-- PART1. Companies of all sizes    */
/*     Make sure the gradient goes from
      --echobit-mBlue to --echobit-tBlue  */

#s3-company-small-button {
 background-image:
  linear-gradient(to bottom,
   rgba(97, 137, 159, 0.14) 0%,
   rgba(29, 37, 79, 0.57) 40%,
   rgba(29, 37, 79, 1.00) 100%),
  url(/resources/img/section3_OurServices/c_Small_2_h460.webp);
}

#s3-company-medium-button {
 background-image:
  linear-gradient(to bottom,
   rgba(97, 137, 159, 0.14) 0%,
   rgba(29, 37, 79, 0.57) 40%,
   rgba(29, 37, 79, 1.00) 100%),
  url(/resources/img/section3_OurServices/c_Medium_1_h460.webp);
}

#s3-company-big-button {
 background-image:
  linear-gradient(to bottom,
   rgba(97, 137, 159, 0.14) 0%,
   rgba(29, 37, 79, 0.57) 40%,
   rgba(29, 37, 79, 1.00) 100%),
  url(/resources/img/section3_OurServices/c_Big_h460.webp);
}

.section3-OurServices .imagebox:hover,
.section3-OurServices .imagebox:focus {
 cursor: pointer;
 background-size: 115%;
 border-radius: 15px;
 -webkit-filter: drop-shadow(0px 0px 7px var(--echobit-tBlue));
         filter: drop-shadow(0px 0px 7px var(--echobit-tBlue));
}


/* ?-- PART2: Education part    */

.section3-OurServices .fullbox-gradient {
 cursor: pointer;

 height: 380px;      /* height: 452px; */
 width: 100%;
 display: flex;
 align-items: stretch;

 background-color: var(--echobit-pWhite);
 background: linear-gradient(to left,
   rgba(255, 255, 255, 0.00) 0%,
   rgba(255, 255, 255, 0.00) 30%,
   rgba(29, 37, 79, 0.55) 45%,
   rgba(29, 37, 79, 0.75) 60%,
   rgba(29, 37, 79, 1.00) 100%);
 transition: all 350ms ease;
}

.section3-OurServices .fullbox-gradient:hover,
.section3-OurServices .fullbox-gradient:focus {
 border-radius: 15px;
 -webkit-filter: drop-shadow(0px 0px 7px var(--echobit-tBlue));
         filter: drop-shadow(0px 0px 7px var(--echobit-tBlue));
}

.section3-OurServices .fullbox-backimage {
 /* height: 452px; width: 592px; */
 /* width: 498px; height: 380px; */
 /* background-size: 100% 100%; */
 flex: 1 1 100%;

 background-position: right;
 transition: all 500ms ease;
 background-repeat: no-repeat;
 overflow: hidden;
 background-image:
  url(/resources/img/section3_OurServices/c_Education_498x400.webp);
}

.section3-OurServices .fullbox-backimage:hover,
.section3-OurServices .fullbox-backimage:focus {
 transform: rotate(1deg);
}

.section3-OurServices .education.imagebox:hover,
.section3-OurServices .education.imagebox:focus {
 transform: rotate(-1deg);
}

/* * Overlay text  */
.section3-OurServices .education.imagebox {
 flex: 1.8;
 padding-top: 55px;
 background-size: 100% 100%;
 background-color: transparent;
 overflow: hidden;
}





/*  ?--------------------------------? */
/*  ?  Section 3.  --PAD--           ? */
/*  ?   On-demand description pad    ? */
/*  ?--------------------------------? */

.section3-OurServices
 .description-pad
 {
  margin-top: 30px;
  margin-bottom: 100px;
  padding: 35px 0px 70px 35px;

  font-weight: 300;
  font-size: 0.95em;

  background-color: var(--echobit-pWhite);
  border: 3px solid var(--echobit-cText);
  border-radius: 10px;
  -webkit-filter: drop-shadow(0px 0px 20px var(--echobit-tBlue));
          filter: drop-shadow(0px 0px 20px var(--echobit-tBlue));
}

#read-more-company-small {
 background-image:
  linear-gradient(to left,
   rgba(255, 255, 255, 0)        ,
   rgba(255, 255, 255, 1) 400px ),
  url(/resources/img/section3_OurServices/c_Small_2_400.webp);
  background-position: right 0px top;
  background-repeat: no-repeat;
 }

#read-more-company-medium {
 background-image:
  linear-gradient(to left,
   rgba(255, 255, 255, 0)        ,
   rgba(255, 255, 255, 1) 400px ),
  url(/resources/img/section3_OurServices/c_Medium_1_400.webp);
  background-position: right 0px top;
  background-repeat: no-repeat;
}

#read-more-company-big {
 background-image:
  linear-gradient(to left,
   rgba(255, 255, 255, 0)        ,
   rgba(255, 255, 255, 1) 400px ),
  url(/resources/img/section3_OurServices/c_Big_400.webp);
  background-position: right 0px top;
  background-repeat: no-repeat;
}

.section3-OurServices
 .description-pad
  .width-050 {
    padding-left: 10px;
    margin-bottom: 30px;
   }

.section3-OurServices
 .description-pad h2
  { line-height: 1.2em; }


.section3-OurServices
 .description-pad hr {
   margin-top: 30px;
   margin-bottom: 60px;
   /* border-color: transparent; */
  }

.section3-OurServices
 .description-pad
  .story {
   flex: 2 1 0;
   padding-left: 10px;
  }

.section3-OurServices
 .description-pad
  .story p {
    margin-bottom: 16px;
    padding-right: 40px;
   }

.section3-OurServices
 .description-pad
  .story-logos {
   flex-direction: column;
  }

.section3-OurServices
 .description-pad
  .story-logos
   .vendor-logo {
    flex: 1 0 0;
    height: 270px;
    width: auto;
    text-align: center;
   }

.section3-OurServices
 .description-pad
  img.cut-height {
    height: 110px;
    width: auto;
   }

.section3-OurServices
 .description-pad
  img.cut-width {
   width: 110px;
   height: auto;
  }

.color-black-to-blue {
 -webkit-filter:
  invert(11%)
  sepia(28%)
  saturate(3322%)
  hue-rotate(212deg)
  brightness(97%)
  contrast(93%);
         filter:
  invert(11%)
  sepia(28%)
  saturate(3322%)
  hue-rotate(212deg)
  brightness(97%)
  contrast(93%);
 ;
}


.section3-OurServices
 .description-pad img {
  width: 27%;
  fill: var(--echobit-lTurquioise);
  margin-left: auto;
  margin-right: auto;
 }

.section3-OurServices
 .description-pad
  .linkedin { width: 60px; }

.section3-OurServices
 .description-pad
  .svg-segoeui svg {
   fill: var(--echobit-tBlue);
   height: 26px;
   width: auto;
  }


.section3-OurServices
 .description-pad
  .btn {
   align-self: flex-start;
   /* background-color: rgba(255, 255, 255, 0.8); */
   -webkit-filter: drop-shadow(0px 0px 1px var(--echobit-tBlue));
           filter: drop-shadow(0px 0px 1px var(--echobit-tBlue));
  }

.section3-OurServices
 .description-pad
  .move-right {  margin-right: 30px; }

.section3-OurServices
 .description-pad
  .move-left {  margin-left: 30px; }



/*  !--------------------------------! */
/*  !  Section 4                     ! */
/*  !   Contact us                   ! */
/*  !--------------------------------! */


.section4-Contact {
 background-image:
  linear-gradient(rgba(15, 21, 36, 0.9), rgba(0, 0, 20, 0.9)),
  url(/resources/img/section4_Contact/t_Servers.jpg);
 background-position: left;
 background-size: cover;
 background-attachment: fixed;
 overflow: hidden;
 padding-bottom: 80px;
}

.section4-Contact .flex-row-wrapper {
 align-items: flex-start;
}

.section4-Contact .flex-row-wrapper .info-content {
 padding-left: 3px;
}


.section4-Contact .secondLine {
 color: var(--echobit-pWhite);
}

.section4-Contact .flex-column-wrapper {
 flex: 50%;
 align-content: flex-start;
 align-items: flex-start;
}

.section4-Contact ul {
 list-style-type: none;
}

.section4-Contact ul li {
 margin: 12px 0;
 font-size: 0.9em;
}


.section4-Contact a:visited,
.section4-Contact a:link {
 color: var(--echobit-pWhite)
}

.section4-Contact a:hover,
.section4-Contact a:active {
 color: var(--echobit-lTurquioise)
}

.section4-Contact form {
 display: flex;
 flex-direction: column;
 flex-wrap: wrap;
}

.section4-Contact form input {
 flex: 1 1 0;
}


input[type=text],
input[type=email],
input[type=tel],
textarea {
 font-size: 1.0em;
 color: var(--echobit-pWhite);
 background-color: transparent;

 padding: 7px 12px;
 margin-top: 20px;
 border-radius: 4px;
 border: 2px solid var(--echobit-mBlue);

}

input[type=text]:hover,
input[type=email]:hover,
input[type=tel]:hover,
textarea:hover {
 color: var(--echobit-lBlue);
 background-color: var(--echobit-hBlue);
}


input[type=submit] {
 margin: 30px 10px 0px 0px;
 padding: 7px 24px;
 cursor: pointer;
 /* font-weight: 700; */
 font-size: 20px;
 text-decoration: none;
 text-transform: uppercase;
 border-width: 2px;
 border-style: solid;
 border-radius: 7px;
}

textarea {
 width: 100%;
}



/*  !--------------------------------! */
/*  !  Footer                        ! */
/*  !   Contact us                   ! */
/*  !--------------------------------! */

footer {
 padding-top: 80px;
 /* width: 100vw; */
 border-top: 4px solid var(--echobit-dTurquioise);
 color: var(--echobit-lBlue);
 font-size: 0.8em;
 font-weight: 400;
 line-height: 1.95em;
 background-color: var(--echobit-tBlue);
}

footer .footer-row-wrapper {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 align-content: flex-start;
 justify-content: space-between;
 align-items: flex-start;
 padding: 0 var(--boxLRM) 0;
}

footer .flex-column-wrapper {
 padding-right: 10px;
}

footer img.logo-full {
 width: 350px;
 padding-bottom: 50px;
}

footer svg {
 width: 32px;
 height: 32px;
 margin-top: 20px;
}

footer svg:hover {
 fill: var(--echobit-lTurquioise);
}



footer .super-footer-line {
 margin-top: 40px;
 display: flex;
 flex-flow: row;
 justify-content: space-between;
 padding: 7px var(--boxLRM);
 color: var(--echobit-mBlue);
 background-color: var(--echobit-hBlue);
}

footer .super-footer-line .flex-row-wrapper {
 flex: 1 1 0;
}

footer ul {
 width: 100%;

 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-between;
 align-items: stretch;

 list-style: none;
 text-align: center;
}

/* footer li:first-child::before {
 padding-right: 15px;
 padding-left: 0px;
 content: "|";
}

footer li:not(:last-child)::after {
 padding: 0 15px;
 content: "|";
}

footer li:last-child::after {
 padding-left: 15px;
 content: "|";
} */


footer a {
 cursor: pointer;
 text-decoration: none;
}

footer a:link,
footer a:visited {
 color: var(--echobit-mBlue);
}

footer a:hover,
footer a:active {
 color: var(--echobit-lTurquioise);
}


/* footer table {
 width: 100%;
}

footer table td {
 text-align: center;
 cursor: pointer;
 border: dashed #fff;
} */




/*  !--------------------------------! */
/*  !  Popup                         ! */
/*  !   About us                     ! */
/*  !--------------------------------! */

.popup {
 visibility: hidden;
 position: fixed;
 z-index: 129;

 width: calc(3/4 * var(--best-width));
 top: 50px;
 left: 0;
 right: 0;
 margin-left: auto;
 margin-right: auto;

 padding: 35px;
 font-weight: 300;

 background-color: var(--echobit-pWhite);
 border: 3px solid var(--echobit-cText);
 border-radius: 10px;
 -webkit-filter: drop-shadow(0px 0px 20px var(--echobit-tBlue));
         filter: drop-shadow(0px 0px 20px var(--echobit-tBlue));
}

.popup .flex-row-wrapper {
 width: 100%;
 justify-content: space-between;
 align-items: flex-start;
 align-content: center;
}

.popup .flex-column-wrapper {
 flex: 1 1 0;
 font-size: 0.93em;
 line-height: 1.65em;
 align-items: flex-start;
 padding-right: 15px;
}


.popup h3 {
  margin-top: 36px;
  margin-bottom: 28px;
 }

.popup hr {
 margin-top: 45px;
}

.popup p {
 margin-top: 20px;
 font-size: 0.9em;
}

.popup p.main-intro {
 margin-left: 125px;
}

.popup ul {
 list-style: none;
 margin-bottom: 30px;
}

.popup li {
 margin-left: 5px;
 font-size: 0.9em;
}

.popup li::before {content: '.';}



.popup .btn {
 cursor: pointer;
 margin: 0;
 padding: 3px 18px;

 text-align: center;
 font-size: 19px;
 text-decoration: none;
 text-transform: uppercase;

 border-width: 2px;
 border-style: solid;
 border-radius: 7px;
 font-weight: 400;
}


.btn-popup-top {
 color: var(--echobit-cText);
 border-color: var(--echobit-mBlue);
 background-color: var(--echobit-pWhite);
 /* filter: drop-shadow(0px 0px 1px var(--echobit-tBlue)); */
}

.btn-popup-top:hover,
.btn-popup-top:focus {
 color: var(--echobit-pWhite);
 background-color: var(--echobit-tBlue);
 -webkit-filter: drop-shadow(0px 0px 1px var(--echobit-tBlue));
         filter: drop-shadow(0px 0px 1px var(--echobit-tBlue));
}

.btn-popup-bottom {
 color: var(--echobit-dTurquioise);
 border-color: var(--echobit-mBlue);
 background-color: var(--echobit-tBlue);
 -webkit-filter: drop-shadow(0px 0px 1px var(--echobit-tBlue));
         filter: drop-shadow(0px 0px 1px var(--echobit-tBlue));
}



/*  !--------------------------------! */
/*  !  Popup                         ! */
/*  !   Low Res Menu                 ! */
/*  !--------------------------------! */

.popup-menu {
 position: fixed;
 top: 84px;
 right: var(--boxLRM);
 font-size: 0.8em;
 line-height: 1.7em;
 background-color: var(--echobit-pWhite);
 padding: 10px 20px;
}

.popup-menu hr { margin: 16px 0}

.popup-menu ul { list-style: none; }

.popup-menu li {
 padding: 3px 11px;
 cursor: pointer;
}

.popup-menu
 .menu-item:hover {
 background-color: var(--echobit-tBlue);
 color: var(--echobit-lTurquioise);
 border-radius: 3px;
}



/*  !--------------------------------! */
/*  !  3rd Party                     ! */
/*  !   Slick Slider                 ! */
/*  !--------------------------------! */

/* Disable first in slick-theme.css */

 .slick-prev::before,
 .slick-next::before {
  font-family: 'slick';
  font-size: 50px;
  line-height: 1;

  opacity: 0.25;
  color: var(--echobit-dTurquioise);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
 }

 .slick-prev { left: -50px;}
 .slick-prev::before { content: '←';}

 .slick-next { right: -25px;}
 .slick-next::before { content: '→'; }