@charset "utf-8";
body {background-color: Teal; }/* Style for complete page */
/***************************************************************************************************************************************************************************/
/* My screen size is 1500 x 850 px. Used to calculate percentages.***/
/* Set colour and size for whole page. ************/
#Main{ max-width: 1480px; min-width: 1480px; max-height: 840px; min-height: 840px; margin: 5px; border-radius: 20px;
       background: linear-gradient(225deg, Coral, Snow, LightPink, Snow, Gainsboro, Snow, Gainsboro, Snow, Lavender, Snow, LightSteelBlue);
       background-size: 400% 400%;
       -webkit-animation: AnimationBar 30s ease infinite;
       -moz-animation: AnimationBar 30s ease infinite;
       animation: AnimationBar 30s ease infinite;
     }
/***************************************************************************************************************************************************************************/
/* Size of div containing logo, name, facebook twitter links */
#LogoBlock { width: 100%; border-radius: 20px; background-color: white;}
/***************************************************************************************************************************************************************************/
/* Set size of logo image. Actual image size: 250 x 95 */
.Logo { width: 250px; height: 95px; margin-left: 15px;}
/***************************************************************************************************************************************************************************/
/* Style for institute name *********************/
#LogoBlock #Part1 { position: relative; float: right; top: 50px; color: MidnightBlue; font-size: 25px; font-family: helvetica; font-weight: bold; margin-right: 10px; }
/***************************************************************************************************************************************************************************/
/* Style for TM symbol for logo  ****************/
#LogoBlock sup { position: relative; top: -90px; margin-left: 250px; font-size: 7px; }
/***************************************************************************************************************************************************************************/
/* Style for Facebook link  *********************/
.Facebook { position: relative; top: -130px;  width: 30px; height: 30px; float: right;  }
/***************************************************************************************************************************************************************************/
/* Style for LikeIt link ************************/
.LikeIt { position: relative; top: -135px; width: 40px; height: 40px; float: right;}
/***************************************************************************************************************************************************************************/
/* Style for Twitter link  *********************/
.Twitter { position: relative; top: -130px;  width: 30px; height: 30px; float: right;  margin-right: 10px;  }
/***************************************************************************************************************************************************************************/
/* Style for Header bar **************************/
#Header { width: 100%; height: 30px; position: relative; top: -45px;border-radius: 10px;  
          background: linear-gradient(5deg, DarkBlue, Snow, orange, Snow, green);
          background-size: 400% 400%;
         -webkit-animation: AnimationBar 30s ease infinite;
         -moz-animation: AnimationBar 30s ease infinite;
          animation: AnimationBar 30s ease infinite;
        }
/***************************************************************************************************************************************************************************/
/* Bar and background color animation ***********/
@-webkit-keyframes AnimationBar {
    0% {background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationBar {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationBar { 
    0%{background-position: 0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
/***************************************************************************************************************************************************************************/
/************************************************** Style for main menu ****************************************************************************************************/
.Navigation {position: relative; width: 100%; height: 25px; top: -45px;	}/* Size for Navigation bar */
.Navigation ul { margin:0px; padding:0px; list-style: none; }/* Strip the ul list styling and padding */
.Navigation ul li {display: block; float: right; min-width: 150px; max-width: 150px; min-height: 40px; max-height: 40px; color:white; font-size: 20px;	z-index: 100;
	           line-height: 40px; text-align: center; text-decoration:none; border-radius: 10px; border:1px solid white; background-color:green;}/* Style for main menu blocks */
.Navigation ul li ul li {width: 100%; height: 100%; font-size: 20px; }/* Style for drop down menu blocks */
.Navigation ul li a { display: block; color:white; text-decoration:none; }/* Style for  menu links*/
.Navigation ul li:hover { color: black;	border-radius: 10px; max-height: 40px; background-color:orange; transition: all ease-in 0.1s; }/* Change color on mouse over non-links*/
.Navigation ul li a:hover {color: black; border-radius: 10px; background-color: orange; transition: all ease-in 0.5s;}/* Change color of menu blocks on mouse over */
.Navigation ul li ul li { display: none;}/* Hide drop down links */
.Navigation ul li:hover ul li {	display:block; position: relative; z-index: 100;}/* Show drop down links on mouse hover */
.Navigation input[type=checkbox]{display: none;}/*Hide checkbox in the menu bar */
/************************************************* End of style for menu ***************************************************************************************************/
/***************************************************************************************************************************************************************************/

/***************************************************************************************************************************************************************************/
/***************************************************Style for Enrollment form***********************************************************************************************/
.FormMain {min-width:1400px; max-width: 1400px; min-height: 500px; max-height: 500px; margin-left: 25px; position: absolute; top: 250px; z-index: 1; border-radius: 20px;
	   border: 5px double navy; font-family: Cutive; background: AliceBlue;	}/* Size for form */
.FormMain p { position: absolute; top: -15px; color: navy; font-size: 30px; font-weight: bold; margin-left: 35%; text-shadow: 1px 1px 2px #000; }/* Style for Form heading */
.StudentInfo { width: 60%; max-width: 918px;  margin: 10px;  float: left; position: absolute; top: 50px; border: 3px solid green; }/* Size for student details */
.CourseInfo {width: 35%; max-width: 500px; min-height: 190px; margin: 10px;  position: absolute; left: 875px; top: 50px; border: 3px solid green;}/* Size for course information*/
.CourseInfo fieldset { color: navy; font-size: 20px; padding: 20px; border: 3px solid green; }/* Font style for course details */
.CourseInfo legend { text-align: center; }/* center heading for course details */
.OtherInfo {width: 35%; min-height: 80px; max-height: 80px; margin: 10px; position: absolute; max-width: 500px; left: 875px; top: 255px; 
            border: 3px solid green; }/* Size for message box div */ 
.Submit { width: 35%; max-width: 500px; min-height: 60px; margin: 10px; position: absolute; left: 875px; top: 350px; border: 3px solid green; }/* Size for submit div */
.form-box label { color: navy; font-size: 20px; text-align: left; margin-left: 10px; }/* Style for form labels */
.form-box sup {	color: red; }/* Style for 'required' star */
.inp1,.inp2,.inp3 {padding: 5px; margin: 5px; color: navy; font-size: 20px; font-weight: bold; border: 2px solid green; border-radius: 5px;
                   border-right: 5px solid green; border-left: 5px solid green;	}/* Style for input text */
.inp1 {width: 90%;}/* Set width of text boxes */
.inp2 {width: 190%;}/* Set width of text boxes */
.inp3 {width: 40%;}/* Set width of text boxes */
.CourseInfo Input[type=checkbox] {width: 50px; }/* Set width of checkboxes boxes */
.col1, .col2 {float: left; width: 50%; max-width: 450px; }/* Size for two columns in student details. */
.inp1:focus, .inp2:focus, .inp3:focus, .Submit:focus, #msg-box:focus { outline: none; border: 2px solid navy; border-right: 5px solid navy;
                                                                       border-left: 5px solid navy; }/* Change color upon selection */
#msg-box {resize: none; width: 90%; max-width: 510px;  padding: 10px; margin-left: 10px; border: 2px solid green; border-radius: 5px; font-weight: bold;
          color: navy; font-size: 20px; height: 20px;  border-right: 5px solid green; border-left: 5px solid green; }/* Style for message box */
.sub-btn { width: 95%; max-width: 500px; padding: 8px; margin: 5px; margin-left: 10px; border: none; border-radius: 10px; color: white;
	   font-size: 20px; cursor: pointer; box-shadow: 0 9px #999; background: linear-gradient(YellowGreen, Green); }/* Style for Submit button */
.sub-btn:focus {outline: none; box-shadow: 0 5px #666; transform: translateY(4px); }/* Submit button on mouse click */
.sub-btn:hover { opacity: 0.8; filter: alpha(opacity=10); transition: all ease-out 0.5s; background: linear-gradient(CornFlowerBlue, SteelBlue);}/* Change color of submit button on mouse over */
/************************************************* End of style for Enrolment Form *****************************************************************************************/
/***************************************************************************************************************************************************************************/

/***************************************************************************************************************************************************************************/
/***************************************************Style for Home page, WhyArt image***************************************************************************************/
.BGImage { position: absolute; top: 140px; max-width: 1480px;  min-width: 1480px; max-height: 700px; min-height: 700px; opacity: 0.1; }
/************************************************* End of style for Home page, WhyArt image ********************************************************************************/
/***************************************************************************************************************************************************************************/

/***************************************************************************************************************************************************************************/
/***************************************************Style for Founders image************************************************************************************************/
.FoundersImg { position: absolute; top: 190px; width: 600px; height: 630px; margin-left: 450px; border-radius: 50%; opacity: 0.5;}/* Background image for Founder's page */
#FoundersImage {position: absolute; width: 600px; height: 630px; border-radius: 50%; -webkit-filter: grayscale(100%); filter: grayscale(100%);  }

/************************************************* End of style for Founders image *****************************************************************************************/
/***************************************************************************************************************************************************************************/

/***************************************************************************************************************************************************************************/
/***************************************************Style for home page description******************************************************************************************/
.Home { z-index: 1;  color: navy; font-size: 20px; font-family: 'Sofia'; margin-left: 100px; max-width: 500px; min-width: 500px; }

/************************************************* End of style for home page description* *********************************************************************************/
/***************************************************************************************************************************************************************************/

/***************************************************************************************************************************************************************************/
/***************************************************Style for WhyArt page***************************************************************************************************/
.WhyArt { z-index: 1; position: absolute;  top: 200px; color: navy; font-size: 20px; font-family: 'Sofia'; margin-left: 50px; max-width: 800px; min-width: 800px; }
.WhyArt p { font-size: 25px; }

/************************************************* End of style for WhyArt page*********************************************************************************************/
/***************************************************************************************************************************************************************************/

/***************************************************************************************************************************************************************************/
/***************************************************Style for Sutra Story, Founders Story **********************************************************************************/
.SutraStory , .FoundersStory { z-index: 1; color: navy; font-size: 20px; font-family: 'Sofia'; margin-left: 50px; max-width: 1300px; min-width: 1300px; position: absolute;}
.FoundersStory #Part3 { margin-left: 50px;} 

/************************************************* End of style for Sutra Story, Founders Story*****************************************************************************/
/***************************************************************************************************************************************************************************/

/***************************************************************************************************************************************************************************/
/***************************************************Style for Logo Story ***************************************************************************************************/
.LogoStory { z-index: 1; color: navy; font-size: 20px; font-family: 'Sofia'; margin-left: 100px; max-width: 700px; min-width: 700px; position: absolute; top: 300px; }	   

/************************************************* End of style for Logo Story**********************************************************************************************/
/***************************************************************************************************************************************************************************/

/***************************************************************************************************************************************************************************/
/***************************************************Style for Quote ********************************************************************************************************/
.Quote { position: absolute; color: navy; font-family: 'Sofia';	 font-size: 22px; border-width: 2px; border-style: dotted; border-color: green white orange white;
         left: 700px; top: 600px; border-left: none; border-right: none; padding: 5px; max-width: 400px; min-width: 400px; }
.Quote #Part2 {float: right;}

/************************************************* End of style for Quote***************************************************************************************************/
/***************************************************************************************************************************************************************************/

/***************************************************************************************************************************************************************************/
/***************************************************Style for Contact US page **********************************************************************************************/
.Contact { z-index: 1; color: navy; font-size: 20px; font-family: Cutive;  margin-left: 100px; }  

/************************************************* End of style for contactus page******************************************************************************************/
/***************************************************************************************************************************************************************************/

/***************************************************************************************************************************************************************************/
/***************************************************Style for phone on Contact US page *************************************************************************************/
.Phone {width: 50px; height:50px; border-radius: 50%; text-align: center; line-height: 54px; font-size: 30px; color: white; position: absolute;
        animation-name: PhoneAnimation; animation-duration: 10s; animation-iteration-count: infinite;  animation-direction: alternate;  }
/* Phone animation - contact us page **************Not used*************************/
@keyframes PhoneAnimation1 { 0%  {background-color: green; left: 255px; top:-150px;}
	                     50% {background-color: blue; left:720px; top:-150x;}
                            100% {background-color: orange; left:1105px; top:-150px;}
                           }
/* Phone animation - contact us page ***********************************************/
@keyframes PhoneAnimation { 0%  {background-color: green; left: 20px; top: 145px;}
                            25% {background-color: blue; left: 20px; top: 250px;}
	                    50% {background-color: orange; left: 20px; top: 312px;}
			    75% {background-color: green; left: 20px; top: 500px;}
                            100%{background-color: blue; left: 20px; top:770px;}
                          }
/************************************************* End of style for phone on Contact US page********************************************************************************/
/***************************************************************************************************************************************************************************/

/***************************************************************************************************************************************************************************/
/***************************************************Style for Instructors Page *********************************************************************************************/
.MainPhoto .Photo{z-index: 1; margin-left: 250px; max-width: 500px; min-width: 300px; position: absolute; top: 250px; border-radius: 10px; padding:10px;border-radius: 10px;
		  background: linear-gradient(5deg, Black, Snow, Black); background-size: 400% 400%;
                 -webkit-animation: AnimationBar 2.5s ease infinite;
                 -moz-animation: AnimationBar 2.5s ease infinite;
                  animation: AnimationBar 2.5s ease infinite; }
ul.enlarge{ list-style-type:none; }/* Style for thumb nails */
ul.enlarge li{ display:inline-block; position: relative; float: left; z-index: 1; margin: 10px; top: 430px; }
ul.enlarge span{ position:absolute;  left: -9999px;  }
ul.enlarge img{ background-color: Grey; padding: 6px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; 
                background: linear-gradient(5deg, Black, Snow, Black); background-size: 400% 400%;
                -webkit-animation: AnimationBar 2.5s ease infinite;
                -moz-animation: AnimationBar 2.5s ease infinite;
                animation: AnimationBar 2.5s ease infinite;}/* Style thumbnails frame */
ul.enlarge li:hover{ z-index: 50; cursor:pointer; }/* Enable popups on mouse hover */
ul.enlarge li:hover span{ top: -450px; left: -20px; }/* Bring the popups */
ul.enlarge span{ padding: 8px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
                background: linear-gradient(5deg, Black, Snow, Black); background-size: 400% 400%;
                -webkit-animation: AnimationBar 2.5s ease infinite;
                -moz-animation: AnimationBar 2.5s ease infinite;
                animation: AnimationBar 2.5s ease infinite;  }/* Style the <span> containing the framed image */
.Instructor { z-index: 1; color: navy;  font-size: 20px; font-family: 'Sofia'; margin-left: 800px; max-width: 500px; min-width: 500px;
              position: absolute; top: 250px;  }/* Style for Instructor description */
/************************************************* End of style for Instructor page ****************************************************************************************/
/***************************************************************************************************************************************************************************/

/***************************************************************************************************************************************************************************/
/***************************************************Style for photo page****************************************************************************************************/
.AllPhotos  { margin-left: 350px; top: 250px; max-width: 600px; max-height: 450px;  position: absolute;	}/* Set container size */
.AllPhotos  img,video { margin-left: 100px; max-width: 600px; max-height: 500px; position: absolute; padding: 8px;
                -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
                background: linear-gradient(5deg, Black, Snow, Black); background-size: 400% 400%;
                -webkit-animation: AnimationBar 2.5s ease infinite;
                -moz-animation: AnimationBar 2.5s ease infinite;
                animation: AnimationBar 2.5s ease infinite; }/* Set photo size and border */
.Btn1 { position: absolute; left: 70px;	top:230px;  }/* Position 'Next' button */
.Btn2 { position: absolute; left: 720px; top:230px; }/* Position 'Prev' button */
.AllPhotos p {margin-left: -100px; font-family: 'Sofia'; font-size: 25px; color: navy; position: absolute; top: 150px; }
/************************************************* End of style for photo page *********************************************************************************************/
/***************************************************************************************************************************************************************************/

/***************************************************************************************************************************************************************************/
/***************************************************Style for video page****************************************************************************************************/
.Video { z-index: 1; margin-left: 100px; }
.Video iframe { width: 280px; height: 250px; }
/************************************************* End of style for video page *********************************************************************************************/
/***************************************************************************************************************************************************************************/

/***************************************************************************************************************************************************************************/
/***************************************************Style for Schedule table************************************************************************************************/
table {position: absolute; top: 250px; left: 300px; }
table caption { font-size: 30px; }
table, th, td { padding: 10px; font-size: 20px;	color: navy; text-align: center; border: 1px solid navy; border-collapse: collapse; }
table tr:first-child{ background:LightSkyBlue; }
table .firstRow{ background:DarkSeaGreen; }
table .secRow{ background: Thistle; }
table .thirdRow{ background:Lavender; }
table .fourthRow{ background:LightGreen; }
/************************************************* End of style for table **************************************************************************************************/
/***************************************************************************************************************************************************************************/

/***************************************************************************************************************************************************************************/
/***************************************************Style for Footer bar****************************************************************************************************/
#Footer { min-width:1485px; max-width: 1485px; height: 40px; position: absolute; top: 820px; border-radius: 10px;
          background: linear-gradient(5deg, DarkBlue, green, LightGreen); background-size: 400% 400%;
         -webkit-animation: AnimationBar 30s ease infinite;
         -moz-animation: AnimationBar 30s ease infinite;
          animation: AnimationBar 30s ease infinite; }
/************************************************* End of style for Footer bar *********************************************************************************************/
/***************************************************************************************************************************************************************************/

/***************************************************************************************************************************************************************************/
/***************************************************Style for copyright writing*********************************************************************************************/
#Footer p { color: white; font-size: 20px; line-height: 15px; text-align: center;  }

/************************************************* End of style for copyright writing **************************************************************************************/
/***************************************************************************************************************************************************************************/

/***************************************************************************************************************************************************************************/
/***************************************************Style for hamburger sign for menu***************************************************************************************/
.Navigation label {margin-left: 20px; color:green; display: none; }	  

/************************************************* End of style for hamburger sign for menu ********************************************************************************/
/***************************************************************************************************************************************************************************/

/*******************************************************************************************************************************************************************/
/*************************************************************************Style for smaller screens*****************************************************************/
/*******************************************************************************************************************************************************************/
@media only screen and (max-width:1050px)
{ 
    #Main{ max-width: 1000px; min-width: 1000px; }/* Reduce main size */
    .FormMain {	min-width: 930px;  max-width: 930px;}/* Redulce FormMain size */
    .FormMain p {margin-left: 25%;}/* Adjust layout */
    .StudentInfo {min-height: 385px; }
    .CourseInfo {left: 575px; }
    .OtherInfo { left: 575px; top: 270px;}
    .Submit { left: 575px; top: 375px; }
    #msg-box {width: 85%;  max-width: 455px;}
    .form-box label { font-size: 15px;}
    .inp1, .inp2, .inp3 { font-size: 15px; min-height: 30px;}
    .Navigation label {	display: block;	cursor: pointer;}/* Change menu to vertical display */
    .Menu {	display: none;	}
    #show-menu:checked + .Menu { display: block;}
    .Navigation {z-index: 100;}
    .Navigation ul li {	float: none; width: 40%; max-height: 40px; font-size: 20px;}
    .Navigation ul li:hover ul li {display: block; position: relative; left: 100%; top: -40px; font-size: 20px; }
    .Quote { font-size: 18px; left: 40%; top: 600px; }/* Adjust Contact Us page */
    .BGImage, #Footer { min-width:1005px; max-width: 1005px; }/* Adjust footer bar, Homepage image width */
    .SutraStory, .FoundersStory {min-width: 900px; max-width: 900px; font-size: 18px;}/* Adjust description for SutraStory, FoundersStory*/
    .FoundersImg { margin-left: 200px; top: 170px;}
    .FoundersStory #Part3, .FoundersStory #Part2 {margin-left: 10px; font-size: 15px;}
    .MainPhoto .Photo{margin-left: 50px; top: 175px; max-width: 300px; min-width: 300px; }/* Adjust Instructors page */
    ul.enlarge  {max-width: 600px; min-width: 600px; top: 250px; margin-left: 10px;}
    ul.enlarge li {top: 250px;}
    .Instructor {margin-left: 450px; top: 175px; max-width: 450px; min-width: 450px; font-size: 17px;}
    .Video iframe {width: 250px;; height: 150px;}/* Adjust video size */
    table { left:50px;  }/* Adjust schedule table size */
    .AllPhotos { margin-left: 50px; }/* Adjust photo position */
    .AllPhotos p {margin-left: -10px;}
}
/*******************************************************************************************************************************************************************/
@media only screen and (max-width:920px)
{   
    #Main{ max-width: 875px; min-width: 875px;}/* Reduce main size */
    .FormMain {	min-width: 800px; max-width: 800px; }/* Reduce FormMain size */
    .FormMain p {margin-left: 20%;}	/* Adjust layout */ 
    .StudentInfo {min-height: 385px; }
    .CourseInfo {left: 495px; }	
    .OtherInfo { left: 495px; top: 280px;}
    .Submit { left: 495px; top: 375px; }
     #msg-box {width: 80%; font-size: 13px;}
    .form-box label { font-size: 13px;}
    .inp1, .inp2, .inp3 { font-size: 12px; }
    .inp1 { width: 88%; }
    .inp2 { width: 188%; }
    .BGImage, #Footer { min-width:875px; max-width: 875px; }/* Adjust footer bar, Homepage image width */
    .SutraStory, .FoundersStory {min-width: 800px; max-width: 800px; font-size: 16px;}/* Adjust description for SutraStory, FoundersStory */
    ul.enlarge  {max-width: 500px; min-width: 500px; top: 250px; }/* Adjust Instructors page */	
    ul.enlarge li {top: 250px;}
    .Instructor {margin-left: 400px; top: 175px; max-width: 450px; min-width: 450px; font-size: 15px;}
    .Video iframe {width: 150px;; height: 150px;}/* Adjust video size */
    table { top: 150px;  }/* Adjust schedule table size */
}
/*******************************************************************************************************************************************************************/
@media only screen and (max-width:750px)
{   
    #Main{ max-width: 700px; min-width: 700px; }/* Reduce main size */
    .FormMain {	min-width: 650px; max-width: 650px;}/* Reduce FormMain size */
    .FormMain p {margin-left: 15%;}	/* Adjust layout */ 
    .StudentInfo {min-height: 385px; }
    .CourseInfo {left: 400px; }
    .CourseInfo Fieldset {font-size: 15px;}
    .OtherInfo { left: 400px; top: 270px;}
    .Submit { left: 400px; }
    .form-box label { font-size: 13px;}
    .inp1, .inp2, .inp3 { font-size: 10px; }
    .inp1 { width: 85%; }
    .inp2 { width: 185%; }
    .BGImage, #Footer { min-width:700px; max-width: 700px; }/* Adjust footer bar, Homepage image width */
    .SutraStory, .LogoStory, .FoundersStory {min-width: 600px; max-width: 600px; font-size: 15px;}/* Adjust description for SutraStory, LogoStory,  FoundersStory */
    .FoundersStory {top: 150px; }
    .FoundersImg { margin-left: 80px;}
    ul.enlarge span img {width: 300px; top: 250px; }/* Adjust Instructors page */
    .Instructor {margin-left: 400px; top: 175px; max-width: 300px; min-width: 300px; font-size: 13px;}
    table { max-width: 200px;  top: 200px; }/* Adjust schedule table size */
    table, th, td { font-size: 10px; }
    .AllPhotos  img,video { margin-left: 5px;  }/* Adjust photo position */
    .AllPhotos p {top: 380px;}
    .Btn1 { left: -5px; }
    .Btn2 { left: 620px; }
}
/*******************************************************************************************************************************************************************/
@media only screen and (max-width:468px)
{ 
    #Main{ max-width: 400px; min-width: 400px;}	/* Reduce main size */
    #LogoBlock #Part1 {top: -20px;font-size: 15px; margin-right: 5px; }/* Adjust Institute name and TM symbol */
    #LogoBlock sup { top: -120px; }
    #Header { top: -46px;} /* Adjust Header bar */
    .FormMain {	min-width: 350px; max-width: 350px; min-height: 560px; top: 210px;}/* Reduce FormMain size *****/
    .FormMain p {font-size: 15px; text-shadow: none;}/* Adjust layout */
    .StudentInfo {width: 95%; margin: 5px; top: 20px; min-height: 345px; border-radius: 5px; }
    .CourseInfo {left: 0px; top: 370px;  width: 45%; max-height: 155px;	 min-height: 155px; border-radius: 5px;	}
    .CourseInfo Input[type=checkbox] {width: 10px; }
    .CourseInfo Fieldset {font-size: 15px; padding: 5px;  margin: 5px; min-height: 125px;}
    .OtherInfo { left: 170px; top: 370px; width: 45%;}
    .Submit { left: 170px;top: 460px; width: 45%;}
    #msg-box {width: 70%;}
    .sub-btn {width: 85%;}
    .form-box label { font-size: 13px;}
    .inp1, .inp2, .inp3 { font-size: 10px; padding: 0px;}
    .inp1, .inp3 { width: 83%; }
    .inp2 { width: 180%; }
    .Quote { font-size: 15px; left: 100px; top: 660px; padding: 0px; max-width: 300px; min-width: 300px;}/* Adjust Contact Us page */
    .BGImage, #Footer { min-width:400px; max-width: 400px;}/* Adjust footer bar, Homepage image width */
    .Home,  .WhyArt, .LogoStory { font-size: 15px; margin-left: 30px;  max-width: 325px; min-width: 325px;}/* Adjust stylefor Homepage, LogoStory and WhyArt description */
    .SutraStory, .FoundersStory {min-width: 350px; max-width: 350px; font-size: 12px; margin-left: 30px; top: 210px;}/* Adjust description for SutraStory, FoundersStory*/
    .FoundersStory {top: 170px;}
    .FoundersStory #Part3, .FoundersStory #Part2 {margin-left: 10px; font-size: 10px;}
    .FoundersImg { margin-left: 20px; width: 370px; height: 450px; top: 250px;}
    .Contact { font-size: 15px; } /* Adjust contact us page */
    .MainPhoto .Photo{display: none; }/* Adjust Instructors page */
    ul.enlarge  {max-width: 300px; min-width: 300px; top: 80px; }
    ul.enlarge li {top: 80px;}
    ul.enlarge span img {width: 200px; height: 200px; top: 250px; }
    ul.enlarge li:hover span{ top: -300px; left: -20px; }
    .Instructor {margin-left: 5px; top: 200px; max-width: 400px; min-width: 400px; font-size: 10px;}
    .Video iframe {width: 100px;; height: 100px;}/* Adjust video size */
    .AllPhotos  img,video { margin-left: 5px; max-width: 250px; }/* Adjust photo position */
    .AllPhotos p {top: 350px;}
    .Btn1 { left: -10px; top: 50px;}
    .Btn2 { left: 260px; top: 50px;}       
    .Navigation ul li { min-width: 200px; max-width: 200px;} /* Adjust width of menu boxes */
     #FoundersImage { width: 370px; height: 450px;}
     #Footer p { font-size: 15px; }
}