/* Police de style */
@font-face{
    font-family:'fontawesome';
        src:url('/webagency_images/fonts/fontawesome-webfont.eot') format('eot');
        src:url('/webagency_images/fonts/fontAwesome.otf') format('opentype'),
            url('/webagency_images/fonts/fontawesome-webfont.svg') format('svg'),
            url('/webagency_images/fonts/fontawesome-webfonts.ttf') format('truetype'),
            url('/webagencu_image/fonts/fontawesome-webfonts.woff') format( 'woff');
}

/* Pour tout la page */
body
{
    font-family: 'Roboto','helvetica';
    width: 100%;
}
.separation
{
    display:flex;
    justify-content:center;
}
    .point
    {
        border-radius: 50px;
        background-color: rgb(12, 163, 206);
        width: 15px;
        height: 15px;
        z-index: 2;
        margin-top:5px;
        margin-left:5px;
    }
    hr
    {
        
        width:5%;
        height: 0.1px;
        margin:auto 10px;
        display:inline;
    }
    .sousp
    {
        background-color:white;
        border-radius: 50px;
        width:25px;
        height:25px;
        z-index:1;
    }
#contenu
{
    padding-top:110px;
}

h1
{
    text-align: center;
    font-size: 2.5em;
    color: black;
    text-transform: uppercase;
}

.introservices, .introprojets
{
    width: 40%;
    margin: 1.5% auto;
    text-align: center;
    font-size: 1.1em;
}
/* Onglet navigation */
body
{
    position: relative;
    margin: 0;
}
nav
{   
    position: fixed;
    width: 100%;
    z-index: 4;
    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: rgb(255,255,255);
}
.en-tête1
{
	margin-left:-100px;
}
.en-tête2
{
    display: flex;
    width: 450px;
    margin-right: -100px;
    height: 100px;
}
.nelement
{
    margin:3%;
    font-size: 1.3em;
    border-top: 3px solid rgba(255,255,255,0);
    padding-top: 35px;
    margin-top: 0;
}
    .nelement:hover 
    {
        border-top: 3px solid rgb(12, 163, 206);
        padding-top: 35px;
        margin-top: 0;
        transition: 0.8s;
    }
    .nelement:visited,
    {
        color:black;
    }
    a
    {
        color: black;
        text-decoration: none;
    }
/* Header: slider */
#slider
{
    width: 100%;
    overflow:hidden;
    margin: 0 auto;
}
#slides
{
    display: flex;
    width: calc(100% *2);
    animation: defilement 10s infinite;
    -webkit-animation: defilement 10s infinite;
}
.slide
{
    width: 100%;
}
.bg1, .bg2
{
    width: 100%;
    height:auto;
}
@keyframes defilement
{
    0% {
        transform:translateX(0%);
    }
    30% {
        transform:translateX(0%);
    }
    50% {
        transform:translateX(-50%);
    }
    80% {
        transform:translateX(-50%);
    }
    100% {
        transform:translateX(0%);
    }
}
@keyframes timeliner
{
    0% {
        transform:translateX(-100%);
    }
    30% {
        transform:translateX(0%);
    }
    50% {
        transform:translateX(-100%);
    }
    80% {
        transform:translateX(0%);
    }
    100% {
        transform:translateX(+100%);
    }
}
.timeline
{
    position: absolute;
    z-index:2;
    height: 5px;
    margin-top:-9px;
    background: rgba(12, 163, 206,0.8);
    width: 100%;
    /* fonction d'animation */
    animation: timeliner 10s infinite;
    -webkit-animation: timeliner 10s infinite;
}
#intro
{
    position:absolute;
    z-index:2;
    width: 60%;
    text-align: left;
    margin-left: 7%;
    margin-top: -25%;
    line-height: -3%;
    color:white;
}
.inpart1
{
    font-size: 2.5em;
    font-weight: bold;
    text-align: left;
    margin-bottom: 1.5%;
}
.inpart2
{
    font-size:1em;
    margin-bottom: 1.5%;
}
.marque
{
    color:rgb(12, 163, 206);
}
.boutoninfo
{
    font-size:1.3em;
    color:white;
    background-color:rgb(12, 163, 206);
    max-width: 110px;
    border-radius:2px;
    padding:7px;
}
.boutoninfo:hover
    {
    box-shadow: 5px 5px 10px rgba(0,0,0,0.8);
    }
#button
{
    display:flex;
    justify-content:space-between;
    width: 100%;
    position: absolute;
    z-index:2;
    color: white;
    margin-top: -20%;
}
.fleche1
{
    background-color: rgba(0,0,0,0.6);
    height: 80px;
    width: 40px;
    border-radius: 0 40px 40px 0;
}
.fa-chevron-left
{
    padding-top: 25px;
    padding-left: 2px;
}
.fleche2
{
    background-color: rgba(0,0,0,0.6);
    height: 80px;
    width: 40px;
    border-radius: 40px 0 0 40px;
    margin-left: 90px;
}
.fa-chevron-right
{
    padding-top: 25px;
    padding-left: 15px;
}
.fleche1:hover, .fleche2:hover
{
    background-color:rgba(0,0,0,1);
    cursor: pointer;
} 
/*Nos services*/
#nosservices
{
    position: relative;
    z-index: 1;
    margin-bottom: 3%;
    margin-top: 2%;
}
#services
{
    display: flex;
    justify-content: center;
    width: 100%;
}
    .noss:nth-child(2)
    {
        text-align: justify;
        width: 35%;
        height:100%;
    }
#blockux, #blockui, #blockseo
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.designlogo
{
    position: absolute;
}
.fa-line-chart, .fa-cubes, .fa-pie-chart
{
    color:rgb(12, 163, 206);
    border:1px silver solid;
    border-radius: 50px;
    padding: 15px;
    font-size: 1.5em;
    position: absolute;
    z-index: 1;
    width: 35px;
    margin-top: -25px;
}
.pointd
{
    border-radius: 50%;
    background-color: rgb(12, 163, 206);
    width: 10px;
    height: 10px;
    margin-left: 60px; 
    position: absolute;
    z-index: 2;  
}
.block1, .block2, .block3
{
    width: 85%;
    margin-left: 15%;
}
/*Nos projets*/
#nosprojets
{
    width: 100%;
    background-color: rgb(230,230,230);
    margin:auto;
    padding-top: 1%;
    text-align: center;
}
.bradio
{
    background-color: rgb(200,200,200);
    border-radius: 2px;
    font-size:1.1em;;
    color: black;
    position: relative;
    width: 100px;
    height: 30px;
    padding-left: 5px;
    padding-top: 10px;
    display: inline-block;
    margin:-3px;
    border-bottom: 4px rgb(200,200,200) solid;
}
input[type="radio"]
{
    display: none;
}
#allwork:checked ~ #image figure.allwork-img{
    display: block;
}
#creative:checked ~ #image figure.creative-img{
    display: block;
}
#corporate:checked ~ #image figure.corporate-img{
    display: block;
}
#portfolio:checked ~ #image figure.portfolio-img{
    display: block;
}
input:checked + label
{
    border-bottom: 5px rgb(12, 128, 147) solid;
    background-color: rgb(12, 163, 206);
    color: white;
    transition: 1.5s;
    margin-top:-3px;
}
input:checked +label .fa-caret-down
{
    display: block;
}
label .fa-caret-down 
{
    display: none;
    position: absolute;
    z-index: 2;
    color:rgb(12, 128, 147);
    margin-top: 8px;
    margin-left: 45px;
}
input + label:hover
{
    background-color: rgb(12, 163, 206);
    border-bottom: 5px rgb(12, 128, 147) solid;
    color: white;
    cursor: pointer;
    transition: 0.7s;
}
#image
{
    display: flex;
    justify-content: space-around;
    flex-wrap:wrap;
    position: relative;
    width: 95%;
    max-width: 1500px;
    margin:auto;
    margin-top:30px;
}
figcaption
{
    display: none;
}
img:hover + figcaption, figcaption:hover
{
    display: block;
    position: absolute;
    z-index: 2;
    margin-top:-90px;
    background-color: rgba(0,0,0,0.4);
    color: white;
    margin-bottom: 0;
    width:350px;
    height:86px;
}
.imgprojet
{
    width: 350px;
    height: 200px;
}
.fa-eye
{
	float: right;
    color: white;
    background-color: rgb(12, 163, 206);
    border: white 2px solid;
    border-radius:50%;
    padding: 10px;
    margin-top: -20px;
    margin-right:40px;
}
.ajout
{
	margin-top: 30px;
	text-align: justify;
	margin:15px;
}
.allwork-img
{
    margin:3% 0;
    margin:50px 0;
    display: none;
}
/* Contact */
#contact
{
    height:900px;
    position:relative;
    margin:auto; 
    margin-top: 7%;
}
iframe
{
    margin-top:10%;
    z-index: 1;
    position:absolute;
    width:99.8%;
    height:70%;
    margin:auto;
}
#blue
{
    background-color: rgba(80,180,250,0.3);
    z-index: 2; 
    position:absolute;
    width: 100%;
    height:70.5%;
    margin:auto;
}
#formulaire
{
    position: absolute;
    display: inline block;
    vertical-align: center;
    width: 400px;
    margin-left: 60%;
    margin-top: 3%;
    border-radius:5px;
    z-index:3;
    background-color: rgba(250,250,250,0.8);
}
h4
{
    font-size:3em;
    margin-left:25px;
    margin-top:3%;
    margin-bottom:0;
}
.adresse
{
    margin-top:20px;
    margin-bottom:15px;
    color:rgb(100,100,100);
}
.adress
{
    margin-left:25px;
    margin-bottom:5px;
    margin-top:0;
}
.noma
{
    font-size:1em;
    font-weight:bold;
}
#name,#mail,#sujet
{
    font-size:0.9em;
    margin-left:20px;
    width:88%;
    height:30px;
    margin-bottom:2%;
    padding-left:2%;
}
#message
{
    font-size:0.9em;
    margin-left:20px;
    width:88%;
    height:200px;
    margin-bottom:2%;
    padding-left:2%;
    font-family: helvetica;
}
.bouton
{
    width:130px;
    height:35px;
    font-size:0.9em;
    border-radius: 4px;
    background-color:rgb(12, 163, 206);
    margin-right:10%;
    padding:0;
    color:white; 
}
#bouton
{
    margin-left:5%;
    margin-bottom: 10px;
}
/* Responsive */
@media screen and (max-width:1281px){
    .inpart1
    {
        font-size: 2em;
    }

    .inpart2
    {
        font-size: 0.9em;
    }

    .boutoninfo
    {
        font-size: 1.3em;
    }

    .block1, .block2, .block3
    {
        margin-left: 20%;
    }
    .introservices, .introprojets
	{
    	width: 70%;
    	margin: 1.5% auto;
    	text-align: center;
    	font-size: 1.1em;
	}
}
@media screen and (max-width:949px){
    nav
    {
        display: flex;
        flex-direction:column;
        justify-content:center;
        height: 120px;
    }
    .en-tête1, .en-tête2
    {
    	display: flex;
    	justify-content: space-around;
    	margin: 0;
    	width: 100%;
    }

    #slider
    {
        display: none;
    }
    #services
    {
        display: flex;
        flex-direction:column;
        align-items:center;
    }
    .introservices
    {
        width: 90%;
    }
    .introprojets
    {
        width: 90%;
    }
    aside
    {
        width:100%;
    }
    .mac
    {
        width:100%;
    }
    .noss:nth-child(2)
    {
        width: 90%;
        margin: auto;
    }
    #contact
    {
        width: 100%;
        height:100%;
        margin:auto; 
        margin-top: 7%;
    }
    #contact iframe
    {
        width: 100%;
        height: 100%;
    }

    #blue
    {
        width: 100%;
        height: 100%;
    }
    #formulaire
    {
        margin:0;
        height: 100%;
        width: 100%;
        position: relative;
    }
    .block1, .block2, .block3
    {
        margin-left: 15%;
    }
    hr
    {
    	width:15%;
    }
}
@media screen and (max-width:479px){ 
    html 
    {
        width: 100%;
        height: 100%;
    }
    body 
    {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    #slider
    {
        display: none;
    }
    .nelement
    {
    	font-size: 1em;
    }
    #services
    {
        display: flex;
        flex-direction:column;
        align-items:center;
        width:100%;
    }
    .introservices
    {
        width: 90%;
    }
    .introprojets
    {
        width: 90%;
    }
    .noss:nth-child(2)
    {
        width:90%;
    }
    .block1, .block2, .block3
    {
        margin-left: 27%;
    }
    .bradio
	{
	    background-color: rgb(200,200,200);
	    border-radius: 2px;
	    font-size:0.9em;;
	    color: black;
	    position: relative;
	    width: 90px;
	    height: 25px;
	    display: inline-block;
	    margin:-3px;
	    border-bottom: 4px rgb(200,200,200) solid;
	}
	label .fa-caret-down 
	{
	    display: none;
	    position: absolute;
	    z-index: 2;
	    color:rgb(12, 128, 147);
	    margin-top: 8px;
	    margin-left: 40px;
	}
	hr
	{
		width: 20%;
	}
}