/*  IMPORT FONTS  ============================================================================= */
@font-face {
    font-family: 'din_otlight';
    src: url('fontface/dinot-light-webfont.eot');
    src: url('fontface/dinot-light-webfont.eot?#iefix') format('embedded-opentype'),
        url('fontface/dinot-light-webfont.woff') format('woff'),
        url('fontface/dinot-light-webfont.ttf') format('truetype'),
        url('fontface/dinot-light-webfont.svg#din_otlight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'dinotregular';
    src: url('fontface/dinot-webfont.eot');
    src: url('fontface/dinot-webfont.eot?#iefix') format('embedded-opentype'),
        url('fontface/dinot-webfont.woff') format('woff'),
        url('fontface/dinot-webfont.ttf') format('truetype'),
        url('fontface/dinot-webfont.svg#fontface/dinotregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'din_otbold';
    src: url('fontface/dinot-bold-webfont.eot');
    src: url('fontface/dinot-bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('fontface/dinot-bold-webfont.woff') format('woff'),
        url('fontface/dinot-bold-webfont.ttf') format('truetype'),
        url('fontface/dinot-bold-webfont.svg#din_otbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* BASIC PAGE SETUP ============================================================================= */

body{
    margin : 0 auto;
    padding: 0;
    font : 100%/1.2 'dinotregular', arial, verdana, helvetica, helve, sans-serif;
    color : #000000; 
}

.header{
    position: relative;
    z-index:2;
    width:100%;   
    padding-top:0.4em;
    padding-bottom:2em;
    background-image: url("../img/st-banda-red.png");
    background-position: bottom;
    background-repeat: repeat-x;
}

.coming{   
    margin: 0 auto;
    text-align: center;
}

.coming img{  
    max-width: 542px;
}

.coming p{  
    color:#666666;
}

img{
    width:100%;
}

h1.logo img{
    max-width:186px;
    width: 100%;
}

nav.main-nav{
    float: right;
    padding-top: 1.3em;
}

nav.main-nav ul li{ 
    float:left;
    margin-left:2em;
}

nav.main-nav ul li:first-child{ 
    margin-left:0em;
}

nav.main-nav a{
    display: block;   
    font-size: 0.9em;
    text-decoration: none;
}

nav.main-nav a:hover{
    opacity: 0.5;
}

nav.main-nav a.active{
    color:#ca0f37;
}  

.bg-base{
    position:relative;
    z-index: 0;
    margin-top:-20px;
    padding-bottom: 4em;
    background-color: #f4f4f4;    
    background-size: cover;
    background-position: center;

}

.bg-servizi{
    background-image: url("../img/st-bg-servizi.png");
}

.bg-servizi img{
    float:right;
    margin-top: 5em;
    margin-bottom:5em;
    max-width: 368px;
}

.bg-servizi .title{
    margin-top:6em;
    margin-bottom: 0.5em;
}

.bg-citta{
    background-image: url("../img/st-bg-citta.png");
}

.bg-supporto{
    background-image: url("../img/st-bg-supporto.png");
}

.whiteline{
    position: relative;
    z-index:2;
    width:100%;
    height:27px;
    margin-top: -25px;
    background-image: url("../img/st-banda-bwhite.png");
    background-position: top;
    background-repeat: repeat-x; 
}

.banner {
    display: block;
    margin:0 auto;
    color:#FFFFFF;
    text-align: center;
    position: relative;
    max-width:1137px;
    height: 332px;
    width:100%;
    padding-top: 150px;
    margin-bottom:4em;
    background-image: url("../img/st-big-img.png");
    background-repeat: no-repeat;
}

.banner a{    
    margin:0 auto;
    display: block;
    width:40%;
    color:#FFFFFF !important;
    margin-top: 2em;
    padding-top:0.5em;
    padding-bottom:0.6em;
    text-decoration: none;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    border: 2px solid #ffffff; 
}

.banner h1{
    font-size: 2em;
    font-family: 'din_otlight', arial, verdana, helvetica, helve, sans-serif;
}

.banner img{
    margin-right: 0.5em;
    width: auto;
    vertical-align: middle;
}

.soste-telefoni{
    max-width:755px;
    margin-top:6em;
}

.soste-download{
    max-width:278px;    
    margin-top:2em;
}

.stores{
    margin-top: 1em;
}

.coming{
    margin: 0 auto;
    display: block;
    width:80%;
    text-align: center;
    margin-top:10em;
    margin-bottom: 20em;
}

.coming p{
    margin-top: 1em;
}

.faq{
    padding-top: 4em;
}

.faq li{
    display: block;
    padding:1em 4em 1em 1em;
    margin-bottom: 1em;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #bababa;
}

.faq li:hover{
    cursor: pointer;
    opacity: 0.8;
}

.faq h1{
    font-family:  'din_otbold', arial, verdana, helvetica, helve, sans-serif;
    text-transform: uppercase;
    color:#2d3947;
}

.faq p{
    display: none;
    padding-top: 1em;
}

.faq h1.active{
    color:#ca0f37;    
}

#signup{
    margin:0 auto;
    width:65%;
    padding:5em 0em 10em 0em;
}

#signup label{
    font-family:  'din_otbold', arial, verdana, helvetica, helve, sans-serif;
}

.input-100{
    width:100%;
    height:3em;
    font-size: 1em;
    margin-top:0.3em;
    background-color: #ebebeb;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #bababa;
    border: none;
    text-indent: 10px;
}

.textarea-100{
    width:100%;
    height:190px;
    padding-top:10px;
    font-size: 1em;
    background-color: #ebebeb;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #bababa;
    border: none;
    text-indent: 10px;
    font-family: 'dinotregular', arial, verdana, helvetica, helve, sans-serif;
}

#consenso{
    width:auto;
    font-size: 0.8em;
}

.footer{
    display: block;
    position: relative;
    z-index: 1;
    text-align: center;
    color:#FFFFFF;   
    margin-top: -40px;
}

.footer .f-head{
    width:100%;
    height:27px;
    background-image: url("../img/st-banda-red-rev.png");
    background-position: top;
    background-repeat: repeat-x;  
}

.footer .f-body{
    background-color: #ca0f37;
    padding-top:2em;
    padding-bottom:4em;
}

.footer .ghost-menu{
    position: absolute;
    left:-9999px;
    font-size: 0em;
}


/*  HEADINGS  ============================================================================= */

h1, h2, h3, h4, h5, h6 {
    font-family:  'din_otregular', arial, verdana, helvetica, helve, sans-serif;
    font-weight: normal;
}

/* LINKS =============================================================================  */

a {
    font-size: 1em;
    color: #000000;
    -webkit-transition: all  0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

a:visited { 
    color : #000000; }

a:focus { 
    outline : thin dotted; 
    color : rgb(0,0,0); 
}

a:hover, a:active { 
    outline : 0;
    opacity: 0.7;
}

/*  GLOBAL OBJECTS ============================================================================= */

.hide{
    display: none !important; 
}

.hide-desk{
    display: none;
}

.show{
    display: block;   
}

.breaker { clear: both; }

.floatleft {
    float: left;
}

.floatright {
    float: right;
}

.width-container{
    margin: 0 auto;
    max-width: 1100px;
    padding-right: 20px;
    padding-left: 20px;
}

.width-container2{
    margin:0 auto;
    width:50%;
}

.margintop1{
    margin-top:1em;
}

.margintop2{
    margin-top:2em;
}

.margintop3{
    margin-top:3em;
}

.margintop6{
    margin-top:6em;
}

.text-center{
    text-align: center;
}

.text-pro{
    display: block;
    margin:0 auto;
    max-width:800px;   
    width:60%;
    font-family: 'din_otlight', arial, verdana, helvetica, helve, sans-serif;
    font-size:1.4em;    
    text-align: center;
    margin-top:1em;
}

.text-grey{
    color:#888888;
}

.text-small{
    font-size: 0.7em;
}

h1.title{
    display: block;
    margin:0 auto;
    font-family: 'din_otbold', arial, verdana, helvetica, helve, sans-serif;  
    font-size: 2em;
}

h2.title{
    color:#0062a1;
    font-family: 'din_otlight', arial, verdana, helvetica, helve, sans-serif;
    font-size:1.5em;    
}

.grey-subtitle{
    font-family: 'din_otbold', arial, verdana, helvetica, helve, sans-serif;
    margin-bottom: 0.5em;
    color:#999999;
}

.list-icons img{
    display: inline-block;
    max-width: 80px;
}

.list-icons h1{
    margin-bottom: 0.5em; 
    font-family: 'din_otbold', arial, verdana, helvetica, helve, sans-serif;
}

.list-icons p{
    font-size: 0.8em;
}

.bg-grey{
    padding-top:3em;
    background-color: #eaebec;
}

.news{
    margin-bottom: 4em;
}

.news a{
    display: block;
    font-size: 1em;
    color:#2d3947;
    text-decoration: none;
    margin-bottom: 1em;
}

.news h1{
    margin-top: 1em;
    font-family: 'titillium_bdbold', arial, verdana, helvetica, helve, sans-serif;
    margin-bottom: 1em;
}

.news img{
    width:100%;
}

.articles{
    margin-top:-250px;
}

.articles li{
    position: relative;
    z-index:0;
    margin: 0 auto;
    margin-bottom: 4em;
    max-width:800px;
    width:100%;
}

.articles img{
    width:100%;    
}

.articles li .bg-body{
    position: relative;
    z-index:10;
    margin: 0 auto;
    width:78%;
    padding:4%;
    margin-top:-60px;
    color:#999999;
    background-color:#FFFFFF; 
}

.articles li .art-body{
    position: relative;
    z-index:10;
    margin: 0 auto;
    width:78%;
    padding:4%;
    margin-top:-60px;
    color:#999999;
    background-color:#FFFFFF; 
}

.articles h1{
    font-family: 'titilliumlight', arial, verdana, helvetica, helve, sans-serif;
    font-size: 2.6em;    
    color:#2c3946;
    margin-bottom:0.5em;
}

.archive h1{
    font-size: 1.6em;    
}

.pager{
    text-align: center;
    padding-bottom: 2em;
}

.pager a{
    display: inline-block;
    margin-top:2em;
    font-size:0.9em;
    color: #0062a1;
    text-decoration: none;
    padding:1em;
    border: 2px solid #0062a1;    
}

.pager .active{  
    color: #FFFFFF;
    border: 2px solid #0062a1; 
    background-color: #0062a1;
}

.title-section{
    text-align: center;
    padding-top:6em;
    margin-bottom: 4em;
}

.title-section img{
    margin-top: 2em;
    max-width:55px;
}

.title-section p{
    margin: 0 auto;
    display: block;
    margin-top:1em;
    width:40%;
}

.wiredbtn{
    display: block;
    padding-top:1em;
    padding-bottom:1em;
    color:#ca0f37 !important;
    font-family: 'din_otbold', arial, verdana, helvetica, helve, sans-serif;
    font-size: 1em;
    text-align: center;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    border: 2px solid #ca0f37; 
    text-decoration: none;
}

.thx-msg{
    display: none;
    color:#009900;
    text-align: center;
    margin-top:5em;
    margin-bottom:8em;
}


textarea {
    resize: none;
}