@import url(https://fonts.googleapis.com/css?family=Arvo:700|PT+Sans);

/* Eric Meyer CSS Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* CSS reset ends*/

/* IE styling fix for main tag */
main{ display: block; }

body {
   font-family: pt sans, arial, helvetica;
    font-size: 16px;
    line-height: 1.3888;
    font-weight: 400;
    color: #231F20;
    padding: 10px;
    background: #dddddd url(../images/symphony.png);
}

#wrapper{
    max-width: 960px;
    margin: 0 auto;
    border: none;
}

h1 {
   font-family: arvo, helvetica, arial;
   font-size: 375%;
}

h2 {
   font-family: arvo, helvetica, arial;
   font-size: 246%;
}

h3 {
   font-family: arvo, helvetica, arial;
   font-size: 225%;
   color: #B4C1D2;
}

h5 {
   font-family: arvo, helvetica, arial;
   font-size: 175%;
   color: #231F20;
}

h6 {
   font-family: arvo, helvetica, arial;
   font-size: 100%;
   color: #231F20;
}

a {
 color: #234B74;
 text-decoration: none;
 font-weight: 700;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}

nav  {
    background-color: #234B74;
    width: 100%;
/*    position: relative;*/
    padding: 0px 0px 0px 0px;
}

nav ul {
  list-style: none;
  margin-left: 10px;
  padding: 0;
}

nav ul li {
    float: left;
    text-align: center;
}

/* Clear float and extends the blue underneath the links. This is also a good setup for embedded ul to come for the assignments */
nav ul::after {
    content:''; 
    display: block; 
    clear: both;
}

nav ul li a {
    font-family: pt sans, arial, helvetica;
    display: inline-block;
    background-color: #234B74;
    color: #fff;
    padding: 10px 17px;
    text-decoration: none;
    width: auto;
}

nav ul li a:hover {
        background-color: #F9ED32;
        color: #02172E;
}

#intro {
    height: 600px;
/*    display: block;*/
    background: black url(../images/grandmother.jpg) no-repeat center center; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  color:#FFF;
  clear: both;
    
}

#intro h1 {
    font-family: Arvo, helvetica, arial;
    font-size: 375%;
    line-height: 1.15;
    width: 450px;
    border-bottom: 2px solid yellow;
    padding-bottom: 20px;

    
}

#intro h4{
    font-family: pt sans, arial, helvetica;
    font-size: 225%;
    line-height: 1.15;
}

#intro-text {
    position: relative;
    top: 18.84%;
    left: 9.375%;
}

/* Clear float and extends the blue underneath the links. This is also a good setup for embedded ul to come for the further links for Cheri *
#intro::after {
    content:''; 
    display: block; 
    clear: both;
} */

/*  Welcome Section */

#welcome {
    height: 500px;
    background: url(../images/library.jpg);  
    background-repeat: no-repeat;
    background-size:cover;
}

#welcome h2 {
    display: block;
    padding-left:9.375%;
    padding-top:5%
}

/* #flexie {
    height: 325px;
    width: auto;
    clear: both;
} */

#facillitators {
    font-weight: 400;
    height: 500px;
    background-color:#234B74;
    color: white;
}

#facillitators h2 {
    display: block;
    padding-left:9.375%;
    padding-top: 7%;
}

#facillitators h5 {
   font-family: arvo, helvetica, arial;
   font-size: 95%;
   text-align: center;
   color: #fff;
}

#facillitators h6 {
    font-family: pt sans, arial, helvetica;
    font-size: 80%;
    line-height: 1.3888;
    font-weight: 400;
    text-align: center;
    color: #fff;
    padding-top: 10px;
}


#facillitators a {
    color: #F9ED32;
    text-decoration: none;
}

.speaker {
    width: 14.5%;
    float: left;
    margin-left: 2.083333%;
    margin-top: 2%;
}

#coming-is-easy {
    height: 500px;
    background:#B4C1D2 url(../images/aeroplane-wing-light.jpg);  
    background-repeat: no-repeat;
    background-size:cover;

}

#coming-is-easy h2 {
    display: block;
    padding-left:9.375%;
    padding-top:5%
}

#coming-is-easy ul li {
    list-style-type: disc;
}

.col-1par-left {
    float: left;
    width: 31.25%;
    margin-left: 9.37%;
    margin-top: 2%;
}

.col-2par-left {
    float: left;
    width: 380px;
    margin-left: 9.37%;
    margin-top: 2%;
}

.col-2par-right {
    float: right;
    width: 380px;
    margin-right: 9.37%;
    margin-top: 2%;
}

.clear {
    clear:both;
}

footer {
    font-weight: 400;
    height: 120px;
    background-color:#234B74;
    color: white;
}

footer #col-2par-left {
    float: left;
    width: 380px;
    margin-left: 9.37%;
    margin-top: 2%;
}
    
footer #col-2par-right {
    float: right;
    width: 380px;
    margin-right: 9.37%;
    margin-top: 2%;
}

.h2-bar {
    width: 100%;
    height: 80px;
    background: #234B74;
    color: #B4C1D2;
}

.h2-bar h2 {
    margin-left: 9.37%;
    line-height: 80px;
}



/*  These rules are for the Speakers page  */
.speaker-odd {
    background-color: #D2DAE4 ;
    padding:2% 9.37%;
    clear: both;
}

.speaker-odd img {
    margin:0 10px 15px 0 ;
    float:left;
    margin-right: 25px
}


.speaker-even {
    background-color: #234B74 ;
    color: white;
    padding:2.5% 9.37%;
    clear: both;
}

.speaker-even img {
    margin:0 10px 15px 0 ;
    float:left;
    margin-right: 25px
}

.speaker-even h5 {
    color: white
}


/*  These rules are for the seminar Page */
.seminar-container {
    background: white;
    padding: 20px 20px;
    margin-bottom: 20px;
}

.seminar-container-1st {
    background: white;
    padding: 20px 20px 20px 20px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.seminar-container img {
    padding: 0 0 50px 0 ;
}

.back-to-top {
    text-align: right; 
}

/*  These rules are for the Agenda Page */
.agenda-container-left {
    width: 43.5%;
    background: white;
    padding: 20px 20px;
    margin-bottom: 20px;
    float: left;
}

.agenda-container-right {
    width: 43.5%;
    background: white;
    padding: 20px 20px;
    margin-bottom: 20px;
    float: right;
}

.agenda-container-left-1st {
    width: 43.5%;
    background: white;
    padding: 20px 20px 20px 20px;
    margin-bottom: 20px;
    margin-top: 20px;
    float: left;
}

.agenda-container-right-rev {
    width: 43.5%;
    background: #728BA8;
    color: white;
    padding: 20px 20px 20px 20px;
    margin-bottom: 20px;
    float: right;
}

.agenda-container-right-rev2 {
    width: 43.5%;
    background: #728BA8;
    color: white;
    padding: 20px 20px 20px 20px;
    margin-bottom: 20px;
    margin-top: 20px;
    float: right;
}

.agenda-container-right-1st {
    width: 43.5%;
    background: white;
    padding: 20px 20px 20px 20px;
    margin-bottom: 20px;
    margin-top: 20px;
    float: right;
}

.agenda-container-left img {
    padding: 0 0 60px 0 ;
}

.agenda-container-right img {
    padding: 0 0 60px 0 ;
}

.agenda-container-left-1st img {
    padding: 0 0 60px 0 ;
}

.agenda-container-right-1st img {
    padding: 0 0 60px 0 ;
}

.agenda-odd {
    background-color: #728BA8;
    padding:2% 9.37%;
}

.agenda-container-bottom {
    background: white;
    padding: 20px 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.back-to-top {
    text-align: right; 
}

/* This section is controlling the registration page  */

.reg-container-left-1st {
    width: 43.5%;
    background: white;
    padding: 20px 20px 20px 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    float: left;
}

.reg-container-left-1st img {
    width: auto;
    padding: 20px 20px 27px 20px; 

}

.reg-container-left-1st h6 {
    text-align: center;
    padding-bottom: 10px;

}

/* styling for the placeholder text in the form (text that appears in the fields to give viewers an idea of what needs to be typed in the field. You need all 4 of these rules to cover the full range of browsers that support html5 placeholders. */

::-webkit-input-placeholder { 
    color: #234B74;
}

:-moz-placeholder { /* Firefox18- */
    color: #234B74;
}

::-moz-placeholder { /* Firefox19+ */
    color: #234B74;
}

::-ms-input-placeholder { 
    color: #234B74;
}

/* makes one of the buttons "submit" go right */
input[type="submit"]{
    float: right;
}

/* Submit and reset buttons on the form */
input[type="submit"]{
    background: #234B74;
    color: white;
    border: none;
    padding: 4px 20px;
    margin-top: 24px;
    cursor: pointer; /* restores the hand cursor on the button beause moving buttons around can screw up on some browsers */
}

form fieldset li {
   padding-bottom: 24px; 
}

/* makes link color reversed */
footer a {
 color: white;
 text-decoration: none;
 font-weight: 700;
}



/* mobile layout */
@media screen and (max-width: 320px) {
    
body {
   font-family: pt sans, arial, helvetica;
   font-size: 16px;
   line-height: 1.3888;
   font-weight: 400;
   color: #231F20;
   padding: 0;
   background: #dddddd url(../images/symphony.png);
}    

h2 {
   font-family: arvo, helvetica, arial;
    font-size: 150%;
}
    
.h2-bar h2 {
    line-height: 80px;
}
    
    
nav  {
    background-color: #234B74;
    width: 100%;
    padding: 0px 0px 0px 0px;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav ul li {
    float: none;
    text-align: center;
    border: 1px solid white;
    border-collapse: collapse;
}

    
/* Intro Section */
    
#intro {
  height: auto;
  background: black; 
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  color:#FFF;
}
    
nav ul li a {
    font-family: pt sans, arial, helvetica;
    display: block;
    background-color: #234B74;
    color: #fff;
    padding: 10px 17px;
    text-decoration: none;
    width: auto;
}

nav ul li a:hover {
        background-color: #F9ED32;
        color: #02172E;
}
    
#intro h1 {
    font-family: Arvo, helvetica, arial;
    font-size: 300%;
    line-height: 1.15;
    text-align: center;
    padding-top: 4%;
    
}

#intro h4 {
    font-family: pt sans, arial, helvetica;
    font-size: 180%;
    line-height: 1.15;
    text-align: center;
    padding-bottom: 4%;
}
    
#intro-text {
    position: relative;
    top: 0%;
    left: 0%; 
}
    
/* Welcome Section */
    
#welcome {
    height: auto;
    background: #B4C1D2;  
    background-repeat: no-repeat;
    background-size:cover;
    padding: 0 10px;
    clear: both;
}
    
.col-1par-left {
    display: block;
    width: auto;
    margin: 3%;
}

.col-2par-left {
    display: block;
    width: auto;
    margin: 3%;

}

.col-2par-right {
    display: block;
    width: auto;
    margin: 3%;
}
    
#facillitators {
    height: auto;
    clear: both;
    padding: 0 10px;
}
    
#facillitators h2 {
    padding-left:4%;
}

#facillitators h5 {
   text-align: left;
   padding-top: 4%;

}

#facillitators h6 {
    text-align: left;
    padding-top: none;
}

#facillitators img {
     align: left;   
    }

/*.speaker-odd {
    width: 100%;
    float: none;
    display: block;
    margin: 0 auto; 
    padding:2% 2%;
} */
    
.speaker {
    height: auto;
    width: auto;
    display: block;
    margin: 2%;
    text-align: left;
}
    
.speaker-odd img {
   padding-top: 10px;
    }
    
.speaker-even img {
   padding-top: 10px;     
    }

      
/*  Coming is Easy  */

    
#coming-is-easy {
    /* height: auto;
    width: 100%;
    display: block;
    clear: both;*/
    
    min-height: 820px; /*fix height*/
    background: #B4C1D2;  
    padding: 0 10px;
    display: block;
    clear: both;
}
    
#coming-is-easy h2 {
    display: block;
    padding-left:2%;
    padding-top:2%;
}
   
/* Affecting the page with agenda */
    
.agenda-container-left {
    width: 90%;
    float: none;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}

.agenda-container-right {
    width: 90%;
    float: none;
    display: block;
}

.agenda-container-left-1st {
    width: 90%;
    float: none;
    display: block;
}

.agenda-container-right-rev {
    width: 90%;
    float: none;
    display: block;
}

.agenda-container-right-rev2 {
    width: 90%;
    float: none;
    display: block;
}

.agenda-container-right-1st {
    width: 90%;
    float: none;
    display: block;
}

.agenda-container-left img {
    padding: 0 0 60px 0 ;
}

.agenda-container-right img {
    padding: 0 0 60px 0 ;
}

.agenda-container-left-1st img {
    padding: 0 0 60px 0 ;
}

.agenda-container-right-1st img {
    padding: 0 0 60px 0 ;
}

.agenda-odd {
    background-color: #728BA8;
    padding:2% 2%;
}

.agenda-container-bottom {
    /* width: 90%;
    float: none;
    display: block; */
    
    width: 90%;
    float: none;
    display: block;
    margin: 0 auto;

}
    
footer {
    min-height: 260px;
    width: auto;
    clear: both;
    /* padding-top: 5%; */
    padding: 10px 10px 0px 10px;
    clear: both;
        
}
    
footer #col-2par-left {
    display: block;
    width: auto;
    float: none;
    margin: 5% 5% 0 5%;
}
    
footer #col-2par-right {
    display: block;
    width: auto;
    float:none;
    margin: 5% 5%;
}
    
/* Registration Page */

.reg-container-left-1st {
    width: 100%;
    float: none;
    padding: 0px 0px 0px 0px;
    display: block;
}

/*.reg-container-left-1st img {
     width: auto;
    padding: 2%; 

}*/

.reg-container-left-1st h6 {
    text-align: left;
    margin: 0 0 0 20px;
    padding-bottom: 15px;
    display: block;
    clear: both;

} 

.reg-container-left-1st img {
    width: 270px;
    height: 356px;
    height: auto;
    display: block;
    margin: 0 auto;
    
}
    
    
}