/**
 * @copyright 2015 MarkCon
 * @link http://www.markcon.hu
 */

@CHARSET "UTF-8";

/* Preferences oldal

    Mindegyik elején: #preferences
*/

/*  ----------  STEPS  ----------  */

    #preferences .Steps {
        padding: 50px 0;
    }

    #preferences .Steps h2 {
        text-align: center;
        margin-bottom: 1em;
    }

    #preferences .Steps .JcarouselPagination {
        position: relative;
        width: 100%;
        height: 145px;
        bottom: auto;
        left: auto;
        -moz-transform: none;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    #preferences .Steps .JcarouselPagination:after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 1px;
        background-color: #a3f9e2;
        z-index: 0;
    }

    #preferences .Steps .JcarouselPagination a {
        position: absolute;
        width: 160px;
        height: 145px;
        text-align: center;
        cursor: pointer;
        background-image: url("../../Global/image/preferences-hexa.png");
        background-repeat: no-repeat;
        background-position: center;
        top: 0;
        background-color: transparent;
        border-radius: 0;
        display: block;
        float: none;
        margin: 0;
        opacity: 1;
        z-index: 1;
    }

    #preferences .Steps .JcarouselPagination a:after {
        color: #fff6bc;
        font-weight: bold;
        text-transform: uppercase;
        font-family: 'PT Sans Narrow';
        font-size: 26px;
        position: absolute;
        width: 100%;
        left: 0;
        top: 50%;
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        text-indent: 0;
        padding: 10px;
    }

    #preferences .Steps .JcarouselPagination a.Active:after {
        color: #fff;
    }

    #preferences .Steps .JcarouselPagination a:nth-child(1) {
        left: 0;
    }

    #preferences .Steps .JcarouselPagination a:nth-child(1):after {
        content: "Évfolyamom";
    }

    #preferences .Steps .JcarouselPagination a:nth-child(2) {
        left: 50%;
        margin-left: -80px;
    }

    #preferences .Steps .JcarouselPagination a:nth-child(2):after {
        content: "Mire használom?";
    }

    #preferences .Steps .JcarouselPagination a:nth-child(3) {
        right: 0;
    }

    #preferences .Steps .JcarouselPagination a:nth-child(3):after {
        content: "Tantárgyaim";
    }

    #preferences .Steps .JcarouselPagination a.Active{
        background: url("../../Global/image/preferences-hexa-active.png") no-repeat center;
    }

/*  ----------  SELECT PREFERENCES  ----------  */

    #preferences .SelectPreferences {
        position: relative;
        background-image: url("../../Global/image/pattern-blue.png");
        background-repeat: repeat;
        color: #fff;
    }

    #preferences .SelectPreferences h2 {
        text-align: left;
        margin-bottom: 0.5em;
    }

    #preferences .SelectPreferences p {
        font-size: 26px;
        line-height: 1.2em;
        margin-bottom: 1em;
    }

    #preferences .SelectPreferences .Footer {
        padding: 30px 0;
        padding-bottom: 30px;
        position: relative;
    }

    #preferences .SelectPreferences .Footer:before {
        content: "";
        position: absolute;
        top: 0;
        left: -50%;
        right: -50%;
        height: 3px;
        z-index: 0;
        display: block;
        background-color: rgba(255, 255, 255, 0.5);;
    }

    #preferences .SelectPreferences .Content {
        padding: 30px 0;
    }

    /* Form */
    #preferences .Form .InputWrapper {
        margin: 10px 0;
    }

    #preferences .Form .InputWrapper .Checkbox {
        float: left;
        margin: 0;
    }

    #preferences .Form .InputWrapper .Checkbox+label{
        display: block;
        margin-left: 34px;
        line-height: 26px;
        font-size: 26px;
    }

    #preferences .Form label{
        text-transform: uppercase;
        font-family: 'PT Sans Narrow';
    }

    #preferences .Form .Buttons {
        text-align: right;
    }

    /* Options */
    #preferences .ui-sortable {
       /* position: relative;
        overflow-x: hidden;
        overflow-y: auto;*/
    }

    #preferences .SelectPreferences .OptionsContainer {
        position: relative;
    }

    #preferences .SelectPreferences .Options li {
        font-family: 'PT Sans Narrow', 'Arial', 'Verdana';
        background-color: #fff;
        text-align: center;
        border: 1px solid rgba(255,255,255,0.6);
        background-clip: padding-box;
        border-radius: 3px;
        text-transform: uppercase;
        font-size: 26px;
        line-height: 30px;
        padding: 7px 15px;
        cursor: pointer;
        color: #0ec0bf;
        margin: 20px 0;
    }

    #preferences .SelectPreferences .Options li.Selected {
        background-color: #24aae6;
        color: #fff;
        border: 1px solid #85d9ff;
    }

    #preferences .SelectPreferences .Subjects .Numbers {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }

    #preferences .SelectPreferences .Subjects .Options li,
    #preferences .SelectPreferences .Subjects .Numbers li {
        float: left;
        width: 27%;
        margin: 10px 1%;
        position: relative;
        cursor: move;
        padding-left: 40px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #preferences .SelectPreferences .Subjects .Options li {
        margin-left: 5%;
    }

    #preferences .SelectPreferences .Subjects .Options li.Placeholder {
        background-color: transparent;
        height: 46px;
        border-style: dashed;
    }

    #preferences .SelectPreferences .Subjects .Numbers li {
        font-family: 'PT Sans Narrow', 'Arial', 'Verdana';
        padding: 0;
        height: 46px;
        line-height: 46px;
        font-size: 26px;
        cursor: auto;
        width: 31%;
        padding-right: 28%;
        text-align: right;
    }

    #preferences .SelectPreferences .Subjects .Options li .IconContainer {
        position: absolute;
        width: 30px;
        height: 100%;
        left: 5px;
        top: 0;
    }

    /* Carousel */
    #preferences .Jcarousel .Slide {
        padding: 0;
    }

    #preferences .JcarouselControl:after {
        display: none;
    }

    #preferences .JcarouselControl {
        display: inline-block;
        height: auto;
        position: static;
        text-indent: 0;
        top: auto;
        -moz-transform: none;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        width: auto;
        z-index: auto;
        background-image: none;
    }

    #preferences .JcarouselControl.Inactive {
        opacity: 0.5;
        display: none;
    }

    /* Responsive */
    @media (max-width: 1199px) {
        #preferences .SelectPreferences .Subjects .Numbers li {
            font-size: 24px;
        }
    }

    @media (max-width: 991px) {
        #preferences .SelectPreferences .Subjects .Options li,
        #preferences .SelectPreferences .Subjects .Numbers li {
            font-size: 18px;
        }

        #preferences .Form .Buttons {
            margin-top: 15px;
        }
    }

    @media (max-width: 767px) {
        #preferences .Form .Button {
            float: none !important;
            margin: 10px 0;
            width: 100%;
        }

        #preferences .SelectPreferences .Subjects .Options li,
        #preferences .SelectPreferences .Subjects .Numbers li {
            float: none;
            width: 100%;
            margin: 10px 0;
        }

        #preferences .SelectPreferences .Subjects .Numbers li {
            width: 100%;
            padding-right: 92%;
        }

        #preferences .SelectPreferences .Subjects .Options li {
            margin-left: 10%;
            width: 90%;
        }

        #preferences .Steps .JcarouselPagination {
            height: auto;
        }

        #preferences .Steps .JcarouselPagination:after {
            display: none;
        }

        #preferences .Steps .JcarouselPagination a {
            position: relative;
            top: auto;
            margin: 0 auto;
        }

        #preferences .Steps .JcarouselPagination a:nth-child(1) {
            left: auto;
        }

        #preferences .Steps .JcarouselPagination a:nth-child(2) {
            left: auto;
            margin-left: auto;
        }

        #preferences .Steps .JcarouselPagination a:nth-child(3) {
            right: auto;
        }

    }