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

html, body {
    height: 100%;
    overflow: auto;
}

body {
    background: rgba(0,0,0,1);
    background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(248,181,0,1) 51%, rgba(255,255,0,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(51%, rgba(248,181,0,1)), color-stop(100%, rgba(255,255,0,1)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(248,181,0,1) 51%, rgba(255,255,0,1) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(248,181,0,1) 51%, rgba(255,255,0,1) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(248,181,0,1) 51%, rgba(255,255,0,1) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(248,181,0,1) 51%, rgba(255,255,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffff00', GradientType=0 );
    perspective: 1500px;
}

.carousel {
    display: block;
    content: "";
    width: 60%;
    padding-top: 60%;

    margin: auto;
    bottom: 16vw;

    border-radius: 50%;

    transform-origin: center center;
    -ms-transform-origin: center center;
    -webkit-transform-origin: center center;
    transform: rotateX(60deg);
    -ms-transform: rotateX(60deg);
    -webkit-transform: rotateX(60deg);
    transform-style: preserve-3d;
    -webkit-transform-style:  preserve-3d;

    pointer-events: none;
    transition: 3s cubic-bezier(0.5, 0, 0.5, 1);
}

.horse {
    max-height: 20%;
    max-width: 20%;
    /*
      background-image:
        radial-gradient(
          orange,
          transparent
          );
    */
    border-radius: 50%;

    position: absolute;
    margin: auto;

    transform-origin: 50% 50%;
    -ms-transform-origin:  50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform: rotateX(-90deg);
    -ms-transform: rotateX(-90deg);
    -webkit-transform: rotateX(-90deg);

    pointer-events: auto;
    cursor: pointer;

    text-align: center;
    font-size: 2em;
    /*line-height: 0px;*/
    font-weight: bold;

    transition: 3s cubic-bezier(0.5, 0, 0.5, 1);
    -webkit-filter: saturate(100%);
    filter: saturate(100%);
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* IE10+ specific styles go here */
    .inet {
        left: 40%!important;
    }
    .horse{
    -ms-transform: rotateX(0deg) !important;
    }

    .carousel{
        width: 60vh !important;
        padding-top: 60vh !important;
        top: 1vw!important;
    }

    .icon{
        top: 0px!important;
        font-size: 2vh!important;
    }

    #carousel.active-1 {
        transform: rotateX(0deg) rotate(0deg) !important;
    }

    #carousel.active-2 {
        transform: rotateX(0deg) rotate(40deg) !important;
    }
    #carousel.active-2 .horse {
        transform: rotate(-40deg) !important;
    }

    #carousel.active-3 {
        transform: rotateX(0deg) rotate(90deg) !important;
    }
    #carousel.active-3 .horse {
        transform: rotate(-90deg) !important;
    }

    #carousel.active-4 {
        transform: rotateX(0deg) rotate(120deg) !important;
    }
    #carousel.active-4 .horse {
        transform: rotate(-120deg) !important;
    }

    #carousel.active-5 {
        transform: rotateX(0deg) rotate(160deg) !important;
    }
    #carousel.active-5 .horse {
        transform: rotate(-160deg) !important;
    }

    #carousel.active-6 {
        transform: rotateX(0deg) rotate(-160deg) !important;
    }
    #carousel.active-6 .horse {
        transform: rotate(160deg) !important;
    }

    #carousel.active-7 {
        transform: rotateX(0deg) rotate(-120deg) !important;
    }
    #carousel.active-7 .horse {
        transform: rotate(120deg) !important;
    }

    #carousel.active-8 {
        transform: rotateX(0deg) rotate(-90deg) !important;
    }
    #carousel.active-8 .horse {
        transform: rotate(90deg) !important;
    }

    #carousel.active-9 {
        transform: rotateX(0deg) rotate(-40deg) !important;
    }
    #carousel.active-9 .horse {
        transform: rotate(40deg) !important;
    }
}

.inet {
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.net {
    bottom: 10%;
    right: 14%;
}

.it {
    bottom: 36%;
    right: 0px;
}

.auto {
    bottom: 64%;
    right: 4%;
}

.si {
    bottom: 82%;
    right: 27%;
}

.coms {
    bottom: 83%;
    left: 27%;
}

.sec {
    left: 4%;
    bottom: 64%;
}

.cctv {
    bottom: 36%;
    left: 0px;
}

.sat {
    bottom: 10%;
    left: 14%;
}

#carousel.active-1 {
    transform: rotateX(60deg) rotate(0deg);
    ms-transform: rotateX(60deg) rotate(0deg);
    -webkit-transform: rotateX(60deg) rotate(0deg);
}

#carousel.active-2 {
    transform: rotateX(60deg) rotate(40deg);
    ms-transform: rotateX(60deg) rotate(40deg);
    -webkit-transform: rotateX(60deg) rotate(40deg);
}

#carousel.active-2 .horse {
    transform: rotateX(-90deg) rotateY(40deg);
    ms-transform: rotateX(-90deg) rotateY(40deg);
    -webkit-transform: rotateX(-90deg) rotateY(40deg);
}

#carousel.active-3 {
    transform: rotateX(60deg) rotate(80deg);
    ms-transform: rotateX(60deg) rotate(80deg);
    -webkit-transform: rotateX(60deg) rotate(80deg);
}

#carousel.active-3 .horse {
    transform: rotateX(-90deg) rotateY(80deg);
    ms-transform: rotateX(-90deg) rotateY(80deg);
    -webkit-transform: rotateX(-90deg) rotateY(80deg);
}

#carousel.active-4 {
    transform: rotateX(60deg) rotate(120deg);
    ms-transform: rotateX(60deg) rotate(120deg);
    -webkit-transform: rotateX(60deg) rotate(120deg);
}

#carousel.active-4 .horse {
    transform: rotateX(-90deg) rotateY(120deg);
    ms-transform: rotateX(-90deg) rotateY(120deg);
    -webkit-transform: rotateX(-90deg) rotateY(120deg);
}

#carousel.active-5 {
    transform: rotateX(60deg) rotate(160deg);
    ms-transform: rotateX(60deg) rotate(160deg);
    -webkit-transform: rotateX(60deg) rotate(160deg);
}

#carousel.active-5 .horse {
    transform: rotateX(-90deg) rotateY(160deg);
    ms-transform: rotateX(-90deg) rotateY(160deg);
    -webkit-transform: rotateX(-90deg) rotateY(160deg);
}

#carousel.active-6 {
    transform: rotateX(60deg) rotate(-160deg);
    ms-transform: rotateX(60deg) rotate(-160deg);
    -webkit-transform: rotateX(60deg) rotate(-160deg);
}

#carousel.active-6 .horse {
    transform: rotateX(-90deg) rotateY(-160deg);
    ms-transform: rotateX(-90deg) rotateY(-160deg);
    -webkit-transform: rotateX(-90deg) rotateY(-160deg);
}

#carousel.active-7 {
    transform: rotateX(60deg) rotate(-120deg);
    ms-transform: rotateX(60deg) rotate(-120deg);
    -webkit-transform: rotateX(60deg) rotate(-120deg);
}

#carousel.active-7 .horse {
    transform: rotateX(-90deg) rotateY(-120deg);
    ms-transform: rotateX(-90deg) rotateY(-120deg);
    -webkit-transform: rotateX(-90deg) rotateY(-120deg);
}

#carousel.active-8 {
    transform: rotateX(60deg) rotate(-80deg);
    ms-transform: rotateX(60deg) rotate(-80deg);
    -webkit-transform: rotateX(60deg) rotate(-80deg);
}

#carousel.active-8 .horse {
    transform: rotateX(-90deg) rotateY(-80deg);
    ms-transform: rotateX(-90deg) rotateY(-80deg);
    -webkit-transform: rotateX(-90deg) rotateY(-80deg);
}

#carousel.active-9 {
    transform: rotateX(60deg) rotate(-40deg);
    ms-transform: rotateX(60deg) rotate(-40deg);
    -webkit-transform: rotateX(60deg) rotate(-40deg);
}

#carousel.active-9 .horse {
    transform: rotateX(-90deg) rotateY(-40deg);
    ms-transform: rotateX(-90deg) rotateY(-40deg);
    -webkit-transform: rotateX(-90deg) rotateY(-40deg);
}

#carousel.active-1 .horse.inet,
#carousel.active-2 .horse.net,
#carousel.active-3 .horse.it,
#carousel.active-4 .horse.auto,
#carousel.active-5 .horse.si,
#carousel.active-6 .horse.coms,
#carousel.active-7 .horse.sec,
#carousel.active-8 .horse.cctv,
#carousel.active-9 .horse.sat {
    -webkit-filter: none;
    filter: none;
}

.picture {
    max-width: 50%;
    left: -0%;
}

.icon {
    /*top:-20px;*/
    font-size: 2vw;
    font-family: Tahoma;
    font-weight: normal;
    font-variant: normal;
}

p {
    margin: 0 0 0px!important;
}

.fade {
    opacity: 0;
    -webkit-transition: opacity 2s linear!important;
    -moz-transition: opacity 2s linear!important;
    -ms-transition: opacity 2s linear!important;
    -o-transition: opacity 2s linear!important;
    transition: opacity 2s linear!important;
}

.modal-content {
    background-color: #000000 !important;
    color: gold;
}

.list{
    padding: 2em;
}

.inverse-dropdown {
    background-color: #222!important;
    border-color: #080808!important;
}
.inverse-dropdown > li > a {
    color: #999!important;
}
.inverse-dropdown > li > a:hover {
    color: #fff!important;
    background-color: #000!important;
}
.inverse-dropdown > .divider {
    background-color: #000!important;
}

.buttext:link{
    color:#FFFFFF!important;
    /*text-decoration:none!important;*/
    padding: 10px 0px 0px 0px!important;
}
.buttext:visited{
    color:#FFFFFF!important;
    /*text-decoration:none!important;*/
    padding: 10px 0px 0px 0px!important;
}
.buttext:hover{
    color:#FFFFFF!important;
    /*text-decoration:none!important;*/
    padding: 10px 0px 0px 0px!important;
}
.buttext:active{
    color:#FFFFFF!important;
    /*text-decoration:none!important;*/
    padding: 10px 0px 0px 0px!important;
}