/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } section { display: block; } a { background-color: transparent; } a:active, a:hover { outline: 0; } h1 { font-size: 2em; margin: 0.67em 0; } img { border: 0; } svg:not(:root) { overflow: hidden; } /*! * Bootstrap Grid v4.1.2 (https://getbootstrap.com/) * Copyright 2011-2018 The Bootstrap Authors * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ @-ms-viewport { width: device-width; } html { -webkit-box-sizing: border-box; box-sizing: border-box; -ms-overflow-style: scrollbar; } *, *::before, *::after { -webkit-box-sizing: inherit; box-sizing: inherit; } .container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 680px; } } @media (min-width: 992px) { .container { max-width: 680px; } } @media (min-width: 1200px) { .container { max-width: 680px; } } .row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .col-md-12 { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; } @media (min-width: 768px) { .col-md-12 { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } } body { font-family: sans-serif; font-weight: 400; line-height: 1.5; color: #fff; font-size: 15px; } .search-container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-bottom: 20px; margin-top: 20px; } #app { position: relative; } img { max-width: 100%; height: auto; } .onlybg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; } .item-container { position: relative; } .black { color: #000 !important; } .white { color: #fff !important; } .website { text-align: center; } .website a { color: rgba(255, 255, 255, 0.7) !important; } .item { width: 280px; height: 90px; margin: 20px 0; -webkit-box-flex: 0; -ms-flex: 0 0 280px; flex: 0 0 280px; background-image: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.25))); background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25)); border-radius: 6px; padding: 15px; padding-right: 55px; color: white; overflow: hidden; position: relative; -webkit-transition: all .35s ease-in-out; transition: all .35s ease-in-out; outline: 1px solid transparent; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid #333333; border: 1px solid #4a4a4a; border: 1px solid rgba(76, 76, 76, 0.4); background-clip: padding-box; } .item:after { content: ""; position: absolute; width: 90px; height: 90px; border-radius: 50%; position: absolute; right: -48px; top: 0px; background: rgba(255, 255, 255, 0.1); -webkit-box-shadow: 0 0 40px 0px rgba(0, 0, 0, 0.2); box-shadow: 0 0 40px 0px rgba(0, 0, 0, 0.2); } .item .link { position: absolute; right: 0; top: 0; height: 100%; width: 100%; text-align: right; line-height: 90px; color: white; font-size: 24px; z-index: 1; padding-right: 10px; } .item .title { font-size: 16px; } .item .details { width: 100%; } .app-icon { max-width: 60px; margin-right: 15px; display: block; } .sectionbutton { width: 100%; max-width: 330px; padding: 18px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border: 1px solid #458e88; display: block; text-align: center; text-decoration: none; font-weight: 300; text-transform: uppercase; border-radius: 8px; } .detailcol { height: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .apprequests { margin-top: 30px; } .apprequests .app { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.03); margin-bottom: 20px; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media only screen and (max-width: 600px) { .apprequests .app { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .apprequests .appcolumn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 14px; padding: 10px; position: relative; background: rgba(0, 0, 0, 0.15); } @media only screen and (max-width: 600px) { .apprequests .appcolumn { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .apprequests .appcolumn .appinfo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0 auto; font-size: 12px; } .apprequests .appcolumn .description { font-size: 13px; margin-top: 20px; margin-left: 10px; /* * width: 280px; */ } @media only screen and (max-width: 600px) { .apprequests .appcolumn .description { margin-top: 15px; } } .apprequests .appcolumn.details { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } @media only screen and (max-width: 600px) { .apprequests .appcolumn.details { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .fullbg { background: #00c6fb; /* Old browsers */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$appgreen', endColorstr='$appblue', GradientType=1); /* IE6-9 fallback on horizontal gradient */ } .section1 { min-height: 100vh; position: relative; /*  padding: 30px 0; */ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .section1 .details { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; color: rgba(255, 255, 255, 0.7); font-weight: 300; } .section1 .container { height: 100%; position: relative; } .section1 h1 { text-align: center; color: white; text-transform: uppercase; font-weight: 600; margin-bottom: 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; line-height: 1; } @media only screen and (max-width: 600px) { .section1 h1 { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 30px; } } .section1 h1>span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 19px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; position: relative; text-align: left; top: 3px; margin-left: 8px; } @media only screen and (max-width: 600px) { .section1 h1>span { top: 0; } } .section1 h1>span span { font-size: 14px; letter-spacing: 7px; } .section1 a { color: white; } a { color: #5d717b; font-size: 15px; } h1 { font-size: 40px; text-transform: uppercase; } h1 span { font-weight: 200; opacity: 0.7; }