@import "bootstrap-4.3.1-dist/css/bootstrap.css";
@import "bootstrap-4.3.1-dist/css/bootstrap-grid.css";
@import "bootstrap-4.3.1-dist/css/bootstrap-reboot.css";

@font-face {
    font-family: 'roboto_slab';
    src: url('font/robotoslab-variablefont_wght-webfont.eot');
    src: url('font/robotoslab-variablefont_wght-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/robotoslab-variablefont_wght-webfont.woff2') format('woff2'),
         url('font/robotoslab-variablefont_wght-webfont.woff') format('woff'),
         url('font/robotoslab-variablefont_wght-webfont.svg#roboto_slabregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@media only screen and (max-width: 768px){
    ul.navbar-nav {
        width: 100% !important;
    }
    .nav-item {
        padding: 0 !important;
        width: 100% !important;
        display: block !important;
    }
    #navbarToggleMobile {
        width: 100% !important;
        margin-top: 10px !important;
    }
    #logo {
        margin: auto !important;
    }
    .reason{
        width: auto !important;
        display: block !important;
        height: auto !important;
    }
    .reason-text{
        display: block !important;
        padding: 10px 0!important;
    }
    .reason-desc {
        margin-bottom: 15px !important;
    }
    .place-icon {
        display: block !important;
    }
    .sticky-top{
        position: static;
    }
    .new-reason {
        height: auto !important;
    }
    .new-reason-desc {
        display: block !important;
        width: 100% !important;
        padding: 10px !important;
        height: auto !important;
    }
    .new-img {
        display: block !important;
        height: 60% !important;
        width: 100% !important;
    }
    .shadow-right {
        box-shadow: 1em 0em 2em 2em rgb(36,78,107) !important;
        transform: skew(0deg) !important;
    }
    .shadow-left {
        box-shadow: -1em 0em 2em 2em rgb(36,78,107) !important;
        transform: skew(0deg) !important;
    }
    .new-reason-text {
        font-size: 1em !important;
        transform: skew(0deg) !important;
        margin-top: 1% !important;
        line-height: 1.8 !important;
    }
    .carousel-indicators#services {
        justify-content: start !important;
    }
    #workshop::before {
        content: "\A";
        white-space: pre;
    }
    .new-reason {
        background: rgb(36,78,107) !important;
        background: -moz-linear-gradient(0deg, rgba(36,78,107,1) 80%, rgba(132,205,219,1) 100%) !important;
        background: -webkit-linear-gradient(0deg, rgba(36,78,107,1) 80%, rgba(132,205,219,1) 100%) !important;
        background: linear-gradient(0deg, rgba(36,78,107,1) 80%, rgba(132,205,219,1) 100%) !important;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#244e6b",endColorstr="#84cddb",GradientType=1) !important;
    }
    .ser-details {
        margin: 5px 0 !important;
        width: 100% !important;
        display: block !important;
        z-index: 2;
        position: absolute;
    }
    .img-cont {
        display: block !important;
        height: 100% !important;
        width: 95% !important;
        position: absolute !important;
        pointer-events: none !important;
    }
    .img-ser {
        object-fit: cover !important;
        z-index: 1;
        opacity: 0.5;
    }
    .product-ex {
        display: block !important;
        width: 90% !important;
        text-align: center;
        margin: 5% !important;
    }
    .gmaps {
        font-size: 1em !important;
        text-align: center !important;
    }
    .product-title {
        overflow: auto !important;
        height: 60px !important;
    }
    .manufacturer {
        overflow: auto !important;
        word-wrap: break-word !important;
        font-size: 1.2rem !important;
        width: 70% !important;
        transform: translate(35%, 0%) !important;   
    }
    .product-list {
        display: block !important;
        width: 100% !important;
        margin: 20px 0% !important;
    }
    #t-pr {
        text-align: left !important;
    }
    .img-tr {
        height: inherit !important;
    }
    .form-new {
        width: 100% !important;
    }
    .carousel-indicators#services li{
        width: 14% !important;
        height: 15% !important;
    }
    .img-hero {
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
    }
    .text-hero {
        width: 100% !important;
        height: auto !important;
        top: 50% !important;
    }
}

/* END OF RESPONSIVENESS */
/* START OF AWESOMENESS */
body {
    background: rgba(255, 255, 255, 1);
    font-family: 'roboto-slab', sans-serif;
}
.gray {
    background: rgb(51,51,51);
    background: -moz-radial-gradient(circle, rgba(51,51,51,1) 0%, rgba(85,85,85,1) 48%, rgba(153,153,153,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(51,51,51,1) 0%, rgba(85,85,85,1) 48%, rgba(153,153,153,1) 100%);
    background: radial-gradient(circle, rgba(51,51,51,1) 0%, rgba(85,85,85,1) 48%, rgba(153,153,153,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#333333",endColorstr="#999999",GradientType=1);
}
.blue {
    background: rgb(36,78,107);
    background: -moz-radial-gradient(circle, rgba(36,78,107,1) 0%, rgba(65,125,159,1) 55%, rgba(132,205,219,1) 100%);
    background: -webkit-radial-gradient(circle, rgba(36,78,107,1) 0%, rgba(65,125,159,1) 55%, rgba(132,205,219,1) 100%);
    background: radial-gradient(circle, rgba(36,78,107,1) 0%, rgba(65,125,159,1) 55%, rgba(132,205,219,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#244e6b",endColorstr="#84cddb",GradientType=1);
}

.red {
    background: rgb(136,34,34);
    background: -moz-linear-gradient(90deg, rgba(136,34,34,1) 0%, rgba(187,51,34,0.7539390756302521) 100%);
    background: -webkit-linear-gradient(90deg, rgba(136,34,34,1) 0%, rgba(187,51,34,0.7539390756302521) 100%);
    background: linear-gradient(90deg, rgba(136,34,34,1) 0%, rgba(187,51,34,0.7539390756302521) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#882222",endColorstr="#bb3322",GradientType=1);
}

.header {
    border-bottom: 1px solid #800;
    padding: 3px;
}
#navbar {
    padding: 0.2rem;
    top: 0px;
    position: sticky;
    z-index: 99;
    background: rgba(255, 255, 255, 1);
}
#logo {
    margin-right: auto;
    float: left;
    width: 250px;
    height: 65px;
    background: #999;
    text-align: center;
}
#logo img {
    max-width: 100%;
}

li a:hover {
    color: #FFF;
    background: #A00;
    -webkit-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.5);
}
.aktif {
    background: #800;
}
li.aktif a{
    color: #FFF;
}
.nav-item {
    padding: 3px;
}
li a{
    color: #800;
}

.carousel {
    height: 100%;
    color: White;
}

.carousel-item {
    height: 100%;
}

.carousel-ab {
    height: 80%;
    background: rgba(136, 0, 0, 1);
}
.text-hero {
    z-index: 2 !important;
    text-align: center;
    position: absolute;
    width: 100%;
    height: auto;
    top: 35%;
    color: #FFF;
}
.img-hero {
    opacity: 0.7;
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.title{
    width: 100%;
    color: #800;
    padding: 10px;
    margin-top: 10px;
    text-align: center;
}
.m-20 {
    margin: 20px;
}

.new-whyus {
    text-align: center;
    padding: 40px 0px 20px;
}
.new-reason {
    width: 100%;
    display: block;
    height: 340px;
    overflow: hidden;
    margin: 20px 0px;
}
.new-img {
    float: right;
    width: 50%;
    height: 100%;
    background-color: #555;
    z-index: 0;
    display: inline-block;
}
.right {
    float: right;
}
.shadow-right {
    box-shadow: 7em 0em 5em 5em rgb(85, 85, 85);

    transform: skew(-10deg);
}
.shadow-left {
    box-shadow: -7em 0em 5em 5em rgb(85, 85, 85);
    
    transform: skew(-10deg);
}
.left {
    float: left;
}
.new-reason-desc {
    z-index: 9;
    display: inline-table;
    padding: 3%;
    width: 45%;
    height: 100%;
    padding-top: 7%;
}
.new-reason-text {
    color: rgba(255, 255, 255, 0);
    position: relative;
    line-height: 2;
    display: block;
    margin: auto;
    font-size: 1.2em;
}
.reason-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}


#carousel-services {
    height: auto;
    width: 100%;
    margin-top: 20px;
}
.carousel-ser {
    width: 100%;
    margin-top: 1%;
    height: auto;
    display: block;
    z-index: 0;
    position: static;
}
.carousel-indicators#services{
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
  overflow: visible;
  display: flex;
  position: static;
  flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  margin-top: 1%;
  z-index: 1;
}
.carousel-indicators#services li{
  opacity: 0.5;
  width: 160px;
  height: auto;
  flex: none;
  margin-right: 5px;
  margin-left: 5px;
  cursor: pointer;
  background: rgba(253, 253, 253, 0);
  color: #FFF;
  opacity: 1;
  transition: opacity 0.6s ease;
  border-radius: 0em;
  text-indent: 0;
  box-sizing: border-box;
  background-clip: border-box;
  text-align: center;
  padding: 0px;
  font-weight: bold;
}
.carousel-indicators#services .active{
  opacity: 1;
  width: 160px;
  height: auto;
  border-radius: 0em;
  background: #FFF;
  color: #800;
  border: 0px solid #800;   
  -webkit-box-shadow: 10px 10px 10px 0px rgba(76,0,0,0.5);
  -moz-box-shadow: 10px 10px 10px 0px rgba(76,0,0,0.5);
  box-shadow: 10px 10px 10px 0px rgba(76,0,0,0.5);
  padding: 0px;
}
.h2-ser{
    color: #800;
}
.ser {
    color: #FFF;
    position: static;
    height: 70%;
    width: 100%;
}
.ser-details {
    margin: 10% 30px;
    width: 30%;
    padding-top: 25px;
    display: inline-block;
}
.ser-details img {
    position: absolute;
    top: -1%;
}
p.small {
    position: absolute;
    transform: translateY(90%);
    top: 90%;
    color: rgba(200, 200, 200, 1);
}

#t-ser {
    color: #800;
}
.img-cont {
    display: inline-block;
    width: 65%;
    height: 100%;
    position: absolute;
    overflow: visible;
}
.img-ser {
    object-fit: cover;
    position: static;
}
.ser-3 {
    height: 32%;
    margin: 0.3%;
}
.ser-2 {
    height: 48%;
    margin: 0.5%;
}
.ser-1 {
    height: 100%;
}

.vert-ser-3 {
    width: 32%;
    height: 100%;
    margin: 0.1%;
}
.vert-ser-2 {
    width: 48%;
    height: 100%;
    margin: 0.3%;
}
.hovering {
    height: 100%;
    position: absolute;
    top: 0%;
    z-index: 9 !important;
    box-shadow: -20px 0px 10px rgba(136, 0, 0, 0.3);
}

.gmaps {
    border-radius: 1em;
    border: 0.5px solid #800;
    margin-top: 7%;
    font-size: 1.2em;
    display: block;
    position: relative;
}

.bg {
    width: 100%;
    background: rgb(85, 85, 85);
}

.footer-container{
    margin-top: 5%;
    padding: 3%;
    position: relative;
}
.footer{
    display: inline-table;
    color: #EEE;
    font-size: 0.8rem;
    position: relative;
}

/* PRODUCT PAGE */
.hero {
    background: rgba(136, 0, 0, 1);
    width: 100%;
    height: 70%;
    position: relative;
    overflow: hidden;
}
.divider {
    background: rgba(136, 0, 0, 1);
}

.products{
    margin-top: 10px;
}
.product-list{
    position: relative;
    color: #FFF;
    margin: 20px;
    padding-top: 0px;
    display: inline-grid;
    width: 45%;
    border: 1px solid #888;
    overflow: hidden;
}
.product-title{
    position: relative;
    display: block;
    height: 60px;
    overflow: hidden;
}
.product-logo{
    display: inline-block;
    height: 100%;
    width: 20%;
    margin-left: 2%;
    position: absolute;
    overflow: hidden;
    object-fit: fill;
    z-index: 1;
    padding: 5px;
}
.product-logo img {
    width: 100%;
    height: 100%;
}
.product-logo.mvs {
    font-size: 2.1rem;
    font-family: serif;
}
video.shizoka-vid {
    max-width: 432px;
    max-height: 240px;
}
.manufacturer { 
    display: inline-block;
    position: absolute;
    font-size: 1.3rem;
    width: 95%;
	z-index: 1;
    transform: translate(25%, 50%);
}
.product-cont {
    display: block;
}
.product-detail {
    display: block;
    margin: auto;
    width: 90%;
    background: rgba(255,255,255,0);
    color: #000;
    padding: 8px 0px;
    border-bottom: 3px solid #A33;
}
.product-name {
    display: block;
    position: relative;
    text-align: center;
    font-size: 1rem;
    color: rgb(85, 85, 85);
}
.download {
    width: 90%;
    margin: auto;
    padding: 10px;
}
.download-btn {
    display: block;
    position: relative;
    margin: 0 10px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 7px;
}
.download-btn:hover {
    color: #555;
    background: #FFF;
    border: 1px solid #800;
}

/* CONTACT US PAGE*/
.form-new {
    width: 75%;
    margin-top: 20px;
    padding: 20px;
}
.cap {
    width: auto;
    font-size: 1.2em;
}
label {
    font-weight: bold;
}
form, input {
	width: inherit;
}

/* ANIMATION */
.display-slides {
    animation: .4s ease-out 1 slide_up;
    color: rgba(255, 255, 255, 1);
}

@keyframes slide_up {
    from {
        margin-top: 20%;
        color: rgba(255, 255, 255, 0.2);
        display: none;
    }
    to {
        margin-top: 0;
        color: rgba(255, 255, 255, 1);
        display: block;
    }
}