header {
    padding: 30px 0px;
}

article {
    margin: 30px auto 30px auto;
    background-color: #fff;
    padding: 30px 0 60px 0;
}

article p,
article li,
.query-page .header-bg ul li,
.query-page .header-bg h4 {
    font-size: 20px;
}

article p:first-child {
    font-size: 22px;
}

body {
    padding-top: 15px;
    border-top: 10px solid #0023FD;
    background-color: #F5F5F5;
}

a {
    color: #0023FD;
}

.header-bg {
    background: #0023FD;
    background: -moz-linear-gradient(-45deg,  #0023FD 0%, #7020bb 100%);
    background: -webkit-linear-gradient(-45deg,  #0023FD 0%,#7020bb 100%);
    background: linear-gradient(135deg,  #0023FD 0%,#7020bb 100%);
    margin: 15px auto;
    color: #fff;
}

.header-bg a {
    color: #fff;
}

.breadcrumb {
    padding: 0;
    background: transparent;
}

.breadcrumb a {
    font-size: 18px;
}

.tags {
    padding: 0;
}

.tags .btn {
    background: transparent;
}

.page-header {
    border: none;
}

.nav-tutorial i {
    min-width: 25px;
}

.nav-tutorial ul {
    padding: 0;
}

.nav-tutorial li {
    margin-bottom: 4px;
    padding: 14px 12px;
    border-color: transparent;
    list-style: none;
    font-size: 16px;
    font-weight: bold;

    transition: border-color 0.5s;
}

.nav-tutorial li.selected {
    padding: 12px 10px;
    border: 2px solid #0023FD;
}

.nav-tutorial li:hover {
    padding: 12px 10px;
    border: 2px solid #a6a6a6;
}

.nav-tutorial li:last-child a,
.nav-tutorial li:last-child i {
    color: #FF2B2B;
}

.nav-tutorial li a {
    display: inline-block;
    width: calc(90% - 15px);
    text-decoration: none;
}

.nav-tutorial li a,
.nav-tutorial li i {
    color: #a6a6a6;
}

.nav-tutorial li.selected a,
.nav-tutorial li.selected i {
    color: #0023FD;
}

.logo-nav {
    margin: 15px auto;
}

.nav-primary {
    text-align: right;
}

.nav-primary a {
    font-size: 18px;
    margin-left: 15px;
}

.nav-primary li {
    display: inline;
}

.nav-primary li.selected a {
    border-bottom: 3px solid #0023FD;
}

.video {

}

.related {
    width: 100%;
}

.related ul,
.related-box .categories ul {
    padding: 0;
    list-style-type: none;
}

.related li {
    height: 160px;
}

.related li:first-child {
    margin-right: 1px;
}

.related-box {

    float: left;
    position: relative;
    width: 49.9%;

    background: url('../images/studio-bg-1.jpg') center center;
    background-size: cover;
    overflow: hidden;
}

.related-box h4 {
    width: 70%;
    font-size: 24px;
}

.related-box span {
    display: block;
    height: 100%;
    width: 100%;
    padding: 20px;
    background-color: rgba(20, 20, 20, 0.6);
}

.related-box span {
    color: #fff;
}

.related-box a {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    height: inherit;
    width: 100%;
}

.related-box .type {
    position: absolute;
    bottom: 20px;
    width: calc(100% - 40px);
    color: #FEFF8A;
    border-bottom: 1px solid #fff;
    text-align: right;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;

}


/* =============================== */


.query-page .title {
    margin: 15px auto;
    color: #fff;

}

.query-page .title h1 {
    margin: 0 0 40px 0;
    transition: all 0.2s;
}

.query-page .title h1 em {

}

.query-page em {
    font-style: normal;
    color: #FEFF8A;
    text-decoration: underline;
}

.query-page .header-bg ul {
    margin: 0;
    padding: 0;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

.query-page .header-bg ul li {
    list-style: none;
}

.filter-container p {
    margin: 0;
}

.search-cta {
    padding: 40px 0px 10px 0px;
}

.search-cta a {
    text-decoration: none;
}

.search-cta .btn-primary {
    display: inline-block;
    width: 33%;
    padding: 25px;
    background: #F8E71C;
    border-radius: 2px;
    font-size: 24px;
    color: #0023FD;
}

.grid h2 em {
    color: #0023FD;
}

.grid > div:first-of-type > div:first-of-type > h2:first-of-type {
    font-size: 1.5em;
    margin: 20px 0px 30px 0px;
}

.grid-item {
    position: relative;
    display: block;
    margin: 0 0 30px 0;
    /* padding: 35px; */
    height: 450px;

    background: url('../images/v-bg1.png') center center;
    background-size: cover;
    overflow: hidden;
}

.grid-item h2 {
    font-size: 36px;
    margin: 0 0 20px 0;
}

.grid-item p {
    font-size: 18px;
}

.grid-item .overlay {
    position: absolute;
    top 0;
    left: 0;
    z-index: 0;
    display: block;
    height: 100%;
    width: 100%;
    padding: 35px;
    background: rgba(28,28,28,0.7);
    background: -moz-linear-gradient(top, rgba(28,28,28,0.7) 33%, rgba(56,56,56,0) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(33%, rgba(28,28,28,0.7)), color-stop(100%, rgba(56,56,56,0)));
    background: -webkit-linear-gradient(top, rgba(28,28,28,0.7) 33%, rgba(56,56,56,0) 100%);
    background: -o-linear-gradient(top, rgba(28,28,28,0.7) 33%, rgba(56,56,56,0) 100%);
    background: -ms-linear-gradient(top, rgba(28,28,28,0.7) 33%, rgba(56,56,56,0) 100%);
    background: linear-gradient(to bottom, rgba(28,28,28,0.7) 33%, rgba(56,56,56,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c1c1c', endColorstr='#383838', GradientType=0 );

    transition: background 2s;
}

.grid-item a.overlay--link:hover + .overlay {
    background: rgba(28,28,28,0.7);
    background: -moz-linear-gradient(top, rgba(28,28,28,0.7) 33%, rgba(28,28,28,0.7) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(33%, rgba(28,28,28,0.7)), color-stop(100%, rgba(28,28,28,0.7)));
    background: -webkit-linear-gradient(top, rgba(28,28,28,0.7) 33%, rgba(28,28,28,0.7) 100%);
    background: -o-linear-gradient(top, rgba(28,28,28,0.7) 33%, rgba(28,28,28,0.7) 100%);
    background: -ms-linear-gradient(top, rgba(28,28,28,0.7) 33%, rgba(28,28,28,0.7) 100%);
    background: linear-gradient(to bottom, rgba(28,28,28,0.7) 33%, rgba(28,28,28,0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1c1c1c', endColorstr='#383838', GradientType=0 );

    transition: background 2s;
}


.grid-item a.overlay--link {
    position: absolute;
    top 0;
    left: 0;
    z-index: 2;
    display: block;
    height: 100%;
    width: 100%;
}

.grid-item a.btn {
    color: #0023FD;
}

.grid-item h2,
.grid-item p {
    color: #fff;
}

.grid-item .tags a {
    color: #fff;
}

.grid-item--padding {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 35px;
}

.grid-item--link {
    position: absolute;
    bottom: 35px;
    margin-top: 20px;
    font-size: 1.4em;
}

/* One radio button per line */
label {
    cursor: pointer;
    margin: 0;
    font-weight: normal;
}

input[type=radio] {
    display: none;
}

input[type=radio]:checked + label {
    color: #FEFF8A;
    text-decoration: underline;
}

/* http://jsfiddle.net/Gu55B/1/ */

:not(.lt-ie9) {

    /* HTML5 Boilerplate accessible hidden styles */
    [type="radio"] {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px; margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    /* the basic, unchecked style */
    [type="radio"] + span::before {
        content: '';
        display: inline-block;
        transition: 0.5s ease all;
    }
}




@media (max-width: 992px) {
    .related-box h4 {
        width: 100%;
        font-size: 22px;
    }
}


@media (max-width: 768px) {
    article p,
    article li {
        font-size: 18px;
    }

    .related li {
        height: 140px;
    }

    .related-box {
        float: left;
        position: relative;
        margin-top: 1px;
        width: 100%;
    }
}