html {
    min-width: 1192px;
}

body {
    margin: 0;
    top: 0;
}

/* CUSTOM SCROLL BAR */
::-webkit-scrollbar {
    width: 10px;
}
  
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; 
    border-radius: 10px;
}
   
::-webkit-scrollbar-thumb {
    background: #626262; 
    border-radius: 10px;
}
  
::-webkit-scrollbar-thumb:hover {
    background: #464545; 
}

/* SLIDER */
#slider, #slider2 {
    overflow: hidden;
}

#slider figure, #slider2 figure {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    animation: 30s slider infinite;
    opacity: 0.8;
}

#slider figure img {
    float: left;
    width: 99.37vw;
    height: 100vh;
}

#slider2 {
    margin: -5%;
}

@keyframes slider {
    0% {
        left: 0;
    }
    20% {
        left: 0;
    }
    25% {
        left: -100%;
    }
    45% {
        left: -100%;
    }
    50% {
        left: -200%;
    }
    70% {
        left: -200%;
    }
}


.logo {
    transition: .5s ease;
    opacity: 1;
    position: absolute;
    top: 15%;
    left: 13%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    font-size: 20pt;
    color: white;
    background-color:rgb(32, 32, 32);
    padding: 2%;
}

.desc {
    transition: .5s ease;
    opacity: 1;
    position: absolute;
    top: 73%;
    left: 25%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: left;
    font-size: 15pt;
    color: white;
    background-color:rgb(32, 32, 32, 0.8);
    padding: 3%;
    line-height: 25pt;
}


/* MENU */
#navbar {
    overflow: hidden;
    background-color: rgb(32, 32, 32);
}

#navbar a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 50px;
    text-decoration: none;
    font-size: 17px;
}

#navbar p {
    float:left;
    padding-left: 4%;
    padding-right: 4%;
    color: white;
}
  
#navbar a:hover {
    background-color: #ddd;
    color: black;
}
  
#navbar a.active {
    background-color: #616e74;
    color: white;
}
  
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    opacity: 94%;
    z-index: 10;
}

.main-content {
    padding: 7% 15%;
    text-decoration: none;
    text-align: center;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 7px,
        rgb(233, 232, 232) 7px,
        rgb(233, 232, 232) 8px
    );

}

.main-content b {
    font-size: 30pt;
}

.main-content p {
    font-size: 15pt;
    letter-spacing: 0.8pt;
    word-spacing: 1.3pt;
    line-height: 20pt;
}

/* SERVICES */
.service {
    margin: 4%;
}

.service-offer {
    font-size: 30pt;
    text-align: center;
}

.service-best {
    text-align: center;
    color:rgb(109, 109, 109);
    margin-top: -16pt;
}

.services {
    margin-top: 6%;
}

.row1, .row2 {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: nowwrap;
    align-content: space-between;
    margin-bottom: 3%;
}

.row1 img {
    width: 45%;
}

.row2 img {
    width: 30%;
}




.image {
    opacity: 0.5;
    transition: .5s ease;
    backface-visibility: hidden;
}
  
.text {
    color: white;
    font-size: 30px;
    padding: 20px 32px;
}

.mobile {
    transition: .5s ease;
    opacity: 1;
    position: absolute;
    top: 231%;
    left: 27.75%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}
  
#mobile:hover.image {
    opacity: 0.3;
}
  
.mobile:hover .text {
    opacity: 1;
    font-size: 20pt;
    background-color:rgba(12, 123, 175);
}

.mobile .text {
    background-color:rgba(12, 123, 175, 0.8);
}



.java {
    transition: .5s ease;
    opacity: 1;
    position: absolute;
    top: 231%;
    left: 73%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}
  
#java:hover.image {
    opacity: 0.3;
}
  
.java:hover .text {
    opacity: 1;
    font-size: 20pt;
    background-color:rgba(236, 46, 133);
}

.java .text {
    background-color:rgba(236, 46, 133, 0.8);
}




.mvc {
    transition: .5s ease;
    opacity: 1;
    position: absolute;
    top: 276%;
    left: 20%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}
  
#mvc:hover.image {
    opacity: 0.3;
}
  
.mvc:hover .text {
    opacity: 1;
    font-size: 20pt;
    background-color:rgba(232, 167, 53);
}

.mvc .text {
    background-color:rgba(232, 167, 53, 0.8);
}




.webapp {
    transition: .5s ease;
    opacity: 1;
    position: absolute;
    top: 276%;
    left: 50.5%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}
  
#webapp:hover.image {
    opacity: 0.3;
}
  
.webapp:hover .text {
    opacity: 1;
    font-size: 20pt;
    background-color:rgba(12, 50, 95);
}

.webapp .text {
    background-color:rgba(12, 50, 95, 0.8);
}





.cross {
    transition: .5s ease;
    opacity: 1;
    position: absolute;
    top: 277.5%;
    left: 80%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}
  
#cross:hover.image {
    opacity: 0.3;
}
  
.cross:hover .text {
    opacity: 1;
    font-size: 20pt;
    background-color:rgba(148, 132, 108);
}

.cross .text {
    background-color:rgba(148, 132, 108, 0.8);
}


/* FOOTER */
footer {
    background-color: rgb(63, 63, 63);
}

.contact {
    padding: 2%;
    margin-left: 3%;
    float: left;    
    width: 30%;
}

.contact p, .contact a {
    color: rgb(187, 187, 187);
    line-height: 25pt;
}

.contact p:nth-child(1) {
    font-size: 18pt;
    color: white;
}

.contact a {
    text-decoration: none;
}

.contact a:hover {
    color: white;
}

div.footer:after {
    content: "";
    display: table;
    clear: both;
}