/* ---------- ric Meyer's Reset CSS v2.0 - http://cssreset.com --------- */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} /* --------------------- CSS RESET --------------------- */ /* --------------------- SLABTEXT --------------------- */ .slabtexted .slabtext{display:-moz-inline-box;display:inline-block;white-space:nowrap}.slabtextinactive .slabtext{display:inline;white-space:normal;font-size:1em !important;letter-spacing:inherit !important;word-spacing:inherit !important;*letter-spacing:0 !important;*word-spacing:0 !important;}.slabtextdone .slabtext{display:block;line-height:0.9;} /* --------------------- SLABTEXT --------------------- */ /* --------------------- FONT --------------------- */ @import url(http://fonts.googleapis.com/css?family=Muli:300,300italic,400,400italic); /* --------------------- GLOBAL --------------------- */ html { overflow-x: hidden !important; } body { font-family: 'Muli', 'Helvetica', 'sans-serif'; color: white; text-align: center; } .selected { color: #04fff0; } .fancybox { padding: 0px; } .iframe { background-color: #04fff0; } /* --------------------- GLOBAL --------------------- */ /* --------------------- TOP BAR --------------------- */ #navBarBox { width: 100%; height: auto; background-color: black; opacity: 0.80; position: fixed; top: 0; z-index: 20; } @media only screen and (min-width: 300px) { #blockLogo { display: none; } nav a { color: white; text-decoration: none; font-family: 'Muli'; font-weight: 400; letter-spacing: 2px; font-size: 11px; cursor: pointer; /* Firefox */ -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } #navMenu { width: 95%; margin: 0 auto; padding-top: 10px; padding-bottom: 10px; } nav ul { float:right; padding-top: 10px; padding-bottom: 10px; } nav li { display: inline; list-style: none; margin-right: 15px; cursor: pointer; } } @media only screen and (min-width: 768px) { #blockLogo { text-indent: -9999px; float: left; margin-left: 30px; background: transparent url('../img/boxLogo.png') no-repeat 0 0; display: block; width: 100px; height: 30px; margin-top: 5px; margin-bottom: 5px; cursor: pointer; } #navMenu { width: auto; padding-top: 10px; padding-bottom: 10px; } #blockLogo:hover { opacity: 0.6; /* Firefox */ -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } nav ul { float:right; padding-top: 10px; padding-bottom: 10px; } nav li { display: inline; list-style: none; margin-right: 25px; cursor: pointer; } nav a { color: white; text-decoration: none; font-family: 'Muli'; font-weight: 400; letter-spacing: 2px; font-size: 11px; cursor: pointer; /* Firefox */ -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } } @media only screen and (min-width: 1200px) { nav a { color: white; text-decoration: none; font-family: 'Muli'; font-weight: 400; letter-spacing: 2px; font-size: 13px; cursor: pointer; /* Firefox */ -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } #navMenu { width: auto; padding-top: 10px; padding-bottom: 10px; } nav ul { margin-right:30px; float:right; padding: 10px 0 7px 0; } nav li { display: inline; list-style: none; margin-right: 25px; cursor: pointer; } } nav a:hover { cursor: pointer; text-decoration: none; color: #04FFF0; /* Firefox */ -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } /* --------------------- TOP BAR --------------------- */ /* --------------------- HOMEPAGE --------------------- */ #home { z-index: -10; display: block; background-color: black; } video { visibility: hidden; } @media only screen and (min-width: 1000px) { video { visibility: visible; } } #video-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; background-color: black; } #video-bg > video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* 1. No object-fit support: */ @media (min-aspect-ratio: 16/9) { #video-bg > video { height: 300%; top: -100%; } } @media (max-aspect-ratio: 16/9) { #video-bg > video { width: 300%; left: -100%; } } /* 2. If supporting object-fit, overriding (1): */ @supports (object-fit: cover) { #video-bg > video { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } } #bigLogo { top: 40%; left: 20%; height: 20%; width: 60%; display: block; background: transparent url('../img/bigtextblock.png') no-repeat center; background-size: contain; z-index: 10; cursor: pointer; position: absolute; } .fade { opacity: 1.0; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } .full { opacity: 0.5; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } /* --------------------- HOMEPAGE --------------------- */ /* --------------------- WORK PAGE --------------------- */ #work { height: auto; position: relative; padding-top: 15%; padding-bottom: 15%; top: 0; left: 0; background-color: white; display: block; clear: both; } #thumbWrapper { position: relative; height: auto; width: 300px; margin: 0 auto; overflow: auto; text-align: center; } .smallWork { float: left; display: block; background-size: cover; background-position: center; height: 140px; width: 140px; margin: 5px; cursor: pointer; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } .bigWork { display: block; background-position: center; cursor: pointer; float: right !important; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; float: left; height: 140px; width: 290px; margin: 5px 5px 5px 0; background-size: cover !important; } .smallWork a { display: block; background-color: black; opacity: 0.0; position: relative; height: 100%; cursor: pointer; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } .bigWork a { display: block; background-color: black; opacity: 0.0; position: relative; height: 100%; cursor: pointer; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } .smallWork p { text-decoration: none !important; position: relative; top: 45%; color: #04FFF0; font-weight: 400; font-size: 14px; letter-spacing: 2px; cursor: pointer; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } .bigWork p { text-decoration: none !important; position: relative; top: 50%; color: #04FFF0; font-weight: 400; font-size: 14px; letter-spacing: 2px; cursor: pointer; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } .bigWork a:hover { background-color: black; background-size: contain; opacity: 1.0; height: 100%; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; cursor: pointer; text-decoration: none; } .smallWork a:hover { background-color: black; background-size: contain; opacity: 1.0; height: 100%; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; cursor: pointer; text-decoration: none; } #bottomRight { background-image: url('../img/intel.jpg'); background-size: cover; } #topCenter { background-image: url('../img/diplo.jpg'); background-size: cover; } #topRight { background-image: url('../img/hefty.jpg'); background-size: cover; } #secondLeft { background-image: url('../img/daftpunkMed.png'); background-size: cover; background-position: center; } #secondCenter { background-image: url('../img/tomFord.jpg'); background-size: cover; } #secondRight { background-image: url('../img/chicago.jpg'); background-size: cover; } #thirdLeft { background-image: url('../img/asgeir.jpg'); background-size: cover; } #bottomLeft { background-image: url('../img/metgalaSmall.jpg'); background-size: cover; } #topLeft { background-image: url('../img/beyonceSmall.png'); background-size: cover; background-position: center; } @media only screen and (min-width: 800px) { #work { height: auto; position: relative; padding-top: 8%; padding-bottom: 8%; top: 0; left: 0; background-color: white; display: block; clear: both; } #thumbWrapper { position: relative; height: auto; width: 600px; margin: 0 auto; overflow: auto; text-align: center; } .smallWork { float: left; display: block; background-size: cover; background-position: center; height: 190px; width: 190px; margin: 5px; cursor: pointer; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } .bigWork { display: block; background-position: center; cursor: pointer; float: right !important; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; float: left; height: 390px; width: 390px; margin: 5px 5px 5px 0; background-size: cover !important; } .smallWork a { display: block; background-color: black; opacity: 0.0; position: relative; height: 100%; cursor: pointer; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } .bigWork a { display: block; background-color: black; opacity: 0.0; position: relative; height: 100%; cursor: pointer; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } .smallWork p { text-decoration: none !important; position: relative; top: 45%; color: #04FFF0; font-weight: 400; font-size: 14px; letter-spacing: 2px; cursor: pointer; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } .bigWork p { text-decoration: none !important; position: relative; top: 50%; color: #04FFF0; font-weight: 400; font-size: 14px; letter-spacing: 2px; cursor: pointer; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } .bigWork a:hover { background-color: black; background-size: contain; opacity: 1.0; height: 100%; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; cursor: pointer; text-decoration: none; } .smallWork a:hover { background-color: black; background-size: contain; opacity: 1.0; height: 100%; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; cursor: pointer; text-decoration: none; } } @media only screen and (min-width: 1200px) { #work { height: auto; position: relative; padding-top: 8%; padding-bottom: 8%; top: 0; left: 0; background-color: white; display: block; clear: both; } #thumbWrapper { position: relative; height: auto; width: 1041px; margin: 0 auto; overflow: auto; text-align: center; } .smallWork { float: left; display: block; background-size: cover; background-position: center; height: 135px; width: 345px; margin: 1px; cursor: pointer; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } .bigWork { display: block; background-position: center; cursor: pointer; float: right !important; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; float: left; height: 272px; width: 692px; margin: 1px 1px 0 1px; background-size: cover !important; } .smallWork a { display: block; background-color: black; opacity: 0.0; position: relative; height: 100%; cursor: pointer; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } .bigWork a { display: block; background-color: black; opacity: 0.0; position: relative; height: 100%; cursor: pointer; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } .smallWork p { text-decoration: none !important; position: relative; top: 45%; color: #04FFF0; font-weight: 400; font-size: 14px; letter-spacing: 2px; cursor: pointer; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } .bigWork p { text-decoration: none !important; position: relative; top: 50%; color: #04FFF0; font-weight: 400; font-size: 14px; letter-spacing: 2px; cursor: pointer; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } .bigWork a:hover { background-color: black; background-size: contain; opacity: 1.0; height: 100%; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; cursor: pointer; text-decoration: none; } .smallWork a:hover { background-color: black; background-size: contain; opacity: 1.0; height: 100%; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; cursor: pointer; text-decoration: none; } #bottomRight { background-image: url('../img/intel.jpg'); background-size: cover; } #topCenter { background-image: url('../img/diplo.jpg'); background-size: cover; } #topRight { background-image: url('../img/hefty.jpg'); background-size: cover; } #secondLeft { background-image: url('../img/daftpunkMed.png'); background-size: cover; background-position: center !important; } #secondCenter { background-image: url('../img/tomFord.jpg'); background-size: cover; } #secondRight { background-image: url('../img/chicago.jpg'); background-size: cover; } #thirdLeft { background-image: url('../img/asgeir.jpg'); background-size: cover; background-position: top center !important; } #bottomLeft { background-image: url('../img/metgalaSmall.jpg'); background-size: cover; background-position: top center !important; } #topLeft { background-image: url('../img/beyonceSmall.png'); background-size: cover; background-position: center !important; } } @media only screen and (min-width: 1800px) { #thumbWrapper { position: relative; height: auto; width: 1500px; margin: 0 auto; overflow: auto; text-align: center; } .smallWork { float: left; display: block; background-size: cover; background-position: center; height: 250px; width: 498px; margin: 1px; cursor: pointer; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; } .bigWork { display: block; background-position: center; cursor: pointer; float: right !important; -moz-transition: all 250ms ease-in; /* WebKit */ -webkit-transition: all 250ms ease-in; /* Opera */ -o-transition: all 250ms ease-in; /* Standard */ transition: all 500ms ease-in; float: left; height: 502px; width: 998px; margin: 1px 1px 0 1px; background-size: cover !important; } } /* --------------------- WORK PAGE --------------------- */ /* --------------------- ABOUT PAGE --------------------- */ #about { margin-top: 0; clear: both; z-index: 30; display: block; padding: 50px 0; font-weight: 300 !important; background-color: black; color: white; overflow: hidden; } #aboutLogo { height: 35px; width: 125px; display: block; background: transparent url('../img/aboutLogo.png') no-repeat center; text-indent: -9999px; margin: 0 auto; margin-bottom: 50px; } #about hr { border: 0; border-bottom: 2px dashed white; } .oneitalic { font-weight: 400; font-style: italic; } .onebold { font-weight: 400; color: #04FFF0; } #aboutWrap { max-width: 1200px; margin: 40px auto; } #aboutUs { margin: 40px 0; position: relative; margin: 0 auto; font-size: 14px; text-transform: uppercase; text-align: center; font-weight: 400; line-height: 140%; } .logoPop { float: left; text-indent: -9999px; display: block; height: 40px; width: 22%; margin: 10px 10px; } .logoWrap { height: auto; display: block; width: 320px; margin: 50px auto 50px auto; text-align: center; clear: both; padding-bottom: 50px; } .logos { display: block; clear: both; margin-left: 10px; } @media only screen and (min-width: 480px) { #aboutUs { margin: 40px 0; position: relative; top: 25%; margin: 0 auto; width: 60%; font-size: 14px; text-transform: uppercase; text-align: center; font-weight: 400; line-height: 140%; } #aboutUs h1 { margin-bottom: 50px; padding: 30px; opacity: 1; } .logos { display: block; clear: both; margin-left: 0; margin-right: 10px; } } @media only screen and (min-width: 1400px) { #aboutWrap { padding: 10% 0 10% 0; } #aboutUs { position: relative; margin: 0 auto; width: 60%; font-size: 14px; text-transform: uppercase; text-align: center; font-weight: 400; line-height: 140%; } #aboutUs h1 { margin-bottom: 50px; padding: 30px 0 0 0; border: 5px solid #000; opacity: 1; } .logos { display: block; clear: both; margin-right: 25px; } } .textPop { opacity: 1; font-weight: 300; padding-top: 10px; width: 80%; margin: 0 auto; } .textPopBottom { opacity: 1; font-weight: 400; padding-top: 20px; padding-bottom: 10px; } .logoWrap { height: auto; display: block; width: 75%; margin: 50px auto; text-align: center; clear: both; padding-bottom: 50px; } @media only screen and (min-width: 480px) { .logoWrap { height: auto; display: block; width: 55%; margin: 50px auto 50px auto; text-align: center; clear: both; padding-bottom: 50px; } .logoPop { float: right; text-indent: -9999px; display: block; height: 50px; width: 80px; margin: 10px 10px; } } #vogue { background: transparent url('../img/vogue.png') no-repeat center; background-size: contain; opacity: 1.0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #vogue:hover { opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #nowness { background: transparent url('../img/nowness.png') no-repeat center; background-size: contain; opacity: 1.0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #nowness:hover { opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #jawbone { background: transparent url('../img/jawbone.png') no-repeat center; background-size: contain; opacity: 1.0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #jawbone:hover { opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #atlantic { background: transparent url('../img/atlantic.png') no-repeat center; background-size: contain; opacity: 1.0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #atlantic:hover { opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #intel { background: transparent url('../img/intel.png') no-repeat center; background-size: contain; opacity: 1.0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #intel:hover { opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #human { background: transparent url('../img/equal.png') no-repeat center; background-size: contain; opacity: 1.0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #human:hover { opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #urban { background: transparent url('../img/urban.png') no-repeat center; background-size: contain; opacity: 1.0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #urban:hover { opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #eddie { background: transparent url('../img/eddiebauer.png') no-repeat center; background-size: contain; opacity: 1.0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #eddie:hover { opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #nike { background: transparent url('../img/nike.png') no-repeat center; background-size: contain; opacity: 1.0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #nike:hover { opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #arny { background: transparent url('../img/arny.png') no-repeat center; background-size: contain; opacity: 1.0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #arny:hover { opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #decent { background: transparent url('../img/maddecent.png') no-repeat center; background-size: contain; opacity: 1.0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #decent:hover { opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #incase { background: transparent url('../img/incase.png') no-repeat center; background-size: contain; opacity: 1.0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #incase:hover { opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #vice { background: transparent url('../img/vice.png') no-repeat center; background-size: contain; opacity: 1.0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #vice:hover { opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #seiko { background: transparent url('../img/seiko.png') no-repeat center; background-size: contain; opacity: 1.0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #seiko:hover { opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #piperlime { background: transparent url('../img/piperlime.png') no-repeat center; background-size: contain; opacity: 1.0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #piperlime:hover { opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #spotify { background: transparent url('../img/spotify.png') no-repeat center; background-size: contain; opacity: 1.0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #spotify:hover { opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #columbia { background: transparent url('../img/columbia.png') no-repeat center; background-size: contain; opacity: 1.0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #columbia:hover { opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #havas { background: transparent url('../img/havas.png') no-repeat center; background-size: contain; opacity: 1.0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #havas:hover { opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #ferragamo { background: transparent url('../img/ferragamo.png') no-repeat center; background-size: contain; opacity: 1.0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #ferragamo:hover { opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } /* --------------------- ABOUT PAGE --------------------- */ /* --------------------- CONTACT PAGE --------------------- */ #contact { width: 100%; position: relative; clear: both; background-color: black; } #map { display: none; } #contactFooter { position: relative; display: block; width: 100%; height: auto; z-index: 10; padding-top: 10%; } #footerContent { display: block; width: 100%; height: auto; display: block; position: relative; padding: 50px 0; z-index: 5; } #contactInfo { width: 80%; min-height: 75px; margin: 0 auto; position: relative; padding: 20px; border-bottom: solid 1px #04FFF0; } #contactLeft { font-size: 11px; font-weight: 400; line-height: 155%; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 10px; } #contactRight p { margin-top: 4px; } #contactRight { font-size: 11px; font-weight: 400; line-height: 130%; letter-spacing: 0.1em; text-transform: uppercase; display: block; } #break { height: 1px; display: block; } #mailingList { margin-top: 12px !important; } #mailingList a{ color: #222121; font-size: 14px; font-weight: 400; background-color: #04FFF0; display: block; text-decoration: none; width: 173px; margin: 12px auto; padding-top: 5px; padding-bottom: 5px; clear: both; } #mailingList a:hover{ opacity: 0.5; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } @media only screen and (min-width: 1000px) { #map { width: 100%; display: block; } #contact { width: 100%; position: relative; clear: both; background: transparent url('../img/65opac.png') repeat 0 0; } #contactFooter { position: absolute; bottom: 0; display: block; width: 100%; height: auto; z-index: 10; padding-top: 0; } #footerContent { display: block; width: 100%; height: auto; display: block; background: transparent url('../img/65opac.png') repeat 0 0; position: relative; padding: 50px 0; z-index: 5; } #contactInfo { border-bottom: none; } #contactLeft { width: 50%; float: left; text-align: right; font-size: 12px; font-weight: 400; line-height: 155%; letter-spacing: 0.1em; text-transform: uppercase; display: block; } #contactLeft p { margin-top: 4px; margin-left: 5px; padding-right: 20px; border-right: solid 1px #04FFF0; } #contactRight { float: left; text-align: left; font-size: 12px; font-weight: 400; line-height: 130%; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-left: 20px; } #contactRight p { margin-top: 4px; margin-bottom: 4px; } #contactRight a { text-decoration: none; color: white; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } #contactRight a:hover { color: #04FFF0; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; } } #socialMediaButtons { margin: 10px auto; height: 25px; width: 173px; clear: both; margin-bottom: 12px; } #socialMediaButtons a { height: 25px; width: 25px; float: left; display: block; background-image: url('../img/socialButtons.png'); margin-left: 12px; margin-top: 10px; cursor: pointer; text-indent: -9999px; float: left; } .first { margin-left: 0px !important; } #socialMediaButtons a:hover { opacity: 0.50; -moz-transition: all 250ms ease; /* WebKit */ -webkit-transition: all 250ms ease; /* Opera */ -o-transition: all 250ms ease; /* Standard */ transition: all 500ms ease; box-shadow: none; } #twitter { background-position: -50px 0 !important; } #facebook { background-position: -25px 0 !important; } #tumblr { background-position: 0 0 !important; } #instagram { background-position: -75px 0 !important; } #vimeo { background-position: -100px 0 !important; } #mailingList { width: 173px; margin: 0 auto; margin-top: 0px !important; padding: 0; } /* --------------------- CONTACT PAGE --------------------- */ /* --------------------- MAIL PAGE --------------------- */ #mailPage { height: 100%; width: 100%; display: block; background-color: black; } /* --------------------- MAIL PAGE --------------------- */