@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap');

::selection{ background-color: #000; color: white; }
::moz-selection{ background-color: #000; color: white; }
::webkit-selection{ background-color: #000; color: white; }
           
           
            body{
	            font-family: 'Roboto', sans-serif;
	            color:#000;
	            margin-top:50px;
            }
            
            .cadre{
				position:relative;


	
                width:770px;
 
                display:block;
                margin:auto;
            }
            img.logo {
                display:block;
                margin:auto;
                padding:25px 0;
            }
            
            hr{
	            height:1px;
	            border:none;
	            outline:none;
	            margin:0;
	            background:rgba(0,0,0, .1);
            }
            
            
             #contact{
				 margin-top:50px;
	             text-align:center;

	            }
	            
	            #contact a{
		            display:inline-block;
		            text-align:center;
		            margin:0 auto;
	            }
            #social{
	            position:absolute;
	            right:25px;
	            bottom:25px;
	           
            }
            
            
            .facebook, .twitter, .google{
	           	display:inline;
				margin:30px 0 20px 0px;
				width:30px;
				line-height:30px;
				height:30px;
				background-size:30px 60px!important;

				

	            
	            background-position:left -1px!important;
				-o-transition:.2s;
				-ms-transition:.2s;
				-moz-transition:.2s;
				-webkit-transition:.2s; 
				transition:0.2s;
	            
            }
            #facebook span{
	            visibility: hidden;
            }
            
            .twitter, .google{
	            display:none;
            }
            
             .phone, .mail{
				display:inline-block;
				margin:30px 70px 20px 0px;
				padding-left:36px;
				padding-right:25px;
				min-width:100px;
				height:30px;
				background-size:30px 60px!important;

				line-height:30px;
				 
				 background-position:left -1px!important;
				-o-transition:.2s;
				-ms-transition:.2s;
				-moz-transition:.2s;
				-webkit-transition:.2s; 
				transition:0.2s;
             }
            
            .phone{
	            background:url('/Content/Themes/default/public/images/twosides_web_studio_phone.png') no-repeat;
            }
            
            .mail{
	            background:url('/Content/Themes/default/public/images/twosides_web_studio_mail.png') no-repeat;
            }
            
            
            .twitter{
	            background:url('/Content/Themes/default/public/images/twosides_web_studio_twitter.png') no-repeat;
            }
            
            .facebook{
	            background:url('/Content/Themes/default/public/images/twosides_web_studio_facebook.png') no-repeat;
            }
            
            .google{
	            background:url('/Content/Themes/default/public/images/twosides_web_studio_google.png') no-repeat
            }
            
            .facebook:hover, .twitter:hover, .google:hover, .mail:hover, .phone:hover{

	            
	            background-position:left bottom!important;
				-o-transition:.2s;
				-ms-transition:.2s;
				-moz-transition:.2s;
				-webkit-transition:.2s; 
				transition:0.2s;
            }
            

            
            header{

                color:#000;
                padding:15px;
            }
            
            .cadre p{
                font-family: 'Roboto', sans-serif;
                padding:20px 40px;
                font-size:17px;
                line-height: 27px;
            }
            
            p.bottom{
            padding:10px 40px 0px 40px;
	            
            }
            
             h3{
	             font-family: 'Roboto', sans-serif;
	             padding:10px 40px;
             }
            
            h1{
	            font-weight:lighter;
	            text-align:center;
	            text-transform:uppercase;
            }
            
            a:link, a:visited, a:active, a{
	            color:#C1C1C1;
	            text-decoration:none;
	            
	           
	            
            }
            
            .icons{
	            
            }
            
@font-face {
    font-family: 'Roboto', sans-serif;
    src: url('/Content/Themes/default/public/fonts/sourcesanspro-extralight-webfont.eot');
    src: url('/Content/Themes/default/public/fonts/sourcesanspro-extralight-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Content/Themes/default/public/fonts/sourcesanspro-extralight-webfont.woff') format('woff'),
         url('/Content/Themes/default/public/fonts/sourcesanspro-extralight-webfont.ttf') format('truetype'),
         url('/Content/Themes/default/public/fonts/sourcesanspro-extralight-webfont.svg#source_sans_proextralight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Roboto', sans-serif;
    src: url('/Content/Themes/default/public/fonts/sourcesanspro-light-webfont.eot');
    src: url('/Content/Themes/default/public/fonts/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/Content/Themes/default/public/fonts/sourcesanspro-light-webfont.woff') format('woff'),
         url('/Content/Themes/default/public/fonts/sourcesanspro-light-webfont.ttf') format('truetype'),
         url('/Content/Themes/default/public/fonts/sourcesanspro-light-webfont.svg#source_sans_prolight') format('svg');
    font-weight: normal;
    font-style: normal;

}