@font-face {
    font-family: 'Coolvetica';
    src: url('../Content/fonts/coolvetica/coolvetica_rg.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.websummit-wrapper li,
.websummit-wrapper ol {
  color: #fff;
}


.white-text {
  color: #FFF;
}

.header-logo-container {
  position: absolute;
}

.red-header {
  background-color: red;
  height: 90px;
  position: relative;
  width: 100%
}

.header-logo-container {
  right: 10px;
  bottom: 10px;
}

.content-row {
  position: relative;
  font-family: 'Coolvetica';
}

.content-row p {
  margin: 0;
}

.footer-content img,
.footer-content span {
  margin: 0 auto;
}

#section-1 {
  background: url("/Content/websummit2017/images/la editada2.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  background-position: center;
  z-index: 10;

}

#section-1-left {
  position: absolute;
  left: 5%;
  top: 20%;
}

#section-1-right {
  position: absolute;
  top: 10%;
  right: 5%; 
}

#section-2 {
  /*
  min-height: 300px;
  /**/
  z-index: 11;
}

#section-2-left {
  position: absolute;
  top: 10%;
  left: 5%;
}

#section-2-right {
  position: absolute;
  top: 10%;
  right: 5%; 
}

#section-3 {
background-image:url('websummit2017/images/orig_433368.jpg');
  min-height: 203px;
  z-index: 10;
}

#section-3-left {
  position: absolute;
  top: 10%;
  left: 5%;
}

#section-3-right {
  position: absolute;
  top: 10%;
  right: 5%;
}

#section-4 {
  min-height: 300px;
  z-index: 11;
}

#section-4-left {
  position: absolute;
  top: 10%;
  left: 5%;
}

#section-4-right {
  position: absolute;
  top: 10%;
  right: 5%; 
}

#section-5 {
  background-image:url('websummit2017/images/colores rojo.png');
  min-height: 203px;
  z-index: 10;
}

#section-5-left {
  position: absolute;
  top: 10%;
  left: 5%;
}

#section-5-left ul {

}

#section-5-right {
  position: absolute;
  top: 10%;
  right: 5%;
}

#section-6 {

}

#section-6-left {
  
}

#section-6-right {
  
}

 /*Desktop*/
@media (min-width: 1281px) {
  /* 60px*/
  .title-text {
    font-size: 6em;
  }

  /* 48x*/
  .subtitle-1-text {
    font-size: 4.5em; 
  }

  /* 43x*/
  .subtitle-2-text {
    font-size: 3.4em; 
  }

  .subtitle-3-text {
    font-size: 4.0em; 
  }

  .common-text {
    font-size: 1.5em;
  }

  .common-text-large {
    font-size: 2em;
  }

  .list-text {
    font-size: 2em;
  }

  .header-logo-container {
    right: 10px;
    bottom: 10px;
  }

  .footer-content span {
    font-size: 2em;
  }

  #section-1 {
    min-height: 350px;
  }

  #section-1-right {
    right: 5%;
    top: 0;
    zoom: 0.7;
    -moz-transform: scale(0.7)
  }

  #section-2 {
    min-height: 385px;
    z-index: 11;
  }

  #section-2-left {
    position: absolute;
    top: 23%;
    left: 2%;
    zoom: .8;
    -moz-transform: scale(.8);
  }

  #section-2-right {
    position: absolute;
    top: 10%;
    right: 1%;
    width: 50%; 
  }

  #section-2-right .footer-content {
    margin-top: 2%;
    zoom: .3;
    -moz-transform: scale(.3);  
  }

  #section-3 {
    min-height: 437px;
  }

  #section-3-left {
    top: 20%;
    left: 15%;
  }

  #section-3-right {
    right: 5%;
    top: 25%;
    zoom: 0.7;
    -moz-transform: scale(0.7);
  }

  #section-3-right .header-content {
      position: absolute;
      left: 40%;
      top: -50%;
      zoom: 0.4;
      -moz-transform: scale(0.4);
    }

  #section-4 {
    min-height: 452px;
  }

  #section-4-left {
    left: 10%;
    top: 0;
  }

  #section-4-left img {
    zoom: 1;
    -moz-transform: scale(1);
  }

  #section-4-right {
    right: 1%;
    top: 5%;
    width: 50%;
  }

  #section-5 {
    min-height: 365px;
  }

  #section-5-left {
    top: 10%;
    left: 15%;
  }

  #section-5-right {
    top: -15%;
    right: 5%;
    zoom: .5;
    -moz-transform: scale(0.5);
  }

  #section-6 {
    margin-top: 6%;
  }

  #section-6-left {
    position: relative;
    float: right;
    width: 45%;
  }

  #section-6-right {
    margin-left: 5%;
    width: 45%;
  }

}
/*
  ##Device = Tablets, Ipads (portrait) 
  ##Screen = B/w 768px to 1024px
*/
@media (min-width: 768px) and (max-width: 1280px) {
  .red-header {
    height: 45px;
  }

  .header-logo-container {
    zoom: 0.6;
    -moz-transform: scale(0.6);
  }

  /* 60px*/
  .title-text {
    font-size: 3.750em;
  }

  /* 48x*/
  .subtitle-1-text {
    font-size: 3.4em; 
  }

  /* 43x*/
  .subtitle-2-text {
    font-size: 2.7em; 
  }

  .subtitle-3-text {
    font-size: 3.2em; 
  }

  .common-text {
    font-size: 1.4em;
  }

  .common-text-large {
    font-size: 1.3em;
  }

  .list-text {
    font-size: 1.5em;
  }

  .header-logo-container {
    right: 10px;
    bottom: 10px;
  }

  #section-1 {
    min-height: 260px;
  }

  #section-1-right {
    right: 1%;
    zoom: 0.45;
    -moz-transform: scale(0.45);
  }

  #section-2 {
    min-height: 325px;
  }

  #section-2-left {
    left: 5%;
    top: 23%;
    zoom: 0.5;
    -moz-transform: scale(0.5); 
  }

  #section-2-right {
    right: 1%;
    top: 5%;
    width: 50%;
  }

  #section-2-right .footer-content {
    margin-top: -2%;
    zoom: 0.15;
    -moz-transform: scale(0.15);  
  }

  #section-3 {
    min-height: initial;
  }

  #section-3-left {
    left: auto;
    top: auto;
    position: relative;
    padding: 5% 0 5% 10%;
  }

  #section-3-right {
    right: 5%;
    top: 20%;
    zoom: 0.48;
    -moz-transform: scale(0.48);
  }

  #section-3-right .header-content {
    position: absolute;
    left: 40%;
    top: -35%;
    zoom: 0.35;
    -moz-transform: scale(0.35);
  }

  #section-4 {
    min-height: 200px;
  }

  #section-4-left {
    left: 15%;
    top: 0;
  }

  #section-4-left img {
    zoom: 0.44;
    -moz-transform: scale(0.44);
  }

  #section-4-right {
    right: 1%;
    top: 10%;
    width: 50%;
  }

  #section-5 {
    min-height: initial;
  }

  #section-5-left {
    left: initial;
    top: initial;
    display: inline-block;
    position: relative;
    padding: 5% 0 5% 10%;
    width: 45%;
  }

  #section-5-left ul {
    padding-left: 10%;
  }

  #section-5-right {
    margin: 0;
    right: initial;
    top: initial;
    zoom: 0.34;
    -moz-transform: scale(0.26);
    position: relative;
    width: 35%;
    float: right;
  }

  #section-6 {

  }

  #section-6-left {
    position: relative;
    float: right;
    width: 45%;
  }

  #section-6-right {
    margin-left: 5%;
    width: 45%;
  }
}

/* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  #section-2-right .footer-content {
    margin-top: 0;
    zoom: .23;
    -moz-transform: scale(0.23);
  }
}

/* Smartphone */
/* Smartphones (landscape) ----------- */
@media (min-width: 481px) and (max-width: 767px) {
  .red-header {
    height: 45px;
  }

  .header-logo-container {
      right: 10px;
      bottom: 10px;

      zoom: 0.5;
      -moz-transform: scale(0.5);
  }

  /* 60px*/
  .title-text {
    font-size: 1.7em;
  }

  /* 48x*/
  .subtitle-1-text {
    font-size: 2.3em;
  }

  /* 43x*/
  .subtitle-2-text {
    font-size: 1.8em;
  }

  .subtitle-3-text {
    font-size: 2.2em;
  }

  .common-text {
    font-size: 1em;
  }

  #section-1 {
    min-height: 210px;
  }

  #section-1-right {
    right: 1%;
    zoom: 0.37;
    -moz-transform: scale(0.37); 
  }

  #section-2 {
    min-height: 205px;
  }

  #section-2-left {
    left: 2%;
    top: 17%;
    zoom: 0.42; 
    -moz-transform: scale(0.42);
  }

  #section-2-right {
    right: 1%;
    top: 5%;
    width: 50%;
  }

  #section-2-right .footer-content {
    margin-top: -2%;
    zoom: 0.13;
    -moz-transform: scale(0.13);  
  }

  #section-3 {
    min-height: 170px;
  }

  #section-3-left {
    top: 10%;
    left: 15%;
  }

  #section-3-right {
    right: 10%;
    top: 15%;
    zoom: 0.35;
    -moz-transform: scale(0.35);
  }

  #section-4 {
    min-height: 190px;
  }

  #section-4-left {
    left: 15%;
    top: 0;
  }

  #section-4-left img {
    zoom: 0.45;
    -moz-transform: scale(0.45);
  }

  #section-4-right {
    right: 1%;
    top: 25%;
    width: 50%;
  }

  #section-5 {
      min-height: 140px;
    }

  #section-5-left {
    left: 15%;
    top: 5%;
  }

  #section-5-left ul {
    padding-left: 10%;
  }

  #section-5-right {
    right: 16%;
    top: -15%;
    zoom: 0.18;
    -moz-transform: scale(0.18);
  }

  #section-6 {
  }

  #section-6-left {
    position: relative;
    padding: 1px 15px;
    margin-bottom: 30px;
  }

  #section-6-right {
    position: relative;
  }
}

@media only screen 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

    .red-header {
      height: 45px;
    }

    .header-logo-container {
        right: 10px;
        bottom: 10px;

        zoom: 0.45;
        -moz-transform: scale(0.45);
    }

    /* 60px*/
    .title-text {
      font-size: 1.7em;
    }

    /* 48x*/
    .subtitle-1-text {
      font-size: 1.5em; 
    }

    /* 43x*/
    .subtitle-2-text {
      font-size: 1.2em; 
    }

    .subtitle-3-text {
      font-size: 1.4em;
    }

    .common-text {
      font-size: 1em;
    }

    #section-1 {
      min-height: 118px;
    }

    #section-1-left {
      position: absolute;
      left: 5%;
      top: 20%;
    }

    #section-1-right {
      right: 1%;
      zoom: 0.21;
      -moz-transform: scale(0.21); 
    }

    #section-2 {
      min-height: initial;
    }

    #section-2-left {
      left: 5%;
      top: 30%;
      zoom: 0.23;
      -moz-transform: scale(0.23); 
    }

    #section-2-right {
      right: initial;
      top: initial;
      position: relative;
      padding: 5% 0 5% 55%;
      right: 0;
      width: 92%;
    }

    #section-2-right .footer-content {
      margin-top: -7%;
      zoom: 0.08;
      -moz-transform: scale(0.08);
    }

    #section-3 {
      min-height: initial;
    }

    #section-3-left {
      position: relative;
      padding: 5% 0 5% 4%;
      width: 40%;
    }

    #section-3-right {
      margin-top: 5%;
      right: 5%;
      top: 15%;
      zoom: 0.25;
      -moz-transform: scale(0.25);
    }

    #section-3-right .header-content {
      position: absolute;
      left: 40%;
      top: -50%;
      zoom: 0.4;
      -moz-transform: scale(0.4);
    }

    #section-4 {
      min-height: 190px;
    }

    #section-4-left {
      left: 0;
      top: 0;
    }

    #section-4-left img {
      zoom: 0.4;
      -moz-transform: scale(0.45);
    }

    #section-4-right {
      right: 1%;
      top: 5%;
      width: 50%;
    }

    #section-5 {
      
    }

    #section-5-left {
      padding: 2% 0;
      position: relative;
      width: 45%;
    }

    #section-5-left ul {
      padding-left: 10%;
    }

    #section-5-right {
      margin: -10% 0 0 0;
      zoom: 0.27;
      -moz-transform: scale(0.27);
    }

    #section-6 {
    }

    #section-6-left {
      position: relative;
      padding: 1px 15px;
      margin-bottom: 30px;
    }

    #section-6-right {
      position: relative;
    }
}