| /* content layout */ |
| .resource-widget.resource-flow-layout { |
| display: inline-block; |
| margin-right: -20px; |
| /* clearfix idiom */ } |
| .resource-widget.resource-flow-layout.col-1 { |
| width: 60px; } |
| .resource-widget.resource-flow-layout.col-2 { |
| width: 120px; } |
| .resource-widget.resource-flow-layout.col-3 { |
| width: 180px; } |
| .resource-widget.resource-flow-layout.col-4 { |
| width: 240px; } |
| .resource-widget.resource-flow-layout.col-5 { |
| width: 300px; } |
| .resource-widget.resource-flow-layout.col-6 { |
| width: 360px; } |
| .resource-widget.resource-flow-layout.col-7 { |
| width: 420px; } |
| .resource-widget.resource-flow-layout.col-8 { |
| width: 480px; } |
| .resource-widget.resource-flow-layout.col-9 { |
| width: 540px; } |
| .resource-widget.resource-flow-layout.col-10 { |
| width: 600px; } |
| .resource-widget.resource-flow-layout.col-11 { |
| width: 660px; } |
| .resource-widget.resource-flow-layout.col-12 { |
| width: 720px; } |
| .resource-widget.resource-flow-layout.col-13 { |
| width: 780px; } |
| .resource-widget.resource-flow-layout.col-14 { |
| width: 840px; } |
| .resource-widget.resource-flow-layout.col-15 { |
| width: 900px; } |
| .resource-widget.resource-flow-layout.col-16 { |
| width: 960px; } |
| .resource-widget.resource-flow-layout:after { |
| content: "."; |
| display: block; |
| height: 0; |
| clear: both; |
| visibility: hidden; } |
| * html .resource-widget.resource-flow-layout { |
| height: 1px; } |
| |
| .resource-card { |
| /* stuff that applies to all cards */ |
| display: -webkit-flex; |
| -webkit-transform: translateZ(0); |
| float: left; |
| position: relative; |
| margin-right: 20px; |
| margin-bottom: 20px; |
| background-color: #fff; |
| border-radius: 2px; |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); |
| opacity: 0.8; |
| overflow: hidden; |
| transition: 0.4s box-shadow ease, 0.4s opacity ease; |
| /* card templates */ |
| /* specific cards and customizations */ } |
| .resource-card .photo { |
| position: relative; |
| background-color: #eee; |
| background-size: cover; |
| background-repeat: no-repeat; |
| background-position: 50% 50%; } |
| .resource-card.nophoto .photo:after { |
| content: ''; |
| display: block; |
| position: absolute; |
| left: 20px; |
| top: 20px; |
| right: 20px; |
| bottom: 20px; |
| opacity: 0.2; |
| background-position: center center; |
| background-repeat: no-repeat; |
| background-size: contain; } |
| .resource-card .icon { |
| background-position: center center; |
| background-repeat: no-repeat; |
| background-size: contain; |
| opacity: 0; |
| transition: 0.4s ease; } |
| .resource-card:hover .icon { |
| opacity: 0.2; } |
| .resource-card:hover { |
| opacity: 1; |
| box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5); } |
| .resource-card.resource-card-youtube.nophoto .photo:after, .resource-card.resource-card-youtube .icon { |
| background-image: url(../images/card_video.png); } |
| .resource-card.resource-card-samples.nophoto .photo:after, .resource-card.resource-card-samples .icon { |
| background-image: url(../images/card_sample.png); } |
| .resource-card.resource-card-blog.nophoto .photo:after, .resource-card.resource-card-blog .icon { |
| background-image: url(../images/card_post.png); } |
| .resource-card.resource-card-training.nophoto .photo:after, .resource-card.resource-card-training .icon { |
| background-image: url(../images/card_training.png); } |
| .resource-card .resource-card-text { |
| color: #333333; } |
| .resource-card .title { |
| /*font-weight: 700;*/ |
| font-family: 'Roboto Condensed'; } |
| .resource-card .subtitle { |
| font-family: 'Roboto Condensed'; |
| text-transform: uppercase; |
| opacity: 0.3; } |
| .resource-card .abstract { |
| font-weight: 300; |
| font-family: 'Roboto'; } |
| .resource-card.resource-card-12x7 { |
| width: 700px; |
| height: 400px; |
| -webkit-flex-direction: column; } |
| .resource-card.resource-card-12x7 .photo { |
| -webkit-flex: 1 1 auto; |
| border-bottom: 1px solid #ddd; } |
| .resource-card.resource-card-12x7 .resource-card-text { |
| margin: 20px; |
| padding-right: 88px; } |
| .resource-card.resource-card-12x7 .icon { |
| position: absolute; |
| right: 20px; |
| bottom: 20px; |
| width: 48px; |
| height: 48px; } |
| .resource-card.resource-card-12x7 .title { |
| font-size: 36px; |
| line-height: 35px; |
| max-height: 70px; |
| text-overflow: ellipsis; |
| display: -webkit-box; |
| overflow: hidden; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; } |
| .resource-card.resource-card-12x7 .subtitle { |
| font-size: 18px; |
| line-height: 20px; |
| max-height: 20px; |
| text-overflow: ellipsis; |
| display: -webkit-box; |
| overflow: hidden; |
| -webkit-line-clamp: 1; |
| -webkit-box-orient: vertical; |
| max-height: 0; |
| margin-top: 0; |
| transition: 0.4s ease; } |
| .resource-card.resource-card-12x7:hover .subtitle { |
| margin-top: 10px; |
| max-height: 20px; } |
| .resource-card.resource-card-12x7 .abstract { |
| font-size: 18px; |
| margin-top: 0; |
| line-height: 25px; |
| max-height: 75px; |
| text-overflow: ellipsis; |
| display: -webkit-box; |
| overflow: hidden; |
| -webkit-line-clamp: 3; |
| -webkit-box-orient: vertical; |
| max-height: 0; |
| transition: 0.4s ease; } |
| .resource-card.resource-card-12x7:hover .abstract { |
| margin-top: 20px; |
| max-height: 75px; } |
| .resource-card.resource-card-8x6 { |
| width: 460px; |
| height: 340px; |
| -webkit-flex-direction: column; } |
| .resource-card.resource-card-8x6 .photo { |
| -webkit-flex: 1 1 auto; |
| border-bottom: 1px solid #ddd; } |
| .resource-card.resource-card-8x6 .resource-card-text { |
| margin: 20px; |
| padding-right: 88px; } |
| .resource-card.resource-card-8x6 .icon { |
| position: absolute; |
| right: 20px; |
| bottom: 20px; |
| width: 48px; |
| height: 48px; } |
| .resource-card.resource-card-8x6 .title { |
| font-size: 36px; |
| line-height: 35px; |
| max-height: 70px; |
| text-overflow: ellipsis; |
| display: -webkit-box; |
| overflow: hidden; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; } |
| .resource-card.resource-card-8x6 .subtitle { |
| font-size: 18px; |
| line-height: 20px; |
| max-height: 20px; |
| text-overflow: ellipsis; |
| display: -webkit-box; |
| overflow: hidden; |
| -webkit-line-clamp: 1; |
| -webkit-box-orient: vertical; |
| max-height: 0; |
| margin-top: 0; |
| transition: 0.4s ease; } |
| .resource-card.resource-card-8x6:hover .subtitle { |
| margin-top: 10px; |
| max-height: 20px; } |
| .resource-card.resource-card-8x6 .abstract { |
| font-size: 18px; |
| margin-top: 0; |
| line-height: 25px; |
| max-height: 75px; |
| text-overflow: ellipsis; |
| display: -webkit-box; |
| overflow: hidden; |
| -webkit-line-clamp: 3; |
| -webkit-box-orient: vertical; |
| max-height: 0; |
| transition: 0.4s ease; } |
| .resource-card.resource-card-8x6:hover .abstract { |
| margin-top: 20px; |
| max-height: 75px; } |
| .resource-card.resource-card-8x6 .icon { |
| width: 32px; |
| height: 32px; } |
| .resource-card.resource-card-8x6 .title { |
| font-size: 24px; |
| line-height: 25px; |
| max-height: 50px; |
| text-overflow: ellipsis; |
| display: -webkit-box; |
| overflow: hidden; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; } |
| .resource-card.resource-card-8x6 .abstract { |
| font-size: 16px; |
| margin-top: 10px; |
| line-height: 20px; |
| max-height: 60px; |
| text-overflow: ellipsis; |
| display: -webkit-box; |
| overflow: hidden; |
| -webkit-line-clamp: 3; |
| -webkit-box-orient: vertical; } |
| .resource-card.resource-card-8x6 .subtitle { |
| font-size: 16px; |
| line-height: 20px; |
| max-height: 20px; |
| text-overflow: ellipsis; |
| display: -webkit-box; |
| overflow: hidden; |
| -webkit-line-clamp: 1; |
| -webkit-box-orient: vertical; |
| max-height: 0; |
| margin-top: 0; |
| transition: 0.4s ease; } |
| .resource-card.resource-card-8x6:hover .subtitle { |
| margin-top: 10px; |
| max-height: 20px; } |
| .resource-card.resource-card-8x6 .abstract { |
| font-size: 16px; |
| margin-top: 0; |
| line-height: 20px; |
| max-height: 60px; |
| text-overflow: ellipsis; |
| display: -webkit-box; |
| overflow: hidden; |
| -webkit-line-clamp: 3; |
| -webkit-box-orient: vertical; |
| max-height: 0; |
| transition: 0.4s ease; } |
| .resource-card.resource-card-8x6:hover .abstract { |
| margin-top: 10px; |
| max-height: 60px; } |
| .resource-card.resource-card-6x4 { |
| width: 340px; |
| height: 220px; |
| -webkit-flex-direction: column; } |
| .resource-card.resource-card-6x4 .photo { |
| -webkit-flex: 1 1 auto; |
| border-bottom: 1px solid #ddd; } |
| .resource-card.resource-card-6x4 .resource-card-text { |
| margin: 10px; |
| padding-right: 26px; } |
| .resource-card.resource-card-6x4 .icon { |
| position: absolute; |
| right: 10px; |
| bottom: 10px; |
| width: 16px; |
| height: 16px; } |
| .resource-card.resource-card-6x4 .title { |
| font-size: 16px; |
| line-height: 20px; |
| max-height: 40px; |
| text-overflow: ellipsis; |
| display: -webkit-box; |
| overflow: hidden; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; } |
| .resource-card.resource-card-6x4 .subtitle { |
| font-size: 13px; |
| line-height: 15px; |
| max-height: 30px; |
| text-overflow: ellipsis; |
| display: -webkit-box; |
| overflow: hidden; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; |
| max-height: 0; |
| margin-top: 0; |
| transition: 0.4s ease; } |
| .resource-card.resource-card-6x4:hover .subtitle { |
| max-height: 30px; } |
| .resource-card.resource-card-6x4 .abstract { |
| display: none; } |
| .resource-card.resource-card-6x4 .abstract { |
| font-size: 13px; |
| margin-top: 0; |
| line-height: 15px; |
| max-height: 30px; |
| text-overflow: ellipsis; |
| display: -webkit-box; |
| overflow: hidden; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; |
| max-height: 0; |
| display: block; |
| transition: 0.4s ease; } |
| .resource-card.resource-card-6x4:hover .abstract { |
| margin-top: 10px; |
| max-height: 30px; } |
| .resource-card.resource-card-4x3 { |
| width: 220px; |
| height: 160px; |
| -webkit-flex-direction: column; } |
| .resource-card.resource-card-4x3 .photo { |
| -webkit-flex: 1 1 auto; |
| border-bottom: 1px solid #ddd; } |
| .resource-card.resource-card-4x3 .resource-card-text { |
| margin: 10px; |
| padding-right: 26px; } |
| .resource-card.resource-card-4x3 .icon { |
| position: absolute; |
| right: 10px; |
| bottom: 10px; |
| width: 16px; |
| height: 16px; } |
| .resource-card.resource-card-4x3 .title { |
| font-size: 16px; |
| line-height: 20px; |
| max-height: 40px; |
| text-overflow: ellipsis; |
| display: -webkit-box; |
| overflow: hidden; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; } |
| .resource-card.resource-card-4x3 .subtitle { |
| font-size: 13px; |
| line-height: 15px; |
| max-height: 30px; |
| text-overflow: ellipsis; |
| display: -webkit-box; |
| overflow: hidden; |
| -webkit-line-clamp: 2; |
| -webkit-box-orient: vertical; |
| max-height: 0; |
| margin-top: 0; |
| transition: 0.4s ease; } |
| .resource-card.resource-card-4x3:hover .subtitle { |
| max-height: 30px; } |
| .resource-card.resource-card-4x3 .abstract { |
| display: none; } |