/*Fonts*/
@font-face{
    font-family: "lato-regular";
    src: url(../res/fonts/Lato-Regular.woff) format("woff"),
    url(../res/fonts/Lato-Regular.ttf) format("truetype"),
    url(../res/fonts/Lato-Regular.otf) format("opentype");
}
/*End Fonts*/
/*Commons*/
.font-bold{
    font-weight:bold;
}

.loading-screen{
    width:100%;
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    z-index:20;
    background-color:#fff;
    display:flex;
    justify-content: center;
    align-items: center;
}
.no-load{
    display:none !important;
}

.cover-section{
    width:100%;
    position:relative;
}
.cover__heading-div{
    width:100%;
    height:5rem;
    background-color:rgba(0, 0, 0, 0.70);
    position:absolute;
    bottom:0;
    left:0;
    font-family:'lato-regular', sans-serif;
    font-size:3rem;
    font-weight:bold;
    color:#fff;
    padding:0 1.5rem;
}
.view-product-btn{
    background-color:#fff;
    font-family:'lato-regular', sans-serif;
    font-size:1.5rem;
    padding:0.5rem 1rem 0.65rem 1rem;
    border:none;
    border-radius:5px;
    text-decoration: none;
    cursor:pointer;
    color:#000;
    text-align:center;
}
.view-product-btn:hover{
    opacity:0.75;
    color:#000;
}

#topBtn{
    position: fixed;
    bottom: 50px;
    right: 15px;
    text-align:center;
    font-size: 18px;
    border-radius: 50%;
    background-color:#999;
    border:none;
    display:none;
    transition: 0.8s;
    transition: background-color 0.4s;
    outline:none;
    z-index:30;
    padding:6px 7px 8px 7px;
}
#topBtn img{
    width:2rem;
    height:auto;
}
#topBtn:hover{
    background-color:#444;
}
/*End Commons*/

/*Responsiveness*/
@media (min-width:1361px){
    .cover-section{
        height:30rem;
    }

    .home-cover-logo{
        width:30rem;
    }

    .home__about-section{
        padding:1.5rem 25rem;
    }
}

@media (max-width:1360px){
    .cover-section{
        height:30rem;
    }

    .home-cover-logo{
        width:30rem;
    }

    .home__about-section{
        padding:1.5rem 15rem;
    }
}

@media (min-width:992px){
    .navbar-nav{
        margin-left:2rem;
    }
    .nav-item{
        margin-left:1rem;
        margin-right:1rem;
    }

    .home-cover-section{
        height:calc(100vh - 100px);
    }
    .home__cover-blur-div{
        background-attachment: fixed;
    }
    .home-cover-logo{
        position:fixed;
    }
    .home__products-section{
        height:45vh;
        background-attachment: fixed;
    }

    .product-main-div{
        padding:1.75rem;
    }
    .product-img-desktop{
        display:block;
    }
    .product-img-mobile{
        display:none;
    }
}

@media (max-width:991px){
    .navbar-nav{
        width:100%;
        text-align:center;
    }
    .nav-item{
        margin-bottom:1.5rem;
        border-radius:10px;
        border:solid 1px #fff;
    }
    .nav-item:first-child{
        margin-top:1.5rem;
    }
    .nav-item:last-child{
        margin-bottom:0;
    }

    .home-cover-section{
        height:35rem;
    }
    .home-cover-logo{
        width:28rem;
    }
    .home__about-section{
        padding:1.5rem 8rem;
    }
    .home__products-section{
        height:25rem;
    }

    .cover-section{
        height:25rem;
    }

    .product-main-div{
        padding:1.75rem 0;
    }
    .product-img-desktop{
        display:none;
    }
    .product-img-mobile{
        display:block;
    }
}

@media (min-width:768px){
    .main__view-product-btn{
        position:absolute;
        bottom:1.5rem;
        right:1.5rem;
    }

    .map-container{
        width:100%;
        height:20rem;
        padding:1.25rem;
    }
}

@media (max-width:767px){
    .view-product-btn{
        width:100%;
    }

    .home-cover-logo{
        width:25rem;
    }

    .home__about-section{
        padding:1.5rem 5rem;
    }

    .img__product-container{
        padding-bottom:1.25rem;
    }

    .main__view-product-btn{
        width:100%;
        position:relative;
        margin-left:auto;
        margin-right:auto;
        display:block;
    }

    .product-img-mobile{
        margin-bottom:1.25rem;
    }

    .map-container{
        width:100%;
        height:20rem;
        padding:0.5rem;
    }

    .footer__nav{
        margin-bottom:2rem;
    }
    .footer__contact{
        margin-bottom:1.5rem;
    }
    .footer__social-media{
        margin-bottom:2rem;
    }
}

@media (max-width:575px){
    .home-cover-logo{
        width:20rem;
    }

    .home__about-section{
        padding:1.5rem 3rem;
    }

    .cover-section{
        height:20rem;
    }
}

@media (max-width:400px){
    .home-cover-logo{
        width:15rem !important;
    }

    .home__about-section{
        padding:1.5rem 1.5rem;
    }

    .contact-list{
        font-size:1.10rem !important;
    }
    .contact-list-icon{
        width:1.5rem !important;
    }

    .address-col p{
        font-size:1rem !important;
        margin-left:1.75rem !important;
    }
}
/*End Responsiveness*/

/*Navbar*/
.navbar{
    z-index:10;
}

.bg-custom-blue{
    background-image:linear-gradient(#000b22, #000b22, #000c23, #000c23);
}

.navbar-brand{
    font-size:1.5rem;
    padding-bottom:0.5rem;
    padding-left:1rem;
}
.nav__brand-img{
    width:5rem;
    height:auto;
}

.nav-item{
    font-size:1.25rem;
    padding-bottom:0.25rem;
    font-family:'lato-regular', sans-serif;
}

.nav-item .active{
    color:#29abe2 !important;
}
/*End Navbar*/

/*Home Page*/
.home-cover-section{
    width:100%;
    /* background-image:url(../res/background.jpg);
    background-size:cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; */
    background-color:#000b22;
    display:flex;
    justify-content: center;
    align-items: center;
    position:relative;
}

@keyframes blur {
    from{
        -webkit-filter:blur(15px);
        -moz-filter:blur(15px);
        -o-filter:blur(15px);
        -ms-filter:blur(15px);
        filter:blur(15px);
    }
    to{
        -webkit-filter:blur(0px);
        -moz-filter:blur(0px);
        -o-filter:blur(0px);
        -ms-filter:blur(0px);
        filter:blur(0px);
    }
}
.home__cover-blur-div{
    width:100%;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    z-index:5;
    background-image:url(../res/background.jpg);
    background-size:cover;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-animation: blur 2s ease-in;
    -moz-animation: blur 2s ease-in;
    animation:blur 2s ease-in;
}

@keyframes fadein{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
.home-cover-logo{
    /* width:25rem; */
    height:auto;
    z-index:10;
    margin-bottom:10rem;
    -webkit-animation: fadein 2s ease-in;
    -moz-animation: fadein 2s ease-in;
    animation: fadein 2s ease-in;
}

.js-loading{
    animation-play-state: paused !important;
}

@keyframes arrow-down-anim {
    0% {
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -o-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      -webkit-transform: translateY(20px);
      -moz-transform: translateY(20px);
      -o-transform: translateY(20px);
      -ms-transform: translateY(20px);
      transform: translateY(20px);
      opacity: 0;
    }
}
#arrow-down-div{
    position:absolute;
    width:100%;
    bottom:0;
    text-align:center;
    padding:50px;
    opacity:1;
    z-index:20;
}
#arrow-down{
    width:50px;
    height:auto;
    animation: arrow-down-anim 1.5s infinite ease-in-out;
    -webkit-animation: arrow-down-anim 1.5s infinite ease-in-out;
    -moz-animation: arrow-down-anim 1.5s infinite ease-in-out;
    -ms-animation: arrow-down-anim 1.5s infinite ease-in-out;
    -o-animation: arrow-down-anim 1.5s infinite ease-in-out;
    z-index:20;
}

.home__about-section{
    width:100%;
    height:auto;
    text-align:center;
    background-image: linear-gradient(#000d24, #001e35, #002a41);
    color:#fff;
    font-family:'lato-regular', sans-serif;
    position:relative;
    z-index:15;
}

.home__products-section{
    width:100%;
    display:flex;
    align-items:flex-end;
    justify-content: center;
    padding:1.75rem 1rem;
    background-image:url(../res/sansan-products.jpg);
    background-size:cover;
    background-position: center center;
    background-repeat: no-repeat;
    position:relative;
    z-index:15;
}
/*End Home Page*/

/*Breadcrumb*/
.breadcrumbs-div{
    padding:0.75rem 1.75rem 0.05rem 1.75rem;
    background-color:#e6e6e6;
    font-family:'lato-regular', sans-serif;
}
/*End Breadcrumb*/

/*Products Page*/
#main-products-cover{
    background-image:url(../res/sansan-products.jpg);
    background-size:cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.product-main-div{
    width:100%;
    height:auto;
    background-image: linear-gradient(#000d24, #001e35, #002a41);
}

.product-container{
    padding:1.5rem;
    border:solid 1px #fff;
    border-radius:10px;
    position:relative;
    margin-bottom:2rem;
}
.img__product-container{
    width:100%;
    height:100%;
}
.desc__product-container{
    color:#fff;
    font-family:'lato-regular', sans-serif;
}
.desc__product-container > p{
    font-size:1.25rem;
}


.product-details-div{
    width:100%;
    height:auto;
    background-color:#fff;
    border-radius:10px;
    padding:0 1rem 0.75rem 1rem;
}

.img-small-col{
    padding:0.25rem 0 0.25rem 0.4rem;
}
.img-lg-col{
    padding:0.25rem 0.05rem 0.25rem 0.05rem;
}
.product-img-1,
.product-img-2{
    width:100%;
    height:auto;
    margin-top:0.5rem;
    border:solid 1px #adadad;
    cursor:pointer;
}
.product-img-1:hover,
.product-img-2:hover{
    border:solid 1px #000;
}

.product-img-1 img,
.product-img-2 img{
    width:100%;
    height:100%;
}
.product-img-lg{
    width:100%;
    height:100%;
    padding:0.5rem 0.5rem 0 0.5rem;
}
.product-img-lg img{
    width:100%;
    height:100%;
    border:solid 1px #000;
}

.img-col-mobile-left{
    padding:0 0.25rem 0 0.75rem;
}
.img-col-mobile-right{
    padding:0 0.75rem 0 0.25rem;
}
.product-img-1-mobile,
.product-img-2-mobile{
    width:100%;
    height:auto;
    margin-top:0.2rem;
    border:solid 1px #adadad;
    cursor:pointer;
}
.product-img-1-mobile:hover,
.product-img-2-mobile:hover{
    border:solid 1px #000;
}
.product-img-1-mobile img,
.product-img-2-mobile img{
    width:100%;
    height:100%;
}
.product-img-lg-mobile{
    width:100%;
    height:100%;
    padding:0.5rem 0;
    margin-top:0.4rem;
}
.product-img-lg-mobile img{
    width:100%;
    height:100%;
    border:solid 1px #000;
}

.prod-desc-col{
    padding:0;
}
.product-desc-container{
    padding:0.3rem 0.5rem 0.5rem 0.5rem;
    font-family:'lato-regular', sans-serif;
}
.product-desc-title{
    font-weight:bold;
}

.product-contact-div{
    padding:1.25rem 0;
    font-family:'lato-regular', sans-serif;
}
.product-form-div{
    font-family:'lato-regular', sans-serif;
}
/*End Products Page*/

/*Contact Page*/
#contact-cover{
    background-image:url(../res/contact-cover.jpg);
    background-size:cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.contact__main-div{
    background-color:#fff;
    border-radius:10px;
    padding:1.5rem;
}

.contact__details-section{
    width:100%;
    margin-bottom:1rem;
    padding-bottom:1rem;
    border-bottom:solid 1px #000;
}

.contact-list{
    font-size:1.25rem;
    list-style:none;
    padding-left:0;
}
.contact-list li{
    margin-bottom:1rem;
}
.contact-list-icon{
    width:2.25rem;
    height:auto;
    margin-bottom:0.25rem;
}

.social-media-link{
    text-decoration: none;
    color:#000;
}

.contact__form-section{
    width:100%;
    margin-bottom:1rem;
    padding-bottom:1rem;
    border-bottom:solid 1px #000;
}

.form-group{
    margin-bottom:1.25rem;
}
label{
    font-size:1.25rem;
}
.form-info,
.form-required{
    color:#ff0000;
    font-family:'lato-regular', sans-serif;
}
.submit-form-btn{
    width:100%;
    height:3rem;
    background-color:#000b22;
    color:#fff;
    border:none;
    border-radius:5px;
    font-size:1.5rem;
}
.submit-form-btn:hover{
    opacity:0.75;
}

.address-col p{
    font-size:1.25rem;
    margin-left:2.5rem;
}

.map-div{
    width:100%;
    height:100%;
    border:solid 1px #000;
}
/*End Contact Page*/

/*Footer*/
.footer-div{
    width:100%;
    height:auto;
    border-top:solid 1px #fff;
    background-image:linear-gradient(#002941, #002f47);
    padding:1rem;
    color:#fff;
    font-family:'lato-regular', sans-serif;
    position:relative;
    z-index:15;
}

.footer__contact-col p{
    margin-left:2rem;
    margin-top:-1rem;
}

.footer-list{
    font-size:1rem;
    list-style:none;
    padding-left:0;
}
.footer-list li{
    margin-bottom:0.75rem;
}
.footer-list-icon{
    width:1.75rem;
    height:auto;
    margin-bottom:0.25rem;
}

.footer-link{
    text-decoration: none;
    color:#fff;
}

.footer__copyright{
    width:100%;
    padding:0.1rem;
}
/*End Footer*/