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

}

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

}

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

}

/* new clearfix */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

.lighttext {
	color: #e1e1e1;
	font-size: 15pt;
	transition: all .25s;
	-webkit-transition: all .25s;
	-moz-transition: all .25s;
}

.lighttext:hover {
	color: #77b6cd;
	  text-decoration: none;
}

.carousel .container {
	z-index: 10;
	position: relative;
}

.headertext {
	font-size: 60pt;
	font-weight: light;
	text-align: center;
		transition: all 1s;
	-webkit-transition: all .5s;
}
.headertext:hover {
	opacity: 0;
	padding-top: 10px;
}

.headerbinary {
	font-size: 20pt;
	font-weight: light;
	text-align: center;
	transition: all 1s;
	-webkit-transition: all 1s;
}

    div#cs50text span#a {
        display: block;
        z-index: 5;
        opacity:1;
        background: none repeat scroll 0 0 #ffffff;
        width: 400px;
        margin: auto;
        padding: 30px;
        border-radius: 10px;
            transform: translateY(-70px);
    -webkit-transform: translateY(-70px);
        -webkit-transition: all ease out .5s;
    }
    div#cs50text:hover span#a {
        -webkit-transform-origin: right top;
        -webkit-transform: rotate(10deg) translateY(-130px);
    -webkit-box-shadow: 0px 10px 20px #717171;

    }
    div#cs50text span#b {
        color: #5b5b5b;
        z-index: 4;
        opacity: 1;       
                -webkit-transition: all 0s;
                display: block;
    }
    div#cs50text:hover span#b {
        opacity: 1;
    }


div#cs50text p {
    margin: 30px;
}

.subheader {
	padding-top: 0px;
	line-height: 20pt;
	text-align: center;
	font-size: 12pt;
	color: #b8b8b8;
    transform: translateY(-50);
    -webkit-transform: translateY(-50px);

}

.bottombar {
	background: #77b6cd;
	height: 400px;
	border: 0px;
}

.whitespace {
	height:40px;
}

h3 {
    color: #ffffff;
    font-size: 25pt;
    text-align: center;
    padding-top: 30px;
}

.bbimage {
    width:150px; 
    display:block; 
    margin:auto; 
    padding-top:120px
}

.bicon{
    transition: all .25s;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -o-transition: all .25s;
}

.bicon:hover {
        opacity: .8;
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
        -moz-transform: translateY(8px);
        -o-transform: translateY(8px);
}

.social {
    display: block;
    text-align: center;
    font-size: 20pt;
    color: #e1e1e1;
    margin: auto;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
}

.social:hover{
    color: #77b6cd;
}

.bottombar {
    text-align: center;
}
.bottombar ul li {
    display:inline-block;
    margin: 2em;
    position: relative;
}
.lsocial {
    color: #ffffff;
    font-size: 20pt;
    text-align: center;
    transition: all .25s;
    -webkit-transition: all .25s;
    -moz-transition: all .25s;
    -o-transition: all .25s;
}

.lsocial:hover {
    color: #000000;
}
.subnav {
    text-align: center;
    display: table;
    width: 60%;
    margin: auto;
        text-align: center;

}
#syllabus, #course, #resources  {
    display: table-cell;
        color: #797979;
    font-size: 18pt;
    height: 40px;
            transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
}
.subsubnav {
    text-align: center;
}
#syllabus:hover, #course:hover, #resources:hover {
    color: #77b6cd;
    cursor: pointer;
}
.subsubnav ul li {
    margin: 3em;
    text-align: center;
    display: inline;
    position: relative;
            color: #bdbdbd;
    font-size: 16pt;
            transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
}

.subsubnav ul li:hover{
    color: #77b6cd;
}

.subsubnav2 {
    text-align: center;
}
.subsubnav2 ul li {
    margin: 3em;
    text-align: center;
    display: inline;
    position: relative;
            color: #bdbdbd;
    font-size: 16pt;
            transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
}

.subsubnav2 ul li:hover{
    color: #77b6cd;
}

.hidden {
    display: none;
}

.heroimg {
    width: 100%;
}

.heroimg h1 {
    font-size: 50pt;
    background: #77b6cd;
        width: 330px;
        margin: auto;
        padding: 20px;
        border-radius: 10px;
        text-align: center;
        color: #ffffff;
        z-index: 20;
        display: block;
        font-weight: normal;
                    transform: translateY(-280px);
    -webkit-transform: translateY(-280px);
                transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
}

.heroimg h1:hover {
    background-color: #6ca7bd;
}

.sectionheader {
margin: auto;
    width: 900px;
    position: absolute;
    text-align: center;
                        transform: translateY(-60px);
    -webkit-transform: translateY(-60px);
}

.sectionheader h1 {
    color: #656565;
    font-size: 25pt;
    font-weight: normal;
}

.hometext {
    text-align: center;
}

.hometext h1 {
        color: #797979;
    font-weight: normal;
    font-size: 16pt;
    line-height: 20pt;
}

.hometext h2 {
    color: #bcbcbc;
    font-weight: normal;
    font-size: 6pt;
}

.sectionitems {
    width: 850px;
    margin: auto;
    padding-top: 20px;


}
.sectionitems ul {
    display: inline;
    position: relative;
    list-style: none;
}
.left-nav-items {
    font-weight: normal;
    width: 250px;
    border-right: 1px solid #d2d2d2;
    float: left;

}
.left-nav-items ul {
           list-style: none;
               font-size: 14pt;
}

.left-nav-items ul li {
    line-height: 20pt;
}

.left-nav-items .active-items {
    color: #bdbdbd;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
}

.left-nav-items .active-items:hover {
    color: #77b6cd;
}

.left-nav-items .inactive-items {
    color: #dbdbdb;
}

.right-nav-items {
    float: left;
    padding-left: 100px;
}

.hiddennav {
    display: none;
}

.right-items {
        line-height: 20pt;
        font-size: 14pt;
}
.week0 {
    padding-right: 100px;
    
    border-right: 1px solid #d2d2d2;
}
.notes {
    color: #bdbdbd;
                    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
}
.notes:hover {
    color: #77b6cd;

}

.weeknotes {
    float: left;
    margin-left:100px;
    list-style: none;
            font-size: 14pt;
        line-height: 20pt;
    position:relative;
    bottom:360px;

}

.weeknotes ul li{
    list-style: none;
    line-height: 20pt;
}
.weeknotes ul li a{
text-decoration: none;
    color: #bdbdbd;
                        transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
}

.weeknotes ul li a:hover {
    color:#77b6cd;
}


.lightc {
        color: #bdbdbd;
}


.fri {
    color: #bdbdbd;
                        transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
}

.fri:hover{
        color: #77b6cd;
}

.backgroundimagefull {
    width: 100%;
    height: 600px;
}
.bigheader {
    text-align: center;
}


.headercentered {
  display: table-row;
  width: 100%;
  height: 100%;
 }

.headercentered h1 {
    display: table-cell;
    color: #ffffff;
    font-size: 125px;
    font-weight: normal;
    vertical-align: middle;
    text-align: center;
}

.floatingmenu {
    display: table-row;
    text-align: center;
    width: 100%;
}

.fmelements {
    text-align: center;
    display: table;
    width: 50%;
    margin: auto;
    color: #ffffff;
}


.fmelements h2 {
display: table-cell;
    margin: 0px;
    text-align: center;
    transition: all .25s;
    padding-top: 0px;
    font-weight: normal;
    font-size: 16pt;
}

.headercontainer {
    width: 100%;
    height: 100%;
    display: table;
    rowspan: 0;
}
.containerwidth {
    height: 60%;
    width: 100%;
    display: table;
    padding-top: 200px;
}

#barformatting h1 {
    text-align: center;
    font-size: 60pt;
    font-weight: normal;

}

#barformatting h2 {
    text-align: center;
    font-size: 15pt;
    color: #a1a1a1;
    font-weight: normal;
}

.darrow {
            opacity: .6;
    margin-top: 0px;
    width: 50px;
    height: 50px;
    background-color:rgba(115,182,203,0);
        transition: all .25s ease;

}
.darrow h1 {
    color: #ffffff;
    font-weight: normal;
    text-align: center;
    padding: 0;

}

.darrow:hover {
    opacity: 1;
    background-color:rgba(115,182,203,.5)
}

#csphotos, #csvideo, #csfair {
    transition: all .25s;
}

#csphotos:hover, #csvideo:hover, #csfair:hover{
    opacity: .7;
        cursor: pointer;
        text-decoration: none;

}

.downarrow2 {
    position: relative;

    width: 64px;
    height: 50px;
    text-align: center;
    bottom: 10px;
    z-index: 500;
    margin-left: 49%;
    text-decoration: none;
    transition: all .1s ease;

}

.darrow2 {
    background-color:rgba(115,182,203,1);
               opacity: 1;
}
.darrow2 h1 {
    color: #ffffff;
    font-weight: normal;
    text-align: center;
    padding: 0;

}

.downarrow2:hover{
    bottom: 8px
}

#bar2 {
    width: 100%;
}
#barleft {
    display: table;
    width: 90%;
    height: 100%;
    padding-top: 5px;
    margin: auto;
}

#qlogo {
    display: table-cell;
}

#qdata {
    display: table-cell;
}

#qdata h1 {
    font-size: 20pt;
    color: #656565;
}

#qquotes {
    display: table-cell;
}

.qgraphclass {
    margin: 30px;
    width: 40px;
    padding: 30px;
}
.qgraphclass h1 {
    font-size: 10pt;
    color: #c9c9c9;
    font-weight: normal;
    line-height: 14pt;

}

.qgraphclass h2 {
    color: #b4b4b4;
    font-size: 11pt;
    font-weight: normal;
    line-height: 13pt;
}

.qgraphclass h3 {
    color: #9d9d9d;
    font-size: 11pt;
    font-weight: bold;
    line-height: 13pt;
    padding-top: 0px;
    text-align: left;
}

#lembed h1 {
    font-size: 20pt;
    color: #656565;
}

#ldescription h1 {
    font-size: 20pt;
    color: #656565;
}

#ldescription h2 {
    font-size: 14pt;
    color: #b4b4b4;
    text-align: center;
}

.problemsetstable h3 {
    font-weight: normal;
    font-size: 14pt;
    color: rgb(236, 236, 236);
    padding-top: 0;
}

.problemsetstable a {
        text-decoration: none;
}
.problemsetstable a h4 {
    font-weight: normal;
    font-size: 14pt;
    color: #c9c9c9;
    padding-top: 0;
    transition: all .25s ease;
    text-align: center;

}

.problemsetstable a h4:hover {
    color: #77b6cd;
}

.quizzestable h3 {
    font-weight: normal;
    font-size: 14pt;
    color: rgb(236, 236, 236);
    padding-top: 0;
    text-align: center;
            line-height: 14pt;
}

.quizzestable a {
        text-decoration: none;
        line-height: 14pt;
}
.quizzestable a h4 {
    font-weight: normal;
    font-size: 14pt;
    color: #c9c9c9;
    padding-top: 0;
    transition: all .25s ease;
    text-align: center;
            line-height: 14pt;

}

.quizzestable a h4:hover {
    color: #77b6cd;
}

#bar6 h1 {
    font-size: 80pt;
    color: #ffffff;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
}

#bar7 h1 {
    padding-top: 50px;
    text-align: center;
    font-size: 12pt;
    color: rgb(236, 236, 236);
    font-weight: regular;
    line-height: 12pt;
}

#bar7 h2 {
    font-size: 10pt;
    text-align: center;
    color: #e1e1e1;
    font-weight: regular;
    line-height: 12pt;
}

#bottomsocial a {
    display: table-cell;
}

#bottomsocial a h3 {
    color: #656565;
    font-weight: normal;
    font-size: 20pt;
    text-decoration: none;
}

#bottomsocial a h3:hover {
    color: #77b6cd;
    text-decoration: none;
}

#menubarsocial {
    color: #e1e1e1;
    font-size: 15pt;

}