/* HERO IMAGE */
#hero {position:relative; width:100%; padding-bottom:41.5%; background:no-repeat center top; background-size:cover; background-image:url(../../../wp-content/uploads/hero2-1600.jpg)}
#hero .colorfan {position:absolute; top:65%; right:0; bottom:0; left:0; background:no-repeat center bottom; background-size:cover; background-image:url(../../../wp-content/uploads/herocolorfan-1600.png)}
/* #hero .dreamoutloud {position:absolute; top:5%; bottom:25%; width:100%; background-repeat:no-repeat; background-position:center top; background-size:contain} */
#hero .play-icon {position:absolute; top:80%; bottom:5%; width:110px; left:calc(50% - (55px)); background:no-repeat center top; background-size:contain; transition:.2s}
#hero .play-icon:hover {transform:scale(1.1)}

@media only screen and (max-width:1600px) {
#hero {padding-bottom:665px}
}

@media only screen and (max-width:1200px) {
#hero {padding-bottom:55.4%}
}

@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:120dpi) {
#hero {background-image:url(../../../wp-content/uploads/hero2-3200.jpg)}
#hero .colorfan {background-image:url(../../../wp-content/uploads/herocolorfan-3200.png)}
}

@media only screen and (max-width:767px) {
#hero {padding-bottom:70% /*hero1 is 100%*/; background-image:url(../../../wp-content/uploads/hero2-1000.jpg)}
#hero .colorfan {position:absolute; top:70%; right:0; bottom:0; left:0; background:no-repeat center bottom; background-size:cover; background-image:url(../../../wp-content/uploads/herocolorfan-1000.png)}
/* #hero .dreamoutloud {top:5%; bottom:25%; width:100%} */
#hero .play-icon {top:78%}
}


/* HOMEPAGE FONTS */
.title {display:block; font-size:60px}
.title .bold {font-weight:700; color:#00447C}
.title br {display:none}
.info {display:block; margin:4px 0 0 0; padding:0 30px; font-size:21px; line-height:185%}
.highlight-link {display:block; margin:20px auto 0 auto; padding:0 15px; text-align:center}
.highlight-link a {display:inline-block; font-size:18px; font-weight:700; color:#00447C; text-decoration:none}
.highlight-link a:nth-child(2) {margin:0 0 0 25px}
.highlight-link .link-arrow {display:inline-block; width:10px; height:10px; margin:0 0 2px 9px; background-size:cover}
.highlight-link .link-arrow-white {display:inline-block; width:12px; height:12px; margin:0 0 2px 9px; background-size:cover}

@media only screen and (max-width:1050px) {
.title {font-size:5.7vw}
.info {font-size:18px}
.mobile-hide {display:none}
}

@media only screen and (max-width:767px) {
.title {font-size:9vw}
.title br {display:inline}
.info {padding:0}
.highlight-link {margin:14px 0 auto 0}
}


/* DREAM/PLAN */
#dreamplan {width:100%; max-width:1230px; margin:12px auto 24px auto; padding:0 15px; text-align:center}
#slick-pos {margin:30px 0 0 0}
#slick-pos a {position:relative; margin:0 2px; text-decoration:none}
#slick-pos img {width:100%}
#slick-pos a span {position:absolute; left:0; right:0; bottom:0; padding:18px; font-size:24px; line-height:85%; color:#FFFFFF}
#slick-pos .blue {background:rgba(0,68,124,.6)}
#slick-pos .orange {background:rgba(249,157,28,.6)}
#slick-pos .purple {background:rgba(198,22,141,.6)}
#slick-pos .green {background:rgba(154,202,60,.6)}

@media only screen and (max-width:1000px) {
#slick-pos a span {padding:12px; font-size:18px}
}

@media only screen and (max-width:767px) {
#slick-pos {margin:28px 0 0 0}
#slick-pos a span {padding:12px; font-size:18px}
}


/* FINANCIAL AID */
#financialaid a:link, #financialaid a:visited, #financialaid a:active, #financialaid a:hover {color:#000000; text-decoration:none}
#financialaid {width:100%; max-width:1230px; margin:66px auto 0 auto; padding:0 15px; text-align:center; overflow:hidden}
#financialaid .options {width:100%; max-width:850px; margin:30px auto 0 auto; text-align:center; overflow:hidden}
#financialaid .options a {display:block; float:left; width:calc(100% / 5); text-decoration:none}
#financialaid .options .fafsa {margin:0}
#financialaid .options .icon {width:100px; height:100px; margin:0 auto 10px auto; border-radius:50%; border-width:7px; border-style: solid; background-size:75%; background-repeat:no-repeat; background-position:50% 50%}
#financialaid .options .scholarships .icon {border-color:#F69E2C}
#financialaid .options .grantsloans .icon {border-color:#98CD45}
#financialaid .options .workstudy .icon {border-color:#00447C}
#financialaid .options .aplus .icon {border-color:#C4008C; background-size:65%}
#financialaid .options .fafsa .icon {border-color:#98CD45}
#financialaid .options .span .icon {width:100%}

@media only screen and (max-width:650px) {
#financialaid .options {max-width:400px; margin:28px auto 0 auto}
#financialaid .options a {width:calc(100% / 3)}
#financialaid .options .icon {width:80px; height:80px; border-width:7px}
#financialaid .options .workstudy {margin:0}
#financialaid .options .aplus {display:none}
#financialaid .options .fafsa {display:none}
#financialaid .options span {font-size:14px}
}


/* STUDENT PROFILES */
#profiles {width:100%; max-width:1230px; margin:68px auto 0 auto; padding:0 15px; text-align:center}

@media only screen and (max-width:767px) {
#profiles {margin:52px auto 0 auto}
}

#slick-profiles {width:100%; max-width:1230px; margin:30px auto 30px auto; padding:0 15px; overflow:hidden}
#slick-profiles .profile {float:left; width:calc((100% - 76px) / 3); margin:0 38px 0 0}
#slick-profiles .profile:last-child {margin:0}
#slick-profiles img {width:100%}
#slick-profiles .highlight-link {margin:5px auto 0 auto}

@media only screen and (max-width:1230px) {
#slick-profiles {padding:0 20px}
#slick-profiles .profile {width:calc((100% - 40px) / 3); margin:0 20px 0 0}
}

@media only screen and (max-width:767px) {
#slick-profiles {margin:27px auto 40px auto; padding:0; overflow:visible}
#slick-profiles .profile {position:relative; margin:0 4px 0 0}
#slick-profiles .highlight-link {position:absolute; background:rgba(0,60,124,.6); bottom:0; left:0; right:0; padding:5px}
#slick-profiles .highlight-link a {color:#FFFFFF}
#slick-profiles .link-arrow {display:none}
}



/* APPLY */
#apply-bkgd {width:100%; margin:65px 0 0 0; padding:15px 0 34px 0; background:#00447C}
#apply {width:100%; max-width:1230px; margin:0 auto; padding:0 15px; text-align:center}
#apply .title {font-size:80px; color:#FFFFFF}
#apply .title .bold {color:#FFFFFF}
#apply .highlight-link {margin:13px auto 0 auto}
#apply .highlight-link a {font-size:22px; font-weight:400; color:#FFFFFF}

@media only screen and (max-width:1050px) {
#apply-bkgd {padding:15px 0 28px 0}
#apply .title {font-size:7.2vw}
}

@media only screen and (max-width:767px) {
#apply-bkgd {padding:15px 0 23px 0}
#apply .title {font-size:8vw}
}


/* PHOTO */
#photo img {width:100%}


/* SOCIAL MEDIA */
#social-media {width:100%; max-width:1530px; margin:20px auto 0 auto; padding:0 15px; text-align:center; overflow:hidden}
#social-media .info br {display:none}
#social-media .phones {width:100%; height:425px; margin:12px auto 0 auto; overflow:hidden}
#social-media .phones a {display:block; float:left; width:calc(96% / 5); margin-right:1%; transition:.15s}
#social-media .phones a:hover {transform:translatey(-1.4%)}
#social-media .phones img {width:100%}
#social-media .phones .twitter {margin-right:0}

#social-media .phones .youtube {margin-top:3.85%}
#social-media .phones .instagram {margin-top:1%}
#social-media .phones .facebook {margin-top:2.65%}
#social-media .phones .snapchat {margin-top:4.4%}
#social-media .phones .twitter {margin-top:1.5%}

@media only screen and (max-width:1530px) {
#social-media .phones {height:27.65vw}
}

@media only screen and (max-width:600px) {
#social-media .phones {height:35.5vw}
#social-media .phones a {width:calc(98% / 3)}
#social-media .phones .youtube {display:none}
#social-media .phones .twitter {display:none}
#social-media .phones .snapchat {margin-right:0}

#social-media .phones .instagram {margin-top:4%}
#social-media .phones .facebook {margin-top:1%}
#social-media .phones .snapchat {margin-top:8%}
}