html, body{
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }

body {
    background-image: url('../images/langosta2.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:cover;
    min-height: 500px;
    position: relative;
    margin: 0px;
    padding: 0px;
  }

    /* code to presentation on the frontpage like slides*/ 


#limite {
  position: absolute;
  height: 100%;
  width: 100%;
}

div#limite div.item-page{
  position: relative;
  width: 100%;
  height: 100%;
}


.intro{
  width: 100%;
  height: 100vh;
}

div.item-page div div.intro div.container{
  padding: 18vh 2% 10% 2%;
  width: 60%;
  background: rgba(102, 128, 153, 0.85);
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  text-align: right;
}

ul.description{
  text-align:right
}


 /* responsive development*/ 

 
 /* big screens*/ 
@media screen and (min-width: 1367px){

    div.item-page div div.intro div.container {
    max-width: 1100px;
    }
  }

  /* tablets landscape*/ 

@media screen and (min-width:768px) and (max-width: 1366px) and (orientation: landscape){
  body {
    background-image: url('../images/langosta2_tablet_land.jpg');
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size:cover;
    min-height: 500px;
    position: relative;
    margin: 0px;
    padding: 0px;
  }
    
    div.item-page div div.intro div.container {
    padding: 2% 2% 10% 2%;
    padding-top: 2%;
    width: 90vw;
    background: rgba(102, 128, 153, 0.85);
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    text-align: right;
    padding-top: 10%;
    }
    #limite > div.item-page > div > div.intro > div > div > div.image{
    width: 40vw;
    height: auto;
    }
    div.flex_v{
      width:55vw;
    }
    div.flex_v div h1{
    color : white;
    font-family : 'BebasNeue';
    font-size: 5vw;
    font-weight: normal;
  }
  #limite > div.item-page > div > div.intro > div > div > div.flex_v > div > p {
    font-size: 2.5vw;
    line-height:8vh;
  }
  div.back > div > p{
    font-size: 3vh;
  }
   #limite > div.item-page > div > div.back > div{
    width: 70vw;
    padding-left:1vw;
   }
    
 #limite > div.item-page > div > div.back.a1{
  background-image: url('../images/dejavu_1500_ipad_land.jpg');
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: cover;
  background-position:  center;
}
#limite > div.item-page > div > div.back.a2{
  background-image: url('../images/dibujo_ipad_land.jpg');
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: cover;
}
#limite > div.item-page > div > div.back.a3{
  background-image: url('../images/pintura_ipad_land.jpg');
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: cover;
}
#limite > div.item-page > div > div.back.a4{
  background-image: url('../images/audio_ipad_land.jpg');
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: cover;
}

#limite > div.item-page > div > div.back.a1 > div{
  background: rgba(0, 0, 0, 0.5);
}

#limite > div.item-page > div > div.back.a3 > div{
  background: rgba(0, 0, 0, 0.3);
}
}

 /* tablets portrait*/ 
 
@media screen and (min-width:659px) and (max-width: 1366px) and (orientation:portrait){
  body {
    background-image: url('../images/langosta2_tablet_port.jpg');
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size:cover;
    min-height: 500px;
    position: relative;
    margin: 0px;
    padding: 0px;
  }
  #superior div{
   
  }
  #superior > div > ul > li{
    padding:0px;
    flex-grow:1;
    text-align:  center;
  }
  #superior > div > ul > li > a{
    font-size: 2.5vw;
  }
  div.intro div div.flex_h {
    display: flex;
    flex-direction: column;
  }
  div.item-page div div.intro div.container {
    padding: 2% 2% 0% 2%;
    padding-top: 2%;
    width: 100%;
    background: rgba(102, 128, 153, 0.85);
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    text-align: justify;
    padding-top: 10%;
    }
    #limite > div.item-page > div > div.intro > div > div > div.image{
    height: 30vh;
    align-self:center;
    margin-top: 8vh;
    width:  auto;
    }
    #limite > div.item-page > div > div.intro > div > div > div.image > img{
      width: 30vw;
    }
    div.flex_v{
      width: 100%;
    }
   div.flex_v div h1{
    color : white;
    font-family : 'BebasNeue';
    font-size:4.5vh;
    font-weight: normal;
  }
  div.flex_v > div > p {
    line-height: 5.5vh;
    font-size: 2.5vh;
    text-align:right;
  }
  #limite > div.item-page > div > div.intro > i{
    font-size:7vh;
  }
  #limite > div.item-page > div > div.back > div{
    width:100%;
    padding-left:1vw;
  }
  #limite > div.item-page > div > div.back > div > h1{
    font-size:4.5vh;
  }

  #limite > div.item-page > div > div.back > div{
    width:80vw;
    padding-left:1vw;
  }
  div.back > div > p{
    font-size: 3vh;
  }
  #limite > div.item-page > div > div.back > div > p {
    font-size: 3vw;
    line-height:4vh;
  }
  #limite > div.item-page > div > div.back.a1{
  background-image: url('../images/dejavu_1500_ipad_port.jpg');
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: cover;
  background-position:  center;
  }
  #limite > div.item-page > div > div.back.a2{
  background-image: url('../images/dibujo_ipad_port.jpg');
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: cover;
  }
  #limite > div.item-page > div > div.back.a3{
  background-image: url('../images/pintura_ipad_port.jpg');
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: cover;
  }
  #limite > div.item-page > div > div.back.a4{
  background-image: url('../images/audio_ipad_port.jpg');
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: cover;
  }

  #limite > div.item-page > div > div.back.a1 > div{
  background: rgba(0, 0, 0, 0.5);
  }

  #limite > div.item-page > div > div.back.a3 > div{
  background: rgba(0, 0, 0, 0.3);
  }
  p.center img{
  width:40vw;
  }
  
 }





 /*mobile phones portrait*/

@media screen and (max-width: 658px)and (orientation:portrait){
  #superior > div > ul{
    margin: 0px !important;
  }
  #superior > div > ul > li{
    padding:0px;
    flex-grow:1;
    text-align:  center;
  }
  #superior > div > ul > li > a{
    font-size:3.3vw;
  }
  div.intro div div.flex_h {
    display: flex;
    flex-direction: column;
  }
  div.item-page div div.intro div.container {
    width: 100%;
    background: rgba(102, 128, 153, 0.85);
    margin-left: auto;
    margin-right: auto;
    padding-top: 10%;
    }
    
    #limite > div.item-page > div > div.intro > div > div > div.image{
    height: 25vh;
    align-self:center;
    margin-top: 8vh;
    width: auto;
    }
    #limite > div.item-page > div > div.intro > div > div > div.image > img{
      width: 35vw;
    }
    div.flex_v{
      width: 100%;
    }
   div.flex_v div h1{
    color : white;
    font-family : 'BebasNeue';
    font-size:8vw;
    font-weight: normal;
  }
  div.flex_v > div > p {
    line-height: 9vw;
    font-size: 5vw; 
    text-align:right;
  }
  #limite > div.item-page > div > div.intro > i{
    font-size:2rem;
  }
  #limite > div.item-page > div > div.back > div{
    width:100%;
    padding-left:1vw;
  }
  #limite > div.item-page > div > div.back > div > h1{
    font-size:8vw;
  }

  div.back > div > p{
    font-size: 5vw;
  }
  #limite > div.item-page > div > div.back.a1{
  background-image: url('../images/dejavu_1500_mobil_port.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}
#limite > div.item-page > div > div.back.a2{
  background-image: url('../images/dibujo_mobil_port.jpg');
  background-attachment: fixed, local;
  background-repeat: no-repeat;
  background-size: cover;
}
#limite > div.item-page > div > div.back.a3{
  background-image: url('../images/pintura_mobil_port.jpg');
  background-attachment: fixed, local;
  background-repeat: no-repeat;
  background-size: cover;
}

#limite > div.item-page > div > div.back.a4{
  background-image: url('../images/audio_mobil_port.jpg');
  background-attachment: fixed, local;
  background-repeat: no-repeat;
  background-size: cover;
}

#limite > div.item-page > div > div.back.a1 > div{
  background: rgba(0, 0, 0, 0.5);
}

#limite > div.item-page > div > div.back.a3 > div{
  background: rgba(0, 0, 0, 0.3);
}
p.center img{
  width:60vw;
} 
                 /*vertical menu_burger*/
                 
  #superior > div > div > div.menu-icon3{
	width: 1.2vw !important;
	height: 0.7rem!important;
	margin-left: 2rem !important;
	}
  #off-menu_92 > div.menu-icon-cont.sm-btn-92.sm-close > div.menu-icon3{
	width: 1.8vw!important;
	height: 0vw!important;
	}
  .sm-btn-92  {
  background: url("/images/constructing_images/bars.png")!important;
  background-repeat:no-repeat!important;
  background-size: contain !important;
  }
  .sm-close {
  background: url("/images/constructing_images/bars2.png")!important;
  background-size: contain !important;
	background-position: center !important;
  }
   /* vertical menu*/ 
  #superior{
    width:100%;
  }
  .sm-parent{
  right: 0px !important;
  margin-left:  auto;
  margin-right:  0px;
  width: 38px !important;
  }
  .sm-btn-92:before {
    line-height: 3.5rem !important;
  }
  .sm-btn-92:before{
        font-size: 2.8rem !important;
  }
  #superior > div > div.sm-popup-burger{
    padding-left:20px;
  }
  .sm-btn-92{
   padding-right:10px; 
  }
  h3.sm-head{
    height:38px !important;
  }
  .sm-close{
    height: 38px !important;
  }
  body > div > div > div > div.menu-icon-cont.sm-btn-92.sm-close{
    width:3.5rem;
  }
  #off-menu_92 > h3 > span.sm-title {
    line-height: 4rem!important;
  }
}

  /*mobile phones landscape*/

@media screen and (max-width: 750px) and (orientation: landscape){
  #superior{
    position: absolute !important;
    }
    #superior div{
    width:100%;
    }
    #superior > div > ul{
    margin: 0px !important;}
    div.item-page div div.intro div.container {
    padding: 15vh 2% 10% 2%;
    width: 100%;
    background: rgba(102, 128, 153, 0.85);
    height: 100vh;
    text-align: right;
    }
    #limite > div.item-page > div > div.intro > div > div{
    }
    #limite > div.item-page > div > div.intro > div > div > div.image{
    align-self:  flex-end;
    width: 50vw;
    height: auto;
    }
    div.flex_h div.image img {
    width: auto;
    height: 100%;
}
    div#limite div.item-page {
    position: relative;
    width: 100%;
    height: 100vh;
}
    .item-page > div:nth-child(2) {
    width: 100%;
    height: 100vh;
}
    .intro{
  width: 100%;
  height: 100vh;
}
    div.flex_v{
      width:80vw;
    }
    div.flex_v div h1{
    color : white;
    font-family : 'BebasNeue';
    font-size: 5vw;
    font-weight: normal;
  }
  #limite > div.item-page > div > div.intro > div > div > div.flex_v > div > p {
    font-size: 2.5vw;
    line-height:8vh;
  }
  #limite > div.item-page > div > div.intro > i {
    font-size: 5vw;
    position: absolute;
    left: 70%;
    bottom: 5%;
    animation-name: arrow_jump;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    color: white;
  }
  div.back > div > p{
    font-size: 3vw;
  }
  #limite > div.item-page > div > div.back.a1{
  background-image: url('../images/dejavu_1500_m.jpg');
  background-attachment: fixed, local;
  background-repeat: no-repeat;
  background-size: cover;
}
#limite > div.item-page > div > div.back.a2{
  background-image: url('../images/dibujo_m.jpg');
  background-attachment: fixed, local;
  background-repeat: no-repeat;
  background-size: contain;
}
#limite > div.item-page > div > div.back.a3{
  background-image: url('../images/pintura_m.jpg');
  background-attachment: fixed, local;
  background-repeat: no-repeat;
  background-size: cover;
}

#limite > div.item-page > div > div.back.a1 > div{
  background: rgba(0, 0, 0, 0.5);
}

#limite > div.item-page > div > div.back.a3 > div{
  background: rgba(0, 0, 0, 0.3);
}

 /* vertical menu*/ 
  #superior{
    width:100%;
  }
  .sm-parent{
  right: 0px !important;
  margin-left:  auto;
  margin-right:  0px;
  width: 35px !important;
  }
  .sm-btn-92:before {
    line-height: 4rem !important;
  }
  .sm-btn-92:before{
        font-size: 2.8rem !important;
  }
  #superior > div > div.sm-popup-burger{
    padding-left:20px;
  }
  h3.sm-head{
    height:44px !important;
  }
  #superior > div > div > div.menu-icon3 {
    width: 1rem!important;
    height: 1rem!important;
  }
  .sm-btn-92:before {
    padding-right:.3rem;
    padding-top:0px!important;
    padding-bottom: 44px!important;
  }
  body > div > div > div > div.menu-icon-cont.sm-btn-92.sm-close{
    width:3.5rem;
  }
  .sm-close {
    height: 44px !important;
  }
  .sm-btn-92 {
    padding-right: 10px;
  }
  h3.sm-head{
    height: 44px !important;
  }
  #off-menu_92 > h3 > span.sm-title {
    line-height: 4rem!important;
  }
 
}


  
    /* transparencies to make text readable and backgrounds*/ 

.back.a1{
  background-image: url('../images/dejavu_1500.jpg');
  background-attachment: fixed, local;
  background-repeat: no-repeat;
  background-size:cover;
}

div.back div.container{
  width: 60vw;
  margin: auto;
  padding-top: 5%;
  padding-bottom: 5%;
  max-width:  1000px;
}

div.back.a1 div.container{
  background: rgba(0, 0, 0, 0.8);
}

.back.a2{
  background-image: url('../images/dibujo.jpg'); 
  background-attachment: fixed, local;
  background-repeat: no-repeat;
  background-size:cover;
}
div#limite div.item-page div div.back.a2 div.container{
  background: rgba(255, 255, 255, 0.8);
}
.back.a3{
  background-image: url('../images/pintura.jpg'); 
  background-attachment: fixed, local;
  background-repeat: no-repeat;
  background-size:cover;
}
.back.a4{
  background-image: url('../images/audio.jpg');
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size:cover;
}
             
#limite div.item-page div div.back.a4 div.container{
  background: rgba(0, 0, 0, 0.6);}
#limite > div.item-page > div > div.back.a3 > div{
  background: rgba(0, 0, 0, 0.6);}

#limite > div.item-page > div > div.back > div.container{
  padding-left:15px;
}



    /* code to display box and image parallel to ach other and align*/ 

.flex_h{
display: flex;
flex-direction: row;
}

div.container div.flex_h div.image {align-self: flex-end;margin: 0px;width: 50%;height: auto;text-align:  left;}

.flex_v{display: flex;flex-direction: column;padding-left: 1%;width: 50%;flex-grow:  1;}

div.flex_v div.column h1{
margin: 0px;
padding: 0px;
text-align: right;
}
div.flex_v div.column p{
margin: 0px;
padding: 0px;
}

div.flex_h div.image img {
  width: 100%;
  height: auto;
}


/* arrow animation*/ 

@keyframes arrow_jump {
    0%   {left:70%; bottom:5%;}
    50%  {bottom:0%;}
    100% {bottom:5%;}
}

div.intro i.fa.fa-arrow-down{
  font-size: 6em;position: absolute;
  left: 70%;bottom: 8%;
  animation-name: arrow_jump;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  color: white;}

/* images*/
p.center{
  text-align:center;
}