/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 29-Mar-2023, 9:38:22 PM
    Author     : monau
*/
*{
   margin:0; padding:0;
   box-sizing: border-box;
   font-family: Arial, Helvetica, sans-serif;
/*   text-transform: capitalize;*/
   text-decoration: none;
}

body{
    min-height: 100vh;
    background:url(../images/bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

.content{
/*    width: 100%;
    margin: 0 auto;
    min-height: 300px;
    margin: 0 auto;
    text-align: center;*/
    min-height: 500px;
}
.container {
    width: 100%;
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20 px;
}

header{
    position: fixed;
    top: 0; left: 0; right: 0;
    background: #ffffff;
    box-shadow: 0 5px 10px rgba(0,0,0,.1);
    padding: 0px 7%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
}

header.logo{
    font-weight: bolder;
    font-size: 20px;
    color: #333;
}

header .navbar ul{
    list-style: none;
}

header .navbar ul li{
    position: relative;
    float: left;
}

header .navbar ul li a{
    font-size: 15px;
    padding: 15px;
    color: #333;
    display: block;
}

header .navbar ul li a:hover{
    background: #333;
    color: #fff;
}

header .navbar ul li ul{
    position: absolute;
    left: 0;
    width: 200px;
    background: #fff;
    display: none;
}

header .navbar ul li ul li{
    width:100%;
    border-top: 1px solid rgba(0,0,0,.1);
}

header .navbar ul li ul li ul{
    left: 200px;
    top:0;
}
header .navbar ul li:focus-within > ul,
header .navbar ul li:hover > ul{
    display: initial;
}

img .openhouse{
    margin: 0px;
    width: 100%;
    height: auto;
}

#menu-bar{
    display: none;
}

header label{
    font-size: 20px;
    color:#333;
    cursor: pointer;
    display: none;
}

.footer {
    background-color: #E5E4E2;
        /*#E5E4E2;*/
    color: #ffffff;
    width: 100%;
    height: 350px;
    margin: 5px 0px 0px 0px;
    padding: 0px;
    font-size: 8px;
}
.footer .footer2 ul {
    background-color: #E5E4E2;
        /*#E5E4E2;*/
    overflow: hidden;
    color: #ffffff;
    padding: 0;
    text-align: center;    
    margin: 25px 0px 25px 0px;
    -webkit-transition: max-height 0.4s;
    -ms-transition: max-height 0.4s;
    -moz-transition: max-height 0.4s;
    -o-transition: max-height 0.4s;
    transition: max-height 0.4s;
}
.footer .footer2 li {
    display: inline-block;
    padding: 10px 15px 10px 15px;
    text-align: left;
    font-size: 15px;
    color: #2E2E2E;
}
.footer .footer2 li:hover {
    background-color: #2E2E2E;
    color: #ffffff;
}
        
.column {
    width: 40%;
    height: 400px;
/*            background-color: #C5C6D0;*/
    margin: 50px;
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    opacity: 0.9;
}
.image_style {
display: flex;
justify-content: center;
align-itmes: center;
flex-wrap: wrap;
}
.image_style img{
    width: 300px;
    height: 300px;
    border-radius: 13 px;
    box-shadow: 4px 7 px 7 px 0 px;
    cursor: pointer;
    margin: 20px;
    transition: 400ms;
}
.image_style2 img{
    width: 400px;
    height: 345px;
    border-radius: 13 px;
    box-shadow: 4px 7 px 7 px 0 px;
    cursor: pointer;
    margin: 20px;
    transition: 400ms;
}
.image_style img:hover{
    filter: grayscale;
    transform: scale(1.03);
}
.image_style2 img:hover{
    filter: grayscale;
    transform: scale(1.03);
}

.course_heading{
    margin-top: 105px;
    width: 100%;
    height: 80px;
    vertical-align: middle;
    text-align: center;
    color: #ffffff;
    background-color: #000000;
    //2E2E2E
        /*#078783;*/
    // #0ca39e
}

.image_style3 {
display: flex;
justify-content: center;
align-itmes: center;
flex-wrap: wrap;
}

video {
    margin: 10px 0px 0px 0px;
    height: auto;
    width: 50%;
}

.player{
    aspect-ratio: 16 / 9;
    width: 50%;
    justify-content: center;
    align-itmes: center;
    flex-wrap: wrap;
    //width="560" height="315"
}
.course_outline{
    line-height: 2em;
    list-style-type: none;
    margin: 0px 0px 0px 20px;
}
.course_outline li{
    font-size: 14px;
}
h3.course_outline_heading {
    margin: 10px 0px 10px 15px;
}

table.outline tr:nth-child(odd){
/*    background-color: #16a085;#00bf63*/
    background-color:  #16a085;
   /*#5589ac;*/ 
    color: #ffffff;
}
table.outline tr:nth-child(even){
/*    background-color:  #a2d9ce;*/
    background-color:    #a2d9ce;
        /*#85c1e9;*/ 
    color: #00355f;
}

.contact1{
margin-top: 25px;
display: flex;
justify-content: center;
align-itmes: center;
flex-wrap: wrap;
}

.contact1 > div{
  background-color: #f1f1f1;
  width: 30%;
  margin: 10px;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  font-weight: bold;
}

.contact2{
margin-top: 15px;
display: flex;
justify-content: center;
align-itmes: center;
flex-wrap: wrap;
}

.contact2 > div{
  width: 48%;
}

/*Textbox and Input Button Code*/

.textbox_form {
 margin-left: 0px;
 margin-top: 0px;
 width: 250px;
 height: 30px;
}
.format_game {
  width: 120px;
  padding: 20px 20px 20px 45px;
  margin: 0px;
  box-sizing: border-box;
  background-color: #008080;
  color: #ffffff;
  font-size: 60px;
  font-weight: bold;
}
.select3 {
    width: 253px;
    height: 33px;
}
select.select4 {
    width: 82px;
    height: 33px;
}
input[type=text].wider {
    width: 275px;
    height: 40px;
    border: 1px solid;
    background-color: #f2f2f2;
    border-color: #333333;
    margin: 10px;
    font-style: italic;
    color: #000000;
}

input[type=text].wider2 {
    width: 173px;
    height: 40px;
    border: 1px solid;
    background-color: #f2f2f2;
    border-color: #333333;
    margin: 10px;
    font-style: italic;
    color: #000000;
}

.select1 {
    width: 278px;
    height: 40px;
    border: 1px solid;
    background-color: #f2f2f2;
    border-color: #333333;
    margin: 10px;
    font-style: italic;
    color: #333333;
}

.select2 {
    width: 179px;
    height: 40px;
    border: 1px solid;
    background-color: #f2f2f2;
    border-color: #333333;
    margin: 10px 9px 10px 9px;
    font-style: italic;
    color: #333333;
}

input.loginButton {
 color: #fff;
 font-size: 16px;
 width: 175px;
 height: 40px;
 border: none;
 margin: 10px 0px 0px 0px;
 padding: 0;
 background: #0b5345 url(image) 0 0 no-repeat;
}
input.loginButton:hover {
 color: #fff;
 font-size: 16px;
 width: 175px;
 height: 40px;
 border: none;
 margin: 10px 0px 0px 0px;
 padding: 0;
 background: #008080 url(image) 0 0 no-repeat;
}

input.loginButton2 {
 color: #fff;
 font-size: 16px;
 width: 346px;
 height: 40px;
 border: none;
 margin: 10px 0px 0px 0px;
 padding: 0;
 background: #0b5345 url(image) 0 0 no-repeat;
}
input.loginButton2:hover {
 color: #fff;
 font-size: 16px;
 width: 346px;
 height: 40px;
 border: none;
 margin: 10px 0px 0px 0px;
 padding: 0;
 background: #008080 url(image) 0 0 no-repeat;
}

input.loginReset {
 color: #fff;
 font-size: 13px;
 width: 95px;
 height: 40px;
 border: none;
 margin: 10px 0px 0px 0px;
 padding: 0;
 background: #0b5345 url(image) 0 0 no-repeat;
}
input.loginReset:hover {
 color: #fff;
 font-size: 13px;
 width: 95px;
 height: 40px;
 border: none;
 margin: 10px 0px 0px   0px;
 padding: 0;
 background: #008080 url(image) 0 0 no-repeat;
}

button.btn-math {
 color: #fff;
 font-size: 18px;
 width: 225px;
 height: 45px;
 border: none;
 margin: 0px 0px 0px 0px;
 padding: 0;
 background: #00A550 url(image) 0 0 no-repeat;
 cursor: pointer;
 border-radius: 4px;
}
button.btn-math:hover {
 color: #fff;
 font-size: 18px;
 width: 225px;
 height: 45px;
 border: none;
 margin: 0px 0px 0px 0px;
 padding: 0;
 background: #009000 url(image) 0 0 no-repeat;
 cursor: pointer;
 border-radius: 4px;
}

@media(max-width:991px){
    
    header{
        padding: 10px 10px 0px 10px;
    }
    
    header label{
        display: initial;
    }
    
    header .navbar{
        position: absolute;
        top:100%; left: 0; right: 0;
        background: #fff;
        border-top: 1px solid rgba(0,0,0,.1);
        display: none;
    }
    
    header .navbar ul li{   
        width: 100%;
    }
    
    header .navbar ul li ul{
        position: relative;
        width: 100%;
    }
    
    header .navbar ul li ul li{
        background: #eee;
    }
    
    header .navbar ul li ul li ul{
        width: 100%;
        left: 0;
    }
    
    #menu-bar:checked ~ .navbar{
        display: initial;
    }
    
    .footer .footer2 li {
        display: block;
        padding: 10px 15px 10px 15px;
        text-align: center;
        font-size: 12px;
    } 
}

@media (max-width: 768px) {
/*            .column {
        width: 45%;
    }*/

video {
    margin: 10px 0px 0px 0px;
    height: auto;
    width: 80%;
}

.player{
    aspect-ratio: 16 / 9;
    width: 70%;
    justify-content: center;
    align-itmes: center;
    flex-wrap: wrap;
    //width="560" height="315"
}
.contact1 > div{
  background-color: #f1f1f1;
  width: 65%;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 20px;
}
.contact2 > div{
  width: 100%;
}

}

@media (max-width: 576px) {
/*            .column {
        width: 100%;
    }*/

video {
    margin: 10px 0px 0px 0px;
    height: auto;
    width: 90%;
}

.player{
    aspect-ratio: 16 / 9;
    width: 85%;
    justify-content: center;
    align-itmes: center;
    flex-wrap: wrap;
    //width="560" height="315"
}
.contact1 > div{
  background-color: #f1f1f1;
  width: 100%;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 20px;
}
.contact2 > div{
  width: 100%;
}
}