@font-face {
    font-family: 'odudabold';
    src: url('../fonts/oduda-bold-webfont.eot');
    src: url('../fonts/oduda-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/oduda-bold-webfont.woff2') format('woff2'),
         url('../fonts/oduda-bold-webfont.woff') format('woff'),
         url('../fonts/oduda-bold-webfont.ttf') format('truetype'),
         url('../fonts/oduda-bold-webfont.svg#odudabold') format('svg');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'genomethin';
    src: url('../fonts/genome-thin-webfont.eot');
    src: url('../fonts/genome-thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/genome-thin-webfont.woff2') format('woff2'),
         url('../fonts/genome-thin-webfont.woff') format('woff'),
         url('../fonts/genome-thin-webfont.ttf') format('truetype'),
         url('../fonts/genome-thin-webfont.svg#genomethin') format('svg');
    font-weight: normal;
    font-style: normal;
}

*{box-sizing: border-box; margin: 0;}

html{background: url(../images/vector-bamboo-bg.png); 

}

body{font-size: 100%; 
    font-family: 'genomethin', helvetica, arial, sans-serif; 
    width: 90%; 
    margin: 0 auto; 
    padding: 1em 0 0 0;
    background: url(../images/body-bg.jpg) repeat;
    background-color: #ffd37c; 
}

.container {margin: 5em auto 0 auto; padding-bottom: 5em; position: relative; width: 100%; max-width: 1000px;}

#about, #program, #registration{margin: 5em auto;}


/*  type  */

h1, h2, h3, h4, h5, h6, li {font-family: 'odudabold', helvetica, arial, sans-serif;}

p{padding-bottom: 1em;}

p, h2 {font-family: 'genomethin', helvetica, arial, sans-serif; font-weight: bold; line-height: 1.25em;}

h1 {font-size: 4rem; margin: 0 auto .25em auto; color: #e75225;}


/* #ffd37c yellow  */

h2, h3 {line-height: 1.25em;}

h2{font-size: 1.25rem;}

h3 {margin-top: .5em}

a{text-decoration: none;}



/* programs */

#programs{ clear: both; padding-top: 4em;}

#programs h2{ padding-bottom: 1em;}



/*  registration  */

#registration {padding-top: 4em; clear: both;}

.left, .right{width: 50%;}

.left, .right {float: left;}

form{width: 80%; margin: 0 auto;}

fieldset {border: none; text-align: right;}

fieldset p{font-size: 1rem; font-weight: bold; margin-top: .5em;}

fieldset ul{list-style-type: none;}

label, ol li, li{
    font-family: 'genomethin', helvetica, arial, sans-serif;
    font-size: 1rem; 
    list-style-type: none;}

label{ 
    font-family: 'genomethin', helvetica, arial, sans-serif;
    text-align: right; 
    margin-right: 1em;}

input {margin: .25em;}

ol li{display: inline; font-weight: bold;}

.block p{display: inline; text-align: right;}

ol{display: inline; padding-left: 1em; text-align: right;}

input[type=submit] {
    border-radius: 1em;
    border: none;
	background: #e75225;
	padding: .5em 1em;
	color: white;
	}






/* media queries */

/* // Small screens */
@media only screen {

nav li a{color: #e75225;}

nav li a:hover{color: white;}
    
nav {position: fixed; top: 0; width: 90%; margin: 0 auto; z-index: 10; background-color: #403f18; opacity: 0.9;}

nav ul {display: inline-block;}
    
nav li {display: inline-block; padding: .25em; font-size: 1rem; font-weight: bold; font-family: 'odudabold', helvetica, arial, sans-serif;}

#about, #programs, #registration{margin: .5em;}    
    
/*    welcome    */

.panda-header{max-width: 100%; margin-right: 5em;}

.welcome-padding{padding-top: 0em;}

.welcome-padding h2{margin-right: 0em; padding-bottom: 1em;}
    
/* programs */
    
figure img{max-width: 100%; padding-bottom: 1em;}
    
figcaption{font-weight: bold;}

/* programs modal */

#overlay {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

#modal {
    position:absolute;
    background:url(tint20.png) 0 0 repeat;
    background:rgba(0,0,0,0.2);
    border-radius:14px;
    padding:8px;
    max-width: 100%;
    max-height: 75%;
    overflow-y: scroll;
}

#content {
    border-radius:8px;
    background:#fff;
    padding:20px;
}

#close {
    position:absolute;
    background:url(../images/close.png) 0 0 no-repeat;
    width:24px;
    height:27px;
    display:block;
    text-indent:-9999px;
    top:-7px;
    right:-7px;
}


 /* registration */
    
#registration {padding-top: 4em; margin: .5em;}

#registration h1{font-size: 3em;}    
.left, .right{ width: 100%;}

form{width: 100%; margin: 1em 0;}
    
fieldset{ text-align: right;}
    
label{margin: .5=25em 0;}

input{margin: .125 0;}

    
/* contact */    

#contact{ clear: both; padding-top: 2em; margin-top: 0em;}

.contact-info{
    width: 100%; float: none; display: block; margin: 0 .5em;
}

.contact-info p{font-size: 1rem; padding-left: .25em;}

.contact-info h3{padding-left: .25em; font-family: 'genomethin'; font-size: 1rem;}

#contact img{width: 100%; display: block; padding-right: 2em;}    
    
}









/* // Medium screens */
@media only screen and (min-width: 40em) {
    
/*  nav  */

nav {position: fixed; top: 0; width: 90%; margin: 0 auto; z-index: 10;}

nav ul {display: block; float: right; padding-right: .5em;}

nav li {padding: .5em; font-size: 1.5rem; font-weight: bold; font-family: 'odudabold', helvetica, arial, sans-serif;}


/*    welcome    */

.panda-header{float: left; width: 30%; margin-right: 5em;}

.welcome-padding{padding-top: 7em;}

.welcome-padding h2{margin-right: 2em; padding-bottom: 1em;}

/* programs */
    
figure{width: 33.3333333%; margin: 0 auto; float: left; text-align: center;}

figure img{max-width: 80%;}

/* programs modal */

#overlay {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

#modal {
    position:absolute;
    background:url(tint20.png) 0 0 repeat;
    background:rgba(0,0,0,0.2);
    border-radius:14px;
    padding:8px;
    max-width: 50%;
    overflow: none;
}

#content {
    border-radius:8px;
    background:#fff;
    padding:20px;
}

#close {
    position:absolute;
    background:url(../images/close.png) 0 0 no-repeat;
    width:24px;
    height:27px;
    display:block;
    text-indent:-9999px;
    top:-7px;
    right:-7px;
}


/* registration */
    
#registration {padding: 0em; margin: .5em;}

.left, .right{ width: 50%;}

form{width: 100%;}
    
fieldset{ text-align: right;}
    
label{margin-right: 0em;}

input{margin: 0em;}

     
    

/*  contact  */

#contact{ clear: both; padding: 5em auto; margin-top: 30em;}

.contact-info{
    width: 50%; float: right; display: block; margin: 0 auto;
}

.contact-info p{font-size: 1rem; padding-left: 2em;}

.contact-info h3{padding-left: 2em; font-family: 'genomethin'; font-size: 1rem;}

#contact img{width: 50%; display: block; padding-right: 2em;}
    
}


/* // Large screens */
@media only screen and (min-width: 48em) {
 /* min-width 850px, large screens */
}