/* Global */
::selection { background: #03a8df; color: white; }

html, body { padding:0; margin:0; height:100%; font-family:'Roboto', sans-serif; font-weight: 300; font-size:1.35em; color:#444;}
.wrapper { max-width: 900px; padding: 0 50px; margin:0 auto; position:relative; }

a { cursor:pointer; color:#03a8df; text-decoration:none; transition:0.3s; }
a:hover { color:black; transition:0.3s; }

h2 { font-size: 2em; text-shadow: 0 0 4px rgba(0,0,0,0.4); text-transform:uppercase; text-align:center; font-weight: 500; }
h3 { color: #bbb; font-weight:300; margin-top:-1.5em; margin-bottom: 3em; text-align:center; }

img { max-width: 100%; }
.strong { font-weight: 800; }
.clear { clear:both; }
.center { text-align:center; }

.bouton { clear:both; border: 2px solid #03a8df; border-radius:4px; padding: 0.5em 1em; background:linear-gradient(to right, #03a8df 50%, #fff 50%); background-size:210% 100%; background-position:98% bottom; cursor:pointer; margin-top: 2em; display:inline-block; color:#03a8df; }
.bouton:hover { background-color:#03a8df;  background-position:left bottom; color:white; }


.options .titre { background: #03a8df; border-radius: 3px; display:inline-block; color:white; padding: 0.5em 1em; font-size: 0.65em; margin-right:1em; margin-bottom: 1em; }
.options .prix { opacity: 0.5; }

/* Banner */
.banner { height:100%; background: #444 url(images/banner.jpg) 50% 50% no-repeat; background-size:cover; background-attachment:fixed; text-align:center; color:white; overflow:hidden; position:relative; /* box-shadow: inset 0 0 7px rgba(0,0,0,0.3); */}
.banner h1 { animation:fadeIn 3s 1 0s; padding-top: 30%;  text-shadow:2px 2px 2px rgba(0, 0, 0, 0.5); margin:0; font-weight: 500;  }
.banner h1 .words { display:inline-block; vertical-align: text-top; width:200px; position:relative; }
.banner h1 .words span { animation: rotateWords 10s linear infinite 0s; position:absolute; left:0; opacity:0; }
.banner h1 .words span:nth-child(2) { animation-delay: 2s; }
.banner h1 .words span:nth-child(3) { animation-delay: 4s; }
.banner h1 .words span:nth-child(4) { animation-delay: 6s; }
.banner h1 .words span:nth-child(5) { animation-delay: 8s; }
.banner .lotus { animation:fadeIn 3s 1 1s forwards; opacity:0; font-family: 'Satisfy', cursive; font-size: 2em; text-shadow:2px 2px 2px rgba(0, 0, 0, 0.5); }
.banner .fleche { animation:fadeIn 3s 1 2s forwards; opacity:0; background: url(images/fleche.png) 50% 50% no-repeat; width:28px; height:81px; position:absolute; bottom:75px; left:50%; margin-left:-14px; }
.cursornetwork { position:absolute; right:0; left:0; top:0; bottom:0; z-index:0 }

@keyframes rotateWords {
    0% { opacity: 0; transform: translateY(-60px);  }
    5% { opacity: 0.8; transform: translateY(0px); }
    20% { opacity: 1; transform: translateY(0px);}
    25% { opacity: 0; transform: translateY(60px);}
    100% { opacity: 0;  }
}
@keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } }

/* Ligne de nuages */
.nuages { position:absolute; bottom:0px; left:0; z-index: 25;}
.nuages.bouge { animation:bougeX 120s linear infinite; z-index: 24; left: -400px; }
@keyframes bougeX { 100% { transform:translateX(100%); } }
@keyframes bougeY { 0% { bottom: -10px; } 50% { bottom: 10px; } 100% { bottom: -10px; } }

/* Badge Google */
.googlepartner { animation:fadeIn 2s 1 2.5s forwards; opacity:0; position:absolute; bottom: -75px; left: 50%; margin-left: -178px; z-index:50; }
.googlepartner img { box-shadow: 2px 2px 2px rgba(0,0,0,0.5); transition:0.3s; }
.googlepartner:hover { bottom: -70px; }
.googlepartner img:hover { box-shadow: 4px 4px 4px rgba(0,0,0, 0.5); transition:0.3s;  }

/* Intro */
.intro { text-align:center; padding: 4em 0; }

/* Domain availability */
.checkdomainavailability {position: absolute; right: 50px; font-size: 0.75em; background: #03a8df; color: #fff; padding: 0.65em 1em; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
.checkdomainavailability:hover { background: #13B8EF; color:white; padding: 0.65em 1.5em;  }

::-webkit-input-placeholder { color:rgba(0,0,0,0.3);  }
:-ms-input-placeholder { color:rgba(0,0,0,0.3);  }

/* PRIX */
.prices { background: #eee url(images/bg-etape-2.jpg) no-repeat 50% 50% !IMPORTANT; font-size: 0.8em; padding: 3em 12.5% 3em 12.5%; color:#777; }
.prices .colonnes { display:flex; justify-content: space-between;}
.prices .price { background: white; width: 31%; box-shadow: 0 0 5px rgba(0,0,0,.3); margin:2% 0; position:relative; border-radius:5px;}
.prices .price .header { background: #333; color:white; text-align:center; padding: 1em; margin-bottom:1em; border-top-right-radius: 5px;  border-top-left-radius: 5px;}
.prices .price .header .name { font-size:1.5em; font-weight:500; }
.prices .price .header .name span { opacity:0.4; }

.prices .price.rapide .header { background: #62a70f; background: radial-gradient(#98cb4F, #62a70f); }
.prices .price.ultra .header { background: #03a8df; background: radial-gradient(#3cf, #03a8df); }
.prices .price.giga .header { background: #ff5e00; background: radial-gradient(#ff6e24, #ff5e00); }
/* .prices .price.courriels .header { background: #EA47FF; background: radial-gradient(#EA47FF, #CA27FE); } */

.prices .price:hover a { transform: scale(1.1); }   

.prices .price.rapide a { background: #62a70f; }
.prices .price.rapide a:hover { background: #428900; }
.prices .price.ultra a { background: #03a8df;  }
.prices .price.ultra a:hover { background: #0088cf; }
.prices .price.giga a { background: #ff5e00; }
.prices .price.giga a:hover { background: #DF3e00; }

.prices .price.courriels { width:100%; }
.prices .price.courriels .soustitre { font-size:0.8rem; font-weight: normal; }
.prices .price.courriels .details { display:flex; font-size:0.8em; }
.prices .price.courriels .details .plan { width:50%; text-align:center; padding: 1em 0; }
.prices .price.courriels .details .plan .titre { font-size:1.25em; font-weight: bold; text-transform:uppercase; }


.prices .price .details { padding: 1em; font-size: 0.6em; }
.prices .price .progress { background: #eee; height: 3px; margin-top:10px; margin-bottom: 30px; }
.prices .price .progress.w10 div { height:100%; width: 10%; background: #03a8df; }
.prices .price .progress.w20 div { height:100%; width: 20%; background: #03a8df; }
.prices .price .progress.w30 div { height:100%; width: 30%; background: #03a8df; }
.prices .price .progress.w40 div { height:100%; width: 40%; background: #03a8df; }
.prices .price .progress.w50 div { height:100%; width: 50%; background: #03a8df; }
.prices .price .progress.w60 div { height:100%; width: 60%; background: #03a8df; }
.prices .price .progress.w70 div { height:100%; width: 70%; background: #03a8df; }
.prices .price .progress.w80 div { height:100%; width: 80%; background: #03a8df; }
.prices .price .progress.w90 div { height:100%; width: 90%; background: #03a8df; }
.prices .price .progress.w100 div { height:100%; width: 100%; background: #03a8df; }

.prices .price.forfait a { position: relative; bottom:-18px; color:white; padding: .65em 0; border-radius: 5px; font-size:.65em; text-transform:uppercase; text-align: center; width: 120px; display: block; margin: 0 auto; }

.prices .extra { padding: 4em 0 2em 0; text-align:center; font-size: 0.7em; }



/* Domaine */
input { font-family:'Roboto'; padding:0.65em 1.5em; font-size:0.75em; border-radius:4px; border: 1px solid #ccc; transition:0.5s; width: 100%; box-sizing: border-box; margin-bottom: 0.25em; }
input:focus { outline: none; border: 1px solid #888; transition:0.5s; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); }
input.empty { border:1px solid #FF8D29; background:#fff0e3; color: #FF8D29;}
input.filled { border:1px solid #62a70f; background: #e5ffc6; color: #62a70f; }

/* Serveurs et Lotus */
.sections { position:relative; }
.section { width: 50%; float:left; font-size: 0.8em; padding-bottom: 2em; text-align:center; position:relative; z-index: 50;}
.section p { text-align:justify; }
.section img { margin-top: 2em; margin-bottom:1em; }
.section.gauche .padding { padding: 2em 8% 2em 25%; }
.section.droite .padding { padding: 2em 25% 2em 8%; }

.sections .avantages { background: rgba(200,200, 200,0.2); padding: 2em 12.5% 2em 12.5%; font-size: 0.8em; position:relative; z-index:50;  }
.sections .avantages .clouds { display:block; margin: -100px auto 1em auto; }
.sections .avantages ul { list-style:none; padding:0; }
.sections .avantages ul li { padding: 0.75em 30% 0.75em 100px; border-top:1px solid #ddd; border-bottom: 1px solid #EEE; background: url('images/check.png') 2em 0.75em no-repeat; transition:0.2s; }
.sections .avantages ul li:last-of-type { border-bottom: 1px solid #ddd; }
.sections .avantages ul li:hover { color: #03a8df; transition:0.5s; background-color: rgba(3,168,223,0.15); background-image: url('images/check-on.png'); border-bottom: 1px dashed #03a8df; border-top: 1px dashed #03a8df; }

/* Avantages - Liste */
.fusee { animation: anim_fusee 5s infinite; position:absolute; right:0; top:-600px; z-index: 100; }
@keyframes anim_fusee { 0% { top:-600px; } 50% { top:-580px; } 100% { top:-600px; } }
@keyframes anim_fusee_responsive { 0% { top:-400px; } 50% { top:-380px; } 100% { top:-400px; } }

/* Section Question */
.bouton.telephone { margin-top:-2em; }

/* Clients */
.clients img { margin: 0 75px; transition:0.3s; filter: gray; /* IE6-9 */ filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ }
.clients img:hover { transition:0.3s; filter: none; -webkit-filter: grayscale(0); }

/* Footer */
.footer { background: #444; background: radial-gradient(at top, #555, #222); color:#888; padding:2em 0 0 0; font-size: 0.65em;}
.footer .lotus { font-weight:600; font-size: 2em; color:white; font-weight: 500; }
.footer h4 { margin:0; font-weight:300; color:white; font-size:1.25em; text-transform: uppercase; font-weight: 500; }
.footer a { color:#BBB; }
.footer a:hover { color:#03a8df; }
.footer .network { animation:spin 20s linear infinite; margin-top: 2em; width: 100px; opacity: 0.2; transition:0.2s; }
.footer .network:hover { width: 105px;  opacity: 0.4; transition:0.3s;}
.footer .gauche { float:left; width: 50%; }
.footer .droite { float:right; width: 50%; text-align:right;}
.footer .gauche .padding { padding: 2em 8% 2em 25%; }
.footer .droite .padding { padding: 2em 25% 2em 8%; }

.footer .bar { background:#222; text-align:center; padding: 2em 0; font-size: 0.75em; text-transform: uppercase;}
.footer .bar a { color:#444; margin: 0 2em;}
.footer .bar a:hover { color:#03a8df; }
.footer .bar .social { margin-right:0; }
.footer .bar .social svg { fill:#666; width: 24px; height: 24px; transition:0.3s; }
.footer .bar .social:hover svg { fill: #03a8df; transition:0.3s; }

@keyframes spin { 100% { transform:rotate(360deg); } }


/* Load */
.load { animation: loadingcompleted 0.5s 0.75s ease-in-out both; position:fixed; width:100%; height:100%;  background: #03a8df; background: radial-gradient(#13B8EF, #03a8df); z-index:9999; text-align:center; overflow:hidden;}
.load img { animation:spin 10s linear infinite, loading 1.2s 0.3s ease-in-out both; }
@keyframes loading { 0% { opacity:0; } 100% { opacity:1; margin-top:20vh; } }
@keyframes loadingcompleted { 100% { opacity:0; visibility: hidden; } }


/* Responsive */
@media only screen and (max-width: 1400px) {
    .fusee { width: 400px; top:-400px; animation: anim_fusee_responsive 5s infinite; }
}

@media only screen and (max-width: 1400px) {
    .prices, .sections .avantages {  padding-left:5%; padding-right:5%; }
    .section.gauche .padding, .footer .gauche .padding { padding-left:10%;}
    .section.droite .padding, .footer .droite .padding { padding-right:10%;}
}

@media only screen and (max-width: 800px) {
    .banner h1 .lotus { position:initial; }
    .etapes, .etapes .etape-title { background: #444; }
    .etapes .etape-title span { margin:0; }
    .etapes .etape-title img { width: 35px; float:right; }
    .tableau .ligne .titre { width: auto; margin-top: 1em; display:block; }
    .tableau .ligne .progress { width: auto; display:block; }
    .section { width: 100%; }
    .section.droite .padding, .section.gauche .padding, .footer .gauche .padding, .footer .droite .padding { padding: 2em 50px; }
    .sections .avantages { padding: 0 50px; }
    .sections .avantages ul li { padding: 0.75em 0em 0.75em 50px; background-position-x: 0em;}
    .fusee { display:none; }
    .footer .gauche, .footer .droite { width: 100%; text-align:center; }

    .prices .colonnes { flex-wrap: wrap;}
    .prices .price { width: 100%; margin:2em 0; }
    
    .prices .price.courriels .details { flex-wrap: wrap;}
    .prices .price.courriels .details .plan { width: 100%; }

}