/* Mobile devices. */
@media only screen and (min-width: 320px) {

}

/* iPads, Tablets. */
@media only screen and (min-width: 481px) {


}

/* Small screens / laptops */
@media only screen and (min-width: 769px) {

    body {
        background-color: #ffffff;
    }

    .hide-on-mobile {
        display: hidden;
    }


    .section {
        padding: 20px 0;
    }

    nav#mainnav a.nav-toggle {
        display: none;
    }

    .mobile-overlay {
        display: none;
    }

    a.navbar-brand {
        float: left;
        display: block;
        width: 25%;
        font-size: 28px;
        margin: 20px 5% 20px 0;
        text-align: left;
    }

    a.navbar-brand img#logo {
        width: 300px;
    }

    nav#mainnav #nav-menu {
        width: 70%;
        float: left;
        position: relative;
		height: 20px;
        margin: 20px 0;
        text-align: left;
        display: block;
        top: auto;
        left: auto;
        clear: none;
    }

    nav#mainnav #nav-menu ul#sections,
    nav#mainnav #nav-menu ul#call-to-action,
    nav#mainnav #nav-menu ul#user-account,
    nav#mainnav #nav-menu ul#social-icons {
        width: auto;
    }

    nav#mainnav #nav-menu ul#sections {
        margin: 0;
        background-color: transparent;
    }

    nav#mainnav #nav-menu ul#sections li:first-child {
      display: none;
    }

    nav#mainnav #nav-menu ul#call-to-action {
        margin: 0;
    }

    nav#mainnav #nav-menu ul#user-account {
		padding: 5px 0;
		line-height: 10px;
        margin: 0;
    }

    nav#mainnav #nav-menu ul#user-account li,
    nav#mainnav #nav-menu ul#social-icons li {
        margin: 0;
    }

    nav#mainnav ul::after {
        content: "";
        display: block;
        clear: both;
    }

    nav#mainnav li.nav-item {
        float: left;
        margin: 0;
    }

    nav#mainnav li.nav-item  > a.nav-link {
        float: left;
        padding: 2px 10px;
    }

    nav#mainnav li.nav-item > ul > li.nav-item > a.nav-link {
        padding: 5px 15px;
    }

    nav#mainnav ul#user-icons, nav#mainnav ul#social-icons {
        font-size: 125%;
    }

    nav#mainnav ul#user-account {
        float: right;
    }

    nav#mainnav ul#user-account li a {
        line-height: 1em;
    }

    nav#mainnav ul#user-account li:last-child a {
        border-left: 1px solid;
    }

    nav#mainnav ul#social-icons {
        float: right;
    }

    #footer-nav-menu {
        display: block;
        width: 100%;
        float: left;
        text-align: center;
        font-size: 87.50%;
    }

    #footer-nav-menu ul {
        display: inline-block;
        list-style: none;
        margin: 0 auto;
        padding: 0;
    }

    #footer-nav-menu ul li.nav-item {
        display: block;
        position: relative;
        float: left;
    }

    #footer-nav-menu ul li.nav-item  > a.nav-link {
        padding: 5px 10px;
    }

    .copyright {
        float: left;
        width: 90%;
        padding: 0 5%;
        font-size: 87.50%;
    }

    ul#footer-nav {
        width: 45%;
        padding: 0;
        float: right;
        clear: none;
    }

    .column-6 {
        width: 47.50%;
    }

    .column-6.float-left {
        float: left;
        padding-right: 2.5%
    }

    .column-6.float-right {
        float: right;
        padding-left: 2.5%
    }

    .breadcrumbs {
      width:  90%;
      margin: 25px 5%;
      padding: 0;
    }

    .content-section {
        width:  90%;
        margin: 25px 5%;
        padding: 0;
    }

    /* Homepage
   ============ */

    #page-navigation-blocks .page-navigation-blocks-row a.navigation-block {
        width: 18%;
        min-height: 200px;
        padding: 20px 2%;
        display: block;
        float: left;
        margin-right: 4%;
        text-align: center;
    }

    #page-navigation-blocks .page-navigation-blocks-row a.navigation-block:nth-child(even) {
        float: left;
        margin-right: 4%;
    }

    #page-navigation-blocks .page-navigation-blocks-row a.navigation-block:last-child {
        float: right;
        margin-right: 0;
    }

    #clock-wrapper .column {
        float: left;
        display: block;
        width: 20%;
    }

    #clock-wrapper .column span {
        width: 100%;
        display: block;
        clear: both;
    }

    /* Trivia
   ============ */

    table#top-films th:nth-child(4), table#top-films td:nth-child(4),
    table#top-films th:nth-child(6), table#top-films td:nth-child(6) {
        display: table-cell;
    }

    /* About Section
   ========================================================================== */

    img#avatar {
        width: 280px;
        float: right;
        margin: 0 0 0 10px;
    }

    div.film-details {
      margin-bottom: 20px;
    }

    div.film-details ul.credits {
      display: block;
      float: left;
      width: 83%;
      padding: 0;
      list-style: none;
      margin-right: 2.5%;
      clear: none;
    }

    div.film-details .poster {
      float: right;
      width: 14.5%;
      clear: none;
    }
}

/* Desktops, large screens. */
@media only screen and (min-width: 1025px) {

    .copyright p {
        margin: 20px 0;
        line-height: .9em
    }

    ul#footer-nav li.nav-item {
        line-height: .9em
    }

    #footer-nav-menu ul li.nav-item  > a.nav-link {
        padding: 5px 15px;
    }

    .quotation .quote-body {
        font-size: 200%;
    }

    .quotation .quote-author {
        font-size: 125%;
    }


}

/* Extra large screens / TVs */
@media only screen and (min-width: 1201px) {

    .container {
        margin: 0 auto;
        width: 1200px;
    }

    .breadcrumbs {
        width:  1160px;
        margin: 25px 20px 0 20px;
        padding: 0;
    }

    .content-section {
        width:  1160px;
        margin: 25px 20px;
        padding: 0;
    }

    .page-content {
      min-height: 700px;
    }

    /* Homepage
   ============ */

    #page-navigation-blocks {
        width: 100%;
        display: block;
    }

    #page-navigation-blocks .page-navigation-blocks-row a.navigation-block {
        width: 235px;
        min-height: 200px;
        padding: 20px;
        margin-right: 20px;
        float: left;
        display: block;
        text-align: center;
    }

    #page-navigation-blocks .page-navigation-blocks-row a.navigation-block:nth-child(even) {
        float: left;
        margin-right: 20px;
    }

    #page-navigation-blocks .page-navigation-blocks-row a.navigation-block-4:nth-child(even),
    #page-navigation-blocks .page-navigation-blocks-row a.navigation-block-8:nth-child(even) {
        float: right;
        margin-right: 0;
    }

    #page-navigation-blocks .page-navigation-blocks-row a.navigation-block span {
        display: block;
        min-height: 60px;
        margin-bottom: 20px;
    }

    #page-navigation-blocks .page-navigation-blocks-row a.navigation-block i {
        font-size: 262.50%;
    }
}