.page-template-resources .rightContainer {
	background-color: #F4F4F4;
}

.page-template-resources .sidebarOff .rightContent {
	max-width: 100% !important;
}

.page-template-resources .category {
	/* Rectangle 3: */
	background: #FFFFFF;
	box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.09);
	margin-bottom: 50px;
}

.main-category>.category-title {
	font-weight: bold;
	font-size: 30px;
	color: #555555;
	letter-spacing: 0px;
	display: block;
	width: calc(99% - 50px);
	border-top: 2px dashed #E3E3E3;
	padding-top: 30px;
}



.main-category[data-index="0"] >.category-title {
	border-top: none !important;
	padding-top: 0 !important;
}

.category>header .category-description {
	/* A brief intro about : */
	font-size: 13px;
	color: #FFFFFF;
	letter-spacing: 0px;
	line-height: 22px;
	margin: 0;
	transition: all .25s cubic-bezier(0.645, 0.045, 0.355, 1.000);

}

.category .category-title {
	margin-bottom: 10px !important;
}

.category>header {
	background-color: #FF4949; /* #FC6C65; */
	padding: 30px;
	color: #fff;
}

.category.hidden {
	box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.09);
	border-radius: 1px;
	background-color: rgba(255, 255, 255, .7);
}

.category.hidden header:before {
	opacity: 0;
}

.category.hidden .category-title {
	/* Tutorials/Guides: */
	opacity: 0.6;
	color: #2D2D2D;
    transform: translate(0, -40px);
    /* padding-left: 0;
    margin-top: -56px;
    margin-bottom: 27px !important; */
}

.category.hidden .category-description {
	opacity: 0;
	height: 0;
}

.filter-row>input {
	display: none !important;
}
.filter-row>label {
	position: relative;
}
.filter-row>label:before {
	content: "";
	background: #FFFFFF;
	border: 1px solid #DBDBDB;
	border-radius: 1px;
	display: inline-block;
	width: 11px;
	height: 11px;
    margin-right: 5px;
    top: 1px;
    position: relative;
}

.filter-row>label:after {
	content: "";
	position: absolute;
	width: 13px;
	height: 13px;
	opacity: 0;
	background-image: url(../images/check.svg);
	background-position: center;
	background-repeat: no-repeat;
	transition: all .15s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    width: 13px;
    height: 13px;
    top: 1px;
    left: 2px;
    transform: scale(.9);
}

.filter-row>input:checked+label:after {
	opacity: 1;
	transform: scale(1);
}

.category.hidden .resources-list {
	height: 0;
	opacity: 0;
}

.category-show {
	display: none;
	opacity: 0;
	position: absolute;
	font-size: 14px;
	color: #FF4743;
	letter-spacing: 0px;
	line-height: 15px;
    top: 42px;
    right: 30px;
}

.category.hidden .category-show  {
	opacity: 1;
	display: block;
	position: absolute;
}

.category.hidden .category-title>small {
	color: #A4A4A4;
	letter-spacing: 0px;
}

.category.hidden .category-icon {
	transform: translate(-20px, 0);
	opacity: 0;
	height: 45px !important;
	margin-bottom: 0 !important;
}

.category.hidden header {
	background-color: transparent !important;
	height: 100px;
}
.category header {
    box-sizing: border-box;
	position: relative;
	transition: height .25s cubic-bezier(0.645, 0.045, 0.355, 1.000), background-color .1s;
}

.category header:before, .resources-sticky-header:before {
	transition: opacity .2s;
	z-index: 1;
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url(../images/overlay.png);
	background-position: center;
	background-repeat: no-repeat;
	opacity: .04;
	background-size: cover;
}

.resources-sticky-header {
	position: absolute;
	background-color: #FF4949;
	height: 80px;
	width: 100%;
    top: 0;
    z-index: 100;
    box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 0 3px rgba(0,0,0,.1);
    padding: 15px 20px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity .15s, transform .15s  cubic-bezier(0.645, 0.045, 0.355, 1.000), top .15s  cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transform: translate(0, -20px);
  	pointer-events: none;
  	white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
}

.resources-loaded .resources-sticky-header {
	position: fixed;
}

.stick-header .resources-sticky-header {
	opacity: 1;
	transform: translate(0, 0);
	position: fixed;
	pointer-events: auto;
}

.resources-sticky-header .category-icon, .resources-sticky-header .category-title {
	display: inline-block;
	vertical-align: middle;
}
.resources-sticky-header .category-icon {
	margin-right: 15px;
	transform: scale(.7);
}
.category header *, .resources-sticky-header * {
	position: relative;
	z-index: 10;
}

.resources-list {
	/* transition: height .3s cubic-bezier(0.645, 0.045, 0.355, 1.000), opacity .1s; */
}

.resources-list>.resource {
	padding: 25px 30px 30px;
	position: relative;
}

.resources-list>.resource:after {
	content: "";
	position: absolute;
	left: 30px;
	right: 30px;
	height: 1px;
	bottom: -1px;
	background-color: #EBEBEB;
	opacity: .7;
}	

.resource>.resource-title {
	font-weight: bold;
	font-size: 15px;
	color: #FF4743;
	letter-spacing: 0px;
	line-height: 1.5em;
	margin: 0 0 10px 0;
	position: relative;
}

.resource>.resource-content {
	font-size: 13px;
	color: #333333;
	letter-spacing: 0px;
	line-height: 22px;
}

.resource>.resource-content>.read {
	text-decoration: none;
	content: "";
	display: inline-block;
	width: 16px;
	height: 12px;
	background-image: url(../images/go-right.svg);
	background-size: 100%;
	background-repeat: no-repeat;
    margin-left: 4px;
    top: 3px;
    position: relative;
}

.category-title {
	/* Courses: */
	font-weight: bold !important;
	font-size: 24px;
	color: #FFFFFF;
	letter-spacing: 0px;
	transition: opacity .2s, color .2s, transform .2s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}


.category-title>small {
	margin-left: 3px;
	display: inline-block;
	font-weight: lighter;
	font-size: 24px;
	color: #FFFFFF;
	letter-spacing: 0px;
}

.category-icon {
	display: block;
	background-image: url(../images/icon-mobile.svg);
	width: 42px;
	height: 45px;
	margin-bottom: 10px;
	background-repeat: no-repeat;
	background-size: 100%;
	margin-left: 0;
	transition: all .25s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

[data-category="testing"] .category-icon, [data-category="courses"] .category-icon {
	background-image: url(../images/icon-rocket.svg);
    width: 42px;
    height: 58px;
    margin-left: 0;
    margin-bottom: 3px;
    margin-top: -5px;
    background-size: 74%;
}
[data-category="courses"] .category-icon {
	background-image: url(../images/icon-pencil.svg);
    height: 52px;
    margin-top: 0;
    margin-bottom: 3px;
}
[data-category="books"] .category-icon {
	background-image: url(../images/icon-books.svg);
    height: 52px;
    margin-top: 0;
    margin-bottom: 3px;
}
[data-category="podcasts"] .category-icon {
	background-image: url(../images/icon-mug.svg);
    height: 52px;
    margin-top: 0;
    margin-bottom: 3px;
    background-size: 91%;
}
[data-category="really-good-interviews"] .category-icon {
	background-image: url(../images/icon-talk.svg);
    height: 52px;
    margin-top: 0;
    margin-bottom: 3px;
    background-size: 100%;
}



.resource>.resource-content>a, .resource>.resource-title>a {
	color: #FF4949;
}

.page-title {
	font-weight: bold;
	font-size: 24px;
	color: #555555;
	letter-spacing: 0px;
	margin: 0;
	margin-bottom: 20px;
}

.page-desc {
	/* So we just added thi: */
	font-size: 18px;
	color: #555555;
	letter-spacing: 0px;
	margin: 0;
}

.main-header {
	margin-bottom: 50px;
	max-width: 1560px;
}

.header-content {
	/* Rectangle 3: */
	background: #FFFFFF;
	box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.09);
	margin-bottom: 20px;
}

.header-content, .list-nav {
	width: calc(99% - 50px);
}

.header-content .content-top {
	padding: 40px;
	position: relative;
}
.header-content .content-top:after {
	content: "";
	height: 1px;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #EBEBEB;
	opacity: .7;
	position: absolute;
}

.grid-item {
	box-sizing: border-box;
}

.grid-sizer, .grid-item { width: calc(33% - 50px); }

.list-filters {
	overflow: hidden;
	position: relative;
}

.main-category {
	max-width: 1560px;
}

.list-filters:after {
	content: "";
	position: absolute;
	left: 50%;
	width: 1px;
	top: 0;
	bottom: 0;
	background-color: #EBEBEB;
	opacity: .7;
	display: none;
}

.list-nav {
	margin-bottom: 50px;
	position: relative;
	font-family: Roboto-Regular;
	font-size: 14px;
	color: #555555;
	letter-spacing: 0px;
	line-height: 15px;
    margin-bottom: 30px;
    min-height: 24px;
}
.nav-showing {
	/* Rectangle 167: */
/*	background: #E4E4E4;
	border-radius: 50px;
	padding: 5px 8px 3px;*/
	display: inline-block;
	font-size: 17px;
}
.nav-center {
	position: absolute;
	left: 50%;
	transform: translate(-50%, 0);
}

.nav-left {
	float: left;

}

.filter-group {
	float: left;
	width: 33.3%;
}

.filter-row {
	margin-bottom: 5px;
	/* Tutorials/Guides: */
	font-size: 14px;
	color: #555555;
	letter-spacing: 0px;
}

.filter-title {
	/* Email Design: */
	font-size: 18px;
	color: #555555;
	letter-spacing: 0px;
	margin-bottom: 20px;
	font-weight: bold !important;
}

.filter-row>label {
	font-weight: lighter;
	font-family: Roboto-Regular;
	display: inline-block;
	font-size: 14px;
	color: #555555;
	letter-spacing: 0px;
	cursor: pointer;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 20px;
	box-sizing: border-box;
}

.filter-row>label:hover {
	color: #000;
}

.nav-right {
	position: absolute;
	right: 0;
	padding: 5px 8px 3px;
}

.list-filters {
	display: table;
	width: 100%;
}

.filters-col {
	box-sizing: border-box;
	/* float: left; */
	width: 100%;
	padding: 40px;
	margin-bottom: -1px;
    border-right: 1px solid #EBEBEB;
    display: table-cell;
}

.filters-col:last-child {
    border-right: 1px solid #EBEBEB;
}

.form-filters {
	display: table-row;
}

[data-size="2"] .filters-col {
	width: 50%;
}

[data-size="3"] .filters-col {
	width: 33.3%;
}

[data-size="4"] .filters-col {
	width: 25%;
}


.grid-item {
	transition: none !important;
}

.resource {
	position: relative;
}

.resource .icon-readme {
	display: none;
	position: absolute;
	border: 2px solid #2D2D2D;
	width: 34px;
	height: 34px;
	border-radius: 20px;
	left: -50px;
    background-color: #fff;
    top: 50%;
    transform: translate(0, -50%);
}

.resource .icon-readme:before {
	content: "";
	display: block;
	position: absolute;
	background-image: url(../images/icon-the-hand.svg);
	width: 34px;
	height: 34px;
	background-size: 100%;
	background-repeat: no-repeat;
    top: 7px;
    left: 8px;
}

.resource.read-me .icon-readme {
	display: block;
}

@media only screen and (min-width: 1400px) {
	.resource>.resource-title {
		font-size: 18px;
		line-height: 26px;
	}

	.resource>.resource-content {
		font-size: 15px;
		color: #555;
		line-height: 26px;
	}
}


@media only screen and (max-width: 1600px) {
	.header-content, .list-nav, .main-category>.category-title {
		width: calc(100%);
	}
	.grid-sizer, .grid-item { width: calc(50% - 25px); }

	.filter-group {
		width: 50%;
	}
}


@media only screen and (max-width: 1400px) {
	.header-content, .list-nav, .main-category>.category-title {
		width: calc(100%);
	}
	.grid-sizer, .grid-item { width: calc(50% - 25px); }

	.filter-group {
		width: 100%;
	}
}


@media only screen and (max-width: 900px) {
	.header-content, .list-nav, .main-category>.category-title {
		width: calc(100%);
	}
	.grid-sizer, .grid-item { width: calc(100%); }
}

@media only screen and (max-width: 700px) {
	.rightPadding {
		margin: 10px !important;
	}
	.filters-col, .header-content .content-top {
		padding: 15px;
	}
	.page-desc {
		font-size: 14px;
	}
	.grid-sizer, .grid-item { width: calc(50% - 25px); }
}

@media only screen and (max-width: 500px) {
	.header-content, .list-nav, .main-category>.category-title {
		width: calc(100%);
	}
	.main-category>.category-title {
	    margin-top: 20px;
	    padding-top: 30px;
	}
	.grid-sizer, .grid-item { width: calc(100%); }
	.grid-item {
		 margin-bottom: 20px !important;
	}
	.resources-sticky-header {
		width: 100% !important;
		left: 0 !important;
		right: auto !important;
	}
}