body {
    margin: 0;
    padding: 0;
    font-family: "lato", sans-serif !important;
}

div {
    display: block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

img {
    max-width: 100%;
}

br {
    clear: both;
}

hr {
    display: block;
    font-size: 0;
    line-height: 0;
    width: 95%;
    height: 0;
    border: 0;
    border-bottom: solid 1px #2e63bc;
    margin: 10px auto;
}

p, span, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    color: #2A60C0;
}

.bold { font-weight: 400; }
.block { display: block; }
.full { width: 100%; }
.center { text-align: center; }
.small { font-size: 11px; font-weight: 200; }

div.section1 {
    width: 100%;
    float: left;
}

div.section2 {
    width: 49%;
    float: left;
    margin-right: 2%;
}
div.section2:nth-of-type(even) {
    margin-right: 0%;
}
div.section2:nth-of-type(2n+3) {
    clear: left;
    margin-top: 20px;
}

div.section3 {
    width: 32%;
    float: left;
    margin-right: 2%;
}

div.section3:last-child,
div.section3:nth-of-type(3n) {
    margin-right: 0;
}

div.section3:nth-of-type(3n+4) {
    clear: left;
}

div.section4 {
    width: 23.5%;
    float: left;
    margin-right: 2%;
}
div.section4:last-child,
div.section4:nth-of-type(4n) {
    margin-right: 0;
}
div.section4:nth-of-type(4n+5) {
    clear: left;
}

div.wrapper {
    width: 970px;
    margin: 0 auto;
}

div#header {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 53px;
    text-align: center;
    background-color: #FFF;
    border-bottom: solid 1px #D6D6D6;
    z-index: 10;
}

div#header .main_logo {
    border: 0;
    width: 40%;
    float: left;
    display: block;
    text-align: left;
    text-decoration: none;
}

div#header div.support {
    float: right;
    width: 421px;
    height: 30px;
    display: block;
    text-align: right;
    margin: 20px 0 0 0;
}

div#header div.support a {
    display: inline-block;
    text-align: left;
    color: #333;
    margin: 0 2px;
    font-size: 13px;
    line-height: 18px;
    text-decoration: none;
}

div#header div.support a:hover,
div#header div.support a.selected {
    color: #2A60C0;
    font-weight: 400;
}

/*div#header div.support a:hover span.inline-arrow,
div#header div.support a.selected span.inline-arrow {
    border-color: transparent transparent #2A60C0 transparent;
}*/

div#main {
    margin: 53px 0 0 0;
}

div.webmails,
div.index,
div.tools {
    padding: 40px 0;
    text-align: center;
}

div.tools h1 {
    border-bottom: solid 1px #303030;
}

div.tools a {
    display: block;
    color: #303030;
    padding: 0 15px;
    font-weight: 200;
    font-size: 16px;
    line-height: 20px;
    text-decoration: none;
}

div.tools a span {
    display: block;
    height: 225px;
}

div.tools a span.configuration { background: #FFF url('http://mail.patong-sunbeach.com/fr/images/configuration-g.png') no-repeat 50% 0; }
div.tools a span.diagnostic { background: #FFF url('http://mail.patong-sunbeach.com/fr/images/diagnostic-g.png') no-repeat 50% 0; }
div.tools a span.imapcopy { background: #FFF url('http://mail.patong-sunbeach.com/fr/images/imapcopy-g.png') no-repeat 50% 0; }

div.tools a:hover span.configuration { background: #FFF url('http://mail.patong-sunbeach.com/fr/images/configuration-b.png') no-repeat 50% 0; }
div.tools a:hover span.diagnostic { background: #FFF url('http://mail.patong-sunbeach.com/fr/images/diagnostic-b.png') no-repeat 50% 0; }
div.tools a:hover span.imapcopy { background: #FFF url('http://mail.patong-sunbeach.com/fr/images/imapcopy-b.png') no-repeat 50% 0; }

div.tools a:hover {
    color: #2e63bc;
}

h1 {
    text-align: center;
    font-weight: 200;
    font-size: 34px;
    line-height: 42px;
}

h2 {
    color: #303030;
    font-weight: 200;
    font-size: 26px;
    line-height: 32px;
}

div.webmails div.section4 {
    border: solid 1px #F1F1F1;
    padding: 20px;
    font-size: 14px;
    line-height: 18px;
    color: #303030;
    font-weight: 200;
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    transition: all 0.15s linear;
}

div.webmails div.section4:hover {
    border: solid 1px #3c3c3c;
    color: #0068B1;
}

span.roundcube,
span.hosted,
span.exchange13,
span.exchange10 {
    display: block;
    width: 147px;
    height: 81px;
    margin: 0 auto;
}

span.roundcube { background: transparent url('http://mail.patong-sunbeach.com/fr/images/logo-roundcube.png') no-repeat 0 0; }
span.hosted { background: transparent url('http://mail.patong-sunbeach.com/fr/images/logo-hostedemail.png') no-repeat 0 0; }
span.exchange13 { background: transparent url('http://mail.patong-sunbeach.com/fr/images/logo-exchange2013.png') no-repeat 0 0; }
span.exchange10 { background: transparent url('http://mail.patong-sunbeach.com/fr/images/logo-exchange2010.png') no-repeat 0 0; }

div.webmails div.section4:hover span.roundcube,
div.webmails div.section4:hover span.hosted,
div.webmails div.section4:hover span.exchange10,
div.webmails div.section4:hover span.exchange13 {
    background-position: 0 100%;
}

a.guide,
a.plus {
    height: 22px;
    display: inline-block;
    margin: 5px;
}

a.guide {
    width: 30px;
    background: transparent url('http://mail.patong-sunbeach.com/fr/images/btn-guide.png') no-repeat 0 0;
}

a.plus {
    width: 22px;
    background: transparent url('http://mail.patong-sunbeach.com/fr/images/btn-plus.png') no-repeat 0 0;
}

a.guide:hover,
a.plus:hover {
    background-position: 0 100%;
}

form.connect input[type="email"] {
    width: 100%;
    border: solid 1px #C8C8C8;
    font-size: 16px;
    line-height: 30px;
    padding: 4px;
    margin-bottom: 10px;
}

form.connect label {
    float: right;
    color: #2A60C0;
    font-size: 14px;
}

form.connect button.btn,
form.connect a.btn {
    text-align: right;
    float: right;
    text-decoration: none;
    color: #FFF;
    font-size: 18px;
    line-height: 20px;
    background-color: #2A60C0;
    font-weight: 200;
    padding: 10px 15px;
    border: 0;
    font-family: "lato";
    cursor: pointer;
    opacity: 0.8;
    -webkit-transition: opacity 0.15s linear;
    -moz-transition: opacity 0.15s linear;
    transition: opacity 0.15s linear;
}

form.connect button.btn:hover,
form.connect a.btn:hover {
    opacity: 1;
}


/* OMBRE */
.box {
    width: 70%;
    background: #FFF;
    margin: 20px auto;
    border: solid 1px #303030;
    padding: 2% 14%;
}

.shadow { position: relative; }

.shadow:before,
.shadow:after {
    z-index: -1;
    position: absolute;
    content: "";
    bottom: 15px;
    left: 10px;
    width: 50%;
    top: 80%;
    max-width: 300px;
    background: #969696;
    -webkit-box-shadow: 0 15px 10px #969696;
    -moz-box-shadow: 0 15px 10px #969696;
    box-shadow: 0 15px 10px #969696;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
}

.shadow:after {
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    right: 10px;
    left: auto;
}

img.secured-connexion {
    position: absolute;
    top: 30px;
    left: -34px;
}

a#display-popup span.inline-arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 5px 5px;
    border-color: transparent transparent #2A60C0 transparent;
    display: inline-block;
    margin: 0 0 2px 3px;
}

a#display-popup span.inline-arrow.open {
    border-width: 5px 5px 0 5px;
    border-color: #2A60C0 transparent transparent transparent;
}

div#webmail-popup {
    position: absolute;
    top: 33px;
    right: -22px;
    background: rgba(255, 255, 255, 1);
    width: 220px;
    z-index: 9999;
    -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
}

#webmail-popup a {
    display: block !important;
    margin: 0 !important;
}

#webmail-popup > .links > a {
    display: block;
    text-align: left;
    padding: 7px 7px 0 7px;
}
#webmail-popup > .links > a:last-child {
    padding-bottom: 7px;
}

div#webmail-popup span.arrow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent rgba(255, 255, 255, 1) transparent;
    position: absolute;
    top: -10px;
    left: 100px;

}

#webmail-popup > .accounts {
    padding: 0;
    margin: 0;
}
#webmail-popup > .accounts > .account {
    display: table;
    width: 100%;
}
#webmail-popup > .accounts > .account:last-child {
    border-bottom: 1px solid #ddd;
}
#webmail-popup > .accounts > .account > * {
    display: table-cell;
    vertical-align: middle;
    padding: 7px 7px 0 7px;
}
#webmail-popup > .accounts > .account:last-child > * {
    padding-bottom: 7px;
}
#webmail-popup > .accounts > .account > .first {
    text-align: left;
}
#webmail-popup > .accounts > .account > .last {
    text-align: right;
    padding-left: 0;
}
#webmail-popup > .accounts > .account button.remove-account {
    border: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
#webmail-popup > .accounts > .account button.remove-account > span {
    /*display: none;*/
}

#webmail-popup ul li .last {
    padding: 0 !important;
}

#webmail-popup ul li .last button.remove-account {
    background-color: #FFF;
    font-weight: 400;
}

#webmail-popup ul li .last button.remove-account span {
    display: block;
    line-height: 32px;
    padding: 0 10px;
}

div#overflow {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    top: 0;
    left: 0;
    z-index: 9998;
}

/* remove red shadow on invalid fields (html5) */
:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow:none;
}

div.flags {
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.flags a,
.flags a:visited,
.flags a:active {
    display: inline-block;
    height: 20px;
    width: 30px;
    text-align: center;
    background: url('http://mail.patong-sunbeach.com/fr/images/Flag.png') no-repeat 0 0;
    background-position: 0 0;
    margin: 3px;
}

.flags a:hover {
    display: inline-block;
    width: 30px;
    text-align: center;
    background: url('http://mail.patong-sunbeach.com/fr/images/Flag.png') no-repeat 0 0;
    background-position: 0 0;
}

.flags a.cz:hover { background-position: 0px -21px;}

.flags a.de, .flags a.de:visited, .flags a.de:active { background-position: -30px 0px; }
.flags a.de:hover { background-position: -30px -21px; }

.flags a.couk, .flags a.couk:visited, .flags a.couk:active { background-position: -59px 0px; }
.flags a.couk:hover { background-position: -59px -21px; }

.flags a.ie, .flags a.ie:visited, .flags a.ie:active { background-position: -89px 0px; }
.flags a.ie:hover { background-position: -89px -21px; }

.flags a.es, .flags a.es:visited, .flags a.es:active { background-position: -118px 0px; }
.flags a.es:hover { background-position: -118px -21px; }

.flags a.fi, .flags a.fi:visited, .flags a.fi:active { background-position: -148px 0px; }
.flags a.fi:hover { background-position: -148px -21px; }

.flags a.fr, .flags a.fr:visited, .flags a.fr:active { background-position: -178px 0px; }
.flags a.fr:hover { background-position: -178px -21px; }

.flags a.it, .flags a.it:visited, .flags a.it:active { background-position: -207px 0px; }
.flags a.it:hover { background-position: -207px -21px; }

.flags a.lt, .flags a.lt:visited, .flags a.lt:active { background-position: -237px 0px; }
.flags a.lt:hover { background-position: -237px -21px; }

.flags a.nl, .flags a.nl:visited, .flags a.nl:active { background-position: -267px 0px; }
.flags a.nl:hover { background-position: -267px -21px; }

.flags a.pl, .flags a.pl:visited, .flags a.pl:active { background-position: -296px 0px; }
.flags a.pl:hover { background-position: -296px -21px; }

.flags a.pt, .flags a.pt:visited, .flags a.pt:active { background-position: -327px 0px; }
.flags a.pt:hover { background-position: -327px -21px; }


.seo {
    text-align: center;
}

.seo h3 {
    text-transform: uppercase;
    font-weight: 400;
    font-size: 24px;
    line-height: 30px;
    font-weight: 200;
}

.seo p {
    color: #3C3C3C;
    font-size: 16px;
    font-weight: 200;
    line-height: 22px;
}

/* RESPONSIVE */
@media screen and (max-width: 971px) {
    div.wrapper {
        width: 100%;
    }
}

@media screen and (max-width: 840px) {
    div#header div.support {
        width: auto;
    }

    img.secured-connexion {
        display: none;
    }

    div.section4,
    div.section2,
    div.section3 {
        float: none;
        width: 100%;
        padding: 2%;
        clear: both;
        margin: 5% 0 2% 0;
    }

    div.section4:last-child,
    div.section2:last-child,
    div.section3:last-child {
        margin: 0;
    }

    div.section1 {
        padding: 2%;
    }

    div.box {
        width: 100%;
        padding: 2%;
    }
}

@media screen and (max-width: 380px) {
    div#header div.support {
        display: none;
    }
    div#header .main_logo {
        width: 100%;
    }
}