Professional Documents
Culture Documents
@import 'mixins';
@import 'tambah';
@import 'catcolor';
@import 'loginpopup';
@import 'wppb';
@import 'flickity';
@import 'widget';
/*-------------------------------------------------------------# Gathering
--------------------------------------------------------------*/
.subsup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
.blockdisp,
article, aside, details, figcaption, figure, footer,
header, main, menu, nav, section, summary {
display: block;
}
.blockmedia,
audio, canvas, progress, video {
display: inline-block;
vertical-align: baseline;
}
.inputan {
color: white;
font-family: $basefont2;
font-size: 16px;
font-size: 1rem;
-webkit-font-smoothing: antialiased;
letter-spacing: 0.3px;
text-align:justify;
line-height: 1.5;
margin: 0;
}
.btappear {
// -webkit-appearance: button;
cursor: pointer;
}
.site-content {
font : 300 20px/35px 'Roboto';
}
// .entry-meta { display:none;}
// -----------------------------------------------------audio:not([controls]) {
display: none;
height: 0;
}
[hidden], template { display: none; }
abbr[title] {
border-bottom: 1px dotted;
}
button[disabled],
html input[disabled] {
cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/*---------------------------------------------------------# Text Manipulation
----------------------------------------------------------*/
.bold,
b, strong {
font-weight: bold;
}
.italic,
dfn, cite, em, i{
font-style: italic;
}
.sup,
sup {
@extend .subsup;
top: -0.5em;
}
.sub,
sub {
@extend .subsup;
bottom: -0.25em;
}
mark { // ------------- huruf yang di mark
background: #ff0;
color: #000;
}
small {font-size: 80%;}
big {font-size: 125%;}
samp, code, kbd, tt, var {
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
font-size: 15px;
font-size: 0.9375rem;
}
pre {
font-family: "Robot";
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
overflow: auto;
}
blockquote, q {
margin: 0 1.5em;
quotes: "" "";
&:after, &:before {
content: "";
}
}
address { margin: 0 0 1.5em;}
abbr, acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
mark, ins {
background: #fff9c0;
text-decoration: none;
}
h1 {
margin: 0.67em 0;
font: 400 40px 'Roboto Condensed';
}
hr {
box-sizing: content-box;
border: 0;
background-color: #ccc;
height: 1px;
margin-bottom: 1.5em;
}
td, th { padding: 0;}
p { margin-bottom: 1.5em; }
a{
background-color: transparent;
text-decoration:none;
&:active, &:hover {
outline: 0;
color: #7b0266;
}
&:focus {
outline: thin dotted;
color: #7b0266;
}
&:visited {
color: #0905cc;
}
}
/*-------------------------------------------------------------# Alignments
--------------------------------------------------------------*/
.alignleft {
display: inline;
float: left;
margin-right: 1.5em;
}
.alignright {
display: inline;
float: right;
margin-left: 1.5em;
}
.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
/*-------------------------------------------------------------# Widgets
--------------------------------------------------------------*/
.widget { margin: 0 0 1.5em;}
/* Make sure select elements fit in widgets. */
.widget select {max-width: 100%;}
/*-------------------------------------------------------------# Normalize
--------------------------------------------------------------*/
html {
box-sizing: border-box;
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage
other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-bestpractice/ */
box-sizing: inherit;
}
body {
@extend .inputan;
//awal background: linear-gradient(74deg, #000000, #6900bf, #004dce);
background:#3a74b7;
background: linear-gradient(180deg, #a353e4, #3a74b7, #3a74b7, #a353e4);
background-size: 800% 800%;
@include animation (bganimation 30s infinite);
@include keyframes (bganimation) {
0%{background-position:51% 0%}
50%{background-position:50% 100%}
100%{background-position:51% 0%}
/* awal
0%{background-position:93% 0%}
50%{background-position:0% 100%}
100%{background-position:93% 0%} */
}
margin: 0;
// background: #fff; /* Fallback for when there is no custom background color defined. */
}
textarea {
@extend .inputan;
@extend .form_class_input;
overflow: auto;
width: 100%;
}
optgroup {
@extend .inputan;
font-weight: bold;
}
button {
@extend .inputan;
@extend .btappear;
@extend .form_class;
text-transform : none;
overflow: visible;
&:hover{
@extend .form_class_hover;
}
&:active, &:focus {
@extend .form_class_fca;
}
}
select {
@extend .inputan;
text-transform : none;
border: 1px solid #ccc;
}
input {
@extend .inputan;
line-height: normal;
&[type="button"],
&[type="reset"],
&[type="submit"] {
@extend .btappear;
@extend .form_class;
&:hover {
@extend .form_class_hover;
}
&:active, &:focus {
@extend .form_class_fca;
}
}
&[type="checkbox"],
&[type="radio"] {
box-sizing: border-box;
padding: 0;
}
&[type="number"]::-webkit-inner-spin-button,
&[type="number"]::-webkit-outer-spin-button {
height: auto;
}
&[type="search"]::-webkit-search-cancel-button,
&[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
}
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
legend {
border: 0;
padding: 0;
}
/*-------------------------------------------------------------# MENUS
--------------------------------------------------------------*/
.navigation-class {
float: left;
ul,li{
// display: block;
list-style: none;
margin: 0;
padding-left: 0;
transition: all 0.5s;
}
li:hover {
background-color: rgba(0, 0, 0, 0.6);
}
a{
display: block;
width: 100%;
height: 100%;
text-decoration: none;
// font-family: $basefont;
color: #FDFDFD;
// font-size: 13px;
font:400 13px/30px 'Roboto';
}
}
.nav-first {
> span {
height: 64px;
width :100% !important;
display: table-cell;
vertical-align: middle;
padding-left: 15px;
position: relative;
#nav-first-title{
@extend .hover_op;
display: inline;
font-family: $basefont;
font-size: 25px;
line-height: 0.8;
letter-spacing: 2px;
font-weight: 300;
font-size: 15px;
font-variant: normal;
}
&:after {
content: ' ';
color: #989595;
}
&:hover {
cursor: pointer;
font-style: normal;
&:after {
content: ' ';
color: #3E3B3B;
}
}
}
}
.menu-primary-container {
// transition: all 2s;
display: none;
background-color: rgb(26, 0, 70);
position: absolute;
left: 26px;
top: 62px;
z-index: 999;
&:before {
content: "";
display: block;
width: 0;
height: 0;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
border-bottom: 26px solid rgba(24, 6, 56, 0.98);
position: absolute;
left: 27px;
top: -25px;
}
> ul {
width:160px;
height: auto;
li {
position: relative;
height: auto;
padding: 8px 15px;
ul {
display: none;
position:absolute;
top:0px;
left: 160px;
background-color: #411bb3;
width: 130px;
li{
border-bottom: 1px solid rgba(255, 255, 255, 0.26);
}
}
&:hover {
ul {
display: block;
}
}
}
}
}
.menu-secondary-container {
padding-left:10px;
ul {
height: 50px;
li {
float: left;
height: 50px;
display: table;
position: relative;
a{
color : #6865cb;
font:700 15px/30px 'Roboto';
display: table-cell;
vertical-align: middle;
padding:0px 10px;
}
a:after {margin-left: 5px; content: '\25bf';}
a:hover:after {margin-left: 5px; content: '\25C8';}
a:only-child:after { margin-left: 0; content: '';}
ul {
display: none;
position:absolute;
z-index: 99;
top:50px;
left:0px;
background-color: #411bb3;
width: 200px;
height: auto;
li {
height: 40px;
width: 100%;
a{
color : #6865cb;
font:700 15px/30px 'Roboto';
display: table-cell;
vertical-align: middle;
padding:0px 10px;
}
}
}
&:hover {
ul {
display: block;
}
}
}
}
}
/* Small menu. */
/*
@media screen and (min-width: 37.5em) {
.menu-toggle {
display: none;
}
.main-navigation ul {
display: block;
}
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
margin: 0 0 1.5em;
overflow: hidden;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
float: left;
width: 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
float: right;
text-align: right;
width: 50%;
}
*/
/*-------------------------------------------------------------# FORM
--------------------------------------------------------------*/
.form_class {
background: #411bb3;
/* background-image: -webkit-linear-gradient(top, #411bb3, #2e1c66);
background-image: -moz-linear-gradient(top, #411bb3, #2e1c66);
background-image: -ms-linear-gradient(top, #411bb3, #2e1c66);
background-image: -o-linear-gradient(top, #411bb3, #2e1c66);
background-image: linear-gradient(to bottom, #411bb3, #2e1c66); */
// -webkit-border-radius: 3;
// -moz-border-radius: 3;
// border-radius: 3px;
font-family: $basefont;
color: #ffffff;
font-size: 14px;
padding: 6px 12px 6px 12px;
text-decoration: none;
// line-height: normal;
border:none;
transition: all 0.5s;
}
.form_class_hover {
background: $color1;
}
.form_class_fca {
outline: -webkit-focus-ring-color auto 0px !important;
}
.form_class_input,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"], {
color: #666;
border: 2px solid rgba(26, 0, 70, 0.85);
padding: 3px;
&:focus{
outline: -webkit-focus-ring-color auto 0px;
}
}
/*-------------------------------------------------------------# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
content: "";
display: table;
table-layout: fixed;
}
.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after,
h1, h2, h3,h4,h5,h6{
clear: both;
}
h2,h3 {
font: 400 30px 'Roboto Condensed';
}
/*-------------------------------------------------------------# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
&:focus {
background-color: #f1f1f1;
border-radius: 3px;
// box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000; /* Above WP toolbar. */
}
}
/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
outline: 0;
}
/*-------------------------------------------------------------# Content
--------------------------------------------------------------*/
margin: 0 0 1.5em;}
.byline,
.updated:not(.published) {
display: none;}
.single .byline,
.group-blog .byline { display: inline;}
.page-content,
.entry-content,
.entry-summary { margin: 1.5em 0 0; }
.page-links {
clear: both;
margin: 0 0 1.5em;
}
/*-------------------------------------------------------------## Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
display: none;
}
/*-------------------------------------------------------------## Comments
--------------------------------------------------------------*/
.comment-content a { word-wrap: break-word;}
.bypostauthor {display: block;}
/*-------------------------------------------------------------# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
display: none; }
/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via
.neverending) before. */
.infinity-end.neverending .site-footer {display: block; }
/*-------------------------------------------------------------# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}
/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object { max-width: 100%;}
/*-------------------------------------------------------------## Captions
--------------------------------------------------------------*/
.wp-caption {
margin-bottom: 1.5em;
max-width: 100%;
img[class*="wp-image-"] {
display: block;
margin-left: auto;
margin-right: auto;
}
}
.wp-caption-text {
text-align: center;
.wp-caption{
margin: 0.8075em 0;
}
}
/*-------------------------------------------------------------## Galleries
--------------------------------------------------------------*/
.gallery {
margin-bottom: 1.5em;
}
.gallery-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%;
}
.gallery-columns-2 .gallery-item {
max-width: 50%;
}
.gallery-columns-3 .gallery-item {
max-width: 33.33%;
}
.gallery-columns-4 .gallery-item {
max-width: 25%;
}
.gallery-columns-5 .gallery-item {
max-width: 20%;
}
.gallery-columns-6 .gallery-item {
max-width: 16.66%;
}
.gallery-columns-7 .gallery-item {
max-width: 14.28%;
}
.gallery-columns-8 .gallery-item {
max-width: 12.5%;
}
.gallery-columns-9 .gallery-item {
max-width: 11.11%;
}
.gallery-caption {
display: block;
}
//- --------------------------------------@import 'respon1';
@import 'respon2';
<?php
/**
* portknow functions and definitions.
*
* @link https://developer.wordpress.org/themes/basics/theme-functions/
*
* @package portknow
*/
if ( ! function_exists( 'portknow_setup' ) ) :
/**
* Sets up theme defaults and registers support for various WordPress features.
*
* Note that this function is hooked into the after_setup_theme hook, which
* runs before the init hook. The init hook is too late for some features, such
* as indicating support for post thumbnails.
*/
function portknow_setup() {
/*
* Make theme available for translation.
* Translations can be filed in the /languages/ directory.
* If you're building a theme based on portknow, use a find and replace
* to change 'portknow' to the name of your theme in all the template files.
*/
load_theme_textdomain( 'portknow', get_template_directory() . '/languages' );
// Add default posts and comments RSS feed links to head.
add_theme_support( 'automatic-feed-links' );
/*
* Let WordPress manage the document title.
* By adding theme support, we declare that this theme does not use a
* hard-coded <title> tag in the document head, and expect WordPress to
* provide it for us.
*/
add_theme_support( 'title-tag' );
/*
* Enable support for Post Thumbnails on posts and pages.
*
* @link https://developer.wordpress.org/themes/functionality/featured-images-postthumbnails/
*/
add_theme_support( 'post-thumbnails' );
// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
'primary' => esc_html__( 'Primary', 'portknow' ),
) );
/*
* Switch default core markup for search form, comment form, and comments
* to output valid HTML5.
*/
add_theme_support( 'html5', array(
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption',
) );
/*
* Enable support for Post Formats.
* See https://developer.wordpress.org/themes/functionality/post-formats/
*/
add_theme_support( 'post-formats', array(
'aside',
'image',
'video',
'quote',
'link',
) );
// Set up the WordPress core custom background feature.
add_theme_support( 'custom-background',
apply_filters( 'portknow_custom_background_args', array(
'default-color' => 'ffffff',
'default-image' => '',
) ) );
}
endif;
add_action( 'after_setup_theme', 'portknow_setup' );
/**
* Set the content width in pixels, based on the theme's design and stylesheet.
*
* Priority 0 to make it available to lower priority callbacks.
*
* @global int $content_width
*/
function portknow_content_width() {
$GLOBALS['content_width'] = apply_filters( 'portknow_content_width', 640 );
}
add_action( 'after_setup_theme', 'portknow_content_width', 0 );
/**
* Register widget area.
*
* @link https://developer.wordpress.org/themes/functionality/sidebars/#registering-a-sidebar
*/
function portknow_widgets_init() {
register_sidebar( array(
'name'
=> esc_html__( 'Sidebar', 'portknow' ),
'id'
=> 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'portknow' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
return $title;
});
// login redirect
/**
* Redirect user after successful login.
*
* @param string $redirect_to URL to redirect to.
* @param string $request URL the user is coming from.
* @param object $user Logged user's data.
* @return string
*/
function my_login_redirect( $redirect_to, $request, $user ) {
//is there a user to check?
if ( isset( $user->roles ) && is_array( $user->roles ) ) {
//check for admins
if ( in_array( 'administrator', $user->roles ) ) {
// redirect them to the default place
return $redirect_to;
} else {
return home_url();
}
} else {
return $redirect_to;
}
}
add_filter( 'login_redirect', 'my_login_redirect', 10, 3 );
// ganti logo
function my_login_logo() { ?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url(http://bacapikiran.com/wp-content/uploads/2016/07/croppediconbp.png);
padding-bottom: 30px;
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );
function my_login_logo_url() {
return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
function my_login_logo_url_title() {
return 'Bacapikiran, Merekah kedalam pikiran';
}
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, userscalable=no"/>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/fontawesome.min.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-43975084-2', 'auto');
ga('send', 'pageview');
</script>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#main"><?php esc_html_e( 'Skip to content',
'portknow' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<!-- <button id="ss" style="position: fixed; bottom: 100px;">as</button> -->
<div id="bg-top-head"><div class="top-head">
<h1 hidden class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<?php bloginfo( 'name' ); ?>
</a>
</h1>
<div id="post-navigation" class="navigation-class nav-first"
role="navigation">
<i class="material-icons ico-menu menu-mob-top"
onclick="openNav()">menu</i>
<span>
<span id="nav-first-title">Menu</span>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id'
=> 'primary-menu' ) ); ?>
</span>
</div><!-- #site-navigation -->
<div class="site-branding">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img id="ass" class="aligncenter" src="<?php
bloginfo('template_url'); ?>/img/bacapikiranputih.svg" />
</a>
</div><!-- .site-branding -->
<div class="top-right">
<div id="top-search" class="">
<?php get_search_form(); ?>
<i class="material-icons close-top-ico">close</i>
</div>
<div style="position: relative;height: 100%;">
<div id=top-ico>
<i class="material-icons search-top-ico">search</i>
<!-- <i class="material-icons">person</i> -->
<?php
if (is_user_logged_in ()) {
$cu_user = wp_get_current_user();
// $cu_id = $cu_user->ID;
// echo get_avatar($cu_id,'30');
echo '<a href="';
echo
get_permalink( get_page_by_path( 'edit-user' ) );
echo '" class="hover_op usr">'.$cu_user>display_name.'</a>';
?><a href="<?php echo
wp_logout_url( home_url() ); ?>" class="hover_op lgt" >Logout</a>
<?php } else {
?>
<a href="#openModal"><button
class="lgn">login</button></a><a href="<?php echo get_permalink( get_page_by_path( 'register' )
); ?>"><button class="rgt">signup</button></a>
<?php } ?>
</div>
</div>
</div>
</div></div>
<div class="bot-head">
<?php if (is_front_page()) : ?>
<div class="as">
<?php
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; ?
></p>
</div>
<?php endif; endif;?>
</div>
<div class="nav-head">
<div id="site-navigation" class="navigation-class nav-second">
<?php wp_nav_menu (array('theme_location' => 'secondarymenu','menu_class' => 'nav'));?>
</div>
<div class="mob-menu">
<i class="material-icons ico-menu" onclick="openNav()">menu</i>
<div class="search-bar"><?php get_search_form(); ?></div>
</div>
</div>
</header><!-- #masthead -->
<div id="content" class="site-content">
<!-- Side nav -->
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<div id="sideavatar">
<?php
if (is_user_logged_in ()) {
$cu_user = wp_get_current_user();
$cu_id = $cu_user->ID;
echo get_avatar($cu_id,'80');
echo '<a href="';
echo get_permalink( get_page_by_path( 'edit-user' ) );
echo '" class="hover_op usr">'.$cu_user->display_name.'</a>';
?><a href="<?php echo wp_logout_url( home_url() ); ?>" class="hover_op
lgt" >Logout</a>
<?php }
?>
</div>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
</div>
#wppb-edit-user {
padding: 10px 4px;
border: none;
border-radius: 4px;
background-color: rgba(26, 0, 70, 0.59);
color: #c3c3c3 !important;
}
label[for="edit_user"]{
font: 500 22px 'Roboto';
}
.wppb-user-forms {
ul {
margin :0px;
padding :0px;
.wppb-form-field {
list-style : none;
width: 70%;
@include displayflex (nowrap);
border-bottom:1px dashed rgba(26, 0, 70, 0.56);
padding:10px;
margin : 0px auto;
font: 300 18px 'Roboto' !important;
h4 {
width: 100%;
text-align: center;
font : 500 22px 'Roboto';
}
label {
@include flex (1);
padding-right:20px;
text-align: right;
.wppb-required {
color:red !important;
}
}
input , textarea, select {
@include flex (1);
padding : 10px 4px;
border : none;
border-radius :4px;
background-color: rgba(26, 0, 70, 0.59);
color :#c3c3c3 !important;
}
input[disabled]{
background-color: rgba(26, 0, 70, 0.2);
}
}
}
.form-submit {
text-align: center;
}
}
.alert, .wppb-error {
text-align :center;
font : 300 22px 'Roboto';
color :red;
}
#loginform {
p{
width: 70%;
min-width: 320px;
@include displayflex (nowrap);
border-bottom:1px dashed rgba(26, 0, 70, 0.56);
padding:10px;
margin : 0px auto;
font: 300 18px 'Roboto' !important;
label {
@include flex (1);
padding-right:20px;
text-align: right;
.wppb-required {
color:red !important;
}
}
#user_pass, #user_login {
@include flex (1);
padding : 10px 4px;
border : none;
border-radius :4px;
background-color: rgba(26, 0, 70, 0.59);
color :#c3c3c3 !important;
}
#wppb-submit {
margin:0 auto;
}
}
}
.login-register-lost-password {text-align:center;}
.flickity-enabled {
position: relative;
}
.flickity-enabled:focus { outline: none; }
.flickity-viewport {
overflow: hidden;
position: relative;
height: 100%;
}
.flickity-slider {
position: absolute;
width: 100%;
height: 100%;
}
/* draggable */
.flickity-enabled.is-draggable {
-webkit-tap-highlight-color: transparent;
tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.flickity-enabled.is-draggable .flickity-viewport {
cursor: move;
cursor: -webkit-grab;
cursor: grab;
}
.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
cursor: -webkit-grabbing;
cursor: grabbing;
}
/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
position: absolute;
top: 50%;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: white;
background: hsla(0, 0%, 100%, 0.75);
cursor: pointer;
/* vertically center */
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.flickity-prev-next-button:hover { background: white; }
.flickity-prev-next-button:focus {
outline: none;
box-shadow: 0 0 0 5px #09F;
}
.flickity-prev-next-button:active {
filter: alpha(opacity=60); /* IE8 */
opacity: 0.6;
}
.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
left: auto;
right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
right: auto;
left: 10px;
}
.flickity-prev-next-button:disabled {
filter: alpha(opacity=30); /* IE8 */
opacity: 0.3;
cursor: auto;
}
.flickity-prev-next-button svg {
position: absolute;
left: 20%;
top: 20%;
width: 60%;
height: 60%;
}
.flickity-prev-next-button .arrow {
fill: #333;
}
/* color & size if no SVG - IE8 and Android 2.3 */
.flickity-prev-next-button.no-svg {
color: #333;
font-size: 26px;
}
/* ---- page dots ---- */
.flickity-page-dots {
position: absolute;
width: 100%;
bottom: -25px;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
line-height: 1;
}
.flickity-rtl .flickity-page-dots { direction: rtl; }
.flickity-page-dots .dot {
display: inline-block;
width: 10px;
height: 10px;
margin: 0 8px;
background: #333;
border-radius: 50%;
filter: alpha(opacity=25); /* IE8 */
opacity: 0.25;
cursor: pointer;
}
.flickity-page-dots .dot.is-selected {
filter: alpha(opacity=100); /* IE8 */
opacity: 1;
}
/* position dots up a bit */
.flickity-page-dots {
bottom: -22px;
}
/* dots are lines */
.flickity-page-dots .dot {
height: 4px;
width: 40px;
margin: 0;
border-radius: 0;
}
.carousel-cell {
position:relative;
width: 299px;
height: 200px;
margin:0 2%;
border:1px solid black;
overflow: hidden;
border-radius:4px;
a{
text-align: right;
text-decoration: none;
width: 100%;
}
.car-title {
position: absolute;
z-index: 1;
bottom: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.76);
color: white;
padding:0 10px;
}
img{
width: 100%;
height: auto;
min-height: 100%;
position:absolute;
}
.cat-cat {
position:absolute;
top:0;
right:0;
font-size: 16px;
border-top-right-radius:4px;
}
}
.front-cat {
position:relative;
height: 950px;
.front-cat-desc {
margin: 10px 5%;
font-size: 23px;
color: #a7a1a1;
text-indent: 70px;
}
.front-cat-child {
margin:50px 2px;
text-align:center;
a{
font:300 18px/55px 'Roboto';
color: #a7a1a1;
padding: 10px;
margin:10px 1% ;
border:1px solid black;
}
}
.front-cat-desc {
padding-top: 20px;
}
}
#unik-box {
background-color:#047c8b;
path {
opacity: 1;
fill:#047c8b;
}
@media screen and (min-width: $break-large) {
.front-cat-title {
margin:0;
height: 130px;
position: relative;
top: -132px;
@include rotate(-4deg);
}
.front-cat-desc p {
margin-top: -100px;
}
}
}
#trick-box {
background-color:#6b5c07;
path {
opacity: 1;
fill:#6b5c07;
}
.front-cat-title {position: absolute;top: -100px;}
@media screen and (min-width: $break-large) {
.front-cat-title {
height: 143px;
position: absolute;
top: -198px;
right: 1px;
@include rotate(3deg);
}
}
}
.front-cat-title {
margin: 0 auto;
display: block;
height: 100px;
}
.main1 {
margin-bottom: -10px !important;
#well {
font: 700 40px/46px 'Roboto';
text-align: center;
margin: 100px 0;
}
.well-box {
width: 300px;
height: auto;
margin:20px auto;
img {
width: 300px;
}
.br2 {
font: 500 44px/34px 'Roboto';
color: #f46a1a;
position: relative;
top: -106px;
left: 20px;
}
.br1 {
font: 700 46px/34px 'Roboto';
color: #ff926e;
position: relative;
top: -103px;
left: 20px;
}
}
.front-quote {
position: relative;
margin: 50px 0 200px;
blockquote p {
font-size: 23px;
margin: 0;
border-top: 4px dashed white;
border-bottom:0;
padding: 20px 0 0;
color:#383838;
}
p{
font-size: 18px;
margin:0 1.5em;
padding-bottom: 20px;
border-bottom: 4px dashed white;
}
}