/* -------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- ---- GLOBAL STYLES (unless contradicted --- ----------- in @media designations below --- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- ----------------------------*/ /* -------------------------- RE: @media Rule Media Query Breakpoints ONLY USING MOBILE, TABLET & LAPTOP FOR THIS PROJECT Mobile: 0px - 480px wide Large Mobile (Phablet): 481px - 768px wide Tablet: 769px - 1365px wide Laptop: 1366px wide Desktop: 1920px wide ----------------------------*/ /* ------------- ---- CSS RESET ------ ------------------*/ * { margin: 0; padding: 0; } /* -------------------------- ---- CSS3 KEYFRAMES ---- ----------------------------*/ @keyframes fade-in { 0% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes: fade-in { 0% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes: fade-in { 0% {opacity: 0;} 100% {opacity: 1;} } @-webkit-keyframes: fade-in { 0% {opacity: 0;} 100% {opacity: 1;} } /* -------------------------- ---- CSS3 ANIMATIONS ---- ----------------------------*/ .fade-in { animation-name: fade-in; -moz-animation-name: fade-in; /* MOZILLA FIREFOX */ -o-animation-name: fade-in; /* OPERA */ -webkit-animation-name: fade-in; /* APPLE SAFARI, GOOGLE CHROME */ animation-duration: 1s; -moz-animation-duration: 1s; /* MOZILLA FIREFOX */ -o-animation-duration: 1s; /* OPERA */ -webkit-animation-duration: 1s; /* APPLE SAFARI, GOOGLE CHROME */ animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; /* MOZILLA FIREFOX */ -o-animation-fill-mode: backwards; /* OPERA */ -webkit-animation-fill-mode: backwards; /* APPLE SAFARI, GOOGLE CHROME */ } .fade-two { animation-delay: .6s; -moz-animation-delay: .6s; /* MOZILLA FIREFOX */ -o-animation-delay: .6s; /* OPERA */ -webkit-animation-delay: .6s; /* APPLE SAFARI, GOOGLE CHROME */ } .fade-three { animation-delay: 1.25s; -moz-animation-delay: 1.25s; /* MOZILLA FIREFOX */ -o-animation-delay: 1.25s; /* OPERA */ -webkit-animation-delay: 1.25s; /* APPLE SAFARI, GOOGLE CHROME */ } .fade-four { animation-delay: 2s; -moz-animation-delay: 2s; /* MOZILLA FIREFOX */ -o-animation-delay: 2s; /* OPERA */ -webkit-animation-delay: 2s; /* APPLE SAFARI, GOOGLE CHROME */ } .fade-five { animation-delay: 4s; -moz-animation-delay: 4s; /* MOZILLA FIREFOX */ -o-animation-delay: 4s; /* OPERA */ -webkit-animation-delay: 4s; /* APPLE SAFARI, GOOGLE CHROME */ } .fade-six { animation-delay: -5s; -moz-animation-delay: 5s; /* MOZILLA FIREFOX */ -o-animation-delay: 5s; /* OPERA */ -webkit-animation-delay: 5s; /* APPLE SAFARI, GOOGLE CHROME */ } .fade-seven { animation-delay: 0s; -moz-animation-delay: 6s; /* MOZILLA FIREFOX */ -o-animation-delay: 6s; /* OPERA */ -webkit-animation-delay: 6s; /* APPLE SAFARI, GOOGLE CHROME */ } .fade-eight { animation-delay: 4.5s; -moz-animation-delay: 7s; /* MOZILLA FIREFOX */ -o-animation-delay: 7s; /* OPERA */ -webkit-animation-delay: 7s; /* APPLE SAFARI, GOOGLE CHROME */ } /* -------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- ---- MOBILE DISPLAY (1-479px WIDE but making 767 to bring it up to tablet) ------ -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- ----------------------------*/ @media screen and (max-width: 767px) { .fade-in { animation-name: fade-in; -moz-animation-name: fade-in; /* MOZILLA FIREFOX */ -o-animation-name: fade-in; /* OPERA */ -webkit-animation-name: fade-in; /* APPLE SAFARI, GOOGLE CHROME */ animation-duration: 0s; -moz-animation-duration: 0s; /* MOZILLA FIREFOX */ -o-animation-duration: 0s; /* OPERA */ -webkit-animation-duration: 0s; /* APPLE SAFARI, GOOGLE CHROME */ animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; /* MOZILLA FIREFOX */ -o-animation-fill-mode: backwards; /* OPERA */ -webkit-animation-fill-mode: backwards; /* APPLE SAFARI, GOOGLE CHROME */ } .fade-four { animation-delay: 0s; -moz-animation-delay: 0s; /* MOZILLA FIREFOX */ -o-animation-delay: 0s; /* OPERA */ -webkit-animation-delay: 0s; /* APPLE SAFARI, GOOGLE CHROME */ } } /* ---end mobile--*/ /* -------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- ---- TABLET DISPLAY (769-1365px WIDE) ------ -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- ----------------------------*/ @media screen and (min-width: 768px) and (max-width: 1365px) { .fade-in { animation-name: fade-in; -moz-animation-name: fade-in; /* MOZILLA FIREFOX */ -o-animation-name: fade-in; /* OPERA */ -webkit-animation-name: fade-in; /* APPLE SAFARI, GOOGLE CHROME */ animation-duration: 0s; -moz-animation-duration: 0s; /* MOZILLA FIREFOX */ -o-animation-duration: 0s; /* OPERA */ -webkit-animation-duration: 0s; /* APPLE SAFARI, GOOGLE CHROME */ animation-fill-mode: backwards; -moz-animation-fill-mode: backwards; /* MOZILLA FIREFOX */ -o-animation-fill-mode: backwards; /* OPERA */ -webkit-animation-fill-mode: backwards; /* APPLE SAFARI, GOOGLE CHROME */ } .fade-four { animation-delay: 0s; -moz-animation-delay: 0s; /* MOZILLA FIREFOX */ -o-animation-delay: 0s; /* OPERA */ -webkit-animation-delay: 0s; /* APPLE SAFARI, GOOGLE CHROME */ } } /* ---end tablet--*/ /* -------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- ---- LAPTOP DISPLAY (1366-1919px WIDE) ------ -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- -------------------------------------------- ----------------------------*/ @media screen and (min-width: 768px) and (max-width: 1365px) { } /* ---end laptop--*/