/* * Colors: * 海角论坛Green: #006A52 | rgba(0,106,82,1) | Primary * 海角论坛Yellow: #FFD100 | rgba(255,210,0,1) | Primary * 海角论坛Dark Yellow: #FFC600 | rgba(255,198,0,1) | Primary * 海角论坛Bright Lime: #44D62C | rgba(68,214,44,1) | Secondary * 海角论坛Dark Lime: #00B74F | rgba(0,183,79,1) | Secondary * 海角论坛Light Grey: #F0F3F5 | rgba(240,243,245,1) | Neutral * 海角论坛Dark Grey: #DBE2E9 | rgba(219,226,233,1) | Neutral * 海角论坛Dark Green: #22372B | rgba(34,55,43,1) | Neutral * * Fonts: * font-family: 'Montserrat', sans-serif; (300|400|600|700) (Replacement for Proxima Nova) * font-family: 'Oswald', sans-serif; (400|500) (Replacement for Trade Gothic Number 20) * font-family: 'Volkhov', serif; (400|700) (Replacement for Mercury) */ /*.ou-je-component:hover { min-height: 40px; } */ /* For OU Edit to fix issue with floating components */ /* ==================================================================================================== */ /* Snippet Staggered Border - v2.0 */ /* ==================================================================================================== */ .snippet-staggered-border { clear: both; margin: 0 0 0 0; } .snippet-staggered-border .row { margin: 0 0 0 0; } .snippet-staggered-border .row img { display: block; width: 100%; float: none; position: relative; z-index: 10; } .snippet-staggered-border .row .col-md-6 { margin: 0 0 30px 0; padding-top: 30px; } .snippet-staggered-border .row .col-md-6.img-left { padding-left: 46px; } .snippet-staggered-border .row .col-md-6.img-right { padding-right: 46px; } .snippet-staggered-border .row .column-1 { position: relative; } .snippet-staggered-border .row .column-1 .bright-lime-border { border: 6px solid #44D62C; position: absolute; top: -26px; left: -26px; z-index: 9; width: 100%; height: 100%; } .snippet-staggered-border .row .column-1 .light-grey-border { background-color: #F0F3F5; position: absolute; top: 20px; left: -46px; z-index: 8; width: 100%; height: 100%; } .snippet-staggered-border .row .column-2 { position: relative; } .snippet-staggered-border .row .column-2 .bright-lime-border { border: 6px solid #44D62C; position: absolute; top: -26px; left: 26px; z-index: 9; width: 100%; height: 100%; } .snippet-staggered-border .row .column-2 .light-grey-border { background-color: #F0F3F5; position: absolute; top: 20px; left: 46px; z-index: 8; width: 100%; height: 100%; } /* For OU Editing */ .table-transform.table-staggered-border tbody tr:nth-child(odd) { background-color: #F0F3F5; } .table-transform.table-staggered-border tbody tr td { vertical-align: top; } /* ==================================================================================================== */ /* Snippet Alternating Background - v2.0 */ /* ==================================================================================================== */ .snippet-alternating-background { clear: both; margin: 0 0 20px 0; } .snippet-alternating-background:after { content: ""; display: block; clear: both; } .snippet-alternating-background .snippet-alternating-background-item { padding: 20px 20px 1px 20px; } .snippet-alternating-background .snippet-alternating-background-item:after { content: ""; display: block; clear: both; } .snippet-alternating-background .snippet-alternating-background-item:nth-child(odd) { background-color: #F0F3F5; } .snippet-alternating-background .snippet-alternating-background-item:nth-child(even) { background-color: #FFFFFF; } .snippet-alternating-background.dark .snippet-alternating-background-item:nth-child(odd) { background-color: #F0F3F5; } .snippet-alternating-background.dark .snippet-alternating-background-item:nth-child(even) { background-color: #DBE2E9; } @media (max-width: 991px) { .snippet-alternating-background .snippet-alternating-background-item { padding: 10px 10px 1px 10px; } } /* For OU Editing */ .table-transform.table-alternating-background tbody tr:nth-child(odd) { background-color: #F0F3F5; } .table-transform.table-alternating-background tbody tr td { padding: 20px 20px 1px 20px; } /* ==================================================================================================== */ /* Table Transformation General Design - v2.0 */ /* ==================================================================================================== */ .table-transform { width: 100%; margin-bottom: 20px; border-collapse: collapse; clear: both; } .table-transform caption { background-color: #006A52; border-bottom: 4px solid #FFD100; padding: 10px 20px; color: #FFFFFF; font-size: 1.8rem; line-height: 2.2rem; font-weight: normal; font-family: 'Oswald', sans-serif; text-transform: uppercase; } .table-transform thead { background-color: #DBE2E9; border-bottom: 1px solid #22372B; } .table-transform thead tr { border-bottom: 1px solid #F0F3F5; } .table-transform thead tr:last-child { border-bottom: none; } .table-transform thead th { padding: 10px 20px; font-size: 1.4rem; line-height: 1.8rem; vertical-align: top; border-right: 1px solid #F0F3F5; } .table-transform thead th:last-child { border-right: none; } /* ==================================================================================================== */ /* Snippet - Main Message*/ /* ==================================================================================================== */ .snippet-main-message { clear: both; position: relative; background-repeat: no-repeat; background-size: cover; background-position: center; height: 580px; } .snippet-main-message.background-left { background-position: left; } .snippet-main-message.background-center { background-position: center; } .snippet-main-message.background-right { background-position: right; } .snippet-main-message > .main-message { position: absolute; text-align: center; width: 100%; top: 50%; transform: translateY(-50%); margin: 0; } .snippet-main-message > .main-message .cta { margin: 15px auto; font-family: 'Volkhov', serif; font-size: 4.5rem; font-weight: 600; color: #FFFFFF; line-height: 1.2; } .snippet-main-message > .main-message .cta a { color: #FFFFFF; } .snippet-main-message > .main-message .cta a:hover { text-decoration: none; } .snippet-main-message > .main-message .cta a.btn.btn-yellow { color: #22372b; } .main-message.with-nav .cta a span::before {content: "\A";white-space: pre;} /*This will place "Department" on a second line*/ .snippet-main-message > .main-message.with-nav .cta {width: calc(100% - 600px);font-size: 5rem;} .snippet-main-message nav.side-navigation {margin: 50px 50px 5px 50px;box-shadow: 0px 0px 3px #bfbfbf;float: left;width: 220px;position: relative; z-index: 100;} .asset-creative-thought-matters .background nav.side-navigation{margin: 0 50px;} .snippet-main-message.width-video > .main-video { overflow: hidden; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); position: relative;} .snippet-main-message.width-video > .main-video video { position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1000; overflow: hidden; } .snippet-main-message.width-video .side-navigation { position: absolute; } @media (max-width: 991px) { .snippet-main-message {max-height: 400px;} .snippet-main-message nav.side-navigation, .asset-creative-thought-matters .background nav.side-navigation {width: 90%;margin: 0 5%;top: 88%;} .snippet-main-message > .main-message.with-nav .cta {width: 100%;} } @media (max-width: 767px) { .snippet-main-message > .main-message .cta, .snippet-main-message > .main-message.with-nav .cta { font-size: 4.0rem; } } /* ==================================================================================================== */ /* Snippet - Alternating Call to Actions /* ==================================================================================================== */ .snippet-alternating-cta { clear: both; padding: 120px 0 0 0; overflow: hidden; } .snippet-alternating-cta .cta { clear: both; margin: 0 0 150px 0; } .snippet-alternating-cta .cta .cta-image { position: relative; margin: 0 5px; } .snippet-alternating-cta .cta .cta-image a { display: block; } .snippet-alternating-cta .cta .cta-image img { display: block; position: relative; z-index: 20; max-width: 100%; } .snippet-alternating-cta .cta .green-box { border: 6px solid #33c572; width: 474px; height: 100%; position: absolute; z-index: 18; } .snippet-alternating-cta .cta .grey-box { width: 474px; height: 100%; background-color: #f0f3f5; position: absolute; z-index: 0; } .snippet-alternating-cta .cta .cta-text { max-width: 540px; padding: 55px 0 0 90px; margin: 0 5px; background-repeat: no-repeat; background-position: left 25px; background-size: 80px; } .snippet-alternating-cta .cta .cta-text .cta-type { color: #006A52; text-transform: uppercase; font-family: 'Oswald', sans-serif; font-weight: 500; font-size: 18px; line-height: 18px; margin: 0 0 10px 0; } .snippet-alternating-cta .cta .cta-text .cta-title { font-family: 'Volkhov', serif; font-size: 48px; line-height: 48px; margin: 0 0 40px 0; /*max-width: 380px;*/ } .snippet-alternating-cta .cta .cta-text .cta-title a { color: #22372b; } .snippet-alternating-cta .cta .cta-text .cta-title a:hover { text-decoration: none; } .snippet-alternating-cta .cta .cta-text .cta-desc { /*max-width: 380px;*/ margin: 0 0 50px 0; font-size: 1.6rem; line-height: 2.2rem; } .snippet-alternating-cta .cta.cta-left-top .cta-image img { margin: 0 0 0 auto; max-width: 100%; } .snippet-alternating-cta .cta.cta-left-top .green-box { top: -35px; right: 23%; } .snippet-alternating-cta .cta.cta-left-top .grey-box { top: 60px; right: 58%; } .snippet-alternating-cta .cta.cta-right-top .green-box { top: -35px; left: 23%; } .snippet-alternating-cta .cta.cta-right-top .grey-box { top: 60px; left: 58%; } .snippet-alternating-cta .cta.cta-right-top .cta-text { margin: 0 0 0 auto; } .snippet-alternating-cta .cta.cta-left-bottom .cta-image img { margin: 0 0 0 auto; max-width: 100%; } .snippet-alternating-cta .cta.cta-left-bottom .green-box { bottom: -35px; right: 23%; } .snippet-alternating-cta .cta.cta-left-bottom .grey-box { top: -60px; right: 58%; } .snippet-alternating-cta .cta.cta-right-bottom .green-box { bottom: -35px; left: 23%; } .snippet-alternating-cta .cta.cta-right-bottom .grey-box { top: -60px; left: 58%; } .snippet-alternating-cta .cta.cta-right-bottom .cta-text { margin: 0 0 0 auto; } /* Alternating CTA on the CTM page */ .ctm.snippet-alternating-cta .cta {margin: 0 0 100px 0;} .ctm.snippet-alternating-cta .cta .cta-text .cta-title{font-family: 'Montserrat', sans-serif;font-size: 3.6rem;font-weight: 500;} .ctm.snippet-alternating-cta .cta .cta-text{max-width: none;} @media (max-width: 991px) { .snippet-alternating-cta { padding-top: 90px; } .snippet-alternating-cta .cta { margin-bottom: 70px; } .snippet-alternating-cta .cta .cta-image { margin: 0 auto 30px 0; max-width: 540px; } .snippet-alternating-cta .cta .cta-image img { margin: 0 auto; } .snippet-alternating-cta .cta .cta-text { margin: 0 auto!important; padding-top: 40px; padding-left: 0; background-image: none!important; } .snippet-alternating-cta .cta .cta-text .cta-title { font-size: 3.8rem; line-height: 3.8rem; } } /* ==================================================================================================== */ /* Class Stats*/ /* ==================================================================================================== */ .class-stats .row {padding:20px 0; border-bottom: 2px solid #33c572;} .class-stats .stat p{font-family: 'Volkhov', Georgia, serif; font-size:6rem; z-index: 20; position: relative;color: #006752;margin-bottom: 0;line-height:1;text-align:right;} .class-stats .stat-title {font-size: 3rem;z-index: 20; position: relative;line-height: 1;} .class-stats .stat-icon {background-repeat: no-repeat;padding: 55px 0 0 90px;margin: 0 5px;background-position: left 25px;background-size: 80px;} @media (max-width: 500px) { .class-stats .stat p{font-size:4rem; } .class-stats .stat-title {font-size: 2rem;} .class-stats .col-md-6{width:50%;float:left;} } /* ==================================================================================================== */ /* Featured Stats*/ /* ==================================================================================================== */ .featured-stats .row {padding:20px 0;} .featured-stats .stat p{font-family: 'Volkhov', Georgia, serif; font-size:16rem; z-index: 20; position: relative;color: #006752;margin-bottom: 0;line-height:1} .featured-stats .stat-title {font-family: 'Volkhov', serif;font-size: 5rem;z-index: 20; position: relative;} .featured-stats .stat-title .glyphicon {color: #33c572; font-size: 5rem; border: 4px solid #33c572; border-radius: 50%; padding: 8px;} .featured-stats .stat-icon {background-repeat: no-repeat;padding: 55px 0 0 90px;margin: 0 5px;background-position: left 25px;background-size: 80px;} .featured-stats .stat .green-box1 { border: 6px solid #33c572; width: 120%; height: 100%; position: absolute; z-index: 18;left: -10%;} .featured-stats .stat .grey-box1 { width: 160%; height: 120%; background-color: #f0f3f5; position: absolute; z-index: 0; top:-10%;} .featured-stats .stat .green-box2 { border: 6px solid #33c572; width: 100%; height: 130%; position: absolute; z-index: 18;left: 0;top:-20%;} .featured-stats .stat .grey-box2 { width: 150%; height: 110%; background-color: #f0f3f5; position: absolute; z-index: 0;top:-10%;} .featured-stats .stat .green-box3 { border: 6px solid #33c572; width: 100%; height: 100%; position: absolute; z-index: 18;left: 0;} .featured-stats .stat .grey-box3 { width: 110%; height: 130%; background-color: #f0f3f5; position: absolute; z-index: 0;top:-15%;} @media (max-width: 991px) { .featured-stats .row {margin:20px 0;} .featured-stats .stat .green-box1, .featured-stats .stat .grey-box1, .featured-stats .stat .green-box2, .featured-stats .stat .grey-box2, .featured-stats .stat .green-box3, .featured-stats .stat .grey-box3 {display:none; } .featured-stats .row {border-bottom: 2px solid #33c572;} .featured-stats .stat p{font-size:9rem; } .featured-stats .stat-title {font-size: 2.5rem;} .featured-stats .col-md-4, .featured-stats .col-md-8, .featured-stats .col-md-6{width:50%;float:left;} } /* ==================================================================================================== */ /* Snippet - Video CTA */ /* ==================================================================================================== */ .video-cta:before{position: absolute;content:" ";top:0;left:0;width:100%;height:100%;display: block;z-index:0;background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#4d000000',GradientType=0 ); /* IE6-9 */} .video-cta {position: relative;clear: both;width: 100%;height: 600px;padding: 50px 0 0 0;background-repeat: no-repeat;background-size: cover;background-position: center;} .video-cta h2{font-family:'Volkhov', Georgia, serif;font-size:3.6rem;} .video-cta p {font-size:1.8rem;margin-top: 25px;} .video-cta .icon {position: absolute;right: -30px;bottom: -30px;width: 54px;height: 54px; background-image: url("/_images/play.png");} .video-cta .positioner {width: 50%;height: 50%;position: absolute;left: 0;top: 0;} @media (max-width: 767px) { .video-cta {height: 350px;} } /* ==================================================================================================== */ /* Snippet - Featured CTA ( used for the arrow in the corner component ) */ /* ==================================================================================================== */ .featured-cta { margin: 0; text-align: center; padding: 20px; background-color: #DBE2E9; } .featured-cta h4{font-family: 'Oswald', sans-serif; font-weight:400;color:#006A52; } .featured-cta .btn.btn-default {margin: 20px auto 0;} .featured-cta.center {margin: 0 auto;} .featured-cta.half-width {width:50%;} .featured-cta.third-width {width:33%;} .featured-cta.quarter-width {width:25%;} .featured-cta.left {margin: 0 15px 15px 0;} .featured-cta.right{margin: 0 0 15px 15px;} @media (max-width: 767px) { .featured-cta.half-width, .featured-cta.third-width, .featured-cta.quarter-width {width:100%;} } /* ==================================================================================================== */ /* Snippet - Column Float */ /* ==================================================================================================== */ .snippet-col-float.left { margin-right: 30px; width: 100%; } .snippet-col-float.right { margin-left: 30px; width: 100%; } @media (max-width: 767px) { .snippet-col-float.left { margin: 0 auto 20px auto; float: none; width: 100%; } .snippet-col-float.right { margin: 0 auto 20px auto; float: none; width: 100%; } } /* ==================================================================================================== */ /* Snippet - Image with Caption */ /* ==================================================================================================== */ .snippet-image-caption.center { margin: 0 auto 20px auto; } .snippet-image-caption.center .image img { margin: 0 auto; display: block; max-width: 100%; height: auto; } .snippet-image-caption.left { float: left; margin: 0 15px 20px 0; } .snippet-image-caption.left .image img { display: block; max-width: 100%; height: auto; } .snippet-image-caption.right { float: right; margin: 0 0 20px 15px; } .snippet-image-caption.right .image img { display: block; max-width: 100%; height: auto; } .snippet-image-caption .image { margin: 0 0 5px 0; } .snippet-image-caption .caption { font-size: 1.4rem; line-height: 1.6rem; text-align: center; } @media (max-width: 767px) { .snippet-image-caption.left { float: none; width: 100%; margin: 0 auto 20px auto; } .snippet-image-caption.right { float: none; width: 100%; margin: 0 auto 20px auto; } } /* ==================================================================================================== */ /* Snippet Multiple Images w/ caption */ /* ==================================================================================================== */ .snippet-image { clear: both; } .snippet-image img { display: block; margin: 0 auto 5px auto; } .snippet-image .caption { font-size: 1.4rem; text-align: center; } /* ==================================================================================================== */ /* Grey Background */ /* ==================================================================================================== */ .snippet-grey-background { background-color: #f0f3f5; padding: 15px; width: 100%; margin-bottom: 20px; } .snippet-grey-background.right { margin-left: 15px; max-width: 300px; } .snippet-grey-background.left { margin-right: 15px; max-width: 300px; } .snippet-grey-background ul li { margin: 0; } @media (max-width: 767px) { .snippet-grey-background.right { margin-left: 0; max-width: 100%; } .snippet-grey-background.left { margin-right: 0; max-width: 100%; } } /* ==================================================================================================== */ /* Grey Background */ /* ==================================================================================================== */ .background { clear: both; } .background--white { background-color: #FFFFFF; } .background--grey { background-color: #F0F3F5; } .background--green { background-color: #006A52; color: #FFFFFF; } .background__padding { padding: 60px 0; } .background__paddingSmall { padding: 10px 0; } /* ==================================================================================================== */ /* Snippet Table Transformations - This is for OU Campus */ /* ==================================================================================================== */ .snippet-tt { width: 100%; border-collapse: collapse; margin-bottom: 30px; border: 1px solid #006A52; } .snippet-tt caption { background-color: #006A52; border-bottom: 1px solid #33c572; padding: 10px 30px; color: #FFFFFF; font-size: 1.8rem; line-height: 2.2rem; font-weight: normal; font-family: 'Oswald', sans-serif; } .snippet-tt thead { background-color: #d8d8d8; border-left: 1px solid #006A52; border-right: 1px solid #006A52; } .snippet-tt thead tr { border-bottom: 1px solid #006A52; } .snippet-tt thead th { padding: 10px 30px; font-size: 1.4rem; line-height: 1.8rem; border-right: 1px solid #006A52; vertical-align: top; } .snippet-tt tbody { border-left: 1px solid #006A52; border-right: 1px solid #006A52; } .snippet-tt tbody tr { border-bottom: 1px solid #006A52; } .snippet-tt tbody tr td { padding: 0; border-right: 1px solid #d8d8d8; vertical-align: top; } .snippet-tt tbody tr td:last-child { border-right: 0; } /*.snippet-tt tbody tr td img { width: 100%; height: auto; }*/ .snippet-tt.snippet-accordion td { width: 50%; } .snippet-tt.snippet-tabs td { width: 50%; } /* */ /* */ /* */ /* */ /* ==================================================================================================== */ /* Asset - Creative Thought Matters */ /* ==================================================================================================== */ .asset-creative-thought-matters { clear: both; position: relative; background-color: #006A52; } .asset-creative-thought-matters .background { width: 100%; height: 530px; padding: 50px 0 0 0; background-repeat: no-repeat; background-size: cover; background-position: center; } .asset-creative-thought-matters .white-box { border: 6px solid #FFFFFF; width: 447px; height: 438px; margin: 0 auto; font-family: 'Volkhov', serif; font-size: 42px; line-height: 48px; color: #FFFFFF; font-weight: bold; padding: 215px 0 0 50px; position: relative; text-align: left; } .asset-creative-thought-matters .yellow-box { position: absolute; bottom: 42px; left: 54%; background-color: #FFD100; padding: 38px 44px; font-size: 1.4rem; line-height: 2.0rem; color: #22372b; font-weight: 600; max-width: 318px; } @media (max-width: 991px) { .asset-creative-thought-matters .white-box { max-width: 447px; width: auto; } .asset-creative-thought-matters .snippet-main-message .white-box {max-width: none;width: 320px;margin: 40px 20px 0;height: 200px;padding: 30px 0 0 20px;} } @media (max-width: 767px) { .asset-creative-thought-matters { } .asset-creative-thought-matters .white-box { max-width: none; width: calc(100% - 40px); margin: 0 20px; } .asset-creative-thought-matters .yellow-box { position: relative; width: 100%; bottom: auto; left: auto; max-width: 100%; } } /* ==================================================================================================== */ /* Department Faculty Profile */ /* ==================================================================================================== */ .faculty-profile .photo-tint {position: relative;float: left;margin-right: 20px;margin-bottom: 20px;cursor: pointer;} .faculty-profile .photo-tint:before {content: "";display: block;position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0, 0.4);background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */} .faculty-profile{margin: 50px auto;max-width: 1440px;} .faculty-profile h2{font-family:'Volkhov', Georgia, serif;} .faculty-profile .col-md-4 p{font-size: 1.8rem;z-index: 10;position: absolute;bottom: 0px;left: 10px;color: #fff;} .faculty-profile .col-md-4 p strong{ bottom: 70px;line-height: 4;} @media (max-width: 991px) { .faculty-profile .col-md-4{text-align: center;} .faculty-profile .photo-tint{float:none;display:inline-block;} } /* ==================================================================================================== */ /* Vertical Profiles */ /* ==================================================================================================== */ .vertical-profiles { clear: both; margin: 0 0 50px 0; position: relative; } .vertical-profiles .layout { position: relative; } .vertical-profiles .layout:before {border-top: 2px solid #44d62c;content: "";margin: 0 auto;position: absolute;top: 65px;left: 0;width: 100%;z-index: 1;} .vertical-profiles .col-md-4 { margin: 80px 0 0 0; } .vertical-profiles .vertical-profile { width: 150px; float: left; height: 600px; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; } .vertical-profiles .vertical-profile:before {position: absolute;content: " ";top: 0;left: 0;width: 100%;height: 100%;display: block;z-index: 0;background-color: rgba(0,0,0,0.4);} .vertical-profiles .vertical-profile .rotate { white-space: nowrap;position: absolute;bottom: 20px;left: 100%;transform-origin: left bottom;transform: rotate(-90deg); } .vertical-profiles .vertical-profile .rotate h3 { font-family: 'Oswald', sans-serif;text-transform: uppercase;font-weight: 400;letter-spacing: 1px; color: #FFF; font-size: 2.4rem; margin: 0; } .vertical-profiles .vertical-profile .rotate h4 { font-family: 'Oswald', sans-serif;text-transform: uppercase;font-weight: 400;letter-spacing: 1px; color: #33c572; font-size: 1.6rem; margin: 0 0 5px 0; } .vertical-profiles .profile { display: none; height: 520px; float: left; width: calc(100% - 450px); margin: 80px 0 0 0; padding: 0 10px; text-align: center; font-size: 1.6rem; overflow: hidden; } .vertical-profiles .profile.active { display: block; } .vertical-profiles .profile span { margin: 0 auto 20px auto; padding: 20px; border: 4px solid #44d62c; border-radius: 50%; display: inline-block; } .vertical-profiles .profile span img { border-radius: 50%; width: 175px; height: 175px; display: block; filter: grayscale(100%); -webkit-filter: grayscale(100%); } .vertical-profiles .profile h3 { font-family: 'Oswald', sans-serif;text-transform: uppercase; font-size: 3.0rem; margin: 0 0 5px 0; } .vertical-profiles .profile h4 { font-size: 2.0rem; margin: 0 0 10px 0; font-weight: bold; } /* Options */ .vertical-profiles.vertical-profiles-small .vertical-profile { width: 125px; } .vertical-profiles.vertical-profiles-small .profile { margin: 80px 0 0 0; height: 520px; } .vertical-profiles.vertical-profiles-6 .profile { width: calc(100% - 750px); } @media (max-width: 1199px) { .vertical-profiles { padding: 0 10px; } .vertical-profiles .vertical-profile { width: 100px; } .vertical-profiles .profile { width: calc(100% - 300px); } .vertical-profiles.vertical-profiles-6 .profile { width: 100%; display: block!important; width: 100%; float: none; height: auto;} .vertical-profiles.vertical-profiles-small.vertical-profiles-6 .vertical-profile{ display: none; } } @media (max-width: 991px) { .vertical-profiles .vertical-profile { display: none; } .vertical-profiles .profile { display: block!important; width: 100%; float: none; height: auto; } .vertical-profiles.vertical-profiles-small .profile { height: auto; } } .custom-vertical-ocse { clear: both; position: relative; overflow: hidden; max-height: 600px; } .custom-vertical-ocse .cv-ocse-layout { margin: 0 auto; max-width: 1560px; } .custom-vertical-ocse .cv-ocse-layout .row { margin: 0; position: relative; } .custom-vertical-ocse .cv-ocse-layout .row::before { border-top: 3px solid #44D62C; content: ""; margin: 0 auto; position: absolute; top: 65px; left: 0; width: 100%; z-index: 1;} .custom-vertical-ocse .cv-ocse-layout .col-1 { float: left; max-width: 350px; width: 100%; padding: 70px 15px 0 15px; } .custom-vertical-ocse .cv-ocse-layout .col-2 { float: left; width: calc(100% - 350px); } .custom-vertical-ocse .vertical-profiles.vertical-profiles-small .vertical-profile { width: calc((100% - 350px) / 6); } .custom-vertical-ocse .vertical-profiles.vertical-profiles-6 .profile { font-size: 1.4rem; width: 350px; } @media (max-width: 991px) { .custom-vertical-ocse { max-height: none; } .custom-vertical-ocse .cv-ocse-layout .col-1 { float: none; width: 100%; margin: 0 auto; text-align: center; } .custom-vertical-ocse .cv-ocse-layout .col-2 { float: none; width: 100%; margin: 0 auto; max-width: 350px; } .custom-vertical-ocse .vertical-profiles.vertical-profiles-6 .profile { width: 100%; } } .profiles .item {height: 100%;padding-top: 100px;position: relative;overflow: hidden;width: 50%;float: left;} .success h2{font-family: 'Volkhov', serif;} .success .rotate {white-space: nowrap;position: absolute;bottom: 20px;left: 100%;transform-origin: left bottom;transform: rotate(-90deg);} .success .profiles h3, .success .profiles h4, .success .single-profile h3, .success .single-profile h4{font-family: 'Oswald', sans-serif;text-transform: uppercase;font-weight: 400;letter-spacing: 1px;} .success .profiles h3{font-size: 2.4rem;} .success .profiles h4{font-size: 1.6rem;} .success .profiles h3{color: #fff;font-size: 2.4rem;} .success .profiles h4{color: #33c572;font-size: 1.6rem;} .success .bg-image {background-repeat: no-repeat;background-position: center center;background-size: cover;height: 600px;} .success .bg-image:before {position: absolute;content: " ";top: 0;left: 0;width: 100%;height: 100%;display: block;z-index: 0;background-color: rgba(0,0,0,0.4);} .success .single-profile span{margin: 20px auto;padding: 20px;border: 4px solid #44d62c;border-radius: 50%;display: inline-block;} .success .single-profile img{ border-radius: 50%;width: 200px;height: 200px;display: block; -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */filter: grayscale(100%);} .success .single-profile{text-align: center;} .success .single-profile .year {background-color: #33c572;border-radius: 60px;width: 60px;height: 60px;color: #FFFFFF;font-family: 'Oswald', sans-serif;font-size: 2.3rem;line-height: 6.0rem; position: absolute;top: 20px;} @media (max-width: 991px) { .success .col-md-4:first-child, .success .col-md-4:last-child {margin-top: 0;display: inline-block;} .success .bg-image {height: 400px;} .success:before {display:none;} .layout .col-md-4.profiles{margin: 0 -15px;padding: 0;} } /* ==================================================================================================== */ /* Snippet - 2/3 Column Layout */ /* ==================================================================================================== */ /*With a green bar that goes across (See CTM Page for example) */ .col-2-3.row.layout {position:relative;margin: 50px auto;} .col-2-3.with-bar::before {border-top: 2px solid #44d62c;content: "";margin: 0 auto;position: absolute;top: 10%;left: 25%;right: 0;bottom: 0;width: 75%;z-index: 1;} .col-2-3.with-bar h2{margin-top: 60px;} /*Without a green bar that goes across (See CTM Page for example) */ .col-2-3 .col-md-8.bg-green h4 {color: #33c572;margin:30px 0 10px 0} .col-2-3 .col-md-8.bg-green ul{list-style-type: none;-webkit-padding-start: 0;} .col-2-3 .col-md-8.bg-green ul li{font-size: 1.4rem;line-height: 1.5;color:#fff;margin:10px 0;background-image: none;padding: 0;} .col-2-3 .col-md-8.bg-green{padding: 30px;margin: 50px 0 0 0;position:relative;} .col-2-3 .col-md-4.img-underlap {margin: 0;z-index: -1;position: relative;float:right;width:40%;} .col-2-3 .col-md-4.img-underlap img {position:absolute;} .row.col-2-3{margin-right: 0;margin-left: 0;} @media (max-width: 991px) { .col-2-3 .col-md-4.img-underlap {margin: -50px 0 0 0;z-index: 1;position: relative;float:right;width:40%;} .col-2-3 .col-md-4.img-underlap img {position:relative;} .full-width-2col, .col-2-cta {display: block;} } /* ================================================== */ /* Snippet - 2 Column Call to Actions with full-size background color */ /* ================================================== */ .full-width-2col, .col-2-cta{display: flex;overflow: hidden;margin: 0;} .full-width-2col .col-md-6, .col-2-cta .col-md-6 {flex: 1;padding: 20px;} .full-width-2col .col-md-6 span, .col-2-cta .col-md-6 span{max-width: 645px;margin: 0 auto;display: block;} .full-width-2col .col-md-6:first-child, .col-2-cta .col-md-6:first-child{background-color:#f0f3f5;} .full-width-2col .col-md-6:last-child{background-color:#dbe2e9;} .col-2-cta .col-md-6:last-child{background-color:#ffc600;} .col-2-cta .col-md-6{text-align: center;} .col-2-cta .col-md-6 .btn{margin: 25px auto;} .full-width-2col hr{border-top: 1px solid #22372b;opacity: .2;} .full-width-2col h3{font-size: 2.8rem; } .full-width-2col p a{font-size: 1.3rem;line-height: 1.3rem;font-weight: 600;color: #006A52;text-transform: uppercase;} @media (max-width: 1199px) { .col-2-cta .col-md-6 {padding: 20px;} } @media (max-width: 991px) { .col-2-cta {display: block;} .full-width-2col{display: block;} } /* ================================================== */ /* Snippet - Full-width, Full background 2 columns with a grey tint. */ /* ================================================== */ .full-width-2col{display: flex;overflow: hidden;margin: 0;} .full-width-2col hr.solid{border-top:2px solid rgba(0,0,0,.2);} .full-width-2col h3{font-size: 2.8rem; } .full-width-2col p a{font-size: 1.3rem;line-height: 1.3rem;font-weight: 600;color: #006A52;text-transform: uppercase;} .full-width-2col .col-md-6 span{max-width: 645px;margin: 0 auto;display: block;} .full-width-2col .col-md-6:first-child{background-color:#f0f3f5;} .full-width-2col .col-md-6:last-child{background-color:#dbe2e9;} @media (max-width: 991px) { .full-width-2col {display: block;} } /* ==================================================================================================== */ /* Snippet Tab */ /* ==================================================================================================== */ .nav-tabs { border-bottom: 2px solid #33c572; background: #f0f3f5; padding: 10px 0 1px 0;} .nav-tabs > li { background-image: none; padding: 0; margin: 0px 0 -3px 0; border: 0; border-top: 0; border-bottom: 0; } .nav-tabs > li:first-child { border-left: 10px solid #f0f3f5; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{ border-color: transparent; } .nav-tabs > li > a { margin-right: 0; border-radius: 0; border: 0; background: #f0f3f5; padding: 15px 25px; } .nav-tabs > li > a:hover {border-bottom: 2px solid #33c572;} .nav-tabs > li > a:focus { outline: none; } .tab-content { border-top: 0; padding: 10px; } @media (max-width: 767px) { .nav-tabs { border-bottom: none; background: #fff; } .nav-tabs > li:first-child { border-left: none; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {background-color: #ccd5db; border-top: none;border-bottom: 2px solid #33c572; } .nav-tabs > li > a {margin: 5px;} } /* ==================================================================================================== */ /* Call to Actions with a green tab on top, photo, and title/text - All equal heights. Seen on CTM and CoF */ /* ==================================================================================================== */ .cta-col{ margin: 0 0 0 0; background: #f0f3f5; padding: 50px 0 0 0;} /*.cta-col:before {background: #fff;content: "";margin: 0;width: 100%;height: 30%;position: absolute;padding: 0;} */ .cta-col .col { margin-bottom: 50px; } .cta-col .col .bg-white{padding: 0;background-color: #fff;box-shadow: 0px 1px 4px #e7e7e7;} .cta-col .col .bg-white img{width: 100%;} .cta-col .col .cta-disc{padding: 20px;font-size: 1.6rem; /*height: 250px; */} .cta-col .tab {background-color: #006853;color: #fff;padding: 10px 20px;display: inline-block;font-family: 'Oswald', sans-serif;font-weight: 400;text-transform: uppercase;/*margin-top: 20px;*/} /* ==================================================================================================== */ /* Department Recent News-inline*/ /* ==================================================================================================== */ div .news-inline { clear: both; margin: 50px auto 80px auto;} .news-inline h2{font-family: 'Oswald', sans-serif;text-transform: uppercase;} .news-inline .carousel-layout { margin: 0 auto; position: relative; padding: 0 35px;} .news-inline .carousel-container:before {content: "";display: block;position: absolute;top: 0;bottom: 0;right: 0; z-index: 5; -webkit-box-shadow: inset -50px 0px 40px 0px rgba(255,255,255,1);-moz-box-shadow: inset -50px 0px 40px 0px rgba(255,255,255,1);box-shadow: inset -50px 0px 40px 0px rgba(255,255,255,1); height: 250px; width: 70px;} .news-inline .carousel-container:after {content: "";display: block;position: absolute;top: 0;bottom: 0;left: 0; z-index: 5; -webkit-box-shadow: inset 50px 0px 40px 0px rgba(255,255,255,1);-moz-box-shadow: inset 50px 0px 40px 0px rgba(255,255,255,1);box-shadow: inset 50px 0px 40px 0px rgba(255,255,255,1); height: 250px; width: 70px;} .news-inline .carousel-right { position: absolute; top: 140px; right: 0; z-index: 10; } .news-inline .carousel-left { position: absolute; top: 140px; left: 0; z-index: 10; } .news-inline .carousel-container { padding: 50px 0 0 0; overflow: hidden; } .news-inline .carousel-items { width: 100000px; margin: 0; padding: 0; } .news-inline .carousel-items li { list-style: none; margin: 0; padding: 0 15px 0 15px; float: left; max-width: 450px;background-image: none;} .news-inline .carousel-items li .news-image a { display: inline; width: 100%; } .news-inline .carousel-items li .news-image {display: inline; margin: 0 20px 0 0; border-radius: 50%; width: 97px; height: 97px; float: left;} .news-inline .carousel-items li .news-image img { display: inline; margin: -3px; border-radius: 50%; width: 100px; height: 100px; float: left;} .news-inline .carousel-items li .news-date {display: inline; margin: 0 20px 0 0; border-radius: 50%; width: 97px; height: 97px; float: left;border: 2px solid #33c572;} .news-inline .carousel-items li .news-date p{ color: #006a52; font-family: 'Oswald', sans-serif;font-weight: 400;font-size:2.8rem;letter-spacing: 1px;margin: 32px 0 0; line-height: 1; width: 93px; text-align: center; } .news-inline .carousel-items li .news-text { float: left; width: calc(100% - 117px); } .news-inline .carousel-items li .news-title { font-size: 1.8rem; margin: 0 0 20px 0;font-weight: 400; } .news-inline .carousel-items li .news-desc { margin: 0 0 20px 0; opacity:0.8;font-size:1.4rem;color:#22372b;line-height: 1.5; } .news-inline .carousel-items li .news-more {display: inline-block;} .news-inline .carousel-items li .news-more .more { font-size:1.3rem;color:#006a52;text-transform: uppercase;font-weight: 600;float:left;margin-left: 0;} .news-inline .carousel-items li .timestamp {opacity:0.7;font-size:1.1rem;color:#22372b;text-align:right;} .news-inline .carousel-items li hr {margin: 20px 0 0 0;} .news-inline .carousel-items li hr:before {display:none;} .news-inline .col-md-12 {margin: 0 auto 50px;} .news-inline .asset-skid-carousel { margin: 0 0 30px 0; } @media (max-width: 767px) { /*.news-inline .carousel-right, .news-inline .carousel-container:before {display:none;}*/ .news-inline .carousel-layout { padding: 0; } .news-inline .carousel-container {padding: 0 0 50px 0;} .news-inline .carousel-container:before { content: none; } .news-inline .carousel-container:after { content: none; } .news-inline .carousel-items {width: 100%; } .news-inline .carousel-items li { margin: 20px 0; max-width: 100%; width: 100%; float: none; padding: 0; } .news-inline .carousel-items li:after { content: ""; display: block; clear: both; } .news-inline .carousel-items li.mobile-hidden { display: none; } .news-inline .carousel-items li hr { margin: 20px 0 0 0;} } /* ==================================================================================================== */ /* Column List (similiar to news-inline but without carousel */ /* ==================================================================================================== */ .column-list { clear: both; padding-bottom: 50px; } .column-list .image { margin: 0 20px 0 0; border-radius: 50%; width: 97px; height: 97px; float: left;} .column-list .image a { display: block; width: 100%; } .column-list .image img { display: block; margin: 0; border-radius: 50%; width: 100px; height: 100px; float: left;} .column-list .date {display: inline; margin: 0 20px 0 0; border-radius: 50%; width: 97px; height: 97px; float: left;border: 2px solid #33c572;} .column-list .date p{ color: #006a52; font-family: 'Oswald', sans-serif;font-weight: 400;font-size:2.8rem;letter-spacing: 1px;margin: 32px 0 0; line-height: 1; width: 93px; text-align: center; } .column-list .text { float: left; width: calc(100% - 117px); } .column-list .title { font-size: 1.8rem; margin: 0 0 20px 0;font-weight: 400; } .column-list .desc { margin: 0 0 20px 0; opacity:0.8;font-size:1.4rem;color:#22372b;line-height: 1.5; } .column-list .more-link .more { font-size:1.3rem;color:#006a52;text-transform: uppercase;font-weight: 600;margin-left: 0;} .column-list .timestamp {opacity:0.7;font-size:1.1rem;color:#22372b;text-align:right;} .column-list .row hr {margin: 20px 0 0 0;} .column-list .row hr:before {display:none;} .column-list .row div[class*="col-"] { margin-bottom: 10px; } .column-list .margin { margin-top: 40px } /* ==================================================================================================== */ /* Snippet Contact Info that goes with the Form */ /* ==================================================================================================== */ .contact {background: #f0f3f5 !important; } .contact .contact-info, .contact .contact-info a {background-color: #dbe2e9;color:#21372b;} .contact .contact-info h5 {color: #21372b;} .contact input.form-control, .contact textarea.form-control, .contact #id_dropdown.form-control{border:none;} .contact .contact-info {padding: 20px;max-width: 400px;float: right;margin-top: -20px;} @media (max-width: 991px) { .contact .contact-info {padding: 20px;max-width: none;float: none;} } /* ==================================================================================================== */ /* Asset - 海角论坛Facts */ /* ==================================================================================================== */ .asset-skidmore-facts { clear: both; padding: 70px 0; background-color: #f0f3f5; } .asset-skidmore-facts .title { text-align: center; font-family: 'Volkhov', serif; font-size: 48px; line-height: 48px; color: #22372b; margin: 0 0 30px 0; } .asset-skidmore-facts .more-facts { margin: 60px 0 0 0; } /*New Design*/ .snippet-facts { padding: 20px 0; margin: 0 auto 30px;max-width: 300px;} .snippet-facts .facts-number {font-family: 'Oswald', sans-serif; font-size: 4.8rem; line-height: 4.8rem; color: #006A52;text-align: center;font-weight: 400;border-bottom: 3px solid #33c572;padding: 0 0 10px 0; } .snippet-facts .facts-number.size-small { font-size: 3.4rem; line-height: 3.4rem; } .snippet-facts .facts-desc {font-size: 2rem;line-height: 1.2;text-align: center;font-weight: 300;margin: 15px 0 0 0;} .snippet-facts.horizontal {padding: 10px 0;margin: 0;max-width: none;flex-direction: row!important;display: flex;} .snippet-facts.horizontal .facts-number {border-top: 5px solid #33c572;border-bottom: none;padding: 10px;display: inline-block;} .snippet-facts.horizontal .facts-desc{padding: 10px 10px 0px 10px; margin: 0;border-top: 5px solid #DBE2E9;text-align: left;width: 100%;} @media (max-width: 991px) { .snippet-facts{padding: 10px 0;margin: 0;max-width: none;flex-direction: row!important;display: flex;} .snippet-facts .facts-number {border-top: 5px solid #33c572;border-bottom: none;padding: 10px;display: inline-block;} .snippet-facts .facts-desc{padding: 10px 10px 0px 10px; margin: 0;border-top: 5px solid #DBE2E9;text-align: left;width: 100%;} } /*Old Design*/ /*.snippet-facts { background:#ffffff; box-shadow:0 2px 4px 0 rgba(82,97,115,0.20); padding: 35px 0; margin: 0 0 20px 0; }*/ /*.snippet-facts .facts-number { font-family: 'Volkhov', serif; font-size: 50px; line-height: 50px; color: #006A52; text-align: center; }*/ /*.snippet-facts .facts-desc {font-size: 1.6rem; line-height: 2.0rem; text-align: center; font-weight: 600; color: #33c572; margin: 15px 0 0 0; }*/ /* ==================================================================================================== */ /* Asset - Student to Student */ /* ==================================================================================================== */ .asset-s2s { clear: both; position: relative; overflow: hidden;display: flex; } .asset-s2s .green-line { border-bottom: 2px solid #33c572; position: absolute; top: 0; left: -10%; width: 110%; } .asset-s2s .green-box { float: left; width: 100%; background-color: #006A52; height: 450px; padding: 30px; position: relative; } .asset-s2s .green-box .title { color: #FFFFFF; font-family: 'Volkhov', serif; font-size: 4rem; line-height: 1; margin: 0 0 25px 0; } .asset-s2s .green-box .desc { color: #FFFFFF; font-size: 1.6rem; line-height: 2.1rem; } .asset-s2s .persona { width:100%; margin: 50px 0 30px 0; } .asset-s2s .persona:after { content: " "; display: block; clear: both; } .asset-s2s .persona.persona-hide { display: none; } .asset-s2s .persona .image { float: left; margin: 0 30px 0 0; } .asset-s2s .persona .image .large-image { position: relative; width: 225px; border: 3px solid #33c572; border-radius: 50%; height: 220px; margin: 0 0 20px 0;} .asset-s2s .persona .image .large-image .active {border: 3px solid #33c572; border-radius: 50%;} .asset-s2s .persona .image .large-image img { clip-path: circle(100px at center); width: 200px; margin: -30px 0 0 10px; } .asset-s2s .persona .image .large-image .year { background-color: #33c572; border-radius: 50%; width: 60px; height: 60px; color: #FFFFFF; font-family: 'Oswald', sans-serif; font-size: 2.3rem; line-height: 6.0rem; text-align: center; position: absolute; top: 5px;} .asset-s2s .persona .text { float: left; width: calc(100% - 255px); } .asset-s2s .small-image {margin: 0 0 30px 0; display: block; clear: both; width: 100%;} .asset-s2s .small-image ul { margin: 0; padding: 0; list-style: none; text-align: center;} .asset-s2s .small-image ul li {background-image: none; padding:0; display: inline-block; width: 60px; height: 60px; float: left; position: relative; overflow: hidden;border-radius: 50%;margin: 5px;} .asset-s2s .small-image ul li a { display: block; } .asset-s2s .small-image ul li img { display: inline; margin: 0 auto;} .asset-s2s .small-image ul li.active {border: 2px solid #33c572; } .asset-s2s .persona .text {margin: 0 0 30px 0;} @media (max-width: 991px) { .asset-s2s .persona .image .large-image {float:none;margin:0 auto; width: 225px;} .asset-s2s .persona .image, .asset-s2s .persona .text {margin: 10px 20px 20px 0;width: 100%;} .asset-s2s .green-box {height: auto;} .asset-s2s .green-box .desc {max-width: none;} .asset-s2s .green-line {left: 20%;width: 80%;} .asset-s2s .persona {margin: 10px 0 0 0;} .asset-s2s .green-box .title { margin: 10px 0 25px 0; } } /* ==================================================================================================== */ /* Asset - Recent News */ /* ==================================================================================================== */ .asset-recent-news { clear: both; margin: 0 0 70px 0; } .asset-recent-news .carousel-layout { max-width: 1089px; margin: 0 auto; position: relative; z-index: 10; } .asset-recent-news .carousel-left { position: absolute; top: 275px; left: 0; cursor: pointer; } .asset-recent-news .carousel-right { position: absolute; top: 275px; right: 0; cursor: pointer; } .asset-recent-news .carousel-container { padding: 30px 0 30px 15px; margin: -125px 41px 0 40px;; overflow: hidden; background-color: #FFFFFF; } .asset-recent-news .carousel-items { width: 100000px; margin: 0; padding: 0; } .asset-recent-news .carousel-items li { list-style: none; margin: 0; padding: 0 15px 0 15px; float: left; background-image: none; /*width: 33.333%; max-width: 326.666px;*/ } .asset-recent-news .carousel-items li .news-image img { display: block; width: 100%; margin: 0 0 20px 0; } .asset-recent-news .carousel-items li .news-image a { display: block; width: 100%; } .asset-recent-news .carousel-items li .news-text { min-height: 240px; } .asset-recent-news .carousel-items li .news-title { font-weight: 700; font-size: 26px; line-height: 32px; margin: 0 0 20px 0; } .asset-recent-news .carousel-items li .news-desc { margin: 0 0 20px 0; font-size: 1.4rem; line-height: 2.0rem; } .asset-recent-news .carousel-breadcrumbs { clear: both; } .asset-recent-news .carousel-breadcrumbs ul { margin: 0; padding: 0; text-align: center; } .asset-recent-news .carousel-breadcrumbs ul li { margin: 0; padding: 0 10px; list-style: none; display: inline-block; } .asset-recent-news .carousel-breadcrumbs ul li a { display: block; background-color: #d8d8d8; width: 10px; height: 10px; border-radius: 5px; } .asset-recent-news .carousel-breadcrumbs ul li a.active { background-color: #33c572; } @media (max-width: 1199px) { .asset-recent-news .carousel-layout { max-width: 683px; } } @media (max-width: 991px) { .asset-recent-news .news-items li { max-width: 277.666px; } .asset-recent-news .carousel-items li .news-title { font-size: 2.0rem; line-height: 1.2; } .asset-recent-news .carousel-items li .news-more .btn { min-width: 2px; max-width: 100%; width: 100%; } .asset-recent-news .news-controls { max-width: 275px; margin-top: -60px; } .asset-recent-news .news-controls .news-container { padding: 15px 0px; } .asset-recent-news .news-controls .news-left { left: -20px; top: 240px; } .asset-recent-news .news-controls .news-left img { max-width: 30px; } .asset-recent-news .news-controls .news-right { right: -20px; top: 240px; } .asset-recent-news .news-controls .news-right img { max-width: 30px; } .asset-recent-news .carousel-container {margin: 0 40px 0 40px;} .asset-recent-news .carousel-items li .news-text { min-height: 1px; } } /* ==================================================================================================== */ /* Video List */ /* ==================================================================================================== */ .video-list { clear: both; background-image: url("/_images/green-background.jpg"); background-repeat: no-repeat; background-size: 100% 350px; padding: 50px 0 50px 0; color: #FFFFFF; } .video-list .video-header { } .video-list .video-header hr { margin-top: 10px; } .video-list ul { margin: 0; padding: 0; list-style: none; } .video-list ul li { margin: 0; padding: 0; list-style: none; background-image: none; float: left; width: 32.33%; } .video-list ul li:first-child { margin-left: 0; margin-right: 1.5%; width: 32.33%; } .video-list ul li:last-child { margin-left: 1.5%; margin-right: 0; width: 32.33%; } .video-list a { display: block; position: relative; background-color: rgba(0,0,0,0.3); } .video-list a img { display: block; max-width: 100%; width: 100%; } .video-list a .video-title { position: absolute; bottom: 0; font-family: 'Oswald', sans-serif; font-size: 2.8rem; line-height: 3.2rem; color: #FFFFFF; padding: 15px; } .video-list a .video-overlay { width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: background-color 0.5s ease; } .video-list a:hover .video-overlay { background-color: rgba(0,0,0,0); transition: background-color 0.5s ease; } .video-list a .video-play { position: absolute; left: calc(50% - 27px); top: calc(50% - 27px); width: 54px; height: 54px; } .video-list a.btn { display: inline-block; } @media (max-width: 991px) { .video-list { padding-top: 40px; background-size: 100% 350px; } .video-list ul li a .video-title { padding: 15px; font-size: 2.4rem; line-height: 2.8rem; } .video-list a img { width: 100%; } .video-list .col-md-4 { margin-bottom: 30px; } } /* ==================================================================================================== */ /* Asset - Photo Gallery Carousel */ /* ==================================================================================================== */ .photo-gallery-slider { clear: both; } .photo-gallery-slider .carousel-inner { max-height: inherit; height: 100%; } .photo-gallery-slider .carousel-inner .item { max-height: inherit; height: 100%; overflow: hidden; } .photo-gallery-slider .carousel-inner .item img { width: 100%; height: auto; } .photo-gallery-slider .carousel-indicators .active {background-color: #33c572; border: 1px solid #33c572;} .photo-gallery-slider .carousel-photo-tint:before {position: absolute;content: " ";top: 0;left: 0;width: 100%;height: 100%;display: block;z-index: 0;background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%);} .photo-gallery-slider .carousel-photo-tint .caption {color: #fff; width: 100%/*50%*/;padding: 0 50px; margin-bottom: 30px;} .photo-gallery-slider .carousel-photo-tint .caption .title { font-size: 3rem; margin-bottom: 10px; font-weight: 400; } .photo-gallery-slider .carousel-indicators {position: absolute; bottom: 0;left: 50px; text-align: left; width: 90%; margin-left: 0; margin-bottom: 10px;} /*.photo-gallery-slider .carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {width: 100%!important; height: 100%;}*/ .carousel-fade .carousel-inner .item { transition-property: opacity; } .carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { opacity: 0; } .carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; transform: translate3d(0, 0, 0); } .carousel-fade .carousel-control { z-index: 2; } /* ==================================================================================================== */ /* Asset - Photo Gallery Filmstrip */ /* ==================================================================================================== */ .photo-gallery-filmstrip { clear: both; position: relative; } .photo-gallery-filmstrip .carousel-container { padding: 0 0 0 0; overflow: hidden; max-height: 500px; } .photo-gallery-filmstrip .carousel-right { position: absolute; top: 0; right: 10px; left: auto; z-index: 10; width: 60px; height: 100%; /* background: linear-gradient(to left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,0) 100%); */ } .photo-gallery-filmstrip .carousel-right a { display: block; position: absolute; top: calc(50% - 20px); width: 43px; height: 40px; right: 10px; border-bottom: none;width:60px;height:50px;left:28px;padding:5px 0 5px 10px;border-left:0;background:linear-gradient(to right,rgba(240,243,245,.15) 0,rgba(240,243,245,.15) 5%,rgba(240,243,245,1) 20%,rgba(240,243,245,1) 100%);border-radius:0 3px 3px 0;box-shadow:1px 0 3px #919495} .photo-gallery-filmstrip .carousel-left { position: absolute; top: 0; left: 0; z-index: 10; width: 60px ;height: 100%; border-bottom: none; /*background: linear-gradient(to right, rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 100%);*/ } .photo-gallery-filmstrip .carousel-left a { display: block; position: absolute; top: calc(50% - 20px); width: 43px; height: 40px; left: 10px; border-bottom: none;width:60px;height:50px;left:-18px;padding:5px 5px 5px 10px;border-right:0;background:linear-gradient(to right,rgba(240,243,245,1) 0,rgba(240,243,245,1) 80%,rgba(240,243,245,.15) 95%,rgba(240,243,245,.15) 100%);border-radius:3px 0 0 3px;box-shadow:-1px 0 3px #919495} .photo-gallery-filmstrip .carousel-items { width: 100000px; margin: 0; padding: 0; max-height: inherit; } .photo-gallery-filmstrip .carousel-items li { list-style: none; margin: 0; padding: 0 5px 0 0; float: left; background-image: none; max-height: inherit; } .photo-gallery-filmstrip .carousel-items li a { display: block; max-height: inherit; } .photo-gallery-filmstrip .carousel-items li img { max-height: inherit; } @media (max-width: 991px) { .photo-gallery-filmstrip .carousel-container { } .photo-gallery-filmstrip .carousel-items li { padding: 0; } .photo-gallery-filmstrip .carousel-items li img { display: block; margin: 0 auto 0; } } /* ==================================================================================================== */ /* Asset - Photo Gallery Columns */ /* ==================================================================================================== */ .photo-gallery-column img { width: 100%; padding:5px 0; position: relative; } .photo-gallery-column.gallery6 {-webkit-column-count: 6; /* Chrome, Safari, Opera */-moz-column-count: 6; /* Firefox */column-count: 6;column-gap: 10px;} .photo-gallery-column.gallery5 {-webkit-column-count: 5; /* Chrome, Safari, Opera */-moz-column-count: 5; /* Firefox */column-count: 5;column-gap: 10px;} .photo-gallery-column.gallery4 {-webkit-column-count: 4; /* Chrome, Safari, Opera */-moz-column-count: 4; /* Firefox */column-count: 4;column-gap: 10px;} .photo-gallery-column.gallery3 {-webkit-column-count: 3; /* Chrome, Safari, Opera */-moz-column-count: 3; /* Firefox */column-count: 3;column-gap: 10px;} .photo-gallery-column.gallery2 {-webkit-column-count: 2; /* Chrome, Safari, Opera */-moz-column-count: 2; /* Firefox */column-count: 2;column-gap: 10px;} @media (max-width: 991px) { .photo-gallery-column.gallery6, .photo-gallery-column.gallery5, .photo-gallery-column.gallery4, .photo-gallery-column.gallery3 {-webkit-column-count: 2; /* Chrome, Safari, Opera */-moz-column-count: 2; /* Firefox */column-count: 2;} } /* ================================================== */ /* Asset Filter (News/Events) */ /* ================================================== */ .item-filter { clear: both; padding: 50px 0 0 0; } .item-filter hr { margin-top: 10px; } .item-filter .filter-titles { margin: 0; padding: 0; list-style: none; } .item-filter .filter-titles li { margin: 0 30px 0 0; padding: 0; display: inline-block; font-family: 'Oswald', sans-serif; font-size: 2.4rem; line-height: 2.4rem; text-transform: uppercase; color: #d8d8d8; background-image: none; } .item-filter .filter-titles li a { color: #d8d8d8; } .item-filter .filter-titles li.active a { color: #22372b; } .item-filter .filter-tags { margin: 30px 0 40px 0; padding: 0; list-style: none; } .item-filter .filter-tags li { display: inline-block; margin: 0 5px 10px 0; padding: 0; background-image: none;} .item-filter .filter-tags li a { background-color: #38ad25; display: block; color: #FFFFFF; text-transform: uppercase; font-size: 1.4rem; letter-spacing: 1.8px; text-align: center; font-weight: 500; border-radius: 100px; padding: 10px 19px; transition: background-color 0.5s ease; border-bottom: none; } .item-filter .filter-tags li a:hover { text-decoration: none; background-color: #006A52; color: #FFFFFF; transition: background-color 0.5s ease; } .item-filter .filter-tags li.active a { background-color: #006A52; } @media (max-width: 991px) { .item-filter .filter-tags li a { padding: 10px 25px; } } /* ==================================================================================================== */ /* Asset - Vertical Lists (News/Events) /* ==================================================================================================== */ .item-list { clear: both; padding: 0 0 0 0; /*max-width: 440px;*/ width: 100%; margin: 0 auto; } .item-list .items a { text-decoration: none; } .item-list.max-width { max-width: 440px; } .item-list.item-list-left { margin: 0 auto 0 140px; } .item-list.item-list-right { margin: 0 140px 0 auto; } .item-list .item-header { margin: 0 0 35px 0; } .item-list .item-header hr { } .item-list .items { display: flex; flex-direction: row!important; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .item-list .items li { margin: 0 0 60px 0; padding: 0; list-style: none; background-image: none; } .item-list .items li.columns-2 { width: 48%; margin-left: 1%; margin-right: 1%; float: left; } .item-list .items li.columns-2 .item-text { border-bottom: none; } .item-list .items li .item-image { float: left; width: 100px; margin: 0 40px 0 0;} .item-list .items li .item-image a { display: block; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; position: relative; z-index: 10; margin: 0 auto; } .item-list .items li .item-image img { display: block; width: 100px; } .item-list .items li .item-image.medium { width: 150px; } .item-list .items li .item-image.medium a { width: 150px; height: 150px; } .item-list .items li .item-image.medium img { width: 150px; } .item-list .items li .item-date { float: left; width: 100px; margin: 0 40px 0 0; line-height: 100px; font-family: 'Oswald', sans-serif; font-size: 2.8rem; color: #006A52; } .item-list .items li .item-date .circle { border: 2px solid #33c572; width: 100%; height: 100%; border-radius: 50%; text-align: center; } .item-list .items li .item-text { float: left; width: calc(100% - 140px); padding: 0 0 0 0; border-bottom: 1px solid #d8d8d8; padding-bottom: 15px; /*max-width: 300px;*/ } .item-list .items li .item-text.medium { width: calc(100% - 190px); } .item-list .items li .item-text.no-image { width: 100%; float: none; } .item-list .items li .item-text .item-title { font-size: 1.8rem; line-height: 1.3; color: #22372b; font-weight: 600; margin: 0 0 0 0; } .item-list .items li .item-text .item-title a { color: #22372b; } .item-list .items li .item-text .item-author { font-size: 1.3rem; font-weight: 600; color: #006A52; } .item-list .items li .item-text .item-desc { color: #22372b; opacity: 0.8; margin: 10px 0 10px 0; font-size: 1.4rem; line-height: 2.0rem; } .item-list .items li .item-text .item-extra:after { content: " "; display: block; clear: both; } .item-list .items li .item-text .item-more { font-size: 1.3rem; line-height: 1.9rem; text-transform: uppercase; color: #006A52; font-weight: 500; float: left; width: 50%; } .item-list .items li .item-text .item-timestamp { font-size: 1.1rem; color: #22372b; opacity: 0.7; text-align: right; float: left; width: 50%; } .item-list .items li .item-text .item-extra.item-full .item-more { width: 100%; } .item-list.item-list-large { max-width: 565px; padding: 0 0 50px 0; } .item-list.item-list-large .items li { border-bottom: 1px solid #d8d8d8; padding-bottom: 50px; margin-bottom: 50px; background-image: none;} .item-list.item-list-large .items li .item-image { width: 190px; margin: 0 45px 0 0; } .item-list.item-list-large .items li .item-image a { width: 175px; height: 175px; } .item-list.item-list-large .items li .item-image img { width: 175px; height: 175px; } .item-list.item-list-large .items li .item-text { width: calc(100% - 235px); max-width: 330px; border-bottom: none; } .item-list.item-list-large .items li .item-text .item-title { font-size: 2.4rem; line-height: 2.8rem; } @media (max-width: 1199px) { .item-list.item-list-left { margin: 0 auto 0 auto; } .item-list.item-list-right { margin: 0 auto 0 auto; } } @media (max-width: 767px) { .item-list { width: 100%; max-width: 100%; padding: 0 15px; } .item-list .items li .item-image, .item-list .items li .item-date { margin: 0 20px 0 0; width: 80px; height: 80px; line-height: 80px; } .item-list .items li.columns-2 { width: 100%; float: none; margin-left: 0; margin-right: 0; } /* Medium Size Image */ .item-list .items li .item-image.medium { float: none; width: 100%; height: auto; margin-bottom: 10px; } .item-list .items li .item-text.medium { float: none; width: 100%; } .item-list .items li .item-image { float: none; width: 100%; height: auto; margin-bottom: 10px; } .item-list .items li .item-text { float: none; width: 100%; } } @media (max-width: 767px) { .carousel-photo-tint .caption {width: 100%;} } /* ==================================================================================================== */ /* Reunion Home Stylesheet */ /* All CSS related to custom design of the Reunion home page. */ /* Date Created: 2018.03.26 */ /* Author: Communications Department */ /* ==================================================================================================== */ .reunion-home { clear: both; } .reunion-home a:after { display: none; } .reunion-home .reunion-slideshow { clear: both; margin: 0 0 30px 0; } .reunion-home .reunion-slideshow:after { content: " "; display: block; clear: both; } .reunion-home .reunion-slideshow ul.reunion-slideshow-images { float: left; width: 70%; display: block; position: relative; margin: 0; padding: 0; } .reunion-home .reunion-slideshow ul.reunion-slideshow-images li { margin: 0; padding: 0; list-style: none; background-image: none; display: none; } .reunion-home .reunion-slideshow ul.reunion-slideshow-images li a { display: block; } .reunion-home .reunion-slideshow ul.reunion-slideshow-images li img { display: block; position: relative; z-index: 10; width: 100%; } .reunion-home .reunion-slideshow .reunion-slideshow-text { float: left; width: 30%; color: #fff; font-size: 21px; position: relative; z-index: 20; background-color: #FFF; } .reunion-home .reunion-slideshow .reunion-slideshow-text li { border-bottom: 1px solid #fff; position: relative; z-index: 10; background-color: #0F705C; padding: 0; margin: 0; list-style: none; background-image: none; } .reunion-home .reunion-slideshow .reunion-slideshow-text li:last-child { border-bottom: none; } .reunion-home .reunion-slideshow .reunion-slideshow-text li .date { color: rgba(255,255,255,0.7); font-size: 15px; font-family:Verdana, Geneva, sans-serif;} .reunion-home .reunion-slideshow .reunion-slideshow-text li a { color: rgba(255,255,255, 1.0)!important; text-decoration: none; display: block; padding: 15px; min-height: 75.3px; } .reunion-home .reunion-slideshow .reunion-slideshow-text li i { display: none; } .reunion-home .reunion-slideshow .reunion-slideshow-text #slide5_txt { background-color: #ACCF52; background-image: url("/reunion/images/reunion-background-register.png"); background-repeat: no-repeat; background-position: 105px -2px; line-height: 45px; } .reunion-home .reunion-slideshow .reunion-slideshow-images li.active { display: block; } .reunion-home .reunion-slideshow .reunion-slideshow-text li.active { background-color: #378877; } .reunion-home .reunion-slideshow .reunion-slideshow-text li.active i { height: 83px; width: 31px; background-image: url("/reunion/images/reunion-slideshow-arrow.png"); background-repeat: no-repeat; display: block; position: absolute; top: 0; left: -27px; display: block; } .reunion-home .reunion-slideshow .reunion-slideshow-text li.active#slide5_txt { background-color: #ACCF52; } .reunion-home .reunion-slideshow .reunion-slideshow-text li.active#slide5_txt i { background-image: url("/reunion/images/reunion-slideshow-arrow-yellow.png"); } @media (max-width: 1370px) { .reunion-home .reunion-slideshow ul.reunion-slideshow-images { float: none; width: 100%; } .reunion-home .reunion-slideshow ul.reunion-slideshow-images li { width: 100%; } .reunion-home .reunion-slideshow .reunion-slideshow-text { float: none; width: 100%; } .reunion-home .reunion-slideshow .reunion-slideshow-text { text-align: center; font-size: 1.6rem; } .reunion-home .reunion-slideshow .reunion-slideshow-text:after { content: " "; display: block; clear: both; } .reunion-home .reunion-slideshow .reunion-slideshow-text #slide5_txt { text-align: left; } .reunion-home .reunion-slideshow .reunion-slideshow-text li { float: left; width: 20%; border-right: 1px solid #fff; height: 100px; } .reunion-home .reunion-slideshow .reunion-slideshow-text li:last-child { border-right: none; } .reunion-home .reunion-slideshow .reunion-slideshow-text li.active i { display: none; } } @media (max-width: 767px) { .reunion-home .reunion-slideshow .reunion-slideshow-text li { width: 100%; float: none; height: auto; } .reunion-home .reunion-slideshow .reunion-slideshow-text #slide5_txt { text-align: center; background-position: right; } } .reunion-home .reunion-slideshow.six .reunion-slideshow-text li a { font-size: 14px; min-height: 76.9px; } .reunion-home .reunion-slideshow.six .reunion-slideshow-text #slide5_txt { border-bottom: 1px solid #fff; position: relative; z-index: 10; background-color: #0F705C; padding: 0; margin: 0; list-style: none; background-image: none; line-height: 1.5; } .reunion-home .reunion-slideshow.six .reunion-slideshow-text li.active#slide5_txt { background-color: #378877 } .reunion-home .reunion-slideshow.six .reunion-slideshow-text li.active#slide5_txt i { background-image: url("/reunion/images/reunion-slideshow-arrow.png"); } /* ==================================================================================================== */ /* ========== Civic Engagement ========== */ /* ==================================================================================================== */ .tt-civic-engagement { clear: both; padding: 1px; width: 389px; margin: 0 auto; } .tt-civic-engagement img { display: block; } .tt-civic-engagement a { display: block; } .tt-civic-engagement .r1i1 { float: left; width: 256px; height: 127px; padding: 1px; } .tt-civic-engagement .r1i2 { float: left; width: 127px; height: 127px; padding: 1px; } .tt-civic-engagement .r2i1 { float: left; width: 127px; height: 127px; padding: 1px; } .tt-civic-engagement .r2i2 { float: left; width: 256px; height: 127px; padding: 1px; } .tt-civic-engagement .r3i1 { float: left; width: 256px; height: 127px; padding: 1px; } .tt-civic-engagement .r3i2 { float: left; width: 127px; height: 127px; padding: 1px; } .tt-civic-engagement .r4i1 { float: left; width: 127px; height: 127px; padding: 1px; } .tt-civic-engagement .r4i2 { float: left; width: 256px; height: 127px; padding: 1px; } .mobile { display: none; } @media (max-width: 768px) { .mobile { display: block; } } /* ==================================================================================================== */ /* ========== Amcharts ========== */ /* ==================================================================================================== */ div.height200 div.amcharts{height:200px !important;} div.height325 div.amcharts{height:325px !important;} /* ==================================================================================================== */ /* Presidents Society */ /* ==================================================================================================== */ .we-matter-profiles { margin: 0; padding: 0; list-style: none; } .we-matter-profiles li { float: left; width: 18%; margin: 0 1% 15px 1%; padding: 0; list-style: none; position: relative; display: block; height: 231px; } .we-matter-profiles li .name { display: block; background-color: rgba(0, 103, 82, 1); color: #fff; position: relative; z-index: 15; height: 231px; } .we-matter-profiles li .name.color1 { background-color: rgba(0, 103, 82, 1); } .we-matter-profiles li .name.color2 { background-color: #338575; } .we-matter-profiles li .name.color3 { background-color: #66a497; } .we-matter-profiles li .name.color4 { background-color: #7fb3a8; } .we-matter-profiles li .name span { display: block; padding: 9px; } .we-matter-profiles li a { width: 100%; height: 100%; position: absolute; z-index: 10; top: 0; } .profile-text { padding: 20px; } .profile-text .img { border: 3px solid rgba(0, 103, 82, 0.8); display: block; margin: 0 0 0 10px; } .profile-text .img img { display: block; } .we-matter-profiles li:hover .name { display: none; } @media screen and (max-width: 500px) { .we-matter-profiles li { width: 250px; margin: 0 auto 15px auto; float: none; clear: both; } } /* ==================================================================================================== */ /* Enroll Video */ /* ==================================================================================================== */ #enrollVideo { background-image: url("/reunion/kiosk/images/background.png"); background-repeat: repeat; border-bottom: 1px solid rgba(15,112,92,0.36); border-top: 1px solid rgba(15,112,92,0.36); height: 391px; } #enrollVideo .layout { max-width: 1131px; margin: 0 auto; } #enrollVideo .linksLeft { float: left; width: 24.13%; max-width: 280px; height: 390px; background-image: url("/reunion/kiosk/images/nav-background-left.png"); background-repeat: no-repeat; background-position: right 47px; padding: 70px 0 0 0; } #enrollVideo .linksLeft li { width: 100%; max-width: 280px; height: 69px; background-image: url("/reunion/kiosk/images/nav-li-left.png"); background-repeat: no-repeat; margin: 0 0 23px 0; line-height: 58px; text-align: right; padding: 0 5px 0 0; } #enrollVideo .linksLeft li a { font-family: 'Oswald', sans-serif; font-size: 2.5rem; line-height: 80px; text-transform: uppercase; letter-spacing: 1px; } #enrollVideo .video { float: left; width: 570px; /*51.74%;*/ max-width: 600px; height: 390px; background-color: #F0F0E1; padding: 15px; } #enrollVideo .video .frame { height: 360px; overflow: hidden; } #enrollVideo .video .frame .storify { height: 360px; } #enrollVideo .video .frame iframe { height: 360px; } #enrollVideo .video.desktop { display: block; } #enrollVideo .video.mobile { display: none; } #enrollVideo .linksRight { float: left; width: 24.13%; max-width: 280px; height: 390px; background-image: url("/reunion/kiosk/images/nav-background-right.png"); background-repeat: no-repeat; background-position: left 47px; padding: 70px 0 0 0; } #enrollVideo .linksRight li { width: 100%; max-width: 280px; height: 69px; background-image: url("/reunion/kiosk/images/nav-li-right.png"); background-repeat: no-repeat; margin: 0 0 23px 0; line-height: 58px; text-align: left; padding: 0 0 0 5px; } #enrollVideo .linksRight li.athletics { background-image: url("/reunion/kiosk/images/nav-li-right-athletics.png"); } #enrollVideo .linksRight li a { font-family: 'Oswald', sans-serif; font-size: 2.5rem; line-height: 80px; text-transform: uppercase; letter-spacing: 1px; } @media (max-width: 1130px) { /* ===== Video ===== */ #enrollVideo .linksLeft li { background-image: none; background-color: #F0F0E1; height: 54px; margin-bottom: 38px; } #enrollVideo .linksRight li { background-image: none; background-color: #F0F0E1; height: 54px; margin-bottom: 38px; } } @media (max-width: 1070px) { /* ===== Video ===== */ #enrollVideo .linksLeft li a { font-size: 34px; } #enrollVideo .linksRight li a { font-size: 34px; } } @media (max-width: 975px) { #enrollVideo { height: 360px; } #enrollVideo .video { width: 550px; height: 359px; } #enrollVideo .video .frame { height: 329px; } #enrollVideo .video .frame iframe { height: 329px; } #enrollVideo .linksLeft { height: 359px; background-position: right 32px; padding-top: 60px; } #enrollVideo .linksRight { height: 359px; background-position: left 32px; padding-top: 60px; } } @media (max-width: 930px) { #enrollVideo { height: 295px; } #enrollVideo .video { width: 450px; height: 294px; } #enrollVideo .video .frame { height: 264px; } #enrollVideo .video .frame iframe { height: 264px; } #enrollVideo .linksLeft { height: 294px; background-position: right 0; padding-top: 30px; } #enrollVideo .linksRight { height: 294px; background-position: left 0; padding-top: 30px; } } @media (max-width: 830px) { #enrollVideo { height: auto; } #enrollVideo .video.desktop { display: none; } #enrollVideo .video.mobile { display: block; width: 100%; float: none; margin: 0 auto; height: auto; } #enrollVideo .linksLeft { width: 100%!important; height: auto; float: none; margin: 20px auto 0 auto; background-image: url("/reunion/kiosk/images/nav-background-mobile.png"); background-position: center 0px; max-width: none; padding: 20px 0 1px 0; } #enrollVideo .linksLeft li { background-image: url("/reunion/kiosk/images/nav-li-mobile.png"); background-size: contain; max-width: 560px; margin: 0 auto 10px auto; text-align: center; padding: 0; background-color: transparent; height: 69px; } #enrollVideo .linksRight { width: 100%!important; height: auto; float: none; margin: 0 auto; background-image: url("/reunion/kiosk/images/nav-background-mobile.png"); background-position: center 0px; max-width: none; padding: 0px 0 1px 0; } #enrollVideo .linksRight li { background-image: url("/reunion/kiosk/images/nav-li-mobile.png"); background-size: contain; max-width: 560px; margin: 0 auto 10px auto; text-align: center; padding: 0; background-color: transparent; height: 69px; } #enrollVideo .linksRight li.athletics { background-image: url("/reunion/kiosk/images/nav-li-mobile-athletics.png"); } #enrollVideo .video .frame { height: 425px; overflow-y:scroll; } #enrollVideo .video .frame iframe { height: 425px; } } @media (max-width: 500px) { #enrollVideo .linksLeft { padding-top: 10px; } #enrollVideo .linksLeft li { background-image: none; background-color: #F0F0E1; height: 54px; } #enrollVideo .linksRight li { background-image: none; background-color: #F0F0E1; height: 54px; } #enrollVideo .linksRight li.athletics { background-image: none; } } /* ==================================================================================================== */ /* Hubspot News Signup*/ /* ==================================================================================================== */ /*.hubspot-signup { clear: both; height: 65px; }*/ .hubspot-signup p { display: inline-block; margin: 0; font-size: 1.3rem; line-height: 65px; letter-spacing: 1px; text-transform: uppercase; } .hubspot-signup .hbspt-form { display: inline-block; margin: 0; } .hubspot-signup .hbspt-form form { display: inline-block; margin: 0; } .hubspot-signup .hbspt-form form div { display: inline-block; } .hubspot-signup .hbspt-form form .hs_email { display: inline-block; margin: 0; } .hubspot-signup .hbspt-form form .hs_email label { display: none!important; margin: 0; } .hubspot-signup .hbspt-form form .hs_email .input { display: inline-block; margin: 0; } .hubspot-signup .hbspt-form form .hs_email .input input { display: inline-block; margin: 0; border-radius: 0; box-sizing: border-box; border: 2px solid #e7e7e7; height: 35px; padding: 6px 12px; font-size: 1.4rem; color: #555; background-color: #FFF; box-shadow: none; min-width: 300px; } .hubspot-signup .hbspt-form form .hs_subscribe_to_skidmore_news { display: none; margin: 0; } .hubspot-signup .hbspt-form form .hs_subscribe_to_life_at_skidmore_stories { display: none; } .hubspot-signup .hbspt-form form .hs-submit { display: inline-block; margin: 0; padding: 0; } .hubspot-signup .hbspt-form form .hs-submit .actions { display: inline-block; margin: 0; } .hubspot-signup .hbspt-form form .hs-submit .actions input { display: inline-block; margin: 0; background-color: #FFD100; color: #22372b; font-size: 1.3rem; text-decoration: none; padding: 10px 30px; text-transform: uppercase; font-family: 'Montserrat', sans-serif; line-height: 1.3rem; letter-spacing: 1.5px; min-width: 100px; border-radius: 0; font-weight: 700; text-align: center; border: 1px solid transparent; cursor: pointer; vertical-align: middle; text-shadow: none; box-shadow: none; background-image: none; } @media (max-width: 767px) { .hubspot-signup { height: auto; } }