.text-field.large {
    width: 16rem!important
}

#library-pattern {
    background-image: url(https://picsum.photos/400/200?image=11);
    background-repeat: repeat
}

.btn-icon {
    position: relative;
    padding-left: 46px
}

.btn-icon:before {
    position: absolute;
    content: '';
    display: block;
    width: 36px;
    top: 0;
    bottom: 0;
    left: 0
}

#calendar-icon:after,#news-icon:after,#qspace-icon:after,#research-icon:after {
    position: absolute;
    content: '';
    display: block;
    width: 26px;
    height: 26px;
    background-image: url(/file_source/qu/global/images/homepage/homepage-icons.png);
    background-repeat: no-repeat;
    left: 4px;
    top: 5px
}

.qspace-bg {
    background-color: #c23b4e
}

a.qspace-bg:hover {
    background-color: #8d1436;
}

#calendar-icon:before,#news-icon:before,#research-icon:before {
    background-color: #8d1436
}

#qspace-icon:before {
    background-color: #8d1436

}

#news-icon:after {
    background-position: -78px
}

#calendar-icon:after {
    background-position: -26px
}

#research-icon:after {
    background-position: 0
}

#qspace-icon:after {
    background-position: -52px
}

#stories_wrapper h4 {
    max-height: 3.6em;
    overflow: hidden
}

#info-graph-right {
    background-color: #fff
}

@media only screen and (min-width: 768px) {
    .end-bottom.number span,.end-top.number span {
        box-shadow:9px 0 0 0 transparent,-9px 0 0 0 transparent,0 12px 6px -7px rgba(0,0,0,.2),0 -12px 6px -7px rgba(0,0,0,.2)
    }

    #info-graph .h4 {
        line-height: 1.2rem
    }

    #info-graph {
        background: url(/file_source/qu/global/images/homepage/infographs-pattern.png) fixed #fff;
        background-image: url(/file_source/qu/global/images/homepage/infographs-pattern.png),linear-gradient(to right,#e3e3e3,#e3e3e3,#e3e3e3,#fff);
        overflow: hidden
    }

    #info-graph-right {
        background-color: #fff;
        transform: skewX(-20deg);
        -ms-transform: skewX(-20deg);
        -webkit-transform: skewX(-20deg)
    }

    #info-graph-right .unskew {
        transform: skewX(20deg);
        -ms-transform: skewX(20deg);
        -webkit-transform: skewX(20deg)
    }

    #infographs-numbers {
        margin: 4em 5rem 4em 2rem
    }

    .dashed-circle {
        -webkit-animation-name: spin;
        -webkit-animation-duration: 45s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        -moz-animation-name: spin;
        -moz-animation-duration: 45s;
        -moz-animation-iteration-count: infinite;
        -moz-animation-timing-function: linear;
        -ms-animation-name: spin;
        -ms-animation-duration: 45s;
        -ms-animation-iteration-count: infinite;
        -ms-animation-timing-function: linear;
        animation-name: spin;
        animation-duration: 45s;
        animation-iteration-count: infinite;
        animation-timing-function: linear
    }

    .category {
        width: 7vw;
        max-width: 17vh;
        position: relative
    }

    .category .box-wrapper {
        padding-top: 100%;
        position: relative
    }

    .category .big-circle {
        border-radius: 50%;
        border: 3px solid #57585b;
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0
    }

    .category .dashed-circle {
        border-radius: 50%;
        border: 2px dashed #c23b4e;
        position: absolute;
        top: 1px;
        left: 1px;
        right: 1px;
        bottom: 1px
    }

    .category img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 40%
    }

    #infographs-numbers .box-wrapper:before {
        position: absolute;
        top: 10%;
        left: 10%;
        right: 10%;
        bottom: 10%;
        content: '';
        display: block;
        border-radius: 50%;
        border: 1px dashed #999;
        background-color: #fff
    }

    #colleges .big-circle,#programs .big-circle {
        border-top-color: transparent;
        border-bottom-color: transparent
    }

    .end-bottom.number:after,.end-bottom:before,.end-top.number:after,.end-top:before {
        border-left: solid 3px #57585b;
    }

    #infographs-research {
        position: relative
    }

    #infographs-research .box-wrapper {
        border-radius: 50%
    }

    #colleges .big-circle {
        transform: rotate(45deg)
    }

    #programs .big-circle {
        transform: rotate(-45deg)
    }

    #alumnis .big-circle {
        border-top-color: transparent;
        transform: rotate(45deg)
    }

    #alumnis .box-wrapper {
        top: 50%
    }

    #students .big-circle {
        border-bottom-color: transparent;
        transform: rotate(-45deg)
    }

    #students .box-wrapper {
        top: -50%
    }

    [class*=end-] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0
    }

    .end-left .knot,.end-left:before {
        position: absolute;
        top: 50%;
        left: -1rem
    }

    .end-bottom .knot,.end-bottom:before {
        bottom: -1rem;
        content: ''
    }

    .end-right .knot,.end-right:before {
        right: -1rem;
        content: '';
        position: absolute;
        top: 50%
    }

    .end-right:before {
        border-top: solid 3px #57585b
;
        margin-right: 3px;
        margin-top: -1.5px;
        width: 1rem
    }

    .end-right .knot,.knot-bottom,.knot-top {
        margin-right: -5px;
        background-color: #57585b

    }

    .end-right .knot {
        display: block;
        width: 9px;
        height: 9px;
        margin-top: -4.5px
    }

    .end-left:before {
        content: '';
        border-top: solid 3px #57585b;
        margin-left: 3px;
        margin-top: -1.5px;
        width: 1rem
    }

    .end-bottom .knot,.end-left .knot,.end-top .knot {
        display: block;
        background-color: #57585b;
        width: 9px
    }

    .end-left .knot {
        content: '';
        height: 9px;
        margin-top: -4.5px;
        margin-left: -5px
    }

    .end-bottom .knot,.end-bottom.number span,.end-bottom.number:after,.end-bottom:before,.end-top .knot,.end-top.number span,.end-top.number:after,.end-top:before {
        left: 50%;
        position: absolute
    }

    .end-top .knot,.end-top:before {
        top: -1rem;
        content: ''
    }

    .end-bottom:before {
        margin-bottom: 3px;
        margin-left: -1.5px;
        height: 1rem
    }

    .end-bottom .knot {
        height: 9px;
        margin-bottom: -5px;
        margin-left: -4.5px
    }

    .end-top:before {
        margin-top: 3px;
        margin-left: -1.5px;
        height: 1rem
    }

    .end-top .knot {
        height: 9px;
        margin-top: -5px;
        margin-left: -4.5px
    }

    .end-right .name {
        position: absolute;
        width: 6rem;
        right: -6rem;
        top: 50%;
        margin-top: .4rem
    }

    .end-right .number {
        position: absolute;
        width: 5rem;
        right: -5rem;
        top: 50%;
        margin-top: -1.8rem
    }

    .end-top.number:before {
        height: .5rem
    }

    .end-top.number .knot,.end-top.number:before {
        top: -3.1rem
    }

    .end-top.number:after {
        content: '';
        top: -1rem;
        margin-top: 3px;
        margin-left: -1.5px;
        height: 1rem
    }

    .end-top.number span {
        top: -2rem;
        margin-top: -3px;
        width: 5rem;
        margin-left: -2.5rem;
        text-align: center
    }

    .end-bottom.name span,.end-top.name span {
        width: 6rem;
        margin-left: -3rem;
        text-align: center;
        position: absolute;
        left: 50%
    }

    .end-bottom.name span {
        bottom: -2.7rem;
        margin-bottom: -3px
    }

    .end-top.name span {
        top: -2.7rem;
        margin-top: -3px
    }

    .end-bottom.number span {
        bottom: -2rem;
        margin-bottom: -3px;
        width: 5rem;
        margin-left: -2.5rem;
        text-align: center
    }

    .end-bottom.number:before {
        height: .5rem
    }

    .end-bottom.number .knot,.end-bottom.number:before {
        bottom: -3.1rem
    }

    .end-bottom.number:after {
        content: '';
        bottom: -1rem;
        margin-bottom: 3px;
        margin-left: -1.5px;
        height: 1rem
    }

    .knot-bottom,.knot-top {
        width: 9px;
        height: 9px;
        right: 50%;
        position: absolute
    }

    .knot-top {
        top: 0;
        margin-top: -4.5px
    }

    .knot-bottom {
        bottom: 0;
        margin-bottom: -4.5px
    }

    #alumnis:before,.bar-fill:after,.two-bar-fills:after,.two-bar-fills:before {
        display: block;
        content: '';
        height: 3px;
        width: 100%;
        background-color: #57585b;
    }

    .bar-fill {
        margin: 0 -3px;
        z-index: 1
    }

    #vertical-bar {
        width: 3px;
        background-color: #57585b;
    }

    #infographs-research>#chart {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0
    }

    #infographs-research>#ball-1 {
        position: absolute;
        background-color: #d1d2d4;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        left: 40%;
        top: 50%;
        margin-left: -10px;
        margin-top: -10px
    }

    #infographs-research>#ball-2 {
        position: absolute;
        background-color: #939597;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        left: 45%;
        top: 60%;
        margin-left: -13px;
        margin-top: -13px
    }

    #infograph-research-center:before,#infograph-research-reviews:before {
        content: '';
        display: block;
        width: 50%;
        height: 100%;
        background-color: #fff;
        position: absolute
    }

    #infograph-research-center:before {
        left: 0;
        bottom: 0
    }

    #infograph-research-reviews:before {
        right: 0;
        bottom: 50%
    }

    #infograph-research-center .text-field {
        position: absolute;
        left: 100%;
        margin-left: .5rem;
        bottom: .5rem;
        width: 11rem
    }

    #infograph-research-reviews .text-field {
        position: absolute;
        right: 100%;
        margin-right: 1.5rem;
        top: .5rem;
        width: 16rem
    }

    @-ms-keyframes spin {
        from {
            -ms-transform: rotate(0)
        }

        to {
            -ms-transform: rotate(360deg)
        }
    }

    @-moz-keyframes spin {
        from {
            -moz-transform: rotate(0)
        }

        to {
            -moz-transform: rotate(360deg)
        }
    }

    @-webkit-keyframes spin {
        from {
            -webkit-transform: rotate(0)
        }

        to {
            -webkit-transform: rotate(360deg)
        }
    }

    @keyframes spin {
        from {
            transform: rotate(0)
        }

        to {
            transform: rotate(360deg)
        }
    }
}