@keyframes moveLeft 
{
  from 
  {
    margin: 70px;
    opacity: 0;
  }
  to 
  {
    margin: 0;
    opacity: 1;
  }
}

@keyframes opaci 
{
  from
  {
    opacity: 0;
  } 
  to 
  {
    opacity: 1;
  } 
}
@font-face
{
    font-family: ubuntuB;
    src: url("fonts/ubuntuB.ttf");
}
@font-face
{
    font-family: ubuntuR;
    src: url("fonts/ubuntuR.ttf");
}

@font-face
{
    font-family: varela;
    src: url("fonts/varela.ttf");
}

*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
#container-slider
{
 position: absolute;
 display: block;
 width: 100%;
 height: 100%;
 display: flex;
 flex-direction: column-reverse;

 
}

.cotrol
{
  width: 100%;
  height: 100px;
}
#slider {
 position: relative;
 display: block;
 width: 100%;
 height: calc(100% - 100px);
 min-height: 500px;
}
#slider li {
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 position: absolute !important;
 top: 0 !important;
 left: 0 !important;
 width: 100%;
 height: 100%;
 display: block;
 -webkit-transition: opacity 1s;
 -moz-transition: opacity 1s;
 -ms-transition: opacity 1s;
 -o-transition: opacity 1s;
 transition: opacity 1s;
 z-index: -1;
 opacity: 0;
}
#container-slider .arrowPrev, #container-slider .arrowNext{
 font-size: 30pt;
 color: rgba(204, 204, 204, 0.65);
 cursor: pointer;
 position: absolute;
 bottom: 5%;
 left: 50px;
 z-index: 2; 
}
#container-slider .arrowNext {
 left: initial;
 right: 50px !important;
}
.content_slider{
 padding: 15px 30px;
 color: #FFF;
 width: 100%;
 height: 100%;

 
}
.content_slider div{
 text-align: left;
 animation: moveLeft 2s linear;
 
}
.s1H2{
  font-family: ubuntuB;
 font-size: 25pt;
 letter-spacing: 1px;
 text-transform: uppercase;
 margin-bottom: 10px;
 
}
.s1P2{
 font-size: 10pt;
 font-family: ubuntuB;
 color: #FFF;
 margin-bottom: 20px;
 letter-spacing: 1px;
}
#slider li .content_slider{
 background: rgba(0, 0, 0, 0.20);
 padding: 10px 125px;
}
.content_slider{
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: flex;
 justify-content: left;
 align-items: center;

 
}
.btnSlider{
 color: #FFF;
 font-size: 10pt;
 letter-spacing: 1px;
 padding: 8px 43px;
 background: #B44663;
 text-decoration: none;
 transition: .5s all;
 font-family: ubuntuR;
 border-radius: 5px;
}
.btnSlider:hover{
 background: #111;
 border: 1px solid #111;
}

.form button:hover
{
  background: #111;
  border: 1px solid #111;
}

.listslider {
 position: absolute;
 display: -webkit-flex;
 display: -moz-flex;
 display: -ms-flex;
 display: -o-flex;
 display: flex;
 justify-content: space-between;
 align-items: center;
 left: 50%;
 bottom: 5%;
 list-style: none;
 z-index: 2;
 transform: translateX(-50%);
}
.listslider li {
 border-radius: 50%;
 width: 10px;
 height: 10px;
 cursor: pointer;
 margin: 0 5px;
}
.listslider li a {
 border: 1px solid #CCC;
 border-radius: 50%;
 width: 100%;
 height: 100%;
 display: block;
}
.item-select-slid {
 background: #B44663  !important;
 border: none;
}

.imgArrow
{
  width: 18px;
  height: 18px;
}

.form 
{
  display: flex;
  width: 80%;
  flex-direction: column;
  justify-content: space-between;
}



.form input, .form textarea
{
  background-color: rgba(196, 173, 216, 0.50);
  border: none;
  margin-bottom: 5px;
  color: #fff;
  padding: 10px 5px;
  border-radius: 5px;
}

.form input:focus
{
  background-color: rgba(196, 173, 216, 0.50);
  color: #fff;
}

.form input::placeholder
{
  color: #FFF;
  font-family: varela;
  font-size: 14px;
  letter-spacing: 1px;
}

.form textarea::placeholder
{
  color: #FFF;
  font-family: varela;
  font-size: 14px;
  letter-spacing: 1px;
}

.form button 
{
  width: 130px;
  height: 40px;
  background: #B44663;
  border: none;
  color: #fff;
  border-radius: 5px;
  font-family: ubuntuR;
  letter-spacing: 1px;
  cursor: pointer;
}

.s1H2 {
  font-size: 50pt !important;
}
.s1P2 {
  font-size: 22pt !important;
}

.s2H2 
{
  font-size: 30pt !important;
  letter-spacing: 1px;
  font-family: ubuntuB;
  margin-bottom: 10px;
}

.s2P2
{
  font-size: 16pt !important;
  letter-spacing: 1px;
  font-family: varela;
  line-height: 1.5;
}

.s2P3
{
  font-size: 15pt !important;
  letter-spacing: 1px;
  font-family: varela;
  line-height: 1.5;
  margin: 60px 0;
}

.s2H4 
{
  font-size: 22pt !important;
  letter-spacing: 1px;
  font-family: ubuntuB;
  margin-bottom: 20px;
}

.s2P4
{
  font-size: 10pt;
  font-family: varela;
  color: #FFF;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

#logo
{
  position: fixed;
  width: 60px;
  height: 60px;
  left: 40px;
  top: 30px;
  z-index: 100;
  opacity: 1;
  animation: opaci 2s linear;
}

.emergente
{
  position: fixed;
  width: 70%;
  height: 40%;
  left: 15%;
  top: 25%;
  background-color: rgba(196, 173, 216, 0.80);
  z-index: 100;
  border-radius: 5px;

  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.emergente h2 
{
  color: #fff;
  font-family: ubuntuB;
  margin: 0;
  margin-bottom: 10px;
}

.emergente p 
{
  color: #fff;
  font-family: varela;
  margin: 0;
  text-align: center;
}

@media screen and (max-width: 460px){
.content_slider div
{
  text-align: left;
  margin: 0;
  opacity: 1;

  animation: moveLeft 2s linear;
  
}
.s1H2 {
  font-size: 30pt !important;
}
.s1P2 {
  font-size: 12pt !important;
}

.s2H2 
{
  font-size: 22pt !important;
  letter-spacing: 1px;
  font-family: ubuntuB;
  margin-bottom: 10px;
}

.s2P2
{
  font-size: 12pt !important;
  letter-spacing: 1px;
  font-family: varela;
  line-height: 1.5;
}

.s2P3
{
  font-size: 15pt !important;
  letter-spacing: 1px;
  font-family: varela;
  line-height: 1.5;
  margin: 35px 0;
}

#container-slider .arrowPrev, #container-slider .arrowNext{
font-size: 20pt;
}
#container-slider .arrowPrev{
left: 15px;
}
#container-slider .arrowNext{
right: 15px !important;
}
#slider
{
/*min-height: 400px;*/
}
#slider li .content_slider{
padding: 10px 20px;
}
.btnSlider{
padding: 10px 50px;
  font-size: 10pt;
}

#logo
{
  position: fixed;
  width: 40px;
  height: 40px;
  left: 10px;
  top: 30px;
  z-index: 100;
  opacity: 1;
  animation: opaci 2s linear;
}

.emergente
{
  position: fixed;
  width: 70%;
  height: 40%;
  left: 15%;
  top: 25%;
  background-color: rgba(196, 173, 216, 0.80);
  z-index: 100;
  border-radius: 5px;

  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.emergente h2 
{
  color: #fff;
  font-family: ubuntuB;
  margin: 0;
  margin-bottom: 10px;
}

.emergente p 
{
  color: #fff;
  font-family: varela;
  margin: 0;
  text-align: center;
}

}