/*============================================
    
    CSS INDEX
    ===================
	
    1. Theme default CSS
	2. About Us
	3. Project Count Area
	4. Section Titel Css
	5. Trailer Area
  5a. Trailer2 Area
	6. Service Area
	7. Our Gallery
	8. Testimonial Area
	9. Our Gallery
	10. Footer Area
	11. Home Two Css
	12. Home Three Css
	13. Home Four Css
	14. Breadcamp Area
	15. Contact Us Page
	16. About Us Page
	17. Service Page
	18. 404 Error
	19. ScrollUp
	
===========================================================*/

/* ============= 1. Theme default CSS ============= */
@import url('https://fonts.googleapis.com/css?family=Orbitron:400,500,700,900%7CRoboto:100,300,300i,400,500,700,900');

/* ============= 2. About Us ============= */
.aboutus-video  {
  box-sizing: border-box;
  display: inline-block;
  height: 300px;
  overflow: hidden;
  width: 970px;
}
.popup-youtube {
  color: #fff;
  font-size: 60px;
  height: 70px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 38%;
  transition: all 0.3s ease 0s;
  width: 70px;
}
.aboutus-titel {margin-bottom: 45px;}
.aboutus-bottom-txt {margin-top: 30px;}
.person-area {
  display: inline-block;
  
  text-align: center;
  width: 50%;
}
.person-img {
  display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}
.person-txt {margin-bottom: 45px;
}
.aboutus-bottom-txt > p {
  font-size: 16px;
  line-height: 30px;
  margin: auto auto 20px;
  width: 65%;
}
.person-txt h6 {
  font-weight: 500;
  margin: 0 0 5px;
}
.person-txt > span {
  color: #666666;
  font-size: 12px;
}

/* ============= 3. Project Count Area ============= */
.project-count span {
  color: #555555;
  display: inline-block;
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 22px;
  padding-bottom: 20px;
  position: relative;
}
.project-count span::after {
  background: #555555 none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  width: 50px;
}
.project-count h3 {
  font-size: 22px;
  font-weight: 500;
  margin: 0;
}

/* ============= 4. Section Titel Css ============= */
.section-titel h2 {display: block;position: relative;}
.section-titel {margin-bottom: 45px;margin-right: 100px;}
.section-titel h2::after {
  border-bottom: 2px dashed #ff6600;
  bottom: 10px;
  content: "";
  height: 70px;
  position: absolute;
  right: -100px;
  width: 70px;
}
.section-titel p {font-size: 16px;}
.section-titel.two {margin-left: 100px;}
.section-titel.two h2::after {left: -102px;}
.section-titel.two h2,.section-titel.two p {color: #fff;}
.ourteam-area .section-titel.two h2,.ourteam-area .section-titel.two p {color: #555555;}

/* ============= 5. Trailer Area ============= */
.trailer-single {box-shadow: 0 1px 1px #ddd;margin-bottom: 2px;}
.trailer-titel h5 {
  background: #f6f6f6 none repeat scroll 0 0;
  font-weight: 500;
  margin: 0;
  padding: 20px;
  text-transform:uppercase;
}
.trailer-titel span {
  float: right;
  font-family: roboto;
  font-size: 14px;
  font-weight: normal;
}
.trailer-video  {
  box-sizing: border-box;
  display: inline-block;
  height: 100%;
  overflow: hidden;
  width: 100%;
}
.trailer-img .popup-youtube {
  color: #fff;
  font-size: 45px;
  height: 70px;
  left: 0;
  line-height: 70px;
  margin: 0 auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 41%;
  transition: all 0.3s ease 0s;
  width: 70px;
  z-index: 99;
  opacity:0;
  visibility:hidden;
}
.trailer-single:hover .trailer-img .popup-youtube{opacity:1;visibility:visible;}
.trailer-img {
  display: block;
  position: relative;
}
.trailer-img::after {
  background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  opacity:0;
  visibility:hidden;
  transition:.4s;
}
.trailer-single:hover .trailer-img::after{opacity:1;visibility:visible;}
/* Owl Indicator Active */
.indicator-style .owl-theme .owl-nav {
  margin-top: 0;
  position: absolute;
  top: 42%;
  width: 100%;
  opacity:0;
  transition:.4s;
}
.main-section:hover .owl-theme .owl-nav{opacity:1;}
.indicator-style .owl-theme .owl-nav [class*="owl-"] {
  background: transparent none repeat scroll 0 0;
  border-radius: 0;
  color: #555555;
  cursor: pointer;
  display: inline-block;
  font-size: 44px;
  margin: 0;
  padding: 0;
}
.indicator-style .owl-carousel .owl-nav .owl-prev {left: -50px;position: absolute;}
.indicator-style .owl-carousel .owl-nav .owl-next {right: -50px;position: absolute;}
.indicator-style .owl-theme .owl-nav [class*="owl-"]:hover,.service-area.indicator-style .owl-theme .owl-nav [class*="owl-"]:hover {
  background: transparent;
  color: #e2a750;
  text-decoration: none;
}


/* ============= 5a. Trailer2 Area ============= */
.trailer2-single {box-shadow: 0 1px 1px #ddd;margin-bottom: 2px;}
.trailer2-titel h5 {
  background: #f6f6f6 none repeat scroll 0 0;
  font-weight: 500;
  margin: 0;
  padding: 20px;
  text-transform:uppercase;
}
.trailer2-titel span {
  float: right;
  font-family: roboto;
  font-size: 14px;
  font-weight: normal;
}
.trailer2-video  {
  box-sizing: border-box;
  display: inline-block;
  height: 100%;
  overflow: hidden;
  width: 100%;
}
.trailer2-img .popup-youtube {
  color: #fff;
  font-size: 45px;
  height: 70px;
  left: 0;
  line-height: 70px;
  margin: 0 auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 41%;
  transition: all 0.3s ease 0s;
  width: 70px;
  z-index: 99;
  opacity:0;
  visibility:hidden;
}
.trailer2-single:hover .trailer2-img .popup-youtube{opacity:1;visibility:visible;}
.trailer2-img {
  display: block;
  position: relative;
}
.trailer2-img::after {
  background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  opacity:0;
  visibility:hidden;
  transition:.4s;
}
.trailer2-single:hover .trailer2-img::after{opacity:1;visibility:visible;}
/* Owl Indicator Active */
.indicator-style .owl-theme .owl-nav {
  margin-top: 0;
  position: absolute;
  top: 42%;
  width: 100%;
  opacity:0;
  transition:.4s;
}
.main-section:hover .owl-theme .owl-nav{opacity:1;}
.indicator-style .owl-theme .owl-nav [class*="owl-"] {
  background: transparent none repeat scroll 0 0;
  border-radius: 0;
  color: #555555;
  cursor: pointer;
  display: inline-block;
  font-size: 44px;
  margin: 0;
  padding: 0;
}
.indicator-style .owl-carousel .owl-nav .owl-prev {left: -50px;position: absolute;}
.indicator-style .owl-carousel .owl-nav .owl-next {right: -50px;position: absolute;}
.indicator-style .owl-theme .owl-nav [class*="owl-"]:hover,.service-area.indicator-style .owl-theme .owl-nav [class*="owl-"]:hover {
  background: transparent;
  color: #e2a750;
  text-decoration: none;
}
/* end trailer 2 */

 
/* ============= 6. Service Area ============= */
.service-single {padding: 38px 25px 35px;transition:.4s;}
.service-single:hover {background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0;}
.servce-icon i {color: #cccccc;font-size: 48px;}
.service-details h4 {
  color: #fff;
  font-weight: 700;
  margin: 20px 0 18px;
  text-transform:uppercase;
}
.service-details > p {color: #cccccc;margin: 0;}
.service-area.indicator-style .owl-theme .owl-nav [class*="owl-"] {color: #fff;}

/* ============= 7. Our Gallery ============= */
.grid-item {float: left;}
/* .grid-item { width: 50%; }
.grid-item--width2 { width: 25%; } */
.grid-item  {margin-bottom: 30px;}
.gallery-menu {margin-bottom: 30px;margin-right: 100px;}
ul.gallery-menu li {
  color: #555555;
  cursor: pointer;
  font-size: 14px;
  padding-left: 40px;
  text-transform: uppercase;
  transition:.3s;
}
ul.gallery-menu li.active,ul.gallery-menu li:hover{color:#e2a750;}
.gallery-image {
  display: block;
  position: relative;
  overflow:hidden;
}
.gallery-image::before {
  background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  bottom: -50%;
  width: 100%;
  opacity:0;
  transition:.4s;
  visibility:hidden;
}
.gallery-single:hover .gallery-image::before{opacity:1;bottom:0;visibility:visible;}
.popup-gallery,.gallery-image .popup-youtube {
  color: #fff;
  font-size: 36px;
  height: 70px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: 25%;
  transition: all 0.3s ease 0s;
  width: 70px;
  line-height: 70px;
  opacity:0;
  visibility:hidden;
}
.popup-youtube:hover{color:#e2a750;}
.gallery-single:hover .popup-gallery,.gallery-single:hover .gallery-image .popup-youtube{opacity:1;top: 38%;visibility:visible;}
.gallery-image > img {width: 100%;}
.hvr-btn {
  /*background: #ff6600 none repeat scroll 0 0;*/
  box-shadow: 0 0 1px transparent;
  color: #fff;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  text-align: center;
  text-transform: uppercase;
  transform: perspective(1px) translateZ(0px);
  transform-origin: 0 100% 0;
  transition-duration: 0.3s;
  transition-property: transform;
  vertical-align: middle;
  width: 130px;
}
.hvr-btn:hover {
  -webkit-transform: skew(-10deg);
  transform: skew(-10deg);
  /*background:#000;*/
  color:#fff;
}

/* ============= 8. Testimonial Area ============= */
.testi-img {margin-bottom: 22px;}
.testimonial-content > h6 {
  color: #666666;
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 4px;
}
.testimonial-content > span {color: #666666;font-size: 12px;}
.testi-img {margin-bottom: 18px;}
.testi-img > img {display: inline-block !important;width: auto !important;}
.testimonial-content > p {padding: 0 200px;}

/* ============= 9. Our Team ============= */
.large-img {float: left;margin-right: 80px;}
.slick-slider {-moz-user-select: elements;}
.thumb-content {display: block;overflow: hidden;}
.teamper-titel > h5 {
  font-size: 20px;
  font-weight: 500;
  padding-bottom: 15px;
  position: relative;
}
.teamper-titel > h5::after {
  border-bottom: 1px dashed #e2a750;
  bottom: 0;
  content: "";
  height: 70px;
  position: absolute;
  right: 0;
  width: 70px;
}
.teamper-titel > span {color: #555555;}
.team-social {margin-bottom: 35px;margin-top: 22px;}
.team-social ul li a {
  border: 1px solid #555555;
  border-radius: 100px;
  display: block;
  font-size: 18px;
  height: 30px;
  line-height: 28px;
  margin-left: 8px;
  text-align: center;
  width: 30px;
  color:#555555;
  transition:.3s;
}
.team-social ul li a:hover{color:#fff;background:#555555;}
.slider.slider-nav.slick-initialized.slick-slider {width: 690px;}
.slick-arrow {
  bottom: 0;
  font-size: 30px;
  position: absolute;
  cursor:pointer;
  transition:.4s;
}
.slick-next.slick-arrow {
  bottom: -10px;
  left: 50%;
}
.slick-prev.slick-arrow {
  bottom: -10px;
  left: 50%;
  margin-left: -50px;
}
.slick-arrow::after {
  color: #555555;
  content: "/";
  font-size: 25px;
  left: -15px;
  position: absolute;
  top: 4px;
}
.slick-arrow:first-child::after {display: none;} 
.slick-arrow i{transition:.4s;}
.slick-arrow i:hover {color:#e2a750;}
.slider-nav {
  bottom: 38px;
  display: block;
  float: left;
  overflow: hidden;
  padding-bottom: 4%;
  position: absolute;
  right: -12px;
  z-index: 9;
}
.ourteam-area {display: block;position: relative;}
.thumb-content {margin-top: 30px;}

/* ============= 10. Footer Area ============= */
.footer-single > h5 {
  color: #ffffff;
  font-weight: 500;
  margin: 0 0 25px;
}
.stay-with-content > p {color: #fff;margin: 0 0 20px;}
.subcribe input {
  background: transparent none repeat scroll 0 0;
  border-color: currentcolor currentcolor #fff;
  border-style: none none solid;
  border-width: 0 0 1px;
  color: #fff;
  font-size: 14px;
  height: 45px;
  padding-left: 10px;
  width: 100%;
}
.subcribe button {
  background: #fff none repeat scroll 0 0;
  border: medium none;
  color: #555555;
  height: 30px;
  margin-top: 15px;
  text-transform: uppercase;
  width: 120px;
  transition:.3s;
}
.subcribe button:hover{background:#e2a750;color:#fff;}

/* Mail Chimp */
.mailchimp-submitting{color:#31708f}
.mailchimp-success{color:#3c763d;}
.mailchimp-error{color:#a94442;}

/* Footer Menu */
.footer-menu ul li {display: block;}
.footer-menu ul li a {
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 14px;
  font-weight: 400;
  overflow: hidden;
  padding-bottom: 15px;
  transition:.3s;
}
.footer-menu ul li a:hover {color: #e2a750;}
.footer-menu ul li:last-child a {padding-bottom: 0;}
.contact-info ul li p {color: #fff;margin: 0 0 13px;}
.contact-info ul li:last-child p{margin:0;}

/* Footer Bootom */ 
.footer-bottom {
  border-top: 1px solid #aaa;
  display: block;
  overflow: hidden;
  padding: 15px 0;
}
.footer-left {float: left;}
.footer-left > p,.footer-left > p a {
  color: #fff;
  margin: 0;
  transition:.4s;
}
.footer-left > p a:hover{color: #e2a750;}
.footer-right-social ul li a {
  border: 1px solid #fff;
  border-radius: 100px;
  color: #fff;
  display: block;
  font-size: 18px;
  height: 30px;
  line-height: 28px;
  margin-left: 8px;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 30px;
}
.footer-right-social ul li a:hover{color:#555555;background:#fff;}


/* ============= 11. Home Two Css ============= */
/* Header Area */
.home-two .main-menu nav ul li.active a,.home-two .main-menu nav ul li:hover a {color: #fe2d20;}
.home-two .main-menu ul li ul > li > a:hover {color: #fe2d20 !important;}
.home-two .trailer-titel h5 a:hover {color: #fe2d20;}
.home-two .trailer2-titel h5 a:hover {color: #fe2d20;}
.home-two .slide-btn a {background: #fe2d20 none repeat scroll 0 0;}
.home-two .slide-content h2 span,.home-two .slide-content h1 span {color: #fe2d20;}
.home-two .slider-area .owl-theme .owl-dots .owl-dot.active span{background: rgba(0, 0, 0, 0) url("img/home-two/icon/dot-active.png") no-repeat scroll 0 0;}
.home-two .slider-area .owl-theme .owl-dots .owl-dot span {background: rgba(0, 0, 0, 0) url("img/home-two/icon/dot.png") no-repeat scroll 0 0;}
/* About Us */
.home-two .popup-youtube:hover {
  color: #aaa;
}
.home-two .hvr-btn {background: #fe2d20 none repeat scroll 0 0;}
.home-two .hvr-btn:hover {
  -webkit-transform: skew(-10deg);
  transform: skew(-10deg);
  background:#000;
  color:#fff;
}
/* Titel */
.home-two .section-titel h2::after {border-bottom: 2px dashed #fe2d20;}
.home-two .section-titel.three h2,.home-two .section-titel.three p {color: #fff;}
.home-two .section-titel.dark h2,.home-two .section-titel.dark p {color: #555555;}
/* Service Area */
.home-two .service-single:hover {background: rgba(254, 45, 32, 0.5) none repeat scroll 0 0;}
.home-two .indicator-style .owl-theme .owl-nav [class*="owl-"]:hover,.home-two .service-area.indicator-style .owl-theme .owl-nav [class*="owl-"]:hover {
  background: transparent none repeat scroll 0 0;
  color: #fe2d20;
  text-decoration: none;
}
/* Gallery */
.home-two .gallery-menu {margin-left: 115px;margin-right: 0;}
.home-two ul.gallery-menu li {padding-left: 0;padding-right: 40px;}
.home-two ul.gallery-menu li.active,.home-two ul.gallery-menu li:hover {color: #fe2d20;}
.home-two .gallery-image::before {background: rgba(254, 45, 32, 0.7) none repeat scroll 0 0;}
.home-two .popup-gallery:hover {color: #fff;}
.home-two .testimonial-content > p,.home-two .testimonial-content > h6,.home-two .testimonial-content span,.home-two .indicator-style .owl-theme .owl-nav [class*="owl-"]{
  color: #fff;
}
/* Team Area */
.home-two .large-img {
  float: right;
  margin-left: 80px;
  margin-right: 0;
}
.home-two .teamper-titel > h5::after {
  border-bottom: 1px dashed #fe2d20;
  left: 0;
  right: 0;
}
.home-two .slider.slider-nav.slick-initialized.slick-slider {
  width: 690px;
}
.home-two .slider-nav {
  bottom: 36px;
  display: block;
  float: left;
  left: 15px;
  overflow: hidden;
  position: absolute;
  right: 0;
  z-index: 9;
}
.home-two .slick-slider .slick-list,.home-two .slick-slider .slick-track {transform: translate3d(0px, 0px, 0px);}
.home-two .team-social ul li a {
  border: 1px solid #fe2d20;
  color: #fe2d20;
  margin-left: 0;
  margin-right: 8px;
}
.home-two .team-social ul li a:hover {background: #fe2d20 none repeat scroll 0 0;color: #fff;}
.home-two .slick-arrow i:hover,.home-two .footer-menu ul li a:hover {color:#fe2d20;}
.home-two .trailer-titel h5{font-size:14px;}
.home-two .trailer2-titel h5{font-size:14px;}
/* Footer Area */
.home-two .subcribe button {background: #fe2d20 none repeat scroll 0 0;color: #fff;}
.home-two .subcribe button:hover{background:#fff;color:#555;}
.home-two .footer-right-social ul li a {border: 1px solid #fe2d20;color: #fe2d20;}
.home-two .footer-right-social ul li a:hover {background:#fe2d20;color: #fff;}
.home-two .testi-img i {color: #696969;font-size: 80px;}
.home-two .trailer-img::after {
  background: rgba(254, 45, 32, 0.6) none repeat scroll 0 0;
}
.home-two .trailer2-img::after {
  background: rgba(254, 45, 32, 0.6) none repeat scroll 0 0;
}
/* ============= 12. Home Three Css ============= */
.home-three .project-count span,.home-three .project-count h3 {color: #fff;}
.home-three .project-count span::after {background: #fff none repeat scroll 0 0;}
.section-titel-img h2 {
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}
.section-titel-img h2::after {
  border-bottom: 1px dashed #e2a750;
  content: "";
  height: 100%;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 0;
  width: 135px;
}
.section-titel-img h2::before {
  background: #fff none repeat scroll 0 0;
  color: #e2a750;
  content: "";
  font-family: icofont;
  font-size: 20px;
  height: 22px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  top: 42px;
  width: 25px;
  z-index: 99;
}
.section-titel-img.two h2,.section-titel-img.two p{color:#fff}
.section-titel-img.two h2::before {background: #262317 none repeat scroll 0 0;}
.home-three .service-single:hover{background: rgba(226, 167, 80, 0.4) none repeat scroll 0 0;}
.home-three .service-single {margin-bottom: 42px;}
.home-three .gallery-menu {margin-bottom: 30px;margin-right: 0;}
.home-three .gallery-image::before {background: rgba(226, 167, 80, 0.8) none repeat scroll 0 0;}
.home-three .popup-gallery:hover {color: #fff;}
.home-three .testimonial-content > p,.home-three .testimonial-content > h6,.home-three .testimonial-content span{color: #fff;}
.home-three .testimonial-area.indicator-style .owl-theme .owl-nav [class*="owl-"] {color: #fff;}
.home-three .testimonial-area.indicator-style .owl-theme .owl-nav [class*="owl-"]:hover {color: #e2a750;}

/* ============= 13. Home Four Css ============= */
.home-four p {color: #fff;}
.home-four .aboutus-titel h2,.home-four .person-txt h6,.home-four .person-txt span,.home-four .project-count h3,.home-four .project-count span,.home-four .section-titel h2,.home-four ul.gallery-menu li,.home-four .testimonial-content h6,.home-four .testimonial-content span,.home-four .teamper-titel > h5,.home-four .teamper-titel > span,.home-four .slick-arrow::after,.home-four .slick-arrow i {color:#fff;}
.home-four .project-count span::after {background: #fff none repeat scroll 0 0;}
.home-four .trailer-titel h5 {background: #030c16 none repeat scroll 0 0;color: #fff;}
.home-four .trailer-single {box-shadow: none;}
.home-four .trailer2-titel h5 {background: #030c16 none repeat scroll 0 0;color: #fff;}
.home-four .trailer2-single {box-shadow: none;}
.home-four .indicator-style .owl-theme .owl-nav [class*="owl-"] {color: #fff;}
.home-four .indicator-style .owl-theme .owl-nav [class*="owl-"]:hover {color: #e2a750;}
.home-four .trailer-img .popup-youtube:hover{color: #e2a750;}
.home-four .trailer2-img .popup-youtube:hover{color: #e2a750;}
.home-four ul.gallery-menu li.active,.home-four ul.gallery-menu li:hover {color: #e2a750;}
.home-four .section-titel.two h2, .home-four .section-titel.two p {color: #fff;}
.home-four .team-social ul li a {border: 1px solid #fff;color: #fff;}
.home-four .team-social ul li a:hover {background:#fff;color:#555;}
.home-four .slick-arrow i:hover {color:#e2a750;}

/* ============= 14. Breadcamp Area ============= */
.breadcamb-area {
  padding-bottom: 280px;
  padding-top: 215px;
}
.bradcamb-content h1 {
  color: #fff;
  font-size: 36px;
}
.bradcamb-content ul li {
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
}
.bradcamb-content ul li a {
  color: #fff;
  font-size: 14px;
}
.bradcamb-content ul li i, .top-titel ul li span {
  display: inline-block;
  padding: 0 6px 0 8px;
}
.bradcamb-content a span {padding: 0 8px 0 10px;}


/* ============= 14. Breadcamp Area ============= */
.tantox-area {
  padding-bottom: 130px;
  padding-top: 215px;
  max-height: 500px;
}
.tantox-content h1 {
  color: #fff;
  font-size: 36px;
}


.tantox-content {
  margin-top:300px; 
}

.tantox-content ul p {
  color: white;
  font-size: 30px;
  font-weight: 400;
  text-transform: uppercase;

}

.tantox-content ul x {
  color: #F7931E;
  font-size: 30px;
  font-weight: 400;
 
  text-transform: uppercase;
}
.tantox-content ul li a {
  color: #000;
  font-size: 14px;
}
.tantox-content ul li i, .top-titel ul li span {
  display: inline-block;
  padding: 0 6px 0 8px;
}
.tantox-content a span {padding: 0 8px 0 10px;}

/* ============= 15. Contact Us Page ============= */
.contact-us-area{position:relative;display:block;}
.section-titel-contact h3 {
  display: block;
  position: relative;
  font-weight: 700;
}
.section-titel-contact p{color:#555555;}
.section-titel-contact {
  margin-bottom: 45px;
  margin-left: 100px;
}
.section-titel-contact h3::after {
  border-bottom: 2px dashed #555;
  bottom: 10px;
  content: "";
  height: 70px;
  left: -100px;
  position: absolute;
  width: 70px;
}
.contact-us-map {
  padding-left: 100px;
  position: relative;
}
#googleMap {
  width: 100%;
  height: 390px;
}
/* Contact Address */
.contact-address {
  background: #e2a750 none repeat scroll 0 0;
  padding: 50px 15px 15px 0;
  position: absolute;
  right: 0;
  top: -80px;
  width: 370px;
}
.contact-adres-single {
  padding-bottom: 15px;
  padding-left: 140px;
}
.contact-adres-single h4 {
  color: #fff;
  position: relative;
}
.contact-adres-single h4::after {
  border-bottom: 1px dashed #fff;
  bottom: 10px;
  content: "";
  height: 70px;
  left: -100px;
  position: absolute;
  width: 70px;
}
.contact-adres-single > p {color: #fff;}

/* ============= 16. About Us Page ============= */
.about-area {
  display: block;
  position: relative;
}
.about-area .section-titel-contact {margin-bottom: 62px;}
.abt-sm-img {
  position: absolute;
  right: 70px;
  z-index: 99;
}
.abt-lrg-img {margin-left: 95px;}

/* ============= 17. Service Page ============= */
.service-box {
  display: block;
  margin-bottom: 40px;
  overflow: hidden;
  position: relative;
}
.service-content {
  background: #fafafa none repeat scroll 0 0;
  display: block;
  margin: 28px 0;
  overflow: hidden;
  padding: 50px 0 30px 50px;
  position: relative;
}
.service-text h3 {
  font-weight: 700;
  margin-bottom: 15px;
}
.service-text {
  float: left;
  width: 75%;
}
.service-text > p {
  color: #555555;
  font-size: 16px;
}
.service-icon i {
  color: #dddddd;
  float: right;
  font-size: 72px;
  position: absolute;
  right: 40px;
  top: 35px;
  transform: rotate(-29deg);
}

/* ============= 18. 404 Error ============= */
.outerwrap-404 {
  background-image: url("img/home-one/slider/1.png");
  background-size: cover;
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.error_main {
  left: 0;
  margin-top: -288px;
  position: absolute;
  right: 0;
  text-align: center;
  top: 50%;
}
.error_main h6 {
  color: #fff;
  font-size: 80px;
  line-height: 54px;
  margin-bottom: 30px;
  text-transform: capitalize;
}
.error_main > img {
  margin-bottom: 30px;
}
.error_main h2 {
  color: #fff;
  line-height: 25px;
  margin-bottom: 50px;
  padding-bottom: 8px;
  text-transform: capitalize;
}
.error_main .icon-studio {
  display: block;
  margin-bottom: 40px;
}
.error_main a {
  background: #e2a750 none repeat scroll 0 0;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  text-transform: uppercase;
  width:130px;
  height:35px;
  line-height:35px
}
.error_main a:hover{background:#555555;}

/* ============= 19. ScrollUp ============= */
#scrollUp {
  background: #ff6600 none repeat scroll 0 0;
  border-radius: 0px;
  bottom: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  color: #fff;
  font-size: 28px;
  height: 40px;
  line-height: 35px;
  position: fixed;
  right: 15px;
  text-align: center;
  transition: all 0.3s ease 0s;
  width: 40px;
  z-index: 200;
}
#scrollUp:hover{background:#000;}



/* buat gambar2 history dll */


/* Container holding the image and the text */
.container {
    position: relative;
    text-align: center;
    color: white;

}



/* conpare */
.cotainer1 {
    position: absolute;
    left: 50%;
    color: white;

}
/* Bottom left text */
.bottom-left p {
    position: absolute;
    bottom: 10px;
    left: 16px;

}

.bottom-left span {
    position: absolute;
    bottom: 8px;
    left: 16px;
    color: #F7931E;
}

/* Top left text */
.top-left {
    position: absolute;
    top: 8px;
    left: 16px;
}

/* Top right text */
.top-right {
    position: absolute;
    top: 8px;
    right: 16px;
}


/* Bottom right text 1*/
.bottom-right {
    position: absolute;
    bottom: -130px;
    right: 15%;
}
.bottom-right1 {
    position: absolute;
    bottom: -200px;
    right: 15%;
}
/* Bottom right text 1*/
.bottom-left3 p {
    position: absolute;
    bottom: -200px;
    left: -2%;
    color: #ffffff;
    font-size: 25px;
}

.textgambar {
    position: absolute;
    display: inline-block;
    width: 30%;
    top: 10%;
    right: 10%;
}


.textkiritengah {
    position: absolute;
    display: inline-block;
    width: 40%;
    top: 5%;
    left: 3%;   
}

.textkiritengah span {

    line-height: 1vw;  
}
.textkiritengah p {

    line-height: 1vw;  
}

/* ok text kiri tengah */


.textkanantengah {
    position: absolute;
    display: inline-block;
    width: 40%;
    top: 5%;
    right: 3%;   
}

.textkanantengah span {

    line-height: 1vw;  
}
.textkanantengah p {

    line-height: 1.5vw;  
}

/* ok text kiri tengah */
/* ok */
.textkananbawah {
    display: inline-block;
    position: absolute;
    bottom: 15%;
    right: 15%;
    
}
.textkananbawah p {
    line-height: 1.1vw;
}
.textkananbawah h1 {
    line-height: 1.1vw;
}

.textkananbawah h2 {
    line-height: 1.1vw;
}
.textkananbawah h3 {
    line-height: 1.1vw;
}
.textkananbawah h4 {

    line-height: 1.1vw;
}
.textkananbawah h5 {
    line-height: 1.1vw;
}
.textkananbawah h6 {
    line-height: 1.1vw;
}


.textkananbawah2 {
    display: inline-block;
    position: absolute;
    bottom: 15%;
    right: 30%;
    
}
.textkananbawah2 p {
    line-height: 1.1vw;
}
.textkananbawah2 h1 {
    line-height: 1.1vw;
}

.textkananbawah2 h2 {
    line-height: 1.1vw;
}
.textkananbawah2 h3 {
    line-height: 1.1vw;
}
.textkananbawah2 h4 {

    line-height: 1.1vw;
}
.textkananbawah2 h5 {
    line-height: 1.1vw;
}
.textkananbawah2 h6 {
    line-height: 1.1vw;
}
/* ok */

.textkananbawah3 {
    display: inline-block;
    position: absolute;
    bottom: 35%;
    width: 35%;
    right: 5%;
    
}
.textkananbawah3 p {
    line-height: 1.1vw;
}
.textkananbawah3 h1 {
    line-height: 1.1vw;
}

.textkananbawah3 h2 {
    line-height: 1.1vw;
}
.textkananbawah3 h3 {
    line-height: 1.1vw;
}
.textkananbawah3 h4 {

    line-height: 1.1vw;
}
.textkananbawah3 h5 {
    line-height: 1.1vw;
}
.textkananbawah3 h6 {
    line-height: 1.1vw;
}
/* ok */
.textkiribawah {
    display: inline-block;
    position: absolute;
    bottom: 15%;
    left: 15%;
    line-height: 1;
}
.textkiribawah h1 {
    line-height: 1.1vw;
}

.textkiribawah h2 {
    line-height: 1.1vw;
}
.textkiribawah h3 { 
    line-height: 1.1vw;
}
.textkiribawah h4 { 
    line-height: 1.1vw;
}
.textkiribawah h5 {
    line-height: 1.1vw;
}
.textkiribawah h6 {
    line-height: 1.1vw;
}

.textkiribawah2 {
    display: inline-block;
    position: absolute;
    bottom: 5%;
    left: 2%;
    line-height: 1;
}
.textkiribawah2 h1 {
    line-height: 1.1vw;
}

.textkiribawah2 h2 {
    line-height: 1.1vw;
}
.textkiribawah2 h3 { 
    line-height: 1.1vw;
}
.textkiribawah2 h4 { 
    line-height: 1.1vw;
}
.textkiribawah2 h5 {
    line-height: 1.1vw;
}
.textkiribawah2 h6 {
    line-height: 1.1vw;
}


.textkiriatas {
    display: inline-block;
    position: absolute;
    top: 5%;
    left: 20%;
    line-height: 1;
}
.textkiriatas h1 {
    line-height: 1.1vw;
}

.textkiriatas h2 {
    line-height: 1.1vw;
}
.textkiriatas h3 { 
    line-height: 1.1vw;
}
.textkiriatas h4 { 
    line-height: 1.1vw;
}
.textkiriatas h5 {
    line-height: 1.1vw;
}
.textkiriatas h6 {
    line-height: 1.1vw;
}



.textgambar4 {
    position: absolute;
    display: inline-block;
    width: 30%;
    bottom: 15%;
    left: 2%;

}


.textgambar4 h3 {
  font-size: 14px;
  /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 1.5vw; 
    color: white;
    line-height: 1vw;
    text-align: center;

}

.textgambar4 p {
  font-size: 14px;
  /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 1.5vw; 
    color: #F7931E;
    line-height: 1vw;
    text-align: center;
}

.textgambar5 {
    position: absolute;
    display: inline-block;
    width: 30%;
    top: 2%;
    left: 2%;

}

.textgambar5 h3 {
  font-size: 14px;
  /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 1.5vw; 
    color: white;
    line-height: 1vw;
    text-align: center;

}

.textgambar5 p {
  font-size: 14px;
  /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 1.5vw; 
    color: #F7931E;
    line-height: 1vw;
    text-align: center;
}


.textgambar6 {
    position: absolute;
    display: inline-block;
    width: 30%;
    top: 5%;
    left: -1%;

}

.textgambar6 h3 {
  font-size: 14px;
  /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 1.5vw; 
    color: white;
    line-height: 1vw;
    text-align: center;

}

.textgambar6 p {
  font-size: 14px;
  /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 1.5vw; 
    color: #F7931E;
    line-height: 1vw;
    text-align: center;
}


.textgambar8 {
    position: absolute;
    display: inline-block;
    width: 30%;
    top: 70%;
    right: 25%;

}

.textgambar8 h3 {
  font-size: 14px;
  /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 1vw; 
    color: white;
    line-height: 1vw;
    text-align: center;

}

.textgambar8 p {
  font-size: 14px;
  /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 1vw; 
    color: white;
    line-height: 1vw;
    text-align: center;
}

/* Bottom right text 1*/
.bottom-left1 p {
    position: absolute;
    bottom: -160px;
    left: 1%;
    color: #ffffff;
    font-size: 25px;
    font-weight: normal;
    font-family: Orbitron;
}
/* Centered text */
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    transform: translate(-50%, -50%);
}

.centered-left {
    position: absolute;
    top: 50%;
    left: 21%;
    transform: translate(-50%, -50%);
}

/* text judul */

.text-kiri-judul {
    text-align: left;
}





/* compare image */


.image-compare {
  text-align: center;
}
@media (min-width: 55em) {
  .image-compare .comparison-separator,
  .image-compare .comparison-control {
    transition: opacity .3s ease-in-out;
  }
}

/* Mostly Vendor styles minus a class change. */
.comparison-widget {
  display: inline-block;
  max-width: 80%;
  max-height: 80%;
  position: relative;
  overflow: hidden;
  vertical-align: top;
  cursor: pointer;
  user-select: none;
}

.comparison-widget * {
  box-sizing: border-box;
}

.comparison-widget:hover .comparison-separator {
  opacity: 1;
}

.comparison-widget:hover .comparison-control {
  opacity: 1;
}

.comparison-widget:hover .comparison-control::before,
.comparison-widget:hover .comparison-control::after {
  opacity: 1;
}

.comparison-widget--hidden {
  opacity: 0;
}

.comparison-item {
  height: 100%;
  width: 100%;
  background: #fff;
}

.comparison-item--first {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.comparison-item__content {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.comparison-item__content:hover .comparison-item__label {
  background: #fff;
}

.comparison-item--first .image-compare__image {
  width: auto;
  max-width: none;
  position: absolute;
  left: 0;
  top: 0;
}

.comparison-item__image {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none;
}

.comparison-item--first .comparison-item__label {
  left: 0;
  right: inherit;
}

.comparison-item__label {
  padding: 0 10px;
  position: absolute;
  top: 0;
  right: 0;
  text-transform: uppercase;
  font-size: .6875rem;
  color: #222;
  background: rgba(255, 255, 255, 0.65);
  z-index: 1;
  transition: background-color 300ms linear;
}

.comparison-separator {
  width: 2px;
  height: 100%;
  position: absolute;
  right: -1px;
  top: 0;
  z-index: 10;
  background: #fff;
  cursor: pointer;
  opacity: .7;
}

.comparison-control {
  width: 12px;
  height: 12px;
  margin-top: -6px;
  margin-left: -6px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff;
  border-radius: 100%;
  opacity: .7;
}

.comparison-control::before,
.comparison-control::after {
  content: '';
  display: block;
  width: 12px;
  height: 20px;
  margin-top: -10px;
  position: absolute;
  top: 50%;
  background: url("https://thinkaheadstudios.com/assets/images/icons/diff-arrow.png") 0 0 no-repeat;
}

.comparison-control::before {
  left: -15px;
}

.comparison-control::after {
  right: -15px;
  background-position: -12px 0;
}

.comparison-control__mask {
  width: 50px;
  height: 40px;
  position: absolute;
  top: -15px;
  left: -18px;
  background: #fff;
  opacity: 0;
}
 /* end compare image */

 /* news grading */

 @import url(https://fonts.googleapis.com/css?family=Raleway:400,600,700);
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
figure.snip1216 {
  font-family: 'Raleway', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 220px;
  max-width: 400px;
  width: 100%;
  background-color: #262626;
  color: #ffffff;
  text-align: center;
  font-size: 16px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
figure.snip1216 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
figure.snip1216 .image {
  max-height: 220px;
  overflow: hidden;
}
figure.snip1216 img {
  max-width: 100%;
  vertical-align: top;
  position: relative;
}
figure.snip1216 figcaption {
  padding: 20px;
  position: relative;
}
figure.snip1216 .date {
  background-color: #c0392b;
  top: 25px;
  color: #fff;
  left: 25px;
  min-height: 48px;
  min-width: 48px;
  position: absolute;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
}
figure.snip1216 .date span {
  display: block;
  line-height: 24px;
}
figure.snip1216 .date .month {
  font-size: 14px;
  background-color: rgba(0, 0, 0, 0.1);
}
figure.snip1216 h3,
figure.snip1216 p {
  margin: 0;
  padding: 0;
}
figure.snip1216 h1,figure.snip1216 h2,figure.snip1216 h3,figure.snip1216 h4,figure.snip1216 h5,
figure.snip1216 h6 {
  /* min-height: 50px; */
  color: #ff6600;
  display: inline-block;
  font-weight: normal;
  text-transform: uppercase;
  font-family: Orbitron;
}
figure.snip1216 p {
  font-size: 0.8em;
  margin-bottom: 20px;
  line-height: 1.6em;
}
figure.snip1216 footer {
  padding: 0 25px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #e6e6e6;
  font-size: 0.8em;
  line-height: 30px;
  text-align: right;
}
figure.snip1216 footer > div {
  display: inline-block;
  margin-left: 10px;
}
figure.snip1216 footer i {
  color: rgba(255, 255, 255, 0.2);
  margin-right: 5px;
}
figure.snip1216 a {
    left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: relative;

}
figure.snip1216:hover img,
figure.snip1216.hover img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


/* end news grading */



.containerabout {
  width: 100%;
  height: 250px;
}
.iframe-class {
  width: 50%;
  height: 150%;
  border: 1px solid red;
  overflow: auto;
}