/* @group Global Styles */

body{
    font: $font-size $font-family;
    line-height: $line-height;
    font-weight: $font-weight;
    color: $text-color;
    background: $background-color;
    -webkit-overflow-scrolling: touch;
    margin: 0 auto;
    letter-spacing: 0.3px;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
    // background: fixed linear-gradient(to right bottom, #6d327c, #485DA6, #00a1ba, #01b18e, #32b37b);
    &:before{
        content: '';
        position: fixed;
        left: 0;
        top: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        height: 100vh;
        background: linear-gradient(to right bottom, #6d327c, #485DA6, #00a1ba, #01b18e, #32b37b);
    }
    &.cover:before{
        background-size: cover !important;
    }
}

// Accessibility
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
.mfp-close:focus{
    outline: 2px dashed $red;
    outline-offset: 4px;
}
.skip-link.screen-reader-text:focus {
    clip: auto !important;
    display: block;
    height: auto;
    width: auto;
    top: 7px;
    z-index: 999999;
    outline: thin dotted;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
}

.nice-select .list{ opacity: 0; }

[data-aos=fade]{ 
    opacity: 0;
    @include transition(800ms);
}
[data-aos=fade-up]{ 
    opacity: 0;
    transform: translateY(50px);
    @include transition(600ms);
}
.aos-animate{
    transform: translateY(0px);
    opacity: 1;
}

.lazy, [data-lazy="true"]{ 
    opacity: 0;
    @include transition;
}
.lazy.loaded, [data-lazy="true"].loaded{ opacity: 1; }

img{ max-width: 100%; height: auto; }
a{
	color: $text-color;
	@include transition;
	&:hover{ color: $green; }
	img{ @include backface-visibility(hidden); @include transition; }
}
i.icon, i.fa, .remixicon{
    font-style: normal !important;
    font-weight: normal !important;
    display: inline-block; 
}
.no-margin{ margin: 0 !important; }
.nm-bottom{ margin-bottom: 0 !important; }
.np-bottom{ padding-bottom: 0 !important; }
.np-top{ padding-top: 0 !important; }
.alignleft{ float: left !important; }
.alignright{ float: right !important; }
.aligncenter{ display: block; margin: 0 auto; }
.textleft{ text-align: left !important; }
.textright{ text-align: right !important; }
.textcenter{ text-align: center !important; }
.fw-normal{ font-weight: normal !important; }
.fw-bold{ font-weight: bold !important; }
.white{ color: #fff; }
.uppercase{ text-transform: uppercase; }
.overflow{ overflow: hidden; }
.cover{
	background-repeat: no-repeat !important;
    background-position: center center !important;
	@include background-size(cover);
}
.parallax{
    background-attachment: fixed !important;
}
hr{ border: 0; border-top: 1px solid $border-color; height: 1px; margin: 0 0 20px; }

.grid-container{ max-width: $grid-container; }
.grid-container.grid-usmall{ max-width: $grid-usmall; }
.grid-container.grid-small{ max-width: $grid-small; }
.grid-container.grid-medium{ max-width: $grid-medium; }
.grid-container.grid-large{ max-width: $grid-large; }
.grid-container.grid-ularge{ max-width: $grid-ularge; }

/* Content */

.row{ margin-left: -$grid-gap; margin-right: -$grid-gap; }
.section{ 
    padding-top: $section-padding; padding-bottom: $section-padding;
}
.bg-white{
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.15);
    background: #fff;
    border-radius: 15px;
    padding: double($grid-gap);
}
.fullwidth{ display: block; width: 100%; height: auto; }
.thumb{
    position: relative;
    z-index: 1;
    min-height: 80px;
}
.thumb .fullimage,
.full-link{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100% !important;
	z-index: 1;
}
.full-link{ z-index: 10; }
.content{
	margin-top: $section-padding + 10px;
}
.mfp-close{ font-size: 40px !important; }

// Reserved tags

.ctag-fullcover, li.tag-fullcover,
.ctag-bgstyle, li.tag-bgstyle{
    display: none !important;
}

/* Top page Loader */

.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.pace-inactive { display: none; }
.pace .pace-progress {
  background: #fff;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}
.pace .pace-activity {
  display: block;
  position: fixed;
  z-index: 2000;
  top: 15px;
  right: 15px;
  width: 14px;
  height: 14px;
  border: solid 2px transparent;
  border-top-color: #fff;
  border-left-color: #fff;
  border-radius: 10px;
  animation: pace-spinner 400ms linear infinite;
}

@keyframes pace-spinner {
  0% { transform: rotate(0deg); transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}

/* Banners */

.epcl-banner{
    img.custom-image{ display: block; margin: 0 auto; }
    padding-bottom: 0;
}

/* @group Search form and results */

#search-lightbox{
    .title{ margin-top: 10px; }
    .title span{ font-weight: bold; }
    .search-wrapper{
        padding: 0px 40px;        
    }
    .mfp-close{ display: none; }
}

#search-results{
	position: relative;
	z-index: 1;
	h2{ padding: 0 20px; text-align: center; }
	div.box{ margin-top: 20px; padding: 0 20px; }
	article{
        background: #fff;
        border-radius: $border-radius-sections;
		padding: 20px;
		.title{ margin-bottom: 5px; }
		img, iframe{ display: none; }
	}
}

/* @end */

/* @group Global: Author Box */

#author{
	padding: 30px;
	position: relative;
	z-index: 1;
	text-align: center;
	background: rgba(0,0,0,0.15);
	color: #fff;
    margin-top: $section-padding;
    border-radius: $border-radius-sections;
	div.avatar{
		position: absolute;
		left: 50%;
		top: 0;
		z-index: 2;
		width: 88px;
		margin: -44px 0 0 -44px;
		a{
			display: block;
			border-radius: 50%;
            overflow: hidden;
            border: 4px solid $green;
		}
		img{ display: block; }
    }
    div.info{
        font-size: 16px;
        max-width: 75%;
        margin: 0 auto;
    }
    div.social{ 
        margin-top: 15px;
        a{ 
            display: inline-block;
            margin: 0 12px;
            color: #fff;
            font-size: 22px;
            &:hover{ transform: translateY(-2px); } 
        }
    }
	.author-name{ margin-top: 35px; margin-bottom: 20px; line-height: 1; }
	.author-name a, .title{ color: #fff; }
}

/* @end */