/* Created with ❤ By _____ _ _ _____ ___ _____ _____ _ _ / ___| | | |_ _| |_ |_ _|_ _| | | | \ `--.| |_| | | | | | | | | | | |_| | `--. \ _ | | | | | | | | | | _ | /\__/ / | | |_| |_/\__/ /_| |_ | | | | | | \____/\_| |_/\___/\____/ \___/ \_/ \_| |_/ */ /* Styles for inner pages */ /* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ /* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ #vt-hero h1 { color: #5c55a5; font-weight: 600; margin: 142px 0 0; letter-spacing: -1.5px; } #vt-hero p { color: #fff; margin: 25px 0 0; } #vt-parallax-outer::before { position: absolute; z-index: 1; background: url(../images/yellow-bg-dots.png); height: 80px; width: 234px; top: -66px; right: 180px; content: ""; } #vt-parallax-outer { margin: 109px 0 0; position: relative; } .vt-parallax { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; min-height: 960px; position: relative; z-index: 2; } #vt-desc { margin: 125px 0 0; } #vt-desc p { color: #fff; letter-spacing: 1.4px; line-height: 2; } #vt-shoot-list { margin: 140px 0 0; min-height: 300px; position: relative; } #vt-shoot-list h2, #vt-features h2 { color: #fff; margin: 14px 0 0; letter-spacing: -2px; font-weight: 600; float: left; } .shoots-filter { float: right; margin: 32px 0 0; } .shoots-filter > p { color: #ffd400; float: left; margin: 23px 25px 0 0; letter-spacing: 13.4px; } .selected-cat span { margin: 0 0 0 10px; letter-spacing: 1px; } .shoot-cats-outer { float: left; padding: 24px 24px; border: 2px solid #fff; color: #fff; min-width: 243px; position: relative; cursor: pointer; } .selected-cat i { float: right; } .cat-list li { padding: 0 0 15px; color: #000; } .cat-list { position: absolute; left: 0; top: 75px; width: 100%; border: 2px solid; right: 0; padding: 20px; box-sizing: border-box; background: #ffffff; display: none; z-index: 10; } .shoot-list-outer { float: left; width: 100%; margin: 103px 0 0; min-height: 320px; } .shoot-single { position: relative; float: left; width: 45%; margin: 0 10% 9.7% 0; overflow: hidden; } a.shoot-overlay { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: #5c55a5bf; opacity: 0; } .shoot-overlay span { position: absolute; left: 5%; text-align: center; width: 90%; transform: translate(0, -50%); top: 50%; color: #fff; } .shoot-single:hover a.shoot-overlay { opacity: 1; } .shoot-single:nth-child(2n) { margin-right: 0; } .shoot-single img { transition: .3s all linear; } .shoot-single:hover img { transform: scale(1.1); } section#vt-features { min-height: 100px; margin: 35px 0 0; padding: 124px 0 150px; /*background-image: url(../images/vt-features.jpg);*/ background-repeat: no-repeat; background-position: -2px 289px; background-color: #1d1d1d; position: relative; } section#vt-features::after { position: absolute; right: 0; top: 24%; width: 80px; background: url(../images/yellow-bg-dots.png); content: ""; height: 68%; } #vt-features h2 { float: none; display: block; } ul.features-list { float: right; width: 69%; margin: 103px 0 0; position: relative; z-index: 10; } .features-list li { color: #fff; padding: 0 0 0 27px; line-height: 1.6; float: left; width: 42%; position: relative; letter-spacing: 1.1px; margin: 0 9% 60px 0; box-sizing: border-box; } .features-list li:nth-child(2n) { margin-right: 0; } .features-list li::after { content: ""; position: absolute; left: 2px; top: 11px; width: 6px; height: 6px; background: #fdd400; } .features-list span { flex: 1; text-decoration: none; background-image: linear-gradient(to right, #5c55a5 0, #5c55a5 100%); background-position: 0 -0.1em; background-size: 0 100%; background-repeat: no-repeat; transition: background 0.5s; } .features-list li:hover span { background-size: 100% 100%; } .shoot-list-outer h4 { color: #fff; margin: 0 0 210px; font-weight: normal; letter-spacing: 1.4px; } .sw-loading { display: inline-block; position: relative; width: 80px; height: 80px; display: none; } .sw-loading div { position: absolute; border: 4px solid #fff; opacity: 1; border-radius: 50%; animation: sw-loading 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .sw-loading div:nth-child(2) { animation-delay: -0.5s; } #vt-shoot-list .sw-loading { position: absolute; top: 170px; left: 50%; transform: translate(-50%, 0); } #vt-hero h1, #vt-shoot-list h2, #vt-features h2 { font-size: 72px; } #vt-hero p { font-size: 40px; } #vt-desc p, .shoot-overlay span, .shoot-list-outer h4 { font-size: 24px; } .features-list li { font-size: 19px; } .shoots-filter > p, .shoot-cats-outer { font-size: 18px; } @keyframes sw-loading { 0% { top: 36px; left: 36px; width: 0; height: 0; opacity: 1; } 100% { top: 0px; left: 0px; width: 72px; height: 72px; opacity: 0; } } /* Responsive Styles */ @media screen and (max-width: 1800px) { } @media screen and (max-width: 1450px) { #vt-hero h1, #vt-shoot-list h2, #vt-features h2 { font-size: 60px; } #vt-hero p { font-size: 32px; } #vt-desc p, .shoot-overlay span, .shoot-list-outer h4 { font-size: 18px; } .features-list li { font-size: 15px; } .shoots-filter > p, .shoot-cats-outer { font-size: 14px; } section#vt-features { background-size: 450px auto; } .features-list li { margin: 0 9% 40px 0; } .shoot-cats-outer { padding: 17px; } .shoots-filter { margin: 16px 0 0; } #vt-shoot-list { margin: 100px 0 0; } .shoots-filter > p { letter-spacing: 8px; } .features-list li { margin: 0 4% 40px 0; } .features-list li { width: 48%; } section#vt-features::after { top: 28%; height: 59%; } .cat-list { top: 54px; } } @media screen and (max-width: 1366px) { } @media screen and (max-width: 1024px) { #vt-hero h1, #vt-shoot-list h2, #vt-features h2 { font-size: 50px; } #vt-hero p { font-size: 26px; } #vt-desc p, .shoot-overlay span, .shoot-list-outer h4 { font-size: 16px; } .features-list li { font-size: 14px; } .shoots-filter > p, .shoot-cats-outer { font-size: 13px; } #vt-hero h1 { margin: 75px 0 0; } .vt-parallax { min-height: 600px; } #vt-desc { margin: 75px 0 0; } #vt-shoot-list { margin: 30px 0 0; } .shoots-filter { width: 283px; } #vt-shoot-list h2 { max-width: 50%; } .shoots-filter > p { margin: 0 0 13px; } section#vt-features { background-image: none !important; } .vt-mob-banner { height: 300px; width: 100%; margin: 40px 0 0; background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; z-index: 10; } ul.features-list { width: 100%; margin: 70px 0 0; } .features-list li { width: 44%; } .features-list li { margin: 0 9% 40px 0; } section#vt-features { padding: 65px 0 150px; } } @media screen and (max-width: 768px) { } @media screen and (max-width: 630px) { #vt-hero h1, #vt-shoot-list h2, #vt-features h2 { font-size: 44px; } #vt-hero p { font-size: 19px; } #vt-desc p, .shoot-overlay span, .shoot-list-outer h4 { font-size: 15px; } .features-list li { font-size: 16px; } .shoots-filter > p, .shoot-cats-outer { font-size: 12px; } .shoot-overlay span { font-size: 25px; } #vt-parallax-outer { margin: 50px 0 0; } #vt-parallax-outer::before { display: none; } #vt-desc { margin: 45px 0 0; } #vt-shoot-list h2 { max-width: 100%; } .shoots-filter { margin: 26px 0 0; } .shoots-filter { float: left; } .shoot-single { width: 100%; } .cat-list li, .selected-cat span { font-size: 15px; } #vt-shoot-list .sw-loading { top: 230px; } .shoot-list-outer { margin: 50px 0 0; } section#vt-features { padding-bottom: 40px; } } @media screen and (max-width: 420px) { .features-list li { width: 80%; } .features-list li { width: 80%; margin-right: 0; } .shoot-overlay span { font-size: 20px; } .vt-parallax { min-height: 450px; } #vt-hero p { line-height: 1.5; } }