/* MODAL */

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 200; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


/* TOGGLE BUTTON */

/* The switch - the box around the slider */
.switch {
 margin-top: 5px;
 position: relative;
 display: inline-block;
 width: 60px;
 height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
 opacity: 0;
 width: 0;
 height: 0;
}

/* The slider */
.slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #ccc;
 -webkit-transition: .4s;
 transition: .4s;
}

.slider:before {
 position: absolute;
 content: "";
 height: 26px;
 width: 26px;
 left: 4px;
 bottom: 4px;
 background-color: white;
 -webkit-transition: .4s;
 transition: .4s;
}

input:checked + .slider {
 background-color: #1B5E20;
}

input:focus + .slider {
 box-shadow: 0 0 1px #1B5E20;
}

input:checked + .slider:before {
 -webkit-transform: translateX(26px);
 -ms-transform: translateX(26px);
 transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
 border-radius: 34px;
}

.slider.round:before {
 border-radius: 50%;
}


/*  */

.main-content{
  min-height: 100vh;
}

@-webkit-keyframes appear {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes appear {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
body {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  background-color: #fff;
  color: #000;
  padding-bottom: 4rem;
}

a img {
  visibility: visible;
}
a span:first-child {
  visibility: visible;
}

.sp-logo {
  background: url(https://upload.wikimedia.org/wikipedia/commons/c/cd/Startpage.com_logo.svg) no-repeat 50% 50%;
  background-size: 150px 50px;
  width: 150px;
  height: 50px;
  color: #4285F4;
  display: block;
  position: absolute;
  top: 0.3rem;
  right: 1.5rem;
  z-index: 2;
}
.sp-logo a {
  display: block;
  width: 120px;
  height: 44px;
}
@media screen and (max-width: 530px) {
  .sp-logo {
    background-position: 0 3px;
    margin-left: -20px;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
  }
}
@media screen and (max-width: 255px) {
  .sp-logo .google_logo {
    display: none;
  }
}

#top {
  padding-top: 30px;
  /* GROWN EARLY */
  background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
  /* DISCRET */
  /*background-image: radial-gradient(73% 147%, #EADFDF 59%, #ECE2DF 100%), radial-gradient(91% 146%, rgba(255,255,255,0.50) 47%, rgba(0,0,0,0.50) 100%);*/
  background-blend-mode: screen;
  border-bottom: 1px solid #ebebeb;
}

#search {
  border-color: transparent;
  margin-bottom: 2rem;
  width: 100%;
  max-width: 632px;
  height: 44px;
}
@media screen and (max-width: 530px) {
  #search {
    padding: 10px;
    height: 60px;
  }
  #search a {
    max-width: 80px;
  }
}
#search form {
  display: inline;
}
#search form #Search input {
  position: relative;
  line-height: 34px;
  margin-bottom: 5px;
  width: 100%;
  height: 34px;
  font: 16px arial, sans-serif;
  padding-left: 16px;
  border-color: transparent;
  background-color: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  height: 44px;
  border-radius: 3px;
  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
#search form #Search input:hover, #search form #Search input:focus {
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
}
#search form #Search button {
  display: none;
  color: #4284f3;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/59615/icon--microphone.png) no-repeat 50% 50%;
  background-size: 24px 24px;
  border-color: transparent;
  border-radius: 0 2px 2px 0;
  width: 24px;
  height: 24px;
  cursor: pointer;
  position: absolute;
  left: -45px;
  outline: 0;
  box-shadow: none;
  z-index: 99;
}

.badge {
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  font-size: 15px;
}

.menu-wrapper {
  width: 80px;
  height: 80px;
  position: fixed;
  top: 15px;
  right: 10px;
  z-index: 3;
}
.menu-wrapper img {
  width: 34px;
  height: 60px;
}
@media screen and (max-width: 900px) {
  .menu-wrapper {
    top: -8px;
    right: -8px;
    width: 40px;
    height: 40px;
  }
}
.menu-wrapper:hover .menu {
  width: 200px;
  height: 320px;
  border-radius: 3px;
  z-index: 999;
}
.menu-wrapper:hover .menu img {
  transition: all 50ms ease-in;
}
.menu-wrapper:hover .menu ul {
  display: block;
  list-style-type: none;
  color: white;
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  margin: 50px 0 5px 0;
  padding: 0;
  font-size: 22px;
}
.menu-wrapper:hover .menu ul li {
  transition: all 200ms ease-in;
  width: 180px;
  margin: 0 auto;
}
.menu-wrapper:hover .menu ul li a {
  font-family: "Product Sans", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  text-decoration: none;
  display: block;
  width: 180px;
  color: #aaa;
  padding: 7px 0;
  margin: 5px 0;
  border-radius: 4px;
  transition: all 100ms ease-in;
}
.menu-wrapper:hover .menu ul li a:hover {
  color: #4285F4;
  background-color: #fafafa;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  -webkit-appearance: none;
}
.menu-wrapper:hover .menu ul li a:focus, .menu-wrapper:hover .menu ul li a:active {
  color: #fff;
  background-color: #4285F4;
}
.menu-wrapper .menu {
  width: 60px;
  height: 60px;
  top: 25px;
  right: 20px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 1px 1px 10px 0px;
  text-align: center;
  color: white;
  position: fixed;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 2px 2.5px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);
  transition: all 200ms ease-in-out;
}
.menu-wrapper .menu ul {
  display: none;
  -webkit-animation: appear 1s;
          animation: appear 1s;
}
@media screen and (max-width: 900px) {
  .menu-wrapper .menu {
    top: -5px;
    right: -5px;
    width: 40px;
    height: 40px;
    border-radius: 5px;
  }
  .menu-wrapper .menu img {
    width: 25px;
    height: 43px;
    margin-left: -3px;
  }
}

.sites {
  color: inherit;
  display: flex;
  flex-flow: row wrap;
  align-content: space-between;
  justify-content: center;
}
.sites a {
  color: inherit;
  font-size: 1.3rem;
  background: black;
  border-radius: 4px;
  width: 188px;
  height: 120px;
  margin: 1rem;
  line-height: 120px;
  text-align: center;
  color: #4584ee;
  box-sizing: border-box;
  display: block;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
  transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  -webkit-appearance: none;
}
.sites a:hover, .sites a:focus, .sites a:active {
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.3);
}
.sites a span:nth-child(1) {
  font-family: Material-Icons;
  padding-right: 0;
  font-size: 55px;
}
.sites a span#title {
  display:none;
  opacity: 0;
  position: absolute;
  font-size: 16px;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  transition: all ease-in-out 150ms;
  position: absolute;
  top: 77px;
  left: 0;
  color: #bbb;
  width: 188px;
  height: 1rem;
  text-align: center;
  text-shadow: none;
}
.sites a:hover span#title {
  display:block;
  opacity: 1;
}
.sites a img {
  width: 55px;
}
+ .sites a:nth-child(3n) {
  page-break-after: always;
}
.sites a:hover, .sites a:focus, .sites a:active {
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
  text-decoration: none;
  color: #4584ee;
}

#Amazon {
  background: #0b0c07;
}
#Amazon img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Apple {
  background: #999;
}
#Apple img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Behance {
  background: #1769ff;
}
#Behance img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Bootstrap {
  background: #563d7c;
}
#Bootstrap img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#CanalPlus {
  background: #000000;
}
#CanalPlus img {
  -webkit-filter: invert(0);
          filter: invert(0);
  width: 120px;
}

#Chatons {
  background: #fff;
}

#Chatons img {
  -webkit-filter: invert(0);
          filter: invert(0);
  width: 100px;
}

#ChromeStore {
  background: #e3e4e5;
}
#ChromeStore img {
  -webkit-filter: invert(0);
          filter: invert(0);
  width: 65px;
}

#Codepen {
  background: #181818;
}
#Codepen img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Dribbble {
  background: #e84c88;
}
#Dribbble img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#DeepL {
  background: #f7f7f7;
}
#DeepL img {
  -webkit-filter: invert(0);
          filter: invert(0);
}

#Emoji {
  background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
}
#Emoji img {
  -webkit-filter: invert(0);
          filter: invert(0);
}

#EteSync {
  background-color: #ffecb3;
}
#EteSync img {
  width: 150px;
  -webkit-filter: invert(0);
          filter: invert(0);
}

#Feedly {
  background: #6cc655;
}
#Feedly img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Flickr {
  background: #0063dc;
}
#Flickr img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Flipboard {
  background: #df272e;
}
#Flipboard img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Firefox {
  background: #c13832;
}
#Firefox img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#GitHub {
  background: #25292e;
}
#GitHub img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#GitLab {
  background: linear-gradient(to top right, #1D1237, #523E8E);
}
#GitLab img {
  -webkit-filter: invert(0);
          filter: invert(0);
}

#IsItDown {
  background: linear-gradient(60deg, #E53935 0%, #EF5350 100%);
  /*background: #E53935;*/

}
#IsItDown img {
  width: 70px;
  -webkit-filter: invert(0);
          filter: invert(0);
}

#Keep {
  background: #ffbb00;
}
#Keep img {
  -webkit-filter: invert(0);
          filter: invert(0);
}

#GoogleMusic {
  background: #ff5722;
}
#GoogleMusic img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#GooglePlay {
  background: #607d8b;
}
#GooglePlay img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Hangouts {
  background: #0c9d58;
}
#Hangouts img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Heroku {
  background: #430098;
}
#Heroku img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Hulu {
  background: #66aa33;
}
#Hulu img {
  -webkit-filter: invert(1);
          filter: invert(1);
  width: 75px;
}

#Imgur {
  background: #34373c;
}
#Imgur img {
  -webkit-filter: invert(0);
          filter: invert(0);
  width: 100px;
}

#Inbox {
  background: #4285F4;
}
#Inbox img {
  -webkit-filter: invert(0);
          filter: invert(0);
}

#Instagram {
  background: #e4405f;
}
#Instagram img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Instapaper {
  background: #1f1f1f;
}
#Instapaper img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#JSFiddle {
  background: #3fa1f5;
}
#JSFiddle img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#LeMonde {
  background: #fff;
}
#LeMonde img {
  -webkit-filter: invert(0);
          filter: invert(0);
  width: 140px;
}

#LinkedIn {
  background: #0077b5;
}
#LinkedIn img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Medium {
  background: #00ab6c;
}
#Medium img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Messenger {
  background: #0084ff;
}
#Messenger img {
  -webkit-filter: invert(0);
          filter: invert(0);
}

#MeteoFrance {
  background: #005793;
}
#MeteoFrance img {
  -webkit-filter: invert(0);
          filter: invert(0);
  width: 110px;
}

#MistralAI {
  background: #300a24;
}
#MistralAI img {
  width: 110px;
}

#Netflix {
  background: #e50914;
}
#Netflix img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Office {
   background: #fff;
}

#Office img {
  width: 110px;
}

#OperaAddons {
  background: #ff1b2d;
}
#OperaAddons img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#OVHcloud {
  background: #fff;
}
#OVHcloud img {
  -webkit-filter: invert(0);
          filter: invert(0);
  width: 160px;
}

#OSM {
  background: #7092ff;
}

#Pinterest {
  background: #bd081c;
}
#Pinterest img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Pocket {
  background: #ef3f56;
}
#Pocket img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Strava {
  background: #ff5100;
}
#Strava img {
  -webkit-filter: invert(0);
          filter: invert(0);
  width: 50px;
}

#SensCritique {
  background: #0ad06f;
}
#SensCritique img {
  -webkit-filter: invert(0);
          filter: invert(0);
  width: 120px;
}

#ProductHunt {
  background: #da552f;
}
#ProductHunt img {
  -webkit-filter: invert(0);
          filter: invert(0);
}

#Quora {
  background: #a82400;
}
#Quora img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Reddit {
  background: #ff4500;
}
#Reddit img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#RSS {
  background: #ffa500;
}
#RSS img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Slack {
  background: #6ecadc;
}
#Slack img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Spotify {
  background: #2ebd59;
}
#Spotify img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Twitch {
  background: #6441a5;
}
#Twitch img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Twitter {
  background: #1da1f2;
}
#Twitter img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#Vimeo {
  background: #1ab7ea;
}
#Vimeo img {
  -webkit-filter: invert(1);
          filter: invert(1);
}

#WordReference {
  background: #fff;
}

#WordReference img {
  -webkit-filter: invert(0);
          filter: invert(0);
  width: 80px;
}

#Wikipedia {
  background: #fff;
}
#Wikipedia img {
  -webkit-filter: invert(0);
          filter: invert(0);
}

#YouTube {
  background: #fd0016;
}
#YouTube img {
  -webkit-filter: invert(1);
          filter: invert(1);
  width: 65px;
}

#YouTubeMusic {
  background: #191919;
}
#YouTubeMusic img {
  -webkit-filter: invert(0);
          filter: invert(0);
}

#Instagram {
  background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
}