@import url(http://fonts.googleapis.com/css?family=Lobster);

#parallax {padding: 0; font-family: lobster, arial, sans-serif}

.hero {position: relative; text-align: center}
.hero-content {display: block; position: relative; z-index: 9999}

.parallax {
  display: block;
  text-align: center;
  padding: 10em 1em;
  color: white; overflow: hidden
}
.parallax h3 {font-size: 4em !important; text-shadow: 1px 1px 2px black; margin-bottom: 25px; padding: 0 !important; color: white !important;}
.parallax p {font-family: arial, sans-serif; font-size: 1em; text-transform: uppercase; letter-spacing: 0.1em !important; line-height: 0 !important; padding: 0 !important; font-weight: bold; color: black; text-shadow: 0 1px 0 rgba(255,255,255,0.75)}

.welcome {background: url(/student_success/housing/welcome/images/welcome.jpg) no-repeat center center}

.involved {background: url(/student_success/housing/welcome/images/getinvolved.jpg) no-repeat center center}

.creed {background: url(/student_success/housing/welcome/images/creed.jpg) no-repeat center center}

.responsibilities {background: url(/student_success/housing/welcome/images/campus.jpg) no-repeat center center}

.traditions {background: url(/student_success/housing/welcome/images/traditions.jpg) no-repeat center center}

.campus {background: url(/student_success/housing/welcome/images/creed.jpg) no-repeat center center}

.campus2 {background: url(/student_success/housing/welcome/images/campus2.jpg) no-repeat center center}

.community {background: url(/student_success/housing/welcome/images/community.jpg) no-repeat center center}

.pride {background: url(/student_success/housing/welcome/images/pride.jpg) no-repeat center center}

.grade {background: url(/student_success/housing/welcome/images/creed.jpg) no-repeat center center}

.spacer {display: block; color: #333; font-family: arial, sans-serif; padding: 3em 0}
.spacer h4 {font-family: lobster, sans-serif; font-size: 2em !important; margin-bottom: 15px}
.spacer p {font-size: 15px; line-height: 22px; margin-bottom: 15px}
button {border: 1px solid #aaa; padding: 0.75em 1.5em; border-radius: 4px; background: none; font-size: 1.25em; color: #555; display: inline-block; margin-right: -5px; vertical-align: top}
button:hover {background: #663399 !important; color: white; border-color: #663399 !important; cursor: pointer}
button.danger {margin-left: 25px; background: #FFD700 !important; color: #000000; border-color: #DAA520 !important;}
button.danger:hover {background: #DAA520 !important; border-color: #FFD700 !important;}
.container {max-width: 960px; margin: 0 auto; width: 95%}
.centered {text-align: center; padding-bottom: 3.75em}


.cleft-wrapper {
position: relative;
top: -1.25rem;
margin-bottom: -1.25rem;
left: 0;
width: 100%;
height: 1.25rem;
overflow: hidden;
}
.cleft-left, .cleft-right {
width: 50%;
height: 1.25rem;
background-color: #fff;
position: absolute;
top: 0;
}
.cleft-left {
left: -1.5rem;
}
.cleft-right {
right: -1.5rem;
}
.cleft-left:before, .cleft-right:before {
content: ' ';
display: block;
position: absolute;
width: 0;
height: 0;
border-style: solid;
}
.cleft-left:before {
right: -1.5rem;
border-width: 1.25rem 0 0 1.5rem;
border-color: transparent transparent transparent #fff;
}
.cleft-right:before {
left: -1.5rem;
border-width: 1.25rem 1.5rem 0 0;
border-color: transparent #fff transparent transparent;
}

.carrotBox {position: relative}
.carrot {
display: block;
height: 0;
width: 0;
border-top: 1.25rem solid #fff;
border-right: 1.5rem solid transparent;
border-left: 1.5rem solid transparent;
position: absolute;
left: 50%;
margin-left: -1.5rem;
bottom: -1.25rem;
}


/* properly make YouTube embedded videos and other objects responsive */
#content div.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
#content div.video-container iframe,
#content div.video-container object,
#content div.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}