.school-body {
  margin: 0px 0px 20px 0px; 
  width: auto;
  display: flex;
}



#codeofethics-body{
  margin: 0px 0px 20px 0px; 
  width: auto;
  display: flex;
}


#tuition-body{
  margin: 0px 0px 20px 0px; 
  width: auto;
  display: flex;
}



#school-menu {
  clear: right;
  height: 145;
  width: auto;
  margin-left: 12.5%;
/**
border-style: solid;
border-color: yellow;
border-width: 1px;
**/
}

.schoolmenu-flex {
  flex: 1;
  margin-bottom: 0px;
}

.schoolmenu-box-flex {
    flex: 1;
}


.schoolmenu-box {
  width: 215;  
  height: 145px;
  float: left;
  color: black;
  margin-bottom: 5px;
}

.schoolmenu-box1 {
  clear: left;
  background: url('../images/btnschoolabout.jpg') no-repeat; 

}

.schoolmenu-button {
  width: 215px;  
  height:  145px;
  border-style: solid;
  border-color: white;
  border-width: 0px;
  background-color: white;

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;

}

#btnSchoolAboutImg {
  width: auto;  
  height:  140px;
}

#btnSchoolAdmissionImg {
  width: auto;  
  height:  140px;
}

#btnSchoolAcademicsImg {
  width: auto;  
  height:  140px;
}

#btnSchoolStudentLifeImg {
  width: auto;  
  height:  140px;
/**
border-style: solid;
border-color: red;
border-width: 1px;
**/
}

.schoolmenu-button-hover:hover {

  border-bottom: 100%;
  border-bottom-style: solid;
  border-bottom-color: #624dd6;
/**
  border-top-color: white;
  border-left-color: white;
  border-right-color: white;
**/ 
  border-bottom-width: 2px;

}



#schoolmain-container {
  height: Auto;
  float: left;
  width: 100%;
/**  margin-top: 30px; **/
  padding-top: 30px;
  clear: left;
  border-top: 100%;
  border-top-style: solid;
  border-top-color: gray;
  border-top-width: 1px;
/**
border-style: solid;
border-color: green;
border-width: 1px;
**/
}


h2, .h2 {
  font-size: .9em;
  color: black;
  font-weight: 500;
  font-style: italic;
}

h3, .h3 {
  font-size: 1em;
  color: black;
  font-weight: bold;
}

h4, .h4 {
  font-size: 1em;
  color: black;
  font-weight: bold;
}

#schoolmain-content {
  height: auto;
  width: 66%;
  float: left;
  color: black;
/**
border-style: solid;
border-color: red;
border-width: 1px;
**/
}

#SchoolImg {
  height: 319px;
  width: 350px;
  float: right;
/**
border-style: solid;
border-color: Yellow;
border-width: 1px;
**/
}






.box {
  width: 100%;
  height: auto;
}

img {
  width: 100%; /* takes the 100 % width of its container (.box div)*/
  height: 100%; /* takes the 100 % height of its container (.box div)*/
}

#Tuition {
  width: 100%;
  height: auto;
  float: left;
  text-align: center;
  color: white;
  font-weight: 500;
  margin-top: 60px;
}

#TuitionBox {
  width: 150px;
  height: 30px;
  text-align: center;
  color: white;
  padding-top: 2px;
  background-color: #624dd6;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  margin-left: auto;
  margin-right: auto;
}

.TuitionLink {
  color: white;
  margin-left: auto;
  margin-right: auto;
}



#CodeOfEthics {
  width: 100%;
  height: auto;
  float: left;
  text-align: center;
  color: white;
  font-weight: 500;
  margin-top: 20px;
}

#CodeOfEthicsBox {
  width: 150px;
  height: 30px;
  text-align: center;
  color: white;
  padding-top: 2px;
  background-color: #624dd6;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  margin-left: auto;
  margin-right: auto;
}

.CodeOfEthicsLink {
  color: white;
  margin-left: auto;
  margin-right: auto;
}

#codeofethics-content-area {
  width: 100%;
  height: auto;
  color: black;
  margin-bottom: 40px;
}


.codeofethics-header {
  width: 100%;
  height: 20px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
}

.codeofethics-content {
  color: darkgray;

}

.CodeOfEthicsContactLink {
  color: blue;
}


/********** Medium devices **********/
@media (max-width: 1199px) {

.schoolmenu-button {
  width: 190px;  
}
}


@media (max-width: 1300px) {

#SchoolImg {
  width: 300px;
  height: 274px;
/**
border-style: solid;
border-color: red;
border-width: 1px;
**/
}
}



@media (max-width: 1198px) {

#SchoolImg {
  width: 250px;
  height: 228px;
/**
border-style: solid;
border-color: red;
border-width: 1px;
**/
}
}



@media (max-width: 992px) {

.schoolmenu-button {
  width: 140px;  
}

#SchoolImg {
  width: 200px;
  height: 183px;
/*
border-style: solid;
border-color: blue;
border-width: 1px;
**/
}
}

/********** Extra Small devices only **********/

@media (max-width: 733px) {

.schoolmenu-box {
  width: 115px;  
}

.schoolmenu-box1 {
  margin-left: 1%;
}

.schoolmenu-button {
  width: 115px;  
}

#schoolmain-image-box {
  width: 100%;
  height: 200;
  float: left;
  text-align: center;
}

#schoolmain-content {
  width: 100%;
  clear: both;
}

#SchoolImg {
  width: 300px;
  height: 274px;
  margin-top: 50px;
  float: none;
}

#school-menu {
  margin-left: 10%;
}
}

@media (max-width: 588px) {

.schoolmenu-box {
  width: 90px;  
  height: 140px;  
}
.schoolmenu-button {
  width: 70px;  
  padding-left: 0%;
}
#btnSchoolAboutImg {
  width: 70px;  
}

#btnSchoolAdmissionImg {
  width: 70px;  
}

#btnSchoolAcademicsImg {
  width: 70px;  
}

#btnSchoolStudentLifeImg {
  width: 70px;  
}

#school-menu {
  margin-left: 5%;
}
}


@media (max-width: 430px) {

.schoolmenu-box {
  width: 80px;  
  height: 140px;  
}


#school-menu {
  margin-left: 5%;
}
}

@media (max-width: 390px) {

.schoolmenu-box {
  width: 72px;  
  height: 140px;  
}


#school-menu {
  margin-left: 5%;
}
}