html {
scroll-behavior: smooth; }

body {
font-weight: 200;
font-family: 'Rubik';
color: #6B6B6B;
line-height: 1.9em; }

#header {
width: 100%;
z-index: 50;
position: fixed; }

#line {
color: white;
background-color: #000;
font-family: "Rubik", sans-serif;
font-optical-sizing: auto;
font-size: 0.9em;
font-weight: 100; }

#line a {
color: white;
text-decoration: none; }

#line img {
margin-right: 0.75em;
height: 20px;
width: auto; }

.contact {
margin-right: 2em;
display: inline-block; }

/* menu */
#menu {
background-color: rgba(0,0,0,0.5);
background: linear-gradient(#000,transparent);
width: 100%;
z-index: 300; }

.menu_fixed {
z-index: 300;
top: 0px !important;
background-color: rgba(0,0,0,0.7);
box-shadow: 0 5px 10px rgba(0,0,0,0.4); }

.nav-item .active {
color: #81B9FF !important; }

#menu .nav-link {
white-space: nowrap;
padding: 0 2em;
font-weight: 500;
text-shadow: 1px 1px rgba(0,0,0,0.2);
color: white; }

#menu .navbar-toggler {
border: none; }

.my-toggler {
background-image: url('../img/menu-toggler.png'); }

#logo {
max-width: 150px;
height: auto; }


/* slider */
#main-carousel > div {
position: relative;
background-color: black;
background-size: cover;
background-repeat: no-repeat; }

#main-carousel .navigation  {
text-align: right; }

#main-carousel .navigation button {
background-color: transparent;
border: none;
color: white !important; }

.slide {
color: white;
padding: 150px 0 250px 0; }

.slide p, .slide h1 {
text-shadow: 0px 0px 3px rgba(0,0,0,0.9);
max-width: 50%; }

#services {
background: transparent;
margin-top: -90px;
position: relative;
z-index: 15; }

#services2 {
background: transparent; }

#services .container > div,
#services2 .container > div {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 20px; }

.service {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
border-radius: 20px;
background-color: white; }

.service a {
text-decoration: none; }

.service:hover img {
transform: scale(1.1); }

.service img {
transition-duration: 300ms;
max-height: 4em;
width: auto; }

.service h2 {
font-size: 1.2em;
color: #000; }

.service p {
font-weight: 100;
color: #6B6B6B; }

/* partners */
.partner img {
max-width: 70%;
height: auto; }


/* banner */
#banner {
color: white;
background-repeat: no-repeat;
background-image: url('../img/banner-bg.jpg');
background-size: cover;
background-position: 50% 50% }


/* reference */
#reference {
color: black; }

#references {
border-bottom: 1px solid #dedede; }

#references-list {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px; }

.reference {
position: relative;
border-radius: 20px;
background-color: #fcfcfc;
padding: 0 0 1.5rem 0;
margin: 20px; }

.reference:hover img {
opacity: 0.85; }

.reference-title {
font-size: 1em;
font-weight: bold;
color: black;
text-decoration: none; }

.reference-image {
display: block;
aspect-ratio: 2/1.2;
overflow: hidden; }

.reference img {
transition: transform .25s, visibility .25s ease-in;
position: relative;
max-width: 100%;
max-height: 100%;
min-width: 100%;
min-height: 100%;
object-fit: cover;
object-position: 50% 0%;
border-radius: 20px; }

.reference-tag,
.reference-icon {
position: absolute;
top: 40px;
left: 30px;
border-radius: 4px;
line-height: 1.0em;
padding: 4px 10px;
white-space: nowrap;
color: white;
box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
font-size: 0.8em; }

.reference-icon {
box-shadow: none;
text-decoration: none;
top: 0;
left: 0;
position: relative !important; }

.reference-icon:hover {
color: white; }

.security {
background-color: #1ABC9C; }

.lan {
background-color: #3498DB; }

.server {
background-color: #8E44AD; }

.helios {
background-color: #f39c12; }

.pc {
background-color: #7e8b8c; }

.electricity {
background-color: #f14f3e; }

.www {
background-color: pink; }

.all {
background-color: #ccc; }

.reference p {
color: #6b6b6b; }


/* contacts */
.contacts-table tr td:first-child {
width: 180px;
white-space: nowrap;
overflow: hidden; }

.contacts-table tr td:last-child {
min-width: 50%; }

#map {
width: 100%;
border: none;
min-height: 450px; }

/* footer */
#footer {
margin-top: -10px;
color: white;
font-weight: 100;
background: url('../img/footer-bg.png') no-repeat 100% 100% #002f6a; }

#footer a {
text-decoration: none;
color: white; }

#footer-logo {
max-width: 150px;
height: auto; }

.footer-contact {
margin-bottom: 7px;
display: flex;
align-items: center;
font-size: 1.3em;
font-weight: bold; }

.footer-contact img {
margin-right: 10px;
max-height: 1.5em;
width: auto; }

#copyright {
border-top: 1px solid #a6a5a5; }

/* service */
#graphic {
color: white; }

/* carousel */
.owl-prev, .owl-next {
font-size: 2.5em !important;
margin: 20px 5px 0 5px;
color: #315a9c !important; }

/* common */
.button {
display: inline-block;
border-radius: 30px;
text-align: center;
padding: 0.7em 2em;
text-decoration: none;
margin: 0 auto; }

.button-white {
border: 1px solid #D7D7D7;
background-color: white;
color: #505050; }

.button-white:hover {
color: black;
background-color: #efefef; }

.button-blue {
border: 1px solid #315a9c;
background-color: #315a9c;
color: #fff; }

.button-blue:hover {
color: white;
border: 1px solid #214a9c;
background-color: #214a9c; }

.text_white {
color: white; }

#about h2 {
color: #000; }

#about img {
max-width: 80%;
height: auto; }

h2 {
color: black; }

.img-responsive {
max-width: 100%;
height: auto; }


@media (max-width: 900px) {
    #services .container > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px; }
}


#title {
background-size: cover;
background-position: center center;
position: relative;
/* min-height: 300px;  */}

.black {
color: white;
width: 100%;
height: 100%;
position: relative;
border: 1px solid black;
background: linear-gradient(transparent,#000); }

.black .container {
margin-top: 70px;
margin-bottom: 20px; }

.graphic {
color: white;
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center center; }

.text_block {
font-weight: 100; }

.text_block h2 { }

.text_block img {
max-width: 90%;
height: auto; }

.text_block_grey {
background-color: #faf7fd; }

.dot b {
color: black; }

#mobile-menu-open {
color: white;
text-decoration: none;
color: #000;
line-height: 1.0em;
font-size: 28px;}

#mobile-menu-open:hover {
cursor: pointer; }

#mobile-menu {
z-index: 110;
height: 100vh;
width: 100%;
position: fixed;
top: 0px;
left: -100%;
overflow-x: hidden;
background-color: rgba(38,60,79, 0.95);
transition: 0.5s;  }

.mobile-menu-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px; }

.mobile-menu-content a {
padding: 10px;
text-decoration: none;
font-size: 30px;
color: #fff;
display: block;
transition: 0.3s; }

.mobile-menu-content a:hover {
background-color: red;
color: #315a9c !important; }

#mobile-menu-close {
position: absolute;
top: -5px;
right: 10px;
color: white;
line-height: 1.0em;
margin: 0;
padding: 0;
text-decoration: none;
font-size: 52px; }