body{
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #c4c3ca;
    overflow-x: hidden;
    background-color: #FFF;
}
h1, h2, h3, h4, h6,
.h1, .h2, .h3, .h4, .h5, .h6{
    font-family: 'Poppins', sans-serif;
	font-size: 1.8rem;
    margin-bottom: 0;
	  line-height: 1.35;
	  color: #686868;
}
h5, .h5 {
	  font-size: 2.8rem;
	  font-weight: 500;
	  color: #c4c3ca;
}
::selection {
	  color: #000;
}
::-moz-selection {
	  color: #000;
}
::selection {
	  background-color: #FFF;
}
::-moz-selection {
	  background-color: #FFF;
}
.section {
    position: relative;
	  width: 100%;
	  display: block;
}
.over-hide{
	  overflow: hidden;
}
.primary-color{
	  color: #535353;
}
.padding-top-bottom-big {
	  padding-top: 140px;
	  padding-bottom: 140px;
}
.padding-top-big {
	  padding-top: 140px;
}
.padding-bottom-big {
	  padding-bottom: 140px;
}
.padding-top-bottom {
    padding-top: 100px;
    padding-bottom: 100px;
}
.padding-top {
	  padding-top: 100px;
}
.padding-bottom {
	  padding-bottom: 100px;
}
.section-title-wrap p{
    letter-spacing: 2px;
    font-size: 22px;
    font-weight: 500;
    padding: 0;
}
.section-title-wrap h1{
    margin: 0;
    padding: 0;
    font-size: 6rem;
    font-weight: 300;
    line-height: 1.1;
}
.background-dark {
	  background-color: #999;
}

/* #Cursor
==================================================

* {
	cursor: none;
}
.cursor {
    --size: 8px;
    height: var(--size);
    width:  var(--size);
    border-radius: 50%;
    position: absolute;
    z-index: 10000;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.cursor.cursor-shadow {
    background-color: transparent;
    border: 1px solid #fff;
    --size: 40px;
    transition: top .2s, left .2s,
                width .2s, height .2s,
                background-color .2s, border-color 0.2s;
    transition-timing-function: ease-out;
}
.cursor.cursor-dot {
    background: #7f6ed2;
    transition: width .2s, height .2s;
}
.cursor-shadow.active {
    --size: 80px;
    border-color: rgba(255,255,255, 0);
    background-color: rgba(255,255,255,.1);
}
.cursor-dot.active {
	  --size: 0;
}
a {
	  cursor: pointer;
}
a:hover {
  	text-decoration: none;
}

 
/* #Blog post
================================================== */
 
.blog-post-box{
    position: relative;  
    display: inline-block;
    cursor: pointer;
}
.blog-post-box h5{
	  position: relative;  
	  text-transform: none;
	  cursor: pointer;
	  mix-blend-mode: difference;
	  z-index: 3;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear; 
}
.blog-post-box:hover h5{
}
.blog-post-box p{
	  position: relative;  
	  color: #000;
	  cursor: pointer;
    font-weight: 500;
	  font-size: 14px;
	  display: inline-block;
	  mix-blend-mode: luminosity;
	  padding: 4px 12px;
	  background-color: rgba(127,110,210,.8);
    border-radius: 2px;
  	z-index: 4;
}

/* #Blog cursor images
================================================== 
 
.cursor.cursor-dot.active-blog-post-1,
.cursor.cursor-dot.active-blog-post-2,
.cursor.cursor-dot.active-blog-post-3,
.cursor.cursor-dot.active-blog-post-4,
.cursor.cursor-dot.active-blog-post-5,
.cursor.cursor-dot.active-blog-post-6,
.cursor.cursor-dot.active-blog-post-7 {
	  opacity: 0;
}
.cursor-shadow.active-blog-post-1,
.cursor-shadow.active-blog-post-2,
.cursor-shadow.active-blog-post-3,
.cursor-shadow.active-blog-post-4,
.cursor-shadow.active-blog-post-5,
.cursor-shadow.active-blog-post-6,
.cursor-shadow.active-blog-post-7 {
	  --size: 160px;
  	border-color: rgba(255,255,255, 0);
	  border-width: 0;
	  background-color: transparent;
	  background-position: center center;
	  background-repeat: no-repeat;
  	background-size: cover;
	  border-radius: 50%;
  	z-index: 1;
}
.cursor-shadow.active-blog-post-1 {
	  background-image: url('http://ivang-design.com/alke/img/blog/1.jpg');
}
.cursor-shadow.active-blog-post-2 {
	  background-image: url('http://ivang-design.com/alke/img/blog/2.jpg');
}
.cursor-shadow.active-blog-post-3 {
	  background-image: url('http://ivang-design.com/alke/img/blog/3.jpg');
}
.cursor-shadow.active-blog-post-4 {
	  background-image: url('http://ivang-design.com/alke/img/blog/4.jpg');
}
.cursor-shadow.active-blog-post-5 {
	  background-image: url('http://ivang-design.com/alke/img/blog/5.jpg');
}
.cursor-shadow.active-blog-post-6 {
	  background-image: url('http://ivang-design.com/alke/img/blog/6.jpg');
}
.cursor-shadow.active-blog-post-7 {
	  background-image: url('http://ivang-design.com/alke/img/blog/7.jpg');
}

/* #Blog nav link
================================================== */

.blog-nav {
	  position: relative;
    cursor: pointer;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
	  color: #565b70;
    font-size: 4vw;
    opacity: 0.4;
    transition: opacity .2s;
    transition-timing-function: ease-out;
}
.blog-nav:hover {
    opacity: 0.7;
	  color: #565b70;
}

/* #Link to page
================================================== */

.link-to-portfolio {
	  position: fixed;
    top: 30px;
    right: 30px;
    z-index: 20;
    cursor: pointer;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 3px;
    background-position: center center;
    background-size: cover;
    background-image: url('https://ivang-design.com/ig-logo.jpg');
    box-shadow: 0 0 0 2px rgba(255,255,255,.1);
    transition: opacity .2s, border-radius .2s, box-shadow .2s;
    transition-timing-function: ease-out;
}
.link-to-portfolio:hover {
    opacity: 0.8;
    border-radius: 50%;
    box-shadow: 0 0 0 20px rgba(255,255,255,.1);
}

@media (max-width: 991px) { 
  h5, .h5 {
      font-size: 1.2rem;
  }
  .section-title-wrap h1{
      font-size: 4rem;
  }
  .blog-nav {
      font-size: 7vw;
  }
}