.main-navigation,
            .search {
              width: 100%;
              left: 0;
              right: 0;
              top: 0
            }

            @font-face {
              font-family: Avenir;
              src: url(https://d2slCw3kip6qmk.cloudfront.net/app/webroot/css/css-common/fonts/avenir/AvenirNext-Regular.woff) format("woff"), url(https://d2slCw3kip6qmk.cloudfront.net/app/webroot/css/css-common/fonts/avenir/AvenirNext-Regular.ttf) format("truetype");
              font-weight: 400;
              font-style: normal
            }

            @font-face {
              font-family: Avenir;
              src: url(https://d2slCw3kip6qmk.cloudfront.net/app/webroot/css/css-common/fonts/avenir/AvenirNext-Italic.woff) format("woff") url(https://d2slCw3kip6qmk.cloudfront.net/app/webroot/css/css-common/fonts/avenir/AvenirNext-Italic.ttf) format("truetype");
              font-weight: 400;
              font-style: italic
            }

            @font-face {
              font-family: Avenir;
              src: url(https://d2slCw3kip6qmk.cloudfront.net/app/webroot/css/css-common/fonts/avenir/AvenirLTCom-Roman.ttf) format("truetype");
              font-weight: 400;
              font-style: normal
            }

            @font-face {
              font-family: Avenir;
              src: url(https://d2slCw3kip6qmk.cloudfront.net/app/webroot/css/css-common/fonts/avenir/AvenirLTCom-Heavy.ttf) format("truetype");
              font-weight: 700;
              font-style: normal
            }

            @font-face {
              font-family: Avenir;
              src: url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-Bold.woff) format("woff"), url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-Bold.ttf) format("truetype");
              font-weight: 700;
              font-style: normal
            }

            @font-face {
              font-family: Avenir;
              src: url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-BoldItalic.woff) format("woff"), url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-BoldItalic.ttf) format("truetype");
              font-weight: 700;
              font-style: italic
            }

            @font-face {
              font-family: Avenir;
              src: url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-DemiBold.woff) format("woff"), url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-DemiBold.ttf) format("truetype");
              font-weight: 600;
              font-style: normal
            }

            @font-face {
              font-family: Avenir;
              src: url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-DemiBoldItalic.woff) format("woff"), url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-DemiBoldItalic.ttf) format("truetype");
              font-weight: 600;
              font-style: italic
            }

            @font-face {
              font-family: Avenir;
              src: url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-Heavy.woff) format("woff"), url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-Heavy.ttf) format("truetype");
              font-weight: 800;
              font-style: normal
            }

            @font-face {
              font-family: Avenir;
              src: url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-HeavyItalic.woff) format("woff"), url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-HeavyItalic.ttf) format("truetype");
              font-weight: 800;
              font-style: italic
            }

            @font-face {
              font-family: Avenir;
              src: url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-Medium.woff) format("woff"), url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-Medium.ttf) format("truetype");
              font-weight: 500;
              font-style: normal
            }

            @font-face {
              font-family: Avenir;
              src: url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-MediumItalic.woff) format("woff"), url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-MediumItalic.ttf) format("truetype");
              font-weight: 500;
              font-style: italic
            }

            @font-face {
              font-family: Avenir;
              src: url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-Regular.woff) format("woff"), url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-Regular.ttf) format("truetype");
              font-weight: 400;
              font-style: normal
            }

            @font-face {
              font-family: Avenir;
              src: url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-Italic.woff) format("woff") url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-Italic.ttf) format("truetype");
              font-weight: 400;
              font-style: italic
            }

            @font-face {
              font-family: Avenir;
              src: url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-UltraLight.woff) format("woff"), url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-UltraLight.ttf) format("truetype");
              font-weight: 100;
              font-style: normal
            }

            @font-face {
              font-family: Avenir;
              src: url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-UltraLightItalic.woff) format("woff"), url(https://d2slCw3kip6qmk.cloudfront.net/marketing/press/fonts/AvenirNext-UltraLightItalic.ttf) format("truetype");
              font-weight: 100;
              font-style: italic
            }

            body {
              font-family: Avenir, Helvetica, Arial, sans-serif;
              background: #E8E9EA
            }

            .main-navigation {
              background: #fff;
              height: 60px;
              position: relative;
              z-index: 100;
              transition: all 250ms linear;
              -webkit-box-shadow: 0 -2px 50px -8px rgba(0, 0, 0, .15);
              -moz-box-shadow: 0 -2px 50px -8px rgba(0, 0, 0, .15);
              box-shadow: 0 -2px 50px -8px rgba(0, 0, 0, .15)
            }

            .main-navigation.scrolled {
              height: 60px
            }

            .main-navigation .logo img {
              width: 100%;
              max-width: 175px;
              transition: all 250ms linear
            }

            .main-content .image-link {
                display: block;
                position: relative;
            }

            .discuss,
            .main-content {
              background: #fff;
              padding-bottom: 2em;
              margin-bottom: 2em
            }

            .main-content {
            	padding: 0 4rem 3rem 2.25rem;
                position: relative;
            }

            main aside section {
                padding: 3.5rem 4rem 3rem 2.25rem;
            }

            .main-content .image-link img,
            .header-image {
                margin-left: -2.25rem;
                max-width: calc(100% + 6.25rem);
            }

            h1,
            h2,
            h3,
            h4,
            h5 {
              color: #3D4752;
              font-weight: 600;
              font-family: Avenir;
              font-size: 2rem;
      	      margin: 2rem 0;
              line-height: 1.2;
            }

            .popular-now h4,
            .about-lucidchart h4,
            .categories h4,
            .subscribe-to-blog h4,
            main aside h4 {
                margin: 0;
                margin-bottom: 2rem;
            }

            main p {
                hyphens: auto;
            }

            .discuss p a,
            .main-article .article a,
            .main-content p a,
            aside p a {
              color: #3D4752;
              box-shadow: inset 0 -8px 0 #FCDCC8;
              -webkit-transition: background .15s cubic-bezier(.33, .66, .66, 1);
              transition: background .15s cubic-bezier(.33, .66, .66, 1)
            }

            .discuss p a:hover,
            .main-article .article a:hover,
            .main-content .posted-by a:hover,
            .main-content p a:hover,
            aside p a:hover {
              background: #FCDCC8;
            }

            .divider,
            a.feed-icon,
            a.orange-btn {
              background: rgba(247, 141, 30, 1);
              display: inline-block;
            }

            .posted-by {
                text-align: left;
            	font-size: .9rem;
            	margin-top: -3rem;
            	margin-bottom: 2rem;
            }

            .posted-by a {
              color: #F78D1E;
            }

            .posted-by a:hover {
              color: #E27B1E
            }

            .divider {
              background: rgba(61, 71, 82, .5);
              width: 100%;
              height: 1px;
              margin: 1em 0 2em
            }

            .article-wrapper {
                display: flex;
                margin-top: 3rem;
            }

            a {
            	color: #3D4752;
            	text-decoration: none;
            	line-height: inherit;
            	cursor: pointer
            }

            a:focus,a:hover {
            	color: #3D4752;
            }

            a.feed-icon,
            a.orange-btn {
              color: #fff;
              padding: .4rem 1rem;
              border-radius: 4px;
              font-weight: 500;
              border: 3px solid rgba(247, 141, 30, 1);
              box-shadow: none;
            }

            .share span {
              font-weight: 600
            }

            a.feed-icon:hover,
            a.orange-btn:hover {
              color: rgba(247, 141, 30, 1);
              background: rgba(247, 141, 30, 0)
            }

            a.feed-icon {
              margin-bottom: 1.5rem
            }

            .author-bio-label {
              font-weight: 700;
            }

            .social-and-read {
              margin-top: 1rem;
              padding: .5rem 0;
              text-align: left
            }

            .pager ul {
              text-align: center
            }

            .social-and-read .addtoany_list,
            .social-and-read .share,
            .social-and-read span:first-of-type {
              display: inline-block
            }

            .social-and-read .share {
              float: left;
              margin-bottom: 15px
            }

            .share span {
              margin-right: 15px
            }

            .article-right {
              padding-right: 0;
              padding-left: 1rem;
              position: relative;
            }

            .read-more {
                font-weight: 500;
            	display: inline-block;
            	color: #f78d1e;
            }

            .article-right img {
              margin-bottom: 1rem
            }

            .article-date span {
              display: block;
              font-size: 1.2em;
              color: #3D4752;
            }

            .article-date {
                position: relative;
                padding-left: 1rem;
                line-height: 1.2;
                font-weight: 500;
            }

            .article-date::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                width: 1px;
                background: rgba(61, 71, 82, 0.5);
            }

            .article-date .day {
            	font-size: 3rem;
            	font-weight: 400;
            }

            .about-lucidchart,
            .categories,
            .popular-now,
            .related-articles,
            .subscribe-to-blog,
            aside section {
              background: #fff;
              margin-bottom: 2em;
            }

            .popular-now-featured {
            	margin-bottom: 2rem;
            }

            .views-row:not(:last-child) .popular-now-link {
            	margin-bottom: 2rem;
            	display: block;
            }

            .popular-now-link.featured {
            	margin-top: -1rem;
            }

            .views-row:last-child .sidebar-divider {
            	display: none;
            }

            main a {
              color: #3D4752;
            }

            .about-lucidchart *:not(p) a:hover,
            .categories *:not(p) a:hover,
            .popular-now *:not(p) a:hover,
            .related-articles *:not(p) a:hover,
            .subscribe-to-blog *:not(p) a:hover {
              color: #F78D1E;
            }

            .about-lucidchart .divider,
            .categories .divider,
            .subscribe-to-blog .divider {
              margin: 1em 0
            }

            .sidebar-divider {
                width: 100%;
            	height: 1px;
            	background: rgba(61, 71, 82, .5);
            	margin-bottom: 2rem;
            	display: block;
            }

            .about-lucidchart {
              background: #fff;
            }

            .categories ul {
              list-style: none;
              margin: 0;
              padding: 0
            }

            main, main p {
              font-size: 1.24rem;
              color: #3d4752;
              line-height: 1.5;
              padding-left: 0;
              padding-right: 0;
              margin-bottom: 1rem;
            }

            .article,
            .main-article .article {
              font-size: 1.24rem;
              line-height: 1.7;
              color: #212C35
            }

            .main-article .article .a2a_kit.a2a_kit_size_32.addtoany_list {
              display: none
            }

            h2 {
              font-size: 2.1rem
            }

            .pager ul {
              list-style: none;
              width: 100%;
              background: #fff;
              margin: 0;
            }

            li.pager__item {
              display: inline-block;
              padding: .5rem
            }

            li.pager__item.is-active a {
              font-weight: 600;
            }

            .pager a:hover {
            	color: #f78d1e;
            }

            .article {
              background: #fff;
            }

            .admin-tools ul {
              margin: 0;
              list-style: none
            }

            .admin-tools ul li {
              background: #f90;
              display: inline-block;
              padding: .9rem 1.2rem
            }

            .admin-tools ul li a {
              color: #fff
            }

            .breadcrumb span:not(:first-child):before {
              content: "/ ";
              margin-right: 5px
            }

            .breadcrumb span {
              text-transform: capitalize;
              margin-right: 5px
            }

            .breadcrumb span a {
              color: #F78D1E;
              transition: all 250ms linear
            }

            .breadcrumb span a:hover {
              background: #FCDCC8
            }

            nav.breadcrumb {
              margin-top: 1.2rem
            }

            img.align-left {
               margin-right: 20px;
            }
            .views-row .main-content h2,
            .main-article h1 {
            	font-size: 2rem;
                margin: 0 0 3.5rem;
            }
            .main-content h2 {
                font-size: 2rem;
            }
            .main-content h3 {
            	font-size: 1.6rem;
            }
            .main-content h4 {
            	font-size: 1.4rem;
            }
            /* nav dropdown */
            nav.wrapper .dropdown ul {
            	position: relative;
            	top: 0;
            	left: 0;
            	padding-top: 10px;
            	padding-bottom: 10px;
            	background: rgba(32, 44, 53, 0.97);
            	color: #ffffff;
            	display: inline-block;
            	white-space: nowrap;
            	border-radius: 3px;
            }

            nav.wrapper .main-links .dropdown li {
                    display: block;
            	text-align: left;
            	padding: 12px 24px;
            	padding-right: 0;
            	line-height: 1.2;
            	font-size: 16px;
            	font-weight: 500;
            }

            div.dropdown-container {
            	position: absolute;
            	top: 50px;
            	width: 100%;
            }

            nav.wrapper .main-links .dropdown li:hover {
            	background: rgba(61, 71, 82, 0.97);
            	cursor: pointer;
            }

            li.dropdown {
            	position: relative;
            }
            nav.wrapper .main-links .dropdown-ul a {
            	color: #fff;
            }
            nav.wrapper .main-links .dropdown-ul a:hover {
            	background: inherit;
            	color: inherit;
            }
            li.dropdown.active .dropdown-container {
            	display: block;
            }

            li.dropdown .dropdown-container {
            	display: none;
            }
            .dropdown.active .dropdown-container::before {
            	width: 0;
            	height: 0;
            	content: '';
            	z-index: 2;
            	-webkit-transform: rotate(360deg);
            	transform: rotate(360deg);
            	border-bottom: 18px solid rgba(32, 44, 53, 0.97);
            	border-left: 22px solid transparent;
            	border-right: 22px solid transparent;
            	position: absolute;
            	top: -15px;
            	margin-left: 20%;
            }
            /* /nav dropdown */

            #block-tabs {
              background: #fff;
              padding: 1.2rem;
              margin-bottom: 1.2rem
            }

            #block-tabs h2 {
              font-family: Avenir;
              font-weight: 500;
              color: #3D4752;
              font-size: 1.5625rem
            }

            #block-tabs ul {
              list-style: none;
              margin: 0
            }

            #block-tabs li {
              margin-bottom: 1rem
            }

            #block-tabs ul li a {
              display: inline-block;
              background: rgba(247, 141, 30, 1);
              color: #fff;
              padding: .4rem 1rem;
              border-radius: 4px;
              font-weight: 500;
              border: 3px solid rgba(247, 141, 30, 1);
              box-shadow: none;
              transition: all 250ms linear
            }

            #block-tabs ul li a:hover {
              color: rgba(247, 141, 30, 1);
              background: rgba(247, 141, 30, 0)
            }

            .search-icon {
              height: 20px
            }

            .search {
              position: fixed;
              background-color: rgba(0, 0, 0, .2);
              height: 100%;
              overflow: hidden;
              margin: auto;
              bottom: 0;
              z-index: 999
            }

            .post-info {
              margin-top: 3rem;
            }

            .hs_submit {
                margin-top: 1rem;
            }

            @media only screen and (min-width:900px) {
              .social-and-read {
                  text-align: right
              }
              .main-navigation {
                  background: #fff;
                  height: 115px;
                  position: fixed;
                  width: 100%;
                  top: 0;
                  right: 0;
                  left: 0;
                  z-index: 100;
                  transition: all 250ms linear;
                  -webkit-box-shadow: 0 -2px 50px -8px rgba(0, 0, 0, .15);
                  -moz-box-shadow: 0 -2px 50px -8px rgba(0, 0, 0, .15);
                  box-shadow: 0 -2px 50px -8px rgba(0, 0, 0, .15)
              }
              .main-navigation .logo {
                  position: relative;
                  top: 50%;
                  transform: translateY(-50%);
                  margin-top: 55px;
                  transition: all 250ms linear
              }
              main.content-container {
                  margin-top: 9.2rem;
                  margin-bottom: 2rem;
              }
              .main-navigation.scrolled .logo {
                  margin-top: 28px
              }
            }
            /* old nav styles */
            .nav-search {
                height: 39px
            }

            .nav-search>form {
                position: relative;
                width: inherit;
                z-index: 510
            }

            .nav-search input[type=text]:focus,
            .nav-search:hover input[type=text] {
                padding: 15px 10px;
                transition: all .3s ease .1s;
                width: 120px;
                margin: 0
            }

            .nav-search input[type=submit] {
                background: url(//d2slcw3kip6qmk.cloudfront.net/ux-assets/SVG/search.svg) center center no-repeat;
                border-radius: 0 3px 3px 0;
                cursor: pointer;
                display: block;
                float: left;
                padding: 0 25px;
                transition: all .3s ease;
                border: none;
                height: 39px;
                background-size: contain;
                transform: scale(0.6);
            }

            .nav-search input:focus,
            .nav-search input[type=submit]:hover {
                background-color: #f2f2f2;
                outline: 0
            }

            .navBar {
                min-width: 100%
            }

            .logo {
                display: inline-block;
                margin: 1em 0
            }

            .wrapper {
                margin: 0 auto;
                max-width: 75em;
                height: 0
            }

            nav.wrapper ul {
                list-style-type: none;
                margin: 0;
                display: block;
                opacity: 0;
                text-align: center;
                transition: all 250ms ease;
                width: 100%;
                visibility: hidden
            }

            nav.wrapper li {
                display: block;
                font-size: 1.5em;
                padding: .75em 0;
                background: #3D4752;
                border-bottom: 1px solid #2F363E
            }

            nav #menu-toggle:checked~ul {
                opacity: 1;
                height: 100%;
                visibility: visible;
                margin-top: 3px
            }

            nav.wrapper .label-toggle {
                background: url(//d2slcw3kip6qmk.cloudfront.net/marketing/blogs/chart/images/menu.svg) no-repeat;
                cursor: pointer;
                display: block;
                float: right;
                height: 35px;
                margin-top: 1em;
                width: 35px;
            }

            nav .wrapper {
                display: block
            }

            .main-links a:hover {
                color: #AFAFAF
            }

            .nav-search,
            nav.wrapper #menu-toggle {
                display: none
            }

            @media only screen and (min-width:900px) {
                nav.wrapper .label-toggle {
                    display: none
                }
                .nav-search {
                    display: block
                }
                nav.wrapper ul {
                    display: flex;
                    justify-content: space-between;
                    margin: 0;
                    visibility: visible;
                    opacity: 1;
                    width: auto
                }
                nav.wrapper li {
                    display: inline-block;
                    padding: 0;
                    background: 0 0;
                    border-bottom: none
                }
                nav .wrapper {
                    align-items: center;
                    display: flex;
                    justify-content: space-between;
                    height: auto
                }
                nav.wrapper .main-links {
                    top: 50%;
                    transform: translateY(-50%);
                    margin-top: 55px;
                    transition: all 250ms linear;
                    background: 0 0;
                    list-style: none
                }
                .main-navigation.scrolled .main-links,
                .main-navigation.scrolled nav #menu-toggle:checked~ul {
                    margin-top: 25px
                }
                nav.wrapper .main-links li {
                    display: inline-block;
                    font-size: 1.3rem;
                    margin-right: 0
                }
                nav.wrapper .main-links a {
                    color: #3D4752
                }
                nav.wrapper .main-links li:last-child {
                    margin-right: 0
                }
                nav #menu-toggle:checked~ul {
                    opacity: 1;
                    height: auto;
                    visibility: visible;
                    margin-top: 55px
                }
                .msearch {
                    display: none
                }
            }

            /* end of old nav styles */

            /* nav styles */
            .nav-search {
				height: 39px
			}

			.nav-search>form {
				position: relative;
				width: inherit;
				z-index: 510
			}

			.nav-search input[type=text] {
				background: 0 0;
				color: #999;
				display: block;
				float: left;
				font-weight: 700;
				line-height: 24px;
				padding: 15px 0;
				text-shadow: none;
				box-shadow: none;
				border: none;
				transition: all .3s ease 1s;
				width: 0;
				border-bottom: 2px solid #f2f2f2
			}

			.nav-search input[type=text]:focus,.nav-search:hover input[type=text] {
				padding: 15px 10px;
				transition: all .3s ease .1s;
				width: 120px;
				margin: 0
			}

			.nav-search input:focus,.nav-search input[type=submit]:hover {
				background-color: #f2f2f2;
				outline: 0
			}

			.wrapper {
				margin: 0 auto;
				max-width: 75em;
				height: 0
			}

			nav.wrapper ul {
				list-style-type: none;
				margin: 0;
				display: block;
				opacity: 0;
				text-align: center;
				transition: all 250ms ease;
				width: 100%;
				visibility: hidden
			}

			nav.wrapper li {
				display: block;
				font-size: 1.5em;
				padding: .75em 0;
				background: #3D4752;
				border-bottom: 1px solid #2F363E
			}

			nav #menu-toggle:checked~ul {
				opacity: 1;
				height: 100%;
				visibility: visible;
				margin-top: 3px
			}

			nav.wrapper .label-toggle {
				background: url(//d2slcw3kip6qmk.cloudfront.net/marketing/blogs/chart/images/menu.svg) no-repeat;
				cursor: pointer;
				display: block;
				float: right;
				height: 35px;
				margin-top: 1em;
				width: 35px
			}

			nav .wrapper {
				display: block
			}

			nav.wrapper ul a {
				text-decoration: none;
			}

			.main-links a:hover {
				color: #AFAFAF
			}

			.nav-search,nav.wrapper #menu-toggle {
				display: none
			}

			@media only screen and (min-width: 900px) {
				nav.wrapper .label-toggle {
					display:none
				}

				.nav-search {
					display: block
				}

				nav.wrapper ul {
					display: flex;
					justify-content: space-between;
					margin: 0;
					visibility: visible;
					opacity: 1;
					width: auto
				}

				nav.wrapper li {
					display: inline-block;
					padding: 0;
					background: 0 0;
					border-bottom: none
				}

				nav .wrapper {
					align-items: center;
					display: flex;
					justify-content: space-between;
					height: auto
				}

				nav.wrapper .main-links {
					top: 50%;
					transform: translateY(-50%);
					margin-top: 55px;
					transition: all 250ms linear;
					background: 0 0;
					list-style: none
				}

				.main-navigation.scrolled .main-links,.main-navigation.scrolled nav #menu-toggle:checked~ul {
					margin-top: 25px
				}

				nav.wrapper .main-links li {
					display: inline-block;
					font-size: 1.3rem;
					margin-right: 3rem;
				}

				nav.wrapper .main-links a {
					color: #3D4752
				}

				nav.wrapper .main-links a:hover {
					color: #f78d1e
				}

				nav.wrapper .main-links li:last-child {
					margin-right: 0
				}

				nav #menu-toggle:checked~ul {
					opacity: 1;
					height: auto;
					visibility: visible;
					margin-top: 55px
				}

				.msearch {
					display: none
				}
			}
            /* end of nav styles */

            .nav-search {
            height: 39px
        }

        .nav-search>form {
            position: relative;
            width: inherit;
            z-index: 510
        }

        .nav-search input[type=text] {
            background: 0 0;
            color: #999;
            display: block;
            float: left;
            font-weight: 700;
            line-height: 24px;
            padding: 15px 0;
            text-shadow: none;
            box-shadow: none;
            border: none;
            transition: all .3s ease 1s;
            width: 0;
            border-bottom: 2px solid #f2f2f2
        }

        .nav-search input[type=text]:focus,
        .nav-search:hover input[type=text] {
            padding: 15px 10px;
            transition: all .3s ease .1s;
            width: 120px;
            margin: 0
        }

        .nav-search input:focus,
        .nav-search input[type=submit]:hover {
            background-color: #f2f2f2;
            outline: 0
        }

        .navBar {
            min-width: 100%
        }

        .logo {
            display: inline-block;
            margin: 1em 0
        }

        .wrapper {
            margin: 0 auto;
            max-width: 75em;
            height: 0
        }

        nav.wrapper ul {
            list-style-type: none;
            margin: 0;
            display: block;
            opacity: 0;
            text-align: center;
            transition: all 250ms ease;
            width: 100%;
            visibility: hidden
        }

        nav.wrapper li {
            display: block;
            font-size: 1.5em;
            padding: .75em 0;
            background: #3D4752;
            border-bottom: 1px solid #2F363E
        }

        nav #menu-toggle:checked~ul {
            opacity: 1;
            height: 100%;
            visibility: visible;
            margin-top: 3px
        }

        nav.wrapper .label-toggle {
            background: url(//d2slcw3kip6qmk.cloudfront.net/marketing/blogs/chart/images/menu.svg) no-repeat;
            cursor: pointer;
            display: block;
            float: right;
            height: 35px;
            margin-top: 1em;
            width: 35px
        }

        nav .wrapper {
            display: block
        }

        .main-links a:hover {
            color: #AFAFAF
        }

        .nav-search,
        nav.wrapper #menu-toggle {
            display: none
        }

        @media only screen and (min-width:900px) {
            nav.wrapper .label-toggle {
                display: none
            }
            .nav-search {
                display: block
            }
            nav.wrapper ul {
                display: flex;
                justify-content: space-between;
                margin: 0;
                visibility: visible;
                opacity: 1;
                width: auto
            }
            nav.wrapper li {
                display: inline-block;
                padding: 0;
                background: 0 0;
                border-bottom: none
            }
            nav .wrapper {
                align-items: center;
                display: flex;
                justify-content: space-between;
                height: auto
            }
            nav.wrapper .main-links {
                top: 50%;
                transform: translateY(-50%);
                margin-top: 55px;
                transition: all 250ms linear;
                background: 0 0;
                list-style: none
            }
            .msearch {
                display: none
            }
        }