/* --------------------- RAMTHA.COM MAIN CSS FILE ------------------------*/ @charset "utf-8"; /* GENERAL WEBSITE ELEMENTS ------------------------------------------------ */ html, body {min-height: 100%; padding: 0; margin: 0; background-image: url('../../images/grid-3.jpg'); font-size: 100%; font-weight: normal; letter-spacing: normal; font-family: Verdana, Geneva, sans-serif;} body {margin: 0; padding: 0; width: 100%; height: 100%;} h1 {font-size: 120%; letter-spacing: 1px; font-weight: bold; line-height: 160%; text-shadow: 3px 3px 6px #BFBFBF;} h2 {font-size: 110%; letter-spacing: 3px; font-weight: bold; line-height: 150%;} h3 {font-size: 100%; letter-spacing: 2px; font-weight: bold; line-height: 140%;} h4 {font-size: 90%; letter-spacing: 2px; line-height: 140%;} h5 {font-size: 80%; letter-spacing: 1px;} h6 {font-size: 70%; letter-spacing: 1px;} p {text-align: left; font-size: 100%;} a {text-decoration: none; color: #00488F; font-size: 100%; font-weight: bold; font-family: Verdana, Geneva, sans-serif;} a:hover {font-size: 100%; text-decoration: underline; color: #90c317; font-family: Verdana, Geneva, sans-serif;} /*li {font-size: 100%; color: #00386F; line-height: 160%; padding-bottom: 10px; text-align: left;}*/ sup {vertical-align: text-top; font-size: 50%;} tmc {vertical-align: top; font-size: 75%;} /* *END* GENERAL WEBSITE ELEMENTS ------------------------------------------------ */ /* MAIN MENU ------------------------------------------------ */ /* Top Font Size Line 57 Mobile Top Font Size Line 293 */ @media only screen and (max-width: 1280px) { .mcmenu-top-mobile {display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; height: auto; width: 100%; padding: 5px 0; margin-bottom: .5em; background-color: #0a2d4e;} .menu-flex h1 {display: none;} .sm {display: block;} .sm h1 {font-size: 4vw; letter-spacing: 5px; text-align: left; margin-left: -5px; font-weight: bold; font-style: italic; color: #fff; line-height: normal; text-shadow: none;} .sm a {font-size: 4vw; letter-spacing: 5px; font-weight: bold; font-style: italic; color: #fff; line-height: normal; text-shadow: none;} .sm a:hover {color: #9cdefc; text-decoration: none;} .sm span {font-size: 3vw; letter-spacing: 2px; margin-left: 20px; font-weight: bold; font-style: italic; color: #fff; line-height: normal; text-shadow: none;} .lg {display: none;} @media only screen and (min-width: 500px) { .mcmenu-top-mobile h1 {font-size: 3.5vw; margin-left: 0px;} .mcmenu-top-mobile span {font-size: 2.5vw; margin-left: 10px;} } @media only screen and (min-width: 700px) { .mcmenu-top-mobile h1 {font-size: 2vw; margin-left: 0px;} .mcmenu-top-mobile span {font-size: 1.5vw; margin-left: 0px;} .sm {display: none;} .lg {display: block;} .lg h1 {font-size: 2vw; letter-spacing: 5px; text-align: left; margin-left: 0px; font-weight: bold; font-style: italic; color: #fff; line-height: normal; text-shadow: none;} .lg a {font-size: 2vw; letter-spacing: 5px; font-weight: bold; font-style: italic; color: #fff; line-height: normal; text-shadow: none;} .lg a:hover {color: #9cdefc; text-decoration: none;} .lg span {font-size: 1.5vw; letter-spacing: 2px; margin-left: 0px; font-weight: bold; font-style: italic; color: #fff; line-height: normal; text-shadow: none;} } @media only screen and (min-width: 900px) { .lg h1 {font-size: 2vw; margin-left: -10px;} .lg span {font-size: 1.5vw; margin-left: 0px;} } @media only screen and (min-width: 1100px) { .lg h1 {font-size: 1.5vw; margin-left: -60px;} .lg span {font-size: 1vw; margin-left: 10px;} } } @media only screen and (min-width: 1281px) { .mcmenu-top-mobile {display: none;} } #mcmenu {width:auto; display:inline-block; text-align:right; font-family:Verdana, Geneva, sans-serif; margin-bottom: .5em;} .menu-flex {display: flex; flex-flow: row wrap; align-items: center; height: auto; width: 100%; background-color: #0a2d4e; padding: 5px 0;} .menu-1 {display: flex; justify-content: center; align-items: center; flex-grow: 1;} /*border: solid 1px #fff;}*/ .menu-1 h1 {margin-left: 5px; font-size: 2vw; letter-spacing: 4px; font-weight: bold; font-style: italic; color: #fff; line-height: normal; text-shadow: none;} .menu-1 a {font-size: 2vw; letter-spacing: 4px; font-weight: bold; font-style: italic; color: #fff; line-height: normal; text-shadow: none;} .menu-1 a:hover {color: #90c317; text-decoration: none;} .menu-1 span {font-size: .8vw; letter-spacing: 1px; font-weight: bold; font-style: italic; color: #fff; line-height: normal; text-shadow: none; margin-left: 10px;} .menu-2 {display: flex; justify-content: center; align-items: center; flex-grow: 1;} /*border: solid 1px #fff;}*/ @media only screen and (min-width: 1281px) { .menu-1 a {font-size: 1.5vw;} .menu-1 span {font-size: 1vw;} } @media only screen and (min-width: 1600px) { .menu-flex {display: flex; flex-flow: row wrap; align-items: center; height: auto; width: 100%; background-color: #0a2d4e;} .menu-1 {display: flex; justify-content: flex-start; flex-grow: 1;} .menu-1 h1 {margin-left: 40px; font-size: 1.2vw; letter-spacing: 6px;} .menu-1 a {font-size: 1.2vw; letter-spacing: 6px;} .menu-1 span {font-size: .8vw; margin-left: 20px; letter-spacing: 2px;} .menu-2 {display: flex; justify-content: center; flex-grow: 1; font-size: 100%} } #mcmenu ul {width:auto; display:inline-block; font-size:0; text-align:right; color:#fff; background-color: #0a2d4e; border: transparent; margin:0; padding:0; list-style:none; position:relative; z-index:999999990; border-radius: 3px;} #mcmenu li {display:inline-block; position:relative; font-size:0; margin:0; padding:0;} /*Top level items ---------------------------------------*/ #mcmenu .top-item {font-size: 2vw; letter-spacing:2px; padding:7px 10px 30px; color:inherit; text-decoration:none; font-weight:bold; text-transform:uppercase; display:block; position:relative; transition:all 0.3s;} @media only screen and (min-width: 1281px) { #mcmenu .top-item {font-size: .9vw; letter-spacing:2px; padding:7px 10px;} } @media only screen and (min-width: 1400px) { #mcmenu .top-item {font-size: .8vw; letter-spacing:2px; padding:14px 15px;} } @media only screen and (min-width: 1600px) { #mcmenu .top-item {font-size: .7vw; letter-spacing:2px; padding: 14px 20px;} } #mcmenu li.over .top-item {color: #0a2d4e; font-weight: bold; background-color:#efefef;} .menu-login {color: #9cdefc;} #mcmenu li.language-dropdown.over .top-item {background-color: transparent !important;} /*Sub level items ---------------------------------------*/ #mcmenu .dropdown{text-align:left; left:0; /*font-family:Helvetica, Arial, sans-serif;*/ color: #0a2d4e; background-color:#F3F3F3; border:none; position:absolute; box-shadow: 0 4px 8px rgba(0,0,0,0.3); display:none; opacity:0; cursor:default; padding-bottom: 20px;z-index: 200;} #mcmenu .dropdown hr {display: block;} @media only screen and (min-width: 580px) { #mcmenu .dropdown hr {display: none;} } #mcmenu .dropdown li {display: block;} #mcmenu .sub-item, #mcmenu .clm a, #mcmenu .clm h3 {font-size: 4vw; letter-spacing: 4px; margin: 0; padding: 10px 20px; font-weight:bold; display:block; color:inherit; text-decoration:none;} @media only screen and (min-width: 580px) { #mcmenu .sub-item, #mcmenu .clm a, #mcmenu .clm h3 {font-size: 3.5vw;} } @media only screen and (min-width: 700px) { #mcmenu .sub-item, #mcmenu .clm a, #mcmenu .clm h3 {font-size: 2vw;} } @media only screen and (min-width: 1000px) { #mcmenu .sub-item, #mcmenu .clm a, #mcmenu .clm h3 {font-size: 1.4vw;} } @media only screen and (min-width: 1200px) { #mcmenu .sub-item, #mcmenu .clm a, #mcmenu .clm h3 {font-size: 1.2vw;} } @media only screen and (min-width: 1400px) { #mcmenu .sub-item, #mcmenu .clm a, #mcmenu .clm h3 {font-size: 1vw;} } @media only screen and (min-width: 1600px) { #mcmenu .sub-item, #mcmenu .clm a, #mcmenu .clm h3 {font-size: .8vw;} } #mcmenu .clm h3 {font-size: 1vw; font-weight:700;} #mcmenu .sub-item {background-color:#F3F3F3; position:relative; transition:all 0.3s;} #mcmenu li.over > .sub-item, #mcmenu li:hover > .sub-item {color:#fff; background-color:#0a2d4e;} #mcmenu .clm a:hover{color:#fff; transition:color 0.2s;} #mcmenu .dropdown.right0 {left:auto;right:0;} #mcmenu .dropdown li > .dropdown.right0 {left:auto;right:100%;} #mcmenu li.full-width{position:static;} #mcmenu li.full-width .dropdown{width:100%; left:0; box-sizing:border-box;} #mcmenu li.over > .dropdown{display:block; opacity:1; z-index:1;} #mcmenu .dropdown li > .dropdown{left:100%; right:auto; top:0;} #mcmenu ul.dropdown{min-width: 300px; /* Sub level menu min width */} #mcmenu div.dropdown {text-align:center;} /* each column */ #mcmenu .clm{text-align:left; margin:20px; vertical-align:top;/*or middle*/ width:auto; min-width:240px; display:inline-block; *display:inline;*zoom:1;} #mcmenu .clm a:hover{color:#fff; text-decoration:none;} /*-----------Arrows----------------*/ #mcmenu .arrow {color:inherit; border-style:solid; border-width:2px 2px 0 0; padding:4px; transform:rotate(135deg);margin-top:-8.5px;margin-left:4px; position:relative; display: inline-block; width: 0; height: 0; vertical-align:middle; overflow:hidden; /*for IE6*/} #mcmenu .dropdown .arrow, #mcmenu.mobile .arrow {transform:rotate(45deg); top:50%;margin-top:-18px; position:absolute;left:auto;right:20px;} @media only screen and (min-width: 1000px) { #mcmenu .dropdown .arrow, #mcmenu.mobile .arrow {margin-top:-7px;} } #mcmenu.mobile .back-icon {margin:2px 10px 2px 4px; padding:4px;/*back arrow size*/ border-width:0 0 2px 2px;/*back arrow thickness*/ position:static;margin-top:0;} #mcmenu .back {display:none;} #mcmenu.mobile .back.show {display:block; text-align:center; margin:0; cursor:pointer; padding:14px 20px; color:#EEEEEE; background-color:#0a2d4e; font-size:22px; font-weight:400; text-transform:uppercase; letter-spacing:2px;} /*######## styles for mobile mode ########*/ #mcmenu.mobile {width:100%; max-width:400px; display:block; background-color:#0a2d4e; border:1px solid rgba(0,0,0,0.2); box-sizing:border-box; padding: 60px 20px 0 0;} /*--begin mark1--*/ #mcmenu.mobile {position:fixed;top:0;bottom:0;left:0;right:0;height:100%!important; right:-130%; left:auto; box-shadow:-4px 0 18px rgba(0,0,0,0.3); transition:all 411ms cubic-bezier(.7, 0,1,.4);} #mcmenu.mobile.active {right:0; transition:all 411ms cubic-bezier(.16,.76,.45,1);} #mcmenu.mobile {z-index:1000000004;} .mobile-fixed-bg {background:#000;z-index:1000000000;} .mobile-fixed-bg.showing {display:block;opacity:0;}.mobile-fixed-bg.active {opacity:0.4;} .menu-icon.active {position:fixed;top:12px;right:40px;z-index:1000000006;} /*--end mark1--*/ #mcmenu.mobile ul {background-color:transparent; transition:all 411ms ease; box-sizing:border-box; border:none; border-radius: 0; width: 90%;} #mcmenu.mobile .mobileHide {display:none;} #mcmenu.mobile li {text-align:center;} #mcmenu.mobile .top-item {font-size: 4vw;} @media only screen and (min-width: 700px) { #mcmenu.mobile .top-item {font-size: 2vw;} } @media only screen and (min-width: 1000px) { #mcmenu.mobile .top-item {font-size: 1.5vw;} } #mcmenu.mobile li.over > .top-item {background-color:#dfdfdf;} #mcmenu.mobile .dropdown {border:none; border-radius:0; box-shadow:none; background-color:#F3F3F3;} #mcmenu.mobile .clm {text-align:center; width:100%; border:none; margin:0; padding:0; display:block;} /*----------- menu-icon ----------------*/ .menu-icon-wrapper {padding:4px; text-align:right;} .menu-icon {padding:6px; display:none; cursor: pointer; outline: none; /*background-color:#0a2d4e;*/ border:1px solid transparent; border-radius:3px; transition: all 0.25s ease-out; user-select:none; box-sizing:content-box; font-size:0; position:relative;} .menu-icon.mobile {display:inline-block;} .menu-icon.active{/*background-color:#333333;*/} .three-line{width: 28px; height: 18px; position: relative; display: inline-block; font-size: 0;} .three-line span{background-color:#fff; position: absolute; border-radius: 2px; transition: transform .5s ease-in-out; width:100%; height: 2px; left: 0; transform: rotate(0);} .three-line span:nth-child(1){top:0;} .three-line span:nth-child(2){top:8px; visibility:visible;} .three-line span:nth-child(3){bottom:0;} .menu-icon.active .three-line span:nth-child(1){transform: rotate(225deg); top: 8px;} .menu-icon.active .three-line span:nth-child(2){transform: rotate(180deg); visibility:hidden;} .menu-icon.active .three-line span:nth-child(3){transform: rotate(315deg); top: 8px;} @keyframes topItemAnimation { from {opacity: 0; transform:translate3d(0, -60px, 0);} to {opacity: 1; transform:translate3d(0, 0, 0);} } /* END MAIN MENU ------------------------------------------------ */ /* FOOTER ---------------------------------------------------*/ #content-footer {width: auto; padding: 3.5% 1%; margin-top: 2em; background-color: #0a2d4e;} .mr-2, .mx-2 {margin-right: .2rem} .foot-info > span {margin: 0 10px;} .foot-info p {font-size: 1.8vw; text-align: center; font-weight: bold; color: #fff; margin: 10px 0;} .foot-info a {font-size: 2vw; text-align: center; font-weight: bold; color: #fff; text-decoration: none;} .foot-info a:hover {color: #90c317;} .foot-info hr {width: 100%; background-color: #fff; margin: 10px 0;} @media only screen and (min-width: 720px) { #content-footer {padding: 1.5%; margin-top: 3em;} .foot-info > span {margin: 0 10px;} .foot-info p {font-size: 1.2vw;} .foot-info a {font-size: 1.5vw;} .foot-info hr {width: 70%; margin: 20px 0;} } @media only screen and (min-width: 1024px) { #content-footer { margin-top: 4em;} } @media only screen and (min-width: 1280px) { #content-footer {padding: 1% 2%;} .foot-info > span {margin: 0 20px;} .foot-info p {font-size: .8vw;} .foot-info a {font-size: .9vw;} } @media only screen and (min-width: 1400px) { #content-footer { margin-top: 6em;} } @media only screen and (min-width: 1800px) { #content-footer {padding: 1%; margin-top: 8em;} .mr-2, .mx-2 {margin-right: .6rem} .foot-info > span {margin: 0 30px;} .foot-info p {font-size: .7vw;} .foot-info a {font-size: .8vw;} } @media only screen and (min-width: 2300px) { .foot-info p {font-size: .6vw;} .foot-info a {font-size: .7vw;} } /* END FOOTER ------------------------------------------------ */ /* MAIN PAGE ELEMENTS ---------------------------------------------------*/ #content-main {width: 100%;} .page-left {display: block; margin-top: 4%;} .page-left-top {display: block;} .page-right {display: block; margin-top: 4%;} .lower-h {display: none;} .notice-h { display: none;} .lower-v {display: none;} .page-bottom {display: none;} .page-cont {width: 100%; background-color: #fff; padding-bottom: .5%; margin-bottom: 2%; overflow: hidden;} .page-cont hr {margin: 30px 0 25px; padding: 1px; background: #8FA8BF; width: 95%;} .page-top-l {display: block; width: 95%; margin: 20px 0 0;} .page-top-l h2 {font-size: 110%; letter-spacing: 1px; margin: 0 0 10px;} .page-top-l h3 {font-size: 105%; letter-spacing: 0; padding: 10px 0; color: #7f0000;} .page-top-l p {text-align: center;} .page-top-l-chd-up img {width: 20%; float: left; margin-right: 10px; margin-top: -18px;} .page-top-l-chd-lw p {color: #7F0000; font-size: 80%; text-align: center; margin: 0;} .page-top-r {display: block; width: 95%; margin: 20px 0 0;} .page-top-r img {width: 80%; border: solid 1px;} .page-top-b {width: 95%;} .page-top-b p {text-align: center; margin: 20px 0 0} .page-60 {margin: 0 10px;} .page-40 {margin: 0 10px;} .page-30 {margin: 0 10px;} .page-20 {margin: 0 10px;} .page-10 {margin: 0 10px;} .page-box {width: 95%; background: #efefef; margin: 40px 0; padding: 10px; height: auto; overflow: auto; border: solid 1px;} .page-box img {float: right; margin: 10px 0 5px 20px; width: 40%;} .page-box h3 {font-weight: bold; text-align: center; color: #00488f; line-height: 160%; text-transform: uppercase; font-size: 90%; letter-spacing: 3px;} @media only screen and (min-width: 414px) { } @media only screen and (min-width: 768px) { .page-right {display: none;} .page-left {margin: 2% 1% 0;} .lower-h {display: block;} .page-bottom {display: block; margin: 2% 1% 0;} .page-top-l {display: inline-block; vertical-align: top; width: 55%; margin: 20px 0 0;} .page-top-l h2 {font-size: 100%; letter-spacing: 2px; margin: 0 0 10px;} .page-top-l h3 {font-size: 100%; letter-spacing: 1px; padding: 10px 0; color: #7f0000;} .page-top-l p {font-size: 90%} .page-top-b p {font-size: 90%} .page-top-r {display: inline-block; vertical-align: top; width: 35%; margin: 20px 20px 0;} .page-top-r img {width: 100%;} .page-60 {margin: 0 20px;} .page-40 {margin: 0 20px;} .page-30 {margin: 0 20px;} .page-20 {margin: 0 20px;} .page-10 {margin: 0 20px;} .page-box {width: 95%; background: #efefef; margin: 40px 0; padding: 10px; height: auto; overflow: auto; border: solid 1px;} .page-box img {float: right; margin: 10px 0 5px 20px; width: 30%;} .notice-h {display: block; background-color: #fff; margin: 30px 0 0;} .notice-h-cont {padding: 20px;} .notice-h-cont p {text-align: center;} .notice-h-cont-item {display: inline-block; margin: 20px 0; width: 40%;} .notice-h-cont-item img {border: solid 1px #000; box-shadow: 3px 3px 6px #8f8f8f; width: 60%;} .notice-h-cont-text {display: inline-block; vertical-align: top; margin: 20px 0; font-weight: bold; color: #18485C; line-height: 150%; width: 40%;} } @media only screen and (min-width: 1000px) { .page-cont {margin-bottom: 2%} .page-cont hr {margin: 40px 0; padding: 1px; background: #8FA8BF; width: 90%;} .page-top-l {display: inline-block; vertical-align: top; width: 60%; margin: 20px 0 0;} .page-top-l h2 {font-size: 130%; letter-spacing: 2px; margin: 0 0 10px;} .page-top-l h3 {font-size: 130%; letter-spacing: 2px; padding: 10px 0; color: #7f0000;} .page-top-l p {font-size: 110%} .page-top-b p {font-size: 110%} .page-top-r {display: inline-block; vertical-align: top; width: 35%; margin: 20px 20px 0;} .page-top-r img {width: 100%; border: solid 1px #293F6F;} .page-60 {margin: 0 30px;} .page-40 {margin: 0 20px;} .page-30 {margin: 0 20px;} .page-20 {margin: 0 20px;} .page-10 {margin: 0 20px;} .page-box {width: 95%; background: #efefef; margin: 40px 0; padding: 10px; height: auto; border: solid 1px;} .page-box img {float: right; margin: 10px 0 5px 20px; width: 30%;} .page-box h3 {line-height: 180%; font-size: 100%; letter-spacing: 4px; margin: 10px 40px;} .state {color: #00227F; font-size: 160%; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-shadow: 1px 1px 1px #666; letter-spacing: 2px; font-style: italic; margin: 50px 0;} } @media only screen and (min-width: 1280px) { .page-60 {margin: 0 60px;} .page-40 {margin: 0 40px;} .page-30 {margin: 0 30px;} .page-20 {margin: 0 20px;} .page-10 {margin: 0 10px;} .state {color: #00227F; font-size: 200%; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-shadow: 1px 1px 1px #666; letter-spacing: 2px; font-style: italic; margin: 50px 0;} } @media only screen and (min-width: 1600px) { .page-left {display: inline-block; vertical-align: top; width: 77%; margin: 2% 1% 0 0;} .page-right {display: inline-block; vertical-align: top; width: 20%; margin-top: 2%;} .page-cont hr {margin: 60px 0; padding: 1px; background: #8FA8BF; width: 90%;} .page-top-l p {margin-right: 30px; margin-left: 30px;} .notice-h {display: none;} .lower-h {display: none;} .lower-v {display: block;} .page-bottom {display: none;} .page-60 {margin: 0 60px;} .page-40 {margin: 0 40px;} .page-30 {margin: 0 30px;} .page-20 {margin: 0 20px;} .page-10 {margin: 0 10px;} .state {color: #00227F; font-size: 200%; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-shadow: 1px 1px 1px #666; letter-spacing: 2px; font-style: italic; margin: 50px 0;} } @media only screen and (min-width: 1792px) { .page-left {width: 72%; margin: 1.5% 1% 0; overflow: hidden;} .page-right {width: 25%; margin-top: 1.5%;} .page-cont {margin: 4em 0 2em;} .page-cont hr {margin: 50px 0 40px; padding: 1px; background: #8FA8BF; width: 95%;} .page-top-l {display: inline-block; vertical-align: top; width: 55%;} .page-top-l h2 {font-size: 180%;} .page-top-l h3 {font-size: 140%; letter-spacing: 2px;} .page-top-l p {font-size: 140%; letter-spacing: 4px;} .page-top-r {margin: 30px 0 0;} .page-top-r img {width: 60%; border: solid 1px #293F6F;} .page-top-b {margin: 30px 0 0;} .page-top-b p {font-size: 120%; letter-spacing: 4px;} .page-60 {margin: 0 60px;} .page-40 {margin: 0 40px;} .page-30 {margin: 0 30px;} .page-20 {margin: 0 20px;} .page-10 {margin: 0 10px;} .page-box {width: 95%; background: #efefef; margin: 40px 0; padding: 10px 20px; height: auto; border: solid 1px;} .page-box img {float: right; margin: 10px 0 0 30px; width: 20%;} .page-box h3 {font-size: 110%; letter-spacing: 6px; margin: 0 60px 15px;} .state {color: #00227F; font-size: 200%; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-shadow: 3px 3px 6px #666; letter-spacing: 2px; font-style: italic; margin: 50px 0;} } /* END - MAIN PAGE ELEMENTS ---------------------------------------------------*/ /* HOME PAGE ------------------------------------------------ */ .hmpge {display: block; background: #fff; padding: 10px 0 20px; overflow: hidden;} .hmpge img {width: 75%; margin: 10px 0;} .hmpge h1 {font-size: 140%; font-weight: bold; color: #1D385F; text-transform: uppercase; letter-spacing: 4px; text-shadow: 3px 3px 6px #9F9F9F; line-height: 160%; margin: 5px 0 10px; font-family: Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, serif;} .hmpge h2 {font-size: 110%; font-weight: bold; color: #5F5F5F; text-transform: uppercase; letter-spacing: 2px; text-shadow: 3px 3px 6px #9F9F9F; line-height: 140%; margin: 0; font-family: Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, serif;} .hmpge h3 {font-size: 100%; text-align: center; color: #5F5F5F; text-shadow: 1px 1px 3px #9F9F9F;} .hmpge h4 {text-align: justify; letter-spacing: 1px; font-size: 100%; padding: 0 15px;} .hmpge p {text-align: justify; letter-spacing: 1px; font-size: 100%; padding: 0 15px;} .hmpge hr {width: 95%; margin: 30px 0 20px; padding: 1px; background: #8FA8BF;} .hmpge-b {display: block; background: #fff; overflow: auto;} .hmpge-b h2 {font-size: 130%; margin-bottom: 0;} .hmpge-b h3 {font-size: 110%; margin-top: 10px;} .hmpge-b img {width: 80%; margin: 0;} .hmpge-list-l {display: block; } .hmpge-list-r {display: block;} .hmpge-list-l ul {padding-inline-start: 20px} .hmpge-list-r ul {padding-inline-start: 20px} .hmpge-video {display: inline-block; width: 48%; margin-bottom: 30px;} .hmpge-video img {float: none; margin-bottom: 5px; width: 90%;} .hmpge-video a {font-size: 75%; text-transform: uppercase;} .video_cont {display: block; width: 90%; height: auto; margin: 6% 0; padding: 10px;} .video_cont h5 {text-align: center; font-size: 95%; letter-spacing: 2px; line-height: 150%; margin: 0 0 8px; color: #000; text-shadow: 2px 2px 3px #9F9F9F;} .video_wrapper {width: 95%; padding: 10px 0; color: grey; background: #222;} .video_wrapper a {font-size: 70%; color: #fff; line-height: 200%; letter-spacing: 1px; white-space: nowrap;} .video_case_1 {position: relative; padding-bottom: 56.25%; padding-top: 20px; height: 0; overflow: hidden; border: ridge 3px #888888; background: #333;} .video_case_2 {position: relative; padding-bottom: 56.25%; padding-top: 20px; height: 0; overflow: hidden; border: ridge 3px #888888; background: #333;} .video_case_3 {position: relative; padding-bottom: 56.25%; padding-top: 20px; height: 0; overflow: hidden; border: ridge 3px #888888; background: #333;} .video_case_4 {position: relative; padding-bottom: 56.25%; padding-top: 20px; height: 0; overflow: hidden; border: ridge 3px #888888; background: #333;} .video_case_1 iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%;} .video_case_2 iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%;} .video_case_3 iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%;} .video_case_4 iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%;} @media only screen and (min-width: 768px) { .hmpge img {width: 40%; margin: 10px 0;} .hmpge h1 {font-size: 150%; letter-spacing: 2px; margin: 15px;} .hmpge h4 {letter-spacing: 3px; font-size: 120%; padding: 0 20px;} .hmpge p {letter-spacing: 3px; font-size: 120%; padding: 0 20px;} .video_cont {display: inline-block; width: 46%; height: auto; margin: 0 0 20px;} .video_cont h5 {font-size: 100%; letter-spacing: 2px; margin: 0 0 10px; text-shadow: 3px 3px 5px #9F9F9F;} } @media only screen and (min-width: 1024px) { .hmpge-top-l {display: inline-block; vertical-align: top; width: 22%; margin: 0 0 15px;} .hmpge-top-l img {width: 100%; margin: 0;} .hmpge-top-r {display: inline-block; vertical-align: middle; width: 72%; margin: 0 0 15px;} .hmpge-top-r p {letter-spacing: 2px; line-height: 130%; font-size: 110%; padding: 0 25px; margin-top: 0;} .hmpge h1 {font-size: 160%; font-weight: bold; letter-spacing: 6px; margin: 10px 0 30px;} .hmpge h2 {font-size: 120%; font-weight: bold; letter-spacing: 4px; margin: 0 0 10px;} .hmpge h3 {font-size: 120%;} .hmpge h4 {letter-spacing: 2px; line-height: 130%; font-size: 110%; padding: 0 20px; margin-top: 0;} .hmpge hr {margin: 30px 0;} .hmpge-b h2 {padding-top: 20px;} .hmpge-b h3 {font-size: 125%; margin-top: 20px;} .hmpge-b img {float: left; width: 30%; margin-left: 20px;} .hmpge-list-l {display: inline-block; width: 45%; vertical-align: top; margin-right: 20px;} .hmpge-list-r {display: inline-block; width: 45%; vertical-align: top;} .hmpge-list-l ul {padding-inline-start: 30px; overflow: hidden;} .hmpge-list-r ul {padding-inline-start: 40px; overflow: hidden;} .hmpge-video {display: inline-block; width: 45%; margin: 0 10px 30px;} .hmpge-video img {float: none; margin: 0 0 5px; width: 80%;} .hmpge-video a {text-transform: uppercase;} .video_cont {display: inline-block; width: 45%; height: auto; margin: 0 1% 30px;} .video_cont h5 {font-size: 100%; letter-spacing: 3px; margin: 0 0 10px;text-shadow: 3px 3px 5px #9F9F9F;} .video_thumbnail {width: 15%; margin: 1%;} } @media only screen and (min-width: 1152px) { .hmpge h1 {font-size: 200%;} .hmpge h2 {font-size: 160%;} .hmpge-top-l {width: 20%; margin: 0 0 15px;} .hmpge-top-l img {width: 100%; margin: 0;} .hmpge-top-r {display: inline-block; vertical-align: middle; width: 72%; margin: 0 0 15px;} .hmpge-top-r p {font-size: 110%; padding: 0 25px; margin-top: 0;} .hmpge h4 {font-size: 110%; padding: 0 40px; margin-top: 0;} } @media only screen and (min-width: 1280px) { .hmpge h1 {font-size: 220%;} .hmpge-top-l {width: 22%; margin: 0 0 20px;} .hmpge-top-l img {width: 100%; margin: 0;} .hmpge-top-r {display: inline-block; vertical-align: middle; width: 72%; margin: 0 0 20px;} .hmpge-top-r p {font-size: 130%; padding: 0 45px 0 25px; margin-top: 0;} .hmpge h2 {font-size: 160%;} .hmpge h4 {font-size: 130%; padding: 0 40px; margin-top: 0;} .hmpge hr {margin: 35px 0 30px;} .video_cont {display: inline-block; width: 45%; height: auto; margin: 0 1% 30px;} .video_cont h5 {font-size: 130%; letter-spacing: 3px; margin: 0 0 10px;} } @media only screen and (min-width: 1366px) { .hmpge h1 {font-size: 170%;} .hmpge-top-l {width: 22%; margin: 0 0 15px;} .hmpge-top-l img {width: 100%; margin: 0;} .hmpge-top-r {display: inline-block; vertical-align: middle; width: 75%; margin: 0 0 15px;} .hmpge-top-r p {font-size: 115%; padding: 0 45px 0 25px; margin-top: 0;} .hmpge h4 {font-size: 115%; padding: 0 40px; margin-top: 0;} } @media only screen and (min-width: 1440px) { .hmpge h1 {font-size: 180%;} .hmpge hr {margin: 30px 0 25px;} .video_cont {display: inline-block; width: 44%; height: auto; margin: 0 1% 30px;} } @media only screen and (min-width: 1600px) { .hmpge h1 {font-size: 200%;} .hmpge h2 {font-size: 180%;} .hmpge-top-l {width: 22%;} .hmpge-top-r p {letter-spacing: 2px; line-height: 130%; font-size: 130%; padding: 0 60px 0 25px;} .hmpge hr {margin: 35px 0 30px;} .video_cont {display: inline-block; width: 44%; height: auto; margin: 0 1% 30px;} } @media only screen and (min-width: 1680px) { .hmpge h1 {font-size: 220%;} .hmpge-top-r p {letter-spacing: 4px; line-height: 130%; font-size: 130%; padding: 0 35px;} .hmpge hr {margin: 35px 0 30px;} .video_cont {display: inline-block; width: 44%; height: auto; margin: 0 1% 30px;} .video_cont h5 {font-size: 125%; letter-spacing: 3px; margin: 0 0 10px;} } @media only screen and (min-width: 1920px) { .hmpge-top-l {display: inline-block; vertical-align: top; width: 22%;} .hmpge-top-l img {width: 100%; margin: 0;} .hmpge-top-r {display: inline-block; vertical-align: middle; width: 75%;} .hmpge-top-r p {letter-spacing: 4px; line-height: 130%; font-size: 140%; padding: 0 35px;} .hmpge h1 {font-size: 260%; font-weight: bold; color: #1D385F; text-transform: uppercase; letter-spacing: 6px; text-shadow: 3px 3px 4px #9F9F9F; line-height: 140%; margin: 15px 0 40px;} .hmpge h2 {font-size: 220%; font-weight: bold; color: #5F5F5F; text-transform: uppercase; letter-spacing: 3px; text-shadow: 3px 3px 6px #9F9F9F; line-height: 140%; margin: 0 0 10px;} .hmpge h3 {font-size: 120%; margin-left: 50px; margin-right: 50px;} .hmpge h4 {font-size: 130%; font-style: italic; letter-spacing: 4px; margin-left: 10px; margin-right: 50px;} .hmpge hr {margin: 50px 0;} .hmpge-b h2 {padding-top: 40px;} .hmpge-b h3 {font-size: 130%; margin-top: 30px;} .hmpge-b img {margin: 0 0 20px 40px;} .hmpge-list-l {display: inline-block; width: 48%; vertical-align: top; margin-right: 10px; overflow: hidden;} .hmpge-list-r {display: inline-block; width: 48%; vertical-align: top; margin-right: 10px; overflow: hidden;} .hmpge-list-l ul {padding-inline-start: 30px; overflow: hidden;} .hmpge-list-r ul {padding-inline-start: 40px; overflow: hidden;} .hmpge-video {display: inline-block; width: 32%; margin: 0 5px 30px;} .hmpge-video img {float: none; margin: 0 0 10px; width: 80%;} .hmpge-video a {text-transform: uppercase;} .video_cont {display: inline-block; width: 42%; height: auto; margin: 0 3% 3%;} .video_wrapper {width: 95%; padding: 10px 0; color: grey; background: #222;} .video_wrapper a {font-size: 80%; color: #fff; line-height: 250%; letter-spacing: 3px; white-space: nowrap;} } @media only screen and (min-width: 2200px) { .hmpge-top-l {display: inline-block; vertical-align: top; width: 22%; margin: 0 0 30px;} .hmpge-top-l img {width: 100%; margin: 0;} .hmpge-top-r {display: inline-block; vertical-align: middle; width: 75%; margin: 0 0 30px;} .hmpge-top-r p {letter-spacing: 4px; line-height: 140%; font-size: 160%; padding: 0 35px;} .hmpge h1 {font-size: 300%; font-weight: bold; color: #1D385F; text-transform: uppercase; letter-spacing: 6px; text-shadow: 3px 3px 4px #9F9F9F; line-height: 140%; margin: 15px 0 40px;} .hmpge h2 {font-size: 250%; font-weight: bold; color: #5F5F5F; text-transform: uppercase; letter-spacing: 3px; text-shadow: 3px 3px 6px #9F9F9F; line-height: 140%; margin: 0 0 10px;} .hmpge h3 {font-size: 120%; margin-left: 50px; margin-right: 50px;} .hmpge h4 {font-size: 160%; font-style: italic; letter-spacing: 4px; margin-left: 10px; margin-right: 50px;} .hmpge hr {margin: 50px 0;} .hmpge-b h2 {padding-top: 40px;} } /* END HOME PAGE ------------------------------------------------ */ /* UPCOMING EVENTS ------------------------------------------------ */ .featured-h {display: none;} .featured-v {background-color: #fff; margin-bottom: 4%; padding: 0 0 2%; overflow: hidden;} .featured-v hr {width: 80%; margin: 5% 0;} .featured-v h2 {font-size: 100%; font-weight: bold; letter-spacing: 2px; line-height: 140%; margin-bottom: 25px; text-transform: uppercase; color: #1D385F; text-shadow: 3px 3px 4px #9F9F9F; } .featured-v h3 {font-size: 100%; letter-spacing: 1px; font-weight: bold; line-height: 140%; margin-top: 25px;} .featured-v-cont {margin: 2%;} .featured-v-cont-l {display: inline-block; vertical-align: middle; width: 30%; margin-left: 2%;} .featured-v-cont-l img {border: solid 1px #000; width: 100%;} .featured-v-cont-r {display: inline-block; vertical-align: middle; width: 60%;} .featured-v-cont-r p {font-size: 100%; color: #1D385F; font-weight: bold; text-align: center;} .featured-v-cont-r a {font-size: 100%; color: #1D385F; font-weight: bold; text-align: center;} .upcoming-h {display: none;} .upcoming-v {background-color: #fff; margin: 0 0 4%; padding: 2% 0; overflow: hidden;} .upcoming-v hr {width: 95%; margin: 5% 0;} .lofty-v {color: #fff; font-size: 90%; font-weight: bold; text-align: center; line-height: 160%; letter-spacing: 4px; text-shadow: 3px 3px 6px #000; background: url('../../images/gradient-2.jpg'); background-repeat: no-repeat; background-size: cover; margin: 10px 0; padding: 10px;} .upcoming-v-cont {margin: 2%;} .upcoming-v hr {margin: 5% 0;} .upcoming-v-cont-l {display: inline-block; vertical-align: top; width: 35%; margin-left: 2%;} .upcoming-v-cont-l img {border: solid 1px #000; width: 100%;} .upcoming-v-cont-r {display: inline-block; vertical-align: top; width: 60%;} .upcoming-v-cont-r p {font-size: 80%; color: #1D385F; font-weight: bold; text-align: center; text-shadow: 3px 3px 6px #BFBFBF;} @media only screen and (min-width: 768px) { .featured-v {display: none;} .featured-h {display: block; background-color: #fff; padding: 1% 0; margin-bottom: 2%;} .featured-h h2 {font-size: 130%; font-weight: bold; letter-spacing: 4px; line-height: 140%; margin-bottom: 10px; text-transform: uppercase; color: #1D385F; text-shadow: 3px 3px 4px #9F9F9F;} .featured-h h3 {font-size: 120%; letter-spacing: 2px; font-weight: bold; line-height: 140%; margin-top: 15px;} .featured-h-cont {display: inline-block; width: 30%; margin: 20px 25px 10px;} .featured-h-cont p {text-align: center; font-size: 100%; font-weight: bold; letter-spacing: 2px; margin: 0; padding: 0 0 5px;} .featured-h-cont a {text-align: center; font-size: 100%; font-weight: bold; letter-spacing: 2px; margin: 0; padding: 0;} .featured-h-cont img {border: solid 1px #000; width: 75%; margin-bottom: 10px;} .upcoming-v {display: none;} .upcoming-h {display: block; background-color: #fff;} .upcoming-h-cont {display: inline-block; width: 22%; margin: 2.5% .5%;} .upcoming-h-cont img {border: solid 1px #000; width: 100%;} .upcoming-cont-text {font-size: 13px; font-weight: bold; letter-spacing: 1px; margin: 10px 0;} .upcoming-h-cont p {text-align: center; font-size: 13px; font-weight: bold; letter-spacing: 1px; margin: 0;} .upcoming-h-cont img {width: 65%;} } @media only screen and (min-width: 1024px) { .featured-h h2 {font-size: 140%; } .featured-h h3 {font-size: 130%;} .featured-h-cont {width: 30%; margin: 20px 25px 10px;} .featured-h-cont img {width: 60%; margin-bottom: 15px;} } @media only screen and (min-width: 1600px) { .featured-h {display: none;} .featured-v {display: block; padding: 2% 0;} .featured-v hr {margin: 10% 0;} .featured-v h2 {font-size: 100%; padding: 0 10px;} .featured-v h3 {font-size: 100%; letter-spacing: 2px; margin-top: 20px;} .featured-v-cont {margin: 2%;} .featured-v-cont-l {display: block; width: 80%; margin: 0;} .featured-v-cont-l img {width: 60%; margin-bottom: 5px;} .featured-v-cont-r {display: block; width: 80%;} .featured-v-cont-r p {font-size: 100%; letter-spacing: 1px;} .featured-v-cont-r a {font-size: 100%; letter-spacing: 1px;} .upcoming-h {display: none;} .upcoming-v {display: block; padding: 4% 0;} .upcoming-v hr {margin: 10% 0;} .upcoming-v-cont {margin: 2%;} .upcoming-v-cont-l {display: block; width: 80%; margin: 0;} .upcoming-v-cont-l img {width: 60%; margin-bottom: 10px;} .upcoming-v-cont-r {display: block; width: 80%;} .upcoming-v-cont-r p {font-size: 85%; letter-spacing: 1px;} } @media only screen and (min-width: 1440px) { .featured-v h2 {padding: 0 8%;} .featured-v h3 {padding: 0 4%;} } @media only screen and (min-width: 1586px) { .featured-v h2 {padding: 0 10%;} .featured-v h3 {padding: 0 8%;} } @media only screen and (min-width: 1665px) { .featured-v h2 {padding: 0 15%;} .featured-v h3 {padding: 0 12%;} } @media only screen and (min-width: 1794px) { .featured-v h3 {padding: 0; margin-top: 8%;} } @media only screen and (min-width: 1920px) { .featured-v {margin-bottom: 7%; padding: 0 0 2%;} .featured-v hr {width: 80%; margin: 7% 0;} .featured-v h2 {font-size: 120%; padding: 0 10%; letter-spacing: 6px; margin-bottom: 8%;} .featured-v h3 {font-size: 120%; letter-spacing: 2px; font-weight: bold; line-height: 140%; margin-top: 25px;} .featured-v-cont-l {display: block; width: 80%; margin: 0;} .featured-v-cont-l img {width: 70%;} .featured-v-cont-r {display: block; width: 80%;} .upcoming-v {margin-bottom: 7%;} .upcoming-v-cont-l img {width: 70%; margin: 0;} .upcoming-v-cont-r p {font-size: 100%;} } /* *END* UPCOMING EVENTS ------------------------------------------------ */ /* EVENT INFORMATION PAGE ------------------------------------------------ */ .upc-events-cont {background-color: #fff; padding: 10px 0;} .upc-events-cont hr {margin: 20px 0; padding: 1px; background: #8FA8BF; width: 95%;} .upc-events-cont h1 {font-size: 100%; letter-spacing: 2px; line-height: 180%; margin: 10px 20px 0; text-shadow: 3px 3px 6px #BFBFBF;} .upc-events-cont h2 {font-size: 60%; letter-spacing: 2px; line-height: 120%;} .upc-events-box {display: inline-block; margin: 30px 0 0; padding: 0 0 30px; width: 80%; border: solid 1px;} .upc-events-box img {width: 80%; margin: 30px 0;} .upc-events-box h3 {font-size: 90%; letter-spacing: 2px; text-shadow: 1px 1px 5px #999;} .upcEventsButton {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,444444+100 */ background: rgb(136,136,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ padding: 2px 0 6px; width: 82%; margin: 6% 0;} .upcEventsButton a {color: #fff; font-size: 75%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .upcEventsButton a:hover {color: #AFE3FF;} @media only screen and (min-width: 414px) { .upc-events-cont h1 {font-size: 110%; letter-spacing: 3px; margin: 10px 20px 0;} } @media only screen and (min-width: 1000px) { .upc-events-cont {padding: 15px 0 25px;} .upc-events-cont hr {margin: 0 0 30px; padding: 1px; background: #8FA8BF; width: 95%;} .upc-events-cont h1 {font-size: 160%; letter-spacing: 6px; margin: 10px} .upc-events-cont h2 {font-size: 140%; font-weight: bold; letter-spacing: 6px; line-height: 140%; padding: 0 30px;} .upc-events-box {display: inline-block; margin: 40px 30px 50px; padding: 0 0 30px; width: 40%; border: solid 1px;} .upc-events-box img {width: 80%; margin: 35px 0;} .upc-events-box h3 {font-size: 100%; letter-spacing: 3px; text-shadow: 1px 1px 5px #999;} .upcEventsButton {padding: 3px 0 6px; width: 80%; margin: 7% 0;} .upcEventsButton a {font-size: 80%;} } @media only screen and (min-width: 1280px) { .upc-events-cont h1 {font-size: 180%; letter-spacing: 5px; line-height: 160%;} .upc-events-cont h2 {font-size: 140%; font-weight: bold; letter-spacing: 5px; line-height: 140%; padding: 0 30px;} .upc-events-box {display: inline-block; margin: 50px 20px 80px; padding: 0 0 30px; width: 40%; border: solid 1px;} .upc-events-box img {width: 80%; margin: 35px 0;} .upc-events-box h3{font-size: 100%; letter-spacing: 3px; text-shadow: 1px 1px 5px #999;} .upcEventsButton {padding: 3px 10px 6px; width: 80%; margin: 7% 0;} .upcEventsButton a {color: #fff; font-size: 85%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} } @media only screen and (min-width: 1920px) { .upc-events-cont {padding: 20px 0;} .upc-events-cont h1 {font-size: 200%; letter-spacing: 8px; line-height: 160%; margin: 0 0 30px;} .upc-events-cont hr {margin: 0 0 40px; padding: 1px; background: #8FA8BF; width: 95%;} .upc-events-cont h2 {font-size: 160%; font-weight: bold; letter-spacing: 6px; line-height: 140%; padding: 0 80px;} .upc-events-box {display: inline-block; margin: 30px 60px 60px; padding: 0 0 10px; width: 30%;} .upc-events-box img {width: 80%; margin: 25px 0 15px;} .upc-events-box h3 {font-size: 120%; letter-spacing: 4px; text-shadow: 1px 1px 5px #999;} .upcEventsButton {padding: 4px 10px 6px; width: 60%; margin: 7% 0;} .upcEventsButton a {color: #fff; font-size: 100%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} } /* END EVENT INFORMATION PAGE ------------------------------------------------ */ /* Intro Page ------------------------------------------------ */ .intro_page-top-l {display: block; margin: 2% 1% 0;} .intro_page-top-l h1 {font-size: 140%; letter-spacing: 2px; font-weight: bold; line-height: 140%; text-shadow: 3px 3px 6px #BFBFBF;} .intro_page-top-l h3, .intro_page-top-b h3 {text-align: justify; font-size: 100%; font-weight: normal; letter-spacing: 2px; line-height: 130%; padding: 0 2.5%;} .intro_page-top-l h4, .intro_page-top-b h4 {text-align: justify; font-size: 80%; padding: 0 2.5%;} .intro_page-top-l h5 {font-size: 70%;} .intro_page-top-l p {font-size: 120%; text-align: justify; padding: 0 10px;} .intro_page-top-r {display: block; margin: 0 1%;} .intro_page-top-r img {width: 85%; border: solid 1px #293F6F; margin: 3% 0;} .intro_video_cont {display: block; width: 95%; margin: 5% 0;} .intro_video_cont h5 {font-size: 100%; letter-spacing: 2px; margin-bottom: 5px;} .intro_video_case {position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; overflow: hidden; border: ridge 3px #888888; background-color: #000;} .intro_video_case iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .intro_video {width: 100%; height: 100%;} .intro_video_wrapper {width: 99.5%; padding: 1% 0; line-height: 180%; background-color: #000;} .intro_video_wrapper a {font-size: 11px; color: #fff; padding: 0 1%; white-space: nowrap;} .info-box {display: inline-block; padding: 2%; width: 40%; margin: 2% 2% 4%;} .info-box img {border: ridge 1px #5F5D59; border-radius: 3px; width: 100%;} .info-box a {color: #00488F; text-decoration: none; font-size: 60%; font-weight: bold; letter-spacing: 2px; text-shadow: 2px 2px 4px #6F665A; } @media only screen and (min-width: 800px) { .intro_video_cont {display: inline-block; width: 45%; margin: 0 1.5% 2%;} .intro_video_cont h5 {font-size: 90%; letter-spacing: 1px; margin-bottom: 5px;} } @media only screen and (min-width: 1024px) { .intro_page-top-l h1 {font-size: 160%; letter-spacing: 4px;} .intro_page-top-l h3, .intro_page-top-b h3 {font-size: 120%; letter-spacing: 3px; line-height: 140%; padding: 0 1%;} .intro_page-top-l h4, .intro_page-top-b h4 {font-size: 100%; padding: 0 2%;} .intro_page-top-l h5 {font-size: 90%;} .intro_page-top-l p {font-size: 120%; text-align: justify; padding: 0 10px;} .intro_page-top-r {display: block; margin: 0 1%;} .intro_page-top-r img {width: 50%; border: solid 1px #293F6F; margin: 1% 0 3%;} .intro_video_cont {display: inline-block; width: 45%; height: auto; margin: 0 2% 3%;} .intro_video_cont h5 {font-size: 100%; letter-spacing: 1px;} .info-box {padding: 1%; width: 18%; margin: 2% 1.5% 4%;} .info-box img {margin: 5px 0;} .info-box a {font-size: 100%; letter-spacing: 2px;} } @media only screen and (min-width: 1280px) { .intro_page-top-l {display: inline-block; vertical-align: top; width: 58%; margin: 0;} .intro_page-top-l h3, .intro_page-top-b h3 {text-align: left; font-size: 125%; letter-spacing: 3px; line-height: 150%; padding: 0 3%;} .intro_page-top-l h4 {text-align: left; font-size: 100%; letter-spacing: 3px; line-height: 150%;} .intro_page-top-l h5 {text-align: left; font-size: 125%; letter-spacing: 3px; line-height: 150%; margin-bottom: 5px;} .intro_page-top-r {display: inline-block; vertical-align: top; width: 38%; margin: 2% 2% 0 1%;} .intro_page-top-r img {width: 80%; margin: 0;} .intro_video_cont {width: 40%; margin: 0 3.5% 4%;} .info-box {padding: 1%; width: 20%; margin: 2% 3% 4%;} .info-box a {font-size: 100%;} } @media only screen and (min-width: 1920px) { .intro_page-top-l {display: inline-block; vertical-align: top; width: 65%; margin: 0;} .intro_page-top-l p, .intro_page-top-b p {text-align: left; font-size: 100%; letter-spacing: 3px; line-height: 150%; padding: 0 3%;} .intro_page-top-l h4, .intro_page-top-b h4 {text-align: left; font-size: 100%; letter-spacing: 3px; line-height: 150%;} .intro_page-top-r {display: inline-block; vertical-align: top; width: 32%; margin: 2% 0 0;} .intro_page-top-r img {width: 85%; margin: 0;} .intro_page-top-b {margin: 2% 0;} .intro_video_cont {width: 40%; margin: 0 3.5% 4%;} .intro_video_cont h5 {text-align: center; font-size: 125%; letter-spacing: 3px; line-height: 150%; margin-bottom: 5px;} .info-box {padding: 1%; width: 18%; margin: 2% 1.5% 4%;} .info-box a {font-size: 100%;} } @media only screen and (min-width: 2200px) { .intro_video_cont h5 {text-align: center; font-size: 140%; letter-spacing: 3px; line-height: 150%; margin-bottom: 5px;} } /* END - Intro Page ------------------------------------------------ */ /* HOME PAGE ------------------------------------------------ */ .home-cont {background-color: #fff; padding: 10px 0 5px;} .home-cont-top {display: inline-block; vertical-align: top; width: 60%; padding: 0; margin: 0;} .home-cont h1 {font-size: 140%; font-weight: bold; color: #1D385F; text-transform: uppercase; letter-spacing: 3px; text-shadow: 3px 3px 6px #9F9F9F; line-height: 160%; margin: 10px 0; font-family: Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, serif;} .home-cont h2 {font-size: 120%; font-weight: bold; color: #5F5F5F; text-transform: uppercase; letter-spacing: 2px; text-shadow: 3px 3px 6px #9F9F9F; line-height: 140%; margin: 0; font-family: Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, serif;} .home-cont h3 {font-size: 90%; font-weight: bold; color: #5F5F5F; letter-spacing: 1px; text-shadow: 1px 1px 4px #9F9F9F; line-height: 140%; margin: 10px; font-family: Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, serif;} .home-cont h4 {font-size: 90%; font-weight: bold; font-style: italic; color: #354760; letter-spacing: 2px; text-shadow: 1px 1px 4px #9F9F9F; line-height: 140%; margin: 10px 15px; font-family: Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, serif;} .home-cont img {border: solid 1px #000; width: 92%;} .home-cont hr {width: 80%; margin: 15px 0 20px; padding: 1px; background: #8FA8BF;} .home-cont-img-l {display: inline-block; vertical-align: top; width: 15%; margin: 20px 0 0;} .home-cont-img-r {display: inline-block; vertical-align: top; width: 15%; margin: 20px 0 0;} .home-cont-img-b {width: 25%; margin: 10px 0 0;} .home-cont-item {border: solid 1px #000; margin: 20px 0 35px; width: 832px; height: 468px;} .home-cont-slider {margin: 10px; background-color: #3f3f3f;} .home-video_case {position: relative; padding-bottom: 56.25%; padding-top: 0; height: 0; border-bottom: ridge 2px #888; overflow: hidden;} .home-video_case iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .home-video {width: 100%; height: 100%;} .home-video_wrapper {width: 100%; margin: 3px 0 5px; line-height: 180%;} .home-video_wrapper a {font-size: 60%; color: #fff; padding: 0 .7%; white-space: nowrap;} @media only screen and (min-width: 1024px) { .home-cont {padding: 20px 0; text-align: center; font-weight: bold; letter-spacing: 2px; color: #354760; text-shadow: 2px 2px 4px #999;} .home-cont h1 {font-size: 160%; font-weight: bold; color: #1D385F; text-transform: uppercase; letter-spacing: 6px; text-shadow: 3px 3px 6px #9F9F9F; line-height: 140%; margin: 20px 0 10px; font-family: Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, serif;} .home-cont h2 {font-size: 140%; font-weight: bold; color: #5F5F5F; text-transform: uppercase; letter-spacing: 6px; text-shadow: 3px 3px 6px #9F9F9F; line-height: 140%; margin: 0; font-family: Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, serif;} .home-cont h3 {font-size: 110%; letter-spacing: 2px; margin: 15px 20px;} .home-cont h4 {font-size: 110%; letter-spacing: 3px; margin: 15px 50px;} .home-cont-slider {margin: 30px 30px 20px; border: ridge 3px silver;} .home-cont img {border-radius: 5px; width: 100%;} .home-cont hr {width: 90%; margin: 15px 0 20px;} .home-cont-slider img {border-radius: 5px; width: 100%;} } @media only screen and (min-width: 1280px) { .home-cont h1 {font-weight: bold; color: #1D385F; text-transform: uppercase; letter-spacing: 4px; text-shadow: 6px 6px 4px #9F9F9F; line-height: 140%; padding: 0 60px; font-family: Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, serif;} .home-cont-slider img {border-radius: 5px; width: 100%;} } @media only screen and (min-width: 1400px) { .home-video_wrapper a {font-size: 70%; padding: 0 .5%;} } @media only screen and (min-width: 1920px) { .home-cont {font-size: 18px;} .home-cont-top {display: inline-block; vertical-align: top; width: 60%; padding: 0; margin: 0;} .home-cont h1 {font-size: 180%; font-weight: bold; color: #1D385F; text-transform: uppercase; letter-spacing: 4px; text-shadow: 3px 3px 4px #9F9F9F; line-height: 140%; margin: 15px 0 0; font-family: Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, serif;} .home-cont h2 {font-size: 160%; font-weight: bold; color: #5F5F5F; text-transform: uppercase; letter-spacing: 3px; text-shadow: 3px 3px 6px #9F9F9F; line-height: 140%; margin: 0; font-family: Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, serif;} .home-cont h3 {letter-spacing: 3px; margin: 15px 30px;} .home-cont h4 {font-style: italic; letter-spacing: 4px; margin: 15px 60px;} .home-cont p {font-size: 120%; font-weight: bold; color: #5F5F5F; text-align: center; letter-spacing: 2px; line-height: 140%; margin: 20px 40px; font-family: Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, serif;} .home-cont hr {width: 80%; margin: 15px 0 25px;} .home-cont-img-l {display: inline-block; vertical-align: top; width: 10%; margin: 15px 0 0 20px;} .home-cont-img-r {display: inline-block; vertical-align: top; width: 10%; margin: 15px 20px 0 0;} .home-cont-img-b {width: 25%; margin: 0 0 15px;} .home-cont-slider {margin: 30px 40px 30px; border: ridge 4px silver;} .home-video_wrapper {width: 100%; margin: 7px 0 9px; line-height: 180%;} .home-video_wrapper a {font-size: 90%; padding: 0 1%;} } /* *END* HOME PAGE ------------------------------------------------ */ /* ICON BOXES ------------------------------------------------ */ .stu_box {display: inline-block; width: 40%; margin: 15px;} .stu_box img {width: 80%; border: 1px solid #8F8F8F; margin: 0 0 5px;} .stu_box a {color: #00227F; text-decoration: none; font-size: 90%; font-weight: bold; margin: 0; text-shadow: 3px 3px 6px #666;} .stu_box a:hover {color: #7F0000; text-decoration: none; text-shadow: 3px 3px 6px #666; } @media only screen and (min-width: 800px) { .stu_box {width: 22%; margin: 1% .5% 2%;} .stu_box img {width: 90%} .stu_box a {font-size: 100%;} } @media only screen and (min-width: 1024px) { .stu_box {width: 22%; margin: 0 .5% 2%;} .stu_box img {width: 160px; margin: 0 0 5px;} .stu_box a {color: #00227F; text-decoration: none; font-size: 16px; font-weight: bold; margin: 0; text-shadow: 3px 3px 3px #666666; line-height: 125%;} } @media only screen and (min-width: 1920px) { .stu_box { display: inline-block; padding: 0px; width: 20%; height: auto; margin: 0 15px 25px;} .stu_box img { width: 60%; border: 1px solid #8F8F8F; float: none; margin: 0 0 5px;} .stu_box a { color: #00227F; text-decoration: none; font-size: 15px; font-weight: bold; margin: 0; text-shadow: 3px 3px 3px #666666; line-height: 125%;} } /* *END* ICON BOXES ------------------------------------------------ */ /* INFO BOXES ------------------------------------------------ */ .boxes {margin-top: 2%;} .box {display: inline-block; vertical-align: top; width: 31%; padding: 5px 0; margin: 0 .5%; background-color: #fff;} .box img {border: ridge 1px #5F5D59; border-radius: 3px; width: 90%;} .box a {color: #00488F; text-decoration: none; font-size: 60%; font-weight: bold; letter-spacing: 0px; line-height: 200%; text-shadow: 2px 2px 4px #6F665A; } .box a:hover {color: #5F1717; text-decoration: underline;} @media only screen and (min-width: 375px) { .box a {font-size: 70%;} } @media only screen and (min-width: 414px) { .box a {font-size: 90%;} } @media only screen and (min-width: 480px) { .box a {font-size: 100%;} } @media only screen and (min-width: 768px) { .box {padding: 10px 0 5px; width: 28%; margin: 0 2%;} .box a {font-size: 120%; letter-spacing: 2px; line-height: 200%;} .box a:hover {color: #5F1717; text-decoration: underline;} } @media only screen and (min-width: 1280px) { .box {display: inline-block; vertical-align: top; padding: 15px; width: 40%; background-color: #fff;} .box img {border: ridge 1px #5F5D59; border-radius: 3px; width: 100%;} .box a {color: #00488F; text-decoration: none; font-size: 120%; font-weight: bold; letter-spacing: 2px; line-height: 200%; text-shadow: 2px 2px 4px #6F665A; } .box a:hover {color: #5F1717; text-decoration: underline; text-shadow: 2px 2px 4px #6F665A; } } @media only screen and (min-width: 1366px) { .box {display: inline-block; vertical-align: top; padding: 15px; width: 40%; background-color: #fff;} .box img {border: ridge 1px #5F5D59; border-radius: 3px; width: 100%;} .box a {color: #00488F; text-decoration: none; font-size: 120%; font-weight: bold; letter-spacing: 2px; line-height: 200%; text-shadow: 2px 2px 4px #6F665A; } .box a:hover {color: #5F1717; text-decoration: underline; text-shadow: 2px 2px 4px #6F665A; } } @media only screen and (min-width: 1920px) { .boxes {margin-top: 7%;} .box {width: 25%; margin: 0 2%;} .box img {border: ridge 1px #5F5D59; border-radius: 3px; width: 99%;} .box a {color: #00488F; text-decoration: none; font-size: 150%; font-weight: bold; letter-spacing: 2px; line-height: 200%; text-shadow: 2px 2px 4px #6F665A; } .box a:hover {color: #5F1717; text-decoration: underline; text-shadow: 2px 2px 4px #6F665A; } } /* *END* INFO BOXES ------------------------------------------------ */ .bill-info {width: 100%} .bill-info p {font-size: 90%; text-align: justify; line-height: 140%; margin: 0 10px 10px;} .bill-cfrm {width: 100%;} .bill-cfrm-l {display: block;} .bill-cfrm-r {display: block;} .bill-cc {width: 100%;} .bill-instr {font-size: 90%; line-height: 140%; letter-spacing: 1px; width: 96%; height: 60px;} .bill-err {color: #7F0000; font-weight: bold; text-align: center; border: solid 2px; width: 90%; padding: 5px; margin: 5px 0;} .secTitle {width: 35%; font-size: 80%; font-weight: bold; letter-spacing: 2px; color: #000000;} .secInfo {width: 90%; font-size: 80%; letter-spacing: 2px; color: #18424F; background: #DEE7EC; border-radius: 0; border: solid 1px;} .secInfo-dd {width: 90%; height: 26px; font-size: 80%; letter-spacing: 2px; color: #18424F; background: #DEE7EC; border-radius: 0; border: solid 1px;} .secinfo-td {width: 32%; padding-right: 0;} .secInfo-card {width: 95%; font-size: 120%; letter-spacing: 2px; color: #18424F; background: #DEE7EC; border-radius: 0; border: solid 1px;} .secInfo-mo {width: 89%; font-size: 120%; letter-spacing: 2px; color: #18424F; background: #DEE7EC; border-radius: 0; border: solid 1px;} .secInfo-yr {width: 91%; font-size: 120%; letter-spacing: 2px; color: #18424F; background: #DEE7EC; border-radius: 0; border: solid 1px;} .cc-cont-l {display: block; width: 95%;} .cc-cont-l h3 {color: #002E5F; margin-bottom: 30px;} .cc-cont-l hr {margin: 40px 0; padding: 1px; background: #8FA8BF; width: 100%;} .cc-cont-r {display: block; width: 95%; margin: 0 0 3%;} .cc-cont-r h3 {color: #002E5F; margin-bottom: 30px;} .billButton {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,444444+100 */ background: rgb(136,136,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ padding: 4px 0 6px; width: 90%; margin: 3% 0; color: #fff; font-size: 90%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .billButton a {color: #fff; font-size: 90%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .billButton a:hover {color: #AFE3FF;} .subButton {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,444444+100 */ background: rgb(136,136,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ padding: 4px 0 5px; width: 90%; margin: 3% 0; color: #fff; font-size: 90%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .subButton a {color: #fff; font-size: 90%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .confirmButton {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,444444+100 */ background: rgb(136,136,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ padding: 5px 0; width: 40%; margin: 6% 3%; color: #fff; font-size: 90%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .confirmButton a {color: #fff; font-size: 90%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .confirmButton a:hover {color: #AFE3FF;} .bill-popup {background-color: #fff; width: 95%; padding: 0 5px 18px;} .bill-popup h1 {font-size: 125%; letter-spacing: 2px; text-align: center;} .bill-popup-text {font-size: 100%; text-align: center; border: double #7f0000; margin: 5px 5px 15px; padding: 10px;} .popupButton {font-size: 90%; font-weight: bold; padding: 5px 5px 5px 7px;} @media only screen and (min-width: 414px) { .bill-popup {width: 90%; padding: 0 5px 20px;} .bill-popup h1 {font-size: 130%; letter-spacing: 3px;} .bill-popup-text {font-size: 110%; margin: 5px 10px 15px; padding: 10px;} .popupButton {font-size: 100%;} } @media only screen and (min-width: 1024px) { .bill-info {width: 70%} .bill-cfrm-l {display: inline-block; vertical-align: top; width: 48%;} .bill-cfrm-r {display: inline-block; vertical-align: top; width: 48%;} .bill-cc {width: 100%;} .bill-err {color: #7F0000; font-weight: bold; text-align: center; border: solid 2px; width: 80%; padding: 10px; margin: 10px 0;} .secTitle {width: 35%; font-size: 120%; font-weight: bold; letter-spacing: 2px; color: #000000;} .secInfo {width: 90%; font-size: 120%; letter-spacing: 2px; color: #18424F; background: #DEE7EC;} .secInfo-dd {width: 90%; height: 35px; font-size: 120%; letter-spacing: 2px; color: #18424F; background: #DEE7EC;} .secinfo-td {width: 27%} .secInfo-card {width: 95%; font-size: 120%; letter-spacing: 2px; color: #18424F; background: #DEE7EC;} .secInfo-mo {width: 100%; font-size: 120%; letter-spacing: 2px; color: #18424F; background: #DEE7EC;} .secInfo-yr {width: 92%; font-size: 120%; letter-spacing: 2px; color: #18424F; background: #DEE7EC;} .cc-cont-l {display: inline-block; vertical-align: top; width: 35%; margin: 0 3% 5%;} .cc-cont-l hr {display: none;} .cc-cont-r {display: inline-block; vertical-align: top; width: 55%; margin: 0 0 5%;} .billButton {width: 70%; padding: 4px 0 6px; font-size: 98%; letter-spacing: 3px;} .billButton a {font-size: 95%; letter-spacing: 3px;} .subButton {width: 95%; padding: 4px 0 6px; font-size: 98%; letter-spacing: 3px;} .subButton a {font-size: 95%; letter-spacing: 3px;} .bill-popup {width: 50%;} .bill-popup h1 {font-size: 150%;} .bill-popup-text {font-size: 130%; letter-spacing: 3px; margin: 10px 20px 20px; padding: 20px;} .popupButton {font-size: 120%;} } @media only screen and (min-width: 1600px) { .secTitle {width: 35%; font-size: 120%; font-weight: bold; letter-spacing: 2px; color: #000000;} .secInfo {width: 90%; font-size: 120%; letter-spacing: 2px; color: #18424F; background: #DEE7EC;} .secInfo-dd {width: 90%; height: 35px; font-size: 120%; letter-spacing: 2px; color: #18424F; background: #DEE7EC;} .secinfo-td {width: 27%} .secInfo-card {width: 92%; font-size: 120%; letter-spacing: 2px; color: #18424F; background: #DEE7EC;} .secInfo-mo {width: 100%; font-size: 120%; letter-spacing: 2px; color: #18424F; background: #DEE7EC;} .secInfo-yr {width: 85%; font-size: 120%; letter-spacing: 2px; color: #18424F; background: #DEE7EC;} } @media only screen and (min-width: 1920px) { .bill-info {width: 70%; margin: 60px 0;} .bill-info p {font-size: 120%; text-align: justify; line-height: 140%; margin: 0 10px 10px;} .bill-cfrm-l {display: inline-block; width: 40%;} .bill-cfrm-r {display: inline-block; width: 40%;} .bill-cc {width: 80%;} .bill-instr {font-size: 120%; letter-spacing: 2px; width: 100%; height: 80px;} .bill-err {color: #7F0000; font-weight: bold; text-align: center; border: solid 2px; width: 80%; padding: 10px; margin: 10px 0;} .secTitle {width: 40%; font-size: 120%; font-weight: bold; letter-spacing: 2px; color: #000000;} .secInfo {width: 80%; font-size: 120%; letter-spacing: 2px; color: #18424F; background: #DEE7EC;} .secInfo-dd {width: 80%; height: 30px;} .secinfo-td {width: 27%} .secInfo-card {width: 82%; font-size: 120%; letter-spacing: 2px; color: #18424F; background: #DEE7EC;} .secInfo-mo {width: 88%; font-size: 120%; letter-spacing: 2px; color: #18424F; background: #DEE7EC;} .secInfo-yr {width: 67%; font-size: 120%; letter-spacing: 2px; color: #18424F; background: #DEE7EC;} .cc-cont-l {display: inline-block; vertical-align: top; width: 38%; margin: 0 5% 5% 0;} .cc-cont-l hr {display: none;} .cc-cont-r {display: inline-block; vertical-align: top; width: 55%; margin: 0 0 5%;} .billButton {width: 50%; padding: 4px 0 6px; font-size: 98%; letter-spacing: 3px;} .billButton a {font-size: 95%; letter-spacing: 3px;} .subButton {width: 82%; padding: 4px 0 6px; font-size: 98%; letter-spacing: 3px; margin: 5% 0;} .subButton a {font-size: 95%; letter-spacing: 3px;} .confirmButton {width: 30%; margin: 6%; font-size: 110%; letter-spacing: 3px;} .confirmButton a {font-size: 95%; letter-spacing: 3px;} .bill-popup {width: 40%;} .bill-popup h1 {font-size: 200%; letter-spacing: 4px} .bill-popup-text {font-size: 180%; margin: 10px 20px 20px; padding: 20px;} .popupButton {font-size: 160%;} } /* END - ONLINE EVENT CHECKOUT PAGE ------------------------------------------------ */ /* CONTACT US PAGE ------------------------------------------------ */ .contact-info-l {display: block; vertical-align: top; padding: 0 20px;} .contact-info-r {display: block; vertical-align: top; padding: 0 20px;} @media only screen and (min-width: 1024px) { .contact-info-l {display: inline-block; vertical-align: top; width: 45%; padding: 0; margin-right: 20px;} .contact-info-r {display: inline-block; vertical-align: top; width: 45%; padding: 0;} } @media only screen and (min-width: 1920px) { .contact-info-l {display: inline-block; vertical-align: top; width: 46%; padding: 0; font-size: 120%;} .contact-info-r {display: inline-block; vertical-align: top; width: 46%; padding: 0; font-size: 120%;} } /* END - CONTACT US PAGE ------------------------------------------------ */ /* ONLINE EVENTS PAGE ------------------------------------------------ */ .mainWrapper {width: 100%;} .listBanner {background-color: #fff; color: #5F5F5F; padding: 15px 0 5px; margin: 2% 0 0;} .listBanner h1 {font-size: 100%; font-weight: bold; letter-spacing: 2px; margin: 0 0 5px; color: #293F6F; text-shadow: 6px 6px 6px #BFBFBF;} .listBanner h2 {font-size: 80%; font-weight: bold; letter-spacing: 1px; color: #000; text-shadow: 3px 3px 3px #BFBFBF;} .sidebar {display: none;} .sidebar-m {display: block; width: 100%; margin: 0 0 1%;} /* Add a black background color to the top navigation */ .topnav {background-color: #0a2d4e; overflow: hidden;} /* Style the links inside the navigation bar */ .topnav a {float: left; display: block; color: #fff; text-align: center; padding: .7em 1rem .6em; text-decoration: none; font-size: .8em;} /* Change the color of links on hover */ .topnav a:hover {background-color: #ddd; color: #000;} .topnav a:active{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6d7888+0,8491a3+50,6d7888+100 */ background: rgb(109,120,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(109,120,136,1) 0%, rgba(132,145,163,1) 50%, rgba(109,120,136,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(109,120,136,1) 0%,rgba(132,145,163,1) 50%,rgba(109,120,136,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(109,120,136,1) 0%,rgba(132,145,163,1) 50%,rgba(109,120,136,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6d7888', endColorstr='#6d7888',GradientType=0 ); /* IE6-9 */ color: #fff;} /* Hide the link that should open and close the topnav on small screens */ .topnav .icon {display: none;} /* When the screen is less than 768 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */ .topnav a:not(:first-child) {display: none;} .topnav a.icon {display: block;} /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ .topnav.responsive {position: relative;} .topnav.responsive a.icon {position: absolute; right: 0; top: 0;} .topnav.responsive a {float: none; display: block; text-align: left;} .mainContent {display: block;} .evt-msg {padding: 5px 5px 10px; margin: 0 0 2%; color: #4F4F4F; background-color: #fff;} .evt-msg h1 {font-size: 100%; font-weight: bold; text-align: center; letter-spacing: 1px; line-height: 160%; text-shadow: 3px 3px 3px #BFBFBF;} .evt-msg h2 {font-size: 80%; font-weight: bold; text-align: center; letter-spacing: 1px; line-height: 140%; text-shadow: 3px 3px 3px #BFBFBF;} .evt-msg hr {margin: 25px 0 15px; padding: 1px; background: #8FA8BF; width: 95%;} .evt-msg-sb {display: none;} .evt-msg-mm {display: block;} .evt-prm {width: 100%; padding: 20px 0; margin: 0 0 4%; color: #4F4F4F; background-color: #fff;} .evt-prm h1 {font-size: 85%; letter-spacing: 0px; color: #000; margin: 0 10px 30px; text-shadow: 3px 3px 3px #BFBFBF;} .evt-prm-cont {display: block; margin-bottom: 20px;} .evt-prm-cont-l {display: inline-block; vertical-align: top; width: 45%; margin: 0;} .evt-prm-cont-l img {border: solid 1px #000; width: 80%;} .evt-prm-cont-r {display: inline-block; vertical-align: top; width: 50%; margin: 0;} .evt-prm-cont-r h4 {font-size: 80%; font-weight: bold; letter-spacing: 0px; margin: 0;} .evtprmButton {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,444444+100 */ background: rgb(136,136,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ width: 70%; margin-top: 10px; padding: 0 0 4px;box-shadow: 3px 3px 8px #8f8f8f;} .evtprmButton a {color: #fff; font-size: 70%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .evtprmButton a:hover {color: #AFE3FF;} .sidebarButton {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,444444+100 */ background: rgb(136,136,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ box-shadow: 3px 3px 8px #8f8f8f; width: 60%; margin: 20px 0 40px; padding: 4px 0 5px;} .sidebarButton a {color: #fff; font-size: 90%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .sidebarButton a:hover {color: #AFE3FF;} @media only screen and (min-width: 414px) { .evt-msg h1 {font-size: 110%;} .evt-msg h2 {font-size: 90%;} } @media only screen and (min-width: 737px) { .mainWrapper {width: 100%; margin-top:20px;} .listBanner {background-color: #fff; width: 100%; color: #5F5F5F; padding: 15px 0 5px; margin: 0;} .listBanner h1 {font-size: 140%; font-weight: bold; letter-spacing: 2px; margin: 0 0 5px; padding: 0 120px; color: #293F6F; text-shadow: 6px 6px 6px #BFBFBF;} .listBanner h2 {font-size: 140%; font-weight: bold; letter-spacing: 1px; color: #000; text-shadow: 3px 3px 3px #BFBFBF;} .sidebar-m {display: none;} .sidebar {display: inline-block; vertical-align: top; float: left; width: 25%;} .sidebar-cont {background-color: #fff; padding: 20px 0 30px; margin: 10px 1% 0 0; height: auto;} .sidebar h2 {font-size: 100%; letter-spacing: 0px; text-align: center; margin: 0; color: #293F6F; text-shadow: 2px 2px 3px #BFBFBF;} .sidebar h4 {font-size: 90%; letter-spacing: 0px; text-align: center; color: #4F4F4F; text-shadow: 2px 2px 3px #BFBFBF; margin: 15px;} .mainContent {display: inline-block; vertical-align: top; width: 73%; margin: 10px 0 0;} .evt-msg {width: 100%; padding: 20px 0; margin: 0 0 30px; color: #4F4F4F; background-color: #fff;} .evt-msg h1 {padding: 0 20px;} .evt-msg h2 {padding: 0 20px; font-size: 110%; font-weight: bold; text-align: justify; letter-spacing: 2px; text-shadow: 3px 3px 3px #BFBFBF;} .evt-msg-sb {display: block;} .evt-msg-mm {display: none;} .evt-prm {padding: 20px 0; margin: 0 0 30px; color: #4F4F4F; background-color: #fff;} .evt-prm h1 {font-size: 140%; letter-spacing: 1px; color: #000; margin: 0 0 30px; text-shadow: 3px 3px 3px #BFBFBF;} .evt-prm-cont {display: inline-block; width: 42%; vertical-align: top;} .evt-prm-cont-l {display: block; margin: 0;} .evt-prm-cont-l img {border: solid 1px #000; width: 60%;} .evt-prm-cont-r {display: block; margin: 0;} .evt-prm-cont-r h4 {font-size: 80%; font-weight: bold; letter-spacing: 1px; margin: 5px 0 10px;} .evtprmButton {width: 60%; margin-bottom: 5px; padding: 4px 0 6px;} .evtprmButton a {color: #fff; font-size: 100%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .evtprmButton a:hover {color: #AFE3FF;} .sidebarButton {width: 80%; margin: 20px 0; padding: 2px 0 5px;} .sidebarButton a {color: #fff; font-size: 80%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .sidebarButton a:hover {color: #AFE3FF;} } @media only screen and (min-width: 1000px) { .evt-msg h1 {font-size: 140%; font-weight: bold; text-align: center; letter-spacing: 2px;} .evt-msg h2 {font-size: 110%; font-weight: bold; text-align: center; letter-spacing: 1px; line-height: 140%; text-shadow: 3px 3px 3px #BFBFBF;} .evt-prm h1 {font-size: 150%; letter-spacing: 3px; margin: 0 30px 30px;} .sidebar {width: 20%;} .sidebar-cont {padding: 10px 0 30px; margin-bottom: 20px;} .mainContent {width: 78%;} } @media only screen and (min-width: 1250px) { .mainWrapper {width: 99%; margin-top: 7%;} .listBanner {background-color: #fff; color: #5F5F5F; padding: 15px 0 5px; margin: 1% 0;} .listBanner h1 {font-size: 140%; font-weight: bold; letter-spacing: 2px; margin: 0 0 5px; padding: 0 120px; color: #293F6F; text-shadow: 6px 6px 6px #BFBFBF;} .listBanner h2 {font-size: 140%; font-weight: bold; letter-spacing: 1px; color: #000; text-shadow: 3px 3px 3px #BFBFBF;} .sidebar-m {display: none;} .sidebar {width: 22%;} .sidebar-cont {padding: 10px 0 30px; margin-bottom: 20px; height: auto;} .sidebar h2 {font-size: 110%; font-weight: bold; letter-spacing: 1px; color: #293F6F; text-align: center; text-shadow: 2px 2px 3px #BFBFBF; margin: 20px 0 0;} .sidebar h4 {font-size: 90%; font-weight: bold; letter-spacing: 1px; color: #4F4F4F; text-align: center; text-shadow: 2px 2px 3px #BFBFBF; margin: 10px 20px 15px;} .mainContent {display: inline-block; vertical-align: top; width: 76%;} .evt-msg {margin-top: 7%; padding: 5px 0 30px; color: #4F4F4F; background-color: #fff;} .evt-msg h2 {font-size: 120%; font-weight: bold; text-align: center; letter-spacing: 2px; padding: 10px 20px 0; text-shadow: 2px 2px 3px #BFBFBF;} .evt-msg hr {margin: 40px 0; padding: 1px; background: #8FA8BF; width: 95%;} .evt-msg-sb {display: block;} .evt-msg-mm {display: none;} .evt-prm {padding: 20px 0 30px; margin: 0 0 2%; color: #4F4F4F; background-color: #fff;} .evt-prm h1 {font-size: 160%; letter-spacing: 2px; color: #000; margin: 0 0 30px; text-shadow: 3px 3px 3px #BFBFBF;} .evt-prm-cont {display: inline-block; vertical-align: top; width: 24%; margin: 0;} .evt-prm-cont-l {display: block; margin: 0;} .evt-prm-cont-l img {border: solid 1px #000; width: 80%;} .evt-prm-cont-r {display: block; margin: 0;} .evt-prm-cont-r h4 {font-size: 100%; font-weight: bold; letter-spacing: 1px; margin: 10px 0;} .evtprmButton {padding: 2px 0 6px; width: 160px; margin-bottom: 5px; color: #fff; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .evtprmButton a {color: #fff; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .evtprmButton a:hover {color: #AFE3FF;} } @media only screen and (min-width: 1920px) { .evt-msg h1 {font-size: 180%; letter-spacing: 4px;} .evt-msg h2 {font-size: 160%; letter-spacing: 2px;} .evt-prm {padding: 20px 0; margin: 0 0 2%;} .evt-prm h1 {font-size: 180%; letter-spacing: 3px;} .evt-prm-cont-l img {width: 70%;} .evt-prm-cont-r {width: 70%;} .evtprmButton {width: 60%; font-size: 120%; letter-spacing: 2px;} .evtprmButton a {color: #fff; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .listBanner h1 {font-size: 200%; font-weight: bold; letter-spacing: 6px; margin: 0 0 5px; padding: 0 120px; color: #293F6F; text-shadow: 6px 6px 6px #BFBFBF;} .listBanner h2 {font-size: 160%; font-weight: bold; letter-spacing: 3px; color: #000; text-shadow: 3px 3px 3px #BFBFBF;} .sidebar {width: 18%;} .sidebar h2 {font-size: 120%; font-weight: bold; letter-spacing: 2px; color: #293F6F; text-align: center; margin: 20px 0 0;} .sidebar h4 {font-size: 100%; font-weight: bold; letter-spacing: 2px; color: #4F4F4F; text-align: center; margin: 10px 20px 15px;} .sidebarButton {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,444444+100 */ background: rgb(136,136,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ box-shadow: 3px 3px 8px #8f8f8f; width: 60%; margin: 30px 0 0;} .sidebarButton a {color: #fff; font-size: 100%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .mainContent {width: 80%; margin: 10px 0 0 30px;} .sidebarButton {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,444444+100 */ background: rgb(136,136,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ box-shadow: 3px 3px 8px #8f8f8f; width: 60%; margin: 20px 0 0; padding: 4px 0 5px;} .sidebarButton a {color: #fff; font-size: 90%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .sidebarButton a:hover {color: #AFE3FF;} } /* *END* ONLINE EVENTS PAGE ------------------------------------------------ */ /* ONLINE SUPPORT PAGE ------------------------------------------------ */ .help-cont {border: solid 1px #293F6F; font-weight: bold; width: 95%; margin: 3em 0;} .help-msg {background: #74808F; margin-bottom: 30px; padding: 5px 10px 20px; color: #fff;} .help-msg p {font-size: 100%; letter-spacing: 1px; line-height: 140%; text-align: center; color: #fff;} .help-cont-form {width: 100%;} .help-cont-form p {font-size: 80%; letter-spacing: 2px; line-height: 140%; text-align: center; padding: 10px 0 20px;} .help-msg-form-l {display: block; width: 90%; margin-bottom: 10px; font-size: 100%; text-align: left;} .help-msg-form-r {display: block; width: 90%; margin-bottom: 10px; font-size: 100%;} .help-msg-input-r {width: 93%; height: 20px; font-size: 90%; font-weight: bold; letter-spacing: 2px; color: #293F6F; } .help-msg-dd {width: 100%; height: 30px; font-size: 90%; font-weight: bold; letter-spacing: 2px; color: #293F6F; } .help-cont-form-q {width: 95%; font-size: 16px; color: #18424F; border: solid 1px #143E4F; margin: 10px 0 15px;} .help-cont-form-msg {font-size: 70%; color: #fff; letter-spacing: 1px; line-height: 200%; margin: 25px 0 0; padding: 15px 0; background: #74808F;} .help-msg hr {margin: 20px 0; padding: 1px; background: #fff; width: 90%;} .help-popup {background-color: #fff; padding: 25px; width: 80%;} .help-popup h1 {font-size: 120%; letter-spacing: 2px; text-align: center; color: #293F6F;} .help-popup h2 {font-size: 100%; letter-spacing: 1px; text-align: center;} .help-popup hr {margin: 20px; padding: 1px; background: #8FA8BF; width: 90%;} .helpButton {/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,444444+100 */ background: rgb(136,136,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ padding: 4px 0 5px;border: none; width: 160px; margin: 30px 0 0; color: #fff; font-size: 18px; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .helpButton:hover {color: #AFE3FF;} .tech-msg {background-color: #0a2d4e; color: #fff; line-height: 180%; padding: 10px 5px; margin: 25px 0 0;} @media only screen and (min-width: 1024px) { .help-cont {width: 90%;} .help-msg {margin-bottom: 40px; padding: 10px 20px 20px;} .help-cont-form {width: 70%;} .help-msg-form-l {display: inline-block; width: 25%; font-size: 110%; text-align: right;} .help-msg-form-r {display: inline-block; width: 60%; font-size: 110%; text-align: left;} .help-msg-input-r {width: 80%; height: 22px; font-size: 100%;} .help-msg-dd {width: 85%; height: 30px; font-size: 90%; font-weight: bold; letter-spacing: 2px; color: #293F6F; } .help-cont-form-q {width: 100%; font-size: 16px; color: #18424F; border: solid 1px #143E4F; margin: 10px 0 15px;} .tech-msg {padding: 10px; margin: 35px 0 0;} } @media only screen and (min-width: 1800px) { .help-cont {border: solid 1px #293F6F; font-weight: bold; width: 75%; margin: 5em 0; padding-bottom: 1em;} .help-msg {background: #74808F; padding: 5px 40px 20px;} .help-msg p {font-size: 120%; letter-spacing: 2px; line-height: 150%; text-align: center; color: #fff;} .help-cont-form {width: 75%;} .help-cont-form p {font-size: 100%; letter-spacing: 2px; line-height: 140%; text-align: center; padding: 10px 0 20px;} .help-msg-form-l {display: inline-block; width: 30%; margin-bottom: 10px; font-size: 120%;} .help-msg-form-r {display: inline-block; width: 65%; margin-bottom: 10px; font-size: 120%;} .help-msg-input-r {width: 70%; height: 25px; font-size: 100%; font-weight: bold; letter-spacing: 2px; color: #293F6F; } .help-msg-dd {width: 71.5%; height: 32px; font-size: 100%; font-weight: bold; letter-spacing: 2px; color: #293F6F; } .help-cont-form-q {width: 99.5%; font-size: 16px; color: #18424F; border: solid 1px #143E4F; margin: 10px 0 15px;} .help-cont-form-msg {font-size: 100%; color: #fff; letter-spacing: 2px; line-height: 240%; margin: 20px 0; padding: 15px 0; background: #74808F;} .help-msg hr {margin: 30px 0; padding: 1px; background: #fff; width: 90%;} .help-popup {background-color: #fff; padding: 2em 3rem; letter-spacing: 2px; width: 60%;} .help-popup h1 {font-size: 160%; letter-spacing: 4px;} .help-popup h2 {font-size: 140%; letter-spacing: 3px} .help-popup hr {margin: 50px; padding: 1px; background: #8FA8BF; width: 90%;} .tech-msg {background-color: #0a2d4e; color: #fff; line-height: 180%; padding: 20px 30px; margin: 40px 0 0;} } /* TECHNIQUES PAGE ------------------------------------------------ */ .techniques {margin: 0 10px;} .tech-cont {margin-bottom: 40px;} .tech-cont-text-l {display: block; width: 100%;} .tech-cont-text-l h2 {font-size: 120%; letter-spacing: 2px; text-align: center; margin: 10px 0 0;} .tech-cont-text-l p {font-size: 100%; letter-spacing: 2px; text-align: left; margin-top: 0;} .tech-cont-text-l img {width: 35%; float: right; margin: 30px 0 0;} .tech-cont-text-r {display: block; width: 100%;} .tech-cont-text-r h2 {font-size: 120%; letter-spacing: 2px; text-align: center; margin: 10px 0 0;} .tech-cont-text-r p {font-size: 100%; letter-spacing: 2px; text-align: right; margin-top: 0;} .tech-cont-text-r img {width: 35%; float: left; margin: 30px 0 0;} @media only screen and (min-width: 1024px) { .techniques {margin: 0 60px;} .tech-cont {margin-bottom: 80px;} .tech-cont-text-l h2 {font-size: 140%; letter-spacing: 4px;} .tech-cont-text-l p {font-size: 110%; letter-spacing: 3px; text-align: justify;} .tech-cont-text-l img {width: 20%; margin: 10px 0 0 20px;} .tech-cont-text-r h2 {font-size: 140%; letter-spacing: 4px;} .tech-cont-text-r p {font-size: 110%; letter-spacing: 3px; text-align: justify;} .tech-cont-text-r img {width: 20%; float: left; margin: 10px 20px 0 0;} } @media only screen and (min-width: 1920px) { .techniques {margin: 0 60px;} .tech-cont {margin-bottom: 80px;} .tech-cont-text-l h2 {font-size: 140%; letter-spacing: 4px;} .tech-cont-text-l p {font-size: 110%; letter-spacing: 3px; text-align: justify;} .tech-cont-text-l img {width: 20%; margin: 10px 0 0 20px;} .tech-cont-text-r h2 {font-size: 140%; letter-spacing: 4px;} .tech-cont-text-r p {font-size: 110%; letter-spacing: 3px; text-align: justify;} .tech-cont-text-r img {width: 20%; float: left; margin: 10px 20px 0 0;} } /* END - TECHNIQUES PAGE ------------------------------------------------ */ /* TRANSLATION PLAYER ------------------------------------------------ */ .trans-main {background-color: #fff; width: 100%; overflow: auto; margin-top: 2%;} .t-cont {box-shadow: 3px 3px 6px #8f8f8f; border: ridge 4px #555; background-color: #000000; padding-bottom: 15px; margin: 10px;} .t-cont-title {font-size: 80%; font-weight: bold; letter-spacing: 4px; color: #AFE3FF; margin: 8px 0; text-transform: uppercase;} .t-cont-msg {font-size: 100%; font-weight: bold; letter-spacing: 2px; color: #fff; margin-top: 15px;} .t-player {background-color: #000; border: inset 2px #8f8f8f; margin: 0 10px; padding: 10px; height: 40px;} .transButton {display: inline-block; border: outset 2px #CFCFCF; border-radius: 10px; background: url('../../images/title_tex_b.png'); width: 120px; padding: 5px 10px 4px; margin: 15px 10px 0; font-size: 75%; font-weight: bold; letter-spacing: 3px; text-shadow: 2px 2px 5px #000; text-transform: uppercase; font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;} .transButton a:hover {color: #fff;} @media only screen and (min-width: 1024px) { .t-cont {border: ridge 6px silver; margin: 15px;} .t-cont-title {font-size: 90%;} .t-player {margin: 0 12px;} .transButton {width: 150px; padding: 6px 0 5px; margin: 15px 20px 0;} } @media only screen and (min-width: 1920px) { .t-cont-title {font-size: 100%; margin: 10px 0;} .t-cont-msg {font-size: 100%; font-weight: bold; letter-spacing: 4px; color: #fff; margin: 20px 40px 10px;} .t-player {margin: 0 12px; padding: 10px;} } /* END - TRANSLATION PLAYER ------------------------------------------------ */ /* OVERVIEW PAGE ------------------------------------------------ */ .displayOn {display: none;} .ov-msg {width: 99%; margin-bottom: 10px; padding: 5px 0; background-color: #fff;} .ov-msg h1 {font-size: 100%; font-weight: bold; margin: 10px 5px; letter-spacing: 2px; color: #293F6F;} .ov-msg h2 {font-size: 90%; font-weight: bold; margin: 10px; letter-spacing: 1px; color: #4F4F4F;} .ov-list {display: block; width: 90%; height: auto; background-color: #fff; margin: 0 0 1em;} .ov-list img {border: solid 1px #000; width: 80%; margin-top: 5%;} .ov-list h1 {font-size: 90%; font-weight: bold; color: #002E5F; margin: 4% 0; text-shadow: 2px 2px 3px #BFBFBF;} .ov-list h2 {font-size: 90%; font-weight: bold; color: #002E5F; margin: 4% 0 6%; text-shadow: 2px 2px 3px #BFBFBF;} .ov-list h3 {font-size: 90%; font-weight: bold; color: #7F0000; padding: 3px 0 0;} .ov-list h4 {font-size: 80%; font-weight: bold; color: #002E5F; margin: 4% 0; text-shadow: 2px 2px 3px #BFBFBF;} .ov-button { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,444444+100 */ background: rgb(136,136,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ padding: 3px 10px 4px; margin: 6px 0; width: fit-content; color: #fff; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .ov-button a {color: #fff; font-size: .85em; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .ov-button a:hover {color: #AFE3FF;} .dl-button { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,444444+100 */ background: rgb(136,136,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ padding: 2px 0 6px; width: 60%; margin: 15px 0 5px;} .dl-button a {color: #fff; font-size: 80%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000;} .dl-button a:hover {color: #AFE3FF;} @media only screen and (min-width: 700px) { .displayOn {display: block;} .ov-msg {width: 100%; margin-bottom: 10px; background-color: #fff;} .ov-msg h1 {font-size: 140%; font-weight: bold; padding: 10px 5px; letter-spacing: 2px; color: #293F6F;} .ov-msg h2 {font-size: 120%; font-weight: bold; padding: 10px 20px; letter-spacing: 1px; color: #4F4F4F;} .ov-list {display: block; vertical-align: top; width: 85%; height: auto; background-color: #fff; padding: 0 0 .3em; margin: 0 .5% 4%;} .ov-list img {border: solid 1px #000; width: 80%; margin-top: 5%;} .ov-list h1 {font-size: 90%; font-weight: bold; color: #002E5F; margin: 4% 0; text-shadow: 2px 2px 3px #BFBFBF;} .ov-list h2 {font-size: 90%; font-weight: bold; color: #002E5F; margin: 4% 0 6%; text-shadow: 2px 2px 3px #BFBFBF;} .ov-list h3 {font-size: 90%; font-weight: bold; color: #7F0000; padding: 0 0 3px;} .ov-list h4 {font-size: 80%; font-weight: bold; color: #002E5F; margin: 4% 0; text-shadow: 2px 2px 3px #BFBFBF;} .ov-button { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,444444+100 */ background: rgb(136,136,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ padding: 4px 20px 5px; margin-top: 1em; width: fit-content; color: #fff; font-size: .9em; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000; } .ov-button a { color: #fff; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000; } .ov-button a:hover { color: #AFE3FF; } .dl-button { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,444444+100 */ background: rgb(136,136,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ padding: 2px 0 6px; box-shadow: 3px 3px 8px #8f8f8f; width: 60%; margin: 15px 0 5px; } .dl-button a { color: #fff; font-size: 80%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000; } .dl-button a:hover { color: #AFE3FF; } } @media only screen and (min-width: 1000px) { .displayOn { display: block; } .ov-msg { width: 100%; margin-bottom: 10px; background-color: #fff; border: solid 1px #293F6F; box-shadow: 3px 3px 6px #8f8f8f; } .ov-msg h1 { font-size: 140%; font-weight: bold; padding: 10px 5px; letter-spacing: 2px; color: #293F6F; } .ov-msg h2 { font-size: 120%; font-weight: bold; padding: 10px 20px; letter-spacing: 1px; color: #4F4F4F; } .ov-list { display: inline-block; vertical-align: top; width: 45%; height: auto; background-color: #fff; margin: 1em .5em ; } .ov-list img { border: solid 1px #000; box-shadow: 3px 3px 6px #8f8f8f; width: 80%; margin-top: 5%; } .ov-list h1 { font-size: 80%; font-weight: bold; letter-spacing: 2px; color: #002E5F; margin: 4% 0; text-shadow: 2px 2px 3px #BFBFBF; } .ov-list h2 { font-size: 80%; font-weight: bold; letter-spacing: 2px; color: #002E5F; margin: 4% 0 6%; text-shadow: 2px 2px 3px #BFBFBF; } .ov-list h3 { font-size: 80%; font-weight: bold; letter-spacing: 2px; color: #7F0000; padding: 3px 0 0; } .ov-list h4 { font-size: 70%; font-weight: bold; color: #002E5F; margin: 4% 0; text-shadow: 2px 2px 3px #BFBFBF; } .ov-button { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,444444+100 */ background: rgb(136,136,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ padding: 4px 0 5px; box-shadow: 3px 3px 8px #8f8f8f; width: fit-content; color: #fff; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000; } .ov-button a { color: #fff; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000; } .ov-button a:hover { color: #AFE3FF; } .dl-button { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,444444+100 */ background: rgb(136,136,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ padding: 2px 0 6px; box-shadow: 3px 3px 8px #8f8f8f; width: 60%; margin: 15px 0 5px; } .dl-button a { color: #fff; font-size: 80%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000; } .dl-button a:hover { color: #AFE3FF; } } @media only screen and (min-width: 1200px) { .displayOn { display: block; } .ov-msg { width: 100%; margin: 20px 0; background-color: #fff; border: solid 1px #293F6F; box-shadow: 3px 3px 6px #8f8f8f; } .ov-msg h1 { font-size: 100%; font-weight: bold; padding: 10px 5px; letter-spacing: 2px; color: #293F6F; } .ov-msg h2 { font-size: 100%; font-weight: bold; padding: 10px 15px; letter-spacing: 1px; color: #4F4F4F; } .ov-list { display: inline-block; vertical-align: top; width: 45%; height: auto; background-color: #fff; margin: 1em; } .ov-list img { border: solid 1px #000; box-shadow: 3px 3px 6px #8f8f8f; width: 80%; margin-top: 5%; } .ov-list h1 { font-size: 90%; font-weight: bold; color: #002E5F; margin: 4% 0; text-shadow: 2px 2px 3px #BFBFBF; } .ov-list h2 { font-size: 90%; font-weight: bold; color: #002E5F; margin: 4% 0 6%; text-shadow: 2px 2px 3px #BFBFBF; } .ov-list h3 { font-size: 90%; font-weight: bold; color: #7F0000; padding: 3px 0 0; } .ov-list h4 { font-size: 80%; font-weight: bold; color: #002E5F; margin: 4% 0; text-shadow: 2px 2px 3px #BFBFBF; } .ov-button { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,444444+100 */ background: rgb(136,136,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ padding: 4px 20px 5px; box-shadow: 3px 3px 8px #8f8f8f; width: fit-content; color: #fff; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000; } .ov-button a { color: #fff; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000; } .ov-button a:hover { color: #AFE3FF; } .dl-button { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,444444+100 */ background: rgb(136,136,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ padding: 2px 0 6px; box-shadow: 3px 3px 8px #8f8f8f; width: 60%; margin: 15px 0 5px; } .dl-button a { color: #fff; font-size: 80%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000; } .dl-button a:hover { color: #AFE3FF; } } @media only screen and (min-width: 1800px) { .ov-msg { width: 100%; padding: 10px 0 20px; margin: 0; background-color: #fff; border: solid 1px #293F6F; box-shadow: 3px 3px 6px #8f8f8f; overflow: hidden; vertical-align: } .ov-msg h1 { font-size: 200%; font-weight: bold; padding: 10px 5px; letter-spacing: 2px; color: #293F6F; } .ov-msg h2 { font-size: 160%; font-weight: bold; padding: 5px 60px; letter-spacing: 1px; color: #4F4F4F; } .ov-list { width: 28%; margin: 1em; } .ov-list h1 { font-size: 90%; font-weight: bold; color: #002E5F; margin: 4% 0; text-shadow: 2px 2px 3px #BFBFBF; } .ov-list h2 { font-size: 90%; font-weight: bold; color: #002E5F; margin: 4% 0; text-shadow: 2px 2px 3px #BFBFBF; } .ov-list h3 { font-size: 90%; font-weight: bold; color: #7F0000; padding: 3px 0 0; } .ov-list h4 { font-size: 80%; font-weight: bold; color: #002E5F; margin: 4% 0; text-shadow: 2px 2px 3px #BFBFBF; } .ov-button { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,444444+100 */ background: rgb(136,136,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ padding: .3em 1rem; margin: 1.6em 0; box-shadow: 1px 1px 2px #8f8f8f; width: fit-content; color: #fff; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000; } .ov-button a { color: #fff; font-size: 1em; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000; } .ov-button a:hover { color: #AFE3FF; } .dl-button { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#888888+0,444444+100 */ background: rgb(136,136,136); /* Old browsers */ background: -moz-linear-gradient(top, rgba(136,136,136,1) 0%, rgba(68,68,68,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(136,136,136,1) 0%,rgba(68,68,68,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#444444',GradientType=0 ); /* IE6-9 */ padding: 2px 0 6px; box-shadow: 3px 3px 8px #8f8f8f; width: 60%; margin: 15px 0 5px; } .dl-button a { color: #fff; font-size: 80%; font-weight: bold; letter-spacing: 1px; text-shadow: 1px 1px 1px #000; } .dl-button a:hover { color: #AFE3FF; } } /* END - OVERVIEW PAGE ------------------------------------------------ */