text/x-generic style.css.2 ( UTF-8 Unicode C program text, with very long lines, with CRLF line terminators ) @import url('css/normalize.css') screen; @import url('css/plugins.css') screen; @import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic|Open+Sans:300); /* ========================================================================== 0.0 Body ========================================================================== */ body{background: url() center top no-repeat; background-size: 100% auto; position: relative} /* ========================================================================== 1.0 Normalize + Fonts ========================================================================== */ /* Loaded @import -- line 1 */ /* ========================================================================== 1.0 Tables ========================================================================== */ @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,800,700&subset=latin,cyrillic-ext); @font-face { font-family: 'exo_2.0black'; src: url('../fonts/exo2.0-black.eot'); src: url('../fonts/exo2.0-black.eot?#iefix') format('embedded-opentype'), url('../fonts/exo2.0-black.woff') format('woff'), url('../fonts/exo2.0-black.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'exo_2.0black_italic'; src: url('../fonts/exo2.0-blackitalic.eot'); src: url('../fonts/exo2.0-blackitalic.eot?#iefix') format('embedded-opentype'), url('../fonts/exo2.0-blackitalic.woff') format('woff'), url('../fonts/exo2.0-blackitalic.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'exo_2.0bold'; src: url('../fonts/exo2.0-bold.eot'); src: url('../fonts/exo2.0-bold.eot?#iefix') format('embedded-opentype'), url('../fonts/exo2.0-bold.woff') format('woff'), url('../fonts/exo2.0-bold.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'exo_2.0bold_italic'; src: url('../fonts/exo2.0-bolditalic.eot'); src: url('../fonts/exo2.0-bolditalic.eot?#iefix') format('embedded-opentype'), url('../fonts/exo2.0-bolditalic.woff') format('woff'), url('../fonts/exo2.0-bolditalic.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'exo_2.0extra_bold'; src: url('../fonts/exo2.0-extrabold.eot'); src: url('../fonts/exo2.0-extrabold.eot?#iefix') format('embedded-opentype'), url('../fonts/exo2.0-extrabold.woff') format('woff'), url('../fonts/exo2.0-extrabold.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'exo_2.0extra_bold_italic'; src: url('../fonts/exo2.0-extrabolditalic.eot'); src: url('../fonts/exo2.0-extrabolditalic.eot?#iefix') format('embedded-opentype'), url('../fonts/exo2.0-extrabolditalic.woff') format('woff'), url('../fonts/exo2.0-extrabolditalic.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'exo_2.0extra_light'; src: url('../fonts/exo2.0-extralight.eot'); src: url('../fonts/exo2.0-extralight.eot?#iefix') format('embedded-opentype'), url('../fonts/exo2.0-extralight.woff') format('woff'), url('../fonts/exo2.0-extralight.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'exo_2.0extra_light_italic'; src: url('../fonts/exo2.0-extralightitalic.eot'); src: url('../fonts/exo2.0-extralightitalic.eot?#iefix') format('embedded-opentype'), url('../fonts/exo2.0-extralightitalic.woff') format('woff'), url('../fonts/exo2.0-extralightitalic.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'exo_2.0italic'; src: url('../fonts/exo2.0-italic.eot'); src: url('../fonts/exo2.0-italic.eot?#iefix') format('embedded-opentype'), url('../fonts/exo2.0-italic.woff') format('woff'), url('../fonts/exo2.0-italic.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'exo_2.0light'; src: url('../fonts/exo2.0-light.eot'); src: url('../fonts/exo2.0-light.eot?#iefix') format('embedded-opentype'), url('../fonts/exo2.0-light.woff') format('woff'), url('../fonts/exo2.0-light.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'exo_2.0light_italic'; src: url('../fonts/exo2.0-lightitalic.eot'); src: url('../fonts/exo2.0-lightitalic.eot?#iefix') format('embedded-opentype'), url('../fonts/exo2.0-lightitalic.woff') format('woff'), url('../fonts/exo2.0-lightitalic.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'exo_2.0medium'; src: url('../fonts/exo2.0-medium.eot'); src: url('../fonts/exo2.0-medium.eot?#iefix') format('embedded-opentype'), url('../fonts/exo2.0-medium.woff') format('woff'), url('../fonts/exo2.0-medium.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'exo_2.0medium_italic'; src: url('../fonts/exo2.0-mediumitalic.eot'); src: url('../fonts/exo2.0-mediumitalic.eot?#iefix') format('embedded-opentype'), url('../fonts/exo2.0-mediumitalic.woff') format('woff'), url('../fonts/exo2.0-mediumitalic.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'exo_2.0regular'; src: url('../fonts/exo2.0-regular.eot'); src: url('../fonts/exo2.0-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/exo2.0-regular.woff') format('woff'), url('../fonts/exo2.0-regular.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'exo_2.0semi_bold'; src: url('../fonts/exo2.0-semibold.eot'); src: url('../fonts/exo2.0-semibold.eot?#iefix') format('embedded-opentype'), url('../fonts/exo2.0-semibold.woff') format('woff'), url('../fonts/exo2.0-semibold.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'exo_2.0semi_bold_italic'; src: url('../fonts/exo2.0-semibolditalic.eot'); src: url('../fonts/exo2.0-semibolditalic.eot?#iefix') format('embedded-opentype'), url('../fonts/exo2.0-semibolditalic.woff') format('woff'), url('../fonts/exo2.0-semibolditalic.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'exo_2.0thin'; src: url('../fonts/exo2.0-thin.eot'); src: url('../fonts/exo2.0-thin.eot?#iefix') format('embedded-opentype'), url('../fonts/exo2.0-thin.woff') format('woff'), url('../fonts/exo2.0-thin.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'exo_2.0thin_italic'; src: url('../fonts/exo2.0-thinitalic.eot'); src: url('../fonts/exo2.0-thinitalic.eot?#iefix') format('embedded-opentype'), url('../fonts/exo2.0-thinitalic.woff') format('woff'), url('../fonts/exo2.0-thinitalic.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FontAwesome'; src: url('../fonts/fontawesome-webfont.eot?v=4.1.0'); src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } a { margin:0; padding:0; font-size: 125%; vertical-align:baseline; background:transparent; } .title { font-size: 3em; font-family: Open Sans; color:#555; text-align: center; height:2em; line-height: 2em; font-weight: 100; text-transform: uppercase; } /* Colorful Pricing Tables*/ .wrapper-colorful { position:relative; width:100%; height: 100%; margin:0em auto; cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow:hidden; } .wrapper-colorful ul { position: relative; width:25%; min-width: 15.25em; list-style: none; float: left; font-family: Open Sans; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -mos-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; overflow:hidden; -webkit-animation: start 0.5s ease forwards; -moz-animation: start 0.5s ease forwards; -mos-animation: start 0.5s ease forwards; -o-animation: start 0.5s ease forwards; animation: start 0.5s ease forwards; -webkit-transform: scale(1,0); -moz-transform: scale(1,0); -mos-transform: scale(1,0); -o-transform: scale(1,0); transform: scale(1,0); -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } .wrapper-colorful .basic{ -webkit-animation-delay:0s; -moz-animation-delay:0s; -mos-animation-delay:0s; -o-animation-delay:0s; animation-delay:0s; border-right:1px solid #fff; } .wrapper-colorful .premium{ -webkit-animation-delay:0.15s; -moz-animation-delay:0.15s; -mos-animation-delay:0.15s; -o-animation-delay:0.15s; animation-delay:0.15s; border-right:1px solid #fff; } .wrapper-colorful .plus{ -webkit-animation-delay:0.3s; -moz-animation-delay:0.3s; -mos-animation-delay:0.3s; -o-animation-delay:0.3s; animation-delay:0.3s; border-right:1px solid #fff; } .wrapper-colorful .business{ -webkit-animation-delay:0.45s; -moz-animation-delay:0.45s; -mos-animation-delay:0.45s; -o-animation-delay:0.45s; animation-delay:0.45s; } .wrapper-colorful ul li{ -webkit-animation: start-li 0.5s ease forwards; -moz-animation: start-li 0.5s ease forwards; -mos-animation: start-li 0.5s ease forwards; -o-animation: start-li 0.5s ease forwards; animation: start-li 0.5s ease forwards; -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -mos-transform: translateX(-200%); -o-transform: translateX(-200%); transform: translateX(-200%); } .wrapper-colorful .basic li:nth-child(1){ -webkit-animation-delay:0.1s; -moz-animation-delay:0.1s; -mos-animation-delay:0.1s; -o-animation-delay:0.1s; animation-delay:0.1s; } .wrapper-colorful .basic li:nth-child(2), .wrapper-colorful .premium li:nth-child(1){ -webkit-animation-delay:0.2s; -moz-animation-delay:0.2s; -mos-animation-delay:0.2s; -o-animation-delay:0.2s; animation-delay:0.2s; } .wrapper-colorful .basic li:nth-child(3), .wrapper-colorful .premium li:nth-child(2), .wrapper-colorful .plus li:nth-child(1){ -webkit-animation-delay:0.3s; -moz-animation-delay:0.3s; -mos-animation-delay:0.3s; -o-animation-delay:0.3s; animation-delay:0.3s; } .wrapper-colorful .basic li:nth-child(4), .wrapper-colorful .premium li:nth-child(3), .wrapper-colorful .plus li:nth-child(2), .wrapper-colorful .business li:nth-child(1){ -webkit-animation-delay:0.4s; -moz-animation-delay:0.4s; -mos-animation-delay:0.4s; -o-animation-delay:0.4s; animation-delay:0.4s; } .wrapper-colorful .basic li:nth-child(5), .wrapper-colorful .premium li:nth-child(4), .wrapper-colorful .plus li:nth-child(3), .wrapper-colorful .business li:nth-child(2){ -webkit-animation-delay:0.5s; -moz-animation-delay:0.5s; -mos-animation-delay:0.5s; -o-animation-delay:0.5s; animation-delay:0.5s; } .wrapper-colorful .basic li:nth-child(6), .wrapper-colorful .premium li:nth-child(5), .wrapper-colorful .plus li:nth-child(4), .wrapper-colorful .business li:nth-child(3){ -webkit-animation-delay:0.6s; -moz-animation-delay:0.6s; -mos-animation-delay:0.6s; -o-animation-delay:0.6s; animation-delay:0.6s; } .wrapper-colorful .basic li:nth-child(7), .wrapper-colorful .premium li:nth-child(6), .wrapper-colorful .plus li:nth-child(5), .wrapper-colorful .business li:nth-child(4){ -webkit-animation-delay:0.7s; -moz-animation-delay:0.7s; -mos-animation-delay:0.7s; -o-animation-delay:0.7s; animation-delay:0.7s; } .wrapper-colorful .basic li:nth-child(8), .wrapper-colorful .premium li:nth-child(7), .wrapper-colorful .plus li:nth-child(6), .wrapper-colorful .business li:nth-child(5){ -webkit-animation-delay:0.8s; -moz-animation-delay:0.8s; -mos-animation-delay:0.8s; -o-animation-delay:0.8s; animation-delay:0.8s; } .wrapper-colorful .basic li:nth-child(9), .wrapper-colorful .premium li:nth-child(8), .wrapper-colorful .plus li:nth-child(7), .wrapper-colorful .business li:nth-child(6){ -webkit-animation-delay:0.9s; -moz-animation-delay:0.9s; -mos-animation-delay:0.9s; -o-animation-delay:0.9s; animation-delay:0.9s; } .wrapper-colorful .basic li:nth-child(10), .wrapper-colorful .premium li:nth-child(9), .wrapper-colorful .plus li:nth-child(8), .wrapper-colorful .business li:nth-child(7){ -webkit-animation-delay:1s; -moz-animation-delay:1s; -mos-animation-delay:1s; -o-animation-delay:1s; animation-delay:1s; } .wrapper-colorful .basic li:nth-child(11), .wrapper-colorful .premium li:nth-child(10), .wrapper-colorful .plus li:nth-child(9), .wrapper-colorful .business li:nth-child(8){ -webkit-animation-delay:1.1s; -moz-animation-delay:1.1s; -mos-animation-delay:1.1s; -o-animation-delay:1.1s; animation-delay:1.1s; } .wrapper-colorful .basic li:nth-child(12), .wrapper-colorful .premium li:nth-child(11), .wrapper-colorful .plus li:nth-child(10), .wrapper-colorful .business li:nth-child(9){ -webkit-animation-delay:1.2s; -moz-animation-delay:1.2s; -mos-animation-delay:1.2s; -o-animation-delay:1.2s; animation-delay:1.2s; } .wrapper-colorful .premium li:nth-child(12), .wrapper-colorful .plus li:nth-child(11), .wrapper-colorful .business li:nth-child(10){ -webkit-animation-delay:1.3s; -moz-animation-delay:1.3s; -mos-animation-delay:1.3s; -o-animation-delay:1.3s; animation-delay:1.3s; } .wrapper-colorful .plus li:nth-child(12), .wrapper-colorful .business li:nth-child(11){ -webkit-animation-delay:1.4s; -moz-animation-delay:1.4s; -mos-animation-delay:1.4s; -o-animation-delay:1.4s; animation-delay:1.4s; } .wrapper-colorful .business li:nth-child(12){ -webkit-animation-delay:1.5s; -moz-animation-delay:1.5s; -mos-animation-delay:1.5s; -o-animation-delay:1.5s; animation-delay:1.5s; } @-webkit-keyframes start{ 0% {-webkit-transform: scale(1,0);} 100% {-webkit-transform: scale(1,1);} } @-moz-keyframes start{ 0% {-moz-transform: scale(1,0);} 100% {-moz-transform: scale(1,1);} } @-mos-keyframes start{ 0% {-mos-transform: scale(1,0);} 100% {-mos-transform: scale(1,1);} } @-o-keyframes start{ 0% {-o-transform: scale(1,0);} 100% {-o-transform: scale(1,1);} } @keyframes start{ 0% {transform: scale(1,0);} 100% {transform: scale(1,1);} } @-webkit-keyframes start-li{ 0% {-webkit-transform: translateX(-200%);} 100% {-webkit-transform: translateX(0%);} } @-moz-keyframes start-li{ 0% {-moz-transform: translateX(-200%);} 100% {-moz-transform: translateX(0%);} } @-mos-keyframes start-li{ 0% {-mos-transform: translateX(-200%);} 100% {-mos-transform: translateX(0%);} } @-o-keyframes start-li{ 0% {-o-transform: translateX(-200%);} 100% {-o-transform: translateX(0%);} } @keyframes start-li{ 0% {transform: translateX(-200%);} 100% {transform: translateX(0%);} } .wrapper-colorful ul li{ color:#eee; text-align: center; overflow:hidden; } /* mobile */ @media screen and (max-width:1100px){ .wrapper-colorful {width: 100%;} .wrapper-colorful ul { position: relative; width:50%; min-width: 15.25em; list-style: none; float: left; font-family: Open Sans; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -mos-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } } @media screen and (max-width:560px){ .wrapper-colorful {width: 100%;} .wrapper-colorful ul { position: relative; width:100%; min-width: 15.25em; list-style: none; float: left; font-family: Open Sans; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -mos-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .wrapper-colorful ul:hover{ -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -mos-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; z-index:5; } } .wrapper-colorful .basic{ position: relative; background: #005C5A; } .wrapper-colorful .premium{ position: relative; background: #199C7B; } .wrapper-colorful .plus{ position: relative; background: #F37100; } .wrapper-colorful .business{ position: relative; background: #ED4D13; } .wrapper-colorful ul .icon{ position: relative; height:10em; width: 10em; background:rgba(255, 255, 255, 0.15); margin:1em auto; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; z-index:2; } .wrapper-colorful .basic .icon:before{ position: absolute; top: .8em; bottom: 0; left: -0.15em; right: 0; margin: auto; content:'\f1d8'; font-family: FontAwesome; font-size: 4em; } .wrapper-colorful .premium .icon:before{ position: absolute; top: .9em; bottom: 0; left: 0.05em; right: 0; margin: auto; content:'\f108'; font-family: FontAwesome; font-size: 4em; } .wrapper-colorful .plus .icon:before{ position: absolute; top: .75em; bottom: 0; left: 0em; right: 0; margin: auto; content:'\f087'; font-family: FontAwesome; font-size: 4em; } .wrapper-colorful .business .icon:before{ position: absolute; top: .75em; bottom: 0; left: -0.1em; right: 0; margin: auto; content:'\f135'; font-family: FontAwesome; font-size: 4em; } .wrapper-colorful .basic:hover .icon:before{ color: #005C5A; } .wrapper-colorful .premium:hover .icon:before{ color: #199C7B; } .wrapper-colorful .plus:hover .icon:before{ color: #F37100; } .wrapper-colorful .business:hover .icon:before{ color: #ED4D13; } .wrapper-colorful ul .icon:after{ position: absolute; content: ''; top:0; left:0; width: 100%; height: 100%; background: #f2f2f2; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -mos-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; -webkit-transform: scale(0,0); -moz-transform: scale(0,0); -mos-transform: scale(0,0); -o-transform: scale(0,0); transform: scale(0,0); -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; z-index:-1; } .wrapper-colorful ul:hover .icon:after{ -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -mos-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); } .wrapper-colorful ul .name{ height:2em; line-height: 2em; -webkit-transition: all 0.25s ease 0.15s; -moz-transition: all 0.25s ease 0.15s; -mos-transition: all 0.25s ease 0.15s; -o-transition: all 0.25s ease 0.15s; transition: all 0.25s ease 0.15s; } .wrapper-colorful ul:hover .name{ -webkit-box-shadow: inset 0px -2em 0px 0px rgba(239, 239, 239, 0.25); -moz-box-shadow: inset 0px -2em 0px 0px rgba(239, 239, 239, 0.25); box-shadow: inset 0px -2em 0px 0px rgba(239, 239, 239, 0.25); } .wrapper-colorful ul .name h1{ text-transform: uppercase; font-weight: 300; font-size: 2em; color: rgba(255, 255, 255, 0.75); -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -mos-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .wrapper-colorful ul:hover .name h1{ color: rgba(255, 255, 255, 1); } .wrapper-colorful ul .price-col{ height:1.5em; line-height: 1.25em; font-size: 4em; font-family: 'exo_2.0extra_light'; color: rgba(255, 255, 255, 0.75); -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -mos-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .wrapper-colorful ul .price-col .cost{ position: relative; width: 100%; height:100%; -webkit-box-shadow: inset 0px -0em 0px 0px rgba(239, 239, 239, 1); -moz-box-shadow: inset 0px -0em 0px 0px rgba(239, 239, 239, 1); box-shadow: inset 0px -0em 0px 0px rgba(239, 239, 239, 1); -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -mos-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .wrapper-colorful ul:hover .price-col .cost{ position: relative; -webkit-box-shadow: inset 0px -1.5em 0px 0px rgba(239, 239, 239, 0.75); -moz-box-shadow: inset 0px -1.5em 0px 0px rgba(239, 239, 239, 0.75); box-shadow: inset 0px -1.5em 0px 0px rgba(239, 239, 239, 0.75); } .wrapper-colorful .basic:hover .price-col .cost{ color: #005C5A; } .wrapper-colorful .premium:hover .price-col .cost{ color: #199C7B; } .wrapper-colorful .plus:hover .price-col .cost{ color: #F37100; } .wrapper-colorful .business:hover .price-col .cost{ color: #ED4D13; } .wrapper-colorful ul .price-col .cost .valuta{ position:relative; font-size: 0.5em; font-weight: 400; display: inline-table; vertical-align: super; } .wrapper-colorful ul .price-col .cost .mounthly{ position:relative; font-size: 0.5em; font-weight: 300; display: inline-table; text-transform: uppercase } .wrapper-colorful ul .description-range{ height:2em; line-height: 2em; } .wrapper-colorful ul .description-range:after{ position: absolute; content: ''; width: 0%; height:32px; background: rgba(255, 255, 255, 0.15); left:0%; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -mos-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .wrapper-colorful ul .description-range:hover:after{ width: 100%; } .wrapper-colorful .description-range:before{ position:absolute; font-family: FontAwesome; font-weight: normal; width:2em; font-size: 1em; left: -1.5em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -mos-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .wrapper-colorful .description-range:hover:before{ left: 1em; } .wrapper-colorful .description-range:nth-child(3):before { content: '\f0a0'; } .wrapper-colorful .description-range:nth-child(4):before { content: '\f1d9'; } .wrapper-colorful .description-range:nth-child(5):before { content: '\f003'; } .wrapper-colorful .description-range:nth-child(6):before { content: '\f0ac'; } .wrapper-colorful .description-range:nth-child(7):before { content: '\f023'; } .wrapper-colorful .description-range:nth-child(8):before { content: '\f133'; } .wrapper-colorful .description-range:nth-child(9):before { content: '\f0e8'; } .wrapper-colorful .description-range:before { content: '\f006'; } .wrapper-colorful ul .purchase{ height: 3em; line-height: 3em; } .wrapper-colorful ul .purchase a{ position: relative; padding:0.5em; border:4px solid #efefef; color: #fff; text-decoration: none; z-index: 1; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -mos-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -mos-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .wrapper-colorful ul .purchase a{ color:#fff; background:#005C5A; -webkit-box-shadow: inset 0px 0px 0px 0px rgba(239, 239, 239, 1); -moz-box-shadow: inset 0px 0px 0px 0px rgba(239, 239, 239, 1); box-shadow: inset 0px 0px 0px 0px rgba(239, 239, 239, 1); } .wrapper-colorful .premium .purchase a{ color:#fff; background:#199C7B; } .wrapper-colorful .plus .purchase a{ color:#fff; background:#F37100; } .wrapper-colorful .business .purchase a{ color:#fff; background:#ED4D13; } .wrapper-colorful ul .purchase a:hover{ color:#005C5A; -webkit-box-shadow: inset 0px -40px 0px 0px rgba(239, 239, 239, 1); -moz-box-shadow: inset 0px -40px 0px 0px rgba(239, 239, 239, 1); box-shadow: inset 0px -40px 0px 0px rgba(239, 239, 239, 1); } .wrapper-colorful .premium .purchase a:hover{ color:#199C7B; } .wrapper-colorful .plus .purchase a:hover{ color:#F37100; } .wrapper-colorful .business .purchase a:hover{ color:#ED4D13; } .wrapper-colorful ul .purchase:before{ position: absolute; content: ''; background: #efefef; width: 50%; height:1em; bottom:1em; left:25%; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -mos-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .wrapper-colorful ul:hover .purchase:before{ position: absolute; content: ''; background: #efefef; width: 90%; height:1em; left:5%; } /* Colorful-2 Pricing Tables with IMG*/ .wrapper-colorful-bg { position:relative; width:100%; height: 248px; margin:0em auto; /* cursor: default; */ -webkit-touch-callout: none; /* -webkit-user-select: none; */ -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; /* user-select: none; */ background: url('../bg2.jpg') center center no-repeat; -moz-background-size: cover; -o-background-size: cover; padding: 0; margin: 0; } .wrapper-colorful-bg ul { position: relative; width: 50%; /* min-width: 15.25em; */ list-style: none; float: left; font-family: Open Sans; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -mos-box-sizing: border-box; -o-box-sizing: border-box; /* box-sizing: border-box; */ overflow:hidden; } .wrapper-colorful-bg .basic{ -webkit-animation-delay:0s; -moz-animation-delay:0s; -mos-animation-delay:0s; -o-animation-delay:0s; animation-delay:0s; } .wrapper-colorful-bg .premium{ -webkit-animation-delay:0.15s; -moz-animation-delay:0.15s; -mos-animation-delay:0.15s; -o-animation-delay:0.15s; animation-delay:0.15s; } .wrapper-colorful-bg .plus{ -webkit-animation-delay:0.3s; -moz-animation-delay:0.3s; -mos-animation-delay:0.3s; -o-animation-delay:0.3s; animation-delay:0.3s; } .wrapper-colorful-bg .business{ -webkit-animation-delay:0.45s; -moz-animation-delay:0.45s; -mos-animation-delay:0.45s; -o-animation-delay:0.45s; animation-delay:0.45s; } .wrapper-colorful-bg ul li{ -webkit-animation: start-li 0.5s ease forwards; -moz-animation: start-li 0.5s ease forwards; -mos-animation: start-li 0.5s ease forwards; -o-animation: start-li 0.5s ease forwards; animation: start-li 0.5s ease forwards; -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -mos-transform: translateX(-200%); -o-transform: translateX(-200%); transform: translateX(-200%); } .wrapper-colorful-bg .basic li:nth-child(1){ -webkit-animation-delay:0.1s; -moz-animation-delay:0.1s; -mos-animation-delay:0.1s; -o-animation-delay:0.1s; animation-delay:0.1s; } .wrapper-colorful-bg .basic li:nth-child(2), .wrapper-colorful-bg .premium li:nth-child(1){ -webkit-animation-delay:0.2s; -moz-animation-delay:0.2s; -mos-animation-delay:0.2s; -o-animation-delay:0.2s; animation-delay:0.2s; } .wrapper-colorful-bg .basic li:nth-child(3), .wrapper-colorful-bg .premium li:nth-child(2), .wrapper-colorful-bg .plus li:nth-child(1){ -webkit-animation-delay:0.3s; -moz-animation-delay:0.3s; -mos-animation-delay:0.3s; -o-animation-delay:0.3s; animation-delay:0.3s; } .wrapper-colorful-bg .basic li:nth-child(4), .wrapper-colorful-bg .premium li:nth-child(3), .wrapper-colorful-bg .plus li:nth-child(2), .wrapper-colorful-bg .business li:nth-child(1){ -webkit-animation-delay:0.4s; -moz-animation-delay:0.4s; -mos-animation-delay:0.4s; -o-animation-delay:0.4s; animation-delay:0.4s; } .wrapper-colorful-bg .basic li:nth-child(5), .wrapper-colorful-bg .premium li:nth-child(4), .wrapper-colorful-bg .plus li:nth-child(3), .wrapper-colorful-bg .business li:nth-child(2){ -webkit-animation-delay:0.5s; -moz-animation-delay:0.5s; -mos-animation-delay:0.5s; -o-animation-delay:0.5s; animation-delay:0.5s; } .wrapper-colorful-bg .basic li:nth-child(6), .wrapper-colorful-bg .premium li:nth-child(5), .wrapper-colorful-bg .plus li:nth-child(4), .wrapper-colorful-bg .business li:nth-child(3){ -webkit-animation-delay:0.6s; -moz-animation-delay:0.6s; -mos-animation-delay:0.6s; -o-animation-delay:0.6s; animation-delay:0.6s; } .wrapper-colorful-bg .basic li:nth-child(7), .wrapper-colorful-bg .premium li:nth-child(6), .wrapper-colorful-bg .plus li:nth-child(5), .wrapper-colorful-bg .business li:nth-child(4){ -webkit-animation-delay:0.7s; -moz-animation-delay:0.7s; -mos-animation-delay:0.7s; -o-animation-delay:0.7s; animation-delay:0.7s; } .wrapper-colorful-bg .basic li:nth-child(8), .wrapper-colorful-bg .premium li:nth-child(7), .wrapper-colorful-bg .plus li:nth-child(6), .wrapper-colorful-bg .business li:nth-child(5){ -webkit-animation-delay:0.8s; -moz-animation-delay:0.8s; -mos-animation-delay:0.8s; -o-animation-delay:0.8s; animation-delay:0.8s; } .wrapper-colorful-bg .basic li:nth-child(9), .wrapper-colorful-bg .premium li:nth-child(8), .wrapper-colorful-bg .plus li:nth-child(7), .wrapper-colorful-bg .business li:nth-child(6){ -webkit-animation-delay:0.9s; -moz-animation-delay:0.9s; -mos-animation-delay:0.9s; -o-animation-delay:0.9s; animation-delay:0.9s; } .wrapper-colorful-bg .basic li:nth-child(10), .wrapper-colorful-bg .premium li:nth-child(9), .wrapper-colorful-bg .plus li:nth-child(8), .wrapper-colorful-bg .business li:nth-child(7){ -webkit-animation-delay:1s; -moz-animation-delay:1s; -mos-animation-delay:1s; -o-animation-delay:1s; animation-delay:1s; } .wrapper-colorful-bg .basic li:nth-child(11), .wrapper-colorful-bg .premium li:nth-child(10), .wrapper-colorful-bg .plus li:nth-child(9), .wrapper-colorful-bg .business li:nth-child(8){ -webkit-animation-delay:1.1s; -moz-animation-delay:1.1s; -mos-animation-delay:1.1s; -o-animation-delay:1.1s; animation-delay:1.1s; } .wrapper-colorful-bg .basic li:nth-child(12), .wrapper-colorful-bg .premium li:nth-child(11), .wrapper-colorful-bg .plus li:nth-child(10), .wrapper-colorful-bg .business li:nth-child(9){ -webkit-animation-delay:1.2s; -moz-animation-delay:1.2s; -mos-animation-delay:1.2s; -o-animation-delay:1.2s; animation-delay:1.2s; } .wrapper-colorful-bg .premium li:nth-child(12), .wrapper-colorful-bg .plus li:nth-child(11), .wrapper-colorful-bg .business li:nth-child(10){ -webkit-animation-delay:1.3s; -moz-animation-delay:1.3s; -mos-animation-delay:1.3s; -o-animation-delay:1.3s; animation-delay:1.3s; } .wrapper-colorful-bg.plus li:nth-child(12), .wrapper-colorful-bg .business li:nth-child(11){ -webkit-animation-delay:1.4s; -moz-animation-delay:1.4s; -mos-animation-delay:1.4s; -o-animation-delay:1.4s; animation-delay:1.4s; } .wrapper-colorful-bg .business li:nth-child(12){ -webkit-animation-delay:1.5s; -moz-animation-delay:1.5s; -mos-animation-delay:1.5s; -o-animation-delay:1.5s; animation-delay:1.5s; } @-webkit-keyframes start{ 0% {-webkit-transform: translateY(-100%);} 100% {-webkit-transform: translateY(0%);} } @-moz-keyframes start{ 0% {-moz-transform: translateY(-100%);} 100% {-moz-transform: translateY(0%);} } @-mos-keyframes start{ 0% {-mos-transform: translateY(-100%);} 100% {-mos-transform: translateY(0%);} } @-o-keyframes start{ 0% {-o-transform: translateY(-100%);} 100% {-o-transform: translateY(0%);} } @keyframes start{ 0% {transform: translateY(-100%);} 100% {transform: translateY(0%);} } @-webkit-keyframes start-li{ 0% {-webkit-transform: translateX(-200%);} 100% {-webkit-transform: translateX(0%);} } @-moz-keyframes start-li{ 0% {-moz-transform: translateX(-200%);} 100% {-moz-transform: translateX(0%);} } @-mos-keyframes start-li{ 0% {-mos-transform: translateX(-200%);} 100% {-mos-transform: translateX(0%);} } @-o-keyframes start-li{ 0% {-o-transform: translateX(-200%);} 100% {-o-transform: translateX(0%);} } @keyframes start-li{ 0% {transform: translateX(-200%);} 100% {transform: translateX(0%);} } .wrapper-colorful-bg ul li{ color:#eee; text-align: center; overflow:hidden; } .verticalalign{ position: relative; /* top: 50%; */ /* transform: translateY(-50%); */ /* width: 166px; */ } .packcolor{ height: 100%; position: relative; background: rgba(0, 0, 0, 0.75); width: 100%; } .centercontent{ height: 100%; width: 50%; margin-left: 25%; background-color: darkgrey; min-height: 18em; position: absolute; } .centercontent2{ height: 100%; width: 50%; margin-left: 25%; background-color: maroon; min-height: 18em; position: absolute; } @media screen and (max-width:1220px){ .centercontent{ display: none; } .centercontent2{ display: none; } .centercontentmedium{ height: 50%; width: 100%; background-color: darkgrey; min-height: 18em; position: relative; } .centercontentmedium2{ height: 50%; width: 100%; background-color: maroon; min-height: 18em; position: relative; } } /* mobile */ @media screen and (max-width:1220px){ .wrapper-colorful-bg {width: 100%;} .wrapper-colorful-bg ul { position: relative; width:50%; min-width: 15.15em; list-style: none; float: left; font-family: Open Sans; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -mos-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } } @media screen and (max-width:625px){ .wrapper-colorful-bg {width: 100%;} .wrapper-colorful-bg ul { position: relative; width:100%; min-width: 15.25em; list-style: none; float: left !important; font-family: Open Sans; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -mos-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } } .wrapper-colorful-bg .basic{ position: relative; background: rgba(103, 100, 100, 0.94); height: 100%; /* min-height: 37%; */ /* margin-left: 0; */ background: url('../images/nbafsz.jpg') center center no-repeat; background-size: cover; border: 1px solid #000000; padding: 0; margin: 0; } .wrapper-colorful-bg .premium{ position: relative; background: rgba(35, 36, 36, 0.75); height: 100%; /* min-height: 14em; */ float: right; background: url(../images/nflfsz.jpg) center center no-repeat; background-size: cover; border-right: 1px solid #000000; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; margin-left: 0; margin-right: 0; padding: 0; margin: 0; } .wrapper-colorful-bg .plus{ position: relative; background: rgba(31, 31, 31, 0.75); height: 100%; min-height: 14em; background: url(../images/nhlfsz.jpg) center center no-repeat; background-size: cover; border: 1px solid #000000; /* border-top: 1px solid #a41b1c; */ /* border-bottom: 1px solid #a41b1c; */ /* border-left: 1px solid #a41b1c; */ padding: 0; margin: 0; } .wrapper-colorful-bg .business{ position: relative; height: 100%; float: right; min-height: 14em; background: url('../images/bg3.jpg') center no-repeat; background-size: cover; border: 1px solid #000000; /* border-top: 1px solid #a41b1c; */ /* border-bottom: 1px solid #a41b1c; */ /* border-left: 1px solid #a41b1c; */ padding: 0; margin: 0; } .wrapper-colorful-bg ul .icon{ position: relative; height: 5em; width: 5em; background:rgba(255, 255, 255, 0.15); margin:1em auto; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; z-index:2; color:rgba(255, 255, 255, 0.5); display: none; } .wrapper-colorful-bg .basic .icon:before{ position: absolute; top: 0.8em; bottom: 0; left: -0.15em; right: 0; margin: auto; content:'\f1d8'; font-family: FontAwesome; font-size: 2em; } .wrapper-colorful-bg .premium .icon:before{ position: absolute; top: .9em; bottom: 0; left: 0.05em; right: 0; margin: auto; content:'\f108'; font-family: FontAwesome; font-size: 2em; } .wrapper-colorful-bg .plus .icon:before{ position: absolute; top: .75em; bottom: 0; left: 0em; right: 0; margin: auto; content:'\f087'; font-family: FontAwesome; font-size: 2em; } .wrapper-colorful-bg .business .icon:before{ position: absolute; top: .75em; bottom: 0; left: -0.1em; right: 0; margin: auto; content:'\f135'; font-family: FontAwesome; font-size: 2em; } .wrapper-colorful-bg .basic:hover .icon:before{ color: #005C5A; } .wrapper-colorful-bg .premium:hover .icon:before{ color: #199C7B; } .wrapper-colorful-bg .plus:hover .icon:before{ color: #F37100; } .wrapper-colorful-bg .business:hover .icon:before{ color: #ED4D13; } .wrapper-colorful-bg ul .icon:after{ position: absolute; content: ''; top:0; left:0; width: 100%; height: 100%; background: rgba(242, 242, 242, 0.75); -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -mos-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; -webkit-transform: scale(0,0); -moz-transform: scale(0,0); -mos-transform: scale(0,0); -o-transform: scale(0,0); transform: scale(0,0); -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; z-index:-1; } .wrapper-colorful-bg ul:hover .icon:after{ -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -mos-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); } .wrapper-colorful-bg ul .name{ height: 3em; line-height: 0em; -webkit-transition: all 0.25s ease 0.15s; -moz-transition: all 0.25s ease 0.15s; -mos-transition: all 0.25s ease 0.15s; -o-transition: all 0.25s ease 0.15s; transition: all 0.25s ease 0.15s; } .wrapper-colorful-bg ul:hover .name{ -webkit-box-shadow: inset 0px -2em 0px 0px rgba(239, 239, 239, 0.25); -moz-box-shadow: inset 0px -2em 0px 0px rgba(239, 239, 239, 0.25); box-shadow: inset 0px -3em 0px 0px rgba(239, 239, 239, 0.25); } .wrapper-colorful-bg ul .name h1{ text-transform: uppercase; font-weight: 300; font-size: 1.5em; color: rgba(255, 255, 255, 0.75); -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -mos-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .wrapper-colorful-bg ul:hover .name h1{ color: rgba(255, 255, 255, 1); } .wrapper-colorful-bg ul .price-col{ height: 1.25em; line-height: 1.25em; font-size: 3em; font-family: 'exo_2.0extra_light'; color: rgba(255, 255, 255, 0.75); -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -mos-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .wrapper-colorful-bg ul .price-col .cost{ position: relative; width: 100%; height:100%; -webkit-box-shadow: inset 0px -0em 0px 0px rgba(239, 239, 239, 1); -moz-box-shadow: inset 0px -0em 0px 0px rgba(239, 239, 239, 1); box-shadow: inset 0px -0em 0px 0px rgba(239, 239, 239, 1); -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -mos-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .wrapper-colorful-bg ul:hover .price-col .cost{ position: relative; -webkit-box-shadow: inset 0px -1.5em 0px 0px rgba(239, 239, 239, 0.75); -moz-box-shadow: inset 0px -1.5em 0px 0px rgba(239, 239, 239, 0.75); box-shadow: inset 0px -1.5em 0px 0px rgba(239, 239, 239, 0.75); } .wrapper-colorful-bg .basic:hover .price-col .cost{color: #CE0606;} .wrapper-colorful-bg .premium:hover .price-col .cost{ color: #CE0606; } .wrapper-colorful-bg .plus:hover .price-col .cost{ color: #CE0606; } .wrapper-colorful-bg .business:hover .price-col .cost{ color: #CE0606; } .wrapper-colorful-bg ul .price-col .cost .valuta{ position:relative; font-size: 0.5em; font-weight: 400; display: inline-table; vertical-align: super; } .wrapper-colorful-bg ul .price-col .cost .mounthly{ position:relative; font-size: 0.5em; font-weight: 300; display: inline-table; text-transform: uppercase } .wrapper-colorful-bg ul .description-range{ height: 2.75em; line-height: 3em; font-size: .8em; } .wrapper-colorful-bg ul .description-range:after{ position: absolute; content: ''; width: 0%; height:32px; background: rgba(255, 255, 255, 0.15); left:0%; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -mos-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .wrapper-colorful-bg ul .description-range:hover:after{ width: 100%; } .wrapper-colorful-bg .description-range:before{ position:absolute; font-family: FontAwesome; font-weight: normal; width: 1em; font-size: 1em; left: -1.5em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -mos-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .wrapper-colorful-bg .description-range:hover:before{ left: 1em; } .wrapper-colorful-bg .description-range:nth-child(3):before { /* content: '\f0a0'; */ } .wrapper-colorful-bg .description-range:nth-child(4):before { /* content: '\f1d9'; */ } .wrapper-colorful-bg .description-range:nth-child(5):before { /* content: '\f003'; */ } .wrapper-colorful-bg .description-range:nth-child(6):before { content: '\f0ac'; } .wrapper-colorful-bg .description-range:nth-child(7):before { content: '\f023'; } .wrapper-colorful-bg .description-range:nth-child(8):before { content: '\f133'; } .wrapper-colorful-bg .description-range:nth-child(9):before { content: '\f0e8'; } .wrapper-colorful-bg .description-range:before { content: '\f006'; } .wrapper-colorful-bg ul .purchase{ height: 3em; line-height: 3em; } .wrapper-colorful-bg ul .purchase a{ position: relative; padding: 0.3em; border:4px solid rgba(239, 239, 239, 0.5); color: #fff; text-decoration: none; z-index: 1; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -mos-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -mos-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; font-size: .9em; } .wrapper-colorful-bg .basic .purchase a{ color:#fff; background: #A50000; -webkit-box-shadow: inset 0px 0px 0px 0px rgba(239, 239, 239, 1); -moz-box-shadow: inset 0px 0px 0px 0px rgba(239, 239, 239, 1); box-shadow: inset 0px 0px 0px 0px rgba(239, 239, 239, 1); } .wrapper-colorful-bg .premium .purchase a{ color:#fff; background: #9A0404; } .wrapper-colorful-bg .plus .purchase a{ color:#fff; background: #9A0404; } .wrapper-colorful-bg .business .purchase a{ color:#fff; background: #9A0404; } .wrapper-colorful-bg ul .purchase a:hover{ color:#005C5A; -webkit-box-shadow: inset 0px -40px 0px 0px rgba(239, 239, 239, 1); -moz-box-shadow: inset 0px -40px 0px 0px rgba(239, 239, 239, 1); box-shadow: inset 0px -47px 0px 0px rgba(239, 239, 239, 1); } .wrapper-colorful-bg .premium .purchase a:hover{ color:#199C7B; } .wrapper-colorful-bg .plus .purchase a:hover{ color:#F37100; } .wrapper-colorful-bg .business .purchase a:hover{ color:#ED4D13; } .wrapper-colorful-bg ul .purchase:before{ position: absolute; content: ''; background: rgba(239, 239, 239, 0.5);; width: 50%; height:1em; bottom:1em; left:25%; -webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -mos-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .wrapper-colorful-bg ul:hover .purchase:before{ position: absolute; content: ''; width: 90%; height:1em; left:5%; } /* ========================================================================== 2.0 Globals ========================================================================== */ body{font-size: 15px; padding: 0; margin: 0} .centerize{display: table; margin: 0 auto} /* ========================================================================== 3.0 Typography ========================================================================== */ *{font-family:'PT Sans', arial, sans-serif } p{font-size: 1.5em;line-height: 1.25em;display: block;margin: 0 0 1em 0;} h1,h2,h3,h4,h5,h6{ font-weight: 700; letter-spacing: 0.040em; text-transform: uppercase; margin: 1em 0; display: block; } /* Default Headers */ h1{font-size: 60px;} h2{font-size: 54px;} h3{font-size: 42px;} h4{font-size: 36px;} h5{font-size: 28px;} h6{font-size: 22px;} /* Post/Page Content Headers */ #pageContent h1{font-size: 36px;} #pageContent h2{font-size: 32px;} #pageContent h3{font-size: 28px;} #pageContent h4{font-size: 31px;} #pageContent h5{font-size: 20px;} #pageContent h6{font-size: 18px;} .lead{ font-size: 24px; font-weight: 100; color: #393e48; opacity: 0.5; display: block; line-height: 1.45em; margin: 1em 0; } /* ========================================================================== 4.0 Elements + Framework ========================================================================== */ /* Panels */ .panel{width: 100%; padding: 2em 0em; margin: 0 auto; overflow: hidden; background: #f9f9f9} /* Clearfix */ .cf:before, .cf:after {content: " "; /* 1 */ display: table; /* 2 */} .cf:after{clear: both;} .cf {*zoom: 1;} /* Columns */ .border-box, .half, .third, .fourth{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .half{width: 50%;float: left;/* padding: 1px 2px; */} .third{width: 33.3%; float: left; padding: 1em} .fourth{width: 25%; float: left; padding: 1em} /* Containers */ .inner{width: 90%; margin: 0 auto; } .pad10{padding: 1em 0} .pad11{padding: 1em} .pad12{padding: 1em 2em} .pad13{padding: 1em 3em} .pad20{padding: 2em 0} .pad21{padding: 2em 1em} .pad22{padding: 2em} .pad23{padding: 2em 3em} .pad30{padding: 3em 0} .pad31{padding: 3em 1em} .pad32{padding: 3em 2em} .pad33{padding: 3em} .pad40{padding: 4em 0} .pad41{padding: 4em 1em} .pad42{padding: 4em 2em} .pad43{padding: 4em 3em} .pad50{padding: 5em 0} .pad51{padding: 5em 1em} .pad52{padding: 5em 2em} .pad53{padding: 5em 3em} /* Clearing */ .clear{clear: both} .last{margin-right: 0px;} /* Alignment */ .alignleft, .pull-left{/* float: left; */} .alignright, .pull-right{float: right;} .aligncenter{margin: 0 auto; text-align: center; display: block;} .anchor{position: relative} /* Easing */ .ease{-webkit-transition: all 10s; -moz-transition: all 10s; transition: all 10s} /* Buttons */ .btn, .gform_button{ font-size: 16px; color: #555; background: #fff; padding: 1em 3.5em; display: inline-block; text-transform: uppercase; border: 1px solid rgba(0,0,0,.05); border-bottom: 4px solid #ccc; text-decoration: none; font-weight: 700; border-radius: 4px; margin-bottom: .5em; /* box-shadow: inset 0 2px 0 rgba(255,255,255,0.3); */ opacity: 0.9; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); max-width: 90% } .btn:hover{opacity: 1;} .btn.huge{font-size: 26px; padding: 1em 2.5em; border-bottom-width: 5px} .btn.medium{font-size: 15px; padding: 1.2em 2.5em; border-bottom-width: 2px} .btn.small{font-size: 14px; padding: .75em 2em; border-bottom-width: 3px} .btn.tiny{font-size: 13px; padding: .5em 1.5em; border-bottom-width: 2px} .btn.round{-moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px;} .btn.flat{box-shadow: none !important; border: none !important} .btn.yellow{background: #fdc92a; color: #fff !important; border-color: #c79d1b} .btn.red{background: #cf263b; color: #fff !important; border-color: #981d2c;} .btn.dark{background: #252931; color: #fff !important; border-color: #111} .btn.blue, .gform_button{background: #2a90c5; color: #fff !important; border-color: #1575a4} .gform_button{border: none} /* Overrides */ .padless{padding: 0 !important} /* Auto-Scaling */ img.autoscale{width: 100%; height: auto;} .bg-cover{background-size: cover !important} .bg-fill{background-size: 100% auto} /* Hide for Mobile */ @media and (max-width: 800px){ .nomobi{display: none !important} } /* PhotoStrip */ .photostrip{ width: 100%; padding: 0; clear: both; overflow: hidden } .photostrip .third{width: 33.3333%; display: block; float: left; vertical-align: top; padding: 0 !important} .photostrip .third img{width: 100%; height: auto; min-width: 100%; vertical-align: top} /* Mobile Reveal */ .mobile-reveal{display: none} /* Admin Edit Link */ #pageContent .post-edit-link{background: #fff; padding: .25em 1em; border-radius: 48px; border: 1px solid #ddd; font-weight: 600; font-size: 13px;} #adminedit .post-edit-link{font-size: 13px; position: fixed; bottom: 0; background: rgba(0,0,0,.75); color: #fff; line-height: 36px; text-align: center; opacity: 0.5; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; z-index: 999; border-top-left-radius: 20px; border-top-right-radius: 20px; left: 48%; padding: 0 2em} #adminedit .post-edit-link:hover{opacity: 1; padding-bottom: 1em} .spacer{display: block; clear: both; width: 100%; height: 25px; border-top: 1px solid #eee; margin-top: 25px;} blockquote{ background: #f9f9f9; margin: 36px 0px; padding: 2em 5em; border-radius: 5px } blockquote p{ font-style: italic; font-size: 1.2em } hr{opacity: 0.25} /* ========================================================================== 5.0 Headers + Navigation ========================================================================== */ #registerFloat{ float: right; margin-right: 5%; font-size: 11px; font-weight: 700; color: #fff; text-transform: uppercase; line-height: 28px; letter-spacing: 0em; } #registerFloat span{color: #ff6d66} .headernav .topbar{ width: 100%; height: 28px; line-height: 29px; color: #fff; text-transform: uppercase; font-weight: 700; opacity: 0.9; display: block; letter-spacing: 0.05em; font-size: 13px; } .headernav #translate{ width: 30px; padding: 0 10px; height: 28px; float: left; display: none; margin-left: 1em; background: url(icon-arrowbg.png) 90% 10px no-repeat; background-size: 9px auto; -webkit-transition: background-color .2s; -moz-transition: background-color .2s; transition: background-color .2s; } .headernav #translate:hover{ background-color: rgba(255,255,255,0.05); } .headernav #searchToggle{ width: 50px; height: 28px; float: left; display: block; background: url(icon-search.png) center center no-repeat; opacity: 0.5; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; cursor: pointer } #searchBar{ width: 100%; height: 60px; font-size: 18px; color: #fff; padding: 0 10%; background: #30343a; line-height: 60px; position: fixed; top: -60px; left: 0px; display: block; z-index: 10; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #searchBar input{ width: 100%; height: 50px; margin-top: 5px; background: transparent; border: none; outline: none; } .search-result{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 2em; border: 1px solid #eee; border-radius: 5px; margin-bottom: 1em; display: block; border-bottom-width: 3px; -webkit-transition: all .2s; -moz-transition: all .2s; transition: all .2s; } .search-result:hover{padding-left: 2.5em;} .search-result h6{margin: 0px;} .search-result h6 a{color: #555 !important; text-decoration: none} .search-result p{margin: .5em 0 !important} .search-result. .postdate{ font-size: 11px; color: #fff; display: inline-block; background: #00b1e2; border-radius: 3px; padding: 3px 7px; font-weight: 700; text-transform: uppercase } .headernav #searchToggle:hover{opacity: 1} .headernav #headerLeft .topbar{float: right; padding-right: 80px;} .headernav #headerRight .topbar{/* float: right; */padding-left: 80px;} #registerli{float: right !important;margin-right: 2% !important;} #registerLink{ background: url(registerbg.png) left top no-repeat !important; width: 132px; height: 55px !important; margin-top: 5px; display: inline-block; padding: 0 !important; -webkit-transition: all .6s !important; -moz-transition: all .6s !important; transition: all .6s !important; opacity: 0.9; float: right; background-size: cover; } #registerLink:hover{opacity: 1 !important} #headerRight .navrow{width: 100% !important} .navrow{-moz-box-sizing: border-box; -webkit-box-shadow: border-box; box-sizing: border-box} #venueHead{cursor: pointer} /* ========================================================================== 5.1 Slash Header ========================================================================== */ #logoBar{ width: 100%; background: rgba(0,0,0,0.5); height: 95px; z-index: 999; text-align: center; position: absolute; top: 0; left: 0; display: block; /* margin-bottom: 21px; */ } #logoBar #logo{position: relative;height: 80px;margin-top: 8px;} #logo2{width: 100%; max-width: 525px; max-height: 275px;} #slashHeader{position: fixed; top: 0; left: 0; z-index: 1000; width: 100%;} #slashHeader #headerLeft, #slashHeader #headerRight{width: 37.5%; height: 95px;} #slashHeader #headerLeft{ float: left; background: url(slash-header-left.png) right top no-repeat; display: block; text-align: right } #slashHeader #headerRight{ float: right; background: url(slash-header-right.png) left top no-repeat; display: block; text-align: left } #slashMenuLeft{float: right;width: auto;list-style: none;padding: 30px 125px 0 0;margin: 0;} #slashMenuLeft > li{float: left;margin-left: 3px;} #slashMenuLeft > li > a{ font-size: 19px; font-weight: 700; color: #fff; text-transform: uppercase; padding: 0px 5px; background: url(icon-arrowbg.png) right 27px no-repeat; text-decoration: none; height: 62px; line-height: 62px; display: inline-block; text-align: left; transition: all .6s; } #slashMenuLeft > li > a.active{background-position-y: -68px} #slashMenuRight{float: left;width: auto;list-style: none;padding: 0px 0 0 75px;margin: 0;} #slashMenuRight > li{float: left; margin-right: 10px;} #slashMenuRight > li:nth-child(2) a{line-height: 18px !important;text-align: center;padding-top: 21px;background-position-y: 27px;width: 75px;margin-top: -5px;} #slashMenuRight > li:nth-child(2) .dropdown-block.simple-drop{top: 67px !important;} #slashMenuRight > li > a{ font-size: 16px; font-weight: 700; color: #fff; text-transform: uppercase; padding: 0 10px; /* background: url(icon-arrowbg.png) left 27px no-repeat; */ text-decoration: none; height: 62px; line-height: 62px; display: inline-block; text-align: left; transition: all .25s; float: right; } #slashMenuRight > li > a.active{background-position-y: -68px} ul.navrow > li > a:hover{color: #ca5959 !important;} #linknotavailable{ position: absolute; bottom: -39px; left: -500px; background: #ee3b33; color: #fff; display: block; width: 800px; text-align: center; padding: 10px 0; opacity: 0 } #comingSoon-mobile{ background: #ee3b33; color: #fff; display: inline-block; width: 70%; border-radius: 5px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; padding: 10px 0; display: none; position: fixed; top: 100px; left: 50%; margin-left: -35%; } .mobi-linkna{opacity: 0.1 !important} /* Mobile */ .link-disabled{opacity: 0.15 !important} /* Desktop Nav */ .link-disabled:hover{opacity: 0.35 !important} /* ========================================================================== 5.2 Standard Header ========================================================================== */ #standardHeader{position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; background: rgba(0,0,0,0.7) url(slash-header-right.png) center top no-repeat; background-size: 150% 95px} #standardHeader #stdlogo{position: fixed; top: 0; left: 50%; margin-left: -47px;} #standardHeader #headerLeft, #standardHeader #headerRight{width: 37.5%; height: 95px; } #standardHeader #headerLeft{ float: left; display: block; text-align: right } #standardHeader #headerRight{ float: right; display: block; text-align: left } #stdMenuLeft{float: right; width: auto; list-style: none; padding: 0 80px 0 0;} #stdMenuLeft > li{float: left; margin-left: 10px;} #stdMenuLeft > li > a{ font-size: 19px; font-weight: 700; color: #fff; text-transform: uppercase; padding: 0 20px; background: url(icon-arrowbg.png) right 27px no-repeat; text-decoration: none; height: 62px; line-height: 62px; display: inline-block; text-align: left; transition: all .25s; } #stdMenuLeft > li > a.active{background-position-y: -68px} #stdMenuRight{float: left; width: auto; list-style: none; padding: 0 0 0 80px;} #stdMenuRight > li{float: left; margin-right: 10px;} #stdMenuRight > li:nth-child(2) a{line-height: 18px !important; text-align: center; padding-top: 15px; background-position-y: 27px} #stdMenuRight > li:nth-child(2) .dropdown-block.simple-drop{top: -10px !important} #stdMenuRight > li > a{ font-size: 19px; font-weight: 700; color: #fff; text-transform: uppercase; padding: 0 20px; background: url(icon-arrowbg.png) left 27px no-repeat; text-decoration: none; height: 62px; line-height: 62px; display: inline-block; text-align: left; transition: all .25s; } #stdMenuRight > li > a.active{background-position-y: -68px} .navrow > li > a:hover{color: #ccc !important} /* ========================================================================== 5.3 Drop Down Menus ========================================================================== */ .headernav ul li > ul > li{position: relative} .headernav ul.dropdown{list-style: none;} .headernav .dropdown-block{ width: 800px; height: 400px; display: block; position: absolute; top: 5px; left: 0; text-align: left; display: none; } .headernav .dropdown-block .dropdown-selector{ width: 500px; height: 400px; float: left; } .headernav .dropdown-block .dropdown-selector .dropdown-header{ width: 100%; height: 85px; background: #fff; clear: both; line-height: 85px; text-align: center } .headernav .dropdown-block .dropdown-selector .dropdown-header .parent-name{ font-size: 22px; font-weight: 700; color: #1d2025; opacity: 0.9; letter-spacing: 0.04em; text-transform: uppercase; display: inline-block; margin-right: 20px; } .headernav .dropdown-block .dropdown-selector .dropdown-header .subtitle{ font-size: 16px; font-weight: 500; color: #323539; opacity: 0.7; letter-spacing: 0.01em; display: inline-block; } .headernav .dropdown-block ul{list-style: none} .headernav .dropdown-block .dropdown-selector .dropdown-browse{ width: 50%; height: 315px; background: #464a50; display: block; float: left; } .headernav .dropdown-block .dropdown-selector .dropdown-browse ul li a{ color: #fff; display: block; font-size: 16px; line-height: 3em; font-weight: 500; text-decoration: none; padding: 0 0 0 2em; transition: background-color .1s ease-in-out; } .headernav .dropdown-block .dropdown-selector .dropdown-browse ul li a:hover, .headernav .dropdown-block .dropdown-selector .dropdown-browse ul li a.selected{ background: #34383f url(dropdownarrow-light.png) 90% center no-repeat; } .headernav .dropdown-block .dropdown-selector .dropdown-dynam-content{ width: 50%; height: 315px; background: #fdfdfd; display: block; float: right; overflow: auto } .headernav .dropdown-block .dropdown-selector .dropdown-dynam-content ul li a{ color: #696969; display: block; font-size: 16px; line-height: 3em; font-weight: 500; text-decoration: none; padding: 0 0 0 2em; transition: background-color .1s ease-in-out; } .headernav .dropdown-block .dropdown-selector .dropdown-dynam-content ul li a:hover, .headernav .dropdown-block .dropdown-selector .dropdown-dynam-content ul li a.selected{ background: #eaebeb url(dropdownarrow-dark.png) 90% center no-repeat; } /* Dropdown Snapshot */ .headernav .dropdown-block .dropdown-snapshot{ width: 300px; height: 400px; background: #464a50; display: none; float: right; position: relative; } .headernav .dropdown-block .dropdown-snapshot .snapshot-thumb{ width: 270px; height: 175px; overflow: hidden; margin: 15px auto; display: block; border-radius: 3px; border-bottom: 3px solid #34383e; } .headernav .dropdown-block .dropdown-snapshot .snapshot-thumb img{ min-width: 100%; min-height: 175px; height: auto; } .headernav .dropdown-block .dropdown-snapshot .snapshot-excerpt{ width: 85%; margin: 0 auto; max-height: 95px; overflow: hidden; font-size: 13px; color: #b1b1b1; line-height: 1.5em; display: block; margin-top: 2em; } .headernav .dropdown-block .dropdown-snapshot .viewlink{ width: 100%; color: #fff; text-align: center; font-size: 14px; font-weight: 600; opacity: 0.9; background: #30343a url(dropdownarrow-light.png) 90% center no-repeat; position: absolute; bottom: 0; left: 0; text-decoration: none; line-height: 55px; } .headernav .dropdown-block .dropdown-snapshot .viewlink:hover{opacity: 1} /* Simple Dropdown */ .headernav .dropdown-block.simple-drop{ width: 250px; height: auto; display: block; position: absolute; top: 5px; left: 0; background: #fdfdfd; text-align: left; display: none; box-shadow: 0 0 5px rgba(0,0,0,0.35); margin-top: -15px; } .headernav .dropdown-block.simple-drop li p{ padding: 0px; text-align: center; margin-bottom: 0px; } .headernav .dropdown-block.simple-drop ul{padding: 1em 0;text-align: -webkit-center;text-align: center;} .headernav .dropdown-block.simple-drop ul li a{ color: #696969; display: block; font-size: 16px; line-height: 3em; font-weight: 500; text-decoration: none; padding: 0 0 0 0em; transition: background-color .2s ease-in-out; } .headernav .dropdown-block.simple-drop ul li a:hover{ background: #eaebeb url(dropdownarrow-dark.png) 90% center no-repeat; } /* ========================================================================== 6.0 Billboard / Carousel ========================================================================== */ #billboard{max-height: 1000px; overflow: hidden; background: #222;} #billboard .slideContent{ position: absolute; width: 70%; text-align: center; left: 50%; top: 0%; margin-left: -35%; z-index: 100; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); transform: scale(0.75); } #billboard .slideContent h1{font-size: 72px; letter-spacing: -0.010em; margin: .25em 0 0em 0 } #billboard h1, #billboard .ribbontext{position: relative} #billboard .slideContent .ribbontext{font-size: 16px; letter-spacing: 0.100em; color: #fff; font-weight: 700; text-transform: uppercase; line-height: 37px; background: url(redribbon.png) center top no-repeat; text-align: center; padding: 0 2em; background-size: 100% 37px; display: inline-block} .rsImg { opacity: 0.2; } /* ========================================================================== 7.0 Homepage Modules ========================================================================== */ .home #logoBar{display: block !important; position: fixed} .us_floating .us_wrapper{opacity: 0.5; transition: opacity .2s} .us_floating .us_wrapper:hover{opacity: 1} .sectionTitle{font-size: 60px; display: table; margin: 0 auto; text-align: center; -webkit-transition: all 1s} .titleStuck{position: fixed; top: 0%; width: 100%; left: 0; text-align: center; z-index: 9; font-size: 36px !important; transition: all .2s; text-shadow: none!important; background: rgba(54,58,66,0.8); line-height: 95px !important; padding: 0px !important} .sectionTitle.fixed{position: fixed; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; z-index: 9; font-size: 30px !important; text-shadow: none!important; background: rgba(54,58,66,1); line-height: 95px !important; padding: 0px !important} .sectionTitle.fixed.absolute{position: absolute !important;} .sectionTitle.fixed br{display: none !important} /* ========================================================================== 7.1 Newsletter ========================================================================== */ #newsletter{ width: 100%; height: 90px; background: #363a42; display: block; overflow: hidden; } /* hide simplycast defaults */ #footerImage, #LabelElement_0_label, #LabelElement_1_label, .small-description, #EmailElement_0_label{display: none !important} .newsletterTxt{ /* background: url(icon-newsletter.png) right 25px no-repeat; */ /* padding-right: 70px; */ color: #fff; text-align: center; /* float: left; */ margin-right: 0px; /* width: 50%; */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .newsletterTxt h6{text-transform: capitalize;margin-bottom: 0;font-size: 24px;letter-spacing: 0;text-align: -webkit-center;text-align: center;margin: 0;} #newsletterForm{float: right; width: 48%; position: relative;} #newsletterForm .body-div{background: transparent !important} #newsletterForm input[type="text"]{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; top: 28px; left: 0; width: 65% !important; height: 45px; padding: 0 !important; border: none !important; border-radius: 4px; text-indent: 8%; outline: none; color: #aaa8a8 !important} #newsletterForm input[type="submit"]{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;position: absolute; top: 26px; right: 0; height: 49px !important; width: 30% !important; text-align: center; color: #fff !important; border: none; background: #252931 !important; text-transform: uppercase; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 0.1em; border-radius: 4px; font-family: 'PT Sans', sans-serif !important;} #newsletterForm input[type="submit"]:hover{background: #23262e !important; cursor: pointer} #newsletterForm br{display: none !important} #newsletterForm p{color: #fff !important} #newsletterForm p[style="font-weight:bold; font-size:18px;"]{margin-top: 18px !important; position: relative; top: 13px;} .errorTip .errorInner{left: -330px !important; top: 60px !important;} #blogUpdates{ width: 100%; height: 495px; background: url() left center no-repeat fixed; background-size: 100% auto; overflow: hidden; display: block; } /* Full View --> Blog Page */ #blogUpdates.fullview{height: auto !important; background: #f6f6f6 !important} #blogUpdates.fullview .half:nth-child(2){background: rgba(66,70,77,0.02) !important} #blogUpdates.fullview .blogpost{padding: 2em 2em 1em 2em !important; background: rgba(255,255,255,1) !important; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; margin-bottom: 1em} #blogUpdates.fullview .miniBlogRoll .blogpost .posttitle{font-size: 18px !important} #blogUpdates.fullview .miniBlogRoll .blogpost .postdate{right: 2em !important; top: 2.5em !important; background: transparent !important; color: #bbb !important} #blogUpdates.fullview .fullupdate-btn{ width: 100%; line-height: 40px; color: #aaa; background: #f9f9f9; display: block; padding: 0 1em; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border-radius: 4px; text-align: center; transition: all .2s; border-bottom: 2px solid #f2f2f2; text-decoration: none } #blogUpdates.fullview .fullupdate-btn:hover{color: #fff; background: #2a90c5; border-bottom: 2px solid #1f6d9e;} #blogUpdates h6{ text-transform: capitalize; border-bottom: 1px solid #cacbcc; padding-bottom: .75em; letter-spacing: 0 } #blogUpdates.fullview h6{text-align: center; font-size: 28px; color: #5c5c5c} #blogUpdates .half{height: 100%;/* padding: 0em 5em; */text-align: -webkit-center;} #blogUpdates .half:nth-child(2){background: rgba(66,70,77,0.07);} .theLatest{ background: rgba(255,255,255,0.5); padding: 1.5em; border-radius: 5px; display: block; overflow: hidden; border-bottom: 2px solid rgba(0,0,0,0.15); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; cursor: default; opacity: 0.9 } .theLatest:hover{background: rgba(255,255,255,1); opacity: 1} .theLatest .latestPostThumb{ float: left; width: 32%; border-radius: 5px; overflow: hidden; max-width: 140px; } .theLatest .latestPostContent{width: 68%; float: left; padding-left: 1em} .theLatest .latestPostThumb img{ width: 100%; height: auto } .theLatest .posttitle{ font-size: 18px; text-transform: uppercase; display: block; color: #484f5d; font-weight: 700; text-decoration: none } .postdate{ font-size: 11px; color: #fff; display: inline-block; background: #00b1e2; border-radius: 3px; padding: 3px 7px; font-weight: 700; text-transform: uppercase } .theLatest .postexcerpt p{ display: block; margin: .7em 0 0 0 !important; color: #484f5d } .theLatest .postexcerpt a{color: #555 !important; font-style: italic !important} .miniBlogRoll{/* margin-top: 9px; */} .miniBlogRoll .blogpost{ width: 100%; padding: 1.1em 0; border-bottom: 1px solid #ddd; position: relative; border-radius: 4px; text-align: center; text-align: -webkit-center; font-size: 20px; } .miniBlogRoll .blogpost:last-child{ border: none; } .miniBlogRoll .blogpost .posttitle{ text-decoration: none; color: #484f5d !important; text-transform: uppercase; text-decoration: none; letter-spacing: 0.040em; -webkit-transition: all .2s; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; position: relative; display: block; z-index: 1 } .miniBlogRoll .blogpost .postdate{ background: #888b8f; position: absolute; right: 0; top: 10px; -webkit-transition: all .2s; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; z-index: 2 } .miniBlogRoll.miniview .blogpost:hover .posttitle{padding-left: 12px;} .miniBlogRoll.miniview .blogpost:hover{background: rgba(0,0,0,0.05);} .miniBlogRoll.miniview .blogpost:hover .postdate{margin-right: 8px; background: #666} .singlePostTitle{border-bottom: 1px solid #eee; padding-bottom: .6em; margin-bottom: 0px} .singlePostTitle i, .posttitle strong i{text-transform: lowercase !important} .us_posts_top{background: #f9f9f9; padding: 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #viewallnews-btn{width: 100%; background: #fff; color: #5c5c5c; text-align: center; text-decoration: none; line-height: 75px; font-size: 16px; display: block; font-weight: 600} #viewallnews-btn:hover{background: #f1f1f1;} /* ========================================================================== 7.3 General Info Module ========================================================================== */ #generalInfo{ background: lightskyblue; background-size: cover; clear: both; overflow: hidden; position: relative; transition: none !important } #generalInfo .animeHero{position: absolute; left: -130px; top: 10px} #generalInfo h2{ color: #fff; text-shadow: 5px 5px 0 #fba418; line-height: 1em; } #tab_policies h4{font-size: 24px} #generalInfoModule{ width: 100%; margin: 4em auto; background: #fff; display: block; border-radius: 5px; overflow: hidden } #generalInfoModule #generalInfo_tabbedNav{ width: 100%; background: #2e3641; display: block; text-align: center; overflow: hidden; } #generalInfoModule #generalInfo_tabbedNav ul li{ display: inline-block; } #generalInfoModule #generalInfo_tabbedNav ul li a{ line-height: 80px; font-size: 16px; font-weight: 700; color: #fff; padding: 0 1.5em; display: inline-block; text-decoration: none; text-transform: uppercase; transition: all .2s } #generalInfoModule #generalInfo_tabbedNav ul li a:hover, #generalInfoModule #generalInfo_tabbedNav ul li a.selected{ color: #fdc92c; background: #20262f; } #theVenue{ width: 100%; height: 235px; background: dimgrey; background-size: cover; display: block; } #theVenue .venue-inner{ width: 80%; height: 100%; margin: 0px auto; max-width: 1000px } #theVenue .third{ color: #fff; padding: 0px; text-align: center } #theVenue .venue-label{line-height: 235px; font-weight: bold; font-size: 24px; text-align: center} #theVenue .venue-address{padding-top: 85px; font-size: 18px; } #theVenue .venue-directions{padding-top: 90px; text-align: center;} #generalInfo_tabbedContent{ width: 100%; background: lightgrey; min-height: 600px; display: block; padding: 1em 0; } #generalInfo_tabbedContent .tabContent{position: relative} #generalInfo_tabbedContent .option-fullcol{ width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 2em 5em; display: block; } #generalInfo_tabbedContent .option-fullcol:nth-child(even){background: #f6f6f7} #generalInfo_tabbedContent .option-fullcol .optionexcerpt{ width: 70%; float: left; } #generalInfo_tabbedContent .option-fullcol .btn{ float: right; margin-top: 1.5em } #generalInfo_tabbedContent .option-fullcol .optionexcerpt img.thumb{ float: left; margin-right: 2em; width: 20%; height: auto; max-width: 200px; } #generalInfo_tabbedContent .option-fullcol .optionexcerpt strong.title{ font-size: 16px; font-weight: 700; display: inline-block; padding: 1em 0 .5em 0; } #generalInfo_tabbedContent .option-fullcol .optionexcerpt .excerpt{ font-size: 14px; } /* ========================================================================== 8.0 Footer ========================================================================== */ .dropbtn { background: none; /* color: white; */ padding: 16px; font-size: 125%; border: none; cursor: pointer; color: #6a6e75; text-transform: uppercase; font-weight: 700; /* border-right: 2px solid #30343c; */ padding: 0px 5px; text-decoration: none; line-height: 1em; } /* The container
- needed to position the dropdown content */ .dropdown { position: relative; display: inline-block; } /* Dropdown Content (Hidden by Default) */ .dropdown-content { display: none; position: absolute; background-color: #ffffff; min-width: 225px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.75); margin-top: -155px; min-height: 102px; margin-left: -140px; } /* Links inside the dropdown */ .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } /* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: #f1f1f1} /* Show the dropdown menu on hover */ .dropdown:hover .dropdown-content { display: block; } /* Change the background color of the dropdown button when the dropdown content is shown */ .dropdown:hover .dropbtn { /* background-color: #3e8e41; */ } #footerBase{ background: #2a2e36; width: 100%; height: 155px; text-align: center; } #footerBase .copyright{ font-size: 13px; font-weight: 600; color: #484b50; line-height: 1.5em; margin: 3em 0 0em 0; } #footerBase ul li{list-style: none;display: inline-block;padding: 1em 0;} #footerBase ul li a{ color: #6a6e75; text-transform: uppercase; font-weight: 700; border-right: 2px solid #30343c; padding: 0 5px; text-decoration: none; line-height: 1em; } #footerBase ul li a:hover{color: #ae2020;text-decoration: underline;} #footerBase ul li:last-child a{border-right: 0px;} #footerBase .spjalogo{position: absolute; top: 45px; right: 5%; opacity: 0.2; transition: all .3s;} #footerBase .spjalogo:hover{opacity: 0.5} /* ========================================================================== 9.0 Page Layout ========================================================================== */ #pageContent{/* padding-bottom: 100px !important */} #pageContent img.alignleft{margin-right: 1.5em} #pageContent img.alignright{margin-left: 1.5em} #pageContent.standard-layout{ width: 70%; float: left; padding: 50px 0; } #pageWrap p, #pageContent p{ line-height: 1.9em; margin: 1em 0; color: #555; } #pageContent.standard-layout .half.pull-left{width: 47%; margin-right: 3%} #pageContent.standard-layout .half.pull-right{width: 47%; margin-left: 3%} #pageHeader{/* padding-top: 80px; */} #pageHeader.standard .pageTitle, #pageHeader.standard .pageSubtitle{position: relative} #pageHeader.standard{ width: 100%; height: 275px; background: #383d48 left center no-repeat; background-size: 110% auto; display: block; text-align: center; position: relative; box-shadow: inset 0 0 0 1000px rgba(42, 46, 54, 0.52); padding-top: 100px; background: url(/img/bgkjs.png) left center no-repeat fixed; background-size: 100% auto; } #pageHeader.standard2{ width: 100%; height: 120px; background: #383d48 left center no-repeat; background-size: 110% auto; display: block; text-align: center; position: relative; box-shadow: inset 0 0 0 1000px rgba(42, 46, 54, 0.52); padding-top: 100px; background: url(/img/bgkjs.png) left center no-repeat fixed; background-size: 100% auto; } #pageHeader.standard .pageTitle{ font-size: 54px; color: #fff; text-transform: uppercase; margin-bottom: 10px; margin-top: 130px; line-height: 1em; letter-spacing: 0; } #pageHeader.standard .pageSubtitle{ font-size: 18px; color: #fff; opacity: 0.5; } #pageHeader.standard.event{ height: 720px; background-size: cover !important; box-shadow: none !important } #pageHeader.standard.event .eventHeaderOverlay{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(eventheaderoverlay.png) left top no-repeat; background-size: cover !important; z-index: 1; pointer-events: none } #pageHeader.event .headerbutton{margin-top: 2em; text-transform: none; text-shadow: none !important; font-size: 16px; padding: 18px 35px !important; margin-right: .5em} #pageHeader.event .eventDetails-floater{ width: 42.5%; max-width: 460px; float: left; margin-top: 200px; margin-left: 10%; text-align: left; z-index: 10; position: relative } #pageHeader.event .tabbedNav{z-index: 100} #pageHeader.event .eventDetails-floater h1{ margin-top: 0px !important; } #pageHeader.event .eventDetails-floater .pageSubtitle{ font-size: 20px; font-weight: 100 !important } #pageWrap .tabbedNav{ width: 100%; background: #2a2e36; display: block; position: relative; left: 0; overflow: hidden; text-align: center; text-align: -webkit-center; } #pageWrap .tabbedNav ul li{display: inline-block} #pageWrap .tabbedNav ul li a{ font-size: 16px; text-transform: uppercase; color: #555; line-height: 80px; text-decoration: none; font-weight: 700; padding: 1em 2em; transition: background .15s; background: #fafafa; border-radius: 5px; margin-right: 5px } #pageWrap .tabbedNav ul li a:hover, #pageWrap .tabbedNav ul li a.selected, #pageWrap .tabbedNav ul li a.activeTab{color: #fff;background: #A91414;} #pageWrap .tabbedNav ul li:first-child a{padding-left: auto;} /* Full Width Template */ #pageWrap .fullwidth #pageContent{width: 100% !important} #pageWrap .fullwidth #sidebar{display: none !important} #pageContent ul, #pageContent ol{/* margin-left: 1em */} #pageContent ul li, #pageContent ol li{ border-bottom: 1px solid #f2f2f2; padding: 1em 0px } #pageContent ul li ul{ background: #f5fbfe; border-left: 30px solid #f5fbfe; margin: 1em 0px 1em -0.5em; padding: 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #pageContent ul li ul li{border-bottom: 1px solid #d3e7f1} #pageContent ul li ul li:last-child{border-bottom: none} #pageContent a{color: #2a90c5; font-weight: 600} #pageContent a:hover{opacity: 0.8} /* Wordpress Galleries */ #pageContent .gallery{ background: #f9f9f9; padding: 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 2em 0; display: block } #pageContent .gallery .gallery-item{margin: 0 !important} #pageContent .gallery .gallery-icon a img{ border: 0px solid #cfcfcf !important; width: 100%; height: auto; vertical-align: top } #pageContent .gallery .gallery-caption{ padding: 1em 0; background: #f2f2f2; } /* Wordpress Toggle */ .toggle-block{ position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: max-height 0.3s; -moz-transition: max-height 0.3s; transition: max-height 0.3s; border-radius: 5px !important; margin-bottom: 1em; overflow: hidden } .toggle-block:first-of-type{margin-top: 3em} .toggle-content{display: none;} .toggle-block > p:first-child{margin: 0 !important} .toggle-title{ font-size: 18px; color: #fff; line-height: 1.25em; padding: 25px 3em 25px 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; width: 100%; cursor: pointer; background: #2e3138 url(icon-arrowbg.png) 96.5% 32px no-repeat; transition: all .3s; margin-bottom: .25em; border-radius: 5px; } .toggle-title.open{ background-position-y: -64px; margin: 0 !important; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; } .toggle-content{ padding: 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #f9f9f9; } .toggle-content ul{margin-left: 2em !important} #pageHeader.default-bg{background-position-y: -2px !important;} /* ========================================================================== 9.1 Sidebar ========================================================================== */ #pageWrap{position: relative;z-index: 1;} #pageBase{ width: 600px; margin-left: -300px; left: 50%; bottom: -28px; height: 30px; background: url(pageclose.png) center center no-repeat; background-size: 600px 30px; z-index: 2; position: absolute } @media screen and (max-width: 600px){ #pageBase{display: none !important} } #pageContentWrap #sidebar{ width: 25%; float: right; display: block; margin: 70px 0px; max-width: 280px; } #sidebar .widget{margin-bottom: 1em} #sidebar .widget{margin-bottom: 1em} #sidebar .widget h6{ font-size: 18px; margin: 0; } #sidebar .widget span.detailtext{ font-size: 12px; color: #32363d; opacity: 0.6; display: block } .widget-labels{ width: 100%; height: 100px; display: block; border-bottom: 1px solid #f2f2f2; } #needHelp.widget .widget-labels{ background: url(#) 7.5% bottom no-repeat; padding-left: 140px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #needHelp.widget .widget-labels h6{padding-top: 30px; color: #b45456} #needHelp.widget .widget-content{ text-align: center; padding: 1.5em 0; background: #f5fbfe; } #usefulLinks.widget .widget-labels{ background: url(#) right bottom no-repeat; padding-left: 5%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #usefulLinks.widget .widget-labels h6{padding-top: 30px; color: #7a476b} #usefulLinks.widget .widget-content{ padding: 1.5em 0; } #sidebar .widget .btn-list{ list-style: none; } #sidebar .widget .btn-list li a{ font-size: 14px; text-decoration: none; color: #808387; padding: 17px 25px; background: #fafafa url(btn-list-btnbg.png) 90% center no-repeat; border-bottom: 3px solid #f0efef; border-radius: 4px; margin-bottom: 10px; display: block; font-weight: 600; transition: all .2s; } #sidebar .widget .btn-list li a:hover{border-color: #ddd; background-color: #f7f7f7} #sidebar .widget .btn-list li a:active{border-width: 1px; position: relative; top: 2px; margin-bottom: 12px} /* ========================================================================== 11.0 Mobile UI ========================================================================== */ #registerSticky{ width: 100%; background: rgba(234,32,32,0.9); line-height: 50px; color: #fff; text-decoration: none; font-size: 1.25em; text-align: center; position: fixed; bottom: 0px; left: 0; display: none; z-index: 99; font-weight: 600; } #search-button{ display: none; position: fixed; top: 0; left: 0; border: none; background: transparent; height: 60px; padding: 5px 1em 0 1em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; outline: none; } #registerSticky{display: none;} #mobile-menu{ position: fixed; top: 0; right: 0; padding: 6px .8em 0 .8em; height: 60px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #mobile-menu button{background: none; border: none; outline: none} #mobileMenu{ width: 100%; height: 100vh; background: #363a42; position: fixed; top: 60px; left: 0; z-index: 999; box-shadow: inset 3px 0 5px rgba(0,0,0,0.2); border-top: 0px solid #1d2025; text-align: center; display: none; opacity: 0.99; overflow: auto } #mobileMenu > ul{list-style: none;padding: 1em 0 0 0;position: relative;top: -50px;opacity: 0;} #mobileMenu > ul > li > a{ display: block; font-size: 1.5em; color: #fff; text-decoration: none; padding: .7em 0 .7em 0em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-transform: uppercase; font-weight: 600; position: relative; transition: all .2s; } #mobileMenu ul li ul.submenu{display: none;} #mobileMenu ul.submenu li a{color: #fff; display: block; text-decoration: none; width: 100%; line-height: 2em; font-size: 1.5em} #mobileMenu .current-sub{ position: absolute; display: block !important; background: #202329 url(menuback.png) 5% center no-repeat; width: 100%; line-height: 57px !important; padding: 0px; margin: 0px; } .lines-button { display: inline-block; padding: 0.75rem 0.375rem; -webkit-transition: .3s; -moz-transition: .3s; transition: .3s; cursor: pointer; user-select: none; border-radius: 0.21429rem; } .lines-button:hover { opacity: 1; } .lines-button:active { transition: 0; background: rgba(0, 0, 0, 0.1); } .lines { display: inline-block; width: 1.5rem; height: 0.21429rem; background: #fff; border-radius: 0.10714rem; transition: 0.3s; position: relative; /*create the upper and lower lines as pseudo-elements of the middle line*/ } .lines:before, .lines:after { display: inline-block; width: 1.5rem; height: 0.21429rem; background: #fff; border-radius: 0.10714rem; transition: 0.3s; position: absolute; left: 0; content: ''; -webkit-transform-origin: 0.10714rem center; -moz-transform-origin: 0.10714rem center; transform-origin: 0.10714rem center; } .lines:before { top: 0.375rem; } .lines:after { top: -0.375rem; } .lines-button:hover { opacity: 1; } .lines-button:hover .lines:before { top: 0.42857rem; } .lines-button:hover .lines:after { top: -0.42857rem; } .lines-button.x.close .lines { /*hide the middle line*/ background: transparent; /*overlay the lines by setting both their top values to 0*/ } .lines-button.x.close .lines:before, .lines-button.x.close .lines:after { transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; top: 0; width: 1.5rem; } .lines-button.x.close .lines:before { -webkit-transform: rotate3d(0, 0, 1, 45deg); -moz-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); } .lines-button.x.close .lines:after { -moz-transform: rotate3d(0, 0, 1, -45deg); -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); } /* ========================================================================== 12.0 Scrollbars ========================================================================== */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); } ::-webkit-scrollbar-thumb { background: rgb(154, 4, 4); }