/* This is the CSS styling for the tablet version */
@media (min-width: 768px) and (max-width: 1024px) { 
    body {
        margin: 0px;
        padding: 0px;
    }

    header {
        display: grid;
        grid-template-columns: 121px auto auto;
        grid-template-rows: auto auto auto auto;
        column-gap: 0px;
        row-gap: 0px;;
        padding: 0px;
        margin: 0px;
    }

    .weather-info {
        grid-column: 1/4;
        grid-row: 1/2;
    }

    .logo-box {
        grid-column: 1/2;
        grid-row: 2/5;
    }
    
    .headings {
        grid-column: 2/3;
        grid-row: 2/5;
        padding: 15px 0px 0px 0px;
    }

    nav.clearfix {
        grid-column: 3/4;
        grid-row: 3/4;
    }

    header img {
        width: 96px;
        height: auto;
        margin: 0px auto;
    }

    .div.motto {
        padding: 0px 0px 0px 1.9px;
    }
    
    nav {
        display: inline-block;
        background-color: #fefefe;
        border-radius: 0px;
        box-shadow: none;
    }

    nav button {display: none;}
        
    nav ul.hide {display: block;}
        
    nav ul li {
        float: left;
    }
        
    nav ul li a {
        background-color: #170030;
        border: none;
        padding: .6rem 1rem;
    }

    nav ul li:nth-child(1) {
        border-right: 1px solid rgba(245, 207, 135, 0.6);
    }

    nav ul li:nth-child(2) {
        border-right: 1px solid rgba(245, 207, 135, 0.6);
    }

    nav ul li:nth-child(3) {
        border-right: 1px solid rgba(245, 207, 135, 0.6);
    }

    nav ul li:nth-child(4) {
        border-right: 1px solid rgba(245, 207, 135, 0.6);
    }

    main {
        display: grid;
        grid-template-columns: auto 560px auto;
        grid-template-rows: auto auto auto auto auto;
    } 

    .home-page-banner {
        grid-column: 1/4;
        grid-row: 1/2;
    }

    .upcoming-events {
        grid-column: 2/3;
        grid-row: 2/3;
    }

    .about-us {
        grid-column: 2/3;
        grid-row: 3/4;
    }

    .partners {
        grid-column: 2/3;
        grid-row: 4/5;
    }

    .home-page-join-banner {
        grid-column: 1/4;
        grid-row: 5/6;
        margin: 0px;
    }

    .banner-box {
        margin: 38px 0px 38px 0px;
     }

    .banner-heading {
        font-size: 52px;
        padding: 36px 10px 36px 10px;
    }

    .home-page-banner {
        display: grid;
        grid-template-columns: auto 560px auto;
        grid-template-rows: auto;
    }

    .home-page-banner-img {
        grid-column: 1/4;
        grid-row: 1/2;
    }

    .banner-box {
        grid-column: 2/3;
        grid-row: 1/2; 
    }

    .upcoming-events {
        text-align: center;
        padding: 24px;
    }

    .upcoming-events-heading {
        margin: 0px 0px 15px 0px;
    }

    .event1 {
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: auto auto auto;
        column-gap: 10px;
    }

    .event-box1 {
        grid-column: 1/2;
        grid-row: 1/4;
    }

    div.event1 h4 {
        grid-column: 2/3;
        grid-row: 1/2;
        margin: 0px;
    }

    div.event1 h5 {
        grid-column: 2/3;
        grid-row: 2/3;
        margin: 14px 0px 14px 0px;
    }

    div.event1 p {
        grid-column: 2/3;
        grid-row: 3/4;
        margin: 0px;
    }

    main section.upcoming-events div.event-box1 h3 {
        font-size: 24px;
        letter-spacing: 2px;
        margin: 0px;
    }

    .event2 {
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: auto auto auto;
        column-gap: 10px;
        margin: 42px 0px 0px 0px;
    }

    .event-box2 {
        grid-column: 1/2;
        grid-row: 1/4;
        margin: 0px;
    }

    div.event2 h4 {
        grid-column: 2/3;
        grid-row: 1/2;
        margin: 0px;
    }

    div.event2 h5 {
        grid-column: 2/3;
        grid-row: 2/3;
        margin: 14px 0px 14px 0px;
    }

    div.event2 p {
        grid-column: 2/3;
        grid-row: 3/4;
        margin: 0px;
    }

    main section.upcoming-events div.event-box2 h3 {
        font-size: 24px;
        letter-spacing: 2px;
        margin: 0px;
    }

    .home-page-budva-img {
        margin: 0px auto;
    }

    .about-us {
        margin: 40px 0px 0px 0px;
        padding: 24px 24px 14px 24px;
    }

    .partners {
        padding: 24px;
        margin: 40px 0px 0px 0px;
    }

    .partners-heading {
        margin: 0px;
    }

    figure:hover {
        border: 1px solid #170030;
    }

    figure:hover figcaption {
        color: #170030;
    }

    .company-ad {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        margin: 15px 0px 0px 0px;
        column-gap: 18px;
        row-gap: 18px;
    }

    .company-1 {
        grid-column: 1/2;
        grid-row: 1/2;
        margin: 0px;
    }

    .company-2 {
        grid-column: 2/3;
        grid-row: 1/2;
        margin: 0px;
    }

    .company-3 {
        grid-column: 1/2;
        grid-row: 2/3;
        margin: 0px;
    }

    .company-4 {
        grid-column: 2/3;
        grid-row: 2/3;
        margin: 0px;
    }

    .company-figcaption1, .company-figcaption2, .company-figcaption3, .company-figcaption4 {
        padding: 0px 10px 10px 10px;
    }

    .home-page-join-banner {
        display: grid;
        grid-template-columns: auto 560px auto;
        grid-template-rows: auto;
    }

    .home-page-join-banner-img {
        grid-column: 1/4;
        grid-row: 1/2;
    }

    .home-page-join-banner-box {
        grid-column: 2/3;
        grid-row: 1/2; 
        margin: 24px 0px 24px 0px;
    }

    .join-banner-heading {
        font-size: 38px;
        padding: 10px 33px 8px 33px;
    }

    .join-button {
        position: relative;
        top: 15px;
        padding: 15px;
    }

    footer {
        display: grid;
        grid-template-columns: auto 560px auto;
        grid-auto-rows: auto auto;
        border-radius: 0px;
        background-color: #170030;
    }

    .contact-info {
        grid-column: 2/3;
        grid-row: 1/2;
        padding: 24px;
    }

    .contact-info-heading {
        margin: 0px 0px 24px 0px;
    }

    .address-icon, .phone-icon {
        margin: 0px;
    }

    .website-info {
        grid-column: 1/4;
        grid-row: 2/3;
        text-align: center;
    }

    /* CSS Styling - Budva Page */

    .header-budva-page {
        display: grid;
        grid-template-columns: 121px auto auto;
        grid-template-rows: auto auto auto;
        column-gap: 0px;
        row-gap: 0px;
        background-color: #fefefe;
        padding: 0px;
        margin: 0px;
    }

    .header-budva-page .logo-box {
        grid-column: 1/2;
        grid-row: 1/4;
    }

    .header-budva-page .headings {
        grid-column: 2/3;
        grid-row: 1/4;
        padding: 15px 0px 0px 0px;
    }

    .header-budva-page nav.clearfix {
        grid-column: 3/4;
        grid-row: 2/3;
        margin: 0px;
    }

    .header-budva-page img {
        width: 96px;
        height: auto;
        padding: 0px;
        margin: 0px auto;
    }

    main.budva-page-main {
        display: grid;
        grid-template-columns: auto 560px auto;
        grid-template-rows: auto auto auto auto;
    } 

    main.budva-page-main .budva-page-banner {
        grid-column: 1/4;
        grid-row: 1/2;
    }

    main.budva-page-main .upcoming-events {
        grid-column: 2/3;
        grid-row: 2/3;
    }

    main.budva-page-main .history-budva {
        grid-column: 2/3;
        grid-row: 3/4;
    }

    main.budva-page-main .attractions-budva {
        grid-column: 2/3;
        grid-row: 4/5;
    }
    
    main.budva-page-main .budva-page-banner-box {
        margin: 36px 0px 36px 0px;
    }

    main.budva-page-main .budva-page-banner {
        display: grid;
        grid-template-columns: auto 560px auto;
        grid-template-rows: auto;
    }

    main.budva-page-main .budva-page-banner-img {
        grid-column: 1/4;
        grid-row: 1/2;
    }

    .budva-page-banner-box {
        grid-column: 2/3;
        grid-row: 1/2; 
        position: relative;
        left: 0px;
        right: 0px;
    }

    main.budva-page-main section.upcoming-events .event1 {
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: auto auto auto;
        column-gap: 10px;
    }

    main.budva-page-main section.upcoming-events div.event1 div.town-event-box1 {
        grid-column: 1/2;
        grid-row: 1/4;
    }

    main.budva-page-main section.upcoming-events div.event1 h4 {
        grid-column: 2/3;
        grid-row: 1/2;
        margin: 0px;
    }

    main.budva-page-main section.upcoming-events div.event1 h5 {
        grid-column: 2/3;
        grid-row: 2/3;
        margin: 14px 0px 14px 0px;
    }

    main.budva-page-main section.upcoming-events div.event1 p {
        grid-column: 2/3;
        grid-row: 3/4;
        margin: 0px;
    }

    main.budva-page-main section.upcoming-events div.event1 div.town-event-box1 h3 {
        font-size: 24px;
        letter-spacing: 2px;
        line-height: 1.4;
        margin: 19px 0px 19px 0px;
    }

    main.budva-page-main section.upcoming-events .event2 {
        display: grid;
        grid-template-columns: 200px auto;
        grid-template-rows: auto auto auto;
    }

    main.budva-page-main section.upcoming-events div.event2 div.town-event-box2 {
        grid-column: 1/2;
        grid-row: 1/4;
        margin: 0px;
    }

    main.budva-page-main section.upcoming-events div.event2 h4 {
        grid-column: 2/3;
        grid-row: 1/2;
        margin: 0px;
    }

    main.budva-page-main section.upcoming-events div.event2 h5 {
        grid-column: 2/3;
        grid-row: 2/3;
        margin: 14px 0px 14px 0px;
    }

    main.budva-page-main section.upcoming-events div.event2 p {
        grid-column: 2/3;
        grid-row: 3/4;
        margin: 0px;
    }

    main.budva-page-main section.upcoming-events div.event2 div.town-event-box2 h3 {
        font-size: 24px;
        letter-spacing: 2px;
        line-height: 1.4;
        margin: 26px 0px 19px 0px;
    }

    .history-budva-img, .attractions-budva-img {
        margin: 0px auto;
    }

    .history-budva {
        margin: 40px 0px 0px 0px;
        padding: 24px;
    }

    .attractions-budva {
        margin: 40px 0px 40px 0px;
        padding: 24px;
    }

    /* CSS Styling - Contact Page */
    .header-contact-page {
        display: grid;
        grid-template-columns: 121px auto auto;
        grid-template-rows: auto auto auto;
        column-gap: 0px;
        row-gap: 0px;
        background-color: #fefefe;
        padding: 0px;
        margin: 0px;
    }

    .header-contact-page .logo-box {
        grid-column: 1/2;
        grid-row: 1/4;
    }

    .header-contact-page .headings {
        grid-column: 2/3;
        grid-row: 1/4;
        padding: 15px 0px 0px 0px;
    }

    .header-contact-page nav.clearfix {
        grid-column: 3/4;
        grid-row: 2/3;
        margin: 0px;
    }

    .header-contact-page img {
        width: 96px;
        height: auto;
        padding: 0px;
        margin: 0px auto;
    }

    main.contact-page-main {
        display: grid;
        grid-template-columns: auto 280px 280px auto;
        grid-template-rows: auto auto auto auto;
    } 

    main.contact-page-main .contact-page-banner {
        grid-column: 1/5;
        grid-row: 1/2;
    }

    main.contact-page-main .contact-info-content {
        grid-column: 2/3;
        grid-row: 2/3;
        padding: 24px;
        column-gap: 0px;
    }

    main.contact-page-main .list-of-directors {
        grid-column: 2/3;
        grid-row: 3/4;
        margin: 0px;
        padding: 24px;
    }

    main.contact-page-main .contact-form {
        grid-column: 3/4;
        grid-row: 2/4;
        margin: 0px;
        padding: 24px;
        border-left: 1px solid #9387A0;
    }

    .embedded-googlemap-budva {
        display: grid;
        grid-column: 2/4;
        grid-row: 4/5;
        padding: 24px;
        background-color: #fefefe;
        border-top: 1px solid #9387A0;
    }

    main.contact-page-main .contact-page-banner-box {
        margin: 36px 0px 36px 0px;
    }

    main.contact-page-main .contact-page-banner {
        display: grid;
        grid-template-columns: auto 560px auto;
        grid-template-rows: auto;
    }

    main.contact-page-main .contact-page-banner-img {
        grid-column: 1/4;
        grid-row: 1/2;
    }

    .contact-page-banner-box {
        grid-column: 2/3;
        grid-row: 1/2; 
        position: relative;
        left: 0px;
        right: 0px;
    }

    .contact-info-content-heading {
        margin: 0px;
    }

    .contact-form-heading {
        margin: 0px;
    }

    div.contact-form form fieldset:nth-child(1) {
        margin: 1rem 0 1rem 0;
    }

    .main.contact-page-main .contact-info-content {
        display: grid;
        grid-template-columns: auto;
        grid-row: auto auto auto auto auto auto auto auto;
    }

    .contact-info-content-heading {
        grid-column: 1/2;
        grid-row: 1/2;
        margin: 0px;
    }

    .address-box {
        grid-column: 1/2;
        grid-row: 2/3;
        margin: 10px 0px 0px 0px;
        text-decoration: underline;
    }

    .full-address {
        grid-column: 1/2;
        grid-row: 3/4;
    }

    .phone-box {
        grid-column: 1/2;
        grid-row: 4/5;
        text-decoration: underline;
    }

    .phone-number {
        grid-column: 1/2;
        grid-row: 5/6;
    }

    .email-box {
        grid-column: 1/2;
        grid-row: 6/7;
        text-decoration: underline;
    }

    .email-info {
        grid-column: 1/2;
        grid-row: 7/8;
    }

    .social-icon-box {
        grid-column: 1/2;
        grid-row: 8/9;
    }

    .contact-info-content p:nth-child(2) {
        margin: 10px 0px 0px 0px;
    }

    .contact-info-content p:nth-child(3) {
        margin: 0px 0px 10px 0px;
    }

    .contact-info-content p:nth-child(4) {
        margin: 0px;
    }

    .contact-info-content p:nth-child(5) {
        margin: 0px 0px 10px 0px;
    }

    .contact-info-content p:nth-child(6) {
        margin: 0px;
    }

    .website-info-content {
        text-align: center;
    }

    .confirmation {
        max-width: 560px;
        display: grid;
        grid-template-columns: 1fr;
        margin: 0px auto;
    }

    .confirmation-box {
        grid-column: 1/2;
        grid-row: 1/2;
        padding: 24px;
    }

    /* CSS Styling - Join Page */
    .header-join-page {
        display: grid;
        grid-template-columns: 121px auto auto;
        grid-template-rows: auto auto auto;
        column-gap: 0px;
        row-gap: 0px;
        background-color: #fefefe;
        padding: 0px;
        margin: 0px;
    }

    .header-join-page .logo-box {
        grid-column: 1/2;
        grid-row: 1/4;
    }

    .header-join-page .headings {
        grid-column: 2/3;
        grid-row: 1/4;
        padding: 15px 0px 0px 0px;
    }

    .header-join-page nav.clearfix {
        grid-column: 3/4;
        grid-row: 2/3;
        margin: 0px;
    }

    .header-join-page img {
        width: 96px;
        height: auto;
        padding: 0px;
        margin: 0px auto;
    }

    .weather-info {
        display: none;
    }

    main.join-page-main {
        display: grid;
        grid-template-columns: auto 280px 280px auto;
        grid-template-rows: auto auto auto auto auto;
    } 

    main.join-page-main .join-page-banner {
        grid-column: 1/5;
        grid-row: 1/2;
    }

    main.join-page-main .membership-info-content {
        grid-column: 2/4;
        grid-row: 2/3;
        padding: 24px;
        column-gap: 0px;
    }

    main.join-page-main .core-benefits {
        grid-column: 2/4;
        grid-row: 3/4;
        margin: 40px 0px 0px 0px;
        padding: 24px;
    }

    main.join-page-main .membership-levels {
        grid-column: 2/4;
        grid-row: 4/5;
        margin: 40px 0px 0px 0px;
        padding: 24px;
    }

    main.join-page-main .membership-application-form {
        grid-column: 2/4;
        grid-row: 5/6;
        margin: 40px 0px 0px 0px;
        padding: 24px;
        border-left: 1px solid #9387A0;
    }

    main.join-page-main .join-page-banner-box {
        margin: 36px 0px 36px 0px;
    }

    main.join-page-main .join-page-banner {
        display: grid;
        grid-template-columns: auto 560px auto;
        grid-template-rows: auto;
    }

    main.join-page-main .join-page-banner-img {
        grid-column: 1/4;
        grid-row: 1/2;
    }

    .join-page-banner-box {
        grid-column: 2/3;
        grid-row: 1/2; 
        position: relative;
        left: 0px;
        right: 0px;
    }

    .membership-info-content-heading, .core-benefits-heading, .membership-levels-heading {
        margin: 0px 0px 7px 0px;
    }

    .membership-application-form-heading {
        margin: 0px 0px 15px 0px;
    }

    /* CSS Styling - Directory Page */
    .header-directory-page {
        display: grid;
        grid-template-columns: 121px auto auto;
        grid-template-rows: auto auto auto;
        column-gap: 0px;
        row-gap: 0px;
        background-color: #fefefe;
        padding: 0px;
        margin: 0px;
    }

    .header-directory-page .logo-box {
        grid-column: 1/2;
        grid-row: 1/4;
    }

    .header-directory-page .headings {
        grid-column: 2/3;
        grid-row: 1/4;
        padding: 15px 0px 0px 0px;
    }

    .header-directory-page nav.clearfix {
        grid-column: 3/4;
        grid-row: 2/3;
        margin: 0px;
    }

    .header-directory-page img {
        width: 96px;
        height: auto;
        padding: 0px;
        margin: 0px auto;
    }

    .weather-info {
        display: none;
    }
}