/* This is the CSS styling for the desktop version */
@media only screen and (min-width: 1025px) {  
    body {
        margin: 0px;
        padding: 0px;
    }

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

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

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

    .headings {
        grid-column: 3/4;
        grid-row: 2/5;
        padding: 15px 0px 0px 0px;
        margin: 0px;
    }

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

    .headings h1 {
        font-size: 40px;
    }

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

    div.motto {
        font-size: 1rem;
        letter-spacing: 7.6px;
    }

    nav {
        display: flex;
        border-radius: 0px;
        box-shadow: none;
        border-radius: 0px;
    }

    nav button {display: none;}
        
    nav ul.hide {display: block;}
        
    nav ul li {
        float: left;
    }
        
    nav ul li a {
        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 960px auto;
        grid-template-rows: auto auto auto auto auto;
        z-index: 1;
    } 

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

    .upcoming-events {
        grid-column: 2/3;
        grid-row: 2/3;
        margin: 274px 0px 0px 0px;
    }

    .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-heading {
        font-size: 58px;
        padding: 30px 200px 30px 200px;
    }

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

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

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

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

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

    .event1 a, .event2 a {
        z-index: 1;
    }

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

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

    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: 10px 0px 5px 0px;
    }

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

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

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

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

    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: 10px 0px 5px 0px;
    }

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

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

    .upcoming-events {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-rows: auto auto;
        column-gap: 47px;
    }

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

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

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

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

    figure {
        z-index: 1;
    }

    .about-us {
        display: grid;
        grid-template-columns: auto 437px;
        grid-template-rows: auto auto auto;
        margin: 40px 0px 0px 0px;
        padding: 24px 24px 14px 24px;
    }

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

    .about-us-heading {
        grid-column: 1/2;
        grid-row: 1/2;
        margin: 0px 0px 7px 0px;
    }

    .about-budva-chamber {
        grid-column: 1/2;
        grid-row: 2/3;
        padding: 0px 15px 0px 0px;
    }

    .article-button {
        grid-column: 1/2;
        grid-row: 3/4;
        z-index: 1;
    }

    .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 1fr 1fr;
        grid-template-rows: 1fr;
        margin: 15px 0px 0px 0px;
        column-gap: 6px;
    }

    .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: 3/4;
        grid-row: 1/2;
        margin: 0px;
    }

    .company-4 {
        grid-column: 4/5;
        grid-row: 1/2;
        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 960px 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;
        z-index: 1;
    }

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

    .join-button {
        padding: 15px;
    }

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

    .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: 174px 121px auto auto 194px;
        grid-template-rows: auto auto auto;
        column-gap: 0px;
        row-gap: 0px;;
        padding: 0px;
        margin: 0px;
    }

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

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

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

    .header-budva-page .headings h1 {
        font-size: 40px;
    }

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

    .header-budva-page .headings div.motto {
        font-size: 1rem;
    }
    
    main.budva-page-main {
        display: grid;
        grid-template-columns: auto 960px auto;
        grid-template-rows: auto auto auto auto;
        z-index: 1;
    } 

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

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

    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;
    }

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

    .budva-page-banner-img {
        grid-column: 1/4;
        grid-row: auto;
        z-index: -1;
    }

    .budva-page-banner-box{
        grid-column: 2/3;
        grid-row: 1/2; 
        margin: 38px 0px 38px 0px;
    }

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

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

    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: 10px 0px 5px 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: 22px;
        letter-spacing: 2px;
        line-height: 1.4;
        margin: 26px 0px 19px 0px;
    }

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

    main.budva-page-main section.upcoming-events div.event2 div.town-event-box2  {
        grid-column: 1/2;
        grid-row: 1/4;
        padding: 10px;
        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: 10px 0px 5px 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: 22px;
        letter-spacing: 2px;
        line-height: 1.4;
        margin: 26px 0px 19px 0px;
    }

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

    .history-budva {
        display: grid;
        grid-template-columns: auto 437px;
        grid-template-rows: auto auto auto;
        margin: 40px 0px 0px 0px;
        padding: 24px 24px 14px 24px;
    }

    .history-budva-img {
        grid-column: 2/3;
        grid-row: 1/4;
    }

    .budva-history-heading {
        grid-column: 1/2;
        grid-row: 1/2;
        margin: 0px 0px 7px 0px;
    }

    .about-budva-history {
        grid-column: 1/2;
        grid-row: 2/3;
        padding: 0px 15px 0px 0px;
    }

    .history-budva .article-button {
        grid-column: 1/2;
        grid-row: 3/4;
        z-index: 1;
    }

    .attractions-budva {
        display: grid;
        grid-template-columns: auto 437px;
        grid-template-rows: auto auto auto auto auto;
        margin: 40px 0px 40px 0px;
        padding: 24px 24px 14px 24px;
    }

    .attractions-budva-img {
        grid-column: 2/3;
        grid-row: 1/5;
    }

    .budva-attractions-heading {
        grid-column: 1/2;
        grid-row: 1/2;
        margin: 0px 0px 7px 0px;
    }

    .attractions-budva-p1 {
        grid-column: 1/2;
        grid-row: 2/3;
        padding: 0px 15px 0px 0px;
    }

    .attractions-budva-p2 {
        grid-column: 1/2;
        grid-row: 3/4;
        padding: 0px 15px 0px 0px;
    }

    .attractions-budva-p3 {
        grid-column: 1/2;
        grid-row: 4/5;
        padding: 0px 15px 0px 0px;
    }

    .budva-page-article-button {
        grid-column: 1/2;
        grid-row: 5/6;
        z-index: 1;
    }

    /* CSS Styling - Contact Page */

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

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

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

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

    .header-contact-page .headings h1 {
        font-size: 40px;
    }

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

    .header-contact-page .headings div.motto {
        font-size: 1rem;
    }

    main.contact-page-main {
        display: grid;
        grid-template-columns: auto 480px 480px auto;
        grid-template-rows: auto auto auto auto;
        z-index: 1;
    } 

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

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

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

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

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

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

    .contact-page-banner-img {
        grid-column: 1/4;
        grid-row: auto;
        z-index: -1;
    }

    .contact-page-banner-box{
        grid-column: 2/3;
        grid-row: 1/2; 
        margin: 38px 0px 38px 0px;
        z-index: 2;
    }

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

    .embedded-googlemap-budva {
        z-index: 1;
    }

    .social-icon-box a {
        z-index: 1;
    }

    form label.form-details input, form label.form-details select {
        padding: 0.55rem;
    }
    
    .social-icon-box {
        display: grid;
        grid-template-columns: 32px 32px 32px auto;
        grid-template-rows: 32px;
        margin: 0px;
        column-gap: 20px;
    }

    .linkedin-icon2 {
        grid-column: 1/2;
        grid-row: 1/2;
    }
    
    .pinterest-icon2 {
        grid-column: 2/3;
        grid-row: 1/2;
    }
    
    .twitter-icon2 {
        grid-column: 3/4;
        grid-row: 1/2;
    }
    
    .youtube-icon2 {
        grid-column: 4/5;
        grid-row: 1/2;
    }

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

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

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

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

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

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

    .confirmation {
        max-width: 960px;
        display: grid;
        grid-template-columns: auto;
        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: 174px 121px auto auto 194px;
        grid-template-rows: auto auto auto;
        column-gap: 0px;
        row-gap: 0px;;
        padding: 0px;
        margin: 0px;
    }

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

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

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

    .header-join-page .headings h1 {
        font-size: 40px;
    }

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

    .header-join-page .headings div.motto {
        font-size: 1rem;
    }

    main.join-page-main {
        display: grid;
        grid-template-columns: auto 480px 480px auto;
        grid-template-rows: auto auto auto auto auto;
        z-index: 1;
    } 

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

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

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

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

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

    main.join-page-main .join-page-photo {
        display: grid;
        grid-column: 3/4;
        grid-row: 5/6;
        background-color: #fefefe;
        padding: 24px;
        margin: 40px 0px 40px 0px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    }

    .join-page-banner {
        display: grid;
        grid-template-columns: auto 960px auto;
        grid-template-rows: auto;
        box-shadow: none;
    }

    .join-page-banner-img {
        grid-column: 1/4;
        grid-row: auto;
        z-index: -1;
    }

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

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