@font-face {
    font-family: "Neuropol";
    src: url('/fonts/neuropol.ttf');
}

@font-face {
  font-family: 'fontello';
  src: url('/fonts/fontello.eot?78987051');
  src: url('/fonts/fontello.eot?78987051#iefix') format('embedded-opentype'),
       url('/fonts/fontello.woff2?78987051') format('woff2'),
       url('/fonts/fontello.woff?78987051') format('woff'),
       url('/fonts/fontello.ttf?78987051') format('truetype'),
       url('/fonts/fontello.svg?78987051#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

html, body {
    margin: 0;
    padding: 0;
    background-color: black;
}

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    speak: none;

    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;

    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;

    /* you can be more comfortable with increased icons size */
    /* font-size: 120%; */

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
 
.icon-mail:before { content: '\e800'; } /* '' */
.icon-mail-alt:before { content: '\f0e0'; } /* '' */

#contact {
    font-size: 2em;
    color: #424242;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 3;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 4em;
    padding: 0.5em;
    cursor: pointer;
    transform: scale(0.8);
    transition: color 0.3s, background-color 0.3s, transform 0.3s;
}

#contact:hover {
    color: rgba(255, 255, 255, 0.9);
    background-color: #424242;
    transform: scale(1);
}

.cover {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 1s;
}

.cover.coding {
    background: url('/images/1.jpg') no-repeat center center fixed;
    background-size: cover; 
    opacity: 1;
}

.cover.hosting {
    background: url('/images/0.jpg') no-repeat center center fixed;
    background-size: cover; 
}

.cover.monitoring {
    background: url('/images/3.jpg') no-repeat center center fixed;
    background-size: cover; 
}

.cover.managing {
    background: url('/images/2.jpg') no-repeat center center fixed;
    background-size: cover; 
}

.cover.layer {
    background-color: black;
    opacity: 0.6;
    z-index: 2;
}

#box {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 0;
    right: 0;
    transform: translate(0%, -50%);
    text-align: center;
}

#box .bpmconcept {
    font-family: Neuropol;
    text-shadow: 2px 2px 10px #ffffff;
    margin: 0;
    padding: 1em;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 2em;
    display: inline-block;
    font-size: 2em;
}

#box .bpmconcept span:first-child {
    color: #242424;
    margin-right: 0.2em;
}

#box .bpmconcept span:last-child {
    color: #424242;
}

#box .carousel {
    color: white;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 3.5em;
    margin-bottom: 0.8em;
}

#box .carousel .txt-rotate {
    display: inline-block;
}

#box .carousel .txt-rotate:after {
    content: "";
    border-right: 0.08em solid #8F8F8F;
    animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
    to {
        visibility: hidden;
    }
}

@media (max-width: 699px) {
    html, body {
        font-size: 10px;
    }
    
    #contact {
        font-size: 2.8em;
    }
    
    #box .carousel .txt-rotate {
        display: block;
    }
}