/*  THIES STYLE SHEET JUST PAGE GRID STYLING */


topsection {
    width: 100%;
    padding: 20px 0 30px;
    border-bottom: 1px solid #0f0f63;
}

topsection #box-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 0.2fr;
    grid-template-areas: "ttb ttb ttb ttb ttb ml";
    max-width: 90%;
    width:1170px;
    margin: 0 auto
}

topsection .top-text-box {
    grid-area: ttb;
}

topsection .top-logo {
    grid-area: ml;
}

slider {
    /*background: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.5)),
                url('../imgs/slidermain.jpg');
    display: block;
    background-size: 104%;
    background-position: center;
    height: 700px;*/
    border-top:1px solid #0f0f63;
}
slider > img {
    width: 100%;
    height: auto;
    opacity: 0.4;

}

.n2-ss-layers-container h2 {
	font-family:var(--main-h2-font) !important;
	/*text-transform: uppercase !important*/
}

.page-template-default .slider-nav,
.single .slider-nav{
    background: #000;
}


.slider-img {
    display: block;
    width:90%;
    max-width: 1170px;
    margin: 0 auto;
}

.slider-txt {
    text-align: right;
    padding: 550px 0 50px 0;
    font-size: 1.4em;
}

.slider-txt h2 {
    font-weight: 100;
    text-transform: uppercase;
    line-height:var(--line-height-h2)
}
.slider-txt h2 span {
    font-weight: 400;
}

main {
    padding: 60px 0 0px 0
}

.home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr 1fr;
    grid-template-areas: "rd gc"
                        "sd gc";
    gap:var(--grid-gap);
    width: 1170px;
    max-width: 90%;
    margin: 0 auto
}

.regular-diwaans {
    grid-area: rd;
}

.special-diwaans {
    grid-area: sd;
}

.google-calendar {
	background: #fff;
    grid-area: gc;
	width: 100%;
	overflow: hidden;
	padding: 0 2.5% 0 2.5%
}

#main-content h1 {
	font-family:var(--main-h1-font) !important;
    font-weight: 200;
	color: var(--dark-brand-text-color)
}

#main-content {
	background:var(--light-brand-colour)
}

sangat-adds {
    padding: 0 0 60px;
    display: block;
}

.sangat-adds-grid {
    
    display: grid;
    grid-template-columns: 49.4% 49.4%;
    gap:var(--grid-gap);
    width: 1170px;
    max-width: 90%;
    margin: 0 auto
}

sangat-adds .heading {
    display: block;
    width: 1170px;
    max-width: 90%;
    margin: 0 auto;
}

.sangat-add img {
    width: 100%;
    height: auto;
    margin-bottom: -5px;
}

.security-block {
    background: var(--light-brand-text-colour);
    display: block;
    padding: 50px 0
}

.sec-intro {
    display: block;
    width: 1170px;
    max-width: 90%;
    margin: 0 auto;
}

.sec-grid {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    gap:var(--grid-gap);
    width: 1170px;
    max-width: 90%;
    margin: 0 auto
}

.opening-box {
    display: block;
    width: 1170px;
    max-width: 90%;
    margin: 0 auto 90px;
    padding: 40px; 0 0 0;
}

.opening-box p {
    color:var(--mid-brand-text-colour);
}

footer {
    background:var(--dark-brand-text-color);
    position: relative;
    display: block;
    padding: 40px 0 80px
}
footer::before {
    border-top: 140px solid rgba(255, 255, 255, 0);
    border-left: 0px solid blue;
    border-bottom: 0px solid green;
    border-right: 98.89vw solid #0f0f63;
    content: "";
    display: block;
    padding: 0;
    margin: 0;
    position: absolute;
    top: -140px;
    right: 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 80% 20%;
    gap:var(--grid-gap);
    width: 1170px;
    max-width: 90%;
    margin: 0 auto
}
/**** PAGE STYLES HERE *****/

main .container {
    display: block;
    width: 1170px;
    max-width: 90%;
    margin:0 auto;
}

.single slider figure {
	margin: 0 !important
}

.single slider .wp-block-image img {
	width: 100% !important;
	height: auto;
	opacity:0.4;
}

/***************************/

@media only screen and (max-width: 600px) {

    nav .menu {
        display: none;
    }

    .home-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "rd"
                             "sd"
                             "gc";
        gap:var(--grid-gap);
        max-width: 90%;
        margin: 0 auto
    }

    .sangat-adds-grid {
    
        display: grid;
        grid-template-columns: 97.5%;
        gap:var(--grid-gap);
        width: 1170px;
        max-width: 90%;
        margin: 0 auto
    }

    .sec-grid {
        display: grid;
        grid-template-columns: 97.5%;
        gap:var(--grid-gap);
        width: 1170px;
        max-width: 90%;
        margin: 0 auto
    }

    .footer-grid {
        display: grid;
        grid-template-columns: 97.5%;
        grid-template-areas: "fl"
                             "ft";
        gap:var(--grid-gap);
        width: 1170px;
        max-width: 90%;
        margin: 0 auto
    }

    .foter-logo {
        grid-area: fl;
        
    }

    .footer-text {
        grid-area: ft;

    }

    .gurdwara-openiings {
        width: 95%;
        overflow: hidden;
    }

    .opening-box p {
        font-size: 0.7rem;
    }

    slider {
        height: 300px;
    }

    .slider-txt {
        padding: 180px 0 20px 0;
        font-size: 0.9em;

    }

topsection .top-text-box {
        display: none;
    }

    topsection {
        width: 100%;
        padding: 20px 0 15px;
    }

    topsection .top-logo img {
        margin: 0 0 0 0px;
        width: 90%;
    }

    main {
        padding: 26px 0 0px 0;
    }



    .regular-diwaans h2 {
        font-size: 1.4rem !important;
    }
    .text-left, .text-right {
        float: none;
        text-align: left;
    }
    .special-diwaans h3 {
        font-size: 1.3rem !important;
    }
    .google-calendar h2 {
        font-size: 1.7rem !important;
    }

    sangat-adds .heading h2 {
        font-size: 1.1rem !important;
        line-height: 1.3rem !important;
        font-weight: 300 !important;
    }
    .sec-intro h2 {

        font-size: 1.6rem !important;

    }
    .security-block {
        padding: 10px 0;
    }

    .opening-box h2 {
        font-size: 1.6rem !important;

    }

    .foter-logo img {
        margin-top: -14px;
        width: 213px;
        display: block;
        height: auto;
        max-width: 100%;
        margin: 0 auto;
    }

    .copyright {
        text-align: center;
        font-family: var(--home-p);
        font-size: 0.95em;
        margin: 30px 0 0 0;
    }

    }