<!DOCTYPE html>
<html>
<head>
<script data-require="vue.js@2.3.3" data-semver="2.3.3" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<script data-require="vue-router@2.5.3" data-semver="2.5.3" src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.5.3/vue-router.min.js"></script>
<script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TimelineLite.min.js"></script>
<script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/plugins/CSSRulePlugin.min.js"></script>
<script data-require="gsap@*" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/plugins/ScrollToPlugin.min.js"></script>
<link rel="stylesheet" href="assets/css/global-style.css" />
<!-- <script type="script" src="main.js"></script> -->
</head>
<body class="texture-paper-bkg">
<h1>Hello Plunker!</h1>
<div v-cloak="" id="app" class="container">
<nav-corner-menu></nav-corner-menu>
<router-view></router-view>
</div>
<script type="script" src="main.js"></script>
</body>
</html>
"use babel";
// Import all your vendor libraries here/in your entry point JS file
// Also, add any other needed JS files for your main entry point
// Note you can make import statements at the top of each of your
// JS files or Vue Modules - this helps you to see what dependencies
// each file has. ** Note ** not just for JS files CSS, images, etc.
// Read each vendor's documentation on what the preferred import path is.
var styles = require('./assets/css/global-style.css');
import Vue from 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js';
import TimelineLite from '//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TimelineLite.min.js';
import CSSRulePlugin from '//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/plugins/CSSRulePlugin.min.js';
import ScrollToPlugin from '//cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/plugins/ScrollToPlugin.min.js';
import App from './App.vue';
import VueRouter from 'https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.5.3/vue-router.min.js';
import router from 'assets/js/routes.js';
import navCornerMenu from 'assets/components/nav-corner-menu.vue';
Vue.component('navcornermenu', require('assets/components/nav-corner-menu.vue'));
export const eventBus = new Vue({
methods: {
changeImage(imagesource) {
this.$emit('imageSelectChanged', imagesource);
},
},
});
// Setup some global objects/items that will persist across all new windows objects.
// By doing this when you need to use the objects/items anywhere else in the Vue
// project you will not need to make the import statement again. For Example:
window.Vue = Vue;
Vue.use(VueRouter);
window.TimelineLite = TimelineLite;
window.CSSRulePlugin = CSSRulePlugin;
window.ScrollToPlugin = ScrollToPlugin;
window.App = App;
window.styles = styles;
window.addEventListener('load', function () {
new Vue({
el: '#app',
components: { navCornerMenu },
router: router,
});
});
<template>
<div id="app" class="container">
<name-title-tag></name-title-tag>
<nav-corner-menu></nav-corner-menu>
<nav-small-list></nav-small-list>
<contact-and-prefs></contact-and-prefs>
<modal-slideshow v-if="showModal" @close="showModal = false">
</modal-slideshow>
</div>
</template>
<script>
// Import the components your template will need.
import navCornerMenu from 'assets/components/nav-corner-menu.vue';
import modalSlideshow from 'assets/components/modal-slideshow.vue';
import nameTitleTag from 'assets/components/name-title-tag.vue';
import navSmallList from 'assets/components/nav-small-list.vue';
import contactAndPrefs from 'assets/components/contact-and-prefs.vue';
export default {
name: 'app',
// tell your root component to use the child component
// If you don't tell the root component about the child component
// it doesn't know it exists, thus it can't use or do anything with it.
// Nest your imported components to let the root component know about them
// components: { Message, Counter, modalSlideshow, cornerNav, nameTitleTag, smallNavList, contactAndPrefs },
data() {
return {
// Data for your components will go here
showModal: false,
name: '',
description: '',
errors: {},
}
}, // END data
methods: {
onSubmit() {
alert('submitting');
axios.post('./projects', this.$data)
.then(response => alert('Success Form Submitted'))
.catch(error => this.errors = error.response.data);
}
}, // END methods
}; // export default
</script>
<style>
</style>
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}
/* *************************************************************** */
/* ******************* Custom Styles v00.53.75 ******************* */
/* *************************************************************** */
/* *********************************************************** */
/* Hide Vue JS content until it is ready: ; */
/* *********************************************************** */
[v-cloak] {
display: none;
}
/* ************************************************************
* IMPORTANT: All paths in CSS are prefixed with a tilde ~ *
* This is a path alias set in the webpack config file *
************************************************************* */
/* ***************************************** */
/* *************** Font Stack ************** */
/* ***************************************** */
/*
* This stylesheet generated by the CSS3 @font-face generator v2.0
* by Zoltan Hawryluk (http://www.useragentman.com).
* Latest version of this program is available at
* https://github.com/zoltan-dulac/css3FontConverter
*/
.handwritten {
font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
font-weight: 400;
font-style: normal;
color: #000;
}
.handwritten p {
font-size: 1em;}
/* ********************************* */
@media all and (max-height: 200px) {
.handwritten p {
font-size: .75em;
}
}
@media all and (min-height: 201px) and (max-height: 400px) {
.handwritten p {
font-size: .85em;
}
}
@media all and (min-height: 401px) and (max-height: 600px) {
.handwritten p {
font-size: .90em;
}
}
@media all and (min-height: 601px) {
.handwritten p {
font-size: 1.0em;
}
}
.handwritten a :link {
color: #c42127;
}
.handwritten a :visited {
color: #8D181D;
}
.handwritten a :hover {
color: #888888;
}
.handwritten a :focus {
color: #c42127;
}
a {
color: #c42127;
}
a:visited {
color: #8D181D;
}
a:hover {
color: #888888;
}
a:focus {
color: #c42127;
}
/* *********************************************************** */
/* Make sure the image path is set to go two levels out
to the "images" folder with two periods and a forward slash.
EXAMPLE - ../img/example-image
If you don't do this it will look for the image at
the root of where the CSS file resides - in this case the
CSS file is in the css folder */
/* *********************************************************** */
/* *********************************************************** */
/* ***** GreenSock Animation Note **************************** */
/* ***** A number of elments have display none or hidden ***** */
/* ***** GreenSock Animation is setting - controlling ******** */
/* ***** the display setting of these elements *************** */
/* *********************************************************** */
/*
.container {
position: relative;
width: auto;
margin: 0 auto;
overflow: scroll;
padding: 0;
}
*/
.end-spacer {
position: relative;
width: 100%;
height: 75px;
}
/* *********************************************** */
/* ***** User Selected Client Work and Modal ***** */
/* *********************************************** */
.overlay {
display: block;
position: fixed;
position: -ms-device-fixed;
width: 100%;
height: 100%;
background-image: url('https://dummyimage.com/10x10/0B20A5/0B24B5.gif&text=texture');
background-size: 50%;
background-repeat: repeat;
background-position: top left;
background-color: #090E38;
z-index: 101;
}
@media all and (min-width: 900px) and (max-width: 1000px) {
#section-content-djax,
.overlay,
.texture-paper-bkg {
background-size: 30%;
}
}
@media all and (min-width: 1001px) {
#section-content-djax,
.overlay,
.texture-paper-bkg {
background-size: 20%;
}
}
/* *************************************** */
/* ******** Title Landing - Styles ******* */
/* *************************************** */
.center-name-and-tag {
position: fixed;
position: -ms-device-fixed;
width: 100vw;
height: 100vh;
z-index: -1;
}
.name-and-tag {
position: fixed;
position: -ms-device-fixed;
display: block; /* Chnage to GreenSock block or set with Vue - Testing */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
#name-title {
width: 100vw;
font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, Helvetica, sans-serif;
line-height: .55;
font-weight: normal;
font-stretch: normal;
font-variant: normal;
font-size: 18px;
color: black;
}
@media all and (max-height: 400px) {
#name-title {
line-height: .25;
font-size: 16px;
}}
#tagline {
width: 100vw;
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
line-height: .25;
font-weight: normal;
font-stretch: normal;
font-variant: normal;
font-size: 16px;
color: black;
}
@media all and (max-height: 400px) {
#tagline {
font-size: 14px;
}}
#name-title-small {
font-family: "Trebuchet MS", Helvetica, sans-serif;
line-height: .55;
font-weight: normal;
font-stretch: normal;
font-variant: normal;
font-size: 18px;
color: #323232;
}
@media all and (max-height: 400px) {
#name-title-small {
line-height: .25;
font-size: 16px;
}}
#tagline-small {
font-family: "Courier New", Courier, monospace;
line-height: .25;
font-weight: normal;
font-stretch: normal;
font-variant: normal;
font-size: 16px;
color: #323232;
}
@media all and (max-height: 400px) {
#tagline-small {
font-size: 14px;
}}
/* ************************** */
/* ***** Nav List Small ***** */
/* ************************** */
.name-and-tag-small {
position: relative;
display: block; /* originial - hidden*/
top: 50%;
left: 50%;
width: 70%;
transform: translate(-50%, -50%);
height: 15%;
text-align: center;
}
#smallNavList {
display: block; /* GreenSock Sets Display */
position: fixed;
position: -ms-device-fixed;
overflow: scroll;
max-width: 100%;
max-height: 100%;
padding-top: 10%;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
transform: translate(-50%, -50%);
z-index: 95;
}
#smallNavListPrint,
#smallNavListBroadcast,
#smallNavListOutdoor,
#smallNavListOnline {
display: block; /* originial - hidden*/
cursor: pointer;
position: relative;
top: 10%;
left: 50%;
height: 15%;
width: 70%;
transform: translate(-50%, -50%);
margin-top: 4%;
margin-bottom: 4%;
padding: 5%;
}
/* ********************************* */
@media all and (max-height: 200px), (min-width: 500px) and (max-width: 600px) {
#smallNavListPrint,
#smallNavListBroadcast,
#smallNavListOutdoor,
#smallNavListOnline {
top: -5%;
width: 60%;
min-height: 5%;
max-height: 6%;
margin-top: 6%;
margin-bottom: 6%;
}
}
@media all and (max-height: 200px), (min-width: 500px) and (max-width: 600px) {
.name-and-tag-small {
top: 5%;
min-height: 30%;
max-height: 30%;
margin-top: 6%;
margin-bottom: 8%;
}
}
@media all and (max-height: 200px) and (max-width: 500px) {
#smallNavListPrint,
#smallNavListBroadcast,
#smallNavListOutdoor,
#smallNavListOnline {
top: -5%;
width: 60%;
min-height: 5%;
max-height: 8%;
margin-top: 6%;
}
}
@media all and (max-height: 200px) and (max-width: 500px) {
.name-and-tag-small {
top: 10%;
min-height: 30%;
max-height: 30%;
margin-top: 6%;
margin-bottom: 12%;
}
}
@media all and (min-height: 201px) and (max-height: 400px) {
#smallNavListPrint,
#smallNavListBroadcast,
#smallNavListOutdoor,
#smallNavListOnline {
top: 2%;
width: 60%;
min-height: 8%;
max-height: 10%;
margin-top: 6%;
margin-bottom: 6%;
}
}
@media all and (min-height: 201px) and (max-height: 300px) {
.name-and-tag-small {
top: 10%;
min-height: 20%;
max-height: 20%;
margin-top: 6%;
margin-bottom: 12%;
}
}
@media all and (min-height: 301px) and (max-height: 400px) {
.name-and-tag-small {
top: 10%;
min-height: 15%;
max-height: 18%;
margin-top: 6%;
margin-bottom: 14%;
}
}
@media all and (min-height: 401px) and (max-height: 600px) {
#smallNavListPrint,
#smallNavListBroadcast,
#smallNavListOutdoor,
#smallNavListOnline {
top: 5%;
width: 60%;
min-height: 10%;
max-height: 10%;
margin-top: 5%;
margin-bottom: 5%;
}
}
@media all and (min-height: 401px) and (max-height: 500px) {
.name-and-tag-small {
top: 10%;
min-height: 10%;
max-height: 14%;
margin-top: 5%;
margin-bottom: 15%;
}
}
@media all and (min-height: 501px) and (max-height: 600px) {
.name-and-tag-small {
top: 5%;
min-height: 8%;
max-height: 10%;
margin-top: 5%;
margin-bottom: 10%;
}
}
@media all and (min-height: 601px) {
#smallNavListPrint,
#smallNavListBroadcast,
#smallNavListOutdoor,
#smallNavListOnline {
top: 10%;
width: 60%;
min-height: 8%;
max-height: 9%;
margin-top: 0%;
margin-bottom: 5%;
}
}
@media all and (min-height: 601px) and (max-height: 700px) {
.name-and-tag-small {
top: 4%;
min-height: 10%;
max-height: 10%;
margin-top: 25%;
margin-bottom: 10%;
}
}
@media all and (min-height: 701px) and (max-height: 800px) {
.name-and-tag-small {
top: 5%;
min-height: 8%;
max-height: 8%;
margin-top: 30%;
margin-bottom: 12%;
}
}
@media all and (min-height: 801px) {
.name-and-tag-small {
top: 5%;
min-height: 8%;
max-height: 8%;
margin-top: 35%;
margin-bottom: 12%;
}
}
#smallNavListPrint {
background-image: url('https://dummyimage.com/100x75/ffffff/858585.gif&text=PRINT');
background-size: 55%;
background-repeat: no-repeat;
background-position: center center;
}
#smallNavListPrint:hover,
#smallNavListPrint:focus,
#smallNavListPrint:active {
background-image: url('https://dummyimage.com/100x75/D1D1D1/858585.gif&text=PRINT');
background-size: 55%;
background-repeat: no-repeat;
background-position: center center;
}
/* ********************************* */
@media all and (max-height: 300px) {
#smallNavListPrint,
#smallNavListPrint:hover,
#smallNavListPrint:focus,
#smallNavListPrint:active {
background-size: 40%;
}
}
#smallNavListBroadcast {
background-image: url('https://dummyimage.com/100x75/ffffff/858585.gif&text=VIDEO');
background-size: 50%;
background-repeat: no-repeat;
background-position: center center;
}
#smallNavListBroadcast:hover,
#smallNavListBroadcast:focus,
#smallNavListBroadcast:active {
background-image: url('https://dummyimage.com/100x75/D1D1D1/858585.gif&text=VIDEO');
background-size: 50%;
background-repeat: no-repeat;
background-position: center center;
}
/* ********************************* */
@media all and (max-height: 300px) {
#smallNavListBroadcast,
#smallNavListBroadcast:hover,
#smallNavListBroadcast:focus,
#smallNavListBroadcast:active {
background-size: 35%;
}
}
#smallNavListOutdoor {
background-image: url('https://dummyimage.com/100x75/ffffff/858585.gif&text=OUTDOOR');
background-size: 75%;
background-repeat: no-repeat;
background-position: center center;
}
#smallNavListOutdoor:hover,
#smallNavListOutdoor:focus,
#smallNavListOutdoor:active {
background-image: url('https://dummyimage.com/100x75/D1D1D1/858585.gif&text=OUTDOOR');
background-size: 75%;
background-repeat: no-repeat;
background-position: center center;
}
/* ********************************* */
@media all and (max-height: 300px) {
#smallNavListOutdoor,
#smallNavListOutdoor:hover,
#smallNavListOutdoor:focus,
#smallNavListOutdoor:active {
background-size: 55%;
}
}
#smallNavListOnline {
background-image: url('https://dummyimage.com/100x75/ffffff/858585.gif&text=ONLINE');
background-size: 75%;
background-repeat: no-repeat;
background-position: center center;
}
#smallNavListOnline:hover,
#smallNavListOnline:focus,
#smallNavListOnline:active {
background-image: url('https://dummyimage.com/100x75/D1D1D1/858585.gif&text=ONLINE');
background-size: 75%;
background-repeat: no-repeat;
background-position: center center;
}
/* ********************************* */
@media all and (max-height: 300px) {
#smallNavListOnline,
#smallNavListOnline:hover,
#smallNavListOnline:focus,
#smallNavListOnline:active {
background-size: 53%;
}
}
/* *********************** */
/* ***** Main Styles ***** */
/* *********************** */
.texture-paper-bkg {
overflow: hidden;
position: fixed;
position: -ms-device-fixed;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-image: url('https://dummyimage.com/10x10/999999/858585.gif&text=texture');
background-size: 50%; /* Background Size adjusted by Media Query - See .overlay class */
background-repeat: repeat;
background-position: top left;
background-color: #afafaf;
}
nav > div {
position: fixed;
position: -ms-device-fixed;
display: block;
background: none;
width: 180px;
height: 150px;
}
/* ********************************* */
@media all and (max-height: 200px) {
nav > div {
width: 150px;
height: 125px;
}
}
@media all and (min-height: 201px) and (max-height: 400px) {
nav > div {
width: 200px;
height: 166px;
}
}
@media all and (min-height: 401px) and (max-height: 600px) {
nav > div {
width: 225px;
height: 187px;
}
}
@media all and (min-height: 601px) {
nav > div {
width: 300px;
height: 250px;
}
}
#closeAndSendBack,
.linkSpace {
cursor: pointer;
}
.linkSpaceClick {
position: absolute;
cursor: pointer;
overflow: hidden;
background-image: url('~img/blank-placeholder.gif');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-color: none;
z-index: 99;
}
.linkSpacePrint {
right: 0;
bottom: 0;
width: 700px;
height: 521px;
}
.linkSpaceBroadcast {
left: 0;
bottom: 0;
width: 700px;
height: 488px;
}
.linkSpaceOutdoor {
right: 0;
top: 0;
width: 700px;
height: 705px;
}
.linkSpaceOnline {
left: 0;
top: 0;
width: 700px;
height: 564px;
}
nav > #print {
display: block;
left: -16%;
top: -12%;
transform: rotate(15deg);
background-image: url('https://dummyimage.com/100x75/ffffff/858585.gif&text=print-pad');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
/* ********************************* */
#print-title {
/* background-image: url('../img/print-full-placeholder.gif'); */
background-image: url('https://dummyimage.com/100x75/ffffff/858585.gif&text=PRINT');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
z-index: 5;
}
#print:hover #print-title,
#print:focus #print-title,
#print:active #print-title {
z-index: 6;
background-image: url('https://dummyimage.com/100x75/000000/858585.gif&text=PRINT') !important;
} /* Note you need !important to overide the background image set by javascript */
/* Note not all browsers allow for this so the previous CSS hover is a fallback */
nav > #broadcast {
display: block;
right: -16%;
top: -12%;
transform: rotate(-15deg);
background-image: url('https://dummyimage.com/100x75/ffffff/858585.gif&text=video-envelope');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
/* ********************************* */
#broadcast-title {
/* background-image: url('../img/title-video-full-placeholder.gif'); */
background-image: url('https://dummyimage.com/100x75/ffffff/858585.gif&text=VIDEO');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
z-index: 5;
}
#broadcast:hover #broadcast-title,
#broadcast:focus #broadcast-title,
#broadcast:active #broadcast-title {
z-index: 6;
background-image: url('https://dummyimage.com/100x75/000000/858585.gif&text=VIDEO') !important;
} /* Note you need !important to overide the background image set by javascript */
/* Note not all browsers allow for this so the previous CSS hover is a fallback */
nav > #outdoor {
display: block;
left: -12%;
bottom: -12%;
transform: rotate(-15deg);
background-image: url('https://dummyimage.com/100x75/ffffff/858585.gif&text=outdoor-napkin');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
/* ********************************* */
#outdoor-title {
/* background-image: url('../img/title-outdoor-full-placeholder.gif'); */
background-image: url('https://dummyimage.com/100x75/ffffff/858585.gif&text=OUTDOOR');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
z-index: 5;
}
#outdoor:hover #outdoor-title,
#outdoor:focus #outdoor-title,
#outdoor:active #outdoor-title {
z-index: 6;
background-image: url('https://dummyimage.com/100x75/ffffff/858585.gif&text=OUTDOOR') !important;
} /* Note you need !important to overide the background image set by javascript */
/* Note not all browsers allow for this so the previous CSS hover is a fallback */
nav > #online {
display: block;
bottom: -12%;
right: -16%;
transform: rotate(15deg);
background-image: url('https://dummyimage.com/100x75/ffffff/858585.gif&text=online-graph');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
/* ********************************* */
#online-title {
/* background-image: url('../img/title-online-full-placeholder.gif'); */
background-image: url('https://dummyimage.com/100x75/ffffff/858585.gif&text=ONLINE');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
z-index: 5;
}
#online:hover #online-title,
#online:focus #online-title,
#online:active #online-title {
z-index: 6;
background-image: url('https://dummyimage.com/100x75/ffffff/858585.gif&text=ONLINE') !important;
} /* Note you need !important to overide the background image set by javascript */
/* Note not all browsers allow for this so the previous CSS hover is a fallback */
@media all and (min-width: 501px)
and (max-width: 1200px), (max-height: 500px) {
nav > #print {
left: -12%;
top: -12%;
}
nav > #broadcast {
right: -13%;
top: -12%;
}
nav > #outdoor {
left: -8%;
bottom: -12%;
}
nav > #online {
right: -12%;
bottom: -12%;
}
}
@media all and (min-width: 1200px)
and (max-width: 2300px), (min-height: 501px) and (max-height: 601px) {
nav > #print {
left: -8%;
top: -12%;
}
nav > #broadcast {
right: -7%;
top: -12%;
}
nav > #outdoor {
left: -5%;
bottom: -12%;
}
nav > #online {
right: -6%;
bottom: -12%;
}
}
@media all and (min-width: 2301px), (min-height: 601px) {
nav > #print {
left: -4%;
top: -12%;
}
nav > #broadcast {
right: -4%;
top: -12%;
}
nav > #outdoor {
left: -2%;
bottom: -12%;
}
nav > #online {
right: -3%;
bottom: -12%;
}
}
/* ********************************* */
/*
@media all and (max-height: 200px) {
nav > #print {
left: -4%;
top: -12%;
}
nav > #broadcast {
right: -4%;
top: -12%;
}
nav > #outdoor {
left: -2%;
bottom: -12%;
}
nav > #online {
right: -3%;
bottom: -12%;
}
}
@media all and (min-height: 201px) and (max-height: 400px) {
nav > #print {
left: -4%;
top: -12%;
}
nav > #broadcast {
right: -4%;
top: -12%;
}
nav > #outdoor {
left: -2%;
bottom: -12%;
}
nav > #online {
right: -3%;
bottom: -12%;
}
}
@media all and (min-height: 401px) and (max-height: 600px) {
nav > #print {
left: -9%;
top: -12%;
}
nav > #broadcast {
right: -8%;
top: -12%;
}
nav > #outdoor {
left: -7%;
bottom: -12%;
}
nav > #online {
right: -8%;
bottom: -12%;
}
}
@media all and (min-height: 601px) {
nav > #print {
left: -4%;
top: -12%;
}
nav > #broadcast {
right: -4%;
top: -12%;
}
nav > #outdoor {
left: -2%;
bottom: -12%;
}
nav > #online {
right: -3%;
bottom: -12%;
}
}
*/
/* *************************************************** */
/* ************ Locked Login Modal Overlay *********** */
/* *************************************************** */
.password-modal {
position: absolute;
display: block; /* set by GSAP */
opacity: 1; /* set by GSAP */
width: 100%;
height: 100%;
max-width: 100vw;
bottom: 0;
background-color: rgba(0,0,0,.85);
z-index: 105;
}
.log-in-form {
position: absolute;
display: block;
opacity: 1;
top: 50%;
left: 50%;
width: 80%;
height: auto;
transform: translate(-50%, -50%);
}
.password-modal > form > label {
width: 100%;
color: #6D6E70;
opacity: 1;
}
.password-modal > form > label > input {
background-color: #A0A1A3;
margin-bottom: .25rem;
}
.password-modal > form > p {
width: 80%;
margin-right: 10%;
margin-left: 10%;
}
.password-modal > form > p > input.button {
background-color: #c42127;
border: solid 1px #c42127;
}
.password-modal > form > p > input.button:active,
.password-modal > form > p > input.button:focus,
.password-modal > form > p > input.button:hover {
background-color: #93191E;
border: solid 1px #93191E;
}
.password-modal > form > p > a.cancelMe {
background-color: rgba(0,0,0,.01);
color: #c42127;
border: solid 1px #c42127;
}
.password-modal > form > p > a.cancelMe:active,
.password-modal > form > p > a.cancelMe:focus,
.password-modal > form > p > a.cancelMe:hover {
background-color: #93191E;
border: solid 1px #93191E;
color: white;
}
@media all and (max-width: 40em) {
.log-in-form {
width: 80%;
}
}
@media all and (min-width: 40.063em) and (max-width: 90em) {
.log-in-form{
width: 25%;
}
}
@media all and (min-width: 90.063em) {
.log-in-form {
width: 15%;
}
}
label.passwordResponse {
cursor: default;
height: 1.5rem;
font-size: .9rem;
font-style: italic;
color: white;
margin-top: 0;
margin-bottom: .35rem;
}
/* ***************************************************************** */
/* ******** Industry Preferences and Contact Info Folder Tab ******* */
/* ***************************************************************** */
#default-settings {
margin-top: 1.25rem;
margin-bottom: .25rem;
}
.pref-button {
border: solid 1px #3c3c3c;
opacity: .3;
background: none;
padding: .35rem;
margin-bottom: 1rem;
margin-left: .5rem;
text-shadow: -.3px 0 #3c3c3c, 0 .3px #3c3c3c, .3px 0 #3c3c3c, 0 -.3px #3c3c3c;
transform: translate(0);
}
.button-selected {
border: solid 1px #c42127;
color: #c42127;
opacity: 1;
text-shadow: -.3px 0 #c42127, 0 .3px #c42127, .3px 0 #c42127, 0 -.3px #c42127;
transform: translate(0);
}
.button-selected:hover,
.button-selected:focus,
.button-selected:active {
color: white;
background-color: #c42127;
text-shadow: -.3px 0 white, 0 .3px white, .3px 0 white, 0 -.3px white;
transform: translate(0);
}
.scroll-area {
position: absolute;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
fieldset > label > input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
background-color: none;
border: solid 1px #3c3c3c;
opacity: .3;
width: .8rem;
height: .8rem;
margin-right: -0.2rem;
margin-bottom: -.1rem;
}
fieldset > label > input[type="checkbox"]:checked {
background-color:#c42127;
border: solid 1px #c42127;
opacity: 1;
}
label {
cursor: pointer;
display: inline-block;
white-space:nowrap;
margin-right: -0.8rem;
}
.wrappable {
white-space:normal;
}
.form-section {
margin-bottom: 5px;
}
.form-section legend {
width: 100%;
margin-bottom: -.75rem;
margin-left: 0;
margin-right: 0;
padding:0;
}
.overlay-prefs-tab {
display: block; /* GreenSock Sets Display */
position: fixed;
position: -ms-device-fixed;
width: 100%;
height: 100%;
background-color: #000000;
z-index: 99; /* Behind - #contact-prefs z-index: 100 */
}
.inner-contact-pref-wrap {
position: absolute;
display: block;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
max-width: 90vw;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
@media all and (max-width: 540px) {
.inner-contact-pref-wrap {
width: 100%;
max-width: 90vw;
}
}
@media all and (min-width: 541px) {
.inner-contact-pref-wrap {
width: 85%;
max-width: 600px;
}
}
p.note {
font-size: .75rem;
margin-top: -2.75rem;
margin-bottom: -0.1rem;
}
#which-industry {
margin-bottom: .6rem;
}
#default-settings > label {
margin-top: .75rem;
margin-right: 0rem;
color: #3c3c3c;
text-shadow: -.3px 0 #3c3c3c, 0 .3px #3c3c3c, .3px 0 #3c3c3c, 0 -.3px #3c3c3c;
transform: translate(0);
}
fieldset.columns {
padding-left: 0;
padding-right: 0;
}
#default-settings,
fieldset > label,
a #contact-prefs:link,
p.note,
#contact-prefs p {
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
font-weight: 400;
font-style: normal;
color: #000;
padding-left: 3%;
padding-right: 3%;
text-align: left;
line-height: 1.5;
}
a #contact-prefs:visited {
color: #777777;
}
a #contact-prefs:hover {
color: #bf0100;
}
#note span,
#contact-prefs p,
#contact-prefs h1,
#contact-prefs h2,
#contact-prefs h3,
#contact-prefs h4 {
color: #000;
line-height: 1.3;
padding-bottom: 0;
text-align: left;
padding: 3%;
}
#contact-prefs h1 {
font-size: 2em;
}
#contact-prefs h1,
#contact-prefs h2,
#contact-prefs h3,
#contact-prefs h4 {
margin-bottom: -2.0rem;
}
#contact-prefs {
display: block; /* block; /* GreenSock Sets Display */
opacity: 1; /* originaly 0 */
position: fixed;
position: -ms-device-fixed;
bottom: 0;
width: 100%;
height:48px;
background-image: url('https://dummyimage.com/100x300/ffffff/858585.gif&text=Folder-TabR');
background-size: 100%;
background-repeat: no-repeat;
/* background-position: center top 50px; /* GreenSock Sets background-position */
background-color: none;
padding-top: 0%;
overflow: hidden;
z-index: 100;
}
@media all and (min-width: 701px) {
#contact-prefs {
background-size: 700px;
}
}
#contact-prefs:hover,
#contact-prefs:focus,
#contact-prefs:active {
}
@media all and (max-width: 540px) {
#contact-prefs {
width: 100%;
margin-left: 0;
margin-right: 0;
background-size: 160%;
}
#contact-prefs h4 {
font-size: 1.3rem;
margin-bottom: -1.5rem;
}
}
@media all and (max-width: 540px) {
.form-section p {
font-size: .9rem;
}
}
@media all and (max-width: 540px) {
p.note {
font-size: .75rem;
margin-top: -2.1rem;
line-height: 1.3;
}
}
@media all and (min-width: 541px) {
#contact-prefs {
width: 90%;
margin-left: 5%;
margin-right: 0;
}
}
.tab-title {
position: relative;
display: block;
text-align: center;
opacity: .65;
left:50%;
top: 0;
width: 100%;
height: auto;
max-height: 60px;
transform: translate(-50%, -10%);
max-width: 700px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
margin-bottom: 4%;
-webkit-transition: opacity .5s ease;
-moz-transition: opacity .5s ease;
-o-transition: opacity .5s ease;
transition: opacity .5s ease;
}
#contact-prefs-tab-center-wrap {
background-color: white;
border: solid 10px white;
border-radius: 2rem 2rem 0 0;
padding: 0;
width: 37%;
margin-left: auto;
margin-right: auto;
}
#contact-prefs-tab-center {
cursor: pointer;
width: 35%;
height: 100%;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 700px;
padding-top: 3%;
padding-right: 1%;
}
#contact-prefs-tab-center:hover,
#contact-prefs-tab-center:focus,
#contact-prefs-tab-center:active {
background-image: url('https://dummyimage.com/10x75/C30400/858585.gif&text=underline');
background-size: 100% 150%;
background-repeat: no-repeat;
background-position: 50% 15%;
}
.tab-title:hover,
.tab-title:focus,
.tab-title:active,
#contact-prefs-tab-outter:hover,
#contact-prefs-tab-outter:focus,
#contact-prefs-tab-outter:active {
opacity: 1;
}
@media all and (max-width: 540px) {
#smallNavListPrefs > span > h5 {
font-size: 1.1rem;
}
#smallNavListPrefs > span {
width: 45%;
}
#contact-prefs-tab-center:hover,
#contact-prefs-tab-center:focus,
#contact-prefs-tab-center:active {
background-size: 75% 200%;
background-repeat: no-repeat;
background-position: 40% 30%;
}
#smallNavContactPrefs:hover,
#smallNavContactPrefs:focus,
#smallNavContactPrefs:active {
background-size: 105% 200%;
background-repeat: no-repeat;
background-position: 55% 40%;
}
}
@media all and (max-width: 540px) {
#contact-prefs-tab-center {
width: 45%;
margin-top: 2%;
}
#contact-prefs-tab-center:hover,
#contact-prefs-tab-center:focus,
#contact-prefs-tab-center:active {
background-size: 100% 200%;
background-repeat: no-repeat;
background-position: 50% 40%;
}
}
/* ****************************************************** */
/* ****** Nav Maintain Image Aspect Ratio on Scale ****** */
/* ****************************************************** */
/* *********************************************
This cetners and scales the Nav Animated Gifs
Note this CSS class must be listed after the
other corner nav CSS class anf ID declarations
otherwise the center image and Title Gifs will
not display properly
********************************************** */
.centerImg {
position: absolute;
max-width:100%;
width:100%;
height:100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* **************************************** */
/* ****** Main Section Animated Gifs ****** */
/* **************************************** */
.linkSpacePrint,
.linkSpaceBroadcast,
.linkSpaceOutdoor,
.linkSpaceOnline,
#sectionAnimationHeroPrint,
#sectionAnimationHeroBroadcast,
#sectionAnimationHeroOutdoor,
#sectionAnimationHeroOnline,
#heroAnimationHoverPrint,
#heroAnimationHoverBroadcast,
#heroAnimationHoverOutdoor,
#heroAnimationHoverOnline {
position: absolute;
max-width:100%;
max-height:100%;
width:100%;
height:100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* background-image: url(see javascript); */
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.linkSpacePrint:hover, .linkSpacePrint:focus, .linkSpacePrint:active {
z-index: 6;
background-image: url('https://dummyimage.com/100x75/C30400/858585.gif&text=print') !important;
background-size: 101%;
background-position: 700% 300%;
}
.linkSpaceBroadcast:hover, .linkSpaceBroadcast:focus, .linkSpaceBroadcast:active {
z-index: 6;
background-image: url('https://dummyimage.com/100x75/C30400/858585.gif&text=video') !important;
background-size: 101%;
background-position: -600% -100%;
}
.linkSpaceOutdoor:hover, .linkSpaceOutdoor:focus, .linkSpaceOutdoor:active {
z-index: 6;
background-image: url('https://dummyimage.com/100x75/C30400/858585.gif&text=outdoor') !important;
background-size: 101%;
background-position: 700% -150%;
}
.linkSpaceOnline:hover, .linkSpaceOnline:focus, .linkSpaceOnline:active {
z-index: 6;
background-image: url('https://dummyimage.com/100x75/C30400/858585.gif&text=online') !important;
background-size: 101%;
background-position: -700% -150%;
}
/* ******************************************************* */
/* ************** Section Content Container ************** */
/* ******** Dynamically Loaded By GSAP - Pjax/dJax ******* */
/* ******************************************************* */
#closeSection {
position: fixed;
position: -ms-device-fixed;
display: block; /* GreenSock Sets Display */
cursor: pointer;
top: 0;
right: 0;
width: 60px;
height: 60px;
margin-top: 5px;
margin-right: 7px;
background-image: url('https://dummyimage.com/50x50/C30400/858585.gif&text=close');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-color: none;
border: none;
}
.closeSectionModal {
position: fixed;
position: -ms-device-fixed;
display: block;
opacity: 1;
cursor: pointer;
top: 0;
right: 0;
border: 1px solid #114469;
color: #114469;
background-color: none;
-webkit-transition: background-color .25s ease-out;
-moz-transition: background-color .25s ease-out;
-o-transition: background-color .25s ease-out;
transition: background-color .25s ease-out;
z-index: 999;
}
.closeSectionModal > div {
position: absolute;
text-align: center;
width: 100%;
top: 50%;
margin: auto;
transform: perspective(1px) translateY(-50%);
}
#closeSection:hover,
#closeSection:focus,
#closeSection:active {
background-image: url('https://dummyimage.com/50x50/C30400/C30400.gif&text=close');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
@media all and (min-width: 401px) {
#closeSection {
margin-top: 8px;
margin-right: 10px;
width: 70px;
height: 70px;
}
}
@media all and (max-width: 400px) {
.closeSectionModal {
margin-top: 18px;
margin-right: 19px;
width: 37px;
height: 37px;
font-size: 2em;
padding-bottom: .16em;
}
.modalNav ul{
margin-top: 23px;
}
.modalNav ul li {
margin-right: 10px;
}
}
@media all and (min-width: 401px) {
.closeSectionModal {
margin-top: 25px;
margin-right: 25px;
width: 39px;
height: 39px;
font-size: 1.75em;
padding-bottom: .16em;
}
.modalNav ul{
margin-top: 23px;
}
.modalNav ul li {
margin-tright: 15px;
}
}
.closeSectionModal:hover,
.closeSectionModal:focus,
.closeSectionModal:active {
background-color: #08385d;
border: 1px solid #C00000;
}
/*
#section-wrap {
position: fixed;
position: -ms-device-fixed;
display: none; /* GreenSock Sets Display */
/* width: 100%;
height: 100%;
left: 0;
top: 0;
overflow: scroll;
z-index: 100;
}
*/
#section-hero-djax-image {
position: relative;
top: 50%;
left: 50%;
width: 100%;
height: auto;
max-width: 100%;
max-height: auto;
transform: translate(-50%, -50%);
/* background-image: url(see javascript); */
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.section-hero-djax-image-print {
background-image: url('https://dummyimage.com/100x75/000000/858585.gif&text=print-hero');
}
.section-hero-djax-image-broadcast {
background-image: url('https://dummyimage.com/100x75/000000/858585.gif&text=video-hero');
}
.section-hero-djax-image-outdoor {
background-image: url('https://dummyimage.com/100x75/000000/858585.gif&text=outdoor-hero');
}
.section-hero-djax-image-online {
background-image: url('https://dummyimage.com/100x75/000000/858585.gif&text=online-hero');
}
.image-print-crop {
position: relative;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
transform: translate(-50%, -50%);
background-image: url('https://dummyimage.com/100x75/000000/858585.gif&text=print-crop');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.image-print-crop-hover {
position: relative;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
transform: translate(-50%, -50%);
background-image: url('https://dummyimage.com/100x75/000000/858585.gif&text=print-hover');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.image-print-crop-hover:hover, .image-print-crop-hover:focus, .image-print-crop-hover:active {
z-index: 6;
background-image: url('https://dummyimage.com/100x75/000000/858585.gif&text=print-hover');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.image-broadcast-crop {
position: relative;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
transform: translate(-50%, -50%);
background-image: url('https://dummyimage.com/100x75/000000/858585.gif&text=video-crop');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.image-broadcast-crop-hover {
position: relative;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
transform: translate(-50%, -50%);
background-image: url('https://dummyimage.com/100x75/000000/858585.gif&text=video-hover');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.image-broadcast-crop-hover:hover, .image-broadcast-crop-hover:focus, .image-broadcast-crop-hover:active {
z-index: 6;
background-image: url('https://dummyimage.com/100x75/000000/858585.gif&text=video-hover');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.image-outdoor-crop {
position: relative;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
transform: translate(-50%, -50%);
background-image: url('https://dummyimage.com/100x75/000000/858585.gif&text=outdoor-crop');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.image-outdoor-crop-hover {
position: relative;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
transform: translate(-50%, -50%);
background-image: url('https://dummyimage.com/100x75/000000/858585.gif&text=outdoor-hover');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.image-outdoor-crop-hover:hover, .image-outdoor-crop-hover:focus, .image-outdoor-crop-hover:active {
z-index: 6;
background-image: url('https://dummyimage.com/100x75/000000/858585.gif&text=outdoor-hover');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.image-online-crop {
position: relative;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
transform: translate(-50%, -50%);
background-image: url('https://dummyimage.com/100x75/000000/858585.gif&text=online-crop');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.image-online-crop-hover {
position: relative;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
transform: translate(-50%, -50%);
background-image: url('https://dummyimage.com/100x75/000000/858585.gif&text=online-hover');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.image-online-crop-hover:hover, .image-online-crop-hover:focus, .image-online-crop-hover:active {
z-index: 6;
background-image: url('https://dummyimage.com/100x75/000000/858585.gif&text=online-hover');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
.noTransform {
-webkit-transform: none;
transform: none;
}
#section-content-djax {
position: absolute;
display: block; /* GreenSock Sets Display */
opacity: 1;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
overflow: scroll;
/* top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
/* background-image set by GreenSock */
/* background-size: 50%;
background-repeat: repeat;
background-position: top left; */
}
.section-content-wrap{
position: absolute;
width: 100%;
}
/* Dynamically Created Div with GSAP */
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
position: absolute;
max-width: 700px;
left: 50%;
transform: translate(-50%, 0%);
margin-top: 5%;
}
/* ************ Main Section Width ************* */
@media all and (max-width: 40em) {
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
max-width: 230px;
}
}
@media all and (max-width: 40em) {
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
margin-right: 0;
}
}
.update-nthChild-small {
margin-right: 0;
}
@media all and (min-width: 40.063em) and (max-width: 90em) {
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
max-width: 650px;
}
}
@media all and (min-width: 40.063em) and (max-width: 90em) {
#section-content-print div:nth-child(odd),
#section-content-broadcast div:nth-child(odd),
#section-content-outdoor div:nth-child(odd),
#section-content-online div:nth-child(odd) {
margin-right: .75rem;
}
}
.update-nthChild-med div:nth-child(odd) {
margin-right: .75rem;
}
@media all and (min-width: 90.063em) {
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
max-width: 700px;
}
}
@media all and (min-width: 90.063em) {
#section-content-print div:nth-child(3n+3),
#section-content-broadcast div:nth-child(3n+3),
#section-content-outdoor div:nth-child(3n+3),
#section-content-online div:nth-child(3n+3) {
margin-right: .75rem;
}
}
.update-nthChild-large div:nth-child(3n+3) {
margin-right: .75rem;
}
/* ************** Max Height 200px ************** */
@media all and (max-height: 200px)
and (max-width: 500px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 40vw;
height: 90vh;
}
#section-content-print {
margin-top: 4%;
}
#section-content-broadcast {
margin-top: 4%;
}
#section-content-outdoor {
margin-top: 4%;
}
#section-content-online {
margin-top: 4%;
}
}
@media all and (max-height: 200px)
and (min-width: 501px)
and (max-width: 800px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 70vw;
height: 90vh;
}
#section-content-print {
margin-top: .5%;
}
#section-content-broadcast {
margin-top: .5%;
}
#section-content-outdoor {
margin-top: 1%;
}
#section-content-online {
margin-top: .5%;
}
}
@media all and (max-height: 200px)
and (min-width: 801px)
and (max-width: 900px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 90vw;
height: 90vh;
}
#section-content-print {
margin-top: 1%;
}
#section-content-broadcast {
margin-top: 1%;
}
#section-content-outdoor {
margin-top: 2%;
}
#section-content-online {
margin-top: 1%;
}
}
@media all and (max-height: 200px)
and (min-width: 901px)
and (max-width: 1024px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 90vw;
height: 90vh;
}
#section-content-print {
margin-top: 2%;
}
#section-content-broadcast {
margin-top: 2%;
}
#section-content-outdoor {
margin-top: 3%;
}
#section-content-online {
margin-top: 2%;
}
}
@media all and (max-height: 200px)
and (min-width: 1025px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 90vw;
height: 90vh;
}
#section-content-print {
margin-top: 1%;
}
#section-content-broadcast {
margin-top: 1%;
}
#section-content-outdoor {
margin-top: 2%;
}
#section-content-online {
margin-top: 1%;
}
}
/* ************** Min Height 201px ************** */
@media all and (min-height: 201px)
and (max-width: 500px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 80vw;
height: 80vh;
}
#section-content-print {
margin-top: 3%;
}
#section-content-broadcast {
margin-top: 3%;
}
#section-content-outdoor {
margin-top: 7%;
}
#section-content-online {
margin-top: 3%;
}
}
@media all and (min-height: 201px)
and (min-width: 501px)
and (max-width: 800px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 80vw;
height: 80vh;
}
#section-content-print {
margin-top: 4%;
}
#section-content-broadcast {
margin-top: 4%;
}
#section-content-outdoor {
margin-top: 8%;
}
#section-content-online {
margin-top: 4%;
}
}
@media all and (min-height: 201px)
and (min-width: 801px)
and (max-width: 900px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 80vw;
height: 80vh;
}
#section-content-print {
margin-top: 3%;
}
#section-content-broadcast {
margin-top: 4%;
}
#section-content-outdoor {
margin-top: 6%;
}
#section-content-online {
margin-top: 3%;
}
}
@media all and (min-height: 201px)
and (min-width: 901px)
and (max-width: 1024px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 80vw;
height: 80vh;
}
#section-content-print {
margin-top: 3%;
}
#section-content-broadcast {
margin-top: 4%;
}
#section-content-outdoor {
margin-top: 5%;
}
#section-content-online {
margin-top: 4%;
}
}
@media all and (min-height: 201px)
and (min-width: 1025px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 80vw;
height: 80vh;
}
#section-content-print {
margin-top: 3%;
}
#section-content-broadcast {
margin-top: 3%;
}
#section-content-outdoor {
margin-top: 3.5%;
}
#section-content-online {
margin-top: 3%;
}
}
/* ************** Min Height 401px ************** */
@media all and (min-height: 401px)
and (max-width: 500px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 70vw;
height: 70vh;
}
#section-content-print {
margin-top: 7%;
}
#section-content-broadcast {
margin-top: 7%;
}
#section-content-outdoor {
margin-top: 14%;
}
#section-content-online {
margin-top: 9%;
}
}
@media all and (min-height: 401px)
and (min-width: 501px)
and (max-width: 800px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 70vw;
height: 70vh;
}
#section-content-print {
margin-top: 9%;
}
#section-content-broadcast {
margin-top: 9%;
}
#section-content-outdoor {
margin-top: 11%;
}
#section-content-online {
margin-top: 11%;
}
}
@media all and (min-height: 401px)
and (min-width: 801px)
and (max-width: 900px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 70vw;
height: 70vh;
}
#section-content-print {
margin-top: 7%;
}
#section-content-broadcast {
margin-top: 8%;
}
#section-content-outdoor {
margin-top: 9%;
}
#section-content-online {
margin-top: 8%;
}
}
@media all and (min-height: 401px)
and (min-width: 901px)
and (max-width: 1024px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 70vw;
height: 70vh;
}
#section-content-print {
margin-top: 7%;
}
#section-content-broadcast {
margin-top: 7%;
}
#section-content-outdoor {
margin-top: 7.5%;
}
#section-content-online {
margin-top: 7%;
}
}
@media all and (min-height: 401px)
and (min-width: 1025px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 70vw;
height: 70vh;
}
#section-content-print {
margin-top: 5%;
}
#section-content-broadcast {
margin-top: 5%;
}
#section-content-outdoor {
margin-top: 6%;
}
#section-content-online {
margin-top: 4.5%;
}
}
/* ************** Min Height 601px ************** */
@media all and (min-height: 601px)
and (max-width: 500px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 65vw;
height: 65vh;
}
#section-content-print {
margin-top: -6%;
}
#section-content-broadcast {
margin-top: -5%;
}
#section-content-outdoor {
margin-top: -1%;
}
#section-content-online {
margin-top: -4%;
}
}
@media all and (min-height: 601px)
and (min-width: 501px)
and (max-width: 600px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 65vw;
height: 65vh;
}
#section-content-print {
margin-top: 3%;
}
#section-content-broadcast {
margin-top: 4%;
}
#section-content-outdoor {
margin-top: 14%;
}
#section-content-online {
margin-top: 6%;
}
}
@media all and (min-height: 601px)
and (min-width: 601px)
and (max-width: 700px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 65vw;
height: 65vh;
}
#section-content-print {
margin-top: 6%;
}
#section-content-broadcast {
margin-top: 6%;
}
#section-content-outdoor {
margin-top: 16%;
}
#section-content-online {
margin-top: 9%;
}
}
@media all and (min-height: 601px)
and (min-width: 701px)
and (max-width: 800px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 65vw;
height: 65vh;
}
#section-content-print {
margin-top: 8%;
}
#section-content-broadcast {
margin-top: 8%;
}
#section-content-outdoor {
margin-top: 18%;
}
#section-content-online {
margin-top: 11%;
}
}
@media all and (min-height: 601px)
and (min-width: 801px)
and (max-width: 900px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 65vw;
height: 65vh;
}
#section-content-print {
margin-top: 10%;
}
#section-content-broadcast {
margin-top: 10%;
}
#section-content-outdoor {
margin-top: 15%;
}
#section-content-online {
margin-top: 13%;
}
}
@media all and (min-height: 601px)
and (min-width: 901px)
and (max-width: 1024px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 65vw;
height: 65vh;
}
#section-content-print {
margin-top: 10%;
}
#section-content-broadcast {
margin-top: 10%;
}
#section-content-outdoor {
margin-top: 14%;
}
#section-content-online {
margin-top: 12%;
}
}
@media all and (min-height: 601px)
and (min-width: 1025px)
and (max-width: 1124px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 65vw;
height: 65vh;
}
#section-content-print {
margin-top: 9%;
}
#section-content-broadcast {
margin-top: 9%;
}
#section-content-outdoor {
margin-top: 13%;
}
#section-content-online {
margin-top: 10%;
}
}
@media all and (min-height: 601px)
and (min-width: 1125px)
and (max-width: 1224px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 65vw;
height: 65vh;
}
#section-content-print {
margin-top: 9%;
}
#section-content-broadcast {
margin-top: 9%;
}
#section-content-outdoor {
margin-top: 11%;
}
#section-content-online {
margin-top: 10%;
}
}
@media all and (min-height: 601px)
and (min-width: 1225px)
and (max-width: 1324px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 65vw;
height: 65vh;
}
#section-content-print {
margin-top: 9%;
}
#section-content-broadcast {
margin-top: 9%;
}
#section-content-outdoor {
margin-top: 10%;
}
#section-content-online {
margin-top: 10%;
}
}
@media all and (min-height: 601px)
and (min-width: 1325px)
and (max-width: 1424px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 65vw;
height: 65vh;
}
#section-content-print {
margin-top: 8%;
}
#section-content-broadcast {
margin-top: 9%;
}
#section-content-outdoor {
margin-top: 9%;
}
#section-content-online {
margin-top: 9%;
}
}
@media all and (min-height: 601px)
and (min-width: 1425px) {
#section-hero-djax-image,
#section-content-print,
#section-content-broadcast,
#section-content-outdoor,
#section-content-online {
width: 65vw;
height: 65vh;
}
#section-content-print {
margin-top: 7%;
}
#section-content-broadcast {
margin-top: 8%;
}
#section-content-outdoor {
margin-top: 8%;
}
#section-content-online {
margin-top: 8%;
}
}
/* *************************************************** */
/* ************** Box Frames For Photos ************** */
/* *************************************************** */
.justifyContent {
text-align: center;
font-size: 1em; /* IE 9 & 10 don't like font-size: 0; */
}
/* This causes reflow isusues with the */
/* showOrHide setting set by the Preference-Contact Tab */
.justifyContent div {
/* width: 20%; */
/* height: auto; */
/* display: inline-block; */
}
.justifyContent:after {
content: '';
width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
display: inline-block;
}
.justifyContent div {
float: none;
}
#selectPrintAdvil {
cursor: pointer;
}
.clientLabel {
display: block;
opacity: 1;
line-height: 0;
}
.boxFrame img {
width: 100%;
}
.boxFrame {
display: inline-block;
position: relative;
background-color: none;
cursor: pointer;
width: 65%;
height: auto;
/* background-image: url('SET BY GSAP'); */
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
max-width: 1150px;
line-height: 0;
}
.hoverMe:hover,
.hoverMe:focus,
.hoverMe:active {
height: 104%;
width: 104%;
left: -2%;
top: -2%;
background-image: url('https://dummyimage.com/100x75/C30400/858585.gif&text=boxframe-selected');
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
}
/* Overide the innerFrame3 Hover Image for Locked Sections*/
/* Must be placed after innerFrame3 Hover CSS*/
.locked:hover,
.locked:focus,
.locked:active {
background-image: url('https://dummyimage.com/100x75/C30400/858585.gif&text=boxframe-locked');
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.innerFrame1 {
position: absolute;
background-color: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background-image: url('../img/boxFrame-v02.gif'); */
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-color: none;
}
.innerFrame2,
.innerFrame3 {
position: absolute;
background-color: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-color: none;
}
.clientLabel {
position: absolute;
top: 0;
right: 0;
background-color: black;
height: 1.5em;
padding-top: .075em;
padding-bottom: .25em;
padding-left: .45em;
padding-right: .35em;
transform: skewX(-10deg);
}
@media all and (max-width: 40em) {
.clientLabel {
height: 1.3em;
/* line-height: 1.3; */
line-height: 0;
}
}
@media all and (max-width: 40em) and (max-height: 40em) {
.clientLabel {
height: 1.3em;
/* line-height: 1.3; */
line-height: 0;
}
}
@media all and (max-width: 40em) and (max-height: 64em) {
.clientLabel {
height: 1.3em;
/* line-height: 1.3; */
line-height: 0;
}
}
@media all and (min-width: 40.063em) and (max-width: 64em) {
.clientLabel {
height: 1.5em;
/* line-height: 1.5; */
line-height: 0;
}
}
@media all and (min-width: 90.063em) {
.clientLabel {
height: 1.5em;
/* line-height: 1.5; */
line-height: 0;
}
}
.clientLabel p {
text-align: center;
-webkit-text-stroke: .25px white;
color: white;
text-shadow:
-.25px -.25px 0 #000,
.25px -.25px 0 #000,
-.25px .25px 0 #000,
.25px .25px 0 #000;
letter-spacing: .05em;
}
.justifyContent .columns:last-child:not(:first-child) {
float: none;
}
/* ********************************* */
@media all and (max-width: 40em) {
.boxFrame {
width: 100%;
margin: auto;
margin-bottom: .75rem;
}
}
@media all and (min-width: 40.063em) and (max-width: 90em) {
.boxFrame {
width: 45%;
margin-right: .75rem;
margin-bottom: .75rem;
}
}
@media all and (min-width: 90.063em) {
.boxFrame {
width: 31%;
margin-right: .75rem;
margin-bottom: .75rem;
}
}
/* ****************************************** */
/* This takes care of Blur - Anti-alias Issue */
/* ****************************************** */
div,
span,
img {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
img[src$=".gif"], img[src$=".png"], img[src$=".jpg"] {
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}
/* ******************************************* */
/* *********** Hardware Acleration *********** */
/* ******************************************* */
#main-stage {
-webkit-transform: translateZ(0);
}
/* *********************************************** */
/* *************** Modal Slideshow *************** */
/* *********************************************** */
.modal-close {
position: fixed;
width: 35px;
height: 35px;
top: 2rem;
right: 2rem;
background: rgba(0, 0, 0, .25);
border: solid 1px #C00000;
z-index: 102;
}
.slideshow {
width: 100%;
height: 100%;
}
.overlay {
display: block;
position: fixed;
top: 0;
left: 0;
position: -ms-device-fixed;
width: 100%;
height: 100%;
background-image: url('https://dummyimage.com/10x10/0B20A5/0B24B5.gif&text=texture');
background-size: 50%;
background-repeat: repeat;
background-position: top left;
background-color: #090E38;
z-index: 101;
}
@media all and (min-width: 900px) and (max-width: 1000px) {
#section-content-djax,
.overlay,
.texture-paper-bkg {
background-size: 30%;
}
}
@media all and (min-width: 1001px) {
#section-content-djax,
.overlay,
.texture-paper-bkg {
background-size: 20%;
}
}
.clone {
position: absolute;
cursor: default;
z-index: 102;
}
a {
text-decoration: none;
}
.modalNav {
position: fixed;
top: 50%;
left: 0;
width: 45px;
transform: translateY(-50%);
z-index: 999;
}
@media all and (max-width: 400px) {
.modalNav {
width: 55px;
}
}
.modalNav ul {
list-style: none;
text-align: left;
margin-left: -65%;
}
.modalNav ul li {
display: block;
}
.modalNav ul li:last-child {
margin-right: 0;
}
#back-to-tutorial {
margin-left: 100px;
}
.modalNav div,
.modalNav a {
position: relative;
top: 0;
cursor: pointer;
font-weight: normal;
text-align: center;
border: 1px solid #114469;
border-radius: 50%;
background-color: none;
color:#114469;
}
.modalNav div:hover,
.modalNav div.active,
.modalNav a.active {
background-color: #08385d;
border: 1px solid #C00000;
}
@media all and (max-width: 400px) {
.modalNav ul{
margin-top: 18px;
}
.modalNav ul li {
margin-right: 10px;
margin-bottom: 10px;
}
.modalNav div {
width: 15px;
height: 15px;
}
.modalNav a {
padding: 0px 7px;
font-size: 14px;
}
}
@media all and (min-width: 401px) {
.modalNav ul{
margin-top: 23px;
}
.modalNav ul li {
margin-right: 15px;
margin-bottom: 15px;
}
.modalNav div {
width: 20px;
height: 20px;
}
.modalNav a {
padding: 0px 9px;
font-size: 18px;
}
}
.slides-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 10;
}
.slide {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.slide img,
.slide .centered {
position: absolute;
display: block;
opacity: 1;
top: 50%;
left: 50%;
width: 100vw;
height: auto;
transform: translate(-50%, -50%);
max-width: 1150px;
background-image: none;
padding: 1.5rem;
}
@media all and (max-width: 40em) {
.slide .centered {
padding: 14%;
width: 85vw;
height: auto;
}
.slide img {
width: 85vw;
}
}
@media all and (min-width: 40.063em) and (max-width: 90em) {
.slide .centered {
padding: 10%;
width: 75vw;
height: auto;
}
.slide img {
width: 75vw;
}
}
@media all and (min-width: 90.063em) {
.slide .centered {
padding: 0%;
width: 65vw;
height: auto;
}
.slide img {
width: 65vw;
}
}
.go-prev, .go-next {
cursor: pointer;
font-weight: bold;
text-decoration: underline;
}
.slide p {
font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
font-weight: 400;
font-style: normal;
color: #4f81a5;
padding-left: 3%;
padding-right: 3%;
text-align: left;
line-height: 1.5;
}
.slide a {
color: #6BB2E6;
}
.slide a:visited {
color: #97ccf3;
}
.slide a:hover {
color: #C00000;
}
.slide h1,
.slide h2,
.slide h3 {
color: #4f81a5;
line-height: .5;
margin-bottom: 0;
padding-bottom: 0 !important;
text-align: left;
padding: 3%;
}
.slide h1 {
font-size: 2em;
}
.modalDescription {
overflow: auto !important;
overflow-y: scroll !important;
height: auto;
max-height: 90vh;
}
/* *************************************************************** */
/* ********** Show Or Hide -KEEP AT END OF STYLE SHEET ********** */
/* *************************************************************** */
.showOrHide {
display: block; /* originial - none */
opacity: 1; /* originial - 0 */
width: 0px;
}
.hideMe {
display: block; /* originial - none */
opacity: 1; /* originial - 0 */
}
.showMe {
display: block;
opacity: 1;
}
<template>
<div id="section-content-djax" class="texture-paper-bkg"><!-- START section-content-djax -->
<button-close-section-raster></button-close-section-raster>
<hero-image></hero-image>
<examples-list></examples-list>
</div><!-- END section-content-djax -->
</template>
<script>
import buttonCloseSectionRaster from 'assets/components/button-close-section-raster.vue';
import heroImage from 'assets/components/hero-image.vue';
// import modalButton from 'assets/components/modal-button.vue';
import examplesList from 'assets/components/examples-list.vue';
export default {
components: { buttonCloseSectionRaster, heroImage, examplesList }, // END components
}; // END export default
</script>
<style>
</style>
<template>
<div id="section-content-djax" class="texture-paper-bkg">
<button-close-section-raster></button-close-section-raster>
<h1>Outdoor</h1>
<!-- <hero-image></hero-image>
<examples-list></examples-list> -->
</div>
</template>
<script>
import buttonCloseSectionRaster from 'assets/components/button-close-section-raster.vue';
import heroImage from 'assets/components/hero-image.vue';
// import modalButton from 'assets/components/modal-button.vue';
import examplesList from 'assets/components/examples-list.vue';
export default {
components: { buttonCloseSectionRaster, heroImage, examplesList }, // END
}; // END export default
</script>
<style>
.section-content {
width: 200px;
height: 200px;
border: solid 1px red;
}
</style>
<template>
<div id="section-content-djax" class="texture-paper-bkg">
<button-close-section-raster></button-close-section-raster>
<h1>Online</h1>
<!-- <hero-image></hero-image>
<examples-list></examples-list> -->
</div>
</template>
<script>
import buttonCloseSectionRaster from 'assets/components/button-close-section-raster.vue';
import heroImage from 'assets/components/hero-image.vue';
// import modalButton from 'assets/components/modal-button.vue';
import examplesList from 'assets/components/examples-list.vue';
export default {
components: { buttonCloseSectionRaster, heroImage, examplesList }, // END
}; // END export default
</script>
<style>
.section-content {
width: 200px;
height: 200px;
border: solid 1px red;
}
</style>
<template>
<name-title-tag></name-title-tag>
</template>
<script>
import nameTitleTag from 'assets/components/name-title-tag.vue';
export default {
components: { nameTitleTag }, // END components
}; // END export default
</script>
<style>
</style>
<template>
<div id="section-content-djax" class="texture-paper-bkg">
<button-close-section-raster></button-close-section-raster>
<h1>Video</h1>
<!-- <hero-image></hero-image>
<examples-list></examples-list> -->
</div>
</template>
<script>
import buttonCloseSectionRaster from 'assets/components/button-close-section-raster.vue';
import heroImage from 'assets/components/hero-image.vue';
// import modalButton from 'assets/components/modal-button.vue';
import examplesList from 'assets/components/examples-list.vue';
export default {
components: { buttonCloseSectionRaster, heroImage, examplesList }, // END
}; // END export default
</script>
<style>
.section-content {
width: 200px;
height: 200px;
border: solid 1px red;
}
</style>
<template>
<div slot="modalPrintAdvil1a">
<nav class="modalNav">
<ul>
<li><a href="#slide-1" class="modalNavLink"> </a></li>
<li><a href="#slide-2" class="modalNavLink"> </a></li>
<li><a href="#slide-3" class="modalNavLink"> </a></li>
<li><a href="#slide-4" class="modalNavLink"> </a></li>
</ul>
</nav>
<!-- <nav class="modalNav">
<ul>
<li><div @click="goto('slide1')" class="modalNavLink"> </div></li>
<li><div @click="goto('slide2')" class="modalNavLink"> </div></li>
<li><div @click="goto('slide3')" class="modalNavLink"> </div></li>
<li><div @click="goto('slide4')" class="modalNavLink"> </div></li>
</ul>
</nav> -->
<div class="slides-container">
<div class="slide" ref="slide1" id="slide-1">
<div class="centered" id="print-advil-1">
<!-- Empty Div for boxFrame Overlay Clone -->
<img src="https://dummyimage.com/100x75/ff8787/ffffff.gif&text=Advil-01" alt="Advil Blah Blah Blah Ad">
<!-- Will Fade On Scroll -->
</div>
</div>
<div class="slide" ref="slide2" id="slide-2">
<div class="centered" id="print-advil-2">
<img src="https://dummyimage.com/100x75/ff8787/ffffff.gif&text=Advil-02" alt="Advil Beep Beep Honk Ad">
</div>
</div>
<div class="slide" ref="slide3" id="slide-3">
<div class="centered" id="print-advil-3">
<img src="https://dummyimage.com/100x75/ff8787/ffffff.gif&text=Advil-03" alt="Advil Waaah Waaa Waaah Ad">
</div>
</div>
<div class="slide" ref="slide4" id="slide-4">
<div class="centered modalDescription">
<h1 class="handwritten">Advil</h1>
<p>COPY TO COME - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="">test link</a></p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
// goto(refName) {
// var element = this.$refs[refName];
// console.log(element);
// var top = element.offsetTop;
// window.scrollTo(0, top);
// }, // END goto
// }, // END methods
// mounted() {
}, // END mounted
}; // END export default
</script>
<style>
</style>
<template>
<div slot="modalPrintAmex1a">
<nav class="modalNav">
<ul>
<li><a href="#slide-1" class="modalNavLink"> </a></li>
<li><a href="#slide-2" class="modalNavLink"> </a></li>
<li><a href="#slide-3" class="modalNavLink"> </a></li>
<li><a href="#slide-4" class="modalNavLink"> </a></li>
<li><a href="#slide-5" class="modalNavLink"> </a></li>
</ul>
</nav>
<div class="slides-container">
<div class="slide" id="slide-1">
<div class="centered" id="print-amex-1">
<!-- Empty Div for boxFrame Overlay Clone -->
<img src="https://dummyimage.com/100x75/ff8787/ffffff.gif&text=Amex-01" alt="Amex Ad 01">
<!-- Will Fade On Scroll -->
</div>
</div>
<div class="slide" id="slide-2">
<div class="centered" id="print-amex-2">
<img src="https://dummyimage.com/100x75/ff8787/ffffff.gif&text=Amex-02" alt="Amex Ad 02">
</div>
</div>
<div class="slide" id="slide-3">
<div class="centered" id="print-amex-3">
<img src="https://dummyimage.com/100x75/ff8787/ffffff.gif&text=Amex-03" alt="Amex Ad 03">
</div>
</div>
<div class="slide" id="slide-4">
<div class="centered" id="print-amex-4">
<img src="https://dummyimage.com/100x75/ff8787/ffffff.gif&text=Amex-04" alt="Amex Ad 04">
</div>
</div>
<div class="slide" id="slide-5">
<div class="centered modalDescription">
<h1 class="handwritten">American Express</h1>
<p>COPY TO COME - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="">test link</a></p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
}, // END methods
mounted() {
}, // END mounted
}; // END export default
</script>
<style>
</style>
<template>
<div slot="modalPrintBayer1a">
<nav class="modalNav">
<ul>
<li><a href="#slide-1" class="modalNavLink"> </a></li>
<li><a href="#slide-2" class="modalNavLink"> </a></li>
<li><a href="#slide-3" class="modalNavLink"> </a></li>
<li><a href="#slide-4" class="modalNavLink"> </a></li>
</ul>
</nav>
<div class="slides-container">
<div class="slide" id="slide-1">
<div class="centered" id="print-bayer-1">
<!-- Empty Div for boxFrame Overlay Clone -->
<img src="https://dummyimage.com/100x75/ff8787/ffffff.gif&text=Bayer-01" alt="Bayer Ad 01">
<!-- Will Fade On Scroll -->
</div>
</div>
<div class="slide" id="slide-2">
<div class="centered" id="print-bayer-2">
<img src="https://dummyimage.com/100x75/ff8787/ffffff.gif&text=Bayer-02" alt="Bayer Ad 02">
</div>
</div>
<div class="slide" id="slide-3">
<div class="centered" id="print-bayer-3">
<img src="https://dummyimage.com/100x75/ff8787/ffffff.gif&text=Bayer-03" alt="Bayer Ad 03">
</div>
</div>
<div class="slide" id="slide-4">
<div class="centered modalDescription">
<h1 class="handwritten">Bayer</h1>
<p>COPY TO COME - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <a href="">test link</a></p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
}, // END methods
mounted() {
}, // END mounted
}; // END export default
</script>
<style>
</style>
"use babel";
import VueRouter from 'https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.5.3/vue-router.min.js';
let routes = [
{
path: '/',
component: require('assets/sections/home.vue'),
},
{
path: '/print',
component: require('assets/sections/print.vue'),
},
{
path: '/video',
component: require('assets/sections/broadcast.vue'),
},
{
path: '/outdoor',
component: require('assets/sections/outdoor.vue'),
},
{
path: '/online',
component: require('assets/sections/online.vue'),
},
];
export default new VueRouter({
routes,
});
<template>
<router-link class="handwritten" to="/" exact>
<div id="closeSection"></div>
</router-link>
</template>
<script>
export default {
}; // END export default
</script>
<style>
</style>
<template>
<router-link to="/" exact>
<div class='closeSectionModal close-button' aria-label='Close alert' type='button'>
<div aria-hidden='true'>×</div>
</div>
</router-link>
</template>
<script>
export default {
}; // END export default
</script>
<style>
</style>
<template>
<div id="contact-prefs" class="folder-tab"> <!-- START contact-prefs -->
<div class="inner-contact-pref-wrap"> <!-- START Inner Contact Pref Wrap -->
<div id="contact-prefs-tab" class="tab-title">
<span id="contact-prefs-tab-center" class="tab-bkg"><h5 class="handwritten">Preferences / Contact</h5></span>
</div>
<div class="scroll-area"> <!-- START scroll-area -->
<div id="preferences-form" class="row preferences form-section"> <!-- START preferences-form -->
<fieldset id="pref-checkbox-container" class="large-12 columns">
<legend class="button-group-iso filters-button-group-iso float-left">
<h4 id="which-industry" class="handwritten">Select Which Industries To View</h4>
<div id="default-settings" class="float-right">
<button id="default-selects" data-filter=".default-select" class="pref-button">Default</button>
<button id="select-all" data-filter="*" class="pref-button">Select All</button>
</div>
</legend>
<label for="automotive"><input id="automotive" data-filter=".automotive" type="checkbox" class="industry" value="1"> Automotive</label>
<label for="beauty"><input id="beauty" data-filter=".beauty" type="checkbox" class="industry default-select-pref-tab" value="2"> Beauty</label>
<label for="branding"><input id="branding" data-filter=".branding" type="checkbox" class="industry default-select-pref-tab" value="3"> Branding</label>
<label for="btob"><input id="btob" data-filter=".btob" type="checkbox" class="industry" value="4"> B to B</label>
<label for="communication"><input id="communication" data-filter=".communication" type="checkbox" class="industry" value="5"> Communication</label>
<label for="fashion"><input id="fashion" data-filter=".fashion" type="checkbox" class="industry default-select-pref-tab" value="6"> Fashion</label>
<label for="financial"><input id="financial" data-filter=".financial" type="checkbox" class="industry default-select-pref-tab" value="7"> Financial</label>
<label for="fitness"><input id="fitness" data-filter=".fitness" type="checkbox" class="industry default-select-pref-tab" value="8"> Fitness</label>
<label for="fragrance"><input id="fragrance" data-filter=".fragrance" type="checkbox" class="industry" value="9"> Fragrance</label>
<label for="healthcare"><input id="healthcare" data-filter=".healthcare" type="checkbox" class="industry default-select-pref-tab" value="10"> Healthcare</label>
<label for="hotel"><input id="hotel" data-filter=".hotel" type="checkbox" class="industry" value="11"> Hotel</label>
<label for="insurance"><input id="insurance" data-filter=".insurance" type="checkbox" class="industry" value="12"> Insurance</label>
<label for="laundry"><input id="laundry" data-filter=".laundry" type="checkbox" class="industry" value="13"> Laundry</label>
<label for="nutrition"><input id="nutrition" data-filter=".nutrition" type="checkbox" class="industry" value="14"> Nutrition</label>
<label for="pharma"><input id="pharma" data-filter=".pharma" type="checkbox" class="industry default-select-pref-tab" value="15"> Pharma</label>
<label for="publicservice"><input id="publicservice" data-filter=".publicservice" type="checkbox" class="industry default-select-pref-tab" value="16"> P.S.A</label>
<label for="realestate"><input id="realestate" data-filter=".realestate" type="checkbox" class="industry" value="17"> Real Estate</label>
<label for="shipping"><input id="shipping" data-filter=".shipping" type="checkbox" class="industry" value="18"> Shipping</label>
<label for="sports"><input id="sports" data-filter=".sports" type="checkbox" class="industry default-select-pref-tab" value="19"> Sports</label>
<label for="technology"><input id="technology" data-filter=".technology" type="checkbox" class="industry default-select-pref-tab" value="20"> Technology</label>
<label for="tourism"><input id="tourism" data-filter=".tourism" type="checkbox" class="industry default-select-pref-tab" value="21"> Tourism</label>
<label for="transportation"><input id="transportation" data-filter=".transportation" type="checkbox" class="industry default-select-pref-tab" value="22"> Transportation</label>
</fieldset>
</div> <!-- END preferences-form -->
<div id="contact-01" class="row contact-form form-section">
<legend><h4 class="handwritten"> Contact Me</h4></legend>
<p>Name | phone |<a href="mailto:email@email.com"> :email@email.com</a></p>
<span id="note"><p class="note">notes go here.</p></span>
</div>
<div id="contact-02" class="row contact-form form-section">
<legend><h4 class="handwritten">Thank You GreenSock Team!</h4></legend>
<p>To say you ROCK!!! would be selling you short. Thanks again gents for all your help.<a href="https://greensock.com/" target="_blank"> GreenSock.com</a></p>
</div>
<div class="end-spacer"><!-- Empty Spacer Div for Scroll --></div>
</div> <!-- END scroll-area -->
</div> <!-- END Inner Contact Pref Wrap -->
</div> <!-- END contact-prefs -->
</template>
<script>
export default {
}; // END export default
</script>
<style>
</style>
<template>
<div id="section-hero-djax-image" class="section-hero-djax-image-print">
<!-- CSS Sets Background Image -->
<div id="closeAndSendBack" class="image-print-crop">
<!-- CSS Sets Background Image -->
<div class="image-print-crop-hover imageVisibility">
<!-- CSS Sets Background Image -->
</div>
</div>
</div>
</template>
<script>
import { eventBus } from 'main.js';
export default {
data() {
return {
}; // END return
}, // END data
created() {
}, // END created
}; // END export default
</script>
<style>
</style>
<template>
<div @click="exampleSelected" :id="id" class="grid-isotope-item boxFrame" :sector="sector">
<div class="innerFrame1"></div>
<div class="innerFrame2"></div>
<div class="innerFrame3 hoverMe"></div>
<span class="clientLabel handwritten"><p>{{ client }}</p></span>
<img class="fadeMe" :src="https://dummyimage.com/1006x75/bdb0bd/ffffff.gif&text=thumbnail" :alt="alt">
</div>
</template>
<script>
import { eventBus } from 'main.js';
export default {
props: [ 'id', 'alt', 'client', 'sector' ], // END props
data() {
return {
imageSrc: '',
}
}, // END data
computed: {
}, // END computed
methods: {
exampleSelected() {
this.imageSrc = this.id;
this.$emit('imageSelectChanged', this.imageSrc);
console.log(this.imageSrc + " = this.imageSrc - modal button clicked");
}
}, // END methods
mounted() {
}, // END mounted
}; // END export default
</script>
<style>
</style>
<template>
<div class="overlay"> <!-- START Modal -->
<div class="closeSectionModal close-button" @click="$emit('close')">
<div aria-hidden='true'>×</div>
</div>
<keep-alive>
<component :is="selectedComponent">
<!-- content set dynamically -->
</component>
</keep-alive>
</div> <!-- END Modal -->
</template>
<script>
import { eventBus } from 'main.js';
import buttonCloseSectionVector from 'assets/components/button-close-section-vector.vue';
// Need to research how to make dynamic component Var and Path
import modalPrintAdvil from 'assets/modals/modalPrintAdvil.vue';
import modalPrintAmex from 'assets/modals/modalPrintAmex.vue';
import modalPrintBayer from 'assets/modals/modalPrintBayer.vue';
const selectedModal = null;
export default {
// Need to research how to make dynamic component name
components: { buttonCloseSectionVector, modalPrintAdvil, modalPrintAmex, modalPrintBayer }, // END components
props: [ 'imageSrc' ],// END props
data() {
return {
isVisible: true, // return property for modal visibility
// modalData: [], // Set an empty string for the modal html ajax call - response.data will fill this
selectedComponent: this.imageSrc,
};
}, // END data
created() {
eventBus.$on('imageSelectChanged', (imagesource) => {
this.imageSrc = imagesource;
});
}, // END created
methods: {
}, // END methods
mounted() {
// Make an ajax request with axios
// axios.get( 'src/assets/modals/' + this.imageSrc + '.vue' ).then(response => this.modalData = response.data); // send the html data string to the modal definition in data above
// START GSAP Slideshow ====================================================
//First the variables our app is going to use need to be declared
//References to DOM elements
var $window = $(window);
var $document = $(document);
//Only links that starts with #
var $navButtons = $(".modalNavLink").filter("[href^=\\#]");
var $navGoPrev = $(".go-prev");
var $navGoNext = $(".go-next");
var $slidesContainer = $(".slides-container");
var $slides = $(".slide");
var $currentSlide = $slides.first();
//Animating flag - is our app animating
var isAnimating = false;
//The height of the window
var pageHeight = $window.innerHeight();
//Key codes for up and down arrows on keyboard. We'll be using this to navigate change slides using the keyboard
var keyCodes = {
UP : 38,
DOWN: 40
}
// Going to the first slide
goToSlide($currentSlide);
// Adding event listeners ====================================================
$window.on("resize", onResize).resize();
$window.on("mousewheel DOMMouseScroll", onMouseWheel);
$document.on("keydown", onKeyDown);
$navButtons.on("click", onNavButtonClick);
$navGoPrev.on("click", goToPrevSlide);
$navGoNext.on("click", goToNextSlide);
// Internal functions ========================================================
// When a button is clicked - first get the button href, and then slide to the container, if there's such a container
function onNavButtonClick(event)
{
//The clicked button
var $button = $(this);
//The slide the button points to
var $slide = $($button.attr("href"));
//If the slide exists, we go to it
if($slide.length)
{
goToSlide($slide);
event.preventDefault();
}
}; // END onNavButtonClick
// onKeyDown ===========================================================
// Getting the pressed key. Only if it's up or down arrow, we go to prev or next slide and prevent default behaviour
// This way, if there's text input, the user is still able to fill it
function onKeyDown(event)
{
var PRESSED_KEY = event.keyCode;
if(PRESSED_KEY == keyCodes.UP || PRESSED_KEY == 37)
{
goToPrevSlide();
event.preventDefault();
}
else if(PRESSED_KEY == keyCodes.DOWN || PRESSED_KEY == 39)
{
goToNextSlide();
event.preventDefault();
}
}; // END onKeyDown
// onMouseWheel ===========================================================
// When user scrolls with the mouse, we have to change slides
function onMouseWheel(event)
{
//Normalize event wheel delta
var delta = event.originalEvent.wheelDelta / 30 || -event.originalEvent.detail;
//If the user scrolled up, it goes to previous slide, otherwise - to next slide
if(delta < -1)
{
goToNextSlide();
}
else if(delta > 1)
{
goToPrevSlide();
}
event.preventDefault();
}; // END onMouseWheel
// goToPrevSlide ===========================================================
// If there's a previous slide, slide to it
function goToPrevSlide()
{
if($currentSlide.prev().length)
{
goToSlide($currentSlide.prev());
}
}; // END goToPrevSlide
// goToNextSlide ===========================================================
// If there's a next slide, slide to it
function goToNextSlide()
{
if($currentSlide.next().length)
{
goToSlide($currentSlide.next());
}
}; // END goToNextSlide
// goToSlide ===============================================================
// Actual transition between slides
function goToSlide($slide)
{
// If the slides are not changing and there's such a slide
if(!isAnimating && $slide.length)
{
//setting animating flag to true
isAnimating = true;
$currentSlide = $slide;
//Sliding to current slide
TweenLite.to($slidesContainer, 1, {scrollTo: {y: pageHeight * $currentSlide.index() }, onComplete: onSlideChangeEnd, onCompleteScope: this});
//Animating menu items
TweenLite.to($navButtons.filter(".active"), 0.5, {className: "-=active"});
TweenLite.to($navButtons.filter("[href=\\#" + $currentSlide.attr("id") + "]"), 0.5, {className: "+=active"});
}
}; // END goToSlide
// onSlideChangeEnd ========================================================
// Once the sliding is finished, we need to restore "isAnimating" flag.
// You can also do other things in this function, such as changing page title
function onSlideChangeEnd()
{
isAnimating = false;
}; // END onSlideChangeEnd
// When user resize it's browser we need to know the new height, so we can properly align the current slide
function onResize(event)
{
// This will give us the new height of the window
var newPageHeight = $window.innerHeight();
// If the new height is different from the old height ( the browser is resized vertically ), the slides are resized
if(pageHeight !== newPageHeight)
{
pageHeight = newPageHeight;
//This can be done via CSS only, but fails into some old browsers, so I prefer to set height via JS
TweenLite.set([$slidesContainer, $slides], {height: pageHeight + "px"});
//The current slide should be always on the top
TweenLite.set($slidesContainer, {scrollTo: {y: pageHeight * $currentSlide.index() }});
}
}; // END onResize
// Apply click event to closeSectionModal
$(".closeSectionModal").on("click", function() {
// Unbind the event handlers/listeners from the Modal/Ovrlay Function
$window.off("resize", onResize).resize();
$window.off("mousewheel DOMMouseScroll", onMouseWheel);
$document.off("keydown", onKeyDown);
$navButtons.off("click", onNavButtonClick);
$navGoPrev.off("click", goToPrevSlide);
$navGoNext.off("click", goToNextSlide);
}); // END on click
}, // END mounted
ready: function() {
}, // END ready
}; // END export default
</script>
<style>
</style>
<template>
<div id="name-title-tag" class="center-name-and-tag">
<div class="name-and-tag">
<p id="name-title">Hainis Art Direction</p>
<p id="tagline">bad name. good work.</p>
</div>
</div>
</template>
<script>
export default {
}; // END export default
</script>
<style>
</style>
<template>
<div id="online" class="media-type">
<div id="sectionAnimationHeroOnline" class="sectionAnimationHero">
<div id="heroAnimationHoverOnline">
<div id="linkSpaceOnline" class="linkSpaceClick">
</div>
</div>
</div>
<router-link to="/online">
<div class="linkSpace">
<span id="online-title" class="centerImg navTitle"></span>
</div>
</router-link>
</div>
</template>
<script>
export default {
}; // END export default
</script>
<style>
</style>
<template>
<div id="outdoor" class="media-type">
<div id="sectionAnimationHeroOutdoor" class="sectionAnimationHero">
<div id="heroAnimationHoverOutdoor">
<div id="linkSpaceOutdoor" class="linkSpaceClick">
</div>
</div>
</div>
<router-link to="/outdoor">
<div class="linkSpace">
<span id="outdoor-title" class="centerImg navTitle"></span>
</div>
</router-link>
</div>
</template>
<script>
export default {
}; // END export default
</script>
<style>
</style>
<template>
<div id="print" class="media-type">
<div id="sectionAnimationHeroPrint" class="sectionAnimationHero">
<div id="heroAnimationHoverPrint">
<div id="linkSpacePrint" class="linkSpaceClick">
</div>
</div>
</div>
<router-link to="/print">
<div class="linkSpace">
<span id="print-title" @click="exampleSelected" class="centerImg navTitle"></span>
</div>
</router-link>
</div>
</template>
<script>
import { eventBus } from 'main.js';
export default {
props: [ 'id' ], // END props
data() {
return {
// imageSrc: '',
}; // END return
}, // END data
methods: {
exampleSelected() {
this.imageSrc = this.id;
this.$emit('imageSelectChanged', this.imageSrc);
console.log(this.imageSrc + " = this.imageSrc - nav button clicked");
}
}, // END methods
}; // END export default
</script>
<style>
</style>
<template>
<div id="broadcast" class="media-type">
<div id="sectionAnimationHeroBroadcast" class="sectionAnimationHero">
<div id="heroAnimationHoverBroadcast">
<div id="linkSpaceBroadcast" class="linkSpaceClick">
</div>
</div>
</div>
<router-link to="/video">
<div class="linkSpace">
<span id="broadcast-title" class="centerImg navTitle"></span>
</div>
</router-link>
</div>
</template>
<script>
export default {
}; // END export default
</script>
<style>
</style>
<template>
<nav class="conrner-nav">
<nav-button-print></nav-button-print>
<nav-button-video></nav-button-video>
<nav-button-outdoor></nav-button-outdoor>
<nav-button-online></nav-button-online>
</nav>
</template>
<script>
import navButtonPrint from 'assets/components/nav-button-print.vue';
import navButtonVideo from 'assets/components/nav-button-video.vue';
import navButtonOutdoor from 'assets/components/nav-button-outdoor.vue';
import navButtonOnline from 'assets/components/nav-button-online.vue';
import buttonCloseSectionRaster from 'assets/components/button-close-section-raster.vue';
export default {
components: { navButtonPrint, navButtonVideo, navButtonOutdoor, navButtonOnline, buttonCloseSectionRaster }, // END components
}; // END export default
</script>
<style>
</style>
<template>
<div id="smallNavList" class="centerImg"> <!-- START Small Nav Menu -->
<div class="name-and-tag-small">
<p id="name-title-small">Hainis Art Direction</p>
<p id="tagline-small">concept to completion</p>
</div>
<a href="print.html"><div id="smallNavListPrint"><!--CSS Image--></div></a>
<a href="broadcast.html"><div id="smallNavListBroadcast"><!--CSS Image--></div></a>
<a href="outdoor.html"><div id="smallNavListOutdoor"><!--CSS Image--></div></a>
<a href="online.html"><div id="smallNavListOnline"><!--CSS Image--></div></a>
</div> <!-- END Small Nav Menu -->
</template>
<script>
export default {
}; // END export default
</script>
<style>
</style>