/** EGA GLOGBAL
    Author: Tu.Nguyen

    1 Font icon
    2 Helper Class
    3 Grid
    4 Component
        4.1 Widget
        4.2 Box
        4.3 Button
        4.4 Form
        4.5 Socials button
        4.6 Filter
        4.7 Pagination
        4.8 Menu
        4.9 Comment
    5 Product
        5.1 Product
        5.2 Product Item
    
**/

@import 'variables';

@font-face {
	font-family: 'font-icons';
	src:  url(../fonts/font-icons.eot);
	src:  url(../fonts/font-icons.eot) format('embedded-opentype'),
		url(../fonts/font-icons.ttf) format('truetype'),
		url(../fonts/font-icons.woff) format('woff'),
		url(../fonts/font-icons.svg) format('svg');
	font-weight: normal;
	font-style: normal;
}

.ut-icon-envelope:before{content: "\61"}
.ut-icon-phone:before{content: "\63"}
.ut-icon-envelope-o:before{content: "\62"}
.ut-icon-caret-down:before{content: "\64"}
.ut-icon-caret-left:before{content: "\65"}
.ut-icon-caret-right:before{content: "\66"}
.ut-icon-caret-up:before{content: "\67"}
.ut-icon-angle-down:before{content: "\68"}
.ut-icon-angle-left:before{content: "\69"}
.ut-icon-angle-right:before{content: "\6a"}
.ut-icon-angle-up:before{content: "\6b"}
.ut-icon-angle-double-up:before{content: "\6c"}
.ut-icon-angle-double-right:before{content: "\6d"}
.ut-icon-angle-double-left:before{content: "\6e"}
.ut-icon-angle-double-down:before{content: "\6f"}
.ut-icon-facebook:before{content: "\70"}
.ut-icon-google-plus:before{content: "\71"}
.ut-icon-twitter:before{content: "\72"}
.ut-icon-youtube:before{content: "\73"}
.ut-icon-youtube-play:before{content: "\74"}
.ut-icon-user:before{content: "\75"}
.ut-icon-instagram:before{content: "\76"}
.ut-icon-calendar:before{content: "\77"}
.ut-icon-eye:before { content: "\78"; }
.ut-icon-shopping-cart:before { content: "\79"; }
.ut-icon-ban:before { content: "\7a"; }
.ut-icon-thumbnails:before { content: "\41"; }
.ut-icon-list-bullet:before { content: "\42"; }
.ut-icon-search-plus:before { content: "\43";}
.ut-icon-check:before { content: "\44"; }
.ut-icon-arrow-right:before { content: "\45"; }
.ut-icon-arrow-left:before { content: "\46"; }
.ut-icon-arrow-down:before { content: "\47"; }
.ut-icon-arrow-up:before { content: "\48"; }
.ut-icon-search:before { content: "\49"; }
.ut-icon-cross-mark:before { content: "\4a"; }
.ut-icon-minus:before { content: "\4c"; }
.ut-icon-plus:before { content: "\4b"; }
.ut-icon-cancel:before { content: "\4d"; }
.ut-icon-filter:before { content: "\4e"; }
.ut-icon-star:before { content: "\4f"; }
.ut-icon-clock-o:before { content: "\50"; }
.ut-icon-car:before { content: "\51"; }
.ut-icon-star-half:before { content: "\52"; }
.ut-icon-star-half-o:before { content: "\53"; }
.ut-icon-star-o:before { content: "\54"; }
.ut-icon-reorder-square:before { content: "\55"; }
.ut-icon-reorder:before { content: "\56"; }
.ut-icon-barcode:before { content: "\57"; }
.ut-icon-users:before { content: "\58"; }
.ut-icon-user-plus:before { content: "\59"; }
.ut-icon-plane:before { content: "\5a"; }
.ut-icon-male:before { content: "\30"; }

[class*=ut-icon-] {
	font-family: 'font-icons' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/** Reset CSS **/
* { box-sizing: border-box; }
body { line-height: 1.5; }
img { max-width: 100%; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-top: 0;
    margin-bottom: $grid_gutter;
}
h1, .h1 { font-size: 36px }
h2, .h2 { font-size: 30px }
h3, .h3 { font-size: 24px }
h4, .h4 { font-size: 20px }
h5, .h5 { font-size: 18px }
h6, .h6 { font-size: 16px }
/** End Reset CSS **/

/** Helper Class **/
hr {
    border: 0;
    clear: both;
    border-top: 1px solid #ccc;
    margin-top: $grid_gutter;
    margin-bottom: $grid_gutter;
}
.ut-hidden {
    display: none!important;
    &--xs {
        @media (max-width: 567px) {
            display: none!important;
        }
    }
    &--sm {
        @media (min-width: 568px) and (max-width: 767px) {
            display: none!important;
        }
    }
    &--md {
        @media (min-width: 768px) and (max-width: 991px) {
            display: none!important;
        }
    }
    &--lg {
        @media (min-width: 992px) and (max-width: 1199px) {
            display: none!important;
        }
    }
    &--xl {
        @media (min-width: 1200px) {
            display: none!important;
        }
    }
}
.ut-ul {
    padding-left: 0;
    margin-top: 0;
	list-style: none;
}
.ut-clear {
	clear: both;
	&--left { clear: left; }
	&--right { clear: right; }
}
.ut-nomargin { 
	margin: 0!important; 
	&--top { margin-top: 0!important; }
	&--right { margin-right: 0!important; }
	&--bottom { margin-bottom: 0!important; }
	&--left { margin-left: 0!important; }
}

.ut-nopadding { 
	padding: 0!important; 
	&--top { padding-top: 0!important; }
	&--right { padding-right: 0!important; }
	&--bottom { padding-bottom: 0!important; }
	&--left { padding-left: 0!important; }
}

.ut-noradius { border-radius: 0!important; }

.ut-radius { border-radius: 5px; }
.ut-border { border: 1px solid #ddd; }

.ut-float--left { float: left!important; }
.ut-float--right { float: right!important; }

.ut-text--left { text-align: left!important; }
.ut-text--right { text-align: right!important; }
.ut-text--center { text-align: center!important; }
/** End Helper Class **/


/** Grid **/
.ut-container {
    width: 100%;
    //padding-right: $grid_gutter;
    //padding-left: $grid_gutter;
    margin-right: auto;
    margin-left: auto;

    @media (min-width: 567px) {
        max-width: 540px;
    }

    @media (min-width: 768px) {
        max-width: 720px;
    }

    @media (min-width: 992px) {
        max-width: 960px;
    }

    @media (min-width: 1200px) {
        max-width: 1170px;
    }
}
.ut-row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -$grid_gutter;
	margin-right: -$grid_gutter;
}
.ut-col, [class*=ut-col-] {
	padding-left: $grid_gutter;
	padding-right: $grid_gutter;
}

/** Break point **/
$breakpoint_sm: (576px, sm);
$breakpoint_md: (768px, md);
$breakpoint_lg: (992px, lg);
$breakpoint_xl: (1200px, xl);

/** Collumn **/

@mixin ega_col_flex() {
	-ms-flex-preferred-size: 0; flex-basis: 0; -ms-flex-positive: 1;	flex-grow: 1; max-width: 100%;
}
@mixin ega_col($i, $collumns) {
	-ms-flex: 0 0 percentage($i / $collumns);
	flex: 0 0 percentage($i / $collumns);
	max-width: percentage($i / $collumns);
}
.ut-col {
	@include ega_col_flex();
}
@for $i from 1 through 12 {
	.ut-col-#{$i} {
		@include ega_col($i, 12);
	}
}
@each $i in 20, 30, 40, 60, 70, 80, 90 {
	.ut-col-#{$i} {
		@include ega_col($i, 100);
	}
}
@each $breakpoint, $infix in $breakpoint_sm, $breakpoint_md, $breakpoint_lg, $breakpoint_xl {
	@media (min-width: $breakpoint) {
		.ut-col-#{$infix} {
			@include ega_col_flex();
		}
		@for $i from 1 through 12 {
			.ut-col-#{$infix}-#{$i} {
				@include ega_col($i, 12);
			}
	}
	.ut-col-ten { 
		@include ega_col(10, 100); 
	}
	@each $i in 20, 30, 40, 60, 70, 80, 90 {
		.ut-col-#{$infix}-#{$i} {
			@include ega_col($i, 100);
		}
}
}
}
/** End Grid **/


/** Component **/
/** Item **/
.ut-widget {
    padding: $grid_gutter;
    &__heading {
        margin-top: 0;
        margin-bottom: $grid_gutter;
        font-size: 18px;
    }
}
.ut-box {
    display: block;
    position: relative;
    border: 1px solid #ccc;
    padding: $grid_gutter;
}
/** Button **/
.ut-btn {
    text-decoration: none;
    display: inline-block;
    padding: 0 12px;
    height: $input_height;
    margin-bottom: 0;
    font-size: 1em;
    font-weight: normal;
    line-height: $input_height;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 0;

    &--full {
        display: block;
        width: 100%;
    }
	&--absolute {
		height: 100%;
		position: absolute;
		top: 0;
		&.left {
			left: 0;
		}
		&.right {
			right: 0;
		}
	}

	&--dark {
		background-color: #000;
		color: #fff;
	}
}
/** End Button **/

/** Form **/
.ut-form {
    &__group:not(:last-child) {
        margin-bottom: $grid_gutter;
    }
    &__label {
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
    }
    &__control {
        margin: 0;
        height: $input_height;
        display: block;
        width: 100%;
        font-size: 14px;
        line-height: $input_height - 2px;
        padding: 0 10px;
        background-color: #fff;
        background-image: none;
        background-clip: padding-box;
        border: 1px solid $border_color;
    }
}
textarea.ut-form__control {
    height: auto;
}

.ut-checkbox-group {
    input[type="checkbox"] {
        display: none;
    }
    span, strong {
        display: inline-block;
        position: relative;
        padding-left: 21px;
        cursor: pointer;
        &::before, &::after {
            content: "";
            display: inline-block;
            position: absolute;
        }
        &::before {
            width: 12px;
            height: 12px;
            left: 0;
            top: 2px;
            border: 1px solid $text_color;
            background-color: #fff;
            -webkit-transition: border 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out;
            transition: border 0.15s ease-in-out;
        }
        &::after {
            width: 12px;
            height: 12px;
            left: 1px;
            top: 3px;
            background-color: $text_color;
            -webkit-transform: scale(0, 0);
            -ms-transform: scale(0, 0);
            -o-transform: scale(0, 0);
            transform: scale(0, 0);
            -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        }
    }
    input[type="checkbox"]:checked {
        + span::after, + strong::after {
            -webkit-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            -o-transform: scale(1, 1);
            transform: scale(1, 1);
        }
    }
}
/** End Form **/

/** Ega Socials **/
.ut-socials {
	&__item {
		display: inline-block;
		width: 32px;
		height: 32px;
		text-align: center;
		line-height: 35px;
		margin-left: 5px;
		font-size: 1.2em;
		&:first-child {
			margin-left: 0;
		}
		i, span {
			line-height: 32px;
			color: #fff;
		}
		&--facebook { background-color: #4e598f; }
		&--twitter { background-color: #03a9f4; }
		&--gplus { background-color: #ff3d00; }
		&--youtube { background-color: #d22215; }
		&--instagram { background-color: #6c27b3; }
	}
	&--round {
		.ut-socials__item {
			border-radius: 50%;    
		}
	}
	&--radius {
		.ut-socials__item {
			border-radius: 3px;
		}
	}
}
/** End Ega Socials **/

/** Filter **/
.ut-filter {
    @media (max-width: 767px) {
        position: fixed;
        width: 100%;
        z-index: 11;
        background-color: #fff;
        left: 0;
        top: 100%;
        height: 100%;
        overflow-y: auto;
        padding-bottom: 50px;
        transition: top .4s ease;
    }
    &.show {
        @media (max-width: 767px) {
            top: 0;
        }
    }

    &__list {
        padding-left: $grid_gutter;
        margin-bottom: $grid_gutter;
        margin-top: 0;
        list-style: none;
        &:last-child {
            margin-bottom: 0;
        }
        .ut-filter__list {
          margin-top: 5px;
        }
    }
    &__heading {
        margin-top: 0;
        margin-bottom: 10px;
        font-size: 14px;
    }
    &__item {
        margin-bottom: 10px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    &__control-mobile {
        font-size: 16px;
        line-height: 30px;
        z-index: 12;
        position: fixed;
        width: 100%;
        height: 50px;
        bottom: 0;
        left: 0;
        background: #fff;
        -webkit-box-shadow: 0px -5px 38px -5px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px -5px 38px -5px rgba(0, 0, 0, 0.75);
        box-shadow: 0px -5px 38px -5px rgba(0, 0, 0, 0.75);
        padding: 0 $grid_gutter;
        display: flex;
        flex-wrap: wrap;
        > a {
            display: block;
            padding: 10px 0;
            flex: 1;
            color: #666666;
        }
        > .ut-btn {
            padding: 0;
            margin-top: 5px;
            margin-bottom: 5px;
        }
    }
}
/** End Filter **/


/** Pagination **/
.ut-pagination {
    text-align: center;

    li {
        display: inline-block;
      span,
        a {
            text-decoration: none;
            display: block;
            background-color: #fff;
            width: 35px;
            height: 40px;
            line-height: 40px;
            border-radius: 3px;
            color: $text_color;
        }
        a:hover,
        .current{
            background-color: $text-color;
            color: #fff;
        }
    }
}
.page-numbers {
  display: inline-block;
   li {
     list-style: none;
   }
}

.ut-ul {
  margin-left: auto;
}

/** End Pagination **/

/** Menu **/
.ut-menu {
    padding-left: 0;
    list-style: none;
    background-color: #fff;
    position: relative;
    margin: auto;
    &__item {
        > a {
            display: block;
            padding-left: 20px;
            padding-right: 20px;
            line-height: 50px;
            text-decoration: none;
            position: relative;
        }
    }
    &--horizontal {
        flex-wrap: wrap;
        display: flex;
        > .ut-menu__item {
            position: relative;
        }
    }
}
/** End Menu **/

/** Comment **/
.ut-comment {
    &__item {
        position: relative;
        padding-left: 100px;
        padding-top: 2 * $grid_gutter;
        &:not(:last-child) {
            .ut-comment__content {
                border-bottom: 1px solid $border_color;
            }
        }
        @media (max-width: 575px) {
            padding-left: 70px;
        }
    }
    &__avatar {
        position: absolute;
        width: 70px;
        height: 70px;
        overflow: hidden;
        border-radius: 50%;
        left: 0;
        top: 2 * $grid_gutter;
        @media (max-width: 575px) {
            width: 60px;
            height: 60px;
        }
    }
    &__name {
        margin-bottom: 5px;
    }
    &__date {
        margin-bottom: $grid_gutter;
    }
    &__content {
        padding-bottom: 2 * $grid_gutter;
    }
    &__review {
        margin-bottom: $grid_gutter;
    }
    &__rating {
        overflow: hidden;
        &__item {
            margin-bottom: $grid_gutter;
        }
        &__label {
            margin-right: 10px;
        }
        &__content {
            float: right;
        }
        i {
            line-height: inherit;
            vertical-align: top;
        }
    }
    &__form {
        padding-top: 2 * $grid_gutter;
        padding-bottom: 2 * $grid_gutter;
    }
}
/** End Comment **/
/** End Component **/


/** Product **/
.ut-product {
    &__image {
        position: relative;
    }
    &__main-image {
        margin-bottom: $grid_gutter;
    }
    &__sale-tag {
        padding: 5px 15px;
        display: block;
        position: absolute;
        top: 15px;
        left: 15px;
        background-color: #fff;
        color: $text_color;
    }
	&__title {
		margin-top: 0;
        margin-bottom: 15px;
        font-size: 24px;
        > a {
            color: $heading_color;
            text-decoration: none;
        }
	}
	&__price {
		text-decoration: none;
		font-weight: bold;
        font-size: 24px;
	}
	&__compare-price {
        color: #999;
        font-size: 18px;
		font-weight: normal;
    }
    &__rating {
        line-height: 1.4;
        &, > span {
            vertical-align: top;
        }
        > span {
            margin-left: 5px;
        }
        i {
            line-height: inherit;
        }
    }

    /** Product Item **/
    &--item {
        width: 100%;
        .ut-product {
            &__content {
                padding: $grid_gutter;
            }
            &__title {
                font-size: 16px;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                margin-top: 0;
                @media (max-width: 991px) {
                    font-size: 16px;
                }
            }
            &__price {
                font-size: 16px;
            }
            &__compare-price {
                font-size: 14px;
            }
            &__detail, &__description {
                margin-bottom: $grid_gutter;
            }
            &__description {
                color: #999;
            }
        }
    }
    /** End Product Item **/
}
.ut-collection {
    &__products-container {
        @media (max-width: 767px) {
            padding-bottom: 50px;   
        }
    }
}
.list {
    .ut-collection {
        &__product-col {
            max-width: 100%;
            flex: 0 0 100%;
            .ut-product {
                &__image, &__content {
                    width: 50%;
                    float: left;
                }
                &__image {
                    padding-right: $grid_gutter;
                }
                &__content {
                    padding: 2 * $grid_gutter $grid_gutter 2 * $grid_gutter 0;
                }
                &__title {
                    @media (max-width: 991px) {
                        white-space: nowrap;
                        display: block;
                    }
                }
                &--item {
                    overflow: hidden;
                }
            }
        }
    }
}
/** End Product **/

.ut-{
  &alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
  }
  &alert h4 {
    margin-top: 0;
    color: inherit;
  }
  &alert &alert-link {
    font-weight: bold;
  }
  &alert > p,
  &alert > ul {
    margin-bottom: 0;
  }
  &alert > p + p {
    margin-top: 5px;
  }
  &alert-dismissable,
  &alert-dismissible {
    padding-right: 35px;
  }
  &alert-dismissable .close,
  &alert-dismissible .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
  }
  &alert-success {
    color: #3c763d;
    background-color: #dff0d8;
    border-color: #d6e9c6;
  }
  &alert-success hr {
    border-top-color: #c9e2b3;
  }
  &alert-success &alert-link {
    color: #2b542c;
  }
  &alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1;
  }
  &alert-info hr {
    border-top-color: #a6e1ec;
  }
  &alert-info &alert-link {
    color: #245269;
  }
  &alert-warning {
    color: #8a6d3b;
    background-color: #fcf8e3;
    border-color: #faebcc;
  }
  &alert-warning hr {
    border-top-color: #f7e1b5;
  }
  &alert-warning &alert-link {
    color: #66512c;
  }
  &alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
  }
  &alert-danger hr {
    border-top-color: #e4b9c0;
  }
  &alert-danger &alert-link {
    color: #843534;
  }
}