Skip to content

Jeff Balicki / st_joseph

Go to a project
Toggle navigation
Toggle navigation pinning
0b177f92 by Jeff Balicki
Options

learning-opportunities done 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent a2bd643b
Expand all
Inline Side-by-side
Showing 12 changed files with 423 additions and 223 deletions
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -4,8 +4,8 @@
add_shortcode( 'promos', 'promos' );
function promos()
{
function promos(){
$custom_args = array(
'post_type' => 'promo',
'posts_per_page' => 3,
......@@ -16,6 +16,7 @@ function promos()
ob_start();
$uniqid = uniqid();
if ($custom_query->have_posts()):?>
<div class="carousel">
<div id="<?php echo $uniqid; ?>" class="promo-carousel carousel-items">
<div class='swiper-wrapper'>
......@@ -28,15 +29,15 @@ function promos()
<div class="swiper-button-next" data-id="<?= $uniqid; ?>"></div>
</div>
</div>
<?php endif; ?>
<?php wp_reset_query(); ?>
<?php $output = ob_get_clean();
<?php endif;
wp_reset_query();
$output = ob_get_clean();
return $output;
}
function promos_slides($id)
{
function promos_slides($id){
ob_start();
$post = get_post($id);
$link = get_permalink($id);
......@@ -49,8 +50,8 @@ function promos_slides($id)
}
$text = str_replace(']]>', ']]&gt;', apply_filters( 'the_content', strip_shortcodes($post->post_content)));
$excerpt_length = apply_filters( 'excerpt_length', 40 );
$text = wp_trim_words( $text, $excerpt_length, ' ...' );
?>
$text = wp_trim_words( $text, $excerpt_length, ' ...' );?>
<div class="swiper-slide container">
<div class="promo row align-items-center">
<div class="col-lg-4 col-md-12">
......@@ -75,8 +76,8 @@ return $output;
add_shortcode('share-this', 'share_this');
function share_this($atts)
{
function share_this($atts){
$atts = shortcode_atts(array(
'post_id' => '',
), $atts, 'current-cover-articles');
......@@ -107,8 +108,8 @@ return ob_get_clean();
add_shortcode('course-list', 'course_list');
function course_list()
{
function course_list(){
$custom_args = array(
'post_type' => 'sfwd-courses',
'posts_per_page' => -1,
......@@ -119,20 +120,29 @@ function course_list()
ob_start();
$uniqid = uniqid();
if ($custom_query->have_posts()):?>
<p><input type="text" class="quicksearch" placeholder="Search" /></p>
<div class="button-group filters-button-group">
<button class="button is-checked" data-filter="*">Clear</button>
<button class="button" data-filter=".resilience-and-well-being">Resilience and Well-Being</button>
<button class="button" data-filter=".leadership-and-teamwork">Leadership and Teamwork</button>
<button class="button" data-filter=".clinical-skills">Clinical Skills</button>
<button class="button" data-filter=".coaching-and-mentoring">Coaching and Mentoring</button>
<div class="course-list">
<label for="quicksearch">Search programs:</label><input type="text" id="quicksearch" placeholder="" />
<div class="filters">
<a href="#" id="filter-more">FILTERS <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></a>
<div class="filter-group">
<div class="category-filter-group">
<?php $terms = get_terms( array( 'taxonomy' => 'ld_course_category' ,'parent' => 0) );
foreach($terms as $term){ ?>
<div class="category-filter"> <input id="<?php echo $term->slug ; ?>" value=".<?php echo $term->slug ; ?>" type="checkbox" class="sr-only"><label for="<?php echo $term->slug ; ?>"><?php echo $term->name ; ?></label></div>
<?php }; ?>
</div>
<div class="btn-group sort-button-group align-self-end">
<button class="btn btn-light" data-sort-direction="asc" data-sort-value="coursename" type="button">Name <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
<button class="btn btn-light" data-sort-direction="asc" data-sort-value="coursedate" type="button">Date <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
</div>
</div>
</div>
<div class="grid">
<?php while ($custom_query->have_posts()): $custom_query->the_post();
echo course_card(get_the_ID());
endwhile; ?>
</div>
</div>
<?php endif;
wp_reset_query();
$output = ob_get_clean();
......@@ -141,36 +151,37 @@ function course_list()
function course_card($id)
{
function course_card($id){
ob_start();
$post = get_post($id);
$link = get_permalink($id);
$text = str_replace(']]>', ']]&gt;', apply_filters( 'the_content', strip_shortcodes($post->post_content)));
$excerpt_length = apply_filters( 'excerpt_length', 40 );
$excerpt_length = apply_filters( 'excerpt_length', 20 );
$text = wp_trim_words( $text, $excerpt_length, ' ...' );
$categories = get_the_terms( $id, 'ld_course_category' );
$cat ="";
foreach( $categories as $category ) { $cat .= " ".$category->slug; }; ?>
$cat =""; foreach( $categories as $category ) { $cat .= " ".$category->slug; }; ?>
<div class="element-item <?php echo $cat; ?> " data-category="<?php echo $cat; ?>">
<article id="post-<?php echo $id; ?>" class="post post-<?php echo $id; ?> sfwd-courses type-sfwd-courses">
<div class="card">
<div class="thumbnail"><div class="ribbon"><?php echo get_post_meta( $id, '_learndash_course_grid_custom_ribbon_text', true);?></div>
<div class="image">
<a href="<?php echo $link; ?>" rel="bookmark"> <?php echo get_the_post_thumbnail($id, 'full' ); ?></a>
<?php echo get_the_post_thumbnail($id, 'full' ); ?>
</div>
</div>
<div class="content">
<h3 class="entry-title"><a href="<?php echo $link; ?>"><?php echo $post->post_title; ?></a></h3>
<h3 class="entry-title"><?php echo $post->post_title; ?></h3>
<div class="entry-content">
<p><?php echo $text; ?></p>
</div>
<div class="button">
<a role="button" href="<?php echo $link; ?>" rel="bookmark"><?php echo get_post_meta( $id, '_learndash_course_grid_custom_button_text', true);?></a>
<a class="btn" role="button" href="<?php echo get_permalink($id); ?>" rel="bookmark">LEARN MORE</a>
</div>
</div>
</article>
</div>
<?php
$output = ob_get_clean();
return $output;
$output = ob_get_clean();
return $output;
}
\ No newline at end of file
......
......@@ -17634,25 +17634,21 @@
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
getSortData: {
coursename: '.name',
date: '[data-ticks]'
},
filter: function () {
return qsRegex ? $(this).text().match(qsRegex) : true;
var $this = $(this);
var filterText = qsRegex ? $(this).text().match(qsRegex) : true;
var buttonResult = filterValue ? $this.is(filterValue) : true;
return filterText && buttonResult;
}
});
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function () {
var number = $(this).find('.number').text();
return parseInt(number, 10) > 50;
},
// show if name ends with -ium
ium: function () {
var name = $(this).find('.name').text();
return name.match(/ium$/);
}
};
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup(debounce(function () {
var $quicksearch = $('#quicksearch').keyup(debounce(function () {
console.log($quicksearch.val());
qsRegex = new RegExp($quicksearch.val(), 'gi');
$grid.isotope();
}, 200));
......@@ -17672,24 +17668,65 @@
};
}
// bind filter button click
$('.filters-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[filterValue] || filterValue;
$grid.isotope({
filter: filterValue
});
// filter with selects and checkboxes
var $checkboxes = $('.category-filter input');
var filterValue;
$checkboxes.change(function () {
// map input values to an array
var inclusives = [];
// inclusive filters from checkboxes
$checkboxes.each(function (i, elem) {
// if checkbox, use value if checked
if (elem.checked) {
inclusives.push(elem.value);
}
});
// change is-checked class on buttons
$('.button-group').each(function (i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function () {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$(this).addClass('is-checked');
// combine inclusive filters
filterValue = inclusives.length ? inclusives.join(', ') : '*';
$grid.isotope();
updateFilterCounts();
});
$('.sort-button-group').on('click', 'button', function () {
var sortValue = $(this).attr('data-sort-value');
var direction = $(this).attr('data-sort-direction');
var isAscending = direction == 'asc';
var newDirection = isAscending ? 'desc' : 'asc';
$grid.isotope({
sortBy: sortValue,
sortAscending: isAscending
});
$(this).attr('data-sort-direction', newDirection);
var span = $(this).find('.glyphicon');
span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});
function updateFilterCounts() {
var itemElems = $grid.isotope('getFilteredItemElements');
var count_items = $(itemElems).length;
if (count_items > counter) {
$("#load-more").hide();
} else {
$("#load-more").show();
}
if ($('.element-item').hasClass('hidden')) {
$('.element-item').removeClass('hidden');
}
var index = 0;
$(itemElems).each(function () {
if (index >= counter) {
$(this).addClass('hidden');
}
index++;
});
console.log('updateFilterCounts');
console.log(index);
if (index === 0) {
$("#load-more").hide();
} else {
$("#load-more").show();
}
$grid.isotope('layout');
}
//****************************
// Isotope Load more button
......@@ -17722,7 +17759,7 @@
}
//append load more button
$grid.after('<div class="viewPlan"><a href="#" id="load-more">Load More</a></div>');
$grid.after('<div class="view-plan"><a class="btn" href="#" id="load-more">LOAD MORE programs</a></div>');
//when load more button clicked
$(document).on("click", "#load-more", function (e) {
......@@ -17737,6 +17774,12 @@
counter = counter + initShow;
loadMore(counter);
});
$(document).on("click", "#filter-more", function (e) {
e.preventDefault();
$('.filter-group').toggleClass('open');
var span = $(this).find('.glyphicon');
span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});
});
// Add your custom JS here.
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -2,8 +2,6 @@ import jQuery from 'jquery';
import jQueryBridget from 'jquery-bridget';
import Isotope from "isotope-layout";
jQueryBridget( 'isotope', Isotope, $ );
jQuery( document ).ready(function($) {
......@@ -15,27 +13,23 @@ var qsRegex;
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
layoutMode: 'fitRows',
getSortData: {
coursename: '.name',
date: '[data-ticks]',
},
filter: function() {
return qsRegex ? $(this).text().match( qsRegex ) : true;
var $this = $(this);
var filterText = qsRegex ? $(this).text().match( qsRegex ) : true;
var buttonResult = filterValue ? $this.is( filterValue ) : true;
return filterText && buttonResult;
}
});
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};
// use value of search field to filter
var $quicksearch = $('.quicksearch').keyup( debounce( function() {
var $quicksearch = $('#quicksearch').keyup( debounce( function() {
console.log($quicksearch.val());
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$grid.isotope();
}, 200 ) );
......@@ -56,26 +50,80 @@ function debounce( fn, threshold ) {
}
// filter with selects and checkboxes
var $checkboxes = $('.category-filter input');
var filterValue;
// bind filter button click
$('.filters-button-group').on( 'click', 'button', function() {
var filterValue = $( this ).attr('data-filter');
// use filterFn if matches value
filterValue = filterFns[ filterValue ] || filterValue;
$grid.isotope({ filter: filterValue });
$checkboxes.change( function() {
// map input values to an array
var inclusives = [];
// inclusive filters from checkboxes
$checkboxes.each( function( i, elem ) {
// if checkbox, use value if checked
if ( elem.checked ) {
inclusives.push( elem.value );
}
});
// combine inclusive filters
filterValue = inclusives.length ? inclusives.join(', ') : '*';
$grid.isotope();
updateFilterCounts();
});
// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
var $buttonGroup = $( buttonGroup );
$buttonGroup.on( 'click', 'button', function() {
$buttonGroup.find('.is-checked').removeClass('is-checked');
$( this ).addClass('is-checked');
});
$('.sort-button-group').on( 'click', 'button', function() {
var sortValue = $(this).attr('data-sort-value');
var direction = $(this).attr('data-sort-direction');
var isAscending = (direction == 'asc');
var newDirection = (isAscending) ? 'desc' : 'asc';
$grid.isotope({ sortBy: sortValue, sortAscending: isAscending });
$(this).attr('data-sort-direction', newDirection);
var span = $(this).find('.glyphicon');
span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});
function updateFilterCounts() {
var itemElems = $grid.isotope('getFilteredItemElements');
var count_items = $(itemElems).length;
if (count_items > counter) {
$("#load-more").hide();
}else {
$("#load-more").show();
}
if ($('.element-item').hasClass('hidden')) {
$('.element-item').removeClass('hidden');
}
var index = 0;
$(itemElems).each(function () {
if (index >= counter) {
$(this).addClass('hidden');
}
index++;
});
console.log('updateFilterCounts');
console.log(index);
if(index === 0){
$("#load-more").hide();
}else{
$("#load-more").show();
}
$grid.isotope('layout');
}
//****************************
// Isotope Load more button
//****************************
......@@ -104,8 +152,7 @@ $('.button-group').each( function( i, buttonGroup ) {
//when no more to load, hide show more button
if (hiddenElems.length == 0) {
$("#load-more").hide();
}
else {
} else {
$("#load-more").show();
};
......@@ -113,7 +160,7 @@ $('.button-group').each( function( i, buttonGroup ) {
//append load more button
$grid.after('<div class="viewPlan"><a href="#" id="load-more">Load More</a></div>');
$grid.after('<div class="view-plan"><a class="btn" href="#" id="load-more">LOAD MORE programs</a></div>');
//when load more button clicked
$(document).on("click", "#load-more", function(e) {
......@@ -132,4 +179,12 @@ $('.button-group').each( function( i, buttonGroup ) {
loadMore(counter);
});
$(document).on("click", "#filter-more", function(e) {
e.preventDefault();
$('.filter-group').toggleClass('open');
var span = $(this).find('.glyphicon');
span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');
});
});
......
......@@ -108,6 +108,9 @@ max-width: 100% !important;
font-size: 18px;
}
input[type=submit]:hover{
background-color: #2C2C2C;
}
}
}
......
.thumbnail{
label[for=quicksearch]{
font-size: 18px;
line-height: 24px;
color: #0484B8;
text-transform: uppercase;
}
#quicksearch{
width: 600px;
border-bottom:1px solid #8E908F !important;
}
.filters{
border-bottom:1px solid #FFA300 !important;
border-top:1px solid #FFA300 !important;
padding: 10px 0px 10px 0px;
.glyphicon-chevron-up::after{
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.432' height='11.567' viewBox='0 0 19.432 11.567'%3E%3Cpath id='Path_1875' data-name='Path 1875' d='M395.235 274.525a1.19 1.19 0 0 0 1.681.063l9.188-8.526a1.19 1.19 0 0 0 0-1.744l-9.187-8.526a1.19 1.19 0 1 0-1.619 1.744l8.248 7.654-8.248 7.654a1.19 1.19 0 0 0-.063 1.681Z' transform='translate(274.905 -394.917) rotate(90)' fill='%230484b8'/%3E%3C/svg%3E");
}
.glyphicon-chevron-down::after{
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.631' height='11.905' viewBox='0 0 19.631 11.905'%3E%3Cpath id='Path_1875' data-name='Path 1875' d='M395.235 274.525a1.19 1.19 0 0 0 1.681.063l9.188-8.526a1.19 1.19 0 0 0 0-1.744l-9.187-8.526a1.19 1.19 0 1 0-1.619 1.744l8.248 7.654-8.248 7.654a1.19 1.19 0 0 0-.063 1.681Z' transform='matrix(-0.017 -1 1 -0.017 -248.34 411.22)' fill='%230484b8'/%3E%3C/svg%3E");
}
#filter-more{
font-size: 18px;
line-height: 24px;
color: #0484B8;
text-transform: uppercase;
text-decoration: none;
padding: 10px 0px;
display: block;
}
.filter-group{
display:none;
flex-direction: row ;
justify-content: space-between;
margin-bottom: 20px;
.sort-button-group {
.btn{
border:1px solid #0081BC;
}
}
}
.filter-group.open{
display:flex;
}
}
.category-filter-group{
display:flex;
flex-direction: row ;
}
.category-filter{
display:flex;
flex-direction: row ;
font-size:18px;
font-size:1.125rem;
color:#515151;
margin:.25rem 0;
margin-right:1rem;
label{
padding-left:30px;
padding-right:10px;
white-space:nowrap;
cursor:pointer;
color: #2C2C2C;
}
input[type=checkbox]{
display:inline-block;
margin-left:30px;
margin-left:0;
}
input[type=checkbox]:focus+label{
outline:-webkit-focus-ring-color auto 1px;
}
label:before{
content:'';
cursor:pointer;
height:25px;
width:25px;
padding:2.5px;
display:inline-block;
position:absolute;
background:#FFF;
margin-left:-30px;
border:2px solid #0081BC;
border-radius: 4px;
}
input:checked+label:before{
background:#0081BC !important;
border:2px solid #0081BC;
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.078' height='18.352' viewBox='0 0 15.078 18.352'%3E%3Cpath id='Path_1871' data-name='Path 1871' d='M137.622 43.1l1.28 2.211 6.924-11.987a1.837 1.837 0 0 1 3.2 1.8l-8.5 14.722a1.931 1.931 0 0 1-3.259 0L134.48 44.9a1.812 1.812 0 1 1 3.142-1.8Z' transform='translate(-134.203 -32.392)' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E");
height:25px;
width:25px;
padding: 2px 4px;
background-position:4px;
background-size:22px;
background-repeat:no-repeat;
position:absolute;
cursor:pointer;
}
input[type=checkbox]{
background-color:initial;
cursor:default;
-webkit-appearance:auto;
-moz-appearance:auto;
appearance:auto;
-webkit-box-sizing:border-box;
box-sizing:border-box;
margin:3px 3px 3px 4px;
padding:initial;
border:initial;
position:relative;
}
.sr-only{
position: absolute !important;
clip:rect(1px,1px,1px,1px);
padding:0;
border:0;
height:1px;
width:1px;
overflow:hidden;
}
}
.card{
background: var(--unnamed-color-ffffff) 0% 0% no-repeat padding-box;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029;
border-radius: 0px;
border-width: 0px;
min-height: 526px;
.thumbnail{
line-height:1.428571429;
background-color:#ffffff;
border:1px solid #dddddd;
border-radius:4px;
-webkit-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
display:inline-block;
......@@ -12,14 +143,15 @@
position:relative;
padding:0;
margin:0;
}
.thumbnail .ribbon{
background:#5cb85c;
.ribbon{
background:#E8D44B;
box-shadow:0 1px rgba(0,0,0,0.2);
-moz-box-shadow:0 1px rgba(0,0,0,0.2);
-webkit-box-shadow:0 1px rgba(0,0,0,0.2);
color:#fff;
text-shadow:0 1px rgba(0,0,0,0.3);
color:#2C2C2C;
text-transform: uppercase;
position:absolute;
font-size:14px;
left:-8px;
......@@ -27,100 +159,21 @@
top:10px;
padding:3px 10px;
z-index:2;
border-radius: 0px;
font-weight:bold;
}
.thumbnail .ribbon.enrolled{
background:#428bca;
}
.thumbnail .ribbon:before{
border-radius: 0px;
}
.ribbon:before{
border:4px solid transparent;
border-top:4px solid #348c34;
border-right:4px solid #348c34;
border-top:4px solid #C3B241;
border-right:4px solid #C3B241;
content:"";
position:absolute;
left:0;
right: unset;
border-radius: 0px;
bottom:-8px;
}
.thumbnail .ribbon.enrolled:before{
border-top:4px solid #357ebd;
border-right:4px solid #357ebd;
}
.entry-title{
margin:0!important;
}
.entry-content{
margin-bottom:10px;
padding:0;
}
.items-wrapper_button{
margin:5px 0!important;
width:100%;
}
.items-wrapper_button a{
text-decoration:none!important;
width:100%;
}
.thumbnail a.btn-primary{
color:white;
}
.btn{
display:inline-block;
padding:6px 12px;
margin-bottom:0;
font-size:14px;
font-weight:normal;
line-height:1.428571429;
text-align:center;
vertical-align:middle;
cursor:pointer;
border:1px solid transparent;
border-radius:4px;
white-space:nowrap;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
.btn:focus{
outline:thin dotted #333;
outline:5px auto -webkit-focus-ring-color;
outline-offset:-2px;
}
.btn:hover,.learndash-course-grid .btn:focus{
color:#333333;
text-decoration:none;
}
.btn:active{
outline:0;
background-image:none;
-webkit-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-primary{
color:#ffffff;
background-color:#428bca;
border-color:#357ebd;
}
.btn-primary:hover,.learndash-course-grid .btn-primary:focus,.learndash-course-grid .btn-primary:active{
color:#ffffff;
background-color:#3276b1;
border-color:#285e8e;
}
.btn-primary:active{
background-image:none;
}
.btn-primary{
color:white;
text-decoration:none;
}
.btn-primary:hover{
color:white;
}
.thumbnail img{
}
img{
display:block;
max-width:100%;
width:100%;
......@@ -129,46 +182,81 @@ border-radius: 0px;
margin-right:auto;
box-shadow:none;
max-height: 400px;
}
.thumbnail a,.learndash-course-grid .thumbnail a:hover{
box-shadow:none;
}
.thumbnail .caption{
padding:9px;
color:#333333;
}
.thumbnail .caption a{
text-decoration:none!important;
}
.thumbnail .caption p{
float:none!important;
margin:15px 0 0!important;
width:100%!important;
}
}
}
.content{
padding: 15px;
display: flex;
flex-direction: column;
flex: 1;
.entry-title{
margin-top: 0px;
text-transform: uppercase;
text-align: center;
font-size: 18px;
line-height: 24px;
}
.entry-content{
text-align: center;
font-size: 16px;
line-height: 24px;
}
.element-item {
position: relative;
float: left;
width: calc(33% - 30px);
height: 600px;
margin: 5px;
padding: 10px;
.btn{
display: flex;
align-self:center;
background-color: #0484B8;
color: #fff;
border-radius: 0px;
font-size: 18px;
margin-top: auto;
margin-bottom: 20px;
}
.btn:hover{
background-color: #2C2C2C;
}
}
}
.element-item > * {
margin: 0;
padding: 0;
.course-list{
.element-item {
position: relative;
float: left;
width: calc(33.33% - 30px);
height: 600px;
margin: 15px;
padding: 10px;
}
}
#load-more{
float:right;
margin:5px;
.view-plan{
width: 100%;
text-align: center;
#load-more{
margin: auto;
background-color: #0484B8;
color: #fff;
border-radius: 0px;
font-size: 18px;
margin-top: auto;
margin-bottom: 20px;
text-transform: uppercase;
}
#load-more:hover{
background-color: #2C2C2C;
}
}
.hidden{
visibility:hidden;
width:0px!important;
height:0px!important;
margin:0px!important;
padding:0px!important;
display:none;
visibility:hidden;
width:0px!important;
height:0px!important;
margin:0px!important;
padding:0px!important;
display:none;
}
\ No newline at end of file
......