/*!
 *  miniui 2019
 *  http://www.alvinhtml.com/
 *  Copyright 2019, Alvin.Yang
 */



// Global Variable

$red: #fa5a64;
$orange: #f48804;
$yellow: #fbbd08;
$olive: #c3d72d;
$green: #38c060;
$teal: #32c5d2;
$blue: #50d2fa;
$violet: #864fff;
$purple: #8c50c8;
$pink: #eb41a0;
$brown: #c87846;

$lightgray: #e6e6e6;
$gray: #acacac;
$black: #1b1c1d;


$white: #ffffff;

$dark: #000000;

$blue-steel: #4B77BE;
$code-color: #838fa1;

$text-color: #314659;
$title-color: #314659;
$link-color: #00C1DE;
$bg-color: #ffffff;

$color-list: (red: $red, orange: $orange, yellow: $yellow, green: $green, teal: $teal, blue: $blue, purple: $purple, pink: $pink, brown: $brown, white: $white, gray: $gray, black: $black);



// mixin
@mixin clear-both {
  &::after,
  &::before {
    display: table;
    content: '';
  }
  &::after {
    clear: both;
  }
}


// Miniui CSS resets
@import "init.scss";
@import "flex.scss";
@import "column.scss";



//  @import "layout.scss";
//  @import "dropdown.scss";
//  @import "plugins.scss";


// Animates
.animates {
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.animates:hover {
    -webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}

/* rotate */
.animates.rotate {
    -webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}

.animates.rotate:hover {
    -webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;

}

/* link-animate */
.link-animate, .link-animates a { position: relative; }
.link-animate::before, .link-animates a::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: #50d2fa;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
	top: 1.2em;
}
.link-animate:hover::before, .link-animates a:hover::before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}


@media screen and (min-width:1278px){
  .layout.center { max-width: 1278px; }
}

@media screen and (min-width:1000px) and (max-width:1277px) {
	.layout.center { max-width: 1000px; }
}

@media screen and (max-width:999px) {
	.layout.center { max-width: 999px; }
}