{*
 * templates/frontend/components/footer.tpl
 *
 * Copyright (c) 2014-2021 Simon Fraser University
 * Copyright (c) 2003-2021 John Willinsky
 * Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
 *
 * @brief Common site frontend footer.
 *
 * @uses $isFullWidth bool Should this page be displayed without sidebars? This
 *       represents a page-level override, and doesn't indicate whether or not
 *       sidebars have been configured for thesite.
 *}

	</div><!-- pkp_structure_main -->

	{* Sidebars *}
	{if empty($isFullWidth)}
		{capture assign="sidebarCode"}{call_hook name="Templates::Common::Sidebar"}{/capture}
		{if $sidebarCode}
			<div class="pkp_structure_sidebar left" role="complementary" aria-label="{translate|escape key="common.navigation.sidebar"}">
              
 	{if $issue}
		<section class="current_issue_cover">
              {include file="frontend/objects/issue_toc.tpl" heading="h3"}
		</section>
	{/if}
              
              
              
    {* Announcements *}
	{if $numAnnouncementsHomepage && $announcements|@count}
		<section class="cmp_announcements1 highlight_first1">
			<h2>Announcements</h2>
          	
			{foreach name=announcements from=$announcements item=announcement}
				<div class="flex"><div><img src="https://demo.codexcafe.net/ojs3/public/site/images/ojs3d/announce.jpg"> </div><div> {include file="frontend/objects/announcement_summary.tpl"}
                </div></div>
			{/foreach}
          
		</section>
	{/if}
              
 	{if $issue}
		<section class="current_issue_box">
			<h2>
				{translate key="journal.currentIssue"}
			</h2>
			<div class="current_issue_title">
				{$issue->getIssueIdentification()|strip_unsafe_html}
			</div>
			{include file="frontend/objects/issue_toc.tpl" heading="h3"}
          <strong>ISSN: </strong>2222-758X<br />
          <strong>e-ISSN: </strong>2789-7362
          
			<p><a href="{url router=$smarty.const.ROUTE_PAGE page="issue" op="archive"}" class="read_more">
				{translate key="journal.viewAllIssues"}
              </a></p>
		</section>
	{/if}             
             
		</div><!-- pkp_sidebar.left -->
	{/if}{/if}
</div><!-- pkp_structure_content -->

<div class="pkp_structure_footer_top_wrapper" role="contentinfo" style="background: #e9f6fd;font-size:16px;">
  <div class="pkp_structure_footer">

    {if $activeTheme->getOption('footerContent')}
		<div class="pkp_footer_content1">
        {$footerContent}  
  		</div>
	{/if}


  </div>
</div>

<div class="pkp_structure_footer_wrapper" role="contentinfo">
	<a id="pkp_content_footer"></a>
 
	<div class="pkp_structure_footer">
      
      
		{if $pageFooter}
			<div class="pkp_footer_content">
				{$pageFooter}
			</div>
		{/if}

		<div class="pkp_brand_footer" role="complementary">
			<a href="{url page="about" op="aboutThisPublishingSystem"}">
				<img alt="{translate key="about.aboutThisPublishingSystem"}" src="{$baseUrl}/{$brandImage}">
			</a>
		</div>
	</div>
</div><!-- pkp_structure_footer_wrapper -->

</div><!-- pkp_structure_page -->

{load_script context="frontend"}

{call_hook name="Templates::Common::Footer::PageFooter"}
{literal}<script>new Accordion('.accordion-container');</script>

<style>/* ==== Main CSS === */
.Modern-Slider {
	background: #E9E9E9;
	padding: 10px;
}
.img-fill{
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  text-align: left
}
.Modern-Slider .item .img-fill img {
  
}
.img-fill img {
  height:250px;
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04);
}


.slick-slide {
  float: left /* If RTL Make This Right */ ;
  padding: 0;
  min-height: 250px !important;
}

/* ==== Slider Style === */
.Modern-Slider .item .img-fill{
  border: 5px solid #E9E9E9;
  background: #fff;
  padding: 10px;
}

.Modern-Slider .item .img-fill .info{
  text-align: center;
}
.Modern-Slider .item .img-fill .info a{
  color: #5084B7;
}

.Modern-Slider .item .info > div{
  max-height: 50px;
}
.Modern-Slider .NextArrow{
  position:absolute;
  top:50%;
  right:0px;
  width:45px;
  height:45px;
  background:transparent;
  border:0 none;
  margin-top:-22.5px;
  text-align:center;
  font:20px/45px FontAwesome;
  color:#111;
  z-index:5;
  &:before{content:'\f105';}
}

.Modern-Slider .PrevArrow{
  position:absolute;
  top:50%;
  left:0px;
  width:45px;
  height:45px;
  background:transparent;
  border:0 none;
  margin-top:-22.5px;
  text-align:center;
  font:20px/45px FontAwesome;
  color:#FFF;
  z-index:5;
  &:before{content:'\f104';}
}




.Modern-Slider .item h3{
  font:18px/16px Arial;
  color:#111;
  animation:fadeOutRight 1s both;
  margin:0 0 6px 0;
  padding:0;
  max-width:600px;
}

.Modern-Slider .item h5{
  margin:0;
  padding:0;
  font:15px/17px RalewayR;
  color:#999;
  max-width:500px;
  overflow: hidden;
  height: 42px;
  animation:fadeOutLeft 1s both;
}
.btn.btn-default.pubmed {
	padding: 3px 7px;
}
</style>
<link rel="stylesheet" type="text/css" href="https://ojsexpert.com/slick/slick.css" />
<script src="https://ojsexpert.com/slick/slick.js"></script>
<script>
$(".Modern-Slider").slick({
    autoplay:true,
    autoplaySpeed:2000,
    speed:600,
    slidesToShow:4,
    slidesToScroll:1,
    pauseOnHover:false,
    dots:false,
    pauseOnDotsHover:true,
    cssEase:'linear',
    vertical : false,
    draggable:true,
    prevArrow:'<button class="PrevArrow"></button>',
    nextArrow:'<button class="NextArrow"></button>', 
  });


$(".Modern-Slider1").slick({
    autoplay:false,
    autoplaySpeed:2000,
    speed:800,
    slidesToShow:4,
  
   responsive: [
{
breakpoint: 1366,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
}
},
{
breakpoint: 992,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
],
  
  
    slidesToScroll:1,
    pauseOnHover:false,
    dots:false,
    pauseOnDotsHover:true,
    cssEase:'linear',
    vertical : false,
    draggable:true,
	
    prevArrow:'<div class="PrevArrow"></div>',
    nextArrow:'<div class="NextArrow"></div>', 
  });

</script>


<style>
.mra-press .obj_galley_link {border-radius:20px;}
.obj_article_summary .galleys_links {
	position: absolute;
	bottom: 10px;
}
.mra-press {
	padding-right: 10px;
}
.mra-press a{
	color: #111;
}
.mra-press .media-heading {margin-bottom: 20px}
.mra-press .authors {margin-bottom: 30px}
.mra-press .published {position: absolute;bottom: 18px;}
.mra-press .btn-group {
	position: absolute;
	bottom: 0 !important;
}


.Modern-Slider1 {
	overflow: visible !important;
}
.Modern-Slider1 .slick-slide {
  max-height: 280px !important;
}
.Modern-Slider1 .PrevArrow, 
.Modern-Slider1 .NextArrow {
  position:absolute;
  top:30%;
  margin-top:-30.5px;
  z-index:5;
   	width: 0;
	height: 0;
	border-top: 60px solid transparent;
	border-bottom: 60px solid transparent;
transition: 0.5s; 
opacity: 0.5;
}

.Modern-Slider1 .PrevArrow {
  left:-35px;
	border-right: 30px solid #555;
}
.Modern-Slider1 .NextArrow {
	right: -25px;
	border-left: 30px solid #555;
}
.Modern-Slider1 .slick-slide {
	background: #fff;
	margin-right: 10px;
	padding: 10px;
}
.Modern-Slider1 .media-heading {
max-height: 60px;
overflow: hidden;
}
.Modern-Slider1 .authors {
max-height: 42px;
overflow: hidden;
}
</style>


{/literal}
</body>
</html>