/* INITIALIZE */
html, body, div, header, footer, section, h1, h2, h3, h4, h5, h6, p, ul, ol, li { margin: 0; padding: 0; border: 0; outline: none; font-weight: normal; font-weight: 300; }

ul, ol { list-style: none; }

.clear { clear: both; }

strong { font-weight: 800; }

a { text-decoration: none; outline: none; transition: color 0.5s, border 0.5s; }

/* FONTS */
@font-face { font-family: 'icomoon'; src: url("fonts/icomoon.eot?pk2r24"); src: url("fonts/icomoon.eot?#iefixpk2r24") format("embedded-opentype"), url("fonts/icomoon.woff?pk2r24") format("woff"), url("fonts/icomoon.ttf?pk2r24") format("truetype"), url("fonts/icomoon.svg?pk2r24#icomoon") format("svg"); font-weight: normal; font-style: normal; }
body, input, select { font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #222222; }

.icon, footer h2:after, footer .socialLinks li:after, #nav_handle:after { font-family: 'icomoon'; line-height: 1; }

.afterClear:after, .factoids:after { content: " "; height: 0; display: block; clear: both; }

#feedback { color: #FFFFFF; background-color: rgba(185, 16, 37, 0.8); font-size: 11px; padding: 5px; position: fixed; bottom: 10px; right: 10px; z-index: 100000; display: none; }

/* SIDEBAR */
#sidebar { width: 320px; height: 100vh; background-color: #222222; float: left; position: fixed; top: 0px; left: 0px; transition: left 1s; }

header { padding: 40px; color: #FFFFFF; }
header h1 { height: 20px; background-image: url("../images/logo.svg"); background-repeat: no-repeat; background-position: left center; background-size: 150px 24px; text-indent: -999999px; }
header h2 { text-transform: uppercase; font-size: 0.750em; line-height: 1em; padding-top: 8px; }

nav h3, nav li { font-size: 0.938em; }
nav h3 { text-transform: uppercase; color: #FFFFFF; padding-left: 40px; font-weight: 800; line-height: 30px; height: 30px; transition: color 0.5s; }
nav a { display: block; padding-left: 40px; color: #FFFFFF; }
nav ul { margin-bottom: 2em; }
nav li { height: 30px; line-height: 30px; border-left-color: #FFFFFF; }
nav li.active, nav li:hover { border-left-width: 5px; border-left-style: solid; }
nav li.active a, nav li:hover a { padding-left: 35px; }
nav .academics.active h3, nav .academics a:hover, nav .academics li.active a { color: #ef4056; }
nav .academics li { border-left-color: #ef4056; }
nav .nyc.active h3, nav .nyc a:hover, nav .nyc li.active a { color: #ffdd00; }
nav .nyc li { border-left-color: #ffdd00; }
nav .women.active h3, nav .women a:hover, nav .women li.active a { color: #00b2b0; }
nav .women li { border-left-color: #00b2b0; }

footer { width: 320px; background-color: #343434; position: fixed; bottom: 0px; left: 0px; color: #FFFFFF; z-index: 1000; }
footer * { font-weight: 400; }
footer a { color: #FFFFFF; transition: border-bottom 0.5s; }
footer a:hover { color: #BBBBBB; border-bottom: 1px solid #BBBBBB; }
footer h2 { padding: 20px 40px; font-size: 0.750em; text-transform: uppercase; }
footer h2 a { border-bottom: 1px solid #FFFFFF; }
footer h2:after { content: "|"; font-size: 18px; display: inline-block; position: relative; top: 3px; margin-left: 6px; }
footer #social { padding: 0 20px 20px 40px; display: none; }
footer .socialLinks h3, footer .socialLinks ul, footer .socialLinks li { display: inline-block; }
footer .socialLinks h3 { font-size: 0.750em; line-height: 1em; position: relative; top: -4px; }
footer .socialLinks li { width: 20px; height: 20px; margin-left: 10px; position: relative; background-color: #FFFFFF; transition: background-color 0.5s; }
footer .socialLinks li:hover { background-color: rgba(255, 255, 255, 0.5); }
footer .socialLinks li a { display: block; width: 100%; height: 100%; text-indent: -999999px; position: absolute; }
footer .socialLinks li:after { font-size: 20px; line-height: 20px; text-align: center; color: #222222; content: "f"; }
footer .socialLinks li.facebook:after { content: "f"; }
footer .socialLinks li.twitter:after { content: "t"; }
footer .socialLinks li.youtube:after { content: "y"; }
footer .socialLinks li.barnard:after { content: "B"; }
footer .address { padding-top: 20px; font-size: 0.750em; line-height: 1.667em; }

#contentWrapper { margin-left: 320px; transition: margin-left 1s; }
#contentWrapper section { width: 100%; overflow: hidden; }

.headerText, .bodyText, .factoids { position: relative; z-index: 50; }

.sectionHead { position: relative; width: 100%; background-repeat: no-repeat; background-position: top center; background-size: 100%; }
#areas .sectionHead { background-image: url("../images/AreasOfStudy.jpg"); }
#choices .sectionHead { background-image: url("../images/IMG_4017.jpg"); }
#columbia .sectionHead { background-image: url("../images/columbia-steps.jpg"); }
#living .sectionHead { background-image: url("../images/LivingInTheCity.jpg"); }
#neighborhood .sectionHead { background-image: url("../images/15021914483_5aa8fd422a_o.jpg"); }
#visit .sectionHead { background-image: url("../images/visit.jpg"); }
#network .sectionHead { background-image: url("../images/aBarnardNetwork.jpg"); }
#organizations .sectionHead { background-image: url("../images/student-organizations.jpg"); }
#diversity .sectionHead { background-image: url("../images/from-48-states.jpg"); }
.sectionHead img { display: block; position: absolute; min-width: 100%; height: auto; top: 0px; left: 0px; z-index: 0; }
.sectionHead .headerText { padding-top: 400px; text-align: center; color: #FFFFFF; }
.sectionHead .headerText .padding { padding-top: 200px; padding-bottom: 40px; background: transparent; background: -moz-linear-gradient(top, transparent 0%, black 100%); background: -webkit-linear-gradient(top, transparent 0%, black 100%); background: -o-linear-gradient(top, transparent 0%, black 100%); background: -ms-linear-gradient(top, transparent 0%, black 100%); background: linear-gradient(to bottom, transparent 0%, black 100%); }
.sectionHead p { font-size: 0.938em; text-transform: uppercase; }
.sectionHead h2 { font-size: 3.750em; border-bottom: 1px solid #ef4056; padding-bottom: 5px; display: inline-block; max-width: 90%; }
.sectionHead h2 strong { font-weight: 800; }
#subhead_academics .sectionHead h2 { border-bottom: 1px solid #ef4056; }
#subhead_nyc .sectionHead h2 { border-bottom: 1px solid #ffdd00; }
#subhead_women .sectionHead h2 { border-bottom: 1px solid #00b2b0; }

.bodyText { background-color: #000000; color: #FFFFFF; font-size: 1.125em; line-height: 1.667em; text-align: center; }
.bodyText p { width: 660px; margin: auto; padding: 80px 0; }
.bodyText strong { text-transform: uppercase; font-weight: 800; }

.factoids { background-color: #ef4056; padding: 40px 0; font-size: 1.250em; line-height: 1.500em; }
#subhead_academics .factoids { border-bottom: 1px solid #ef4056; }
#subhead_nyc .factoids { background-color: #ffdd00; }
#subhead_women .factoids { background-color: #00b2b0; }
.factoids a { color: #FFFFFF; font-weight: 800; border-bottom: 1px solid #FFFFFF; }
.factoids a:hover { color: #000000; border-bottom: 1px solid #000000; }
.factoids .columns { width: 1320px; margin: auto; }
.factoids .column { width: 33%; float: left; }
.factoids .column > div { display: table; width: 320px; height: 320px; margin: auto; border: 1px solid rgba(255, 255, 255, 0); border-radius: 160px; transition: border 0.5s; }
.factoids .column > div > div { display: table-row; }
.factoids .column > div > div > p { display: table-cell; text-align: center; vertical-align: middle; padding: 20px; }
.factoids .column:hover > div { border: 1px solid #FFFFFF; }

#thankYou { width: 100%; height: 100vh; background-color: rgba(0, 178, 176, 0.9); color: #FFFFFF; text-align: center; position: fixed; z-index: 999999; }
#thankYou .tyMessage { padding-top: 240px; width: 900px; margin: auto; }
@media screen and (max-width: 950px) { #thankYou .tyMessage { width: 88%; } }
@media screen and (max-width: 640px) { #thankYou .tyMessage { padding-top: 120px; }
  #thankYou .tyMessage h1, #thankYou .tyMessage h2 { padding: 0 20px; }
  #thankYou .tyMessage h1 { font-size: 1.875em; }
  #thankYou .tyMessage h2 { font-size: 1.250em; } }
#thankYou h1 { font-size: 4.375em; line-height: 1.143em; margin-bottom: 20px; }
#thankYou h2 { font-size: 2.500em; }

/* LAPTOPS */
@media screen and (max-width: 1640px) { .factoids .columns { width: 98%; } }
@media screen and (max-width: 1360px) { .sectionHead .headerText { padding-top: 160px; }
  #areas .sectionHead { background-image: url("../images/laptop/AreasOfStudy.jpg"); }
  #choices .sectionHead { background-image: url("../images/laptop/IMG_4017.jpg"); }
  #columbia .sectionHead { background-image: url("../images/laptop/columbia-steps.jpg"); }
  #living .sectionHead { background-image: url("../images/laptop/LivingInTheCity.jpg"); }
  #neighborhood .sectionHead { background-image: url("../images/laptop/15021914483_5aa8fd422a_o.jpg"); }
  #visit .sectionHead { background-image: url("../images/laptop/visit.jpg"); }
  #network .sectionHead { background-image: url("../images/laptop/aBarnardNetwork.jpg"); }
  #organizations .sectionHead { background-image: url("../images/laptop/student-organizations.jpg"); }
  #diversity .sectionHead { background-image: url("../images/laptop/from-48-states.jpg"); }
  .factoids { font-size: 1em; }
  .factoids .columns { width: 98%; }
  .factoids .column { width: 50%; }
  .factoids .column:last-child { width: 100%; float: none; clear: both; }
  .factoids .column > div { width: 220px; height: 220px; } }
@media screen and (max-width: 980px) { .sectionHead p { font-size: 0.625em; }
  .sectionHead h2 { font-size: 1.875em; }
  .bodyText p { width: 82%; } }
/* MOBILE */
#nav_handle { display: none; position: absolute; width: 40px; height: 40px; background-color: rgba(34, 34, 34, 0.8); top: 30px; right: -40px; z-index: 200; }
#nav_handle span { display: inline-block; text-indent: -999999px; position: absolute; }
#nav_handle:after { content: "-"; display: inline-block; position: relative; color: #FFFFFF; font-size: 40px; line-height: 40px; }
#sidebar.show #nav_handle { right: 0px; }
#sidebar.show #nav_handle:after { content: "x"; }

@media screen and (max-width: 750px) { #sidebar { width: 100%; left: -100%; z-index: 100; }
  #sidebar.show { left: 0; }
  #nav_handle { display: block; }
  footer { position: fixed; width: 100%; }
  #contentWrapper { margin-left: 0; position: relative; z-index: 0; }
  .sectionHead { background-attachment: initial; }
  .sectionHead .headerText { padding-top: 0; }
  .sectionHead .headerText .padding { padding-top: 175px; }
  .factoids .column { width: 100%; float: none; }
  .bodyText p { padding-top: 20px; } }
@media screen and (max-width: 480px) { .sectionHead .headerText .padding { padding-top: 110px; } }
@media screen and (max-height: 620px) { #sidebar.show { height: 100vh; overflow: scroll; }
  #sidebar.show nav { padding-bottom: 75px; }
  #contentWrapper.fixed { position: fixed; } }