/* frwrd.link 2018 Always Awake bvba Well hello there. Seems you are interested in our code. That's great. Why not work together? ;) info@alwaysawake.be Colors #303030 text #181818 title #00aded hyperlink #31c4f3 hover z-index order 1 content 2 footer 99 fb messenger button 100 active overlay 101 priority message 102 menu 200 active z-index-200 overlay 201 fb messenger content, active priority message */ @import url("src/fontawesome/css/fontawesome.min.css"); @import url("src/fontawesome/css/fa-regular.min.css"); @import url("src/fontawesome/css/fa-brands.min.css"); @import url(//fonts.googleapis.com/css?family=Muli:400,400i,600,700,700i); /* Preview */ #myti-preview-header { position: fixed; bottom: 0; left: 0; z-index: 1000; } #myti-preview-header p { position: relative; display: inline-block; vertical-align: middle; padding: 10px 20px; margin: 0; line-height: 1em; background: #14B9D6; color: #F9F8F7; font-size: 16px; font-weight: bold; text-transform: uppercase; } #myti-preview-header p:before { content: "\f135"; font-family: "Font Awesome 5 Pro"; float: left; font-weight: normal; margin-right: 10px; margin-left: -10px; font-size: 24px; } /* Basics */ #overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255,255,255,0.7); opacity: 0; z-index: -1; display: none; } #overlay.active { display: block; z-index: 100; animation: aa-fadein-overlay 0.4s ease-out forwards; } #overlay.active.z-index-200 { display: block; z-index: 200; } @keyframes aa-fadein-overlay { 0% { opacity: 0; } 100% { opacity: 1; } } html { position: relative; color: #303030; font-family: 'Muli', sans-serif; font-weight: 400; font-size: 62.5%; width: 100%; margin: 0px; padding: 0px; height: 100%; } body { position: relative; font-size: 1.7rem; margin: 0px; padding: 0px; height: 100%; min-height: 100%; overflow-y: scroll; overflow-x: hidden; background: #d2d2d2; } #container { position: relative; display: flex; flex-direction: column; min-height: 100%; background: #d2d2d2; background: -webkit-linear-gradient(to top, #d2d2d2, #f2f2f4); background: linear-gradient(to top, #d2d2d2, #f2f2f4); } header { position: relative; flex: none; z-index: 102; } footer { position: relative; flex: none; z-index: 61; } main { position: relative; flex: 1 0 auto; z-index: 1; display: flex; justify-content: center; align-items: center; min-width: 100%; } img { border: 0; display: block; } h1, h2, h3, h4, h5, h6, p, a { padding: 0; margin: 0; font-weight: 400; } b, strong { font-weight: 700; } button:hover, .linkable:hover { cursor: pointer; } td { vertical-align: top; } .responsive-show { display: none; } .nowrap { white-space: nowrap; } .display-none { display: none; } .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .float-right { float: right; } .txt a { text-decoration: underline; } a { color: #899DD0; text-decoration: none; } a:hover { color: #A5C435; } .clear { clear: both; } .add-transition, .add-transition > * { transition: all 200ms ease-in-out; } .add-transition:hover, .add-transition:hover > * { transition: all 100ms ease-in-out; } #action { padding: 0px; box-sizing: border-box; -webkit-box-sizing: border-box; background: #fff; box-shadow: 0px 4px 0px -2px rgba(0,0,0,0.1); } #action > .box { position: relative; margin: 0 auto; max-width: 800px; padding: 20px 35px; box-sizing: border-box; -webkit-box-sizing: border-box; } #action h1 { color: #181818; font-weight: 600; font-size: 2.4rem; } /* Theme views */ #bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center center; } .theme-infobox { position: relative; display: inline-block; text-align: center; max-width: 800px; background: #fff; margin: 60px 60px; padding: 30px 30px; box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 6px; -webkit-border-radius: 6px; box-shadow: 0px 4px 0px -2px rgba(0,0,0,0.1); } .theme-infobox-ttl { padding: 0px 0px 20px 0px; } .theme-infobox-ttl .ttl { } .theme-infobox-ttl .ttl h1 { font-weight: 700; text-transform: uppercase; font-size: 1.8rem; line-height: 1.8rem; } .theme-infobox-logo { padding: 0px 0px 20px 0px; } .theme-infobox-logo .img { position: relative; display: inline-block; vertical-align: top; width: 300px; max-width: 60%; } .theme-infobox-logo .img img { width: 100%; max-width: 300px; } .theme-infobox-btns {} .theme-infobox-btns .item { padding-bottom: 10px; } .theme-infobox-btns .item:last-child { padding-bottom: 0px; } .theme-infobox-btns .item a { position: relative; display: block; font-weight: 600; font-size: 1.6rem; line-height: 1.6rem; color: #fff; background: #899DD0; box-sizing: border-box; padding: 15px 10px; border-radius: 3px; -webkit-border-radius: 3px; } .theme-infobox-btns .item a:hover { color: #fff; background: #A5C435; } .theme-dark-vader #container { background: #121212; background: linear-gradient(to top, #020202, #282828); } .theme-dark-vader .theme-infobox { background: rgba(0,0,0,0.9); } .theme-dark-vader .theme-infobox-ttl .ttl h1 { color: #fff; } .theme-dark-vader .theme-infobox-btns .item a { background: #fff; color: #111; } .theme-dark-vader .theme-infobox-btns .item a:hover { background: #ddd; } /* Responsive */ @media only screen and (max-width: 820px) { html { font-size: 50%; } .theme-infobox { margin: 30px; } } @media only screen and (max-width: 460px) { .theme-infobox { margin: 15px; padding: 15px; } } /* Animations */ .theme-infobox { animation: ani-theme-infobox 0.2s ease-out 1 normal; } @keyframes ani-theme-infobox { from { transform: scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } } #bg { animation: ani-theme-bg 0.4s ease-out 1 normal; } @keyframes ani-theme-bg { from { transform: scale(1.1); opacity: 0; } to { transform: none; opacity: 1; } } /* Print */ @media print { #container, main, .theme-infobox { display: block !important; } html { font-size: 50%; } @page { margin: 2cm 1cm; } } /* Row Grid */ .row-grid-container { position: relative; width: 100%; padding: 0px 10px; box-sizing: border-box; -webkit-box-sizing: border-box; } .row-grid-item { float: left; margin-bottom: 10px; } .row-grid-item img { max-width: 100%; max-height: 100%; vertical-align: bottom; transition: background 200ms ease-in-out, box-shadow 200ms ease-in-out, border 200ms ease-in-out; border: 0px solid #FFF4E4; box-sizing: border-box; -webkit-box-sizing: border-box; } .row-grid-item img:hover { background: #FFF4E4; border: 6px solid #FFF4E4; box-shadow: 0px 0px 0px 4px #FFF4E4; transition: background 100ms ease-in-out, box-shadow 100ms ease-in-out, border 100ms ease-in-out; } .row-grid-item .row-grid-first-item { clear: both; } .row-grid-last-row, .row-grid-last-row ~ .row-grid-item { margin-bottom: 0; } /* Colorbox */ /* Colorbox Core Style: The following CSS is consistent between example themes and should not be altered. */ #colorbox, #cboxOverlay, #cboxWrapper { position:absolute; top:0; left:0; z-index:9999; overflow:hidden; } #cboxWrapper { max-width:none; } #cboxOverlay { position:fixed; width:100%; height:100%; } #cboxMiddleLeft, #cboxBottomLeft { clear:left; } #cboxContent { position:relative; } #cboxLoadedContent { overflow:auto; -webkit-overflow-scrolling: touch; } #cboxTitle { margin:0; } #cboxLoadingOverlay, #cboxLoadingGraphic { position:absolute; top:0; left:0; width:100%; height:100%; } #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow { cursor:pointer; } .cboxPhoto { float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic; } .cboxIframe { width:100%; height:100%; display:block; border:0; padding:0; margin:0;} #colorbox, #cboxContent, #cboxLoadedContent { box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; } /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered & tabbed in a way that represents the nesting of the generated HTML. */ #colorbox button { min-width: auto; -border-radius: 0; -webkit-border-radius: 0; box-shadow: 0 0; letter-spacing: 0px; font-weight: normal; } #cboxOverlay { background:#000; } #colorbox { outline:0;} #cboxContent { margin-top:0px;} .cboxIframe { background:#F9F8F7;} #cboxError { padding:50px; border:1px solid #ccc;} #cboxLoadedContent{ } #cboxTitle { position:absolute; top:-20px; left:0; color:#ccc;} #cboxCurrent { position:absolute; top:-20px; right:40px; color:#ccc; visibility: hidden !important; } #cboxLoadingGraphic{ } /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline:0; } #cboxSlideshow {position:absolute; top:-20px; right:90px; color:#F9F8F7;} #cboxPrevious, #cboxNext { position:absolute; top:50%; margin-top:-50px; width:50px; height:100px; background: rgba(0,0,0,0.6); color: #ccc; outline: none; } #cboxPrevious { position: fixed; left: 0px; } #cboxPrevious:before { position: relative; font-size: 64px; font-family: "Font Awesome 5 Pro"; content: "\f053"; top: -2px; right: 4px; } #cboxNext:hover, #cboxPrevious:hover { color: #F9F8F7; background: rgba(0,0,0,0.8); } #cboxNext { position: fixed; right:0px; } #cboxNext:before { position: relative; font-size: 64px; font-family: "Font Awesome 5 Pro"; content: "\f054"; top: -2px; left: 4px; } #cboxClose { position: fixed; top: 0px; right: 0px; display:block; width:45px; height:45px; color: #ccc; background: rgba(0,0,0,0.8); outline: 0; } #cboxClose:before { font-family: "Font Awesome 5 Pro"; font-size: 24px; content: "\f00d"; } #cboxClose:hover { color: #F9F8F7; } #colorbox, #cboxOverlay, #cboxWrapper { overflow: visible; } #cboxWrapper { box-shadow: 0px 0px 80px 20px #000; }