/* ================================================================================== */ /* == Normalize.css v8.0.1 ========================================================== */ /* ================================================================================== */ html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none} *,*:before,*:after { box-sizing: border-box; margin: 0; padding: 0; list-style: none } /* Viewport Sizing */ @-webkit-viewport{width:device-width} @-moz-viewport{width:device-width} @-ms-viewport{width:device-width} @-o-viewport{width:device-width} @viewport{width:device-width} :root { --border-dark: #202225; --yellow: #e9b834; --yellow-text: #d59f0e; --color-primary: #5874C8; --color-blue2: #239DEF; --color-dark-blue: #485C99; --color-darkest-blue: #2A375C; --color-red: #F86B67; --color-red2: #D45245; --color-green: #36AF47; --color-green2: #7BC43C; --color-yellow: #FDD948; --color-yellow2: #FDCF1A; --color-yellow3: #DA932C; } /* ================================================================================== */ /* == General Styles ================================================================ */ /* ================================================================================== */ html,body { background: #fff; font-family: "proxima-nova", sans-serif; line-height: 1.5; color: #474747; overflow-x: hidden; } .container { max-width: 1120px; margin: 0 auto; padding: 100px 60px; position: relative; } .container:after { content: ""; display: table; clear: both; } a { text-decoration: none; transition: all 0.218s; } h1, h2, h3 { font-family: "proxima-nova", sans-serif; font-weight: 700; } h2 { font-size: 3.15rem; margin-bottom: 1.5rem; line-height: 1.2; color: #1b1b1b; } h3 { font-size: 2rem; margin-bottom: 1rem; } /* p { color: #585858; } */ @media only screen and (max-width: 800px) { .container { padding: 80px 60px; } } @media only screen and (max-width: 520px) { .container { padding: 60px 50px; } } @media only screen and (max-width: 460px) { .container { padding: 50px 40px; } } @media only screen and (max-width: 420px) { .container { padding: 40px 35px; } } @media only screen and (max-width: 400px) { .container { padding: 40px 30px; } } /* ================================================================================== */ /* == Header ======================================================================== */ /* ================================================================================== */ #header { clear: both; background: #000; color: #898989; background: linear-gradient(-175deg, #000 0%, #101115 100%); border-bottom: 1px solid #000; } #header .container { padding: 50px; text-align: center; } #header h1 { font-size: 5rem; margin: 0; font-weight: 700; text-transform: uppercase; color: #fff; position: relative; z-index: 2; text-shadow: 0 0 30px #000, 0 0 15px #000; } #header .container:before, #header .container:after { content: ""; position: absolute; bottom: 10%; left: 5%; border: 1px solid #daa520; width: 500px; height: 500px; border-radius: 50%; opacity: 0.25; } #header .container:after { bottom: 15%; left: 7%; } #header a { display: block; } #header a:hover { background: linear-gradient(-175deg, #000 0%, #303335 100%); } @media only screen and (max-width: 750px) { #header h1 { font-size: 10vw; } #header .container { padding: 5.5vw 0; } } #header .container:before { animation-name: headerRing1; animation-duration: 19s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes headerRing1 { from { transform: translate(0, 0px); } 65% { transform: translate(-30px, -30px); } to { transform: translate(0, 0px); } } #header .container:after { animation-name: headerRing2; animation-duration: 9s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes headerRing2 { from { transform: translate(0, 0px); } 65% { transform: translate(10px, -10px); } to { transform: translate(0, 0px); } } /* ================================================================================== */ /* == Hero ========================================================================== */ /* ================================================================================== */ #hero { background: #000; text-align: center; } #hero .container { hei///ght: 70vh; wid/th: 902px; padding: 0; } #hero .text { position: relative; z-index: 1; padding: 10% 10% 0 10%; } #hero h1 { font-size: 10vw; margin: 0; font-weight: 700; text-transform: uppercase; color: #fff; } #hero h2 { font-size: 5.6vw; color: var(--yellow-text); margin: -0.5em 0 0.5em 0; font-family: 'DM Serif Text', "proxima-nova", sans-serif; font-weight: 400; } #hero p { font-size: 1.1rem; font-weight: 100; max-width: 700px; margin: 0 auto; color: rgba(255,255,255,0.5); } #hero img { display: block; width: 100%; max-width: 902px; margin-top: -15%; margin-bottom: -25%; } #hero .container:before, #hero .container:after { content: ""; position: absolute; top: -10%; left: 3%; border: 1px solid var(--yellow); width: 90%; height: 82%; border-radius: 50%; opacity: 0.25; z-index: 11; display: block; } #hero .container:after { top: -15%; left: 7%; } @media only screen and (min-width: 902px) { #hero img { margin: -110px auto -238px; } #hero h1 { font-size: 5.5rem; } #hero h2 { font-size: 3.15rem; } #hero p { font-size: 1.25rem; } } @media only screen and (max-width: 750px) { #hero img { margin-bottom: -29%; } } @media only screen and (max-width: 650px) { #hero img { margin-bottom: -33%; } } @media only screen and (max-width: 600px) { #hero p { font-size: 1rem; } #hero img { margin-bottom: -33%; } } @media only screen and (max-width: 550px) { #hero img { width: 130%; margin: -22% -14% -43%; } } @media only screen and (max-width: 450px) { #hero img { margin-bottom: -47%; } } /* Robots */ .robot { animation-name: robot; animation-duration: 4s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; position: absolute; z-index: 1; } @keyframes robot { from { transform: translate(0, 0px); } 65% { transform: translate(0, 10px); } to { transform: translate(0, 0px); } } #hero #robot1 { background: url(../../img/robot1.png) no-repeat center; background-size: 100% auto; height: 18vw; width: 10.5%; right: 13%; bottom: 47vw; } #hero #robot2 { animation-delay: -3s; background: url(../../img/robot2.png) no-repeat center; background-size: 100% auto; height: 10.5vw; width: 6.25%; left: 15%; bottom: 48vw; } @media only screen and (min-width: 1120px) { #hero #robot1 { right: 18%; } #hero #robot2 { left: 21%; } } @media only screen and (min-width: 902px) { #hero #robot1 { height: 208px; width: 118px; right: 13%; bottom: 35%; } #hero #robot2 { height: 118px; width: 70px; left: 17%; bottom: 36%; } } @media only screen and (max-width: 550px) { #hero #robot1 { height: 23vw; width: 13vw; right: 5%; bottom: 62vw; } #hero #robot2 { height: 14vw; width: 8vw; left: 9%; bottom: 63vw; } } /* Sparkles */ .sparkle { animation-name: sparkle; animation-duration: 9s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; transform-origin: center; background: var(--yellow); border-radius: 2px; opacity: 0.5; position: absolute; z-index: 1; } @keyframes sparkle { from { transform: translate(0, 0px); } 25% { transform: translate(0, 20px) rotate(180deg); opacity: 0; width: 5px; height: 5px; background: orange; } to { transform: translate(0, 0px); } } #hero #sparkle1 { animation-delay: -3s; height: 2.5vw; width: 2.5vw; right: 34.5%; bottom: 72vw; } #hero #sparkle2 { animation-delay: -6s; height: 3.2vw; width: 3.2vw; left: 24%; bottom: 63vw; } #hero #sparkle3 { height: 1.6vw; width: 1.6vw; right: 28%; bottom: 60vw; } @media only screen and (min-width: 1120px) { #hero #sparkle1 { right: 37%; } #hero #sparkle2 { left: 30%; } #hero #sparkle3 { right: 32.5%; } } @media only screen and (min-width: 902px) { #hero #sparkle1 { height: 22px; width: 22px; right: 34%; bottom: 56%; } #hero #sparkle2 { height: 30px; width: 30px; left: 27%; bottom: 49%; } #hero #sparkle3 { height: 15px; width: 15px; right: 30%; bottom: 50%; } } @media only screen and (max-width: 550px) { #hero #sparkle1 { right: 29%; bottom: 92vw; } #hero #sparkle2 { left: 21%; bottom: 82vw; } #hero #sparkle3 { right: 23%; bottom: 83vw; } } /* ================================================================================== */ /* == Content ======================================================================= */ /* ================================================================================== */ section { border-bott///om: 1px solid #e3e3e3; } section h2 { color: #202225; line-height: 1; font-size: 3.15rem; font-weight: 800; } section h3 { color: var(--yellow-text); line-height: 1; margin: -0.75em 0 1em; font-size: 1.7rem; font-weight: 700; } article { font-size: 1.1rem; } article p { margin: 1em 0; } article h1 { font-size: 3em; margin: 0 0 .67em 0; line-height: 1.1; color: #202225; font-family: 'DM Serif Text', "proxima-nova", sans-serif; font-weight: 400; } article h2 { font-size: 1.7em; margin: 1.66em 0 .83em 0; font-family: 'DM Serif Text', "proxima-nova", sans-serif; font-weight: 400; } article h3 { font-size: 1.17em; margin: 1.33em 0 1rem 0; color: #202225 } article h4 { font-size: 1em; margin: 1.33em 0 1rem 0; color: #202225; } article h5 { font-size: .83em; margin: 1.67em 0; } article h6 { font-size: .75em; margin: 2.33em 0; } article strong { font-weight: 600; color: #575740; } /* article h2 { color: #585858; margin: 30px 0 13px 0; font-size: 18px; text-transform: uppercase; font-weight: bold;} article h3 { color: #585858; margin: 30px 0 13px 0; text-transform: none; color: #6c6c6c; } */ article ul { margin-left: 20px; } article ul li { margin-bottom: 15px; list-style: disc; } article ol li { margin: 0 0 15px 20px; list-style: decimal; } article, article p, article ul, article ol { color: #6b6b5b; } article blockquote { font-style: italic; padding-left: 1.5em; border-left: 5px solid #e5e5e5; margin-left: 1.5em; } article iframe { border: none; max-width: 100%; display: block; margin: 3rem auto; } article a { color: #c18f15; } article a:hover { color: #202225; } article pre { font-size: 0.8em; line-height: 1.15; background: #f7f7f7; padding: 2em; border-radius: 5px; overflow-y: auto; margin: 1rem 0; } article code { } .voImage { margin: 0; } .voImage img { display: block; } .voImage.border {} .voImage.border img { display: block; width: 100%; height: auto; border: 1px solid #6b6b5b; } .voImage .caption { } .voImage.left { float: left; margin-right: 1rem; } .voImage.right { float: right; margin-left: 1rem; margin-right: 0; } .voImage.center { display: block; margin: 0 auto; } .voImage .credit { text-align: right; } .voImage .caption { font-size: 11px; background: #f7f7f7; cursor: text; padding: 6px 9px; } @media only screen and (max-width: 520px) { section h2 { font-size: 2.5rem; } section h3 { font-size: 1.4rem; } } @media only screen and (max-width: 420px) { section h2 { font-size: 2.3rem; } section h3 { font-size: 1.3rem; } } /* ================================================================================== */ /* === Paywall Pioneers */ /* ================================================================================== */ #pioneers { background: #E3E3E3; border: none; } #pioneers .container { display: flex; justify-content: space-between; padding-top: 175px; padding-bottom: 75px; } #pioneers p { } #pioneers .text { width: 48%; } #pioneers .image { width: 45%; background: url(../../img/paywall7c.png) no-repeat right center; background-size: contain; } @media only screen and (min-width: 1050px) { #pioneers .container { } #pioneers .text { padding: 40px 0; } } @media only screen and (max-width: 930px) { #pioneers .container { display: block; } #pioneers .text { width: 100%; padding-bottom: 60px; } #pioneers .image { width: 100%; padding-top: 65%; background-position: center; } } @media only screen and (max-width: 700px) { #pioneers .image { padding-top: 75%; } } @media only screen and (max-width: 600px) { #pioneers .image { padding-top: 100%; } } /* ================================================================================== */ /* == Black banner */ /* ================================================================================== */ #first { text-align: center; color: #fff; border: none; position: relative; background: #E3E3E3; } #first:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background:#Fff; border-top: 1px solid #e3e3e3; } #first .container { padding-top: 0; padding-bottom: 0; } #first .banner { background: #000; border-radius: 30px; padding: 80px 60px; position: relative; overflow: hidden; box-shadow: 10px 10px var(--yellow); border: 4px solid var(--yellow); } #first .banner:before, #first .banner:after { content: ""; position: absolute; bottom: 10%; left: 5%; border: 1px solid var(--yellow); width: 500px; height: 500px; border-radius: 50%; opacity: 0.25; } #first .banner:after { bottom: 15%; left: 7%; } #first h2 { font-size: 2.5rem; font-weight: 700; color: #fff; margin: 0; line-height: 1.2; } @media only screen and (max-width: 920px) { #first .banner { padding: 60px; } #first h2 { font-size: 2rem; } } @media only screen and (max-width: 800px) { #first .banner { padding: 60px; } #first h2 { font-size: 1.8rem; font-weight: 600; } } @media only screen and (max-width: 520px) { #first .banner { padding: 50px; } #first h2 { font-size: 1.6rem; } } #first .banner:before { animation-name: headerRing1; animation-duration: 19s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } #first .banner:after { animation-name: headerRing2; animation-duration: 9s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } /* ================================================================================== */ /* === Experience */ /* ================================================================================== */ #work { background: #F5F6F7; border-bottom: 1px solid #e3e3e3; background: #fff; } #work .container { display: flex; justify-content: space-between;} #work h2 { } #work p {} #work .text { width: 45%; } #work .image { width: 50%; position: relative; background: url(../../img/experts5b.jpg) no-repeat left center; background-size: contain; } @media only screen and (min-width: 1000px) { #work .text { padding: 2.5rem 0; } } @media only screen and (max-width: 800px) { #work .container { display: block; } #work .text { width: 100%; padding: 60px 0 0 0; } #work .image { width: 100%; padding-top: 80%; background-position: center; } } /* ================================================================================== */ /* == Who we work with */ /* ================================================================================== */ #who { text-align: center; background: #000; } #who h2 { color: #fff; font-weight: 700; } #who ul { overflow: hidden; list-style: none; display: flex; justify-content: space-between; flex-wrap: wrap; padding-bottom: 6px; } #who ul li { border: 2px solid #bbb; background: #111; box-shadow: 0px 6px rgba(255,255,255,0.25); width: calc(25% - 25px); height: 167px; padding: 0 10px; margin-top: 33px; border-radius: 16px; text-align: center; overflow: hidden; } #who ul li h2 { font-size: 1.3rem; color: #ddd; margin: 0; font-weight: 600; font-size: 1.2rem; text-shadow: 0 -1px 1px #000; } #who ul li span { display: block; width: 100%; height: 115px; } #who ul li#newspapers span { background: url(../../img/icon-newspaper.png) no-repeat center; background-size: 55px 48px; } #who ul li#magazines span { background: url(../../img/icon-magazine.png) no-repeat center; background-size: 44px 52px; } #who ul li#education span { background: url(../../img/icon-education.png) no-repeat center; background-size: 85px 50px; } #who ul li#blogs span { background: url(../../img/icon-blog.png) no-repeat center; background-size: 62px 40px; } #who ul li#communities span { background: url(../../img/icon-key.png) no-repeat center; background-size: 52px 49px; } #who ul li#downloads span { background: url(../../img/icon-downloads.png) no-repeat center; background-size: 69px 45px; } #who ul li#media span { background: url(../../img/icon-tv.png) no-repeat center; background-size: 56px 57px; } #who ul li#pay span { background: url(../../img/icon-dollar.png) no-repeat center; background-size: 64px 36px; } #who ul li#more span { background: url(../../img/icon-more.png) no-repeat center; background-size: 46px; } #who ul li#more { display: none; } @media only screen and (max-width: 1000px) { #who ul li { width: calc(33% - 20px); } #who ul li#more { display: block; } } @media only screen and (max-width: 800px) { #who ul li { width: calc(50% - 15px); } #who ul li#more { display: none; } } @media only screen and (max-width: 550px) { #who ul li { height: 130px; } #who ul li h2 { font-size: 1.05rem; } #who ul li span { height: 90px; } #who ul li#newspapers span { background-size: auto 40px; } #who ul li#magazines span { background-size: auto 41px; } #who ul li#education span { background-size: auto 37px; } #who ul li#blogs span { background-size: auto 30px; } #who ul li#communities span { background-size: auto 38px; } #who ul li#downloads span { background-size: auto 34px; } #who ul li#media span { background-size: auto 42px; } #who ul li#pay span { background-size: auto 29px; } } @media only screen and (max-width: 420px) { #who ul li { width: calc(50% - 10px); margin-top: 22px; } } /* ================================================================================== */ /* == We build tools */ /* ================================================================================== */ #tools { background: var(--yellow); text-align: center; border-bottom: 3px solid var(--border-dark); bord//er-top: 3px solid rgba(0,0,0,0.4); } #tools .container { max-width: 900px; } #tools h2 { margin: 0; font-family: 'DM Serif Text', serif; line-height: 1.15; font-weight: 400; } @media only screen and (max-width: 800px) { #tools h2 { font-size: 2.8rem; } } @media only screen and (max-width: 540px) { #tools h2 { font-size: 2.4rem; } } @media only screen and (max-width: 420px) { #tools h2 { font-size: 2.2rem; } } @media only screen and (max-width: 400px) { #tools h2 { font-size: 2rem; } } /* ================================================================================== */ /* == Our Software */ /* ================================================================================== */ #software { background: #fff; text-align: center; border-top: 3px solid rgba(0,0,0,0.4); border-bottom: 3px solid var(--border-dark); } #software .container { overflow: visible;} #software p.description { font-size: 1.25rem; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #software .cards { } #software .card { display: flex; margin-top: 80px; text-align: left; background: #fff; border: 3px solid #222; border-radius: 20px; position: relative; overflow: hidden; } #software .card { border: 3px solid var(--border-dark); box-shadow: 0px 6px var(--border-dark); bor/der:none; box-sha/dow: rgba(0, 0, 0, 0.05) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px, rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; } #software .card .image { width: 275px; border-right: 3px solid var(--border-dark); cursor: pointer; } #software .card .image:hover { border-color: var(--border-dark); } #software #paywall .image { background: url(../../img/pigeon-paywall-transparent.png) no-repeat center, url(../../img/pigeon-bg.jpg) center; background-size: 105% auto, auto 100%; } #software #archive .image { background: url(../../img/pigeon-archive-transparent.png) no-repeat center, url(../../img/pigeon-bg.jpg) center; background-size: 100% auto, auto 100%; } #software #paywall .image:hover, #software #archive .image:hover { background-size: 107% auto, auto 100%;} #software .card .text { width: calc(100% - 275px); padding: 37px; } #software .card .text h3 { color: #202225; margin: 0; font-size: 2rem; font-weight: 700; } #software .card .text h3 a { color: #202225; } #software .card .text h4 { color: var(--yellow-text); margin: 0.2em 0 1em 0; font-size: 1.25rem; font-weight: 700; line-height: 1.2; } #software .learn-more { color: var(--border-dark); background: var(--yellow); border: 2px solid var(--border-dark); box-shadow: 4px 4px rgba(0,0,0,0.4); display: inline-block; padding: 0.5em 1.5em; border-radius: 5px; margin-top: 1.6em; font-weight: 600; } #software .learn-more:hover { background: var(--border-dark); color: #fff; } @media only screen and (max-width: 800px) { #software .card { display: block; margin-top: 50px; } #software .card .image { width: 100%; display: block; padding-top: 50%; border-right: none; border-bottom: 6px solid var(--yellow); background-size: auto 100%, auto 100% !important; } #software .card .text { width: 100%; } } @media only screen and (max-width: 680px) { #software p.description { font-size: 1.15rem; } } @media only screen and (max-width: 420px) { #software .card { margin-top: 40px; } #software .card .text{ padding: 27px; } } /* ================================================================================== */ /* == Articles */ /* ================================================================================== */ #blog { background: #e3e3e3; background: linear-gradient(25deg, rgba(227,227,218,1) 0%, rgba(206,206,200,1) 100%); color: #fff; border-top: 1px solid #d0d0d0; border-top: 3px solid rgba(0,0,0,0.4); border-bottom: 3px solid var(--border-dark); overflow: hidden; } #blog h2 { } #blog ul { display: flex; justify-content: space-between; } #blog ul li { width: calc(50% - 80px); background: #fff; color: #474747; padding: 30px; border: 3px solid var(--border-dark); border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px, rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; position: relative; z-index: 3; } #blog ul li h3 { font-family: 'DM Serif Text', serif; line-height: 1.15; font-size: 1.8rem; margin: 0 0 1rem 0; font-weight: 700; } #blog ul li .continue { display: block; margin-top: 1em; font-weight: 600; color: var(--border-dark); background: var(--yellow); border: 2px solid var(--border-dark); box-shadow: 4px 4px rgba(0,0,0,0.4); display: inline-block; padding: 0.5em 1em; border-radius: 5px;} #blog ul li .continue:hover { background: var(--border-dark); color: #fff; } #blog ul li a { color: var(--yellow-text); display: block; } #blog ul li a:hover { color: #202225; } #blog .go-blog { width: 100px; font-weight: 700; text-align: center; padding: 0; overflow: hidden; } #blog .go-blog a { background: #202225; color: #fff; margin: 0; display: flex; height: 100%; align-items: center; justify-content: center; } #blog .go-blog a:hover { background: #000; color: #fff; } #blog ul:before, #blog ul:after { content: ""; position: absolute; bottom: 5%; right: 0%; border: 1px solid #777; width: 800px; height: 800px; border-radius: 50%; opacity: 0.25; z-index: 1; } #blog ul:after { bottom: 10%; right: -4%; } @media only screen and (max-width: 800px) { #blog ul { display: block; } #blog ul li { width: 100%; margin-top: 50px; } #blog .go-blog { width: 100%; line-height: 60px; } } @media only screen and (max-width: 520px) { #blog ul li { margin-top: 40px; } } @media only screen and (max-width: 420px) { #blog ul li { padding: 27px; } } #blog ul:before { animation-name: headerRing1; animation-duration: 19s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } #blog ul:after { animation-name: headerRing2; animation-duration: 9s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } /* ================================================================================== */ /* === Contact */ /* ================================================================================== */ #contact { background: var(--yellow); border-top: 3px solid rgba(0,0,0,0.3); } #contact .container { display: flex; } #contact #contact-box { width: 50%; } #contact .text { width: 50%; padding-right: 40px; background: url(../../img/pigeon2.jpg) no-repeat left bottom; background-size: 230px auto; } #contact h3 { color: #836009; } #contact-box { border-radius: 15px; padding: 25px; background: #000; box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -2px, rgba(15, 2, 6, 0.15) 0px 40px 90px 0px; } #contact-box fieldset { padding: 0; border: none; } #contact-box legend { display: none; } #contact-box label { color: #aaa; display: none; } #contact-box input, #contact-box textarea, #contact-box button { background: #222; width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #000; border-radius: 5px; color: #e5e5e5; box-shadow: inset 0 -20px 20px -20px rgba(55,55,55,0.5), inset 0 -1px 1px rgba(255,255,255,0.07), inset 0 1px 1px rgba(0,0,0,0.15); } #contact-box input:focus, #contact-box textarea:focus, #contact-box button:focus{ outline: none; border-color: #DAA520; } #contact-box input { } #contact-box textarea { height: 160px; } #contact-box button { background: var(--yellow); backgr//ound: linear-gradient(0deg, #DAA520 0%, #fdc330 100%); margin: 0; font-weight: 600; cursor: pointer; color: #000; box-shadow: inset 0 1px 2px rgba(255,255,255,0.15), inset 0 1px 1px rgba(255,255,255,0.15), inset 0 -1px 2px rgba(0,0,0,0.15), inset 0 -1px 1px rgba(0,0,0,0.15); } #contact-box button:hover { background: #DAA520; background: linear-gradient(0deg, #ae7e05 0%, #DAA520 100%); } #contact-box .success-message, #contact-box .error-message { background: var(--yellow); color: #000; font-weight: 600; text-align: center; padding: 1em; border-radius: 5px; margin-bottom: 15px; } @media only screen and (max-width: 1000px) { #contact #contact-box { width: 60%; } #contact .text { width: 40%; } } @media only screen and (max-width: 870px) { #contact .container { display: block; } #contact #contact-box { float: none; width: 100%; } #contact .text { float: none; width: 100%; text-align: center; padding: 0 0 200px 0; background-position: center bottom 25px; background-size: 180px auto;: } } /* ================================================================================== */ /* == Blog Index ==================================================================== */ /* ================================================================================== */ .post-index {} .post-index .post { background: #fff; color: #474747; padding: 30px; margin-bottom: 4rem; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px, rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; } .post-index h2 { font-family: 'DM Serif Text', serif; line-height: 1.15; font-size: 1.8rem; font-weight: 400; margin: 0 0 1rem 0; } .post-index .post .continue { display: block; margin-top: 1em; font-weight: 600; } .post-index .post a { color: var(--yellow-text); display: block; } .post-index .post a:hover { color: #202225; } /* ================================================================================== */ /* == Article ======================================================================= */ /* ================================================================================== */ #content { } #content .container { max-width: 860px; } #content h1 { color: #202225; font-size: 3rem; margin: 0 0 1.03em 0; } a.back-to-blog { display: inline-block; background: var(--yellow); padding: 0 1em 0 calc(1em - 7px); line-height: 40px; color: #202225; border-radius: 0 3px 3px 0; margin: 0 0 2em 20px; font-size: 0.9rem; font-weight: 600; position: relative; } a.back-to-blog:after { content:""; position: absolute; top:0; right:100%; height:0; width:0; border-width: 20px; border-style:solid; border-color: var(--yellow); border-top-color:transparent; border-bottom-color:transparent; border-left-color:transparent; } a.back-to-blog:hover { animation-name: backButton; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes backButton { from { transform: translate(0, 0px); } 40% { transform: translate(-7px, 0); } to { transform: translate(0, 0px); } } /* ================================================================================== */ /* == Footer ======================================================================== */ /* ================================================================================== */ #footer { clear: both; background: #000; color: #898989; } #footer .container { padding: 50px; } #footer .text { float: left; } #footer h3 { margin: 0; color: var(--yellow-text); line-height: normal; } #footer h3 a { color: var(--yellow-text); } #footer p { font-size: 0.8rem; opacity: 0.8; } #footer ul { float: right; margin-top: 14px; } #footer ul li { display: inline; margin-left: 30px; } #footer ul li a { color: #898989; } @media only screen and (max-width: 760px) { #footer { text-align: center; } #footer .text { float: none; text-align: center; } #footer ul { display: none; } #footer .container { padding: 6.5vw; } } /* ================================================================================== */ /* == Contact Page ================================================================== */ /* ================================================================================== */ .contact-container { text-align: center; } .contact-container h1 { font-size: 3rem; margin: 0 0 0.2em 0 !important; line-height: 1; } .contact-container p { font-size: 1.15rem; margin-bottom: 3rem; } /* for sticky footer */ body.contact { display: flex; flex-direction: column; min-height: 100vh; } body.contact #content { display: flex; flex-grow: 1; flex-shrink: 0; flex-basis: auto; align-items: center; } @media only screen and (min-width: 740px) { .contact-container { width: 600px; } } @media only screen and (max-width: 520px) { .contact-container p { font-size: 1.05rem; } } /* ================================================================================== */ /* == BLOG ========================================================================== */ /* ================================================================================== */ .post-content p#post-credits { color: #88c029; margin: -25px 0 50px 0; } .articles p.post-credits { color: #bababa; margin: -10px 0 15px 0; } .articles .social { margin: 40px 0 50px 0; background: #f5f5f5; padding: 16px 10px 10px 17px; border: 1px solid #e5e5e5; border-radius: 5px; overflow: hidden; } .articles .social #retweet { float: left; margin-right: 12px; } .articles .social .fb-like { float: left; width: 450px; height: 20px; } .articles .twitter-tweet { margin: 0 auto; } .articles .author-signature { margin-top: 4.5rem; position: relative; font-style: italic; font-size: 0.95rem; opacity: 0.9; } .articles .author-signature:before { content: ""; height: 2px; width: 30px; background: #898989; position: absolute; top: -1.5rem; left: 0; } /*Blog Code Snippets*/ .syntaxhighlighter { padding: 25px 0; } .post-content pre { margin-bottom: 20px; /*background: #f7f7f7; border: 1px solid #eee; padding: 25px; overflow: auto;*/} .post-content code { background: #f7f7f7; } /*Newsletter Subscribe*/ #subscribe-to-newsletter { padding: 25px; background: #88c029; color: #2b2b2b; position: relative; margin: 25px 0; } #subscribe-to-newsletter h3 { color: #2b2b2b; margin-bottom: 13px; } #subscribe-to-newsletter p { font-size: 14px; line-height: 18px; } #subscribe-to-newsletter ul li { margin-bottom: 10px; } #subscribe-to-newsletter input { padding: 5px; font-size: 14px; display: block; } #subscribe-to-newsletter button.submit { display: block; width: 100%; height: 36px; margin-top: 15px; border: none; background: #2b2b2b; color: #fff; font-weight: 600; text-transform: uppercase; font-size: 15px; border-radius: 4px; } #subscribe-to-newsletter button.submit:hover { background: #444; } #subscribe-to-newsletter .success-message { background: #2b2b2b; color: #eee; padding: 15px; margin-bottom: 25px; border-radius: 4px; line-height: 18px;} .notice { display: block; font-weight: 600; color: #fff; background: var(--border-dark); padding: 1.25em 1.5em; margin-bottom: 1.25em; border-radius: 5px;} .notice a { text-decoration: underline; color: var(--yellow-text); } .notice a:hover { color: var(--yellow); } /* ================================================================================== */ /* == Opt-Out Page ================================================================== */ /* ================================================================================== */ body#opt-out .voForm { } body#opt-out .voForm fieldset { border: none; padding: 0; } body#opt-out .voForm label { display: none; } body#opt-out .voForm input { width: 100%; padding: 1em; border: 1px solid #e3e3e3; border-radius: 5px; margin: 1em 0; } body#opt-out .voForm button { background: #000; color: #eee; border: none; padding: 1em; border-radius: 5px; width: 100%; } /* for sticky footer */ body#opt-out { display: flex; flex-direction: column; min-height: 100vh; } body#opt-out #content { display: flex; flex-grow: 1; flex-shrink: 0; flex-basis: auto; align-items: center; } /* ================================================================================== */ /* == 404 / Error Page ============================================================== */ /* ================================================================================== */ #error-page { background: var(--yellow); text-align: center; color: #202225 } #error-page .text { background: url(../../img/pigeon1.jpg) no-repeat center bottom; background-size: auto 240px; padding-bottom: 300px; } #error-page h1 { font-size: 3rem; margin: 0 0 0.2em 0; line-height: 1; } #error-page p { font-size: 1.15rem; } /* for sticky footer */ body#error { display: flex; flex-direction: column; min-height: 100vh; } #error-page { display: flex; flex-grow: 1; flex-shrink: 0; flex-basis: auto; align-items: center; } @media only screen and (max-width: 420px) { #error-page h1 { font-size: 2.25rem; } #error-page p { font-size: 1.05rem; } #error-page .text { background-size: auto 210px; padding-bottom: 260px; } }