html { text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; } /*Bootstrap overrides*/ .navbar { margin-bottom: 0; border: 0; border-radius: 0; background: #4c2447; } .navbar-header { border: 0; background: #4c2447; box-shadow: none; } .navbar-toggle { border: 0; } .navbar-brand { padding-top: 10px; } .navbar-default .navbar-toggle .icon-bar { width: 40px; height: 5px; border-radius: 6px; background-color: #ffd429; } .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background-color: transparent; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border: 0; } .navbar-collapse { background: #4c2447; } .navbar-default .navbar-nav > li > a { color: white; } .alert-link { color: #ffd429 !important; } .alert-link:hover { color: white !important; } .alert { margin-top: 20px; max-width: 700px; border: 0; } .alert-success { background: #4c2447; } .alert-success p { color: #E8FBF2 !important; color: rgba(255,255,255,0.9) !important; } .alert-info { background: #6eadf5; color: #F1F7FE; color: rgba(255,255,255,0.9); } .panel-body { padding: 0; } /*Typography*/ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('../fonts/open-sans-v34-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/open-sans-v34-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/open-sans-v34-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/open-sans-v34-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/open-sans-v34-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/open-sans-v34-latin-ext_latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* open-sans-700 - latin-ext_latin */ @font-face { font-family: 'Open Sans Bold'; font-style: normal; font-weight: 700; src: url('../fonts/open-sans-v34-latin-ext_latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/open-sans-v34-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/open-sans-v34-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/open-sans-v34-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/open-sans-v34-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/open-sans-v34-latin-ext_latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* signika-300 - latin-ext_latin */ @font-face { font-family: 'Signika Light'; font-style: normal; font-weight: 300; src: url('../fonts/signika-v20-latin-ext_latin-300.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/signika-v20-latin-ext_latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/signika-v20-latin-ext_latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/signika-v20-latin-ext_latin-300.woff') format('woff'), /* Modern Browsers */ url('../fonts/signika-v20-latin-ext_latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/signika-v20-latin-ext_latin-300.svg#Signika') format('svg'); /* Legacy iOS */ } /* signika-regular - latin-ext_latin */ @font-face { font-family: 'Signika Regular'; font-style: normal; font-weight: 400; src: url('../fonts/signika-v20-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/signika-v20-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/signika-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/signika-v20-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/signika-v20-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/signika-v20-latin-ext_latin-regular.svg#Signika') format('svg'); /* Legacy iOS */ } /* signika-600 - latin-ext_latin */ @font-face { font-family: 'Signika Bold'; font-style: normal; font-weight: 600; src: url('../fonts/signika-v20-latin-ext_latin-600.eot'); /* IE9 Compat Modes */ src: local(''), url('../fonts/signika-v20-latin-ext_latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/signika-v20-latin-ext_latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/signika-v20-latin-ext_latin-600.woff') format('woff'), /* Modern Browsers */ url('../fonts/signika-v20-latin-ext_latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/signika-v20-latin-ext_latin-600.svg#Signika') format('svg'); /* Legacy iOS */ } /*Text Styles*/ h1 { margin-bottom: 20px; color: #4B423B; font-size: 35px; font-family: "Signika Light"; } h2 { color: #4B423B; font-size: 28px; font-family: "Signika Light"; } h3 { color: #333; font-size: 25px; font-family: "Signika Regular"; } h4 { color: #9b9b9b; font-size: 24px; font-family: "Signika Light"; } h5 { color: #4a4a4a; font-size: 20px; font-family: "Signika Regular"; } li, p { margin-bottom: 20px; color: #1c1c1c; list-style: outside; font-size: 17px; font-family: "Open Sans"; line-height: 30px; } li { margin-bottom: 20px; list-style-type: disc; } a { border-bottom: 2px solid #ffd429; color: #2caf8f; text-decoration: none; transition: .3s all ease; } a:hover { color: #0f4639; text-decoration: none; } section { padding-top: 30px; padding-bottom: 30px; } /*Header*/ /*Navbar*/ .icon-bar { transition: .3s all ease; } .bar2 { width: 30px !important; } .bar3 { width: 25px !important; } .navbar-toggle:hover .bar1 { width: 42px !important; } .navbar-toggle:hover .bar2 { width: 25px !important; } .navbar-toggle:hover .bar3 { width: 15px !important; } .navbar li { padding-top: 20px; color: #9b9b9b; text-align: center; font-size: 30px; font-family: "Signika Regular"; } .navbar-brand { border-bottom: 0; } .navbar-nav li a { border-bottom: 0; } /*Intro*/ .intro, .intro-text { padding-top: 20px; padding-bottom: 0; background: #4c2447; } .intro-text h1 { color: #4c2447; } .illustration { padding-bottom: 60px; } .intro-text { padding-bottom: 40px; background: #fff; } /*Actions*/ .actions { background: #fffae5; } .action { position: relative; padding-top: 30px; padding-bottom: 30px; } .action-button { position: relative; bottom: 10px; margin-bottom: 30px; padding: 6px 35px; border: 0; border-bottom: 0; border-radius: 100px; background: #FFD429; color: #4B423B; font-size: 22px; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.15); font-family: "Signika Regular"; } .action-button:hover { background: #4c2447; color: white; } .actions p { font-size: 15px; color: #8a6d3b; } /*Comparisons*/ .title { margin-top: 40px; padding-bottom: 8px; background-image: url("../img/underline.svg"); background-position: center bottom; background-repeat: no-repeat; } .sale { /*display: none; */ /* uncomment when needed*/ position: absolute; top: -10%; right: -20%; padding: 1px 10px; border-radius: 100px; background-color: #0AD778; color: white; text-transform: uppercase; font-size: 15px; font-family: "Open Sans"; } .sale-info { font-size: 15px; color: gray; } .links { margin-top: -20px; margin-bottom: 40px; } .bad, .good { overflow: hidden; margin-top: 30px; padding-top: 30px; padding-bottom: 30px; } .bad { background-color: transparent; background-image: url("../img/bad-pattern.png"); background-size: 40px; background-repeat: repeat; } .pros li { background-image: url("../img/good.svg"); } .cons li { background-image: url("../img/bad.svg"); } li.neutral { background-image: url("../img/neutral.svg"); } .cons, .pros { padding-left: 15px; } .cons li, .pros li, .info { padding-left: 30px; background-position: top left; background-repeat: no-repeat; list-style: none; } .bad img, .good img, .recommended-img img { margin-bottom: 70px; width: 250px; height: 250px; } .get-item { position: absolute; top: 300px; right: 50%; left: 50%; margin-left: -60px; padding: 5px; width: 120px; border-bottom: 0; border-radius: 100px; background: #2B81E3; box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.25); color: white; vertical-align: middle; text-align: center; text-decoration: none; font-size: 21px; font-family: "Signika Regular"; } .get-item:active, .get-item:focus, .get-item:hover { background: #6eadf5; color: white; text-decoration: none; } .get-item:active { background: #2B81E3; } .seller-group { padding: 15px; text-align: center; transition: all 0.3s ease; } .seller { min-width: 150px; max-width: 200px; display: block; margin: 20px auto; text-align: center; } .info { margin-bottom: 0; background-image: url("../img/info.svg"); background-position: center left; } .info p { margin-bottom: 0; } /*Recommended Lines*/ .recommended-section { margin-top: 20px; margin-bottom: 20px; padding-top: 30px; padding-bottom: 30px; background: #e0d7de; } /*Charities*/ .charities { margin-bottom: 0; background-color: #e0d7de; } /*Promotion details*/ .promotion-details { margin-bottom: 0; background-color: #fffae5; } .promotion-details .panel-default .panel-heading { border: 0; background-color: #fffae5; box-shadow: 0 0 0 transparent; } /*Licenses*/ .licenses { margin-bottom: 0; background-color: #e0d7de; } .licenses .panel-default .panel-heading { border: 0; background-color: #e0d7de; box-shadow: 0 0 0 transparent; } .fix-margin { margin: 0; } /*Footer*/ footer { padding-top: 30px; background-color: #4B423B; } footer p { color: #cdcac8; color: rgba(255,255,255,0.72); } footer a { color: #FFD429; font-weight: 700; } footer a:hover { color: white; } .footer-logo { margin-bottom: 15px; max-height: 75px; } /* Media Queries */ /*Smallest devices*/ /*@media (max-width: 350px) { .seller { display: block; margin: 20px auto; } }*/ /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { /*Navbar*/ .navbar-nav { float: right; margin: 10px; /*margin-left: 100px;*/ } .navbar-default .navbar-nav > li > a { padding: 7px; color: #4c2447; } .navbar li { padding: 0 25px; border-right: 1px #9BD2BF solid; background-color: white; list-style-type: none; font-size: 1.1em; font-family: "Signika Regular"; transition: .3s all ease; } .navbar li:first-child { border-radius: 100px 0 0 100px; } .navbar li:last-child { border-right: 0; border-radius: 0 100px 100px 0; } .navbar li:hover { background-color: #FFDD55; } .navbar li a { display: block; text-decoration: none; transition: .3s all ease; } .navbar li a:hover { color: #4B423B; } .intro { margin-bottom: 0; } .join { display: none; } .is-table-row { display: table; } .is-table-row [class*="col-"] { display: table-cell; float: none; vertical-align: top; } .title { margin-bottom: 30px; } .recommended-section h5 { padding-left: 46px; text-align: left; } .charities img { width: 80%; filter: brightness(0.39) contrast(150%) opacity(0.6) saturate(0); transition: .3s all ease; } .charities img:hover { filter: brightness(1) contrast(100%) opacity(1) saturate(1); transform: scale(1.1); } /*Footer*/ .footer-logo { margin-bottom: 0; } .footer-logo img { width: 85%; } } /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) { /*Navbar*/ .navbar-nav { margin: 10px 10px 10px 100px; } .navbar-default .navbar-nav > li > a { padding: 7px; color: #333; } .navbar li { padding: 0 30px; border-right: 1px #9BD2BF solid; background-color: white; list-style-type: none; font-size: 1.2em; font-family: "Signika Regular"; transition: .3s all ease; } .navbar li:first-child { border-radius: 100px 0 0 100px; } .navbar li:last-child { border-right: 0; border-radius: 0 100px 100px 0; } .navbar li:hover { background-color: #FFDD55; } .navbar li a { display: block; text-decoration: none; transition: .3s all ease; } .navbar li:hover a { color: #4B423B; } .join { display: block; } .join img { margin: 10px; width: 200px; } /*Intro*/ .intro { margin-bottom: 0; } .intro-text { background: transparent; } .intro-text h1 { margin-top: 0; color: white; color: rgba(255, 255, 255, 0.95); } .intro-text p { color: rgba(255, 255, 255, 0.79); } .intro-text a { color: gold; } .intro-text h4 { color: #FFDD55; font-family: "Signika Light"; } .illustration img { margin-top: 30px; width: 90%; } /*Footer*/ .footer-logo img { width: 50%; } } /* Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { .illustration img { margin-top: 10px; width: 70%; } }