/*!
Theme Name: Transformer
Description: Edits to UMC theme styling
Version: 1.0.0
Author: Kaya Aman


*/

#bottom-nav ul.bottom-menu li h3 {
    line-height: 1.3em;
    padding-bottom: 10px;
}


.uu-primary-menu h3, .uu-primary-menu [class^="icon54-"] h3 {
    font-family: 'Encode Sans Normal', Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    padding-left: 5px;
    font-size: 12px;
}

#top-nav ul.top-menu li h3 a, #bottom-nav ul.bottom-menu li h3 a {
    width: 100%;
    height: inherit;
    display: inline-block;
}

.uu-primary-menu {
    margin-bottom: 3em;
    margin-left: 0;
    padding-left: 0;
}

.uu-primary-menu .sub-menu {
    margin-left: 0;
    padding-left: 0;
}

.uu-primary-menu [class^="icon54-"]:before {
    font-size: 1.15em;
    display: block;
    position: absolute;
    color: #fff;
    left: 8px;
    top: 6px;
}

[class^="icon54-2-"], [class*=" icon54-2-"] {
    line-height: inherit !important;
}



/* ACCESSIBILITY APP */
.pojo-a11y-toolbar-overlay {
    transform: translateY(calc(-100% + 52px));
}

ul.uu-primary-menu li a:focus,
ul.bottom-sub-menu li a:focus,
button#uu-pushmenu-trigger:focus,
.uu-site-titles__heading a:focus,
.uu-site-titles__heading__subhead a:focus,
label.uu-radio:focus > .uu-radio__check {
    outline: double 3px #fff !important;
}



/* ACCESSIBILITY MENU */
.acc-menu {
    background: #372C2C;
    color: #FFFFFF;
    padding: 0px 10px;
    font-size: 12px;
    text-align: center;
    display: none;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
}

.acc-menu.acc-enabled {
    display: -ms-flexbox;
    display: flex;
}

.acc-menu .acc-title {
    padding: 10px 40px;
    font-weight: 800;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.acc-menu .acc-inputs {
    width: 1fr;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-line-pack: center;
    align-content: center;
    padding: 0px 40px;
    border-left: 1px solid rgba(0,0,0,0.3);
    border-right: 1px solid rgba(255,255,255,0.1);
}

.acc-menu .acc-inputs .acc-input {
    margin: 10px;
}

.acc-menu select {
    color: #000000;
    max-width: 150px;
}

.acc-menu .acc-link {
    padding: 10px 40px;
    border-left: 1px solid rgba(0,0,0,0.3);
}

.acc-menu .acc-link a {
    color: #ffffff;
    text-decoration: underline;
}

.acc-menu .acc-help {
    margin: 10px;
}

.acc-menu .acc-help span {
    background: #ffffff;
    color: #372C2C;
    padding: 2px 4px;
    border-radius: 2px;
}




/* GENERAL */
 .ten-twenty-four {
    max-width: 1110px;
}

.entry-header .page-title,
.content-padding .page-title {
    font-size: 3em;
}

ol {
	text-indent: .5em;
    margin: 2em 0 2em 2em !important;
}

ol li {
    margin-bottom: 20px;
}

ul li {
    padding-bottom: 15px;
}

ul.uu-primary-menu > li {
    padding-bottom: 0px;
    font-size: 18px;
}

.uu-primary-menu .sub-menu li {
    padding-bottom: 0;
    line-height: 1.1em;
}

.home-banner {
	width: 100%;
	margin: 3% 0;
	padding: 50px 5%;
	background-color: #f1f1f2;
}

.home-feature {
    width: 100%;
    height: 70vh;
    min-height: 600px;
    background-size: cover;
    position: relative;
    background-position: center;
    overflow: hidden;
    background-image: url();
}

.home-img {
	position: relative; 
	margin-left: 50%; 
	width: 25%; 
	min-width: 350px; 
	transform: translate(-50%, -50%); 
	margin-top: 35vh; 
	text-align: center; 
	align-content: center; 
	z-index: 3;
}


table#envirabox-title-float-wrap {
    display: none;
}

.caption {
    display: none !important;
}

/******************************************************
					BUTTON STYLING
******************************************************/

.uu-btn, .nav-newer.pagination, .nav-older.pagination,
.field-wrap input[type=button],
.field-wrap input[type=submit] {
    display: inline-block;
    margin: 10px auto;
    position: relative;
    background: #CC0000;
    color: #ffffff;
    padding: 8px 40px 8px 20px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.field-wrap input[type=button],
.field-wrap input[type=submit] {
	padding: 8px 20px 8px 20px;
}

.uu-btn:hover, .nav-newer.pagination:hover, .nav-older.pagination:hover, 
.field-wrap input[type=button]:hover,
.field-wrap input[type=submit]:hover {
    background: #ffffff;
    color: #cc0000;
    transform: translateY(-2px);
    -webkit-box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.1);
}

.uu-btn, .uu-btn:visited, .uu-btn:active,
.nav-newer.pagination, .nav-newer.pagination:visited, .nav-newer.pagination:active,
.nav-older.pagination, .nav-older.pagination:visited, .nav-older.pagination:active, 
.field-wrap input[type=button]:visited, .field-wrap input[type=button]:active,
.field-wrap input[type=submit]:visited, .field-wrap input[type=submit]:active {
    display: inline-block;
    margin: 10px auto;
    position: relative;
    background-color: #CC0000;
    color: #ffffff;
	padding: 8px 40px 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    font-family: "Montserrat", sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.1);
    transition: all 0.3s;
}

.uu-btn::after {
    position: absolute;
    top: calc(50% - 11px);
    right: 20px;
    content: "\f105";
    font-family: "FontAwesome";
}

.uu-btn.large {
    padding: 10px 44px 10px 20px;
    font-size: 16px;
}

.uu-btn.small {
    padding: 5px 30px 5px 15px;
    font-size: 12px;
}

.uu-btn.ebony,
.nav-newer.pagination,
.nav-older.pagination {
    background: #372C2C;
    color: #ffffff;
}

	.uu-btn.ebony:hover {
		background: #000000;
		color: #ffffff;
	}

	.uu-btn.ebony:hover a,
	.nav-newer.pagination:hover a,
	.nav-older.pagination:hover a {
		color: #c00;
		text-decoration: none;
	}

.uu-btn.grey {
    background: #847A7A;
    color: #ffffff;
}

	.uu-btn.grey:hover {
		background: #372C2C;
		color: #ffffff;
	}


.ghost {
    background: none;
    border: 2px solid #CC0000;
    color: #CC0000;
}

	.ghost:hover {
		background: #CC0000;
		color: #ffffff;
	}

	.ghost.white {
		border-color: #ffffff;
		color: #ffffff;
	}

	.ghost.white:hover {
		background-color: #ffffff!important;
		color: #CC0000 !important;
	}


.uu-btn:focus, .nav-newer.pagination:focus, .nav-older.pagination:focus,
.field-wrap input[type=button]:focus, .field-wrap input[type=submit]:focus {
    outline: double 3px #000000;
}



/**************************************************
					BLOG/POSTS
**************************************************/

.entry-content.content-single {
    margin-bottom: 70px;
}

.entry-header__single .page-title {
    font-size: 3em;
}

.post .entry-meta {
    height: 50px;
}

.post .date {
    line-height: 32px;
}

.pagination {
    background: transparent;
    color: #fff;
    text-align: center;
    width: 180px;
    padding: 0.4em 2em;
    font-family: "Encode Sans Condensed",Helvetica,Arial,sans-serif;
    cursor: pointer;
    margin: 0 auto 2em auto;
}

.nav-newer.pagination, .nav-newer.pagination:visited, .nav-newer.pagination:active {
	padding: 8px 20px 8px 40px;
}

.nav-newer.pagination::before {
	position: absolute;
    top: calc(50% - 11px);
    left: 20px;
    content: "\f104";
    font-family: "FontAwesome";
}

.nav-older.pagination, .nav-older.pagination:visited, .nav-older.pagination:active {
	padding: 8px 40px 8px 20px;
}

.nav-older.pagination::after {
    position: absolute;
    top: calc(50% - 11px);
    right: 20px;
    content: "\f105";
    font-family: "FontAwesome";
}


/****************************************************
	 			   RESOURCE BOXES
****************************************************/

.resource-item-container {
    display: flex;
    flex-flow: row wrap;
    margin: 0px auto;
    padding: 0px 2%;
    max-width: 1400px;
}

.resource-item {
    position: relative;
    height: 400px;
    flex: 1 1 23%;
    min-width: 230px;
    margin: 1%;
    text-align: center;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.resource-item a {
	text-decoration: none;
}

.resource-item a button{
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.resource-item a:hover {
	cursor: pointer;
}

.uu-card {
    position: relative;
    background: #ffffff;
    -webkit-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    margin-bottom: 30px;
}

.uu-card:hover {
    transform: translateY(-4px);
    -webkit-box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.1);
}

.uu-card-img {
	width:100%;
	height:30%;
	background-image: url();
	background-size:cover;
	background-position:center;
}

.uu-card-body {
    padding: 30px;
    margin-bottom: 60px;
	height: 70%;
}

.resource-item h5 {
    color: #cc0000;
    margin-bottom: 2px;
    text-align: left;
}

.resource-item p {
    color: #000000;
    text-align: left;
}


.card-avatar {
    max-width: 100px;
    max-height: 100px;
    margin: 30px auto 0;
}

.card-avatar img {
    overflow: hidden;
    max-width: 100px;
    max-height: 100px;
    margin: 0 auto 0;
    border-radius: 50%;
	-webkit-box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}


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

@media screen and (max-height: 815px) {
	.home-feature {
		height: 50vh !important;
		min-height: unset !important;
	}
	
	.home-img {
    	margin-top: 25vh;
	}
	
	.page-header {
		height: 20vh !important;
    	min-height: unset !important;
	}
	
	.ten-twenty-four.row.clearfix.loop-padding {
		padding-top: 0 !important;
	}
}

@media screen and (max-width: 1240px) {
	.acc-menu .acc-title {
		padding: 10px 10px;
	}
	.acc-menu .acc-inputs {
		padding: 0px 10px;
	}
	.acc-menu .acc-link {
		padding: 10px 10px;
	}
}

@media screen and (max-width: 970px) {
	.acc-menu .acc-title {
		border: 0px;
		display: none;
	}
	
	.acc-menu .acc-inputs {
		border: 0px;
	}
	.acc-menu .acc-link {
		border: 0px;
		display: none;
	}
}