/* Reset */ *{ display: block; margin: 0; padding: 0; font-family: inherit; line-height: inherit; font-size: inherit; border: 0; border-radius: 0; border-spacing: 0; border: 0; outline: 0; text-decoration: inherit; font-weight: inherit; list-style: none; color: inherit; word-break: break-word; text-overflow: ellipsis; background: none; background-repeat: no-repeat; background-position: center; background-size: contain; -webkit-text-size-adjust: none; appearance: none; -moz-appearance: none; -webkit-appearance: none; -webkit-touch-callout: none; -webkit-user-select: inherit; -moz-user-select: inherit; -ms-user-select: inherit; user-select: inherit; box-sizing: border-box; z-index: 1; cursor: inherit; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; flex-direction: row; flex-grow: 1; flex-shrink: 0; } input[type=text], textarea{ user-select: auto; -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto; cursor: text; } input[type=password]{ user-select: all; -webkit-user-select: text; } head, script, noscript{ display: none !important; } ::placeholder{ color: #555; line-height: normal; } ::-moz-placeholder{ color: #555; line-height: 1; } br{ display: inline; } /* Font */ @font-face{ font-family: "SD Collie Slab"; src: url("sdcollieslab.eot"); src: local("SD Collie Slab"), local("sdcollieslab"), url("sdcollieslab.eot?#iefix") format("embedded-opentype"), url("sdcollieslab.woff2") format("woff2"), url("sdcollieslab.woff") format("woff"), url("sdcollieslab.ttf") format("truetype"), url("sdcollieslab.svg#sdcollieslab") format("svg"); font-weight: normal; font-style: normal; } /* FontAwesome */ @font-face{ font-family: "Font Awesome 5 Brands"; font-style: normal; font-weight: normal; font-display: auto; src: url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-brands-400.eot"); src: url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-brands-400.woff2") format("woff2"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-brands-400.woff") format("woff"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-brands-400.ttf") format("truetype"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-brands-400.svg#fontawesome") format("svg"); } @font-face{ font-family:"Font Awesome 5 Free"; font-style: normal; font-weight: 400; font-display: auto; src: url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-regular-400.eot"); src: url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-regular-400.woff2") format("woff2"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-regular-400.woff") format("woff"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-regular-400.ttf") format("truetype"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-regular-400.svg#fontawesome") format("svg"); } @font-face{ font-family:"Font Awesome 5 Free"; font-style: normal; font-weight: 900; font-display: auto; src: url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-solid-900.eot"); src: url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-solid-900.woff2") format("woff2"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-solid-900.woff") format("woff"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-solid-900.ttf") format("truetype"), url("//use.fontawesome.com/releases/v5.10.2/webfonts/fa-solid-900.svg#fontawesome") format("svg"); } /* Tidio */ #tidio-chat{ z-index: 10; /* font-size: 1em; */ } #tidio-chat *{ /* font-size: inherit; */ } /* Carousel */ .slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}.slick-list:focus{outline:0}.slick-list.dragging{cursor:pointer;cursor:pointer}.slick-slider .slick-list,.slick-slider .slick-track{-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)}.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}.slick-track:after,.slick-track:before{display:table;content:''}.slick-track:after{clear:both}.slick-loading .slick-track{visibility:hidden}.slick-slide{display:none;float:left;height:100%;min-height:1px}[dir=rtl] .slick-slide{float:right}.slick-slide img{display:block}.slick-slide.slick-loading img{display:none}.slick-slide.dragging img{/*pointer-events:none*/}.slick-initialized .slick-slide{display:block}.slick-loading .slick-slide{visibility:hidden}.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}.slick-arrow.slick-hidden{display:none} /* Components */ .wrapper{ margin: 0 auto; max-width: 80em; } .block{ margin: 0 auto; max-width: 70em; } .inner{ margin: 0 auto; max-width: 40em; } .separator{ height: 2em; } /* Layout */ html{ min-width: 200px; height: 100%; color: #444; font-family: "Ubuntu", sans-serif; font-size: 62.5%; font-weight: normal; line-height: 1; text-decoration: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; background-color: #fff; } body{ display: flex; flex-direction: column; } #header{ position: relative; padding: 2em; } #header > div{ } #logo{ } #logo > a{ margin-top: -0.075em; padding-top: 0.5em; padding-bottom: 0.5em; padding-left: 2.5em; display: flex; flex-direction: column; justify-content: center; width: 7.5em; height: 3em; font-weight: 600; background-image: url("symbol.png"); background-position: left center; background-size: auto 2em; cursor: pointer; } #logo > a > span{ display: none; } #subheading{ display: none; } #menu{ } #menu > h2{ display: none; } #menu > ul{ margin-top: 2em; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } body.js #menu > ul{ display: none; } body.js #menu.active > ul{ display: block; } #menu > ul > li{ flex-grow: 0; flex-shrink: 1; } body.js #menu > ul > li{ flex-grow: initial; flex-shrink: initial; } #menu > ul > li > a{ padding: 1em; font-weight: 600; cursor: pointer; } #menu > ul > li > a:hover{ color: #fff; background-color: #000; cursor: pointer; border-radius: 1em; } #hamburger{ display: none; } body.js #hamburger{ position: absolute; top: 0; right: 0; left: 0; display: block; margin: 0 auto; min-width: 200px; height: 0; cursor: pointer; } #hamburger:before{ content: "\f0c9"; float: right; margin-top: 2em; margin-right: 2em; padding: 1em; font-family: "Font Awesome 5 Free"; font-weight: 600; border-radius: 1em; } #hamburger:hover:before{ color: #fff; background-color: #000; cursor: pointer; } main{ z-index: 2; } #story{ position: relative; overflow: hidden; margin-bottom: -2em; padding: 2em 2em 4em 2em; } #story > div.top{ margin-top: -2em; margin-right: -2em; margin-left: -2em; height: 12em; background-color: rgb(255,5,220); background-image: linear-gradient(32deg, rgba(255,5,220,1) 14%, rgba(93,255,237,1) 93%); /* background-image: url("/images/flavor_default.jpg"); */ background-position: center; background-size: cover; /* background-attachment: fixed;*/ } #story > div.center{ margin-right: -2em; margin-left: -2em; height: 0.5em; background: rgb(174,90,240); background: linear-gradient(90deg, rgba(174,90,240,1) 0%, rgba(252,66,219,1) 75%, rgba(174,122,255,1) 100%); } #story > div.center.item-1{ background: rgb(174,90,240); background: linear-gradient(90deg, rgba(174,90,240,1) 0%, rgba(252,66,219,1) 75%, rgba(174,122,255,1) 100%); } #story > div.center.item-2{ background: rgb(90,142,240); background: linear-gradient(90deg, rgba(90,142,240,1) 0%, rgba(30,101,224,1) 71%, rgba(122,173,255,1) 100%); } #story > div.center.item-3{ background: rgb(238,240,90); background: linear-gradient(90deg, rgba(238,240,90,1) 0%, rgba(224,224,30,1) 71%, rgba(255,255,122,1) 100%); } #story > div.center.item-4{ background: rgb(104,240,90); background: linear-gradient(90deg, rgba(104,240,90,1) 0%, rgba(37,249,15,1) 71%, rgba(122,255,132,1) 100%); } #story > div.center.item-5{ background: rgb(90,240,237); background: linear-gradient(90deg, rgba(90,240,237,1) 0%, rgba(15,249,237,1) 71%, rgba(122,251,255,1) 100%); } #story > div.center.item-6{ background: rgb(240,194,90); background: linear-gradient(90deg, rgba(240,194,90,1) 0%, rgba(249,178,15,1) 71%, rgba(255,219,122,1) 100%); } #story > div.center.item-7{ background: rgb(240,90,104); background: linear-gradient(90deg, rgba(240,90,104,1) 0%, rgba(249,15,57,1) 71%, rgba(255,122,153,1) 100%); } #story > div.center.item-8{ background: rgb(90,240,172); background: linear-gradient(90deg, rgba(90,240,172,1) 0%, rgba(15,249,146,1) 71%, rgba(122,255,210,1) 100%); } #story > div{ } #story > div > div{ } #story > div > div > h2{ margin-top: 4em; } #story > div > div > h2 > span{ display: inline-block; color: #222; font-size: 2em; font-weight: 600; background-color: #fff; /* box-shadow: 0 -1em 2em -1em #000; */ -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #story > div > div > p.top{ position: absolute; top: 12em; right: 2.75em; padding: 0.5em; font-size: 0.75em; font-weight: 600; background-color: #fff; border-radius: 1em; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #story > div > div > p.top > span{ } #story > div > div > p.top:before{ content: "\f0f4"; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; } #story > div > div > p.center{ margin-top: 1.34em; color: #aaa; font-size: 0.75em; font-weight: 600; } #story > div > div > p.center > span{ display: inline-block; /* background-color: #fff; border-radius: 1em; */ -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #story > div > div > p.center:before{ content: "\f073"; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } #story > div > div > p.bottom{ } #story > div > div > p.bottom > span{ margin-top: 0.8em; margin-bottom: 0; display: inline-block; font-size: 1.25em; font-weight: 600; line-height: 1.5; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #story > div > div.center{ } #story > div > div.center > p.image{ margin-top: 2em; } #story > div > div.center > p.image > a{ overflow: hidden; position: relative; border-radius: 1em; cursor: pointer; transition: .2s; } #story > div > div.center > p.image > a:hover{ transform: scale(1.05); } #story > div > div.center > p.image > a:before{ position: absolute; right: 1em; bottom: 1em; content: "\f35d"; padding: 0.5em; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: 0.75em; background-color: #fff; border-radius: 1em; } #story > div > div.center > p.image > a > img{ overflow: hidden; width: 100%; height: auto; border-radius: 1em; cursor: pointer; } #story > div > div.center > p.image > img{ overflow: hidden; width: 100%; height: auto; border-radius: 1em; } #story > div > div.center > div{ } #story > div > div.center > div > p{ margin-top: 2em; line-height: 2; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #story > div > div.center > div > p.cta{ } #story > div > div.center > div > p.cta > a{ margin-top: 2em; padding: 1em 2em; color: #fff; width: 100%; background: rgb(42,156,237); background: linear-gradient(21deg, rgba(42,156,237,1) 0%, rgba(202,139,255,1) 100%); border-radius: 1em; box-shadow: 0 0.5em 2em -1em #000; cursor: pointer; text-align: center; } #story > div > div.center > div > p.cta > a:hover{ background: rgb(81,177,245); background: linear-gradient(21deg, rgba(81,177,245,1) 0%, rgba(221,181,255,1) 100%); } #story > div > div.center > div > p > a{ display: inline; color: #e3405e; text-decoration: underline; cursor: pointer; } #story > div > div.center > div > a{ cursor: pointer; } #story > div > div.center > div > div.top{ position: relative; margin-top: 2em; padding-left: 2em; } #story > div > div.center > div > div.top:before{ position: absolute; left: 0; top: 0; content: "\f164"; margin-top: -0.125em; width: 1em; height: 1em; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: 1.5em; text-align: center; line-height: 1; } #story > div > div.center > div > div.top > p{ } #story > div > div.center > div > div.top > p > span{ display: inline-block; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #story > div > div.center > div > div.top > p > span > span{ display: none; } #story > div > div.center > div > div.top > ul{ } #story > div > div.center > div > div.top > ul > li{ margin-top: 1em; margin-left: 1em; } #story > div > div.center > div > div.top > ul > li > span{ display: inline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #story > div > div.center > div > div.top > ul > li > span:before{ content: "+ "; margin-left: -1em; width: 1em; height: 1em; display: inline-block; } #story > div > div.center > div > div.center{ margin-top: 2em; padding-left: 2em; } #story > div > div.center > div > div.center > ul{ } #story > div > div.center > div > div.center > ul > li{ position: relative; margin-top: 1em; margin-left: 1em; list-style: none; } #story > div > div.center > div > div.center > ul > li:before{ z-index: 2; content: "\f0a4"; position: absolute; top: 0.25em; left: -2.5em; display: block; font-family: "Font Awesome 5 Free"; font-weight: 400; text-indent: 0; } #story > div > div.center > div > div.center > ul > li > span{ display: inline; line-height: 2; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #story > div > div.center > div > div.center > ul > li > span:before{ content: "• "; display: none; margin-left: -1em; width: 1em; height: 1em; /* display: inline-block; */ } #story > div > div.center > div > div.bottom{ position: relative; margin-top: 2em; padding-left: 3em; } #story > div > div.center > div > div.bottom:before{ position: absolute; left: 0; top: 0; content: "\f165"; margin-top: -0.125em; width: 1em; height: 1em; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: 1.5em; text-align: center; line-height: 1; } #story > div > div.center > div > div.bottom > p{ } #story > div > div.center > div > div.bottom > p > span{ display: inline-block; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #story > div > div.center > div > div.bottom > p > span > span{ display: none; } #story > div > div.center > div > div.bottom > ul{ } #story > div > div.center > div > div.bottom > ul > li{ margin-top: 1em; margin-left: 1em; } #story > div > div.center > div > div.bottom > ul > li > span{ display: inline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #story > div > div.center > div > div.bottom > ul > li > span:before{ content: "- "; margin-left: -1em; width: 1em; height: 1em; display: inline-block; } #story > div > div.center > div > h3{ margin-top: 2em; } #story > div > div.center > div > h3 > span{ color: #222; font-size: 1em; font-weight: 600; line-height: 1.5; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #story > div > div.center > div > div.table{ overflow-x: scroll; margin-top: 2em; border-radius: 1em; box-shadow: 0 1em 5em -2.5em #aaa; } #story > div > div.center > div > div.table > table{ display: table; width: 100%; } #story > div > div.center > div > div.table > table > caption{ display: none; } #story > div > div.center > div > div.table > table > *{ } #story > div > div.center > div > div.table > table > * > tr{ display: table-row; } #story > div > div.center > div > div.table > table > * > tr > td{ padding: 1em; display: table-cell; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #story > div > div.center > div > div.table > table > thead{ display: table-header-group; } #story > div > div.center > div > div.table > table > thead > tr{ } #story > div > div.center > div > div.table > table > thead > tr > td{ white-space: nowrap; text-overflow: initial; color: #aaa; font-weight: 500; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #story > div > div.center > div > div.table > table > tbody{ display: table-row-group; } #story > div > div.center > div > div.table > table > tbody > tr{ } #story > div > div.center > div > div.table > table > tbody > tr:nth-child(odd){ background-color: #f4f7fa; } #story > div > div.center > div > div.table > table > tbody > tr > td{ min-width: 9em; font-size: 0.75em; line-height: 1.25; } #story > div > div.center > div > div.first{ margin-top: 2em; /* margin-top: 2em; padding: 2em; border-radius: 1em; box-shadow: 0 0.5em 8em -4em #222 */; } #story > div > div.center > div > div.first > p{ font-size: 2em; font-weight: 600; font-style: italic; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #story > div > div.center > div.columns{ } #story > div > div.center > div.columns > div{ } #story > div > div.center > div.columns > div > p{ margin-top: 2em; line-height: 2; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #story > div > div.center > div.columns > div > p.image{ margin-top: 2em; } #story > div > div.center > div.columns > div > p.image > a{ overflow: hidden; position: relative; border-radius: 1em; cursor: pointer; transition: .2s; } #story > div > div.center > div.columns > div > p.image > a:hover{ transform: scale(1.05); } #story > div > div.center > div.columns > div > p.image > a:before{ position: absolute; right: 1em; bottom: 1em; content: "\f35d"; padding: 0.5em; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: 0.75em; text-align: center; line-height: 1; background-color: #fff; border-radius: 1em; } #story > div > div.center > div.columns > div > p.image > a > img{ overflow: hidden; width: 100%; height: auto; border-radius: 1em; cursor: pointer; } #story > div > div.center > div.columns > div > p.image > img{ overflow: hidden; width: 100%; height: auto; border-radius: 1em; cursor: default; } #story > div > div.center > div.columns > div.left{ } #story > div > div.center > div.columns > div.right{ } #story > div > div > div.center{ } #story > div > div > div.center > div.top{ position: relative; margin-top: 4em; margin-bottom: 2em; padding: 8em 2em 2em; background: rgb(215,19,203); background: linear-gradient(27deg, rgba(215,19,203,1) 33%, rgba(0,212,255,1) 100%); border-radius: 2em; } #story > div > div > div.center > div.top:before{ content: " "; display: block; position: absolute; left: 50%; top: 2em; margin-left: -2em; width: 4em; height: 4em; background-color: #fff; background-image: url('symbol.png'); background-position: center; background-repeat: no-repeat; background-size: 75% auto; border-radius: 5em; box-shadow: 0 0.25em 2em -1em #000; } #story > div > div > div.center > div.top > *{ margin-bottom: 2em; } #story > div > div > div.center > div.top > h3{ display: none; } #story > div > div > div.center > div.top > p.top{ display: none; } #story > div > div > div.center > div.top > p{ color: #fff; text-align: justify; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; line-height: 1.25; cursor: text; } #story > div > div > div.center > div.top > h4{ margin-bottom: 1.6em; display: none; color: #fff; font-size: 1.25em; font-weight: 600; } #story > div > div > div.center > div.top > h4.top{ display: block; } #story > div > div > div.center > div.top > ul{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } #story > div > div > div.center > div.top > ul > li{ flex-grow: 0; flex-shrink: 0; } #story > div > div > div.center > div.top > ul > li > a{ float: left; display: flex; flex-direction: row; align-items: center; padding: 1em; color: #fff; background: rgb(42,156,237); background: linear-gradient(21deg, rgba(42,156,237,1) 0%, rgba(202,139,255,1) 100%); border-radius: 2em; cursor: pointer; transition: transform .2s; } #story > div > div > div.center > div.top > ul > li > a:hover, #story > div > div > div.center > div.top > ul > li > a:focus, #story > div > div > div.center > div.top > ul > li > a:active{ transform: scale(1.05); } #story > div > div > div.center > div.top > ul > li > a:before{ content: " "; display: inline-block; width: 1em; font-family: "Font Awesome 5 Brands"; font-size: 1.5em; font-weight: 600; text-align: center; } #story > div > div > div.center > div.top > ul > li > a > span{ display: none; } #story > div > div > div.center > div.top > ul > li.first{ } #story > div > div > div.center > div.top > ul > li.first > a{ } #story > div > div > div.center > div.top > ul > li.first > a:before{ content: "\f0e1"; } #story > div > div > div.center > div.top > ul > li.second{ } #story > div > div > div.center > div.top > ul > li.second > a{ } #story > div > div > div.center > div.top > ul > li.second > a:before{ content: "\f39e"; } #story > div > div > div.center > div.top > ul > li.third{ } #story > div > div > div.center > div.top > ul > li.third > a{ } #story > div > div > div.center > div.top > ul > li.third > a:before{ content: "\f099"; } #story > div > div > div.center > div.top > ul > li:last-of-type{ margin-right: 0; } #story > div > div > div.center > div.top > div{ display: none; } body.js #story > div > div > div.center > div.top > div{ position: relative; margin-top: 2em; display: block; } #story > div > div > div.center > div.top > div > div{ width: 100%; } #story > div > div > div.center > div.top > div > div > input[type=text]{ padding: 1em; width: 100%; background-color: #fff; border-radius: 2em; border: 0.25em solid #fff; box-shadow: 0 0.5em 2em -1em #aaa; transition: transform .2s; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #story > div > div > div.center > div.top > div > div > input[type=text]:hover, #story > div > div > div.center > div.top > div > div > input[type=text]:focus, #story > div > div > div.center > div.top > div > div > input[type=text]:active{ transform: scale(1.05); } #story > div > div > div.center > div.top > div > input[type=button]{ margin-top: 1em; padding: 1em 2em; color: #fff; width: 100%; font-weight: 600; background: rgb(42,156,237); background: linear-gradient(21deg, rgba(42,156,237,1) 0%, rgba(202,139,255,1) 100%); border-radius: 1em; box-shadow: 0 0.5em 2em -1em #000; cursor: pointer; } #story > div > div > div.center > div.top > div > input[type=button]:hover{ background: rgb(81,177,245); background: linear-gradient(21deg, rgba(81,177,245,1) 0%, rgba(221,181,255,1) 100%); } #story > div > div > div.center > div.top > div > div.notification{ display: none; z-index: 500; position: absolute; top: -3em; right: 2em; padding: 1em; width: auto; background: #fff; font-size: 0.75em; font-weight: 600; border-radius: 1em; box-shadow: 0 0.5em 2em -1em #000; } #story > div > div > div.center > div.top > div > div.notification:before{ content: " "; position: absolute; right: 4.5em; bottom: -1.75em; display: block; border-width: 1em; border-style: solid; border-color: #fff transparent transparent transparent; } #story > div > div > div.center > div.top > div.center{ margin-top: -1em; } body.js #story > div > div > div.center > div.top > div.center{ margin-top: -1em; } #story > div > div > div.center > div.top > div.center > h4{ display: none; } #story > div > div > div.center > div.top > div.center > p{ } #story > div > div > div.center > div.top > div.center > p > a{ padding: 1em; color: #fff; text-align: center; font-weight: 600; text-decoration: underline; border-radius: 1em; cursor: pointer; } #story > div > div > div.center > div.top > div.center > p > a > span{ display: none; } #story > div > div > div.center > div.top > *:last-child{ margin-bottom: 0; } #story > div > div > div.center > h4.center{ display: none; } #story > div > div > div.center > p{ text-align: justify; line-height: 1.25; } #story > div > div > div.center > p.center{ text-align: center; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #story > div > div > div.center > p > a{ display: inline; color: #e3405e; text-decoration: underline; cursor: pointer; } #story > div > div > div.center > p.top{ display: none; } #story > div > div > div.center > form{ margin-top: 1em; } #story > div > div > div.center > form > div{ } #story > div > div > div.center > form > div > input[type=text]{ padding: 1em; width: 100%; background-color: #fff; border-radius: 2em; border: 0.25em solid #fff; box-shadow: 0 0.5em 2em -1em #aaa; transition: transform .2s; } #story > div > div > div.center > form > div > input[type=text]:hover, #story > div > div > div.center > form > div > input[type=text]:focus, #story > div > div > div.center > form > div > input[type=text]:active{ transform: scale(1.05); } #story > div > div > div.center > form > input[type=submit]{ margin-top: 1em; padding: 1em 2em; color: #fff; width: 100%; background: rgb(42,156,237); background: linear-gradient(21deg, rgba(42,156,237,1) 0%, rgba(202,139,255,1) 100%); border-radius: 1em; box-shadow: 0 0.5em 2em -1em #000; cursor: pointer; } #story > div > div > div.center > form > input[type=submit]:hover{ background: rgb(81,177,245); background: linear-gradient(21deg, rgba(81,177,245,1) 0%, rgba(221,181,255,1) 100%); } #story > div > div > nav{ margin-top: 4em; } #story > div > div > nav{ } #story > div > div > nav > h3{ display: none; } #story > div > div > nav > ul{ margin-top: 2em; } #story > div > div > nav > ul > li{ margin-top: 1em; } #story > div > div > nav > ul > li > a{ padding: 1em; color: #e3405e; font-weight: 600; border: 0.25em solid #e3405e; border-radius: 1em; cursor: pointer; } #story > div > div > nav > ul > li > a:hover{ color: #fff; background-color: #e3405e; } #story > div > div > nav > ul > li > a:before{ content: "\f104"; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; } #story > div > div > nav > ul > li.back{ } #story > div > div > nav > ul > li.back > a{ } #story > div > div > nav > ul > li.back > a:before{ } #story > div > div > nav > ul > li.first{ } #story > div > div > nav > ul > li.first > a{ } #story > div > div > nav > ul > li.first > a:before{ } #story > div > div > nav > ul > li.second{ } #story > div > div > nav > ul > li.second > a{ } #story > div > div > nav > ul > li.second > a:before{ content: "\f015"; } #stories{ overflow: hidden; margin-bottom: -2em; padding: 2em 2em 4em 2em; } #stories > div{ } #stories > div > h2{ } #stories > div > h2 > span{ display: inline-block; color: #222; font-size: 2em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #stories > div > p{ } #stories > div > p > span{ display: inline-block; margin-top: 2em; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #stories > div ul.first{ position: relative; margin-top: 4em; } #stories > div ul.first li{ margin-bottom: 2em; } #stories > div ul.first li > a{ position: relative; overflow: hidden; border-radius: 1em; box-shadow: 0 0.5em 4em -2em #aaa; cursor: pointer; transition: transform .2s; } #stories > div ul.first li > a:hover{ transform: scale(1.05); } #stories > div ul.first li > a > span.top{ height: 12.5em; } #stories > div ul.first li > a > span.top > span.top{ z-index: 2; position: absolute; top: 1em; left: 1em; padding: 0.5em; font-size: 0.75em; font-weight: 600; background-color: #fff; border-radius: 1em; } #stories > div ul.first li > a > span.top > span.top:before{ content: "\f0f4"; display: inline-block; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; } #stories > div ul.first li > a > span.top > span.center{ width: 100%; height: 100%; background-color: rgb(255,5,220); background-image: linear-gradient(32deg, rgba(255,5,220,1) 14%, rgba(93,255,237,1) 93%); /* background-image: url("images/flavor_default.jpg"); */ background-size: cover; border-radius: 1em 1em 0 0; } #stories > div ul.first li > a > span.top > span.bottom{ z-index: 2; position: absolute; right: 1em; bottom: 1em; padding: 0.5em; font-size: 0.75em; font-weight: 600; } #stories > div ul.first li > a > span.center{ height: 0.5em; background: rgb(174,90,240); background: linear-gradient(90deg, rgba(174,90,240,1) 0%, rgba(252,66,219,1) 75%, rgba(174,122,255,1) 100%); } #stories > div ul.first li.item-1 > a > span.center{ background: rgb(174,90,240); background: linear-gradient(90deg, rgba(174,90,240,1) 0%, rgba(252,66,219,1) 75%, rgba(174,122,255,1) 100%); } #stories > div ul.first li.item-2 > a > span.center{ background: rgb(90,142,240); background: linear-gradient(90deg, rgba(90,142,240,1) 0%, rgba(30,101,224,1) 71%, rgba(122,173,255,1) 100%); } #stories > div ul.first li.item-3 > a > span.center{ background: rgb(238,240,90); background: linear-gradient(90deg, rgba(238,240,90,1) 0%, rgba(224,224,30,1) 71%, rgba(255,255,122,1) 100%); } #stories > div ul.first li.item-4 > a > span.center{ background: rgb(104,240,90); background: linear-gradient(90deg, rgba(104,240,90,1) 0%, rgba(37,249,15,1) 71%, rgba(122,255,132,1) 100%); } #stories > div ul.first li.item-5 > a > span.center{ background: rgb(90,240,237); background: linear-gradient(90deg, rgba(90,240,237,1) 0%, rgba(15,249,237,1) 71%, rgba(122,251,255,1) 100%); } #stories > div ul.first li.item-6 > a > span.center{ background: rgb(240,194,90); background: linear-gradient(90deg, rgba(240,194,90,1) 0%, rgba(249,178,15,1) 71%, rgba(255,219,122,1) 100%); } #stories > div ul.first li.item-7 > a > span.center{ background: rgb(240,90,104); background: linear-gradient(90deg, rgba(240,90,104,1) 0%, rgba(249,15,57,1) 71%, rgba(255,122,153,1) 100%); } #stories > div ul.first li.item-8 > a > span.center{ background: rgb(90,240,172); background: linear-gradient(90deg, rgba(90,240,172,1) 0%, rgba(15,249,146,1) 71%, rgba(122,255,210,1) 100%); } #stories > div ul.first li > a > span.middle{ display: block; padding-left: 1em; padding-top: 1em; padding-right: 1em; } #stories > div ul.first li > a > span.middle > span{ font-size: 1.25em; font-weight: 600; line-height: 1.25; } #stories > div ul.first li > a > span.bottom{ display: flex; flex-direction: column; justify-content: center; padding: 1em; padding-bottom: 2.5em; min-height: 8.5em; line-height: 1.25; } #stories > div > nav{ } #stories > div > nav > h3{ display: none; } #stories > div > nav > ul{ overflow: hidden; } #stories > div > nav > ul > li{ } #stories > div > nav > ul > li > a{ padding: 1em; color: #e3405e; font-weight: 600; border: 0.25em solid #e3405e; border-radius: 1em; cursor: pointer; } #stories > div > nav > ul > li > a:hover{ color: #fff; background-color: #e3405e; } #stories > div > nav > ul > li > a > span{ display: none; } #stories > div > nav > ul > li.left{ float: left; } #stories > div > nav > ul > li.left > a{ } #stories > div > nav > ul > li.left > a:before{ content: "\f104"; display: inline-block; color: inherit; font-family: "Font Awesome 5 Free"; font-weight: bold; } #stories > div > nav > ul > li.right{ float: right; } #stories > div > nav > ul > li.right > a{ } #stories > div > nav > ul > li.right > a:after{ content: "\f105"; display: inline-block; color: inherit; font-family: "Font Awesome 5 Free"; font-weight: bold; } #principle{ margin-bottom: -2em; padding: 2em 2em 4em 2em; } #principle > div{ } #principle > div > h2{ margin-bottom: 4em; text-align: center; } #principle > div > h2 > span.top{ } #principle > div > h2 > span.top > span { display: inline-block; color: #aaa; font-size: 1.25em; font-weight: 600; text-align: center; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #principle > div > h2 > span.top > span > span{ display: none; } #principle > div > h2 > span.center{ display: inline-block; color: #222; font-size: 2em; font-weight: 600; text-align: center; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #principle > div > h2 > span.bottom{ margin-top: 2em; margin-bottom: 2em; height: 10em; border-radius: 1em; background-size: cover; box-shadow: 0 0.5em 4em -2em #000; } #principle > div > h3{ display: none; } #principle > div > p{ font-size: 1.25em; line-height: 1.5; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #principle > div > h4{ } #principle > div > h4 > span{ display: inline-block; margin-top: 2em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #principle > div > div{ margin-top: 2em; } #principle > div > div > *{ margin-top: 2em; } #principle > div > div > h5{ } #principle > div > div > h5 > span{ display: inline-block; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #principle > div > div > p{ line-height: 2; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #principle > div > div > p > a{ display: inline; color: #e3405e; text-decoration: underline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #principle > div > div > a{ -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #principle > div > div > p.image{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } #principle > div > div > p.image > a{ overflow: hidden; position: relative; border-radius: 1em; cursor: pointer; transition: .2s; } #principle > div > div > p.image > a:hover{ transform: scale(1.05); } #principle > div > div > p.image > a:before{ position: absolute; right: 1em; bottom: 1em; content: "\f35d"; padding: 0.5em; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: 0.75em; background-color: #fff; border-radius: 1em; } #principle > div > div > p.image > a > img{ overflow: hidden; width: 100%; height: auto; border-radius: 1em; cursor: pointer; } #principle > div > div > p.image > img{ overflow: hidden; width: 100%; height: auto; border-radius: 1em; } #principle > div > div > div{ } #principle > div > div > div > div.center{ margin-top: 2em; padding-left: 2em; } #principle > div > div > div > div.center > ul{ } #principle > div > div > div > div.center > ul > li{ position: relative; margin-top: 1em; margin-left: 1em; list-style: none; } #principle > div > div > div > div.center > ul > li:before{ z-index: 2; content: "\f0a4"; position: absolute; top: 0.25em; left: -2.5em; display: block; font-family: "Font Awesome 5 Free"; font-weight: 400; text-indent: 0; } #principle > div > div > div > div.center > ul > li > span{ display: inline; line-height: 1.5; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #principle > div > div > div > div.center > ul > li > span:before{ content: "• "; display: none; margin-left: -1em; width: 1em; height: 1em; /* display: inline-block; */ } #principle > div > div > div > div.center > ul > li > span > a{ display: inline; color: #e3405e; font-weight: 600; text-decoration: underline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #principle > div > div > div.top{ position: relative; padding-left: 3em; } #principle > div > div > div.top:before{ position: absolute; left: 0; top: 0; content: "\f164"; margin-top: -0.125em; width: 1em; height: 1em; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: 1.5em; text-align: center; line-height: 1; } #principle > div > div > div.top > p{ font-weight: 600; } #principle > div > div > div.top > p > span{ display: none; } #principle > div > div > div.top > ul{ } #principle > div > div > div.top > ul > li{ margin-top: 1em; margin-left: 1em; } #principle > div > div > div.top > ul > li:before{ content: "+ "; margin-left: -1em; width: 1em; height: 1em; display: inline-block; } #principle > div > div > div.bottom{ position: relative; padding-left: 3em; } #principle > div > div > div.bottom:before{ position: absolute; left: 0; top: 0; content: "\f165"; margin-top: -0.125em; width: 1em; height: 1em; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: 1.5em; text-align: center; line-height: 1; } #principle > div > div > div.bottom > p{ font-weight: 600; } #principle > div > div > div.bottom > p > span{ display: none; } #principle > div > div > div.bottom > ul{ } #principle > div > div > div.bottom > ul > li{ margin-top: 1em; margin-left: 1em; } #principle > div > div > div.bottom > ul > li:before{ content: "- "; margin-left: -1em; width: 1em; height: 1em; display: inline-block; } #principle > div > nav{ margin-top: 4em; } #principle > div > nav > h3{ display: none; } #principle > div > nav > h4{ } #principle > div > nav > ul{ } #principle > div > nav > h4.top{ margin-top: 1.6em; font-size: 1.25em; font-weight: 600; } #principle > div > nav > ul.top{ } #principle > div > nav > ul.top > li{ margin-top: 2em; } #principle > div > nav > ul.top > li > a{ overflow: hidden; display: flex; flex-direction: row; box-shadow: 0 1em 4em -2em #777; border-radius: 1em; transition: transform .2s; cursor: pointer; } #principle > div > nav > ul.top > li > a:hover{ transform: scale(1.05); } #principle > div > nav > ul.top > li > a > span.left{ flex-grow: 1; flex-shrink: 1; min-width: 5em; min-width: 5em; width: 5em; max-width: 5em; background-size: cover; border-radius: 1em 0 0 1em; } #principle > div > nav > ul.top > li > a > span.center{ flex-grow: 1; flex-shrink: 1; min-width: 0.375em; width: 0.375em; max-width: 0.375em; background: rgb(174,90,240); background: linear-gradient(45deg, rgba(174,90,240,1) 0%, rgba(252,66,219,1) 75%, rgba(174,122,255,1) 100%); } #principle > div > nav > ul.top > li > a > span.center.item-1{ background: rgb(174,90,240); background: linear-gradient(45deg, rgba(174,90,240,1) 0%, rgba(252,66,219,1) 75%, rgba(174,122,255,1) 100%); } #principle > div > nav > ul.top > li > a > span.center.item-2{ background: rgb(90,142,240); background: linear-gradient(45deg, rgba(90,142,240,1) 0%, rgba(30,101,224,1) 71%, rgba(122,173,255,1) 100%); } #principle > div > nav > ul.top > li > a > span.center.item-3{ background: rgb(238,240,90); background: linear-gradient(45deg, rgba(238,240,90,1) 0%, rgba(224,224,30,1) 71%, rgba(255,255,122,1) 100%); } #principle > div > nav > ul.top > li > a > span.center.item-4{ background: rgb(104,240,90); background: linear-gradient(45deg, rgba(104,240,90,1) 0%, rgba(37,249,15,1) 71%, rgba(122,255,132,1) 100%); } #principle > div > nav > ul.top > li > a > span.center.item-5{ background: rgb(90,240,237); background: linear-gradient(45deg, rgba(90,240,237,1) 0%, rgba(15,249,237,1) 71%, rgba(122,251,255,1) 100%); } #principle > div > nav > ul.top > li > a > span.center.item-6{ background: rgb(240,194,90); background: linear-gradient(45deg, rgba(240,194,90,1) 0%, rgba(249,178,15,1) 71%, rgba(255,219,122,1) 100%); } #principle > div > nav > ul.top > li > a > span.center.item-7{ background: rgb(240,90,104); background: linear-gradient(45deg, rgba(240,90,104,1) 0%, rgba(249,15,57,1) 71%, rgba(255,122,153,1) 100%); } #principle > div > nav > ul.top > li > a > span.center.item-8{ background: rgb(90,240,172); background: linear-gradient(45deg, rgba(90,240,172,1) 0%, rgba(15,249,146,1) 71%, rgba(122,255,210,1) 100%); } #principle > div > nav > ul.top > li > a > span.right{ flex-grow: 1; flex-shrink: 1; display: flex; flex-direction: column; justify-content: center; padding: 1.34em; min-height: 8em; font-size: 0.75em; line-height: 1.25; } #principle > div > nav > h4.center{ margin-top: 2em; } #principle > div > nav > h4.center > span{ display: inline-block; font-size: 1.25em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #principle > div > nav > ul.center{ margin: -0.5em; margin-top: 1.5em; display: flex; flex-direction: row; flex-wrap: wrap; } #principle > div > nav > ul.center > li{ flex-basis: 50%; display: flex; flex-direction: column; } #principle > div > nav > ul.center > li > span{ margin: 0.5em; } #principle > div > nav > ul.center > li > span > a{ position: relative; display: flex; flex-direction: column; height: 100%; background-color: #fff; border-radius: 1em; box-shadow: 0 0.5em 2em -1em #000; overflow: hidden; cursor: pointer; transition: transform .2s; } #principle > div > nav > ul.center > li > span > a:hover{ transform: scale(1.05); } #principle > div > nav > ul.center > li > span > a > span.left{ z-index: 5; position: absolute; top: 1em; right: 1em; left: 1em; display: flex; flex-direction: column; justify-content: center; padding: 0.67em; font-size: 0.75em; font-weight: 600; line-height: 1.25; text-align: center; background-color: #fff; border-radius: 1em; } #principle > div > nav > ul.center > li > span > a > span.center{ display: none; min-height: 0.375em; height: 0.375em; max-height: 0.375em; background: rgb(174,90,240); background: linear-gradient(90deg, rgba(174,90,240,1) 0%, rgba(252,66,219,1) 75%, rgba(174,122,255,1) 100%); } #principle > div > nav > ul.center > li > span > a > span.center.item-1{ background: rgb(174,90,240); background: linear-gradient(90deg, rgba(174,90,240,1) 0%, rgba(252,66,219,1) 75%, rgba(174,122,255,1) 100%); } #principle > div > nav > ul.center > li > span > a > span.center.item-2{ background: rgb(90,142,240); background: linear-gradient(90deg, rgba(90,142,240,1) 0%, rgba(30,101,224,1) 71%, rgba(122,173,255,1) 100%); } #principle > div > nav > ul.center > li > span > a > span.center.item-3{ background: rgb(238,240,90); background: linear-gradient(90deg, rgba(238,240,90,1) 0%, rgba(224,224,30,1) 71%, rgba(255,255,122,1) 100%); } #principle > div > nav > ul.center > li > span > a > span.center.item-4{ background: rgb(104,240,90); background: linear-gradient(90deg, rgba(104,240,90,1) 0%, rgba(37,249,15,1) 71%, rgba(122,255,132,1) 100%); } #principle > div > nav > ul.center > li > span > a > span.center.item-5{ background: rgb(90,240,237); background: linear-gradient(90deg, rgba(90,240,237,1) 0%, rgba(15,249,237,1) 71%, rgba(122,251,255,1) 100%); } #principle > div > nav > ul.center > li > span > a > span.center.item-6{ background: rgb(240,194,90); background: linear-gradient(90deg, rgba(240,194,90,1) 0%, rgba(249,178,15,1) 71%, rgba(255,219,122,1) 100%); } #principle > div > nav > ul.center > li > span > a > span.center.item-7{ background: rgb(240,90,104); background: linear-gradient(90deg, rgba(240,90,104,1) 0%, rgba(249,15,57,1) 71%, rgba(255,122,153,1) 100%); } #principle > div > nav > ul.center > li > span > a > span.center.item-8{ background: rgb(90,240,172); background: linear-gradient(90deg, rgba(90,240,172,1) 0%, rgba(15,249,146,1) 71%, rgba(122,255,210,1) 100%); } #principle > div > nav > ul.center > li > span > a > span.right{ min-height: 8em; height: 8em; max-height: 8em; background-size: cover; } #principle > div > nav > h4.bottom{ display: none; } #principle > div > nav > ul.bottom{ margin-top: 2em; } #principle > div > nav > ul.bottom > li{ margin-top: 1em; } #principle > div > nav > ul.bottom > li > a{ padding: 1em; color: #e3405e; font-weight: 600; border: 0.25em solid #e3405e; border-radius: 1em; cursor: pointer; } #principle > div > nav > ul.bottom > li > a:hover{ color: #fff; background-color: #e3405e; } #principle > div > nav > ul.bottom > li > a:before{ content: "\f104"; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; } #principle > div > nav > ul.bottom > li.back{ } #principle > div > nav > ul.bottom > li.back > a{ } #principle > div > nav > ul.bottom > li.back > a:before{ } #principle > div > nav > ul.bottom > li.first{ } #principle > div > nav > ul.bottom > li.first > a{ } #principle > div > nav > ul.bottom > li.first > a:before{ } #principle > div > nav > ul.bottom > li.second{ } #principle > div > nav > ul.bottom > li.second > a{ } #principle > div > nav > ul.bottom > li.second > a:before{ content: "\f015"; } #principles{ margin-bottom: -2em; padding: 2em 2em 4em 2em; } #principles > div{ } #principles > div > h2{ } #principles > div > h2 > span{ display: inline-block; color: #222; font-size: 2em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #principles > div > div{ } #principles > div > div > h3{ display: none; } #principles > div > div > p{ display: inline-block; margin-top: 2em; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #principles > div > div > ul{ margin-top: 4em; } #principles > div > div > ul > li{ margin-top: 2em; } #principles > div > div > ul > li > a{ position: relative; /* overflow: hidden; */ border-radius: 1em; box-shadow: 0 0.5em 4em -2em #000; cursor: pointer; background-color: #fff; transition: transform .2s; } #principles > div > div > ul > li > a:hover{ transform: scale(1.05); } #principles > div > div > ul > li > a > span.top{ position: absolute; right: 1em; bottom: 1em; left: 1em; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 1em; min-height: 4em; text-align: center; line-height: 1.25; background-color: #fff; border-radius: 1em; } #principles > div > div > ul > li > a > span.top > span{ display: flex; flex-direction: column; justify-content: center; min-height: 2.5em; flex-shrink: 1; flex-grow: 0; font-weight: 600; } #principles > div > div > ul > li > a > span.center{ display: none; height: 0.5em; background: rgb(174,90,240); background: linear-gradient(90deg, rgba(174,90,240,1) 0%, rgba(252,66,219,1) 75%, rgba(174,122,255,1) 100%); } #principles > div > div > ul > li.item-1 > a > span.center{ background: rgb(174,90,240); background: linear-gradient(90deg, rgba(174,90,240,1) 0%, rgba(252,66,219,1) 75%, rgba(174,122,255,1) 100%); } #principles > div > div > ul > li.item-2 > a > span.center{ background: rgb(90,142,240); background: linear-gradient(90deg, rgba(90,142,240,1) 0%, rgba(30,101,224,1) 71%, rgba(122,173,255,1) 100%); } #principles > div > div > ul > li.item-3 > a > span.center{ background: rgb(238,240,90); background: linear-gradient(90deg, rgba(238,240,90,1) 0%, rgba(224,224,30,1) 71%, rgba(255,255,122,1) 100%); } #principles > div > div > ul > li.item-4 > a > span.center{ background: rgb(104,240,90); background: linear-gradient(90deg, rgba(104,240,90,1) 0%, rgba(37,249,15,1) 71%, rgba(122,255,132,1) 100%); } #principles > div > div > ul > li.item-5 > a > span.center{ background: rgb(90,240,237); background: linear-gradient(90deg, rgba(90,240,237,1) 0%, rgba(15,249,237,1) 71%, rgba(122,251,255,1) 100%); } #principles > div > div > ul > li.item-6 > a > span.center{ background: rgb(240,194,90); background: linear-gradient(90deg, rgba(240,194,90,1) 0%, rgba(249,178,15,1) 71%, rgba(255,219,122,1) 100%); } #principles > div > div > ul > li.item-7 > a > span.center{ background: rgb(240,90,104); background: linear-gradient(90deg, rgba(240,90,104,1) 0%, rgba(249,15,57,1) 71%, rgba(255,122,153,1) 100%); } #principles > div > div > ul > li.item-8 > a > span.center{ background: rgb(90,240,172); background: linear-gradient(90deg, rgba(90,240,172,1) 0%, rgba(15,249,146,1) 71%, rgba(122,255,210,1) 100%); } #principles > div > div > ul > li > a > span.bottom{ height: 15em; border-radius: 1em; background-size: cover; } #principles > div > nav{ } #principles > div > nav > ul{ } #principles > div > nav > ul > li{ } #principles > div > nav > ul > li > a{ } #principles > div > nav > ul > li.first{ } #principles > div > nav > ul > li.first > a{ } #principles > div > nav > ul > li.second{ } #principles > div > nav > ul > li.second > a{ } #audit{ margin-bottom: -2em; padding: 2em 2em 4em 2em; } #audit > div.top{ margin-right: -2em; margin-left: -2em; margin-bottom: 4em; } #audit > div.top > div{ /* height: 10em; */ height: 15em; background-size: cover; } #audit > div{ } #audit > div > h2{ display: flex; flex-direction: column; margin-bottom: 2em; } #audit > div > h2 > span.top{ order: 2; } #audit > div > h2 > span.top > span{ display: inline-block; color: #222; font-size: 2em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #audit > div > h2 > span.bottom{ order: 1; } #audit > div > h2 > span.bottom > span{ display: inline-block; font-weight: 600; text-transform: capitalize; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #audit > div > h2 > span.bottom > span:after{ content: ": "; display: inline-block; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #audit > div > h3{ display: none; } #audit > div > p{ line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #audit > div > div{ } #audit > div > div > *{ margin-top: 2em; } #audit > div > div > h5{ } #audit > div > div > h5 > span{ display: inline-block; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #audit > div > div > p{ line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #audit > div > div > a{ cursor: pointer; } #audit > div > div > p.image{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; } #audit > div > div > p.image > a{ overflow: hidden; position: relative; border-radius: 1em; cursor: pointer; transition: .2s; } #audit > div > div > p.image > a:hover{ transform: scale(1.05); } #audit > div > div > p.image > a:before{ position: absolute; right: 1em; bottom: 1em; content: "\f35d"; padding: 0.5em; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: 0.75em; background-color: #fff; border-radius: 1em; } #audit > div > div > p.image > a > img{ overflow: hidden; width: 100%; height: auto; border-radius: 1em; cursor: pointer; } #audit > div > div > p.image > img{ overflow: hidden; width: 100%; height: auto; border-radius: 1em; } #audit > div > div > div.top{ position: relative; padding-left: 3em; } #audit > div > div > div.top:before{ position: absolute; left: 0; top: 0; content: "\f164"; margin-top: -0.125em; width: 1em; height: 1em; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: 1.5em; text-align: center; line-height: 1; } #audit > div > div > div.top > p{ font-weight: 600; } #audit > div > div > div.top > p > span{ display: none; } #audit > div > div > div.top > ul{ } #audit > div > div > div.top > ul > li{ margin-top: 1em; margin-left: 1em; } #audit > div > div > div.top > ul > li:before{ content: "+ "; margin-left: -1em; width: 1em; height: 1em; display: inline-block; } #audit > div > div > div.bottom{ position: relative; padding-left: 3em; } #audit > div > div > div.bottom:before{ position: absolute; left: 0; top: 0; content: "\f165"; margin-top: -0.125em; width: 1em; height: 1em; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: 1.5em; text-align: center; line-height: 1; } #audit > div > div > div.bottom > p{ font-weight: 600; } #audit > div > div > div.bottom > p > span{ display: none; } #audit > div > div > div.bottom > ul{ } #audit > div > div > div.bottom > ul > li{ margin-top: 1em; margin-left: 1em; } #audit > div > div > div.bottom > ul > li:before{ content: "- "; margin-left: -1em; width: 1em; height: 1em; display: inline-block; } #audit > div > nav{ margin-top: 4em; } #audit > div > nav > h3{ display: none; } #audit > div > nav > ul{ margin-top: 2em; } #audit > div > nav > ul > li{ margin-top: 1em; } #audit > div > nav > ul > li > a{ padding: 1em; color: #e3405e; font-weight: 600; border: 0.25em solid #e3405e; border-radius: 1em; cursor: pointer; } #audit > div > nav > ul > li > a:hover{ color: #fff; background-color: #e3405e; } #audit > div > nav > ul > li > a:before{ content: "\f104"; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; } #audit > div > nav > ul > li.back{ } #audit > div > nav > ul > li.back > a{ } #audit > div > nav > ul > li.back > a:before{ } #audit > div > nav > ul > li.first{ } #audit > div > nav > ul > li.first > a{ } #audit > div > nav > ul > li.first > a:before{ } #audit > div > nav > ul > li.second{ } #audit > div > nav > ul > li.second > a{ } #audit > div > nav > ul > li.second > a:before{ content: "\f015"; } #audits{ margin-bottom: -2em; padding: 2em 2em 4em 2em; } #audits > div{ } #audits > div > h2{ margin-bottom: 2em; } #audits > div > h2 > span{ display: inline-block; color: #222; font-size: 2em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #audits > div > p{ margin-top: 1em; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #audits > div > div{ margin-top: 4em; margin-bottom: 4em; } #audits > div > div > h3{ display: none; } #audits > div > div > ul{ margin-top: 2em; } #audits > div > div > ul > li{ margin-bottom: 2em; } #audits > div > div > ul > li > a{ overflow: hidden; display: flex; flex-direction: row; flex-grow: 1; flex-shrink: 1; border-radius: 1em; box-shadow: 0 0.5em 4em -2em #000; background-color: #fff; cursor: pointer; transition: transform .2s; } #audits > div > div > ul > li > a:hover{ transform: scale(1.05); } #audits > div > div > ul > li > a > span.left{ flex-grow: 1; min-width: 5em; width: 5em; max-width: 5em; background-size: cover; border-radius: 1em 0 0 1em; } #audits > div > div > ul > li > a > span.right{ flex-grow: 1; flex-shrink: 1; padding: 1em; } #audits > div > div > ul > li > a > span.right > span.top{ } #audits > div > div > ul > li > a > span.right > span.top > span{ font-size: 1.25em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } #audits > div > div > ul > li > a > span.right > span.center{ margin-top: 1.34em; font-size: 0.75em; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; } #audits > div > nav{ } #audits > div > nav > h3{ display: none; } #audits > div > nav > ul{ margin-top: 2em; } #audits > div > nav > ul > li{ margin-top: 1em; } #audits > div > nav > ul > li > a{ padding: 1em; color: #e3405e; font-weight: 600; border: 0.25em solid #e3405e; border-radius: 1em; cursor: pointer; } #audits > div > nav > ul > li > a:hover{ color: #fff; background-color: #e3405e; } #audits > div > nav > ul > li > a:before{ content: "\f104"; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; } #audits > div > nav > ul > li.first{ } #audits > div > nav > ul > li.first > a{ } #audits > div > nav > ul > li.second{ } #audits > div > nav > ul > li.second > a{ } #audits > div > nav > ul > li.second > a:before{ content: "\f015"; } #redesigns{ margin-bottom: -2em; padding: 2em 2em 4em 2em; } #redesigns > div{ } #redesigns > div > h2{ color: #222; font-size: 2em; font-weight: 600; } #contact{ margin-bottom: -2em; padding: 2em 2em 4em 2em; } #contact > div{ } #contact > div:before{ content: " "; margin: 0 auto 2em; display: block; width: 5em; height: 5em; background-image: url("photo.png"); background-position: center; background-repeat: no-repeat; background-size: contain; } #contact > div > h2{ margin-bottom: 1em; } #contact > div > h2 > span{ display: inline-block; color: #222; font-size: 2em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #contact > div > p{ display: inline-block; margin-top: 1em; line-height: 1.5; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #contact > div > p > a{ display: inline-block; color: #e3405e; text-decoration: underline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #contact > div > ul{ margin-top: 4em; margin-bottom: 2em; } #contact > div > ul > li{ overflow: hidden; padding: 2em; margin: -3em -2em -2em; } #contact > div > ul > li > a{ /* float: left; */ display: flex; flex-direction: row; align-items: center; padding: 1em; color: #fff; background: rgb(215,19,203); background: linear-gradient(27deg, rgba(215,19,203,1) 33%, rgba(0,212,255,1) 100%); border-radius: 2em; cursor: pointer; transition: transform .2s; } #contact > div > ul > li > a:hover, #contact > div > ul > li > a:focus, #contact > div > ul > li > a:active{ transform: scale(1.05); } #contact > div > ul > li > a:before{ display: inline-block; margin-right: 0.5em; width: 1em; font-family: "Font Awesome 5 Brands"; font-size: 1.5em; font-weight: 600; text-align: center; } #contact > div > ul > li.instagram{ } #contact > div > ul > li.instagram > a{ } #contact > div > ul > li.instagram > a:before{ content: "\f16d"; } #contact > div > ul > li.linkedin{ } #contact > div > ul > li.linkedin > a{ } #contact > div > ul > li.linkedin > a:before{ content: "\f0e1"; } #contact > div > ul > li.twitter{ } #contact > div > ul > li.twitter > a{ } #contact > div > ul > li.twitter > a:before{ content: "\f099"; } #contact > div > ul > li.behance{ } #contact > div > ul > li.behance > a{ } #contact > div > ul > li.behance > a:before{ content: "\f1b4"; } #contact > div > ul > li.dribbble{ } #contact > div > ul > li.dribbble > a{ } #contact > div > ul > li.dribbble > a:before{ content: "\f17d"; } #contact > div > ul > li.codepen{ } #contact > div > ul > li.codepen > a{ } #contact > div > ul > li.codepen > a:before{ content: "\f1cb"; } #contact > div > ul > li.medium{ } #contact > div > ul > li.medium > a{ } #contact > div > ul > li.medium > a:before{ content: "\f23a"; } #contact > div > ul > li.mentorcruise{ } #contact > div > ul > li.mentorcruise > a{ } #contact > div > ul > li.mentorcruise > a:before{ content: "\f21a"; font-family: "Font Awesome 5 Free"; } #contact > div > ul > li.youtube{ } #contact > div > ul > li.youtube > a{ } #contact > div > ul > li.youtube > a:before{ content: "\f167"; } #cv{ overflow: hidden; margin-bottom: -2em; padding: 2em 2em 4em 2em; } #cv > div{ } #cv > div > h2{ margin-right: -5em; margin-bottom: 2.5em; margin-left: -5em; text-align: center; background: linear-gradient(27deg, rgba(215,19,203,1) 33%, rgba(0,212,255,1) 100%); transform: rotate(-2deg); } #cv > div > h2 > span{ padding: 0.5em 2em; display: inline-block; color: #fff; font-size: 2em; font-weight: 600; text-align: center; transform: rotate(2deg); -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #cv > div > div.top{ margin-top: 4em; } #cv > div > div.top > h3{ display: none; } #cv > div > div.top > div.top{ margin: 0 auto 2.5em; width: 5em; height: 5em; background-image: url("photo.png"); border-radius: 1em; } #cv > div > div.top > div{ } #cv > div > div.top > div > p{ margin-top: 1em; text-align: justify; line-height: 1.5; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #cv > div > div.top > div > p.center{ margin-top: 2em; color: #555; font-size: 1.25em; font-weight: 600; line-height: 1.25; } #cv > div > div.top > div > p.center > span{ display: none; } #cv > div > div.top > div > ul{ margin-top: 2em; } #cv > div > div.top > div > ul > li{ margin-top: 1em; } #cv > div > div.top > div > ul > li > a{ display: flex; flex-direction: row; align-items: center; justify-content: flex-start; cursor: pointer; transition: transform .2s; } #cv > div > div.top > div > ul > li > a:hover{ transform: scale(1.05); } #cv > div > div.top > div > ul > li > a:before{ content: "\f1a0"; margin-right: 1em; padding: 0.5em; display: block; width: 1em; height: 1em; color: #fff; font-family: "Font Awesome 5 Brands"; background: linear-gradient(27deg, rgba(215,19,203,1) 33%, rgba(0,212,255,1) 100%); border-radius: 5em; } #cv > div > div.top > div > ul > li > a > span{ } #cv > div > div.top > div > ul > li > a > span > span.top{ } #cv > div > div.top > div > ul > li > a > span > span.bottom{ font-weight: 600; } #cv > div > div.top > div > p.bottom{ } #cv > div > div.center{ margin-top: 4em; } #cv > div > div.center > h3.top{ margin-top: 0.5em; margin-right: -5em; margin-bottom: 4.5em; margin-left: -5em; text-align: center; background: rgb(215,19,203); background: linear-gradient(27deg, rgba(215,19,203,1) 33%, rgba(0,212,255,1) 100%); transform: rotate(-2deg); } #cv > div > div.center > h3.top > span{ padding: 0.5em 2em; display: inline-block; color: #fff; font-size: 2em; font-weight: 600; text-align: center; transform: rotate(2deg); -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #cv > div > div.center > div{ } #cv > div > div.center > div > h4{ display: inline-block; font-size: 1.5em; font-weight: 700; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } body.js #cv > div > div.center > div > h4{ position: relative; margin-right: 0.5em; margin-bottom: 0.5em; padding: 1em; padding-right: 3em; display: block; color: #e3405e; font-size: inherit; font-weight: 600; border: 0.25em solid #e3405e; border-radius: 1em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } body.js #cv > div > div.center > div > h4:hover{ color: #fff; background-color: #e3405e; } body.js #cv > div > div.center > div > h4:before{ content: "\f0d7"; position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 3em; height: 100%; color: inherit; font-family: "Font Awesome 5 Free"; font-weight: 600; text-align: center; } body.js #cv > div > div.center > div > h4.active{ color: #fff; background-color: #e3405e; } body.js #cv > div > div.center > div > h4.active:before{ content: "\f0d8"; } #cv > div > div.center > div > h4.active{ } #cv > div > div.center > div > h4.active:before{ content: "\f0d8"; } #cv > div > div.center > div > h4.item-1{ } #cv > div > div.center > div > h4.item-2{ } #cv > div > div.center > div > h4.item-3{ } #cv > div > div.center > div > div{ margin-top: 1.5em; margin-bottom: 2em; } body.js #cv > div > div.center > div > div{ display: none; } body.js #cv > div > div.center > div > div.active{ display: block; } #cv > div > div.center > div > div.item-1{ } #cv > div > div.center > div > div.item-2{ } #cv > div > div.center > div > div.item-3{ } #cv > div > div.center > div > div > p.top{ margin-bottom: 2em; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #cv > div > div.center > div > div > h5{ display: inline-block; margin-bottom: 2em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #cv > div > div.center > div > div > ul{ } #cv > div > div.center > div > div > ul > li{ } #cv > div > div.center > div > div > ul.top{ margin-right: -1em; margin-bottom: 1em; display: flex; flex-direction: row; flex-wrap: wrap; } #cv > div > div.center > div > div > ul.top > li{ flex-grow: 0; position: relative; margin-right: 1em; margin-bottom: 1em; width: 2em; height: 2em; color: #222; } #cv > div > div.center > div > div > ul.top > li > span{ display: none; position: absolute; bottom: 3em; right: -3.125em; width: 9em; padding: 1em 0.5em; font-size: 0.75em; text-align: center; font-weight: 600; background-color: #fff; box-shadow: 0 0.5em 2.5em -0.5em #000; border-radius: 1em; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #cv > div > div.center > div > div > ul.top > li:hover > span{ display: block; } #cv > div > div.center > div > div > ul.top > li > span:after{ content: " "; z-index: 20; position: absolute; bottom: -0.75em; right: 4em; margin-bottom: 0; display: block; width: 0; height: 0; background-color: transparent; border-width: 1em 0.5em 0 0.5em; border-style: solid; border-color: #fff transparent; } #cv > div > div.center > div > div > ul.top > li:before{ content: "\f6e3"; display: block; width: 1em; height: 1em; font-family: "Font Awesome 5 Free"; font-size: 2em; text-align: center; background-position: center; background-repeat: no-repeat; background-size: contain; } #cv > div > div.center > div > div > ul.top > li.adobesuite:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("adobe.svg"); } #cv > div > div.center > div > div > ul.top > li.alexishr:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("alexishr.svg"); } #cv > div > div.center > div > div > ul.top > li.atlassian:before{ content: "\f77b"; font-family: "Font Awesome 5 Brands"; } #cv > div > div.center > div > div > ul.top > li.axure:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("axure.svg"); } #cv > div > div.center > div > div > ul.top > li.balsamiq:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("balsamiq.svg"); } #cv > div > div.center > div > div > ul.top > li.css:before{ content: "\f13c"; font-family: "Font Awesome 5 Brands"; } #cv > div > div.center > div > div > ul.top > li.excel:before{ content: "\f1c3"; } #cv > div > div.center > div > div > ul.top > li.figma:before{ content: "\f799"; font-family: "Font Awesome 5 Brands"; } #cv > div > div.center > div > div > ul.top > li.git:before{ content: "\f1d3"; font-family: "Font Awesome 5 Brands"; } #cv > div > div.center > div > div > ul.top > li.github:before{ content: "\f09b"; font-family: "Font Awesome 5 Brands"; } #cv > div > div.center > div > div > ul.top > li.googleanalytics:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("googleanalytics.svg"); } #cv > div > div.center > div > div > ul.top > li.googleoptimize:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("googleoptimize.svg"); } #cv > div > div.center > div > div > ul.top > li.googlesheets:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("googlesheets.svg"); } #cv > div > div.center > div > div > ul.top > li.googlesites:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("googlesites.svg"); } #cv > div > div.center > div > div > ul.top > li.googletagmanager:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("googletagmanager.svg"); } #cv > div > div.center > div > div > ul.top > li.hotjar:before{ content: "\f3b1"; font-family: "Font Awesome 5 Brands"; } #cv > div > div.center > div > div > ul.top > li.invision:before{ content: "\f7b0"; font-family: "Font Awesome 5 Brands"; } #cv > div > div.center > div > div > ul.top > li.jira:before{ content: "\f7b1"; font-family: "Font Awesome 5 Brands"; } #cv > div > div.center > div > div > ul.top > li.kissmetrics:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("kmetrics.svg"); } #cv > div > div.center > div > div > ul.top > li.klipfolio:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("klipfolio.svg"); } #cv > div > div.center > div > div > ul.top > li.mailchimp:before{ content: "\f59e"; font-family: "Font Awesome 5 Brands"; } #cv > div > div.center > div > div > ul.top > li.maze:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("maze.svg"); } #cv > div > div.center > div > div > ul.top > li.photopea:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("photopea.svg"); } #cv > div > div.center > div > div > ul.top > li.photoshop:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("photoshop.svg"); } #cv > div > div.center > div > div > ul.top > li.powerpoint:before{ content: "\f1c4"; } #cv > div > div.center > div > div > ul.top > li.htmlsemantic:before{ content: "\f13b"; font-family: "Font Awesome 5 Brands"; } #cv > div > div.center > div > div > ul.top > li.sketch:before{ content: "\f7c6"; font-family: "Font Awesome 5 Brands"; } #cv > div > div.center > div > div > ul.top > li.surveymonkey:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("surveymonkey.svg"); } #cv > div > div.center > div > div > ul.top > li.subversionsvn:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("svn.svg"); } #cv > div > div.center > div > div > ul.top > li.timeular:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("timeular.svg"); } #cv > div > div.center > div > div > ul.top > li.trello:before{ content: "\f181"; font-family: "Font Awesome 5 Brands"; } #cv > div > div.center > div > div > ul.top > li.typeform:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("typeform.svg"); } #cv > div > div.center > div > div > ul.top > li.userbit:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("userbit.svg"); } #cv > div > div.center > div > div > ul.top > li.whimsical:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("whimsical.svg"); } #cv > div > div.center > div > div > ul.top > li.wordpress:before{ content: "\f19a"; font-family: "Font Awesome 5 Brands"; } #cv > div > div.center > div > div > ul.top > li.zeplin:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("zeplin.svg"); } #cv > div > div.center > div > div > ul.top > li.zeroheight:before{ overflow: hidden; color: transparent; text-indent: -999999em; background-image: url("zeroheight.svg"); } #cv > div > div.center > div > div > ul.bottom{ margin-right: -0.5em; margin-bottom: -0.5em; } #cv > div > div.center > div > div > ul.bottom > li{ overflow: hidden; margin-right: 0.5em; margin-bottom: 0.5em; display: inline-block; border-radius: 0.5em; } #cv > div > div.center > div > div > ul.bottom > li > span{ z-index: 10; position: relative; padding: 1em; color: #222; font-size: 0.75em; background-color: #f2f2f2; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #cv > div > div.center > h3.bottom{ margin-top: 4.5em; margin-right: -5em; margin-bottom: 4.5em; margin-left: -5em; text-align: center; background: linear-gradient(27deg, rgba(215,19,203,1) 33%, rgba(0,212,255,1) 100%); transform: rotate(-2deg); } #cv > div > div.center > h3.bottom > span{ padding: 0.5em 2em; display: inline-block; color: #fff; font-size: 2em; font-weight: 600; text-align: center; transform: rotate(2deg); -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #cv > div > div.center > div{ } #cv > div > div.center > div > p.js{ display: none; } body.js #cv > div > div.center > div > p.js{ order: 41; display: block; flex-grow: 1; flex-shrink: 0; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #cv > div > div.center > div > form.js{ display: none; } body.js #cv > div > div.center > div > form.js{ order: 42; display: block; flex-grow: 1; flex-shrink: 0; margin-top: 2em; } #cv > div > div.center > div > form > label{ margin-top: 2em; margin-bottom: 2em; display: none; } #cv > div > div.center > div > form > input{ padding: 1em; width: 100%; background-color: #fff; border-radius: 2em; border: 0.25em solid #fff; box-shadow: 0 0.5em 2em -1em #000; transition: transform .2s; } #cv > div > div.center > div > form > input:hover, #cv > div > div.center > div > form > input:focus, #cv > div > div.center > div > form > input:active{ transform: scale(1.05); } #cv > div > div.center > div > form > input:focus, #cv > div > div.center > div > form > input:active{ border-color: #ee2a7b; } #cv > div > div.center > div > ul.js{ display: block; } body.js #cv > div > div.center > div > ul.js{ order: 43; flex-grow: 1; flex-shrink: 0; margin-top: 2em; margin-bottom: -1em; display: none; } #cv > div > div.center > div > ul > li{ margin-bottom: 1em; margin-left: 2em; display: list-item; list-style-type: disc; list-style-position: outside; } #cv > div > div.bottom{ margin-top: 2em; } #cv > div > div.bottom > h3{ margin-top: 4.5em; margin-right: -5em; margin-bottom: 4.5em; margin-left: -5em; text-align: center; background: linear-gradient(27deg, rgba(215,19,203,1) 33%, rgba(0,212,255,1) 100%); transform: rotate(-2deg); } #cv > div > div.bottom > h3 > span{ padding: 0.5em 2em; display: inline-block; color: #fff; font-size: 2em; font-weight: 600; text-align: center; transform: rotate(2deg); -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #cv > div > div.bottom > h3 > span > span{ display: none; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #cv > div > div.bottom > div{ } #cv > div > div.bottom > div > ul{ margin-bottom: 4em; } #cv > div > div.bottom > div > ul > li{ position: relative; margin-bottom: 2em; padding-left: 3em; } #cv > div > div.bottom > div > ul > li:before{ content: " "; display: block; position: absolute; top: 0; left: 0; width: 2em; height: 2em; background: linear-gradient(27deg, rgba(215,19,203,1) 33%, rgba(0,212,255,1) 100%); border-radius: 5em; } #cv > div > div.bottom > div > ul > li > span.top{ } #cv > div > div.bottom > div > ul > li > span.top > span{ display: inline-block; font-weight: bold; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #cv > div > div.bottom > div > ul > li > a{ margin-top: 0.67em; padding: 0.5em 1em; display: inline-block; color: #e3405e; font-size: 0.75em; font-weight: 600; line-height: 1.25; background-color: #fff; border-radius: 2em; box-shadow: 0 0.25em 2em -0.75em #000; cursor: pointer; } #cv > div > div.bottom > div > ul > li > a:hover{ color: #fff; background-color: #e3405e; } #cv > div > div.bottom > div > ul > li > span.center{ } #cv > div > div.bottom > div > ul > li > span.center > span{ display: inline-block; font-style: italic; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #cv > div > div.bottom > div > ul > li > span.bottom{ margin-top: 2em; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #cv > div > div.bottom > div > ul > li:after{ z-index: 10; content: " "; display: block; position: absolute; top: 0.3725em; left: 0.3725em; width: 1.25em; height: 1.25em; background-position: center; background-repeat: no-repeat; background-size: contain; } #cv > div > div.bottom > div > ul > li.refappab:after{ background-image: url("refappab.png"); } #cv > div > div.bottom > div > ul > li.qredab:after{ background-image: url("qredab.png"); } #cv > div > div.bottom > div > ul > li.axiomaticsab:after{ background-image: url("axiomaticsab.png"); } #cv > div > div.bottom > div > ul > li.compentusab:after{ background-image: url("compentusab.png"); } #cv > div > div.bottom > div > ul > li.qvaliaab:after{ background-image: url("qvaliaab.png"); } #cv > div > div.bottom > div > ul > li.mavshackab:after{ background-image: url("mavshackab.png"); } #cv > div > div.bottom > div > ul > li.uxdaniel:after{ background-image: url("uxdaniel.png"); } #cv > div > div.bottom > div > nav{ } #cv > div > div.bottom > div > nav > h4{ display: none; } #cv > div > div.bottom > div > nav > ul{ } #cv > div > div.bottom > div > nav > ul > li{ } #cv > div > div.bottom > div > nav > ul > li > a{ } #cv > div > div.bottom > div > nav > ul > li.first{ } #cv > div > div.bottom > div > nav > ul > li.first > a{ } #cv > div > div.bottom > div > nav > ul > li.first > a > span.first{ position: relative; padding: 1em 3em 1em 1em; color: #e3405e; font-weight: 600; border: 0.25em solid #e3405e; border-radius: 1em; cursor: pointer; } #cv > div > div.bottom > div > nav > ul > li.first > a > span.first:hover{ color: #fff; background-color: #e3405e; } #cv > div > div.bottom > div > nav > ul > li.first > a > span.first:before{ content: "\f1c1"; margin-right: 0.5em; display: inline-block; height: 1em; color: inherit; font-family: "Font Awesome 5 Free"; font-weight: 600; text-align: center; } #cv > div > div.bottom > div > nav > ul > li.first > a > span.first:after{ content: "\f35d"; position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 3em; height: 100%; color: inherit; font-family: "Font Awesome 5 Free"; font-weight: 600; text-align: center; } #cv > div > div.bottom > div > nav > ul > li.first > a > span.second{ z-index: 10; position: fixed; bottom: 1em; left: 1em; padding: 1em; color: #222; font-size: 0.75em; font-weight: 600; background-color: #fff; border-radius: 1em; box-shadow: 0 0.25em 2em -0.75em #000; cursor: pointer; } #cv > div > div.bottom > div > nav > ul > li.first > a > span.second:hover{ color: #fff; background-color: #e3405e; } #cv > div > div.bottom > div > nav > ul > li.first > a > span.second:before{ content: "\f1c1"; margin: 0 auto; display: block; width: 1em; height: 1em; font-family: "Font Awesome 5 Free"; font-size: 2em; font-weight: 600; text-align: center; } #cv > div > div.bottom > div > nav > ul > li.first > a > span.second:after{ content: "PDF CV"; margin-top: 0.67em; display: block; font-size: 0.75em; text-align: center; } #cv > div > div.bottom > div > nav > ul > li.second{ margin-top: 1em; } #cv > div > div.bottom > div > nav > ul > li.second > a{ position: relative; padding: 1em 3em 1em 1em; color: #e3405e; font-weight: 600; border: 0.25em solid #e3405e; border-radius: 1em; cursor: pointer; } #cv > div > div.bottom > div > nav > ul > li.second > a:hover{ color: #fff; background-color: #e3405e; } #cv > div > div.bottom > div > nav > ul > li.second > a:after{ content: "\f105"; position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; width: 3em; height: 100%; color: inherit; font-family: "Font Awesome 5 Free"; font-weight: 600; text-align: center; } #sample{ overflow: hidden; display: flex; flex-direction: column; margin-bottom: -2em; padding: 2em 2em 4em; } #sample > div.first{ order: 1; margin: 0 -2em 4em; width: auto; height: 10em; background-size: cover; } #sample > div.top{ order: 1; display: flex; flex-direction: column; margin-bottom: 4em; } #sample > div.top > h2{ order: 2; margin-bottom: 0; } #sample > div.top > h3{ display: none; } #sample > div.top > ul{ order: 1; margin-top: 0; margin-right: -1em; margin-bottom: 4em; display: flex; flex-direction: row; } #sample > div.top > ul > li{ width: 33%; } #sample > div.top > ul > li > a{ margin-right: 1em; height: 10em; background-size: cover; border-radius: 1em; cursor: pointer; transition: transform .2s; } #sample > div.top > ul > li > a:hover{ transform: scale(1.05) } #sample > div.top > p{ order: 3; margin-top: 1.34em; margin-bottom: 0; } #sample > div{ order: 2; width: 100%; } #sample > div > h2{ margin-bottom: 2em; } #sample > div > h2 > span{ display: inline-block; color: #222; font-size: 2em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #sample > div > h3{ display: none; } #sample > div > p{ margin-bottom: 2.68em; font-size: 1.5em; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #sample > div > div#infobox{ margin-top: 0; margin-bottom: 4em; /* padding: 2em; */ border-radius: 2em; /* box-shadow: 0 1em 4em -2em #000; */ } #sample > div > div#infobox > h4{ /* display: none; */ } #sample > div > div#infobox > div{ margin-top: 2em; } #sample > div > div#infobox > div:first-of-type{ margin-top: 0; } #sample > div > div#infobox > div > p{ margin-top: 2em; font-size: 0.75em; line-height: 2; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #sample > div > div#infobox > div > ul{ margin-top: 1em; margin-right: -1em; display: flex; flex-direction: row; flex-wrap: wrap; } #sample > div > div#infobox > div > ul > li{ flex-grow: 1; flex-shrink: 1; padding-top: 1em; padding-right: 1em; } #sample > div > div#infobox > div > ul > li > span{ -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #sample > div > div#infobox > div > ul > li > span.top{ margin-bottom: 0.5em; font-size: 0.75em; font-weight: 600; } #sample > div > div#infobox > div > ul > li > span.top > span{ display: inline; } #sample > div > div#infobox > div > ul > li > span.bottom{ font-size: 0.75em; } #sample > div > div#infobox > div > ul > li > span.bottom > a{ display: inline-block; color: #e3405e; font-weight: 600; text-decoration: underline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #sample > div > div#infobox > div > div{ margin-top: 2em; } #sample > div > div#infobox > div > div > h5{ display: none; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #sample > div > div#infobox > div > div > h6{ margin-bottom: 0.5em; font-size: 0.75em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #sample > div > div#infobox > div > div > p{ font-size: 0.75em; line-height: 2; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #sample > div > div#infobox > div#infobox-company{ } #sample > div > div#infobox > div#infobox-timeframe{ margin-top: 1em; } #sample > div > div#infobox > div#infobox-timeframe > h5{ display: none; } #sample > div > div#infobox > div#infobox-timeframe > ul{ } #sample > div > div#infobox > div#infobox-timeframe > ul > li{ } #sample > div > div#infobox > div#infobox-timeframe > ul > li > span.top{ } #sample > div > div#infobox > div#infobox-timeframe > ul > li > span.bottom{ line-height: 2; } #sample > div > div#infobox > div#infobox-case{ } #sample > div > div#infobox > div#infobox-case > h5{ display: none; } #sample > div > div#infobox > div#infobox-people{ position: relative; } body.js #sample > div > div#infobox > div#infobox-people > div#infobox-people-button{ position: absolute; top: 0; right: 0; margin: 0; cursor: pointer; } body.js #sample > div > div#infobox > div#infobox-people > div#infobox-people-button:before{ width: 1em; height: 1em; content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 600; text-align: center; } body.js #sample > div > div#infobox > div#infobox-people.active > div#infobox-people-button:before{ content: "\f077"; } #sample > div > div#infobox > div#infobox-people > h5{ display: block; } #sample > div > div#infobox > div#infobox-people > ul{ } body.js #sample > div > div#infobox > div#infobox-people > ul{ display: none; padding-left: 2em; } body.js #sample > div > div#infobox > div#infobox-people.active > ul{ display: block; } #sample > div > div#infobox > div#infobox-people > ul > li{ } #sample > div > div#infobox > div#infobox-people > ul > li > span.top{ display: block; } #sample > div > div#infobox > div#infobox-people > ul > li > span.top > span.center{ display: inline; } #sample > div > div#infobox > div#infobox-people > ul > li > span.top > span.center > span{ display: inline; } #sample > div > div#infobox > div#infobox-people > ul > li > span.top > span.center > span.right{ display: inline; } #sample > div > div#infobox > div#infobox-people > ul > li > span.bottom{ margin-top: 0.5em; font-size: 0.75em; line-height: 2; } #sample > div > div#infobox > div#infobox-process{ position: relative; } body.js #sample > div > div#infobox > div#infobox-process > div#infobox-process-button{ position: absolute; top: 0; right: 0; margin: 0; cursor: pointer; } body.js #sample > div > div#infobox > div#infobox-process > div#infobox-process-button:before{ width: 1em; height: 1em; content: "\f078"; font-family: "Font Awesome 5 Free"; font-weight: 600; text-align: center; } body.js #sample > div > div#infobox > div#infobox-process.active > div#infobox-process-button:before{ content: "\f077"; } #sample > div > div#infobox > div#infobox-process > h5{ display: block; } #sample > div > div#infobox > div#infobox-process > ul{ } body.js #sample > div > div#infobox > div#infobox-process > ul{ display: none; padding-left: 2em; } body.js #sample > div > div#infobox > div#infobox-process.active > ul{ display: block; } #sample > div > div#infobox > div#infobox-process > ul > li{ } #sample > div > div#infobox > div#infobox-process > ul > li > span.top{ } #sample > div > div#infobox > div#infobox-process > ul > li > span.top > span{ } #sample > div > div#infobox > div#infobox-process > ul > li > span.bottom{ margin-top: 0.5em; font-size: 0.75em; line-height: 2; } #sample > div > div{ } #sample > div > div > h4{ margin-top: 0.5em; margin-right: -10em; margin-bottom: 2.5em; margin-left: -10em; text-align: center; background: rgb(215,19,203); background: linear-gradient(27deg, rgba(215,19,203,1) 33%, rgba(0,212,255,1) 100%); transform: rotate(-2deg); } #sample > div > div > h4 > span{ padding: 0.5em 5em; display: inline-block; color: #fff; font-size: 2em; font-weight: 600; text-align: center; transform: rotate(2deg); -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #sample > div > div > *{ margin-top: 2em; } #sample > div > div > h5{ font-weight: 600; text-align: center; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #sample > div > div > p{ line-height: 2; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #sample > div > div > p > a{ display: inline-block; color: #e3405e; font-weight: 600; text-decoration: underline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #sample > div > div > p > strong{ font-weight: 700; } #sample > div > div > p > strong > a{ display: inline-block; color: #e3405e; font-weight: 600; text-decoration: underline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #sample > div > div > p > strong > em{ font-style: italic; } #sample > div > div > p > strong > em > a{ display: inline-block; color: #e3405e; font-weight: 600; text-decoration: underline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #sample > div > div > p.image{ } #sample > div > div > p.image > img{ overflow: hidden; width: 100%; height: auto; border-radius: 1em; cursor: default; } #sample > div > div > p.image > a{ overflow: hidden; position: relative; display: block; border-radius: 1em; color: #000; cursor: pointer; transition: .2s; } #sample > div > div > p.image > a:hover{ transform: scale(1.05); } #sample > div > div > p.image > a:before{ position: absolute; right: 1em; bottom: 1em; content: "\f35d"; padding: 0.5em; margin-right: 0.25em; width: 2em; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: 0.75em; text-align: center; background-color: #fff; border-radius: 2.5em; } #sample > div > div > p.image > a > img{ overflow: hidden; width: 100%; height: auto; border-radius: 1em; cursor: pointer; } #sample > div > div > div.list{ margin-top: 2em; padding-left: 2em; } #sample > div > div > div.list > ul{ } #sample > div > div > div.list > ul > li{ position: relative; margin-top: 1em; margin-left: 1em; list-style: none; } #sample > div > div > div.list > ul > li:before{ z-index: 2; content: "\f0a4"; position: absolute; top: 0.25em; left: -2.5em; display: block; font-family: "Font Awesome 5 Free"; font-weight: 400; text-indent: 0; } #sample > div > div > div.list > ul > li > span{ display: inline; line-height: 2; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #sample > div > div > div.list > ul > li > span:before{ content: "• "; display: none; margin-left: -1em; width: 1em; height: 1em; /* display: inline-block; */ } #sample > div > div > div.columns{ } #sample > div > div > div.columns > div{ margin-top: 2em; } #sample > div > div > div.columns > div > p{ line-height: 2; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #sample > div > div > div.columns > div > p > a{ display: inline-block; color: #e3405e; font-weight: 600; text-decoration: underline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #sample > div > div > div.columns > div > p.image{ } #sample > div > div > div.columns > div > p.image > img{ overflow: hidden; width: 100%; height: auto; border-radius: 1em; cursor: default; } #sample > div > div > div.columns > div > p.image > a{ overflow: hidden; position: relative; display: block; border-radius: 1em; cursor: pointer; transition: .2s; } #sample > div > div > div.columns > div > p.image > a:hover{ transform: scale(1.05); } #sample > div > div > div.columns > div > p.image > a:before{ position: absolute; right: 1em; bottom: 1em; content: "\f35d"; padding: 0.5em; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: 0.75em; background-color: #fff; border-radius: 1em; } #sample > div > div > div.columns > div > p.image > a > img{ overflow: hidden; width: 100%; height: auto; border-radius: 1em; cursor: pointer; } #sample > div > div > div.columns > div.left{ } #sample > div > div > div.columns > div.right{ } #sample > div > div > div#retrospective{ margin: 4em 0 -2em; } #sample > div > div > div#retrospective > h4{ margin-top: 0.5em; margin-right: -10em; margin-bottom: 2.5em; margin-left: -10em; text-align: center; background: rgb(215,19,203); background: linear-gradient(27deg, rgba(215,19,203,1) 33%, rgba(0,212,255,1) 100%); transform: rotate(-2deg); } #sample > div > div > div#retrospective > h4 > span{ padding: 0.5em 5em; display: inline-block; color: #fff; font-size: 2em; font-weight: 600; text-align: center; transform: rotate(2deg); -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #sample > div > div > div#retrospective > div{ } #sample > div > div > div#retrospective > div > h5{ margin-bottom: 0.625em; font-size: 1.25em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #sample > div > div > div#retrospective > div > p{ margin-bottom: 2em; line-height: 2; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #sample > div > div > div#retrospective > h5{ margin-bottom: 0.625em; font-size: 1.25em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #sample > div > div > div#retrospective > div.center{ margin-top: 2em; } #sample > div > div > div#retrospective > div.center > p{ margin-bottom: 2em; } #sample > div > div > div#retrospective > div.center > p.left{ } #sample > div > div > div#retrospective > div.center > p.right{ } #sample > div > div > div#retrospective > div.center > p > a{ overflow: hidden; background-size: cover; border-radius: 1em; cursor: pointer; transition: transform .2s; } #sample > div > div > div#retrospective > div.center > p > a:hover{ transform: scale(1.05) } #sample > div > div > div#retrospective > div.center > p > a > img{ width: 100%; height: auto; } #sample > div > #passworded{ } #sample > div > #passworded > div{ margin-top: 0; } #sample > div > #passworded > div > h2{ display: none; } #sample > div > #passworded > div > div{ display: flex; flex-direction: column; } #sample > div > #passworded > div > div > div.left{ order: 2; } #sample > div > #passworded > div > div > div.left > p.top{ margin-top: 0; font-size: 2em; font-weight: 600; line-height: 1; } #sample > div > #passworded > div > div > div.left > p{ margin-top: 2em; line-height: 2; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #sample > div > #passworded > div > div > div.left > p > a{ display: inline; color: #e3405e; text-decoration: underline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #sample > div > #passworded > div > div > div.right{ order: 1; margin-bottom: 4em; background-image: url("locked.png"); } #sample > div > #passworded > div > div > div.right > img{ margin: 0 auto; width: 100%; max-width: 10em; height: auto; } #sample > div > nav{ } #sample > div > nav > h3{ display: none; } #sample > div > nav > ul{ margin-top: 4em; } #sample > div > nav > ul > li{ margin-top: 1em; } #sample > div > nav > ul > li > a{ padding: 1em; color: #e3405e; font-weight: 600; border: 0.25em solid #e3405e; border-radius: 1em; cursor: pointer; } #sample > div > nav > ul > li > a:hover{ color: #fff; background-color: #e3405e; } #sample > div > nav > ul > li > a:before{ content: "\f104"; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; } #sample > div > nav > ul > li.first{ } #sample > div > nav > ul > li.first > a{ } #sample > div > nav > ul > li.second{ } #sample > div > nav > ul > li.second > a{ } #sample > div > nav > ul > li.second > a:before{ content: "\f015"; } #portfolio{ overflow: hidden; margin-bottom: -2em; padding: 2em 2em 4em; } #portfolio > div{ } #portfolio > div > h2{ margin-right: -5em; margin-bottom: 4em; margin-left: -5em; text-align: center; background: linear-gradient(27deg, rgba(215,19,203,1) 33%, rgba(0,212,255,1) 100%); transform: rotate(-2deg); } #portfolio > div > h2 > span{ padding: 0.5em 2em; display: inline-block; color: #fff; font-size: 2em; font-weight: 600; text-align: center; transform: rotate(2deg); -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #portfolio > div > div{ } #portfolio > div > div > h3{ display: none; } #portfolio > div > div > ul{ } #portfolio > div > div > ul > li{ margin-top: 4em; } #portfolio > div > div > ul > li > a{ position: relative; overflow: hidden; background-color: #fff; border-radius: 1em; box-shadow: 0 0.5em 4em -2em #000; cursor: pointer; transition: transform .2s; } #portfolio > div > div > ul > li > a:hover{ transform: scale(1.05); } #portfolio > div > div > ul > li > a > span.top{ height: 25em; background-size: cover; border-radius: 1em; } #portfolio > div > div > ul > li > a > span.center{ position: absolute; right: 0; bottom: 0; left: 0; margin-right: -5em; margin-bottom: 2.5em; margin-left: -5em; background: linear-gradient(27deg, rgba(215,19,203,1) 33%, rgba(0,212,255,1) 100%); box-shadow: 0 0.5em 2em -0.75em #000; transform: rotate(-2deg); } #portfolio > div > div > ul > li > a > span.center > span{ padding: 1em 6em; color: #fff; font-size: 1em; font-weight: 600; text-align: center; line-height: 1.25; text-shadow: 0 0.125em 2em #000, 0 0.125em 4em #000; transform: rotate(2deg); } #portfolio > div > div > ul > li > a > span.right{ z-index: 10; position: absolute; top: 1em; right: 1em; padding: 1em; color: #000; font-size: 0.5em; font-weight: 600; background-color: #fff; border-radius: 10em; box-shadow: 0 0.5em 2em -1em #000; } #portfolio > div > div > ul > li > a > span.right > span{ display: none; } #portfolio > div > nav{ } #portfolio > div > nav > h3{ display: none; } #portfolio > div > nav > ul{ margin-top: 4em; } #portfolio > div > nav > ul > li{ margin-top: 1em; } #portfolio > div > nav > ul > li > a{ padding: 1em; color: #e3405e; font-weight: 600; border: 0.25em solid #e3405e; border-radius: 1em; cursor: pointer; } #portfolio > div > nav > ul > li > a:hover{ color: #fff; background-color: #e3405e; } #portfolio > div > nav > ul > li > a:before{ content: "\f104"; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; } #portfolio > div > nav > ul > li.first{ } #portfolio > div > nav > ul > li.first > a{ } #portfolio > div > nav > ul > li.second{ } #portfolio > div > nav > ul > li.second > a{ position: relative; padding-right: 2em; } #portfolio > div > nav > ul > li.second > a:before{ display: none; } #portfolio > div > nav > ul > li.second > a:after{ content: "\f105"; position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 2em; font-family: "Font Awesome 5 Free"; font-weight: 600; } #portfolio > div > nav > ul > li.third{ } #portfolio > div > nav > ul > li.third > a{ } #portfolio > div > nav > ul > li.third > a:before{ content: "\f015"; } #research{ overflow: hidden; margin-bottom: -2em; padding: 2em 2em 4em; } #research > div{ } #research > div > h2{ margin-bottom: 2em; } #research > div > h2 > span{ display: inline-block; color: #222; font-size: 2em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #research > div > p{ display: inline-block; margin-bottom: 2em; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #research > div > ul{ margin-top: 2em; margin-bottom: -2em; } #research > div > ul > li{ margin-right: auto; margin-bottom: 2em; margin-left: auto; max-width: 12.5em; } #research > div > ul > li > span{ position: relative; } #research > div > ul > li > span > a{ cursor: pointer; } #research > div > ul > li > span > a.top{ display: flex; flex-direction: column; padding: 3em 2em 2em; border: 0.125em solid #222; } #research > div > ul > li > span > a.top:hover{ color: #fff; background-color: #222; } #research > div > ul > li > span > a.top:before{ z-index: 10; position: absolute; top: 0; left: 0; content: " "; display: block; width: 0; height: 0; border-style: solid; border-color: #fff #222 #222 #fff; border-width: 1em; } #research > div > ul > li > span > a.top:after{ z-index: 11; position: absolute; top: 0.29375em; left: 0.29375em; content: " "; display: block; width: 0; height: 0; border-style: solid; border-color: transparent #fff #fff transparent; border-width: 0.8125em; } #research > div > ul > li > span > a.top:hover:before{ } #research > div > ul > li > span > a.top:hover:after{ } #research > div > ul > li > span > a.top > span.top{ order: 1; font-size: 1.25em; font-weight: 700; } #research > div > ul > li > span > a.top > span.top > span{ display: none; } #research > div > ul > li > span > a.top > span.center{ order: 3; margin-top: 1em; font-style: italic; line-height: 1.25; } #research > div > ul > li > span > a.top > span.center > span{ display: none; } #research > div > ul > li > span > a.top > span.bottom{ order: 2; margin-top: 1.34em; font-weight: 600; font-size: 0.75em; } #research > div > ul > li > span > a.top > span.bottom:before{ content: "\f073"; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; } #research > div > ul > li > span > a.top > span.bottom > span{ display: none; } #research > div > ul > li > span > a.top > span.bottom > span > span{ } #research > div > ul > li > span > a.top > span.left{ z-index: 20; position: absolute; top: 0.75em; right: 0.75em; padding: 0.5em; border: 0.167em solid #222; border-radius: 5em; color: #222; font-size: 0.75em; background-color: #fff; } #research > div > ul > li > span > a.top > span.left:before{ content: "\f023"; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; } #research > div > ul > li > span > a.center{ z-index: 50; position: relative; margin-top: -1.125em; padding: 1em 2em; background-color: #fff; border-style: solid; border-width: 0 0.125em 0.125em; border-color: #222; } #research > div > ul > li > span > a.center:hover{ color: #fff; background-color: #222; } #research > div > ul > li > span > a.center > span{ font-size: 0.75em; font-weight: 600; } #research > div > ul > li > span > a.center > span:before{ content: "\f1c1"; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; } #paper{ overflow: hidden; margin-bottom: -2em; padding: 2em 2em 4em; } #paper > div{ } #paper > div > h2{ margin-bottom: 2em; } #paper > div > h2 > span{ display: inline-block; color: #222; font-size: 2em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #paper > div > h2.top{ z-index: 40; position: fixed; top: 2em; right: 0; left: 0; margin-right: -5em; margin-bottom: 4em; margin-left: -5em; text-align: center; background: linear-gradient(27deg, rgba(215,19,203,1) 33%, rgba(0,212,255,1) 100%); transform: rotate(-2deg); } #paper > div > h2.top > span{ padding: 0.5em 2.5em; display: inline-block; color: #fff; font-size: 2em; font-weight: 600; text-align: center; transform: rotate(2deg); -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #paper > div.center{ } #paper > div.center > div{ } #paper > div.center > div > h3{ margin-top: 2em; } #paper > div.center > div > h3 > span{ color: #222; font-size: 1em; font-weight: 600; line-height: 1.5; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #paper > div.center > div > p{ display: inline-block; margin-top: 2em; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #paper > div.center > div{ } #paper > div.center > div > p.image{ margin-top: 2em; } #paper > div.center > div > p.image > a{ overflow: hidden; position: relative; border-radius: 1em; cursor: pointer; transition: .2s; } #paper > div.center > div > p.image > a:hover{ transform: scale(1.05); } #paper > div.center > div > p.image > a:before{ position: absolute; right: 1em; bottom: 1em; content: "\f35d"; padding: 0.5em; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: 0.75em; background-color: #fff; border-radius: 1em; } #paper > div.center > div > p.image > a > img{ overflow: hidden; width: 100%; height: auto; border-radius: 1em; cursor: pointer; } #paper > div.center > div > p.image > img{ overflow: hidden; width: 100%; height: auto; border-radius: 1em; } #paper > div.center > div > p.cta{ display: block; text-align: center; } #paper > div.center > div > p.cta > a{ display: inline-block; margin-top: 2em; padding: 1em 2em; color: #fff; width: auto; background: rgb(42,156,237); background: linear-gradient(21deg, rgba(42,156,237,1) 0%, rgba(202,139,255,1) 100%); border-radius: 1em; box-shadow: 0 0.5em 2em -1em #000; cursor: pointer; text-align: center; } #paper > div.center > div > p.cta > a:hover{ background: rgb(81,177,245); background: linear-gradient(21deg, rgba(81,177,245,1) 0%, rgba(221,181,255,1) 100%); } #paper > div.center > iframe{ z-index: 20; position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding-top: 8.5em; padding-right: 2.5em; padding-bottom: 2.5em; padding-left: 2em; width: 100%; height: 100%; background-color: #fff; } #paper > div > #passworded{ } #paper > div > #passworded{ } #paper > div > #passworded > div{ } #paper > div > #passworded > div > h2{ display: none; } #paper > div > #passworded > div > div{ display: flex; flex-direction: column; } #paper > div > #passworded > div > div > div.left{ order: 2; } #paper > div > #passworded > div > div > div.left > p.top{ margin-top: 0; font-size: 2em; font-weight: 600; } #paper > div > #passworded > div > div > div.left > p{ margin-top: 2em; line-height: 1.5; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #paper > div > #passworded > div > div > div.left > p > a{ display: inline; color: #e3405e; text-decoration: underline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #paper > div > #passworded > div > div > div.right{ order: 1; margin-bottom: 4em; background-image: url("locked.png"); } #paper > div > #passworded > div > div > div.right > img{ margin: 0 auto; width: 100%; max-width: 10em; height: auto; } #paper > div > nav{ } #paper > div > nav > h3{ display: none; } #paper > div > nav > ul{ margin-top: 4em; } #paper > div > nav > ul > li{ margin-top: 1em; } #paper > div > nav > ul > li > a{ padding: 1em; color: #e3405e; font-weight: 600; border: 0.25em solid #e3405e; border-radius: 1em; cursor: pointer; } #paper > div > nav > ul > li > a:hover{ color: #fff; background-color: #e3405e; } #paper > div > nav > ul > li > a:before{ content: "\f104"; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; } #paper > div > nav > ul > li.first{ } #paper > div > nav > ul > li.first > a{ } #paper > div > nav > ul > li.second{ } #paper > div > nav > ul > li.second > a{ } #paper > div > nav > ul > li.second > a:before{ content: "\f015"; } #paper > div > nav.top{ z-index: 50; position: fixed; top: 0; right: 0; } #paper > div > nav.top > ul{ margin-top: 0; } #paper > div > nav.top > ul > li{ position: fixed; top: 1em; right: 1em; margin-top: 0; } #paper > div > nav.top > ul > li > a{ overflow: hidden; width: 3em; height: 3em; color: transparent; background-color: #fff; border: none; border-radius: 1em; box-shadow: 0 0.25em 2em -0.75em #000; } #paper > div > nav.top > ul > li > a:hover{ background-color: #e3405e; } #paper > div > nav.top > ul > li > a:before{ content: "\f00d"; margin: 0 auto; display: block; width: 1em; height: 1em; color: #e3405e; font-family: "Font Awesome 5 Free"; font-size: 1em; font-weight: 600; text-align: center; } #paper > div > nav.top > ul > li > a:hover:before{ color: #fff; } #paper > div > nav.top > ul > li.first{ z-index: 70; } #paper > div > nav.top > ul > li.first > a{ } #paper > div > nav.top > ul > li.second{ } #paper > div > nav.top > ul > li.second > a{ } #paper > div > nav.top > ul > li.second > a:before{ content: "\f00d"; margin: 0 auto; display: block; width: 1em; height: 1em; color: #e3405e; font-family: "Font Awesome 5 Free"; font-size: 1em; font-weight: 600; text-align: center; } #paper > div > nav.top > ul > li.second > a:hover:before{ color: #fff; } #open{ overflow: hidden; margin-bottom: -2em; padding: 2em 2em 4em; } #open-top{ } #open-top > h2{ margin-right: -5em; margin-bottom: 4em; margin-left: -5em; text-align: center; background: linear-gradient(27deg, rgba(215,19,203,1) 33%, rgba(0,212,255,1) 100%); transform: rotate(-2deg); } #open-top > h2 > span{ padding: 0.5em 2em; display: inline-block; color: #fff; font-size: 2em; font-weight: 600; text-align: center; transform: rotate(2deg); -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #open-top > #open-top-case{ margin-right: 0; margin-left: 0; background: none; transform: none; } #open-top > #open-top-case > span{ padding: 0; color: inherit; font-size: 1em; transform: none; } #open-top > #open-top-case > span > span{ padding-top: 0.5em; padding-bottom: 0.5em; padding-left: 3.5em; display: inline-block; background-position: 0.5em center; } #open-summary{ margin-bottom: 4em; padding-top: 8em; background-image: url("photo.png"); background-position: top center; background-size: auto 5em; } #open-summary > div{ } #open-summary > div > h3{ display: none; } #open-summary > div > ul{ margin-bottom: -0.5em; } #open-summary > div > ul > li{ margin-bottom: 0.5em; display: flex; flex-direction: row; } #open-summary > div > ul > li > span{ flex-grow: 1; flex-shrink: 1; font-size: 0.75em; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #open-summary > div > ul > li > span.left{ min-width: 40%; width: 40%; max-width: 40%; } #open-summary > div > ul > li > span.right{ font-weight: 600; } #open-summary > div > ul > li > span > a{ display: inline-block; color: #e3405e; font-weight: 600; text-decoration: underline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #open-companies{ margin-bottom: 4em; } #open-companies > div{ } #open-companies > div > h3{ display: none; } #open-companies > div > ul{ } #open-companies > div > ul{ } #open-companies > div > ul > li{ } #open-companies > div > ul > li > a{ } #open-companies > div > ul > li.first{ } #open-companies > div > ul > li.first > a{ background-image: url("/images/upsales.png"); } #open-companies > div > ul > li.second{ } #open-companies > div > ul > li.second > a{ background-image: url("/images/qvalia.png"); } #open-companies > div > ul > li.third{ } #open-companies > div > ul > li.third > a{ background-image: url("/images/learnways.png"); } #open-companies > div > ul > li.fourth{ } #open-companies > div > ul > li.fourth > a{ background-image: url("/images/match.png"); } #open-companies > div > ul > li.fifth{ } #open-companies > div > ul > li.fifth > a{ background-image: url("/images/atlascopco.png"); } #open-companies > div > ul > li.sixth{ } #open-companies > div > ul > li.sixth > a{ background-image: url("/images/mavshack.png"); } #open-companies > div > ul > li.seventh{ } #open-companies > div > ul > li.seventh > a{ background-image: url("/images/qred.png"); } #open-companies > div > ul > li.eighth{ } #open-companies > div > ul > li.eighth > a{ background-image: url("/images/refapp.png"); } #open-companies > div > ul > li.ninth{ } #open-companies > div > ul > li.ninth > a{ background-image: url("/images/axiomatics.png"); } #open-companies > div > ul > li.tenth{ } #open-companies > div > ul > li.tenth > a{ background-image: url("/images/compentus.png"); } #open{ } #open > div{ } #open > div > div.inner{ } #open > div > div.inner > p{ display: inline-block; margin-bottom: 2em; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #open > div > nav{ } #open > div > nav > h3{ display: none; } #open > div > nav > ul{ margin-top: 4em; } #open > div > nav > ul > li{ margin-top: 1em; } #open > div > nav > ul > li > a{ padding: 1em; color: #e3405e; font-weight: 600; border: 0.25em solid #e3405e; border-radius: 1em; cursor: pointer; } #open > div > nav > ul > li > a:hover{ color: #fff; background-color: #e3405e; } #open > div > nav > ul > li > a:before{ content: "\f104"; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; } #open > div > nav > ul > li.first{ } #open > div > nav > ul > li.first > a{ } #open > div > nav > ul > li.second{ } #open > div > nav > ul > li.second > a{ } #open > div > nav > ul > li.second > a:before{ content: "\f015"; } #hero{ padding: 2em; } #hero > div{ } #hero > div:before{ content: " "; display: block; margin: 0 auto 2em; padding-top: 1em; width: 100%; height: 5em; background-image: url("hero.png"); background-position: center; background-repeat: no-repeat; background-size: contain; } #hero > div > h2{ display: none; } #hero > div > h2 > span{ display: inline-block; margin-bottom: 1em; color: #222; font-size: 2em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #hero > div > p{ } #hero > div > p > span{ display: inline-block; color: #222; font-size: 1.5em; font-weight: 600; line-height: 1.25;-webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #hero > div > h3{ display: none; } #hero > div > nav{ margin-top: 2em; } #hero > div > nav > h3{ display: none; } #hero > div > nav > ul{ } #hero > div > nav > ul > li{ } #hero > div > nav > ul > li > a{ position: relative; padding: 1em 2em 1em 1em; font-weight: bold; border-radius: 1em; cursor: pointer; } #hero > div > nav > ul > li > a:hover{ color: #fff; background-color: #000; } #hero > div > nav > ul > li > a:after{ content: "\f105"; position: absolute; top: 0; right: 1em; bottom: 0; display: flex; flex-direction: column; justify-content: center; margin-left: 0.5em; font-family: "Font Awesome 5 Free"; font-weight: bold; } #stats{ position: relative; margin-top: 1em; margin-bottom: 1em; padding: 2em; overflow: hidden; } #stats > div{ z-index: 2; position: relative; } #stats > div > h2{ display: none; } #stats > div > ul{ padding-top: 1em; } #stats > div > ul > li{ display: flex; flex-direction: row; align-items: center; justify-content: left; align-content: flex-start; } #stats > div > ul > li > span.top{ flex-grow: 0; flex-shrink: 1; width: 1.5em; color: #fff; font-size: 4em; font-weight: bold; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #stats > div > ul > li > span.bottom{ flex-shrink: 1; flex-grow: 0; color: #fff; font-weight: bold; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #stats > div.background{ z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin-top: 1em; margin-right: -2em; margin-bottom: 1em; margin-left: -2em; padding-right: 20em; padding-left: 20em; background: rgb(215,19,203); background: linear-gradient(27deg, rgba(215,19,203,1) 33%, rgba(0,212,255,1) 100%); transform: rotate(-2deg); } #featured{ overflow: hidden; margin-bottom: -2em; padding: 2em 2em 4em 2em; } #featured > div{ } #featured > div > h2{ } #featured > div > h2 > span{ display: inline-block; color: #222; font-size: 2em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #featured > div > p{ margin-top: 1em; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #featured > div > div{ } #featured > div > div ul{ position: relative; margin-top: 4em; margin-bottom: -2em; } body.js #featured > div > div ul{ } #featured > div > div ul li{ margin-bottom: 2em; transition: transform .2s; } #featured > div > div ul li:hover{ transform: scale(1.05); } #featured > div > div ul li > a{ position: relative; overflow: hidden; box-shadow: 0 0.5em 4em -2em #aaa; border-radius: 1em; transition: transform .2s; cursor: pointer; } #featured > div > div ul li > a > span.top{ height: 12.5em; } #featured > div > div ul li > a > span.top > span.top{ z-index: 2; position: absolute; top: 1em; left: 1em; padding: 0.5em; font-size: 0.75em; font-weight: 600; background-color: #fff; border-radius: 1em; } #featured > div > div ul li > a > span.top > span.top:before{ content: "\f0f4"; margin-right: 0.25em; font-family: "Font Awesome 5 Free"; font-weight: bold; } #featured > div > div ul li > a > span.top > span.center{ width: 100%; height: 100%; background-color: rgb(255,5,220); background-image: linear-gradient(32deg, rgba(255,5,220,1) 14%, rgba(93,255,237,1) 93%); /* background-image: url("images/flavor_default.jpg"); */ background-size: cover; border-radius: 1em 1em 0 0; } #featured > div > div ul li > a > span.top > span.bottom{ z-index: 2; position: absolute; right: 1em; bottom: 1em; padding: 0.5em; font-size: 0.75em; font-weight: 600; } #featured > div > div ul li > a > span.center{ height: 0.5em; background: rgb(174,90,240); background: linear-gradient(90deg, rgba(174,90,240,1) 0%, rgba(252,66,219,1) 75%, rgba(174,122,255,1) 100%); } #featured > div > div ul li.item-1 > a > span.center{ background: rgb(174,90,240); background: linear-gradient(90deg, rgba(174,90,240,1) 0%, rgba(252,66,219,1) 75%, rgba(174,122,255,1) 100%); } #featured > div > div ul li.item-2 > a > span.center{ background: rgb(90,142,240); background: linear-gradient(90deg, rgba(90,142,240,1) 0%, rgba(30,101,224,1) 71%, rgba(122,173,255,1) 100%); } #featured > div > div ul li.item-3 > a > span.center{ background: rgb(238,240,90); background: linear-gradient(90deg, rgba(238,240,90,1) 0%, rgba(224,224,30,1) 71%, rgba(255,255,122,1) 100%); } #featured > div > div ul li.item-4 > a > span.center{ background: rgb(104,240,90); background: linear-gradient(90deg, rgba(104,240,90,1) 0%, rgba(37,249,15,1) 71%, rgba(122,255,132,1) 100%); } #featured > div > div ul li.item-5 > a > span.center{ background: rgb(90,240,237); background: linear-gradient(90deg, rgba(90,240,237,1) 0%, rgba(15,249,237,1) 71%, rgba(122,251,255,1) 100%); } #featured > div > div ul li.item-6 > a > span.center{ background: rgb(240,194,90); background: linear-gradient(90deg, rgba(240,194,90,1) 0%, rgba(249,178,15,1) 71%, rgba(255,219,122,1) 100%); } #featured > div > div ul li.item-7 > a > span.center{ background: rgb(240,90,104); background: linear-gradient(90deg, rgba(240,90,104,1) 0%, rgba(249,15,57,1) 71%, rgba(255,122,153,1) 100%); } #featured > div > div ul li.item-8 > a > span.center{ background: rgb(90,240,172); background: linear-gradient(90deg, rgba(90,240,172,1) 0%, rgba(15,249,146,1) 71%, rgba(122,255,210,1) 100%); } #featured > div > div ul li > a > span.bottom{ display: flex; flex-direction: column; justify-content: center; padding: 1em; padding-bottom: 2em; min-height: 8em; line-height: 1.25; background-color: #fff; } #featured > div > div ul button.slick-prev{ z-index: 2; position: absolute; top: 0; left: -2em; display: flex !important; flex-direction: column; justify-content: center; height: 100%; color: transparent; text-indent: -999999em; cursor: pointer; } #featured > div > div ul button.slick-prev:before{ content: "\f104"; display: block; padding: 0.25em 0.25em 0.25em 0; width: 0.75em; height: 1em; color: #444; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: 1.5em; text-align: center; text-indent: 0; background-color: #fff; border-radius: 0 2em 2em 0; box-shadow: 0 0.25em 1em -0.375em #000; cursor: pointer; } #featured > div > div ul div.slick-list{ overflow: visible; } #featured > div > div ul div.slick-list > div.slick-track{ display: flex; flex-direction: row; } #featured > div > div ul div.slick-list > div.slick-track > li{ margin-right: 1em; margin-left: 1em; transition: transform .2s; } #featured > div > div ul div.slick-list > div.slick-track > li:hover{ transform: scale(1.05); } #featured > div > div ul div.slick-list > div.slick-track > li > a{ margin-bottom: 0; } #featured > div > div ul div.slick-list > div.slick-track > li > a > span.bottom{ display: flex; flex-direction: column; justify-content: center; padding: 1em; padding-bottom: 2.5em; min-height: 10em; line-height: 1.25; } #featured > div > div ul button.slick-next{ z-index: 2; position: absolute; top: 0; right: -2em; display: flex !important; flex-direction: column; justify-content: center; height: 100%; color: transparent; text-indent: -999999em; cursor: pointer; } #featured > div > div ul button.slick-next:before{ content: "\f105"; display: block; padding: 0.25em 0 0.25em 0.25em; width: 0.75em; height: 1em; color: #444; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: 1.5em; text-align: center; text-indent: 0; background-color: #fff; border-radius: 2em 0 0 2em; box-shadow: 0 0.25em 1em -0.375em #000; cursor: pointer; } #featured > div > div.first{ } #featured > div > div.second{ display: none; } #bragboard{ position: relative; margin-top: 1em; margin-bottom: 1em; padding: 5em 2em; overflow: hidden; } #bragboard > div{ z-index: 2; position: relative; text-align: center; } #bragboard > div > h2{ display: none; } #bragboard > div > p{ display: inline-block; color: #fff; font-size: 1.25em; text-align: center; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #bragboard > div > ul{ margin-top: 2em; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } #bragboard > div > ul > li{ flex-grow: 0; flex-shrink: 1; } #bragboard > div > ul > li > a{ overflow: hidden; width: 7.5em; height: 3em; color: transparent; text-indent: -999999em; background-size: auto 40%; cursor: pointer; } #bragboard > div > ul > li.first > a{ background-image: url("ahlsell.png"); } #bragboard > div > ul > li.second > a{ background-image: url("axiomatics.png"); } #bragboard > div > ul > li.third > a{ background-image: url("learnways.png"); } #bragboard > div > ul > li.fourth > a{ background-image: url("mavshack.png"); } #bragboard > div > ul > li.fifth > a{ background-image: url("match.png"); } #bragboard > div > ul > li.sixth > a{ background-image: url("qred.png"); } #bragboard > div > ul > li.seventh > a{ background-image: url("qvalia.png"); } #bragboard > div > ul > li.eighth > a{ background-image: url("upsales.png"); } #bragboard > div > ul > li.ninth > a{ background-image: url("refapp.png"); } #bragboard > div.background{ z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin-top: 1em; margin-right: -20em; margin-bottom: 1em; margin-left: -20em; padding-right: 20em; padding-left: 20em; background: rgb(237,42,123); background: linear-gradient(232deg, rgba(237,42,123,1) 0%, rgba(255,242,75,1) 100%); transform: rotate(1deg); } #testimonials{ position: relative; margin-top: -3em; margin-bottom: 1em; padding: 5em 2em; overflow: hidden; } #testimonials > div{ z-index: 2; position: relative; } #testimonials > div > h2{ display: none; } #testimonials > div > p{ display: none; } #testimonials > div > blockquote{ position: relative; margin-bottom: 2em; padding: 2em; background-color: #fff; border-radius: 2em; box-shadow: 0 0.25em 5em -2.5em #aaa; } #testimonials > div > blockquote:last-of-type{ margin-bottom: 0; } #testimonials > div > blockquote > p{ display: inline-block; font-weight: 600; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #testimonials > div > blockquote > cite{ z-index: 5; position: relative; margin-top: 2em; margin-right: 2em; position: relative; } #testimonials > div > blockquote > cite > span{ font-size: 0.75em; text-align: right; font-style: italic; } #testimonials > div > blockquote > cite > span > span{ display: inline-block; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #testimonials > div > blockquote > cite > span > span > span{ display: none; } #testimonials > div > blockquote > cite > span > a{ display: inline-block; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #testimonials > div > blockquote > cite > span > a:before{ z-index: 10; content: " "; position: absolute; right: -5em; bottom: -3em; display: block; width: 4em; height: 4em; font-size: 1.34em; border-radius: 5em; } #testimonials > div > blockquote > span{ position: absolute; right: -1em; bottom: -1em; width: 4em; height: 4em; background-image: url('liselotte.png'); border-radius: 5em; box-shadow: 0 0.25em 2em -1em #000; } #testimonials > div.background{ z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin-top: 1em; margin-right: -20em; margin-bottom: 1em; margin-left: -20em; padding-right: 20em; padding-left: 20em; background: rgb(58,208,218); background: linear-gradient(42deg, rgba(58,208,218,0.45840342973126746) 0%, rgba(0,212,255,0) 52%); transform: rotate(1deg); } #error{ overflow: hidden; margin-bottom: -2em; padding: 2em 2em 4em; } #error > div{ } #error > div > h2{ display: none; } #error > div > div{ display: flex; flex-direction: column; } #error > div > div > div.left{ order: 2; } #error > div > div > div.left > p.top{ margin-top: 0; font-size: 2em; font-weight: 600; } #error > div > div > div.left > p{ margin-top: 2em; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #error > div > div > div.left > ul{ margin-top: 2em; padding-left: 2em; } #error > div > div > div.left > ul > li{ margin-top: 0.5em; display: list-item; list-style: circle; } #error > div > div > div.left > ul > li > span{ display: inline-block; vertical-align: text-top; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #error > div > div > div.left > ul > li > span > span{ display: inline; font-weight: 700; font-style: italic; } #error > div > div > div.left > ul > li > a{ display: inline-block; color: #e3405e; text-decoration: underline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #error > div > div > div.right{ order: 1; margin-bottom: 4em; background-image: url("error.png"); } #error > div > div > div.right > img{ margin: 0 auto; width: 100%; max-width: 10em; height: auto; } #message{ padding: 2em 2em 4em; background: rgb(160,222,254); background: linear-gradient(0deg, rgba(160,222,254,1) 0%, rgba(160,222,254,0) 100%); } #message > div{ } #message > div > h2{ display: none; } #message > div > p{ text-align: center; } #message > div > p > span{ display: inline-block; font-size: 1.25em; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #message > div > form{ margin-top: 2em; } #message > div > form > p#fail{ margin-bottom: 1em; padding: 1em; color: #fff; background-color: #de265a; border-radius: 1em; box-shadow: 0 0.5em 2em -1em #000; } #message > div > form > p#success{ margin-bottom: 1em; padding: 1em; color: #fff; background-color: #26de38; border-radius: 1em; box-shadow: 0 0.5em 2em -1em #000; } #message > div > form > label{ display: none; } #message > div > form > input[type=text]{ padding: 1em; width: 100%; background-color: #fff; border-radius: 2em; border: 0.25em solid #fff; box-shadow: 0 0.5em 2em -1em #aaa; transition: transform .2s; } #message > div > form > input[type=text]:hover, #message > div > form > input[type=text]:focus, #message > div > form > input[type=text]:active{ transform: scale(1.05); } #message > div > form > input[type=text]:focus, #message > div > form > input[type=text]:active{ border-color: #ee2a7b; } #message > div > form > textarea{ margin-top: 1em; padding: 1em; width: 100%; min-height: 5em; background-color: #fff; border-radius: 1em; border: 0.25em solid #fff; box-shadow: 0 0.5em 2em -1em #aaa; resize: vertical; transition: transform .2s; } #message > div > form > textarea:hover, #message > div > form > textarea:focus, #message > div > form > textarea:active{ transform: scale(1.05); } #message > div > form > textarea:focus, #message > div > form > textarea:active{ border-color: #ee2a7b; } #message > div > form > input[type=submit]{ margin-top: 2em; padding: 1em 2em; color: #fff; width: 100%; font-weight: 600; background: rgb(42,156,237); background: linear-gradient(21deg, rgba(42,156,237,1) 0%, rgba(202,139,255,1) 100%); border-radius: 1em; box-shadow: 0 0.5em 2em -1em #000; cursor: pointer; } #message > div > form > input[type=submit]:focus, #message > div > form > input[type=submit]:hover{ background: rgb(81,177,245); background: linear-gradient(21deg, rgba(81,177,245,1) 0%, rgba(221,181,255,1) 100%); } #message > div > form > input[type=button]{ } #message > div > form > div#phone{ position: absolute; top: -999999em; left: -999999em; overflow: hidden; width: 0; height: 0; } #message > div > p.bottom{ margin-top: 2em; font-size: 1em; text-align: center; line-height: 1.25; } #message > div > p.bottom > span{ display: inline-block; text-align: center; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #message > div > p.bottom > span > span{ display: none; } #message > div > p.bottom > span > a{ display: inline-block; color: #e3405e; font-weight: 600; text-decoration: underline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #notification{ order: -1; background-color: #000; box-shadow: 0 0.5em 2em -1em #aaa; } #notification > h2{ display: none; } #notification > p{ } #notification > p > a{ padding: 1em 2em; color: #fff; font-weight: 600; line-height: 1.25; background-color: #000; cursor: pointer; } #notification > p > a:hover{ color: #444; background-color: #fff; } #notification > p > a > span{ position: relative; padding-right: 1em; } #notification > p > a > span:after{ content: "\f105"; position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; font-family: "Font Awesome 5 Free"; font-weight: 600; } #footer{ position: relative; margin-top: -2em; padding: 5em 2em 4em; overflow: hidden; } #footer > div{ z-index: 2; position: relative; } #footer > div > h2{ display: none; } #footer > div > div.top{ text-align: center; } #footer > div > div.top > h3{ display: inline-block; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #footer > div > div.top > p{ overflow: hidden; margin: 1.75em -0.25em -0.25em; } #footer > div > div.top > p > span{ display: none; } #footer > div > div.top > p > a{ float: left; clear: left; padding: 0.25em 0.25em 0.25em 2em; color: #e3405e; text-align: left; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: pointer; } #footer > div > div.top > p > a:before{ margin-right: 0.5em; margin-left: -1.75em; display: inline-block; width: 1.25em; height: 1em; font-family: "Font Awesome 5 Free"; font-weight: 600; text-align: center; } #footer > div > div.top > p > a.first{ } #footer > div > div.top > p > a.first:before{ content: "\f121"; } #footer > div > div.top > p > a.second{ } #footer > div > div.top > p > a.second:before{ content: "\f61f"; } #footer > div > div.top > p > a.third{ } #footer > div > div.top > p > a.third:before{ content: "\f002"; } #footer > div > div.top > p > a.fourth{ } #footer > div > div.top > p > a.fourth:before{ content: "\f3b2"; font-family: "Font Awesome 5 Brands"; } #footer > div > div.top > p > a.fifth{ } #footer > div > div.top > p > a.fifth:before{ content: "\f012"; } #footer > div > div.top > p > a.sixth{ } #footer > div > div.top > p > a.sixth:before{ content: "\f193"; } #footer > div > div.top > p > a.seventh{ } #footer > div > div.top > p > a.seventh:before{ content: "\f3b1"; font-family: "Font Awesome 5 Brands"; } #footer > div > div.top > p > a.eighth{ } #footer > div > div.top > p > a.eighth:before{ content: "\f1cd"; } #footer > div > div.center{ } #footer > div > div.center > h3{ display: none; } #footer > div > div.center > p{ } #footer > div > div.center > p > a{ display: flex; flex-direction: row; align-items: center; margin-top: 2em; padding: 1em 2em; width: 100%; color: #fff; font-weight: 600; text-align: left; background: rgb(42,156,237); background: linear-gradient(21deg, rgba(42,156,237,1) 0%, rgba(202,139,255,1) 100%); border-radius: 1em; box-shadow: 0 0.5em 2em -1em #000; cursor: pointer; } #footer > div > div.center > p > a:hover{ background: rgb(81,177,245); background: linear-gradient(21deg, rgba(81,177,245,1) 0%, rgba(221,181,255,1) 100%); } #footer > div > div.center > p > a:before{ content: "\f1ab"; display: block; margin-right: 1em; font-family: "Font Awesome 5 Free"; font-size: 1.25em; font-weight: 700; } #footer > div > div.center > p > span{ display: none; } #footer > div > div.bottom{ margin-top: 2em; padding-right: 3em; padding-left: 3em; } #footer > div > div.bottom > h3{ display: none; } #footer > div > div.bottom > p{ text-align: center; } #footer > div > div.bottom > p > span{ display: inline-block; color: #555; font-size: 0.75em; text-align: center; line-height: 1.25; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #footer > div.background{ z-index: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin-top: 1em; margin-left: -20em; padding-right: 20em; padding-left: 20em; background-color: #fff; transform: rotate(1deg); } /* Portrait */ @media (orientation: portrait) and (min-width: 200px){ html{ } body{ font-size: 5vw; } } /* Landscape */ @media (orientation: landscape) and (min-width: 200px){ html{ } /* ========== Document ========== */ body{ font-size: 1.25vw; } #header{ } #header > div{ position: relative; } #logo{ } #subheading{ } #menu{ position: absolute; top: 0; right: 0; } #menu > ul{ margin-top: 0; } #menu > ul > li{ float: left; } body.js #menu > ul{ display: block !important; } #hamburger{ display: none; } body.js #hamburger{ display: none; } main{ } #story{ } #story > div.top{ height: 24em; } #story > div{ } #story > div > div{ } #story > div > div > h2{ } #story > div > div > p.top{ top: 28em; } #story > div > div > p.center{ } #story > div > div > p.bottom{ } #story > div > div > p.bottom > span{ margin-top: 1.6em; margin-bottom: 0.8em; line-height: 1.25; } #story > div > div > div{ overflow: visible; } #story > div > div > div > div.table{ } #story > div > div > div > div.table > table{ } #story > div > div > div > div.table > table > caption{ } #story > div > div > div > div.table > table > *{ } #story > div > div > div > div.table > table > * > tr{ } #story > div > div > div > div.table > table > * > tr > td{ max-width: 5em; /* white-space: break-all; */ text-overflow: ellipsis; } #story > div > div > div > div.table > table > thead{ } #story > div > div > div > div.table > table > thead > tr{ } #story > div > div > div > div.table > table > thead > tr > td{ } #story > div > div > div > div.table > table > tbody{ } #story > div > div > div > div.table > table > tbody > tr{ } #story > div > div > div > div.table > table > tbody > tr:nth-child(odd){ } #story > div > div > div > div.table > table > tbody > tr > td{ } #story > div > div > div.center{ } #story > div > div > div.center > div.top{ margin-top: 8em; padding: 2em; } #story > div > div > div.center > div.top:before{ top: -1em; right: -1em; left: auto; margin-top: 0; margin-left: 0; font-size: 1.25em; } #story > div > div > div.center > div.top > h3{ } #story > div > div > div.center > div.top > h4{ } #story > div > div > div.center > div.top > p.top{ } #story > div > div > div.center > div.top > p{ padding-right: 4em; } #story > div > div > div.center > div.top > div{ position: relative; margin-top: -3.5em; margin-left: 13.5em; } body.js #story > div > div > div.center > div.top > div{ margin-top: -3.5em; } #story > div > div > div.center > div.top > div > div{ padding-right: 12em; } #story > div > div > div.center > div.top > div > div > input[type=text]{ } #story > div > div > div.center > div.top > div > input[type=button]{ z-index: 10; position: absolute; top: 0; right: 0; bottom: 0; margin-top: 0; width: 10em; } #story > div > div > div.center > div.top > div > div.notification{ top: -3.75em; right: 0.75em; } #story > div > div > div.center > div.top > div > div.notification:before{ } #story > div > div > div.center > div.top > ul{ margin-left: 0; margin-bottom: 0; width: 12em; min-height: 1.5em; } #story > div > div > div.center > div.top > div.center{ margin-right: 0; margin-bottom: -1em; margin-left: 0; width: 100%; } body.js #story > div > div > div.center > div.top > div.center{ margin-right: 0; margin-bottom: -1em; margin-left: 0; width: 100%; } #story > div > div > div.center > div.top > div.center > p{ text-align: center; } #story > div > div > div.center > div.top > div.center > p > a{ display: inline-block; } #story > div > div > div.center > div.top > div.center > p > a > span{ display: inline; } #story > div > div > div.center > form{ position: relative; margin-top: 2em; } #story > div > div > div.center > form > div{ padding-right: 12em; } #story > div > div > div.center > form > div > input[type=text]{ } #story > div > div > div.center > form > input[type=submit]{ z-index: 10; position: absolute; top: 0; right: 0; bottom: 0; margin-top: 0; width: 10em; } #story > div > div > nav{ } #story > div > div > nav > ul{ display: flex; flex-direction: row; justify-content: space-between; } #story > div > div > nav > ul > li{ flex-grow: 0; flex-shrink: 1; margin-top: 0; } #story > div > div.center{ } #story > div > div.center > div{ } #story > div > div.center > div > p{ text-align: justify; } #story > div > div.center > div > p > a{ /* display: inline-block; */ } #story > div > div.center > div > p.cta{ text-align: center; } #story > div > div.center > div > p.cta > a{ display: inline-block; width: auto; font-weight: 600; } #story > div > div.center > p.image{ margin-top: 4em; margin-bottom: 4em; } #story > div > div.center > p.image > img{ margin: 0 auto; max-width: 75%; } #story > div > div.center > p.image > a{ margin: 0 auto; max-width: 75%; } #story > div > div.center > p.image > a > img{ } #story > div > div.center > div > h3{ margin-top: 4em; } #story > div > div.center > div > h3 > span{ font-size: 1.5em; } #story > div > div.center > div > div.center{ margin-right: 4em; margin-left: 4em; } #story > div > div.center > div > div.center > ul{ margin-top: 4em; margin-bottom: 4em; } #story > div > div.center > div > div.center > ul > li{ margin-top: 2em; } #story > div > div.center > div > div.first{ margin-top: 4em; margin-bottom: 4em; } #story > div > div.center > div > div.first > p{ line-height: 1.5; } #story > div > div.center > div > div.table{ overflow-x: hidden; margin-top: 4em; margin-bottom: 4em; } #story > div > div.center > div > div.table > table{ } #story > div > div.center > div > div.table > table > thead{ } #story > div > div.center > div > div.table > table > thead > tr{ } #story > div > div.center > div > div.table > table > thead > tr > td{ color: #777; font-weight: 600; border-bottom: 0.075em solid #ddd; } #story > div > div.center > div > div.table > table > tbody{ } #story > div > div.center > div > div.table > table > tbody > tr{ } #story > div > div.center > div > div.table > table > tbody > tr > td{ min-width: auto; color: #555; font-size: inherit; font-weight: 500; line-height: 1.5; } #story > div > div.center > div.columns{ display: flex; flex-direction: row; align-items: center; margin: 4em auto 4em; max-width: 75%; } #story > div > div.center > div.columns > div{ max-width: 50%; } #story > div > div.center > div.columns > div > p{ margin-top: 0; text-align: justify; } #story > div > div.center > div.columns > div > p.image{ margin-top: 0; } #story > div > div.center > div.columns > div > p.image > a{ } #story > div > div.center > div.columns > div > p.image > a:before{ } #story > div > div.center > div.columns > div > p.image > a > img{ } #story > div > div.center > div.columns > div > p.image > img{ } #story > div > div.center > div.columns > div.left{ padding-right: 2em; flex-grow: 1; flex-shrink: 1; } #story > div > div.center > div.columns > div.right{ padding-left: 2em; flex-grow: 1; flex-shrink: 1; } #stories{ } #stories > div{ } #stories > div > h2{ } #stories > div > p{ } #stories > div ul.first{ margin: 3em -1em 1em; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: start; } #stories > div ul.first li{ display: flex; flex-direction: column; flex-shrink: 0; flex-grow: 1; margin-bottom: 0; width: 50%; max-width: 50%; } #stories > div ul.first li > a{ margin: 1em; } #stories > div ul.first li > a > span.middle{ } #stories > div ul.first li > a > span.middle > span{ display: flex; flex-direction: row; align-items: center; min-height: 2.5em; } #stories > div > nav{ } #stories > div > nav > ul{ margin-top: 3em; } #stories > div > nav > ul > li{ } #stories > div > nav > ul > li > a{ } #stories > div > nav > ul > li > a > span{ display: inline-block; } #stories > div > nav > ul > li.left{ } #stories > div > nav > ul > li.left > a{ } #stories > div > nav > ul > li.left > a:before{ margin-right: 0.25em; } #stories > div > nav > ul > li.right{ } #stories > div > nav > ul > li.right > a{ } #stories > div > nav > ul > li.right > a:after{ margin-left: 0.25em; } #principle{ } #principle > div{ } #principle > div > h2{ } #principle > div > h2 > span.top{ } #principle > div > h2 > span.center{ } #principle > div > h2 > span.bottom{ margin-top: 4em; height: 24em; } #principle > div > div{ } #principle > div > div > div{ } #principle > div > div > div > div.center{ margin-right: 4em; margin-left: 4em; } #principle > div > div > div > div.center > ul{ margin-top: 4em; margin-bottom: 4em; } #principle > div > div > div > div.center > ul > li{ margin-top: 2em; } #principle > div > div > div > div.center > ul > li > span{ } #principle > div > div > div > div.center > ul > li > span > a{ /* display: inline-block; */ } #principle > div > nav{ } #principle > div > nav > ul.top{ display: flex; flex-direction: row; flex-wrap: wrap; margin: -1em; } #principle > div > nav > ul.top > li{ flex-basis: 50%; flex-grow: 1; flex-shrink: 1; } #principle > div > nav > ul.top > li > a{ margin: 1em; } #principle > div > nav > ul.center{ align-content: center; } #principle > div > nav > ul.center > li{ max-width: 33%; } #principle > div > nav > ul.center > li > span{ } #principle > div > nav > ul.center > li > span > a{ } #principle > div > nav > ul.center > li > span > a > span.left{ font-size: 1em; } #principle > div > nav > ul.center > li > span > a > span.center{ } #principle > div > nav > ul.center > li > span > a > span.right{ min-height: 15em; height: 15em; max-height: 15em; } #principle > div > nav > ul.bottom{ flex-direction: row; justify-content: space-between; margin-top: 0; display: flex; } #principle > div > nav > ul.bottom > li{ flex-grow: 0; flex-shrink: 1; margin-top: 0; } #principles{ } #principles > div{ } #principles > div > div{ } #principles > div > div > ul{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 3em -1em -1em; } #principles > div > div > ul > li{ flex-grow: 0; flex-shrink: 0; margin-top: 0; width: 50%; } #principles > div > div > ul > li > a{ margin: 1em; } #principles > div > div > ul > li > a > span.bottom{ background-size: 125% auto; background-position: bottom center; } #audit{ } #audit > div{ } #audit > div > h2{ margin-bottom: 4em; } #audit > div > nav{ } #audit > div > nav > ul{ display: flex; flex-direction: row; justify-content: space-between; } #audit > div > nav > ul > li{ flex-grow: 0; flex-shrink: 1; margin-top: 0; } #audit > div.top{ } #audit > div.top > div{ /* height: 20em; */ height: 40em; } #audits{ } #audits > div{ } #audits > div > h2{ } #audits > div > p{ } #audits > div > div{ } #audits > div > div > ul{ } #audits > div > div > ul > li{ } #audits > div > div > ul > li > a{ } #audits > div > div > ul > li > a > span.left{ min-width: 20em; width: 20em; max-width: 20em; } #audits > div > div > ul > li > a > span.right{ padding: 2em; display: flex; flex-direction: column; justify-content: center; min-height: 15em; } #audits > div > div > ul > li > a > span.right > span.top{ flex-grow: 0; flex-shrink: 1; font-size: 1.5em; } #audits > div > div > ul > li > a > span.right > span.center{ flex-grow: 0; flex-shrink: 1; margin-top: 2em; font-size: 1em; } #audits > div > nav{ } #audits > div > nav > ul{ flex-direction: row; justify-content: space-between; margin-top: 0; display: flex; } #audits > div > nav > ul > li{ flex-grow: 0; flex-shrink: 1; margin-top: 0; } #contact{ } #contact > div{ position: relative; } #contact > div:before{ position: absolute; top: 0; left: 0; margin: 0; width: 7.5em; height: 7.5em; } #contact > div > h2{ padding-left: 11.5em; } #contact > div > p{ padding-left: 11.5em; } #contact > div > ul{ margin-top: 2em; margin-right: -1em; margin-bottom: 0; padding-left: 11.5em; } #contact > div > ul > li{ overflow: visible; padding: 0; margin: 0 1em 1em 0; display: inline-block; } #contact > div > ul > li > a{ float: none; } #cv{ } #cv > div{ } #cv > div > h2{ margin-right: -7.5em; margin-left: -7.5em; } #cv > div > div{ } #cv > div > div.top{ } #cv > div > div.top > div{ } #cv > div > div.top > div > h3{ margin-right: -7.5em; margin-left: -7.5em; } #cv > div > div.top > div > p{ line-height: 2; } #cv > div > div.top > div > ul{ display: flex; flex-direction: row; flex-wrap: wrap; } #cv > div > div.top > div > ul > li{ flex-grow: 0; flex-shrink: 0; } #cv > div > div.center{ } #cv > div > div.center > h3.top{ order: 1; margin-top: 4em; margin-right: -7.5em; margin-bottom: 4em; margin-left: -7.5em; } #cv > div > div.center > h3.bottom{ order: 8; margin-top: 4em; margin-right: -7.5em; margin-bottom: 4em; margin-left: -7.5em; } #cv > div > div.center > div{ } body.js #cv > div > div.center > div{ display: flex; flex-direction: row; flex-wrap: wrap; } body.js #cv > div > div.center > div > h4.item-1{ order: 1; } body.js #cv > div > div.center > div > div.item-1{ order: 4; flex-grow: 1; flex-shrink: 1; width: 100%; } body.js #cv > div > div.center > div > h4.item-2{ order: 2; } body.js #cv > div > div.center > div > div.item-2{ order: 5; flex-grow: 1; flex-shrink: 1; width: 100%; } body.js #cv > div > div.center > div > h4.item-3{ order: 3; margin-right: 0; } body.js #cv > div > div.center > div > div.item-3{ order: 6; flex-grow: 1; flex-shrink: 1; width: 100%; } body.js #cv > div > div.center > div > p.js{ order: 7; width: 100%; } body.js #cv > div > div.center > div > form.js{ order: 8; width: 100%; } body.js #cv > div > div.center > div > ul.js{ order: 9; width: 100%; } #cv > div > div.bottom{ } #cv > div > div.bottom > h3{ margin-top: 4em; margin-right: -7.5em; margin-bottom: 4em; margin-left: -7.5em; } #cv > div > div.bottom > div{ } #cv > div > div.bottom > div > ul{ } #cv > div > div.bottom > div > nav{ margin-top: 4em; } #cv > div > div.bottom > div > nav > ul{ display: flex; flex-direction: row; justify-content: space-between; } #cv > div > div.bottom > div > nav > ul > li{ flex-grow: 0; flex-shrink: 1; } #cv > div > div.bottom > div > nav > ul > li.first{ } #cv > div > div.bottom > div > nav > ul > li.second{ margin-top: 0; } #sample{ } #sample > div{ } #sample > div.first{ height: 20em; } #sample > div.top{ margin-bottom: 4em; } #sample > div.top > h2{ max-width: 75%; } #sample > div.top > h2 > span{ font-size: 4em; } #sample > div.top > ul{ margin-right: -2em; } #sample > div.top > ul > li{ } #sample > div.top > ul > li > a{ margin-right: 2em; height: 15em; } #sample > div.top > p{ max-width: 75%; } #sample > div.top.images{ min-height: 15em; } #sample > div.top.images > h2{ margin-left: 50%; max-width: 50%; } #sample > div.top.images > ul{ margin-bottom: -15em; padding-right: 4em; max-width: 50%; } #sample > div.top.images > p{ margin-left: 50%; max-width: 50%; } #infobox{ } #infobox-company{ } #infobox-timeframe{ } #infobox-case{ } #infobox-people{ } #infobox-process{ } #sample > div > div#infobox{ display: flex; flex-direction: row; flex-wrap: wrap; } #sample > div > div#infobox > h4{ margin-bottom: 4em; } #sample > div > div#infobox > div{ flex-grow: 1; flex-shrink: 1; } #sample > div > div#infobox > div:first-of-type{ } #sample > div > div#infobox > div > p{ } #sample > div > div#infobox > div > ul{ margin-top: 0; } #sample > div > div#infobox > div > ul > li{ } #sample > div > div#infobox > div > ul > li > span{ } #sample > div > div#infobox > div > ul > li > span.top{ } #sample > div > div#infobox > div > ul > li > span.top > span{ } #sample > div > div#infobox > div > ul > li > span.bottom{ } #sample > div > div#infobox > div > ul > li > span.bottom > a{ } #sample > div > div#infobox > div > div{ } #sample > div > div#infobox > div > div > h5{ width: 100%; } #sample > div > div#infobox > div > div > h6{ } #sample > div > div#infobox > div > div > p{ } #sample > div > div#infobox > div#infobox-company{ display: flex; flex-direction: row; } #sample > div > div#infobox > div#infobox-company > div{ flex-grow: 1; flex-shrink: 1; margin-top: 0; } #sample > div > div#infobox > div#infobox-company > div > h5{ } #sample > div > div#infobox > div#infobox-company > ul{ display: block; margin-top: -0.5em; margin-right: 0; margin-left: 4em; } #sample > div > div#infobox > div#infobox-company > ul > li{ margin: 0; padding-top: 0.5em; padding-right: 0; display: flex; flex-direction: row; } #sample > div > div#infobox > div#infobox-company > ul > li > span.top{ margin: 0; width: 10em; text-align: left; } #sample > div > div#infobox > div#infobox-company > ul > li > span.bottom{ text-align: right; } #sample > div > div#infobox > div#infobox-timeframe{ width: 100%; } #sample > div > div#infobox > div#infobox-timeframe > h5{ } #sample > div > div#infobox > div#infobox-timeframe > ul{ margin-right: -2em; } #sample > div > div#infobox > div#infobox-timeframe > ul > li{ padding-right: 4em; width: 50%; } #sample > div > div#infobox > div#infobox-case{ display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 2em; margin-right: -2em; } #sample > div > div#infobox > div#infobox-case > h5{ display: none; } #sample > div > div#infobox > div#infobox-case > div{ flex-grow: 1; flex-shrink: 1; padding-right: 4em; width: 50%; } #sample > div > div#infobox > div#infobox-people{ margin-top: 4em; width: 100%; } body.js #sample > div > div#infobox > div#infobox-people > div#infobox-people-button{ display: none; } body.js #sample > div > div#infobox > div#infobox-people > div#infobox-people-button:before{ } body.js #sample > div > div#infobox > div#infobox-people.active > div#infobox-people-button:before{ } #sample > div > div#infobox > div#infobox-people > h5{ font-size: 1.5em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #sample > div > div#infobox > div#infobox-people > ul{ display: flex; flex-direction: row; flex-wrap: wrap; margin-right: -2em; } body.js #sample > div > div#infobox > div#infobox-people > ul{ display: flex; flex-wrap: nowrap; padding-left: 0; } body.js #sample > div > div#infobox > div#infobox-people.active > ul{ display: flex; } #sample > div > div#infobox > div#infobox-people > ul > li{ flex-basis: 0; padding-top: 2em; padding-right: 2em; max-width: 15em; } #sample > div > div#infobox > div#infobox-people > ul > li > span.top{ display: block; min-height: 3em; } #sample > div > div#infobox > div#infobox-people > ul > li > span.center{ } #sample > div > div#infobox > div#infobox-people > ul > li > span.center > span{ } #sample > div > div#infobox > div#infobox-people > ul > li > span.center > span.right{ display: none; } #sample > div > div#infobox > div#infobox-people > ul > li > span.bottom{ line-height: 1.5; } #sample > div > div#infobox > div#infobox-process{ margin-top: 4em; } body.js #sample > div > div#infobox > div#infobox-process > div#infobox-process-button{ display: none; } body.js #sample > div > div#infobox > div#infobox-process > div#infobox-process-button:before{ } body.js #sample > div > div#infobox > div#infobox-process.active > div#infobox-process-button:before{ } #sample > div > div#infobox > div#infobox-process > h5{ font-size: 1.5em; font-weight: 600; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #sample > div > div#infobox > div#infobox-process > ul{ } body.js #sample > div > div#infobox > div#infobox-process > ul{ display: flex; flex-direction: row; flex-wrap: nowrap; margin-right: -2em; padding-left: 0; } body.js #sample > div > div#infobox > div#infobox-process.active > ul{ display: flex; } #sample > div > div#infobox > div#infobox-process > ul > li{ flex-basis: 0; padding-top: 2em; padding-right: 2em; } #sample > div > div#infobox > div#infobox-process > ul > li > span.top{ min-height: 3em; line-height: 1.5; } #sample > div > div#infobox > div#infobox-process > ul > li > span.top > span{ display: none; } #sample > div > div#infobox > div#infobox-process > ul > li > span.bottom{ line-height: 1.5; } #sample > div > div{ } #sample > div > div > *{ margin-top: 4em; } #sample > div > div > h5{ margin-top: 2em; font-size: 2em; text-align: left; } #sample > div > div > p{ } #sample > div > div > p.image{ margin-top: 4em; margin-bottom: 4em; } #sample > div > div > p.image > img{ margin: 0 auto; max-width: 75%; } #sample > div > div > p.image > a{ margin: 0 auto; max-width: 75%; } #sample > div > div > p.image > a > img{ } #sample > div > div > div.list{ margin-top: 4em; margin-right: 4em; margin-left: 4em; } #sample > div > div > div.list > ul{ } #sample > div > div > div.list > ul > li{ } #sample > div > div > div.list > ul > li:before{ } #sample > div > div > div.list > ul > li > span{ } #sample > div > div > div.list > ul > li > span:before{ } #sample > div > div > div.columns{ display: flex; flex-direction: row; align-items: center; margin: 4em auto 4em; max-width: 75%; } #sample > div > div > div.columns > div{ max-width: 50%; } #sample > div > div > div.columns > div > p{ margin-top: 0; text-align: justify; } #sample > div > div > div.columns > div > p.image{ } #sample > div > div > div.columns > div > p.image > img{ } #sample > div > div > div.columns > div > p.image > a{ } #sample > div > div > div.columns > div > p.image > a:before{ } #sample > div > div > div.columns > div > p.image > a > img{ } #sample > div > div > div.columns > div.left{ padding-right: 2em; flex-grow: 1; flex-shrink: 1; } #sample > div > div > div.columns > div.right{ padding-left: 2em; flex-grow: 1; flex-shrink: 1; } #sample > div > div > div#retrospective{ } #sample > div > div > div#retrospective > h4{ margin-bottom: 4em; } #sample > div > div > div#retrospective > div{ } #sample > div > div > div#retrospective > div > h5{ margin-top: 2.5em; margin-bottom: 1.25em; } #sample > div > div > div#retrospective > h5{ margin-top: 2.5em; margin-bottom: 1.25em; } #sample > div > div > div#retrospective > div.center{ display: flex; margin: 2em auto 0; max-width: 75%; flex-direction: row; flex-wrap: nowrap; } #sample > div > div > div#retrospective > div.center > p{ margin-right: 2em; margin-left: 2em; flex-basis: 50%; } #sample > div > div > div#retrospective > div.center > p:first-of-type{ margin-left: 0; } #sample > div > div > div#retrospective > div.center > p:last-of-type{ margin-right: 0; } #sample > div > div > div#retrospective > div.center > p.left{ } #sample > div > div > div#retrospective > div.center > p.right{ } #sample > div > div > div#retrospective > div.center > p > a{ } #sample > div > div > div#retrospective > div.center > p > a > img{ } #sample > div > nav{ } #sample > div > nav > ul{ display: flex; flex-direction: row; justify-content: space-between; } #sample > div > nav > ul > li{ flex-grow: 0; flex-shrink: 1; margin-top: 0; } #sample > div > #passworded{ } #sample > div > #passworded > div{ } #sample > div > #passworded > div > h2{ } #sample > div > #passworded > div > div{ padding-top: 2em; padding-bottom: 2em; flex-direction: row; } #sample > div > #passworded > div > div > div.left{ flex-grow: 0; flex-shrink: 1; display: flex; flex-direction: column; justify-content: center; } #sample > div > #passworded > div > div > div.left > p{ flex-grow: 0; flex-shrink: 0; line-height: 1.5; } #sample > div > #passworded > div > div > div.right{ flex-grow: 0; flex-shrink: 0; margin-right: 4em; margin-bottom: 0; } #sample > div > #passworded > h2{ font-size: 4em; text-align: center; } #sample > div > #passworded > h2:before{ } #sample > div > #passworded > h2:after{ } #sample > div > #passworded > p{ } #portfolio{ } #portfolio > div{ } #portfolio > div > h2{ margin-right: -7.5em; margin-left: -7.5em; } #portfolio > div > h2 > span{ } #portfolio > div > div{ margin-top: 5em; } #portfolio > div > div > ul{ } #portfolio > div > div > ul > li{ } #portfolio > div > div > ul > li > a{ } #portfolio > div > div > ul > li > a > span.center{ } #portfolio > div > div > ul > li > a > span.center > span{ transform: rotate(0deg); } #portfolio > div > div > ul > li > a > span.right{ font-size: 0.75em; } #portfolio > div > div > ul > li > a > span.right > span{ } #portfolio > div > nav{ } #portfolio > div > nav > ul{ display: flex; flex-direction: row; justify-content: space-between; } #portfolio > div > nav > ul > li{ flex-grow: 0; flex-shrink: 1; } #research{ } #research > div{ } #research > div > h2{ } #research > div > h2 > span{ } #research > div > p{ } #research > div > ul{ margin: 1em -1em -1em; display: flex; flex-direction: row; flex-wrap: wrap; } #research > div > ul > li{ display: flex; flex-direction: column; margin: 0; max-width: 33%; } #research > div > ul > li > span{ display: flex; flex-direction: column; padding: 1em; } #research > div > ul > li > span > a{ } #research > div > ul > li > span > a.top{ flex-grow: 1; flex-shrink: 1; } #research > div > ul > li > span > a.top:before{ top: 1em; left: 1em; } #research > div > ul > li > span > a.top:after{ top: 1.29375em; left: 1.29375em; } #research > div > ul > li > span > a.top > span.top{ flex-grow: 0; flex-shrink: 0; } #research > div > ul > li > span > a.top > span.center{ flex-grow: 1; flex-shrink: 0; } #research > div > ul > li > span > a.top > span.bottom{ flex-grow: 0; flex-shrink: 0; } #research > div > ul > li > span > a.top > span.left{ top: 2em; right: 2em; } #research > div > ul > li > span > a.center{ flex-grow: 0; flex-shrink: 0; } #paper{ } #paper > div{ } #paper > div > h2{ } #paper > div > h2.top{ margin-right: -7.5em; margin-left: -7.5em; } #paper > div > h2.top > span{ padding: 0.5em 5em; } #paper > div.center{ } #paper > div.center > iframe{ padding-top: 10em; padding-right: 4em; padding-bottom: 7.5em; padding-left: 4em; } #paper > div > #passworded{ } #paper > div > #passworded > div{ } #paper > div > #passworded > div > h2{ } #paper > div > #passworded > div > div{ padding-top: 2em; padding-bottom: 2em; flex-direction: row; } #paper > div > #passworded > div > div > div.left{ flex-grow: 0; flex-shrink: 1; display: flex; flex-direction: column; justify-content: center; } #paper > div > #passworded > div > div > div.left > p{ flex-grow: 0; flex-shrink: 0; } #paper > div > #passworded > div > div > div.right{ flex-grow: 0; flex-shrink: 0; margin-right: 4em; margin-bottom: 0; } #paper > div > nav{ } #paper > div > nav > ul{ display: flex; flex-direction: row; justify-content: space-between; } #paper > div > nav > ul > li{ flex-grow: 0; flex-shrink: 1; } #paper > div > nav.top{ } #paper > div > nav.top > ul{ } #paper > div > nav.top > ul{ } #paper > div > nav.top > ul > li{ top: 1.5em; right: 1.5em; } #paper > div > nav.top > ul > li.first{ top: 1.5em; right: 1.5em; } #paper > div > nav.top > ul > li.second{ top: 1.5em; right: 1.5em; } #open{ } #open-top{ } #open-top > h2{ margin-right: -7.5em; margin-left: -7.5em; } #open-top > h2 > span{ } #hero{ } #hero > div{ } #hero > div:before{ margin-bottom: 4em; padding-top: 0; width: 17.5em; max-width: 100%; height: 8.75em; } #hero > div > h2{ text-align: center; } #hero > div > p{ margin: 0 auto; max-width: 50em; text-align: center; } #hero > div > p > span{ font-size: 2em; } #hero > div > nav{ } #hero > div > nav > ul{ display: flex; flex-direction: row; justify-content: center; } #hero > div > nav > ul > li{ flex-grow: 0; flex-shrink: 1; } #stats{ padding-top: 4em; padding-bottom: 4em; } #stats > div{ } #stats > div > ul{ flex-direction: row; justify-content: center; padding-top: 0; display: flex; } #stats > div > ul > li{ flex-grow: 0; flex-shrink: 1; padding-right: 2em; } #stats > div > ul > li:last-of-type{ padding-right: 0; } #stats > div.background{ display: block; margin-top: 2em; margin-bottom: 2em; } #featured{ } #featured > div{ } #featured > div > div.first{ display: none; } #featured > div > div.second{ display: block; } #featured > div > div.second ul{ margin-right: -1em; margin-left: -1em; display: flex; flex-direction: row; } #featured > div > div.second ul > li{ margin-bottom: 0; max-width: 33%; } #featured > div > div.second ul > li > a{ margin-right: 1em; margin-left: 1em; } #featured > div > div{ } #featured > div > div > ul{ margin-bottom: 1em; } #bragboard{ padding-top: 5em; padding-bottom: 5em; } #bragboard > div{ } #bragboard > div > ul{ } #bragboard > div > ul > li{ } #bragboard > div > ul > li > a{ width: 12.5em; height: 5em; } #testimonials{ } #testimonials > div{ display: flex; flex-direction: row; } #testimonials > div > blockquote{ flex-grow: 0; flex-shrink: 1; display: flex; flex-direction: column; margin-right: 2em; margin-bottom: 0; } #testimonials > div > blockquote:last-of-type{ margin-right: 0; } #testimonials > div > blockquote > p{ flex-grow: 1; flex-shrink: 0; } #testimonials > div > blockquote > cite{ flex-grow: 0; flex-shrink: 1; } #testimonials > div > blockquote > cite > span{ } #testimonials > div > blockquote > cite > span > a{ } #testimonials > div > blockquote > cite > span > a:before{ } #testimonials > div > blockquote > span{ } #testimonials > div.background{ display: block; } #error{ } #error > div{ } #error > div > div{ padding-top: 2em; padding-bottom: 2em; flex-direction: row; } #error > div > div > div.left{ flex-grow: 0; flex-shrink: 1; } #error > div > div > div.left > ul{ } #error > div > div > div.left > ul > li{ margin-top: 1em; } #error > div > div > div.left > ul > li > span{ } #error > div > div > div.left > ul > li > span > span{ margin-left: 2em; display: block } #error > div > div > div.left > ul > li > span > span:before{ content: "\f10d"; display: none; margin-right: 0.5em; margin-bottom: 0; color: #ddd; font-size: 1.5em; font-family: "Font Awesome 5 Free"; font-weight: bold; text-align: center; } #error > div > div > div.left > ul > li > span > span:after{ content: "\f10e"; display: none; margin-top: 0; margin-left: 0.5em; color: #ddd; font-size: 1.5em; font-family: "Font Awesome 5 Free"; font-weight: bold; text-align: center; } #error > div > div > div.right{ flex-grow: 0; flex-shrink: 0; margin-right: 4em; margin-bottom: 0; } #message{ } #message > div{ } #message > div > p{ } #message > div > form{ } #message > div > form > p#fail{ } #message > div > form > p#success{ } #message > div > form > input[type=text]{ } #message > div > form > textarea{ } #message > div > form > input[type=submit]{ margin-right: auto; margin-left: auto; width: 15em; } #message > div > form > input[type=button]{ } #message > div > p.bottom{ } #message > div > p.bottom > a{ } #notification{ } #notification > p{ } #notification > p > a{ } #notification > p > a:hover{ } #notification > p > a > span{ text-align: center; } #notification > p > a > span:after{ position: static; margin-left: 1em; display: inline-block; } #footer{ } #footer > div{ } #footer > div > div.top{ } #footer > div > div.top > h3{ display: none; } #footer > div > div.top > p{ margin-top: 0; overflow: visible; color: #444; font-size: 0.75em; text-align: justify; line-height: 1.75; } #footer > div > div.top > p > span{ display: inline; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; } #footer > div > div.top > p > a{ float: none; clear: none; padding: 0; display: inline; } #footer > div > div.top > p > a:before{ margin-right: 0.25em; margin-left: 0; } #footer > div > div.top > p > a.first{ } #footer > div > div.top > p > a.first:before{ } #footer > div > div.top > p > a.second{ } #footer > div > div.top > p > a.second:before{ } #footer > div > div.top > p > a.third{ } #footer > div > div.top > p > a.third:before{ } #footer > div > div.top > p > a.fourth{ } #footer > div > div.top > p > a.fourth:before{ } #footer > div > div.top > p > a.fifth{ } #footer > div > div.top > p > a.fifth:before{ } #footer > div > div.top > p > a.sixth{ } #footer > div > div.top > p > a.sixth:before{ } #footer > div > div.top > p > a.seventh{ } #footer > div > div.top > p > a.seventh:before{ } #footer > div > div.top > p > a.eighth{ } #footer > div > div.top > p > a.eighth:before{ } #footer > div > div.center{ } #footer > div > div.center > h3{ } #footer > div > div.center > p{ text-align: center; } #footer > div > div.center > p > a{ position: relative; overflow: hidden; padding-left: 4.5em; display: inline-block; width: auto; } #footer > div > div.center > p > a:hover{ } #footer > div > div.center > p > a:before{ position: absolute; top: 0.675em; left: 1.5em; } #footer > div > div.center > p > span{ } } /* Wide */ @media (orientation: landscape) and (min-width: 80em){ html{ } /* ========== Document ========== */ body{ } } /* Print */ @media print{ html{ } body{ } }