.debug { border: solid 1px red; } @media (max-width: 767px) { .text-left-xs { text-align: left; } .text-right-xs { text-align: right; } .text-center-xs { text-align: center; } } @media (min-width: 768px) and (max-width: 991px) { .text-left-sm { text-align: left; } .text-right-sm { text-align: right; } .text-center-sm { text-align: center; } } @media (min-width: 992px) and (max-width: 1199px) { .text-left-md { text-align: left; } .text-right-md { text-align: right; } .text-center-md { text-align: center; } } @media (min-width: 1200px) { .text-left-lg { text-align: left; } .text-right-lg { text-align: right; } .text-center-lg { text-align: center; } } #header .row { margin-left: 20px; margin-bottom: 8px; } .date-bar { margin-top: 5px; margin-bottom: 0px; width: 100%; padding: 3px; text-align: center; background-color: #222; color: white; } .affix { top: 0; z-index: 9999; } .affix { left: 0; min-width: 100%; } .affix-top .small-logo { display: none !important; } .affix .small-logo { } .small-logo { position: absolute; width: 100%; height: 100%; margin-right: 50px; text-align: center; overflow: hidden; } .small-logo img.logo { height: 48px; margin: auto; } #footer .logo { text-align: center; width: 100%; } .row { position: relative; } @media (min-width: 992px) { .right-bottom-align-text { position: absolute; bottom: 0; right: 32px; } } .no-padding { padding: 0; margin: 0; } .news-item { position: relative; height: 360px; overflow: hidden; } .news-item.news-item-small, .news-items-small-1 .news-item, .news-items-small-2 .news-item { height: 178px; margin-left: 4px; } .news-items-small-1 { margin-bottom: 4px; } .news-item a img { width: 100%; } img.full-width { width: 100%; } .news-item .overlay a, .news-item .overlay div { color: white; } .news-item .overlay { position: absolute; pointer-events: none; bottom: 0px; padding: 0 8px 11px 8px; width: 100%; height: auto; } .news-item .details { } .details .news-title { margin-bottom: 3px; } .details .post-date { font-size: 90%; color: rgb(92, 36, 131); margin-bottom: 5px; } .details .event-date { font-size: 110%; color: rgb(92, 36, 131); font-weight: bold; margin-bottom: 5px; } .details .news-excerpt { position: relative; overflow: hidden; } .details .news-excerpt.short { max-height: 75px;; } .details .news-excerpt.long { max-height: 300px; } .details .news-excerpt:before { content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .details .news-excerpt.short:before { background: linear-gradient(transparent 30px, white); } .details .news-excerpt.long:before { background: linear-gradient(transparent 150px, white); } .details .post-source { font-style: italic; font-weight: 90%; } .details .post-source a { color: rgb(92, 36, 131); } .news-item .thumb { z-index: 1; margin-bottom: 0; } .news-item .thumb a:last-child:before { content: ''; width: 100%; height: 100%; position: absolute; z-index: 1; opacity: 0.6; bottom: 0; background: rgba(0, 0, 0, 0); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, #000000)); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0); /* responsive portrait phone */ } @media (max-width: 1025px) { .news-item, .news-item-small-1, .news-item-small-2, .news-item-small-3, .news-item-small-4 { margin: 5px !important; } } } .news-item.small .post-date { font-size: 80%; margin-top: -1em; margin-bottom: 3px; } .news-item .thumb { z-index: 1; margin-bottom: 0; } .news-item .thumb a:last-child:before { content: ''; width: 100%; height: 100%; position: absolute; z-index: 1; opacity: 0.6; bottom: 0; background: rgba(0, 0, 0, 0); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, #000000)); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, #000000 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #000000 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0); /* responsive portrait phone */ } @media (max-width: 1025px) { .news-item, .news-item-small-1, .news-item-small-2, .news-item-small-3, .news-item-small-4 { margin: 5px !important; } } /** @media (min-width: 1025px) { /**/ .news-item a:last-child:before, .news-item a:last-child:after { -webkit-transition: opacity 0.35s ease 0s; -moz-transition: opacity 0.35s ease 0s; -o-transition: opacity 0.35s ease 0s; transition: opacity 0.35s ease 0s; } .news-item .entry-thumb { -webkit-transition: transform 0.35s ease 0s; -moz-transition: transform 0.35s ease 0s; -o-transition: transform 0.35s ease 0s; transition: transform 0.35s ease 0s; /* http://stackoverflow.com/questions/14562457/center-oversized-image-in-div */ /* If image is too large, center it in available space */ position: absolute; top: -9999px; bottom: -9999px; left: -9999px; right: -9999px; margin: auto; } .news-item:hover a:last-child:before { opacity: 0.8; } .news-item:hover .entry-thumb { transform: scale3d(1.05, 1.05, 1); -webkit-transform: scale3d(1.05, 1.05, 1); -moz-transform: scale3d(1.05, 1.05, 1) rotate(0.02deg); } /** } /**/ .search { width: 100%; text-align: right; margin-bottom: 4px; } .search input { font-size: 12px; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; } @media (max-width: 480px) { .search input { float: none; } .search input[type=search]{ width:100% !important; } } .search input[type=search] { -webkit-appearance: textfield; background: #ededed url(/images/search-icon.png) no-repeat 9px center; border:solid 1px #ccc; padding:9px 10px 9px 32px; width:120px; -webkit-border-radius:10em; -mox-border-radius:10em; border-radius:10em; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; } .search input[type=search]:focus{ width:100%; outline:0; background-color:#fff; border-color:#6dcff6; -webkit-box-shadow:0 0 5px rgba(109,207,246,.5); -moz-box-shadow:0 0 5px rgba(109,207,246,.5); box-shadow:0 0 5px rgba(109,207,246,.5); } #special p { margin: 0; } @media (min-width: 992px) { .center-bottom-align-text { position: absolute; bottom: 0; left: 25%; width: 50%; } } @media (max-width: 992px) { .center-bottom-align-text { width: 100%; position: block; clear: both; margin: 10px; } }