/********************** DEFAULT STYLES **********************/

*, body {
    margin: 0;
    padding: 0;
   /* overflow-x: hidden;*/
   font-family: 'Montserrat', sans-serif;
}

.clear {
    clear: both;
}

/* --------------- sectionA --------------- */

.sectionA {
    width: 100%;
    height: auto;
    background-image: url(../images/ONTennis_redesign_background.jpg);
    background-position: 50% 50%;
}
    .containerA {
        text-align: center;
    }
        .containerA h1 {
            color: #d6de23;
            font-weight: 300;
        }
        .containerA p {
            color: #d6de23;
            font-weight: 400;
        }
        .containerA p a {
            color: #d6de23;
            font-weight: 300;
            text-decoration: none;
            transition: 0.3s;
        }
            .containerA p a:hover {
                color: #ff0066;
            }
            .containerA p a:active {
                color: #ff0066;
            }

/* --------------- sectionB --------------- */

.sectionB {
    width: 100%;
    height: auto;
    background-color: #fff;
}
    .containerB {
    }
        .containerB h2 {
            font-weight: 300;
            margin-bottom: 0;
        }

        .colourbox { 
            border-top-left-radius:  5px;
            border-bottom-left-radius:  5px;
        }

        .year2022 .colourbox {
            background-color: #eb008b;
            transition: 0.3s;
        }
        .year2021 .colourbox {
            background-color: #eb008b;
            transition: 0.3s;
        }
        .year2020 .colourbox {
            background-color: #1b75bb;
            transition: 0.3s;
        }
        .year2019 .colourbox {
            background-color: #29b473;
            transition: 0.3s;
        }
        .year2018 .colourbox {
            background-color: #f05a28;
            transition: 0.3s;
        }
        .year2017 .colourbox {
            background-color: #90278e;
            transition: 0.3s;
        }

        .year2022 .archiveinfobox {
            border-bottom: 1px solid #eb008b;
            transition: 0.3s;
        }
        .year2021 .archiveinfobox {
            border-bottom: 1px solid #eb008b;
            transition: 0.3s;
        }
        .year2020 .archiveinfobox {
            border-bottom: 1px solid #1b75bb;
            transition: 0.3s;
        }
        .year2019 .archiveinfobox {
            border-bottom: 1px solid #29b473;
            transition: 0.3s;
        }
        .year2018 .archiveinfobox {
            border-bottom: 1px solid #f05a28;
            transition: 0.3s;
        }
        .year2017 .archiveinfobox {
            border-bottom: 1px solid #90278e;
            transition: 0.3s;
        }

        .archivedstory:hover .colourbox {
            background-color: #d6de23;
        }
        .archivedstory:hover .archiveinfobox {
            border-bottom: 1px solid #d6de23;
        }

        .archiveinfobox {
            color: #232323;
        }
            .archiveinfobox h3 {
                font-weight: 400 !important;
            }
            .archiveinfobox h4 {
                font-weight: 400 !important;
            }
            .archiveinfobox p {
                font-weight: 300 !important;
            }

/* --------------- sectionC --------------- */

.sectionC {
    width: 100%;
    height: auto;
    background-color: #fff;
}
    .containerC {
        text-align: center;
    }
        .adSection {
            padding: 0 !important;
        }
        .adBox a {
            display: block;
            width: 100%;
            height: 100%;
        }
        .disclosure {
            color: lightgrey;
        }


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

@media screen and (min-width: 280px)  {

/* --------------- sectionA --------------- */

.sectionA {
    background-size: auto 100%;
}
    .containerA {
        padding: 48px 24px 36px 24px;
    }
        .containerA h1 {
            font-size: 2em;
            margin-bottom: 24px;
        }
        .containerA p {
            font-size: 0.8em;
        }
            .containerA p a {
                display: block;
                margin: auto;
                font-size: 1.5em;
                margin-bottom: 6px;
                width: 60px;
            }
            #bullmark {
                display: none;
            }

/* --------------- sectionB --------------- */
    
.sectionB {
}
    .containerB {
        padding: 36px 6px;
    }
        .containerB h2 {
            font-size: 1.75em;
            text-align: center;
            margin-bottom: 24px;
        }
        .archivedstory {
            width: 268px;
            height: auto;
            margin-bottom: 24px;
        }
            .colourbox {
                width: 24px;
                height: 100px;
                float: left;
            }
            .archiveinfobox {
                position: relative;
                float: left;
                width: 236px;
                height: 100px;
                padding: 0 8px 0 0;
                margin-left: 8px;
            }
                .archiveinfobox h3 {
                    font-size: 0.9em;
                    line-height: 1em;
                }
                .archiveinfobox h4 {
                    font-size: 0.7em;
                    line-height: 1em;
                }

                .archiveinfobox p {
                    position: absolute;
                    bottom: 0;
                    font-size: 0.6em;
                    line-height: 1em;
                    margin-bottom: 8px;
                }

        .buffer {
            width: 100%;
            height: 50px;
        }

/* --------------- sectionC --------------- */

.sectionC {
}

.containerC {
    padding: 36px 12px;
}
    .adSection {
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        margin-bottom: 15px;
        padding: 0 !important;
    }
    .disclosure {
        font-size: 0.7em;
        margin: 5px 0 5px 0;
        padding: 0;
    }
    .adBox {
        width: 256px;
        height: 230px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }

}

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

@media screen and (min-width: 320px)  {

/* --------------- sectionC --------------- */

.sectionC {
}
.containerC {
}
    .adBox {
        width: 290px;
        height: 260px;
    }

}

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

@media screen and (min-width: 375px)  {

/* --------------- sectionB --------------- */
    
.sectionB {
}
    .containerB {
        padding: 36px 12px;
    }
        .containerB h2 {
            font-size: 1.75em;
            text-align: center;
            margin-bottom: 24px;
        }
        .archivedstory {
            width: 351px;
            height: auto;
            margin-bottom: 24px;
            margin-left: auto;
            margin-right: auto;
        }
            .colourbox {
                width: 24px;
                height: 80px;
                float: left;
            }
            .archiveinfobox {
                position: relative;
                float: left;
                width: 319px;
                height: 80px;
                padding: 0 8px 0 0;
                margin-left: 8px;
            }
                .archiveinfobox h3 {
                    font-size: 1em;
                    line-height: 1em;
                    margin-bottom: 8px;
                }
                .archiveinfobox h4 {
                    font-size: 0.7em;
                    line-height: 1em;
                }

                .archiveinfobox p {
                    position: absolute;
                    bottom: 0;
                    font-size: 0.6em;
                    line-height: 1em;
                    margin-bottom: 8px;
                }


}

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

@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) {

}

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

@media screen and (min-width: 414px)  {

/* --------------- sectionA --------------- */

.sectionA {
}
    .containerA {
    }
        .containerA h1 {
            font-size: 2.25em;
        }
        .containerA p {
            font-size: 1em;
        }
            .containerA p a {
                font-size: 1.5em;
                margin-bottom: 8px;
                width: 70px;
            }

}

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

@media screen and (min-width: 480px)  {

}

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

@media screen and (min-width: 568px) {

/* --------------- sectionA --------------- */

.sectionA {
    background-size: 100% auto;
}
    .containerA {
        padding: 48px 12px 36px 12px;
    }
        .containerA h1 {
            font-size: 2em;
            margin-bottom: 24px;
        }
        .containerA p {
            font-size: 0.8em;
        }
            .containerA p a {
                display: inline;
                margin: auto;
                font-size: 1.5em;
                margin-bottom: 6px;
                width: 60px;
            }
            #bullmark {
                display: inline;
                margin: 0 6px;
            }

/* --------------- sectionB --------------- */
    
.sectionB {
}
    .containerB {
        padding: 36px 6px;
    }
        .containerB h2 {
            font-size: 2em;
        }

        .archivedstory {
            width: 50%;
            float: left;
            padding: 6px 18px;
        }
            .colourbox {
                width: 8%;
            }
            .archiveinfobox {
                width: 88%;
                margin-left: 4%;
            }

/* --------------- sectionC --------------- */

.sectionC {
}
.containerC {
}
    .adBox {
        width: 518px;
        height: 203px;
        margin-bottom: 20px;
        background-size: 100% auto;
    }

}

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

@media screen and (min-width: 667px) {

/* --------------- sectionC --------------- */

.sectionC {
}
.containerC {
}
    .adBox {
        width: 617px;
        height: 242px;
    }

}

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

@media screen and (min-width: 736px)  {


}

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

@media screen and (min-width: 768px)  {

/* --------------- sectionA --------------- */

.sectionA {
    background-size: 100% auto;
}
    .containerA {
        width: 80%;
        margin: auto;
        padding: 48px 24px 36px 24px;
    }
        .containerA h1 {
            font-size: 2.25em;
            margin-bottom: 24px;

        }
        .containerA p {
            font-size: 0.9em;
        }

/* --------------- sectionB --------------- */
    
.sectionB {
}
    .containerB {
        width: 98%;
        margin: auto;
        padding: 48px 2%;
    }
        .containerB h2 {
            font-size: 2.5em;
        }
        .archivedstory {
            width: 33%;
            padding: 0 8px;
        }
            .archiveinfobox h3 {
                font-size: 0.8em;
            }



/* --------------- sectionC --------------- */

.sectionC {
}
.containerC {
}
    .adBox {
        width: 518px;
        height: 203px;
    }

}

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

@media screen and (min-width: 820px)  {

/* --------------- sectionA --------------- */

.sectionA {
    background-size: 100% auto;
}
    .containerA {
        width: 70%;
        padding: 48px 24px 36px 24px;
    }
        .containerA h1 {
            font-size: 2.25em;
            margin-bottom: 24px;

        }
        .containerA p {
            font-size: 0.9em;
        }

/* --------------- sectionB --------------- */
    
.sectionB {
}
    .containerB {
    }
        .archiveinfobox h3 {
            margin-bottom: 12px;
        }

/* --------------- sectionC --------------- */

.sectionC {
}
.containerC {
}
    .adBox {
        width: 518px;
        height: 203px;
    }

}

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

@media only screen 
    and (device-width : 812px) 
    and (device-height : 375px) 
    and (-webkit-device-pixel-ratio : 3) {

 

}

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

@media screen and (min-width: 992px)  {

/* --------------- sectionA --------------- */

.sectionA {
    margin-top: 120px;
}
    .containerA {
        width: 650px;
        padding: 100px 0px 80px 0px;
    }
        .containerA h1 {
            font-size: 3em;
            margin-bottom: 24px;
        }
        .containerA p {
            font-size: 0.9em;
        }

/* --------------- sectionB --------------- */
    
.sectionB {
}
    .containerB {
        width: 96%;
        padding: 70px 2%;
    }
        .containerB h2 {
            font-size: 2.5em;
        }

        #y2021 {
            display: block;
            position: absolute;
            top: 300px;
        }

        #y2020 {
            display: block;
            position: absolute;
            top: 900px;
        }

        #y2019 {
            display: block;
            position: absolute;
            top: 1620px;
        }

        #y2018 {
            display: block;
            position: absolute;
            top: 2790px;
        }

        #y2017 {
            display: block;
            position: absolute;
            top: 4580px;
        }

        .archiveinfobox h3 {
            font-size: 0.95em;
            margin-bottom: 8px;
        }

/* --------------- sectionC --------------- */

.containerC {
}
    .adBox {
        width: 664px;
        height: 260px;
    }

}

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

@media screen and (min-width: 1024px)  {

}

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

/*ipad pro portrait*/
@media only screen 
    and (min-device-width: 1024px) 
    and (max-device-width: 1366px) 
    and (-webkit-min-device-pixel-ratio: 2)  
    and (orientation: portrait)  {


}

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

@media screen and (min-width: 1115px)  {

				
}

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

@media screen and (min-width: 1266px)  {

}

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

@media screen and (min-width: 1280px)  {

.containerA h1 {
    font-size: 3.5em;
    margin-bottom: 24px;
}

/* --------------- sectionB --------------- */
    
.sectionB {
}
    .containerB {
        width: 1280px;
        padding: 70px 48px;
    }
        .archiveinfobox h3 {
            font-size: 0.95em;
        }

}

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

@media screen and (min-width: 1366px)  {

}

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


@media screen and (min-width: 1600px)  {

}

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

@media screen and (min-width: 1920px)  {

}

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