@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'HelveticaNeue';
    src: url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-roman-webfont.eot');
    src: url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-roman-webfont.eot?#iefix') format('embedded-opentype'),
         url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-roman-webfont.woff') format('woff'),
         url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-roman-webfont.ttf') format('truetype'),
         url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-roman-webfont.svg#HelveticaNeueLTStd55Roman') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-bd-webfont.eot');
    src: url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-bd-webfont.eot?#iefix') format('embedded-opentype'),
         url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-bd-webfont.woff') format('woff'),
         url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-bd-webfont.ttf') format('truetype'),
         url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-bd-webfont.svg#HelveticaNeueLTStd75Bold') format('svg');
    font-weight: bold;
    font-style: normal;

}

@font-face {
    font-family: 'HelveticaNeueLight';
    src: url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-lt-webfont.eot');
    src: url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-lt-webfont.eot?#iefix') format('embedded-opentype'),
         url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-lt-webfont.woff') format('woff'),
         url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-lt-webfont.ttf') format('truetype'),
         url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-lt-webfont.svg#HelveticaNeueLTStd45Light') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-it-webfont.eot');
    src: url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-it-webfont.eot?#iefix') format('embedded-opentype'),
         url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-it-webfont.woff') format('woff'),
         url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-it-webfont.ttf') format('truetype'),
         url('//mariamacias.com/squelettes/fonts/helveticaneueltstd-it-webfont.svg#HelveticaNeueLTStd56Italic') format('svg');
    font-weight: normal;
    font-style: italic;

}

html, body { 
	padding: 0;
	margin: 0;
}
* {
	margin: 0;
	padding:0;
}
table.mid {
	height: 100%;
	width: 100%;
	border: 0;
	overflow: hidden;
}

img {border: 0;}
body {
	color:#000;
	background-color: #fff;
	font-family: HelveticaNeue, Arial, Helvetica, sans-serif;
	font-size: 16px;
	padding: 10px 0;
}
a, a:link {
	color: #000;
}
a:hover {
	color: #CCC;
}
p {
	line-height: 1.5em;
	margin-bottom: 8px;
}
h1, h2, h3 {
	font-size: 16px;
	font-weight: bold;
	margin: 4px 0;
	color: #000;
	text-transform: lowercase;
}
h4 {
	font-size: 14px;
	font-weight: normal;	
	font-family: HelveticaNeueLight, Arial, Helvetica, sans-serif;
	margin-bottom: 4px;
	color: #666;
	text-transform: lowercase;
}
#main {width: 1310px;margin: 0 auto;}
#head, #warpper, #footer {
	width: 100%;
	clear:both;
}
#menu {float: left;}
#head {height: 130px;}
#head #ariane {
	float:left;
}
#head #ariane .rub {
	font-family: HelveticaNeue, Arial, Helvetica, sans-serif;
	font-size: 86px;
	letter-spacing: -4px;
	font-weight: bold;
	line-height: 86px;
}
#head #ariane .art {	
	color: #CCC;
	font-family: HelveticaNeueLight, Arial, Helvetica, sans-serif;
	font-size: 29px;
	letter-spacing: -1px;
	text-align: right;
	padding-top: 7px;
}
#header {
	width: 181px;
	float: right;
	clear: right;
	position:relative;
	text-align:right;
	z-index:1;
	margin-top: 30px;
}
#head #header a {
	text-decoration: none;
	color: #000;
	display: block;
}
#head #header a object {
	pointer-events: none;
}
#head #header .name {
	font-family: HelveticaNeue, Arial, Helvetica, sans-serif;
	font-size: 34px;
	letter-spacing: -1px;
	line-height: 34px;
	display: inline-block;
	text-align:right;
}
#head #header .tag {
	color: #CCC;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 15px;
	font-weight: bold;
	padding-right: 1px;
	line-height: 15px;
	display: inline-block;
	text-align:right;
}

#warpper {
	margin: 0 auto;
	margin-top: 20px;
}
#content {
	float: left;
	width: 910px;
}
#menu {
	width: 351px;
	padding-left: 49px;
	padding-top: 90px;
	float: left;
}

.affiche{visibility:visible; margin-top: 6px;}
.cache{display:none;}
.dies{display:none;width:20px;margin-left:-22px;text-align:right;padding-right:2px;}
a.lienon .dies{display:inline-block;}
.lien{color:#000;text-decoration:none;}
.lienon{color:#000;text-decoration:none;}
ul.racine, ul.racine li {list-style:none;}
ul.racine>li{margin-top:2px;}
li.active>a.lienon {color:#ccc !important;}

ul.article li a {
	font-family: HelveticaNeueLight, Arial, Helvetica, sans-serif;
	font-size: 20px;
	line-height: 20px;
	color: #ccc;
}
ul.article li a:hover, ul.article li a.lienon {
	color: #8a8a8a;
}

ul.racine>li>a {	
	font-family: HelveticaNeue, Arial, Helvetica, sans-serif;
	font-size: 38px;
	line-height: 38px;
	font-weight: bold;
}

#galleria, #gallery {
	height: 676px;
	width: 910px;
}
.clear {clear:both;}
#home {
	width: 850px;
	height: 497px;
	position: relative;
	float:right;
}
#home ul {
	list-style-position: outside;
	list-style-image: none;
	list-style-type: none;
}
#home div {
	position: absolute;
	width: 850px;
	height: 497px;;
}
#home .slide1 {
	background-repeat: no-repeat;
	background-position: right top;
	background-attachment: scroll;
	background-color: #FFF;
	background-image: url('//mariamacias.com/squelettes/home.jpg');
}
.vid {
	text-align: right;
	float: right;
	width: 850px;
	margin-bottom: 10px;
}
.vid iframe {
	background-color: #000;
}
.vid h1, .vid h2,.vid h3,.vid h4 {
	width: 34%;
	float: right;
	clear: both;
}
.strip {
	font-size: 12px;
	width: 850px;
	margin: 0 auto;
	padding-top: 10px;
	display: grid;
	grid-template-columns: 272px 272px 272px;
	grid-gap: 16px;
}
.strip .vid-it a {
	display: block;
}
.strip .vid-it{
	width: auto;
	min-height: 145px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.strip .vid-it span {
	font-size: 13px;
	padding: 5px 7px 0 7px;
	line-height: 13px;
}
.strip .vid-it a img {
	transition: 1s;
}
.strip .on img, .strip .vid-it a:hover img {
	-webkit-filter: grayscale(0.75) brightness(1.2); /* Safari 6.0 - 9.0 */
    filter: grayscale(0.75) brightness(1.2);

}
#ds {
	font-size: 16px;
	width: 300px;
	margin: 20px 28px;
	line-height: 18px;
	float: left;	
	font-weight: bold;
}
#ds a {
	color: #000;
	text-decoration: none;
}
#ds a:hover {
	text-decoration: underline;
}
#content .biologo {
	float: left;
	width: 408px;
}
#content .bio {
	float: right; 
	width: 450px;
	font-size: 14px;
	text-align: justify;
}

#content .contact fieldset {
	border: 0;
}
#content .contact .formulaire_spip {
	border: 0px none #fff !important;
	width: 620px;
	
	font-family: AdiHausRegular, Arial, Helvetica, sans-serif !important;
}
#content .contact fieldset legend, .spip_form_label_details {
	visibility: hidden !important;
	display: none !important;
}
#content .contact .editer {
	margin-bottom: 26px;
	margin-top: 0 !important;
}
#content .contact .obligatoire span {
  display: none;
}
#content .contact .obligatoire:after {
  content: '[*]';
}
#content .contact .editer label, .formulaire_spip .spip_form_label {
	font-weight: normal !important;
	color: #000;
}
#content .contact input, #content .contact textarea {
	background-color: transparent;
	border-top-width: 0;
	border-right-width: 0;
	border-bottom-width: 1px;
	border-left-width: 0;
	border-bottom-style: dotted;
	border-bottom-color: #000;
	border-top-style: none;
	border-right-style: none;
	border-left-style: none;
	color: #000;
	width: 72%;
}
#content .contact input:focus, #content .contact textarea:focus {
	border-bottom-color: #AE0000 !important;
}
#content .contact input {
	float:right;
}
#content .contact .boutons {
	background-color: transparent;
	background-attachment: scroll;
    background-image: url('//mariamacias.com/squelettes/assets/arrow.png');
    background-position: 0 5px;
    background-repeat: no-repeat;
	font-size: 11px;
	padding-left: 11px !important;
	float: right;
	margin-top: 6px;
    margin-right: 5px;
	clear: both;
}
#content .contact .boutons input {
	float: right;
	color: #fff;
	background-color: #000;
	border: 0 none;
	font-size: 11px;    
	font-family: ChaletRegular,Arial,Helvetica,sans-serif;
	cursor: pointer;
	padding: 2px 3px 0 3px !important;
	width: auto !important;
	font-weight: normal !important;
}
#content .contact .boutons input:hover {
	background-color: #cc0000;
}
#content .contact .spip_form_label {
	float: left;
}
#content .contact textarea {
	float: right;
}
#content .contact .erreur {
	font-size: 10px;
	font-style: italic;
	color: #ff0000;
	float: left;
}
#content .contact .titrem {
	visibility: hidden;
}
#content .vid h2 {
	text-transform: none !important;
}
#content .vid i.fas {
	font-size: 26px;
	padding-left: 8px;
}
#content .vid .spip_documents  img {
	margin: 0 auto;
	display: block;
}


            /**
             * (optional) define here the style definitions which should be applied on the slider container
             * e.g. width including further controls like arrows etc.
             */
            .slider {}

            .frame {
                /**
                 * (optional) wrapper width, specifies width of the slider frame.
                 */
                width: 910px;

                position: relative;
                font-size: 0;
                line-height: 0;
                overflow: hidden;
                white-space: nowrap;
            }

            .slides {
                display: inline-block;
            }

            li {
                position: relative;
                display: inline-block;

                /**
                 * (optional) if the content inside the slide element has a defined size.
                 */
                width: 910px;
            }

            .prev, .next {
                position: absolute;
                top: 50%;
                margin-top: -25px;
                display: block;
                cursor: pointer;
            }

            .next {
                right: 0;
            }

            .prev {
                left: 0;
            }

            .next svg, .prev svg {
                width: 25px;
            }