/** Folha de estilos principal. @package Salpekas @category Main @name main.scss @author Brunno Pleffken Hosti @copyright Phocus Interact @license Phocus Interact @link /scss/main.scss @version 1.0.0 @since 23/07/2014 */ /** GOOGLE FONTS */ /* @import url(http://fonts.googleapis.com/css?family=Open+Sans); @import url(http://fonts.googleapis.com/css?family=Bangers); */ /** RESET */ * { border: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 0; box-sizing: border-box; margin: 0; outline: none; padding: 0; } /** GLOBAL */ body { font-family: 'Open Sans', sans-serif; font-size: 16px; } .clear { clear: both; } .fleft { float: left; } .fright { float: right; } .transition { -webkit-transition: all 300ms ease; -moz-transition: all 300ms ease; -ms-transition: all 300ms ease; -o-transition: all 300ms ease; transition: all 300ms ease; } .wrapper { margin: auto; padding: 0 10px; width: 1000px; } /** HEADER */ #header .background { overflow: hidden; position: absolute; top: 0; width: 100%; } #header .background .scene { height: 600px; } #header .background .scene .layer { position: absolute; width: 100%; } #header .background .scene .layer:nth-child(1) img { position: absolute; left: 50%; margin-left: -1196px; top: -30px; } #header .background .scene .layer:nth-child(2) img { position: absolute; left: 50%; margin-left: -1000px; top: 140px; } #header .wrapper { position: relative; height: 600px; } #header .wrapper .socialIcons { font-size: 0; position: absolute; right: 35px; top: 10px; } #header .wrapper .socialIcons a { margin-left: 5px; } #header .wrapper .logo { position: absolute; left: 415px; top: 63px; width: 200px; } #header nav { padding-top: 45px; overflow: auto; } #header nav a { color: #ffffff; display: inline-block; font-family: 'Bangers', cursive; font-size: 24px; text-align: center; text-decoration: none; text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2); margin: 0 10px; } #header nav a img { display: block; margin: auto; opacity: 0; } #header nav a:hover img { opacity: 1; } #header .characters { bottom: 0; height: 460px; position: absolute; width: 980px; } #header .characters img { margin-left: -10px; } /** SIDE NAVIGATION BAR */ .rightNav { background: url("../img/rightNavButtons.png") repeat-y; height: 170px; margin-top: -59px; position: fixed; right: 20px; top: 50%; width: 20px; z-index: 999; } .rightNav a { background-position: center center; background-repeat: no-repeat; border: 1px solid transparent; border-right: 0; height: 20px; left: 0; margin-bottom: 4px; position: absolute; width: 20px; } .rightNav a:hover .label { display: inline-block; opacity: 1; } .rightNav a.selected.topoMenu { background: url("../img/rightNavTopo.png") no-repeat right center; } .rightNav a.selected.turminhaMenu { background: url("../img/rightNavTurminha.png") no-repeat center right; } .rightNav a.selected.escolasMenu { background: url("../img/rightNavEscolas.png") no-repeat center right; } .rightNav a.selected.produtosMenu { background: url("../img/rightNavProdutos.png") no-repeat center right; } .rightNav a.selected.appMenu { background: url("../img/rightNavApp.png") no-repeat center right; } .rightNav a.selected.diversaoMenu { background: url("../img/rightNavDiversao.png") no-repeat center right; } .rightNav a.selected.contatoMenu { background: url("../img/rightNavContato.png") no-repeat center right; } .rightNav a.topoMenu { top: 2px; } .rightNav a.topoMenu .label { background: #ffffff url("../img/rightNavTopo.png") no-repeat right center; color: #ee3938; } .rightNav a.turminhaMenu { top: 26px; } .rightNav a.turminhaMenu .label { background: #ffffff url("../img/rightNavTurminha.png") no-repeat center right; color: #f85f0a; } .rightNav a.escolasMenu { top: 50px; } .rightNav a.escolasMenu .label { background: #ffffff url("../img/rightNavEscolas.png") no-repeat center right; color: #428F7E; } .rightNav a.produtosMenu { top: 74px; } .rightNav a.produtosMenu .label { background: #ffffff url("../img/rightNavProdutos.png") no-repeat center right; color: #934f82; } .rightNav a.appMenu { top: 98px; } .rightNav a.appMenu .label { background: #ffffff url("../img/rightNavApp.png") no-repeat center right; color: #76b82a; } .rightNav a.diversaoMenu { top: 122px; } .rightNav a.diversaoMenu .label { background: #ffffff url("../img/rightNavDiversao.png") no-repeat center right; color: #f85f0a; } .rightNav a.contatoMenu { top: 146px; } .rightNav a.contatoMenu .label { background: #ffffff url("../img/rightNavContato.png") no-repeat center right; color: #7acdec; } .rightNav a .label { background-color: #ffffff; border-radius: 10px; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3); display: none; font-family: 'Bangers', cursive; font-size: 16px; line-height: 20px; right: 0; opacity: 0; padding: 0 30px 0 8px; position: absolute; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); top: -1px; white-space: nowrap; z-index: 1; } /** CONTENT */ .content { /* Default */ /* A Turminha */ /* Produtos */ /* App */ /* Contato */ } .content h2 { font-family: 'Bangers', cursive; font-size: 60px; text-align: center; padding: 60px 0 35px 0; } .content .wrapper { padding-bottom: 50px; position: relative; } .content.turminha h2 { color: #f85f0a; text-shadow: 2px 2px 0 rgba(248, 95, 10, 0.3); } .content.turminha .description { color: #333333; display: block; margin: auto; width: 814px; } .content.turminha .characters { display: table; margin: 60px auto 40px auto; width: 917px; } .content.turminha .characters .cell { display: table-cell; font-family: 'Bangers', cursive; font-size: 30px; text-align: center; width: 16.666%; } .content.turminha .characters .cell span { color: #f85f0a; display: block; margin-top: 10px; } .content.turminha .characters .cell a { text-decoration: none; } .content.escolas { background: url("../img/escolas-bg.jpg") no-repeat center bottom; background-size: cover; } .content.escolas .wrapper { padding: 131px 10px; } .content.escolas .wrapper .girls { position: absolute; left: -180px; bottom: 0; } .content.escolas .wrapper > div { float: right; width: 380px; } .content.escolas .wrapper:after { display: block; content: ''; clear: both; } .content.escolas h2 { margin-bottom: 20px; padding: 0; font-family: 'Bangers', cursive; font-size: 60px; color: #FFFFFF; text-align: left; } .content.escolas p { margin-bottom: 20px; font-family: 'Open Sans', sans-serif; color: #FFFFFF; font-size: 16px; line-height: 20px; text-align: left; } .content.escolas p a { color: #FFFFFF; } .content.escolas ul { list-style: none; } .content.escolas ul li { list-style: none; color: #FFFFFF; font-size: 16px; font-family: 'Open Sans', sans-serif; } .content.escolas ul li:first-child { font-weight: bold; } .content.produtos { background-color: #934f82; } .content.produtos h2 { color: #ffffff; text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.3); } .content.produtos .description { color: #ffffff; display: block; margin: auto; width: 814px; } .content.produtos .productsContainer { height: 322px; margin: 40px auto 0 auto; overflow: hidden; position: relative; width: 854px; } .content.produtos .videoPlayer, .content.produtos .audioPlayer { display: none; height: 285px; position: absolute; top: 10px; } .content.produtos .audioPlayer { left: 20px; width: 485px; } .content.produtos .videoPlayer { right: 0; width: 651px; } .content.produtos .products { display: table; left: 0; position: absolute; width: 854px; } .content.produtos .products.viewCd { left: 580px; } .content.produtos .products.viewCd .cell .plus { background: url("../img/productBackOutL.png") no-repeat right center; } .content.produtos .products.viewCd .cell .plus:hover { background: url("../img/productBackHoverL.png") no-repeat right center; } .content.produtos .products.viewDvd { left: -615px; } .content.produtos .products.viewDvd .cell .plus { background: url("../img/productBackOut.png") no-repeat right center; } .content.produtos .products.viewDvd .cell .plus:hover { background: url("../img/productBackHover.png") no-repeat right center; } .content.produtos .products .cell { color: #ffffff; display: table-cell; font-family: 'Bangers', cursive; position: relative; text-align: center; width: 33.333%; } .content.produtos .products .cell.shrink { -webkit-transform: scale(0.8); transform: scale(0.8); } .content.produtos .products .cell .productImage { background-position: center center; background-repeat: no-repeat; width: 100%; height: 230px; } .content.produtos .products .cell .productImage.cd { background-image: url("../img/productCd.png"); } .content.produtos .products .cell .productImage.combo { background-image: url("../img/productCombo.png"); } .content.produtos .products .cell .productImage.dvd { background-image: url("../img/productDvd.png"); } .content.produtos .products .cell .plus { background: url("../img/productPlusOut.png") no-repeat right center; cursor: pointer; height: 35px; position: absolute; top: 160px; right: 40px; width: 35px; } .content.produtos .products .cell .plus:hover { background: url("../img/productPlusHover.png") no-repeat right center; width: 115px; } .content.produtos .products .cell span { display: block; font-size: 30px; line-height: 1.5em; } .content.produtos .products .cell .button { background-color: #ffcc00; color: #ffffff; display: inline-block; font-size: 24px; padding: 10px 35px; text-decoration: none; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2); } .content.produtos .products .cell .shipping { display: block; font: 14px/20px sans-serif; text-align: right; width: 262px; } .content.app { background: #ebf4e4 url("../img/appBackground.png") no-repeat right -150px; left: 50%; margin-left: -1000px; overflow: hidden; position: relative; width: 2000px; } .content.app .wrapper { height: 600px; position: relative; } .content.app .wrapper .preview { bottom: 0; display: inline-block; left: 0; position: absolute; } .content.app .wrapper .preview > img { display: block; } .content.app .wrapper .preview .character { bottom: 0; left: -35px; position: absolute; z-index: 300; } .content.app .wrapper .preview .tablet { margin-left: 140px; } .content.app .wrapper .preview .sliderContainer { background-color: rgba(255, 0, 0, 0.9); height: 304px; position: absolute; right: 40px; top: 34px; width: 405px; } .content.app .wrapper .download { bottom: 80px; overflow: hidden; position: absolute; right: 10px; width: 312px; } .content.app .wrapper .download span { display: block; margin-bottom: 10px; } .content.app .wrapper .description { color: #333333; display: block; margin: auto; width: 648px; z-index: 2; } .content.app h2 { color: #76b82a; text-shadow: 2px 2px 0 rgba(118, 184, 42, 0.4); padding-bottom: 18px; } .content.diversao { background: url("../img/diversao-bg.jpg") no-repeat center; background-size: cover; padding: 105px 0; } .content.diversao .wrapper { position: relative; padding-bottom: 0; } .content.diversao h2 { margin-bottom: 20px; padding: 0; font-family: 'Bangers', cursive; font-size: 60px; color: #FFFFFF; text-align: center; } .content.diversao p { margin-bottom: 40px; font-family: 'Open Sans', sans-serif; color: #FFFFFF; font-size: 14px; line-height: 20px; text-align: center; } .content.diversao .sal { display: block; position: absolute; z-index: 1; left: 20px; top: 45px; } .content.diversao .kael { display: block; position: absolute; z-index: 0; right: 46px; top: 37px; } .content.diversao ul { list-style: none; margin-left: -29px; text-align: center; } .content.diversao ul:after { display: block; content: ''; clear: both; } .content.diversao ul li { display: inline-block; vertical-align: top; list-style: none; width: 220px; margin: 0 55px; margin-bottom: 10px; } .content.diversao ul li a { position: relative; display: block; overflow: hidden; margin-bottom: 20px; -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5); } .content.diversao ul li a:after { -moz-transition-duration: 200ms; -o-transition-duration: 200ms; -webkit-transition-duration: 200ms; transition-duration: 200ms; position: absolute; content: ''; display: block; z-index: 1; bottom: 0; left: 0; height: 100%; width: 100%; background: url("../img/diversao-shadow.png") no-repeat center bottom; visibility: hidden; opacity: 0; } .content.diversao ul li a img { display: block; } .content.diversao ul li a span { -moz-transition-duration: 200ms; -o-transition-duration: 200ms; -webkit-transition-duration: 200ms; transition-duration: 200ms; position: absolute; z-index: 2; bottom: 10px; left: 10px; font-size: 16px; font-family: 'Open Sans', sans-serif; color: #FFFFFF; visibility: hidden; opacity: 0; -moz-transform: translateY(30px); -ms-transform: translateY(30px); -webkit-transform: translateY(30px); transform: translateY(30px); } .content.diversao ul li p { font-size: 14px; } .content.diversao ul li:hover a span, .content.diversao ul li:hover a:after { visibility: visible; opacity: 1; -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } .content.contato h2 { color: #0ec7e7; text-shadow: 2px 2px 0 rgba(14, 199, 231, 0.3); } .content.contato .form { margin-right: 20px; width: 396px; } .content.contato .form label { color: #0ec7e7; display: block; font-family: 'Bangers', cursive; font-size: 24px; line-height: 36px; } .content.contato .form label input, .content.contato .form label textarea { border: 2px solid #0ec7e7; display: block; font-family: 'Open Sans', sans-serif; font-size: 14px; padding: 8px 5px; width: 396px; } .content.contato .form label input.error, .content.contato .form label textarea.error { border-color: #bd1e2c; } .content.contato .form label textarea { height: 125px; resize: none; } .content.contato .form .message { font-size: 12px; line-height: 39px; padding-left: 3px; width: 285px; } .content.contato .form .message .errorMessage { color: #bd1e2c; display: none; } .content.contato .form .message .successMessage { color: #008800; display: none; } .content.contato .form input[type=submit] { background: #0ec7e7 url("../img/send.png") no-repeat 63px center; color: #ffffff; cursor: pointer; font-family: 'Bangers', cursive; font-size: 18px; padding: 10px 47px 10px 10px; width: 100px; } .content.contato .form input[type=submit]:hover { background-color: #09869c; } .content.contato .social span { color: #0ec7e7; display: block; font-family: 'Bangers', cursive; font-size: 24px; line-height: 36px; text-align: center; } .content.contato .social > div { border: 2px solid #0ec7e7; width: 236px; } .content.contato .social .fleft { margin-right: 20px; } .content.contato .social .fright iframe { height: 387px !important; } /** LIGHTBOXES */ .lightboxFrame { height: 316px; margin: 27px 21px 0 26px; overflow: hidden; } .lightboxFrame .fleft { background-position: center center; background-repeat: no-repeat; height: 100%; text-align: center; width: 245px; } .lightboxFrame .fright { height: 100%; width: 280px; } .lightboxFrame .fright h2 { color: #76b82a; font-family: 'Bangers', cursive; font-size: 48px; } .fancybox-form .lightboxFrame { height: 615px; margin: 14px 42px 0 32px; } .fancybox-form .formContainer { margin: auto; width: 814px; } .fancybox-form .formContainer .row { margin-bottom: 10px; } .fancybox-form .formContainer .row.title { margin: 20px 0 25px 0; } .fancybox-form .formContainer .row label { color: #934f82; display: inline-block; font-family: 'Bangers', cursive; font-size: 24px; margin-right: 20px; width: 394px; } .fancybox-form .formContainer .row label:last-child { margin: 0; } .fancybox-form .formContainer .row label input, .fancybox-form .formContainer .row label textarea { border: 2px solid #934f82; display: block; font-family: 'Open Sans', sans-serif; font-size: 14px; padding: 8px 5px; width: 100%; } .fancybox-form .formContainer .row label input.error, .fancybox-form .formContainer .row label textarea.error { border-color: #bd1e2c; box-shadow: 0 0 2px #bd1e2c; } .fancybox-form .formContainer .row label textarea { height: 125px; resize: none; } .fancybox-form .formContainer .row label span { color: #999999; font-family: 'Open Sans', sans-serif; font-size: 13px; font-style: italic; margin-left: 10px; } .fancybox-form .formContainer .row.submit { margin-top: 15px; text-align: center; } .fancybox-form .formContainer .row.submit input[type=submit] { background: #934f82 url("../img/transparent.png"); color: #ffffff; cursor: pointer; font-family: 'Bangers', cursive; font-size: 18px; padding: 10px 20px; width: 100px; } .fancybox-form .formContainer .row.submit input[type=submit]:hover { background-color: #09869c; } /** FOOTER */ footer { background-color: #000000; color: #ffffff; font-family: 'Bangers', cursive; font-size: 18px; line-height: 24px; padding: 15px 0; } footer > div { overflow: auto; } footer img { display: block; } /** ANIMATIONS */ /* Pop */ @-webkit-keyframes pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pop { 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .pop { display: inline-block; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px transparent; } .pop:hover, .pop:focus, .pop:active { -webkit-animation-name: pop; animation-name: pop; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; } /** AUDIO PLAYER */ .audioPlayer #audioPlaylist { background-color: #ffffff; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3); float: left; height: 280px; margin-right: 15px; position: relative; width: 220px; } .audioPlayer #audioPlaylist .header { background-color: #7c736d; color: #ffffff; font-size: 13px; line-height: 50px; padding: 0 10px; } .audioPlayer #audioPlaylist .playlist { bottom: 0; overflow: hidden; position: absolute; top: 50px; width: 100%; } .audioPlayer #audioPlaylist .playlist ol { list-style: none; } .audioPlayer #audioPlaylist .playlist ol li { background: url("../img/audioPlayHover.png") no-repeat 220px center; border-bottom: 1px solid #efefef; font-size: 14px; padding: 8px 10px; } .audioPlayer #audioPlaylist .playlist ol li:hover { background: url("../img/audioPlayHover.png") no-repeat 190px center; cursor: pointer; } .audioPlayer #audioPlaylist .playlist ol li.selected { background: #ffcc00 url("../img/audioPlaySelected.png") no-repeat 190px center !important; color: #ffffff; font-weight: bold; } .audioPlayer #audioPlayer { background-color: #ffffff; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3); float: left; height: 280px; position: relative; width: 250px; } /** BARRA DE PROGRESSO - AUDIO PLAYER */ .progress-radial { display: inline-block; position: absolute; width: 200px; height: 200px; border-radius: 50%; background-color: #ffcd00; left: 50%; margin-left: -100px; top: 50%; margin-top: -100px; } .progress-radial .overlay { position: absolute; width: 160px; height: 160px; background-color: #7c736d; border-radius: 50%; margin-left: 20px; margin-top: 20px; text-align: center; line-height: 46px; font-size: 18px; } .progress-radial .overlay img { cursor: pointer; left: 50%; margin-top: -35px; margin-left: -35px; position: absolute; top: 50%; } .progress-0 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(90deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-1 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(93.6deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-2 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(97.2deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-3 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(100.8deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-4 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(104.4deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-5 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(108deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-6 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(111.6deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-7 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(115.2deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-8 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(118.8deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-9 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(122.4deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-10 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(126deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-11 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(129.6deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-12 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(133.2deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-13 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(136.8deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-14 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(140.4deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-15 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(144deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-16 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(147.6deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-17 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(151.2deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-18 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(154.8deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-19 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(158.4deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-20 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(162deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-21 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(165.6deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-22 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(169.2deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-23 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(172.8deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-24 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(176.4deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-25 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(180deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-26 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(183.6deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-27 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(187.2deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-28 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(190.8deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-29 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(194.4deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-30 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(198deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-31 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(201.6deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-32 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(205.2deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-33 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(208.8deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-34 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(212.4deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-35 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(216deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-36 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(219.6deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-37 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(223.2deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-38 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(226.8deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-39 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(230.4deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-40 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(234deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-41 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(237.6deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-42 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(241.2deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-43 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(244.8deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-44 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(248.4deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-45 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(252deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-46 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(255.6deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-47 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(259.2deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-48 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(262.8deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-49 { background-image: linear-gradient(90deg, #ffffff 50%, transparent 50%, transparent), linear-gradient(266.4deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-50 { background-image: linear-gradient(-90deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-51 { background-image: linear-gradient(-86.4deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-52 { background-image: linear-gradient(-82.8deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-53 { background-image: linear-gradient(-79.2deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-54 { background-image: linear-gradient(-75.6deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-55 { background-image: linear-gradient(-72deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-56 { background-image: linear-gradient(-68.4deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-57 { background-image: linear-gradient(-64.8deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-58 { background-image: linear-gradient(-61.2deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-59 { background-image: linear-gradient(-57.6deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-60 { background-image: linear-gradient(-54deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-61 { background-image: linear-gradient(-50.4deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-62 { background-image: linear-gradient(-46.8deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-63 { background-image: linear-gradient(-43.2deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-64 { background-image: linear-gradient(-39.6deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-65 { background-image: linear-gradient(-36deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-66 { background-image: linear-gradient(-32.4deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-67 { background-image: linear-gradient(-28.8deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-68 { background-image: linear-gradient(-25.2deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-69 { background-image: linear-gradient(-21.6deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-70 { background-image: linear-gradient(-18deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-71 { background-image: linear-gradient(-14.4deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-72 { background-image: linear-gradient(-10.8deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-73 { background-image: linear-gradient(-7.2deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-74 { background-image: linear-gradient(-3.6deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-75 { background-image: linear-gradient(0deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-76 { background-image: linear-gradient(3.6deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-77 { background-image: linear-gradient(7.2deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-78 { background-image: linear-gradient(10.8deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-79 { background-image: linear-gradient(14.4deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-80 { background-image: linear-gradient(18deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-81 { background-image: linear-gradient(21.6deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-82 { background-image: linear-gradient(25.2deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-83 { background-image: linear-gradient(28.8deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-84 { background-image: linear-gradient(32.4deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-85 { background-image: linear-gradient(36deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-86 { background-image: linear-gradient(39.6deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-87 { background-image: linear-gradient(43.2deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-88 { background-image: linear-gradient(46.8deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-89 { background-image: linear-gradient(50.4deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-90 { background-image: linear-gradient(54deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-91 { background-image: linear-gradient(57.6deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-92 { background-image: linear-gradient(61.2deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-93 { background-image: linear-gradient(64.8deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-94 { background-image: linear-gradient(68.4deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-95 { background-image: linear-gradient(72deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-96 { background-image: linear-gradient(75.6deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-97 { background-image: linear-gradient(79.2deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-98 { background-image: linear-gradient(82.8deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-99 { background-image: linear-gradient(86.4deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } .progress-100 { background-image: linear-gradient(90deg, #ffcd00 50%, transparent 50%, transparent), linear-gradient(270deg, #ffcd00 50%, #ffffff 50%, #ffffff); } /** VIDEO PLAYER */ .videoPlayer .videoPlayerContainer { background-color: #000000; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3); float: right; margin-right: 4px; } .videoPlayer .videoPlaylist { background-color: #ffffff; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3); float: right; height: 280px; margin-right: 10px; position: relative; width: 200px; } .videoPlayer .videoPlaylist .header { background-color: #7c736d; color: #ffffff; font-size: 13px; line-height: 50px; padding: 0 10px; } .videoPlayer .videoPlaylist .playlist { bottom: 0; overflow: hidden; position: absolute; top: 50px; width: 100%; } .videoPlayer .videoPlaylist .playlist ol { list-style: none; } .videoPlayer .videoPlaylist .playlist ol li { background: url("../img/audioPlayHover.png") no-repeat 220px center; border-bottom: 1px solid #efefef; font-size: 12px; padding: 8px 10px; } .videoPlayer .videoPlaylist .playlist ol li span { display: inline-block; overflow: hidden; text-overflow: ellipsis; width: 165px; white-space: nowrap; } .videoPlayer .videoPlaylist .playlist ol li:hover { background: url("../img/audioPlayHover.png") no-repeat 175px center; cursor: pointer; } .videoPlayer .videoPlaylist .playlist ol li.selected { background: #ffcc00 url("../img/audioPlaySelected.png") no-repeat 175px center !important; color: #ffffff; font-weight: bold; } /** CONTACT FORM LOADER */ .loader { background-color: rgba(255, 255, 255, 0.8); display: none; height: 430px; left: 0; position: absolute; top: 0; width: 400px; } .loader .label { color: #0ec7e7; font-family: 'Bangers', cursive; font-size: 36px; letter-spacing: 1px; text-align: center; text-shadow: 2px 2px 0 rgba(14, 199, 231, 0.1); } .loader .spinner { font-size: 10px; height: 30px; margin: 100px auto 50px auto; text-align: center; width: 50px; } .loader .spinner > div { -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; background-color: #0ec7e7; display: inline-block; height: 100%; width: 6px; } .loader .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .loader .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .loader .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .loader .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .btn { display: inline-block; height: 30px; padding: 0 20px; margin-right: 10px; background-color: #CCCCCC; border: 1px solid #FFFFFF; font-size: 14px; text-decoration: none; line-height: 30px; color: #FFFFFF; cursor: pointer; -moz-transition-duration: 100ms; -o-transition-duration: 100ms; -webkit-transition-duration: 100ms; transition-duration: 100ms; } .btn:hover { background-color: #bfbfbf; } .btn.orange { background-color: #ee7c00; } .btn.orange:hover { background-color: #d46f00; } .btn.red { background-color: #dd3237; } .btn.red:hover { background-color: #d32328; } .btn.blue { background-color: #0ec7e7; } .btn.blue:hover { background-color: #0db2cf; } .btn.white { background-color: #FFFFFF; border-color: #ee7c00; color: #ee7c00; } .btn.white:hover { background-color: #ee7c00; color: #FFFFFF; } .btn.green { background-color: #00bd62; } .btn.green:hover { background-color: #00a455; } .btn.bangers { font-family: 'Bangers'; letter-spacing: 2px; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1); } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1); -webkit-transform: scaleY(1); } } /*# sourceMappingURL=main.css.map */