/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
$pm: 0.0px;
$u: 32;
$r: 1.0px;
$mp: 1.0px;
$p: '';


@import "general/positions";
@import "general/material";

@import "general/flexy";
@import "general/animations";
@import "general/nasted";

body, html, *, input, select, img {
    font-family: Byekan !important;
    font-weight: 100 !important;
    margin: 0;
    padding: 0;
}

hr {
    opacity: 0.3;
}

.rawBlock > form {
    @include f;
    @include f-r;
    @include f-nw;
    @include f-as;
    @include f-js;
    @include f-cs;
}


hr {
    opacity: 0.3;
}

.c-iselect2 {
    background-color: #b6ff00 !important;
    font-size: 16px;
    font-weight: 700;
    color: Red !important;
}


.rawBlock > form {
    @include f;
    @include f-r;
    @include f-nw;
    @include f-as;
    @include f-js;
    @include f-cs;
}


.colorCanvas {
    -webkit-user-select: none;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-align: stretch;
    -webkit-box-pack: start;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-align: stretch;
    -moz-box-pack: start;
}

.colorCanvas canvas {
    display: block;
}

.colorCanvas label {
    display: block;
    overflow: hidden;
}

.colorCanvas label span {
    display: block;
    float: left;
    width: 30px;
    line-height: 25px;
}

.colorCanvas label span:after {
    content: ':';
}

.colorCanvas label input {
    width: 60px;
}

.colorCanvas .spectrum,
.colorCanvas .gradient,
.colorCanvas .alpha {
    cursor: pointer;
    position: relative;
    overflow: visible;
    float: left;
}

.colorCanvas .position {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    z-index: 100;
}

.colorCanvas .gradient .position {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid #000;
    margin: -5px 0 0 -6px;
}

.colorCanvas .spectrum .position,
.colorCanvas .alpha .position {
    height: 2px;
    background: #000;
    width: 10px;
    margin-top: -1px;
}

.colorCanvas .preview {
    background: url("grid.png") repeat;
}

.colorCanvas .alpha {
    background: url("grid.png") repeat;
    margin: 0 6px 0 0;
}

.colorCanvas .controls {
    overflow: hidden;
}

.colorCanvas .preview {
    margin: 5px 0 5px 0;
}

.colorCanvas .preview,
.colorCanvas .preview .inner {
    height: 55px;
}

.colorCanvas .original {
    height: 5px;
}

.colorCanvas footer {
    margin-top: 8px;
}

.colorCanvas footer .right {
    float: right;
}

.colorCanvasInput {
    width: 30px;
    height: 20px;
    background-image: url("grid.png");
}

.popup {
    background: #FFF;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    padding: 8px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 5px;
    box-sizing: border-box;
}

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    color: #000;
    font-family: 'Helvetica Neue', Helvetica, Arial Geneva, sans-serif;
    font-size: 12px;
}



@mixin media-one {
    @include f;
}

/** breakpoint */
@mixin ms-h1 {
    .brk:after {
        content: '2';
    }
}

@mixin ms-h2 {
    .brk:after {
        content: '1';
    }
}


/** breakpoint */
@mixin ms-w1 {
    .wcord {
        //  background-color: #ffd800;
        width: 100%;
    }

  
    @include mbh-1('api',420px,true);
}

@mixin ms-w2 {
    .wcord {
        //   background-color: #4cff00;
        width: 100%;

      
    }

    

    .brk:after {
        content: '2';
    }
}

@mixin ms-w3 {
    .wcord {
        //   background-color: #ff6a00;
        width: 100%;
    }

   
    

    .brk:after {
        content: '3'; 

    }
}

@mixin ms-w4 {
    .wcord {
        width: 1010px;
    }

   
    .brk:after {
        content: '4';
    }
}

@include mbw-3('api',420px,720px,1010px,true);

/* important to change after use*/
@mixin media-one {
    display:block;
}