html, body {
  scroll-behavior: smooth;
  margin: 0 auto;
	width: 87vw;
  background-color: #f5e1c8;
}

.header {
  height: 30vw;
  background: url("https://i.imgur.com/s6aUzQA.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.header:hover {
  filter: blur(4px);
  transition: width 4s, height 4s, transform 4s;

}

.section {
	color: white;
	height: 52vw;
	margin: 0;
  margin-top: 3vw; 
  background-color: #666666;
  text-align: center;
  font-size: 2vw;
  font-family: 'Amatic SC', cursive;
  padding-top: 2vw;
  padding: 1vw;
}

#d{
  height: 80vw;
}

h2 {  
  margin: 1;
	padding: 0;
}

h3{
  color: #5E5E5E;
  text-align: center;
  font-family: 'Macondo', cursive;    
  font-size: 5vw;
}

h7{
  font-size:7vw;
  position:fixed;
  margin-top:-32vw;
  margin-left:-5vw;

}
.peke{
  width:23vw;
  height:23vw;
  border-radius:150vw;
  border:1vw solid #666;
  border-color:#454546;
  float: right;
  margin-top: 8vw;
  margin-right: 3vw;
  transition: width 2s, height 2s, transform 2s;
}

.peke:hover {-webkit-transform:scale(1.3);transform:scale(1.3);
overflow:hidden;  
}

.lila{
  width:23vw;
  height:23vw;
  border-radius:150vw;
  border:1vw solid #666;
  border-color:#454546;
  float: left;
  margin-top: 8vw;
  margin-left: 3vw;
  transition: width 2s, height 2s, transform 2s;
}

.lila:hover {-webkit-transform:scale(1.3);transform:scale(1.3);
overflow:hidden;  
}

.lentes{
  width:23vw;
  height:23vw;
  border-radius:150vw;
  border:1vw solid #666;
  border-color:#454546;
  float: left;
  margin-top: 1vw;
  margin-left: 2vw;
  transition: width 2s, height 2s, transform 2s;
}

.lentes:hover {-webkit-transform:scale(1.3);transform:scale(1.3);
overflow:hidden;  
}

.masa{
  width:23vw;
  height:23vw;
  border-radius:150vw;
  border:1vw solid #666;
  border-color:#454546;
  float: right;
  margin-top: 1vw;
  margin-right: 2vw;
  transition: width 2s, height 2s, transform 2s;
}

.masa:hover {-webkit-transform:scale(1.3);transform:scale(1.3);
overflow:hidden;  
}
.sandia{
  width:30vw;
  height:30vw;
  border-radius:150vw;
  border:1vw solid #666;
  border-color:#454546;
  float: center;
  margin-top: 3vw;
  transition: width 2s, height 2s, transform 2s;
}

.sandia:hover {-webkit-transform:scale(1.3);transform:scale(1.3);
overflow:hidden;  
  
}

.delimitador{
width:40vw;
margin-left: 45vw;
float:left;
}

.contenedor{
height:0px;
width:100%;
padding-top:56.25%; 
position:relative;
margin-top: 1vw;
}

.delimitador2{
width:40vw;
margin-left: 2vw;
}

.contenedor2{
height:0px;
width:100%;
padding-top:56.25%; 
position:relative;
margin-top: 1vw;
}

iframe{
position:absolute;
height:100%;
width:100%;
top:0px;
left:0px;
}

.sticky__list {
  box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.17);
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  background-color: #7a5c3c;
  opacity: 95%;
  z-index: 1;
}

ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 1vw 1vw;
    justify-content: space-around;  
    font-family: 'Macondo', cursive; 
    font-size: 2vw;
}

.wrapper {
  width: 84vw;
  max-width: 100%;
  margin: auto;
  overflow: hidden;
}

.carousel {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  background: #ddd;
  z-index: 0;
}

.carousel-img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  -webkit-transition: opacity ease-out 0.5s;
  transition: opacity ease-out 0.5s;
}

.carousel-img-displayed {
  display: block;
  opacity: 1;
  z-index: 2;
}

.carousel-img-hidden {
  display: block;
  opacity: 0;
  z-index: 1;
}

.carousel-img-noDisplay {
  display: none;
}

.carousel-arrow {
  z-index: 3;
  display: block;
  position: absolute;
  width: 36px;
  height: 36px;
  top: 50%;
  margin-top: -18px;
  border-radius: 50%;
  border: 0;
  background-color: #fff;
  background-image: url("http://res.cloudinary.com/dnqehhgmu/image/upload/v1509720334/blue-arrow_jk1ydw.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  cursor: pointer;
  -webkit-transition: background-size 0.15s ease-out;
  transition: background-size 0.15s ease-out;
}

.carousel-arrow:hover,
.carousel-arrow:focus {
  background-size: 22px 22px;
}

.carousel-arrow-next {
  right: 20px;
}

.carousel-arrow-prev {
  left: 20px;
  -webkit-transform: rotateZ(180deg);
  -ms-transform: rotate(180deg);
  transform: rotateZ(180deg);
}

.sponsors{
  margin-left:10%;
  margin-right:10%;
  width:70vw;
}

.container--redes{
  width:400px;
  left:0;
  position:fixed;
  top:25%;
  z-index: 1;
}

.icon{
  top:50%;
  position:relative;
  margin-bottom:1vw;
  
}

.icon-primary{
  display:inline-block;
  text-decoration:none;
  font-family: arial;
  font-size: 2vw;
  line-height: 5vw;
  color:#fff;
  background-color:#3b5998;
  border-radius:100%;
  position:relative;
  z-index:1;
  box-shadow:1px 0 1px rgba(0,0,0,.5);
  height:5vw;
  width:5vw;
  text-align:center;
  line-height:5vw;
}

.container-description{
  overflow:hidden;
  position:absolute;
  top:0;
  left:2vw;
  font-family: arial;
  font-size: 3vw;
}

.icon-description{
  width:20vw;
  display:inline-block;
  text-decoration:none;
  color:#fff;
  background-color:#3b5998;
  height: 5vw;
  line-height: 3vw;
  padding-left: 7vw;
  border-radius:0 20px 20px 0;
  transform: translate3d(-110%, 0, 0);
  transition:transform 175ms ease;
  line-height:5vw;
}

.icon-primary:hover  ~ .container-description .icon-description{
     transform: translate(0, 0);
}

.color-instagram{
  background-color:#E23813;
}

.color-twitter{
  background-color:#33C4CB;
}

.color-steam{
  background-color:#3A3939;
}

a {text-decoration: none;}
a:link {color: #FFFFFF;}
a:visited {color: #FFFFFF;}
a:hover {color: #0F0F0F;}
a:active {color: #5E5E5E;}