﻿@font-face {
    font-family: 'lato-light';
    src: url('../fonts/lato/lato-light.eot'), url('../fonts/lato/lato-light.ttf') format('truetype'), url('../fonts/lato/lato-light.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'lato';
    src: url('../fonts/lato/lato-regular.eot'), url('../fonts/lato/lato-regular.ttf') format('truetype'), url('../fonts/lato/lato-regular.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
    color: #686868;
    font-family: "Lato", Helvetica,Arial, sans-serif;
    height: 100%;
}

h1, h2 {
    font-family: "lato-light", Helvetica,Arial, sans-serif;
    text-align: center;
    font-weight: 100;
}

h1 {
    color: #ff8a63;
    font-size: 60px;
}

h2 {
    font-size: 24px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

footer {
    background: url("../../OutilsFlash/Ressources/img/amc-fond-vagues.svg") no-repeat scroll bottom / cover;
    position: absolute;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

    footer > a {
        position: absolute;
        bottom: 80px;
        right: 80px;
    }

        footer > a > img {
            width: 85px;
            height: 85px;
        }

.containerBlock {
    box-shadow: 0px 5px 20px 5px rgba(0,0,0,.15);
    width: 320px;
    margin: auto;
    margin-top: 50px;
    margin-bottom: 20px;
    background: white;
}

.contentBlock {
    padding: 15px 20px 20px 20px;
}

    .contentBlock .input-group {
        margin: 30px 5px;
    }

    .contentBlock .NoMargin {
        margin: 10px 5px;
    }

.secondaryLink {
    margin-top: 6px;
    text-align: center;
}

    .secondaryLink .input-group-addon {
        padding: 0;
        padding-right: 4px;
    }

    .secondaryLink a, .secondaryLink a {
        text-shadow: 0px 0px 10px #FFF;
    }

        .secondaryLink a, .secondaryLink a:hover {
            color: #57cfd7;
            font-size: 14px;
        }

.input-group .input-group-addon, .input-group input {
    color: #959DAC;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.input-group .form-control {
    border-color: transparent;
    padding: 6px 12px;
    background-size: 0 2px, 100% 1px;
    background-repeat: no-repeat;
    background-position: center bottom,center calc(100% - 1px);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ff8a63), to(#ff8a63)),-webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#ebebeb));
    background-image: -webkit-linear-gradient(#ff8a63, #ff8a63),-webkit-linear-gradient(#ebebeb, #ebebeb);
    background-image: linear-gradient(#ff8a63, #ff8a63),linear-gradient(#ebebeb, #ebebeb);
    transition: background 0.3s;
    color: #686868;
}

.input-group input:focus, .input-group input:active {
    background-size: 100% 2px, 100% 1px;
    border-color: transparent;
    box-shadow: none;
}

.btn {
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    border: none;
    height: 45px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    -moz-transition: all ease-in-out 0.2s;
    -o-transition: all ease-in-out 0.2s;
    -webkit-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
    text-transform: uppercase;
    padding-bottom: 3px;
}

    .btn:focus, .btn:active, .btn:active:focus {
        outline: 0;
    }

.btn-default {
    background-color: #ff8a63;
    -moz-box-shadow: inset 3px 0 0 #ff7344;
    -webkit-box-shadow: inset 3px 0 0 #ff7344;
    box-shadow: inset 0 -3px 0 #ff7344;
}

    .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default:active:focus {
        color: #fff;
        background: #ff7344;
        -moz-box-shadow: inset 0 -5px 0 #FF8A63;
        -webkit-box-shadow: inset 0 -5px 0 #FF8A63;
        box-shadow: inset 0 -5px 0 #FF8A63;
    }

.btn-success {
    -moz-box-shadow: inset 0 3px 0 #3b9c3b;
    -webkit-box-shadow: inset 0 3px 0 #3b9c3b;
    box-shadow: inset 0 -3px 0 #3b9c3b;
}

    .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success:active:focus {
        color: #fff;
        cursor: pointer;
        background: #3B9C3B;
        -moz-box-shadow: inset 0 -5px 0 #4DA74D;
        -webkit-box-shadow: inset 0 -5px 0 #4DA74D;
        box-shadow: inset 0 -5px 0 #4DA74D;
    }


.alert-danger, .alert-success {
    padding: 6px 4px;
    width: 100%;
    display: inline-block;
    text-align: center;
    font-weight: bold;
}

.alert-danger {
    color: #ea1815;
    background-color: #fdf2f2;
    border: 1px solid #ea1815;
}

.alert-success {
    color: #3c763d;
    background-color: #e8f3e9;
    border: 1px solid #3c763d;
}
