/********************** 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: 400;
    }
    .containerA p {
        color: #d6de23;
        font-weight: 400;
    }


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

.sectionB {
    width: 100%;
    height: auto;
    background-color: #2e3191;
}

.containerB {
    text-align: center;
}
    .containerB h2 {
        color: #d6de23;
        font-weight: 400;
        margin-bottom: 0;
    }
    .containerB a {
        color: #d6de23;
        font-weight: 400;
        text-decoration: none;
    }
        .containerB a:hover {
            color: #fff;
        }
        .containerB a:active {
            color: #fff;
        }

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

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

/* --------------- 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)  {


}

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

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

}

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

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


}

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

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

}

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

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

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

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

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

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

/* --------------- 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: 80%;
        margin: auto;
        padding: 48px 24px;
    }
        .containerB h2 {
            font-size: 1.125em;
        }

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

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

}

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

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

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

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

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

/* --------------- sectionB --------------- */
    
.sectionB {
}
    .containerB {
        width: 70%;
        padding: 70px 24px;
    }
        .containerB h2 {
            font-size: 1.125em;
        }

/* --------------- 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: 2.5em;
            margin-bottom: 24px;

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

/* --------------- sectionB --------------- */
    
.sectionB {
}
    .containerB {
        width: 650px;
        padding: 70px 0px;
    }
        .containerB h2 {
            font-size: 1.125em;
        }

/* --------------- 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)  {

/* --------------- sectionB --------------- */
    
.sectionB {
}
    .containerB {
    }
        .containerB h2 {
            font-size: 1.5em;
        }


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

.sectionC {
    margin-bottom: 100px;
}

}

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

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

				
}

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

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

}

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

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

/* --------------- sectionB --------------- */
    
.sectionB {
}
    .containerB {
        width: 750px;
    }
        .containerB h2 {
            font-size: 1.6em;
        }

}

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

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

}

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


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

}

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

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

}

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