/* ===== Start Large Desktops and laptops
--------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1200px) and (max-width: 1370px) and (min-height: 500px) and (max-height: 700px) {
	.container {
		max-width: 800px;
	}

	.intro-text {
	    padding-top: 60px;
	}

	.intro-text span {
	    margin: 30px auto 50px;
	}

	.nav-content {
	    width: 320px;
	    padding-right: 30px;
	}

	.project-inner-top figure {
	    width: calc(100% - 440px);
	}

	.project-name {
		width: 400px;
	}

	.navigation-slide {
	    width: calc((100% - 800px) / 2 + 500px) !important;
	}
}
/* ===== End Large Desktops and laptops
--------------------------------------------------------------------------------------------------*/

/* ===== Start Large tabs
--------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1024px) and (max-width: 1260px) {
	.container {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.menu-active .menu-toggle {
		top: 20px;
	}

	#header {
		padding: 20px 0px;
	}

	.navigation-slide {
		width: 500px;
	    padding-top: 13px;
	}

	.nav-content {
	    width: 320px;
	    padding-right: 30px;
	}

	.main-nav li a,
	.main-title {
	    font-size: 32px;
	    line-height: 50px;
	}

	.search-nav {
	    margin: 35px 0px;
	}

	.search-nav input,
	.search-nav button {
		height: 40px;
	}

	.menu-info h4 {
	    font-size: 20px;
    	line-height: 20px;
	}

	.menu-info p {
		margin: 15px 0px;
		font-size: 14px;
	}

	.home-section {
	    min-height: calc(100% - 80px);
	}

	.intro-text {
	    padding-top: 100px;
	    font-size: 40px;
	}

	.intro-text span {
	    margin: 30px auto 60px;
        padding: 10px 13px;
	}

	.main-cat-list li a {
		padding: 25px 0px;
	}

	.hub-cat-list li,
	.project-list ul li {
	    width: calc(100% / 3 - 20px);
	    margin-right: 30px;
	    margin-bottom: 40px;
	}

	.myaccount-header {
	    margin: 30px 0px;
	}

	.main-title {
		margin: 30px 0px;
	}

	.project-name h1,
	.step-title h2 {
		font-size: 32px;
		line-height: 42px;
	}

	.project-inner-top {
	    margin: 30px 0px;
	}

	.step-title {
	    margin: 30px 0px;
	}

	.default-text p,
	.default-text ul li,
	.default-text ol li {
		line-height: 24px;
    	font-size: 14px;
	}

	.default-text h2 {
		font-size: 22px;
	}

	.default-text h3 {
		font-size: 20px;
	}

	.default-text h4 {
		font-size: 18px;
	}

	.default-text ul li:after {
		top: 11px;
	}
}
/* ===== End Large tabs
--------------------------------------------------------------------------------------------------*/

/* ===== Start small tabs
--------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 1023px) {
	.container {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.menu-active .menu-toggle {
		top: 20px;
	}

	#header {
		padding: 20px 0px;
	}

	.navigation-slide {
		width: 500px;
	    padding-top: 15px;
	}

	.nav-content {
	    width: 320px;
	    padding-right: 30px;
	}

	.main-nav li a,
	.main-title {
	    font-size: 32px;
	    line-height: 50px;
	}

	.search-nav {
	    margin: 35px 0px;
	}

	.search-nav input,
	.search-nav button {
		height: 40px;
	}

	.menu-info h4 {
	    font-size: 20px;
    	line-height: 20px;
	}

	.menu-info p {
		margin: 15px 0px;
		font-size: 14px;
	}

	.main-cat-list li a {
		width: 140px;
	}

	.home-section {
	    min-height: calc(100% - 80px);
	}

	.intro-text {
	    padding-top: 100px;
	    font-size: 40px;
	}

	.intro-text span {
	    margin: 30px auto 60px;
        padding: 10px 13px;
	}

	.main-cat-list li a {
		padding: 25px 0px;
	}

	.hub-cat-list li,
	.project-list ul li {
	    width: calc(100% / 2 - 15px / 2);
	    margin-right: 15px;
	    margin-bottom: 40px;
	}

	.hub-cat-list li:nth-child(3n),
	.project-list ul li:nth-child(3n) {
		margin-right: 15px;
	}

	.hub-cat-list li:nth-child(2n),
	.project-list ul li:nth-child(2n) {
		margin-right: 0px;
	}

	.myaccount-header {
	    margin: 30px 0px;
	}

	.main-title {
		margin: 30px 0px;
	}

	.project-name h1,
	.step-title h2 {
		font-size: 28px;
		line-height: 36px;
	}

	.project-inner-top {
	    margin: 30px 0px;
	}

	.step-title {
	    margin: 30px 0px;
	}

	.default-text p,
	.default-text ul li,
	.default-text ol li {
		line-height: 24px;
    	font-size: 14px;
	}

	.default-text h2 {
		font-size: 22px;
	}

	.default-text h3 {
		font-size: 20px;
	}

	.default-text h4 {
		font-size: 18px;
	}

	.default-text ul li:after {
		top: 11px;
	}

	.project-user-list ul li figure {
		width: 240px;
	}

	.project-user-list ul li h2 {
		font-size: 20px;
    	line-height: 24px;
	}

	.project-name {
		width: 400px;
	}

	.project-inner-top figure {
	    float: left;
	    width: calc(100% - 420px);
	}

	.tab-slider {
	    text-align: center;
	    padding: 0px 100px;
	}

	.services-list ul li {
		width: 100%;
	}
}
/* ===== End small tabs
--------------------------------------------------------------------------------------------------*/

/* ===== Start mobile
--------------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 0px) and (max-width: 767px) {
	.container {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	#header {
		padding: 10px 0px;
	}

	.menu-toggle small.menu-text {
		display: none;
	}

	.menu-active .menu-toggle {
		top: 10px;
	}

	.navigation-slide {
		width: 100%;
		padding-top: 10px;
	}

	.open-login {
	    font-size: 0px;
	    line-height: 0px;
	    min-width: 40px;
	    border: 0px;
	    background: url('../img/bgi/account.svg') no-repeat center center;
	    vertical-align: top;
	}

	.logged-in {
		font-size: 0px;
	    line-height: 0px;
	    min-width: 40px;
	    border: 0px;
	    background: url('../img/bgi/works.svg') no-repeat center center;
	    vertical-align: top;
	}

	.logged-in:after {
		display: none;
	}

	.open-login:after {
		display: none;
	}

	.nav-content {
	    width: calc(100% - 70px);
	    padding-right: 10px;
	}

	.main-nav li a,
	.main-title {
	    font-size: 32px;
	    line-height: 40px;
	}

	.search-nav {
	    margin: 35px 0px;
	}

	.search-nav input,
	.search-nav button {
		height: 40px;
	}

	.menu-info h4 {
	    font-size: 20px;
    	line-height: 20px;
	}

	.menu-info p {
		margin: 15px 0px;
		font-size: 14px;
	}

	.logo-img {
		max-width: 100px;
	}

	.intro-text {
	    padding-top: 60px;
	    font-size: 24px;
	}

	.home-section {
        min-height: calc(100vh - 60px);
	    padding-bottom: 70px;
	    -webkit-box-sizing: border-box;
	    box-sizing: border-box;
		background-attachment: fixed !important;
	}

	.intro-text span {
	    padding: 5px 13px;
	    margin: 30px auto 30px;
	}

	.main-cat-list {
		flex-wrap: wrap;
	}

	.main-cat-list li a {
		width: 90px;
		padding: 10px 0px;
	}

	.main-cat-list li span {
	    display: block;
	    font-size: 12px;
	    line-height: 16px;
	}

	#footer {
		padding: 10px 0px;
		text-align: center;
	}

	.home-wrapper {
		min-height: 100%;
		height: auto;
	}

	.copy,
	.footer-menu {
		width: 100%;
	}

	.footer-menu li {
		margin: 0px 5px;
		padding: 0px;
	}

	.footer-menu li {
		float: none;
		display: inline-block;
	}

	.footer-menu li:after {
		display: none;
	}

	.footer-menu li a {
		font-size: 10px;
	}

	.main-title {
	    margin: 10px 0px;
	}

	.hub-cat-list li,
	.project-list ul li {
		width: 100%;
		margin-right: 0px;
		margin-bottom: 30px;
	}

	.subcat-navigation li {
		margin: 0px 5px;
	}

	.subcat-navigation li a {
		font-size: 10px;
	    line-height: 20px;
	}

	.subcat-navigation {
	    margin: 0px 0px 15px;
	}

	li .project-title {
	    padding: 10px 0px;
	}

	.hub-cat-list li a figure, .project-list ul li a figure {
		margin-bottom: 10px;
	}

	.hub-cat-list li .category-name {
		padding-bottom: 10px;
	}

	.myaccount-header {
		margin: 0px;
	    padding: 60px 0px 10px;
	}

	.logout-btn {
		top: 15px;
		right: 50%;
		-webkit-transform: translateX(50%);
		transform: translateX(50%);
	}

	.project-user-list ul li figure {
	    width: 100%;
	}

	.user-project-name {
	    position: relative;
	    width: 100%;
	    right: 0;
	    top: 0;
	    margin: 10px 0px;
	    text-align: center;
	    -webkit-transform: translateY(0%);
	    transform: translateY(0%);
	}

	.project-user-list ul li h2 {
	    margin: 10px 0px;
	    font-size: 20px;
	    line-height: 26px;
	}

	.user-project-name .project-sku-share .sku {
		width: 100%;
		font-size: 14px;
	}

	.user-project-name .project-meta {
		text-align: center;
	}

	.user-project-name .project-sku-share {
	    padding-top: 10px;
	    border-top: 1px solid #000;
	}

	.project-user-list {
	    margin: 0 auto 40px;
	}

	.project-inner-top figure {
	    width: 100%;
	}

	.project-name {
	    position: relative;
	    width: 100%;
	    right: 0;
	    top: 0;
	    margin: 10px 0px;
	    text-align: center;
	    -webkit-transform: translateY(0%);
	    transform: translateY(0%);
	}

	.project-name h1,
	.step-title h2,
	.login-title {
	    font-size: 32px;
	    line-height: 40px;
	}

	.tab-slider {
	    padding: 0px 35px;
	}

	.project-inner-top {
	    margin: 20px 0px 10px;
	}

	.project-basic-info .project-sku-share .sku {
		font-size: 14px;
	}

	.review-btn {
		font-size: 10px;
	}

	.project-sku-share {
	    padding-top: 10px;
	    border-top: 1px solid #000;
	}

	.step-info span,
	.step-info {
		font-size: 10px;
		line-height: 20px;
	}

	.step-title {
	    margin: 20px 0px;
	}

	.step-title h2 {
	    margin: 0px 0px 0px;
	}

	.tab-title {
		white-space: nowrap;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    font-size: 10px;
		width: 110px !important;
	}

	.default-text p,
	.default-text ul li,
	.default-text ol li {
		line-height: 24px;
    	font-size: 14px;
	}

	.default-text h2 {
		font-size: 22px;
	    margin-top: 10px;
	}

	.default-text h3 {
		font-size: 20px;
	    margin-top: 10px;
	}

	.default-text h4 {
		font-size: 18px;
	    margin-top: 10px;
	}

	.default-text ul li:after {
		top: 11px;
	}

	.review-section {
	    margin-bottom: 40px;
	}

	.services-list ul li {
		width: 100%;
	}

	.services-list ul li h2 span {
		width: 60px;
		height: 40px;
		background-size: 40% !important;
	}

	.services-list ul li h2 {
	    padding: 8px 0px 8px 75px;
	    line-height: 24px;
	}

	.login-title {
		margin: 20px 0px;
	}

	.login-inner {
    	padding: 40px 20px;
    	height: 100%;
    	overflow: auto;
	}
}
/* ===== End mobile
--------------------------------------------------------------------------------------------------*/