.row{margin: 0px ;padding: 0px}

body{font-family: 'Roboto Condensed', sans-serif;
}

.slider-caption{background-color: rgba(0,0,0,0.5);border-radius: 7px;}



nav a{border-right: .7px solid rgba(255,255,255,0.5);
}
.bg-op{background-color: rgba(200,0,0,0.2);margin-left: 20px;border-radius: 10px}

@media(min-width:992px){

    .logo-about{margin-bottom: 10%}

    nav a{ font-size: 14px;}
    nav{position: fixed;  background-color: rgba(0,0,0,0.5); border-bottom-right-radius: 7px;border-bottom-left-radius: 7px ;width: 80%;margin: auto;} 
    .links{margin-left:45% }

}



.bg-abs{background-image: url(../images/fire_prevention.jpg);background-size: cover; background-attachment: fixed}
@media(max-width:991px){

    .fill{display: none}
    nav{background-color:rgba(0,0,0,0.5); margin: inherit;}
    .logo{display: none}

}
/** temp**/

.bg-proj {
    background-image: url(../images/fire-alarm.jpg);background-size: cover; background-attachment: fixed
}
.service-div { text-align: center;margin: auto;
    width: 170px;
    height: 170px;
    font-size: 55px;
    border-radius:10px ;transition: box-shadow 0.1s; 
    transition: font-size .2s;
    background-color: rgba(0,0,0,0.7)
}

.service-div:hover{box-shadow: 0px 0px 20px #000000; }

#services-id {transition-timing-function: ease-in;}
.service-div:hover {
    font-size: 65px;
    color: black;background-color:rgba(0,0,0,1)
}
@media (min-width: 768px){

    .slide-brand{height: 120px}

}

.soc{  font-size: 25px ;letter-spacing: 6px ; background-color: rgba(0,0,0,0.9)}
.social:hover{color: darkgrey}

.aboutus{background-color: rgba(0,0,0,0.7);border-radius: 10px}
.contactus{background-image: url(../images/4k_material_red_light-wallpaper-1366x768.jpg);
background-size: cover;
background-position:center;
height: 100vh;
}
.address{background-color: rgba(0,0,0,0.7);border-radius: 10px; }
.emp{width: 170px; height: 170px ; border-radius: 50%}


@media(max-width:768px){
    .emp-div h5{font-size: 85%; text-align: center}
    .emp-div p{font-size: 85%; text-align: center}
    .address h5 p{font-size: 50%}
    .address{margin-bottom: 2px}
    .service-div { 
        width: 80px;
        height: 80px;
    font-size: 40px}
    .service-div h5 {font-size: 20%}
    .bg-abs{color: white}
    #services h2,#about h2,#portfolio h2,#portfolio h4{font-size: 120%}
    .fill{display: none}
    .emp{width: 80px ;height: 80px}
}




.slideanim {visibility:hidden;}
.slidek {
    /* The name of the animation */
    animation-name: slidek;
    -webkit-animation-name: slidek; 
    /* The duration of the animation */
    animation-duration: 1.3s; 
    -webkit-animation-duration: 1.3s;
    /* Make the element visible */
    visibility: visible; 
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slidek {
    0% {
        opacity: 0;
        transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        transform: translateY(0%);
    } 
}
@-webkit-keyframes slidek {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    } 
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }




}


/***********Slider***********/

.slider-img{
    height: 100vh;
    object-fit: cover;
    object-position: center;
}

#about{height: 100vh;}





    /*.logo {
    color: #f4511e;
    font-size: 200px;
}
    .thumbnail {
    padding: 0 0 15px 0;
    border: none;
    border-radius: 0;
}
    .thumbnail img {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
}
    .carousel-control.right, .carousel-control.left {
    background-image: none;
    color: #f4511e;
}
    .carousel-indicators li {
    border-color: #534642;
}
    .carousel-indicators li.active {
    background-color: #f4511e;
}
    .item h4 {
    font-size: 19px;
    line-height: 1.375em;
    font-weight: 400;
    font-style: italic;
    margin: 70px 0;
}
    .item span {
    font-style: normal;
}
    .panel {
    border: 1px solid #f4511e; 
    border-radius:0 !important;
    transition: box-shadow 0.5s;
}
    .panel:hover {
    box-shadow: 5px 0px 40px rgba(0,0,0, .2);
}
    .panel-footer .btn:hover {
    border: 1px solid #f4511e;
    background-color: #fff !important;
    color: #f4511e;
}
    .panel-heading {
    color: #fff !important;
    background-color: #f4511e !important;
    padding: 25px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
    .panel-footer {
    background-color: white !important;
}
    .panel-footer h3 {
    font-size: 32px;
}
    .panel-footer h4 {
    color: #aaa;
    font-size: 14px;
}
    .panel-footer .btn {
    margin: 15px 0;
    background-color: #f4511e;
    color: #fff;
}


    h2 {
    font-size: 24px;
    text-transform: uppercase;
    color: #303030;
    font-weight: 600;
    margin-bottom: 30px;}
    h4 {
    font-size: 19px;
    line-height: 1.375em;
    color: #303030;
    font-weight: 400;
    margin-bottom: 30px;
}  

    footer .glyphicon {
    font-size: 20px;
    margin-bottom: 20px;
    color: #f4511e;
}
    .slideanim {visibility:hidden;}
    .slide {
    animation-name: slide;
    -webkit-animation-name: slide;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    visibility: visible;
}
    @keyframes slide {
    0% {
    opacity: 0;
    transform: translateY(70%);
} 
    100% {
    opacity: 1;
    transform: translateY(0%);
}
}
    @-webkit-keyframes slide {
    0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
} 
    100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
}
}
    @media screen and (max-width: 768px) {
    .col-sm-4 {
    text-align: center;
    margin: 25px 0;
}
    .btn-lg {
    width: 100%;
    margin-bottom: 35px;
}
}
    @media screen and (max-width: 480px) {
    .logo {
    font-size: 150px;
}
}

    i:hover{color: white}