@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

@font-face {
    font-family: "social";
    src: url(../fonts/social.otf) format("opentype");
}


@media only screen and (min-width: 704px) and (orientation: portrait){




    html, body{
      width:100vw;
      /*height:100vh;*/
      height: auto;
      display: table;
      overflow-x: hidden;
      margin:0;
      padding:0;
      overflow-y: scroll;
    }

    a{
      text-decoration: none;
      color:white;
    }
    .language a{
      color:#fff;
    }

    .main_container{
      width:100%;
      /*height:100vh;*/

      height: 100vh;
      display: table;
      overflow: hidden;
      background-color: #ddd;
      background: radial-gradient(circle, rgba(255,255,255,1) 20%, rgba(184,184,184,1) 100%);
    }

    .header-back{
      background-color: #006AD3;
      background: linear-gradient(to bottom right, rgba(32,138,243,1) 40%, rgba(17,85,151,1) 100%);
      width:100vw;
      height:50px;
      border-bottom: 2px solid white;
      -webkit-box-shadow: 0px 5px 15px 0px #000000;
      box-shadow: 0px 5px 15px 0px #000000;
      position: fixed;
      top:0;
      left:0;
      z-index:50;
    }

    .left{
      width:600px;
      height:200px;
      float:left;
      display: none;
    }


    .header_container{
      width:100vw;
      height:52px;
      overflow-x: hidden;
      overflow-y: visible;
      margin: 0 auto;
    }


    .logo{
      display:none;
      height:80px;
      width:400px;
      font-family: Raleway;
      font-weight: bold;
      font-size:50px;
      color:#fff;
      text-align: left;
      line-height:110px;
      top:30px;
      left:calc((100vw - 400px)/2);
      float:left;
      background-image: url("img/logo_bianco.png");
      background-position: center;
      background-size: contain;
      background-repeat:no-repeat;
      position: absolute;

    }

    .logo_img{
      height:80px;
      width:80px;
      float:left;
      background-image: url("../img/logo.png");
      background-position: center;
      background-size: contain;
      background-repeat:no-repeat;
      margin-right:20px;
    }

    .menu{
      display:none;
      width:600px;
      height:50px;
      margin-top:130px;
      margin-left:30px;
      font-family: Raleway;
      font-size: 20px;
      color:#fff;
      text-align: left;
    }

    .menu_mobile{
      display:block;
      width:100%;
      height: 100%;
      overflow: hidden;
    }

    .mobilebutton_inactive{
      width:28px;
      height: 28px;
      padding:5px;
      margin:5px;
      background-color: #fff;
      font-size:28px;
      text-align: center;
      line-height: 28px;
      color: #006AD3;
      border:1px solid #fff;
      border-radius: 7px;
    }

    .mobilebutton{
      width:28px;
      height: 28px;
      padding:5px;
      margin:5px;
      background-color: #006AD3;
      font-size:28px;
      text-align: center;
      line-height: 28px;
      color: #fff;
      border:1px solid #fff;
      border-radius: 7px;
    }


    .menu_tray{
        width:100vw;
        height:calc(100vh - 52px);
        position: absolute;
        left:0;
        top:calc(-100vh + 52px);
        z-index:30;
        background-color: #fff;
        background:linear-gradient(to bottom right, rgba(32,138,243,1) 40%, rgba(17,85,151,1) 100%);
        overflow: hidden;
    }

    .traycontainer{
      width:100vw;
      height:100%;
      overflow-x: hidden;
      overflow-y: scroll;
    }

    .trayelement{
      width:90vw;
      padding:0 5vw;
      height:calc(7.5vh - 2px);
      overflow: hidden;
      border-bottom:1px solid #aaa;
      border-top:1px solid #aaa;
      line-height: 10vh;
      font-family: Raleway;
      font-weight: 300;
      font-size:16px;
      color:#fff !important;
    }

    .trayelementfocused{
      width:90vw;
      padding:0 5vw;

      height:calc(7.5vh - 2px);
      overflow: hidden;
      border-bottom:1px solid #aaa;
      border-top:1px solid #aaa;
      line-height: 10vh;
      font-family: Raleway;
      font-weight: 300;
      font-size:16px;
      color:#006AD3;
      background-color: #fff;
    }


    .traysocial{

      line-height: 10vh;
      font-family: "social";
      font-size:30px;
      color:#006AD3;
      float:left;
    }

    .traysocialfocused{

      line-height: 10vh;
      font-family: "social";

      font-size:30px;
      color:#fff;
      float:left;
    }

    .menu_icon{
      width:50px;
      height:50px;
      float:left;
      margin-right:20px;

      background-position:center;
      background-repeat: no-repeat;
      background-size: contain;
    }

    .right{
      width:200px;
      height:200px;
      float:right;
      display:none;
    }

    .language{
      width:200px;
      height:30px;
      padding-top:30px;
      margin-right:30px;
      float:right;
      font-family: "Raleway";
      font-weight: regular;
      font-size:12px;
      color:#fff;
      text-align: right;
    }

    .social_icon{
      width:200px;
      height:30px;
      margin-top:78px;
      margin-right:30px;
      float:right;

      font-family: "social";
      font-size: 36px;
      color:#fff;
      text-align: right;

    }

    .search_container{
      display: none;
      width:200px;
      height:30px;
      left:calc((100vw - 202px)/2);
      border:1px solid #fff;
      top:147px;
      position:absolute;
    }

    .search_button{
      width:30px;
      height:30px;
      background-color: #fff;
      float: left;
    }

    .search_text{
      width:150px;
      height:20px;
      margin:5px 10px;
      float: left;

      font-family: "Raleway";
      font-weight: regular;
      font-size:12px;
      color:#fff;
      text-align:left;
      line-height:30px;

    }


    .container{
      /*width:calc(100vw - 40px);
      height:calc(100vh - 50px);*/
      /*overflow-y: hidden;*/
      width:calc(100% - 20px) !important;
      height:auto;
      display: table;
      overflow-x: hidden;
      /*margin: 0 10px;*/
      /*position: absolute;
      top:0;
      left:0;*/

    }

    .mask{
      /*width:calc(100vw - 40px);
      height:calc(100vh - 50px);*/
      width:calc(100% - 20px) !important;
      overflow-y: scroll;
      overflow-x: hidden;
      margin: 0 10px;
      margin-bottom: 5px;
      margin-top:65px;
      display:block;
      /*position: fixed;*/
      /*top:65px;*/
      /*left:35px;*/
      height:auto;/*calc(100vh - 100px) ;*/
      display: table;
    }

    .pallini_container{
      display: none;
    }

    .pallini_container_oriz{
      width:20px;
      margin:5px;
      margin-top:45px;
      height:calc(100vh - 50px);
      position:fixed;
      display: none;
    }

    .pallino{
      margin:12px 17px 0 0;
      width:16px;
      height:16px;
      border-radius: 9px;
      background: transparent;
      border:1px solid #006AD3;
      float: left;
    }

    .pallino.active{
      margin:12px 18px 0 0;
      width:18px;
      height:18px;
      border-radius: 9px;
      background: linear-gradient(to bottom right, rgba(32,138,243,1) 40%, rgba(17,85,151,1) 100%);
      float: left;
    }


    .cage{
      /*width:calc(100vw - 45px - 11px);
      height:calc(100vh - 75px - 11px);*/
      width:calc(100%);
      height: auto;
      display: table;
      /*padding:5px;*/

      /*background: linear-gradient(to bottom right, rgba(255,255,255,1) 20%, rgba(184,184,184,1) 100%);*/

      border-radius: 7px;
      /*border: 1px solid #aaa;*/
      /*box-shadow: 5px 5px 15px 5px #000000;*/

      float: left;
      margin-bottom:30px;
    }


    .special_cage{
      /*width:calc(100vw - 45px - 11px);
      height:calc(100vh - 75px - 11px);*/
      width:calc(100%);
      height: auto;
      display: table;
      margin:0 auto;
      /*padding:5px;*/
      margin-left:10px;
      /*background: linear-gradient(to bottom right, rgba(255,255,255,1) 20%, rgba(184,184,184,1) 100%);*/

      border-radius: 7px;
      /*border: 1px solid #aaa;*/
      /*box-shadow: 5px 5px 15px 5px #000000;*/

      float: left;
      margin-bottom:10px;
    }


    .scheda{
      width:calc(100% - 2px);
      height:auto;
      display: table;
      border:1px solid #006AD3;
      margin-left:0px;

      margin-bottom: 20px;
      float: left;
      background-color: #fff;
      border-radius: 7px;
    }

    .scheda_pic{
      width:calc(50% - 22px);
      /*height:200px;*/
      /*padding-bottom: calc(50% - 22px);*/
      display: table;
      border:1px solid #aaa;
      /*margin-left:0px;
      margin-right: 10px;
      margin-bottom: 10px;*/
      margin: 10px;
      float: left;
      background-color: #fff;
      border-radius: 7px;
    }



    .scheda_normale, .scheda_grande, .scheda_lunga, .scheda_lunghissima, .scheda_grandissima{
      width:calc(50% - 20px);
      height:400px;
    /*  border:1px solid #aaa;*/
      margin-left:0px;
      margin-right: 20px;
      margin-bottom: 10px;
      float: left;
      background-color: #fff;
      border-radius:7px;
    }


    .scheda_normale{
      width:calc(50% - 20px);
      height:195px;
    /*  border:1px solid #aaa;*/
      margin-left:0px;
      margin-right: 20px;
      margin-bottom: 10px;
      float: left;
      background-color: #fff;
      border-radius:7px;
    }


    .scheda_grandissima{
      width:calc(100% - 20px);
      height:400px;
    /*  border:1px solid #aaa;*/
      margin-left:0px;
      margin-right: 20px;
      margin-bottom: 10px;
      float: left;
      background-color: #fff;
      border-radius:7px;
    }


    .scheda_grande{
      width:calc(100% - 20px);
      height:200px;
    /*  border:1px solid #aaa;*/
      margin-left:0px;
      margin-right: 20px;
      margin-bottom: 10px;
      float: left;
      background-color: #fff;
      border-radius:7px;
    }



    .img_scheda{
      width:calc(100% - 22px);
      height:380px;
      border:1px solid #aaa;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      margin:10px;
      border-radius: 7px;
      float: left;
    }

    .img_scheda_pic{
      width:calc(100% - 22px);
      /*height:0px;/*180px;*/
      height:0%;
      padding-bottom:calc(100% - 22px);
      border:1px solid #aaa;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      margin:10px;
      border-radius: 7px;
      float: left;
      display: table;

    }



    .img_scheda_normale, .img_scheda_grande, .img_scheda_grandissima, .img_scheda_lunga, .img_scheda_lunghissima{
      width:100%;
      height:100%;
      /*border:1px solid #aaa;*/
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      /*margin:10px;*/
      border-radius:7px;
      float: left;
    }




    .txt_scheda{
      width:calc(100vw - 40px);
      height:180px;
      margin:10px;
      float: left;
      font-family: Raleway;
      color:#000;
      font-size: 14px;
      text-align: left;
    }
    .solo_txt_scheda{
      width:calc(100vw - 22px - 20px);
      height:142px;
      float: left;
      overflow: hidden;
    }



    .txt_scheda_presentazione{
      width:calc(100% - 10px);

      margin:0 5px;
      float: left;
      font-family: Raleway;
      color:#000;
      font-size: 14px;
      text-align: left;
      height:auto;
      display:table;
    }

    .txt_scheda_presentazione_art{
      width:calc(100% - 12px);
      margin:0 6px;
      float: left;
      font-family: Raleway;
      color:#000;
      font-size: 14px;
      text-align: left;
      height:auto;
      display:table;
    }



    .solo_txt_scheda_presentazione{
      width:calc(100%);
      height:auto;
      display:table;
      float: left;
    }

    .solo_txt_scheda_presentazione_art{
      width:calc(100%);
      height:auto;
      display:table;
      float: left;
    }


    .solo_btn_scheda{
      /*width:calc(100vw - 22px - 20px);*/
      height:24px;
      float: left;
    }


    .solo_btn_scheda_presentazione{
      width:calc(100% - 12px);
      height:24px;
      float: left;
    }

    .share_title .solo_btn_scheda{
      /*width:calc(150px);*/
      height:24px;
      float: right;
    }

    .button_read, .button_section{

      height:auto;
      padding:2px;
      border-radius: 7px;
      background:  linear-gradient(to bottom right, rgba(32,138,243,1) 40%, rgba(17,85,151,1) 100%);
      border:1px solid #fff;
      color:#fff;
      font-family: Raleway;
      line-height: 20px;
      text-align: center;
      text-transform: lowercase;
      font-size: 14px;
    }

    .button_read:hover, .button_section:hover{

      height:auto;
      padding:2px;
      border-radius: 7px;
      background: #fff;
      border:1px solid #006AD3;
      color:#006AD3;
      font-family: Raleway;
      line-height: 20px;
      text-align: center;
    }



    .button_graf{
      float: left;
      height:20px;
      padding:2px;
      border-radius: 7px;
      background-color: #006AD3;
      border:1px solid #fff;
      color:#fff;
      font-family: Raleway;
      line-height: 20px;
      text-align: center;
      text-transform: lowercase;
      font-size: 20px;
      width:20%;
      margin-right: 5%;
    }



    .button_graf:hover{
  float: left;
      height:20px;
      padding:2px;
      border-radius: 7px;
      background-color: #fff;
      border:1px solid #006AD3;
      color:#006AD3;
      font-family: Raleway;
      line-height: 20px;
      text-align: center;
      text-transform: lowercase;
      font-size: 20px;
      width:20%;
      margin-right: 5%;
    }


    .button_section{
      width:100px;
      height:20px;
      padding:2px;
      border-radius: 7px;
      background-color: #006AD3;
      border:1px solid #fff;
      color:#fff;
      font-family: Raleway;
      line-height: 20px;
      text-align: center;
      text-transform: lowercase;
      font-size: 14px;
    }

    .button_section:hover{
      width:100px;
      height:20px;
      padding:2px;
      border-radius: 7px;
      background-color: #fff;
      border:1px solid #006AD3;
      color:#006AD3;
      font-family: Raleway;
      line-height: 20px;
      text-align: center;
    }


    .presentazione{
      width:calc(100% - 2px);
      height:auto;
      display: table;
      background-color: #fff;
      border:1px solid #aaa;
    }

    .scheda_presentazione{
      width:calc(100% - 2px);

      height:auto;
      display: table;
      border:1px solid #aaa;
      margin:0px auto;

      margin-bottom: 10px;

      background-color: #fff;
      border-radius: 7px;
    }

    #scheda_generale{
      height:200px;
    }



    .presentazione_long{
      width:calc(100% - 2px);
      height:auto;
      display: table;
      background-color: #fff;
      border:1px solid #aaa;
      border-radius: 7px;
    }

    .img_presentazione, .grafici_presentazione{
      width:calc(90% - 2px);
      height:400px;
      border-radius: 7px;
      margin:5%;
      float: left;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      background-color: #ddd;
      border:1px solid #aaa;
      font-family: Raleway;
      font-size: 14px;
      color:#000;
      line-height: 25px;
      text-align: center;
    }


    .grafici_presentazione{
      display: table;
      height:auto !important;
      padding:20px 0 ;
    }

    .grafici_presentazione div{
      display: table;

    }

    .palette, .shadow_misurino{
      height:98px !important;
    }


    .img_scheda_presentazione{
      width:calc(100% - 12px);
      height:200px;
      border-radius: 7px;
      margin:5px;
      float: left;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-color: #ddd;
      border:1px solid #aaa;
      font-family: Raleway;
      font-size: 14px;
      color:#000;
      line-height: 25px;
      text-align: center;
    }

    .img_scheda_tiny{
      width:calc(100%);
      height:calc(115px);
      border-radius: 7px;
      float: left;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-color: #ddd;
      border:1px solid #aaa;
      font-family: Raleway;
      font-size: 14px;
      color:#000;
      line-height: 25px;
      text-align: center;
    }


    .grafix_container{
      width:calc(100% - 10px);
      height:auto;
      display: table;
      margin: 5px ;
      float:right;
    }

    .search_presentazione{
      width:calc(90%);
      height:0%;
      padding-bottom: 65%;
      margin:5%;
      float: left;
      background-position: center;

      background-repeat: no-repeat;
      background-image: url('../img/search_white.png');
      background-size: 50%;
      opacity:0.0;
    }

    .text_block_presentazione{
      width:90%;
      height:auto;
      display:table;
      margin:5%;

      float: left;
    }

    .solo_text_presentazione{
      width:100%;
      height:auto;
      display: table;
      font-family: Raleway;
      font-size: 14px;
      color:#000;

    }

    .solo_key_presentazione{
      width:100%;
      height:auto;
      display: table;
    }

    .keyword{
      font-family: Raleway;
      font-size: 14px;
      color:#fff;
      padding:5px;
      border-radius: 7px;
      background-color: #006AD3;
      float: left;
      margin:5px;
    }


    .graf_cont{
      font-family: Raleway;
      font-size: 14px;
      color:#000;
      text-align: left;
      padding:0px;
      width:auto;
      height:100%;
      border:0;
      display: table;
    }


    .palette{
      width:calc(18% - 2px);
      margin: 5% 1% 0 1%;
      height:98px;
      float: left;
      font-family: Raleway;
      font-size: 14px;
      color:#000;
      line-height: 25px;
      text-align: center;
      border:1px solid #000;
    }



      .palette_num{
        width:calc(18% - 2px);
        border: 1px solid #000;
        margin: 5% 1% 0 1%;
        float: left;
        font-family: Raleway;
        font-size: 14px;
        color:#000;
        line-height: 25px;
        text-align: center;
        height:50px;
        margin-top:10px;
      }


    .campioni{
      width:23px;
      margin: 5px;
      height:23px;
      float: left;
      font-family: Raleway;
      font-size: 14px;
      color:#000;
      line-height: 25px;
      text-align: center;
      border:1px solid #000;
    }


      .percentuale{
        width:17px;
        margin: 3px;
        height:17px;
        float: left;
        font-family: Raleway;
        font-size: 14px;
        color:#000;
        line-height: 25px;
        text-align: center;
        max-width: calc(100% - 6px);
      }

      .misurino{
        width:calc(100% - 2px);
        border:1px solid #000;
        height:23px;
        margin:5px 0 10px 0;
      }


       .videoenclosure{
         width:560px;
         height:315px;
         margin:0 auto;
         margin-top:10px;
         margin-bottom:10px;
       }


       .shadow_misurino{
         width:calc(18% - 2px);
         margin: 5% 1% 0 1%;
         height:98px;
         float: left;
         font-family: Raleway;
         font-size: 14px;
         color:#000;
         line-height: 25px;
         text-align: center;
         border:1px solid #000;
       }


       .shadow_percent{
         width:calc(100%);
         margin: 0px;
         /*max-height:94px;*/
         float: left;
         font-family: Raleway;
         font-size: 14px;
         color:#000;
         line-height: 25px;
         text-align: center;
         border-top:1px solid #000;
       }

       .shadow_num{
         width:calc(18% - 2px);
         margin: 5% 1% 0 1%;
         height:30px;
         float: left;
         font-family: Raleway;
         font-size: 14px;
         color:#000;
         line-height: 25px;
         text-align: center;
         border:1px solid #000;
       }





       .share{
         width:calc(100vw - 22px);
         height:auto;
         background-color: #fff;
         border:1px solid #aaa;
         margin-top:10px;
       }

       .title{
         width:calc(100% - 2px);
         height:auto;
         background-color: #006AD3;
         background: linear-gradient(to bottom right, rgba(32,138,243,1) 40%, rgba(17,85,151,1) 100%);
         border:1px solid #aaa;
         border-radius: 7px;
         margin:0 auto;
       }


         .title_scheda{
           width:calc(100% - 2px);
           height:auto;
           background-color: #006AD3;
           background: linear-gradient(to bottom right, rgba(32,138,243,1) 40%, rgba(17,85,151,1) 100%);
           border-radius: 7px;
           border:1px solid #aaa;

         }

       .text{
         width:calc(100% - 2px);
         height:auto;
         background-color: #fff;
         border:1px solid #aaa;
         border-radius: 7px;
         marghin:0 auto;
         margin-bottom:5px;

       }

       .text_scheda{
         width:calc(100% - 2px);
         height:auto;
         background-color: #fff;
         border:1px solid #aaa;

       }


       .scheda_tuttapagina{
         width:calc(100% - 5px);
         height:0;
         background-color: #fff;
         border:1px solid #aaa;
         padding-bottom:75%;
         border-radius:7px;
       }

       .img_scheda_tuttapagina{
         width:calc(100% - 10px);
         height:0px;
         background-color: #fff;
         padding-bottom:calc(75% - 10px);
         border-radius:7px;
         background-repeat:no-repeat;
         background-position: center;
         margin:5px;
       }

       .share_buttons{
         font-family: "social";
         font-size: 24px;
         color:#006AD3;
         text-align: right;
         padding:5px;
         width:calc(100% - 10px);
       }

       .share_title{
         font-family: Raleway;
         font-weight: 400;
         font-size: 20px;
         color:#fff;
         text-align: left;
         padding:5px;
         width:calc(100% - 10px);
           text-transform: uppercase;
           display:table;
       }

       .title_text{
         font-family: Raleway;
         font-size: 18px;
         color:#000;
         text-align: left;
         padding:5px;
         width:calc(100% - 10px);
       }



  }