/* TABLE OF CONTENT
    -------------------------------------------------- 
    
    1. HEADINGS
    2. NAVBAR
    3. SLIDER
    4. ABOUT US
    5. SERVICE
    6. PORTFOLIO
    7. TEAM
    8. PRICE TABLES
    9. PROCESS
    10. CLIENTS
    11. FACTS
    12. CONTACT    
    13. FOOTER
    14. FEATURE STYLES
    15. RESPONSIVE CSS
     
    */

/*Author: SOMU NATH. My custom rules*/
.hearingzz {
  background-color: #4472c4;
  color: #fff;
  text-align: center;
  padding: 10px 0px;
  font-size: 18px;
}
.hearingzz:hover {
  box-shadow: 0px 1px 10px #d7bde2;
}
.imageleft {
  float: left;
  margin: 0px 10px 0px 0px;
}

.imagerignt {
  float: right;
  margin: 10px 0px 10px 10px;
}

.Ordertablepage th,
td {
  color: #000;
  border: 1px solid #dedbdb;
  text-align: center;
}
/*.table td, a{
  color: #566573;
}
.table a:hover{
  color: #000;
}*/
/*.Ordertablepage a{
  color: #566573;
}
.Ordertablepage a:hover{
  color: #000;
}*/
.Ordertablepage {
  background-color: #fff;
  padding: 20px 0;
}
.ordermarginz {
  padding: 20px 20px;
}
.bordertablez {
  border: 1px solid #dedbdb;
  box-shadow: 3px 3px 6px #444;
}

#div_size {
  background: #e5e7e9;
  display: block;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 900;
}
.text_anim {
  text-shadow: 0 2px 0 #ccc, 0 2px 0 #c9c9c9, 0 2px 0 #bbb, 0 2px 0 #b9b9b9,
    0 2px 0 #aaa, 0 2px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2),
    0 20px 20px rgba(0, 0, 0, 0.15);
}
/*.navbar-nav > li{
    padding-left:7px;
    padding-right:7px;
  }*/
/* .navbar-nav > li {
  margin-left: 5px;
  margin-right: 5px;
} */
.slider_set {
  padding: 7px 0px 6px 0px;
}
.links_set {
  padding: 7px;
}

.asidebar_slider {
  /*background-color: #000000;*/
  box-shadow: 0px 1px 10px #d7bde2; /*#edbb99*/ /*#444;*/
}
.aside a {
  color: #222;
}
.aside a:hover {
  text-decoration: none;
}
.aside p:hover {
  background-color: #7c7a7a;
  box-shadow: 10px 4px 15px #444;
  transition: all 0.6s ease 0s;
  transform-style: preserve-3d;
}
.asidebar {
  background-color: #fdfefe;
  padding: 10px 20px 25.3px 20px;
  box-shadow: 0px 1px 10px #d7bde2; /*#edbb99 ;*/ /*#444;*/
  font-size: 16px;
}

.blockz {
  margin-top: 5px;
}
.blockinner {
  background-color: white;
  margin: 0px 8px;
  padding: 5px 20px;
  box-shadow: 0px 1px 5px #444;
}
.blockinner_rpo {
  background-color: #f39c12; /*#4472c4;*/
  height: 40px;
  margin: 0px 8px;
  padding: 10px 10px 10px 10px;
  box-shadow: 0px 1px 5px #444;
}

.blockinner_common {
  background-color: white;
  margin: 0px 0px;
  padding: 0px 0px;
  box-shadow: 0px 1px 5px #444;
}

.blockinner_large {
  background-color: white;
  margin: 0px 0px;
  padding-left: 20px;
  padding-right: 20px;
  box-shadow: 0px 1px 5px #444;
}

.blockinner_common .iconz2 {
  list-style-image: url("if_bullet_black_10146.png");
}
.blockinner_common .iconz21 {
  list-style-image: url("white.png");
}

.blockinner .iconz1 {
  list-style-image: url("icon.png");
}
.blockinner .iconz11 {
  list-style-image: url("icon1.png");
}
.blockinner .iconz2 {
  /*list-style-image: url('icon.png');*/
  list-style-image: url("if_bullet_black_10146.png");
}
.blockinner .iconz21 {
  /*list-style-image: url('icon1.png');*/
  list-style-image: url("white.png");
}
.blockinner .iconz2 li {
  padding: 5px 0;
}
/*.blockinnerhover:hover{
  background-color: #c3c6cb;
  transition: all 0.6s ease 0s;
  transform-style: preserve-3d;
  color: #000000;
}*/
.iconz1 li {
  padding: 10px 0;
}
.iconz2 li {
  padding: 3.5px 0;
}
.blockheadz {
  background-color: #4472c4;
  padding: 10px 20px;
  color: #ffffff;
  font-size: 20px;
}
.latestnews {
  position: relative;
  z-index: 2;
  color: #000;
}
.div_sz {
  height: 300px;
}
.newzz {
  position: relative;
  z-index: 2;
  height: 240px;
  color: #222;
  font-size: 13px;
  margin: 5px 0;
}
.viewzz {
  color: #000;
}
.viewzz h4 {
  padding-right: 25px;
}
.news-wrap {
  padding: 0 10px;
  color: #000;
}
.news-wrap li {
  background-color: #f0f0f0;
  padding-top: 9px;
  padding-bottom: 1px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 5px;
  border-left: 4px solid #4472c4;
}

.latestnews li {
  list-style-type: none;
}
.latestnews p {
  text-align: justify;
  color: #000;
}
.latestnews h3 {
  color: #000;
  margin: 0;
  padding: 7px 15px;
  padding-top: 20px;
}
.latestnews h4 {
  text-align: right;
}
.iconz1 li a {
  color: #444;
}
.iconz2 li a {
  color: #444;
}
.iconz1 li a:hover {
  color: #4472c4;
  text-decoration: none;
}
.iconz2 li a:hover {
  color: #4472c4;
  text-decoration: none;
}
/*.news-wrap li a p{
    color: #000;
    }*/
.news-wrap a:hover {
  text-decoration: none;
}
.foocontent {
  margin-top: 10px;
  /*width: 320px;*/
  height: 130px;
  margin-bottom: 10px;
  padding-bottom: 20px;
}

.orderforutilityz a {
  color: #444;
}
.orderforutilityz a:hover {
  text-decoration: none;
}
.orderforutilityz p:hover {
  background-color: #aaa;
  transition: all 0.6s ease 0s;
  transform-style: preserve-3d;
}

.orderbars {
  background-color: #fff;
  padding: 10px 10px;
  text-align: center;
  box-shadow: 0px 0px 4px #444;
}
.orderbars1 {
  background-color: #00ccff;
  padding: 10px 10px;
  text-align: center;

  margin-bottom: 0px;
}

td,
th {
  color: #00000;
  text-align: center;
}

th {
  background-color: #f39c12;
}

ul.nav li.dropdown:hover > ul.dropdown-menu {
  display: block;
}

.border_style {
  border: 2px solid #000000;
}
.text_col {
  color: #000000;
}

/*My Custom rules ends*/

/* 1. HEADINGS
  -------------------------------------------------- */

h1 {
  font-size: 60px;
  text-transform: uppercase;
  text-align: center;
}

h2 {
  font-size: 50px;
  text-align: center;
}

h3 {
  font-size: 40px;
  text-align: center;
}

h4 {
  font-size: 30px;
}

h5 {
  font-size: 20px;
  text-align: center;
}

h6 {
  font-size: 12px;
}

.subhead {
  color: #fff;
  text-align: center;
}

/* 2. NAVBAR
  -------------------------------------------------- */

#menu {
  z-index: 1000;
}

/* 3. SLIDER BACKGROUND
  -------------------------------------------------- */

#top-slider {
  width: 100%;
  height: 600px;
  text-align: center;
  z-index: 100;
}

#top-slider .slider-bg {
  /*background: url(../img/carousel-bg.jpg) 0 0 repeat fixed;*/
  margin: 0 auto;
  padding: 0;
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 800px;
}

/* 4. ABOUT US
  -------------------------------------------------- */

/* BUTTONS (YOU CAN DELET THIS IF YOU DONT USE IT) */

.btn-buy {
  text-align: right;
  margin: 0px 0px 60px 0px;
}

.btn-like {
  text-align: left;
  margin: 0px 0px 60px 0px;
}

.btn-top {
  text-transform: uppercase;
  font-size: 20px;
  padding: 10px 20px;
}

/* #Skills */

.skills {
  padding-top: 5px;
  padding-bottom: 20px;
}

#skillbar {
  list-style: none;
  width: auto;
  margin: 5px auto 0;
  position: relative;
  padding: 5px 0;
}

#skillbar li {
  margin-top: 35px;
  margin-bottom: 15px;
  background: #dcd5d5;
  height: 10px;
}

#skillbar li p {
  padding-top: 15px;
  text-align: left;
  margin-left: 2px;
  font-size: 12px;
}

.skillbar {
  height: 6px;
  margin: 2px 2px;
  position: absolute;
}

.html {
  width: 95%; /* YOUR SKILL VALUE HERE */
  -moz-animation: html 15s ease-out;
  -webkit-animation: html 15s ease-out;
  background-color: #e67e22;
}

.css {
  width: 90%; /* YOUR SKILL VALUE HERE */
  -moz-animation: css 15s ease-out;
  -webkit-animation: css 15s ease-out;
  background-color: #e67e22;
}

.java {
  width: 55%; /* YOUR SKILL VALUE HERE */
  -moz-animation: java 15s ease-out;
  -webkit-animation: java 15s ease-out;
  background-color: #e67e22;
}

.php {
  width: 65%; /* YOUR SKILL VALUE HERE */
  -moz-animation: php 15s ease-out;
  -webkit-animation: php 15s ease-out;
  background-color: #e67e22;
}

.psd {
  width: 85%; /* YOUR SKILL VALUE HERE */
  -moz-animation: psd 15s ease-out;
  -webkit-animation: psd 15s ease-out;
  background-color: #e67e22;
}

/* animation keyframes */

@-moz-keyframes html {
  0% {
    width: 0px;
  }
  100% {
    width: 95%;
  }
}
@-moz-keyframes css {
  0% {
    width: 0px;
  }
  100% {
    width: 90%;
  }
}
@-moz-keyframes java {
  0% {
    width: 0px;
  }
  100% {
    width: 55%;
  }
}
@-moz-keyframes php {
  0% {
    width: 0px;
  }
  100% {
    width: 65%;
  }
}
@-moz-keyframes psd {
  0% {
    width: 0px;
  }
  100% {
    width: 85%;
  }
}

@-webkit-keyframes html {
  0% {
    width: 0px;
  }
  100% {
    width: 95%;
  }
}
@-webkit-keyframes css {
  0% {
    width: 0px;
  }
  100% {
    width: 90%;
  }
}
@-webkit-keyframes java {
  0% {
    width: 0px;
  }
  100% {
    width: 55%;
  }
}
@-webkit-keyframes php {
  0% {
    width: 0px;
  }
  100% {
    width: 65%;
  }
}
@-webkit-keyframes psd {
  0% {
    width: 0px;
  }
  100% {
    width: 85%;
  }
}

/* 5. SERVICE
  -------------------------------------------------- */

.service {
  padding: 0px 40px 20px 40px;
}

.service-col {
  margin: 0px 10px;
  padding: 30px 10px;
  -webkit-transition: ease-out 0.6s;
  -moz-transition: ease-out 0.6s;
  -o-transition: ease-out 0.6s;
  transition: ease-out 0.6s;
}

.service-col h4 {
  border-bottom: 1px solid transparent;
  padding: 10px 0px;
}

.service-col p {
  padding: 10px;
}

.service-col:hover {
  -webkit-transition: all 0.6s linear;
  -moz-transition: all 0.6s linear;
  -o-transition: all 0.6s linear;
  -ms-transition: all 0.6s linear;
  transition: all 0.6s linear;
}

.service-col:hover p {
  padding: 10px;
}

.service-col:hover > div {
  text-shadow: 1px -1px 0px rgba(0, 0, 0, 0.5);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

/* Icon rotation effect  */

.rotate {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
  border-radius: 50%;
}

.rotate:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  border-radius: 50%;
}

/* Icons  */

.icon-wrench,
.icon-mobile {
  background: url("../img/icon-bg.png") repeat-x center center;
  position: relative;
  display: inline-block;
  width: 140px;
  height: 140px;
  padding-top: 25px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

.icon-desktop {
  background: url("../img/icon-bg.png") repeat-x center center;
  position: relative;
  display: inline-block;
  width: 140px;
  height: 140px;
  padding-top: 22px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

.webdesign {
  z-index: 1000;
}

/* Hire Us Button  */

.service-btn {
  margin-top: 40px;
}

.btn-hire {
  text-transform: uppercase;
  font-size: 20px;
  padding: 10px 20px;
}

/* 6. PORTFOLIO
  -------------------------------------------------- */

/* Filter */

.filter-list ul {
  text-align: center;
}

.filter-list ul li {
  margin-left: 5px;
  cursor: pointer;
}

/* images grid and hover effect */

.gallery {
  margin: 34px 0px 0px 0px;
}

#Grid .mix {
  opacity: 0;
  display: none;
}

.images {
  margin: 10px 0px;
}

.overlay {
  position: relative;
  overflow: hidden;
}

.caption {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.75);
  width: 100%;
  height: 100%;
  padding: 2%;
  display: none;
  text-align: center;
  z-index: 2;
}

.caption h5 {
  margin-top: 15%;
  margin-left: 10px;
  margin-right: 10px;
}

.caption p {
  font-size: 12px;
}

/* 7. TEAM
  -------------------------------------------------- */

.team {
  margin: 0px 10px;
  padding: 30px 10px;
  -webkit-transition: ease-out 0.6s;
  -moz-transition: ease-out 0.6s;
  -o-transition: ease-out 0.6s;
  transition: ease-out 0.6s;
}

.job {
  font-size: 12px;
}

.team p {
  padding: 10px;
}

.team:hover {
  -webkit-transition: all 0.6s linear;
  -moz-transition: all 0.6s linear;
  -o-transition: all 0.6s linear;
  -ms-transition: all 0.6s linear;
  transition: all 0.6s linear;
}

.team:hover p {
  padding: 10px;
}

/* Team Member Images  */

.member1 {
  background: url("../img/team/1.jpg") center center no-repeat; /* YOUR IMAGE HERE */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
  display: inline-block;
  width: 140px;
  height: 140px;
  padding-top: 25px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

.member2 {
  background: url("../img/team/1.jpg") center center no-repeat; /* YOUR IMAGE HERE */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
  display: inline-block;
  width: 140px;
  height: 140px;
  padding-top: 25px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

.member3 {
  background: url("../img/team/1.jpg") center center no-repeat; /* YOUR IMAGE HERE */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
  display: inline-block;
  width: 140px;
  height: 140px;
  padding-top: 25px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

.member4 {
  background: url("../img/team/1.jpg") center center no-repeat; /* YOUR IMAGE HERE */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
  display: inline-block;
  width: 140px;
  height: 140px;
  padding-top: 25px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

/* Team Member Hover Images  */

.team-member1:hover > div {
  background: url("../img/team/backside/1.jpg") center center no-repeat; /* YOUR IMAGE HERE */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

.team-member2:hover > div {
  background: url("../img/team/backside/1.jpg") center center no-repeat; /* YOUR IMAGE HERE */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

.team-member3:hover > div {
  background: url("../img/team/backside/1.jpg") center center no-repeat; /* YOUR IMAGE HERE */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

.team-member4:hover > div {
  background: url("../img/team/backside/1.jpg") center center no-repeat; /* YOUR IMAGE HERE */
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

/* TEAM MEMBER SOCIAL ICONS */

.social-team a {
  padding: 0px 5px;
}

.icon-social {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

/* 8. PRICE
  -------------------------------------------------- */

.tables {
  padding-bottom: 60px;
}

.price-table {
  text-align: center;
  margin-bottom: 20px;
}

.price-table:hover {
  -webkit-transition: all 0.6s linear;
  -moz-transition: all 0.6s linear;
  -o-transition: all 0.6s linear;
  -ms-transition: all 0.6s linear;
  transition: all 0.6s linear;
}

.price-table-body {
  padding: 0px;
  text-align: center;
}

.price-table-heading h3 {
  font-weight: 400;
  font-size: 28px;
  line-height: 1em;
  padding: 30px;
  margin: 0;
}

.the-price {
  padding: 20px;
  margin: 0;
}

.the-price h1 {
  font-size: 50px;
  line-height: 1em;
  margin: 0;
}

.month {
  font-size: 16px;
}

.price-table-footer {
  padding: 30px;
}

.table-feature {
  margin-top: -60px;
  -webkit-transition: ease-out 0.6s;
  -moz-transition: ease-out 0.6s;
  -o-transition: ease-out 0.6s;
  transition: ease-out 0.6s;
}

.table-feature:hover {
  -webkit-transition: all 0.6s linear;
  -moz-transition: all 0.6s linear;
  -o-transition: all 0.6s linear;
  -ms-transition: all 0.6s linear;
  transition: all 0.6s linear;
}

/* 9. PROCESS
  -------------------------------------------------- */

/* OUR PROCESS SECTION */

.our-process {
  width: 100%;
  position: relative;
  min-height: 460px;
  text-align: center;
  margin: 10px 0;
}

.process {
  position: relative;
  height: 320px;
  padding-top: 40px;
  width: 960px;
  margin: 0 auto;
}

.process-con {
  position: relative;
  margin: 0 20px;
  float: left;
  width: auto;
  height: 320px;
}

.process-con h5 {
  font-weight: 400;
  margin-top: 15px;
  text-align: center;
  position: relative;
}

.process-con.img1 .process-img {
  margin-top: 70px;
}

.process-con.img2 .process-img {
  margin-top: 60px;
}

.process-con.img3 .process-img {
  margin-top: 50px;
}

.process-img {
  background: url("../img/icon-bg.png") repeat-x center center;
  text-shadow: 1px -1px 0px rgba(0, 0, 0, 0.5);
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  padding-top: 25px;
}

/* 10. CLIENTS
  -------------------------------------------------- */

.testemonials p {
  text-align: center;
  font-size: 20px;
}

/*	CLIENT CAROUSEL SETTINGS  */

#clientslider {
  display: none;
}

.nbs-flexisel-container {
  position: relative;
  max-width: 100%;
}

.nbs-flexisel-ul {
  position: relative;
  width: 9999px;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  text-align: center;
}

.nbs-flexisel-inner {
  overflow: hidden;
  float: left;
  width: 100%;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.nbs-flexisel-item {
  float: left;
  margin: 0px;
  padding: 0px;
  cursor: pointer;
  position: relative;
  line-height: 0px;
}

.nbs-flexisel-item img {
  width: 100%;
  cursor: pointer;
  position: relative;
  margin-top: 40px;
  margin-bottom: 10px;
  max-width: 100px;
  max-height: 100px;
}

/* CLIENT SLIDER Navigation  */

.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
  width: 30px;
  height: 30px;
  margin-top: 15px;
  margin-left: 10px;
  cursor: pointer;
  z-index: 100;
  float: left;
}

.nbs-flexisel-nav-left {
  left: 10px;
  background: url(../img/button-previous.png) no-repeat;
}

.nbs-flexisel-nav-right {
  background: url(../img/button-next.png) no-repeat;
}

/* 11. FUN FACTS
  -------------------------------------------------- */

.fun-facts {
  margin: 60px 0px !important;
}

.fun-fact {
  padding: 10px 0px;
  text-align: center;
}

/* 12. CONTACT
  -------------------------------------------------- */

#map {
  height: 500px;
  z-index: 400 !important;
  position: relative;
}

iframe {
  padding-bottom: -10px;
  width: 100%;
  height: 500px;
}

/* SOCIAL MEDIA ICON DIVIDER  */

#divider {
  width: 100%;
  height: 500px;
  text-align: center;
  z-index: 200;
}

#divider .divider-bg {
  background: url("../img/img-divider-img.jpg") repeat 0 0 fixed;
  margin: 0 auto;
  padding: 0;
  position: absolute;
  z-index: 200;
  width: 100%;
  height: 500px;
}

.social-icons {
  padding-top: 220px;
}

a.social-media {
  padding: 10px;
  position: relative;
  z-index: 300;
  text-align: center;
}

/* 13. FOOTER
  -------------------------------------------------- */

/* BOTTOM CONTENT */

.bottom-con {
  padding-bottom: 5px;
}

.bottom-con h5 {
  text-align: center;
}

.bottom-con p {
  padding-left: 5%;
  padding-right: 5%;
  text-align: left;
  color: #fff;
}

.newsletter {
  margin-top: 15px;
  padding: 0px 50px 0px 50px;
  text-align: center;
}

/* GOING UP ARROW */

.up {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: -85px;
  left: 50%;
  margin-left: -50px;
  -webkit-transition: ease-out 0.5s;
  -moz-transition: ease-out 0.5s;
  -o-transition: ease-out 0.5s;
  transition: ease-out 0.5s;
  z-index: 1000;
}

.up:hover {
  top: -50px;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  -ms-transition: all 0.5s linear;
  transition: all 0.5s linear;
  z-index: 1000;
}

.up span {
  font-size: 40px;
  margin-top: 45px;
  margin-left: 32px;
}

/* 14. FEATURE STYLES
  -------------------------------------------------- */

/* HEADING BOARDERS */

.head-border-white {
  height: 2px;
  width: 90%;
  margin: 0 auto;
  line-height: 2px;
}

.head-border-grey {
  width: 20%;
  height: 1px;
}

/* IMAGE STYLES  */

/* rotate effect  */

#rotate {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
  border-radius: 50%;
}

#rotate:hover {
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  border-radius: 50%;
}

/* zoom effect  */

#zoom {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

#zoom:hover {
  width: 280px;
  height: 280px;
  border: 4px solid #334d66;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

/* SOCIAL FONT ICON STYLES  */

/* hover color styles  */

.twitter i:hover {
  color: #00aced;
}

.facebook i:hover {
  color: #3b5998;
}

.linkedin i:hover {
  color: #007bb6;
}

.pinterest i:hover {
  color: #cb2027;
}

.google i:hover {
  color: #dd4b39;
}

.tumblr i:hover {
  color: #32506d;
}

.vimeo i:hover {
  color: #aad450;
}

.instagram i:hover {
  color: #3f729b;
}

/* FONT STYLES  */

.head {
  margin-bottom: 60px;
}

/* different font colors  */

.red {
  color: #a6340c;
}

.orange {
  color: #e67e22;
}

.yellow {
  color: #f1c40f;
}

.blue {
  color: #2b3959;
}

.d-grey {
  color: #443e44;
}

l-grey {
  color: #9e968f;
}

.grey {
  color: #dcd5d5;
}

.cloudy {
  color: #ecf0f1;
}

.white {
  color: #fff;
}

.black {
  color: #000;
}

.center {
  text-align: center;
}

/* 15. MEDIA RESPONSIVE
  -------------------------------------------------- */

@media only screen and (min-width: 1200px) {
  /* Top Slider */

  #top-slider .slider-bg {
    background-size: cover;
  }

  .slider-caption {
    padding-top: 10px;
  }

  .slider-image {
    padding-top: 10px;
    margin: 0 auto;
  }

  /* About Us */

  .agency-image {
    padding-top: 40px;
    padding-bottom: 60px;
  }

  /* Our Process */

  .process {
    width: 1000px;
  }

  .process-con {
    margin: 0 20px;
  }

  /* Social Media Divider */

  #divider .divider-bg {
    background-size: cover;
  }
}

@media (max-width: 979px) {
  /* Price Table */

  .table-feature {
    margin-top: 10px;
  }

  /* Top Slider */

  .slider-caption {
    padding-top: 10px;
  }

  .slider-image {
    padding-top: 10px;
    margin: 0 auto;
  }

  /* Navbar */

  .container.navbar-wrapper {
    margin-bottom: 0;
    width: auto;
  }

  .navbar-inner {
    border-radius: 0;
    margin: 1px 0;
  }

  /* Filter */

  .filter-list ul {
    text-align: center;
  }

  /* Our Process */

  .process {
    width: 760px;
  }

  .process-con.img1 {
    margin-top: 100px;
  }

  .process-con.img2 {
    margin-top: 30px;
  }

  .process-con.img3 {
    margin-top: 20px;
  }

  /* Contact Form */

  .input-group {
    max-width: 300px !important;
    float: none;
    margin: 0 auto;
  }

  .form {
    padding-bottom: 50px;
  }

  .requi {
    padding-left: 15px;
    font-size: 12px;
  }
}

@media only screen and (max-width: 767px) {
  /* Top Slider */

  #top-slider {
    width: 100%;
    height: 500px;
    text-align: center;
    z-index: 100;
  }

  #top-slider .slider-bg {
    margin: 0 auto;
    padding: 0;
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 600px;
  }

  .slide {
    padding-top: 30%;
  }

  /* Team */

  .team {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;
  }

  .team:hover {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
  }

  /* Filter */

  .filter-list ul {
    text-align: center;
  }

  /* Process */

  .our-process {
    background: #000 url(../img/our-process-mobil.svg) no-repeat center top;
  }

  .process {
    width: 300px;
    height: auto;
    padding-top: 20px;
  }

  .process-con.img1 {
    margin-left: 10px;
    margin-right: 0;
    height: auto;
  }

  .process-con.img2 {
    margin-left: 10px;
    margin-right: 0;
    margin-top: 10px;
    height: auto;
  }

  .process-con.img3 {
    margin-left: 10px;
    margin-right: 0;
    margin-top: 10px;
    height: auto;
  }

  .process-con h5 {
    display: inline-block;
    padding: 5px 1px;
  }

  /* Contact Form */

  .requi {
    padding-left: 15px;
    font-size: 12px;
  }

  /* Social Media Divider */

  .social-icons {
    padding-top: 120px;
  }

  #divider .divider-bg {
    margin: 0 auto;
    padding: 0;
    position: absolute;
    z-index: 300;
    width: 100%;
    height: 600px;
  }
}

@media (max-width: 489px) {
  /* Filter */

  .filter-list ul {
    text-align: center;
  }

  .filter-list ul li {
    margin-left: 5px;
    cursor: pointer;
    font-size: 12px;
  }

  .nav-pills > li > a {
    position: relative;
    display: block;
    padding: 5px 10px;
  }

  .gallery ul li {
    margin: 0;
    padding: 0px 0;
    float: left;
  }

  .gallery ul li:hover {
    margin: 0;
    padding: 0px 0;
    float: left;
  }

  .gallery ul li:hover img {
    opacity: 0.1;
  }

  .gallery ul li:hover strong {
    font-size: 12px;
    margin: 0;
    padding: 10px 0;
    position: absolute;
    display: block;
    text-align: center;
    bottom: 55%;
    opacity: 0.9;
  }

  .gallery ul li:hover p {
    font-size: 12px;
    margin: 0;
    padding: 0px 0px 20px 0px;
    position: absolute;
    width: 100%;
    display: block;
    text-align: center;
    bottom: 0;
  }

  .gallery ul li:hover p span {
    margin-top: 20px;
    font-size: 12px;
    display: block;
  }
}

@media (max-width: 379px) {
  /* Heading */

  h1 {
    font-size: 50px;
  }

  /* Top Slider */

  #top-slider {
    width: 100%;
    height: 350px;
    text-align: center;
    z-index: 100;
  }

  #top-slider .slider-bg {
    margin: 0 auto;
    padding: 0;
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 400px;
  }

  /* Button */

  .btn-top {
    text-transform: uppercase;
    font-size: 10px;
    padding: 10px 20px;
  }

  /* About Us */

  .agency-heading {
    text-align: center;
    font-size: 50px;
  }

  /* Filter */

  .filter-list ul {
    text-align: center;
  }

  .filter-list ul li {
    margin-top: 5px;
    margin-left: 5px;
    cursor: pointer;
    font-size: 10px;
  }

  .nav-pills > li > a {
    position: relative;
    display: block;
    padding: 5px 10px;
  }

  .team-grid {
    position: relative;
    display: inline-block;
    width: 180px;
    height: 180px;
  }

  .media-object {
    display: none;
  }

  /* Social Media Divider */

  .social-icons {
    padding-top: 40px;
  }

  #divider .divider-bg {
    background: cover;
  }
}