/*
Theme Name: Brandbook
Description:    Brandbook
Version:		1.0
Author:			Farhad
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

@font-face {
    font-family: 'Gilroy';
    src: url('fonts/Gilroy-ExtraBold.woff2') format('woff2'),
    url('fonts/Gilroy-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Gilroy Semi Bold';
    src: url('fonts/Gilroy-SemiBold.woff2') format('woff2'),
    url('fonts/Gilroy-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gilroy Regular';
    src: url('fonts/Gilroy-Regular.woff2') format('woff2'),
    url('fonts/Gilroy-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, caption, tbody, tfoot, thead, .contact-form-thank-message strong, fn, input, textarea, .full-logos ul li,.case-studies-section-06.sec-06-1 .author p {
  border: 0 none;
  color: #000;
  list-style-type: none;
  outline: 0 none;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  font-family: 'SimplerPro',arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
}
li.post .item-layout-2 .description p,.updates-hero .inside .title-section > div p,.description.bg p,.hero-description p, .area-description p, .usage ul.items .description, .construction ul.items .description p, .sqaure_banner li .title, .construction .description p,.usage ul .item-layout-2 h4
{
  line-height: 35px;
}

body,html {
  margin: 0;
  padding: 0;
}
.open-window{
  overflow: hidden;
}
html {
  scroll-behavior: smooth;
}

body.open-popup {
  overflow: hidden;
}

*, :after, :before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

video, header, div:not(.nottra), a, p, li:not(.nottra), ul, section, input, label, img, span, .most-popular-posts .image:after, .middle-post a:before, button, i, h1, #portfoliolist a .thumb .bg-image:before, #portfoliolist a .thumb .inside:before,:before,:after {
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
}

a {
  text-decoration: none;
}

.b-lazy.b-loaded,.b-lazy.b-error {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  opacity: 1;
}

.b-lazy {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  opacity: 0;
}

#clear {
  clear: both;
}

.wow {
  visibility: hidden;
}
header{height: 80px;position: fixed;width: 100%;z-index: 10000000;}

header.nav-up {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
header.nav-down {
    background-color: rgba(255,255,255,.8);
    height: 80px;
}
header.nav-down .menu-primary-container{
}


header .inside, .sup .inside, .credit-section .inside,.brand-system-wrapper .inside{margin-left: 125px;margin-right: 125px;position: relative;height: 100%;}
header a.logo,footer a.logo{display: inline-block;position: absolute;right: 0;top: 0;bottom: 0;margin: auto;height: 65px;}
header a.logo img, footer a.logo img{max-width: 100%;max-height: 100%;display: block;float: right;}
.menu-primary-container{
  float: left;
  padding-top: 25px;
}
.brand-system-wrapper .sidebar ul li a,.download-link a.jump span{
  font-size:18px;
}
.download-link a.jump span{
  display: inline-block;
}
header ul.menu{margin: 0;padding: 0;list-style-type: none;display: table;}
header ul.menu li{
  display: table-cell;
  padding-left: 75px;
}
footer{
  background-color: #fff;
  z-index: 10000;
  position: relative;
}
header ul.menu li a{
  padding-left: 0;
  padding-right: 0;
  position: relative;
  padding-bottom: 5px;
}
.area.usage.construction.tools-usage h4,.post h2{
  font-size:35px;
}

.slider .item .inline .num, 
.slider .item .inline .subtitle,
.usage ul.items .description,
.social-round-title
{
  font-size:22px;
}
.area h2, .usage.motion-principles.art-principles ul.items .title, .principles-items h4, .post .item .desc,.post h2
{
  font-size:28px;
  font-weight:600;
  font-family: 'SimplerPro',arial, sans-serif;
}
header ul.menu li a:hover:before{
  opacity:0;
}
header ul.menu li:last-child{
  padding-left:0;
}
.homepage-hero, .banner .inside, .files-section, .brand-story-slider .inside, .slider,.bottom-links .inside{
  width: 1440px;
  margin: auto;
}
.updates-hero .inside{
  margin: auto;
  display: table-cell;
  vertical-align: top;
  padding-top: 180px;
}
.showcases-hero .inside{
  padding-top:0;
}
.updates-hero .inside .title-section, .post .item,.page-template-updates-php .updates-hero .inside .title-section{
  width: 1050px;
  margin: auto;

}
.updates-hero .inside .title-section{
  display: table;
  width: auto;
}

.updates-hero .inside .title-section h1{display: table-cell;vertical-align: top;}
.updates-hero .inside .title-section h1 p{
  margin:0;
}
.updates-hero .inside .title-section > div{
  display: table-cell;
  vertical-align: top;
}
.updates-hero .inside .title-section > div p{
  margin:0;
  padding:0;
}
 .post .item .desc{
   font-size:14px;
 }
.hierarchy .item p,.hierarchy .two-images li .description p,header ul.menu li a{
  font-size:16px;
}
.homepage-hero{display: table;}
.homepage-hero, .first-banner, .third-banner, .fifth-banner{
  height: 100vh;
}
.banner.first-banner, .banner.second-banner, .banner.third-banner, .banner.fifth-banner, .banner.fourth-banner{
  height: auto;
  padding-top: 150px;
}
.third-banner{
  height:auto;
}
.fifth-banner{
  height:auto;
  padding-top:200px;
  padding-bottom:200px;
}
.homepage-hero .social-links{
  position: absolute;
  left: 0;
  top: 0;
}
.updates-hero.showcases-hero .inside .title-section h1,
.updates-hero.showcases-hero .inside .title-section > div{display: table-cell;vertical-align: top;width: 50%;}
.updates-hero.showcases-hero .inside .title-section > div{
  padding-top:10px;
}
.homepage-hero .social-links li,.area.overview ul .item,.sqaure_banner li{
  padding-left: 30px;
}
.post1 h2, .updates-hero .inside .title-section h1, .brand-system-wrapper .content .entry h1, .banner h2 p, .homepage-hero h1 p, .files-section .inside .title h2 p, .credit-section .inside > div.credit p, .credit-section .inside > div.credit p a, .social > a, .brand-story-description p strong, .brand-story-slider .inside h2 p, .slider .item .inline h3 p, .slider .item .inline .num, .bottom-links .inside > a span, .brand-story-messaging h3,.brand-story-elments h2{
  font-family: 'SimplerPro', sans-serif;
  font-weight: 800;
}
.homepage-hero h1, .files-section .inside .title h2 p{font-size: 120px;line-height: 120px;}
.homepage-hero .inside{height: 100%;display: table-cell;vertical-align: middle;position: relative;z-index: 2;}
.homepage-hero .inside h1{
  position:relative;
  line-height: normal;
}
.homepage-hero h1 p{
  font-size: inherit;
  margin: 0;
}
.brand-story-hero{
  text-align: center;
}
.homepage-hero.brand-story-hero h1 p{
  font-size: 90px;
  line-height: 90px;
  padding-top: 40px;
  margin: 0;
  font-family: 'SimplerPro', sans-serif;
}
a.jump,.second-banner ul.items .name{position: relative;padding-left: 40px;display: inline-block;}
a.jump span,.banner.fourth-banner a.jump span{
  font-size:20px;
}
a.jump:before{
  content:'';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #FFF;
  bottom: -8px;
  right: 0;
}
a.jump:hover:before{
  opacity:0;
  visibility:hidden;
}
a.jump:hover svg{
  width:30px;
  left:-5px;
}
.description.bg p{
  padding:0;
  margin:0;
}
.arrow-sumbol {
    width: 25px;
    height: 18px;
    transition: all .5s cubic-bezier(.075,.82,.165,1);
    margin-right: 0;
    position: absolute;
    left: 0;
    cursor: pointer;
    transform: rotate(180deg);
    right: auto;
    top: 0;
    bottom: 0;
    margin: auto;
}
.arrow-sumbol marker {
    overflow: visible;
    fill: #444444;
}
.arrow-sumbol line {
    stroke: #444444;
    stroke-width: 1.2px;
}
.hero-image{
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  background-size: cover;
  background-position: center;
}
.doodles p{
  margin:0;
 padding:0;
}
.usage.logo-symbol ul.items .image.video{
  height:285px;
}
.banner .inside{
  display: table;
  height: 100%;
}
.banner .inside > div{display: table-cell;width: 50%;vertical-align: middle;}
.banner .inside .content .description{
    padding-left: 110px;
}
.banner .inside .image .img,.banner .inside .image video{
  width: 100%;
  height: calc(100vh - 200px);
  background-size: contain;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
}
.banner .cat-name{

}
.description-main{
  padding-left: 50%;
}
.banner h2 p, 
.brand-story-slider .inside h2 p, 
.slider .item .inline h3 p,
.bottom-links .inside > a span,
.brand-system-wrapper .content .entry h1,
.updates-hero .inside .title-section h1
{font-size: 48px;line-height: 56px;margin: 0;}
.banner h2 p{
  padding-top: 20px;padding-bottom: 20px;
}
.banner .description p{margin: 0;line-height: 40px;padding-left: 0;padding-bottom: 80px;}
.banner a.jump span,.icons-clear h2{
  font-size:24px;
}
.banner a.jump:before{
  background-color:#000;
}
.second-banner .inside,.fourth-banner .inside{
  display: block;
}
.second-banner .inside > div,.fourth-banner .inside > div{display: block;width: auto;}

.second-banner ul.items, .fourth-banner ul, .pairing ul.items,.hierarchy .two-images{margin: 0;padding: 0;list-style-type: none;font-size: 0;margin-left: -30px;}
.second-banner ul.items li{
  width: 25%;
  display: inline-block;
  padding-left: 30px;
  padding-top: 60px;
}
.second-banner ul.items a{
  display: block;
  padding: 0;
}
.second-banner ul.items a:hover .image{
    -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}





.download-link a.jump svg{left: 30px;}
.download-link a.jump:hover svg{
  left:25px;
}
.second-banner ul.items a:before{
  content:'';
  height: 1.5px;
  background-color: #000;
  width: 100%;
  position: absolute;
  top: 0;
  opacity: 1;
  visibility: visible;
}
.second-banner ul.items span{
  font-weight: 500;
}
.second-banner ul.items .name{
  position: relative;
  display: inline-block;

  padding-bottom: 30px;
}

.second-banner ul.items .name, .area.overview ul .title{
    padding-top: 30px;
}
.second-banner ul.items .image,.principles-items .thumb{
  height: 330px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.third-banner .inside .image{
  padding-left: 0;
}
.page-template-homepage .third-banner .inside .image{
  padding-left: 200px;
}
.third-banner .inside .image .img {
    height: 100%;
}
.fourth-banner h2 p{
  padding-bottom: 70px;
}
.fourth-banner{
  padding-top: 0;
}
.fourth-banner ul.masonry-gallery{
  padding: 0;
  margin: 0;
  list-style-type: none;
  padding-top: 85px;
}
.masonry-gallery{padding: 0;margin: 0;list-style-type: none;padding-top: 85px;font-size: 0;margin-left: -30px;}
.logo-aplications .masonry-gallery,.grid-construction .masonry-gallery{
  padding-top: 0px;
}
.showcases-wrapper .masonry-gallery{
  padding-top: 120px;
}
.tools-usage .masonry-gallery{
  padding-top:0;
  margin-left: -30px;
}
.masonry-gallery .item, .masonry-gallery li, .pairing ul.items li, .hierarchy .two-images li, body .showcases-wrapper .masonry-gallery .item{width: 50%;display: inline-block;padding-left: 30px;padding-bottom: 30px;}
.masonry-gallery a,.masonry-gallery .thumb{
  display: block;
  height: 380px;
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
  position: relative;
}
.masonry-gallery .thumb{
  background-size: cover;
  background-position:center;
}
.masonry-gallery .item.hidden{
  opacity:0;
  visibility:hidden;
  display: none!important;
}



body .masonry-gallery.masonry-gallery-with-top-image li,.sqaure_banner li{
  width:50%;
}
body .masonry-gallery.masonry-gallery-with-top-image{
  padding-bottom: 10px;
}
body .art .masonry-gallery.masonry-gallery-with-top-image{
  padding-top: 0;
}
body .masonry-gallery.masonry-gallery-with-top-image li:first-child{
  width:100%;  
}
.masonry-gallery-with-top-image .thumb, 
.usage.construction ul.items .image,
body .usage ul.masonry-gallery-with-same-image li .thumb,
.sqaure_banner li .image,
.usage.logo-symbol ul.items .image,
.art .masonry-gallery-with-top-image li:first-child .thumb
{
  height: 510px; 
}
.sqaure_banner li .image{
  background-size:
  contain;
  background-position: right;
}
.masonry-gallery li:nth-child(3),
.masonry-gallery .item:nth-child(3),
.masonry-gallery li:nth-child(7),
.masonry-gallery .item:nth-child(7)
{
  width: 60%;
  }
.masonry-gallery li:nth-child(4),
.masonry-gallery .item:nth-child(4),
.masonry-gallery li:nth-child(8),
.masonry-gallery .item:nth-child(8)
{
  width: 40%;
}
body .masonry-gallery.masonry-gallery-with-same-image-second-full li:nth-child(3){
 width:100%; 
}
.first-banner .inside .content{
  padding-left: 180px;
}
.fifth-banner .description p{
  padding-bottom:0;
}
.fifth-banner h2 p{
  padding-bottom:60px;
}
.usage.construction ul.items .image{
  margin-bottom: 0;
}
.sup .inside{
  height: 1px;
  background-color: #000;
}
.fifth-banner .inside .content{width: 40%;}
.fifth-banner .inside .description{
  width: 60%;
}
.files-section{height: auto;padding-bottom: 100px;}
.files-section .inside{display: table;width: 100%;height: 100%;}
.files-section .inside > div{
  display: table-cell;
  vertical-align: middle;
  width: 50%;
}

.showcases-wrapper .masonry-gallery .item{
  
}
.showcases-wrapper .masonry-gallery .item:nth-child(1){
  width: 100%;
}
.showcases-wrapper .masonry-gallery .item:nth-child(4),
.showcases-wrapper .masonry-gallery .item:nth-child(5),
.showcases-wrapper .masonry-gallery .item:nth-child(8),
.showcases-wrapper .masonry-gallery .item:nth-child(9),
.showcases-wrapper .masonry-gallery .item:nth-child(12),
.showcases-wrapper .masonry-gallery .item:nth-child(13),
.showcases-wrapper .masonry-gallery .item:nth-child(16),
.showcases-wrapper .masonry-gallery .item:nth-child(17),
.showcases-wrapper .masonry-gallery .item:nth-child(20),
.showcases-wrapper .masonry-gallery .item:nth-child(21)
{
  width: 60%;
}

.showcases-wrapper .masonry-gallery .item:nth-child(5),
.showcases-wrapper .masonry-gallery .item:nth-child(9),
.showcases-wrapper .masonry-gallery .item:nth-child(13),
.showcases-wrapper .masonry-gallery .item:nth-child(17),
.showcases-wrapper .masonry-gallery .item:nth-child(21)
{
  width: 40%;
}
.files-section .inside .title h2 p{

}
.files-section .inside .files ul{margin: 0;padding: 0;list-style-type: none;border-top: 1px solid #000;}
.files-section .inside .files ul li{

}
.files-section .inside .files ul li a{display: block;padding: 0;padding-top: 15px;padding-bottom: 15px;border-bottom: 1px solid #000;}
.files-section .inside .files div{

}
.sidebar ul li.current-menu-item a, .sqaure_banner li .title:before, .files-section .inside .files li:last-child span, .hierarchy .description p strong{font-family: 'SimplerPro', arial, sans-serif;}
.files-section .inside .files i{display: inline-block;border-bottom: 1px solid #000;position: absolute;left: 0;width: 30px;height: 30px;}
.files-section .inside .files svg{
  transform: rotate(
90deg);
  width: 18px;
  right: 0;
}
.files-section a.jump .arrow-sumbol line{
  stroke-width: 1px;
}
.files-section a.jump:hover svg{
  left:0;
  top:8px;
}
.credit-section .inside{display: table;width: calc(100% - 230px);}
.credit-section .inside > div{
  display: table-cell;
  width: 33%;
  vertical-align: middle;
}
.credit-section .inside > div.social ul.social-links{
  float: left;
  padding-left: 20px;
  margin-top: 0;
}
.social > a{
  float:left;
}
footer a.logo{
  position: relative;
}
.credit-section .inside > div.credit p{
  text-align: center;
}
.social-links{margin: 0;padding: 0;list-style-type: none;display: table;}
.social-links li{display: table-cell;padding-left: 15px;vertical-align: middle;}
.social-links a{
  display: block;
}
.social-links a img{
  display: block;
}
.credit-section .inside > div.social:after,.bottom-links .inside:after{
  content:'';
  clear:both;
  display: block;
}
.credit-section .inside > div.social{
  text-align:left;
}
.credit-section{
  height:120px
}
.brand-story-description p{
  padding: 190px 0 0;
  text-align:center;
  margin: 0;
  line-height: 40px;
}
.brand-story-items ul{margin: 0;padding: 0;list-style-type: none;}

.brand-story-items ul li:nth-child(odd) .inside .image{
  padding-right: 50px;
}
.brand-story-items ul li:nth-child(even) .inside .image{
  padding-left: 50px;
}
.brand-story-items ul li:nth-child(odd) .inside .content{
  padding-left: 50px;
}
.brand-story-items ul li:nth-child(even) .inside .content{
  padding-right: 200px;
}
.brand-story-items ul li .inside:after{
  content:'';
  display:block;
  clear:both;
}
.brand-story-items ul li .inside > div{height: auto;/* padding: 150px 0 0; */}

.brand-story-items ul li .inside{
}
.brand-story-slider{padding-top: 0;}
.brand-story-slider .inside{
  
}
.brand-story-slider .inside h2 p{
  padding-bottom: 80px;
}
.slider{

}
.slider .item{

}
.slider .item .inline{display: table;width: 100%;padding-top: 110px;}
.slider .item .inline .content{display: table-cell;vertical-align: top;width: 50%;padding-left: 180px;padding-right: 0;}
.slider .item .inline .nav{padding-bottom: 40px;}
.slider .item .inline .nav > span{
  display: table-cell;
  vertical-align: middle;
  position: relative;
}
.slider .item .inline .num{padding-left: 22px;}
.slider .item .inline .line{width: 60px;}
.slider .item .inline .line:before{
  content:'';
  height: 1px;
  background-color: #000;
  position: absolute;
  width: 100%;
}
.slider .item .inline .subtitle{padding-right: 30px;}
.slider .item .inline h3 p{margin: 0;padding: 0;}
.slider .item .inline .description p{margin: 0;padding: 0;padding-top: 30px;}
.slider .item .inline .image{display: table-cell;vertical-align: top;width: 50%;height: 510px;}
.slider .item .inline .thumb{height: 100%;display: block;background-size: contain;background-position: center;background-repeat: no-repeat;}
.slick-dots{margin: 0;padding: 0;list-style-type: none;position: absolute;top: 60px;left: 0;display: table;}
.slick-dots li{padding-left: 30px;display: table-cell;}
.slick-dots li.slick-active button,.slick-dots li  button:hover{
  background-color:#000;
}
.slick-dots li:last-child{
  padding-left:0;
}
.slick-dots button,.slider-nav .item span{display: block;width: 11px;height: 11px;font-size: 0;border-radius: 50%;padding: 0;border: 1px solid #000;cursor: pointer;}
.slider-out{
  background-color: #f8f8f8;
}
 .slider-nav .item span{
   border:none;
 }

 .slider-nav .slick-track{
   width: 100%!important;
   text-align: left;
   transform: none!important;
 }
.color-slider .slider-nav .slick-track{
  
}
.slider-nav .item{
  width: 41px!important;
  display: inline-block!important;
  padding-right: 30px;
  float: none;
}
.bottom-links .inside > a{display: inline-block;}
.bottom-links .first-link{float: right;padding-left: 0;padding-right: 100px;text-align: left;}
.bottom-links .second-link{
  float: left;
  padding-left: 100px;
  padding-right: 0;
}
.bottom-links .first-link svg{
  left: auto;
  right: 0;
  transform: rotate(0deg);
}
.bottom-links .first-link:hover svg{
  left:auto;
  right:-10px;
  width:75px;
}
.bottom-links .second-link:hover svg{
  left:-10px;
  right:auto;
  width:75px;
}
.bottom-links svg{width: 65px;}
.bottom-links svg line{
  stroke-width: 2.2px;
}
.bottom-links{
  margin-top: 130px;
  background-color: #fff;
  position: relative;
}
.bottom-links .inside{
  padding-top: 55px;
  border-top: 1px solid #cfcfcf;
  padding-bottom: 0;
}
.brand-system-wrapper{
  padding-top: 230px;
}
.brand-system-wrapper .inside:after{
  content:'';
  display:block;
  clear:both;
}
.brand-system-wrapper .sidebar{display: inline-block;width: 335px;float: right;-webkit-transition: none;-moz-transition: none;-o-transition: none;transition: none;}
.brand-system-wrapper .content{width: calc(100% - 335px);float: right;position: relative;}
.brand-system-wrapper .sidebar ul{margin: 0;padding: 0;list-style-type: none;padding-right: 55px;padding-left: 80px;}

.brand-system-wrapper .content:before{
  content:'';
  display:block;
  height: 100%;
  width: 1px;
  background-color: #cfcfcf;
  position: fixed;
  top: 0;
}
.brand-system-wrapper .sidebar ul li{padding-bottom: 20px;margin-bottom: 15px;border-bottom: 1px solid #000;}
.brand-system-wrapper .sidebar ul li a{display: inline-block;}
.brand-system-wrapper .sidebar ul li:last-child{
  border:none;
}
.current-menu-item a{
  font-weight:800;
}
.brand-system-wrapper .content .entry{
  padding-top: 5px;
  padding-right: 210px;
}
header ul.menu li a,.usage.motion-principles ul.items .description, .color.constraction-second .title, .area.overview ul .title, .brand-system-wrapper .content .entry .subtitle, .clear-space h3, .usage ul.items h4, .usage h3, .color h3, .social-round-title, .social-icons h3, .icons-clear h2,h4.bg{
  font-weight: 600;
  font-family: 'SimplerPro',arial, sans-serif;
}
.usage.motion-principles.art-principles ul.items .description{
  font-weight:300;
}
.usage.construction ul.items h4{
  padding-top: 50px;
  max-width: 260px;
}
.usage.construction ul.items .description{
  padding-top:0;
  padding-bottom:190px;
}
.usage h3.bg,.area.usage.construction.tools-usage h3,.pairing ul.items li .image, .clear-space h3.bottom-m-margin, .usage ul.items .image, .usage h3, .color ul.items.guidnace .image, .social-round-icon,.hierarchy .two-images li .image{
  margin-bottom: 35px;
}
.clear-space h3, .usage h3, .social-icons h3, .cta h3,.icons-clear h2,.principles.art-principles h2{
  position:relative;
  display: inline-block;
}
header ul.menu li a:before,.clear-space h3:before, .usage h3:before, .social-icons h3:before, .cta h3:before,.icons-clear h2:before,.principles.art-principles h2:before{
  content:'';
  position:absolute;
  width:100%;
  height:1px;
  background-color:#000;
  bottom: 0;
}
header ul.menu li a:before{
  opacity:0;
  visibility:hidden;
}
header ul.menu li.current-menu-item a:before{
  opacity:1;
  visibility:visible;
}

.post h2,.area.usage.color.constraction-second h2, .brand-system-wrapper .content .entry .subtitle, .brand-system-wrapper .content .entry h1, .area h2, .usage ul.items h4, .guidance.calltoactions h2, .usage.construction ul.items h4,.area.usage.color.photo h2
{
    padding-bottom:35px;
}
.guidance.calltoactions h2{
  margin-bottom:0;
}
.usage ul.items h4,.usage.construction ul.items h4{
  padding-bottom:10px;
}
.usage ul.items h4{line-height: normal!important;}
.area.usage.construction.tools-usage h4{
  padding-top: 35px;
  max-width: none;
}
.tools-usage .masonry-gallery,.area.usage.construction.tools-usage h4{
  padding-bottom: 135px;  
}
.hero-description p,.area-description p,.area.usage.color.constraction-second p{
  margin:0;
  padding:0;
}
.area-description li{
  padding-bottom: 15px;
}
.hero-description{
  padding-bottom: 130px;
}
.fullwidth-image{margin-bottom: 45px;position: relative;min-height: auto;overflow: hidden;min-height: 500px;}
.fullwidth-image img{
  max-width:100%;
  min-width: 100%;
  display: block;
}
.slick-slider .fullwidth-image .thumb{
  height:670px;
}
.fullwidth-image .thumb .image{
  height: 100%;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  background-repeat: no-repeat;
}
.post .item .desc.by, .post, .website-images, .pairing ul.items, .area-description, .clear-space h2, .logo-aplications h2, .hero-description-color, .color.guidance ul, .principles h2, .area.tools-usage h2, .icons-construction .area-image:last-child, .construction .description, .tools-example-list h2, .area.usage.color h2, .sqaure_banner li, .area.usage.color.constraction-second .description, .area.overview ul li, .area.motion-construction h2, .description.bg, h4.bg, .description-main, .top-sec, .posts.float .post

{
  padding-bottom: 45px;
}
.area.overview ul li.first{
  padding-bottom: 140px;
}
.posts.float .post{
  padding-top:90px;
}
.posts.float .post{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 10000000000;
  background-color: #fff;
  height: 100vh;
  overflow-y: auto;
}
.posts.float .post.active{
  opacity:1;
  visibility:visible;
  pointer-events:all;
}
.color-applications .area-image, .icons-construction .area-image,.example-list .area-image{
  padding-bottom:30px;  
}
.float .post .main-image, .post, .clear-space h3, .usage h3, .social-icons h3, .icons-clear h2, .updates-hero-out{
  margin-bottom: 45px;
}
.usage h3, .color h3, .guidance h2, .color.guidance ul li, .color-slider-out{
  margin-bottom:90px;
}
.guidance.calltoactions .area-description{
  padding-bottom:90px;
}
.post .item .desc.date,.clear-space h3, .usage h3, .color h3, .social-icons h3, .icons-clear h2, .usage.motion-principles.art-principles ul.items .title, .principles.art-principles h2, .usage.art ul.principles-items h4{
   padding-bottom:10px; 
}
.construction ul.items, .usage ul.items, .color ul,.social-icons ul{margin: 0;padding: 0;list-style-type: none;font-size: 0;margin-left: -30px;padding-bottom: 100px;}
.construction ul.items li, .usage ul.items li, .color ul li, .social-icons ul li, .usage.logo-symbol ul.items li{
  display: inline-block;
  padding-left: 30px;
  width: 50%;
  vertical-align: top;
}
.usage ul.items li, .color ul li, .social-icons ul li,body .art .masonry-gallery-with-top-image li
{
  width: 33.3%;
}
.usage.construction ul.items li, body .usage ul.masonry-gallery-with-same-image li, .color.constraction-second ul li{
  width:50%;
}
.usage.logo-symbol.brand-movment ul.items li{
  width: 100%;
  max-width: none;
}
.item{
  position:relative;
  vertical-align: top;
}
.construction ul.items .image{height: 290px;background-size: contain;background-position: right center;background-repeat: no-repeat;}
.construction ul.items .description{padding-top: 35px;}
.construction ul.items .description p,.post .description p{
  margin: 0;
}
.usage ul.items .image, .color ul.items.guidnace .image{
  height:390px;
  background-size: contain;
  background-position: right;
  position: relative;
  background-repeat: no-repeat;
}

.usage.motion-principles ul.items .image{
  /* background-size: cover; */
}

.usage ul.items.guidnace .image,
.color ul.items.guidnace .image,
.art .masonry-gallery-with-top-image .thumb
{
  height:220px;
}
.color.guidance ul.items.guidnace .image{
  height:150px;
background-size: contain;}
.color.guidance ul.items.guidnace .description,
.hero-description p, .area-description p, .area.usage.color.constraction-second p
{
  line-height:40px;
}
.close-symbol, .color.guidance li:nth-child(2) i.close-symbol, .color.guidance li:nth-child(4) i.close-symbol, .color.guidance li:nth-child(6) i.close-symbol{position: absolute;width: 31px;height: 31px;border: 1px solid #E02020;border-radius: 50%;right: 0;top: -50px;}
.close-symbol:before, .close-symbol:after, .usage ul.items.guidnace li .item:before, .color.guidance li:nth-child(2) i.close-symbol:after, .color.guidance li:nth-child(2) i.close-symbol:before, .color.guidance li:nth-child(4) i.close-symbol:after, .color.guidance li:nth-child(4) i.close-symbol:before, .color.guidance li:nth-child(6) i.close-symbol:after, .color.guidance li:nth-child(6) i.close-symbol:before{content:'';background-color: #E02020;height: 1px;position: absolute;width: 15px;right: 0;left: 0;bottom: 0;top: 0;margin: auto;}
.close-symbol:before{transform: rotate(45deg);}
.close-symbol:after{
  transform: rotate(
-45deg);
}
.color.guidance i.close-symbol{
  /* border: 1px solid transparent; */
}
.color.guidance i.close-symbol:before,.color.guidance i.close-symbol:after{
  /* background-color: #000; */
  /* width: 25px; */
}
.usage ul.items.guidnace li .item:before,
.color.guidance ul.items.guidnace li .item:before
{
  content:'';
  width: 110%;
  transform: rotate(-45deg);
  bottom: auto;
  top: 110px;
  left: auto;
  right: -20px;
  position: absolute;
  height: 1px;
  z-index: 1;
  display:none;
}
.color.guidance ul.items.guidnace li .item:before{
  background-color: #E02020;
  width: 80%;
  top: 75px;
  right: 0;
}
.color.guidance ul.items.guidnace li:nth-child(2) .item:before,
.color.guidance ul.items.guidnace li:nth-child(4) .item:before,
.color.guidance ul.items.guidnace li:nth-child(6) .item:before
{
  background-color: #E02020;
}
.color.guidance.calltoactions ul.items.guidnace li .item:before{
  width: 80%;
}

.color.guidance ul.items.guidnace.can li .item:before{
  display: none;
}
.color ul{margin: 0;padding-top: 0;list-style-type: none;font-size: 0;padding-left: 0;padding-right: 0;margin-left: -30px;}
.color ul li,.social-icons ul li{
  padding-bottom: 30px;
}
.color.photo ul{
  padding-bottom:0;
}
.color ul li .thumb{
  height: 170px;
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
}
.social-round-icon{
  width:170px;
  height:170px;
  background-size: contain;
  background-position: center;
  position: relative;
  background-repeat: no-repeat;
}
.social-round-icon .icon,.social-icons ul li .thumb .icon{
  position: absolute;
  z-index: 10;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}
.social-round-title,
.download-link,
.doodles,
.usage.speed ul.items,
body .grid-construction-first .masonry-gallery.masonry-gallery-with-top-image{
  padding-bottom:150px;
}
.social-icons ul li .thumb{
  height: 470px;
  background-size: contain;
  background-position: top right;
  position: relative;
  background-repeat: no-repeat;
}
.social-icons ul, .color.constraction-second ul.masonry-gallery{
  padding-bottom:60px;
}
.usage.speed.example-motion ul.items{
  padding-bottom: 0;
}
.usage.speed.hierarchy ul.items{
  padding-bottom: 0;
  display: block;
}
.color.constraction-second ul{
  padding-bottom:0;
}
video{
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    max-width: 100%;
    object-fit: cover;
    height: 100%;
    z-index: 1;
}
.area-image video{
  position:relative;
}
.download-link a.jump{
  border: 1px solid #000;
  padding: 4px 35px 10px;
  padding-left: 70px;
  display: inline-block;
}

.pairing ul.items li,.hierarchy .two-images li{
  width: 50%;
  display: inline-block;
  vertical-align: top;
}
.pairing ul.items li .item{
  
}
.pairing ul.items li .image,.hierarchy .two-images li .image {
  height: 590px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.hierarchy .area-image{
  padding-bottom: 25px;
}
.hierarchy .items{margin: 0;padding: 0;list-style-type: none;display: inline-block;padding-bottom: 70px;font-size: 0;}
.hierarchy .items:after{
  clear:both;
  display:block;
  content:'';
}
.hierarchy .two-images .items{
  padding-bottom: 0;
}
.hierarchy .items li{display: inline-block;vertical-align: top;padding-left: 30px;float: none;max-width: 250px;padding-bottom: 30px;}
.hierarchy .two-images li .description{
  padding-bottom: 0;
}
.hierarchy .two-images .items li{
  padding-bottom: 40px;
  min-height: 155px;
}
.hierarchy .items li:last-child{
  padding-left:0;
}
.hierarchy .two-images .items li:last-child{
  padding-left: 65px;
}
.hierarchy .description p{margin: 0;line-height: 26px;}

.hierarchy .two-images{
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.cta h3{
  font-weight: 300;
}
.principles h2{
  padding-top:45px;
}
.logo-symbol h2,.principles.art-principles h2{
  padding-top:0;
  position: relative;
}
.icons-clear.distance h2{
  padding-bottom:0;
}
.icons-clear.distance h2:before{
  display:none;
}
.construction .description p{
  margin:0;
}
.usage.construction .items{
  padding-bottom: 0;
}
.area.overview ul{margin: 0;padding: 0;list-style-type: none;font-size: 0;}
.area.overview ul li.second,body .art .masonry-gallery.masonry-gallery-with-top-image{
  padding-bottom: 120px;
}
.area.overview ul .item{
  display: inline-block;
}
.area.overview ul .item:last-child{
  padding-left:0;
}
.area.overview ul .image{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 280px;
  height: 280px;
}
.area.overview ul li.second .image{
  height: 330px;
  width:330px;  
}
.area.overview ul li.second .square .image{
}
.area.overview ul .rectangle .image,.area.overview ul li.second .square .image{
  width: 510px;
}
.sqaure_banner ul{
  margin:0;
  padding:0;
  margin-left:-30px;
  list-style-type:none;
  font-size: 0;
}
.sqaure_banner li{
  display:inline-block;
  vertical-align:top;
  counter-increment: item;
}
.sqaure_banner li .title:before{
    content: counter(item, decimal-leading-zero) " ";
    font-weight: 600;
    position: absolute;
    right: 0;
    top: 0;
}
.sqaure_banner li .title{
  margin-top:30px;
  position:relative;
  padding-right: 55px;
}
.hierarchy .masonry-gallery{
  padding-top:0;
}
.updates-hero-out{
  padding-top: 145px;
  background-color: #EBEBEB;
}
.updates-hero{display: table;width: 101%;height: 520px;}
.updates-hero.showcases-hero{
  height:auto;
}
.post .main-image{position:relative;height: 700px;overflow: hidden;}
.posts .inside{margin: 0;padding: 0;list-style-type: none;}
.post .main-image .image{
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.post{
  border-bottom:1px solid #ccc;
}
.read{text-align: center;padding-top: 65px;}
.read span{
  padding: 20px 90px;
  border: 2px solid #000;
  border-radius: 3px;
  display: inline-block;
  cursor: pointer;
}
.read.close-button span{
  padding: 20px 120px;  
}
.read span:hover{
  background-color:#efefef;
}
.post:last-child{
  padding-bottom:0;
  margin-bottom:0;
  border:none;
}
.top-sec{display: table;}
.top-sec > div{
  display: table-cell;
  padding-left: 40px;
  vertical-align: middle;
}
.post .item .top-sec > div.desc{
  padding-bottom: 0;
}
.post .masonry-gallery{
  padding-top:0;
}
.posts.float{
  /* position: fixed; */
  /* top: 0; */
  /* right: 0; */
  /* width: 100%; */
  /* z-index: 10000000000; */
  /* background-color: #fff; */
  /* height: 100vh; */
  /* overflow-y: auto; */
}
.color-slider-out .color-slider{
  width: 100%;
}
.color-slider-out .slick-dots{
  top: auto;
  bottom: 0;
}
.color-slider-out .slick-dots button{
  border: none;
}
.area.sqaure_banner{
  padding-bottom: 60px;
}
span.menu-item-description{
  display: block;
  font-size: 12px;
  color: #8c8c8c;
}
.logo-desc{
  top: 0;
  bottom: 0;
  height: 20px;
  margin: auto;
  float: right;
  margin-right: 10px;
}
.masonry-gallery.one-row-gallery li{
  width: 100%!important;
  padding-left: 0;
}
.masonry-gallery.two-row-gallery li{
  width: 50%!important;
}
.masonry-gallery.three-row-gallery li{
  width: 33%!important;
}
.masonry-gallery.four-row-gallery li{
  width: 25%!important;
}



.brand-story-messaging{
  background-color: #efefef;
  padding: 160px 0 150px;
}
.brand-story-messaging h3{
  padding-bottom: 15px;
}
.brand-story-messaging p{
  margin-top: 0;
  line-height: 40px;
}
.brand-story-messaging ul.items{
  margin: 0;
  padding: 0;
  list-style-type: none;
  grid-template-columns: calc(50% - 35px) calc(50% - 35px);
  display: grid;
  padding-top: 20px;
  row-gap: 40px;
  column-gap: 70px;
}

.brand-story-slider .slider-examples{
  padding-top: 60px;
}
.brand-story-slider .inside.slider-examples h2 p{
  padding-bottom: 30px;
}
.brand-story-slider .slider-examples .description ul{
  margin: 0;
  padding: 0;
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  column-gap: 50px;
  padding-bottom: 80px;
}
.brand-story-slider .slider-examples .description ul li{
  font-size: 22px;
  vertical-align: top;
  padding-bottom:10px;
    line-height: 32px;
}


.brand-story-accordion ul.items{
  display: block;
}
.brand-story-accordion ul.items h3{
  display: inline-block;
  position: relative;
  padding-left: 40px;
  padding-bottom: 0;
  margin-bottom: 15px;
  cursor: pointer;
}
.brand-story-accordion ul.items h3:after{
  content:'';
  background-image: url(gfx/icon-expand.svg);
  width: 40px;
  height: 40px;
  position: absolute;
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
  top: 11px;
  right: 0;
  margin: auto;
}
.brand-story-accordion ul.items .wrapp.active h3:after{
  transform: rotate(180deg);
}
.brand-story-accordion ul.items .wrapp.active .description{
  opacity: 1;
  visibility: visible;
  display: block;
  font-size: 24px;
}
.brand-story-accordion ul.items .description{
  display: none;
  opacity: 0;
  visibility: hidden;
}
.brand-story-accordion .wrapp{
  padding-bottom: 30px;
}

.brand-story-elments{
  margin: 0;
  padding-top: 190px;
  padding-bottom: 75px;
}
.brand-story-elments p{
  margin: 0;
}

@media (min-width: 1200px){
.brand-story-messaging p{
  line-height: 30px;
}
.brand-story-messaging{
  padding: 100px 0 90px;
}
.brand-story-slider .slider-examples .description ul li{
  font-size: 18px;
  line-height: 28px;
}
.brand-story-slider .slider-examples .description ul {
    padding-bottom: 60px;
}
.brand-story-accordion ul.items .wrapp.active .description{
  font-size: 20px;
}
.brand-story-accordion .wrapp{
  padding-bottom: 25px;
}
.brand-story-accordion ul.items h3:after {
    top: 3px;
}
    
    
    
.logo-desc {margin-top: 22px;}
html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, caption, tbody, tfoot, thead, .contact-form-thank-message strong, fn, input, textarea, .full-logos ul li,.case-studies-section-06.sec-06-1 .author p {
  font-size: 18px;
}
li.post .item-layout-2 .description p,.updates-hero .inside .title-section > div p,.description.bg p,.hero-description p, .area-description p, .usage ul.items .description, .construction ul.items .description p, .sqaure_banner li .title, .construction .description p,.usage ul .item-layout-2 h4
{
  line-height: 30px;
}
header{height: 80px;position: fixed;width: 100%;z-index: 10000000;}

header.nav-up {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
header.nav-down {
    background-color: rgba(255,255,255,.8);
    height: 80px;
}
header.nav-down .menu-primary-container{
}


header .inside, .sup .inside, .credit-section .inside,.brand-system-wrapper .inside{margin-left: 50px;margin-right: 50px;position: relative;height: 100%;}
header a.logo,footer a.logo{display: inline-block;position: absolute;right: 0;top: 0;bottom: 0;margin: auto;height: 65px;}
header a.logo img, footer a.logo img{max-width: 100%;max-height: 100%;display: block;}
.menu-primary-container{
  float: left;
  padding-top: 25px;
}
.brand-system-wrapper .sidebar ul li a,.download-link a.jump span{
  font-size:18px;
}
.download-link a.jump span{
  display: inline-block;
}
header ul.menu{margin: 0;padding: 0;list-style-type: none;display: table;}
header ul.menu li{
  display: table-cell;
  padding-left: 75px;
}
footer{
  background-color: #fff;
  z-index: 10000;
  position: relative;
}
header ul.menu li a{
  padding-left: 0;
  padding-right: 0;
  position: relative;
  padding-bottom: 5px;
}
.area.usage.construction.tools-usage h4,.post h2{
  font-size: 24px;
}

.slider .item .inline .num, 
.slider .item .inline .subtitle,
.usage ul.items .description,
.social-round-title
{
  font-size: 18px;
}
.area h2, .usage.motion-principles.art-principles ul.items .title, .principles-items h4, .post .item .desc,.post h2
{
  font-size: 24px;
  font-weight:600;
  font-family: 'SimplerPro',arial, sans-serif;
}
header ul.menu li a:hover:before{
  opacity:0;
}
header ul.menu li:last-child{
  padding-left:0;
}
.homepage-hero, .banner .inside, .files-section, .brand-story-slider .inside, .slider, .bottom-links .inside, .brand-story-messaging .inside,.brand-story-elments .inside{
  width: 1200px;
  margin: auto;
}
  .usage ul.items li{
    margin-bottom: 40px;
  }
    .usage.example-motion ul.items li{
    padding-bottom:10px;
  }
.updates-hero .inside{
  margin: auto;
  display: table-cell;
  vertical-align: top;
  padding-top: 90px;
}
.showcases-hero .inside{
  padding-top:0;
}
.updates-hero .inside .title-section, .post .item,.page-template-updates-php .updates-hero .inside .title-section{
  width: 950px;
  margin: auto;
}
.updates-hero .inside .title-section{
  display: table;
  width: auto;
}

.updates-hero .inside .title-section h1{display: table-cell;vertical-align: top;}
.updates-hero .inside .title-section h1 p{
  margin:0;
}
.updates-hero .inside .title-section > div{
  display: table-cell;
  vertical-align: top;
}
.updates-hero .inside .title-section > div p{
  margin:0;
  padding:0;
}
 .post .item .desc{
   font-size:14px;
 }
.hierarchy .item p, .hierarchy .two-images li .description p, header ul.menu li a,.logo-desc{
  font-size:16px;
}
.homepage-hero{display: table;}
.homepage-hero, .first-banner, .third-banner, .fifth-banner{
  height: 100vh;
}
.banner.first-banner, .banner.second-banner, .banner.third-banner, .banner.fifth-banner, .banner.fourth-banner{
  height: auto;
  padding-top: 60px;
}
.third-banner{
  height:auto;
}
.fifth-banner{
  height:auto;
  padding-top:200px;
  padding-bottom: 80px;
}
.homepage-hero .social-links{
  position: absolute;
  left: 0;
  top: 0;
}
.updates-hero.showcases-hero .inside .title-section h1,
.updates-hero.showcases-hero .inside .title-section > div{display: table-cell;vertical-align: top;width: 50%;}
.updates-hero.showcases-hero .inside .title-section > div{
  padding-top:10px;
}
.homepage-hero .social-links li,.area.overview ul .item,.sqaure_banner li{
  padding-left: 30px;
}
.post1 h2, .updates-hero .inside .title-section h1, .brand-system-wrapper .content .entry h1, .banner h2 p, .homepage-hero h1 p, .files-section .inside .title h2 p, .credit-section .inside > div.credit p, .credit-section .inside > div.credit p a, .social > a, .brand-story-description p strong, .brand-story-slider .inside h2 p, .slider .item .inline h3 p, .slider .item .inline .num, .bottom-links .inside > a span{
  font-family: 'SimplerPro', sans-serif;
  font-weight: 800;
}
.homepage-hero h1, .files-section .inside .title h2 p{font-size: 65px;line-height: 65px;}
.homepage-hero .inside{height: 100%;display: table-cell;vertical-align: middle;position: relative;z-index: 2;}
.homepage-hero .inside h1{
  position:relative;
}
.brand-story-hero{
  text-align: center;
}
.homepage-hero.brand-story-hero h1 p{
  font-size: 60px;
  line-height: 70px;
  padding-top: 25px;
  margin: 0;
  font-family: 'SimplerPro', sans-serif;
}
a.jump,.second-banner ul.items .name{position: relative;padding-left: 40px;}
a.jump span,.banner.fourth-banner a.jump span{
  font-size: 18px;
}
a.jump:before{
  content:'';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #FFF;
  bottom: -8px;
  right: 0;
}
a.jump:hover:before{
  opacity:0;
  visibility:hidden;
}
a.jump:hover svg{
  width:30px;
  left:-5px;
}
.description.bg p{
  padding:0;
  margin:0;
}
.arrow-sumbol {
    width: 25px;
    height: 18px;
    transition: all .5s cubic-bezier(.075,.82,.165,1);
    margin-right: 0;
    position: absolute;
    left: 0;
    cursor: pointer;
    transform: rotate(180deg);
    right: auto;
    top: 0;
    bottom: 0;
    margin: auto;
}
.arrow-sumbol marker {
    overflow: visible;
    fill: #444444;
}
.arrow-sumbol line {
    stroke: #444444;
    stroke-width: 1.2px;
}
.hero-image{
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  background-size: cover;
  background-position: center;
}
.doodles p{
  margin:0;
  padding:0;
  line-height: 30px;
}
.usage.logo-symbol ul.items .image.video{
  height:285px;
}
.banner .inside{
  display: table;
  height: 100%;
}
.banner .inside > div{display: table-cell;width: 50%;vertical-align: middle;}
.banner .inside .content .description{
    padding-left: 40px;
}
.banner .inside .image .img,.banner .inside .image video{
  width: 100%;
  height: calc(100vh - 240px);
  background-size: contain;
  background-position: center;
  min-height: 400px;
}
.banner .cat-name{

}
.description-main{
  padding-left: 50%;
}
.banner h2 p, .brand-story-slider .inside h2 p, .slider .item .inline h3 p, .bottom-links .inside > a span, .brand-system-wrapper .content .entry h1, .updates-hero .inside .title-section h1, .brand-story-messaging h3,.brand-story-elments h2
{font-size: 36px;line-height: 42px;margin: 0;}
.banner h2 p{
  padding-top: 15px;
  padding-bottom: 20px;
}
.banner .description p{margin: 0;line-height: 32px;padding-left: 0;padding-bottom: 80px;}
.banner a.jump span,.icons-clear h2{
  font-size: 18px;
}
.banner a.jump:before{
  background-color:#000;
}
.second-banner .inside,.fourth-banner .inside{
  display: block;
}
.second-banner .inside > div,.fourth-banner .inside > div{display: block;width: auto;}

.second-banner ul.items, .fourth-banner ul, .pairing ul.items,.hierarchy .two-images{margin: 0;padding: 0;list-style-type: none;font-size: 0;margin-left: -30px;}
.second-banner ul.items li{
  width: 25%;
  display: inline-block;
  padding-left: 30px;
  padding-top: 30px;
}
.second-banner ul.items a{
  display: block;
  padding: 0;
}
.second-banner ul.items a:hover .image{
    -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}





.download-link a.jump svg{left: 30px;}
.download-link a.jump:hover svg{
  left:25px;
}
.second-banner ul.items a:before{
  content:'';
  height: 1.5px;
  background-color: #000;
  width: 100%;
  position: absolute;
  top: 0;
  opacity: 1;
  visibility: visible;
}
.second-banner ul.items span{
  font-weight: 500;
}
.second-banner ul.items .name{
  position: relative;
  display: inline-block;
  padding-bottom: 20px;
}

.second-banner ul.items .name, .area.overview ul .title{
    padding-top: 20px;
}
.second-banner ul.items .image,.principles-items .thumb{
  height: 277px;
  background-size: contain;
  background-position: center;
}
.third-banner .inside .image{
  padding-left: 0;
}
.page-template-homepage .third-banner .inside .image{
  padding-left: 200px;
}
.third-banner .inside .image .img {
    height: 100%;
}
.fourth-banner h2 p{
  padding-bottom: 50px;
}
.fourth-banner{
  padding-top: 0;
}
.fourth-banner ul.masonry-gallery{
  padding: 0;
  margin: 0;
  list-style-type: none;
  padding-top: 65px;
  margin-left: -30px;
}
.masonry-gallery{padding: 0;margin: 0;list-style-type: none;padding-top: 30px;font-size: 0;margin-left: -30px;}
.logo-aplications .masonry-gallery,.grid-construction .masonry-gallery{
  padding-top: 0px;
}
.showcases-wrapper .masonry-gallery{
  padding-top: 120px;
}
.tools-usage .masonry-gallery{
  padding-top:0;
  margin-left: -30px;
}
.masonry-gallery .item, .masonry-gallery li, .pairing ul.items li, .hierarchy .two-images li, body .showcases-wrapper .masonry-gallery .item{width: 50%;display: inline-block;padding-left: 30px;padding-bottom: 30px;}
.masonry-gallery a,.masonry-gallery .thumb{
  display: block;
  height: 340px;
  background-repeat: no-repeat;
  position: relative;
}
.masonry-gallery .item.hidden{
  opacity:0;
  visibility:hidden;
}



body .masonry-gallery.masonry-gallery-with-top-image li,.sqaure_banner li{
  width:50%;
}
body .masonry-gallery.masonry-gallery-with-top-image{
  padding-bottom: 10px;
}
body .art .masonry-gallery.masonry-gallery-with-top-image{
  padding-top: 0;
}
body .masonry-gallery.masonry-gallery-with-top-image li:first-child{
  width:100%;  
}
.masonry-gallery-with-top-image .thumb, 
.usage.construction ul.items .image,
body .usage ul.masonry-gallery-with-same-image li .thumb,
.sqaure_banner li .image,
.usage.logo-symbol ul.items .image,
.art .masonry-gallery-with-top-image li:first-child .thumb
{
  height: 380px;
}

.masonry-gallery li:nth-child(3),
.masonry-gallery .item:nth-child(3),
.masonry-gallery li:nth-child(7),
.masonry-gallery .item:nth-child(7)
{
  width: 60%;
  }
.masonry-gallery li:nth-child(4),
.masonry-gallery .item:nth-child(4),
.masonry-gallery li:nth-child(8),
.masonry-gallery .item:nth-child(8)
{
  width: 40%;
}
body .masonry-gallery.masonry-gallery-with-same-image-second-full li:nth-child(3){
 width:100%; 
}
.first-banner .inside .content{
  padding-left: 180px;
}
.fifth-banner .description p{
  padding-bottom:0;
}
.fifth-banner h2 p{
  padding-bottom:60px;
}
.usage.construction ul.items .image{
  margin-bottom: 0;
}
.sup .inside{
  height: 1px;
  background-color: #000;
}
.fifth-banner .inside .content{width: 40%;}
.fifth-banner .inside .description{
  width: 60%;
}
.files-section{height: auto;padding-bottom: 100px;}
.files-section .inside{display: table;width: 100%;height: 100%;}
.files-section .inside > div{
  display: table-cell;
  vertical-align: middle;
  width: 50%;
}

.showcases-wrapper .masonry-gallery .item{
  
}
.showcases-wrapper .masonry-gallery .item:nth-child(1){
  width: 100%;
}
.showcases-wrapper .masonry-gallery .item:nth-child(4),
.showcases-wrapper .masonry-gallery .item:nth-child(5),
.showcases-wrapper .masonry-gallery .item:nth-child(8),
.showcases-wrapper .masonry-gallery .item:nth-child(9),
.showcases-wrapper .masonry-gallery .item:nth-child(12),
.showcases-wrapper .masonry-gallery .item:nth-child(13),
.showcases-wrapper .masonry-gallery .item:nth-child(16),
.showcases-wrapper .masonry-gallery .item:nth-child(17),
.showcases-wrapper .masonry-gallery .item:nth-child(20),
.showcases-wrapper .masonry-gallery .item:nth-child(21)
{
  width: 60%;
}

.showcases-wrapper .masonry-gallery .item:nth-child(5),
.showcases-wrapper .masonry-gallery .item:nth-child(9),
.showcases-wrapper .masonry-gallery .item:nth-child(13),
.showcases-wrapper .masonry-gallery .item:nth-child(17),
.showcases-wrapper .masonry-gallery .item:nth-child(21)
{
  width: 40%;
}
.files-section .inside .title h2 p{

}
.files-section .inside .files ul{margin: 0;padding: 0;list-style-type: none;border-top: 1px solid #000;}
.files-section .inside .files ul li{

}
.files-section .inside .files ul li a{display: block;padding: 0;padding-top: 15px;padding-bottom: 15px;border-bottom: 1px solid #000;}
.files-section .inside .files div{

}
.sidebar ul li.current-menu-item a, .sqaure_banner li .title:before, .files-section .inside .files li:last-child span, .hierarchy .description p strong{font-family: 'SimplerPro', arial, sans-serif;}
.files-section .inside .files i{display: inline-block;border-bottom: 1px solid #000;position: absolute;left: 0;width: 30px;height: 30px;}
.files-section .inside .files svg{
  transform: rotate(
90deg);
  width: 18px;
  right: 0;
}
.files-section a.jump .arrow-sumbol line{
  stroke-width: 1px;
}
.files-section a.jump:hover svg{
  left:0;
  top:8px;
}
.credit-section .inside{display: table;width: calc(100% - 100px);}
.credit-section .inside > div{
  display: table-cell;
  width: 33%;
  vertical-align: middle;
}
.credit-section .inside > div.social ul.social-links{
  float: left;
  padding-left: 20px;
  margin-top: 0;
}
.social > a{
  float:left;
  margin-top: 5px;
}
footer a.logo{
  position: relative;
}
.credit-section .inside > div.credit p{
  text-align: center;
}
.social-links{margin: 0;padding: 0;list-style-type: none;display: table;}
.social-links li{display: table-cell;padding-left: 15px;vertical-align: middle;}
.social-links a{
  display: block;
}
.social-links a img{
  display: block;
}
.credit-section .inside > div.social:after,.bottom-links .inside:after{
  content:'';
  clear:both;
  display: block;
}
.credit-section .inside > div.social{
  text-align:left;
}
.credit-section{
  height:120px
}
.brand-story-description p{
  padding: 60px 0 0;
  text-align:center;
  margin: 0;
  line-height: 40px;
}
.brand-story-items ul{margin: 0;padding: 0;list-style-type: none;}

.brand-story-items ul li:nth-child(odd) .inside .image{
  padding-right: 50px;
}
.brand-story-items ul li:nth-child(even) .inside .image{
  padding-left: 50px;
}
.brand-story-items ul li:nth-child(odd) .inside .content{
  padding-left: 50px;
}
.brand-story-items ul li:nth-child(even) .inside .content{
  padding-right: 60px;
}
.brand-story-items ul li .inside:after{
  content:'';
  display:block;
  clear:both;
}
.brand-story-items ul li .inside > div{height: auto;/* padding: 150px 0 0; */}

.brand-story-items ul li .inside{
}
.brand-story-slider{padding-top: 0;}
.brand-story-slider .inside{
  
}
.brand-story-slider .inside h2 p{
  padding-bottom: 80px;
}
.slider{

}
.slider .item{

}
.slider .item .inline{display: table;width: 100%;padding-top: 110px;}
.slider .item .inline .content{display: table-cell;vertical-align: top;width: 50%;padding-left: 180px;padding-right: 0;}
.slider .item .inline .nav{padding-bottom: 40px;}
.slider .item .inline .nav > span{
  display: table-cell;
  vertical-align: middle;
  position: relative;
}
.slider .item .inline .num{padding-left: 22px;}
.slider .item .inline .line{width: 60px;}
.slider .item .inline .line:before{
  content:'';
  height: 1px;
  background-color: #000;
  position: absolute;
  width: 100%;
}
.slider .item .inline .subtitle{padding-right: 30px;}
.slider .item .inline h3 p{margin: 0;padding: 0;}
.slider .item .inline .description p{margin: 0;padding: 0;padding-top: 30px;line-height: 30px;}
.slider .item .inline .image{display: table-cell;vertical-align: top;width: 50%;height: 410px;}
.slider .item .inline .thumb{height: 100%;display: block;}
.slick-dots{margin: 0;padding: 0;list-style-type: none;position: absolute;top: 60px;left: 0;display: table;}
.slick-dots li{padding-left: 30px;display: table-cell;}
.slick-dots li.slick-active button,.slick-dots li  button:hover{
  background-color:#000;
}
.slick-dots li:last-child{
  padding-left:0;
}
.slick-dots button,.slider-nav .item span{display: block;width: 11px;height: 11px;font-size: 0;border-radius: 50%;padding: 0;border: 1px solid #000;cursor: pointer;}
.slider-out{
}
 .slider-nav .item span{
   border:none;
 }

 .slider-nav .slick-track{
   width: 100%!important;
   text-align: left;
   transform: none!important;
 }
.color-slider .slider-nav .slick-track{
  
}
.slider-nav .item{
  width: 41px!important;
  display: inline-block!important;
  padding-right: 30px;
  float: none;
}
.bottom-links .inside > a{display: inline-block;}
.bottom-links .first-link{float: right;padding-left: 0;padding-right: 100px;text-align: left;}
.bottom-links .second-link{
  float: left;
  padding-left: 100px;
  padding-right: 0;
}
.bottom-links .first-link svg{
  left: auto;
  right: 0;
  transform: rotate(0deg);
}
.bottom-links .first-link:hover svg{
  left:auto;
  right:-10px;
  width:75px;
}
.bottom-links .second-link:hover svg{
  left:-10px;
  right:auto;
  width:75px;
}
.bottom-links svg{width: 65px;}
.bottom-links svg line{
  stroke-width: 2.2px;
}
.bottom-links{
  margin-top: 130px;
  background-color: #fff;
  position: relative;
}
.bottom-links .inside{
  padding-top: 40px;
  border-top: 1px solid #cfcfcf;
  padding-bottom: 40px;
}
.brand-system-wrapper{
  padding-top: 180px;
}
.brand-system-wrapper .inside:after{
  content:'';
  display:block;
  clear:both;
}
.brand-system-wrapper .sidebar{display: inline-block;width: 335px;float: right;-webkit-transition: none;-moz-transition: none;-o-transition: none;transition: none;}
.brand-system-wrapper .content{width: calc(100% - 335px);float: right;position: relative;}
.brand-system-wrapper .sidebar ul{margin: 0;padding: 0;list-style-type: none;padding-right: 55px;padding-left: 80px;}

.brand-system-wrapper .content:before{
  content:'';
  display:block;
  height: 100%;
  width: 1px;
  background-color: #cfcfcf;
  position: fixed;
  top: 0;
}
.brand-system-wrapper .sidebar ul li{padding-bottom: 20px;margin-bottom: 15px;border-bottom: 1px solid #000;}
.brand-system-wrapper .sidebar ul li a{display: inline-block;}
.brand-system-wrapper .sidebar ul li:last-child{
  border:none;
}
.current-menu-item a{
  font-weight:800;
}
.brand-system-wrapper .content .entry{
  padding-top: 5px;
  padding-right: 100px;
}
header ul.menu li a, .usage.motion-principles ul.items .description, .color.constraction-second .title, .area.overview ul .title, .brand-system-wrapper .content .entry .subtitle, .clear-space h3, .usage ul.items h4, .usage h3, .color h3, .social-round-title, .social-icons h3, .icons-clear h2, h4.bg,.logo-desc{
  font-weight: 600;
  font-family: 'SimplerPro',arial, sans-serif;
}
.usage.motion-principles.art-principles ul.items .description{
  font-weight:300;
}
.usage.construction ul.items h4{
  padding-top: 50px;
  max-width: 260px;
}
.usage.construction ul.items .description{
  padding-top:0;
  padding-bottom: 80px;
}
.usage h3.bg,.area.usage.construction.tools-usage h3,.pairing ul.items li .image, .clear-space h3.bottom-m-margin, .usage ul.items .image, .usage h3, .color ul.items.guidnace .image, .social-round-icon,.hierarchy .two-images li .image{
  margin-bottom: 25px;
}
.clear-space h3, .usage h3, .social-icons h3, .cta h3,.icons-clear h2,.principles.art-principles h2{
  position:relative;
  display: inline-block;
}
header ul.menu li a:before,.clear-space h3:before, .usage h3:before, .social-icons h3:before, .cta h3:before,.icons-clear h2:before,.principles.art-principles h2:before{
  content:'';
  position:absolute;
  width:100%;
  height:1px;
  background-color:#000;
  bottom: 0;
}
header ul.menu li a:before{
  opacity:0;
  visibility:hidden;
}
header ul.menu li.current-menu-item a:before{
  opacity:1;
  visibility:visible;
}

.post h2,.area.usage.color.constraction-second h2, .brand-system-wrapper .content .entry .subtitle, .brand-system-wrapper .content .entry h1, .area h2, .usage ul.items h4, .guidance.calltoactions h2, .usage.construction ul.items h4,.area.usage.color.photo h2
{
    padding-bottom: 20px;
}
.guidance.calltoactions h2{
  margin-bottom:0;
}
.usage ul.items h4,.usage.construction ul.items h4{
  padding-bottom:10px;
}
.area.usage.construction.tools-usage h4{
  padding-top: 30px;
  max-width: none;
}
.tools-usage .masonry-gallery,.area.usage.construction.tools-usage h4{
  padding-bottom: 100px;
}
.hero-description p,.area-description p,.area.usage.color.constraction-second p{
  margin:0;
  padding:0;
}
.hero-description{
  padding-bottom: 60px;
}
.fullwidth-image{margin-bottom: 30px;}
.fullwidth-image img{
  max-width:100%;
  min-width: 100%;
  display: block;
}
.slick-slider .fullwidth-image .thumb{
  height: 450px;
}
.fullwidth-image .thumb .image{
  height: 100%;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
}
.post .item .desc.by, .post, .website-images, .pairing ul.items, .area-description, .clear-space h2, .logo-aplications h2, .hero-description-color, .color.guidance ul, .principles h2, .area.tools-usage h2, .icons-construction .area-image:last-child, .construction .description, .tools-example-list h2, .area.usage.color h2, .sqaure_banner li, .area.usage.color.constraction-second .description, .area.overview ul li, .area.motion-construction h2, .description.bg, h4.bg, .description-main, .top-sec, .posts.float .post

{
  padding-bottom: 30px;
}
.area.overview ul li.first{
  padding-bottom: 100px;
}
.posts.float .post{
  padding-top:90px;
}
.posts.float .post{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 10000000000;
  background-color: #fff;
  height: 100vh;
  overflow-y: auto;
}
.posts.float .post.active{
  opacity:1;
  visibility:visible;
  pointer-events:all;
}
.color-applications .area-image, .icons-construction .area-image,.example-list .area-image{
  padding-bottom:30px;  
}
.float .post .main-image, .post, .clear-space h3, .usage h3, .social-icons h3, .icons-clear h2, .updates-hero-out{
  margin-bottom: 45px;
}
.usage h3, .color h3, .guidance h2, .color.guidance ul li, .color-slider-out{
  margin-bottom: 55px;
}
.guidance.calltoactions .area-description{
  padding-bottom:90px;
}
.post .item .desc.date,.clear-space h3, .usage h3, .color h3, .social-icons h3, .icons-clear h2, .usage.motion-principles.art-principles ul.items .title, .principles.art-principles h2, .usage.art ul.principles-items h4{
   padding-bottom:10px; 
}
.construction ul.items, .usage ul.items, .color ul,.social-icons ul{margin: 0;padding: 0;list-style-type: none;font-size: 0;margin-left: -30px;padding-bottom: 70px;}
.construction ul.items li, .usage ul.items li, .color ul li, .social-icons ul li, .usage.logo-symbol ul.items li{
  display: inline-block;
  padding-left: 30px;
  width: 50%;
  vertical-align: top;
}
.usage ul.items li, .color ul li, .social-icons ul li,body .art .masonry-gallery-with-top-image li
{
  width: 33.3%;
}
.usage.construction ul.items li, body .usage ul.masonry-gallery-with-same-image li, .color.constraction-second ul li{
  width:50%;
}
.usage.logo-symbol.brand-movment ul.items li{
  width: 100%;
  max-width: none;
}
.item{
  position:relative;
}
.construction ul.items .image{height: 290px;background-size: contain;background-position: right center;}
.construction ul.items .description{padding-top: 35px;}
.construction ul.items .description p,.post .description p{
  margin: 0;
  line-height: 32px;
}
.usage ul.items .image, .color ul.items.guidnace .image{
  height: 260px;
  background-size: contain;
  background-position: right;
  position: relative;
  margin-bottom: 20px;
}

.usage ul.items.guidnace .image,
.color ul.items.guidnace .image,
.art .masonry-gallery-with-top-image .thumb
{
  height: 150px;
}
.color.guidance ul.items.guidnace .image{
  height:150px;
}
.color.guidance ul.items.guidnace .description,
.hero-description p, .area-description p, .area.usage.color.constraction-second p
{
  line-height: 30px;
}
.close-symbol, .color.guidance li:nth-child(2) i.close-symbol, .color.guidance li:nth-child(4) i.close-symbol, .color.guidance li:nth-child(6) i.close-symbol{position: absolute;width: 31px;height: 31px;border: 1px solid #E02020;border-radius: 50%;right: 0;top: -50px;}
.close-symbol:before, .close-symbol:after, .usage ul.items.guidnace li .item:before, .color.guidance li:nth-child(2) i.close-symbol:after, .color.guidance li:nth-child(2) i.close-symbol:before, .color.guidance li:nth-child(4) i.close-symbol:after, .color.guidance li:nth-child(4) i.close-symbol:before, .color.guidance li:nth-child(6) i.close-symbol:after, .color.guidance li:nth-child(6) i.close-symbol:before{content:'';background-color: #E02020;height: 1px;position: absolute;width: 15px;right: 0;left: 0;bottom: 0;top: 0;margin: auto;}
.close-symbol:before{transform: rotate(45deg);}
.close-symbol:after{
  transform: rotate(
-45deg);
}
.color.guidance i.close-symbol{
  /* border: 1px solid transparent; */
}
.color.guidance i.close-symbol:before,.color.guidance i.close-symbol:after{
  /* background-color: #000; */
  /* width: 25px; */
}
.usage ul.items.guidnace li .item:before,
.color.guidance ul.items.guidnace li .item:before
{
  content:'';
  width: 110%;
  transform: rotate(-45deg);
  bottom: auto;
  top: 75px;
  left: auto;
  right: -20px;
  position: absolute;
  height: 1px;
  z-index: 1;
}
.color.guidance ul.items.guidnace li .item:before{
  background-color: #E02020;
  width: 80%;
  top: 75px;
  right: 0;
}
.color.guidance ul.items.guidnace li:nth-child(2) .item:before,
.color.guidance ul.items.guidnace li:nth-child(4) .item:before,
.color.guidance ul.items.guidnace li:nth-child(6) .item:before
{
  background-color: #E02020;
}
.color.guidance.calltoactions ul.items.guidnace li .item:before{
  width: 80%;
}

.color.guidance ul.items.guidnace.can li .item:before{
  display: none;
}
.color ul{margin: 0;padding-top: 0;list-style-type: none;font-size: 0;padding-left: 0;padding-right: 0;margin-left: -30px;}
.color ul li,.social-icons ul li{
  padding-bottom: 30px;
}
.color.photo ul{
  padding-bottom:0;
}
.color ul li .thumb{
  height: 170px;
  background-size: contain;
  background-position: right;
}
.social-round-icon{
  width:170px;
  height:170px;
  background-size: contain;
  background-position: center;
  position: relative;
}
.social-round-icon .icon,.social-icons ul li .thumb .icon{
  position: absolute;
  z-index: 10;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}
.social-round-title,
.download-link,
.doodles,
.usage.speed ul.items,
body .grid-construction-first .masonry-gallery.masonry-gallery-with-top-image{
  padding-bottom: 80px;
}
.social-icons ul li .thumb{
  height: 310px;
  background-size: contain;
  background-position: top right;
  position: relative;
}
.social-icons ul, .color.constraction-second ul.masonry-gallery{
  padding-bottom:60px;
}
.usage.speed.example-motion ul.items{
  padding-bottom: 0;
}
.usage.speed.hierarchy ul.items{
  padding-bottom: 0;
  display: block;
}
.color.constraction-second ul{
  padding-bottom:0;
}
video{
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    max-width: 100%;
    object-fit: cover;
    height: 100%;
    z-index: 1;
}
.area-image video{
  position:relative;
}
.download-link a.jump{
  border: 1px solid #000;
  padding: 15px 34px 15px;
  padding-left: 70px;
  display: inline-block;
}

.pairing ul.items li,.hierarchy .two-images li{
  width: 50%;
  display: inline-block;
  vertical-align: top;
}
.pairing ul.items li .item{
  
}
.pairing ul.items li .image,.hierarchy .two-images li .image {
  height: 400px;
  background-size: contain;
  background-position: center;
}
.hierarchy .area-image{
  padding-bottom: 25px;
}
.hierarchy .items{margin: 0;padding: 0;list-style-type: none;display: inline-block;padding-bottom: 70px;font-size: 0;}
.hierarchy .items:after{
  clear:both;
  display:block;
  content:'';
}
.hierarchy .two-images .items{
  padding-bottom: 0;
}
.hierarchy .items li{display: inline-block;vertical-align: top;padding-left: 30px;float: none;max-width: 250px;padding-bottom: 30px;}
.hierarchy .two-images li .description{
  padding-bottom: 0;
}
.hierarchy .two-images .items li{
  padding-bottom: 40px;
  min-height: 155px;
}
.hierarchy .items li:last-child{
  padding-left:0;
}
.hierarchy .two-images .items li:last-child{
  padding-left: 65px;
}
.hierarchy .description p{margin: 0;line-height: 26px;}

.hierarchy .two-images{
  margin-left: -30px;
  padding: 0;
  list-style-type: none;
}
.cta h3{
  font-weight: 300;
}
.principles h2{
  padding-top:45px;
}
.logo-symbol h2,.principles.art-principles h2{
  padding-top:0;
  position: relative;
}
.icons-clear.distance h2{
  padding-bottom:0;
}
.icons-clear.distance h2:before{
  display:none;
}
.construction .description p{
  margin:0;
}
.usage.construction .items{
  padding-bottom: 0;
}
.area.overview ul{margin: 0;padding: 0;list-style-type: none;font-size: 0;}
.area.overview ul li.second,body .art .masonry-gallery.masonry-gallery-with-top-image{
  padding-bottom: 120px;
}
.area.overview ul .item{
  display: inline-block;
}
.area.overview ul .item:last-child{
  padding-left:0;
}
.area.overview ul .image{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 260px;
  height: 260px;
}
.area.overview ul li.second .image{
  height: 260px;
  width: 260px;
}
.area.overview ul li.second .square .image{
}
.area.overview ul .rectangle .image,.area.overview ul li.second .square .image{
  width: 440px;
}
.sqaure_banner ul{
  margin:0;
  padding:0;
  margin-left:-30px;
  list-style-type:none;
  font-size: 0;
}
.sqaure_banner li{
  display:inline-block;
  vertical-align:top;
  counter-increment: item;
}
.sqaure_banner li .title:before{
    content: counter(item, decimal-leading-zero) " ";
    font-weight: 600;
    position: absolute;
    right: 0;
    top: 0;
}
.sqaure_banner li .title{
  margin-top:30px;
  position:relative;
  padding-right: 55px;
}
.hierarchy .masonry-gallery{
  padding-top:0;
}
.updates-hero-out{
  padding-top: 145px;
  background-color: #EBEBEB;
}
.updates-hero{display: table;width: 101%;height: 400px;}
.updates-hero.showcases-hero{
  height:auto;
}
.post .main-image{position:relative;height: 450px;overflow: hidden;}
.posts .inside{margin: 0;padding: 0;list-style-type: none;}
.post .main-image .image{
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.post{
  border-bottom:1px solid #ccc;
}
.read{text-align: center;padding-top: 45px;}
.read span{
  padding: 16px 70px;
  border: 2px solid #000;
  border-radius: 3px;
  display: inline-block;
  cursor: pointer;
}
.read.close-button span{
  padding: 20px 120px;  
}
.read span:hover{
  background-color:#efefef;
}
.post:last-child{
  padding-bottom:0;
  margin-bottom:0;
  border:none;
}
.top-sec{display: table;}
.top-sec > div{
  display: table-cell;
  padding-left: 40px;
  vertical-align: middle;
}
.post .item .top-sec > div.desc{
  padding-bottom: 0;
}
.post .masonry-gallery{
  padding-top:0;
}
.posts.float{
  /* position: fixed; */
  /* top: 0; */
  /* right: 0; */
  /* width: 100%; */
  /* z-index: 10000000000; */
  /* background-color: #fff; */
  /* height: 100vh; */
  /* overflow-y: auto; */
}
.color-slider-out .color-slider{
  width: 100%;
}
.color-slider-out .slick-dots{
  top: auto;
  bottom: 0;
}
.color-slider-out .slick-dots button{
  border: none;
}
.area.sqaure_banner{
  padding-bottom: 60px;
}
 
}
@media (min-width: 1500px){
.brand-story-messaging p{
  line-height: 35px;
}
.brand-story-messaging{
  padding: 130px 0 120px;
}
.brand-story-slider .slider-examples .description ul li{
  font-size: 20px;
  line-height: 30px;
}
.brand-story-slider .slider-examples .description ul {
    padding-bottom: 80px;
}
.brand-story-accordion ul.items .wrapp.active .description{
  font-size: 22px;
}
.brand-story-accordion .wrapp{
  padding-bottom: 25px;
}
.brand-story-accordion ul.items h3:after {
    top: 7px;
}
    
    
    
.logo-desc {margin-top: 22px;}
html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, caption, tbody, tfoot, thead, .contact-form-thank-message strong, fn, input, textarea, .full-logos ul li,.case-studies-section-06.sec-06-1 .author p {
  font-size: 20px;
}
li.post .item-layout-2 .description p,.updates-hero .inside .title-section > div p,.description.bg p,.hero-description p, .area-description p, .usage ul.items .description, .construction ul.items .description p, .sqaure_banner li .title, .construction .description p,.usage ul .item-layout-2 h4
{
  line-height: 35px;
}
header{height: 80px;position: fixed;width: 100%;z-index: 10000000;}

header.nav-up {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
header.nav-down {
    background-color: rgba(255,255,255,.8);
    height: 80px;
}
header.nav-down .menu-primary-container{
}


header .inside, .sup .inside, .credit-section .inside,.brand-system-wrapper .inside{margin-left: 50px;margin-right: 50px;position: relative;height: 100%;}
header a.logo,footer a.logo{display: inline-block;position: absolute;right: 0;top: 0;bottom: 0;margin: auto;height: 65px;}
header a.logo img, footer a.logo img{max-width: 100%;max-height: 100%;display: block;}
.menu-primary-container{
  float: left;
  padding-top: 25px;
}
.brand-system-wrapper .sidebar ul li a,.download-link a.jump span{
  font-size:18px;
}
.download-link a.jump span{
  display: inline-block;
}
header ul.menu{margin: 0;padding: 0;list-style-type: none;display: table;}
header ul.menu li{
  display: table-cell;
  padding-left: 75px;
}
footer{
  background-color: #fff;
  z-index: 10000;
  position: relative;
}
header ul.menu li a{
  padding-left: 0;
  padding-right: 0;
  position: relative;
  padding-bottom: 5px;
}
.area.usage.construction.tools-usage h4,.post h2{
  font-size: 24px;
}
  .usage ul.items li{
    margin-bottom: 50px;
  }
    .usage.example-motion ul.items li{
    padding-bottom:10px;
  }
.slider .item .inline .num, 
.slider .item .inline .subtitle,
.usage ul.items .description,
.social-round-title
{
  font-size: 20px;
}
.area h2, .usage.motion-principles.art-principles ul.items .title, .principles-items h4, .post .item .desc,.post h2
{
  font-size: 24px;
  font-weight:600;
  font-family: 'SimplerPro',arial, sans-serif;
}
header ul.menu li a:hover:before{
  opacity:0;
}
header ul.menu li:last-child{
  padding-left:0;
}
.homepage-hero, .banner .inside, .files-section, .brand-story-slider .inside, .slider, .bottom-links .inside, .brand-story-messaging .inside,.brand-story-elments .inside{
  width: 1440px;
  margin: auto;
}
.updates-hero .inside{
  margin: auto;
  display: table-cell;
  vertical-align: top;
  padding-top: 120px;
}
.showcases-hero .inside{
  padding-top:0;
}
.updates-hero .inside .title-section, .post .item,.page-template-updates-php .updates-hero .inside .title-section{
  width: 1050px;
  margin: auto;

}
.updates-hero .inside .title-section{
  display: table;
  width: auto;
}

.updates-hero .inside .title-section h1{display: table-cell;vertical-align: top;}
.updates-hero .inside .title-section h1 p{
  margin:0;
}
.updates-hero .inside .title-section > div{
  display: table-cell;
  vertical-align: top;
}
.updates-hero .inside .title-section > div p{
  margin:0;
  padding:0;
}
 .post .item .desc{
   font-size:14px;
 }
.hierarchy .item p, .hierarchy .two-images li .description p, header ul.menu li a,.logo-desc{
  font-size:16px;
}
.homepage-hero{display: table;}
.homepage-hero, .first-banner, .third-banner, .fifth-banner{
  height: 100vh;
}
.banner.first-banner, .banner.second-banner, .banner.third-banner, .banner.fifth-banner, .banner.fourth-banner{
  height: auto;
  padding-top: 100px;
}
.third-banner{
  height:auto;
}
.fifth-banner{
  height:auto;
  padding-top:200px;
  padding-bottom: 100px;
}
.homepage-hero .social-links{
  position: absolute;
  left: 0;
  top: 0;
}
.updates-hero.showcases-hero .inside .title-section h1,
.updates-hero.showcases-hero .inside .title-section > div{display: table-cell;vertical-align: top;width: 50%;}
.updates-hero.showcases-hero .inside .title-section > div{
  padding-top:10px;
}
.homepage-hero .social-links li,.area.overview ul .item,.sqaure_banner li{
  padding-left: 30px;
}
.post1 h2, .updates-hero .inside .title-section h1, .brand-system-wrapper .content .entry h1, .banner h2 p, .homepage-hero h1 p, .files-section .inside .title h2 p, .credit-section .inside > div.credit p, .credit-section .inside > div.credit p a, .social > a, .brand-story-description p strong, .brand-story-slider .inside h2 p, .slider .item .inline h3 p, .slider .item .inline .num, .bottom-links .inside > a span{
  font-family: 'SimplerPro', sans-serif;
  font-weight: 800;
}
.homepage-hero h1, .files-section .inside .title h2 p{font-size: 90px;line-height: 90px;}
.homepage-hero .inside{height: 100%;display: table-cell;vertical-align: middle;position: relative;z-index: 2;}
.homepage-hero .inside h1{
  position:relative;
}
.brand-story-hero{
  text-align: center;
}
.homepage-hero.brand-story-hero h1 p{
  font-size: 80px;
  line-height: 80px;
  padding-top: 30px;
  margin: 0;
  font-family: 'SimplerPro', sans-serif;
}
a.jump,.second-banner ul.items .name{position: relative;padding-left: 40px;}
a.jump span,.banner.fourth-banner a.jump span{
  font-size:20px;
}
a.jump:before{
  content:'';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #FFF;
  bottom: -8px;
  right: 0;
}
a.jump:hover:before{
  opacity:0;
  visibility:hidden;
}
a.jump:hover svg{
  width:30px;
  left:-5px;
}
.description.bg p{
  padding:0;
  margin:0;
}
.arrow-sumbol {
    width: 25px;
    height: 18px;
    transition: all .5s cubic-bezier(.075,.82,.165,1);
    margin-right: 0;
    position: absolute;
    left: 0;
    cursor: pointer;
    transform: rotate(180deg);
    right: auto;
    top: 0;
    bottom: 0;
    margin: auto;
}
.arrow-sumbol marker {
    overflow: visible;
    fill: #444444;
}
.arrow-sumbol line {
    stroke: #444444;
    stroke-width: 1.2px;
}
.hero-image{
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  background-size: cover;
  background-position: center;
}
.doodles p{
  margin:0;
  padding:0;
  line-height: 35px;
}
.usage.logo-symbol ul.items .image.video{
  height:285px;
}
.banner .inside{
  display: table;
  height: 100%;
}
.banner .inside > div{display: table-cell;width: 50%;vertical-align: middle;}
.banner .inside .content .description{
    padding-left: 110px;
}
.banner .inside .image .img,.banner .inside .image video{
  width: 100%;
  height: calc(100vh - 200px);
  background-size: contain;
  background-position: center;
  min-height: 400px;
}
.banner .cat-name{

}
.description-main{
  padding-left: 50%;
}
.banner h2 p, .brand-story-slider .inside h2 p, .slider .item .inline h3 p, .bottom-links .inside > a span, .brand-system-wrapper .content .entry h1, .updates-hero .inside .title-section h1, .brand-story-messaging h3,.brand-story-elments h2
{font-size: 44px;line-height: 50px;margin: 0;}
.banner h2 p{
  padding-top: 20px;padding-bottom: 20px;
}
.banner .description p{margin: 0;line-height: 36px;padding-left: 0;padding-bottom: 80px;}
.banner a.jump span,.icons-clear h2{
  font-size: 20px;
}
.banner a.jump:before{
  background-color:#000;
}
.second-banner .inside,.fourth-banner .inside{
  display: block;
}
.second-banner .inside > div,.fourth-banner .inside > div{display: block;width: auto;}

.second-banner ul.items, .fourth-banner ul, .pairing ul.items,.hierarchy .two-images{margin: 0;padding: 0;list-style-type: none;font-size: 0;margin-left: -30px;}
.second-banner ul.items li{
  width: 25%;
  display: inline-block;
  padding-left: 30px;
  padding-top: 60px;
}
.second-banner ul.items a{
  display: block;
  padding: 0;
}
.second-banner ul.items a:hover .image{
    -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}





.download-link a.jump svg{left: 30px;}
.download-link a.jump:hover svg{
  left:25px;
}
.second-banner ul.items a:before{
  content:'';
  height: 1.5px;
  background-color: #000;
  width: 100%;
  position: absolute;
  top: 0;
  opacity: 1;
  visibility: visible;
}
.second-banner ul.items span{
  font-weight: 500;
}
.second-banner ul.items .name{
  position: relative;
  display: inline-block;

  padding-bottom: 30px;
}

.second-banner ul.items .name, .area.overview ul .title{
    padding-top: 30px;
}
.second-banner ul.items .image,.principles-items .thumb{
  height: 330px;
  background-size: contain;
  background-position: center;
}
.third-banner .inside .image{
  padding-left: 0;
}
.page-template-homepage .third-banner .inside .image{
  padding-left: 200px;
}
.third-banner .inside .image .img {
    height:100%;
}
.fourth-banner h2 p{
  padding-bottom: 70px;
}
.fourth-banner{
  padding-top: 0;
}
.fourth-banner ul.masonry-gallery{
  padding: 0;
  margin: 0;
  list-style-type: none;
  padding-top: 85px;
  margin-left: -30px;
}
.masonry-gallery{padding: 0;margin: 0;list-style-type: none;padding-top: 30px;font-size: 0;margin-left: -30px;}
.logo-aplications .masonry-gallery,.grid-construction .masonry-gallery{
  padding-top: 0px;
}
.showcases-wrapper .masonry-gallery{
  padding-top: 120px;
}
.tools-usage .masonry-gallery{
  padding-top:0;
  margin-left: -30px;
}
.masonry-gallery .item, .masonry-gallery li, .pairing ul.items li, .hierarchy .two-images li, body .showcases-wrapper .masonry-gallery .item{width: 50%;display: inline-block;padding-left: 30px;padding-bottom: 30px;}
.masonry-gallery a,.masonry-gallery .thumb{
  display: block;
  height: 340px;
  background-repeat: no-repeat;
  position: relative;
}
.masonry-gallery .item.hidden{
  opacity:0;
  visibility:hidden;
}



body .masonry-gallery.masonry-gallery-with-top-image li,.sqaure_banner li{
  width:50%;
}
body .masonry-gallery.masonry-gallery-with-top-image{
  padding-bottom: 10px;
}
body .art .masonry-gallery.masonry-gallery-with-top-image{
  padding-top: 0;
}
body .masonry-gallery.masonry-gallery-with-top-image li:first-child{
  width:100%;  
}
.masonry-gallery-with-top-image .thumb, 
.usage.construction ul.items .image,
body .usage ul.masonry-gallery-with-same-image li .thumb,
.sqaure_banner li .image,
.usage.logo-symbol ul.items .image,
.art .masonry-gallery-with-top-image li:first-child .thumb
{
  height: 450px;
}

.masonry-gallery li:nth-child(3),
.masonry-gallery .item:nth-child(3),
.masonry-gallery li:nth-child(7),
.masonry-gallery .item:nth-child(7)
{
  width: 60%;
  }
.masonry-gallery li:nth-child(4),
.masonry-gallery .item:nth-child(4),
.masonry-gallery li:nth-child(8),
.masonry-gallery .item:nth-child(8)
{
  width: 40%;
}
body .masonry-gallery.masonry-gallery-with-same-image-second-full li:nth-child(3){
 width:100%; 
}
.first-banner .inside .content{
  padding-left: 180px;
}
.fifth-banner .description p{
  padding-bottom:0;
}
.fifth-banner h2 p{
  padding-bottom:60px;
}
.usage.construction ul.items .image{
  margin-bottom: 0;
}
.sup .inside{
  height: 1px;
  background-color: #000;
}
.fifth-banner .inside .content{width: 40%;}
.fifth-banner .inside .description{
  width: 60%;
}
.files-section{height: auto;padding-bottom: 100px;}
.files-section .inside{display: table;width: 100%;height: 100%;}
.files-section .inside > div{
  display: table-cell;
  vertical-align: middle;
  width: 50%;
}

.showcases-wrapper .masonry-gallery .item{
  
}
.showcases-wrapper .masonry-gallery .item:nth-child(1){
  width: 100%;
}
.showcases-wrapper .masonry-gallery .item:nth-child(4),
.showcases-wrapper .masonry-gallery .item:nth-child(5),
.showcases-wrapper .masonry-gallery .item:nth-child(8),
.showcases-wrapper .masonry-gallery .item:nth-child(9),
.showcases-wrapper .masonry-gallery .item:nth-child(12),
.showcases-wrapper .masonry-gallery .item:nth-child(13),
.showcases-wrapper .masonry-gallery .item:nth-child(16),
.showcases-wrapper .masonry-gallery .item:nth-child(17),
.showcases-wrapper .masonry-gallery .item:nth-child(20),
.showcases-wrapper .masonry-gallery .item:nth-child(21)
{
  width: 60%;
}

.showcases-wrapper .masonry-gallery .item:nth-child(5),
.showcases-wrapper .masonry-gallery .item:nth-child(9),
.showcases-wrapper .masonry-gallery .item:nth-child(13),
.showcases-wrapper .masonry-gallery .item:nth-child(17),
.showcases-wrapper .masonry-gallery .item:nth-child(21)
{
  width: 40%;
}
.files-section .inside .title h2 p{

}
.files-section .inside .files ul{margin: 0;padding: 0;list-style-type: none;border-top: 1px solid #000;}
.files-section .inside .files ul li{

}
.files-section .inside .files ul li a{display: block;padding: 0;padding-top: 15px;padding-bottom: 15px;border-bottom: 1px solid #000;}
.files-section .inside .files div{

}
.sidebar ul li.current-menu-item a, .sqaure_banner li .title:before, .files-section .inside .files li:last-child span, .hierarchy .description p strong{font-family: 'SimplerPro', arial, sans-serif;}
.files-section .inside .files i{display: inline-block;border-bottom: 1px solid #000;position: absolute;left: 0;width: 30px;height: 30px;}
.files-section .inside .files svg{
  transform: rotate(
90deg);
  width: 18px;
  right: 0;
}
.files-section a.jump .arrow-sumbol line{
  stroke-width: 1px;
}
.files-section a.jump:hover svg{
  left:0;
  top:8px;
}
.credit-section .inside{display: table;width: calc(100% - 100px);}
.credit-section .inside > div{
  display: table-cell;
  width: 33%;
  vertical-align: middle;
}
.credit-section .inside > div.social ul.social-links{
  float: left;
  padding-left: 20px;
  margin-top: 0;
}
.social > a{
  float:left;
  margin-top: 5px;
}
footer a.logo{
  position: relative;
}
.credit-section .inside > div.credit p{
  text-align: center;
}
.social-links{margin: 0;padding: 0;list-style-type: none;display: table;}
.social-links li{display: table-cell;padding-left: 15px;vertical-align: middle;}
.social-links a{
  display: block;
}
.social-links a img{
  display: block;
}
.credit-section .inside > div.social:after,.bottom-links .inside:after{
  content:'';
  clear:both;
  display: block;
}
.credit-section .inside > div.social{
  text-align:left;
}
.credit-section{
  height:120px
}
.brand-story-description p{
  padding: 110px 0 0;
  text-align:center;
  margin: 0;
  line-height: 40px;
}
.brand-story-items ul{margin: 0;padding: 0;list-style-type: none;}

.brand-story-items ul li:nth-child(odd) .inside .image{
  padding-right: 50px;
}
.brand-story-items ul li:nth-child(even) .inside .image{
  padding-left: 50px;
}
.brand-story-items ul li:nth-child(odd) .inside .content{
  padding-left: 50px;
}
.brand-story-items ul li:nth-child(even) .inside .content{
  padding-right: 200px;
}
.brand-story-items ul li .inside:after{
  content:'';
  display:block;
  clear:both;
}
.brand-story-items ul li .inside > div{height: auto;/* padding: 150px 0 0; */}

.brand-story-items ul li .inside{
}
.brand-story-slider{padding-top: 0;}
.brand-story-slider .inside{
  
}
.brand-story-slider .inside h2 p{
  padding-bottom: 80px;
}
.slider{

}
.slider .item{

}
.slider .item .inline{display: table;width: 100%;padding-top: 110px;}
.slider .item .inline .content{display: table-cell;vertical-align: top;width: 50%;padding-left: 180px;padding-right: 0;}
.slider .item .inline .nav{padding-bottom: 40px;}
.slider .item .inline .nav > span{
  display: table-cell;
  vertical-align: middle;
  position: relative;
}
.slider .item .inline .num{padding-left: 22px;}
.slider .item .inline .line{width: 60px;}
.slider .item .inline .line:before{
  content:'';
  height: 1px;
  background-color: #000;
  position: absolute;
  width: 100%;
}
.slider .item .inline .subtitle{padding-right: 30px;}
.slider .item .inline h3 p{margin: 0;padding: 0;}
.slider .item .inline .description p{margin: 0;padding: 0;padding-top: 30px;line-height: 36px;}
.slider .item .inline .image{display: table-cell;vertical-align: top;width: 50%;height: 440px;}
.slider .item .inline .thumb{height: 100%;display: block;}
.slick-dots{margin: 0;padding: 0;list-style-type: none;position: absolute;top: 60px;left: 0;display: table;}
.slick-dots li{padding-left: 30px;display: table-cell;}
.slick-dots li.slick-active button,.slick-dots li  button:hover{
  background-color:#000;
}
.slick-dots li:last-child{
  padding-left:0;
}
.slick-dots button,.slider-nav .item span{display: block;width: 11px;height: 11px;font-size: 0;border-radius: 50%;padding: 0;border: 1px solid #000;cursor: pointer;}
.slider-out{
}
 .slider-nav .item span{
   border:none;
 }

 .slider-nav .slick-track{
   width: 100%!important;
   text-align: left;
   transform: none!important;
 }
.color-slider .slider-nav .slick-track{
  
}
.slider-nav .item{
  width: 41px!important;
  display: inline-block!important;
  padding-right: 30px;
  float: none;
}
.bottom-links .inside > a{display: inline-block;}
.bottom-links .first-link{float: right;padding-left: 0;padding-right: 100px;text-align: left;}
.bottom-links .second-link{
  float: left;
  padding-left: 100px;
  padding-right: 0;
}
.bottom-links .first-link svg{
  left: auto;
  right: 0;
  transform: rotate(0deg);
}
.bottom-links .first-link:hover svg{
  left:auto;
  right:-10px;
  width:75px;
}
.bottom-links .second-link:hover svg{
  left:-10px;
  right:auto;
  width:75px;
}
.bottom-links svg{width: 65px;}
.bottom-links svg line{
  stroke-width: 2.2px;
}
.bottom-links{
  margin-top: 130px;
  background-color: #fff;
  position: relative;
}
.bottom-links .inside{
  padding-top: 55px;
  border-top: 1px solid #cfcfcf;
  padding-bottom: 50px;
}
.brand-system-wrapper{
  padding-top: 180px;
}
.brand-system-wrapper .inside:after{
  content:'';
  display:block;
  clear:both;
}
.brand-system-wrapper .sidebar{display: inline-block;width: 335px;float: right;-webkit-transition: none;-moz-transition: none;-o-transition: none;transition: none;}
.brand-system-wrapper .content{width: calc(100% - 335px);float: right;position: relative;}
.brand-system-wrapper .sidebar ul{margin: 0;padding: 0;list-style-type: none;padding-right: 55px;padding-left: 80px;}

.brand-system-wrapper .content:before{
  content:'';
  display:block;
  height: 100%;
  width: 1px;
  background-color: #cfcfcf;
  position: fixed;
  top: 0;
}
.brand-system-wrapper .sidebar ul li{padding-bottom: 20px;margin-bottom: 15px;border-bottom: 1px solid #000;}
.brand-system-wrapper .sidebar ul li a{display: inline-block;}
.brand-system-wrapper .sidebar ul li:last-child{
  border:none;
}
.current-menu-item a{
  font-weight:800;
}
.brand-system-wrapper .content .entry{
  padding-top: 5px;
  padding-right: 180px;
}
header ul.menu li a,.usage.motion-principles ul.items .description, .color.constraction-second .title, .area.overview ul .title, .brand-system-wrapper .content .entry .subtitle, .clear-space h3, .usage ul.items h4, .usage h3, .color h3, .social-round-title, .social-icons h3, .icons-clear h2,h4.bg{
  font-weight: 600;
  font-family: 'SimplerPro',arial, sans-serif;
}
.usage.motion-principles.art-principles ul.items .description{
  font-weight:300;
}
.usage.construction ul.items h4{
  padding-top: 50px;
  max-width: 260px;
}
.usage.construction ul.items .description{
  padding-top:0;
  padding-bottom: 120px;
}
.usage h3.bg,.area.usage.construction.tools-usage h3,.pairing ul.items li .image, .clear-space h3.bottom-m-margin, .usage ul.items .image, .usage h3, .color ul.items.guidnace .image, .social-round-icon,.hierarchy .two-images li .image{
  margin-bottom: 25px;
}
.clear-space h3, .usage h3, .social-icons h3, .cta h3,.icons-clear h2,.principles.art-principles h2{
  position:relative;
  display: inline-block;
}
header ul.menu li a:before,.clear-space h3:before, .usage h3:before, .social-icons h3:before, .cta h3:before,.icons-clear h2:before,.principles.art-principles h2:before{
  content:'';
  position:absolute;
  width:100%;
  height:1px;
  background-color:#000;
  bottom: 0;
}
header ul.menu li a:before{
  opacity:0;
  visibility:hidden;
}
header ul.menu li.current-menu-item a:before{
  opacity:1;
  visibility:visible;
}

.post h2,.area.usage.color.constraction-second h2, .brand-system-wrapper .content .entry .subtitle, .brand-system-wrapper .content .entry h1, .area h2, .usage ul.items h4, .guidance.calltoactions h2, .usage.construction ul.items h4,.area.usage.color.photo h2
{
    padding-bottom: 20px;
}
.guidance.calltoactions h2{
  margin-bottom:0;
}
.usage ul.items h4,.usage.construction ul.items h4{
  padding-bottom:10px;
}
.area.usage.construction.tools-usage h4{
  padding-top: 35px;
  max-width: none;
}
.tools-usage .masonry-gallery,.area.usage.construction.tools-usage h4{
  padding-bottom: 100px;
}
.hero-description p,.area-description p,.area.usage.color.constraction-second p{
  margin:0;
  padding:0;
}
.hero-description{
  padding-bottom: 90px;
}
.fullwidth-image{margin-bottom: 45px;}
.fullwidth-image img{
  max-width:100%;
  min-width: 100%;
  display: block;
}
.slick-slider .fullwidth-image .thumb{
  height: 500px;
}
.fullwidth-image .thumb .image{
  height: 100%;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
}
.post .item .desc.by, .post, .website-images, .pairing ul.items, .area-description, .clear-space h2, .logo-aplications h2, .hero-description-color, .color.guidance ul, .principles h2, .area.tools-usage h2, .icons-construction .area-image:last-child, .construction .description, .tools-example-list h2, .area.usage.color h2, .sqaure_banner li, .area.usage.color.constraction-second .description, .area.overview ul li, .area.motion-construction h2, .description.bg, h4.bg, .description-main, .top-sec, .posts.float .post

{
  padding-bottom: 45px;
}
.area.overview ul li.first{
  padding-bottom: 100px;
}
.posts.float .post{
  padding-top:90px;
}
.posts.float .post{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 10000000000;
  background-color: #fff;
  height: 100vh;
  overflow-y: auto;
}
.posts.float .post.active{
  opacity:1;
  visibility:visible;
  pointer-events:all;
}
.color-applications .area-image, .icons-construction .area-image,.example-list .area-image{
  padding-bottom:30px;  
}
.float .post .main-image, .post, .clear-space h3, .usage h3, .social-icons h3, .icons-clear h2, .updates-hero-out{
  margin-bottom: 45px;
}
.usage h3, .color h3, .guidance h2, .color.guidance ul li, .color-slider-out{
  margin-bottom: 70px;
}
.guidance.calltoactions .area-description{
  padding-bottom:90px;
}
.post .item .desc.date,.clear-space h3, .usage h3, .color h3, .social-icons h3, .icons-clear h2, .usage.motion-principles.art-principles ul.items .title, .principles.art-principles h2, .usage.art ul.principles-items h4{
   padding-bottom:10px; 
}
.construction ul.items, .usage ul.items, .color ul,.social-icons ul{margin: 0;padding: 0;list-style-type: none;font-size: 0;margin-left: -30px;padding-bottom: 50px;}
.construction ul.items li, .usage ul.items li, .color ul li, .social-icons ul li, .usage.logo-symbol ul.items li{
  display: inline-block;
  padding-left: 30px;
  width: 50%;
  vertical-align: top;
}
.usage ul.items li, .color ul li, .social-icons ul li,body .art .masonry-gallery-with-top-image li
{
  width: 33.3%;
}
.usage.construction ul.items li, body .usage ul.masonry-gallery-with-same-image li, .color.constraction-second ul li{
  width:50%;
}
.usage.logo-symbol.brand-movment ul.items li{
  width: 100%;
  max-width: none;
}
.item{
  position:relative;
}
.construction ul.items .image{height: 290px;background-size: contain;background-position: right center;}
.construction ul.items .description{padding-top: 35px;}
.construction ul.items .description p,.post .description p{
  margin: 0;
  line-height: 32px;
}
.usage ul.items .image, .color ul.items.guidnace .image{
  height: 300px;
  background-size: contain;
  background-position: right;
  position: relative;
  margin-bottom: 20px;
}

.usage ul.items.guidnace .image,
.color ul.items.guidnace .image,
.art .masonry-gallery-with-top-image .thumb
{
  height: 220px;
}
.color.guidance ul.items.guidnace .image{
  height:150px;
}
.color.guidance ul.items.guidnace .description,
.hero-description p, .area-description p, .area.usage.color.constraction-second p
{
  line-height: 35px;
}
.close-symbol, .color.guidance li:nth-child(2) i.close-symbol, .color.guidance li:nth-child(4) i.close-symbol, .color.guidance li:nth-child(6) i.close-symbol{position: absolute;width: 31px;height: 31px;border: 1px solid #E02020;border-radius: 50%;right: 0;top: -50px;}
.close-symbol:before, .close-symbol:after, .usage ul.items.guidnace li .item:before, .color.guidance li:nth-child(2) i.close-symbol:after, .color.guidance li:nth-child(2) i.close-symbol:before, .color.guidance li:nth-child(4) i.close-symbol:after, .color.guidance li:nth-child(4) i.close-symbol:before, .color.guidance li:nth-child(6) i.close-symbol:after, .color.guidance li:nth-child(6) i.close-symbol:before{content:'';background-color: #E02020;height: 1px;position: absolute;width: 15px;right: 0;left: 0;bottom: 0;top: 0;margin: auto;}
.close-symbol:before{transform: rotate(45deg);}
.close-symbol:after{
  transform: rotate(
-45deg);
}
.color.guidance i.close-symbol{
  /* border: 1px solid transparent; */
}
.color.guidance i.close-symbol:before,.color.guidance i.close-symbol:after{
  /* background-color: #000; */
  /* width: 25px; */
}
.usage ul.items.guidnace li .item:before,
.color.guidance ul.items.guidnace li .item:before
{
  content:'';
  width: 110%;
  transform: rotate(-45deg);
  bottom: auto;
  top: 110px;
  left: auto;
  right: -20px;
  position: absolute;
  height: 1px;
  z-index: 1;
}
.color.guidance ul.items.guidnace li .item:before{
  background-color: #E02020;
  width: 80%;
  top: 75px;
  right: 0;
}
.color.guidance ul.items.guidnace li:nth-child(2) .item:before,
.color.guidance ul.items.guidnace li:nth-child(4) .item:before,
.color.guidance ul.items.guidnace li:nth-child(6) .item:before
{
  background-color: #E02020;
}
.color.guidance.calltoactions ul.items.guidnace li .item:before{
  width: 80%;
}

.color.guidance ul.items.guidnace.can li .item:before{
  display: none;
}
.color ul{margin: 0;padding-top: 0;list-style-type: none;font-size: 0;padding-left: 0;padding-right: 0;margin-left: -30px;}
.color ul li,.social-icons ul li{
  padding-bottom: 30px;
}
.color.photo ul{
  padding-bottom:0;
}
.color ul li .thumb{
  height: 170px;
  background-size: contain;
  background-position: right;
}
.social-round-icon{
  width:170px;
  height:170px;
  background-size: contain;
  background-position: center;
  position: relative;
}
.social-round-icon .icon,.social-icons ul li .thumb .icon{
  position: absolute;
  z-index: 10;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}
.social-round-title,
.download-link,
.doodles,
.usage.speed ul.items,
body .grid-construction-first .masonry-gallery.masonry-gallery-with-top-image{
  padding-bottom: 100px;
}
.social-icons ul li .thumb{
  height: 370px;
  background-size: contain;
  background-position: top right;
  position: relative;
}
.social-icons ul, .color.constraction-second ul.masonry-gallery{
  padding-bottom:60px;
}
.usage.speed.example-motion ul.items{
  padding-bottom: 0;
}
.usage.speed.hierarchy ul.items{
  padding-bottom: 0;
  display: block;
}
.color.constraction-second ul{
  padding-bottom:0;
}
video{
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    max-width: 100%;
    object-fit: cover;
    height: 100%;
    z-index: 1;
}
.area-image video{
  position:relative;
}
.download-link a.jump{
  border: 1px solid #000;
  padding: 15px 35px 15px;
  padding-left: 70px;
  display: inline-block;
}

.pairing ul.items li,.hierarchy .two-images li{
  width: 50%;
  display: inline-block;
  vertical-align: top;
}
.pairing ul.items li .item{
  
}
.pairing ul.items li .image,.hierarchy .two-images li .image {
  height: 450px;
  background-size: contain;
  background-position: center;
}
.hierarchy .area-image{
  padding-bottom: 25px;
}
.hierarchy .items{margin: 0;padding: 0;list-style-type: none;display: inline-block;padding-bottom: 70px;font-size: 0;}
.hierarchy .items:after{
  clear:both;
  display:block;
  content:'';
}
.hierarchy .two-images .items{
  padding-bottom: 0;
}
.hierarchy .items li{display: inline-block;vertical-align: top;padding-left: 30px;float: none;max-width: 250px;padding-bottom: 30px;}
.hierarchy .two-images li .description{
  padding-bottom: 0;
}
.hierarchy .two-images .items li{
  padding-bottom: 40px;
  min-height: 155px;
}
.hierarchy .items li:last-child{
  padding-left:0;
}
.hierarchy .two-images .items li:last-child{
  padding-left: 65px;
}
.hierarchy .description p{margin: 0;line-height: 26px;}

.hierarchy .two-images{
  margin-left: -30px;
  padding: 0;
  list-style-type: none;
}
.cta h3{
  font-weight: 300;
}
.principles h2{
  padding-top:45px;
}
.logo-symbol h2,.principles.art-principles h2{
  padding-top:0;
  position: relative;
}
.icons-clear.distance h2{
  padding-bottom:0;
}
.icons-clear.distance h2:before{
  display:none;
}
.construction .description p{
  margin:0;
}
.usage.construction .items{
  padding-bottom: 0;
}
.area.overview ul{margin: 0;padding: 0;list-style-type: none;font-size: 0;}
.area.overview ul li.second,body .art .masonry-gallery.masonry-gallery-with-top-image{
  padding-bottom: 120px;
}
.area.overview ul .item{
  display: inline-block;
}
.area.overview ul .item:last-child{
  padding-left:0;
}
.area.overview ul .image{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 280px;
  height: 280px;
}
.area.overview ul li.second .image{
  height: 330px;
  width:330px;  
}
.area.overview ul li.second .square .image{
}
.area.overview ul .rectangle .image,.area.overview ul li.second .square .image{
  width: 510px;
}
.sqaure_banner ul{
  margin:0;
  padding:0;
  margin-left:-30px;
  list-style-type:none;
  font-size: 0;
}
.sqaure_banner li{
  display:inline-block;
  vertical-align:top;
  counter-increment: item;
}
.sqaure_banner li .title:before{
    content: counter(item, decimal-leading-zero) " ";
    font-weight: 600;
    position: absolute;
    right: 0;
    top: 0;
}
.sqaure_banner li .title{
  margin-top:30px;
  position:relative;
  padding-right: 55px;
}
.hierarchy .masonry-gallery{
  padding-top:0;
}
.updates-hero-out{
  padding-top: 145px;
  background-color: #EBEBEB;
}
.updates-hero{display: table;width: 101%;height: 450px;}
.updates-hero.showcases-hero{
  height:auto;
}
.post .main-image{position:relative;height: 500px;overflow: hidden;}
.posts .inside{margin: 0;padding: 0;list-style-type: none;}
.post .main-image .image{
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.post{
  border-bottom:1px solid #ccc;
}
.read{text-align: center;padding-top: 65px;}
.read span{
  padding: 16px 70px;
  border: 2px solid #000;
  border-radius: 3px;
  display: inline-block;
  cursor: pointer;
}
.read.close-button span{
  padding: 20px 120px;  
}
.read span:hover{
  background-color:#efefef;
}
.post:last-child{
  padding-bottom:0;
  margin-bottom:0;
  border:none;
}
.top-sec{display: table;}
.top-sec > div{
  display: table-cell;
  padding-left: 40px;
  vertical-align: middle;
}
.post .item .top-sec > div.desc{
  padding-bottom: 0;
}
.post .masonry-gallery{
  padding-top:0;
}
.posts.float{
  /* position: fixed; */
  /* top: 0; */
  /* right: 0; */
  /* width: 100%; */
  /* z-index: 10000000000; */
  /* background-color: #fff; */
  /* height: 100vh; */
  /* overflow-y: auto; */
}
.color-slider-out .color-slider{
  width: 100%;
}
.color-slider-out .slick-dots{
  top: auto;
  bottom: 0;
}
.color-slider-out .slick-dots button{
  border: none;
}
.area.sqaure_banner{
  padding-bottom: 60px;
}
 
}
@media (min-width: 1650px){
.brand-story-messaging p{
  line-height: 40px;
}
.brand-story-messaging{
  padding: 160px 0 150px;
}
.brand-story-slider .slider-examples .description ul li{
  font-size: 22px;
  line-height: 32px;
}
.brand-story-slider .slider-examples .description ul {
    padding-bottom: 80px;
}
.brand-story-accordion ul.items .wrapp.active .description{
  font-size: 24px;
}
.brand-story-accordion .wrapp{
  padding-bottom: 30px;
}
.brand-story-accordion ul.items h3:after {
    top: 11px;
}
    

.logo-desc {margin-top: 22px;}
html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, form, label, legend, caption, tbody, tfoot, thead, .contact-form-thank-message strong, fn, input, textarea, .full-logos ul li,.case-studies-section-06.sec-06-1 .author p {
  font-size: 24px;
}
li.post .item-layout-2 .description p,.updates-hero .inside .title-section > div p,.description.bg p,.hero-description p, .area-description p, .usage ul.items .description, .construction ul.items .description p, .sqaure_banner li .title, .construction .description p,.usage ul .item-layout-2 h4
{
  line-height: 35px;
}
header{height: 80px;position: fixed;width: 100%;z-index: 10000000;}

header.nav-up {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
header.nav-down {
    background-color: rgba(255,255,255,.8);
    height: 80px;
}



header .inside, .sup .inside, .credit-section .inside,.brand-system-wrapper .inside{margin-left: 125px;margin-right: 125px;position: relative;height: 100%;}
header a.logo,footer a.logo{display: inline-block;position: absolute;right: 0;top: 0;bottom: 0;margin: auto;height: 65px;}
header a.logo img, footer a.logo img{max-width: 100%;max-height: 100%;display: block;}
.menu-primary-container{
  float: left;
  padding-top: 25px;
}
.brand-system-wrapper .sidebar ul li a,.download-link a.jump span{
  font-size:18px;
}
.download-link a.jump span{
  display: inline-block;
}
header ul.menu{margin: 0;padding: 0;list-style-type: none;display: table;}
header ul.menu li{
  display: table-cell;
  padding-left: 75px;
}
footer{
  background-color: #fff;
  z-index: 10000;
  position: relative;
}
header ul.menu li a{
  padding-left: 0;
  padding-right: 0;
  position: relative;
  padding-bottom: 5px;
}
.area.usage.construction.tools-usage h4,.post h2{
  font-size:35px;
}

.slider .item .inline .num, 
.slider .item .inline .subtitle,
.usage ul.items .description,
.social-round-title
{
  font-size:22px;
}
.area h2, .usage.motion-principles.art-principles ul.items .title, .principles-items h4, .post .item .desc,.post h2
{
  font-size:28px;
  font-weight:600;
  font-family: 'SimplerPro',arial, sans-serif;
}
header ul.menu li a:hover:before{
  opacity:0;
}
header ul.menu li:last-child{
  padding-left:0;
}
.homepage-hero, .banner .inside, .files-section, .brand-story-slider .inside, .slider, .bottom-links .inside, .brand-story-messaging .inside,.brand-story-elments .inside{
  width: 1440px;
  margin: auto;
}
.updates-hero .inside{
  margin: auto;
  display: table-cell;
  vertical-align: top;
  padding-top: 180px;
}
.showcases-hero .inside{
  padding-top:0;
}
.updates-hero .inside .title-section, .post .item,.page-template-updates-php .updates-hero .inside .title-section{
  width: 1050px;
  margin: auto;

}
.updates-hero .inside .title-section{
  display: table;
  width: auto;
}

.updates-hero .inside .title-section h1{display: table-cell;vertical-align: top;}
.updates-hero .inside .title-section h1 p{
  margin:0;
}
.updates-hero .inside .title-section > div{
  display: table-cell;
  vertical-align: top;
}
.updates-hero .inside .title-section > div p{
  margin:0;
  padding:0;
}
 .post .item .desc{
   font-size:14px;
 }
.hierarchy .item p, .hierarchy .two-images li .description p, header ul.menu li a,.logo-desc{
  font-size:16px;
}
.homepage-hero{display: table;}
.homepage-hero, .first-banner, .third-banner, .fifth-banner{
  height: 100vh;
}
.banner.first-banner, .banner.second-banner, .banner.third-banner, .banner.fifth-banner, .banner.fourth-banner{
  height: auto;
  padding-top: 150px;
}
.third-banner{
  height:auto;
}
.fifth-banner{
  height:auto;
  padding-top:200px;
  padding-bottom:200px;
}
.homepage-hero .social-links{
  position: absolute;
  left: 0;
  top: 0;
}
.updates-hero.showcases-hero .inside .title-section h1,
.updates-hero.showcases-hero .inside .title-section > div{display: table-cell;vertical-align: top;width: 50%;}
.updates-hero.showcases-hero .inside .title-section > div{
  padding-top:10px;
}
.homepage-hero .social-links li,.area.overview ul .item,.sqaure_banner li{
  padding-left: 30px;
}
.post1 h2, .updates-hero .inside .title-section h1, .brand-system-wrapper .content .entry h1, .banner h2 p, .homepage-hero h1 p, .files-section .inside .title h2 p, .credit-section .inside > div.credit p, .credit-section .inside > div.credit p a, .social > a, .brand-story-description p strong, .brand-story-slider .inside h2 p, .slider .item .inline h3 p, .slider .item .inline .num, .bottom-links .inside > a span{
  font-family: 'SimplerPro', sans-serif;
  font-weight: 900;
}
.homepage-hero h1, .files-section .inside .title h2 p{font-size: 120px;line-height: 120px;}
.homepage-hero .inside{height: 100%;display: table-cell;vertical-align: middle;position: relative;z-index: 2;}
.homepage-hero .inside h1{
  position:relative;
}
.brand-story-hero{
  text-align: center;
}
.homepage-hero.brand-story-hero h1 p{
  font-size: 90px;
  line-height: 90px;
  padding-top: 40px;
  margin: 0;
  font-family: 'SimplerPro', sans-serif;
}
a.jump,.second-banner ul.items .name{position: relative;padding-left: 40px;}
a.jump span,.banner.fourth-banner a.jump span{
  font-size:20px;
}
a.jump:before{
  content:'';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #FFF;
  bottom: -8px;
  right: 0;
}
a.jump:hover:before{
  opacity:0;
  visibility:hidden;
}
a.jump:hover svg{
  width:30px;
  left:-5px;
}
.description.bg p{
  padding:0;
  margin:0;
}
.arrow-sumbol {
    width: 25px;
    height: 18px;
    transition: all .5s cubic-bezier(.075,.82,.165,1);
    margin-right: 0;
    position: absolute;
    left: 0;
    cursor: pointer;
    transform: rotate(180deg);
    right: auto;
    top: 0;
    bottom: 0;
    margin: auto;
}
.arrow-sumbol marker {
    overflow: visible;
    fill: #444444;
}
.arrow-sumbol line {
    stroke: #444444;
    stroke-width: 1.2px;
}
.hero-image{
  position: absolute;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  background-size: cover;
  background-position: center;
}
.doodles p{
  margin:0;
 padding:0;
}
.usage.logo-symbol ul.items .image.video{
  height:285px;
}
.banner .inside{
  display: table;
  height: 100%;
}
.banner .inside > div{display: table-cell;width: 50%;vertical-align: middle;}
.banner .inside .content .description{
    padding-left: 110px;
}
.banner .inside .image .img,.banner .inside .image video{
  width: 100%;
  height: calc(100vh - 200px);
  background-size: contain;
  background-position: center;
  min-height: 540px;
}
.banner .cat-name{

}
.description-main{
  padding-left: 50%;
}
.banner h2 p, .brand-story-slider .inside h2 p, .slider .item .inline h3 p, .bottom-links .inside > a span, .brand-system-wrapper .content .entry h1, .updates-hero .inside .title-section h1, .brand-story-messaging h3,.brand-story-elments h2
{font-size: 48px;line-height: 56px;margin: 0;}
.banner h2 p{
  padding-top: 20px;padding-bottom: 20px;
}
.banner .description p{margin: 0;line-height: 40px;padding-left: 0;padding-bottom: 80px;}
.banner a.jump span,.icons-clear h2{
  font-size:24px;
}
.banner a.jump:before{
  background-color:#000;
}
.second-banner .inside,.fourth-banner .inside{
  display: block;
}
.second-banner .inside > div,.fourth-banner .inside > div{display: block;width: auto;}

.second-banner ul.items, .fourth-banner ul, .pairing ul.items,.hierarchy .two-images{margin: 0;padding: 0;list-style-type: none;font-size: 0;margin-left: -30px;}
.second-banner ul.items li{
  width: 25%;
  display: inline-block;
  padding-left: 30px;
  padding-top: 60px;
}
.second-banner ul.items a{
  display: block;
  padding: 0;
}
.second-banner ul.items a:hover .image{
    -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
}





.download-link a.jump svg{left: 30px;}
.download-link a.jump:hover svg{
  left:25px;
}
.second-banner ul.items a:before{
  content:'';
  height: 1.5px;
  background-color: #000;
  width: 100%;
  position: absolute;
  top: 0;
  opacity: 1;
  visibility: visible;
}
.second-banner ul.items span{
  font-weight: 500;
}
.second-banner ul.items .name{
  position: relative;
  display: inline-block;

  padding-bottom: 30px;
}

.second-banner ul.items .name, .area.overview ul .title{
    padding-top: 30px;
}
.second-banner ul.items .image,.principles-items .thumb{
  height: 330px;
  background-size: contain;
  background-position: center;
}
.third-banner .inside .image{
  padding-left: 0;
}
.page-template-homepage .third-banner .inside .image{
  padding-left: 200px;
}
.third-banner .inside .image .img {
    height: 100%;
}
.fourth-banner h2 p{
  padding-bottom: 70px;
}
.fourth-banner{
  padding-top: 0;
}
.fourth-banner ul.masonry-gallery{
  padding: 0;
  margin: 0;
  list-style-type: none;
  padding-top: 85px;
  margin-left: -30px;
}
.masonry-gallery{padding: 0;margin: 0;list-style-type: none;padding-top: 85px;font-size: 0;margin-left: -30px;}
.logo-aplications .masonry-gallery,.grid-construction .masonry-gallery{
  padding-top: 0px;
}
.showcases-wrapper .masonry-gallery{
  padding-top: 120px;
}
.tools-usage .masonry-gallery{
  padding-top:0;
  margin-left: -30px;
}
.masonry-gallery .item, .masonry-gallery li, .pairing ul.items li, .hierarchy .two-images li, body .showcases-wrapper .masonry-gallery .item{width: 50%;display: inline-block;padding-left: 30px;padding-bottom: 30px;}
.masonry-gallery a,.masonry-gallery .thumb{
  display: block;
  height: 380px;
  background-repeat: no-repeat;
  position: relative;
}
.masonry-gallery .item.hidden{
  opacity:0;
  visibility:hidden;
}



body .masonry-gallery.masonry-gallery-with-top-image li,.sqaure_banner li{
  width:50%;
}
body .masonry-gallery.masonry-gallery-with-top-image{
  padding-bottom: 10px;
}
body .art .masonry-gallery.masonry-gallery-with-top-image{
  padding-top: 0;
}
body .masonry-gallery.masonry-gallery-with-top-image li:first-child{
  width:100%;  
}
.masonry-gallery-with-top-image .thumb, 
.usage.construction ul.items .image,
body .usage ul.masonry-gallery-with-same-image li .thumb,
.sqaure_banner li .image,
.usage.logo-symbol ul.items .image,
.art .masonry-gallery-with-top-image li:first-child .thumb
{
  height: 510px; 
}

.masonry-gallery li:nth-child(3),
.masonry-gallery .item:nth-child(3),
.masonry-gallery li:nth-child(7),
.masonry-gallery .item:nth-child(7)
{
  width: 60%;
  }
.masonry-gallery li:nth-child(4),
.masonry-gallery .item:nth-child(4),
.masonry-gallery li:nth-child(8),
.masonry-gallery .item:nth-child(8)
{
  width: 40%;
}
body .masonry-gallery.masonry-gallery-with-same-image-second-full li:nth-child(3){
 width:100%; 
}
.first-banner .inside .content{
  padding-left: 180px;
}
.fifth-banner .description p{
  padding-bottom:0;
}
.fifth-banner h2 p{
  padding-bottom:60px;
}
.usage.construction ul.items .image{
  margin-bottom: 0;
}
.sup .inside{
  height: 1px;
  background-color: #000;
}
.fifth-banner .inside .content{width: 40%;}
.fifth-banner .inside .description{
  width: 60%;
}
.files-section{height: auto;padding-bottom: 100px;}
.files-section .inside{display: table;width: 100%;height: 100%;}
.files-section .inside > div{
  display: table-cell;
  vertical-align: middle;
  width: 50%;
}

.showcases-wrapper .masonry-gallery .item{
  
}
.showcases-wrapper .masonry-gallery .item:nth-child(1){
  width: 100%;
}
.showcases-wrapper .masonry-gallery .item:nth-child(4),
.showcases-wrapper .masonry-gallery .item:nth-child(5),
.showcases-wrapper .masonry-gallery .item:nth-child(8),
.showcases-wrapper .masonry-gallery .item:nth-child(9),
.showcases-wrapper .masonry-gallery .item:nth-child(12),
.showcases-wrapper .masonry-gallery .item:nth-child(13),
.showcases-wrapper .masonry-gallery .item:nth-child(16),
.showcases-wrapper .masonry-gallery .item:nth-child(17),
.showcases-wrapper .masonry-gallery .item:nth-child(20),
.showcases-wrapper .masonry-gallery .item:nth-child(21)
{
  width: 60%;
}

.showcases-wrapper .masonry-gallery .item:nth-child(5),
.showcases-wrapper .masonry-gallery .item:nth-child(9),
.showcases-wrapper .masonry-gallery .item:nth-child(13),
.showcases-wrapper .masonry-gallery .item:nth-child(17),
.showcases-wrapper .masonry-gallery .item:nth-child(21)
{
  width: 40%;
}
.files-section .inside .title h2 p{

}
.files-section .inside .files ul{margin: 0;padding: 0;list-style-type: none;border-top: 1px solid #000;}
.files-section .inside .files ul li{

}
.files-section .inside .files ul li a{display: block;padding: 0;padding-top: 15px;padding-bottom: 15px;border-bottom: 1px solid #000;}
.files-section .inside .files div{

}
.brand-system-wrapper .sidebar ul li.current-menu-item a, .sqaure_banner li .title:before, .files-section .inside .files li:last-child span, .hierarchy .description p strong{font-family: 'SimplerPro', arial, sans-serif;}
.files-section .inside .files i{display: inline-block;border-bottom: 1px solid #000;position: absolute;left: 0;width: 30px;height: 30px;}
.files-section .inside .files svg{
  transform: rotate(
90deg);
  width: 18px;
  right: 0;
}
.files-section a.jump .arrow-sumbol line{
  stroke-width: 1px;
}
.files-section a.jump:hover svg{
  left:0;
  top:8px;
}
.credit-section .inside{display: table;width: calc(100% - 230px);}
.credit-section .inside > div{
  display: table-cell;
  width: 33%;
  vertical-align: middle;
}
.credit-section .inside > div.social ul.social-links{
  float: left;
  padding-left: 20px;
  margin-top: 0;
}
.social > a{
  float:left;
  margin-top: 5px;
}
footer a.logo{
  position: relative;
}
.credit-section .inside > div.credit p{
  text-align: center;
}
.social-links{margin: 0;padding: 0;list-style-type: none;display: table;}
.social-links li{display: table-cell;padding-left: 15px;vertical-align: middle;}
.social-links a{
  display: block;
}
.social-links a img{
  display: block;
}
.credit-section .inside > div.social:after,.bottom-links .inside:after{
  content:'';
  clear:both;
  display: block;
}
.credit-section .inside > div.social{
  text-align:left;
}
.credit-section{
  height:120px
}
.brand-story-description p{
  padding: 190px 0 0;
  text-align:center;
  margin: 0;
  line-height: 40px;
}
.brand-story-items ul{margin: 0;padding: 0;list-style-type: none;}

.brand-story-items ul li:nth-child(odd) .inside .image{
  padding-right: 50px;
}
.brand-story-items ul li:nth-child(even) .inside .image{
  padding-left: 50px;
}
.brand-story-items ul li:nth-child(odd) .inside .content{
  padding-left: 50px;
}
.brand-story-items ul li:nth-child(even) .inside .content{
  padding-right: 200px;
}
.brand-story-items ul li .inside:after{
  content:'';
  display:block;
  clear:both;
}
.brand-story-items ul li .inside > div{height: auto;/* padding: 150px 0 0; */}

.brand-story-items ul li .inside{
}
.brand-story-slider{padding-top: 0;}
.brand-story-slider .inside{
  
}
.brand-story-slider .inside h2 p{
  padding-bottom: 80px;
}
.slider{

}
.slider .item{

}
.slider .item .inline{display: table;width: 100%;padding-top: 110px;}
.slider .item .inline .content{display: table-cell;vertical-align: top;width: 50%;padding-left: 180px;padding-right: 0;}
.slider .item .inline .nav{padding-bottom: 40px;}
.slider .item .inline .nav > span{
  display: table-cell;
  vertical-align: middle;
  position: relative;
}
.slider .item .inline .num{padding-left: 22px;}
.slider .item .inline .line{width: 60px;}
.slider .item .inline .line:before{
  content:'';
  height: 1px;
  background-color: #000;
  position: absolute;
  width: 100%;
}
.slider .item .inline .subtitle{padding-right: 30px;}
.slider .item .inline h3 p{margin: 0;padding: 0;}
.slider .item .inline .description p{margin: 0;padding: 0;padding-top: 30px;line-height: 36px;}
.slider .item .inline .image{display: table-cell;vertical-align: top;width: 50%;height: 510px;}
.slider .item .inline .thumb{height: 100%;display: block;}
.slick-dots{margin: 0;padding: 0;list-style-type: none;position: absolute;top: 60px;left: 0;display: table;}
.slick-dots li{padding-left: 30px;display: table-cell;}
.slick-dots li.slick-active button,.slick-dots li  button:hover{
  background-color:#000;
}
.slick-dots li:last-child{
  padding-left:0;
}
.slick-dots button,.slider-nav .item span{display: block;width: 11px;height: 11px;font-size: 0;border-radius: 50%;padding: 0;border: 1px solid #000;cursor: pointer;}
.slider-out{
}
 .slider-nav .item span{
   border:none;
 }

 .slider-nav .slick-track{
   width: 100%!important;
   text-align: left;
   transform: none!important;
 }
.color-slider .slider-nav .slick-track{
  
}
.slider-nav .item{
  width: 41px!important;
  display: inline-block!important;
  padding-right: 30px;
  float: none;
}
.bottom-links .inside > a{display: inline-block;}
.bottom-links .first-link{float: right;padding-left: 0;padding-right: 100px;text-align: left;}
.bottom-links .second-link{
  float: left;
  padding-left: 100px;
  padding-right: 0;
}
.bottom-links .first-link svg{
  left: auto;
  right: 0;
  transform: rotate(0deg);
}
.bottom-links .first-link:hover svg{
  left:auto;
  right:-10px;
  width:75px;
}
.bottom-links .second-link:hover svg{
  left:-10px;
  right:auto;
  width:75px;
}
.bottom-links svg{width: 65px;}
.bottom-links svg line{
  stroke-width: 2.2px;
}
.bottom-links{
  margin-top: 130px;
  background-color: #fff;
  position: relative;
}
.bottom-links .inside{
  padding-top: 55px;
  border-top: 1px solid #cfcfcf;
  padding-bottom: 0;
}
.brand-system-wrapper{
  padding-top: 230px;
}
.brand-system-wrapper .inside:after{
  content:'';
  display:block;
  clear:both;
}
.brand-system-wrapper .sidebar{display: inline-block;width: 335px;float: right;-webkit-transition: none;-moz-transition: none;-o-transition: none;transition: none;}
.brand-system-wrapper .content{width: calc(100% - 335px);float: right;position: relative;}
.brand-system-wrapper .sidebar ul{margin: 0;padding: 0;list-style-type: none;padding-right: 55px;padding-left: 80px;}

.brand-system-wrapper .content:before{
  content:'';
  display:block;
  height: 100%;
  width: 1px;
  background-color: #cfcfcf;
  position: fixed;
  top: 0;
}
.brand-system-wrapper .sidebar ul li{padding-bottom: 20px;margin-bottom: 15px;border-bottom: 1px solid #000;}
.brand-system-wrapper .sidebar ul li a{display: inline-block;}
.brand-system-wrapper .sidebar ul li:last-child{
  border:none;
}
.current-menu-item a{
  font-weight:800;
}
.brand-system-wrapper .content .entry{
  padding-top: 5px;
  padding-right: 210px;
}
header ul.menu li a,.usage.motion-principles ul.items .description, .color.constraction-second .title, .area.overview ul .title, .brand-system-wrapper .content .entry .subtitle, .clear-space h3, .usage ul.items h4, .usage h3, .color h3, .social-round-title, .social-icons h3, .icons-clear h2,h4.bg{
  font-weight: 600;
  font-family: 'SimplerPro',arial, sans-serif;
}
.usage.motion-principles.art-principles ul.items .description{
  font-weight:300;
}
.usage.construction ul.items h4{
  padding-top: 50px;
  max-width: 260px;
}
.usage.construction ul.items .description{
  padding-top:0;
  padding-bottom:190px;
}
.usage h3.bg,.area.usage.construction.tools-usage h3,.pairing ul.items li .image, .clear-space h3.bottom-m-margin, .usage ul.items .image, .usage h3, .color ul.items.guidnace .image, .social-round-icon,.hierarchy .two-images li .image{
  margin-bottom: 35px;
}
.clear-space h3, .usage h3, .social-icons h3, .cta h3,.icons-clear h2,.principles.art-principles h2{
  position:relative;
  display: inline-block;
}
header ul.menu li a:before,.clear-space h3:before, .usage h3:before, .social-icons h3:before, .cta h3:before,.icons-clear h2:before,.principles.art-principles h2:before{
  content:'';
  position:absolute;
  width:100%;
  height:1px;
  background-color:#000;
  bottom: 0;
}
header ul.menu li a:before{
  opacity:0;
  visibility:hidden;
}
header ul.menu li.current-menu-item a:before{
  opacity:1;
  visibility:visible;
}

.post h2,.area.usage.color.constraction-second h2, .brand-system-wrapper .content .entry .subtitle, .brand-system-wrapper .content .entry h1, .area h2, .usage ul.items h4, .guidance.calltoactions h2, .usage.construction ul.items h4,.area.usage.color.photo h2
{
    padding-bottom:35px;
}
.guidance.calltoactions h2{
  margin-bottom:0;
}
.usage ul.items h4,.usage.construction ul.items h4{
  padding-bottom:10px;
}
.area.usage.construction.tools-usage h4{
  padding-top: 35px;
  max-width: none;
}
.tools-usage .masonry-gallery,.area.usage.construction.tools-usage h4{
  padding-bottom: 135px;  
}
.hero-description p,.area-description p,.area.usage.color.constraction-second p{
  margin:0;
  padding:0;
}
.hero-description{
  padding-bottom: 130px;
}
.fullwidth-image{margin-bottom: 45px;}
.fullwidth-image img{
  max-width:100%;
  min-width: 100%;
  display: block;
}
.slick-slider .fullwidth-image .thumb{
  height:670px;
}
.fullwidth-image .thumb .image{
  height: 100%;
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
}
.post .item .desc.by, .post, .website-images, .pairing ul.items, .area-description, .clear-space h2, .logo-aplications h2, .hero-description-color, .color.guidance ul, .principles h2, .area.tools-usage h2, .icons-construction .area-image:last-child, .construction .description, .tools-example-list h2, .area.usage.color h2, .sqaure_banner li, .area.usage.color.constraction-second .description, .area.overview ul li, .area.motion-construction h2, .description.bg, h4.bg, .description-main, .top-sec, .posts.float .post

{
  padding-bottom: 45px;
}
.area.overview ul li.first{
  padding-bottom: 140px;
}
.posts.float .post{
  padding-top:90px;
}
.posts.float .post{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 10000000000;
  background-color: #fff;
  height: 100vh;
  overflow-y: auto;
}
.posts.float .post.active{
  opacity:1;
  visibility:visible;
  pointer-events:all;
}
.color-applications .area-image, .icons-construction .area-image,.example-list .area-image{
  padding-bottom:30px;  
}
.float .post .main-image, .post, .clear-space h3, .usage h3, .social-icons h3, .icons-clear h2, .updates-hero-out{
  margin-bottom: 45px;
}
.usage h3, .color h3, .guidance h2, .color.guidance ul li, .color-slider-out{
  margin-bottom:90px;
}
.guidance.calltoactions .area-description{
  padding-bottom:90px;
}
.post .item .desc.date,.clear-space h3, .usage h3, .color h3, .social-icons h3, .icons-clear h2, .usage.motion-principles.art-principles ul.items .title, .principles.art-principles h2, .usage.art ul.principles-items h4{
   padding-bottom:10px; 
}
.construction ul.items, .usage ul.items, .color ul,.social-icons ul{margin: 0;padding: 0;list-style-type: none;font-size: 0;margin-left: -30px;padding-bottom: 100px;}
.construction ul.items li, .usage ul.items li, .color ul li, .social-icons ul li, .usage.logo-symbol ul.items li{
  display: inline-block;
  padding-left: 30px;
  width: 50%;
  vertical-align: top;
}
.usage ul.items li, .color ul li, .social-icons ul li,body .art .masonry-gallery-with-top-image li
{
  width: 33.3%;
}
  .usage ul.items li{
    margin-bottom: 50px;
  }
  .usage.example-motion ul.items li{
    padding-bottom:10px;
  }

.usage.construction ul.items li, body .usage ul.masonry-gallery-with-same-image li, .color.constraction-second ul li{
  width:50%;
}
.usage.logo-symbol.brand-movment ul.items li{
  width: 100%;
  max-width: none;
}
.item{
  position:relative;
}
.construction ul.items .image{height: 290px;background-size: contain;background-position: right center;}
.construction ul.items .description{padding-top: 35px;}
.construction ul.items .description p,.post .description p{
  margin: 0;
}
.usage ul.items .image, .color ul.items.guidnace .image{
  height:390px;
  background-size: contain;
  background-position: right;
  position: relative;
  margin-bottom: 20px;
}

.usage ul.items.guidnace .image,
.color ul.items.guidnace .image,
.art .masonry-gallery-with-top-image .thumb
{
  height:220px;
}
.color.guidance ul.items.guidnace .image{
  height:150px;
}
.color.guidance ul.items.guidnace .description,
.hero-description p, .area-description p, .area.usage.color.constraction-second p
{
  line-height:40px;
}
.close-symbol, .color.guidance li:nth-child(2) i.close-symbol, .color.guidance li:nth-child(4) i.close-symbol, .color.guidance li:nth-child(6) i.close-symbol{position: absolute;width: 31px;height: 31px;border: 1px solid #E02020;border-radius: 50%;right: 0;top: 0;z-index: 10;}
.close-symbol:before, .close-symbol:after, .usage ul.items.guidnace li .item:before, .color.guidance li:nth-child(2) i.close-symbol:after, .color.guidance li:nth-child(2) i.close-symbol:before, .color.guidance li:nth-child(4) i.close-symbol:after, .color.guidance li:nth-child(4) i.close-symbol:before, .color.guidance li:nth-child(6) i.close-symbol:after, .color.guidance li:nth-child(6) i.close-symbol:before{content:'';background-color: #E02020;height: 1px;position: absolute;width: 15px;right: 0;left: 0;bottom: 0;top: 0;margin: auto;}
.close-symbol:before{transform: rotate(45deg);}
.close-symbol:after{
  transform: rotate(
-45deg);
}
.color.guidance i.close-symbol{
  /* border: 1px solid transparent; */
}
.color.guidance i.close-symbol:before,.color.guidance i.close-symbol:after{
  /* background-color: #000; */
  /* width: 25px; */
}
.usage ul.items.guidnace li .item:before,
.color.guidance ul.items.guidnace li .item:before
{
  content:'';
  width: 110%;
  transform: rotate(-45deg);
  bottom: auto;
  top: 110px;
  left: auto;
  right: -20px;
  position: absolute;
  height: 1px;
  z-index: 1;
}
.color.guidance ul.items.guidnace li .item:before{
  background-color: #E02020;
  width: 80%;
  top: 75px;
  right: 0;
}
.color.guidance ul.items.guidnace li:nth-child(2) .item:before,
.color.guidance ul.items.guidnace li:nth-child(4) .item:before,
.color.guidance ul.items.guidnace li:nth-child(6) .item:before
{
  background-color: #E02020;
}
.color.guidance.calltoactions ul.items.guidnace li .item:before{
  width: 80%;
}

.color.guidance ul.items.guidnace.can li .item:before{
  display: none;
}
.color ul{margin: 0;padding-top: 0;list-style-type: none;font-size: 0;padding-left: 0;padding-right: 0;margin-left: -30px;}
.color ul li,.social-icons ul li{
  padding-bottom: 30px;
}
.color.photo ul{
  padding-bottom:0;
}
.color ul li .thumb{
  height: 170px;
  background-size: contain;
  background-position: right;
}
.social-round-icon{
  width:170px;
  height:170px;
  background-size: contain;
  background-position: center;
  position: relative;
}
.social-round-icon .icon,.social-icons ul li .thumb .icon{
  position: absolute;
  z-index: 10;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
}
.social-round-title,
.download-link,
.doodles,
.usage.speed ul.items,
body .grid-construction-first .masonry-gallery.masonry-gallery-with-top-image{
  padding-bottom:150px;
}
.social-icons ul li .thumb{
  height: 470px;
  background-size: contain;
  background-position: top right;
  position: relative;
}
.social-icons ul, .color.constraction-second ul.masonry-gallery{
  padding-bottom:60px;
}
.usage.speed.example-motion ul.items{
  padding-bottom: 0;
}
.usage.speed.hierarchy ul.items{
  padding-bottom: 0;
  display: block;
}
.color.constraction-second ul{
  padding-bottom:0;
}
video{
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    max-width: 100%;
    object-fit: cover;
    height: 100%;
    z-index: 1;
}
.area-image video{
  position:relative;
}
.download-link a.jump{
  border: 1px solid #000;
  padding: 15px 35px 15px;
  padding-left: 70px;
  display: inline-block;
}

.pairing ul.items li,.hierarchy .two-images li{
  width: 50%;
  display: inline-block;
  vertical-align: top;
}
.pairing ul.items li .item{
  
}
.pairing ul.items li .image,.hierarchy .two-images li .image {
  height: 590px;
  background-size: contain;
  background-position: center;
}
.hierarchy .area-image{
  padding-bottom: 25px;
}
.hierarchy .items{margin: 0;padding: 0;list-style-type: none;display: inline-block;padding-bottom: 70px;font-size: 0;}
.hierarchy .items:after{
  clear:both;
  display:block;
  content:'';
}
.hierarchy .two-images .items{
  padding-bottom: 0;
}
.hierarchy .items li{display: inline-block;vertical-align: top;padding-left: 30px;float: none;max-width: 250px;padding-bottom: 30px;}
.hierarchy .two-images li .description{
  padding-bottom: 0;
}
.hierarchy .two-images .items li{
  padding-bottom: 40px;
  min-height: 155px;
}
.hierarchy .items li:last-child{
  padding-left:0;
}
.hierarchy .two-images .items li:last-child{
  padding-left: 65px;
}
.hierarchy .description p{margin: 0;line-height: 26px;}

.hierarchy .two-images{
  margin-left: -30px;
  padding: 0;
  list-style-type: none;
}
.cta h3{
  font-weight: 300;
}
.principles h2{
  padding-top:45px;
}
.logo-symbol h2,.principles.art-principles h2{
  padding-top:0;
  position: relative;
}
.icons-clear.distance h2{
  padding-bottom:0;
}
.icons-clear.distance h2:before{
  display:none;
}
.construction .description p{
  margin:0;
}
.usage.construction .items{
  padding-bottom: 0;
}
.area.overview ul{margin: 0;padding: 0;list-style-type: none;font-size: 0;}
.area.overview ul li.second,body .art .masonry-gallery.masonry-gallery-with-top-image{
  padding-bottom: 120px;
}
.area.overview ul .item{
  display: inline-block;
}
.area.overview ul .item:last-child{
  padding-left:0;
}
.area.overview ul .image{
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 280px;
  height: 280px;
}
.area.overview ul li.second .image{
  height: 330px;
  width:330px;  
}
.area.overview ul li.second .square .image{
}
.area.overview ul .rectangle .image,.area.overview ul li.second .square .image{
  width: 510px;
}
.sqaure_banner ul{
  margin:0;
  padding:0;
  margin-left:-30px;
  list-style-type:none;
  font-size: 0;
}
.sqaure_banner li{
  display:inline-block;
  vertical-align:top;
  counter-increment: item;
}
.sqaure_banner li .title:before{
    content: counter(item, decimal-leading-zero) " ";
    font-weight: 600;
    position: absolute;
    right: 0;
    top: 0;
}
.sqaure_banner li .title{
  margin-top:30px;
  position:relative;
  padding-right: 55px;
}
.hierarchy .masonry-gallery{
  padding-top:0;
}
.updates-hero-out{
  padding-top: 145px;
  background-color: #EBEBEB;
}
.updates-hero{display: table;width: 101%;height: 520px;}
.updates-hero.showcases-hero{
  height:auto;
}
.post .main-image{position:relative;height: 700px;overflow: hidden;}
.posts .inside{margin: 0;padding: 0;list-style-type: none;}
.post .main-image .image{
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.post{
  border-bottom:1px solid #ccc;
}
.read{text-align: center;padding-top: 65px;}
.read span{
  padding: 20px 90px;
  border: 2px solid #000;
  border-radius: 3px;
  display: inline-block;
  cursor: pointer;
}
.read.close-button span{
  padding: 20px 120px;  
}
.read span:hover{
  background-color:#efefef;
}
.post:last-child{
  padding-bottom:0;
  margin-bottom:0;
  border:none;
}
.top-sec{display: table;}
.top-sec > div{
  display: table-cell;
  padding-left: 40px;
  vertical-align: middle;
}
.post .item .top-sec > div.desc{
  padding-bottom: 0;
}
.post .masonry-gallery{
  padding-top:0;
}
.posts.float{
  /* position: fixed; */
  /* top: 0; */
  /* right: 0; */
  /* width: 100%; */
  /* z-index: 10000000000; */
  /* background-color: #fff; */
  /* height: 100vh; */
  /* overflow-y: auto; */
}
.color-slider-out .color-slider{
  width: 100%;
}
.color-slider-out .slick-dots{
  top: auto;
  bottom: 0;
}
.color-slider-out .slick-dots button{
  border: none;
}
.area.sqaure_banner{
  padding-bottom: 60px;
}
}