/* =============================== Body et styles généraux ======================================= */
html,body { width: 100%;margin: 0;padding: 0;font-family: 'Lato', sans-serif;font-size: 14px;font-weight: 300;background: #fff;color: #000 !important; }
body.load { opacity: 0; }

a { color: #3661a6;font-weight: bold;-webkit-transition: all 0.2s ease-in-out 0s;transition: all 0.2s ease-in-out 0s; }
a:hover { color: #000;text-decoration: none !important; }

/* ------------ FORMS --------------- */
.form-zone { width: 100%;float: left;display: block;position: relative; }
.form-content { width: 100%;float: left;display: block; }
.form-content .input-group { width: 100%;background: #e8e8e8;height: 85px;border-bottom: 1px solid #858584;padding: 10px;position: relative;margin-bottom: 50px;float: left; }
.form-content .input-group span { display: block;font-size: 13px;color: #666;position: absolute;font-weight: 300;text-transform: uppercase;line-height: 20px;-webkit-transition: all 0.2s ease-in-out 0s;transition: all 0.2s ease-in-out 0s;top: 5px; }
.form-content .input-group span.on { font-size: 10px;color: #a2a2a2;line-height: 12px;font-weight: 400; }
.form-content .input-group input, .form-content .input-group select, .form-content .input-group textarea { border: none;width: 100%;height: 100%;background: transparent;font-size: 24px;color: #000;resize: none;min-height: 60px; }
.form-content .input-group input:focus, .form-content .input-group select:focus, .form-content .input-group textarea:focus { border: none;outline: none; }
.form-content .input-group textarea { padding: 20px 0px; }
.form-content .input-group._70 { width: 70%;height: 300px; }
.form-content .input-group._30 { width: 30%;height: 300px;background: transparent;border: none;padding: 0px; }
.form-content .input-group._30 .content { width: calc(100% - 50px);height: 100%;background: #ff9933;float: right;text-align: center;padding-top: 50px;text-decoration: none !important; }
.form-content .input-group._30 .content:hover { background: #cc6e10; }
.form-content .input-group._30 .content ._1 { font-size: 26px;font-weight: 300;position: relative;color: #fff;text-transform: uppercase;line-height: 10px; }
.form-content .input-group._30 .content ._2 { font-size: 37px;font-weight: 300;position: relative;color: #fff;text-transform: uppercase;line-height: 12px; }
.form-content .input-group._30 .content ._3 { font-size: 53px;font-weight: 600;position: relative;color: #fff;text-transform: uppercase;line-height: 31px;padding-bottom: 50px; }
.form-content .input-group._30 .content .info { font-size: 16px;font-weight: 300;position: relative;color: #fff;text-transform: uppercase;text-align: right;padding: 0 50px;line-height: 18px;margin-bottom: 40px; }
.form-content .input-group._30 .content .info i { position: absolute;display: block;top: 0px;left: 50px;font-size: 50px;lin-height: 50px; }
.form-content .result { width: 100%;color: #333;font-size: 19px;text-transform: uppercase;line-height: 22px;text-align: right;margin-bottom: 80px;float: right;display: none; }
.form-content .result #ticket-id { display: inline-block;background: #9cff8f;padding: 10px 35px;border-radius: 10px;border: 2px solid #333;font-size: 20px;font-weight: bold;color: #000; }
.form-content .result p { margin: 0px; }
.form-content .result p span { display: block;margin-top: 15px;font-weight: 600; }
.form-content .result p #ticket-uid { display: inline-block !important;margin-top: 0px !important; }
.form-content .result p #ticket-uid a { color: #f93; }

/* UPLOAD */
.form-content .left { width: 100%;width: 70%;float: left; }
.form-zone .upload{ width: 100%;width: 30%;position: absolute;top: 0;right: 0; }
.form-zone .upload .upload-zone { width: calc(100% - 50px);height: 300px;float: right; }
.form-zone .upload .upload-zone .head { width: 100%;text-align: center;color: #fff;font-size: 14px;padding: 20px 0;background: #464646; }
.form-zone .upload .upload-zone .add { display: inline-block;border-radius: 5px;background: #009ffa;font-size: 14px;color: #fff;padding: 10px 15px; }
.form-zone .upload .upload-zone .drop { width: 100%;background: #333;padding: 20px;text-align: center;display: none; }
.form-zone .upload .upload-zone .drop p { color: #9a9a9a;font-size: 13px;line-height: 17px; }
.form-zone .upload .upload-zone .drop p strong { color: #fff;font-weight: 600; }

.form-zone .upload .upload-zone .drop .list { width: 100%;text-align: left;color: #fff;font-size: 12px;padding: 0px 0px 0px 0px; }
.form-zone .upload .upload-zone .drop .list input { margin-bottom: 20px; }
.form-zone .upload .upload-zone .drop .list .bouton_envoi { display: none;border-radius: 3px;background: #009ffa;font-size: 14px;color: #fff;padding: 5px 15px;border: none;margin: 0px; }
.form-zone .upload .upload-zone .drop .list #preview { width: 100%;margin-top: 20px;padding: 0;list-style: none;font-size: 14px; }
.form-zone .upload .upload-zone .drop .list #preview li { width: 100%;color: #969696;padding: 5px 0;border-bottom: 1px solid #484848; }
.form-zone .upload .upload-zone .drop .list #preview li span { color: #fff; }
.form-zone .upload .upload-zone .drop .list #preview li .fa { color: green; }

.footer-page { float: left;width: 100%;background: #eee;border-top: 4px solid #e2e2e2;padding: 60px 0 100px 0; }
.footer-page-container { width: 100%;max-width: 1400px; }
.footer-links { width: 100%;text-align: center;margin-bottom: 50px; }
.footer-links a { display: inline-block;margin: 0 15px; }
.footer-links a img { width: 70px; }
.footer-content { width: 100%;text-align: center;margin-bottom: 50px;float: left; }
.footer-content .left { float: left;width: 50%;text-align: right;padding-right: 40px;padding-left: 20%; }
.footer-content .right { float: right;width: 50%;text-align: left;padding-left: 40px;padding-right: 20%; }
.footer-content span { font-size: 22px;display: block;margin-bottom: 20px;font-weight: 700; }
.footer-content p { font-size: 18px;color: #222;line-height: 26px; }
.footer-copyright { width: 100%;text-align: center;float: left;font-weight: 400; }


/* Intercom */
.intercom-page { position: fixed;bottom: 20px;background: #333;width: 40px;line-height: 40px;border-radius: 50%;height: 40px;font-size: 20px;right: 20px;padding: 0;z-index: 1000;text-align: center;color: #fff; }
.intercom-page:hover { color: #fff; }
.intercom-page .circle { position: absolute;top: 0; left: 0;width: 40px;height: 40px;border-radius: 50%;border: 2px solid #333;display: block;-webkit-animation: movingcircleP 6s infinite linear;-moz-animation: movingcircleP 6s infinite linear;animation: movingcircleP 6s infinite linear;background: transparent; }
@keyframes movingcircleP {
    0% { left: 0px;top: 0px;width: 40px;height: 40px;opacity: 1;background: transparent; }
    8% { left: -30px;top: -30px;width: 100px;height: 100px;opacity: 0;background: #fff; }
	100% { left: 0px;top: 0px;width: 40px;height: 40px;opacity: 0;background: transparent; }
}


/* -- Clearer -- */
.clearer { clear: both; }


/* ############################################################################################## */
/* ##################################  R E S P O N S I V E  ##################################### */
/* ############################################################################################## */
@media (max-width: 1360px) {
	.form-content .input-group { margin: 0 auto 30px auto; }
	.form-content .input-group._30 { margin: 0 auto 30px auto;width: 40%;float: right; }
	.form-content .input-group._30 .content { width: 100%; }
	.form-content .input-group._70 { width: 100%; }
	.form-content .input-group._30 .content ._1 { font-size: 20px; }
	.form-content .input-group._30 .content ._2 { font-size: 28px;line-height: 0px; }
	.form-content .input-group._30 .content ._3 { font-size: 40px;line-height: 27px;padding-bottom: 25px; }
	.form-content .input-group._30 .content .info { text-align: center;padding: 30px 50px 0px 50px; }
	.form-content .input-group._30 .content .info i { width: 100%;left: 0px;font-size: 33px;line-height: 25px; }
	.form-content .result { text-align: center; }
	.form-content .result p { font-size: 14px;line-height: 22px; }
	.form-content .left { width: 100%; }
	.form-zone .upload { width: 60%;left: 0px; }
	.form-zone .upload .upload-zone { float: left;width: calc(100% - 30px); }
}

@media (max-width: 1199px) {
	.footer-content .left { padding-left: 10%; }
	.footer-content .right { padding-right: 10%; }
}

@media (max-width: 991px) {
	.footer-content .left, .footer-content .right { width: 100%;padding: 0px 40px;text-align: center; }
	.footer-copyright { padding: 0px 40px; }
}
	
@media (max-width: 767px) {
	.form-content .input-group._30 { width: 100%; }
	.form-content .input-group { height: 60px;margin-bottom: 20px; }
	.form-content .input-group input, .form-content .input-group select, .form-content .input-group textarea { font-size: 20px; }
	.form-zone .upload .upload-zone { display: none; }
}

@media (max-width: 600px) {
	.footer-links a img { width: 50px; }
	.footer-links a { margin: 0 10px; }
	.footer-content span { font-size: 19px;margin-bottom: 10px; }
	.footer-content p { font-size: 16px;line-height: 22px; }
	.footer-content .right { margin: 30px 0 0 0; }
}
	
@media (max-width: 500px) {
	.main-content .fil-ticket .item { padding: 20px;border-radius: 10px; }
	.main-content .fil-ticket .client .who { left: 15px; }
	.main-content .fil-ticket .team .who { right: 15px; }
	.main-content .fil-ticket .item p { font-size: 15px;line-height: 22px; }
	.main-content .fil-ticket .item .who .date { font-size: 10px; }
}