@charset "UTF-8";

#header { 
	padding: 45px 0px 20px 0px;
}
#navbar {
	height: 30px;
	margin: 30px 0px 0px 0px;
	text-align: right;
}
#portfolio {
	margin-top:20px;
	}
#portfolio img {
	width:100% !important;
	border:solid 1px #cccccc;
	-webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
		-moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
		box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
}
h2 {
	text-align:left;
	font: 17px/20px 'Oswald', sans-serif !important;
	color: #5b5b5b !important;
	font-weight: 400 !important;
	letter-spacing:1px;
	margin:24px 0px 8px 0px !important;padding:0px !important;
}

.logo
{background:url(img/logo_sographiste.png) no-repeat;width:290px !important;display:block;width:290px;background-size: 290px 57px !important;height:57px !important;}
.logo:hover
{text-decoration:none;}


.btnav{
	font: 20px 'Oswald', sans-serif;
	font-weight: 300;
	color:#696a6c;
	padding-left:16px;
	letter-spacing:1px;
}
.btnav a{
	text-decoration:none;
	color:#696a6c;
}
.btnav a:hover{
	text-decoration:none;
	color:#b70f2a;
}


.description{
	clear:both;
	margin:13px 0px 60px 0px;
	padding:7px 15px 0px 15px;
	text-align:left;
	font: 13px/16px 'Raleway', sans-serif;
	font-weight: 400;
	color: #5b5b5b;
}
.description a {
	text-decoration:none;
	color: #5b5b5b;
}
.description a:hover {
	text-decoration:underline;
	color: #5b5b5b;
}

.text-profil {
	text-align:left;
	font: 15px/20px 'Raleway', sans-serif;
	font-weight: 300;
	color: #5b5b5b;
}
.text-profil a {
	text-decoration:none;
	color: #b70f2a;
}
.text-profil a:hover {
	text-decoration:none;
	color: #e10024;
}
#text-rouge {
	color: #b70f2a;
	font-weight: 600;
}
.so-profil {
	width:100%;
	max-width:560px;
	height:auto;
	display:block;
}
#col-left {
	margin-top:35px!important;
}
#col-right {
	margin-top:40px!important;
}
.spacer-desktop{
	clear:both;
	height:20px;
	}
	
.text-800 {
	font: 12px/15px 'Raleway', sans-serif;
	font-weight: 800;
	color:#414141;
}

.credits {
	clear:both;
	margin-top:36px;
	font: 11px/13px 'Raleway', sans-serif;
	font-weight: 400;
	color:#5b5b5b;
	letter-spacing:1px;
	text-align:left;
	text-transform:uppercase;
}
.credits a {
	color:#5b5b5b;
	text-decoration:none;
}
.credits a:hover {
	color:#b70f2a;
	text-decoration:none;
}
.template #footer {
	clear:both !important;
	float:left !important;
	width:100% !important;
	margin:300px 0px 0px 0px !important;
	text-align:left !important;
	padding: 20px 0px 35px 0px !important;
}

@media (max-width: 990px) {
#col-left {
	display:none !important;
}

}


@media (max-width: 768px) {
	.description{
	clear:both;
	margin:8px 0px 35px 0px;
	padding:7px 15px 0px 15px;
}

#col-left {
	display:none !important;
}

}





body{margin: 50px 0px 40px 0px;padding:0px 0px 30px 0px !important;color: #5b5b5b000;}

.container{width:100% !important;max-width:1200px;}
@media (min-width: 1200px) {
	#main {width: 1200px;}
}

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



.logo
{background:url(img/logo_sographiste_mobile.png) no-repeat;}

.text-profil {
	font: 15px/20px 'Raleway', sans-serif;
	font-weight: 400;
}
#portfolio img {
	border-left:none;
	border-right:none;
}
}


@media only screen and (min-device-width : 768px) and (max-device-width : 963px) and (orientation : portrait) {



#col-right {
	margin: 35px 10px 0px 10px;
}
#margin-left{
	margin-left: 5px !important;
}
#header { 
	padding: 45px 5px 20px 10px;
}
h2 {
	margin:17px 0px 5px 0px !important;padding:0px !important;
}
#col-left {
	display:none !important;
}
.spacer-desktop{
		display:none;
	}

}





@media only screen and (min-device-width : 768px) and (max-device-width : 963px) and (orientation : landscape) {

#col-right {
	padding-right: 20px !important;
}
#margin-left{
	margin-left: 5px !important;
}
#header { 
	padding: 45px 5px 20px 5px;
}
}

@media (max-width: 763px) {

#navbar {
	height: 30px;
	margin: 35px 0px 0px 0px;
	text-align: left;
}
.btnav{
	padding-left:0px !important;
	padding-right:16px !important;
}
.description{
	font: 12px/15px 'Raleway', sans-serif;
}
}

@media (max-width: 420px) {
.text-profil {
	font: 12px/15px 'Raleway', sans-serif;
	font-weight: 400;
}
#header { 
	padding: 20px 5px 5px 5px;
}
.logo
{width:280px !important;display:block;width:280px;background-size: 280px 55px !important;height:55px !important;}

.template #footer {
	line-height:12px;
}
.credits {
	font: 10px/10px 'Raleway', sans-serif;
	font-weight: 300;
}
}