/*** site-wide css for WSU Annual Report 2016 - 2017 ***/
.showcase-html-section {
box-shadow: none;
padding-top: 0;
}

.showcase-html-section h2 {
margin-bottom: 20px !important;
font-size: 1.9rem !important;
}

.report-hero {
background-image: url("https://www.weber.edu/wsuimages/annualreport/2017/main_campus.jpg");
background-size: cover;
position: relative;
background-position: center center;
}

.logo-box {
width: 100%;
text-align: center;
position: absolute;
top: 20%;
}

.welcome-logo {
display: block;
height: 36vh;
min-width: 200px;
min-height: 200px;
margin: 0 auto;
}

.rep-title {
text-transform: uppercase;
color: #FFF !important;
line-height: 2em !important;
padding-top: .5em;
}

.hero-btm-nav {
position: absolute;
bottom: 0;
width: 100%;
height: auto;
padding-bottom: 10px;
margin-bottom: 20px;
}

.hero-btm-nav > .columns {
text-align: center;
}

.hero-links {
text-decoration: none !important;
text-transform: uppercase !important;
color: #FFF !important;
font-size: 1.2em !important;
margin-top: 6px;
}

.hero-links:hover {
color: #c1a2d5 !important;
}

.hero-size {
position: relative;
}

.hero-title {
text-align: center;
position: absolute;
width: 100%;
}

.hero-title h1 {
color: #FFF;
font-size: 2rem !important;
}

.more-arrow {
}

.more-arrow i {
color: #FFF !important;
font-size: 37px !important;
line-height: unset;
display: inline-block;
padding: 0px 8px 0px 8px;
border: 1px solid #FFF;
border-radius: 50%;
width: 46px;
height: 46px;
}

.banner {
width: 100%;
}

.fullwidth {
width: 100%;
}

.offscreen {
position: absolute;
left: -10000px;
}

.hov-menu {
height: 500px;
background-color: #cdcdcd;
}

.contents-menu {
text-align: center !important;
padding-bottom: 20px;
}

h2.cont-men-headline {
font-size: 1.7rem;
margin: 40px 0 20px !important;
}

.menu-stack ul {
list-style-type: none;
font-size: .87rem;
line-height: 3em;
}

.menu-stack li {
-webkit-display: flex;
display: flex;
}

.menu-stack li a {
text-decoration: none;
color: #575047;
font-family: 'tradegothicltstd-boldext', sans-serif;
-webkit-flex: 1;
flex: 1;
}

.menu-stack li a:hover {
background-color: #c1a2d5;
color: #FFF;
}


/***************MOCK-UPS*****************************/

.full-400 {
height: 400px;
}

.full-788 {
height: 788px;
background-color: lightblue;
}

.half-520 {
height: 520px;
background-color: lightcoral;
position: relative;
}

.half-400 {
height: 400px;
position: relative;
}

.rose-image {
background-image: url("https://www.weber.edu/wsuimages/annualreport/2017/rose.jpg");
}

.wight-image {
background-image: url("https://www.weber.edu/wsuimages/annualreport/2017/preswight.jpg");
}

.king-image {
background-image: url("https://www.weber.edu/wsuimages/annualreport/2017/aking.jpg");
}

.cox-image {
background-image: url("https://www.weber.edu/wsuimages/annualreport/2017/dcox.jpg");
}

.shaun-image {
background-image: url("https://www.weber.edu/wsuimages/annualreport/2017/shounduras.jpg");
}

.miller-image {
background-image: url("https://www.weber.edu/wsuimages/annualreport/2017/jmiller.jpg");
}

.mario-image {
background-image: url("https://www.weber.edu/wsuimages/annualreport/2017/mario.jpg");
}

.tarl-image {
background-image: url("https://www.weber.edu/wsuimages/annualreport/2017/tlangham.jpg");
}

.sickle-image {
background-image: url("https://www.weber.edu/wsuimages/annualreport/2017/jvansickle.jpg");
}

.nav-img-hov {
position: relative;
background-color: #C1A2D5;
background-size: 100%;
background-position: center top;
background-repeat: no-repeat;
/**-webkit-transition: all 2.5s ease;**/
transition: all 2.5s ease;
}

.nav-img-hov:hover {
background-size: 120%;
-webkit-transition: all 2.5s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 2.5s cubic-bezier(0.165, 0.84, 0.44, 1);
/*transform: scale(1.072, 1.072);*/
cursor: pointer;
overflow: hidden;
}

.nav-img-hov a {
display: block;
height: 100%;
width: 100%; 
}

.hov-link {
display: none;
}

}
.hov-link:hover {
display: block;
position: absolute;
font-size: .5em;
padding: 10px;
background-color: green;
top: 50%;
left: 50%;
}

.testt {
display: none;
transition: all 2.5s ease;
}
.testt:hover {
display: block;
height: 100%;
background-color: grey;
opacity: 0.3;
z-index: 1;
}

h4.bottom-trans {
width: 100%;
position: absolute;
bottom: 0;
margin-bottom: 0;
color: #FFF !important;
padding: 10px;
text-align: center;
font-family: 'tradegothicltcom-bdcn20', sans-serif;
z-index: 100;
}

h4.top-trans {
width: 100%;
position: absolute;
top: 0;
margin-bottom: 0;
color: #FFF !important;
padding: 10px;
text-align: center;
font-family: 'tradegothicltcom-bdcn20', sans-serif;
z-index: 100;
}

h4.bottom-trans span, h4.top-trans span {
margin: 0 12px;
text-transform: uppercase;
}

.tiles-main-contain {
padding-bottom: 50px;
}

.tiles-main-contain a, .tiles-main-contain a:visited {
color: #FFF;
text-decoration: none;
}

.rose {
background-color: rgb(0,95,113);
}

.pres {
background-color: rgb(73,35,101);
}

.king {
background-color: rgb(9,152,68);
}

.cox {
background-color: rgb(246,178,33);
}

.shaun {
background-color: rgb(210,93,18);
}

.miller {
background-color: rgb(37,202,211);
}

.mario {
background-color: rgb(0,95,113);
}

.tarl {
background-color: rgb(72,54,39);
}

.sickle {
background-color: rgb(163,213,93);
}

.rose-trans {
background-color: rgba(0,95,113,0.7);
}

.pres-trans {
background-color: rgba(73,35,101,0.7);
}

.king-trans {
background-color: rgba(9,152,68,0.7);
}

.cox-trans {
background-color: rgba(246,178,33,0.7);
}

.shaun-trans {
background-color: rgba(210,93,18,0.7);
}

.miller-trans {
background-color: rgba(37,202,211,0.7);
}

.mario-trans {
background-color: rgba(0,95,113,0.7);
}

.tarl-trans {
background-color: rgba(72,54,39,0.7);
}

.sickle-trans {
background-color: rgba(163,213,93,0.7);
}

.boxline {
font-family: 'tradegothicltcom-bdcn20', sans-serif !important;
color: #FFF !important;
max-width: 100%;
padding: 30px;
font-size: 1.6em !important;
line-height: 1.2em;
min-width: 160px;
height: 100%;
}

.bottom-align, top-align {
display: flex;
flex-direction: column;
}

.bottom-align h3 {
margin-top: auto;
}

.top-align h3 {
margin-bottom: auto;
}

/****add purple bg to solid color boxes on mouseover. uses jQuery to add class****/
.box-nav {
transition: all 0.5s ease;
}

.box-nav a {
display: block;
height: 100%;
width: 100%;
padding-right: 20%;
}
.box-nav-hov {
background-color: #C1A2D5;
transition: all 0.5s ease;
cursor: pointer;
}
/**********************************************************************************/

/****************COLLEGE PAGES***********************/

/*****************HERO and INTRO*********************/

.col-btm {
padding: 0 10px;
margin-bottom: 0;
}

.col-btm h1 {
color: #FFF;
text-align: center;
font-size: 1em;
margin-bottom: 0;
}

.pro-year {
font-size: 1.6em;
}

.pro-name {
font-size: 3em;
}

h2.main-tag {
font-size: 1.2em !important;
color: rgb(210,93,18) !important;
text-align: center;
margin: 20px 0 !important;
}

.cap-up {
text-transform: uppercase;
font-size: 1.5em;
}

.cap-up-comm, .cap-up-godd {
text-transform: uppercase;
font-size: 2em;
}

.cap-up-camp {
text-transform: uppercase;
font-size: 3em;
}

.comm-intro {
padding-bottom: 30px;
border-bottom: 2px solid #492365;
}

.camp-intro {
padding-bottom: 50px;
}

.center-heads {
text-align: center;
margin-top: 30px;
text-transform: uppercase;
}

.col-copy {
margin-bottom: 30px;
}

/********************PANES***************************/

.pane-row {
-webkit-display: flex;
display: flex;
/*flex-wrap: wrap;*/
-webkit-align-items: stretch;
align-items: stretch;
position: relative;
}

.columns.copy p {
margin-bottom: 0;
font-size: 1.2vw;
}

.columns.copy {
-webkit-display: flex;
-webkit-align-items: center;
-webkit-justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}

.allcenter {
max-width: 70%;
}

.col-copy h2 {
margin-bottom: 20px !important;
}

.copy h2  {
font-family: 'tradegothiclt-condeighteen', sans-serif;
font-size: 2.3vw;
color: #492365;
margin-bottom: 10px !important;
}

.light-blue {
background-color: #cdd0e0;
}

.light-blue h2 {
font-family: 'tradegothiclt-condeighteen', sans-serif;
color: #346094;
margin-bottom: 7px !important;
}	

.light-green {
background-color: #cce1cf;
}

.light-green h2 {
font-family: 'tradegothiclt-condeighteen', sans-serif;
color: #009844;
margin-bottom: 7px !important;
}


/****************MEDIA QUERIES***********************/

@media only screen and (max-width: 64em) {
    
.nav-img-hov {
background-size: cover;
}
}


@media only screen and (min-width: 1200px) {
.columns.copy p {
font-size: 15px;
}
}


@media only screen and (min-width: 1280px) {
.columns.copy p {
font-size: 100%;
}

.columns.copy h2 {
font-size: 31px;
}
}


@media only screen and (min-width: 641px) and (max-width: 1025px) {
    
.tiles-main-contain {
max-width: 627px !important;
}
    
.allcenter {
max-width: 85%;
}
    
.columns.copy p {
font-size: 11px;
}
    
.float-thumb-right {
float: right;
}

.float-thumb-left {
float: left;
}
}


@media only screen and (max-width: 1023px) {
    
.left-panel-img {
text-align: center;
}
    
.col-btm {
font-size: 2vmin;
}
    
.menu-stack ul {
font-size: 75%;
}
    
.hero-size {
display: flex;
align-items: center;
}
}


@media only screen and (min-width: 767px) and (max-width: 1023px) {
    
.hero-links {
font-size: 1.3em !important;
}
}


@media only screen and (max-width: 640px) {
    
.pane-row {
-webkit-flex-direction: column;
flex-direction: column;
-webkit-align-content: center;
align-content: center;
}

.columns.pane {
flex: 1;
}

.columns.copy {
padding: 40px 10% 40px;
-webkit-align-items: flex-start;
-moz-align-items: flex-start;
align-items: flex-start;
}
    
 .columns.copy p {
font-size: 1em;
}

.columns.copy h2 {
font-size: 24px;
}

.columns.image {
-webkit-flex: 1;
-webkit-justify-content: center;
flex: 1;
justify-content: center;
}

.image {
padding: 0;
}

.allcenter {
max-width: 100%;
}
    
.atharrow, .atharrow-right {
display: none;
}
}
    

@media only screen and (max-width:555px) {
    
.boxline {
padding: 23px;
font-size: 1.3em !important;
line-height: initial;
}
    
.box-nav a {
padding: 0; 
}
}

    
@media screen and (max-width:480px) {
    
.welcome-logo {
height: 25vh;
min-width: 0;
min-height: 0;
}
    
.rep-title {
line-height: 1.3em !important;
font-size: 1em !important;
padding-top: 1.5em;
}
    
.more-arrow {
display: none;
}
    
.hero-links {
display: none;
width: 40%;
height: auto;
font-size: .7em !important;
margin: 0 auto 10px;
}
    
a.hero-links {
padding-top: 10px;
}
    
.hero-title h1 {
position: initial;
font-size: 1.3rem !important;
}
    
.menu-stack ul {
margin-right: 1.25em;
margin-bottom: 0;
}
    
.menu-stack ul li {
border-bottom: 1px solid rgb(195, 195, 195);
padding: 17px 0;
}
    
h2.cont-men-headline {
font-size: 1.5em;
margin: 40px 0 10px !important
}
    
.menu-stack-bottom ul li:last-child {
border-bottom: none;
}
}