/*---------------------- 
	Stylesheet Guide
------------------------
01. Typography		
02. MISC AND RE-USABLE ELEMENT
03. NAV MENU
04. PAGE TITLE
05. WORK GRID
06. ABOUT PAGE
07. SINGLE PORTFOLIO PAGE
08. JOURNAL PAGE
09. CONTACT PAGE
10. FOOTER


*/
/* =========================================================== 
    01. Typography
============================================================ */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  font-family: "Sanju Design";
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  background-color: #fff;
  font-size: 15px;
  color: #000;
  line-height: 27px;
  letter-spacing: 0.00em;
  font-weight: 400;
  border: 0px solid;
  border-left-width: 0px;
  border-left-style: solid;
  border-left-color: #ddd;
 /* -webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;-o-user-select: none;user-select: none; */
}
.mybrands {border: 0px solid;border-left-width: 6px;border-left-style: solid; border-image: linear-gradient(#ff0000, #ec008c, #049fd9, #50c9ed, #31a466) 1; padding-left: 30px;}
body {border-image: linear-gradient(#ED1C24, #ec008c, #049fd9, #50c9ed, #31a466, #31a466, #31a46 6) 0;}
body.stories {border-image: linear-gradient(#ED1C24, #ec008c, #049fd9, #50c9ed, #31a466, #31a466, #31a466) 1;}
body.adobe {border-image: linear-gradient(#ED1C24, #fff) 1;}
body.mgp {border-image: linear-gradient(#ec008c, #fff) 1;}
body.cisco {border-image: linear-gradient(#049fd9, #fff) 1;} 
body.pubmatic {border-image: linear-gradient(#50c9ed, #fff) 1;}
body.te {border-image: linear-gradient(#31a466, #fff) 1;}

a,
a:hover,
a:focus,
a:active,
input,
button,
textarea {
  outline: none;
  cursor: pointer;
}

a,
a:hover,
a:focus,
a:active {
  text-decoration: none;
}
a {color: #005ffb;font-weight: 600;}

button {
  border: none;
}
button:focus {
  outline: none;
}
button.btn-custom {padding:10px 20px; border: 3px solid #000; font-weight: 800; background: #fff; color: #000!important;text-transform: capitalize;font-size: 120%;border-radius: 6px;}
button.btn-custom:hover {background-color: #000; color: #fff!important; transition: 0.5s;}

a,
input,
textarea {
  -webkit-transition: all 0.3s ease-in-out 0.25s;
  -o-transition: all 0.3s ease-in-out 0.25s;
  transition: all 0.3s ease-in-out 0.25s;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Sanju Design";

}
/* Headings */
.page-title h1 {font-size: 44px;line-height: 54px;font-weight: 900;}
.page-title h2 {font-size: 32px;line-height: 40px;font-weight: 700;}
.page-title h3 {font-size: 20px;line-height: 32px;font-weight: 700;}
h1{font-weight: 700; margin-bottom: 30px;font-size: 40px; line-height:50px;}
h2{font-weight: 700; margin-bottom: 5px; font-size: 23px; line-height: 32px; }
h3{font-weight: 700; margin: 0px 0 0px 0; font-size: 22px; text-transform: ; line-height: 34px;}
div.tile h3{font-weight: 400; margin: 0px 0 20px 0; font-size: 18px; text-transform: ; line-height: 26px; display: ;}

h4{font-weight: 300; margin: 40px 0 7px 0; font-size: 26px; line-height: 36px;}
h5 {text-transform: uppercase;font-weight: 700;}
h5.underline{border-bottom: 2px solid #dd4d2c;padding-bottom: 10px;width: 180px;}
h5.underline.left{text-align: left}
.roleh5{text-align: center;padding-bottom: 10px;border-bottom: 2px solid #dd4d2c; display: block; clear: both; width: 200px;margin: 0 auto; margin-bottom: 30px; }

p {font-weight: 400;}

/* CUSTOM Tile Only */
div.tile{padding: 10px 40px; transition: box-shadow 0.7s ease-in-out;border: 0px solid #eee;border-radius: 6px; box-shadow: 0 0 20px 1px rgba(0,0,0,.04); border: 0px solid #efefef; background: #fff; margin-bottom: 30px;font-weight: 300; min-height: 320px;}
div.tile.case .story-logo {text-align: left; margin: 0 0 0px -30px;height: 80px;opacity: 0.8;transition: all .5s ease;border: 0px dashed #000;}
.design-logo{display: none;}
div.tile span.name{width: 100%; margin: 10px 20px 10px 0px; font-weight: 700;font-size: 28px; line-height: 36px; display: block; }
/* div.tile.case span.theme-color{color: #000; transition: all .5s ease;} */
div.tile:hover{background-color: #f6f6f6;;transition: 0.2s;}

a div.tile.case span.theme-color{color:#222;}
a div.tile.case:hover span.theme-color{color:#222;}

a div.tile.case:hover .story-logo{opacity: 1.0;filter: grayscale(0);}
.project-line {margin: 70px auto 70px auto;padding: 0;}
.project-line.top0 {margin: 0px auto 50px auto;padding: 0;}
.project-line.bottom0 {margin: 50px auto 0px auto;padding: 0;}
div.tile .fa-calendar-check {opacity: 0.5;}
.hero{margin-top: 120px;}
div.tile.case .details h3{margin: 0!important;}
div.tile.case .details p{display: ; text-transform: ; font-weight: bold; color: #aaa}
.top0 {margin-top: 10px!important;}

/* =========================================================== 
   STORY PAGE SLIDES
============================================================ */
.slide {margin: 150px 0; clear: both; display: inline-block;}
.slide.shadow {box-shadow: 0 0 50px 1px rgba(0,0,0,.07);padding: 10px 40px;}
.slide h2{font-weight: 700; font-size: 20px; line-height: 32px; margin-bottom: 0;}
.slide h3{font-weight: 700;}
.slide.shadow h5{font-weight: 400;}
.slide-text{font-weight: 400; font-size: 20px; text-transform: ; line-height: 32px; width: 50%;}
.slide-img{margin: 20px 0 0 0; width: 50%;}

.slide.left .slide-text{float: left; padding: 0 80px 0 0;}
.slide.left .slide-img{float: right;}
.slide.right .slide-text{float: right; padding: 0 0 0 80px; clear: both;}
.slide.right .slide-img{float: left;}
.details_new {padding-right: 100px; margin-bottom: 30px;}


.new-article {margin-bottom:250px;}
.new-article h2 {font-size: 32px; line-height: 36px;margin: 0;}
.new-article h5 {margin: 0 0 2px 0; line-height: ; color: #888}
.new-article p {margin: 0 0 40px 0; line-height: 24px; font-size: 17px; font-weight: 700;}
.new-article .text-content {padding-right: 30px;}

/* =========================================================== 
   CUSTOM CASE AND PROJECT
============================================================ */
div.bordered {border: 1px dashed #ddd; padding: 2px;min-height: 380px; font-size: 18px; color: ; line-height: 30px;}
div.bordered .triangle {width: 0;height: 0;border-top: 50px solid #ddd;border-right: 50px solid transparent;}
div.bordered p{margin: 40px;}
a div.tile.case,a div.tile.project{text-decoration: none; color: #000;background-color: ;}
div.tile.case .story-img {box-shadow: 0 0 50px 1px rgba(0,0,0,0.0)!important;text-align: center; margin: 15px auto 0px auto; width: 100%; height: 100%; overflow: hidden;}
img.design-logo {height:27px;margin: 5px 0 10px 0;filter: grayscale(0);opacity:1;transition: 0.9s;}
div.tile.case:hover img.design-logo{filter: grayscale(0);opacity: 1;}
div.tile.project{height: 250px!important;padding: 0; text-align: center;}
img.project-logo {text-align: center;margin: 0 auto 0px auto;display: block; width: 100%;}
img.project-vds{width: 100%; margin: 0 auto;}
.showcase{text-align: center;}
.showcase img,.showcase video{width: 75%!important;}
.showcase h1{margin-bottom: 40px;}

/* Dark Mode CSS */
.dark-mode-gradient-top   {background-image: linear-gradient(transparent, #888);height: 500px; display: none; margin: 0}
.dark-mode			      {background: #333;padding-bottom: 150px; padding-top: 50px;}
.dark-mode-gradient-bottom{background-image: linear-gradient(#333, transparent);height: 500px; display: none; margin: 0;}

.dark-mode h1, .dark-mode h3{color: #fff;text-shadow: 1px 1px 50px #555; margin-bottom: 10px;}
.dark-mode .story-img {box-shadow: 0 0 50px 1px rgba(0,0,0,0.4)!important;border: 1px solid #222;}


ul {
  margin: 0px 0 20px 30px;
  padding: 0;
}

ul li{margin-bottom: 5px;}

.clear {
  clear: both;
}

p{margin-bottom: 30px;}
.strong{font-weight: 700!important;}
strong{font-weight: 700!important;}

.flex {display: flex;flex-wrap: wrap;}
.mobile_views1{ overflow-x: hidden; overflow-y: hidden; height: 100%;}
.mobile_views1 img {width: 100%;}
img.index-logo{filter: grayscale(1);width: 100px;margin: 30px 40px;opacity: 0.7;}
i.fa-calendar-check {margin: 8px 5px 0 0;}
.index-arrow {font-size: 40px!important; color: #eee; margin: 30px 0 50px 10px; display: none;}


h1.metric {font-size: 50px!important; line-height: 60px!important;font-weight: 900; margin-top: 40px!important; margin-bottom: 15px;}
.hidden{display: none!important;}
.lock{position: absolute; top: 10px; right: 30px; font-size: 12px;font-weight: 700;text-transform: uppercase; color: #dd4d2c;}
.role{font-size: 14px;line-height: 23px;transition: all 1.5s ease;}
.page-content .role:hover{color: #000;}
.pub-concept {
  background-image: url("../images/projects/pubmatic/concept.png");
  background-color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-position-y: 95%;
  padding-bottom: 200px;	 
}
.homeslide {margin: 150px 0 150px 0; clear: both;}
.tesla_img{margin-top: 300px;}

.details .tag {margin: 40px 0!important;}
span.tag {background: #fbe672;padding: 5px 8px; color: #000; font-size: 12px; border-radius: 4px; font-weight: 700; display: ; }
.highlighted {background: #fbe672; }

/* =========================================================== 
   MISC AND RE-USABLE ELEMENT
============================================================ */
.dark-text {
  color: #000;
}

.bigfont {
  font-size: 50px;
}

.dark-light-text {
  color: #aeaeae;
}

.no-gutter > [class*='col'] {
  padding: 0;
}

.page-content {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0px 0;
  position: relative;
}

.page-content ol li {margin-bottom: 15px;}

.fixed-bg {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.light-txt {
  color: #999 !important;
}

.small-section {
  padding: 60px 0;
}

.dark-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

hr {
  border: none;
  border-top: 1px solid #ddd;
  width: 100%;
}

.dark-overlay {
  background-color: rgba(0, 0, 0, 0.7);
}

.heading-title {
  margin-bottom: 100px;
}
.heading-title h2 {
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5px;
}
.heading-title p {

}

.btn {
    padding: 10px;
    border-radius: 50em;
    transition: background-color .2s,color .2s,box-shadow .2s,-webkit-transform .2s;
    transition: transform .2s,background-color .2s,color .2s,box-shadow .2s;
    transition: transform .2s,background-color .2s,color .2s,box-shadow .2s,-webkit-transform .2s;
 }
   
.btn--accent {
    background-color:rgb(252, 69, 75);
    color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-shadow: 0 4px 20px hsla(var(--color-accent-h),var(--color-accent-s),var(--color-accent-l),0.5); 
}   

.m10{padding: 5px 0;}
.m20{padding: 10px 0;}
.m30{padding: 15px 0;}
.m40{padding: 20px 0;}
.m50{padding: 25px 0;}

.float-left{float: left;}
.float-right{float: right;}
.count{display: inline-block; border: 2px solid #000; width: 30px; height: 30px; border-radius: 30px; text-align: center;font-weight: 700; margin-right: 15px; font-size: 12px;}
.text-center{text-align: center;}

.story-img {box-shadow: 0 0 50px 1px rgba(0,0,0,0.1)!important;border-radius: 6px;padding: 0;border: 0px solid #ddd; overflow: hidden; background: transparent;}
img.greyscale {filter: grayscale(1);}



/* =========================================================== 
    03. NAV MENU
============================================================ */
.tabs {display: none;}
.tabs ul {text-align: left; margin: 0 0 20px 0;}
.tabs ul li {font-weight: 700;display: inline; margin: 0 20px;}
.tabs ul li a{color: #000;margin: 0; font-weight: 300;}
.tabs ul li:first-child{margin-left: 0;}

.menu-wrapper header nav ul li a,
.menu-wrapper .portfolio .filters ul li {
  -webkit-transition: .2s all;
  -o-transition: .2s all;
  transition: .2s all;
}

.menu-wrapper header {
  height: 90px;
  margin-top: 30px;
}

.menu-wrapper header .logo {
  float: left;
}
.menu-wrapper header .logo a {
  color: #000;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  border: 2px solid #333;
  border-radius: 0px;
  padding: 7px 5px;
}
.menu-wrapper header .logo a span.dot {font-size: 32px;}


.menu-wrapper header .logo img {
  max-width: 130px;
}

.menu-wrapper header .mobile-menu {
  width: 32px;
  height: 25px;
  position: absolute;
  cursor: pointer;
  right: 30px;
  top: 25px;
  display: none;
}

.menu-wrapper header .mobile-menu .line {
  height: 2px;
  width: 30px;
  display: inline-block;
  position: relative;
  background-color: #000;
  -webkit-transition: .2s all;
  -o-transition: .2s all;
  transition: .2s all;
}

.menu-wrapper header .mobile-menu.open .line {
  background-color: transparent;
}

.menu-wrapper header .mobile-menu .line:before {
  content: "";
  height: 2px;
  width: 30px;
  position: absolute;
  top: -7px;
  background-color: #000;
  -webkit-transition: .2s all;
  -o-transition: .2s all;
  transition: .2s all;
}

.menu-wrapper header .mobile-menu.open .line:before {
  -webkit-transform: translateY(7px) rotateZ(-45deg);
  -moz-transform: translateY(7px) rotateZ(-45deg);
  -ms-transform: translateY(7px) rotateZ(-45deg);
  -o-transform: translateY(7px) rotateZ(-45deg);
  transform: translateY(7px) rotateZ(-45deg);
}

.menu-wrapper header .mobile-menu .line:after {
  content: "";
  height: 2px;
  width: 30px;
  position: absolute;
  top: 7px;
  background-color: #000;
  -webkit-transition: .2s all;
  -o-transition: .2s all;
  transition: .2s all;
}

.menu-wrapper header .mobile-menu.open .line:after {
  -webkit-transform: translateY(-7px) rotateZ(45deg);
  -moz-transform: translateY(-7px) rotateZ(45deg);
  -ms-transform: translateY(-7px) rotateZ(45deg);
  -o-transform: translateY(-7px) rotateZ(45deg);
  transform: translateY(-7px) rotateZ(45deg);
}

.menu-wrapper header nav {
  float: right;
  margin-right: 30px;
}

.menu-wrapper header nav ul li {
  display: inline-block;
  margin-left: 35px;
  position: relative;
  text-transform: uppercase;
  color: #ccc;
}

.menu-wrapper header nav ul li:first-child {
  margin-left: 0;
}

.menu-wrapper header nav ul li a {
  color: #000;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  text-decoration: none;
  padding-bottom: 2px;
}

.menu-wrapper header nav > ul > li > a {
  border-bottom: 0px solid #848484;
}

.menu-wrapper header nav ul li ul {
  position: absolute;
  top: 100%;
  min-width: 180px;
  background-color: #000;
  line-height: 25px;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

.menu-wrapper header nav ul li:hover ul {
  opacity: 1;
  visibility: visible;
}

.menu-wrapper header nav ul li ul li {
  margin: 0;
  display: block;
  position: relative;
}

.menu-wrapper header nav ul li ul li a {
  display: block;
  font-size: 11px;
  font-weight: 400;
  padding: 15px 20px;
  line-height: 15px;
  color: #C0BDBF;
}
.menu-wrapper header nav ul li ul li a:hover {
  text-indent: 10px;
  background-color: #2d2d2d;
}

.menu-wrapper header nav ul li ul li ul {
  position: absolute;
  left: 100%;
  top: 0;
  opacity: 0 !important;
  visibility: hidden !important;
  border-left: 1px solid #4C4C4C;
}

.menu-wrapper header nav ul li ul li:hover ul {
  opacity: 1 !important;
  visibility: visible !important;
}

/* =========================================================== 
   04. PAGE TITLE
============================================================ */
.page-title {
  padding: 0px 0 0 0;
}



.page-title p {
  color: #000;
  font-weight: 300;
  font-size: 18px;
}

.heading-border {
  width: 50px;
  margin: 30px 0px;
}

/* =========================================================== 
    05. WORK GRID STYLE
============================================================ */
.atom-portfolio-filter {
  margin-bottom: 30px;
}
.atom-portfolio-filter a {
  color: #000;
  font-size: 16px;
  text-transform: capitalize;
  margin: 0 10px;
  padding-bottom: 10px;
  position: relative;
  letter-spacing: 1px;
}
.atom-portfolio-filter a:hover:after, .atom-portfolio-filter a:focus:after {
  opacity: 1;
  bottom: -5px;
}
.atom-portfolio-filter a:after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  height: 10px;
  width: 10px;
  border: 2px solid;
  border-radius: 50%;
  opacity: 0;
  transition: all .3s ease;
}
.atom-portfolio-filter a.active:after {
  opacity: 1;
  bottom: -5px;
}

.atom-work-item {
  padding-left: 0;
  padding-bottom: 15px;
}
.atom-work-item a {
  position: relative;
  display: block;
  overflow: hidden;
  color: #000;
}
.atom-work-item .desc {
  position: absolute;
  top: 70%;
  left: 30%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.atom-work-item .desc h5 {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 700;
  word-spacing: 3px;
  color: #000;
}
.atom-work-item .desc p {
  text-transform: capitalize;
  font-size: 14px;
  color: #000;
  font-weight: 500;
}

.hover-one .atom-work-item a:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  transition: all 0.3s ease 0.1s;
  background-color: rgba(255, 255, 255, 0.8);
  opacity: 0;
}
.hover-one .atom-work-item img {
  transition: all 0.5s ease 0s;
}
.hover-one .atom-work-item .desc {
  text-align: left;
}
.hover-one .atom-work-item .desc h5,
.hover-one .atom-work-item .desc p {
  transition: all 0.3s ease 0.2s;
  opacity: 0;
}
.hover-one .atom-work-item .desc h5 {
  transform: translateY(60%);
}
.hover-one .atom-work-item .desc p {
  transform: translateY(-60%);
}
.hover-one .atom-work-item:hover a:after {
  opacity: 1;
}
.hover-one .atom-work-item:hover img {
  transform: scale(1.55, 1.55);
}
.hover-one .atom-work-item:hover h5,
.hover-one .atom-work-item:hover p {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================== 
    06. ABOUT PAGE
============================================================ */
.about-fullimg {
  height: 500px;
}

/* =========================================================== 
    07. SINGLE PORTFOLIO PAGE
============================================================ */
.project-info {
  margin-bottom: 20px;
}
.project-info li {
  font-weight: 700;
  padding: 10px 0;
}
.project-info li span {
  font-weight: 300;
}

.parallax-image {
  height: 100vh;
}

.full-width {
  overflow: hidden;
  height: 500px;
}

.full-width img {
  width: 100%;
  height: auto;
}

.carousel.slide .carousel-control {
  width: 50%;
  z-index: 90;
}

.carousel.slide a.right.carousel-control:hover {
  cursor: url(../images/arrow_right.png), auto;
}

.carousel.slide a.left.carousel-control:hover {
  cursor: url(../images/arrow_left.png), auto;
}

.carousel.slide a.left.carousel-control,
.carousel.slide a.right.carousel-control {
  background-image: none;
}

.carousel.slide .carousel-fade .carousel-control {
  z-index: 5000;
}

.carousel.slide .carousel-control:hover,
.carousel.slide .carousel-control:focus {
  opacity: 1;
  filter: alpha(opacity=100);
}

/**/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 5000;
}

@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);
  }
}
/* ----------------------------------------------------------------
	bs slider
-----------------------------------------------------------------*/
.bs-hero.full-screen .carousel-indicators {
  z-index: 1200;
}

.bs-hero.full-screen .carousel.slide .carousel-control {
  width: 30%;
  margin-top: 180px;
  margin-bottom: 120px;
}

/* =========================================================== 
    08. JOURNAL PAGE
============================================================ */
.blog-list {
  margin-bottom: 30px;
}
.blog-list .blog-title {
  font-size: 18px;
  margin-bottom: 15px;
  line-height: 1.8;
  letter-spacing: 1px;
}
.blog-list .blog-title a {
  color: #000;
  font-weight: 600;
}
.blog-list hr {
  border: none;
  border-top: 1px solid #b7b7b7;
  margin: 0 0 24px 0;
  width: 100%;
}
.blog-list .desk {
  padding: 20px 0;
}
.blog-list p {
  text-align: justify;
  color: #000;
  margin-bottom: 30px;
}
.blog-list .date {
  margin-bottom: 18px;
  display: block;
  color: #aeaeae;
  transition: all 0.3s ease;
}
.blog-list iframe {
  width: 100%;
}
blockquote {
  font-size: 15px;
  line-height: 24px;
  font-style: ;
  padding: 15px 30px;
  font-weight: 300;
  transition: all 0.3s ease;
  color: #;
  margin: 5px 0 0 0;
}
.blog-list blockquote:hover {
  color: #fff;
}
.blog-list blockquote .author {
  display: block;
  text-align: right;
  font-size: 11px;
}

.post-title {
  font-size: 45px;
  font-weight: 900;
}

.post-meta {
  margin-bottom: 20px;
}
.post-meta li i {
  margin-right: 5px;
}

.blog-entry p,
.blog-entry blockquote,
.blog-entry ul li {
  color: #000;
}
.blog-entry p {
  margin-bottom: 25px;
}
.blog-entry blockquote {
  background-color: #f5f5f5;
  padding: 32px;
  line-height: 46px;
  font-size: 25px;
  font-style: italic;
  font-weight: 300;
}
.blog-entry .bullet {
  padding-left: 15px;
}

.comments-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comments-list li {
  margin-bottom: 10px;
}
.comments-list ul {
  list-style: none;
  padding-left: 77px;
}
.comments-list .avatar {
  float: left;
  margin-right: 20px;
  overflow: hidden;
}
.comments-list .avatar img {
  max-height: 70px;
}
.comments-list .comment {
  overflow: hidden;
}
.comments-list .comment h6 {
  display: inline-block;
  padding-top: 5px;
  margin-right: 15px;
  font-weight: 600;
}
.comments-list .comment p {
  color: #000;
}

.atom-form input,
.atom-form textarea {
  width: 100%;
  height: 40px;
  margin-bottom: 20px;
  border: 1px solid #d1d1d1;
  background-color: #f5f5f5;
  padding: 0 20px;
}
.atom-form textarea {
  height: 140px;
  padding: 20px;
}

/* =========================================================== 
    09. CONTACT PAGE
============================================================ */
#google-map {
  height: 500px;
  width: 100%;
}

/* =========================================================== 
   10. FOOTER STYLE
============================================================ */
.atom-footer-area {margin-top: 70px;}
.copyright img {
  float: left;
  margin-right: 20px;
  margin-top: 7px;
}
.copyright p {
  overflow: hidden;
  margin-bottom: 0;
  padding-top: 15px;
}

.social-icons {
  margin-top: 20px;
  text-align: right;
}
.social-icons a {
  display: inline-block;
  height: 30px;
  width: 30px;
  background-color: ;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  color: #000;
  border-radius: 4px;
}
.social-icons a:hover {
  color: inherit; background: transparent;
}




a.zerobox img{border: 1px solid #fff; box-sizing:border-box;}
a.zerobox img:hover {opacity: 1.0;border: 1px solid red;}
a.zerobox i.fa{color: #fff;font-size: 40px;position: relative;bottom: 60px; right: -20px;z-index: 10000;}