/* 
    Document   : style-responsive
    Created on : November-2013
    Author     : Francesco Mussi
    Description:
        Responsive css style
*



/* ==========================================================================
    maximum size
   ========================================================================== */



@media (min-width: 2200px)  { 


#home {

    margin-bottom: 800px;
    width: 80%;
}


#map_canvas {

  margin-left: -140px;
  width:95%;
}


/* Narrazioni content */
.display-id {
padding-left: 0;
}

/* Narrazioni wrapper thumbs */
.main-content-area{

  padding-left: 0;
  padding-top: 2.5%;
  width: 45%;

}


/* Contenuto box (testo)  */
.port-box.how-service {
width: 60%;
margin-left: 5px;
}


/* Contenuto box (image)  */
.port-images{
  margin-top:20px;
  margin-right:45px;
  width:100%;
}


.closebtn {

  margin-right: 300px;
}


#fourth {

  margin-left: -200px;
  margin-top: -200px;
}


#fifth {

  margin-left: -270px;
  margin-top: -300px;
}

.canepa {

  margin-left: 100px;

}
}





/* ==========================================================================
    Very Large desktop
   ========================================================================== */


@media (min-width: 1800px) and (max-width: 2200px) { 


#home {

    margin-bottom: 600px;
    width: 80%;
}


#map_canvas {

  margin-left: -90px;
  width:95%;
}


/* Narrazioni content */
.display-id {
padding-left: 0;
}

/* Narrazioni wrapper thumbs */
.main-content-area{

  padding-left: 0;
  padding-top: 2.5%;
  width: 60%;

}

/* Contenuto box (testo)  */
.port-box.how-service {
width: 60%;
margin-left: 5px;
}


/* Contenuto box (image)  */
.port-images{
  margin-top:20px;
  margin-right:45px;
  width:100%;
}


.closebtn {

  margin-right: 300px;
}


#fourth {

  margin-left: -140px;
  margin-top: -100px;
}

#fifth {

  margin-left: -190px;
  margin-top: -300px;
}


.canepa {

  margin-left: 88px;
}

}


/* ==========================================================================
    Large desktop
   ========================================================================== */


@media (min-width: 1200px) and (max-width: 1800px) { 



#home {

    margin-bottom: 400px;
    padding-left: 10%;
}


/* Narrazioni content */
.display-id {
padding-left: 7%;
}

/* Narrazioni wrapper thumbs */
.main-content-area{

  padding-left: 9%;
  padding-top: 2.5%;

}


/*  Contenitori boxes */
#tumblelog{
  width: 810px;
}


/* Contenuto box (testo)  */
.port-box.how-service {
width: 650px;
margin-left: 5px;
}

/* Contenuto box (image)  */
.port-images{
  margin-top:20px;
  margin-right:45px;
  width:650px;
}

#map_canvas {

  margin-left: -7px;
  width:100%;
}

.canepa {

  margin-left: 180px;

}

#fourth {

  margin-top: -50px;
}


}



/* ==========================================================================
    Large desktop
   ========================================================================== */
@media (max-width: 1200px) { 

#map_canvas {

  width:100%;

  
}

#home {

    margin-bottom: 400px;
    padding-left: 10%;
}



/* Narrazioni main title */
.section-title {     

    font-size: 2.4em;
}

/* Narrazioni content */
.display-id {
padding-left: 0px;
}


/* Narrazioni wrapper thumbs */
.main-content-area{

  padding-left: 5%;
  padding-top: 2.5%;

}


/*  Contenitori boxes */
#tumblelog{
  width: 750px;
}


/* Contenuto box (testo)  */
.port-box.how-service {
width: 600px;
margin-left: 5px;
}


/* Contenuto box (image)  */
.port-images{
  margin-top:20px;
  margin-right:45px;
  width: 600px;
}

#second {

  margin-right: -49px;
}


.canepa {

  margin-left: 166px;

}



}


/* ==========================================================================
    Middle size desktop
   ========================================================================== */

@media (max-width: 979px){

   
.col-lg-10 {

  /* background: red;*/
   width:95%;
}






}



/* ==========================================================================
    Portrait tablet to landscape and desktop
   ========================================================================== */

@media (min-width: 797px) and (max-width: 979px) { 





/* #menu is the original menu */
.navigation {
    display:none;
}

.slicknav_menu {
    display:block;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1;
    /*opacity: 0.1;*/

}



.the2boxes {

  
}

.box1Inizio {

   width: 45%;
   margin: 5px auto;
   margin-right: 5%;
}


.box2Inizio {

   width: 45%;
   margin: 5px auto;
}


#home {

    margin-bottom: 400px;
    padding-left: 5%;
}


/* Narrazioni wrapper thumbs */
.main-content-area {   

  padding-left: 2%;
  padding-top: 7%;
  width:90%;
}

/* Narrazioni main title */
.section-title {     

    font-size: 2.5em;
}


/* Narrazioni content */

.display-id {
padding-left: 0px!important;
}


/* Contenuto box (testo)  */
.port-box.how-service {
width: 600px;
margin-left: 5px;
}

#second {

  margin-right: 0px;
}


.fourthContent {

  padding-left: 3%;
  
}





}




/* ==========================================================================
    Landscape phone to portrait tablet
   ========================================================================== */

@media (max-width: 797px) { 





/* #menu is the original menu */
.navigation {
    display:none;
}

.slicknav_menu {
    display:block;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1;

}

#home {

    margin-bottom: 400px;
    padding-left: 3%;
}

#home h1 {

    font-size: 2.3em;
    margin-top: 50px;
}


.the2boxes {

   margin-top: 14%;
   margin-right:5%;
}

.box1Inizio {

   width: 100%;
   margin: 5px auto;
}


.box2Inizio {

   width: 100%;
   margin: 5px auto;
}


#map_canvas {

  margin-left: -21px;
  width:100%;
}




/* Narrazioni wrapper thumbs */
.main-content-area {   

  padding-left: 7%;
  padding-top: 7%;
  
}

/* Narrazioni main title */
.section-title {     

    font-size: 1.9em;
}

/* Container for thumbs */
#tumblelog{
  width: 500px;

}

/* Contenuto box (testo)  */
.port-box.how-service {
width: 460px;
margin-left: 0px;
}


/* Contenuto box (image)  */
.port-images{
  margin-top:20px;
  margin-right:45px;
  width: 460px;
}


/* Second div - for phone menu padding  */
#second {

  padding-top: 60px;
}

/* third div - for phone menu padding  */
#third {

  padding-top: 60px;
  padding-left: 0;

}

#fourth {

  margin-top: 300px;

}



.fourthContent {

  padding-left: 7%;
  
}



.pressImage {

  width:450px;
}


.canepa {

  margin-left: 126px;

}



}




/* ==========================================================================
    Middle way between Phone and Tablet
   ========================================================================== */

@media (min-width: 430px) and (max-width: 550px) { 


/* Contenuto box (testo)  */
.port-box.how-service {
width: 370px!important;
margin-left: 0px;
}


/* Contenuto box (image)  */
.port-images{
  margin-top:20px;
  margin-right:45px;
  width: 370px!important;
}

.pressImage {

  width:350px!important;
}


/* Titolo Il sentimento dell'acqua da lago a lago */
.section-title {

font-size: 1.2em;

}

.canepa {

  margin-left: 100px;

}

   

}



/* ==========================================================================
    Landscape PHONES and down
   ========================================================================== */

@media (max-width: 550px) { 




.navigation {
    display:none;
}



.col-xs-9 {

    width:100%;
}


.section  {

    padding-left: 0;

}

#home  {

    padding-left: 0;
}


#home h1 {

    font-size: 1.9em;
    margin-top: 50px;
}


.the2boxes {

   margin-top: 14%;
   margin-right:5%;
}

.box1Inizio {

   width: 100%;
   margin: 5px auto;
}


.box2Inizio {

   width: 100%;
   margin: 5px auto;
}


#map_canvas {

  width:100%;
  margin-left: -19px;
}





/*  Contenitori boxes */
#tumblelog{
  width: 110px;
}


/* Narrazioni wrapper thumbs */
.main-content-area {   

  padding-left: 0%;
  padding-top: 7%;
  
}

/* Titolo Il sentimento dell'acqua da lago a lago */
.section-title {

font-size: 1.8em;

}
/* Contenuto box (testo)  */
.port-box.how-service {
width: 260px;
margin-left: 0px;
}


/* Contenuto box (image)  */
.port-images{
  margin-top:20px;
  margin-right:45px;
  width: 240px;
}

/* Second div - for phone menu padding  */
#second {

  padding-top: 60px;
}

/* third div - for phone menu padding  */
#third {

  padding-top: 60px;
}

#fourth {

  margin-top: 2200px;
}



/* PressPage */
.pressImage {

  width:250px;
}

.pressTitle {

  margin-bottom: 50px;
  
}



@media (max-width: 470px) { 

/* Titolo Il sentimento dell'acqua da lago a lago */
.section-title {

font-size: 1.2em;

}

}