Current File : /home/pacjaorg/wpt.pacja.org/cop/templates/eventus2/scss/presets.scss

/**
 * @package Helix Ultimate Framework
 * @author JoomShaper https://www.joomshaper.com
 * @copyright Copyright (c) 2010 - 2018 JoomShaper
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
*/

body,
.sp-preloader {
	background-color: $bg_color;
	 color: $text_color;
}

.sp-preloader {
	>div {
	  background: $link_color;
	  &:after {
		background: $bg_color;
	  }
	}
  }

#sp-top-bar {
	background: $topbar_bg_color;
	color: $topbar_text_color;

	a {
		color: $topbar_text_color;
	}
}

#sp-header {
	background: $header_bg_color;
}

// Anchor
a{
	color: $link_color;
	&:hover,
	&:focus,
	&:active {
		color: $link_hover_color;
	}
}

.tags {
  >li {
    display: inline-block;
    a {
    	@if $link_color { background: fadeOut($link_color, 0.9); }

      	color: $link_color;
			&:hover {
				background: $link_hover_color;
			}
    }
  }
}

.article-social-share {
  .social-share-icon {
    ul {
      li {
        a {
					color: $text_color;
          &:hover,
          &:focus {
            background: $link_color;
          }
        }
      }
    }
  }
}

.article-body {
    .readmore {
        margin: 20px 0 10px;
        a {
            color: #fff !important;
            background: $link_color;
            padding: 10px;
            border-radius: 5px;
            &:hover {
                background: $text_color;
            }
        }
    }
}

.article-list .article {
    border: 1px solid lighten($text_color,60%);
}

.pager {
  >li {
    a {
        color: #fff;
        background: $text_color;
        &:hover {
            background: $link_color;
        }
    }
  }
}

.cat-children {
    border-top: 1px solid lighten($text_color,60%);
    padding: 20px 0;
    .page-header {
        padding-bottom: 5px;
    }
    h3 {
        font-size: 16px;
    }
}

// Megamenu
.sp-megamenu-parent {
	>li {
		> a {
			color: $menu_text_color;
			&:hover {
			    color: $menu_text_hover_color;
			}
		}

		&.active > a,
		&.active:hover > a {
			color: $menu_text_active_color;
		}
	}
	
	.special {
	    transition: all 400ms;
		> a {
		    color: $menu_text_color;
			border: 1px solid $menu_text_color;
			border-radius: 4px;
			padding: 5px 15px;
			margin-right: 15px;
			&:hover {
			    color: #fff;
			    background: $link_color;
			    border-color: $link_color;
			}
		}
		&.active > a, &.active:hover > a {
		    color: #fff;
		    background: $link_color;
		    border-color: $link_color;
		}
	}

	.sp-dropdown {

		.sp-dropdown-inner{
			background: $menu_dropdown_bg_color;
		}

		li.sp-menu-item {
			>a {
				color: $menu_dropdown_text_color;
                &:before {
        	        background-color: $link_color;
                    content: "";
                    display: inline-block;
                    height: 1px;
                    position: relative;
                    width: 0px;
                    bottom: 6px;
                    right: 0px;
                    transition: all 400ms;
        	    }
				transition: all 400ms;
				&:hover {
					color: $menu_dropdown_text_hover_color;
                    &:before {
                        width: 20px;
                        right: 5px;
        	        }
				}
			}
			&.active>a {
				color: $menu_dropdown_text_active_color;
                &:before {
        	        background-color: $link_color;
                    content: "";
                    display: inline-block;
                    height: 1px;
                    position: relative;
                    width: 25px;
                    bottom: 6px;
                    right: 5px;
        	    }
			}
		}
	}

	.sp-mega-group {
		> li {
			>a {
				color: lighten($menu_dropdown_text_color,15%);
			}
		}
	}
}

// Off Canvas
#offcanvas-toggler {
	>.fa {
		color: $menu_text_color;
		&:hover,
		&:focus,
		&:active {
			color: $menu_text_hover_color;
		}
	}
}

.offcanvas-menu {
    background-color: $menu_dropdown_bg_color;
    color: $menu_dropdown_text_color;
    .offcanvas-inner {
        .sp-module {
            ul {
                > li {
                    a,
                    span {
                        color: $menu_dropdown_text_color;

                        &:hover,
                        &:focus{
                            color: $menu_dropdown_text_hover_color;
                        }
                    }

                    &.menu-parent {
                        >a,
                        >.menu-separator {
                            >.menu-toggler {
                            	@if $menu_dropdown_text_color { color: fade-out($menu_dropdown_text_color, 0.5); }
                            }
                        }

                    }

                    ul {
                        li {
                            a {
                            	@if $menu_dropdown_text_color { color: fade-out($menu_dropdown_text_color, 0.2); }
                            }
                        }
                    }
                }
            }
        }
    }
}

.sp-scroll-up {
    background: $link_color !important;
    &:hover, &.active, &.focus {
        background: $link_hover_color !important;
    }
}

//Button
.btn-primary,
.sppb-btn-primary {
	border-color: $link_color;
	background-color: $link_color;
	&:hover {
		border-color: $link_hover_color;
		background-color: $link_hover_color;
	}
}

.btn-outline-secondary {
    color: lighten($text_color,55%);
    border-color: lighten($text_color,55%);
    &:hover{
        color: #fff;
        background: lighten($text_color,55%);
        border-color: lighten($text_color,55%);
    }
}

// Topbar Social & Contact
ul.social-icons, ul.sp-contact-info {
	>li {
		a {
			&:hover {
				color: #fff !important;
			}
		}
	}
}

// Page Title
#sp-page-title {
	background: $link_color;
}

// Body Innerwrapper

.layout-boxed .body-innerwrapper {
	background: $bg_color;
}

// Module
.sp-module {
	ul {
		>li {
			>a {
				color: $text_color;
				&:hover {
					color: $link_color;
				}
			}
		}
	}
	
    &.title1 {
	    .sp-module-title {
	        margin-bottom: 40px;
            color: #fff;
                &:after {
	            background-color: $link_color;
                content: "";
                display: block;
                height: 1px;
                position: relative;
                width: 50px;
                top:22px;
	        }
	    }
    }

	.latestnews {
		>div {
			>a {
				color: $text_color;
				&:hover {
					color: $link_color;
				}
			}
		}
	}

	.tagscloud {
		.tag-name {
			&:hover {
				background: $link_color;
			}
		}
	}
}

// Search
.search {
	.btn-toolbar {
		button {
			background: $link_color;
		}
	}
}

// Footer
#sp-footer {
	background: $footer_bg_color;
	color: $footer_text_color;
	a {
		color: $footer_link_color;

		&:hover,
		&:active,
		&:focus {
			color: $footer_link_hover_color;
		}
	}
}

#sp-bottom {
	background: $footer_bg_color;
	color: $footer_text_color;
	a {
		color: $footer_text_color;

		&:hover,
		&:active,
		&:focus {
			color: $footer_link_color;
		}
	}
	
	ul {
	    li {
	        a {
                &:before {
        	        background-color: $link_color;
                    content: "";
                    display: inline-block;
                    height: 1px;
                    position: relative;
                    width: 0px;
                    bottom: 6px;
                    right: 0px;
                    transition: all 400ms;
        	    }
        	    &:hover {
        	        &:before {
                        width: 25px;
                        right: 5px;
        	        }
        	    }
	        }
	    }
	}
}

#sp-bottom {
    color: $footer_text_color;
	.sp-module-content {
		.latestnews {
			> li {
				> a {
				    color: $footer_text_color;
					>span {
						color: $footer_text_color;
					}
				}
			}
		}
	}
}

// Comingsoon
.sp-comingsoon body {
	background-color: $link_color;
}

// Pagination
.pagination>li>a,
.pagination>li>span {
	color: $text_color;
	&:hover,
	&:focus {
		color: $text_color;
	}
}

.pagination>.active>a,
.pagination>.active>span {
	border-color: $link_color;
	background-color: $link_color;
	&:hover,
	&:focus {
		border-color: $link_color;
		background-color: $link_color;
	}
}

.page-item.active .page-link {
    color: #fff;
    background: $text_color;
    border-color: $text_color;
}

.page-link {
    padding: 10px 20px;
}

.pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    color: #fff;
    background: $link_color;
    border-color: $link_color;
}

// Error
.error-code,
.coming-soon-number {
	color: $link_color;
}

// Page Builder
.sppb-panel-faq > .sppb-panel-heading {
    transition: all 400ms;
    &.active, &:hover {
        color: $link_color;
    }
}

.sppb-panel-modern > .sppb-panel-heading {
    color: $text_color;
    background: lighten($text_color,71%);
}

.sppb-panel-modern .sppb-panel-body {
    border-color: lighten($text_color,71%);
}

.sppb-addon-article {
    .sppb-readmore {
        color: #fff;
        background: darken($link_color,8%);
        padding: 10px 15px;
        border-radius: 5px;
        &:hover {
            color: #fff !important;
            background: lighten($link_color,8%);
        }
    }
    
    .sppb-article-meta span {
        color: $text_color;
    }
}

.sppb-addon-persion .sppb-person-social > li > a, .sppb-addon-person .sppb-person-social > li > a {
    color: $link_color;
    &:hover {
        color: $link_hover_color;
    }
}

.sppb-person-designation {
    color: lighten($text_color,40%) !important;
}

.sppb-nav-lines {
    li {
        a {
            border-bottom: 10px solid $text_color !important;
            transition: all 400ms;
            &:hover {
                color: $link_color;
                border-color: $link_color !important;
            }
        }
    }
}

.sppb-nav-lines > li.active > a, .sppb-nav-lines > li.active > a:focus, .sppb-nav-lines > li.active > a:hover {
    color: $link_color !important;
    border-color: $link_color !important;
}

.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-panel {
	padding: 30px;
	&.left-part {
		color: #fff;
		background: $link_color;
		border: 1px solid $link_color;
		padding: 30px;
	}
	.title {
		font-weight: 700;
		margin-bottom: 20px;
	}
}

.sppb-addon-timeline .sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-panel {
	&.left-part::before {
		box-shadow: 4px -4px 2px -1px transparent;
		border-color: $link_color;
	}
}

.sppb-addon-timeline {
	.timeline-date {
		font-size: 20px !important;
		line-height: 70px !important;
		font-weight: 700;
		
		&.text-right {
			line-height: 90px !important;
		}
	}
}

.sppb-addon-timeline {
	&.personal { 
		.sppb-addon-timeline-wrapper .timeline-movement .timeline-item .timeline-panel {
			background: #fff;
			&.left-part {
				color: #fff;
				background: $link_color;
				border: 1px solid $link_color;
				&:before {
					border-color: $link_color;
				}
			}
		}
	}
}

.title1 {
    .sppb-addon-title {
            &:after {
            background-color: $link_color;
            content: "";
            display: block;
            height: 1px;
            position: relative;
            width: 50px;
            top:22px;
        }
    }
}

.title2 {
    .sppb-addon-title {
        &:before {
            background-color: $link_color;
            content: "";
            display: inline-block;
            height: 5px;
            position: relative;
            width: 50px;
            bottom: 12px;
            right: 10px;
        }
    }
}

.title3 {
    .sppb-addon-title {
            &:after {
                margin: -1px auto;
                background-color: $link_color;
                content: "";
                display: block;
                height: 1px;
                position: relative;
                width: 50px;
                top: 25px;
        }
    }
}

.title4 {
    .sppb-addon-title {
            &:after {
                margin: -1px auto;
                background-color: $link_color;
                content: "";
                display: block;
                height: 5px;
                position: relative;
                width: 50px;
                top: 25px;
                border-radius: 10px;
        }
    }
}

.title5 {
    .sppb-addon-title {
            &:after {
                margin: -1px auto;
                background-color: #fff;
                content: "";
                display: block;
                height: 5px;
                position: relative;
                width: 50px;
                top: 25px;
                border-radius: 10px;
        }
    }
}

.tp-caption a {
    color: #fff !important;
    font-size: 16px;
    border-bottom: 1px solid #fff;
    &:hover {
        color: rgba(255,255,255,0.7) !important;
        border-bottom: 1px solid rgba(255,255,255,0.7);
    }
}

// Custom Classes
.color-box {
    background: $link_color;
    display: inline-block;
    padding: 10px 15px;
}

.color-box2 {
    background: $text_color;
    display: inline-block;
    padding: 10px 15px;
}

.color-box3 {
    background: #a64df1;
    display: inline-block;
    padding: 20px 25px;
    border-radius: 5px;
}

.white-box {
    color: $link_color;
    background: #fff;
    display: inline-block;
    padding: 10px 15px;
}