@charset "UTF-8";

@font-face {
    font-family: 'st_marie_thinthin';
    src: url('StMarie-Thin-webfont.eot');
    src: url('StMarie-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('StMarie-Thin-webfont.woff') format('woff'),
         url('StMarie-Thin-webfont.ttf') format('truetype'),
         url('StMarie-Thin-webfont.svg#st_marie_thinthin') format('svg');
    font-weight: normal;
    font-style: normal;

}

/*--------- RESET ----------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: 'st_marie_thinthin', Arial, sans-serif;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*--------- Custom ----------*/

@media screen and (min-width: 0px) {
#main {margin:0 20px; position:relative;}
header {margin:0 auto;}
#logo {width:100%; height:87px; max-width:auto; background-image:url('images/logo.png'); background-position:center; background-size:contain; background-repeat:no-repeat;}
#icon {width:283; height:355px; max-width:auto; background-color:#e6e7e8; background-image:url('images/icon_r.png'); background-position:center; background-repeat:no-repeat; margin:0 auto;}
h2 {margin-top:20px; font-size:43px;}

#links{margin:20px 0; border-top:1px #e6e7e8 solid; padding-top:20px;}
li {width:40px; height:40px; display:inline-block; cursor:pointer; border:0; padding:0; margin:0; -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
li:hover {-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}

li.web {background:url('images/social.png') -40px 0 no-repeat;}
li.be {background:url('images/social.png') -40px -40px no-repeat;}
li.fb {background:url('images/social.png') -40px -80px no-repeat;}
li.fl {background:url('images/social.png') -40px -120px no-repeat;}
li.pi{background:url('images/social.png') -40px -160px no-repeat;}
li.mail {background:url('images/social.png') -40px -200px no-repeat;}
li span {display:none;}
li:hover span {display:none;}

li a{display:block; width:40px; height:40px;}
}

@media screen and (min-width: 651px) {
#main {margin:0; position:relative;}
#logo {width:350px; height:87px; max-width:auto; background-image:url('images/logo.png'); background-size:contain; background-repeat:no-repeat; float:right; margin-top:-30px; float:right;}
#icon {width:283px; height:315px; max-width:auto; background-color:#e6e7e8; background-image:url('images/icon_r.png'); background-position:center; background-repeat:no-repeat;margin:30px 0 0 30px;}
section {position:absolute; top:0px; right:30px; height:315px;}
h2 {margin-top:80px; font-size:43px;}

#links{position:absolute; bottom:0px; left:0px; margin:0px; border-top:0px; padding-top:0px;}
li {width:40px; height:40px; display:inline-block; cursor:pointer; border:0; padding:0; margin:0; -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
li:hover {-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}

li.web {background:url('images/social.png') -40px 0 no-repeat;}
li.be {background:url('images/social.png') -40px -40px no-repeat;}
li.fb {background:url('images/social.png') -40px -80px no-repeat;}
li.fl {background:url('images/social.png') -40px -120px no-repeat;}
li.pi{background:url('images/social.png') -40px -160px no-repeat;}
li.mail {background:url('images/social.png') -40px -200px no-repeat;}
li span {display:none;}
li:hover span {display:none;}

li a{display:block; width:40px; height:40px;}
}

@media screen and (min-width: 960px) {
#main {width:960px; margin:0 auto; height:600px; position:relative;}
header {margin: 30px 30px 30px 0; }
#logo {width:350px; height:87px; background-image:url('images/logo.png'); background-position:left top; background-repeat:no-repeat; float:left; background-size:auto;}
#icon {width:580px; height:540px; background-color:#e6e7e8; background-image:url('images/icon.png'); background-position:right top; background-repeat:no-repeat; overflow:auto; background-size:auto; margin:0;}
section {position:absolute;  top:-30px; height:100%; right:auto;}
h2 {font-size:60px; margin-left: 143px; margin-top:107px;}

#links{position:absolute; bottom:30px; left:30px;}
li {width:40px; height:40px; display:inline-block; cursor:pointer; -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
li:hover {-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
li.web {background:url('images/social.png') 0 0 no-repeat;}
li.be {background:url('images/social.png') 0 -40px no-repeat;}
li.fb {background:url('images/social.png') 0 -80px no-repeat;}
li.fl {background:url('images/social.png') 0 -120px no-repeat;}
li.pi {background:url('images/social.png') 0 -160px no-repeat;}
li.mail {background:url('images/social.png') 0 -200px no-repeat;}
li.web:hover {background:url('images/social.png') -40px 0 no-repeat;}
li.be:hover {background:url('images/social.png') -40px -40px no-repeat;}
li.fb:hover {background:url('images/social.png') -40px -80px no-repeat;}
li.fl:hover {background:url('images/social.png') -40px -120px no-repeat;}
li.pi:hover {background:url('images/social.png') -40px -160px no-repeat;}
li.mail:hover {background:url('images/social.png') -40px -200px no-repeat;}
li span {display:block;position:absolute; left:335px; display:block; opacity:0; width:120px; height:40px; line-height:40px; -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out; bottom:0;}
li:hover span {display:block; opacity:1; -webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}

li a{display:block; width:40px; height:40px;}
}