Difference between revisions of "Template:CCU Taiwan/style.css"

(Blanked the page)
Line 1: Line 1:
 +
body {
 +
background: #ffffff;
 +
    font-family: 'Source Sans Pro', sans-serif;
 +
    font-style: normal;
 +
    font-weight: 300;
 +
    position: relative;
 +
}
  
 +
html,body {
 +
  width: 100%;
 +
  overflow-x: hidden;
 +
}
 +
 +
html {
 +
  font-size: 100%;
 +
}
 +
 +
 +
/* Typography
 +
------------------------------------- */
 +
 +
h1,h2,h3,h4 {
 +
  font-weight: 400;
 +
  letter-spacing: 0.3rem;
 +
  text-transform: uppercase;
 +
}
 +
 +
h1 {
 +
  color: #000;
 +
  font-size: 1.8rem;
 +
  font-weight: 700;
 +
}
 +
 +
h2 {
 +
  color: #ffffff;
 +
  font-size: 1rem;
 +
}
 +
 +
h3 {
 +
  color: #444;
 +
  font-size: 14px;
 +
  letter-spacing: 4px;
 +
}
 +
 +
h5 {
 +
  font-weight: 400;
 +
  letter-spacing: 1px;
 +
}
 +
 +
p {
 +
  color: #777;
 +
  font-size: 16px;
 +
  line-height: 28px;
 +
  word-spacing: 1px;
 +
  letter-spacing: 1px;
 +
}
 +
 +
a {
 +
  outline: none;
 +
  text-decoration: none;
 +
}
 +
a,
 +
a:hover,
 +
a:focus {
 +
  color: inherit;
 +
  text-decoration: none;
 +
  outline: 0;
 +
  -webkit-transition: all 0.25s ease-out;
 +
  -moz-transition: all 0.25s ease-out;
 +
  -ms-transition: all 0.25s ease-out;
 +
  -o-transition: all 0.25s ease-out;
 +
  transition: all 0.25s ease-out;
 +
}
 +
 +
img {
 +
  width: 100%;
 +
  max-width: 100%;
 +
}
 +
 +
 +
/* preloader styles
 +
/* ========================================== */
 +
.preloader {
 +
    position: fixed;
 +
    top: 0;
 +
    left: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
    z-index: 99999;
 +
    display: flex;
 +
    flex-flow: row nowrap;
 +
    justify-content: center;
 +
    align-items: center;
 +
    background: none repeat scroll 0 0 #fff;
 +
}
 +
 +
.sk-spinner-pulse {
 +
  width: 60px;
 +
  height: 60px;
 +
  background-color: #111112;
 +
  border-radius: 100%;
 +
  -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
 +
          animation: sk-pulseScaleOut 1s infinite ease-in-out; }
 +
 +
@-webkit-keyframes sk-pulseScaleOut {
 +
  0% {
 +
    -webkit-transform: scale(0);
 +
            transform: scale(0); }
 +
  100% {
 +
    -webkit-transform: scale(1);
 +
            transform: scale(1);
 +
    opacity: 0; } }
 +
 +
@keyframes sk-pulseScaleOut {
 +
  0% {
 +
    -webkit-transform: scale(0);
 +
            transform: scale(0); }
 +
  100% {
 +
    -webkit-transform: scale(1);
 +
            transform: scale(1);
 +
    opacity: 0; } }
 +
 +
 +
 +
/* navigation styles
 +
/* ========================================== */
 +
.nav-container,
 +
nav {
 +
  overflow: visible;
 +
  transition: all 0.3s ease;
 +
  -webkit-transition: all 0.3s ease;
 +
  -moz-transition: all 0.3s ease;
 +
}
 +
 +
nav {
 +
  -webkit-backface-visibility: hidden;
 +
  backface-visibility: hidden;
 +
  transition: all 0.3s ease;
 +
  -webkit-transition: all 0.3s ease;
 +
  -moz-transition: all 0.3s ease;
 +
}
 +
 +
nav a {
 +
  color: #333333;
 +
}
 +
 +
.navbar {
 +
  background: transparent;
 +
  height: 94px;
 +
  max-height: 94px;
 +
  margin: 0;
 +
  border-radius: 0;
 +
  transition: all 0.3s ease;
 +
  -webkit-transition: all 0.3s ease;
 +
  -moz-transition: all 0.3s ease;
 +
}
 +
 +
.brand {
 +
  float: left;
 +
  padding: 30px 0 0;
 +
  transition: all 0.3s ease;
 +
  -webkit-transition: all 0.3s ease;
 +
  -moz-transition: all 0.3s ease;
 +
  text-transform: uppercase;
 +
  letter-spacing: 0.3rem;
 +
}
 +
.brand a {
 +
  color: #333;
 +
  font-size: 24px;
 +
  font-weight: 700;
 +
  opacity: 1;
 +
  text-decoration: none;
 +
}
 +
 +
.navicon { 
 +
  position: relative;
 +
  right: 0;
 +
  display: -webkit-flex;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  -webkit-justify-content: flex-end;
 +
  -ms-flex-pack: end;
 +
  justify-content: flex-end;
 +
  padding: 20px 0 0;
 +
}
 +
 +
nav ul {
 +
  display: inline-block;
 +
}
 +
 +
nav ul.right {
 +
  float: right;
 +
  right: 0
 +
}
 +
 +
#nav-menu a {
 +
  font-weight: 300;
 +
  font-size: 26px;
 +
  color: #ffffff;
 +
  text-transform: uppercase;
 +
  letter-spacing: 0.3rem;
 +
}
 +
 +
#nav-menu li {
 +
  list-style: none;
 +
  padding: 6px;
 +
}
 +
 +
.nav-text-light a {
 +
  color: #ffffff;
 +
}
 +
 +
.sticky .nav-text-light a {
 +
  color: #555555;
 +
}
 +
 +
.sticky nav.nav-inner .navbar {
 +
  height: 70px;
 +
  max-height: 70px;
 +
  margin: 0;
 +
  background: #ffffff;
 +
}
 +
 +
.sticky nav.transparent .navbar {
 +
  background: transparent;
 +
}
 +
 +
@media all and (max-width: 990px) {
 +
  .nav-text-light a {
 +
    color: #555555;
 +
  }
 +
  .nav-inner {
 +
    background: #ffffff;
 +
  }
 +
  .transparent {
 +
    background: transparent;
 +
  }
 +
  .navicon {
 +
    padding-right: 10px;
 +
  }
 +
  nav ul.right {
 +
  float: left;
 +
  }
 +
}
 +
 +
a.icon {
 +
  font-size: 32px;
 +
  padding-right: 20px;
 +
}
 +
 +
.intro-inner { 
 +
  position: absolute;
 +
  left: 50%;
 +
  top: 50%;
 +
  -webkit-transform: translate(-50%, -50%);
 +
      -ms-transform: translate(-50%, -50%);
 +
          transform: translate(-50%, -50%);
 +
  width: 100%;
 +
  text-align: center;
 +
}
 +
 +
.close {
 +
  font-family: inherit;
 +
  font-size: 32px;
 +
  font-weight: 300;
 +
  text-shadow: none;
 +
}
 +
.close:focus {
 +
  outline: 0px auto -webkit-focus-ring-color;
 +
}
 +
 +
.circle {
 +
  width: 45px;
 +
  height: 45px;
 +
  text-align: center;
 +
  margin: 0 auto;
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 50%;
 +
  margin-top: -40px;
 +
  margin-left: -40px;
 +
  border-radius: 50%;
 +
  transition: all 0.3s ease;
 +
  -webkit-transition: all 0.3s ease;
 +
  -moz-transition: all 0.3s ease;
 +
  cursor: pointer;
 +
  z-index: 99;
 +
  padding: 4px 0 0;
 +
}
 +
 +
.circle i {
 +
  font-size: 36px;
 +
  color: #111112;
 +
}
 +
 +
.circle.dark {
 +
  border-color: #292929;
 +
}
 +
 +
.circle.dark:before {
 +
  border-color: transparent transparent transparent #292929;
 +
}
 +
 +
.circle.large {
 +
  height: 120px;
 +
  width: 120px;
 +
  margin-top: -60px;
 +
  margin-left: -60px;
 +
}
 +
 +
.circle.large:before {
 +
  margin-top: -18px;
 +
  margin-left: -10px;
 +
  content: '';
 +
  width: 0;
 +
  height: 0;
 +
  border-style: solid;
 +
  border-width: 20px 0 20px 31.0px;
 +
  border-color: transparent transparent transparent #ffffff;
 +
}
 +
 +
.circle.large.dark:before {
 +
  border-color: transparent transparent transparent #292929;
 +
}
 +
 +
.circle.inline {
 +
  position: relative;
 +
  top: 0;
 +
  left: 0;
 +
  margin-top: 0;
 +
  margin-left: 0;
 +
  display: inline-block;
 +
  z-index: 0;
 +
}
 +
 +
@media all and (max-width: 767px) {
 +
  .circle.large {
 +
    width: 90px;
 +
    height: 90px;
 +
    margin-top: -45px;
 +
  }
 +
  .circle.large:before {
 +
    margin-top: -14px;
 +
    margin-left: -8px;
 +
    content: '';
 +
    width: 0;
 +
    height: 0;
 +
    border-style: solid;
 +
    border-width: 15px 0 15px 25.0px;
 +
    border-color: transparent transparent transparent #fff;
 +
  }
 +
}
 +
 +
.list-menu {
 +
  position: fixed;
 +
  visibility: hidden;
 +
  width: 100%;
 +
  height: 100%;
 +
  top: 0;
 +
  left: 0;
 +
  z-index: 9999999;
 +
  background: rgba(0, 0, 0, 0.9);
 +
  transition: all 0.6s ease;
 +
  -webkit-transition: all 0.6s ease;
 +
  -moz-transition: all 0.6s ease;
 +
  opacity: 0;
 +
  z-index: -1;
 +
}
 +
 +
.list-menu.reveal-modal {
 +
  opacity: 1;
 +
  z-index: 999999;
 +
  visibility: visible;
 +
}
 +
 +
.list-menu .ion-close-round {
 +
  font-size: 31px;
 +
  position: absolute;
 +
  top: 32px;
 +
  right: 32px;
 +
  color: #fff;
 +
  cursor: pointer;
 +
}
 +
 +
/* header section styles
 +
/* ========================================== */
 +
#header {
 +
  -webkit-background-size: cover;
 +
  background-size: cover;
 +
  background-position: center center;
 +
  text-align: center;
 +
  padding-top: 130px;
 +
  padding-bottom: 100px;
 +
}
 +
 +
#header .header-thumb {
 +
  background: #ffffff;
 +
  border: 10px solid #f9f9f9;
 +
  padding: 62px 20px 62px 20px;
 +
}
 +
 +
.header-one .header-thumb,
 +
.header-two .header-thumb,
 +
.header-three .header-thumb,
 +
.header-four .header-thumb,
 +
.header-five .header-thumb {
 +
  padding: 32px 20px 32px 20px !important;
 +
}
 +
 +
.header-one, .header-two,
 +
.header-three, .header-four,
 +
.header-five {
 +
  height: 42vh !important;
 +
  min-height: 420px;
 +
  padding-top: 120px !important;
 +
}
 +
 +
.header-one {
 +
  background: url('../images/header-bg.jpg') no-repeat;
 +
  height: 60vh !important;
 +
  min-height: 520px;
 +
  padding-top: 150px !important;
 +
}
 +
.header-two {
 +
  background: url('../images/header-bg.jpg') no-repeat;
 +
}
 +
.header-three {
 +
  background: url('../images/header-three-bg.jpg') no-repeat;
 +
}
 +
.header-four {
 +
  background: url('../images/header-four-bg.jpg') no-repeat;
 +
}
 +
.header-five {
 +
  background: url('../images/header-five-bg.jpg') no-repeat;
 +
}
 +
 +
/* Portfolio section styles
 +
/* ========================================== */
 +
#portfolio {
 +
  text-align: center;
 +
  padding-top: 3rem;
 +
  padding-bottom: 6rem;
 +
}
 +
 +
#portfolio img {
 +
  width: 100%;
 +
}
 +
 +
#portfolio .portfolio-thumb {
 +
  position: relative;
 +
  overflow: hidden;
 +
  margin: 0;
 +
}
 +
 +
#portfolio .portfolio-thumb .portfolio-overlay {
 +
  background: #141414;
 +
  position: absolute;
 +
  top: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  opacity: 0;
 +
  -webkit-transition: all 0.4s ease-in-out;
 +
  transition: all 0.4s ease-in-out;
 +
}
 +
 +
#portfolio .portfolio-thumb:hover .portfolio-overlay {
 +
  opacity: 0.9;
 +
}
 +
 +
#portfolio .portfolio-thumb .portfolio-overlay .portfolio-item {
 +
    text-align: center;
 +
    padding: 30% 20px 20px;
 +
}
 +
 +
#portfolio .portfolio-thumb .portfolio-overlay .fa {
 +
    background: #f9f9f9;
 +
    border-radius: 100px;
 +
    color: #141414;
 +
    font-size: 1.3rem;
 +
    display: inline-block;
 +
    width: 3.5rem;
 +
    height: 3.5rem;
 +
    line-height: 3.5rem;
 +
    text-align: center;
 +
    text-decoration: none;
 +
    margin-bottom: 4px;
 +
}
 +
 +
/*filter css*/
 +
.filter-wrapper {
 +
    width: 100%;
 +
    margin-bottom: 32px;
 +
    overflow: hidden;
 +
}
 +
 +
.filter-wrapper li {
 +
    display: inline-block;
 +
    margin: 4px;
 +
}
 +
 +
.filter-wrapper li a {
 +
    color: #666;
 +
    font-size: 13px;
 +
    font-weight: 400;
 +
    letter-spacing: 2px;
 +
    padding: 8px 17px;
 +
    margin-right: 2px;
 +
    margin-left: 2px;
 +
    text-transform: uppercase;
 +
    display: block;
 +
    text-decoration: none;
 +
    transition: all 0.4s ease-in-out;
 +
}
 +
.filter-wrapper li a:active {
 +
  background: #111112 !important;
 +
}
 +
.filter-wrapper li a:hover,
 +
.filter-wrapper li a:focus {
 +
  background: #111112;
 +
  color: #ffffff;
 +
}
 +
 +
/*isotope box css*/
 +
.iso-box-section {
 +
    width: 100%;
 +
}
 +
 +
.iso-box-wrapper {
 +
    width: 100%;
 +
    padding: 0;
 +
    clear: both;
 +
    position: relative;
 +
}
 +
 +
.iso-box {
 +
    position: relative;
 +
    min-height: 50px;
 +
    float: left;
 +
    overflow: hidden;
 +
    margin-bottom: 25px;
 +
}
 +
 +
.iso-box > a {
 +
    display: block;
 +
    width: 100%;
 +
    height: 100%;
 +
    overflow: hidden;
 +
}
 +
 +
.fluid-img {
 +
    width: 100%;
 +
    display: block;
 +
}
 +
 +
/* single project section styles
 +
/* ========================================== */
 +
#single-project {
 +
  padding-top: 4rem;
 +
  padding-bottom: 6rem;
 +
}
 +
 +
#single-project .project-info {
 +
  padding-bottom: 10px;
 +
}
 +
 +
#single-project img {
 +
  padding-top: 14px;
 +
}
 +
 +
/* about section styles
 +
/* ========================================== */
 +
#about {
 +
  padding-top: 5rem;
 +
  padding-bottom: 8rem;
 +
}
 +
 +
#about .col-md-4 {
 +
  padding-top: 16px;
 +
  padding-bottom: 32px;
 +
}
 +
 +
#about img {
 +
  padding-bottom: 20px;
 +
}
 +
 +
#about blockquote {
 +
  letter-spacing: 2px;
 +
  margin-top: 20px;
 +
}
 +
 +
/* blog & single post section styles
 +
/* ========================================== */
 +
#blog,
 +
#single-post {
 +
  padding-top: 4rem;
 +
  padding-bottom: 6rem;
 +
}
 +
 +
#blog .blog-thumb {
 +
  padding-top: 60px;
 +
  padding-bottom: 40px;
 +
}
 +
 +
#blog .post-format,
 +
#single-post .post-format {
 +
  padding-bottom: 10px;
 +
}
 +
 +
#blog .post-format span,
 +
#single-post .post-format span {
 +
  color: #888;
 +
  font-weight: 400;
 +
  letter-spacing: 1px;
 +
  padding-right: 10px;
 +
}
 +
 +
#blog .blog-thumb .btn {
 +
  border-radius: 0px;
 +
  padding: 10px 32px;
 +
  letter-spacing: 2px;
 +
  text-transform: uppercase;
 +
  margin-top: 22px;
 +
  transition: all 0.4s ease-in-out;
 +
}
 +
#blog .blog-thumb .btn:hover {
 +
  background: #111112;
 +
  border-color: transparent;
 +
  color: #ffffff;
 +
}
 +
 +
#single-post blockquote {
 +
  margin-top: 32px;
 +
  letter-spacing: 2px;
 +
}
 +
 +
.post-image {
 +
margin: 25px 0px;
 +
}
 +
 +
#single-post .blog-comment,
 +
#single-post .blog-comment-form {
 +
  margin-top: 62px;
 +
}
 +
 +
#single-post .blog-comment h3,
 +
#single-post .blog-comment-form h3 {
 +
  padding-bottom: 20px;
 +
}
 +
 +
#single-post .blog-comment .media {
 +
  padding-bottom: 22px;
 +
}
 +
 +
#single-post .blog-comment .media img {
 +
  padding-right: 14px;
 +
}
 +
 +
#single-post .blog-comment h4 {
 +
  font-weight: 700;
 +
}
 +
 +
#single-post .blog-comment-form .form-control {
 +
  background: transparent;
 +
  border: 1px solid #eee;
 +
  border-radius: 0px;
 +
  box-shadow: none;
 +
  font-size: 16px;
 +
  margin-bottom: 16px;
 +
  transition: all 0.4s ease-in-out;
 +
}
 +
 +
#single-post .blog-comment-form input[type="submit"] {
 +
  background: #111112;
 +
  border-color: transparent;
 +
  color: #ffffff;
 +
  height: 50px;
 +
}
 +
 +
 +
/* contact section styles
 +
/* ========================================== */
 +
#contact {
 +
  padding-top: 5rem;
 +
  padding-bottom: 0rem;
 +
}
 +
 +
#contact .fa {
 +
  font-size: 32px;
 +
  padding-right: 10px;
 +
}
 +
 +
#contact #map-canvas  {
 +
  border: none;
 +
  width: 100%;
 +
  height: 300px;
 +
  margin-top: 40px;
 +
}
 +
 +
#contact .contact-form {
 +
  padding-top: 14px;
 +
}
 +
 +
#contact .form-control {
 +
  background: transparent;
 +
  border: 1px solid #eee;
 +
  border-radius: 0px;
 +
  box-shadow: none;
 +
  font-size: 16px;
 +
  margin-bottom: 16px;
 +
  transition: all 0.4s ease-in-out;
 +
}
 +
 +
#contact .form-control:hover {
 +
  border-color: #f0f0f0;
 +
}
 +
 +
#contact textarea {min-height: 100px;}
 +
 +
#contact input {height: 50px;}
 +
 +
#contact input[type='submit'] {
 +
  background: #111112;
 +
  color: #ffffff;
 +
  font-size: 15px;
 +
  font-weight: 400;
 +
  letter-spacing: 2px;
 +
  transition: all 0.4s ease-in-out;
 +
  margin-top: 10px;
 +
}
 +
 +
#contact input[type='submit']:hover {
 +
  background: #444;
 +
}
 +
 +
.contact-submit {
 +
width: 50%;
 +
}
 +
 +
#contact .col-md-4 {
 +
  background: #fff;
 +
  padding: 62px 0px 32px 42px;
 +
  position: relative;
 +
  bottom: -50px;
 +
}
 +
 +
 +
 +
/* footer section styles
 +
/* ========================================== */
 +
footer {
 +
  background: #141414;
 +
  padding-top: 120px;
 +
  padding-bottom: 120px;
 +
  text-align: center;
 +
}
 +
 +
 +
/* social icon */
 +
.social-icon {
 +
  padding: 0;
 +
  margin: 0;
 +
}
 +
.social-icon li {
 +
  list-style: none;
 +
  display: inline-block;
 +
}
 +
.social-icon li a {
 +
  border-radius: 100px;
 +
  border: 1px solid transparent;
 +
  color: #909090;
 +
  font-size: 18px;
 +
  width: 50px;
 +
  height: 50px;
 +
  line-height: 48px;
 +
  text-align: center;
 +
  vertical-align: middle;
 +
  text-decoration: none;
 +
  transition: all 0.4s ease-in-out;
 +
  padding: 0px;
 +
  margin-top: 14px;
 +
  margin-right: 8px;
 +
  margin-left: 8px;
 +
  position: relative;
 +
  top: 0px;
 +
}
 +
.social-icon li a:hover {
 +
  background: #ffffff;
 +
}
 +
 +
/* Responsive Mobile styles
 +
/* ========================================== */
 +
@media (max-width: 980px) {
 +
 +
  .intro-inner {top: 30%;}
 +
 +
  #contact .col-md-4 {
 +
    padding: 62px 20px 42px 32px;
 +
  }
 +
 +
  #contact .col-md-4 p {
 +
    font-size: 12px;
 +
  }
 +
 +
  #contact #map-canvas {
 +
    margin-bottom: 60px;
 +
  }
 +
}
 +
 +
 +
@media (max-width: 768px) {
 +
 +
  .brand {
 +
    padding-left: 24px;
 +
  }
 +
 +
  .header-one, .header-two,
 +
  .header-three, .header-four,
 +
  .header-five {
 +
    min-height: 380px;
 +
padding-top: 80px !important;
 +
  }
 +
 +
  #about .col-md-4,
 +
  #single-project .col-md-3 {
 +
    padding-bottom: 32px;
 +
  }
 +
 +
}
 +
 +
 +
@media (max-width: 700px) {
 +
 +
  h1 {
 +
    font-size: 1.3rem;
 +
  }
 +
  h3 {
 +
    font-size: 13px;
 +
    letter-spacing: 3px;
 +
  }
 +
 +
  .filter-wrapper {
 +
    padding: 0px;
 +
  }
 +
 +
  #contact {
 +
    padding-bottom: 4rem;
 +
  }
 +
 +
  #contact .col-md-4 {
 +
    padding: 32px 20px 22px 62px;
 +
  }
 +
  .contact-submit {
 +
width: 70%;
 +
  }
 +
 +
}
 +
 +
@media (max-width: 450px) {
 +
  .intro-inner {top: 50%;}
 +
}

Revision as of 02:31, 19 July 2017

body { background: #ffffff; 

   font-family: 'Source Sans Pro', sans-serif;
   font-style: normal;
   font-weight: 300;
   position: relative;

}

html,body { 

 width: 100%;
 overflow-x: hidden;

}

html { 

 font-size: 100%;

}


/* Typography

*/

h1,h2,h3,h4 { 

 font-weight: 400;
 letter-spacing: 0.3rem;
 text-transform: uppercase;

}

h1 { 

 color: #000;
 font-size: 1.8rem;
 font-weight: 700;

}

h2 { 

 color: #ffffff;
 font-size: 1rem;

}

h3 { 

 color: #444;
 font-size: 14px;
 letter-spacing: 4px;

}

h5 { 

 font-weight: 400;
 letter-spacing: 1px;

}

p { 

 color: #777;
 font-size: 16px;
 line-height: 28px;
 word-spacing: 1px;
 letter-spacing: 1px;

}

a { 

 outline: none;
 text-decoration: none;

} a, a:hover, a:focus { 

 color: inherit;
 text-decoration: none;
 outline: 0;
 -webkit-transition: all 0.25s ease-out;
 -moz-transition: all 0.25s ease-out;
 -ms-transition: all 0.25s ease-out;
 -o-transition: all 0.25s ease-out;
 transition: all 0.25s ease-out;

}

img { 

 width: 100%;
 max-width: 100%;

}


/* preloader styles /* ========================================== */ .preloader { 

   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 99999;
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
   align-items: center;
   background: none repeat scroll 0 0 #fff;

}

.sk-spinner-pulse { 

 width: 60px;
 height: 60px;
 background-color: #111112;
 border-radius: 100%;
 -webkit-animation: sk-pulseScaleOut 1s infinite ease-in-out;
         animation: sk-pulseScaleOut 1s infinite ease-in-out; }

@-webkit-keyframes sk-pulseScaleOut { 

 0% {
   -webkit-transform: scale(0);
           transform: scale(0); }
 100% {
   -webkit-transform: scale(1);
           transform: scale(1);
   opacity: 0; } }

@keyframes sk-pulseScaleOut { 

 0% {
   -webkit-transform: scale(0);
           transform: scale(0); }
 100% {
   -webkit-transform: scale(1);
           transform: scale(1);
   opacity: 0; } }


/* navigation styles /* ========================================== */ .nav-container, nav { 

 overflow: visible;
 transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;

}

nav { 

 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;

}

nav a { 

 color: #333333;

}

.navbar { 

 background: transparent;
 height: 94px;
 max-height: 94px;
 margin: 0;
 border-radius: 0;
 transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;

}

.brand { 

 float: left;
 padding: 30px 0 0;
 transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 text-transform: uppercase;
 letter-spacing: 0.3rem;

} .brand a { 

 color: #333;
 font-size: 24px;
 font-weight: 700;
 opacity: 1;
 text-decoration: none;

}

.navicon { 

 position: relative;
 right: 0;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-justify-content: flex-end;
 -ms-flex-pack: end;
 justify-content: flex-end;
 padding: 20px 0 0;

}

nav ul { 

 display: inline-block;

}

nav ul.right { 

 float: right;
 right: 0

}

  1. nav-menu a {
 font-weight: 300;
 font-size: 26px;
 color: #ffffff;
 text-transform: uppercase;
 letter-spacing: 0.3rem;

}

  1. nav-menu li {
 list-style: none;
 padding: 6px;

}

.nav-text-light a { 

 color: #ffffff;

}

.sticky .nav-text-light a { 

 color: #555555;

}

.sticky nav.nav-inner .navbar { 

 height: 70px;
 max-height: 70px;
 margin: 0;
 background: #ffffff;

}

.sticky nav.transparent .navbar { 

 background: transparent;

}

@media all and (max-width: 990px) { 

 .nav-text-light a {
   color: #555555;
 }
 .nav-inner {
   background: #ffffff;
 }
 .transparent {
   background: transparent;
 }
 .navicon {
   padding-right: 10px;
 }
 nav ul.right {
 float: left;
 }

}

a.icon { 

 font-size: 32px;
 padding-right: 20px;

}

.intro-inner { 

 position: absolute;
 left: 50%;
 top: 50%;
 -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
         transform: translate(-50%, -50%);
 width: 100%;
 text-align: center;

}

.close { 

 font-family: inherit;
 font-size: 32px;
 font-weight: 300;
 text-shadow: none;

} .close:focus { 

 outline: 0px auto -webkit-focus-ring-color;

}

.circle { 

 width: 45px;
 height: 45px;
 text-align: center;
 margin: 0 auto;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -40px;
 margin-left: -40px;
 border-radius: 50%;
 transition: all 0.3s ease;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 cursor: pointer;
 z-index: 99;
 padding: 4px 0 0;

}

.circle i { 

 font-size: 36px;
 color: #111112;

}

.circle.dark { 

 border-color: #292929;

}

.circle.dark:before { 

 border-color: transparent transparent transparent #292929;

}

.circle.large { 

 height: 120px;
 width: 120px;
 margin-top: -60px;
 margin-left: -60px;

}

.circle.large:before { 

 margin-top: -18px;
 margin-left: -10px;
 content: ;
 width: 0;
 height: 0;
 border-style: solid;
 border-width: 20px 0 20px 31.0px;
 border-color: transparent transparent transparent #ffffff;

}

.circle.large.dark:before { 

 border-color: transparent transparent transparent #292929;

}

.circle.inline { 

 position: relative;
 top: 0;
 left: 0;
 margin-top: 0;
 margin-left: 0;
 display: inline-block;
 z-index: 0;

}

@media all and (max-width: 767px) { 

 .circle.large {
   width: 90px;
   height: 90px;
   margin-top: -45px;
 }
 .circle.large:before {
   margin-top: -14px;
   margin-left: -8px;
   content: ;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 15px 0 15px 25.0px;
   border-color: transparent transparent transparent #fff;
 }

}

.list-menu { 

 position: fixed;
 visibility: hidden;
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
 z-index: 9999999;
 background: rgba(0, 0, 0, 0.9);
 transition: all 0.6s ease;
 -webkit-transition: all 0.6s ease;
 -moz-transition: all 0.6s ease;
 opacity: 0;
 z-index: -1;

}

.list-menu.reveal-modal { 

 opacity: 1;
 z-index: 999999;
 visibility: visible;

}

.list-menu .ion-close-round { 

 font-size: 31px;
 position: absolute;
 top: 32px;
 right: 32px;
 color: #fff;
 cursor: pointer;

}

/* header section styles /* ========================================== */

  1. header {
 -webkit-background-size: cover;
 background-size: cover;
 background-position: center center;
 text-align: center;
 padding-top: 130px;
 padding-bottom: 100px;

}

  1. header .header-thumb {
 background: #ffffff;
 border: 10px solid #f9f9f9;
 padding: 62px 20px 62px 20px;

}

.header-one .header-thumb, .header-two .header-thumb, .header-three .header-thumb, .header-four .header-thumb, .header-five .header-thumb { 

 padding: 32px 20px 32px 20px !important;

}

.header-one, .header-two, .header-three, .header-four, .header-five { 

 height: 42vh !important;
 min-height: 420px;
 padding-top: 120px !important;

}

.header-one { 

 background: url('../images/header-bg.jpg') no-repeat;
 height: 60vh !important;
 min-height: 520px;
 padding-top: 150px !important;

} .header-two { 

 background: url('../images/header-bg.jpg') no-repeat;

} .header-three { 

 background: url('../images/header-three-bg.jpg') no-repeat;

} .header-four { 

 background: url('../images/header-four-bg.jpg') no-repeat;

} .header-five { 

 background: url('../images/header-five-bg.jpg') no-repeat;

}

/* Portfolio section styles /* ========================================== */

  1. portfolio {
 text-align: center;
 padding-top: 3rem;
 padding-bottom: 6rem;

}

  1. portfolio img {
 width: 100%;

}

  1. portfolio .portfolio-thumb {
 position: relative;
 overflow: hidden;
 margin: 0;

}

  1. portfolio .portfolio-thumb .portfolio-overlay {
 background: #141414;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 100%;
 opacity: 0;
 -webkit-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;

}

  1. portfolio .portfolio-thumb:hover .portfolio-overlay {
 opacity: 0.9;

}

  1. portfolio .portfolio-thumb .portfolio-overlay .portfolio-item {
   text-align: center;
   padding: 30% 20px 20px;

}

  1. portfolio .portfolio-thumb .portfolio-overlay .fa {
   background: #f9f9f9;
   border-radius: 100px;
   color: #141414;
   font-size: 1.3rem;
   display: inline-block;
   width: 3.5rem;
   height: 3.5rem;
   line-height: 3.5rem;
   text-align: center;
   text-decoration: none;
   margin-bottom: 4px;

}

/*filter css*/ .filter-wrapper { 

   width: 100%;
   margin-bottom: 32px;
   overflow: hidden;

}

.filter-wrapper li { 

   display: inline-block;
   margin: 4px;

}

.filter-wrapper li a { 

   color: #666;
   font-size: 13px;
   font-weight: 400;
   letter-spacing: 2px;
   padding: 8px 17px;
   margin-right: 2px;
   margin-left: 2px;
   text-transform: uppercase;
   display: block;
   text-decoration: none;
   transition: all 0.4s ease-in-out;

} .filter-wrapper li a:active { 

 background: #111112 !important;

} .filter-wrapper li a:hover, .filter-wrapper li a:focus { 

 background: #111112;
 color: #ffffff;

}

/*isotope box css*/ .iso-box-section { 

   width: 100%;

}

.iso-box-wrapper { 

   width: 100%;
   padding: 0;
   clear: both;
   position: relative;

}

.iso-box { 

   position: relative;
   min-height: 50px;
   float: left;
   overflow: hidden;
   margin-bottom: 25px;

}

.iso-box > a { 

   display: block;
   width: 100%;
   height: 100%;
   overflow: hidden;

}

.fluid-img { 

   width: 100%;
   display: block;

}

/* single project section styles /* ========================================== */

  1. single-project {
 padding-top: 4rem;
 padding-bottom: 6rem;

}

  1. single-project .project-info {
 padding-bottom: 10px;

}

  1. single-project img {
 padding-top: 14px;

}

/* about section styles /* ========================================== */

  1. about {
 padding-top: 5rem;
 padding-bottom: 8rem;

}

  1. about .col-md-4 {
 padding-top: 16px;
 padding-bottom: 32px;

}

  1. about img {
 padding-bottom: 20px;

}

  1. about blockquote {
 letter-spacing: 2px;
 margin-top: 20px;

}

/* blog & single post section styles /* ========================================== */

  1. blog,
  2. single-post {
 padding-top: 4rem;
 padding-bottom: 6rem;

}

  1. blog .blog-thumb {
 padding-top: 60px;
 padding-bottom: 40px;

}

  1. blog .post-format,
  2. single-post .post-format {
 padding-bottom: 10px;

}

  1. blog .post-format span,
  2. single-post .post-format span {
 color: #888;
 font-weight: 400;
 letter-spacing: 1px;
 padding-right: 10px;

}

  1. blog .blog-thumb .btn {
 border-radius: 0px;
 padding: 10px 32px;
 letter-spacing: 2px;
 text-transform: uppercase;
 margin-top: 22px;
 transition: all 0.4s ease-in-out;

}

  1. blog .blog-thumb .btn:hover {
 background: #111112;
 border-color: transparent;
 color: #ffffff;

}

  1. single-post blockquote {
 margin-top: 32px;
 letter-spacing: 2px;

}

.post-image { margin: 25px 0px; }

  1. single-post .blog-comment,
  2. single-post .blog-comment-form {
 margin-top: 62px;

}

  1. single-post .blog-comment h3,
  2. single-post .blog-comment-form h3 {
 padding-bottom: 20px;

}

  1. single-post .blog-comment .media {
 padding-bottom: 22px;

}

  1. single-post .blog-comment .media img {
 padding-right: 14px;

}

  1. single-post .blog-comment h4 {
 font-weight: 700;

}

  1. single-post .blog-comment-form .form-control {
 background: transparent;
 border: 1px solid #eee;
 border-radius: 0px;
 box-shadow: none;
 font-size: 16px;
 margin-bottom: 16px;
 transition: all 0.4s ease-in-out;

}

  1. single-post .blog-comment-form input[type="submit"] {
 background: #111112;
 border-color: transparent;
 color: #ffffff;
 height: 50px;

}


/* contact section styles /* ========================================== */

  1. contact {
 padding-top: 5rem;
 padding-bottom: 0rem;

}

  1. contact .fa {
 font-size: 32px;
 padding-right: 10px;

}

  1. contact #map-canvas {
 border: none;
 width: 100%;
 height: 300px;
 margin-top: 40px;

}

  1. contact .contact-form {
 padding-top: 14px;

}

  1. contact .form-control {
 background: transparent;
 border: 1px solid #eee;
 border-radius: 0px;
 box-shadow: none;
 font-size: 16px;
 margin-bottom: 16px;
 transition: all 0.4s ease-in-out;

}

  1. contact .form-control:hover {
 border-color: #f0f0f0;

}

  1. contact textarea {min-height: 100px;}
  1. contact input {height: 50px;}
  1. contact input[type='submit'] {
 background: #111112;
 color: #ffffff;
 font-size: 15px;
 font-weight: 400;
 letter-spacing: 2px;
 transition: all 0.4s ease-in-out;
 margin-top: 10px;

}

  1. contact input[type='submit']:hover {
 background: #444;

}

.contact-submit { width: 50%; }

  1. contact .col-md-4 {
 background: #fff;
 padding: 62px 0px 32px 42px;
 position: relative;
 bottom: -50px;

}


/* footer section styles /* ========================================== */ footer { 

 background: #141414;
 padding-top: 120px;
 padding-bottom: 120px;
 text-align: center;

}


/* social icon */ .social-icon { 

 padding: 0;
 margin: 0;

} .social-icon li { 

 list-style: none;
 display: inline-block;

} .social-icon li a { 

 border-radius: 100px;
 border: 1px solid transparent;
 color: #909090;
 font-size: 18px;
 width: 50px;
 height: 50px;
 line-height: 48px;
 text-align: center;
 vertical-align: middle;
 text-decoration: none;
 transition: all 0.4s ease-in-out;
 padding: 0px;
 margin-top: 14px;
 margin-right: 8px;
 margin-left: 8px;
 position: relative;
 top: 0px;

} .social-icon li a:hover { 

 background: #ffffff;

}

/* Responsive Mobile styles /* ========================================== */ @media (max-width: 980px) { 

 .intro-inner {top: 30%;}

 #contact .col-md-4 {
   padding: 62px 20px 42px 32px;
 }

 #contact .col-md-4 p {
   font-size: 12px;
 }

 #contact #map-canvas {
   margin-bottom: 60px;
 }

}


@media (max-width: 768px) { 

 .brand {
   padding-left: 24px;
 }

 .header-one, .header-two,
 .header-three, .header-four,
 .header-five {
   min-height: 380px;

padding-top: 80px !important; 

 }

 #about .col-md-4,
 #single-project .col-md-3 {
   padding-bottom: 32px;
 }

}


@media (max-width: 700px) { 

 h1 {
   font-size: 1.3rem;
 }
 h3 {
   font-size: 13px;
   letter-spacing: 3px;
 }

 .filter-wrapper {
   padding: 0px;
 }

 #contact {
   padding-bottom: 4rem;
 }

 #contact .col-md-4 {
   padding: 32px 20px 22px 62px;
 }
 .contact-submit {

width: 70%; 

 }

}

@media (max-width: 450px) { 

 .intro-inner {top: 50%;}

}