/*/////////////////////////////////////////////////////////////////////*/
/*///////////////////         FONTS              //////////////////////*/
/*/////////////////////////////////////////////////////////////////////*/

@font-face { font-family:"Gotham-Book"; src:url("typo/gothambook.eot"); src:local("Gotham-Book"), url("typo/gothambook.ttf") format("TrueType"); }
@font-face { font-family:"Gotham-Medium"; src:url("typo/gothammedium.eot"); src:local("X"), url("typo/gothammedium.ttf") format("TrueType"); }
@font-face { font-family:"Gotham-Light"; src:url("typo/gothamlight.eot"); src:local("X"), url("typo/gothamlight.ttf") format("TrueType"); }
@font-face { font-family:"Gotham-Black"; src:url("typo/gothamblack.eot"); src:local("X"), url("typo/gothamblack.ttf") format("TrueType"); }
@font-face { font-family:"Ostrich-Regular"; src:url("typo/ostrich-regular.eot"); src:local("X"), url("typo/ostrich-regular.ttf") format("TrueType"); }
    
/*/////////////////////////////////////////////////////////////////////*/
/*///////////////////         GENERIQUE          //////////////////////*/
/*/////////////////////////////////////////////////////////////////////*/

.smallBr { font-size:1em!important; height:1px!important; clear:both; }
.smallBr3 { font-size:1em!important; height:3px!important; clear:both; }
.smallBr5 { font-size:1em!important; height:5px!important; clear:both; }
.smallBr10 { font-size:1em!important; height:10px!important; clear:both; }
.smallBr15 { font-size:1em!important; height:15px!important; clear:both; }
.smallBr20 { font-size:1em!important; height:20px!important; clear:both; }
.smallBr30 { font-size:1em!important; height:30px!important; clear:both; }
.smallBr50 { font-size:1em!important; height:50px!important; clear:both; }
.smallBr60 { font-size:1em!important; height:60px!important; clear:both; }
    
#Div_Centre { margin:3em 5% 0 5%; width:90%; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
    
#DeviceSelection { padding:10px; background-color: #FFFFFF; border: 1px solid #D9D9D9; color: #656565; cursor: pointer; overflow: hidden;
                   /*
                    -moz-box-shadow: 0px 0px 15px 1px #656565; -webkit-box-shadow: 0px 0px 15px 1px #656565; -o-box-shadow: 0px 0px 15px 1px #656565; box-shadow: 0px 0px 15px 1px #656565;
                   filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=NaN, Strength=15); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; 
                    */}

#DeviceSelection .box-devselect { width:46%; margin:0 1% 0 2.5%; float:left; }
#DeviceSelection .box-devselect.hover { background-color: #F2F2F2; }
#DeviceSelection .box-devselect img { display:block; margin:1em auto; }

#DeviceSelection h1 { color:#3F3F3F; text-transform:uppercase; font-size:1.2em; display:block; width:100%; text-align:center; }
#DeviceSelection h2 { text-transform:uppercase; font-size:1em; display:block; width:100%; text-align:center; margin-bottom:0.4em; overflow:hidden; }
#DeviceSelection h2.selected {	color:#99c100; }

.btn-valider { background-color:#99c100; margin: 20px auto 0; padding: 8px; text-align: center; text-transform: uppercase; width: 35%; }
.btn-valider input[type="submit"] { background: none repeat scroll 0 0 transparent; border: medium none; color: #FFFFFF; cursor: pointer; font: 1em "Gotham-Book",Arial,Sans-Serif;
                                    padding: 0.2em 0; text-transform: uppercase; width: 100%; }
.btn-valider input {}




/***************************************************/
/********          RESPONSIVE        ***************/
/***************************************************/

/* POUR NAVIGATEUR < 480px / SONY + IPHONE-VERTICAL */
@media only screen and (max-width:479px)
 { 
    .smallBr10 { font-size:1em!important; height:0px!important; clear:both; }
    #Div_Centre { margin:1.8em 5% 0 5%; }   
    
    #DeviceSelection h1 { font-size:.7em; }
    #DeviceSelection h2 { font-size:.4em; overflow:visible; }
    
    .btn-valider { margin:10px auto 0; padding:4px; width:55%; }
    .btn-valider input[type="submit"] { font-size:.8em; }
 }

@media only screen and (max-width:2660px)
{
    html { font-size:100%; } 
    body { margin:0 auto; background:#F7F7F7; font-family:"Gotham-Book", Arial, Sans-Serif; color:#3f3f3f; margin: 0; position: relative; }
    body,div,td,p { font-size:1em/*16px;*/; }
    ol, ul, li { list-style:none; }
    ul { margin:0; padding:0; }
    h1, h2, h3, h4, h5, h6 { margin:0; padding:0; }
    img { border:none; outline:none; max-width:100%; }
    input { outline:none; }
    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
    p { line-height:1em; }
    sup { font-size:.5em; line-height: .8em; }
    table { border-collapse:collapse; }
    
    header { background-color: #FFF; padding-top: 1px; -moz-box-shadow: 0 0 8px 0 #656565; -webkit-box-shadow: 0 0 8px 0 #656565; -o-box-shadow: 0 0 8px 0 #656565; box-shadow: 0 0 8px 0 #656565; }
    header img { max-width:30%; display: block;  margin:0.75em auto 0.75em auto; }
}