@import "compass";

////////////////////
/// Typhography ///
//
// Font Family
$font-family: Montserrat;
//
// Font Weights
$fw-300: 300;
$fw-400: 400;
$fw-500: 500;
$fw-600: 600;
//
// Font Size
$fs-small: 12px;
$fs-medium: 14px;
$fs-default: 16px;
$fs-large: 18px;
$fs-extra-large: 24px;
//
////////////////////
///    colors   /// 
//
// Base Colors
$white: #fff;
$black: #000;
$gray: #333;
$puple: #b95ed5;
$pink: #f79494;
//
// Text Colors
$font-white: $white;
$font-black: $black;
$font-gray: $gray;
$font-puple: $puple;
$font-pink: $pink;
//
// Background Colors
$background-white: $white;
$background-black: $black;
$background-gray: $gray;
$background-puple: $puple;
$background-pink: $pink; 
//
// Border Colors
$border-white: $white;
$border-black: $black;
$border-gray: $gray;
$border-pink: $pink;

// Create mixin for font-weight and font-size properties
@mixin custom-font($fontsize, $fontweight) {
    font-weight: $fontweight;
    font-size: $fontsize;
}

// Create mixin for transition property
@mixin transition($time, $type, $property) {
    transition: $time $type $property;
    -moz-transition: $time $type $property;
    -webkit-transition: $time $type $property;
}

// Create mixin for transition property with transition dela
@mixin transition-with-delay($tim, $dela, $typ, $propert) {
    transition: $tim $dela $typ $propert;
    -moz-transition: $tim $dela $typ $propert;
    -webkit-transition: $tim $dela $typ $propert;
}

// Create mixin for border-radius property
@mixin border-radius($radius) {
    border-radius: $radius;
    -moz-border-radius: $radius;
    -webkit-border-radius: $radius;
}

// Create mixin for transition property
@mixin box-shadow($shadow) {
    box-shadow: $shadow;
    -moz-box-shadow: $shadow;
    -webkit-box-shadow: $shadow;
}

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700i,800,800i,900,900i');




/*======================
Check Boxes Styles
========================*/

input[type='checkbox'] {
    opacity: 0;
    z-index: -1;
}

input[type='checkbox']+label {
    width: 25px;
    height: 25px;
    display: block;
    position: relative;
    margin: 20px 15px 25px 40px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    text-indent: 40px;
    overflow: visible;
    border: 1px solid #8E8E8E;
    cursor: pointer;
    font-size: 24px;
    font-style: 'Roboto', sans-serif;
}

/*-------------------
  #checkbox-a style
  ------------------*/

input[type='checkbox'].high_chbox + label {
    width: 30px;
    height: 40px;

    background: transparent url(../img/gr_sq.png) no-repeat;
    background-position: center;

    border: 1px solid transparent;
    margin: -10px 15px 30px 30px; 
}

input[type='checkbox'].high_chbox:checked+label {
    background: transparent url(../img/full_sq.png) no-repeat;
    background-position: center;

    border: 1px solid transparent;
    margin: -10px 15px 30px 30px; 
}

input[type='checkbox'].tick+label {
    width: 26px;
    height: 26px;

    background: transparent url(../img/negalka2.png) no-repeat;
    background-position: center top;

    border: 1px solid transparent;
    margin: -10px 15px 30px 50px; 
}

input[type='checkbox'].tick:checked+label {
    background: transparent url(../img/galka.png) no-repeat;
    background-position: center top;

    border: 1px solid transparent;
    margin: -10px 15px 30px 50px; 
}

input[type='checkbox'].img_tick+label {
    width: 26px;
    height: 26px;

    background: transparent url(../img/negalka2.png) no-repeat;
    background-position: center center;

    border: 1px solid transparent;
    margin: -10px 15px 30px 50px; 
}

input[type='checkbox'].img_tick:checked+label {
    background: transparent url(../img/galka.png) no-repeat;
    background-position: center center;

    border: 1px solid transparent;
    margin: -10px 15px 30px 50px; 
}

input[type='checkbox'].heart+label {
    width: 28px;
    height: 26px;

    background: transparent url(../img/gr_kr.png) no-repeat;
    background-position: center center;

    border: 1px solid transparent;
    margin: -10px 15px 30px 35px; 
}

input[type='checkbox'].heart:checked+label {
    background: transparent url(../img/heart.png) no-repeat;

    border: 1px solid transparent;
    margin: -10px 15px 30px 35px; 
}