html, body { background: #FFFFFF; width: 100%; height: 100%; margin: 0px; } /* Header main start **************/ .MainBackgroundContainer { width: 100%; margin-left: auto; margin-right: auto; background-image: url('../images/header/background1/MainBackground1Large.jpg'); background-color: #a7c239; background-repeat: no-repeat; background-position: top center; } .MainBackgroundContainer_Background2 { background-image: url('../images/header/background2/MainBackground2Large.jpg'); background-color: #68c5f0; } .MainBackgroundContainer_Background3 { background-image: url('../images/header/background3/MainBackground3Large.jpg'); background-color: #a4c3e6; } .MainBackgroundContainer_Background4 { background-image: url('../images/header/background4/MainBackground4Large.jpg'); background-color: #ccccb8; } @media screen and (max-width: 1044px) { .MainBackgroundContainer { background-position: top right -947px; } } @media screen and (max-width: 850px) { .MainBackgroundContainer { background-image: url('../images/header/background1/MainBackground1Mobile2.jpg'); background-position: top right; } .MainBackgroundContainer_Background2 { background-image: url('../images/header/background2/MainBackground2Mobile2.jpg'); background-position: top right; } .MainBackgroundContainer_Background3 { background-image: url('../images/header/background3/MainBackground3Mobile2.jpg'); background-position: top right; } .MainBackgroundContainer_Background4 { background-image: url('../images/header/background4/MainBackground4Mobile2.jpg'); background-position: top right; } } .headerBackgroundContainer { width: 100%; height: 440px; overflow: hidden; } .headerBackgroundContainerOverlay { width: 100%; height: 440px; background-image: url('../images/header/background1/MainBackground1LargeOverlay.png'); background-repeat: repeat-x; background-position: 0px 26px; animation: headerBackgroundContainerOverlay 200.0s linear infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes headerBackgroundContainerOverlay { 0% {background-position: 0px 26px;} 100% {background-position: 1800px 26px;} } @keyframes headerBackgroundContainerOverlay { 0% {background-position: 0px 26px;} 100% {background-position: 1800px 26px;} } .headerBackgroundContainerOverlay2_Removed { width: 100%; height: 440px; background-image: url('../images/header/background/MainBackground2LargeOverlay.png'); background-repeat: repeat-x; background-position: 0px 26px; animation: headerBackgroundContainerOverlay2 80.0s linear infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes headerBackgroundContainerOverlay2 { 0% {background-position: 0px 26px;} 100% {background-position: 1022px 26px;} } @keyframes headerBackgroundContainerOverlay2 { 0% {background-position: 0px 26px;} 100% {background-position: 1022px 26px;} } .headerBackgroundContainerOverlay_Background3 { width: 100%; height: 440px; background-image: url('../images/header/background3/MainBackground3LargeOverlay.png'); background-repeat: repeat-x; background-position: 240px 26px; animation: headerBackgroundContainerOverlay3 100.0s linear infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes headerBackgroundContainerOverlay3 { 0% {background-position: 0px 26px;} 100% {background-position: -1000px 26px;} } @keyframes headerBackgroundContainerOverlay3 { 0% {background-position: 0px 26px;} 100% {background-position: -1000px 26px;} } .headerBackgroundContainerOverlay_Background4 { width: 100%; height: 440px; background-image: url('../images/header/background4/MainBackground4LargeOverlay.png'); background-repeat: repeat-x; background-position: 240px 30px; animation: headerBackgroundContainerOverlay4 50.0s linear infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes headerBackgroundContainerOverlay4 { 0% {background-position: 0px 30px;} 100% {background-position: 755px 30px;} } @keyframes headerBackgroundContainerOverlay4 { 0% {background-position: 0px 30px;} 100% {background-position: 755px 30px;} } @media screen and (max-width: 850px) { .headerBackgroundContainerOverlay { background-image: url('../images/header/background1/MainBackground1MobileOverlay.png'); background-repeat: repeat-x; background-position: 0px 13px; animation: headerBackgroundContainerOverlay 200.0s linear infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes headerBackgroundContainerOverlay { 0% {background-position: 0px 13px;} 100% {background-position: 1792px 13px;} } @keyframes headerBackgroundContainerOverlay { 0% {background-position: 0px 13px;} 100% {background-position: 1792px 13px;} } .headerBackgroundContainerOverlay_Background3 { background-image: url('../images/header/background3/MainBackground3MobileOverlay.png'); background-repeat: repeat-x; background-position: 120px 13px; animation: headerBackgroundContainerOverlay_Background3 100.0s linear infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes headerBackgroundContainerOverlay_Background3 { 0% {background-position: 0px 13px;} 100% {background-position: -500px 13px;} } @keyframes headerBackgroundContainerOverlay_Background3 { 0% {background-position: 0px 13px;} 100% {background-position: -500px 13px;} } .headerBackgroundContainerOverlay_Background4 { background-image: url('../images/header/background4/MainBackground4LargeOverlay.png'); background-repeat: repeat-x; background-position: 120px 15px; background-size: 50%; animation: headerBackgroundContainerOverlay_Background4 50.0s linear infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes headerBackgroundContainerOverlay_Background4 { 0% {background-position: 0px 15px;} 100% {background-position: 377.5px 15px;} } @keyframes headerBackgroundContainerOverlay_Background4 { 0% {background-position: 0px 15px;} 100% {background-position: 377.5px 15px;} } } .headerContainer { max-width: 1022px; height: 440px; margin-left: auto; margin-right: auto; background-image: url('../images/HeaderBackground1Top_REMOVE.jpg'); background-repeat: no-repeat; background-position: right; } .headerContainer2 { position: relative; max-width: 1022px; height: 440px; margin-top: -440px; margin-left: auto; margin-right: auto; } .MainLogo { position: absolute; width: 387px; height: 140px; float: right; top: 168px; right: 66px; z-index: 4; cursor: pointer; } .MainLogo{ } .MainLogo img { width: 387px; height: 140px; } .MainLogo img:hover { animation: MainLogo 0.4s ease-in-out forwards; } @keyframes MainLogo { 0% {transform: rotate(0deg) scale(1.0,1.0);} 50% {transform: rotate(0deg) scale(1.05,1.05);} 100% {transform: rotate(0deg) scale(1.0,1.0);} } /* Header main finish **************/ /* Header main menu start **************/ .headerMainMenu { position: absolute; float: left; margin-left: -100px; } .headerMainMenuMobile { position: absolute; width: 100px; height: 100px; float: left; top: 0px; padding: 0px 0px 0px 15px; cursor: pointer; z-index: 4; display: none; } .MainMenu1 { position: absolute; animation: MainMenuElement1 0.6s ease-out forwards; animation-play-state: paused; animation-delay: 0.30s; margin-left: -14px; margin-top: -56px; width: 472px; height: 397px; z-index: 2; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes MainMenuElement1 { 0% {transform: rotate(-50deg); transform-origin: 70px 0px;} 100% {transform: rotate(0deg); transform-origin: 70px 0px;} } @keyframes MainMenuElement1 { 0% {transform: rotate(-50deg); transform-origin: 70px 0px;} 100% {transform: rotate(0deg); transform-origin: 70px 0px;} } .MainMenu2 { position: absolute; animation: MainMenuElement2 0.7s ease-out forwards; animation-play-state: paused; animation-delay: 0.30s; margin-left: -14px; margin-top: -56px; width: 472px; height: 397px; z-index: 2; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes MainMenuElement2 { 0% {transform: rotate(-70deg); transform-origin: 70px 0px;} 100% {transform: rotate(0deg); transform-origin: 70px 0px;} } @keyframes MainMenuElement2 { 0% {transform: rotate(-70deg); transform-origin: 70px 0px;} 100% {transform: rotate(0deg); transform-origin: 70px 0px;} } .MainMenu3 { position: absolute; animation: MainMenuElement3 0.80s ease-out forwards; animation-play-state: paused; animation-delay: 0.30s; margin-left: -14px; margin-top: -56px; width: 472px; height: 397px; z-index: 2; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes MainMenuElement3 { 0% {transform: rotate(-90deg); transform-origin: 70px 0px;} 100% {transform: rotate(0deg); transform-origin: 70px 0px;} } @keyframes MainMenuElement3 { 0% {transform: rotate(-90deg); transform-origin: 70px 0px;} 100% {transform: rotate(0deg); transform-origin: 70px 0px;} } .MainMenu4 { position: absolute; animation: MainMenuElement4 0.90s ease-out forwards; animation-play-state: paused; animation-delay: 0.30s; margin-left: -15px; margin-top: -56px; width: 472px; height: 397px; z-index: 2; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes MainMenuElement4 { 0% {transform: rotate(-110deg); transform-origin: 70px 0px;} 100% {transform: rotate(0deg); transform-origin: 70px 0px;} } @keyframes MainMenuElement4 { 0% {transform: rotate(-110deg); transform-origin: 70px 0px;} 100% {transform: rotate(0deg); transform-origin: 70px 0px;} } .MainMenu5 { position: absolute; animation: MainMenuElement5 1.00s ease-out forwards; animation-play-state: paused; animation-delay: 0.30s; margin-left: -15px; margin-top: -56px; width: 472px; height: 397px; z-index: 2; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes MainMenuElement5 { 0% {transform: rotate(-130deg); transform-origin: 70px 0px;} 100% {transform: rotate(0deg); transform-origin: 70px 0px;} } @keyframes MainMenuElement5 { 0% {transform: rotate(-130deg); transform-origin: 70px 0px;} 100% {transform: rotate(0deg); transform-origin: 70px 0px;} } .hover{ transform: rotate(-8deg); transform-origin: 70px 0px; animation: MainMenuElementHover 0.20s ease-out; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes MainMenuElementHover { 0% {transform: rotate(0deg); transform-origin: 70px 0px;} 100% {transform: rotate(-5deg); transform-origin: 70px 0px;} } @keyframes MainMenuElementHover { 0% {transform: rotate(0deg); transform-origin: 70px 0px;} 100% {transform: rotate(-5deg); transform-origin: 70px 0px;} } .hoverBack{ transform: rotate(0deg); transform-origin: 70px 0px; animation: MainMenuElementHoverBack 0.20s ease-out; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes MainMenuElementHoverBack { 0% {transform: rotate(-5deg); transform-origin: 70px 0px;} 100% {transform: rotate(0deg); transform-origin: 70px 0px;} } @keyframes MainMenuElementHoverBack { 0% {transform: rotate(-5deg); transform-origin: 70px 0px;} 100% {transform: rotate(0deg); transform-origin: 70px 0px;} } .MainMenuTop { position: absolute; margin-left: -15px; margin-top: -56px; z-index: 2; } @media screen and (max-width: 850px) { .headerMainMenu { display: none; } .headerMainMenuMobile { display: block; } .headerBackgroundContainer { height: 220px; background-size: cover; } .headerContainer { height: 220px; background-image: url('../images/HeaderBackground1TopSmall_REMOVE.jpg'); } .headerContainer2 { height: 220px; margin-top: -220px; } .MainLogo { width: 193.5px; height: 70px; top: 80px; right: 85px; z-index: 4; } .MainLogo img { width: 193.5px; height: 70px; } } @media screen and (max-width: 500px) { .MainLogo { right: 35px; } } /* Header main menu finish **************/ /* Header main mobile menu start **************/ .mobileMenu { position: fixed; width: 100%; height: 100%; top: 0; background-color: #00c0f3; background-image: url('../images/header/menu/MobileMenuBackground.jpg'); display: none; animation: element1 0.30s ease-in; z-index: 10; } @keyframes element1 { 0% {transform: skewX(-30deg); background-color: #FFFFFF; width: 0%; transform-origin: 0px 0px;} 100% {transform: skewX(0deg); background-color: #AABBCC; width: 100%; transform-origin: 0px 0px;} } .MobileMenuitem { position: relative; width: 100%; left: -110%; top: 90px; animation: mobileMenuSlide 0.3s forwards; animation-delay: 0.30s; z-index: 1; color: #FFFFFF; padding: 12px 20px 20px 40px; cursor: pointer; font-family: Calibri, Arial; text-decoration: none; font-size: 40px; font-weight: bold; text-shadow: 2px 2px 0px rgba(0,0,0, .5); -webkit-transform: rotate(-6deg); -ms-transform: rotate(-6deg); -moz-transform: rotate(-6deg); transform: rotate(-6deg); -moz-border-radius-topright: 50px; -moz-border-radius-bottomright: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; } @keyframes mobileMenuSlide { 100% {left: -10px; top: 90px;} } .MobileMenuitem1 { background-color: #e68dbb; animation-delay: 0.30s; } .MobileMenuitem2 { background-color: #aeca36; animation-delay: 0.40s; } .MobileMenuitem3 { background-color: #ffc71c; animation-delay: 0.50s; } .MobileMenuitem4 { background-color: #e95d53; animation-delay: 0.60s; } .MobileMenuitem5 { background-color: #44c3d2; animation-delay: 0.70s; -webkit-box-shadow: 3px 3px 10px rgba(0,0,0, .2); -moz-box-shadow: 3px 3px 10px rgba(0,0,0, .2); box-shadow: 3px 3px 10px rgba(0,0,0, .2); } .MobileMenuClose { position: fixed; top: -100px; right: 20px; cursor: pointer; z-index: 1; animation: mobileMenuCloseSlide 0.3s forwards; animation-delay: 0.80s; } @keyframes mobileMenuCloseSlide { 100% {right: 20px; top: -10px;} } /* Header main mobile menu finish **************/ /* Header main floating items start **************/ .Header1item1 { position: relative; background-image: url('../images/header/background1/HeaderBackground1Element1.png'); background-repeat: no-repeat; background-size: cover; width: 117px; height: 188px; z-index: 1; -webkit-animation: Background1element1 15s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background1element1 10s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background1element1 { 0% {top: 98px; right: 464px;} 50% {top: 68px; right: 464px;} 100% {top: 98px; right: 464px;} } /* Default position 88px; right: 464px; */ @keyframes Background1element1 { 0% {top: 98px; right: 464px;} 50% {top: 68px; right: 464px;} 100% {top: 98px; right: 464px;} } .Header1item2 { position: relative; background-image: url('../images/header/background1/HeaderBackground1Element2.png'); background-repeat: no-repeat; background-size: cover; width: 122px; height: 175px; z-index: 2; -webkit-animation: Background1element2 15s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background1element2 9s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background1element2 { 0% {top: -10px; right: 205px;} 50% {top: 30px; right: 205px;} 100% {top: -10px; right: 205px;} } /* Default position top: 10px; right: 205px; */ @keyframes Background1element2 { 0% {top: -10px; right: 205px;} 50% {top: 30px; right: 205px;} 100% {top: -10px; right: 205px;} } .Header1item3 { position: relative; background-image: url('../images/header/background1/HeaderBackground1Element3.png'); background-repeat: no-repeat; background-size: cover; width: 77px; height: 147px; z-index: 1; -webkit-animation: Background1element3 15s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background1element3 20s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background1element3 { 0% {top: -38px; right: 170px;} 50% {top: -8px; right: 170px;} 100% {top: -38px; right: 170px;} } /* Default position top: -18px; right: 170px;*/ @keyframes Background1element3 { 0% {top: -38px; right: 170px;} 50% {top: -8px; right: 170px;} 100% {top: -38px; right: 170px;} } .Header1item4 { position: relative; background-image: url('../images/header/background1/HeaderBackground1Element4.png'); background-repeat: no-repeat; background-size: cover; width: 121px; height: 183px; z-index: 2; -webkit-animation: Background1element4 15s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background1element4 12s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background1element4 { 0% {top: 32px; right: -236px;} 50% {top: 62px; right: -236px;} 100% {top: 32px; right: -236px;} } /* Default position top: 52px; right: -236px;*/ @keyframes Background1element4 { 0% {top: 32px; right: -236px;} 50% {top: 62px; right: -236px;} 100% {top: 32px; right: -236px;} } .Header1item5 { position: relative; background-image: url('../images/header/background1/HeaderBackground1Element5.png'); background-repeat: no-repeat; background-size: cover; width: 94px; height: 105px; z-index: 1; -webkit-animation: Background1element5 15s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background1element5 15s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background1element5 { 0% {top: 135px; right: -275px;} 50% {top: 105px; right: -275px;} 100% {top: 135px; right: -275px;} } /* Default position top: 115px; right: -275px;*/ @keyframes Background1element5 { 0% {top: 135px; right: -275px;} 50% {top: 105px; right: -275px;} 100% {top: 135px; right: -275px;} } .Header1item6 { position: relative; background-image: url('../images/header/background1/HeaderBackground1Element6.png'); background-repeat: no-repeat; background-size: cover; width: 69px; height: 129px; z-index: 1; -webkit-animation: Background1element6 15s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background1element6 7s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background1element6 { 0% {top: -37px; right: -340px;} 50% {top: -17px; right: -340px;} 100% {top: -37px; right: -340px;} } /* Default position top: -27px; right: -340px;*/ @keyframes Background1element6 { 0% {top: -37px; right: -340px;} 50% {top: -17px; right: -340px;} 100% {top: -37px; right: -340px;} } @media screen and (max-width: 850px) { .Header1item1 { width: 58.5px; height: 94px; -webkit-animation: Background1element1mobile 15s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background1element1mobile 10s ease-in-out infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background1element1mobile { 0% {top: 49px; right: 232px;} 50% {top: 34px; right: 232px;} 100% {top: 49px; right: 232px;} } /* Default position 88px; right: 464px; */ @keyframes Background1element1mobile { 0% {top: 49px; right: 232px;} 50% {top: 34px; right: 232px;} 100% {top: 49px; right: 232px;} } .Header1item2 { width: 61px; height: 87.5px; -webkit-animation: Background1element2mobile 15s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background1element2mobile 9s ease-in-out infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background1element2mobile { 0% {top: -5px; right: 102.5px;} 50% {top: 15px; right: 102.5px;} 100% {top: -5px; right: 102.5px;} } /* Default position top: 10px; right: 205px; */ @keyframes Background1element2mobile { 0% {top: -5px; right: 102.5px;} 50% {top: 15px; right: 102.5px;} 100% {top: -5px; right: 102.5px;} } .Header1item3 { width: 38.5px; height: 73.5px; -webkit-animation: Background1element3mobile 15s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background1element3mobile 20s ease-in-out infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background1element3mobile { 0% {top: -19px; right: 85px;} 50% {top: -4px; right: 85px;} 100% {top: -19px; right: 85px;} } /* Default position top: -18px; right: 170px;*/ @keyframes Background1element3mobile { 0% {top: -19px; right: 85px;} 50% {top: -4px; right: 85px;} 100% {top: -19px; right: 85px;} } .Header1item4 { width: 60.5px; height: 91.5px; -webkit-animation: Background1element4mobile 15s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background1element4mobile 12s ease-in-out infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background1element4mobile { 0% {top: 32px; right: -236px;} 50% {top: 62px; right: -236px;} 100% {top: 32px; right: -236px;} } /* Default position top: 52px; right: -236px;*/ @keyframes Background1element4mobile { 0% {top: 16px; right: -118px;} 50% {top: 31px; right: -118px;} 100% {top: 16px; right: -118px;} } .Header1item5 { width: 47px; height: 52.5px; -webkit-animation: Background1element5mobile 15s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background1element5mobile 15s ease-in-out infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background1element5mobile { 0% {top: 67.5px; right: -137.5px;} 50% {top: 52.5px; right: -137.5px;} 100% {top: 67.5px; right: -137.5px;} } /* Default position top: 115px; right: -275px;*/ @keyframes Background1element5mobile { 0% {top: 67.5px; right: -137.5px;} 50% {top: 52.5px; right: -137.5px;} 100% {top: 67.5px; right: -137.5px;} } .Header1item6 { width: 35.5px; height: 64.5px; -webkit-animation: Background1element6mobile 15s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background1element6mobile 7s ease-in-out infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background1element6mobile { 0% {top: -18.5px; right: 170px;} 50% {top: -8.5px; right: 170px;} 100% {top: -37px; right: 170px;} } /* Default position top: -27px; right: -340px;*/ @keyframes Background1element6mobile { 0% {top: -18.5px; right: -170px;} 50% {top: -8.5px; right: -170px;} 100% {top: -18.5px; right: -170px;} } } /* Header main floating items finish **************/ /* Header style two floating items start **************/ .Header2item1 { position: relative; background-image: url('../images/header/background2/HeaderBackground2Element1.png'); background-repeat: no-repeat; background-size: cover; width: 420px; height: 323px; z-index: 1; -webkit-animation: Background2element1 10s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background2element1 10s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background2element1 { 0% {top: -22px; right: -89px} 50% {top: -42px; right: -89px} 100% {top: -22px; right: -89px} } /* Default position 88px; right: 464px; */ @keyframes Background2element1 { 0% {top: -22px; right: -89px} 50% {top: -42px; right: -89px} 100% {top: -22px; right: -89px} } .Header2item2 { position: relative; background-image: url('../images/header/background2/HeaderBackground2Element2.png'); background-repeat: no-repeat; background-size: 75px 154px; width: 75px; height: 154px; z-index: 1; -webkit-animation: Background2element4 7s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background2element4 7s ease-in-out infinite; float: right; top: 46px; right: 155px; background-size: 75px 155px; transform: skewX(0deg); } @-webkit-keyframes Background2element4 { 0% {top: 46px; right: 155px; background-size: 75px 155px; transform: skewX(0deg);} 50% {top: 46px; right: 1273px; background-size: 75px 135px; transform: skewX(20deg);} 100% {top: 46px; right: 155px; background-size: 75px 155px; transform: skewX(0deg);} } /* Default position 88px; right: 464px; */ @keyframes Background2element4 { 0% {top: 46px; right: 155px; background-size: 75px 155px; transform: skewX(0deg);} 50% {top: 46px; right: 127px; background-size: 75px 135px; transform: skewX(20deg);} 100% {top: 46px; right: 155px; background-size: 75px 155px; transform: skewX(0deg);} } .Header2item3 { position: relative; background-image: url('../images/header/background2/HeaderBackground2Element3.png'); background-repeat: no-repeat; background-size: 71px 151px; width: 71px; height: 151px; z-index: 2; -webkit-animation: Background2element3 5s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background2element3 5s ease-in-out infinite; float: right; top: 55px; right: 173px; background-size: 71px 151px; transform: skewX(0deg); } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background2element3 { 0% {top: 55px; right: 173px; background-size: 71px 151px; transform: skewX(0deg);} 50% {top: 55px; right: 147px; background-size: 71px 131px; transform: skewX(20deg);} 100% {top: 55px; right: 173px; background-size: 71px 151px; transform: skewX(0deg);} } /* Default position 88px; right: 464px; */ @keyframes Background2element3 { 0% {top: 55px; right: 173px; background-size: 71px 151px; transform: skewX(0deg);} 50% {top: 55px; right: 147px; background-size: 71px 131px; transform: skewX(20deg);} 100% {top: 55px; right: 173px; background-size: 71px 151px; transform: skewX(0deg);} } .Header2item4 { position: relative; background-image: url('../images/header/background2/HeaderBackground2Element4.png'); background-repeat: no-repeat; background-size: cover; width: 315px; height: 274px; z-index: 1; -webkit-animation: Background2element2 15s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background2element2 15s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background2element2 { 0% {top: 5px; right: 450px;} 50% {top: 35px; right: 450px;} 100% {top: 5px; right: 450px;} } /* Default position 88px; right: 464px; */ @keyframes Background2element2 { 0% {top: 5px; right: 450px;} 50% {top: 35px; right: 450px;} 100% {top: 5px; right: 450px;} } @media screen and (max-width: 850px) { .Header2item1 { width: 210px; height: 161.5px; -webkit-animation: Background2element1mobile 10s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background2element1mobile 10s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background2element1mobile { 0% {top: -11px; right: -44.5px} 50% {top: -21px; right: -44.5px} 100% {top: -11px; right: -44.5px} } /* Default position 88px; right: 464px; */ @keyframes Background2element1mobile { 0% {top: -11px; right: -44.5px} 50% {top: -21px; right: -44.5px} 100% {top: -11px; right: -44.5px} } .Header2item2 { width: 37.5px; height: 77px; -webkit-animation: Background2element4mobile 7s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background2element4mobile 7s ease-in-out infinite; float: right; } @-webkit-keyframes Background2element4mobile { 0% {top: 23px; right: 81.5px; background-size: 37.5px 77.5px; transform: skewX(0deg);} 50% {top: 23px; right: 68.5px; background-size: 37.5px 67.5px; transform: skewX(20deg);} 100% {top: 23px; right: 81.5px; background-size: 37.5px 77.5px; transform: skewX(0deg);} } /* Default position 88px; right: 464px; */ @keyframes Background2element4mobile { 0% {top: 23px; right: 81.5px; background-size: 37.5px 77.5px; transform: skewX(0deg);} 50% {top: 23px; right: 68.5px; background-size: 37.5px 67.5px; transform: skewX(20deg);} 100% {top: 23px; right: 81.5px; background-size: 37.5px 77.5px; transform: skewX(0deg);} } .Header2item3 { width: 35.5px; height: 75.5px; -webkit-animation: Background2element3mobile 5s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background2element3mobile 5s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background2element3mobile { 0% {top: 27.5px; right: 90.5px; background-size: 35.5px 75.5px; transform: skewX(0deg);} 50% {top: 27.5px; right: 77.5px; background-size: 35.5px 75.5px; transform: skewX(20deg);} 100% {top: 27.5px; right: 90.5px; background-size: 35.5px 75.5px; transform: skewX(0deg);} } /* Default position 88px; right: 464px; */ @keyframes Background2element3mobile { 0% {top: 27.5px; right: 90.5px; background-size: 35.5px 75.5px; transform: skewX(0deg);} 50% {top: 27.5px; right: 77.5px; background-size: 35.5px 75.5px; transform: skewX(20deg);} 100% {top: 27.5px; right: 90.5px; background-size: 35.5px 75.5px; transform: skewX(0deg);} } .Header2item4 { width: 157.5px; height: 137px; -webkit-animation: Background2element2mobile 15s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background2element2mobile 15s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background2element2mobile { 0% {top: 2.5px; right: 225px;} 50% {top: 17.5px; right: 225px;} 100% {top: 2.5px; right: 225px;} } /* Default position 88px; right: 464px; */ @keyframes Background2element2mobile { 0% {top: 2.5px; right: 225px;} 50% {top: 17.5px; right: 225px;} 100% {top: 2.5px; right: 225px;} } } /* Header style two floating items finish **************/ /* Header style three floating items start **************/ .Header3item1 { position: relative; background-image: url('../images/header/background3/HeaderBackground3Element1.png'); background-repeat: no-repeat; background-size: cover; width: 73px; height: 83px; z-index: 1; -webkit-animation: Background3element1 7s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background3element1 7s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background3element1 { 0% {top: 225px; right: 47px;} 50% {top: 205px; right: 47px;} 100% {top: 225px; right: 47px;} } /* Default position 88px; right: 464px; */ @keyframes Background3element1 { 0% {top: 225px; right: 47px;} 50% {top: 205px; right: 47px;} 100% {top: 225px; right: 47px;} } .Header3item2 { position: relative; background-image: url('../images/header/background3/HeaderBackground3Element2.png'); background-repeat: no-repeat; background-size: cover; width: 104px; height: 94px; z-index: 1; -webkit-animation: Background3element2 8s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background3element2 8s ease-in-out infinite; float: right; } @-webkit-keyframes Background3element2 { 0% {top: 335px; right: 190px;} 50% {top: 355px; right: 190px;} 100% {top: 335px; right: 190px;} } /* Default position 88px; right: 464px; */ @keyframes Background3element2 { 0% {top: 335px; right: 190px;} 50% {top: 355px; right: 190px;} 100% {top: 335px; right: 190px;} } .Header3item3 { position: relative; background-image: url('../images/header/background3/HeaderBackground3Element3.png'); background-repeat: no-repeat; background-size: cover; width: 57px; height: 51px; z-index: 1; -webkit-animation: Background3element3 5s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background3element3 5s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background3element3 { 0% {top: 330px; right: 260px;} 50% {top: 320px; right: 260px;} 100% {top: 330px; right: 260px;} } /* Default position 88px; right: 464px; */ @keyframes Background3element3 { 0% {top: 330px; right: 260px;} 50% {top: 320px; right: 260px;} 100% {top: 330px; right: 260px;} } .Header3item4 { position: relative; background-image: url('../images/header/background3/HeaderBackground3Element4.png'); background-repeat: no-repeat; background-size: cover; width: 90px; height: 96px; z-index: 1; -webkit-animation: Background3element4 5s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background3element4 5s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background3element4 { 0% {top: 235px; right: 735px;} 50% {top: 255px; right: 735px;} 100% {top: 235px; right: 735px;} } /* Default position 88px; right: 464px; */ @keyframes Background3element4 { 0% {top: 235px; right: 735px;} 50% {top: 255px; right: 735px;} 100% {top: 235px; right: 735px;} } @media screen and (max-width: 850px) { .Header3item1 { width: 36.5px; height: 41.5px; -webkit-animation: Background3element1mobile 7s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background3element1mobile 7s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background3element1mobile { 0% {top: 112.5px; right: 73.5px;} 50% {top: 102.5px; right: 73.5px;} 100% {top: 112.5px; right: 73.5px;} } /* Default position 88px; right: 464px; */ @keyframes Background3element1mobile { 0% {top: 112.5px; right: 73.5px;} 50% {top: 102.5px; right: 73.5px;} 100% {top: 112.5px; right: 73.5px;} } .Header3item2 { width: 52px; height: 47px; -webkit-animation: Background3element2mobile 8s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background3element2mobile 8s ease-in-out infinite; float: right; } @-webkit-keyframes Background3element2mobile { 0% {top: 167.5px; right: 145px;} 50% {top: 177.5px; right: 145px;} 100% {top: 167.5px; right: 145px;} } /* Default position 88px; right: 464px; */ @keyframes Background3element2mobile { 0% {top: 167.5px; right: 145px;} 50% {top: 177.5px; right: 145px;} 100% {top: 167.5px; right: 145px;} } .Header3item3 { width: 28.5px; height: 25.5px; -webkit-animation: Background3element3mobile 5s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background3element3mobile 5s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background3element3mobile { 0% {top: 165px; right: 180px;} 50% {top: 160px; right: 180px;} 100% {top: 165px; right: 180px;} } /* Default position 88px; right: 464px; */ @keyframes Background3element3mobile { 0% {top: 165px; right: 180px;} 50% {top: 160px; right: 180px;} 100% {top: 165px; right: 180px;} } .Header3item4 { width: 45px; height: 48px; -webkit-animation: Background3element4mobile 5s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background3element4mobile 5s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background3element4mobile { 0% {top: 117.5px; right: 417.5px;} 50% {top: 127.5px; right: 417.5px;} 100% {top: 117.5px; right: 417.5px;} } /* Default position 88px; right: 464px; */ @keyframes Background3element4mobile { 0% {top: 117.5px; right: 417.5px;} 50% {top: 127.5px; right: 417.5px;} 100% {top: 117.5px; right: 417.5px;} } } /* Header style three floating items finish **************/ /* Header style four floating items start **************/ .Header4item1 { position: relative; background-image: url('../images/header/background4/HeaderBackground4Element1.png'); background-repeat: no-repeat; background-size: cover; width: 149px; height: 130px; z-index: 1; -webkit-animation: Background4element1 7s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background4element1 7s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background4element1 { 0% {top: 210px; right: 635px;} 50% {top: 190px; right: 635px;} 100% {top: 210px; right: 635px;} } /* Default position 210px; right: 635px; */ @keyframes Background4element1 { 0% {top: 210px; right: 635px;} 50% {top: 190px; right: 635px;} 100% {top: 210px; right: 635px;} } .Header4item2 { position: relative; background-image: url('../images/header/background4/HeaderBackground4Element2.png'); background-repeat: no-repeat; background-size: cover; width: 138px; height: 30px; top: 70px; right: 600px; z-index: 1; -webkit-animation: Background4element2 6s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background4element2 6s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background4element2 { 0% {opacity: 0;} 10% {opacity: 1;} 50%,100% {opacity: 0; transform: translate(700px,40px);} } /* Default position 210px; right: 635px; */ @keyframes Background4element2 { 0% {opacity: 0;} 10% {opacity: 1;} 50%,100% {opacity: 0; transform: translate(700px,40px);} } .Header4item3 { position: relative; background-image: url('../images/header/background4/HeaderBackground4Element3.png'); background-repeat: no-repeat; background-size: cover; width: 98px; height: 28px; top: 170px; right: 600px; z-index: 1; -webkit-animation: Background4element3 6s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background4element3 6s ease-in-out infinite; animation-delay: 1.00s; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background4element3 { 0% {opacity: 0;} 10% {opacity: 1;} 40%,100% {opacity: 0; transform: translate(700px,-40px);} } /* Default position 210px; right: 635px; */ @keyframes Background4element3 { 0% {opacity: 0;} 10% {opacity: 1;} 40%,100% {opacity: 0; transform: translate(700px,-40px);} } .Header4item4 { position: relative; background-image: url('../images/header/background4/HeaderBackground4Element4.png'); background-repeat: no-repeat; background-size: cover; width: 143px; height: 35px; top: 220px; right: 600px; z-index: 1; -webkit-animation: Background4element4 5s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background4element4 5s ease-in-out infinite; animation-delay: 2.00s; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background4element4 { 0% {opacity: 0;} 10% {opacity: 1;} 50%,100% {opacity: 0; transform: translate(700px,20px);} } /* Default position 210px; right: 635px; */ @keyframes Background4element4 { 0% {opacity: 0;} 10% {opacity: 1;} 50%,100% {opacity: 0; transform: translate(700px,20px);} } @media screen and (max-width: 850px) { .Header4item1 { width: 74.5px; height: 65px; -webkit-animation: Background4element1mobile 7s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background4element1mobile 7s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background4element1mobile { 0% {top: 105px; right: 370.5px;} 50% {top: 95px; right: 370.5px;} 100% {top: 105px; right: 370.5px;} } /* Default position 88px; right: 464px; */ @keyframes Background4element1mobile { 0% {top: 105px; right: 370.5px;} 50% {top: 95px; right: 370.5px;} 100% {top: 105px; right: 370.5px;} } .Header4item2 { width: 69px; height: 15px; top: 45px; -webkit-animation: Background4element2mobile 6s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background4element2mobile 6s ease-in-out infinite; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background4element2mobile { 0% {opacity: 0;} 10% {opacity: 1;} 50%,100% {opacity: 0; transform: translate(550px,20px);} } /* Default position 88px; right: 464px; */ @keyframes Background4element2mobile { 0% {opacity: 0;} 10% {opacity: 1;} 50%,100% {opacity: 0; transform: translate(550px,20px);} } .Header4item3 { width: 49px; height: 14px; top: 85px; -webkit-animation: Background4element3mobile 6s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background4element3mobile 6s ease-in-out infinite; animation-delay: 1.00s; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background4element3mobile { 0% {opacity: 0;} 10% {opacity: 1;} 50%,100% {opacity: 0; transform: translate(550px,-20px);} } /* Default position 88px; right: 464px; */ @keyframes Background4element3mobile { 0% {opacity: 0;} 10% {opacity: 1;} 50%,100% {opacity: 0; transform: translate(550px,-20px);} } .Header4item4 { width: 71.5px; height: 17.5px; top: 110px; -webkit-animation: Background4element4mobile 6s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: Background4element4mobile 6s ease-in-out infinite; animation-delay: 2.00s; float: right; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes Background4element4mobile { 0% {opacity: 0;} 10% {opacity: 1;} 50%,100% {opacity: 0; transform: translate(550px,10px);} } /* Default position 88px; right: 464px; */ @keyframes Background4element4mobile { 0% {opacity: 0;} 10% {opacity: 1;} 50%,100% {opacity: 0; transform: translate(550px,10px);} } } /* Header style four floating items finish **************/ /* Content container main start **************/ .contentBackgroundContainer { width: 100%; } .contentContainerPadding { max-width: 992px; margin-left: auto; margin-right: auto; padding: 0px 15px 0px 15px; } .contentContainer { padding-bottom: 50px; } /* Content container main finish **************/ /* Content header start **************/ .PageHeaderContainer { position: relative; height: 248px; width: 100%; background-image: url('../images/pageheader/PageHeaderBackground1.png'); background-position: top center; border-bottom: 3px solid #d5d2d2; transition: 0.4s; } .PageHeaderContainer_background3 { background-image: url('../images/pageheader/PageHeaderBackground3.png'); } .PageHeaderContainer_background4 { background-image: url('../images/pageheader/PageHeaderBackground4.png'); } .PageHeaderContainer_Homepage { height: 296px; cursor: pointer; background-image: url('../images/pageheader/PageHeaderBackground6.png'); } .PageHeaderContainer_Homepage:hover { background-position: calc(50% + 50px) 0%; } .PageHeaderContainer_Homepage:hover .PageHeaderTextTitle_Homepage { opacity: 0; } .PageHeaderContainer_Homepage:hover .PageHeaderTextContainer { padding: 0px 30px 30px 50px; } .PageHeaderTextContainer { position: absolute; width: 45%; float: left; padding: 40px 0px 0px 50px; z-index: 2; transition: 0.4s; } .PageHeaderTextTitle { font-family: 'Fredoka One', Calibri, Arial; letter-spacing: 0.5px; font-family1: Calibri, Arial; text-decoration: none; font-size: 50px; font-weight1: bold; color: #FFFFFF; margin-bottom: 5px; text-shadow: 3px 3px 0px rgba(0,0,0, .2); line-height: 100%; } .PageHeaderTextTitle_Homepage { text-align: center; font-size: 35px; transition: 0.4s; } .PageHeaderTextSubTitle { font-family: 'Roboto Slab', sans-serif; text-decoration: none; font-size: 20px; font-weight: none; color: #FFFFFF; margin: 0px; text-shadow: 3px 3px 0px rgba(0,0,0, .2); padding: 0px 0px 0px 0px; } .PageHeaderTextSubTitleBACKUP { font-family: Calibri, Arial; text-decoration: none; font-size: 22px; font-weight: bold; color: #FFFFFF; margin: 0px; text-shadow: 3px 3px 0px rgba(0,0,0, .2); padding: 0px 0px 0px 0px; } .PageHeaderTextSubTitle_Homepage { text-align: center; } .PageHeaderImageContainer { position: relative; width: 449px; height: 100%; float: right; z-index: 1; } .PageHeaderImageContainer_Homepage { width: 496px; } .PageHeaderImageContainer img { position: absolute; margin: 0px 0px 0px 0px; max-width: calc(100%); bottom: 0; } @media screen and (max-width: 900px) { .PageHeaderTextContainer { padding: 30px 30px 30px 30px; margin: 35px 30px 30px 30px; width: 75%; } .PageHeaderTextContainer::before { content: ""; position: absolute; -moz-border-radius: 15px; border-radius: 15px; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background-image: url('../images/PageHeaderTextBackground.jpg'); opacity: 0.7; } .PageHeaderContainer_Homepage:hover .PageHeaderTextContainer { padding: 0px 30px 30px 30px; } .PageHeaderTextTitle { margin: -10px 0px 0px 0px; } } @media screen and (max-width: 800px) { .PageHeaderTextContainer { padding: 30px 30px 30px 30px; margin: 35px 30px 30px 30px; width: calc(100% - 120px); bottom: 15px; } .PageHeaderContainer { height: 348px; } .PageHeaderContainer_Homepage { height: 480px; } .PageHeaderTextTitle { font-size: 35px; text-align: center; } .PageHeaderTextSubTitle { text-align: center; } .PageHeaderImageContainer { width: auto; max-width: 449px; float: none; margin-left: auto; margin-right: auto; } .PageHeaderImageContainer img { top: -30px; } } @media screen and (max-width: 500px) { .PageHeaderContainer { height: 430px; } .PageHeaderContainer_Homepage { height: 480px; } .PageHeaderImageContainer { width: auto; } } /* Content header finish **************/ /* Homepage header start **************/ .MainHomepageHeaderDesktop { display: block; } .MainHomepageHeaderMobile { display: none; } .MainHomepageHeaderContainer { width: 100%; height: 296px; background-image: url('../images/HomepageHeaderBackground1.jpg'); border-bottom: 3px solid #d5d2d2; } .MainHomepageHeaderContainerText { width: 60%; height: 296px; background-image: url('../images/MainHomepageHeaderBackground.png'); background-repeat: no-repeat; background-position: right top; float: left; } .MainHomepageHeaderContainerImage { position: relative; width: 40%; height: 296px; float: right; margin-top: -300px; } .MainHomepageHeaderContainerImage img { position: absolute; margin: 0px 0px 0px -120px; float: right; max-width: calc(100% + 100px); bottom: 0; } .MainHomepageHeaderContainerTitle { font-family: Calibri, Arial; text-decoration: none; font-size: 40px; font-weight: bold; color: #FFFFFF; margin: 0px; text-shadow: 3px 3px 0px rgba(0,0,0, .2); text-align: center; } .MainHomepageHeaderSubContainer { width: calc(100% - 160px); padding-top: 15px; padding-left: 25px; padding-right: 15px; } .MainHomepageHeaderContainerLogo { max-width: 306px; margin-left: auto; margin-right: auto; } .MainHomepageHeaderContainerLogo img { width: 100%; } .MainHomepageHeaderContainerSubTitle { font-family: Calibri, Arial; text-decoration: none; font-size: 24px; font-weight: bold; color: #FFFFFF; margin: 0px; text-shadow: 3px 3px 0px rgba(0,0,0, .2); margin-left: auto; margin-right: auto; text-align: center; max-width: 300px; } .MainHomepageHeaderContainerBottom { background-color: #000000; width: 100%; height: 24px; margin-top: -24px; opacity: 0.1; bottom: 0; } .MainHomepageHeaderContainerImageContainerMobile { position: relative; background-image: url('../images/HomepageHeaderBackground2.png'); border-bottom: 3px solid #d5d2d2; } .MainHomepageHeaderContainerImageMobile { position: relative; height: 296px; max-width: 490px; margin-left: auto; margin-right: auto; } .MainHomepageHeaderContainerImageMobile img { position: absolute; max-width: 100%; bottom: 0; z-index: 1; } @media screen and (max-width: 850px) { .MainHomepageHeaderDesktop { display: none; } .MainHomepageHeaderMobile { display: block; } .MainHomepageHeaderContainer { border-top: 20px solid #f496bf; } .MainHomepageHeaderContainerText { width: 100%; background-image: url('../images/MainHomepageHeaderBackground2.jpg'); background-repeat: repeat; } .MainHomepageHeaderSubContainer { width: calc(100% - 50px); padding-left: 0px; padding-right: 0px; margin-left: 25px; margin-right: 25px; } } @media screen and (max-width: 490px) { .MainHomepageHeaderContainerImageContainerMobile { } } /* Homepage header finish **************/ /* Homepage menu buttons start **************/ .MainHomepageButtonContainer { height: auto; overflow: auto; background-color: #FFFFFF; margin-left: auto; margin-right: auto; -moz-border-radius-bottomleft: 1.5em; -moz-border-radius-bottomright: 1.5em; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; clear: both; } .HomepageButtonsPadding { padding: 20px 0px 0px 20px; } .HomepageButtonContainer { width: 33.3%; float: left; } .HomepageButtonContainerPadding_wide { width: 50%; float: left; } .HomepageButtonContainerPadding { position: relative; padding: 0px 20px 20px 0px; } .HomepageButtonContainer_wide { position: relative; padding: 0px 20px 20px 0px; } .HomepageButtonContainerContent { cursor: pointer; } .HomepageButtonContainerContent:hover .HomepageButtonTextContainer { margin-top: -80px; padding-bottom: 100px; /*animation: HomepageButtonTextContainer_Animation 1.5s ease forwards;*/ } .HomepageButtonContainerContent:hover .HomepageButtonOverlayImage { opacity: 0; } @keyframes HomepageButtonTextContainer_Animation { 0% {background-position: 0px 0px;} 100% {background-position: 171px 0px;} } .HomepageButtonImage { position: relative; width: 100%; padding-top: 56.25%; background-size: cover; -moz-border-radius-topleft: 1.0em; -moz-border-radius-topright: 1.0em; border-top-left-radius: 10px; border-top-right-radius: 10px; opacity: 0.8; } .HomepageButtonOverlayImage { transition: 0.4s; opacity: 1; } .HomepageButtonContainerPadding:hover .HomepageButtonOverlayImage { /*opacity: 0;*/ } .HomepageButtonImage_wide { position: relative; width: 100%; padding-top: 40%; background-size: cover; -moz-border-radius-topleft: 1.0em; -moz-border-radius-topright: 1.0em; border-top-left-radius: 10px; border-top-right-radius: 10px; opacity: 0.7; } .HomepageButtonTextContainer { position: relative; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; margin-top: -10px; padding: 30px 26px 30px 30px; -webkit-box-shadow: 0px 7px 0px rgba(0,0,0, .2); -moz-box-shadow: 0px 7px 0px rgba(0,0,0, .2); box-shadow: 0px 7px 0px rgba(0,0,0, .15); transition: 0.4s ease-out; } .HomepageButtonTextContainer_wide { position: relative; -moz-border-radius-bottomleft: 1.0em; -moz-border-radius-bottomright: 1.0em; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 30px 26px 20px 26px; margin-top: -10px; } .HomepageButtonTextContainer1 { background-image: url('../images/NewsButtonBackgroundLarge1.png'); border-bottom: 9px solid #c33065; } .HomepageButtonTextContainer2 { background-image: url('../images/NewsButtonBackgroundLarge2.png'); border-bottom: 9px solid #00a9e0; } .HomepageButtonTextContainer3 { background-image: url('../images/NewsButtonBackgroundLarge3.png'); border-bottom: 9px solid #8a4cba; } .HomepageButtonTextContainer h3 { font-family: 'Fredoka One', Arial; letter-spacing: 1.5px; text-decoration: none; font-size: 30px; color: #FFFFFF; margin: 0px; text-shadow: 3px 3px 0px rgba(0,0,0, .2); margin-bottom: 8px; } .HomepageButtonTextContainer_wide h3 { font-family: 'Fredoka One', Arial; letter-spacing: 1.5px; text-decoration: none; font-size: 40px; color: #FFFFFF; margin: 0px; text-shadow: 3px 3px 0px rgba(0,0,0, .2); margin-bottom: 8px; text-align: center; } .HomepageButtonTextPoint { background-color: #FFFFFF; width: 18px; height: 18px; float: left; -moz-border-radius: 20em; border-radius: 20px; margin: 7px 10px 0px 0px; -webkit-box-shadow: 3px 3px 0px rgba(0,0,0, .2); -moz-box-shadow: 3px 3px 0px rgba(0,0,0, .2); box-shadow: 3px 3px 0px rgba(0,0,0, .2); } .HomepageButtonTextContainer p { font-family: 'Roboto Slab', sans-serif; text-decoration: none; font-size: 18px; font-weight: none; line-height: 26px; color: #FFFFFF; margin: 0px; } .HomepageButtonTextContainer_wide p { font-family: 'Roboto Slab', sans-serif; text-decoration: none; font-size: 18px; font-weight: none; line-height: 26px; color: #FFFFFF; margin: 0px; text-align: center; } .HomepageButtonTextContainerBACKUP p { font-family: Calibri, Arial; text-decoration: none; font-size: 20px; font-weight: bold; line-height: 22px; color: #FFFFFF; margin: 0px; } .HomepageButtonTextContainer_news { position: relative; -moz-border-radius-bottomleft: 1.0em; -moz-border-radius-bottomright: 1.0em; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 30px 26px 40px 26px; margin-top: -10px; } .HomepageButtonTextContainer_news h3 { font-family: 'Fredoka One', Arial; letter-spacing: 1.5px; text-decoration: none; font-size: 30px; color: #FFFFFF; margin: 0px; text-shadow: 3px 3px 0px rgba(0,0,0, .2); margin-bottom: 8px; } .HomepageButtonTextContainer_news p { font-family: Arial; text-decoration: none; font-size: 17px; font-weight: bold; line-height: 22px; color: #FFFFFF; margin: 0px; } .HomepageButtonTextView { font-family: Arial; text-decoration: none; font-size: 20px; color: #FFFFFF; font-weight: bold; max-width: 100px; background-color: #009eda; text-align: center; margin: 10px 0px 0px 0px; padding: 5px; -moz-border-radius: 20.0em; border-radius: 20px; /*box-shadow: 2px 2px 0px rgba(0,0,0, .2);*/ text-shadow: 2px 2px 0px rgba(0,0,0, .1); margin-left: auto; margin-right: auto; } .HomepageButtonTextView1 { background-color: #e14281; } .HomepageButtonTextView2 { background-color: #009eda; } .HomepageButtonTextView3 { background-color: #6d2a81; } .HomepageButtonBottom { background-color: #000000; width: 100%; height: 20px; margin-top: -20px; -moz-border-radius-bottomleft: 1.0em; -moz-border-radius-bottomright: 1.0em; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; opacity: 0.1; } .HomepageButtonOverlayContainer { position: absolute; top: 0; left: 0; right: 0; padding: 0px 20px 20px 0px; } .HomepageButtonOverlayImage { padding-top: 61.53%; background-size: cover; } .HomepageButtonOverlayImage_wide { padding-top: 44%; background-size: cover; } .HomepageButtonView { position: absolute; background-color: #7b3faa; text-align: center; -moz-border-radius: 20em; border-radius: 20px; display: block; height: 28px; width: 80px; margin: auto; left: 0; right: 0; margin-top: 0px; opacity: 0; transition: 0.5s ease; font-family: 'Roboto Slab', sans-serif; text-decoration: none; font-size: 18px; font-weight: bold; line-height: 26px; color: #FFFFFF; } .HomepageButtonView1 { background-color: #c33065; } .HomepageButtonView2 { background-color: #0095c6; } .HomepageButtonView3 { background-color: #7b3faa; } .HomepageButtonContainerContent:hover .HomepageButtonView { display: block; opacity: 1; margin-top: 15px; } .PageHeaderButtonView { position1: absolute; background-color: #0095c6; text-align: center; -moz-border-radius: 20em; border-radius: 20px; display: block; height: 28px; width: 80px; margin-left: auto; margin-right: auto; left: 0; right: 0; margin-top: -28px; opacity: 0; transition: 0.5s ease; font-family: 'Roboto Slab', sans-serif; text-decoration: none; font-size: 18px; font-weight: bold; line-height: 26px; color: #FFFFFF; } .PageHeaderContainer_Homepage:hover .PageHeaderButtonView { display: block; opacity: 1; margin-top: 15px; } @media screen and (max-width: 850px) { .HomepageButtonContainer { width: 50%; } .HomepageButtonContainerPadding_wide { width: 100%; } } @media screen and (max-width: 600px) { .HomepageButtonContainer { width: 100%; } .HomepageButtonContainerPadding_wide { width: 100%; } } /* Homepage menu buttons finish **************/ /* Homepage latest news start **************/ .HomepageLatestContainer { display: inline-block; background-image: url('../images/meet/MeetTextBackground1.png'); padding: 20px 0px 20px 20px; margin: 0px 0px 0px 0px; width: calc(100% - 20px); } .LatestContainer { width: 50%; float: left; } .LatestContainerPadding { padding: 0px 20px 5px 0px; } @media screen and (max-width: 850px) { .LatestContainer { width: 50%; } } @media screen and (max-width: 600px) { .LatestContainer { width: 100%; } .LatestContainerPadding { padding: 0px 20px 20px 0px; } } .LatestTextContainer { position: relative; -moz-border-radius: 10px; border-radius: 10px; cursor: pointer; } .LatestTextContainer:hover .LatestTextDetails { animation: LatestTextContainer_Animation 0.8s ease forwards; } @keyframes LatestTextContainer_Animation { 0% {background-position: 0px 0px;} 100% {background-position: 57px 0px;} } .LatestTextContainer1 { background-color: #d93571; } .LatestTextContainer2 { background-color: #008ebd; } .LatestTextContainer3 { background-color: #8a4cba; } .LatestTextTitle { font-family: 'Fredoka One', Calibri, Arial; letter-spacing: 0.5px; text-decoration: none; font-size: 28px; padding: 20px 0px 0px 20px; color: #FFFFFF; margin: 0px; text-shadow: 3px 3px 0px rgba(0,0,0, .2); width: calc(100% - 100px); } .LatestTextSubTitle { font-family: 'Roboto Slab', sans-serif; text-decoration: none; font-size: 14px; font-weight: none; color: #FFFFFF; margin: 0px; padding: 0px 0px 20px 20px; } .LatestTextDetails { background-image: url('../images/NewsButtonBackgroundLarge4.png'); padding: 20px; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; text-align: center; font-family: 'Roboto Slab', sans-serif; text-decoration: none; font-size: 14px; font-weight: none; box-shadow: 0px 7px 0px rgba(0,0,0, .15); } .LatestTextDetails1 { color: #d93571; } .LatestTextDetails2 { color: #008ebd; } .LatestTextDetails3 { color: #8a4cba; } .NewButtonIcon { position: absolute; width: 55px; height: 55px; top: 20px; right: 20px; -moz-border-radius: 55px; border-radius: 55px; margin: 0px 0px 0px 0px; -webkit-box-shadow: 3px 3px 0px rgba(0,0,0, .2); -moz-box-shadow: 3px 3px 0px rgba(0,0,0, .2); box-shadow: 3px 3px 0px rgba(0,0,0, .2); } .NewButtonIcon img { position: relative; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); } .NewButtonIcon1 { background-color: #c33065; } /* Homepage latest news finish **************/ /* News content start **************/ .BlogContentMainContainer { height: auto; overflow: auto; background-color: #e8e6e6; margin-left: auto; margin-right: auto; -moz-border-radius-bottomleft: 1.5em; -moz-border-radius-bottomright: 1.5em; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; clear: both; } .BlogContentMainPadding { padding: 50px 50px 50px 50px; background-color: #FFFFFF; margin-left: auto; margin-right: auto; max-width: 750px; } .BlogContentMainPadding h3 { font-family: Arial; text-decoration: none; font-size: 22px; font-weight: bold; line-height: 22px; line-height: 30px; color: #262525; margin: 0px 0px 5px 0px; } .BlogContentMainPadding p { font-family: Arial; text-decoration: none; font-size: 14px; font-weight: none; line-height: 20px; line-height: 26px; color: #262525; margin: 0px 0px 20px 0px; } .BlogDate { font-family: Calibri, Arial; text-decoration: none; font-size: 17px; font-weight: bold; line-height: 20px; color: #00adef; margin: 0px 0px 10px 0px; } .BlogHeaderIntroContainer { width: 100%; margin: 0px 0px 20px 0px; display: flex; } .BlogHeaderIntroBar { background-color: #00adef; -moz-border-radius: 30px; border-radius: 30px; flex: 1; } .BlogHeaderIntroText { font-family: 'Roboto Slab', sans-serif; text-decoration: none; font-size: 20px; line-height: 32px; color: #262525; margin: 0px 0px 0px 20px; width: calc(100% - 30px); } .BlogContent { } .BlogContent p { font-family: 'Roboto', sans-serif; text-decoration: none; font-size: 17px; line-height: 26px; color: #262525; } .BlogContent a { color: #008ebd; transition: 0.4s; } .BlogContent a:hover { color: #d93571; } .BlogContent H2 { font-family: 'Roboto Slab', sans-serif; font-size: 26px; margin: 0px 0px 10px 0px; color: #262525; } .BlogContentMainImage { position: relative; width: 300px; height: 300px; float: right; margin: 10px 0px 20px 20px; } .BlogContentMainImage img { -moz-border-radius: 10px; border-radius: 10px; width: 100%; height: 100%; -webkit-box-shadow: 0px 4px 0px rgba(0,0,0, .1); -moz-box-shadow: 0px 4px 0px rgba(0,0,0, .1); box-shadow: 0px 4px 0px rgba(0,0,0, .1); } .BlogContentMainImageQuote { position: absolute; background-color:#00adef; color: #FFFFFF; font-family: 'Roboto Slab', sans-serif; font-size: 16px; padding: 10px 20px 10px 20px; -moz-border-radius: 20px; border-radius: 20px; float: right; bottom: -15px; right: 10px; height: 20px; -webkit-box-shadow: 0px 4px 0px rgba(0,0,0, .1); -moz-box-shadow: 0px 4px 0px rgba(0,0,0, .1); box-shadow: 0px 4px 0px rgba(0,0,0, .1); } @media screen and (max-width: 600px) { .BlogContentMainImage { width: 100%; height: 100%; } .BlogContentMainImage img { width: calc(100% + 100px); margin-left: -50px; -moz-border-radius: 0px; border-radius: 0px; } } .BlogContentImage { position: relative; float: left; margin: 10px 0px 30px 0px; -moz-border-radius: 10px; border-radius: 10px; width: 100%; } .BlogContentImage img { width: 100%; -webkit-box-shadow: 0px 4px 0px rgba(0,0,0, .1); -moz-box-shadow: 0px 4px 0px rgba(0,0,0, .1); box-shadow: 0px 4px 0px rgba(0,0,0, .1); -moz-border-radius: 10px; border-radius: 10px; } .BlogContentImageQuote { position: absolute; background-color:#00adef; color: #FFFFFF; font-family: 'Roboto Slab', sans-serif; font-size: 16px; padding: 10px 20px 10px 20px; -moz-border-radius: 20px; border-radius: 20px; float: right; bottom: -15px; right: 10px; -webkit-box-shadow: 0px 4px 0px rgba(0,0,0, .1); -moz-box-shadow: 0px 4px 0px rgba(0,0,0, .1); box-shadow: 0px 4px 0px rgba(0,0,0, .1); } @media screen and (max-width: 600px) { .BlogContentImage img { width: calc(100% + 100px); margin-left: -50px; -moz-border-radius: 0px; border-radius: 0px; } } .BlogHeaderContainer { width: calc(100% - 100px); background-image: url('../images/pageheader/BlogHeaderBackground1.png'); background-position: top center; border-bottom: 3px solid #d5d2d2; padding: 40px 50px 40px 50px; } .BlogHeaderTextContainer { position: relative; padding: 30px 30px 30px 30px; background-image: url('../images/PageHeaderTextBackground.jpg'); max-width: 690px; margin-left: auto; margin-right: auto; -moz-border-radius: 10px; border-radius: 10px; } .BlogHeaderTextTitle { font-family: 'Fredoka One', Calibri, Arial; letter-spacing: 0.5px; text-decoration: none; font-size: 50px; padding: 0px 50px 0px 50px; color: #FFFFFF; margin: 0px; text-align: center; text-shadow: 3px 3px 0px rgba(0,0,0, .2); } .BlogHeaderTextSubTitle { font-family: Calibri, Arial; text-decoration: none; font-size: 22px; font-weight: bold; padding: 0px 50px 0px 50px; color: #FFFFFF; margin: 0px; text-align: center; text-shadow: 3px 3px 0px rgba(0,0,0, .2); padding: 0px 0px 0px 0px; } .BlogHeaderOverlay { position: absolute; top: -60px; right: -60px; } .BlogContentShareContainer { display: inline-block; } .BlogContentShare { background-color:#00adef; color: #FFFFFF; font-family: 'Roboto Slab', sans-serif; font-size: 15px; padding: 6px 10px 6px 20px; margin: 0px 3px 0px 0px; -moz-border-radius-topleft: 50px; -moz-border-radius-bottomleft: 50px; border-top-left-radius: 50px; border-bottom-left-radius: 50px; float: left; height: 20px; -webkit-box-shadow: 0px 4px 0px rgba(0,0,0, .1); -moz-box-shadow: 0px 4px 0px rgba(0,0,0, .1); box-shadow: 0px 4px 0px rgba(0,0,0, .1); } .BlogSocialButton1 { width: 32px; height: 32px; background-color: #00adef; background-image: url('../images/SocialButton1.png'); background-repeat: no-repeat; background-position: center center; background-size: 15px 15px; float: left; margin-right: 3px; -webkit-box-shadow: 0px 4px 0px rgba(0,0,0, .1); -moz-box-shadow: 0px 4px 0px rgba(0,0,0, .1); box-shadow: 0px 4px 0px rgba(0,0,0, .1); } .BlogSocialButton2 { width: 32px; height: 32px; background-color: #00adef; -moz-border-radius-topright: 50px; -moz-border-radius-bottomright: 50px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; background-image: url('../images/SocialButton2.png'); background-repeat: no-repeat; background-position: center center; background-size: 15px 15px; float: left; margin-right: 10px; -webkit-box-shadow: 0px 4px 0px rgba(0,0,0, .1); -moz-box-shadow: 0px 4px 0px rgba(0,0,0, .1); box-shadow: 0px 4px 0px rgba(0,0,0, .1); } @media screen and (max-width: 850px) { .BlogHeaderTextTitle { font-size: 30px; } } @media screen and (max-width: 600px) { .BlogHeaderOverlay { } .BlogHeaderOverlay img { float: right; width: 80%; } } /* News content finish **************/ /* Meet content start **************/ .MeetContainerPadding { padding: 0px; background-image: url('../images/MeetBackground1.png'); } .MeetContainer { background-image: url('../images/meet/MeetBackgroundOverlay1.png'); background-repeat: repeat-x; background-position: left center; animation: MeetContainerScroll 30.0s linear infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes MeetContainerScroll { 0% {background-position: 0 center;} 100% {background-position: 0 center;} } @keyframes MeetContainerScroll { 0% {background-position: 0 center;} 100% {background-position: 1022px center;} } .MeetTextContainer { position: relative; background-image: url('../images/meet/MeetTextBackground1.png'); padding: 20px 20px 20px 20px; margin: -10px 0px 0px 0px; } .MeetTextContainerFooter { background-image: url('../images/MeetTextBackgroundOverlay1.png'); height: 10px; padding: 0px 20px 0px 20px; margin: 0px -20px -20px -20px; width: 100%; } .MeetTextContainerName { font-family: 'Fredoka One', Calibri, Arial; letter-spacing: 0.5px; text-decoration: none; font-size: 50px; padding: 10px 30px 0px 30px; color: #FFFFFF; margin: 0px; text-align: center; text-shadow: 3px 3px 0px rgba(0,0,0, .2); } .MeetTextContainerBio { color: #FFFFFF; font-family: 'Roboto Slab', sans-serif; font-size: 18px; max-width: 600px; margin-left: auto; margin-right: auto; padding: 0px 30px 20px 30px; text-align: center; text-shadow: 1px 1px 0px rgba(0,0,0, .2); line-height: 30px; } .MeetTextContainerBio a { color: #FFFFFF; font-weight: bold; } .MeetContainerImage { float: none; display: flex; margin-left: auto; margin-right: auto; } .MeetCharacterImage1 { padding-top: 20px; max-width: 100%; margin-left: auto; margin-right: auto; } /* Meet content finish **************/ /* Story start **************/ .StoryTextContainer { position: relative; background-image: url('../images/meet/MeetTextBackground1.png'); padding: 20px 20px 20px 20px; margin: 0px 0px 0px 0px; } .StoryContentImage1 { padding: 40px 0px 40px 0px; max-width: 90%; margin-left: auto; margin-right: auto; } /* Story finish **************/ /* Footer start **************/ .footerBackgroundContainer { min-height: 200px; background-image: url('../images/footer/FooterBackground.jpg'); background-color: #00b6f1; } .FooterBackgroundContainerOverlay { position: absolute; min-height: 200px; width: 100%; background-image: url('../images/footer/FooterBackgroundOverlay.png'); background-repeat: no-repeat; background-position: 85% bottom; min-height: 220px; } .FooterCover { height: 17px; width: 100%; background-image: url('../images/footer/FooterCover1.png'); background-repeat: repeat-x; background-size: 38px 17px; margin-bottom: -17px; } .FooterCover_Background2 { background-image: url('../images/footer/FooterCover2.png'); } .FooterCover_Background3 { background-image: url('../images/footer/FooterCover3.png'); } .FooterCover_Background4 { background-image: url('../images/footer/FooterCover4.png'); } .FooterLogo { width: 154px; margin-left: auto; margin-right: auto; padding-top: 34px; cursor: pointer; } .FooterMenu { max-width: 800px; margin-left: auto; margin-right: auto; text-align: center; padding: 8px 20px 0px 20px; } .FooterMenu a { font-family: 'Roboto Slab', sans-serif; text-decoration: none; font-size: 18px; color: #FFFFFF; text-shadow: 2px 2px 0px rgba(0,0,0, .2); display: inline; } .FooterMenuItem { font-family: 'Roboto Slab', sans-serif; text-decoration: none; font-size: 18px; color: #FFFFFF; text-shadow: 2px 2px 0px rgba(0,0,0, .2); cursor: pointer; display: inline; padding: 1px 0px 3px 0px; transition: 0.4s; } .FooterMenuItem:hover { padding: 1px 15px 3px 15px; border-radius: 25px; } #FooterMenuItem1:hover { background-color: #e58cbb; } #FooterMenuItem2:hover { background-color: #afca36; } #FooterMenuItem3:hover { background-color: #ffc71c; } #FooterMenuItem4:hover { background-color: #e85d53; } #FooterMenuItem5:hover { background-color: #45c3d1; } .FooterMenuPoint { width: 10px; height: 10px; margin: 0px 5px 0px 5px; background-color: #FFFFFF; -moz-border-radius: 10em; border-radius: 10px; box-shadow: 2px 2px 0px rgba(0,0,0, .2); display: inline-block; } .FooterBottom { position: absolute; bottom: 0px; height: 75px; width: 100%; background-color: #009eda; height: 95px; } .FooterBottomOverlay { position: absolute; min-height: 75px; width: 100%; background-image: url('../images/footer/FooterBackgroundOverlay.png'); background-repeat: no-repeat; background-position: 85% bottom; height: 95px; } .FooterSocialContainer { width: 105px; padding-top: 15px; margin-left: auto; margin-right: auto; height: 45px; } .FooterSocialButton1 { width: 45px; height: 45px; background-color: #0092c8; -moz-border-radius: 45em; border-radius: 45px; background-image: url('../images/SocialButton1.png'); background-repeat: no-repeat; background-position: center center; background-size: 25px 25px; float: left; margin-right: 10px; cursor: pointer; transition: 0.4s; } .FooterSocialButton1:hover { background-color: #e58cbb; } .FooterSocialButton2 { width: 45px; height: 45px; background-color: #0092c8; -moz-border-radius: 45em; border-radius: 45px; background-image: url('../images/SocialButton2.png'); background-repeat: no-repeat; background-position: center center; background-size: 25px 21px; float: left; cursor: pointer; transition: 0.4s; } .FooterSocialButton2:hover { background-color: #afca36; } .FooterSocialButton3 { width: 45px; height: 45px; background-color: #0092c8; -moz-border-radius: 45em; border-radius: 45px; background-image: url('../images/SocialButton3.png'); background-repeat: no-repeat; background-position: center center; background-size: 13px 25px; float: left; cursor: pointer; transition: 0.4s; } .FooterSocialButton3:hover { background-color: #e85d53; } .FooterMenuCharacter { margin-top: -135px; margin-left: calc(50% - 350px); } .FooterText { font-family: 'Roboto Slab', sans-serif; font-size: 12px; color: #FFFFFF; text-shadow: 2px 2px 0px rgba(0,0,0, .2); text-align: center; padding-top: 7px; } @media screen and (max-width: 850px) { .FooterMenu { padding-top: 2px; } .FooterMenu a { font-size: 16px; } .FooterMenuCharacter { margin-top: -145px; margin-left: calc(50% - 250px); } .FooterBackgroundContainerOverlay { background-position: 95% bottom; min-height: 240px; } .FooterBottomOverlay { background-position: 95% bottom; } } /* Footer finish **************/ /* Page transistion start **************/ .pageTransistionLeave1 { position: absolute; width: 120%; left: -100%; height: 21%; background-color: #FFC71C; display: block; animation: pageTransistionLeaveAnimation 0.30s ease-in forwards; border-radius: 0px 250px 250px 0px; z-index: 1; } .pageTransistionLeave2 { position: absolute; width: 100%; left: -100%; height: 20%; top: 21%; background-color: #FFC71C; display: block; animation: pageTransistionLeaveAnimation 0.30s ease-in forwards; animation-delay: 0.10s; border-radius: 0px 250px 250px 0px; z-index: 1; } .pageTransistionLeave3 { position: absolute; width: 100%; left: -100%; height: 21%; top: 40%; background-color: #FFC71C; display: block; animation: pageTransistionLeaveAnimation 0.30s ease-in forwards; animation-delay: 0.20s; border-radius: 0px 250px 250px 0px; z-index: 1; } .pageTransistionLeave4 { position: absolute; width: 100%; left: -100%; height: 21%; top: 60%; background-color: #FFC71C; display: block; animation: pageTransistionLeaveAnimation 0.30s ease-in forwards; animation-delay: 0.30s; border-radius: 0px 250px 250px 0px; z-index: 1; } .pageTransistionLeave5 { position: absolute; width: 100%; left: -100%; height: 21%; top: 80%; background-color: #FFC71C; display: block; animation: pageTransistionLeaveAnimation 0.30s ease-in forwards; animation-delay: 0.40s; border-radius: 0px 250px 250px 0px; z-index: 1; } @keyframes pageTransistionLeaveAnimation { 0% {transform: skewX(0deg); width: 100%; left: -100%; transform-origin: 0px 0px;} 100% {transform: skewX(0deg); width: 120%; left: 0%; transform-origin: 0px 0px;} } .pageTransistionLeaveContainer { position: fixed; width: 100%; height: 100%; z-index: 20; display: none; } .pageTransistionLoad { position: fixed; width: 100%; height: 100%; background-color: #FFC71C; display: block; animation: pageTransistionLoadAnimation1 0.30s ease-in forwards; animation-delay: 0.30s; z-index: 1; } .pageTransistionLoad1 { position: absolute; width: 120%; left: -20%; height: 21%; background-color: #FFC71C; display: block; animation: pageTransistionLoadAnimation 0.30s ease-in forwards; animation-delay: 0.30s; border-radius: 250px 0px 0px 250px; z-index: 1; } .pageTransistionLoad2 { position: absolute; width: 120%; left: -20%; height: 21%; top: 20%; background-color: #FFC71C; display: block; animation: pageTransistionLoadAnimation 0.30s ease-in forwards; animation-delay: 0.40s; border-radius: 250px 0px 0px 250px; z-index: 1; } .pageTransistionLoad3 { position: absolute; width: 120%; left: -20%; height: 21%; top: 40%; background-color: #FFC71C; display: block; animation: pageTransistionLoadAnimation 0.30s ease-in forwards; animation-delay: 0.50s; border-radius: 250px 0px 0px 250px; z-index: 1; } .pageTransistionLoad4 { position: absolute; width: 120%; left: -20%; height: 21%; top: 60%; background-color: #FFC71C; display: block; animation: pageTransistionLoadAnimation 0.30s ease-in forwards; animation-delay: 0.60s; border-radius: 250px 0px 0px 250px; z-index: 1; } .pageTransistionLoad5 { position: absolute; width: 120%; left: -20%; height: 21%; top: 80%; background-color: #FFC71C; display: block; animation: pageTransistionLoadAnimation 0.30s ease-in forwards; animation-delay: 0.70s; border-radius: 250px 0px 0px 250px; z-index: 1; } @keyframes pageTransistionLoadAnimation { 0% {transform: skewX(0deg); width: 120%; left: -20%; transform-origin: 0px 0px;} 100% {transform: skewX(0deg); width: 100%; left: 120%; transform-origin: 0px 0px;} } .pageTransistionLoadContainer { position: fixed; width: 100%; height: 100%; pointer-events: none; z-index: 20; } .pageTransistionLoading { position: fixed; width: 100%; height: 100%; background-color: #FFC71C; display: block; z-index: 20; } .pageTransistionLeave_Item1 { position: relative; width: 290.25px; height: 105px; background-image: url('../images/header/MainLogo.png'); background-size: 290.25px 105px; margin-left: auto; margin-right: auto; margin-top: 10%; animation: pageTransistionLeave_Item1 0.30s ease-out forwards; animation-delay: 0.40s; opacity: 0; z-index: 2; } @media screen and (max-width: 600px) { .pageTransistionLeave_Item1 { width: 193.5px; height: 70px; background-size: 193.5px 70px; } } @keyframes pageTransistionLeave_Item1 { /*0% {margin-top: -140px;} 100% {margin-top: 10%;}*/ 0% {opacity: 0;} 100% {opacity: 1;} } .pageTransistionLeave_Item2 { position: relative; margin-left: auto; margin-right: auto; animation: pageTransistionLeave_Item2 0.30s ease-out forwards; animation-delay: 0.40s; opacity: 0; z-index: 2; } @keyframes pageTransistionLeave_Item2 { 0% {opacity: 0;} 100% {opacity: 1;} } .pageTransistionLoad_Item1 { position: relative; width: 290.25px; height: 105px; background-image: url('../images/header/MainLogo.png'); background-size: 290.25px 105px; margin-left: auto; margin-right: auto; margin-top: 10%; animation: pageTransistionLoad_Item1 0.30s ease-out forwards; z-index: 2; } @media screen and (max-width: 600px) { .pageTransistionLoad_Item1 { width: 193.5px; height: 70px; background-size: 193.5px 70px; } } @keyframes pageTransistionLoad_Item1 { /*0% {margin-top: 20%;} 100% {margin-top: -140px;}*/ 0% {opacity: 1;} 100% {opacity: 0;} } .pageTransistionLoad_Item2 { position: relative; margin-left: auto; margin-right: auto; animation: pageTransistionLoad_Item2 0.30s ease-out forwards; z-index: 2; } @keyframes pageTransistionLoad_Item2 { 0% {opacity: 1;} 100% {opacity: 0;} } .pageTransistionLoading_Image { position: relative; width: 290.25px; height: 105px; background-image: url('../images/header/MainLogo.png'); background-size: 290.25px 105px; margin-left: auto; margin-right: auto; margin-top: 10%; z-index: 2; } @media screen and (max-width: 600px) { .pageTransistionLoading_Image { width: 193.5px; height: 70px; background-size: 193.5px 70px; } } .BongoMainContainer { width: 186px; height: 177px; margin-left: auto; margin-right: auto; } .BongoContainer { position: relative; display: inline-block; -webkit-animation: BongoContainer 2s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: BongoContainer 2s ease-in-out infinite; width: 186px; height: 177px; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes BongoContainer { 0% {top: 20px; left: 0px; transform: rotate(0deg);} 50% {top: 0px; left: 0px; transform: rotate(-5deg);} 100% {top: 20px; left: 0px; transform: rotate(0deg);} } /* Default position 88px; right: 464px; */ @keyframes BongoContainer { 0% {top: 20px; left: 0px; transform: rotate(0deg);} 50% {top: 0px; left: 0px; transform: rotate(-5deg);} 100% {top: 20px; left: 0px; transform: rotate(0deg);} } .BongoBody { position: absolute; width: 186px; height: 177px; background-image: url('../images/loading/BongoMain.png'); background-size: 186px 177px; } .BongoWing1 { position: absolute; width: 87px; height: 97px; background-image: url('../images/loading/BongoWing1.png'); background-size: 87px 97px; top: 0; left: 0; -webkit-animation: BongoWing1 2s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: BongoWing1 2s ease-in-out infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes BongoWing1 { 0% {top: 0px; left: 0px; transform: scaleY(1) skewX(0deg); width: 87px; background-size: 87px 97px;} 50% {top: 14px; left: 0px; transform: scaleY(0.4) skewX(20deg); width: 80px; background-size: 80px 97px;} 100% {top: 0px; left: 0px; transform: scaleY(1) skewX(0deg); width: 87px; background-size: 87px 97px;} } /* Default position 88px; right: 464px; */ @keyframes BongoWing1 { 0% {top: 0px; left: 0px; transform: scaleY(1) skewX(0deg); width: 87px; background-size: 87px 97px;} 50% {top: 14px; left: 0px; transform: scaleY(0.4) skewX(20deg); width: 80px; background-size: 80px 97px;} 100% {top: 0px; left: 0px; transform: scaleY(1) skewX(0deg); width: 87px; background-size: 87px 97px;} } .BongoWing2 { position: absolute; width: 56px; height: 85px; background-image: url('../images/loading/BongoWing2.png'); background-size: 56px 85px; top: 16px; left: 110px; -webkit-animation: BongoWing2 2s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: BongoWing2 2s ease-in-out infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes BongoWing2 { 0% {top: 16px; left: 110px; transform: scaleY(1) skewX(0deg);} 50% {top: 38px; left: 110px; transform: scaleY(0.4) skewX(20deg);} 100% {top: 16px; left: 110px; transform: scaleY(1) skewX(0deg);} } /* Default position 88px; right: 464px; */ @keyframes BongoWing2 { 0% {top: 16px; left: 110px; transform: scaleY(1) skewX(0deg);} 50% {top: 38px; left: 110px; transform: scaleY(0.4) skewX(20deg);} 100% {top: 16px; left: 110px; transform: scaleY(1) skewX(0deg);} } .BongoShadow { width: 100px; height: 20px; background-image: url('../images/loading/BongoShadow.png'); margin-top: 40px; margin-left: 60px; -webkit-animation: BongoShadow 2s ease-in-out infinite; /* Safari 4.0 - 8.0 */ animation: BongoShadow 2s ease-in-out infinite; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes BongoShadow { 0% {transform: scale(1);} 50% {transform: scale(0.9);} 100% {transform: scale(1);} } /* Default position 88px; right: 464px; */ @keyframes BongoShadow { 0% {transform: scale(1);} 50% {transform: scale(0.9);} 100% {transform: scale(1);} } /* Page transistion finish **************/ /* Gallery popup start **************/ .galleryPopupContainer { display: none; position: fixed; left: 0; top: 0; z-index: 10; margin: auto; padding: 0; width: 100%; height: 100%; overflow: hidden; } .galleryPopupContainer::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background-color: #35002e; opacity: 0.8; } .closeGalleryPopup { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; } .closeGalleryPopup:hover, .closeGalleryPopup:focus { color: #999; text-decoration: none; cursor: pointer; } .galleryPopupItem { display: none; width: calc(100% - 100px); height: calc(100% - 100px); margin: 50px; background-repeat: no-repeat; background-size: contain; background-position: center; animation: GalleryItem 0.3s forwards; overflow: hidden; } /* Safari 4.0 - 8.0 */ @-webkit-keyframes GalleryItem { 0% {margin-left: -100px; margin-top: -100px; transform: skewX(-10deg);} 100% {margin-top: 50px; margin-top: 50px; transform: skewX(0deg);} } @keyframes GalleryItem { 0% {margin-left: -100px; margin-top: -100px; transform: skewX(-10deg);} 100% {margin-top: 50px; margin-top: 50px; transform: skewX(0deg);} } .GalleryPrev, .GalleryNext { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } .GalleryNext { right: 0; border-radius: 3px 0 0 3px; } .GalleryPrev:hover, .GalleryNext:hover { background-color: rgba(54, 0, 46, 0.8); } .GalleryNextButton { position: absolute; width: 100px; height: 100px; background-color: rgba(54, 0, 46, 0.3); top: 40%; -moz-border-radius: 50px; border-radius: 50px; transition: 0.5s ease; cursor: pointer; } .GalleryNextButtonLeft { margin-left: -50px; } .GalleryNextButtonRight { right: 0; margin-right: -50px; } .GalleryNextButton:hover { background-color: rgba(0, 0, 0, 0.8); } .GalleryNextButtonLeft img { position: absolute; top: 33px; right: 20px; } .GalleryNextButtonRight img { position: absolute; top: 33px; left: 20px; } /* Gallery popup finish **************/ /* Story gallery start **************/ .StoryItemsMainContainer { padding: 20px 40px 40px 20px; overflow: auto; } .StoryItemContainer { width: 33.3%; float: left; } @media screen and (max-width: 850px) { .StoryItemContainer { width: 50%; } } @media screen and (max-width: 600px) { .StoryItemContainer { width: 100%; } } .StoryItemContainerPadding { padding: 20px 0px 0px 20px; } .StoryItemContainerImageBackground { background-color: #DA3571; border-radius: 20px; } .StoryItemContainerImage { position: relative; cursor: pointer; width: 100%; padding-top: 62.5%; background-size: cover; -webkit-box-shadow: 7px 7px 0px rgba(0,0,0, .1); -moz-box-shadow: 7px 7px 0px rgba(0,0,0, .1); box-shadow: 7px 7px 0px rgba(0,0,0, .1); transition: 0.2s ease-out; } .StoryItemContainerImage:hover { opacity: 70%; border-radius: 20px; } /* Story gallery finish **************/ /* News and Gallery grid start **************/ /* The minmax 300px sets the max width of the containers. If decreased then more containers appear on the screen width. The grid-auto-rows sets the size of the rows. Setting to to a small value decreases the possible extra gap below a container. Due to the limit of the number of grid items this needs to be set higher. */ .grid { display: grid; grid-gap: 0px; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); grid-auto-rows: 10px; overflow: hidden; } .gridItem { background-color: #ffffff; } /* News and Gallery grid finish **************/ /* News content containers start **************/ .NewsButtonContainer { position: relative; padding: 0px 20px 20px 0px; cursor: pointer; } .NewsButtonContainer:hover .NewsButtonTextContainer { margin-top: -80px; padding-bottom: 110px; } .NewsButtonImage { position: relative; width: 100%; padding-top: 56.25%; background-size: cover; -moz-border-radius-topleft: 1.0em; -moz-border-radius-topright: 1.0em; border-top-left-radius: 10px; border-top-right-radius: 10px; } .NewButtonIcon { position: absolute; width: 55px; height: 55px; top: 20px; right: 20px; -moz-border-radius: 55px; border-radius: 55px; margin: 0px 0px 0px 0px; -webkit-box-shadow: 3px 3px 0px rgba(0,0,0, .2); -moz-box-shadow: 3px 3px 0px rgba(0,0,0, .2); box-shadow: 3px 3px 0px rgba(0,0,0, .2); } .NewButtonIcon img { position: relative; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); } .NewButtonIcon1 { background-color: #c33065; } .NewButtonIcon2 { background-color: #00a9e0; } .NewButtonIcon3 { background-color: #9452c8; } .NewsButtonTextContainer { position: relative; -moz-border-radius-bottomleft: 1.0em; -moz-border-radius-bottomright: 1.0em; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 30px 26px 40px 30px; margin-top: -10px; -webkit-box-shadow: 0px 7px 0px rgba(0,0,0, .2); -moz-box-shadow: 0px 7px 0px rgba(0,0,0, .2); box-shadow: 0px 7px 0px rgba(0,0,0, .15); transition: 0.4s ease-out; } .NewsButtonTextContainer1 { background-image: url('../images/NewsButtonBackgroundLarge1.png'); border-bottom: 9px solid #c33065; } .NewsButtonTextContainer2 { background-image: url('../images/NewsButtonBackgroundLarge2.png'); border-bottom: 9px solid #00a9e0; } .NewsButtonTextContainer3 { background-image: url('../images/NewsButtonBackgroundLarge3.png'); border-bottom: 9px solid #8a4cba; } .NewsButtonTextContainer h3 { font-family: 'Fredoka One', Arial; letter-spacing: 1.5px; text-decoration: none; font-size: 30px; color: #FFFFFF; margin: 0px; text-shadow: 3px 3px 0px rgba(0,0,0, .2); margin-bottom: 8px; } .NewsButtonTextContainer p { font-family: 'Roboto Slab', sans-serif; text-decoration: none; font-size: 18px; font-weight: none; line-height: 26px; color: #FFFFFF; margin: 0px; } .NewsButtonTextPoint { background-color: #FFFFFF; width: 18px; height: 18px; float: left; -moz-border-radius: 20em; border-radius: 20px; margin: 7px 10px 0px 0px; -webkit-box-shadow: 3px 3px 0px rgba(0,0,0, .2); -moz-box-shadow: 3px 3px 0px rgba(0,0,0, .2); box-shadow: 3px 3px 0px rgba(0,0,0, .2); } .NewsButtonTextView { font-family: Arial; text-decoration: none; font-size: 20px; color: #FFFFFF; font-weight: bold; max-width: 100px; background-color: #009eda; text-align: center; margin: 10px 0px 0px 0px; padding: 5px; -moz-border-radius: 20.0em; border-radius: 20px; /*box-shadow: 2px 2px 0px rgba(0,0,0, .2);*/ text-shadow: 2px 2px 0px rgba(0,0,0, .1); margin-left: auto; margin-right: auto; } .NewsButtonTextView1 { background-color: #e14281; } .NewsButtonBottom { background-color: #000000; width: 100%; height: 20px; margin-top: -20px; -moz-border-radius-bottomleft: 1.0em; -moz-border-radius-bottomright: 1.0em; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; opacity: 0.1; } .NewsButtonView { position: absolute; background-color: #7b3faa; text-align: center; -moz-border-radius: 20em; border-radius: 20px; display: block; height: 28px; width: 80px; margin: auto; left: 0; right: 0; margin-top: 0px; opacity: 0; transition: 0.5s ease; font-family: 'Roboto Slab', sans-serif; text-decoration: none; font-size: 18px; font-weight: bold; line-height: 26px; color: #FFFFFF; } .NewsButtonView1 { background-color: #c33065; } .NewsButtonView2 { background-color: #0095c6; } .NewsButtonView3 { background-color: #7b3faa; } .NewsButtonContainer:hover .NewsButtonView { display: block; opacity: 1; margin-top: 15px; } /* News and Gallery content containers finish **************/ /* Gallery content containers start **************/ .GalleryButtonContainer { position: relative; padding: 0px 20px 27px 0px; cursor: pointer; } .GalleryButtonContainerImage { width: 100%; -moz-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0px 7px 0px rgba(0,0,0, .2); -moz-box-shadow: 0px 7px 0px rgba(0,0,0, .2); box-shadow: 0px 7px 0px rgba(0,0,0, .15); } .GalleryButtonContainer:hover .GalleryButtonTextContainer { margin-top: -80px; padding-bottom: 100px; } .GalleryButtonImage { position: relative; width: 100%; padding-top: 100%; background-size: cover; -moz-border-radius-topleft: 1.0em; -moz-border-radius-topright: 1.0em; border-top-left-radius: 10px; border-top-right-radius: 10px; } .GalleryButtonIcon { position: absolute; width: 55px; height: 55px; top: 20px; right: 40px; -moz-border-radius: 55px; border-radius: 55px; margin: 0px 0px 0px 0px; -webkit-box-shadow: 3px 3px 0px rgba(0,0,0, .2); -moz-box-shadow: 3px 3px 0px rgba(0,0,0, .2); box-shadow: 3px 3px 0px rgba(0,0,0, .2); } .GalleryButtonIcon img { position: relative; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); } .GalleryButtonIcon1 { background-color: #c33065; } .GalleryButtonIcon2 { background-color: #00a9e0; } .GalleryButtonIcon3 { background-color: #9452c8; } .GalleryButtonTextContainer { position: relative; -moz-border-radius-bottomleft: 1.0em; -moz-border-radius-bottomright: 1.0em; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; padding: 30px 26px 30px 30px; margin-top: -10px; -webkit-box-shadow: 3px 3px 0px rgba(0,0,0, .2); -moz-box-shadow: 3px 3px 0px rgba(0,0,0, .2); box-shadow: 0px 7px 0px rgba(0,0,0, .15); transition: 0.4s ease-out; } .GalleryButtonTextContainer1 { background-image: url('../images/NewsButtonBackgroundLarge1.png'); border-bottom: 9px solid #c33065; } .GalleryButtonTextContainer2 { background-image: url('../images/NewsButtonBackgroundLarge2.png'); border-bottom: 9px solid #00a9e0; } .GalleryButtonTextContainer3 { background-image: url('../images/NewsButtonBackgroundLarge3.png'); border-bottom: 9px solid #8a4cba; } .GalleryButtonTextContainer h3 { font-family: 'Fredoka One', Arial; letter-spacing: 1.5px; text-decoration: none; font-size: 30px; color: #FFFFFF; margin: 0px; text-shadow: 3px 3px 0px rgba(0,0,0, .2); margin-bottom: 8px; } .GalleryButtonTextContainer p { font-family: 'Roboto Slab', sans-serif; text-decoration: none; font-size: 18px; font-weight: none; line-height: 26px; color: #FFFFFF; margin: 0px; } .GalleryButtonTextPoint { background-color: #FFFFFF; width: 18px; height: 18px; float: left; -moz-border-radius: 20em; border-radius: 20px; margin: 7px 10px 0px 0px; -webkit-box-shadow: 3px 3px 0px rgba(0,0,0, .2); -moz-box-shadow: 3px 3px 0px rgba(0,0,0, .2); box-shadow: 3px 3px 0px rgba(0,0,0, .2); } .GalleryButtonTextView { font-family: Arial; text-decoration: none; font-size: 20px; color: #FFFFFF; font-weight: bold; max-width: 100px; background-color: #009eda; text-align: center; margin: 10px 0px 0px 0px; padding: 5px; -moz-border-radius: 20.0em; border-radius: 20px; /*box-shadow: 2px 2px 0px rgba(0,0,0, .2);*/ text-shadow: 2px 2px 0px rgba(0,0,0, .1); margin-left: auto; margin-right: auto; } .GalleryButtonTextView1 { background-color: #e14281; } .GalleryButtonBottom { background-color: #000000; width: 100%; height: 20px; margin-top: -20px; -moz-border-radius-bottomleft: 1.0em; -moz-border-radius-bottomright: 1.0em; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; opacity: 0.1; } .GalleryButtonView { position: absolute; background-color: #7b3faa; text-align: center; -moz-border-radius: 20em; border-radius: 20px; display: block; height: 28px; width: 80px; margin: auto; left: 0; right: 0; margin-top: 0px; opacity: 0; transition: 0.5s ease; font-family: 'Roboto Slab', sans-serif; text-decoration: none; font-size: 18px; font-weight: bold; line-height: 26px; color: #FFFFFF; } .GalleryButtonView1 { background-color: #c33065; } .GalleryButtonView2 { background-color: #0095c6; } .GalleryButtonView3 { background-color: #7b3faa; } .GalleryButtonContainer:hover .GalleryButtonView { display: block; opacity: 1; margin-top: 15px; } /* Gallery content containers finish **************/ /* Cookie content start **************/ .cookieDetails { position: fixed; width: 100%; height: 100%; top: 0; display: none; opacity: 0; background-color: rgba(54, 0, 46, 0.8); animation: cookieDetailsFade 0.50s ease-in forwards; animation-delay: 1.50s; z-index: 10; overflow: auto; } @keyframes cookieDetailsFade { 0% {opacity: 0;} 100% {opacity: 1;} } .cookieDetailsContainer { max-width: 300px; background-color1: #00c0f3; margin-left: auto; Margin-right: auto; margin-top: 50px; margin-bottom: 50px; padding: 30px; border-radius: 10px; background-image: url('../images/NewsButtonBackgroundLarge2.png'); border-bottom: 9px solid #00a9e0; } .cookieDetailHeader { font-family: 'Fredoka One', Calibri, Arial; letter-spacing: 0.5px; text-decoration: none; font-size: 35px; color: #FFFFFF; margin-bottom: 5px; text-shadow: 3px 3px 0px rgba(0,0,0, .2); line-height: 100%; text-align: center; } .cookieDetailText { font-family: 'Roboto Slab', sans-serif; text-decoration: none; font-size: 18px; font-weight: none; color: #FFFFFF; margin: 0px; text-shadow1: 3px 3px 0px rgba(0,0,0, .2); padding: 0px 0px 0px 0px; } .cookieDetailButton { background-color: #c33065; text-align: center; -moz-border-radius: 20em; border-radius: 20px; display: block; height: 28px; width: 180px; margin: auto; left: 0; right: 0; margin-top: 10px; font-family: 'Roboto Slab', sans-serif; text-decoration: none; font-size: 18px; font-weight: bold; line-height: 26px; color: #FFFFFF; cursor: pointer; } /* Cookie content finish **************/