/*
  Colors
==================*/
:root {
  --main-white:      #ffffff;
  --main-white-h:    rgba(255,255,255,0.8);
  --main-black:      #0d0e13;
  --main-red:        #ff0000;
  --main-red-hover:  #f10000;
  --main-gray:       #7f7f7f;
  --main-gray-border:#999999;
}


.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.bebas-neue-bold {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 700;
  font-style: normal;
}


.cabin-400{
  font-family: "Cabin", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

body{
  font-family: "Cabin", sans-serif;
  font-size: 20px;
  scroll-behavior: smooth;
}


a:link, a:visited {
    color: var(--main-black);
    text-decoration: underline;
}

::-webkit-input-placeholder {
   font-style: italic;
   color: #a0a0a0;
}
:-moz-placeholder {
   font-style: italic; 
   color: #a0a0a0; 
}
::-moz-placeholder {
   font-style: italic;  
   color: #a0a0a0;
}
:-ms-input-placeholder {  
   font-style: italic; 
   color: #a0a0a0;
}
button:focus, input:focus,
a:focus{
  outline: 0 !important;
}

button, input{
   outline: none;
}
textarea, input {
  border: none;
  overflow: auto;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  resize: none; /*remove the resize handle on the bottom right*/
}

.table-borderless td, .table-borderless th {
    border: none;
}

/*
  Bg, Fonts, Buttons etc
==========================*/
.border-bottom-gray{
  border-bottom: 1px solid var(--main-gray);
}
.border-top-gray{
  border-top: 1px solid var(--main-gray);
}
.bg-black{
  background: var(--main-black);
}

.text-white{
  color: var(--main-white);
}
.font-14{
  font-size: 16px;
  line-height: normal;
}

.btn{
  display: inline-block;
  min-width: 180px;
  padding: 5px 20px;
  border-radius: 20px; 
  text-align: left;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
  transition: all .5s;
}
.btn-fluid{
  min-width: auto !important;
}
.btn-red{
  background: var(--main-red);
  color: var(--main-white) !important;
}
.btn-red:hover{
  background: var(--main-red-hover);
  color: var(--main-white) !important;
  padding-left:60px;
}

.btn-black{
  background: var(--main-black);
  color: var(--main-white) !important;
}
.btn-black:hover{
  background: var(--main-black);
  color: var(--main-white) !important;
  padding-left:60px;
}

.btn-white-outline{
  background: var(--main-white);
  color: var(--main-black) !important;
  border: 1px solid var(--main-gray-border);
}
.btn-white-outline:hover{
  background: var(--main-white);
  color: var(--main-black) !important;
  border: 1px solid var(--main-black);
  padding-left:50px;
}

.btn-gray-outline{
  border: 1px solid var(--main-gray-border);
  color: var(--main-gray-border) !important;
}
.btn-gray-outline:hover{
  border: 1px solid var(--main-black);
  color: var(--main-black) !important;
}

.btn-white-arrow:after{
  content:"";
  position: absolute;
  right: 20px;
  top: 7px;
  width: 20px;
  height: 20px;
  background: transparent url('../img/arrow-white.svg');
  transition: all .5s;
}
.btn-white-arrow:hover:after{
  content:"";
  position: absolute;
  right: -20px;
  top: -20px;
  width: 20px;
  height: 20px;
  background: transparent url('../img/arrow-white.svg');
  transition: all .5s;
}
.btn-white-arrow:before{
  content:"";
  position: absolute;
  left: -20px;
  top: 100%;
  width: 20px;
  height: 20px;
  background: transparent url('../img/arrow-white.svg');
  transition: all .5s;
}
.btn-white-arrow:hover:before{
  content:"";
  position: absolute;
  left: 20px;
  top: 7px;
  width: 20px;
  height: 20px;
  background: transparent url('../img/arrow-white.svg');
  transition: all .5s;
}



.btn-black-arrow:after{
  content:"";
  position: absolute;
  right: 20px;
  top: 7px;
  width: 20px;
  height: 20px;
  background: transparent url('../img/arrow-black.svg');
  transition: all .5s;
}
.btn-black-arrow:hover:after{
  content:"";
  position: absolute;
  right: -20px;
  top: -20px;
  width: 20px;
  height: 20px;
  background: transparent url('../img/arrow-black.svg');
  transition: all .5s;
}
.btn-black-arrow:before{
  content:"";
  position: absolute;
  left: -20px;
  top: 100%;
  width: 20px;
  height: 20px;
  background: transparent url('../img/arrow-black.svg');
  transition: all .5s;
}
.btn-black-arrow:hover:before{
  content:"";
  position: absolute;
  left: 20px;
  top: 7px;
  width: 20px;
  height: 20px;
  background: transparent url('../img/arrow-black.svg');
  transition: all .5s;
}



.h2{
  font-size: 40px;
}

.h2 a{
  text-decoration: none;
}

/*
  Paddings, Margins, boxes
==========================*/
section{
  padding: 8vh 0;
}


/*
  Header + Footer
==========================*/
header{
  background: var(--main-black);    
  padding: 4vh 0;
  border-bottom: 1px solid #868789;
}
nav li{
  display: inline-block;
  padding-left: 20px;
}
nav li a:link{
  color: var(--main-white);
  text-decoration: none;
  font-size: 24px;
}
nav li a:hover{
  color: var(--main-white-h);
}
.align-self-center{
  width: 100%;
}
h1 span{
  color: #b5b5b5 !important;
}
.eu-flag{
  max-width: 40px;
  height: auto;
}
.footer-menu li{
  display: block;
  padding: 0;
}
.footer-menu li a{
  color: var(--main-black) !important;
  font-weight: 300;
  font-size: 16px !important;
}




/*
  SERVICES
===============================*/
.list-services{
  font-size: 30px;
  list-style-position: inside;
  list-style-type: none;
  counter-reset: li;
}
.list-services li{
  padding: 0rem 0;
  border-bottom: 1px solid var(--main-gray-border);
  position: relative;
  margin-bottom: 0px;
}
.list-services li:before {
  counter-increment: li;
  content: counter(li, decimal-leading-zero);
  color: var(--main-gray);
  margin-right: 0.25em;
  position: absolute;
  top:24%;
  left: 10px;
}
.list-services li a{
  padding: 2rem;
  text-decoration: none;
  margin: 0;
}

.list-services li a:hover{
  background: rgba(255,255,255,.05);
}

.right-arrow{
  rotate: 45deg;
}

/*

   RESPONSIVE
===========================*/


@media (max-width: 768px){
   
}

@media (min-width: 768px){
  
  h1, .h1{
    font-size: 100px;
    line-height: 100px
  }
  h1 span{
    font-size: 72px;
  }

}

@media (min-width: 1200px){
   .container{
      min-width: 1300px;
   }
}