/*
    /css/main.css

    COLORS
    black   #1E1E1E
    grey    #888888
    purple  #5C1BFF
    yellow  #FFEC03

*/


/* RESET */
body{margin:0;}
div,ul li{font-size:20px; font-family:'inter'; box-sizing:border-box;}
a{font-family:'inter'; text-decoration:none;}
h1{font-family:'dm'; font-size:3.2em;}
h2{font-family:'dm'; font-size:3.2em;}
ul{padding-left:0;}


/* MENU */
#menu-stripe{z-index:10; position:fixed; top:0; float:left; width:100%; background-color:#F9F9F9;}
#menu-wrapper{width:62em; margin:0 auto 0 auto;}          /* 1240 */
#menu-content{float:left; width:100%; padding:1.5em;}
  #logo{float:left;}
  ul#menu{float:left; margin:0 0 0 0; padding:0 0 0 3em;}
    ul#menu li{list-style:none; display:inline-block;}
    ul#menu li:not(last-child){margin-right:3em;}
    ul#menu li a{font-size:0.750em; color:#1E1E1E;}


/* MENUSMART */
#menusmart{display:none; float:right; position:relative; top:-0.2em;}
a#menusmart-btn{display:block; color:#1E1E1E; height:32px;}


/* SMART */
#smart-wrap{position:fixed; display:none; opacity:0.9; background:#000; width:100%; height:100%; z-index:20; top:0; left:0; padding:2em;}
#smart-button-wrap{text-align:right;}
a#menusmart-btn-close{color:#FFF;}

  ul#smart-menu{}
  ul#smart-menu li{padding:1em; border-bottom:1px solid #444;}
  ul#smart-menu li a{display:block; color:#FFF;}


/* MAIN */
#main{margin-top:96px;}

#who-landscape{clear:both; width:62em; margin:0 auto 0 auto;}
  #who-wrapper{padding:5em 6em 5em 6em;}
    #page{font-size:0.750em; color:#888888; }
    #who{font-family:'dm'; font-size:3.2em; color:#1E1E1E; line-height:0.9em;}
    #job{font-family:'dm'; font-size:2em; color:#5C1BFF;}
    #whoiam{color:#888888; font-size:0.8em; line-height:1.6em; font-family:'intersemibold'; margin:1em 0 1em 0;}
    #who-buttons{margin:1.5em 0 1.5em 0;}

  #expert-areas-buttons a:not(:first-child){margin-left:1em;}

  #expert-areas{padding:0 0 0 0;}
  #expertise{-webkit-animation: slide-down 1s ease; -moz-animation: slide-down 1s ease;}

  ul#expert-areas-list{}
  ul#expert-areas-list li{list-style:none; font-size:0.750em;}
  ul#expert-areas-list li:not(:last-child){margin-bottom:0.5em;}

  ul#expert-areas-list li.percent-wrapper{position:relative; z-index:1; margin-bottom:1.5em;}
  .percentbar{height:10px; border-radius:5px; background-color:#EFEFEF;}
  .percent-yellow{position:absolute; z-index:2; left:0; top:0; height:10px; border-radius:5px; background-color:#FFEC03; }

  /* services */
  div#services-buttons a:not(:last-child){margin-right:1em;}
  div#home-services-content{clear:both; float:left; width:100%;}

  /* footer */
  #footer-content{border-left:4px solid #5C1BFF; padding:2em;}
  #footer h2{font-size:2.2em; line-height:1.1em;}

/* LIST */
ul.basic{float:left; width:100%; margin:0;}
ul.basic li{float:left; width:100%; list-style:none; border-bottom:1px solid #1E1E1E; padding:1.5em;}
  ul.basic li.on{background-color:#5C1BFF;}
  ul.basic li.on:hover{background-color:#5C1BFF;}
  ul.basic li.on div{color:#FFF;}
  ul.basic li a{display:block; color:#1E1E1E;}
  ul.basic li:hover{background-color:#EFEFEF;}

  ul#services .unit-10{text-align:center;}

ul.work{float:left; width:100%;}
  ul.work li{position:relative; float:left; width:30%; list-style:none; margin-bottom:2.5em;}
  ul.work li:not(:nth-child(3n)){margin-right:5%;}

    .work-visual{display:flex; width:100%; height:auto;}
      .work-visual img{max-width:100%;}
    .work-box{display:flex; height:6em; padding:1.5em; background-color:#1E1E1E; color:#FFF; }
    .work-box span{align-self: flex-end; font-size:0.8em;}

.work-overlay{display:none; position:absolute; top:0; left:0; bottom:0; right:0; z-index:5;}
  .work-overlay svg{position:absolute; color:rgba(255,255,255,1); top:50%; left:50%; transform: translate(-50%,-50%); z-index:31;}

  ul.badges{}
  ul.badges li{list-style:none; display:inline-block;}
  ul.badges li:not(:last-child){margin-right:0.5em;}

/* OVERLAY */
.overlay-green{background-color:rgba(15,255,176,0.9);}
.overlay-purple{background-color:rgba(92,27,255,0.9);}
.overlay-yellow{background-color:rgba(255,236,3,0.9);}

ul.blog{float:left; width:100%;}
  ul.blog li{float:left; width:48%; list-style:none; margin-bottom:2em;}
  ul.blog li:nth-child(odd){margin-right:2%;}
  ul.blog li:nth-child(even){margin-left:2%;}

    .blog-visual{background-size:cover; width:100%; height:16em;}
    .blog-box{min-height:6em; padding:1.5em; background-color:#1E1E1E; color:#FFF;}
    .blog-details{margin-bottom:2em;}
      .blog-details div{float:left; font-size:0.7em; color:#888888;}
      .blog-details div:not(:last-child){margin-right:1em;}

    .blog-title{font-size:0.9em; width:60%; font-family:'intersemibold';}
    .blog-read{position:relative; width:6em; font-size:0.7em; margin:1.5em 0 0 0;}
    .blog-read svg{position:absolute; left:6.5em;}

    .blog-arrow{margin-top:1.5em;}


/* ARTICLE */
ul.article-features{}
  ul.article-features li{position:relative; list-style: none; display:inline-block; font-size:0.7em; padding:0.1em 0 0 2.5em;}
  ul.article-features li:not(:last-child){margin-right:1em;}
  ul.article-features li svg{position:absolute; top:0; left:0;}

ul#footer-menu{position:relative; bottom:0; text-align:right; margin:2em 0 0 0;}
  ul#footer-menu li{list-style:none; display:inline-block;}
  ul#footer-menu li a{color:#888; font-size:0.8em; padding:0 1.2em 0 1.2em;}
  ul#footer-menu li:not(:last-child) a{border-right:1px solid #888;}    /* #5C1BFF */


/* TABLE */
.basic{width:100%; border-collapse:collapse;}
.basic tr td{padding:1em; border-bottom:1px solid #1E1E1E;}


/* STRIPES */
.stripe-purple{background-color:#5C1BFF; float:left; width:100%;}
.stripe-yellow{background-color:#FFEC03; float:left; width:100%;}
.stripe-grey{background-color:#F9F9F9; float:left; width:100%;}
.stripe-black{background-color:#1E1E1E; float:left; width:100%;}
.stripe-white{background-color:#FFF; float:left; width:100%;}


/* BLOCK  */
.block-wrapper{clear:both; width:62em; margin:0 auto 0 auto;}       /* static */
.block-content{float:left; width:100%; padding:5em 6em 5em 6em;}    /* float */
.block-title{position:relative;}
  .block-title h1{margin:0 0 0.5em 0;}
  .block-title h2{margin:0 0 0.8em 0;}
  .block-title a{position:absolute; top:-1em; left:0; font-family:'inter'; font-size:0.750em; color:#888;}
.block-subtitle{font-size:1.4em; font-family:'dm';}
.block-text{font-size:0.9em; line-height:1.6em;}
  p.text{font-size:0.8em; line-height:1.4em;}
.block-btn{margin-top:2em;}
.block-buttons{padding:0 0 2em 0;}
.block-testimonial{text-align:center; font-size:0.850em; line-height:1.8em;}
.block-testimonial-author{text-align:center; font-size:0.8em; margin:0 0 0 0;}


/* UNITS */
.unit-row{float:left; width:100%;}
  .unit-10{float:left; width:10%;}
  .unit-30{float:left; width:30%;}
  .unit-40{float:left; width:40%;}
  .unit-50{float:left; width:50%;}
  .unit-60{float:left; width:60%;}


/* GRIDS */
ul.grid-fifty{float:left; width:100%;}
ul.grid-fifty li{list-style:none; float:left; width:50%; padding-right:5%; margin:0 0 1.5em 0;}


/* BOXES */
.box-white-rounded{background-color:#FFF; padding:2em; border-radius:4px;}

  .box-title{font-family:'dm'; font-size:1.6em; color:#1E1E1E; margin:0 0 0.5em 0;}

  .box-section{padding:2em; border-left:4px solid #EFEFEF; font-size:0.750em; line-height:1.8em; margin-bottom:2.5em;}
    .box-section-title{font-size:1.2em; font-family:'interbold'; line-height:1em; margin-bottom:0.8em;}

.box-grey{background-color:#EFEFEF; padding:2em; border-radius:4px; font-size:0.750em;}


/* BADGES */
.badge-white{position:relative; display:inline-block; height:50px; border:1px solid #888888; border-radius:25px; font-size:0.750em; padding:1em 1.5em 1em 1.5em;}

.badge-white-iconed{position:relative; display:inline-block; height:50px; border:1px solid #888888; border-radius:25px; font-size:0.750em; padding:1em 1.5em 1em 3.5em;}
.badge-white-iconed svg{position: absolute; top:0.9em; left:1.2em;}



/* BUTTONS */
  /* large */
  .btn-white-lg{display:inline-block; background-color:#FFF; border:1px solid #888; border-radius:4px; padding:0.8em 2em 0.8em 2em; font-size:0.8em; color:#1E1E1E; font-family:'intersemibold'; }
    .btn-white-lg:hover{background-color:#5C1BFF; border-color:#5C1BFF; color:#FFF;}

  .btn-white-lg-nb{display:inline-block; background-color:#FFF; border:1px solid #FFF; border-radius:4px; padding:0.8em 2em 0.8em 2em; font-size:0.8em; color:#1E1E1E; font-family:'intersemibold'; }
    .btn-white-lg-nb:hover{background-color:#5C1BFF; border-color:#5C1BFF; color:#FFF;}

  /* within icon */
  .btn-white-iconed{z-index:1; position:relative; display:inline-block; background-color:#FFF; border:1px solid #FFF; border-radius:4px; padding:1em 3.4em 1em 2em; font-size:0.8em; color:#1E1E1E; font-family:'intersemibold'; }
    .btn-white-iconed svg{position:absolute; top:1em; right:1em;}

    /* with grey border */
    .btn-white-iconed-b{z-index:1; position:relative; display:inline-block; background-color:#FFF; border:1px solid #888; border-radius:4px; padding:1em 3.4em 1em 2em; font-size:0.8em; color:#1E1E1E; font-family:'intersemibold'; }
      .btn-white-iconed-b svg{position:absolute; top:1em; right:1em;}

    /* iconed purple */
    .btn-purple-iconed-b{z-index:1; position:relative; display:inline-block; background-color:#5C1BFF; border:1px solid #5C1BFF; border-radius:4px; padding:1em 3.4em 1em 2em; font-size:0.8em; color:#FFF; font-family:'intersemibold'; }
      .btn-purple-iconed-b svg{position:absolute; top:1em; right:1em;}

  .btn-basic-iconed{z-index:1; position:relative; display:inline-block; background-color:#FFF; border:1px solid #888888; border-radius:4px; padding:1em 3.4em 1em 2em; font-size:0.8em; color:#1E1E1E; font-family:'intersemibold'; }
    .btn-basic-iconed svg{position:absolute; top:1em; right:1em;}
    .btn-basic-iconed:hover{color:#FFF; background-color:#5C1BFF; border:1px solid #5C1BFF;}

    .btn-basic-iconed-on{z-index:1; position:relative; display:inline-block; color:#FFF; background-color:#5C1BFF; border:1px solid #5C1BFF; border-radius:4px; padding:1em 3.4em 1em 2em; font-size:0.8em; font-family:'intersemibold'; }
      .btn-basic-iconed-on svg{position:absolute; top:1em; right:1em;}


/* CARD */
#card-text{font-size:0.750em; line-height:1.8em; padding-right:2em;}
#card-tags-wrap{position:relative;}
  #card-tags-wrap svg{position:absolute; top:0.2em; left:0;}

#card-features-wrap{border-left:4px solid #EFEFEF; padding:2em;}


/* CARD TAGS */
ul.tags{margin-left:2em;}
ul.tags li{list-style:none; display:inline-block; font-size:0.650em; padding:0.4em 0.6em 0.4em 0.6em; border-radius:3px; background-color:#F9F9F9;}
ul.tags li:not(:last-child){margin-right:0.6em;}


/* CARD FEATURES */
ul.features{margin:0;}
ul.features li{position:relative; list-style: none; font-size:0.750em; padding:0 0 0 3em; }
ul.features li:not(:last-child){margin-bottom:1.2em;}
ul.features li svg{position:absolute; top:0; left:0;}

#card-url-wrap{padding:2em; border-left:4px solid #FFF;}
  #card-url-wrap a{color:#1E1E1E;}

/* PROFIL */
#profil-buttons-wrap{margin-top:1.5em;}
#profil-buttons-wrap a{display:inline-block;}
#profil-buttons-wrap a:not(:last-child){margin-right:1em;}

/* TEXT */
.centred{text-align:center;}

/* MARGINS */
.mt-1-0{margin-top:1em;} .mt-2-0{margin-top:2em;}
.ml-1-0{margin-left:1em;}
.mb-1-0{margin-bottom:1em;} .mb-1-5{margin-bottom:1.5em;} .mb-2-0{margin-bottom:2em;}

/* PADDINGS */
.pr-1-0{padding-right:1em;} .pr-2-0{padding-right:2em;} .pr-3-0{padding-right:3em;}

/* FONTS COLORS */
.c-white{color:#FFF;}
.c-grey{color:#888888;}
.c-yellow{color:#FFEC03;}
.c-purple{color:#5C1BFF;}

/* FONT SIZES */
.s-14{font-size:0.7em;}
.s-16{font-size:0.8em;}
.s-18{font-size:0.9em;}

/* HR */
hr.orange-min{width:8%; margin:2em auto 2em auto; height:2px; background-color:#FF5E36; border:0;}

/* ANIMATIONS */
@-webkit-keyframes slide-down {
      0% { -webkit-transform: translateX(10%); }
    100% {  -webkit-transform: translateX(0); }
}
@-moz-keyframes slide-down {
      0% {  -moz-transform: translateX(10%); }
    100% {  -moz-transform: translateX(0); }
}


/* FONTS */
@font-face {
  font-family: 'inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/css/inter_regular.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'intersemibold';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/css/inter_semibold.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'interbold';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/css/inter_bold.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'dm';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/css/dm.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* feather icons */
.feather-14{width: 14px; height: 14px;}
.feather-16{width: 16px; height: 16px;}
.feather-20{width: 20px; height: 20px;}
.feather-24{width: 24px; height: 24px;}
.feather-32{width: 32px; height: 32px;}
.feather-40{width: 40px; height: 40px;}


/* media queries */

/* >= 1240 */
@media screen and (min-width: 1240px) {
}

/* <= 1240 */
@media screen and (max-width: 1240px) {
  .block-wrapper{width:100%;}
  #who-landscape{width:100%;}
  #home-about{padding-left:3em;}
}

/* <= 1200 */
@media screen and (max-width: 1200px){
  #expert-areas-buttons a:not(:first-child){margin:1em 0 0 0;}
}

/* <= 768 */
@media screen and (max-width: 768px){
  #home-years-experience{display:none;}
  #home-about{padding-left:0px;}
  .unit-10,.unit-30,.unit-40,.unit-60{width:100%;}
  ul#services .unit-10{text-align:left;}
  ul#services .unit-30{margin-bottom:0.5em;}
  ul#services .unit-60{margin-bottom:1em;}
  .modal{width:80%;}
  ul.work li,ul.blog li{width:100%; margin-bottom:3em;}
  ul.work li:not(:last-child){margin-right:0;}
  /*.work-visual{height:15em;}*/
  ul.blog li:nth-child(odd){margin-right:0;}
  ul.blog li:nth-child(even){margin-left:0;}
  #footer-col-2{width:100%;}
  ul#footer-menu{text-align:left;}
}

/* <= 640 */
@media screen and (max-width: 640px){
  #home-years-experience{display:block;}
  #home-years-experience img{width:100%;}
  .unit-40,.unit-60{width:100%;}
}

/* <= 520 */
@media screen and (max-width: 520px){
  #main{margin-top:64px;}
  #menu-content{padding:1em 2em 1em 2em;}
  ul#menu{display:none;}
  #menusmart{display:block;}
  #menu-wrapper{width:100%;}
  #who-wrapper{padding:2em;}
  #who{font-size:1.3em; line-height:1em; margin-bottom:0.2em;}
  #job{font-size:1.1em;}
  #whoiam{font-size:0.750em; font-family:'inter',serif;}
  #who-buttons{margin-bottom:0;}

  .block-content{padding:2em;}
  .block-title h2{font-size:1.3em; margin:0.6em 0 0.6em 0; line-height:1em;}
  .block-text{font-size:0.750em;}

  ul#block-server li{width:100%;}
  ul#block-server li div{float:left;}
  ul#block-server li div:first-child{margin-right:1em;}

  div#services-buttons a{width:100%; box-sizing: border-box; display:block; margin:0;}
  .block-testimonial{font-size:0.750em;}
  #block-testimonial-wrap{padding-bottom:2em;}
  #footer-wrap{padding:0;}
  #footer-content{border-width:10px;}
  #footer h2{font-size:1.8em;}
  #footer-menu{display:none;}

  #main #card-features-wrap{margin-top:2em; border-left:0; padding:0;}

  .btn-white-iconed-b{width:100%; box-sizing:border-box;}
  h1{font-size:2em; line-height:1em;}
  .btn-purple-iconed-b{width:100%; box-sizing:border-box;}
  .box-white-rounded{padding:1em;}
    .box-title{font-size:1.3em; line-height:1em;}

  ul.badges li{display:block;}
  ul.badges li:not(:last-child){margin:0 0 0.5em 0;}
  .badge-white-iconed,.badge-white{width:100%;}
  .box-section{padding:1em;}
  div#page{margin-bottom:0.5em;}

}

/* */