@charset "utf-8";

html {
	box-sizing: border-box;

}

*,
*::before,
*::after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}

body {
	font-family: "Arial", "Helvetica", 'Helvetica Neue', "sans-serif";
	font-weight: 400;
	margin: 0;
	padding: 0;
	font-size: 1.2rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header .NavSpace { /* to give space for top navbar*/
        width: 100%;
        background: #989FAC;
        min-height: 75px;
    }














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

       /*EXTRA LARGE MONITOR - START*/

.HeroPresent {/*Hero Image and area*/
    display: flex;
    margin: 75px auto 0;
    width: 100%;
    min-height: 700px;
    background-image: url("images/courtpresentation/JuryBox2400x933.jpg"); /*first rgba values give dark effect to image*/
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: cover;
    align-content: center;
    align-items: center;
    z-index: -1;

}
.ImgExample {
    margin: 0 auto;
    width: 40%;
    box-shadow: 5px 5px 10px;
    border: 2px solid #EFEFEF;
    border-radius: 15px;
}
.ImgExample img {
    width:100%;
    border-radius: 15px;
    margin: 0 auto;

}

.Presentaside {
    display: flex;
    flex-flow: row;
    background-color: #DEDEE0;
    padding: 10px;
    width:50%;
    margin: 25px auto 100px;
    box-shadow: 2px 2px 5px gray;
 }

 .Presentaside p {
    padding: 0px 0 10px 0;
    font-weight: 600;
    color: #014F77;
    font-size: 2.5rem;
    text-align: left;
    padding: 20px;
    margin: 0 auto;
    flex: 1 1 40%;
 }
 .Pasideimg {
    background-image: url("images/courtpresentation/courtpresentation1200x800.jpg");
    min-height: 350px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    flex: 1 1 40%;
 }
        .ReachOut { /* Banner w/ Reach Out and button*/
        background: #C8C7CB;
        width: 100%;
        display: flex;
        flex-flow: row;
        padding: 30px 10px;
        align-items: center;
        }
        
        .ReachOut h1 { /*"Questions?" text in banner*/
        color: #014F77;
        font-size: 2.25em;
        flex: 1 1 60%;
        margin-left:36%; /*This controls how far from the left the text appears*/
        
        }
        .ReachOut a { /*Reach Out button*/
        text-decoration: none;
        font-weight: 600;  
        font-size: 2rem; 
        flex: 1 1 50%;
        text-align: center;
        color: white;
        margin-right: 34%; /*This controls how far from the right button appears*/
        }
        .ReachOut span { /*styling of Reach Out button*/
        background: #014F77;
        padding: 10px 20px;
        border-radius: 12px;
        box-shadow: 4px 4px 8px 0px black;
        border: none;
        text-align: center;
        
        }
        
        .ReachOut span:hover {
        color: #C8C7CB;
        }
        .ReachOut span:active {
        color: #C8C7CB;
        }
}   
/*EXTRA LARGE MONITOR - END */

















/*LARGE MONITOR SIZE - START*/
@media screen and (min-width: 1622px) and (max-width: 2099px){

    .HeroPresent {/*Hero Image and area*/
        display: flex;
        margin: 75px auto 0;
        width: 100%;
        min-height: 700px;
        background-image: url("images/courtpresentation/JuryBox2400x933.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: cover;
        align-content: center;
        align-items: center;
        z-index: -1;
    
    }
       /*MONITOR ABOUT IMAGE - START*/
    .ImgExample {
    margin: 0 auto;
    width: 40%;
    box-shadow: 5px 5px 10px;
    border: 2px solid #EFEFEF;
    border-radius: 15px;
}
.ImgExample img {
    width:100%;
    border-radius: 15px;
    margin: 0 auto;

} 

.Presentaside {
    display: flex;
    flex-flow: row;
    background-color: #DEDEE0;
    padding: 10px;
    width:70%;
    margin: 25px auto 100px;
    box-shadow: 2px 2px 5px gray;
 }

 .Presentaside p {
    padding: 0px 0 10px 0;
    font-weight: 600;
    color: #014F77;
    font-size: 2rem;
    text-align: center;
    padding: 20px;
    margin: 0 auto;
    flex: 1 1 40%;
 }
 .Pasideimg {
    background-image: url("images/courtpresentation/courtpresentation1200x800.jpg");
    min-height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    flex: 1 1 40%;
 }

          /* REACH OUT BANNER - START*/
    .ReachOut { /* Banner w/ Reach Out and button*/
        background: #C8C7CB;
        width: 100%;
        display: flex;
        flex-flow: row;
        padding: 30px 10px;
        align-items: center;
        }
        
        .ReachOut h1 { /*"Questions?" text in banner*/
        color: #014F77;
        font-size: 2.25em;
        flex: 1 1 60%;
        margin-left:36%; /*This controls how far from the left the text appears*/
        
        }
        .ReachOut a { /*Reach Out button*/
        text-decoration: none;
        font-weight: 600;  
        font-size: 2rem; 
        flex: 1 1 50%;
        text-align: center;
        color: white;
        margin-right: 34%; /*This controls how far from the right button appears*/
        }
        .ReachOut span { /*styling of Reach Out button*/
        background: #014F77;
        padding: 10px 20px;
        border-radius: 12px;
        box-shadow: 4px 4px 8px 0px black;
        border: none;
        text-align: center;
        
        }
        
        .ReachOut span:hover {
        color: #C8C7CB;
        }
        .ReachOut span:active {
        color: #C8C7CB;
        }
        /* REACH OUT BANNER - END*/
}
/*LARGE MONITOR SIZE - END*/

















/*MONITOR SIZE - START*/
@media screen and (min-width: 1281px) and (max-width: 1621px) {
.HeroPresent {/*Hero Image and area*/
    display: flex;
    margin: 75px auto 0;
    width: 100%;
    min-height: 550px;
    background-image: url("images/courtpresentation/JuryBox1200x467.jpg"); /*first rgba values give dark effect to image*/
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: cover;
    align-content: center;
    align-items: center;
    z-index: -1;

}
       /*MONITOR ABOUT IMAGE - START*/
    .ImgExample {
    margin: 0 auto;
    width: 50%;
    box-shadow: 5px 5px 10px;
    border: 2px solid #EFEFEF;
    border-radius: 15px;
}
.ImgExample img {
    width:100%;
    border-radius: 15px;
    margin: 0 auto;

} 

.Presentaside {
    display: flex;
    flex-flow: row;
    background-color: #DEDEE0;
    padding: 10px;
    width:70%;
    margin: 25px auto 100px;
    box-shadow: 2px 2px 5px gray;
 }

 .Presentaside p {
    padding: 0px 0 10px 0;
    font-weight: 600;
    color: #014F77;
    font-size: 1.75rem;
    text-align: center;
    padding: 20px;
    margin: 0 auto;
    flex: 1 1 40%;
 }
 .Pasideimg {
    background-image: url("images/courtpresentation/courtpresentation1200x800.jpg");
    min-height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    flex: 1 1 40%;
 }

/* BANNER "REACH OUT" - START*/
.ReachOut { /* Banner w/ Reach Out and button*/
    background: #C8C7CB;
    width: 100%;
    display: flex;
    flex-flow: row;
    padding: 15px 10px;
    align-items: center;
    }
    
    .ReachOut h1 { /*"Questions?" text in banner*/
    color: #014F77;
    font-size: 1.75em;
    flex: 1 1 60%;
    margin-left:30%;
    
    }
    .ReachOut a { 
    text-decoration: none;
    font-weight: 600;  
    font-size: 1.5rem; 
    flex: 1 1 50%;
    text-align: center;
    color: white;
    margin-right:28%;
    }
    .ReachOut span { /*styling of Reach Out button*/
    background: #014F77;
    padding: 10px 20px;
    border-radius: 12px;
    box-shadow: 4px 4px 8px 0px black;
    border: none;
    text-align: center;
    
    }
    
    .ReachOut span:hover {
    color: #C8C7CB;
    }
    .ReachOut span:active {
    color: #C8C7CB;
    }
        /* BANNER "REACH OUT" - END*/

}
/*MONITOR SIZE - END*/














/*PRESENTATIONS - START*/
@media screen and (min-width: 621px) and (max-width: 1280px){
    .HeroPresent {/*Hero Image and area*/
        display: flex;
        margin: 75px auto 0;
        width: 100%;
        min-height: 400px;
        background-image: url("images/courtpresentation/JuryBox1200x467.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: cover;
        align-content: center;
        align-items: center;
        z-index: -1;
    
    }
    .ImgExample {
        margin: 0 auto;
        width: 60%;
        box-shadow: 5px 5px 10px;
        border: 2px solid #EFEFEF;
        border-radius: 15px;
    }
    .ImgExample img {
        width:100%;
        border-radius: 15px;
        margin: 0 auto;

    } 

         .Presentaside {
            display: flex;
            flex-flow: row;
            background-color: #DEDEE0;
            padding: 10px;
            width:80%;
            margin: 25px auto 100px;
            box-shadow: 2px 2px 5px gray;
         }

         .Presentaside p {
            padding: 0px 0 10px 0;
            font-weight: 600;
            color: #014F77;
            font-size: 1.75rem;
            text-align: center;
            padding: 20px;
            margin: 0 auto;
            flex: 1 1 40%;
         }
         .Pasideimg {
            background-image: url("images/courtpresentation/courtpresentation900x600.jpg");
            min-height: 200px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            flex: 1 1 40%;
         }

        /* BANNER "REACH OUT" - START*/
         .ReachOut { /* Banner w/ Reach Out and button*/
            background: #C8C7CB;
            width: 100%;
            display: flex;
            flex-flow: row;
            padding: 15px 10px;
            align-items: center;
        }
        
        .ReachOut h1 { /*"Questions?" text in banner*/
            color: #014F77;
            font-size: 1.75em;
            flex: 1 1 60%;
            margin-left: 15%;
        
        }
        .ReachOut a { 
            text-decoration: none;
            font-weight: 600;  
            font-size: 1.5rem; 
            flex: 1 1 50%;
            text-align: center;
            color: white;
        }
        .ReachOut span { /*styling of Reach Out button*/
            background: #014F77;
            padding: 10px 20px;
            border-radius: 12px;
            box-shadow: 4px 4px 8px 0px black;
            border: none;
            text-align: center;
        }
        
        .ReachOut span:hover {
            color: #C8C7CB;
        }
        .ReachOut span:active {
            color: #C8C7CB;
        }
                /* BANNER "REACH OUT" - END*/
}
/*TABLET/DESKTOP SIZE - END*/























/*MOBILE PORTRAIT VIEW - START*/
@media screen and (max-width : 620px ){
    .HeroPresent {/*Hero Image and area*/
        display: flex;
        margin: 100px auto 0;
        width: 100%;
        min-height: 300px;
        background-image: url("images/courtpresentation/JuryBox800x311.jpg"); /*first rgba values give dark effect to image*/
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: cover;
        align-content: center;
        align-items: center;
        z-index: -1;
    
    }
    .ImgExample {
        margin: 0 auto;
        width: 80%;
        box-shadow: 5px 5px 10px;
        border: 2px solid #EFEFEF;
        border-radius: 15px;
    }
    .ImgExample img {
        width:100%;
        border-radius: 15px;
        margin: 0 auto;

    } 

         .Presentaside {
            display: flex;
            flex-flow: column;
            background-color: #DEDEE0;
            padding: 10px;
            width:90%;
            margin: 25px auto 75px;
            box-shadow: 2px 2px 5px gray;
         }

         .Presentaside p {
            padding: 0 10px 10px;
            font-weight: 600;
            color: #014F77;
            font-size: 1.45rem;
            text-align: center;
         }
         .Pasideimg {
            background-image: url("images/courtpresentation/courtpresentation900x600.jpg");
            min-height: 200px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            flex: 1 1 50%;
         }

         /*MOBILE "REACH OUT BANNER - START*/
         .ReachOut { /* Banner w/ Reach Out and button*/
            background: #DEDEE0;
            width: 100%;
            display: flex;
            flex-flow: row;
            padding: 15px 10px;
            align-items: center;
        }
        
        .ReachOut h1 { /*"Questions?" text in banner*/
            color: #014F77;
            font-size: 1.5em;
            flex: 1 1 60%;
            margin-left: 10%;
        
        }
        .ReachOut a { 
            text-decoration: none;
            font-weight: 600;  
            font-size: 1.25rem; 
            flex: 1 1 50%;
            text-align: center;
            color: white;
        }
        .ReachOut span { /*styling of Reach Out button*/
            background: #014F77;
            padding: 10px 20px;
            border-radius: 12px;
            box-shadow: 4px 4px 8px 0px black;
            border: none;
            text-align: center;
        
        }
        
        .ReachOut span:hover {
            color: #C8C7CB;
        }
        .ReachOut span:active {
            color: #C8C7CB;
        }
                 /*MOBILE "REACH OUT BANNER - END*/
}
/*MOBILE PORTRAIT VIEW - END*/