/* @override http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1478545713 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1478548575 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1478563740 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1478563795 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1478565174 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1478614004 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1478614163 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1478615575 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1478615804 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1478617978 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1478625546 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1478700736 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479573715 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479648182 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479654659 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479661247 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479661521 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479662028 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479662968 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479663436 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479664234 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479664790 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479666472 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479667768 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479668388 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479716162 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479718683 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479810126 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479821806 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479822260 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479827198 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479834156 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479837029 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479860576 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1479997414 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1480854668 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1480978328 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1480982295 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481026264 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481027088 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481027560 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481027800 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481033921 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481116256 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481116441 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481191736 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481205471 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481205621 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481231332 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481233977 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481235499 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481236993 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481671112 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481671436 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481671612 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481671782 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481709528 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481898178 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481899084 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481932069 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481983604 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481985154 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481985660 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1481997818 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1482096238 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1482449175 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1482516523 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1482521044 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1482524923 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1482526213 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1482591171 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1482773024 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1482965093 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483039528 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483113835 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483311972 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483349940 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483372582 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483391593 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483398442 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483626236 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483658118 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483882976 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483883920 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483910786 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483913363 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483913722 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483914163 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483914545 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483915944 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483968714 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483976062 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483977313 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483980733 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1483980988 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484000998 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484142913 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484144998 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484148532 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484149778 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484155347 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484157471 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484161386 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484164857 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484165868 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484216598 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484227712 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484233024 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484258513 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484263487 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484402337 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484402922 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484403406 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484404076 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484408511 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484411803 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484412509 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484414092 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484415261 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484415464 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484416521 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484418783 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484478167 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484481058 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484481928 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484482184 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484482639 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484519773 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484566956 http://localhost:8888/joecharlotte/themes/simple/css/layout.css?m=1484569580 http://www.joeandcharlotte.co.uk/themes/simple/css/layout.css?m=1484593781 http://localhost:8888/jc2020/themes/simple/css/layout.css?m=1579262919 http://localhost:8888/jc2020/themes/simple/css/layout.css?m=1579280458 http://localhost:8888/jc2020/themes/simple/css/layout.css?m=1579284325 http://localhost:8888/jc2020/themes/simple/css/layout.css?m=1580984456 http://localhost:8888/jc2020/themes/simple/css/layout.css?m=1580988641 http://localhost:8888/jc2020/themes/simple/css/layout.css?m=1580991626 http://localhost:8888/jc2020/themes/simple/css/layout.css?m=1580999768 http://localhost:8888/jc2020/themes/simple/css/layout.css?m=1581002130 http://localhost:8888/jc2020/themes/simple/css/layout.css?m=1581002566 http://localhost:8888/jc2020/themes/simple/css/layout.css?m=1581287365 http://localhost:8888/jc2020/themes/simple/css/layout.css?m=1581445603 http://localhost:8888/jc2020/themes/simple/css/layout.css?m=1581548242 http://localhost:8888/jc2020/themes/simple/css/layout.css?m=1581680086 http://localhost:8888/jc2020/themes/simple/css/layout.css?m=1581682112 http://localhost:8888/jc2020/themes/simple/css/layout.css?m=1581701362 http://localhost:8888/jc2020/themes/simple/css/layout.css?m=1581849449 http://localhost:8888/jc/_resources/themes/joeandcharlotte/css/layout.css?* */ /** ---------------------------------------------------------- * * Contains the main layout of the page and the individual styles. * Acts as the main stylesheet for theme. * * Include your notes or table of contents below.... * Include color hex's or values of your grid * * 1. OOCSS GRID * 2. MAIN LAYOUT * 3. HEADER * - Brand * - Search Form * 4. Navigation * - Primary Navigation * - tablet Navigation * - Secondary Navigation * - Secondary Nav 2-5 Levels deep * 5. Mixed * 6. Footer * 7. Page Specific Layout * - Homepage * - Search Results * 8. Device and Responsive Layout * - Breakpoint 960px * - Breakpoint 640px * - Search Form * - Main Content * 9. Print Styles * - Simple Theme custom print styles * * @author Your Name * ------------------------------------------------------- */ /* OOCSS Grid * https://github.com/stubbornella/oocss/wiki/grids */ .line, /* line - Groups units on one horizontal line. Note: for mobile layout units may be stacked to avoid horizontal scrolling. */ .lastUnit { overflow:hidden; *overflow:visible; *zoom:1; padding: 0; } .unit { /* unit - Base class which divides a line into sections (columns). */ float:left; padding: 0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; /* box-sizing:border-box; creates a box-model where padding and border are NOT added onto the width - they are included in the width, so a 200px wide element with 20px padding will be 200px, NOT 240px wide */ } .unitRightv { /* Use this class if you want to offset a column eg: |--content(.unit)--|--content(.unit)--|--no-content--|--no-content--|--content(.unitRighttv)--| */ float:right; } /* sizeXofY - Extends unit. Indicates the fractional width of the unit, for example size3of4 would take up three quarters, or 75%, of the horizontal space. The following fractions are supported: 1, 1/2, 1/3, 2/3, 1/4, 3/4, 1/5, 2/5, 3/5, 4/5 */ /* It is possible to add more columns if you wish you will just have to add the fractions that are missing eg: .size1of6 {width:16.66666%;} */ .size1of1 { float:none; } .size1of2 { width:50%; } .size1of3 { width:33.33333%; } .size2of3 { width:66.66666%; } .size1of4 { width:25%; } .size3of4 { width:75%; } .size1of5 { width:20%; } .size2of5 { width:40%; } .size3of5 { width:60%; } .size4of5 { width:80%; } .lastUnit { /* lastUnit - Extends unit. Applied to the last child of every line. */ float:none; width:auto; _position:relative; /* Bug fix for IE6 - Internet Explorer 6 and below wouldn't fail on properties that were prefixed with non-alphanumeric characters. meaning that anything prefixed with _ wouldn't be picked up by any other browsers */ _left:-3px; _margin-right:-3px; } * { box-sizing: border-box; } /* MAIN LAYOUT */ body { margin: 0; background: white; min-width: 240px; -webkit-text-size-adjust: none; /* The text size is not adjusted for Safari on iPhone */ } .ie7 body, .ie8 body { min-width: 860px; /* media queries are not supported in ie7/8 without a polyfill */ } div#hero { height: 100vh; position: fixed; top: 0; width: 100%; background: url(../images/JC_Website2020_BG.jpg) no-repeat center center; background-size:cover; } .AboutPage div#hero { height: auto; position: static; top: 0; width: 100%; background-repeat: no-repeat; background-image: none; background-position: center center; background-size: cover; background-color: #fedad9; padding-top: 250px; padding-bottom: 100px; padding-left: 7vw; } .AboutPage div#content2 { padding-bottom: 100px; padding-top: 80px; background-color: #fedad9; margin-top: 80px; margin-bottom: 80px; } div#content2 p { padding-right: 20px; padding-left: 20px; width: 700px; margin-right: auto; margin-left: auto; max-width: 90%; } div#footer { text-align: center; display: inline-block; width: 100%; position: relative; bottom: 0; z-index: 0; } #h-c-wrap{ position: absolute; bottom: 25%; max-width: 70%; cursor:default; padding-left: 11.5vw; } .AboutPage #h-c-wrap { position: relative; top: 30%; max-width: 50%; padding-left: 72px; cursor:default; } .AboutPage #h-c-wrap p { font-size: 16px; line-height: 26px; } .HomePage .content{ position:relative; //top: 100vh; margin-top: 90vh; } #con-wrap { display: flex; min-height: 100vh; background-size:cover; background: transparent no-repeat center center; align-items:center; max-width: 1800px; margin: auto; padding-left: calc(8vw + 23px); padding-right: calc(8vw + 23px); } #con-wrap p{ //max-width: 700px; font-size: 20px; line-height: 30px; text-align: left; margin-top: auto; margin-right: auto; margin-bottom: auto; padding-bottom: 20px; } #con-wrap div { columns: 2; column-gap: 50px; } p { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } div.scrollto { text-align: center; padding-top: 15px; } .HomePage div.scrollto h5:hover{ color: white; cursor: pointer; } .scroll-section { min-height: 90vh; background-color: white; text-align: center; position: relative; width: 100%; float: left; } #section2 { background: #fedad9; background-image: linear-gradient(#fedad9 60%, white 60%); } #section4 { background-color: #ffacda; background-image: linear-gradient(#fdb0db 60%, white 60%); } img#sec1-img.sec-img, img#sec2-img.sec-img, img#sec3-img.sec-img, img#sec4-img.sec-img { background: none; } div#featured-photo img { max-width: 100%; height: auto; } .sec-img { width: 50%; max-width: 300px; transform:translateY(-30%); position: absolute; z-index: 0; } #sec1-img{ right: 5%; // transform:rotate(180deg); top: -19%; } img#sec3-img.sec-img { left: 20%; } img#sec4-img.sec-img { right: 1%; } .sticky { position: -webkit-sticky; /* Safari */ position: sticky; top: 0; } #arrow { position: absolute; left: calc(8vw + 23px); width: 80px; bottom: 10%; } #arrow img{ position: relative; background: none; float: left; top: 0; transition: top ease 0.3s; } #arrow img:hover{ top: 10px; cursor: url('../images/point.png') 10 5, default; transition: top ease 0.3s; } span#height{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -7; } .main { padding: 0px; -webkit-transition:all 700ms ease; -moz-transition:all 700ms ease; transition:all 700ms ease; overflow: visible; } div.content.contact.vcenter { position: absolute; width: 100%; margin-right: auto; margin-left: auto; display: block; left: 0; } .CenterPage .site-wrap:before { content: ""; position: fixed; width: 90%; height: 100%; z-index: -1; background: url(../images/contact-spin.jpg) no-repeat center center; -webkit-animation:spin 6s linear infinite; -moz-animation:spin 6s linear infinite; animation:spin 6s linear infinite; overflow: hidden; margin-left: 5%; margin-top: 0; overflow-y: hidden; } .inner { margin: 0 auto; padding: 0; overflow: visible; } .ie6 .inner { width: 960px; } .no-sidebar .content-container { float: left; width:100%; /* makes content container full width when there is no sidebar */ } .sidebar { /* this is the sidebar element */ margin-top: 12px; } .no-sidebar .sidebar { display: none; } .mobile { display: none !important; } .desktop { display: block; } /* HOME PAGE */ #homelogo { width: 25%; min-width: 200px; margin-right: auto; margin-left: auto; position: relative; z-index: 1; -webkit-transition:all 700ms ease; -moz-transition:all 700ms ease; transition:all 700ms ease; } #homelogo:hover { width: 26%; -webkit-transition:all 700ms ease; -moz-transition:all 700ms ease; transition:all 700ms ease; } #homelogo a.animsition-link img { cursor: url('../images/point.png'), default; } .mask { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background-color: white; opacity: 0; //display: none; } /* ? */ div.animsition { height: 100%; width: 100%; background: transparent; position: absolute; } /* INTERACT */ div#drag { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } div#drags { position: fixed; top: 5px; right: 5px; bottom: 5px; left: 5px; //display: none; } .MainPage div#drags { position: fixed; top: 5px; right: 5px; bottom: 35px; left: 5px; //display: none; } .dragable{ background: none !important; } .MainPage #drag-5 { position: absolute; left: 30%; bottom: 110px; } .MainPage #drag-4 { position: absolute; right: 26%; bottom: 0px; } .MainPage #drag-3 { position: absolute; left: 30%; bottom: 5px; } .MainPage #drag-2 { position: absolute; right: 32%; bottom: 5px; } .MainPage #drag-1 { position: absolute; left: 50%; transform: translate(-50%, 0); bottom: 5px; width: 35%; max-width: 592px; min-width: 300px; } /* DRAGS US PAGE */ #drag-shark { position: absolute; top: 120px; right: 38%; width: 180px; } #drag-fish1 { width: 59px; top: 35px; position: absolute; right: 50%; } #drag-fish2 { width: 62px; top: 90px; position: absolute; right: 47%; } #drag-fish3 { width: 42px; top: 120px; position: absolute; right: 50%; } #drag-but1 { width: 122px; top: 30%; position: absolute; right: 28%; } #drag-but2 { width: 90px; top: 18%; position: absolute; right: 23%; } #drag-but3 { width: 107px; top: 10%; position: absolute; right: 23%; } #drag-charlotte { top: 49%; width: 260px; position: absolute; right: 23%; } #drag-joe { top: 44%; width: 300px; position: absolute; right: 34%; } #drag-flower { top: 30%; width: 260px; position: absolute; right: 24%; } #drag-cat { top: 25%; width: 100px; position: absolute; right: 31%; } #drag-giraffe { top: 19%; width: 90px; position: absolute; right: 27%; } #drag-plane { width: 400px; position: absolute; right: 19%; bottom: 5%; } #drag-dino.dragable { width: 300px; position: absolute; right: 37%; bottom: 6%; } .dragable { width: 150px; -webkit-transform: translate(0px, 0px); transform: translate(0px, 0px); cursor: url('../images/grab.png'), default; } .dragable:hover { cursor: url('../images/grab.png'), default; } .dragable:active { cursor: url('../images/grab-down.png'), default; } /* US */ .us div#wrapper { position: relative; left: -39%; } div.content.us.vcenter { width: 120%; //max-width: 340px; min-width: 250px; background-color: white; display: block; padding: 7% 10% 8% 0; } .us div.content-container.unit.size3of4.lastUnit { background-color: white; padding: 0 6% 0 15%; } .us div#aawrap { background-color: white; padding-top: 15%; padding-bottom: 15%; padding-left: 5%; } .us article { width: 65%; min-width: 300px; padding: 8% 3% 8% 0; background: url(../../../work/images/lynch.jpg) repeat; display: block; } .us div.inner.typography.line.Page { width: 50% !important; min-width: 600px; padding: 0; margin-left: 15%; } .us div#awrap { background: #2df7f9; /* Old browsers */ background: -moz-linear-gradient(left, #2df7f9 0%, #eb008b 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #2df7f9 0%,#eb008b 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #2df7f9 0%,#eb008b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2df7f9', endColorstr='#eb008b',GradientType=1 ); /* IE6-9 */ padding: 23px; margin-right: auto; margin-left: auto; } div.content.us.vcenter p{ text-align: justify !important; line-height: 27px; margin-bottom: 0; display: block; font-size: 22px; } .float h1 > a { position: relative; } .float h1 > a:before { content: ""; position: absolute; width: 100%; height: 4px; bottom: -10px; left: 0; visibility: hidden; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .float h1 > a:hover:before { visibility: visible; -webkit-transform: scaleX(1); transform: scaleX(1); } /* FLOATERS */ div#floatholder { position: absolute; top: 33%; right: 0; //bottom: 0; left: 0; height: 0; } .float{ display: block; position: absolute; z-index: 10; margin: 0 1px; height: 37px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-font-smoothing: antialiased; padding: 0 0 7px; } //.first-slick { display: table; } //.first-slick > div {display: table-cell; } div#TitleWrap{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); width: 170px; } .WorkPage div#TitleWrap{ -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .WorkPage div#TitleWrap a:hover{ color: #EB008B; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; transition:all 300ms ease; } .WorkPage div#TitleWrap a { color: black; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; transition:all 300ms ease; } .float.a { left: 5%; padding-bottom: 1px; } .float.a:hover { padding-bottom: 0; } #design h1 a:hover { color: #2DF7F9 !important; } .float h1 a:hover { cursor: url('../images/point.png') 10 5, default !important; } .float.a h1 > a:before { background-color: #2DF7F9; } .float.b { left: 6%; padding-bottom: 1px; } .float.b:hover { padding-bottom: 0; } #photography h1 a:hover { color: #7797CE !important; } .float.b h1 > a:before { background-color: #7797CE; } .float.c { right: 10%; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); padding-bottom: 1px; } #websites h1 a:hover { color: #9F63B7 !important; } .float.c:hover { padding-bottom: 0; } .float.c h1 > a:before { background-color: #9F63B7; } .float.d { padding-bottom: 1px; right: 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .float.d:hover { padding-bottom: 0; //border-bottom: 4px solid #EB008B; color: #EB008B !important; } .float.d h1 > a:before { background-color: #EB008B; } /* HEADER */ .header { } .header .inner { padding-top: 25px; position: relative; } /* Brand */ div#logo { width: 10%; max-width: 200px; min-width: 30px; position: absolute; z-index: 500; top: 50px; right: 8vw; -webkit-transition:all 700ms ease; -moz-transition:all 700ms ease; transition:all 700ms ease; text-align: center; } #logo a.brand img { width: 80%; -webkit-transition:all 700ms ease; -moz-transition:all 700ms ease; transition:all 700ms ease; opacity: 1; cursor: url('../images/point.png') 10 5, default; float: none; margin-right: auto; margin-left: auto; } #logo a.brand img:hover { width: 100%; -webkit-transition:all 300ms ease; -moz-transition:all 300ms ease; transition:all 300ms ease; cursor: url('../images/point.png') 10 5, default; } #logo a.brand img:active { cursor: url('../images/grab-down.png') 10 5, default; } header .brand, header .brand:hover { float: left; color: #fff; display: inline-block; } .brand h1 { margin: 0; padding: 0; font-size: 48px; color: #fff; font-weight: 600; font-stretch: normal; /* default value. No font stretching */ line-height: 1em; } .brand p { color: #888; margin-bottom: 22px; } /* Search form */ .search-bar { position: absolute; right: 13px; top: 12px; } .search-bar .field { margin: 0; padding: 0; } .search-bar form input.text { width: 155px; padding: 5px 34px 5px 15px; color: #888; margin: 0; border: none; -moz-border-radius: 14px; border-radius: 14px; background: #fff; } .search-bar form input.action { /* positions the search button icon over the top of the search input */ font-size: 14px; position: absolute; right: 5px; top: 0; cursor: pointer; border: none; padding: 5px; background: none; font-family: 'WebSymbolsRegular'; color: #848484; border-radius: 0; margin: 0; } .search-bar form input.active, .search-bar form input.action:hover { color: #000; } .search-bar form input:focus, .header textarea:focus { outline: none; /* removes default browser outlining on focus */ } .search-dropdown-icon { display: none; /* hides search-dropdown-icon when site is at full width - media queries set it to display:block when at mobile/tablet width */ } /* About Page */ div#us-wrp { overflow: hidden; position: absolute; bottom: 0; left: 0; height: 300px; width: 10%; pointer-events: none; } div#us { position: absolute; bottom: 0; left: 0; transform: translateY(100%); transition: all 0.7s ease-in-out 0s; } div#us img{ width: 100%; } #con-bck-wrp { -webkit-animation: rotation 6s infinite linear; background: url(../images/contact.png) center center no-repeat; background-size: contain; width: 100%; overflow: hidden; position: absolute; height: 90vh; margin-top: 5vh; z-index: 0; } #con-bck img { opacity: 0; } @-webkit-keyframes rotation { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); } } /* NAVIGATION */ div.content.con-deets{ position: absolute; width: 100%; text-align: center; top: 50vh; transform: translateY(-50%); } div.content.con-deets p, div.content.con-deets a{ color: white; font-size: 24px; line-height: 35px; letter-spacing: 1px; } div.content.con-deets h1 { color: white; } div.content.con-deets a:hover { color: black; } /* Positions the nav fixed below the push wrapper */ /* Primary navigation */ .header .inner .unit { position: relative; /* used to position the main navigation */ } .header .primary li { float: left; padding-bottom: 14px; margin: 0 5px; position: relative; white-space: nowrap; /* forces text to never wrap onto a second line */ } .header .primary li a { color: #888; font-size: 15px; font-family: GothamBold, Arial, sans-serif; padding: 6px 8px; font-weight: bold; display: block; } .header .primary li a:hover { color: #fff; } .header .primary li.section a, .header .primary li.current a { color: #fff; } .header .primary li.section:after, .header .primary li.current:after { content: '}'; /* adds triangle beneath current nav item ('}' is renders as a triangle when WebSymbolsRegular is set as the font) */ display: block; position: absolute; left: 50%; margin-left: -7px; bottom: -7px; font-family: 'WebSymbolsRegular'; font-size: 30px; color: #fff; text-align: center; line-height: 20px; } /* Tablet Navigation */ /* When navigation and logo overlap tablet-nav is initialized */ .tablet-nav .brand p { margin-bottom: 0; } .tablet-nav .header .inner { padding-top: 20px; } .tablet-nav .header .primary ul { float: left; clear: both; position: relative; margin: 20px 0 0 -13px; white-space: nowrap; right: auto; /* resets the right property value that is set for the desktop site */ } .tablet-nav .header .primary ul li { white-space: nowrap; } .tablet-nav .header .primary ul li a { /* there is no hover on touch devices so no transition on hover is necessary */ -moz-transition: none; -webkit-transition: none; transition: none; } .tablet-nav .footer .right { float: left; width: 100%; } /* Secondary navigation */ .main .secondary h3 { font-size: 20px; color: #AAA; margin: 0 0 8px 0; font-weight: normal; } .main .secondary { border-bottom: 1px solid #e5e5e5; } .main .secondary ul { padding: 0; margin: 0; } .main .secondary li { border-top: 1px solid #e5e5e5; position: relative; list-style-type: none; margin-bottom: 0; } .main .secondary li .arrow { color: #b80000; padding-right: 5px; display: block; font-size: 15px; line-height: 20px; position: absolute; left: 2px; top: 7px; -moz-transition: 0.2s; /* this transition moves the arrow from left:2px to left:6px */ -webkit-transition: 0.2s; transition: 0.2s; } .main .secondary li a:hover .arrow { left: 6px; /* this sets the final position for the arrow transition */ } .main .secondary li a { /* side nav link styling */ padding: 10px 0; display: block; text-transform: uppercase; letter-spacing: 2px; font-size: 11px; color: #333; line-height: 17px; border-bottom: none; } .main .secondary li .text { padding-left: 28px; display: block; } .main .secondary li.current a.current { color: #b80000; background-color: #EDEDED; } .main .secondary li.section, .main .secondary li.current { background-color: #F3F3F3; } .main .secondary li.section a, .main .secondary li.current a { color: #000; } /* Secondary navigation 2-5 levels deep */ .main .secondary ul ul { display: none; } .secondary ul li.current ul, .secondary ul li.section ul { /* Only show child pages from selected parent */ display: block; } .secondary li.current ul ul { display: none; } .main .secondary ul ul li a { padding-left: 10px; } /* Indent all sidebar navigation levels*/ .main .secondary ul ul li a .arrow { left: 12px; } .main .secondary ul ul li a:hover .arrow { left: 16px; } .main .secondary ul ul ul li a { padding-left: 20px; } .main .secondary ul ul ul li a .arrow { left: 22px; } .main .secondary ul ul ul li a:hover .arrow { left: 26px; } .main .secondary ul ul ul ul li a { padding-left: 30px; } .main .secondary ul ul ul ul li a .arrow { left: 32px; } .main .secondary ul ul ul ul li a:hover .arrow { left: 36px; } .main .secondary ul ul ul ul ul li a { padding-left: 40px; } .main .secondary ul ul ul ul ul li a .arrow { left: 32px; } .main .secondary ul ul ul ul ul li a:hover .arrow { left: 36px; } .main .secondary li a:hover, .main .secondary li.section a:hover, .main .secondary li.current a:hover { color: #b80000; } .Security div#awrap { padding: 50px; } /* MIXED */ header:after, .main:after, #Root:after, .search-bar:after, header .inner:after, footer:after { /* clearfix */ height: 0; content: "."; display: block; clear: both; visibility: hidden; } .search-bar form input.action, .header .primary li a, .footer a { /* adds color transition when links/inputs on hover */ -moz-transition: color 0.2s; -webkit-transition: color 0.2s; transition: color 0.2s; } .footer a.brand { color: #333; margin-left: 0; } .footer a.brand:hover { color: #B80000; } body h1 span.amp { font-family: "LemonMilk", Arial, Helvetica, Geneva, sans-serif; font-style: italic; } /* FOOTER */ .footer { color: #999; padding: 20px 0; font-size: 11px; line-height: 22px; } .footer a { color: #999; } .footer a:hover { color: #B90000; } .footer .left { float: left; color: #000; display: block; margin-bottom: 10px; } .footer .right { float: right; display: block; margin-bottom: 10px; } .footer span { padding: 0 3px; color: #bbb; } .footer .primary, .footer .primary ul { display: inline; margin: 0; padding: 0; } .footer .primary li { display: inline; } .ie6 .footer .primary li, .ie7 .footer .primary li { /* this is a bugfix for ie6/7 */ display: inline; zoom: 1; margin-right: 10px; } .footer .primary li:after { /* adds '/' to separate the footer navigation items */ padding: 0 3px 0 5px; content: '/'; color: #999; } .footer .primary li:last-child:after { content: ''; /* makes sure last nav item doesn't have a '/' following it */ } .footer .arrow { padding: 0 8px 0 5px; color: #b80000; font-size: 13px; } .footer .primary .nav-open-button { display: none; /* the footer includes the primary nav include - this makes sure the nav open close button doesn't show up */ } /* PAGE SPECIFIC LAYOUT */ /* CONTACT */ div#jcpop { position: fixed; top: 100%; margin-right: auto; margin-left: auto; width: 100%; text-align: center; -webkit-transform: translateY(-9%); -moz-transform: translateY(-9%); -ms-transform: translateY(-9%); transform: translateY(-9%); -webkit-transition:all 700ms ease; -moz-transition:all 700ms ease; transition:all 700ms ease; left: 0; } .contactpop { display: inline-block; width: 50%; float: left; text-align: center; } .contactpop img { width: 70%; max-width: 370px; margin-right: auto; margin-left: auto; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } } /* Homepage */ /* currently no Hompage specific styles - feel free to add your own */ /* Search Results */ .typography .searchResults h1 { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .searchResults p.searchQuery { margin-bottom: 10px; font-size: 15px; font-weight: bold; } .searchResults ul#SearchResults { padding: 0; border-bottom: 1px solid #e5e5e5; margin:0; } .searchResults ul#SearchResults li { border-top: 1px solid #e5e5e5; padding: 20px 0; list-style-type: none; } .searchResults ul#SearchResults p { margin-bottom: 10px; } .searchResults #PageNumbers a { padding: 0 5px; } .searchResults #PageNumbers .pagination { border-bottom: 1px solid #e5e5e5; padding: 20px 0; display:table; /* displays the pagination as a table so that elements stay inline and the middle column adjusts its size to accomodate and the right arrow stays to the right */ width:100%; } .searchResults #PageNumbers .pagination span{ display:table-cell; /* each element in the pagination div displays as a table cell */ } .searchResults #PageNumbers p { text-align: center; padding:20px 0; } .searchResults #PageNumbers .next, .searchResults #PageNumbers .prev { font-size: 14px; padding: 0 20px; display:table-cell; /* each element in the pagination div displays as a table cell */ vertical-align: middle; border-bottom:0 !important; } .searchResults #PageNumbers .next { margin-left: 15px; } .searchResults #PageNumbers .prev { margin-right: 15px; } /* DEVICE & RESPONSIVE LAYOUT */ .header .nav-open-button { display: block; /* removes the nav toggle button for desktop site */ } #media-query-trigger { visibility: visible; } .tablet-nav .header .primary .nav-open-button { /* styling and positioning of the nav toggle button */ z-index: 100; width: 20px; height: 20px; position: absolute; right: 20px; top: 35px; display: block; cursor: pointer; font-family: 'WebSymbolsRegular'; font-size: 20px; color: black; } h6.mobil { display: none; } @media only screen and (max-width: 1350px) { .main { padding: 0; } .us div.inner.typography.line.Page { width: 50% !important; min-width: 600px; padding: 0; margin-left: 6%; } div.content.us.vcenter p{ text-align: justify !important; line-height: 22px; margin-bottom: 0; display: block; font-size: 15px; } .MainPage #drag-5 { left: 25%; bottom: 90px; width: 120px; } .MainPage #drag-4 { right: 20%; bottom: 0px; } .MainPage #drag-3 { left: 25%; bottom: 5px; width: 120px; } .MainPage #drag-2 { right: 27%; bottom: 5px; width: 120px; } .MainPage #drag-1 { position: absolute; bottom: 5px; width: 35%; max-width: 592px; min-width: 300px; } /* DRAGS US PAGE */ #drag-shark { position: absolute; top: 80px; right: 33%; } #drag-fish1 { width: 59px; top: 35px; position: absolute; right: 48%; } #drag-fish2 { width: 62px; top: 90px; position: absolute; right: 44%; } #drag-fish3 { width: 42px; top: 120px; position: absolute; right: 48%; } #drag-but1 { width: 122px; top: 30%; position: absolute; right: 18%; } #drag-but2 { width: 90px; top: 18%; position: absolute; right: 13%; } #drag-but3 { width: 107px; top: 10%; position: absolute; right: 13%; } #drag-charlotte { top: 46%; width: 230px; position: absolute; right: 18%; } #drag-joe { top: 41%; width: 270px; position: absolute; right: 32%; } #drag-flower { top: 20%; width: 270px; position: absolute; right: 12%; } #drag-cat { top: 18%; width: 100px; position: absolute; right: 22%; } #drag-giraffe { top: 14%; width: 70px; position: absolute; right: 19%; } #drag-plane { width: 350px; position: absolute; right: 19%; bottom: 0; } #drag-dino.dragable { width: 270px; position: absolute; right: 49%; bottom: 0; } } /* BREAKPOINT 960px */ @media only screen and (max-width: 960px) { /* DRAGS US PAGE */ #drag-shark { position: absolute; top: 80px; right: 33%; } #drag-fish1 { width: 59px; top: 35px; position: absolute; right: 55%; } #drag-fish2 { width: 62px; top: 90px; position: absolute; right: 50%; } #drag-fish3 { width: 42px; top: 120px; position: absolute; right: 53%; } #drag-but1 { width: 102px; top: 30%; position: absolute; right: 10%; } #drag-but2 { width: 70px; top: 18%; position: absolute; right: 5%; } #drag-but3 { width: 97px; top: 10%; position: absolute; right: 13%; } #drag-charlotte { top: 46%; width: 230px; position: absolute; right: 8%; } #drag-joe { top: 41%; width: 270px; position: absolute; right: 22%; } #drag-flower { top: 25%; width: 229px; position: absolute; right: 9%; } #drag-cat { top: 25%; width: 100px; position: absolute; right: 20%; } #drag-giraffe { top: 20%; width: 70px; position: absolute; right: 14%; } #drag-plane { width: 300px; position: absolute; right: 5%; bottom: 0; } #drag-dino.dragable { width: 270px; position: absolute; right: 49%; bottom: 0; } div.content.contact.vcenter { width: 100%; } .header .primary ul { margin-left: -12px; -webkit-padding-start: 0px; /* removes default webkit padding on ul items */ } .main { padding: 0; } .MainPage #drag-5 { left: 30%; bottom: 70px; width: 85px; } .MainPage #drag-4 { right: 20%; bottom: 0px; width: 120px; } .MainPage #drag-3 { left: 30%; bottom: 5px; width: 90px; } .MainPage #drag-2 { right: 27%; bottom: 5px; width: 90px; } .MainPage #drag-1 { position: absolute; bottom: 5px; width: 35%; max-width: 592px; min-width: 300px; } /* US */ .us div.inner.typography.line.Page { margin-left: 5%; } } @media only screen and (max-width: 820px) { #drag-shark { display: none; } } /* BREAKPOINT 680px */ /* when changing the breakpoint below, change it ito the same value in the script.js file as well */ @media only screen and (max-width: 680px) { body { max-width: 640px; } #con-wrap div { columns: 1; padding-top: 60px; padding-bottom: 60px; } .content img { max-width: 100%; height: auto; } .MainPage div#drags { top: 5px; right: 5px; bottom: 5px; left: 5px; } .MainPage #drag-5 { left: 3%; bottom: 6 7px; width: 85px; } .MainPage #drag-4 { right: 2%; bottom: 0px; width: 120px; } .MainPage #drag-3 { left: 3%; bottom: 5px; width: 90px; } .MainPage #drag-2 { right: 16%; bottom: 5px; width: 90px; } .MainPage #drag-1 { position: absolute; bottom: 5px; width: 35%; max-width: 592px; min-width: 300px; } .MainPage #drag-1 { bottom: 5px; width: 35%; max-width: 90%; min-width: 300px; } div.content.creativestudio.vcenter { width: 90%; margin: auto; } h6.mobil { display: block; } #h-c-wrap{ position: static; max-width: 90%; cursor:default; padding-left: 30px; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; margin-top: 176px; padding-right: 20px; } /* FLOATERS */ div#floatholder { display: none; } div#logo { width: 25%; max-width: 100px; min-width: 30px; z-index: 500; top: 25px; -webkit-transition:all 700ms ease; -moz-transition:all 700ms ease; transition:all 700ms ease; left: 20px; } #logo a.brand img { float: left; } /* US */ .us div.inner.typography.line.Page { width: 95% !important; min-width: 0px; padding: 0; margin-right: auto; margin-left: auto; } .us div.content-container.unit.size3of4.lastUnit { padding: 1%; width: 98% !important; } div#aawrap { //width: 94%; padding: ; padding-right: 3%; padding-left: 3%; } div.content.us.vcenter { width: 90%; max-width: 340px; min-width: 50px; background-color: white; display: block; padding: 7% 3% 7% 10px; margin-right: auto; margin-left: auto; } .us div#wrapper { position: relative; left: 0%; } .us article { width: 97%; min-width: 50px; padding: 10% 1%; background: url(../../../work/images/lynch.jpg) repeat; display: block; } /* Navigation*/ .tablet-nav .header .brand { float: none; display: inline-block; width: 20%; } .tablet-nav .header .brand img { float: none; display: inline-block; width: 100%; } .brand h1 { font-size: 40px; } .brand h1 { padding-right: 100px; /* padding stops .brand text from overlapping the search and nav buttons */ } .tablet-nav .header { padding: 0px; } .tablet-nav .header .inner { padding: 20px 0 0 0; min-height: 0; } .tablet-nav .header .primary ul { z-index: 10; position: relative; display: none; /* initially hiding the navigation */ float: left; margin: 0; padding: 0; white-space: normal; width: 100%; } .tablet-nav .header .primary ul li { width: 100%; margin: 0; padding: 0; float: none; /* displays list items vertically */ background: none; position: relative; text-shadow: 0 1px #fff; } .tablet-nav .header .primary ul li:after { /* creates the arrow for the primary nav links */ content: '\003e'; display: block; position: absolute; right: 20px; top: 0px; font-family: 'WebSymbolsRegular'; font-size: 14px; color: #999; text-align: center; vertical-align: middle; line-height: 38px; } .tablet-nav .header .primary ul li a, .tablet-nav .header .primary ul li.current a, .tablet-nav .header .primary ul li.section a { /* styling the top level nav links */ padding: 10px 0 10px 22px; font-weight: bold; border-bottom: 1px solid #bbb; color: #434343; background: #e7e7e7; } .tablet-nav .header .primary ul li.current a, .tablet-nav .header .primary ul li.section a { background: #CCCCCC; /* makes background on current top level page slightly darker */ } .tablet-nav .header .primary ul li a:hover { color: inherit; } .tablet-nav .header .primary li.section:after, .tablet-nav .header .primary li.current:after { display: none; /* hides the link arrow on current top level page */ } .tablet-nav .tablet-nav .header nav.primary ul li { padding: 0; } /* Search Form */ .search-bar { /* adds new styling to mobile search bar */ width: 100%; position: relative; top: 0; right: 0; display: none; /* hides searchbar initially */ padding: 20px 0; margin: 0; background-color: #E7E7E7; } .search-dropdown-icon { /* styling for search toggle button */ display: block; cursor: pointer; width: 20px; height: 20px; position: absolute; right: 60px; top: 34px; font-family: 'WebSymbolsRegular'; font-size: 20px; color: #ededed; text-align: center; line-height: 20px; } .search-bar form { margin: 0; width: 100%; } .search-bar form fieldset { padding: 0 18px; left: 0; right: 0; position: relative; } .search-bar div.field { margin-bottom: 0; } .search-bar form input.text { width: 89%; /* makes search input full width - allowing for space either side */ max-width: 89%; padding: 8px 10% 8px 1%; text-indent: 15px; position: relative; display: block; right: 0; left: 0; border: 1px solid #e5e5e5; background: #fff; font-size: 17px; -moz-border-radius: 20px; /* increase border radius due to increased padding */ border-radius: 20px; } .search-bar form input.action { right: 5%; top: 2px; font-size: 18px; } /* Main Content */ .main { padding: 0; } .content-container, .sidebar { width: 100%; /* sidenav is now shown above the page content */ margin-bottom: 0; //overflow: visible; } div#h-c-wrap h1, .typography p { font-size: 25px; line-height: 35px; } p.intro { font-size: 19px; line-height: 27px; } .main .inner { padding: 0; } /* Secondry Nav */ .secondary li a { line-height: 24px; } .secondary li .arrow { line-height: 26px; } /* Footer */ .footer .right { float: left; width: 100%; } #drag-fish1 { width: 59px; top: 30%; position: absolute; //right: 55%; left: 5px; } #drag-fish2 { width: 62px; top: 43%; position: absolute; //right: 50%; left: 25px; } #drag-fish3 { width: 42px; top: 50%; position: absolute; //right: 83%; left: 5px; } #drag-but1 { width: 102px; top: 30%; position: absolute; right: 10%; } #drag-but2 { width: 70px; top: 18%; position: absolute; right: 5%; } #drag-but3 { width: 97px; top: 10%; position: absolute; right: 13%; } #drag-charlotte { top: 65%; width: 160px; position: absolute; right: 8%; } #drag-joe { width: 170px; position: absolute; right: 22%; top: 60%; } div#jcpop { position: fixed; margin-right: auto; margin-left: auto; width: 100%; text-align: center; -webkit-transform: translateY(-95%) !important; -moz-transform: translateY(-95%) !important; -ms-transform: translateY(-95%) !important; transform: translateY(-95%) !important; top: 100%; } .CenterPage .site-wrap:before { background-size: contain; } } /* Print Styles */ /* Based on HTML5 boilerplate print styles */ @media print { * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; } a, a:visited { text-decoration: underline } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } thead { display: table-header-group } tr, img { page-break-inside: avoid } img { max-width: 100%; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } /* Simple theme custom print styles */ .header, .footer, .nav-open-button, .search-bar, .search-dropdown-icon, nav.primary { display: none; } } @media only screen and (max-height: 470px) { .MainPage #drag-1 { width: auto; height: 55%; max-width: 100%; min-width: 0px; } .MainPage #drag-5 { left: 13%; bottom: 67px; width: 85px; } .MainPage #drag-4 { right: 8%; bottom: 0px; width: 120px; } .MainPage #drag-3 { left: 13%; bottom: 5px; width: 90px; } .MainPage #drag-2 { right: 20%; bottom: 5px; width: 90px; } }