/*
'===========================================================
'  NAME:    Foglio di stile
'  VERSION: 0.1
'  DATE:    25/09/2017
'  AUTHOR:  Luca Maroglio
'  NOTE:    DettoForte - 2017
'===========================================================
*/

body {
   text-align: center;
   padding:0 16px;
}
.DF_Background {
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background: url(immagini/background.jpg) no-repeat center top;
   b---ackground: url(sfondi/bg8-lavagna.jpg) no-repeat center top;
   position: fixed;
   z-index: -1;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

.DF_Megafono {
   width: 180px;
   height: 180px;
   bottom: 20px;
   left: 20px;
   background: url(immagini/Logo.png) no-repeat center top;
   position: fixed;
   z-index: -1;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

.DF_HomeBox {
   display:inline-block;
   width:900px;
}

.DF_Logo {
   width: 260px;
   height: 72px;
   background: url(immagini/LogoPlainBianco.png) no-repeat center top;
   z-index: -1;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

.DF_Title{
   display: inline-block;
   text-align: left;
   width:868px;
   height: 28px;
   padding:16px;
   font-family: sans-serif;
   font-weight: 100;
   font-size:18pt;
   color:#575757;
   cursor:default;
   
   background: rgba(224, 224, 224, 0.89);
   border: none;
   border-bottom: 1px solid #c3c3c3;
   outline: none;
}
.DF_Config {   
   float:right;
   cursor: pointer;
}
.DF_Config:hover {   
   color:rgba(115, 2, 23, 1)
}

.DF_TextInput{
   display: inline-block;
   width:900px;
   padding:16px;
   font-family: sans-serif;
   font-weight: 100;
   font-size:16pt;
   color:#6a6a6a;
   
   background: rgba(246, 246, 246, 0.89);
   border: none;
   outline: none;
}
#DF_LinkWeb{
   font-size:14pt;
   padding:8px 16px;
   height: 48px;
   border-bottom: 1px solid #c3c3c3;
}
#DF_TextArea{
   position:relative;
   top:-1px;
   height: 312px;
}

.DF_Submit{
   display: inline-block;
   position:relative;
   top:-2px;
   width:900px;
   height: 60px;
   line-height: 60px;
   font-family: sans-serif;
   font-size:18pt;
   color:white;
   cursor:pointer;

   background: rgba(203, 10, 45, 0.83);
   border: none;
   outline: none;
}
.DF_Submit:hover {
   background: rgba(111, 10, 28, 0.68);
   background: rgba(130, 20, 40, 0.91);
}

.DF_AudioPlayer {
   display: none;
   width: 900px;
}
.DF_AudioControls {
   display: inline-block;
   display: none;

   position:relative;
   top:-2px;
   width:900px;
   height: 60px;
   line-height: 60px;
   font-family: sans-serif;
   font-size:18pt;
   color:white;
   cursor:pointer;

   background: rgba(203, 10, 45, 0.83);
   border: none;
   border-top: 1px solid rgba(158, 158, 158, 0.46);
   outline: none;  
}
.DF_AudioButton {
   display: inline-block;
   margin: 0;
   width:299px;
   border-left:1px solid white;
}
.DF_AudioButton_First {
   width:300px;
   border-left:0px;
}
.DF_AudioButton:hover {
   background: rgba(111, 10, 28, 0.68);
}
#DF_AudioPlay {
   color:#754d55;
}





#DF_BoxSettings_Fog{
   display: none;
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background-color: #505050;
   background-color: #cbcbcb;
   z-index: 999;
   opacity: 0.30;
   filter: alpha(opacity=30);
}
#DF_BoxSettings{
   display:none;
   position:relative;
   background-color: rgba(115, 2, 23, 0.9);
   font-family: sans-serif;
   color:#FFFFFF;
   top:-420px;
   width:330px;
   margin:0 250px;
   height:200px;
   padding:10px;
   border:1px solid #000000;   
   z-index: 1000;
}
.DF_Box_Title{
   display:inline-block;
   margin:10px 0 20px 0;
   font-size:18pt;
}
.DF_Box_Row{
   margin:10px 0;
}
.DF_Box_Row div{
   display:inline-block;
   width:70px;
   text-align:left;
}
.DF_Box_Row select{
   width:120px;
}



/* MOBILE */

/*   @media (max-width: 1247px) and (orientation: landscape) { */
   @media (max-width: 1247px) {
      /* iPad LandScape */
      .DF_Megafono {
         width: 160px;
         height: 160px;
         bottom: 6px;
         left: 2px;
      }
      .DF_HomeBox {
         width:850px;
      }
      .DF_Logo {
         width: 200px;
         height: 55px;
      }
      .DF_Title{
         width:818px;
         height: 24px;
         font-weight: 500;
         font-size:16pt;
      }
      .DF_TextInput{
         width:850px;
      }
      #DF_TextArea{
         height: 245px;
      }
      .DF_Submit{
         width:850px;
      }
      .DF_AudioPlayer{
         width:850px;
      }

      .DF_AudioControls {
         width:850px;
      }
      .DF_AudioButton_First {
         width:282px;
      }
      .DF_AudioButton {
         width:282px;
      }

      #DF_BoxSettings{
         top:-350px;
         width:330px;
         height:200px;
         margin:0;
      }
      
   }

/*   @media (max-width: 1023px) and (orientation: portrait) { */
   @media (max-width: 1023px) {
      /* iPad Portrait */
      .DF_Megafono {
         width: 200px;
         height: 200px;
         bottom: 16px;
         left: 16px;
      }
      .DF_HomeBox {
         width:650px;
      }
      .DF_Title{
         width:618px;
      }
      .DF_TextInput{
         width:650px;
      }
      #DF_TextArea{
         height: 405px;
      }
      .DF_Submit{
         width:650px;
      }
      .DF_AudioPlayer{
         width:650px;
      }

      .DF_AudioControls {
         width:650px;
      }
      .DF_AudioButton_First {
         width:216px;
      }
      .DF_AudioButton {
         width:216px;
      }

      #DF_BoxSettings{
         top:-510px;
         width:300px;
         height:200px;
         margin:0;
      }

   }

/*   @media (max-width: 767px) and (orientation: landscape) { */
   @media (max-width: 767px) {
      /* Android LandScape */
      .DF_Megafono {
         width: 160px;
         height: 160px;
         bottom: 6px;
         left: 2px;
      }
      .DF_HomeBox {
         width:550px;
      }
      .DF_Title{
         width:518px;
      }
      .DF_TextInput{
         width:550px;
      }
      .DF_Submit{
         width:550px;
      }
      .DF_AudioPlayer{
         width:550px;
      }

      .DF_AudioControls {
         width:550px;
      }
      .DF_AudioButton_First {
         width:183px;
      }
      .DF_AudioButton {
         width:182px;
      }

      #DF_BoxSettings{
         top:-510px;
         width:300px;
         height:200px;
         margin:0;
      }

   }


/*   @media (max-width: 597px) and (orientation: landscape) { */
   @media (max-width: 597px) {
      /* iPhone LandScape */
      .DF_Megafono {
         width: 160px;
         height: 160px;
         bottom: 6px;
         left: 2px;
      }
      .DF_HomeBox {
         width:510px;
      }
      .DF_Title{
         width:478px;
      }
      .DF_TextInput{
         width:510px;
      }
      .DF_Submit{
         width:510px;
      }
      .DF_AudioPlayer{
         width:510px;
      }

      .DF_AudioControls {
         width:510px;
      }
      .DF_AudioButton_First {
         width:170px;
      }
      .DF_AudioButton {
         width:169px;
      }

      #DF_BoxSettings{
         top:-510px;
         width:300px;
         height:200px;
         margin:0;
      }

   }

/*   @media (max-width: 567px) and (orientation: portrait) { */
   @media (max-width: 567px) {
      /* Android Portrait */
      .DF_Megafono {
         width: 160px;
         height: 160px;
         bottom: 6px;
         left: 2px;
      }
      .DF_HomeBox {
         width:320px;
      }
      .DF_Title{
         width:288px;
      }
      .DF_TextInput{
         width:320px;
      }
      #DF_LinkWeb{
         font-size:12pt;
         height: 45px;
      }
      #DF_TextArea{
         height: 215px;
      }
      .DF_Submit{
         width:320px;
      }
      .DF_AudioPlayer{
         width:320px;
      }

      .DF_AudioControls {
         width:320px;
         height: 183px;
         border-top: 0px;
      }
      .DF_AudioButton_First {
         width:320px;
         border-top: 1px solid rgba(158, 158, 158, 0.46);
      }
      .DF_AudioButton {
         width:320px;
         border-top: 1px solid rgba(158, 158, 158, 0.46);
         border-left:0px;
      }

      #DF_BoxSettings{
         top:-320px;
         width:280px;
         height:200px;
         margin:0;
      }

   }


/*   @media (max-width: 359px) and (orientation: portrait) { */
   @media (max-width: 359px) {
      /* iPhone Portrait */
      body{
         padding:16px 0 16px 0;
      }
      .DF_Megafono {
         width: 120px;
         height: 120px;
         bottom: 6px;
         left: 2px;
      }
      .DF_HomeBox {
         width:272px;
      }
      .DF_Logo {
         width: 160px;
         height: 44px;
      }
      .DF_Title{
         width:264px;
         height: 20px;
         padding:16px 4px;
         font-weight: 500;
         font-size:14pt;
      }
      .DF_TextInput{
         width:272px;
         position:relative;
         top:-1px;
      }
      #DF_TextArea{
         position:relative;
         top:-2px;
         height: 175px;
      }
      .DF_Submit{
         width:272px;
         position:relative;
         top:-3px;
      }
      .DF_AudioPlayer{
         width:272px;
         position:relative;
         top:-2px;
      }

      .DF_AudioControls {
         top:-3px;
         width:272px;
         height: 183px;
         border-top: 0px;
      }
      .DF_AudioButton_First {
         width:272px;
         border-top: 1px solid rgba(158, 158, 158, 0.46);
      }
      .DF_AudioButton {
         width:272px;
         border-top: 1px solid rgba(158, 158, 158, 0.46);
         border-left:0px;
      }

      #DF_BoxSettings{
         top:-292px;
         width:240px;
         height:186px;
         margin:0;
      }

   }