@font-face {
    font-family: 'HelveticaNeueLight';
    src: url('../font/helveticaneue/HelveticaNeue Light.ttf');
}
@font-face {
    font-family: 'HelveticaNeueItalic';
    src: url('../font/helveticaneue/HelveticaNeue Italic.ttf');
}
@font-face {
    font-family: 'avenir';
    src: url('../font/avenir/AvenirNextLTPro-UltLtCn.otf');
}
/********************************************/
/**               MAIN CSS                 **/
/********************************************/
html, body {
    min-height: 100%;
}

body {
    font-size:  16px;
    text-align: center;
    font-family:  'Avenir', sans-serif;
    background: #163865 url('blue-background.svg');
    background-size: cover;
}
.container-fluid {
    width: 100%;
    max-width: 414px;
    padding-right: 0px;
    padding-left: 0;
}
#views {
    width: 100%;
    height: 458px;
    background-color: #f2f2f2;
}
/**************************/
/**       LOGO           **/
/**************************/
#logo {
    display: inline-block;
    max-width: 200px;
    margin: 40px;
}
.section-logo {
    height: 320px;
    background-color: #244863;
}
.logocloudifi {
    width: 33%;
}
/**************************/
/**       BG IMG         **/
/**************************/
#main-bg img {
    padding: 5%;
}
.logo-cloud {
    width: 100%;
    height: 99px;
    padding: 2%;

}
/**************************/
/**   SECTION TEXTE      **/
/**************************/
.section-text {
    position: relative;
    display: block;
    height: 220px;
    /*border: 1px solid red;*/
}
#title {
    line-height: 25px;
}

.mainTitle {
    height: 100%;
    text-align: center;    
    width: 100%;
    color: white;
    padding: 12%;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.mainText {
    margin-top: 15%;
}
/**************************/
/**    block mail & sms  **/
/**************************/
.section-icon {
    background-color: #f2f2f2;
    height: 184px;
}
.section-mail {
    padding: 11%;
}
.block-mail {
    margin-top: 25%;
}
#email span {
    margin-bottom: 25px;
    margin-right: 25px;
}
#email{
    width: 60px;
    max-height: 18px;
    margin-top: 11px;
    margin-bottom: 5px;
    font-family: 'Avenir', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
}
#email-icn{
    width: 30px;
    /*max-height: 25px;
    margin-top: 22px;
    margin-bottom: -2px;
    margin-left: 0px;
    border-radius: 0px;*/
}
#sms {
    max-width: 32px;
    max-height: 29px;
    margin-top: 27px;
    margin-bottom: 5px;
}
#sms-block {
    margin-top: -7px;
}
/*#mail-block, #sms-block {
    padding-top: 5px;
    height: 90px;
}*/

/**************************/
/**  Block social Icon   **/
/**************************/
#block-icon1 {
    background-color: #f2f2f2;
    height: 100px;
    padding: 7%;
}
#block-icon2 {
    background-color: #f2f2f2;
    height: 100px;
    padding: 6%;
}
.icon-content {
    background-color:  #f2f2f2;
    height: 90px;
    padding-left: 5px;
    padding-right: 5px;
}

.social-icn  {
 
}
.img-responsive {
    margin: 0 auto;
}
#fb, #gg, #tt, #ld {
    width: 25px;
    height: 25px;
    margin-left: 5px;
}
.social-text {
    font-size: 15px;
    font-family: 'Avenir', sans-serif;
    color: #244863;
}
a:hover {
    text-decoration: none !important;
}
.social-text-mail {
    font-size: 13px;
    /*font-family: HelveticaNeueLight, sans-serif;*/
    color: #244863;
}
.social-text-mail a:hover {
    text-decoration: none;
}
/**************************/
/**       LINE           **/
/**************************/
#line{
  margin-top: -23px;
}
#line img{
    width: 270px;
    text-align: center;
    margin-top: 20px;
}
/**************************/
/**       LANGUE         **/
/**************************/
#changeLangue {
    width: 100%;
    height: 45px;
    background-color: white;
    line-height: 45px;
    /*font-family: HelveticaNeueLight, sans-serif;*/
    font-size: 12px;
}
#lang-select {
    color: #747474;
}
#linkLangue {
    color: black;
    text-decoration: underline;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    font-family: 'Avenir', sans-serif;
}
#linkLangue:focus, #linkLangue:active, #linkLangue.active, #linkLangue:focus:active{
    color: black;
    outline: none !important;
    text-decoration: underline;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
/********************************************/
/**      EMAIL ACCESS CSS                  **/
/********************************************/
textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable-    input:focus {
    border-color: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    outline: -webkit-focus-ring-color auto 5px;
}
#email-header {
    border-bottom: 1px solid #f2f2f2;
    text-transform: uppercase;
}
#email-title, #back-btn {
    height: 64px;
    line-height: 64px;
}
#back-btn img {
    margin-left: -20px;
    width: 46px;
}
#email-title {
    font-family: 'Avenir', sans-serif;
}
.form-group {
    text-align: left;
    margin: 18px;
}
input[type="email"], input[type="text"] {
    width: 100%;
    height: 35px;
    border: 1px solid #dcd8d8;;
    font-size: 20px;
    padding-left: 5px;
    font-weight: 300 !important;
}

input, textarea, select { -webkit-appearance: none; border-radius: 0; -webkit-border-radius:0; }
* { -webkit-tap-highlight-color:transparent; }
/*// div, a, section, article, span, img, h1, h2, h3, h4, h5 ,h6 { -webkit-user-select:none; -moz-user-select:none; }*/


label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 300 !important;
}
input[type="checkbox"] {
    width: 25px;
    height: 25px;
    border-raidus: 0;
}
input[type="button"] {
    width: 100%;
    height: 40px;
    background-color: #244863;
    color: white;
    margin-top: 27px;
    border: 1px solid #244863;
    text-transform: uppercase;
    font-family: 'Avenir', sans-serif;
    letter-spacing: 2px;
    font-weight: 100;
}
#firstname, #lastname {
    margin-top: 21px;
    font-family: 'Avenir', sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
}
#checkbox {
    margin-top: 27px;
}

form {
    text-transform: uppercase;
}
#error-message {
    color: red;
}
.option{
    text-transform: capitalize;
    /*//font-style: italic;*/
    color: #747474;
    font-family: 'Avenir';
    font-size: 10px;
    letter-spacing: 1px;
}
/********************************************/
/**     LAngue MODAL                       **/
/********************************************/
ul {
    list-style: none;
    cursor: pointer;
    margin-left: -40px;
}
li:hover {
    background-color: rgba(128, 128, 128, 0.23);

}
.langueSelect {
    height: 30px;
    line-height: 30px;
    font-family: 'Avenir', sans-serif;
    font-size: 13px;
}
hr {
    margin-top: 9px;
    margin-bottom: 9px;
    border: 0;
    border-top: 1px solid #eee;
    width: 5%;
}

/********************************************/
/**      SMS   ACCESS CSS                  **/
/********************************************/
#mobile {
    margin-top: 25px;
}

#username {
    margin-top: 23px;
}
#password {
    margin-top: 20px;
}
#textlogin {
    width: 280px;
    margin-top: 90px;
    position: absolute;
    border: 1px solid black;
    font-size: 11px;
    margin-left: 18px;
    background-color: #f2f2f2;
}
#login-group {
    margin-top: 155px;
}
/********************************************/
/**     Modal css                          **/
/********************************************/
.modal {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}
.modal-content {
    border-radius: 0px;
    margin-top: 10%;
}
.modal-cgu {
    margin-top: 25%;
}
#TXT_AUP {
    color: black;
}
#tou {
    color: black;
    text-decoration: underline;
    cursor: pointer;
}
.btn-color {
    background-color: #244863;
    color: white;
    font-size: 11px;
    font-family: 'Avenir', sans-serif;
}
.btn-color:hover {
    background-color: #fdb946;
    color: white;
    text-decoration: none;
}
.modal-body {
    position: relative;
    padding: 7px;
    font-size: 11px;
    text-transform: none;
    margin-bottom: 8%;
    font-family: 'Avenir', sans-serif;
}
p {
    margin: 0 0 10px;
    text-align: justify;
}
.btn {
    border-radius: 0px;
    text-transform: uppercase;
}
.well {
    border-radius: 0px;
    margin-top: 3%;
    margin-bottom: 3%;
}
.modal-header {
    border-bottom: none;
}
.close {
    font-size: 30px;
    opacity: 0.9 !important;
    color: black;
    font-weight: 100;
}
/********************************************/
/**     ERROR BORDER                       **/
/********************************************/
.border-red {
    border-color: red;
}
.ng-invalid-email {
    border-color: red;
}
.btn:focus,.btn:active {
   outline: none !important;
}
input:focus, input:active {
    outline: none !important;
}

/********************************************/
/**      SUCCESS PAGE                      **/
/********************************************/

#success-bg {
    font-family:  'Avenir';
}
.block-logo {
    padding: 10%;
}
.success-text {
   color: #ffffff;
   text-align: center;
}

.success-title {
    width: 100%;
    color: white;
    text-transform: uppercase;
    padding-left: 5px;
    padding-right: 5px;
    margin-top: 10%;
    letter-spacing: 2px;
    font-size: 16px;
    font-family: 'Avenir', sans-serif;
}
.success-btn {
    background-color: transparent;
    border: 1px solid white;
    margin-top: 10%;
    height: 65px;
    width: 240px;
    letter-spacing: 1.5px;
    font-family: 'Avenir', sans-serif;
    font-size: 11.5px;
}
.succes-btn a {
    color: white;
}
#text-discover, #link-bottega {
    text-transform: uppercase;
    color: white;
}
#link-asia {
    color: white;
    text-transform: uppercase;
}




/*--------------------------------------------------------------------------------------*/
/*                                                                                      */
/*                   IPHONE 5 PORTRAIT                                                  */
/*                                                                                      */
/*--------------------------------------------------------------------------------------*/
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {
    .container-fluid {
        width: 100%;
        min-width: 320px;
        max-width: 320px;
        height: 568px;
        padding-right: 0px;
        padding-left: 0;
    }
    .mainTitle {
        position: absolute;
        height: 100%;
        text-align: center;
        width: 100%;
        color: white;
        padding: 18%;
        margin-top: -6%;
        font-size: 16px;
    }
    .mainText {
        margin-top: 34%;
        font-size: 14px;
    }

    /********************************************/
    /**     Block EMAIL declarative            **/
    /********************************************/

    .section-mail {
        padding: 8%;
    }
}
/*--------------------------------------------------------------------------------------*/
/*                                                                                      */
/*                   IPHONE 6                                                          */
/*                                                                                      */
/*--------------------------------------------------------------------------------------*/
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : portrait) {

    .section-logo {
        height: 365px;
        background-color: #244863;
    }
    .container-fluid {
        width: 100%;
        min-width: 375px;
        max-width: 375px;
        height: 667px;
        padding-right: 0px;
        padding-left: 0;
    }
    .mainTitle {
        position: absolute;
        height: 100%;
        text-align: center;
        width: 100%;
        color: white;
        padding: 18%;
        margin-top: -6%;
    }
    .mainText {
        margin-top: 34%;
        font-size: 14px;
    }
    #block-icon1 {
        background-color: #f2f2f2;
        height: 120px;
        padding: 10%;
    }
    #block-icon2 {
        background-color: #f2f2f2;
        height: 120px;
        padding: 10%;
    }
    #changeLangue {
        width: 100%;
        height: 60px;
        background-color: white;
        line-height: 60px;
         font-family: 'Avenir', sans-serif; 
        font-size: 12px;
    }

}
/*--------------------------------------------------------------------------------------*/
/*                                                                                      */
/*                   IPHONE 6 PLUS                                                 */
/*                                                                                      */
/*--------------------------------------------------------------------------------------*/
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (orientation : portrait) {
    .section-logo {
        height: 430px;
        background-color: #244863;
    }
   .container-fluid {
       width: 100%;
       min-width: 414px;
       max-width: 414px;
       height: 736px;
       padding-right: 0px;
       padding-left: 0;
   }
   .mainTitle {
       position: absolute;
       height: 100%;
       text-align: center;
       width: 100%;
       color: white;
       padding: 18%;
       margin-top: 4%;
   }
   .mainText {
       margin-top: 34%;
       font-size: 14px;
   }
   #block-icon1 {
       background-color: #f2f2f2;
       height: 120px;
       padding: 10%;
   }
   #block-icon2 {
       background-color: #f2f2f2;
       height: 120px;
       padding: 10%;
   }
   #changeLangue {
       width: 100%;
       height: 60px;
       background-color: white;
       line-height: 60px;
        font-family: 'Avenir', sans-serif; 
       font-size: 12px;
   }

}
/**************************************************************/
/**                                                          **/
/**     IPAD PAYSAGE                                         **/
/**                                                          **/
/**************************************************************/

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)  {
     .section-logo {
         height: 580px;
         background-color: #244863;
     }
    .container-fluid {
        width: 100%;
        min-width: 768px;
        max-width: 768px;
        height: 1024px;
        padding-right: 0px;
        padding-left: 0;
    }
    .mainTitle {
        position: absolute;
        height: 100%;
        text-align: center;
        width: 100%;
        color: white;
        padding: 18%;
        margin-top: 4%;
        font-size: 30px;
    }
    .mainText {
        margin-top: 25%;
        font-size: 25px;
    }
    #block-icon1 {
        background-color: #f2f2f2;
        height: 120px;
        padding: 10%;
    }
    #block-icon2 {
        background-color: #f2f2f2;
        height: 140px;
        padding: 5%;
    }
    #changeLangue {
        width: 100%;
        height: 85px;
        background-color: white;
        line-height: 85px;
         font-family: 'Avenir', sans-serif; 
        font-size: 18px;
    }
    #fb, #gg, #tt, #ld {
        width: 35px;
        height: 35px;
        margin-left: 5px;
    }

}