@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,300italic);
@import url(fonts/mg_cosmetica/stylesheet.css);


html{

background: #888888;
background: -moz-linear-gradient(left,  #888888 0%, #efefef 30%, #efefef 70%, #888888 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#888888), color-stop(30%,#efefef), color-stop(70%,#efefef), color-stop(100%,#888888));
background: -webkit-linear-gradient(left,  #888888 0%,#efefef 30%,#efefef 70%,#888888 100%);
background: -o-linear-gradient(left,  #888888 0%,#efefef 30%,#efefef 70%,#888888 100%);
background: -ms-linear-gradient(left,  #888888 0%,#efefef 30%,#efefef 70%,#888888 100%);
background: linear-gradient(to right,  #888888 0%,#efefef 30%,#efefef 70%,#888888 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#888888', endColorstr='#888888',GradientType=1 );



    
    overflow-y: scroll;
    height: 100%;
    font-size: 16px;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 300;
}

html, body{
    padding:0;
    margin:0;
}

body {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    border-style:solid;
    border-color: #888;
    border-width: 0 1px;
    margin:0 auto;
    padding:0 1em;
    max-width: 1000px;
    width: 100%;
    min-height: 100%;
    background: #FAFAFA;
}

a{
    text-decoration:none;
    color: black;
    font-weight: 300;
    font-style: italic;
}

a:hover {
    border-bottom: 1px dotted #666;
    /* background: #e1e1e1; */
}

.nobr{
    white-space: nowrap;
}

h2 {
    font-family: cosmetica;
    font-weight: 700;
    font-size: 1.1em;
    margin: 2em 0 .6em 0;
}

.container{
   
}

address{
    font-style: normal;
}



header h1,
header p{
    margin: 0;
}

header {
    margin-bottom: 2em;
}

header .centerpiece{
    display: inline-block;
}

header .centerpiece > h1 {
    white-space: nowrap;
    font-size: 5.5em;
    font-weight: 200;
}
header .centerpiece > h1 + p {
    white-space: nowrap;
    font-size: 1.9em;
    margin-top: -0.2em;
    letter-spacing: 0.02em;/* only when using a bold typeface */
    font-family: 'cosmetica', sans-serif;
    font-weight: 700;
}

header .centerpiece .contact {
    font-size: 1.6em;
}
header .centerpiece .contact>*{
    white-space:nowrap;
}
header .centerpiece .contact>*:before{
    content: '';
    display: block;
}
.phone .number{
    word-spacing: -.03em;
}


header>nav {
    font-size: 16px;
}

header>nav>ul{
    list-style: none;
    padding: 0;
    margin: 1.5em 0 .5em 0;
    white-space: nowrap;
}
header>nav>ul>li{
    padding: 0;
    display: inline-block;
    width: 4em;
    text-align: center;
    background: #e1e1e1;
    margin-right: .3em;
}

header>nav>ul>li>a{
    text-decoration: none;
    color: black;
    font-style: normal;
}
header>nav>ul>li>a:hover{
    font-style: italic;
    border: none;
}
header>nav>ul>li>a.active{
    font-family: cosmetica, sans-serif;
    font-weight:bold;
}

small{
    font-weight: 200;
}


blockquote:before{
    content: "»"
}
blockquote:after{
    content: "«"
}

.quote blockquote{
    /** margin: 3em 0 0 0; **/
	margin: 0em 0 0 0;
    font-size: 1.8em;
    font-weight: 200;
}

.quote blockquote>span{
    display:block;
}

.quote .author{
        margin-left: 3em;
        margin-top: .7em;
        display: block;
}

.feat {
    margin-bottom: 1em;
    position: relative;
}

.feat p small{
    white-space: nowrap;
}

.feat .data a:before {
    display: block;
    content: '';
}

.feat .data .nobr a:before,
.feat .data a.nobr:before {
    display:none;
}
.feat p {
    line-height: 1.2em;
    margin: 0 0 0.2em 0;
}



head {
    content: 'smaller';
    font-family: 'smaller';
}
header .centerpiece{
    font-size: 10px
}

.feat h3 {
    margin: 0;
    position: static;
    display:block;
    width: auto;
    font-weight:300;
    font-size:1.2em;
}
.feat .data {
    width: auto
}

.feat .portrait{
    line-height: 2em;
}
.feat .portrait img {
    vertical-align: baseline;
    max-width: 300px;
    width: 90%;
    margin-right:.5em;
}
.feat .portrait p {
    display: inline-block
}

.law {
    font-size: 72.5%;
}

@media screen and (min-width: 350px) {
    html{
        font-size: 18px;
    }
    header>nav {
        font-size: 18px;
    }

    body {
        padding:0 1.5em;
    }
    head {
            content: 'small';
            font-family: 'small';
    }
    
    header>nav {
        font-size: 20px;
    }
    .feat p {
        line-height: 1.1em;
    }
    
    .quote blockquote{
        white-space: nowrap;
        font-size: 1.5em;
        text-indent:-.15em;
    }
    .quote blockquote>span{
        display:inline;
    }
    .quote .author{
        display: block;
        max-width: 12em;
        text-align: right;
    }
    
	.data.quote {
	    padding-bottom: 1em;
	}
}

@media screen and (min-width: 560px) {
    body {
        padding:0 2em;
    }
    
    header{
        padding-left: 30%;
    }
    
    .feat .data,
    .feat h3 {
        width: 70%;
    }
    .feat h3 {
        text-align: left;
    }
    .feat {  
        direction: rtl;
    }
    .feat>*{
        direction: ltr;
    }

    h2{
        width: 27%;
        text-align: right;
    }
    
    .feat h3 {
        width: 27%;
        position: absolute;
        top: 0;
        left: 0;
        text-align: right;
      /*  font-weight: 300; */
        font-size: 1em; 
    }
    
    .quote blockquote{
        /** margin: 4em 0 0 0; **/
		margin: 0em 0 0 0;
        font-size: 1.7em;
    }
    
    .quote .author{
        max-width: 17em;
    }

}


@media screen and (min-width: 715px) {

    head {
        content: 'big';
        font-family: 'big';
    }
    header .centerpiece{
        font-size: 14px
    }
    header .centerpiece .contact {
        font-size: 1.26em;
    }
    header .centerpiece .contact>*:before{
        content: none;
        display: inline;
    }
    header .centerpiece .contact>*:last-child:before{
        content: '• ';
        display: inline;
    }
    
    .feat p {
        line-height: 1.2em;
        margin: 0 0 0 0;
    }
    
    .quote blockquote{
        /** margin: 5em 0 0 0; **/
		margin: 0em 0 0 0;
    }
    
    .quote .author{
        max-width: 19.5em;
    }
}

strong {
    font-family: cosmetica;
    font-weight: 700;
}

footer{
    background: #FAFAFA;
    border-top: 1px solid transparent;
}

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

	.quote .author {
		display: block;
		max-width: 12em;
		text-align: right;
	}

	.quote blockquote > span {
		display: inline;
	}
	.quote blockquote {
		font-size: 1.6em;
	}
	header {
		margin-bottom: 1em;
	}
}