.surveillance {text-align: center;}

.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;}

.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(169, 195, 218, 0.7);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;}

.view-first h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;}
   
.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;}
   
.view-first:hover img {
   -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);}
   
.view-first a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;}
   
.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;}
   
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);}
   
.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;}
   
.view-first:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;}

.view {
    width: 100%;
    height: auto;
	margin: auto;
    overflow: hidden;
    position: relative;
    text-align: center;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;}
    
.view .mask, .view .content {
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;}

.view img {
    display: block;
    position: relative;
    max-width: 100%;
    height: auto;
}

.view h2 {
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 1.4em;
    padding: 0.3em;
    background: rgba(0, 0, 0, 0.8);
    margin: 5% 0 0 0
}

.view p {
    font-family: Helvetica, serif;
    font: bolder;
    font-size: 150%;
    position: relative;
    color: #fff;
    margin-top: 5%;
    padding: 2em;
    text-align: center}

.view a.info {
    display: inline-block;
    text-decoration: none;
    padding: 0.5em 0.8em;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000}

.view a.info:hover {box-shadow: 0 0 0.3em #000;
}

.presentation {width:73%;
margin: auto;
text-align: justify;
padding: 0.8em 0 0 0;
font: 1.4em/1.4 Helvetica;
font-weight: 100;
color: #4c4b4b;}

h1 {font: 195%/100% "Lucida Grande","Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
margin-top: 1.5em;
margin-left: 0;
margin-bottom: 0.5em;
color: #6d6b6b;
font-size: 2.3em;}

h2 {font-size: 1.5em;
text-align: left;
margin-left: 0;
margin-top: 2.1em;
margin-bottom: 0.8em;}

.presentation a:link {color: #4c4b4b;
	text-decoration:underline;
outline: none;}

a:active  {text-decoration:underline;}

.presentation a:hover, a:active {text-decoration: underline;}

.choix h1 {font: 195%/100% Helvetica, Arial, sans-serif;
text-align: center;
margin: auto;
margin-bottom: 1.5em;
margin-top: 1em;
color: #464646;
font-size: 2em;}

.choix {width: 80%;
min-width: 300px;
max-width: 800px;
margin: auto;
background-color: #fafafa;
padding-top: 2em;
padding-bottom: 2.5em;
margin-top: 7em;
margin-bottom: 5em;
border: 1px solid #ddd;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
overflow: hidden;}

.choix ul {width: 29em;
overflow: hidden;
margin: auto;
margin-bottom: 1.5em;}

.choix-niveau {list-style: none;
text-decoration: none;
float: left;
font-size: 1.6em;
margin-left: 2em;
background-color: #fdfdfd;
width: 2em;
height: 44px;
padding-top: 5px; /* permet le centrage vertical */
text-align: center;
border: 1px solid #ddd;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-border-radius: 1.5em;
-moz-border-radius: 1.5em;
border-radius: 1.5em;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;}
                 
.choix-niveau a {color: #8b8888;
text-decoration: none;}

.choix-niveau:hover {background: #efefef;
text-decoration: none;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);}

.choix-niveau a:hover {text-decoration: none;}



@media screen and (max-width: 640px)
{

	.presentation{width: auto;
	margin: 0.8em;}	

	.choix {margin-bottom: 1em;
	margin-top: 1em;}
	
	.choix ul {width: 16em;
	margin-top: 1em;
	margin: auto;}
		
	.choix-niveau {margin-top: 0.2em;
	margin-bottom: 0.2em;
	}
	
	.choix h1 {font-size: 2.1em;
	text-align: center;
	margin: auto;}
	
	h1 {font-size: 1.2em;
	margin-top: 0.1em;}
	
	.surveillance img {width: 85%;}
	
	.view {
    width: 100%;
    height: auto;}
    
	.view .mask, .view .content {
    width: 100%;
    height: auto;}

	.view img {
    display: block;
    position: relative;
    max-width: 100%;
    height: auto;}
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
	
	.presentation{width: auto;
	margin: 1em;}	
	
	.choix {margin-bottom: 3em;
	margin-top: 3em;}
	
	.view img {
    display: block;
    position: relative;
    max-width: 100%;
    height: auto;}
    
     .view .mask, .view .content {
    width: 100%;
    height: auto;}
    
    .view {
    width: 100%;
    height: auto;}
    
     h1 {font-size: 1.2em;
	margin-top: 0.1em;}
	
	.choix {margin-bottom: 1em;
	margin-top: 1em;}


}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
	
	.presentation{width: auto;
	margin: 1em;}
	
	.view img {
    display: block;
    position: relative;
    max-width: 100%;
    height: auto;}
    
    .view .mask, .view .content {
    width: 100%;
    height: auto;}
    
    .view {
    width: 100%;
    height: auto;}
    
    h1 {font-size: 1.4em;
	margin-top: 0.1em;}
	
	.choix {margin-bottom: 1em;
	margin-top: 1em;}
	
	.choix ul {width: 16em;
	margin-top: 1em;
	margin: auto;}
		
	.choix-niveau {margin-top: 0.2em;
	margin-bottom: 0.2em;
	}
	
	.choix h1 {font-size: 2.1em;
	text-align: center;
	margin: auto;}

}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { 
	
	.presentation{width: auto;
	margin: 0.8em;
	}	
	
	.view {
    width: 100%;
    height: auto;}
    
	.view .mask, .view .content {
    width: 100%;
    height: auto;}

	.view img {
    display: block;
    position: relative;
    max-width: 100%;
    height: auto;}

}

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) { 
	
	.presentation{width: auto;
	margin: 0.8em;
	}	
	
	.view {
    width: 100%;
    height: auto;}
    
	.view .mask, .view .content {
    width: 100%;
    height: auto;}

	.view img {
    display: block;
    position: relative;
    max-width: 100%;
    height: auto;}

}