html {
font-size:18px;
background-color:black;
color:#333;
margin:0;
}
/******* headings **********/
h1 {
font-size:3rem;
font-weight:600;
font-family: "proxima-nova", sans-serif;
line-height:1.5;
}
h2 {
font-size:1.5rem;
font-weight:400;
font-family: "proxima-nova", sans-serif;
line-height:1.5;
text-align: center;
text-transform: uppercase;
margin-bottom: 0;
margin-top:5rem;
color:#3e8ede;
}
h3 {
font-size:2.25rem;
font-weight:600;
font-family: "proxima-nova", sans-serif;
line-height:1.1;
text-transform: uppercase;
}
h4 {
font-size:1.5rem;
font-weight:600;
font-family: "proxima-nova", sans-serif;
line-height:1.5;
margin:1rem auto 1rem 0;
text-transform: uppercase;
}
h5 {
font-size:1.25rem;
font-weight:600;
font-family: "proxima-nova", sans-serif;
line-height:1.5;
margin:0.25rem 2.7rem -0.5rem;
}
h6 {
font-size:1rem;
font-weight:600;
font-family: "proxima-nova", sans-serif;
line-height:1rem;
margin:0 0 1rem;
color:#3172ae;
text-transform: capitalize;
}
.small {
font-size:0.7rem;
}
.subhead {
font-size:1.2rem;
font-weight:400;
font-family: "proxima-nova", sans-serif;
line-height:1.5;
text-align:center;
margin:0 auto 2rem auto;
text-transform: uppercase;
}
/********* other text styles *********/
p , ul {
font-size:1rem;
font-weight:400;
font-family: "proxima-nova", sans-serif;
line-height:1.7;
}
ul {
margin:0;
}
a {
color:#fff;
}
blockquote {
font-size:1.25rem;
font-weight:400;
font-family: "proxima-nova", sans-serif;
line-height:1.8;
padding:8% 8% 0 8%;
text-transform: uppercase;
margin:7.5rem auto;
width:40%;
background-color:#222;
color:white;
position: relative;
z-index: 1;
}
blockquote::before {
content:'\201C';
font-size:12rem;
opacity: 0.1;
position: absolute;
top:-4rem;
left:1.5rem;
font-weight: 800;
z-index: -1; /**** keep quote mark below quote ****/
}
blockquote::after {
content: '\201D';
font-size:12rem;
opacity: 0.1;
position: absolute;
bottom:-8.5rem;
right:1.5rem;
font-weight: 800;
z-index: -1; /**** keep quote mark below quote ****/
}
blockquote footer {
font-size:0.8rem;
margin:2rem 0 4rem 0;
float:right;
text-transform: none;
}
button {
font-family: "proxima-nova", sans-serif;
text-transform:uppercase;
font-weight:500;
}
button img {
display:block;
}
.light {
font-weight:300;
}
.normal {
font-weight: 400;
}
.semi {
font-weight:500;
}
.bold {
font-weight:600;
}
.italic {
font-style: italic;
}
.year {
position: absolute;
right:2rem;
top:0;
font-size:1.5rem;
color:#3e8ede;
font-family: "proxima-nova", sans-serif;
font-style: normal;
font-weight: 400;
}
/******* floats and sizes *******/
.left {
float:left;
}
.right {
float:right;
}
.clearfix {
overflow: auto;
}
.full {
width:100%;
}
.half {
width:50% !important;
}
.quarter {
width:25%;
}
.bottomMargin2rem {
margin-bottom: 2rem;
}
.topMargin8rem {
margin-top: 8rem;
}
/********* colors and backgrounds *********/
.blue1 {
color:#1fb4ff;
}
.blue2 {
color:#3172ae;
}
.blue3 {
color:#3e8ede;
}
.red1 {
color:#FF8F94;
}
.green1 {
color:#00EDFA;
}
.purple1 {
color:#D691FF;
}
.white {
color:white;
}
.blueBG {
background-color:#004365;
}
.blueBG2 {
background-color:#00517B;
}
.redBG {
background-color:#78262A;
}
.redBG2 {
background-color:#8c2f35;
}
.greenBG {
background-color:#00666B;
}
.greenBG2 {
background-color:#016e73;
}
.yellowBG {
background-color:#f1c400;
}
.yellowBG2 {
background-color:#f6c800;
}
.purpleBG {
background-color:#500778;
}
.orangeBG {
background-color:#C96F2A;
}
.orangeBG2 {
background-color:#C1492D;
}
.whiteBG {
background-color:white;
}
.quoteBG {
background-size: cover;
position:relative;
}
.quoteBG img{
margin:8rem auto;
max-width:532px;
}
#coverBG{
}
#coverBG h2 {
position:absolute;
top:0;
margin-top:1rem;
display: flex;
font-size:2rem;
justify-content: center;
width:100%;
color:#fff;
}
#letterBG {
background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
background-color:white;
}
.arrow img {
width:100%;
margin-bottom: 3rem;
}
#profiles h2{
display: block;
width:100%;
background-color: white;
}
#profiles .col a{
margin:2rem auto;
color:#3172ae;
font-weight:600;
font-family: "proxima-nova", sans-serif;
font-size:1.3rem;
line-height:1.7;
text-align: center;
border-radius: 0;
border:0;
display: inherit;
text-transform: uppercase;
}
#profiles #wrap {
background-color: white;
padding: 0 2.7rem 1.5rem;
}
#giving h2 {
background-color:transparent;
margin-bottom:0;
}
/********** articles ***********/
section {
width:100%;
display:flex;
flex-direction:column;
}
article {
overflow:auto;
order:2;
}
/* NOT USING BUTTONS TO DISPLAY ONE AT A TIME
article + article {
display:none
} */
.container {
width:100%;
max-width: 56.88rem;
margin:0 auto;
background-color: #eee;
background-image:url(http://image.e.tufts.edu/lib/fe9e13727664067f74/m/7/40538782-3256-4d38-8a30-41b6550dbca3.png);
display:grid;
}
.profileArticle {
width:85%;
padding:0 2rem;
margin:1rem auto 0;
position: relative;
background-color:white;
}
.profileArticle a{
color:#3172ae;
}
.profileArticle.right {
padding-left:2rem;
padding-right:0;
}
.profileArticle .copy {
padding:2.7rem;
display: table-cell;
}
.profileArticle.right .copy {
padding:2.7rem;
}
.profileArticle .imgContainer {
width:20%;
display: table-cell;
vertical-align: middle;
}
.dark {
}
.transparent {
}
.noBG {
}
#iframe-container {
background-color:#fff;
background-image: url(http://image.e.tufts.edu/lib/fe9e13727664067f74/m/7/56b3ab6f-ad01-4331-b2ce-3aa637c70d30.jpg);
background-size: cover;
position: relative;
display:flex;
align-items:center;
justify-content: center;
min-height:55rem;
}
#iframe-container #inner {
border: 0;
margin:0;
width: 50%;
display: block;
position: relative;
overflow-x: hidden;
}
#openBtn {
display: block;
width:100%;
background-color:#3e8ede;
padding:1rem;
margin:1rem auto 0;
color:#fff;
text-transform: uppercase;
font-size:1.33rem;
border:none;
}
#closeBtn {
position: absolute;
right:1rem;
top:6.5rem;
z-index: 4;
display: none;
text-transform: uppercase;
font-size:0.75rem;
border:none;
color:#999;
text-decoration: underline;
cursor:pointer;
}
#iframe-container #intro {
border: 0;
height: 100%;
margin:0;
width: 100%;
background-color:white;
padding:1.25rem 3rem 3rem;
display: inline-block;
box-sizing: border-box;
}
#iframe-container h3 {
font-size:3rem;
text-transform: uppercase;
color:white;
padding-bottom: 250px;
margin-bottom: -250px;
margin-left: 1rem;
line-height: 0.65;
font-weight: 600;
text-shadow: 0px 0px 14px rgba(0,0,0,0.3);
}
#iframe-container iframe {
border: 0;
height: 100%;
margin:0;
width: 100%;
background-color:white;
padding:0 3rem;
min-height:41rem;
display:none;
box-sizing: border-box;
}
select {
width:80%;
height:3rem;
margin:6rem auto 0;
font-size:1.5rem;
font-family: "proxima-nova", sans-serif;
color:#333;
border: 1px solid #999; /* font size fix for Safari */
}
.profileArticle .imgContainer img {
width:100%;
max-width:400px;
display: block;
margin: 0 ;
}
.profileArticle.right .imgContainer img {
width:100%;
max-width:400px;
display: block;
margin: 0;
}
.readMore {
width:100%;
background-color: transparent;
border:0;
border-bottom: 5px solid #3e8ede;
margin:0;
text-align: left;
position: absolute;
bottom: 0;
left:0;
outline:none;
}
.readMore span {
background-color: #3e8ede;
padding:0.5rem 2rem 0.25rem;
font-size:1rem;
color:#fff;
margin-left:1.7rem;
}
.readMore2 {
margin:2rem auto;
width:12rem;
display: block;
padding:0.5rem 2rem;
color:#fff;
font-weight:400;
font-family: "proxima-nova", sans-serif;
font-size:1rem;
line-height:1.7;
text-align: center;
border-radius: 0;
background-color:#333;
border:0;
outline:none;
}
.readMore2 span {
}
.RMright {
text-align: right;
right:0;
}
.RMright span{
margin-right:2.7rem;
}
.RMdark {
border-color:#333;
}
.RMdark span {
background-color:#333;
color:#fff;
}
.open::before {
content: "Read More";
}
.close::before {
content: "Close";
}
.expand {
width: 85%;
padding:1.5rem 2rem;
margin:0 auto;
display:none;
background-color:#3172ae;
color:#fff;
}
.expand2 {
width: 100%;
max-width: 54rem;
display:none;
box-sizing: border-box;
}
.expand2 p:first-of-type {
margin-top:0;
}
.expandR {
padding-left:4.6rem;
}
.expand p {
margin:1rem 0;
}
.sm {
height:100px;
width:100%;
position: absolute;
top:0;
left:0;
background-color:white;
z-index: 1;
}
.articleGridwrapper {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
grid-gap: 1.5%;
}
.sub-articleGridwrapper {
display: inline-grid;
grid-template-columns: 25% 75%;
grid-gap: 1rem;
margin:1rem 0 ;
}
.articleGridcol img{
width:100%;
}
/********** article buttons ***********/
.btnContainer {
text-align: center;
}
.sectionButton {
margin:2rem auto 0;
width:12rem;
padding:0.5rem 2rem;
color:#fff;
font-weight:400;
font-family: "proxima-nova", sans-serif;
font-size:1rem;
line-height:1.7;
text-align: center;
border-radius: 0;
background-color:#333;
border:0;
}
.previous{
margin-right:0.5rem;
}
/********** hero and navigation ***********/
.container#coverBG{
position: relative;
height:29.7rem; /* 535px */
display:table;
border-collapse:separate;
border-spacing: 0 5rem;
overflow:hidden; /* keep the pipe character from showing below the section */
}
.container#coverBG h1 {
bottom:0;
right:1rem;
position: absolute;
color:#fff;
line-height: 0.7;
margin:0;
text-shadow: 0 0 5rem rgba(0,0,0,0.75);
}
nav {
background-color:rgba(255,255,255,0.75);
padding:2rem;
/* display:table-cell; */
width:20%;
min-width:11rem;
}
nav a {
font-size:1rem;
font-weight:400;
font-family: "proxima-nova", sans-serif;
line-height:1.5;
display:inline-block;
margin-top:0.8rem;
color:#333;
}
nav a:last-of-type {
margin-bottom:2.5rem;
}
#archive {
margin:1rem auto 0;
}
/********** dean's letter ***********/
.container#letterBG p {
}
.container#letterBG h2 {
margin-top:0;
}
.container#letterBG .sig {
vertical-align: bottom;
}
.container#letterBG .sig p{
margin-top:8rem;
}
.container#letterBG #letterBox {
padding:3rem 10% 0;
}
.container#letterBG .sig img {
display: block;
margin:2rem 3rem;
}
#sigContainer {
overflow:auto;
}
/********** giving by the numbers ***********/
.container#giving {
background-color: transparent;
}
.infographicOuter {
height:16rem;
margin:2rem 0 0 0;
}
.infographicInner {
margin:4rem 0 0;
width:100%;
text-align: center;
/* background-image: linear-gradient(to bottom, transparent 42%, white 42%); */
}
.infographicInner img {
display: none;
}
.infographicInner img {
width:80%;
}
.infographicInner img:nth-child(n+2) {
width:auto;
}
#infographicLeft, #infographicRight {
position: absolute;
bottom:0;
margin:0 0 -2rem 0;
padding:0;
border:0;
z-index: 1;
}
#infographicLeft {
left:0;
}
#infographicRight {
right:0;
}
/********** donor wall ***********/
.container#donors {
}
.container#donors h4 {
font-size:1rem;
color:#3172ae;
text-align: left;
margin:3rem auto 1rem;
}
.container#donors li {
font-size:1rem;
color:#333;
font-weight: 500;
list-style-image: url(http://image.e.tufts.edu/lib/fe9e13727664067f74/m/6/561c7ce6-080d-4151-896e-b1cce2a37d52.svg);
padding-left:1rem;
}
.paragraph_indent {
margin-left:3.25rem;
margin-top:0.5rem;
}
.container#donors img {
margin:0 auto 2rem;
display: block;
width:100%;
}
.container#video {
padding-top: 390.844px; /*** set initial value ***/
padding-bottom:3rem;
}
.container#video h2 {
margin-top:6rem;
}
.container#video p {
margin:auto 3rem 1rem;
text-align: center;
}
.container#donors div {
padding:0 3rem;
margin:0 auto;
}
.articleGridwrapper2 {
display: inline-grid;
grid-template-columns: 50% 50%;
grid-gap: 1.5%;
}
/********** footer ***********/
.container#learnmore div {
padding:0 5% 1.25rem;
}
.footerImg {
width:16rem;
padding-top:0.8rem;
}
/**** footer text ****/
.container#learnmore p, .container#learnmore ul {
color:#888;
font-size:0.7rem;
}
.container#learnmore h4, .container#learnmore h2 {
color:#333;
}
.container#learnmore h4:last-of-type {
margin:3rem 0 2rem 0;
}
.container#learnmore h4 {
text-align: left;
font-weight:400;
}
/********** triptych ***********/
#profiles h4 {
}
#giving h4 {
margin-top:0;
margin-bottom:0.5rem;
font-weight:600;
}
.flex-grid {
display: flex;
position: relative;
padding:2rem;
}
.col {
flex: 1;
padding:0;
clear:both;
margin:0.5rem 0.26rem;
position: relative;
font-size:1rem;
font-weight:400;
font-family: "proxima-nova", sans-serif;
line-height:1.5;
background-color:white;
}
.col p {
padding:1rem 2rem;
position: relative;
z-index: 3;
}
.col h6 {
margin-top:-3rem;
padding:0 2rem 0 2rem;
line-height: 1.7;
}
.col img {
width:100%;
display:block;
margin:0;
}
.col::before {
position: absolute;
bottom: 0;
height: 100%;
width: 100%;
content: "";
/* background: linear-gradient(to bottom,
rgba(255,255,255, 0) 20%,
rgba(255,255,255, 1) 45% ); */
pointer-events: none; /* so the text is still selectable */
z-index: 1;
}
.col div{ /*** names ***/
margin:-3rem auto 1rem;
position: absolute;
top:0;
text-align: center;
width:100%;
font-size:1.3rem;
font-weight:600;
}
#tripytchLeft, #tripytchRight, #mobileTripytchLeft, #mobileTripytchRight {
position: absolute;
top:50%;
margin:-2.083rem 0.5rem 0;
padding:0;
border:0;
z-index: 4;
}
#tripytchLeft, #mobileTripytchLeft {
left:0;
}
#tripytchRight, #mobileTripytchRight {
right:0;
}
#tripytchLeft img, #mobileTripytchLeft img, #tripytchRight img, #mobileTripytchRight img {
display:block;
}
#mobileTripytchLeft, #mobileTripytchRight {
display:none;
}
.container#giving {
position: relative;
}
.col {
}
.hidden {
opacity: 0;
transition-timing-function: linear, step-end;
}
.longBottom {
margin-bottom:0;
}
#SM {
display: grid;
grid-template-columns: 40% 60%;
background-color:white;
}
#SM div{
padding:1rem !important;
}
#SM div:last-child {
text-align: right;
padding-top:3rem !important;
}
#SM div:last-child img {
width:32px;
margin-right:0.5rem;
}
#SM .footerImg {
margin-top:2rem;
}
/*********** MOBILE ************/
@media screen and (max-device-width: 700px) {
.container {
}
body {
width:100%;
background-color:#fff;
}
article, section {
width:100%;
}
.articleGridwrapper2 {
display: block;
}
.articleGridcol {
}
.articleGridwrapper {
grid-template-columns:50% 50%;
}
.container#donors div {
padding:5%;
}
.container#donors div:first-child {
margin-bottom:2rem;
}
.profileArticle {
display:block; /*** support for older phones ***/
display:inline-grid;
padding:0 0 2rem;
width:100%;
}
.year {
font-size:1.2rem;
color:#3172ae;
}
h4 {
margin:3rem auto 1rem;
}
.profileArticle .imgContainer {
display:block;
margin:2rem auto;
width:75%;
order: 2;
}
.profileArticle .copy, .profileArticle.right .copy{
order: 1;
padding:1rem;
}
h1 {
font-size:2rem
}
#coverBG h2 {
font-size:1.2rem
}
.col {
margin-top:6rem;
}
.col div {
margin:-4rem auto 1rem;
}
.subhead {
margin:0.5rem 2rem 2rem 2rem;
}
.col p {
padding-bottom:2rem;
}
.col a {
padding-bottom:2rem;
}
.longBottom {
margin-bottom:3rem;
}
.quoteBG {
}
.quoteBG img {
max-width: 50%;
}
h2 {
font-size:1.5rem;
margin:2rem 1rem 0;
}
select {
font-size:1rem;
margin: 3rem auto 0;
}
.container#letterBG .sig p {
margin-top:1rem;
}
.sig img {
width:80%;
}
.readMore {
border-bottom: 5px solid #3172ae;
}
.readMore span {
font-size:1rem;
display:block;
width:100%;
text-align:center;
padding:0.8rem 0;
margin-left:0;
background-color:#3172ae;
}
.expand {
padding-left:2rem;
background-color:#2a5c89;
}
.expandR {
padding-left:2.2rem;
}
#SM {
grid-template-columns: 100%;
}
#SM div:last-child {
text-align:left;
padding-top:0 !important;
}
#profiles h2{
width:auto;
}
#iframe-container {
min-height:45rem;
background-position-x:-10rem;
}
#iframe-container h3 {
font-size:2rem;
margin-left:1rem;
}
#iframe-container #inner {
width: 90%;
}
#iframe-container #intro {
padding: 0.5rem 1.5rem 1.5rem;
}
#closeBtn {
top:4rem;
padding:1rem;
}
}
@media screen and (max-device-width: 1024px) and (orientation : landscape) {
.infographicInner img {
margin:0 auto;
}
.infographicOuter {
height:9rem;
}
.infographicInner {
margin:1rem auto 0;
}
.container#donors {
margin-top:0;
}
.container#giving h4 {
margin:1rem 0.5rem 0;
font-weight:600;
}
#donors div h4:first-of-type{
padding-top:6rem;
}
.articleGridcol h4 {
padding-top:2rem !important;
}
.container#donors h2 {
margin:8rem 0.5rem 0rem;
}
.col img {
width:33%;
float:left;
clear:both;
margin-right:1rem;
}
.col p {
padding:2rem 1rem;
}
.col h6 {
padding-top:1rem;
margin-top:0;
}
.profileArticle .imgContainer {
width:40%;
}
.previous{
margin-right:0.5rem;
}
.articleGridwrapper {
grid-template-columns:25% 25% 25% 25%;
}
#SM {
grid-template-columns: 20% 80%;
}
#SM div:last-child {
text-align:right;
padding-top:3rem !important;
}
}