/******************************************************************************************************************* * Subheader Effects*******************************************************************************************************************/ @font-face { font-family: 'WebSymbolsRegular'; src: url('websymbols/websymbols-regular-webfont.eot'); src: url('websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('websymbols/websymbols-regular-webfont.ttf') format('truetype'), url('websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg'); font-weight: normal; font-style: normal; } .ca-menu{ padding:0; } .ca-menu li{ width: 220px; height: 250px; overflow: hidden; position: relative; float:left; margin-right: 4px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; margin-right: 22px; margin-bottom:10px; } .ca-menu li:last-child{ margin-right: 0px; } .ca-menu li a{ text-align: left; width: 100%; height: 100%; display: block; color: #333; position: relative; } .ca-icon{ font-family: 'WebSymbolsRegular', cursive; font-size: 60px; color: #333; text-shadow: 0px 0px 1px #333; line-height: 120px; position: absolute; width: 100%; height: 50%; left: 0px; top: 0px; text-align: center; -webkit-transition: all 400ms linear; -moz-transition: all 400ms linear; -o-transition: all 400ms linear; -ms-transition: all 400ms linear; transition: all 400ms linear; } .ca-content{ position: absolute; left: 0px; width: 100%; height: 50%; top: 50%; } .ca-main{ font-size: 20px; opacity: 0.8; text-align: center; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; } .ca-sub{ text-align: center; font-size: 14px; color: #666; line-height: 40px; opacity: 0.8; -webkit-transition: all 200ms linear; -moz-transition: all 200ms linear; -o-transition: all 200ms linear; -ms-transition: all 200ms linear; transition: all 200ms linear; font-family: Georgia, "Times New Roman", Times, serif; } .ca-menu li:hover{ background-color: #000; } .ca-menu li:hover .ca-icon{ color: #fff; font-size: 45px; } .ca-menu li:hover .ca-main{ -webkit-animation: moveFromLeftRotate 300ms ease; -moz-animation: moveFromLeftRotate 300ms ease; -ms-animation: moveFromLeftRotate 300ms ease; } .ca-menu li:hover .ca-sub{ color: #fff; -webkit-animation: moveFromBottom 500ms ease; -moz-animation: moveFromBottom 500ms ease; -ms-animation: moveFromBottom 500ms ease; } @-webkit-keyframes moveFromLeftRotate{ from { -webkit-transform: translateX(-100%) rotate(-90deg); } to { -webkit-transform: translateX(0%) rotate(0deg); } } @-moz-keyframes moveFromLeftRotate{ from { -moz-transform: translateX(-100%) rotate(-90deg); } to { -moz-transform: translateX(0%) rotate(0deg); } } @-ms-keyframes moveFromLeftRotate{ from { -ms-transform: translateX(-100%) rotate(-90deg); } to { -ms-transform: translateX(0%) rotate(0deg); } } @-webkit-keyframes moveFromBottom { from { -webkit-transform: translateY(100%); } to { -webkit-transform: translateY(0%); } } @-moz-keyframes moveFromBottom { from { -moz-transform: translateY(100%); } to { -moz-transform: translateY(0%); } } @-ms-keyframes moveFromBottom { from { -ms-transform: translateY(100%); } to { -ms-transform: translateY(0%); } } /******************************************************************************************************************* * Top Slider*******************************************************************************************************************/ .ei-slider{ position: relative; width: 100%; max-width: 1920px; height: 500px; margin: 0 auto;} .ei-slider-loading{ width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index:999; background: rgba(0,0,0,0.9); color: #fff; text-align: center; line-height: 400px; } .ei-slider-large{ height: 100%; width: 100%; position:relative; overflow: hidden; } .ei-slider-large li{ position: absolute; top: 0px; left: 0px; overflow: hidden; height: 100%; width: 100%; } .ei-slider-large li img{ width: 100%; filter: url(filters.svg#grayscale); /* Firefox */ filter: gray; /* IE */ -webkit-filter: grayscale(1); /* Webkit */ opacity:1; -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ } .ei-title{ position: absolute; top: 30%; } .ei-title h2, .ei-title h3{ text-align: center; } .ei-title h2{ font-size: 40px; line-height: 50px; color: #fff; padding: 0 10px; } .ei-title h3{ font-size: 50px; line-height: 70px; text-transform: uppercase; color: #fff; background: #333; padding: 0px 40px; } .ei-slider-thumbs{ height: 13px; margin: 0 auto; position: relative; } .ei-slider-thumbs li{ position: relative; float: left; height: 100%; } .ei-slider-thumbs li.ei-slider-element{ top: 0px; left: 0px; position: absolute; height: 100%; z-index: 10; text-indent: -9000px; background: #000; background: rgba(0,0,0,0.9); } .ei-slider-thumbs li a{ display: block; text-indent: -9000px; background: #333; width: 100%; height: 100%; cursor: pointer; border-right: 1px solid #555; -webkit-transition: background 0.2s ease; -moz-transition: background 0.2s ease; -o-transition: background 0.2s ease; -ms-transition: background 0.2s ease; transition: background 0.2s ease; } .ei-slider-thumbs li a:hover{ background-color: #f0f0f0; } .ei-slider-thumbs li img{ position: absolute; bottom: 50px; opacity: 0; z-index: 999; max-width: 100%; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -o-transition: all 0.4s ease; -ms-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-box-reflect: below 0px -webkit-gradient( linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.3)) ); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .ei-slider-thumbs li:hover img{ opacity: 1; bottom: 13px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } @media screen and (max-width: 830px) { .ei-title{ position: absolute; right: 0px; margin-right: 0px; width: 100%; text-align: center; top: auto; bottom: 0; background: rgba(255,255,255,0.9); padding: 0; } .ei-title h2, .ei-title h3{ text-align: center; } .ei-title h2{ font-size: 20px; line-height: 24px; } .ei-title h3{ font-size: 30px; line-height: 40px; margin-top: 0px; margin-bottom: 1px; } } html, body, div, h1, h2, ul, li, dl, dd, dt{ margin: 0; padding: 0; } ul { list-style: none; } .image_carousel { padding: 15px 0 15px 40px; } .image_carousel img { border: 1px solid #ccc; background-color: white; padding: 9px; margin: 7px; display: block; float: left; height: 110px; width: 160px; } a.prev, a.next { background: url(../images/miscellaneous_sprite.png) no-repeat transparent; width: 45px; height: 50px; display: block; position: absolute; top: 50px; } a.prev { left: 0px; background-position: 0 -100px !important; } a.prev:hover { background-position: 0 -50px; } a.prev.disabled { background-position: 0 -100px !important; } a.next { right: 0px; background-position: -50px -100px !important; } a.next:hover { background-position: -50px -50px; } a.next.disabled { background-position: -50px -100px !important; } a.prev.disabled, a.next.disabled { cursor: default; } a.prev span, a.next span { display: none; } .pagination { text-align: center; margin-right: 37px; margin-top: 10px; } .pagination a { background: url(../images/miscellaneous_sprite.png) 0 -300px no-repeat transparent; width: 15px; height: 15px; margin: 0 5px 0 0; display: inline-block; } .pagination a.selected { background-position: -25px -300px; cursor: default; } .pagination a span { display: none; } .clearfix { float: none; clear: both; } .slideshowthumb { width:150px; height:59px;} .negativetop {margin-top:-10px;} a.actbutton { border-top: 1px solid #ffffff; background: #eee; padding: 10px 20px; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; color: #444 !important; font-size: 18px; text-decoration: none; vertical-align: middle; font-family:DroidSansRegular; font-weight:bold; -webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); -moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25); } a.actbutton:hover { border-top-color: #ffffff; background: #fff; color: #33777d; } .noslide {text-align:center;} .noslide h1 { color: #eee; font-family: BitterRegular; margin-bottom: 23px; font-size: 30px; } .noslide h3 {color: #eee;padding: 0 100px; font-weight: lighter; line-height: 34px;}