a {
  outline: 0;
}

a:visited {
  outline: 0;
}

a:active {
  outline: 0;
}

a:hover {
  outline: 0;
}

body {
  background: #F1EBEE;
  background: url(../images/background.png);
  /* background-repeat: no-repeat; */
  /* background-size: 1920px 1080px; */
  margin: 0;
}

.container {
  /* height: 100%; */
  height: 100vh;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.colorPickerContainer {
  position: absolute;
  z-index: 100;
}

.logoWrapper {
  width: 100%;
  background-color: white;
  position: relative;
  display: flex;
}

.logoContainer {
  margin: 1% auto;
  position: relative;
  padding: 2% 5%;
  border-radius: 20px;
}

.socialContainer {
  width: 100%;
  padding: 0;
  margin: 0;
  margin-top: 5%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
}

.socialContainer a {
  margin-right: 5%;
}

.socialContainer a:last-child {
  margin-right: 0;
}

.social__icon {
  float: left;
}

.social__icon {
  margin-right: 5%;
}

.social__icon.instagram svg {
  fill: #78797B;
  width: 38px;
  height: 38px;
}

.social__icon.instagram svg:hover {
  fill: #000000;
}

.social__icon.facebook svg {
  fill: #78797B;
  width: 38px;
  height: 38px;
}

.social__icon.facebook svg:hover {
  fill: #000000;
}

.social__icon.email svg {
  fill: #78797B;
  width: 38px;
  height: 38px;
}

.social__icon.email svg:hover {
  fill: #000000;
}

/* .social__icon.whatsapp {
  display: none;
} */

.social__icon.whatsapp svg {
  fill: #78797B;
  width: 38px;
  height: 38px;
}

.social__icon.whatsapp svg:hover {
  fill: #000000;
}

 /* The Modal (background) */
 .modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* 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: 25% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 53%; /* Could be more or less, depending on screen size */
  position: relative;
  animation: animatetop 0.4s;
}

@keyframes animatetop {
  from { top:-300px;opacity:0}
  to {top:0;opacity:1}
}

/* 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;
}

/* Media Query */
@media only screen and (pointer:coarse) {
  /* .social__icon.whatsapp {
    display: block;
  } */
}

/* Landscape */
@media only screen and (pointer:coarse) and (orientation: landscape) {
  body {
    background: #F1EBEE;
    background-image: none;
    width: 100%;
  }
}
/* Portrait */
@media only screen and (pointer:coarse) and (orientation: portrait) {
  body {
    background-repeat: repeat;
    margin: 0;
  }

  .social__icon.instagram svg {
    width: 96px;
    height: 96px;
  }

  .social__icon.facebook svg {
    width: 96px;
    height: 96px;
  }

  .social__icon.email svg {
    width: 96px;
    height: 96px;
  }

  .social__icon.whatsapp svg {
    width: 96px;
    height: 96px;
  }
}

/* iPad 3, 4 and Pro Portrait and Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (-webkit-min-device-pixel-ratio: 2) {

  body {
    background: #F1EBEE;
    background: url(../images/background.png);
    background-repeat: repeat;
    background-size: 1920px 1080px;
    margin: 0;
  }
}