html {
font-size:18px;
font-family: "proxima-nova", sans-serif;
}
body {
margin:0;
background-color:#387ab8;
}
#container {
margin:3rem auto 0;
width:100%;
text-align: center;
line-height: 0;
font-size:0;
background: rgb(42,108,165);
background: linear-gradient(180deg, rgba(42,108,165,1) 0%, rgba(62,142,222,1) 100%);
padding:3rem 0;
}
#campus {
text-align: center;
position: relative;
}
#campus img{
width:100%;
position: absolute;
top:0;
left:0;
}
/*
#container::before {
background-image: url(../campus_bg_all.png);
background-size: 100% auto;
display: inline-block;
width: 100%;
height: 100px;
content:"";
}*/
#container div {
display:inline;
}
#container img,iframe {
margin:0;
padding:0;
display: inline-block;
/* width:150px;
height:84px;*/
width:240px;
height:135px;
/****** FALSE LOADING *******/
background-color:#000;
background-image: url("http://image.e.tufts.edu/lib/fe9e13727664067f74/m/8/6a1d7dd4-402a-4efa-962a-6cdd414a5758.gif");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
iframe {
width:240px;
height:135px;
transition: transform .2s ease-in-out;
transform: scale(1);
}
.animate {
/* width:240px;
height:135px; */
transform: scale(1.25);
position: absolute;
top:0;
left:0;
}
.animateVertical {
transform: scale(1.2);
position: absolute;
top: 50%;
left: 50%;
margin-left: -53.5px;
margin-top: -95px;
}
.iframeWrap {
position: relative;
width:240px;
height:135px;
background-color:#272727;
display:inline-block !important;
}
#container img {
display: inline-block;
/**** COVER SCREENSHOT MARGINS ****/
/* outline: 2px solid #000;
outline-offset: -2px; */
}
#container img:hover {
cursor: pointer;
}
#container img:hover, #container iframe:hover {
/* outline:4px solid rgba(255,255,255,0.5);
outline-offset: -4px; */
}
.campus {
display:block ;
width:100% ;
height:auto ;
margin-bottom:-2rem;
background-color: #3e8ede;
}
#intro {
text-align: center;
margin:0 3rem 2rem;
}
#intro div {
display:none
}
#intro p {
margin:1rem 0;
font-size:1rem;
}
#intro img {
max-width:30%; /*** width set inline for each individual lockup ***/
display:block;
margin:0 auto;
position: absolute;
top:2rem;
left:2rem;
}
/******* headings **********/
h1 {
font-size:1.8rem;
line-height:1.5;
color:#fff;
margin-top:7rem;
font-family: "proxima-nova", sans-serif;
font-style: normal;
font-weight: 800;
}
h2 {
font-size:1.5rem;
font-weight:400;
font-family: "proxima-nova", sans-serif;
line-height:1.5;
text-align: center;
text-transform: uppercase;
color:#fff;
}
/********* other text styles *********/
p , ul {
font-size:1rem;
font-weight:400;
font-family: "proxima-nova", sans-serif;
line-height:1.7;
color:#fff;
}
ul {
margin:0;
}
a {
color:#fff;
}
.light {
font-weight:300;
}
.normal {
font-weight: 400;
}
.semi {
font-weight:500;
}
.bold {
font-weight:600;
}
.italic {
font-style: italic;
}
.small {
font-size:0.8rem !important;
}
/********* 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:#3e8ede;
}
.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;
}
/********** select ***********/
select {
border:none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-ms-appearance: none; /* get rid of default appearance for IE8, 9 and 10*/
width:50%;
max-width:30rem;
height:2.5rem;
margin:1.5rem auto 0;
padding:0 1rem;
font-size:0.9rem;
font-family: "proxima-nova", sans-serif;
color:#333;
background-color:#fff;
background-image:url("http://image.e.tufts.edu/lib/fe9e13727664067f74/m/8/376043f2-46c4-4ea7-bb32-9e0d9ef7641e.svg");
background-repeat:no-repeat;
background-position: right 1rem center;
border-radius: 0;
}
select:focus {
outline:2px solid #fff;
outline-offset:0;
}
#intro button {
height:2.5rem;
padding:0 1rem;
margin-left:0.2rem;
font-size:0.8rem;
font-family: "proxima-nova", sans-serif;
color:#fff;
background-color:#333;
border:0;
}
#intro button:focus {
outline:2px solid #333;
outline-offset:0;
}
/********** footer ***********/
footer {
background-color:#3172ae;
min-height:8rem;
display:flex;
justify-content: center;
align-items: center;
width:100%;
}
footer p {
margin-right:2rem;
font-size:0.8rem;
}
/**** footer SM ****/
#SM {
}
#SM div{
padding:1rem !important;
}
#SM div {
text-align: right;
}
#SM div p {
text-align: left;
}
#SM div:last-child img {
height:1.5rem;
margin-right:0.5rem;
}
#SM .footerImg {
margin-top:2rem;
}
@media screen and (max-device-width: 700px) {
#container img,iframe {
width:380px;
height:212px;
}
#container {
margin:5rem auto 0;
padding: 5rem 0;
}
.animateVertical {
height: 380px !important;
width: 212px !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
margin-left: -106px !important;
margin-top: -190px!important;
}
.iframeWrap {
width:380px;
height:212px;
}
h1 {
font-size:3.5rem;
}
#intro p {
font-size:2rem;
margin:2rem 2rem 5rem;
}
select {
font-size:1.8rem;
padding: 2rem 1.5rem;
height:auto;
max-width:none;
width:80%;
background-size: 2rem;
}
#intro button {
font-size:1.8rem;
display: block;
margin:1rem auto 3rem;
padding: 2rem 3rem;
height:auto;
}
footer {
height: 38rem;
text-align: center;
flex-wrap: wrap;
padding: 3rem;
box-sizing: border-box;
}
footer p {
width:100%;
font-size:1.8rem;
margin:0 0 2.5rem 0;
}
#SM div {
width:100%;
padding:0;
text-align: center
}
#SM div:last-child img {
width:3rem;
}
.small {
font-size:1rem !important;
}
}