/* CSS for jQuery list slide outs
-----------------------------------------------*/
#illandalbumflip, #webandpostflip, #drawandpaintflip, #photogflip, #motionflip, #writingflip, #webflip, #webmotionflip, #printflip, #illflip, #imgflip, #interflip, #expflip, #paintflip, #drawflip, #vidflip, #integflip, #surveyflip, #new1flip, #new2flip, #new3flip{
    width: 92%;
    padding: 5px;
    text-align: left;
    background-color: #fff;
    border: none 1px #c3c3c3;
}


#illandalbumflip:hover,
#webandpostflip:hover, #drawandpaintflip:hover, #photogflip:hover, #motionflip:hover,
#writingflip:hover, #webflip:hover, #webmotionflip:hover, #printflip:hover, #illflip:hover, #imgflip:hover, #interflip:hover, #expflip:hover, #paintflip:hover, #drawflip:hover, #vidflip:hover, #integflip:hover, #surveyflip:hover, #new1flip:hover, #new2flip:hover, #new3flip:hover{
    background-color: #E0F0FF;
    cursor:context-menu;
    width: 92%;
}

#illandalbumpanel, #webandpostpanel, #drawandpaintpanel, #photogpanel, #motionpanel, #writingpanel, #webpanel, #webmotionpanel, #printpanel, #illpanel , #imgpanel, #interpanel, #exppanel, #paintpanel, #drawpanel, #vidpanel, #integpanel, #surveypanel, #new1panel, #new2panel, #new3panel{
    width: 90%;
    padding-left: 10px;
    margin-top: 10px;
    margin-bottom: 2px;
    margin-left: 2px;
    /*background-color: #e5eecc;*/
    border-left: solid 2px #3974a5;
    display: none;
    /*none, make them start closed*/
}


/* Architecture
–––––––––––––––––––––––––––––––––––––––––––––– */
body{
    margin-bottom: 35px;
}
.topbar{
    display: block;
    padding: .2em 0 0 1em;
    width:100%;
    background-color:#3974a5; /*  1c385f;  a1c6d1;*/
}
a.backToTop{
  display:none; 
    }
p{
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
}

p.bold{
        font-weight: 600;
    clear:left;
    /*padding-top: 1em;*/
}

span.italic{ 
    font-style: italic;
}

p.ital{
     font-style:italic; 
}

p.bluePleaseSmaller{
    text-decoration: none;
    margin-top: 2.2em;
    margin-left: 0;
    margin-bottom: 0;
    padding-left: .2em;
    font-size: 1.2em;
    letter-spacing: .06em;
    background-color: #E0F0FF;
    
}

p.subjectFoldOut{
    font-size: 1em;
    line-height: 1.5em;
}
p.currentTeach{
text-decoration:underline;
    margin-bottom: 0;
        margin-left: 10px;
}

h1{
    color: white;
    font-size: 1.5em;
    padding: .8;
}

h1 a{
    /* link inside my h1 - Ira Epstein */
    font-size: 1em;
        padding: .8;
    } 

h2{
    color: #3974a5;
    font-size: 2.3em;
    margin: 1em 0 0 0;
    font-family: 'Titillium Web', sans-serif;
    line-height: 1em;
}

h3{
    color: #3974a5;
    /*color: #3974a5;*/
    font-family: 'Titillium Web', sans-serif;
    /*font-weight: 200;*/
    {font-size: 2.7em;}
    clear: left;
    margin-top: 1.2em;
    margin-bottom: .6em;
    margin-left: -1em;
    font-weight: 400;
    line-height: 1.2em;
    /*text-align: justify;*/
}
h3.please{
    color: #3974a5;
    background-color: #E0F0FF;
    letter-spacing:.01em;
}

h5{
    color: #3974a5;
    font-size: 1.8em;
    /*color: #3974a5;*/
    font-family: 'Titillium Web', sans-serif;
    clear: left;
    /*margin-top: 1.2em;*/
    margin-bottom: .6em;
    margin-left: 0;
    /*margin-left: -1em;*/
    font-weight: 400;
    line-height: 1.2em;
    /*text-align: justify;*/
}

h3.sidebarHead{
    margin-top: 0;
    margin-left: 0; 
    font-size: 1.2em;
    color:white;
}
p.sidebarPara{
    line-height: 1.3em;
}

.firstTextAfter{
    padding-top: 0;
    margin-top:.5em;
    clear:left;
}
a.headerLink{
        font-family: 'Titillium Web', sans-serif;
        font-size: 1em;
        font-style: normal;
        color: #a1c6d1;
}
a.blackLink{
    display: none;
    }

header{
        width:100%;
        position: fixed;
        top:0;
        z-index: 1;
    /*visibility:collapse;*/
    }

.linkyBG{
     background-color:#edf3eb; 
    min-height: 1.5em;
    font-weight: 800;
        letter-spacing: .05em;
}
.linkyCellBG{
     background-color:#a1c6d1; 
    min-height: .1em;
}
.littleLinkyBG{
     background-color:#3974a5; 
}
.littleLinkyCellBG{
     background-color:#a1c6d1; 
        min-height: .1em;
}
.linky{
     background-color: #0FA0CE;
     border-style: groove;
     border-width: 5px;
}

.littleLinky{
    display: none;
}
.currentMainNav{
    display: block;
    padding: .5em 0 .5em .5em;
    font-size: 1em;
    background-color: #3974a5; 
    /*border-style: ridge;
    border-width: 2px;
    border-color: white;*/
}
.currentLittleNav{
    display: block;
    padding: .5em 0 .2em 2em;
    /*max-height: 140px;*/
    font-size: 1em;
    font-color: #a1c6d1;
    font-weight: 600;
}
.sublink{
    color: #3974a5;
    font-weight:800;
    letter-spacing: .05em;
    }
.container{
    padding-top: 3.5em;
    }
.mainIraPhoto{
    display:block;
    float:none;
    position:relative;
    top:50px;
    margin: auto;
    margin-bottom: 2em;
    width: 60%; /*was 65*/
    padding: 0;
    /*padding-bottom: 3em;*/
}
video {
    max-width: 100%;
    height: auto;
    padding-bottom: 0;
    margin-bottom: 0;
}

/*** STUDENT PAGE ***/

.hidden{
    display:none;
}
/*.banner-iframeHeight{
    height:100;
    width:auto;
}*/
.studentheader{
    clear:left;
    border-bottom:solid 1px;
}
.studentExtraHeadspace{
margin-top: 2   em;
}
.studentbold{
    font-weight: 600;  
    text-transform: uppercase;
}
.studentthumb{
    float:none;
    position: relative;
    max-width: 100%; 
    height:auto;
    /* margin bottom set to 0 for large screens in Query */
    margin: .2em 1.25em 2em 2em;
}
.studentborder{
    /* turns on w Media Query */
    border-right: 0;
    padding-right: 1.5em;
    position: relative;
}
.studentborder-right{
    border: none;
    padding-right: 0;
}
.studentmininav{
    background-color: #afcece;
    letter-spacing: .15em;
    text-align: center;
    font-size: 1.1em;
}



figcaption{
 padding:0 .5em 0 .5em;  
 line-height: 20px;
}


   /*iframe for fancybox with canvas/animation or HTML in it*/
   /*also blocks conflict with navigation in the portfolio items*/



.fancybox-type-iframe .fancybox-nav {
    width: 60px;       
}

.fancybox-type-iframe .fancybox-nav span {
    visibility: visible;
    opacity: 0.5;
}

.fancybox-type-iframe .fancybox-nav:hover span {
    opacity: 1;
}

.fancybox-type-iframe .fancybox-next {
    right: -60px;
}

.fancybox-type-iframe .fancybox-prev {
    left: -60px;
}

/*** END STUDENT***/

/*** IMAGE HOVERS ***/
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
  position: relative;
}

.middle {
  transition: .3s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.studentthumb:hover .image {
  opacity: 0.5;
}

.studentthumb:hover .middle {
  opacity: 1;
}

.text {
  background-color: #a1c6d1;
  color: #ffffff;
  font-size: 1.2em;
  text-align: center;
  padding: 1em 2em;
}
/*** END IMAGE HOVERS ***/


.hideoutBigNav{
    display:none;
    }
 .hideoutCellNav{
    display:block;
    /*visibility:collapse;*/
    }
a{
    font-size: .8em;
    margin:auto;
    }
   
a.lesson{
    width: 75%;
    padding: 5px;
    text-align: left;
    background-color: #fff;
    border: none 1px #c3c3c3;
    text-decoration: none;
    color: black;
    }
a.lesson:hover{
    text-decoration: none;
    background-color: #E0F0FF;
    color: black;
    }
a.headerLink:hover{
    /*text-shadow: 1px 1px 4px #999999;*/
    text-decoration: underline;
    }
a.sublink:hover{
        color:#a1c6d1;
    }
.studentheadline{
    width:30%;
    float: left;
    margin-bottom: .5em; 
}

.studentMessage {
    display: none;
    background-color: #3974a5;
    color: white;
    float:left;
    width:45%;
    padding: 1em 3% 3% 3%;
    margin-top: 3em;
    margin-bottom: 5%;
    margin-left: 1em;
    font-family: 'Raleway', sans-serif;
    font-weight: 600;
    font-size: 2em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.5em;
    /*border-style: groove;
    border-width: .5em;  */ 
}
.sidebar {
    background-color: #3974a5;
    color: white;
    display: block;
    width:90%;
    padding: 3%;
    margin-bottom: 5%;
    line-height: 5em;
    /*border-style: groove;
    border-width: .5em;  */ 
}
#dave-quote{
    display:none;
}

h4{
    font-size:1em;
    color: white;
    }
/*.padMain{
 padding: 1.5em;   
}*/

.mainIraTxt{
    display: block;
    padding-top: 1em;
    padding-right: 8%;
    padding-left: 13%;
    
    /*--padding-left: 1%;*/
    }

.shadow-spread{
    -webkit-box-shadow: 6px 6px 12px 2px #999; /*for old browsers*/
    box-shadow: 6px 6px 12px 2px #999;
    }

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.quoteSidebar{
 clear:both; 
margin-top: 0;
}
}
/*  color: #3974a5; */
.sidebarNofloat{
    background-color: #a1c6d1;    
    color: white;
    display: block;
    /*clear:right;*/
    /*float:left;*/
    width:40%;
    padding: 3%;
    margin-right: 5%;
    margin-top: 5%;
    margin-bottom: 5%;
    line-height: 5em;
    /*border-style: groove;
    border-width: .5em;  */ 
}

.lessbold {
    font-weight: 400;
}

.classNames {
    font-family: 'Titillium Web', sans-serif;
    font-weight: 600;
    margin-top: -.5;
}


/**** QUERY- larger than mobile ****/
@media (min-width: 850px) {  
    #dave-quote{
    display:block;
}  
.studentMessage{
    display:block;
}
.studentheadline{
    margin-bottom: 0; 
}
.studentborder{
    border-right: solid 2px #3974a5;
}
.studentthumb{
    /* margin bottom setting to 0 for large screens */
    margin-bottom: 0;
    clear:right;
    float:right;
}
    header{
        width:100%;
        position:static; /*set back to default--static */
        top:0;
        z-index: 0;
    }
    .fancy-div{
     margin-bottom: 2.5em;   
    }
    .topbar{
    padding: 1em 0 0 1em;
    }
    h1{
    font-size: 2.2em;
    }
    h2{
    font-size: 4.1em;
    }
    .hideoutCellNav{
    display:none;
    /*visibility:collapse;*/
    }
    .hideoutBigNav{
    display:block;
    /*visibility:collapse;*/
    }
.littleLinky{
    display: block;
    padding: .5em;
    /*max-height: 140px;*/
    min-height: 2.5em;
    font-size: 1.2em;
    background-color:white;
}
    .linky{
    display: block;
    padding: .5em;
    border-style: none;
    /*max-height: 140px;*/
    min-height: .5em;
    font-size: 1em;
    background-color:#a1c6d1;
    }  
    a.blackLink{
    display: block;
    font-style: italic;
    color: black;
    text-decoration: underline;
}
    .container{
    padding-top: 0;
    }

    .mainIraPhoto{
    display: block;
    width: 48%;
    float:left;
    padding: 0; /*padding would offset dropshadow*/
    margin: 0 4.2em 4em 3em;
    overflow:hidden;
    }
    .firstTextAfter{
    padding-top: 1em;
}
    .hideout{
    display:block;
    /*visibility:collapse;*/
    }
    a.backToTop {
    display: block;
    /*margin-left: 1.5em;*/
    font-weight: 600;
    font-style: italic;
    color: #3974a5;
    text-decoration: underline;
    }
    .sidebar {
    clear:right;
    float:right;
    width:26%;
    margin-left: 3em;
    /*border-style: groove;
    border-width: .5em;  */ 
    }
    h3.sidebarHead{
    font-size: 2.2em;
    }

    /* Q: CSS for jQuery lists/Big (sharing a 2 col layout)
    -------------------------------------------*/
    #illandalbumflip, #webandpostflip, #drawandpaintflip, #photogflip, #motionflip, #writingflip, #webflip, #webmotionflip, #printflip, #illflip, #imgflip, #interflip, #expflip, #paintflip, #drawflip, #vidflip, #integflip, #surveyflip, #new1flip, #new2flip, #new3flip{
        width: 55%;
    }
    #illandalbumflip:hover,
    #webandpostflip:hover, #drawandpaintflip:hover, #photogflip:hover, #motionflip:hover,
    #writingflip:hover, #webflip:hover, #webmotionflip:hover, #printflip:hover, #illflip:hover, #imgflip:hover, #interflip:hover, #expflip:hover, #paintflip:hover, #drawflip:hover, #vidflip:hover, #integflip:hover, #surveyflip:hover, #new1flip:hover, #new2flip:hover, #new3flip:hover{
        width: 55%;   
        }

    #illandalbumpanel, #webandpostpanel, #drawandpaintpanel, #photogpanel, #motionpanel, #writingpanel, #webpanel, #webmotionpanel, #printpanel, #illpanel , #imgpanel, #interpanel, #exppanel, #paintpanel, #drawpanel, #vidpanel, #integpanel, #surveypanel, #new1panel, #new2panel, #new3panel{
        width: 95%;
    }
}
/* end--LARGER THAN MOBILE*/