.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: #b8acea
}

a.qspace-bg:hover {
    background-color: #9788d4
}

#calendar-icon:before,
#news-icon:before,
#research-icon:before {
    background-color: #00718f
}

#qspace-icon:before {
    background-color: #574c88
}

#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 {
		font-size: 14px;
		line-height: 15px;
    }
    #info-graph {
		/*background:#ccc;*/
		
    }
    #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 #6fa501;
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0
    }
    .category .dashed-circle {
        border-radius: 50%;
        border: 2px dashed #39a2b9;
        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 #6fa501;
    }
    #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 #6fa501;
        margin-right: 3px;
        margin-top: -1.5px;
        width: 1rem
    }
    .end-right .knot,
    .knot-bottom,
    .knot-top {
        margin-right: -5px;
        background-color: #6fa501;
    }
    .end-right .knot {
        display: block;
        width: 9px;
        height: 9px;
        margin-top: -4.5px
    }
    .end-left:before {
        content: '';
        border-top: solid 3px #213e5b;
        margin-left: 3px;
        margin-top: -1.5px;
        width: 1rem
    }
    .end-bottom .knot,
    .end-left .knot,
    .end-top .knot {
        display: block;
        background-color: #6fa501;
        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: 1.1rem;
    font-weight: bold;
    font-size: 14px !important;
    }
    .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:1px;
        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;
        font-weight: bold;
    }
    .end-top.name span {
        top: -2.7rem;
        margin-top: -3px;
        font-weight: bold;
    }
    .end-bottom.number span {
        bottom: -2rem;
        margin-bottom: -1px;
        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,#students:after,
    .bar-fill:after,
    .two-bar-fills:after,
    .two-bar-fills:before {
        display: block;
        content: '';
        height: 3px;
        width: 100%;
        background-color: #6fa501;
    }
    .bar-fill {
        margin: 0 -3px;
        z-index: 1
    }
    #vertical-bar {
        width: 3px;
        background-color: #6fa501;
    }
    #infographs-research>#chart {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0
    }
    #infographs-research>#ball-1 {
        position: absolute;
        background-color: #e0cbb4;
        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: #9a6b37;
        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)
        }
    }
}