/*
* NARA (HTML) V1.0
* Copyright 2014, Limitless LLC
* www.limitless.ma
*/
/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */
/* #Site Styles
================================================== */
/* #Page Styles
================================================== */
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
  .home .flex-control-nav {
    display: none;
  }
  .home .flex-direction-nav {
    display: none;
  }
  .vert {
    opacity: 0;
  }
	.projects .project .item-title{
		font-size: 18px;
	}
  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {
    /* #Basics
		================================================== */
    body {}
    h1 {
      font-size: 36px;
      line-height: 56px;
      margin-bottom: 8px;
    }
    h2 {
      font-size: 35px;
      line-height: 40px;
      margin-bottom: 10px;
    }
    h3 {
      font-size: 24px;
      line-height: 34px;
      margin-bottom: 7px;
    }
    h4 {
      font-size: 20px;
      line-height: 30px;
      margin-bottom: 4px;
    }
    h5 {
      font-size: 17px;
      line-height: 24px;
    }
    h6 {
      font-size: 14px;
      line-height: 21px;
    }
    .offset {
      padding: 80px 0px;
    }
    .divider {
      margin: 0px auto 80px;
    }
    .title {
      margin-bottom: 80px;
    }
    .tit {
      margin-bottom: 80px;
    }
    /* #.header
		================================================== */
    .header {
      background-color: #000000 !important;
      height: 70px;
    }
    .header .logo {
      position: absolute;
      height: 40px;
      width: 50%;
      left: 30px;
      top: 15px;
    }
    .header .log {
      position: absolute;
      height: 40px;
      width: 50%;
      left: 30px;
      top: 15px;
    }
    .header .menu {
      display: block;
      position: absolute;
      right: 30px;
      top: 27px;
    }
    .header .navigation {
      background-color: #000000 !important;
      display: none;
      margin: 0px;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
    }
    .header .navigation ul {
      display: block;
      margin-bottom: 0px;
    }
    .header .navigation li {
      font-size: 36px;
      display: block;
      line-height: 54px;
      margin: 0px auto;
      padding: 0px 5px;
      text-align: center;
    }
    .header .navigation li:last-child {
      margin: 0px auto 0px;
    }
    /* #Team
		================================================== */
    .team .member img {
      height: 177px;
      width: 177px;
    }
    /* #Services
		================================================== */
    .services .flex-direction-nav {
      display: none;
    }
    /* #Works
		================================================== */
    .projects .project, .projects .project .thumb, .projects .project .thumb img {}
    .projects .project .info {}
    /* #Project Preview
		================================================== */
    .projects .preview img, .projects .preview video, .projects .preview iframe {
      height: 247px;
      width: 440px;
    }
    .projects .preview .info {
      padding-left: 30px;
    }
    .projects .preview .text {
      padding: 5px 0px 10px;
    }
    /* #Services
		================================================== */
    .services .service .title {
      margin-bottom: 20px;
    }
    .services .service .text {
      margin-bottom: 10px;
    }
    /* #Blog
		================================================== */
    .blog .post {
      margin-bottom: 50px;
      padding-bottom: 48px;
    }
    .blog .post .entry-thumbnail img {
      height: 237px;
      width: 508px;
    }
    .blog .post .entry-thumbnail iframe {
      height: 284px;
      width: 508px;
    }
    .blog .post .entry-title {
      margin-top: 5px;
    }
    .blog .post .entry-title a {
      font-size: 18px;
    }
    .blog .post .entry-meta {
      margin-top: 12px;
    }
    .blog .post .entry-meta span {
      font-size: 10px;
      letter-spacing: 0.1px;
    }
    .blog .post .entry-meta span:after {
      margin-left: 5px;
      margin-right: 3px;
    }
    .blog .sidebar {
      padding-left: 20px;
    }
    /* #Contact
		================================================== */
    .contact form {}
    .contact .info {
      padding-left: 20px;
    }
    .contact .info .info-item {
      padding-left: 10px;
      padding-right: 10px;
    }
  }
  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {
    /* #Basics
		================================================== */
    body {}
    h1 {
      font-size: 36px;
      line-height: 56px;
      margin-bottom: 8px;
    }
    h2 {
      font-size: 35px;
      line-height: 40px;
      margin-bottom: 10px;
    }
    h3 {
      font-size: 24px;
      line-height: 34px;
      margin-bottom: 7px;
    }
    h4 {
      font-size: 20px;
      line-height: 30px;
      margin-bottom: 4px;
    }
    h5 {
      font-size: 17px;
      line-height: 24px;
    }
    h6 {
      font-size: 14px;
      line-height: 21px;
    }
    .offset {
      padding: 80px 0px;
    }
    .divider {
      margin: 0px auto 80px;
    }
    .title {
      margin-bottom: 80px;
    }
    .descrip {
      opacity: 0;
    }
    .vert {
      opacity: 0;
    }
    .homelogo {
      width: 180px;
      margin-top: 40px;
    }
    /* #.header
		================================================== */
    .header {
      background-color: #000000 !important;
      height: 70px;
    }
    .header .logo {
      position: absolute;
      height: 40px;
      width: 50%;
      left: 10px;
      top: 15px;
    }
    .header .log {
      position: absolute;
      height: 40px;
      width: 70%;
      left: 10px;
      top: 15px;
    }
    .header .menu {
      display: block;
      position: absolute;
      right: 10px;
      top: 27px;
    }
    .header .navigation {
      background-color: #000000 !important;
      display: none;
      margin: 0px;
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
    }
    .header .navigation ul {
      display: block;
    }
    .header .navigation li {
      font-size: 20px;
      display: block;
      margin: 0px auto 25px;
      padding: 0px 5px;
      text-align: center;
    }
    .header .navigation li:last-child {
      margin: 0px auto 0px;
    }
    /* #Home
		================================================== */
    .home .overlay {
      padding-top: 20px !important;
    }
    .home .title {
      font-size: 48px;
      line-height: 60px;
      margin-bottom: 2px;
    }
    .home .tit {
      font-size: 48px;
      line-height: 60px;
      margin-bottom: 15px;
    }
    .home .subtitle {
      font-size: 14px;
      line-height: 24px;
      margin-top: 15px;
    }
    .home .title:after {
      margin: 30px auto 20px;
      width: 90%;
    }
    .home .tit:after {
      margin: 30px auto 20px;
      width: 90%;
    }
    .home .scroll {
      bottom: 40px;
    }
    /* #Portfolio
		================================================== */
    .portfolio .overlay {
      padding-top: 20px !important;
    }
    .portfolio .title {
      font-size: 48px;
      line-height: 60px;
      margin-bottom: 15px;
    }
    .portfolio .subtitle {
      font-size: 18px;
      margin-bottom: 15px;
    }
    .portfolio .title:after {
      margin: 30px auto 20px;
      width: 90%;
    }
    .portfolio .scroll {
      bottom: 40px;
    }
    /* #About
		================================================== */
    .details .story .text {
      padding: 0px 10px;
    }
    /* #Team
		================================================== */
    .team .offset {
      padding: 80px 0px;
    }
    .team .divider {
      margin: 80px 0px 0px;
    }
    .team .member {
      margin-bottom: 40px;
    }
    .team .member:last-child {
      /*margin-bottom: 0px;*/
    }
    .team .member img {
      margin-bottom: 20px;
    }
    /* #Clients
		================================================== */
    .client {
      border-bottom: none;
      border-right: none;
    }
    /* #Works
		================================================== */
    .projects .grid {}
    /* Project Preview
		================================================== */
    .projects .preview {
      margin-bottom: 0px;
      padding: 40px 0px !important;
    }
    .projects .preview .close {
      margin-bottom: 40px;
    }
    .projects .preview .media {
      position: relative;
      text-align: center;
      padding-right: 0px;
    }
    .projects .preview .media .flex-control-nav {
      bottom: 20px;
    }
    .projects .preview video {
      margin-top: 0px;
    }
    .projects .preview .info {
      display: inline-block;
      float: none;
      margin-top: 40px;
      padding-left: 0px;
      text-align: center;
    }
    .projects .preview .info .subtitle {
      margin-bottom: 0px;
    }
    .projects .preview .info .divider {
      margin-left: auto;
    }
    .projects .preview .info .more {
      float: none;
    }
    .projects .start .divider {
      margin-top: 80px;
    }
    /* #Services
		================================================== */
    .services .title {
      margin-bottom: 80px;
    }
    .services .filter {
      margin-bottom: 80px;
    }
    .services .service .text {
      padding: 0px 10px;
    }
    /* #Quotes
		================================================== */
    .quotes {
      background-size: 0% 100%;
    }
    .quotes .content {
      margin-left: 0px !important;
      padding: 100px 20px;
      width: 100%;
    }
    .quotes .quote blockquote {
      margin-bottom: 25px !important;
      padding-top: 45px !important;
    }
    .quotes .quote {
      padding: 0px 10px;
    }
    .quotes .slider {
      padding: 0px 0px !important;
    }
    /* #Blog
		================================================== */
    .blog .post {
      margin-bottom: 50px;
      padding-bottom: 48px;
      text-align: center;
    }
    .blog .post .entry-title {
      margin-top: 5px;
    }
    .blog .post .entry-title a {
      font-size: 18px;
    }
    .blog .post .entry-meta {
      margin-top: 12px;
    }
    .blog .post .entry-meta span {
      font-size: 10px;
      letter-spacing: 0.1px;
    }
    .blog .post .entry-meta span:after {
      margin-left: 5px;
      margin-right: 3px;
    }
    .blog .sidebar {
      padding-left: 15px;
      padding-right: 15px;
      text-align: center;
    }
    .article .offset {
      padding-top: 80px !important;
    }
    .article .entry-title h3 {
      font-size: 28px;
      letter-spacing: 0.1px;
      line-height: 36px;
    }
    .article .entry-meta {
      margin-bottom: 50px;
    }
    .article .entry-meta span {
      font-size: 14px;
      letter-spacing: 0.1px;
    }
    .article .entry-meta span:after {
      margin-left: 5px;
      margin-right: 0px;
    }
    .article .post .entry-thumbnail {
      padding-bottom: 50px;
    }
    .article .entry-content blockquote {
      margin: 50px 0px;
    }
    .article .navigate {
      margin-bottom: 0px;
    }
    /* #Contact
		================================================== */
    .contact .form {
      padding: 75px 0px;
    }
    .contact .info {
      margin-bottom: 0px;
      margin-top: 0px;
      padding-left: 0px;
      text-align: center;
    }
    .contact .info .info-item {
      margin-left: 0px;
      margin-right: 0px;
    }
    /* #Footer
		================================================== */
    footer .social li {
      background-size: 28px 28px;
      border-radius: 30px;
      height: 36px;
      width: 36px;
    }
  }
  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    /* #Project
		================================================== */
    .descrip {
      opacity: 0;
    }
    .vert {
      opacity: 0;
    }
    .projects .project .thumb {
      height: 100%;
      position: absolute;
      width: 100%;
    }
    .projects .project .thumb img {
      height: 100%;
      width: 100%;
    }
    .projects .project .info {
      height: 100%;
      width: 100%;
    }
    /* #Project Preview
		================================================== */
    .projects .preview img, .projects .preview video, .projects .preview iframe {
      height: 251px;
      width: 420px;
    }
    /* #Clients
		================================================== */
    .client {
      width: 420px !important;
    }
    /* #Blog
		================================================== */
    .blog .post .entry-thumbnail img {
      height: 251px;
      width: 420px;
    }
    .blog .post .entry-thumbnail iframe {
      height: 251px;
      width: 420px;
    }
    .article .post .entry-thumbnail img, .article .post .entry-thumbnail video {
      height: 251px;
      width: 420px;
    }
  }
  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {
    /* #Project Preview
		================================================== */
    .descrip {
      opacity: 0;
    }
    .vert {
      opacity: 0;
    }
    .homelogo {
      width: 180px;
      margin-top: 40px;
    }
    .projects .preview img, .projects .preview video, .projects .preview iframe {
      height: 169px;
      width: 300px;
    }
    /* #Clients
		================================================== */
    .client {
      width: 300px !important;
    }
    /* #Blog
		================================================== */
    .blog .post .entry-thumbnail img {
      height: 169px;
      width: 300px;
    }
    .blog .post .entry-thumbnail iframe {
      height: 169px;
      width: 300px;
    }
    .article .post .entry-thumbnail img, .article .post .entry-thumbnail video {
      height: 169px;
      width: 300px;
    }
  }