/==========================================================================//==========================================================================//[]//==========================================================================//==========================================================================/.margin-top-100{margin-top:100px}.margin-top-30{margin-top:30px}.section-padding{padding-top:20px; padding-bottom:30px; }body{font-family:'Roboto',sans-serif;font-size:14px;color:#676767;background:#f9f9f9;line-height:1.6}input:focus,textarea:focus,button:focus,a:focus,select:focus{outline:none}input[type="text"],input[type="email"],input[type="number"],select{border:1px solid #cacaca;padding:7px;padding:10px;border-radius:5px}img{max-width:100%;height:auto}#owl-demo .item img{display:block;width:100%;height:auto}.top-bar{background-color:#1F2D3D;font-size:13px;height:45px;line-height:45px;transition:all 0.2s ease 0s}.contact-details{float:left;height:100%}.top-bar ul{list-style:outside none none;margin:0;padding:0}.top-bar ul li{display:inline-block;margin-right:1px}.top-bar ul.contact-details li{margin-right:10px}.top-bar,.top-bar ul li,.top-bar ul li a{color:#fff}.top-bar .contact-details li i,.top-bar .header-social a{background-color: #3d478e;display:inline-block;font-size:14px;height:2em;line-height:2em;text-align:center;transition:all 0.3s ease-out 0s;width:2em;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;border-radius:4px;}.top-bar .contact-details li i{margin-right:10px}.top-bar .header-social{text-align:right;float:right;height:100%}.top-bar .header-social li:last-child{margin-right:0}.top-bar .header-social li a:hover{background-color:#262629;color:#fff}.main-header{background-color:#fff}.main-header .navbar-brand{color:#262629;font-size:29px;font-weight:900;padding:8px 0}.main-header .navbar{padding:0;padding-bottom:5px}.main-header .navbar-brand span{color: #5f5b87;}.main-header .navbar-dark .navbar-brand:focus,.navbar-dark .navbar-brand:hover{color:#262629}.main-header .navbar-dark .navbar-nav .nav-link{color:#615d89;font-size:16px;display:inline-block;padding:30px 26px 0 20px;font-weight:500}.main-header .navbar-dark .navbar-nav .nav-link:hover{color: #000;transition:.4s;}.main-header .navbar-dark .navbar-nav .active{color: #000;}.header-search{font-size:18px}.drop-menu{position:relative;display:inline-block;z-index:99;transition:.4s}.drop-menu ul{padding:0;margin:0;list-style:none}.drop-menu ul{position:absolute;visibility:hidden;top:150%;background:#fff;width:200px;opacity:0;border-top:2px solid #EE4F1E;transition:0.8s}.drop-menu ul li a{display:inline-block;padding:10px 20px;width:100%;text-decoration:none;color:#111;transition:0.4s}.drop-menu ul li a:hover{width:100%;color:#EE4F1E}.drop-menu:hover ul{visibility:visible;opacity:1;top:100%}.search-area{position:fixed;display:inline-block;z-index:99;right:-427px;width:427px;background: rgb(121, 136, 245);padding:0 39px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.3s cubic-bezier(0,.57,.74,1.06);-webkit-transition:all 0.3s cubic-bezier(0,.57,.74,1.06);-moz-transition:all 0.3s cubic-bezier(0,.57,.74,1.06);-o-transition:all 0.3s cubic-bezier(0,.57,.74,1.06);}.search-box .form-control{padding:10px 15px;width:349px;margin:30px 0;background:rgba(0,0,0,.5);color:#fff;border:0}.search-box .form-control:focus{-moz-box-shadow:none;-webkit-box-shadow:none;-ms-box-shadow:none;-o-box-shadow:none;box-shadow:none}.search-box i.fa{position:absolute;right:53px;font-size:18px;color: #5f5b87;bottom:42px;}.search-area.toggled{right:0}.new-search{display:none}.home-top-slider div:not(.owl-nav):not(.owl-dots){height:100%}.home-top-slider .slider-content{background-size:cover;background-repeat:no-repeat;padding:100px 0;}.home-top-slider .slider-content{position:relative;z-index:0}.home-top-slider .slider-content:before{content:'';position:absolute;top:0;left:0;background:#000;width:100%;height:100%;opacity: 0;z-index:-1;}.home-top-slider.owl-theme .owl-nav{margin:0}.home-top-slider.owl-theme .owl-nav [class*=owl-prev],.home-top-slider.owl-theme .owl-nav [class*="owl-next"]{position:absolute;top:44%;display:inline-block;width:50px;height:50px;line-height:40px;font-size:30px;background-color: rgb(255, 255, 255);color:rgba(0,0,0,.4);-moz-transition:0.4s linear;-webkit-transition:0.4s linear0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;}.home-top-slider.owl-theme .owl-nav [class*=owl-prev]{left:25px}.home-top-slider.owl-theme .owl-nav [class*="owl-next"]{right:25px}.home-top-slider.owl-theme .owl-nav [class*="owl-"]:hover{background: #5f5b87 none repeat scroll 0 0;color:#FFF;text-decoration:none;}.slider-text-content{color:#fff;font-size:18px;font-weight:300;line-height:28px;display:table-cell;vertical-align:middle}.slider-text-content h4.slider-small-title{font-size:15px;font-weight:700;line-height:19px;margin:0;padding-left:8px;text-transform:uppercase;letter-spacing:1px}.slider-text-content h1.slider-big-title{font-size:60px;font-weight:700;line-height:70px;margin:10px 0 25px}.slider-text-content h1.slider-big-title span{color: #5f5b87;}.learn-btn{border: 1px solid #5f5b87;padding:15px 35px;display:inline-block;text-transform:uppercase;color:#fff;font-weight:500;background-color: #5f5b87;font-size:15px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-moz-transition:0.4s linear;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;margin-top:25px;}.learn-btn:hover{background-color:#fff;color:#EE4F1E;text-decoration:none;border-color:#fff}.services-area{background-color:#fff}.services-single-box{text-align:center;background:#fff;padding:30px 40px;box-shadow:0 5px 20px rgba(0,0,0,.2);-moz-box-shadow:0 5px 20px rgba(0,0,0,.2);-webkit-box-shadow:0 5px 20px rgba(0,0,0,.2);-ms-box-shadow:0 5px 20px rgba(0,0,0,.2);-o-box-shadow:0 5px 20px rgba(0,0,0,.2);margin-top:30px;transition:.5s}.services-single-box:hover{box-shadow:0 5px 5px rgba(0,0,0,.2);-moz-box-shadow:0 5px 5px rgba(0,0,0,.2);-webkit-box-shadow:0 5px 5px rgba(0,0,0,.2);-ms-box-shadow:0 5px 5px rgba(0,0,0,.2);-o-box-shadow:0 5px 5px rgba(0,0,0,.2)}.services-icon i.fa{font-size:85px;color: #5f5b87;position:relative;}.services-icon img{width:85px}.services-single-box h4{font-size:18px;padding:20px 0 10px}.project-title h2{margin-bottom:20px!important;font-size:26px;font-weight:700;margin-bottom:50px;position:relative}.project-title p{font-size:18px; width:95%!important; max-width:100%!important}.project-title h2 span{color: #5f5b87;}.project-title h2:after{position:absolute;content:'';top:138%;left:50%;width:100px;height:2px;background: #5f5b87;display:inline-block;margin-left:-50px;}.project-title h2:before{position:absolute;content:'';top:117%;left:50%;width:15px;height:15px;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;border-radius:50%;background: #5f5b87;margin-left:-8px;}.project-single-box{background:#fff;border-radius:5px;margin-bottom:10px;box-shadow:0 0 10px rgba(0,0,0,.2);-moz-box-shadow:0 0 10px rgba(0,0,0,.2);-webkit-box-shadow:0 0 10px rgba(0,0,0,.2);-ms-box-shadow:0 0 10px rgba(0,0,0,.2);-o-box-shadow:0 0 10px rgba(0,0,0,.2)}.project-single-box:hover{box-shadow:0 0 20px rgba(0,0,0,.2);-moz-box-shadow:0 0 20px rgba(0,0,0,.2);-webkit-box-shadow:0 0 20px rgba(0,0,0,.2);-ms-box-shadow:0 0 20px rgba(0,0,0,.2);-o-box-shadow:0 0 20px rgba(0,0,0,.2)}.project-single-box,.project-photo img{border-top-left-radius:5px;border-bottom-left-radius:5px}.project-content h4{font-size: 15px;margin:0;padding:20px 0 30px;position:relative;font-weight:500;color:#111;}.project-content h4:before{position:absolute;content:'';top:73%;left:0;width:100px;height:2px;background: #5f5b87;}.project-content p{max-width:100%;font-size: 14px;margin:0;}.project-content a{display:inline-block;text-decoration:none;color: #5f5b87;padding:10px 0;font-weight:500;font-size:15px;-moz-transition:0.4s linear;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;}.project-content a:hover{color:#111}.project-content a i.fa{padding-left:6px;font-size:16px}.second-project-single-box{position:relative;margin-top:30px}.second-project-single-box img{width:100%;height:100%;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px}.project-when-hover{position:absolute;top:0;left:0;right:0;text-align:center;background:rgba(255,255,255,.5);width:100%;height:100%;color:#fff;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-moz-transition:1s linear;-webkit-transition:1s linear;-moz-transition:1s linear;-ms-transition:1s linear;-o-transition:1s linear;transition: .3s linear;}.second-project-single-box:hover .project-when-hover{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}.project-when-hover a{padding-top:120px;display:inline-block;text-decoration:none;color:#111;font-size:20px;font-weight:500;-moz-transition:0.4s linear;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear}.project-when-hover a:hover{color: #5f5b87;}.project-when-hover p{padding-top:10px;color:#676767;font-size:13px}.link-the-project{position:relative}.link-the-project::after{position:absolute;content:'';left:0;width:85px;height:1px;background: #3d478e;right:0;margin:35px auto;}.counter-area{background-image:url(../img/home-bg1.jpg);padding:30px 0;background-size:cover;position:relative}.counter-area:before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:#111;opacity:.5}.counter-single-box{border:1px solid rgba(255,255,255,.3);padding:17px 4px;background-color:rgba(0,0,0,.3);color:#fff}.counter-single-box i.fa{font-size:35px;color: #5f5b87;}.counter-single-box h2{margin:0;font-size:40px;font-weight:400}.counter-single-box p{font-size:18px;margin:0;text-transform:uppercase;padding:10px 0;color:#fff}.counter-single-box p span{color: #5f5b87;}.mission-area{background:#fff}.mission-content{margin-bottom:0;}.mission-content h4{font-size:16px;font-weight:500;color: #3d478e;}.mission-content p{font-size:16px;line-height:28px;padding-top:10px;margin:0 auto}.mission-content h2{font-size:31px;line-height:39px;font-weight:500;color: #676767;}.mission-progress-bar{margin-top:30px}.skillbar{position:relative;display:block;margin-bottom:45px;width:100%;background:#eee;height:10px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;-webkit-transition-property:width,background-color;-moz-transition-property:width,background-color;-ms-transition-property:width,background-color;-o-transition-property:width,background-color;transition-property:width,background-color}.skillbar-title{position:absolute;top:-28px;left:0;font-weight:500;font-size:14px;color:#111;background:transparent;-webkit-border-top-left-radius:3px;-webkit-border-bottom-left-radius:4px;-moz-border-top-left-radius:3px;-moz-border-bottom-left-radius:3px;border-top-left-radius:3px;border-bottom-left-radius:3px}.skillbar-bar{height:10px;width:0;background:#6adcfa;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px}.skill-bar-percent{position:absolute;right:10px;top:-30px;font-size:13px;height:35px;line-height:35px;color:#111}.company-logo-area{background:url(../img/company-logo-bg.jpg);background-size:cover;padding:40px 0;position:relative;}.company-logo-area:before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background: #5f5b87;opacity:.2;}#client-logo img{-moz-transition:0.4s linear;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear}#client-logo img:hover{opacity:.3}.contact-area{background:#fff}.contact-info{margin-bottom:30px}.contact-info h3{font-size:25px;color:#111}.contact-info p{font-size:16px;padding-top:0px}.contact-info ul{padding:0;margin:0;list-style:none;padding-top:10px}.contact-info ul li{padding-bottom:15px}.contact-info ul li i.fa{padding-right:8px;font-size:19px;color: #5f5b87;}.contact-form .form-group{margin-bottom:0}.contact-form .form-control{margin-bottom:10px}.contact-form .form-control:focus{border-color:transparent;border-color:#EE4F1E;-moz-box-shadow:none;-webkit-box-shadow:none;-ms-box-shadow:none;-o-box-shadow:none;box-shadow:none}.contact-btn{padding:15px 35px;background: #5f5b87;border:0;text-transform:uppercase;font-weight:500;color:#fff;cursor:pointer;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;border-radius:5px;-moz-transition:0.4s linear;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;}button.contact-btn:hover{background:#111}.cta-area{background: #5f5b87;padding:40px 0;}.cat-content h2{font-size:25px;font-weight:400;line-height:45px;padding-top:10px;color:#fff}.cta-button{text-align:right;margin-top:3px}.cta-btn{padding:18px 40px;display:inline-block;text-transform:uppercase;font-weight:500;border-radius:5px;background:#fff;color:#111;-moz-transition:0.4s linear;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear}.cta-btn:hover{background:#111;color:#fff;text-decoration:none}.hero-area{padding:110px 0;background-size:cover;background-repeat:no-repeat}.hero-info h2{font-size:30px;margin-bottom:10px;color:#000}.hero-info a{text-decoration:none;color:#000;font-size:16px;-moz-transition:0.4s linear;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear}.hero-info a:hover{color: #5f5b87;}.hero-info a i.fa{padding:0 7px;color: #000;}.hero-info span{color: #000;font-size:16px;}.about-content h5{font-size:18px;color: #5f5b87;margin-bottom:10px;}.about-content h2{font-size:30px;color:#111;margin-bottom:25px}.about-content p{font-size:16px;line-height:27px;margin:0 auto}.our-client-area{background:url(../img/home-bg1.jpg);background-size:cover}.about-client-info{background:#fff;padding:30px 40px;border-radius:5px;margin:30px 0 0}.about-client-info img{width:74px!important;border-radius:50%;border: 2px solid #5f5b87;text-align:center;margin:0 auto;}.about-client-content h5{font-size:18px;margin-top:30px;text-align:center}.about-client-content h6{font-size:17px;font-weight:300;text-align:center;margin-bottom:18px;color: #3c468d;}.about-client-content p{font-size:16px;line-height:28px;margin:0;text-align:center}.about-client-content p:before{position:absolute;content:'\f10d';margin-top:-7px;margin-left:-23px;font-family:fontawesome;color: #5f5b87;}.about-client-content p:after{position:absolute;content:'\f10e';font-family:fontawesome;color: #5f5b87;margin-top:7px;margin-left:8px;}.our-team-info{background:#fff;margin-top:30px;border-radius:5px;-moz-box-shadow:0 0 8px rgba(0,0,0,.2);-webkit-box-shadow:0 0 8px rgba(0,0,0,.2);-ms-box-shadow:0 0 8px rgba(0,0,0,.2);-o-box-shadow:0 0 8px rgba(0,0,0,.2);box-shadow:0 0 8px rgba(0,0,0,.2);position:relative}.our-team-info:hover{-moz-box-shadow:0 0 8px rgba(0,0,0,.7);-webkit-box-shadow:0 0 8px rgba(0,0,0,.7);-ms-box-shadow:0 0 8px rgba(0,0,0,.7);-o-box-shadow:0 0 8px rgba(0,0,0,.7);box-shadow:0 0 8px rgba(0,0,0,.7);-moz-transition:0.4s linear;-webkit-transition:0.5s linear;-moz-transition:0.5s linear;-ms-transition:0.5s linear;-o-transition:0.5s linear;transition:0.5s linear}.team-img img{border-top-left-radius:5px;border-top-right-radius:5px;width:100%}.our-team-when-hover ul{padding:0;margin:0;list-style:none}.our-team-when-hover ul li{display:inline-block}.our-team-when-hover ul li a{display:inline-block;padding:0 0 0 0;width:30px;height:30px;background: #5f5b87;border-radius:5px;color:#fff;text-align:center;line-height:30px;margin-right:5px;-moz-transition:0.4s linear;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;}.our-team-when-hover ul li a:hover{background:rgba(0,0,0,.1)}.our-team-when-hover{position:absolute;top:0;left:0;right:0;text-align:center;line-height:292px;font-size:14px;background:rgba(0,0,0,.5);border-top-left-radius:5px;border-top-right-radius:5px;transform:scale(0);-moz-transition:1s linear;-webkit-transition:1s linear;-moz-transition:1s linear;-ms-transition:1s linear;-o-transition:1s linear;transition:1s linear}.our-team-info:hover .our-team-when-hover{transform:scale(1)}.our-team-content{padding:20px 20px}.our-team-content h5{font-size:18px}.our-team-content h6{font-size:17px;font-weight:300;color: #3d478e;}.our-team-content p{max-width:80%;margin:0 auto;padding-top:12px}.blog-single-box img{width:100%;height:100%;-moz-transition:1s linear;-webkit-transition:1s linear;-moz-transition:1s linear;-ms-transition:1s linear;-o-transition:1s linear;transition:1s linear}.blog-single-box:hover img{transform:scale(1.1)}.blog-single-box{background:#ffff;margin-top:30px;overflow:hidden;box-shadow:0 10px 30px 0 rgba(50,50,50,.16);-moz-transition:1s linear;-webkit-transition:1s linear;-moz-transition:1s linear;-ms-transition:1s linear;-o-transition:1s linear;transition:1s linear}.blog-single-box:hover{-moz-box-shadow:none;-webkit-box-shadow:none;-ms-box-shadow:none;-o-box-shadow:none;box-shadow:none}.blog-content{padding:20px 10px}.blog-content ul{padding:0;margin:0;list-style:none}.blog-content ul li{padding:5px 15px 10px 0;display:inline-block;font-weight:500}.blog-content ul li i.fa{padding-right:8px;color: #5f5b87;}.blog-bottom{border-top:1px solid rgba(0,0,0,.1)}.blog-bottom a{position:absolute;right:25px;display:inline-block;margin-top:-25px;color:#676767;font-size:15px;-moz-transition:0.4s linear;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear}.blog-bottom a:hover{color: #5f5b87;text-decoration:none;}.blog-bottom a i.fa{padding-left:10px}.blog-bottom p{font-size:15px;position:relative;margin:0;padding-top:10px}.blog-bottom p i.fa{padding-right:10px}.contact-address-bar{text-align:center;margin-top:30px}.contact-address-bar i.fa{font-size:45px;border: 2px solid #5f5b87;width:80px;height:80px;margin-bottom:20px;border-radius:50%;text-align:center;line-height:80px;color: #5f5b87;}.contact-text{top:15px;left:113px}.contact-text h5{font-size:20px}.contact-text p{margin:0}.contact-message{background:url(../img/home-bg1.jpg);background-size:cover}.message-btn{width:100%}.contact-btn.message-btn:hover{background:#fff;color:#111}#map{display:block;width:100%;height:300px}.btn-set{width:45px;height:45px;background-color:rgba(0,0,0,.5);background:#fff;box-shadow:0 0 18px rgba(0,0,0,.5);color: #3d478e;font-size:25px;text-align:center;border-radius:5px;line-height:45px;cursor:pointer;position:fixed;right:30px;bottom:55px;display:none;z-index:99;-moz-transition:0.4s linear;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;}.btn-set:hover{background-color: #5f5b87;color:#fff;}.footer-area{background:#212121;color:#969696;padding-top:80px}.footer-info h2 a{color:#fff;font-size:29px;font-weight:900;padding-bottom:20px;text-decoration:none;display:inline-block}.footer-info h2 span{color: #5f5b87;}.footer-info{margin-bottom:30px}.footer-info h3{font-size:20px;padding-bottom:30px;position:relative;color:#fff}.footer-info h3:before{position:absolute;content:'';top:60%;left:0;width:50px;height:2px;background: #5f5b87;}.footer-link,.footer-social{padding:0;margin:0;list-style:none}.footer-social{margin-top:43px}.footer-link li a{display:inline-block;padding:0 0 9.7px;font-size:16px;text-decoration:none;color:#ccc}.footer-link li a i.fa{padding-right:6px}.footer-link li a:hover i.fa{color: #5f5b87;}.footer-info p{color:#ccc;font-size:15px;line-height:26px;-moz-transition:0.4s linear;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear}.post-title a p:hover{color: #5f5b87;}.post-content{margin-bottom:5px;display:inline-block}.post-img{float:left}.post-img img{width:70px}.post-title{float:right;width:68%}.post-title a p{display:inline-block;text-decoration:none;line-height:24px;color:#fff}.post-title p{margin:0}.post-title span{color:#ccc;font-size:13px}.footer-info form{margin-top:28px}.footer-info .form-control{background-color:rgba(54,54,54,1);border-color:rgba(54,54,54,1);color:#fff;margin-bottom:10px}.footer-info .form-control:focus{background-color:rgba(54,54,54,1);border-color:rgba(54,54,54,1);-moz-box-shadow:none;-webkit-box-shadow:none;-ms-box-shadow:none;-o-box-shadow:none;box-shadow:none}input[type="submit"]{padding:10px 0;cursor:pointer;background: #5f5b87!important;}.footer-social li{display:inline-block}.footer-social li a{display:inline-block;width:30px;height:30px;background: #5f5b87;text-align:center;border-radius:5px;line-height:30px;margin-right:3px;color:#fff!important;-moz-transition:0.4s linear;-webkit-transition:0.4s linear;-moz-transition:0.4s linear;-ms-transition:0.4s linear;-o-transition:0.4s linear;transition:0.4s linear;}.footer-social li a:hover{background:#1F2D3D}.footer-bottom p{font-size:15px;padding-top: 16px;}.footer-bottom p span{color:#5f5baf}.footer-bottom p span span{color: #5f5baf;}.footer-bottom:before{position:absolute;content:'';top:40px;left:0;width:100%;height:1px;/* background: #5f5b87; */}.footer-bottom{position:relative}

@media only screen and ( max-width: 500px) {
  .nav-mobile {
    padding-left:  20px !important;
    padding-right:  20px !important;
  }
}

.shadow-all-card {box-shadow: 0 0 10px rgba(0,0,0,.2);}

/* =========== NAVBAR ============ */
.dropdown:hover>.dropdown-menu { display: block; }
.dropdown-toggle::after {display:none;}  /* remove expand toggle-dropdown */
.menu-submenu {top: 52.5px; left: 15px; padding: unset;}
.menu-submenu .dropdown-item:hover {background-color: #5f5b87; color: #ffff;}
.margin-right-rev {margin-left: auto !important;margin-right: 0px!important;}

@media only screen and ( max-width: 500px) {
  .menu-submenu {padding: 10px 0 10px 20px; top: 52.5px; left: 15px; border: none!important; }
  .dropdown-item {padding: 10px 0 10px 20px!important}
}

/* =========== NAVBAR ============ */

.color-text-footer {color:#8a8a8a;}
.background-grey {background: #f9f9f9;}
.background-white {background: #ffffff}
.link-black {color: black !important;}
img.logo-img {width: 90%;}
.navbar-brand {width: 13%}

@media only screen and ( max-width: 500px) {
  .background-white {background: #ffffff; padding-left: 10px}
  .navbar-brand {width: 34%}
}

#myBtn {
    display: none;
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 70px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #5f5b87; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 0 10px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 30px; /* Increase font size */
    box-shadow: 0 0 3px 1px gray;
}

@media only screen and ( max-width: 500px) {
  #myBtn {
      display: none;
      position: fixed; /* Fixed/sticky position */
      bottom: 10px; /* Place the button at the bottom of the page */
      right: 15px; /* Place the button 30px from the right */
      z-index: 99; /* Make sure it does not overlap */
      border: none; /* Remove borders */
      outline: none; /* Remove outline */
      background-color: #7988f5; /* Set a background color */
      color: white; /* Text color */
      cursor: pointer; /* Add a mouse pointer on hover */
      padding: 10px; /* Some padding */
      border-radius: 5px; /* Rounded corners */
      font-size: 14px; /* Increase font size */
      box-shadow: 0 0 3px 1px gray;
  }
}

#myBtn:hover {
    background-color: #474188; /* Add a dark-grey background on hover */
}


/* =========== SLIDER =========== */
/* SLIDE */
/* .slider-caption { padding: 25% 0 0 0;}
.slider-caption p {line-height: 25px; text-align: center; color: #0c0b0b; height:5em ;padding-top: 1%; padding-left: 7%;padding-right: 7%; background: rgba(255, 255, 255, 0.55) ;width: 70%;position: absolute;bottom: -17%; left: 15%; border-radius: 11px; box-shadow: 0 15px 10px 0 #0000002f; }
@media only screen and ( max-width: 500px) {
  .slider-caption { padding: 50% 0 0 0;}
  .slider-caption p {text-align: center; color: #0c0b0b; height:6em ; line-height:1.2; padding-top: 1%; padding-left: 2%;padding-right: 2%;background: rgba(255, 255, 255, 0.75);width: 94%;position: absolute;bottom: -1%; left: 3%; border-radius: 5px; box-shadow: 0 15px 10px 0 #0000002f;}
} */

/* FADE */
.slider-caption { padding: 25% 0 0 0;}
.slider-caption p {text-align: center; color: #0c0b0b; height:7em ;padding-top: 1%; padding-left: 7%;padding-right: 7%; background: rgba(255, 255, 255, 0.55) ;width: 70%;position: absolute;bottom: 5%; left: 15%; border-radius: 11px; box-shadow: 0 15px 10px 0 #0000002f; }
@media only screen and ( max-width: 500px) {
  .slider-caption { padding: 50% 0 0 0;}
  .slider-caption p {text-align: center; color: #0c0b0b; height:6em ; line-height:1.2; padding-top: 1%; padding-left: 2%;padding-right: 2%;background: rgba(255, 255, 255, 0.75);width: 94%;position: absolute;bottom: -1%; left: 3%; border-radius: 5px; box-shadow: 0 15px 10px 0 #0000002f;}
}

.home-top-slider .slider-content {height: 100%;margin-bottom: 100px}
@media only screen and ( max-width: 500px) {
  .padding-slider {padding-top: 55%!important};
  .home-top-slider .slider-content {height: 100%;margin-bottom: 30px}
}
.home-top-slider.owl-theme .owl-nav [class*="owl-prev"], .home-top-slider.owl-theme .owl-nav [class*="owl-next"]{
    position: absolute;
    top: 34%;
    display: inline-block;
    width: 3%;
    height: 7%;
    line-height: 20%;
    font-size: 150%;
    color: grey;
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    background-color: #ffffffca;
    color: rgba(0, 0, 0, .4);
    -moz-transition: 0.4s linear;
    -webkit-transition: 0.4s linear 0.4s linear;
    -moz-transition: 0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linear;
    transition: 0.4s linear;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    border-radius: 5px;}

.home-top-slider.owl-theme .owl-nav [class*=owl-prev] {
    left: 2%;
}
.home-top-slider.owl-theme .owl-nav [class*="owl-next"] {
    left: 94%;
}

@media only screen and ( max-width: 500px) {
.home-top-slider .slider-content {padding: unset;}
  .home-top-slider.owl-theme .owl-nav [class*=owl-prev], .home-top-slider.owl-theme .owl-nav [class*="owl-next"] {
      position: absolute;
      top: 33%;
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      font-size: 15px;
      background-color: #ffffffca;
      color: rgba(0, 0, 0, .4);
      -moz-transition: 0.4s linear;
      -webkit-transition: 0.4s linear 0.4s linear;
      -moz-transition: 0.4s linear;
      -ms-transition: 0.4s linear;
      -o-transition: 0.4s linear;
      transition: 0.4s linear;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      border-radius: 5px;}
  .home-top-slider.owl-theme .owl-nav [class*=owl-prev] {
      left: 2%;
  }
  .home-top-slider.owl-theme .owl-nav [class*="owl-next"] {
      left: 90%;
  }
}

.slider-caption .captio-slider-1 {position: absolute; padding-top: 1.5%; font-size: 22px;font-weight: bold; color: #5f5b87!important;}
.slider-caption .captio-slider-2 {position: absolute; padding-top: 1%; font-size: 16px;font-weight: 400; color: #5f5b87!important; background-color: transparent; border-top-left-radius:0; border-top-right-radius:0; height: 92px!important; }
@media only screen and ( max-width: 1160px) {
  .slider-caption .captio-slider-2 {position: absolute; padding-top: 3%; font-size: 16px;font-weight: 400; color: #5f5b87!important; background-color: transparent}
}

@media only screen and ( max-width: 500px) {
  .slider-caption .captio-slider-1 {position: absolute; padding-top: 1.5%; font-size: 11px;font-weight: bold; color: #5f5b87!important;}
  .slider-caption .captio-slider-2 {position: absolute; padding-top: 60px; font-size: 10px;color: #5f5b87!important; background-color: transparent}
}

.padding-slider {padding-top: 50%};

/* fade slider */
.ul_tools {display: inline-block;}
.ul_tools li {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: left;
    height: 100%;
    width: auto;
}

.slides {
    height:0px;
    background-color: #5f5b87;
    margin:0px;
    overflow:visible;
    position:relative;
    width:100%;
}

.slides ul {
    width: 100%;
    list-style:none;
    position:absolute;
    padding: 0px;
    margin: 0px;
}
@media only screen and ( max-width: 500px) {
  .slides {height:0px; background-color: #5f5b87; margin:0px; overflow:visible; position:relative; width:100%;}
  .slides ul {
      width: 100%;
      list-style:none;
      position:absolute;
      padding: 0px;
      margin: 0px;
  }
}

/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    30% {
        opacity:1;
    }
    45% {
        opacity:1;
    }
    10% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
  0% {
      opacity:0;
  }
  30% {
      opacity:1;
  }
  45% {
      opacity:1;
  }
  10% {
      opacity:0;
  }
  100% {
      opacity:0;
  }
}

.slides ul li {
    background-color: #5f5b87;
    width: 100%;
    display: inline-block;
    height: auto;
    padding-bottom: 8%;
    opacity:0;
    position:absolute;
    top:0;

    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 18.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 18.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

@media only screen and ( max-width: 500px) {
  .slides ul li {
      background-color: #5f5b87;
      width: 100%;
      display: inline-block;
      height: auto;
      padding-bottom: 8%;
      opacity:0;
      position:absolute;
      top:0;
  }
}

/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display: inline-block;
    width: 100%;
    height: auto;
}

/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}

.slides ul li div {
    /* background-color:#000000; */
    /* border-radius:10px 10px 10px 10px; */
    /* box-shadow:0 0 5px #FFFFFF inset; */
    /* color:#FFFFFF; */
    /* font-size:26px;
    left:10%;
    margin:0 auto; */
    padding:0px;
    /* position:absolute;
    top:50%;
    width:200px; */

    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 18.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 18.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}


/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

/* @media only screen and ( max-width: 500px) {
  .slider-caption { padding: 50% 0 0 0;}
  .slider-caption p {padding-left: 2%; padding-right: 2%; font-size: 11px;color: #0c0b0bab;background: #ffffff7A; width: unset; height: auto; bottom:0px; right:1%}
  .home-top-slider .slider-content {padding: unset;}
} */
/* =========== SLIDER =========== */


/* =========== HOMEPAGE =========== */
.project-content {padding-right: 5px;}
.project-photo img {height: 15em;}
.project-content h4 a {color: black;}
.img-hightlight img {height: auto;}

.margin-news {margin-bottom: 25px!important}

ol {
    margin-left: 10px;
    counter-reset: li; /* Initiate a counter */
    list-style: none; /* Remove default numbering */
    *list-style: decimal; /* Keep using default numbering for IE6/7 */
    font: 16 'Roboto', 'sans-serif';
    padding: 0;
    margin-bottom: -6.25%;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

ol ol {
    margin: 0 0 0 2em; /* Add some left margin for inner lists */
}
.rounded-list a{
    position: relative;
    display: block;
    padding: .4em .4em .4em 2em;
    *padding: .4em;
    margin: 1.5em 0;
    background: #ddd;
    color: #444;
    text-decoration: none;
    border-radius: .3em;
    transition: all .3s ease-out;
}

.rounded-list a:hover{
    background: #eee;
}

.rounded-list a:hover:before{
    transform: rotate(360deg);
}

.rounded-list a:before{
    content: counter(li);
    counter-increment: li;
    position: absolute;
    left: -1.3em;
    top: 50%;
    margin-top: -1.5em;
    background: #73aee9;
    height: 3em;
    width: 3em;
    line-height: 2.5em;
    border: .3em solid #fff;
    text-align: center;
    font-weight: bold;
    border-radius: 2em;
    transition: all .3s ease-out;
    color: aliceblue;
}

.border-rad-5 {border-radius: 5px!important;}
/* =========== HOMEPAGE =========== */

/* =========== ABOUT US =========== */
.breadcrumb-position-info{
  padding-left: 8%;
}

.breadcrumb-position-vm{
  margin-left: 80%;
  margin-right: -15%;
}

@media only screen and ( max-width: 500px) {
  .banner-mobile-info {background-position-x: 72%!important}
  .banner-mobile-vision {background-position-x: 25%!important}
}

/* ===========  ABOUT US =========== */

/* =========== PRODUCT =========== */
.link-all-area {
  display: block;
  padding-bottom: 100px;
  width: 100%;
}

.space-judul-detail {
  margin-top: 30px;
}

.tambah-margin-bottom {
  margin-bottom: 32px;
  min-height: 525px
}

.resize-news-home {
  height: 15em!important;
  max-width: none!important;
  overflow: hidden!important;
}

@media only screen and ( max-width: 500px) {
  .resize-news-home {
    width: auto!important;
    overflow: hidden!important;
    max-height: none!important;
  }
}

.panel-find-product {background-color: rgba(0,0,0,0.05); height: auto; margin: 20px 0 0 0; padding: 8px 0 8px 20px; border-radius: 5px}
.bg-close-lighbox {width:100%!important; height:100%!important; position:absolute!important; background-color:transparent!important}

.field-btn-filter {text-align:center; width: 100%}
.form-find-tipe .product-btn {right:2%; margin: 3px 3px ;background-color: #5f5b8769!important; border-color: #5f5b87!important; position:relative;}
.form-find-tipe .product-btn-active {right:2%; margin: 3px 3px ;background-color: #5f5b87!important; border-color: #5f5b87!important; position:relative;}

.form-find-tipe select {position: absolute; left: 2%; width: auto;}

/* =========== PRODUCT =========== */

/* =========== PRODUCT DETAIL =========== */
/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.25);
  -webkit-transition:opacity 1.2s cubic-bezier(0,0,0,1);
      -moz-transition:opacity 1.2s cubic-bezier(0,0,0,1);
      -o-transition:opacity 1.2s cubic-bezier(0,0,0,1);
      transition:opacity 1.2s cubic-bezier(0,0,0,1);
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: 8em auto;
  padding: 0;
  width: 90%;
  max-width: 28em;
  border-color: white;
  border-width: 4px;
  padding-bottom: 2px;
  -webkit-transition:opacity 1.2s cubic-bezier(0,0,0,1);
      -moz-transition:opacity 1.2s cubic-bezier(0,0,0,1);
      -o-transition:opacity 1.2s cubic-bezier(0,0,0,1);
      transition:opacity 1.2s cubic-bezier(0,0,0,1);
  /* box-shadow: 0 2px 2px 2px white; */

}

/* The Close Button */
.close {
  cursor: pointer;
  color: white;
  position: absolute;
  top: 23%;
  right: 34%;
  font-size: 39px;
  font-weight: bold;
  z-index: 3;
  width: 40px;
  text-align: center;
  background-color: #000000;
  border-color: white;
  border-width: 3px;
  border-radius: 50%;
}

@media only screen and ( max-width: 500px) {
  .close {
    color: white;
    position: absolute;
    top: 11.5%;
    right: 2%;
    font-size: 29px;
    font-weight: bold;
    z-index: 3;
    width: 30px;
    text-align: center;
    background-color: #000000;
    border-color: white;
    border-width: 3px;
    border-radius: 50%
  }
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

@media only screen and ( max-width: 500px) {
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 60%;
    width: 30px;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 15px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
  }
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.bg-caption-lightbox {
  position: absolute;
  z-index: 10;
  background-color: white;
  width: 45%;
  height: 8%;
  bottom : -3%;
  left: 3%;
  box-shadow: 0 10px 18px 0 rgba(50,50,50, .16);
  border-radius: 6px;
  padding-top: 0.8%;
  border-style: solid;
  border-width: 0 0 0 6px;
  border-color: #10045c;
}

.nama-caption-lightbox {
  font-size: 18px;
  color : #10045c;
  margin-left: 10px;
}

@media only screen and ( max-width: 500px) {
  .modal {display: none!important}
  .modal-content {display: none!important}
  .cursor {display: none!important}
  .mySlides{display: none!important}
}
/* =========== PRODUCT DETAIL =========== */

.img-in-ecoshrimp {
  float : left;
  margin-right: 20px;
}

.border-ecoshrimp img {
  border-radius: 5px!important;
}

@media only screen and ( max-width: 500px) {
  .border-ecoshrimp img {
    border-radius: 5px!important;
    margin: 10px!important;
    width: 95%!important;
  }
}

/* =========== BLOG =========== */
.blog-bottom .readmore-news {right: unset; position: relative; margin-top: 10px;}
.blog-content .link-article {font-size: 16px;}
.another-news {
  margin-top: 70px;
  text-align: center !important;
}

.vid-news {
  margin-left: 19%;
  width: 660px;
  height: 380px;
}

@media only screen and ( max-width: 500px) {
  .vid-news {
    margin-left: 0%;
    width: 100%;
    height: auto;
  }
  .blog-single-box {
    min-height: 340px;
  }

  .blog-content-detail iframe {width: 100%; height: auto;}
}

.hr-bot-title {margin:0; width:185px; background-color: #5f5baf; top:-5px;}

.image-news {
  height: 195px;
  overflow: hidden;
}

.blog-single-box {
  min-height: 366px;
}



/* =========== BLOG =========== */

/* Blog Detail */
.link-article {text-decoration: none !important;color: #676770;}
.link-article:hover {color:#5f5b87;}

.blog-detail-single-box {
    background: #ffff;
    margin-top: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px 0 rgba(50,50,50,.16);
    -moz-transition: 1s linear;
    -webkit-transition: 1s linear;
    -moz-transition: 1s linear;
    -ms-transition: 1s linear;
    -o-transition: 1s linear;
    transition: 1s linear;
}

.blog-detail-news {
    background: #f9f9f9;
    box-shadow: 0 0 0 0;
}

.blog-detail-single-box img {
    width: 100%;
    margin: 35px 0px;
}

.recent-news-img {
  margin: 0px 0px!important;
  min-height: 225px;
}

@media only screen and ( max-width: 500px) {
  .resize-news-recent {
    overflow: hidden!important;
    max-width: none!important;
    height: 100%!important;
  }
  .recent-news-img {
    margin: 0px 0px!important;
  }
}

.blog-content-detail {
    padding: 10px 10px;
    min-height: 400px;
}

.blog-content-detail p {
    font-size: 1rem;
}

.section-padding-detail {
    padding: 20px 0;
    padding-bottom: 60px;
}

.blog-sidebar {
    background: #ffff;
    margin-top: 30px !important;
    overflow: hidden;
    box-shadow: 0 10px 30px 0 rgba(50,50,50,.16);
    height: 100%;
}

.blog-single-box img {
  width: 100%;
  height: auto!important;
}

@media only screen and ( max-width: 500px) {
  .blog-single-box img {
    width: 100%;
    height: auto!important;
  }
}
/* ========= Contact =============*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
/*** Table Styles **/

@media only screen and ( max-width: 500px) {
  .deskripsi-contact {text-align: justify; width:100%!important}
}

.table-fill {
  background: white;
  border-radius:3px;
  border-collapse: collapse;
  height: 320px;
  margin: auto;
  max-width: 730px;
  padding:5px;
  width: 90%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  animation: float 5s infinite;
  margin-bottom: 30px;
}

th {
  color:#D5DDE5;;
  background:#1b1e24;
  border-bottom:4px solid #9ea7af;
  border-right: 1px solid #343a45;
  font-size:23px;
  font-weight: 100;
  padding:24px;
  text-align:left;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  vertical-align:middle;
}

th:first-child {
  border-top-left-radius:3px;
}

th:last-child {
  border-top-right-radius:3px;
  border-right:none;
}

tr {
  border-top: 1px solid #C1C3D1;
  border-bottom-: 1px solid #C1C3D1;
  color:#666B85;
  font-size:16px;
  font-weight:normal;
  text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);
}

tr:hover td {
  background:#4E5066;
  color:#FFFFFF;
  border-top: 1px solid #22262e;
}

tr:first-child {
  border-top:none;
}

tr:last-child {
  border-bottom:none;
}

tr:nth-child(odd) td {
  background:#EBEBEB;
}

tr:nth-child(odd):hover td {
  background:#4E5066;
}

tr:last-child td:first-child {
  border-bottom-left-radius:3px;
}

tr:last-child td:last-child {
  border-bottom-right-radius:3px;
}

td {
  background:#FFFFFF;
  padding:20px;
  text-align:left;
  vertical-align:middle;
  font-weight:300;
  font-size:18px;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
  border-right: 1px solid #C1C3D1;
}

td:last-child {
  border-right: 0px;
}

th.text-left {
  text-align: left;
}

th.text-center {
  text-align: center;
}

th.text-right {
  text-align: right;
}

td.text-left {
  text-align: left;
}

td.text-center {
  text-align: center;
}

td.text-right {
  text-align: right;
}

.reg-number {
  margin-top: 20px;
}

/* ============= About =============  */
.main-timeline{
    overflow: hidden;
    position: relative;
}
.main-timeline:before,
.main-timeline:after{
    content: "";
    display: block;
    width: 100%;
    clear: both;
}
.main-timeline:before{
    content: "";
    width: 3px;
    height: 100%;
    background: #d6d5d5;
    position: absolute;
    top: 30px;
    left: 50%;
}
.main-timeline .timeline{
    width: 50%;
    float: left;
    padding-right: 30px;
    position: relative;
}
.main-timeline .timeline-icon{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #6ae88f;
    position: absolute;
    top: 5.5%;
    right: -17.5px;
}
.main-timeline .year{
    margin: 0 10px 0 10px !important;
    width: 18%;
    display: block;
    padding-left:4.5%;
    margin-top: 8px;
    margin: 0;
    font-size: 22px;
    color: #fff;
    border-radius: 8px 8px 0 0;
    background: #5f5b87;
    text-align: left;
    position: relative;
}

.main-timeline .timeline-content{
    margin: 0 10px 0 10px !important;
    /* border-top: 5px solid #5f5b87; */
    padding: 30px 20px;
    margin: 0;
    background: #f2f2f2;
    border-radius: 0 8px 8px 8px;
}
.main-timeline .title{
    font-size: 19px;
    font-weight: bold;
    color: #504f54;
    margin: 10px 0 10px 0;
}
.main-timeline .description{
    font-size: 16px;
    color: #7d7b7b;
    margin: 0;
}

.main-timeline .timeline:nth-child(2n){ padding: 0 0 0 30px; margin-top: 50px}
.main-timeline .timeline:nth-child(2n) .timeline-icon{
    right: auto;
    left: -14.5px;
}


.main-timeline .timeline:nth-child(2){ margin-top: 80px; }
.main-timeline .timeline:nth-child(odd){ margin: -40px 0 0 0; }
.main-timeline .timeline:nth-child(even){ margin-bottom: 50px; }
.main-timeline .timeline:first-child{ margin: 0;}
.main-timeline .timeline:last-child:nth-child(even){ margin: 0; margin-top: 120px;}
.main-timeline .timeline:nth-child(2n) .timeline-icon{ border-color: #6ae88f; }
.main-timeline .timeline:nth-child(2n) .year{ background: #5f5b87; }
.main-timeline .timeline:nth-child(2n) .year:before{ border-top-color: #545ea5; }
.main-timeline .timeline:nth-child(3n) .timeline-icon{ border-color: #6ae88f; }
.main-timeline .timeline:nth-child(3n) .year{ background: #5f5b87; }
.main-timeline .timeline:nth-child(3n) .year:before{ border-top-color: #545ea5; }
.main-timeline .timeline:nth-child(4n) .timeline-icon{ border-color: #6ae88f; }
.main-timeline .timeline:nth-child(4n) .year{ background: #5f5b87; }
.main-timeline .timeline:nth-child(4n) .year:before{ border-top-color: #545ea5; }

.tab-line {
  position: absolute;
  background-color: blue
}

@media only screen and (max-width: 767px){
    .main-timeline{ overflow: visible; }
    .main-timeline:before{
        top: 0;
        left: 0;
    }
    .main-timeline .timeline:nth-child(2),
    .main-timeline .timeline:nth-child(odd),
    .main-timeline .timeline:nth-child(even){ margin: 0; }
    .main-timeline .timeline{
        width: 100%;
        float: none;
        padding: 0 0 0 30px;
        margin-bottom: 20px !important;
    }
    .main-timeline .timeline:last-child{ margin: 0 !important; }
    .main-timeline .timeline-icon{
        right: auto;
        left: -14.5px;
    }
    .main-timeline .year{ width:24%; border-radius: 8px 8px 0 0; }
    .main-timeline .timeline-content{ margin: 0 35px 0 45px; }
}

.pop-contact {position: fixed; color: #fff; height: auto; width: 35%; margin:0 ;padding: 0px 0px 0px 0px; border-radius: 5px; font-size: 20px; text-align: center; z-index: 80;
top:40%; left: 33%; font-weight: 500; background-color: #5f5b8781;}

@media only screen and (max-width: 500px){
  .pop-contact {position: fixed; color: #fff; height: auto; width: 65%; margin:0 ;padding: 0px 0px 0px 0px; border-radius: 5px; font-size: 16px; text-align: center; z-index: 80;
  top:22%; left: 17%; font-weight: 500; background-color: #5f5b8781;}
}

.hideMe {
    -moz-animation: cssAnimation 1.5s ease-in 4s forwards;
    /* Firefox */
    -webkit-animation: cssAnimation 1.5s ease-in 4s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 1.5s ease-in 4s forwards;
    /* Opera */
    animation: cssAnimation 1.5s ease-in 4s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    to {
        /* display: none!important; */
        opacity: 0;
        overflow:hidden;
    }
}
@-webkit-keyframes cssAnimation {
    to {
        /* display: none!important; */
        opacity: 0;
        visibility:hidden;
    }
}

/* ECOSHRIMP */
.border-ecoshrimp iframe {width: 80%; margin-left: 10%}
@media only screen and (max-width: 500px){
  .border-ecoshrimp iframe {width: 100%; height: auto; margin-left: 0}
}