@import "./normalize.min.css";

:root {
  --main-color: #222;
  --heading-color: #ae3b44;
}

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

html {
  color: var(--main-color);
  font-size: 1em;
  line-height: 1.4;
}

body {
  font-family: Arial, sans-serif; 
  background: linear-gradient(#ebf0f3, #fefefe 10%);
}

.wrapper {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color:#3c3c3c;
  cursor: pointer;
  display: inline-block;
}

.header-wrapper {
  justify-content: space-between;
  align-items: center;
  height: 123px; 
}

.header-wrapper::before{
  content: "";
  background: url("../img/world-map.png") top center no-repeat;
  opacity:0.05;
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  z-index: -1;  
}

.logo-container {
  position: relative;
  min-height: 60px;
}

.logo-container a {
  height: 100%;
}

.logo-icon {
  position: absolute;
  top: 5px;
  left:-3px;
}

.logo-text {
  font-size: 2.3em;
  margin-left: 25px;
  letter-spacing: -2px;
}

.navigation {
  margin-right: 35px;
}

.navigation-list {
  display: flex;
}
.nav-item {
  margin-right: 23px;
  font-size: 0.8em;
}

.nav-item:last-child {
  margin-right: 0;
}

.nav-item a:hover, .custom-item a:hover{
  color: var(--heading-color);
}

.dropdown-list {
  display: none;
  position: absolute;
  width: 145px;
  transform: translate(-51px, 4px);
  background-color: #202020;
  font-size: 12px;
  z-index: 10;
}

.dropdown-list-inner {
  transform: translate(147px, -30px);
}

.dropdown-list li{
 border-bottom:1px solid #232525;
 height: 30px;
}

.dropdown-list a {
  padding: 6px 0 0 10px;
  width: 100%;
  height: inherit;
  color: #9ca0a2;

}
.dropdown-list a:hover {
  color: #fff;
}

.dropdown-item:hover > .dropdown-list {
  display: block;
}

.dropdown-list::before{
  content: "\f0de";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  top: -10px;
  color: #202020;
  left: 68px;
  font-weight: 900;
  font-size: 20px;
} 

.dropdown-list-inner::before {
  content: "\f0da";
  left:-1px;
  top:4px;
  color: #ecf0f3;
  font-size: 14px;
} 

.dropdown-list-inner::after{
  content: "\f0da";
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 14px;
  left:-4px;
  top:4px;
} 

.banner-wrapper {
  align-items: flex-end;
  position: relative;
  background-color: #212121;
  height: 136px;
}

.banner-picture {
  height: 128px;
}
.featured-news-wrapper {
  display: flex;
  justify-content: space-between;
  height: 128px;
  width: 100%;
  background-color: var(--heading-color);
  padding: 21px 28px 21px 34px;
}
.header-featured-news {
  color: #edf2f5;
  font-size: 24px;
  line-height: 1.1;
  font-weight: normal;
  max-width: 200px;
}
.featured-news-desc {
  font-size: 12px;
  line-height: 1.5;
  text-align: justify;
  max-width: 440px;
}
.arrows {
  position: absolute;
  right: 28px;
  bottom: 20px;
}
.arrows a {
  color: #f3e2e3;
  width: 20px;
  text-align: center;
}
.arrows a:hover {
  color:#fff;
}

.article-container {
  padding: 28px 0 0px 35px;
}

.article section,
.news-header,
.news-desc{
  border-bottom: 1px solid #dee1e2;
}

.news-header {
  position: relative;
  padding-bottom: 18px;
  border-bottom: 1px solid #dee1e2;
}

.article-header {
  max-width: 433px;
  line-height: 1.3;
  font-weight: normal;
  color: #3d3d3d;
}
.news-date {
  width: 78px;
  height: 78px;
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 10px;
  background-image: url("../img/lines.png");
  color: #bebebf;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.news-desc {
  color: #999b9b;
  font-style: italic;
  font-size: 0.9em;
  padding: 26px 25px 26px 0;
}

.date {
  font-size: 17px;
}

.main-content-article {
  padding: 25px 25px 30px 0;
}


.main-content-header {
  color: var(--heading-color);
  font-size: 0.9em;
}

.controls-container a:hover {
  color: var(--heading-color);
}
.footer-links a:hover,
.security-container a:hover {
  color: #aaa;
}
.main-content-header {
   margin-bottom: 20px;
}

.main-content-article p {
  font-size: 12px;
  line-height: 1.5;
  text-align: justify;
}

.figure {
  text-align: center;
  margin: 40px 0;

}
.figcaption {
  font-size: 11px;
  color: #c0c0c0;
}
.float-img {
  float: left;
  margin: 33px 31px 20px 0;
}

.controls-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 0;
}
.prev-btn::before {
  content: url("../img/prev.png");
  margin-right: 20px;
}
.next-btn::after {
  content: url("../img/next.png");
  margin-left: 20px;
}

.sidebar {
  min-width: 245px;
  font-size: 0.75em;
  border-right: 1px solid #dee1e2;
}
.sidebar-wrapper {
  padding-top: 40px;
}

.sidebar h3 {
  background: url("../img/lines.png") repeat-x;
  border-bottom: 1px solid #dee1e2;
  font-size: 1.4em;
  padding: 9px 0 9px 14px;
  font-weight: normal;
} 
.custom-item {
  border-bottom: 1px solid #dee1e2;
}

.custom-item.active {
  border: 1px solid #ae3b44;
  background-color: var(--heading-color);
  position: relative;
  
}
.custom-item.active::after {
  color:var(--heading-color);
  content: "\f0da";
  position: absolute;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 15px;
  top: 8px;
}

.active a, .active:hover a {
  color:#fff;
}

.custom-item a {
  padding: 11px 0 11px 15px;
  width: 100%;
}
.dropdown-input-list a {
  padding-left: 37px;
}
.dropdown-input-list-inner a {
  padding-left: 57px;
}

.dropdown-input-list .custom-item:last-of-type {
  border-bottom: none;
}

.dropdown-input ul,.dropdown-input-inner ul{
  display: none;
  background-color: #f4f7f8;
}
.dropdown-input-inner ul {
  background-color: #eaeaea;
}

.fa-caret-right {
  position: absolute;
  right: -4px;
  top: 14px;
  color: var(--heading-color);
}

.custom-checkbox[type="checkbox"] {
  display: none;
}

.custom-checkbox[type="checkbox"]:checked ~ ul{
  display: block;
}

.dropdown-input,.dropdown-input-inner,
.dropdown-input-list-inner li{
  position: relative;
}

.custom-checkbox+label::after {
  content: '';
  width: 7px;
  height: 7px;
  background-image: url("../img/arrow-right.png");
  position: absolute;
  right: 15px;
  top:17px;
  cursor: pointer;
}

.custom-checkbox:checked+label::after {
  height: 5px;
  background-image: url("../img/arrow-down.png");
}

.dropdown-input-list-inner li:before {
  content: '';
  width: 7px;
  height: 7px;
  background-image: url("../img/arrow-right.png");
  position: absolute;
  left: 39px;
  top:17px;
}

.clients-wrapper {
  padding: 23px 25px 19px 25px;;
  border-top: 1px solid #dcdcdc;
  display: flex;
  align-items: center;
}

.clients-header {
  margin-right: 92px;
}

.client-list {
  display: flex;
  align-items: center;
}

.clients-header {
  font-weight: 500;
}

.client-item-logo {
  filter: grayscale(100%);
  margin-right: 83px;
}

.client-item-logo:hover {
  filter: grayscale(0%);
}

.client-item-logo:last-child {
  margin-right: 0;
} 

.footer {
  background-color: #f8f8f8;
  font-size: 0.75em;
  box-shadow: inset -1px 2px 1px #dcdcdc;
  color:#d4d4d4;
}

.footer-wrapper {
  padding: 23px 50px 23px 19px;
}
.footer a {
  color:#d4d4d4;
}

.footer-wrapper,
.footer-links-wrapper,
.socials-list  {
  display: flex;
  justify-content: space-between;
}
.socials-list  {
  justify-content:flex-start;
  margin-bottom: 20px;
}
.footer-links-header {
  color:#aaaaaa;
  font-weight: normal;
  font-size: 1.3em;
  margin-bottom: 20px;
}
.footer-links {
  width: 40%;
}

.socials-list li{
  width: 24px;
  height: 24px;
  background-color: #d3d3d3;
  border-radius: 2px;
  margin-right: 5px;
}
.socials-list li:last-child {
  margin-right: 0;
}

.socials-list a {
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.socials-twitter:hover {
  background-color: #9cbcbc;
}
.socials-facebook:hover {
  background-color: #536da5;
}

.socials-linkedin:hover {
  background-color: #5991ab;
}
.socials-rss:hover {
  background-color: #d5933d;
}

.copyright {
  font-size: 0.9em;
}