/* ================================================================================== PAGE CONTAINER(s) ================================================================================== */ /* ---- psd page width = 1400px 87.5em ---- */ /* ---- grid width = 1185px 74.063em 84.642857142857% (1185px / 1400px) ---- */ /* ---- gutter width = 45px 2.8125em ---- */ /* ---- row height full = 90px 5.625em ---- */ /* ---- row height half = 45px 2.8125em ---- */ /* ---- row height quarter = 22.5px 1.40625em ---- */ * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; } html, body {height: 100%;} html { background-color: #000000 !important; html { scroll-behavior: smooth; } } #page { min-height: 100%; position: relative; width: 100%; font-family: "ff-meta-serif-web-pro", serif; font-style: normal; font-weight: 500; } #to-top { z-index: 99; position: fixed; bottom: 13em; right: 1em; display: none; width: 2.25em; height: 2.25em; background: transparent url("../img/global/to-top.png") center center no-repeat; background-image: -webkit-linear-gradient(transparent, transparent), url("../img/global/to-top.svg"); background-image: linear-gradient(transparent, transparent), url("../img/global/to-top.svg"); } @media screen and (min-width: 30em){ /* 480px */ #to-top {bottom: 11em;right: 1em;} } /* ---- 768 ( + ) ---- */ @media screen and (min-width: 48em){ /* 768px */ #to-top {bottom: 12em;right: 1.25em;} } /* ---- 960 ( + ) large desktop ---- */ @media screen and (min-width: 60em){ /* 960px */ #to-top {bottom: 10em;right: 1.25em;} } /* ================================================================================== REDSKABER COLUMN ================================================================================== */ .redskaber-column h1 {float: left;} .redskaber-column h6 {float: center;} .redskaber-column p {text-align: left; font-size: 0.8em;} .redskaber-column img {float: left; padding-right: 1em;} /* ================================================================================== GRID - .grid-wrapper determines relative column (c+) and spacing (s+) widths ================================================================================== */ /* ---- base (all) ---- */ .grid-wrapper {text-align: left;width: 100%;max-width: 74.063em !important; /* 1185px (1140px + 22.5px left & right column gutter padding) */margin: 0 auto;padding: 0 1.40625em;} .row {width: 100%; margin: 0 auto;} .row .row {width: auto; margin: 0 auto;} .row:before,.row:after,.clearfix:before,.clearfix:after {content:'';display:table;} .row:after,.clearfix:after {clear:both;} .row,.clearfix {zoom:1;} .center {text-align: center;} .left {text-align: left;} .full-top {margin-top: 2.8125em; /* 45px */} .full-btm {margin-bottom: 2.8125em; /* 45px */} .half-top {margin-top: 1.40625em /* 22.5px */} .half-btm {margin-bottom: 1.40625em /* 22.5px */} .quarter-top {margin-top: 0.703125em /* 11.25px */} .quarter-btm {margin-bottom: 0.703125em /* 11p.25px */} .no-top {margin-top: 0em;} .no-btm {margin-bottom: 0em;} .neg-top {margin-top: -2em;} .neg-btm {margin-bottom: -2.5em;} .smallquarter-top {margin-top: 0.3515em /* 5.625px */} .smallquarter-btm {margin-bottom: 0.3515em /* 5.625px */} .evenless-btm {margin-bottom: -1em /* 5.625px */} .imgheadline { display: block; margin: 0 auto; } img {width: 100%; height: auto; display: block; margin: 0 auto;} .c1,.c2,.c3,.c3-thumbs,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12, .newcontent {width: 100%;margin-right: auto;margin-left: auto;margin-bottom: 1.40625em} .ls1,.ls2,.ls3,.ls4,.ls5,.ls6,.ls7,.ls8,.ls9,.ls10,.ls11 {width: 100%;margin-right: auto;margin-left: auto;margin-bottom: 1.40625em} .rs1,.rs2,.rs3,.rs4,.rs5,.rs6,.rs7,.rs8,.rs9,.rs10,.rs11 {width: 100%;margin-right: auto;margin-left: auto;margin-bottom: 1.40625em} .end {float:right;} /* Adding the "end" class isn't a must though it does create a smooth right alignment edge to the row */ /* ---- 320 ( + ) smartphones ---- */ @media screen and (min-width: 20em){ /* 320px */ .c3-thumbs {width: 50%; margin: 0 auto; float: left; position: relative; padding: 0 1.40625em 2.8125em 1.40625em; /* 22.5px (half gutter) */} /* for thumbnails */ .c4-thumbs {width: 50%; margin: 0 auto; float: left; position: relative; padding: 0 1.40625em 2.8125em 1.40625em; /* 22.5px (half gutter) */} /* for thumbnails */ .mobile-hide {display: none;} } /* ---- 480 ( + ) smartphones ---- */ @media screen and (min-width: 30em){ /* 480px */ .mobile-hide {display: inline;} } /* ---- 481 ( + ) ---- */ @media screen and (min-width: 30.0625em){ /* 481px */ .half-width {width:50%; float: left;padding: 1.40625em/*0.703125em; /* 11.25px (quarter gutter) */;position: relative; margin: 0 auto; } .row .row .half-width {width: 100%; margin-bottom: 0.703125em;} } /* ---- 600 ( + ) ---- */ @media screen and (min-width: 37.5em){ /* 600px */ .c3-thumbs {width: 50%; margin: 0 auto; float: left; position: relative; } .c4-thumbs {width: 50%; margin: 0 auto; float: left; position: relative; }/* for thumbnails */ .mobile-hide {display: none;} } /* ---- 768 ( + ) ---- */ @media screen and (min-width: 48em){ /* 768px */ .grid-wrapper {text-align: left;padding: 0 2.8125em;} .c3-thumbs {width: 33%; padding-bottom: 2.8125em !important;} /* for thumbnails */ .c4-thumbs {width: 25%; padding-bottom: 2.8125em !important;} /* for thumbnails */ .newcontent {width: 33.33%; padding-bottom: 2.8125em !important;} /* for thumbnails */ } /* ---- 960 ( + ) large desktop ---- */ @media screen and (min-width: 60em){ /* 960px */ .grid-wrapper {text-align: left;padding: 0 2.8125em;} .row .row {width: auto; margin: 0 -1.40625em /* -22.5px */;} .full-top {margin-top: 5.625em; /* 90px */} .full-btm {margin-bottom: 5.625em; /* 90px */} .half-top {margin-top: 1.8125em; /* 45px */} .half-btm {margin-bottom: 2.8125em; /* 45px */} .quarter-top {margin-top: 1.40625em /* 22.5px */} .quarter-btm {margin-bottom: 1.40625em /* 22.5px */} .no-top {margin-top: 0;} .neg-btm {margin-bottom: 5em;} .c1 {width:8.33%} .c2 {width:16.66%} .c3 {width:25%} .c3-thumbs {width: 33%;} .c4-thumbs {width: 25%; position: relative;} /* for thumbnails */ .c4 {width:33.33%} .c5 {width:41.66%} .c6 {width:48%} .c7 {width:58.33%} .c8 {width:66.66%} .c9 {width:75% } .c10 {width:83.33%} .c11 {width:91.66%} .c12 {width:100%} .newcontent {width: 33.33%;} .c1,.c2,.c3,.c3-thumbs,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12, .newcontent {float: left;padding: 0 1.40625em; /* 22.5px (half gutter) */;position: relative; margin: 0 auto; } .row .row .c1,.row .row .c2,.row .row .c3,.row .row .c3-thumbs,.row .row .c4,.row .row .c5,.row .row .c6,.row .row .c7,.row .row .c8,.row .row .c9,.row .row .c10,.row .row .c11,.row .row .c12 .newcontent {width: 100%; margin-bottom: 2.8125em;} .row .row > div:last-child{margin-bottom:0 !important} .ls1 {margin-left:8.33%} .ls2 {margin-left:16.66%} .ls3 {margin-left:25%} .ls4 {margin-left:33.33%} .ls5 {margin-left:41.66%} .ls6 {margin-left:50%} .ls7 {margin-left:58.33%} .ls8 {margin-left:66.66%} .ls9 {margin-left:75%} .ls10 {margin-left:83.33%} .ls11 {margin-left:91.66%} .rs1 {margin-right:8.33%} .rs2 {margin-right:16.66%} .rs3 {margin-right:25%} .rs4 {margin-right:33.33%} .rs5 {margin-right:41.66%} .rs6 {margin-right:50%} .rs7 {margin-right:58.33%} .rs8 {margin-right:66.66%} .rs9 {margin-right:75%} .rs10 {margin-right:83.33%} .rs11 {margin-right:91.66%} } @media screen and (max-width: 800px) { .newcontent { display:none } } /* ================================================================================== BLACK HEADER ================================================================================== */ .black_header {text-align: center; width: 60%; margin: auto; color:black; font-size: 1.25em; font-weight: 800; padding-bottom: 0.1em; padding-top: 0.1em; float: center;} .black_header2 {text-align: center; width: 100%; margin: auto; color:black; font-size: 1em; font-weight: 800; padding-bottom: 0.1em; padding-top: 0.1em;} /* ================================================================================== OVERLAY - HTML CODE ================================================================================== */ #myImg10,#myImg2,#myImg3 { cursor: pointer; } #myImg4 #myImg5 #myImg6 { cursor: pointer; } #myImg7 #myImg8 #myImg9 { cursor: pointer; } #myImg10:hover,#myImg2:hover,#myImg3:hover {} #myImg4:hover,#myImg5:hover,#myImg6:hover {cursor: pointer;} #myImg7:hover,#myImg8:hover,#myImg9:hover, #myImg11:hover {cursor: pointer; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 999; /* Sit on top */ padding-top: 60px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: calc(100vh - 0px); overflow-y: auto; background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.3); /* Black w/ opacity */ } .modal a:hover {color: #dd971a; border-bottom: 0px solid #dd971a;} /* Modal Content (image) */ .modal-content { margin: auto; display: block; background-color: transparent; z-index: 1; } /* Add Animation */ .modal-content{ animation: fadeIn 0.5s; -webkit-animation: fadeIn 0.5s; -moz-animation: fadeIn 0.5s; -o-animation: fadeIn 0.5s; -ms-animation: fadeIn 0.5s; } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-moz-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-o-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-ms-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } /* The Close Button */ .close { position: absolute; top: 63px; right: 160px; color: #f1f1f1; font-size: 25px; font-weight: normal; padding: 1px 10px; z-index: 1002; animation: fadeIn 0.5s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } #fade { display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=80); } #light { display: none; position: absolute; top: 50%; left: 50%; max-width: 600px; max-height: 360px; margin-left: -300px; margin-top: -180px; border: 2px solid #FFF; background: #FFF; z-index: 1002; overflow: visible; } #boxclose { float: right; cursor: pointer; color: #fff; border: 1px solid #AEAEAE; border-radius: 3px; background: #222222; font-size: 31px; font-weight: bold; display: inline-block; line-height: 0px; padding: 11px 3px; position: absolute; right: 2px; top: 2px; z-index: 1002; opacity: 0.9; } .boxclose:before { content: "×"; } #fade:hover ~ #boxclose { display:none; } .test:hover ~ .test2 { display: none; } /* The Video close Button */ .close_video { position: absolute; top: 60px; right: 113px; color: #f1f1f1; font-size: 25px; font-weight: normal; background-color: black; padding: 1px 10px; z-index: 1002; animation: fadeIn 0.5s; } .close_video:hover, .close_video:focus { color: #bbb; text-decoration: none; cursor: pointer; } #fade { display: none; position: fixed; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index: 1001; -moz-opacity: 0.8; opacity: .80; filter: alpha(opacity=80); } #light { display: none; position: absolute; top: 50%; left: 50%; max-width: 600px; max-height: 360px; margin-left: -300px; margin-top: -180px; border: 2px solid #FFF; background: #FFF; z-index: 1002; overflow: visible; } #boxclose_video { float: right; cursor: pointer; color: #fff; border: 1px solid #AEAEAE; border-radius: 3px; background: #222222; font-size: 31px; font-weight: bold; display: inline-block; line-height: 0px; padding: 11px 3px; position: absolute; right: 2px; top: 2px; z-index: 1002; opacity: 0.9; } .boxclose_video:before { content: "×"; } #fade:hover ~ #boxclose_video { display:none; } .container-overlay{ background-color: transparent; max-width: 1250px; margin: auto; padding: 20px; } .container-overlay2 h1, h3, h9 { font-family: "EvelethW01-Bold"; font-style: normal; font-weight: 500; font-size: 1em; text-align: center; text-transform: uppercase; display: block; line-height: 1.4;} .container-overlay2{ background-color: #000; max-width: 1213px; margin: auto; } #tv-frame{ position:absolute; z-index:999; width: 1213px; border: 2px solid black; } .container-overlay2-sub{ } .container-overlay-sub{ padding: 5px; padding-right: 40px; padding-left: 40px; background-color: transparent; } * { box-sizing: border-box; } /* Create two equal columns that floats next to each other */ .container-overlay .column { float: left; width: 60%; padding: 10px; text-align: left; padding-top: 10px; margin-left: 3%; margin-right: 2%; margin-top: 10px; margin-bottom: 0px; } .container-overlay .row_modal{ content: ""; display: table; clear: both; background-image:url(../img/8mmgrain.webp); padding: 1em; border: 1px solid #FFFFFF; border-radius: 50px; text-align: center; font-family: "ff-meta-serif-web-pro", serif; } .center-text p{ text-align: center; } .container-overlay .row_modal2{ content: ""; display: table; clear: both; border: 0px solid #FFFFFF; text-align: center; font-family: "ff-meta-serif-web-pro", serif; } @media only screen and (max-width: 1500px){ .close { position: absolute; top: 80px; right: 115px; } } @media only screen and (max-width: 1415px){ .close { right: 91px; } } @media only screen and (max-width: 1385px){ .close { right: 68px; } } @media only screen and (max-width: 1340px){ .close { right: 58px; } } @media only screen and (max-width: 1300px){ .close { right: 36px; } } @media only screen and (max-width: 1270px){ .close { right: 29px; } } @media only screen and (max-width: 1200px){ .close { position: absolute; top: 82px; right: 21px; } } .container-overlay .column { width: 42%; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 830px){ .close { position: absolute; top: 81px; right: 21px; } .container-overlay .column { width: 100%; margin-left: 0px; margin-top: 20px; } } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } .close { position: absolute; top: 80px; right: 14px; } } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .container-overlay-sub{ padding: 0px; } .container-overlay .column { text-align: justify; margin-top: 20px; } } @media only screen and (max-width: 1500px){ .close_video { position: absolute; top: 60px; right: 113px; } } @media only screen and (max-width: 1415px){ .close_video { right: 89px; } } @media only screen and (max-width: 1385px){ .close_video { right: 85px; } } @media only screen and (max-width: 1340px){ .close_video { right: 58px; } } @media only screen and (max-width: 1300px){ .close_video { right: 26px; } } @media only screen and (max-width: 1270px){ .close_video { right: 9px; } } @media only screen and (max-width: 1200px){ .close_video { position: absolute; top: 60px; right: 1px; } } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 830px){ .close_video { position: absolute; top: 60px; right: 1px; } } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .close_video { position: absolute; top: 60px; right: 1px; }} @media only screen and (max-width: 600px) { .modal { width: 100%; min-width: 300px; overflow-x: hidden; padding: 7px; position: absolute; float: left; left: 50%; top: 45%; transform: translate(-50%, -50%); border: 0px solid #ccc; height: calc(100vh - 100px); } } /* ================================================================================== IMG ENLARGE ================================================================================== */ /* Style the Image Used to Trigger the Modal */ #ImgEnlarge { border-radius: 5px; cursor: pointer; transition: 0.3s; } #ImgEnlarge:hover {opacity: 0.7;} /* The Modal (background) */ .modal2 { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (Image) */ .modal2-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Caption of Modal Image (Image Text) - Same Width as the Image */ #caption2 { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation - Zoom in the Modal */ .modal2-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.3s; animation-name: zoom; animation-duration: 0.3s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The Close Button */ .close { position: absolute; top: 40px; right: 35px; color: #f1f1f1; font-size: 35px; font-weight: normal; transition: 0.3s; } .close:hover, .close:focus { color: #ffffff; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal2-content { width: 100%; } } /* ================================================================================== BORDER ================================================================================== */ .border { border-width: 1px; border-color: black; border-style: solid; } /* ================================================================================== BORDER DOWN / UP ================================================================================== */ borderdown { position: absolute; } .borderup { position: absolute; bottom: -3px; width: 100%; z-index: 99; } /* ================================================================================== MODEL ANALYSIS ================================================================================== */ m1{font-family: "brandon-grotesque",sans-serif; font-style: normal; font-weight: 800; color: white; font-size: 1.4vw; text-transform: uppercase; letter-spacing: 4px; display: block; } m2 { text-shadow: 0px 2px 2px rgba(36, 36, 36, 1); font-family: "brandon-grotesque",sans-serif; font-style: normal; font-weight: 800; color: white; font-size: 1.4em; text-transform: uppercase; letter-spacing: 4px; display: block; } /* ================================================================================== IMAGES TASKS ================================================================================== */ .imagestasks {} #taskstopright {border-top: 1px solid black; border-right: 1px solid black;} #taskstopleft {border-top: 1px solid black; border-left: 1px solid black;} #tasksdownright {border-bottom: 1px solid black; border-right: 1px solid black;} #tasksdownleft {border-bottom: 1px solid black; border-left: 1px solid black;} #oneimage {border: 1px solid black;} #oneimagenoborder {} /* ====================================== ============================================ VIDEO / AUDIO ================================================================================== */ video { /* override other styles to make responsive */ width: 100% !important; height: 100% !important; border: 1px solid black; } audio { /* override other styles to make responsive */ width: 100% !important; height: 2em; background-color: #F3F3F3; background: opacity: 0; border: 1px solid black; } /* ================================================================================== PERCENTAGES ================================================================================== */ .zero {width: 0;} .ten {width: 10%;} .twenty {width: 20%;} .thirty {width: 30%;} .forty {width: 40%;} .fifty {width: 50%;} .sixty {width: 60%;} .seventy {width: 70%;} .eighty {width: 80%;} .ninety {width: 90%;} .hundred {width: 100%;} /* ================================================================================== LINE-THROUGH ================================================================================== */ .line-through{ text-decoration: line-through; } /* ================================================================================== TYPE ================================================================================== */ /* * Fonts Used: * Brandon Grotesque * Meta Serif Web Pro * Eveleth */ /* ---- base (all) ---- */ .white {color: #ffffff;} .canvas {color: #f4efe6;} .maroon {color: #683926;} .silver {color: #aaaaaa;} .gold {color: #dd971a;} .slate {color: #222222;} #fit1spacing {margin-top: 8%;} /* for large fittext1 with no paragraph text on large billboard CAROUSEL */ #fit2spacing {margin-top: 0;} /* for all fittext2 usage */ h1, h3, h9 { font-family: "EvelethW01-Bold"; font-style: normal; font-weight: 500; font-size: 1em; text-transform: uppercase; display: block; line-height: 1.4;} h10 { font-family: "EvelethW01-Bold"; font-style: normal; font-weight: 500; font-size: 1em; text-transform: uppercase; display: block; line-height: 1.2; margin-bottom: 0;} @font-face {font-family: "EvelethW01-Bold"; src: url("../fonts/Eveleth W01 Bold/Eveleth W01 Bold.eot"); src: url("../fonts/Eveleth W01 Bold/Eveleth W01 Bold.woff") format("woff"), url("../fonts/Eveleth W01 Bold/Eveleth W01 Bold.ttf") format("truetype"), url("../fonts/Eveleth W01 Bold/Eveleth W01 Bold.svg") format("svg"); } h1 {text-align: center;} h10 {text-align: left;} h6 {text-align: center;} h3 {margin-bottom: -.15em; text-align: center;} h2 { font-family: "ff-meta-serif-web-pro", serif; font-style: italic; font-weight: 500; font-size: 1em; color: #dd971a; line-height: 1.6; text-align: center; } h2 a {text-decoration: none; color: #dd971a } h4 { font-family: "brandon-grotesque",sans-serif; font-style: normal; font-weight: 500; font-size: 1.5em; text-transform: uppercase; letter-spacing: 1px; display: block; line-height: 2; text-align: left; } h6 { font-family: "EvelethW01-Bold"; font-style: normal; font-weight: 500; font-size: 1.5em; text-transform: uppercase; display: block; line-height: 1.4; } h7 { font-family: "brandon-grotesque",sans-serif; font-style: normal; font-weight: 500; font-size: 0.95em; text-transform: uppercase; letter-spacing: 4px; display: block; line-height: 1.4;} h8 {margin-left: 1em;} h7 {margin-bottom: -3em; padding: 1em; text-align: center; margin-top: -1em} @media(max-width: 960px) { h6 {text-align: center;} } h5 {margin-bottom: 0.500em; text-align: left; font-family: "brandon-grotesque",sans-serif; font-style: normal; font-weight: 500; font-size: 1em; text-transform: uppercase; letter-spacing: 4px; display: block; line-height: 1.4;} h4.modal {text-align: center; line-height: 1em;} span.italic { font-family: "ff-meta-serif-web-pro", serif; font-style: italic; font-size: 0.875em; text-transform: none; letter-spacing: 3px; text-align: center; } p {text-align: center;} p a { font-weight: bold; font-style: normal; color: #222222; text-decoration: none; border-bottom: 0px solid #222222; padding: 0 0 .085em 0; /* for underline */ -webkit-font-smoothing: antialiased; -webkit-backface-visibility: hidden; /*prevents safari flicker*/ -webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out; } p a:hover {color: #dd971a; border-bottom: 0px solid #dd971a;} p a.no-underline {border-bottom: none;} @font-face { font-family: 'veneerregular'; src: url('../fonts/veneer/yellow_design_studio_-_veneer-webfont.eot'); src: url('../fonts/veneer/yellow_design_studio_-_veneer-webfont-.eot#iefix') format('embedded-opentype'), url('../fonts/veneer/yellow_design_studio_-_veneer-webfont.woff') format('woff'), url('../fonts/veneer/yellow_design_studio_-_veneer-webfont.ttf') format('truetype'), url('../fonts/veneer/yellow_design_studio_-_veneer-webfont.svg#veneerregular') format('svg'); font-weight: normal; font-style: normal; /* ---- 320 ( + ) smaller smartphones ---- */ @media screen and (min-width: 20em){ /* 480px */ h5 {text-align: center;} h1 {font-size: 1.2em /* 20px */;letter-spacing: 5px; text-align: center;} h10 {text-align: left;} .hero-text h1 {font-size: 1.1em;} }} /* ---- 480 ( + ) smartphones ---- */ @media screen and (min-width: 30em){ /* 480px */ h5 {text-align: center;} h1 {font-size: 1.1em /* 20px */;letter-spacing: 5px; text-align: center;} h10 {font-size: 1.05em /* 20px */;letter-spacing: 5px; text-align: left;} .hero-text h1 {font-size: 1.3em;} } /* ---- 768 ( + ) ---- */ @media screen and (min-width: 48em){ /* 768px */ h1 {font-size: 1.3em /* 20px */;letter-spacing: 5px; text-align: center;} h10 {font-size: 1.15em /* 20px */;letter-spacing: 5px; text-align: left;} .hero-text h1 {font-size: 1.2em;} h2 {font-size: 1.0625em; text-align: left;} h5 {text-align: center;} span.italic {font-size: 1em /* 18px */;} p {text-align: left;} } /* ---- 960 ( + ) large desktop ---- */ @media screen and (min-width: 60em){ /* 960px */ h1, h2, h3 {text-align: center;} h10 {text-align: left; margin-bottom: 0;} h3 {margin-bottom: .5em;} h5 {text-align: left;} .text-left {text-align: left;} } mark1 { background-color: rgba(0, 191, 255, .1) /* 10% opaque green */ ; color: black; -webkit-transition: .4s ease-in-out opacity; -moz-transition: .4s ease-in-out opacity; -o-transition: .4s ease-in-out opacity; transition: .4s ease-in-out opacity; } mark1:hover { background-color: rgba(0, 191, 255, .4) /* 40% opaque green */ ; transition: 0.5s ease-in-out; } mark2 { background-color: rgba(0, 191, 255, .1) /* 10% opaque green */ ; color: black; border-radius: 10px; -webkit-transition: .4s ease-in-out opacity; -moz-transition: .4s ease-in-out opacity; -o-transition: .4s ease-in-out opacity; transition: .4s ease-in-out opacity; } mark2:hover { background-color: rgba(0, 191, 255, .4) /* 40% opaque green */ ; transition: 0.5s ease-in-out; border-radius: 10px; } .glow { color: #black; text-align: center; -webkit-animation: glow 1s ease-in-out infinite alternate; -moz-animation: glow 1s ease-in-out infinite alternate; animation: glow 1s ease-in-out infinite alternate; } @-webkit-keyframes glow { from { text-shadow: 0 0 1px #fff, 0 0 4px rgb(230, 247, 255), 0 0 2px rgb(230, 247, 255), 0 0 3px rgb(230, 247, 255), 0 0 4px rgb(230, 247, 255), 0 0 5px rgb(230, 247, 255), 0 0 6px rgb(230, 247, 255); } to { text-shadow: 0 0 1px #fff, 0 0 2px rgb(81, 147, 206, 0.4), 0 0 3px rgb(81, 147, 206, 0.4), 0 0 1px rgb(81, 147, 206, 0.4), 0 0 2px rgb(81, 147, 206, 0.4), 0 0 3px rgb(81, 147, 206, 0.4), 0 0 1px rgb(81, 147, 206, 0.3); } } /* ================================================================================== ICONS ================================================================================== */ /*icomoon*/ @font-face { font-family: 'icomoon'; src:url('../fonts/icomoon/icomoon.eot'); src:url('../fonts/icomoon/icomoon-.eot#iefix') format('embedded-opentype'), url('../fonts/icomoon/icomoon.woff') format('woff'), url('../fonts/icomoon/icomoon.ttf') format('truetype'), url('../fonts/icomoon/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } /* GLYPH */ /* Use the following CSS code if you want to use data attributes for inserting your icons */ .glyph {margin-bottom: -1.2em;} [data-icon]:before { color: #dd971a; font-family: 'icomoon'; font-size: 1.75em; content: attr(data-icon); speak: none; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* icomoon data-icon key */ /* mail - location - stack - map open - map - map2 - phone - signup - file - newspaper - link - search - paperclip - */ /* ICON */ /* Use the following CSS code if you want to have a class per icon */ /* Instead of a list of all class selectors, you can use the generic selector below, but it's slower: [class*="icon-"] { */ .icon-stack, .icon-location, .icon-map, .icon-map-2, .icon-phone, .icon-tag, .icon-download, .icon-search, .icon-zoom-in, .icon-signup, .icon-link, .icon-flag, .icon-attachment, .icon-file, .icon-envelope, .icon-location-2, .icon-newspaper, .icon-arrow-up-right, .icon-arrow-up-left { font-family: 'icomoon'; font-size: 1.25em; text-decoration: none; border-bottom: none; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out; } a.icon-envelope, a.icon-map-2, a.icon-file {padding: 0 .5em 0 .5em;font-size: 1.2em;text-deocration: none;color: #000000;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;} a:hover.icon-envelope, a:hover.icon-map-2, a:hover.icon-file {color: /*#aaaaaa;*/#dd971a;} .icon-stack:before {content: "\e000";} .icon-location:before {content: "\e001";} .icon-map:before {content: "\e002";} .icon-map-2:before {content: "\e003";} .icon-phone:before {content: "\e004";} .icon-tag:before {content: "\e005";} .icon-download:before {content: "\e006";} .icon-search:before {content: "\e007";} .icon-zoom-in:before {content: "\e008";} .icon-signup:before {content: "\e009";} .icon-link:before {content: "\e00a";} .icon-flag:before {content: "\e00b";} .icon-attachment:before {content: "\e00c";} .icon-file:before {content: "\e00d";} .icon-envelope:before {content: "\e00e";} .icon-location-2:before {content: "\e00f";} .icon-newspaper:before {content: "\e010";} .icon-arrow-up-right:before {content: "\e011";} .icon-arrow-up-left:before {content: "\e012";} /* ================================================================================== TABLES ================================================================================== */ #customers { font-family: "ff-meta-serif-web-pro", serif; font-size: 0.8em; border-collapse: collapse; width: 100%; } #customers td, #customers th { border: 0px solid #ddd; padding: 4px; } #customers tr:nth-child(even){} #customers tr:hover {color: #000; background-color: #E7E7E7; -webkit-transition: background-color 2s ease-out; -moz-transition: background-color 1s ease-out; -o-transition: background-color 1s ease-out; transition: background-color 1s ease-out;} #customers tr:hover a { color: black; } #customers th { padding-top: 4px; padding-bottom: 4px; text-align: left; background-image: url("dictionarybg.png"); color: #000000; } #customers2 { font-family: "ff-meta-serif-web-pro", serif; font-size: 0.8em; border-collapse: collapse; width: 100%; } #customers2 td, #customers2 th { border: 0px solid #ddd; padding: 4px; } #customers2 tr:nth-child(even){} #customers2 tr:hover {color: #000; background-color: #E7E7E7; -webkit-transition: background-color 2s ease-out; -moz-transition: background-color 1s ease-out; -o-transition: background-color 1s ease-out; transition: background-color 1s ease-out;} #customers2 th { padding-top: 4px; padding-bottom: 4px; text-align: left; background-image: url("dictionarybg.png"); color: #000000; } #customers3 { font-family: "ff-meta-serif-web-pro", serif; font-size: 0.8em; border-collapse: collapse; text-align: left; width: 100%; } #customers3 td, #customers3 th { border: 0px solid #ddd; padding: 4px; width: 200px; text-align: left; } #customers3 tr:nth-child(even){text-align: center; width: 200px; } #customers3 th { padding-top: 4px; padding-bottom: 4px; text-align: left; } #customers4 { font-family: "ff-meta-serif-web-pro", serif; font-size: 0.8em; border-collapse: collapse; width: 100%; } #customers4 td, #customers4 th { border: 0px solid #ddd; padding: 4px; width: 200px; text-align: center; } #customers4 tr:nth-child(even){text-align: center; width: 200px; } #customers4 th { padding-top: 4px; padding-bottom: 4px; text-align: center; } #gollum {height: 60%; width: 60%; display: block; margin-left: auto; margin-right: -10em; margin-bottom: -3em; z-index: -999;} /* ================================================================================== BUTTON(s) ================================================================================== */ /* ---- base (all) ---- */ .btn { border: none; font-family: "brandon-grotesque",sans-serif; font-style: normal; font-weight: 700; font-size: 0.68em; text-transform: uppercase; letter-spacing: 1px; color: inherit; background: none; padding: 0.625em 2.8125em; margin: 1em; display: inline-block; outline: none; position: relative; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s; -webkit-border-radius: 12px;-moz-border-radius: 12px;-ms-border-radius: 12px;-o-border-radius: 12px;border-radius: 12px; } .btn:after { content: ''; position: absolute; z-index: -1; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s; } /* ---- 768 ( + ) ---- */ @media screen and (min-width: 48em){ /* 768px */ .btn { font-size: 1em; padding: 0.625em 2.1875em; margin: 2em 2em; } } /* BUTTON 1 (carousel CTA) ======================== */ .btn-1 { color: #ffffff; background: #683926; border: 1px solid #683926; text-decoration: none; -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s; -webkit-animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s; } .btn-1:hover { border: 1px solid #fff; color: #fff; background: none; } .btn-1-alt { border: 1px solid #fff; color: #fff; background: none; text-decoration: none; -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s; -webkit-animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s; } .btn-1-alt:hover { border: 1px solid #683926; color: #ffffff; background: #683926; } /* ---- 768 ( + ) ---- */ @media screen and (min-width: 48em){ /* 768px */ .btn-1, .btn-1-alt {-webkit-animation-delay: 1.5s;-moz-animation-delay: 1.5s;-ms-animation-delay: 1.5s;-o-animation-delay: 1.5s;animation-delay: 1.5s;} } /* BUTTON 2 & (3 - paris) ======================== */ .btn-2, .btn-3 { border: 1px solid #fff; color: #fff; background: none; text-decoration: none; -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s; -webkit-animation-delay: 0s;-moz-animation-delay: 0s;-ms-animation-delay: 0s;-o-animation-delay: 0s;animation-delay: 0s; } .btn-2:hover { border: 1px solid #683926; color: #ffffff; background: #683926; } .btn-3:hover { border: 1px solid #222222; color: #ffffff; background: #222222; } /* ---- 960 ( + ) large desktop ---- */ @media screen and (min-width: 60em){ /* 960px */ .btn-2, .btn-3 {-webkit-animation-delay: .5s;-moz-animation-delay: .5s;-ms-animation-delay: .5s;-o-animation-delay: .5s;animation-delay: .5s;} } /* BUTTON 4 ======================== */ .btn-4 { color: #ffffff; background: #683926; border: 1px solid #683926; text-decoration: none; margin: 0; margin-top: 1em; } .btn-4:hover { border: 1px solid #22222; color: #fff; background: #222222; } /* ---- 480 ( + ) smartphones ---- */ @media screen and (min-width: 30em){ /* 480px */ } /* ================================================================================== HERO TOP & OVERLAY ================================================================================== */ .big-image { height: 100vh; width: 100vw; position: relative; background-size: cover; background-color: #000000; background-position: 50% 50%; } .big-image video { object-fit: cover; width: 100vw; height: 100vh; top: 0; left: 0; } .hero-text { position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1)); color: white; display: flex; align-items: center; justify-content: center; flex-direction: column; } .hero-dust { position: absolute; height: 100%; width: 100%; top: 0; left: 0; mix-blend-mode: soft-light; transform: translate3d(0,0,0); opacity: 0.85; background-image: url('../img/dust1.jpeg'); background-size: cover; color: white; display: flex; align-items: center; justify-content: center; flex-direction: column; } .hero-dust2 { position: absolute; height: 100%; width: 100%; top: 0; left: 0; mix-blend-mode: soft-light; transform: translate3d(0,0,0); opacity: 1; background-image: url('../img/dust1.jpeg'); background-size: cover; color: white; display: flex; align-items: center; justify-content: center; flex-direction: column; } .hero-text h1 { font-size: 1.6em; letter-spacing: 0px; margin: 0 0 5px; } .hero-text p { margin: 0; text-align: center; font-size: 1em; width: 50%; } .hero-text a { color: #E5E5E5; } .source { margin: 0px 0px 0px 0px; position: relative; text-align: right; right: 1em; color: #7F7F7F; font-size: 0.7em; text-transform: uppercase; font-family: "brandon-grotesque", sans-serif; } .source-black { margin: 0px 0px 0px 0px; position: relative; text-align: right; color: #7F7F7F; right: 1em; font-size: 0.7em; text-transform: uppercase; font-family: "brandon-grotesque", sans-serif; } .source-black-left { margin: 0px 0px 0px 0px; position: relative; color: #7F7F7F; top: -2.5em; font-size: 0.7em; text-transform: uppercase; font-family: "brandon-grotesque", sans-serif; } .source-black-modal { margin: 0px 0px 0px 0px; position: relative; color: #7F7F7F; font-size: 0.7em; text-transform: uppercase; font-family: "brandon-grotesque", sans-serif; } .opgave { text-align: center; font-style: italic; font-weight: bold; font-size: 0.75em; font-family: "brandon-grotesque", sans-serif; } .download { position: absolute; width:100%; color: #7F7F7F; left: 1em; bottom: 2.5em; font-size: 0.7em; text-transform: uppercase; font-family: "brandon-grotesque", sans-serif; } .source-black a { color: lightgray; } /* ================================================================================== SLIDER CONTAINER ================================================================================== */ /* Mixin definition */ @mixin aspect-ratio($width, $height) { position: relative; &:before { display: block; content: ""; width: 100%; padding-top: ($height / $width) * 100%; } > img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } } /* Styling */ .hidden-fullsize { display: none; } .carousel-section { background-color: transparent; padding: 10px 0; margin-bottom: 22px; } .carousel-section .container { max-width: 1044px; margin: 0 auto; padding: 0 20px; } .carousel-section .carousel { display: block; text-align: left; position: relative; margin-bottom: 22px; > input { -webkit-appearance: none; appearance: none; height: 20px; width: 20px; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); margin: -1px; overflow: hidden; padding: 0; position: fixed; &:nth-of-type(8):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -700%; } &:nth-of-type(7):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -600%; } &:nth-of-type(6):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -500%; } &:nth-of-type(5):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -400%; } &:nth-of-type(4):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -300%; } &:nth-of-type(3):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -200%; } &:nth-of-type(2):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: -100%; } &:nth-of-type(1):checked ~ .carousel__slides .carousel__slide:first-of-type { margin-left: 0%; } &:nth-of-type(1):checked ~ .carousel__thumbnails li:nth-of-type(1) { filter: none; } &:nth-of-type(2):checked ~ .carousel__thumbnails li:nth-of-type(2) { filter: none; } &:nth-of-type(3):checked ~ .carousel__thumbnails li:nth-of-type(3) { filter: none; } &:nth-of-type(4):checked ~ .carousel__thumbnails li:nth-of-type(4) { filter: none; } &:nth-of-type(5):checked ~ .carousel__thumbnails li:nth-of-type(5) { filter: none; } &:nth-of-type(6):checked ~ .carousel__thumbnails li:nth-of-type(6) { filter: none; } &:nth-of-type(7):checked ~ .carousel__thumbnails li:nth-of-type(7) { filter: none; } &:nth-of-type(8):checked ~ .carousel__thumbnails li:nth-of-type(8) { filter: none; } } } .carousel-section .carousel__slides { position: relative; z-index: 1; padding: 0; margin: 0; overflow: hidden; white-space: nowrap; box-sizing: border-box; display: flex; } .carousel-section .carousel__slide { position: relative; display: block; flex: 1 0 100%; width: 100%; height: 100%; overflow: hidden; transition: all 300ms ease-out; vertical-align: top; box-sizing: border-box; white-space: normal; min-width: 0; padding: 0 5px; figure { display: flex; margin: 0; } div { @include aspect-ratio(3, 2); width: 100%; } img { display: block; flex: 1 1 auto; object-fit: cover; } figcaption { align-self: flex-end; padding: 0px 20px 0 20px; flex: 0 0 auto; font-size: 0.8em; width: 25%; min-width: 150px; } .credit { position: relative; color: #7F7F7F; padding-top: 1em; font-size: 0.7em; display: block; text-transform: uppercase; font-family: "brandon-grotesque", sans-serif; } .credit a:hover { color: #dd971a; } &.scrollable { overflow-y: scroll; } } .carousel-section .carousel__thumbnails { list-style: none; padding: 0; margin: 0; display: flex; margin: 0 -5px; .carousel__slides + & { margin-top: 20px; } li { flex: 1 1 auto; max-width: 100%; margin: 0 5px; transition: all 300ms ease-in-out, background-color 0.5s ease; filter: grayscale(100%); } li:hover { background-color: #your_hover_color; filter: grayscale(0%); } label { display: block; @include aspect-ratio(1, 1); &:hover, &:focus { cursor: pointer; } } } input:checked + label { filter: none; } @media screen and (max-width: 767px) { /* Use vw units for responsive max-width */ .carousel-section .container { max-width: 80vw; /* Adjust the percentage as needed */ } figcaption { width: 95% !important; text-align: center; align-self: flex-start; font-size: 0.8em; margin-bottom: 0; } figcaption h10 { text-align: center; margin-top: 1.5em;} input { display: none; } } /* ================================================================================== IMG OVERLAY + SCALE ANIMATION ================================================================================== */ @keyframes scaleanimation { 0% { transform: scale(1.25); } 100% { transform: scale(1.0); } } .cssanimation, .cssanimation span { animation-duration: 1s; animation-fill-mode: both; } .cssanimation span { display: inline-block } .fadeInBottom { animation-name: fadeInBottom } @keyframes fadeInBottom { from { opacity: 0.3; transform: translateY(10%); } to { opacity: 1 } } .fadeInBottomIndex { animation-name: fadeInBottomIndex } @keyframes fadeInBottomIndex { 0% { opacity: 0; transform: translateY(55px); } 100% { opacity: 1; transform: translateY(0); } } .wrapper { overflow: hidden; height: 100%; width: 100%; background: #000; } .image-container { position: relative; width: 100%; height: 100%; cursor: pointer; } .image-container .after { position: absolute; text-align: center; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.0; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; color: #FFF; } .image-container .after h1{ font-size: 1em; color: #ffffff; margin: 1vw; font-family: "EvelethW01-Bold"; top: 90%; left: 90%; } .image-container .after p{ font-size: 0.9rem; color: #ffffff; text-align: center; margin: 1vw; top: 90%; left: 80%;} .image-container:hover .after{ opacity: 1.0; background: rgba(0, 0, 0, .7); } .image-container:hover .after p{ /* This section calls the slideInFromLeft animation we defined above */ animation: 650ms ease-out 0s 1 fadeInBottom; } .image-container:hover .after h1{ /* This section calls the slideInFromLeft animation we defined above */ animation: 650ms ease-out 0s 1 fadeInBottom; } .cssanimation, .cssanimation span { animation-duration: 1s; animation-fill-mode: both; } .cssanimation span { display: inline-block } .fadeInBottom { animation-name: fadeInBottom } @keyframes fadeInBottom { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } } /* ---- 320 ( + ) smaller smartphones ---- */ @media screen and (min-width: 20em){ /* 480px */ .image-container .after h1{ font-size: 0.7em; color: #ffffff; margin: 1vw; font-family: "EvelethW01-Bold";} .image-container .after p{ font-size: 0.5rem; color: #ffffff; text-align: center; margin: 1vw;} } /* ---- 480 ( + ) smartphones ---- */ @media screen and (min-width: 30em){ /* 480px */ .image-container .after h1{ font-size: 0.8em; color: #ffffff; margin: 1vw; font-family: "EvelethW01-Bold";} .image-container .after p{ font-size: 0.6rem; color: #ffffff; text-align: center; margin: 1vw;} } /* ---- 768 ( + ) ---- */ @media screen and (min-width: 48em){ /* 768px */ .image-container .after h1{ font-size: 0.9em; color: #ffffff; margin: 1vw; font-family: "EvelethW01-Bold";} .image-container .after p{ font-size: 0.7rem; color: #ffffff; text-align: center; margin: 1vw;} } /* ---- 960 ( + ) large desktop ---- */ @media screen and (min-width: 60em){ /* 960px */ .image-container .after h1{ font-size: 1em; color: #ffffff; margin: 1vw; font-family: "EvelethW01-Bold";} .image-container .after p{ font-size: 0.85rem; color: #ffffff; text-align: center; margin: 1vw;} .source-top { text-align: right; position: absolute; right: -12em; color: #7F7F7F; font-size: 0.7em; text-transform: uppercase; font-family: "brandon-grotesque", sans-serif; margin: 0; padding: 0; bottom: 7.5em; } } /* ================================================================================== IMG COMPARISON ================================================================================== */ /* -------------------------------- Primary style -------------------------------- */ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img { max-width: 100%; } .cd-image-container { position: relative; width: 100%; max-width: 768px; margin: 0em auto; } .cd-image-container img { display: block; border: 1px solid black; } .cd-image-label { position: absolute; bottom: 0; right: 0; color: #ffffff; padding: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s; transition: transform 0.3s 0.7s, opacity 0.3s 0.7s; } .cd-image-label.is-hidden { visibility: hidden; } .is-visible .cd-image-label { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .cd-resize-img { position: absolute; top: 0; left: 0; width: 0; height: 100%; overflow: hidden; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cd-resize-img img { position: absolute; left: 0; top: 0; display: block; height: 100%; width: auto; max-width: none; } .cd-resize-img .cd-image-label { right: auto; left: 0; } .is-visible .cd-resize-img { width: 50%; /* bounce in animation of the modified image */ -webkit-animation: cd-bounce-in 0.7s; -moz-animation: cd-bounce-in 0.7s; animation: cd-bounce-in 0.7s; } @-webkit-keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } @-moz-keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } @keyframes cd-bounce-in { 0% { width: 0; } 60% { width: 55%; } 100% { width: 50%; } } .cd-handle { position: absolute; height: 44px; width: 44px; /* center the element */ left: 50%; top: 50%; margin-left: -22px; margin-top: -22px; border-radius: 50%; background: #222222 url("cd-arrows.svg") no-repeat center center; cursor: move; box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); opacity: 0; -webkit-transform: translate3d(0, 0, 0) scale(0); -moz-transform: translate3d(0, 0, 0) scale(0); -ms-transform: translate3d(0, 0, 0) scale(0); -o-transform: translate3d(0, 0, 0) scale(0); transform: translate3d(0, 0, 0) scale(0); } .cd-handle.draggable { /* change background color when element is active */ background-color: #000000; } .is-visible .cd-handle { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); -moz-transform: translate3d(0, 0, 0) scale(1); -ms-transform: translate3d(0, 0, 0) scale(1); -o-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s; transition: transform 0.3s 0.7s, opacity 0s 0.7s;xg } /* ================================================================================== PERMANENT MARKER FONT ================================================================================== */ pm { font-family: "Permanent Marker"; font-size: 36px; font-style: normal; font-variant: normal; font-weight: 700; line-height: 40.4px; } pm2 { font-family: "Permanent Marker"; color: white, 35px; font-style: normal; font-variant: normal; font-weight: 300; line-height: 40.4px; text-shadow: 2px 2px #000000; } pentagram { font-family: "ff-meta-serif-web-pro", serif;font-size: 17px; font-style: normal; font-variant: normal; font-weight: 500; line-height: 40.4px; } /* ================================================================================== NOHOVER ================================================================================== */ .noHover{ pointer-events: none; } /* ================================================================================== COLUMNS ================================================================================== */ /* Create three equal columns that floats next to each other */ .column { float: left; width: 33.33%; padding: 10px; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* ================================================================================== LINE-THROUGH TOGGLE ================================================================================== */ .line-through{ text-decoration: line-through; } /* ================================================================================== CAPTION VIDEO ================================================================================== */ #captionvideo { margin-top: -10px; font-size: 1em; } #captionvideo2 { margin-top: -1px; margin-left: 4px; font-size: 1em; } /* ================================================================================ HEADER ================================================================================ */ /* ---- base (all) ---- */ .header {background: #000000 ;margin: 0 auto; z-index:9; width: 100%; opacity: 1; -webkit-box-shadow: 0px 7px 10px -7px rgba(0,0,0,0.75); -moz-box-shadow: 0px 7px 10px -7px rgba(0,0,0,0.75); box-shadow: 0px 7px 10px -7px rgba(0,0,0,0.75);} /* SEARCH ======================== */ /* ---- base (all) ---- */ .search { background-size: 100% 100%; display: block; top: 0.6em; position: absolute; right: 1.5em; filter: invert(100%); } .logo { background-size: 100% 100%; display: block; top: 0.6em; position: absolute; left: 1.5em; } .logo2 { background-size: 100% 100%; display: block; top: 2.6em; position: absolute; right: 1.5em; height: 1.3em; width: 6.5em; } /* ---- 721 ( + ) ---- */ @media screen and (max-width: 60.0625em){ /* 721px */ .search {display:none;} } /* ---- 721 ( + ) ---- */ @media screen and (min-width: 45.0625em){ /* 721px */ .search {width: 1.2em; /* 40px */height: 1.2em; /* 40px */float: none;} } /* ---- 1024 ( + ) ---- */ @media screen and (min-width: 64em){ /* 1024px */ .search {width: 1.3em; /* 40px */height: 1.3em; /* 40px */} } /* ---- 721 ( + ) ---- */ @media screen and (max-width: 60.0625em){ /* 721px */ .logo {display:none;} } /* ---- 721 ( + ) ---- */ @media screen and (min-width: 45.0625em){ /* 721px */ .logo {width: 0em; /* 40px */height: 0em; /* 40px */float: none;} .header {position: fixed;} } /* ---- 1024 ( + ) ---- */ @media screen and (min-width: 64em){ /* 1024px */ .logo {width: 6.5em; /* 40px */height: 1.3em; /* 40px */} .header {position: fixed;} } /* ================================================================================ SEARCH FUNCTION OVERLAY ================================================================================ */ /* The Overlay (background) */ .overlay { /* Height & width depends on how you want to reveal the overlay (see JS below) */ height: 100%; width: 100%; display: none; position: fixed; /* Stay in place */ z-index: 999; /* Sit on top */ left: 0; top: 0; background-color: rgb(0,0,0); /* Black fallback color */ background-color: rgba(0,0,0, 0.85); /* Black w/opacity */ overflow-x: hidden; /* Disable horizontal scroll */ transition: all 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */ } /* Position the content inside the overlay */ .overlay-content { position: relative; top: 40%; /* 25% from the top */ text-align: center; /* Centered text/links */ margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */ } /* The navigation links inside the overlay */ .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; /* Display block instead of inline */ transition: 0.3s; /* Transition effects on hover (color) */ } /* When you mouse over the navigation links, change their color */ .overlay a:hover, .overlay a:focus { color: #f1f1f1; } /* Position the close button (top right corner) */ .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 50px; } /* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */ @media screen and (max-height: 450px) { .overlay a {font-size: 20px} .overlay .closebtn { font-size: 40px; height: 100%; width: 100%; top: 15px; right: 35px; } } /* ================================================================================ GOOGLE SEARCH BOX ================================================================================ */ /* CSS for changing placeholder color on search input box */ #searchbox { height: 3em; border-radius: 0px; background-color: transparent !important; } input[type="text"], textarea { background-color : transparent; border: none; font-family: "brandon-grotesque",sans-serif; font-size: 2vw; color: #ffffff; width: 50%; left: 25%; right: 25%; outline:none; } input[type=button], input[type=submit], input[type=reset]{ display: none; outline:none; } .sexy_line{ display:block; border:none; margin-left: 25%; margin-right: 25%; color:white; width: 50%; height:1px; background-color: rgba(221, 151, 26, 0.8) } /* ================================================================================ GOOGLE SEARCH RESULTS ================================================================================ */ /* Use a different font family for search results */ .gs-title, .gs-snippet { font-family: "brandon-grotesque",sans-serif; text-decoration: none !important; } /* Add a border between individual search results */ .gs-webResult { border: none; padding: 2.5em; background: transparent; } .gsc-result:hover { border: none; } /* Do no display the count of search results */ .gsc-result-info { display: none; } /* Transparent background */ .gsc-control-cse { background:transparent !important; /* enforce this rule; do not allow override */ border-color:transparent !important; /* border color */ } /* Hide the Google branding in search results */ .gcsc-branding { display: none; } /* Hide the thumbnail images in search results */ .gsc-thumbnail { display: none; } /* Hide the snippets in Google search results */ .gs-snippet { } /* Change the font size of the title of search results */ .gs-title a { font-size: 1.2em !important; } /* Change the font size of snippets inside search results */ .gs-snippet {font-size: 1.1em !important; } /* Google Custom Search highlights matching words in bold, toggle that */ .gs-title b, .gs-snippet b { font-family: "brandon-grotesque",sans-serif; text-decoration: none !important; } /* Do no display the URL of web pages in search results */ .gsc-url-top, .gsc-url-bottom { display: none !important; } /* Highlight the pagination buttons at the bottom of search results */ .gsc-cursor-page { font-size: 1em; padding: 4px 8px; font-family: "brandon-grotesque",sans-serif; border: none; } /* NAVIGATION ======================== */ /* ---- base (mobile only) ---- */ #outer-wrap {position:relative;overflow:hidden;width:100%;} #inner-wrap {position:relative;width:100%;} .nav-btm {margin-bottom: 0em;} .nav-btn { display: block; position: relative; float: left; width: 2.175em; /* 38px */ height: 2em; /* 32px */ padding: 0; margin-top: 1.95em; overflow: hidden; white-space: nowrap; text-indent: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.75; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .nav-btn:hover, .nav-btn:focus {filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity: 1; } #nav { z-index:9999 ; position: relative; overflow: hidden; width: 100%; text-align: left; margin-top: 0 !important; /* disables .half-top class on mobile screens */ } #nav .close-btn {display:none;} #nav .block { z-index: 2; position: relative; padding: 0.75em 1.25em; } #nav ul { *zoom:1; display:block; margin:0 !important; /* enables nav to flush left and top on mobile*/ padding:0 !important; /* enables nav to flush left and top on mobile*/ } #nav ul:before,#nav ul:after {content:"";display:table;} #nav ul:after {clear:both;} #nav li { display: block; font-family: "brandon-grotesque",sans-serif; } #nav li a { display: block; color: #7C7A77; font-style: normal; font-weight: 700; font-size: 0.85em; line-height: 0em; text-transform: uppercase; letter-spacing: 3px; outline: none; text-decoration: none; } #nav li a:hover { color: #ffffff; /* canvas */ text-decoration: none; } /* ---- 720 ( - ) javascript ---- */ @media screen and (max-width: 45em ) { /* MAX-WIDTH 720px */ #nav {position: absolute;top: 0; } #nav:not(:target) {z-index: 1;height: 0;} #nav:target .close-btn {display: block;} #nav .block {position: relative;padding: 0;} #nav li {position: relative;border-top: 1px solid rgba(255, 255, 255, 0.1);} #nav li:last-child {border-bottom: 1px solid rgba(255, 255, 255, 0.1);} #nav li.is-active:after { z-index: 50; display: block; content: ""; position: absolute; top: 50%; right: -0.03125em; margin-top: -0.625em; border-top: 0.625em transparent solid; border-bottom: 0.625em transparent solid; border-right: 0.625em white solid; } #nav li a { padding: 1.55714em 1.84286em; -webkit-transition: all 0.25s ease-in-out 0s; -moz-transition: all 0.25s ease-in-out 0s; -ms-transition: all 0.25s ease-in-out 0s; -o-transition: all 0.25s ease-in-out 0s; transition: all 0.25s ease-in-out 0s; } .js-ready #nav { height: 100%; width: 75%; background: #000000; /*rgb(62,57,53);*/ -webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); -moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.25); } .js-ready #nav .block {background:transparent;} .js-ready #nav .close-btn {display:block;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);opacity:.7;} .js-ready #nav .close-btn:focus,.js-ready #nav .close-btn:hover {filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;} .js-ready #nav {left:-75%;} .js-ready #inner-wrap {left:0;} .js-nav #inner-wrap {left:75%;} .csstransforms3d.csstransitions.js-ready #nav {left:0;-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transform:translate3d(-100%,0,0);-moz-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);-o-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;} .csstransforms3d.csstransitions.js-ready #inner-wrap {left:0!important;-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-transition:-webkit-transform 500ms ease;-moz-transition:-moz-transform 500ms ease;-o-transition:-o-transform 500ms ease;transition:transform 500ms ease;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;} .csstransforms3d.csstransitions.js-nav #inner-wrap {-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transform:translate3d(75%,0,0) scale3d(1,1,1);-moz-transform:translate3d(75%,0,0) scale3d(1,1,1);-ms-transform:translate3d(75%,0,0) scale3d(1,1,1);-o-transform:translate3d(75%,0,0) scale3d(1,1,1);transform:translate3d(75%,0,0) scale3d(1,1,1);} .csstransforms3d.csstransitions.js-ready #nav .block {filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);opacity:.7;-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transition:opacity 300ms 100ms,-webkit-transform 500ms ease;-webkit-transition-delay:ease,0;-moz-transition:opacity 300ms 100ms ease,-moz-transform 500ms ease;-o-transition:opacity 300ms 100ms ease,-o-transform 500ms ease;transition:opacity 300ms 100ms ease,transform 500ms ease;-webkit-transform:translate3d(75%,0,0) scale3d(0.9,0.9,0.9);-moz-transform:translate3d(75%,0,0) scale3d(0.9,0.9,0.9);-ms-transform:translate3d(75%,0,0) scale3d(0.9,0.9,0.9);-o-transform:translate3d(75%,0,0) scale3d(0.9,0.9,0.9);transform:translate3d(75%,0,0) scale3d(0.9,0.9,0.9);-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;-ms-transform-origin:50% 0;-o-transform-origin:50% 0;transform-origin:50% 0;} .csstransforms3d.csstransitions.js-nav #nav .block {filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);opacity:1;-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);} } /* ---- 721 ( + ) ---- */ @media screen and (min-width: 45.0625em){ /* 721px */ .nav-btm {margin-bottom: 1.40625em /* 22.5px */} .nav-btn {display: none;} .logo2 {display: none;} #nav {display: block;text-align: center;} #nav .block {padding: 0; } #nav ul {text-align: center;white-space: nowrap;} #nav li { display: inline-block; color: #f4efe6; /* canvas */ font-family: "brandon-grotesque", sans-serif; font-style: normal; font-weight: 700; border-right: 1px solid rgba(255, 255, 255, 0.2); } #nav li:last-child {border-right: none;} #nav li a { color: #f4efe6; /* canvas */ text-decoration: none; text-transform: uppercase; letter-spacing: 0.125em; /* 2px */ font-size: 0.8125em; padding: 0.42857em 0.15714em 0.22857em 0.15714em; margin: 0 0.6em; -webkit-backface-visibility: hidden; /*prevents safari flicker*/ -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } #nav li a:hover {text-shadow: 0px 0px 11px #FFFFFF; color: #FFFFFF; -o-transition:color .3s ease-in-out; -ms-transition:color .3s ease-in-out; -moz-transition:color .3s ease-in-out; -webkit-transition:color .3s ease-in-out; /* canvas */} } /* ---- 960 ( + ) large desktop ---- */ @media screen and (min-width: 60em){ /* 960px */ #nav {display: inline-block;float: right;position: relative;} #nav ul {text-align: right;white-space: nowrap;} #nav li { font-weight: 700; padding: 1em; /* for spacing */ border-right: none; } #nav li a { font-weight: 700; text-transform: uppercase; letter-spacing: 0.09375em; /* 1.5px */ font-size: 0.8125em; padding: 0 0 .3em 0; /* for underline */ -webkit-backface-visibility: hidden; /*prevents safari flicker*/ -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } #nav li.is-active a {color: #fff;} } /* ================================================================================ BILLBOARD ================================================================================ */ /* ---- base (all) ---- */ .billboard {background: #ffffff; color: #222222; margin: 0 auto;} .bill-img { display: inline-block; width: 100%; width: auto \9; /* IE8 and below */ height: auto; z-index: -1; position: absolute; left: 0; top: 0; /*background-attachment: fixed; background-size: cover;*/ } .bill-img-sm { position: absolute; top: 0; width: 100%; } .bill-arrow { /* TEST for animated gif */ background-size: 100% 100%; width: 2.1875em; /* 35px */ height: 2.625em; /* 42px */ display: block; } .down-arrows {display: none;} /* ---- 1200 ( + ) large desktop ---- */ @media screen and (min-width: 75em){ /* 1200px */ .down-arrows { display: block; -webkit-animation-duration: 2s;-moz-animation-duration: 2s;-ms-animation-duration: 2s;-o-animation-duration: 2s;animation-duration: 1s; -webkit-animation-delay: 4s;-moz-animation-delay: 4s;-ms-animation-delay: 4s;-o-animation-delay: 4s;animation-delay: 4s; } .down-arrows a { display: block; margin: 0 auto; width: 2.1875em; /* 35px */ } .down-arrows img { background-size: 100% 100%; width: 2.1875em; /* 35px */ height: 0.8125em; /* 13px */ display: block; } } /* BILL SLIDE ======================== */ /* ---- base (all) ---- */ .bill-slide {padding-top: 5%;} .bill-half-slide, .bill-full-slide { overflow: hidden; position: relative; padding-bottom: 6%; } /* ---- 960 ( + ) large desktop ---- */ @media screen and (min-width: 60em){ /* 960px */ .bill-slide {padding-top: 0;} } /* ---- 1100 ( + ) large desktop ---- */ @media screen and (min-width: 68.75em){ /* 1100px */ .bill-slide {padding-top: 5%;} } /* HEADLINE ======================== */ /* ---- base (all) ---- */ .bill-head { color: #f4efe6; /* canvas */ font-family: 'veneerregular', sans-serif; font-size: 4.5em; /* 120px */ letter-spacing: 3px; text-align: center; text-transform: uppercase; display: block; margin-top: .5em; margin-bottom: -.5em; -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s; -webkit-animation-delay: .5s;-moz-animation-delay: .5s;-ms-animation-delay: .5s;-o-animation-delay: .5s;animation-delay: .5s; } /* SUB-HEADLINE ======================== */ /* ---- base (all) ---- */ .bill-sub { font-family: "brandon-grotesque",sans-serif; font-size: 1.1em; letter-spacing: 1px; font-style: italic; font-weight: 500; -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s; -webkit-animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s; } .bill-sub-sm { font-family: "brandon-grotesque",sans-serif; font-size: .8em; letter-spacing: 0; font-style: italic; font-weight: 500; -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s; -webkit-animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s; } /* ---- 480 ( + ) smartphones ---- */ @media screen and (min-width: 30em){ /* 480px */ .bill-sub {font-size: 1.5em /* 24px */;letter-spacing: 2px;font-weight: 400;} .bill-sub-sm {font-size: 1em /* 24px */;letter-spacing: 1px;font-weight: 400;} } /* ---- 768 ( + ) ---- */ @media screen and (min-width: 48em){ /* 768px */ .bill-sub {font-size: 2em /* 32px */;letter-spacing: 3px;font-weight: 300;} .bill-sub-sm {font-size: 1.5em /* 32px */;letter-spacing: 2px;font-weight: 300;} } /* ---- 960 ( + ) large desktop ---- */ @media screen and (min-width: 60em){ /* 960px */ .bill-sub {font-size: 2.75em /* 44px */;letter-spacing: 4px;font-weight: 300;} .bill-sub-sm {font-size: 2em /* 32px */;letter-spacing: 2px;font-weight: 300;} } /* SEPARATOR ======================== */ /* ---- base (all) ---- */ .bill-sep { border-bottom: 1px solid; height: 1px; /* 22px */ width: 9.0625em /* 145px */; margin: .5em auto 1em; display: none; -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s; -webkit-animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s; } /* ---- 768 ( + ) ---- */ @media screen and (min-width: 48em){ /* 768px */ .bill-sep {width: 12.1875em /* 195px */;margin: 1em auto 1.5em;display: none;} } /* ---- 960 ( + ) large desktop ---- */ @media screen and (min-width: 60em){ /* 960px */ .bill-sep {width: 15.3125em /* 245px */;margin: 1em auto 1.5em;display: inherit;} } /* TEXT ======================== */ /* ---- base (all) ---- */ .bill-text { font-family: "brandon-grotesque",sans-serif; font-size: 0.8em; line-height: 1.1; font-style: normal; text-align: center; font-weight: 400; margin: 0 auto; display: none; -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s; -webkit-animation-delay: 1s;-moz-animation-delay: 1s;-ms-animation-delay: 1s;-o-animation-delay: 1s;animation-delay: 1s; } /* ---- 768 ( + ) ---- */ @media screen and (min-width: 48em){ /* 768px */ .bill-text {font-size: 1.1em /* 24px */;font-weight: 300;display: none;} } /* ---- 960 ( + ) large desktop ---- */ @media screen and (min-width: 60em){ /* 960px */ .bill-text {font-size: 1.2em /* 26px */;font-weight: 300;display: inherit;} } /* LOGO GRAPHIC HEADLINE(s) ======================== */ /* ---- base (all) ---- */ .logo-left { width: auto; height: auto; max-width: 110px; max-height: 129px; z-index: 1; position: relative; float: left; -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s; -webkit-animation-delay: .5s;-moz-animation-delay: .5s;-ms-animation-delay: .5s;-o-animation-delay: .5s;animation-delay: .5s; } .logo-center { width: auto; height: auto; max-width: 110px; max-height: 129px; z-index: 1; margin-bottom: 5em; -webkit-animation-duration: 1s;-moz-animation-duration: 1s;-ms-animation-duration: 1s;-o-animation-duration: 1s;animation-duration: 1s; -webkit-animation-delay: .5s;-moz-animation-delay: .5s;-ms-animation-delay: .5s;-o-animation-delay: .5s;animation-delay: .5s; } /* ---- 480 ( + ) smartphones ---- */ @media screen and (min-width: 30em){ /* 480px */ .logo-left {max-width: 185px; max-height: 218px; padding-left: 5%;} .logo-center {margin-top: 10%;} } /* ---- 721 ( + ) ---- */ @media screen and (min-width: 45.0625em){ /* 721px */ .logo-left {max-width: 217px; max-height: 255px;} .logo-center {max-width: 460px; max-height: 202px; margin-top: 6%;} } /* ---- 768 ( + ) ---- */ @media screen and (min-width: 48em){ /* 768px */ .logo-left {max-width: 285px; max-height: 335px;} } /* ---- 960 ( + ) large desktop ---- */ @media screen and (min-width: 60em){ /* 960px */ .logo-left {max-width: 350px; max-height: 412px; padding-top: 5% !important;} /* countering .bill-slide queries */ .logo-center {max-width: 560px; max-height: 246px; margin-top: 12%;} /* countering .bill-slide queries */ } /* ---- 1100 ( + ) large desktop ---- */ @media screen and (min-width: 68.75em){ /* 1100px */ } /* ---- 1200 ( + ) large desktop ---- */ @media screen and (min-width: 75em){ /* 1200px */ .logo-left {max-width: 435px; max-height: 512px;} .logo-center {max-width: 660px; max-height: 290px; margin-top: 13%;} /* countering .bill-slide queries */ } /* ================================================================================ CONTENT ================================================================================ */ /* ---- base (all) ---- */ .content {background: #ffffff; color: #222222; margin: 0 auto;} .quote { padding-top: 7%; font-family: "ff-meta-serif-web-pro", serif; font-style: italic; font-weight: 500; font-size: 1.1875em; line-height: 1.65; text-align: center; } #bottomLeftNav {margin-top: 3em; margin-bottom: 4em;} /* ---- 960 ( + ) large desktop ---- */ @media screen and (min-width: 60em){ /* 960px */ .quote {text-align: left;} #bottomLeftNav {margin-top: 0; margin-bottom: 0;} } /* MICRO-LOGOS ======================== */ /* ---- base (all) ---- */ .micro-logo {background-size: 100% 100%;display: block;} .micro-logo {width: 160px; height: 143px;margin-top: 0;} /* ---- 480 ( + ) smartphones ---- */ @media screen and (min-width: 30em){ /* 480px */ .micro-logo {width: 205px; height: 183px;margin-top: 4%;} } /* ---- 721 ( + ) ---- */ @media screen and (min-width: 45.0625em){ /* 721px */ .micro-logo {width: 350px; height: 312px;margin-top: 0;} } /* ---- 768 ( + ) ---- */ @media screen and (min-width: 48em){ /* 768px */ } /* ---- 960 ( + ) large desktop ---- */ @media screen and (min-width: 60em){ /* 960px */ .micro-logo {width: 390px; height: 348px;margin-top: 7%;} } /* ---- 1100 ( + ) xlarge desktop ---- */ @media screen and (min-width: 68.75em){ /* 1100px */ .micro-logo {width: 415px; height: 370px;margin-top: 5%;} .micro-logo {margin-bottom: 4em;} } /* ---- 1200 ( + ) xxlarge desktop ---- */ @media screen and (min-width: 75em){ /* 1200px */ .micro-logo {margin-top: 6%;} } /* ---- 1400 ( + ) xxxlarge desktop ---- */ @media screen and (min-width: 87.5em){ /* 1400px */ .micro-logo {width: 449px; height: 400px;margin-top: 10%;} } /* SECONDARY NAV ======================== */ /* ---- base (all) ---- */ ul.secnav { list-style: none; font-family: "brandon-grotesque", sans-serif; font-style: normal; font-weight: 500; font-size: 0.75em; text-transform: uppercase; letter-spacing: 1px; line-height: 1.4; padding-left: 0; } .secnav li:first-child {border-top: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;} .secnav li {text-align: center;position: relative;border-top: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0.1)*/;} .secnav li:last-child {border-bottom: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;margin-bottom: -13px;} .secnav li a { display: block; padding: 1em 1.5em; color: #222222; text-decoration: none; -webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out; } .secnav li a:hover {color: #dd971a; /* yellow */} .secnav li a.current {color: #dd971a; /* yellow */} /* ---- 960 ( + ) large desktop ---- */ @media screen and (min-width: 60em){ /* 960px */ .secnav li {text-align: left;} .secnav li:first-child {border-top: 1px solid rgba(34, 34, 34, 0)/*rgba(255, 255, 255, 0)*/;} .secnav li a:hover { /*color: #f4efe6; /* canvas */ color: #dd971a; /* yellow */ /*background: #222222;*/ background: transparent url("../img/global/arrow-hover.png") right center no-repeat; background-image: -webkit-linear-gradient(transparent, transparent), url("../img/global/arrow-hover.svg"); background-image: linear-gradient(transparent, transparent), url("../img/global/arrow-hover.svg"); } .secnav li a.current { color: #dd971a; /* yellow */ background: transparent url("../img/global/arrow-hover.png") right center no-repeat; background-image: -webkit-linear-gradient(transparent, transparent), url("../img/global/arrow-hover.svg"); background-image: linear-gradient(transparent, transparent), url("../img/global/arrow-hover.svg"); } } /* SECNAV2 ======================== */ ul.secnav2 { list-style: none; font-family: "brandon-grotesque", sans-serif; font-style: normal; font-weight: 500; font-size: 0.75em; text-transform: uppercase; letter-spacing: 1px; line-height: 1.4; padding-left: 0; } .secnav2 li:first-child {border-top: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;} .secnav2 li {text-align: center;position: relative;border-top: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0.1)*/;} .secnav2 li:last-child {border-bottom: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;margin-bottom: -13px;} .secnav2 li a { display: block; padding: 1em 1.5em; color: #222222; text-decoration: none; -webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out; } .secnav2 li a:hover {color: #dd971a; /* yellow */} .secnav2 li a.current {color: #dd971a; /* yellow */} /* TERTIARY NAV ======================== */ /* ---- base (all) ---- */ .ternav { list-style: none; background: #ffffff; padding: 0; text-transform: none; } .ternav li:first-child {border-top: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;} .ternav li:last-child {border-bottom: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;} .ternav li a {} .ternav li a:hover {color: #f4efe6 !Important; background: #222222;} .ternav2 { list-style: none; background: #ffffff; padding: 0; text-transform: none; } .ternav2 li:first-child {border-top: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;} .ternav2 li:last-child {border-bottom: 1px solid rgba(34, 34, 34, 0.1)/*rgba(255, 255, 255, 0)*/;} .ternav2 li a {} .ternav2 li a:hover {color: #f4efe6 !Important; background: #222222;} /* SELECTED ======================== */ /* ---- base (all) ---- */ .selected { color: #dd971a; /* yellow */ background: transparent url("../img/global/arrow-hover.png") right center no-repeat; background-image: -webkit-linear-gradient(transparent, transparent), url("../img/global/arrow-hover.svg"); background-image: linear-gradient(transparent, transparent), url("../img/global/arrow-hover.svg");} .selectedternav {color: #f4efe6 !Important; background: #222222;} .selectednav {color: #dd971a;} /* ================================================================================ THUMBS ================================================================================ */ /* ---- base (all) ---- */ .thumbs {background: #ffffff; color: #222222; margin: 0 auto; padding-bottom: 1em;} .filmrollbg {background-image:url(../img/filmtexturebg.jpg); color: #ffffff; margin: 0 auto; padding-bottom: 1em; padding-top: 1em; } .filmrollbg2 { background-image:url("../img/8filmgraindarker.webp"); background-attachment: fixed; color: #ffffff; margin: 0 auto; padding-bottom: 1em; padding-top: 1em; height: auto; width: 100vw; position: relative; background-size: cover;} .blackbg {background: #000000; color: #ffffff; margin: 0 auto; padding-bottom: 1em; padding-top: 1em; } .filmrollbg2 a {color: white;} .filmrollbg2 a hover {color: goldenrod;} .blackbg a {color: white;} .blackbg a hover {color: goldenrod;} /* Thick red border */ hr.new4 { border: 1.75px solid white; border-top: none; border-left: none; border-right: none; opacity: 0.2; } /* Wave */ @mixin wavy-border($color:#fff, $stroke:1, $width:50, $height:25) { border-image: url('data:image/svg+xml,') 0 0 100% repeat; border-width: 0 0 #{$height+$stroke}px; border-style: solid; } .wave { width: 35%; @include wavy-border(hsla(0, 0%, 75%, 0.9), 3, 12, 12); position: relative; } .wave:before, .wave:after { position: absolute; display: block; width: 20px; height: 30px; background-color: hsl(0, 0%, 75%); bottom: -22.5px; } .wave:before { border-radius: 30px 0 0 30px; left: -2px; } .wave:after { border-radius: 0 30px 30px 0; right: -2px; } .thumbnail2 { max-width: 333px; max-height: 333px; filter: sepia(95%); /* This section calls the slideInFromLeft animation we defined above */ animation: 40s ease-out 0s 1 scaleanimation; } .thumbnail3 { max-width: 333px; max-height: 333px; opacity: 0.8; /* filter: url(filters.svg#grayscale); Firefox 3.5+ */ filter: gray; /* IE5+ */ -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */ -webkit-transition: all .3s ease-in-out; } .thumbnail3:hover { filter: none; opacity: 1; -webkit-filter: grayscale(0); -webkit-transform: scale(1.07); } /* ================================================================================ EXAMPLE BOX ================================================================================ */ .examplebox {background: #000000; height: auto; width: auto; color: #ffffff; margin: 0 auto; outline-style: solid; outline-width: 1px; ; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 0.3em; font-size: 0.9em;} .exampleboxnewspaper {background: #f4f4f4; background-image: url("dictionarybg.png"); height: auto; width: auto; color: #222222; margin: 0 auto; outline-style: solid; outline-width: 1px; ; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 0.3em; font-size: 0.9em; -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);} .examplebox2 {background: rgba(44, 105, 170, 0.08); height: 80%; width: 80%; color: #222222; margin: 0 auto; outline-style: solid; outline-width: 1px; ; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 0.3em; font-size: 0.9em;} .examplebox2:hover {background: rgba(44, 105, 170, 0.1)} .examplebox3 {background: rgba(44, 105, 170, 0.08); height: 80%; width: 50%; color: #ffffff; margin: 0 auto; outline-style: solid; outline-width: 1px; ; padding-bottom: 1em; padding-left: 1em; padding-right: 1em; padding-top: 0.3em; font-size: 0.9em;} /* ================================================================================ MENU SELECTION ================================================================================ */ #text2 { padding: 1em; margin-bottom: -1em; font-size: 0.7em; text-align: right; } .menu-point { min-height: auto; max-height: 250px; margin-bottom: 5em; } #text3 { font-size: 0.9em; } #selectedmenu { list-style: none; font-family: "brandon-grotesque", sans-serif; font-style: normal; font-weight: 500; font-size: 1em; text-transform: uppercase; letter-spacing: 1px; line-height: 1.4; padding-left: 0; color: #dd971a; } #selectedmenu li a:hover {list-style: none; font-family: "brandon-grotesque", sans-serif; font-style: normal; font-weight: 500; font-size: 1em; text-transform: uppercase; letter-spacing: 1px; line-height: 1.4; padding-left: 0; color: #dd971a;} .rhetoricalpentagon {background: #ffffff; background-image: url("../img//rhetoricalpentagon.png"); background-repeat: no-repeat; background-size: contain; color: #222222; margin-left: 6em; outline-style: none;} /* ================================================================================ MANSON (content div) ================================================================================ */ /* ---- base (all) ---- */ .manson { border: 1px solid #a9a1aa ; -webkit-box-shadow: -1px 1px 12px -4px rgba(0,0,0,0.62); -moz-box-shadow: -1px 1px 12px -4px rgba(0,0,0,0.62); box-shadow: -1px 1px 12px -4px rgba(0,0,0,0.62); max-width: 350px; max-height: auto; text-align: center; font-style: normal; font-weight: 500; font-size: 0.95em; background-color: #ffffff; opacity: 1.0; } .manson:hover { border: 1px solid #a9a1aa ; -webkit-box-shadow: -1px 1px 16px -4px rgba(0,0,0,0.62); -moz-box-shadow: -1px 1px 16px -4px rgba(0,0,0,0.62); box-shadow: -1px 1px 16px -4px rgba(0,0,0,0.62); } #text { padding: 2em; margin-bottom: -1em; text-align: center; } a {text-decoration: none; color: #222222;-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;} a:hover {color: #000000;} /* ================================================================================ JUMPMENU ================================================================================ */ /* ---- base (all) ---- */ .jumpmenu { border: 1px solid #a9a1aa ; -webkit-box-shadow: -1px 1px 12px -4px rgba(0,0,0,0.62); -moz-box-shadow: -1px 1px 12px -4px rgba(0,0,0,0.62); box-shadow: -1px 1px 12px -4px rgba(0,0,0,0.62); max-width: 350px; max-height: auto; text-align: center; position: absolute; right: -172px; top: 23px; font-style: normal; font-weight: 500; font-size: 0.85em; background-color: #ffffff; opacity: 1.0; } #text { padding: 2em; margin-bottom: -1em; text-align: center; } a {text-decoration: none; color: #222222;-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;} a:hover {color: #000000;} /* ---- 960 ( + ) large desktop ---- */ @media screen and (max-width: 60em){ display: none;} /* ================================================================================ SLIDE IN DIV ================================================================================ */ .fadeinleft { opacity:0; max-width:100%; } .come-in { transform: translateY(150px); animation: come-in 0.8s ease forwards; } .come-in:nth-child(odd) { animation-duration: 0.6s; } .already-visible { transform: translateY(0); animation: none; } @keyframes come-in { to { transform: translateY(0); } } /* ================================================================================ MASONRY ================================================================================ */ /* ---- base (all) ---- */ .masonry-bgd {background: #f4f4f4; color: #222222; margin: 0 auto; padding-bottom: 2.3em;} #masonry {background: #f4f4f4; color: #222222; width: auto; margin: 0 auto;} a.load-more { /*width: 95%; margin: 0 auto;*/ border-top: solid 1px #c8c8c8; border-bottom: solid 1px #c8c8c8; text-align: center; font-family: "brandon-grotesque",sans-serif; font-style: normal; font-weight: 500; font-size: 1em; text-transform: uppercase; letter-spacing: 1px; display: block; line-height: 1.4; padding: 1em; text-decoration: none; color: #222222; -webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out; } a.load-more:hover {background: #222222;color: #f4efe6;} .item { background: #ffffff; display: block; float: left; /*width: 33.33%;*/ width: 17.1875em; /*width: 350px;*/ margin: 0 1.40625em 2.8125em 1.40625em; border: solid 1px #bfbfbf; -webkit-box-shadow: 0 0 5px #bfbfbf; -moz-box-shadow: 0 0 5px #bfbfbf; box-shadow: 0 0 5px #bfbfbf; } .item img { width: 100%; height: auto; } .item-title { font-family: "brandon-grotesque",sans-serif; font-style: normal; font-weight: 500; font-size: 1.125em; text-transform: uppercase; letter-spacing: 1px; display: block; line-height: 1.4; text-align: center; padding: 2.4em 2em 0 2em; } .item-title a {text-decoration: none; color: #222222;-webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;} .item-title a:hover {color: #dd971a;} .item-subtitle { font-family: "ff-meta-serif-web-pro", serif; font-style: normal; font-weight: 700; font-size: 1em; color: #683926; display: block; line-height: 1.4; text-align: center; padding: 0 0 .2em 0; } .item p { text-align: center; padding: 0 2em 2em 2em; } .item p a {border-bottom: none; font-style: normal; font-weight: normal;} /* ---- 480 ( + ) smartphones ---- */ @media screen and (min-width: 30em){ /* 480px */ .item {width: 12.5em;} .item-title {font-size: 1em; padding: 2.4em 1em 0 1em;} .item p {font-size: 0.875em} } /* ---- 768 ( + ) ---- */ @media screen and (min-width: 48em){ /* 768px */ .item {width: 17.1875em;} .item-title {font-size: 1.125em; padding: 2.4em 1em 0 1em;} .item p {font-size: 1em} } /* ---- 960 ( + ) large desktop ---- */ @media screen and (min-width: 60em){ /* 960px */ .item-title {font-size: 1em; padding: 2.4em 1em 0 1em;} } /* ---- 1180 ( + ) xlarge desktop ---- */ @media screen and (min-width: 73.75em){ /* 1180px */ .item {width: 21.875em;} .item-title {padding: 2.4em 2em 0 2em;} } /* ================================================================================ EMAIL, LOCATIONS & CONTACT ================================================================================ */ /* ---- base (all) ---- */ .action {background: #ffffff; color: #222222; margin: 0 auto; padding-bottom: 1em;} .action button { border: 0; width: 8px; height: 15px; padding: 15px 0 0 20px; background: transparent url("../img/global/arrow-input-gray.png") right center no-repeat; background-image: -webkit-linear-gradient(transparent, transparent), url("../img/global/arrow-input-gray.svg"); background-image: linear-gradient(transparent, transparent), url("../img/global/arrow-input-gray.svg"); } .action input.name, .action input.signup, .contact input.name, .contact input.signup, .contact textarea.comments { background-color: rgb(255,255,255); border: 1px solid #999999; padding: 0.8em 1em 0.6em 1em; margin: 1em 0 1em 0; font-family: "brandon-grotesque", sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: 0.0625em; /* 1px */ font-size: 1em; color: rgb(34,34,34); /* gray */ } .contact input.name, .contact input.signup, .contact textarea.comments {text-transform: none !important;} .action input.name {margin-left: 0em; margin-right: 0; width: 100%;} .action input.signup {width: 91%; float:left;} .contact input.name, .contact input.signup, .contact textarea.comments {width: 100%; float: left;} #formMessages { color: #666666; margin: 1em auto 0; } hr.dashed { display: inline-block; border: 0; border-top: 1px dashed #c8c8c8; margin: 0 0 .25em 0; padding: 0; width: 70%; } hr.dashed2 { display: inline-block; border: 0; border-top: 1px dashed #ffffff; margin: 0 0 .25em 0; padding: 0; width: 100%; } hr.space-redskaber { display: inline-block; border: 0; margin: 0 0 5em 0; padding: 0; width: 70%; } .company { font-family: "ff-meta-serif-web-pro", serif; font-weight: 700; text-transform: none; font-size: 1.125em; text-align: center; } .phone, .phone a, .address { font-family: "ff-meta-serif-web-pro", serif; font-style: normal; font-weight: 500; font-size: 1.125em; text-align: center; text-decoration: none; color: inherit; } .website a { color: #dd971a; font-family: "brandon-grotesque",sans-serif; font-style: normal; font-weight: 700; font-size: 1em; text-transform: uppercase; letter-spacing: 3px; display: block; text-align: center; text-decoration: none; -webkit-backface-visibility: hidden; /*prevents safari flicker*/-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out; } .website a:hover {color: #222222;} /* PLACEHOLDER */ [placeholder]:focus::-webkit-input-placeholder { transition: opacity 0.2s 0.2s ease; opacity: 0; } /* HTML5 placeholder text in input fields has (in the browsers implementing it so far) a light gray color. To style it, you'll need vendor prefix CSS properties. */ ::-webkit-input-placeholder {color: rgb(255,255,255);font-family: "brandon-grotesque", sans-serif;} :-moz-placeholder { /* Firefox 18- */color: rgb(255,255,255);font-family: "brandon-grotesque", sans-serif;} ::-moz-placeholder { /* Firefox 19+ */color: rgb(255,255,255);font-family: "brandon-grotesque", sans-serif;} :-ms-input-placeholder { color: rgb(255,255,255);font-family: "brandon-grotesque", sans-serif; } /* ---- 480 ( + ) smartphones ---- */ @media screen and (min-width: 30em){ /* 480px */ .action input.name, .action input.signup {width: 30%;} .action input.name {margin-left: 2.5em; margin-right: .75em;} .action input.signup {float:none;} .contact input.name, .contact input.signup {width: 48%;} .contact input.name {margin-right: 4%;} hr.dashed {width: 45%; margin: 0 0 .5em 0;} hr.space-redskaber {width: 45%; margin: 0 0 .5em 0;} .website {font-size: 1.25em} } /* ---- 600 ( + ) ---- */ @media screen and (min-width: 37.5em){ /* 600px */ hr.dashed {width: 30%;} hr.space-redskaber {width: 30%;} } /* ---- 768 ( + ) ---- */ @media screen and (min-width: 48em){ /* 768px */ .action input.name, .action input.signup {width: 25%;} hr.dashed {width: 32%;} hr.space-redskaber {width: 32%;} } /* ---- 960 ( + ) large desktop ---- */ @media screen and (min-width: 60em){ /* 960px */ .action input.name, .action input.signup {width: 20%; margin: 0 0 0 0;} .action input.name {margin-left: 2.3em; margin-right: .75em} hr.dashed {width: 25%;margin: 0 0 1.5em 0;} hr.space-redskaber {width: 25%; margin: 0 0 45px 0;} .website {font-size: 1.3em} } /* ================================================================================ COLLAGE ================================================================================ */ /* ---- base (all) ---- */ .collage { background: transparent; height: 16.75em /* 268px */; margin: 0 auto; } /* ---- 480 ( + ) smartphones ---- */ @media screen and (min-width: 30em){ /* 480px */ .collage {height: 25.1875em /* 403px */;} } /* ---- 600 ( + ) ---- */ @media screen and (min-width: 37.5em){ /* 600px */ .collage {height: 31.4375em /* 503px */;} } /* ---- 768 ( + ) ---- */ @media screen and (min-width: 48em){ /* 768px */ .collage {height: 40.25em /* 644px */;} } /* ---- 960 ( + ) large desktop ---- */ @media screen and (min-width: 60em){ /* 960px */ .collage {height: 50.3125em /* 805px */;} } /* ================================================================================ FOOTER ================================================================================ */ /* ---- base (all) ---- */ .footer {background-image:url(../img/filmtexturedarker.jpg);margin: 0 auto;color: rgb(138,134,128); width: 100%; bottom: 0; position: absolute; /* gray */} .space { margin-top: 450px; } /* FOOTER TEXT ======================== */ /* ---- base (all) ---- */ .footer p { font-weight: 500; font-style: normal; font-size: 0.875em; /* 14px */ text-align: center; } .footer p a { font-weight: 500; font-style: italic; color: rgb(138,134,128); /* gray */ text-decoration: none; } .footer p a:hover {text-decoration: none; color: #ffffff;} } /* ---- 960 ( + ) large desktop ---- */ @media screen and (min-width: 60em){ /* 960px */ .footer p {text-align: left;} } } /* PLACEHOLDER */ /*input:focus::-webkit-input-placeholder {color: transparent;}*/ [placeholder]:focus::-webkit-input-placeholder { transition: opacity 0.2s 0.2s ease; opacity: 0; } /* HTML5 placeholder text in input fields has (in the browsers implementing it so far) a light gray color. To style it, you'll need vendor prefix CSS properties. */ ::-webkit-input-placeholder {color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;} :-moz-placeholder { /* Firefox 18- */color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;} ::-moz-placeholder { /* Firefox 19+ */color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;} :-ms-input-placeholder { color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif; } /* FOOTER EMAIL SIGNUP ======================== */ /* ---- base (all) ---- */ .footer button { border: 0; width: 26px; height: 27px; background: transparent url("../img/global/arrow-input.png") right center no-repeat; background-image: -webkit-linear-gradient(transparent, transparent), url("../img/global/arrow-input.svg"); background-image: linear-gradient(transparent, transparent), url("../img/global/arrow-input.svg"); } input.signup { background-color: rgb(34,34,34); border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.8em 1em 0.6em 1em; font-family: "brandon-grotesque", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.0625em; /* 1px */ font-size: 0.8125em; color: rgb(138,134,128); /* gray */ width: 85%; width: 75%\9; /* IE8 and below */ } /* PLACEHOLDER */ /*input:focus::-webkit-input-placeholder {color: transparent;}*/ [placeholder]:focus::-webkit-input-placeholder { transition: opacity 0.2s 0.2s ease; opacity: 0; } /* HTML5 placeholder text in input fields has (in the browsers implementing it so far) a light gray color. To style it, you'll need vendor prefix CSS properties. */ ::-webkit-input-placeholder {color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;} :-moz-placeholder { /* Firefox 18- */color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;} ::-moz-placeholder { /* Firefox 19+ */color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif;} :-ms-input-placeholder { color: rgb(138,134,128);font-family: "brandon-grotesque", sans-serif; } /* ========================= SOCIAL MEDIA ============================ */ .wrap{ margin: 0 auto; padding: 1%; width: 20em; font-family: "brandon-grotesque", sans-serif; font-style: normal; font-weight: 500; font-size: 0.95em; text-transform: uppercase; letter-spacing: 1px; } .wrap div{ display: inline-block; } .icon{ background-color:#222; background-repeat:no-repeat; background-position:center center; border-radius: 25px; height: 3.0em; width: 3.0em; -webkit-transition: background-color 0.4s ease; -moz-transition: background-color 0.4s ease; -ms-transition: background-color 0.4s ease; -o-transition: background-color 0.4s ease; transition: background-color 0.4s ease; } .goof{ -webkit-transition: all 0.4s cubic-bezier(0,2,0,2); -moz-transition: all 0.4s cubic-bezier(0,2,0,2); -ms-transition: all 0.4s cubic-bezier(0,2,0,2); -o-transition: all 0.4s cubic-bezier(0,2,0,2); transition: all 0.4s cubic-bezier(0,2,0,2); } .goof:hover{ background-size:35%; } .icon a{ display: block; height: 100%; width: 100%; } .facebook{ background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgdmlld0JveD0iLTAuNyAtMC42IDEzNCAyNzgiPjxzdHlsZT4uc3R5bGUwe2ZpbGw6CSNGRkZGRkY7fTwvc3R5bGU+PHBhdGggZD0iTTgyLjYgNThjMCAwLTAuNy01LjUgNC40LTkuNmM1LjEtNCA5LjktMy43IDkuOS0zLjdjMTIuOS0xLjYgMjkuOCAyLjYgMjkuOCAyLjZsNS45LTQyLjdjMCAwLTU5LjctMTQuMy04NS45IDcuMkMyOS41IDI0LjUgMjkuMyA0My43IDI5LjMgNDMuN3Y0Ny43SDAuMmwtMC4yIDQyaDI5LjRsLTEuMSAxNDMuMWw1Mi44IDAuM2wwLjMtMTQzLjRoNDMuMWwyLjktNDEuOWwtNDUuMS0wLjJMODIuNiA1OHoiIGNsYXNzPSJzdHlsZTAiLz48L3N2Zz4=); background-size:25%; } .facebook:hover{ background-color:#3664A2; } .lectio{ background-image:url(https://www.englishclass.dk/_themes/englishclass/img/lectio.png); background-size:30%; } .lectio:hover{ background-color:#BDC8D0; } .instagram{ background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iLTAuOSAtMC44IDYxIDYxIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZmlsbD0iI0ZGRkZGRiIgZD0iTTcuNywwaDQ0LjVjNC4yLDAsNy43LDMuNSw3LjcsNy43djQ0LjVjMCw0LjItMy41LDcuNy03LjcsNy43SDcuN2MtNC4yLDAtNy43LTMuNS03LjctNy43VjcuN0MwLDMuNSwzLjUsMCw3LjcsMEw3LjcsMHogTTQzLjYsNi43Yy0xLjUsMC0yLjcsMS4yLTIuNywyLjd2Ni41YzAsMS41LDEuMiwyLjcsMi43LDIuN2g2LjhjMS41LDAsMi43LTEuMiwyLjctMi43VjkuNGMwLTEuNS0xLjItMi43LTIuNy0yLjdINDMuNkw0My42LDYuN3ogTTUzLjEsMjUuM2gtNS4zYzAuNSwxLjYsMC44LDMuNCwwLjgsNS4xYzAsMTAtOC4zLDE4LTE4LjYsMThzLTE4LjYtOC4xLTE4LjYtMThjMC0xLjgsMC4zLTMuNSwwLjgtNS4xSDYuN3YyNS4zQzYuNyw1Miw3LjcsNTMsOSw1M2g0MS43YzEuMywwLDIuNC0xLjEsMi40LTIuNFYyNS4zTDUzLjEsMjUuM3ogTTMwLDE4LjJjLTYuNiwwLTEyLDUuMi0xMiwxMS43YzAsNi40LDUuNCwxMS43LDEyLDExLjdzMTItNS4yLDEyLTExLjdDNDIsMjMuNCwzNi43LDE4LjIsMzAsMTguMnoiLz48L3N2Zz4=); background-size:55%; } .instagram:hover{ background-color:#C667E3 } .vimeo{ background-image:url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQxcHgiIGhlaWdodD0iMzZweCIgdmlld0JveD0iLTAuNzM4IC0wLjU2NiA0MSAzNiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAtMC43MzggLTAuNTY2IDQxIDM2IiB4bWw6c3BhY2U9InByZXNlcnZlIj48cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMzkuOTgsNy45ODNjLTAuMTc4LDMuODg2LTIuODk3LDkuMjA1LTguMTU3LDE1Ljk2Yy01LjQzOCw3LjA1LTEwLjA0LDEwLjU3NS0xMy44MDMsMTAuNTc1Yy0yLjMzMywwLTQuMzA3LTIuMTUtNS45MTctNi40NTJjLTEuMDc3LTMuOTQ5LTIuMTUxLTcuODktMy4yMjgtMTEuODM1Yy0xLjE5Ni00LjMwNC0yLjQ4MS02LjQ1NS0zLjg1Ni02LjQ1NWMtMC4yOTcsMC0xLjM0NSwwLjYyOC0zLjEzNSwxLjg4M0wwLDkuMjM5YzEuOTczLTEuNzMzLDMuOTE2LTMuNDY2LDUuODI5LTUuMTk5YzIuNjI2LTIuMjcyLDQuNTk5LTMuNDY3LDUuOTE0LTMuNTg2YzMuMTA5LTAuMjk5LDUuMDIyLDEuODI0LDUuNzM5LDYuMzY2YzAuNzc2LDQuOTAxLDEuMzE1LDcuOTQ4LDEuNjEyLDkuMTQyYzAuODk5LDQuMDY3LDEuODgzLDYuMDk0LDIuOTYsNi4wOTRjMC44MzYsMCwyLjA5Mi0xLjMxMSwzLjc2NC0zLjk0MmMxLjY3NS0yLjYyOSwyLjU3LTQuNjMsMi42ODgtNi4wMDVjMC4yMzgtMi4yNzEtMC42NTctMy40MDgtMi42ODgtMy40MDhjLTAuOTU1LDAtMS45NDMsMC4yMS0yLjk1NywwLjYyN2MxLjk3My02LjM5Miw1LjczNS05LjUwMiwxMS4yOTQtOS4zMjFDMzguMjc3LDAuMTI3LDQwLjIxOSwyLjc4NiwzOS45OCw3Ljk4MyIvPjwvc3ZnPg==); background-size:65%; } .vimeo:hover{ background-color:#1ab7ea; } /* ========================= SOCIAL MEDIA ============================ */ a:hover { text-decoration: none; } header, .demo, .demo p { margin: 0em 0; text-align: center; } /* ========================= TOOL TIP (BLACK ON WHITE BG) ============================ */ /* Base styles for the element that has a tooltip */ [data-tooltip], .tooltip { position: relative; cursor: pointer; } /* Base styles for the entire tooltip */ [data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after { position: absolute; visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); pointer-events: none; } /* Show the entire tooltip on hover and focus */ [data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } /* Base styles for the tooltip's directional arrow */ .tooltip:before, [data-tooltip]:before { z-index: 1001; border: 6px solid transparent; background: transparent; content: ""; } /* Base styles for the tooltip's content area */ .tooltip:after, [data-tooltip]:after { z-index: 1000; padding: 5px; width: 150px; background-color: #000; border-radius: 5px; background-color: hsla(0, 100%, 100%, 0.95); color: #000; content: attr(data-tooltip); font-size: 14px; font-family: "brandon-grotesque",sans-serif; font-style: normal; line-height: 1.2; text-align: center; } /* Directions */ /* Top (default) */ [data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after, .tooltip-top:before, .tooltip-top:after { bottom: 100%; left: 50%; } [data-tooltip]:before, .tooltip:before, .tooltip-top:before { margin-left: -6px; margin-bottom: -12px; border-top-color: #000; border-top-color: hsla(0, 100%, 100%, 1.0); } /* Horizontally align top/bottom tooltips */ [data-tooltip]:after, .tooltip:after, .tooltip-top:after { margin-left: -80px; } [data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after, .tooltip-top:hover:before, .tooltip-top:hover:after, .tooltip-top:focus:before, .tooltip-top:focus:after { -webkit-transform: translateY(-12px); -moz-transform: translateY(-12px); transform: translateY(-12px); } /* Left */ .tooltip-left:before, .tooltip-left:after { right: 100%; bottom: 50%; left: auto; } .tooltip-left:before { margin-left: 0; margin-right: -12px; margin-bottom: 0; border-top-color: transparent; border-left-color: #000; border-left-color: hsla(0, 100%, 100%, 1.0); } .tooltip-left:hover:before, .tooltip-left:hover:after, .tooltip-left:focus:before, .tooltip-left:focus:after { -webkit-transform: translateX(-12px); -moz-transform: translateX(-12px); transform: translateX(-12px); } /* Bottom */ .tooltip-bottom:before, .tooltip-bottom:after { top: 100%; bottom: auto; left: 50%; } .tooltip-bottom:before { margin-top: -12px; margin-bottom: 0; border-top-color: transparent; border-bottom-color: #000; border-bottom-color: hsla(0, 100%, 100%, 1.0); } .tooltip-bottom:hover:before, .tooltip-bottom:hover:after, .tooltip-bottom:focus:before, .tooltip-bottom:focus:after { -webkit-transform: translateY(12px); -moz-transform: translateY(12px); transform: translateY(12px); } /* Right */ .tooltip-right:before, .tooltip-right:after { bottom: 50%; left: 100%; } .tooltip-right:before { margin-bottom: 0; margin-left: -12px; border-top-color: transparent; border-right-color: #000; border-right-color: hsla(0, 100%, 100%, 1.0); } .tooltip-right:hover:before, .tooltip-right:hover:after, .tooltip-right:focus:before, .tooltip-right:focus:after { -webkit-transform: translateX(12px); -moz-transform: translateX(12px); transform: translateX(12px); } /* Move directional arrows down a bit for left/right tooltips */ .tooltip-left:before, .tooltip-right:before { top: 3px; } /* Vertically center tooltip content for left/right tooltips */ .tooltip-left:after, .tooltip-right:after { margin-left: 0; margin-bottom: -16px; } /* ========================= TOOL TIP 2 (WHITE ON BLACK BG) ============================ */ /* Base styles for the element that has a tooltip */ [data-tooltip2], .tooltip2 { position: relative; cursor: pointer; } /* Base styles for the entire tooltip */ [data-tooltip2]:before, [data-tooltip2]:after, .tooltip2:before, .tooltip2:after { position: absolute; visibility: hidden; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); pointer-events: none; } /* Show the entire tooltip on hover and focus */ [data-tooltip2]:hover:before, [data-tooltip2]:hover:after, [data-tooltip2]:focus:before, [data-tooltip2]:focus:after, .tooltip2:hover:before, .tooltip2:hover:after, .tooltip2:focus:before, .tooltip2:focus:after { visibility: visible; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; } /* Base styles for the tooltip's directional arrow */ .tooltip2:before, [data-tooltip2]:before { z-index: 1001; border: 6px solid transparent; background: transparent; content: ""; } /* Base styles for the tooltip's content area */ .tooltip2:after, [data-tooltip2]:after { z-index: 1000; padding: 5px; width: 150px; background-color: #000; border-radius: 5px; background-color: hsla(0, 0%, 20%, 0.9); color: #fff; content: attr(data-tooltip2); font-size: 14px; font-family: "brandon-grotesque",sans-serif; font-style: normal; line-height: 1.2; text-align: center; } /* Directions */ /* Top (default) */ [data-tooltip2]:before, [data-tooltip2]:after, .tooltip2:before, .tooltip2:after, .tooltip2-top:before, .tooltip2-top:after { bottom: 100%; left: 50%; } [data-tooltip2]:before, .tooltip2:before, .tooltip2-top:before { margin-left: -6px; margin-bottom: -12px; border-top-color: #000; border-top-color: hsla(0, 0%, 20%, 0.9); } /* Horizontally align top/bottom tooltips */ [data-tooltip2]:after, .tooltip2:after, .tooltip2-top:after { margin-left: -80px; } [data-tooltip2]:hover:before, [data-tooltip2]:hover:after, [data-tooltip2]:focus:before, [data-tooltip2]:focus:after, .tooltip2:hover:before, .tooltip2:hover:after, .tooltip2:focus:before, .tooltip2:focus:after, .tooltip2-top:hover:before, .tooltip2-top:hover:after, .tooltip2-top:focus:before, .tooltip2-top:focus:after { -webkit-transform: translateY(-12px); -moz-transform: translateY(-12px); transform: translateY(-12px); } /* Left */ .tooltip2-left:before, .tooltip2-left:after { right: 100%; bottom: 50%; left: auto; } .tooltip2-left:before { margin-left: 0; margin-right: -12px; margin-bottom: 0; border-top-color: transparent; border-left-color: #000; border-left-color: hsla(0, 0%, 20%, 0.9); } .tooltip2-left:hover:before, .tooltip2-left:hover:after, .tooltip2-left:focus:before, .tooltip2-left:focus:after { -webkit-transform: translateX(-12px); -moz-transform: translateX(-12px); transform: translateX(-12px); } /* Bottom */ .tooltip2-bottom:before, .tooltip2-bottom:after { top: 100%; bottom: auto; left: 50%; } .tooltip2-bottom:before { margin-top: -12px; margin-bottom: 0; border-top-color: transparent; border-bottom-color: #000; border-bottom-color: hsla(0, 0%, 20%, 0.9); } .tooltip2-bottom:hover:before, .tooltip2-bottom:hover:after, .tooltip2-bottom:focus:before, .tooltip2-bottom:focus:after { -webkit-transform: translateY(12px); -moz-transform: translateY(12px); transform: translateY(12px); } /* Right */ .tooltip2-right:before, .tooltip2-right:after { bottom: 50%; left: 100%; } .tooltip2-right:before { margin-bottom: 0; margin-left: -12px; border-top-color: transparent; border-right-color: #000; border-right-color: hsla(0, 0%, 20%, 0.9); } .tooltip2-right:hover:before, .tooltip2-right:hover:after, .tooltip2-right:focus:before, .tooltip2-right:focus:after { -webkit-transform: translateX(12px); -moz-transform: translateX(12px); transform: translateX(12px); } /* Move directional arrows down a bit for left/right tooltips */ .tooltip2-left:before, .tooltip2-right:before { top: 3px; } /* Vertically center tooltip content for left/right tooltips */ .tooltip2-left:after, .tooltip2-right:after { margin-left: 0; margin-bottom: -16px; } /* ================================================================================== TOOLTIPS ================================================================================== */ .tooltips { position: relative; display: inline-block; cursor: pointer; } .tooltips2 { position: relative; display: inline-block; cursor: pointer; font-weight: bold; } .playable { font-weight:normal; } .playable { cursor: pointer; } .tooltip-heading { display: inline-flex; margin-bottom: 10px; margin-top: 8px; text-align: left; } .subscript { text-align: center; color: #C5C5C5; font-size: 13px; margin: 0.5em; font-weight:normal; } .tooltip-heading h3 { color: #000000; font-weight: bold; font-size: 14px; margin-top: -16px; padding-right: 2px; padding-left: 2px; } .sub-heading { margin-bottom: 7px; margin-top: -16px; text-align: center; font-style: italic; padding: 0px, 2px, 0px, 2px; font-size: 14px; } .tooltips .tooltiptext { cursor: auto; visibility: hidden; width: 175px; background: rgba(0, 0, 0, 0.9); color: #fff; border-radius: 6px; padding: 3px 0; position: absolute; font-style: italic; bottom: 100%; left: 0%; margin-left: -70px; margin-bottom: 2px; text-align: center; z-index: 99; /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */ opacity: 0; transition: opacity 0.5s; } .tooltips:hover .tooltiptext { visibility: visible; opacity: 1; } span.tooltiptext:after { content: ''; position: absolute; left: 46%; top: 100%; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid rgba(0, 0, 0, 0.9); clear: both; } .tooltips:after { visibility: hidden; } .tooltips2 .tooltiptext { cursor: auto; visibility: hidden; width: 175px; background: rgba(0, 0, 0, 0.9); color: #fff; border-radius: 6px; padding: 3px 0; position: absolute; font-style: italic; bottom: 100%; left: 0%; margin-left: -70px; margin-bottom: 2px; text-align: center; z-index: 99; /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */ opacity: 0; transition: opacity 0.5s; } .tooltips2:hover .tooltiptext { visibility: visible; opacity: 1; } span.tooltiptext:after { content: ''; position: absolute; left: 46%; top: 100%; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid rgba(0, 0, 0, 0.9); clear: both; } .tooltips2:after { visibility: hidden; } .fas-0 { color: #0580FF; } .fas-1 { color: red; } .voices { text-align: left; margin-left: 22px; font-size: 13px; margin-bottom: -3px; } .voices:last-child { margin-bottom: 2px; } .voices i { cursor: pointer; font-size: 15px; margin-right: 10px; opacity: 0.8; } .voices i:hover{ opacity: 0.9; } /* IMAGE TOOLTIPS */ .image-tooltips { position: relative; display: inline-block; cursor: pointer; font-weight: bold; z-index: 99; } .image-tooltip-heading { display: inline-flex; margin-top: 3px; } .image-tooltip-heading h3 { color: #000000; font-weight: bold; font-size: 14px; font-family: "brandon-grotesque",sans-serif; padding-right: 2px; padding-left: 2px; } .image-tooltips .image-tooltiptext { cursor: auto; visibility: hidden; width: 217px; background-color: rgba(135, 135, 135, 0.95); color: #000; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 100%; left: 0; right: 0; margin-left: -75px; margin-bottom: 4px; text-align: center; /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */ opacity: 0; transition: opacity 0.5s; } .image-tooltips:hover .image-tooltiptext { visibility: visible; opacity: 1; } span.image-tooltiptext:after { content: ''; position: absolute; left: 46%; top: 100%; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid rgba(135, 135, 135, 0.95); clear: both; } .image-tooltips:after { visibility: hidden; } .image-tooltiptext-content { padding: 10px; margin-top: -10px; } .image-tooltiptext-content img { height: 105px; filter:grayscale(0.9); } .image-tooltiptext-content p { font-size: 12px; font-weight: normal; margin-bottom: 0; margin-top: 0; color: #000; padding-top: 4px; } .playable { font-weight:normal; font-style: italic; font-size: 13px; } /* -------------------------------- MAYA images -------------------------------- */ .maya{ max-width: 100%; height: auto; }