html
{
	margin: auto;
	width:100%;

}

body
{
	margin: auto;
	width:100%;
	 background: #f3f3f3;
        font-family: 'Open Sans', sans-serif;
        font-size: 1.2vw;
        line-height: 1.5;
        color: #333333;
        vertical-align: top;
}

nav
{
        background:#0d5983;
        width:90%;
        margin:auto;
        color:white;
        #position: fixed;
        padding: 0% 5%;
        text-align:center;
        position: -webkit-sticky;
        position: sticky;
        top: 0;

}

nav a
{
    color:white;
    font-size: 1.2vw;
    text-decoration:none;
}

nav a:hover
{
    color: #B5B5B5;
}

.cell
{
	margin:auto;
        width: 16%;
	display: inline-block;
	padding: 5px 0px;

	vertical-align: middle;
	text-align: center;
	font-weight: bold;
        
}


.logo
{
    height:50px;

}

.principal
{
    margin:auto;
    width:100%;

   
}


.portfolio
{
    
    text-align:left;
    margin:auto;
    vertical-align: top;
    background: white;
    border:none;
    padding:0;

}

.portfolio3
{
    
    text-align:center;
    margin:auto;
    vertical-align: top;
    background: white;
    padding: 1%;
}


.portfolio3-1
{
    width:25%;
    background: white; 
    display: inline-block;
    padding:2%;
    text-align:center;
    vertical-align:top;
    #height:420px;
}

.portfolio3-1 img
{
    width:75%;
    display:inline-block;

}


.portfolio-image
{
    width:50%;
    display:inline-block;
    text-align:center;
    left:0;
    

}

.portfolio-image img
{
    width:100%;
    vertical-align:middle;
    
}

.portfolio-texte
{
    #background:green;
    width:45%;
    display:inline-block;
    vertical-align: top;
        padding: 2%;
}

.portfolio-texte2
{
    #background:green;
    width:45%;
    display:inline-block;
    vertical-align: top;
        padding: 2%;
        text-align:left;
}

.portfolio-texte p
{
    margin: 3% 0%;
    font-size:1.1vw;
}


.portfolio2
{
    text-align:center;
    margin:auto;
    vertical-align: top;
    background: rgba(46,64,77,1);
    padding: 1%;
    color:white;
}


.box
{
    width:70%;
    background:#0d5983;
    color:white;
    margin:auto;
    padding:0.5%;
    text-decoration:none;
    margin:auto;

}

.box a
{
    color:white;
}

.mail
{
    color:white;
    text-decoration:none;
}
.mail:hover
{
    text-decoration:underline;
}

footer
{
    background:#0d5983;
    width:100%;
    color:white; 
    text-align: center;
}

h1
{
    color:#0d5983;
    text-align:center;
    font-size:1.7vw;
}



.titre_blanc
{
    color:white;
    text-align:center;
    font-size:1.5vw;
}

h2
{
    font-size:1.3vw;
    text-align:center;
}

.trio
{
    width:40%;
    display:inline-block;
    vertical-align:top;
    font-size:1.1vw;
    padding:1%;
}

.trio a
{
    color:white;
    text-decoration:none;
}

.picto
{
    width:13%;
}

.picto2
{
    width:4.5%;
    vertical-align:middle;
}


.contact-droit
{
  
  width:45%;
  display:inline-block;
    vertical-align:top;
    font-family:Helvetica;
    padding:2%;
  color: white;
    
}

.contact-droit input[type="text"]
{
    width:100%;
    border: solid 1px white;
    padding:1%;
    background-color:rgba(46,64,77,1);
    color:white;
}

.contact-droit textarea
{
    width:100%;
    border: solid 1px white;
    padding:1%;
    background-color:rgba(46,64,77,1);
    color:white;
}

#envoyer
{
    width:100%;
    #border: solid 1px white;
	background: #0d5983;
	color:white;
	 margin:auto;
        padding:1%;
	font-size:15px;
	font-weight:bold;
        
        
   
}

.contact-droit .antispam
{
    width:12%;
    
}

.contact-droit form
{
 text-align:left;   
    
}
form
{
 font-size: 1vw;   
}

hr
{
    width:50%;
 
}

ul
{
    text-align:left;
}
.screenshot
{
    border-radius:5px;
    border: 3px solid #ABAFB0;
    
}
.screenshot:hover
{
    border: 3px solid #FFD24A;
}